From c227d9ee039f780abfd1e6fc340d8fa8062faec2 Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Sat, 27 Dec 2025 09:25:31 +0000
Subject: [PATCH] final ui of planner and writer

---
 .../src/components/header/HeaderMetrics.tsx   |  3 +-
 frontend/src/layout/AppHeader.tsx             |  9 +--
 .../pages/Setup/IndustriesSectorsKeywords.tsx | 67 ++++++++-----------
 frontend/src/styles/igny8-colors.css          |  5 ++
 frontend/src/templates/TablePageTemplate.tsx  |  8 +--
 5 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/header/HeaderMetrics.tsx b/frontend/src/components/header/HeaderMetrics.tsx
index a563d8f7..33cfd6b2 100644
--- a/frontend/src/components/header/HeaderMetrics.tsx
+++ b/frontend/src/components/header/HeaderMetrics.tsx
@@ -11,6 +11,7 @@ export const HeaderMetrics: React.FC = () => {
   return (
     <div className="igny8-header-metrics flex">
       {metrics.map((metric, index) => {
+        const isCredits = metric.label.toLowerCase() === 'credits';
         const metricElement = (
           <div className={`igny8-header-metric ${metric.tooltip ? 'cursor-help' : ''}`}>
             <div className={`igny8-header-metric-accent ${metric.accentColor}`}></div>
@@ -20,7 +21,7 @@ export const HeaderMetrics: React.FC = () => {
                 <InfoIcon className="w-3 h-3 text-gray-400 dark:text-gray-500" />
               )}
             </span>
-            <span className="igny8-header-metric-value">
+            <span className={`igny8-header-metric-value ${isCredits ? 'igny8-header-metric-value-credits' : ''}`}>
               {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
             </span>
           </div>
diff --git a/frontend/src/layout/AppHeader.tsx b/frontend/src/layout/AppHeader.tsx
index 19e07519..529218a9 100644
--- a/frontend/src/layout/AppHeader.tsx
+++ b/frontend/src/layout/AppHeader.tsx
@@ -105,10 +105,6 @@ const AppHeader: React.FC = () => {
               </div>
             )}
 
-            {/* Site and Sector Selector - Desktop */}
-            <div className="hidden lg:flex items-center gap-4 ml-auto">
-              <SiteAndSectorSelector />
-            </div>
           </div>
 
           {/* Right side actions */}
@@ -121,6 +117,11 @@ const AppHeader: React.FC = () => {
               {/* Header Metrics */}
               <HeaderMetrics />
               
+              {/* Site and Sector Selector - Desktop */}
+              <div className="hidden lg:flex items-center">
+                <SiteAndSectorSelector />
+              </div>
+              
               {/* Search Icon */}
               <button
                 onClick={() => setIsSearchOpen(true)}
diff --git a/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx b/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
index 6520383a..4b4ba239 100644
--- a/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
+++ b/frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
@@ -704,45 +704,6 @@ export default function IndustriesSectorsKeywords() {
         </div>
       )}
       
-      {/* Keyword Count Summary & Next Step CTA */}
-      {activeSite && activeSector && (
-        <div className="mx-6 mt-6 mb-4">
-          <div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
-            <div className="flex items-center gap-6">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  <span className="text-green-600 dark:text-green-400 font-bold">{addedCount}</span> keywords in your workflow
-                </span>
-              </div>
-              <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 hidden sm:block" />
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  <span className="text-blue-600 dark:text-blue-400 font-bold">{availableCount}</span> available to add
-                </span>
-              </div>
-            </div>
-            {addedCount > 0 && (
-              <Button
-                variant="success"
-                size="sm"
-                onClick={() => navigate('/planner/keywords')}
-                endIcon={
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                  </svg>
-                }
-              >
-                Next: Plan Your Content
-              </Button>
-            )}
-          </div>
-          {/* Coming Soon Teaser */}
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
-            Looking for more keywords? Keyword Research coming soon!
-          </p>
-        </div>
-      )}
-      
       <TablePageTemplate
         columns={pageConfig.columns}
         data={seedKeywords}
@@ -755,6 +716,34 @@ export default function IndustriesSectorsKeywords() {
           difficulty: difficultyFilter,
           showNotAddedOnly: showNotAddedOnly ? 'true' : '',
         }}
+        customActions={activeSite && activeSector ? (
+          <div className="flex items-center gap-3 px-3 py-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
+            <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+              <span className="text-green-600 dark:text-green-400 font-bold">{addedCount}</span> in workflow
+            </span>
+            <div className="w-px h-4 bg-gray-300 dark:bg-gray-600" />
+            <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+              <span className="text-blue-600 dark:text-blue-400 font-bold">{availableCount}</span> available
+            </span>
+            {addedCount > 0 && (
+              <>
+                <div className="w-px h-4 bg-gray-300 dark:bg-gray-600" />
+                <Button
+                  variant="success"
+                  size="sm"
+                  onClick={() => navigate('/planner/keywords')}
+                  endIcon={
+                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                    </svg>
+                  }
+                >
+                  Next: Plan Your Content
+                </Button>
+              </>
+            )}
+          </div>
+        ) : undefined}
         onFilterChange={(key, value) => {
           const stringValue = value === null || value === undefined ? '' : String(value);
           
diff --git a/frontend/src/styles/igny8-colors.css b/frontend/src/styles/igny8-colors.css
index a83f0d57..c614b89c 100644
--- a/frontend/src/styles/igny8-colors.css
+++ b/frontend/src/styles/igny8-colors.css
@@ -383,6 +383,11 @@ select.igny8-select-styled option:checked {
   margin-left: 4px;
 }
 
+/* Credits-specific value - 20% smaller than other metrics */
+.igny8-header-metric-value-credits {
+  font-size: 13px; /* 16px * 0.8 = 12.8px ≈ 13px */
+}
+
 .dark .igny8-header-metric-value {
   color: #fff;
 }
diff --git a/frontend/src/templates/TablePageTemplate.tsx b/frontend/src/templates/TablePageTemplate.tsx
index 5fb641d9..67b3d1bc 100644
--- a/frontend/src/templates/TablePageTemplate.tsx
+++ b/frontend/src/templates/TablePageTemplate.tsx
@@ -545,7 +545,7 @@ export default function TablePageTemplate({
   return (
     <div className={className}>
       {/* Bulk Actions and Action Buttons Row - Reduced padding */}
-      <div className="flex flex-col gap-2.5">
+      <div className="flex flex-col gap-2.5 mb-2.5">
         {/* Main row with buttons and metrics */}
         <div className="flex items-center justify-between py-1.5">
           {/* Left side - Create Button, Primary Action, Bulk Actions, Filter Toggle */}
@@ -728,10 +728,10 @@ export default function TablePageTemplate({
           </div>
         </div>
         
-        {/* Filters Row - Below action buttons, centered */}
+        {/* Filters Row - Below action buttons, left aligned with shadow */}
         {showFilters && (renderFilters || filters.length > 0) && (
-          <div className="flex justify-center py-1.5">
-            <div className="bg-gray-50 dark:bg-gray-800/30 rounded-lg px-4 py-2 border border-gray-200 dark:border-gray-700">
+          <div className="flex justify-start py-1.5 mb-2.5">
+            <div className="bg-gray-50 dark:bg-gray-800/30 rounded-lg px-4 py-2 border border-gray-200 dark:border-gray-700 shadow-md">
               <div className="flex gap-3 items-center flex-wrap">
                 {renderFilters ? (
                   renderFilters