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

frontend/app/(dashboard)/correspondences/[uuid]/page.tsx

@@ -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>
+  );
 }