@goplusvn/core 0.1.0 → 0.1.2

package/src/providers/tenant-provider.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import React, { createContext, useContext } from "react";
+
+export interface TenantBranding {
+  logo?: string;
+  companyName: string;
+  primaryColor?: string;
+  favicon?: string;
+}
+
+export interface TenantConfig {
+  id: string;
+  name: string;
+  branding: TenantBranding;
+  // Add more tenant-specific configs here (e.g., date formats, currency)
+  dateFormat?: string;
+  currency?: string;
+}
+
+export interface TenantContextValue {
+  tenant: TenantConfig;
+}
+
+const TenantContext = createContext<TenantContextValue | undefined>(undefined);
+
+interface TenantProviderProps {
+  children: ReactNode;
+  tenant: TenantConfig;
+}
+
+export function TenantProvider({ children, tenant }: TenantProviderProps) {
+  return (
+    <TenantContext.Provider value={{ tenant }}>
+      {children}
+    </TenantContext.Provider>
+  );
+}
+
+export function useTenantContext() {
+  const context = useContext(TenantContext);
+  if (context === undefined) {
+    throw new Error("useTenantContext must be used within a TenantProvider");
+  }
+  return context;
+}

package/src/rbac/components/roles/role-card.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { memo, useCallback } from "react";
+import { format } from "date-fns";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+} from "../../../ui";
+import { Edit, Copy, Trash2 } from "lucide-react";
+import type { Role } from "../../types";
+
+interface RoleCardProps {
+  role: Role;
+  lang: string;
+  canUpdate?: boolean;
+  canCreate?: boolean;
+  canDelete?: boolean;
+  onDuplicate: (role: Role) => void;
+  onDelete: (role: Role) => void;
+}
+
+const roleColors: Record<string, string> = {
+  admin: "bg-red-500",
+  finance_manager: "bg-blue-500",
+  purchasing_staff: "bg-green-500",
+  kitchen_manager: "bg-orange-500",
+  warehouse_staff: "bg-purple-500",
+  supplier: "bg-gray-500",
+};
+
+export const RoleCard = memo(function RoleCard({
+  role,
+  lang,
+  canUpdate,
+  canCreate,
+  canDelete,
+  onDuplicate,
+  onDelete,
+}: RoleCardProps) {
+  const router = useRouter();
+  const permissionsCount = role.permissions.length;
+  const roleColor = roleColors[role.code] || "bg-indigo-500";
+
+  const handleEdit = useCallback(() => {
+    router.push(`/${lang}/roles/${role.id}/edit`);
+  }, [router, lang, role.id]);
+
+  const handleDuplicate = useCallback(() => {
+    onDuplicate(role);
+  }, [onDuplicate, role]);
+
+  const handleDelete = useCallback(() => {
+    onDelete(role);
+  }, [onDelete, role]);
+
+  return (
+    <Card className="group relative transition-all duration-300 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 rounded-[12px] shadow-sm hover:shadow-md hover:border-primary/40 overflow-hidden">
+      <CardHeader className="p-4 pb-2">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center space-x-3">
+            <div className="relative flex items-center justify-center">
+              <div className={`w-3 h-3 rounded-full ${roleColor} ring-4 ring-slate-50 dark:ring-slate-800/50`} />
+            </div>
+            <div>
+              <CardTitle className="text-[15px] font-bold text-slate-900 dark:text-slate-100 leading-tight">
+                {role.name}
+              </CardTitle>
+              <CardDescription className="text-[11px] font-mono text-slate-500 mt-0.5">
+                {role.code}
+              </CardDescription>
+            </div>
+          </div>
+          {role.status === "active" ? (
+            <Badge
+              variant="outline"
+              className="bg-emerald-50 text-emerald-600 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20 text-[10px] px-2 py-0 h-5 font-semibold"
+            >
+              Hoạt động
+            </Badge>
+          ) : (
+            <Badge
+              variant="outline"
+              className="bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700 text-[10px] px-2 py-0 h-5 font-semibold"
+            >
+              Khóa
+            </Badge>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="p-4 pt-0 space-y-3">
+        <p className="text-[13px] text-slate-500 dark:text-slate-400 line-clamp-2 min-h-[2.5rem] leading-relaxed">
+          {role.description || "Chưa có mô tả chi tiết cho vai trò này."}
+        </p>
+
+        <div className="flex items-center justify-between bg-slate-50 dark:bg-slate-800/50 rounded-lg p-2.5 border border-slate-100 dark:border-slate-800">
+          <div className="flex flex-col items-center flex-1 border-r border-slate-200 dark:border-slate-700">
+            <span className="text-[16px] font-black text-primary leading-none mb-1">
+              {permissionsCount}
+            </span>
+            <span className="text-[9px] text-slate-500 font-bold uppercase tracking-wider">
+              Quyền hạn
+            </span>
+          </div>
+          <div className="flex flex-col items-center flex-1">
+            <span className="text-[16px] font-black text-emerald-600 dark:text-emerald-500 leading-none mb-1">
+              {role.usersCount}
+            </span>
+            <span className="text-[9px] text-slate-500 font-bold uppercase tracking-wider">
+              Người dùng
+            </span>
+          </div>
+        </div>
+
+        <div className="flex gap-2 pt-2">
+          {canUpdate && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="flex-1 h-8 text-[12px] font-medium bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 transition-colors rounded-[8px] shadow-sm"
+              onClick={handleEdit}
+            >
+              <Edit className="mr-1.5 h-3.5 w-3.5 text-slate-400" />
+              Sửa
+            </Button>
+          )}
+          {canCreate && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="flex-1 h-8 text-[12px] font-medium bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 transition-colors rounded-[8px] shadow-sm"
+              onClick={handleDuplicate}
+            >
+              <Copy className="mr-1.5 h-3.5 w-3.5 text-slate-400" />
+              Chép
+            </Button>
+          )}
+          {canDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="flex-1 h-8 text-[12px] font-medium border-slate-200 dark:border-slate-800 text-red-600 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 hover:text-red-700 dark:hover:text-red-400 transition-colors bg-white dark:bg-slate-900 rounded-[8px] shadow-sm"
+              onClick={handleDelete}
+            >
+              <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+              Xóa
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+});

package/src/rbac/components/roles/role-stats-cards.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { memo } from "react";
+import { Shield, ShieldCheck, Key, Users } from "lucide-react";
+
+import { CompactStatBar, CompactStatItem } from "../../../ui/data-display/compact-stat-bar";
+
+interface RoleStatsCardsProps {
+  totalRoles: number;
+  activeRoles: number;
+  totalPermissions: number;
+  totalUsers: number;
+}
+
+export const RoleStatsCards = memo(function RoleStatsCards({
+  totalRoles,
+  activeRoles,
+  totalPermissions,
+  totalUsers,
+}: RoleStatsCardsProps) {
+  const items: CompactStatItem[] = [
+    { id: "total", label: "Tổng vai trò", value: totalRoles || 0, icon: Shield, colorTheme: "dark" },
+    { id: "active", label: "Hoạt động", value: activeRoles || 0, icon: ShieldCheck, colorTheme: "green" },
+    { id: "perms", label: "Tổng quyền hạn", value: totalPermissions || 0, icon: Key, colorTheme: "purple" },
+    { id: "users", label: "Tổng người dùng", value: totalUsers || 0, icon: Users, colorTheme: "orange" },
+  ];
+
+  return <CompactStatBar items={items} />;
+});

package/src/rbac/components/roles/role-toolbar.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { memo, useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../ui";
+import { Plus, Search, Download, Upload, X } from "lucide-react";
+
+interface RoleToolbarProps {
+  dictionary: any;
+  totalRows: number;
+  searchTerm: string;
+  statusFilter: string;
+  onSearchChange: (value: string) => void;
+  onStatusFilterChange: (value: string) => void;
+  lang: string;
+  canCreate?: boolean;
+  canImport?: boolean;
+  canExport?: boolean;
+}
+
+export const RoleToolbar = memo(function RoleToolbar({
+  dictionary,
+  totalRows,
+  searchTerm,
+  statusFilter,
+  onSearchChange,
+  onStatusFilterChange,
+  lang,
+  canCreate,
+  canImport,
+  canExport,
+}: RoleToolbarProps) {
+  const router = useRouter();
+  const [localSearchTerm, setLocalSearchTerm] = useState(searchTerm);
+
+  // Sync local state when prop changes (e.g. clear filter from parent)
+  useEffect(() => {
+    setLocalSearchTerm(searchTerm);
+  }, [searchTerm]);
+
+  // Debounce search change
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      if (localSearchTerm !== searchTerm) {
+        onSearchChange(localSearchTerm);
+      }
+    }, 500);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [localSearchTerm, onSearchChange, searchTerm]);
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      <div className="relative">
+        <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Tìm kiếm vai trò..."
+          value={localSearchTerm}
+          onChange={(e) => setLocalSearchTerm(e.target.value)}
+          className="h-9 w-[220px] lg:w-[280px] pl-9 text-[13px] bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50 transition-colors shadow-sm rounded-[6px] focus-visible:ring-1 focus-visible:ring-primary"
+        />
+        {localSearchTerm && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 rounded-md hover:bg-muted"
+            onClick={() => setLocalSearchTerm("")}
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+        <SelectTrigger className="h-9 w-[160px] text-[13px] bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50 transition-colors shadow-sm rounded-[6px] focus-visible:ring-primary">
+          <SelectValue placeholder="Trạng thái" />
+        </SelectTrigger>
+        <SelectContent className="rounded-lg">
+          <SelectItem value="all">Tất cả</SelectItem>
+          <SelectItem value="active">Hoạt động</SelectItem>
+          <SelectItem value="inactive">Không hoạt động</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <div className="ml-auto flex items-center gap-2">
+        {canImport && (
+          <Button variant="outline" size="sm" className="h-9 px-3 rounded-[6px] shadow-sm bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50">
+            <Upload className="h-4 w-4 lg:mr-2" />
+            <span className="hidden lg:inline text-[13px]">Nhập</span>
+          </Button>
+        )}
+        
+        {canExport && (
+          <Button variant="outline" size="sm" className="h-9 px-3 rounded-[6px] shadow-sm bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] hover:bg-slate-50">
+            <Download className="h-4 w-4 lg:mr-2" />
+            <span className="hidden lg:inline text-[13px]">Xuất</span>
+          </Button>
+        )}
+
+        {canCreate && (
+          <Button
+            onClick={() => router.push(`/${lang}/roles/new`)}
+            size="sm"
+            className="h-9 px-4 text-[13px] bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm rounded-[6px] font-medium border-0"
+          >
+            <Plus className="mr-1.5 h-4 w-4" />
+            <span>Thêm mới</span>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/rbac/hooks/use-role-operations.ts

@@ -0,0 +1,159 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { toast } from "sonner";
+
+import { useTabContentCache } from "../../ui/layout/tab-content-cache";
+import { useTabNavigation } from "../../ui/layout/tab-navigation-provider";
+import type { Role } from "../types";
+
+// Safe wrapper to prevent crashing when useSession is called outside of SessionProvider
+// This often happens during Error Boundary or Hydration failures.
+function useSafeSession() {
+  try {
+    return useSession();
+  } catch (error) {
+    console.warn("[useSafeSession] Context error caught. Fallback to unauthenticated state.");
+    return { data: null, status: "unauthenticated" as const, update: async () => null };
+  }
+}
+
+export function useRoleOperations(mutate: () => void) {
+  const router = useRouter();
+  const { update } = useSafeSession();
+  const { clearAllCache } = useTabContentCache();
+  const { clearTabs } = useTabNavigation();
+
+  const afterRbacChange = useCallback(async () => {
+    // Clear persisted tab caches/state so UI doesn't keep stale permissions/pages
+    try {
+      clearAllCache();
+      clearTabs();
+
+      if (typeof window !== "undefined") {
+        sessionStorage.removeItem("tab-content-cache");
+        sessionStorage.removeItem("tab-navigation-state");
+      }
+    } catch {
+      // best-effort only
+    }
+
+    // Refresh NextAuth session (trigger "update") so roles/permissions reload immediately
+    try {
+      await update();
+    } catch {
+      // best-effort only
+    }
+
+    router.refresh();
+  }, [router, update, clearAllCache, clearTabs]);
+
+  const handleCreateRole = useCallback(
+    async (roleData: any) => {
+      try {
+        const res = await fetch("/api/roles", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(roleData),
+        });
+
+        if (!res.ok) {
+          const errorData = await res.json();
+          throw new Error(errorData.error || "Failed to create role");
+        }
+
+        toast.success("Thành công", {
+          description: "Đã tạo vai trò mới thành công",
+        });
+        mutate();
+        await afterRbacChange();
+        return true;
+      } catch (error: any) {
+        toast.error("Lỗi", {
+          description: error.message,
+        });
+        return false;
+      }
+    },
+    [mutate, afterRbacChange],
+  );
+
+  const handleEditRole = useCallback(
+    async (roleId: string, roleData: any) => {
+      try {
+        const res = await fetch(`/api/roles/${roleId}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(roleData),
+        });
+
+        if (!res.ok) {
+          const errorData = await res.json();
+          throw new Error(errorData.error || "Failed to update role");
+        }
+
+        toast.success("Thành công", {
+          description: "Đã cập nhật vai trò thành công",
+        });
+        mutate();
+        await afterRbacChange();
+        return true;
+      } catch (error: any) {
+        toast.error("Lỗi", {
+          description: error.message,
+        });
+        return false;
+      }
+    },
+    [mutate, afterRbacChange],
+  );
+
+  const handleDeleteRole = useCallback(
+    async (roleId: string) => {
+      try {
+        const res = await fetch(`/api/roles/${roleId}`, {
+          method: "DELETE",
+        });
+
+        if (!res.ok) {
+          const errorData = await res.json();
+          throw new Error(errorData.error || "Failed to delete role");
+        }
+
+        toast.success("Thành công", {
+          description: "Đã xóa vai trò thành công",
+        });
+        mutate();
+        await afterRbacChange();
+        return true;
+      } catch (error: any) {
+        toast.error("Lỗi", {
+          description: error.message,
+        });
+        return false;
+      }
+    },
+    [mutate, afterRbacChange],
+  );
+
+  const handleDuplicateRole = useCallback(
+    async (role: Role) => {
+      const duplicatedRoleData = {
+        name: `${role.name} (Copy)`,
+        code: `${role.code}_copy_${Date.now()}`,
+        description: role.description,
+        status: role.status,
+        permissions: role.permissions,
+      };
+      return handleCreateRole(duplicatedRoleData);
+    },
+    [handleCreateRole],
+  );
+
+  return {
+    handleCreateRole,
+    handleEditRole,
+    handleDeleteRole,
+    handleDuplicateRole,
+  };
+}

package/src/rbac/hooks/use-roles-data.ts

@@ -0,0 +1,59 @@
+import { useState, useMemo } from "react";
+import useSWR from "swr";
+import type { RolesResponse, Role } from "../types";
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export function useRolesData(initialData: RolesResponse) {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+
+  const queryParams = useMemo(() => {
+    const params = new URLSearchParams({
+      page: page.toString(),
+      pageSize: pageSize.toString(),
+    });
+    if (searchTerm) params.set("search", searchTerm);
+    if (statusFilter !== "all") params.set("status", statusFilter);
+    return params.toString();
+  }, [page, pageSize, searchTerm, statusFilter]);
+
+  const {
+    data: response,
+    error,
+    isLoading,
+    mutate,
+  } = useSWR(`/api/roles?${queryParams}`, fetcher, {
+    fallbackData: initialData,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    keepPreviousData: true,
+  });
+
+  const roles: Role[] = response?.items || [];
+  const totalRows = response?.total || 0;
+
+  const activeRolesCount = useMemo(
+    () => roles.filter((r) => r.status === "active").length,
+    [roles],
+  );
+
+  return {
+    roles,
+    totalRows,
+    activeRolesCount,
+    page,
+    pageSize,
+    searchTerm,
+    statusFilter,
+    setPage,
+    setPageSize,
+    setSearchTerm,
+    setStatusFilter,
+    error,
+    isLoading,
+    mutate,
+  };
+}