From ca0454a0436fdd5d3e1a9b5d9ea1ff47f5ce5a36 Mon Sep 17 00:00:00 2001
From: admin <peancharoen.pslcp3@gmail.com>
Date: Thu, 9 Apr 2026 10:12:23 +0700
Subject: [PATCH] 690409:1012 Done Task-FE-AI-03

---
 frontend/app/(admin)/admin/migration/page.tsx | 600 ++++++++++++++----
 .../components/ai/ai-suggestion-field.tsx     | 171 +++++
 .../ai/document-comparison-view.tsx           | 158 +++++
 .../components/ai/processing-indicator.tsx    |  19 +
 frontend/lib/services/ai.service.ts           |  71 +++
 frontend/types/ai.ts                          |  76 +++
 6 files changed, 971 insertions(+), 124 deletions(-)
 create mode 100644 frontend/components/ai/ai-suggestion-field.tsx
 create mode 100644 frontend/components/ai/document-comparison-view.tsx
 create mode 100644 frontend/components/ai/processing-indicator.tsx
 create mode 100644 frontend/lib/services/ai.service.ts
 create mode 100644 frontend/types/ai.ts

diff --git a/frontend/app/(admin)/admin/migration/page.tsx b/frontend/app/(admin)/admin/migration/page.tsx
index 9b7c4d9..26f484d 100644
--- a/frontend/app/(admin)/admin/migration/page.tsx
+++ b/frontend/app/(admin)/admin/migration/page.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { useEffect, useState, useCallback } from 'react';
+import { aiService } from '@/lib/services/ai.service';
 import { migrationService } from '@/lib/services/migration.service';
+import { AiMigrationLog, AiMigrationLogStatus } from '@/types/ai';
 import { MigrationReviewQueueItem, MigrationReviewStatus } from '@/types/migration';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -9,13 +11,348 @@ import { Badge } from '@/components/ui/badge';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { format } from 'date-fns';
-import { EyeIcon, FileXIcon, CheckSquareIcon } from 'lucide-react';
+import { EyeIcon, FileXIcon, CheckCircleIcon, XCircleIcon, RefreshCwIcon } from 'lucide-react';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { getApiErrorMessage } from '@/types/api-error';
+import { v4 as uuidv4 } from 'uuid';
 
