Como construir un dashboard de administracion con Claude Code

Construyendo un dashboard de administracion con Claude Code

Un dashboard de administracion es una aplicacion compleja que incluye multiples pantallas como visualizacion de KPIs, gestion de usuarios y analisis de datos. Con Claude Code, puedes crear rapidamente un dashboard completo con navegacion lateral, tablas de datos y graficos.

Layout del dashboard

> Crea un dashboard de administracion con React + Tailwind CSS.
> Layout de 3 columnas con navegacion lateral, encabezado y contenido principal.
> Muestra tarjetas de KPI, grafico de ventas y tabla de pedidos recientes.

// 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>
  );
}

Componente de tarjeta KPI

// 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">vs mes anterior</span>
      </div>
    </div>
  );
}

Integracion de grafico de ventas

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

const salesData = [
  { month: 'Ene', revenue: 4200000, orders: 320 },
  { month: 'Feb', revenue: 3800000, orders: 290 },
  { month: 'Mar', revenue: 5100000, orders: 410 },
  { month: 'Abr', revenue: 4700000, orders: 380 },
  { month: 'May', 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">Tendencia de ventas</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>
  );
}

Tabla de datos

// 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: 'Completado',
  pending: 'En proceso',
  cancelled: 'Cancelado',
};

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">Pedidos recientes</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">ID de pedido</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cliente</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Monto</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Estado</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>
  );
}

Recursos relacionados

Para la visualizacion de datos, consulta implementacion de visualizacion de datos, y para el control de acceso basado en roles, consulta la guia de implementacion de RBAC.

La documentacion oficial de Recharts (recharts.org) tambien es util para personalizar graficos.