refactor: modularize road management modules

src/app/(modules)/package/components/PackageColumns.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { Badge } from '@/components/ui/badge';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { 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 usePackageColumns(projects: Project[]) {
+  return useMemo<ColumnDef<Package>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: 'Package Name',
+        cell: ({ row }) => <div className="font-semibold">{row.original.name}</div>,
+      },
+      {
+        accessorKey: 'project_id',
+        header: 'Project',
+        cell: ({ row }) =>
+          projects.find((project) => project.id === row.original.project_id)?.name ||
+          row.original.project_id,
+      },
+      {
+        id: 'project_state',
+        header: 'Project State',
+        cell: ({ row }) => {
+          const project = projects.find((item) => item.id === row.original.project_id);
+          return <StateBadges value={project?.state ?? null} />;
+        },
+      },
+      {
+        accessorKey: 'region',
+        header: 'Region',
+        cell: ({ row }) => row.original.region || <EmptyValue />,
+      },
+      {
+        accessorKey: 'chainage_start_km',
+        header: 'Start (km)',
+        cell: ({ row }) => row.original.chainage_start_km?.toFixed(2) ?? '0.00',
+      },
+      {
+        accessorKey: 'chainage_end_km',
+        header: 'End (km)',
+        cell: ({ row }) => row.original.chainage_end_km?.toFixed(2) ?? '0.00',
+      },
+    ],
+    [projects],
+  );
+}

