From cb6eca448357c3f217590739edf4b982f9a3582e Mon Sep 17 00:00:00 2001 From: "IGNY8 VPS (Salman)" Date: Mon, 23 Mar 2026 07:57:12 +0000 Subject: [PATCH] 123 --- .../30-FRONTEND/DESIGN-GUIDE2.md | 0 docs/audits/IGNY8-Frontend-Component-Audit.md | 907 +++++++++++++ docs/audits/pages-audit.md | 1139 +++++++++++++++++ .../plans/GO-LIVE-CHECKLIST.md | 0 .../plans/gsc_integratin.md | 0 5 files changed, 2046 insertions(+) rename DESIGN-GUIDE.md => docs/30-FRONTEND/DESIGN-GUIDE2.md (100%) create mode 100644 docs/audits/IGNY8-Frontend-Component-Audit.md create mode 100644 docs/audits/pages-audit.md rename GO-LIVE-CHECKLIST.md => docs/plans/GO-LIVE-CHECKLIST.md (100%) rename gsc_integratin.md => docs/plans/gsc_integratin.md (100%) diff --git a/DESIGN-GUIDE.md b/docs/30-FRONTEND/DESIGN-GUIDE2.md similarity index 100% rename from DESIGN-GUIDE.md rename to docs/30-FRONTEND/DESIGN-GUIDE2.md diff --git a/docs/audits/IGNY8-Frontend-Component-Audit.md b/docs/audits/IGNY8-Frontend-Component-Audit.md new file mode 100644 index 00000000..481e1b4b --- /dev/null +++ b/docs/audits/IGNY8-Frontend-Component-Audit.md @@ -0,0 +1,907 @@ +# IGNY8 Frontend Component Audit & TailAdmin Migration Plan + +> **Generated:** 2026-03-15 +> **Scope:** `frontend/src/` — 483 TypeScript/TSX files +> **Base Template:** TailAdmin Free React v1.8.4 (Tailwind CSS 4, React 19) + +--- + +## 1. Executive Summary + +### Total Component Count + +| Category | Count | +|----------|-------| +| **Total .ts/.tsx files** | 483 | +| **UI primitive components** (`components/ui/`) | 52 files → ~40 unique components | +| **Common/shared components** (`components/common/`) | 51 files | +| **Page files** (`pages/`) | 68 files | +| **Feature components** (dashboard, billing, automation, etc.) | 80 files | +| **Form components** (`components/form/`) | 25 files | +| **Header components** | 6 files | +| **Stores** (Zustand) | 11 files | +| **Services/API** | 8 files (5,626 LOC) | +| **Templates** | 5 files | +| **Config files** | 24 files | +| **Hooks** | 9 files | +| **Utils** | 14 files | +| **Context providers** | 5 files | +| **Layout/shell** | 5 files | +| **Marketing site** | 22 files | + +### Origin Breakdown + +| Origin | Count | Percentage | +|--------|-------|------------| +| **Custom** (IGNY8-specific) | ~340 | ~70% | +| **TailAdmin-original** (unchanged) | ~25 | ~5% | +| **TailAdmin-modified** (customized) | ~20 | ~4% | +| **TailAdmin-derived** (structural inheritance) | ~15 | ~3% | +| **TailAdmin demo** (static examples) | ~10 | ~2% | +| **Third-party** | ~5 | ~1% | +| **Infrastructure** (config, types, barrel exports) | ~68 | ~14% | + +### Key Findings + +1. **Package name confirms TailAdmin base**: `package.json` → `"name": "tailadmin-react"`, version `1.8.4` +2. **Core shell is TailAdmin**: Layout, sidebar, header, dark mode, backdrop all follow TailAdmin Free patterns +3. **Design system is heavily customized**: Tailwind v4 CSS-first config with `color-mix()` computed palettes, 6 base hex tokens only +4. **Config-driven table system**: 10 pages use `TablePageTemplate` with declarative column/filter/action configs — the most mature pattern +5. **Massive API monolith**: `api.ts` is 3,056 lines containing 90+ functions +6. **Three-way route divergence**: Routes defined independently in `App.tsx`, `AppSidebar.tsx`, and `routes.config.ts` +7. **Significant duplication**: Settings forms (6 pages), billing pages (3 directories), filter boilerplate (8 pages), manual tables (4+ pages) +8. **MUI contamination**: One component (`BulkWordPressPublish` in `BulkWordPressPublish/`) uses `@mui/material` — inconsistent with rest of codebase +9. **No `cn()` utility**: TailAdmin's `cn()` pattern not used; `clsx` + `twMerge` called separately +10. **Style-locked components**: 7 files have `🔒 STYLE LOCKED` headers (Button, IconButton, Badge, Table, WordPressPublish components) + +--- + +## 2. App Shell & Layout + +### Layout Structure + +``` + + ← dark mode (class strategy) + ← credit/page metric badges + ← toast notifications + + ← page title/badge context + + + ← JWT auth guard + ← sidebar expand/collapse state + + ← flex shell (sidebar + main) + ← left nav (290px / 90px) + ← mobile overlay + ← sticky top bar + ← page content +``` + +**Origin:** `AppLayout`, `AppSidebar`, `AppHeader`, `Backdrop` — **TailAdmin-modified**. Core structure from TailAdmin Free but heavily extended with Zustand stores, credit metrics, module system, and page context. + +### Sidebar Configuration + +| Aspect | Implementation | +|--------|---------------| +| **Nav structure** | **Hardcoded** in `AppSidebar.tsx` via `useMemo` arrays | +| **Sections** | Dashboard (standalone), SETUP (Setup Wizard, Sites, Keywords Library, Thinker), WORKFLOW (Planner, Writer, Publisher, Automation) | +| **Collapsible groups** | Yes — TailAdmin pattern with `ChevronDownIcon` rotation, animated height | +| **Module gating** | `useModuleStore().isModuleEnabled()` (API-driven) | +| **Admin filtering** | User role check for admin-only items | +| **Config-driven?** | No — `routes.config.ts` exists but is **not used** by sidebar | +| **TailAdmin patterns** | `menu-item` / `menu-item-active` / `menu-item-inactive` CSS utility classes, 90px→290px hover expansion, `no-scrollbar` | + +### Header Structure + +- Sticky header with `z-99999` +- Mobile: hamburger toggle + logo +- Desktop: page title with colored badge (from `PageContext`), sidebar toggle +- Right side: `HeaderMetrics` (credit badges), route-conditional site/sector selectors (3 variants based on URL), search (⌘K), `ThemeToggleButton`, `NotificationDropdown`, `UserDropdown` +- **Origin:** TailAdmin-modified — dropdown patterns and responsive layout from TailAdmin, but metric badges, page context, and site selectors are custom + +### Routing + +**Three independent route definitions exist (maintenance risk):** + +| Source | Purpose | Route Count | Synchronized? | +|--------|---------|-------------|---------------| +| `App.tsx` | Actual React Router routes | ~100+ | Source of truth | +| `AppSidebar.tsx` | Sidebar navigation items | ~25 | Subset of App.tsx | +| `routes.config.ts` | Breadcrumb metadata | ~15 | Partial, stale | + +- All page components (except auth) are **lazy-loaded** via `React.lazy()` +- `ProtectedRoute` wraps all authenticated routes +- `AdminRoute` wraps Thinker/Integration routes +- `` handles legacy route redirects + +--- + +## 3. Design System Status + +### Color System + +**Architecture:** 6 base hex tokens → `color-mix()` generates full palettes → Tailwind `@theme` consumes them + +| Token | Value | Palette Generated | +|-------|-------|-------------------| +| `--color-primary` | `#1c86d1` | `brand-25` → `brand-950` | +| `--color-success` | `#3fcd9f` | `success-25` → `success-950` | +| `--color-warning` | `#f87f4c` | `warning-25` → `warning-950` | +| `--color-danger` | `#ff656f` | `error-25` → `error-950` | +| `--color-info` | `#18b2c4` | `info-25` → `info-950` | +| `--color-gray-base` | `#243249` | `gray-25` → `gray-950` + `gray-dark` | + +**All default Tailwind color palettes are disabled** (`--color-red-*: initial`, etc.). Only the above semantic palettes exist. + +Additional derived tokens: `--navy`, `--surface`, `--panel`, `--text`, `--text-dim`, `--stroke`, gradients. + +**Module color mapping** in `colors.config.ts`: Every module stage (keywords, clusters, ideas, tasks, content, images, review, approved, published) maps to `bg`, `bgLight`, `text`, `border`, `gradient`, and `cssVar` tokens. + +### Typography + +| Property | Value | +|----------|-------| +| **Font family** | `Outfit` (Google Fonts), `ui-monospace` for code | +| **Title sizes** | `title-2xl` (72px) → `title-sm` (30px) | +| **Body sizes** | `theme-xl` (20px), `theme-sm` (14px), `theme-xs` (12px) | +| **CMS fonts** | Separate system — `Inter` for published content | + +### Spacing + +Standard Tailwind spacing scale with custom additions: +- Border radius: `xs` (2px) → `4xl` (20px) +- Shadows: `theme-xs` → `theme-xl`, plus `datepicker`, `focus-ring`, `tooltip` +- Z-index: 6 tiers from `z-index-1` to `z-index-999999` + +### Dark Mode + +| Aspect | Implementation | +|--------|---------------| +| **Strategy** | Tailwind `class` strategy — `.dark` on `` | +| **Storage** | `localStorage` key `"theme"` | +| **Toggle** | `ThemeContext` → `toggleTheme()` | +| **Default** | Light | +| **CSS** | `@custom-variant dark (&:is(.dark *))` in design-system.css | +| **Override vars** | Surface, panel, text, stroke, shadow overrides in `.dark` block | + +### Responsive Approach + +| Breakpoint | Value | Usage | +|------------|-------|-------| +| `2xsm` | 375px | Mobile-small | +| `xsm` | 425px | Mobile | +| `sm` | 640px | Small tablet | +| **`md`** | **768px** | **Mobile detection** (SidebarContext) | +| **`lg`** | **1024px** | **Primary:** sidebar show/hide, header layout | +| **`xl`** | **1280px** | Flex layout trigger | +| `2xl` | 1536px | Wide desktop | +| `3xl` | 2000px | Ultra-wide | + +--- + +## 4. Component Inventory + +### 4.1 UI Primitives (`components/ui/`) + +| Path | Component | Purpose | Origin | Key UI Info | +|------|-----------|---------|--------|-------------| +| `ui/button/Button.tsx` | `Button` | Multi-variant button (primary/secondary/outline/ghost/gradient) × 5 tones × 6 sizes | custom | 🔒 STYLE LOCKED. `twMerge` + `clsx` | +| `ui/button/IconButton.tsx` | `IconButton` | Icon-only button with tone/variant/shape system | custom | 🔒 STYLE LOCKED | +| `ui/button/ButtonWithTooltip.tsx` | `ButtonWithTooltip` | Wraps Button + Tooltip for disabled state hint | custom | | +| `ui/card/Card.tsx` | `Card` + 7 sub-components | Card container system (surface/panel/frosted/borderless/gradient variants) | custom | Uses `--color-panel` CSS var | +| `ui/modal/index.tsx` | `Modal` | Portal-based modal with backdrop blur, ESC, scroll lock | tailadmin-derived | `z-99999` convention | +| `ui/table/index.tsx` | `Table` + 4 sub-components | Unstyled table primitives | custom | 🔒 STYLE LOCKED | +| `ui/tabs/Tabs.tsx` | `Tabs`, `TabList`, `Tab`, `TabPanel` | Segmented control/tabs with render-prop state | tailadmin-derived | `shadow-theme-xs` token | +| `ui/badge/Badge.tsx` | `Badge` | 4 variants × 12 tones × 3 sizes with backward-compat | custom | 🔒 STYLE LOCKED | +| `ui/alert/Alert.tsx` | `Alert` | Inline notification banner with variant icons | tailadmin-derived | SVG icons match TailAdmin | +| `ui/alert/AlertModal.tsx` | `AlertModal` | Centered modal alert with decorative icons | custom | | +| `ui/accordion/Accordion.tsx` | `Accordion`, `AccordionItem` | Collapsible with animated height | custom | | +| `ui/breadcrumb/Breadcrumb.tsx` | `Breadcrumb` | Navigation breadcrumb from items array | tailadmin-derived | Chevron SVG matches TailAdmin | +| `ui/dropdown/Dropdown.tsx` | `Dropdown` | Portal-based positioned dropdown with edge detection | custom | Major rewrite from TailAdmin | +| `ui/dropdown/DropdownItem.tsx` | `DropdownItem` | Menu item (button or link) | tailadmin-derived | | +| `ui/spinner/Spinner.tsx` | `Spinner` | CSS border-based loading spinner | custom | | +| `ui/pagination/Pagination.tsx` | `Pagination` | Full pagination with ellipsis | tailadmin-derived | Arrow SVGs match TailAdmin | +| `ui/pagination/CompactPagination.tsx` | `CompactPagination` | Compact pagination + page size selector | custom | | +| `ui/progress/ProgressBar.tsx` | `ProgressBar` | Horizontal progress bar | custom | | +| `ui/tooltip/Tooltip.tsx` | `Tooltip` | Portal-based tooltip with directional arrow | custom | | +| `ui/tooltip/EnhancedTooltip.tsx` | `EnhancedTooltip` | Rich-content tooltip with delay | custom | | +| `ui/tooltip/CalendarItemTooltip.tsx` | `CalendarItemTooltip` | Calendar event tooltip | custom | Business-specific | +| `ui/toast/Toast.tsx` | `ToastItem` | Individual toast notification (5s auto-dismiss) | custom | `animate-slide-in-right` | +| `ui/toast/ToastContainer.tsx` | `ToastProvider`, `useToast` | Context-based toast system | custom | Portal, fixed top-right | +| `ui/ribbon/Ribbon.tsx` | `Ribbon` | Decorative ribbon overlay | tailadmin-derived | Corner variant matches TailAdmin | +| `ui/list/List.tsx` | `List` + 5 sub-components | Multi-variant list with checkbox/radio items | tailadmin-derived | Extended with checkbox/radio | +| `ui/button-group/ButtonGroup.tsx` | `ButtonGroup`, `ButtonGroupItem` | Grouped button strip | tailadmin-derived | `shadow-theme-xs` | +| `ui/dataview/DataView.tsx` | `DataView` + 3 sub-components | Data display container with header/toolbar/empty | custom | SaaS-specific | +| `ui/pricing-table/PricingTable.tsx` | `PricingTable` (3 variants) | Full pricing table with toggle, discount calc | tailadmin-derived | Extended with dynamic pricing | +| `ui/pricing-table/index.tsx` | `PricingTable` (named export) | Alternate SaaS-specific pricing table | custom | **Duplicate** of above | +| `ui/avatar/Avatar.tsx` | `Avatar` | User avatar with status dot | tailadmin-derived | | +| `ui/videos/*.tsx` | Video aspect ratio components | Hardcoded YouTube embeds | tailadmin-demo | **Bug**: SixteenIsToNine uses 4:3 | +| `ui/images/*.tsx` | Image grid components | Hardcoded demo image grids | tailadmin-demo | Static — cleanup candidates | + +### 4.2 Common Components (`components/common/`) + +| Path | Component | Purpose | Origin | +|------|-----------|---------|--------| +| `common/PageBreadCrumb.tsx` | `PageBreadcrumb` | Simple Home > Page breadcrumb | tailadmin-original | +| `common/ComponentCard.tsx` | `ComponentCard` | Generic card wrapper with title/description | tailadmin-modified | +| `common/GridShape.tsx` | `GridShape` | Decorative SVG background shapes | tailadmin-original | +| `common/ThemeTogglerTwo.tsx` | `ThemeTogglerTwo` | Floating round theme toggle button | tailadmin-original | +| `common/PageMeta.tsx` | `PageMeta` | `` and `<meta>` via react-helmet | tailadmin-original | +| `common/ScrollToTop.tsx` | `ScrollToTop` | Auto-scroll to top on route change | tailadmin-original | +| `common/ChartTab.tsx` | `ChartTab` | Chart time period segmented control | tailadmin-original | +| `common/ThemeToggleButton.tsx` | `ThemeToggleButton` | Theme toggle using IconButton | tailadmin-modified | +| `common/SiteSelector.tsx` | `SiteAndSectorSelector` | Combined site + sector dropdown | custom | +| `common/SingleSiteSelector.tsx` | `SingleSiteSelector` | Site-only dropdown | custom | +| `common/SiteWithAllSitesSelector.tsx` | `SiteWithAllSitesSelector` | Site dropdown with "All Sites" | custom | +| `common/SiteAndSectorSelector.tsx` | `SiteAndSectorSelector` | Combined site + sector (dual-mode) | custom | +| `common/SectorSelector.tsx` | `SectorSelector` | Standalone sector dropdown | custom | +| `common/SiteInfoBar.tsx` | `SiteInfoBar` | Horizontal site info bar with badges | custom | +| `common/SiteCard.tsx` | `SiteCard` | Site card with status toggle and actions | custom | +| `common/FormModal.tsx` | `FormModal` | Generic modal with auto-generated form | custom | +| `common/ProgressModal.tsx` | `ProgressModal` | Multi-step AI progress modal | custom | +| `common/ConfirmDialog.tsx` | `ConfirmDialog` | Generic confirmation modal | custom | +| `common/ContentViewerModal.tsx` | `ContentViewerModal` | Article preview modal | custom | +| `common/ErrorDetailsModal.tsx` | `ErrorDetailsModal` | Publishing error detail modal | custom | +| `common/BulkStatusUpdateModal.tsx` | `BulkStatusUpdateModal` | Bulk status change modal | custom | +| `common/BulkScheduleModal.tsx` | `BulkScheduleModal` | Bulk scheduling modal | custom | +| `common/BulkSchedulePreviewModal.tsx` | `BulkSchedulePreviewModal` | Schedule preview before confirm | custom | +| `common/BulkExportModal.tsx` | `BulkExportModal` | Bulk export modal | custom | +| `common/BulkPublishingModal.tsx` | `BulkPublishingModal` | Bulk publishing queue modal | custom | +| `common/PublishingProgressModal.tsx` | `PublishingProgressModal` | Single-content publishing progress | custom | +| `common/PublishLimitModal.tsx` | `PublishLimitModal` | Publish limit warning | custom | +| `common/ImageQueueModal.tsx` | `ImageQueueModal` | Image generation queue | custom | +| `common/ScheduleContentModal.tsx` | `ScheduleContentModal` | Schedule single content | custom | +| `common/SearchModal.tsx` | `SearchModal` | Global search (⌘K) | custom | +| `common/SingleRecordStatusUpdateModal.tsx` | `SingleRecordStatusUpdateModal` | Single record status change | custom | +| `common/ColumnSelector.tsx` | `ColumnSelector` | Table column visibility toggle | custom | +| `common/ViewToggle.tsx` | `ViewToggle` | List/grid view toggle | custom | +| `common/ToggleTableRow.tsx` | `ToggleTableRow` | Expandable table row | custom | +| `common/HTMLContentRenderer.tsx` | `HTMLContentRenderer` | Safe HTML/JSON content renderer | custom | +| `common/ContentImageCell.tsx` | `ContentImageCell` | Table cell with image status | custom | +| `common/ImageResultCard.tsx` | `ImageResultCard` | AI image result display | custom | +| `common/ImageGenerationCard.tsx` | `ImageGenerationCard` | Image generation test form | custom | +| `common/ImageServiceCard.tsx` | `ImageServiceCard` | Image service provider card | custom | +| `common/IntegrationCard.tsx` | `IntegrationCard` | API integration toggle card | custom | +| `common/ValidationCard.tsx` | `ValidationCard` | Validation status card | custom | +| `common/WorkflowInsights.tsx` | `WorkflowInsights` | Collapsible insights notifications | custom | +| `common/PageHeader.tsx` | `PageHeader` | Page header (sets PageContext) | custom | +| `common/PageTransition.tsx` | `PageTransition` | Route transition animation | custom | +| `common/PageLoader.tsx` | `PageLoader` | Global loading indicator | custom | +| `common/SuspenseLoader.tsx` | `SuspenseLoader` | Suspense fallback spinner | custom | +| `common/ErrorBoundary.tsx` | `ErrorBoundary` | Top-level error boundary | custom | +| `common/PageErrorBoundary.tsx` | `PageErrorBoundary` | Per-page error boundary | custom | +| `common/GlobalErrorDisplay.tsx` | `GlobalErrorDisplay` | Global error overlay | custom | +| `common/LoadingStateMonitor.tsx` | `LoadingStateMonitor` | Stuck-loading detector (10s timeout) | custom | +| `common/ModuleGuard.tsx` | `ModuleGuard` | **DEPRECATED** — pass-through | custom | +| `common/DebugSiteSelector.tsx` | `DebugSiteSelector` | Debug site selector | custom | + +### 4.3 Form Components (`components/form/`) + +| Path | Component | Purpose | Origin | +|------|-----------|---------|--------| +| `form/input/InputField.tsx` | `InputField` | Text input with states | tailadmin-modified | +| `form/input/TextArea.tsx` | `TextArea` | Textarea with states | tailadmin-modified | +| `form/input/Checkbox.tsx` | `Checkbox` | Custom checkbox with SVG | tailadmin-modified | +| `form/input/Radio.tsx` | `Radio` | Custom radio button | tailadmin-original | +| `form/input/RadioSm.tsx` | `RadioSm` | Small radio variant | tailadmin-original | +| `form/input/FileInput.tsx` | `FileInput` | File input with pseudo-styling | tailadmin-original | +| `form/switch/Switch.tsx` | `Switch` | Toggle switch | tailadmin-modified | +| `form/group-input/PhoneInput.tsx` | `PhoneInput` | Phone with country code | tailadmin-original | +| `form/Form.tsx` | `Form` | Simple form wrapper | tailadmin-original | +| `form/Label.tsx` | `Label` | Label primitive | tailadmin-original | +| `form/Select.tsx` | `Select` | Native `<select>` styled | tailadmin-original | +| `form/SelectDropdown.tsx` | `SelectDropdown` | Custom dropdown select | custom | +| `form/MultiSelect.tsx` | `MultiSelect` | Multi-select with chips | tailadmin-modified | +| `form/FormFieldRenderer.tsx` | `FormFieldRenderer` | Dynamic field renderer from config | custom | +| `form/date-picker.tsx` | `DatePicker` | flatpickr-based date picker | third-party | +| `form/form-elements/*.tsx` | 9 demo components | Form element showcase pages | tailadmin-original | + +### 4.4 Header Components (`components/header/`) + +| Path | Component | Purpose | Origin | +|------|-----------|---------|--------| +| `header/Header.tsx` | `Header` | Main header with search, theme, dropdowns | tailadmin-modified | +| `header/SiteSwitcher.tsx` | `SiteSwitcher` | Site switch dropdown | custom | +| `header/HeaderMetrics.tsx` | `HeaderMetrics` | Credit/page metric badges | custom | +| `header/NotificationDropdown.tsx` | `NotificationDropdown` | Notification dropdown with API sync | custom | +| `header/NotificationDropdownNew.tsx` | `NotificationDropdownNew` | Alternate notification dropdown (older?) | custom | +| `header/UserDropdown.tsx` | `UserDropdown` | User profile menu | tailadmin-modified | + +### 4.5 Feature Components + +#### Dashboard (`components/dashboard/`) — 22 components, ALL custom + +| Component | Purpose | +|-----------|---------| +| `EnhancedMetricCard` | KPI card with accent border, trend, tooltip | +| `WorkflowPipeline` / `WorkflowPipelineWidget` | Visual 7-stage pipeline | +| `NeedsAttentionBar` | Collapsible alert bar | +| `StandardizedModuleWidget` | Module pipeline stats | +| `WorkflowCompletionWidget` | Time-filtered workflow stats | +| `AIOperationsWidget` | AI operation statistics | +| `RecentActivityWidget` | Last 5 activities | +| `CreditsUsageWidget` / `CreditBalanceWidget` / `CreditAvailabilityWidget` | Credit displays | +| `AutomationStatusWidget` | Automation run status | +| `SitesOverviewWidget` | Site list with status | +| `UsageChartWidget` | Usage chart with date range | +| `KeywordLibraryStatsWidget` | Keyword library stats | +| `AccountInfoWidget` | Account billing info | +| `SiteConfigWidget` | Site setup checklist | +| `QuickActionsWidget` | 8-step workflow guide | +| `ContentVelocityWidget` | Content production rates | +| `OperationsCostsWidget` | AI operation costs | +| `ThreeWidgetFooter` / `StandardThreeWidgetFooter` | 3-column footer layouts | + +#### Billing (`components/billing/`) — 17 components, ALL custom + +Key components: `BillingBalancePanel`, `BillingUsagePanel`, `CreditInsightsCharts`, `PayInvoiceModal`, `InsufficientCreditsModal`, `PendingPaymentBanner`, `PendingPaymentView`, `PaymentHistory`, `UsageLimitsPanel`, `CreditCostBreakdownPanel`, `CreditCostsPanel` + +#### Automation (`components/Automation/`) — 20 components, ALL custom + +Top-level: `ConfigModal`, `CurrentProcessingCard`/V2, `GlobalProgressBar`, `RunHistory`, `StageCard`, `ActivityLog` + +DetailView: `RunSummaryCard`, `StageAccordion`, `InsightsPanel`, `EfficiencyMetrics`, `CreditBreakdownChart`, `PredictiveCostAnalysis`, `ProductionSummary`, `EnhancedRunHistory`, `MeaningfulRunHistory`, `PipelineOverviewCard`, `AttentionItemsAlert`, `RunStatisticsSummary` + +#### Sites (`components/sites/`) — 11 components, ALL custom + +Key: `SiteSetupChecklist`, `SiteProgressWidget`, `WordPressIntegrationCard`/`Form`/`Modal`, `TemplateLibrary`, `TemplateCustomizer`, `StyleEditor`, `LayoutSelector`/`Preview`, `SiteTypeBadge` + +#### WordPress Publish (`components/WordPressPublish/`) — 4 components, ALL custom STYLE LOCKED + +`WordPressPublish`, `BulkWordPressPublish`, `ContentActionsMenu` + +#### Other Feature Components — ALL custom + +| Directory | Components | +|-----------|-----------| +| `onboarding/` | `OnboardingWizard`, `WorkflowGuide`, Steps 1-5 (7 files) | +| `keywords-library/` | `SectorCardsGrid`, `SectorMetricCard`, `SmartSuggestions`, `BulkAddConfirmation` | +| `tasks/` | `KanbanBoard` (tailadmin-modified), `TaskList` (tailadmin-modified), `RelationshipMap` | +| `content/` | `ContentFilter`, `SourceBadge`, `SyncStatusBadge` | +| `linker/` | `LinkResults` | +| `optimizer/` | `OptimizationScores`, `ScoreComparison` | +| `integration/` | `IntegrationStatus`, `PlatformSelector`, `SiteIntegrationsSection` | +| `publishing/` | `PublishingRules` | +| `auth/` | `AdminRoute`, `ProtectedRoute`, `SignInForm`, `SignUpFormUnified` | +| `navigation/` | `ModuleNavigationTabs` | +| `UserProfile/` | `UserAddressCard`, `UserInfoCard`, `UserMetaCard` (tailadmin-original) | + +--- + +## 5. Shared Components — Usage Patterns + +### Most-Used Shared Components + +| Component | Estimated Usage Count | Notes | +|-----------|----------------------|-------| +| `Button` | 50+ pages | Universal — primary UI action element | +| `Modal` | 30+ components | All modals in codebase | +| `Badge` | 25+ pages | Status/label badges | +| `Card` | 20+ widgets | Dashboard widgets, cards | +| `InputField` | 15+ forms | All text inputs | +| `SelectDropdown` | 12+ forms | Custom dropdown selects | +| `Dropdown`/`DropdownItem` | 10+ menus | Header, site selectors, actions | +| `Tooltip` / `EnhancedTooltip` | 10+ | Pipeline, metrics, help text | +| `CompactPagination` | 10 pages | All TablePageTemplate pages | +| `Alert` | 8+ pages | Inline notifications | +| `Switch` | 6+ | Settings toggles | +| `Spinner` | 5+ | Loading states | +| `Accordion` | 4+ | Automation details, settings | + +### Duplicate Patterns Found + +| Pattern | Instances | Details | +|---------|-----------|---------| +| **Site selector variants** | 4 | `SiteSelector`, `SingleSiteSelector`, `SiteWithAllSitesSelector`, `SiteAndSectorSelector` — could be 1 component with props | +| **Notification dropdown** | 2 | `NotificationDropdown` + `NotificationDropdownNew` — one is likely stale | +| **Pricing table** | 2 | `PricingTable.tsx` (default) + `index.tsx` (named) — overlapping implementations | +| **Theme toggle** | 2 | `ThemeTogglerTwo` (floating) + `ThemeToggleButton` (header icon) | +| **BulkWordPressPublish** | 2 | `WordPressPublish/BulkWordPressPublish.tsx` (custom UI) + `BulkWordPressPublish/BulkWordPressPublish.tsx` (**MUI-based** — different library!) | +| **Error boundary** | 2 | `ErrorBoundary` (top-level) + `PageErrorBoundary` (per-page) — similar patterns | +| **Three-widget footer** | 2 | `ThreeWidgetFooter` + `StandardThreeWidgetFooter` | +| **Date formatting** | 2 | `dateUtils.ts` + `date.ts` — overlapping functions (`formatDateTime` exists in both) | + +### Inconsistencies + +| Issue | Details | +|-------|---------| +| **Icon library mixing** | `PaymentGatewaySelector.tsx` uses `lucide-react` instead of `../../icons`; `BulkWordPressPublish/` uses `@mui/icons-material` | +| **Import path inconsistency** | `PaymentGatewaySelector.tsx` uses `@/` alias; rest of codebase uses relative paths | +| **Inline buttons** | `PageErrorBoundary`, `ErrorBoundary` use raw `<button>` instead of shared `Button` component | +| **Inline table styling** | Sites Dashboard, Automation pages have inline table implementations instead of using `Table` primitives | +| **Settings form patterns** | No shared settings form template — each settings page builds its own form layout | + +--- + +## 6. Page-by-Page Breakdown + +### Template Distribution + +| Template | Pages Using It | +|----------|---------------| +| **`TablePageTemplate`** (config-driven) | Keywords, Clusters, Ideas, Tasks, Content, Review, Approved, Images, Sites/List, Setup/IndustriesSectorsKeywords | +| **`ContentViewTemplate`** | ContentView (single article detail) | +| **`DashboardTemplate`** (structure, not widely used) | Available but most dashboard pages are custom | +| **`FormPageTemplate`** (settings layout) | Available but not widely adopted | +| **Custom layouts** | ~50 pages | +| **TailAdmin demo/reference** | UIElements, Components | +| **Placeholder/stub** | 5 pages | + +### Planner Module (4 pages) + +| Page | Template | Notes | +|------|----------|-------| +| Keywords | `TablePageTemplate` | Config-driven via `keywords.config.tsx`. Auto-cluster, import/export. | +| Clusters | `TablePageTemplate` | Config-driven via `clusters.config.tsx`. Auto-generate ideas. | +| ClusterDetail | Custom | Tabbed detail view (keywords, ideas, stats). Manual table. | +| Ideas | `TablePageTemplate` | Config-driven via `ideas.config.tsx`. Bulk queue to writer. | + +### Writer Module (6 pages) + +| Page | Template | Notes | +|------|----------|-------| +| Tasks | `TablePageTemplate` | Config-driven. Auto-generate content/images. Has Kanban/List toggles. | +| Content | `TablePageTemplate` | Config-driven. Inline editing disabled. | +| Review | `TablePageTemplate` | Config-driven. Content review workflow. | +| Approved | `TablePageTemplate` | Config-driven. Scheduling, publishing. | +| Images | `TablePageTemplate` | Config-driven. Dynamic in-article image columns. | +| ContentView | `ContentViewTemplate` | Single article detail with scheduling, image management. | + +### Publisher Module (2 pages) + +| Page | Template | Notes | +|------|----------|-------| +| ContentCalendar | Custom | FullCalendar integration with month/week/list views. Custom scheduling modals. | +| PublishSettings | Custom | Multi-tab settings (general, frequency, scheduling). Inline form. | + +### Sites Module (11 pages) + +| Page | Template | Notes | +|------|----------|-------| +| List | `TablePageTemplate` | Sites management list. | +| Dashboard | Custom | Multi-section dashboard with widget grid. Manual tables. | +| Settings | Custom | Tab-based site settings. Inline forms. | +| Content | Custom | Site content management with source filtering. | +| ContentStructure | Custom | Content structure config. | +| PostEditor | Custom | Post editing interface. | +| PageManager | Custom | Site page management. | +| SyncDashboard | Custom | WordPress sync status. | +| PublishingQueue | Custom | Publishing queue with status tracking. | +| AIAutomationSettings | Custom | Per-site automation config. | +| DeploymentPanel | Custom | **Deprecated** placeholder. | + +### Automation Module (4 pages) + +| Page | Template | Notes | +|------|----------|-------| +| AutomationPage | Custom | Main automation view with config, processing, history. | +| AutomationOverview | Custom | Multi-site overview with eligibility status. | +| AutomationRunDetail | Custom | Detailed run breakdown with stage accordion. | +| PipelineSettings | Custom | Pipeline stage configuration form. | + +### Thinker Module (5 pages) + +| Page | Template | Notes | +|------|----------|-------| +| Prompts | Custom | Prompt library with CRUD and categories. | +| AuthorProfiles | Custom | Author voice profiles with CRUD. | +| Strategies | Custom | Content strategy management. | +| Profile | Custom | User profile view (TailAdmin-original layout). | +| ImageTesting | Custom | Image generation testing interface. | + +### Other Modules + +| Module | Page | Template | Notes | +|--------|------|----------|-------| +| Optimizer | ContentSelector | Custom | Content selection for optimization. | +| Optimizer | AnalysisPreview | Custom | Optimization results preview. | +| Linker | ContentList | Custom | Internal linking content list. | +| Setup | SetupWizard | Custom | Multi-step onboarding wizard. | +| Help | Help | Custom | Help center page. | +| Reference | Industries, SeedKeywords | Custom | Read-only reference data. | + +### Settings (12 pages) — High duplication risk + +| Page | Notes | +|------|-------| +| General | Inline form layout | +| Publishing | Tab-based publishing config | +| Integration | Integration CRUD | +| Plans | Plan display (duplicated in account/) | +| Subscriptions | Subscription management (duplicated) | +| CreditsAndBilling | Billing info (duplicated) | +| Industries | Industry selection | +| Account | Account settings (duplicated in account/) | +| Sites | Sites management | +| Users | User management (admin) | +| System | System admin dashboard | +| WordPressIntegrationDebug | Debug tool | + +### Account (7 pages) — Supersedes Settings billing + +| Page | Notes | +|------|-------| +| AccountSettingsPage | Account settings + profile | +| ContentSettingsPage | Content generation settings | +| NotificationsPage | Notification preferences | +| PlansAndBillingPage | Plan + billing unified view | +| PurchaseCreditsPage | Credit purchase flow | +| UsageDashboardPage | Usage overview | +| UsageAnalyticsPage | Detailed usage analytics | + +### Auth Pages (7 pages) + +| Page | Origin | Notes | +|------|--------|-------| +| AuthPageLayout | tailadmin-modified | Split-screen auth layout | +| SignIn | tailadmin-modified | Custom logic, TailAdmin layout | +| SignUp | tailadmin-modified | Custom with inline pricing | +| ForgotPassword | tailadmin-modified | TailAdmin layout | +| ResetPassword | tailadmin-modified | TailAdmin layout | +| VerifyEmail | custom | Email verification flow | +| Unsubscribe | custom | Email unsubscribe | + +### Demo/Reference Pages + +| Page | Origin | Notes | +|------|--------|-------| +| UIElements | tailadmin-original | 737 lines — TailAdmin component showcase | +| Components | tailadmin-original | 680 lines — TailAdmin demo page | +| NotFound | tailadmin-original | 404 page with grid shapes | + +--- + +## 7. Stores & API Layer + +### Zustand Stores (11 stores, 1,802 LOC) + +| Store | State Managed | LOC | Persistence | API Calls | +|-------|--------------|-----|-------------|-----------| +| `authStore` | User, tokens, auth state | 540 | localStorage (`auth-storage`) | 5 endpoints (raw `fetch`) | +| `siteStore` | Active site | 140 | localStorage (`site-storage`) | `GET /v1/auth/sites/` | +| `sectorStore` | Active sector, sector list | 168 | localStorage (`sector-storage`) | `GET /v1/auth/sites/{id}/sectors/` | +| `plannerStore` | Keywords, clusters | 110 | None | 2 endpoints (stubs for CUD) | +| `billingStore` | Balance, usage, limits | 82 | None | 3 billing endpoints | +| `notificationStore` | Notifications, unread count | 336 | None (in-memory) | 5 notification endpoints | +| `onboardingStore` | Guide state | 102 | localStorage (`onboarding-storage`) | 3 user-setting endpoints | +| `settingsStore` | Account/module settings | 195 | localStorage (`settings-storage` v4) | 6 settings endpoints | +| `moduleStore` | Module enablement | 56 | None | 1 endpoint | +| `columnVisibilityStore` | Column visibility per page | 53 | Direct localStorage | None | +| `pageSizeStore` | Global page size | 20 | localStorage (`igny8-page-size`) | None | + +### API Service Layer (8 files, 5,626 LOC) + +| File | LOC | Organization | Endpoints | +|------|-----|-------------|-----------| +| **`api.ts`** | **3,056** | **Monolithic** — 90+ functions | 75+ endpoints across planner, writer, sites, sectors, settings, billing, keywords-library | +| `billing.api.ts` | 1,507 | Well-organized (sectioned) | 50+ billing/payment/subscription endpoints | +| `automationService.ts` | 438 | Well-organized | 19 automation endpoints | +| `unifiedSettings.api.ts` | 207 | Well-organized | 2 unified settings endpoints | +| `integration.api.ts` | 158 | Well-organized | 7 integration endpoints | +| `notifications.api.ts` | 142 | Well-organized | 5 notification endpoints | +| `optimizer.api.ts` | 86 | Well-organized | 3 optimizer endpoints | +| `linker.api.ts` | 32 | Well-organized | 2 linker endpoints | + +**Auth pattern:** All APIs use JWT Bearer tokens via `fetchAPI()`. Token sourced from Zustand → localStorage fallback. Auto-refresh on 401. Force-logout on refresh failure. + +**`api.ts` should be split** — it contains planner, writer, sites, sectors, settings, billing, and keywords-library endpoints in a single file. The other service files demonstrate the correct pattern. + +### API Directory (`api/`) + +| File | Exports | Purpose | +|------|---------|---------| +| `optimizer.api.ts` | `optimizerApi` | Optimize, batch optimize, analyze | +| `linker.api.ts` | `linkerApi` | Process, batch process internal links | + +--- + +## 8. Styling Audit + +### Tailwind Configuration + +| Aspect | Details | +|--------|---------| +| **Version** | Tailwind CSS 4 (CSS-first config via `@theme` blocks) | +| **Config file** | No `tailwind.config.js` — all in `design-system.css` `@theme` | +| **PostCSS** | `@tailwindcss/postcss` plugin only | +| **Dark mode** | `@custom-variant dark (&:is(.dark *))` | +| **Default palettes** | **All disabled** (`--color-red-*: initial`, etc.) | +| **Custom palettes** | 6 semantic scales via `color-mix()` | +| **Font** | `Outfit` (Google Fonts) | +| **Breakpoints** | Standard + `2xsm`(375), `xsm`(425), `3xl`(2000) | + +### CSS Files + +| File | Lines | Purpose | +|------|-------|---------| +| `styles/design-system.css` | 1,006 | Master design system — tokens, `@theme`, base, utilities, components | +| `marketing/styles/marketing.css` | 210 | Marketing site — re-imports design-system + own `@theme` | +| `components/shared/blocks/blocks.css` | 125 | CMS block component styles | +| `components/shared/layouts/layouts.css` | 80 | CMS layout scaffolding | + +### Custom CSS Utilities + +| Category | Classes | Purpose | +|----------|---------|---------| +| Sidebar nav | `menu-item`, `menu-item-active`, `menu-item-inactive`, `menu-item-icon-*`, `menu-dropdown-*` | TailAdmin sidebar styling via `@utility` | +| Tables | `igny8-table-*`, `igny8-data-row`, `igny8-skeleton-row` | Compact table styling, loading transitions | +| Header | `igny8-header-metric*` | Header metric badges | +| Filters | `igny8-filter-bar` | Filter bar layout | +| Selects | `igny8-select-styled` | Native select custom chevron | +| Keywords | `keywords-library-sector-*` | Keyword sector cards | +| Misc | `no-scrollbar`, `chat-height`, `inbox-height` | Utility classes | +| Animations | `animate-slide-in-right` | Toast slide-in | + +### CMS Theme System (`styles/cms/`) + +Separate TypeScript-based theme system for CMS-published content (not admin UI): +- `colors.ts` — Color scheme definitions (blue, purple, green) +- `typography.ts` — Typography presets (modern, classic, editorial, minimal, tech) +- `components.ts` — Component style defaults (buttons, cards, inputs) +- `presets.ts` — Complete theme presets (modern, classic, minimal, bold, elegant, tech) + +### Style Issues Found + +| Issue | Severity | Details | +|-------|----------|---------| +| Marketing CSS hex conflict | Medium | `marketing.css` has hardcoded hex color scales that conflict with `design-system.css` `color-mix()` values | +| Hardcoded hex in blocks.css/layouts.css | Low | CMS CSS uses raw hex instead of CSS variables | +| Dual `@custom-variant dark` | Low | Declared in both design-system.css and marketing.css (redundant) | +| 30 `!important` usages | Low | For ApexCharts/jVectorMap overrides — acceptable | +| 4 commented-out palettes | Low | Development artifacts in design-system.css `:root` | + +--- + +## 9. Duplication & Inconsistency Report + +### Critical Duplications + +| # | Pattern | Locations | Impact | +|----|---------|-----------|--------| +| 1 | **Settings form layout** | 6+ Settings pages + 7 Account pages (13 total, partially overlapping) | No shared `FormPageTemplate` adoption. Each page builds its own form layout. | +| 2 | **Billing/Credits pages** | `Settings/CreditsAndBilling` + `Billing/` (3 pages) + `account/PlansAndBillingPage` + `account/PurchaseCreditsPage` + `account/UsageDashboardPage` | 7+ pages covering similar billing/credit ground | +| 3 | **API monolith** | `api.ts` (3,056 LOC) | 90+ functions in one file. Other service files demonstrate the pattern to follow. | +| 4 | **Site selector components** | 4 components (`SiteSelector`, `SingleSiteSelector`, `SiteWithAllSitesSelector`, `SiteAndSectorSelector`) | Could be unified into 1 component with mode prop | +| 5 | **Manual tables** | Sites/Dashboard, Automation pages, Billing pages, Thinker pages | Should use `Table` primitives or `TablePageTemplate` | +| 6 | **Filter boilerplate** | 8 table pages each have ~50-100 lines of cascading filter state | Now handled by `TablePageTemplate` — older pages not migrated | +| 7 | **Three-way route config** | `App.tsx` + `AppSidebar.tsx` + `routes.config.ts` | Navigation/routing defined in 3 places independently | +| 8 | **Date formatting** | `dateUtils.ts` + `date.ts` | Overlapping `formatDateTime` functions | +| 9 | **BulkWordPressPublish** | `WordPressPublish/` (custom UI) + `BulkWordPressPublish/` (MUI) | Two implementations using different UI libraries | +| 10 | **Notification dropdown** | `NotificationDropdown` + `NotificationDropdownNew` | One appears stale | + +### Inconsistent UI Patterns + +| Pattern | Expected | Actual | +|---------|----------|--------| +| Icon library | `../../icons` (custom SVG) | `lucide-react` in `PaymentGatewaySelector`, `@mui/icons-material` in `BulkWordPressPublish/` | +| Component library | Custom `ui/` | MUI (`@mui/material`) in `BulkWordPressPublish/` | +| Import paths | Relative (`../../`) | `@/` alias in `PaymentGatewaySelector` | +| Button usage | `<Button>` component | Raw `<button>` in error boundaries | +| Table implementation | `Table` primitives or `TablePageTemplate` | Inline `<table>` in 4+ pages | +| Form layout | Should use `FormPageTemplate` | Each settings page custom | +| Tab component | `<Tabs>` from `ui/tabs/` | Inline tab implementations in 3+ pages | + +### Components That Should Be Shared But Aren't + +| Pattern | Pages Implementing It | Proposed Shared Component | +|---------|----------------------|--------------------------| +| Settings form page with sections + save bar | 13 settings/account pages | Adopt `FormPageTemplate` universally | +| Status badge (content status) | 10+ pages | Already exists as `Badge` but inline styling still found | +| Metric summary cards (4-up grid) | Dashboard, Billing, Automation | `MetricCardGrid` component | +| Confirm + Execute pattern (modal → API → toast) | 20+ actions across pages | `useConfirmAction` hook | +| Pagination + page size | Manual in 4+ pages | Already handled by `TablePageTemplate` — migrate remaining | + +--- + +## 10. TailAdmin Pro Migration Plan + +### TailAdmin Pro Components That Would Replace Existing + +| TailAdmin Pro Component | Replaces Current | Priority | +|------------------------|------------------|----------| +| **Layout shell** (Sidebar, Header, Footer) | `layout/AppSidebar.tsx`, `layout/AppHeader.tsx`, `layout/Backdrop.tsx`, `layout/AppLayout.tsx` | Phase 1 | +| **Button** (all variants) | `ui/button/Button.tsx` (🔒 STYLE LOCKED — needs careful migration) | Phase 1 | +| **Modal/Dialog** | `ui/modal/index.tsx` | Phase 1 | +| **Form inputs** (Input, TextArea, Select, Checkbox, Radio, Switch, FileInput) | All `form/input/` + `form/switch/` + `form/Select.tsx` | Phase 2 | +| **Table** | `ui/table/index.tsx` (🔒 STYLE LOCKED) | Phase 2 | +| **Badge** | `ui/badge/Badge.tsx` (🔒 STYLE LOCKED) | Phase 2 | +| **Tabs** | `ui/tabs/Tabs.tsx` | Phase 2 | +| **Alert** | `ui/alert/Alert.tsx` | Phase 2 | +| **Breadcrumb** | `ui/breadcrumb/Breadcrumb.tsx` | Phase 3 | +| **Dropdown** | `ui/dropdown/Dropdown.tsx` (custom portal — evaluate if Pro is better) | Phase 3 | +| **Pagination** | `ui/pagination/Pagination.tsx` | Phase 3 | +| **Avatar** | `ui/avatar/Avatar.tsx` | Phase 3 | +| **Tooltip** | `ui/tooltip/Tooltip.tsx` (custom portal — may keep) | Phase 3 | +| **Toast/Notification** | `ui/toast/ToastContainer.tsx` (custom system — evaluate) | Phase 3 | +| **Progress Bar** | `ui/progress/ProgressBar.tsx` | Phase 3 | +| **Accordion** | `ui/accordion/Accordion.tsx` | Phase 3 | +| **Ribbon** | `ui/ribbon/Ribbon.tsx` | Phase 3 | +| **List** | `ui/list/List.tsx` | Phase 3 | +| **ButtonGroup** | `ui/button-group/ButtonGroup.tsx` | Phase 3 | +| **Pricing Table** | `ui/pricing-table/PricingTable.tsx` + `index.tsx` | Phase 3 | +| **Card** | `ui/card/Card.tsx` (custom system — evaluate) | Phase 3 | +| **Spinner** | `ui/spinner/Spinner.tsx` | Phase 3 | +| **Date Picker** | `form/date-picker.tsx` (flatpickr — Pro may include) | Phase 3 | +| **Auth pages** | `AuthPages/SignIn.tsx`, `SignUp.tsx`, etc. | Phase 4 | +| **Profile pages** | `UserProfile/*.tsx` | Phase 4 | +| **DataView** | `ui/dataview/DataView.tsx` (custom SaaS — may not exist in Pro) | Evaluate | +| **Video/Image demos** | `ui/videos/`, `ui/images/` | Delete — use Pro examples | + +### Custom Components That MUST Be Kept + +These contain IGNY8-specific business logic and have no TailAdmin Pro equivalent: + +| Category | Components | Reason | +|----------|-----------|--------| +| **All 5 templates** | `TablePageTemplate`, `ContentViewTemplate`, `DashboardTemplate`, `FormPageTemplate`, `SystemPageTemplate` | Core IGNY8 page architecture — config-driven | +| **All page configs** | 12 config files in `config/pages/` | Business-specific table/filter/action definitions | +| **All config snippets** | `columns.snippets.ts`, `filters.snippets.ts`, `actions.snippets.ts` | Reusable table config pieces | +| **All stores** | 11 Zustand stores | Application state management | +| **All services/API** | 8 service files | Backend API integration | +| **All hooks** | 9 custom hooks (except `useModal`) | Business logic hooks | +| **All utils** | 14 utility files | Business helpers | +| **Dashboard widgets** | 22 components | IGNY8 dashboard-specific | +| **Billing components** | 17 components | Billing/payment business logic | +| **Automation components** | 20 components | Automation pipeline UI | +| **WordPress integration** | 15+ components across sites/, WordPressPublish/ | CMS integration | +| **Onboarding wizard** | 7 components | IGNY8 setup flow | +| **Content management** | ContentFilter, SourceBadge, SyncStatusBadge | Content workflow-specific | +| **Keywords library** | 4 components | Keyword management UI | +| **Module navigation** | ModuleNavigationTabs | IGNY8 module system | +| **Header metrics** | HeaderMetrics, HeaderMetricsContext | Credit display system | +| **Page context system** | PageContext, PageHeader, PageLoader | IGNY8 page metadata | +| **Search modal** | SearchModal (⌘K) | App-wide search | +| **Site selectors** | 4 site/sector selector variants | Multi-site architecture | +| **All bulk action modals** | 8+ modal components | Workflow-specific bulk operations | +| **Colors config** | `colors.config.ts` | Module color mapping system | +| **CMS theme system** | `styles/cms/*.ts` | Published content theming | +| **Icons** | `icons/index.ts`, `icons/lazy.ts` | Custom icon registry (may need to merge with Pro icons) | + +### Migration Order (Least Risk First) + +#### Phase 1: Layout Shell (Highest Impact, Moderate Risk) + +1. **Install TailAdmin Pro** alongside existing code +2. **Map design tokens**: Extract IGNY8's 6 base colors + `color-mix()` system → TailAdmin Pro Tailwind config +3. **Migrate layout components**: Replace `AppLayout`, `AppSidebar`, `AppHeader`, `Backdrop` with Pro equivalents. Preserve: + - Module-gated sidebar items + - Credit metric badges in header + - Site/sector selectors + - Page context system +4. **Migrate auth pages**: SignIn, SignUp, ForgotPassword, ResetPassword — closest to TailAdmin originals +5. **Delete demo files**: `UIElements.tsx`, `Components.tsx`, `ui/videos/`, `ui/images/` + +#### Phase 2: Core UI Primitives (High Impact, Higher Risk) + +1. **Button** → Pro Button. Must preserve: tone/variant/size matrix, gradient variant, `🔒 STYLE LOCKED` contract. Create adapter if Pro API differs. +2. **Table** → Pro Table. Must work with `TablePageTemplate` config system. +3. **Form inputs** → Pro inputs. Must preserve: error/success/disabled states, `twMerge`+`clsx` composition. +4. **Badge** → Pro Badge. Must preserve: 12 tones, 4 variants, backward-compat `color` prop. +5. **Modal** → Pro Modal. Must preserve: portal rendering, ESC/backdrop close, scroll lock. +6. **Tabs** → Pro Tabs. + +#### Phase 3: Secondary UI Components (Lower Impact, Low Risk) + +Breadcrumb, Dropdown, Pagination, Avatar, Tooltip, Toast, ProgressBar, Accordion, Ribbon, List, ButtonGroup, PricingTable, Card, Spinner, DatePicker. + +Each is a drop-in replacement with prop mapping. Can be done component-by-component. + +#### Phase 4: Page Templates & Cleanup + +1. **Unify route definitions**: Consolidate `App.tsx`, `AppSidebar.tsx`, `routes.config.ts` into a single config +2. **Migrate manual tables**: Convert 4+ pages with inline tables to `TablePageTemplate` +3. **Consolidate settings pages**: Adopt `FormPageTemplate` across all settings/account pages +4. **Clean up billing duplication**: Merge Settings billing + Billing pages + Account pages +5. **Split `api.ts`**: Break into `planner.api.ts`, `writer.api.ts`, `sites.api.ts`, `settings.api.ts`, `keywords-library.api.ts` +6. **Consolidate site selectors**: Unify 4 variants into 1 configurable component +7. **Remove stale components**: `ModuleGuard` (deprecated), `NotificationDropdownNew` (likely stale), `BulkWordPressPublish/` (MUI version) +8. **Merge date utils**: Consolidate `dateUtils.ts` + `date.ts` +9. **Fix MUI contamination**: Replace `@mui/material` usage in `BulkWordPressPublish/` with custom UI components + +### Color Scheme Extraction for TailAdmin Pro Config + +``` +Primary: #1c86d1 → brand-* scale (via color-mix) +Success: #3fcd9f → success-* scale +Warning: #f87f4c → warning-* scale +Danger: #ff656f → error-* scale +Info: #18b2c4 → info-* scale +Gray Base: #243249 → gray-* scale + +Font: Outfit (Google Fonts) +Dark mode: class strategy on <html> +``` + +These 6 hex values + the `color-mix()` derivation system are the **only** color configuration needed in TailAdmin Pro's theme config. All other colors are computed. + +### Estimated Scope Per Section + +| Phase | Components Affected | Files to Modify | Risk Level | +|-------|-------------------|-----------------|------------| +| Phase 1: Layout Shell | 10 | ~20 | ⚠️ Moderate — touches every page via layout | +| Phase 2: Core Primitives | 15 | ~80 (imports update) | ⚠️ High — Button/Table/Badge used everywhere | +| Phase 3: Secondary UI | 15 | ~30 | ✅ Low — isolated replacements | +| Phase 4: Cleanup | 30+ | ~50 | ⚠️ Moderate — structural changes | +| **Total** | **~70 UI components** | **~180 files** | | + +### Pre-Migration Checklist + +- [ ] Obtain TailAdmin Pro React bundle +- [ ] Verify TailAdmin Pro supports Tailwind CSS 4 (CSS-first config) +- [ ] Map Pro component API to current component prop interfaces +- [ ] Create component adapter layer for breaking changes +- [ ] Set up visual regression testing (screenshots before/after) +- [ ] Document all `🔒 STYLE LOCKED` components — these need extra care +- [ ] Back up current `design-system.css` and all 6 hex tokens +- [ ] Plan for icon merging (current custom SVGs + Pro icons) +- [ ] Audit `@theme` block compatibility between current CSS and Pro CSS +- [ ] Remove `@mui/material` dependency before migration starts + +--- + +## Appendix A: Third-Party Dependencies (UI-Related) + +| Package | Version | Used By | Notes | +|---------|---------|---------|-------| +| `react` | ^19.0.0 | All | Core framework | +| `react-dom` | ^19.0.0 | All | DOM rendering | +| `react-router-dom` | ^7.9.5 | Routing, Link | v7 — latest | +| `zustand` | ^5.0.8 | 11 stores | State management | +| `tailwind-merge` | ^3.0.1 | Button, IconButton | Class dedup | +| `clsx` | ^2.1.1 | 10+ components | Conditional classes | +| `apexcharts` / `react-apexcharts` | ^4.1.0 / ^1.7.0 | Charts | Dashboard widgets | +| `@fullcalendar/*` | ^6.1.15 | ContentCalendar | Calendar view | +| `flatpickr` | ^4.6.13 | DatePicker | Date picker | +| `react-dropzone` | ^14.3.5 | DropZone | File upload | +| `react-dnd` / `react-dnd-html5-backend` | ^16.0.1 | KanbanBoard | Drag-and-drop | +| `swiper` | ^11.2.3 | Marketing site | Carousel | +| `@react-jvectormap/*` | ^1.0.4 / ^1.1.2 | Map widgets | Vector maps | +| `react-helmet-async` | ^2.0.5 | PageMeta/SEO | Head management | +| `lucide-react` | ^0.554.0 | PaymentGatewaySelector only | **Should not be used** — use `icons/` | +| `@heroicons/react` | ^2.2.0 | Icons (via icons/) | SVG icon source | + +## Appendix B: File Count by Directory + +| Directory | .tsx/.ts Files | +|-----------|---------------| +| `components/ui/` | 52 | +| `components/common/` | 51 | +| `components/dashboard/` | 22 | +| `components/Automation/` | 20 | +| `components/billing/` | 17 | +| `components/form/` | 25 | +| `components/sites/` | 11 | +| `components/onboarding/` | 7 | +| `components/header/` | 6 | +| `components/WordPressPublish/` | 4 | +| `components/auth/` | 4 | +| `components/tasks/` | 4 | +| `components/keywords-library/` | 5 | +| `components/content/` | 4 | +| `components/integration/` | 3 | +| `components/optimizer/` | 2 | +| `components/shared/` | 22 | +| `components/UserProfile/` | 3 | +| `components/navigation/` | 1 | +| `components/publishing/` | 1 | +| `components/linker/` | 1 | +| `components/BulkWordPressPublish/` | 1 | +| `pages/` | 68 | +| `store/` | 11 | +| `services/` | 6 | +| `api/` | 2 | +| `config/` | 24 | +| `templates/` | 5 | +| `hooks/` | 9 | +| `utils/` | 14 | +| `context/` | 5 | +| `layout/` | 5 | +| `icons/` | 2 | +| `styles/` | 5 | +| `marketing/` | 22 | +| `constants/` | 1 | +| `types/` | 1 | +| Other (main.tsx, App.tsx, etc.) | 4 | +| **Total** | **483** | diff --git a/docs/audits/pages-audit.md b/docs/audits/pages-audit.md new file mode 100644 index 00000000..99376dea --- /dev/null +++ b/docs/audits/pages-audit.md @@ -0,0 +1,1139 @@ +# Pages Audit — Complete Inventory + +> Generated from comprehensive file-by-file review of `frontend/src/pages/` + +--- + +## Legend + +| Field | Description | +|---|---| +| **Component** | Export name | +| **Purpose** | One-line description | +| **Origin** | `tailadmin-original` · `tailadmin-modified` · `custom` · `placeholder` | +| **UI Patterns** | Layout/interaction patterns used | +| **Shared Components** | Imports from `components/` | +| **Local Sub-components** | Page-specific child components (in `components/` subdirs) | +| **Pattern Duplication** | Repeated code that could be extracted | +| **Template** | Which template system is used (if any) | + +--- + +## 1. Dashboard + +### Dashboard/Home.tsx (~300 lines) + +| Field | Value | +|---|---| +| **Component** | `Home` | +| **Purpose** | Main dashboard with workflow pipeline, quick actions, analytics widgets, and site overview | +| **Origin** | `custom` | +| **UI Patterns** | Widget grid layout (3-col responsive), floating action button, site filter, AI period filter | +| **Shared Components** | `PageMeta`, `WorkflowGuide`, `Button`, `usePageContext` | +| **Local Sub-components** | `NeedsAttentionBar`, `WorkflowPipelineWidget`, `QuickActionsWidget`, `AIOperationsWidget`, `RecentActivityWidget`, `ContentVelocityWidget`, `AutomationStatusWidget`, `SitesOverviewWidget`, `CreditsUsageWidget`, `AccountInfoWidget`, `KeywordLibraryStatsWidget` (all from `components/dashboard/`) | +| **Pattern Duplication** | None — all widgets properly extracted | +| **Template** | None (custom widget grid) | + +--- + +## 2. Planner + +### Planner/Keywords.tsx (~800 lines) + +| Field | Value | +|---|---| +| **Component** | `Keywords` | +| **Purpose** | Keyword management table with CRUD, filters, bulk actions, import/export, auto-clustering | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, cascading filters from backend, debounced search, volume range dropdown with refs, header metrics from API totals, bulk action with progress modal | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `ProgressModal`, `useProgressModal`, `useToast`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | `useKeywordsImportExport` hook (from `components/keywords-library/`) | +| **Pattern Duplication** | Cascading filter pattern repeated in Clusters/Ideas; header metrics calculation repeated in all Planner pages; volume range dropdown is inline (not extracted) | +| **Template** | `TablePageTemplate` + `createKeywordsPageConfig()` | + +### Planner/Clusters.tsx (~700 lines) + +| Field | Value | +|---|---| +| **Component** | `Clusters` | +| **Purpose** | Cluster management table with CRUD, filters, bulk idea generation | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, cascading filters, header metrics from API totals, StandardThreeWidgetFooter | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `ProgressModal`, `useToast`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Near-identical to Keywords.tsx — cascading filter loading, header metrics pattern, footer widget pattern | +| **Template** | `TablePageTemplate` + `createClustersPageConfig()` | + +### Planner/ClusterDetail.tsx (~280 lines) + +| Field | Value | +|---|---| +| **Component** | `ClusterDetail` | +| **Purpose** | Detail view for single cluster with tabs (articles, pages, products, taxonomy) | +| **Origin** | `custom` | +| **UI Patterns** | Param-driven detail view, inline tab implementation (Button-based with border-bottom), tabbed content types, breadcrumb back navigation | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `Badge`, `useToast` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Custom inline tab implementation — does NOT use a shared Tab component; duplicates tab pattern seen in Sites/Settings | +| **Template** | None (custom detail view) | + +### Planner/Ideas.tsx (~700 lines) + +| Field | Value | +|---|---| +| **Component** | `Ideas` | +| **Purpose** | Content ideas management with queue-to-writer bulk action | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, cascading filters, header metrics, bulk queue action with progress modal | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `ProgressModal`, `useToast`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Near-identical to Keywords/Clusters — same cascading filter + header metrics + footer pattern. **Bug**: `sectors` prop passed twice in pageConfig creation | +| **Template** | `TablePageTemplate` + `createIdeasPageConfig()` | + +--- + +## 3. Writer + +### Writer/Content.tsx (~550 lines) + +| Field | Value | +|---|---| +| **Component** | `Content` (Writer) | +| **Purpose** | Content drafts table (status='draft') with generate image prompts, optimize, send to optimizer, view on WordPress actions | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, locked status filter, per-row AI actions, inline optimization via `optimizerApi` | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `ProgressModal`, `useToast`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same table page pattern as Planner pages | +| **Template** | `TablePageTemplate` + `createContentPageConfig()` | + +### Writer/Tasks.tsx (~500+ lines) + +| Field | Value | +|---|---| +| **Component** | `Tasks` | +| **Purpose** | Writing tasks management with content generation and image generation bulk actions | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, per-row content generation, bulk image generation | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `ProgressModal`, `useToast`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same table page pattern as Planner/Writer pages | +| **Template** | `TablePageTemplate` + `createTasksPageConfig()` | + +### Writer/Review.tsx (~500 lines) + +| Field | Value | +|---|---| +| **Component** | `Review` | +| **Purpose** | Content review queue (status='review') with approve single/bulk actions | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, approval workflow, event-based refresh | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `ProgressModal`, `useToast`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same table pattern. **Note**: Uses different event name (`'site-changed'` vs `'siteChanged'` used elsewhere) | +| **Template** | `TablePageTemplate` + `createReviewPageConfig()` | + +### Writer/Approved.tsx (~550+ lines) + +| Field | Value | +|---|---| +| **Component** | `Approved` | +| **Purpose** | Approved content ready for publishing with extensive publishing workflow (single/bulk publish, schedule, reschedule) | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, multi-modal publishing workflow, schedule management | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `ProgressModal`, `useToast`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | `PublishingProgressModal`, `BulkPublishingModal`, `PublishLimitModal`, `ScheduleContentModal`, `BulkScheduleModal`, `BulkSchedulePreviewModal`, `ErrorDetailsModal` (from `components/publishing/`, `components/BulkWordPressPublish/`) | +| **Pattern Duplication** | Base table pattern same; extensive modal system is specific to this page | +| **Template** | `TablePageTemplate` + `createApprovedPageConfig()` | + +### Writer/Images.tsx (~550+ lines) + +| Field | Value | +|---|---| +| **Component** | `Images` | +| **Purpose** | Image management grouped by content (one row per content) with image generation queue | +| **Origin** | `custom` | +| **UI Patterns** | Config-driven table, **client-side** filtering/sorting/pagination (not server-side), image generation queue flow, settings pre-fetch | +| **Shared Components** | `PageHeader`, `StandardThreeWidgetFooter`, `FormModal`, `useToast`, `useSiteStore`, `useSectorStore` | +| **Local Sub-components** | `ImageQueueModal`, `SingleRecordStatusUpdateModal` (from `components/`) | +| **Pattern Duplication** | Client-side filtering is an anomaly vs. other table pages that use server-side; base table pattern same | +| **Template** | `TablePageTemplate` + `createImagesPageConfig()` | + +### Writer/ContentView.tsx (~67 lines) + +| Field | Value | +|---|---| +| **Component** | `ContentView` | +| **Purpose** | Individual content detail view (thin wrapper loading content by ID) | +| **Origin** | `custom` | +| **UI Patterns** | Param-driven detail view, loading state, error handling | +| **Shared Components** | None directly (delegates to template) | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | `ContentViewTemplate` | + +--- + +## 4. Publisher + +### Publisher/ContentCalendar.tsx (~550+ lines) + +| Field | Value | +|---|---| +| **Component** | `ContentCalendar` | +| **Purpose** | Content scheduling with calendar and list views, drag-drop reordering and date assignment | +| **Origin** | `custom` | +| **UI Patterns** | Dual view (calendar grid + list), drag-drop (list reorder + calendar date drop), complex derived state via useMemo, ButtonGroup view toggle | +| **Shared Components** | `PageMeta`, `PageHeader`, `ComponentCard`, `Card`, `Button`, `IconButton`, `ButtonGroup`, `CalendarItemTooltip`, `ScheduleContentModal` | +| **Local Sub-components** | None (inline calendar grid rendering) | +| **Pattern Duplication** | Calendar rendering is fully inline (~200+ lines); shares `ScheduleContentModal` with Approved.tsx | +| **Template** | None (fully custom) | + +### Publisher/PublishSettings.tsx (~500 lines) + +| Field | Value | +|---|---| +| **Component** | `PublishSettings` | +| **Purpose** | Publishing automation, limits, and schedule configuration (3-card form layout) | +| **Origin** | `custom` | +| **UI Patterns** | 3-card form layout (Automation, Limits, Schedule), toggle switches, inline form validation | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `IconButton`, `Label`, `InputField`, `Switch` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Settings form pattern similar to Sites/Settings and account/ContentSettingsPage | +| **Template** | None (custom form layout) | + +--- + +## 5. Sites + +### Sites/List.tsx (~550+ lines) + +| Field | Value | +|---|---| +| **Component** | `SitesList` | +| **Purpose** | Sites list with table/grid toggle, site CRUD, activation, deletion | +| **Origin** | `custom` | +| **UI Patterns** | Dual view (table + grid cards), ViewToggle, client-side filtering, inline deletion/toggle, WorkflowGuide | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `Badge`, `Alert`, `Switch`, `InputField`, `Select`, `ViewToggle`, `WorkflowGuide`, `ConfirmDialog`, `SiteTypeBadge` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Table view uses `TablePageTemplate`; grid view is custom inline cards | +| **Template** | `TablePageTemplate` (table view only) + custom grid view | + +### Sites/Dashboard.tsx (~500 lines) + +| Field | Value | +|---|---| +| **Component** | `SiteDashboard` | +| **Purpose** | Individual site dashboard with setup checklist, quick actions, analytics | +| **Origin** | `custom` | +| **UI Patterns** | Widget layout, setup checklist, quick action cards, stat widgets | +| **Shared Components** | `PageMeta`, `PageHeader`, `ComponentCard`, `SiteInfoBar`, `Card`, `Button` | +| **Local Sub-components** | `SiteSetupChecklist`, `SiteConfigWidget`, `OperationsCostsWidget`, `CreditAvailabilityWidget` (from `components/sites/`) | +| **Pattern Duplication** | Widget grid similar to Dashboard/Home but site-specific | +| **Template** | None (custom widget layout) | + +### Sites/Settings.tsx (~1000+ lines) + +| Field | Value | +|---|---| +| **Component** | `SiteSettings` | +| **Purpose** | Site settings with tabs (General, Automation, Integrations) — massive form | +| **Origin** | `custom` | +| **UI Patterns** | Tabbed form, SEO settings, industry/sector selection, AI settings, WordPress integration form | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `InputField`, `Select`, `SelectDropdown`, `Checkbox`, `Radio`, `TextArea`, `Switch`, `SiteInfoBar` | +| **Local Sub-components** | `AIAutomationSettings`, `WordPressIntegrationForm` (from `components/integration/`, `components/sites/`) | +| **Pattern Duplication** | Custom inline tab implementation (duplicates pattern in ClusterDetail); very large file that could be split into tab sub-components | +| **Template** | None (custom tabbed form) | + +### Sites/Content.tsx (~500 lines) + +| Field | Value | +|---|---| +| **Component** | `SiteContent` | +| **Purpose** | Site-specific content manager with manual table and custom filters | +| **Origin** | `custom` | +| **UI Patterns** | Manual table (not TablePageTemplate), custom filter cards, manual pagination | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `InputField`, `Select`, `SiteInfoBar` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Manual table implementation duplicates what `TablePageTemplate` provides; manual pagination duplicates template pagination | +| **Template** | None (custom manual table) | + +### Sites/ContentStructure.tsx (416 lines) + +| Field | Value | +|---|---| +| **Component** | `ContentStructure` | +| **Purpose** | Content organized by clusters with keyword table and content list | +| **Origin** | `custom` | +| **UI Patterns** | Cluster selector dropdown, keyword table, content list, inline tables | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `Badge`, `Select`, `SiteInfoBar` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Manual inline tables duplicate TablePageTemplate capabilities | +| **Template** | None (custom cluster-based view) | + +### Sites/PostEditor.tsx (672 lines) + +| Field | Value | +|---|---| +| **Component** | `PostEditor` | +| **Purpose** | Full-featured post editor with SEO metadata, taxonomy, and content validation tabs | +| **Origin** | `custom` | +| **UI Patterns** | Tabbed editor (content, taxonomy, validation), form inputs, rich content editing | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, form components, `SiteInfoBar` | +| **Local Sub-components** | Content validation feature inline | +| **Pattern Duplication** | Tab implementation likely duplicates other inline tab patterns | +| **Template** | None (custom post editor) | + +### Sites/PageManager.tsx (395 lines) + +| Field | Value | +|---|---| +| **Component** | `PageManager` | +| **Purpose** | Drag-drop page reordering and management | +| **Origin** | `custom` | +| **UI Patterns** | Drag-and-drop with `react-dnd` + `HTML5Backend`, sortable list | +| **Shared Components** | `PageMeta`, `PageHeader`, `DndProvider`, `useDrag`, `useDrop` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Only page using `react-dnd` directly | +| **Template** | None (custom drag-drop interface) | + +### Sites/SyncDashboard.tsx (460 lines) + +| Field | Value | +|---|---| +| **Component** | `SyncDashboard` | +| **Purpose** | WordPress sync health dashboard with sync status, mismatches, and logs | +| **Origin** | `custom` | +| **UI Patterns** | Status cards, sync action buttons, mismatch list, log viewer | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `Badge` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None (custom dashboard) | + +### Sites/PublishingQueue.tsx (441 lines) + +| Field | Value | +|---|---| +| **Component** | `PublishingQueue` | +| **Purpose** | Scheduled content queue with list/calendar view (site-specific) | +| **Origin** | `custom` | +| **UI Patterns** | Dual view (list + calendar), similar to ContentCalendar but site-scoped | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Duplicates much of `Publisher/ContentCalendar.tsx` but scoped to a single site | +| **Template** | None (custom queue view) | + +### Sites/AIAutomationSettings.tsx (929 lines) + +| Field | Value | +|---|---| +| **Component** | `AIAutomationSettings` | +| **Purpose** | Unified AI & automation settings per site (per SETTINGS-CONSOLIDATION-PLAN) | +| **Origin** | `custom` | +| **UI Patterns** | Multi-section settings form, stage configuration, unified settings API | +| **Shared Components** | `Card`, `Button`, `Switch`, `InputField`, `Label`, `Select` | +| **Local Sub-components** | Uses `unifiedSettings.api` with `UnifiedSiteSettings`, `StageConfig` types | +| **Pattern Duplication** | Large settings form pattern similar to Sites/Settings, Publisher/PublishSettings | +| **Template** | None (custom settings form) | + +### Sites/DeploymentPanel.tsx (43 lines) + +| Field | Value | +|---|---| +| **Component** | `DeploymentPanel` | +| **Purpose** | **DEPRECATED** — Placeholder showing deprecation notice | +| **Origin** | `custom` (deprecated) | +| **UI Patterns** | Static notice card | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None | + +--- + +## 6. Automation + +### Automation/AutomationPage.tsx (~1156 lines) + +| Field | Value | +|---|---| +| **Component** | `AutomationPage` | +| **Purpose** | Main automation dashboard — run/pause/config pipeline, live progress tracking, activity log, eligibility checks | +| **Origin** | `custom` | +| **UI Patterns** | 7-stage pipeline visualization, live polling progress, server time display, eligibility gating, stage color coding | +| **Shared Components** | `PageMeta`, `PageHeader`, `ComponentCard`, `DebugSiteSelector`, `Button`, `useToast`, `useSiteStore` | +| **Local Sub-components** | `ActivityLog`, `CurrentProcessingCardV2`, `GlobalProgressBar` (from `components/Automation/`) | +| **Pattern Duplication** | None — highly specialized | +| **Template** | None (custom automation dashboard) | + +### Automation/AutomationOverview.tsx (269 lines) + +| Field | Value | +|---|---| +| **Component** | `AutomationOverview` | +| **Purpose** | Production stats dashboard showing actual output metrics and meaningful run history | +| **Origin** | `custom` | +| **UI Patterns** | Quick action buttons with badge counts, production summary, run history list | +| **Shared Components** | `PageMeta`, `PageHeader`, `useToast`, `useSiteStore` | +| **Local Sub-components** | `MeaningfulRunHistory`, `ProductionSummary` (from `components/Automation/DetailView/`) | +| **Pattern Duplication** | None | +| **Template** | None (custom stats dashboard) | + +### Automation/AutomationRunDetail.tsx (218 lines) + +| Field | Value | +|---|---| +| **Component** | `AutomationRunDetail` | +| **Purpose** | Detailed view of a single automation run with stage breakdown, charts, and insights | +| **Origin** | `custom` | +| **UI Patterns** | Run summary card, 2-col layout (credit chart + stage accordion), insights panel, derived insights from data | +| **Shared Components** | `PageMeta`, `PageHeader`, `useToast`, `useSiteStore` | +| **Local Sub-components** | `RunSummaryCard`, `StageAccordion`, `EfficiencyMetrics`, `InsightsPanel`, `CreditBreakdownChart` (from `components/Automation/DetailView/`) | +| **Pattern Duplication** | None | +| **Template** | None (custom detail view) | + +### Automation/PipelineSettings.tsx (399 lines) + +| Field | Value | +|---|---| +| **Component** | `PipelineSettings` | +| **Purpose** | Configure 7-stage automation pipeline — per-stage enable/disable, batch sizes, delays | +| **Origin** | `custom` | +| **UI Patterns** | Multi-stage form with checkboxes and inputs per stage, save/cancel flow | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `Checkbox`, `Select`, `InputField`, `useToast`, `useSiteStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Settings form pattern (similar to PublishSettings, Sites/Settings) | +| **Template** | None (custom pipeline settings form) | + +--- + +## 7. Thinker + +### Thinker/Prompts.tsx (499 lines) + +| Field | Value | +|---|---| +| **Component** | `Prompts` | +| **Purpose** | AI prompt library — manage/edit/reset prompt templates for all AI operations (clustering, ideas, content, images, site structure) | +| **Origin** | `custom` | +| **UI Patterns** | Grouped prompt editor cards (Planner, Writer, Image, Site Builder sections), save/reset per prompt, TextArea editors | +| **Shared Components** | `PageMeta`, `PageHeader`, `Button`, `TextArea`, `useToast` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Repeating card+TextArea+save/reset pattern for each prompt type — could extract a `PromptEditorCard` component | +| **Template** | None (custom prompt editor layout) | + +### Thinker/AuthorProfiles.tsx (160 lines) + +| Field | Value | +|---|---| +| **Component** | `AuthorProfiles` | +| **Purpose** | CRUD for writing style profiles (name, tone, language) | +| **Origin** | `custom` | +| **UI Patterns** | Card grid, FormModal for create/edit, confirm-delete, CRUD API calls | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `Badge`, `FormModal`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | FormModal CRUD pattern is clean and reusable | +| **Template** | None (card grid + FormModal) | + +### Thinker/ImageTesting.tsx (28 lines) + +| Field | Value | +|---|---| +| **Component** | `ImageTesting` | +| **Purpose** | **PLACEHOLDER** — "Coming Soon" for image testing | +| **Origin** | `placeholder` | +| **UI Patterns** | Static placeholder card | +| **Shared Components** | `PageMeta`, `PageHeader`, `ComponentCard` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same "Coming Soon" pattern as Profile, Strategies | +| **Template** | None | + +### Thinker/Profile.tsx (22 lines) + +| Field | Value | +|---|---| +| **Component** | `Profile` | +| **Purpose** | **PLACEHOLDER** — "Coming Soon" for AI profile settings | +| **Origin** | `placeholder` | +| **UI Patterns** | Static placeholder card | +| **Shared Components** | `PageMeta`, `ComponentCard` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same "Coming Soon" pattern as ImageTesting, Strategies | +| **Template** | None | + +### Thinker/Strategies.tsx (28 lines) + +| Field | Value | +|---|---| +| **Component** | `Strategies` | +| **Purpose** | **PLACEHOLDER** — "Coming Soon" for content strategies | +| **Origin** | `placeholder` | +| **UI Patterns** | Static placeholder card | +| **Shared Components** | `PageMeta`, `PageHeader`, `ComponentCard` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same "Coming Soon" pattern as ImageTesting, Profile | +| **Template** | None | + +--- + +## 8. Optimizer + +### Optimizer/ContentSelector.tsx (303 lines) + +| Field | Value | +|---|---| +| **Component** | `OptimizerContentSelector` | +| **Purpose** | Content list for selecting items to optimize — single/batch optimize with entry point selection | +| **Origin** | `custom` | +| **UI Patterns** | Manual table with checkboxes, client-side filtering, batch selection, entry-point dropdown, manual pagination | +| **Shared Components** | `PageMeta`, `PageHeader`, `ModuleNavigationTabs`, `Button`, `Select`, `Checkbox`, `useToast`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | `ContentFilter`, `SourceBadge`, `OptimizationScores` (from `components/content/`, `components/optimizer/`) | +| **Pattern Duplication** | Manual table with inline pagination — duplicates TablePageTemplate capability; pagination buttons duplicate pattern seen in Linker, Sites/Content | +| **Template** | None (custom manual table) | + +### Optimizer/AnalysisPreview.tsx (304 lines) + +| Field | Value | +|---|---| +| **Component** | `AnalysisPreview` | +| **Purpose** | Preview optimization scores for a single content item without applying changes | +| **Origin** | `custom` | +| **UI Patterns** | Param-driven detail view, score cards, metadata coverage scorecards, recommended actions list | +| **Shared Components** | `PageMeta`, `PageHeader`, `useToast` | +| **Local Sub-components** | `OptimizationScores` (from `components/optimizer/`) | +| **Pattern Duplication** | None | +| **Template** | None (custom analysis view) | + +--- + +## 9. Linker + +### Linker/ContentList.tsx (237 lines) + +| Field | Value | +|---|---| +| **Component** | `LinkerContentList` | +| **Purpose** | Content list for adding internal links — single/batch link processing | +| **Origin** | `custom` | +| **UI Patterns** | Manual table, per-row process button, batch processing, link results display, manual pagination | +| **Shared Components** | `PageMeta`, `PageHeader`, `ModuleNavigationTabs`, `Button`, `useToast`, `useSectorStore`, `usePageSizeStore`, `usePageLoading` | +| **Local Sub-components** | `SourceBadge`, `LinkResults` (from `components/content/`, `components/linker/`) | +| **Pattern Duplication** | Manual table + inline pagination — same pattern as Optimizer/ContentSelector and Sites/Content | +| **Template** | None (custom manual table) | + +--- + +## 10. Settings (Admin/Legacy) + +### Settings/Integration.tsx (~1028 lines) + +| Field | Value | +|---|---| +| **Component** | `Integration` | +| **Purpose** | API integration management (OpenAI, Runware, GSC) — configure keys, test connections, image generation settings | +| **Origin** | `custom` | +| **UI Patterns** | Integration cards, validation cards, image generation/result cards, site integrations, FormModal for config | +| **Shared Components** | `PageMeta`, `IntegrationCard`, `ValidationCard`, `ImageGenerationCard`, `ImageResultCard`, `ImageServiceCard`, `SiteIntegrationsSection`, `Modal`, `FormModal`, `Button`, `Checkbox`, `Label`, `SelectDropdown`, `Alert`, `useToast` | +| **Local Sub-components** | Inline SVG icon components (OpenAIIcon, RunwareIcon, GSCIcon) | +| **Pattern Duplication** | Complex integration management — unique | +| **Template** | None (custom integration management) | + +### Settings/Sites.tsx (~638 lines) + +| Field | Value | +|---|---| +| **Component** | `Sites` (Settings) | +| **Purpose** | Admin site management — CRUD sites, manage sectors, toggle active sites | +| **Origin** | `custom` | +| **UI Patterns** | SiteCard grid, FormModal for create/edit, sector selector modal, confirm delete | +| **Shared Components** | `PageMeta`, `SiteCard`, `FormModal`, `ConfirmDialog`, `Button`, `Alert`, `Select`, `Checkbox`, `Badge`, `useToast` | +| **Local Sub-components** | Inline SiteIcon SVG | +| **Pattern Duplication** | Overlaps with `Sites/List.tsx` — both manage sites with different UIs | +| **Template** | None (card grid + modals) | + +### Settings/WordPressIntegrationDebug.tsx (~655 lines) + +| Field | Value | +|---|---| +| **Component** | `WordPressIntegrationDebug` | +| **Purpose** | WordPress integration health debugging — sync events, data validation, API status checks | +| **Origin** | `custom` | +| **UI Patterns** | Health status cards, sync event log, data validation table, debug toggle | +| **Shared Components** | `useSiteStore`, `useToast`, icons | +| **Local Sub-components** | None | +| **Pattern Duplication** | Overlaps with Sites/SyncDashboard — both show WordPress sync health | +| **Template** | None (custom debug interface) | + +### Settings/CreditsAndBilling.tsx (~238 lines) + +| Field | Value | +|---|---| +| **Component** | `CreditsAndBilling` | +| **Purpose** | Usage overview with credit balance and transaction history | +| **Origin** | `custom` | +| **UI Patterns** | Tab toggle (overview/transactions), metric cards, transaction table | +| **Shared Components** | `PageMeta`, `ComponentCard`, `EnhancedMetricCard`, `Button`, `Badge`, `useToast` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Duplicates functionality in `account/UsageDashboardPage` and `Billing/Usage` | +| **Template** | None (custom billing view) | + +### Settings/Plans.tsx (~218 lines) + +| Field | Value | +|---|---| +| **Component** | `Plans` | +| **Purpose** | Display available subscription plans using PricingTable component | +| **Origin** | `custom` | +| **UI Patterns** | Pricing table display, plan feature extraction, URL-based plan preselection | +| **Shared Components** | `PageMeta`, `PricingTable1`, `useToast`, `usePageLoading`, `useAuthStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Plan display overlaps with `account/PlansAndBillingPage` | +| **Template** | None (pricing table) | + +### Settings/Publishing.tsx (~226 lines) + +| Field | Value | +|---|---| +| **Component** | `Publishing` | +| **Purpose** | Publishing rules, auto-publish, sync settings (TODO: mostly placeholder) | +| **Origin** | `custom` | +| **UI Patterns** | Settings form with checkboxes, dropdowns, PublishingRules component | +| **Shared Components** | `PageMeta`, `Card`, `Button`, `Checkbox`, `Label`, `Input`, `Select`, `PublishingRules`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Overlaps with `Publisher/PublishSettings` | +| **Template** | None (custom settings form) | + +### Settings/General.tsx (109 lines) + +| Field | Value | +|---|---| +| **Component** | `GeneralSettings` | +| **Purpose** | App preferences (table records per page, default sort) | +| **Origin** | `custom` | +| **UI Patterns** | Simple settings form, settingsStore integration | +| **Shared Components** | `PageMeta`, `ComponentCard`, `Button`, `Label`, `InputField`, `Select`, `useSettingsStore`, `useToast` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None (ComponentCard form) | + +### Settings/Industries.tsx (59 lines) + +| Field | Value | +|---|---| +| **Component** | `Industries` (Settings) | +| **Purpose** | Admin industry template viewer (read-only card grid) | +| **Origin** | `custom` | +| **UI Patterns** | Card grid, badge for active status | +| **Shared Components** | `PageMeta`, `Card`, `Badge`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Overlaps with `Reference/Industries` | +| **Template** | None (card grid) | + +### Settings/Subscriptions.tsx (94 lines) + +| Field | Value | +|---|---| +| **Component** | `Subscriptions` | +| **Purpose** | Admin subscription list (table of account subscriptions) | +| **Origin** | `custom` | +| **UI Patterns** | Simple table in Card, status badges | +| **Shared Components** | `PageMeta`, `Card`, `Badge`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None (simple table) | + +### Settings/Users.tsx (79 lines) + +| Field | Value | +|---|---| +| **Component** | `Users` | +| **Purpose** | Admin user list (table of account users) | +| **Origin** | `custom` | +| **UI Patterns** | Simple table in Card, role/status badges | +| **Shared Components** | `PageMeta`, `Card`, `Badge`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None (simple table) | + +### Settings/Account.tsx (43 lines) + +| Field | Value | +|---|---| +| **Component** | `AccountSettings` (Settings) | +| **Purpose** | **PLACEHOLDER** — "coming soon" for account settings | +| **Origin** | `placeholder` | +| **UI Patterns** | Static placeholder | +| **Shared Components** | `PageMeta`, `Card`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Functionality exists in `account/AccountSettingsPage` | +| **Template** | None | + +### Settings/System.tsx (43 lines) + +| Field | Value | +|---|---| +| **Component** | `SystemSettings` | +| **Purpose** | **PLACEHOLDER** — "coming soon" for system settings | +| **Origin** | `placeholder` | +| **UI Patterns** | Static placeholder | +| **Shared Components** | `PageMeta`, `Card`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None | + +--- + +## 11. Billing (Legacy) + +### Billing/Usage.tsx (170 lines) + +| Field | Value | +|---|---| +| **Component** | `Usage` | +| **Purpose** | Credit usage overview with cost table and transaction history | +| **Origin** | `custom` | +| **UI Patterns** | Balance card, cost reference table, transaction list | +| **Shared Components** | `PageMeta`, `Card`, `Badge`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Duplicates `Settings/CreditsAndBilling` and `account/UsageDashboardPage` | +| **Template** | None | + +### Billing/Credits.tsx (122 lines) + +| Field | Value | +|---|---| +| **Component** | `Credits` | +| **Purpose** | Credit balance display with upgrade CTA | +| **Origin** | `custom` | +| **UI Patterns** | Balance cards, link to plans | +| **Shared Components** | `PageMeta`, `Card`, `Badge`, `Button`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Overlaps with Usage page and account/UsageDashboardPage | +| **Template** | None | + +### Billing/Transactions.tsx (103 lines) + +| Field | Value | +|---|---| +| **Component** | `Transactions` | +| **Purpose** | Credit transaction history table with pagination | +| **Origin** | `custom` | +| **UI Patterns** | Table with color-coded badges, pagination | +| **Shared Components** | `PageMeta`, `Card`, `Badge`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Transaction table duplicated in Settings/CreditsAndBilling and Billing/Usage | +| **Template** | None | + +--- + +## 12. Account (Current) + +### account/PlansAndBillingPage.tsx (~1822 lines) + +| Field | Value | +|---|---| +| **Component** | `PlansAndBillingPage` | +| **Purpose** | Comprehensive billing dashboard — current plan, credit packages, invoices, payment methods, purchase flow | +| **Origin** | `custom` | +| **UI Patterns** | Multi-section dashboard, credit package cards, invoice downloads, payment method cards, purchase modals, portal integration | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Badge`, `Button`, `Label`, `useToast`, `usePageLoading` | +| **Local Sub-components** | Inline SVG icons, portal-based purchase modal | +| **Pattern Duplication** | Supersedes `Settings/Plans`, `Settings/CreditsAndBilling`, `Billing/*`; very large file that could be split | +| **Template** | None (custom multi-section dashboard) | + +### account/AccountSettingsPage.tsx (~979 lines) + +| Field | Value | +|---|---| +| **Component** | `AccountSettingsPage` | +| **Purpose** | Account, profile, and team management — single scrollable page with all settings | +| **Origin** | `custom` | +| **UI Patterns** | Vertical form sections (Account, Profile, Team), invite/remove team members, change password, modal for invites | +| **Shared Components** | `PageMeta`, `PageHeader`, `ComponentCard`, `Card`, `Badge`, `Button`, `InputField`, `Select`, `Checkbox`, `Modal`, `useToast`, `useAuthStore`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Supersedes `Settings/Account` placeholder | +| **Template** | None (custom form sections) | + +### account/UsageDashboardPage.tsx (~954 lines) + +| Field | Value | +|---|---| +| **Component** | `UsageDashboardPage` | +| **Purpose** | Unified analytics dashboard — credit usage charts, operation breakdowns, plan limits, usage trends | +| **Origin** | `custom` | +| **UI Patterns** | Charts (react-apexcharts), stat cards, operation breakdown table, period selector, pagination | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Badge`, `Button`, `SelectDropdown`, `Input`, `Pagination`, `useToast` | +| **Local Sub-components** | None (uses `Chart` from react-apexcharts) | +| **Pattern Duplication** | Supersedes `Billing/Usage`, `Billing/Credits`, `Settings/CreditsAndBilling`; most comprehensive usage view | +| **Template** | None (custom analytics dashboard) | + +### account/ContentSettingsPage.tsx (~686 lines) + +| Field | Value | +|---|---| +| **Component** | `ContentSettingsPage` | +| **Purpose** | Content generation, publishing, and image settings — 3-tab settings page | +| **Origin** | `custom` | +| **UI Patterns** | Tabbed form (Content, Publishing, Images), image generation settings with provider/model selectors | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `SelectDropdown`, `Label`, `Checkbox`, `TextArea`, `useToast` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Publishing settings overlap with `Publisher/PublishSettings`; image settings overlap with `Settings/Integration` | +| **Template** | None (tabbed settings form) | + +### account/PurchaseCreditsPage.tsx (~429 lines) + +| Field | Value | +|---|---| +| **Component** | `PurchaseCreditsPage` | +| **Purpose** | Credit package selection and payment flow — choose package, select payment method, purchase | +| **Origin** | `custom` | +| **UI Patterns** | Package selection cards, payment method selection, manual payment form, invoice display | +| **Shared Components** | `PageMeta`, `PageHeader`, `Button`, `InputField`, `TextArea`, `Label` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Purchase flow also exists within `PlansAndBillingPage` | +| **Template** | None (custom purchase flow) | + +### account/NotificationsPage.tsx (~428 lines) + +| Field | Value | +|---|---| +| **Component** | `NotificationsPage` | +| **Purpose** | Notification center — list, filter, mark read, delete notifications | +| **Origin** | `custom` | +| **UI Patterns** | Filterable notification list, severity/type/read filters, bulk mark all read, individual delete | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Button`, `Select`, `useNotificationStore`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None (custom notification list) | + +### account/UsageAnalyticsPage.tsx (~278 lines) + +| Field | Value | +|---|---| +| **Component** | `UsageAnalyticsPage` | +| **Purpose** | Usage analytics with URL-driven tabs (limits, activity, insights, API) | +| **Origin** | `custom` | +| **UI Patterns** | URL-driven tab selection (path-based), period selector, billing panels | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Badge`, `Button`, `useToast` | +| **Local Sub-components** | `BillingUsagePanel`, `UsageLimitsPanel`, `CreditInsightsCharts` (from `components/billing/`) | +| **Pattern Duplication** | Overlaps with `UsageDashboardPage` — both show usage analytics with different approaches | +| **Template** | None (tabbed analytics) | + +--- + +## 13. Setup + +### Setup/SetupWizard.tsx (46 lines) + +| Field | Value | +|---|---| +| **Component** | `SetupWizard` | +| **Purpose** | Onboarding setup wizard — thin wrapper delegating to `OnboardingWizard` component | +| **Origin** | `custom` | +| **UI Patterns** | Wizard flow, complete/skip callbacks, page context integration | +| **Shared Components** | `PageMeta`, `OnboardingWizard`, `usePageContext` | +| **Local Sub-components** | None (all logic in `OnboardingWizard`) | +| **Pattern Duplication** | None | +| **Template** | None (delegated to OnboardingWizard) | + +### Setup/IndustriesSectorsKeywords.tsx (~1583 lines) + +| Field | Value | +|---|---| +| **Component** | `IndustriesSectorsKeywords` | +| **Purpose** | Keywords library — browse seed keywords by industry/sector, add to workflow, CSV import, smart suggestions | +| **Origin** | `custom` | +| **UI Patterns** | Sector metric grid, smart suggestions, sector card browsing, CSV import modal, bulk add with confirmation, `TablePageTemplate` for keyword table | +| **Shared Components** | `PageMeta`, `PageHeader`, `WorkflowGuide`, `Badge`, `Button`, `Modal`, `FileInput`, `Label`, `Input`, `Card`, `useToast`, `usePageLoading`, `useSiteStore`, `useSectorStore`, `usePageSizeStore` | +| **Local Sub-components** | `SectorMetricGrid`, `SmartSuggestions`, `SectorCardsGrid`, `BulkAddConfirmation` (from `components/keywords-library/`) | +| **Pattern Duplication** | Very large file that mixes browsing, importing, and management; could be split | +| **Template** | `TablePageTemplate` (for keyword browsing table) | + +--- + +## 14. AuthPages + +### AuthPages/SignIn.tsx (17 lines) + +| Field | Value | +|---|---| +| **Component** | `SignIn` | +| **Purpose** | Sign-in page — thin wrapper composing `AuthLayout` + `SignInForm` | +| **Origin** | `tailadmin-modified` | +| **UI Patterns** | Auth layout with split-screen | +| **Shared Components** | `PageMeta`, `AuthLayout`, `SignInForm` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | `AuthLayout` (shared auth template) | + +### AuthPages/SignUp.tsx (~120 lines) + +| Field | Value | +|---|---| +| **Component** | `SignUp` | +| **Purpose** | Registration page with plan selection and unified signup form | +| **Origin** | `tailadmin-modified` | +| **UI Patterns** | Plan pre-selection from URL, plan cards, auth layout | +| **Shared Components** | `PageMeta`, `SignUpFormUnified`, `GridShape` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Plan fetching logic duplicated from Settings/Plans | +| **Template** | Custom layout (inline, not AuthLayout) | + +### AuthPages/AuthPageLayout.tsx (87 lines) + +| Field | Value | +|---|---| +| **Component** | `AuthLayout` | +| **Purpose** | Shared auth page layout — split-screen with branding panel and plan preview | +| **Origin** | `tailadmin-modified` | +| **UI Patterns** | Split-screen layout (form left, branding right), responsive collapse, plan preview card, theme toggler | +| **Shared Components** | `GridShape`, `ThemeTogglerTwo` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None — this IS the shared layout | +| **Template** | N/A (this is a layout component) | + +### AuthPages/ForgotPassword.tsx (177 lines) + +| Field | Value | +|---|---| +| **Component** | `ForgotPassword` | +| **Purpose** | Request password reset email | +| **Origin** | `custom` | +| **UI Patterns** | Centered card form, success state transition, anti-enumeration (always shows success) | +| **Shared Components** | `PageMeta` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Standalone layout (doesn't use AuthLayout) | +| **Template** | None (standalone centered form) | + +### AuthPages/ResetPassword.tsx (348 lines) + +| Field | Value | +|---|---| +| **Component** | `ResetPassword` | +| **Purpose** | Password reset form with token from email link | +| **Origin** | `custom` | +| **UI Patterns** | Token-validated form, password strength checks, state machine (form/success/error/expired), auto-redirect | +| **Shared Components** | `PageMeta` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Standalone layout (doesn't use AuthLayout) | +| **Template** | None (standalone centered form) | + +### AuthPages/VerifyEmail.tsx (220 lines) + +| Field | Value | +|---|---| +| **Component** | `VerifyEmail` | +| **Purpose** | Email verification with token from email link | +| **Origin** | `custom` | +| **UI Patterns** | Auto-verify on mount, state machine (verifying/success/error/expired), resend option | +| **Shared Components** | `PageMeta` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Standalone layout (doesn't use AuthLayout) | +| **Template** | None (standalone centered form) | + +### AuthPages/Unsubscribe.tsx (82 lines) + +| Field | Value | +|---|---| +| **Component** | `Unsubscribe` | +| **Purpose** | Email preferences redirect — auto-redirects to account settings after 5s | +| **Origin** | `custom` | +| **UI Patterns** | Informational card with auto-redirect timer, transactional email notice | +| **Shared Components** | `PageMeta` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Standalone layout | +| **Template** | None (standalone centered card) | + +--- + +## 15. Help + +### Help/Help.tsx (~1306 lines) + +| Field | Value | +|---|---| +| **Component** | `Help` | +| **Purpose** | In-app help documentation — workflow pipeline visualization, Q&A accordions, getting started guide | +| **Origin** | `custom` | +| **UI Patterns** | Table of contents, anchor-link scrolling, workflow pipeline visualization, accordion FAQ sections, cards | +| **Shared Components** | `PageMeta`, `PageHeader`, `Accordion`, `AccordionItem`, `Card`, `Badge` | +| **Local Sub-components** | `WorkflowPipeline` (inline component), `TableOfContentsItem` interface | +| **Pattern Duplication** | WorkflowPipeline visualization duplicates Dashboard pipeline widget concept; very large file | +| **Template** | None (custom documentation page) | + +--- + +## 16. Reference + +### Reference/Industries.tsx (185 lines) + +| Field | Value | +|---|---| +| **Component** | `Industries` (Reference) | +| **Purpose** | Reference view of industries with keyword counts and volume stats | +| **Origin** | `custom` | +| **UI Patterns** | Card grid with keyword stats, volume formatting, tooltip enrichment | +| **Shared Components** | `PageMeta`, `PageHeader`, `Card`, `Badge`, `Tooltip`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Overlaps with `Settings/Industries` (both show industry cards) | +| **Template** | None (card grid) | + +### Reference/SeedKeywords.tsx (119 lines) + +| Field | Value | +|---|---| +| **Component** | `SeedKeywords` | +| **Purpose** | Global keyword library browser with industry filter and search | +| **Origin** | `custom` | +| **UI Patterns** | Filter bar (industry dropdown + search), keyword list | +| **Shared Components** | `PageMeta`, `Card`, `Badge`, `useToast`, `usePageLoading` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Overlaps with `Setup/IndustriesSectorsKeywords` keyword browsing | +| **Template** | None | + +--- + +## 17. Standalone Pages + +### Payment.tsx (122 lines) + +| Field | Value | +|---|---| +| **Component** | `Payment` | +| **Purpose** | Manual payment contact form — generates mailto link for sales | +| **Origin** | `custom` | +| **UI Patterns** | Simple form, mailto link generation, plan display from URL params | +| **Shared Components** | `InputField`, `TextArea`, `Label`, `Button`, `useAuthStore` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None — unique manual payment flow | +| **Template** | None | + +### UIElements.tsx (737 lines) + +| Field | Value | +|---|---| +| **Component** | `UIElements` | +| **Purpose** | **DEV REFERENCE** — UI component showcase/documentation page (non-indexable) | +| **Origin** | `tailadmin-modified` | +| **UI Patterns** | Component showcase with live examples of all `components/ui/` elements | +| **Shared Components** | Imports effectively ALL `components/ui/` components | +| **Local Sub-components** | None | +| **Pattern Duplication** | N/A — reference page | +| **Template** | None | + +### Components.tsx (680 lines) + +| Field | Value | +|---|---| +| **Component** | `Components` | +| **Purpose** | **DEV REFERENCE** — Modal, dropdown, pagination, card, chart demo page | +| **Origin** | `tailadmin-modified` | +| **UI Patterns** | Component showcase with AlertModal, Modal, Dropdown, Pagination, Card variants | +| **Shared Components** | `PageMeta`, `AlertModal`, `Modal`, `Button`, `Dropdown`, `DropdownItem`, `Pagination`, `Card`, `ChartTab`, `InputField`, `TextArea` | +| **Local Sub-components** | None | +| **Pattern Duplication** | N/A — reference page | +| **Template** | None | + +--- + +## 18. Legal + +### legal/Privacy.tsx (260 lines) + +| Field | Value | +|---|---| +| **Component** | `Privacy` | +| **Purpose** | Privacy policy static content page | +| **Origin** | `custom` | +| **UI Patterns** | Static content with sections, centered card layout, back-to-home link | +| **Shared Components** | `PageMeta` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same layout pattern as Terms.tsx | +| **Template** | None (standalone legal) | + +### legal/Terms.tsx (186 lines) + +| Field | Value | +|---|---| +| **Component** | `Terms` | +| **Purpose** | Terms and conditions static content page | +| **Origin** | `custom` | +| **UI Patterns** | Static content with sections, centered card layout, back-to-home link | +| **Shared Components** | `PageMeta` | +| **Local Sub-components** | None | +| **Pattern Duplication** | Same layout pattern as Privacy.tsx — could extract a `LegalPageLayout` | +| **Template** | None (standalone legal) | + +--- + +## 19. OtherPage + +### OtherPage/NotFound.tsx (44 lines) + +| Field | Value | +|---|---| +| **Component** | `NotFound` | +| **Purpose** | 404 error page | +| **Origin** | `tailadmin-original` | +| **UI Patterns** | Centered error display, SVG illustration, back-to-home link, GridShape background | +| **Shared Components** | `PageMeta`, `GridShape` | +| **Local Sub-components** | None | +| **Pattern Duplication** | None | +| **Template** | None | + +--- + +## Summary Statistics + +| Metric | Count | +|---|---| +| **Total page files** | 68 | +| **Using `TablePageTemplate`** | 10 (Keywords, Clusters, Ideas, Tasks, Content, Review, Approved, Images, Sites/List (table view), Setup/IndustriesSectorsKeywords) | +| **Using `ContentViewTemplate`** | 1 (ContentView) | +| **Custom (no template)** | 50 | +| **Placeholder / Coming Soon** | 5 (ImageTesting, Profile, Strategies, Settings/Account, Settings/System) | +| **Deprecated** | 1 (DeploymentPanel) | +| **TailAdmin-original** | 1 (NotFound) | +| **TailAdmin-modified** | 4 (SignIn, SignUp, UIElements, Components) | +| **Dev reference only** | 2 (UIElements, Components) | + +--- + +## Key Findings — Pattern Duplication + +### 1. Manual Table Duplication +**Pages**: `Sites/Content`, `Sites/ContentStructure`, `Optimizer/ContentSelector`, `Linker/ContentList` +These pages build manual `<table>` with inline pagination instead of using `TablePageTemplate`. Candidate for migration or a simpler `SimpleTableTemplate`. + +### 2. Settings Form Proliferation +**Pages**: `Sites/Settings`, `Sites/AIAutomationSettings`, `Publisher/PublishSettings`, `Automation/PipelineSettings`, `account/ContentSettingsPage`, `Settings/Publishing` +At least 6 pages implement settings forms with similar card+toggle+save patterns. Consider a `SettingsFormTemplate` or shared `SettingsSection` component. + +### 3. Billing/Usage Triplication +**Legacy**: `Settings/CreditsAndBilling`, `Billing/Usage`, `Billing/Credits`, `Billing/Transactions` +**Current**: `account/PlansAndBillingPage`, `account/UsageDashboardPage`, `account/UsageAnalyticsPage` +The legacy Settings/Billing pages duplicate what the account/* pages already provide. Candidates for removal. + +### 4. Inline Tab Implementation +**Pages**: `ClusterDetail`, `Sites/Settings`, `Sites/PostEditor` +Custom button-based tab implementations instead of using a shared `Tabs` component. + +### 5. Cascading Filter Boilerplate +**Pages**: `Keywords`, `Clusters`, `Ideas`, `Tasks`, `Content`, `Review`, `Approved`, `Images` +All Planner+Writer table pages repeat ~50-100 lines of cascading filter loading logic. Could be extracted into a `useCascadingFilters` hook. + +### 6. WordPress Sync Overlap +**Pages**: `Settings/WordPressIntegrationDebug` vs `Sites/SyncDashboard` +Both show WordPress sync health with overlapping functionality. + +### 7. Industry Display Overlap +**Pages**: `Settings/Industries` vs `Reference/Industries` +Both display industry cards; the Reference version adds keyword stats. + +### 8. Calendar Duplication +**Pages**: `Publisher/ContentCalendar` vs `Sites/PublishingQueue` +Both implement calendar+list views for scheduled content. The site-scoped version could reuse the publisher calendar component. + +### 9. Legal Page Layout +**Pages**: `legal/Privacy` vs `legal/Terms` +Identical layout wrapper — candidate for a `LegalPageLayout` component. diff --git a/GO-LIVE-CHECKLIST.md b/docs/plans/GO-LIVE-CHECKLIST.md similarity index 100% rename from GO-LIVE-CHECKLIST.md rename to docs/plans/GO-LIVE-CHECKLIST.md diff --git a/gsc_integratin.md b/docs/plans/gsc_integratin.md similarity index 100% rename from gsc_integratin.md rename to docs/plans/gsc_integratin.md