updated to set boxes , and updated to fill boxes
This commit is contained in:
ske087
348
py_app/app/templates/warehouse_inventory.html
Normal file
348
py_app/app/templates/warehouse_inventory.html
Normal file
@@ -0,0 +1,348 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Warehouse Inventory{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/warehouse.css') }}">
|
||||
<style>
|
||||
.inventory-container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.inventory-container h2 {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.inventory-table-container h3 {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
body.dark-mode .inventory-container h2 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .inventory-table-container h3 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
background: #f8fafc;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.search-panel h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-field label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: #334155;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.search-field input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95em;
|
||||
background: white;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
body.dark-mode .search-panel {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
|
||||
body.dark-mode .search-panel h3 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .search-field label {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
body.dark-mode .search-field input {
|
||||
background: #0f172a;
|
||||
border: 1px solid #334155;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .search-field input::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.inventory-table-container {
|
||||
background: #f8fafc;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
overflow-x: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .inventory-table-container {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
|
||||
.inventory-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.inventory-table th,
|
||||
.inventory-table td {
|
||||
border: 1px solid #cbd5e1;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.inventory-table th {
|
||||
background-color: #e2e8f0;
|
||||
font-weight: bold;
|
||||
color: #334155;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.inventory-table tbody tr:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
body.dark-mode .inventory-table th,
|
||||
body.dark-mode .inventory-table td {
|
||||
border: 1px solid #334155;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark-mode .inventory-table th {
|
||||
background-color: #0f172a;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
body.dark-mode .inventory-table tbody tr:hover {
|
||||
background-color: #334155;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-open {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status-closed {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background-color: #d1ecf1;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body.dark-mode .no-data {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
border-left: 4px solid #007bff;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.stat-card h4 {
|
||||
margin: 0;
|
||||
font-size: 0.85em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stat-card .stat-value {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: #1e293b;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
body.dark-mode .stat-card {
|
||||
background: #0f172a;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
|
||||
body.dark-mode .stat-card h4 {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
body.dark-mode .stat-card .stat-value {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="inventory-container">
|
||||
<h2>Warehouse Inventory - Products/Boxes/Locations</h2>
|
||||
|
||||
<!-- Search Panel -->
|
||||
<div class="search-panel">
|
||||
<h3>🔍 Search Inventory</h3>
|
||||
<form method="GET" class="search-form">
|
||||
<div class="search-field">
|
||||
<label for="search_cp">CP Code:</label>
|
||||
<input type="text" id="search_cp" name="search_cp" value="{{ search_cp }}" placeholder="Search by CP code...">
|
||||
</div>
|
||||
|
||||
<div class="search-field">
|
||||
<label for="search_box">Box Number:</label>
|
||||
<input type="text" id="search_box" name="search_box" value="{{ search_box }}" placeholder="Search by box number...">
|
||||
</div>
|
||||
|
||||
<div class="search-field">
|
||||
<label for="search_location">Location:</label>
|
||||
<input type="text" id="search_location" name="search_location" value="{{ search_location }}" placeholder="Search by location...">
|
||||
</div>
|
||||
|
||||
<div class="search-buttons">
|
||||
<button type="submit" class="btn" style="background: #007bff;">Search</button>
|
||||
<a href="{{ url_for('warehouse.warehouse_inventory') }}" class="btn" style="background: #6c757d;">Clear</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Summary Statistics -->
|
||||
{% if inventory_data %}
|
||||
<div class="summary-stats">
|
||||
<div class="stat-card">
|
||||
<h4>Total Records</h4>
|
||||
<div class="stat-value">{{ inventory_data|length }}</div>
|
||||
</div>
|
||||
<div class="stat-card" style="border-left-color: #28a745;">
|
||||
<h4>Unique CP Codes</h4>
|
||||
<div class="stat-value">{{ inventory_data|map(attribute=0)|unique|list|length }}</div>
|
||||
</div>
|
||||
<div class="stat-card" style="border-left-color: #ffc107;">
|
||||
<h4>Unique Boxes</h4>
|
||||
<div class="stat-value">{{ inventory_data|map(attribute=1)|unique|list|length }}</div>
|
||||
</div>
|
||||
<div class="stat-card" style="border-left-color: #17a2b8;">
|
||||
<h4>Locations Used</h4>
|
||||
<div class="stat-value">{{ inventory_data|map(attribute=2)|select|unique|list|length }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Inventory Table -->
|
||||
<div class="inventory-table-container">
|
||||
<h3>Inventory Details</h3>
|
||||
|
||||
{% if inventory_data %}
|
||||
<table class="inventory-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>CP Code</th>
|
||||
<th>Box Number</th>
|
||||
<th>Location</th>
|
||||
<th>Scanned At</th>
|
||||
<th>Scanned By</th>
|
||||
<th>Placed At Location</th>
|
||||
<th>Placed By</th>
|
||||
<th>Box Status</th>
|
||||
<th>Location Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in inventory_data %}
|
||||
<tr>
|
||||
<td><strong>{{ row[0] }}</strong></td>
|
||||
<td>{{ row[1] }}</td>
|
||||
<td>{{ row[2] or '<span style="color: #999;">Not assigned</span>'|safe }}</td>
|
||||
<td>{{ row[3].strftime('%Y-%m-%d %H:%M') if row[3] else '' }}</td>
|
||||
<td>{{ row[4] or '' }}</td>
|
||||
<td>{{ row[5].strftime('%Y-%m-%d %H:%M') if row[5] else '' }}</td>
|
||||
<td>{{ row[6] or '' }}</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ row[7] }}">
|
||||
{{ row[7]|upper if row[7] else 'N/A' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if row[8] %}
|
||||
<span class="status-badge status-{{ row[8] }}">
|
||||
{{ row[8]|upper }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span style="color: #999;">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="no-data">
|
||||
<p>📦 No inventory data found</p>
|
||||
{% if search_cp or search_box or search_location %}
|
||||
<p>Try adjusting your search criteria</p>
|
||||
{% else %}
|
||||
<p>Start scanning products to boxes to populate inventory</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user