Marwan Alwali 0422966e14 update
2025-08-30 19:32:46 +03:00

692 lines
25 KiB
HTML

{% extends 'base.html' %}
{% load static %}
{% block title %}{{ equipment.name }} - Equipment Details{% endblock %}
{% block extra_css %}
<style>
.equipment-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 0.5rem;
padding: 2rem;
margin-bottom: 2rem;
}
.equipment-image {
width: 100%;
max-width: 400px;
height: 300px;
object-fit: cover;
border-radius: 0.375rem;
border: 3px solid white;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.info-section {
background: white;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
}
.section-header {
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
padding: 1rem 1.5rem;
font-weight: 600;
color: #495057;
}
.section-content {
padding: 1.5rem;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.info-item {
display: flex;
flex-direction: column;
}
.info-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: 600;
margin-bottom: 0.25rem;
}
.info-value {
color: #495057;
font-weight: 500;
}
.status-indicator {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
margin-right: 0.5rem;
}
.status-available { background-color: #28a745; }
.status-in-use { background-color: #007bff; }
.status-maintenance { background-color: #ffc107; }
.status-out-of-order { background-color: #dc3545; }
.status-reserved { background-color: #6f42c1; }
.maintenance-timeline {
position: relative;
padding-left: 2rem;
}
.timeline-item {
position: relative;
padding-bottom: 1.5rem;
border-left: 2px solid #dee2e6;
margin-left: 0.5rem;
}
.timeline-item:last-child {
border-left: none;
}
.timeline-marker {
position: absolute;
left: -6px;
top: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: #007bff;
border: 2px solid white;
box-shadow: 0 0 0 2px #007bff;
}
.timeline-content {
margin-left: 1rem;
}
.timeline-date {
font-size: 0.875rem;
color: #6c757d;
font-weight: 600;
}
.timeline-title {
font-weight: 600;
color: #495057;
margin-bottom: 0.25rem;
}
.timeline-description {
color: #6c757d;
font-size: 0.875rem;
}
.usage-chart {
height: 300px;
margin-bottom: 1rem;
}
.qr-code-section {
text-align: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
}
.qr-code {
width: 150px;
height: 150px;
margin: 0 auto 1rem;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.alert-maintenance {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 0.25rem;
padding: 1rem;
margin-bottom: 1.5rem;
}
.specifications-table {
width: 100%;
margin-bottom: 0;
}
.specifications-table th {
background: #f8f9fa;
font-weight: 600;
color: #495057;
border-bottom: 2px solid #dee2e6;
padding: 0.75rem;
}
.specifications-table td {
padding: 0.75rem;
border-bottom: 1px solid #dee2e6;
}
@media (max-width: 768px) {
.equipment-header {
padding: 1.5rem;
}
.info-grid {
grid-template-columns: 1fr;
}
.section-content {
padding: 1rem;
}
}
</style>
{% endblock %}
{% block content %}
<div id="content" class="app-content">
<!-- Page Header -->
<div class="d-flex align-items-center mb-3">
<div>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'operating_theatre:dashboard' %}">Operating Theatre</a></li>
<li class="breadcrumb-item"><a href="{% url 'operating_theatre:equipment_list' %}">Equipment</a></li>
<li class="breadcrumb-item active">{{ equipment.name }}</li>
</ol>
<h1 class="page-header mb-0">
<i class="fas fa-tools me-2"></i>{{ equipment.name }}
</h1>
</div>
<div class="ms-auto">
<div class="btn-group">
<a href="{% url 'operating_theatre:equipment_edit' equipment.pk %}" class="btn btn-primary">
<i class="fas fa-edit me-1"></i>Edit
</a>
<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
<i class="fas fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#" onclick="scheduleMaintenance()">
<i class="fas fa-wrench me-2"></i>Schedule Maintenance
</a>
</li>
<li>
<a class="dropdown-item" href="#" onclick="generateQR()">
<i class="fas fa-qrcode me-2"></i>Generate QR Code
</a>
</li>
<li>
<a class="dropdown-item" href="#" onclick="printDetails()">
<i class="fas fa-print me-2"></i>Print Details
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item text-danger" href="#" onclick="reportIssue()">
<i class="fas fa-exclamation-triangle me-2"></i>Report Issue
</a>
</li>
</ul>
</div>
<a href="{% url 'operating_theatre:equipment_list' %}" class="btn btn-outline-secondary ms-2">
<i class="fas fa-arrow-left me-1"></i>Back to List
</a>
</div>
</div>
<!-- Equipment Header -->
<div class="equipment-header">
<div class="row">
<div class="col-md-8">
<div class="d-flex align-items-center mb-3">
<div>
<span class="status-indicator status-{{ equipment.status }}"></span>
{% if equipment.status == 'available' %}
<span class="badge bg-success me-2">Available</span>
{% elif equipment.status == 'in_use' %}
<span class="badge bg-primary me-2">In Use</span>
{% elif equipment.status == 'maintenance' %}
<span class="badge bg-warning me-2">Maintenance</span>
{% elif equipment.status == 'out_of_order' %}
<span class="badge bg-danger me-2">Out of Order</span>
{% elif equipment.status == 'reserved' %}
<span class="badge bg-info me-2">Reserved</span>
{% endif %}
<span class="badge bg-light text-dark">{{ equipment.get_category_display }}</span>
</div>
</div>
<h2 class="mb-2">{{ equipment.name }}</h2>
<p class="mb-3">{{ equipment.description|default:"No description available" }}</p>
<div class="row">
<div class="col-md-6">
<div class="mb-2">
<strong>Serial Number:</strong> {{ equipment.serial_number }}
</div>
<div class="mb-2">
<strong>Manufacturer:</strong> {{ equipment.manufacturer }}
</div>
<div class="mb-2">
<strong>Model:</strong> {{ equipment.model }}
</div>
</div>
<div class="col-md-6">
<div class="mb-2">
<strong>Location:</strong>
{% if equipment.current_location %}
{{ equipment.current_location.name }}
{% else %}
<span class="text-muted">Not assigned</span>
{% endif %}
</div>
<div class="mb-2">
<strong>Purchase Date:</strong>
{% if equipment.purchase_date %}
{{ equipment.purchase_date|date:"M d, Y" }}
{% else %}
<span class="text-muted">Not recorded</span>
{% endif %}
</div>
<div class="mb-2">
<strong>Warranty Expires:</strong>
{% if equipment.warranty_expiry %}
{{ equipment.warranty_expiry|date:"M d, Y" }}
{% else %}
<span class="text-muted">Not recorded</span>
{% endif %}
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
{% if equipment.image %}
<img src="{{ equipment.image.url }}" alt="{{ equipment.name }}" class="equipment-image">
{% else %}
<div class="equipment-image bg-light d-flex align-items-center justify-content-center">
<i class="fas fa-tools fa-4x text-muted"></i>
</div>
{% endif %}
</div>
</div>
</div>
<!-- Maintenance Alert -->
{% if equipment.maintenance_due %}
<div class="alert-maintenance">
<h6 class="mb-2">
<i class="fas fa-exclamation-triangle me-2"></i>Maintenance Due
</h6>
<p class="mb-0">
This equipment is due for maintenance. Last maintenance was on
{% if equipment.last_maintenance_date %}
{{ equipment.last_maintenance_date|date:"M d, Y" }}
{% else %}
never
{% endif %}.
</p>
</div>
{% endif %}
<div class="row">
<!-- Equipment Information -->
<div class="col-lg-8">
<!-- Basic Information -->
<div class="info-section">
<div class="section-header">
<i class="fas fa-info-circle me-2"></i>Equipment Information
</div>
<div class="section-content">
<div class="info-grid">
<div class="info-item">
<div class="info-label">Equipment ID</div>
<div class="info-value">{{ equipment.equipment_id|default:"Not assigned" }}</div>
</div>
<div class="info-item">
<div class="info-label">Asset Tag</div>
<div class="info-value">{{ equipment.asset_tag|default:"Not assigned" }}</div>
</div>
<div class="info-item">
<div class="info-label">Category</div>
<div class="info-value">{{ equipment.get_category_display }}</div>
</div>
<div class="info-item">
<div class="info-label">Current Status</div>
<div class="info-value">
<span class="status-indicator status-{{ equipment.status }}"></span>
{{ equipment.get_status_display }}
</div>
</div>
<div class="info-item">
<div class="info-label">Purchase Cost</div>
<div class="info-value">
{% if equipment.purchase_cost %}
${{ equipment.purchase_cost|floatformat:2 }}
{% else %}
<span class="text-muted">Not recorded</span>
{% endif %}
</div>
</div>
<div class="info-item">
<div class="info-label">Depreciation</div>
<div class="info-value">
{% if equipment.depreciation_rate %}
{{ equipment.depreciation_rate }}% per year
{% else %}
<span class="text-muted">Not set</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- Technical Specifications -->
{% if equipment.specifications %}
<div class="info-section">
<div class="section-header">
<i class="fas fa-cogs me-2"></i>Technical Specifications
</div>
<div class="section-content">
<table class="specifications-table table">
<thead>
<tr>
<th>Specification</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for spec, value in equipment.specifications.items %}
<tr>
<td>{{ spec|title }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
<!-- Maintenance History -->
<div class="info-section">
<div class="section-header">
<i class="fas fa-history me-2"></i>Maintenance History
</div>
<div class="section-content">
{% if equipment.maintenance_records.all %}
<div class="maintenance-timeline">
{% for record in equipment.maintenance_records.all %}
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<div class="timeline-date">{{ record.date|date:"M d, Y" }}</div>
<div class="timeline-title">{{ record.maintenance_type|title }}</div>
<div class="timeline-description">
{{ record.description|default:"No description provided" }}
{% if record.performed_by %}
<br><small class="text-muted">Performed by: {{ record.performed_by.get_full_name }}</small>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-4">
<i class="fas fa-wrench fa-2x text-muted mb-3"></i>
<p class="text-muted">No maintenance records found</p>
<button class="btn btn-primary" onclick="scheduleMaintenance()">
<i class="fas fa-plus me-1"></i>Schedule First Maintenance
</button>
</div>
{% endif %}
</div>
</div>
<!-- Usage Statistics -->
<div class="info-section">
<div class="section-header">
<i class="fas fa-chart-line me-2"></i>Usage Statistics
</div>
<div class="section-content">
<div class="usage-chart">
<canvas id="usageChart"></canvas>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="mb-2">
<strong class="text-primary">{{ equipment.total_usage_hours|default:0 }}</strong>
</div>
<div class="text-muted small">Total Hours</div>
</div>
<div class="col-md-3">
<div class="mb-2">
<strong class="text-success">{{ equipment.monthly_usage_hours|default:0 }}</strong>
</div>
<div class="text-muted small">This Month</div>
</div>
<div class="col-md-3">
<div class="mb-2">
<strong class="text-warning">{{ equipment.utilization_rate|default:0 }}%</strong>
</div>
<div class="text-muted small">Utilization</div>
</div>
<div class="col-md-3">
<div class="mb-2">
<strong class="text-info">{{ equipment.efficiency_score|default:0 }}%</strong>
</div>
<div class="text-muted small">Efficiency</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<!-- QR Code -->
<div class="qr-code-section">
<h6 class="mb-3">Equipment QR Code</h6>
<div class="qr-code">
{% if equipment.qr_code %}
<img src="{{ equipment.qr_code.url }}" alt="QR Code" style="width: 100%; height: 100%;">
{% else %}
<i class="fas fa-qrcode fa-3x text-muted"></i>
{% endif %}
</div>
<button class="btn btn-outline-primary btn-sm" onclick="generateQR()">
<i class="fas fa-download me-1"></i>Download QR Code
</button>
</div>
<!-- Quick Actions -->
<div class="info-section">
<div class="section-header">
<i class="fas fa-bolt me-2"></i>Quick Actions
</div>
<div class="section-content">
<div class="d-grid gap-2">
{% if equipment.status == 'available' %}
<button class="btn btn-success" onclick="reserveEquipment()">
<i class="fas fa-lock me-1"></i>Reserve Equipment
</button>
{% elif equipment.status == 'reserved' %}
<button class="btn btn-warning" onclick="releaseEquipment()">
<i class="fas fa-unlock me-1"></i>Release Reservation
</button>
{% endif %}
<button class="btn btn-primary" onclick="scheduleMaintenance()">
<i class="fas fa-wrench me-1"></i>Schedule Maintenance
</button>
<button class="btn btn-outline-secondary" onclick="viewHistory()">
<i class="fas fa-history me-1"></i>View Full History
</button>
<button class="btn btn-outline-danger" onclick="reportIssue()">
<i class="fas fa-exclamation-triangle me-1"></i>Report Issue
</button>
</div>
</div>
</div>
<!-- Current Assignment -->
{% if equipment.current_assignment %}
<div class="info-section">
<div class="section-header">
<i class="fas fa-user-md me-2"></i>Current Assignment
</div>
<div class="section-content">
<div class="mb-2">
<strong>Assigned to:</strong> {{ equipment.current_assignment.assigned_to.get_full_name }}
</div>
<div class="mb-2">
<strong>Since:</strong> {{ equipment.current_assignment.assigned_date|date:"M d, Y" }}
</div>
<div class="mb-2">
<strong>Purpose:</strong> {{ equipment.current_assignment.purpose|default:"General use" }}
</div>
{% if equipment.current_assignment.expected_return %}
<div class="mb-2">
<strong>Expected Return:</strong> {{ equipment.current_assignment.expected_return|date:"M d, Y" }}
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Related Documents -->
{% if equipment.documents.all %}
<div class="info-section">
<div class="section-header">
<i class="fas fa-file-alt me-2"></i>Related Documents
</div>
<div class="section-content">
{% for document in equipment.documents.all %}
<div class="d-flex justify-content-between align-items-center mb-2">
<div>
<div class="fw-bold">{{ document.name }}</div>
<small class="text-muted">{{ document.document_type|title }}</small>
</div>
<a href="{{ document.file.url }}" class="btn btn-outline-primary btn-sm" target="_blank">
<i class="fas fa-download"></i>
</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Usage Chart
const ctx = document.getElementById('usageChart').getContext('2d');
const usageChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ equipment.usage_chart_labels|safe }},
datasets: [{
label: 'Usage Hours',
data: {{ equipment.usage_chart_data|safe }},
borderColor: '#007bff',
backgroundColor: 'rgba(0, 123, 255, 0.1)',
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
function reserveEquipment() {
if (confirm('Reserve this equipment?')) {
$.ajax({
url: '{% url "operating_theatre:equipment_reserve" equipment.pk %}',
method: 'POST',
data: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
if (response.success) {
location.reload();
} else {
alert('Error reserving equipment: ' + response.error);
}
},
error: function() {
alert('Error reserving equipment');
}
});
}
}
function releaseEquipment() {
if (confirm('Release this equipment reservation?')) {
$.ajax({
url: '{% url "operating_theatre:equipment_release" equipment.pk %}',
method: 'POST',
data: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
if (response.success) {
location.reload();
} else {
alert('Error releasing equipment: ' + response.error);
}
},
error: function() {
alert('Error releasing equipment');
}
});
}
}
function scheduleMaintenance() {
window.location.href = '{% url "operating_theatre:equipment_maintenance_schedule" equipment.pk %}';
}
function generateQR() {
window.open('{% url "operating_theatre:equipment_qr_code" equipment.pk %}', '_blank');
}
function viewHistory() {
window.location.href = '{% url "operating_theatre:equipment_history" equipment.pk %}';
}
function reportIssue() {
window.location.href = '{% url "operating_theatre:equipment_report_issue" equipment.pk %}';
}
function printDetails() {
window.print();
}
</script>
{% endblock %}