feat: add My Uploads listing with card and table views

2026-06-18 21:22:44 +05:30
parent dff9e2222f
commit a18fff4d6f
28 changed files with 1060 additions and 127 deletions
--- a/src/app/(modules)/upload/components/UploadColumns.tsx
+++ b/src/app/(modules)/upload/components/UploadColumns.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { UploadActionsMenu } from './UploadActionsMenu';
+import { UploadThumbnail } from './UploadThumbnail';
+import { formatUploadedAt, getUploadStatus } from './uploadUtils';
+import { Badge } from '@/components/ui/badge';
+import type { UploadVideo } from '@/types';
+
+interface UseUploadColumnsProps {
+  onViewDetails: (upload: UploadVideo) => void;
+  onViewProcessedVideo: (upload: UploadVideo) => void;
+}
+
+export function useUploadColumns({
+  onViewDetails,
+  onViewProcessedVideo,
+}: UseUploadColumnsProps) {
+  return useMemo<ColumnDef<UploadVideo>[]>(
+    () => [
+      {
+        id: 'thumbnail',
+        header: 'Thumbnail',
+        size: 140,
+        minSize: 120,
+        enableSorting: false,
+        meta: { disableTruncate: true },
+        cell: ({ row }) => (
+          <UploadThumbnail upload={row.original} className="w-28" />
+        ),
+      },
+      {
+        accessorKey: 'filename',
+        header: 'Filename',
+        cell: ({ row }) => (
+          <span className="font-medium">{row.original.filename}</span>
+        ),
+      },
+      {
+        id: 'status',
+        header: 'Status',
+        size: 130,
+        cell: ({ row }) => (
+          <Badge className="rounded-full">
+            {getUploadStatus(row.original)}
+          </Badge>
+        ),
+      },
+      {
+        accessorKey: 'uploaded_at',
+        header: 'Uploaded At',
+        cell: ({ row }) => formatUploadedAt(row.original.uploaded_at),
+      },
+      {
+        id: 'actions',
+        header: () => <span className="sr-only">Actions</span>,
+        size: 56,
+        minSize: 56,
+        enableSorting: false,
+        enableHiding: false,
+        meta: { disableTruncate: true },
+        cell: ({ row }) => (
+          <div className="flex justify-center">
+            <UploadActionsMenu
+              upload={row.original}
+              onViewDetails={onViewDetails}
+              onViewProcessedVideo={onViewProcessedVideo}
+            />
+          </div>
+        ),
+      },
+    ],
+    [onViewDetails, onViewProcessedVideo],
+  );
+}