Overview
The KAIU Admin Dashboard (src/pages/admin/AdminDashboard.tsx) provides a comprehensive operations interface for managing orders, inventory, and viewing real-time business metrics. Access is secured with JWT authentication.
Authentication
Login System
Dashboard Layout
The dashboard uses a tabbed interface for different operational areas:- Resumen Ejecutivo
- Inventario
- Gestión de Envíos
Overview TabKey performance indicators and charts for business monitoring.
Executive Overview
KPI Cards
Four key metrics displayed at top of overview tab:Ventas Totales
Total Sales (Current Month)Shows revenue for current month with month-over-month comparison.
Ticket Promedio
Average Order ValueCalculated as:
totalSales / totalOrdersÓrdenes Activas
Pending OrdersCount of orders waiting to be fulfilled.
Total Pedidos
Total OrdersLifetime order count.
Permission-based Display: Financial data (sales, totals) only visible to user “kaiu”. Other admin users see order counts but not revenue.
Sales Chart
Daily Sales Visualization (Last 30 days)Order Status Distribution
Pie Chart showing current order breakdown:Shipment Management
Order Lifecycle States
Orders flow through multiple states, organized into filters:Por Procesar (To Process)
Por Procesar (To Process)
Orders needing shipping label generationStates included:
PENDING- Just createdAPPROVED- Payment confirmed (online)PREPARING- Being packedPROCESSING- In processCONFIRMED- Confirmed by customer
Por Recoger (Ready for Pickup)
Por Recoger (Ready for Pickup)
Orders with label generated, waiting for carrier pickup requestState:
READY_TO_SHIPActions:- Reprint label
- Request pickup from carrier
En Tránsito (In Transit)
En Tránsito (In Transit)
Orders in carrier’s handsStates included:
PICKUP_REQUESTED- Waiting for carrier to collectSHIPPED- In transitNOVEDAD- Delivery issue/incidentDISPATCHED- Out for delivery
Entregados (Delivered)
Entregados (Delivered)
Successfully completed ordersState:
DELIVEREDRead-only view for confirmation.Cancelados (Cancelled)
Cancelados (Cancelled)
Failed or returned ordersStates included:
CANCELLEDREJECTEDRETURNED
Order Table
Columns displayed:| Column | Description | Source |
|---|---|---|
| PIN | Readable order ID | order.pin or order.readableId |
| Fecha | Creation date | new Date(order.created_at).toLocaleDateString() |
| Cliente | Customer name + address | order.shipping_info.first_name, order.shipping_info.last_name |
| Productos | Line items with quantities | order.line_items.map(...) |
| Total* | Order total in COP | $${order.total.toLocaleString()} |
| Rastreo | Carrier + tracking number | order.shipments[0] |
| Pago | Payment method badge | COD or Online |
| Acciones | Action buttons | Status-dependent |
*Total column only visible to users with financial permissions.
- PIN
- Date (default: newest first)
- Client name
- Product count
- Total amount
Payment Filter
Additional filter to segment by payment type:- Todos
- Contra Entrega
- Pagado
Show all orders regardless of payment method
Action Buttons
Generate/Print Label
Creates shipping label with carrierStates:
- Primary button for PENDING/PROCESSING orders
- Outline button (reprint) for READY_TO_SHIP/SHIPPED orders
- Shows spinner while generating
Request Pickup
Notifies carrier to collect packageShown only for:
READY_TO_SHIP statusUpdates order status to PICKUP_REQUESTEDSync Shipments
Real-time Status Updates Manually sync order statuses with carrier:Sync button queries the logistics provider’s API for latest tracking info and updates database accordingly.
Inventory Management
See detailed documentation: Inventory Management Brief overview:- View all products with stock levels
- Edit prices, descriptions, and inventory
- Create new products
- Toggle product visibility (active/inactive)
- Upload product images
Status Badge System
Visual indicators for order states:Yellow
Pending, Ready to Ship
Orange
Pickup Requested
Blue/Indigo
Ready, Shipped
Green
Approved, Delivered
Red
Cancelled, Rejected
Gray
Unknown/Other
Data Refresh
Dashboard automatically fetches latest data on load and provides manual refresh:Responsive Design
Dashboard adapts to different screen sizes:- Desktop: Full table view with all columns
- Tablet: Horizontal scroll for table
- Mobile: Stacked card layout (via overflow-x-auto)
API Endpoints Used
| Endpoint | Method | Purpose |
|---|---|---|
/api/admin/login | POST | Authenticate admin |
/api/admin/orders | GET | Fetch order list |
/api/admin/dashboard-stats | GET | Get KPIs and chart data |
/api/admin/generate-label | POST | Create shipping label |
/api/admin/request-pickup | POST | Request carrier pickup |
/api/admin/sync-shipments | POST | Sync tracking statuses |
/api/admin/inventory | GET/POST/PUT | Manage products |
Related Features
Order Management
Detailed order fulfillment workflows
Inventory
Product catalog and stock management
E-commerce
Customer-facing store features