690414:1113 Update README.md /.agents/skills, /.windsurf/workflows

2026-04-14 11:13:42 +07:00
parent 02400fd88c
commit 6d45bdaeb5
194 changed files with 12708 additions and 8762 deletions
@@ -1,17 +1,31 @@
 'use client';

+import { useState } from 'react';
 import { useParams } from 'next/navigation';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { circulationService } from '@/lib/services/circulation.service';
-import { Circulation, UpdateCirculationRoutingDto } from '@/types/circulation';
+import { UpdateCirculationRoutingDto } from '@/types/circulation';
+import { useCirculation, circulationKeys } from '@/hooks/use-circulation';
+import { useWorkflowHistory } from '@/hooks/use-workflow-history';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { ArrowLeft, RefreshCw, CheckCircle2 } from 'lucide-react';
+import { ArrowLeft, RefreshCw, CheckCircle2, AlertCircle } from 'lucide-react';
 import Link from 'next/link';
-import { format } from 'date-fns';
+import { format, isPast, addDays, parseISO } from 'date-fns';
 import { toast } from 'sonner';
+import { IntegratedBanner } from '@/components/workflow/integrated-banner';
+import { WorkflowLifecycle } from '@/components/workflow/workflow-lifecycle';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+/**
+ * EC-CIRC-003: ตรวจสอบว่า deadline เลยกำหนดแล้วหรือไม่ (overdue = วันถัดไปหลัง deadline + 1 วัน)
+ */
+function isOverdue(deadlineDate?: string): boolean {
+  if (!deadlineDate) return false;
+  return isPast(addDays(parseISO(deadlineDate), 1));
+}

 /**
 * Get initials from name
@@ -44,23 +58,22 @@ export default function CirculationDetailPage() {
  const params = useParams();
  const queryClient = useQueryClient();
  const uuid = params.uuid as string;
+  const [pendingAttachmentIds, setPendingAttachmentIds] = useState<string[]>([]);
+
+  const { circulation, isLoading, error } = useCirculation(uuid);

  const {
-    data: circulation,
-    isLoading,
-    error,
-  } = useQuery<Circulation>({
-    queryKey: ['circulation', uuid],
-    queryFn: () => circulationService.getByUuid(uuid),
-    enabled: !!uuid,
-  });
+    data: workflowHistory,
+    isLoading: historyLoading,
+    error: historyError,
+  } = useWorkflowHistory(circulation?.workflowInstanceId);

  const completeMutation = useMutation({
    mutationFn: ({ routingId, data }: { routingId: number; data: UpdateCirculationRoutingDto }) =>
      circulationService.updateRouting(routingId, data),
    onSuccess: () => {
      toast.success('Task completed successfully');
-      queryClient.invalidateQueries({ queryKey: ['circulation', uuid] });
+      queryClient.invalidateQueries({ queryKey: circulationKeys.detail(uuid) });
    },
    onError: () => {
      toast.error('Failed to update task status');
@@ -99,23 +112,37 @@ export default function CirculationDetailPage() {
  }

  return (
-    <section className="space-y-6">
-      {/* Header */}
+    <section className="space-y-4">
+      {/* ADR-021: Integrated Banner — wired with live workflow data (v1.8.7) */}
+      <IntegratedBanner
+        docNo={circulation.circulationNo ?? ''}
+        subject={circulation.subject ?? ''}
+        status={circulation.statusCode ?? ''}
+        instanceId={circulation.workflowInstanceId}
+        workflowState={circulation.workflowState}
+        availableActions={circulation.availableActions}
+        pendingAttachmentIds={pendingAttachmentIds}
+        isLoading={isLoading}
+      />
+
+      {/* Navigation Header */}
      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <Link href="/circulation">
