refactor: modularize road management modules

src/app/(modules)/segment/components/SegmentColumns.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { ArrowDownCircle, ArrowUpCircle, MapPin, Milestone } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Chainage, Package, Project } from '@/types';
+
+function EmptyValue() {
+  return <span className="text-muted-foreground">-</span>;
+}
+
+function StateBadges({ value }: { value: string | null }) {
+  if (!value) {
+    return <EmptyValue />;
+  }
+
+  const states = value
+    .split(',')
+    .map((state) => state.trim())
+    .filter(Boolean);
+
+  if (!states.length) {
+    return <EmptyValue />;
+  }
+
+  const [firstState, ...remainingStates] = states;
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <Badge variant="secondary">{firstState}</Badge>
+      {remainingStates.length > 0 ? (
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="flex items-center justify-center rounded-full border border-border/40 bg-muted/50 px-1.5 py-0.5 text-[10px] font-bold text-muted-foreground transition-colors hover:bg-muted"
+            >
+              +{remainingStates.length}
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-2" align="start">
+            <div className="flex flex-col gap-1.5">
+              <p className="mb-0.5 px-1 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                Other States
+              </p>
+              {remainingStates.map((state) => (
+                <Badge key={state} variant="secondary">
+                  {state}
+                </Badge>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      ) : null}
+    </div>
+  );
+}
+
+export function useSegmentColumns(projects: Project[], packages: Package[]) {
+  return useMemo<ColumnDef<Chainage>[]>(
+    () => [
+      {
+        accessorKey: 'segment_name',
+        header: 'Segment Name',
+        cell: ({ row }) => <div className="font-semibold">{row.original.segment_name}</div>,
+      },
+      {
+        accessorKey: 'package_id',
+        header: 'Package',
+        cell: ({ row }) =>
+          packages.find((pkg) => pkg.id === row.original.package_id)?.name ||
+          row.original.package_id,
+      },
+      {
+        id: 'project',
+        header: 'Project',
+        cell: ({ row }) => {
+          const pkg = packages.find((item) => item.id === row.original.package_id);
+          const project = projects.find((item) => item.id === pkg?.project_id);
+          return project?.name || <EmptyValue />;
+        },
+      },
+      {
+        id: 'project_state',
+        header: 'Project State',
+        cell: ({ row }) => {
+          const pkg = packages.find((item) => item.id === row.original.package_id);
+          const project = projects.find((item) => item.id === pkg?.project_id);
+          return <StateBadges value={project?.state ?? null} />;
+        },
+      },
+      {
+        id: 'chainage',
+        header: 'Segment Range (km)',
+        cell: ({ row }) => {
+          const segment = row.original;
+          return (
+            <div className="flex flex-row gap-2">
+              <Badge
+                variant="outline"
+                className="flex items-center gap-1.5 border-amber-500/50 font-bold text-amber-500"
+              >
+                <Milestone className="size-3" />
+                {segment.chainage_start_km} - {segment.chainage_end_km}
+              </Badge>
+              <Badge variant="secondary" className="gap-1.5">
+                {segment.direction === 'UP' ? (
+                  <ArrowUpCircle className="size-3" />
+                ) : (
+                  <ArrowDownCircle className="size-3" />
+                )}
+                {segment.direction}
+              </Badge>
+            </div>
+          );
+        },
+      },
+      {
+        id: 'start_gps',
+        header: 'Start GPS',
+        cell: ({ row }) => (
+          <Badge
+            variant="outline"
+            className="flex items-center gap-1.5 border-blue-500/50 font-bold text-blue-500"
+          >
+            <MapPin className="size-3" />
+            {row.original.start_lat.toFixed(4)}, {row.original.start_lng.toFixed(4)}
+          </Badge>
+        ),
+      },
+      {
+        id: 'end_gps',
+        header: 'End GPS',
+        cell: ({ row }) => (
+          <Badge
+            variant="outline"
+            className="flex items-center gap-1.5 border-blue-500/50 font-bold text-blue-500"
+          >
+            <MapPin className="size-3" />
+            {row.original.end_lat.toFixed(4)}, {row.original.end_lng.toFixed(4)}
+          </Badge>
+        ),
+      },
+    ],
+    [packages, projects],
+  );
+}

src/app/(modules)/segment/components/SegmentDialog.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
+import { Loader2, MapPin, Milestone } from 'lucide-react';
+
+import { FormField } from '@/components/form';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { Package, Project } from '@/types';
+
+import type { SegmentFormValues } from '../hooks/useSegmentForm';
+
+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;
+  onPackageChange: (packageId: string) => void;
+  direction: 'UP' | 'DOWN';
+  onDirectionChange: (direction: 'UP' | 'DOWN') => void;
+  register: UseFormRegister<SegmentFormValues>;
+  errors: FieldErrors<SegmentFormValues>;
+  touchedFields: UseFormReturn<SegmentFormValues>['formState']['touchedFields'];
+  onSubmit: ComponentProps<'form'>['onSubmit'];
+  canSubmit: boolean;
+  isSaving: boolean;
+}
+
+export function SegmentDialog({
+  open,
+  onOpenChange,
+  segmentId,
+  projects,
+  packages,
+  isProjectsLoading,
+  isPackagesLoading,
+  projectId,
+  onProjectChange,
+  packageId,
+  onPackageChange,
+  direction,
+  onDirectionChange,
+  register,
+  errors,
+  touchedFields,
+  onSubmit,
+  canSubmit,
+  isSaving,
+}: SegmentDialogProps) {
+  const getError = (field: keyof SegmentFormValues) =>
+    touchedFields[field] ? errors[field]?.message : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-2xl"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <DialogHeader className="gap-2">
+          <DialogTitle className="flex items-center gap-3 text-xl">
+            <div className="rounded-lg bg-primary p-2 text-primary-foreground shadow-sm">
+              <Milestone className="size-5" />
+            </div>
+            {segmentId ? 'Edit Segment' : 'Create Segment'}
+          </DialogTitle>
+          <DialogDescription className="text-sm">
+            {segmentId
+              ? 'Update the technical specifications for your road segment.'
+              : 'Select a project and package, then provide the segment data.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={onSubmit} className="space-y-6">
+          {!segmentId ? (
+            <div className="grid gap-5 md:grid-cols-2">
+              <FormField label="Project" 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-sm 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>
+                <input type="hidden" {...register('project_id')} value={projectId} readOnly />
+              </FormField>
+
+              <FormField label="Package" required error={getError('package_id')}>
+                <Select
+                  value={packageId}
+                  onValueChange={onPackageChange}
+                  disabled={!projectId || isPackagesLoading}
+                >
+                  <SelectTrigger aria-invalid={!!getError('package_id')}>
+                    {isPackagesLoading ? (
+                      <span className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Loader2 className="size-4 animate-spin" />
+                        Loading...
+                      </span>
+                    ) : (
+                      <SelectValue placeholder={projectId ? 'Choose a package' : 'Select project first'} />
+                    )}
+                  </SelectTrigger>
+                  <SelectContent>
+                    {packages.map((pkg) => (
+                      <SelectItem key={pkg.id} value={pkg.id}>
+                        {pkg.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <input type="hidden" {...register('package_id')} value={packageId} readOnly />
+              </FormField>
+            </div>
+          ) : null}
+
+          <div className="grid gap-5 md:grid-cols-2">
+            <FormField
+              id="segment-name"
+              label="Segment Name"
+              required
+              error={getError('segment_name')}
+            >
+              <Input
+                id="segment-name"
+                placeholder="e.g. Mumbai to Pune"
+                aria-invalid={!!getError('segment_name')}
+                {...register('segment_name')}
+              />
+            </FormField>
+
+            <FormField label="Direction" required>
+              <Select value={direction} onValueChange={onDirectionChange}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select direction" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="UP">UP</SelectItem>
+                  <SelectItem value="DOWN">DOWN</SelectItem>
+                </SelectContent>
+              </Select>
+            </FormField>
+
+            <FormField
+              id="segment-start-km"
+              label="Start (km)"
+              required
+              error={getError('chainage_start_km')}
+            >
+              <Input
+                id="segment-start-km"
+                type="number"
+                step="any"
+                min="0"
+                placeholder="0.0"
+                aria-invalid={!!getError('chainage_start_km')}
+                {...register('chainage_start_km')}
+              />
+            </FormField>
+
+            <FormField
+              id="segment-end-km"
+              label="End (km)"
+              required
+              error={getError('chainage_end_km')}
+            >
+              <Input
+                id="segment-end-km"
+                type="number"
+                step="any"
+                min="0"
+                placeholder="1.0"
+                aria-invalid={!!getError('chainage_end_km')}
+                {...register('chainage_end_km')}
+              />
+            </FormField>
+          </div>
+
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="space-y-4">
+              <p className="flex items-center gap-2 text-[11px] font-black tracking-widest text-muted-foreground">
+                <MapPin className="size-3.5 opacity-60" />
+                START COORDINATES
+              </p>
+              <div className="grid grid-cols-2 gap-4">
+                <FormField id="start-lat" label="Latitude" required error={getError('start_lat')}>
+                  <Input
+                    id="start-lat"
+                    type="number"
+                    step="any"
+                    min="-90"
+                    max="90"
+                    placeholder="-90 to 90"
+                    aria-invalid={!!getError('start_lat')}
+                    {...register('start_lat')}
+                  />
+                </FormField>
+                <FormField id="start-lng" label="Longitude" required error={getError('start_lng')}>
+                  <Input
+                    id="start-lng"
+                    type="number"
+                    step="any"
+                    min="-180"
+                    max="180"
+                    placeholder="-180 to 180"
+                    aria-invalid={!!getError('start_lng')}
+                    {...register('start_lng')}
+                  />
+                </FormField>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <p className="flex items-center gap-2 text-[11px] font-black tracking-widest text-muted-foreground">
+                <MapPin className="size-3.5 opacity-60" />
+                END COORDINATES
+              </p>
+              <div className="grid grid-cols-2 gap-4">
+                <FormField id="end-lat" label="Latitude" required error={getError('end_lat')}>
+                  <Input
+                    id="end-lat"
+                    type="number"
+                    step="any"
+                    min="-90"
+                    max="90"
+                    placeholder="-90 to 90"
+                    aria-invalid={!!getError('end_lat')}
+                    {...register('end_lat')}
+                  />
+                </FormField>
+                <FormField id="end-lng" label="Longitude" required error={getError('end_lng')}>
+                  <Input
+                    id="end-lng"
+                    type="number"
+                    step="any"
+                    min="-180"
+                    max="180"
+                    placeholder="-180 to 180"
+                    aria-invalid={!!getError('end_lng')}
+                    {...register('end_lng')}
+                  />
+                </FormField>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSaving || !canSubmit}>
+              {isSaving ? <Loader2 className="size-4 animate-spin" /> : null}
+              {segmentId ? 'Update Segment' : 'Create Segment'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/(modules)/segment/components/SegmentTable.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { DataTable } from '@/components/data-table';
+import type { Chainage } from '@/types';
+
+interface SegmentTableProps {
+  columns: ColumnDef<Chainage>[];
+  segments: Chainage[];
+  isLoading: boolean;
+  skip: number;
+  limit: number;
+  total: number;
+  onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
+  onEdit: (segment: Chainage) => void;
+  onDelete: (segment: Chainage) => void;
+}
+
+export function SegmentTable({
+  columns,
+  segments,
+  isLoading,
+  skip,
+  limit,
+  total,
+  onPageChange,
+  onLimitChange,
+  onEdit,
+  onDelete,
+}: SegmentTableProps) {
+  return (
+    <DataTable
+      title="Segments"
+      data={segments}
+      columns={columns}
+      onEdit={onEdit}
+      onDelete={onDelete}
+      isLoading={isLoading}
+      emptyTitle="No segments found."
+      pagination={{
+        skip,
+        limit,
+        totalItems: total,
+        onPageChange,
+        onLimitChange,
+      }}
+    />
+  );
+}

src/app/(modules)/segment/hooks/useSegmentFilters.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+export function useSegmentFilters() {
+  const [skip, setSkip] = useState(0);
+  const [limit, setLimitValue] = useState(10);
+
+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
+  return {
+    skip,
+    setSkip,
+    limit,
+    setLimit,
+  };
+}

src/app/(modules)/segment/hooks/useSegmentForm.ts

@@ -0,0 +1,207 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { chainageService } from '@/services/api';
+import type { Chainage, ChainageCreate, ChainageUpdate } from '@/types';
+
+import { segmentKeys } from '../queries/segmentKeys';
+
+const requiredNumber = (message: string) =>
+  z
+    .string()
+    .trim()
+    .min(1, message)
+    .refine((value) => Number.isFinite(Number(value)), { message: 'Enter a valid number' });
+
+const latitude = requiredNumber('Latitude is required').refine(
+  (value) => {
+    const numberValue = Number(value);
+    return numberValue >= -90 && numberValue <= 90;
+  },
+  { message: 'Latitude must be between -90 and 90' },
+);
+
+const longitude = requiredNumber('Longitude is required').refine(
+  (value) => {
+    const numberValue = Number(value);
+    return numberValue >= -180 && numberValue <= 180;
+  },
+  { message: 'Longitude must be between -180 and 180' },
+);
+
+const segmentFormSchema = z.object({
+  id: z.string().optional(),
+  project_id: z.string().trim().min(1, 'Project is required'),
+  package_id: z.string().trim().min(1, 'Package is required'),
+  segment_name: z.string().trim().min(1, 'Segment name is required'),
+  chainage_start_km: requiredNumber('Start km is required'),
+  chainage_end_km: requiredNumber('End km is required'),
+  start_lat: latitude,
+  start_lng: longitude,
+  end_lat: latitude,
+  end_lng: longitude,
+  direction: z.enum(['UP', 'DOWN']),
+});
+
+export type SegmentFormValues = z.infer<typeof segmentFormSchema>;
+
+const defaultValues: SegmentFormValues = {
+  project_id: '',
+  package_id: '',
+  segment_name: '',
+  chainage_start_km: '',
+  chainage_end_km: '',
+  start_lat: '',
+  start_lng: '',
+  end_lat: '',
+  end_lng: '',
+  direction: 'UP',
+};
+
+function toSegmentPayload(values: SegmentFormValues): ChainageCreate | ChainageUpdate {
+  return {
+    package_id: values.package_id,
+    segment_name: values.segment_name.trim(),
+    chainage_start_km: Number(values.chainage_start_km),
+    chainage_end_km: Number(values.chainage_end_km),
+    start_lat: Number(values.start_lat),
+    start_lng: Number(values.start_lng),
+    end_lat: Number(values.end_lat),
+    end_lng: Number(values.end_lng),
+    direction: values.direction,
+  };
+}
+
+export function useSegmentForm({ onSaved }: { onSaved: () => void }) {
+  const queryClient = useQueryClient();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+    formState: { errors, isSubmitting, touchedFields },
+  } = useForm<SegmentFormValues>({
+    defaultValues,
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(segmentFormSchema),
+  });
+
+  const segmentId = useWatch({ control, name: 'id' });
+  const projectId = useWatch({ control, name: 'project_id' }) || '';
+  const packageId = useWatch({ control, name: 'package_id' }) || '';
+  const direction = useWatch({ control, name: 'direction' }) || 'UP';
+  const segmentName = useWatch({ control, name: 'segment_name' }) || '';
+  const chainageStartKm = useWatch({ control, name: 'chainage_start_km' }) || '';
+  const chainageEndKm = useWatch({ control, name: 'chainage_end_km' }) || '';
+  const startLat = useWatch({ control, name: 'start_lat' }) || '';
+  const startLng = useWatch({ control, name: 'start_lng' }) || '';
+  const endLat = useWatch({ control, name: 'end_lat' }) || '';
+  const endLng = useWatch({ control, name: 'end_lng' }) || '';
+  const canSubmit =
+    projectId.trim().length > 0 &&
+    packageId.trim().length > 0 &&
+    segmentName.trim().length > 0 &&
+    chainageStartKm.trim().length > 0 &&
+    chainageEndKm.trim().length > 0 &&
+    startLat.trim().length > 0 &&
+    startLng.trim().length > 0 &&
+    endLat.trim().length > 0 &&
+    endLng.trim().length > 0;
+
+  const saveMutation = useMutation({
+    mutationFn: (values: SegmentFormValues) => {
+      const payload = toSegmentPayload(values);
+      return values.id
+        ? chainageService.updateChainage(values.id, payload)
+        : chainageService.createChainage(payload as ChainageCreate);
+    },
+    onSuccess: (_data, values) => {
+      toast.success(values.id ? 'Segment updated' : 'Segment created');
+      reset(defaultValues);
+      onSaved();
+      queryClient.invalidateQueries({ queryKey: segmentKeys.all });
+    },
+    onError: (_error, values) => {
+      toast.error(values.id ? 'Failed to update segment' : 'Failed to create segment');
+    },
+  });
+
+  const onSubmit = handleSubmit(
+    (values) => saveMutation.mutate(values),
+    (formErrors) => {
+      const firstMessage = Object.values(formErrors).find((error) => error?.message)?.message;
+      if (firstMessage) {
+        toast.error(String(firstMessage));
+      }
+    },
+  );
+
+  const openCreate = useCallback(() => {
+    reset(defaultValues);
+  }, [reset]);
+
+  const openEdit = useCallback(
+    (segment: Chainage, projectIdForSegment: string) => {
+      reset({
+        id: segment.id,
+        project_id: projectIdForSegment,
+        package_id: segment.package_id,
+        segment_name: segment.segment_name || '',
+        chainage_start_km: segment.chainage_start_km?.toString() || '',
+        chainage_end_km: segment.chainage_end_km?.toString() || '',
+        start_lat: segment.start_lat?.toString() || '',
+        start_lng: segment.start_lng?.toString() || '',
+        end_lat: segment.end_lat?.toString() || '',
+        end_lng: segment.end_lng?.toString() || '',
+        direction: segment.direction || 'UP',
+      });
+    },
+    [reset],
+  );
+
+  const setProjectId = useCallback(
+    (value: string) => {
+      setValue('project_id', value, { shouldDirty: true, shouldValidate: true });
+      setValue('package_id', '', { shouldDirty: true, shouldValidate: true });
+    },
+    [setValue],
+  );
+
+  const setPackageId = useCallback(
+    (value: string) => setValue('package_id', value, { shouldDirty: true, shouldValidate: true }),
+    [setValue],
+  );
+
+  const setDirection = useCallback(
+    (value: 'UP' | 'DOWN') =>
+      setValue('direction', value, { shouldDirty: true, shouldValidate: true }),
+    [setValue],
+  );
+
+  return {
+    register,
+    onSubmit,
+    openCreate,
+    openEdit,
+    resetForm: () => reset(defaultValues),
+    segmentId,
+    projectId,
+    setProjectId,
+    packageId,
+    setPackageId,
+    direction,
+    setDirection,
+    errors,
+    touchedFields,
+    canSubmit,
+    isSaving: isSubmitting || saveMutation.isPending,
+  };
+}

src/app/(modules)/segment/hooks/useSegmentQueries.ts

@@ -0,0 +1,65 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { toast } from 'sonner';
+
+import { chainageService, packageService, projectService } from '@/services/api';
+import type { Chainage, PaginationParams } from '@/types';
+
+import { segmentKeys } from '../queries/segmentKeys';
+
+interface UseSegmentsQueryParams {
+  skip: number;
+  limit: number;
+}
+
+export function useSegmentsQuery({ skip, limit }: UseSegmentsQueryParams) {
+  const listParams = useMemo<PaginationParams>(() => ({ skip, limit }), [limit, skip]);
+
+  return useQuery({
+    queryKey: segmentKeys.list(listParams),
+    queryFn: () => chainageService.getChainages(listParams),
+  });
+}
+
+export function useProjectOptionsQuery() {
+  return useQuery({
+    queryKey: ['projects', 'options'],
+    queryFn: () => projectService.getProjects({ skip: 0, limit: 1000 }),
+  });
+}
+
+export function useAllPackageOptionsQuery() {
+  return useQuery({
+    queryKey: ['packages', 'options'],
+    queryFn: () => packageService.getPackages({ skip: 0, limit: 1000 }),
+  });
+}
+
+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();
+
+  return useMutation({
+    mutationFn: (segment: Chainage) => chainageService.deleteChainage(segment.id),
+    onSuccess: (_data, segment) => {
+      toast.success('Segment deleted', {
+        description: `${segment.segment_name} has been removed from the system.`,
+      });
+      queryClient.invalidateQueries({ queryKey: segmentKeys.all });
+    },
+    onError: () => {
+      toast.error('Deletion failed', {
+        description: 'The segment could not be removed. Please try again.',
+      });
+    },
+  });
+}

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

@@ -1,829 +1,149 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Loader2,
-  CheckCircle2,
-  MapPin,
-  Navigation,
-  Milestone,
-  ArrowUpCircle,
-  ArrowDownCircle,
-} from 'lucide-react';
-import { DataTable } from '@/components/data-table';
+import { useCallback, useState } from 'react';
+import { Milestone, Plus } from 'lucide-react';
+
 import { PageHeader } from '@/components/page-header';
 import { PoweredBy } from '@/components/powered-by';
-import { projectService, packageService, chainageService } from '@/services/api';
-import { Project, Package as PackageType, Chainage, ChainageCreate, ChainageUpdate } from '@/types';
-import { ColumnDef } from '@tanstack/react-table';
-import { toast } from 'sonner';
-import { Badge } from '@/components/ui/badge';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import type { Chainage } from '@/types';
 
-export default function ChainagePage() {
-  const [chainages, setChainages] = useState<Chainage[]>([]);
-  const [totalItems, setTotalItems] = useState(0);
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [packages, setPackages] = useState<PackageType[]>([]);
-  const [allPackages, setAllPackages] = useState<PackageType[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [loadingProjects, setLoadingProjects] = useState(false);
-  const [loadingPackages, setLoadingPackages] = useState(false);
+import { SegmentDialog } from './components/SegmentDialog';
+import { SegmentTable } from './components/SegmentTable';
+import { useSegmentColumns } from './components/SegmentColumns';
+import { useSegmentFilters } from './hooks/useSegmentFilters';
+import { useSegmentForm } from './hooks/useSegmentForm';
+import {
+  useAllPackageOptionsQuery,
+  useDeleteSegmentMutation,
+  usePackagesByProjectQuery,
+  useProjectOptionsQuery,
+  useSegmentsQuery,
+} from './hooks/useSegmentQueries';
 
-  // Pagination state
-  const [skip, setSkip] = useState(0);
-  const [limit, setLimit] = useState(10);
+export default function SegmentPage() {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const { skip, setSkip, limit, setLimit } = useSegmentFilters();
+  const segmentsQuery = useSegmentsQuery({ skip, limit });
+  const projectsQuery = useProjectOptionsQuery();
+  const allPackagesQuery = useAllPackageOptionsQuery();
+  const deleteSegmentMutation = useDeleteSegmentMutation();
+  const segmentForm = useSegmentForm({
+    onSaved: () => setIsDialogOpen(false),
+  });
+  const {
+    register,
+    onSubmit,
+    openCreate: prepareCreateSegment,
+    openEdit: prepareEditSegment,
+    resetForm,
+    segmentId,
+    projectId,
+    setProjectId,
+    packageId,
+    setPackageId,
+    direction,
+    setDirection,
+    errors,
+    touchedFields,
+    canSubmit,
+    isSaving,
+  } = segmentForm;
+  const projectPackagesQuery = usePackagesByProjectQuery(projectId, isDialogOpen);
 
-  // Editing state
-  const [isEditing, setIsEditing] = useState(false);
-  const [currentChainage, setCurrentChainage] = useState<Chainage | null>(null);
+  const openCreate = useCallback(() => {
+    prepareCreateSegment();
+    setIsDialogOpen(true);
+  }, [prepareCreateSegment]);
 
-  // Form fields
-  const [selectedProjectId, setSelectedProjectId] = useState('');
-  const [selectedPackageId, setSelectedPackageId] = useState('');
-  const [segmentName, setSegmentName] = useState('');
-  const [chainageStartKm, setChainageStartKm] = useState('');
-  const [chainageEndKm, setChainageEndKm] = useState('');
-  const [startLat, setStartLat] = useState('');
-  const [startLng, setStartLng] = useState('');
-  const [endLat, setEndLat] = useState('');
-  const [endLng, setEndLng] = useState('');
-  const [direction, setDirection] = useState<'UP' | 'DOWN'>('UP');
+  const openEdit = useCallback(
+    (segment: Chainage) => {
+      const pkg = allPackagesQuery.data?.items.find((item) => item.id === segment.package_id);
+      prepareEditSegment(segment, pkg?.project_id || '');
+      setIsDialogOpen(true);
+    },
+    [allPackagesQuery.data?.items, prepareEditSegment],
+  );
 
-  // Load chainages and projects
-  const loadChainages = async (currentSkip = skip, currentLimit = limit) => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      const data = await chainageService.getChainages({ skip: currentSkip, limit: currentLimit });
-      setChainages(data.items);
-      setTotalItems(data.totalItems);
-    } catch (err) {
-      setError('Failed to load segments. Please check if the backend is running.');
-    } finally {
-      // Add a small delay for animation stability
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 800);
-    }
-  };
-
-  const loadProjects = async () => {
-    try {
-      setLoadingProjects(true);
-      const data = await projectService.getProjects({ skip: 0, limit: 1000 });
-      setProjects(data.items);
-    } catch (err) {
-      setError('Failed to load projects.');
-    } finally {
-      setLoadingProjects(false);
-    }
-  };
-
-  const loadAllPackages = async () => {
-    try {
-      const data = await packageService.getPackages({ skip: 0, limit: 1000 });
-      setAllPackages(data.items);
-    } catch (err) {
-      console.error('Failed to load all packages');
-    }
-  };
-
-  useEffect(() => {
-    loadChainages(skip, limit);
-    loadProjects();
-    loadAllPackages();
-  }, [skip, limit]);
-
-  // Load packages when project changes
-  useEffect(() => {
-    if (!selectedProjectId) {
-      setPackages([]);
-      if (!isEditing) setSelectedPackageId('');
-      return;
-    }
-
-    const loadPackagesForProject = async () => {
-      try {
-        setLoadingPackages(true);
-        if (!isEditing) setSelectedPackageId('');
-        const data = await packageService.getPackagesByProject(selectedProjectId, {
-          skip: 0,
-          limit: 1000,
-        });
-        setPackages(data.items);
-      } catch (err) {
-        setError('Failed to load packages for the selected project.');
-      } finally {
-        setLoadingPackages(false);
+  const handleDialogOpenChange = useCallback(
+    (open: boolean) => {
+      setIsDialogOpen(open);
+      if (!open) {
+        resetForm();
       }
-    };
-    loadPackagesForProject();
-  }, [selectedProjectId, isEditing]);
+    },
+    [resetForm],
+  );
 
-  const resetForm = () => {
-    setSelectedProjectId('');
-    setSelectedPackageId('');
-    setSegmentName('');
-    setChainageStartKm('');
-    setChainageEndKm('');
-    setStartLat('');
-    setStartLng('');
-    setEndLat('');
-    setEndLng('');
-    setDirection('UP');
-    setError(null);
-    setIsEditing(false);
-    setCurrentChainage(null);
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedPackageId && !isEditing) {
-      setError('Please select a project and package first');
-      return;
-    }
-    if (!segmentName.trim()) {
-      setError('Segment name is required');
-      return;
-    }
-    if (!startLat || !startLng || !endLat || !endLng) {
-      setError('All GPS coordinates are required for segments');
-      return;
-    }
-    const parsedStartLat = parseFloat(startLat);
-    const parsedStartLng = parseFloat(startLng);
-    const parsedEndLat = parseFloat(endLat);
-    const parsedEndLng = parseFloat(endLng);
-
-    if (parsedStartLat < -90 || parsedStartLat > 90 || parsedEndLat < -90 || parsedEndLat > 90) {
-      setError('Latitude values must be between -90 and 90');
-      return;
-    }
-    if (
-      parsedStartLng < -180 ||
-      parsedStartLng > 180 ||
-      parsedEndLng < -180 ||
-      parsedEndLng > 180
-    ) {
-      setError('Longitude values must be between -180 and 180');
-      return;
-    }
-    if (!chainageStartKm || !chainageEndKm) {
-      setError('Segment start and end values are required');
-      return;
-    }
-
-    setIsSubmitting(true);
-    setError(null);
-
-    try {
-      if (isEditing && currentChainage) {
-        const data: ChainageUpdate = {
-          segment_name: segmentName.trim(),
-          chainage_start_km: parseFloat(chainageStartKm),
-          chainage_end_km: parseFloat(chainageEndKm),
-          start_lat: parsedStartLat,
-          start_lng: parsedStartLng,
-          end_lat: parsedEndLat,
-          end_lng: parsedEndLng,
-          direction: direction as 'UP' | 'DOWN',
-        };
-        await chainageService.updateChainage(currentChainage.id, data);
-        toast.success('Segment Updated', {
-          description: `${segmentName} has been updated successfully at ${new Date().toLocaleTimeString()}`,
-        });
-      } else {
-        const data: ChainageCreate = {
-          package_id: selectedPackageId,
-          segment_name: segmentName.trim(),
-          chainage_start_km: parseFloat(chainageStartKm),
-          chainage_end_km: parseFloat(chainageEndKm),
-          start_lat: parsedStartLat,
-          start_lng: parsedStartLng,
-          end_lat: parsedEndLat,
-          end_lng: parsedEndLng,
-          direction: direction,
-        };
-        await chainageService.createChainage(data);
-        toast.success('Segment Created', {
-          description: `${segmentName} has been established successfully at ${new Date().toLocaleTimeString()}`,
-        });
+  const deleteSegment = useCallback(
+    (segment: Chainage) => {
+      if (!confirm(`Are you sure you want to delete segment "${segment.segment_name}"?`)) {
+        return;
       }
-
-      // Refresh chainages list
-      await loadChainages();
-
-      // Close modal and reset form immediately
-      setIsModalOpen(false);
-      resetForm();
-    } catch (err) {
-      const message =
-        err instanceof Error
-          ? err.message
-          : `Failed to ${isEditing ? 'update' : 'create'} segment`;
-      setError(message);
-      toast.error('Operation Failed', {
-        description: message,
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleEdit = (chainage: Chainage) => {
-    setIsEditing(true);
-    setCurrentChainage(chainage);
-
-    // Find project for this package
-    const pkg = allPackages.find((p) => p.id === chainage.package_id);
-    if (pkg) {
-      setSelectedProjectId(pkg.project_id);
-      setSelectedPackageId(chainage.package_id);
-    }
-
-    setSegmentName(chainage.segment_name || '');
-    setChainageStartKm(chainage.chainage_start_km?.toString() || '');
-    setChainageEndKm(chainage.chainage_end_km?.toString() || '');
-    setStartLat(chainage.start_lat.toString());
-    setStartLng(chainage.start_lng.toString());
-    setEndLat(chainage.end_lat.toString());
-    setEndLng(chainage.end_lng.toString());
-    setDirection(chainage.direction);
-    setIsModalOpen(true);
-  };
-
-  const handleDelete = async (chainage: Chainage) => {
-    if (!confirm(`Are you sure you want to delete segment "${chainage.segment_name}"?`)) return;
-
-    try {
-      setIsLoading(true);
-      await chainageService.deleteChainage(chainage.id);
-      toast.success('Segment Deleted', {
-        description: `${chainage.segment_name} has been removed from the system.`,
-      });
-      await loadChainages();
-    } catch (err) {
-      setError('Failed to delete segment');
-      toast.error('Deletion Failed', {
-        description: 'The segment could not be removed. Please try again.',
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const getPackageName = (packageId: string) => {
-    return allPackages.find((p) => p.id === packageId)?.name || packageId;
-  };
-
-  const isFormComplete =
-    selectedPackageId &&
-    segmentName.trim() &&
-    startLat &&
-    startLng &&
-    endLat &&
-    endLng &&
-    chainageStartKm &&
-    chainageEndKm;
-
-  const columns: ColumnDef<Chainage>[] = [
-    {
-      accessorKey: 'segment_name',
-      header: 'Segment Name',
-      cell: ({ row }) => <div className="font-semibold">{row.original.segment_name}</div>,
+      deleteSegmentMutation.mutate(segment);
     },
-    {
-      accessorKey: 'package_id',
-      header: 'Package',
-      cell: ({ row }) => getPackageName(row.original.package_id),
-    },
-    {
-      accessorKey: 'project',
-      header: 'Project',
-      cell: ({ row }) => {
-        const chainage = row.original;
-        const pkg = allPackages.find((p) => p.id === chainage.package_id);
-        const project = projects.find((p) => p.id === pkg?.project_id);
-        return project?.name || '—';
-      },
-    },
-    {
-      id: 'project_state',
-      header: 'Project State',
-      cell: ({ row }) => {
-        const chainage = row.original;
-        const pkg = allPackages.find((p) => p.id === chainage.package_id);
-        const project = projects.find((p) => p.id === pkg?.project_id);
-        if (!project?.state) return <span className="">—</span>;
+    [deleteSegmentMutation],
+  );
 
-        const states = project.state
-          .split(',')
-          .map((s) => s.trim())
-          .filter(Boolean);
-        if (states.length === 0) return <span className="">—</span>;
-
-        const firstState = states[0];
-        const remainingStates = states.slice(1);
-
-        return (
-          <div className="flex items-center gap-1.5">
-            <Badge variant="secondary">{firstState}</Badge>
-
-            {remainingStates.length > 0 && (
-              <Popover>
-                <PopoverTrigger asChild>
-                  <button className="flex items-center justify-center rounded-full bg-muted/50 hover:bg-muted px-1.5 py-0.5 text-[10px] font-bold text-muted-foreground transition-colors border border-border/40">
-                    +{remainingStates.length}
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-2" align="start">
-                  <div className="flex flex-col gap-1.5">
-                    <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-0.5 px-1">
-                      Other States
-                    </p>
-                    {remainingStates.map((item, idx) => (
-                      <Badge key={idx} variant="secondary">
-                        {item}
-                      </Badge>
-                    ))}
-                  </div>
-                </PopoverContent>
-              </Popover>
-            )}
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: 'chainage',
-      header: 'Segment Range (km)',
-      cell: ({ row }) => {
-        const chainage = row.original;
-        return (
-          <div className="flex flex-row gap-2">
-            <Badge
-              variant="outline"
-              className="flex items-center gap-1.5 border-amber-500/50 text-amber-500 font-bold whitespace-nowrap"
-            >
-              <Milestone className="h-3 w-3" />
-              {chainage.chainage_start_km} - {chainage.chainage_end_km}
-            </Badge>
-            <Badge variant="secondary">
-              {chainage.direction === 'UP' ? (
-                <ArrowUpCircle className="h-3 w-3" />
-              ) : (
-                <ArrowDownCircle className="h-3 w-3" />
-              )}
-              {chainage.direction}
-            </Badge>
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: 'start_gps',
-      header: 'Start GPS',
-      cell: ({ row }) => (
-        <Badge
-          variant="outline"
-          className="flex items-center gap-1.5 border-blue-500/50 text-blue-500 font-bold whitespace-nowrap"
-        >
-          <MapPin className="h-3 w-3" />
-          {row.original.start_lat.toFixed(4)}, {row.original.start_lng.toFixed(4)}
-        </Badge>
-      ),
-    },
-    {
-      accessorKey: 'end_gps',
-      header: 'End GPS',
-      cell: ({ row }) => (
-        <Badge
-          variant="outline"
-          className="flex items-center gap-1.5 border-blue-500/50 text-blue-500 font-bold whitespace-nowrap"
-        >
-          <MapPin className="h-3 w-3" />
-          {row.original.end_lat.toFixed(4)}, {row.original.end_lng.toFixed(4)}
-        </Badge>
-      ),
-    },
-  ];
+  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);
 
   return (
     <>
-      <main className="relative z-10">
-        {/* Refined Header */}
-        <div className="mb-8">
-          <PageHeader
-            title="Segment Management"
-            description="Manage road segments"
-            icon={Milestone}
-            actions={
-              <Button
-                onClick={() => {
-                  setIsEditing(false);
-                  setIsModalOpen(true);
-                }}
-              >
-                <Milestone className="mr-2 h-4 w-4" />
-                Add Segment
-              </Button>
-            }
-          />
-        </div>
+      <main className="relative z-10 space-y-5">
+        <PageHeader
+          title="Segment Management"
+          description="Manage road segments"
+          icon={Milestone}
+          actions={
+            <Button onClick={openCreate} size="sm">
+              <Plus />
+              Add Segment
+            </Button>
+          }
+        />
 
-        {/* Data Table */}
-        <div>
-          <DataTable
-            title="Segments"
-            data={chainages}
-            columns={columns}
-            onEdit={handleEdit}
-            onDelete={handleDelete}
-            isLoading={isLoading}
-            pagination={{
-              skip,
-              limit,
-              totalItems,
-              onPageChange: setSkip,
-              onLimitChange: (newLimit) => {
-                setLimit(newLimit);
-                setSkip(0); // Reset skip when limit changes
-              },
-            }}
-          />
-        </div>
+        <SegmentTable
+          columns={columns}
+          segments={segments}
+          isLoading={segmentsQuery.isLoading || deleteSegmentMutation.isPending}
+          skip={skip}
+          limit={limit}
+          total={total}
+          onPageChange={setSkip}
+          onLimitChange={setLimit}
+          onEdit={openEdit}
+          onDelete={deleteSegment}
+        />
 
         <PoweredBy />
       </main>
 
-      {/* Modal Dialog */}
-      <Dialog
-        open={isModalOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setIsModalOpen(false);
-            resetForm();
-          } else {
-            setIsModalOpen(true);
-          }
-        }}
-      >
-        <DialogContent
-          className="max-h-[90vh] overflow-y-auto sm:max-w-2xl"
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          <DialogHeader className="gap-2">
-            <DialogTitle className="flex items-center gap-3 text-xl">
-              <div className="p-2 rounded-lg bg-primary text-primary-foreground shadow-sm">
-                <Milestone className="h-5 w-5" />
-              </div>
-              {isEditing ? 'Edit Segment' : 'Create Segment'}
-            </DialogTitle>
-            <DialogDescription className="text-sm">
-              {isEditing
-                ? 'Update the technical specifications for your road segment.'
-                : 'Select a project & package, then provide the essential segment data.'}
-            </DialogDescription>
-          </DialogHeader>
-
-          <form onSubmit={handleSubmit} className="space-y-6">
-            {!isEditing && (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {/* Step 1: Select Project */}
-                <div className="space-y-3">
-                  <div className="flex items-center gap-2.5">
-                    <div className="w-5 h-5 rounded-full bg-primary/10 text-primary flex items-center justify-center text-[10px] font-bold uppercase">
-                      01
-                    </div>
-                    <p className="text-[11px] font-black text-muted-foreground uppercase tracking-widest">
-                      Select Project
-                    </p>
-                  </div>
-                  <Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
-                    <SelectTrigger className="h-11 bg-muted/10 border-border/40 focus:ring-primary/20">
-                      {loadingProjects ? (
-                        <div className="flex items-center gap-2">
-                          <Loader2 className="h-4 w-4 animate-spin text-primary" />
-                          <span className="text-muted-foreground text-xs">Loading...</span>
-                        </div>
-                      ) : (
-                        <SelectValue placeholder="Choose a project..." />
-                      )}
-                    </SelectTrigger>
-                    <SelectContent>
-                      {projects.map((project) => (
-                        <SelectItem key={project.id} value={project.id} className="py-2.5">
-                          <span className="font-semibold">{project.name}</span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                {/* Step 2: Select Package */}
-                <div
-                  className={`space-y-3 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}
-                >
-                  <div className="flex items-center gap-2.5">
-                    <div
-                      className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold uppercase ${selectedProjectId ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}
-                    >
-                      02
-                    </div>
-                    <p className="text-[11px] font-black text-muted-foreground uppercase tracking-widest">
-                      Select Package
-                    </p>
-                  </div>
-                  <Select
-                    value={selectedPackageId}
-                    onValueChange={setSelectedPackageId}
-                    disabled={!selectedProjectId}
-                  >
-                    <SelectTrigger className="h-11 bg-muted/10 border-border/40 focus:ring-primary/20">
-                      {loadingPackages ? (
-                        <div className="flex items-center gap-2">
-                          <Loader2 className="h-4 w-4 animate-spin text-primary" />
-                          <span className="text-muted-foreground text-xs">Loading...</span>
-                        </div>
-                      ) : (
-                        <SelectValue
-                          placeholder={
-                            selectedProjectId ? 'Choose a package...' : 'Select project first'
-                          }
-                        />
-                      )}
-                    </SelectTrigger>
-                    <SelectContent>
-                      {packages.map((pkg) => (
-                        <SelectItem key={pkg.id} value={pkg.id} className="py-2.5">
-                          <span className="font-semibold">{pkg.name}</span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            )}
-
-            {/* Step 3: Chainage Details */}
-            <div
-              className={`space-y-4 ${selectedPackageId || isEditing ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}
-            >
-              {!isEditing && (
-                <div className="flex items-center gap-2.5">
-                  <div
-                    className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold uppercase ${selectedPackageId ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}
-                  >
-                    03
-                  </div>
-                  <p className="text-[11px] font-black text-muted-foreground uppercase tracking-widest">
-                    Segment Information
-                  </p>
-                </div>
-              )}
-
-              {/* Segment Name & Chainage Row */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="segment"
-                    className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider"
-                  >
-                    Segment Name <span className="text-destructive">*</span>
-                  </Label>
-                  <Input
-                    id="segment"
-                    value={segmentName}
-                    onChange={(e) => setSegmentName(e.target.value)}
-                    placeholder="e.g. Mumbai to Pune"
-                    className="h-11 bg-muted/20 border-border/60"
-                    required
-                  />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label
-                      htmlFor="ch-start"
-                      className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider"
-                    >
-                      Start (km) <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      id="ch-start"
-                      type="number"
-                      step="any"
-                      min="0"
-                      value={chainageStartKm}
-                      onChange={(e) => setChainageStartKm(e.target.value)}
-                      placeholder="0.0"
-                      className="h-11 bg-muted/20 border-border/60 text-sm font-mono"
-                      required
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label
-                      htmlFor="ch-end"
-                      className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider"
-                    >
-                      End (km) <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      id="ch-end"
-                      type="number"
-                      step="any"
-                      min="0"
-                      value={chainageEndKm}
-                      onChange={(e) => setChainageEndKm(e.target.value)}
-                      placeholder="1.0"
-                      className="h-11 bg-muted/20 border-border/60 text-sm font-mono"
-                      required
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {/* Direction Row */}
-              <div className="space-y-3">
-                <Label
-                  htmlFor="direction"
-                  className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider"
-                >
-                  Direction <span className="text-destructive">*</span>
-                </Label>
-                <Select value={direction} onValueChange={(val: 'UP' | 'DOWN') => setDirection(val)}>
-                  <SelectTrigger className="h-11 bg-muted/20 border-border/60 focus:ring-primary/20">
-                    <SelectValue placeholder="Select Direction" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="UP" className="py-2.5">
-                      <span>UP</span>
-                    </SelectItem>
-                    <SelectItem value="DOWN" className="py-2.5">
-                      <span>DOWN</span>
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {/* GPS Coordinates Grid */}
-              <div className="space-y-6 pt-4">
-                <div className="space-y-3">
-                  <p className="text-[11px] font-black text-muted-foreground tracking-widest flex items-center gap-2">
-                    <MapPin className="h-3.5 w-3.5 opacity-60" /> START COORDINATES
-                    <span className="text-destructive">*</span>
-                  </p>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label
-                        htmlFor="s-lat"
-                        className="text-[10px] font-bold text-muted-foreground uppercase opacity-70"
-                      >
-                        Latitude
-                      </Label>
-                      <Input
-                        id="s-lat"
-                        type="number"
-                        step="any"
-                        min="-90"
-                        max="90"
-                        value={startLat}
-                        onChange={(e) => setStartLat(e.target.value)}
-                        placeholder="-90 to 90"
-                        className="h-10 bg-background/70 border-border/40 text-xs font-mono"
-                        required
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label
-                        htmlFor="s-lng"
-                        className="text-[10px] font-bold text-muted-foreground uppercase opacity-70"
-                      >
-                        Longitude
-                      </Label>
-                      <Input
-                        id="s-lng"
-                        type="number"
-                        step="any"
-                        min="-180"
-                        max="180"
-                        value={startLng}
-                        onChange={(e) => setStartLng(e.target.value)}
-                        placeholder="-180 to 180"
-                        className="h-10 bg-background/70 border-border/40 text-xs font-mono"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="space-y-3">
-                  <p className="text-[11px] font-black text-muted-foreground tracking-widest flex items-center gap-2">
-                    <MapPin className="h-3.5 w-3.5 opacity-60" /> END COORDINATES
-                    <span className="text-destructive">*</span>
-                  </p>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label
-                        htmlFor="e-lat"
-                        className="text-[10px] font-bold text-muted-foreground uppercase opacity-70"
-                      >
-                        Latitude
-                      </Label>
-                      <Input
-                        id="e-lat"
-                        type="number"
-                        step="any"
-                        min="-90"
-                        max="90"
-                        value={endLat}
-                        onChange={(e) => setEndLat(e.target.value)}
-                        placeholder="-90 to 90"
-                        className="h-10 bg-background/70 border-border/40 text-xs font-mono"
-                        required
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label
-                        htmlFor="e-lng"
-                        className="text-[10px] font-bold text-muted-foreground uppercase opacity-70"
-                      >
-                        Longitude
-                      </Label>
-                      <Input
-                        id="e-lng"
-                        type="number"
-                        step="any"
-                        min="-180"
-                        max="180"
-                        value={endLng}
-                        onChange={(e) => setEndLng(e.target.value)}
-                        placeholder="-180 to 180"
-                        className="h-10 bg-background/70 border-border/40 text-xs font-mono"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Submit Button */}
-            <div className="flex gap-4 pt-4">
-              <Button
-                className="flex-1"
-                type="button"
-                variant="outline"
-                onClick={() => {
-                  setIsModalOpen(false);
-                  resetForm();
-                }}
-                disabled={isSubmitting}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSubmitting || !isFormComplete} className="flex-1">
-                {isSubmitting ? (
-                  <div className="flex items-center gap-2">
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    <span>{isEditing ? 'Updating...' : 'Creating...'}</span>
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2">
-                    {isEditing ? (
-                      <CheckCircle2 className="h-4 w-4" />
-                    ) : (
-                      <Milestone className="h-4 w-4" />
-                    )}
-                    <span>{isEditing ? 'Update Segment' : 'Create Segment'}</span>
-                  </div>
-                )}
-              </Button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
+      <SegmentDialog
+        open={isDialogOpen}
+        onOpenChange={handleDialogOpenChange}
+        segmentId={segmentId}
+        projects={projects}
+        packages={projectPackages}
+        isProjectsLoading={projectsQuery.isLoading}
+        isPackagesLoading={projectPackagesQuery.isLoading}
+        projectId={projectId}
+        onProjectChange={setProjectId}
+        packageId={packageId}
+        onPackageChange={setPackageId}
+        direction={direction}
+        onDirectionChange={setDirection}
+        register={register}
+        errors={errors}
+        touchedFields={touchedFields}
+        onSubmit={onSubmit}
+        canSubmit={canSubmit}
+        isSaving={isSaving}
+      />
     </>
   );
 }

src/app/(modules)/segment/queries/segmentKeys.ts

@@ -0,0 +1,7 @@
+import type { PaginationParams } from '@/types';
+
+export const segmentKeys = {
+  all: ['segments'] as const,
+  lists: () => [...segmentKeys.all, 'list'] as const,
+  list: (params: PaginationParams) => [...segmentKeys.lists(), params] as const,
+};