src/app/(modules)/package/components/PackageDialog.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
+import { Globe, Loader2, Package as PackageIcon } 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 { Project } from '@/types';
+
+import type { PackageFormValues } from '../hooks/usePackageForm';
+
+interface PackageDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  packageId?: string;
+  projects: Project[];
+  isProjectsLoading: boolean;
+  projectId: string;
+  onProjectChange: (projectId: string) => void;
+  register: UseFormRegister<PackageFormValues>;
+  errors: FieldErrors<PackageFormValues>;
+  touchedFields: UseFormReturn<PackageFormValues>['formState']['touchedFields'];
+  onSubmit: ComponentProps<'form'>['onSubmit'];
+  canSubmit: boolean;
+  isSaving: boolean;
+}
+
+export function PackageDialog({
+  open,
+  onOpenChange,
+  packageId,
+  projects,
+  isProjectsLoading,
+  projectId,
+  onProjectChange,
+  register,
+  errors,
+  touchedFields,
+  onSubmit,
+  canSubmit,
+  isSaving,
+}: PackageDialogProps) {
+  const projectErrorMessage = touchedFields.project_id ? errors.project_id?.message : undefined;
+  const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
+  const startErrorMessage = touchedFields.chainage_start_km
+    ? errors.chainage_start_km?.message
+    : undefined;
+  const endErrorMessage = touchedFields.chainage_end_km
+    ? errors.chainage_end_km?.message
+    : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="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">
+              <PackageIcon className="size-5" />
+            </div>
+            {packageId ? 'Edit Package Details' : 'Create New Package'}
+          </DialogTitle>
+          <DialogDescription className="text-sm">
+            {packageId
+              ? 'Update the technical specifications for your road infrastructure package.'
+              : 'Select a project and provide the essential data to establish a new package.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={onSubmit} className="space-y-6">
+          {!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-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>
+          ) : null}
+
+          <div className="grid gap-5 md:grid-cols-2">
+            <FormField id="package-name" label="Package Name" required error={nameErrorMessage}>
+              <Input
+                id="package-name"
+                placeholder="e.g. Package 01"
+                aria-invalid={!!nameErrorMessage}
+                {...register('name')}
+              />
+            </FormField>
+
+            <FormField
+              id="package-region"
+              label={
+                <span className="inline-flex items-center gap-2">
+                  <Globe className="size-3.5 opacity-60" />
+                  Region
+                </span>
+              }
+            >
+              <Input id="package-region" placeholder="e.g. North Zone" {...register('region')} />
+            </FormField>
+
+            <FormField id="package-start" label="Segment Start (km)" error={startErrorMessage}>
+              <Input
+                id="package-start"
+                type="number"
+                step="0.01"
+                placeholder="0.00"
+                aria-invalid={!!startErrorMessage}
+                {...register('chainage_start_km')}
+              />
+            </FormField>
+
+            <FormField id="package-end" label="Segment End (km)" error={endErrorMessage}>
+              <Input
+                id="package-end"
+                type="number"
+                step="0.01"
+                placeholder="0.00"
+                aria-invalid={!!endErrorMessage}
+                {...register('chainage_end_km')}
+              />
+            </FormField>
+          </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}
+              {packageId ? 'Update Package' : 'Create Package'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/(modules)/package/components/PackageTable.tsx

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

src/app/(modules)/package/hooks/usePackageFilters.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+export function usePackageFilters() {
+  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)/package/hooks/usePackageForm.ts

@@ -0,0 +1,151 @@
+'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 { packageService } from '@/services/api';
+import type { Package, PackageCreate, PackageUpdate } from '@/types';
+
+import { packageKeys } from '../queries/packageKeys';
+
+const optionalNumber = z.string().refine(
+  (value) => {
+    if (!value.trim()) {
+      return true;
+    }
+    return Number.isFinite(Number(value));
+  },
+  { message: 'Enter a valid number' },
+);
+
+const packageFormSchema = z.object({
+  id: z.string().optional(),
+  project_id: z.string().trim().min(1, 'Project is required'),
+  name: z.string().trim().min(1, 'Package name is required'),
+  region: z.string().optional(),
+  chainage_start_km: optionalNumber,
+  chainage_end_km: optionalNumber,
+});
+
+export type PackageFormValues = z.infer<typeof packageFormSchema>;
+
+const defaultValues: PackageFormValues = {
+  project_id: '',
+  name: '',
+  region: '',
+  chainage_start_km: '',
+  chainage_end_km: '',
+};
+
+function trimOptional(value?: string) {
+  return value?.trim() || null;
+}
+
+function toNumberOrZero(value: string) {
+  return value.trim() ? Number(value) : 0;
+}
+
+function toPackagePayload(values: PackageFormValues): PackageCreate | PackageUpdate {
+  return {
+    project_id: values.project_id,
+    name: values.name.trim(),
+    region: trimOptional(values.region),
+    chainage_start_km: toNumberOrZero(values.chainage_start_km),
+    chainage_end_km: toNumberOrZero(values.chainage_end_km),
+  };
+}
+
+export function usePackageForm({ onSaved }: { onSaved: () => void }) {
+  const queryClient = useQueryClient();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+    formState: { errors, isSubmitting, touchedFields },
+  } = useForm<PackageFormValues>({
+    defaultValues,
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(packageFormSchema),
+  });
+
+  const packageId = useWatch({ control, name: 'id' });
+  const projectId = useWatch({ control, name: 'project_id' }) || '';
+  const packageName = useWatch({ control, name: 'name' }) || '';
+  const canSubmit = projectId.trim().length > 0 && packageName.trim().length > 0;
+
+  const saveMutation = useMutation({
+    mutationFn: (values: PackageFormValues) => {
+      const payload = toPackagePayload(values);
+      return values.id
+        ? packageService.updatePackage(values.id, payload)
+        : packageService.createPackage(payload as PackageCreate);
+    },
+    onSuccess: (_data, values) => {
+      toast.success(values.id ? 'Package updated' : 'Package created');
+      reset(defaultValues);
+      onSaved();
+      queryClient.invalidateQueries({ queryKey: packageKeys.all });
+    },
+    onError: (_error, values) => {
+      toast.error(values.id ? 'Failed to update package' : 'Failed to create package');
+    },
+  });
+
+  const onSubmit = handleSubmit(
+    (values) => saveMutation.mutate(values),
+    (formErrors) => {
+      if (formErrors.project_id?.message) {
+        toast.error(formErrors.project_id.message);
+        return;
+      }
+      if (formErrors.name?.message) {
+        toast.error(formErrors.name.message);
+      }
+    },
+  );
+
+  const openCreate = useCallback(() => {
+    reset(defaultValues);
+  }, [reset]);
+
+  const openEdit = useCallback(
+    (pkg: Package) => {
+      reset({
+        id: pkg.id,
+        project_id: pkg.project_id,
+        name: pkg.name || '',
+        region: pkg.region || '',
+        chainage_start_km: pkg.chainage_start_km?.toString() || '',
+        chainage_end_km: pkg.chainage_end_km?.toString() || '',
+      });
+    },
+    [reset],
+  );
+
+  const setProjectId = useCallback(
+    (value: string) => setValue('project_id', value, { shouldDirty: true, shouldValidate: true }),
+    [setValue],
+  );
+
+  return {
+    register,
+    onSubmit,
+    openCreate,
+    openEdit,
+    resetForm: () => reset(defaultValues),
+    packageId,
+    projectId,
+    setProjectId,
+    errors,
+    touchedFields,
+    canSubmit,
+    isSaving: isSubmitting || saveMutation.isPending,
+  };
+}

