260220:1504 20260220 TASK-BEFE-001 Refactor by ADR-014

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

@@ -11,8 +11,9 @@ 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 { useWorkflowDefinition, useCreateWorkflowDefinition, useUpdateWorkflowDefinition } from '@/hooks/use-workflows';
+import { Workflow } from '@/types/workflow';
+import { CreateWorkflowDefinitionDto } from '@/types/dto/workflow-engine/workflow-engine.dto';
 import { toast } from 'sonner';
 import { Save, ArrowLeft, Loader2 } from 'lucide-react';
 import Link from 'next/link';
@@ -22,8 +23,6 @@ export default function WorkflowEditPage() {
   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: '',
@@ -32,84 +31,77 @@ export default function WorkflowEditPage() {
     isActive: true,
   });
 
+  const { data: fetchedWorkflow, isLoading: loadingWorkflow } = useWorkflowDefinition(id as number);
+  const createMutation = useCreateWorkflowDefinition();
+  const updateMutation = useUpdateWorkflowDefinition();
+
   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();
+    if (fetchedWorkflow) {
+      setWorkflowData(fetchedWorkflow);
     }
-  }, [id, router]);
+  }, [fetchedWorkflow]);
+
+  const loading = (!!id && loadingWorkflow) || createMutation.isPending || updateMutation.isPending;
+  const saving = createMutation.isPending || updateMutation.isPending;
 
   const handleSave = async () => {
     if (!workflowData.workflowName) {
-        toast.error("Workflow name is required");
-        return;
+      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 || '',
-        };
+      const dto: CreateWorkflowDefinitionDto = {
+        workflow_code: workflowData.workflowType || 'CORRESPONDENCE',
+        dsl: {
+          workflowName: workflowData.workflowName,
+          description: workflowData.description,
+          dslDefinition: workflowData.dslDefinition,
+        },
+        is_active: workflowData.isActive,
+      };
 
-        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');
-        }
+      if (id) {
+        await updateMutation.mutateAsync({ id, data: dto });
+        toast.success('Workflow updated successfully');
+      } else {
+        await createMutation.mutateAsync(dto);
+        toast.success('Workflow created successfully');
+        router.push('/admin/workflows');
+      }
     } catch (error) {
-        toast.error("Failed to save workflow");
-        console.error(error);
-    } finally {
-        setSaving(false);
+      toast.error('Failed to save workflow');
+      console.error(error);
     }
   };
 
   if (loading) {
-      return (
-          <div className="flex items-center justify-center h-screen">
-              <Loader2 className="h-8 w-8 animate-spin" />
-          </div>
-      );
+    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>
+          <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>
+            <Button variant="outline">Cancel</Button>
           </Link>
           <Button onClick={handleSave} disabled={saving}>
             {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
@@ -121,84 +113,82 @@ export default function WorkflowEditPage() {
 
       <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>
+          <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="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>
+                <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>
+          <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="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>
+            <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>