edr-platform/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx

import { SiteDto } from "@/super-admin/dto/SitesDto";
import { ColumnDef } from "@tanstack/react-table";
import { Button } from "@/shared/common/ui/button";
import { Badge } from "@/shared/common/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { Archive, Trash2, Edit, Eye, MoreHorizontal, RefreshCw, Palette } from "lucide-react";
import { t } from "i18next";

interface ColumnsProps {
  onView: (site: SiteDto) => void;
  onEdit: (site: SiteDto) => void;
  onArchive: (site: SiteDto) => void;
  onRestore: (site: SiteDto) => void;
  onDelete: (site: SiteDto) => void;
  onBranding: (site: SiteDto) => void;
}

export const getSitesColumnDefn = ({
  onView,
  onEdit,
  onArchive,
  onRestore,
  onDelete,
  onBranding,
}: ColumnsProps): ColumnDef<SiteDto>[] => [
  {
    id: "name",
    header: () => t("sites.columns.siteName"),
    cell: ({ row }) => {
      const site = row.original;
      return (
        <div>
          <div className="font-semibold text-slate-800 dark:text-slate-200">
            {site.name?.en || "-"}
          </div>
          <div className="text-xs text-slate-500 dark:text-slate-400">
            {site.name?.am || "-"}
          </div>
        </div>
      );
    },
  },
  {
    accessorKey: "key",
    header: () => t("sites.columns.key"),
    cell: ({ row }) => (
      <span className="font-mono text-slate-700 dark:text-slate-300">
        {row.original.key}
      </span>
    ),
  },
  {
    accessorKey: "domain",
    header: () => t("sites.columns.domain"),
    cell: ({ row }) => (
      <span className="text-slate-700 dark:text-slate-300">
        {row.original.domain}
      </span>
    ),
  },
  {
    accessorKey: "status",
    header: () => t("sites.columns.status"),
    cell: ({ row }) => {
      const status = row.original.status || "Active";
      const isActive = status === "Active";
      return (
        <Badge
          className={`${
            isActive
              ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-950/40"
              : "bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40"
          } rounded-full px-3 py-0.5 font-medium border-none`}
        >
          {status}
        </Badge>
      );
    },
  },
  {
    id: "actions",
    header: () => t("sites.columns.actions"),
    cell: ({ row }) => {
      const site = row.original;
      const isArchived = site.status === "Archived";
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <MoreHorizontal className="h-4 w-4" />
              <span className="sr-only">Open Menu</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-[160px]">
            <DropdownMenuLabel>{t("sites.columns.actions")}</DropdownMenuLabel>
            <DropdownMenuItem onClick={() => onView(site)}>
              <Eye className="mr-2 h-4 w-4 text-slate-500" />
              {t("sites.actions.view")}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onEdit(site)}>
              <Edit className="mr-2 h-4 w-4 text-primary-500" />
              {t("sites.actions.edit")}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onBranding(site)}>
              <Palette className="mr-2 h-4 w-4 text-purple-500" />
              {t("sites.actions.branding")}
            </DropdownMenuItem>
            {!isArchived ? (
              <DropdownMenuItem
                onClick={() => onArchive(site)}
                className="text-amber-600 focus:text-amber-600 cursor-pointer"
              >
                <Archive className="mr-2 h-4 w-4 text-amber-500" />
                {t("sites.actions.archive")}
              </DropdownMenuItem>
            ) : (
              <DropdownMenuItem
                onClick={() => onRestore(site)}
                className="text-emerald-600 focus:text-emerald-600 cursor-pointer"
              >
                <RefreshCw className="mr-2 h-4 w-4 text-emerald-500" />
                {t("sites.actions.restore")}
              </DropdownMenuItem>
            )}
            <DropdownMenuItem
              onClick={() => onDelete(site)}
              className="text-rose-600 focus:text-rose-600 cursor-pointer"
            >
              <Trash2 className="mr-2 h-4 w-4 text-rose-500" />
              {t("sites.actions.delete")}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },
];