frontend-refactor-1

2025-11-20 08:58:38 +05:00
parent a0de0cf6b1
commit 8e7afa76cd
18 changed files with 1810 additions and 975 deletions
--- a/frontend/src/pages/Automation/Rules.tsx
+++ b/frontend/src/pages/Automation/Rules.tsx
@@ -5,9 +5,10 @@ import PageHeader from '../../components/common/PageHeader';
 import ComponentCard from '../../components/common/ComponentCard';
 import { automationApi, AutomationRule } from '../../api/automation.api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { BoltIcon, PlusIcon, TrashBinIcon, PencilIcon, PaperPlaneIcon, CloseIcon } from '../../icons';
+import { BoltIcon, PlusIcon, TrashBinIcon, PencilIcon, PaperPlaneIcon, CloseIcon, TaskIcon, ClockIcon } from '../../icons';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';

 export default function AutomationRules() {
  const navigate = useNavigate();
@@ -109,6 +110,12 @@ export default function AutomationRules() {
    );
  };

+  // Automation navigation tabs
+  const automationTabs = [
+    { label: 'Rules', path: '/automation/rules', icon: <BoltIcon /> },
+    { label: 'Tasks', path: '/automation/tasks', icon: <ClockIcon /> },
+  ];
+
  return (
    <>
      <PageMeta title="Automation Rules" />
--- a/frontend/src/pages/Automation/Tasks.tsx
+++ b/frontend/src/pages/Automation/Tasks.tsx
@@ -4,9 +4,10 @@ import PageHeader from '../../components/common/PageHeader';
 import ComponentCard from '../../components/common/ComponentCard';
 import { automationApi, ScheduledTask } from '../../api/automation.api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { ClockIcon, CheckCircleIcon, XCircleIcon, ArrowRightIcon } from '../../icons';
+import { ClockIcon, CheckCircleIcon, XCircleIcon, ArrowRightIcon, BoltIcon } from '../../icons';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';

 export default function AutomationTasks() {
  const toast = useToast();
@@ -95,6 +96,12 @@ export default function AutomationTasks() {
    return true;
  });

+  // Automation navigation tabs
+  const automationTabs = [
+    { label: 'Rules', path: '/automation/rules', icon: <BoltIcon /> },
+    { label: 'Tasks', path: '/automation/tasks', icon: <ClockIcon /> },
+  ];
+
  return (
    <>
      <PageMeta title="Scheduled Tasks" />
@@ -107,6 +114,7 @@ export default function AutomationTasks() {
            color: 'blue',
          }}
        />
+        <ModuleNavigationTabs tabs={automationTabs} />

        <div className="flex items-center gap-4">
          <div className="flex-1">
--- a/frontend/src/pages/Planner/Clusters.tsx
+++ b/frontend/src/pages/Planner/Clusters.tsx
@@ -21,12 +21,13 @@ import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { GroupIcon, PlusIcon, DownloadIcon } from '../../icons';
+import { GroupIcon, PlusIcon, DownloadIcon, ListIcon, BoltIcon } from '../../icons';
 import { createClustersPageConfig } from '../../config/pages/clusters.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';

 export default function Clusters() {
  const toast = useToast();
@@ -383,12 +384,20 @@ export default function Clusters() {
    }
  };

+  // Planner navigation tabs
+  const plannerTabs = [
+    { label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> },
+    { label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> },
+    { label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
+  ];
+
  return (
    <>
      <PageHeader 
        title="Keyword Clusters" 
        badge={{ icon: <GroupIcon />, color: 'purple' }}
      />
+      <ModuleNavigationTabs tabs={plannerTabs} />
      <TablePageTemplate
        columns={pageConfig.columns}
        data={clusters}
--- a/frontend/src/pages/Planner/Ideas.tsx
+++ b/frontend/src/pages/Planner/Ideas.tsx
@@ -23,11 +23,12 @@ import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { BoltIcon, PlusIcon, DownloadIcon } from '../../icons';
+import { BoltIcon, PlusIcon, DownloadIcon, ListIcon, GroupIcon } from '../../icons';
 import { createIdeasPageConfig } from '../../config/pages/ideas.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';

 export default function Ideas() {
  const toast = useToast();
@@ -295,12 +296,20 @@ export default function Ideas() {
    }
  };

+  // Planner navigation tabs
+  const plannerTabs = [
+    { label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> },
+    { label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> },
+    { label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
+  ];
+
  return (
    <>
      <PageHeader 
        title="Content Ideas" 
        badge={{ icon: <BoltIcon />, color: 'orange' }}
      />
+      <ModuleNavigationTabs tabs={plannerTabs} />
      <TablePageTemplate
        columns={pageConfig.columns}
        data={ideas}
--- a/frontend/src/pages/Planner/Keywords.tsx
+++ b/frontend/src/pages/Planner/Keywords.tsx
@@ -27,13 +27,14 @@ import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useResourceDebug } from '../../hooks/useResourceDebug';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { ArrowUpIcon, PlusIcon, ListIcon, DownloadIcon } from '../../icons';
+import { ArrowUpIcon, PlusIcon, ListIcon, DownloadIcon, GroupIcon, BoltIcon } from '../../icons';
 import { useKeywordsImportExport } from '../../config/import-export.config';
 import { createKeywordsPageConfig } from '../../config/pages/keywords.config';

@@ -750,12 +751,20 @@ export default function Keywords() {
    setIsModalOpen(true);
  }, []);

+  // Planner navigation tabs
+  const plannerTabs = [
+    { label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> },
+    { label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> },
+    { label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
+  ];
+
  return (
    <>
      <PageHeader 
        title="Keywords" 
        badge={{ icon: <ListIcon />, color: 'green' }}
      />
+      <ModuleNavigationTabs tabs={plannerTabs} />
      <TablePageTemplate
        columns={pageConfig.columns}
        data={keywords}
--- a/frontend/src/pages/Thinker/AuthorProfiles.tsx
+++ b/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
--- a/frontend/src/pages/Thinker/ImageTesting.tsx
+++ b/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">
--- a/frontend/src/pages/Thinker/Prompts.tsx
+++ b/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">
--- a/frontend/src/pages/Thinker/Strategies.tsx
+++ b/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">
--- a/frontend/src/pages/Writer/Content.tsx
+++ b/frontend/src/pages/Writer/Content.tsx
@@ -14,13 +14,14 @@ import {
 import { optimizerApi } from '../../api/optimizer.api';
 import { useNavigate } from 'react-router';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon } from '../../icons';
+import { FileIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
 import { createContentPageConfig } from '../../config/pages/content.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';

 export default function Content() {
  const toast = useToast();
@@ -197,12 +198,21 @@ export default function Content() {
    }
  }, [toast, progressModal, loadContent, navigate]);

+  // Writer navigation tabs
+  const writerTabs = [
+    { label: 'Tasks', path: '/writer/tasks', icon: <TaskIcon /> },
+    { label: 'Content', path: '/writer/content', icon: <FileIcon /> },
+    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
+    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
+  ];
+
  return (
    <>
      <PageHeader 
        title="Content" 
        badge={{ icon: <FileIcon />, color: 'purple' }}
      />
+      <ModuleNavigationTabs tabs={writerTabs} />
      <TablePageTemplate
        columns={pageConfig.columns}
        data={content}
--- a/frontend/src/pages/Writer/Images.tsx
+++ b/frontend/src/pages/Writer/Images.tsx
@@ -15,12 +15,13 @@ import {
  ContentImage,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, DownloadIcon, BoltIcon } from '../../icons';
+import { FileIcon, DownloadIcon, BoltIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
 import { createImagesPageConfig } from '../../config/pages/images.config';
 import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQueueModal';
 import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal';
 import { useResourceDebug } from '../../hooks/useResourceDebug';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { Modal } from '../../components/ui/modal';

 export default function Images() {
@@ -460,12 +461,21 @@ export default function Images() {
    }));
  }, [pageConfig?.headerMetrics, images, totalCount]);

+  // Writer navigation tabs
+  const writerTabs = [
+    { label: 'Tasks', path: '/writer/tasks', icon: <TaskIcon /> },
+    { label: 'Content', path: '/writer/content', icon: <FileIcon /> },
+    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
+    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
+  ];
+
  return (
    <>
      <PageHeader 
        title="Content Images" 
        badge={{ icon: <FileIcon />, color: 'orange' }}
      />
+      <ModuleNavigationTabs tabs={writerTabs} />
      <TablePageTemplate
      columns={pageConfig.columns}
      data={images}
--- a/frontend/src/pages/Writer/Tasks.tsx
+++ b/frontend/src/pages/Writer/Tasks.tsx
@@ -25,11 +25,12 @@ import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useResourceDebug } from '../../hooks/useResourceDebug';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { TaskIcon, PlusIcon, DownloadIcon } from '../../icons';
+import { TaskIcon, PlusIcon, DownloadIcon, FileIcon, ImageIcon, CheckCircleIcon } from '../../icons';
 import { createTasksPageConfig } from '../../config/pages/tasks.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';

 export default function Tasks() {
  const toast = useToast();
@@ -559,12 +560,21 @@ export default function Tasks() {
    }
  };

+  // Writer navigation tabs
+  const writerTabs = [
+    { label: 'Tasks', path: '/writer/tasks', icon: <TaskIcon /> },
+    { label: 'Content', path: '/writer/content', icon: <FileIcon /> },
+    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
+    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
+  ];
+
  return (
    <>
      <PageHeader 
        title="Tasks" 
        badge={{ icon: <TaskIcon />, color: 'indigo' }}
      />
+      <ModuleNavigationTabs tabs={writerTabs} />
      <TablePageTemplate
          columns={pageConfig.columns}
          data={tasks}