@goplusvn/core 0.1.12 → 0.1.14

package/src/providers/index.tsx

@@ -76,6 +76,25 @@ export function SettingsProvider({
     setSettings(defaultSettings);
   }, [deleteStoredSettings]);
 
+  // Apply the appearance choices the Customizer exposes but that nothing else
+  // wires up. Without this, the "Radius" and "Density" controls store a value
+  // yet change nothing on screen (dead controls in every app using core).
+  //  - radius  → drive the real `--radius` token. Tailwind's @theme inline
+  //    derives rounded-sm/md/lg/xl from it (see styles/base.css), so the whole
+  //    UI re-rounds live. The Customizer stores rem (0, 0.3, 0.5, 0.75, 1).
+  //  - density → expose as a `data-density` attribute; base.css tightens the
+  //    global `--spacing` scale in compact mode ([data-density="compact"]).
+  // Client-only (useEffect) so there's no SSR/hydration mismatch.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty("--radius", `${settings.radius ?? 0.5}rem`);
+    if (settings.density === "compact") {
+      root.setAttribute("data-density", "compact");
+    } else {
+      root.removeAttribute("data-density");
+    }
+  }, [settings.radius, settings.density]);
+
   return (
     <SettingsContext.Provider
       value={{ settings, updateSettings, resetSettings }}

package/src/rbac/role-service.ts

@@ -18,6 +18,23 @@ export type RoleFilters = {
   status?: string;
 };
 
+// Schema-tolerance seam: apps whose User/Role tables diverge from the default
+// (name/email/image/isActive + Role.createdAt/updatedAt) pass field overrides so
+// getRolesData works without forking. E.g. wu-vpbank:
+//   { userNameField: "fullName", userActiveField: "active", userImageField: null, roleTimestamps: false }
+export type RoleServiceSchema = {
+  /** User display-name column. Default "name". */
+  userNameField?: string;
+  /** User email column. Default "email". */
+  userEmailField?: string;
+  /** User avatar column, or null if the table has none. Default "image". */
+  userImageField?: string | null;
+  /** User active-flag column. Default "isActive". */
+  userActiveField?: string;
+  /** Whether Role has createdAt/updatedAt. Default true; false → order by name, blank timestamps. */
+  roleTimestamps?: boolean;
+};
+
 export type RoleData = {
   id: string;
   name: string;
@@ -68,6 +85,7 @@ export interface RolePrismaClient {
 export async function getRolesData(
   db: RolePrismaClient,
   params: RoleFilters = {},
+  schema: RoleServiceSchema = {},
 ): Promise<{
   total: number;
   page: number;
@@ -76,6 +94,13 @@ export async function getRolesData(
 }> {
   const { page = 1, pageSize = 10, search, status } = params;
 
+  // Schema knobs (default to the canonical name/email/image/isActive + timestamps).
+  const nameField = schema.userNameField ?? "name";
+  const emailField = schema.userEmailField ?? "email";
+  const imageField = schema.userImageField === undefined ? "image" : schema.userImageField;
+  const activeField = schema.userActiveField ?? "isActive";
+  const hasTimestamps = schema.roleTimestamps ?? true;
+
   const whereConditions: any[] = [];
 
   if (search) {
@@ -94,42 +119,24 @@ export async function getRolesData(
 
   const where: any = whereConditions.length > 0 ? { AND: whereConditions } : {};
 
+  // Build the user select from the (possibly overridden) field names.
+  const userSelect: Record<string, boolean> = { id: true, [nameField]: true, [emailField]: true };
+  if (imageField) userSelect[imageField] = true;
+  if (activeField) userSelect[activeField] = true;
+
   const [total, items] = await Promise.all([
     db.role.count({ where }),
     db.role.findMany({
       where,
-      orderBy: { createdAt: "desc" },
+      orderBy: hasTimestamps ? { createdAt: "desc" } : { name: "asc" },
       skip: (page - 1) * pageSize,
       take: pageSize,
       include: {
-        userRoles: {
-          include: {
-            user: {
-              select: {
-                id: true,
-                name: true,
-                email: true,
-                image: true,
-                isActive: true,
-              },
-            },
-          },
-        },
+        userRoles: { include: { user: { select: userSelect } } },
         rolePermissions: {
           include: {
-            resource: {
-              select: {
-                code: true,
-                name: true,
-                icon: true,
-              },
-            },
-            action: {
-              select: {
-                code: true,
-                name: true,
-              },
-            },
+            resource: { select: { code: true, name: true, icon: true } },
+            action: { select: { code: true, name: true } },
           },
         },
       },
@@ -150,13 +157,13 @@ export async function getRolesData(
     usersCount: role.userRoles.length,
     users: role.userRoles.map((ur: any) => ({
       id: ur.user.id,
-      name: ur.user.name,
-      email: ur.user.email,
-      image: ur.user.image,
-      isActive: ur.user.isActive,
+      name: ur.user[nameField] ?? null,
+      email: ur.user[emailField] ?? null,
+      image: imageField ? ur.user[imageField] ?? null : null,
+      isActive: activeField ? Boolean(ur.user[activeField]) : true,
     })),
-    createdAt: role.createdAt.toISOString(),
-    updatedAt: role.updatedAt.toISOString(),
+    createdAt: hasTimestamps && role.createdAt ? role.createdAt.toISOString() : "",
+    updatedAt: hasTimestamps && role.updatedAt ? role.updatedAt.toISOString() : "",
     createdBy: role.createdBy || undefined,
     updatedBy: role.updatedBy || undefined,
   }));

package/src/styles/base.css

@@ -582,4 +582,45 @@ aside.EmojiPickerReact {
 .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: #64748b;
   /* slate-500 */
+}
+
+/* ============================================================================
+ * Customizer: Density ("Comfortable" vs "Compact")
+ * SettingsProvider sets data-density="compact" on <html> from settings.density.
+ * Tailwind v4 derives EVERY spacing utility (p-/px-/gap-/space-/h-/w-/size-…)
+ * from the single `--spacing` token (default 0.25rem). Tightening it here packs
+ * the whole UI from one lever — tables, forms, cards, the sidebar — instead of
+ * per-component edits. 0.215rem ≈ 14% tighter: denser, still comfortably hit.
+ * ========================================================================== */
+[data-density="compact"] {
+  --spacing: 0.215rem;
+}
+
+/* ============================================================================
+ * Customizer: Sidebar variant "inset" / "floating" — frame colour.
+ * Core's default sidebar is a deep navy (--sidebar-background), and the shadcn
+ * inset/floating treatment paints the page frame with that same sidebar colour
+ * (has-[[data-variant=inset]]:bg-sidebar). On the navy default that reads as a
+ * harsh, broken-looking block. Repaint the frame with the soft neutral so the
+ * content reads as a CARD FLOATING ON A CALM PAGE (the rounded-xl + shadow core
+ * already applies do the floating). Token-based → adapts to dark mode.
+ * Un-layered → wins over the Tailwind `bg-sidebar` utility (in @layer utilities)
+ * regardless of specificity.
+ * ========================================================================== */
+.group\/sidebar-wrapper:has([data-variant="inset"]),
+.group\/sidebar-wrapper:has([data-variant="floating"]) {
+  background-color: hsl(var(--muted));
+}
+
+/* ============================================================================
+ * Customizer: floating / inset — round the header's BOTTOM-left corner.
+ * The content panel already rounds its left corners (rounded-l-xl clips the
+ * sticky header's top-left) and the sidebar rounds its corners, but the
+ * header's divider still met the left edge as a hard inner corner. The layout
+ * header is the first child of the SidebarInset <main>, a sibling after the
+ * sidebar peer (which carries data-variant). 0.75rem = rounded-xl, matching.
+ * ========================================================================== */
+[data-variant="floating"] ~ main > header,
+[data-variant="inset"] ~ main > header {
+  border-bottom-left-radius: 0.75rem;
 }

package/src/ui/index.tsx

@@ -15,3 +15,4 @@ export * from "./auth";
 // export * from "./crud"
 export * from "./management";
 export * from "./pages/not-found";
+export * from "./shared";

package/src/ui/layout/customizer.tsx

@@ -5,8 +5,6 @@ import { useParams, usePathname, useRouter } from "next/navigation";
 import {
   AlignLeft,
   AlignRight,
-  AlignStartHorizontal,
-  AlignStartVertical,
   MoonStar,
   RotateCcw,
   Sun,
@@ -48,11 +46,10 @@ interface CustomizerProps {
 }
 
 const sidebarVariants: SidebarVariantType[] = ["sidebar", "floating", "inset"];
-const sidebarCollapsibleOptions: SidebarCollapsibleType[] = [
-  "offcanvas",
-  "icon",
-  "none",
-];
+// "none" (lock the sidebar expanded) is intentionally NOT offered: it makes the
+// header collapse-toggle a no-op, which reads as a broken/conflicting control.
+// Both remaining options work with that toggle — offcanvas hides, icon → rail.
+const sidebarCollapsibleOptions: SidebarCollapsibleType[] = ["offcanvas", "icon"];
 const densityOptions: DensityType[] = ["comfortable", "compact"];
 
 // Localized labels — the customizer follows the active URL locale (params.lang)
@@ -246,41 +243,14 @@ export function Customizer({ trigger, triggerClassName }: CustomizerProps) {
                     <SunMoon className="shrink-0 h-4 w-4" />
                   </Button>
                 </div>
-                <div className="space-y-1.5">
-                  <span className="text-sm">{t("layout")}</span>
-                  <div className="grid grid-cols-2 gap-2">
-                    <Button
-                      variant={
-                        settings.layout === "horizontal"
-                          ? "secondary"
-                          : "outline"
-                      }
-                      onClick={() =>
-                        updateSettings({
-                          ...settings,
-                          layout: "horizontal",
-                        })
-                      }
-                    >
-                      <AlignStartHorizontal className="shrink-0 h-4 w-4 me-2" />
-                      {t("horizontal")}
-                    </Button>
-                    <Button
-                      variant={
-                        settings.layout === "vertical" ? "secondary" : "outline"
-                      }
-                      onClick={() =>
-                        updateSettings({
-                          ...settings,
-                          layout: "vertical",
-                        })
-                      }
-                    >
-                      <AlignStartVertical className="shrink-0 h-4 w-4 me-2" />
-                      {t("vertical")}
-                    </Button>
-                  </div>
-                </div>
+                {/* "Bố cục" (layout: horizontal/vertical) removed from the
+                    picker. The horizontal layout swaps the whole nav for a top
+                    menubar, which makes every sidebar option below ("Kiểu thanh
+                    bên", "Thu gọn thanh bên") a no-op — dead/conflicting
+                    controls. The apps here are designed around the vertical
+                    sidebar, so the customizer locks to it (defaultSettings.layout
+                    stays "vertical"; the HorizontalLayout code is untouched for
+                    anything that sets layout directly). */}
 
                 <div className="space-y-1.5">
                   <span className="text-sm">{t("sidebarVariant")}</span>

package/src/ui/layout/page-tabs.tsx

@@ -85,44 +85,10 @@ export function PageTabs({
     currentTabIndex >= 0 && currentTabIndex < sortedTabs.length - 1;
   const hasOtherTabs = sortedTabs.length > 1;
 
-  // Generate unique gradient background for each tab based on path
-  const getTabBackgroundColor = (path: string, isActive: boolean) => {
-    if (isActive) return "bg-background";
-
-    // Generate consistent hash from path
-    const normalizedPath = path.replace(/^\/[a-z]{2}(\/|$)/, "/");
-    const hash = normalizedPath.split("").reduce((acc, char) => {
-      return (acc << 5) - acc + char.charCodeAt(0);
-    }, 0);
-
-    // Refined gradient palette - darker and more visible (using dark theme colors for both modes)
-    const gradients = [
-      "bg-gradient-to-r from-slate-700 to-slate-600",
-      "bg-gradient-to-r from-zinc-700 to-zinc-600",
-      "bg-gradient-to-r from-stone-700 to-stone-600",
-      "bg-gradient-to-r from-neutral-700 to-neutral-600",
-      "bg-gradient-to-r from-blue-700 to-blue-600",
-      "bg-gradient-to-r from-indigo-700 to-indigo-600",
-      "bg-gradient-to-r from-purple-700 to-purple-600",
-      "bg-gradient-to-r from-violet-700 to-violet-600",
-      "bg-gradient-to-r from-fuchsia-700 to-fuchsia-600",
-      "bg-gradient-to-r from-pink-700 to-pink-600",
-      "bg-gradient-to-r from-rose-700 to-rose-600",
-      "bg-gradient-to-r from-red-700 to-red-600",
-      "bg-gradient-to-r from-orange-700 to-orange-600",
-      "bg-gradient-to-r from-amber-700 to-amber-600",
-      "bg-gradient-to-r from-yellow-700 to-yellow-600",
-      "bg-gradient-to-r from-lime-700 to-lime-600",
-      "bg-gradient-to-r from-green-700 to-green-600",
-      "bg-gradient-to-r from-emerald-700 to-emerald-600",
-      "bg-gradient-to-r from-teal-700 to-teal-600",
-      "bg-gradient-to-r from-cyan-700 to-cyan-600",
-      "bg-gradient-to-r from-sky-700 to-sky-600",
-    ];
-
-    // Select gradient based on hash to ensure consistency
-    const gradientIndex = Math.abs(hash) % gradients.length;
-    return gradients[gradientIndex];
+  // Neutral, single-style tab background (was a per-path rainbow gradient).
+  // Active tabs sit on the page surface; inactive tabs are a muted chip.
+  const getTabBackgroundColor = (_path: string, isActive: boolean) => {
+    return isActive ? "bg-background" : "bg-muted/60";
   };
 
   return (
@@ -163,21 +129,21 @@ export function PageTabs({
                     className={cn(
                       "group relative flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-all duration-200",
                       "border border-transparent",
-                      "hover:brightness-105 cursor-pointer",
+                      "cursor-pointer",
                       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                       getTabBackgroundColor(tab.path, isActive),
                       variant === "default" &&
                         (isActive
                           ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x border-b-0 rounded-t-md -mb-px z-10"
-                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground border-b border-border rounded-t-md"),
                       variant === "header" &&
                         (isActive
                           ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x rounded-t-md z-10"
-                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground border-b border-border rounded-t-md"),
                       !isLast &&
                         !isActive &&
                         variant === "default" &&
-                        "border-r border-white/10",
+                        "border-r border-border",
                     )}
                   >
                     {/* Tab number indicator (for keyboard shortcuts) */}

package/src/ui/layout/sidebar.tsx

@@ -185,11 +185,13 @@ export function AppSidebar({
     }
   };
 
-  // Enforce icon mode for Carbon style consistency if not set explicitly to offcanvas by some override (though we prefer icon)
-  const collapsibleMode =
-    settings.sidebarCollapsible === "offcanvas"
-      ? "icon"
-      : settings.sidebarCollapsible || "icon";
+  // Honour the Customizer's "Thu gọn thanh bên" choice as-is:
+  //   offcanvas → collapses fully off-screen (hidden), reopened via header toggle
+  //   icon      → collapses to an icon rail
+  //   none      → never collapses (always expanded)
+  // Previously offcanvas was force-remapped to icon, so "Ẩn ngoài" could never
+  // actually hide the sidebar (it behaved identically to "Biểu tượng").
+  const collapsibleMode = settings.sidebarCollapsible || "icon";
 
   return (
     <SidebarWrapper

package/src/ui/primitives/index.tsx

@@ -132,3 +132,4 @@ export * from "./toggle";
 export * from "./toggle-group";
 export * from "./combobox";
 export * from "./label";
+export * from "./dynamic-icon";

package/src/ui/primitives/sidebar.tsx

@@ -218,10 +218,16 @@ const Sidebar = React.forwardRef<
     }, [hoverExpandEnabled, setHoverOpen]);
 
     if (collapsible === "none") {
+      // A non-collapsing sidebar is permanently EXPANDED, so it must use the
+      // expanded surface (bg-background / text-foreground), NOT the deep
+      // `bg-sidebar` colour. On a coloured sidebar (e.g. the navy default) the
+      // old `bg-sidebar text-sidebar-foreground` left the group labels + active
+      // item — which are `text-primary` — at ~1.9:1 contrast (unreadable). This
+      // matches the expanded state of the collapsible sidebar (labels-on-light).
       return (
         <div
           className={cn(
-            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+            "flex h-full w-(--sidebar-width) flex-col border-r bg-background text-foreground",
             className,
           )}
           ref={ref}
@@ -294,7 +300,7 @@ const Sidebar = React.forwardRef<
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
             // Adjustments for collapsible=icon
             variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_8px)] group-data-[collapsible=icon]:px-2.5"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_8px)] group-data-[collapsible=icon]:px-1"
               : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[collapsible=icon]:border-r group-data-[collapsible=icon]:px-0",
             // Hover expand - override icon width to full width on hover
             "group-data-[hover-expanded=true]:!w-(--sidebar-width) group-data-[hover-expanded=true]:shadow-xl group-data-[hover-expanded=true]:z-[100]",
@@ -310,7 +316,12 @@ const Sidebar = React.forwardRef<
               "group-data-[state=collapsed]:bg-sidebar group-data-[state=collapsed]:border-border/50",
               "group-data-[state=expanded]:bg-background group-data-[state=expanded]:border-border/50",
               "group-data-[hover-expanded=true]:!bg-background group-data-[hover-expanded=true]:!border-border/50",
-              "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+              // Floating & inset: the sidebar is a soft floating panel. Round
+              // ALL corners (rounded-xl) so the top-right corner where it meets
+              // the header reads as a soft curve, not a hard 90° junction. Inset
+              // previously had no radius (sharp navy block) — now matches.
+              "group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+              "group-data-[variant=inset]:rounded-xl group-data-[variant=inset]:border group-data-[variant=inset]:border-sidebar-border group-data-[variant=inset]:shadow",
             )}
           >
             {children}
@@ -386,7 +397,17 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex min-h-svh flex-1 flex-col bg-muted/40 transition-[margin] duration-200 ease-linear",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        // Inset: content is a card floating with a uniform m-2 gap on ALL sides
+        // (no ml-0 override) so there's a small gap between the sidebar and the
+        // content/header instead of them touching.
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        // Floating: the content is full-bleed (no card), and its LEFT edge is
+        // the side that meets the floating sidebar. Give it a small left gap
+        // (ml-2) so it doesn't touch the sidebar, and round both left corners
+        // (top-left clips the sticky header, bottom-left clips the footer via
+        // overflow-hidden) so the content hugs the floating sidebar with soft
+        // curves instead of hard 90° corners. Right edge stays flush.
+        "md:peer-data-[variant=floating]:ml-2 md:peer-data-[variant=floating]:rounded-l-xl",
         className,
       )}
       {...props}

package/src/ui/shared/index.ts

@@ -0,0 +1,6 @@
+// @goerp/core/ui shared app-level components (promoted from vinhhoa/wu so apps
+// stop copying them). Re-exported through the ui barrel.
+export * from "./page-header";
+export * from "./status-indicator";
+export * from "./table-sum-footer";
+export * from "./table-styles";

package/src/ui/shared/page-header.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * PageHeader — standardized page header (title + description + icon + actions).
+ * Promoted from vinhhoa/wu; every app was copying this.
+ */
+
+import React, { memo } from "react";
+import { cn } from "../../utils";
+
+export interface PageHeaderProps {
+  /** Page title (required) */
+  title: string;
+  /** Optional subtitle/description */
+  description?: string;
+  /** Optional icon displayed before the title */
+  icon?: React.ReactNode;
+  /** Right-side actions (buttons, filters, etc.) */
+  actions?: React.ReactNode;
+  /** Breadcrumb node above the title */
+  breadcrumbs?: React.ReactNode;
+  /** Extra content below the title/actions row */
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const PageHeader = memo(function PageHeader({
+  title,
+  description,
+  icon,
+  actions,
+  breadcrumbs,
+  children,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      {breadcrumbs && <div className="text-xs text-text-tertiary">{breadcrumbs}</div>}
+
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex min-w-0 items-center gap-3">
+          {icon && <div className="flex-shrink-0 text-text-secondary">{icon}</div>}
+          <div className="min-w-0">
+            <h1 className="truncate text-lg font-semibold text-text-primary">{title}</h1>
+            {description && (
+              <p className="mt-0.5 truncate text-sm text-text-secondary">{description}</p>
+            )}
+          </div>
+        </div>
+
+        {actions && <div className="flex flex-shrink-0 items-center gap-2">{actions}</div>}
+      </div>
+
+      {children && <div className="mt-3">{children}</div>}
+    </div>
+  );
+});