kent-logistics/Kent-logistics-Laravel
SHA256
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Account Section UI Changes

Browse Source
This commit is contained in:
Utkarsh Khedkar
2025-11-27 19:39:36 +05:30
parent 04b00c9db8
commit 97db70c40e
14 changed files with 2876 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

509
resources/views/admin/requests.blade.php
View File

@@ -5,298 +5,325 @@
@section('content')
<div class="container-fluid px-0">
@php
$perPage = 5; // ✅ FORCED to show pagination even with few records
$currentPage = request()->get('page', 1);
$currentPage = max(1, (int)$currentPage);
$total = $requests->count();
$totalPages = ceil($total / $perPage);
$currentItems = $requests->slice(($currentPage - 1) * $perPage, $perPage);
@endphp
<style>
/* 🌟 Smooth fade-in animation */
@keyframes fadeInUp {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* [ALL YOUR ORIGINAL CSS HERE - SAME AS BEFORE] */
@keyframes fadeInUp {0% { transform: translateY(20px); opacity: 0; }100% { transform: translateY(0); opacity: 1; }}
.card, .custom-table-wrapper { animation: fadeInUp 0.8s ease both; }
.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-badge {
display: inline-flex; align-items: center; font-size: 13.5px; padding: 6px 16px; border-radius: 12px; font-weight: 600;
box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15); width: 90px; 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); }
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); }
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); }
.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;
}
.custom-table thead tr:first-child th:first-child { border-top-left-radius: 12px; }
.custom-table thead tr:first-child th:last-child { border-top-right-radius: 12px; }
.custom-table 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; }
.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 { border-radius: 16px; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.08); background: #fff; }
.badge {
font-size: 11px !important; font-weight: 600 !important; padding: 7px 13px !important; border-radius: 20px !important;
text-transform: uppercase; letter-spacing: 0.3px; display: inline-flex !important; align-items: center; justify-content: center;
color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); border: 2px solid transparent !important;
line-height: 1.2; gap: 6px; animation: pulse 2s infinite; width: 99px;
}
.status-icon { font-size: 0px; display: flex; align-items: center; justify-content: center; }
.badge.badge-pending { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #d97706 !important; border-color: #f59e0b !important; width: 85px; }
.badge.badge-approved { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #065f46 !important; border-color: #10b981 !important; width: 85px; }
.badge.badge-rejected { background: linear-gradient(135deg, #fecaca, #fca5a5) !important; color: #991b1b !important; border-color: #ef4444 !important; width: 85px; }
@keyframes pulse {0% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }50% { box-shadow: 0 0 14px rgba(0,0,0,0.15); }100% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }}
.count-badge { --bs-badge-padding-x: 0.65em; --bs-badge-padding-y: 0.35em; --bs-badge-font-size: 0.75em; --bs-badge-font-weight: 700; --bs-badge-color: #fff; --bs-badge-border-radius: var(--bs-border-radius); }
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; }
.custom-table tbody td:last-child { text-align: center !important; vertical-align: middle !important; }
/* ===== PAGINATION STYLES ===== */
.pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
padding: 12px 0;
border-top: 1px solid #eef3fb;
}
/* ✨ Container animation */
.card, .custom-table-wrapper {
animation: fadeInUp 0.8s ease both;
}
.pagination-info {
font-size: 13px;
color: #9ba5bb;
font-weight: 600;
}
/* 🪄 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);
}
.pagination-controls {
display: flex;
align-items: center;
gap: 8px;
}
/* 🎯 Priority Badges */
.priority-badge {
display: inline-flex;
align-items: center;
font-size: 13.5px;
padding: 6px 16px;
border-radius: 12px;
font-weight: 600;
box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15);
width: 90px;
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); }
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); }
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); }
.pagination-btn {
background: #fff;
border: 1px solid #e3eaf6;
color: #1a2951;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 32px;
}
/* 🎨 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 */
}
.pagination-btn:hover:not(:disabled) {
background: #1a2951;
color: white;
border-color: #1a2951;
}
/* 🟢 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;
}
.pagination-btn:disabled {
background: #f8fafc;
color: #cbd5e0;
border-color: #e2e8f0;
cursor: not-allowed;
opacity: 0.6;
}
/* 🧾 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;
}
.pagination-page-btn {
background: #fff;
border: 1px solid #e3eaf6;
color: #1a2951;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
min-width: 36px;
text-align: center;
text-decoration: none;
}
/* 💫 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;
}
.pagination-page-btn:hover {
background: #1a2951;
color: white;
border-color: #1a2951;
}
/* 🎨 Card Style */
.card {
border-radius: 16px;
border: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
background: #fff;
}
.pagination-page-btn.active {
background: #1a2951;
color: white;
border-color: #1a2951;
}
/* ⚡ Status Badges - NEW ATTRACTIVE STYLES */
.badge {
font-size: 11px !important;
font-weight: 600 !important;
padding: 7px 13px !important;
border-radius: 20px !important;
text-transform: uppercase;
letter-spacing: 0.3px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background-size: cover !important;
background-position: center !important;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
border: 2px solid transparent !important;
box-sizing: border-box;
line-height: 1.2;
gap: 6px;
animation: pulse 2s infinite;
width: 99px;
}
.pagination-pages {
display: flex;
gap: 4px;
align-items: center;
}
/* Status icons */
.status-icon {
font-size: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.pagination-ellipsis {
color: #9ba5bb;
font-size: 13px;
padding: 0 4px;
}
/* Custom status badge backgrounds */
.badge-pending {
background: url('/images/status-bg-pending.png') !important;
}
.pagination-img-btn {
background: #fff;
border: 1px solid #e3eaf6;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 32px;
padding: 0;
text-decoration: none;
}
.badge-approved {
background: url('/images/status-bg-approved.png') !important;
}
.pagination-img-btn:hover:not(:disabled) {
background: #1a2951;
border-color: #1a2951;
}
.badge-rejected {
background: url('/images/status-bg-rejected.png') !important;
}
.pagination-img-btn:disabled {
background: #f8fafc;
border-color: #e2e8f0;
cursor: not-allowed;
opacity: 0.5;
}
/* Fallback colors if images don't load */
.badge.badge-pending {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
color: #d97706 !important;
border-color: #f59e0b !important;
width: 85px;
}
.pagination-img-btn svg {
width: 16px;
height: 16px;
transition: filter 0.3s ease;
}
.badge.badge-approved {
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
color: #065f46 !important;
border-color: #10b981 !important;
width: 85px;
}
.pagination-img-btn:hover:not(:disabled) svg {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%);
}
.badge.badge-rejected {
background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
color: #991b1b !important;
border-color: #ef4444 !important;
width: 85px;
}
.pagination-img-btn:disabled svg {
filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
}
/* Animation effects for badges */
@keyframes pulse {
0% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }
50% { box-shadow: 0 0 14px rgba(0,0,0,0.15); }
100% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }
}
/* Count badges at top */
.count-badge {
--bs-badge-padding-x: 0.65em;
--bs-badge-padding-y: 0.35em;
--bs-badge-font-size: 0.75em;
--bs-badge-font-weight: 700;
--bs-badge-color: #fff;
--bs-badge-border-radius: var(--bs-border-radius);
}
/* ✨ 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;
}
/* Responsive pagination */
@media (max-width: 768px) {
.pagination-container {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.pagination-controls {
justify-content: center;
}
}
</style>
<!-- Heading and status badges row -->
<!-- Counts -->
<div class="d-flex justify-content-between align-items-center mb-2 mt-3">
<h4 class="fw-bold mb-0">User Requests</h4>
<h4 class="fw-bold mb-0">User Requests (Total: {{ $total }})</h4>
<div>
<span class="count-badge badge rounded-pill bg-warning text-dark me-1">
{{ $requests->where('status', 'pending')->count() }} Pending
</span>
<span class="count-badge badge rounded-pill bg-success me-1">
{{ $requests->where('status', 'approved')->count() }} Approved
</span>
<span class="count-badge badge rounded-pill bg-danger">
{{ $requests->where('status', 'rejected')->count() }} Rejected
</span>
<span class="count-badge badge rounded-pill bg-warning text-dark me-1">{{ $requests->where('status', 'pending')->count() }} Pending</span>
<span class="count-badge badge rounded-pill bg-success me-1">{{ $requests->where('status', 'approved')->count() }} Approved</span>
<span class="count-badge badge rounded-pill bg-danger">{{ $requests->where('status', 'rejected')->count() }} Rejected</span>
</div>
</div>
<!-- Search + Table -->
<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">
<input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="🔍 Search by name, email, company...">
<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>
<thead><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)
@forelse($currentItems as $index => $req)
<tr>
<td>{{ $requests->count() - $index }}</td>
<td><strong>{{ ($currentPage - 1) * $perPage + $index + 1 }}</strong></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>{{ Str::limit($req->address, 30) }}</td>
<td>
@if(strtolower($req->priority) == 'high')
<span class="priority-badge priority-high">High</span>
@elseif(strtolower($req->priority) == 'medium')
<span class="priority-badge priority-medium">Medium</span>
@elseif(strtolower($req->priority) == 'low')
<span class="priority-badge priority-low">Low</span>
@else
{{ $req->priority }}
@endif
@if(strtolower($req->priority) == 'high')<span class="priority-badge priority-high">High</span>
@elseif(strtolower($req->priority) == 'medium')<span class="priority-badge priority-medium">Medium</span>
@elseif(strtolower($req->priority) == 'low')<span class="priority-badge priority-low">Low</span>
@else{{ $req->priority ?? 'N/A' }}@endif
</td>
<td>{{ $req->date }}</td>
<td>
@if($req->status == 'approved')
<span class="badge badge-approved">
<i class="bi bi-check-circle-fill status-icon"></i>
Approved
</span>
@elseif($req->status == 'rejected')
<span class="badge badge-rejected">
<i class="bi bi-x-circle-fill status-icon"></i>
Rejected
</span>
@else
<span class="badge badge-pending">
<i class="bi bi-clock-fill status-icon"></i>
Pending
</span>
@endif
@if($req->status == 'approved')<span class="badge badge-approved"><i class="bi bi-check-circle-fill status-icon"></i>Approved</span>
@elseif($req->status == 'rejected')<span class="badge badge-rejected"><i class="bi bi-x-circle-fill status-icon"></i>Rejected</span>
@else<span class="badge badge-pending"><i class="bi bi-clock-fill status-icon"></i>Pending</span>@endif
</td>
<td>N/A</td>
</tr>
@endforeach
@empty
<tr><td colspan="11" class="text-center text-muted py-4">No records found.</td></tr>
@endforelse
</tbody>
</table>
@if($requests->isEmpty())
<div class="py-4 text-center text-muted">No records found.</div>
@endif
</div>
{{-- ✅ PAGINATION - WITH ARROW BUTTONS --}}
<div class="pagination-container">
<div class="pagination-info">
Showing {{ ($currentPage - 1) * $perPage + 1 }} to {{ min($currentPage * $perPage, $total) }} of {{ $total }} entries
</div>
<div class="pagination-controls">
{{-- Previous Page --}}
@if($currentPage > 1)
<a href="{{ request()->fullUrlWithQuery(['page' => $currentPage - 1]) }}" class="pagination-img-btn" title="Previous page">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
@else
<button class="pagination-img-btn" disabled title="Previous page">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
@endif
{{-- Page Numbers --}}
<div class="pagination-pages">
@php
$start = max(1, $currentPage - 1);
$end = min($totalPages, $currentPage + 1);
@endphp
@if($start > 1)
<a href="{{ request()->fullUrlWithQuery(['page' => 1]) }}" class="pagination-page-btn">1</a>
@if($start > 2)
<span class="pagination-ellipsis">...</span>
@endif
@endif
@for($i = $start; $i <= $end; $i++)
@if($i == $currentPage)
<span class="pagination-page-btn active">{{ $i }}</span>
@else
<a href="{{ request()->fullUrlWithQuery(['page' => $i]) }}" class="pagination-page-btn">{{ $i }}</a>
@endif
@endfor
@if($end < $totalPages)
@if($end < $totalPages - 1)
<span class="pagination-ellipsis">...</span>
@endif
<a href="{{ request()->fullUrlWithQuery(['page' => $totalPages]) }}" class="pagination-page-btn">{{ $totalPages }}</a>
@endif
</div>
{{-- Next Page --}}
@if($currentPage < $totalPages)
<a href="{{ request()->fullUrlWithQuery(['page' => $currentPage + 1]) }}" class="pagination-img-btn" title="Next page">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
@else
<button class="pagination-img-btn" disabled title="Next page">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
@endif
</div>
</div>
</div>
</div>