Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Appointments - MediScribe</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: '#2563eb', | |
| 'primary-hover': '#eff6ff', | |
| border: '#e5e7eb', | |
| background: '#f8fafc', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-thumb { | |
| background: #d1d5db; | |
| border-radius: 3px; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-thumb:hover { | |
| background: #9ca3af; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .group:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-background text-gray-800"> | |
| <!-- Sticky Header --> | |
| <header class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-border z-50 flex items-center justify-between px-4"> | |
| <!-- Left: Logo --> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center"> | |
| <i data-lucide="activity" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="font-semibold text-lg text-gray-900 hidden sm:block">MediScribe</span> | |
| </div> | |
| <!-- Center: Search --> | |
| <div class="flex-1 max-w-xl mx-4"> | |
| <div class="relative"> | |
| <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i> | |
| <input type="text" placeholder="Search patients, appointments, notes..." | |
| class="w-full h-10 pl-10 pr-4 bg-gray-50 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"> | |
| </div> | |
| </div> | |
| <!-- Right: Actions --> | |
| <div class="flex items-center gap-2"> | |
| <button class="w-10 h-10 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors relative"> | |
| <i data-lucide="bell" class="w-5 h-5 text-gray-600"></i> | |
| <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors relative"> | |
| <i data-lucide="message-square" class="w-5 h-5 text-gray-600"></i> | |
| <span class="absolute top-2 right-2 w-2 h-2 bg-primary rounded-full"></span> | |
| </button> | |
| <button class="w-10 h-10 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors"> | |
| <i data-lucide="help-circle" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| <div class="relative ml-2"> | |
| <button id="userMenuBtn" class="flex items-center gap-2 p-1 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <img src="https://static.photos/people/200x200/42" alt="Dr. Smith" class="w-8 h-8 rounded-full object-cover"> | |
| <i data-lucide="chevron-down" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| <div id="userMenu" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-lg border border-border py-2"> | |
| <a href="#" class="flex items-center gap-3 px-4 py-2 hover:bg-primary-hover text-sm"> | |
| <i data-lucide="user" class="w-4 h-4"></i> Profile | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-4 py-2 hover:bg-primary-hover text-sm"> | |
| <i data-lucide="settings" class="w-4 h-4"></i> Settings | |
| </a> | |
| <div class="border-t border-border my-2"></div> | |
| <a href="#" class="flex items-center gap-3 px-4 py-2 hover:bg-primary-hover text-sm text-red-600"> | |
| <i data-lucide="log-out" class="w-4 h-4"></i> Sign out | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex pt-16 min-h-screen"> | |
| <!-- Primary Icon Sidebar --> | |
| <aside class="fixed left-0 top-16 bottom-0 w-[72px] bg-white border-r border-border z-40 flex flex-col"> | |
| <nav class="flex-1 py-4 space-y-1 overflow-y-auto scrollbar-thin"> | |
| <!-- Dashboard --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="layout-dashboard" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Dashboard</span> | |
| </a> | |
| <!-- Patients --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="users" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Patients</span> | |
| </a> | |
| <!-- Appointments --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="calendar" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Appointments</span> | |
| </a> | |
| <!-- Encounters --> | |
| <a href="index.html" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="stethoscope" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Encounters</span> | |
| </a> | |
| <!-- Forms --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="file-text" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Forms</span> | |
| </a> | |
| <!-- Communication --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="message-circle" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Communication</span> | |
| </a> | |
| <!-- Tasks --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="check-square" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Tasks</span> | |
| </a> | |
| <!-- Documents --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="folder" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Documents</span> | |
| </a> | |
| <!-- Billing --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="credit-card" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Billing</span> | |
| </a> | |
| <!-- Reports --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="bar-chart-2" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Reports</span> | |
| </a> | |
| <!-- Staff --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="user-plus" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Staff</span> | |
| </a> | |
| <!-- Integrations --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="plug" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Integrations</span> | |
| </a> | |
| <!-- Settings --> | |
| <a href="#" class="group relative flex items-center justify-center h-12 mx-2 rounded-lg hover:bg-primary-hover transition-colors mt-auto"> | |
| <i data-lucide="settings" class="w-5 h-5 text-gray-500 group-hover:text-primary"></i> | |
| <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap z-50">Settings</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| <!-- Secondary Patient Sidebar --> | |
| <aside id="patientSidebar" class="fixed left-[72px] top-16 bottom-0 w-[260px] bg-white border-r border-border z-30 overflow-y-auto scrollbar-thin hidden lg:block"> | |
| <div class="p-4"> | |
| <!-- Patient Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Patient</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="user" class="w-4 h-4"></i> Overview | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="id-card" class="w-4 h-4"></i> Profile | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="phone" class="w-4 h-4"></i> Contact | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="shield" class="w-4 h-4"></i> Insurance | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Care Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Care</h3> | |
| <nav class="space-y-1"> | |
| <a href="appointments.html" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary text-white"> | |
| <i data-lucide="calendar-check" class="w-4 h-4"></i> Appointments | |
| </a> | |
| <a href="index.html" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="stethoscope" class="w-4 h-4"></i> Encounters | |
| </a> | |
| <a href="notes.html" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="file-text" class="w-4 h-4"></i> Notes | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="check-circle" class="w-4 h-4"></i> Tasks | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="activity" class="w-4 h-4"></i> Activity | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Documents Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Documents</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="folder-open" class="w-4 h-4"></i> Files | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="clipboard-list" class="w-4 h-4"></i> Forms | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Billing Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Billing</h3> | |
| <nav class="space-y-1"> | |
| <a href="invoices.html" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="receipt" class="w-4 h-4"></i> Invoices | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Communication Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Communication</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> Email | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <i data-lucide="message-square" class="w-4 h-4"></i> Messages | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobileMenuBtn" class="lg:hidden fixed bottom-4 right-4 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center z-50"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| <!-- Main Content --> | |
| <main class="flex-1 lg:ml-[332px] ml-[72px] p-6"> | |
| <div class="max-w-[1280px] mx-auto"> | |
| <!-- Patient Header --> | |
| <div class="bg-white rounded-xl border border-border p-4 mb-6"> | |
| <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> | |
| <div class="flex items-center gap-4"> | |
| <img src="https://static.photos/people/200x200/88" alt="Sarah Johnson" class="w-16 h-16 rounded-full object-cover"> | |
| <div> | |
| <h1 class="text-xl font-semibold text-gray-900">Sarah Johnson</h1> | |
| <p class="text-sm text-gray-500">PT-2024-001</p> | |
| <div class="flex gap-2 mt-2"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full">Active Patient</span> | |
| <span class="px-2 py-1 bg-blue-50 text-primary text-xs font-medium rounded-full">Insurance Verified</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="px-4 py-2 border border-border rounded-lg text-sm font-medium text-gray-700 hover:bg-primary-hover transition-colors"> | |
| Contact | |
| </button> | |
| <button class="px-4 py-2 border border-border rounded-lg text-sm font-medium text-gray-700 hover:bg-primary-hover transition-colors"> | |
| Files | |
| </button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors flex items-center gap-2"> | |
| Actions <i data-lucide="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Page Header --> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-900">Appointments</h2> | |
| <p class="text-gray-500">Schedule and manage patient appointments</p> | |
| </div> | |
| <!-- Upcoming Appointment Card --> | |
| <div class="bg-white rounded-xl border border-border p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-900">Next Appointment</h3> | |
| <span class="px-3 py-1 bg-green-50 text-green-700 text-sm font-medium rounded-full">Confirmed</span> | |
| </div> | |
| <div class="flex flex-col md:flex-row md:items-center gap-6"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-xl flex flex-col items-center justify-center"> | |
| <span class="text-xs font-semibold text-primary uppercase">APR</span> | |
| <span class="text-2xl font-bold text-primary">03</span> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-900">Follow-up Consultation</p> | |
| <p class="text-sm text-gray-500">Thursday, 10:00 AM - 10:30 AM</p> | |
| <p class="text-sm text-gray-500">Dr. Mary Smith • Room 204</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 md:ml-auto"> | |
| <button class="px-4 py-2 border border-border rounded-lg text-sm font-medium text-gray-700 hover:bg-primary-hover transition-colors"> | |
| Reschedule | |
| </button> | |
| <button class="px-4 py-2 border border-red-200 text-red-600 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appointment Calendar --> | |
| <div class="bg-white rounded-xl border border-border p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-semibold text-gray-900">March 2026</h3> | |
| <div class="flex gap-2"> | |
| <button class="w-8 h-8 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors"> | |
| <i data-lucide="chevron-left" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-lg hover:bg-primary-hover flex items-center justify-center transition-colors"> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-2 mb-4"> | |
| <div class="text-center text-xs font-medium text-gray-400 uppercase py-2">Sun</div> | |
| <div class="text-center text-xs font-medium text-gray-400 uppercase py-2">Mon</div> | |
| <div class="text-center text-xs font-medium text-gray-400 uppercase py-2">Tue</div> | |
| <div class="text-center text-xs font-medium text-gray-400 uppercase py-2">Wed</div> | |
| <div class="text-center text-xs font-medium text-gray-400 uppercase py-2">Thu</div> | |
| <div class="text-center text-xs font-medium text-gray-400 uppercase py-2">Fri</div> | |
| <div class="text-center text-xs font-medium text-gray-400 uppercase py-2">Sat</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-2"> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">23</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">24</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">25</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">26</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">27</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">28</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">1</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">2</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">3</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">4</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">5</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">6</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">7</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">8</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">9</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">10</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">11</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">12</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">13</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">14</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">15</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">16</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">17</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">18</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">19</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-900 font-medium bg-primary/5 border-primary">20</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">21</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">22</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">23</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">24</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">25</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">26</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">27</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">28</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">29</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">30</div> | |
| <div class="aspect-square rounded-lg border border-border p-2 text-sm text-gray-400">31</div> | |
| </div> | |
| </div> | |
| <!-- Appointment History --> | |
| <div class="bg-white rounded-xl border border-border overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-border flex items-center justify-between"> | |
| <h3 class="font-semibold text-gray-900">Appointment History</h3> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors flex items-center gap-2"> | |
| <i data-lucide="plus" class="w-4 h-4"></i> | |
| New Appointment | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Date & Time</th> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Provider</th> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-border"> | |
| <tr class="hover:bg-primary-hover transition-colors"> | |
| <td class="px-6 py-4"> | |
| <p class="text-sm font-medium text-gray-900">Mar 20, 2026</p> | |
| <p class="text-xs text-gray-500">10:00 AM - 10:30 AM</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Dr. Mary Smith</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">Consultation</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Completed</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View Notes</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-primary-hover transition-colors"> | |
| <td class="px-6 py-4"> | |
| <p class="text-sm font-medium text-gray-900">Mar 10, 2026</p> | |
| <p class="text-xs text-gray-500">2:00 PM - 2:30 PM</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Dr. Mary Smith</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">Follow-up</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Completed</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View Notes</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-primary-hover transition-colors"> | |
| <td class="px-6 py-4"> | |
| <p class="text-sm font-medium text-gray-900">Feb 20, 2026</p> | |
| <p class="text-xs text-gray-500">9:00 AM - 9:45 AM</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Dr. Mary Smith</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Initial Consultation</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Completed</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View Notes</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-primary-hover transition-colors"> | |
| <td class="px-6 py-4"> | |
| <p class="text-sm font-medium text-gray-900">Jan 15, 2026</p> | |
| <p class="text-xs text-gray-500">11:30 AM - 12:00 PM</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Dr. James Wilson</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-red-50 text-red-700 text-xs rounded-full">Urgent Care</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Completed</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View Notes</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // User menu toggle | |
| const userMenuBtn = document.getElementById('userMenuBtn'); | |
| const userMenu = document.getElementById('userMenu'); | |
| userMenuBtn.addEventListener('click', () => { | |
| userMenu.classList.toggle('hidden'); | |
| }); | |
| document.addEventListener('click', (e) => { | |
| if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) { | |
| userMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const patientSidebar = document.getElementById('patientSidebar'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| patientSidebar.classList.toggle('hidden'); | |
| patientSidebar.classList.toggle('fixed'); | |
| patientSidebar.classList.toggle('inset-0'); | |
| patientSidebar.classList.toggle('z-50'); | |
| patientSidebar.classList.toggle('w-full'); | |
| patientSidebar.classList.toggle('lg:w-[260px]'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |