Skip to main content

​
Overview

The Admin Dashboard provides a comprehensive command center for monitoring clinic operations in real-time. It displays critical metrics, appointment schedules, inventory alerts, and financial data across all clinic branches.
The dashboard automatically refreshes data and displays role-specific metrics based on user permissions (admin, doctor, secretary).

​
Key Features

​
Real-Time Statistics

The dashboard fetches live data from the sp_get_dashboard_stats stored procedure and displays:

Patient Metrics

  • Total active patients
  • New patient growth
  • Patients per branch

Appointment Data

  • Today’s scheduled appointments
  • Waiting room status
  • Completed appointments

Inventory Alerts

  • Low stock items count
  • Critical inventory warnings
  • Reorder notifications

Financial Overview

  • Total outstanding debt
  • Revenue projections
  • Payment collection status

​
Dashboard Components

​
Stats Cards

Role-based metric cards that adapt based on user role: Admin View - Four primary metrics:
  • Patients: Total patient count with growth indicator
  • Citas Hoy: Today’s appointment schedule
  • Inventario: Low stock alert count (links to /admin/inventory)
  • Por Cobrar: Total outstanding debt in DOP currency (links to /admin/reports)
Doctor View - Four clinical metrics:
  • Mis Pacientes: Assigned patient base
  • Agenda Hoy: Today’s appointment schedule
  • En Espera: Waiting room patient count
  • Completadas: Completed appointments today
Secretary View - Four operational metrics:
  • Agenda: Total appointments today
  • Check-in: Patients in waiting room
  • Check-out: Completed appointments
  • Pacientes: Total patient base

​
Clinical Management Panel

The main agenda view displays: 
// Data structure from API
{
  id: number,
  patient_id: number,
  appointment_time: string,
  first_name: string,
  last_name: string,
  notes: string,
  doctor_name: string,
  status: 'scheduled' | 'confirmed' | 'waiting' | 'completed' | 'cancelled'
}
Each appointment card shows:
  • Time: Hour and minute (24-hour format)
  • Patient Name: Full name with link to patient profile
  • Doctor: Assigned practitioner
  • Procedure: Treatment type or “Consulta General”
  • Status Badge: Color-coded status indicator
    • Green (Atendida): Completed
    • Amber (En sala): Waiting
    • Teal (Confirmada): Confirmed
    • Slate (Pendiente): Scheduled
Use the branch selector to filter dashboard data by clinic location:
  • Select “Todas las sedes” for aggregate view
  • Choose specific branch for location-specific metrics
  • Data automatically refreshes on selection change

​
Performance Widget

Displays clinical efficiency metrics:
  • Completion Rate: Percentage of appointments completed vs scheduled
  • Progress Bar: Visual representation of throughput
  • Contextual Data: Shows {completed}/{total} appointments
// Completion rate calculation
const completionRate = appointments > 0 
  ? Math.round((completed / appointments) * 100) 
  : 0;

​
Activity Feed

Recent system activity log showing:
  • User login events
  • Clinical record updates
  • Timestamped actions
  • User initials avatars
  • Color-coded action types

​
Quick Access Console

Direct navigation buttons (admin only):
  • Pacientes: Navigate to patient management
  • Citas: Jump to appointment scheduler
  • Logística: Access inventory management
  • Finanzas: View financial reports

​
API Integration

​
Dashboard Stats Endpoint

Endpoint: GET /api/dashboard/stats Query Parameters:
  • branchId (string): Branch ID or “all” for aggregate data
Response Structure: 
{
  "stats": {
    "patients": number,
    "appointments": number,
    "doctors": number,
    "branches": number,
    "waiting": number,
    "completed": number,
    "lowStock": number,
    "totalDebt": number
  },
  "branches": Array<{id: number, name: string}>,
  "activity": Array<ActivityLog>,
  "agenda": Array<AppointmentEntry>
}
Source: /src/routes/api/dashboard/stats/+server.js

​
Alerts Endpoint

Endpoint: GET /api/dashboard/alerts Returns inventory alerts via sp_list_inventory_alerts procedure. Source: /src/routes/api/dashboard/alerts/+server.js

​
Visual Design

The dashboard uses a modern, high-density design with gradient accents and smooth animations for professional clinical presentation.

​
Color Coding

  • Teal (#0d9488): Primary accent, patient data
  • Blue (#2563eb): Appointments, scheduling
  • Rose (#e11d48): Critical alerts, low inventory
  • Amber (#d97706): Financial data, warnings
  • Green (#059669): Completed tasks, success states

​
Responsive Behavior

  • Desktop: Two-column layout (main console + sidebar)
  • Tablet (< 1200px): Sidebar becomes two-column grid
  • Mobile (< 768px): Single column stack

​
Usage Example

1

Access Dashboard

Navigate to /dashboard after authentication
2

Select Branch Filter

Choose a specific branch or “Todas las sedes” for system-wide view
3

Review Metrics

Check stat cards for immediate operational insights
4

Monitor Agenda

Review today’s appointment schedule in the clinical panel
5

Check Alerts

DashboardAlerts component displays critical notifications
6

Quick Navigate

Use quick access buttons to jump to specific admin sections

Inventory Management

Manage stock levels and track supplies

Financial Reports

View revenue, debts, and financial analytics

Analytics Dashboard

Deep-dive performance metrics

System Settings

Configure clinic identity and parameters

Build docs developers (and LLMs) love

Get started for freeTalk to us