Files
admin ca0454a043
CI / CD Pipeline / build (push) Successful in 4m46s
CI / CD Pipeline / deploy (push) Successful in 5m47s
690409:1012 Done Task-FE-AI-03
2026-04-09 10:12:23 +07:00

578 lines
24 KiB
TypeScript

'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';
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, 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';
// --- 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);
const [statusFilter, setStatusFilter] = useState<string>('PENDING');
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const fetchData = useCallback(async () => {
try {
setLoading(true);
setErrorMessage(null);
const res = await migrationService.getReviewQueue({
status: statusFilter === 'ALL' ? undefined : (statusFilter as MigrationReviewStatus),
limit: 50,
});
setItems(Array.isArray(res.items) ? res.items : []);
setSelectedIds([]);
} catch (error: unknown) {
setItems([]);
setErrorMessage(getApiErrorMessage(error, 'Failed to load queue'));
} finally {
setLoading(false);
}
}, [statusFilter]);
useEffect(() => {
fetchData();
}, [fetchData]);
const handleToggleSelectAll = () => {
if (selectedIds.length === items.length) {
setSelectedIds([]);
} else {
setSelectedIds(items.map((i) => i.id).filter((id): id is number => id !== undefined));
}
};
const handleToggleSelect = (id: number) => {
setSelectedIds((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]));
};
const handleBatchApprove = async () => {
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))
.map((item) => ({
queueId: item.id,
dto: {
document_number: item.documentNumber,
subject: item.title || item.originalTitle || 'Untitled',
category: item.aiSuggestedCategory || 'Correspondence',
project_id: item.projectId || 1,
migrated_by: 'SYSTEM_IMPORT',
temp_attachment_id: item.tempAttachmentId,
ai_confidence: item.aiConfidence,
ai_issues: item.aiIssues,
issued_date: item.issuedDate,
received_date: item.receivedDate,
sender_id: item.senderOrganizationId,
receiver_id: item.receiverOrganizationId,
details: { tags: item.extractedTags },
},
}));
const batchId = `BATCH_UI_${Date.now()}`;
await migrationService.commitBatch({ items: batchItems, batchId }, batchId);
await fetchData();
} catch (_error) {
toast.error('Batch commit failed.');
} finally {
setSubmitting(false);
}
};
return (
<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>
</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={item.id !== undefined && selectedIds.includes(item.id)}
onCheckedChange={() => item.id !== undefined && handleToggleSelect(item.id)}
aria-label={`Select item ${item.id}`}
/>
</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'
: '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>
);
}
// --- 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>
);
}