260218:1712 20260218 TASK-BEFE-001n

frontend/app/(admin)/admin/doc-control/workflows/[id]/edit/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { DSLEditor } from '@/components/workflows/dsl-editor';
+import { VisualWorkflowBuilder } from '@/components/workflows/visual-builder';
+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 { Card } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { workflowApi } from '@/lib/api/workflows';
+import { Workflow, CreateWorkflowDto } from '@/types/workflow';
+import { toast } from 'sonner';
+import { Save, ArrowLeft, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+
+export default function WorkflowEditPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params?.id === 'new' ? null : Number(params?.id);
+
+  const [loading, setLoading] = useState(!!id);
+  const [saving, setSaving] = useState(false);
+  const [workflowData, setWorkflowData] = useState<Partial<Workflow>>({
+    workflowName: '',
+    description: '',
+    workflowType: 'CORRESPONDENCE',
+    dslDefinition: 'name: New Workflow\nversion: 1.0\nsteps: []',
+    isActive: true,
+  });
+
+  useEffect(() => {
+    if (id) {
+        const fetchWorkflow = async () => {
+            try {
+                const data = await workflowApi.getWorkflow(id);
+                if (data) {
+                    setWorkflowData(data);
+                } else {
+                    toast.error("Workflow not found");
+                    router.push('/admin/workflows');
+                }
+            } catch (error) {
+                toast.error("Failed to load workflow");
+                console.error(error);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchWorkflow();
+    }
+  }, [id, router]);
+
+  const handleSave = async () => {
+    if (!workflowData.workflowName) {
+        toast.error("Workflow name is required");
+        return;
+    }
+
+    setSaving(true);
+    try {
+        const dto: CreateWorkflowDto = {
+            workflowName: workflowData.workflowName || '',
+            description: workflowData.description || '',
+            workflowType: workflowData.workflowType || 'CORRESPONDENCE',
+            dslDefinition: workflowData.dslDefinition || '',
+        };
+
+        if (id) {
+            await workflowApi.updateWorkflow(id, dto);
+            toast.success("Workflow updated successfully");
+        } else {
+            await workflowApi.createWorkflow(dto);
+            toast.success("Workflow created successfully");
+            router.push('/admin/workflows');
+        }
+    } catch (error) {
+        toast.error("Failed to save workflow");
+        console.error(error);
+    } finally {
+        setSaving(false);
+    }
+  };
+
+  if (loading) {
+      return (
+          <div className="flex items-center justify-center h-screen">
+              <Loader2 className="h-8 w-8 animate-spin" />
+          </div>
+      );
+  }
+
+  return (
+    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-4">
+             <Link href="/admin/workflows">
+                <Button variant="ghost" size="icon">
+                    <ArrowLeft className="h-5 w-5" />
+                </Button>
+            </Link>
+            <div>
+                <h1 className="text-3xl font-bold">{id ? 'Edit Workflow' : 'New Workflow'}</h1>
+                <p className="text-muted-foreground">{id ? `Version ${workflowData.version}` : 'Create a new workflow definition'}</p>
+            </div>
+        </div>
+        <div className="flex gap-2">
+          <Link href="/admin/workflows">
+             <Button variant="outline">Cancel</Button>
+          </Link>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            <Save className="mr-2 h-4 w-4" />
+            {id ? 'Save Changes' : 'Create Workflow'}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-1 space-y-6">
+            <Card className="p-6">
+                <div className="grid gap-4">
+                <div>
+                    <Label htmlFor="name">Workflow Name *</Label>
+                    <Input
+                    id="name"
+                    value={workflowData.workflowName}
+                    onChange={(e) =>
+                        setWorkflowData({
+                        ...workflowData,
+                        workflowName: e.target.value,
+                        })
+                    }
+                    placeholder="e.g. Standard RFA Workflow"
+                    />
+                </div>
+
+                <div>
+                    <Label htmlFor="desc">Description</Label>
+                    <Textarea
+                    id="desc"
+                    value={workflowData.description}
+                    onChange={(e) =>
+                        setWorkflowData({
+                        ...workflowData,
+                        description: e.target.value,
+                        })
+                    }
+                    placeholder="Describe the purpose of this workflow"
+                    />
+                </div>
+
+                <div>
+                    <Label htmlFor="type">Workflow Type</Label>
+                    <Select
+                    value={workflowData.workflowType}
+                    onValueChange={(value: Workflow['workflowType']) =>
+                        setWorkflowData({ ...workflowData, workflowType: value })
+                    }
+                    >
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="CORRESPONDENCE">Correspondence</SelectItem>
+                        <SelectItem value="RFA">RFA</SelectItem>
+                        <SelectItem value="DRAWING">Drawing</SelectItem>
+                    </SelectContent>
+                    </Select>
+                </div>
+                </div>
+            </Card>
+        </div>
+
+        <div className="lg:col-span-2">
+             <Tabs defaultValue="dsl" className="w-full">
+                <TabsList className="w-full justify-start">
+                <TabsTrigger value="dsl">DSL Editor</TabsTrigger>
+                <TabsTrigger value="visual">Visual Builder</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="dsl" className="mt-4">
+                <DSLEditor
+                    initialValue={workflowData.dslDefinition}
+                    onChange={(value) =>
+                       setWorkflowData({ ...workflowData, dslDefinition: value })
+                    }
+                />
+                </TabsContent>
+
+                <TabsContent value="visual" className="mt-4 h-[600px]">
+                <VisualWorkflowBuilder
+                   dslString={workflowData.dslDefinition}
+                   onDslChange={(newDsl) => setWorkflowData({ ...workflowData, dslDefinition: newDsl })}
+                   onSave={() => toast.info("Visual state saving not implemented in this demo")}
+                />
+                </TabsContent>
+            </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/(admin)/admin/doc-control/workflows/new/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { DSLEditor } from "@/components/workflows/dsl-editor";
+import { VisualWorkflowBuilder } from "@/components/workflows/visual-builder";
+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 { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { workflowApi } from "@/lib/api/workflows";
+import { WorkflowType } from "@/types/workflow";
+import { useRouter } from "next/navigation";
+import { Loader2 } from "lucide-react";
+
+export default function NewWorkflowPage() {
+  const router = useRouter();
+  const [saving, setSaving] = useState(false);
+  const [workflowData, setWorkflowData] = useState({
+    workflowName: "",
+    description: "",
+    workflowType: "CORRESPONDENCE" as WorkflowType,
+    dslDefinition: 'name: New Workflow\nversion: 1.0\nsteps: []',
+  });
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await workflowApi.createWorkflow(workflowData);
+      router.push("/admin/workflows");
+    } catch (error) {
+      console.error("Failed to create workflow", error);
+      alert("Failed to create workflow");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">New Workflow</h1>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => router.back()}>Cancel</Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Create Workflow
+          </Button>
+        </div>
+      </div>
+
+      <Card className="p-6">
+        <div className="grid gap-4">
+          <div>
+            <Label htmlFor="workflow_name">Workflow Name *</Label>
+            <Input
+              id="workflow_name"
+              value={workflowData.workflowName}
+              onChange={(e) =>
+                setWorkflowData({
+                  ...workflowData,
+                  workflowName: e.target.value,
+                })
+              }
+              placeholder="e.g., Special RFA Approval"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={workflowData.description}
+              onChange={(e) =>
+                setWorkflowData({
+                  ...workflowData,
+                  description: e.target.value,
+                })
+              }
+              placeholder="Describe the purpose of this workflow"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="workflow_type">Workflow Type</Label>
+            <Select
+              value={workflowData.workflowType}
+              onValueChange={(value) =>
+                setWorkflowData({ ...workflowData, workflowType: value as WorkflowType })
+              }
+            >
+              <SelectTrigger id="workflow_type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="CORRESPONDENCE">Correspondence</SelectItem>
+                <SelectItem value="RFA">RFA</SelectItem>
+                <SelectItem value="DRAWING">Drawing</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </Card>
+
+      <Tabs defaultValue="dsl">
+        <TabsList>
+          <TabsTrigger value="dsl">DSL Editor</TabsTrigger>
+          <TabsTrigger value="visual">Visual Builder</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="dsl" className="mt-4">
+          <DSLEditor
+            initialValue={workflowData.dslDefinition}
+            onChange={(value) =>
+              setWorkflowData({ ...workflowData, dslDefinition: value })
+            }
+          />
+        </TabsContent>
+
+        <TabsContent value="visual" className="mt-4">
+          <VisualWorkflowBuilder />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

frontend/app/(admin)/admin/doc-control/workflows/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Edit, Copy, Trash, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { Workflow } from "@/types/workflow";
+import { workflowApi } from "@/lib/api/workflows";
+
+export default function WorkflowsPage() {
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchWorkflows = async () => {
+      setLoading(true);
+      try {
+        const data = await workflowApi.getWorkflows();
+        setWorkflows(data);
+      } catch (error) {
+        console.error("Failed to fetch workflows", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchWorkflows();
+  }, []);
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Workflow Configuration</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage workflow definitions and routing rules
+          </p>
+        </div>
+        <Link href="/admin/workflows/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            New Workflow
+          </Button>
+        </Link>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {workflows.map((workflow) => (
+            <Card key={workflow.workflowId} className="p-6">
+              <div className="flex justify-between items-start">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h3 className="text-lg font-semibold">
+                      {workflow.workflowName}
+                    </h3>
+                    <Badge variant={workflow.isActive ? "default" : "secondary"} className={workflow.isActive ? "bg-green-600 hover:bg-green-700" : ""}>
+                      {workflow.isActive ? "Active" : "Inactive"}
+                    </Badge>
+                    <Badge variant="outline">v{workflow.version}</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    {workflow.description}
+                  </p>
+                  <div className="flex gap-6 text-sm text-muted-foreground">
+                    <span>Type: {workflow.workflowType}</span>
+                    <span>Steps: {workflow.stepCount}</span>
+                    <span>
+                      Updated:{" "}
+                      {new Date(workflow.updatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex gap-2">
+                  <Link href={`/admin/workflows/${workflow.workflowId}/edit`}>
+                    <Button variant="outline" size="sm">
+                      <Edit className="mr-2 h-4 w-4" />
+                      Edit
+                    </Button>
+                  </Link>
+                  <Button variant="outline" size="sm" onClick={() => alert("Clone functionality mocked")}>
+                    <Copy className="mr-2 h-4 w-4" />
+                    Clone
+                  </Button>
+                  <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={() => alert("Delete functionality mocked")}>
+                    <Trash className="mr-2 h-4 w-4" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}