my updates
This commit is contained in:
Utkarsh Khedkar
BIN
public/images/kent_logo2.png
Normal file
BIN
public/images/kent_logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -1,12 +1,587 @@
|
|||||||
@extends('admin.layouts.app')
|
@extends('admin.layouts.app')
|
||||||
|
|
||||||
@section('page-title', 'account')
|
@section('page-title', 'Account Dashboard')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card shadow-sm">
|
<style>
|
||||||
<div class="card-body">
|
body { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #eef2f7, #f9fbff); margin:0; padding:0;}
|
||||||
<h4>Welcome to the Admin account</h4>
|
.account-container { padding: 30px 40px; }
|
||||||
<p>Here you can manage all system modules.</p>
|
.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>
|
</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>
|
||||||
|
<span class="inst-green inst-num">₹2,000</span> <span>Total Processed</span>
|
||||||
|
<span class="inst-blue inst-num">₹8,000</span> <span>Remaining Balance</span>
|
||||||
|
<span class="inst-purple inst-num">₹10,000</span> <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
|
@endsection
|
||||||
|
|||||||
@@ -1,78 +1,176 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<title>Admin Panel</title>
|
<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@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-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
display: flex;
|
margin: 0;
|
||||||
background-color: #f8f9fa;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
background: #f3f8ff;
|
||||||
|
font-family: 'Inter', Arial, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ✨ Sidebar Glass + Animated Highlight Effect */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 250px;
|
width: 190px;
|
||||||
background: #ffffff;
|
height: 100vh;
|
||||||
border-right: 1px solid #dee2e6;
|
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;
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .logo {
|
.sidebar .logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 15px;
|
justify-content: flex-start;
|
||||||
border-bottom: 1px solid #dee2e6;
|
padding: 6px 0 6px 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .logo img {
|
.sidebar .logo img {
|
||||||
height: 40px;
|
height: 30px;
|
||||||
margin-right: 10px;
|
width: auto;
|
||||||
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar .word {
|
||||||
|
color: #800000; font-size: 13px; line-height: 1.24;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 🔥 Sidebar Links */
|
||||||
.sidebar a {
|
.sidebar a {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #333;
|
color: #2b5cb6 !important;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 10px 20px;
|
padding: 10px 12px;
|
||||||
border-radius: 8px;
|
font-size: 0.97rem;
|
||||||
margin: 4px 10px;
|
border-radius: 12px;
|
||||||
transition: 0.2s;
|
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;
|
/* Background Animation */
|
||||||
color: #0d6efd;
|
.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 {
|
.sidebar a i {
|
||||||
margin-right: 10px;
|
margin-right: 8px;
|
||||||
font-size: 1.1rem;
|
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 {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #ffffff;
|
background: #fff;
|
||||||
padding: 10px 25px;
|
padding: 10px 18px !important;
|
||||||
border-bottom: 1px solid #dee2e6;
|
position: relative;
|
||||||
}
|
height: 48px;
|
||||||
.main-content {
|
width: 100%;
|
||||||
flex-grow: 1;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-wrapper {
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Sidebar -->
|
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/Kent_Ro_Systems_logo.png" alt="Logo">
|
<img src="{{ asset('images/kent_logo2.png') }}" alt="Kent Logo">
|
||||||
<div>
|
<div class="word"><strong>KENT</strong><br /><small>International Pvt. Ltd.</small></div>
|
||||||
<strong>KENT</strong><br>
|
|
||||||
<small>International Pvt. Ltd.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><i class="bi bi-house"></i> Dashboard</a>
|
<a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><i class="bi bi-house"></i> Dashboard</a>
|
||||||
@@ -85,7 +183,7 @@
|
|||||||
<a href="{{ route('admin.requests') }}" class="{{ request()->routeIs('admin.requests') ? 'active' : '' }}"><i class="bi bi-envelope"></i> Requests</a>
|
<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.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.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">
|
<form method="POST" action="{{ route('admin.logout') }}" class="mt-4 px-3">
|
||||||
@csrf
|
@csrf
|
||||||
@@ -93,9 +191,7 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<!-- Header -->
|
|
||||||
<header>
|
<header>
|
||||||
<h5>@yield('page-title')</h5>
|
<h5>@yield('page-title')</h5>
|
||||||
<div class="d-flex align-items-center gap-3">
|
<div class="d-flex align-items-center gap-3">
|
||||||
@@ -105,22 +201,21 @@
|
|||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" data-bs-toggle="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">
|
<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>
|
</a>
|
||||||
<ul class="dropdown-menu dropdown-menu-end">
|
<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><hr class="dropdown-divider"></li>
|
||||||
<li>
|
<li>
|
||||||
<form method="POST" action="{{ route('admin.logout') }}">
|
<form method="POST" action="{{ route('admin.logout') }}">
|
||||||
@csrf
|
@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>
|
</form>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
@yield('content')
|
@yield('content')
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,58 +3,255 @@
|
|||||||
@section('page-title', 'Mark List')
|
@section('page-title', 'Mark List')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm rounded-4 border-0 animate-card">
|
||||||
<div class="card-body">
|
<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'))
|
@if(session('success'))
|
||||||
<div class="alert alert-success">{{ session('success') }}</div>
|
<div class="alert alert-success rounded-3 shadow-sm">{{ session('success') }}</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<table class="table table-bordered table-hover align-middle">
|
<div class="search-container">
|
||||||
<thead class="table-dark">
|
<input type="text" id="globalSearch" placeholder="Search in all fields..." />
|
||||||
<tr>
|
<span class="search-icon">🔍</span>
|
||||||
<th>#</th>
|
</div>
|
||||||
<th>Mark No</th>
|
|
||||||
<th>Origin</th>
|
<div class="table-responsive">
|
||||||
<th>Destination</th>
|
<table class="table table-bordered table-hover align-middle" id="markListTable">
|
||||||
<th>Customer Name</th>
|
<thead class="thead-orange">
|
||||||
<th>Mobile</th>
|
<tr>
|
||||||
<th>Date</th>
|
<th>#</th>
|
||||||
<th>Status</th>
|
<th>Mark No/Item No</th>
|
||||||
<th>Action</th>
|
<th>Origin</th>
|
||||||
</tr>
|
<th>Destination</th>
|
||||||
</thead>
|
<th>Customer Name</th>
|
||||||
<tbody>
|
<th>Customer Id</th>
|
||||||
@forelse($markList as $index => $mark)
|
<th>Customer No</th>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@foreach($markList as $mark)
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ $mark->id }}</td>
|
<td>{{ $mark->id }}</td>
|
||||||
<td>{{ $mark->mark_no }}</td>
|
<td>{{ $mark->mark_no }}</td>
|
||||||
<td>{{ $mark->origin }}</td>
|
<td>{{ $mark->origin }}</td>
|
||||||
<td>{{ $mark->destination }}</td>
|
<td>{{ $mark->destination }}</td>
|
||||||
<td>{{ $mark->customer_name }}</td>
|
<td>{{ $mark->customer_name }}</td>
|
||||||
|
<td>{{ $mark->customer_id }}</td>
|
||||||
<td>{{ $mark->mobile_no }}</td>
|
<td>{{ $mark->mobile_no }}</td>
|
||||||
<td>{{ \Carbon\Carbon::parse($mark->date)->format('d-m-Y') }}</td>
|
<td>{{ \Carbon\Carbon::parse($mark->date)->format('d-m-Y') }}</td>
|
||||||
<td>
|
<td>
|
||||||
@if($mark->status == 'active')
|
@if($mark->status == 'active')
|
||||||
<span class="badge bg-success">Active</span>
|
<span class="badge bg-success">Active</span>
|
||||||
@else
|
@else
|
||||||
<span class="badge bg-danger">Inactive</span>
|
<span class="badge bg-danger">In-Active</span>
|
||||||
@endif
|
@endif
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn btn-sm btn-primary">
|
@if($mark->status == 'active')
|
||||||
{{ $mark->status == 'active' ? 'Deactivate' : 'Activate' }}
|
<a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn-action">Deactivate</a>
|
||||||
</a>
|
@else
|
||||||
|
<a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn-action">Activate</a>
|
||||||
|
@endif
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@empty
|
@endforeach
|
||||||
<tr>
|
</tbody>
|
||||||
<td colspan="9" class="text-center text-muted">No mark numbers found.</td>
|
</table>
|
||||||
</tr>
|
|
||||||
@endforelse
|
@if($markList->isEmpty())
|
||||||
</tbody>
|
<div class="py-4 text-center text-muted fst-italic">No mark numbers found.</div>
|
||||||
</table>
|
@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>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
257
resources/views/admin/profile.blade.php
Normal file
257
resources/views/admin/profile.blade.php
Normal file
@@ -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
|
||||||
@@ -3,74 +3,227 @@
|
|||||||
@section('page-title', 'User Requests')
|
@section('page-title', 'User Requests')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card shadow-sm">
|
<div class="container-fluid px-0">
|
||||||
<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
|
|
||||||
|
|
||||||
<table class="table table-bordered table-striped">
|
<style>
|
||||||
<thead>
|
/* 🌟 Smooth fade-in animation */
|
||||||
<tr>
|
@keyframes fadeInUp {
|
||||||
<th>#</th>
|
0% {
|
||||||
<th>Request ID</th>
|
transform: translateY(20px);
|
||||||
<th>Name</th>
|
opacity: 0;
|
||||||
<th>Company</th>
|
}
|
||||||
<th>Email</th>
|
100% {
|
||||||
<th>Mobile</th>
|
transform: translateY(0);
|
||||||
<th>Address</th>
|
opacity: 1;
|
||||||
<th>Priority</th>
|
}
|
||||||
<th>Date</th>
|
}
|
||||||
<th>Status</th>
|
|
||||||
<th>Actions</th>
|
/* ✨ Container animation */
|
||||||
</tr>
|
.card, .custom-table-wrapper {
|
||||||
</thead>
|
animation: fadeInUp 0.8s ease both;
|
||||||
<tbody>
|
}
|
||||||
@forelse($requests as $req)
|
|
||||||
<tr>
|
/* 🪄 Table hover effect */
|
||||||
<td>{{ $req->id }}</td>
|
.custom-table tbody tr {
|
||||||
<td>{{ $req->request_id }}</td>
|
transition: all 0.25s ease-in-out;
|
||||||
<td>{{ $req->customer_name }}</td>
|
}
|
||||||
<td>{{ $req->company_name }}</td>
|
.custom-table tbody tr:hover {
|
||||||
<td>{{ $req->email }}</td>
|
background-color: #fffbea;
|
||||||
<td>{{ $req->mobile_no }}</td>
|
transform: scale(1.01);
|
||||||
<td>{{ $req->address }}</td>
|
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||||
<td>{{ $req->priority }}</td>
|
}
|
||||||
<td>{{ $req->date }}</td>
|
|
||||||
<td>
|
/* 🎯 Priority Badges */
|
||||||
@if($req->status == 'approved')
|
.priority-badge {
|
||||||
<span class="badge bg-success">Approved</span>
|
display: inline-flex;
|
||||||
@elseif($req->status == 'rejected')
|
align-items: center;
|
||||||
<span class="badge bg-danger">Rejected</span>
|
font-size: 13.5px;
|
||||||
@else
|
padding: 4px 16px 4px 11px;
|
||||||
<span class="badge bg-warning text-dark">Pending</span>
|
border-radius: 12px;
|
||||||
@endif
|
font-weight: 500;
|
||||||
</td>
|
gap: 6px;
|
||||||
<td>
|
box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15);
|
||||||
@if($req->status == 'pending' || $req->status == null)
|
min-width: 76px;
|
||||||
<a href="{{ route('admin.requests.approve', $req->id) }}"
|
min-height: 28px;
|
||||||
class="btn btn-success btn-sm">Approve</a>
|
justify-content: center;
|
||||||
<a href="{{ route('admin.requests.reject', $req->id) }}"
|
color: #fff;
|
||||||
class="btn btn-danger btn-sm">Reject</a>
|
margin: 2px 0;
|
||||||
@else
|
transition: transform 0.2s ease-in-out;
|
||||||
<em>N/A</em>
|
}
|
||||||
@endif
|
.priority-badge:hover {
|
||||||
</td>
|
transform: scale(1.08);
|
||||||
</tr>
|
}
|
||||||
@empty
|
.priority-high { background: linear-gradient(135deg, #ff8a8a, #d12929); color: #fff; }
|
||||||
<tr>
|
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); color: #fff; }
|
||||||
<td colspan="8" class="text-center">No requests found</td>
|
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); color: #fff; }
|
||||||
</tr>
|
|
||||||
@endforelse
|
.priority-badge .icon {
|
||||||
</tbody>
|
margin-right: 5px;
|
||||||
</table>
|
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>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Company</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Mobile</th>
|
||||||
|
<th>Address</th>
|
||||||
|
<th>Priority</th>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@foreach($requests as $index => $req)
|
||||||
|
<tr>
|
||||||
|
<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>
|
||||||
|
@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')
|
||||||
|
<span class="badge bg-success">Approved</span>
|
||||||
|
@elseif($req->status == 'rejected')
|
||||||
|
<span class="badge bg-danger">Rejected</span>
|
||||||
|
@else
|
||||||
|
<span class="badge bg-warning text-dark">Pending</span>
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
<td>N/A</td>
|
||||||
|
</tr>
|
||||||
|
@endforeach
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
@if($requests->isEmpty())
|
||||||
|
<div class="py-4 text-center text-muted">No records found.</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -35,6 +35,8 @@ Route::prefix('admin')->middleware('auth:admin')->group(function () {
|
|||||||
Route::get('/orders', fn() => view('admin.orders'))->name('admin.orders');
|
Route::get('/orders', fn() => view('admin.orders'))->name('admin.orders');
|
||||||
Route::get('/staff', fn() => view('admin.staff'))->name('admin.staff');
|
Route::get('/staff', fn() => view('admin.staff'))->name('admin.staff');
|
||||||
Route::get('/account', fn() => view('admin.account'))->name('admin.account');
|
Route::get('/account', fn() => view('admin.account'))->name('admin.account');
|
||||||
|
Route::get('/profile', fn() => view('admin.profile'))->name('admin.profile');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ✅ User Requests Controller Routes
|
// ✅ User Requests Controller Routes
|
||||||
|
|||||||
Reference in New Issue
Block a user