kent-logistics/Kent-logistics-Laravel
SHA256
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

staff

Browse Source
This commit is contained in:
Abhishek Mali
2025-12-08 10:17:46 +05:30
parent 0a1d0a9c55
commit 0a65d5f596
7 changed files with 311 additions and 1043 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
resources/views/admin/shipments.blade.php
View File

@@ -258,6 +258,14 @@
line-height: 1.2 !important;
}
/* Loading Status - PROPER */
.badge-loading {
background: linear-gradient(135deg, #e3f2fd, #90caf9) !important;
color: #1565c0 !important;
border-color: #2196f3 !important;
width: 110px;
}
/* Pending Status - SAME SIZE */
.badge-pending {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
@@ -320,16 +328,9 @@
padding: 6px 12px !important;
}
/* NEW: Action Button Styles */
.action-container {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-view-details {
background: linear-gradient(135deg, #10b981, #059669);
/* Eye Button Style - PROPER */
.btn-eye {
background: linear-gradient(135deg, #4cc9f0, #4361ee);
color: white;
border: none;
border-radius: 8px;
@@ -341,14 +342,19 @@
justify-content: center;
width: 36px;
height: 36px;
text-decoration: none;
margin: 0 auto;
}
.btn-eye:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(76, 201, 240, 0.3);
background: linear-gradient(135deg, #38bdf8, #3a56d4);
}
.btn-view-details:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
background: linear-gradient(135deg, #059669, #047857);
color: white;
/* Action Button Styles */
.action-container {
position: relative;
display: inline-block;
}
.btn-edit-status {
@@ -393,6 +399,16 @@
display: flex;
}
/* Loading Status Option - PROPER */
.status-option.loading {
background: rgba(33, 150, 243, 0.1);
color: #2196f3;
}
.status-option.loading:hover {
background: rgba(33, 150, 243, 0.2);
}
.status-option {
padding: 10px 12px;
border: none;
@@ -455,6 +471,11 @@
border-radius: 50%;
display: inline-block;
}
/* Loading Status Indicator - PROPER */
.status-indicator.loading {
background: #2196f3;
}
.status-indicator.pending {
background: #f8961e;
@@ -1108,15 +1129,13 @@
</div>
@endif
<!-- ============================= -->
<!-- SEARCH BAR AND ADD BUTTON -->
<!-- ============================= -->
<div class="search-shipment-bar">
<span class="search-icon">🔍</span>
<input type="text" id="searchInput" placeholder="Search Shipments...">
<div class="status-filter-container">
<select id="statusFilter" class="status-filter-select">
<option value="all">All Status</option>
<option value="loading">Loading</option>
<option value="pending">Pending</option>
<option value="in_transit">In Transit</option>
<option value="dispatched">Dispatched</option>
@@ -1135,9 +1154,6 @@
</button>
</div>
<!-- ============================= -->
<!-- CREATE SHIPMENT MODAL -->
<!-- ============================= -->
<div class="modal fade" id="createShipmentModal" tabindex="-1" aria-labelledby="createShipmentModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
@@ -1229,9 +1245,6 @@
</div>
</div>
<!-- ============================= -->
<!-- SHIPMENT LIST TABLE -->
<!-- ============================= -->
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-truck me-2"></i> Shipments List</h5>
@@ -1252,6 +1265,7 @@
<th>Total Amount</th>
<th>Status</th>
<th>Date</th>
<th>View</th>
<th>Action</th>
</tr>
</thead>
@@ -1282,52 +1296,49 @@
</span>
</td>
<td>{{ \Carbon\Carbon::parse($ship->shipment_date)->format('d M Y') }}</td>
<td>
<button type="button" class="btn-eye" onclick="openShipmentDetails({{ $ship->id }})" title="View Shipment">
<i class="bi bi-eye"></i>
</button>
</td>
<td>
<div class="action-container">
<!-- 👁️ View Icon -->
<!-- <a href="{{ route('admin.shipment.view', $ship->id) }}"
class="btn-view-details"
title="View Shipment">
<i class="bi bi-eye"></i>
</a> -->
<!-- ✏️ Edit Status Icon -->
<button type="button" class="btn-edit-status"
onclick="toggleStatusDropdown(this, {{ $ship->id }})"
title="Edit Status">
<button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, {{ $ship->id }})" title="Edit Status">
<i class="bi bi-pencil"></i>
</button>
<!-- Dropdown -->
<div class="status-dropdown" id="statusDropdown-{{ $ship->id }}">
<form action="{{ route('admin.shipments.updateStatus') }}" method="POST" class="status-form">
@csrf
<input type="hidden" name="shipment_id" value="{{ $ship->id }}">
<button type="submit" name="status" value="loading" class="status-option loading">
<span class="status-indicator loading"></span>
Loading
</button>
<button type="submit" name="status" value="pending" class="status-option pending">
<span class="status-indicator pending"></span> Pending
<span class="status-indicator pending"></span>
Pending
</button>
<button type="submit" name="status" value="in_transit" class="status-option in_transit">
<span class="status-indicator in_transit"></span> In Transit
<span class="status-indicator in_transit"></span>
In Transit
</button>
<button type="submit" name="status" value="dispatched" class="status-option dispatched">
<span class="status-indicator dispatched"></span> Dispatched
<span class="status-indicator dispatched"></span>
Dispatched
</button>
<button type="submit" name="status" value="delivered" class="status-option delivered">
<span class="status-indicator delivered"></span> Delivered
<span class="status-indicator delivered"></span>
Delivered
</button>
</form>
</div>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="11" class="text-center py-5 text-muted">
<td colspan="12" class="text-center py-5 text-muted">
<i class="bi bi-inbox display-4 d-block mb-3"></i>
No shipments found
</td>
@@ -1337,21 +1348,17 @@
</table>
</div>
<!-- Pagination Controls -->
<div class="pagination-container">
<div class="pagination-info" id="pageInfo">Showing 1 to {{ $shipments->count() }} of {{ $shipments->count() }} entries</div>
<div class="pagination-controls">
<button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
<!-- Left arrow SVG -->
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="pagination-pages" id="paginationPages">
<!-- Page numbers will be inserted here -->
</div>
</div>
<button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
<!-- Right arrow SVG -->
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
@@ -1361,9 +1368,7 @@
</div>
</div>
<!-- ============================= -->
<!-- SHIPMENT DETAILS MODAL -->
<!-- ============================= -->
{{-- SHIPMENT DETAILS MODAL --}}
<div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
@@ -1386,9 +1391,6 @@
</div>
<!-- ========================= -->
<!-- MODAL LOAD SCRIPT (AJAX) -->
<!-- ========================= -->
<script>
// Pagination state
let currentPage = 1;
@@ -1541,7 +1543,7 @@ function renderTable() {
if (filteredShipments.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="11" class="text-center py-5 text-muted">
<td colspan="12" class="text-center py-5 text-muted">
<i class="bi bi-search display-4 d-block mb-3"></i>
No shipments found matching your criteria
</td>
@@ -1567,6 +1569,12 @@ function renderTable() {
row.setAttribute('data-status', shipment.status);
row.setAttribute('data-shipment-id', shipment.shipment_id);
// Function to format status string
const formatStatus = (status) => {
if (!status) return '';
return status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ');
};
row.innerHTML = `
<td class="fw-bold">${displayIndex}</td>
<td>
@@ -1582,15 +1590,21 @@ function renderTable() {
<td class="fw-bold text-success">₹${parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td>
<span class="badge badge-${shipment.status}">
${shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1).replace('_', ' ')}
${formatStatus(shipment.status)}
</span>
</td>
<td>${new Date(shipment.shipment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
<td>
<a href="{{ route('admin.shipments.dummy', $ship->id) }}"
class="btn-view-details">
<i class="bi bi-eye"></i>
</a>
</td>
<td>
<div class="action-container">
<a href="/admin/dashboard/${shipment.id}" class="btn-view-details" title="View Shipment">
<i class="bi bi-eye"></i>
</a>
<button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, ${shipment.id})" title="Edit Status">
<i class="bi bi-pencil"></i>
</button>
@@ -1598,6 +1612,10 @@ function renderTable() {
<form action="/admin/shipments/update-status" method="POST" class="status-form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="shipment_id" value="${shipment.id}">
<button type="submit" name="status" value="loading" class="status-option loading">
<span class="status-indicator loading"></span>
Loading
</button>
<button type="submit" name="status" value="pending" class="status-option pending">
<span class="status-indicator pending"></span>
Pending
@@ -1623,6 +1641,9 @@ function renderTable() {
});
}
// --------------------------------------------------------------------
// Function: Open Consolidated Shipment Details Modal
// --------------------------------------------------------------------
function openShipmentDetails(id) {
let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
let content = document.getElementById('shipmentDetailsContent');
@@ -1650,8 +1671,13 @@ function openShipmentDetails(id) {
year: 'numeric'
});
// Function to format status string
const formatStatus = (status) => {
if (!status) return 'N/A';
return status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ');
};
let html = `
<!-- Shipment Basic Info -->
<div class="shipment-info-row">
<div class="shipment-info-item">
<div class="shipment-info-label">Shipment ID</div>
@@ -1663,7 +1689,7 @@ function openShipmentDetails(id) {
</div>
<div class="shipment-info-item">
<div class="shipment-info-label">Status</div>
<div class="shipment-info-value">${data.shipment.status}</div>
<div class="shipment-info-value">${formatStatus(data.shipment.status)}</div>
</div>
<div class="shipment-info-item">
<div class="shipment-info-label">Date</div>
@@ -1698,7 +1724,9 @@ function openShipmentDetails(id) {
data.orders.forEach(order => {
html += `
<tr>
<td class="fw-bold text-primary">${order.order_id}</td>
<td class="fw-bold">
${order.order_id}
</td>
<td>${order.origin || 'N/A'}</td>
<td>${order.destination || 'N/A'}</td>
<td>${order.mark_no || 'ITEM001'}</td>
@@ -1720,7 +1748,6 @@ function openShipmentDetails(id) {
</table>
</div>
<!-- Totals Section -->
<div class="shipment-totals">
<div class="shipment-totals-row">
<div class="shipment-total-item">