salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VErsion 1.3.2

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-03 09:35:43 +00:00
parent f1ba0aa531
commit f10916bfab
12 changed files with 957 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/30-FRONTEND/COMPONENT-SYSTEM.md
View File

@@ -1,5 +1,8 @@
# IGNY8 Frontend Component System
**Last Updated:** January 3, 2026
**Version:** 1.3.2
> **🔒 ENFORCED BY ESLINT** - Violations will trigger warnings/errors during build.
> This document is the single source of truth for all UI components.
@@ -11,6 +14,7 @@
|---------|-----------|-------------|
| Button | `Button` | `components/ui/button/Button` |
| Icon Button | `IconButton` | `components/ui/button/IconButton` |
| Button Group | `ButtonGroup` | `components/ui/button-group/ButtonGroup` |
| Text Input | `InputField` | `components/form/input/InputField` |
| Checkbox | `Checkbox` | `components/form/input/Checkbox` |
| Radio | `Radio` | `components/form/input/Radio` |
@@ -27,6 +31,7 @@
| Spinner | `Spinner` | `components/ui/spinner/Spinner` |
| Tabs | `Tabs` | `components/ui/tabs/Tabs` |
| Tooltip | `Tooltip` | `components/ui/tooltip/Tooltip` |
| Calendar Tooltip | `CalendarItemTooltip` | `components/ui/tooltip/CalendarItemTooltip` |
| Toast | `useToast` | `components/ui/toast/ToastContainer` |
| Icons | `*Icon` | `icons` (e.g., `../../icons`) |
@@ -595,7 +600,54 @@ import { CloseIcon } from '../../icons';
---
## 8. LIVE REFERENCE
## 8. SITE-SPECIFIC COMPONENTS (v1.3.2)
### SiteInfoBar
Reusable site info header component for site-specific pages.
```tsx
import { SiteInfoBar } from '../../components/common/SiteInfoBar';
<SiteInfoBar
site={currentSite} // Site object with name, domain, etc.
onSiteChange={handleSiteChange} // Optional: Callback when site changes
showSelector={true} // Whether to show site selector dropdown
/>
```
### OnboardingWizard Components
Located in `components/onboarding/`:
```tsx
import { OnboardingWizard } from '../../components/onboarding/OnboardingWizard';
import {
Step1Welcome,
Step2AddSite,
Step3ConnectIntegration,
Step4AddKeywords,
Step5Complete,
} from '../../components/onboarding/steps';
```
### CalendarItemTooltip
Tooltip specifically designed for calendar items.
```tsx
import { CalendarItemTooltip } from '../../components/ui/tooltip';
<CalendarItemTooltip
item={contentItem} // Content object
onView={handleView} // Optional: View callback
onRemove={handleRemove} // Optional: Remove callback
/>
```
---
## 9. LIVE REFERENCE
View all components with live examples at: `/ui-elements`
@@ -603,7 +655,7 @@ This page shows every component with all prop variations.
---
## 9. AI AGENT INSTRUCTIONS
## 10. AI AGENT INSTRUCTIONS
When working on this codebase, AI agents MUST:
@@ -611,6 +663,20 @@ When working on this codebase, AI agents MUST:
2. **Import icons only from `src/icons`** - never from external libraries
3. **Follow the import paths** specified in this document
4. **Check ESLint** after making changes: `npm run lint`
5. **Use semantic color tokens** - never hardcoded hex values or Tailwind defaults
### Color Rules
```tsx
// ✅ CORRECT - Use semantic tokens
className="bg-brand-500 text-gray-900 border-success-500"
// ❌ WRONG - Tailwind defaults (DISABLED)
className="bg-blue-500 text-slate-900 border-green-500"
// ❌ WRONG - Hardcoded hex
className="bg-[#0077B6]"
style={{ color: '#DC2626' }}
```
5. **Reference this document** for correct component usage
6. **Use consistent icon sizing**: `className="w-4 h-4"` for small, `w-5 h-5` for medium

