289 lines
9.7 KiB
TypeScript
289 lines
9.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import {
|
|
Workflow,
|
|
Plus,
|
|
Settings,
|
|
Activity,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Edit,
|
|
PlayCircle,
|
|
PauseCircle,
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface TicketWorkflow {
|
|
id: number;
|
|
name: string;
|
|
description: string | null;
|
|
is_active: boolean;
|
|
trigger_event: string;
|
|
sort_order: number;
|
|
step_count?: number;
|
|
executions_today?: number;
|
|
}
|
|
|
|
export default function WorkflowListPage() {
|
|
const [globalEnabled, setGlobalEnabled] = useState(false);
|
|
const [workflows, setWorkflows] = useState<TicketWorkflow[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const loadData = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const [settingsRes, workflowsRes] = await Promise.all([
|
|
fetch('/api/workflow/settings'),
|
|
fetch('/api/ticket-workflows'),
|
|
]);
|
|
|
|
if (settingsRes.ok) {
|
|
const settings = await settingsRes.json();
|
|
setGlobalEnabled(settings.workflow_engine_enabled?.value ?? false);
|
|
}
|
|
|
|
if (workflowsRes.ok) {
|
|
const data = await workflowsRes.json();
|
|
setWorkflows(data.workflows || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load workflows:', error);
|
|
toast.error('Failed to load workflows');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const toggleGlobalEngine = async () => {
|
|
try {
|
|
const newValue = !globalEnabled;
|
|
const res = await fetch('/api/workflow/settings', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ workflow_engine_enabled: newValue }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
setGlobalEnabled(newValue);
|
|
toast.success(`Workflow engine ${newValue ? 'enabled' : 'disabled'}`);
|
|
} else {
|
|
toast.error('Failed to toggle engine');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to toggle engine:', error);
|
|
toast.error('Failed to toggle engine');
|
|
}
|
|
};
|
|
|
|
const toggleWorkflow = async (workflowId: number, currentState: boolean) => {
|
|
try {
|
|
const newState = !currentState;
|
|
const res = await fetch(`/api/ticket-workflows/${workflowId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ is_active: newState }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
setWorkflows(prev =>
|
|
prev.map(w => w.id === workflowId ? { ...w, is_active: newState } : w)
|
|
);
|
|
toast.success(`Workflow ${newState ? 'enabled' : 'disabled'}`);
|
|
} else {
|
|
toast.error('Failed to toggle workflow');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to toggle workflow:', error);
|
|
toast.error('Failed to toggle workflow');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto p-6 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Workflow className="w-6 h-6" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Ticket Workflows</h1>
|
|
<p className="text-sm text-muted-foreground">Automated ticket triage and classification</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Link href="/admin/workflow/create">
|
|
<Button>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Create Workflow
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Master Control */}
|
|
<Card className={globalEnabled ? 'border-green-500/50' : 'border-gray-300'}>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Settings className="w-5 h-5" />
|
|
Master Control
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Emergency kill switch for all ticket workflows
|
|
</CardDescription>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm font-medium">
|
|
{globalEnabled ? (
|
|
<span className="text-green-600 flex items-center gap-1">
|
|
<PlayCircle className="w-4 h-4" /> Enabled
|
|
</span>
|
|
) : (
|
|
<span className="text-gray-600 flex items-center gap-1">
|
|
<PauseCircle className="w-4 h-4" /> Disabled
|
|
</span>
|
|
)}
|
|
</span>
|
|
<Switch checked={globalEnabled} onCheckedChange={toggleGlobalEngine} />
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground">
|
|
{globalEnabled ? (
|
|
<>All active workflows will process incoming tickets. Individual workflows can be toggled below.</>
|
|
) : (
|
|
<>All workflows are currently disabled. Enable the master switch to allow workflows to run.</>
|
|
)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Workflow List */}
|
|
<div className="space-y-4">
|
|
{isLoading ? (
|
|
<Card>
|
|
<CardContent className="py-12 text-center text-muted-foreground">
|
|
Loading workflows...
|
|
</CardContent>
|
|
</Card>
|
|
) : workflows.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="py-12 text-center">
|
|
<Workflow className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
|
<p className="text-muted-foreground mb-4">No workflows yet</p>
|
|
<Link href="/admin/workflow/create">
|
|
<Button>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Create Your First Workflow
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
workflows.map((workflow) => (
|
|
<Card
|
|
key={workflow.id}
|
|
className={workflow.is_active ? 'border-blue-500/50' : 'border-gray-300'}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<CardTitle className="text-lg">{workflow.name}</CardTitle>
|
|
<Badge
|
|
variant={workflow.is_active ? 'default' : 'secondary'}
|
|
className="text-xs"
|
|
>
|
|
{workflow.is_active ? 'Active' : 'Inactive'}
|
|
</Badge>
|
|
<Badge variant="outline" className="text-xs">
|
|
{workflow.trigger_event}
|
|
</Badge>
|
|
</div>
|
|
<CardDescription className="text-sm">
|
|
{workflow.description || 'No description'}
|
|
</CardDescription>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 ml-4">
|
|
<Switch
|
|
checked={workflow.is_active}
|
|
onCheckedChange={() => toggleWorkflow(workflow.id, workflow.is_active)}
|
|
disabled={!globalEnabled}
|
|
/>
|
|
<Link href={`/admin/workflow/${workflow.id}`}>
|
|
<Button variant="outline" size="sm">
|
|
<Edit className="w-4 h-4 mr-2" />
|
|
Edit
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className="flex items-center gap-6 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-muted-foreground">
|
|
{workflow.step_count || 0} steps
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
|
<span className="text-muted-foreground">
|
|
{workflow.executions_today || 0} runs today
|
|
</span>
|
|
</div>
|
|
|
|
{!globalEnabled && (
|
|
<Badge variant="outline" className="text-xs text-orange-600">
|
|
Master switch disabled
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Related</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<Link href="/admin/workflow/classification-rules">
|
|
<Button variant="outline" className="w-full justify-start">
|
|
Classification Rules
|
|
</Button>
|
|
</Link>
|
|
<Link href="/admin/workflow/ai-templates">
|
|
<Button variant="outline" className="w-full justify-start">
|
|
AI Templates
|
|
</Button>
|
|
</Link>
|
|
<Link href="/admin/workflow/settings">
|
|
<Button variant="outline" className="w-full justify-start">
|
|
Workflow Settings
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|