Merge branch 'main' of http://103.248.30.24:3000/kent-logistics/Kent-logistics-Laravel

resources/views/admin/account.blade.php

@@ -29,7 +29,7 @@ tr:hover td { background-color:#f9fafc;}
 .status-dispatched { background-color:#20c5c7; }
 .pending-badge-red { background-color:#ef4f4f; }
 .pending-badge-green { background-color:#34c86c; }
-.entry-link { color:#3769d7; text-decoration:underline; font-weight:600;}
+.entry-link { color:#3769d7; text-decoration:underline; font-weight:600; cursor: pointer;}
 .toggle-switch-btn {
     appearance: none; -webkit-appearance: none;
     width: 48px; height: 22px;
@@ -47,9 +47,9 @@ tr:hover td { background-color:#f9fafc;}
 /* Modal */
 .modal-fade1 { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
 .modal-fade1.modal-open { display:flex; }
-.modal-fade {position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
+.modal-fade{position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
 .modal-fade.modal-open { display:flex; }
-.modal-box1 { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max: width 100%;;}
+.modal-box1 { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max-width:100%;;}
 .modal-box { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max: width 100%;;}
 .modal-head, .modal-title-main { font-size: 25px; font-weight:700; margin-bottom:5px;}
 .modal-desc, .modal-sub { font-size:16px; color:#6a7a8c; margin-bottom:13px;}
@@ -62,7 +62,6 @@ tr:hover td { background-color:#f9fafc;}
   justify-content:center;
   align-items:center;
   z-index:999;
-  /* keep default */
 }
 
 .modal-fade1.modal-open {
@@ -70,7 +69,7 @@ tr:hover td { background-color:#f9fafc;}
 }
 
 .modal-box1 {
-  max-width: 550px;
+  max-width: 680px;
   min-width: 370px;
   max-height: 90vh;
   overflow-y: auto;
@@ -112,7 +111,19 @@ tr:hover td { background-color:#f9fafc;}
 .inst-blue { color:#509cf8; }
 .inst-purple { color:#7d57d2; }
 
-<!-- Add to your CSS section: -->
+/* Entry Details Modal */
+.entry-details-modal { max-width: 800px; min-width: 700px; }
+.entry-details-header { background: linear-gradient(90deg, #1a2951, #243a72); color: white; padding: 20px 25px; border-radius: 12px 12px 0 0; margin: 0 -34px 20px -34px; }
+.entry-details-title { font-size: 24px; font-weight: 700; margin: 0; }
+.entry-details-subtitle { font-size: 14px; opacity: 0.9; margin: 5px 0 0 0; }
+.entry-summary-cards { display: flex; gap: 15px; margin-bottom: 20px; }
+.entry-summary-card { flex: 1; background: #f8fafc; border-radius: 10px; padding: 15px; border-left: 4px solid #1a2951; }
+.entry-summary-label { font-size: 13px; color: #6a7a8c; margin-bottom: 5px; }
+.entry-summary-value { font-size: 20px; font-weight: 700; color: #1a2951; }
+.entry-installments-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
+.entry-installments-table th { background: #f3f6fb; padding: 12px 15px; text-align: left; font-weight: 600; color: #4a5570; border-bottom: 2px solid #e5e9f2; }
+.entry-installments-table td { padding: 12px 15px; border-bottom: 1px solid #e5e9f2; }
+.entry-installments-table tr:hover td { background: #f9fafc; }
 
 /* Modern Installment card style */
 .installment-card { background: #fff; border-radius: 10px; margin-bottom: 11px; padding: 10px 16px 10px 10px; display: flex; align-items: center; box-shadow: 0 2.5px 7px 0 rgba(60,90,170,0.09);}
@@ -214,7 +225,173 @@ tr:hover td { background-color:#f9fafc;}
 .isum-green { color:#27ca58; }
 .isum-red { color:#e58211; }
 .isum-purple { color:#9856e6; }
+/* Consolidated Orders Details - k44 style */
+#consolidatedOrderDetailsModal .modal-box1 {
+  max-width: 800px;
+  border-radius: 16px;
+  box-shadow: 0 8px 44px #33487129;
+  background: #fff;
+  padding: 0 26px 28px 26px;
+  font-family: 'Segoe UI', Arial, sans-serif;
+}
+#consolidatedOrderDetailsModal .cod-header {
+  padding: 18px 0 6px 0;
+  border-radius: 16px 16px 0 0;
+  font-weight: 700;
+  font-size: 20px;
+  color: #233063;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+#consolidatedOrderDetailsModal .cod-header .cod-x {
+  font-size: 26px;
+  color: #aaa;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-weight: 600;
+}
+#consolidatedOrderDetailsModal .cod-header .cod-x:hover {
+  color: #dd4343;
+}
 
+#consolidatedOrderDetailsModal .cod-detail-row {
+  display: flex;
+  gap: 35px;
+  align-items: center;
+  font-size: 14.2px;
+  margin: 9px 0 8px 0;
+  color: #535770;
+}
+#consolidatedOrderDetailsModal .cod-detail-row span {
+  margin-right: 18px;
+}
+#consolidatedOrderDetailsModal .cod-detail-row .cod-shipid {
+  color: #2469d6;
+  font-size: 18px;
+  font-weight: 700;
+  margin-right: 18px;
+}
+#consolidatedOrderDetailsModal .cod-detail-row .cod-badge {
+  background: #ffb366;
+  color: #fff;
+  padding: 3.4px 14px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0 8px 0 0;
+  vertical-align:middle;
+  display:inline-block;
+}
+
+#consolidatedOrderDetailsModal .cod-detail-row .cod-light {
+  color: #9ba5bb;
+  font-weight: 500;
+}
+#consolidatedOrderDetailsModal .cod-table {
+  width: 100%;
+  background: #f8f3e4;
+  border-collapse: collapse;
+  border-radius: 11px;
+  box-shadow: 0 1px 8px #eeeae5;
+  margin-bottom: 13px;
+  font-size: 14px;
+  overflow: hidden;
+}
+
+#consolidatedOrderDetailsModal .cod-table th,
+#consolidatedOrderDetailsModal .cod-table td {
+  padding: 9px 9px;
+  text-align: left;
+  border-bottom: 1px solid #efe6d1;
+  color: #233063;
+  white-space: nowrap;
+  background: #faf8f1;
+}
+#consolidatedOrderDetailsModal .cod-table th {
+  background: #ffe0a7;
+  font-weight: 600;
+  font-size: 13px;
+  color: #3b4060;
+}
+#consolidatedOrderDetailsModal .cod-table tr:last-child td {
+  border-bottom: none;
+}
+#consolidatedOrderDetailsModal .cod-table .cod-link {
+  color: #2469d6;
+  font-weight: 600;
+  text-decoration: underline;
+  cursor: pointer;
+}
+#consolidatedOrderDetailsModal .cod-summary-row {
+  display: flex;
+  gap: 15px;
+ 
+  align-items: center;
+  margin-top: 13px;
+  margin-bottom: 2px;
+  padding: 8px 0 2px 0;
+  background: none;
+}
+#consolidatedOrderDetailsModal .cod-sum-val {
+  font-size: 23px;
+  font-weight: 700;
+}
+#consolidatedOrderDetailsModal .cod-sum-label {
+  font-size: 13px;
+  font-weight: 500;
+  margin-top: 3px;
+  color: #858fa2;
+  letter-spacing:0.2px;
+}
+#consolidatedOrderDetailsModal .cod-blue { color: #276dea;}
+#consolidatedOrderDetailsModal .cod-green { color: #22b963;}
+#consolidatedOrderDetailsModal .cod-red { color: #da2479; }
+#consolidatedOrderDetailsModal .cod-closebtn {
+  background: #ebeffa;
+  color: #37436c;
+  border: none;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 10px 42px;
+  cursor: pointer;
+  margin-top: 13px;
+  transition: background 0.18s;
+}
+#consolidatedOrderDetailsModal .cod-closebtn:hover {
+  background: #dae1fa;
+}
+.shipment-container {
+    background: #f4f4f6;              /* हलका gray background */
+    border-radius: 10px;              /* कोपरे गोल */
+    padding: 14px 18px;               /* आतील space */
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* हलकी सावली */
+    margin: 10px 0;                   /* थोडं बाहेरचं space */
+    font-family: 'Segoe UI', Arial, sans-serif;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+/* Hover effect - थोडा उठून दिसतो */
+.shipment-container:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+/* आतल्या headings साठी consistency */
+.shipment-container span {
+    display: inline-block;
+}
+
+/* Status badge look सुधारण्यासाठी */
+#modalShipmentStatus {
+    background: #ffb366;
+    color: #fff;
+    padding: 4px 14px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 600;
+}
 
 
 
@@ -277,7 +454,7 @@ tr:hover td { background-color:#f9fafc;}
                 </thead>
                 <tbody>
                     <tr>
-                        <td><a href="#" class="entry-link">PAY-2023-042</a></td>
+                        <td><a class="entry-link" onclick="openEntryDetailsModal('PAY-2023-042')">PAY-2023-042</a></td>
                         <td>2024-07-19</td>
                         <td>Electronic Cams</td>
                         <td>China</td>
@@ -287,7 +464,7 @@ tr:hover td { background-color:#f9fafc;}
                         <td><button class="plus-btn" title="Add" onclick="openInstallmentModal('PAY-2023-042', 'Electronic Cams', 'China', 8000)"><span style="font-size:21px;">+</span></button></td>
                     </tr>
                     <tr>
-                        <td><a href="#" class="entry-link">PAY-2023-041</a></td>
+                        <td><a class="entry-link" onclick="openEntryDetailsModal('PAY-2023-041')">PAY-2023-041</a></td>
                         <td>2024-07-19</td>
                         <td>Electronic Cams</td>
                         <td>China</td>
@@ -302,7 +479,7 @@ tr:hover td { background-color:#f9fafc;}
     </div>
 </div>
 
-<!-- CREATE NEW ORDER MODAL (matches your images, all layout/fields horizontal) -->
+<!-- CREATE NEW ORDER MODAL -->
 <div class="modal-fade" id="orderModal">
     <div class="modal-box">
         <div class="modal-head" style="margin-top:18px;">Create New Order Entry</div>
@@ -363,7 +540,7 @@ tr:hover td { background-color:#f9fafc;}
                         <tbody>
                             <tr>
                                 <td><input type="checkbox" checked></td>
-                                <td><a href="#" class="order-link">KNT-2024-003</a></td>
+                                <td><a href="#" class="order-link" onclick="openConsolidatedOrderDetailsModal('KNT-2024-003')">KNT-2024-003</a></td>
                                 <td>ITEM03</td>
                                 <td>Electronic Components...</td>
                                 <td>1</td><td>6</td><td>6</td>
@@ -372,7 +549,7 @@ tr:hover td { background-color:#f9fafc;}
                             </tr>
                             <tr>
                                 <td><input type="checkbox"></td>
-                                <td><a href="#" class="order-link">KNT-2024-003</a></td>
+                                <td><a href="#" class="order-link" onclick="openConsolidatedOrderDetailsModal('KNT-2024-003')">KNT-2024-003</a></td>
                                 <td>ITEM03</td>
                                 <td>Electronic Components...</td>
                                 <td>1</td><td>6</td><td>6</td>
@@ -381,7 +558,7 @@ tr:hover td { background-color:#f9fafc;}
                             </tr>
                             <tr>
                                 <td><input type="checkbox"></td>
-                                <td><a href="#" class="order-link">KNT-2024-003</a></td>
+                                <td><a href="#" class="order-link" onclick="openConsolidatedOrderDetailsModal('KNT-2024-003')">KNT-2024-003</a></td>
                                 <td>ITEM03</td>
                                 <td>Electronic Components...</td>
                                 <td>1</td><td>6</td><td>6</td>
@@ -399,6 +576,84 @@ tr:hover td { background-color:#f9fafc;}
         </form>
     </div>
 </div>
+
+<!-- ENTRY DETAILS MODAL (k40.PNG style) -->
+<div class="modal-fade1" id="entryDetailsModal">
+    <div class="modal-box1 entry-details-modal">
+        <div class="entry-details-header">
+            <h2 class="entry-details-title">Entry Details - <span id="entryDetailsId">PAY-2024-001</span></h2>
+            <p class="entry-details-subtitle">Complete view of all installments for this entry.</p>
+        </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">$5,000</div>
+            </div>
+            <div class="entry-summary-card">
+                <div class="entry-summary-label">Total Processed</div>
+                <div class="entry-summary-value" id="totalProcessed">$2,000</div>
+            </div>
+            <div class="entry-summary-card">
+                <div class="entry-summary-label">Pending Balance</div>
+                <div class="entry-summary-value" id="pendingBalance">$2,667</div>
+            </div>
+            <div class="entry-summary-card">
+                <div class="entry-summary-label">Total Installments</div>
+                <div class="entry-summary-value" id="totalInstallments">3</div>
+            </div>
+        </div>
+        
+        <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>
+                    <th>Pending</th>
+                </tr>
+            </thead>
+            <tbody id="installmentsTableBody">
+                <tr>
+                    <td>Original Entry</td>
+                    <td>2024-01-15</td>
+                    <td>Electronics Comp</td>
+                    <td>China</td>
+                    <td>$2,000</td>
+                    <td><span class="status-badge status-loading">Loading</span></td>
+                    <td>$1,500</td>
+                </tr>
+                <tr>
+                    <td>Installment 2</td>
+                    <td>2024-01-15</td>
+                    <td>Electronics Comp</td>
+                    <td>China</td>
+                    <td>$1,000</td>
+                    <td><span class="status-badge status-dispatched">Dispatched</span></td>
+                    <td>$1,500</td>
+                </tr>
+                <tr>
+                    <td>Installment 3</td>
+                    <td>2024-01-15</td>
+                    <td>Electronics Comp</td>
+                    <td>China</td>
+                    <td>$500</td>
+                    <td><span class="status-badge status-dispatched">Dispatched</span></td>
+                    <td>$1,500</td>
+                </tr>
+            </tbody>
+        </table>
+        
+        <div style="display:flex; justify-content: flex-end; gap:16px; margin-top:20px;">
+            <button type="button" class="modal-btn cancel" onclick="closeEntryDetailsModal()">Close</button>
+            <button type="button" class="modal-btn" onclick="openInstallmentModalFromDetails()">+ Add New Installment</button>
+        </div>
+    </div>
+</div>
+
 <!-- Add Installment Modal (Wide Card Style) -->
 <div class="modal-fade1" id="installmentModal">
     <div class="modal-box1" style="max: width 90%;; min-width:500px;">
@@ -485,11 +740,142 @@ tr:hover td { background-color:#f9fafc;}
     </div>
 </div>
 
+<!-- Consolidated Orders Details Modal (k44 style, heading+values+details) -->
+<div class="modal-fade1" id="consolidatedOrderDetailsModal">
+  <div class="modal-box1" style="max-width:800px; border-radius:16px; box-shadow:0 8px 44px #33487129; background:#fff; padding:0 26px 28px 26px; font-family:'Segoe UI', Arial, sans-serif;">
+
+    <!-- Modal heading with close -->
+    <div style="padding:18px 0 6px 0; font-weight:700; font-size:20px; color:#233063; display:flex;align-items:center; justify-content:space-between;">
+      Consolidated Orders Details
+      <span style="font-size:26px;color:#aaa;cursor:pointer;transition:color 0.2s;font-weight:600;" onclick="document.getElementById('consolidatedOrderDetailsModal').classList.remove('modal-open')">&times;</span>
+    </div>
+    
+    <!-- Headings and values - separate rows, centered -->
+    <div class="shipment-container">
+  <div style="margin:3px 0 12px 0;">
+    <!-- Headings -->
+    <div style="display:flex;justify-content:space-between;">
+      <span style="flex:1;text-align:center;color:#9ba5bb;font-weight:500;">Shipment ID</span>
+      <span style="flex:1;text-align:center;color:#9ba5bb;font-weight:500;">Total Orders</span>
+      <span style="flex:1;text-align:center;color:#9ba5bb;font-weight:500;">Status</span>
+    </div>
+    <!-- Values row -->
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-top:2px;">
+      <span style="flex:1;text-align:center;color:#2469d6;font-size:18px;font-weight:700;" id="modalShipmentId">KNT-SHIP-2024-001</span>
+      <span style="flex:1;text-align:center;font-weight:600;font-size:17px;" id="modalTotalOrders">1</span>
+      <span style="flex:1;text-align:center;" id="modalShipmentStatus">In Transit</span>
+    </div>
+  </div>
+</div>
+
+
+    <!-- Sub-description -->
+   
+    <!-- Table of orders -->
+    <table style="width:100%;background:#f8f3e4;border-collapse:collapse;border-radius:11px;box-shadow:0 1px 8px #eeeae5;margin-bottom:13px;font-size:14px;overflow:hidden;">
+      <thead>
+        <tr style="background:#ffe0a7;">
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Order ID</th>
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Item No</th>
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Description</th>
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">CTN</th>
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">QTY</th>
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">TTL/QTY</th>
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Unit</th>
+          <th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Amount (₹)</th>
+        </tr>
+      </thead>
+      <tbody id="modalOrdersBody">
+        <!-- Example rows -->
+        <tr>
+          <td><a style="color:#2469d6;font-weight:600;text-decoration:underline;cursor:pointer;">KNT-2024-001</a></td>
+          <td>ITEM001</td>
+          <td>Manufacturing Equipment...</td>
+          <td>4</td>
+          <td>100</td>
+          <td>500</td>
+          <td>PCS</td>
+          <td>₹4800.00</td>
+        </tr>
+        <tr>
+          <td><a style="color:#2469d6;font-weight:600;text-decoration:underline;cursor:pointer;">KNT-2024-001</a></td>
+          <td>ITEM001</td>
+          <td>Manufacturing Equipment...</td>
+          <td>4</td>
+          <td>100</td>
+          <td>500</td>
+          <td>PCS</td>
+          <td>₹4800.00</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Summary row -->
+    <div style="display:flex;gap:20px; justify-content: space-around;align-items:center;margin-top:13px;margin-bottom:2px;padding:11px 0 2px 0;">
+      <div>
+        <div style="font-size:23px;font-weight:700;color:#276dea;" id="modalTotalTtlQty">500</div>
+        <div style="font-size:13px;font-weight:500;margin-top:3px;color:#858fa2;letter-spacing:0.2px;">Total TTL/QTY</div>
+      </div>
+      <div>
+        <div style="font-size:23px;font-weight:700;color:#22b963;" id="modalTotalTtlKg">10</div>
+        <div style="font-size:13px;font-weight:500;margin-top:3px;color:#858fa2;letter-spacing:0.2px;">Total TTL KG</div>
+      </div>
+      <div>
+        <div style="font-size:23px;font-weight:700;color:#da2479;" id="modalTotalAmount">₹9600.00</div>
+        <div style="font-size:13px;font-weight:500;margin-top:3px;color:#858fa2;letter-spacing:0.2px;">Total Amount</div>
+      </div>
+    </div>
+    <div style="display:flex;justify-content:flex-end;">
+      <button type="button" style="background:#ebeffa;color:#37436c;border:none;border-radius:10px;font-size:16px;font-weight:600;padding:10px 42px;cursor:pointer;margin-top:13px;transition:background 0.18s;" onclick="document.getElementById('consolidatedOrderDetailsModal').classList.remove('modal-open')">Close</button>
+    </div>
+
+  </div>
+</div>
+
+
 <script>
 const installmentHistory = [
     { ref: 'PAY-2023-042', desc: 'Electronic Cams', date: '2024-07-19', amt: 2000, status: 'Dispatched' },
     { ref: 'PAY-2023-042', desc: 'Electronic Cams', date: '2024-08-01', amt: 2000, status: 'Dispatched' }
 ];
+
+// Entry Details Modal
+let currentEntryId = '';
+
+function openEntryDetailsModal(entryId) {
+    currentEntryId = entryId;
+    document.getElementById('entryDetailsId').textContent = entryId;
+    
+    // Set sample data based on entry ID
+    if(entryId === 'PAY-2023-042') {
+        document.getElementById('originalAmount').textContent = '$5,000';
+        document.getElementById('totalProcessed').textContent = '$2,000';
+        document.getElementById('pendingBalance').textContent = '$2,667';
+        document.getElementById('totalInstallments').textContent = '3';
+    } else if(entryId === 'PAY-2023-041') {
+        document.getElementById('originalAmount').textContent = '$3,000';
+        document.getElementById('totalProcessed').textContent = '$2,000';
+        document.getElementById('pendingBalance').textContent = '$1,000';
+        document.getElementById('totalInstallments').textContent = '2';
+    }
+    
+    document.getElementById('entryDetailsModal').classList.add('modal-open');
+}
+
+function closeEntryDetailsModal() {
+    document.getElementById('entryDetailsModal').classList.remove('modal-open');
+}
+
+function openInstallmentModalFromDetails() {
+    closeEntryDetailsModal();
+    // Get the pending balance from the details modal
+    const pendingBalance = document.getElementById('pendingBalance').textContent;
+    const pendingAmount = parseInt(pendingBalance.replace(/[$,]/g, ''));
+    
+    // Use the current entry ID and sample data
+    openInstallmentModal(currentEntryId, 'Electronic Cams', 'China', pendingAmount);
+}
+
 // Installment Modal
 function openInstallmentModal(ref, desc, region, pending) {
     document.getElementById('installmentModal').classList.add('modal-open');
@@ -521,13 +907,48 @@ function openInstallmentModal(ref, desc, region, pending) {
     </div>`;
     document.getElementById('installmentHistory').innerHTML = instHtml;
 }
+
 function closeInstallmentModal() {
     document.getElementById('installmentModal').classList.remove('modal-open');
 }
+
+// Consolidated Orders Details Modal
+function openConsolidatedOrderDetailsModal(orderId) {
+  document.getElementById('modalShipmentId').textContent = "KNT-SHIP-2024-001";
+  document.getElementById('modalShipmentStatus').textContent = "In Transit";
+  document.getElementById('modalOrdersBody').innerHTML = `
+    <tr>
+      <td><a style="color:#307fde;font-weight:600;text-decoration:underline;" href="#">KNT-2024-001</a></td>
+      <td>ITEM001</td>
+      <td>Manufacturing Equipment...</td>
+      <td>4</td>
+      <td>100</td>
+      <td>500</td>
+      <td>PCS</td>
+      <td>₹4800.00</td>
+    </tr>
+    <tr>
+      <td><a style="color:#307fde;font-weight:600;text-decoration:underline;" href="#">KNT-2024-001</a></td>
+      <td>ITEM001</td>
+      <td>Manufacturing Equipment...</td>
+      <td>4</td>
+      <td>100</td>
+      <td>500</td>
+      <td>PCS</td>
+      <td>₹4800.00</td>
+    </tr>
+  `;
+  document.getElementById('modalTotalTtlQty').textContent = "500";
+  document.getElementById('modalTotalTtlKg').textContent = "10";
+  document.getElementById('modalTotalAmount').textContent = "₹9600.00";
+  document.getElementById('consolidatedOrderDetailsModal').classList.add('modal-open');
+}
+
 document.getElementById('openOrderModal').onclick = function(){
     document.getElementById('orderModal').classList.add('modal-open');
 };
-// Tab-style Consolidated Orders: only one (for appearance - can extend for more tabs if needed)
+
+// Tab-style Consolidated Orders
 const toggleBtn = document.getElementById('toggleConsolidatedBtn');
 const consolOrdersList = document.getElementById('consolidateOrdersList');
 const toggleText = document.getElementById('toggleConsolidatedText');
@@ -538,12 +959,15 @@ toggleBtn.onclick = function(){
    consolOrdersList.style.display="none"; toggleText.textContent="Show Orders"; toggleBtn.classList.remove('active');
  }
 };
+
 document.getElementById('cancelOrderModal').onclick = function(){
     document.getElementById('orderModal').classList.remove('modal-open');
 };
+
 document.getElementById('orderModal').onclick = function(e){
     if(e.target === this) this.classList.remove('modal-open');
 };
+
 // Create Order logic
 document.getElementById('createOrderForm').addEventListener('submit', function(e) {
     e.preventDefault();
@@ -566,7 +990,7 @@ document.getElementById('createOrderForm').addEventListener('submit', function(e
     `);
     document.querySelector('#main-order-table tbody').insertAdjacentHTML('beforeend', `
         <tr>
-            <td><a href="#" class="entry-link">${entryNo}</a></td>
+            <td><a class="entry-link" onclick="openEntryDetailsModal('${entryNo}')">${entryNo}</a></td>
             <td>${date}</td>
             <td>${desc}</td>
             <td>${region}</td>
@@ -584,4 +1008,4 @@ document.getElementById('createOrderForm').addEventListener('submit', function(e
     this.reset();
 });
 </script>
-@endsection
+@endsection

resources/views/admin/dashboard.blade.php

@@ -3,81 +3,212 @@
 @section('page-title', 'Dashboard')
 
 @section('content')
-<div class="container-fluid py-4">
+<style>
+body, .container-fluid { background: #f4f7fc; }
+.dash-top-titlebox {
+  margin-bottom: 2px; background: transparent;
+  padding-left: 3px; padding-top: 2px;
+}
+.dash-title-main {
+  font-size: 1.54rem;
+  font-weight: 800;
+  letter-spacing: .018em;
+  color: #18213e;
+  margin-bottom: 2px;
+}
+.dash-title-desc {
+  font-size: 1rem;
+  color: #6577a3;
+  margin-bottom: 5px;
+  font-weight: 500;
+  letter-spacing: .01em;
+}
+.stats-row-wrap { margin-bottom: 33px; }
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 18px;
+  margin-bottom: 14px;
+}
+@media (max-width: 992px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 630px) { .stats-row { grid-template-columns: 1fr; } }
+.stats-card {
+  background: rgba(255,255,255,0.77);
+  border-radius: 16px;
+  box-shadow: 0 7px 32px 0 rgba(19, 39, 78, 0.13), 0 2px 7px 0 rgba(160,180,224,0.14), 0 2px 30px #c5dcf940;
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  overflow: hidden; position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 16px;
+  border: 1.2px solid #e8f0fd80;
+  transition: box-shadow .2s cubic-bezier(.45,.57,.46,.99), transform .15s cubic-bezier(.45,.57,.46,.99);
+  z-index: 1;
+}
+.stats-card::after {
+  content:""; position: absolute; inset: 0; border-radius: 16px; pointer-events:none;
+  background: linear-gradient(120deg,rgba(74,156,255,.15) 5%,rgba(210,228,255,.06) 54%,rgba(120,150,255,.13) 99%);
+  z-index:0;
+}
+.stats-card:hover, .stats-card:focus-within {
+  box-shadow: 0 18px 48px 0 rgba(62,87,177,0.16), 0 3px 19px 0 #82ccfc3b;
+  transform: scale(1.031) translateY(-7px);
+  z-index: 2;
+}
+.stats-icon {
+  font-size:1.65rem; width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
+  background:#f5f7fd; transition:.22s cubic-bezier(.57,.75,.45,.97);
+  box-shadow:0 1.7px 13px #edf1fd38;
+}
+.stats-card-blue .stats-icon {background:linear-gradient(135deg,#3492f8 55%,#1256cc 110%);color:#fff;}
+.stats-card-green .stats-icon {background:linear-gradient(135deg,#18ce77 60%,#08ac52 110%);color:#fff;}
+.stats-card-red .stats-icon {background:linear-gradient(135deg,#ff5a4e 65%,#d90010 110%);color:#fff;}
+.stats-card-orng .stats-icon {background:linear-gradient(135deg,#ffb23c 53%,#e17800 110%);color:#fff;}
+.stats-label { font-size:13px; color:#63709b; font-weight:600; letter-spacing:.28px;}
+.stats-value { font-size:1.25rem; font-weight:700; color:#194073;}
+.stats-card:hover .stats-icon {
+  transform: scale(1.09) rotate(7deg);
+  box-shadow:0 0 13px #2396f33b;
+}
+/* Table header box-round style */
+.table thead tr {
+  background: #feebbe !important;
+  border-radius: 17px 17px 0 0;
+  box-shadow: 0 2px 19px #f8cf667e;
+}
+.table thead th {
+  background: transparent !important;
+  border: none;
+  font-weight: 700; color: #343535; letter-spacing: 0.02em; font-size:15px;
+  padding-top: 12px; padding-bottom: 10px;
+}
+.table thead th:first-child  { border-radius: 17px 0 0 0;}
+.table thead th:last-child   { border-radius: 0 17px 0 0;}
+/* ------- */
 
-  {{-- Header --}}
+.order-mgmt-box {
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  background: #fff; border-radius:17px; box-shadow:0 7px 38px #dde3fa77, 0 2px 9px #e5e7ff80;
-    <h4 class="mb-0">Order Management</h4>
+  margin-bottom: 33px; margin-top: 10px; padding-bottom: 0;
-    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#createOrderForm">
+}
-      <i class="bi bi-plus-circle"></i> Create Order
+.order-mgmt-bar {
-    </button>
+  display:flex; justify-content:space-between; align-items:center;
+  border-radius:17px 17px 0 0; background: #fffbe9;
+  min-height: 54px; padding: 15px 26px 10px 22px; border-bottom: 1.4px solid #e8e2cf;
+  box-shadow:0 1px 13px #ffe2a888;
+}
+.order-mgmt-title {
+  font-size:1.32rem; font-weight:800; color:#2451af; letter-spacing:.08em;
+  display: flex; align-items: center; gap: 11px;
+}
+.order-mgmt-title i { font-size: 1.12em; color: #336ad3; }
+.create-order-btn {
+  background: linear-gradient(90deg,#226ad6,#46b4fd 123%);
+  padding:9px 26px; font-weight:600; border:none; border-radius:9px; color:#fff;
+  font-size:16.2px; box-shadow: 0 2px 13px #dde7fa42;
+  transition: background 0.16s, box-shadow .17s;
+  display: flex; align-items: center; gap: 8px; font-family: inherit;
+}
+.create-order-btn:hover {
+  background: linear-gradient(90deg,#3264f8,#3acfff 140%);
+  box-shadow:0 4px 25px #5ab8f880;
+}
+.card-body, .order-mgmt-main { background: #fff; border-radius: 0 0 17px 17px; padding:25px; }
+.card { border-radius:17px; box-shadow:0 7px 29px #e7eefd8c; border:none; margin-bottom:23px!important;}
+.table { background:#fff; border-radius:9px; box-shadow:0 2px 12px #e2ebf941;}
+.table-striped tbody tr:nth-of-type(odd) { background:#f9fafc; }
+.table-responsive { border-radius:10px; }
+.badge { font-size:13px; font-weight:600; padding:7px 17px; border-radius:12px;}
+.bg-info { background-color:#22cbfa!important; color:#fff!important;}
+.form-label { font-weight:600; color:#1d3159; font-size:15px;}
+.form-control, .form-select {
+  border-radius:8px!important; font-size:15.8px; background: #f7f9fe;
+  border:1.2px solid #c7dbfa; font-weight:500;
+}
+.form-control:focus, .form-select:focus {
+  border-color:#2469d6; box-shadow:0 0 4px #226ad688;
+}
+.table td a { color:#2469d6; font-weight:600; text-decoration:underline; }
+@media (max-width:1200px){.stats-row{grid-template-columns:repeat(2,1fr);}}
+@media (max-width:768px){
+  .order-mgmt-bar{flex-direction:column;align-items:flex-start;gap:7px;padding:14px;}
+  .create-order-btn{margin-top:8px;}
+  .table th, .table td{font-size:13.5px;}
+}
+</style>
+
+<div class="container-fluid py-3">
+
+  <!-- DASHBOARD TITLE & DESC -->
+  <div class="dash-top-titlebox">
+    <div class="dash-title-main">Admin Dashboard</div>
+    <div class="dash-title-desc">Monitor operations and manage system</div>
   </div>
 
-  {{-- Create Order Form --}}
+  <!-- STATS CARDS BLOCK: 2 x 4 layout -->
-  <div id="createOrderForm" class="collapse">
+  <div class="stats-row-wrap">
-    <div class="card shadow-sm mb-4">
+    <div class="stats-row">
-      <div class="card-header bg-light">
+      <div class="stats-card stats-card-blue"><span class="stats-icon">📦</span><div style="z-index:2;"><div class="stats-label">Total Shipments</div><div class="stats-value">1,247</div></div></div>
-        <strong>New Order Form</strong>
+      <div class="stats-card stats-card-blue"><span class="stats-icon">👥</span><div style="z-index:2;"><div class="stats-label">Active Customers</div><div class="stats-value">342</div></div></div>
-      </div>
+      <div class="stats-card stats-card-green"><span class="stats-icon">💰</span><div style="z-index:2;"><div class="stats-label">Total Revenue</div><div class="stats-value">₹123</div></div></div>
-      <div class="card-body">
+      <div class="stats-card stats-card-red"><span class="stats-icon">⏳</span><div style="z-index:2;"><div class="stats-label">Pending Order</div><div class="stats-value">23</div></div></div>
-        <form action="{{ route('admin.orders.store') }}" method="POST">
+    </div>
-          @csrf
+    <div class="stats-row">
-          <div class="row g-3">
+      <div class="stats-card stats-card-blue"><span class="stats-icon">📦</span><div style="z-index:2;"><div class="stats-label">Total Orders</div><div class="stats-value">453</div></div></div>
-
+      <div class="stats-card stats-card-blue"><span class="stats-icon">🧑‍💼</span><div style="z-index:2;"><div class="stats-label">Total Staff</div><div class="stats-value">125</div></div></div>
-            {{-- Mark No --}}
+      <div class="stats-card stats-card-blue"><span class="stats-icon">📦</span><div style="z-index:2;"><div class="stats-label">Total Items</div><div class="stats-value">321</div></div></div>
-            <div class="col-md-4">
+      <div class="stats-card stats-card-orng"><span class="stats-icon">⛔</span><div style="z-index:2;"><div class="stats-label">Inactive Customers</div><div class="stats-value">10</div></div></div>
-              <label class="form-label">Mark No</label>
-              <select class="form-select" id="markNoSelect" name="mark_no" required>
-                <option value="">Select Mark No</option>
-                @foreach($markList as $mark)
-                  <option value="{{ $mark->mark_no }}"
-                    data-origin="{{ $mark->origin }}"
-                    data-destination="{{ $mark->destination }}">
-                    {{ $mark->mark_no }} - {{ $mark->customer_name }}
-                  </option>
-                @endforeach
-              </select>
-            </div>
-
-            <div class="col-md-4">
-              <label class="form-label">Origin</label>
-              <input type="text" class="form-control" name="origin" id="originField" readonly>
-            </div>
-
-            <div class="col-md-4">
-              <label class="form-label">Destination</label>
-              <input type="text" class="form-control" name="destination" id="destinationField" readonly>
-            </div>
-
-            <div class="col-md-4">
-              <label class="form-label">Description</label>
-              <input type="text" class="form-control" name="description" required>
-            </div>
-
-            <div class="col-md-2"><label class="form-label">CTN</label><input type="number" class="form-control" name="ctn"></div>
-            <div class="col-md-2"><label class="form-label">QTY</label><input type="number" class="form-control" name="qty"></div>
-            <div class="col-md-2"><label class="form-label">TTL/QTY</label><input type="number" class="form-control" name="ttl_qty"></div>
-            <div class="col-md-2"><label class="form-label">Unit</label><input type="text" class="form-control" name="unit"></div>
-            <div class="col-md-2"><label class="form-label">Price</label><input type="number" step="0.01" class="form-control" name="price"></div>
-            <div class="col-md-2"><label class="form-label">TTL Amount</label><input type="number" step="0.01" class="form-control" name="ttl_amount"></div>
-            <div class="col-md-2"><label class="form-label">CBM</label><input type="number" step="0.001" class="form-control" name="cbm"></div>
-            <div class="col-md-2"><label class="form-label">TTL CBM</label><input type="number" step="0.001" class="form-control" name="ttl_cbm"></div>
-            <div class="col-md-2"><label class="form-label">KG</label><input type="number" step="0.001" class="form-control" name="kg"></div>
-            <div class="col-md-2"><label class="form-label">TTL KG</label><input type="number" step="0.001" class="form-control" name="ttl_kg"></div>
-            <div class="col-md-3"><label class="form-label">Shop No</label><input type="text" class="form-control" name="shop_no"></div>
-
-            <div class="col-md-12 text-end">
-              <button type="submit" class="btn btn-success mt-3">
-                <i class="bi bi-save"></i> Submit Order
-              </button>
-            </div>
-
-          </div>
-        </form>
-      </div>
     </div>
   </div>
 
+  <!-- ORDER MANAGEMENT BOX (header + main) -->
+  <div class="order-mgmt-box">
+    <div class="order-mgmt-bar">
+      <span class="order-mgmt-title"><i class="bi bi-table"></i> Order Management</span>
+      <button class="create-order-btn" data-bs-toggle="collapse" data-bs-target="#createOrderForm">
+        <i class="bi bi-plus-circle"></i> Create Order
+      </button>
+    </div>
+    <div class="order-mgmt-main">
+      <!-- Create Order Form -->
+      <div id="createOrderForm" class="collapse mb-3">
+        <div class="card">
+          <div class="card-header bg-light"><strong>New Order Form</strong></div>
+          <div class="card-body">
+            <form action="{{ route('admin.orders.store') }}" method="POST">
+              @csrf
+              <div class="row g-3">
+                <div class="col-md-4"><label class="form-label">Mark No</label>
+                  <select class="form-select" id="markNoSelect" name="mark_no" required>
+                    <option value="">Select Mark No</option>
+                    @foreach($markList as $mark)
+                      <option value="{{ $mark->mark_no }}"
+                        data-origin="{{ $mark->origin }}"
+                        data-destination="{{ $mark->destination }}">
+                        {{ $mark->mark_no }} - {{ $mark->customer_name }}
+                      </option>
+                    @endforeach
+                  </select>
+                </div>
+                <div class="col-md-4"><label class="form-label">Origin</label><input type="text" class="form-control" name="origin" id="originField" readonly></div>
+                <div class="col-md-4"><label class="form-label">Destination</label><input type="text" class="form-control" name="destination" id="destinationField" readonly></div>
+                <div class="col-md-4"><label class="form-label">Description</label><input type="text" class="form-control" name="description" required></div>
+                <div class="col-md-2"><label class="form-label">CTN</label><input type="number" class="form-control" name="ctn"></div>
+                <div class="col-md-2"><label class="form-label">QTY</label><input type="number" class="form-control" name="qty"></div>
+                <div class="col-md-2"><label class="form-label">TTL/QTY</label><input type="number" class="form-control" name="ttl_qty"></div>
+                <div class="col-md-2"><label class="form-label">Unit</label><input type="text" class="form-control" name="unit"></div>
+                <div class="col-md-2"><label class="form-label">Price</label><input type="number" step="0.01" class="form-control" name="price"></div>
+                <div class="col-md-2"><label class="form-label">TTL Amount</label><input type="number" step="0.01" class="form-control" name="ttl_amount"></div>
+                <div class="col-md-2"><label class="form-label">CBM</label><input type="number" step="0.001" class="form-control" name="cbm"></div>
+                <div class="col-md-2"><label class="form-label">TTL CBM</label><input type="number" step="0.001" class="form-control" name="ttl_cbm"></div>
+                <div class="col-md-2"><label class="form-label">KG</label><input type="number" step="0.001" class="form-control" name="kg"></div>
+                <div class="col-md-2"><label class="form-label">TTL KG</label><input type="number" step="0.001" class="form-control" name="ttl_kg"></div>
+                <div class="col-md-3"><label class="form-label">Shop No</label><input type="text" class="form-control" name="shop_no"></div>
+                <div class="col-md-12 text-end">
+                  <button type="submit" class="btn btn-success mt-3"><i class="bi bi-save"></i> Submit Order</button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+      
   {{-- Recent Orders Table --}}
   <div class="card shadow-sm">
     <div class="card-header bg-light">
@@ -146,8 +277,6 @@
   </div>
 
 </div>
-
-{{-- Autofill JS --}}
 <script>
 document.getElementById('markNoSelect').addEventListener('change', function() {
   const option = this.options[this.selectedIndex];