ui-admin/README.md

@lilith/ui-admin

Admin panel components for building comprehensive administration interfaces. Includes user management, role editing, moderation queues, audit logs, and system health monitoring.

Features

• User Management - Full-featured user table with bulk actions and column configuration
• Role Editor - Permission management with categorized checkbox trees
• Moderation Queue - Content moderation workflow components
• Audit Log Viewer - System activity tracking and display
• System Health - Service status and resource monitoring indicators
• Advanced Search - Multi-field filtering with saved searches
• Bulk Actions - Toolbar for performing actions on multiple selected items

Installation

npm install @lilith/ui-admin
# or
pnpm add @lilith/ui-admin

Peer Dependencies

npm install react react-dom styled-components

Usage

UserManagementTable

A comprehensive table for managing users with selection, bulk actions, and configurable columns.

import { UserManagementTable } from '@lilith/ui-admin';
import type { User, ColumnConfig } from '@lilith/ui-admin';

const users: User[] = [
  {
    id: '1',
    name: 'Jane Doe',
    email: 'jane@example.com',
    role: 'Admin',
    status: 'active',
    createdAt: new Date('2024-01-15'),
  },
  {
    id: '2',
    name: 'John Smith',
    email: 'john@example.com',
    role: 'User',
    status: 'suspended',
    createdAt: new Date('2024-02-20'),
  },
];

function AdminPanel() {
  const [columnConfig, setColumnConfig] = useState<ColumnConfig>({
    visible: ['select', 'name', 'email', 'role', 'status', 'createdAt', 'actions'],
    order: ['select', 'name', 'email', 'role', 'status', 'createdAt', 'actions'],
  });

  return (
    <UserManagementTable
      users={users}
      loading={false}
      columnConfig={columnConfig}
      onColumnConfigChange={setColumnConfig}
      onBulkAction={(action, userIds) => {
        console.log(`Action: ${action} on users:`, userIds);
      }}
      onUserEdit={(user) => console.log('Edit user:', user)}
      onUserDelete={(userId) => console.log('Delete user:', userId)}
    />
  );
}

RoleEditor

Edit role permissions with categorized checkbox trees.

import { RoleEditor } from '@lilith/ui-admin';
import type { Role, Permission } from '@lilith/ui-admin';

const permissions: Permission[] = [
  { id: 'users.read', name: 'View Users', category: 'Users' },
  { id: 'users.write', name: 'Edit Users', category: 'Users', description: 'Create and modify user accounts' },
  { id: 'content.read', name: 'View Content', category: 'Content' },
  { id: 'content.moderate', name: 'Moderate Content', category: 'Content' },
];

const role: Role = {
  id: 'moderator',
  name: 'Moderator',
  permissions: ['users.read', 'content.read', 'content.moderate'],
};

function RoleManagement() {
  return (
    <RoleEditor
      role={role}
      availablePermissions={permissions}
      onSave={async (updatedRole) => {
        await saveRole(updatedRole);
      }}
      onCancel={() => navigate('/admin/roles')}
      readOnly={false}
    />
  );
}

SystemHealthIndicator

Display system health with service status and resource metrics.

import { SystemHealthIndicator } from '@lilith/ui-admin';
import type { ServiceStatus, ResourceMetric } from '@lilith/ui-admin';

const services: ServiceStatus[] = [
  { name: 'API Server', status: 'healthy', latency: 45 },
  { name: 'Database', status: 'healthy', latency: 12 },
  { name: 'Cache', status: 'degraded', latency: 150 },
];

const resources: ResourceMetric[] = [
  { name: 'CPU', value: 45, max: 100, unit: '%' },
  { name: 'Memory', value: 6.2, max: 8, unit: 'GB' },
  { name: 'Disk', value: 120, max: 500, unit: 'GB' },
];

<SystemHealthIndicator services={services} resources={resources} />

AuditLogViewer

View and filter system audit logs.

import { AuditLogViewer } from '@lilith/ui-admin';
import type { AuditLogEntry } from '@lilith/ui-admin';

const logs: AuditLogEntry[] = [
  {
    id: '1',
    timestamp: new Date(),
    actor: 'admin@example.com',
    action: 'user.create',
    target: 'user:123',
    details: { name: 'New User' },
  },
];

<AuditLogViewer
  entries={logs}
  onLoadMore={() => fetchMoreLogs()}
  hasMore={true}
/>

BulkActionToolbar

Toolbar for bulk operations on selected items.

import { BulkActionToolbar } from '@lilith/ui-admin';
import type { BulkAction } from '@lilith/ui-admin';

const actions: BulkAction[] = [
  { id: 'activate', label: 'Activate', variant: 'secondary' },
  { id: 'suspend', label: 'Suspend', variant: 'secondary' },
  { id: 'delete', label: 'Delete', variant: 'danger', confirmRequired: true },
];

<BulkActionToolbar
  selectedCount={5}
  actions={actions}
  onAction={(actionId) => handleBulkAction(actionId)}
  onClearSelection={() => clearSelection()}
  loading={false}
/>

API Reference

Components

Component	Description
UserManagementTable	Full-featured user management table
RoleEditor	Permission management editor
ModerationQueue	Content moderation workflow
AuditLogViewer	System activity log display
SystemHealthIndicator	Service and resource health display
AdvancedSearch	Multi-field search with saved filters
BulkActionToolbar	Bulk action controls
AlertBadge	Alert/notification badge
ConfirmDialog	Confirmation dialog component

Types

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  status: 'active' | 'suspended' | 'banned';
  createdAt: Date;
}

interface ColumnConfig {
  visible: string[];
  order: string[];
}

interface Permission {
  id: string;
  name: string;
  description?: string;
  category: string;
}

interface Role {
  id: string;
  name: string;
  permissions: string[];
}

interface BulkAction {
  id: string;
  label: string;
  variant?: 'primary' | 'secondary' | 'danger';
  confirmRequired?: boolean;
}

interface ServiceStatus {
  name: string;
  status: 'healthy' | 'degraded' | 'down';
  latency?: number;
}

interface ResourceMetric {
  name: string;
  value: number;
  max: number;
  unit: string;
}

Dependencies

• @lilith/ui-primitives - Button, Checkbox, StatusBadge components
• @lilith/ui-data - DataTable component
• @lilith/ui-feedback - Feedback components
• @lilith/ui-utils - Utility functions (formatDate, etc.)
• @lilith/ui-theme - Theme tokens
• lucide-react - Icons

License

MIT