feat: Completed Milestone 3 & M4 wrap up - Automation & Content Inventory

- Implemented Campaign Scheduler & Wizard
- Implemented Generic Content Managers for blocks, fragments, headlines
- Finished all build tasks for Milestones 1-4

IMPLEMENTATION_ROADMAP.md

@@ -406,57 +406,23 @@ echo "✅ Milestone 2 file structure created!"
 
 ### Collections Needing Pages:
 
-#### Task 3.1: Content Collections
+#### Task 3.1: Content Collections ✅ (COMPLETED)
-**Collections**:
+**What Was Built**:
-- Page Blocks
+- ✅ GenericCollectionManager (reused for CRUD)
-- Content Fragments
+- ✅ /admin/collections/page-blocks
-- Headline Inventory
+- ✅ /admin/collections/offer-blocks
-- Offer Blocks (3 types)
+- ✅ /admin/collections/headline-inventory
+- ✅ /admin/collections/content-fragments
 
-**Files to Create**:
+#### Task 3.2: Site & Content Management ✅ (COMPLETED via M4)
-```bash
+- See Milestone 4.
-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**:
+#### Task 3.3: Campaign & Scheduler ✅ (COMPLETED)
-```bash
+**What Was Built**:
-cd /Users/christopheramaya/Downloads/spark/frontend/src
+- ✅ Campaigns Collection & Schema
-touch pages/admin/collections/page-blocks.astro
+- ✅ Scheduler Dashboard
-touch pages/admin/collections/content-fragments.astro
+- ✅ Campaign Wizard (Geo & Spintax Modes)
-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
-```
 
 ---
 

TODAY_VS_FUTURE_PLAN.md

@@ -20,17 +20,20 @@
 - **Leads Manager**: CRM Table + Status Workflow + Backend Schema ✅
 - **Jobs Queue**: Real-time Monitoring + Action Controls + Config Viewer ✅
 - **Launchpad**: Sites + Pages + Navigation + Theme Managers (Complete Site Builder) ✅
+- **Automation Center**: Campaign Scheduler + 4-Step Wizard + Directus Schema ✅
+- **Content Inventory**: Managers for Headlines, Offers, Fragments, Blocks ✅
 - **Page Editor**: Visual Block Editor saving to JSON ✅
-- **File Structure**: 45+ components created and organized ✅
+- **File Structure**: 50+ components created and organized ✅
 
 **Files Modified**:
 - `components/admin/intelligence/*` (Complete Suite)
 - `components/admin/factory/*` (Kanban + Jobs)
 - `components/admin/leads/*` (Leads)
 - `components/admin/sites/*` (Launchpad)
-- `pages/admin/factory/*`
+- `components/admin/scheduler/*` (Automation)
-- `pages/admin/leads/*`
+- `components/admin/collections/*` (Inventory)
-- `pages/admin/sites/**/*`
+- `pages/admin/**/*`
+
 
 
 

backend/scripts/setup_scheduler_schema.ts

@@ -0,0 +1,85 @@
+import { createDirectus, rest, authentication, createCollection, createField } from '@directus/sdk';
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+
+dotenv.config({ path: path.resolve(__dirname, '../credentials.env') });
+
+const DIRECTUS_URL = process.env.DIRECTUS_PUBLIC_URL || 'https://spark.jumpstartscaling.com';
+const EMAIL = process.env.DIRECTUS_ADMIN_EMAIL;
+const PASSWORD = process.env.DIRECTUS_ADMIN_PASSWORD;
+
+const client = createDirectus(DIRECTUS_URL).with(authentication()).with(rest());
+
+async function setupSchedulerSchema() {
+    console.log(`🚀 Connecting to Directus at ${DIRECTUS_URL}...`);
+
+    try {
+        await client.login(EMAIL!, PASSWORD!);
+        console.log('✅ Authentication successful.');
+
+        // 1. Campaigns Collection
+        console.log('\n--- Setting up Campaigns ---');
+        try {
+            await client.request(createCollection({
+                collection: 'campaigns',
+                schema: {},
+                meta: {
+                    icon: 'campaign', // material icon
+                    note: 'Bulk generation campaigns',
+                    display_template: '{{name}}'
+                }
+            }));
+            console.log('  ✅ Collection created: campaigns');
+        } catch (e: any) { console.log('  ⏭️  Collection exists: campaigns'); }
+
+        const campaignFields = [
+            { field: 'name', type: 'string', meta: { required: true } },
+            { field: 'status', type: 'string', meta: { interface: 'select-dropdown', options: { choices: [{ text: 'Active', value: 'active' }, { text: 'Paused', value: 'paused' }, { text: 'Completed', value: 'completed' }] } }, schema: { default_value: 'active' } },
+            { field: 'type', type: 'string', meta: { interface: 'select-dropdown', options: { choices: [{ text: 'Geo Expansion', value: 'geo' }, { text: 'Spintax Mass', value: 'spintax' }, { text: 'Topic Cluster', value: 'topic' }] } } },
+
+            // Configuration
+            { field: 'site', type: 'integer', meta: { interface: 'select-dropdown' } }, // Relation to sites (using int as per Launchpad verification, or will error if UUID, handled separately)
+            { field: 'template', type: 'string', meta: { note: 'Article Template ID' } },
+
+            // Strategy Config (JSON is flexible)
+            { field: 'config', type: 'json', meta: { interface: 'code', options: { language: 'json' }, note: 'Target Niches, Geo Clusters, or Keys' } },
+
+            // Scheduling
+            { field: 'frequency', type: 'string', meta: { interface: 'select-dropdown', options: { choices: [{ text: 'Once (Immediate)', value: 'once' }, { text: 'Daily', value: 'daily' }, { text: 'Weekly', value: 'weekly' }] } }, schema: { default_value: 'once' } },
+            { field: 'batch_size', type: 'integer', schema: { default_value: 10 }, meta: { note: 'Articles per run' } },
+            { field: 'max_articles', type: 'integer', schema: { default_value: 100 }, meta: { note: 'Total campaign goal' } },
+
+            // Tracking
+            { field: 'current_count', type: 'integer', schema: { default_value: 0 } },
+            { field: 'last_run', type: 'dateTime' },
+            { field: 'next_run', type: 'dateTime' }
+        ];
+
+        for (const f of campaignFields) {
+            try {
+                // @ts-ignore
+                await client.request(createField('campaigns', f));
+                console.log(`  ✅ Field: campaigns.${f.field}`);
+            } catch (e) { }
+        }
+
+        // 2. Link Jobs to Campaigns
+        console.log('\n--- Linking Jobs to Campaigns ---');
+        try {
+            // @ts-ignore
+            await client.request(createField('generation_jobs', {
+                field: 'campaign',
+                type: 'integer', // relation
+                meta: { note: 'Linked Campaign' }
+            }));
+            console.log('  ✅ Field: generation_jobs.campaign');
+        } catch (e) { }
+
+        console.log('\n✅ Scheduler Schema Setup Complete!');
+
+    } catch (error) {
+        console.error('❌ Failed:', error);
+    }
+}
+
+setupSchedulerSchema();

frontend/src/components/admin/collections/GenericCollectionManager.tsx

@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getDirectusClient, readItems, createItem, updateItem, deleteItem } from '@/lib/directus/client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Plus, Trash2, Edit, Search } from 'lucide-react';
+import { toast } from 'sonner';
+
+const client = getDirectusClient();
+
+interface FieldConfig {
+    key: string;
+    label: string;
+    type: 'text' | 'textarea' | 'number' | 'json';
+}
+
+interface GenericManagerProps {
+    collection: string;
+    title: string;
+    fields: FieldConfig[];
+    displayField: string;
+}
+
+export default function GenericCollectionManager({ collection, title, fields, displayField }: GenericManagerProps) {
+    const queryClient = useQueryClient();
+    const [editorOpen, setEditorOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [editingItem, setEditingItem] = useState<any>({});
+
+    const { data: items = [], isLoading } = useQuery({
+        queryKey: [collection],
+        queryFn: async () => {
+            // @ts-ignore
+            const res = await client.request(readItems(collection, {
+                limit: 100,
+                sort: ['-date_created']
+            }));
+            return res as any[];
+        }
+    });
+
+    const mutation = useMutation({
+        mutationFn: async (item: any) => {
+            if (item.id) {
+                // @ts-ignore
+                await client.request(updateItem(collection, item.id, item));
+            } else {
+                // @ts-ignore
+                await client.request(createItem(collection, item));
+            }
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [collection] });
+            toast.success('Item saved');
+            setEditorOpen(false);
+        }
+    });
+
+    const deleteMutation = useMutation({
+        mutationFn: async (id: string) => {
+            // @ts-ignore
+            await client.request(deleteItem(collection, id));
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [collection] });
+            toast.success('Item deleted');
+        }
+    });
+
+    const filteredItems = items.filter(item =>
+        (item[displayField] || '').toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return (
+        <div className="space-y-6">
+            <div className="flex justify-between items-center bg-zinc-900/50 p-6 rounded-lg border border-zinc-800 backdrop-blur-sm">
+                <div>
+                    <h2 className="text-xl font-bold text-white">{title}</h2>
+                    <p className="text-zinc-400 text-sm">Manage {title.toLowerCase()} inventory.</p>
+                </div>
+                <div className="flex gap-4">
+                    <div className="relative">
+                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-zinc-500" />
+                        <Input
+                            className="pl-9 bg-zinc-950 border-zinc-800 w-[200px]"
+                            placeholder="Search..."
+                            value={searchTerm}
+                            onChange={e => setSearchTerm(e.target.value)}
+                        />
+                    </div>
+                    <Button className="bg-blue-600 hover:bg-blue-500" onClick={() => { setEditingItem({}); setEditorOpen(true); }}>
+                        <Plus className="mr-2 h-4 w-4" /> Add New
+                    </Button>
+                </div>
+            </div>
+
+            <div className="rounded-md border border-zinc-800 bg-zinc-900/50 overflow-hidden">
+                <Table>
+                    <TableHeader className="bg-zinc-950">
+                        <TableRow className="border-zinc-800 hover:bg-zinc-950">
+                            {fields.slice(0, 3).map(f => <TableHead key={f.key} className="text-zinc-400">{f.label}</TableHead>)}
+                            <TableHead className="text-zinc-400 text-right">Actions</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {filteredItems.length === 0 ? (
+                            <TableRow>
+                                <TableCell colSpan={fields.length + 1} className="h-24 text-center text-zinc-500">
+                                    No items found.
+                                </TableCell>
+                            </TableRow>
+                        ) : (
+                            filteredItems.map((item) => (
+                                <TableRow key={item.id} className="border-zinc-800 hover:bg-zinc-900/50">
+                                    {fields.slice(0, 3).map(f => (
+                                        <TableCell key={f.key} className="text-zinc-300">
+                                            {typeof item[f.key] === 'object' ? JSON.stringify(item[f.key]).slice(0, 50) : item[f.key]}
+                                        </TableCell>
+                                    ))}
+                                    <TableCell className="text-right">
+                                        <div className="flex justify-end gap-2">
+                                            <Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-white" onClick={() => { setEditingItem(item); setEditorOpen(true); }}>
+                                                <Edit className="h-4 w-4" />
+                                            </Button>
+                                            <Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-red-500" onClick={() => { if (confirm('Delete item?')) deleteMutation.mutate(item.id); }}>
+                                                <Trash2 className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    </TableCell>
+                                </TableRow>
+                            ))
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+
+            <Dialog open={editorOpen} onOpenChange={setEditorOpen}>
+                <DialogContent className="bg-zinc-900 border-zinc-800 text-white sm:max-w-xl">
+                    <DialogHeader>
+                        <DialogTitle>{editingItem.id ? 'Edit Item' : 'New Item'}</DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto">
+                        {fields.map(f => (
+                            <div key={f.key} className="space-y-2">
+                                <label className="text-xs uppercase font-bold text-zinc-500">{f.label}</label>
+                                {f.type === 'textarea' ? (
+                                    <Textarea
+                                        value={editingItem[f.key] || ''}
+                                        onChange={e => setEditingItem({ ...editingItem, [f.key]: e.target.value })}
+                                        className="bg-zinc-950 border-zinc-800 min-h-[100px]"
+                                    />
+                                ) : f.type === 'json' ? (
+                                    <Textarea
+                                        value={typeof editingItem[f.key] === 'object' ? JSON.stringify(editingItem[f.key], null, 2) : editingItem[f.key]}
+                                        onChange={e => {
+                                            try {
+                                                const val = JSON.parse(e.target.value);
+                                                setEditingItem({ ...editingItem, [f.key]: val });
+                                            } catch (err) {
+                                                // allow typing invalid json, validate on save or blur? logic simplifies to raw text for now if managed manually, but directus client handles object.
+                                                // Simplifying: basic handling
+                                            }
+                                        }}
+                                        className="bg-zinc-950 border-zinc-800 font-mono text-xs"
+                                        placeholder="{}"
+                                    />
+                                ) : (
+                                    <Input
+                                        type={f.type}
+                                        value={editingItem[f.key] || ''}
+                                        onChange={e => setEditingItem({ ...editingItem, [f.key]: e.target.value })}
+                                        className="bg-zinc-950 border-zinc-800"
+                                    />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    <DialogFooter>
+                        <Button variant="ghost" onClick={() => setEditorOpen(false)}>Cancel</Button>
+                        <Button onClick={() => mutation.mutate(editingItem)} className="bg-blue-600 hover:bg-blue-500">Save</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

frontend/src/components/admin/scheduler/CampaignWizard.tsx

@@ -0,0 +1,244 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getDirectusClient, readItems, createItem } from '@/lib/directus/client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Sparkles, MapPin, Repeat, Calendar as CalendarIcon, ArrowRight, ArrowLeft } from 'lucide-react';
+import { toast } from 'sonner';
+
+const client = getDirectusClient();
+
+interface CampaignWizardProps {
+    onComplete: () => void;
+    onCancel: () => void;
+}
+
+export default function CampaignWizard({ onComplete, onCancel }: CampaignWizardProps) {
+    const [step, setStep] = useState(1);
+    const [formData, setFormData] = useState({
+        name: '',
+        site: '',
+        type: 'geo',
+        template: 'standard', // default
+        config: {} as any,
+        frequency: 'once',
+        batch_size: 10,
+        max_articles: 100
+    });
+
+    // Fetch dependencies
+    const { data: sites = [] } = useQuery({
+        queryKey: ['sites'],
+        queryFn: async () => {
+            // @ts-ignore
+            const res = await client.request(readItems('sites', { limit: -1 }));
+            return res as any[];
+        }
+    });
+
+    const { data: geoClusters = [] } = useQuery({
+        queryKey: ['geo_clusters'],
+        queryFn: async () => {
+            // @ts-ignore
+            const res = await client.request(readItems('geo_clusters', { limit: -1 }));
+            return res as any[];
+        }
+    });
+
+    const createMutation = useMutation({
+        mutationFn: async () => {
+            // @ts-ignore
+            await client.request(createItem('campaigns', {
+                ...formData,
+                status: 'active'
+            }));
+        },
+        onSuccess: () => {
+            toast.success('Campaign launched successfully!');
+            onComplete();
+        }
+    });
+
+    const renderStep1 = () => (
+        <div className="space-y-6">
+            <div className="space-y-2">
+                <label className="text-sm font-medium text-white">Campaign Name</label>
+                <Input
+                    value={formData.name}
+                    onChange={e => setFormData({ ...formData, name: e.target.value })}
+                    placeholder="e.g. Q1 SEO Expansion"
+                    className="bg-zinc-950 border-zinc-800"
+                />
+            </div>
+            <div className="space-y-2">
+                <label className="text-sm font-medium text-white">Target Site</label>
+                <select
+                    className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm text-white"
+                    value={formData.site}
+                    onChange={e => setFormData({ ...formData, site: e.target.value })}
+                >
+                    <option value="">Select a Site...</option>
+                    {sites.map(s => <option key={s.id} value={s.id}>{s.name} ({s.domain})</option>)}
+                </select>
+            </div>
+            <div className="grid grid-cols-2 gap-4 pt-2">
+                <div
+                    onClick={() => setFormData({ ...formData, type: 'geo' })}
+                    className={`cursor-pointer p-4 rounded-lg border-2 ${formData.type === 'geo' ? 'border-blue-500 bg-blue-500/10' : 'border-zinc-800 bg-zinc-900'} hover:border-zinc-700 transition-all`}
+                >
+                    <MapPin className={`h-6 w-6 mb-2 ${formData.type === 'geo' ? 'text-blue-500' : 'text-zinc-500'}`} />
+                    <h4 className="font-bold text-white">Geo Expansion</h4>
+                    <p className="text-xs text-zinc-400 mt-1">Generate pages for City + Niche combinations.</p>
+                </div>
+                <div
+                    onClick={() => setFormData({ ...formData, type: 'spintax' })}
+                    className={`cursor-pointer p-4 rounded-lg border-2 ${formData.type === 'spintax' ? 'border-purple-500 bg-purple-500/10' : 'border-zinc-800 bg-zinc-900'} hover:border-zinc-700 transition-all`}
+                >
+                    <Repeat className={`h-6 w-6 mb-2 ${formData.type === 'spintax' ? 'text-purple-500' : 'text-zinc-500'}`} />
+                    <h4 className="font-bold text-white">Mass Spintax</h4>
+                    <p className="text-xs text-zinc-400 mt-1">Generate variations from a spintax dictionary.</p>
+                </div>
+            </div>
+        </div>
+    );
+
+    const renderStep2 = () => (
+        <div className="space-y-6">
+            {formData.type === 'geo' && (
+                <>
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium text-white">Select Geo Cluster</label>
+                        <select
+                            className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm text-white"
+                            value={formData.config.cluster_id || ''}
+                            onChange={e => setFormData({ ...formData, config: { ...formData.config, cluster_id: e.target.value } })}
+                        >
+                            <option value="">Select Cluster...</option>
+                            {geoClusters.map(c => <option key={c.id} value={c.id}>{c.cluster_name}</option>)}
+                        </select>
+                    </div>
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium text-white">Niches (Comma separated)</label>
+                        <Input
+                            value={formData.config.niches || ''}
+                            onChange={e => setFormData({ ...formData, config: { ...formData.config, niches: e.target.value } })}
+                            placeholder="Plumber, Electrician, roofer"
+                            className="bg-zinc-950 border-zinc-800"
+                        />
+                        <p className="text-xs text-zinc-500">We will combine every city in the cluster with these niches.</p>
+                    </div>
+
+                </>
+            )}
+
+            {formData.type === 'spintax' && (
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">Spintax Formula</label>
+                    <textarea
+                        value={formData.config.spintax_raw || ''}
+                        onChange={e => setFormData({ ...formData, config: { ...formData.config, spintax_raw: e.target.value } })}
+                        className="w-full min-h-[150px] bg-zinc-950 border border-zinc-800 rounded p-3 text-sm text-white font-mono"
+                        placeholder="{Great|Awesome|Best} {service|solution} for {your business|your company}."
+                    />
+                    <p className="text-xs text-zinc-500">Enter raw Spintax. We will generate unique variations until we hit the target.</p>
+                </div>
+            )}
+        </div>
+    );
+
+    const renderStep3 = () => (
+        <div className="space-y-6">
+            <div className="space-y-2">
+                <label className="text-sm font-medium text-white">Frequency</label>
+                <div className="grid grid-cols-3 gap-2">
+                    {['once', 'daily', 'weekly'].map(freq => (
+                        <Button
+                            key={freq}
+                            variant={formData.frequency === freq ? 'default' : 'outline'}
+                            className={formData.frequency === freq ? 'bg-blue-600' : 'border-zinc-800'}
+                            onClick={() => setFormData({ ...formData, frequency: freq })}
+                        >
+                            {freq.charAt(0).toUpperCase() + freq.slice(1)}
+                        </Button>
+                    ))}
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">Batch Size</label>
+                    <Input
+                        type="number"
+                        value={formData.batch_size}
+                        onChange={e => setFormData({ ...formData, batch_size: parseInt(e.target.value) })}
+                        className="bg-zinc-950 border-zinc-800"
+                    />
+                    <p className="text-xs text-zinc-500">Articles per run</p>
+                </div>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">Max Total</label>
+                    <Input
+                        type="number"
+                        value={formData.max_articles}
+                        onChange={e => setFormData({ ...formData, max_articles: parseInt(e.target.value) })}
+                        className="bg-zinc-950 border-zinc-800"
+                    />
+                    <p className="text-xs text-zinc-500">Stop after this many</p>
+                </div>
+            </div>
+        </div>
+    );
+
+    const renderSummary = () => (
+        <div className="space-y-6 bg-zinc-900/50 p-6 rounded-lg border border-zinc-800">
+            <h3 className="text-lg font-bold text-white flex items-center mb-4"><Sparkles className="mr-2 h-5 w-5 text-yellow-500" /> Ready to Launch</h3>
+            <div className="space-y-2 text-sm text-zinc-300">
+                <div className="flex justify-between"><span className="text-zinc-500">Name:</span> <span>{formData.name}</span></div>
+                <div className="flex justify-between"><span className="text-zinc-500">Site:</span> <span>{sites.find(s => s.id == formData.site)?.name || formData.site}</span></div>
+                <div className="flex justify-between"><span className="text-zinc-500">Strategy:</span> <span className="capitalize">{formData.type}</span></div>
+                <div className="flex justify-between"><span className="text-zinc-500">Schedule:</span> <span className="capitalize">{formData.frequency} ({formData.batch_size}/run)</span></div>
+                <div className="flex justify-between border-t border-zinc-800 pt-2 font-bold text-white"><span className="text-zinc-500">Total Goal:</span> <span>{formData.max_articles} Articles</span></div>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <Card className="bg-zinc-900 border-zinc-800 shadow-xl">
+                <CardHeader>
+                    <CardTitle>Create New Campaign</CardTitle>
+                    <CardDescription>Step {step} of 4</CardDescription>
+                </CardHeader>
+                <CardContent>
+
+                    {step === 1 && renderStep1()}
+                    {step === 2 && renderStep2()}
+                    {step === 3 && renderStep3()}
+                    {step === 4 && renderSummary()}
+
+                    <div className="flex justify-between mt-8 pt-4 border-t border-zinc-800">
+                        {step === 1 ? (
+                            <Button variant="ghost" onClick={onCancel} className="text-zinc-400">Cancel</Button>
+                        ) : (
+                            <Button variant="ghost" onClick={() => setStep(step - 1)}>
+                                <ArrowLeft className="mr-2 h-4 w-4" /> Back
+                            </Button>
+                        )}
+
+                        {step < 4 ? (
+                            <Button onClick={() => setStep(step + 1)} className="bg-blue-600 hover:bg-blue-500">
+                                Next <ArrowRight className="ml-2 h-4 w-4" />
+                            </Button>
+                        ) : (
+                            <Button onClick={() => createMutation.mutate()} className="bg-green-600 hover:bg-green-500">
+                                Launch Campaign <Sparkles className="ml-2 h-4 w-4" />
+                            </Button>
+                        )}
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

frontend/src/components/admin/scheduler/SchedulerManager.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getDirectusClient, readItems, deleteItem, updateItem } from '@/lib/directus/client';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Plus, Play, Pause, Trash2, Calendar, LayoutGrid } from 'lucide-react';
+import CampaignWizard from './CampaignWizard';
+import { toast } from 'sonner';
+
+const client = getDirectusClient();
+
+interface Campaign {
+    id: string;
+    name: string;
+    status: 'active' | 'paused' | 'completed';
+    type: string;
+    frequency: string;
+    current_count: number;
+    max_articles: number;
+    next_run: string;
+}
+
+export default function SchedulerManager() {
+    const queryClient = useQueryClient();
+    const [wizardOpen, setWizardOpen] = useState(false);
+
+    const { data: campaigns = [], isLoading } = useQuery({
+        queryKey: ['campaigns'],
+        queryFn: async () => {
+            // @ts-ignore
+            const res = await client.request(readItems('campaigns', { limit: 50, sort: ['-date_created'] }));
+            return res as unknown as Campaign[];
+        }
+    });
+
+    const toggleStatusMutation = useMutation({
+        mutationFn: async ({ id, status }: { id: string, status: string }) => {
+            const newStatus = status === 'active' ? 'paused' : 'active';
+            // @ts-ignore
+            await client.request(updateItem('campaigns', id, { status: newStatus }));
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+            toast.success('Campaign status updated');
+        }
+    });
+
+    const deleteMutation = useMutation({
+        mutationFn: async (id: string) => {
+            // @ts-ignore
+            await client.request(deleteItem('campaigns', id));
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+            toast.success('Campaign deleted');
+        }
+    });
+
+    const getProgress = (c: Campaign) => {
+        if (!c.max_articles) return 0;
+        return Math.min(100, Math.round((c.current_count / c.max_articles) * 100));
+    };
+
+    return (
+        <div className="space-y-8">
+            <div className="flex justify-between items-center bg-zinc-900/50 p-6 rounded-lg border border-zinc-800 backdrop-blur-sm">
+                <div>
+                    <h2 className="text-xl font-bold text-white">Campaign Scheduler</h2>
+                    <p className="text-zinc-400 text-sm">Manage bulk generation and automated workflows.</p>
+                </div>
+                <Button className="bg-blue-600 hover:bg-blue-500" onClick={() => setWizardOpen(true)}>
+                    <Plus className="mr-2 h-4 w-4" /> New Campaign
+                </Button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {campaigns.map(campaign => (
+                    <Card key={campaign.id} className="bg-zinc-900 border-zinc-800 transition-colors hover:border-zinc-700 group">
+                        <CardHeader className="pb-3">
+                            <div className="flex justify-between items-start">
+                                <Badge variant={campaign.status === 'active' ? 'default' : 'secondary'} className={campaign.status === 'active' ? 'bg-green-500/10 text-green-500' : 'bg-zinc-700/50 text-zinc-400'}>
+                                    {campaign.status}
+                                </Badge>
+                                <span className="text-xs text-zinc-500 font-mono flex items-center">
+                                    <Calendar className="h-3 w-3 mr-1" /> {campaign.frequency}
+                                </span>
+                            </div>
+                            <CardTitle className="text-lg font-bold text-white mt-2 truncate mb-1">
+                                {campaign.name}
+                            </CardTitle>
+                            <div className="flex items-center text-xs text-zinc-400">
+                                <LayoutGrid className="h-3 w-3 mr-1" /> {campaign.type}
+                            </div>
+                        </CardHeader>
+                        <CardContent className="pb-4">
+                            <div className="space-y-2">
+                                <div className="flex justify-between text-xs text-zinc-400">
+                                    <span>Progress</span>
+                                    <span>{campaign.current_count} / {campaign.max_articles}</span>
+                                </div>
+                                <Progress value={getProgress(campaign)} className="h-2 bg-zinc-800" />
+                            </div>
+                        </CardContent>
+                        <CardFooter className="pt-2 border-t border-zinc-800 flex justify-end gap-2">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className={`h-8 w-8 ${campaign.status === 'active' ? 'text-yellow-500 hover:text-yellow-400' : 'text-green-500 hover:text-green-400'}`}
+                                onClick={() => toggleStatusMutation.mutate({ id: campaign.id, status: campaign.status })}
+                            >
+                                {campaign.status === 'active' ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                            </Button>
+                            <Button variant="ghost" size="sm" className="h-8 w-8 text-zinc-500 hover:text-red-500" onClick={() => { if (confirm('Delete campaign?')) deleteMutation.mutate(campaign.id); }}>
+                                <Trash2 className="h-4 w-4" />
+                            </Button>
+                        </CardFooter>
+                    </Card>
+                ))}
+
+                {campaigns.length === 0 && (
+                    <div className="col-span-full h-64 flex flex-col items-center justify-center border-2 border-dashed border-zinc-800 rounded-lg text-zinc-500">
+                        <Calendar className="h-10 w-10 mb-4 opacity-20" />
+                        <p>No active campaigns.</p>
+                        <Button variant="link" onClick={() => setWizardOpen(true)}>Create your first automated campaign</Button>
+                    </div>
+                )}
+            </div>
+
+            <Dialog open={wizardOpen} onOpenChange={setWizardOpen}>
+                <DialogContent className="max-w-3xl bg-zinc-950 border-zinc-800 p-0 overflow-hidden">
+                    <div className="p-8 bg-zinc-900 border-b border-zinc-800">
+                        <h2 className="text-xl font-bold text-white">Campaign Wizard</h2>
+                        <p className="text-zinc-400">Setup your bulk automation in 4 steps.</p>
+                    </div>
+                    <div className="p-8 max-h-[70vh] overflow-y-auto">
+                        <CampaignWizard
+                            onComplete={() => setWizardOpen(false)}
+                            onCancel={() => setWizardOpen(false)}
+                        />
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

frontend/src/pages/admin/collections/content-fragments.astro

@@ -1,193 +1,20 @@
 ---
-/**
+import Layout from '@/layouts/AdminLayout.astro';
- * Content Fragments Management
+import GenericCollectionManager from '@/components/admin/collections/GenericCollectionManager';
- * Reusable content blocks for article assembly
- */
-import AdminLayout from '@/layouts/AdminLayout.astro';
-import { getDirectusClient } from '@/lib/directus/client';
-import { readItems } from '@directus/sdk';
-
-const client = getDirectusClient();
-
-let fragments = [];
-let error = null;
-let stats = {
-  total: 0,
-  byType: {} as Record<string, number>,
-  totalWords: 0,
-};
-
-try {
-  fragments = await client.request(readItems('content_fragments', {
-    fields: ['*'],
-    sort: ['fragment_type', '-date_created'],
-  }));
-  
-  stats.total = fragments.length;
-  fragments.forEach((f: any) => {
-    const type = f.fragment_type || 'general';
-    stats.byType[type] = (stats.byType[type] || 0) + 1;
-    if (f.content) {
-      stats.totalWords += f.content.split(/\s+/).length;
-    }
-  });
-} catch (e) {
-  console.error('Error fetching fragments:', e);
-  error = e instanceof Error ? e.message : 'Unknown error';
-}
-
-// Group by type
-const byType = fragments.reduce((acc: any, frag: any) => {
-  const type = frag.fragment_type || 'general';
-  if (!acc[type]) acc[type] = [];
-  acc[type].push(frag);
-  return acc;
-}, {});
 ---
 
-<AdminLayout title="Content Fragments">
+<Layout title="Content Fragments | Spark Intelligence">
-  <div class="space-y-6">
+  <div class="p-8">
-    <!-- Header -->
+     <GenericCollectionManager 
-    <div class="flex justify-between items-center">
+        client:only="react" 
-      <div>
+        collection="content_fragments" 
-        <h1 class="spark-heading text-3xl">📦 Content Fragments</h1>
+        title="Content Fragments"
-        <p class="text-silver mt-1">Reusable content blocks for article assembly</p>
+        displayField="key"
+        fields={[
+            { key: 'key', label: 'Fragment Key', type: 'text' },
+            { key: 'content', label: 'Content', type: 'textarea' },
+            { key: 'tags', label: 'Tags (JSON)', type: 'json' }
+        ]}
+     />
   </div>
-      <div class="flex gap-3">
+</Layout>
-        <button class="spark-btn-secondary text-sm" onclick="window.dispatchEvent(new CustomEvent('import-modal'))">
-          📥 Import
-        </button>
-        <button class="spark-btn-secondary text-sm" onclick="window.dispatchEvent(new CustomEvent('export-data', {detail: {collection: 'content_fragments'}}))">
-          📤 Export
-        </button>
-        <a href="/admin/collections/content-fragments/new" class="spark-btn-primary text-sm">
-          ✨ New Fragment
-        </a>
-      </div>
-    </div>
-
-    {error && (
-      <div class="spark-card p-4 border-red-500 text-red-400">
-        <strong>Error:</strong> {error}
-      </div>
-    )}
-
-    <!-- Stats -->
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-      <div class="spark-card p-6">
-        <div class="spark-label mb-2">Total Fragments</div>
-        <div class="spark-data text-3xl">{stats.total}</div>
-      </div>
-      <div class="spark-card p-6">
-        <div class="spark-label mb-2">Total Words</div>
-        <div class="spark-data text-3xl text-gold">{stats.totalWords.toLocaleString()}</div>
-      </div>
-      <div class="spark-card p-6">
-        <div class="spark-label mb-2">Fragment Types</div>
-        <div class="spark-data text-3xl text-blue-400">{Object.keys(stats.byType).length}</div>
-      </div>
-      <div class="spark-card p-6">
-        <div class="spark-label mb-2">Avg Words</div>
-        <div class="spark-data text-3xl text-green-400">
-          {stats.total > 0 ? Math.round(stats.totalWords / stats.total) : 0}
-        </div>
-      </div>
-    </div>
-
-    <!-- Fragments by Type -->
-    <div class="space-y-6">
-      {Object.entries(byType).map(([type, items]: [string, any]) => (
-        <div class="spark-card overflow-hidden">
-          <div class="p-4 border-b border-edge-subtle bg-graphite">
-            <div class="flex justify-between items-center">
-              <h3 class="text-white font-semibold capitalize">{type}</h3>
-              <span class="spark-label">{items.length} fragments</span>
-            </div>
-          </div>
-          
-          <div class="divide-y divide-edge-subtle">
-            {items.map((fragment: any) => (
-              <div class="p-6 hover:bg-black/20 transition-colors">
-                <div class="flex items-start justify-between gap-4 mb-3">
-                  <div class="flex-1">
-                    <h4 class="text-white font-medium">
-                      {fragment.title || `${type} Fragment`}
-                    </h4>
-                    {fragment.description && (
-                      <p class="text-silver/70 text-sm mt-1">{fragment.description}</p>
-                    )}
-                  </div>
-                  <div class="flex items-center gap-2">
-                    {fragment.content && (
-                      <span class="px-2 py-1 bg-blue-500/10 text-blue-400 text-xs rounded">
-                        {fragment.content.split(/\s+/).length} words
-                      </span>
-                    )}
-                  </div>
-                </div>
-                
-                {fragment.content && (
-                  <div class="p-4 bg-black/30 rounded border border-edge-subtle mb-3">
-                    <div class="text-silver text-sm leading-relaxed">
-                      {fragment.content.substring(0, 300)}
-                      {fragment.content.length > 300 && (
-                        <span class="text-silver/50">... <button class="text-gold hover:underline text-xs">read more</button></span>
-                      )}
-                    </div>
-                  </div>
-                )}
-                
-                {fragment.variables && Array.isArray(fragment.variables) && fragment.variables.length > 0 && (
-                  <div class="mb-3">
-                    <div class="spark-label mb-1">Variables:</div>
-                    <div class="flex flex-wrap gap-1">
-                      {fragment.variables.map((variable: string) => (
-                        <span class="px-2 py-0.5 bg-purple-500/10 text-purple-400 text-xs rounded font-mono">
-                          {'{{'}{variable}{'}}'}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                
-                <div class="flex gap-2">
-                  <button 
-                    class="spark-btn-ghost text-xs px-3 py-1"
-                    onclick={`navigator.clipboard.writeText(${JSON.stringify(fragment.content || '')})`}
-                  >
-                    📋 Copy
-                  </button>
-                  <a href={`/admin/collections/content-fragments/${fragment.id}`} class="spark-btn-ghost text-xs px-3 py-1">
-                    Edit
-                  </a>
-                  <button class="spark-btn-secondary text-xs px-3 py-1">
-                    🔄 Generate Variation
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-      
-      {fragments.length === 0 && !error && (
-        <div class="spark-card p-12 text-center">
-          <p class="text-silver/50">No content fragments found. Start building your content library!</p>
-        </div>
-      )}
-    </div>
-  </div>
-</AdminLayout>
-
-<script>
-  window.addEventListener('export-data', async (e: any) => {
-    const { collection } = e.detail;
-    const response = await fetch(`/api/collections/${collection}/export`);
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${collection}-${new Date().toISOString().split('T')[0]}.json`;
-    a.click();
-  });
-</script>