src/app/(modules)/package/hooks/usePackageQueries.ts

@@ -0,0 +1,50 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { toast } from 'sonner';
+
+import { packageService, projectService } from '@/services/api';
+import type { Package, PaginationParams } from '@/types';
+
+import { packageKeys } from '../queries/packageKeys';
+
+interface UsePackagesQueryParams {
+  skip: number;
+  limit: number;
+}
+
+export function usePackagesQuery({ skip, limit }: UsePackagesQueryParams) {
+  const listParams = useMemo<PaginationParams>(() => ({ skip, limit }), [limit, skip]);
+
+  return useQuery({
+    queryKey: packageKeys.list(listParams),
+    queryFn: () => packageService.getPackages(listParams),
+  });
+}
+
+export function useProjectOptionsQuery() {
+  return useQuery({
+    queryKey: ['projects', 'options'],
+    queryFn: () => projectService.getProjects({ skip: 0, limit: 1000 }),
+  });
+}
+
+export function useDeletePackageMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (pkg: Package) => packageService.deletePackage(pkg.id),
+    onSuccess: (_data, pkg) => {
+      toast.success('Package deleted', {
+        description: `${pkg.name} has been removed from the system.`,
+      });
+      queryClient.invalidateQueries({ queryKey: packageKeys.all });
+    },
+    onError: () => {
+      toast.error('Deletion failed', {
+        description: 'The package could not be removed. Please try again.',
+      });
+    },
+  });
+}

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

@@ -1,513 +1,132 @@
 '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, Package, FolderKanban, Globe } from 'lucide-react';
-import { DataTable } from '@/components/data-table';
+import { useCallback, useState } from 'react';
+import { Package as PackageIcon, Plus } from 'lucide-react';
+
 import { PageHeader } from '@/components/page-header';
