net/INTELLIGENCE_LIBRARY_FIX.md

Intelligence Library Pages - Implementation Plan

Problem

The Intelligence Library pages are:

1. ❌ Not interactive (static HTML tables)
2. ❌ Not editable (no forms or modals)
3. ❌ Not properly connected to Directus (CORS errors from cached JS)
4. ❌ Poor UX (not visually appealing)

Solution: Create Full CRUD React Components

Pages to Fix:

1. Avatar Intelligence (/admin/content/avatars)
2. Avatar Variants (/admin/collections/avatar-variants)
3. Geo Intelligence (/admin/collections/geo-intelligence)
4. Spintax Dictionaries (/admin/collections/spintax-dictionaries)
5. Cartesian Patterns (/admin/collections/cartesian-patterns)

Requirements for Each Page:

✅ Create - Add new items with modal form ✅ Read - Display items in beautiful, filterable table ✅ Update - Edit items inline or in modal ✅ Delete - Remove items with confirmation ✅ Search - Filter/search functionality ✅ Export - Download as JSON/CSV ✅ Import - Bulk upload ✅ Real-time - Auto-refresh when data changes

Tech Stack:

• TanStack Table - For sortable, filterable tables
• React Hook Form + Zod - For validated forms
• Directus SDK - For API calls
• Shadcn/UI - For modals, dialogs, inputs
• Nano Stores - For state management

Component Structure:

src/components/admin/collections/
├── AvatarVariantManager.tsx    (Full CRUD)
├── GeoIntelligenceManager.tsx  (Full CRUD)
├── SpintaxManager.tsx          (Full CRUD - already exists, needs enhancement)
├── CartesianManager.tsx        (Full CRUD - already exists, needs enhancement)
└── shared/
    ├── DataTable.tsx           (Reusable table component)
    ├── CRUDModal.tsx           (Reusable modal for create/edit)
    └── DeleteConfirm.tsx       (Reusable delete confirmation)

Implementation Steps:

Step 1: Create Reusable Components

• DataTable with sorting, filtering, pagination
• CRUDModal for create/edit forms
• DeleteConfirm dialog

Step 2: Implement Each Manager

• Avatar Variants Manager
• Geo Intelligence Manager
• Enhanced Spintax Manager
• Enhanced Cartesian Manager

Step 3: Update Pages

• Replace static HTML with React components
• Add proper error handling
• Add loading states

Step 4: Test & Polish

• Verify CRUD operations
• Test with real Directus data
• Ensure responsive design

Expected Outcome:

• ✅ Beautiful, interactive tables
• ✅ Inline editing
• ✅ Modal forms for create/edit
• ✅ Real-time updates
• ✅ Search and filter
• ✅ Export/import functionality
• ✅ Proper error handling
• ✅ Loading states
• ✅ Responsive design

Timeline:

• Reusable components: 30 min
• Each manager: 20 min
• Testing & polish: 20 min
• Total: ~2 hours