feat: Completed Milestone 2 Tasks 2.2 & 2.3 - Leads and Jobs Managers
- Implemented Leads CRM with full schema and management UI - Implemented Generation Jobs Queue with real-time polling and controls - Updated Directus schema for leads and jobs (status, config, priority) - Fixed API consistency for job statuses (queued/completed) - Updated frontend types to match strict schema
This commit is contained in:
cawcenter
@@ -259,7 +259,13 @@ touch components/admin/factory/BulkActions.tsx
|
||||
|
||||
---
|
||||
|
||||
#### Task 2.2: Lead Forms & Management
|
||||
#### Task 2.2: Lead Forms & Management ✅ (COMPLETED)
|
||||
**What Was Built**:
|
||||
- ✅ Leads Collection in Directus (Status, Source, Niche)
|
||||
- ✅ Leads Manager UI (Table, Add/Edit Modal)
|
||||
- ✅ Status Workflow (New -> Converted)
|
||||
- ✅ /admin/leads page
|
||||
|
||||
**What to Build**:
|
||||
- Lead capture forms
|
||||
- Editable leads table
|
||||
|
||||
@@ -17,13 +17,17 @@
|
||||
- **Spintax Manager**: Interactive dashboard + Live Preview + Schema Mapping ✅
|
||||
- **Cartesian Manager**: Formula Builder + Dynamic Live Data Preview ✅
|
||||
- **Kanban Board**: Drag & Drop Article Pipeline + Backend Schema Setup ✅
|
||||
- **File Structure**: 30+ components created and organized ✅
|
||||
- **Leads Manager**: CRM Table + Status Workflow + Backend Schema ✅
|
||||
- **Jobs Queue**: Real-time Monitoring + Action Controls + Config Viewer ✅
|
||||
- **File Structure**: 35+ components created and organized ✅
|
||||
|
||||
**Files Modified**:
|
||||
- `components/admin/intelligence/*` (Complete Suite)
|
||||
- `components/admin/factory/*` (Kanban)
|
||||
- `pages/admin/content/*`
|
||||
- `components/admin/factory/*` (Kanban + Jobs)
|
||||
- `components/admin/leads/*` (Leads)
|
||||
- `pages/admin/factory/*`
|
||||
- `pages/admin/leads/*`
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
132
backend/scripts/setup_leads_jobs.ts
Normal file
132
backend/scripts/setup_leads_jobs.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
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 setupLeadsAndJobs() {
|
||||
console.log(`🚀 Connecting to Directus at ${DIRECTUS_URL}...`);
|
||||
|
||||
try {
|
||||
await client.login(EMAIL!, PASSWORD!);
|
||||
console.log('✅ Authentication successful.');
|
||||
|
||||
// 1. Setup LEADS Collection
|
||||
console.log('\n--- Setting up Leads Collection ---');
|
||||
try {
|
||||
await client.request(createCollection({
|
||||
collection: 'leads',
|
||||
schema: {},
|
||||
meta: {
|
||||
icon: 'person_add',
|
||||
note: 'Incoming leads and prospects',
|
||||
display_template: '{{name}} - {{company}}'
|
||||
}
|
||||
}));
|
||||
console.log(' ✅ Collection created: leads');
|
||||
} catch (e: any) {
|
||||
if (e.errors?.[0]?.extensions?.code === 'RDB_ERROR_ALREADY_EXISTS' || e.errors?.[0]?.extensions?.code === 'RECORD_NOT_UNIQUE') {
|
||||
console.log(' ⏭️ Collection exists: leads');
|
||||
} else {
|
||||
console.log(' ❌ Error creating leads collection:', e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Leads Fields
|
||||
const leadFields = [
|
||||
{ field: 'name', type: 'string', note: 'Lead Name' },
|
||||
{ field: 'email', type: 'string', note: 'Email Address' },
|
||||
{ field: 'company', type: 'string', note: 'Company / Organization' },
|
||||
{ field: 'niche', type: 'string', note: 'Industry Niche' },
|
||||
{ field: 'notes', type: 'text', note: 'Notes' },
|
||||
{
|
||||
field: 'status',
|
||||
type: 'string',
|
||||
meta: {
|
||||
interface: 'select-dropdown',
|
||||
options: {
|
||||
choices: [
|
||||
{ text: 'New', value: 'new', color: '#3b82f6' },
|
||||
{ text: 'Contacted', value: 'contacted', color: '#eab308' },
|
||||
{ text: 'Qualified', value: 'qualified', color: '#a855f7' },
|
||||
{ text: 'Converted', value: 'converted', color: '#22c55e' },
|
||||
{ text: 'Rejected', value: 'rejected', color: '#ef4444' }
|
||||
]
|
||||
},
|
||||
display: 'labels',
|
||||
note: 'Lead Status'
|
||||
},
|
||||
schema: { default_value: 'new' }
|
||||
},
|
||||
{
|
||||
field: 'source',
|
||||
type: 'string',
|
||||
meta: {
|
||||
interface: 'select-dropdown',
|
||||
options: {
|
||||
choices: [
|
||||
{ text: 'Manual Entry', value: 'manual' },
|
||||
{ text: 'Web Form', value: 'web' },
|
||||
{ text: 'API', value: 'api' }
|
||||
]
|
||||
}
|
||||
},
|
||||
schema: { default_value: 'manual' }
|
||||
}
|
||||
];
|
||||
|
||||
for (const f of leadFields) {
|
||||
try {
|
||||
// @ts-ignore
|
||||
await client.request(createField('leads', f));
|
||||
console.log(` ✅ Field created: leads.${f.field}`);
|
||||
} catch (e: any) {
|
||||
// Ignore duplicate field errors
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Setup Generation Jobs Fields (if missing)
|
||||
console.log('\n--- Checking Generation Jobs ---');
|
||||
const jobFields = [
|
||||
{ field: 'progress', type: 'integer', note: 'Progress 0-100', schema: { default_value: 0 } },
|
||||
{
|
||||
field: 'priority',
|
||||
type: 'string',
|
||||
meta: {
|
||||
interface: 'select-dropdown',
|
||||
options: {
|
||||
choices: [
|
||||
{ text: 'High', value: 'high', color: '#ef4444' },
|
||||
{ text: 'Medium', value: 'medium', color: '#eab308' },
|
||||
{ text: 'Low', value: 'low', color: '#3b82f6' }
|
||||
]
|
||||
}
|
||||
},
|
||||
schema: { default_value: 'medium' }
|
||||
}
|
||||
];
|
||||
|
||||
for (const f of jobFields) {
|
||||
try {
|
||||
// @ts-ignore
|
||||
await client.request(createField('generation_jobs', f));
|
||||
console.log(` ✅ Field created: generation_jobs.${f.field}`);
|
||||
} catch (e: any) {
|
||||
// Ignore duplicate field errors
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n✅ Leads & Jobs Schema Setup Complete!');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
setupLeadsAndJobs();
|
||||
@@ -0,0 +1,202 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getDirectusClient, readItems, updateItem, deleteItem } from '@/lib/directus/client';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow
|
||||
} from '@/components/ui/table';
|
||||
import { RefreshCw, Trash2, StopCircle, Play, FileJson } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
const client = getDirectusClient();
|
||||
|
||||
interface Job {
|
||||
id: string;
|
||||
type: string;
|
||||
status: string;
|
||||
progress: number;
|
||||
priority: string;
|
||||
config: any;
|
||||
date_created: string;
|
||||
}
|
||||
|
||||
export default function JobsManager() {
|
||||
const queryClient = useQueryClient();
|
||||
const [viewerOpen, setViewerOpen] = useState(false);
|
||||
const [selectedJob, setSelectedJob] = useState<Job | null>(null);
|
||||
|
||||
// 1. Fetch with Polling
|
||||
const { data: jobs = [], isLoading, isRefetching } = useQuery({
|
||||
queryKey: ['generation_jobs'],
|
||||
queryFn: async () => {
|
||||
// @ts-ignore
|
||||
const res = await client.request(readItems('generation_jobs', { limit: 50, sort: ['-date_created'] }));
|
||||
return res as unknown as Job[];
|
||||
},
|
||||
refetchInterval: 5000 // Poll every 5 seconds
|
||||
});
|
||||
|
||||
// 2. Mutations
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: async ({ id, updates }: { id: string, updates: Partial<Job> }) => {
|
||||
// @ts-ignore
|
||||
await client.request(updateItem('generation_jobs', id, updates));
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['generation_jobs'] });
|
||||
toast.success('Job updated');
|
||||
}
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
// @ts-ignore
|
||||
await client.request(deleteItem('generation_jobs', id));
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['generation_jobs'] });
|
||||
toast.success('Job deleted');
|
||||
}
|
||||
});
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'queued': return 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20';
|
||||
case 'processing': return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20 animate-pulse';
|
||||
case 'completed': return 'bg-green-500/10 text-green-500 border-green-500/20';
|
||||
case 'failed': return 'bg-red-500/10 text-red-500 border-red-500/20';
|
||||
default: return 'bg-zinc-500/10 text-zinc-500';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between gap-4 bg-zinc-900/50 p-4 rounded-lg border border-zinc-800 backdrop-blur-sm">
|
||||
<div>
|
||||
<h3 className="text-white font-medium">Active Queue</h3>
|
||||
<p className="text-xs text-zinc-500">Auto-refreshing every 5s</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-zinc-800 text-zinc-400 hover:text-white"
|
||||
onClick={() => queryClient.invalidateQueries({ queryKey: ['generation_jobs'] })}
|
||||
disabled={isRefetching}
|
||||
>
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${isRefetching ? 'animate-spin' : ''}`} /> Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-900/50 overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader className="bg-zinc-950">
|
||||
<TableRow className="hover:bg-zinc-950 border-zinc-800">
|
||||
<TableHead className="text-zinc-400">Type</TableHead>
|
||||
<TableHead className="text-zinc-400 w-[150px]">Status</TableHead>
|
||||
<TableHead className="text-zinc-400 w-[200px]">Progress</TableHead>
|
||||
<TableHead className="text-zinc-400">Created</TableHead>
|
||||
<TableHead className="text-zinc-400 text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{jobs.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="h-24 text-center text-zinc-500">
|
||||
No active jobs.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
jobs.map((job) => (
|
||||
<TableRow key={job.id} className="border-zinc-800 hover:bg-zinc-900/50">
|
||||
<TableCell className="font-medium text-white font-mono text-xs uppercase tracking-wide">
|
||||
{job.type}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className={getStatusColor(job.status)}>
|
||||
{job.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress value={job.progress || 0} className="h-2 bg-zinc-800" />
|
||||
<span className="text-xs text-zinc-500 w-8 text-right">{job.progress}%</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-zinc-400 text-xs">
|
||||
{formatDistanceToNow(new Date(job.date_created), { addSuffix: true })}
|
||||
</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={() => { setSelectedJob(job); setViewerOpen(true); }} title="View Config">
|
||||
<FileJson className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
|
||||
{(job.status === 'failed' || job.status === 'completed') && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-blue-500 hover:text-blue-400"
|
||||
onClick={() => updateMutation.mutate({ id: job.id, updates: { status: 'queued', progress: 0 } })}
|
||||
title="Retry Job"
|
||||
>
|
||||
<Play className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{(job.status === 'processing' || job.status === 'queued') && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-yellow-600 hover:text-yellow-500"
|
||||
onClick={() => updateMutation.mutate({ id: job.id, updates: { status: 'failed' } })}
|
||||
title="Stop Job"
|
||||
>
|
||||
<StopCircle className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-zinc-600 hover:text-red-500"
|
||||
onClick={() => {
|
||||
if (confirm('Delete job log?')) deleteMutation.mutate(job.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Config Viewer */}
|
||||
<Dialog open={viewerOpen} onOpenChange={setViewerOpen}>
|
||||
<DialogContent className="bg-zinc-900 border-zinc-800 text-white sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Job Configuration</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<div className="p-4 bg-zinc-950 rounded border border-zinc-800 font-mono text-xs overflow-auto max-h-[400px]">
|
||||
<pre className="text-green-400">
|
||||
{JSON.stringify(selectedJob?.config, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
260
frontend/src/components/admin/leads/LeadsManager.tsx
Normal file
260
frontend/src/components/admin/leads/LeadsManager.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getDirectusClient, readItems, createItem, updateItem, deleteItem } from '@/lib/directus/client';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow
|
||||
} from '@/components/ui/table';
|
||||
import { Search, Plus, Trash2, Edit2, UserPlus, Mail, Building } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
const client = getDirectusClient();
|
||||
|
||||
interface Lead {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
company: string;
|
||||
niche: string;
|
||||
status: string;
|
||||
source: string;
|
||||
date_created: string;
|
||||
}
|
||||
|
||||
export default function LeadsManager() {
|
||||
const queryClient = useQueryClient();
|
||||
const [search, setSearch] = useState('');
|
||||
const [editorOpen, setEditorOpen] = useState(false);
|
||||
const [editingLead, setEditingLead] = useState<Partial<Lead>>({});
|
||||
|
||||
// 1. Fetch
|
||||
const { data: leads = [], isLoading } = useQuery({
|
||||
queryKey: ['leads'],
|
||||
queryFn: async () => {
|
||||
// @ts-ignore
|
||||
const res = await client.request(readItems('leads', { limit: -1, sort: ['-date_created'] }));
|
||||
return res as unknown as Lead[];
|
||||
}
|
||||
});
|
||||
|
||||
// 2. Mutations
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (newItem: Partial<Lead>) => {
|
||||
// @ts-ignore
|
||||
await client.request(createItem('leads', newItem));
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['leads'] });
|
||||
toast.success('Lead added');
|
||||
setEditorOpen(false);
|
||||
}
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: async (updates: Partial<Lead>) => {
|
||||
// @ts-ignore
|
||||
await client.request(updateItem('leads', updates.id!, updates));
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['leads'] });
|
||||
toast.success('Lead updated');
|
||||
setEditorOpen(false);
|
||||
}
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
// @ts-ignore
|
||||
await client.request(deleteItem('leads', id));
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['leads'] });
|
||||
toast.success('Lead deleted');
|
||||
}
|
||||
});
|
||||
|
||||
const handleSave = () => {
|
||||
if (!editingLead.name || !editingLead.email) {
|
||||
toast.error('Name and Email are required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (editingLead.id) {
|
||||
updateMutation.mutate(editingLead);
|
||||
} else {
|
||||
createMutation.mutate({ ...editingLead, status: editingLead.status || 'new', source: 'manual' });
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'new': return 'bg-blue-500/10 text-blue-500 border-blue-500/20';
|
||||
case 'contacted': return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20';
|
||||
case 'qualified': return 'bg-purple-500/10 text-purple-500 border-purple-500/20';
|
||||
case 'converted': return 'bg-green-500/10 text-green-500 border-green-500/20';
|
||||
case 'rejected': return 'bg-red-500/10 text-red-500 border-red-500/20';
|
||||
default: return 'bg-zinc-500/10 text-zinc-500';
|
||||
}
|
||||
};
|
||||
|
||||
const filtered = leads.filter(l =>
|
||||
l.name?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
l.company?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
l.email?.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-4 bg-zinc-900/50 p-4 rounded-lg border border-zinc-800 backdrop-blur-sm">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-zinc-500" />
|
||||
<Input
|
||||
placeholder="Search leads..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-9 bg-zinc-950 border-zinc-800"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="ml-auto bg-blue-600 hover:bg-blue-500"
|
||||
onClick={() => { setEditingLead({}); setEditorOpen(true); }}
|
||||
>
|
||||
<UserPlus className="mr-2 h-4 w-4" /> Add Lead
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-900/50 overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader className="bg-zinc-950">
|
||||
<TableRow className="hover:bg-zinc-950 border-zinc-800">
|
||||
<TableHead className="text-zinc-400">Name</TableHead>
|
||||
<TableHead className="text-zinc-400">Contact</TableHead>
|
||||
<TableHead className="text-zinc-400">Company</TableHead>
|
||||
<TableHead className="text-zinc-400">Status</TableHead>
|
||||
<TableHead className="text-zinc-400 text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="h-24 text-center text-zinc-500">
|
||||
No leads found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filtered.map((lead) => (
|
||||
<TableRow key={lead.id} className="border-zinc-800 hover:bg-zinc-900/50">
|
||||
<TableCell className="font-medium text-white">
|
||||
{lead.name}
|
||||
<div className="text-xs text-zinc-500">Added {formatDistanceToNow(new Date(lead.date_created), { addSuffix: true })}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center text-zinc-400">
|
||||
<Mail className="mr-2 h-3.5 w-3.5" />
|
||||
{lead.email}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center text-zinc-400">
|
||||
<Building className="mr-2 h-3.5 w-3.5" />
|
||||
{lead.company || '-'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className={getStatusColor(lead.status)}>
|
||||
{lead.status}
|
||||
</Badge>
|
||||
</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={() => { setEditingLead(lead); setEditorOpen(true); }}>
|
||||
<Edit2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-zinc-400 hover:text-red-500"
|
||||
onClick={() => {
|
||||
if (confirm('Delete lead?')) deleteMutation.mutate(lead.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Edit Modal */}
|
||||
<Dialog open={editorOpen} onOpenChange={setEditorOpen}>
|
||||
<DialogContent className="bg-zinc-900 border-zinc-800 text-white sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingLead.id ? 'Edit Lead' : 'New Lead'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase text-zinc-500 font-bold">Full Name</label>
|
||||
<Input
|
||||
value={editingLead.name || ''}
|
||||
onChange={e => setEditingLead({ ...editingLead, name: e.target.value })}
|
||||
className="bg-zinc-950 border-zinc-800"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase text-zinc-500 font-bold">Email Address</label>
|
||||
<Input
|
||||
value={editingLead.email || ''}
|
||||
onChange={e => setEditingLead({ ...editingLead, email: e.target.value })}
|
||||
className="bg-zinc-950 border-zinc-800"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase text-zinc-500 font-bold">Company</label>
|
||||
<Input
|
||||
value={editingLead.company || ''}
|
||||
onChange={e => setEditingLead({ ...editingLead, company: e.target.value })}
|
||||
className="bg-zinc-950 border-zinc-800"
|
||||
placeholder="Acme Inc"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase text-zinc-500 font-bold">Status</label>
|
||||
<select
|
||||
className="flex h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 text-white"
|
||||
value={editingLead.status || 'new'}
|
||||
onChange={e => setEditingLead({ ...editingLead, status: e.target.value })}
|
||||
>
|
||||
<option value="new">New</option>
|
||||
<option value="contacted">Contacted</option>
|
||||
<option value="qualified">Qualified</option>
|
||||
<option value="converted">Converted</option>
|
||||
<option value="rejected">Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={() => setEditorOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleSave} className="bg-blue-600 hover:bg-blue-500">Save Lead</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
frontend/src/pages/admin/factory/jobs.astro
Normal file
19
frontend/src/pages/admin/factory/jobs.astro
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
import Layout from '@/layouts/AdminLayout.astro';
|
||||
import JobsManager from '@/components/admin/jobs/JobsManager';
|
||||
---
|
||||
|
||||
<Layout title="Job Queue | 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">⚙️ Generation Queue</h1>
|
||||
<p class="text-zinc-400 mt-2 max-w-2xl">
|
||||
Monitor background processing jobs. Watch content generation progress in real-time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<JobsManager client:only="react" />
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -1,90 +1,19 @@
|
||||
---
|
||||
/**
|
||||
* Leads Management
|
||||
* Customer lead tracking and management
|
||||
*/
|
||||
import Layout from '@/layouts/AdminLayout.astro';
|
||||
import LeadList from '@/components/admin/leads/LeadList';
|
||||
import { getDirectusClient } from '@/lib/directus/client';
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
const client = getDirectusClient();
|
||||
|
||||
let stats = {
|
||||
total: 0,
|
||||
new: 0,
|
||||
contacted: 0,
|
||||
qualified: 0,
|
||||
};
|
||||
|
||||
try {
|
||||
const leads = await client.request(readItems('leads', {
|
||||
fields: ['status'],
|
||||
}));
|
||||
|
||||
stats.total = leads.length;
|
||||
stats.new = leads.filter((l: any) => l.status === 'new').length;
|
||||
stats.contacted = leads.filter((l: any) => l.status === 'contacted').length;
|
||||
stats.qualified = leads.filter((l: any) => l.status === 'qualified').length;
|
||||
} catch (e) {
|
||||
console.error('Error fetching lead stats:', e);
|
||||
}
|
||||
import LeadsManager from '@/components/admin/leads/LeadsManager';
|
||||
---
|
||||
|
||||
<Layout title="Leads & Inquiries">
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<Layout title="Leads Management | Spark Intelligence">
|
||||
<div class="p-8 space-y-6">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 class="spark-heading text-3xl">👤 Leads</h1>
|
||||
<p class="text-silver mt-1">Customer lead tracking and management</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="spark-btn-secondary text-sm" onclick="window.dispatchEvent(new CustomEvent('export-data', {detail: {collection: 'leads'}}))">
|
||||
📤 Export CSV
|
||||
</button>
|
||||
<a href="/admin/leads/new" class="spark-btn-primary text-sm">
|
||||
✨ Add Lead
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold text-white tracking-tight">👥 Leads & Prospects</h1>
|
||||
<p class="text-zinc-400 mt-2 max-w-2xl">
|
||||
Manage incoming leads and track their status from "New" to "Converted".
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="spark-card p-6">
|
||||
<div class="spark-label mb-2">Total Leads</div>
|
||||
<div class="spark-data text-3xl">{stats.total}</div>
|
||||
</div>
|
||||
<div class="spark-card p-6">
|
||||
<div class="spark-label mb-2">New</div>
|
||||
<div class="spark-data text-3xl text-yellow-400">{stats.new}</div>
|
||||
</div>
|
||||
<div class="spark-card p-6">
|
||||
<div class="spark-label mb-2">Contacted</div>
|
||||
<div class="spark-data text-3xl text-blue-400">{stats.contacted}</div>
|
||||
</div>
|
||||
<div class="spark-card p-6">
|
||||
<div class="spark-label mb-2">Qualified</div>
|
||||
<div class="spark-data text-3xl text-green-400">{stats.qualified}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leads List -->
|
||||
<div class="spark-card overflow-hidden">
|
||||
<LeadList client:load />
|
||||
</div>
|
||||
<LeadsManager client:only="react" />
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<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]}.csv`;
|
||||
a.click();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -53,7 +53,7 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
// @ts-ignore
|
||||
const job = await client.request(createItem('generation_jobs', {
|
||||
site_id: siteId,
|
||||
status: 'Pending',
|
||||
status: 'queued',
|
||||
// @ts-ignore
|
||||
type: options.mode || 'Refactor',
|
||||
target_quantity: 1,
|
||||
@@ -99,7 +99,7 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
// 5. Update job status
|
||||
// @ts-ignore
|
||||
await client.request(updateItem('generation_jobs', job.id, {
|
||||
status: 'Complete',
|
||||
status: 'completed',
|
||||
current_offset: 1
|
||||
}));
|
||||
|
||||
|
||||
@@ -156,13 +156,17 @@ export interface LocationCity {
|
||||
|
||||
// ... (Existing types preserved above)
|
||||
|
||||
// Cartesian Engine Types
|
||||
// Cartesian Engine Types
|
||||
export interface GenerationJob {
|
||||
id: string;
|
||||
site_id: string | Site;
|
||||
target_quantity: number;
|
||||
status: 'Pending' | 'Processing' | 'Complete' | 'Failed';
|
||||
filters: Record<string, any>; // { avatars: [], niches: [], cities: [], patterns: [] }
|
||||
status: 'queued' | 'processing' | 'completed' | 'failed' | 'Pending' | 'Complete'; // allowing legacy for safety
|
||||
type?: string;
|
||||
progress?: number;
|
||||
priority?: 'high' | 'medium' | 'low';
|
||||
config: Record<string, any>;
|
||||
current_offset: number;
|
||||
date_created?: string;
|
||||
}
|
||||
@@ -170,7 +174,7 @@ export interface GenerationJob {
|
||||
export interface ArticleTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
structure_json: string[]; // Array of block IDs
|
||||
structure_json: string[];
|
||||
}
|
||||
|
||||
export interface Avatar {
|
||||
@@ -202,16 +206,18 @@ export interface GeoLocation {
|
||||
export interface SpintaxDictionary {
|
||||
id: string;
|
||||
category: string;
|
||||
variations: string; // Stored as "{option1|option2}" string
|
||||
data: string[];
|
||||
base_word?: string;
|
||||
variations?: string; // legacy
|
||||
}
|
||||
|
||||
export interface CartesianPattern {
|
||||
id: string;
|
||||
pattern_name: string;
|
||||
pattern_structure: string;
|
||||
structure_type?: 'custom' | 'recipe';
|
||||
category?: string;
|
||||
formula?: string; // keeping for backward compat if needed
|
||||
pattern_key: string;
|
||||
pattern_type: string;
|
||||
formula: string;
|
||||
example_output?: string;
|
||||
description?: string;
|
||||
date_created?: string;
|
||||
}
|
||||
|
||||
@@ -238,16 +244,22 @@ export interface OfferBlockPersonalized {
|
||||
// Updated GeneratedArticle to match Init Schema
|
||||
export interface GeneratedArticle {
|
||||
id: string;
|
||||
site_id: number; // or string depending on schema
|
||||
site_id: number | string;
|
||||
title: string;
|
||||
slug: string;
|
||||
html_content: string;
|
||||
status: 'queued' | 'processing' | 'qc' | 'approved' | 'published' | 'draft' | 'archived';
|
||||
priority?: 'high' | 'medium' | 'low';
|
||||
assignee?: string;
|
||||
due_date?: string;
|
||||
seo_score?: number;
|
||||
generation_hash: string;
|
||||
meta_desc?: string;
|
||||
is_published?: boolean;
|
||||
sync_status?: string;
|
||||
schema_json?: Record<string, any>;
|
||||
date_created?: string;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user