Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AIMHSA Professional Dashboard</title> | |
| <!-- AdminLTE 4 CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <!-- Google Font: Source Sans Pro --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <!-- DataTables CSS --> | |
| <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css"> | |
| <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap4.min.css"> | |
| <!-- Select2 CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> | |
| <!-- SweetAlert2 CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> | |
| <!-- FullCalendar CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.5/main.min.css" rel="stylesheet"> | |
| <!-- Custom CSS (preserves existing styles) --> | |
| <link rel="stylesheet" href="professional.css"> | |
| </head> | |
| <body class="hold-transition sidebar-mini layout-fixed"> | |
| <div class="wrapper"> | |
| <!-- Navbar --> | |
| <nav class="main-header navbar navbar-expand navbar-dark navbar-success"> | |
| <!-- Left navbar links --> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-widget="pushmenu" href="#" role="button"> | |
| <i class="fas fa-bars"></i> | |
| </a> | |
| </li> | |
| <li class="nav-item d-none d-sm-inline-block"> | |
| <a href="#" class="nav-link" data-section="dashboard">Dashboard</a> | |
| </li> | |
| <li class="nav-item d-none d-sm-inline-block"> | |
| <a href="#" class="nav-link" data-section="sessions">Sessions</a> | |
| </li> | |
| <li class="nav-item d-none d-sm-inline-block"> | |
| <a href="#" class="nav-link" data-section="reports">Reports</a> | |
| </li> | |
| </ul> | |
| <!-- Right navbar links --> | |
| <ul class="navbar-nav ml-auto"> | |
| <!-- Notifications Dropdown Menu --> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link" data-toggle="dropdown" href="#"> | |
| <i class="far fa-bell"></i> | |
| <span class="badge badge-warning navbar-badge" id="notificationBadge">8</span> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> | |
| <span class="dropdown-item dropdown-header">8 Notifications</span> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-calendar mr-2"></i> New session booking | |
| <span class="float-right text-muted text-sm">3 mins</span> | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> High risk assessment | |
| <span class="float-right text-muted text-sm">12 hours</span> | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-user mr-2"></i> New patient assigned | |
| <span class="float-right text-muted text-sm">2 days</span> | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a> | |
| </div> | |
| </li> | |
| <!-- User Account Dropdown --> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link" data-toggle="dropdown" href="#"> | |
| <i class="far fa-user"></i> | |
| <span class="ml-2" id="professionalName">Dr. John Doe</span> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-user mr-2"></i> Profile | |
| </a> | |
| <a href="#" class="dropdown-item"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </a> | |
| <div class="dropdown-divider"></div> | |
| <a href="#" class="dropdown-item" id="logoutBtn"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Logout | |
| </a> | |
| </div> | |
| </li> | |
| </ul> | |
| </nav> | |
| <!-- Main Sidebar Container --> | |
| <aside class="main-sidebar sidebar-dark-success elevation-4"> | |
| <!-- Brand Logo --> | |
| <a href="#" class="brand-link"> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMzIiBoZWlnaHQ9IjMzIiByeD0iMTYuNSIgZmlsbD0iIzI4YTc0NSIvPgo8dGV4dCB4PSIxNi41IiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk1EPC90ZXh0Pgo8L3N2Zz4K" alt="AIMHSA Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> | |
| <span class="brand-text font-weight-light">AIMHSA Professional</span> | |
| </a> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <!-- Sidebar user panel --> | |
| <div class="user-panel mt-3 pb-3 mb-3 d-flex"> | |
| <div class="image"> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDE2MCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiByeD0iODAiIGZpbGw9IiMyOGE3NDUiLz4KPHRleHQgeD0iODAiIHk9Ijk1IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SlQ8L3RleHQ+Cjwvc3ZnPgo=" class="img-circle elevation-2" alt="User Image" id="userProfileImage"> | |
| </div> | |
| <div class="info"> | |
| <a href="#" class="d-block" id="professionalNameSidebar">Dr. John Doe</a> | |
| <small class="text-muted" id="professionalRole">Psychiatrist</small> | |
| </div> | |
| </div> | |
| <!-- Sidebar Menu --> | |
| <nav class="mt-2"> | |
| <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> | |
| <li class="nav-item"> | |
| <a href="#dashboard" class="nav-link active" data-section="dashboard"> | |
| <i class="nav-icon fas fa-tachometer-alt"></i> | |
| <p>Dashboard</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#sessions" class="nav-link" data-section="sessions"> | |
| <i class="nav-icon fas fa-calendar-check"></i> | |
| <p>My Sessions</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#notifications" class="nav-link" data-section="notifications"> | |
| <i class="nav-icon fas fa-bell"></i> | |
| <p>Notifications</p> | |
| <span class="badge badge-warning right" id="notificationCount">8</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#reports" class="nav-link" data-section="reports"> | |
| <i class="nav-icon fas fa-chart-bar"></i> | |
| <p>Reports</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#profile" class="nav-link" data-section="profile"> | |
| <i class="nav-icon fas fa-user"></i> | |
| <p>Profile</p> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#settings" class="nav-link" data-section="settings"> | |
| <i class="nav-icon fas fa-cog"></i> | |
| <p>Settings</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </aside> | |
| <!-- Content Wrapper --> | |
| <div class="content-wrapper"> | |
| <!-- Content Header --> | |
| <div class="content-header"> | |
| <div class="container-fluid"> | |
| <div class="row mb-2"> | |
| <div class="col-sm-6"> | |
| <h1 class="m-0" id="pageTitle">Dashboard</h1> | |
| </div> | |
| <div class="col-sm-6"> | |
| <ol class="breadcrumb float-sm-right"> | |
| <li class="breadcrumb-item"><a href="#">Home</a></li> | |
| <li class="breadcrumb-item active" id="breadcrumbActive">Dashboard</li> | |
| <li class="breadcrumb-item"> | |
| <button type="button" class="btn btn-sm btn-primary" id="refreshDashboardBtn"> | |
| <i class="fas fa-sync"></i> Refresh Data | |
| </button> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <section class="content"> | |
| <div class="container-fluid"> | |
| <!-- Dashboard Section --> | |
| <div id="dashboard-section" class="content-section"> | |
| <!-- Info boxes --> | |
| <div class="row"> | |
| <div class="col-lg-3 col-6"> | |
| <div class="small-box bg-info"> | |
| <div class="inner"> | |
| <h3 id="totalSessions">15</h3> | |
| <p>Total Sessions</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <a href="#sessions" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| <div class="col-lg-3 col-6"> | |
| <div class="small-box bg-warning"> | |
| <div class="inner"> | |
| <h3 id="unreadNotifications">8</h3> | |
| <p>Unread Notifications</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <a href="#notifications" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| <div class="col-lg-3 col-6"> | |
| <div class="small-box bg-success"> | |
| <div class="inner"> | |
| <h3 id="upcomingToday">3</h3> | |
| <p>Today's Sessions</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <a href="#sessions" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| <div class="col-lg-3 col-6"> | |
| <div class="small-box bg-danger"> | |
| <div class="inner"> | |
| <h3 id="highRiskSessions">2</h3> | |
| <p>High Risk Cases</p> | |
| </div> | |
| <div class="icon"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <a href="#patients" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Row --> | |
| <div class="row"> | |
| <div class="col-lg-8"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Session Trends</h3> | |
| <div class="card-tools"> | |
| <button type="button" class="btn btn-tool" data-card-widget="collapse"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <button type="button" class="btn btn-tool" data-card-widget="remove"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <canvas id="sessionTrendChart" style="height: 300px;"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-4"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Patient Risk Distribution</h3> | |
| </div> | |
| <div class="card-body"> | |
| <canvas id="riskDistributionChart" style="height: 300px;"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="row"> | |
| <div class="col-lg-6"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Today's Schedule</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div class="table-responsive"> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Time</th> | |
| <th>Patient</th> | |
| <th>Type</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody id="todayScheduleTable"> | |
| <tr> | |
| <td>09:00</td> | |
| <td>John Doe</td> | |
| <td>Initial</td> | |
| <td><span class="badge badge-success">Confirmed</span></td> | |
| </tr> | |
| <tr> | |
| <td>11:00</td> | |
| <td>Jane Smith</td> | |
| <td>Follow-up</td> | |
| <td><span class="badge badge-warning">Pending</span></td> | |
| </tr> | |
| <tr> | |
| <td>14:00</td> | |
| <td>Bob Johnson</td> | |
| <td>Emergency</td> | |
| <td><span class="badge badge-danger">High Risk</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-6"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Recent Notifications</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div class="timeline"> | |
| <div class="time-label"> | |
| <span class="bg-red">Today</span> | |
| </div> | |
| <div> | |
| <i class="fas fa-calendar bg-blue"></i> | |
| <div class="timeline-item"> | |
| <span class="time"><i class="fas fa-clock"></i> 12:05</span> | |
| <h3 class="timeline-header">New Session Booking</h3> | |
| <div class="timeline-body"> | |
| John Doe has booked a session for tomorrow at 10:00 AM | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <i class="fas fa-exclamation-triangle bg-yellow"></i> | |
| <div class="timeline-item"> | |
| <span class="time"><i class="fas fa-clock"></i> 09:30</span> | |
| <h3 class="timeline-header">High Risk Alert</h3> | |
| <div class="timeline-body"> | |
| Patient Bob Johnson has been flagged as high risk | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <i class="fas fa-user bg-green"></i> | |
| <div class="timeline-item"> | |
| <span class="time"><i class="fas fa-clock"></i> 08:15</span> | |
| <h3 class="timeline-header">New Patient</h3> | |
| <div class="timeline-body"> | |
| New patient Jane Smith has been assigned to you | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sessions Section --> | |
| <div id="sessions-section" class="content-section" style="display: none;"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">My Sessions</h3> | |
| <div class="card-tools"> | |
| <button type="button" class="btn btn-primary" onclick="addNewSession()"> | |
| <i class="fas fa-plus"></i> New Session | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="row mb-3"> | |
| <div class="col-md-4"> | |
| <select class="form-control" id="sessionStatusFilter"> | |
| <option value="">All Status</option> | |
| <option value="scheduled">Scheduled</option> | |
| <option value="completed">Completed</option> | |
| <option value="cancelled">Cancelled</option> | |
| </select> | |
| </div> | |
| <div class="col-md-4"> | |
| <input type="date" class="form-control" id="sessionDateFilter" placeholder="Filter by date"> | |
| </div> | |
| <div class="col-md-4"> | |
| <button class="btn btn-success" onclick="refreshSessions()"> | |
| <i class="fas fa-sync"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="table-responsive"> | |
| <table id="sessionsTable" class="table table-bordered table-striped"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Patient</th> | |
| <th>Date & Time</th> | |
| <th>Type</th> | |
| <th>Risk Level</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="sessionsTableBody"> | |
| <!-- Data will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notifications Section --> | |
| <div id="notifications-section" class="content-section" style="display: none;"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Notifications</h3> | |
| <div class="card-tools"> | |
| <button type="button" class="btn btn-success" onclick="markAllAsRead()"> | |
| <i class="fas fa-check"></i> Mark All Read | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div id="notificationsList"> | |
| <!-- Notifications will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reports Section --> | |
| <div id="reports-section" class="content-section" style="display: none;"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Professional Reports</h3> | |
| <div class="card-tools"> | |
| <button type="button" class="btn btn-success"> | |
| <i class="fas fa-download"></i> Generate Report | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="card card-primary"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Session Summary</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Generate monthly session summary report</p> | |
| <button class="btn btn-primary">Generate</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card card-success"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Patient Progress</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Track patient progress over time</p> | |
| <button class="btn btn-success">Generate</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card card-warning"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Risk Assessment</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Detailed risk assessment reports</p> | |
| <button class="btn btn-warning">Generate</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Section --> | |
| <div id="profile-section" class="content-section" style="display: none;"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="card card-primary card-outline"> | |
| <div class="card-body box-profile"> | |
| <div class="text-center"> | |
| <img class="profile-user-img img-fluid img-circle" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiMyOGE3NDUiLz4KPHRleHQgeD0iNTAiIHk9IjU4IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNDAiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SlQ8L3RleHQ+Cjwvc3ZnPgo=" alt="User profile picture" id="profileUserImage"> | |
| </div> | |
| <h3 class="profile-username text-center" id="profileName">Dr. John Doe</h3> | |
| <p class="text-muted text-center" id="profileRole">Psychiatrist</p> | |
| <ul class="list-group list-group-unbordered mb-3"> | |
| <li class="list-group-item"> | |
| <b>Specialization</b> <a class="float-right">Psychiatry</a> | |
| </li> | |
| <li class="list-group-item"> | |
| <b>Experience</b> <a class="float-right">8 years</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-8"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Profile Information</h3> | |
| </div> | |
| <div class="card-body"> | |
| <form> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>First Name</label> | |
| <input type="text" class="form-control" value="John"> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>Last Name</label> | |
| <input type="text" class="form-control" value="Doe"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>Email</label> | |
| <input type="email" class="form-control" value="john.doe@aimhsa.rw"> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>Phone</label> | |
| <input type="tel" class="form-control" value="+250 788 123 456"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Bio</label> | |
| <textarea class="form-control" rows="3">Experienced psychiatrist specializing in trauma and anxiety disorders.</textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Update Profile</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Section --> | |
| <div id="settings-section" class="content-section" style="display: none;"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Professional Settings</h3> | |
| </div> | |
| <div class="card-body"> | |
| <form> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>Notification Preferences</label> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" checked> | |
| <label class="form-check-label">Email Notifications</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" checked> | |
| <label class="form-check-label">SMS Notifications</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox"> | |
| <label class="form-check-label">Push Notifications</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>Working Hours</label> | |
| <div class="row"> | |
| <div class="col-6"> | |
| <input type="time" class="form-control" value="08:00"> | |
| </div> | |
| <div class="col-6"> | |
| <input type="time" class="form-control" value="17:00"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>Session Duration (minutes)</label> | |
| <select class="form-control"> | |
| <option>30</option> | |
| <option selected>45</option> | |
| <option>60</option> | |
| <option>90</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label>Auto-refresh Interval</label> | |
| <select class="form-control"> | |
| <option>30 seconds</option> | |
| <option selected>1 minute</option> | |
| <option>5 minutes</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Save Settings</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <!-- Session Notes Modal --> | |
| <div class="modal fade" id="sessionNotesModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h4 class="modal-title">Add Session Notes</h4> | |
| <button type="button" class="close" data-dismiss="modal"> | |
| <span>×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="sessionNotesForm"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="sessionId">Session ID</label> | |
| <input type="text" class="form-control" id="sessionId" name="sessionId" readonly> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <label for="patientName">Patient Name</label> | |
| <input type="text" class="form-control" id="patientName" name="patientName" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="sessionNotes">Session Notes *</label> | |
| <textarea class="form-control" id="sessionNotes" name="sessionNotes" rows="5" required placeholder="Enter detailed session notes..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="followUpRequired" name="followUpRequired"> | |
| <label class="form-check-label" for="followUpRequired">Follow-up Required</label> | |
| </div> | |
| </div> | |
| <div class="form-group" id="followUpDateGroup" style="display: none;"> | |
| <label for="followUpDate">Follow-up Date</label> | |
| <input type="date" class="form-control" id="followUpDate" name="followUpDate"> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> | |
| <button type="button" class="btn btn-primary" id="saveNotesBtn">Save Notes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Emergency Contacts Modal --> | |
| <div class="modal fade" id="emergencyModal" tabindex="-1"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h4 class="modal-title">Emergency Contacts</h4> | |
| <button type="button" class="close" data-dismiss="modal"> | |
| <span>×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="list-group"> | |
| <div class="list-group-item"> | |
| <h5 class="mb-1">Mental Health Emergency Hotline</h5> | |
| <p class="mb-1">Phone: +250 788 123 456</p> | |
| <small>Available 24/7</small> | |
| </div> | |
| <div class="list-group-item"> | |
| <h5 class="mb-1">Rwanda National Police</h5> | |
| <p class="mb-1">Emergency: 112</p> | |
| <small>General: +250 788 831 112</small> | |
| </div> | |
| <div class="list-group-item"> | |
| <h5 class="mb-1">Kigali Hospital Emergency</h5> | |
| <p class="mb-1">Phone: +250 788 456 789</p> | |
| <small>Address: Kigali, Rwanda</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- jQuery --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <!-- Bootstrap 4 --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- AdminLTE 4 --> | |
| <script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script> | |
| <!-- DataTables --> | |
| <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script> | |
| <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script> | |
| <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script> | |
| <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap4.min.js"></script> | |
| <!-- Select2 --> | |
| <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> | |
| <!-- SweetAlert2 --> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <!-- FullCalendar --> | |
| <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script> | |
| <!-- Custom JavaScript (preserves existing functionality) --> | |
| <script src="professional_advanced.js"></script> | |
| </body> | |
| </html> | |