MedSync - Clinic Appointment & Treatment Management System

A comprehensive clinic management system built with React, Vite, and Tailwind CSS featuring a brutalist design aesthetic.

Features

Core Modules

• Dashboard - Real-time statistics, quick actions, and upcoming appointments
• Appointments - Schedule, manage, and track patient appointments
• Patients - Complete patient registry with medical history
• Treatments - Treatment catalogue with pricing and categories
• Billing - Invoice generation, payment processing, and outstanding balances
• Insurance - Insurance claims management and tracking
• Reports - Customizable analytics and reporting
• Administration - Branch management, staff management, and system settings

User Roles

The system supports 5 different user roles with custom navigation:

• Front Desk Staff - Patient registration, appointments, billing
• Doctor - Schedule, patient records, treatments
• Billing Staff - Billing, insurance claims, reports
• Branch Manager - Full system access including administration
• Patient - View appointments and bills

Key Features

• ✅ Role-based access control
• ✅ Multi-step appointment booking wizard
• ✅ Patient registration with insurance details
• ✅ Walk-in registration for immediate appointments
• ✅ Invoice generation with insurance coverage calculation
• ✅ Payment recording and tracking
• ✅ Insurance claim submission and management
• ✅ Customizable report generation
• ✅ Branch and staff management
• ✅ Brutalist design with bold borders and hover effects

Tech Stack

• React 19.1.1 - UI framework
• Vite 7.1.7 - Build tool and dev server
• Tailwind CSS 3.4.18 - Utility-first CSS framework
• DaisyUI 5.1.30 - Tailwind CSS component library
• PostCSS 8.5.6 - CSS processing

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn package manager

Installation

1. Clone the repository

   cd /run/media/kalana/Files1/medsync-react

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser

   http://localhost:5173
   

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint to check code quality

Project Structure

medsync-react/
├── src/
│   ├── components/
│   │   ├── Login.jsx                    # Login screen with role selection
│   │   ├── Dashboard.jsx                # Main dashboard
│   │   ├── Sidebar.jsx                  # Navigation sidebar
│   │   ├── StatsGrid.jsx                # Statistics cards
│   │   ├── QuickActions.jsx             # Quick action cards
│   │   ├── UpcomingAppointments.jsx     # Appointment table
│   │   ├── Appointments.jsx             # Appointments management
│   │   ├── BookAppointmentModal.jsx     # Book appointment wizard
│   │   ├── Patients.jsx                 # Patient registry
│   │   ├── RegisterPatientModal.jsx     # Patient registration form
│   │   ├── Treatments.jsx               # Treatment catalogue
│   │   ├── AddTreatmentModal.jsx        # Add treatment form
│   │   ├── Billing.jsx                  # Billing and invoices
│   │   ├── InvoiceModal.jsx             # Invoice display
│   │   ├── RecordPaymentModal.jsx       # Payment recording
│   │   ├── Insurance.jsx                # Insurance claims
│   │   ├── SubmitClaimModal.jsx         # Submit claim form
│   │   ├── Reports.jsx                  # Reports and analytics
│   │   ├── ReportModal.jsx              # Report generation
│   │   ├── Administration.jsx           # Admin panel
│   │   └── WalkInModal.jsx              # Walk-in registration
│   ├── App.jsx                          # Main app component
│   ├── main.jsx                         # App entry point
│   └── index.css                        # Global styles
├── public/                               # Static assets
├── tailwind.config.js                   # Tailwind configuration
├── postcss.config.js                    # PostCSS configuration
├── vite.config.js                       # Vite configuration
├── package.json                         # Dependencies
└── README.md                            # This file

Usage Guide

Login

1. Open the application
2. Select a user role from the dropdown (default: Front Desk Staff)
3. Enter username: demo
4. Enter password: demo
5. Click "Login"

Dashboard Quick Actions

• Register Patient - Opens patient registration form
• Book Appointment - Opens appointment booking wizard
• Walk-In Registration - Quick registration for walk-in patients

Role-Based Navigation

Front Desk Staff:

• Dashboard, Appointments, Patients, Billing

Doctor:

• Dashboard, My Schedule, Patients, Treatments

Billing Staff:

• Dashboard, Billing, Insurance, Reports

Branch Manager:

• Full access to all modules including Administration

Patient:

• Dashboard, My Appointments, My Bills

Design System

The application follows a brutalist design aesthetic with:

• Bold black borders (2px)
• Uppercase text labels (10px-11px)
• Clean white backgrounds
• Crimson (#DC143C) and Purple (#9333EA) accent colors
• Hover state transitions (background/text color swap)
• Minimalist, functional interface

Development

Adding New Components

1. Create component file in src/components/
2. Import and use in App.jsx or parent component
3. Add route in renderSection() function if needed
4. Update roleNavigations in Sidebar.jsx for navigation

Customizing Roles

Edit the roleNavigations object in src/components/Sidebar.jsx to customize which sections each role can access.

Browser Support

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

License

This project is proprietary software for clinic management purposes.

Support

For issues or questions, please contact the development team.

---

MedSync CATMS - Clinic Appointment & Treatment Management System