Admin-Dashboard mit Claude Code erstellen

Admin-Dashboard mit Claude Code aufbauen

Ein Admin-Dashboard ist eine komplexe Anwendung mit vielen Bildschirmen: KPI-Anzeige, Benutzerverwaltung, Datenanalyse und mehr. Mit Claude Code können Sie schnell ein vollwertiges Dashboard mit Sidebar-Navigation, Datentabellen und Charts erstellen.

Dashboard-Layout

> Erstelle ein Admin-Dashboard mit React + Tailwind CSS.
> 3-Spalten-Layout mit Sidebar-Navigation, Header und Hauptinhalt.
> Zeige KPI-Karten, Umsatzdiagramm und aktuelle Bestellungstabelle an.

// src/components/DashboardLayout.tsx
import { ReactNode, useState } from 'react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';

export function DashboardLayout({ children }: { children: ReactNode }) {
  const [isSidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
      <Sidebar isOpen={isSidebarOpen} onToggle={() => setSidebarOpen(!isSidebarOpen)} />
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header onMenuClick={() => setSidebarOpen(!isSidebarOpen)} />
        <main className="flex-1 overflow-y-auto p-6">
          {children}
        </main>
      </div>
    </div>
  );
}

KPI-Karten-Komponente

// src/components/KpiCard.tsx
interface KpiCardProps {
  title: string;
  value: string;
  change: number;
  icon: ReactNode;
}

export function KpiCard({ title, value, change, icon }: KpiCardProps) {
  const isPositive = change >= 0;

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <span className="text-gray-500 dark:text-gray-400 text-sm">{title}</span>
        <div className="p-2 bg-blue-50 dark:bg-blue-900/30 rounded-lg">{icon}</div>
      </div>
      <div className="text-2xl font-bold dark:text-white mb-1">{value}</div>
      <div className={`text-sm flex items-center gap-1 ${isPositive ? 'text-green-500' : 'text-red-500'}`}>
        <span>{isPositive ? '↑' : '↓'}</span>
        <span>{Math.abs(change)}%</span>
        <span className="text-gray-400 ml-1">gg. Vormonat</span>
      </div>
    </div>
  );
}

Umsatzdiagramm-Integration

// src/components/SalesChart.tsx
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const salesData = [
  { month: 'Jan', revenue: 4200000, orders: 320 },
  { month: 'Feb', revenue: 3800000, orders: 290 },
  { month: 'Mär', revenue: 5100000, orders: 410 },
  { month: 'Apr', revenue: 4700000, orders: 380 },
  { month: 'Mai', revenue: 5600000, orders: 450 },
  { month: 'Jun', revenue: 6200000, orders: 510 },
];

export function SalesChart() {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold dark:text-white mb-4">Umsatzverlauf</h3>
      <ResponsiveContainer width="100%" height={300}>
        <AreaChart data={salesData}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="month" />
          <YAxis tickFormatter={(v) => `€${(v / 1000).toFixed(0)}k`} />
          <Tooltip
            formatter={(value: number) => `€${value.toLocaleString()}`}
          />
          <Area
            type="monotone"
            dataKey="revenue"
            stroke="#3B82F6"
            fill="#3B82F6"
            fillOpacity={0.1}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

Datentabelle

// src/components/RecentOrders.tsx
interface Order {
  id: string;
  customer: string;
  amount: number;
  status: 'completed' | 'pending' | 'cancelled';
  date: string;
}

const statusStyles = {
  completed: 'bg-green-100 text-green-800',
  pending: 'bg-yellow-100 text-yellow-800',
  cancelled: 'bg-red-100 text-red-800',
};

const statusLabels = {
  completed: 'Abgeschlossen',
  pending: 'In Bearbeitung',
  cancelled: 'Storniert',
};

export function RecentOrders({ orders }: { orders: Order[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden">
      <div className="p-6 border-b dark:border-gray-700">
        <h3 className="text-lg font-semibold dark:text-white">Aktuelle Bestellungen</h3>
      </div>
      <table className="w-full">
        <thead className="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Bestell-ID</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Kunde</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Betrag</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
          </tr>
        </thead>
        <tbody className="divide-y dark:divide-gray-700">
          {orders.map((order) => (
            <tr key={order.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
              <td className="px-6 py-4 text-sm dark:text-gray-300">{order.id}</td>
              <td className="px-6 py-4 text-sm dark:text-gray-300">{order.customer}</td>
              <td className="px-6 py-4 text-sm dark:text-gray-300">€{order.amount.toLocaleString()}</td>
              <td className="px-6 py-4">
                <span className={`text-xs px-2 py-1 rounded-full ${statusStyles[order.status]}`}>
                  {statusLabels[order.status]}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Verwandte Ressourcen

Zur Datenvisualisierung siehe Implementierung der Datenvisualisierung, zur rollenbasierten Zugangskontrolle den RBAC-Implementierungsleitfaden.

Die offizielle Recharts-Dokumentation (recharts.org) ist auch für die Chart-Anpassung nützlich.