Location
- Select the project hierarchy for this analysis job. + Select the project hierarchy for this upload.
+
+
+
+
+ No uploads found
++ Upload your first road inspection video. +
+
+ {isLoading
+ ? skeletonItems.map((_, index) => (
+ onOpenUpload(upload)}
+ >
+
+
+
+ ))}
+
+
+
+
+
+
+ + {upload.filename} +
++ Uploaded {formatUploadedAt(upload.uploaded_at)} +
+
+
+ ),
+ },
+ ],
+ [onViewDetails, onViewProcessedVideo],
+ );
+}
diff --git a/src/app/(modules)/upload/components/UploadDetailsDialog.tsx b/src/app/(modules)/upload/components/UploadDetailsDialog.tsx
new file mode 100644
index 0000000..f67e51d
--- /dev/null
+++ b/src/app/(modules)/upload/components/UploadDetailsDialog.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip';
+import type { UploadVideo } from '@/types';
+
+import { formatUploadedAt, getUploadStatus } from './uploadUtils';
+
+interface UploadDetailsDialogProps {
+ upload: UploadVideo | null;
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+export function UploadDetailsDialog({
+ upload,
+ open,
+ onOpenChange,
+}: UploadDetailsDialogProps) {
+ const title = upload?.filename ?? 'Upload Details';
+
+ return (
+
+ );
+}
diff --git a/src/app/(modules)/upload/components/UploadSettingsSection.tsx b/src/app/(modules)/upload/components/UploadSettingsSection.tsx
index 47afe12..a076234 100644
--- a/src/app/(modules)/upload/components/UploadSettingsSection.tsx
+++ b/src/app/(modules)/upload/components/UploadSettingsSection.tsx
@@ -1,5 +1,7 @@
'use client';
+import type { RefObject } from 'react';
+
import { FormField, SelectPopover } from '@/components/form';
const options = [
@@ -14,12 +16,14 @@ interface UploadSettingsSectionProps {
value: string;
onValueChange: (value: string) => void;
disabled?: boolean;
+ portalContainer?: RefObject
-
+
[];
+ uploads: UploadVideo[];
+ isLoading: boolean;
+ skip: number;
+ limit: number;
+ total: number;
+ onPageChange: (skip: number) => void;
+ onLimitChange: (limit: number) => void;
+ onRowClick: (upload: UploadVideo) => void;
+}
+
+export function UploadTable({
+ columns,
+ uploads,
+ isLoading,
+ skip,
+ limit,
+ total,
+ onPageChange,
+ onLimitChange,
+ onRowClick,
+}: UploadTableProps) {
+ return (
+ ('card');
+
+ const setLimit = (nextLimit: number) => {
+ setLimitValue(nextLimit);
+ setSkip(0);
+ };
+
+ return {
+ skip,
+ setSkip,
+ limit,
+ setLimit,
+ viewMode,
+ setViewMode,
+ };
+}
diff --git a/src/app/(modules)/upload/hooks/useUploadQueries.ts b/src/app/(modules)/upload/hooks/useUploadQueries.ts
new file mode 100644
index 0000000..e4876ee
--- /dev/null
+++ b/src/app/(modules)/upload/hooks/useUploadQueries.ts
@@ -0,0 +1,54 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import { videoService } from '@/services/api';
+import type { PaginationParams } from '@/types';
+
+export const uploadKeys = {
+ all: ['uploads'] as const,
+ lists: () => [...uploadKeys.all, 'list'] as const,
+ list: (params: PaginationParams) => [...uploadKeys.lists(), params] as const,
+};
+
+interface UseMyUploadsQueryParams {
+ skip: number;
+ limit: number;
+}
+
+function buildUploadListParams({
+ skip,
+ limit,
+}: UseMyUploadsQueryParams): PaginationParams {
+ return {
+ skip,
+ limit,
+ };
+}
+
+export function useMyUploadsQuery(params: UseMyUploadsQueryParams) {
+ const { skip, limit } = params;
+ const listParams = useMemo(
+ () => buildUploadListParams({ skip, limit }),
+ [limit, skip],
+ );
+
+ return useQuery({
+ queryKey: uploadKeys.list(listParams),
+ queryFn: () => videoService.getMyUploads(listParams),
+ });
+}
+
+export function useCreateUploadMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (formData: FormData) => videoService.uploadVideo(formData),
+ onSuccess: () => {
+ toast.success('Upload created');
+ queryClient.invalidateQueries({ queryKey: uploadKeys.all });
+ },
+ });
+}
diff --git a/src/app/(modules)/upload/page.tsx b/src/app/(modules)/upload/page.tsx
index 6d76c5e..11ac0e1 100644
--- a/src/app/(modules)/upload/page.tsx
+++ b/src/app/(modules)/upload/page.tsx
@@ -1,134 +1,123 @@
'use client';
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Loader2, TrendingUp, UploadCloud } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { Plus, UploadCloud } from 'lucide-react';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { videoService } from '@/services/api';
-import type { SessionContext } from '@/types';
-import { ROUTES } from '@/utils/routes';
+import type { UploadVideo } from '@/types';
-import { InputDataSection } from './components/InputDataSection';
-import { LocationSection } from './components/LocationSection';
-import { UploadSettingsSection } from './components/UploadSettingsSection';
+import { CreateUploadDialog } from './components/CreateUploadDialog';
+import { ProcessedVideoDialog } from './components/ProcessedVideoDialog';
+import { UploadCardGrid } from './components/UploadCardGrid';
+import { useUploadColumns } from './components/UploadColumns';
+import { UploadDetailsDialog } from './components/UploadDetailsDialog';
+import { UploadTable } from './components/UploadTable';
+import { ViewSwitcher } from './components/ViewSwitcher';
+import { useUploadFilters } from './hooks/useUploadFilters';
+import { useMyUploadsQuery } from './hooks/useUploadQueries';
export default function UploadPage() {
- const router = useRouter();
- const [session, setSession] = useState(null);
- const [videoFile, setVideoFile] = useState(null);
- const [gpsFile, setGpsFile] = useState(null);
- const [analysisMethod, setAnalysisMethod] = useState('yolo');
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [error, setError] = useState(null);
-
- const isLocationComplete = Boolean(
- session?.projectId && session.packageId && session.chainageId,
- );
- const canSubmit = Boolean(
- isLocationComplete && videoFile && gpsFile && analysisMethod,
+ const { skip, setSkip, limit, setLimit, viewMode, setViewMode } =
+ useUploadFilters();
+ const uploadsQuery = useMyUploadsQuery({ skip, limit });
+ const [isCreateOpen, setIsCreateOpen] = useState(false);
+ const [detailsUpload, setDetailsUpload] = useState(null);
+ const [processedUpload, setProcessedUpload] = useState(
+ null,
);
- const handleSubmit = async () => {
- if (!session?.chainageId || !videoFile || !gpsFile) {
- setError('Complete location and input data before upload.');
- return;
- }
+ const uploads = uploadsQuery.data?.items ?? [];
+ const total = uploadsQuery.data?.total ?? 0;
+ const isLoading = uploadsQuery.isLoading;
- const formData = new FormData();
- formData.append('file', videoFile);
- formData.append('detection_mode', analysisMethod);
- formData.append('chainage_id', session.chainageId);
- formData.append('json_file', gpsFile);
+ const handleViewDetails = useCallback((upload: UploadVideo) => {
+ setDetailsUpload(upload);
+ }, []);
- setIsSubmitting(true);
- setError(null);
+ const handleViewProcessedVideo = useCallback((upload: UploadVideo) => {
+ setProcessedUpload(upload);
+ }, []);
- try {
- await videoService.uploadVideo(formData);
- router.push(ROUTES.TICKET);
- } catch (err) {
- setIsSubmitting(false);
- if (err instanceof TypeError && err.message === 'Failed to fetch') {
- setError('Cannot connect to server. Please check if backend is running.');
+ const handleOpenUpload = useCallback(
+ (upload: UploadVideo) => {
+ if (upload.processed_video_url) {
+ handleViewProcessedVideo(upload);
return;
}
- setError(err instanceof Error ? err.message : 'Upload failed');
- }
- };
+ handleViewDetails(upload);
+ },
+ [handleViewDetails, handleViewProcessedVideo],
+ );
+
+ const columns = useUploadColumns({
+ onViewDetails: handleViewDetails,
+ onViewProcessedVideo: handleViewProcessedVideo,
+ });
return (
- setIsCreateOpen(true)}
+ onOpenUpload={handleOpenUpload}
+ onViewDetails={handleViewDetails}
+ onViewProcessedVideo={handleViewProcessedVideo}
+ />
+ ) : (
+ {
+ if (!open) setDetailsUpload(null);
+ }}
+ />
+ {
+ if (!open) setProcessedUpload(null);
+ }}
+ />
+
);
}
diff --git a/src/components/data-table/index.tsx b/src/components/data-table/index.tsx
index d51379f..0ffe9bb 100644
--- a/src/components/data-table/index.tsx
+++ b/src/components/data-table/index.tsx
@@ -73,6 +73,7 @@ export interface DataTableProps {
sorting?: SortingState;
onSortingChange?: (sorting: SortingState) => void;
enableColumnControls?: boolean;
+ onRowClick?: (row: TData) => void;
/** Minimum width (px) for every column unless overridden in the column def. */
minColumnSize?: number;
}
@@ -111,6 +112,7 @@ function DataTableContent({
emptyTitle = 'No results found.',
emptyDescription = 'Try adjusting your filters or search terms.',
pagination,
+ onRowClick,
sorting: controlledSorting,
onSortingChange,
enableColumnControls = true,
@@ -281,6 +283,8 @@ function DataTableContent({
onRowClick?.(row.original)}
+ className={cn(onRowClick && 'cursor-pointer')}
>
{row.getVisibleCells().map((cell) => {
const truncate = shouldTruncateCell(cell.column);
diff --git a/src/components/form/SelectPopover.tsx b/src/components/form/SelectPopover.tsx
index a97eb8d..52ac531 100644
--- a/src/components/form/SelectPopover.tsx
+++ b/src/components/form/SelectPopover.tsx
@@ -1,5 +1,6 @@
'use client';
+import type { RefObject } from 'react';
import { useMemo, useState } from 'react';
import { Check, ChevronDown } from 'lucide-react';
@@ -27,6 +28,7 @@ interface SelectPopoverProps {
emptyMessage?: string;
disabled?: boolean;
align?: 'start' | 'center' | 'end';
+ portalContainer?: RefObject;
}
export function SelectPopover({
@@ -38,6 +40,7 @@ export function SelectPopover({
emptyMessage = 'No options found.',
disabled = false,
align = 'start',
+ portalContainer,
}: SelectPopoverProps) {
const [open, setOpen] = useState(false);
const [search, setSearch] = useState('');
@@ -70,7 +73,11 @@ export function SelectPopover({
+
+
+ );
+}
diff --git a/src/app/(modules)/upload/components/ViewSwitcher.tsx b/src/app/(modules)/upload/components/ViewSwitcher.tsx
new file mode 100644
index 0000000..3e277df
--- /dev/null
+++ b/src/app/(modules)/upload/components/ViewSwitcher.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { Grid2X2, Table2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+import type { UploadViewMode } from '../hooks/useUploadFilters';
+
+interface ViewSwitcherProps {
+ value: UploadViewMode;
+ onValueChange: (value: UploadViewMode) => void;
+}
+
+export function ViewSwitcher({ value, onValueChange }: ViewSwitcherProps) {
+ const items: Array<{
+ value: UploadViewMode;
+ label: string;
+ icon: React.ReactNode;
+ }> = [
+ { value: 'card', label: 'Card View', icon:
+ {thumbnailUrl ? (
+ 
+ ) : (
+
+
+
+ )}
+
+ {items.map((item) => (
+
+ ))}
+
+ );
+}
+
diff --git a/src/app/(modules)/upload/components/uploadUtils.ts b/src/app/(modules)/upload/components/uploadUtils.ts
new file mode 100644
index 0000000..3106fa6
--- /dev/null
+++ b/src/app/(modules)/upload/components/uploadUtils.ts
@@ -0,0 +1,29 @@
+import { ENV_CONSTANT } from '@/constants/secrect.constant';
+import type { UploadVideo } from '@/types';
+
+export function getUploadStatus(upload: UploadVideo) {
+ return upload.status?.status || 'unknown';
+}
+
+export function formatUploadedAt(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return '-';
+
+ return new Intl.DateTimeFormat('en-IN', {
+ day: '2-digit',
+ month: 'short',
+ year: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+ }).format(date);
+}
+
+export function resolveMediaUrl(url?: string | null) {
+ if (!url) return null;
+ if (/^https?:\/\//i.test(url)) return url;
+
+ const baseUrl = ENV_CONSTANT.BASE_API_URL?.replace(/\/$/, '');
+ const path = url.startsWith('/') ? url : `/${url}`;
+ return baseUrl ? `${baseUrl}${path}` : path;
+}
+
diff --git a/src/app/(modules)/upload/hooks/useUploadFilters.ts b/src/app/(modules)/upload/hooks/useUploadFilters.ts
new file mode 100644
index 0000000..6f89585
--- /dev/null
+++ b/src/app/(modules)/upload/hooks/useUploadFilters.ts
@@ -0,0 +1,27 @@
+'use client';
+
+import { useState } from 'react';
+
+export type UploadViewMode = 'card' | 'table';
+
+const DEFAULT_LIMIT = 20;
+
+export function useUploadFilters() {
+ const [skip, setSkip] = useState(0);
+ const [limit, setLimitValue] = useState(DEFAULT_LIMIT);
+ const [viewMode, setViewMode] = useState
-
-
- {
- setVideoFile(file);
- setError(null);
- }}
- onGpsFileChange={(file) => {
- setGpsFile(file);
- setError(null);
- }}
- disabled={isSubmitting}
- />
-
-
-
-
+ }
+ />
+
+
- {error}
-
- ) : null}
-
-
-
-
-
+
+
+ {viewMode === 'card' ? (
+
) {
+}: React.ComponentProps & {
+ container?:
+ | React.ComponentProps['container']
+ | React.RefObject;
+}) {
+ const portalContainer =
+ container && 'current' in container ? container.current : container;
+
return (
-
+
`/biz/api/v1/results/${id}/completed`,
},
} as const;
diff --git a/src/services/api/video.service.ts b/src/services/api/video.service.ts
index 1a86bd0..eca55b0 100644
--- a/src/services/api/video.service.ts
+++ b/src/services/api/video.service.ts
@@ -1,11 +1,26 @@
import axiosClient from '../axios/axios';
import { API_ROUTES } from '@/constants/apiRoutes';
-import { CompletedVideoResult } from '@/types';
+import { CompletedVideoResult, PaginationParams, UploadVideosResponse } from '@/types';
/**
* Video Service
*/
export const videoService = {
+ getMyUploads: async (
+ params?: PaginationParams,
+ ): Promise => {
+ const response = await axiosClient.get(
+ API_ROUTES.VIDEOS.MY_UPLOADS,
+ {
+ params: {
+ skip: params?.skip ?? 0,
+ limit: params?.limit ?? 20,
+ },
+ },
+ );
+ return response.data;
+ },
+
/**
* Upload a video for processing
*/
diff --git a/src/types/index.ts b/src/types/index.ts
index d53e76b..4a22a13 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -5,6 +5,7 @@ export * from './chainage';
export * from './detection';
export * from './analysis';
export * from './session';
+export * from './upload';
export * from './auth.type';
export * from './permission';
export * from './role';
diff --git a/src/types/upload.ts b/src/types/upload.ts
new file mode 100644
index 0000000..7c489e9
--- /dev/null
+++ b/src/types/upload.ts
@@ -0,0 +1,25 @@
+export interface UploadVideoStatus {
+ status: string;
+ progress: number;
+}
+
+export interface UploadVideo {
+ video_id: string;
+ filename: string;
+ chainage_id: string;
+ detection_mode: string;
+ speed_kmh?: number | null;
+ thumbnail?: string | null;
+ uploaded_at: string;
+ uploaded_by_user_id?: number | null;
+ uploaded_by_email?: string | null;
+ processed_video_path?: string | null;
+ processed_video_url?: string | null;
+ status: UploadVideoStatus;
+}
+
+export interface UploadVideosResponse {
+ items: UploadVideo[];
+ total: number;
+}
+