frontend Order Section Update
This commit is contained in:
Utkarsh Khedkar
@@ -55,6 +55,7 @@
|
||||
padding: 8px 15px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@@ -105,7 +106,6 @@
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@@ -244,6 +244,66 @@
|
||||
border-radius: 10px 10px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Remove horizontal scroll */
|
||||
.table-responsive {
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Adjust table layout to fit without scroll */
|
||||
.table {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
/* Ensure proper column sizing */
|
||||
.table th,
|
||||
.table td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Fix for search and filter section */
|
||||
.search-filter-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-filter-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
@@ -252,37 +312,55 @@
|
||||
<h4 style="color: #2c3e50; font-weight: 700;">Customer List</h4>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<!-- Stats Cards with REAL DATA -->
|
||||
<div class="stats-row">
|
||||
<div class="stats-card">
|
||||
<div class="stats-count">{{ $totalCustomers ?? '1,247' }}</div>
|
||||
<div class="stats-count">{{ $customers->count() }}</div>
|
||||
<div class="stats-label">Total Customers</div>
|
||||
<i class="bi bi-people-fill stats-icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||||
<div class="stats-count">{{ $newThisMonth ?? '342' }}</div>
|
||||
<div class="stats-count">
|
||||
@php
|
||||
$newThisMonth = $customers->filter(function($customer) {
|
||||
return $customer->created_at->format('Y-m') === now()->format('Y-m');
|
||||
})->count();
|
||||
@endphp
|
||||
{{ $newThisMonth }}
|
||||
</div>
|
||||
<div class="stats-label">New This Month</div>
|
||||
<i class="bi bi-person-plus stats-icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
||||
<div class="stats-count">{{ $activeThisMonth ?? '123' }}</div>
|
||||
<div class="stats-label">Active This Month</div>
|
||||
<div class="stats-count">
|
||||
@php
|
||||
$activeCustomers = $customers->where('status', 'active')->count();
|
||||
@endphp
|
||||
{{ $activeCustomers }}
|
||||
</div>
|
||||
<div class="stats-label">Active Customers</div>
|
||||
<i class="bi bi-activity stats-icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
|
||||
<div class="stats-count">{{ $premiumCount ?? '23' }}</div>
|
||||
<div class="stats-count">
|
||||
@php
|
||||
$premiumCount = $customers->where('customer_type', 'premium')->count();
|
||||
@endphp
|
||||
{{ $premiumCount }}
|
||||
</div>
|
||||
<div class="stats-label">Premium Customers</div>
|
||||
<i class="bi bi-award-fill stats-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter Section -->
|
||||
<!-- Search and Filter Section - FIXED LAYOUT -->
|
||||
<div class="glass-card p-3 mb-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<div class="search-filter-container">
|
||||
<!-- Search Section -->
|
||||
<div class="search-section">
|
||||
<form method="GET" action="{{ route('admin.customers.index') }}" class="d-flex align-items-center">
|
||||
<div class="search-container">
|
||||
<i class="bi bi-search text-muted me-2"></i>
|
||||
@@ -290,14 +368,16 @@
|
||||
name="search"
|
||||
value="{{ $search ?? '' }}"
|
||||
class="search-input"
|
||||
placeholder="Search Customer Name">
|
||||
placeholder="Search Customer Name, Email, or Phone...">
|
||||
@if(!empty($status))
|
||||
<input type="hidden" name="status" value="{{ $status }}">
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-6 text-end">
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="filter-section">
|
||||
<a href="{{ route('admin.customers.index', ['status'=>'active', 'search'=>$search ?? '']) }}"
|
||||
class="filter-btn {{ ($status ?? '') == 'active' ? 'active' : '' }}">
|
||||
Active
|
||||
@@ -313,7 +393,7 @@
|
||||
All
|
||||
</a>
|
||||
|
||||
<a href="{{ route('admin.customers.add') }}" class="add-customer-btn ms-2">
|
||||
<a href="{{ route('admin.customers.add') }}" class="add-customer-btn">
|
||||
<i class="bi bi-plus-circle me-1"></i>Add Customer
|
||||
</a>
|
||||
</div>
|
||||
@@ -321,98 +401,92 @@
|
||||
</div>
|
||||
|
||||
<!-- Customer List Table -->
|
||||
<div class="glass-card">
|
||||
<div class="p-3 border-bottom">
|
||||
<h5 class="mb-0" style="color: #2c3e50; font-weight: 600;">Customer List</h5>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-header">Customer Info</th>
|
||||
<th class="table-header">Customer ID</th>
|
||||
<th class="table-header">Create Date</th>
|
||||
<th class="table-header">Status</th>
|
||||
<th class="table-header" width="120">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($customers as $c)
|
||||
<tr>
|
||||
<!-- Customer Info Column -->
|
||||
<td class="customer-info-column">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="customer-avatar me-3">
|
||||
{{ strtoupper(substr($c->customer_name,0,1)) }}
|
||||
<div class="table-container">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-header">Customer Info</th>
|
||||
<th class="table-header">Customer ID</th>
|
||||
<th class="table-header">Create Date</th>
|
||||
<th class="table-header">Status</th>
|
||||
<th class="table-header" width="120">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($customers as $c)
|
||||
<tr>
|
||||
<!-- Customer Info Column -->
|
||||
<td class="customer-info-column">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="customer-avatar me-3">
|
||||
{{ strtoupper(substr($c->customer_name,0,1)) }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">{{ $c->customer_name }}</div>
|
||||
@if($c->customer_type == 'premium')
|
||||
<span class="premium-badge">Premium Customer</span>
|
||||
@else
|
||||
<span class="regular-badge">Regular Customer</span>
|
||||
@endif
|
||||
<div class="customer-details mt-1">
|
||||
{{ $c->email }}<br>
|
||||
{{ $c->mobile_no }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">{{ $c->customer_name }}</div>
|
||||
@if($c->customer_type == 'premium')
|
||||
<span class="premium-badge">Premium Customer</span>
|
||||
@else
|
||||
<span class="regular-badge">Regular Customer</span>
|
||||
@endif
|
||||
<div class="customer-details mt-1">
|
||||
{{ $c->email }}<br>
|
||||
{{ $c->mobile_no }}
|
||||
</div>
|
||||
<div class="customer-stats mt-1">
|
||||
{{ $c->orders->count() }} orders • ₹{{ number_format($c->orders->sum('ttl_amount'), 2) }} total
|
||||
</div>
|
||||
<div class="customer-stats mt-1">
|
||||
{{ $c->orders->count() }} orders • ₹{{ number_format($c->orders->sum('ttl_amount'), 2) }} total
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Customer ID -->
|
||||
<td>
|
||||
<span class="fw-bold text-primary">{{ $c->customer_id }}</span>
|
||||
</td>
|
||||
<!-- Customer ID -->
|
||||
<td>
|
||||
<span class="fw-bold text-primary">{{ $c->customer_id }}</span>
|
||||
</td>
|
||||
|
||||
<!-- Create Date -->
|
||||
<td>
|
||||
<span class="text-muted">{{ $c->created_at ? $c->created_at->format('d-m-Y') : '-' }}</span>
|
||||
</td>
|
||||
<!-- Create Date -->
|
||||
<td>
|
||||
<span class="text-muted">{{ $c->created_at ? $c->created_at->format('d-m-Y') : '-' }}</span>
|
||||
</td>
|
||||
|
||||
<!-- Status -->
|
||||
<td>
|
||||
@if($c->status === 'active')
|
||||
<span class="status-badge active-status">Active</span>
|
||||
@else
|
||||
<span class="status-badge inactive-status">Inactive</span>
|
||||
@endif
|
||||
</td>
|
||||
<!-- Status -->
|
||||
<td>
|
||||
@if($c->status === 'active')
|
||||
<span class="status-badge active-status">Active</span>
|
||||
@else
|
||||
<span class="status-badge inactive-status">Inactive</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td>
|
||||
<div class="d-flex">
|
||||
<a href="{{ route('admin.customers.view', $c->id) }}"
|
||||
class="action-btn" title="View">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<!-- Actions -->
|
||||
<td>
|
||||
<div class="d-flex">
|
||||
<a href="{{ route('admin.customers.view', $c->id) }}"
|
||||
class="action-btn" title="View">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
|
||||
<form action="{{ route('admin.customers.status', $c->id) }}"
|
||||
method="POST" style="display:inline-block;">
|
||||
@csrf
|
||||
<button class="action-btn" title="Toggle Status" type="submit">
|
||||
<i class="bi bi-power"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-4">
|
||||
<i class="bi bi-people display-4 text-muted d-block mb-2"></i>
|
||||
<span class="text-muted">No customers found.</span>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<form action="{{ route('admin.customers.status', $c->id) }}"
|
||||
method="POST" style="display:inline-block;">
|
||||
@csrf
|
||||
<button class="action-btn" title="Toggle Status" type="submit">
|
||||
<i class="bi bi-power"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-4">
|
||||
<i class="bi bi-people display-4 text-muted d-block mb-2"></i>
|
||||
<span class="text-muted">No customers found.</span>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user