sidebar changes

resources/views/admin/dashboard.blade.php

@@ -9,6 +9,7 @@ body, .container-fluid { background: #f4f7fc; }
 .dash-top-titlebox {
   margin-bottom: 2px; background: transparent;
   padding-left: 3px; padding-top: 2px;
+  margin-left: 0px;
 }
 .dash-title-main {
   font-size: 1.54rem;

resources/views/admin/layouts/app.blade.php

@@ -17,7 +17,7 @@
 
     /* ✨ Sidebar Glass + Animated Highlight Effect */
     .sidebar {
-      width: 190px;
+      width: 200px;
       height: 100vh;
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(232, 240, 255, 0.95)) !important;
       box-shadow: 2px 0 25px rgba(0, 0, 0, 0.08);
@@ -29,6 +29,10 @@
       display: flex;
       flex-direction: column;
       transition: all 0.3s ease-in-out;
+      position: fixed;
+      top: 0;
+      left: 0;
+      
     }
 
     .sidebar .logo {
@@ -126,6 +130,7 @@
       margin-top: 12px;
       font-weight: 500;
       transition: 0.3s ease;
+      margin-bottom: 20px;
     }
 
     .sidebar form button:hover {
@@ -141,6 +146,7 @@
       display: flex;
       flex-direction: column;
       width: calc(100vw - 190px);
+      margin-left: 190px;
     }
 
     header {

resources/views/admin/shipments.blade.php

@@ -1,9 +1,152 @@
+
+
 @extends('admin.layouts.app')
 
 @section('page-title', 'Shipment Management')
 
 @section('content')
+<style>
+    .search-shipment-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 15px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    flex-wrap: wrap;
+}
+.search-shipment-bar input, 
+.search-shipment-bar select {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    flex: 1;
+    min-width: 150px;
+}
+.btn-add-shipment {
+    background-color: #0d6efd;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: background-color 0.3s;
+    white-space: nowrap;
+}
+.btn-add-shipment:hover {
+    background-color: #0b5ed7;
+}
+.search-icon {
+    font-size: 19px;
+}
+.truck-icon {
+    font-size: 17px;
+}
 
+@media (max-width: 768px) {
+    .search-shipment-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .search-shipment-bar input, 
+    .search-shipment-bar select {
+        width: 100%;
+    }
+}
+.modal-content {
+    border-radius: 16px;
+    border: 1px solid #ebe5c5;
+    background: #f9faff;
+}
+.modal-header {
+    border-radius: 16px 16px 0 0;
+    background: #f8f9fc;
+    border-bottom: 1px solid #e3e4ed;
+    padding: 20px 24px 10px 24px;
+}
+.form-label { font-weight:600; }
+input[type="text"], input[type="date"] {
+    border-radius:8px !important;
+    font-size:15px !important;
+    box-shadow: none;
+    background: #fff !important;
+    border: 1px solid #ddd !important;
+    height: 41px;
+}
+/* Table styles */
+.table-responsive {
+    border-radius: 14px;
+    overflow: hidden;
+    background: #fff;
+    border: 1.5px solid #efe5c5;
+    box-shadow: 0 2px 10px #ebe6cb;
+    padding-top:-10px;
+    padding-bottom:8px;
+}
+.custom-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 14px;
+    margin:0;
+    background: transparent;
+   
+}
+/* Header row: colored + rounded top */
+.custom-table thead th {
+    background: #ffe9be;
+    font-weight:700;
+    font-size:16px;
+    padding: 10px 5px;
+    border:none;
+    text-align:center;
+  
+    
+}
+.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;
+}
+.custom-table thead tr {
+    box-shadow: 0 2px 9px #f4e1b1;
+}
+/* Content row: white + shadow + spacing */
+.custom-table tbody tr {
+    background: #fff;
+    box-shadow: 0 2px 8px #ececec;
+    /* margin-bottom: 14px; this is handled by border-spacing */
+}
+.custom-table tbody td {
+    font-size:15px;
+    padding:12px 8px;
+    text-align:center;
+    vertical-align: middle;
+    border:none;
+}
+.custom-table tbody tr:first-child td:first-child {
+    border-top-left-radius:10px;
+}
+.custom-table tbody tr:first-child td:last-child {
+    border-top-right-radius:10px;
+}
+.custom-table tbody tr:last-child td:first-child {
+    border-bottom-left-radius:10px;
+}
+.custom-table tbody tr:last-child td:last-child {
+    border-bottom-right-radius:10px;
+}
+.btn-cancel {
+    background:#fff; color:#222; border:1px solid #bbb; border-radius:8px; font-weight:600; padding:7px 28px;
+}
+.btn-create {
+    background:#000; color:#fff; font-weight:600; font-size:17px; border-radius:8px; padding:7px 32px;
+}
+</style>
 <div class="container-fluid py-4">
 
     {{-- SUCCESS / ERROR MESSAGES --}}
@@ -15,101 +158,127 @@
         <div class="alert alert-danger">{{ session('error') }}</div>
     @endif
 
-
     <!-- ============================= -->
-    <!--    CREATE SHIPMENT BOX       -->
+    <!--    SEARCH BAR AND ADD BUTTON  -->
     <!-- ============================= -->
