Initial commit

2026-06-17 13:51:22 +02:00
commit 4898bf7142
81 changed files with 12522 additions and 0 deletions
@@ -0,0 +1,135 @@
+"use client"
+
+import { useMemo } from "react"
+import Link from "next/link"
+import { ColumnDef } from "@tanstack/react-table"
+import { DataTable } from "@/components/shared/data-table"
+import { DataTableColumnHeader } from "@/components/shared/data-table-column-header"
+import { LeadStatusBadge } from "./lead-status-badge"
+import { LeadActionsDropdown } from "./lead-actions-dropdown"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Lead } from "@/types"
+
+interface LeadsTableProps {
+  data: Lead[]
+  loading?: boolean
+}
+
+export function LeadsTable({ data, loading }: LeadsTableProps) {
+  const columns: ColumnDef<Lead>[] = useMemo(
+    () => [
+      {
+        id: "select",
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label="Select all"
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+      },
+      {
+        accessorKey: "companyName",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Company" />
+        ),
+        cell: ({ row }) => (
+          <Link
+            href={`/leads/${row.original.id}`}
+            className="font-medium hover:text-primary transition-colors"
+          >
+            {row.getValue("companyName")}
+          </Link>
+        ),
+      },
+      {
+        accessorKey: "contactName",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Contact" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">{row.getValue("contactName")}</span>
+        ),
+      },
+      {
+        accessorKey: "email",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Email" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">{row.getValue("email")}</span>
+        ),
+      },
+      {
+        accessorKey: "phone",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Phone" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">{row.getValue("phone")}</span>
+        ),
+      },
+      {
+        accessorKey: "status",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Status" />
+        ),
+        cell: ({ row }) => <LeadStatusBadge status={row.getValue("status")} />,
+      },
+      {
+        accessorKey: "assignedUser",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Assigned" />
+        ),
+        cell: ({ row }) => {
+          const user = row.original.assignedUser
+          if (!user) return <span className="text-muted-foreground/50">—</span>
+          return (
+            <div className="flex items-center gap-2">
+              <Avatar className="h-6 w-6">
+                <AvatarImage src={user.avatar} />
+                <AvatarFallback>{user.name[0]}</AvatarFallback>
+              </Avatar>
+              <span className="text-muted-foreground text-sm">{user.name}</span>
+            </div>
+          )
+        },
+      },
+      {
+        accessorKey: "createdAt",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Date Added" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">
+            {new Date(row.getValue("createdAt")).toLocaleDateString()}
+          </span>
+        ),
+      },
+      {
+        id: "actions",
+        cell: ({ row }) => <LeadActionsDropdown lead={row.original} />,
+      },
+    ],
+    []
+  )
+
+  return (
+    <DataTable
+      columns={columns}
+      data={data}
+      loading={loading}
+      emptyMessage="No leads found."
+    />
+  )
+}