# Web Implementation Reference (Bootstrap 5 / Tabler + PHP)
Healthcare web patterns on the `webapp-gui-design` stack: Tabler, Bootstrap 5, PHP, SweetAlert2, DataTables.
---
## 1. Page Structure Template
Clone `seeder-page.php` as base. Extend with healthcare regions.
```php
FACILITY ALERT: = htmlspecialchars($facility_alert) ?>
```
### Required Includes
| Include | Purpose | Healthcare Extensions |
|---------|---------|----------------------|
| `header.php` | Top bar, CSS, meta | Facility selector, ward/shift dropdown, notification bell |
| `sidebar.php` | Left nav | Healthcare module groups, badge counters |
| `patient-bar.php` | Patient context strip | Persistent bar below header when patient selected |
| `footer.php` | Scripts, closing | Session timeout timer, audit logger, clinical JS |
### Patient Context Bar
Persistent strip showing active patient. Visible on all clinical pages.
```html
Administering ${medName} to
${patientName} (MRN: ${mrn})
5 Rights Check: Verify Patient, Medication, Dose, Time, Route
`,
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Confirm Administration',
confirmButtonColor: '#059669',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
fetch('/api/medications/administer', {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content },
body: JSON.stringify({ medication_id: medId, patient_id: patientId })
}).then(r => r.json()).then(data => {
data.success ? Swal.fire('Recorded', 'Administration logged.', 'success')
: Swal.fire('Error', data.message, 'error');
});
}
});
}
```
### Session Timeout with Warning
```javascript
const SESSION_TIMEOUT = 15 * 60 * 1000;
const WARNING_AT = 13 * 60 * 1000;
let timeoutTimer, warningTimer;
function resetSessionTimers() {
clearTimeout(timeoutTimer);
clearTimeout(warningTimer);
warningTimer = setTimeout(() => {
Swal.fire({
title: 'Session Expiring',
text: 'Your session expires in 2 minutes due to inactivity.',
icon: 'warning', showCancelButton: true,
confirmButtonText: 'Stay Logged In', cancelButtonText: 'Log Out'
}).then(r => r.isConfirmed
? (fetch('/api/session/refresh', { method: 'POST' }), resetSessionTimers())
: (window.location.href = '/logout'));
}, WARNING_AT);
timeoutTimer = setTimeout(() => { window.location.href = '/logout?reason=timeout'; }, SESSION_TIMEOUT);
}
['click','keypress','scroll','mousemove'].forEach(e =>
document.addEventListener(e, debounce(resetSessionTimers, 1000)));
resetSessionTimers();
```
---
## 5. DataTables for Patient Lists
```javascript
$('#patient-table').DataTable({
processing: true, serverSide: true,
ajax: { url: '/api/patients/list', type: 'POST', headers: { 'X-CSRF-Token': csrfToken } },
columns: [
{ data: 'name', render: (d, t, r) => `