frontend-refactor-1

frontend/src/pages/Thinker/AuthorProfiles.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from 'react';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchAuthorProfiles, createAuthorProfile, updateAuthorProfile, deleteAuthorProfile, AuthorProfile } from '../../services/api';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import FormModal, { FormField } from '../../components/common/FormModal';
 import Badge from '../../components/ui/badge/Badge';
-import { PlusIcon } from '../../icons';
+import { PlusIcon, BoltIcon, UserIcon, ShootingStarIcon, ImageIcon } from '../../icons';
 
 export default function AuthorProfiles() {
   const toast = useToast();
@@ -97,14 +99,23 @@ export default function AuthorProfiles() {
     { name: 'is_active', label: 'Active', type: 'checkbox', required: false },
   ];
 
+  // Thinker navigation tabs
+  const thinkerTabs = [
+    { label: 'Prompts', path: '/thinker/prompts', icon: <BoltIcon /> },
+    { label: 'Author Profiles', path: '/thinker/author-profiles', icon: <UserIcon /> },
+    { label: 'Strategies', path: '/thinker/strategies', icon: <ShootingStarIcon /> },
+    { label: 'Image Testing', path: '/thinker/image-testing', icon: <ImageIcon /> },
+  ];
+
   return (
     <div className="p-6">
       <PageMeta title="Author Profiles" />
+      <PageHeader 
+        title="Author Profiles" 
+        badge={{ icon: <UserIcon />, color: 'blue' }}
+      />
+      <ModuleNavigationTabs tabs={thinkerTabs} />
       <div className="mb-6 flex justify-between items-center">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Author Profiles</h1>
-          <p className="text-gray-600 dark:text-gray-400 mt-1">Manage writing style profiles</p>
-        </div>
         <Button onClick={handleCreate} variant="primary">
           <PlusIcon className="w-4 h-4 mr-2" />
           Create Profile

frontend/src/pages/Thinker/ImageTesting.tsx

@@ -1,11 +1,26 @@
 import PageMeta from "../../components/common/PageMeta";
+import PageHeader from "../../components/common/PageHeader";
+import ModuleNavigationTabs from "../../components/navigation/ModuleNavigationTabs";
 import ComponentCard from "../../components/common/ComponentCard";
+import { BoltIcon, UserIcon, ShootingStarIcon, ImageIcon } from "../../icons";
 
 export default function ImageTesting() {
+  // Thinker navigation tabs
+  const thinkerTabs = [
+    { label: 'Prompts', path: '/thinker/prompts', icon: <BoltIcon /> },
+    { label: 'Author Profiles', path: '/thinker/author-profiles', icon: <UserIcon /> },
+    { label: 'Strategies', path: '/thinker/strategies', icon: <ShootingStarIcon /> },
+    { label: 'Image Testing', path: '/thinker/image-testing', icon: <ImageIcon /> },
+  ];
+
   return (
     <>
       <PageMeta title="Image Testing - IGNY8" description="AI image testing" />
-      
+      <PageHeader 
+        title="Image Testing" 
+        badge={{ icon: <ImageIcon />, color: 'indigo' }}
+      />
+      <ModuleNavigationTabs tabs={thinkerTabs} />
       <ComponentCard title="Coming Soon" desc="AI image testing">
         <div className="text-center py-8">
           <p className="text-gray-600 dark:text-gray-400">

frontend/src/pages/Thinker/Prompts.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import Button from '../../components/ui/button/Button';
 import TextArea from '../../components/form/input/TextArea';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { BoltIcon } from '../../icons';
+import { BoltIcon, UserIcon, ShootingStarIcon, ImageIcon } from '../../icons';
 import { fetchAPI } from '../../services/api';
 
 interface PromptData {
@@ -197,23 +199,23 @@ export default function Prompts() {
     );
   }
 
+  // Thinker navigation tabs
+  const thinkerTabs = [
+    { label: 'Prompts', path: '/thinker/prompts', icon: <BoltIcon /> },
+    { label: 'Author Profiles', path: '/thinker/author-profiles', icon: <UserIcon /> },
+    { label: 'Strategies', path: '/thinker/strategies', icon: <ShootingStarIcon /> },
+    { label: 'Image Testing', path: '/thinker/image-testing', icon: <ImageIcon /> },
+  ];
+
   return (
     <>
       <PageMeta title="Prompts - IGNY8" description="AI prompts management" />
-      
+      <PageHeader 
+        title="AI Prompts Management" 
+        badge={{ icon: <BoltIcon />, color: 'orange' }}
+      />
+      <ModuleNavigationTabs tabs={thinkerTabs} />
       <div className="p-6">
-        {/* Page Header */}
-        <div className="mb-6">
-          <div className="flex items-center gap-3 mb-2">
-            <BoltIcon className="text-primary-500 size-6" />
-            <h1 className="text-2xl font-semibold text-gray-800 dark:text-white">
-              AI Prompts Management
-            </h1>
-          </div>
-          <p className="text-gray-600 dark:text-gray-400">
-            Configure AI prompt templates for clustering, idea generation, content writing, and image generation
-          </p>
-        </div>
 
         {/* Planner Prompts Section */}
         <div className="mb-8">

frontend/src/pages/Thinker/Strategies.tsx

@@ -1,11 +1,26 @@
 import PageMeta from "../../components/common/PageMeta";
+import PageHeader from "../../components/common/PageHeader";
+import ModuleNavigationTabs from "../../components/navigation/ModuleNavigationTabs";
 import ComponentCard from "../../components/common/ComponentCard";
+import { BoltIcon, UserIcon, ShootingStarIcon, ImageIcon } from "../../icons";
 
 export default function Strategies() {
+  // Thinker navigation tabs
+  const thinkerTabs = [
+    { label: 'Prompts', path: '/thinker/prompts', icon: <BoltIcon /> },
+    { label: 'Author Profiles', path: '/thinker/author-profiles', icon: <UserIcon /> },
+    { label: 'Strategies', path: '/thinker/strategies', icon: <ShootingStarIcon /> },
+    { label: 'Image Testing', path: '/thinker/image-testing', icon: <ImageIcon /> },
+  ];
+
   return (
     <>
       <PageMeta title="Strategies - IGNY8" description="Content strategies" />
-      
+      <PageHeader 
+        title="Content Strategies" 
+        badge={{ icon: <ShootingStarIcon />, color: 'purple' }}
+      />
+      <ModuleNavigationTabs tabs={thinkerTabs} />
       <ComponentCard title="Coming Soon" desc="Content strategies">
         <div className="text-center py-8">
           <p className="text-gray-600 dark:text-gray-400">