feat: Complete Intelligence Library full CRUD + Fix Jumpstart error
Intelligence Library: - Add full CRUD for Avatar Variants, Geo Intelligence, Spintax, Cartesian - Create reusable DataTable, CRUDModal, DeleteConfirm components - Add TanStack Table for advanced sorting/filtering/pagination - Add React Hook Form + Zod for validated forms - Add export, search, sort, filter capabilities Jumpstart Fix: - Fix 'Error: undefined' when creating generation jobs - Store config instead of full inventory (1456 posts) - Improve error logging - Engine fetches posts directly from WordPress All pages tested and ready for deployment.
This commit is contained in:
cawcenter
@@ -0,0 +1,354 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { getDirectusClient, readItems, createItem, updateItem, deleteItem } from '@/lib/directus/client';
|
||||
import { DataTable } from '../shared/DataTable';
|
||||
import { CRUDModal } from '../shared/CRUDModal';
|
||||
import { DeleteConfirm } from '../shared/DeleteConfirm';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
// Validation schema
|
||||
const cartesianSchema = z.object({
|
||||
pattern_key: z.string().min(1, 'Pattern key is required'),
|
||||
pattern_type: z.string().min(1, 'Pattern type is required'),
|
||||
formula: z.string().min(1, 'Formula is required'),
|
||||
example_output: z.string().optional(),
|
||||
description: z.string().optional(),
|
||||
});
|
||||
|
||||
type CartesianFormData = z.infer<typeof cartesianSchema>;
|
||||
|
||||
interface CartesianPattern {
|
||||
id: string;
|
||||
pattern_key: string;
|
||||
pattern_type: string;
|
||||
formula: string;
|
||||
example_output?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export default function CartesianManager() {
|
||||
const [patterns, setPatterns] = useState<CartesianPattern[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isDeleteOpen, setIsDeleteOpen] = useState(false);
|
||||
const [editingPattern, setEditingPattern] = useState<CartesianPattern | null>(null);
|
||||
const [deletingPattern, setDeletingPattern] = useState<CartesianPattern | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<CartesianFormData>({
|
||||
resolver: zodResolver(cartesianSchema),
|
||||
});
|
||||
|
||||
// Load data
|
||||
const loadPatterns = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const client = getDirectusClient();
|
||||
const data = await client.request(
|
||||
readItems('cartesian_patterns', {
|
||||
fields: ['*'],
|
||||
sort: ['pattern_type', 'pattern_key'],
|
||||
})
|
||||
);
|
||||
setPatterns(data as CartesianPattern[]);
|
||||
} catch (error) {
|
||||
console.error('Error loading cartesian patterns:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadPatterns();
|
||||
}, []);
|
||||
|
||||
// Handle create/edit
|
||||
const onSubmit = async (data: CartesianFormData) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const client = getDirectusClient();
|
||||
|
||||
if (editingPattern) {
|
||||
await client.request(
|
||||
updateItem('cartesian_patterns', editingPattern.id, data)
|
||||
);
|
||||
} else {
|
||||
await client.request(createItem('cartesian_patterns', data));
|
||||
}
|
||||
|
||||
await loadPatterns();
|
||||
setIsModalOpen(false);
|
||||
reset();
|
||||
setEditingPattern(null);
|
||||
} catch (error) {
|
||||
console.error('Error saving pattern:', error);
|
||||
alert('Failed to save pattern');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle delete
|
||||
const handleDelete = async () => {
|
||||
if (!deletingPattern) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const client = getDirectusClient();
|
||||
await client.request(deleteItem('cartesian_patterns', deletingPattern.id));
|
||||
await loadPatterns();
|
||||
setIsDeleteOpen(false);
|
||||
setDeletingPattern(null);
|
||||
} catch (error) {
|
||||
console.error('Error deleting pattern:', error);
|
||||
alert('Failed to delete pattern');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle edit click
|
||||
const handleEdit = (pattern: CartesianPattern) => {
|
||||
setEditingPattern(pattern);
|
||||
Object.keys(pattern).forEach((key) => {
|
||||
setValue(key as any, (pattern as any)[key]);
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// Handle add click
|
||||
const handleAdd = () => {
|
||||
setEditingPattern(null);
|
||||
reset();
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// Handle delete click
|
||||
const handleDeleteClick = (pattern: CartesianPattern) => {
|
||||
setDeletingPattern(pattern);
|
||||
setIsDeleteOpen(true);
|
||||
};
|
||||
|
||||
// Export data
|
||||
const handleExport = () => {
|
||||
const dataStr = JSON.stringify(patterns, null, 2);
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `cartesian-patterns-${new Date().toISOString().split('T')[0]}.json`;
|
||||
link.click();
|
||||
};
|
||||
|
||||
// Table columns
|
||||
const columns: ColumnDef<CartesianPattern>[] = [
|
||||
{
|
||||
accessorKey: 'pattern_key',
|
||||
header: 'Pattern Key',
|
||||
cell: ({ row }) => (
|
||||
<span className="font-medium text-white font-mono">{row.original.pattern_key}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'pattern_type',
|
||||
header: 'Type',
|
||||
cell: ({ row }) => (
|
||||
<Badge className="bg-purple-600">
|
||||
{row.original.pattern_type}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'formula',
|
||||
header: 'Formula',
|
||||
cell: ({ row }) => (
|
||||
<code className="text-xs text-green-400 bg-slate-900 px-2 py-1 rounded">
|
||||
{row.original.formula.length > 50
|
||||
? row.original.formula.substring(0, 50) + '...'
|
||||
: row.original.formula}
|
||||
</code>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'example_output',
|
||||
header: 'Example',
|
||||
cell: ({ row }) => (
|
||||
<span className="text-sm italic text-slate-400">
|
||||
{row.original.example_output
|
||||
? (row.original.example_output.length > 40
|
||||
? row.original.example_output.substring(0, 40) + '...'
|
||||
: row.original.example_output)
|
||||
: '—'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: 'Actions',
|
||||
cell: ({ row }) => (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(row.original)}
|
||||
className="text-blue-400 hover:text-blue-300 hover:bg-blue-500/10"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteClick(row.original)}
|
||||
className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const patternTypes = new Set(patterns.map(p => p.pattern_type));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-slate-800 border border-slate-700 rounded-lg p-6">
|
||||
<div className="text-sm text-slate-400 mb-2">Total Patterns</div>
|
||||
<div className="text-3xl font-bold text-white">{patterns.length}</div>
|
||||
</div>
|
||||
<div className="bg-slate-800 border border-slate-700 rounded-lg p-6">
|
||||
<div className="text-sm text-slate-400 mb-2">Pattern Types</div>
|
||||
<div className="text-3xl font-bold text-purple-400">{patternTypes.size}</div>
|
||||
</div>
|
||||
<div className="bg-slate-800 border border-slate-700 rounded-lg p-6">
|
||||
<div className="text-sm text-slate-400 mb-2">Avg Formula Length</div>
|
||||
<div className="text-3xl font-bold text-green-400">
|
||||
{patterns.length > 0
|
||||
? Math.round(patterns.reduce((sum, p) => sum + p.formula.length, 0) / patterns.length)
|
||||
: 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<DataTable
|
||||
data={patterns}
|
||||
columns={columns}
|
||||
onAdd={handleAdd}
|
||||
onExport={handleExport}
|
||||
searchPlaceholder="Search patterns..."
|
||||
addButtonText="Add Pattern"
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
{/* Create/Edit Modal */}
|
||||
<CRUDModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => {
|
||||
setIsModalOpen(false);
|
||||
setEditingPattern(null);
|
||||
reset();
|
||||
}}
|
||||
title={editingPattern ? 'Edit Cartesian Pattern' : 'Create Cartesian Pattern'}
|
||||
description="Define content generation patterns using Cartesian product logic"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
isSubmitting={isSubmitting}
|
||||
>
|
||||
<form className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="pattern_key">Pattern Key</Label>
|
||||
<Input
|
||||
id="pattern_key"
|
||||
{...register('pattern_key')}
|
||||
placeholder="e.g., headline_template_1"
|
||||
className="bg-slate-900 border-slate-700"
|
||||
/>
|
||||
{errors.pattern_key && (
|
||||
<p className="text-red-400 text-sm mt-1">{errors.pattern_key.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="pattern_type">Pattern Type</Label>
|
||||
<Input
|
||||
id="pattern_type"
|
||||
{...register('pattern_type')}
|
||||
placeholder="e.g., headline, intro, cta"
|
||||
className="bg-slate-900 border-slate-700"
|
||||
/>
|
||||
{errors.pattern_type && (
|
||||
<p className="text-red-400 text-sm mt-1">{errors.pattern_type.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="formula">Formula</Label>
|
||||
<Textarea
|
||||
id="formula"
|
||||
{...register('formula')}
|
||||
placeholder="e.g., {adjective} {noun} in {location}"
|
||||
className="bg-slate-900 border-slate-700 font-mono text-sm"
|
||||
rows={3}
|
||||
/>
|
||||
{errors.formula && (
|
||||
<p className="text-red-400 text-sm mt-1">{errors.formula.message}</p>
|
||||
)}
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
Use {'{'}curly braces{'}'} for variables that will be replaced
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="example_output">Example Output (Optional)</Label>
|
||||
<Textarea
|
||||
id="example_output"
|
||||
{...register('example_output')}
|
||||
placeholder="e.g., Amazing Services in Austin"
|
||||
className="bg-slate-900 border-slate-700"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">Description (Optional)</Label>
|
||||
<Input
|
||||
id="description"
|
||||
{...register('description')}
|
||||
placeholder="e.g., Main headline template for service pages"
|
||||
className="bg-slate-900 border-slate-700"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</CRUDModal>
|
||||
|
||||
{/* Delete Confirmation */}
|
||||
<DeleteConfirm
|
||||
isOpen={isDeleteOpen}
|
||||
onClose={() => {
|
||||
setIsDeleteOpen(false);
|
||||
setDeletingPattern(null);
|
||||
}}
|
||||
onConfirm={handleDelete}
|
||||
itemName={deletingPattern?.pattern_key}
|
||||
isDeleting={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user