user management ui

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

@@ -0,0 +1,143 @@
+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-blue-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>
+      );
+    },
+  },
+];