refactor: implement project package segment lazy select

2026-06-18 16:30:06 +05:30
parent 6cf363dce1
commit 9e76b8e6d0
31 changed files with 513 additions and 1076 deletions
--- a/src/app/(modules)/package/components/PackageDialog.tsx
+++ b/src/app/(modules)/package/components/PackageDialog.tsx
@@ -1,10 +1,12 @@
 'use client';

 import type { ComponentProps } from 'react';
+import { useRef } from 'react';
 import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';

 import { FormField } from '@/components/form';
+import { ProjectSelect } from '@/components/lookups/ProjectSelect';
 import { Button } from '@/components/ui/button';
 import {
  Dialog,
@@ -15,14 +17,6 @@ import {
  DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import type { Project } from '@/types';

 import type { PackageFormValues } from '../hooks/usePackageForm';

@@ -30,8 +24,6 @@ interface PackageDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  packageId?: string;
-  projects: Project[];
-  isProjectsLoading: boolean;
  projectId: string;
  onProjectChange: (projectId: string) => void;
  register: UseFormRegister<PackageFormValues>;
@@ -46,8 +38,6 @@ export function PackageDialog({
  open,
  onOpenChange,
  packageId,
-  projects,
-  isProjectsLoading,
  projectId,
  onProjectChange,
  register,
@@ -57,6 +47,7 @@ export function PackageDialog({
  canSubmit,
  isSaving,
 }: PackageDialogProps) {
+  const projectSelectPortalRef = useRef<HTMLDivElement | null>(null);
  const projectErrorMessage = isSubmitted
    ? errors.project_id?.message
    : undefined;
@@ -95,25 +86,13 @@ export function PackageDialog({

              {!packageId ? (
                <FormField label="Project" required error={projectErrorMessage}>
-                  <Select value={projectId} onValueChange={onProjectChange}>
-                    <SelectTrigger aria-invalid={!!projectErrorMessage}>
-                      {isProjectsLoading ? (
-                        <span className="flex items-center gap-2 text-muted-foreground">
-                          <Loader2 className="size-4 animate-spin" />
-                          Loading...
-                        </span>
-                      ) : (
-                        <SelectValue placeholder="Choose a project" />
-                      )}
-                    </SelectTrigger>
-                    <SelectContent>
-                      {projects.map((project) => (
-                        <SelectItem key={project.id} value={project.id}>
-                          {project.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <ProjectSelect
+                    value={projectId}
+                    onValueChange={onProjectChange}
+                    enabled={open}
+                    disabled={isSaving}
+                    portalContainer={projectSelectPortalRef}
+                  />
                  <input
                    type="hidden"
                    {...register('project_id')}
@@ -205,6 +184,8 @@ export function PackageDialog({
            </Button>
          </DialogFooter>
        </form>
+
+        <div ref={projectSelectPortalRef} />
      </DialogContent>
    </Dialog>
  );
--- a/src/app/(modules)/package/page.tsx
+++ b/src/app/(modules)/package/page.tsx
@@ -113,8 +113,6 @@ export default function PackagePage() {
        open={isDialogOpen}
        onOpenChange={handleDialogOpenChange}
        packageId={packageId}
-        projects={projects}
-        isProjectsLoading={projectsQuery.isLoading}
        projectId={projectId}
        onProjectChange={setProjectId}
        register={register}
--- a/src/app/(modules)/package/queries/packageKeys.ts
+++ b/src/app/(modules)/package/queries/packageKeys.ts
@@ -4,4 +4,6 @@ export const packageKeys = {
  all: ['packages'] as const,
  lists: () => [...packageKeys.all, 'list'] as const,
  list: (params: PaginationParams) => [...packageKeys.lists(), params] as const,
+  details: () => [...packageKeys.all, 'detail'] as const,
+  detail: (id: string) => [...packageKeys.details(), id] as const,
 };
--- a/src/app/(modules)/project/queries/projectKeys.ts
+++ b/src/app/(modules)/project/queries/projectKeys.ts
@@ -4,4 +4,6 @@ export const projectKeys = {
  all: ['projects'] as const,
  lists: () => [...projectKeys.all, 'list'] as const,
  list: (params: PaginationParams) => [...projectKeys.lists(), params] as const,
+  details: () => [...projectKeys.all, 'detail'] as const,
+  detail: (id: string) => [...projectKeys.details(), id] as const,
 };
--- a/src/app/(modules)/results/[videoId]/page.tsx
+++ b/src/app/(modules)/results/[videoId]/page.tsx
@@ -1,16 +1,11 @@
 'use client';

-import { useState, useEffect, useMemo } from 'react';
-import { useRouter, useParams } from 'next/navigation';
-import { Button } from '@/components/ui/button';
+import { useMemo } from 'react';
+import { useParams } from 'next/navigation';
 import { Loader2, TrendingUp } from 'lucide-react';
 import VideoPlayerSection from '@/components/videoPlayerSection';
 import { PageHeader } from '@/components/page-header';
-import { sessionService } from '@/services/api';
-import { SessionContext, CompletedVideoResult, DetectionType } from '@/types';
-import { clearVideoFile } from '@/lib/video-storage';
-import { ROUTES } from '@/utils/routes';
-import { Card } from '@/components/ui/card';
+import { CompletedVideoResult, DetectionType } from '@/types';
 import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
 import { useVideoResultsQuery } from '../hooks/useVideoResults';

@@ -26,9 +21,7 @@ const inferDetectionType = (data: CompletedVideoResult): DetectionType => {
 };

 export default function VideoResultsPage() {
-  const router = useRouter();
  const { videoId } = useParams() as { videoId: string };
-  const [session, setSession] = useState<SessionContext | null>(null);

  const {
    data: detectionData,
@@ -48,22 +41,6 @@ export default function VideoResultsPage() {
      : 'Failed to load results'
    : null;

-  useEffect(() => {
-    setSession(sessionService.loadSession());
-  }, []);
-
-  const handleNewAnalysis = async () => {
-    if (videoId) {
-      try {
-        await clearVideoFile(videoId);
-      } catch (err) {
-        console.error('Failed to clear video file:', err);
-      }
-    }
-    sessionService.clearSession();
-    router.push(ROUTES.UPLOAD);
-  };
-
  const getTitle = () => {
    const config = getDetectionModeConfig(detectionType);
    return `${config.label} Results`;
@@ -71,55 +48,29 @@ export default function VideoResultsPage() {

  if (isLoading) {
    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="flex flex-col items-center gap-4 p-8">
+      <div className="min-h-[60vh] flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-          <p className="text-sm text-muted-foreground">
-            Loading detection results...
-          </p>
-        </Card>
      </div>
    );
  }

  if (error) {
    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="flex flex-col items-center gap-6 p-8 text-center max-w-md">
-          <p className="text-destructive font-medium">{error}</p>
-          <div className="flex gap-4">
-            <Button
-              onClick={() => router.push(ROUTES.UPLOAD)}
-              variant="outline"
-            >
-              Back to Upload
-            </Button>
-            <Button onClick={handleNewAnalysis}>New Analysis</Button>
-          </div>
-        </Card>
+      <div className="min-h-[60vh] flex items-center justify-center">
+        <p className="text-sm text-destructive">{error}</p>
      </div>
    );
  }

  return (
-    <div className="min-h-screen">
-      <main className="min-h-screen">
-        <div className="container mx-auto px-6 py-10 max-w-[1600px]">
-          <div className="mb-8">
+    <div className="space-y-8">
      <PageHeader
        title={getTitle()}
        description={`Video ID: ${videoId}`}
        icon={TrendingUp}
      />
-          </div>

-          {detectionData && (
-            <VideoPlayerSection
-              data={detectionData}
-            />
-          )}
-        </div>
-      </main>
+      {detectionData && <VideoPlayerSection data={detectionData} />}
    </div>
  );
 }
--- a/src/app/(modules)/results/page.tsx
+++ b/src/app/(modules)/results/page.tsx
@@ -1,33 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Loader2 } from 'lucide-react';
-import { Card } from '@/components/ui/card';
-import { sessionService } from '@/services/api';
-import { ROUTES } from '@/utils/routes';
-
-export default function ResultsPage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    const storedSession = sessionService.loadSession();
-    const videoData = sessionService.loadVideoData();
-
-    if (!sessionService.isSessionValid(storedSession) || !videoData?.videoId) {
-      router.replace(ROUTES.UPLOAD);
-      return;
-    }
-
-    router.replace(`${ROUTES.RESULTS}/${videoData.videoId}`);
-  }, [router]);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center">
-      <Card className="flex flex-col items-center gap-4 p-8">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <p className="text-sm text-muted-foreground">Loading results...</p>
-      </Card>
-    </div>
-  );
-}
--- a/src/app/(modules)/segment/components/SegmentDialog.tsx
+++ b/src/app/(modules)/segment/components/SegmentDialog.tsx
@@ -1,10 +1,13 @@
 'use client';

 import type { ComponentProps } from 'react';
+import { useRef } from 'react';
 import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';

 import { FormField } from '@/components/form';
+import { PackageSelect } from '@/components/lookups/PackageSelect';
+import { ProjectSelect } from '@/components/lookups/ProjectSelect';
 import { Button } from '@/components/ui/button';
 import {
  Dialog,
@@ -22,7 +25,6 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
-import type { Package, Project } from '@/types';

 import type { SegmentFormValues } from '../hooks/useSegmentForm';

@@ -30,10 +32,6 @@ interface SegmentDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  segmentId?: string;
-  projects: Project[];
-  packages: Package[];
-  isProjectsLoading: boolean;
-  isPackagesLoading: boolean;
  projectId: string;
  onProjectChange: (projectId: string) => void;
  packageId: string;
@@ -52,10 +50,6 @@ export function SegmentDialog({
  open,
  onOpenChange,
  segmentId,
-  projects,
-  packages,
-  isProjectsLoading,
-  isPackagesLoading,
  projectId,
  onProjectChange,
  packageId,
@@ -69,6 +63,8 @@ export function SegmentDialog({
  canSubmit,
  isSaving,
 }: SegmentDialogProps) {
+  const projectSelectPortalRef = useRef<HTMLDivElement | null>(null);
+  const packageSelectPortalRef = useRef<HTMLDivElement | null>(null);
  const getError = (field: keyof SegmentFormValues) =>
    isSubmitted ? errors[field]?.message : undefined;

@@ -104,25 +100,13 @@ export function SegmentDialog({
                    required
                    error={getError('project_id')}
                  >
-                    <Select value={projectId} onValueChange={onProjectChange}>
-                      <SelectTrigger aria-invalid={!!getError('project_id')}>
-                        {isProjectsLoading ? (
-                          <span className="flex items-center gap-2 text-muted-foreground">
-                            <Loader2 className="size-4 animate-spin" />
-                            Loading...
-                          </span>
-                        ) : (
-                          <SelectValue placeholder="Choose a project" />
-                        )}
-                      </SelectTrigger>
-                      <SelectContent>
-                        {projects.map((project) => (
-                          <SelectItem key={project.id} value={project.id}>
-                            {project.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <ProjectSelect
+                      value={projectId}
+                      onValueChange={onProjectChange}
+                      enabled={open}
+                      disabled={isSaving}
+                      portalContainer={projectSelectPortalRef}
+                    />
                    <input
                      type="hidden"
                      {...register('project_id')}
@@ -136,35 +120,14 @@ export function SegmentDialog({
                    required
                    error={getError('package_id')}
                  >
-                    <Select
+                    <PackageSelect
                      value={packageId}
                      onValueChange={onPackageChange}
-                      disabled={!projectId || isPackagesLoading}
-                    >
-                      <SelectTrigger aria-invalid={!!getError('package_id')}>
-                        {isPackagesLoading ? (
-                          <span className="flex items-center gap-2 text-muted-foreground">
-                            <Loader2 className="size-4 animate-spin" />
-                            Loading...
-                          </span>
-                        ) : (
-                          <SelectValue
-                            placeholder={
-                              projectId
-                                ? 'Choose a package'
-                                : 'Select project first'
-                            }
+                      projectId={projectId}
+                      enabled={open && Boolean(projectId)}
+                      disabled={!projectId || isSaving}
+                      portalContainer={packageSelectPortalRef}
                    />
-                        )}
-                      </SelectTrigger>
-                      <SelectContent>
-                        {packages.map((pkg) => (
-                          <SelectItem key={pkg.id} value={pkg.id}>
-                            {pkg.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
                    <input
                      type="hidden"
                      {...register('package_id')}
@@ -350,6 +313,9 @@ export function SegmentDialog({
            </Button>
          </DialogFooter>
        </form>
+
+        <div ref={projectSelectPortalRef} />
+        <div ref={packageSelectPortalRef} />
      </DialogContent>
    </Dialog>
  );
--- a/src/app/(modules)/segment/hooks/useSegmentQueries.ts
+++ b/src/app/(modules)/segment/hooks/useSegmentQueries.ts
@@ -44,15 +44,6 @@ export function useAllPackageOptionsQuery() {
  });
 }

-export function usePackagesByProjectQuery(projectId: string, enabled: boolean) {
-  return useQuery({
-    queryKey: ['packages', 'by-project', projectId],
-    queryFn: () =>
-      packageService.getPackagesByProject(projectId, { skip: 0, limit: 1000 }),
-    enabled: enabled && Boolean(projectId),
-  });
-}
-
 export function useDeleteSegmentMutation() {
  const queryClient = useQueryClient();

--- a/src/app/(modules)/segment/page.tsx
+++ b/src/app/(modules)/segment/page.tsx
@@ -15,7 +15,6 @@ import { useSegmentForm } from './hooks/useSegmentForm';
 import {
  useAllPackageOptionsQuery,
  useDeleteSegmentMutation,
-  usePackagesByProjectQuery,
  useProjectOptionsQuery,
  useSegmentsQuery,
 } from './hooks/useSegmentQueries';
@@ -48,11 +47,6 @@ export default function SegmentPage() {
    canSubmit,
    isSaving,
  } = segmentForm;
-  const projectPackagesQuery = usePackagesByProjectQuery(
-    projectId,
-    isDialogOpen,
-  );
-
  const openCreate = useCallback(() => {
    prepareCreateSegment();
    setIsDialogOpen(true);
@@ -95,7 +89,6 @@ export default function SegmentPage() {

  const projects = projectsQuery.data?.items ?? [];
  const allPackages = allPackagesQuery.data?.items ?? [];
-  const projectPackages = projectPackagesQuery.data?.items ?? [];
  const segments = segmentsQuery.data?.items ?? [];
  const total = segmentsQuery.data?.totalItems ?? 0;
  const columns = useSegmentColumns(projects, allPackages);
@@ -133,10 +126,6 @@ export default function SegmentPage() {
        open={isDialogOpen}
        onOpenChange={handleDialogOpenChange}
        segmentId={segmentId}
-        projects={projects}
-        packages={projectPackages}
-        isProjectsLoading={projectsQuery.isLoading}
-        isPackagesLoading={projectPackagesQuery.isLoading}
        projectId={projectId}
        onProjectChange={setProjectId}
        packageId={packageId}
--- a/src/app/(modules)/segment/queries/segmentKeys.ts
+++ b/src/app/(modules)/segment/queries/segmentKeys.ts
@@ -4,4 +4,6 @@ export const segmentKeys = {
  all: ['segments'] as const,
  lists: () => [...segmentKeys.all, 'list'] as const,
  list: (params: PaginationParams) => [...segmentKeys.lists(), params] as const,
+  details: () => [...segmentKeys.all, 'detail'] as const,
+  detail: (id: string) => [...segmentKeys.details(), id] as const,
 };
--- a/src/app/(modules)/ticket/page.tsx
+++ b/src/app/(modules)/ticket/page.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { PageHeader } from '@/components/page-header';
+import { Ticket } from 'lucide-react';
+
+export default function TicketPage() {
+  return (
+    <div className="min-h-screen pb-12">
+      <main>
+        <div className="mb-10">
+          <PageHeader
+            title="Ticket"
+            description="Uploaded video details will be shown here."
+            icon={Ticket}
+          />
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Ticket Page</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              This is ticket page for now.
+            </p>
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
+}
--- a/src/app/(modules)/upload/[videoId]/page.tsx
+++ b/src/app/(modules)/upload/[videoId]/page.tsx
@@ -1,260 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { useRouter, useParams } from 'next/navigation';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
-import { PageHeader } from '@/components/page-header';
-import { sessionService, videoService } from '@/services/api';
-import { SessionContext } from '@/types';
-import { ROUTES } from '@/utils/routes';
-import { Button } from '@/components/ui/button';
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL;
-const WS_URL = API_URL?.replace(/^https:\/\//, 'wss://').replace(
-  /^http:\/\//,
-  'ws://',
-);
-
-export default function VideoProcessingPage() {
-  const router = useRouter();
-  const { videoId } = useParams() as { videoId: string };
-  const [session, setSession] = useState<SessionContext | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Processing states
-  const [progress, setProgress] = useState(0);
-  const [statusMessage, setStatusMessage] = useState('Initializing...');
-  const [error, setError] = useState<string | null>(null);
-
-  const wsRef = useRef<WebSocket | null>(null);
-
-  const connectWebSocket = useCallback(
-    (vid: string) => {
-      if (wsRef.current) return wsRef.current;
-
-      const ws = new WebSocket(`${WS_URL}/ws/${vid}`);
-      wsRef.current = ws;
-
-      ws.onmessage = async (event) => {
-        const data = JSON.parse(event.data);
-
-        if (data.type === 'progress' || data.progress !== undefined) {
-          setProgress(data.progress || 0);
-          let message = data.message || 'Processing...';
-          const uniqueCount =
-            data.unique_potholes ??
-            data.unique_pothole ??
-            data.unique_signboards ??
-            data.unique_signboard ??
-            data.unique_culverts ??
-            data.unique_culvert ??
-            data.unique_drain_issue;
-          if (uniqueCount !== undefined) {
-            message += ` | Unique: ${uniqueCount} | Total: ${data.total_detections || 0}`;
-          }
-          setStatusMessage(message);
-        }
-
-        if (data.type === 'complete' || data.status === 'completed') {
-          setStatusMessage('Processing completed! Finalizing...');
-          ws.close();
-
-          // Navigate to results
-          setTimeout(() => router.push(`/results/${vid}`), 1000);
-        }
-
-        if (data.type === 'error') {
-          setError('Error: ' + data.message);
-          setStatusMessage('');
-          ws.close();
-        }
-      };
-
-      ws.onerror = () => {
-        setStatusMessage('Connection lost. Reconnecting...');
-        wsRef.current = null;
-        setTimeout(() => connectWebSocket(vid), 3000);
-      };
-
-      ws.onclose = () => {
-        wsRef.current = null;
-      };
-
-      return ws;
-    },
-    [router],
-  );
-
-  useEffect(() => {
-    const storedSession = sessionService.loadSession();
-    setSession(storedSession);
-
-    let isMounted = true;
-
-    const checkStatus = async () => {
-      try {
-        const statusData = await videoService.getVideoStatus(videoId);
-
-        if (!isMounted) return;
-
-        if (statusData.status === 'completed') {
-          router.replace(`/results/${videoId}`);
-          return;
-        }
-
-        if (statusData.status === 'error') {
-          setError(
-            statusData.message || 'An error occurred during processing.',
-          );
-          setIsLoading(false);
-          return;
-        }
-
-        // If processing, start WebSocket
-        setProgress(statusData.progress || 0);
-        setStatusMessage(statusData.message || 'Resuming processing...');
-        connectWebSocket(videoId);
-        setIsLoading(false);
-      } catch (err) {
-        console.error('Status check failed:', err);
-        if (isMounted) {
-          setError('Failed to connect to server.');
-          setIsLoading(false);
-        }
-      }
-    };
-
-    if (videoId) {
-      checkStatus();
-    }
-
-    return () => {
-      isMounted = false;
-      if (wsRef.current) {
-        wsRef.current.close();
-        wsRef.current = null;
-      }
-    };
-  }, [videoId, router, connectWebSocket]);
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="p-8">
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        </Card>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen">
-      <main className="min-h-screen flex flex-col">
-        <div className="flex-1 container mx-auto px-6 py-6 max-w-340 flex flex-col">
-          <div className="mb-6">
-            <PageHeader
-              title="Uploading Analysis"
-              description={`Real-time analysis progress for video ID: ${videoId}`}
-              icon={TrendingUp}
-            />
-          </div>
-
-          {session && (
-            <div className="mb-6">
-              <Card className="p-0 border shadow-sm overflow-hidden">
-                <div className="flex flex-col md:flex-row md:items-center py-4 px-6 gap-6 bg-card">
-                  <div className="flex flex-wrap items-center gap-x-12 gap-y-4 flex-1">
-                    <div className="flex flex-col">
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
-                        Project
-                      </span>
-                      <span className="text-base font-bold leading-tight">
-                        {session.projectName}
-                      </span>
-                    </div>
-                    <div className="flex flex-col border-l pl-12 border-border/60">
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
-                        Package
-                      </span>
-                      <span className="text-sm font-semibold text-muted-foreground leading-tight">
-                        {session.packageName}
-                      </span>
-                    </div>
-                    <div className="flex flex-col border-l pl-12 border-border/60">
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
-                        Segment
-                      </span>
-                      <span className="text-sm font-semibold text-muted-foreground leading-tight flex items-center gap-1.5">
-                        {session.chainageName}
-                        {session.chainageDirection && (
-                          <span className="inline-flex items-center gap-1 px-1 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
-                            {session.chainageDirection === 'UP' ? (
-                              <ArrowUp className="h-2.5 w-2.5" />
-                            ) : (
-                              <ArrowDown className="h-2.5 w-2.5" />
-                            )}
-                            {session.chainageDirection}
-                          </span>
-                        )}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </Card>
-            </div>
-          )}
-
-          <Card className="flex-1 flex flex-col items-center justify-center py-12 px-8 min-h-[450px]">
-            <div className="flex flex-col items-center justify-center w-full max-w-2xl space-y-10">
-              <div className="text-center space-y-4">
-                <h2 className="text-3xl font-bold tracking-tight">
-                  Uploading ...
-                </h2>
-                <p className="text-sm font-mono text-muted-foreground tracking-widest">
-                  ID: {videoId}
-                </p>
-              </div>
-
-              <div className="w-full space-y-4">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="font-bold text-muted-foreground text-xs uppercase tracking-widest">
-                    Progress
-                  </span>
-                  <span className="font-bold text-primary text-lg">
-                    {progress}%
-                  </span>
-                </div>
-                <div className="h-4 rounded-full bg-secondary overflow-hidden border">
-                  <div
-                    className="h-full bg-primary transition-all duration-1000 ease-in-out"
-                    style={{ width: `${progress}%` }}
-                  />
-                </div>
-                <div className="text-center pt-2">
-                  <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full border bg-secondary/30">
-                    <Loader2 className="h-4 w-4 animate-spin text-primary" />
-                    <p className="text-sm font-semibold">{statusMessage}</p>
-                  </div>
-                </div>
-              </div>
-
-              {error && (
-                <div className="w-full p-6 rounded-md bg-destructive/10 border border-destructive/20 text-center space-y-3">
-                  <p className="text-destructive font-medium">{error}</p>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => window.location.reload()}
-                  >
-                    Retry Connection
-                  </Button>
-                </div>
-              )}
-            </div>
-          </Card>
-        </div>
-      </main>
-    </div>
-  );
-}
--- a/src/app/(modules)/upload/page.tsx
+++ b/src/app/(modules)/upload/page.tsx
@@ -9,9 +9,9 @@ import {
  CardHeader,
  CardTitle,
 } from '@/components/ui/card';
+import { FormField } from '@/components/form';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import {
  Select,
  SelectContent,
@@ -19,14 +19,14 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
-import { Loader2, TrendingUp, ChevronRight } from 'lucide-react';
+import { Loader2, TrendingUp } from 'lucide-react';
 import { PageHeader } from '@/components/page-header';
-import { sessionService, videoService } from '@/services/api';
+import { videoService } from '@/services/api';
 import { SessionContext } from '@/types';
-import { storeVideoFile } from '@/lib/video-storage';
 import { ProjectSelectionSection } from '@/components/project-selection-section';
 import { Reveal } from '@/components/ui/reveal';
 import { cn } from '@/lib/utils';
+import { ROUTES } from '@/utils/routes';

 const DETECTION_METHODS = [
  { value: 'yolo', label: 'Road Defect Detection' },
@@ -63,9 +63,6 @@ export default function UploadPage() {
  const handleSelectionChange = useCallback(
    (selectedSession: SessionContext | null) => {
      setSession(selectedSession);
-      if (selectedSession) {
-        sessionService.saveSession(selectedSession);
-      }
    },
    [],
  );
@@ -96,19 +93,8 @@ export default function UploadPage() {
    setError(null);

    try {
-      const result = await videoService.uploadVideo(formData);
-
-      // Store file locally
-      if (file) {
-        try {
-          await storeVideoFile(result.video_id, file);
-        } catch (err) {
-          console.error('Failed to store video file:', err);
-        }
-      }
-
-      sessionService.saveVideoData({ videoId: result.video_id });
-      router.push(`/upload/${result.video_id}`);
+      await videoService.uploadVideo(formData);
+      router.push(ROUTES.TICKET);
    } catch (err) {
      let errorMessage = 'Upload failed';
      if (err instanceof TypeError && err.message === 'Failed to fetch') {
@@ -131,7 +117,7 @@ export default function UploadPage() {
  }

  const isSessionComplete = !!(
-    session && sessionService.isSessionValid(session)
+    session?.projectId && session.packageId && session.chainageId
  );
  const isFormValid = isSessionComplete && file && jsonFile;

@@ -187,16 +173,8 @@ export default function UploadPage() {
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
-                <div className="grid grid-cols-1 gap-6 text-sm">
-                  {/* Video File Input */}
-                  <div className="space-y-2">
-                    <Label
-                      htmlFor="video-file"
-                      className="text-sm font-semibold"
-                    >
-                      Video File <span className="text-destructive">*</span>
-                    </Label>
-                    <div className="relative group">
+                <div className="grid grid-cols-1 gap-6">
+                  <FormField id="video-file" label="Video File" required>
                    <Input
                      id="video-file"
                      type="file"
@@ -206,21 +184,11 @@ export default function UploadPage() {
                        setError(null);
                      }}
                      disabled={uploading || !isSessionComplete}
-                        className="h-12 bg-muted/30 border-dashed border-2 group-hover:border-primary/50 transition-colors cursor-pointer file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-primary file:text-primary-foreground file:font-semibold file:text-xs"
                    />
-                    </div>
-                  </div>
+                  </FormField>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    {/* JSON File Input */}
-                    <div className="space-y-2">
-                      <Label
-                        htmlFor="json-file"
-                        className="text-sm font-semibold"
-                      >
-                        GPS JSON File{' '}
-                        <span className="text-destructive">*</span>
-                      </Label>
+                    <FormField id="json-file" label="GPS JSON File" required>
                      <Input
                        id="json-file"
                        type="file"
@@ -231,27 +199,16 @@ export default function UploadPage() {
                        }}
                        disabled={uploading || !isSessionComplete}
                        required
-                        className="h-11 bg-muted/30 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-primary/10 file:text-primary file:font-medium file:text-xs"
                      />
-                    </div>
+                    </FormField>

-                    {/* Select Method */}
-                    <div className="space-y-2">
-                      <Label
-                        htmlFor="select-method"
-                        className="text-sm font-semibold"
-                      >
-                        Analysis Method
-                      </Label>
+                    <FormField id="select-method" label="Analysis Method">
                      <Select
                        value={selectMethod}
                        onValueChange={setSelectMethod}
                        disabled={uploading || !isSessionComplete}
                      >
-                        <SelectTrigger
-                          id="select-method"
-                          className="h-11 bg-muted/20"
-                        >
+                        <SelectTrigger id="select-method">
                          <SelectValue placeholder="Select method" />
                        </SelectTrigger>
                        <SelectContent>
@@ -262,7 +219,7 @@ export default function UploadPage() {
                          ))}
                        </SelectContent>
                      </Select>
-                    </div>
+                    </FormField>
                  </div>
                </div>

@@ -273,23 +230,19 @@ export default function UploadPage() {
                  </div>
                )}

-                {/* Primary Action Button */}
-                <div className="pt-2">
+                <div>
                  <Button
                    onClick={handleUpload}
                    disabled={!isFormValid || uploading}
-                    className="w-full h-14 font-extrabold uppercase tracking-wider"
+                    className="w-full"
                  >
                    {uploading ? (
-                      <div className="flex items-center gap-3">
+                      <span className="flex items-center gap-2">
                        <Loader2 className="h-5 w-5 animate-spin" />
-                        <span>Uploading...</span>
-                      </div>
+                        Uploading...
+                      </span>
                    ) : (
-                      <div className="flex items-center gap-2">
-                        <span>Upload & Process Analysis</span>
-                        <ChevronRight className="h-5 w-5" />
-                      </div>
+                      'Upload and Process'
                    )}
                  </Button>
                </div>
--- a/src/components/lookups/PackageSelect.tsx
+++ b/src/components/lookups/PackageSelect.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { AsyncSelect, usePaginatedSelect } from '@/components/async-select';
+import type { AsyncSelectOption } from '@/components/async-select';
+import { packageService } from '@/services/api';
+import type { Package } from '@/types';
+
+import { packageKeys } from '@/app/(modules)/package/queries/packageKeys';
+import type { PackageSelectProps } from './PackageSelect.types';
+
+const PACKAGE_PAGE_SIZE = 20;
+
+function mapPackageOption(pkg: Package): AsyncSelectOption {
+  return {
+    value: pkg.id,
+    label: pkg.name,
+  };
+}
+
+export function PackageSelect({
+  value,
+  onValueChange,
+  projectId,
+  enabled = true,
+  disabled = false,
+  portalContainer,
+}: PackageSelectProps) {
+  const lookup = usePaginatedSelect<Package>({
+    enabled,
+    selectedValue: value,
+    pageSize: PACKAGE_PAGE_SIZE,
+    queryKey: (searchTerm) =>
+      [
+        ...packageKeys.lists(),
+        'async-lookup',
+        projectId || 'all',
+        searchTerm,
+        PACKAGE_PAGE_SIZE,
+      ] as const,
+    queryFn: async ({ searchTerm, skip, limit }) => {
+      const params = {
+        search_term: searchTerm || undefined,
+        skip,
+        limit,
+      };
+      const data = projectId
+        ? await packageService.getPackagesByProject(projectId, params)
+        : await packageService.getPackages(params);
+
+      return { items: data.items, total: data.totalItems };
+    },
+    mapOption: mapPackageOption,
+    resolveSelected: (packageId) =>
+      packageId ? packageService.getPackageById(packageId) : Promise.resolve(null),
+    resolveSelectedQueryKey: (packageId) =>
+      packageId
+        ? packageKeys.detail(packageId)
+        : [...packageKeys.details(), 'invalid', packageId],
+  });
+
+  return (
+    <AsyncSelect
+      lookup={lookup}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      placeholder="Select package"
+      searchPlaceholder="Search packages..."
+      emptyMessage="No packages found."
+      portalContainer={portalContainer}
+    />
+  );
+}
--- a/src/components/lookups/PackageSelect.types.ts
+++ b/src/components/lookups/PackageSelect.types.ts
@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+
+export interface PackageSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  projectId?: string;
+  enabled?: boolean;
+  disabled?: boolean;
+  portalContainer?: RefObject<HTMLDivElement | null>;
+}
--- a/src/components/lookups/ProjectSelect.tsx
+++ b/src/components/lookups/ProjectSelect.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { AsyncSelect, usePaginatedSelect } from '@/components/async-select';
+import type { AsyncSelectOption } from '@/components/async-select';
+import { projectService } from '@/services/api';
+import type { Project } from '@/types';
+
+import { projectKeys } from '@/app/(modules)/project/queries/projectKeys';
+import type { ProjectSelectProps } from './ProjectSelect.types';
+
+const PROJECT_PAGE_SIZE = 20;
+
+function mapProjectOption(project: Project): AsyncSelectOption {
+  return {
+    value: project.id,
+    label: project.name,
+  };
+}
+
+export function ProjectSelect({
+  value,
+  onValueChange,
+  enabled = true,
+  disabled = false,
+  portalContainer,
+}: ProjectSelectProps) {
+  const lookup = usePaginatedSelect<Project>({
+    enabled,
+    selectedValue: value,
+    pageSize: PROJECT_PAGE_SIZE,
+    queryKey: (searchTerm) =>
+      [
+        ...projectKeys.lists(),
+        'async-lookup',
+        searchTerm,
+        PROJECT_PAGE_SIZE,
+      ] as const,
+    queryFn: async ({ searchTerm, skip, limit }) => {
+      const data = await projectService.getProjects({
+        search_term: searchTerm || undefined,
+        skip,
+        limit,
+      });
+
+      return { items: data.items, total: data.totalItems };
+    },
+    mapOption: mapProjectOption,
+    resolveSelected: (projectId) =>
+      projectId ? projectService.getProjectById(projectId) : Promise.resolve(null),
+    resolveSelectedQueryKey: (projectId) =>
+      projectId
+        ? projectKeys.detail(projectId)
+        : [...projectKeys.details(), 'invalid', projectId],
+  });
+
+  return (
+    <AsyncSelect
+      lookup={lookup}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      placeholder="Select project"
+      searchPlaceholder="Search projects..."
+      emptyMessage="No projects found."
+      portalContainer={portalContainer}
+    />
+  );
+}
--- a/src/components/lookups/ProjectSelect.types.ts
+++ b/src/components/lookups/ProjectSelect.types.ts
@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+
+export interface ProjectSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  enabled?: boolean;
+  disabled?: boolean;
+  portalContainer?: RefObject<HTMLDivElement | null>;
+}
--- a/src/components/lookups/SegmentSelect.tsx
+++ b/src/components/lookups/SegmentSelect.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { AsyncSelect, usePaginatedSelect } from '@/components/async-select';
+import type { AsyncSelectOption } from '@/components/async-select';
+import { chainageService } from '@/services/api';
+import type { Chainage } from '@/types';
+
+import { segmentKeys } from '@/app/(modules)/segment/queries/segmentKeys';
+import type { SegmentSelectProps } from './SegmentSelect.types';
+
+const SEGMENT_PAGE_SIZE = 20;
+
+function mapSegmentOption(segment: Chainage): AsyncSelectOption {
+  return {
+    value: segment.id,
+    label: segment.segment_name,
+  };
+}
+
+export function SegmentSelect({
+  value,
+  onValueChange,
+  packageId,
+  enabled = true,
+  disabled = false,
+  portalContainer,
+}: SegmentSelectProps) {
+  const lookup = usePaginatedSelect<Chainage>({
+    enabled,
+    selectedValue: value,
+    pageSize: SEGMENT_PAGE_SIZE,
+    queryKey: (searchTerm) =>
+      [
+        ...segmentKeys.lists(),
+        'async-lookup',
+        packageId || 'all',
+        searchTerm,
+        SEGMENT_PAGE_SIZE,
+      ] as const,
+    queryFn: async ({ searchTerm, skip, limit }) => {
+      const params = {
+        search_term: searchTerm || undefined,
+        skip,
+        limit,
+      };
+      const data = packageId
+        ? await chainageService.getChainagesByPackage(packageId, params)
+        : await chainageService.getChainages(params);
+
+      return { items: data.items, total: data.totalItems };
+    },
+    mapOption: mapSegmentOption,
+    resolveSelected: (segmentId) =>
+      segmentId
+        ? chainageService.getChainageById(segmentId)
+        : Promise.resolve(null),
+    resolveSelectedQueryKey: (segmentId) =>
+      segmentId
+        ? segmentKeys.detail(segmentId)
+        : [...segmentKeys.details(), 'invalid', segmentId],
+  });
+
+  return (
+    <AsyncSelect
+      lookup={lookup}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      placeholder="Select segment"
+      searchPlaceholder="Search segments..."
+      emptyMessage="No segments found."
+      portalContainer={portalContainer}
+    />
+  );
+}
--- a/src/components/lookups/SegmentSelect.types.ts
+++ b/src/components/lookups/SegmentSelect.types.ts
@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+
+export interface SegmentSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  packageId?: string;
+  enabled?: boolean;
+  disabled?: boolean;
+  portalContainer?: RefObject<HTMLDivElement | null>;
+}
--- a/src/components/project-selection-section.tsx
+++ b/src/components/project-selection-section.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import {
  Card,
  CardContent,
@@ -10,14 +10,10 @@ import {
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Loader2, Check, ArrowUp, ArrowDown } from 'lucide-react';
+import { Check, ArrowUp, ArrowDown } from 'lucide-react';
+import { ProjectSelect } from '@/components/lookups/ProjectSelect';
+import { PackageSelect } from '@/components/lookups/PackageSelect';
+import { SegmentSelect } from '@/components/lookups/SegmentSelect';
 import {
  projectService,
  packageService,
@@ -38,23 +34,15 @@ type ProjectSelectionSectionProps = {
  hideButton?: boolean;
 };

-let globalProjectsCache: Project[] | null = null;
-let projectsPromise: Promise<Project[]> | null = null;
-
 export function ProjectSelectionSection({
  onSelectionComplete,
  onSelectionChange,
  asStep = false,
  hideButton = false,
 }: ProjectSelectionSectionProps) {
-  // Data states
-  const [projects, setProjects] = useState<Project[]>(
-    globalProjectsCache || [],
-  );
-  const [packages, setPackages] = useState<PackageType[]>([]);
-  const [chainages, setChainages] = useState<Chainage[]>([]);
-
-  // Selection states
+  const [selectedProjectId, setSelectedProjectId] = useState('');
+  const [selectedPackageId, setSelectedPackageId] = useState('');
+  const [selectedChainageId, setSelectedChainageId] = useState('');
  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
  const [selectedPackage, setSelectedPackage] = useState<PackageType | null>(
    null,
@@ -62,159 +50,99 @@ export function ProjectSelectionSection({
  const [selectedChainage, setSelectedChainage] = useState<Chainage | null>(
    null,
  );
-
-  // Loading states
-  const [loadingProjects, setLoadingProjects] = useState(!globalProjectsCache);
-  const [loadingPackages, setLoadingPackages] = useState(false);
-  const [loadingChainages, setLoadingChainages] = useState(false);
-
-  // Error state
  const [error, setError] = useState<string | null>(null);

-  // Load projects on mount
-  useEffect(() => {
-    let isMounted = true;
+  const lastReportedIdRef = useRef<string | null>(null);
+  const latestProjectIdRef = useRef('');
+  const latestPackageIdRef = useRef('');
+  const latestChainageIdRef = useRef('');

-    const loadProjects = async () => {
-      // Use cache if we already have it
-      if (globalProjectsCache) {
-        if (isMounted) {
-          setProjects(globalProjectsCache);
-          setLoadingProjects(false);
-        }
+  const handleProjectChange = useCallback((projectId: string) => {
+    latestProjectIdRef.current = projectId;
+    latestPackageIdRef.current = '';
+    latestChainageIdRef.current = '';
+
+    setSelectedProjectId(projectId);
+    setSelectedPackageId('');
+    setSelectedChainageId('');
+    setSelectedProject(null);
+    setSelectedPackage(null);
+    setSelectedChainage(null);
+    setError(null);
+
+    if (!projectId) {
      return;
    }

-      // If a fetch is already in flight, reuse that promise
-      if (!projectsPromise) {
-        projectsPromise = projectService
-          .getProjects()
-          .then((data) => {
-            globalProjectsCache = data.items;
-            return data.items;
+    void projectService
+      .getProjectById(projectId)
+      .then((project) => {
+        if (latestProjectIdRef.current === projectId) {
+          setSelectedProject(project);
+        }
      })
      .catch((err) => {
-            projectsPromise = null; // Reset on error to allow retry
-            throw err;
+        if (latestProjectIdRef.current === projectId) {
+          console.error('Failed to resolve project:', err);
+          setError('Failed to load the selected project.');
+        }
      });
-      }
-
-      try {
-        setLoadingProjects(true);
-        const data = await projectsPromise;
-        if (isMounted) {
-          setProjects(data);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError('Failed to load projects. Please check connection.');
-        }
-      } finally {
-        if (isMounted) {
-          setLoadingProjects(false);
-        }
-      }
-    };
-
-    loadProjects();
-    return () => {
-      isMounted = false;
-    };
  }, []);

-  // Load packages when project changes
-  useEffect(() => {
-    if (!selectedProject) {
-      setPackages([]);
+  const handlePackageChange = useCallback((packageId: string) => {
+    latestPackageIdRef.current = packageId;
+    latestChainageIdRef.current = '';
+
+    setSelectedPackageId(packageId);
+    setSelectedChainageId('');
    setSelectedPackage(null);
+    setSelectedChainage(null);
+    setError(null);
+
+    if (!packageId) {
      return;
    }

-    let isMounted = true;
-    const loadPackages = async () => {
-      try {
-        setLoadingPackages(true);
-        setError(null);
-        setSelectedPackage(null);
-        setSelectedChainage(null);
-        setChainages([]);
-        const data = await packageService.getPackagesByProject(
-          selectedProject.id,
-        );
-        if (isMounted) {
-          setPackages(data.items);
-        }
-      } catch (err) {
-        if (isMounted) {
-          console.error('Failed to load packages:', err);
-          setError('Failed to load packages for the selected project.');
-        }
-      } finally {
-        if (isMounted) {
-          setLoadingPackages(false);
-        }
-      }
-    };
-    loadPackages();
-    return () => {
-      isMounted = false;
-    };
-  }, [selectedProject]);
-
-  // Load chainages when package changes
-  useEffect(() => {
-    if (!selectedPackage) {
-      setChainages([]);
-      setSelectedChainage(null);
-      return;
-    }
-
-    let isMounted = true;
-    const loadChainages = async () => {
-      try {
-        setLoadingChainages(true);
-        setError(null);
-        setSelectedChainage(null);
-        const data = await chainageService.getChainagesByPackage(
-          selectedPackage.id,
-        );
-        if (isMounted) {
-          setChainages(data.items);
-        }
-      } catch (err) {
-        if (isMounted) {
-          console.error('Failed to load chainages:', err);
-          setError('Failed to load segments for the selected package.');
-        }
-      } finally {
-        if (isMounted) {
-          setLoadingChainages(false);
-        }
-      }
-    };
-    loadChainages();
-    return () => {
-      isMounted = false;
-    };
-  }, [selectedPackage]);
-
-  const handleProjectChange = (projectId: string) => {
-    const project = projects.find((p) => p.id === projectId) || null;
-    setSelectedProject(project);
-  };
-
-  const handlePackageChange = (packageId: string) => {
-    const pkg = packages.find((p) => p.id === packageId) || null;
+    void packageService
+      .getPackageById(packageId)
+      .then((pkg) => {
+        if (latestPackageIdRef.current === packageId) {
          setSelectedPackage(pkg);
-  };
+        }
+      })
+      .catch((err) => {
+        if (latestPackageIdRef.current === packageId) {
+          console.error('Failed to resolve package:', err);
+          setError('Failed to load the selected package.');
+        }
+      });
+  }, []);

-  const handleChainageChange = (chainageId: string) => {
-    const chainage = chainages.find((chn) => chn.id === chainageId) || null;
+  const handleChainageChange = useCallback((chainageId: string) => {
+    latestChainageIdRef.current = chainageId;
+
+    setSelectedChainageId(chainageId);
+    setSelectedChainage(null);
+    setError(null);
+
+    if (!chainageId) {
+      return;
+    }
+
+    void chainageService
+      .getChainageById(chainageId)
+      .then((chainage) => {
+        if (latestChainageIdRef.current === chainageId) {
          setSelectedChainage(chainage);
-  };
-
-  // Cache the last reported state to prevent infinite loops
-  const lastReportedIdRef = useRef<string | null>(null);
+        }
+      })
+      .catch((err) => {
+        if (latestChainageIdRef.current === chainageId) {
+          console.error('Failed to resolve segment:', err);
+          setError('Failed to load the selected segment.');
+        }
+      });
+  }, []);

  // Handle change reporting
  useEffect(() => {
@@ -267,17 +195,17 @@ export function ProjectSelectionSection({

  // Step status helpers
  const getStepStatus = (step: number) => {
-    if (step === 1) return selectedProject ? 'completed' : 'active';
+    if (step === 1) return selectedProjectId ? 'completed' : 'active';
    if (step === 2)
-      return selectedPackage
+      return selectedPackageId
        ? 'completed'
-        : selectedProject
+        : selectedProjectId
          ? 'active'
          : 'pending';
    if (step === 3)
-      return selectedChainage
+      return selectedChainageId
        ? 'completed'
-        : selectedPackage
+        : selectedPackageId
          ? 'active'
          : 'pending';
    return 'pending';
@@ -293,120 +221,41 @@ export function ProjectSelectionSection({
      )}

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-        {/* Project Dropdown */}
        <div className="space-y-2">
          <Label htmlFor="project" className="text-sm font-semibold">
            Project
          </Label>
-          <Select
-            value={selectedProject?.id || ''}
+          <ProjectSelect
+            value={selectedProjectId}
            onValueChange={handleProjectChange}
-            disabled={loadingProjects}
-          >
-            <SelectTrigger id="project" className="h-11">
-              {loadingProjects ? (
-                <div className="flex items-center gap-2">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  <span>Loading...</span>
-                </div>
-              ) : (
-                <SelectValue placeholder="Select project" />
-              )}
-            </SelectTrigger>
-            <SelectContent>
-              {projects.map((project) => (
-                <SelectItem key={project.id} value={project.id}>
-                  {project.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+            enabled
+          />
        </div>

-        {/* Package Dropdown */}
        <div className="space-y-2">
          <Label htmlFor="package" className="text-sm font-semibold">
            Package
          </Label>
-          <Select
-            value={selectedPackage?.id || ''}
+          <PackageSelect
+            value={selectedPackageId}
            onValueChange={handlePackageChange}
-            disabled={!selectedProject || loadingPackages}
-          >
-            <SelectTrigger id="package" className="h-11">
-              {loadingPackages ? (
-                <div className="flex items-center gap-2">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  <span>Loading...</span>
-                </div>
-              ) : (
-                <SelectValue
-                  placeholder={
-                    selectedProject ? 'Select package' : 'Select project first'
-                  }
+            projectId={selectedProjectId}
+            enabled={Boolean(selectedProjectId)}
+            disabled={!selectedProjectId}
          />
-              )}
-            </SelectTrigger>
-            <SelectContent>
-              {packages.map((pkg) => (
-                <SelectItem key={pkg.id} value={pkg.id}>
-                  {pkg.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
        </div>

-        {/* Chainage Dropdown */}
        <div className="space-y-2">
          <Label htmlFor="chainage" className="text-sm font-semibold">
            Segment
          </Label>
-          <Select
-            value={selectedChainage?.id || ''}
+          <SegmentSelect
+            value={selectedChainageId}
            onValueChange={handleChainageChange}
-            disabled={!selectedPackage || loadingChainages}
-          >
-            <SelectTrigger id="chainage" className="h-11">
-              {loadingChainages ? (
-                <div className="flex items-center gap-2">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  <span>Loading...</span>
-                </div>
-              ) : (
-                <SelectValue
-                  placeholder={
-                    selectedPackage ? 'Select segment' : 'Select package first'
-                  }
+            packageId={selectedPackageId}
+            enabled={Boolean(selectedPackageId)}
+            disabled={!selectedPackageId}
          />
-              )}
-            </SelectTrigger>
-            <SelectContent>
-              {chainages.map((chn) => (
-                <SelectItem key={chn.id} value={chn.id}>
-                  <div className="flex flex-col gap-0.5 py-0.5">
-                    <span className="font-semibold text-sm">
-                      {chn.segment_name}
-                    </span>
-                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground font-medium">
-                      <span>
-                        {chn.chainage_start_km}-{chn.chainage_end_km} km
-                      </span>
-                      <span className="h-2.5 w-px bg-border" />
-                      <span className="flex items-center gap-1 uppercase">
-                        {chn.direction === 'UP' ? (
-                          <ArrowUp className="h-2.5 w-2.5" />
-                        ) : (
-                          <ArrowDown className="h-2.5 w-2.5" />
-                        )}
-                        {chn.direction}
-                      </span>
-                    </div>
-                  </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
        </div>
      </div>

--- a/src/constants/apiRoutes.ts
+++ b/src/constants/apiRoutes.ts
@@ -51,9 +51,7 @@ export const API_ROUTES = {
    OVERVIEW: 'biz/api/v1/dashboard/overview',
  },
  VIDEOS: {
-    LIST: '/videos',
    UPLOAD: '/biz/api/v1/upload',
-    STATUS: (id: string) => `/status/${id}`,
    RESULTS: (id: string) => `/biz/api/v1/results/${id}/completed`,
  },
 } as const;
--- a/src/lib/video-storage.ts
+++ b/src/lib/video-storage.ts
@@ -1,112 +0,0 @@
-/**
- * IndexedDB storage for video files
- * Used to persist video files across page navigations
- */
-
-const DB_NAME = 'visionroad_db';
-const DB_VERSION = 1;
-const VIDEO_STORE = 'videos';
-
-let db: IDBDatabase | null = null;
-
-/**
- * Open the IndexedDB database
- */
-async function openDB(): Promise<IDBDatabase> {
-  if (db) return db;
-
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open(DB_NAME, DB_VERSION);
-
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => {
-      db = request.result;
-      resolve(db);
-    };
-
-    request.onupgradeneeded = (event) => {
-      const database = (event.target as IDBOpenDBRequest).result;
-      if (!database.objectStoreNames.contains(VIDEO_STORE)) {
-        database.createObjectStore(VIDEO_STORE, { keyPath: 'id' });
-      }
-    };
-  });
-}
-
-/**
- * Store a video file in IndexedDB
- */
-export async function storeVideoFile(
-  videoId: string,
-  file: File,
-): Promise<void> {
-  const database = await openDB();
-
-  return new Promise((resolve, reject) => {
-    const transaction = database.transaction([VIDEO_STORE], 'readwrite');
-    const store = transaction.objectStore(VIDEO_STORE);
-
-    const request = store.put({
-      id: videoId,
-      file: file,
-      timestamp: Date.now(),
-    });
-
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve();
-  });
-}
-
-/**
- * Retrieve a video file from IndexedDB
- */
-export async function getVideoFile(videoId: string): Promise<File | null> {
-  const database = await openDB();
-
-  return new Promise((resolve, reject) => {
-    const transaction = database.transaction([VIDEO_STORE], 'readonly');
-    const store = transaction.objectStore(VIDEO_STORE);
-
-    const request = store.get(videoId);
-
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => {
-      const result = request.result;
-      resolve(result ? result.file : null);
-    };
-  });
-}
-
-/**
- * Clear a video file from IndexedDB
- */
-export async function clearVideoFile(videoId: string): Promise<void> {
-  const database = await openDB();
-
-  return new Promise((resolve, reject) => {
-    const transaction = database.transaction([VIDEO_STORE], 'readwrite');
-    const store = transaction.objectStore(VIDEO_STORE);
-
-    const request = store.delete(videoId);
-
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve();
-  });
-}
-
-/**
- * Clear all video files from IndexedDB
- */
-export async function clearAllVideos(): Promise<void> {
-  const database = await openDB();
-
-  return new Promise((resolve, reject) => {
-    const transaction = database.transaction([VIDEO_STORE], 'readwrite');
-    const store = transaction.objectStore(VIDEO_STORE);
-
-    const request = store.clear();
-
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve();
-  });
-}
--- a/src/services/api/chainage.service.ts
+++ b/src/services/api/chainage.service.ts
@@ -16,14 +16,14 @@ export const chainageService = {
   * Fetch all chainages
   */
  getChainages: async (
-    params?: PaginationParams,
+    params?: PaginationParams & { search_term?: string },
  ): Promise<PaginatedResponse<Chainage>> => {
    const skip = params?.skip ?? 0;
    const limit = params?.limit ?? 100;
    const response = await axiosClient.get<PaginatedResponse<Chainage>>(
      API_ROUTES.CHAINAGES.BASE,
      {
-        params: { skip, limit },
+        params: { skip, limit, search_term: params?.search_term },
      },
    );
    return response.data;
@@ -34,15 +34,30 @@ export const chainageService = {
   */
  getChainagesByPackage: async (
    packageId: string,
-    params?: PaginationParams,
+    params?: PaginationParams & { search_term?: string },
  ): Promise<PaginatedResponse<Chainage>> => {
    const skip = params?.skip ?? 0;
    const limit = params?.limit ?? 100;
    const response = await axiosClient.get<PaginatedResponse<Chainage>>(
      API_ROUTES.CHAINAGES.BASE,
      {
-        params: { package_id: packageId, skip, limit },
+        params: {
+          package_id: packageId,
+          skip,
+          limit,
+          search_term: params?.search_term,
        },
+      },
+    );
+    return response.data;
+  },
+
+  /**
+   * Fetch a chainage by ID
+   */
+  getChainageById: async (chainageId: string): Promise<Chainage> => {
+    const response = await axiosClient.get<Chainage>(
+      API_ROUTES.CHAINAGES.DETAIL(chainageId),
    );
    return response.data;
  },
--- a/src/services/api/index.ts
+++ b/src/services/api/index.ts
@@ -5,7 +5,6 @@ export * from './auth.service';
 export { chainageService } from './chainage.service';
 export * from './video.service';
 export * from './detection.service';
-export * from './session.service';
 export * from './permission.service';
 export * from './role.service';
 export * from './user.service';
--- a/src/services/api/package.service.ts
+++ b/src/services/api/package.service.ts
@@ -16,14 +16,14 @@ export const packageService = {
   * Fetch all packages
   */
  getPackages: async (
-    params?: PaginationParams,
+    params?: PaginationParams & { search_term?: string },
  ): Promise<PaginatedResponse<Package>> => {
    const skip = params?.skip ?? 0;
    const limit = params?.limit ?? 100;
    const response = await axiosClient.get<PaginatedResponse<Package>>(
      API_ROUTES.PACKAGES.BASE,
      {
-        params: { skip, limit },
+        params: { skip, limit, search_term: params?.search_term },
      },
    );
    return response.data;
@@ -34,15 +34,30 @@ export const packageService = {
   */
  getPackagesByProject: async (
    projectId: string,
-    params?: PaginationParams,
+    params?: PaginationParams & { search_term?: string },
  ): Promise<PaginatedResponse<Package>> => {
    const skip = params?.skip ?? 0;
    const limit = params?.limit ?? 100;
    const response = await axiosClient.get<PaginatedResponse<Package>>(
      API_ROUTES.PACKAGES.BASE,
      {
-        params: { project_id: projectId, skip, limit },
+        params: {
+          project_id: projectId,
+          skip,
+          limit,
+          search_term: params?.search_term,
        },
+      },
+    );
+    return response.data;
+  },
+
+  /**
+   * Fetch a package by ID
+   */
+  getPackageById: async (packageId: string): Promise<Package> => {
+    const response = await axiosClient.get<Package>(
+      API_ROUTES.PACKAGES.DETAIL(packageId),
    );
    return response.data;
  },
--- a/src/services/api/project.service.ts
+++ b/src/services/api/project.service.ts
@@ -16,19 +16,29 @@ export const projectService = {
   * Fetch all projects
   */
  getProjects: async (
-    params?: PaginationParams,
+    params?: PaginationParams & { search_term?: string },
  ): Promise<PaginatedResponse<Project>> => {
    const skip = params?.skip ?? 0;
    const limit = params?.limit ?? 100;
    const response = await axiosClient.get<PaginatedResponse<Project>>(
      API_ROUTES.PROJECTS.BASE,
      {
-        params: { skip, limit },
+        params: { skip, limit, search_term: params?.search_term },
      },
    );
    return response.data;
  },

+  /**
+   * Fetch a project by ID
+   */
+  getProjectById: async (projectId: string): Promise<Project> => {
+    const response = await axiosClient.get<Project>(
+      API_ROUTES.PROJECTS.DETAIL(projectId),
+    );
+    return response.data;
+  },
+
  /**
   * Create a new project
   */
--- a/src/services/api/session.service.ts
+++ b/src/services/api/session.service.ts
@@ -1,73 +0,0 @@
-import { SessionContext, VideoResultData, emptySessionContext } from '@/types';
-
-// Session Storage Keys
-const SESSION_KEY = 'visionroad_session';
-const VIDEO_DATA_KEY = 'visionroad_video_data';
-const DETECTION_TYPE_KEY = 'visionroad_detection_type';
-
-/**
- * Session Service
- */
-export const sessionService = {
-  /**
-   * Save session to localStorage
-   */
-  saveSession: (session: SessionContext): void => {
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(SESSION_KEY, JSON.stringify(session));
-    }
-  },
-
-  /**
-   * Load session from localStorage
-   */
-  loadSession: (): SessionContext => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(SESSION_KEY);
-      if (stored) {
-        return JSON.parse(stored);
-      }
-    }
-    return emptySessionContext;
-  },
-
-  /**
-   * Clear all session data
-   */
-  clearSession: (): void => {
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem(SESSION_KEY);
-      localStorage.removeItem(VIDEO_DATA_KEY);
-      localStorage.removeItem(DETECTION_TYPE_KEY);
-    }
-  },
-
-  /**
-   * Save video result data
-   */
-  saveVideoData: (data: VideoResultData): void => {
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(VIDEO_DATA_KEY, JSON.stringify(data));
-    }
-  },
-
-  /**
-   * Load video result data
-   */
-  loadVideoData: (): VideoResultData | null => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(VIDEO_DATA_KEY);
-      if (stored) {
-        return JSON.parse(stored);
-      }
-    }
-    return null;
-  },
-
-  /**
-   * Check if session is complete
-   */
-  isSessionValid: (session: SessionContext): boolean => {
-    return !!(session.projectId && session.packageId && session.chainageId);
-  },
-};
--- a/src/services/api/video.service.ts
+++ b/src/services/api/video.service.ts
@@ -1,55 +1,11 @@
 import axiosClient from '../axios/axios';
 import { API_ROUTES } from '@/constants/apiRoutes';
-import { CompletedVideoResult, Video, PaginationParams } from '@/types';
+import { CompletedVideoResult } from '@/types';

 /**
 * Video Service
 */
 export const videoService = {
-  /**
-   * Fetch all videos and transform them to match the Video interface
-   */
-  getVideos: async (params?: PaginationParams): Promise<Video[]> => {
-    const skip = params?.skip ?? 0;
-    const limit = params?.limit ?? 100;
-
-    const response = await axiosClient.get<{
-      videos: Array<{
-        video_id: string;
-        status: string;
-        progress: number;
-        summary?: {
-          unique_defected_sign_board?: number;
-          unique_pothole?: number;
-          unique_road_crack?: number;
-          unique_damaged_road_marking?: number;
-          unique_good_sign_board?: number;
-          total_road_damage?: number;
-          total_detections?: number;
-        };
-      }>;
-    }>(API_ROUTES.VIDEOS.LIST, {
-      params: { skip, limit },
-    });
-
-    // Transform the response to match our Video interface
-    return response.data.videos.map((v) => ({
-      id: v.video_id,
-      filename: v.video_id,
-      detection_type: 'pot-sign-detection' as const,
-      status: v.status as Video['status'],
-      unique_defected_sign_board: v.summary?.unique_defected_sign_board,
-      unique_pothole: v.summary?.unique_pothole,
-      unique_road_crack: v.summary?.unique_road_crack,
-      unique_damaged_road_marking: v.summary?.unique_damaged_road_marking,
-      unique_good_sign_board: v.summary?.unique_good_sign_board,
-      total_road_damage: v.summary?.total_road_damage,
-      total_detections: v.summary?.total_detections,
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
-    }));
-  },
-
  /**
   * Upload a video for processing
   */
@@ -66,14 +22,6 @@ export const videoService = {
    return response.data;
  },

-  /**
-   * Get processing status of a video
-   */
-  getVideoStatus: async (videoId: string): Promise<any> => {
-    const response = await axiosClient.get(API_ROUTES.VIDEOS.STATUS(videoId));
-    return response.data;
-  },
-
  /**
   * Get analysis results for a video
   */
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,7 +2,6 @@ export * from './common';
 export * from './project';
 export * from './package';
 export * from './chainage';
-export * from './video';
 export * from './detection';
 export * from './analysis';
 export * from './session';
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -1,27 +0,0 @@
-/**
- * Video related types
- */
-export interface Video {
-  id: string;
-  filename: string;
-  detection_type:
-    | 'pothole-detection'
-    | 'sign-board-detection'
-    | 'pot-sign-detection';
-  status: 'pending' | 'processing' | 'completed' | 'failed';
-  unique_defected_sign_board?: number;
-  unique_pothole?: number;
-  unique_road_crack?: number;
-  unique_damaged_road_marking?: number;
-  unique_good_sign_board?: number;
-  unique_drain_issue?: number;
-  total_road_damage?: number;
-  total_detections?: number;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface VideoResultData {
-  videoId: string;
-  detectionType?: string;
-}
--- a/src/utils/routes.ts
+++ b/src/utils/routes.ts
@@ -15,5 +15,5 @@ export const ROUTES = {
  ACCESS: '/access',
  ACCOUNT: '/account',
  UPLOAD: '/upload',
-  RESULTS: '/results',
+  TICKET: '/ticket',
 } as const;