-            <Button variant="ghost" size="icon">
-              <ArrowLeft className="h-4 w-4" />
-            </Button>
-          </Link>
-          <div>
-            <h1 className="text-2xl font-bold">{circulation.circulationNo}</h1>
-            <p className="text-muted-foreground">{circulation.subject}</p>
-          </div>
-        </div>
-        <Badge variant={getStatusVariant(circulation.statusCode)}>{circulation.statusCode}</Badge>
+        <Link href="/circulation">
+          <Button variant="ghost" size="sm">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            กลับ
+          </Button>
+        </Link>
      </div>

+      {/* Tabs — Details / Workflow */}
+      <Tabs defaultValue="details">
+        <TabsList>
+          <TabsTrigger value="details">รายละเอียด</TabsTrigger>
+          <TabsTrigger value="workflow">Workflow</TabsTrigger>
+        </TabsList>
+        <TabsContent value="details" className="space-y-4">
+
      {/* Info Card */}
      <Card>
        <CardHeader>
@@ -150,6 +177,20 @@ export default function CirculationDetailPage() {
              </Link>
            </div>
          )}
+          {circulation.deadlineDate && (
+            <div>
+              <p className="text-sm text-muted-foreground">Deadline</p>
+              <p className="font-medium flex items-center gap-1">
+                {format(parseISO(circulation.deadlineDate), 'dd MMM yyyy')}
+                {isOverdue(circulation.deadlineDate) && (
+                  <Badge variant="destructive" className="text-xs ml-1">
+                    <AlertCircle className="h-3 w-3 mr-1" />
+                    Overdue
+                  </Badge>
+                )}
+              </p>
+            </div>
+          )}
        </CardContent>
      </Card>

@@ -203,6 +244,18 @@ export default function CirculationDetailPage() {
          )}
        </CardContent>
      </Card>
+        </TabsContent>
+        <TabsContent value="workflow">
+          {/* ADR-021: WorkflowLifecycle — wired with history data (v1.8.7) */}
+          <WorkflowLifecycle
+            history={workflowHistory}
+            currentState={circulation.workflowState}
+            isLoading={historyLoading}
+            error={historyError instanceof Error ? historyError : null}
+            onAttachmentsChange={setPendingAttachmentIds}
+          />
+        </TabsContent>
+      </Tabs>
    </section>
  );
 }
@@ -1,9 +1,17 @@
 'use client';

+import { useState } from 'react';
 import { CorrespondenceDetail } from '@/components/correspondences/detail';
-import { useCorrespondence } from '@/hooks/use-correspondence';
+import { IntegratedBanner } from '@/components/workflow/integrated-banner';
+import { WorkflowLifecycle } from '@/components/workflow/workflow-lifecycle';
+import { FilePreviewModal } from '@/components/common/file-preview-modal';
+import { WorkflowErrorBoundary } from '@/components/common/workflow-error-boundary';
+import { useCorrespondence, useWorkflowHistory } from '@/hooks/use-correspondence';
 import { Loader2 } from 'lucide-react';
 import { useParams, useSearchParams } from 'next/navigation';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { Correspondence } from '@/types/correspondence';
