@goplusvn/core 0.1.22 → 0.1.23

package/src/rbac/pages/role-form-page.tsx

@@ -0,0 +1,704 @@
+"use client";
+
+// Trang tạo/sửa VAI TRÒ — thông tin chung (kiểu Notion) + ma trận phân quyền
+// theo nhóm tài nguyên. Bề mặt trắng (bg-card) thay cho các mảng bg-muted xám.
+//
+// API contract: POST /api/roles, PUT /api/roles/:id.
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import {
+  ArrowLeft,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Save,
+  Search,
+  X,
+} from "lucide-react";
+
+import {
+  Badge,
+  Button,
+  DynamicIcon,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from "../../ui";
+import { cn } from "../../utils";
+import { errorMessage, throwFetchError } from "../lib/fetch-error";
+import type { CrudPermissions } from "../../types";
+
+export interface ActionLabelConfig {
+  label: string;
+  icon: string;
+  color: string;
+}
+
+// Nhãn/icon mặc định cho các action CRUD chuẩn — app truyền `actionLabels`
+// để bổ sung/ghi đè cho các action nghiệp vụ riêng.
+const DEFAULT_ACTION_LABELS: Record<string, ActionLabelConfig> = {
+  view: { label: "Xem", icon: "👁️", color: "text-blue-600" },
+  create: { label: "Tạo", icon: "➕", color: "text-green-600" },
+  update: { label: "Sửa", icon: "✏️", color: "text-yellow-600" },
+  delete: { label: "Xóa", icon: "🗑️", color: "text-destructive" },
+  import: { label: "Import", icon: "📥", color: "text-purple-600" },
+  export: { label: "Export", icon: "📤", color: "text-indigo-600" },
+  approve: { label: "Duyệt", icon: "✅", color: "text-emerald-600" },
+  manage: { label: "Quản lý", icon: "🔧", color: "text-orange-600" },
+  edit_items: { label: "Sửa chi tiết", icon: "📝", color: "text-amber-600" },
+  delete_items: { label: "Xóa chi tiết", icon: "❌", color: "text-rose-600" },
+};
+
+export interface RoleFormPageProps {
+  dictionary: any;
+  permissions?: CrudPermissions;
+  lang: string;
+  resources: Array<{
+    id: string;
+    code: string;
+    name: string;
+    group: string | null;
+    description: string | null;
+    icon: string | null;
+    order: number | null;
+    config: any;
+  }>;
+  actions: Array<{
+    id: string;
+    code: string;
+    name: string;
+    description: string | null;
+    isDefault?: boolean;
+  }>;
+  mode: "create" | "edit";
+  initialData?: {
+    id: string;
+    name: string;
+    code: string;
+    description: string | undefined;
+    status: string;
+    permissions: string[];
+  };
+  /** Nhãn/icon bổ sung cho action nghiệp vụ riêng của app (merge đè mặc định). */
+  actionLabels?: Record<string, ActionLabelConfig>;
+}
+
+export function RoleFormPage({
+  dictionary,
+  permissions,
+  lang,
+  resources,
+  actions,
+  mode,
+  initialData,
+  actionLabels,
+}: RoleFormPageProps) {
+  const router = useRouter();
+
+  const mergedActionLabels = React.useMemo(
+    () => ({ ...DEFAULT_ACTION_LABELS, ...actionLabels }),
+    [actionLabels],
+  );
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [searchTerm, setSearchTerm] = React.useState("");
+
+  const [formData, setFormData] = React.useState({
+    name: initialData?.name || "",
+    code: initialData?.code || "",
+    description: initialData?.description || "",
+    status: (initialData?.status || "active") as "active" | "inactive",
+    permissions: initialData?.permissions || ([] as string[]),
+  });
+
+  const [activeGroup, setActiveGroup] = React.useState<string | null>("all");
+  // Mặc định mở rộng tất cả (Collapsed = false)
+  const [collapsedGroups, setCollapsedGroups] = React.useState<
+    Record<string, boolean>
+  >({});
+
+  const toggleGroupCollapse = (groupName: string) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [groupName]: !prev[groupName],
+    }));
+  };
+
+  // Helper to get localized text from dictionary
+  const getLocalizedName = React.useCallback(
+    (key: string | null) => {
+      if (!key) return "";
+      if (!dictionary) return key;
+
+      // Try to find key in dictionary (e.g. "menu.dashboard" or "nav.system")
+      const parts = key.split(".");
+      let current = dictionary;
+      for (const part of parts) {
+        if (current && typeof current === "object" && part in current) {
+          current = current[part];
+        } else {
+          return key; // fallback to key if not found
+        }
+      }
+      return typeof current === "string" ? current : key;
+    },
+    [dictionary],
+  );
+
+  // Build dynamic permission matrix
+  const permissionMatrix = React.useMemo(() => {
+    return resources.map((resource) => {
+      // Default actions using database configuration
+      let allowedActions: string[] = [];
+      const defaultActions = actions
+        .filter((a) => a.isDefault)
+        .map((a) => a.code);
+      // Fallback to hardcoded if no default actions found (safety check)
+      const effectiveDefaultActions =
+        defaultActions.length > 0
+          ? defaultActions
+          : ["view", "create", "update", "delete"];
+
+      if (resource.config) {
+        try {
+          const config =
+            typeof resource.config === "string"
+              ? JSON.parse(resource.config)
+              : resource.config;
+
+          if (config.actions && Array.isArray(config.actions)) {
+            // Case 2: Config exists -> use configured actions (even if empty)
+            const allowedCodes = config.actions as string[];
+            allowedActions = actions
+              .map((a) => a.code)
+              .filter((code) => allowedCodes.includes(code));
+          } else {
+            // Config exists but no actions array -> use defaults
+            allowedActions = actions
+              .map((a) => a.code)
+              .filter((code) => effectiveDefaultActions.includes(code));
+          }
+        } catch (_e) {
+          // Ignore config parsing errors, fallback to defaults
+          allowedActions = actions
+            .map((a) => a.code)
+            .filter((code) => effectiveDefaultActions.includes(code));
+        }
+      } else {
+        // Case 1: No config -> use defaults
+        allowedActions = actions
+          .map((a) => a.code)
+          .filter((code) => effectiveDefaultActions.includes(code));
+      }
+
+      return {
+        resource: resource.code,
+        name: getLocalizedName(resource.name),
+        icon: resource.icon || "📄",
+        group: getLocalizedName(resource.group) || "Khác",
+        description: resource.description,
+        actions: allowedActions,
+      };
+    });
+  }, [resources, actions, getLocalizedName]);
+
+  // Filter matrix based on search
+  const filteredMatrix = React.useMemo(() => {
+    if (!searchTerm.trim()) return permissionMatrix;
+
+    const search = searchTerm.toLowerCase();
+    return permissionMatrix.filter(
+      (resource) =>
+        resource.name.toLowerCase().includes(search) ||
+        resource.resource.toLowerCase().includes(search) ||
+        resource.group.toLowerCase().includes(search),
+    );
+  }, [searchTerm, permissionMatrix]);
+
+  // Group resources by group
+  const groupedMatrix = React.useMemo(() => {
+    const groups: Record<string, typeof permissionMatrix> = {};
+    filteredMatrix.forEach((resource) => {
+      const group = resource.group;
+      if (!groups[group]) {
+        groups[group] = [];
+      }
+      groups[group].push(resource);
+    });
+    return groups;
+  }, [filteredMatrix]);
+
+  // Set initial active group or update if filtered
+  React.useEffect(() => {
+    const groups = Object.keys(groupedMatrix);
+    if (groups.length > 0) {
+      // Keep 'all' if selected, otherwise fallback to first group if current selection invalid
+      if (
+        activeGroup !== "all" &&
+        (!activeGroup || !groups.includes(activeGroup))
+      ) {
+        setActiveGroup("all");
+      }
+    } else {
+      setActiveGroup(null);
+    }
+  }, [groupedMatrix, activeGroup]);
+
+  // Permission helpers
+  const hasPermission = (resource: string, action: string): boolean => {
+    return formData.permissions.includes(`${action}:${resource}`);
+  };
+
+  const togglePermission = (resource: string, action: string) => {
+    const permission = `${action}:${resource}`;
+    let newPermissions = [...formData.permissions];
+
+    if (newPermissions.includes(permission)) {
+      newPermissions = newPermissions.filter((p) => p !== permission);
+    } else {
+      newPermissions.push(permission);
+    }
+    setFormData({ ...formData, permissions: newPermissions });
+  };
+
+  const toggleAllForGroup = (groupName: string, enable: boolean) => {
+    const groupResources = groupedMatrix[groupName] || [];
+    const groupPermissions = groupResources.flatMap((r) =>
+      actions
+        .filter((a) => r.actions.includes(a.code))
+        .map((a) => `${a.code}:${r.resource}`),
+    );
+
+    let newPermissions = [...formData.permissions];
+
+    if (enable) {
+      // Add all missing permissions for this group
+      const toAdd = groupPermissions.filter((p) => !newPermissions.includes(p));
+      newPermissions = [...newPermissions, ...toAdd];
+    } else {
+      // Remove all permissions for this group
+      newPermissions = newPermissions.filter(
+        (p) => !groupPermissions.includes(p),
+      );
+    }
+
+    setFormData({ ...formData, permissions: newPermissions });
+  };
+
+  // Check if group has full permissions
+  const isGroupFullPermission = (groupName: string) => {
+    const groupResources = groupedMatrix[groupName] || [];
+    const groupPermissions = groupResources.flatMap((r) =>
+      actions
+        .filter((a) => r.actions.includes(a.code))
+        .map((a) => `${a.code}:${r.resource}`),
+    );
+    return (
+      groupPermissions.length > 0 &&
+      groupPermissions.every((p) => formData.permissions.includes(p))
+    );
+  };
+
+  const toggleAllForResource = (
+    resourceCode: string,
+    resourceActions: string[],
+    check: boolean,
+  ) => {
+    let newPermissions = [...formData.permissions];
+
+    resourceActions.forEach((actionCode) => {
+      const permission = `${actionCode}:${resourceCode}`;
+      if (check && !newPermissions.includes(permission)) {
+        newPermissions.push(permission);
+      } else if (!check && newPermissions.includes(permission)) {
+        newPermissions = newPermissions.filter((p) => p !== permission);
+      }
+    });
+
+    setFormData((prev) => ({ ...prev, permissions: newPermissions }));
+  };
+
+  const isResourceFullPermission = (
+    resourceCode: string,
+    resourceActions: string[],
+  ) => {
+    if (resourceActions.length === 0) return false;
+    return resourceActions.every((actionCode) =>
+      formData.permissions.includes(`${actionCode}:${resourceCode}`),
+    );
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    try {
+      const url =
+        mode === "create" ? "/api/roles" : `/api/roles/${initialData?.id}`;
+      const method = mode === "create" ? "POST" : "PUT";
+
+      const res = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      if (!res.ok) {
+        await throwFetchError(res, `Failed to ${mode} role`);
+      }
+
+      toast.success("Thành công", {
+        description:
+          mode === "create"
+            ? "Đã tạo vai trò mới thành công"
+            : "Đã cập nhật vai trò thành công",
+      });
+
+      router.push(`/${lang}/roles`);
+      router.refresh();
+    } catch (error: any) {
+      toast.error(errorMessage(error, "Lỗi"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="container max-w-7xl mx-auto py-6 space-y-6">
+      {/* Header & General Info (Notion Style) — thẻ trắng */}
+      <div className="flex flex-col lg:flex-row items-start lg:justify-between border border-border pb-4 sm:pb-6 bg-card p-4 sm:p-6 rounded-2xl shadow-sm gap-4 sm:gap-6">
+        <div className="flex items-start gap-2 sm:gap-4 flex-1 w-full min-w-0">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => router.push(`/${lang}/roles`)}
+            className="mt-1 shrink-0"
+          >
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <div className="flex-1 space-y-3 w-full min-w-0">
+            <div>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                placeholder="Tên vai trò (VD: Quản lý kho)..."
+                className="text-xl sm:text-2xl md:text-3xl font-black h-auto py-2 border-transparent hover:border-border focus-visible:ring-0 focus-visible:border-primary focus-visible:bg-card bg-transparent px-2 -ml-2 shadow-none rounded-[8px] placeholder:text-muted-foreground/40 transition-colors w-full"
+                required
+              />
+              <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2 px-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-[10px] sm:text-xs font-medium text-muted-foreground uppercase">
+                    Mã:
+                  </span>
+                  <Input
+                    id="code"
+                    value={formData.code}
+                    onChange={(e) =>
+                      setFormData({ ...formData, code: e.target.value })
+                    }
+                    placeholder="VD: warehouse_manager"
+                    disabled={mode === "edit"}
+                    className="h-7 text-xs border border-border bg-card w-32 sm:w-48 shadow-none focus-visible:ring-1 focus-visible:ring-primary rounded-md"
+                  />
+                </div>
+                <div className="flex items-center gap-2 bg-card px-2 sm:px-3 h-7 rounded-md border border-border shrink-0">
+                  <span className="text-[10px] sm:text-xs font-medium text-muted-foreground uppercase">
+                    Hoạt động:
+                  </span>
+                  <Switch
+                    checked={formData.status === "active"}
+                    onCheckedChange={(checked) =>
+                      setFormData({
+                        ...formData,
+                        status: checked ? "active" : "inactive",
+                      })
+                    }
+                    className="scale-75 origin-left"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="px-1">
+              <Input
+                id="description"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder="Thêm mô tả về nhiệm vụ của vai trò này..."
+                className="h-8 text-xs sm:text-sm border-transparent hover:border-border focus-visible:ring-0 focus-visible:bg-muted/40 shadow-none bg-transparent px-2 -ml-2 rounded-md w-full"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2 shrink-0 w-full lg:w-auto lg:items-end mt-2 lg:mt-0 pl-10 sm:pl-14 lg:pl-0">
+          {permissions?.update === false && mode === "edit" && (
+            <Badge variant="destructive" className="mb-2 w-fit">
+              Xem chế độ chỉ đọc
+            </Badge>
+          )}
+          <div className="flex items-center gap-2 w-full lg:w-auto">
+            <Button
+              variant="outline"
+              onClick={() => router.push(`/${lang}/roles`)}
+              disabled={isSubmitting}
+              className="h-9 rounded-[8px] flex-1 lg:flex-none"
+            >
+              <X className="mr-2 h-4 w-4" />
+              Hủy
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              disabled={isSubmitting}
+              className="h-9 rounded-[8px] flex-1 lg:flex-none"
+            >
+              <Save className="mr-2 h-4 w-4" />
+              {isSubmitting ? "Đang lưu..." : "Lưu"}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Section 2: Permissions Toolbar — thẻ trắng, input trắng */}
+      <div className="sticky top-4 z-20 bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/80 p-3 rounded-xl border border-border shadow-sm flex flex-col md:flex-row gap-3 items-center justify-between">
+        <div className="flex items-center gap-3 w-full md:w-auto flex-1">
+          <div className="relative w-full md:w-80">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Tìm kiếm tài nguyên..."
+              className="pl-9 h-9 text-sm bg-card border border-border rounded-md"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+          <Select
+            value={activeGroup || "all"}
+            onValueChange={(val) => setActiveGroup(val === "all" ? null : val)}
+          >
+            <SelectTrigger className="w-[180px] h-9 text-sm bg-card border border-border rounded-md">
+              <SelectValue placeholder="Tất cả nhóm" />
+            </SelectTrigger>
+            <SelectContent className="rounded-lg">
+              <SelectItem value="all">Tất cả nhóm</SelectItem>
+              {Object.keys(groupedMatrix).map((group) => (
+                <SelectItem key={group} value={group}>
+                  {group}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge
+            variant="outline"
+            className="font-medium bg-card text-muted-foreground border-border h-7 px-2"
+          >
+            {filteredMatrix.length} tài nguyên
+          </Badge>
+        </div>
+      </div>
+
+      {/* Section 3: Permission Groups */}
+      <div className="space-y-8">
+        {Object.entries(groupedMatrix).map(([group, groupResources]) => {
+          // Skip if filtering by specific group
+          if (activeGroup && activeGroup !== "all" && activeGroup !== group)
+            return null;
+          if (groupResources.length === 0) return null;
+
+          const isFull = isGroupFullPermission(group);
+
+          return (
+            <div
+              key={group}
+              className="space-y-4 animate-in fade-in duration-500"
+            >
+              {/* Header nhóm — thẻ trắng, điểm nhấn là chip chevron indigo */}
+              <div
+                className="flex flex-col sm:flex-row sm:items-center justify-between bg-card p-2.5 rounded-xl border border-border mb-4 gap-3 shadow-sm cursor-pointer hover:border-primary/30 transition-colors"
+                onClick={() => toggleGroupCollapse(group)}
+              >
+                <div className="flex items-center gap-2.5 pl-1">
+                  <div className="bg-primary text-primary-foreground p-1.5 rounded-md shadow-sm transition-transform duration-200">
+                    {collapsedGroups[group] ? (
+                      <ChevronRight className="h-4 w-4" />
+                    ) : (
+                      <ChevronDown className="h-4 w-4" />
+                    )}
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-bold text-foreground flex items-center gap-2">
+                      {group}
+                      {isFull && (
+                        <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400 py-0 h-4.5 px-1.5 text-[9px] font-semibold">
+                          <Check className="w-2.5 h-2.5 mr-0.5" />
+                          Đã chọn hết
+                        </Badge>
+                      )}
+                    </h3>
+                    <p className="text-xs text-muted-foreground font-medium mt-0.5">
+                      {groupResources.length} tài nguyên
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-1.5 self-start sm:self-auto pr-1">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleAllForGroup(group, false);
+                    }}
+                    className="h-7 text-xs font-semibold text-muted-foreground hover:text-destructive bg-card rounded-md border"
+                  >
+                    Bỏ chọn tất cả
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="default"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleAllForGroup(group, true);
+                    }}
+                    className="h-7 text-xs font-semibold rounded-md bg-primary text-primary-foreground"
+                  >
+                    Chọn tất cả
+                  </Button>
+                </div>
+              </div>
+
+              {!collapsedGroups[group] && (
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
+                  {groupResources.map((resource) => (
+                    <div
+                      key={resource.resource}
+                      className="border border-border bg-card rounded-xl shadow-sm hover:border-primary/40 transition-colors overflow-hidden group"
+                    >
+                      {/* Header thẻ tài nguyên — trắng, chỉ phân tách bằng border */}
+                      <div className="p-2.5 border-b border-border/60 flex items-center justify-between">
+                        <div className="flex items-center gap-2.5">
+                          <div className="h-7 w-7 rounded-[6px] bg-card border border-border shadow-sm flex items-center justify-center shrink-0 text-muted-foreground group-hover:text-primary transition-colors">
+                            <DynamicIcon
+                              name={resource.icon as any}
+                              className="h-3.5 w-3.5"
+                            />
+                          </div>
+                          <div className="flex flex-col">
+                            <h4 className="text-sm font-bold text-foreground leading-tight">
+                              {resource.name}
+                            </h4>
+                            <span className="text-[10px] text-muted-foreground mt-0.5">
+                              {resource.resource}
+                            </span>
+                          </div>
+                        </div>
+                        <div
+                          className="flex items-center gap-2"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <span className="text-[10px] text-muted-foreground font-semibold hidden sm:inline">
+                            Tất cả
+                          </span>
+                          <Switch
+                            checked={isResourceFullPermission(
+                              resource.resource,
+                              resource.actions,
+                            )}
+                            onCheckedChange={(checked) =>
+                              toggleAllForResource(
+                                resource.resource,
+                                resource.actions,
+                                checked,
+                              )
+                            }
+                            className="scale-75 origin-right"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="p-2 grid grid-cols-2 gap-1.5">
+                        {actions.map((action) => {
+                          const isAvailable = resource.actions.includes(
+                            action.code,
+                          );
+                          const isChecked = hasPermission(
+                            resource.resource,
+                            action.code,
+                          );
+                          const staticConfig = mergedActionLabels[action.code];
+
+                          const config = {
+                            label:
+                              action.name || staticConfig?.label || action.code,
+                            icon: staticConfig?.icon || "•",
+                            color:
+                              staticConfig?.color || "text-muted-foreground",
+                          };
+
+                          if (!isAvailable) return null;
+
+                          return (
+                            <div
+                              key={action.code}
+                              className={cn(
+                                "flex items-center gap-2 px-2 py-1.5 rounded-[6px] border transition-all cursor-pointer relative overflow-hidden",
+                                isChecked
+                                  ? "bg-primary/5 border-primary/20 shadow-[0_1px_2px_rgba(0,0,0,0.02)]"
+                                  : "bg-card hover:bg-muted/50 border-border",
+                              )}
+                              onClick={() =>
+                                togglePermission(resource.resource, action.code)
+                              }
+                            >
+                              <div
+                                className={cn(
+                                  "flex items-center justify-center w-3.5 h-3.5 rounded-[4px] border transition-colors shrink-0",
+                                  isChecked
+                                    ? "bg-primary border-primary text-primary-foreground"
+                                    : "bg-card border-border text-transparent",
+                                )}
+                              >
+                                <Check className="h-2.5 w-2.5" />
+                              </div>
+                              <div className="flex items-center gap-1.5 overflow-hidden">
+                                <span className="text-xs shrink-0 opacity-80 filter grayscale">
+                                  {config.icon}
+                                </span>
+                                <span
+                                  className={cn(
+                                    "text-xs font-semibold truncate",
+                                    isChecked
+                                      ? "text-primary"
+                                      : "text-muted-foreground",
+                                  )}
+                                >
+                                  {config.label}
+                                </span>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}