Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Voodoo Practice Dashboard</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css" rel="stylesheet"> | |
| <link href="https://cdn.datatables.net/5.3.3/css/dataTables.bootstrap5.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-dark text-light"> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-secondary shadow-sm"> | |
| <div class="container-fluid"> | |
| <a class="navbar-brand d-flex align-items-center" href="#"> | |
| <i class="bi bi-magic me-2"></i> | |
| <span>Voodoo Practice</span> | |
| </a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav me-auto"> | |
| <li class="nav-item"><a class="nav-link active" href="#">Dashboard</a></li> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Patients</a> | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-item" href="#">All Patients</a></li> | |
| <li><a class="dropdown-item" href="#">Add New</a></li> | |
| </ul> | |
| </li> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Appointments</a> | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-item" href="#">Schedule</a></li> | |
| <li><a class="dropdown-item" href="#">Calendar</a></li> | |
| </ul> | |
| </li> | |
| <li class="nav-item"><a class="nav-link" href="#">Reports</a></li> | |
| </ul> | |
| <div class="d-flex align-items-center"> | |
| <button class="btn btn-outline-light btn-sm me-2"><i class="bi bi-bell"></i></button> | |
| <div class="dropdown"> | |
| <button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown"> | |
| <i class="bi bi-person-circle"></i> Dr. Smith | |
| </button> | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Settings</a></li> | |
| <li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container-fluid mt-4"> | |
| <div class="row"> | |
| <!-- Sidebar --> | |
| <div class="col-lg-2 mb-4"> | |
| <div class="card bg-secondary border-0 shadow-sm"> | |
| <div class="card-body p-3"> | |
| <ul class="nav flex-column"> | |
| <li class="nav-item mb-2"> | |
| <a class="nav-link text-light active" href="#"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a> | |
| </li> | |
| <li class="nav-item mb-2"> | |
| <a class="nav-link text-light" href="#"><i class="bi bi-calendar-event me-2"></i>Appointments</a> | |
| </li> | |
| <li class="nav-item mb-2"> | |
| <a class="nav-link text-light" href="#"><i class="bi bi-people me-2"></i>Patients</a> | |
| </li> | |
| <li class="nav-item mb-2"> | |
| <a class="nav-link text-light" href="#"><i class="bi bi-file-earmark-medical me-2"></i>Clinical Notes</a> | |
| </li> | |
| <li class="nav-item mb-2"> | |
| <a class="nav-link text-light" href="#"><i class="bi bi-graph-up me-2"></i>Analytics</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link text-light" href="#"><i class="bi bi-gear me-2"></i>Settings</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="col-lg-10"> | |
| <div class="d-flex justify-content-between align-items-center mb-4"> | |
| <h2 class="mb-0">Practice Dashboard</h2> | |
| <button class="btn btn-primary"><i class="bi bi-plus-circle me-2"></i>New Appointment</button> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="row mb-4"> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card bg-secondary border-0 shadow-sm h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between"> | |
| <div> | |
| <h5 class="card-title">Today's Appointments</h5> | |
| <h2 class="text-primary">12</h2> | |
| </div> | |
| <i class="bi bi-calendar-check fs-1 text-primary"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card bg-secondary border-0 shadow-sm h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between"> | |
| <div> | |
| <h5 class="card-title">New Patients</h5> | |
| <h2 class="text-success">5</h2> | |
| </div> | |
| <i class="bi bi-person-plus fs-1 text-success"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card bg-secondary border-0 shadow-sm h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between"> | |
| <div> | |
| <h5 class="card-title">Pending Reports</h5> | |
| <h2 class="text-warning">3</h2> | |
| </div> | |
| <i class="bi bi-file-earmark-text fs-1 text-warning"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card bg-secondary border-0 shadow-sm h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between"> | |
| <div> | |
| <h5 class="card-title">Completed Today</h5> | |
| <h2 class="text-info">8</h2> | |
| </div> | |
| <i class="bi bi-check-circle fs-1 text-info"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="row mb-4"> | |
| <div class="col-md-8 mb-3"> | |
| <div class="card bg-secondary border-0 shadow-sm"> | |
| <div class="card-header bg-transparent border-bottom"> | |
| <h5 class="mb-0">Patient Visits Trend</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div id="chartContainer" style="height: 300px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <div class="card bg-secondary border-0 shadow-sm h-100"> | |
| <div class="card-header bg-transparent border-bottom"> | |
| <h5 class="mb-0">Diagnosis Distribution</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div id="pieChartContainer" style="height: 300px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity Table --> | |
| <div class="card bg-secondary border-0 shadow-sm"> | |
| <div class="card-header bg-transparent border-bottom d-flex justify-content-between align-items-center"> | |
| <h5 class="mb-0">Recent Patient Activity</h5> | |
| <a href="#" class="btn btn-sm btn-outline-light">View All</a> | |
| </div> | |
| <div class="card-body"> | |
| <div class="table-responsive"> | |
| <table id="activityTable" class="table table-dark table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Patient</th> | |
| <th>Date</th> | |
| <th>Type</th> | |
| <th>Status</th> | |
| <th>Action</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>John Doe</td> | |
| <td>2023-06-15</td> | |
| <td>Initial Consultation</td> | |
| <td><span class="badge bg-success">Completed</span></td> | |
| <td><button class="btn btn-sm btn-outline-light">View</button></td> | |
| </tr> | |
| <tr> | |
| <td>Jane Smith</td> | |
| <td>2023-06-15</td> | |
| <td>Follow-up</td> | |
| <td><span class="badge bg-warning">In Progress</span></td> | |
| <td><button class="btn btn-sm btn-outline-light">View</button></td> | |
| </tr> | |
| <tr> | |
| <td>Robert Johnson</td> | |
| <td>2023-06-14</td> | |
| <td>Assessment</td> | |
| <td><span class="badge bg-danger">Pending</span></td> | |
| <td><button class="btn btn-sm btn-outline-light">View</button></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | |
| <script src="https://cdn.datatables.net/5.3.3/js/dataTables.bootstrap5.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.26.3/dist/sweetalert2.all.min.js"></script> | |
| <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |