shipment Changes
This commit is contained in:
Utkarsh Khedkar
@@ -1204,6 +1204,101 @@ body, .container-fluid {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
/* =====================================================
|
||||
GLOBAL EDGE-TO-EDGE + ZOOM SAFE PATCH (CSS ONLY)
|
||||
===================================================== */
|
||||
|
||||
/* 1️⃣ Kill boxed layouts on desktop & zoom */
|
||||
html, body {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
/* 2️⃣ Force container-fluid to truly span full width */
|
||||
.container-fluid {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding-left: clamp(12px, 1.8vw, 28px) !important;
|
||||
padding-right: clamp(12px, 1.8vw, 28px) !important;
|
||||
}
|
||||
|
||||
/* 3️⃣ Zoom-safe scaling (VERY IMPORTANT) */
|
||||
body {
|
||||
font-size: clamp(14px, 0.95vw, 16px);
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
DASHBOARD CARD & GRID FIXES (NO HTML CHANGE)
|
||||
===================================================== */
|
||||
|
||||
/* 4️⃣ Make stat grids auto-adjust on zoom */
|
||||
.stats-row,
|
||||
.shipment-totals-row {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
|
||||
gap: clamp(12px, 1.5vw, 20px) !important;
|
||||
}
|
||||
|
||||
/* 5️⃣ Prevent hover zoom breaking layout */
|
||||
.stats-card:hover,
|
||||
.card:hover,
|
||||
.table tbody tr:hover {
|
||||
transform: translateY(-4px) !important;
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
TABLE ZOOM FIX (NO MORE CRUSHING / OVERFLOW)
|
||||
===================================================== */
|
||||
|
||||
/* 6️⃣ Tables behave like shipment page */
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* 7️⃣ Remove hard min-widths that break zoom */
|
||||
.table,
|
||||
.custom-table-modal,
|
||||
.shipment-details-table {
|
||||
width: 100% !important;
|
||||
min-width: max-content !important;
|
||||
}
|
||||
|
||||
/* 8️⃣ Let text wrap naturally when zoomed */
|
||||
.table td,
|
||||
.table th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
MODALS – EDGE TO EDGE WITHOUT TOUCHING MARKUP
|
||||
===================================================== */
|
||||
|
||||
.modal-xl {
|
||||
max-width: 96vw !important;
|
||||
width: 96vw !important;
|
||||
margin: 1vh auto !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-xl {
|
||||
max-width: 100vw !important;
|
||||
width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
height: 100vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
FINAL SAFETY – PREVENT LAYOUT SHRINK ON ZOOM
|
||||
===================================================== */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid py-3">
|
||||
@@ -1666,24 +1761,98 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
function addRow(index) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td class="align-middle fw-bold">${index + 1}</td>
|
||||
<td><input type="text" class="form-control form-control-sm items-input" name="items[${index}][description]" data-field="description"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ctn]" data-field="ctn"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][qty]" data-field="qty"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_qty]" data-field="ttl_qty"></td>
|
||||
<td><input type="text" class="form-control form-control-sm items-input" name="items[${index}][unit]" data-field="unit"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][price]" data-field="price" step="0.01"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_amount]" data-field="ttl_amount" step="0.01"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][cbm]" data-field="cbm" step="0.001"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_cbm]" data-field="ttl_cbm" step="0.001"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][kg]" data-field="kg" step="0.001"></td>
|
||||
<td><input type="number" class="form-control form-control-sm items-input" name="items[${index}][ttl_kg]" data-field="ttl_kg" step="0.001"></td>
|
||||
<td><input type="text" class="form-control form-control-sm items-input" name="items[${index}][shop_no]" data-field="shop_no"></td>
|
||||
<td><button type="button" class="btn btn-sm btn-danger remove-row-btn">×</button></td>
|
||||
`;
|
||||
<td class="align-middle fw-bold">${index + 1}</td>
|
||||
|
||||
<td>
|
||||
<input type="text" class="form-control form-control-sm items-input"name="items[${index}][description]"data-field="description">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm items-input"name="items[${index}][ctn]"data-field="ctn">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm items-input"name="items[${index}][qty]"data-field="qty">
|
||||
</td>
|
||||
|
||||
<!-- 🔒 AUTO: TTL/QTY = CTN * QTY -->
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm bg-light"name="items[${index}][ttl_qty]"data-field="ttl_qty"readonly>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input type="text" class="form-control form-control-sm items-input"name="items[${index}][unit]"data-field="unit">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm items-input"name="items[${index}][price]"data-field="price"step="0.01">
|
||||
</td>
|
||||
|
||||
<!-- 🔒 AUTO: TTL AMOUNT = TTL/QTY * PRICE -->
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm bg-light"name="items[${index}][ttl_amount]"data-field="ttl_amount"step="0.001"readonly>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm items-input"name="items[${index}][cbm]"data-field="cbm"step="0.0001">
|
||||
</td>
|
||||
|
||||
<!-- 🔒 AUTO: TTL CBM = CBM * QTY -->
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm bg-light"name="items[${index}][ttl_cbm]"data-field="ttl_cbm"step="0.0001"readonly>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm items-input"name="items[${index}][kg]"data-field="kg"step="0.0001">
|
||||
</td>
|
||||
|
||||
<!-- 🔒 AUTO: TTL KG = CTN * KG -->
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm bg-light"name="items[${index}][ttl_kg]"data-field="ttl_kg"step="0.0001"readonly>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input type="text" class="form-control form-control-sm items-input"name="items[${index}][shop_no]"data-field="shop_no">
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-danger remove-row-btn">×</button>
|
||||
</td>
|
||||
`;
|
||||
|
||||
itemsTableBody.appendChild(tr);
|
||||
}
|
||||
|
||||
function calculateRow(row) {
|
||||
const ctn = parseFloat(row.querySelector('[data-field="ctn"]')?.value) || 0;
|
||||
const qty = parseFloat(row.querySelector('[data-field="qty"]')?.value) || 0;
|
||||
const price = parseFloat(row.querySelector('[data-field="price"]')?.value) || 0;
|
||||
const cbm = parseFloat(row.querySelector('[data-field="cbm"]')?.value) || 0;
|
||||
const kg = parseFloat(row.querySelector('[data-field="kg"]')?.value) || 0;
|
||||
|
||||
const ttlQty = ctn * qty;
|
||||
const ttlAmount = ttlQty * price;
|
||||
const ttlCbm = cbm * ctn;
|
||||
const ttlKg = ctn * kg;
|
||||
|
||||
row.querySelector('[data-field="ttl_qty"]').value = ttlQty.toFixed(2);
|
||||
row.querySelector('[data-field="ttl_amount"]').value = ttlAmount.toFixed(2);
|
||||
row.querySelector('[data-field="ttl_cbm"]').value = ttlCbm.toFixed(3);
|
||||
row.querySelector('[data-field="ttl_kg"]').value = ttlKg.toFixed(3);
|
||||
}
|
||||
|
||||
itemsTableBody.addEventListener('input', function (e) {
|
||||
const row = e.target.closest('tr');
|
||||
if (!row) return;
|
||||
|
||||
const calcFields = ['ctn', 'qty', 'price', 'cbm', 'kg'];
|
||||
if (calcFields.includes(e.target.dataset.field)) {
|
||||
calculateRow(row);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function generateDefaultRows() {
|
||||
itemsTableBody.innerHTML = '';
|
||||
addRow(0);
|
||||
@@ -2094,6 +2263,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
}
|
||||
|
||||
function populateItemsTable(items) {
|
||||
itemsTableBody.innerHTML = '';
|
||||
|
||||
function populateItemsTable(items) {
|
||||
itemsTableBody.innerHTML = '';
|
||||
|
||||
@@ -2102,21 +2274,21 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const row = itemsTableBody.children[index];
|
||||
|
||||
row.querySelector('[data-field="description"]').value = item.description ?? '';
|
||||
row.querySelector('[data-field="ctn"]').value = item.ctn ?? '';
|
||||
row.querySelector('[data-field="qty"]').value = item.qty ?? '';
|
||||
row.querySelector('[data-field="ttl_qty"]').value = item.ttl_qty ?? '';
|
||||
row.querySelector('[data-field="ctn"]').value = item.ctn ?? 0;
|
||||
row.querySelector('[data-field="qty"]').value = item.qty ?? 0;
|
||||
row.querySelector('[data-field="unit"]').value = item.unit ?? '';
|
||||
row.querySelector('[data-field="price"]').value = item.price ?? '';
|
||||
row.querySelector('[data-field="ttl_amount"]').value = item.ttl_amount ?? '';
|
||||
row.querySelector('[data-field="cbm"]').value = item.cbm ?? '';
|
||||
row.querySelector('[data-field="ttl_cbm"]').value = item.ttl_cbm ?? '';
|
||||
row.querySelector('[data-field="kg"]').value = item.kg ?? '';
|
||||
row.querySelector('[data-field="ttl_kg"]').value = item.ttl_kg ?? '';
|
||||
row.querySelector('[data-field="price"]').value= item.price ?? 0;
|
||||
row.querySelector('[data-field="cbm"]').value = item.cbm ?? 0;
|
||||
row.querySelector('[data-field="kg"]').value = item.kg ?? 0;
|
||||
row.querySelector('[data-field="shop_no"]').value = item.shop_no ?? '';
|
||||
|
||||
// 🔥 ALWAYS RECALCULATE
|
||||
calculateRow(row);
|
||||
});
|
||||
|
||||
reindexRows();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user