@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

``bash
npm install @egintegrations/admin-ui
`

$3

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

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

$3

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

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

Usage

$3

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

`tsx
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 (
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: 'john@example.com',
}}
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 )

$3

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

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

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

$3

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

`tsx
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) => (

{value}

),
},
{
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',
},
];

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

$3

Specialized table for displaying audit log entries with expandable details.

`tsx
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: 'newuser@example.com',
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',
},
},
];

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

$3

Status indicator badges with color variants.

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

Active
Failed
Pending
Info
Small
`

#### Props

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

Complete Example

`tsx
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 (


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.