Enterprise
Dashboard Systems.

// components/dashboard/DataGrid.tsx
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
import { useQuery } from "@tanstack/react-query";

interface RowData {
  id: string;
  customer: string;
  revenue: number;
  status: "active" | "pending" | "closed";
  lastActivity: string;
}

const columns: GridColDef<RowData>[] = [
  { field: "customer", headerName: "Kunde", flex: 1, minWidth: 180 },
  {
    field: "revenue",
    headerName: "Umsatz",
    type: "number",
    width: 140,
    valueFormatter: (value: number) =>
      new Intl.NumberFormat("de-DE", {
        style: "currency",
        currency: "EUR",
      }).format(value),
  },
  { field: "status", headerName: "Status", width: 120 },
  { field: "lastActivity", headerName: "Letzte Aktivitaet", width: 180 },
];

export default function EnterpriseDataGrid() {
  const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 50,
  });

  const { data, isLoading } = useQuery({
    queryKey: ["customers", paginationModel],
    queryFn: () =>
      fetch(`/api/customers?${new URLSearchParams({
        page: String(paginationModel.page),
        limit: String(paginationModel.pageSize),
      })}`).then((res) => res.json()),
  });

  return (
    <DataGridPro
      rows={data?.rows ?? []}
      columns={columns}
      rowCount={data?.total ?? 0}
      loading={isLoading}
      paginationMode="server"
      paginationModel={paginationModel}
      onPaginationModelChange={setPaginationModel}
      pagination
      disableRowSelectionOnClick
      rowHeight={48}
      sx={{ border: 0 }}
    />
  );
}

// theme/enterprise-theme.ts
import { createTheme } from "@mui/material/styles";

// Brand-Token-System — Single Source of Truth
const tokens = {
  navy: "#001F3F",
  white: "#FFFFFF",
  black: "#000000",
  spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
  radius: 0, // Enterprise-Standard: keine Border-Radius
} as const;

export const enterpriseTheme = createTheme({
  palette: {
    primary: { main: tokens.navy, contrastText: tokens.white },
    background: { default: tokens.white, paper: tokens.white },
    text: { primary: tokens.black, secondary: "rgba(0,0,0,0.65)" },
  },
  typography: {
    fontFamily: "'Geist', -apple-system, sans-serif",
    h1: { fontWeight: 900, letterSpacing: "-0.03em", textTransform: "uppercase" },
    h2: { fontWeight: 900, letterSpacing: "-0.025em", textTransform: "uppercase" },
    body1: { fontSize: "0.9375rem", lineHeight: 1.7 },
  },
  shape: { borderRadius: tokens.radius },
  components: {
    MuiButton: {
      defaultProps: { disableElevation: true, disableRipple: true },
      styleOverrides: {
        root: {
          fontWeight: 900,
          letterSpacing: "0.1em",
          textTransform: "uppercase",
          padding: "12px 24px",
        },
      },
    },
    MuiDataGrid: {
      styleOverrides: {
        root: { border: `1px solid ${tokens.black}`, borderRadius: 0 },
        columnHeader: {
          backgroundColor: tokens.navy,
          color: tokens.white,
          fontWeight: 900,
          fontSize: "0.6875rem",
          letterSpacing: "0.15em",
          textTransform: "uppercase",
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: { borderRadius: 0, border: `1px solid ${tokens.black}` },
      },
    },
  },
});

// app/dashboard/layout.tsx
import { ReactNode } from "react";

interface NavItem {
  label: string;
  href: string;
  icon: string;
  roles: ("admin" | "manager" | "analyst")[];
}

const NAV_ITEMS: NavItem[] = [
  { label: "Overview", href: "/dashboard", icon: "grid", roles: ["admin", "manager", "analyst"] },
  { label: "Analytics", href: "/dashboard/analytics", icon: "chart", roles: ["admin", "analyst"] },
  { label: "Kunden", href: "/dashboard/customers", icon: "users", roles: ["admin", "manager"] },
  { label: "Settings", href: "/dashboard/settings", icon: "gear", roles: ["admin"] },
];

export default function DashboardLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <div className="flex h-screen bg-white">
      {/* Sidebar — persistiert ueber alle Dashboard-Seiten */}
      <nav
        aria-label="Dashboard Navigation"
        className="w-64 border-r border-black bg-white flex flex-col"
      >
        <div className="p-6 border-b border-black">
          <span className="text-xs font-black tracking-[0.3em] uppercase">
            Enterprise Dashboard
          </span>
        </div>
        <ul role="list" className="flex-1 py-4">
          {NAV_ITEMS.map((item) => (
            <li key={item.href}>
              <a
                href={item.href}
                className="flex items-center gap-3 px-6 py-3 text-sm
                           font-bold hover:bg-[#001F3F] hover:text-white
                           transition-colors"
              >
                {item.label}
              </a>
            </li>
          ))}
        </ul>
      </nav>

      {/* Main Content Area */}
      <main className="flex-1 overflow-y-auto">
        <header className="sticky top-0 z-10 bg-white border-b border-black px-8 py-4">
          <span className="text-[10px] font-mono font-bold tracking-[0.4em] text-black/45 uppercase">
            Dashboard // Live
          </span>
        </header>
        <div className="p-8">{children}</div>
      </main>
    </div>
  );
}