All Kent Code Updated
This commit is contained in:
Utkarsh Khedkar
@@ -6,6 +6,7 @@
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<style>
|
||||
/* ---------- Base ---------- */
|
||||
|
||||
:root{
|
||||
--primary-1:#1a2951;
|
||||
--primary-2:#243a72;
|
||||
@@ -37,7 +38,7 @@ body {
|
||||
/* header */
|
||||
.account-header {
|
||||
margin-bottom: 18px;
|
||||
background: linear-gradient(90deg,var(--primary-1),var(--primary-2));
|
||||
background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 22px 26px;
|
||||
border-radius: var(--rounded);
|
||||
box-shadow: 0 6px 18px rgba(34,50,90,0.12);
|
||||
@@ -62,7 +63,7 @@ body {
|
||||
|
||||
.btn {
|
||||
display:inline-flex; align-items:center; justify-content:center; gap:8px;
|
||||
background: linear-gradient(90deg,var(--primary-1),var(--primary-2));
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color:#fff; border:none; padding:10px 16px; border-radius:10px; font-weight:600;
|
||||
cursor:pointer; transition: transform .15s ease, box-shadow .15s;
|
||||
}
|
||||
@@ -334,7 +335,7 @@ tr:hover td{ background:#fbfdff; }
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
/* margin-right:-550px; */
|
||||
margin-right:-550px;
|
||||
|
||||
}
|
||||
|
||||
@@ -342,7 +343,7 @@ tr:hover td{ background:#fbfdff; }
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-right:-550px;
|
||||
margin-right:8=500px;
|
||||
|
||||
}
|
||||
|
||||
@@ -458,7 +459,7 @@ tr:hover td{ background:#fbfdff; }
|
||||
filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
|
||||
}
|
||||
|
||||
/* ---------- Entry Details Modal (existing) ---------- */
|
||||
/* ---------- Entry Details Modal (Enhanced) ---------- */
|
||||
.modal-fade1 {
|
||||
position:fixed;
|
||||
inset:0;
|
||||
@@ -471,15 +472,18 @@ tr:hover td{ background:#fbfdff; }
|
||||
}
|
||||
.modal-fade1.modal-open { display:flex; }
|
||||
.modal-box1 {
|
||||
background:#fff;
|
||||
border-radius:12px;
|
||||
padding:20px 24px;
|
||||
box-shadow:0 14px 40px rgba(18,30,60,0.12);
|
||||
max-width:1200px;
|
||||
width:100%;
|
||||
max-height:92vh;
|
||||
overflow:auto;
|
||||
min-height: 500px;
|
||||
background:#fff;
|
||||
border-radius:12px;
|
||||
padding:20px 24px;
|
||||
box-shadow:0 14px 40px rgba(18,30,60,0.12);
|
||||
max-width:1200px;
|
||||
width:100%;
|
||||
max-height:92vh;
|
||||
overflow:auto;
|
||||
min-height: 500px;
|
||||
}
|
||||
#entryOrdersModal {
|
||||
z-index: 1300;
|
||||
}
|
||||
#entryOrdersModal {
|
||||
z-index: 1300;
|
||||
@@ -489,7 +493,7 @@ tr:hover td{ background:#fbfdff; }
|
||||
.entry-summary-cards {
|
||||
display:flex;
|
||||
gap:16px;
|
||||
margin-bottom:20px;
|
||||
margin-top:25px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.entry-summary-card {
|
||||
@@ -504,6 +508,184 @@ tr:hover td{ background:#fbfdff; }
|
||||
.entry-summary-label{ font-size:12px; color:var(--muted); }
|
||||
.entry-summary-value{ font-size:18px; font-weight:700; color:#253047; margin-top:6px; }
|
||||
|
||||
/* Enhanced dropdown */
|
||||
.installment-status-dropdown {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
padding: 10px 40px 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid #e3eaf6;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.installment-status-dropdown:hover {
|
||||
border-color: #c2d1f0;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.installment-status-dropdown:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(39, 109, 234, 0.1);
|
||||
}
|
||||
|
||||
/* Status-specific dropdown options */
|
||||
.installment-status-dropdown option {
|
||||
padding: 12px !important;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.installment-status-dropdown option[value="Pending"] {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.installment-status-dropdown option[value="Loading"] {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.installment-status-dropdown option[value="Packed"] {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.installment-status-dropdown option[value="Dispatched"] {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.installment-status-dropdown option[value="Delivered"] {
|
||||
color: #0c6b2e;
|
||||
}
|
||||
|
||||
/* ---------- Entry Orders Modal (Enhanced) ---------- */
|
||||
.entry-orders-modal .modal-box1 {
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(18, 30, 60, 0.25);
|
||||
}
|
||||
|
||||
.entry-orders-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 24px 30px;
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
.entry-orders-header h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.entry-orders-header .subtitle {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.entry-orders-content {
|
||||
padding: 30px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Orders table in modal */
|
||||
.orders-table-container {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #eef3fb;
|
||||
border-radius: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.orders-table th {
|
||||
background: linear-gradient(90deg, #f8fbff, #f5f9ff);
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--primary-1);
|
||||
border-bottom: 2px solid #eef3fb;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.orders-table td {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #f1f6ff;
|
||||
}
|
||||
|
||||
.orders-table tr:hover {
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.orders-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Order ID with badge style */
|
||||
.order-id-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, #f0f7ff, #e6f0ff);
|
||||
color: var(--primary-1);
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
border: 1px solid #dbe4f5;
|
||||
}
|
||||
|
||||
/* Summary row */
|
||||
.orders-summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(90deg, #e6ebf5 0%, #f9fbff 100%);
|
||||
|
||||
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #eef3fb;
|
||||
}
|
||||
|
||||
.orders-summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.orders-summary-value {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-1);
|
||||
}
|
||||
|
||||
.orders-summary-label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* installment modal */
|
||||
#installmentModal .modal-box1 { max-width:720px; min-width:380px; }
|
||||
|
||||
@@ -828,7 +1010,10 @@ tr:hover td{ background:#fbfdff; }
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 14px;
|
||||
background: linear-gradient(90deg, #f9fbff, #f7faff);
|
||||
background:linear-gradient(90deg, #e6ebf5 0%, #f9fbff 100%);
|
||||
|
||||
|
||||
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eef3fb;
|
||||
}
|
||||
@@ -1110,6 +1295,40 @@ tr:hover td{ background:#fbfdff; }
|
||||
.pagination-container {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Responsive modals */
|
||||
|
||||
|
||||
.entry-details-modal .modal-box1,
|
||||
.entry-orders-modal .modal-box1 {
|
||||
margin: 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.entry-details-header,
|
||||
.entry-orders-header {
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.entry-details-content,
|
||||
.entry-orders-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.entry-summary-cards {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.entry-summary-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.orders-summary-row {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Zoom out specific fix */
|
||||
@@ -1146,6 +1365,10 @@ tr:hover td{ background:#fbfdff; }
|
||||
.pagination-info {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.entry-summary-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent horizontal scroll on very small screens */
|
||||
@@ -1178,6 +1401,7 @@ html, body {
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="account-container">
|
||||
@@ -1323,7 +1547,7 @@ html, body {
|
||||
<!-- CREATE ORDER POPUP MODAL -->
|
||||
<div class="create-order-modal" id="createOrderModal">
|
||||
<div class="modal-box">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding:20px; border-radius:12px; color:white; margin-top:-20px; margin-left:-20px; margin-right:-15px; margin-top:-15px;">
|
||||
<div style="font-size:20px; font-weight:800;">Create New Installment</div>
|
||||
<button class="btn ghost" id="closeCreateModal" title="Close create form">✕</button>
|
||||
</div>
|
||||
@@ -1415,111 +1639,159 @@ html, body {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ENTRY DETAILS MODAL -->
|
||||
<div class="modal-fade1" id="entryDetailsModal">
|
||||
<div class="modal-box1 entry-details-modal">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||||
<div>
|
||||
<h2 style="margin:0;font-size:20px;color:#223256;font-weight:800">Entry Details — <span id="entryDetailsId">-</span></h2>
|
||||
<div style="font-size:13px;color:var(--muted)">Complete view of all installments for this entry.</div>
|
||||
<!-- ENTRY DETAILS MODAL (Enhanced) -->
|
||||
<div class="modal-fade1 entry-details-modal" id="entryDetailsModal">
|
||||
<div class="modal-box1">
|
||||
<div class="entry-details-header" >
|
||||
<h2 >Entry Details</h2>
|
||||
<div class="subtitle">
|
||||
<span id="entryDetailsId">Loading...</span>
|
||||
<span>• Complete view of all installments for this entry</span>
|
||||
</div>
|
||||
<div><button class="btn ghost" onclick="closeEntryDetailsModal()">Close</button></div>
|
||||
</div>
|
||||
|
||||
<div class="entry-details-content">
|
||||
<div class="entry-summary-cards">
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||||
</svg>
|
||||
Original Amount
|
||||
</div>
|
||||
<div class="entry-summary-value" id="originalAmount">-</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||||
</svg>
|
||||
Total Processed
|
||||
</div>
|
||||
<div class="entry-summary-value" id="totalProcessed">-</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
|
||||
</svg>
|
||||
Pending Balance
|
||||
</div>
|
||||
<div class="entry-summary-value" id="pendingBalance">-</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
Total Installments
|
||||
</div>
|
||||
<div class="entry-summary-value" id="totalInstallments">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry-summary-cards">
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Original Amount</div>
|
||||
<div class="entry-summary-value" id="originalAmount">-</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Total Processed</div>
|
||||
<div class="entry-summary-value" id="totalProcessed">-</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Pending Balance</div>
|
||||
<div class="entry-summary-value" id="pendingBalance">-</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Total Installments</div>
|
||||
<div class="entry-summary-value" id="totalInstallments">-</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<h3 style="font-size: 18px; font-weight: 700; color: var(--primary-1); margin-bottom: 16px;">
|
||||
Installment History
|
||||
</h3>
|
||||
|
||||
<div class="orders-table-container">
|
||||
<table class="entry-installments-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Installment</th>
|
||||
<th>Date</th>
|
||||
<th>Description</th>
|
||||
<th>Region</th>
|
||||
<th>Amount</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="installmentsTableBody">
|
||||
<tr><td colspan="6" class="empty-state">No installments yet</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="entry-installments-table" style="width:100%; border-collapse:collapse;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Installment</th>
|
||||
<th>Date</th>
|
||||
<th>Description</th>
|
||||
<th>Region</th>
|
||||
<th>Amount</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="installmentsTableBody">
|
||||
<tr><td colspan="6" class="empty-state">No installments yet</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="display:flex; justify-content: flex-end; gap:12px; margin-top:16px;">
|
||||
<button type="button" class="btn ghost" onclick="closeEntryDetailsModal()">Close</button>
|
||||
<div style="padding: 20px 30px; border-top: 1px solid #eef3fb; display: flex; justify-content: space-between; align-items: center;">
|
||||
<button type="button" class="btn ghost" onclick="closeEntryDetailsModal()">
|
||||
Close
|
||||
</button>
|
||||
@can('account.add_installment')
|
||||
<button type="button" class="btn" id="addInstallmentFromDetails">+ Add New Installment</button>
|
||||
<button type="button" class="btn" id="addInstallmentFromDetails">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
Add New Installment
|
||||
</button>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ENTRY ORDERS MODAL -->
|
||||
<div class="modal-fade1" id="entryOrdersModal">
|
||||
<div class="modal-box1" style="max-width: 1000px;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
|
||||
<div>
|
||||
<h2 style="margin:0;font-size:20px;color:#223256;font-weight:800;">
|
||||
Entry Orders
|
||||
<span id="entryOrdersEntryNo-span" style="font-size:14px;color:#6b7280;margin-left:8px;"></span>
|
||||
</h2>
|
||||
<div style="font-size:13px;color:#6f7b8f;">
|
||||
All orders associated with this entry.
|
||||
<!-- ENTRY ORDERS MODAL (Enhanced) -->
|
||||
<div class="modal-fade1 entry-orders-modal" id="entryOrdersModal">
|
||||
<div class="modal-box1">
|
||||
<div class="entry-orders-header">
|
||||
<h2>Entry Orders</h2>
|
||||
<div class="subtitle">
|
||||
<span id="entryOrdersEntryNo-span">Loading...</span>
|
||||
<span>• All orders associated with this entry</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry-orders-content">
|
||||
<div class="orders-table-container">
|
||||
<table class="orders-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Mark No</th>
|
||||
<th>Origin</th>
|
||||
<th>Destination</th>
|
||||
<th>CTN</th>
|
||||
<th>QTY</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="entryOrdersTableBody">
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">Loading orders...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="orders-summary-row">
|
||||
<div class="orders-summary-item">
|
||||
<div class="orders-summary-value" id="ordersTotalCount">0</div>
|
||||
<div class="orders-summary-label">Total Orders</div>
|
||||
</div>
|
||||
<div class="orders-summary-item">
|
||||
<div class="orders-summary-value" id="ordersTotalQuantity">0</div>
|
||||
<div class="orders-summary-label">Total Quantity</div>
|
||||
</div>
|
||||
<div class="orders-summary-item">
|
||||
<div class="orders-summary-value" id="ordersTotalAmount">₹0</div>
|
||||
<div class="orders-summary-label">Total Amount</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn ghost" type="button" onclick="closeEntryOrdersModal()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="orders-table-container">
|
||||
<table class="orders-table" style="width:100%;border-collapse:collapse;font-size:13px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Mark No</th>
|
||||
<th>Origin</th>
|
||||
<th>Destination</th>
|
||||
<th>CTN</th>
|
||||
<th>QTY</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="entryOrdersTableBody">
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">No orders associated with this entry</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="padding: 20px 30px; border-top: 1px solid #eef3fb; display: flex; justify-content: flex-end;">
|
||||
<button class="btn ghost" type="button" onclick="closeEntryOrdersModal()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Installment Modal -->
|
||||
<div class="modal-fade1" id="installmentModal">
|
||||
<div class="modal-box1" style="max-width:720px;">
|
||||
<div style="display:flex;align-items:center; justify-content:space-between; margin-bottom:12px;">
|
||||
<div style="display:flex;align-items:center; justify-content:space-between; margin-bottom:12px; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding:16px; border-radius:8px; color:white; margin-top:-15px; margin-left:-20px; margin-right:-15px;">
|
||||
<div style="font-size:18px;font-weight:800;color:#243a72;">+ Add New Installment</div>
|
||||
<button class="btn ghost" onclick="closeInstallmentModal()">✕</button>
|
||||
</div>
|
||||
@@ -2784,76 +3056,98 @@ async function submitEditEntry(e) {
|
||||
}
|
||||
|
||||
|
||||
function openEntryOrdersModal(entryNo) {
|
||||
document.getElementById('entryOrdersEntryNo-span').textContent = `(${entryNo})`;
|
||||
function openEntryOrdersModal(entryNo) {
|
||||
// Set entry number in header
|
||||
document.getElementById('entryOrdersEntryNo-span').textContent = `(${entryNo})`;
|
||||
|
||||
const tbody = document.getElementById('entryOrdersTableBody');
|
||||
// Reset summary values
|
||||
document.getElementById('ordersTotalCount').textContent = '0';
|
||||
document.getElementById('ordersTotalQuantity').textContent = '0';
|
||||
document.getElementById('ordersTotalAmount').textContent = '₹0';
|
||||
|
||||
// table loading state
|
||||
const tbody = document.getElementById('entryOrdersTableBody');
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">Loading orders...</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
// API call: /admin/account/entry-orders/{entryno}
|
||||
jsonFetch(`/admin/account/entry-orders/${encodeURIComponent(entryNo)}`, {
|
||||
method: 'GET'
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.success) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">Loading orders...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">Failed to load orders</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
jsonFetch(`/admin/account/entry-orders/${encodeURIComponent(entryNo)}`, {
|
||||
method: 'GET'
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.success) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">Failed to load orders</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
const orders = res.orders || [];
|
||||
if (!orders.length) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">No orders associated with this entry</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const orders = res.orders || [];
|
||||
if (!orders.length) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">No orders associated with this entry</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
tbody.innerHTML = '';
|
||||
|
||||
let totalQuantity = 0;
|
||||
let totalAmount = 0;
|
||||
|
||||
tbody.innerHTML = '';
|
||||
orders.forEach(order => {
|
||||
const tr = document.createElement('tr');
|
||||
|
||||
orders.forEach(order => {
|
||||
const tr = document.createElement('tr');
|
||||
const idString = (order.orderid ?? order.id ?? '').toString().trim();
|
||||
const numericId = parseInt(idString, 10);
|
||||
const formattedId = isNaN(numericId)
|
||||
? escapeHtml(idString)
|
||||
: 'KNT-25-' + String(numericId).padStart(8, '0');
|
||||
|
||||
const amountValue =
|
||||
order.ttl_amount ??
|
||||
order.ttlamount ??
|
||||
order.total_amount ??
|
||||
order.order_amount ??
|
||||
order.amount ??
|
||||
0;
|
||||
// Calculate values for summary
|
||||
const quantity = Number(order.qty || order.order_qty || 0);
|
||||
const amountValue = Number(order.ttl_amount ?? order.ttlamount ?? order.total_amount ?? order.order_amount ?? order.amount ?? 0);
|
||||
|
||||
totalQuantity += quantity;
|
||||
totalAmount += amountValue;
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${escapeHtml(order.order_id)}</td>
|
||||
<td>${escapeHtml(order.mark_no ?? '')}</td>
|
||||
<td>${escapeHtml(order.origin ?? '')}</td>
|
||||
<td>${escapeHtml(order.destination ?? '')}</td>
|
||||
<td>${escapeHtml(order.ctn ?? '')}</td>
|
||||
<td>${escapeHtml(order.qty ?? '')}</td>
|
||||
<td>${formatCurrency(amountValue)}</td>
|
||||
`;
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<span class="order-id-badge">${formattedId}</span>
|
||||
</td>
|
||||
<td>${escapeHtml(order.markno ?? order.mark_no ?? '')}</td>
|
||||
<td>${escapeHtml(order.origin ?? '')}</td>
|
||||
<td>${escapeHtml(order.destination ?? '')}</td>
|
||||
<td>${escapeHtml(order.ctn ?? '')}</td>
|
||||
<td><strong>${quantity}</strong></td>
|
||||
<td><strong>${formatCurrency(amountValue)}</strong></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">Error loading orders</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
// Update summary
|
||||
document.getElementById('ordersTotalCount').textContent = orders.length;
|
||||
document.getElementById('ordersTotalQuantity').textContent = totalQuantity.toLocaleString();
|
||||
document.getElementById('ordersTotalAmount').textContent = formatCurrency(totalAmount);
|
||||
|
||||
document.getElementById('entryOrdersModal').classList.add('modal-open');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">Error loading orders</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
document.getElementById('entryOrdersModal').classList.add('modal-open');
|
||||
}
|
||||
|
||||
function closeEntryOrdersModal() {
|
||||
document.getElementById('entryOrdersModal').classList.remove('modal-open');
|
||||
@@ -2989,7 +3283,7 @@ function handleSearch(){
|
||||
updatePaginationControls();
|
||||
}
|
||||
|
||||
/* ---------- Entry details & installments ---------- */
|
||||
/* ---------- Entry details & installments (Enhanced) ---------- */
|
||||
async function openEntryDetailsModal(entryNo) {
|
||||
try {
|
||||
const res = await jsonFetch('/admin/account/entry/' + encodeURIComponent(entryNo));
|
||||
@@ -2999,58 +3293,109 @@ async function openEntryDetailsModal(entryNo) {
|
||||
const entry = res.entry;
|
||||
currentEntry = entry;
|
||||
|
||||
// Set header info
|
||||
document.getElementById('entryDetailsId').textContent = entry.entry_no;
|
||||
document.getElementById('originalAmount').textContent = formatCurrency(entry.amount);
|
||||
|
||||
const totalProcessed = Number(entry.amount) - Number(entry.pending_amount);
|
||||
|
||||
// Calculate values
|
||||
const originalAmount = Number(entry.amount || 0);
|
||||
const pendingAmount = Number(entry.pending_amount || 0);
|
||||
const totalProcessed = originalAmount - pendingAmount;
|
||||
|
||||
// Update summary cards
|
||||
document.getElementById('originalAmount').textContent = formatCurrency(originalAmount);
|
||||
document.getElementById('totalProcessed').textContent = formatCurrency(totalProcessed);
|
||||
document.getElementById('pendingBalance').textContent = formatCurrency(pendingAmount);
|
||||
document.getElementById('totalInstallments').textContent = entry.installments?.length || 0;
|
||||
|
||||
document.getElementById('pendingBalance').textContent = formatCurrency(entry.pending_amount);
|
||||
document.getElementById('totalInstallments').textContent = entry.installments.length;
|
||||
|
||||
// Render installments table
|
||||
const tbody = document.getElementById('installmentsTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
entry.installments.forEach((ins, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td>${idx === 0 ? 'Original Entry' : 'Installment ' + idx}</td>
|
||||
<td>${escapeHtml(ins.proc_date)}</td>
|
||||
<td>${escapeHtml(ins.description)}</td>
|
||||
<td>${escapeHtml(ins.region)}</td>
|
||||
<td>${formatCurrency(ins.amount)}</td>
|
||||
|
||||
<td>
|
||||
<select class="installment-status-dropdown"
|
||||
data-id="${ins.id}"
|
||||
onchange="updateInstallmentStatus(${ins.id}, this.value)">
|
||||
<option value="Pending" ${ins.status === 'Pending' ? 'selected' : ''}
|
||||
style="color: #f59e0b; font-weight: 500; padding: 10px;">
|
||||
⏳ Pending
|
||||
</option>
|
||||
<option value="Loading" ${ins.status === 'Loading' ? 'selected' : ''}
|
||||
style="color: #3b82f6; font-weight: 500; padding: 10px;">
|
||||
📦 Loading
|
||||
</option>
|
||||
<option value="Packed" ${ins.status === 'Packed' ? 'selected' : ''}
|
||||
style="color: #8b5cf6; font-weight: 500; padding: 10px;">
|
||||
📦 Packed
|
||||
</option>
|
||||
<option value="Dispatched" ${ins.status === 'Dispatched' ? 'selected' : ''}
|
||||
style="color: #10b981; font-weight: 500; padding: 10px;">
|
||||
🚚 Dispatched
|
||||
</option>
|
||||
<option value="Delivered" ${ins.status === 'Delivered' ? 'selected' : ''}
|
||||
style="color: #0c6b2e; font-weight: 500; padding: 10px;">
|
||||
✅ Delivered
|
||||
</option>
|
||||
</select>
|
||||
|
||||
</td>
|
||||
if (!entry.installments || entry.installments.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="6" class="empty-state">
|
||||
<div style="padding: 30px; text-align: center;">
|
||||
<div style="font-size: 48px; color: #eef3fb; margin-bottom: 16px;">📋</div>
|
||||
<div style="font-size: 16px; color: #6f7b8f; font-weight: 500;">
|
||||
No installments found for this entry
|
||||
</div>
|
||||
<div style="font-size: 14px; color: #9ba5bb; margin-top: 8px;">
|
||||
Add your first installment to get started
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} else {
|
||||
entry.installments.forEach((ins, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
|
||||
// Determine installment label
|
||||
let installmentLabel = 'Original Entry';
|
||||
if (idx > 0) {
|
||||
installmentLabel = `Installment ${idx}`;
|
||||
}
|
||||
|
||||
// Status dropdown options with colors
|
||||
const statusOptions = [
|
||||
{ value: 'Pending', label: '⏳ Pending', color: '#f59e0b' },
|
||||
{ value: 'Loading', label: '📦 Loading', color: '#3b82f6' },
|
||||
{ value: 'Packed', label: '📦 Packed', color: '#8b5cf6' },
|
||||
{ value: 'Dispatched', label: '🚚 Dispatched', color: '#10b981' },
|
||||
{ value: 'Delivered', label: '✅ Delivered', color: '#0c6b2e' }
|
||||
];
|
||||
|
||||
let statusOptionsHtml = '';
|
||||
statusOptions.forEach(opt => {
|
||||
const selected = ins.status === opt.value ? 'selected' : '';
|
||||
statusOptionsHtml += `<option value="${opt.value}" ${selected} style="color: ${opt.color}; font-weight: 500;">${opt.label}</option>`;
|
||||
});
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #f0f7ff, #e6f0ff); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-1);">
|
||||
${idx + 1}
|
||||
</div>
|
||||
<span style="font-weight: 600;">${installmentLabel}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 6px;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
${escapeHtml(ins.proc_date || ins.date || '')}
|
||||
</div>
|
||||
</td>
|
||||
<td>${escapeHtml(ins.description || '')}</td>
|
||||
<td>
|
||||
<span style="padding: 4px 8px; background: #f0f7ff; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--primary-1);">
|
||||
${escapeHtml(ins.region || '')}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style="font-weight: 700; color: var(--primary-1);">
|
||||
${formatCurrency(ins.amount || 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<select class="installment-status-dropdown"
|
||||
data-id="${ins.id}"
|
||||
onchange="updateInstallmentStatus(${ins.id}, this.value)"
|
||||
title="Update installment status">
|
||||
${statusOptionsHtml}
|
||||
</select>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
// Show modal
|
||||
document.getElementById('entryDetailsModal').classList.add('modal-open');
|
||||
|
||||
} catch (err) {
|
||||
|
||||
802
resources/views/admin/container.blade.php
Normal file
802
resources/views/admin/container.blade.php
Normal file
@@ -0,0 +1,802 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('page-title', 'Containers')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #4c6fff;
|
||||
--primary-gradient: linear-gradient(135deg, #4c6fff, #8e54e9);
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--info-color: #3b82f6;
|
||||
--light-bg: #f8fafc;
|
||||
--dark-text: #1e293b;
|
||||
--gray-text: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
|
||||
--shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1);
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 12px;
|
||||
--radius-sm: 8px;
|
||||
}
|
||||
|
||||
.containers-wrapper {
|
||||
min-height: calc(100vh - 180px);
|
||||
padding: 20px 15px;
|
||||
background: linear-gradient(135deg, #f6f9ff 0%, #f0f4ff 100%);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
color: var(--gray-text);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-container-btn {
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 28px;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(76, 111, 255, 0.3);
|
||||
}
|
||||
|
||||
.add-container-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(76, 111, 255, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-container-btn i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid rgba(255,255,255,0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--dark-text);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-title i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-text);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.filter-input, .filter-select, .filter-date {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
color: var(--dark-text);
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-input:focus, .filter-select:focus, .filter-date:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.1);
|
||||
}
|
||||
|
||||
.filter-input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.apply-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(76, 111, 255, 0.3);
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: white;
|
||||
color: var(--gray-text);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.main-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg);
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, #4c6fff, #8e54e9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-header h2 i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stats-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
margin-left: 10px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.container-item {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.container-item:hover {
|
||||
background: #f8fafc;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.container-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.container-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.container-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.container-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-gradient);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgba(76, 111, 255, 0.3);
|
||||
}
|
||||
|
||||
.container-details h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--dark-text);
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.container-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--gray-text);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-item i {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-badge i {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.status-in-progress {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background: #0ea5e9;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.update-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
color: var(--dark-text);
|
||||
background: white;
|
||||
min-width: 140px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.update-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.update-btn:hover {
|
||||
background: #3b5de6;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
font-size: 64px;
|
||||
color: var(--border-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.no-results h4 {
|
||||
font-size: 18px;
|
||||
color: var(--gray-text);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.no-results p {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-shadow: var(--shadow-md);
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.success-message i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* 🔥 Totals section */
|
||||
.totals-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.total-card {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.total-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
.add-container-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.filter-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.container-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
.action-buttons {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.update-form {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.status-select, .update-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="containers-wrapper">
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<h1>Container Management</h1>
|
||||
<div class="header-subtitle">
|
||||
Manage all containers, track status, and view entries in real-time
|
||||
</div>
|
||||
</div>
|
||||
@can('containers.create')
|
||||
<a href="{{ route('containers.create') }}" class="add-container-btn">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
Add New Container
|
||||
</a>
|
||||
@endcan
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<div class="success-message">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span>{{ session('success') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="filter-card">
|
||||
<div class="filter-title">
|
||||
<i class="fas fa-filter"></i>
|
||||
Filter Containers
|
||||
</div>
|
||||
<form method="GET" class="filter-grid">
|
||||
<div class="filter-group">
|
||||
<label><i class="fas fa-search"></i> Search</label>
|
||||
<input type="text" name="search" class="filter-input"
|
||||
placeholder="Search by container name or number..."
|
||||
value="{{ request('search') }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label><i class="fas fa-tag"></i> Status</label>
|
||||
<select name="status" class="filter-select">
|
||||
<option value="">All Status</option>
|
||||
<option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="in-progress" {{ request('status') == 'in-progress' ? 'selected' : '' }}>In Progress</option>
|
||||
<option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
|
||||
<option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label><i class="fas fa-calendar"></i> Date</label>
|
||||
<input type="date" name="date" class="filter-date" value="{{ request('date') }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<button type="submit" class="apply-btn">
|
||||
<i class="fas fa-search"></i> Apply Filters
|
||||
</button>
|
||||
<a href="{{ route('containers.index') }}" class="reset-btn">
|
||||
<i class="fas fa-redo"></i> Reset
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="main-card">
|
||||
<div class="card-header">
|
||||
<h2>
|
||||
<i class="fas fa-boxes"></i>
|
||||
Containers List
|
||||
<span class="stats-badge">{{ $containers->count() }} containers</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@if($containers->isEmpty())
|
||||
<div class="no-results">
|
||||
<div class="no-results-icon">
|
||||
<i class="fas fa-box-open"></i>
|
||||
</div>
|
||||
<h4>No containers found</h4>
|
||||
<p>Get started by creating your first container</p>
|
||||
</div>
|
||||
@else
|
||||
@foreach($containers as $container)
|
||||
@php
|
||||
$status = $container->status;
|
||||
$statusClass = match ($status) {
|
||||
'completed' => 'status-completed',
|
||||
'in-progress' => 'status-in-progress',
|
||||
'cancelled' => 'status-cancelled',
|
||||
default => 'status-pending',
|
||||
};
|
||||
@endphp
|
||||
|
||||
<div class="container-item">
|
||||
<div class="container-header">
|
||||
<div class="container-info">
|
||||
<div class="container-avatar">
|
||||
{{ substr($container->container_name, 0, 2) }}
|
||||
</div>
|
||||
<div class="container-details">
|
||||
<h3>{{ $container->container_name }}</h3>
|
||||
<div class="container-meta">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-hashtag"></i>
|
||||
<span>{{ $container->container_number }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar"></i>
|
||||
<span>{{ $container->container_date?->format('M d, Y') ?: 'No date' }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-list"></i>
|
||||
<span>{{ $container->rows->count() }} entries</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<span class="status-badge {{ $statusClass }}">
|
||||
<i class="fas fa-circle"></i>
|
||||
<span class="status-text">
|
||||
{{ ucfirst(str_replace('-', ' ', $status)) }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
|
||||
@can('containers.view')
|
||||
<a href="{{ route('containers.show', $container->id) }}" class="action-btn view-btn">
|
||||
<i class="fas fa-eye"></i> View
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
@can('containers.update_status')
|
||||
<form action="{{ route('containers.update-status', $container->id) }}"
|
||||
method="POST"
|
||||
class="update-form ajax-status-form"
|
||||
data-container-id="{{ $container->id }}">
|
||||
@csrf
|
||||
<select name="status" class="status-select">
|
||||
<option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="in-progress" {{ $status === 'in-progress' ? 'selected' : '' }}>In Progress</option>
|
||||
<option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Completed</option>
|
||||
<option value="cancelled" {{ $status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
|
||||
</select>
|
||||
</form>
|
||||
@endcan
|
||||
|
||||
|
||||
|
||||
@can('containers.delete')
|
||||
<form action="{{ route('containers.destroy', $container->id) }}" method="POST"
|
||||
onsubmit="return confirm('Are you sure you want to delete this container and all its entries?');">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="action-btn delete-btn">
|
||||
<i class="fas fa-trash"></i> Delete
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🔥 Totals instead of first row preview -->
|
||||
<div class="totals-section">
|
||||
<div class="total-card">
|
||||
<div class="total-value">{{ number_format($container->summary['total_ctn'], 1) }}</div>
|
||||
<div class="total-label">Total CTN</div>
|
||||
</div>
|
||||
<div class="total-card">
|
||||
<div class="total-value">{{ number_format($container->summary['total_qty'], 0) }}</div>
|
||||
<div class="total-label">Total QTY</div>
|
||||
</div>
|
||||
<div class="total-card">
|
||||
<div class="total-value">{{ number_format($container->summary['total_cbm'], 3) }}</div>
|
||||
<div class="total-label">Total CBM</div>
|
||||
</div>
|
||||
<div class="total-card">
|
||||
<div class="total-value">{{ number_format($container->summary['total_kg'], 1) }}</div>
|
||||
<div class="total-label">Total KG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.querySelectorAll('.ajax-status-form .status-select').forEach(function (selectEl) {
|
||||
selectEl.addEventListener('change', function (event) {
|
||||
const form = event.target.closest('form');
|
||||
const url = form.getAttribute('action');
|
||||
const token = form.querySelector('input[name="_token"]').value;
|
||||
const status = event.target.value;
|
||||
|
||||
console.log('Sending status update:', url, status);
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': token,
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ status: status })
|
||||
})
|
||||
.then(async res => {
|
||||
console.log('Response status:', res.status);
|
||||
let data = null;
|
||||
try { data = await res.json(); } catch (e) {}
|
||||
console.log('Response body:', data);
|
||||
|
||||
if (!res.ok || !data || !data.success) {
|
||||
alert('Status update failed');
|
||||
return;
|
||||
}
|
||||
|
||||
// 👉 UI update (badge text + color)
|
||||
const item = form.closest('.container-item');
|
||||
const badge = item.querySelector('.status-badge');
|
||||
|
||||
// text
|
||||
// text
|
||||
const pretty = data.status.replace('-', ' ');
|
||||
const textEl = badge.querySelector('.status-text');
|
||||
if (textEl) {
|
||||
textEl.textContent =
|
||||
pretty.charAt(0).toUpperCase() + pretty.slice(1);
|
||||
}
|
||||
|
||||
// classes
|
||||
badge.classList.remove(
|
||||
'status-pending',
|
||||
'status-in-progress',
|
||||
'status-completed',
|
||||
'status-cancelled'
|
||||
);
|
||||
|
||||
if (data.status === 'pending') {
|
||||
badge.classList.add('status-pending');
|
||||
} else if (data.status === 'in-progress') {
|
||||
badge.classList.add('status-in-progress');
|
||||
} else if (data.status === 'completed') {
|
||||
badge.classList.add('status-completed');
|
||||
} else if (data.status === 'cancelled') {
|
||||
badge.classList.add('status-cancelled');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error:', err);
|
||||
alert('Network error while updating status');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
325
resources/views/admin/container_create.blade.php
Normal file
325
resources/views/admin/container_create.blade.php
Normal file
@@ -0,0 +1,325 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('page-title', 'Add Container')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.cm-add-wrapper { padding: 10px 0 20px 0; }
|
||||
.cm-add-header-card {
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
margin-bottom: 18px;
|
||||
background: linear-gradient(90deg,#4c6fff,#8e54e9);
|
||||
box-shadow: 0 6px 18px rgba(15,35,52,0.18);
|
||||
color: #ffffff;
|
||||
}
|
||||
.cm-add-header-card .card-body {
|
||||
padding: 14px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.cm-add-title { margin: 0; font-size: 20px; font-weight: 600; }
|
||||
.cm-add-sub { font-size: 12px; opacity: 0.9; }
|
||||
|
||||
.cm-add-main-card {
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
box-shadow: 0 6px 18px rgba(15,35,52,0.12);
|
||||
}
|
||||
.cm-add-main-card .card-header {
|
||||
background:#ffffff;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
padding: 10px 18px;
|
||||
}
|
||||
.cm-add-main-card .card-header h5 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cm-form-label { font-size: 13px; font-weight: 500; color:#495057; margin-bottom: 4px; }
|
||||
.cm-form-control {
|
||||
font-size: 13px;
|
||||
border-radius: 10px;
|
||||
border:1px solid #d0d7e2;
|
||||
padding: 8px 11px;
|
||||
}
|
||||
.cm-form-control:focus {
|
||||
border-color:#4c6fff;
|
||||
box-shadow:0 0 0 0.15rem rgba(76,111,255,.25);
|
||||
}
|
||||
|
||||
.cm-help-text { font-size: 11px; color:#868e96; margin-top: 2px; }
|
||||
.cm-btn-primary { border-radius: 20px; padding: 6px 22px; font-size: 13px; font-weight: 500; }
|
||||
.cm-btn-secondary { border-radius: 20px; padding: 6px 18px; font-size: 13px; }
|
||||
|
||||
.error-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f5c2c7;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.error-row-box {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.error-item {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.error-item span {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid cm-add-wrapper">
|
||||
|
||||
<div class="card cm-add-header-card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<h4 class="cm-add-title">Create New Container</h4>
|
||||
<div class="cm-add-sub">
|
||||
Add container details and upload Kent loading list Excel file.
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('containers.index') }}" class="btn btn-light btn-sm">
|
||||
Back to Containers
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card cm-add-main-card">
|
||||
<div class="card-header">
|
||||
<h5>Add Container</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{{-- SUCCESS --}}
|
||||
@if (session('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- VALIDATION --}}
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul class="mb-0">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- COMBINED ERROR PANEL (summary text) --}}
|
||||
@if(session('formula_errors') || session('mark_errors'))
|
||||
|
||||
<div class="card error-card mb-3">
|
||||
<div class="card-header bg-danger text-white small">
|
||||
⚠ Excel Validation Issues Found
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="small mb-1">
|
||||
Some rows in your Excel file have formula or mark issues.
|
||||
See the table below, and detailed messages after the table.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 1) Excel-style table at top --}}
|
||||
@php
|
||||
$formulaErrors = session('formula_errors') ?? [];
|
||||
$markErrors = session('mark_errors') ?? [];
|
||||
|
||||
$allRowsData = [];
|
||||
|
||||
foreach ($formulaErrors as $fe) {
|
||||
if (!empty($fe['data'] ?? null)) {
|
||||
$allRowsData[] = $fe['data'];
|
||||
}
|
||||
}
|
||||
|
||||
foreach ($markErrors as $me) {
|
||||
if (!empty($me['data'] ?? null)) {
|
||||
$allRowsData[] = $me['data'];
|
||||
}
|
||||
}
|
||||
|
||||
$headings = [];
|
||||
if (!empty($allRowsData)) {
|
||||
$headings = array_keys($allRowsData[0]);
|
||||
}
|
||||
@endphp
|
||||
|
||||
@if(!empty($headings))
|
||||
<div class="card mb-3">
|
||||
<div class="card-header small">
|
||||
Error rows in Excel view
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="table-responsive" style="max-height:260px; overflow:auto;">
|
||||
<table class="table table-sm table-bordered mb-0" style="font-size:11.5px;">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Excel Row</th>
|
||||
<th>Mark No</th>
|
||||
@foreach($headings as $head)
|
||||
<th>{{ $head }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- Formula error rows --}}
|
||||
@foreach($formulaErrors as $fe)
|
||||
@php
|
||||
$rowData = $fe['data'] ?? [];
|
||||
@endphp
|
||||
@if(!empty($rowData))
|
||||
<tr class="table-danger">
|
||||
<td>{{ $fe['excel_row'] }}</td>
|
||||
<td>{{ $fe['mark_no'] }}</td>
|
||||
@foreach($headings as $head)
|
||||
<td>{{ $rowData[$head] ?? '' }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Mark error rows --}}
|
||||
@foreach($markErrors as $me)
|
||||
@php
|
||||
$rowData = $me['data'] ?? [];
|
||||
@endphp
|
||||
@if(!empty($rowData))
|
||||
<tr class="table-warning">
|
||||
<td>{{ $me['excel_row'] }}</td>
|
||||
<td>{{ $me['mark_no'] }}</td>
|
||||
@foreach($headings as $head)
|
||||
<td>{{ $rowData[$head] ?? '' }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endif
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- 2) Detailed per-row error boxes BELOW the table --}}
|
||||
<div class="card error-card mb-3">
|
||||
<div class="card-header bg-light small">
|
||||
Detailed error messages
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{{-- Formula Errors (detailed) --}}
|
||||
@if(session('formula_errors'))
|
||||
@foreach(session('formula_errors') as $fe)
|
||||
<div class="error-row-box">
|
||||
<div class="error-title">
|
||||
Row {{ $fe['excel_row'] }}
|
||||
@if($fe['mark_no']) | Mark: {{ $fe['mark_no'] }} @endif
|
||||
@if($fe['description']) | {{ $fe['description'] }} @endif
|
||||
</div>
|
||||
|
||||
@foreach($fe['errors'] as $field => $detail)
|
||||
<div class="error-item text-danger">
|
||||
❌ <span>{{ $field }}</span> →
|
||||
Expected: {{ number_format($detail['expected'],4) }}
|
||||
| Got: {{ number_format($detail['actual'],4) }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
{{-- Mark Errors (detailed) --}}
|
||||
@if(session('mark_errors'))
|
||||
@foreach(session('mark_errors') as $me)
|
||||
<div class="error-row-box bg-warning bg-opacity-10 border-warning">
|
||||
<div class="error-title">
|
||||
Row {{ $me['excel_row'] }}
|
||||
</div>
|
||||
<div class="error-item text-warning">
|
||||
❌ Mark <strong>{{ $me['mark_no'] }}</strong> not found in database
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endif
|
||||
|
||||
{{-- FORM --}}
|
||||
@if (!session('formula_errors') && !session('mark_errors'))
|
||||
<form action="{{ route('containers.store') }}" method="POST" enctype="multipart/form-data" class="mt-3">
|
||||
@csrf
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="cm-form-label">Container Name</label>
|
||||
<input type="text" name="container_name"
|
||||
class="form-control cm-form-control"
|
||||
value="{{ old('container_name') }}"
|
||||
placeholder="Enter container name">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="cm-form-label">Container Number</label>
|
||||
<input type="text" name="container_number"
|
||||
class="form-control cm-form-control"
|
||||
value="{{ old('container_number') }}"
|
||||
placeholder="Enter container number">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="cm-form-label">Container Date</label>
|
||||
<input type="date" name="container_date"
|
||||
class="form-control cm-form-control"
|
||||
value="{{ old('container_date') }}">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="cm-form-label">Loading List Excel</label>
|
||||
<input type="file" name="excel_file"
|
||||
class="form-control cm-form-control"
|
||||
accept=".xls,.xlsx">
|
||||
<div class="cm-help-text">
|
||||
Upload Kent loading list Excel file (.xls / .xlsx).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary cm-btn-primary">
|
||||
Save Container
|
||||
</button>
|
||||
<a href="{{ route('containers.index') }}" class="btn btn-outline-secondary cm-btn-secondary">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
413
resources/views/admin/container_show.blade.php
Normal file
413
resources/views/admin/container_show.blade.php
Normal file
@@ -0,0 +1,413 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('page-title', 'Container Details')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* ── TOP HEADER CARD ── */
|
||||
.cm-header-card {
|
||||
background: linear-gradient(100deg, #4c6fff 0%, #8e54e9 100%);
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
box-shadow: 0 6px 24px rgba(76,111,255,0.22);
|
||||
margin-bottom: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
.cm-header-card .card-body {
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.cm-header-title {
|
||||
margin: 0;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.cm-header-sub {
|
||||
font-size: 12px;
|
||||
opacity: 0.88;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ── MAIN CARD ── */
|
||||
.cm-main-card {
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
box-shadow: 0 4px 20px rgba(15,35,52,0.10);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.cm-main-card .card-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.cm-main-card .card-header h5 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a2340;
|
||||
}
|
||||
|
||||
/* ── INFO STRIP ── */
|
||||
.cm-info-strip {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
padding: 12px 20px 0 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cm-info-label {
|
||||
font-size: 11px;
|
||||
color: #8a93a6;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cm-info-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1a2340;
|
||||
}
|
||||
|
||||
/* ── FILTER BAR ── */
|
||||
.cm-filter-bar {
|
||||
padding: 12px 20px 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cm-row-count {
|
||||
font-size: 12px;
|
||||
color: #8a93a6;
|
||||
font-weight: 500;
|
||||
}
|
||||
.cm-filter-input {
|
||||
max-width: 240px;
|
||||
font-size: 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #dde2ee;
|
||||
padding: 6px 14px;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.cm-filter-input:focus {
|
||||
border-color: #4c6fff;
|
||||
box-shadow: 0 0 0 3px rgba(76,111,255,0.1);
|
||||
}
|
||||
|
||||
/* ── TABLE SCROLL OUTER ── */
|
||||
.cm-table-scroll-outer {
|
||||
margin: 10px 14px 0 14px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
/* इथे overflow: hidden होते, ते visible केले */
|
||||
overflow-x: auto; /* फक्त horizontal scroll हवा असेल तर */
|
||||
overflow-y: visible;
|
||||
border: 1.5px solid #b8920e;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 -2px 10px rgba(184,146,14,0.10);
|
||||
}
|
||||
|
||||
/* ── TABLE WRAPPER ── */
|
||||
.cm-table-wrapper {
|
||||
position: relative;
|
||||
/* इथे max-height, overflow auto काढले, जे inner scroll देत होते */
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* ── TABLE STYLES ── */
|
||||
.cm-table {
|
||||
font-size: 12px;
|
||||
min-width: 1100px;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Sticky header – light header color */
|
||||
.cm-table thead tr th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background: #fde4b3;
|
||||
color: #0a0a09;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
padding: 11px 14px;
|
||||
border-bottom: 2px solid #fde4b3;
|
||||
border-right: 1px solid #fde4b3;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.18);
|
||||
}
|
||||
.cm-table thead tr th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* # column – narrower */
|
||||
.cm-table thead tr th:first-child,
|
||||
.cm-table tbody tr td:first-child {
|
||||
width: 46px;
|
||||
min-width: 46px;
|
||||
max-width: 46px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Body rows */
|
||||
.cm-table tbody tr td {
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid #f0f3fb;
|
||||
border-right: 1px solid #f0f3fb;
|
||||
color: #2d3a55;
|
||||
font-size: 12.5px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #fff;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.cm-table tbody tr td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Zebra */
|
||||
.cm-table tbody tr:nth-child(even) td {
|
||||
background: #f8f9ff;
|
||||
}
|
||||
/* Hover */
|
||||
.cm-table tbody tr:hover td {
|
||||
background: #edf3ff !important;
|
||||
}
|
||||
|
||||
/* Row number td */
|
||||
.cm-row-num {
|
||||
color: #8a93a6;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Editable cell input */
|
||||
.cm-cell-input {
|
||||
width: 100%;
|
||||
min-width: 90px;
|
||||
background: transparent;
|
||||
border: 1.5px solid transparent;
|
||||
border-radius: 5px;
|
||||
font-size: 12.5px;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
color: #2d3a55;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
transition: border 0.15s, background 0.15s, box-shadow 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
.cm-cell-input:hover {
|
||||
border-color: #c9d4f5;
|
||||
background: #f5f8ff;
|
||||
}
|
||||
.cm-cell-input:focus {
|
||||
border-color: #4c6fff;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(76,111,255,0.12);
|
||||
}
|
||||
|
||||
/* Save button */
|
||||
.cm-save-btn {
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
padding: 7px 18px;
|
||||
background: linear-gradient(90deg, #4c6fff, #8e54e9);
|
||||
border: none;
|
||||
color: #fff;
|
||||
box-shadow: 0 3px 10px rgba(76,111,255,0.22);
|
||||
transition: opacity 0.2s, transform 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cm-save-btn:hover {
|
||||
opacity: 0.92;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.cm-empty {
|
||||
padding: 30px 20px;
|
||||
color: #8a93a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Scrollbar styling – आता फक्त horizontal ला लागू होईल */
|
||||
.cm-table-scroll-outer::-webkit-scrollbar { height: 6px; }
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-track { background: #f0f3fb; border-radius: 4px; }
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-thumb { background: #c5cce8; border-radius: 4px; }
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-thumb:hover { background: #8a99d0; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.cm-header-card .card-body { flex-direction: column; align-items: flex-start; }
|
||||
.cm-info-strip { gap: 16px; }
|
||||
.cm-table-scroll-outer { overflow-x: auto; }
|
||||
.cm-table { min-width: 900px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid cm-wrapper">
|
||||
|
||||
{{-- TOP GRADIENT HEADER --}}
|
||||
<div class="card cm-header-card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<h4 class="cm-header-title">
|
||||
Container: {{ $container->container_number }}
|
||||
</h4>
|
||||
<div class="cm-header-sub">
|
||||
Edit loading list directly — scroll horizontally & vertically like Excel.
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('containers.index') }}" class="btn btn-light btn-sm">
|
||||
← Back to list
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- MAIN CARD --}}
|
||||
<div class="card cm-main-card">
|
||||
|
||||
<div class="card-header">
|
||||
<h5>Container Information</h5>
|
||||
@if(!$container->rows->isEmpty())
|
||||
<button type="submit"
|
||||
form="cm-edit-rows-form"
|
||||
class="cm-save-btn">
|
||||
💾 Save Changes
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- INFO STRIP --}}
|
||||
<div class="cm-info-strip">
|
||||
<div class="cm-info-item">
|
||||
<div class="cm-info-label">Container</div>
|
||||
<div class="cm-info-value">{{ $container->container_name }}</div>
|
||||
</div>
|
||||
<div class="cm-info-item">
|
||||
<div class="cm-info-label">Date</div>
|
||||
<div class="cm-info-value">{{ $container->container_date?->format('d-m-Y') }}</div>
|
||||
</div>
|
||||
<div class="cm-info-item">
|
||||
<div class="cm-info-label">Excel File</div>
|
||||
@if($container->excel_file)
|
||||
<div class="cm-info-value">
|
||||
<a href="{{ \Illuminate\Support\Facades\Storage::url($container->excel_file) }}"
|
||||
target="_blank" style="color:#4c6fff;text-decoration:none;font-weight:600;">
|
||||
📄 Download / View
|
||||
</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="cm-info-value" style="color:#b0b8cc;">Not uploaded</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($container->rows->isEmpty())
|
||||
<div class="cm-empty">No entries found for this container.</div>
|
||||
@else
|
||||
@php
|
||||
$allHeadings = [];
|
||||
foreach ($container->rows as $row) {
|
||||
if (is_array($row->data)) {
|
||||
$allHeadings = array_unique(array_merge($allHeadings, array_keys($row->data)));
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
{{-- FILTER BAR --}}
|
||||
<div class="cm-filter-bar">
|
||||
<span class="cm-row-count">
|
||||
Total rows: {{ $container->rows->count() }} • Edit cells then click "Save Changes"
|
||||
</span>
|
||||
<input type="text"
|
||||
id="cmRowSearch"
|
||||
class="cm-filter-input"
|
||||
placeholder="🔍 Quick search..."
|
||||
onkeyup="cmFilterRows()">
|
||||
</div>
|
||||
|
||||
{{-- EDITABLE TABLE FORM --}}
|
||||
<form id="cm-edit-rows-form"
|
||||
action="{{ route('containers.rows.update', $container->id) }}"
|
||||
method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="cm-table-scroll-outer">
|
||||
<div class="cm-table-wrapper">
|
||||
<table class="cm-table" id="cmExcelTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@foreach($allHeadings as $heading)
|
||||
<th>{{ $heading }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($container->rows as $index => $row)
|
||||
<tr>
|
||||
<td class="cm-row-num">{{ $index + 1 }}</td>
|
||||
@foreach($allHeadings as $heading)
|
||||
@php $value = $row->data[$heading] ?? ''; @endphp
|
||||
<td>
|
||||
<input type="text"
|
||||
class="cm-cell-input"
|
||||
name="rows[{{ $row->id }}][{{ $heading }}]"
|
||||
value="{{ $value }}">
|
||||
</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function cmFilterRows() {
|
||||
const input = document.getElementById('cmRowSearch');
|
||||
if (!input) return;
|
||||
const filter = input.value.toLowerCase();
|
||||
const table = document.getElementById('cmExcelTable');
|
||||
if (!table) return;
|
||||
|
||||
const rows = table.getElementsByTagName('tr');
|
||||
for (let i = 1; i < rows.length; i++) {
|
||||
const cells = rows[i].getElementsByTagName('td');
|
||||
let match = false;
|
||||
for (let j = 0; j < cells.length; j++) {
|
||||
const txt = cells[j].textContent || cells[j].innerText;
|
||||
if (txt.toLowerCase().indexOf(filter) > -1) {
|
||||
match = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
rows[i].style.display = match ? '' : 'none';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
File diff suppressed because it is too large
Load Diff
@@ -27,7 +27,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 17px 17px 0 0;
|
||||
background: #fceeb8ff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 54px;
|
||||
padding: 15px 26px 10px 22px;
|
||||
border-bottom: 1.4px solid #e8e2cf;
|
||||
@@ -37,7 +37,7 @@
|
||||
.invoice-management-title {
|
||||
font-size: 1.32rem;
|
||||
font-weight: 800;
|
||||
color: #2451af;
|
||||
color: #ffffffff;
|
||||
letter-spacing: .08em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -223,7 +223,7 @@
|
||||
|
||||
/* Center all table content */
|
||||
.table thead tr {
|
||||
background: #feebbe !important;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.table thead th:first-child {
|
||||
@@ -237,7 +237,7 @@
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
font-weight: 700;
|
||||
color: #343535;
|
||||
color: #ffffffff;
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 14px;
|
||||
padding: 20px 15px;
|
||||
@@ -258,25 +258,33 @@
|
||||
|
||||
/* Soft blue background for ALL table rows */
|
||||
.table-striped tbody tr {
|
||||
background: #f0f8ff !important;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
background: #f0f8ff !important;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
|
||||
.table-striped tbody tr td {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table-striped tbody tr:hover {
|
||||
background: #e6f3ff !important;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transform: translateY(-0.5px);
|
||||
}
|
||||
|
||||
.table-striped tbody tr:hover {
|
||||
background: #e6f3ff !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Remove striped pattern - all rows same soft blue */
|
||||
.table-striped tbody tr:nth-of-type(odd),
|
||||
.table-striped tbody tr:nth-of-type(even) {
|
||||
background: #f0f8ff !important;
|
||||
}
|
||||
|
||||
/* Center all table cells with proper spacing */
|
||||
|
||||
.table td {
|
||||
padding: 18px 15px;
|
||||
border: none;
|
||||
@@ -291,7 +299,7 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* First and last cell rounded corners */
|
||||
|
||||
.table td:first-child {
|
||||
padding-left: 30px;
|
||||
font-weight: 600;
|
||||
@@ -587,7 +595,7 @@
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #64748b;
|
||||
color: #000000ff;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
@@ -1091,31 +1099,48 @@
|
||||
<!-- TOOLS ROW - Search, Filter, Create Button -->
|
||||
<div class="invoice-tools-row">
|
||||
<!-- Search Box with Button -->
|
||||
<div style="display: flex; align-items: center; flex: 1; max-width: 500px; min-width: 380px;">
|
||||
<div class="search-box">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text" id="invoiceSearch" placeholder="Search by invoice number, customer name...">
|
||||
</div>
|
||||
|
||||
</button>
|
||||
<form method="GET" action="{{ route('admin.invoices.index') }}">
|
||||
<div class="invoice-tools-row">
|
||||
<div style="display:flex; align-items:center; flex:1; max-width:500px; min-width:380px;">
|
||||
<div class="search-box">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text"
|
||||
id="invoiceSearch"
|
||||
name="search"
|
||||
value="{{ request('search') }}"
|
||||
placeholder="Search by invoice number, customer name...">
|
||||
</div>
|
||||
<button type="submit" id="searchButton" class="search-btn">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filter Group -->
|
||||
<div class="filter-group">
|
||||
<select class="filter-select" id="statusFilter">
|
||||
<option value="">All Status</option>
|
||||
<option value="paid">Paid</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="overdue">Overdue</option>
|
||||
</select>
|
||||
<div class="filter-group">
|
||||
<select class="filter-select" id="statusFilter" name="status">
|
||||
<option value="all">All Status</option>
|
||||
<option value="paid" {{ request('status')=='paid' ? 'selected' : '' }}>Paid</option>
|
||||
<option value="pending" {{ request('status')=='pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="overdue" {{ request('status')=='overdue' ? 'selected' : '' }}>Overdue</option>
|
||||
</select>
|
||||
|
||||
<!-- Date Range Picker -->
|
||||
<div class="date-range-container">
|
||||
<input type="date" class="date-input" id="startDate">
|
||||
<span class="date-separator">to</span>
|
||||
<input type="date" class="date-input" id="endDate">
|
||||
</div>
|
||||
<div class="date-range-container">
|
||||
<input type="date"
|
||||
class="date-input"
|
||||
id="startDate"
|
||||
name="start_date"
|
||||
value="{{ request('start_date') }}">
|
||||
<span class="date-separator">to</span>
|
||||
<input type="date"
|
||||
class="date-input"
|
||||
id="endDate"
|
||||
name="end_date"
|
||||
value="{{ request('end_date') }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<!-- Create Invoice Button -->
|
||||
<!-- <a href="{{ route('admin.invoices.create') }}" class="create-invoice-btn">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -264,13 +264,24 @@ header .bi-bell .badge {
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
{{-- Shipments --}}
|
||||
<!-- {{-- Shipments --}}
|
||||
@can('shipment.view')
|
||||
<a href="{{ route('admin.shipments') }}" class="{{ request()->routeIs('admin.shipments') ? 'active' : '' }}">
|
||||
<i class="bi bi-truck"></i> Shipments
|
||||
</a>
|
||||
@endcan
|
||||
@endcan -->
|
||||
|
||||
|
||||
|
||||
{{-- Container – NEW MENU --}}
|
||||
@can('containers.view')
|
||||
<a href="{{ route('containers.index') }}" class="{{ request()->routeIs('containers.*') ? 'active' : '' }}">
|
||||
<i class="fa-solid fa-box"></i> Container
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
|
||||
|
||||
{{-- Invoice --}}
|
||||
@can('invoice.view')
|
||||
<a href="{{ route('admin.invoices.index') }}" class="{{ request()->routeIs('admin.invoices.index') ? 'active' : '' }}">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
32
resources/views/admin/pdf/invoices_excel.blade.php
Normal file
32
resources/views/admin/pdf/invoices_excel.blade.php
Normal file
@@ -0,0 +1,32 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Invoice No</th>
|
||||
<th>Invoice Date</th>
|
||||
<th>Mark No</th>
|
||||
<th>Container No</th>
|
||||
<th>Container Date</th>
|
||||
<th>Company</th>
|
||||
<th>Customer</th>
|
||||
<th>Amount</th>
|
||||
<th>Amount + GST</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoices as $inv)
|
||||
<tr>
|
||||
<td>{{ $inv->invoice_number }}</td>
|
||||
<td>{{ $inv->invoice_date ? \Carbon\Carbon::parse($inv->invoice_date)->format('d-m-Y') : '' }}</td>
|
||||
<td>{{ $inv->mark_no }}</td>
|
||||
<td>{{ $inv->container_number }}</td>
|
||||
<td>{{ $inv->container_date ? \Carbon\Carbon::parse($inv->container_date)->format('d-m-Y') : '' }}</td>
|
||||
<td>{{ $inv->company_name }}</td>
|
||||
<td>{{ $inv->customer_name }}</td>
|
||||
<td>{{ $inv->final_amount }}</td>
|
||||
<td>{{ $inv->final_amount_with_gst }}</td>
|
||||
<td>{{ $inv->invoice_status }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
48
resources/views/admin/pdf/invoices_report.blade.php
Normal file
48
resources/views/admin/pdf/invoices_report.blade.php
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Invoices Report</title>
|
||||
<style>
|
||||
body { font-family: DejaVu Sans, sans-serif; font-size: 12px; }
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||||
th, td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; }
|
||||
th { background: #f3f4f6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Invoices Report</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Invoice No</th>
|
||||
<th>Invoice Date</th>
|
||||
<th>Mark No</th>
|
||||
<th>Container No</th>
|
||||
<th>Container Date</th>
|
||||
<th>Company</th>
|
||||
<th>Customer</th>
|
||||
<th>Amount</th>
|
||||
<th>Amount + GST</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoices as $inv)
|
||||
<tr>
|
||||
<td>{{ $inv->invoice_number ?? '-' }}</td>
|
||||
<td>{{ $inv->invoice_date ? \Carbon\Carbon::parse($inv->invoice_date)->format('d-m-Y') : '-' }}</td>
|
||||
<td>{{ $inv->mark_no ?? '-' }}</td>
|
||||
<td>{{ $inv->container_number ?? '-' }}</td>
|
||||
<td>{{ $inv->container_date ? \Carbon\Carbon::parse($inv->container_date)->format('d-m-Y') : '-' }}</td>
|
||||
<td>{{ $inv->company_name ?? '-' }}</td>
|
||||
<td>{{ $inv->customer_name ?? '-' }}</td>
|
||||
<td>{{ $inv->final_amount ? number_format($inv->final_amount, 2) : '0.00' }}</td>
|
||||
<td>{{ $inv->final_amount_with_gst ? number_format($inv->final_amount_with_gst, 2) : '0.00' }}</td>
|
||||
<td>{{ ucfirst($inv->invoice_status ?? 'pending') }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -22,7 +22,7 @@
|
||||
.custom-table tbody tr:hover { background-color: #fffbea; transform: scale(1.01); box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
|
||||
.priority-badge {
|
||||
display: inline-flex; align-items: center; font-size: 13.5px; padding: 6px 16px; border-radius: 12px; font-weight: 600;
|
||||
box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15); width: 90px; min-height: 28px; justify-content: center;
|
||||
box-shadow: 0 1px 2px 0 rgba(230, 206, 206, 0.15); width: 90px; min-height: 28px; justify-content: center;
|
||||
color: #fff; margin: 2px 0; transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
.priority-badge:hover { transform: scale(1.08); }
|
||||
@@ -30,8 +30,8 @@
|
||||
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); }
|
||||
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); }
|
||||
.custom-table thead th {
|
||||
text-align: center; font-weight: 700; color: #000; padding: 14px; font-size: 17px; letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid #bfbfbf; background-color: #fde4b3;
|
||||
text-align: center; font-weight: 700; color: #ffffffff; padding: 14px; font-size: 17px; letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid #bfbfbf; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);;
|
||||
}
|
||||
.custom-table thead tr:first-child th:first-child { border-top-left-radius: 12px; }
|
||||
.custom-table thead tr:first-child th:last-child { border-top-right-radius: 12px; }
|
||||
@@ -333,7 +333,11 @@ a.btn.btn-primary.position-relative .badge {
|
||||
box-shadow: 0 0 0 2px #ffffff;
|
||||
|
||||
}
|
||||
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- <!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Laravel Test Page</title>
|
||||
@@ -33,4 +33,4 @@
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html> -->
|
||||
|
||||
Reference in New Issue
Block a user