-export default function MigrationReviewQueuePage() {
+// --- AI Migration Tab ---
+
+function AiMigrationTab() {
+  const [items, setItems] = useState<AiMigrationLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<string>('PENDING_REVIEW');
+  // ADR-019: ใช้ publicId (string) สำหรับ selection
+  const [selectedPublicIds, setSelectedPublicIds] = useState<string[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  // Sheet สำหรับ inline review
+  const [reviewItem, setReviewItem] = useState<AiMigrationLog | null>(null);
+  const [adminFeedback, setAdminFeedback] = useState('');
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setErrorMessage(null);
+      const res = await aiService.getMigrationList({
+        status: statusFilter === 'ALL' ? undefined : (statusFilter as AiMigrationLogStatus),
+        limit: 50,
+      });
+      setItems(Array.isArray(res.items) ? res.items : []);
+      setSelectedPublicIds([]);
+    } catch (error: unknown) {
+      setItems([]);
+      setErrorMessage(getApiErrorMessage(error, 'ไม่สามารถโหลดข้อมูล AI Migration Logs ได้'));
+    } finally {
+      setLoading(false);
+    }
+  }, [statusFilter]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ADR-019: toggle โดยใช้ publicId (string) ไม่ใช่ numeric id
+  const handleToggleSelectAll = () => {
+    if (selectedPublicIds.length === items.length) {
+      setSelectedPublicIds([]);
+    } else {
+      setSelectedPublicIds(items.map((i) => i.publicId));
+    }
+  };
+
+  const handleToggleSelect = (publicId: string) => {
+    setSelectedPublicIds((prev) =>
+      prev.includes(publicId) ? prev.filter((id) => id !== publicId) : [...prev, publicId]
+    );
+  };
+
+  // Bulk verify รายการที่เลือก (ADR-019: ใช้ publicId)
+  const handleBulkVerify = async () => {
+    if (selectedPublicIds.length === 0) return;
+    try {
+      setSubmitting(true);
+      await Promise.all(
+        selectedPublicIds.map((publicId) =>
+          aiService.updateMigration(
+            publicId, // ADR-019: UUID เท่านั้น
+            { status: AiMigrationLogStatus.VERIFIED },
+            `bulk-verify-${publicId}-${uuidv4()}`
+          )
+        )
+      );
+      toast.success(`ยืนยัน ${selectedPublicIds.length} รายการเรียบร้อย`);
+      await fetchData();
+    } catch (_error) {
+      toast.error('การยืนยันแบบกลุ่มล้มเหลว');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // อัปเดตสถานะ item เดี่ยว (ADR-019: ใช้ publicId)
+  const handleUpdateStatus = async (status: AiMigrationLogStatus) => {
+    if (!reviewItem) return;
+    try {
+      setSubmitting(true);
+      await aiService.updateMigration(
+        reviewItem.publicId, // ADR-019: UUID เท่านั้น
+        { status, adminFeedback: adminFeedback || undefined },
+        `review-${reviewItem.publicId}-${uuidv4()}`
+      );
+      const label = status === AiMigrationLogStatus.VERIFIED ? 'ยืนยัน' : 'ปฏิเสธ';
+      toast.success(`${label}เอกสารเรียบร้อย`);
+      setReviewItem(null);
+      setAdminFeedback('');
+      await fetchData();
+    } catch (_error) {
+      toast.error('ไม่สามารถอัปเดตสถานะได้');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // สีของ confidence badge
+  const getConfidenceVariant = (score?: number): 'default' | 'secondary' | 'destructive' | 'outline' => {
+    if (!score) return 'destructive';
+    if (score >= 0.95) return 'default';
+    if (score >= 0.75) return 'secondary';
+    return 'destructive';
+  };
+
+  // สีของ status badge
+  const getStatusVariant = (status: AiMigrationLogStatus): 'default' | 'secondary' | 'destructive' | 'outline' => {
+    switch (status) {
+      case AiMigrationLogStatus.VERIFIED:
+      case AiMigrationLogStatus.IMPORTED:
+        return 'default';
+      case AiMigrationLogStatus.FAILED:
+        return 'destructive';
+      default:
+        return 'outline';
+    }
+  };
+
+  const statusLabels: Record<string, string> = {
+    PENDING_REVIEW: 'รอตรวจสอบ',
+    VERIFIED: 'ผ่านการตรวจสอบ',
+    IMPORTED: 'นำเข้าแล้ว',
+    FAILED: 'ล้มเหลว',
+  };
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap justify-between items-center gap-4">
+            <CardTitle>AI Migration Logs</CardTitle>
+            <div className="flex items-center gap-3">
+              {selectedPublicIds.length > 0 && (
+                <Button variant="default" onClick={handleBulkVerify} disabled={submitting}>
+                  <CheckCircleIcon className="mr-2 h-4 w-4" />
+                  {submitting ? 'กำลังดำเนินการ...' : `ยืนยัน ${selectedPublicIds.length} รายการ`}
+                </Button>
+              )}
+              <Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
+                <RefreshCwIcon className="h-4 w-4 mr-2" />
+                รีเฟรช
+              </Button>
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="สถานะ" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="ALL">ทุกสถานะ</SelectItem>
+                  <SelectItem value="PENDING_REVIEW">รอตรวจสอบ</SelectItem>
+                  <SelectItem value="VERIFIED">ผ่านการตรวจสอบ</SelectItem>
+                  <SelectItem value="FAILED">ล้มเหลว</SelectItem>
+                  <SelectItem value="IMPORTED">นำเข้าแล้ว</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {errorMessage && (
+            <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+              {errorMessage}
+            </div>
+          )}
+          {loading ? (
+            <div className="py-10 text-center text-muted-foreground">กำลังโหลด...</div>
+          ) : items.length === 0 ? (
+            <div className="py-10 text-center text-muted-foreground">ไม่มีรายการ</div>
+          ) : (
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-[50px]">
+                      <Checkbox
+                        checked={items.length > 0 && selectedPublicIds.length === items.length}
+                        onCheckedChange={handleToggleSelectAll}
+                        aria-label="เลือกทั้งหมด"
+                      />
+                    </TableHead>
+                    <TableHead>ไฟล์ต้นทาง</TableHead>
+                    <TableHead>ความมั่นใจ AI</TableHead>
+                    <TableHead>สถานะ</TableHead>
+                    <TableHead>วันที่สร้าง</TableHead>
+                    <TableHead className="text-right">การดำเนินการ</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {items.map((item) => (
+                    // ADR-019: ใช้ publicId เป็น key
+                    <TableRow key={item.publicId}>
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedPublicIds.includes(item.publicId)}
+                          onCheckedChange={() => handleToggleSelect(item.publicId)}
+                          aria-label={`เลือก ${item.publicId}`}
+                        />
+                      </TableCell>
+                      <TableCell className="font-mono text-xs max-w-[200px] truncate">
+                        {item.sourceFile}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={getConfidenceVariant(item.confidenceScore)}>
+                          {item.confidenceScore
+                            ? (item.confidenceScore * 100).toFixed(1) + '%'
+                            : 'N/A'}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={getStatusVariant(item.status)}>
+                          {statusLabels[item.status] ?? item.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        {format(new Date(item.createdAt), 'dd MMM yyyy, HH:mm')}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            setReviewItem(item);
+                            setAdminFeedback(item.adminFeedback ?? '');
+                          }}
+                          disabled={item.status === AiMigrationLogStatus.IMPORTED}
+                        >
+                          <EyeIcon className="h-4 w-4 mr-2" />
+                          ตรวจสอบ
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Inline Review Sheet */}
+      <Sheet
+        open={reviewItem !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setReviewItem(null);
+            setAdminFeedback('');
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>ตรวจสอบ AI Migration Log</SheetTitle>
+          </SheetHeader>
+          {reviewItem && (
+            <div className="mt-4 space-y-4">
+              <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">Public ID (ADR-019)</p>
+                <p className="font-mono text-xs break-all">{reviewItem.publicId}</p>
+              </div>
+              <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">ไฟล์ต้นทาง</p>
+                <p className="text-sm">{reviewItem.sourceFile}</p>
+              </div>
+              <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">ความมั่นใจ AI</p>
+                <Badge variant={getConfidenceVariant(reviewItem.confidenceScore)}>
+                  {reviewItem.confidenceScore
+                    ? (reviewItem.confidenceScore * 100).toFixed(1) + '%'
+                    : 'N/A'}
+                </Badge>
+              </div>
+              {reviewItem.aiExtractedMetadata &&
+                Object.keys(reviewItem.aiExtractedMetadata).length > 0 && (
+                  <div className="space-y-2">
+                    <p className="text-xs font-medium text-muted-foreground">
+                      ข้อมูลที่ AI สกัดได้
+                    </p>
+                    <div className="bg-muted/40 rounded p-3 text-xs space-y-1 max-h-48 overflow-y-auto">
+                      {Object.entries(reviewItem.aiExtractedMetadata).map(([k, v]) => (
+                        <div key={k} className="flex gap-2">
+                          <span className="font-medium text-muted-foreground min-w-[100px]">{k}:</span>
+                          <span>{String(v)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              <div className="space-y-1">
+                <label className="text-sm font-medium">ความเห็น Admin</label>
+                <Textarea
+                  value={adminFeedback}
+                  onChange={(e) => setAdminFeedback(e.target.value)}
+                  placeholder="ระบุความเห็นหรือเหตุผล (ถ้ามี)"
+                  rows={3}
+                />
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button
+                  variant="destructive"
+                  className="flex-1"
+                  disabled={
+                    submitting ||
+                    reviewItem.status === AiMigrationLogStatus.IMPORTED ||
+                    reviewItem.status === AiMigrationLogStatus.FAILED
+                  }
+                  onClick={() => handleUpdateStatus(AiMigrationLogStatus.FAILED)}
+                >
+                  <XCircleIcon className="h-4 w-4 mr-2" />
+                  ปฏิเสธ
+                </Button>
+                <Button
+                  className="flex-1 bg-green-600 hover:bg-green-700 text-white"
+                  disabled={
+                    submitting ||
+                    reviewItem.status === AiMigrationLogStatus.IMPORTED ||
+                    reviewItem.status === AiMigrationLogStatus.VERIFIED
+                  }
+                  onClick={() => handleUpdateStatus(AiMigrationLogStatus.VERIFIED)}
+                >
+                  <CheckCircleIcon className="h-4 w-4 mr-2" />
+                  {submitting ? 'กำลังดำเนินการ...' : 'ยืนยัน'}
+                </Button>
+              </div>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+// --- Legacy Queue Tab (ระบบ Migration เดิม) ---
+
+function LegacyQueueTab() {
   const [items, setItems] = useState<MigrationReviewQueueItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
@@ -32,7 +369,7 @@ export default function MigrationReviewQueuePage() {
         limit: 50,
       });
       setItems(Array.isArray(res.items) ? res.items : []);
-      setSelectedIds([]); // reset selection on fetch
+      setSelectedIds([]);
     } catch (error: unknown) {
       setItems([]);
       setErrorMessage(getApiErrorMessage(error, 'Failed to load queue'));
@@ -61,7 +398,6 @@ export default function MigrationReviewQueuePage() {
     if (selectedIds.length === 0) return;
     try {
       setSubmitting(true);
-
       const batchItems = items
         .filter((i): i is typeof i & { id: number } => i.id !== undefined)
         .filter((i) => selectedIds.includes(i.id))
@@ -80,16 +416,12 @@ export default function MigrationReviewQueuePage() {
             received_date: item.receivedDate,
             sender_id: item.senderOrganizationId,
             receiver_id: item.receiverOrganizationId,
-            details: {
-              tags: item.extractedTags,
-            },
+            details: { tags: item.extractedTags },
           },
         }));
-
       const batchId = `BATCH_UI_${Date.now()}`;
       await migrationService.commitBatch({ items: batchItems, batchId }, batchId);
-
-      fetchData();
+      await fetchData();
     } catch (_error) {
       toast.error('Batch commit failed.');
     } finally {
@@ -98,128 +430,148 @@ export default function MigrationReviewQueuePage() {
   };
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between flex-wrap gap-4 items-center">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Migration Review Queue</h1>
-          <p className="text-muted-foreground mt-1">Review and correct documents that AI flagged as low confidence.</p>
+    <Card>
+      <CardHeader>
+        <div className="flex flex-wrap justify-between items-center gap-4">
+          <CardTitle>Legacy Review Queue - {statusFilter}</CardTitle>
+          <div className="flex items-center gap-3">
+            {selectedIds.length > 0 && (
+              <Button variant="default" onClick={handleBatchApprove} disabled={submitting}>
+                <CheckCircleIcon className="mr-2 h-4 w-4" />
+                {submitting ? 'Processing...' : `Batch Approve (${selectedIds.length})`}
+              </Button>
+            )}
+            <Link href="/admin/migration/errors">
+              <Button variant="outline">
+                <FileXIcon className="mr-2 h-4 w-4" /> View Errors
+              </Button>
+            </Link>
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ALL">All Status</SelectItem>
+                <SelectItem value="PENDING">Pending</SelectItem>
+                <SelectItem value="APPROVED">Approved</SelectItem>
+                <SelectItem value="REJECTED">Rejected</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-        <div className="flex items-center gap-4">
-          {selectedIds.length > 0 && (
-            <Button variant="default" onClick={handleBatchApprove} disabled={submitting}>
-              <CheckSquareIcon className="mr-2 h-4 w-4" />
-              {submitting ? 'Processing...' : `Batch Approve (${selectedIds.length})`}
-            </Button>
-          )}
-          <Link href="/admin/migration/errors">
-            <Button variant="outline">
-              <FileXIcon className="mr-2 h-4 w-4" /> View Error Logs
-            </Button>
-          </Link>
-          <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="ALL">All Status</SelectItem>
-              <SelectItem value="PENDING">Pending</SelectItem>
-              <SelectItem value="APPROVED">Approved</SelectItem>
-              <SelectItem value="REJECTED">Rejected</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Queue Items - {statusFilter}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {errorMessage && (
-            <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
-              {errorMessage}
-            </div>
-          )}
-          {loading ? (
-            <div className="py-10 text-center">Loading queue...</div>
-          ) : items.length === 0 ? (
-            <div className="py-10 text-center text-muted-foreground">No items in the queue.</div>
-          ) : (
-            <div className="rounded-md border">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-[50px]">
+      </CardHeader>
+      <CardContent>
+        {errorMessage && (
+          <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+            {errorMessage}
+          </div>
+        )}
+        {loading ? (
+          <div className="py-10 text-center">Loading queue...</div>
+        ) : items.length === 0 ? (
+          <div className="py-10 text-center text-muted-foreground">No items in the queue.</div>
+        ) : (
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[50px]">
+                    <Checkbox
+                      checked={items.length > 0 && selectedIds.length === items.length}
+                      onCheckedChange={handleToggleSelectAll}
+                      aria-label="Select all"
+                    />
+                  </TableHead>
+                  <TableHead>Document No.</TableHead>
+                  <TableHead>Suggested Category</TableHead>
+                  <TableHead>Confidence</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Created At</TableHead>
+                  <TableHead className="text-right">Action</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {items.map((item) => (
+                  <TableRow key={item.id ?? item.publicId}>
+                    <TableCell>
                       <Checkbox
-                        checked={items.length > 0 && selectedIds.length === items.length}
-                        onCheckedChange={handleToggleSelectAll}
-                        aria-label="Select all"
+                        checked={item.id !== undefined && selectedIds.includes(item.id)}
+                        onCheckedChange={() => item.id !== undefined && handleToggleSelect(item.id)}
+                        aria-label={`Select item ${item.id}`}
                       />
-                    </TableHead>
-                    <TableHead>Document No.</TableHead>
-                    <TableHead>Suggested Category</TableHead>
-                    <TableHead>Confidence</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Created At</TableHead>
-                    <TableHead className="text-right">Action</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {items.map((item) => (
-                    <TableRow key={item.id || item.publicId}>
-                      <TableCell>
-                        <Checkbox
-                          checked={item.id !== undefined && selectedIds.includes(item.id)}
-                          onCheckedChange={() => item.id !== undefined && handleToggleSelect(item.id)}
-                          aria-label={`Select item ${item.id || item.publicId}`}
-                        />
-                      </TableCell>
-                      <TableCell className="font-medium">{item.documentNumber}</TableCell>
-                      <TableCell>{item.aiSuggestedCategory || 'Unknown'}</TableCell>
-                      <TableCell>
-                        <Badge
-                          variant={
-                            !item.aiConfidence
-                              ? 'destructive'
-                              : item.aiConfidence > 0.8
-                                ? 'default'
-                                : item.aiConfidence > 0.5
-                                  ? 'secondary'
-                                  : 'destructive'
-                          }
-                        >
-                          {item.aiConfidence ? (item.aiConfidence * 100).toFixed(1) + '%' : 'N/A'}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>
-                        <Badge
-                          variant={
-                            item.status === 'PENDING'
-                              ? 'outline'
-                              : item.status === 'APPROVED'
-                                ? 'default'
+                    </TableCell>
+                    <TableCell className="font-medium">{item.documentNumber}</TableCell>
+                    <TableCell>{item.aiSuggestedCategory || 'Unknown'}</TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={
+                          !item.aiConfidence
+                            ? 'destructive'
+                            : item.aiConfidence > 0.8
+                              ? 'default'
+                              : item.aiConfidence > 0.5
+                                ? 'secondary'
                                 : 'destructive'
-                          }
-                        >
-                          {item.status}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>{format(new Date(item.createdAt), 'dd MMM yyyy, HH:mm')}</TableCell>
-                      <TableCell className="text-right">
-                        <Link href={`/admin/migration/review/${item.id || item.publicId}`}>
+                        }
+                      >
+                        {item.aiConfidence ? (item.aiConfidence * 100).toFixed(1) + '%' : 'N/A'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={
+                          item.status === 'PENDING'
+                            ? 'outline'
+                            : item.status === 'APPROVED'
+                              ? 'default'
+                              : 'destructive'
+                        }
+                      >
+                        {item.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{format(new Date(item.createdAt), 'dd MMM yyyy, HH:mm')}</TableCell>
+                    <TableCell className="text-right">
+                      {item.id !== undefined && (
+                        <Link href={`/admin/migration/review/${item.id}`}>
                           <Button size="sm" variant="ghost">
                             <EyeIcon className="h-4 w-4 mr-2" /> Review
                           </Button>
                         </Link>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// --- Main Page ---
+
+export default function MigrationManagementPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Migration Management</h1>
+        <p className="text-muted-foreground mt-1">จัดการการนำเข้าเอกสาร — AI Migration Logs และ Legacy Review Queue</p>
+      </div>
+      <Tabs defaultValue="ai">
+        <TabsList>
+          <TabsTrigger value="ai">AI Migration Logs</TabsTrigger>
+          <TabsTrigger value="legacy">Legacy Queue</TabsTrigger>
+        </TabsList>
+        <TabsContent value="ai">
+          <AiMigrationTab />
+        </TabsContent>
+        <TabsContent value="legacy">
+          <LegacyQueueTab />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }
diff --git a/frontend/components/ai/ai-suggestion-field.tsx b/frontend/components/ai/ai-suggestion-field.tsx
new file mode 100644
index 0000000..d909090
--- /dev/null
+++ b/frontend/components/ai/ai-suggestion-field.tsx
@@ -0,0 +1,171 @@
+// File: components/ai/ai-suggestion-field.tsx
+// Component แสดง AI Suggestion พร้อม Accept / Reject / Edit actions (ADR-018, ADR-020)
+
+import { useState } from 'react';
+import { Check, X, Edit2, Sparkles } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+
+// สีตาม confidence score (>= 0.95 สีเขียว, >= 0.85 สีเหลือง, < 0.85 สีแดง)
+const getConfidenceClass = (confidence: number): string => {
+  if (confidence >= 0.95) return 'text-green-700 bg-green-50 border-green-400';
+  if (confidence >= 0.85) return 'text-yellow-700 bg-yellow-50 border-yellow-400';
+  return 'text-red-700 bg-red-50 border-red-400';
+};
+
+export interface AiSuggestionFieldProps {
+  label: string;
+  value: string;
+  suggestion?: string;
+  confidence?: number;
+  onAccept: () => void;
+  onReject: () => void;
+  onEdit: (newValue: string) => void;
+  className?: string;
+}
+
+export function AiSuggestionField({
+  label,
+  value,
+  suggestion,
+  confidence,
+  onAccept,
+  onReject,
+  onEdit,
+  className,
+}: AiSuggestionFieldProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+
+  // มีค่าจาก AI หรือไม่
+  const hasSuggestion = suggestion !== undefined && suggestion !== '';
+  // ค่าปัจจุบันตรงกับที่ AI แนะนำ
+  const isAiValue = hasSuggestion && value === suggestion;
+
+  const handleSave = () => {
+    onEdit(editValue);
+    setIsEditing(false);
+  };
+
+  const handleStartEdit = () => {
+    setEditValue(value);
+    setIsEditing(true);
+  };
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      {/* Label พร้อม Confidence Badge */}
+      <div className="flex items-center gap-2">
+        <label className="text-sm font-medium">{label}</label>
+        {hasSuggestion && confidence !== undefined && (
+          <Badge
+            variant="outline"
+            className={cn('text-xs gap-1 px-1.5 py-0', getConfidenceClass(confidence))}
+          >
+            <Sparkles className="h-3 w-3" />
+            AI {Math.round(confidence * 100)}%
+          </Badge>
+        )}
+      </div>
+
+      {/* Field Content — highlight สีเหลืองเมื่อใช้ค่าจาก AI */}
+      <div
+        className={cn(
+          'rounded border px-3 py-2 text-sm min-h-[2.25rem]',
+          isAiValue && 'bg-yellow-50 border-l-4 border-yellow-400'
+        )}
+      >
+        {isEditing ? (
+          <div className="flex gap-2">
+            <Input
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              className="h-7 text-sm"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSave();
+                if (e.key === 'Escape') setIsEditing(false);
+              }}
+            />
+            <Button type="button" size="sm" variant="outline" onClick={handleSave} className="h-7 px-2">
+              <Check className="h-3 w-3" />
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => setIsEditing(false)}
+              className="h-7 px-2"
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between gap-2">
+            <span>
+              {value !== '' ? value : <span className="text-muted-foreground italic">—</span>}
+            </span>
+            {hasSuggestion && (
+              <div className="flex gap-1 shrink-0">
+                {/* ปุ่ม "รับ" จะแสดงเมื่อค่าปัจจุบันยังไม่ใช่ค่า AI */}
+                {!isAiValue && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    onClick={onAccept}
+                    className="h-6 px-2 text-xs text-green-700 border-green-300 hover:bg-green-50"
+                    title={`รับค่าจาก AI: ${suggestion}`}
+                  >
+                    <Check className="h-3 w-3 mr-1" />
+                    รับ
+                  </Button>
+                )}
+                {/* ปุ่ม "ปฏิเสธ" จะแสดงเมื่อใช้ค่า AI อยู่ */}
+                {isAiValue && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    onClick={onReject}
+                    className="h-6 px-2 text-xs text-red-700 border-red-300 hover:bg-red-50"
+                    title="ปฏิเสธค่า AI"
+                  >
+                    <X className="h-3 w-3 mr-1" />
+                    ปฏิเสธ
+                  </Button>
+                )}
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={handleStartEdit}
+                  className="h-6 w-6 p-0"
+                  title="แก้ไขค่า"
+                >
+                  <Edit2 className="h-3 w-3" />
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* แสดง AI Suggestion hint เมื่อค่าปัจจุบันต่างจาก AI */}
+      {hasSuggestion && !isAiValue && (
+        <p className="text-xs text-muted-foreground pl-1">
+          AI แนะนำ:{' '}
+          <button
+            type="button"
+            className="font-medium text-yellow-700 hover:underline"
+            onClick={onAccept}
+          >
+            {suggestion}
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/ai/document-comparison-view.tsx b/frontend/components/ai/document-comparison-view.tsx
new file mode 100644
index 0000000..346782c
--- /dev/null
+++ b/frontend/components/ai/document-comparison-view.tsx
@@ -0,0 +1,158 @@
+// File: components/ai/document-comparison-view.tsx
+// Side-by-side PDF viewer + Form ที่มี AI Suggestions (ADR-018, ADR-020)
+
+import { useState } from 'react';
+import { Eye, ChevronDown, ChevronUp } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { AiSuggestionField } from './ai-suggestion-field';
+import type { ExtractionResult } from '@/types/ai';
+
+// Labels ภาษาไทยสำหรับ field ต่างๆ
+const FIELD_LABELS: Record<string, string> = {
+  subject: 'ชื่อเรื่อง',
+  documentDate: 'วันที่เอกสาร',
+  category: 'ประเภทเอกสาร',
+  senderId: 'รหัสองค์กรผู้ส่ง',
+  disciplineId: 'สาขา (Discipline)',
+  issuedDate: 'วันที่ออกเอกสาร',
+  receivedDate: 'วันที่รับเอกสาร',
+  projectCode: 'รหัสโครงการ',
+  documentNumber: 'เลขที่เอกสาร',
+};
+
+// Fields ที่แสดงใน comparison view
+const DISPLAY_FIELDS = ['subject', 'documentDate', 'category', 'disciplineId', 'senderId'];
+
+export interface DocumentComparisonViewProps {
+  fileUrl: string | null;
+  extractedData: ExtractionResult | null;
+  formData: Record<string, string>;
+  onFieldUpdate: (field: string, value: string) => void;
+  extractedText?: string;
+  reviewReason?: string;
+}
+
+export function DocumentComparisonView({
+  fileUrl,
+  extractedData,
+  formData,
+  onFieldUpdate,
+  extractedText,
+  reviewReason,
+}: DocumentComparisonViewProps) {
+  const [showRawText, setShowRawText] = useState(false);
+
+  // แกะ metadata และ confidence จาก ExtractionResult
+  const metadata = (extractedData?.extractedMetadata ?? {}) as Record<string, unknown>;
+  const fieldConfidences = metadata.fieldConfidences as Record<string, number> | undefined;
+
+  const getSuggestion = (field: string): string | undefined => {
+    const val = metadata[field];
+    return val !== undefined ? String(val) : undefined;
+  };
+
+  const getConfidence = (field: string): number | undefined =>
+    fieldConfidences?.[field] ?? extractedData?.confidenceScore;
+
+  return (
+    <div className="flex flex-1 gap-6 overflow-hidden">
+      {/* Left: PDF Viewer */}
+      <Card className="flex-1 hidden md:flex flex-col overflow-hidden border-2 border-primary/10 shadow-md">
+        <CardContent className="p-0 flex-1 relative bg-slate-100">
+          {fileUrl ? (
+            <iframe
+              src={`${fileUrl}#toolbar=0&navpanes=0`}
+              className="absolute inset-0 w-full h-full"
+              title="Document Viewer"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+              <p>ไม่พบไฟล์เอกสาร</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Right: Form + AI Suggestions */}
+      <Card className="w-full md:w-[450px] lg:w-[500px] flex-shrink-0 flex flex-col overflow-hidden border-2 border-primary/10 shadow-md">
+        <div className="p-4 border-b bg-muted/30 shrink-0">
+          <h2 className="font-semibold text-lg">ข้อมูลที่สกัดได้</h2>
+          {extractedData?.confidenceScore !== undefined && (
+            <p className="text-sm text-muted-foreground mt-1">
+              ความมั่นใจรวม:{' '}
+              <span
+                className={
+                  extractedData.confidenceScore >= 0.95
+                    ? 'text-green-600 font-semibold'
+                    : extractedData.confidenceScore >= 0.85
+                      ? 'text-yellow-600 font-semibold'
+                      : 'text-red-600 font-semibold'
+                }
+              >
+                {(extractedData.confidenceScore * 100).toFixed(1)}%
+              </span>
+            </p>
+          )}
+          {reviewReason && (
+            <p className="text-sm text-red-600 mt-1 bg-red-50 p-2 rounded border border-red-100">
+              เหตุผลตรวจสอบ: {reviewReason}
+            </p>
+          )}
+        </div>
+
+        <CardContent className="flex-1 overflow-y-auto p-4 space-y-4">
+          {/* AI Suggestion Fields */}
+          {DISPLAY_FIELDS.map((field) => {
+            const suggestion = getSuggestion(field);
+            const confidence = getConfidence(field);
+            const currentValue = formData[field] ?? '';
+
+            return (
+              <AiSuggestionField
+                key={field}
+                label={FIELD_LABELS[field] ?? field}
+                value={currentValue}
+                suggestion={suggestion}
+                confidence={confidence}
+                onAccept={() => suggestion !== undefined && onFieldUpdate(field, suggestion)}
+                onReject={() => onFieldUpdate(field, '')}
+                onEdit={(val) => onFieldUpdate(field, val)}
+              />
+            );
+          })}
+
+          {/* OCR Raw Text Viewer (toggle) */}
+          {extractedText && (
+            <div className="border-t pt-4">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="text-blue-600 p-0 h-auto hover:bg-transparent gap-1"
+                onClick={() => setShowRawText((prev) => !prev)}
+              >
+                <Eye className="h-4 w-4" />
+                ดูข้อความดิบจาก AI
+                {showRawText ? (
+                  <ChevronUp className="h-4 w-4" />
+                ) : (
+                  <ChevronDown className="h-4 w-4" />
+                )}
+              </Button>
+              {showRawText && (
+                <Card className="mt-2">
+                  <CardContent className="p-4">
+                    <pre className="text-xs bg-gray-50 p-3 rounded overflow-auto max-h-48 whitespace-pre-wrap font-mono">
+                      {extractedText}
+                    </pre>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/components/ai/processing-indicator.tsx b/frontend/components/ai/processing-indicator.tsx
new file mode 100644
index 0000000..fce8207
--- /dev/null
+++ b/frontend/components/ai/processing-indicator.tsx
@@ -0,0 +1,19 @@
+// File: components/ai/processing-indicator.tsx
+// Loading indicator ระหว่าง AI ประมวลผลเอกสาร (ADR-018, ADR-020)
+
+import { Loader2 } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+
+export function AiProcessingIndicator() {
+  return (
+    <Card className="border-yellow-200 bg-yellow-50">
+      <CardContent className="flex items-center space-x-3 p-4">
+        <Loader2 className="h-5 w-5 animate-spin text-yellow-600" />
+        <div>
+          <p className="font-medium text-yellow-800">AI กำลังวิเคราะห์เอกสาร...</p>
+          <p className="text-sm text-yellow-600">กรุณารอสักครู่ (ประมาณ 15-30 วินาที)</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/lib/services/ai.service.ts b/frontend/lib/services/ai.service.ts
new file mode 100644
index 0000000..3dff8b2
--- /dev/null
+++ b/frontend/lib/services/ai.service.ts
@@ -0,0 +1,71 @@
+// File: lib/services/ai.service.ts
+// Service สำหรับ AI Gateway API (ADR-018: Frontend → DMS API เท่านั้น ห้ามเรียก n8n/Ollama โดยตรง)
+
+import api from '../api/client';
+import type {
+  ExtractionResult,
+  ExtractDocumentDto,
+  AiMigrationLog,
+  AiMigrationLogStatus,
+  AiMigrationUpdateDto,
+  AiFeedbackDto,
+  AiPaginatedResult,
+} from '@/types/ai';
+
+// Helper: แกะ nested data wrapper จาก TransformInterceptor
+const extractData = <T>(value: unknown): T => {
+  if (value && typeof value === 'object' && 'data' in value) {
+    return (value as { data: T }).data;
+  }
+  return value as T;
+};
+
+// Helper: normalize paginated response
+const normalizePaginated = <T>(value: unknown): AiPaginatedResult<T> => {
+  const inner = extractData<unknown>(value);
+  if (
+    inner &&
+    typeof inner === 'object' &&
+    'items' in inner &&
+    Array.isArray((inner as { items: unknown[] }).items)
+  ) {
+    return inner as AiPaginatedResult<T>;
+  }
+  return { items: [], total: 0, page: 1, limit: 10, totalPages: 0 };
+};
+
+export const aiService = {
+  // --- Real-time Extraction (ADR-018: ผ่าน /api/ai/extract เท่านั้น ห้ามเรียก n8n/Ollama) ---
+  extract: async (dto: ExtractDocumentDto): Promise<ExtractionResult> => {
+    const { data } = await api.post('/ai/extract', dto);
+    return extractData<ExtractionResult>(data);
+  },
+
+  // --- Admin: รายการ AI Migration Logs ---
+  getMigrationList: async (params: {
+    page?: number;
+    limit?: number;
+    status?: AiMigrationLogStatus;
+    minConfidence?: number;
+  }): Promise<AiPaginatedResult<AiMigrationLog>> => {
+    const { data } = await api.get('/ai/migration', { params });
+    return normalizePaginated<AiMigrationLog>(data);
+  },
+
+  // --- Admin: อัปเดตสถานะ Migration Log (ADR-019: ใช้ publicId) ---
+  updateMigration: async (
+    publicId: string, // ADR-019: UUID เท่านั้น ห้ามใช้ parseInt
+    dto: AiMigrationUpdateDto,
+    idempotencyKey: string
+  ): Promise<AiMigrationLog> => {
+    const { data } = await api.patch(`/ai/migration/${publicId}`, dto, {
+      headers: { 'Idempotency-Key': idempotencyKey },
+    });
+    return extractData<AiMigrationLog>(data);
+  },
+
+  // --- Feedback Collection (สำหรับปรับปรุง AI) ---
+  submitFeedback: async (dto: AiFeedbackDto): Promise<void> => {
+    await api.post('/ai/feedback', dto);
+  },
+};
diff --git a/frontend/types/ai.ts b/frontend/types/ai.ts
new file mode 100644
index 0000000..280bf22
--- /dev/null
+++ b/frontend/types/ai.ts
@@ -0,0 +1,76 @@
+// File: types/ai.ts
+// ประเภทข้อมูลสำหรับ AI Integration (ADR-018, ADR-020)
+
+// สถานะของ AI Migration Log (ตรงกับ backend MigrationLogStatus)
+export enum AiMigrationLogStatus {
+  PENDING_REVIEW = 'PENDING_REVIEW',
+  VERIFIED = 'VERIFIED',
+  IMPORTED = 'IMPORTED',
+  FAILED = 'FAILED',
+}
+
+// ผลลัพธ์จาก Real-time AI Extraction
+export interface ExtractionResult {
+  migrationLogPublicId: string; // ADR-019: UUID เท่านั้น
+  status: 'processing' | 'completed' | 'failed';
+  extractedMetadata?: Record<string, unknown>;
+  confidenceScore?: number;
+  action?: string;
+  processingTimeMs?: number;
+}
+
+// ข้อมูล AI Migration Log (ตาราง migration_logs)
+export interface AiMigrationLog {
+  publicId: string; // ADR-019: UUID เท่านั้น
+  sourceFile: string;
+  sourceMetadata?: Record<string, unknown>;
+  aiExtractedMetadata?: Record<string, unknown>;
+  confidenceScore?: number;
+  status: AiMigrationLogStatus;
+  adminFeedback?: string;
+  reviewedAt?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// DTO สำหรับส่ง Extract Document ไปยัง AI
+export interface ExtractDocumentDto {
+  publicId: string; // ADR-019: UUID ของไฟล์ใน temp storage
+  context: 'ingestion' | 'migration' | 'review';
+  fileType?: string;
+}
+
+// DTO สำหรับอัปเดตสถานะ Migration Log (Admin)
+export interface AiMigrationUpdateDto {
+  status?: AiMigrationLogStatus;
+  adminFeedback?: string;
+}
+
+// Feedback สำหรับปรับปรุงความแม่นยำ AI
+export interface AiFeedbackDto {
+  documentPublicId: string; // ADR-019: UUID เท่านั้น
+  field: string;
+  aiSuggestion: string;
+  userCorrection: string;
+  confidence: number;
+  timestamp: string;
+  userAgent: string;
+}
+
+// Metrics สำหรับ Admin Analytics Dashboard
+export interface PerformanceMetrics {
+  overallAccuracy: number;
+  userCorrectionRate: number;
+  avgProcessingTime: number;
+  fieldAccuracy: Record<string, number>;
+  modelPerformance: Record<string, number>;
+}
+
+// Paginated Result สำหรับ AI endpoints
+export interface AiPaginatedResult<T> {
+  items: T[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}