skilld-admin/src/components/accounts-table/columns.tsx

"use client";
import { DataTableColumnHeader } from "./data-table-column-header";
import { CellAction } from "./cell-action";

import { ColumnDef } from "@tanstack/react-table";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { Checkbox } from "@/components/ui/checkbox";
import { Organization } from "@/types/organization";
import { formatDate } from "@/lib/format-date";
import { Account } from "@/types/account";

export const columns: ColumnDef<Account>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
        className="translate-y-[2px]"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
        className="translate-y-[2px]"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },

  // {
  //   accessorKey: "industry",
  //   header: ({ column }) => (
  //     <DataTableColumnHeader column={column} title="INDUSTRY" />
  //   ),
  //   cell: ({ row }) => {
  //     return (
  //       <div className="w-fit">
  //         <HoverCard>
  //           <HoverCardTrigger>
  //             <p className="max-w-[100px] truncate font-medium">
  //               {row.getValue("industry")}
  //             </p>
  //           </HoverCardTrigger>
  //           <HoverCardContent
  //           // className="p-0"
  //           >
  //             {/* <ScrollArea className="w-64 p-4"> */}
  //             {row.getValue("industry")}
  //             {/* <ScrollBar orientation="horizontal" /> */}
  //             {/* </ScrollArea> */}
  //           </HoverCardContent>
  //         </HoverCard>
  //       </div>
  //     );
  //   },
  //   filterFn: (row, id, value) => {
  //     return value.includes(row.getValue(id));
  //   },
  // },
  // {
  //   accessorKey: "contactPerson",
  //   header: ({ column }) => (
  //     <DataTableColumnHeader column={column} title="CONTACT PERSON" />
  //   ),
  //   cell: ({ row }) => {
  //     return (
  //       <div className="w-fit">
  //         <HoverCard>
  //           <HoverCardTrigger>
  //             <p>{row.getValue("contactPerson")}</p>
  //             {/* <p className="max-w-[100px] truncate font-medium">
  //               {row.getValue("contactPerson")}
  //             </p> */}
  //           </HoverCardTrigger>
  //           <HoverCardContent
  //           // className="p-0"
  //           >
  //             {/* <ScrollArea className="w-64 p-4"> */}
  //             {row.getValue("contactPerson")}
  //             {/* <ScrollBar orientation="horizontal" /> */}
  //             {/* </ScrollArea> */}
  //           </HoverCardContent>
  //         </HoverCard>
  //       </div>
  //     );
  //   },
  // },
  {
    accessorKey: "email",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="EMAIL" />
    ),
    cell: ({ row }) => {
      return (
        <div className="w-fit">
          <HoverCard>
            <HoverCardTrigger>
              <p>{row.getValue("email")}</p>
              {/* <p className="max-w-[100px] truncate font-medium">
                {row.getValue("email")}
              </p> */}
            </HoverCardTrigger>
            <HoverCardContent
            // className="p-0"
            >
              {/* <ScrollArea className="w-64 p-4"> */}
              {row.getValue("email")}
              {/* <ScrollBar orientation="horizontal" /> */}
              {/* </ScrollArea> */}
            </HoverCardContent>
          </HoverCard>
        </div>
      );
    },
  },

  {
    accessorKey: "organization",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="ORGANIZATION" />
    ),
    cell: ({ row }) => {
      return (
        <div className="w-fit">
          <HoverCard>
            <HoverCardTrigger>
              {/* <p className="max-w-[100px] truncate font-medium">
              {row.getValue("email")}
            </p> */}
              <p>{row.getValue("organization")}</p>
            </HoverCardTrigger>
            <HoverCardContent>
              {/* <ScrollArea className="w-64 p-4"> */}
              {row.getValue("organization")}
              {/* <ScrollBar orientation="horizontal" /> */}
              {/* </ScrollArea> */}
            </HoverCardContent>
          </HoverCard>
        </div>
      );
    },
  },
  {
    accessorKey: "accountHistory",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="ACCOUNT HISTORY" />
    ),
    cell: ({ row }) => {
      return (
        <div className="w-fit">
          <HoverCard>
            <HoverCardTrigger>
              <p>{row.getValue("accountHistory")}</p>
              {/* <p className="max-w-[100px] truncate font-medium">
                {row.getValue("accountHistory")}
              </p> */}
            </HoverCardTrigger>
            <HoverCardContent
            // className="p-0"
            >
              {/* <ScrollArea className="w-64 p-4"> */}
              {row.getValue("accountHistory")}
              {/* <ScrollBar orientation="horizontal" /> */}
              {/* </ScrollArea> */}
            </HoverCardContent>
          </HoverCard>
        </div>
      );
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  },

  {
    accessorKey: "created_at",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="CREATED AT" />
    ),
    cell: ({ row }) => {
      return <p className="w-fit">{formatDate(row.getValue("created_at"))}</p>;
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  },

  {
    id: "actions",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="ACTIONS" />
    ),
    cell: ({ row }) => <CellAction data={row.original} />,
  },
];