@goplusvn/core 0.1.22 → 0.1.24

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

@@ -1,10 +1,12 @@
 "use client";
 
 import { useMemo, useCallback, useState } from "react";
-import { Loader2, UserCheck, UserX, KeyRound } from "lucide-react";
-import { 
-  Button, 
+import type { ReactNode } from "react";
+import { Loader2, UserX, KeyRound } from "lucide-react";
+import {
+  Button,
   Badge,
+  StatusIndicator,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -59,6 +61,8 @@ export interface RoleListPageProps {
     description: string | null;
     isDefault?: boolean;
   }>;
+  /** Nút Import app-specific (vd ImportDialog) — render trong toolbar khi có quyền import. */
+  importSlot?: ReactNode;
 }
 
 export function RoleListPage({
@@ -68,6 +72,7 @@ export function RoleListPage({
   initialData,
   resources,
   actions,
+  importSlot,
 }: RoleListPageProps) {
   const canCreate = permissions.create;
   const canUpdate = permissions.update;
@@ -199,7 +204,9 @@ export function RoleListPage({
 
   if (error) {
     return (
-      <div className="text-red-500">Không thể tải dữ liệu: {error.message}</div>
+      <div className="text-destructive">
+        Không thể tải dữ liệu: {error.message}
+      </div>
     );
   }
 
@@ -223,6 +230,7 @@ export function RoleListPage({
         canCreate={canCreate}
         canImport={canImport}
         canExport={canExport}
+        importSlot={importSlot}
       />
 
       {/* Roles Grid */}
@@ -342,15 +350,9 @@ export function RoleListPage({
                         </div>
                         <div className="flex items-center space-x-2">
                           {user.isActive ? (
-                            <Badge variant="default" className="text-xs">
-                              <UserCheck className="h-3 w-3 mr-1" />
-                              Active
-                            </Badge>
+                            <StatusIndicator status="active" />
                           ) : (
-                            <Badge variant="secondary" className="text-xs">
-                              <UserX className="h-3 w-3 mr-1" />
-                              Inactive
-                            </Badge>
+                            <StatusIndicator status="inactive" />
                           )}
                         </div>
                       </div>

package/src/ui/forms/multi-select.tsx

@@ -681,7 +681,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         {open && (
           <div
             ref={dropdownRef}
-            className="absolute z-[100] mt-1 w-full rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
+            className="absolute z-[100] mt-1 w-full min-w-[15rem] rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
             style={{
               top: "100%",
               left: 0,
@@ -746,14 +746,15 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 )}
               </div>
 
-              {/* Action Buttons */}
-              <div className="flex items-center justify-between border-b p-1">
-                <div className="flex items-center">
+              {/* Action Buttons — hàng gọn, không cho tràn: nhóm trái min-w-0,
+                  nhóm phải shrink-0; nút đóng màu trung tính (không phải xóa) */}
+              <div className="flex items-center justify-between gap-1 overflow-hidden border-b p-1">
+                <div className="flex min-w-0 items-center">
                   <Button
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="h-8 px-2 text-xs"
+                    className="h-7 px-1.5 text-xs"
                     onClick={(e) => {
                       e.stopPropagation();
                       handleSelectAll();
@@ -765,7 +766,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="h-8 px-2 text-xs"
+                    className="h-7 px-1.5 text-xs"
                     onClick={(e) => {
                       e.stopPropagation();
                       handleClearAll();
@@ -774,7 +775,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     Bỏ chọn
                   </Button>
                 </div>
-                <div className="flex items-center">
+                <div className="flex shrink-0 items-center">
                   <span
                     className="whitespace-nowrap px-1 text-[11px] tabular-nums text-muted-foreground"
                     title={`Đã chọn ${value.length} / ${
@@ -790,13 +791,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     size="sm"
                     aria-label="Đóng"
                     title="Đóng"
-                    className="h-8 w-8 shrink-0 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                    className="h-7 w-7 shrink-0 p-0 text-muted-foreground hover:text-foreground"
                     onClick={(e) => {
                       e.stopPropagation();
                       setOpen(false);
                     }}
                   >
-                    <X className="h-4 w-4" />
+                    <X className="h-3.5 w-3.5" />
                   </Button>
                 </div>
               </div>

package/src/ui/layout/horizontal-layout.tsx

@@ -35,7 +35,7 @@ export function HorizontalLayout({
         searchResults={searchResults}
         searchLoading={searchLoading}
       />
-      <div className="w-full min-h-screen flex flex-col bg-muted/40">
+      <div className="w-full min-h-screen flex flex-col bg-background">
         <HorizontalLayoutHeader
           dictionary={dictionary}
           navigation={navigation}

package/src/ui/primitives/sidebar.tsx

@@ -396,7 +396,9 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-muted/40 transition-[margin] duration-200 ease-linear",
+        // Canvas app dùng token bg-background (app tự quyết tông — vinhhoa/wu
+        // muốn nền TRẮNG); trước đây bg-muted/40 phủ xám toàn bộ trang.
+        "relative flex min-h-svh flex-1 flex-col bg-background transition-[margin] duration-200 ease-linear",
         // 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.