-import { projectService, packageService } from '@/services/api';
-import { Project, Package as PackageType, PackageCreate, PackageUpdate } 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 { PoweredBy } from '@/components/powered-by';
+import { Button } from '@/components/ui/button';
+import type { Package } from '@/types';
+
+import { PackageDialog } from './components/PackageDialog';
+import { PackageTable } from './components/PackageTable';
+import { usePackageColumns } from './components/PackageColumns';
+import { usePackageFilters } from './hooks/usePackageFilters';
+import { usePackageForm } from './hooks/usePackageForm';
+import {
+  useDeletePackageMutation,
+  usePackagesQuery,
+  useProjectOptionsQuery,
+} from './hooks/usePackageQueries';
 
 export default function PackagePage() {
-  const [packages, setPackages] = useState<PackageType[]>([]);
-  const [totalItems, setTotalItems] = useState(0);
-  const [projects, setProjects] = useState<Project[]>([]);
-  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 [isDialogOpen, setIsDialogOpen] = useState(false);
+  const { skip, setSkip, limit, setLimit } = usePackageFilters();
+  const packagesQuery = usePackagesQuery({ skip, limit });
+  const projectsQuery = useProjectOptionsQuery();
+  const deletePackageMutation = useDeletePackageMutation();
+  const packageForm = usePackageForm({
+    onSaved: () => setIsDialogOpen(false),
+  });
+  const {
+    register,
+    onSubmit,
+    openCreate: prepareCreatePackage,
+    openEdit: prepareEditPackage,
+    resetForm,
+    packageId,
+    projectId,
+    setProjectId,
+    errors,
+    touchedFields,
+    canSubmit,
+    isSaving,
+  } = packageForm;
 
-  // Pagination state
-  const [skip, setSkip] = useState(0);
-  const [limit, setLimit] = useState(10);
+  const openCreate = useCallback(() => {
+    prepareCreatePackage();
+    setIsDialogOpen(true);
+  }, [prepareCreatePackage]);
 
-  // Editing state
-  const [isEditing, setIsEditing] = useState(false);
-  const [currentPackage, setCurrentPackage] = useState<PackageType | null>(null);
+  const openEdit = useCallback(
+    (pkg: Package) => {
+      prepareEditPackage(pkg);
+      setIsDialogOpen(true);
+    },
+    [prepareEditPackage],
+  );
 
-  // Form fields
-  const [selectedProjectId, setSelectedProjectId] = useState('');
-  const [name, setName] = useState('');
-  const [region, setRegion] = useState('');
-  const [chainageStartKm, setChainageStartKm] = useState<string>('');
-  const [chainageEndKm, setChainageEndKm] = useState<string>('');
-
-  // Load packages and projects
-  const loadPackages = async (currentSkip = skip, currentLimit = limit) => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      const data = await packageService.getPackages({ skip: currentSkip, limit: currentLimit });
-      setPackages(data.items);
-      setTotalItems(data.totalItems);
-    } catch (err) {
-      setError('Failed to load packages. 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 }); // Load all projects for selector
-      setProjects(data.items);
-    } catch (err) {
-      setError('Failed to load projects.');
-    } finally {
-      setLoadingProjects(false);
-    }
-  };
-
-  useEffect(() => {
-    loadPackages(skip, limit);
-    loadProjects();
-  }, [skip, limit]);
-
-  const resetForm = () => {
-    setSelectedProjectId('');
-    setName('');
-    setRegion('');
-    setChainageStartKm('');
-    setChainageEndKm('');
-    setError(null);
-    setIsEditing(false);
-    setCurrentPackage(null);
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedProjectId) {
-      setError('Please select a project first');
-      return;
-    }
-    if (!name.trim()) {
-      setError('Package name is required');
-      return;
-    }
-
-    setIsSubmitting(true);
-    setError(null);
-
-    try {
-      if (isEditing && currentPackage) {
-        const data: PackageUpdate = {
-          name: name.trim(),
-          region: region.trim() || null,
-          chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : 0,
-          chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : 0,
-        };
-        await packageService.updatePackage(currentPackage.id, data);
-        toast.success('Package Updated', {
-          description: `${name} has been updated successfully at ${new Date().toLocaleTimeString()}`,
-        });
-      } else {
-        const data: PackageCreate = {
-          project_id: selectedProjectId,
-          name: name.trim(),
-          region: region.trim() || null,
-          chainage_start_km: chainageStartKm ? parseFloat(chainageStartKm) : 0,
-          chainage_end_km: chainageEndKm ? parseFloat(chainageEndKm) : 0,
-        };
-        await packageService.createPackage(data);
-        toast.success('Package Created', {
-          description: `${name} has been established successfully at ${new Date().toLocaleTimeString()}`,
-        });
+  const handleDialogOpenChange = useCallback(
+    (open: boolean) => {
+      setIsDialogOpen(open);
+      if (!open) {
+        resetForm();
       }
-
-      // Refresh packages list
-      await loadPackages();
-
-      // Close modal and reset form immediately
-      setIsModalOpen(false);
-      resetForm();
-    } catch (err) {
-      const message =
-        err instanceof Error ? err.message : `Failed to ${isEditing ? 'update' : 'create'} package`;
-      setError(message);
-      toast.error('Operation Failed', {
-        description: message,
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleEdit = (pkg: PackageType) => {
-    setIsEditing(true);
-    setCurrentPackage(pkg);
-    setSelectedProjectId(pkg.project_id);
-    setName(pkg.name || '');
-    setRegion(pkg.region || '');
-    setChainageStartKm(pkg.chainage_start_km?.toString() || '0');
-    setChainageEndKm(pkg.chainage_end_km?.toString() || '0');
-    setIsModalOpen(true);
-  };
-
-  const handleDelete = async (pkg: PackageType) => {
-    if (!confirm(`Are you sure you want to delete package "${pkg.name}"?`)) return;
-
-    try {
-      setIsLoading(true);
-      await packageService.deletePackage(pkg.id);
-      toast.success('Package Deleted', {
-        description: `${pkg.name} has been removed from the system.`,
-      });
-      await loadPackages();
-    } catch (err) {
-      setError('Failed to delete package');
-      toast.error('Deletion Failed', {
-        description: 'The package could not be removed. Please try again.',
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const getProjectName = (projectId: string) => {
-    return projects.find((p) => p.id === projectId)?.name || projectId;
-  };
-
-  const columns: ColumnDef<PackageType>[] = [
-    {
-      accessorKey: 'name',
-      header: 'Package Name',
-      cell: ({ row }) => (
-        <div className="font-semibold text-gray-900 dark:text-gray-100">{row.original.name}</div>
-      ),
     },
-    {
-      accessorKey: 'project_id',
-      header: 'Project',
-      cell: ({ row }) => getProjectName(row.original.project_id),
-    },
-    {
-      accessorKey: 'project_state',
-      header: 'Project State',
-      cell: ({ row }) => {
-        const pkg = row.original;
-        const project = projects.find((p) => p.id === pkg.project_id);
-        if (!project?.state) return <span className="text-gray-400">—</span>;
+    [resetForm],
+  );
 
-        const states = project.state
-          .split(',')
-          .map((s) => s.trim())
-          .filter(Boolean);
-        if (states.length === 0) return <span className="text-gray-400">—</span>;
+  const deletePackage = useCallback(
+    (pkg: Package) => {
+      if (!confirm(`Are you sure you want to delete package "${pkg.name}"?`)) {
+        return;
+      }
+      deletePackageMutation.mutate(pkg);
+    },
+    [deletePackageMutation],
+  );
 
-        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: 'region',
-      header: 'Region',
-    },
-    {
-      accessorKey: 'chainage_start_km',
-      header: 'Start (km)',
-      cell: ({ row }) => row.original.chainage_start_km?.toFixed(2) ?? '0.00',
-    },
-    {
-      accessorKey: 'chainage_end_km',
-      header: 'End (km)',
-      cell: ({ row }) => row.original.chainage_end_km?.toFixed(2) ?? '0.00',
-    },
-  ];
+  const projects = projectsQuery.data?.items ?? [];
+  const packages = packagesQuery.data?.items ?? [];
+  const total = packagesQuery.data?.totalItems ?? 0;
+  const columns = usePackageColumns(projects);
 
   return (
     <>
-      <main className="relative z-10">
-        {/* Refined Header */}
-        <div className="mb-8">
-          <PageHeader
-            title="Package Management"
-            description="Manage project packages"
-            icon={Package}
-            actions={
-              <Button
-                onClick={() => {
-                  setIsEditing(false);
-                  setIsModalOpen(true);
-                }}
-              >
-                <Package className="mr-2 h-4 w-4" />
-                Add New Package
-              </Button>
-            }
-          />
-        </div>
+      <main className="relative z-10 space-y-5">
+        <PageHeader
+          title="Package Management"
+          description="Manage project packages"
+          icon={PackageIcon}
+          actions={
+            <Button onClick={openCreate} size="sm">
+              <Plus />
+              Add New Package
+            </Button>
+          }
+        />
 
-        {/* Data Table */}
-        <div>
-          <DataTable
-            title="Packages"
-            data={packages}
-            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>
+        <PackageTable
+          columns={columns}
+          packages={packages}
+          isLoading={packagesQuery.isLoading || deletePackageMutation.isPending}
+          skip={skip}
+          limit={limit}
+          total={total}
+          onPageChange={setSkip}
+          onLimitChange={setLimit}
+          onEdit={openEdit}
+          onDelete={deletePackage}
+        />
 
         <PoweredBy />
       </main>
 
-      {/* Modal Dialog */}
-      <Dialog
-        open={isModalOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setIsModalOpen(false);
-            resetForm();
-          } else {
-            setIsModalOpen(true);
-          }
-        }}
-      >
-        <DialogContent className="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">
-                <Package className="h-5 w-5" />
-              </div>
-              {isEditing ? 'Edit Package Details' : 'Create New Package'}
-            </DialogTitle>
-            <DialogDescription className="text-sm">
-              {isEditing
-                ? 'Update the technical specifications for your road infrastructure package.'
-                : 'Select a project and provide the essential data to establish a new package.'}
-            </DialogDescription>
-          </DialogHeader>
-
-          <form onSubmit={handleSubmit} className="space-y-8">
-            {/* Step 1: Select Project */}
-            {!isEditing && (
-              <div className="space-y-3">
-                <div className="flex items-center gap-2.5">
-                  <div className="w-6 h-6 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 Parent 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-sm">Loading...</span>
-                      </div>
-                    ) : (
-                      <SelectValue placeholder="Choose a project..." />
-                    )}
-                  </SelectTrigger>
-                  <SelectContent>
-                    {projects.map((project) => (
-                      <SelectItem key={project.id} value={project.id} className="py-3">
-                        <span className="font-semibold">{project.name}</span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-
-            {/* Step 2: Package Info */}
-            <div
-              className={`space-y-4 ${selectedProjectId || isEditing ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}
-            >
-              {!isEditing && (
-                <div className="flex items-center gap-2.5">
-                  <div
-                    className={`w-6 h-6 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">
-                    Package Information
-                  </p>
-                </div>
-              )}
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="pkg-name"
-                    className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider"
-                  >
-                    Package Name <span className="text-destructive">*</span>
-                  </Label>
-                  <Input
-                    id="pkg-name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    placeholder="e.g. Package 01"
-                    className="h-11 bg-muted/20 border-border/60"
-                    required
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="region"
-                    className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2"
-                  >
-                    <Globe className="h-3.5 w-3.5 opacity-60" />
-                    Region{' '}
-                    <span className="text-[10px] lowercase font-normal opacity-70">(Optional)</span>
-                  </Label>
-                  <Input
-                    id="region"
-                    value={region}
-                    onChange={(e) => setRegion(e.target.value)}
-                    placeholder="e.g. North Zone"
-                    className="h-11 bg-muted/20 border-border/60"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="chainage-start"
-                    className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider"
-                  >
-                    Segment Start (km)
-                  </Label>
-                  <Input
-                    id="chainage-start"
-                    type="number"
-                    step="0.01"
-                    value={chainageStartKm}
-                    onChange={(e) => setChainageStartKm(e.target.value)}
-                    placeholder="0.00"
-                    className="h-11 bg-muted/20 border-border/60"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="chainage-end"
-                    className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider"
-                  >
-                    Segment End (km)
-                  </Label>
-                  <Input
-                    id="chainage-end"
-                    type="number"
-                    step="0.01"
-                    value={chainageEndKm}
-                    onChange={(e) => setChainageEndKm(e.target.value)}
-                    placeholder="0.00"
-                    className="h-11 bg-muted/20 border-border/60"
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Submit Button */}
-            <div className="flex gap-4 pt-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => {
-                  setIsModalOpen(false);
-                  resetForm();
-                }}
-                disabled={isSubmitting}
-                className="flex-1"
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                disabled={isSubmitting || !name.trim() || !selectedProjectId}
-                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" />
-                    ) : (
-                      <Package className="h-4 w-4" />
-                    )}
-                    <span>{isEditing ? 'Update Package' : 'Create Package'}</span>
-                  </div>
-                )}
-              </Button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
+      <PackageDialog
+        open={isDialogOpen}
+        onOpenChange={handleDialogOpenChange}
+        packageId={packageId}
+        projects={projects}
+        isProjectsLoading={projectsQuery.isLoading}
+        projectId={projectId}
+        onProjectChange={setProjectId}
+        register={register}
+        errors={errors}
+        touchedFields={touchedFields}
+        onSubmit={onSubmit}
+        canSubmit={canSubmit}
+        isSaving={isSaving}
+      />
     </>
   );
 }

src/app/(modules)/package/queries/packageKeys.ts

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