294 lines
12 KiB
PHP
294 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container-fluid p-4">
|
|
<!-- Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h2 class="mb-0">Dashboard</h2>
|
|
<small class="text-muted">Welcome back! Here's what's happening today.</small>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-primary" onclick="refreshData()">
|
|
<i class="fas fa-sync-alt"></i> Refresh
|
|
</button>
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
|
<i class="fas fa-calendar"></i> Today
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Today</a></li>
|
|
<li><a class="dropdown-item" href="#">This Week</a></li>
|
|
<li><a class="dropdown-item" href="#">This Month</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="bg-primary bg-opacity-10 p-3 rounded">
|
|
<i class="fas fa-users fa-2x text-primary"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h3 class="mb-0">247</h3>
|
|
<small class="text-muted">Active Members</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="bg-success bg-opacity-10 p-3 rounded">
|
|
<i class="fas fa-sign-in-alt fa-2x text-success"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h3 class="mb-0">42</h3>
|
|
<small class="text-muted">Today's Check-ins</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="bg-warning bg-opacity-10 p-3 rounded">
|
|
<i class="fas fa-lightbulb fa-2x text-warning"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h3 class="mb-0">18</h3>
|
|
<small class="text-muted">Cross-sell Opportunities</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="bg-info bg-opacity-10 p-3 rounded">
|
|
<i class="fas fa-dollar-sign fa-2x text-info"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h3 class="mb-0">$12,450</h3>
|
|
<small class="text-muted">Today's Revenue</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h5 class="mb-0">Visits by Venue</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="venueChart" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h5 class="mb-0">Loyalty Tier Distribution</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="tierChart" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Guests Table -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Recent Guests</h5>
|
|
<a href="{{ route('guests.search') }}" class="btn btn-primary btn-sm">
|
|
<i class="fas fa-search"></i> Search All Guests
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Guest</th>
|
|
<th>Loyalty ID</th>
|
|
<th>Tier</th>
|
|
<th>Last Visit</th>
|
|
<th>Venue</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-3">
|
|
<i class="fas fa-user-circle fa-2x text-secondary"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Sarah Johnson</div>
|
|
<small class="text-muted">+971 50 123 4567</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-secondary">HG-001234</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-warning text-dark">Gold</span>
|
|
</td>
|
|
<td>2 hours ago</td>
|
|
<td>Seven Hotel</td>
|
|
<td>
|
|
<a href="{{ route('guests.profile', 1) }}" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i> View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-3">
|
|
<i class="fas fa-user-circle fa-2x text-secondary"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Ahmed Al-Rashid</div>
|
|
<small class="text-muted">+971 55 987 6543</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-secondary">HG-001235</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-light text-dark border">Silver</span>
|
|
</td>
|
|
<td>4 hours ago</td>
|
|
<td>Rayes</td>
|
|
<td>
|
|
<a href="{{ route('guests.profile', 2) }}" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i> View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-3">
|
|
<i class="fas fa-user-circle fa-2x text-secondary"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Maria Rodriguez</div>
|
|
<small class="text-muted">+971 52 456 7890</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-secondary">HG-001236</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-danger">Platinum</span>
|
|
</td>
|
|
<td>6 hours ago</td>
|
|
<td>Coral Bay Beach</td>
|
|
<td>
|
|
<a href="{{ route('guests.profile', 3) }}" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i> View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
// Venue Visits Chart
|
|
const venueCtx = document.getElementById('venueChart').getContext('2d');
|
|
new Chart(venueCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Seven Hotel', 'City Center Hotel', 'Coral Bay Resort', 'La Taverna', 'Rayes', 'Taiga Sky'],
|
|
datasets: [{
|
|
data: [35, 28, 22, 18, 15, 12],
|
|
backgroundColor: [
|
|
'#007bff',
|
|
'#28a745',
|
|
'#ffc107',
|
|
'#dc3545',
|
|
'#6f42c1',
|
|
'#20c997'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Loyalty Tier Chart
|
|
const tierCtx = document.getElementById('tierChart').getContext('2d');
|
|
new Chart(tierCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Silver', 'Gold', 'Platinum'],
|
|
datasets: [{
|
|
label: 'Members',
|
|
data: [145, 78, 24],
|
|
backgroundColor: [
|
|
'#6c757d',
|
|
'#ffc107',
|
|
'#dc3545'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
function refreshData() {
|
|
showToast('Data refreshed successfully!', 'success');
|
|
// In a real app, this would fetch new data from the API
|
|
}
|
|
</script>
|
|
@endsection
|