240 lines
9.7 KiB
HTML
240 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Drug Inventory System</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🐶 MTAR Drug Inventory System 🐶</h1>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Drug List Section -->
|
||
<section id="listSection" class="list-section">
|
||
<div class="section-header">
|
||
<h2>Current Inventory</h2>
|
||
<div class="header-actions">
|
||
<button id="addDrugBtn" class="btn btn-primary btn-small">➕ Add Drug</button>
|
||
</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>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>Many Tears Confidential</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- Edit Drug Modal -->
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Edit Drug</h2>
|
||
<form id="editForm">
|
||
<input type="hidden" id="editDrugId">
|
||
<div class="form-group">
|
||
<label for="editDrugName">Drug Name *</label>
|
||
<input type="text" id="editDrugName" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editDrugDescription">Description</label>
|
||
<input type="text" id="editDrugDescription">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelEditBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Drug Modal -->
|
||
<div id="addModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Add New Drug</h2>
|
||
<form id="drugForm">
|
||
<div class="form-group">
|
||
<label for="drugName">Drug Name *</label>
|
||
<input type="text" id="drugName" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="drugDescription">Description</label>
|
||
<input type="text" id="drugDescription">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Add Drug</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelAddBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dispense Drug Modal -->
|
||
<div id="dispenseModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Dispense Drug</h2>
|
||
<form id="dispenseForm">
|
||
<div class="form-group">
|
||
<label for="dispenseDrugSelect">Drug Variant *</label>
|
||
<select id="dispenseDrugSelect" required>
|
||
<option value="">-- Select a drug variant --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="dispenseQuantity">Quantity *</label>
|
||
<input type="number" id="dispenseQuantity" step="0.1" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="dispenseAnimal">Animal Name/ID *</label>
|
||
<input type="text" id="dispenseAnimal" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="dispenseUser">User Name *</label>
|
||
<input type="text" id="dispenseUser" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="dispenseNotes">Notes</label>
|
||
<input type="text" id="dispenseNotes" placeholder="Optional">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Dispense</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelDispenseBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Variant Modal -->
|
||
<div id="addVariantModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Add Variant</h2>
|
||
<form id="variantForm">
|
||
<input type="hidden" id="variantDrugId">
|
||
<div class="form-group">
|
||
<label for="variantStrength">Strength *</label>
|
||
<input type="text" id="variantStrength" placeholder="e.g., 5.4mg, 10.8mg, 100ml" required>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="variantQuantity">Quantity *</label>
|
||
<input type="number" id="variantQuantity" step="0.1" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="variantUnit">Unit *</label>
|
||
<select id="variantUnit">
|
||
<option value="tablets">Tablets</option>
|
||
<option value="bottles">Bottles</option>
|
||
<option value="ml">ml</option>
|
||
<option value="vials">Vials</option>
|
||
<option value="units">Units</option>
|
||
<option value="packets">Packets</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="variantThreshold">Low Stock Threshold *</label>
|
||
<input type="number" id="variantThreshold" step="0.1" value="10" required>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Add Variant</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelVariantBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Variant Modal -->
|
||
<div id="editVariantModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Edit Variant</h2>
|
||
<form id="editVariantForm">
|
||
<input type="hidden" id="editVariantId">
|
||
<div class="form-group">
|
||
<label for="editVariantStrength">Strength *</label>
|
||
<input type="text" id="editVariantStrength" required>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="editVariantQuantity">Quantity *</label>
|
||
<input type="number" id="editVariantQuantity" step="0.1" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editVariantUnit">Unit *</label>
|
||
<select id="editVariantUnit">
|
||
<option value="tablets">Tablets</option>
|
||
<option value="bottles">Bottles</option>
|
||
<option value="ml">ml</option>
|
||
<option value="vials">Vials</option>
|
||
<option value="units">Units</option>
|
||
<option value="packets">Packets</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editVariantThreshold">Low Stock Threshold *</label>
|
||
<input type="number" id="editVariantThreshold" step="0.1" required>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelEditVariantBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dispensing History Modal -->
|
||
<div id="historyModal" class="modal">
|
||
<div class="modal-content modal-large">
|
||
<span class="close">×</span>
|
||
<h2>Dispensing History - <span id="historyDrugName"></span></h2>
|
||
<div id="historyContent" class="history-content">
|
||
<p class="loading">Loading history...</p>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-secondary" id="closeHistoryBtn">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|