Added table with row actions and pagination. next up: filtering

frontend/app/all-customers/columns.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { Ghost, MoreHorizontal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export type Customer = {
+  id: string;
+  name: string;
+  occupation: string;
+  phone: string;
+  address: string;
+  balance: number;
+};
+
+export const columns: ColumnDef<Customer>[] = [
+  {
+    accessorKey: "id",
+    header: "ID",
+    size: 70,
+  },
+  {
+    accessorKey: "name",
+    header: "Name",
+  },
+  {
+    accessorKey: "occupation",
+    header: "Occupation",
+  },
+  {
+    accessorKey: "phone",
+    header: "Phone",
+  },
+  {
+    accessorKey: "address",
+    header: "Address",
+    size: 150,
+  },
+  {
+    accessorKey: "balance",
+    header: () => <div className="text-right">Balance</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("balance"));
+      const formatted = new Intl.NumberFormat("en-IN", {
+        style: "currency",
+        currency: "INR",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      }).format(amount);
+      return <div className="text-right">{formatted}</div>;
+    },
+  },
+  {
+    id: "actions",
+    header: () => <div className="text-right">More Actions</div>,
+    cell: ({ row }) => {
+      const customer = row.original;
+
+      return (
+        <div className="text-right">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost">
+                <span className="sr-only">Open Menu</span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={() => navigator.clipboard.writeText(customer.id)}
+              >
+                Copy Customer ID
+              </DropdownMenuItem>
+              <DropdownMenuItem>View Transactions</DropdownMenuItem>
+              <DropdownMenuItem>Edit Customer</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                Delete Customer
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];