Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediCann Clinic Pro - Patient Overview</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></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"> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .group:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .card-hover:hover { | |
| background-color: #eff6ff; | |
| border-color: #2563eb; | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06); | |
| } | |
| @media (max-width: 1024px) { | |
| .secondary-menu { | |
| transform: translateX(-100%); | |
| } | |
| .secondary-menu.open { | |
| transform: translateX(0); | |
| } | |
| } | |
| .timeline-dot::before { | |
| content: ''; | |
| position: absolute; | |
| left: -21px; | |
| top: 8px; | |
| width: 8px; | |
| height: 8px; | |
| background: #2563eb; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#f8fafc] text-gray-700 antialiased"> | |
| <!-- Primary Icon Sidebar --> | |
| <aside class="fixed left-0 top-0 z-40 h-full w-[72px] bg-white border-r border-[#e5e7eb] flex flex-col items-center py-4"> | |
| <div class="mb-8 px-3"> | |
| <div class="w-10 h-10 rounded-xl bg-[#2563eb] flex items-center justify-center shadow-lg shadow-blue-500/30"> | |
| <i data-lucide="leaf" class="w-6 h-6 text-white"></i> | |
| </div> | |
| </div> | |
| <nav class="flex-1 flex flex-col gap-1 w-full px-3"> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="layout-grid" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Dashboard</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center bg-[#eff6ff] text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="users" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Patients</span> | |
| <div class="absolute right-2 top-2 w-1.5 h-1.5 bg-[#2563eb] rounded-full"></div> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="calendar-days" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Appointments</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="file-text" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Forms</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="message-square" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Communication</span> | |
| <div class="absolute right-2 top-2 w-1.5 h-1.5 bg-red-500 rounded-full"></div> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="check-square" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Tasks</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="folder" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Documents</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="credit-card" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Billing</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="bar-chart-3" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Reports</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="users-round" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Staff</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="plug" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Integrations</span> | |
| </button> | |
| </nav> | |
| <div class="mt-auto flex flex-col gap-1 px-3 pb-2"> | |
| <button class="group relative w-12 h-12 rounded-xl flex items-center justify-center text-gray-400 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-all duration-200"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Settings</span> | |
| </button> | |
| <button class="group relative w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-all duration-200"> | |
| <img src="https://static.photos/people/100x100/42" alt="User" class="w-10 h-10 rounded-full object-cover"> | |
| <span class="tooltip absolute left-14 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50">Dr. Profile</span> | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Secondary Patient Menu --> | |
| <aside id="secondaryMenu" class="secondary-menu fixed left-[72px] top-0 z-30 h-full w-[260px] bg-white border-r border-[#e5e7eb] flex flex-col transition-transform duration-300 lg:translate-x-0"> | |
| <div class="p-4 border-b border-[#e5e7eb] flex items-center justify-between lg:hidden"> | |
| <span class="font-semibold text-gray-900">Patient Menu</span> | |
| <button onclick="toggleSecondaryMenu()" class="p-1 hover:bg-gray-100 rounded"> | |
| <i data-lucide="x" class="w-5 h-5 text-gray-500"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto custom-scrollbar py-2"> | |
| <!-- Patient Section --> | |
| <div class="px-4 mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">Patient</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 text-[#2563eb] font-medium text-sm"> | |
| <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-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="contact" class="w-4 h-4"></i> | |
| Contact | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="shield" class="w-4 h-4"></i> | |
| Insurance | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="file-invoice" class="w-4 h-4"></i> | |
| Invoices | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Care Section --> | |
| <div class="px-4 mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">Care</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="calendar-clock" class="w-4 h-4"></i> | |
| Appointments | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="sticky-note" class="w-4 h-4"></i> | |
| Notes | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="list-checks" class="w-4 h-4"></i> | |
| Tasks | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="activity" class="w-4 h-4"></i> | |
| Activity | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Documents Section --> | |
| <div class="px-4 mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">Documents</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="files" class="w-4 h-4"></i> | |
| Files | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="clipboard-list" class="w-4 h-4"></i> | |
| Forms | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Communication Section --> | |
| <div class="px-4 mb-6"> | |
| <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">Communication</h3> | |
| <nav class="space-y-1"> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 hover:bg-[#eff6ff] hover:text-[#2563eb] transition-colors text-sm"> | |
| <i data-lucide="messages-square" class="w-4 h-4"></i> | |
| Messages | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Mobile Overlay --> | |
| <div id="mobileOverlay" onclick="toggleSecondaryMenu()" class="fixed inset-0 bg-black/50 z-20 hidden lg:hidden"></div> | |
| <!-- Main Content --> | |
| <main class="lg:ml-[332px] ml-[72px] min-h-screen flex flex-col"> | |
| <!-- Patient Header --> | |
| <header class="bg-white border-b border-[#e5e7eb] px-6 py-4 sticky top-0 z-10"> | |
| <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4"> | |
| <div class="flex items-start gap-4"> | |
| <button onclick="toggleSecondaryMenu()" class="lg:hidden p-2 hover:bg-gray-100 rounded-lg"> | |
| <i data-lucide="menu" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| <div class="flex items-center gap-4"> | |
| <div class="relative"> | |
| <img src="https://static.photos/people/120x120/133" alt="Sarah Johnson" class="w-14 h-14 rounded-xl object-cover border-2 border-white shadow-md"> | |
| <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-emerald-500 border-2 border-white rounded-full"></div> | |
| </div> | |
| <div> | |
| <div class="flex items-center gap-3 mb-1"> | |
| <h1 class="text-xl font-bold text-gray-900">Sarah Johnson</h1> | |
| <span class="text-sm text-gray-500 font-mono">PT-2024-001</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-xs font-medium border border-emerald-100"> | |
| <i data-lucide="check-circle" class="w-3 h-3"></i> | |
| Active Patient | |
| </span> | |
| <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-blue-50 text-[#2563eb] text-xs font-medium border border-blue-100"> | |
| <i data-lucide="shield-check" class="w-3 h-3"></i> | |
| Certification Approved | |
| </span> | |
| <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-purple-50 text-purple-700 text-xs font-medium border border-purple-100"> | |
| <i data-lucide="shield" class="w-3 h-3"></i> | |
| Insurance Verified | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-[#e5e7eb] bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> | |
| <i data-lucide="phone" class="w-4 h-4"></i> | |
| Contact | |
| </button> | |
| <button class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#2563eb] text-white text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm shadow-blue-500/20"> | |
| <i data-lucide="upload" class="w-4 h-4"></i> | |
| Upload File | |
| </button> | |
| <button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg border border-[#e5e7eb] bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> | |
| Actions | |
| <i data-lucide="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <div class="flex-1 p-6 overflow-y-auto custom-scrollbar"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Title Section --> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-900">Patient Overview</h2> | |
| <p class="text-gray-500 text-sm mt-1">Patient summary and recent activity</p> | |
| </div> | |
| <!-- Dashboard Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"> | |
| <!-- Certification Status (Spans 2 columns on large screens) --> | |
| <div class="md:col-span-2 xl:col-span-2 bg-white rounded-xl border border-[#e5e7eb] p-6 card-hover transition-all duration-200"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2"> | |
| <i data-lucide="badge-check" class="w-5 h-5 text-[#2563eb]"></i> | |
| Certification Status | |
| </h3> | |
| <p class="text-sm text-gray-500 mt-1">Medical Marijuana Certification</p> | |
| </div> | |
| <button class="text-[#2563eb] text-sm font-medium hover:underline">Renew Certification</button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Status</label> | |
| <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-sm font-semibold"> | |
| <div class="w-2 h-2 bg-emerald-500 rounded-full"></div> | |
| Approved | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Issue Date</label> | |
| <p class="text-sm font-medium text-gray-900">March 10, 2026</p> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Expiration Date</label> | |
| <p class="text-sm font-medium text-gray-900">March 10, 2027</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 border border-[#e5e7eb]"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Time Remaining</span> | |
| <span class="text-sm font-bold text-[#2563eb]">23 days</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mb-2"> | |
| <div class="bg-[#2563eb] h-2 rounded-full transition-all duration-500" style="width: 94%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500">Certification expires in 23 days • Priority renewal recommended</p> | |
| </div> | |
| </div> | |
| <!-- Upcoming Appointments --> | |
| <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 card-hover transition-all duration-200"> | |
| <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2 mb-4"> | |
| <i data-lucide="calendar" class="w-5 h-5 text-[#2563eb]"></i> | |
| Upcoming Appointment | |
| </h3> | |
| <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-4"> | |
| <div class="text-2xl font-bold text-[#2563eb] mb-1">March 5</div> | |
| <div class="text-sm text-blue-700 font-medium">2026</div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="user-circle" class="w-4 h-4 text-gray-400"></i> | |
| <span class="text-gray-600">Dr. Mary Smith</span> | |
| </div> | |
| <div class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="clipboard-list" class="w-4 h-4 text-gray-400"></i> | |
| <span class="text-gray-600">Certification Renewal</span> | |
| </div> | |
| <div class="flex items-center gap-3 text-sm"> | |
| <i data-lucide="clock" class="w-4 h-4 text-gray-400"></i> | |
| <span class="text-gray-600">10:30 AM - 45 min</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="flex-1 px-3 py-2 rounded-lg border border-[#e5e7eb] text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"> | |
| View | |
| </button> | |
| <button class="flex-1 px-3 py-2 rounded-lg bg-[#2563eb] text-white text-sm font-medium hover:bg-blue-700 transition-colors"> | |
| Reschedule | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Patient Notes --> | |
| <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 card-hover transition-all duration-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2"> | |
| <i data-lucide="file-text" class="w-5 h-5 text-[#2563eb]"></i> | |
| Recent Notes | |
| </h3> | |
| <button class="text-[#2563eb] text-sm font-medium hover:underline">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-3 bg-amber-50 border border-amber-100 rounded-lg"> | |
| <div class="flex items-start gap-3"> | |
| <i data-lucide="alert-circle" class="w-4 h-4 text-amber-600 mt-0.5"></i> | |
| <div> | |
| <p class="text-sm text-gray-800 font-medium">Follow-up recommended before certification expiration.</p> | |
| <p class="text-xs text-gray-500 mt-1">Dr. Smith • 2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-gray-50 border border-gray-100 rounded-lg"> | |
| <div class="flex items-start gap-3"> | |
| <i data-lucide="info" class="w-4 h-4 text-gray-400 mt-0.5"></i> | |
| <div> | |
| <p class="text-sm text-gray-700">Patient reported improvement in symptoms. Dosage may need adjustment.</p> | |
| <p class="text-xs text-gray-500 mt-1">Dr. Johnson • 1 week ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 rounded-lg border border-dashed border-gray-300 text-sm font-medium text-gray-600 hover:border-[#2563eb] hover:text-[#2563eb] transition-colors flex items-center justify-center gap-2"> | |
| <i data-lucide="plus" class="w-4 h-4"></i> | |
| Add Note | |
| </button> | |
| </div> | |
| <!-- Tasks --> | |
| <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 card-hover transition-all duration-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2"> | |
| <i data-lucide="list-checks" class="w-5 h-5 text-[#2563eb]"></i> | |
| Pending Tasks | |
| </h3> | |
| <span class="text-xs font-medium bg-gray-100 text-gray-600 px-2 py-1 rounded-full">3</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <label class="flex items-start gap-3 cursor-pointer group"> | |
| <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-[#2563eb] focus:ring-[#2563eb] mt-0.5 cursor-pointer"> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium text-gray-800 group-hover:text-[#2563eb] transition-colors">Upload ID verification</div> | |
| <div class="text-xs text-gray-500">Required for renewal</div> | |
| </div> | |
| <span class="w-1.5 h-1.5 bg-red-500 rounded-full mt-2"></span> | |
| </label> | |
| <label class="flex items-start gap-3 cursor-pointer group"> | |
| <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-[#2563eb] focus:ring-[#2563eb] mt-0.5 cursor-pointer"> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium text-gray-800 group-hover:text-[#2563eb] transition-colors">Complete renewal form</div> | |
| <div class="text-xs text-gray-500">Due in 2 days</div> | |
| </div> | |
| <span class="w-1.5 h-1.5 bg-amber-500 rounded-full mt-2"></span> | |
| </label> | |
| <label class="flex items-start gap-3 cursor-pointer group"> | |
| <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-[#2563eb] focus:ring-[#2563eb] mt-0.5 cursor-pointer"> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium text-gray-800 group-hover:text-[#2563eb] transition-colors">Schedule renewal consultation</div> | |
| <div class="text-xs text-gray-500">Recommended before expiration</div> | |
| </div> | |
| </label> | |
| </div> | |
| <button class="mt-4 w-full py-2 rounded-lg bg-[#eff6ff] text-[#2563eb] text-sm font-medium hover:bg-blue-100 transition-colors"> | |
| Mark Complete | |
| </button> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-xl border border-[#e5e7eb] p-6 card-hover transition-all duration-200"> | |
| <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2 mb-4"> | |
| <i data-lucide="activity" class="w-5 h-5 text-[#2563eb]"></i> | |
| Recent Activity | |
| </h3> | |
| <div class="relative pl-4 border-l-2 border-gray-100 space-y-4"> | |
| <div class="relative timeline-dot"> | |
| <div class="text-sm font-medium text-gray-900">Appointment scheduled</div> | |
| <div class="text-xs text-gray-500 mt-1">Certification renewal consultation</div> | |
| <div class="text-xs text-gray-400 mt-0.5">Today, 2:30 PM</div> | |
| </div> | |
| <div class="relative timeline-dot"> | |
| <div class="text-sm font-medium text-gray-900">Document uploaded</div> | |
| <div class="text-xs text-gray-500 mt-1">Medical records from previous provider</div> | |
| <div class="text-xs text-gray-400 mt-0.5">Yesterday, 11:15 AM</div> | |
| </div> | |
| <div class="relative timeline-dot"> | |
| <div class="text-sm font-medium text-gray-900">Certification issued</div> | |
| <div class="text-xs text-gray-500 mt-1">Initial certification approved</div> | |
| <div class="text-xs text-gray-400 mt-0.5">Mar 10, 2026</div> | |
| </div> | |
| <div class="relative timeline-dot"> | |
| <div class="text-sm font-medium text-gray-900">Insurance verified</div> | |
| <div class="text-xs text-gray-500 mt-1">Coverage confirmed for visits</div> | |
| <div class="text-xs text-gray-400 mt-0.5">Mar 8, 2026</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documents --> | |
| <div class="md:col-span-2 bg-white rounded-xl border border-[#e5e7eb] p-6 card-hover transition-all duration-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2"> | |
| <i data-lucide="folder" class="w-5 h-5 text-[#2563eb]"></i> | |
| Recent Documents | |
| </h3> | |
| <div class="flex gap-2"> | |
| <button class="text-sm font-medium text-gray-600 hover:text-[#2563eb]">View All</button> | |
| <button class="text-sm font-medium text-[#2563eb] hover:text-blue-700">Upload File</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> | |
| <div class="group flex items-center gap-3 p-3 rounded-lg border border-gray-100 hover:border-[#2563eb] hover:bg-[#eff6ff] transition-all cursor-pointer"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-[#2563eb]"> | |
| <i data-lucide="id-card" class="w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="text-sm font-medium text-gray-900 truncate group-hover:text-[#2563eb]">Patient ID</div> | |
| <div class="text-xs text-gray-500">PDF • 2.4 MB</div> | |
| </div> | |
| <i data-lucide="download" class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"></i> | |
| </div> | |
| <div class="group flex items-center gap-3 p-3 rounded-lg border border-gray-100 hover:border-[#2563eb] hover:bg-[#eff6ff] transition-all cursor-pointer"> | |
| <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-emerald-600"> | |
| <i data-lucide="file-heart" class="w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="text-sm font-medium text-gray-900 truncate group-hover:text-[#2563eb]">Medical Record</div> | |
| <div class="text-xs text-gray-500">PDF • 1.8 MB</div> | |
| </div> | |
| <i data-lucide="download" class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"></i> | |
| </div> | |
| <div class="group flex items-center gap-3 p-3 rounded-lg border border-gray-100 hover:border-[#2563eb] hover:bg-[#eff6ff] transition-all cursor-pointer"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600"> | |
| <i data-lucide="badge-check" class="w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="text-sm font-medium text-gray-900 truncate group-hover:text-[#2563eb]">Certification</div> | |
| <div class="text-xs text-gray-500">PDF • 856 KB</div> | |
| </div> | |
| <i data-lucide="download" class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-8 text-center text-xs text-gray-400 border-t border-[#e5e7eb] pt-6"> | |
| <p>© 2026 MediCann Clinic Pro. Secure HIPAA-Compliant Environment.</p> | |
| </footer> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Mobile menu toggle functionality | |
| function toggleSecondaryMenu() { | |
| const menu = document.getElementById('secondaryMenu'); | |
| const overlay = document.getElementById('mobileOverlay'); | |
| if (menu.classList.contains('open')) { | |
| menu.classList.remove('open'); | |
| overlay.classList.add('hidden'); | |
| } else { | |
| menu.classList.add('open'); | |
| overlay.classList.remove('hidden'); | |
| } | |
| } | |
| // Close mobile menu on resize if screen becomes large | |
| window.addEventListener('resize', () => { | |
| if (window.innerWidth >= 1024) { | |
| const menu = document.getElementById('secondaryMenu'); | |
| const overlay = document.getElementById('mobileOverlay'); | |
| menu.classList.remove('open'); | |
| overlay.classList.add('hidden'); | |
| } | |
| }); | |
| // Checkbox interaction for tasks | |
| document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const label = this.closest('label'); | |
| const text = label.querySelector('.text-gray-800'); | |
| if (this.checked) { | |
| text.classList.add('line-through', 'text-gray-400'); | |
| } else { | |
| text.classList.remove('line-through', 'text-gray-400'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |