|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EMR - Medical AI Assistant</title> |
|
|
<link rel="icon" type="image/svg+xml" href="/static/icon.svg"> |
|
|
<link rel="stylesheet" href="/static/css/styles.css"> |
|
|
<link rel="stylesheet" href="/static/css/emr.css"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="emr-container"> |
|
|
|
|
|
<div class="emr-header"> |
|
|
<div class="emr-header-content"> |
|
|
<div class="emr-title"> |
|
|
<i class="fas fa-file-medical"></i> |
|
|
<h1>Electronic Medical Records</h1> |
|
|
</div> |
|
|
<div class="emr-actions"> |
|
|
<button class="btn btn-secondary" id="refreshBtn"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
Refresh |
|
|
</button> |
|
|
<button class="btn btn-primary" id="searchBtn"> |
|
|
<i class="fas fa-search"></i> |
|
|
Search |
|
|
</button> |
|
|
<a href="/static/index.html" class="btn btn-outline"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
Back to Chat |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="patient-info-bar" id="patientInfoBar" style="display: none;"> |
|
|
<div class="patient-info"> |
|
|
<div class="patient-avatar"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div class="patient-details"> |
|
|
<h3 id="patientName">Patient Name</h3> |
|
|
<p id="patientDetails">Age: -- | Sex: -- | ID: --</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="patient-stats" id="patientStats"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="emr-upload-section"> |
|
|
<div class="upload-container"> |
|
|
<div class="upload-header"> |
|
|
<h3><i class="fas fa-upload"></i> Upload Medical Document</h3> |
|
|
<p>Upload PDF, image, or document files to extract medical information</p> |
|
|
</div> |
|
|
<div class="upload-area" id="uploadArea"> |
|
|
<div class="upload-content"> |
|
|
<i class="fas fa-cloud-upload-alt"></i> |
|
|
<h4>Drop files here or click to browse</h4> |
|
|
<p>Supported formats: PDF, DOC, DOCX, JPG, PNG, TIFF</p> |
|
|
<input type="file" id="fileInput" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.tiff" multiple style="display: none;"> |
|
|
<button class="btn btn-primary" id="uploadBtn"> |
|
|
<i class="fas fa-folder-open"></i> |
|
|
Choose Files |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="upload-progress" id="uploadProgress" style="display: none;"> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="progressFill"></div> |
|
|
</div> |
|
|
<span class="progress-text" id="progressText">Uploading...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="emr-controls"> |
|
|
<div class="search-container"> |
|
|
<input type="text" id="searchInput" placeholder="Search EMR entries..." class="search-input"> |
|
|
<button class="search-btn" id="searchButton"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="filter-container"> |
|
|
<select id="dateFilter" class="filter-select"> |
|
|
<option value="all">All Time</option> |
|
|
<option value="today">Today</option> |
|
|
<option value="week">This Week</option> |
|
|
<option value="month">This Month</option> |
|
|
</select> |
|
|
<select id="typeFilter" class="filter-select"> |
|
|
<option value="all">All Types</option> |
|
|
<option value="diagnosis">Diagnosis</option> |
|
|
<option value="medication">Medication</option> |
|
|
<option value="vitals">Vital Signs</option> |
|
|
<option value="lab">Lab Results</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="emr-content"> |
|
|
<div class="emr-tabs"> |
|
|
<button class="tab-btn active" data-tab="overview">Overview</button> |
|
|
<button class="tab-btn" data-tab="diagnosis">Diagnoses</button> |
|
|
<button class="tab-btn" data-tab="medications">Medications</button> |
|
|
<button class="tab-btn" data-tab="vitals">Vital Signs</button> |
|
|
<button class="tab-btn" data-tab="lab">Lab Results</button> |
|
|
<button class="tab-btn" data-tab="procedures">Procedures</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content active" id="overview-tab"> |
|
|
<div class="emr-table-container"> |
|
|
<table class="emr-table" id="emrTable"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Date & Time</th> |
|
|
<th>Type</th> |
|
|
<th>Diagnosis</th> |
|
|
<th>Medications</th> |
|
|
<th>Vital Signs</th> |
|
|
<th>Confidence</th> |
|
|
<th>Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="emrTableBody"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content" id="diagnosis-tab"> |
|
|
<div class="emr-section"> |
|
|
<h3>Diagnosis History</h3> |
|
|
<div class="diagnosis-timeline" id="diagnosisTimeline"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content" id="medications-tab"> |
|
|
<div class="emr-section"> |
|
|
<h3>Medication History</h3> |
|
|
<div class="medications-grid" id="medicationsGrid"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content" id="vitals-tab"> |
|
|
<div class="emr-section"> |
|
|
<h3>Vital Signs Trends</h3> |
|
|
<div class="vitals-chart-container"> |
|
|
<canvas id="vitalsChart" width="800" height="400"></canvas> |
|
|
</div> |
|
|
<div class="vitals-table-container"> |
|
|
<table class="vitals-table" id="vitalsTable"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Date</th> |
|
|
<th>Blood Pressure</th> |
|
|
<th>Heart Rate</th> |
|
|
<th>Temperature</th> |
|
|
<th>Respiratory Rate</th> |
|
|
<th>Oxygen Saturation</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="vitalsTableBody"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content" id="lab-tab"> |
|
|
<div class="emr-section"> |
|
|
<h3>Laboratory Results</h3> |
|
|
<div class="lab-results-container" id="labResultsContainer"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content" id="procedures-tab"> |
|
|
<div class="emr-section"> |
|
|
<h3>Medical Procedures</h3> |
|
|
<div class="procedures-timeline" id="proceduresTimeline"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="loading-state" id="loadingState" style="display: none;"> |
|
|
<div class="loading-spinner"> |
|
|
<i class="fas fa-spinner fa-spin"></i> |
|
|
</div> |
|
|
<p>Loading EMR data...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="empty-state" id="emptyState" style="display: none;"> |
|
|
<div class="empty-icon"> |
|
|
<i class="fas fa-file-medical"></i> |
|
|
</div> |
|
|
<h3>No EMR Data Found</h3> |
|
|
<p>No medical records found for this patient. EMR data will appear here when you extract information from chat messages.</p> |
|
|
<a href="/static/index.html" class="btn btn-primary"> |
|
|
<i class="fas fa-comments"></i> |
|
|
Go to Chat |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="emrDetailModal"> |
|
|
<div class="modal-content emr-detail-modal"> |
|
|
<div class="modal-header"> |
|
|
<h3>EMR Entry Details</h3> |
|
|
<button class="modal-close" id="emrDetailModalClose">×</button> |
|
|
</div> |
|
|
<div class="modal-body" id="emrDetailContent"> |
|
|
|
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-secondary" id="emrDetailModalCancel">Close</button> |
|
|
<button class="btn btn-danger" id="deleteEmrBtn" style="display: none;">Delete Entry</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="searchModal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3>Advanced Search</h3> |
|
|
<button class="modal-close" id="searchModalClose">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="form-group"> |
|
|
<label for="semanticSearchInput">Search by meaning (semantic search):</label> |
|
|
<input type="text" id="semanticSearchInput" placeholder="e.g., 'chest pain treatment' or 'diabetes medication'"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="exactSearchInput">Search by exact text:</label> |
|
|
<input type="text" id="exactSearchInput" placeholder="e.g., 'hypertension' or 'metformin'"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-secondary" id="searchModalCancel">Cancel</button> |
|
|
<button class="btn btn-primary" id="performSearchBtn">Search</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="documentPreviewModal"> |
|
|
<div class="modal-content document-preview-modal"> |
|
|
<div class="modal-header"> |
|
|
<h3><i class="fas fa-file-medical"></i> Document Analysis Preview</h3> |
|
|
<button class="modal-close" id="documentPreviewModalClose">×</button> |
|
|
</div> |
|
|
<div class="modal-body" id="documentPreviewContent"> |
|
|
|
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-secondary" id="documentPreviewCancel">Cancel</button> |
|
|
<button class="btn btn-primary" id="saveDocumentAnalysis">Save to EMR</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="/static/js/emr.js"></script> |
|
|
</body> |
|
|
</html> |
