Doctor Patient MultiView Calendar Appointment Management System – NextJS Web Application (Admin Control Panel Permission Dashboard)

---

Project Summary

Doctor Patient Calendar Appointment Management System is a modern, full-featured calendar and appointment management web application built with Next.js, React, Supabase, and Tailwind CSS. Designed for healthcare, clinics, or any organization needing robust scheduling, filtering, and client management, it features multiple calendar views, instant search, advanced filtering, and a clean, responsive UI. The project is extensible, type-safe, and ready for production or learning purposes.

• Live-Demo: https://doctor-patient-calendar-appointment.vercel.app/

---

Table of Contents

• Project Summary
• Features
• Tech Stack
• Project Structure
• Component Overview
• API & Routing
• Database Schema & Relationships
• Environment Variables
• Getting Started
• Usage Guide
• Application Walkthrough
• Customization & Extensibility
• Examples & Reusability
• Keywords
• Conclusion
• Happy Coding!

---

Features

• Multiple calendar views: List, Week, Month
• Instant search & advanced filtering
• Appointment management: create, edit, delete, notes, attachments, activities, assignees
• Invitation system: send, accept, discard (sender/receiver logic)
• User & permission management: session-based, robust access control
• Client/patient management: patients, relatives, filtering
• Supabase integration: authentication, data storage, real-time updates
• Accessibility: Radix UI primitives
• TypeScript: fully typed
• API documentation: status/docs pages, OpenAPI, example requests
• Responsive UI: Tailwind CSS, shadcn/ui

---

Tech Stack

• Framework: Next.js (App Router, React 19)
• UI: Tailwind CSS, shadcn/ui, Radix UI, React Icons
• Database: Supabase (PostgreSQL, Storage, Auth)
• State Management: React Context API
• Date Handling: date-fns
• Type Safety: TypeScript
• Other: ESLint, Prettier, Vercel

---

Project Structure

vocare-calender/
├── public/                # Static assets (SVGs, icons, redoc.html)
├── src/
│   ├── app/               # Next.js app directory (routing, layout, entry)
│   │   ├── page.tsx       # Main page with calendar view switcher
│   │   └── api/           # API routes (appointments, dashboard, invitations, permissions, openapi)
│   ├── components/
│   │   ├── calendar/      # Calendar UI components (List, Week, Month, Filters, Dialogs, etc.)
│   │   ├── control-panel/ # Access permissions, invitation list
│   │   ├── login/         # Login UI
│   │   ├── logout/        # Logout UI
│   │   ├── navbar/        # Navigation bar
│   │   ├── register/      # Registration UI
│   │   └── ui/            # Reusable UI primitives (button, input, label, etc.)
│   ├── context/           # React Contexts (DateContext, AppointmentColorContext)
│   ├── lib/               # Utility libraries (Supabase client, helpers)
│   ├── styles/            # Global styles (Tailwind)
│   └── types/             # TypeScript types (invitation, appointment, etc.)
├── package.json           # Project dependencies and scripts
├── tailwind.config.ts     # Tailwind CSS configuration
├── next.config.ts         # Next.js configuration
├── tsconfig.json          # TypeScript configuration
└── README.md              # Project documentation

---

Component Overview

• Calendar Components: MonthView, WeekView, AppointmentList, AppointmentDialog, Filters, SearchBar
• Control Panel Components: AppointmentAccessPermission, UserAccessPermission, InvitationList
• UI Primitives: button.tsx, input.tsx, label.tsx, select.tsx, dialog.tsx, hover-card.tsx, textarea.tsx
• Auth Components: Login.tsx, Logout.tsx, Register.tsx, AuthGuard.tsx
• Context Providers: DateContext, AppointmentColorContext
• Lib Utilities: supabaseClient.ts, supabaseAdmin.ts, email.ts, permissions.ts, utils.ts

---

API & Routing

• RESTful Endpoints:

• /api/appointments (GET, POST, PUT, PATCH, DELETE, SEARCH)

• /api/appointments/[id]/permissions (GET, DELETE)

• /api/dashboard/[id]/permissions (GET, DELETE)

• /api/invitations (GET, POST)

• /api/invitations/accept (POST)

• /api/users/search (GET)

• /api/openapi (GET OpenAPI JSON)

• /api-docs (API documentation page)

• /redoc.html (Full interactive API docs)

• App Routes: /, /login, /logout, /register, /control-panel, /api-status, /api-docs, etc.

---

Database Schema & Relationships

Key tables: appointments, appointment_assignee, patients, relatives, categories, activities. Attachments are stored in Supabase Storage bucket attachments.

---

Environment Variables

Create a .env.local file in the project root with:

# For Local Development/Production
NEXT_PUBLIC_BASE_URL=http://localhost:3000 or NEXT_PUBLIC_BASE_URL=your-url

# Email Configuration for SMTP Authentication
EMAIL_USER=your-email
EMAIL_PASS=your-passowrd/generated-passcode

# Supabase configuration
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key (private key)

---

Getting Started

1. Install dependencies:

  npm install
  # or
  yarn install

2. Set up environment variables: See Environment Variables.

3. Run the development server:

  npm run dev
  # or
  yarn dev

4. Open the app: Visit http://localhost:3000 in your browser.

---

Usage Guide

• Switch views: List, Week, Month
• Search appointments by any field
• Filter by category, client, date, status
• Create/edit appointments via dialog
• Discard invitations in control panel
• Responsive design for mobile/desktop
• Clear message if no results

---

Application Walkthrough

• Home Page (/): Calendar with view switcher
• List View: Appointments grouped by date, search/filter controls
• Week/Month View: Calendar grid, click to view/add appointments
• Appointment Dialog: Create/edit appointments (title, notes, location, category, patient, status, attachments, activities, assignees)
• Control Panel: Manage invitations and permissions
• API Docs: /api-docs and /redoc.html

---

Customization & Extensibility

• Add fields: extend types in src/types/types.ts, update forms/components
• Add filters: update Filters.tsx, AppointmentList.tsx
• Change theme: edit tailwind.config.ts, global styles
• Switch database: update lib/supabaseClient.ts
• Extend API: add endpoints in src/app/api/

---

Examples & Reusability

Reusing AppointmentList Component

import AppointmentList from '@/components/calendar/AppointmentList';

export default function MyCustomPage() {
	// Fetch or filter appointments as needed
	return <AppointmentList appointments={myAppointments} />;
}

Using Supabase Client

import { supabase } from '@/lib/supabaseClient';

const { data, error } = await supabase.from('appointments').select('*');

API Request Example

fetch('/api/appointments')
	.then(res => res.json())
	.then(data => console.log(data.appointments));

---

Keywords

Next.js, Calendar, Appointment, Scheduling, Supabase, React, Tailwind CSS, shadcn/ui, Healthcare, TypeScript, Fullstack, CRUD, Responsive, Filtering, Search, Radix UI, Modern UI, Vercel, Invitation, Permission, RESTful API, OpenAPI, Accessibility, Arnob Mahmud

---

Conclusion

Doctor Patient Calendar Appointment Management System is a robust, extensible, and modern calendar/appointment management solution. It’s ideal for healthcare, clinics, and service businesses needing advanced scheduling, filtering, and client management. Built with the latest web technologies, it’s easy to run, customize, and deploy.

---

Happy Coding! 🎉

Feel free to use this project repository and extend this project further!

If you have any questions or want to share your work, reach out via GitHub or my portfolio at https://arnob-mahmud.vercel.app/.

Enjoy building and learning! 🚀

Thank you! 😊

---