"use client"; import { useState, useEffect, useCallback } from "react"; import { useSession } from "next-auth/react"; import { ProtectedLayout } from "@/components/protected-layout"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Badge } from "@/components/ui/badge"; import { Switch } from "@/components/ui/switch"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Textarea } from "@/components/ui/textarea"; import { useToast } from "@/hooks/use-toast"; import { Progress } from "@/components/ui/progress"; import { Zap, Plus, Play, Pause, Settings, Clock, MessageSquare, Mail, Bell, RefreshCw, CheckCircle, XCircle, AlertTriangle, Trash2, Edit, Calendar, Target, History, Users, DollarSign, Phone, FileText, TrendingUp, } from "lucide-react"; import { format } from "date-fns"; interface WorkflowTrigger { id: string; name: string; description?: string; triggerType: string; channel: string; conditions: string; messageTemplate: string; isActive: boolean; status: string; runTime?: string; lastRunAt?: string; executionCount: number; successCount: number; failureCount: number; createdAt: string; _count?: { executions: number; }; } interface WorkflowExecution { id: string; collectionFileId?: string; targetPhone?: string; channel: string; messageContent: string; status: string; errorMessage?: string; executedAt: string; } interface Agent { id: string; name: string; email: string; } interface AgentTarget { id: string; agentId: string; agent: Agent; month: number; year: number; targetAmount: number; targetFiles: number; targetCalls: number; targetSms: number; targetPaidFiles: number; currentAmount: number; currentFiles: number; currentCalls: number; currentSms: number; currentPaidFiles: number; notes?: string; createdBy?: { id: string; name: string }; createdAt: string; } const TRIGGER_TYPES = [ { value: "PTP_REMINDER", label: "Promise to Pay Reminder", icon: Calendar, description: "Send reminder before PTP date" }, { value: "OVERDUE_PAYMENT", label: "Overdue Payment", icon: AlertTriangle, description: "Alert when payment is overdue" }, { value: "NO_CONTACT", label: "No Contact", icon: Clock, description: "Follow up after no contact" }, { value: "WELCOME", label: "Welcome Message", icon: Bell, description: "Send welcome to new files" }, { value: "PAYMENT_RECEIVED", label: "Payment Thank You", icon: CheckCircle, description: "Thank customer after payment" }, ]; const CHANNELS = [ { value: "SMS", label: "SMS", icon: MessageSquare }, { value: "EMAIL", label: "Email", icon: Mail }, ]; const DEFAULT_TEMPLATES: Record = { PTP_REMINDER: "Dear {{customerName}}, this is a reminder of your payment commitment of KES {{promisedAmount}} due on {{promisedDate}}. Please ensure timely payment to avoid additional charges. - GRECO", OVERDUE_PAYMENT: "Dear {{customerName}}, your payment of KES {{amount}} is now overdue. Please make payment immediately to avoid further action. Contact us to discuss payment options. - GRECO", NO_CONTACT: "Dear {{customerName}}, we have been trying to reach you regarding your outstanding balance of KES {{amount}}. Please contact us urgently. - GRECO", WELCOME: "Dear {{customerName}}, your account has been assigned to GRECO for collection. Outstanding balance: KES {{amount}}. Please contact us to discuss payment arrangements. - GRECO", PAYMENT_RECEIVED: "Dear {{customerName}}, thank you for your payment. Your remaining balance is KES {{amount}}. We appreciate your cooperation. - GRECO", }; export default function WorkflowsPage() { const { data: session, status } = useSession() || {}; const { toast } = useToast(); const [workflows, setWorkflows] = useState([]); const [selectedWorkflow, setSelectedWorkflow] = useState(null); const [executions, setExecutions] = useState([]); const [isLoading, setIsLoading] = useState(true); const [isCreateOpen, setIsCreateOpen] = useState(false); const [isExecuting, setIsExecuting] = useState(false); const [activeTab, setActiveTab] = useState("workflows"); // Agent Targets State const [agents, setAgents] = useState([]); const [agentTargets, setAgentTargets] = useState([]); const [isTargetDialogOpen, setIsTargetDialogOpen] = useState(false); const [editingTarget, setEditingTarget] = useState(null); const [isRefreshing, setIsRefreshing] = useState(false); const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1); const [selectedYear, setSelectedYear] = useState(new Date().getFullYear()); const [targetFormData, setTargetFormData] = useState({ agentId: "", month: new Date().getMonth() + 1, year: new Date().getFullYear(), targetAmount: "", targetFiles: "", targetCalls: "", targetSms: "", targetPaidFiles: "", notes: "", }); // Form state const [formData, setFormData] = useState({ name: "", description: "", triggerType: "PTP_REMINDER", channel: "SMS", messageTemplate: DEFAULT_TEMPLATES.PTP_REMINDER, runTime: "09:00", daysBefore: "1", daysAfter: "1", daysNoContact: "7", hoursAfterCreation: "24", }); const fetchWorkflows = useCallback(async () => { try { const response = await fetch("/api/workflows"); if (response.ok) { const data = await response.json(); setWorkflows(data.workflows || []); } } catch (error) { console.error("Error fetching workflows:", error); } finally { setIsLoading(false); } }, []); const fetchWorkflowDetails = useCallback(async (id: string) => { try { const response = await fetch(`/api/workflows/${id}`); if (response.ok) { const data = await response.json(); setSelectedWorkflow(data); setExecutions(data.executions || []); } } catch (error) { console.error("Error fetching workflow details:", error); } }, []); const fetchAgents = useCallback(async () => { try { const response = await fetch("/api/users?role=AGENT"); if (response.ok) { const data = await response.json(); setAgents(data.users || []); } } catch (error) { console.error("Error fetching agents:", error); } }, []); const fetchAgentTargets = useCallback(async () => { try { const params = new URLSearchParams({ month: selectedMonth.toString(), year: selectedYear.toString(), }); const response = await fetch(`/api/agent-targets?${params}`); if (response.ok) { const data = await response.json(); setAgentTargets(data.targets || []); } } catch (error) { console.error("Error fetching agent targets:", error); } }, [selectedMonth, selectedYear]); const handleRefreshProgress = async () => { setIsRefreshing(true); try { const response = await fetch("/api/agent-targets/refresh", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ month: selectedMonth, year: selectedYear }), }); if (response.ok) { toast({ title: "Progress Updated", description: "Agent target progress has been refreshed.", }); fetchAgentTargets(); } } catch (error) { console.error("Error refreshing progress:", error); toast({ title: "Error", description: "Failed to refresh progress", variant: "destructive", }); } finally { setIsRefreshing(false); } }; const handleSaveTarget = async () => { try { const response = await fetch("/api/agent-targets", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(targetFormData), }); if (response.ok) { toast({ title: editingTarget ? "Target Updated" : "Target Created", description: `Agent target has been ${editingTarget ? "updated" : "created"} successfully.`, }); setIsTargetDialogOpen(false); setEditingTarget(null); resetTargetForm(); fetchAgentTargets(); } else { const error = await response.json(); throw new Error(error.error || "Failed to save target"); } } catch (error) { console.error("Error saving target:", error); toast({ title: "Error", description: error instanceof Error ? error.message : "Failed to save target", variant: "destructive", }); } }; const handleDeleteTarget = async (id: string) => { if (!confirm("Are you sure you want to delete this target?")) return; try { const response = await fetch(`/api/agent-targets?id=${id}`, { method: "DELETE", }); if (response.ok) { toast({ title: "Target Deleted", description: "Agent target has been deleted.", }); fetchAgentTargets(); } } catch (error) { console.error("Error deleting target:", error); } }; const handleEditTarget = (target: AgentTarget) => { setEditingTarget(target); setTargetFormData({ agentId: target.agentId, month: target.month, year: target.year, targetAmount: target.targetAmount.toString(), targetFiles: target.targetFiles.toString(), targetCalls: target.targetCalls.toString(), targetSms: target.targetSms.toString(), targetPaidFiles: target.targetPaidFiles.toString(), notes: target.notes || "", }); setIsTargetDialogOpen(true); }; const resetTargetForm = () => { setTargetFormData({ agentId: "", month: selectedMonth, year: selectedYear, targetAmount: "", targetFiles: "", targetCalls: "", targetSms: "", targetPaidFiles: "", notes: "", }); setEditingTarget(null); }; const getProgressPercent = (current: number, target: number) => { if (target === 0) return 0; return Math.min(Math.round((current / target) * 100), 100); }; const formatCurrency = (amount: number) => { return new Intl.NumberFormat("en-KE", { style: "currency", currency: "KES" }).format(amount); }; const MONTHS = [ { value: 1, label: "January" }, { value: 2, label: "February" }, { value: 3, label: "March" }, { value: 4, label: "April" }, { value: 5, label: "May" }, { value: 6, label: "June" }, { value: 7, label: "July" }, { value: 8, label: "August" }, { value: 9, label: "September" }, { value: 10, label: "October" }, { value: 11, label: "November" }, { value: 12, label: "December" }, ]; useEffect(() => { if (status === "authenticated") { fetchWorkflows(); fetchAgents(); } }, [status, fetchWorkflows, fetchAgents]); useEffect(() => { if (status === "authenticated") { fetchAgentTargets(); } }, [status, fetchAgentTargets, selectedMonth, selectedYear]); const handleCreateWorkflow = async () => { try { const conditions: Record = {}; switch (formData.triggerType) { case "PTP_REMINDER": conditions.daysBefore = parseInt(formData.daysBefore); break; case "OVERDUE_PAYMENT": conditions.daysOverdue = parseInt(formData.daysAfter); break; case "NO_CONTACT": conditions.daysNoContact = parseInt(formData.daysNoContact); break; case "WELCOME": conditions.hoursAfterCreation = parseInt(formData.hoursAfterCreation); break; } const response = await fetch("/api/workflows", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: formData.name, description: formData.description, triggerType: formData.triggerType, channel: formData.channel, messageTemplate: formData.messageTemplate, runTime: formData.runTime, conditions, }), }); if (response.ok) { toast({ title: "Workflow Created", description: "Your automation workflow has been created successfully.", }); setIsCreateOpen(false); fetchWorkflows(); // Reset form setFormData({ name: "", description: "", triggerType: "PTP_REMINDER", channel: "SMS", messageTemplate: DEFAULT_TEMPLATES.PTP_REMINDER, runTime: "09:00", daysBefore: "1", daysAfter: "1", daysNoContact: "7", hoursAfterCreation: "24", }); } else { const error = await response.json(); throw new Error(error.error || "Failed to create workflow"); } } catch (error) { console.error("Error creating workflow:", error); toast({ title: "Error", description: error instanceof Error ? error.message : "Failed to create workflow", variant: "destructive", }); } }; const handleToggleWorkflow = async (id: string, isActive: boolean) => { try { const response = await fetch(`/api/workflows/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ isActive }), }); if (response.ok) { setWorkflows((prev) => prev.map((w) => (w.id === id ? { ...w, isActive } : w)) ); toast({ title: isActive ? "Workflow Activated" : "Workflow Paused", description: `The workflow has been ${isActive ? "activated" : "paused"}.`, }); } } catch (error) { console.error("Error toggling workflow:", error); } }; const handleExecuteWorkflow = async (workflowId?: string) => { setIsExecuting(true); try { const response = await fetch("/api/workflows/execute", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ workflowId, manual: true }), }); if (response.ok) { const data = await response.json(); const totalSent = data.results?.reduce((sum: number, r: { sent: number }) => sum + r.sent, 0) || 0; const totalFailed = data.results?.reduce((sum: number, r: { failed: number }) => sum + r.failed, 0) || 0; toast({ title: "Workflow Executed", description: `Sent: ${totalSent}, Failed: ${totalFailed}`, }); fetchWorkflows(); if (selectedWorkflow) { fetchWorkflowDetails(selectedWorkflow.id); } } else { throw new Error("Execution failed"); } } catch (error) { console.error("Error executing workflow:", error); toast({ title: "Error", description: "Failed to execute workflow", variant: "destructive", }); } finally { setIsExecuting(false); } }; const handleDeleteWorkflow = async (id: string) => { if (!confirm("Are you sure you want to delete this workflow?")) return; try { const response = await fetch(`/api/workflows/${id}`, { method: "DELETE", }); if (response.ok) { toast({ title: "Workflow Deleted", description: "The workflow has been deleted.", }); setSelectedWorkflow(null); fetchWorkflows(); } } catch (error) { console.error("Error deleting workflow:", error); } }; const getTriggerTypeInfo = (type: string) => { return TRIGGER_TYPES.find((t) => t.value === type) || TRIGGER_TYPES[0]; }; const user = session?.user as { role?: string } | undefined; if (status === "loading" || isLoading) { return (
); } if (user?.role === "AGENT") { return (

You don't have permission to access this page.

 ); } return (

Workflow & Targets

Manage automation workflows and agent targets

Automation Workflows Agent Targets {/* Automation Workflows Tab */}
Create Automation Workflow Set up automated messages based on customer events
setFormData({ ...formData, name: e.target.value })} placeholder="e.g., PTP Reminder - 1 Day Before" />
{/* Conditional fields based on trigger type */} {formData.triggerType === "PTP_REMINDER" && (
setFormData({ ...formData, daysBefore: e.target.value })} min="1" max="7" />
)} {formData.triggerType === "OVERDUE_PAYMENT" && (
setFormData({ ...formData, daysAfter: e.target.value })} min="1" max="30" />
)} {formData.triggerType === "NO_CONTACT" && (
setFormData({ ...formData, daysNoContact: e.target.value })} min="1" max="30" />
)} {formData.triggerType === "WELCOME" && (
setFormData({ ...formData, hoursAfterCreation: e.target.value })} min="1" max="72" />
)}
setFormData({ ...formData, runTime: e.target.value })} />