refactor(upload): replace upload card views with list table and addition details in table

src/app/(modules)/upload/page.tsx

@@ -1,62 +1,37 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { Plus, UploadCloud } from 'lucide-react';
 
 import { PageHeader } from '@/components/page-header';
 import { Button } from '@/components/ui/button';
-import type { UploadVideo } from '@/types';
+import type { UploadListItem } from '@/types';
 
 import { CreateUploadDialog } from './components/CreateUploadDialog';
-import { UploadCardGrid } from './components/UploadCardGrid';
-import { useUploadColumns } from './components/UploadColumns';
-import { UploadDetailsDialog } from './components/UploadDetailsDialog';
+import { useUploadListColumns } from './components/UploadListColumns';
 import { UploadTable } from './components/UploadTable';
 import { UploadVideoDialog } from './components/UploadVideoDialog';
-import { ViewSwitcher } from './components/ViewSwitcher';
 import { useUploadFilters } from './hooks/useUploadFilters';
-import { useMyUploadsQuery } from './hooks/useUploadQueries';
+import { useUploadsQuery } from './hooks/useUploadQueries';
 
 export default function UploadPage() {
-  const { skip, setSkip, limit, setLimit, viewMode, setViewMode } =
-    useUploadFilters();
-  const uploadsQuery = useMyUploadsQuery({ skip, limit });
+  const { skip, setSkip, limit, setLimit } = useUploadFilters();
+  const uploadsQuery = useUploadsQuery({ skip, limit });
   const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [detailsUpload, setDetailsUpload] = useState<UploadVideo | null>(null);
-  const [videoUpload, setVideoUpload] = useState<UploadVideo | null>(null);
+  const [videoUpload, setVideoUpload] = useState<UploadListItem | null>(null);
 
   const uploads = uploadsQuery.data?.items ?? [];
   const total = uploadsQuery.data?.total ?? 0;
   const isLoading = uploadsQuery.isLoading;
 
-  const handleViewDetails = useCallback((upload: UploadVideo) => {
-    setDetailsUpload(upload);
-  }, []);
-
-  const handleViewUploadVideo = useCallback((upload: UploadVideo) => {
-    setVideoUpload(upload);
-  }, []);
-
-  const handleOpenUpload = useCallback(
-    (upload: UploadVideo) => {
-      if (upload.video_url) {
-        handleViewUploadVideo(upload);
-      }
-    },
-    [handleViewUploadVideo],
-  );
-
-  const columns = useUploadColumns({
-    onViewVideo: handleViewUploadVideo,
-    onViewDetails: handleViewDetails,
-  });
+  const columns = useUploadListColumns(setVideoUpload);
 
   return (
     <>
       <main className="space-y-5">
         <PageHeader
-          title="My Uploads"
-          description="View and manage uploaded road inspection videos."
+          title="Uploads"
+          description="Track uploaded road inspection videos, processing progress, and results."
           icon={UploadCloud}
           actions={
             <Button onClick={() => setIsCreateOpen(true)} size="sm">
@@ -66,47 +41,19 @@ export default function UploadPage() {
           }
         />
 
-        <div className="flex justify-end">
-          <ViewSwitcher value={viewMode} onValueChange={setViewMode} />
-        </div>
-
-        {viewMode === 'card' ? (
-          <UploadCardGrid
-            uploads={uploads}
-            isLoading={isLoading}
-            skip={skip}
-            limit={limit}
-            total={total}
-            onPageChange={setSkip}
-            onLimitChange={setLimit}
-            onUploadNew={() => setIsCreateOpen(true)}
-            onOpenUpload={handleOpenUpload}
-            onViewVideo={handleViewUploadVideo}
-            onViewDetails={handleViewDetails}
-          />
-        ) : (
-          <UploadTable
-            columns={columns}
-            uploads={uploads}
-            isLoading={isLoading}
-            skip={skip}
-            limit={limit}
-            total={total}
-            onPageChange={setSkip}
-            onLimitChange={setLimit}
-            onRowClick={handleOpenUpload}
-          />
-        )}
+        <UploadTable
+          columns={columns}
+          uploads={uploads}
+          isLoading={isLoading}
+          skip={skip}
+          limit={limit}
+          total={total}
+          onPageChange={setSkip}
+          onLimitChange={setLimit}
+        />
       </main>
 
       <CreateUploadDialog open={isCreateOpen} onOpenChange={setIsCreateOpen} />
-      <UploadDetailsDialog
-        upload={detailsUpload}
-        open={Boolean(detailsUpload)}
-        onOpenChange={(open) => {
-          if (!open) setDetailsUpload(null);
-        }}
-      />
       <UploadVideoDialog
         upload={videoUpload}
         open={Boolean(videoUpload)}