curaflow/doctor-dashboard.html

229 lines
8.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doctor Dashboard | Curio HMS</title>
<link rel="stylesheet" href="globals.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="dashboard.css">
<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@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
<script src="globals.js"></script>
<style>
.prescription-builder {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: 600;
color: var(--text-dark);
}
.form-control {
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 6px;
font-family: inherit;
}
.medicines-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.medicine-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: 1rem;
align-items: center;
background: #f8fafc;
padding: 1rem;
border-radius: 6px;
border: 1px solid var(--border-color);
}
.print-only {
display: none;
}
/* Print Styles */
@media print {
body * {
visibility: hidden;
}
.sidebar, .dash-header, .header-actions, .actions-row {
display: none !important;
}
#prescription-print-area, #prescription-print-area * {
visibility: visible;
}
#prescription-print-area {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 2rem;
}
.print-only {
display: block;
text-align: center;
margin-bottom: 2rem;
border-bottom: 2px solid #000;
padding-bottom: 1rem;
}
.medicine-row {
border: none;
background: none;
border-bottom: 1px dashed #ccc;
grid-template-columns: 2fr 1fr 1fr 1fr;
}
.medicine-row button {
display: none;
}
.form-control {
border: none;
padding: 0;
appearance: none;
background: transparent;
}
}
</style>
</head>
<body class="dashboard-body">
<aside class="sidebar">
<div class="logo">
<div class="logo-icon">C</div>
<span class="logo-text">Curio</span>
</div>
<nav class="side-nav">
<a href="doctor-dashboard.html" class="active"><span>🩺</span> Consultations</a>
<a href="dashboard.html"><span>📂</span> Patients</a>
<a href="login.html" class="logout-btn" style="margin-top:auto;"><span>🚪</span> Logout</a>
</nav>
</aside>
<main class="dashboard-main">
<header class="dash-header">
<div class="header-title">
<h1>Doctor Dashboard</h1>
<p>Record details, prescribe medicines, and send to pharmacy.</p>
</div>
<div class="header-actions">
<button class="btn btn-secondary" onclick="window.print()">🖨️ Print Prescription</button>
<button class="btn btn-primary" onclick="submitPrescription()">✅ Prescribe & Send</button>
</div>
</header>
<section class="section-card" id="prescription-print-area">
<div class="print-only">
<h2>Curio Clinic</h2>
<p>Dr. Sharma | MBBS, MD</p>
<p>Date: <span id="print-date"></span></p>
</div>
<div class="prescription-builder">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label>Patient ID / Phone</label>
<input type="text" id="patient-id" class="form-control" placeholder="e.g., 9876543210">
</div>
<div class="form-group">
<label>Patient Name</label>
<input type="text" id="patient-name" class="form-control" placeholder="Patient Full Name">
</div>
</div>
<div class="form-group">
<label>Symptoms & Diagnosis</label>
<textarea id="diagnosis" class="form-control" rows="3" placeholder="Enter diagnosis..."></textarea>
</div>
<div class="form-group">
<label>Medicines</label>
<div id="medicines-container" class="medicines-list">
<!-- Medicine rows injected here -->
</div>
<button class="btn btn-secondary actions-row" style="width:fit-content; margin-top: 1rem;" onclick="addMedicineRow()">+ Add Medicine</button>
</div>
</div>
</section>
</main>
<script>
document.getElementById('print-date').innerText = new Date().toLocaleDateString();
function addMedicineRow() {
const container = document.getElementById('medicines-container');
const row = document.createElement('div');
row.className = 'medicine-row';
row.innerHTML = `
<input type="text" class="form-control med-name" placeholder="Medicine Name">
<input type="text" class="form-control med-dosage" placeholder="Dosage (e.g. 500mg)">
<input type="text" class="form-control med-freq" placeholder="Frequency (e.g. 1-0-1)">
<input type="text" class="form-control med-dur" placeholder="Duration (e.g. 5 days)">
<button class="btn btn-sm btn-secondary actions-row" onclick="this.parentElement.remove()">❌</button>
`;
container.appendChild(row);
}
// Add initial row
addMedicineRow();
async function submitPrescription() {
const patientId = document.getElementById('patient-id').value;
const patientName = document.getElementById('patient-name').value;
const diagnosis = document.getElementById('diagnosis').value;
const medicines = [];
document.querySelectorAll('.medicine-row').forEach(row => {
const name = row.querySelector('.med-name').value;
if (name) {
medicines.push({
name: name,
dosage: row.querySelector('.med-dosage').value,
frequency: row.querySelector('.med-freq').value,
duration: row.querySelector('.med-dur').value
});
}
});
if (!patientName || medicines.length === 0) {
alert("Please fill in patient name and at least one medicine.");
return;
}
try {
const res = await apiCall('/api/prescriptions', 'POST', {
patientId,
patientName,
diagnosis,
medicines,
labTests: []
});
if (res.success) {
alert('Prescription created and sent to pharmacy! ID: ' + res.prescriptionId);
window.print();
// Clear form
document.getElementById('patient-id').value = '';
document.getElementById('patient-name').value = '';
document.getElementById('diagnosis').value = '';
document.getElementById('medicines-container').innerHTML = '';
addMedicineRow();
} else {
alert('Failed to create prescription.');
}
} catch (err) {
console.error(err);
alert('An error occurred.');
}
}
</script>
</body>
</html>