refactor: modularize upload page into location, input, and settings sections

src/app/(modules)/upload/components/AnalysisSettingsSection.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { FormField, SelectPopover } from '@/components/form';
+
+const options = [
+  { value: 'yolo', label: 'Road Defect Detection' },
+  { value: 'yoloe', label: 'YOLOE Open-Vocabulary Detection' },
+  { value: 'yoloe_trained_vl', label: 'YOLOE With Vision Language Model' },
+  { value: 'culvert_detection', label: 'Culvert Detection' },
+  { value: 'combined', label: 'Road Defect Detection with vl' },
+] as const;
+
+interface AnalysisSettingsSectionProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+export function AnalysisSettingsSection({
+  value,
+  onValueChange,
+  disabled = false,
+}: AnalysisSettingsSectionProps) {
+  return (
+    <section className="space-y-3">
+      <div>
+        <h2 className="text-sm font-semibold text-foreground">
+          Analysis Settings
+        </h2>
+        <p className="text-xs text-muted-foreground">
+          Select the AI model workflow for this job.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+        <FormField id="analysis-method" label="Analysis Method">
+          <SelectPopover
+            options={options}
+            value={value}
+            onValueChange={onValueChange}
+            disabled={disabled}
+            placeholder="Select method"
+            searchPlaceholder="Search methods"
+            emptyMessage="No methods found."
+          />
+        </FormField>
+      </div>
+    </section>
+  );
+}

src/app/(modules)/upload/components/InputDataSection.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { UploadFileDropzone } from './UploadFileDropzone';
+
+interface InputDataSectionProps {
+  videoFile: File | null;
+  gpsFile: File | null;
+  onVideoFileChange: (file: File | null) => void;
+  onGpsFileChange: (file: File | null) => void;
+  disabled?: boolean;
+}
+
+export function InputDataSection({
+  videoFile,
+  gpsFile,
+  onVideoFileChange,
+  onGpsFileChange,
+  disabled = false,
+}: InputDataSectionProps) {
+  return (
+    <section className="space-y-3">
+      <div>
+        <h2 className="text-sm font-semibold text-foreground">Input Data</h2>
+        <p className="text-xs text-muted-foreground">
+          Attach the road video and GPS telemetry for processing.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+        <UploadFileDropzone
+          title="Drop video here or browse"
+          description="Accepted formats: MP4, MOV, AVI, MKV"
+          accept="video/*"
+          file={videoFile}
+          onFileChange={onVideoFileChange}
+          disabled={disabled}
+        />
+        <UploadFileDropzone
+          title="Drop GPS JSON here or browse"
+          description="Accepted format: JSON telemetry file"
+          accept=".json,application/json"
+          file={gpsFile}
+          onFileChange={onGpsFileChange}
+          disabled={disabled}
+        />
+      </div>
+    </section>
+  );
+}
+

