edr-platform/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx

import { ExternalUserDto } from "@/super-admin/dto/ExternalUsersDto";
import { format } from "date-fns";
import { ColumnDef } from "@tanstack/react-table";
import { Badge } from "@/shared/common/ui/badge";
import { UserStatusToggleConfirm } from "./UserStatusToggleConfirm";
import { t } from "i18next";
import { useNavigate } from "react-router-dom";

export const ExternalUsersColumnDefn = (
  localizedName: (name?: { am: string; en: string }) => string,
  navigate: ReturnType<typeof useNavigate>
): ColumnDef<ExternalUserDto>[] => {
  return [
    {
      accessorKey: "name.en",
      header: () => t("organization.username"),
      cell: ({ row }) => (
        <div className="font-medium">{localizedName(row.original.name)}</div>
      ),
    },
    {
      accessorKey: "updatedAt",
      header: () => t("organization.updatedOn"),
      cell: ({ row }) => (
        <div className="font-medium">
          {format(new Date(row.original.updatedAt), "MMM dd, yyyy")}
        </div>
      ),
    },
    {
      accessorKey: "userType",
      header: () => "User Type",
      cell: ({ row }) => {
        const userType = row.original.userType;
        const displayText =
          userType === "external_organization"
            ? "External Organization"
            : "Employee";

        return (
          <div className="font-medium">
            <span
              className={`px-2 py-1 rounded-full text-xs font-medium ${
                userType === "external_organization"
                  ? "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300"
                  : "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
              }`}
            >
              {displayText}
            </span>
          </div>
        );
      },
    },
    {
      id: "status",
      header: () => t("dashboard.Status"),
      cell: ({ row }) => {
        const { status } = row.original;
        const getStatusColor = (status: string) => {
          switch (status) {
            case "accepted":
              return "bg-primary-100 text-primary-600 hover:bg-primary-100 dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/50";
            case "rejected":
              return "bg-red-100 text-red-600 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-300 dark:hover:bg-red-900/50";
            case "pending":
            default:
              return "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/50";
          }
        };

        const getStatusText = (status: string) => {
          switch (status) {
            case "accepted":
              return "Accepted";
            case "rejected":
              return "Rejected";
            case "pending":
            default:
              return t("statusBar.Pending");
          }
        };

        return (
          <div>
            <Badge
              className={`${getStatusColor(
                status
              )} rounded-full px-6 py-1 font-medium`}
            >
              {getStatusText(status)}
            </Badge>
          </div>
        );
      },
    },
    {
      id: "actions",
      header: () => t("userRecord.Actions"),
      cell: ({ row }) => {
        const { id, status } = row.original;
        const handleViewUploads = () => {
          navigate(`/user-management/external_users/view/${id}`);
        };
        // const handleEdit = () => {
        //   navigate(`/user-management/external_users/edit/${id}`);
        // };

        return (
          <div className="flex items-center gap-2">
            <UserStatusToggleConfirm userId={id} userStatus={status} />
            <button
              onClick={handleViewUploads}
              className="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-sm font-medium text-gray-800 dark:text-gray-200"
            >
              {t("View")}
            </button>
            {/* <button
              onClick={handleEdit}
              className="px-2 py-1 bg-blue-100 rounded hover:bg-blue-200 text-sm font-medium"
            >
              {t("Edit")}
            </button> */}
          </div>
        );
      },
    },
  ];
};