112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { migrationService } from "@/lib/services/migration.service";
|
|
import { MigrationErrorItem } from "@/types/migration";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { format } from "date-fns";
|
|
import { ArrowLeftIcon } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { getApiErrorMessage } from "@/types/api-error";
|
|
|
|
export default function MigrationErrorsPage() {
|
|
const [items, setItems] = useState<MigrationErrorItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setErrorMessage(null);
|
|
const res = await migrationService.getErrors({ limit: 100 });
|
|
setItems(Array.isArray(res.items) ? res.items : []);
|
|
} catch (error: unknown) {
|
|
setItems([]);
|
|
setErrorMessage(getApiErrorMessage(error, "Failed to load errors"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight text-red-600">Migration Errors</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Systemic errors encountered during the background migration process.
|
|
</p>
|
|
</div>
|
|
<Link href="/admin/migration">
|
|
<Button variant="outline">
|
|
<ArrowLeftIcon className="mr-2 h-4 w-4" /> Back to Queue
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Error Audit Log</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 errors...</div>
|
|
) : items.length === 0 ? (
|
|
<div className="py-10 text-center text-muted-foreground">No errors found.</div>
|
|
) : (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Batch ID</TableHead>
|
|
<TableHead>Document No.</TableHead>
|
|
<TableHead>Error Type</TableHead>
|
|
<TableHead>Error Message</TableHead>
|
|
<TableHead>Occurred At</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items.map((item) => (
|
|
<TableRow key={item.id}>
|
|
<TableCell className="font-mono text-sm">{item.batchId || "-"}</TableCell>
|
|
<TableCell className="font-medium">{item.documentNumber || "-"}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="destructive">{item.errorType || "UNKNOWN"}</Badge>
|
|
</TableCell>
|
|
<TableCell className="max-w-md break-words">
|
|
<span className="text-sm text-muted-foreground line-clamp-2" title={item.errorMessage}>
|
|
{item.errorMessage || "-"}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>{format(new Date(item.createdAt), "dd MMM yyyy, HH:mm")}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|