69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Plus, UploadCloud } from 'lucide-react';
|
|
|
|
import { PageHeader } from '@/components/page-header';
|
|
import { Button } from '@/components/ui/button';
|
|
import type { UploadListItem } from '@/types';
|
|
|
|
import { CreateUploadDialog } from './components/CreateUploadDialog';
|
|
import { useUploadListColumns } from './components/UploadListColumns';
|
|
import { UploadTable } from './components/UploadTable';
|
|
import { VideoPreviewDialog } from './components/VideoPreviewDialog';
|
|
import { useUploadFilters } from './hooks/useUploadFilters';
|
|
import { useUploadListEvents } from './hooks/useUploadListEvents';
|
|
import { useUploadsQuery } from './hooks/useUploadQueries';
|
|
|
|
export default function UploadPage() {
|
|
const { skip, setSkip, limit, setLimit } = useUploadFilters();
|
|
const uploadsQuery = useUploadsQuery({ skip, limit });
|
|
useUploadListEvents();
|
|
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
|
const [videoUpload, setVideoUpload] = useState<UploadListItem | null>(null);
|
|
|
|
const uploads = uploadsQuery.data?.items ?? [];
|
|
const total = uploadsQuery.data?.total ?? 0;
|
|
const isLoading = uploadsQuery.isLoading;
|
|
|
|
const columns = useUploadListColumns(setVideoUpload);
|
|
|
|
return (
|
|
<>
|
|
<main className="space-y-5">
|
|
<PageHeader
|
|
title="Uploads"
|
|
description="Track uploaded road inspection videos, processing progress, and results."
|
|
icon={UploadCloud}
|
|
actions={
|
|
<Button onClick={() => setIsCreateOpen(true)} size="sm">
|
|
<Plus className="size-4" />
|
|
Upload New
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<UploadTable
|
|
columns={columns}
|
|
uploads={uploads}
|
|
isLoading={isLoading}
|
|
skip={skip}
|
|
limit={limit}
|
|
total={total}
|
|
onPageChange={setSkip}
|
|
onLimitChange={setLimit}
|
|
/>
|
|
</main>
|
|
|
|
<CreateUploadDialog open={isCreateOpen} onOpenChange={setIsCreateOpen} />
|
|
<VideoPreviewDialog
|
|
upload={videoUpload}
|
|
open={Boolean(videoUpload)}
|
|
onOpenChange={(open) => {
|
|
if (!open) setVideoUpload(null);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|