src/app/(modules)/upload/components/LocationSection.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { FormField } from '@/components/form';
+import { PackageSelect } from '@/components/lookups/PackageSelect';
+import { ProjectSelect } from '@/components/lookups/ProjectSelect';
+import { SegmentSelect } from '@/components/lookups/SegmentSelect';
+import { packageService, projectService, chainageService } from '@/services/api';
+import type { Chainage, Package as PackageType, Project, SessionContext } from '@/types';
+
+interface LocationSectionProps {
+  value: SessionContext | null;
+  onChange: (session: SessionContext | null) => void;
+  disabled?: boolean;
+}
+
+export function LocationSection({
+  value,
+  onChange,
+  disabled = false,
+}: LocationSectionProps) {
+  const [projectId, setProjectId] = useState(value?.projectId ?? '');
+  const [packageId, setPackageId] = useState(value?.packageId ?? '');
+  const [segmentId, setSegmentId] = useState(value?.chainageId ?? '');
+  const [project, setProject] = useState<Project | null>(null);
+  const [selectedPackage, setSelectedPackage] = useState<PackageType | null>(
+    null,
+  );
+  const [segment, setSegment] = useState<Chainage | null>(null);
+
+  const latestProjectIdRef = useRef('');
+  const latestPackageIdRef = useRef('');
+  const latestSegmentIdRef = useRef('');
+
+  useEffect(() => {
+    if (project && selectedPackage && segment) {
+      onChange({
+        projectId: project.id,
+        projectName: project.name,
+        packageId: selectedPackage.id,
+        packageName: selectedPackage.name,
+        chainageId: segment.id,
+        chainageName: segment.segment_name,
+        chainageDirection: segment.direction,
+      });
+      return;
+    }
+
+    onChange(null);
+  }, [onChange, project, selectedPackage, segment]);
+
+  const handleProjectChange = useCallback((nextProjectId: string) => {
+    latestProjectIdRef.current = nextProjectId;
+    latestPackageIdRef.current = '';
+    latestSegmentIdRef.current = '';
+    setProjectId(nextProjectId);
+    setPackageId('');
+    setSegmentId('');
+    setProject(null);
+    setSelectedPackage(null);
+    setSegment(null);
+
+    if (!nextProjectId) return;
+
+    void projectService.getProjectById(nextProjectId).then((nextProject) => {
+      if (latestProjectIdRef.current === nextProjectId) {
+        setProject(nextProject);
+      }
+    });
+  }, []);
+
+  const handlePackageChange = useCallback((nextPackageId: string) => {
+    latestPackageIdRef.current = nextPackageId;
+    latestSegmentIdRef.current = '';
+    setPackageId(nextPackageId);
+    setSegmentId('');
+    setSelectedPackage(null);
+    setSegment(null);
+
+    if (!nextPackageId) return;
+
+    void packageService.getPackageById(nextPackageId).then((nextPackage) => {
+      if (latestPackageIdRef.current === nextPackageId) {
+        setSelectedPackage(nextPackage);
+      }
+    });
+  }, []);
+
+  const handleSegmentChange = useCallback((nextSegmentId: string) => {
+    latestSegmentIdRef.current = nextSegmentId;
+    setSegmentId(nextSegmentId);
+    setSegment(null);
+
+    if (!nextSegmentId) return;
+
+    void chainageService.getChainageById(nextSegmentId).then((nextSegment) => {
+      if (latestSegmentIdRef.current === nextSegmentId) {
+        setSegment(nextSegment);
+      }
+    });
+  }, []);
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h2 className="text-sm font-semibold text-foreground">Location</h2>
+        <p className="text-xs text-muted-foreground">
+          Select the project hierarchy for this analysis job.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+        <FormField label="Project" required>
+          <ProjectSelect
+            value={projectId}
+            onValueChange={handleProjectChange}
+            disabled={disabled}
+          />
+        </FormField>
+
+        <FormField label="Package" required>
+          <PackageSelect
+            value={packageId}
+            onValueChange={handlePackageChange}
+            projectId={projectId}
+            enabled={Boolean(projectId)}
+            disabled={disabled || !projectId}
+          />
+        </FormField>
+
+        <FormField label="Segment" required>
+          <SegmentSelect
+            value={segmentId}
+            onValueChange={handleSegmentChange}
+            packageId={packageId}
+            enabled={Boolean(packageId)}
+            disabled={disabled || !packageId}
+          />
+        </FormField>
+      </div>
+
+    </section>
+  );
+}

src/app/(modules)/upload/components/UploadFileDropzone.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { FileCheck2, UploadCloud } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface UploadFileDropzoneProps {
+  title: string;
+  description: string;
+  accept: string;
+  file: File | null;
+  onFileChange: (file: File | null) => void;
+  disabled?: boolean;
+}
+
+export function UploadFileDropzone({
+  title,
+  description,
+  accept,
+  file,
+  onFileChange,
+  disabled = false,
+}: UploadFileDropzoneProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFiles = (files: FileList | null) => {
+    if (disabled) return;
+    onFileChange(files?.[0] ?? null);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled}
+      onClick={() => {
+        if (!disabled) inputRef.current?.click();
+      }}
+      onKeyDown={(event) => {
+        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+          event.preventDefault();
+          inputRef.current?.click();
+        }
+      }}
+      onDragOver={(event) => {
+        event.preventDefault();
+        if (!disabled) setIsDragging(true);
+      }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={(event) => {
+        event.preventDefault();
+        setIsDragging(false);
+        handleFiles(event.dataTransfer.files);
+      }}
+      className={cn(
+        'group flex min-h-32 cursor-pointer flex-col justify-between rounded-md border border-dashed bg-card/60 p-4 transition-colors',
+        'hover:border-primary/60 hover:bg-secondary/40',
+        isDragging && 'border-primary bg-secondary/60',
+        disabled && 'pointer-events-none cursor-not-allowed opacity-60',
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className="hidden"
+        onChange={(event) => handleFiles(event.target.files)}
+        disabled={disabled}
+      />
+
+      <div className="space-y-3">
+        <div className="flex size-9 items-center justify-center rounded-md border bg-background">
+          <UploadCloud className="size-4 text-muted-foreground" />
+        </div>
+        <div>
+          <p className="text-sm font-medium text-foreground">{title}</p>
+          <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+        </div>
+      </div>
+
+      {file ? (
+        <Badge variant="secondary" className="mt-4 max-w-full justify-start">
+          <FileCheck2 className="size-3" />
+          <span className="truncate">{file.name}</span>
+        </Badge>
+      ) : null}
+    </div>
+  );
+}
+

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

@@ -1,256 +1,134 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { FormField } from '@/components/form';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Loader2, TrendingUp } from 'lucide-react';
+import { Loader2, Play, TrendingUp } 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 { SessionContext } from '@/types';
-import { ProjectSelectionSection } from '@/components/project-selection-section';
-import { Reveal } from '@/components/ui/reveal';
-import { cn } from '@/lib/utils';
+import type { SessionContext } from '@/types';
 import { ROUTES } from '@/utils/routes';
 