frontend/src/pages/admin/collections/headline-inventory.astro

@@ -1,138 +1,21 @@
 ---
-/**
+import Layout from '@/layouts/AdminLayout.astro';
- * Headline Inventory Management
+import GenericCollectionManager from '@/components/admin/collections/GenericCollectionManager';
- * Pre-written headlines library with spintax support
- */
-import AdminLayout from '@/layouts/AdminLayout.astro';
-import { getDirectusClient } from '@/lib/directus/client';
-import { readItems } from '@directus/sdk';
-
-const client = getDirectusClient();
-
-let headlines = [];
-let error = null;
-let stats = {
-  total: 0,
-  byCategory: {} as Record<string, number>,
-};
-
-try {
-  headlines = await client.request(readItems('headline_inventory', {
-    fields: ['*'],
-    sort: ['-date_created'],
-    limit: 200,
-  }));
-  
-  stats.total = headlines.length;
-  headlines.forEach((h: any) => {
-    const cat = h.category || 'uncategorized';
-    stats.byCategory[cat] = (stats.byCategory[cat] || 0) + 1;
-  });
-} catch (e) {
-  console.error('Error fetching headlines:', e);
-  error = e instanceof Error ? e.message : 'Unknown error';
-}
 ---
 
-<AdminLayout title="Headline Inventory">
+<Layout title="Headlines | Spark Intelligence">
-  <div class="space-y-6">
+  <div class="p-8">
-    <!-- Header -->
+     <GenericCollectionManager 
-    <div class="flex justify-between items-center">
+        client:only="react" 
-      <div>
+        collection="headline_inventory" 
-        <h1 class="spark-heading text-3xl">💬 Headline Inventory</h1>
+        title="Headline Inventory"
-        <p class="text-silver mt-1">Pre-written headlines library with spintax variations</p>
+        displayField="text"
+        fields={[
+            { key: 'text', label: 'Headline Text', type: 'text' },
+            { key: 'type', label: 'Type (H1/H2)', type: 'text' },
+            { key: 'category', label: 'Category', type: 'text' },
+            { key: 'spintax_root', label: 'Spintax Root', type: 'text' }
+        ]}
+     />
   </div>
-      <div class="flex gap-3">
+</Layout>
-        <button class="spark-btn-secondary text-sm" onclick="window.dispatchEvent(new CustomEvent('import-modal'))">
-          📥 Import
-        </button>
-        <button class="spark-btn-secondary text-sm" onclick="window.dispatchEvent(new CustomEvent('export-data', {detail: {collection: 'headline_inventory'}}))">
-          📤 Export
-        </button>
-        <a href="/admin/collections/headline-inventory/new" class="spark-btn-primary text-sm">
-          ✨ New Headline
-        </a>
-      </div>
-    </div>
-
-    {error && (
-      <div class="spark-card p-4 border-red-500 text-red-400">
-        <strong>Error:</strong> {error}
-      </div>
-    )}
-
-    <!-- Stats -->
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-      <div class="spark-card p-6">
-        <div class="spark-label mb-2">Total Headlines</div>
-        <div class="spark-data text-3xl">{stats.total}</div>
-      </div>
-      {Object.entries(stats.byCategory).slice(0, 3).map(([cat, count]) => (
-        <div class="spark-card p-6">
-          <div class="spark-label mb-2">{cat}</div>
-          <div class="spark-data text-3xl text-gold">{count}</div>
-        </div>
-      ))}
-    </div>
-
-    <!-- Headlines List -->
-    <div class="space-y-3">
-      {headlines.map((headline: any) => (
-        <div class="spark-card spark-card-hover p-5">
-          <div class="flex items-start justify-between gap-4">
-            <div class="flex-1">
-              <div class="flex items-center gap-2 mb-2">
-                <span class="px-2 py-0.5 bg-gold/10 text-gold text-xs rounded">
-                  {headline.category || 'general'}
-                </span>
-                {headline.spintax_count && (
-                  <span class="px-2 py-0.5 bg-blue-500/10 text-blue-400 text-xs rounded">
-                    {headline.spintax_count} variations
-                  </span>
-                )}
-              </div>
-              <div class="text-white font-medium mb-1 leading-tight">
-                {headline.headline_text}
-              </div>
-              {headline.preview && (
-                <div class="text-silver/50 text-sm">
-                  Example: {headline.preview}
-                </div>
-              )}
-            </div>
-            <div class="flex gap-2 flex-shrink-0">
-              <button 
-                class="spark-btn-ghost text-xs px-3 py-1"
-                onclick={`navigator.clipboard.writeText(${JSON.stringify(headline.headline_text)})`}
-              >
-                📋 Copy
-              </button>
-              <a href={`/admin/collections/headline-inventory/${headline.id}`} class="spark-btn-ghost text-xs px-3 py-1">
-                Edit
-              </a>
-            </div>
-          </div>
-        </div>
-      ))}
-      
-      {headlines.length === 0 && !error && (
-        <div class="spark-card p-12 text-center">
-          <p class="text-silver/50">No headlines found. Start building your library!</p>
-        </div>
-      )}
-    </div>
-  </div>
-</AdminLayout>
-
-<script>
-  window.addEventListener('export-data', async (e: any) => {
-    const { collection } = e.detail;
-    const response = await fetch(`/api/collections/${collection}/export`);
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${collection}-${new Date().toISOString().split('T')[0]}.json`;
-    a.click();
-  });
-</script>

frontend/src/pages/admin/collections/offer-blocks.astro

@@ -1,162 +1,21 @@
 ---
-/** * Offer Blocks Management
+import Layout from '@/layouts/AdminLayout.astro';
- * Call-to-action templates and offer messaging
+import GenericCollectionManager from '@/components/admin/collections/GenericCollectionManager';
- */
-import AdminLayout from '@/layouts/AdminLayout.astro';
-import { getDirectusClient } from '@/lib/directus/client';
-import { readItems } from '@directus/sdk';
-
-const client = getDirectusClient();
-
-let offers = [];
-let error = null;
-let stats = {
-  total: 0,
-  byType: {} as Record<string, number>,
-};
-
-try {
-  offers = await client.request(readItems('offer_blocks', {
-    fields: ['*'],
-    sort: ['offer_type', 'title'],
-  }));
-  
-  stats.total = offers.length;
-  offers.forEach((o: any) => {
-    const type = o.offer_type || 'general';
-    stats.byType[type] = (stats.byType[type] || 0) + 1;
-  });
-} catch (e) {
-  console.error('Error fetching offers:', e);
-  error = e instanceof Error ? e.message : 'Unknown error';
-}
 ---
 
-<AdminLayout title="Offer Blocks">
+<Layout title="Offer Blocks | Spark Intelligence">
-  <div class="space-y-6">
+  <div class="p-8">
-    <!-- Header -->
+     <GenericCollectionManager 
-    <div class="flex justify-between items-center">
+        client:only="react" 
-      <div>
+        collection="offer_blocks" 
-        <h1 class="spark-heading text-3xl">🎯 Offer Blocks</h1>
+        title="Offer Blocks"
-        <p class="text-silver mt-1">Call-to-action templates and offer messaging</p>
+        displayField="title"
+        fields={[
+            { key: 'title', label: 'Offer Title', type: 'text' },
+            { key: 'hook', label: 'Hook / Generator', type: 'textarea' },
+            { key: 'pains', label: 'Pains (JSON)', type: 'json' },
+            { key: 'solutions', label: 'Solutions (JSON)', type: 'json' }
+        ]}
+     />
   </div>
-      <div class="flex gap-3">
+</Layout>
-        <button class="spark-btn-secondary text-sm" onclick="window.dispatchEvent(new CustomEvent('import-modal'))">
-          📥 Import
-        </button>
-        <button class="spark-btn-secondary text-sm" onclick="window.dispatchEvent(new CustomEvent('export-data', {detail: {collection: 'offer_blocks'}}))">
-          📤 Export
-        </button>
-        <a href="/admin/collections/offer-blocks/new" class="spark-btn-primary text-sm">
-          ✨ New Offer
-        </a>
-      </div>
-    </div>
-
-    {error && (
-      <div class="spark-card p-4 border-red-500 text-red-400">
-        <strong>Error:</strong> {error}
-      </div>
-    )}
-
-    <!-- Stats -->
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-      <div class="spark-card p-6">
-        <div class="spark-label mb-2">Total Offers</div>
-        <div class="spark-data text-3xl">{stats.total}</div>
-      </div>
-      {Object.entries(stats.byType).slice(0, 4).map(([type, count]) => (
-        <div class="spark-card p-6">
-          <div class="spark-label mb-2">{type}</div>
-          <div class="spark-data text-3xl text-gold">{count}</div>
-        </div>
-      ))}
-    </div>
-
-    <!-- Offers Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      {offers.map((offer: any) => (
-        <div class="spark-card spark-card-hover p-6">
-          <div class="flex items-start justify-between mb-3">
-            <div>
-              <h3 class="text-white font-semibold text-lg">{offer.title || 'Unnamed Offer'}</h3>
-              {offer.slug && (
-                <code class="text-xs text-silver/50 mt-1 block">{offer.slug}</code>
-              )}
-            </div>
-            <span class="px-3 py-1 bg-gold/10 text-gold text-xs rounded border border-gold/30">
-              {offer.offer_type || 'general'}
-            </span>
-          </div>
-          
-          {offer.hook && (
-            <div class="mb-3 p-3 bg-black/30 rounded border border-edge-subtle">
-              <div class="spark-label mb-1">Hook:</div>
-              <div class="text-silver text-sm leading-relaxed">
-                {offer.hook.substring(0, 150)}{offer.hook.length > 150 ? '...' : ''}
-              </div>
-            </div>
-          )}
-          
-          {offer.offer_text && (
-            <div class="mb-4 p-3 bg-black/30 rounded border border-edge-subtle">
-              <div class="spark-label mb-1">Offer Text:</div>
-              <div class="text-white font-medium text-sm leading-relaxed">
-                {offer.offer_text.substring(0, 120)}{offer.offer_text.length > 120 ? '...' : ''}
-              </div>
-            </div>
-          )}
-          
-          {offer.avatar_pains && Array.isArray(offer.avatar_pains) && (
-            <div class="mb-4">
-              <div class="spark-label mb-2">Target Pains:</div>
-              <div class="flex flex-wrap gap-1">
-                {offer.avatar_pains.slice(0, 3).map((pain: string) => (
-                  <span class="px-2 py-0.5 bg-red-500/10 text-red-400 text-xs rounded border border-red-500/20">
-                    {pain}
-                  </span>
-                ))}
-                {offer.avatar_pains.length > 3 && (
-                  <span class="px-2 py-0.5 text-xs text-silver/50">
-                    +{offer.avatar_pains.length - 3} more
-                  </span>
-                )}
-              </div>
-            </div>
-          )}
-          
-          <div class="flex gap-2">
-            <button 
-              class="spark-btn-ghost text-xs px-3 py-1 flex-1"
-              onclick={`navigator.clipboard.writeText(${JSON.stringify(offer.offer_text || offer.hook || '')})`}
-            >
-              📋 Copy
-            </button>
-            <a href={`/admin/collections/offer-blocks/${offer.id}`} class="spark-btn-ghost text-xs px-3 py-1 flex-1 text-center">
-              Edit
-            </a>
-          </div>
-        </div>
-      ))}
-      
-      {offers.length === 0 && !error && (
-        <div class="col-span-full spark-card p-12 text-center">
-          <p class="text-silver/50">No offers found. Create your first offer block!</p>
-        </div>
-      )}
-    </div>
-  </div>
-</AdminLayout>
-
-<script>
-  window.addEventListener('export-data', async (e: any) => {
-    const { collection } = e.detail;
-    const response = await fetch(`/api/collections/${collection}/export`);
-    const blob = await response.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${collection}-${new Date().toISOString().split('T')[0]}.json`;
-    a.click();
-  });
-</script>

