936 lines
44 KiB
HTML
936 lines
44 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Imaging Orders - Radiology{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Imaging Orders Management</h4>
|
|
<h6>Manage and track radiology imaging orders and requests</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newOrderModal">
|
|
<i class="fa fa-plus"></i> New Order
|
|
</button>
|
|
<button type="button" class="btn btn-info" onclick="refreshOrders()">
|
|
<i class="fa fa-sync"></i> Refresh
|
|
</button>
|
|
<button type="button" class="btn btn-success" onclick="exportOrders()">
|
|
<i class="fa fa-download"></i> Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Statistics -->
|
|
<div class="row">
|
|
<div class="col-xl-3 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="dash-widget-header">
|
|
<span class="dash-widget-icon text-primary border-primary">
|
|
<i class="fa fa-file-medical"></i>
|
|
</span>
|
|
<div class="dash-count">
|
|
<h3>{{ order_stats.pending|default:24 }}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="dash-widget-info">
|
|
<h6 class="text-muted">Pending Orders</h6>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-primary" style="width: 60%"></div>
|
|
</div>
|
|
<small class="text-primary">
|
|
<i class="fa fa-clock"></i> Avg wait: 45 min
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="dash-widget-header">
|
|
<span class="dash-widget-icon text-warning border-warning">
|
|
<i class="fa fa-hourglass-half"></i>
|
|
</span>
|
|
<div class="dash-count">
|
|
<h3>{{ order_stats.in_progress|default:8 }}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="dash-widget-info">
|
|
<h6 class="text-muted">In Progress</h6>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-warning" style="width: 35%"></div>
|
|
</div>
|
|
<small class="text-warning">
|
|
<i class="fa fa-camera"></i> Currently imaging
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="dash-widget-header">
|
|
<span class="dash-widget-icon text-info border-info">
|
|
<i class="fa fa-search"></i>
|
|
</span>
|
|
<div class="dash-count">
|
|
<h3>{{ order_stats.reading|default:12 }}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="dash-widget-info">
|
|
<h6 class="text-muted">Awaiting Reading</h6>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-info" style="width: 50%"></div>
|
|
</div>
|
|
<small class="text-info">
|
|
<i class="fa fa-user-md"></i> Radiologist review
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="dash-widget-header">
|
|
<span class="dash-widget-icon text-success border-success">
|
|
<i class="fa fa-check-circle"></i>
|
|
</span>
|
|
<div class="dash-count">
|
|
<h3>{{ order_stats.completed|default:156 }}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="dash-widget-info">
|
|
<h6 class="text-muted">Completed Today</h6>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-success" style="width: 85%"></div>
|
|
</div>
|
|
<small class="text-success">
|
|
<i class="fa fa-arrow-up"></i> +12% from yesterday
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Filters -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Order Filters</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<label class="form-label">Status</label>
|
|
<select class="form-select" id="statusFilter">
|
|
<option value="">All Statuses</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="scheduled">Scheduled</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label">Priority</label>
|
|
<select class="form-select" id="priorityFilter">
|
|
<option value="">All Priorities</option>
|
|
<option value="stat">STAT</option>
|
|
<option value="urgent">Urgent</option>
|
|
<option value="routine">Routine</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label">Modality</label>
|
|
<select class="form-select" id="modalityFilter">
|
|
<option value="">All Modalities</option>
|
|
<option value="xray">X-Ray</option>
|
|
<option value="ct">CT Scan</option>
|
|
<option value="mri">MRI</option>
|
|
<option value="ultrasound">Ultrasound</option>
|
|
<option value="mammography">Mammography</option>
|
|
<option value="nuclear">Nuclear Medicine</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label">Date Range</label>
|
|
<select class="form-select" id="dateFilter">
|
|
<option value="today">Today</option>
|
|
<option value="tomorrow">Tomorrow</option>
|
|
<option value="week">This Week</option>
|
|
<option value="month">This Month</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Search</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Patient name, MRN, or order ID...">
|
|
<button class="btn btn-outline-primary" type="button" onclick="searchOrders()">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<label class="form-label"> </label>
|
|
<button class="btn btn-outline-secondary d-block" onclick="clearFilters()">
|
|
<i class="fa fa-times"></i> Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Orders Table -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Imaging Orders</h5>
|
|
<div class="card-tools">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-sm btn-outline-primary active" data-view="all">All</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" data-view="urgent">Urgent</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" data-view="today">Today</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="ordersTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Order ID</th>
|
|
<th>Patient</th>
|
|
<th>Study Type</th>
|
|
<th>Body Part</th>
|
|
<th>Priority</th>
|
|
<th>Ordered By</th>
|
|
<th>Order Date</th>
|
|
<th>Scheduled</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>RAD-2024-001</strong></td>
|
|
<td>
|
|
<div>
|
|
<strong>John Smith</strong><br>
|
|
<small class="text-muted">MRN: 123456</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-primary">CT Scan</span><br>
|
|
<small class="text-muted">With Contrast</small>
|
|
</td>
|
|
<td>Chest</td>
|
|
<td><span class="badge bg-danger">STAT</span></td>
|
|
<td>Dr. Johnson</td>
|
|
<td>Jan 15, 2024<br><small class="text-muted">14:30</small></td>
|
|
<td>Jan 15, 2024<br><small class="text-muted">15:00</small></td>
|
|
<td><span class="badge bg-warning">In Progress</span></td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-001')">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning" onclick="editOrder('RAD-2024-001')">
|
|
<i class="fa fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success" onclick="updateStatus('RAD-2024-001')">
|
|
<i class="fa fa-check"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>RAD-2024-002</strong></td>
|
|
<td>
|
|
<div>
|
|
<strong>Mary Wilson</strong><br>
|
|
<small class="text-muted">MRN: 789012</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-info">X-Ray</span><br>
|
|
<small class="text-muted">2 Views</small>
|
|
</td>
|
|
<td>Left Knee</td>
|
|
<td><span class="badge bg-warning">Urgent</span></td>
|
|
<td>Dr. Chen</td>
|
|
<td>Jan 15, 2024<br><small class="text-muted">13:45</small></td>
|
|
<td>Jan 15, 2024<br><small class="text-muted">16:30</small></td>
|
|
<td><span class="badge bg-primary">Scheduled</span></td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-002')">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info" onclick="rescheduleOrder('RAD-2024-002')">
|
|
<i class="fa fa-calendar"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success" onclick="startImaging('RAD-2024-002')">
|
|
<i class="fa fa-play"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>RAD-2024-003</strong></td>
|
|
<td>
|
|
<div>
|
|
<strong>Robert Davis</strong><br>
|
|
<small class="text-muted">MRN: 345678</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-secondary">MRI</span><br>
|
|
<small class="text-muted">Without Contrast</small>
|
|
</td>
|
|
<td>Brain</td>
|
|
<td><span class="badge bg-success">Routine</span></td>
|
|
<td>Dr. Martinez</td>
|
|
<td>Jan 15, 2024<br><small class="text-muted">12:15</small></td>
|
|
<td>Jan 16, 2024<br><small class="text-muted">09:00</small></td>
|
|
<td><span class="badge bg-info">Awaiting Reading</span></td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-003')">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info" onclick="viewImages('RAD-2024-003')">
|
|
<i class="fa fa-images"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success" onclick="assignRadiologist('RAD-2024-003')">
|
|
<i class="fa fa-user-md"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>RAD-2024-004</strong></td>
|
|
<td>
|
|
<div>
|
|
<strong>Lisa Anderson</strong><br>
|
|
<small class="text-muted">MRN: 901234</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-warning">Ultrasound</span><br>
|
|
<small class="text-muted">Doppler</small>
|
|
</td>
|
|
<td>Abdomen</td>
|
|
<td><span class="badge bg-success">Routine</span></td>
|
|
<td>Dr. Thompson</td>
|
|
<td>Jan 15, 2024<br><small class="text-muted">11:30</small></td>
|
|
<td>Not Scheduled</td>
|
|
<td><span class="badge bg-secondary">Pending</span></td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-004')">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success" onclick="scheduleOrder('RAD-2024-004')">
|
|
<i class="fa fa-calendar-plus"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="cancelOrder('RAD-2024-004')">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Orders pagination">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1">Previous</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Workflow -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Order Workflow Status</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="workflow-steps">
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<div class="workflow-step">
|
|
<div class="step-icon bg-primary text-white">
|
|
<i class="fa fa-file-medical"></i>
|
|
</div>
|
|
<h6>Ordered</h6>
|
|
<span class="badge bg-primary">{{ workflow.ordered|default:15 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="workflow-step">
|
|
<div class="step-icon bg-info text-white">
|
|
<i class="fa fa-calendar-check"></i>
|
|
</div>
|
|
<h6>Scheduled</h6>
|
|
<span class="badge bg-info">{{ workflow.scheduled|default:12 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="workflow-step">
|
|
<div class="step-icon bg-warning text-white">
|
|
<i class="fa fa-camera"></i>
|
|
</div>
|
|
<h6>Imaging</h6>
|
|
<span class="badge bg-warning">{{ workflow.imaging|default:8 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="workflow-step">
|
|
<div class="step-icon bg-secondary text-white">
|
|
<i class="fa fa-search"></i>
|
|
</div>
|
|
<h6>Reading</h6>
|
|
<span class="badge bg-secondary">{{ workflow.reading|default:6 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="workflow-step">
|
|
<div class="step-icon bg-dark text-white">
|
|
<i class="fa fa-file-alt"></i>
|
|
</div>
|
|
<h6>Reporting</h6>
|
|
<span class="badge bg-dark">{{ workflow.reporting|default:4 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="workflow-step">
|
|
<div class="step-icon bg-success text-white">
|
|
<i class="fa fa-check-circle"></i>
|
|
</div>
|
|
<h6>Complete</h6>
|
|
<span class="badge bg-success">{{ workflow.complete|default:156 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Order Modal -->
|
|
<div class="modal fade" id="newOrderModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Create New Imaging Order</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="newOrderForm">
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Patient *</label>
|
|
<div class="input-group">
|
|
<input type="text" name="patient_search" class="form-control"
|
|
placeholder="Search by name or MRN..." required>
|
|
<button type="button" class="btn btn-outline-primary" onclick="searchPatients()">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
<input type="hidden" name="patient_id" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Ordering Physician *</label>
|
|
<select name="ordering_physician" class="form-select" required>
|
|
<option value="">Select physician...</option>
|
|
<option value="dr_johnson">Dr. Johnson - Emergency</option>
|
|
<option value="dr_chen">Dr. Chen - Orthopedics</option>
|
|
<option value="dr_martinez">Dr. Martinez - Neurology</option>
|
|
<option value="dr_thompson">Dr. Thompson - Internal Medicine</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Study Type *</label>
|
|
<select name="study_type" class="form-select" required onchange="updateBodyParts()">
|
|
<option value="">Select study type...</option>
|
|
<option value="xray">X-Ray</option>
|
|
<option value="ct">CT Scan</option>
|
|
<option value="mri">MRI</option>
|
|
<option value="ultrasound">Ultrasound</option>
|
|
<option value="mammography">Mammography</option>
|
|
<option value="nuclear">Nuclear Medicine</option>
|
|
<option value="fluoroscopy">Fluoroscopy</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Body Part/Region *</label>
|
|
<select name="body_part" class="form-select" required>
|
|
<option value="">Select body part...</option>
|
|
<!-- Options will be populated based on study type -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Priority *</label>
|
|
<select name="priority" class="form-select" required>
|
|
<option value="routine">Routine</option>
|
|
<option value="urgent">Urgent</option>
|
|
<option value="stat">STAT</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Contrast</label>
|
|
<select name="contrast" class="form-select">
|
|
<option value="none">No Contrast</option>
|
|
<option value="with_contrast">With Contrast</option>
|
|
<option value="without_and_with">Without and With Contrast</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Clinical Indication *</label>
|
|
<textarea name="clinical_indication" class="form-control" rows="3"
|
|
placeholder="Describe the clinical reason for this imaging study..." required></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Special Instructions</label>
|
|
<textarea name="special_instructions" class="form-control" rows="2"
|
|
placeholder="Any special instructions for the technologist or radiologist..."></textarea>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Preferred Date</label>
|
|
<input type="date" name="preferred_date" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Preferred Time</label>
|
|
<select name="preferred_time" class="form-select">
|
|
<option value="">No preference</option>
|
|
<option value="morning">Morning (8:00 AM - 12:00 PM)</option>
|
|
<option value="afternoon">Afternoon (12:00 PM - 5:00 PM)</option>
|
|
<option value="evening">Evening (5:00 PM - 8:00 PM)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="pregnancy_check" id="pregnancyCheck">
|
|
<label class="form-check-label" for="pregnancyCheck">
|
|
Pregnancy status verified (for female patients)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="allergy_check" id="allergyCheck">
|
|
<label class="form-check-label" for="allergyCheck">
|
|
Contrast allergies checked
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create Order</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set minimum date for preferred date
|
|
const today = new Date().toISOString().split('T')[0];
|
|
document.querySelector('input[name="preferred_date"]').min = today;
|
|
|
|
// Form submission handler
|
|
document.getElementById('newOrderForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
handleNewOrder();
|
|
});
|
|
|
|
// Filter change handlers
|
|
document.getElementById('statusFilter').addEventListener('change', applyFilters);
|
|
document.getElementById('priorityFilter').addEventListener('change', applyFilters);
|
|
document.getElementById('modalityFilter').addEventListener('change', applyFilters);
|
|
document.getElementById('dateFilter').addEventListener('change', applyFilters);
|
|
|
|
// View toggle handlers
|
|
const viewButtons = document.querySelectorAll('[data-view]');
|
|
viewButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const view = this.getAttribute('data-view');
|
|
toggleView(view);
|
|
|
|
// Update active button
|
|
viewButtons.forEach(btn => btn.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
});
|
|
|
|
function updateBodyParts() {
|
|
const studyType = document.querySelector('select[name="study_type"]').value;
|
|
const bodyPartSelect = document.querySelector('select[name="body_part"]');
|
|
|
|
// Clear existing options
|
|
bodyPartSelect.innerHTML = '<option value="">Select body part...</option>';
|
|
|
|
const bodyParts = {
|
|
'xray': ['Chest', 'Abdomen', 'Spine', 'Extremities', 'Pelvis', 'Skull'],
|
|
'ct': ['Head', 'Chest', 'Abdomen', 'Pelvis', 'Spine', 'Extremities'],
|
|
'mri': ['Brain', 'Spine', 'Joints', 'Abdomen', 'Pelvis', 'Cardiac'],
|
|
'ultrasound': ['Abdomen', 'Pelvis', 'Cardiac', 'Vascular', 'Obstetric', 'Thyroid'],
|
|
'mammography': ['Bilateral Breasts', 'Right Breast', 'Left Breast'],
|
|
'nuclear': ['Bone Scan', 'Cardiac', 'Thyroid', 'Renal', 'Lung Perfusion'],
|
|
'fluoroscopy': ['Upper GI', 'Barium Enema', 'VCUG', 'Arthrogram']
|
|
};
|
|
|
|
if (bodyParts[studyType]) {
|
|
bodyParts[studyType].forEach(part => {
|
|
const option = document.createElement('option');
|
|
option.value = part.toLowerCase().replace(/\s+/g, '_');
|
|
option.textContent = part;
|
|
bodyPartSelect.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleNewOrder() {
|
|
const formData = new FormData(document.getElementById('newOrderForm'));
|
|
|
|
console.log('Creating new imaging order:', Object.fromEntries(formData));
|
|
|
|
// Close modal
|
|
bootstrap.Modal.getInstance(document.getElementById('newOrderModal')).hide();
|
|
|
|
// Reset form
|
|
document.getElementById('newOrderForm').reset();
|
|
|
|
// Show success message
|
|
const orderId = 'RAD-2024-' + Math.floor(Math.random() * 1000).toString().padStart(3, '0');
|
|
alert(`Imaging order created successfully! Order ID: ${orderId}`);
|
|
|
|
// Refresh the orders table
|
|
refreshOrders();
|
|
}
|
|
|
|
function searchPatients() {
|
|
const searchTerm = document.querySelector('input[name="patient_search"]').value;
|
|
console.log(`Searching for patients: ${searchTerm}`);
|
|
|
|
// Simulate patient search results
|
|
if (searchTerm.trim()) {
|
|
alert(`Patient search results for "${searchTerm}" would be displayed here.`);
|
|
// In real implementation, this would show a dropdown with matching patients
|
|
}
|
|
}
|
|
|
|
function viewOrder(orderId) {
|
|
console.log(`Viewing order: ${orderId}`);
|
|
alert(`Detailed view for order ${orderId} would be displayed here.`);
|
|
}
|
|
|
|
function editOrder(orderId) {
|
|
console.log(`Editing order: ${orderId}`);
|
|
alert(`Edit form for order ${orderId} would be displayed here.`);
|
|
}
|
|
|
|
function updateStatus(orderId) {
|
|
const newStatus = prompt('Update status:\n1. Scheduled\n2. In Progress\n3. Completed\n4. Cancelled\n\nEnter number:');
|
|
|
|
if (newStatus && ['1', '2', '3', '4'].includes(newStatus)) {
|
|
const statuses = {
|
|
'1': 'Scheduled',
|
|
'2': 'In Progress',
|
|
'3': 'Completed',
|
|
'4': 'Cancelled'
|
|
};
|
|
|
|
console.log(`Updating order ${orderId} status to: ${statuses[newStatus]}`);
|
|
alert(`Order ${orderId} status updated to: ${statuses[newStatus]}`);
|
|
refreshOrders();
|
|
}
|
|
}
|
|
|
|
function rescheduleOrder(orderId) {
|
|
const newDate = prompt('Enter new date and time (YYYY-MM-DD HH:MM):');
|
|
|
|
if (newDate) {
|
|
console.log(`Rescheduling order ${orderId} to: ${newDate}`);
|
|
alert(`Order ${orderId} rescheduled to: ${newDate}`);
|
|
refreshOrders();
|
|
}
|
|
}
|
|
|
|
function startImaging(orderId) {
|
|
if (confirm(`Start imaging for order ${orderId}?`)) {
|
|
console.log(`Starting imaging for order: ${orderId}`);
|
|
alert(`Imaging started for order ${orderId}`);
|
|
refreshOrders();
|
|
}
|
|
}
|
|
|
|
function scheduleOrder(orderId) {
|
|
console.log(`Scheduling order: ${orderId}`);
|
|
alert(`Scheduling interface for order ${orderId} would be displayed here.`);
|
|
}
|
|
|
|
function cancelOrder(orderId) {
|
|
const reason = prompt('Enter cancellation reason:');
|
|
|
|
if (reason !== null && reason.trim() !== '') {
|
|
console.log(`Cancelling order ${orderId} with reason: ${reason}`);
|
|
alert(`Order ${orderId} has been cancelled.`);
|
|
refreshOrders();
|
|
}
|
|
}
|
|
|
|
function viewImages(orderId) {
|
|
console.log(`Viewing images for order: ${orderId}`);
|
|
alert(`DICOM viewer for order ${orderId} would be opened here.`);
|
|
}
|
|
|
|
function assignRadiologist(orderId) {
|
|
const radiologist = prompt('Assign to radiologist:\n1. Dr. Smith\n2. Dr. Brown\n3. Dr. Wilson\n4. Dr. Taylor\n\nEnter number:');
|
|
|
|
if (radiologist && ['1', '2', '3', '4'].includes(radiologist)) {
|
|
const radiologists = {
|
|
'1': 'Dr. Smith',
|
|
'2': 'Dr. Brown',
|
|
'3': 'Dr. Wilson',
|
|
'4': 'Dr. Taylor'
|
|
};
|
|
|
|
console.log(`Assigning order ${orderId} to: ${radiologists[radiologist]}`);
|
|
alert(`Order ${orderId} assigned to: ${radiologists[radiologist]}`);
|
|
refreshOrders();
|
|
}
|
|
}
|
|
|
|
function searchOrders() {
|
|
const searchTerm = document.getElementById('searchInput').value;
|
|
console.log(`Searching orders for: ${searchTerm}`);
|
|
applyFilters();
|
|
}
|
|
|
|
function applyFilters() {
|
|
const status = document.getElementById('statusFilter').value;
|
|
const priority = document.getElementById('priorityFilter').value;
|
|
const modality = document.getElementById('modalityFilter').value;
|
|
const dateRange = document.getElementById('dateFilter').value;
|
|
const search = document.getElementById('searchInput').value;
|
|
|
|
console.log('Applying filters:', { status, priority, modality, dateRange, search });
|
|
|
|
// In real implementation, this would filter the table rows
|
|
alert('Filters applied successfully!');
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('statusFilter').value = '';
|
|
document.getElementById('priorityFilter').value = '';
|
|
document.getElementById('modalityFilter').value = '';
|
|
document.getElementById('dateFilter').value = 'today';
|
|
document.getElementById('searchInput').value = '';
|
|
|
|
applyFilters();
|
|
}
|
|
|
|
function toggleView(view) {
|
|
console.log(`Switching to view: ${view}`);
|
|
|
|
// In real implementation, this would filter the table based on the view
|
|
const viewMessages = {
|
|
'all': 'Showing all orders',
|
|
'urgent': 'Showing urgent orders only',
|
|
'today': 'Showing today\'s orders only'
|
|
};
|
|
|
|
alert(viewMessages[view] || 'View changed');
|
|
}
|
|
|
|
function refreshOrders() {
|
|
console.log('Refreshing orders table...');
|
|
|
|
// Show loading state
|
|
const refreshBtn = document.querySelector('button[onclick="refreshOrders()"]');
|
|
const originalContent = refreshBtn.innerHTML;
|
|
refreshBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Refreshing...';
|
|
refreshBtn.disabled = true;
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
refreshBtn.innerHTML = originalContent;
|
|
refreshBtn.disabled = false;
|
|
alert('Orders table refreshed!');
|
|
}, 1500);
|
|
}
|
|
|
|
function exportOrders() {
|
|
const format = prompt('Export format:\n1. PDF Report\n2. Excel Spreadsheet\n3. CSV Data\n\nEnter number:');
|
|
|
|
if (format && ['1', '2', '3'].includes(format)) {
|
|
const formats = {
|
|
'1': 'PDF Report',
|
|
'2': 'Excel Spreadsheet',
|
|
'3': 'CSV Data'
|
|
};
|
|
|
|
console.log(`Exporting orders as: ${formats[format]}`);
|
|
alert(`Orders export started as ${formats[format]}. You will receive an email when ready.`);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dash-widget-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dash-widget-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-right: 1rem;
|
|
border: 2px solid;
|
|
}
|
|
|
|
.dash-count h3 {
|
|
margin: 0;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.workflow-steps {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.workflow-step {
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.step-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin: 0 auto 0.5rem;
|
|
}
|
|
|
|
.card-tools {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.progress {
|
|
height: 6px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dash-widget-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.dash-widget-icon {
|
|
margin-right: 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.btn-group {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn-group .btn {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.workflow-step {
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|