igny8/docs/audits/IGNY8-Frontend-Component-Audit.md

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

<ErrorBoundary>
  <ThemeProvider>                     ← dark mode (class strategy)
    <HeaderMetricsProvider>           ← credit/page metric badges
      <ToastProvider>                 ← toast notifications  
        <BrowserRouter>
          <PageProvider>              ← page title/badge context
            <HelmetProvider>
              <Routes>
                <ProtectedRoute>      ← JWT auth guard
                  <SidebarProvider>   ← sidebar expand/collapse state
                    <PageLoadingProvider>
                      <AppLayout>     ← flex shell (sidebar + main)
                        <AppSidebar>  ← left nav (290px / 90px)
                        <Backdrop>    ← mobile overlay
                        <AppHeader>   ← sticky top bar
                        <Outlet>      ← 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
• <Navigate> 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 <html>
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	<title> 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