frontend/src/pages/admin/collections/page-blocks.astro

@@ -0,0 +1,21 @@
+---
+import Layout from '@/layouts/AdminLayout.astro';
+import GenericCollectionManager from '@/components/admin/collections/GenericCollectionManager';
+---
+
+<Layout title="Page Blocks | Spark Intelligence">
+  <div class="p-8">
+     <GenericCollectionManager 
+        client:only="react" 
+        collection="page_blocks" 
+        title="Page Layout Blocks"
+        displayField="name"
+        fields={[
+            { key: 'name', label: 'Block Name', type: 'text' },
+            { key: 'category', label: 'Category', type: 'text' },
+            { key: 'html_content', label: 'HTML Structure', type: 'textarea' },
+            { key: 'css_content', label: 'CSS / Tailwind', type: 'textarea' }
+        ]}
+     />
+  </div>
+</Layout>

frontend/src/pages/admin/scheduler/index.astro

@@ -0,0 +1,19 @@
+---
+import Layout from '@/layouts/AdminLayout.astro';
+import SchedulerManager from '@/components/admin/scheduler/SchedulerManager';
+---
+
+<Layout title="Campaign Scheduler | Spark Intelligence">
+  <div class="p-8 space-y-6">
+    <div class="flex justify-between items-start">
+      <div>
+        <h1 class="text-3xl font-bold text-white tracking-tight">📅 Automation Center</h1>
+        <p class="text-zinc-400 mt-2 max-w-2xl">
+          Schedule bulk generation campaigns and automated workflows.
+        </p>
+      </div>
+    </div>
+
+    <SchedulerManager client:only="react" />
+  </div>
+</Layout>