-    <div class="card shadow-sm mb-4">
+    <div class="search-shipment-bar mb-4">
-        <div class="card-header bg-light">
+        <span class="search-icon">🔍</span>
-            <h5 class="mb-0">
+        <input type="text" placeholder="Search Shipments...">
-                <i class="bi bi-truck"></i> Create Shipment
+        <select>
-            </h5>
+            <option>All Status</option>
-        </div>
+            <option>Pending</option>
-
+            <option>In Transit</option>
-        <div class="card-body">
+            <option>Delivered</option>
-
+        </select>
-            <form action="{{ route('admin.shipments.store') }}" method="POST">
+        <select>
-                @csrf
+            <option>All Carriers</option>
-
+            <option>FedEx</option>
-                <div class="row g-3">
+            <option>UPS</option>
-
+            <option>DHL</option>
-                    <div class="col-md-4">
+        </select>
-                        <label class="form-label">Origin</label>
+        <button type="button" class="btn-add-shipment" data-bs-toggle="modal" data-bs-target="#createShipmentModal">
-                        <input type="text" class="form-control" name="origin" required>
+            <span class="truck-icon">🚚</span>
-                    </div>
+            Add Shipments
-
+        </button>
-                    <div class="col-md-4">
-                        <label class="form-label">Destination</label>
-                        <input type="text" class="form-control" name="destination" required>
-                    </div>
-
-                    <div class="col-md-4">
-                        <label class="form-label">Shipment Date</label>
-                        <input type="date" name="shipment_date" class="form-control" 
-                               value="{{ date('Y-m-d') }}" required>
-                    </div>
-
-                </div>
-
-                <hr class="my-3">
-
-                <h6 class="fw-bold text-primary mb-2">Select Orders for Shipment</h6>
-
-                {{-- Orders Table --}}
-                <div class="table-responsive" style="max-height: 350px; overflow-y:auto;">
-                    <table class="table table-bordered table-striped text-center align-middle">
-                        <thead class="table-light">
-                            <tr>
-                                <th>Select</th>
-                                <th>Order ID</th>
-                                <th>Mark No</th>
-                                <th>Origin</th>
-                                <th>Destination</th>
-                                <th>CTN</th>
-                                <th>QTY</th>
-                                <th>TTL Qty</th>
-                                <th>Amount</th>
-                                <th>KG</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @forelse($availableOrders as $order)
-                            <tr>
-                                <td>
-                                    <input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
-                                </td>
-                                <td class="text-primary fw-bold">{{ $order->order_id }}</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->ttl_kg }}</td>
-                            </tr>
-                            @empty
-                            <tr>
-                                <td colspan="10" class="text-muted">No available orders</td>
-                            </tr>
-                            @endforelse
-                        </tbody>
-                    </table>
-                </div>
-
-                <div class="text-end mt-3">
-                    <button type="submit" class="btn btn-success btn-lg">
-                        <i class="bi bi-check-circle"></i> Create Shipment
-                    </button>
-                </div>
-
-            </form>
-
-        </div>
     </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">
+            <div class="modal-header">
+                <h5 class="modal-title" id="createShipmentModalLabel" style="font-weight: bold;">
+                    Create New Shipment
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form action="{{ route('admin.shipments.store') }}" method="POST">
+                    @csrf
+
+                    <div class="row g-3 pb-2">
+                        <div class="col-md-4">
+                            <label class="form-label">Origin *</label>
+                            <input type="text" class="form-control" name="origin" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Destination *</label>
+                            <input type="text" class="form-control" name="destination" required>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Status</label>
+                            <input type="text" class="form-control" name="status">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label">Shipment Date</label>
+                            <input type="date" 
+                                   name="shipment_date" 
+                                   class="form-control"
+                                   value="{{ date('Y-m-d') }}"
+                                   min="{{ date('Y-m-d') }}"
+                                   required>
+                        </div>
+                    </div>
+
+                    <div class="table-responsive" style="max-height:340px;">
+                        <table class="custom-table">
+                            <thead>
+                                <tr>
+                                    <th></th>
+                                    <th>Order ID</th>
+                                    <th>CTN</th>
+                                    <th>QTY</th>
+                                    <th>TTL/QTY</th>
+                                    <th>Price (₹)</th>
+                                    <th>Amount (₹)</th>
+                                    <th>CBM</th>
+                                    <th>TTL CBM</th>
+                                    <th>KG</th>
+                                    <th>TTL KG</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                @forelse($availableOrders as $order)
+                                <tr>
+                                    <td>
+                                        <input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
+                                    </td>
+                                    <td>
+                                        <a href="#" class="text-primary fw-bold" style="text-decoration:underline;">{{ $order->order_id }}</a>
+                                    </td>
+                                    <td>{{ $order->ctn }}</td>
+                                    <td>{{ $order->qty }}</td>
+                                    <td>{{ $order->ttl_qty }}</td>
+                                    <td>₹{{ number_format($order->unit_price, 2) }}</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>
+                                </tr>
+                                @empty
+                                <tr>
+                                    <td colspan="11" class="text-muted">No available orders</td>
+                                </tr>
+                                @endforelse
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="d-flex justify-content-end mt-4 mb-2">
+                        <button type="button" class="btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
+                        <button type="submit" class="btn-create">
+                            Create Shipment
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
 
     <!-- ============================= -->
     <!--      SHIPMENT LIST TABLE     -->
@@ -190,9 +359,6 @@
         </div>
     </div>
 
-
-
-
     <!-- ============================= -->
     <!--   SHIPMENT DETAILS MODAL     -->
     <!-- ============================= -->
@@ -217,6 +383,7 @@
 
 
 
+
 <!-- ========================= -->
 <!--  MODAL LOAD SCRIPT (AJAX) -->
 <!-- ========================= -->