Medical Dashboard - Telemedicine Platform

A professional telemedicine dashboard built with React, TypeScript, Tailwind CSS, and modern web technologies. This application allows healthcare providers to manage patients, schedule video consultations, and view analytics.

Features

• Patient Management: View, search, filter, and manage patient records
• Patient Details: Comprehensive patient profiles with consultation history, medications, and appointments
• Video Calls: UI for scheduling and managing telemedicine video consultations
• Analytics Dashboard: Visual charts and statistics for consultations, patient demographics, and practice metrics
• Responsive Design: Mobile-friendly interface with adaptive layouts

Tech Stack

• React 18 with TypeScript
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Router v6 - Client-side routing
• TanStack Query (React Query) - Data fetching and caching
• Recharts - Chart library for analytics
• JSON Server - Mock API server
• Lucide React - Icon library
• date-fns - Date formatting utilities

Getting Started

Table of Contents

• What is This System?
• Prerequisites
• Installation
• Running the Application
• System Overview
• Understanding Each Section
  • Dashboard
  • Patient Management
  • Patient Details
  • Video Calls
  • Analytics
• Building for Production

What is This System?

The Medical Dashboard - Telemedicine Platform is a comprehensive web application designed for healthcare providers to manage their practice digitally. It combines patient management, telemedicine capabilities, and analytics in one unified interface.

Key Capabilities

• Digital Patient Records: Centralized patient information management
• Telemedicine Integration: Schedule and manage video consultations
• Practice Analytics: Visual insights into your practice metrics
• Efficient Workflow: Streamlined processes for healthcare providers

Use Cases

• General practitioners managing patient records
• Telemedicine clinics scheduling remote consultations
• Healthcare facilities tracking patient visits and medications
• Medical practices analyzing consultation trends and demographics

Benefits

• Time Efficiency: Quick access to patient information and history
• Better Organization: All patient data in one place
• Data-Driven Decisions: Analytics help understand practice patterns
• Remote Care: Enable telemedicine consultations
• Scalability: Handle multiple patients and appointments efficiently

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18+ - Download here
• npm - Comes with Node.js
• A modern web browser (Chrome, Firefox, Edge, Safari)

Installation

1. Clone the repository or navigate to the project directory

2. Install dependencies:

npm install

This will install all required packages including React, TypeScript, Tailwind CSS, and other dependencies.

Running the Application

The application requires two servers to run simultaneously:

Terminal 1: Start JSON Server (Mock API)

npm run json-server

This starts the mock API server on http://localhost:3001. This server provides all the data for patients, consultations, medications, and appointments.

Keep this terminal open while using the application.

Terminal 2: Start Development Server

npm run dev

This starts the Vite development server. The application will be available at http://localhost:5173 (or the next available port).

Open your browser and navigate to the provided URL to access the application.

System Overview

The Medical Dashboard is organized into five main sections, each accessible from the sidebar navigation:

1. Dashboard - Overview of your practice at a glance
2. Patients - Manage and view patient records
3. Video Calls - Schedule and manage telemedicine consultations
4. Analytics - Detailed insights and visualizations
5. Getting Started - This documentation

Each section is designed to work independently while sharing common patient data through the API.

Understanding Each Section

Dashboard

Purpose: Provides a quick overview of your practice with key metrics and trends.

What You'll See:

• Stats Cards: Four key metrics at the top

  • Total Patients: Complete count of all registered patients
  • Active Patients: Patients currently under care
  • This Week Consultations: Number of consultations in the current week
  • Upcoming Appointments: Scheduled appointments in the near future

• Consultations Chart: A line graph showing consultation trends over the past 8 weeks. This helps you identify patterns in patient visits.

• Patient Distribution: Two charts showing:

  • Patients by Status (Pie Chart): Visual breakdown of Active, Inactive, and Pending patients
  • Patients by Age Group (Bar Chart): Demographic distribution across age ranges

How to Use:

• Simply navigate to the Dashboard to see an instant overview
• The data updates automatically from the API
• Hover over chart elements for detailed information

Patient Management

Purpose: Browse, search, and filter through your patient database.

Features:

1. Search Bar: Type a patient's name or email to quickly find them
2. Status Filter: Filter by:
   • All Status (shows everyone)
   • Active (currently under care)
   • Inactive (not currently active)
   • Pending (awaiting initial consultation)
3. Sort Options:
   • By Name (alphabetical)
   • By Age (oldest to youngest)
   • Most Recent (newest patients first)

Patient Table Columns:

• Patient: Name, gender, and profile picture
• Contact: Email and phone number
• Age: Patient's age in years
• Status: Current status badge (color-coded)
• Actions: "View Details" link to see full patient information

Pagination:

• Shows 10 patients per page by default
• Use "Previous" and "Next" buttons to navigate
• Display shows current range (e.g., "Showing 1 to 10 of 25 patients")

How to Use:

1. Use the search bar to find specific patients quickly
2. Apply filters to narrow down the list
3. Click "View Details" on any patient to see their complete profile

Patient Details

Purpose: Comprehensive view of an individual patient's complete medical information.

Patient Header:

• Profile picture and basic demographics (name, age, gender)
• Status badge
• Quick action buttons: "Video Call" and "Schedule"

Information Cards:

• Email: Patient's email address
• Phone: Contact number
• Blood Type: Medical information
• Address: Patient's location
• Allergies: Highlighted in yellow badges (if any)

Next Appointment Card (if available):

• Shows the upcoming scheduled appointment
• Displays date, time, type, and notes
• Prominently displayed at the top for quick reference

