866 lines
37 KiB
HTML
866 lines
37 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Generate Purchase Order - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.po-header {
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.item-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border: 1px solid #dee2e6;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.item-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
.item-card.selected {
|
|
border-color: #007bff;
|
|
background: #f8f9ff;
|
|
}
|
|
.item-image {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
margin-right: 15px;
|
|
}
|
|
.item-details {
|
|
flex: 1;
|
|
}
|
|
.item-name {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
.item-sku {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
.stock-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
.stock-level {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.stock-bar {
|
|
width: 100px;
|
|
height: 6px;
|
|
background: #e9ecef;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
.stock-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.stock-critical { background: #dc3545; }
|
|
.stock-low { background: #ffc107; }
|
|
.stock-normal { background: #28a745; }
|
|
.quantity-input {
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
.price-info {
|
|
text-align: right;
|
|
}
|
|
.unit-price {
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
.total-price {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
color: #28a745;
|
|
}
|
|
.supplier-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border: 1px solid #dee2e6;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.supplier-card:hover {
|
|
border-color: #007bff;
|
|
transform: translateY(-2px);
|
|
}
|
|
.supplier-card.selected {
|
|
border-color: #007bff;
|
|
background: #f8f9ff;
|
|
}
|
|
.supplier-name {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.supplier-info {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
.supplier-rating {
|
|
color: #ffc107;
|
|
margin: 5px 0;
|
|
}
|
|
.delivery-info {
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
.po-summary {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.summary-row:last-child {
|
|
border-bottom: none;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
}
|
|
.filter-panel {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.category-badge {
|
|
background: #e9ecef;
|
|
color: #495057;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
.priority-badge {
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.priority-high { background: #f8d7da; color: #dc3545; }
|
|
.priority-medium { background: #fff3cd; color: #ffc107; }
|
|
.priority-low { background: #d4edda; color: #28a745; }
|
|
.suggested-qty {
|
|
background: #d1ecf1;
|
|
border: 1px solid #bee5eb;
|
|
border-radius: 4px;
|
|
padding: 5px 10px;
|
|
font-size: 0.9rem;
|
|
margin: 5px 0;
|
|
}
|
|
.bulk-discount {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
border-radius: 4px;
|
|
padding: 5px 10px;
|
|
font-size: 0.9rem;
|
|
color: #155724;
|
|
margin: 5px 0;
|
|
}
|
|
.lead-time {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
.approval-section {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.step-indicator {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 20px 0;
|
|
}
|
|
.step {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
margin: 0 5px;
|
|
background: #f8f9fa;
|
|
color: #6c757d;
|
|
}
|
|
.step.active {
|
|
background: #007bff;
|
|
color: white;
|
|
}
|
|
.step.completed {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4><i class="fas fa-file-invoice"></i> Generate Purchase Order</h4>
|
|
<h6>Create purchase orders for inventory items</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-secondary me-2" id="saveDraft">
|
|
<i class="fas fa-save"></i> Save Draft
|
|
</button>
|
|
<button class="btn btn-info me-2" id="previewPO">
|
|
<i class="fas fa-eye"></i> Preview
|
|
</button>
|
|
<button class="btn btn-success" id="generatePO">
|
|
<i class="fas fa-file-alt"></i> Generate PO
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PO Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="po-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5><i class="fas fa-shopping-cart"></i> Purchase Order Generator</h5>
|
|
<p>Select items, choose suppliers, and generate purchase orders efficiently</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-end">
|
|
<h6>PO Number: <span class="badge bg-light text-dark">PO-2024-001234</span></h6>
|
|
<p>Date: {{ today|date:"M d, Y" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step Indicator -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="step-indicator">
|
|
<div class="step active">
|
|
<i class="fas fa-list"></i><br>
|
|
<small>Select Items</small>
|
|
</div>
|
|
<div class="step">
|
|
<i class="fas fa-building"></i><br>
|
|
<small>Choose Supplier</small>
|
|
</div>
|
|
<div class="step">
|
|
<i class="fas fa-edit"></i><br>
|
|
<small>Review Details</small>
|
|
</div>
|
|
<div class="step">
|
|
<i class="fas fa-check"></i><br>
|
|
<small>Generate PO</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Panel -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="filter-panel">
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<label>Category</label>
|
|
<select class="form-control" id="categoryFilter">
|
|
<option value="">All Categories</option>
|
|
<option value="medications">Medications</option>
|
|
<option value="supplies">Medical Supplies</option>
|
|
<option value="equipment">Equipment</option>
|
|
<option value="consumables">Consumables</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Stock Level</label>
|
|
<select class="form-control" id="stockFilter">
|
|
<option value="">All Levels</option>
|
|
<option value="critical">Critical</option>
|
|
<option value="low">Low Stock</option>
|
|
<option value="normal">Normal</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Priority</label>
|
|
<select class="form-control" id="priorityFilter">
|
|
<option value="">All Priorities</option>
|
|
<option value="high">High</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Supplier</label>
|
|
<select class="form-control" id="supplierFilter">
|
|
<option value="">All Suppliers</option>
|
|
<option value="pharmacorp">PharmaCorp</option>
|
|
<option value="medsupply">MedSupply Inc</option>
|
|
<option value="healthcare">Healthcare Solutions</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label>Search</label>
|
|
<input type="text" class="form-control" id="searchFilter" placeholder="Search items...">
|
|
</div>
|
|
<div class="col-md-1">
|
|
<label> </label>
|
|
<button class="btn btn-primary form-control" id="applyFilters">
|
|
<i class="fas fa-filter"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-12">
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-sm btn-outline-danger" id="selectCritical">
|
|
<i class="fas fa-exclamation-triangle"></i> Select Critical Items
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning" id="selectLowStock">
|
|
<i class="fas fa-exclamation"></i> Select Low Stock
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-info" id="selectSuggested">
|
|
<i class="fas fa-lightbulb"></i> Select Suggested Items
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="clearSelection">
|
|
<i class="fas fa-times"></i> Clear Selection
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Items Selection -->
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-boxes"></i> Available Items</h5>
|
|
<div class="card-tools">
|
|
<span class="badge bg-info">0 Selected</span>
|
|
<span class="badge bg-success">Total: $0.00</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Critical Stock Item -->
|
|
<div class="item-card" data-category="medications" data-stock="critical" data-priority="high">
|
|
<div class="row">
|
|
<div class="col-md-1">
|
|
<input type="checkbox" class="form-check-input item-checkbox" value="MED-001234">
|
|
</div>
|
|
<div class="col-md-1">
|
|
<img src="https://via.placeholder.com/60x60/007bff/ffffff?text=MED" class="item-image" alt="Medication">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="item-details">
|
|
<div class="item-name">Morphine 10mg/ml Injectable</div>
|
|
<div class="item-sku">SKU: MED-001234</div>
|
|
<div class="d-flex gap-2 mb-2">
|
|
<span class="category-badge">Controlled Substances</span>
|
|
<span class="priority-badge priority-high">HIGH PRIORITY</span>
|
|
</div>
|
|
<div class="stock-info">
|
|
<div class="stock-level">
|
|
<span>Current: 2</span>
|
|
<div class="stock-bar">
|
|
<div class="stock-fill stock-critical" style="width: 5%"></div>
|
|
</div>
|
|
<span>Min: 50</span>
|
|
</div>
|
|
<span class="lead-time">Lead Time: 3-5 days</span>
|
|
</div>
|
|
<div class="suggested-qty">
|
|
<i class="fas fa-lightbulb"></i> Suggested: 200 units (30-day supply)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Quantity</label>
|
|
<input type="number" class="form-control quantity-input" value="200" min="1">
|
|
<small class="text-muted">Unit: Vials</small>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="price-info">
|
|
<div class="unit-price">$45.50/unit</div>
|
|
<div class="total-price">$9,100.00</div>
|
|
<div class="bulk-discount">
|
|
<i class="fas fa-tag"></i> 5% bulk discount
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Low Stock Item -->
|
|
<div class="item-card" data-category="supplies" data-stock="low" data-priority="medium">
|
|
<div class="row">
|
|
<div class="col-md-1">
|
|
<input type="checkbox" class="form-check-input item-checkbox" value="SUP-005678">
|
|
</div>
|
|
<div class="col-md-1">
|
|
<img src="https://via.placeholder.com/60x60/28a745/ffffff?text=SUP" class="item-image" alt="Supply">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="item-details">
|
|
<div class="item-name">Surgical Gloves (Size M)</div>
|
|
<div class="item-sku">SKU: SUP-005678</div>
|
|
<div class="d-flex gap-2 mb-2">
|
|
<span class="category-badge">Medical Supplies</span>
|
|
<span class="priority-badge priority-medium">MEDIUM PRIORITY</span>
|
|
</div>
|
|
<div class="stock-info">
|
|
<div class="stock-level">
|
|
<span>Current: 45</span>
|
|
<div class="stock-bar">
|
|
<div class="stock-fill stock-low" style="width: 25%"></div>
|
|
</div>
|
|
<span>Min: 100</span>
|
|
</div>
|
|
<span class="lead-time">Lead Time: 1-2 days</span>
|
|
</div>
|
|
<div class="suggested-qty">
|
|
<i class="fas fa-lightbulb"></i> Suggested: 500 boxes (bulk order)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Quantity</label>
|
|
<input type="number" class="form-control quantity-input" value="500" min="1">
|
|
<small class="text-muted">Unit: Boxes</small>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="price-info">
|
|
<div class="unit-price">$12.75/box</div>
|
|
<div class="total-price">$6,375.00</div>
|
|
<div class="bulk-discount">
|
|
<i class="fas fa-tag"></i> 10% bulk discount
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Normal Stock Item -->
|
|
<div class="item-card" data-category="medications" data-stock="normal" data-priority="low">
|
|
<div class="row">
|
|
<div class="col-md-1">
|
|
<input type="checkbox" class="form-check-input item-checkbox" value="MED-002345">
|
|
</div>
|
|
<div class="col-md-1">
|
|
<img src="https://via.placeholder.com/60x60/ffc107/ffffff?text=MED" class="item-image" alt="Medication">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="item-details">
|
|
<div class="item-name">Paracetamol 500mg Tablets</div>
|
|
<div class="item-sku">SKU: MED-002345</div>
|
|
<div class="d-flex gap-2 mb-2">
|
|
<span class="category-badge">Pain Relief</span>
|
|
<span class="priority-badge priority-low">LOW PRIORITY</span>
|
|
</div>
|
|
<div class="stock-info">
|
|
<div class="stock-level">
|
|
<span>Current: 850</span>
|
|
<div class="stock-bar">
|
|
<div class="stock-fill stock-normal" style="width: 75%"></div>
|
|
</div>
|
|
<span>Min: 200</span>
|
|
</div>
|
|
<span class="lead-time">Lead Time: 2-3 days</span>
|
|
</div>
|
|
<div class="suggested-qty">
|
|
<i class="fas fa-lightbulb"></i> Suggested: 1000 tablets (restock)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Quantity</label>
|
|
<input type="number" class="form-control quantity-input" value="1000" min="1">
|
|
<small class="text-muted">Unit: Tablets</small>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="price-info">
|
|
<div class="unit-price">$0.25/tablet</div>
|
|
<div class="total-price">$250.00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Item -->
|
|
<div class="item-card" data-category="equipment" data-stock="normal" data-priority="medium">
|
|
<div class="row">
|
|
<div class="col-md-1">
|
|
<input type="checkbox" class="form-check-input item-checkbox" value="EQP-003456">
|
|
</div>
|
|
<div class="col-md-1">
|
|
<img src="https://via.placeholder.com/60x60/6f42c1/ffffff?text=EQP" class="item-image" alt="Equipment">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="item-details">
|
|
<div class="item-name">Digital Thermometer</div>
|
|
<div class="item-sku">SKU: EQP-003456</div>
|
|
<div class="d-flex gap-2 mb-2">
|
|
<span class="category-badge">Diagnostic Equipment</span>
|
|
<span class="priority-badge priority-medium">MEDIUM PRIORITY</span>
|
|
</div>
|
|
<div class="stock-info">
|
|
<div class="stock-level">
|
|
<span>Current: 15</span>
|
|
<div class="stock-bar">
|
|
<div class="stock-fill stock-normal" style="width: 60%"></div>
|
|
</div>
|
|
<span>Min: 10</span>
|
|
</div>
|
|
<span class="lead-time">Lead Time: 5-7 days</span>
|
|
</div>
|
|
<div class="suggested-qty">
|
|
<i class="fas fa-lightbulb"></i> Suggested: 25 units (department needs)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Quantity</label>
|
|
<input type="number" class="form-control quantity-input" value="25" min="1">
|
|
<small class="text-muted">Unit: Pieces</small>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="price-info">
|
|
<div class="unit-price">$35.00/unit</div>
|
|
<div class="total-price">$875.00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PO Summary & Supplier Selection -->
|
|
<div class="col-md-4">
|
|
<!-- PO Summary -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-calculator"></i> Purchase Order Summary</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="po-summary">
|
|
<div class="summary-row">
|
|
<span>Selected Items:</span>
|
|
<span id="selectedCount">0</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Subtotal:</span>
|
|
<span id="subtotal">$0.00</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Bulk Discounts:</span>
|
|
<span id="discounts">-$0.00</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Tax (8.5%):</span>
|
|
<span id="tax">$0.00</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Shipping:</span>
|
|
<span id="shipping">$0.00</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Total Amount:</span>
|
|
<span id="totalAmount">$0.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Supplier Selection -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-building"></i> Select Supplier</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="supplier-card selected">
|
|
<div class="supplier-name">PharmaCorp International</div>
|
|
<div class="supplier-rating">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
4.8/5
|
|
</div>
|
|
<div class="supplier-info">
|
|
<i class="fas fa-phone"></i> +1-555-0123<br>
|
|
<i class="fas fa-envelope"></i> orders@pharmacorp.com<br>
|
|
<i class="fas fa-map-marker-alt"></i> New York, NY
|
|
</div>
|
|
<div class="delivery-info">
|
|
<strong>Delivery:</strong> 3-5 business days<br>
|
|
<strong>Payment Terms:</strong> Net 30<br>
|
|
<strong>Minimum Order:</strong> $500
|
|
</div>
|
|
</div>
|
|
|
|
<div class="supplier-card">
|
|
<div class="supplier-name">MedSupply Solutions</div>
|
|
<div class="supplier-rating">
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="far fa-star"></i>
|
|
4.2/5
|
|
</div>
|
|
<div class="supplier-info">
|
|
<i class="fas fa-phone"></i> +1-555-0456<br>
|
|
<i class="fas fa-envelope"></i> sales@medsupply.com<br>
|
|
<i class="fas fa-map-marker-alt"></i> Chicago, IL
|
|
</div>
|
|
<div class="delivery-info">
|
|
<strong>Delivery:</strong> 2-4 business days<br>
|
|
<strong>Payment Terms:</strong> Net 15<br>
|
|
<strong>Minimum Order:</strong> $300
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delivery Information -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-truck"></i> Delivery Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-group mb-3">
|
|
<label>Delivery Address</label>
|
|
<select class="form-control">
|
|
<option>Main Hospital - 123 Medical Center Dr</option>
|
|
<option>Pharmacy Department - Building A</option>
|
|
<option>Emergency Department - Building B</option>
|
|
<option>ICU - Floor 3</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label>Requested Delivery Date</label>
|
|
<input type="date" class="form-control" value="2024-02-01">
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label>Special Instructions</label>
|
|
<textarea class="form-control" rows="3" placeholder="Any special delivery instructions..."></textarea>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="urgentDelivery">
|
|
<label class="form-check-label" for="urgentDelivery">
|
|
Urgent delivery required
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Approval Section -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="approval-section">
|
|
<h6><i class="fas fa-user-check"></i> Approval Required</h6>
|
|
<p>This purchase order requires approval due to the total amount exceeding $5,000.</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label>Approver</label>
|
|
<select class="form-control">
|
|
<option>Dr. Sarah Johnson - Department Head</option>
|
|
<option>Michael Chen - Procurement Manager</option>
|
|
<option>Lisa Rodriguez - Finance Director</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label>Justification</label>
|
|
<textarea class="form-control" rows="2" placeholder="Reason for this purchase order..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Item selection
|
|
$('.item-checkbox').change(function() {
|
|
var card = $(this).closest('.item-card');
|
|
if ($(this).is(':checked')) {
|
|
card.addClass('selected');
|
|
} else {
|
|
card.removeClass('selected');
|
|
}
|
|
updateSummary();
|
|
});
|
|
|
|
// Quantity change
|
|
$('.quantity-input').change(function() {
|
|
updateSummary();
|
|
});
|
|
|
|
// Supplier selection
|
|
$('.supplier-card').click(function() {
|
|
$('.supplier-card').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
updateSummary();
|
|
});
|
|
|
|
// Filter functionality
|
|
$('#applyFilters').click(function() {
|
|
var category = $('#categoryFilter').val();
|
|
var stock = $('#stockFilter').val();
|
|
var priority = $('#priorityFilter').val();
|
|
var supplier = $('#supplierFilter').val();
|
|
var search = $('#searchFilter').val().toLowerCase();
|
|
|
|
$('.item-card').each(function() {
|
|
var show = true;
|
|
|
|
if (category && $(this).data('category') !== category) {
|
|
show = false;
|
|
}
|
|
|
|
if (stock && $(this).data('stock') !== stock) {
|
|
show = false;
|
|
}
|
|
|
|
if (priority && $(this).data('priority') !== priority) {
|
|
show = false;
|
|
}
|
|
|
|
if (search && !$(this).text().toLowerCase().includes(search)) {
|
|
show = false;
|
|
}
|
|
|
|
$(this).toggle(show);
|
|
});
|
|
});
|
|
|
|
// Quick selection buttons
|
|
$('#selectCritical').click(function() {
|
|
$('.item-card[data-stock="critical"] .item-checkbox').prop('checked', true).trigger('change');
|
|
});
|
|
|
|
$('#selectLowStock').click(function() {
|
|
$('.item-card[data-stock="low"] .item-checkbox').prop('checked', true).trigger('change');
|
|
});
|
|
|
|
$('#selectSuggested').click(function() {
|
|
$('.item-card[data-priority="high"] .item-checkbox').prop('checked', true).trigger('change');
|
|
});
|
|
|
|
$('#clearSelection').click(function() {
|
|
$('.item-checkbox').prop('checked', false).trigger('change');
|
|
});
|
|
|
|
// Action buttons
|
|
$('#saveDraft').click(function() {
|
|
alert('Purchase order saved as draft');
|
|
});
|
|
|
|
$('#previewPO').click(function() {
|
|
alert('Opening purchase order preview...');
|
|
});
|
|
|
|
$('#generatePO').click(function() {
|
|
var selectedItems = $('.item-checkbox:checked').length;
|
|
if (selectedItems === 0) {
|
|
alert('Please select at least one item');
|
|
return;
|
|
}
|
|
|
|
if (confirm('Generate purchase order for ' + selectedItems + ' items?')) {
|
|
alert('Purchase order generated successfully!');
|
|
}
|
|
});
|
|
|
|
// Update summary
|
|
function updateSummary() {
|
|
var selectedCount = $('.item-checkbox:checked').length;
|
|
var subtotal = 0;
|
|
var discounts = 0;
|
|
|
|
$('.item-checkbox:checked').each(function() {
|
|
var card = $(this).closest('.item-card');
|
|
var quantity = parseInt(card.find('.quantity-input').val()) || 0;
|
|
var unitPrice = parseFloat(card.find('.unit-price').text().replace('$', '').replace('/unit', '').replace('/box', '').replace('/tablet', '')) || 0;
|
|
var itemTotal = quantity * unitPrice;
|
|
|
|
subtotal += itemTotal;
|
|
|
|
// Calculate bulk discounts
|
|
if (card.find('.bulk-discount').length > 0) {
|
|
var discountText = card.find('.bulk-discount').text();
|
|
var discountPercent = parseInt(discountText.match(/\d+/)) || 0;
|
|
discounts += itemTotal * (discountPercent / 100);
|
|
}
|
|
|
|
// Update item total display
|
|
card.find('.total-price').text('$' + itemTotal.toLocaleString('en-US', {minimumFractionDigits: 2}));
|
|
});
|
|
|
|
var afterDiscount = subtotal - discounts;
|
|
var tax = afterDiscount * 0.085;
|
|
var shipping = selectedCount > 0 ? 50 : 0;
|
|
var total = afterDiscount + tax + shipping;
|
|
|
|
$('#selectedCount').text(selectedCount);
|
|
$('#subtotal').text('$' + subtotal.toLocaleString('en-US', {minimumFractionDigits: 2}));
|
|
$('#discounts').text('-$' + discounts.toLocaleString('en-US', {minimumFractionDigits: 2}));
|
|
$('#tax').text('$' + tax.toLocaleString('en-US', {minimumFractionDigits: 2}));
|
|
$('#shipping').text('$' + shipping.toLocaleString('en-US', {minimumFractionDigits: 2}));
|
|
$('#totalAmount').text('$' + total.toLocaleString('en-US', {minimumFractionDigits: 2}));
|
|
|
|
// Update card tools
|
|
$('.card-tools .badge:contains("Selected")').text(selectedCount + ' Selected');
|
|
$('.card-tools .badge:contains("Total")').text('Total: $' + total.toLocaleString('en-US', {minimumFractionDigits: 2}));
|
|
}
|
|
|
|
// Initialize
|
|
updateSummary();
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|