Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Invoices - 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 text-sm text-gray-600 hover:bg-primary-hover hover:text-primary transition-colors"> | |
| <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 bg-primary text-white"> | |
| <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">Invoices</h2> | |
| <p class="text-gray-500">Manage patient billing and payment history</p> | |
| </div> | |
| <!-- Account Summary --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-white rounded-xl border border-border p-6"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="wallet" class="w-5 h-5 text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Paid</p> | |
| <p class="text-xl font-semibold text-gray-900">$1,250.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl border border-border p-6"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="clock" class="w-5 h-5 text-amber-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Outstanding Balance</p> | |
| <p class="text-xl font-semibold text-amber-700">$320.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl border border-border p-6"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="credit-card" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Insurance Coverage</p> | |
| <p class="text-xl font-semibold text-gray-900">85%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Outstanding Balance Alert --> | |
| <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6"> | |
| <div class="flex items-center gap-3"> | |
| <i data-lucide="alert-circle" class="w-5 h-5 text-amber-600"></i> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-amber-800">Outstanding Balance Due</p> | |
| <p class="text-xs text-amber-700 mt-1">Invoice #INV-2025-003 for $320.00 is due on March 30, 2026</p> | |
| </div> | |
| <button class="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium hover:bg-amber-700 transition-colors"> | |
| Pay Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Invoices Table --> | |
| <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">Billing History</h3> | |
| <div class="flex gap-2"> | |
| <button class="px-3 py-2 border border-border rounded-lg text-sm font-medium text-gray-700 hover:bg-primary-hover transition-colors"> | |
| <i data-lucide="filter" class="w-4 h-4 inline mr-1"></i> | |
| Filter | |
| </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"> | |
| <i data-lucide="plus" class="w-4 h-4"></i> | |
| Create Invoice | |
| </button> | |
| </div> | |
| </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">Invoice #</th> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Service Date</th> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Description</th> | |
| <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</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">INV-2025-003</p> | |
| <p class="text-xs text-gray-500">Mar 20, 2026</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Mar 20, 2026</td> | |
| <td class="px-6 py-4 text-sm text-gray-600">Consultation - Dr. Mary Smith</td> | |
| <td class="px-6 py-4 text-sm font-medium text-gray-900">$180.00</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-amber-50 text-amber-700 text-xs font-medium rounded-full">Pending</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex gap-2"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View</button> | |
| <button class="text-gray-500 hover:text-gray-700 text-sm font-medium">PDF</button> | |
| </div> | |
| </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">INV-2025-002</p> | |
| <p class="text-xs text-gray-500">Mar 20, 2026</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Mar 10, 2026</td> | |
| <td class="px-6 py-4 text-sm text-gray-600">Follow-up Visit - Dr. Mary Smith</td> | |
| <td class="px-6 py-4 text-sm font-medium text-gray-900">$140.00</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-amber-50 text-amber-700 text-xs font-medium rounded-full">Pending</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex gap-2"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View</button> | |
| <button class="text-gray-500 hover:text-gray-700 text-sm font-medium">PDF</button> | |
| </div> | |
| </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">INV-2025-001</p> | |
| <p class="text-xs text-gray-500">Feb 20, 2026</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Feb 20, 2026</td> | |
| <td class="px-6 py-4 text-sm text-gray-600">Initial Consultation - Dr. Mary Smith</td> | |
| <td class="px-6 py-4 text-sm font-medium text-gray-900">$485.00</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full">Paid</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex gap-2"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View</button> | |
| <button class="text-gray-500 hover:text-gray-700 text-sm font-medium">PDF</button> | |
| </div> | |
| </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">INV-2025-000</p> | |
| <p class="text-xs text-gray-500">Jan 15, 2026</p> | |
| </td> | |
| <td class="px-6 py-4 text-sm text-gray-900">Jan 15, 2026</td> | |
| <td class="px-6 py-4 text-sm text-gray-600">Urgent Care Visit - Dr. James Wilson</td> | |
| <td class="px-6 py-4 text-sm font-medium text-gray-900">$765.00</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full">Paid</span> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex gap-2"> | |
| <button class="text-primary hover:text-blue-700 text-sm font-medium">View</button> | |
| <button class="text-gray-500 hover:text-gray-700 text-sm font-medium">PDF</button> | |
| </div> | |
| </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> |