Frontend dashboard, shipment, invoice , customer
This commit is contained in:
divya abdar
@@ -12,6 +12,7 @@ html, body {
|
||||
|
||||
body, .container-fluid {
|
||||
background: #f4f7fc;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
@@ -34,6 +35,7 @@ body, .container-fluid {
|
||||
letter-spacing: .018em;
|
||||
color: #18213e;
|
||||
margin-bottom: 2px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.dash-title-desc {
|
||||
@@ -42,6 +44,7 @@ body, .container-fluid {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .01em;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* ===== STATS CARDS - RESPONSIVE GRID ===== */
|
||||
@@ -127,12 +130,14 @@ body, .container-fluid {
|
||||
color:#63709b;
|
||||
font-weight:600;
|
||||
letter-spacing:.28px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size:1.25rem;
|
||||
font-weight:700;
|
||||
color:#194073;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.stats-card:hover .stats-icon {
|
||||
@@ -170,6 +175,7 @@ body, .container-fluid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.order-mgmt-title i {
|
||||
@@ -191,6 +197,7 @@ body, .container-fluid {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: inherit;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-btn:hover {
|
||||
@@ -201,7 +208,7 @@ body, .container-fluid {
|
||||
.card-body, .order-mgmt-main {
|
||||
background: #fff;
|
||||
border-radius: 0 0 17px 17px;
|
||||
padding:25px;
|
||||
padding:20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@@ -213,7 +220,7 @@ body, .container-fluid {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* ===== TABLE STYLES ===== */
|
||||
/* ===== IMPROVED TABLE STYLES ===== */
|
||||
.table thead tr {
|
||||
background: #feebbe !important;
|
||||
border-radius: 12px 12px 0 0;
|
||||
@@ -226,9 +233,10 @@ body, .container-fluid {
|
||||
font-weight: 700;
|
||||
color: #343535;
|
||||
letter-spacing: 0.02em;
|
||||
font-size:15px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 15px;
|
||||
padding: 16px 12px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.table thead th:first-child { border-radius: 9px 0 0 0;}
|
||||
@@ -239,20 +247,24 @@ body, .container-fluid {
|
||||
border-radius:9px;
|
||||
box-shadow:0 2px 12px #e2ebf941;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 2px;
|
||||
border-spacing: 0 8px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table-striped tbody tr {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
margin-bottom: 2px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.3s ease;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.table-striped tbody tr:hover {
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
transform: translateY(-2px);
|
||||
background: #f8fafd;
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
@@ -264,39 +276,110 @@ body, .container-fluid {
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 12px 6px;
|
||||
padding: 14px 12px;
|
||||
border: none;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
}
|
||||
|
||||
.table td:first-child {
|
||||
border-radius: 6px 0 0 6px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.table td:last-child {
|
||||
border-radius: 0 6px 6px 0;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size:13px;
|
||||
font-weight:600;
|
||||
padding:7px 17px;
|
||||
border-radius:12px;
|
||||
/* ===== UPDATED STATUS BADGE STYLES ===== */
|
||||
.badge {
|
||||
padding: 7px 17px !important;
|
||||
border-radius: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 13px !important;
|
||||
border: 2px solid transparent !important;
|
||||
min-width: 40px !important;
|
||||
text-align: center !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2 !important;
|
||||
font-family: 'Inter', sans-serif;
|
||||
gap: 6px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
background-color:#22cbfa!important;
|
||||
color:#fff!important;
|
||||
.status-icon {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Pending Status - SAME SIZE WITH CLOCK ICON */
|
||||
.badge-pending {
|
||||
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
||||
color: #d97706 !important;
|
||||
border-color: #f59e0b !important;
|
||||
}
|
||||
|
||||
/* In Transit Status - SAME SIZE WITH TRUCK ICON */
|
||||
.badge-in_transit {
|
||||
background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
|
||||
color: #1e40af !important;
|
||||
border-color: #3b82f6 !important;
|
||||
}
|
||||
|
||||
/* Dispatched Status - SAME SIZE WITH BOX ICON */
|
||||
.badge-dispatched {
|
||||
background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
|
||||
color: #6b21a8 !important;
|
||||
border-color: #8b5cf6 !important;
|
||||
}
|
||||
|
||||
/* Delivered Status - SAME SIZE WITH CHECK ICON */
|
||||
.badge-delivered {
|
||||
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
|
||||
color: #065f46 !important;
|
||||
border-color: #10b981 !important;
|
||||
}
|
||||
|
||||
/* Default badge styles - SAME SIZE */
|
||||
.badge.bg-info {
|
||||
background: linear-gradient(135deg, #4cc9f0, #4361ee) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.badge.bg-success {
|
||||
background: linear-gradient(135deg, #4ade80, #22c55e) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.badge.bg-warning {
|
||||
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.badge.bg-danger {
|
||||
background: linear-gradient(135deg, #f87171, #ef4444) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight:600;
|
||||
color:#1d3159;
|
||||
font-size:15px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
@@ -305,6 +388,7 @@ body, .container-fluid {
|
||||
background: #f7f9fe;
|
||||
border:1.2px solid #c7dbfa;
|
||||
font-weight:500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
@@ -316,6 +400,7 @@ body, .container-fluid {
|
||||
color:#2469d6;
|
||||
font-weight:600;
|
||||
text-decoration:underline;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* ===== HORIZONTAL SCROLL CONTAINER ===== */
|
||||
@@ -327,7 +412,7 @@ body, .container-fluid {
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
|
||||
padding: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar {
|
||||
@@ -348,7 +433,7 @@ body, .container-fluid {
|
||||
}
|
||||
|
||||
.table {
|
||||
min-width: 1200px;
|
||||
min-width: 2000px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -394,6 +479,7 @@ body, .container-fluid {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-modal .close-btn {
|
||||
@@ -425,6 +511,7 @@ body, .container-fluid {
|
||||
color: #1d3159;
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-modal .form-control,
|
||||
@@ -435,6 +522,7 @@ body, .container-fluid {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 8px 12px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-modal .form-control:focus,
|
||||
@@ -449,6 +537,7 @@ body, .container-fluid {
|
||||
padding: 10px 20px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-modal .btn-info:hover {
|
||||
@@ -461,6 +550,7 @@ body, .container-fluid {
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-modal .btn-success:hover {
|
||||
@@ -472,6 +562,7 @@ body, .container-fluid {
|
||||
border: none;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-modal .btn-warning:hover {
|
||||
@@ -481,6 +572,7 @@ body, .container-fluid {
|
||||
.create-order-modal .btn-danger {
|
||||
background: #dc3545;
|
||||
border: none;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.create-order-modal .btn-danger:hover {
|
||||
@@ -505,6 +597,7 @@ body, .container-fluid {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* ===== ORDER DETAILS MODAL STYLES ===== */
|
||||
@@ -536,6 +629,7 @@ body, .container-fluid {
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.modal-header .btn-close {
|
||||
@@ -554,6 +648,7 @@ body, .container-fluid {
|
||||
background: #f8fafc;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* ===== PAGINATION STYLES ===== */
|
||||
@@ -570,6 +665,7 @@ body, .container-fluid {
|
||||
font-size: 13px;
|
||||
color: #9ba5bb;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
@@ -593,6 +689,7 @@ body, .container-fluid {
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
@@ -621,6 +718,7 @@ body, .container-fluid {
|
||||
transition: all 0.3s ease;
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.pagination-page-btn:hover {
|
||||
@@ -645,6 +743,7 @@ body, .container-fluid {
|
||||
color: #9ba5bb;
|
||||
font-size: 13px;
|
||||
padding: 0 4px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.pagination-img-btn {
|
||||
@@ -728,7 +827,7 @@ body, .container-fluid {
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 10px 5px;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
@@ -811,7 +910,7 @@ body, .container-fluid {
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px 4px;
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -913,7 +1012,7 @@ body, .container-fluid {
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 6px 3px;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
@@ -1047,67 +1146,80 @@ body, .container-fluid {
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<table class="table table-striped table-bordered align-middle text-center">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Order ID</th>
|
||||
<th>Mark No</th>
|
||||
<th>Origin</th>
|
||||
<th>Destination</th>
|
||||
<th>Total CTN</th>
|
||||
<th>Total QTY</th>
|
||||
<th>Total TTL/QTY</th>
|
||||
<th>Total Amount (₹)</th>
|
||||
<th>Total CBM</th>
|
||||
<th>Total TTL CBM</th>
|
||||
<th>Total KG</th>
|
||||
<th>Total TTL KG</th>
|
||||
<th>Status</th>
|
||||
<th>Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ordersTableBody">
|
||||
@forelse($orders as $order)
|
||||
<tr>
|
||||
<td>{{ $order->id }}</td>
|
||||
<td>
|
||||
<a href="javascript:void(0)"
|
||||
class="fw-semibold text-primary open-order-modal"
|
||||
data-id="{{ $order->id }}">
|
||||
{{ $order->order_id }}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td>{{ $order->mark_no }}</td>
|
||||
<td>{{ $order->origin }}</td>
|
||||
<td>{{ $order->destination }}</td>
|
||||
<td>{{ $order->ctn }}</td>
|
||||
<td>{{ $order->qty }}</td>
|
||||
<td>{{ $order->ttl_qty }}</td>
|
||||
<td>₹{{ number_format($order->ttl_amount, 2) }}</td>
|
||||
<td>{{ $order->cbm }}</td>
|
||||
<td>{{ $order->ttl_cbm }}</td>
|
||||
<td>{{ $order->kg }}</td>
|
||||
<td>{{ $order->ttl_kg }}</td>
|
||||
<div class="table-wrapper">
|
||||
<table class="table table-striped table-bordered align-middle text-center">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Order ID</th>
|
||||
<th>Mark No</th>
|
||||
<th>Origin</th>
|
||||
<th>Destination</th>
|
||||
<th>Total CTN</th>
|
||||
<th>Total QTY</th>
|
||||
<th>Total TTL/QTY</th>
|
||||
<th>Total Amount (₹)</th>
|
||||
<th>Total CBM</th>
|
||||
<th>Total TTL CBM</th>
|
||||
<th>Total KG</th>
|
||||
<th>Total TTL KG</th>
|
||||
<th>Status</th>
|
||||
<th>Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ordersTableBody">
|
||||
@forelse($orders as $order)
|
||||
<tr>
|
||||
<td>{{ $order->id }}</td>
|
||||
<td>
|
||||
<span class="badge bg-info text-dark">{{ ucfirst($order->status) }}</span>
|
||||
</td>
|
||||
<td>{{ $order->created_at->format('d-m-Y') }}</td>
|
||||
<td>
|
||||
<a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i> View
|
||||
<a href="javascript:void(0)"
|
||||
class="fw-semibold text-primary open-order-modal"
|
||||
data-id="{{ $order->id }}">
|
||||
{{ $order->order_id }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="16" class="text-muted">No orders found</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<td>{{ $order->mark_no }}</td>
|
||||
<td>{{ $order->origin }}</td>
|
||||
<td>{{ $order->destination }}</td>
|
||||
<td>{{ $order->ctn }}</td>
|
||||
<td>{{ $order->qty }}</td>
|
||||
<td>{{ $order->ttl_qty }}</td>
|
||||
<td>₹{{ number_format($order->ttl_amount, 2) }}</td>
|
||||
<td>{{ $order->cbm }}</td>
|
||||
<td>{{ $order->ttl_cbm }}</td>
|
||||
<td>{{ $order->kg }}</td>
|
||||
<td>{{ $order->ttl_kg }}</td>
|
||||
<td>
|
||||
<span class="badge badge-{{ $order->status }}">
|
||||
@if($order->status == 'pending')
|
||||
<i class="bi bi-clock-fill status-icon"></i>
|
||||
@elseif($order->status == 'in_transit')
|
||||
<i class="bi bi-truck status-icon"></i>
|
||||
@elseif($order->status == 'dispatched')
|
||||
<i class="bi bi-box-seam status-icon"></i>
|
||||
@elseif($order->status == 'delivered')
|
||||
<i class="bi bi-check-circle-fill status-icon"></i>
|
||||
@endif
|
||||
{{ ucfirst(str_replace('_', ' ', $order->status)) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ $order->created_at->format('d-m-Y') }}</td>
|
||||
<td>
|
||||
<a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i> View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="16" class="text-muted">No orders found</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div class="pagination-container">
|
||||
@@ -1566,7 +1678,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
<td>${order.kg || ''}</td>
|
||||
<td>${order.ttl_kg || ''}</td>
|
||||
<td>
|
||||
<span class="badge bg-info text-dark">${order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1) : ''}</span>
|
||||
<span class="badge badge-${order.status}">
|
||||
${order.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
|
||||
${order.status === 'in_transit' ? '<i class="bi bi-truck status-icon"></i>' : ''}
|
||||
${order.status === 'dispatched' ? '<i class="bi bi-box-seam status-icon"></i>' : ''}
|
||||
${order.status === 'delivered' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
|
||||
${order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1).replace('_', ' ') : ''}
|
||||
</span>
|
||||
</td>
|
||||
<td>${new Date(order.created_at).toLocaleDateString('en-GB')}</td>
|
||||
<td>
|
||||
|
||||
Reference in New Issue
Block a user