refactor: modularize road management modules

2026-06-17 13:31:25 +05:30
parent 9bb740e446
commit 182d4ac293
41 changed files with 2386 additions and 1894 deletions
--- a/src/app/(modules)/project/components/ProjectColumns.tsx
+++ b/src/app/(modules)/project/components/ProjectColumns.tsx
@@ -0,0 +1,82 @@
+'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 { 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 useProjectColumns() {
+  return useMemo<ColumnDef<Project>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: 'Project Name',
+        cell: ({ row }) => <div className="font-semibold">{row.original.name}</div>,
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+        cell: ({ row }) => <StateBadges value={row.original.state} />,
+      },
+      {
+        accessorKey: 'corridor_name',
+        header: 'Corridor',
+        cell: ({ row }) => row.original.corridor_name || <EmptyValue />,
+      },
+    ],
+    [],
+  );
+}