Information Tabs:

1. Consultations Tab:

   • Complete history of all consultations
   • Each entry shows:
     • Consultation type (Follow-up, Routine, Urgent, etc.)
     • Date and duration
     • Diagnosis
     • Doctor's notes
   • Organized chronologically (newest first)

2. Medications Tab:

   • Current and past medications
   • Shows:
     • Medication name
     • Dosage and frequency
     • Start and end dates
     • Status (Active or Completed)
   • Active medications are highlighted in green

3. Appointments Tab:

   • All scheduled, completed, and cancelled appointments
   • Information includes:
     • Appointment type
     • Date and time
     • Status (color-coded)
     • Additional notes
   • Helps track future visits and history

How to Use:

1. Navigate from the Patient List by clicking "View Details"
2. Review the patient header for quick information
3. Check the "Next Appointment" card for upcoming visits
4. Switch between tabs to explore different aspects of patient care
5. Use action buttons to schedule appointments or initiate video calls

Video Calls

Purpose: Manage telemedicine video consultations with your patients.

Quick Action Cards:

• Start New Call: Immediately initiate a video consultation
• Scheduled Calls: Shows count of upcoming video appointments
• Call History: Number of completed video consultations

Upcoming Calls List:

• Displays scheduled video call appointments
• Each entry shows:
  • Appointment ID and type
  • Date and time
  • Additional notes
• Three action buttons per call:
  • Copy Link: Copy the video call URL to clipboard
  • Send Link: Send the link to the patient (via email/SMS in production)
  • Start Call: Open the video call interface

Call Link Generation:

• Each appointment gets a unique, secure link
• Links can be copied and shared with patients
• Format: https://telemed.example.com/call/{appointmentId}?token={securityToken}

Video Call Interface (Placeholder):

• When you click "Start Call", a modal opens
• Shows a placeholder video interface
• Includes "End Call" and "Cancel" buttons
• Note: This is UI-only. In a production environment, this would integrate with WebRTC or a video service provider.

How to Use:

1. View all scheduled video calls in the main list
2. Copy links to share with patients manually
3. Use "Send Link" to automatically notify patients (UI demonstration)
4. Click "Start Call" to begin a consultation
5. Monitor call history and upcoming appointments

Analytics

Purpose: Deep dive into practice metrics and trends for data-driven decision making.

Stats Overview: Same as Dashboard - key metrics at a glance:

• Total Patients
• Active Patients
• This Week Consultations
• Upcoming Appointments

Consultations Per Week Chart:

• Line chart showing consultation volume over time
• Helps identify:
  • Busy periods
  • Seasonal trends
  • Growth patterns
• Interactive: Hover over data points for exact numbers

Patient Distribution Visualizations:

1. Patients by Status (Pie Chart):

   • Visual breakdown of patient statuses
   • Percentages shown on each segment
   • Helps understand patient base composition
   • Colors: Active (green), Inactive (gray), Pending (yellow)

2. Patients by Age Group (Bar Chart):

   • Demographic distribution across age ranges:
     • 18-29 years
     • 30-39 years
     • 40-49 years
     • 50-59 years
     • 60+ years
   • Useful for understanding patient demographics
   • Helps with resource planning and service offerings

How to Use:

1. Navigate to Analytics for detailed insights
2. Review stats cards for quick metrics
3. Analyze consultation trends in the line chart
4. Study patient distributions to understand your practice demographics
5. Use insights to:
   • Plan staffing needs
   • Identify busy periods
   • Understand patient base composition
   • Make data-driven decisions

Building for Production

When you're ready to deploy:

npm run build

This creates an optimized production build in the dist directory.

Next Steps:

• The dist folder contains all static files
• Deploy to any static hosting service (Vercel, Netlify, GitHub Pages, etc.)
• Update API endpoints to point to your production backend
• Configure environment variables for production settings

Project Structure

src/
├── components/
│   ├── layout/          # Layout components (Sidebar, Header, Layout)
│   ├── patients/        # Patient-related components
│   ├── video/           # Video calls components
│   └── analytics/       # Analytics charts and cards
├── pages/               # Page components
├── hooks/               # React Query hooks
├── services/            # API service layer
├── types/               # TypeScript type definitions
├── App.tsx              # Main app component with routing
└── main.tsx             # Application entry point

API Structure

The application uses JSON Server for mock data. The API endpoints are:

• GET /api/patients - Get all patients
• GET /api/patients/:id - Get patient by ID
• GET /api/consultations - Get all consultations
• GET /api/consultations?patientId=:id - Get consultations for a patient
• GET /api/medications - Get all medications
• GET /api/appointments - Get all appointments
• GET /api/analytics - Get analytics data

Features Overview

Patient List

• Searchable and filterable patient table
• Status filters (Active, Inactive, Pending)
• Sortable columns
• Pagination support

Patient Detail

• Complete patient information
• Consultation history
• Medication list
• Upcoming appointments
• Quick actions (Schedule, Video Call, etc.)

Video Calls

• View scheduled calls
• Generate and copy call links
• Send links to patients (UI only)
• Start call interface (placeholder)

Analytics

• Total and active patient counts
• Weekly consultation trends
• Patient distribution by status and age groups
• Interactive charts using Recharts

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run json-server - Start mock API server
• npm run lint - Run ESLint

Notes

• The video calls feature is UI-only (no actual WebRTC implementation)
• All data is mocked via JSON Server
• The application is fully responsive and works on mobile devices
• TypeScript is used throughout for type safety

License

This project is for demonstration purposes.