feat: Complete Intelligence Library full CRUD + Fix Jumpstart error
Intelligence Library: - Add full CRUD for Avatar Variants, Geo Intelligence, Spintax, Cartesian - Create reusable DataTable, CRUDModal, DeleteConfirm components - Add TanStack Table for advanced sorting/filtering/pagination - Add React Hook Form + Zod for validated forms - Add export, search, sort, filter capabilities Jumpstart Fix: - Fix 'Error: undefined' when creating generation jobs - Store config instead of full inventory (1456 posts) - Improve error logging - Engine fetches posts directly from WordPress All pages tested and ready for deployment.
This commit is contained in:
87
INTELLIGENCE_LIBRARY_FIX.md
Normal file
87
INTELLIGENCE_LIBRARY_FIX.md
Normal file
@@ -0,0 +1,87 @@
|
||||
# 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**
|
||||
Reference in New Issue
Block a user