Clinic Dashboard - Healthcare Analytics Platform

A professional, feature-rich clinic management and analytics dashboard built with Next.js, Material-UI, and D3.js. This application provides comprehensive insights into clinic operations, patient management, appointments, and revenue analytics.

Features

Data Visualizations

• Patient Statistics Chart: Interactive line chart showing patient admission trends over 30 days
• Revenue Analytics: Bar chart displaying revenue breakdown by department
• Department Distribution: Pie chart showing patient distribution across departments
• Appointments Trend: Area chart tracking appointment patterns over time

Key Metrics Dashboard

• Total Patients & Active Patients tracking
• Critical Cases monitoring
• Today's Appointments overview
• Monthly Revenue analytics
• Bed Occupancy rates
• Patient Satisfaction scores
• Average Wait Time metrics

Department Performance

• Comprehensive department performance table
• Patient count per department
• Revenue tracking by department
• Appointment statistics
• Satisfaction ratings
• Occupancy utilization rates

Technology Stack

• Framework: Next.js 14 with TypeScript
• UI Library: Material-UI (MUI) v5
• Data Visualization: D3.js v7
• Testing: Jest + React Testing Library
• Styling: Emotion (CSS-in-JS)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd clinic-dashboard

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Available Scripts

• npm run dev - Start development server
• npm run build - Build production application
• npm start - Start production server
• npm run lint - Run ESLint
• npm test - Run test suite
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Generate test coverage report

Project Structure

clinic-dashboard/
├── src/
│   ├── app/                 # Next.js app directory
│   │   ├── layout.tsx      # Root layout with MUI theme
│   │   ├── page.tsx        # Main dashboard page
│   │   └── theme.ts        # MUI theme configuration
│   ├── components/         # React components
│   │   ├── MetricCard.tsx
│   │   ├── PatientStatsChart.tsx
│   │   ├── RevenueChart.tsx
│   │   ├── DepartmentPieChart.tsx
│   │   ├── AppointmentsTrendChart.tsx
│   │   └── DepartmentTable.tsx
│   ├── data/               # Mock data
│   │   └── mockData.ts
│   ├── types/              # TypeScript type definitions
│   │   └── index.ts
│   ├── utils/              # Utility functions
│   │   ├── formatters.ts
│   │   └── calculations.ts
│   └── __tests__/          # Test files
├── package.json
├── tsconfig.json
├── jest.config.js
└── README.md

Component Documentation

MetricCard

Displays key performance indicators with optional trend indicators and icons.

Props:

• title: Card title
• value: Main metric value (string or number)
• subtitle: Optional subtitle
• trend: Trend direction ('up' | 'down' | 'stable')
• trendValue: Trend percentage/value
• icon: Optional icon component
• color: Custom color for icon background

PatientStatsChart

D3.js line chart showing patient admission trends over time.

Props:

• data: Array of DailyStats
• title: Chart title

RevenueChart

D3.js bar chart displaying revenue by department.

Props:

• data: Array of Revenue records
• title: Chart title

DepartmentPieChart

D3.js donut chart showing patient distribution across departments.

Props:

• data: Array of DepartmentStats
• title: Chart title

AppointmentsTrendChart

D3.js area chart tracking appointment trends.

Props:

• data: Array of DailyStats
• title: Chart title

DepartmentTable

Data table showing comprehensive department performance metrics.

Props:

• data: Array of DepartmentStats
• title: Table title

Utility Functions

Formatters (utils/formatters.ts)

• formatCurrency(amount) - Format numbers as USD currency
• formatDate(dateString) - Format ISO dates to readable format
• formatPercentage(value, decimals) - Format percentage values
• abbreviateNumber(num) - Abbreviate large numbers (K, M)
• calculatePercentageChange(current, previous) - Calculate percentage change
• getStatusColor(status) - Get color code for status
• truncateText(text, maxLength) - Truncate text with ellipsis

Calculations (utils/calculations.ts)

• calculateTotalRevenue(revenues) - Sum total revenue
• calculateAverage(values) - Calculate average of numbers
• groupRevenueByDepartment(revenues) - Group revenue by department
• calculateGrowthRate(current, previous) - Calculate growth rate
• filterByDateRange(data, start, end) - Filter data by date range
• calculateCompletionRate(appointments) - Calculate appointment completion rate
• getTrendDirection(current, previous) - Get trend direction
• calculatePatientDistribution(patients) - Calculate patient distribution by status

Testing

The project includes comprehensive test coverage for all utility functions and components.

Run tests:

npm test

Generate coverage report:

npm run test:coverage

Test Coverage

• ✅ All utility functions (formatters and calculations)
• ✅ All dashboard components
• ✅ Data visualization components
• ✅ Metric cards and tables

Mock Data

The application uses comprehensive simulated datasets including:

• Patient records (10 sample patients)
• Appointments (8 sample appointments)
• Revenue data (30 days)
• Department statistics (6 departments)
• Daily statistics (30 days)
• Dashboard metrics

Customization

Theme

Customize the MUI theme in src/app/theme.ts:

• Colors (primary, secondary, success, error, etc.)
• Typography
• Spacing
• Shadows
• Component overrides

Data

Replace mock data in src/data/mockData.ts with real API calls or database queries.

Performance Optimizations

• Server-side rendering with Next.js
• Component-level code splitting
• Optimized D3.js visualizations
• Efficient re-rendering with React hooks
• Memoized calculations

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is licensed under the MIT License.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Support

For issues and questions, please open an issue on the GitHub repository.