WIP compliance
This commit is contained in:
+529
-5
@@ -2,6 +2,7 @@ const API_URL = '/api';
|
||||
let allDrugs = [];
|
||||
let currentDrug = null;
|
||||
let showLowStockOnly = false;
|
||||
let selectedLocationFilter = '';
|
||||
let searchTerm = '';
|
||||
let expandedDrugs = new Set();
|
||||
let currentUser = null;
|
||||
@@ -91,6 +92,11 @@ function showMainApp() {
|
||||
adminBtn.style.display = currentUser.role === 'admin' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
const locationsBtn = document.getElementById('locationsBtn');
|
||||
if (locationsBtn) {
|
||||
locationsBtn.style.display = currentUser.role === 'admin' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// Hide action buttons for read-only users
|
||||
const isReadOnly = currentUser.role === 'readonly';
|
||||
const addDrugBtn = document.getElementById('addDrugBtn');
|
||||
@@ -200,6 +206,7 @@ function setupEventListeners() {
|
||||
const prescribeModal = document.getElementById('prescribeModal');
|
||||
const editModal = document.getElementById('editModal');
|
||||
const printNotesModal = document.getElementById('printNotesModal');
|
||||
const batchReceiveModal = document.getElementById('batchReceiveModal');
|
||||
const addDrugBtn = document.getElementById('addDrugBtn');
|
||||
const dispenseBtn = document.getElementById('dispenseBtn');
|
||||
const printNotesBtn = document.getElementById('printNotesBtn');
|
||||
@@ -209,10 +216,13 @@ function setupEventListeners() {
|
||||
const cancelDispenseBtn = document.getElementById('cancelDispenseBtn');
|
||||
const cancelPrescribeBtn = document.getElementById('cancelPrescribeBtn');
|
||||
const cancelEditBtn = document.getElementById('cancelEditBtn');
|
||||
const cancelBatchReceiveBtn = document.getElementById('cancelBatchReceiveBtn');
|
||||
const showAllBtn = document.getElementById('showAllBtn');
|
||||
const showLowStockBtn = document.getElementById('showLowStockBtn');
|
||||
const locationFilterSelect = document.getElementById('locationFilterSelect');
|
||||
const userMenuBtn = document.getElementById('userMenuBtn');
|
||||
const adminBtn = document.getElementById('adminBtn');
|
||||
const locationsBtn = document.getElementById('locationsBtn');
|
||||
const logoutBtn = document.getElementById('logoutBtn');
|
||||
const changePasswordBtn = document.getElementById('changePasswordBtn');
|
||||
|
||||
@@ -227,6 +237,10 @@ function setupEventListeners() {
|
||||
if (editForm) editForm.addEventListener('submit', handleEditDrug);
|
||||
if (printNotesForm) printNotesForm.addEventListener('submit', handlePrintNotes);
|
||||
|
||||
const batchReceiveForm = document.getElementById('batchReceiveForm');
|
||||
if (batchReceiveForm) batchReceiveForm.addEventListener('submit', handleBatchReceive);
|
||||
if (cancelBatchReceiveBtn) cancelBatchReceiveBtn.addEventListener('click', () => closeModal(batchReceiveModal));
|
||||
|
||||
if (addDrugBtn) addDrugBtn.addEventListener('click', () => openModal(addModal));
|
||||
if (printNotesBtn) printNotesBtn.addEventListener('click', () => openModal(printNotesModal));
|
||||
if (dispenseBtn) dispenseBtn.addEventListener('click', () => {
|
||||
@@ -250,6 +264,12 @@ function setupEventListeners() {
|
||||
const closeUserManagementBtn = document.getElementById('closeUserManagementBtn');
|
||||
if (closeUserManagementBtn) closeUserManagementBtn.addEventListener('click', () => closeModal(document.getElementById('userManagementModal')));
|
||||
|
||||
const closeLocationManagementBtn = document.getElementById('closeLocationManagementBtn');
|
||||
if (closeLocationManagementBtn) closeLocationManagementBtn.addEventListener('click', () => closeModal(document.getElementById('locationManagementModal')));
|
||||
|
||||
const createLocationForm = document.getElementById('createLocationForm');
|
||||
if (createLocationForm) createLocationForm.addEventListener('submit', createLocation);
|
||||
|
||||
const changePasswordForm = document.getElementById('changePasswordForm');
|
||||
if (changePasswordForm) changePasswordForm.addEventListener('submit', handleChangePassword);
|
||||
|
||||
@@ -277,6 +297,10 @@ function setupEventListeners() {
|
||||
updateFilterButtons();
|
||||
renderDrugs();
|
||||
});
|
||||
if (locationFilterSelect) locationFilterSelect.addEventListener('change', (e) => {
|
||||
selectedLocationFilter = e.target.value;
|
||||
renderDrugs();
|
||||
});
|
||||
|
||||
// User menu
|
||||
if (userMenuBtn) userMenuBtn.addEventListener('click', () => {
|
||||
@@ -286,6 +310,7 @@ function setupEventListeners() {
|
||||
|
||||
if (changePasswordBtn) changePasswordBtn.addEventListener('click', openChangePasswordModal);
|
||||
if (adminBtn) adminBtn.addEventListener('click', openUserManagement);
|
||||
if (locationsBtn) locationsBtn.addEventListener('click', openLocationManagement);
|
||||
if (logoutBtn) logoutBtn.addEventListener('click', handleLogout);
|
||||
|
||||
// Search functionality
|
||||
@@ -315,7 +340,8 @@ async function loadDrugs() {
|
||||
const response = await apiCall('/drugs');
|
||||
if (!response.ok) throw new Error('Failed to load drugs');
|
||||
allDrugs = await response.json();
|
||||
|
||||
|
||||
updateLocationFilterOptions();
|
||||
renderDrugs();
|
||||
updateDispenseDrugSelect();
|
||||
} catch (error) {
|
||||
@@ -367,6 +393,262 @@ function updateDispenseDrugSelect() {
|
||||
});
|
||||
}
|
||||
|
||||
function formatDisplayDate(value) {
|
||||
if (!value) {
|
||||
return 'Unknown';
|
||||
}
|
||||
|
||||
const parsed = new Date(value);
|
||||
if (Number.isNaN(parsed.getTime())) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return parsed.toLocaleDateString();
|
||||
}
|
||||
|
||||
function getBatchLocationLabel(batch) {
|
||||
return batch.location_name || batch.location?.name || `Location #${batch.location_id}`;
|
||||
}
|
||||
|
||||
function updateLocationFilterOptions() {
|
||||
const locationFilterSelect = document.getElementById('locationFilterSelect');
|
||||
if (!locationFilterSelect) return;
|
||||
|
||||
const previousValue = selectedLocationFilter;
|
||||
const locations = new Set();
|
||||
|
||||
allDrugs.forEach(drug => {
|
||||
drug.variants.forEach(variant => {
|
||||
(variant.batches || []).forEach(batch => {
|
||||
if (batch.quantity > 0) {
|
||||
locations.add(getBatchLocationLabel(batch));
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
locationFilterSelect.innerHTML = '<option value="">All Locations</option>';
|
||||
Array.from(locations)
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
.forEach(location => {
|
||||
const option = document.createElement('option');
|
||||
option.value = location;
|
||||
option.textContent = location;
|
||||
locationFilterSelect.appendChild(option);
|
||||
});
|
||||
|
||||
if (previousValue && locations.has(previousValue)) {
|
||||
selectedLocationFilter = previousValue;
|
||||
locationFilterSelect.value = previousValue;
|
||||
} else {
|
||||
selectedLocationFilter = '';
|
||||
locationFilterSelect.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function populateDispenseBatchSelect(activeBatches) {
|
||||
const batchSelect = document.getElementById('dispenseBatchSelect');
|
||||
const previousValue = batchSelect.value;
|
||||
|
||||
batchSelect.innerHTML = '<option value="">Automatic FEFO Selection</option>';
|
||||
|
||||
activeBatches.forEach((batch, index) => {
|
||||
const option = document.createElement('option');
|
||||
const expiryLabel = formatDisplayDate(batch.expiry_date);
|
||||
const locationLabel = getBatchLocationLabel(batch);
|
||||
const fefoLabel = index === 0 ? ' [FEFO default]' : '';
|
||||
option.value = batch.id;
|
||||
option.textContent = `${batch.batch_number} | ${batch.quantity} units | ${locationLabel} | Expires ${expiryLabel}${fefoLabel}`;
|
||||
batchSelect.appendChild(option);
|
||||
});
|
||||
|
||||
if (previousValue && activeBatches.some(batch => String(batch.id) === previousValue)) {
|
||||
batchSelect.value = previousValue;
|
||||
}
|
||||
}
|
||||
|
||||
// Update batch info display when variant is selected
|
||||
async function updateBatchInfo() {
|
||||
const variantId = parseInt(document.getElementById('dispenseDrugSelect').value);
|
||||
const batchInfoSection = document.getElementById('batchInfoSection');
|
||||
const batchInfoContent = document.getElementById('batchInfoContent');
|
||||
const batchSelect = document.getElementById('dispenseBatchSelect');
|
||||
|
||||
if (!variantId) {
|
||||
batchInfoSection.style.display = 'none';
|
||||
batchSelect.innerHTML = '<option value="">Automatic FEFO Selection</option>';
|
||||
return;
|
||||
}
|
||||
|
||||
batchInfoSection.style.display = 'block';
|
||||
batchInfoContent.innerHTML = '<p class="loading">Loading batches...</p>';
|
||||
|
||||
try {
|
||||
const response = await apiCall(`/variants/${variantId}/batches`);
|
||||
if (!response.ok) throw new Error('Failed to load batches');
|
||||
|
||||
const batches = await response.json();
|
||||
|
||||
// Filter out empty batches
|
||||
const activeBatches = batches.filter(b => b.quantity > 0);
|
||||
|
||||
if (activeBatches.length === 0) {
|
||||
populateDispenseBatchSelect([]);
|
||||
batchInfoContent.innerHTML = '<p style="color: #d32f2f; margin: 0;">⚠️ No active batches available for this variant</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Sort by expiry date (FEFO order)
|
||||
activeBatches.sort((a, b) => new Date(a.expiry_date) - new Date(b.expiry_date));
|
||||
populateDispenseBatchSelect(activeBatches);
|
||||
|
||||
const batchHtml = activeBatches.map((batch, index) => {
|
||||
const expiryDate = new Date(batch.expiry_date);
|
||||
const locationLabel = getBatchLocationLabel(batch);
|
||||
const expiryLabel = formatDisplayDate(batch.expiry_date);
|
||||
const today = new Date();
|
||||
const isExpired = expiryDate < today;
|
||||
const daysToExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
|
||||
|
||||
let expiryStatus = '✓ OK';
|
||||
let statusColor = '#4caf50';
|
||||
if (isExpired) {
|
||||
expiryStatus = '✕ EXPIRED';
|
||||
statusColor = '#d32f2f';
|
||||
} else if (daysToExpiry <= 7) {
|
||||
expiryStatus = `⚠️ ${daysToExpiry}d left`;
|
||||
statusColor = '#ff9800';
|
||||
}
|
||||
|
||||
const isFEFO = index === 0;
|
||||
|
||||
return `
|
||||
<div style="padding: 8px; margin: 5px 0; background: white; border: 1px solid #e0e0e0; border-radius: 3px; ${isFEFO ? 'border-left: 3px solid #2196F3; background: #f0f8ff;' : ''}">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div>
|
||||
<strong>${batch.batch_number}</strong> ${isFEFO ? '<span style="background: #2196F3; color: white; padding: 2px 6px; border-radius: 2px; font-size: 0.8em; margin-left: 5px;">FIRST</span>' : ''}
|
||||
<div style="font-size: 0.9em; color: #666; margin-top: 3px;">
|
||||
Qty: <strong>${batch.quantity}</strong> |
|
||||
Location: <strong>${escapeHtml(locationLabel)}</strong> |
|
||||
Expiry: <strong>${expiryLabel}</strong> <span style="color: ${statusColor};">(${expiryStatus})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
batchInfoContent.innerHTML = batchHtml;
|
||||
} catch (error) {
|
||||
console.error('Error loading batches:', error);
|
||||
batchInfoContent.innerHTML = '<p style="color: #d32f2f; margin: 0;">Error loading batches</p>';
|
||||
}
|
||||
|
||||
// Update allocation preview when batches load
|
||||
updateAllocationPreview();
|
||||
}
|
||||
|
||||
// Update allocation preview based on quantity and allow_split flag
|
||||
async function updateAllocationPreview() {
|
||||
const variantId = parseInt(document.getElementById('dispenseDrugSelect').value);
|
||||
const quantity = parseFloat(document.getElementById('dispenseQuantity').value);
|
||||
const allowSplit = document.getElementById('dispenseAllowSplit').checked;
|
||||
const preferredBatchId = parseInt(document.getElementById('dispenseBatchSelect').value);
|
||||
const allocationPreviewSection = document.getElementById('allocationPreviewSection');
|
||||
const allocationPreviewContent = document.getElementById('allocationPreviewContent');
|
||||
|
||||
if (!variantId || isNaN(quantity) || quantity <= 0) {
|
||||
allocationPreviewSection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
allocationPreviewSection.style.display = 'block';
|
||||
allocationPreviewContent.innerHTML = '<p class="loading">Calculating allocation...</p>';
|
||||
|
||||
try {
|
||||
const response = await apiCall(`/variants/${variantId}/batches`);
|
||||
if (!response.ok) throw new Error('Failed to load batches');
|
||||
|
||||
const batches = await response.json();
|
||||
let activeBatches = batches.filter(b => b.quantity > 0)
|
||||
.sort((a, b) => new Date(a.expiry_date) - new Date(b.expiry_date));
|
||||
|
||||
if (activeBatches.length === 0) {
|
||||
allocationPreviewContent.innerHTML = '<p style="color: #d32f2f; margin: 0;">⚠️ No active batches available</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Number.isNaN(preferredBatchId)) {
|
||||
const preferredBatch = activeBatches.find(batch => batch.id === preferredBatchId);
|
||||
if (!preferredBatch) {
|
||||
allocationPreviewContent.innerHTML = '<p style="color: #d32f2f; margin: 0;">✕ Selected preferred batch is no longer available.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
activeBatches = [preferredBatch, ...activeBatches.filter(batch => batch.id !== preferredBatchId)];
|
||||
}
|
||||
|
||||
// Simulate FEFO allocation
|
||||
const allocations = [];
|
||||
let remainingQty = quantity;
|
||||
|
||||
for (const batch of activeBatches) {
|
||||
if (remainingQty <= 0) break;
|
||||
|
||||
const allocQty = Math.min(remainingQty, batch.quantity);
|
||||
allocations.push({
|
||||
batchNumber: batch.batch_number,
|
||||
batchId: batch.id,
|
||||
quantity: allocQty,
|
||||
location: getBatchLocationLabel(batch),
|
||||
expiryDate: batch.expiry_date,
|
||||
preferred: !Number.isNaN(preferredBatchId) && batch.id === preferredBatchId
|
||||
});
|
||||
remainingQty -= allocQty;
|
||||
|
||||
if (!allowSplit) break;
|
||||
}
|
||||
|
||||
if (remainingQty > 0 && !allowSplit) {
|
||||
const failureContext = !Number.isNaN(preferredBatchId)
|
||||
? 'Preferred batch cannot fully satisfy this request. Enable split to fall through to FEFO batches.'
|
||||
: 'Insufficient stock in first batch. Check "Allow Split" to use multiple batches.';
|
||||
allocationPreviewContent.innerHTML = `<p style="color: #d32f2f; margin: 0;">✕ ${failureContext}</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (remainingQty > 0 && allowSplit) {
|
||||
allocationPreviewContent.innerHTML = `
|
||||
<p style="color: #d32f2f; margin: 0 0 10px 0;">✕ Warning: Only ${quantity - remainingQty} units available across all batches (${remainingQty} short)</p>
|
||||
<div>${allocations.map(a => `
|
||||
<div style="padding: 5px; margin: 3px 0; background: white; border-radius: 2px; font-size: 0.9em;">
|
||||
<strong>${a.batchNumber}</strong>${a.preferred ? ' <span style="color: #1565c0;">(preferred)</span>' : ''}: ${a.quantity} units (${escapeHtml(a.location)}) - Expires ${formatDisplayDate(a.expiryDate)}
|
||||
</div>
|
||||
`).join('')}</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const allocationHtml = allocations.map(a => `
|
||||
<div style="padding: 5px; margin: 3px 0; background: white; border-radius: 2px; font-size: 0.9em;">
|
||||
<strong>${a.batchNumber}</strong>${a.preferred ? ' <span style="color: #1565c0;">(preferred)</span>' : ''}: ${a.quantity} units (${escapeHtml(a.location)}) - Expires ${formatDisplayDate(a.expiryDate)}
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
const pluralText = allocations.length === 1 ? 'batch' : 'batches';
|
||||
const introText = !Number.isNaN(preferredBatchId)
|
||||
? `✓ Will start from your preferred batch, then use FEFO for any remainder across <strong>${allocations.length} ${pluralText}</strong>:`
|
||||
: `✓ Will dispense from <strong>${allocations.length} ${pluralText}</strong>:`;
|
||||
allocationPreviewContent.innerHTML = `
|
||||
<p style="margin: 0 0 8px 0; color: #333;">${introText}</p>
|
||||
<div>${allocationHtml}</div>
|
||||
`;
|
||||
} catch (error) {
|
||||
console.error('Error calculating allocation:', error);
|
||||
allocationPreviewContent.innerHTML = '<p style="color: #d32f2f; margin: 0;">Error calculating allocation</p>';
|
||||
}
|
||||
}
|
||||
|
||||
// Render drugs list
|
||||
function renderDrugs() {
|
||||
const drugsList = document.getElementById('drugsList');
|
||||
@@ -388,6 +670,17 @@ function renderDrugs() {
|
||||
);
|
||||
}
|
||||
|
||||
// Apply location filter
|
||||
if (selectedLocationFilter) {
|
||||
drugsToShow = drugsToShow.filter(drug =>
|
||||
drug.variants.some(variant =>
|
||||
(variant.batches || []).some(batch =>
|
||||
batch.quantity > 0 && getBatchLocationLabel(batch) === selectedLocationFilter
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Sort alphabetically by drug name
|
||||
drugsToShow = drugsToShow.sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
@@ -405,6 +698,7 @@ function renderDrugs() {
|
||||
const isLowStock = lowStockVariants > 0;
|
||||
const isExpanded = expandedDrugs.has(drug.id);
|
||||
const isReadOnly = currentUser.role === 'readonly';
|
||||
const isControlled = drug.is_controlled;
|
||||
|
||||
const variantsHtml = isExpanded ? `
|
||||
${drug.variants.map(variant => {
|
||||
@@ -424,6 +718,7 @@ function renderDrugs() {
|
||||
</div>
|
||||
<div class="variant-actions">
|
||||
${!isReadOnly ? `
|
||||
<button class="btn btn-success btn-small" onclick="openBatchReceiveModal(${variant.id})">📦 Receive Batch</button>
|
||||
<button class="btn btn-primary btn-small" onclick="prescribeVariant(${variant.id}, '${drug.name.replace(/'/g, "\\'")}', '${variant.strength.replace(/'/g, "\\'")}', '${variant.unit.replace(/'/g, "\\'")}')">🏷️ Prescribe & Print</button>
|
||||
<button class="btn btn-success btn-small" onclick="dispenseVariant(${variant.id})">💊 Dispense</button>
|
||||
<button class="btn btn-warning btn-small" onclick="openEditVariantModal(${variant.id})">Edit</button>
|
||||
@@ -437,7 +732,10 @@ function renderDrugs() {
|
||||
return `
|
||||
<div class="drug-item ${isLowStock ? 'low-stock' : ''} ${isExpanded ? 'expanded' : ''}" onclick="toggleDrugExpansion(${drug.id})">
|
||||
<div class="drug-info">
|
||||
<div class="drug-name">${escapeHtml(drug.name)}</div>
|
||||
<div class="drug-name">
|
||||
${escapeHtml(drug.name)}
|
||||
${isControlled ? '<span style="background: #d32f2f; color: white; padding: 2px 6px; border-radius: 2px; font-size: 0.75em; margin-left: 8px; display: inline-block;">⚠️ CONTROLLED</span>' : ''}
|
||||
</div>
|
||||
<div class="drug-description">${drug.description ? escapeHtml(drug.description) : 'No description'}</div>
|
||||
<div class="drug-quantity">${totalVariants} variant${totalVariants !== 1 ? 's' : ''} (${totalQuantity} total units)</div>
|
||||
<div class="drug-status">
|
||||
@@ -471,7 +769,8 @@ async function handleAddDrug(e) {
|
||||
|
||||
const drugData = {
|
||||
name: document.getElementById('drugName').value,
|
||||
description: document.getElementById('drugDescription').value
|
||||
description: document.getElementById('drugDescription').value,
|
||||
is_controlled: document.getElementById('drugIsControlled').checked
|
||||
};
|
||||
|
||||
try {
|
||||
@@ -520,9 +819,11 @@ async function handleDispenseDrug(e) {
|
||||
|
||||
const variantId = parseInt(document.getElementById('dispenseDrugSelect').value);
|
||||
const quantity = parseFloat(document.getElementById('dispenseQuantity').value);
|
||||
const preferredBatchIdValue = document.getElementById('dispenseBatchSelect').value;
|
||||
const animalName = document.getElementById('dispenseAnimal').value;
|
||||
const userName = document.getElementById('dispenseUser').value;
|
||||
const notes = document.getElementById('dispenseNotes').value;
|
||||
const allowSplit = document.getElementById('dispenseAllowSplit').checked;
|
||||
|
||||
if (!variantId || isNaN(quantity) || quantity <= 0 || !userName) {
|
||||
showToast('Please fill in all required fields (Drug Variant, Quantity > 0, Dispensed by)', 'warning');
|
||||
@@ -532,9 +833,11 @@ async function handleDispenseDrug(e) {
|
||||
const dispensingData = {
|
||||
drug_variant_id: variantId,
|
||||
quantity: quantity,
|
||||
batch_id: preferredBatchIdValue ? parseInt(preferredBatchIdValue) : null,
|
||||
animal_name: animalName || null,
|
||||
user_name: userName,
|
||||
notes: notes || null
|
||||
notes: notes || null,
|
||||
allow_split: allowSplit
|
||||
};
|
||||
|
||||
try {
|
||||
@@ -566,6 +869,7 @@ function openEditModal(drugId) {
|
||||
document.getElementById('editDrugId').value = drug.id;
|
||||
document.getElementById('editDrugName').value = drug.name;
|
||||
document.getElementById('editDrugDescription').value = drug.description || '';
|
||||
document.getElementById('editDrugIsControlled').checked = drug.is_controlled || false;
|
||||
|
||||
document.getElementById('editModal').classList.add('show');
|
||||
}
|
||||
@@ -686,6 +990,9 @@ function dispenseVariant(variantId) {
|
||||
const drugSelect = document.getElementById('dispenseDrugSelect');
|
||||
drugSelect.value = variantId;
|
||||
|
||||
// Update batch info for selected variant
|
||||
updateBatchInfo();
|
||||
|
||||
// Open dispense modal
|
||||
openModal(document.getElementById('dispenseModal'));
|
||||
}
|
||||
@@ -961,7 +1268,8 @@ async function handleEditDrug(e) {
|
||||
const drugId = parseInt(document.getElementById('editDrugId').value);
|
||||
const drugData = {
|
||||
name: document.getElementById('editDrugName').value,
|
||||
description: document.getElementById('editDrugDescription').value
|
||||
description: document.getElementById('editDrugDescription').value,
|
||||
is_controlled: document.getElementById('editDrugIsControlled').checked
|
||||
};
|
||||
|
||||
try {
|
||||
@@ -1213,3 +1521,219 @@ async function deleteUser(userId) {
|
||||
showToast('Failed to delete user: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Location Management
|
||||
async function openLocationManagement() {
|
||||
const modal = document.getElementById('locationManagementModal');
|
||||
document.getElementById('newLocationName').value = '';
|
||||
|
||||
const locationsList = document.getElementById('locationsList');
|
||||
locationsList.innerHTML = '<h3>Active Locations</h3><p class="loading">Loading locations...</p>';
|
||||
|
||||
try {
|
||||
const response = await apiCall('/locations');
|
||||
if (!response.ok) throw new Error('Failed to load locations');
|
||||
|
||||
const locations = await response.json();
|
||||
|
||||
const activeLocations = locations.filter(loc => loc.is_active);
|
||||
const inactiveLocations = locations.filter(loc => !loc.is_active);
|
||||
|
||||
let locationsHtml = '<h3>Active Locations</h3>';
|
||||
if (activeLocations.length === 0) {
|
||||
locationsHtml += '<p class="empty">No active locations</p>';
|
||||
} else {
|
||||
locationsHtml += `<div class="locations-table">
|
||||
${activeLocations.map(location => `
|
||||
<div class="location-item">
|
||||
<div style="flex: 1;">
|
||||
<strong>${location.name}</strong>
|
||||
<div style="font-size: 0.85em; color: #666;">Created: ${new Date(location.created_at).toLocaleDateString()}</div>
|
||||
</div>
|
||||
<button class="btn btn-danger btn-small" onclick="archiveLocation(${location.id}, '${location.name.replace(/'/g, "\\'")}')">Archive</button>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
if (inactiveLocations.length > 0) {
|
||||
locationsHtml += `
|
||||
<h3 style="margin-top: 20px;">Archived Locations</h3>
|
||||
<div class="locations-table">
|
||||
${inactiveLocations.map(location => `
|
||||
<div class="location-item" style="opacity: 0.6;">
|
||||
<div style="flex: 1;">
|
||||
<strong>${location.name}</strong> <span style="color: #999;">(archived)</span>
|
||||
</div>
|
||||
<button class="btn btn-secondary btn-small" onclick="restoreLocation(${location.id}, '${location.name.replace(/'/g, "\\'")}')">Restore</button>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
locationsList.innerHTML = locationsHtml;
|
||||
} catch (error) {
|
||||
console.error('Error loading locations:', error);
|
||||
locationsList.innerHTML = '<h3>Active Locations</h3><p class="empty">Error loading locations</p>';
|
||||
}
|
||||
|
||||
openModal(modal);
|
||||
}
|
||||
|
||||
// Create location
|
||||
async function createLocation(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = document.getElementById('newLocationName').value.trim();
|
||||
|
||||
if (!name) {
|
||||
showToast('Please enter a location name', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await apiCall('/locations', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Failed to create location');
|
||||
}
|
||||
|
||||
document.getElementById('newLocationName').value = '';
|
||||
showToast('Location created successfully!', 'success');
|
||||
openLocationManagement();
|
||||
} catch (error) {
|
||||
console.error('Error creating location:', error);
|
||||
showToast('Failed to create location: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Archive location
|
||||
async function archiveLocation(locationId, locationName) {
|
||||
if (!confirm(`Archive location "${locationName}"?\n\nYou can restore it later if needed.`)) return;
|
||||
|
||||
try {
|
||||
const response = await apiCall(`/locations/${locationId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ is_active: false })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Failed to archive location');
|
||||
}
|
||||
|
||||
showToast('Location archived successfully!', 'success');
|
||||
openLocationManagement();
|
||||
} catch (error) {
|
||||
console.error('Error archiving location:', error);
|
||||
showToast('Failed to archive location: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Restore location
|
||||
async function restoreLocation(locationId, locationName) {
|
||||
if (!confirm(`Restore location "${locationName}"?`)) return;
|
||||
|
||||
try {
|
||||
const response = await apiCall(`/locations/${locationId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ is_active: true })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Failed to restore location');
|
||||
}
|
||||
|
||||
showToast('Location restored successfully!', 'success');
|
||||
openLocationManagement();
|
||||
} catch (error) {
|
||||
console.error('Error restoring location:', error);
|
||||
showToast('Failed to restore location: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Batch Management
|
||||
async function openBatchReceiveModal(variantId) {
|
||||
const batchReceiveModal = document.getElementById('batchReceiveModal');
|
||||
document.getElementById('batchReceiveForm').reset();
|
||||
document.getElementById('batchVariantId').value = variantId;
|
||||
|
||||
// Initialize locations
|
||||
await initializeBatchLocations();
|
||||
|
||||
openModal(batchReceiveModal);
|
||||
}
|
||||
|
||||
async function initializeBatchLocations() {
|
||||
const locationSelect = document.getElementById('batchLocation');
|
||||
|
||||
try {
|
||||
const response = await apiCall('/locations');
|
||||
if (!response.ok) throw new Error('Failed to load locations');
|
||||
|
||||
const locations = await response.json();
|
||||
|
||||
locationSelect.innerHTML = '<option value="">-- Select location --</option>';
|
||||
locations.forEach(location => {
|
||||
if (location.is_active) {
|
||||
const option = document.createElement('option');
|
||||
option.value = location.id;
|
||||
option.textContent = location.name;
|
||||
locationSelect.appendChild(option);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading locations:', error);
|
||||
showToast('Failed to load storage locations', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleBatchReceive(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const variantId = parseInt(document.getElementById('batchVariantId').value);
|
||||
const batchNumber = document.getElementById('batchNumber').value.trim();
|
||||
const quantity = parseFloat(document.getElementById('batchQuantity').value);
|
||||
const expiryDate = document.getElementById('batchExpiryDate').value;
|
||||
const locationId = parseInt(document.getElementById('batchLocation').value);
|
||||
const notes = document.getElementById('batchNotes').value.trim();
|
||||
|
||||
if (!batchNumber || isNaN(quantity) || quantity <= 0 || !expiryDate || !locationId) {
|
||||
showToast('Please fill in all required fields', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const batchData = {
|
||||
batch_number: batchNumber,
|
||||
quantity: quantity,
|
||||
expiry_date: expiryDate,
|
||||
location_id: locationId,
|
||||
notes: notes || null
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await apiCall(`/variants/${variantId}/batches`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(batchData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Failed to receive batch');
|
||||
}
|
||||
|
||||
document.getElementById('batchReceiveForm').reset();
|
||||
closeModal(document.getElementById('batchReceiveModal'));
|
||||
await loadDrugs();
|
||||
showToast('Batch received successfully!', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error receiving batch:', error);
|
||||
showToast('Failed to receive batch: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
+132
-18
@@ -13,7 +13,7 @@
|
||||
<!-- Login Page -->
|
||||
<div id="loginPage" class="login-page">
|
||||
<div class="login-container">
|
||||
<h1>🐶 MTAR Drug Inventory System 🐶</h1>
|
||||
<h1>MTAR Drug Inventory System</h1>
|
||||
<form id="loginForm" class="login-form">
|
||||
<h2>Login</h2>
|
||||
<div class="form-group">
|
||||
@@ -36,13 +36,14 @@
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="header-top">
|
||||
<h1>🐶 MTAR Drug Inventory System 🐶</h1>
|
||||
<h1>MTAR Drug Inventory System</h1>
|
||||
<div class="user-menu">
|
||||
<span id="currentUser">User</span>
|
||||
<button id="userMenuBtn" class="btn btn-small">⋮</button>
|
||||
<div id="userDropdown" class="user-dropdown" style="display: none;">
|
||||
<button id="changePasswordBtn" class="dropdown-item">🔑 Change Password</button>
|
||||
<button id="adminBtn" class="dropdown-item" style="display: none;">👤 Admin</button>
|
||||
<button id="locationsBtn" class="dropdown-item" style="display: none;">📍 Storage Locations</button>
|
||||
<button id="logoutBtn" class="dropdown-item">🚪 Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,20 +55,23 @@
|
||||
<section id="listSection" class="list-section">
|
||||
<div class="section-header">
|
||||
<h2>Current Inventory</h2>
|
||||
<div class="header-actions">
|
||||
<button id="printNotesBtn" class="btn btn-primary btn-small">📝 Print Notes</button>
|
||||
<button id="addDrugBtn" class="btn btn-primary btn-small">➕ Add Drug</button>
|
||||
<div class="inventory-toolbar">
|
||||
<div class="header-actions">
|
||||
<button id="printNotesBtn" class="btn btn-primary btn-small">📝 Print Notes</button>
|
||||
<button id="addDrugBtn" class="btn btn-primary btn-small">➕ Add Drug</button>
|
||||
</div>
|
||||
<div class="toolbar-search">
|
||||
<input type="text" id="drugSearch" placeholder="Search drugs by name..." class="search-input">
|
||||
</div>
|
||||
<div class="filters">
|
||||
<button id="showAllBtn" class="filter-btn active">All</button>
|
||||
<button id="showLowStockBtn" class="filter-btn">Low Stock Only</button>
|
||||
<select id="locationFilterSelect" class="filter-select" aria-label="Filter by location">
|
||||
<option value="">All Locations</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<button id="showAllBtn" class="filter-btn active">All</button>
|
||||
<button id="showLowStockBtn" class="filter-btn">Low Stock Only</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Section -->
|
||||
<div class="search-section">
|
||||
<input type="text" id="drugSearch" placeholder="🔍 Search drugs by name..." class="search-input">
|
||||
</div>
|
||||
|
||||
<div id="drugsList" class="drugs-list">
|
||||
<p class="loading">Loading drugs...</p>
|
||||
@@ -97,7 +101,12 @@
|
||||
<input type="text" id="editDrugDescription">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="editDrugIsControlled">
|
||||
This is a Controlled Substance
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelEditBtn">Cancel</button>
|
||||
</div>
|
||||
@@ -121,6 +130,13 @@
|
||||
<input type="text" id="drugDescription">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="drugIsControlled">
|
||||
This is a Controlled Substance
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 20px 0; border: none; border-top: 1px solid #ddd;">
|
||||
<h3 style="margin-top: 0;">Initial Variant (Optional)</h3>
|
||||
|
||||
@@ -161,20 +177,49 @@
|
||||
|
||||
<!-- Dispense Drug Modal -->
|
||||
<div id="dispenseModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-content modal-large dispense-modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Dispense Drug</h2>
|
||||
<form id="dispenseForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="dispenseDrugSelect">Drug Variant *</label>
|
||||
<select id="dispenseDrugSelect">
|
||||
<select id="dispenseDrugSelect" onchange="updateBatchInfo()">
|
||||
<option value="">-- Select a drug variant --</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="batchInfoSection" style="display: none; margin: 15px 0; padding: 10px; background: #f5f5f5; border-radius: 4px;">
|
||||
<h4 style="margin-top: 0;">Available Batches (FEFO Order)</h4>
|
||||
<div id="batchInfoContent">
|
||||
<p class="loading">Loading batches...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseBatchSelect">Preferred Batch Override</label>
|
||||
<select id="dispenseBatchSelect" onchange="updateAllocationPreview()">
|
||||
<option value="">Automatic FEFO Selection</option>
|
||||
</select>
|
||||
<small style="display: block; margin-top: 6px; color: #666;">Leave on automatic to use the earliest-expiry batch first. Choose a batch here to consume that batch first instead.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dispenseQuantity">Quantity *</label>
|
||||
<input type="number" id="dispenseQuantity" step="0.1">
|
||||
<input type="number" id="dispenseQuantity" step="0.1" onchange="updateAllocationPreview()">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="dispenseAllowSplit" onchange="updateAllocationPreview()">
|
||||
Allow Split Across Multiple Batches
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="allocationPreviewSection" style="display: none; margin: 15px 0; padding: 10px; background: #f0f8ff; border-radius: 4px; border-left: 3px solid #2196F3;">
|
||||
<h4 style="margin-top: 0;">Allocation Preview</h4>
|
||||
<div id="allocationPreviewContent">
|
||||
<p class="loading">Loading allocation...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -437,6 +482,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location Management Modal -->
|
||||
<div id="locationManagementModal" class="modal">
|
||||
<div class="modal-content modal-large">
|
||||
<span class="close">×</span>
|
||||
<h2>Storage Locations</h2>
|
||||
<div class="location-management-content">
|
||||
<div class="form-group">
|
||||
<h3>Add New Location</h3>
|
||||
<form id="createLocationForm">
|
||||
<div class="form-row">
|
||||
<input type="text" id="newLocationName" placeholder="Location name (e.g., Fridge, Cupboard)" required>
|
||||
<button type="submit" class="btn btn-primary btn-small">Add Location</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="locationsList" class="locations-list">
|
||||
<h3>Active Locations</h3>
|
||||
<p class="loading">Loading locations...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" id="closeLocationManagementBtn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Print Notes Modal -->
|
||||
<div id="printNotesModal" class="modal">
|
||||
<div class="modal-content">
|
||||
@@ -460,6 +531,49 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Batch Receive Modal -->
|
||||
<div id="batchReceiveModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Receive New Batch</h2>
|
||||
<form id="batchReceiveForm" novalidate>
|
||||
<input type="hidden" id="batchVariantId">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="batchNumber">Batch Number *</label>
|
||||
<input type="text" id="batchNumber" placeholder="e.g., LOT-2026-001" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="batchQuantity">Quantity *</label>
|
||||
<input type="number" id="batchQuantity" step="0.1" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="batchExpiryDate">Expiry Date *</label>
|
||||
<input type="date" id="batchExpiryDate" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="batchLocation">Storage Location *</label>
|
||||
<select id="batchLocation" required>
|
||||
<option value="">-- Select location --</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="batchNotes">Notes</label>
|
||||
<input type="text" id="batchNotes" placeholder="Optional notes about this batch">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Receive Batch</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancelBatchReceiveBtn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
|
||||
+129
-10
@@ -136,9 +136,9 @@ body {
|
||||
header {
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
padding: 40px 20px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
@@ -152,7 +152,8 @@ header {
|
||||
|
||||
.header-top h1 {
|
||||
flex: 1;
|
||||
font-size: 2.5em;
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
@@ -214,8 +215,8 @@ header {
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 10px;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -368,16 +369,34 @@ textarea:focus {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.inventory-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-search {
|
||||
flex: 1;
|
||||
min-width: 260px;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
@@ -388,6 +407,17 @@ textarea:focus {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: var(--text-dark);
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
#showLowStockBtn {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
@@ -401,6 +431,22 @@ textarea:focus {
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-width: 180px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background: var(--white);
|
||||
color: var(--text-dark);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--secondary-color);
|
||||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
|
||||
}
|
||||
|
||||
.drugs-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -571,10 +617,10 @@ footer {
|
||||
.search-input {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 12px 16px;
|
||||
padding: 10px 14px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 1em;
|
||||
font-size: 0.95em;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
@@ -627,6 +673,39 @@ footer {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#dispenseModal.show {
|
||||
align-items: flex-start;
|
||||
overflow-y: auto;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.dispense-modal-content {
|
||||
max-width: 780px;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#dispenseForm {
|
||||
display: block;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
#batchInfoSection,
|
||||
#allocationPreviewSection {
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
min-height: fit-content;
|
||||
}
|
||||
|
||||
#dispenseModal .form-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin-top: 16px;
|
||||
padding-top: 14px;
|
||||
background: var(--white);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.close {
|
||||
color: var(--text-light);
|
||||
float: right;
|
||||
@@ -722,6 +801,26 @@ footer {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.inventory-toolbar {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toolbar-search {
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-actions,
|
||||
.filters {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filters {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -730,6 +829,11 @@ footer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-width: 160px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.drug-details {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -741,6 +845,20 @@ footer {
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.dispense-modal-content {
|
||||
max-width: 95%;
|
||||
max-height: calc(100vh - 24px);
|
||||
}
|
||||
|
||||
#dispenseModal.show {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
#batchInfoSection,
|
||||
#allocationPreviewSection {
|
||||
max-height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Variants Section */
|
||||
@@ -918,7 +1036,7 @@ footer {
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
padding: 20px 10px;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
@@ -929,7 +1047,8 @@ footer {
|
||||
|
||||
.header-top h1 {
|
||||
flex: none;
|
||||
font-size: 1.8em;
|
||||
font-size: 2.4em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
|
||||
Reference in New Issue
Block a user