B

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

resources/views/admin/account.blade.php

@@ -1,12 +1,587 @@
 @extends('admin.layouts.app')
 
-@section('page-title', 'account')
+@section('page-title', 'Account Dashboard')
 
 @section('content')
-<div class="card shadow-sm">
-  <div class="card-body">
-    <h4>Welcome to the Admin account</h4>
-    <p>Here you can manage all system modules.</p>
+<style>
+body { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #eef2f7, #f9fbff); margin:0; padding:0;}
+.account-container { padding: 30px 40px; }
+.account-header { margin-bottom: 25px; background: linear-gradient(90deg, #1a2951, #243a72); padding: 20px 25px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); color: #fff;}
+.account-header h2 { font-size: 28px; font-weight: 700; margin: 0 0 5px 0;}
+.account-header p { font-size: 15px; opacity: 0.9; margin: 2px 0;}
+.search-row { display: flex; align-items: center; justify-content: space-between; margin-bottom:25px; flex-wrap:wrap; gap:10px;}
+.search-row input { width:360px; padding:10px 14px; border-radius:8px; border:1px solid #d1d9e6; background: #fff; font-size:15px; box-shadow:0 1px 3px rgba(0,0,0,0.05);}
+.search-row input:focus { border-color:#1a2951; box-shadow:0 0 4px rgba(26,41,81,0.2);}
+.search-btn { background: linear-gradient(90deg, #1a2951, #243a72); color:white; border:none; border-radius:8px; padding:10px 22px; font-size:15px; cursor:pointer; font-weight:500; transition: all 0.2s;}
+.search-btn:hover { background: linear-gradient(90deg, #243a72, #1a2951); transform: translateY(-2px); }
+.account-panels { display:flex; justify-content:space-between; align-items:stretch; gap:25px; width:100%; flex-wrap:wrap; }
+.panel-card { background: linear-gradient(180deg, #ffffff, #f5f7fb); border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,0.08); flex: 1; min-width:48%; padding:18px; box-sizing:border-box; overflow-x:auto; transition:0.3s;}
+.panel-card:hover { box-shadow: 0 6px 14px rgba(0,0,0,0.15); transform: translateY(-2px);}
+.panel-title { font-weight:600; font-size:17px; color:#1a2951; margin-bottom:12px; border-bottom:2px solid #e4e8f0; padding-bottom:6px; }
+table { width:100%; border-collapse:collapse; min-width:700px; }
+th, td { padding:10px 12px; text-align:left; font-size:15px; border-bottom: 1px solid #e5e9f2; white-space:nowrap;}
+th { background: linear-gradient(90deg,#f3f6fb,#f9fbff); color:#4a5570; font-weight:600;}
+tr:hover td { background-color:#f9fafc;}
+.status-badge { display:inline-block; padding:6px 14px; border-radius:20px; color:#fff; font-size:13px; font-weight:500;}
+.status-unpaid { background-color:#ef4f4f; }
+.status-paid { background-color:#34c86c; }
+.status-loading { background-color:#509cf8; }
+.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;}
+.toggle-switch-btn {
+    appearance: none; -webkit-appearance: none;
+    width: 48px; height: 22px;
+    background: #fa6464; border: 2px solid #fa6464;
+    border-radius: 999px;
+    position: relative; outline: none;
+    transition: background .25s, border .25s;
+    cursor: pointer; vertical-align: middle; display: inline-block;
+}
+.toggle-switch-btn::before { content: ""; display: block; width: 20px; height: 18px; left: 2px; top: 1px; background: #fff; border-radius: 50%; position: absolute; transition: .24s; box-shadow: 0 0 2px #999;}
+.toggle-switch-btn:checked { background: #43d05c; border-color: #43d05c;}
+.toggle-switch-btn:checked::before { transform: translateX(26px);}
+.plus-btn { display: inline-block; width: 32px; height: 32px; border-radius: 12px; background: #fff; color: #1a2951; border: 1.8px solid #e5eaf2; font-size: 1.35rem; font-weight: 600; text-align: center; line-height: 28px; cursor: pointer; transition: background 0.19s, border 0.19s; vertical-align: middle; outline: none;}
+.plus-btn:hover { background: #f4f6fa; border-color: #92a0c2; color: #204080;}
+/* 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.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-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;}
+.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;
+  /* keep default */
+}
+
+.modal-fade1.modal-open {
+  display:flex;
+}
+
+.modal-box1 {
+  max-width: 550px;
+  min-width: 370px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+/* Create Order Modal */
+.create-order-form-main { display: flex; flex-direction: column; gap: 11px; margin-bottom:18px;}
+.create-order-row { display:flex; gap:15px;}
+.create-order-group { flex:1; display:flex; flex-direction:column;}
+.create-order-group label { font-size:15px; font-weight:600; margin-bottom:3.5px; color:#222b44;}
+.create-order-group input, .create-order-group select { font-size:16px; border-radius:7px; border:1.7px solid #d3d8ec; padding:8px 10px; background:#f8fafc; }
+.create-order-group input:focus, .create-order-group select:focus { outline:none; border-color:#2672ca;}
+/* Consolidated section */
+.consolidate-tabs-main { display:flex; align-items:center; margin-bottom:0;}
+.consolidate-tab-btn { border:none; outline:none; background:#edf0f8; font-weight:600; color:#1a2951; font-size:17px; padding:8px 20px 7px 18px; border-radius:11px 11px 0 0; margin-right:1px; transition: background 0.14s; cursor:pointer;}
+.consolidate-tab-btn.active, .consolidate-tab-btn:focus { background:#f7c97d; color:#0d1736; }
+#consolidateOrdersTable { width:100%; border-collapse:collapse; font-size:15px; background:#fffbe9; border-radius:7px; box-shadow:0 1px 8px #eeeae5;}
+#consolidateOrdersTable th { background: #ffe0a7; font-weight:600; font-size:14.3px; border-bottom:2px solid #ffeabb;}
+#consolidateOrdersTable td { background: #fffbe9; border:none; border-bottom:1px solid #f2e6ce;}
+#consolidateOrdersTable tr:last-child td { border-bottom:none;}
+#consolidateOrdersTable .order-link { color:#307fde; font-weight:600; text-decoration:underline; }
+.modal-actions-row { display:flex; gap:26px; justify-content:flex-end; margin-top:18px;}
+.modal-btn { padding:10px 38px; font-size:18px; border-radius:9px; font-weight:600; border:none; cursor:pointer; background:#1a2951; color:#fff; transition:0.18s;}
+.modal-btn:hover { background:#243a72;}
+.modal-btn.cancel { background:#e7eaf1; color:#243a72;}
+.modal-btn.cancel:hover { background:#ccd2e2;}
+
+/* Installment Modal */
+.inst-detail-group { display:flex; flex-direction:column; align-items:flex-start; min-width:150px;}
+.inst-detail-heading { color:#8a96b2; font-size:13.6px; font-weight:600; margin-bottom:2.5px; }
+.inst-detail-val { font-weight:600; font-size:15px; color:#24376a; background: #f9fbff; display:inline-block; border-radius:8px; padding:7px 22px 7px 13px; min-width:80px;}
+.inst-detail-pending { color:#e14a4a!important; background:#fff1f1;}
+.inst-badge { font-weight:600; border-radius:9px; padding:4px 13px; font-size:15px; display:inline-block;}
+.inst-badge-dispatched { background:#20c5c7; color:#fff;}
+.inst-badge-pending { background:#ffb84c; color:#24376a;}
+.inst-red { color:#d33; }
+.inst-green { color:#20c872; }
+.inst-blue { color:#509cf8; }
+.inst-purple { color:#7d57d2; }
+
+<!-- Add to your CSS section: -->
+
+/* 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);}
+.installment-card:not(:first-child) { border-left: 3px solid #669cff; background: #f7faff; }
+.installment-label { color: #2770ea; font-weight:700; text-decoration:underline; font-size:15px; min-width:105px;}
+.installment-desc { color: #333; font-size: 14px; opacity: 0.89; margin-left:6px; flex:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.installment-date { color: #9ea7c1; font-size: 13px; margin-right:14px;}
+.installment-amt { color: #20455a; font-weight:600; font-size:15px; background: #f8f5f5; border-radius:7px; padding:6px 16px; margin:0 10px;}
+.installment-badge { padding:4px 15px; font-size:13.2px; border-radius:15px; font-weight:600; margin-left:4px; background:#22aebc; color:#fff;}
+/* Totals row */
+.installment-summary-row { margin-top: 18px; display: flex; gap:17px; justify-content:space-around; text-align:center; }
+.isum-block { flex:1; }
+.isum-num { font-weight:700; font-size:20px; display: block; }
+.isum-blue { color:#367af6; }
+.isum-green { color:#27ca58; }
+.isum-red { color:#e58211; }
+.isum-purple { color:#9856e6; }
+
+.installment-block-card {
+  background: #fff;
+  border-radius: 15px;
+  border: 1.8px solid #eee;
+  padding: 18px 20px 18px 19px;
+  box-shadow: 0 3px 13px 0 rgba(30,44,68,0.08);
+  max-width: 700px;
+  margin:auto;
+}
+.installment-title { font-weight:600; font-size:15.8px; margin-bottom:11px; color:#102a44;}
+.installment-list { margin-bottom:15px; }
+.installment-card {
+  background: #fafdff;
+  border-radius: 10px;
+  margin-bottom: 11px;
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2.5px 7px 0 rgba(60,90,170,0.09);
+  border-left: 3px solid #a7cef7;
+}
+.installment-card.original {
+  border-left: 3px solid #2268c0;
+  background: #f6f8fd;
+}
+.installment-label {
+  color: #2268c0;
+  font-weight:700;
+  text-decoration:underline;
+  font-size:15.5px;
+  min-width:105px;
+}
+.installment-desc {
+  color: #314050;
+  font-size: 13.7px;
+  opacity: 0.89;
+  margin-left:8px;
+  flex:2;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.installment-date {
+  color: #7c8db2;
+  font-size: 13px;
+  margin-right:14px;
+  margin-left:10px;
+}
+.installment-amt {
+  color: #20455a;
+  font-weight:600;
+  font-size:15px;
+  background: #f8f5f5;
+  border-radius:7px;
+  padding:7px 15px;
+  margin:0 11px;
+  font-variant-numeric: tabular-nums;
+}
+.installment-badge {
+  padding:5px 17px;
+  font-size:13px;
+  border-radius:15px;
+  font-weight:600;
+  margin-left:7px;
+  background:#2ec3ce;
+  color:#fff;
+  box-shadow:0 2px 8px rgba(40,120,150,0.10);
+}
+/* Summary Row */
+.installment-summary-row {
+  margin-top: 2px;
+  padding-top:9px;
+  background:#f7f8fd;
+  border-radius:11px;
+  display: flex; gap:18px; justify-content:space-around; text-align:center;
+}
+.isum-block { flex:1; }
+.isum-num { font-weight:700; font-size:18.5px; display: block; }
+.isum-label { font-size:12.7px; color:#314050; }
+.isum-blue { color:#276dea; }
+.isum-green { color:#27ca58; }
+.isum-red { color:#e58211; }
+.isum-purple { color:#9856e6; }
+
+
+
+
+@media(max-width:1024px){.modal-box{max-width:97vw;min-width:80vw;}}
+@media(max-width:800px){.modal-box{min-width:99vw; max-width:99vw; padding:4px 1.5vw;} .create-order-row{flex-direction:column; gap:7px;}}
+</style>
+
+<div class="account-container">
+    <!-- Header -->
+    <div class="account-header">
+        <h2>Account Dashboard</h2>
+        <p>Viewing: China Region Orders</p>
+        <p>Workflow: Manage payments and dispatch process effectively</p>
+    </div>
+    <!-- Search -->
+    <div class="search-row">
+        <div>
+            <input type="text" id="main-search" placeholder="Search by Entry No or Description">
+            <button class="search-btn">Search</button>
+        </div>
+        <button class="search-btn" id="openOrderModal">+ Create New Order</button>
+    </div>
+    <div class="account-panels" id="account-panels">
+        <div class="panel-card">
+            <div class="panel-title">Payment Sent to China</div>
+            <table id="main-payment-table">
+                <thead>
+                    <tr>
+                        <th>Entry No</th><th>Date</th><th>Description</th>
+                        <th>Order Quantity</th><th>Region</th><th>Toggle</th><th>Amount</th><th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>PAY-2023-042</td><td>2024-07-19</td>
+                        <td>Electronic Cams</td><td>3</td><td>China</td>
+                        <td><input type="checkbox" class="toggle-switch-btn" checked></td>
+                        <td>₹3,000</td>
+                        <td><span class="status-badge status-unpaid">Unpaid</span></td>
+                    </tr>
+                    <tr>
+                        <td>PAY-2023-041</td><td>2024-07-19</td>
+                        <td>Electronic Cams</td><td>2</td><td>China</td>
+                        <td><input type="checkbox" class="toggle-switch-btn"></td>
+                        <td>₹2,000</td>
+                        <td><span class="status-badge status-paid">Paid</span></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="panel-card">
+            <div class="panel-title">Order Dispatch Status</div>
+            <table id="main-order-table">
+                <thead>
+                    <tr>
+                        <th>Entry No</th><th>Date</th><th>Description</th>
+                        <th>Region</th><th>Amount</th><th>Status</th>
+                        <th>Pending</th><th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><a href="#" class="entry-link">PAY-2023-042</a></td>
+                        <td>2024-07-19</td>
+                        <td>Electronic Cams</td>
+                        <td>China</td>
+                        <td>₹3,000</td>
+                        <td><span class="status-badge status-loading">Loading</span></td>
+                        <td><span class="status-badge pending-badge-green">Completed</span></td>
+                        <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>2024-07-19</td>
+                        <td>Electronic Cams</td>
+                        <td>China</td>
+                        <td>₹2,000</td>
+                        <td><span class="status-badge status-dispatched">Dispatched</span></td>
+                        <td><span class="status-badge pending-badge-red">₹1,000</span></td>
+                        <td><button class="plus-btn" title="Add" onclick="openInstallmentModal('PAY-2023-041', 'Electronic Cams', 'China', 1000)"><span style="font-size:21px;">+</span></button></td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
+</div>
+
+<!-- CREATE NEW ORDER MODAL (matches your images, all layout/fields horizontal) -->
+<div class="modal-fade" id="orderModal">
+    <div class="modal-box">
+        <div class="modal-head" style="margin-top:18px;">Create New Order Entry</div>
+        <div class="modal-desc">Create a new order entry and consolidate orders for processing.</div>
+        <form id="createOrderForm" autocomplete="off">
+            <div class="create-order-form-main">
+                <div class="create-order-row">
+                    <div class="create-order-group">
+                        <label>Description *</label>
+                        <input type="text" name="desc" required>
+                    </div>
+                    <div class="create-order-group">
+                        <label>Region *</label>
+                        <select name="region" required>
+                            <option value="China">China</option>
+                            <option value="Europe">Europe</option>
+                            <option value="US">US</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="create-order-row">
+                    <div class="create-order-group">
+                        <label>Total Amount (₹) *</label>
+                        <input type="number" name="amount" min="0" required>
+                    </div>
+                    <div class="create-order-group">
+                        <label>Entry Date *</label>
+                        <input type="date" name="entrydate" required>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="consolidate-tabs-main">
+                    <button type="button" class="consolidate-tab-btn active" id="toggleConsolidatedBtn"><span id="toggleConsolidatedText">Hide Orders</span></button>
+                    <span style="font-weight:600; font-size:16px; color:#1e2d4e; margin-left:10px;">Consolidated Orders</span>
+                </div>
+                <div class="consol-orders-section" id="consolidateOrdersList" style="margin-bottom:4px;">
+                    <table id="consolidateOrdersTable">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Order ID</th>
+                                <th>Item No</th>
+                                <th>Description</th>
+                                <th>CTN</th>
+                                <th>QTY</th>
+                                <th>TTL/QTY</th>
+                                <th>Unit</th>
+                                <th>Price (₹)</th>
+                                <th>Amount (₹)</th>
+                                <th>CBM</th>
+                                <th>TTL CBM</th>
+                                <th>KG</th>
+                                <th>TTL KG</th>
+                                <th>Shop No</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td><input type="checkbox" checked></td>
+                                <td><a href="#" class="order-link">KNT-2024-003</a></td>
+                                <td>ITEM03</td>
+                                <td>Electronic Components...</td>
+                                <td>1</td><td>6</td><td>6</td>
+                                <td>SET</td><td>₹800.00</td><td>₹4800.00</td>
+                                <td>6.00</td><td>6.00</td><td>45.00</td><td>45.00</td><td>SH003</td>
+                            </tr>
+                            <tr>
+                                <td><input type="checkbox"></td>
+                                <td><a href="#" class="order-link">KNT-2024-003</a></td>
+                                <td>ITEM03</td>
+                                <td>Electronic Components...</td>
+                                <td>1</td><td>6</td><td>6</td>
+                                <td>SET</td><td>₹800.00</td><td>₹4800.00</td>
+                                <td>6.00</td><td>6.00</td><td>45.00</td><td>45.00</td><td>SH003</td>
+                            </tr>
+                            <tr>
+                                <td><input type="checkbox"></td>
+                                <td><a href="#" class="order-link">KNT-2024-003</a></td>
+                                <td>ITEM03</td>
+                                <td>Electronic Components...</td>
+                                <td>1</td><td>6</td><td>6</td>
+                                <td>SET</td><td>₹800.00</td><td>₹4800.00</td>
+                                <td>6.00</td><td>6.00</td><td>45.00</td><td>45.00</td><td>SH003</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-actions-row">
+                <button type="button" class="modal-btn cancel" id="cancelOrderModal">Cancel</button>
+                <button type="submit" class="modal-btn">Create</button>
+            </div>
+        </form>
+    </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;">
+        <div style="display:flex; align-items:center; margin-bottom:12px;">
+            <span style="font-size:1.22rem; font-weight:700; margin-top:50px;">+ Add New Installment</span>
+            <button style="margin-left:auto; background:none; border:none; font-size:1.33rem; color:#aaa; cursor:pointer; font-weight:600;" onclick="closeInstallmentModal()">×</button>
+        </div>
+        <div style="font-size:16px; color:#7687a3; margin-bottom:18px;">Create a new processing entry for the remaining pending amount</div>
+        <div id="instDetailsRow" style="display:flex; gap:22px; margin-bottom:17px;"></div>
+        <form id="installmentForm" autocomplete="off">
+            <div style="display:flex; gap:15px; margin-bottom:9px;">
+                <div style="flex:1; display:flex; flex-direction:column;">
+                    <label style="font-weight:600; color:#253c57; font-size:15px; margin-bottom:2px;">Processing Date *</label>
+                    <input type="date" name="proc_date" required style="font-size:15px; border-radius:7px; border:1.5px solid #d3d8ec; background:#f8fafc; padding:8px;">
+                </div>
+                <div style="flex:1; display:flex; flex-direction:column;">
+                    <label style="font-weight:600; color:#253c57; font-size:15px; margin-bottom:2px;">Processing Amount *</label>
+                    <input type="number" min="1" name="proc_amount" required style="font-size:15px; border-radius:7px; border:1.5px solid #d3d8ec; background:#f8fafc; padding:8px;" placeholder="Enter amount">
+                    <span style="font-size:12px; color:#8e97ba; margin-top:3px;">Maximum: <span id="maxPending"></span></span>
+                </div>
+                <div style="flex:1; display:flex; flex-direction:column;">
+                    <label style="font-weight:600; color:#253c57; font-size:15px; margin-bottom:2px;">Status</label>
+                    <select name="status" required style="font-size:15px; border-radius:7px; border:1.5px solid #d3d8ec; background:#f8fafc; padding:8px;">
+                        <option value="Pending">Pending</option>
+                        <option value="Loading">Loading</option>
+                        <option value="Packed">Packed</option>
+                        <option value="Dispatched">Dispatched</option>
+                        <option value="Delivered">Delivered</option>
+                    </select>
+                </div>
+            </div>
+            <div style="font-weight:600; font-size:16px; color:#253c57; margin:12px 0 7px 0;">Processing History</div>
+           
+          <div style="padding:16px;">
+  <div class="installment-block-card">
+    <div class="installment-title">Current Installments (2)</div>
+    <!-- Card List START -->
+    <div class="installment-list">
+      <div class="installment-card original">
+        <span class="installment-label">Original Entry</span>
+        <span class="installment-desc">Electronics ...</span>
+        <span class="installment-date">2024-01-15</span>
+        <span class="installment-amt">₹2,000</span>
+        <span class="installment-badge">Dispatched</span>
+      </div>
+      <div class="installment-card">
+        <span class="installment-label">Installment 2</span>
+        <span class="installment-desc">Electronics ...</span>
+        <span class="installment-date">2024-01-20</span>
+        <span class="installment-amt">₹2,000</span>
+        <span class="installment-badge">Dispatched</span>
+      </div>
+    </div>
+    <!-- Card List END -->
+
+    <!-- SUMMARY ROW START -->
+    <div class="installment-summary-row">
+      <div class="isum-block">
+        <span class="isum-num isum-blue">2</span>
+        <span class="isum-label">Total Installments</span>
+      </div>
+      <div class="isum-block">
+        <span class="isum-num isum-green">₹2,000</span>
+        <span class="isum-label">Total Processed</span>
+      </div>
+      <div class="isum-block">
+        <span class="isum-num isum-red">₹8,000</span>
+        <span class="isum-label">Remaining Balance</span>
+      </div>
+      <div class="isum-block">
+        <span class="isum-num isum-purple">₹10,000</span>
+        <span class="isum-label">Original Amount</span>
+      </div>
+    </div>
+    <!-- SUMMARY ROW END -->
+  </div>
+</div>
+
+            <div style="display:flex; justify-content: flex-end; gap:16px; margin-top:8px;">
+                <button type="button" class="modal-btn cancel" onclick="closeInstallmentModal()">Cancel</button>
+                <button type="submit" class="modal-btn">Create Installment</button>
+            </div>
+        </form>
+    </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' }
+];
+// Installment Modal
+function openInstallmentModal(ref, desc, region, pending) {
+    document.getElementById('installmentModal').classList.add('modal-open');
+    document.getElementById('instDetailsRow').innerHTML = `
+        <div class="inst-detail-group"><div class="inst-detail-heading">Entry No</div><div class="inst-detail-val">${ref}</div></div>
+        <div class="inst-detail-group"><div class="inst-detail-heading">Description</div><div class="inst-detail-val">${desc}</div></div>
+        <div class="inst-detail-group"><div class="inst-detail-heading">Region</div><div class="inst-detail-val">${region}</div></div>
+        <div class="inst-detail-group"><div class="inst-detail-heading">Pending Balance</div><div class="inst-detail-val inst-detail-pending">₹${pending.toLocaleString()}</div></div>
+    `;
+    document.getElementById('maxPending').innerText = `₹${pending.toLocaleString()}`;
+    let instHtml = `<div class="modal-hist-box"><div style="margin-bottom:3px;"><b>Current Installments (${installmentHistory.length})</b></div>`;
+    installmentHistory.forEach((inst, idx) => {
+        instHtml += `<div>
+            <span style="color:#2268c0;text-decoration:underline;font-weight:600;">
+                ${idx ? 'Installment ' + (idx+1) : 'Original Entry'}
+            </span>
+            <span style="margin-left:10px;">${inst.date}</span>
+            <span style="margin-left:10px;">${inst.desc}</span>
+            <span style="margin-left:12px;" class="inst-badge inst-badge-dispatched">${inst.status}</span>
+            <span style="margin-left:13px;" class="inst-green"><b>₹${inst.amt.toLocaleString()}</b></span>
+        </div>`;
+    });
+    instHtml += `<div style="margin-top:9px;">
+            <span class="inst-num">${installmentHistory.length}</span> <span>Total Installments</span>&nbsp; 
+            <span class="inst-green inst-num">₹2,000</span>&nbsp; <span>Total Processed</span>&nbsp; 
+            <span class="inst-blue inst-num">₹8,000</span>&nbsp; <span>Remaining Balance</span>&nbsp;
+            <span class="inst-purple inst-num">₹10,000</span>&nbsp;<span>Original Amount</span>
+        </div>
+    </div>`;
+    document.getElementById('installmentHistory').innerHTML = instHtml;
+}
+function closeInstallmentModal() {
+    document.getElementById('installmentModal').classList.remove('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)
+const toggleBtn = document.getElementById('toggleConsolidatedBtn');
+const consolOrdersList = document.getElementById('consolidateOrdersList');
+const toggleText = document.getElementById('toggleConsolidatedText');
+toggleBtn.onclick = function(){
+ if(consolOrdersList.style.display === "none"){ 
+   consolOrdersList.style.display="block"; toggleText.textContent="Hide Orders"; toggleBtn.classList.add('active');
+ } else { 
+   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();
+    const desc = this.desc.value || 'Electronic Cams';
+    const region = this.region.value || 'China';
+    const amount = this.amount.value || '0';
+    const date = this.entrydate.value || '2024-07-19';
+    const entryNo = 'PAY-2024-' + Math.floor(100 + Math.random() * 900);
+    document.querySelector('#main-payment-table tbody').insertAdjacentHTML('beforeend', `
+        <tr>
+            <td>${entryNo}</td>
+            <td>${date}</td>
+            <td>${desc}</td>
+            <td>1</td>
+            <td>${region}</td>
+            <td><input type="checkbox" class="toggle-switch-btn"></td>
+            <td>₹${amount}</td>
+            <td><span class="status-badge status-unpaid">Unpaid</span></td>
+        </tr>
+    `);
+    document.querySelector('#main-order-table tbody').insertAdjacentHTML('beforeend', `
+        <tr>
+            <td><a href="#" class="entry-link">${entryNo}</a></td>
+            <td>${date}</td>
+            <td>${desc}</td>
+            <td>${region}</td>
+            <td>₹${amount}</td>
+            <td><span class="status-badge status-loading">Loading</span></td>
+            <td><span class="status-badge pending-badge-green">Completed</span></td>
+            <td>
+                <button class="plus-btn" title="Add" onclick="openInstallmentModal('${entryNo}', '${desc}', '${region}', 0)">
+                    <span style="font-size:21px;">+</span>
+                </button>
+            </td>
+        </tr>
+    `);
+    document.getElementById('orderModal').classList.remove('modal-open');
+    this.reset();
+});
+</script>
 @endsection

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

@@ -1,78 +1,176 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
+  <meta charset="UTF-8" />
   <title>Admin Panel</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
-
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />
   <style>
     body {
-      display: flex;
-      background-color: #f8f9fa;
+      margin: 0;
       min-height: 100vh;
+      background: #f3f8ff;
+      font-family: 'Inter', Arial, sans-serif;
+      display: flex;
+      flex-direction: row;
     }
+
+    /* ✨ Sidebar Glass + Animated Highlight Effect */
     .sidebar {
-      width: 250px;
-      background: #ffffff;
-      border-right: 1px solid #dee2e6;
+      width: 190px;
+      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);
+      backdrop-filter: blur(8px);
+      border-right: 1px solid rgba(180, 200, 255, 0.3);
+      z-index: 200;
+      padding-top: 8px;
       flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      transition: all 0.3s ease-in-out;
     }
+
     .sidebar .logo {
       display: flex;
       align-items: center;
-      padding: 15px;
-      border-bottom: 1px solid #dee2e6;
+      justify-content: flex-start;
+      padding: 6px 0 6px 10px;
+      margin-bottom: 10px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     }
+
     .sidebar .logo img {
-      height: 40px;
-      margin-right: 10px;
+      height: 30px;
+      width: auto;
+      margin-right: 6px;
     }
+
+    .sidebar .word {
+      color: #800000; font-size: 13px; line-height: 1.24;
+    }
+
+    /* 🔥 Sidebar Links */
     .sidebar a {
       display: flex;
       align-items: center;
-      color: #333;
+      color: #2b5cb6 !important;
       text-decoration: none;
-      padding: 10px 20px;
-      border-radius: 8px;
-      margin: 4px 10px;
-      transition: 0.2s;
+      padding: 10px 12px;
+      font-size: 0.97rem;
+      border-radius: 12px;
+      margin: 6px 6px 0 6px;
+      font-weight: 500;
+      position: relative;
+      overflow: hidden;
+      transition: all 0.25s ease;
+      z-index: 0;
     }
-    .sidebar a:hover, .sidebar a.active {
-      background: #e7f1ff;
-      color: #0d6efd;
+
+    /* Background Animation */
+    .sidebar a::before {
+      content: "";
+      position: absolute;
+      left: -100%;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, #a8c0ff, #3f2b96);
+      opacity: 0;
+      transition: all 0.4s ease;
+      border-radius: 12px;
+      z-index: -1;
     }
+
+    .sidebar a:hover::before {
+      left: 0;
+      opacity: 0.12;
+    }
+
+    .sidebar a:hover {
+      transform: translateX(6px);
+      color: #1258e0 !important;
+    }
+
+    /* Icon bounce effect */
     .sidebar a i {
-      margin-right: 10px;
+      margin-right: 8px;
       font-size: 1.1rem;
+      transition: transform 0.2s, color 0.2s;
     }
+
+    .sidebar a:hover i {
+      transform: scale(1.1);
+      color: #1258e0 !important;
+    }
+
+    /* Active link glow effect */
+    .sidebar a.active {
+      background: linear-gradient(90deg, rgba(80,120,255,0.15), rgba(120,180,255,0.2));
+      color: #1258e0 !important;
+      font-weight: 600;
+      box-shadow: 0 0 8px rgba(80,120,255,0.15);
+      border: 1px solid rgba(160, 190, 255, 0.4);
+      transform: scale(1.03);
+    }
+
+    .sidebar a.active::before {
+      left: 0;
+      opacity: 0.2;
+    }
+
+    /* Logout Button */
+    .sidebar form button {
+      border-radius: 12px;
+      margin-top: 12px;
+      font-weight: 500;
+      transition: 0.3s ease;
+    }
+
+    .sidebar form button:hover {
+      box-shadow: 0 3px 10px rgba(255, 0, 0, 0.3);
+      transform: scale(1.03);
+    }
+
+    /* 🧭 Main Content */
+    .main-content {
+      flex-grow: 1;
+      min-height: 100vh;
+      background: #f3f8ff;
+      display: flex;
+      flex-direction: column;
+      width: calc(100vw - 190px);
+    }
+
     header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: #ffffff;
-      padding: 10px 25px;
-      border-bottom: 1px solid #dee2e6;
-    }
-    .main-content {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
+      background: #fff;
+      padding: 10px 18px !important;
+      position: relative;
+      height: 48px;
+      width: 100%;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     }
+
     .content-wrapper {
-      padding: 25px;
+      padding: 18px 16px 0 16px;
+      flex-grow: 1;
+      overflow-y: auto;
+    }
+
+    .dropdown-user-profile-name {
+      font-size: 1.06rem;
+      font-weight: 500;
     }
   </style>
 </head>
 <body>
-  <!-- Sidebar -->
   <div class="sidebar">
     <div class="logo">
-      <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/Kent_Ro_Systems_logo.png" alt="Logo">
-      <div>
-        <strong>KENT</strong><br>
-        <small>International Pvt. Ltd.</small>
-      </div>
+      <img src="{{ asset('images/kent_logo2.png') }}" alt="Kent Logo">
+      <div class="word"><strong>KENT</strong><br /><small>International Pvt. Ltd.</small></div>
     </div>
 
     <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><i class="bi bi-house"></i> Dashboard</a>
@@ -88,7 +186,7 @@
     <a href="{{ route('admin.requests') }}" class="{{ request()->routeIs('admin.requests') ? 'active' : '' }}"><i class="bi bi-envelope"></i> Requests</a>
     <a href="{{ route('admin.staff') }}" class="{{ request()->routeIs('admin.staff') ? 'active' : '' }}"><i class="bi bi-person-badge"></i> Staff</a>
     <a href="{{ route('admin.account') }}" class="{{ request()->routeIs('admin.account') ? 'active' : '' }}"><i class="bi bi-gear"></i> Account</a>
-    <a href="{{ route('admin.marklist.index') }}" class="{{ request()->routeIs('admin.marklist.index') ? 'active' : '' }}"><i class="bi bi-gear"></i> mark_list</a>
+    <a href="{{ route('admin.marklist.index') }}" class="{{ request()->routeIs('admin.marklist.index') ? 'active' : '' }}"><i class="bi bi-list-check"></i> Mark List</a>
 
     <form method="POST" action="{{ route('admin.logout') }}" class="mt-4 px-3">
       @csrf
@@ -96,9 +194,7 @@
     </form>
   </div>
 
-  <!-- Main Content -->
   <div class="main-content">
-    <!-- Header -->
     <header>
       <h5>@yield('page-title')</h5>
       <div class="d-flex align-items-center gap-3">
@@ -108,22 +204,21 @@
         <div class="dropdown">
           <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" data-bs-toggle="dropdown">
             <img src="https://i.pravatar.cc/40" class="rounded-circle me-2" width="35" height="35">
-            <span>{{ Auth::guard('admin')->user()->name }}</span>
+            <span class="dropdown-user-profile-name">{{ Auth::guard('admin')->user()->name ?? 'User' }}</span>
           </a>
           <ul class="dropdown-menu dropdown-menu-end">
-            <li><a class="dropdown-item" href="{{ route('admin.account') }}">My Account</a></li>
+            <li><a class="dropdown-item" href="{{ route('admin.profile') }}"><i class="bi bi-person-circle me-2"></i>Profile</a></li>
             <li><hr class="dropdown-divider"></li>
             <li>
               <form method="POST" action="{{ route('admin.logout') }}">
                 @csrf
-                <button class="dropdown-item" type="submit">Logout</button>
+                <button class="dropdown-item" type="submit"><i class="bi bi-box-arrow-right me-2"></i>Logout</button>
               </form>
             </li>
           </ul>
         </div>
       </div>
     </header>
-
     <div class="content-wrapper">
       @yield('content')
     </div>

resources/views/admin/mark_list.blade.php

@@ -3,58 +3,255 @@
 @section('page-title', 'Mark List')
 
 @section('content')
-<div class="card shadow-sm">
+<div class="card shadow-sm rounded-4 border-0 animate-card">
   <div class="card-body">
-    <h4 class="mb-3">Mark List Management</h4>
+    <h4 class="mb-3 fw-bold text-dark">Mark List Management</h4>
+
+    <style>
+      /* ✨ Attractive Interactive Design without color change */
+      .animate-card {
+        animation: fadeInUp 0.8s ease;
+      }
+
+      @keyframes fadeInUp {
+        0% {
+          transform: translateY(20px);
+          opacity: 0;
+        }
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
+      .thead-orange th {
+        background-color: #fde4b3 !important;
+        font-weight: 600;
+        text-align: left;
+        padding: 10px 14px !important;
+        border-bottom: 2px solid #f3d38b;
+        color: #222;
+        vertical-align: middle;
+        transition: all 0.3s ease-in-out;
+      }
+
+      .thead-orange th:hover {
+        background-color: #ffe6a8 !important;
+        transform: translateY(-2px);
+      }
+
+      .card {
+        border-radius: 1rem;
+        overflow: hidden;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.3s ease;
+      }
+
+      .card:hover {
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
+        transform: scale(1.01);
+      }
+
+      .table {
+        background: #fff;
+        border-radius: 1rem;
+        overflow: hidden;
+        font-size: 0.95rem;
+      }
+
+      .table-hover tbody tr {
+        transition: all 0.25s ease;
+      }
+
+      .table-hover tbody tr:hover {
+        background-color: #fff9e6 !important;
+        cursor: pointer;
+        transform: scale(1.005);
+      }
+
+      .table-bordered td, .table-bordered th {
+        border: 1px solid #eaeaea !important;
+      }
+
+      .table tbody td {
+        padding: 12px 18px !important;
+        color: #414a58;
+        vertical-align: middle;
+        transition: all 0.2s ease;
+      }
+
+      .badge {
+        padding: 7px 16px;
+        border-radius: 20px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        user-select: none;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+      }
+
+      .bg-success {
+        background-color: #28a745 !important;
+        color: #fff !important;
+        box-shadow: 0 0 10px #6ee86e77;
+        animation: pulseGreen 2s infinite;
+      }
+
+      @keyframes pulseGreen {
+        0% { box-shadow: 0 0 8px #6ee86e77; }
+        50% { box-shadow: 0 0 14px #5dd75d88; }
+        100% { box-shadow: 0 0 8px #6ee86e77; }
+      }
+
+      .bg-danger {
+        background-color: #dc3545 !important;
+        color: #fff !important;
+        box-shadow: 0 0 10px #f97f7f77;
+        animation: pulseRed 2s infinite;
+      }
+
+      @keyframes pulseRed {
+        0% { box-shadow: 0 0 8px #f97f7f77; }
+        50% { box-shadow: 0 0 14px #ff868677; }
+        100% { box-shadow: 0 0 8px #f97f7f77; }
+      }
+
+      .btn-action {
+        background-color: #ffd283;
+        border: none;
+        color: #1b1c21;
+        padding: 7px 20px;
+        font-size: 0.95rem;
+        border-radius: 8px;
+        font-weight: 700;
+        transition: all 0.25s ease;
+        margin: 3px;
+        cursor: pointer;
+        box-shadow: 0 2px 6px rgba(141, 106, 0, 0.1);
+        display: inline-block;
+      }
+
+      .btn-action:hover {
+        background-color: #ffc85a;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 10px rgba(141, 106, 0, 0.25);
+      }
+
+      .text-muted {
+        color: #888 !important;
+        font-style: italic;
+      }
+
+      .search-container {
+        position: relative;
+        max-width: 380px;
+        margin-bottom: 28px;
+      }
+
+      .search-container input {
+        width: 100%;
+        padding: 10px 14px 10px 40px;
+        border-radius: 99px;
+        border: 1.8px solid #d8d2bb;
+        font-size: 1rem;
+        box-shadow: 0 2px 7px #d2cabf96 inset;
+        transition: all 0.25s ease;
+      }
+
+      .search-container input:focus {
+        border-color: #7d6a05;
+        outline: none;
+        box-shadow: 0 0 11px #b4a024dd inset;
+        transform: scale(1.02);
+      }
+
+      .search-icon {
+        position: absolute;
+        left: 14px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 21px;
+        color: #a09c82;
+        pointer-events: none;
+      }
+
+      /* subtle fade for search input */
+      @keyframes fadeGlow {
+        from { box-shadow: 0 0 0px #b4a02455 inset; }
+        to { box-shadow: 0 0 10px #b4a024aa inset; }
+      }
+    </style>
 
     @if(session('success'))
-      <div class="alert alert-success">{{ session('success') }}</div>
+      <div class="alert alert-success rounded-3 shadow-sm">{{ session('success') }}</div>
     @endif
 
-    <table class="table table-bordered table-hover align-middle">
-      <thead class="table-dark">
+    <div class="search-container">
+      <input type="text" id="globalSearch" placeholder="Search in all fields..." />
+      <span class="search-icon">🔍</span>
+    </div>
+
+    <div class="table-responsive">
+      <table class="table table-bordered table-hover align-middle" id="markListTable">
+        <thead class="thead-orange">
           <tr>
             <th>#</th>
-          <th>Mark No</th>
+            <th>Mark No/Item No</th>
             <th>Origin</th>
             <th>Destination</th>
             <th>Customer Name</th>
-          <th>Mobile</th>
+            <th>Customer Id</th>
+            <th>Customer No</th>
             <th>Date</th>
             <th>Status</th>
             <th>Action</th>
           </tr>
         </thead>
         <tbody>
-        @forelse($markList as $index => $mark)
+          @foreach($markList as $mark)
           <tr>
             <td>{{ $mark->id }}</td>
             <td>{{ $mark->mark_no }}</td>
             <td>{{ $mark->origin }}</td>
             <td>{{ $mark->destination }}</td>
             <td>{{ $mark->customer_name }}</td>
+            <td>{{ $mark->customer_id }}</td>
             <td>{{ $mark->mobile_no }}</td>
             <td>{{ \Carbon\Carbon::parse($mark->date)->format('d-m-Y') }}</td>
             <td>
               @if($mark->status == 'active')
                 <span class="badge bg-success">Active</span>
               @else
-                <span class="badge bg-danger">Inactive</span>
+                <span class="badge bg-danger">In-Active</span>
               @endif
             </td>
             <td>
-              <a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn btn-sm btn-primary">
-                {{ $mark->status == 'active' ? 'Deactivate' : 'Activate' }}
-              </a>
+              @if($mark->status == 'active')
+                <a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn-action">Deactivate</a>
+              @else
+                <a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn-action">Activate</a>
+              @endif
             </td>
           </tr>
-        @empty
-          <tr>
-            <td colspan="9" class="text-center text-muted">No mark numbers found.</td>
-          </tr>
-        @endforelse
+          @endforeach
         </tbody>
       </table>
+
+      @if($markList->isEmpty())
+        <div class="py-4 text-center text-muted fst-italic">No mark numbers found.</div>
+      @endif
+    </div>
+
+    <script>
+      document.getElementById('globalSearch').addEventListener('input', function () {
+        const filter = this.value.toLowerCase();
+        const rows = document.querySelectorAll('#markListTable tbody tr');
+
+        rows.forEach(row => {
+          const text = row.textContent.toLowerCase();
+          row.style.display = text.includes(filter) ? '' : 'none';
+        });
+      });
+    </script>
   </div>
 </div>
 @endsection

resources/views/admin/profile.blade.php

@@ -0,0 +1,257 @@
+@extends('admin.layouts.app')
+
+@section('page-title', 'Profile')
+
+@section('content')
+<div class="container-fluid px-0 bg-transparent">
+  <style>
+    body {
+      background: linear-gradient(135deg, #f2f6ff, #fefefe);
+      font-family: "Poppins", sans-serif;
+    }
+
+    /* PROFILE HEADER */
+    .profile-header {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      gap: 1rem;
+      padding: 36px 32px;
+      background: linear-gradient(120deg, #4e73df 68%, #1cc88a 100%);
+      border-radius: 20px;
+      color: white;
+      box-shadow: 0 8px 28px rgba(24,40,90,0.09);
+      margin-bottom: 34px;
+      position: relative;
+      min-height: 140px;
+    }
+    .profile-header::after {
+      content: "";
+      position: absolute;
+      top: -58px;
+      right: -85px;
+      width: 210px;
+      height: 210px;
+      background: rgba(255,255,255,0.14);
+      border-radius: 50%;
+    }
+    .avatar {
+      width: 98px;
+      height: 98px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 4px solid rgba(255,255,255,0.7);
+      box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+      background: #fff;
+      z-index: 1;
+    }
+    .main-info {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      z-index: 1;
+      flex: 1;
+    }
+    .main-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 25px;
+    }
+    .field-group {
+      min-width: 210px;
+    }
+    .label {
+      font-size: 0.9rem;
+      color: #dbe7f4;
+      font-weight: 500;
+    }
+    .value {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #fff;
+      background: rgba(255,255,255,0.13);
+      border-radius: 8px;
+      padding: 6px 12px;
+      border: 1.5px solid rgba(255,255,255,0.18);
+      transition: background 0.13s;
+    }
+    .value:hover { background: rgba(255,255,255,0.22); }
+
+    /* STATS + CARDS COMMON */
+    .profile-stats-row, .profile-grid-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 18px;
+      margin-bottom: 20px;
+    }
+    .stat-card, .profile-card {
+      background: #fff;
+      border-radius: 14px;
+      box-shadow: 0 3px 18px rgba(60,80,120,0.08);
+      padding: 20px;
+      transition: all 0.3s ease;
+      position: relative;
+      flex: 1 1 200px;
+    }
+    .stat-card:hover, .profile-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 6px 25px rgba(50,70,120,0.18);
+    }
+
+    /* STATS */
+    .stat-card::before {
+      content: "";
+      position: absolute;
+      top: -20px;
+      right: -20px;
+      width: 90px;
+      height: 90px;
+      background: linear-gradient(135deg, #c4d7ff, #e9f0ff);
+      border-radius: 50%;
+      opacity: 0.25;
+    }
+    .stat-label {
+      font-size: 0.9rem;
+      color: #8b96ad;
+      font-weight: 500;
+    }
+    .stat-value {
+      font-size: 1.6rem;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      color: #1b2330;
+    }
+    .stat-footer { font-size: 0.9rem; }
+    .positive { color: #23a25d; }
+    .negative { color: #e54141; }
+    .neutral { color: #9a9ea8; }
+
+    /* PROFILE CARDS */
+    .profile-card h6 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 12px;
+      color: #1b2330;
+      border-left: 4px solid #3767f4;
+      padding-left: 8px;
+    }
+    .activity-list, .quick-action-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .activity-list li, .quick-action-list li {
+      padding: 9px 2px;
+      font-size: 1rem;
+      border-bottom: 1px solid #f2f4f8;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: 0.2s ease;
+    }
+    .activity-list li:hover { background: #f7faff; border-radius: 6px; }
+    .quick-action-list li a {
+      text-decoration: none;
+      color: #2563eb;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: 0.2s ease;
+    }
+    .quick-action-list li a:hover { color: #1e40af; transform: translateX(4px); }
+
+    @media (max-width: 1000px) {
+      .profile-header, .profile-stats-row, .profile-grid-row {
+        flex-direction: column;
+        text-align: center;
+      }
+      .avatar { margin: 0 auto 15px; }
+      .main-row { justify-content: center; }
+    }
+  </style>
+
+  <!-- PROFILE HEADER -->
+  <div class="profile-header">
+    <img src="https://i.pravatar.cc/100" class="avatar" alt="Avatar" />
+    <div class="main-info">
+      <div class="main-row">
+        <div class="field-group">
+          <div class="label">Name</div>
+          <div class="value">John Doe</div>
+        </div>
+        <div class="field-group">
+          <div class="label">Email</div>
+          <div class="value">john@example.com</div>
+        </div>
+        <div class="field-group">
+          <div class="label">Mobile No</div>
+          <div class="value">+91 12345 54321</div>
+        </div>
+      </div>
+      <div class="main-row">
+        <div class="field-group">
+          <div class="label">Company Name</div>
+          <div class="value">XYZ Infotech</div>
+        </div>
+        <div class="field-group" style="min-width:260px;">
+          <div class="label">Company Address</div>
+          <div class="value">XYZ Infotech, East Andheri, Mumbai 400 001</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- STATS ROW -->
+  <div class="profile-stats-row">
+    <div class="stat-card">
+      <span class="stat-label">Total Shipment</span>
+      <span class="stat-value">📦 1,250</span>
+      <div class="stat-footer positive">+12% vs last month</div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-label">In Transit</span>
+      <span class="stat-value" style="color:#2563eb;">🚚 320</span>
+      <div class="stat-footer neutral">65% of capacity</div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-label">At Customs</span>
+      <span class="stat-value" style="color:#f59e0b;">🛄 85</span>
+      <div class="stat-footer neutral">Avg 2.3 days processing</div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-label">Delayed</span>
+      <span class="stat-value" style="color:#e11d48;">⏰ 55</span>
+      <div class="stat-footer negative">-8% vs last month</div>
+    </div>
+    <div class="stat-card">
+      <span class="stat-label">Delivered</span>
+      <span class="stat-value" style="color:#22c55e;">✅ 780</span>
+      <div class="stat-footer positive">98.2% success rate</div>
+    </div>
+  </div>
+
+  <!-- BOTTOM CARDS -->
+  <div class="profile-grid-row">
+    <div class="profile-card">
+      <h6>Recent Activity</h6>
+      <ul class="activity-list">
+        <li>📦 Shipment #SH-2024-001 delivered <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">5 min ago</span></li>
+        <li>📝 New shipment #SH-2024-002 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">13 min ago</span></li>
+        <li>⏰ Delay for #SH-2024-003 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">1 hr ago</span></li>
+      </ul>
+    </div>
+    <div class="profile-card">
+      <h6>Quick Actions</h6>
+      <ul class="quick-action-list">
+        <li><a href="#">➕ Create Shipment</a></li>
+        <li><a href="#">🔍 Track Package</a></li>
+        <li><a href="#">👥 Add Customer</a></li>
+        <li><a href="#">📊 View Reports</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+@endsection

resources/views/admin/requests.blade.php

@@ -3,21 +3,172 @@
 @section('page-title', 'User Requests')
 
 @section('content')
-<div class="card shadow-sm">
-    <div class="card-header bg-primary text-white">
-        <h5 class="mb-0">Pending User Requests</h5>
-    </div>
-    <div class="card-body">
-        @if(session('success'))
-            <div class="alert alert-success">{{ session('success') }}</div>
-        @elseif(session('error'))
-            <div class="alert alert-danger">{{ session('error') }}</div>
-        @elseif(session('info'))
-            <div class="alert alert-info">{{ session('info') }}</div>
-        @endif
+<div class="container-fluid px-0">
 
-        <table class="table table-bordered table-striped">
-            <thead>
+    <style>
+      /* 🌟 Smooth fade-in animation */
+      @keyframes fadeInUp {
+          0% {
+              transform: translateY(20px);
+              opacity: 0;
+          }
+          100% {
+              transform: translateY(0);
+              opacity: 1;
+          }
+      }
+
+      /* ✨ Container animation */
+      .card, .custom-table-wrapper {
+          animation: fadeInUp 0.8s ease both;
+      }
+
+      /* 🪄 Table hover effect */
+      .custom-table tbody tr {
+          transition: all 0.25s ease-in-out;
+      }
+      .custom-table tbody tr:hover {
+          background-color: #fffbea;
+          transform: scale(1.01);
+          box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+      }
+
+      /* 🎯 Priority Badges */
+      .priority-badge {
+          display: inline-flex;
+          align-items: center;
+          font-size: 13.5px;
+          padding: 4px 16px 4px 11px;
+          border-radius: 12px;
+          font-weight: 500;
+          gap: 6px;
+          box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15);
+          min-width: 76px;
+          min-height: 28px;
+          justify-content: center;
+          color: #fff;
+          margin: 2px 0;
+          transition: transform 0.2s ease-in-out;
+      }
+      .priority-badge:hover {
+          transform: scale(1.08);
+      }
+      .priority-high { background: linear-gradient(135deg, #ff8a8a, #d12929); color: #fff; }
+      .priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); color: #fff; }
+      .priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); color: #fff; }
+
+      .priority-badge .icon {
+          margin-right: 5px;
+          font-size: 1.1em;
+          line-height: 1;
+          display:inline-block;
+          width: 17px;
+          text-align: center;
+      }
+
+      /* 🎨 Table Header (keep original bg-light color) */
+      .custom-table thead th {
+          text-align: center;
+          font-weight: 700;
+          color: #000;
+          padding: 14px;
+          font-size: 17px;
+          letter-spacing: 0.5px;
+          border-bottom: 2px solid #bfbfbf;
+          background-color: #fde4b3 /* Bootstrap bg-light */
+      }
+
+      /* 🟢 Rounded Corners for Header */
+      .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;
+      }
+
+      /* 🧾 Table bottom corners */
+      .custom-table tbody tr:last-child td:first-child {
+          border-bottom-left-radius: 12px;
+      }
+      .custom-table tbody tr:last-child td:last-child {
+          border-bottom-right-radius: 12px;
+      }
+
+      /* 💫 Search box styling */
+      .input-group input {
+          border-radius: 10px 0 0 10px;
+          border: 1px solid #ccc;
+          box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+      }
+      .input-group .btn {
+          border-radius: 0 10px 10px 0;
+          transition: all 0.2s ease-in-out;
+      }
+      .input-group .btn:hover {
+          background: #ffd65a;
+          border-color: #ffd65a;
+          color: #000;
+      }
+
+      /* 🎨 Card Style */
+      .card {
+          border-radius: 16px;
+          border: none;
+          box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+          background: #fff;
+      }
+
+      /* ⚡ Status Badges */
+      .badge {
+          font-size: 13px;
+          padding: 7px 12px;
+          border-radius: 10px;
+      }
+
+      /* ✨ Heading style */
+      h4.fw-bold {
+          background: linear-gradient(90deg, #000000ff 0%, #030302ff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-weight: 800;
+          letter-spacing: 1px;
+      }
+
+      /* ✅ Center align for last column */
+      .custom-table tbody td:last-child {
+          text-align: center !important;
+          vertical-align: middle !important;
+      }
+    </style>
+
+    <!-- Heading and status badges row -->
+    <div class="d-flex justify-content-between align-items-center mb-2 mt-3">
+        <h4 class="fw-bold mb-0">User Requests</h4>
+        <div>
+            <span class="badge rounded-pill bg-primary me-1">
+                {{ $requests->where('status', 'pending')->count() }} Pending
+            </span>
+            <span class="badge rounded-pill bg-success me-1">
+                {{ $requests->where('status', 'approved')->count() }} Approved
+            </span>
+            <span class="badge rounded-pill bg-danger">
+                {{ $requests->where('status', 'rejected')->count() }} Rejected
+            </span>
+        </div>
+    </div>
+
+    <div class="card mb-4 shadow-sm">
+        <div class="card-body pb-1">
+            <form method="GET" action="">
+                <div class="input-group mb-2">
+                    <input type="text" name="search" value="{{ old('search', request('search')) }}" class="form-control" placeholder="Search Request by name, email, Company or Request ID">
+                    <button class="btn btn-outline-primary" type="submit"><i class="bi bi-search"></i></button>
+                </div>
+            </form>
+
+            <div class="table-responsive custom-table-wrapper">
+                <table class="table align-middle mb-0 custom-table">
+                    <thead class="bg-light">
                         <tr>
                             <th>#</th>
                             <th>Request ID</th>
@@ -33,16 +184,26 @@
                         </tr>
                     </thead>
                     <tbody>
-                @forelse($requests as $req)
+                        @foreach($requests as $index => $req)
                             <tr>
-                        <td>{{ $req->id }}</td>
+                                <td>{{ $requests->count() - $index }}</td>
                                 <td>{{ $req->request_id }}</td>
                                 <td>{{ $req->customer_name }}</td>
                                 <td>{{ $req->company_name }}</td>
                                 <td>{{ $req->email }}</td>
                                 <td>{{ $req->mobile_no }}</td>
                                 <td>{{ $req->address }}</td>
-                        <td>{{ $req->priority }}</td>
+                                <td>
+                                    @if(strtolower($req->priority) == 'high')
+                                        <span class="priority-badge priority-high"><span class="icon">🔥</span>High</span>
+                                    @elseif(strtolower($req->priority) == 'medium')
+                                        <span class="priority-badge priority-medium"><span class="icon">⚡</span>Medium</span>
+                                    @elseif(strtolower($req->priority) == 'low')
+                                        <span class="priority-badge priority-low"><span class="icon">🟢</span>Low</span>
+                                    @else
+                                        {{ $req->priority }}
+                                    @endif
+                                </td>
                                 <td>{{ $req->date }}</td>
                                 <td>
                                     @if($req->status == 'approved')
@@ -53,24 +214,16 @@
                                         <span class="badge bg-warning text-dark">Pending</span>
                                     @endif
                                 </td>
-                        <td>
-                            @if($req->status == 'pending' || $req->status == null)
-                                <a href="{{ route('admin.requests.approve', $req->id) }}" 
-                                   class="btn btn-success btn-sm">Approve</a>
-                                <a href="{{ route('admin.requests.reject', $req->id) }}" 
-                                   class="btn btn-danger btn-sm">Reject</a>
-                            @else
-                                <em>N/A</em>
-                            @endif
-                        </td>
+                                <td>N/A</td>
                             </tr>
-                @empty
-                    <tr>
-                        <td colspan="8" class="text-center">No requests found</td>
-                    </tr>
-                @endforelse
+                        @endforeach
                     </tbody>
                 </table>
+                @if($requests->isEmpty())
+                    <div class="py-4 text-center text-muted">No records found.</div>
+                @endif
+            </div>
+        </div>
     </div>
 </div>
 @endsection

routes/web.php

@@ -37,6 +37,8 @@ Route::prefix('admin')->middleware('auth:admin')->group(function () {
     Route::get('/orders', fn() => view('admin.orders'))->name('admin.orders');
     Route::get('/staff', fn() => view('admin.staff'))->name('admin.staff');
     Route::get('/account', fn() => view('admin.account'))->name('admin.account');
+    Route::get('/profile', fn() => view('admin.profile'))->name('admin.profile');
+
     
 
     // ✅ User Requests Controller Routes