462 lines
22 KiB
HTML
462 lines
22 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>
|
||
<!-- Toast Notification Container -->
|
||
<div id="toastContainer" class="toast-container"></div>
|
||
|
||
<!-- Login Page -->
|
||
<div id="loginPage" class="login-page">
|
||
<div class="login-container">
|
||
<h1>🐶 MTAR Drug Inventory System 🐶</h1>
|
||
<form id="loginForm" class="login-form">
|
||
<h2>Login</h2>
|
||
<div class="form-group">
|
||
<label for="loginUsername">Username</label>
|
||
<input type="text" id="loginUsername" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="loginPassword">Password</label>
|
||
<input type="password" id="loginPassword" required>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Login</button>
|
||
<p class="login-info">Contact an administrator to create an account</p>
|
||
</form>
|
||
<div id="loginError" class="error-message" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main App (hidden until logged in) -->
|
||
<div id="mainApp" class="main-app" style="display: none;">
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-top">
|
||
<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="logoutBtn" class="dropdown-item">🚪 Logout</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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="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="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>
|
||
|
||
<hr style="margin: 20px 0; border: none; border-top: 1px solid #ddd;">
|
||
<h3 style="margin-top: 0;">Initial Variant (Optional)</h3>
|
||
|
||
<div class="form-group">
|
||
<label for="initialVariantStrength">Strength</label>
|
||
<input type="text" id="initialVariantStrength" placeholder="e.g., 10mg, 5.4mg">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="initialVariantQuantity">Quantity</label>
|
||
<input type="number" id="initialVariantQuantity" placeholder="0" min="0" step="0.1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="initialVariantUnit">Unit</label>
|
||
<select id="initialVariantUnit">
|
||
<option value="tablets">Tablets</option>
|
||
<option value="bottles">Bottles</option>
|
||
<option value="boxes">Boxes</option>
|
||
<option value="vials">Vials</option>
|
||
<option value="units">Units</option>
|
||
<option value="packets">Packets</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="initialVariantThreshold">Low Stock Threshold</label>
|
||
<input type="number" id="initialVariantThreshold" placeholder="0" min="0" step="0.1" value="10">
|
||
</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" novalidate>
|
||
<div class="form-group">
|
||
<label for="dispenseDrugSelect">Drug Variant *</label>
|
||
<select id="dispenseDrugSelect">
|
||
<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">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="dispenseAnimal">Animal Name/ID</label>
|
||
<input type="text" id="dispenseAnimal">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="dispenseUser">Dispensed by *</label>
|
||
<input type="text" id="dispenseUser">
|
||
</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>
|
||
|
||
<!-- Prescribe Drug Modal -->
|
||
<div id="prescribeModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Prescribe Drug & Print Label</h2>
|
||
<form id="prescribeForm" novalidate>
|
||
<input type="hidden" id="prescribeVariantId">
|
||
<input type="hidden" id="prescribeDrugName">
|
||
<input type="hidden" id="prescribeVariantStrength">
|
||
<input type="hidden" id="prescribeUnit">
|
||
|
||
<div class="form-group">
|
||
<label for="prescribeQuantity">Quantity *</label>
|
||
<input type="number" id="prescribeQuantity" step="0.1" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="prescribeAnimal">Animal Name/ID *</label>
|
||
<input type="text" id="prescribeAnimal" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="prescribeDosage">Dosage Instructions *</label>
|
||
<input type="text" id="prescribeDosage" placeholder="e.g., 1 tablet twice daily with food" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="prescribeExpiry">Expiry Date *</label>
|
||
<input type="date" id="prescribeExpiry" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="prescribeUser">Prescribed by *</label>
|
||
<input type="text" id="prescribeUser" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="prescribeNotes">Notes</label>
|
||
<input type="text" id="prescribeNotes" placeholder="Optional">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Prescribe & Print Label</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelPrescribeBtn">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="boxes">boxes</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="boxes">Boxes</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>
|
||
|
||
<!-- Change Password Modal -->
|
||
<div id="changePasswordModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Change Password</h2>
|
||
<form id="changePasswordForm">
|
||
<div class="form-group">
|
||
<label for="currentPassword">Current Password *</label>
|
||
<input type="password" id="currentPassword" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="newPassword">New Password *</label>
|
||
<input type="password" id="newPassword" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="confirmNewPassword">Confirm New Password *</label>
|
||
<input type="password" id="confirmNewPassword" required>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Change Password</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelChangePasswordBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin Change User Password Modal -->
|
||
<div id="adminChangePasswordModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Change User Password</h2>
|
||
<form id="adminChangePasswordForm">
|
||
<input type="hidden" id="adminChangePasswordUserId">
|
||
<div class="form-group">
|
||
<label for="adminChangePasswordUsername">Username</label>
|
||
<input type="text" id="adminChangePasswordUsername" disabled>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="adminChangePasswordNewPassword">New Password *</label>
|
||
<input type="password" id="adminChangePasswordNewPassword" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="adminChangePasswordConfirm">Confirm Password *</label>
|
||
<input type="password" id="adminChangePasswordConfirm" required>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Set Password</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelAdminChangePasswordBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Management Modal -->
|
||
<div id="userManagementModal" class="modal">
|
||
<div class="modal-content modal-large">
|
||
<span class="close">×</span>
|
||
<h2>User Management</h2>
|
||
<div class="user-management-content">
|
||
<div class="form-group">
|
||
<h3>Create New User</h3>
|
||
<form id="createUserForm">
|
||
<div class="form-row">
|
||
<input type="text" id="newUsername" placeholder="Username" required>
|
||
<input type="password" id="newUserPassword" placeholder="Password" required>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-small">Create User</button>
|
||
</form>
|
||
</div>
|
||
<div id="usersList" class="users-list">
|
||
<h3>Users</h3>
|
||
<p class="loading">Loading users...</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-secondary" id="closeUserManagementBtn">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Print Notes Modal -->
|
||
<div id="printNotesModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h2>Print Notes</h2>
|
||
<form id="printNotesForm" novalidate>
|
||
<div class="form-group">
|
||
<label for="notesAnimalName">Animal Name/ID *</label>
|
||
<input type="text" id="notesAnimalName" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="notesContent">Notes *</label>
|
||
<textarea id="notesContent" rows="6" placeholder="Enter notes to print..." required></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Print Notes</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelPrintNotesBtn">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|