Files
net/IMPLEMENTATION_ROADMAP.md
cawcenter 82e0892960 fix: TypeScript compatibility & Badge component upgrade
- Updated Badge component to use class-variance-authority (Shadcn standard)
- Fixed Type mismatches in AvatarVariantsManager using double assertion
- Updated Implementation Roadmap with completed tasks
- Updated daily progress log
2025-12-13 20:01:37 -05:00

642 lines
20 KiB
Markdown

# 🎯 SPARK PLATFORM - COMPLETE IMPLEMENTATION ROADMAP
**Priority**: Make Intelligence Library fully interactive + All collections working
**Format**: Milestones → Tasks → Commands to build structure
---
## 🔥 MILESTONE 1: INTELLIGENCE LIBRARY - FULL CRUD (TOP PRIORITY)
**Goal**: All 5 Intelligence Library pages fully editable with stats and cool UX
### Current Status:
- ✅ Pages exist and load data
- ❌ Not editable (read-only)
- ❌ No stats/analytics
- ❌ No "Send to Engine" buttons
- ❌ Basic UI (not cool experience)
### Tasks for Milestone 1:
#### Task 1.1: Avatar Intelligence - Full CRUD ✅ (COMPLETED)
**What Was Built**:
- ✅ Fully interactive manager component
- ✅ Real-time stats dashboard (4 metric cards)
- ✅ Search functionality
- ✅ Beautiful card grid with animations
- ✅ Edit/Delete actions
- ✅ "Generate Variants" button
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/AvatarIntelligenceManager.tsx
frontend/src/components/admin/intelligence/AvatarCard.tsx
frontend/src/components/admin/intelligence/AvatarEditModal.tsx
frontend/src/components/admin/intelligence/AvatarStats.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/intelligence
touch components/admin/intelligence/AvatarIntelligenceManager.tsx
touch components/admin/intelligence/AvatarCard.tsx
touch components/admin/intelligence/AvatarEditModal.tsx
touch components/admin/intelligence/AvatarStats.tsx
touch components/admin/intelligence/GenerateVariantsModal.tsx
```
---
#### Task 1.2: Avatar Variants - Full CRUD ✅ (COMPLETED)
**What Was Built**:
- ✅ Grouped variants by avatar (Accordion view)
- ✅ Stats: Gender breakdown, total variants
- ✅ Visuals: Color-coded badges, DNA style UI
- ✅ Actions: Clone, Test, Delete
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/AvatarVariantsManager.tsx
frontend/src/components/admin/intelligence/VariantCard.tsx
frontend/src/components/admin/intelligence/VariantEditModal.tsx
frontend/src/components/admin/intelligence/VariantPreview.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/AvatarVariantsManager.tsx
touch components/admin/intelligence/VariantCard.tsx
touch components/admin/intelligence/VariantEditModal.tsx
touch components/admin/intelligence/VariantPreview.tsx
```
---
#### Task 1.3: Geo Intelligence - Full CRUD ✅ (COMPLETED)
**What Was Built**:
- ✅ Interactive Map (React Leaflet)
- ✅ Hybrid View: Map + List synced filtering
- ✅ Stats: Market penetration, coverage area
- ✅ Actions: Target location, cluster management
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/GeoIntelligenceManager.tsx
frontend/src/components/admin/intelligence/GeoMap.tsx
frontend/src/components/admin/intelligence/ClusterCard.tsx
frontend/src/components/admin/intelligence/LocationEditModal.tsx
frontend/src/components/admin/intelligence/GeoStats.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/GeoIntelligenceManager.tsx
touch components/admin/intelligence/GeoMap.tsx
touch components/admin/intelligence/ClusterCard.tsx
touch components/admin/intelligence/LocationEditModal.tsx
touch components/admin/intelligence/GeoStats.tsx
```
---
#### Task 1.4: Spintax Dictionaries - Full CRUD
**What to Build**:
- Editable dictionary with categories
- Add/Edit/Delete terms and categories
- Stats: Total terms, by category, usage frequency
- "Test Spintax" button → Preview expanded text
- "Import CSV" button → Bulk import terms
- Cool UX: Tag-style UI, live preview, color-coded categories
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/SpintaxManager.tsx
frontend/src/components/admin/intelligence/SpintaxCategory.tsx
frontend/src/components/admin/intelligence/SpintaxEditModal.tsx
frontend/src/components/admin/intelligence/SpintaxPreview.tsx
frontend/src/components/admin/intelligence/SpintaxImport.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/SpintaxManager.tsx
touch components/admin/intelligence/SpintaxCategory.tsx
touch components/admin/intelligence/SpintaxEditModal.tsx
touch components/admin/intelligence/SpintaxPreview.tsx
touch components/admin/intelligence/SpintaxImport.tsx
```
---
#### Task 1.5: Cartesian Patterns - Full CRUD
**What to Build**:
- Editable pattern library
- Add/Edit/Delete patterns
- Stats: Total patterns, by type, usage count
- "Test Pattern" button → Preview generated output
- "Generate Variations" button → Create pattern variations
- Cool UX: Formula builder, live preview, example outputs
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/CartesianManager.tsx
frontend/src/components/admin/intelligence/PatternCard.tsx
frontend/src/components/admin/intelligence/PatternEditModal.tsx
frontend/src/components/admin/intelligence/PatternBuilder.tsx
frontend/src/components/admin/intelligence/PatternPreview.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/CartesianManager.tsx
touch components/admin/intelligence/PatternCard.tsx
touch components/admin/intelligence/PatternEditModal.tsx
touch components/admin/intelligence/PatternBuilder.tsx
touch components/admin/intelligence/PatternPreview.tsx
```
---
### Milestone 1 - Complete Build Command:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
# Create intelligence components directory
mkdir -p components/admin/intelligence
# Avatar Intelligence
touch components/admin/intelligence/AvatarIntelligenceManager.tsx
touch components/admin/intelligence/AvatarCard.tsx
touch components/admin/intelligence/AvatarEditModal.tsx
touch components/admin/intelligence/AvatarStats.tsx
touch components/admin/intelligence/GenerateVariantsModal.tsx
# Avatar Variants
touch components/admin/intelligence/AvatarVariantsManager.tsx
touch components/admin/intelligence/VariantCard.tsx
touch components/admin/intelligence/VariantEditModal.tsx
touch components/admin/intelligence/VariantPreview.tsx
# Geo Intelligence
touch components/admin/intelligence/GeoIntelligenceManager.tsx
touch components/admin/intelligence/GeoMap.tsx
touch components/admin/intelligence/ClusterCard.tsx
touch components/admin/intelligence/LocationEditModal.tsx
touch components/admin/intelligence/GeoStats.tsx
# Spintax
touch components/admin/intelligence/SpintaxManager.tsx
touch components/admin/intelligence/SpintaxCategory.tsx
touch components/admin/intelligence/SpintaxEditModal.tsx
touch components/admin/intelligence/SpintaxPreview.tsx
touch components/admin/intelligence/SpintaxImport.tsx
# Cartesian Patterns
touch components/admin/intelligence/CartesianManager.tsx
touch components/admin/intelligence/PatternCard.tsx
touch components/admin/intelligence/PatternEditModal.tsx
touch components/admin/intelligence/PatternBuilder.tsx
touch components/admin/intelligence/PatternPreview.tsx
echo "✅ Milestone 1 file structure created!"
```
---
## 🎯 MILESTONE 2: CONTENT FACTORY - KANBAN & FORMS
**Goal**: Kanban board working, forms for leads, editable tables with stats
### Current Status:
- ❌ Kanban board not visible/working
- ❌ No lead forms
- ❌ Tables are read-only
- ❌ No "Send to Engine" functionality
- ❌ No scheduler integration
### Tasks for Milestone 2:
#### Task 2.1: Kanban Board - Full Implementation
**What to Build**:
- Drag-drop Kanban board
- Columns: Queued → Processing → QC → Approved → Published
- Cards show article preview, stats, actions
- "Send to Engine" button on each card
- Filter by site, template, status
- Cool UX: Smooth drag animations, card previews, bulk actions
**Files to Create**:
```bash
frontend/src/components/admin/factory/KanbanBoard.tsx
frontend/src/components/admin/factory/KanbanColumn.tsx
frontend/src/components/admin/factory/ArticleCard.tsx
frontend/src/components/admin/factory/CardActions.tsx
frontend/src/components/admin/factory/BulkActions.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/factory
touch components/admin/factory/KanbanBoard.tsx
touch components/admin/factory/KanbanColumn.tsx
touch components/admin/factory/ArticleCard.tsx
touch components/admin/factory/CardActions.tsx
touch components/admin/factory/BulkActions.tsx
```
---
#### Task 2.2: Lead Forms & Management
**What to Build**:
- Lead capture forms
- Editable leads table
- Stats: Total leads, by source, conversion rate
- "Send to Campaign" button → Add to campaign
- "Export Leads" button → CSV export
- Cool UX: Form builder, drag-drop fields, validation
**Files to Create**:
```bash
frontend/src/components/admin/leads/LeadManager.tsx
frontend/src/components/admin/leads/LeadForm.tsx
frontend/src/components/admin/leads/LeadTable.tsx
frontend/src/components/admin/leads/LeadStats.tsx
frontend/src/components/admin/leads/LeadExport.tsx
frontend/src/pages/admin/leads/index.astro
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/leads
mkdir -p pages/admin/leads
touch components/admin/leads/LeadManager.tsx
touch components/admin/leads/LeadForm.tsx
touch components/admin/leads/LeadTable.tsx
touch components/admin/leads/LeadStats.tsx
touch components/admin/leads/LeadExport.tsx
touch pages/admin/leads/index.astro
```
---
#### Task 2.3: Generation Jobs - Table with Actions
**What to Build**:
- Editable jobs table
- Stats: Total jobs, by status, success rate
- "Retry Failed" button
- "Cancel Job" button
- "View Details" modal → Show job config, errors
- Cool UX: Status badges, progress bars, real-time updates
**Files to Create**:
```bash
frontend/src/components/admin/jobs/JobsManager.tsx
frontend/src/components/admin/jobs/JobTable.tsx
frontend/src/components/admin/jobs/JobStats.tsx
frontend/src/components/admin/jobs/JobDetails.tsx
frontend/src/components/admin/jobs/JobActions.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/jobs
touch components/admin/jobs/JobsManager.tsx
touch components/admin/jobs/JobTable.tsx
touch components/admin/jobs/JobStats.tsx
touch components/admin/jobs/JobDetails.tsx
touch components/admin/jobs/JobActions.tsx
```
---
#### Task 2.4: Scheduler Integration
**What to Build**:
- Calendar view for scheduled posts
- Drag-drop to reschedule
- "Schedule Post" button on articles
- Stats: Posts scheduled, by date, by site
- Cool UX: Calendar with drag-drop, time picker, bulk scheduling
**Files to Create**:
```bash
frontend/src/components/admin/scheduler/SchedulerCalendar.tsx
frontend/src/components/admin/scheduler/ScheduleModal.tsx
frontend/src/components/admin/scheduler/ScheduleStats.tsx
frontend/src/components/admin/scheduler/BulkSchedule.tsx
frontend/src/pages/admin/scheduler/index.astro
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/scheduler
mkdir -p pages/admin/scheduler
touch components/admin/scheduler/SchedulerCalendar.tsx
touch components/admin/scheduler/ScheduleModal.tsx
touch components/admin/scheduler/ScheduleStats.tsx
touch components/admin/scheduler/BulkSchedule.tsx
touch pages/admin/scheduler/index.astro
```
---
### Milestone 2 - Complete Build Command:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
# Kanban Board
mkdir -p components/admin/factory
touch components/admin/factory/KanbanBoard.tsx
touch components/admin/factory/KanbanColumn.tsx
touch components/admin/factory/ArticleCard.tsx
touch components/admin/factory/CardActions.tsx
touch components/admin/factory/BulkActions.tsx
# Leads
mkdir -p components/admin/leads
mkdir -p pages/admin/leads
touch components/admin/leads/LeadManager.tsx
touch components/admin/leads/LeadForm.tsx
touch components/admin/leads/LeadTable.tsx
touch components/admin/leads/LeadStats.tsx
touch components/admin/leads/LeadExport.tsx
touch pages/admin/leads/index.astro
# Jobs
mkdir -p components/admin/jobs
touch components/admin/jobs/JobsManager.tsx
touch components/admin/jobs/JobTable.tsx
touch components/admin/jobs/JobStats.tsx
touch components/admin/jobs/JobDetails.tsx
touch components/admin/jobs/JobActions.tsx
# Scheduler
mkdir -p components/admin/scheduler
mkdir -p pages/admin/scheduler
touch components/admin/scheduler/SchedulerCalendar.tsx
touch components/admin/scheduler/ScheduleModal.tsx
touch components/admin/scheduler/ScheduleStats.tsx
touch components/admin/scheduler/BulkSchedule.tsx
touch pages/admin/scheduler/index.astro
echo "✅ Milestone 2 file structure created!"
```
---
## 🎯 MILESTONE 3: ALL COLLECTIONS - PAGES & CRUD
**Goal**: Every Directus collection has a working admin page
### Collections Needing Pages:
#### Task 3.1: Content Collections
**Collections**:
- Page Blocks
- Content Fragments
- Headline Inventory
- Offer Blocks (3 types)
**Files to Create**:
```bash
frontend/src/pages/admin/collections/page-blocks.astro
frontend/src/pages/admin/collections/content-fragments.astro
frontend/src/pages/admin/collections/headline-inventory.astro
frontend/src/pages/admin/collections/offer-blocks.astro
frontend/src/components/admin/collections/PageBlocksManager.tsx
frontend/src/components/admin/collections/FragmentsManager.tsx
frontend/src/components/admin/collections/HeadlinesManager.tsx
frontend/src/components/admin/collections/OffersManager.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch pages/admin/collections/page-blocks.astro
touch pages/admin/collections/content-fragments.astro
touch pages/admin/collections/headline-inventory.astro
touch pages/admin/collections/offer-blocks.astro
touch components/admin/collections/PageBlocksManager.tsx
touch components/admin/collections/FragmentsManager.tsx
touch components/admin/collections/HeadlinesManager.tsx
touch components/admin/collections/OffersManager.tsx
```
---
#### Task 3.2: Site & Content Management
**Collections**:
- Sites
- Posts
- Pages
- Generated Articles
**Files to Create**:
```bash
frontend/src/pages/admin/sites/index.astro
frontend/src/pages/admin/content/posts.astro
frontend/src/pages/admin/content/pages.astro
frontend/src/components/admin/sites/SitesManager.tsx
frontend/src/components/admin/content/PostsManager.tsx
frontend/src/components/admin/content/PagesManager.tsx
frontend/src/components/admin/content/ArticlesManager.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p pages/admin/sites
mkdir -p components/admin/sites
mkdir -p components/admin/content
touch pages/admin/sites/index.astro
touch pages/admin/content/posts.astro
touch pages/admin/content/pages.astro
touch components/admin/sites/SitesManager.tsx
touch components/admin/content/PostsManager.tsx
touch components/admin/content/PagesManager.tsx
touch components/admin/content/ArticlesManager.tsx
```
---
#### Task 3.3: Campaign & Work Log
**Collections**:
- Campaign Masters
- Work Log
**Files to Create**:
```bash
frontend/src/pages/admin/campaigns/index.astro
frontend/src/pages/admin/system/work-log.astro
frontend/src/components/admin/campaigns/CampaignManager.tsx
frontend/src/components/admin/system/WorkLogViewer.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p pages/admin/campaigns
mkdir -p pages/admin/system
mkdir -p components/admin/campaigns
mkdir -p components/admin/system
touch pages/admin/campaigns/index.astro
touch pages/admin/system/work-log.astro
touch components/admin/campaigns/CampaignManager.tsx
touch components/admin/system/WorkLogViewer.tsx
```
---
### Milestone 3 - Complete Build Command:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
# Content Collections
touch pages/admin/collections/page-blocks.astro
touch pages/admin/collections/content-fragments.astro
touch pages/admin/collections/headline-inventory.astro
touch pages/admin/collections/offer-blocks.astro
touch components/admin/collections/PageBlocksManager.tsx
touch components/admin/collections/FragmentsManager.tsx
touch components/admin/collections/HeadlinesManager.tsx
touch components/admin/collections/OffersManager.tsx
# Sites & Content
mkdir -p pages/admin/sites
mkdir -p components/admin/sites
mkdir -p components/admin/content
touch pages/admin/sites/index.astro
touch pages/admin/content/posts.astro
touch pages/admin/content/pages.astro
touch components/admin/sites/SitesManager.tsx
touch components/admin/content/PostsManager.tsx
touch components/admin/content/PagesManager.tsx
touch components/admin/content/ArticlesManager.tsx
# Campaigns & Logs
mkdir -p pages/admin/campaigns
mkdir -p pages/admin/system
mkdir -p components/admin/campaigns
mkdir -p components/admin/system
touch pages/admin/campaigns/index.astro
touch pages/admin/system/work-log.astro
touch components/admin/campaigns/CampaignManager.tsx
touch components/admin/system/WorkLogViewer.tsx
echo "✅ Milestone 3 file structure created!"
```
---
## 🚀 COMPLETE BUILD COMMAND (ALL MILESTONES)
```bash
#!/bin/bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
echo "🏗️ Building complete Spark Platform file structure..."
# Create all directories
mkdir -p components/admin/intelligence
mkdir -p components/admin/factory
mkdir -p components/admin/leads
mkdir -p components/admin/jobs
mkdir -p components/admin/scheduler
mkdir -p components/admin/collections
mkdir -p components/admin/sites
mkdir -p components/admin/content
mkdir -p components/admin/campaigns
mkdir -p components/admin/system
mkdir -p pages/admin/leads
mkdir -p pages/admin/scheduler
mkdir -p pages/admin/sites
mkdir -p pages/admin/campaigns
mkdir -p pages/admin/system
# MILESTONE 1: Intelligence Library
echo "📚 Creating Intelligence Library components..."
touch components/admin/intelligence/{AvatarIntelligenceManager,AvatarCard,AvatarEditModal,AvatarStats,GenerateVariantsModal}.tsx
touch components/admin/intelligence/{AvatarVariantsManager,VariantCard,VariantEditModal,VariantPreview}.tsx
touch components/admin/intelligence/{GeoIntelligenceManager,GeoMap,ClusterCard,LocationEditModal,GeoStats}.tsx
touch components/admin/intelligence/{SpintaxManager,SpintaxCategory,SpintaxEditModal,SpintaxPreview,SpintaxImport}.tsx
touch components/admin/intelligence/{CartesianManager,PatternCard,PatternEditModal,PatternBuilder,PatternPreview}.tsx
# MILESTONE 2: Factory & Forms
echo "🏭 Creating Factory components..."
touch components/admin/factory/{KanbanBoard,KanbanColumn,ArticleCard,CardActions,BulkActions}.tsx
touch components/admin/leads/{LeadManager,LeadForm,LeadTable,LeadStats,LeadExport}.tsx
touch pages/admin/leads/index.astro
touch components/admin/jobs/{JobsManager,JobTable,JobStats,JobDetails,JobActions}.tsx
touch components/admin/scheduler/{SchedulerCalendar,ScheduleModal,ScheduleStats,BulkSchedule}.tsx
touch pages/admin/scheduler/index.astro
# MILESTONE 3: All Collections
echo "📦 Creating Collection pages..."
touch pages/admin/collections/{page-blocks,content-fragments,headline-inventory,offer-blocks}.astro
touch components/admin/collections/{PageBlocksManager,FragmentsManager,HeadlinesManager,OffersManager}.tsx
touch pages/admin/sites/index.astro
touch pages/admin/content/{posts,pages}.astro
touch components/admin/sites/SitesManager.tsx
touch components/admin/content/{PostsManager,PagesManager,ArticlesManager}.tsx
touch pages/admin/campaigns/index.astro
touch pages/admin/system/work-log.astro
touch components/admin/campaigns/CampaignManager.tsx
touch components/admin/system/WorkLogViewer.tsx
echo "✅ Complete file structure created!"
echo "📊 Summary:"
echo " - Intelligence Library: 25 files"
echo " - Factory & Forms: 20 files"
echo " - Collections: 16 files"
echo " - Total: 61 new files"
echo ""
echo "🎯 Next: Start implementing Milestone 1 (Intelligence Library)"
```
---
## 📋 IMPLEMENTATION ORDER
### Priority 1 (This Week): Intelligence Library
1. Avatar Intelligence Manager
2. Avatar Variants Manager
3. Geo Intelligence Manager
4. Spintax Manager
5. Cartesian Manager
### Priority 2 (Next Week): Factory & Forms
1. Kanban Board
2. Lead Forms
3. Jobs Manager
4. Scheduler
### Priority 3 (Following Week): All Collections
1. Content Collections
2. Sites & Content
3. Campaigns & Logs
---
**Total Files to Create**: 61 files
**Estimated Time**: 3 weeks (3 milestones)
**Result**: Fully functional admin dashboard with all collections editable
🚀 **Ready to build!**