frontend Order Section Update

This commit is contained in:
Utkarsh Khedkar
2025-11-26 23:07:12 +05:30
parent bebe0711f4
commit 04b00c9db8
18 changed files with 3604 additions and 1334 deletions

View File

@@ -38,12 +38,11 @@
display: inline-flex;
align-items: center;
font-size: 13.5px;
padding: 4px 16px 4px 11px;
padding: 6px 16px;
border-radius: 12px;
font-weight: 500;
gap: 6px;
font-weight: 600;
box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15);
min-width: 76px;
width: 90px;
min-height: 28px;
justify-content: center;
color: #fff;
@@ -53,18 +52,9 @@
.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;
}
.priority-high { background: linear-gradient(135deg, #ff8a8a, #d12929); }
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); }
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); }
/* 🎨 Table Header (keep original bg-light color) */
.custom-table thead th {
@@ -75,7 +65,7 @@
font-size: 17px;
letter-spacing: 0.5px;
border-bottom: 2px solid #bfbfbf;
background-color: #fde4b3 /* Bootstrap bg-light */
background-color: #fde4b3; /* Bootstrap bg-light */
}
/* 🟢 Rounded Corners for Header */
@@ -118,11 +108,87 @@
background: #fff;
}
/* ⚡ Status Badges */
/* ⚡ Status Badges - NEW ATTRACTIVE STYLES */
.badge {
font-size: 13px;
padding: 7px 12px;
border-radius: 10px;
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;
}
/* Status icons */
.status-icon {
font-size: 0px;
display: flex;
align-items: center;
justify-content: center;
}
/* Custom status badge backgrounds */
.badge-pending {
background: url('/images/status-bg-pending.png') !important;
}
.badge-approved {
background: url('/images/status-bg-approved.png') !important;
}
.badge-rejected {
background: url('/images/status-bg-rejected.png') !important;
}
/* 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;
}
.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;
}
/* 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 */
@@ -145,13 +211,13 @@
<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">
<span class="count-badge badge rounded-pill bg-warning text-dark me-1">
{{ $requests->where('status', 'pending')->count() }} Pending
</span>
<span class="badge rounded-pill bg-success me-1">
<span class="count-badge badge rounded-pill bg-success me-1">
{{ $requests->where('status', 'approved')->count() }} Approved
</span>
<span class="badge rounded-pill bg-danger">
<span class="count-badge badge rounded-pill bg-danger">
{{ $requests->where('status', 'rejected')->count() }} Rejected
</span>
</div>
@@ -195,11 +261,11 @@
<td>{{ $req->address }}</td>
<td>
@if(strtolower($req->priority) == 'high')
<span class="priority-badge priority-high"><span class="icon">🔥</span>High</span>
<span class="priority-badge priority-high">High</span>
@elseif(strtolower($req->priority) == 'medium')
<span class="priority-badge priority-medium"><span class="icon"></span>Medium</span>
<span class="priority-badge priority-medium">Medium</span>
@elseif(strtolower($req->priority) == 'low')
<span class="priority-badge priority-low"><span class="icon">🟢</span>Low</span>
<span class="priority-badge priority-low">Low</span>
@else
{{ $req->priority }}
@endif
@@ -207,11 +273,20 @@
<td>{{ $req->date }}</td>
<td>
@if($req->status == 'approved')
<span class="badge bg-success">Approved</span>
<span class="badge badge-approved">
<i class="bi bi-check-circle-fill status-icon"></i>
Approved
</span>
@elseif($req->status == 'rejected')
<span class="badge bg-danger">Rejected</span>
<span class="badge badge-rejected">
<i class="bi bi-x-circle-fill status-icon"></i>
Rejected
</span>
@else
<span class="badge bg-warning text-dark">Pending</span>
<span class="badge badge-pending">
<i class="bi bi-clock-fill status-icon"></i>
Pending
</span>
@endif
</td>
<td>N/A</td>
@@ -226,4 +301,4 @@
</div>
</div>
</div>
@endsection
@endsection