136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
"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."
|
|
/>
|
|
)
|
|
}
|