UI Update Customer Section

2025-11-21 16:15:10 +05:30
parent 837f4fe566 63daef6a92
commit 4d44e7df25
16 changed files with 3476 additions and 848 deletions
--- a/resources/views/admin/shipments.blade.php
+++ b/resources/views/admin/shipments.blade.php
@@ -9,6 +9,25 @@
        overflow-x: hidden !important;
    }
    
+    .table thead th,
+    .table tbody td {
+        white-space: nowrap !important;
+        padding: 8px 4px !important;
+    }
+
+    .table th:nth-child(10),  /* if Date is column 10 */
+    .table td:nth-child(10) {
+        max-width: 110px !important;
+        width: 110px !important;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .table {
+        table-layout: fixed !important;
+    }
+
+    
    .table, .custom-table-modal, .shipment-details-table {
        min-width: unset !important;
        width: 100% !important;
@@ -226,62 +245,79 @@
        border-bottom: none;
    }
    
-    /* UPDATED: Status Badge Styles */
+    /* UPDATED: Status Badge Styles - ALL SAME SIZE */
    .badge {
-        padding: 8px 16px;
-        border-radius: 20px;
-        font-weight: 600;
-        font-size: 0.8rem;
-        border: 2px solid transparent;
+        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-block !important;
+        line-height: 1.2 !important;
    }
    
-    /* Pending Status */
+    /* Pending Status - SAME SIZE */
    .badge-pending {
        background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
        color: #d97706 !important;
-        border-color: #f59e0b;
+        border-color: #f59e0b !important;
+        width: 110px;
    }
    
-    /* In Transit Status */
+    /* In Transit Status - SAME SIZE */
    .badge-in_transit {
        background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
        color: #1e40af !important;
-        border-color: #3b82f6;
+        border-color: #3b82f6 !important;
+        width: 110px;
    }
    
-    /* Dispatched Status */
+    /* Dispatched Status - SAME SIZE */
    .badge-dispatched {
        background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
        color: #6b21a8 !important;
-        border-color: #8b5cf6;
+        border-color: #8b5cf6 !important;
+        width: 110px;
    }
    
-    /* Delivered Status */
+    /* Delivered Status - SAME SIZE */
    .badge-delivered {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
        color: #065f46 !important;
-        border-color: #10b981;
+        border-color: #10b981 !important;
+        width: 110px;
    }
    
-    /* Default badge styles */
+    /* Default badge styles - SAME SIZE */
    .badge.bg-info {
        background: linear-gradient(135deg, #4cc9f0, #4361ee) !important;
-        color: white;
+        color: white !important;
    }
    
    .badge.bg-success {
        background: linear-gradient(135deg, #4ade80, #22c55e) !important;
-        color: white;
+        color: white !important;
    }
    
    .badge.bg-warning {
        background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
-        color: white;
+        color: white !important;
    }
    
    .badge.bg-danger {
        background: linear-gradient(135deg, #f87171, #ef4444) !important;
-        color: white;
+        color: white !important;
+    }
+
+    /* Light badges for quantity, kg, cbm */
+    .badge.bg-light {
+        background: #f8f9fa !important;
+        color: #212529 !important;
+        border: 1px solid #dee2e6 !important;
+        min-width: 80px !important;
+        padding: 6px 12px !important;
    }
    
    /* NEW: Action Button Styles */
@@ -851,6 +887,36 @@
    .loading {
        animation: pulse 1.5s infinite;
    }
+
+    /* Status Filter Styles */
+    .status-filter-container {
+        position: relative;
+    }
+
+    .status-filter-select {
+        cursor: pointer;
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+        background-repeat: no-repeat;
+        background-position: right 12px center;
+        background-size: 16px;
+        padding-right: 40px !important;
+    }
+
+    /* Shipment row styling for filtering */
+    .shipment-row {
+        transition: all 0.3s ease;
+    }
+
+    .shipment-row.hidden {
+        display: none !important;
+    }
+
+    .shipment-row.visible {
+        display: table-row;
+    }
 </style>

 <div class="container-fluid py-4">
@@ -877,18 +943,21 @@
    <!-- ============================= -->
    <div class="search-shipment-bar">
        <span class="search-icon">🔍</span>
-        <input type="text" placeholder="Search Shipments...">
-        <select>
-            <option>All Status</option>
-            <option>Pending</option>
-            <option>In Transit</option>
-            <option>Delivered</option>
-        </select>
-        <select>
-            <option>All Carriers</option>
-            <option>FedEx</option>
-            <option>UPS</option>
-            <option>DHL</option>
+        <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="pending">Pending</option>
+                <option value="in_transit">In Transit</option>
+                <option value="dispatched">Dispatched</option>
+                <option value="delivered">Delivered</option>
+            </select>
+        </div>
+        <select id="carrierFilter">
+            <option value="all">All Carriers</option>
+            <option value="fedex">FedEx</option>
+            <option value="ups">UPS</option>
+            <option value="dhl">DHL</option>
        </select>
        <button type="button" class="btn-add-shipment" data-bs-toggle="modal" data-bs-target="#createShipmentModal">
            <span class="truck-icon">🚚</span>
@@ -1017,10 +1086,14 @@
                        </tr>
                    </thead>

-                    <tbody>
+                    <tbody id="shipmentsTableBody">
+                        @php
+                            $totalShipments = count($shipments);
+                        @endphp
                        @forelse($shipments as $ship)
-                        <tr>
-                            <td class="fw-bold">{{ $loop->iteration }}</td>
+                        <tr class="shipment-row" data-status="{{ $ship->status }}" data-shipment-id="{{ $ship->shipment_id }}">
+                            {{-- REVERSE INDEX: सर्वात वरच्या shipment ला सर्वात मोठा क्रमांक --}}
+                            <td class="fw-bold">{{ $totalShipments - $loop->index }}</td>
                            <td>
                                <a href="#" class="text-primary fw-bold"
                                   onclick="openShipmentDetails({{ $ship->id }})">
@@ -1112,6 +1185,72 @@
 <!--  MODAL LOAD SCRIPT (AJAX) -->
 <!-- ========================= -->
 <script>
+// Status Filter Functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const statusFilter = document.getElementById('statusFilter');
+    const searchInput = document.getElementById('searchInput');
+    const carrierFilter = document.getElementById('carrierFilter');
+    const shipmentRows = document.querySelectorAll('.shipment-row');
+
+    // Function to filter shipments
+    function filterShipments() {
+        const selectedStatus = statusFilter.value;
+        const searchTerm = searchInput.value.toLowerCase();
+        const selectedCarrier = carrierFilter.value;
+
+        shipmentRows.forEach(row => {
+            const status = row.getAttribute('data-status');
+            const shipmentId = row.getAttribute('data-shipment-id').toLowerCase();
+            const origin = row.cells[2].textContent.toLowerCase();
+            const destination = row.cells[3].textContent.toLowerCase();
+            
+            let statusMatch = selectedStatus === 'all' || status === selectedStatus;
+            let searchMatch = searchTerm === '' || 
+                            shipmentId.includes(searchTerm) || 
+                            origin.includes(searchTerm) || 
+                            destination.includes(searchTerm);
+            let carrierMatch = selectedCarrier === 'all'; // You can add carrier data attribute if needed
+
+            if (statusMatch && searchMatch && carrierMatch) {
+                row.classList.remove('hidden');
+                row.classList.add('visible');
+            } else {
+                row.classList.add('hidden');
+                row.classList.remove('visible');
+            }
+        });
+
+        // Show message if no results
+        const visibleRows = document.querySelectorAll('.shipment-row:not(.hidden)');
+        const noResultsRow = document.querySelector('.shipment-row[colspan]');
+        
+        if (visibleRows.length === 0 && !noResultsRow) {
+            // Add no results message
+            const tbody = document.getElementById('shipmentsTableBody');
+            const noResultsHtml = `
+                <tr>
+                    <td colspan="11" 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>
+                </tr>
+            `;
+            tbody.innerHTML = noResultsHtml;
+        } else if (visibleRows.length > 0 && noResultsRow) {
+            // Remove no results message
+            noResultsRow.remove();
+        }
+    }
+
+    // Event listeners for filters
+    statusFilter.addEventListener('change', filterShipments);
+    searchInput.addEventListener('input', filterShipments);
+    carrierFilter.addEventListener('change', filterShipments);
+
+    // Initialize filter on page load
+    filterShipments();
+});
+
 function openShipmentDetails(id) {
    let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
    let content = document.getElementById('shipmentDetailsContent');