3
docs/30-FRONTEND/DESIGN-GUIDE.md
View File

@@ -4,7 +4,8 @@
>
> 🔒 **STYLE LOCKED** - This design system is enforced by ESLint. All frontend code must comply.
**Last Updated:** January 2, 2026
**Last Updated:** January 3, 2026
**Version:** 1.3.2
---

161
docs/30-FRONTEND/DESIGN-TOKENS.md
View File

@@ -1,64 +1,127 @@
# Design System & Component Guidelines
> 🔒 **STYLE SYSTEM LOCKED** - This design system is **LOCKED** as of 2025-01-XX. Read this entire document before making any styling changes.
**Last Updated:** January 3, 2026
**Version:** 1.3.2
> 🔒 **STYLE SYSTEM LOCKED** - This design system is **LOCKED**. Read this entire document before making any styling changes.
## 🎨 Design Token System
**Single Source of Truth**: All design tokens (colors, gradients, shadows) are defined in `/src/styles/tokens.css`
**Single Source of Truth**: `/src/styles/design-system.css`
### Color Tokens
⚠️ **CRITICAL**: Only 6 hex color values exist in the entire system. Everything else is derived using `color-mix()`.
Use CSS variables for colors:
- `var(--color-primary)` - Primary brand blue (#0693e3)
- `var(--color-primary-dark)` - Primary dark (#0472b8)
- `var(--color-success)` - Success green (#0bbf87)
- `var(--color-warning)` - Warning amber (#ff7a00)
- `var(--color-danger)` - Danger red (#ef4444)
- `var(--color-purple)` - Purple accent (#5d4ae3)
### The 6 Base Colors
| Token | Hex | Purpose |
|-------|-----|---------|
| `--color-primary` | `#0077B6` | Brand blue |
| `--color-success` | `#00B894` | Success green |
| `--color-warning` | `#F59E0B` | Warning amber |
| `--color-danger` | `#DC2626` | Error red |
| `--color-purple` | `#7C3AED` | Premium purple |
| `--color-gray-base` | `#667085` | Neutral gray |
### Color Scales (Derived)
Each base color generates a full scale (50-950) via `color-mix()`:
```css
/* Example: brand color scale */
--color-brand-50 /* Lightest */
--color-brand-100
--color-brand-200
--color-brand-300
--color-brand-400
--color-brand-500 /* Base = --color-primary */
--color-brand-600
--color-brand-700
--color-brand-800
--color-brand-900
--color-brand-950 /* Darkest */
```
### Tailwind Color Classes
**Available (Use These):**
```css
/* Brand */ bg-brand-50 ... bg-brand-950, text-brand-*, border-brand-*
/* Success */ bg-success-50 ... bg-success-950, text-success-*, border-success-*
/* Warning */ bg-warning-50 ... bg-warning-950, text-warning-*, border-warning-*
/* Error */ bg-error-50 ... bg-error-950, text-error-*, border-error-*
/* Purple */ bg-purple-50 ... bg-purple-950, text-purple-*, border-purple-*
/* Gray */ bg-gray-50 ... bg-gray-950, text-gray-*, border-gray-*
/* Info */ bg-info-50 ... bg-info-950 (alias for brand)
```
**DISABLED (DO NOT USE):**
```css
/* These Tailwind defaults are DISABLED and won't work */
blue-*, red-*, green-*, yellow-*, orange-*, indigo-*, violet-*,
pink-*, rose-*, cyan-*, teal-*, emerald-*, lime-*, amber-*,
slate-*, zinc-*, neutral-*, stone-*
```
### Using Colors
**✅ DO:**
```tsx
// Use Tailwind utilities with brand colors
<div className="bg-brand-500 text-white">Content</div>
// Use semantic Tailwind utilities
<div className="bg-brand-500 text-white">Primary action</div>
<div className="bg-success-100 text-success-700">Success message</div>
<div className="bg-error-50 border-error-500">Error alert</div>
// Use CSS variables for custom values
<div className="bg-[var(--color-primary)]">Content</div>
// Use CSS variables for custom cases
<div className="bg-[var(--color-primary)]">Custom</div>
// Use React components
<Button tone="brand" variant="gradient">Click me</Button>
// Use React components with tone prop
<Button tone="brand">Primary</Button>
<Button tone="success">Approve</Button>
<Badge tone="warning">Pending</Badge>
```
**❌ DON'T:**
```tsx
// Don't use deprecated .igny8-* utility classes
<div className="igny8-bg-blue">Content</div>
// Don't use Tailwind default colors (DISABLED)
<div className="bg-blue-500">Won't work!</div>
<div className="text-slate-700">Won't work!</div>
// Don't hardcode color values
<div className="bg-[#0693e3]">Content</div>
// Don't use inline styles
<div style={{ backgroundColor: '#0693e3' }}>Content</div>
// Don't hardcode hex values
<div className="bg-[#0077B6]">Bad!</div>
<div style={{ backgroundColor: '#DC2626' }}>Bad!</div>
```
## 🔒 Style System Lock Status
**DO NOT:**
- ❌ Create new CSS classes without documenting in this file
- ❌ Use Tailwind default color classes (blue-*, red-*, green-*, etc.)
- ❌ Hardcode hex color values anywhere
- ❌ Use inline styles for colors/spacing/typography
- ❌ Import from external icon libraries (lucide-react, @heroicons)
- ❌ Create new CSS classes without documenting
- ❌ Duplicate existing styling patterns
- ❌ Create custom colors/utilities that already exist
- ❌ Use deprecated `.igny8-*` utility classes (except `.igny8-table-*` and `.igny8-header-metric-*`)
- ❌ Add inline styles for colors/spacing/typography
- ❌ Hardcode color hex values
**DO:**
- ✅ Check this document before creating any styles
- ✅ Use design tokens from `tokens.css` via CSS variables
- ✅ Use Tailwind utilities (bg-brand-500, text-brand-500, etc.)
- ✅ Use React components (Button, Badge, Card) from `/components/ui/`
- ✅ Follow component patterns from this guide
- ✅ Update this document if you MUST add something new
- ✅ Use semantic color tokens (brand-*, success-*, etc.)
- ✅ Import icons from `src/icons`
- ✅ Use React components (Button, Badge, Card, InputField)
- ✅ Run `npm run lint` to check for violations
- ✅ Check `/ui-elements` for component examples
---
## Module Color Scheme (v1.3.2)
Each module has a distinct color for visual identification:
| Module | Color | Tailwind Classes |
|--------|-------|------------------|
| **Planner** (Keywords/Clusters/Ideas) | Purple | `bg-purple-*`, `text-purple-*` |
| **Writer** (Tasks/Content/Images) | Green | `bg-success-*`, `text-success-*` |
| **Automation** | Blue | `bg-brand-*`, `text-brand-*` |
| **Publisher** | Orange | `bg-warning-*`, `text-warning-*` |
| **Billing** | Purple | `bg-purple-*`, `text-purple-*` |
| **Settings** | Gray | `bg-gray-*`, `text-gray-*` |
---
@@ -148,7 +211,7 @@ Before implementing any UI element:
## 📝 Typography Scale
Typography tokens are defined in `index.css` and should be used consistently:
Typography tokens are defined in `design-system.css` and should be used consistently:
### Title Sizes (for page/section headings)
| Token | Size | Line Height | Use Case |
@@ -192,14 +255,15 @@ Module-specific colors are defined in `src/config/colors.config.ts`:
| Module | Primary Color | Usage |
|--------|---------------|-------|
| Keywords | `brand-500` (blue) | Icons, progress bars, badges |
| Clusters | `purple-500` | Icons, progress bars, badges |
| Ideas | `purple-600` | Icons, progress bars, badges |
| Tasks | `success-600` (green) | Icons, progress bars, badges |
| Content | `success-500` | Icons, progress bars, badges |
| Images | `purple-500` | Icons, progress bars, badges |
| Planner (Keywords) | `brand-500` (blue) | Icons, progress bars, badges |
| Planner (Clusters) | `purple-500` | Icons, progress bars, badges |
| Planner (Ideas) | `purple-600` | Icons, progress bars, badges |
| Writer (Tasks) | `success-600` (green) | Icons, progress bars, badges |
| Writer (Content) | `success-500` | Icons, progress bars, badges |
| Writer (Images) | `purple-500` | Icons, progress bars, badges |
| Automation | `brand-500` | Pipeline cards |
| Billing | `warning-500` (amber) | Credit displays |
| Publisher | `warning-500` (amber) | Calendar, scheduling |
| Billing | `purple-500` | Credit displays |
```tsx
import { MODULE_COLORS } from '@/config/colors.config';
@@ -211,7 +275,7 @@ import { MODULE_COLORS } from '@/config/colors.config';
---
**Last Updated**: January 2, 2026
**Last Updated**: January 3, 2026
**Status**: Active Design System Rules - 🔒 LOCKED
---
@@ -228,7 +292,7 @@ import { MODULE_COLORS } from '@/config/colors.config';
|----------|--------------|------------|
| **UI Components** | `@/components/ui/` or relative `../components/ui/` | Button, Card, Modal, Alert, Badge, Dropdown, Tooltip, Spinner, Tabs, Toast, Pagination, Progress, Avatar, Breadcrumb |
| **Common Components** | `@/components/common/` | PageHeader, ComponentCard, ConfirmDialog, FormModal, TablePageTemplate |
| **Icons** | `@/icons` or `@heroicons/react` | All SVG icons |
| **Icons** | `@/icons` | All SVG icons (local icons only - external libraries disabled) |
| **Templates** | `@/templates/` | TablePageTemplate, ContentViewTemplate |
### BANNED IMPORTS (DO NOT USE)
@@ -254,11 +318,12 @@ const MyButton = () => <button className="...">; // If used more than once, crea
| File | Purpose | When to Use |
|------|---------|-------------|
| `src/index.css` | Main Tailwind config, utilities | Auto-imported, don't import manually |
| `src/styles/tokens.css` | CSS variables (colors, shadows) | Use via `var(--color-name)` |
| `src/styles/design-system.css` | ALL design tokens, colors, shadows, typography | Single source - auto-imported via main.tsx |
**DO NOT CREATE OR USE:**
- ❌ `styles/global.css` - Deprecated
- ❌ `src/styles/global.css` - **Deleted** (consolidated into design-system.css)
- ❌ `src/styles/tokens.css` - **Deleted** (consolidated into design-system.css)
- ❌ `src/styles/index.css` - **Deleted** (consolidated into design-system.css)
- ❌ `components/shared/blocks/blocks.css` - For marketing only
- ❌ `components/shared/layouts/layouts.css` - For marketing only
- ❌ Any new `.css` files in component folders
@@ -375,8 +440,10 @@ src/components/ui/
|--------|-------|------|
| Planner | Keywords, Clusters, Ideas | `src/pages/Planner/` |
| Writer | Review, Approved, Content | `src/pages/Writer/` |
| Publisher | ContentCalendar, PublishingQueue | `src/pages/Publisher/` |
| Sites | List, Settings | `src/pages/Sites/` |
| Dashboard | Home | `src/pages/Dashboard/` |
| Setup | SetupWizard (Onboarding) | `src/pages/Setup/` |
### AUDIT CHECKLIST FOR CODE REVIEW

142
docs/30-FRONTEND/PAGES.md
View File

@@ -1,7 +1,7 @@
# Frontend Pages & Routes
**Last Verified:** January 1, 2026
**Version:** 1.3.0
**Last Verified:** January 3, 2026
**Version:** 1.3.2
**Framework:** React 19 + TypeScript + React Router 6 + Vite
---
@@ -60,6 +60,27 @@ Routes defined in `/frontend/src/App.tsx`:
## SETUP Routes
### Onboarding Wizard (NEW v1.3.2)
| Route | File | Description |
|-------|------|-------------|
| `/setup/wizard` | `Setup/SetupWizard.tsx` | 5-step onboarding wizard for new users |
**Steps:**
1. **Welcome** - Feature overview, get started CTA
2. **Add Site** - Site name, industry/sector selection, creates site with defaults
3. **Connect Integration** - WordPress plugin installation (optional, can skip)
4. **Add Keywords** - Initial keyword entry with paste support (optional)
5. **Complete** - Success summary, next steps, go to dashboard
**Components:** `frontend/src/components/onboarding/`
- `OnboardingWizard.tsx` - Main wizard container and state
- `steps/Step1Welcome.tsx` - Welcome screen
- `steps/Step2AddSite.tsx` - Site creation with SelectDropdown + Badge sectors
- `steps/Step3ConnectIntegration.tsx` - WordPress setup
- `steps/Step4AddKeywords.tsx` - Keyword input
- `steps/Step5Complete.tsx` - Completion summary
### Add Keywords
| Route | File | Description |
@@ -86,11 +107,19 @@ Routes defined in `/frontend/src/App.tsx`:
| Route | File | Description |
|-------|------|-------------|
| `/sites` | `Sites/List.tsx` | Site listing with setup checklist per site |
| `/sites/:id/dashboard` | `Sites/Dashboard.tsx` | Site overview with setup checklist |
| `/sites/:id/settings` | `Sites/Settings.tsx` | Site settings (General, Integrations, Content Types) |
| `/sites/:id` | `Sites/Dashboard.tsx` | Site dashboard with quick actions and widgets |
| `/sites/:id/settings` | `Sites/Settings.tsx` | Site settings (General, Integrations, Publishing, Content Types) |
**v1.3.2 Changes:**
- Site Dashboard redesigned with SiteInfoBar component
- Quick actions now 2-column card grid layout
- AI Operations widget loads real data from getDashboardStats API
- Fixed race condition in async loadSiteData
- Settings page has new Publishing Settings tab
**Components:**
- `SiteSetupChecklist` - Shows setup progress (site created, industry/sectors, WordPress, keywords)
- `SiteInfoBar` - Reusable site info header for site-specific pages
### Thinker (Admin Only)
@@ -136,7 +165,42 @@ Routes defined in `/frontend/src/App.tsx`:
| Route | File | Description |
|-------|------|-------------|
| `/automation` | `Automation/Dashboard.tsx` | 7-stage pipeline, schedule config, run controls |
| `/automation` | `Automation/AutomationPage.tsx` | 7-stage pipeline, schedule config, run controls |
---
## PUBLISHER Routes (NEW v1.3.2)
### Content Calendar
| Route | File | Description |
|-------|------|-------------|
| `/publisher` | → `/publisher/content-calendar` | Redirect |
| `/publisher/content-calendar` | `Publisher/ContentCalendar.tsx` | Content calendar with scheduling |
**Features:**
- Calendar view with month navigation
- List view with drag-and-drop reordering
- Schedule content by dragging to calendar dates
- Unschedule content from queue
- Stats: scheduled, publishing, published counts
- Filter by site (inherited from layout)
**Content Status Fields:**
- `status`: `draft | review | approved | published` (workflow status)
- `site_status`: `not_published | scheduled | publishing | published | failed` (publishing status)
- `scheduled_publish_at`: DateTime for scheduled publishing
**API Integration:**
- `POST /api/v1/writer/content/{id}/schedule/` - Schedule content
- `POST /api/v1/writer/content/{id}/unschedule/` - Remove from schedule
- `GET /api/v1/writer/content/?status__in=approved,published` - Multi-status filter
### Legacy Redirects
| Old Route | Redirects To |
|-----------|--------------|
| `/sites/:id/publishing-queue` | `/publisher/content-calendar` |
### Linker (Optional Module)
@@ -269,9 +333,20 @@ These routes redirect to their new locations:
| `/profile` | `/account/settings` |
| `/import-export` | `/account/settings` |
| `/billing/overview` | `/account/plans` |
| `/billing/credits` | `/account/plans` (separate page exists at `Billing/CreditPurchase.tsx`) |
| `/billing/credits` | `/account/plans` |
| `/billing/history` | `/account/plans` |
| `/publishing` | `/account/content-settings` |
| `/writer/published` | `/writer/approved` |
| `/sites/:id/publishing-queue` | `/publisher/content-calendar` |
---
## Internal Pages (Non-Indexed)
| Route | File | Description |
|-------|------|-------------|
| `/ui-elements` | `UIElements.tsx` | Design system reference page |
| `/components` | `Components.tsx` | Component showcase |
---
@@ -282,6 +357,7 @@ frontend/src/pages/
├── account/
│ ├── AccountSettingsPage.tsx # Account, Profile, Team tabs
│ ├── ContentSettingsPage.tsx # Content Gen, Publishing, Images tabs
│ ├── NotificationsPage.tsx # Full notifications with filters
│ ├── PlansAndBillingPage.tsx # Plan, Upgrade, History tabs
│ ├── UsageAnalyticsPage.tsx # Limits, Credit History, API tabs
│ ├── UsageLimits.tsx # Limits tab component
@@ -293,7 +369,7 @@ frontend/src/pages/
│ ├── ResetPassword.tsx
│ └── VerifyEmail.tsx
├── Automation/
│ └── Dashboard.tsx
│ └── AutomationPage.tsx
├── Billing/
│ └── CreditPurchase.tsx
├── Dashboard/
@@ -310,28 +386,34 @@ frontend/src/pages/
├── Planner/
│ ├── Keywords.tsx
│ ├── Clusters.tsx
│ ├── ClusterView.tsx
│ ├── ClusterDetail.tsx
│ └── Ideas.tsx
├── Publisher/ # NEW v1.3.2
│ └── ContentCalendar.tsx
├── Settings/
│ └── IntegrationPage.tsx # AI Models (admin)
├── Setup/
│ └── IndustriesSectorsKeywords.tsx # Add Keywords page
│ ├── IndustriesSectorsKeywords.tsx # Add Keywords page
│ └── SetupWizard.tsx # NEW v1.3.2 - Onboarding wizard
├── Sites/
│ ├── List.tsx # Site listing
│ ├── Dashboard.tsx # Site overview + checklist
│ └── Settings.tsx # Site configuration
│ ├── Dashboard.tsx # Site overview + quick actions
│ ├── Settings.tsx # Site config with Publishing tab
│ ├── Content.tsx # Site content listing
│ └── SyncDashboard.tsx # Sync status
├── Thinker/
│ ├── Prompts.tsx
│ ├── AuthorProfiles.tsx
│ ├── Strategies.tsx # Coming Soon
│ └── ImageTesting.tsx # Coming Soon
└── Writer/
├── Tasks.tsx
├── Drafts.tsx
├── ContentView.tsx
├── Images.tsx
├── Review.tsx
└── Approved.tsx # Renamed from Published.tsx (v1.2.0)
├── Writer/
│ ├── Tasks.tsx
│ ├── Content.tsx
│ ├── ContentView.tsx
│ ├── Images.tsx
│ ├── Review.tsx
│ └── Approved.tsx # Renamed from Published.tsx (v1.2.0)
└── UIElements.tsx # NEW v1.3.2 - Design system ref
```
---
@@ -353,14 +435,15 @@ frontend/src/pages/
---
## Navigation Structure (Sidebar)
## Navigation Structure (Sidebar v1.3.2)
```
Dashboard
├── SETUP
│ ├── Setup Wizard [first-time users]
│ ├── Add Keywords
│ ├── Content Settings
│ ├── Sites [if site_builder enabled]
│ ├── Sites
│ └── Thinker [admin only, if thinker enabled]
├── WORKFLOW
│ ├── Planner [if planner enabled]
@@ -368,9 +451,12 @@ Dashboard
│ ├── Writer [if writer enabled]
│ │ └── In-page: Queue → Drafts → Images → Review → Approved
│ ├── Automation [if automation enabled]
│ ├── Publisher
│ │ └── Content Calendar
│ ├── Linker [if linker enabled]
│ └── Optimizer [if optimizer enabled]
├── ACCOUNT
│ ├── Notifications
│ ├── Account Settings (Account → Profile → Team)
│ ├── Plans & Billing (Plan → Upgrade → History)
│ ├── Usage (Limits → Credit History → API Activity)
@@ -381,11 +467,15 @@ Dashboard
---
## Known Issues (from Audit)
## Component Updates (v1.3.2)
1. **Linker/Optimizer Dashboards** exist but not exposed in navigation
2. **Help sub-pages** are placeholders
3. **ContentView** is read-only (no editing capability)
4. Legacy redirects may cause confusion
**New Components:**
- `SiteInfoBar` - Reusable site info header for site-specific pages
- `IconButton` - Icon-only button component
- `CalendarItemTooltip` - Tooltip for calendar items
- `OnboardingWizard` + 5 step components
See `/PRE-LAUNCH-AUDIT.md` for complete issue list.
**Updated Components:**
- All components updated for semantic color tokens
- Badge, Button, Card use design system colors
- 100+ files with color standardization

63
docs/30-FRONTEND/STORES.md
View File

@@ -1,7 +1,7 @@
# Zustand State Management
**Last Verified:** December 27, 2025
**Version:** 1.2.0
**Last Verified:** January 3, 2026
**Version:** 1.3.2
**Framework:** Zustand 4 with persist middleware
---
@@ -15,6 +15,19 @@ All stores in `/frontend/src/store/` use Zustand with TypeScript.
- Async actions for API calls
- Selectors for derived state
**Available Stores:**
- `authStore.ts` - Authentication state
- `siteStore.ts` - Site selection/management
- `sectorStore.ts` - Sector management
- `plannerStore.ts` - Planner module state
- `billingStore.ts` - Billing/credits
- `notificationStore.ts` - Notifications
- `settingsStore.ts` - User preferences
- `moduleStore.ts` - Module navigation
- `columnVisibilityStore.ts` - Table column prefs
- `pageSizeStore.ts` - Table pagination prefs
- **`onboardingStore.ts`** - Onboarding wizard state (v1.3.2)
---
## Auth Store (`authStore.ts`)
@@ -408,11 +421,57 @@ notificationStore (global, polls/syncs independently)
moduleStore (global, loads once per account)
billingStore (global, loads once per account)
onboardingStore (global, syncs with UserSettings backend)
uiStore (local only, no API)
```
---
## Onboarding Store (`onboardingStore.ts`) (v1.3.2)
**Purpose:** Manages onboarding wizard and guide screen state
```typescript
interface OnboardingState {
isGuideDismissed: boolean;
isGuideVisible: boolean;
isLoading: boolean;
lastSyncedAt: Date | null;
}
interface OnboardingActions {
dismissGuide(): Promise<void>;
showGuide(): void;
toggleGuide(): void;
loadFromBackend(): Promise<void>;
syncToBackend(dismissed: boolean): Promise<void>;
}
```
**Persistence:**
- Local: `onboarding-storage` in localStorage
- Backend: `UserSettings` with key `workflow_guide_dismissed`
**Features:**
- Cross-device sync via backend UserSettings
- Rate-limited sync (max every 5 minutes)
- Graceful fallback if backend unavailable
**Usage:**
```typescript
const { isGuideVisible, dismissGuide, showGuide } = useOnboardingStore();
// Show onboarding wizard
if (isGuideVisible) {
return <OnboardingWizard onDismiss={dismissGuide} />;
}
// Re-show guide button
<Button onClick={showGuide}>Show Guide</Button>
```
---
## Store Files Location
```