@egintegrations/admin-ui

Generic React admin UI components for building admin panels and dashboards. Includes navigation bars, data tables, status cards, audit logs, and more.

Features

• AdminNavbar: Configurable navigation bar with user info and sign-out
• StatusCard: Generic entity/status display cards with metadata
• DataTable: Feature-rich table component with actions and custom renderers
• AuditLogTable: Specialized audit log viewer with expandable details
• Badge: Status indicator badges with color variants
• Framework-agnostic: Works with Next.js, React Router, or plain React
• TypeScript: Full type safety with comprehensive interfaces
• Tailwind CSS: Styled with Tailwind utility classes

Installation

npm install @egintegrations/admin-ui

Peer Dependencies

This package requires Tailwind CSS to be configured in your project.

npm install react react-dom lucide-react clsx date-fns

Tailwind CSS Setup

Add the package to your tailwind.config.js content paths:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@egintegrations/admin-ui/src/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
};

Usage

AdminNavbar

Navigation bar for admin panels with configurable nav items and user display.

import { AdminNavbar } from '@egintegrations/admin-ui';
import { Activity, Users, FileText } from 'lucide-react';
import Link from 'next/link'; // or your router's Link component
import { usePathname } from 'next/navigation';

function MyAdmin() {
  const pathname = usePathname();

  return (
    <AdminNavbar
      title="My Admin Panel"
      currentPath={pathname}
      navItems={[
        { href: '/dashboard', label: 'Dashboard', icon: Activity },
        { href: '/users', label: 'Users', icon: Users },
        { href: '/audit', label: 'Audit Logs', icon: FileText },
      ]}
      user={{
        displayName: 'John Doe',
        email: '[email protected]',
      }}
      onSignOut={() => console.log('Sign out')}
      linkComponent={Link}
    />
  );
}

Props

• title (required): App title displayed in navbar
• navItems (required): Array of navigation items with href, label, and optional icon
• currentPath (required): Current pathname for active state highlighting
• user?: User object with displayName and/or email
• onSignOut?: Sign out button click handler
• linkComponent?: Link component for navigation (defaults to <a>)

StatusCard

Display entity status with color-coded badges, metadata, tags, and last activity.

import { StatusCard } from '@egintegrations/admin-ui';

<StatusCard
  entity={{ id: '1', name: 'Production API' }}
  title="Production API"
  description="Main API server handling production traffic"
  status="online"
  metadata={[
    { label: 'Type', value: 'API Server' },
    { label: 'Version', value: '2.1.0' },
    { label: 'Region', value: 'us-east-1' },
  ]}
  tags={['production', 'critical', 'monitored']}
  lastActivity={new Date()}
  onCardClick={(entity) => console.log('Clicked:', entity)}
/>

Props

• entity (required): The entity object (generic type)
• title (required): Card title
• description?: Card description
• status (required): Status type ('online' | 'offline' | 'error' | 'maintenance' | 'warning')
• metadata?: Array of label/value pairs to display
• tags?: Array of tag strings
• lastActivity?: Date or ISO string for last activity timestamp
• onCardClick?: Click handler receiving entity object
• linkHref?: Link destination (works with linkComponent)
• linkComponent?: Link component wrapper

DataTable

Generic table component with configurable columns, custom renderers, and row actions.

import { DataTable } from '@egintegrations/admin-ui';
import { Badge } from '@egintegrations/admin-ui';

interface Task {
  id: string;
  name: string;
  status: 'pending' | 'running' | 'completed' | 'failed';
  createdAt: string;
}

const columns = [
  {
    key: 'id',
    label: 'ID',
    render: (value: string) => value.slice(0, 8),
  },
  {
    key: 'name',
    label: 'Task Name',
  },
  {
    key: 'status',
    label: 'Status',
    render: (value: string) => (
      <Badge variant={value === 'completed' ? 'success' : 'warning'}>
        {value}
      </Badge>
    ),
  },
  {
    key: 'createdAt',
    label: 'Created',
    render: (value: string) => new Date(value).toLocaleDateString(),
  },
];

const actions = [
  {
    label: 'View',
    onClick: (row: Task) => console.log('View task:', row),
  },
  {
    label: 'Cancel',
    onClick: (row: Task) => console.log('Cancel task:', row),
    variant: 'danger' as const,
    disabled: (row: Task) => row.status === 'completed',
  },
];

<DataTable
  columns={columns}
  data={tasks}
  actions={actions}
  loading={false}
  emptyMessage="No tasks found"
  onRowClick={(row) => console.log('Row clicked:', row)}
/>

Props

