mirror of
https://github.com/xCyanGrizzly/DragonsStash.git
synced 2026-05-11 06:11:15 +00:00
feat: add skipped/failed packages table UI components
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
135
src/app/(app)/stls/_components/skipped-columns.tsx
Normal file
135
src/app/(app)/stls/_components/skipped-columns.tsx
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { type ColumnDef } from "@tanstack/react-table";
|
||||||
|
import { DataTableColumnHeader } from "@/components/shared/data-table-column-header";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { RotateCw } from "lucide-react";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
|
||||||
|
export interface SkippedRow {
|
||||||
|
id: string;
|
||||||
|
fileName: string;
|
||||||
|
fileSize: string;
|
||||||
|
reason: "SIZE_LIMIT" | "DOWNLOAD_FAILED" | "EXTRACT_FAILED" | "UPLOAD_FAILED";
|
||||||
|
errorMessage: string | null;
|
||||||
|
sourceChannel: { id: string; title: string };
|
||||||
|
isMultipart: boolean;
|
||||||
|
partCount: number;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatBytes(bytesStr: string): string {
|
||||||
|
const bytes = Number(bytesStr);
|
||||||
|
if (bytes === 0) return "0 B";
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ["B", "KB", "MB", "GB", "TB"];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const REASON_LABELS: Record<SkippedRow["reason"], { label: string; variant: "default" | "destructive" | "outline" | "secondary" }> = {
|
||||||
|
SIZE_LIMIT: { label: "Size Limit", variant: "secondary" },
|
||||||
|
DOWNLOAD_FAILED: { label: "Download Failed", variant: "destructive" },
|
||||||
|
EXTRACT_FAILED: { label: "Extract Failed", variant: "destructive" },
|
||||||
|
UPLOAD_FAILED: { label: "Upload Failed", variant: "destructive" },
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getSkippedColumns({
|
||||||
|
onRetry,
|
||||||
|
}: {
|
||||||
|
onRetry: (row: SkippedRow) => void;
|
||||||
|
}): ColumnDef<SkippedRow, unknown>[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
accessorKey: "fileName",
|
||||||
|
header: ({ column }) => <DataTableColumnHeader column={column} title="File Name" />,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="flex items-center gap-2 min-w-0">
|
||||||
|
<span className="font-medium truncate max-w-[300px]">{row.original.fileName}</span>
|
||||||
|
{row.original.isMultipart && (
|
||||||
|
<Badge variant="outline" className="text-[10px] shrink-0">
|
||||||
|
{row.original.partCount} parts
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
enableHiding: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "fileSize",
|
||||||
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Size" />,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{formatBytes(row.original.fileSize)}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "reason",
|
||||||
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Reason" />,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const { label, variant } = REASON_LABELS[row.original.reason];
|
||||||
|
return <Badge variant={variant} className="text-[10px]">{label}</Badge>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "errorMessage",
|
||||||
|
header: "Error",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const msg = row.original.errorMessage;
|
||||||
|
if (!msg) return <span className="text-sm text-muted-foreground">{"\u2014"}</span>;
|
||||||
|
return (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<span className="text-sm text-muted-foreground truncate max-w-[200px] block cursor-help">
|
||||||
|
{msg}
|
||||||
|
</span>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="max-w-sm">
|
||||||
|
<p className="text-xs break-all">{msg}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "channel",
|
||||||
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Source" />,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-sm text-muted-foreground truncate max-w-[160px] block">
|
||||||
|
{row.original.sourceChannel.title}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
accessorFn: (row) => row.sourceChannel.title,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "createdAt",
|
||||||
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Skipped" />,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{new Date(row.original.createdAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8"
|
||||||
|
onClick={() => onRetry(row.original)}
|
||||||
|
title="Retry this package"
|
||||||
|
>
|
||||||
|
<RotateCw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
enableHiding: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
77
src/app/(app)/stls/_components/skipped-packages-tab.tsx
Normal file
77
src/app/(app)/stls/_components/skipped-packages-tab.tsx
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useTransition } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { RotateCw } from "lucide-react";
|
||||||
|
import { useDataTable } from "@/hooks/use-data-table";
|
||||||
|
import { getSkippedColumns, type SkippedRow } from "./skipped-columns";
|
||||||
|
import { DataTable } from "@/components/shared/data-table";
|
||||||
|
import { DataTablePagination } from "@/components/shared/data-table-pagination";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { retrySkippedPackageAction, retryAllSkippedPackagesAction } from "../actions";
|
||||||
|
|
||||||
|
interface SkippedPackagesTabProps {
|
||||||
|
data: SkippedRow[];
|
||||||
|
pageCount: number;
|
||||||
|
totalCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SkippedPackagesTab({
|
||||||
|
data,
|
||||||
|
pageCount,
|
||||||
|
totalCount,
|
||||||
|
}: SkippedPackagesTabProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
|
||||||
|
const columns = getSkippedColumns({
|
||||||
|
onRetry: (row) => {
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await retrySkippedPackageAction(row.id);
|
||||||
|
if (result.success) {
|
||||||
|
toast.success(`"${row.fileName}" queued for retry`);
|
||||||
|
router.refresh();
|
||||||
|
} else {
|
||||||
|
toast.error(result.error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { table } = useDataTable({ data, columns, pageCount });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{totalCount > 0 && (
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="gap-1.5"
|
||||||
|
disabled={isPending}
|
||||||
|
onClick={() => {
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await retryAllSkippedPackagesAction();
|
||||||
|
if (result.success) {
|
||||||
|
toast.success(`All ${totalCount} skipped packages queued for retry`);
|
||||||
|
router.refresh();
|
||||||
|
} else {
|
||||||
|
toast.error(result.error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RotateCw className="h-3.5 w-3.5" />
|
||||||
|
Retry All ({totalCount})
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<DataTable
|
||||||
|
table={table}
|
||||||
|
emptyMessage="No skipped or failed packages."
|
||||||
|
/>
|
||||||
|
<DataTablePagination table={table} totalCount={totalCount} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user