+import type { WorkflowAttachmentSummary } from '@/types/workflow';

 export default function CorrespondenceDetailPage() {
  const params = useParams();
@@ -11,7 +19,23 @@ export default function CorrespondenceDetailPage() {
  const uuid = (params?.uuid as string) ?? '';
  const selectedRevisionId = searchParams.get('revId') ?? undefined;

+  // Hooks ทั้งหมดต้องเรียกก่อน early return (Rules of Hooks)
  const { data: correspondence, isLoading, isError } = useCorrespondence(uuid);
+  const corrData = correspondence as Correspondence | undefined;
+
+  // ADR-021: ดึงประวัติ Workflow (disabled อัตโนมัติถ้าไม่มี workflowInstanceId)
+  const { data: wfHistory, isLoading: wfLoading, error: wfError } = useWorkflowHistory(
+    corrData?.workflowInstanceId
+  );
+
+  // ADR-021 US4: state สำหรับ FilePreviewModal
+  const [previewFile, setPreviewFile] = useState<WorkflowAttachmentSummary | null>(null);
+  // ADR-021 T029: publicIds ของไฟล์ที่อัปโหลดใน WorkflowLifecycle Upload Zone
+  const [pendingAttachmentIds, setPendingAttachmentIds] = useState<string[]>([]);
+  // ADR-021 T041: ติดตาม publicIds ที่ Storage แจ้ง 404
+  const [unavailableIds, setUnavailableIds] = useState<string[]>([]);
+  const handleUnavailable = (publicId: string) =>
+    setUnavailableIds((prev) => [...new Set([...prev, publicId])]);

  if (!uuid) {
    return (
@@ -38,5 +62,58 @@ export default function CorrespondenceDetailPage() {
    );
  }

-  return <CorrespondenceDetail data={correspondence} selectedRevisionId={selectedRevisionId} />;
+  // ดึง Current Revision สำหรับแสดงใน Banner
+  const currentRevision = corrData!.revisions?.find((r) => r.isCurrent) ?? corrData!.revisions?.[0];
+  const docNo = corrData!.correspondenceNumber ?? '';
+  const subject = currentRevision?.subject ?? '';
+  const status = currentRevision?.status?.statusCode ?? '';
+
+  return (
+    <div className="space-y-4">
+      {/* ADR-021: Integrated Banner — เลขเอกสาร + สถานะ + ปุ่ม Action */}
+      <IntegratedBanner
+        docNo={docNo}
+        subject={subject}
+        status={status}
+        priority={correspondence.priority}
+        workflowState={correspondence.workflowState}
+        availableActions={correspondence.availableActions}
+        instanceId={corrData!.workflowInstanceId}
+        pendingAttachmentIds={pendingAttachmentIds}
+      />
+
+      {/* Tabs — Details / Workflow (WorkflowLifecycle ถูกเพิ่มใน T020) */}
+      <Tabs defaultValue="details">
+        <TabsList>
+          <TabsTrigger value="details">รายละเอียด</TabsTrigger>
+          <TabsTrigger value="workflow">Workflow</TabsTrigger>
+        </TabsList>
+        <TabsContent value="details">
+          <CorrespondenceDetail data={correspondence} selectedRevisionId={selectedRevisionId} />
+        </TabsContent>
+        <TabsContent value="workflow">
+          <WorkflowErrorBoundary>
+            <WorkflowLifecycle
+              history={wfHistory}
+              currentState={corrData?.workflowState}
+              isLoading={wfLoading}
+              error={wfError instanceof Error ? wfError : null}
+              onFileClick={setPreviewFile}
+              onAttachmentsChange={setPendingAttachmentIds}
+              unavailableAttachmentIds={unavailableIds}
+            />
+          </WorkflowErrorBoundary>
+        </TabsContent>
+      </Tabs>
+
+      {/* ADR-021 US4: File Preview Modal */}
+      <WorkflowErrorBoundary fallback={null}>
+        <FilePreviewModal
+          attachment={previewFile}
+          onClose={() => setPreviewFile(null)}
+          onUnavailable={handleUnavailable}
+        />
+      </WorkflowErrorBoundary>
+    </div>
+  );
 }
@@ -1,17 +1,42 @@
 'use client';

+import { useState } from 'react';
 import { RFADetail } from '@/components/rfas/detail';
+import { IntegratedBanner } from '@/components/workflow/integrated-banner';
+import { WorkflowLifecycle } from '@/components/workflow/workflow-lifecycle';
+import { FilePreviewModal } from '@/components/common/file-preview-modal';
+import { WorkflowErrorBoundary } from '@/components/common/workflow-error-boundary';
 import { notFound, useParams } from 'next/navigation';
-import { useRFA } from '@/hooks/use-rfa';
+import { useRFA, useWorkflowHistory } from '@/hooks/use-rfa';
 import { Loader2 } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { RFA } from '@/types/rfa';
+import type { WorkflowAttachmentSummary } from '@/types/workflow';

 export default function RFADetailPage() {
  const { uuid } = useParams();
+  const uuidStr = uuid ? String(uuid) : '';
+
+  // Hooks ทั้งหมดต้องเรียกก่อน early return (Rules of Hooks)
+  const { data: rfa, isLoading, isError } = useRFA(uuidStr);
+  const rfaData = rfa as RFA | undefined;
+
+  // ADR-021: ดึงประวัติ Workflow (disabled อัตโนมัติถ้าไม่มี workflowInstanceId)
+  const { data: wfHistory, isLoading: wfLoading, error: wfError } = useWorkflowHistory(
+    rfaData?.workflowInstanceId
+  );
+
+  // ADR-021 US4: state สำหรับ FilePreviewModal
+  const [previewFile, setPreviewFile] = useState<WorkflowAttachmentSummary | null>(null);
+  // ADR-021 T029: publicIds ของไฟล์ที่อัปโหลดใน WorkflowLifecycle Upload Zone
+  const [pendingAttachmentIds, setPendingAttachmentIds] = useState<string[]>([]);
+  // ADR-021 T041: ติดตาม publicIds ที่ Storage แจ้ง  404
+  const [unavailableIds, setUnavailableIds] = useState<string[]>([]);
+  const handleUnavailable = (publicId: string) =>
+    setUnavailableIds((prev) => [...new Set([...prev, publicId])]);

  if (!uuid) notFound();

-  const { data: rfa, isLoading, isError } = useRFA(String(uuid));
-
  if (isLoading) {
    return (
      <div className="flex justify-center items-center py-20">
@@ -20,10 +45,62 @@ export default function RFADetailPage() {
    );
  }

-  if (isError || !rfa) {
-    // Check if error is 404
+  if (isError || !rfaData) {
    return <div className="text-center py-20 text-red-500">RFA not found or failed to load.</div>;
  }

-  return <RFADetail data={rfa} />;
+  // ดึง Current Revision สำหรับแสดงใน Banner
+  const currentRevision = rfaData.revisions?.find((r) => r.isCurrent) ?? rfaData.revisions?.[0];
+  const docNo = rfaData.correspondence?.correspondenceNumber ?? rfaData.correspondenceNumber ?? '';
+  const subject = currentRevision?.subject ?? '';
+  const status = currentRevision?.statusCode?.statusCode ?? '';
+
+  return (
+    <div className="space-y-4">
+      {/* ADR-021: Integrated Banner — เลขเอกสาร + สถานะ + ปุ่ม Action */}
+      <IntegratedBanner
+        docNo={docNo}
+        subject={subject}
+        status={status}
+        priority={rfa.priority}
+        workflowState={rfa.workflowState}
+        availableActions={rfa.availableActions}
+        instanceId={rfaData.workflowInstanceId}
+        pendingAttachmentIds={pendingAttachmentIds}
+      />
+
+      {/* Tabs — Details / Workflow (WorkflowLifecycle ถูกเพิ่มใน T019) */}
+      <Tabs defaultValue="details">
+        <TabsList>
+          <TabsTrigger value="details">รายละเอียด</TabsTrigger>
+          <TabsTrigger value="workflow">Workflow</TabsTrigger>
+        </TabsList>
+        <TabsContent value="details">
+          <RFADetail data={rfa} />
+        </TabsContent>
+        <TabsContent value="workflow">
+          <WorkflowErrorBoundary>
+            <WorkflowLifecycle
+              history={wfHistory}
+              currentState={rfaData.workflowState}
+              isLoading={wfLoading}
+              error={wfError instanceof Error ? wfError : null}
+              onFileClick={setPreviewFile}
+              onAttachmentsChange={setPendingAttachmentIds}
+              unavailableAttachmentIds={unavailableIds}
+            />
+          </WorkflowErrorBoundary>
+        </TabsContent>
+      </Tabs>
+
+      {/* ADR-021 US4: File Preview Modal */}
+      <WorkflowErrorBoundary fallback={null}>
+        <FilePreviewModal
+          attachment={previewFile}
+          onClose={() => setPreviewFile(null)}
+          onUnavailable={handleUnavailable}
+        />
+      </WorkflowErrorBoundary>
+    </div>
+  );
 }
@@ -1,14 +1,17 @@
 'use client';

+import { useState } from 'react';
 import { useParams } from 'next/navigation';
-import { useQuery } from '@tanstack/react-query';
-import { transmittalService } from '@/lib/services/transmittal.service';
-import { Transmittal } from '@/types/transmittal';
+import { useTransmittal } from '@/hooks/use-transmittal';
+import { useWorkflowHistory } from '@/hooks/use-workflow-history';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { ArrowLeft, RefreshCw, Printer } from 'lucide-react';
+import { IntegratedBanner } from '@/components/workflow/integrated-banner';
+import { WorkflowLifecycle } from '@/components/workflow/workflow-lifecycle';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import Link from 'next/link';
 import { format } from 'date-fns';
 import { toast } from 'sonner';
@@ -16,16 +19,15 @@ import { toast } from 'sonner';
 export default function TransmittalDetailPage() {
  const params = useParams();
  const uuid = params.uuid as string;
+  const [pendingAttachmentIds, setPendingAttachmentIds] = useState<string[]>([]);
+
+  const { transmittal, isLoading, error } = useTransmittal(uuid);

  const {
-    data: transmittal,
-    isLoading,
-    error,
-  } = useQuery<Transmittal>({
-    queryKey: ['transmittal', uuid],
-    queryFn: () => transmittalService.getByUuid(uuid),
-    enabled: !!uuid,
-  });
+    data: workflowHistory,
+    isLoading: historyLoading,
+    error: historyError,
+  } = useWorkflowHistory(transmittal?.workflowInstanceId);

  const handlePrint = () => {
    toast.info('PDF Export is coming soon...');
@@ -56,31 +58,46 @@ export default function TransmittalDetailPage() {
    );
  }

+  const transmittalDocNo = transmittal.correspondence?.correspondenceNumber ?? transmittal.transmittalNo ?? '';
+  const transmittalSubject = transmittal.subject ?? '';
+  const transmittalStatus = transmittal.purpose ?? '';
+
  return (
-    <section className="space-y-6">
-      {/* Header */}
+    <section className="space-y-4">
+      {/* ADR-021: Integrated Banner — wired with live workflow data (v1.8.7) */}
+      <IntegratedBanner
+        docNo={transmittalDocNo}
+        subject={transmittalSubject}
+        status={transmittalStatus}
+        instanceId={transmittal.workflowInstanceId}
+        workflowState={transmittal.workflowState}
+        availableActions={transmittal.availableActions}
+        pendingAttachmentIds={pendingAttachmentIds}
+        isLoading={isLoading}
+      />
+
+      {/* Navigation Header */}
      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <Link href="/transmittals">
-            <Button variant="ghost" size="icon">
-              <ArrowLeft className="h-4 w-4" />
-            </Button>
-          </Link>
-          <div>
-            <h1 className="text-2xl font-bold">
-              {transmittal.correspondence?.correspondenceNumber || transmittal.transmittalNo}
-            </h1>
-            <p className="text-muted-foreground">
-              {transmittal.correspondence?.revisions?.find((r) => r.isCurrent)?.title || transmittal.subject}
-            </p>
-          </div>
-        </div>
-        <Button variant="outline" onClick={handlePrint}>
+        <Link href="/transmittals">
+          <Button variant="ghost" size="sm">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            กลับ
+          </Button>
+        </Link>
+        <Button variant="outline" size="sm" onClick={handlePrint}>
          <Printer className="h-4 w-4 mr-2" />
          Export PDF
        </Button>
      </div>

+      {/* Tabs — Details / Workflow */}
+      <Tabs defaultValue="details">
+        <TabsList>
+          <TabsTrigger value="details">รายละเอียด</TabsTrigger>
+          <TabsTrigger value="workflow">Workflow</TabsTrigger>
+        </TabsList>
+        <TabsContent value="details" className="space-y-4">
+
      {/* Info Card */}
      <Card>
        <CardHeader>
@@ -154,6 +171,18 @@ export default function TransmittalDetailPage() {
          </Table>
        </CardContent>
      </Card>
+        </TabsContent>
+        <TabsContent value="workflow">
+          {/* ADR-021: WorkflowLifecycle — wired with history data (v1.8.7) */}
+          <WorkflowLifecycle
+            history={workflowHistory}
+            currentState={transmittal.workflowState}
+            isLoading={historyLoading}
+            error={historyError instanceof Error ? historyError : null}
+            onAttachmentsChange={setPendingAttachmentIds}
+          />
+        </TabsContent>
+      </Tabs>
    </section>
  );
 }
@@ -10,10 +10,20 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Plus, RefreshCw } from 'lucide-react';
 import Link from 'next/link';
 import { TransmittalListResponse } from '@/types/transmittal';
+import { TransmittalPurpose } from '@/types/dto/transmittal/transmittal.dto';
+
+const PURPOSE_OPTIONS: { value: TransmittalPurpose | ''; label: string }[] = [
+  { value: '', label: 'All Purposes' },
+  { value: TransmittalPurpose.FOR_APPROVAL, label: 'For Approval' },
+  { value: TransmittalPurpose.FOR_INFORMATION, label: 'For Information' },
+  { value: TransmittalPurpose.FOR_REVIEW, label: 'For Review' },
+  { value: TransmittalPurpose.OTHER, label: 'Other' },
+];

 export default function TransmittalPage() {
  // ADR-019: Dynamic project selection via UUID
  const [selectedProjectUuid, setSelectedProjectUuid] = useState<string>('');
+  const [selectedPurpose, setSelectedPurpose] = useState<TransmittalPurpose | ''>('');

  const { data: projectsData } = useQuery({
    queryKey: ['projects-for-transmittals'],
@@ -22,8 +32,12 @@ export default function TransmittalPage() {
  const projects = projectsData?.data || projectsData || [];

  const { data, isLoading, error, refetch } = useQuery<TransmittalListResponse>({
-    queryKey: ['transmittals', selectedProjectUuid],
-    queryFn: () => transmittalService.getAll({ projectId: selectedProjectUuid }),
+    queryKey: ['transmittals', selectedProjectUuid, selectedPurpose],
+    queryFn: () =>
+      transmittalService.getAll({
+        projectId: selectedProjectUuid,
+        ...(selectedPurpose ? { purpose: selectedPurpose } : {}),
+      }),
    enabled: !!selectedProjectUuid,
  });

@@ -47,11 +61,11 @@ export default function TransmittalPage() {
        </div>
      </div>

-      {/* ADR-019: Project filter */}
-      <div className="flex items-center gap-3">
+      {/* Filters: Project + Purpose (v1.8.7 B3) */}
+      <div className="flex flex-wrap items-center gap-3">
        <span className="text-sm font-medium text-muted-foreground">Project:</span>
        <Select value={selectedProjectUuid} onValueChange={setSelectedProjectUuid}>
-          <SelectTrigger className="w-[280px]">
+          <SelectTrigger className="w-[240px]">
            <SelectValue placeholder="Select a project" />
          </SelectTrigger>
          <SelectContent>
@@ -64,6 +78,23 @@ export default function TransmittalPage() {
            )}
          </SelectContent>
        </Select>
+
+        <span className="text-sm font-medium text-muted-foreground">Purpose:</span>
+        <Select
+          value={selectedPurpose || '__all__'}
+          onValueChange={(v) => setSelectedPurpose(v === '__all__' ? '' : (v as TransmittalPurpose))}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="All Purposes" />
+          </SelectTrigger>
+          <SelectContent>
+            {PURPOSE_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value || '__all__'} value={opt.value || '__all__'}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
      </div>

      {error && (