Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Danielings/Pasantia-Proyecto/llms.txt

Use this file to discover all available pages before exploring further.

The Dashboard is the first screen authenticated users see after logging in. It is available at the /dashboard route and provides an at-a-glance picture of the entire hardware inventory: how many assets exist, how many are functional, and how many require attention. All visualizations are built with Recharts and the layout is a fully responsive Tailwind CSS grid rendered inside the shared Header layout component.
The Dashboard is a protected route. An active session cookie (acceso_token) must be present; users who are not authenticated are redirected to the login page before this page renders.

​
Summary Cards

The top section of the page displays three metric cards arranged in a responsive grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-3). Each card shows a headline number and a context icon.

Total Components

The total count of all registered assets — equipment and peripherals combined — tracked across every office.

Active / Functional

Assets whose estado field is Funcional. Displayed in green to signal healthy inventory levels.

Under Repair

Assets whose estado field is En Reparación. Displayed in amber as a prompt for follow-up action.
The card values map directly to the statusData array that drives the donut chart, ensuring the numbers on the cards and the chart always agree: 
const statusData = [
  { name: "Funcional",     value: 150 },
  { name: "En Reparación", value: 12  },
  { name: "Inactivo",      value: 8   },
];

​
Bar Chart — Equipment by Category

The bar chart sits on the left half of the charts row and compares the total inventory versus the available count for each hardware category. It uses two <Bar> series rendered inside a <BarChart> with a <ResponsiveContainer> so it scales to any screen width. 
const hardwareData = [
  { name: "Teclados",  total: 45, disponibles: 40 },
  { name: "Mouse",     total: 50, disponibles: 48 },
  { name: "Monitores", total: 35, disponibles: 30 },
  { name: "CPUs",      total: 25, disponibles: 22 },
  { name: "Laptops",   total: 15, disponibles: 10 },
];
SeriesColorDescription
total — “Total Inventario”#93c5fd (light blue)All registered units of that category
disponibles — “Disponibles”#1e40af (dark blue)Units currently unassigned or in active use
Chart configuration highlights:
  • CartesianGrid uses dashed horizontal lines only (vertical={false}) for a clean look.
  • Both axes have axisLine={false} and tickLine={false} to remove visual noise.
  • Bars use radius={[4, 4, 0, 0]} for rounded top corners.
  • A <Tooltip> with borderRadius: "8px" and boxShadow matches the card styling.

​
Donut Chart — Overall Status Breakdown

The donut chart occupies the right half of the charts row. It uses a <PieChart> with a single <Pie> configured as a ring (innerRadius={80}, outerRadius={110}). 
const COLORS = ["#10b981", "#f59e0b", "#ef4444"];
// Maps to: Funcional, En Reparación, Inactivo
Each slice maps to one status category:
StatusColorHex
FuncionalEmerald#10b981
En ReparaciónAmber#f59e0b
InactivoRed#ef4444
A <Legend> anchored at verticalAlign="bottom" labels each slice below the ring, and paddingAngle={3} adds a small gap between slices to make them visually distinct.

​
Page Layout

┌─────────────────────────────────────────────┐
│  <Header />                                 │
├─────────────────────────────────────────────┤
│  Panel de Control  (h1)                     │
│  Resumen general del inventario tecnológico │
├──────────────┬──────────────┬───────────────┤
│ Total (card) │ Active (card)│ Repair (card) │
├──────────────┴──────────────┴───────────────┤
│  Bar Chart (lg:col-span-1)                  │
│  Donut Chart (lg:col-span-1)                │
└─────────────────────────────────────────────┘
The <main> wrapper is constrained to max-w-7xl with horizontal padding that adjusts at sm and lg breakpoints (px-4 sm:px-6 lg:px-8). Both chart panels are bg-white rounded-xl shadow-sm cards consistent with the metric cards above them.
To extend the dashboard with live Firestore data, replace the static hardwareData and statusData arrays with useEffect calls that query GET /api/equipos and aggregate the results by tipo and estado on the client side.

Build docs developers (and LLMs) love

Get started for freeTalk to us