@goplusvn/core 0.1.22 → 0.1.23

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>