Building a Management Center Dashboard

The Need for an Admin Tool

As the XGen platform grew, the need for administrative capabilities grew with it. This post documents the process of building a management center — a single place to handle user management, workflow statistics, and system monitoring.

Dashboard Layout Design

The management center uses a left sidebar + main content area layout.

// app/management/layout.tsx
export default function ManagementLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen bg-gray-50">
      <ManagementSidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <ManagementHeader />
        <main className="flex-1 overflow-auto p-6">
          {children}
        </main>
      </div>
    </div>
  );
}

Metric Card Component

Key metrics are displayed as cards at the top of the dashboard, giving a quick overview of total users, active workflows, today's execution count, and API call volume.

interface MetricCardProps {
  title: string;
  value: number | string;
  change?: number;
  icon: React.ReactNode;
}

const MetricCard: React.FC<MetricCardProps> = ({ title, value, change, icon }) => (
  <div className="bg-white rounded-xl p-6 shadow-sm border">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm text-gray-500">{title}</p>
        <p className="text-2xl font-bold mt-1">{value}</p>
        {change !== undefined && (
          <span className={change >= 0 ? 'text-green-500' : 'text-red-500'}>
            {change >= 0 ? '↑' : '↓'} {Math.abs(change)}%
          </span>
        )}
      </div>
      <div className="p-3 bg-blue-50 rounded-lg">{icon}</div>
    </div>
  </div>
);

Introducing a Chart System

We used the Recharts library to visualize workflow execution trends, user growth, and API response time distributions. The hourly execution heatmap in particular proved extremely useful for understanding service usage patterns.

User Management Table

The user list is implemented as a table with server-side pagination and search. We went with TanStack Table v8 — its headless UI approach gave us full control over styling.

const columns: ColumnDef<User>[] = [
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'role', header: 'Role',
    cell: ({ getValue }) => <RoleBadge role={getValue<string>()} /> },
  { accessorKey: 'lastLoginAt', header: 'Last Login',
    cell: ({ getValue }) => formatDate(getValue<string>()) },
  { id: 'actions', header: 'Actions',
    cell: ({ row }) => <UserActions user={row.original} /> },
];

Real-Time Notification System

We also built a real-time notification system to alert administrators of system events — workflow failures, GPU instance shutdowns, usage threshold breaches, and more.