-const DETECTION_METHODS = [
-  { value: 'yolo', label: 'Road Defect Detection' },
-  // { value: 'yolo_vl', label: 'YOLO with Vision-Language Model' },
-  // { value: 'sam3', label: 'OpenAI SAM 3 Segmentation Model' },
-  { value: 'yoloe', label: 'YOLOE Open-Vocabulary Detection' },
-  { value: 'yoloe_trained_vl', label: 'YOLOE With Vision Language Model' },
-  { value: 'culvert_detection', label: 'Culvert Detection' },
-  { value: 'combined', label: 'Road Defect Detection with vl' },
-  // { value: 'gemini_video', label: 'Gemini AI Analysis' },
-] as const;
+import { AnalysisSettingsSection } from './components/AnalysisSettingsSection';
+import { InputDataSection } from './components/InputDataSection';
+import { LocationSection } from './components/LocationSection';
 
 export default function UploadPage() {
   const router = useRouter();
   const [session, setSession] = useState<SessionContext | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Form states
-  const [file, setFile] = useState<File | null>(null);
-  const [jsonFile, setJsonFile] = useState<File | null>(null);
-  const [selectMethod, setSelectMethod] = useState('yolo');
-
-  // Upload states
-  const [uploading, setUploading] = useState(false);
+  const [videoFile, setVideoFile] = useState<File | null>(null);
+  const [gpsFile, setGpsFile] = useState<File | null>(null);
+  const [analysisMethod, setAnalysisMethod] = useState('yolo');
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Load session on mount
-  useEffect(() => {
-    // We don't load session on mount for the upload page to ensure
-    // project details are filled manually as requested.
-    setIsLoading(false);
-  }, []);
-
-  const handleSelectionChange = useCallback(
-    (selectedSession: SessionContext | null) => {
-      setSession(selectedSession);
-    },
-    [],
+  const isLocationComplete = Boolean(
+    session?.projectId && session.packageId && session.chainageId,
+  );
+  const canSubmit = Boolean(
+    isLocationComplete && videoFile && gpsFile && analysisMethod,
   );
 
-  const handleUpload = async () => {
-    if (!file) {
-      setError('Please select a video file');
-      return;
-    }
-
-    if (!jsonFile) {
-      setError('Please select a GPS JSON file');
-      return;
-    }
-
-    if (!session) {
-      setError('Please complete the project selection first');
+  const handleSubmit = async () => {
+    if (!session?.chainageId || !videoFile || !gpsFile) {
+      setError('Complete location and input data before starting analysis.');
       return;
     }
 
     const formData = new FormData();
-    formData.append('file', file);
-    formData.append('detection_mode', selectMethod);
-    formData.append('chainage_id', session.chainageId as string);
-    formData.append('json_file', jsonFile);
+    formData.append('file', videoFile);
+    formData.append('detection_mode', analysisMethod);
+    formData.append('chainage_id', session.chainageId);
+    formData.append('json_file', gpsFile);
 
-    setUploading(true);
+    setIsSubmitting(true);
     setError(null);
 
     try {
       await videoService.uploadVideo(formData);
       router.push(ROUTES.TICKET);
     } catch (err) {
-      let errorMessage = 'Upload failed';
+      setIsSubmitting(false);
       if (err instanceof TypeError && err.message === 'Failed to fetch') {
-        errorMessage =
-          'Cannot connect to server. Please check if backend is running.';
-      } else if (err instanceof Error) {
-        errorMessage = err.message;
+        setError('Cannot connect to server. Please check if backend is running.');
+        return;
       }
-      setError(errorMessage);
-      setUploading(false);
+      setError(err instanceof Error ? err.message : 'Upload failed');
     }
   };
 
-  if (isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Loader2 className="h-10 w-10 animate-spin text-primary" />
-      </div>
-    );
-  }
-
-  const isSessionComplete = !!(
-    session?.projectId && session.packageId && session.chainageId
-  );
-  const isFormValid = isSessionComplete && file && jsonFile;
-
   return (
-    <div className="min-h-screen pb-12">
-      <main>
-        {/* Header */}
-        <div className="mb-10">
-          <PageHeader
-            title="Intelligent Road Asset AI Analysis"
-            description="High-precision detection for potholes, signboards, and culverts from video data"
-            icon={TrendingUp}
+    <div className="space-y-5">
+      <PageHeader
+        title="Create Analysis Job"
+        description="Configure location, upload data, and start AI analysis."
+        icon={TrendingUp}
+      />
+
+      <Card>
+        <CardContent className="space-y-5 p-5">
+          <LocationSection
+            value={session}
+            onChange={setSession}
+            disabled={isSubmitting}
           />
-        </div>
 
-        <div className="space-y-8 mt-8">
-          {/* Module 1: Project Selection */}
-          <Reveal direction="up" delay={0.1}>
-            <Card className="border">
-              <CardHeader>
-                <CardTitle className="text-xl font-bold">
-                  1. Project Details
-                </CardTitle>
-                <CardDescription>
-                  Select the target project, package, and segment.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <ProjectSelectionSection
-                  onSelectionChange={handleSelectionChange}
-                  asStep={true}
-                  hideButton={true}
-                />
-              </CardContent>
-            </Card>
-          </Reveal>
+          <Separator />
 
-          {/* Module 2: Upload Data */}
-          <Reveal direction="up" delay={0.2}>
-            <Card
-              className={cn(
-                'border transition-all duration-300',
-                !isSessionComplete &&
-                  'opacity-60 pointer-events-none grayscale-[0.5]',
-              )}
+          <InputDataSection
+            videoFile={videoFile}
+            gpsFile={gpsFile}
+            onVideoFileChange={(file) => {
+              setVideoFile(file);
+              setError(null);
+            }}
+            onGpsFileChange={(file) => {
+              setGpsFile(file);
+              setError(null);
+            }}
+            disabled={isSubmitting}
+          />
+
+          <Separator />
+
+          <AnalysisSettingsSection
+            value={analysisMethod}
+            onValueChange={setAnalysisMethod}
+            disabled={isSubmitting}
+          />
+
+          {error ? (
+            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {error}
+            </div>
+          ) : null}
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              size="lg"
+              disabled={!canSubmit || isSubmitting}
+              onClick={handleSubmit}
+              className="w-full gap-2 md:w-auto"
             >
-              <CardHeader>
-                <CardTitle className="text-xl font-bold flex items-center gap-2">
-                  2. Upload Video Data
-                </CardTitle>
-                <CardDescription>
-                  Provide the video file and GPS telemetry for processing.
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-6">
-                <div className="grid grid-cols-1 gap-6">
-                  <FormField id="video-file" label="Video File" required>
-                    <Input
-                      id="video-file"
-                      type="file"
-                      accept="video/*"
-                      onChange={(e) => {
-                        setFile(e.target.files?.[0] || null);
-                        setError(null);
-                      }}
-                      disabled={uploading || !isSessionComplete}
-                    />
-                  </FormField>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <FormField id="json-file" label="GPS JSON File" required>
-                      <Input
-                        id="json-file"
-                        type="file"
-                        accept=".json,application/json"
-                        onChange={(e) => {
-                          setJsonFile(e.target.files?.[0] || null);
-                          setError(null);
-                        }}
-                        disabled={uploading || !isSessionComplete}
-                        required
-                      />
-                    </FormField>
-
-                    <FormField id="select-method" label="Analysis Method">
-                      <Select
-                        value={selectMethod}
-                        onValueChange={setSelectMethod}
-                        disabled={uploading || !isSessionComplete}
-                      >
-                        <SelectTrigger id="select-method">
-                          <SelectValue placeholder="Select method" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {DETECTION_METHODS.map((method) => (
-                            <SelectItem key={method.value} value={method.value}>
-                              {method.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </FormField>
-                  </div>
-                </div>
-
-                {/* Error Display */}
-                {error && (
-                  <div className="p-4 rounded-md bg-destructive/5 border border-destructive/20 text-destructive text-sm font-medium animate-in fade-in slide-in-from-top-1">
-                    {error}
-                  </div>
-                )}
-
-                <div>
-                  <Button
-                    onClick={handleUpload}
-                    disabled={!isFormValid || uploading}
-                    className="w-full"
-                  >
-                    {uploading ? (
-                      <span className="flex items-center gap-2">
-                        <Loader2 className="h-5 w-5 animate-spin" />
-                        Uploading...
-                      </span>
-                    ) : (
-                      'Upload and Process'
-                    )}
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          </Reveal>
-        </div>
-      </main>
+              {isSubmitting ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" />
+                  Starting analysis...
+                </>
+              ) : (
+                <>
+                  <Play className="size-4" />
+                  Start Analysis
+                </>
+              )}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }