829 lines
28 KiB
HTML
829 lines
28 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Process Specimen - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.specimen-header {
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.process-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border: 1px solid #dee2e6;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.specimen-info {
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.process-step {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 6px;
|
|
border: 1px solid #dee2e6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.process-step.active {
|
|
background: #e3f2fd;
|
|
border-color: #2196f3;
|
|
}
|
|
.process-step.completed {
|
|
background: #e8f5e8;
|
|
border-color: #4caf50;
|
|
}
|
|
.step-number {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #6c757d;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 15px;
|
|
}
|
|
.step-number.active {
|
|
background: #2196f3;
|
|
}
|
|
.step-number.completed {
|
|
background: #4caf50;
|
|
}
|
|
.step-content {
|
|
flex: 1;
|
|
}
|
|
.step-title {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
.step-description {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
.step-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.specimen-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.detail-item {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.detail-label {
|
|
font-weight: bold;
|
|
color: #495057;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 5px;
|
|
}
|
|
.detail-value {
|
|
color: #333;
|
|
font-size: 1rem;
|
|
}
|
|
.test-panel {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.test-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.test-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.test-name {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.test-status {
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.status-pending {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
.status-processing {
|
|
background: #cce5ff;
|
|
color: #004085;
|
|
}
|
|
.status-completed {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.status-failed {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.processing-timeline {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.timeline-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
position: relative;
|
|
}
|
|
.timeline-item:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 50px;
|
|
width: 2px;
|
|
height: 30px;
|
|
background: #dee2e6;
|
|
}
|
|
.timeline-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #f8f9fa;
|
|
border: 2px solid #dee2e6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
z-index: 1;
|
|
position: relative;
|
|
background: white;
|
|
}
|
|
.timeline-icon.completed {
|
|
background: #28a745;
|
|
border-color: #28a745;
|
|
color: white;
|
|
}
|
|
.timeline-icon.active {
|
|
background: #007bff;
|
|
border-color: #007bff;
|
|
color: white;
|
|
}
|
|
.timeline-content {
|
|
flex: 1;
|
|
}
|
|
.timeline-title {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
.timeline-time {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
.quality-checks {
|
|
background: #fff8e1;
|
|
border: 1px solid #ffcc02;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.quality-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
}
|
|
.quality-label {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.quality-status {
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.quality-pass {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.quality-fail {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.quality-pending {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
.processing-notes {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.note-item {
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.note-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.note-author {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.note-time {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
.note-content {
|
|
color: #495057;
|
|
line-height: 1.5;
|
|
}
|
|
.action-buttons {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
text-align: center;
|
|
}
|
|
.btn-group-custom {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.progress-indicator {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.progress-bar-custom {
|
|
height: 8px;
|
|
background: #e9ecef;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #28a745, #20c997);
|
|
transition: width 0.3s ease;
|
|
}
|
|
.progress-text {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
{% 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><i class="fas fa-vial"></i> Process Specimen</h4>
|
|
<h6>Laboratory specimen processing workflow</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-info me-2" id="printLabels">
|
|
<i class="fas fa-print"></i> Print Labels
|
|
</button>
|
|
<button class="btn btn-warning me-2" id="flagIssue">
|
|
<i class="fas fa-exclamation-triangle"></i> Flag Issue
|
|
</button>
|
|
<button class="btn btn-success" id="completeProcessing">
|
|
<i class="fas fa-check"></i> Complete Processing
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Specimen Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="specimen-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5><i class="fas fa-flask"></i> Specimen ID: SP-2024-001234</h5>
|
|
<p>Patient: John Doe (DOB: 1985-03-15) | MRN: MR123456</p>
|
|
<p>Collection Date: {{ "now"|date:"M d, Y H:i" }} | Priority: Routine</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-end">
|
|
<h6>Status: <span class="badge bg-warning">Processing</span></h6>
|
|
<h6>Technician: Dr. Sarah Wilson</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Main Processing Panel -->
|
|
<div class="col-md-8">
|
|
<!-- Progress Indicator -->
|
|
<div class="progress-indicator">
|
|
<h6><i class="fas fa-tasks"></i> Processing Progress</h6>
|
|
<div class="progress-bar-custom">
|
|
<div class="progress-fill" style="width: 60%;"></div>
|
|
</div>
|
|
<div class="progress-text">Step 3 of 5 - Quality Control</div>
|
|
</div>
|
|
|
|
<!-- Processing Steps -->
|
|
<div class="process-card">
|
|
<h6><i class="fas fa-list-ol"></i> Processing Workflow</h6>
|
|
|
|
<div class="process-step completed">
|
|
<div class="step-number completed">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Specimen Receipt & Verification</div>
|
|
<div class="step-description">Verify specimen integrity, labeling, and collection requirements</div>
|
|
</div>
|
|
<div class="step-actions">
|
|
<span class="badge bg-success">Completed</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="process-step completed">
|
|
<div class="step-number completed">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Sample Preparation</div>
|
|
<div class="step-description">Prepare specimen for testing according to protocol</div>
|
|
</div>
|
|
<div class="step-actions">
|
|
<span class="badge bg-success">Completed</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="process-step active">
|
|
<div class="step-number active">3</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Quality Control</div>
|
|
<div class="step-description">Run quality control checks and calibration verification</div>
|
|
</div>
|
|
<div class="step-actions">
|
|
<button class="btn btn-sm btn-primary">Start QC</button>
|
|
<button class="btn btn-sm btn-outline-secondary">Skip</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="process-step">
|
|
<div class="step-number">4</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Testing & Analysis</div>
|
|
<div class="step-description">Perform requested laboratory tests and analysis</div>
|
|
</div>
|
|
<div class="step-actions">
|
|
<span class="badge bg-secondary">Pending</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="process-step">
|
|
<div class="step-number">5</div>
|
|
<div class="step-content">
|
|
<div class="step-title">Result Validation</div>
|
|
<div class="step-description">Review and validate test results before reporting</div>
|
|
</div>
|
|
<div class="step-actions">
|
|
<span class="badge bg-secondary">Pending</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Panel -->
|
|
<div class="test-panel">
|
|
<h6><i class="fas fa-clipboard-list"></i> Requested Tests</h6>
|
|
|
|
<div class="test-item">
|
|
<div>
|
|
<div class="test-name">Complete Blood Count (CBC)</div>
|
|
<small class="text-muted">Automated hematology analyzer</small>
|
|
</div>
|
|
<div>
|
|
<span class="test-status status-processing">Processing</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-item">
|
|
<div>
|
|
<div class="test-name">Basic Metabolic Panel (BMP)</div>
|
|
<small class="text-muted">Chemistry analyzer</small>
|
|
</div>
|
|
<div>
|
|
<span class="test-status status-pending">Pending</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-item">
|
|
<div>
|
|
<div class="test-name">Lipid Panel</div>
|
|
<small class="text-muted">Fasting required</small>
|
|
</div>
|
|
<div>
|
|
<span class="test-status status-pending">Pending</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-item">
|
|
<div>
|
|
<div class="test-name">Thyroid Function Tests</div>
|
|
<small class="text-muted">TSH, T3, T4</small>
|
|
</div>
|
|
<div>
|
|
<span class="test-status status-pending">Pending</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quality Control Checks -->
|
|
<div class="quality-checks">
|
|
<h6><i class="fas fa-shield-alt"></i> Quality Control Status</h6>
|
|
|
|
<div class="quality-item">
|
|
<div class="quality-label">Temperature Control</div>
|
|
<div class="quality-status quality-pass">PASS</div>
|
|
</div>
|
|
|
|
<div class="quality-item">
|
|
<div class="quality-label">Calibration Verification</div>
|
|
<div class="quality-status quality-pass">PASS</div>
|
|
</div>
|
|
|
|
<div class="quality-item">
|
|
<div class="quality-label">Control Sample Results</div>
|
|
<div class="quality-status quality-pending">PENDING</div>
|
|
</div>
|
|
|
|
<div class="quality-item">
|
|
<div class="quality-label">Equipment Status</div>
|
|
<div class="quality-status quality-pass">PASS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Processing Notes -->
|
|
<div class="processing-notes">
|
|
<h6><i class="fas fa-sticky-note"></i> Processing Notes</h6>
|
|
|
|
<div class="note-item">
|
|
<div class="note-header">
|
|
<div class="note-author">Dr. Sarah Wilson</div>
|
|
<div class="note-time">{{ "now"|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
<div class="note-content">
|
|
Specimen received in good condition. No hemolysis observed. Proceeding with standard processing protocol.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note-item">
|
|
<div class="note-header">
|
|
<div class="note-author">Lab Tech Mike Johnson</div>
|
|
<div class="note-time">{{ "now"|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
<div class="note-content">
|
|
Sample preparation completed. Aliquots prepared for multiple test panels. QC checks initiated.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group mt-3">
|
|
<label>Add Processing Note</label>
|
|
<textarea class="form-control" rows="3" placeholder="Enter processing notes or observations..."></textarea>
|
|
<button class="btn btn-sm btn-primary mt-2">
|
|
<i class="fas fa-plus"></i> Add Note
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons">
|
|
<div class="btn-group-custom">
|
|
<button class="btn btn-success" id="proceedNext">
|
|
<i class="fas fa-arrow-right"></i> Proceed to Next Step
|
|
</button>
|
|
<button class="btn btn-warning" id="holdProcessing">
|
|
<i class="fas fa-pause"></i> Hold Processing
|
|
</button>
|
|
<button class="btn btn-danger" id="rejectSpecimen">
|
|
<i class="fas fa-times"></i> Reject Specimen
|
|
</button>
|
|
<button class="btn btn-info" id="requestConsult">
|
|
<i class="fas fa-user-md"></i> Request Consultation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-md-4">
|
|
<!-- Specimen Details -->
|
|
<div class="specimen-info">
|
|
<h6><i class="fas fa-info-circle"></i> Specimen Details</h6>
|
|
<div class="specimen-details">
|
|
<div class="detail-item">
|
|
<div class="detail-label">Specimen Type</div>
|
|
<div class="detail-value">Serum</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Collection Method</div>
|
|
<div class="detail-value">Venipuncture</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Volume</div>
|
|
<div class="detail-value">5.0 mL</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Container</div>
|
|
<div class="detail-value">Red Top Tube</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Fasting Status</div>
|
|
<div class="detail-value">12 hours</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">Priority</div>
|
|
<div class="detail-value">Routine</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Processing Timeline -->
|
|
<div class="processing-timeline">
|
|
<h6><i class="fas fa-clock"></i> Processing Timeline</h6>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon completed">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Specimen Received</div>
|
|
<div class="timeline-time">{{ "now"|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon completed">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Verification Complete</div>
|
|
<div class="timeline-time">{{ "now"|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon completed">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Sample Prepared</div>
|
|
<div class="timeline-time">{{ "now"|date:"M d, Y H:i" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon active">
|
|
<i class="fas fa-cog fa-spin"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Quality Control</div>
|
|
<div class="timeline-time">In Progress</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">
|
|
<i class="fas fa-flask"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Testing Phase</div>
|
|
<div class="timeline-time">Pending</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">
|
|
<i class="fas fa-clipboard-check"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Result Validation</div>
|
|
<div class="timeline-time">Pending</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="process-card">
|
|
<h6><i class="fas fa-bolt"></i> Quick Actions</h6>
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-barcode"></i> Print Barcode
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info">
|
|
<i class="fas fa-camera"></i> Capture Image
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning">
|
|
<i class="fas fa-thermometer-half"></i> Log Temperature
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success">
|
|
<i class="fas fa-microscope"></i> View Under Microscope
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-history"></i> View History
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Status -->
|
|
<div class="process-card">
|
|
<h6><i class="fas fa-cogs"></i> Equipment Status</h6>
|
|
<div class="equipment-item d-flex justify-content-between align-items-center mb-2">
|
|
<span>Hematology Analyzer</span>
|
|
<span class="badge bg-success">Online</span>
|
|
</div>
|
|
<div class="equipment-item d-flex justify-content-between align-items-center mb-2">
|
|
<span>Chemistry Analyzer</span>
|
|
<span class="badge bg-success">Online</span>
|
|
</div>
|
|
<div class="equipment-item d-flex justify-content-between align-items-center mb-2">
|
|
<span>Centrifuge</span>
|
|
<span class="badge bg-warning">Maintenance</span>
|
|
</div>
|
|
<div class="equipment-item d-flex justify-content-between align-items-center">
|
|
<span>Microscope Station</span>
|
|
<span class="badge bg-success">Available</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Process step actions
|
|
$('.process-step .btn-primary').click(function() {
|
|
var step = $(this).closest('.process-step');
|
|
step.removeClass('active').addClass('completed');
|
|
step.find('.step-number').removeClass('active').addClass('completed').html('<i class="fas fa-check"></i>');
|
|
step.find('.step-actions').html('<span class="badge bg-success">Completed</span>');
|
|
|
|
// Activate next step
|
|
var nextStep = step.next('.process-step');
|
|
if (nextStep.length) {
|
|
nextStep.addClass('active');
|
|
nextStep.find('.step-number').addClass('active');
|
|
}
|
|
|
|
// Update progress
|
|
updateProgress();
|
|
});
|
|
|
|
// Skip step
|
|
$('.process-step .btn-outline-secondary').click(function() {
|
|
if (confirm('Are you sure you want to skip this step?')) {
|
|
var step = $(this).closest('.process-step');
|
|
step.removeClass('active');
|
|
step.find('.step-actions').html('<span class="badge bg-warning">Skipped</span>');
|
|
|
|
// Activate next step
|
|
var nextStep = step.next('.process-step');
|
|
if (nextStep.length) {
|
|
nextStep.addClass('active');
|
|
nextStep.find('.step-number').addClass('active');
|
|
}
|
|
|
|
updateProgress();
|
|
}
|
|
});
|
|
|
|
// Update progress indicator
|
|
function updateProgress() {
|
|
var totalSteps = $('.process-step').length;
|
|
var completedSteps = $('.process-step.completed').length;
|
|
var progress = (completedSteps / totalSteps) * 100;
|
|
|
|
$('.progress-fill').css('width', progress + '%');
|
|
$('.progress-text').text('Step ' + (completedSteps + 1) + ' of ' + totalSteps + ' - ' +
|
|
$('.process-step.active .step-title').text());
|
|
}
|
|
|
|
// Add processing note
|
|
$('.processing-notes .btn-primary').click(function() {
|
|
var noteText = $(this).siblings('textarea').val();
|
|
if (noteText.trim()) {
|
|
var noteHtml = `
|
|
<div class="note-item">
|
|
<div class="note-header">
|
|
<div class="note-author">Current User</div>
|
|
<div class="note-time">${new Date().toLocaleString()}</div>
|
|
</div>
|
|
<div class="note-content">${noteText}</div>
|
|
</div>
|
|
`;
|
|
$(this).closest('.form-group').before(noteHtml);
|
|
$(this).siblings('textarea').val('');
|
|
}
|
|
});
|
|
|
|
// Action buttons
|
|
$('#proceedNext').click(function() {
|
|
alert('Proceeding to next processing step...');
|
|
});
|
|
|
|
$('#holdProcessing').click(function() {
|
|
if (confirm('Are you sure you want to hold processing for this specimen?')) {
|
|
alert('Processing has been placed on hold.');
|
|
}
|
|
});
|
|
|
|
$('#rejectSpecimen').click(function() {
|
|
if (confirm('Are you sure you want to reject this specimen? This action cannot be undone.')) {
|
|
alert('Specimen has been rejected.');
|
|
}
|
|
});
|
|
|
|
$('#requestConsult').click(function() {
|
|
alert('Consultation request has been sent to the pathologist.');
|
|
});
|
|
|
|
// Header buttons
|
|
$('#printLabels').click(function() {
|
|
alert('Printing specimen labels...');
|
|
});
|
|
|
|
$('#flagIssue').click(function() {
|
|
var issue = prompt('Please describe the issue:');
|
|
if (issue) {
|
|
alert('Issue has been flagged: ' + issue);
|
|
}
|
|
});
|
|
|
|
$('#completeProcessing').click(function() {
|
|
if (confirm('Are you sure you want to complete processing for this specimen?')) {
|
|
alert('Processing completed successfully!');
|
|
}
|
|
});
|
|
|
|
// Quick actions
|
|
$('.process-card .btn').click(function() {
|
|
var action = $(this).text().trim();
|
|
alert('Executing: ' + action);
|
|
});
|
|
|
|
// Test status updates (simulate real-time updates)
|
|
setInterval(function() {
|
|
$('.test-status.status-processing').each(function() {
|
|
if (Math.random() > 0.7) {
|
|
$(this).removeClass('status-processing').addClass('status-completed').text('Completed');
|
|
}
|
|
});
|
|
}, 5000);
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|