625 lines
30 KiB
HTML
625 lines
30 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Prescription {{ prescription.prescription_number }} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1">
|
|
<i class="fas fa-prescription-bottle-alt me-2"></i>Prescription {{ prescription.prescription_number }}
|
|
</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'pharmacy:dashboard' %}">Pharmacy</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'pharmacy:prescription_list' %}">Prescriptions</a></li>
|
|
<li class="breadcrumb-item active">{{ prescription.prescription_number }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-print me-2"></i>Print
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="?print=label"><i class="fas fa-tag me-2"></i>Prescription Label</a></li>
|
|
<li><a class="dropdown-item" href="?print=receipt"><i class="fas fa-receipt me-2"></i>Patient Receipt</a></li>
|
|
<li><a class="dropdown-item" href="?print=full"><i class="fas fa-file-alt me-2"></i>Full Details</a></li>
|
|
</ul>
|
|
{% if prescription.status == 'PENDING' %}
|
|
<button type="button" class="btn btn-success" onclick="verifyPrescription()">
|
|
<i class="fas fa-check me-2"></i>Verify
|
|
</button>
|
|
{% elif prescription.status == 'VERIFIED' %}
|
|
<button type="button" class="btn btn-primary" onclick="dispenseMedication()">
|
|
<i class="fas fa-pills me-2"></i>Dispense
|
|
</button>
|
|
{% endif %}
|
|
<a href="{% url 'pharmacy:prescription_edit' prescription.pk %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Alert -->
|
|
{% if prescription.status == 'PENDING' %}
|
|
<div class="alert alert-warning d-flex align-items-center mb-4">
|
|
<i class="fas fa-exclamation-triangle me-3"></i>
|
|
<div>
|
|
<strong>Pending Verification</strong> - This prescription requires pharmacist verification before dispensing.
|
|
</div>
|
|
</div>
|
|
{% elif prescription.status == 'EXPIRED' %}
|
|
<div class="alert alert-danger d-flex align-items-center mb-4">
|
|
<i class="fas fa-calendar-times me-3"></i>
|
|
<div>
|
|
<strong>Expired Prescription</strong> - This prescription expired on {{ prescription.expiration_date }}.
|
|
</div>
|
|
</div>
|
|
{% elif prescription.is_expired %}
|
|
<div class="alert alert-warning d-flex align-items-center mb-4">
|
|
<i class="fas fa-clock me-3"></i>
|
|
<div>
|
|
<strong>Expiring Soon</strong> - This prescription will expire on {{ prescription.expiration_date }}.
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<!-- Main Prescription Information -->
|
|
<div class="col-lg-8">
|
|
<!-- Prescription Overview -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>Prescription Overview
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Prescription Number</label>
|
|
<div class="fw-bold text-primary">{{ prescription.prescription_number }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Status</label>
|
|
<div>
|
|
{% if prescription.status == 'PENDING' %}
|
|
<span class="badge bg-warning text-dark fs-6">Pending Verification</span>
|
|
{% elif prescription.status == 'VERIFIED' %}
|
|
<span class="badge bg-info fs-6">Verified - Ready to Dispense</span>
|
|
{% elif prescription.status == 'DISPENSED' %}
|
|
<span class="badge bg-success fs-6">Dispensed</span>
|
|
{% elif prescription.status == 'COMPLETED' %}
|
|
<span class="badge bg-secondary fs-6">Completed</span>
|
|
{% elif prescription.status == 'CANCELLED' %}
|
|
<span class="badge bg-danger fs-6">Cancelled</span>
|
|
{% elif prescription.status == 'EXPIRED' %}
|
|
<span class="badge bg-dark fs-6">Expired</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary fs-6">{{ prescription.get_status_display }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Date Prescribed</label>
|
|
<div>{{ prescription.date_prescribed|date:"M d, Y g:i A" }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Expiration Date</label>
|
|
<div>{{ prescription.expiration_date|date:"M d, Y" }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Electronic Prescription</label>
|
|
<div>
|
|
{% if prescription.electronic_prescription %}
|
|
<span class="badge bg-success">Yes</span>
|
|
{% if prescription.e_prescription_id %}
|
|
<small class="text-muted d-block">ID: {{ prescription.e_prescription_id }}</small>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="badge bg-secondary">No</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if prescription.prior_authorization_required %}
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Prior Authorization</label>
|
|
<div>
|
|
<span class="badge bg-warning text-dark">Required</span>
|
|
{% if prescription.prior_authorization_number %}
|
|
<small class="text-muted d-block">Number: {{ prescription.prior_authorization_number }}</small>
|
|
{% endif %}
|
|
{% if prescription.prior_authorization_expiry %}
|
|
<small class="text-muted d-block">Expires: {{ prescription.prior_authorization_expiry|date:"M d, Y" }}</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Generic Substitution</label>
|
|
<div>
|
|
{% if prescription.dispense_as_written %}
|
|
<span class="badge bg-danger">Dispense As Written (DAW)</span>
|
|
{% elif prescription.generic_substitution_allowed %}
|
|
<span class="badge bg-success">Allowed</span>
|
|
{% else %}
|
|
<span class="badge bg-warning text-dark">Not Allowed</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Medication Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-pills me-2"></i>Medication Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="d-flex align-items-start mb-3">
|
|
<div class="me-3 mt-1">
|
|
{% if prescription.medication.is_controlled_substance %}
|
|
<i class="fas fa-shield-alt text-warning fa-2x" title="Controlled Substance"></i>
|
|
{% else %}
|
|
<i class="fas fa-pills text-primary fa-2x"></i>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h4 class="mb-1">{{ prescription.medication.generic_name }}</h4>
|
|
{% if prescription.medication.brand_name %}
|
|
<p class="text-muted mb-1">Brand: {{ prescription.medication.brand_name }}</p>
|
|
{% endif %}
|
|
<p class="mb-1"><strong>Strength:</strong> {{ prescription.medication.strength }} {{ prescription.medication.get_unit_of_measure_display }}</p>
|
|
<p class="mb-1"><strong>Form:</strong> {{ prescription.medication.get_dosage_form_display }}</p>
|
|
{% if prescription.medication.ndc_number %}
|
|
<p class="mb-0"><strong>NDC:</strong> {{ prescription.medication.ndc_number }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if prescription.medication.is_controlled_substance %}
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-shield-alt me-2"></i>
|
|
<strong>Controlled Substance:</strong> {{ prescription.medication.get_controlled_substance_schedule_display }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="bg-light p-3 rounded">
|
|
<h6 class="fw-semibold mb-2">Drug Classification</h6>
|
|
<p class="mb-1"><strong>Class:</strong> {{ prescription.medication.drug_class }}</p>
|
|
<p class="mb-1"><strong>Formulary:</strong>
|
|
<span class="badge bg-{% if prescription.medication.formulary_status == 'PREFERRED' %}success{% elif prescription.medication.formulary_status == 'RESTRICTED' %}danger{% else %}warning{% endif %}">
|
|
{{ prescription.medication.get_formulary_status_display }}
|
|
</span>
|
|
</p>
|
|
{% if prescription.medication.manufacturer %}
|
|
<p class="mb-0"><strong>Manufacturer:</strong> {{ prescription.medication.manufacturer }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dosing Instructions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-clipboard-list me-2"></i>Dosing Instructions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Quantity Prescribed</label>
|
|
<div class="fs-5 fw-bold text-primary">
|
|
{{ prescription.quantity_prescribed }} {{ prescription.get_quantity_unit_display }}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Frequency</label>
|
|
<div>{{ prescription.frequency }}</div>
|
|
</div>
|
|
{% if prescription.duration %}
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Duration</label>
|
|
<div>{{ prescription.duration }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Refills</label>
|
|
<div>
|
|
<span class="fs-5 fw-bold">{{ prescription.refills_remaining }}</span> of {{ prescription.refills_authorized }} remaining
|
|
{% if prescription.refills_remaining == 0 %}
|
|
<span class="badge bg-warning text-dark ms-2">No Refills</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if prescription.indication %}
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Indication</label>
|
|
<div>{{ prescription.indication }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<label class="form-label fw-semibold">Dosage Instructions (SIG)</label>
|
|
<div class="p-3 bg-light rounded">
|
|
<div class="fw-medium">{{ prescription.dosage_instructions }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if prescription.patient_instructions %}
|
|
<div class="mt-3">
|
|
<label class="form-label fw-semibold">Patient Instructions</label>
|
|
<div class="p-3 bg-info bg-opacity-10 rounded">
|
|
<div>{{ prescription.patient_instructions }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if prescription.pharmacy_notes %}
|
|
<div class="mt-3">
|
|
<label class="form-label fw-semibold">Pharmacy Notes</label>
|
|
<div class="p-3 bg-warning bg-opacity-10 rounded">
|
|
<div>{{ prescription.pharmacy_notes }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drug Interactions -->
|
|
{% if drug_interactions %}
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-warning bg-opacity-10">
|
|
<h5 class="mb-0 text-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>Drug Interactions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for interaction in drug_interactions %}
|
|
<div class="alert alert-{% if interaction.severity == 'CRITICAL' %}danger{% elif interaction.severity == 'HIGH' %}warning{% else %}info{% endif %} mb-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="alert-heading">{{ interaction.get_severity_display }} Interaction</h6>
|
|
<p class="mb-1"><strong>With:</strong> {{ interaction.interacting_medication.display_name }}</p>
|
|
<p class="mb-0">{{ interaction.description }}</p>
|
|
</div>
|
|
<span class="badge bg-{% if interaction.severity == 'CRITICAL' %}danger{% elif interaction.severity == 'HIGH' %}warning{% else %}info{% endif %}">
|
|
{{ interaction.get_severity_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Dispense History -->
|
|
{% if dispense_records %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-history me-2"></i>Dispense History
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Date Dispensed</th>
|
|
<th>Quantity</th>
|
|
<th>Days Supply</th>
|
|
<th>Dispensed By</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for record in dispense_records %}
|
|
<tr>
|
|
<td>{{ record.dispensed_datetime|date:"M d, Y g:i A" }}</td>
|
|
<td>{{ record.quantity_dispensed }} {{ record.get_quantity_unit_display }}</td>
|
|
<td>{{ record.days_supply }} days</td>
|
|
<td>{{ record.dispensed_by.get_full_name }}</td>
|
|
<td>
|
|
<span class="badge bg-{% if record.status == 'DISPENSED' %}success{% elif record.status == 'PARTIAL' %}warning{% else %}secondary{% endif %}">
|
|
{{ record.get_status_display }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Patient Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-user me-2"></i>Patient Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="avatar-circle bg-primary text-white me-3">
|
|
{{ prescription.patient.first_name.0 }}{{ prescription.patient.last_name.0 }}
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">{{ prescription.patient.get_full_name }}</h6>
|
|
<small class="text-muted">MRN: {{ prescription.patient.mrn }}</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<strong>DOB:</strong> {{ prescription.patient.date_of_birth|date:"M d, Y" }}
|
|
<small class="text-muted">({{ prescription.patient.age }} years old)</small>
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Gender:</strong> {{ prescription.patient.get_gender_display }}
|
|
</div>
|
|
{% if prescription.patient.phone %}
|
|
<div class="mb-2">
|
|
<strong>Phone:</strong> {{ prescription.patient.phone }}
|
|
</div>
|
|
{% endif %}
|
|
{% if prescription.patient.email %}
|
|
<div class="mb-2">
|
|
<strong>Email:</strong> {{ prescription.patient.email }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-3">
|
|
<a href="{% url 'patients:patient_detail' prescription.patient.pk %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-user me-2"></i>View Patient Profile
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prescriber Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-user-md me-2"></i>Prescriber Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="avatar-circle bg-success text-white me-3">
|
|
{{ prescription.prescriber.first_name.0 }}{{ prescription.prescriber.last_name.0 }}
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">{{ prescription.prescriber.get_full_name }}</h6>
|
|
<small class="text-muted">{{ prescription.prescriber.profile.title|default:"Physician" }}</small>
|
|
</div>
|
|
</div>
|
|
|
|
{% if prescription.prescriber.profile.license_number %}
|
|
<div class="mb-2">
|
|
<strong>License:</strong> {{ prescription.prescriber.profile.license_number }}
|
|
</div>
|
|
{% endif %}
|
|
{% if prescription.prescriber.profile.dea_number %}
|
|
<div class="mb-2">
|
|
<strong>DEA:</strong> {{ prescription.prescriber.profile.dea_number }}
|
|
</div>
|
|
{% endif %}
|
|
{% if prescription.prescriber.profile.npi_number %}
|
|
<div class="mb-2">
|
|
<strong>NPI:</strong> {{ prescription.prescriber.profile.npi_number }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verification Information -->
|
|
{% if prescription.verified %}
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-success bg-opacity-10">
|
|
<h5 class="mb-0 text-success">
|
|
<i class="fas fa-check-circle me-2"></i>Verification
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<strong>Verified By:</strong> {{ prescription.verified_by.get_full_name }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Verified On:</strong> {{ prescription.verified_datetime|date:"M d, Y g:i A" }}
|
|
</div>
|
|
<span class="badge bg-success">Verified</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-bolt me-2"></i>Quick Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
{% if prescription.status == 'PENDING' %}
|
|
<button type="button" class="btn btn-success" onclick="verifyPrescription()">
|
|
<i class="fas fa-check me-2"></i>Verify Prescription
|
|
</button>
|
|
{% elif prescription.status == 'VERIFIED' %}
|
|
<button type="button" class="btn btn-primary" onclick="dispenseMedication()">
|
|
<i class="fas fa-pills me-2"></i>Dispense Medication
|
|
</button>
|
|
{% endif %}
|
|
|
|
<button type="button" class="btn btn-outline-secondary" onclick="checkInteractions()">
|
|
<i class="fas fa-search me-2"></i>Check Interactions
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-outline-info" onclick="viewMedicationInfo()">
|
|
<i class="fas fa-info-circle me-2"></i>Medication Info
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-outline-warning" onclick="contactPrescriber()">
|
|
<i class="fas fa-phone me-2"></i>Contact Prescriber
|
|
</button>
|
|
|
|
{% if prescription.refills_remaining > 0 %}
|
|
<button type="button" class="btn btn-outline-primary" onclick="processRefill()">
|
|
<i class="fas fa-redo me-2"></i>Process Refill
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function verifyPrescription() {
|
|
if (confirm('Verify this prescription? This will mark it as ready for dispensing.')) {
|
|
// Implement verification logic
|
|
fetch(`{% url 'pharmacy:verify_prescription' prescription.pk %}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error verifying prescription: ' + data.error);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function dispenseMedication() {
|
|
// Open dispense modal or redirect to dispense page
|
|
window.location.href = `{% url 'pharmacy:dispense_medication' prescription.pk %}`;
|
|
}
|
|
|
|
function checkInteractions() {
|
|
// Check for drug interactions
|
|
fetch(`{% url 'pharmacy:drug_interaction_check' prescription.pk %}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.interactions && data.interactions.length > 0) {
|
|
let message = 'Drug Interactions Found:\n\n';
|
|
data.interactions.forEach(interaction => {
|
|
message += `${interaction.severity}: ${interaction.description}\n`;
|
|
});
|
|
alert(message);
|
|
} else {
|
|
alert('No drug interactions found.');
|
|
}
|
|
});
|
|
}
|
|
|
|
function viewMedicationInfo() {
|
|
window.open(`{% url 'pharmacy:medication_detail' prescription.medication.pk %}`, '_blank');
|
|
}
|
|
|
|
function contactPrescriber() {
|
|
// Implement prescriber contact functionality
|
|
alert('Contact prescriber functionality would be implemented here.');
|
|
}
|
|
|
|
function processRefill() {
|
|
if (confirm('Process a refill for this prescription?')) {
|
|
// Implement refill logic
|
|
alert('Refill processing functionality would be implemented here.');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.avatar-circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 0.375rem;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.fw-semibold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|