• columns (required): Array of column definitions with key, label, and optional render function
• data (required): Array of data objects
• actions?: Array of action buttons with label, onClick, variant, and optional disabled function
• emptyMessage?: Message to display when data is empty
• loading?: Show loading state
• onRowClick?: Click handler for rows

AuditLogTable

Specialized table for displaying audit log entries with expandable details.

import { AuditLogTable } from '@egintegrations/admin-ui';

const logs = [
  {
    id: '1',
    timestamp: new Date(),
    userId: 'user-123',
    userName: 'John Doe',
    action: 'CREATE',
    resource: 'User',
    resourceId: 'user-456',
    status: 'success',
    details: {
      email: '[email protected]',
      role: 'admin',
    },
  },
  {
    id: '2',
    timestamp: '2024-01-20T10:30:00Z',
    userId: 'user-789',
    userName: 'Jane Smith',
    action: 'DELETE',
    resource: 'Document',
    resourceId: 'doc-123',
    status: 'failure',
    details: {
      error: 'Permission denied',
    },
  },
];

<AuditLogTable
  logs={logs}
  loading={false}
  emptyMessage="No audit logs found"
/>

Props

• logs (required): Array of audit log entry objects
• loading?: Show loading state
• emptyMessage?: Message to display when logs are empty

Badge

Status indicator badges with color variants.

import { Badge } from '@egintegrations/admin-ui';

<Badge variant="success">Active</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="default" size="sm">Small</Badge>

Props

• variant (required): Badge color variant ('success' | 'error' | 'warning' | 'info' | 'default')
• size?: Badge size ('sm' | 'md', defaults to 'md')

Complete Example

import React, { useState } from 'react';
import {
  AdminNavbar,
  StatusCard,
  DataTable,
  AuditLogTable,
  Badge,
} from '@egintegrations/admin-ui';
import { Activity, Server, Database } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function AdminDashboard() {
  const pathname = usePathname();

  const servers = [
    {
      id: '1',
      name: 'API Server 1',
      description: 'Production API',
      status: 'online' as const,
      metadata: [
        { label: 'Type', value: 'API' },
        { label: 'Version', value: '2.1.0' },
      ],
      tags: ['production', 'critical'],
      lastActivity: new Date(),
    },
  ];

  const tasks = [
    {
      id: 'task-1',
      name: 'Data Sync',
      status: 'completed',
      createdAt: new Date().toISOString(),
    },
  ];

  const auditLogs = [
    {
      id: '1',
      timestamp: new Date(),
      userId: 'user-1',
      userName: 'Admin User',
      action: 'CREATE',
      resource: 'Server',
      status: 'success' as const,
    },
  ];

  return (
    <div>
      <AdminNavbar
        title="Admin Dashboard"
        currentPath={pathname}
        navItems={[
          { href: '/dashboard', label: 'Dashboard', icon: Activity },
          { href: '/servers', label: 'Servers', icon: Server },
          { href: '/database', label: 'Database', icon: Database },
        ]}
        user={{ displayName: 'John Doe', email: '[email protected]' }}
        onSignOut={() => console.log('Sign out')}
        linkComponent={Link}
      />

      <div className="max-w-7xl mx-auto px-4 py-6">
        <h2 className="text-2xl font-bold mb-6">Servers</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
          {servers.map((server) => (
            <StatusCard key={server.id} entity={server} {...server} />
          ))}
        </div>

        <h2 className="text-2xl font-bold mb-6">Recent Tasks</h2>
        <DataTable
          columns={[
            { key: 'id', label: 'ID', render: (v) => v.slice(0, 8) },
            { key: 'name', label: 'Name' },
            {
              key: 'status',
              label: 'Status',
              render: (v) => <Badge variant="success">{v}</Badge>,
            },
          ]}
          data={tasks}
          actions={[
            { label: 'View', onClick: (row) => console.log(row) },
          ]}
        />

        <h2 className="text-2xl font-bold mt-8 mb-6">Audit Logs</h2>
        <AuditLogTable logs={auditLogs} />
      </div>
    </div>
  );
}

Source Project

Extracted from egi-botnet:

• AdminNavbar: apps/admin-ui/src/components/Navbar.tsx
• StatusCard: apps/admin-ui/src/components/BotCard.tsx (generalized)
• DataTable: apps/admin-ui/src/components/TaskList.tsx (generalized)
• AuditLogTable: apps/admin-ui/src/components/AuditLog.tsx

Refactored with:

• Framework-agnostic link components
• Generic entity types for StatusCard
• Configurable columns and actions for DataTable
• Removed Next.js-specific dependencies
• Made all components truly reusable

License

MIT

Contributing

See the main egi-comp-library repository for contribution guidelines.