260228:1427 20260228:14:00 workflow update

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

@@ -21,7 +21,7 @@ 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 id = params?.id === 'new' ? null : params?.id as string;
 
   const [workflowData, setWorkflowData] = useState<Partial<Workflow>>({
     workflowName: '',
@@ -31,7 +31,7 @@ export default function WorkflowEditPage() {
     isActive: true,
   });
 
-  const { data: fetchedWorkflow, isLoading: loadingWorkflow } = useWorkflowDefinition(id as number);
+  const { data: fetchedWorkflow, isLoading: loadingWorkflow } = useWorkflowDefinition(id as string);
   const createMutation = useCreateWorkflowDefinition();
   const updateMutation = useUpdateWorkflowDefinition();
 

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

@@ -1,35 +1,15 @@
 '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 { useWorkflowDefinitions } from '@/hooks/use-workflows';
 import { Workflow } from '@/types/workflow';
-import { workflowApi } from '@/lib/api/workflows';
-import { toast } from 'sonner';
 
 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) {
-        toast.error('Failed to load workflows');
-        console.error('[WorkflowsPage]', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchWorkflows();
-  }, []);
+  const { data: workflows = [], isLoading: loading } = useWorkflowDefinitions();
 
   return (
     <div className="p-6 space-y-6">
@@ -52,7 +32,7 @@ export default function WorkflowsPage() {
         </div>
       ) : (
         <div className="grid gap-4">
-          {workflows.map((workflow) => (
+          {workflows.map((workflow: Workflow) => (
             <Card key={workflow.workflowId} className="p-6">
               <div className="flex justify-between items-start">
                 <div className="flex-1">

frontend/lib/services/workflow-engine.service.ts

@@ -7,6 +7,23 @@ import {
   GetAvailableActionsDto,
 } from '@/types/dto/workflow-engine/workflow-engine.dto';
 
+import { Workflow } from '@/types/workflow';
+
+const mapWorkflow = (backendObj: any): Workflow => {
+  if (!backendObj) throw new Error('Workflow not found');
+  return {
+    workflowId: backendObj.id,
+    workflowName: backendObj.dsl?.workflowName || backendObj.workflow_code,
+    description: backendObj.description || backendObj.dsl?.description || '',
+    workflowType: backendObj.workflow_code,
+    version: backendObj.version || 1,
+    isActive: backendObj.is_active,
+    dslDefinition: typeof backendObj.dsl === 'string' ? backendObj.dsl : backendObj.dsl?.dslDefinition || JSON.stringify(backendObj.dsl, null, 2),
+    stepCount: backendObj.compiled?.states ? Object.keys(backendObj.compiled.states).length : 0,
+    updatedAt: backendObj.updated_at || new Date().toISOString(),
+  };
+};
+
 export const workflowEngineService = {
   // --- Engine Execution (Low-Level) ---
 
@@ -34,18 +51,20 @@ export const workflowEngineService = {
    * ดึง Workflow Definition ทั้งหมด
    * GET /workflow-engine/definitions
    */
-  getDefinitions: async () => {
+  getDefinitions: async (): Promise<Workflow[]> => {
     const response = await apiClient.get('/workflow-engine/definitions');
-    return response.data?.data || response.data;
+    const data = response.data?.data || response.data;
+    return Array.isArray(data) ? data.map(mapWorkflow) : data;
   },
 
   /**
    * ดึง Workflow Definition ตาม ID
    * GET /workflow-engine/definitions/:id
    */
-  getDefinitionById: async (id: string | number) => {
+  getDefinitionById: async (id: string | number): Promise<Workflow> => {
     const response = await apiClient.get(`/workflow-engine/definitions/${id}`);
-    return response.data?.data || response.data;
+    const data = response.data?.data || response.data;
+    return mapWorkflow(data);
   },
 
   /**

frontend/types/workflow.ts

@@ -11,7 +11,7 @@ export interface WorkflowStep {
 }
 
 export interface Workflow {
-  workflowId: number;
+  workflowId: string | number;
   workflowName: string;
   description: string;
   workflowType: WorkflowType;