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

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

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

frontend/app/(dashboard)/transmittals/page.tsx

@@ -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 && (