MIF_E31221361/resources/views/pages/dashboard/dashboard.blade.php

772 lines
42 KiB
PHP

@extends('component.main')
@section('content')
@if (auth()->user()->roles === 'super')
<div class="pagetitle mb-4">
<h1>Dashboard Super Admin</h1>
<p class="text-secondary mb-0">Selamat datang <b>{{ $myData->nama }}</b></p>
</div>
<section class="section dashboard">
<div class="row g-4">
<!-- Left side columns -->
<div class="col-lg-12">
<div class="row g-4">
<!-- Total Users Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Total Users</h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-primary-light">
<i class="bi bi-people text-primary"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $totalUsers ?? 0 }}</h2>
<span class="text-muted small">total users</span>
</div>
</div>
</div>
</div>
</div>
<!-- Total Admins Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Admin</h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-success-light">
<i class="bi bi-person-badge text-success"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $totalAdmins ?? 0 }}</h2>
<span class="text-muted small">admin users</span>
</div>
</div>
</div>
</div>
</div>
<!-- Total Karyawan Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Karyawan</h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-info-light">
<i class="bi bi-person text-info"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $totalKaryawan ?? 0 }}</h2>
<span class="text-muted small">karyawan users</span>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Actions Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Quick Actions</h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-warning-light">
<i class="bi bi-plus-circle text-warning"></i>
</div>
<div class="ps-3">
<a href="{{ route('super.create-user') }}" class="btn btn-sm btn-primary">
<i class="bi bi-plus"></i> Add User
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Users Card -->
<div class="col-xxl-8 col-xl-12">
<div class="card h-100">
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h5 class="card-title fw-bold mb-0">Recent Users</h5>
<a href="{{ route('super.manage-users') }}" class="btn btn-sm btn-outline-primary">
<i class="bi bi-eye"></i> View All
</a>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th class="text-center">Status</th>
<th class="text-center">Created</th>
</tr>
</thead>
<tbody>
@forelse($recentUsers as $user)
<tr>
<td class="fw-medium">
{{ $user->admin->nama ?? ($user->karyawan->nama ?? 'N/A') }}
</td>
<td>{{ $user->email }}</td>
<td>
<span
class="badge bg-{{ $user->roles === 'admin' ? 'success' : 'info' }}">
{{ ucfirst($user->roles) }}
</span>
</td>
<td class="text-center">
<span class="badge bg-success">Active</span>
</td>
<td class="text-center">
{{ $user->created_at->format('d M Y') }}
</td>
</tr>
@empty
<tr>
<td colspan="5" class="text-center py-4 text-muted">
No users found
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Management Menu Card -->
<div class="col-xxl-4 col-xl-12">
<div class="card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Management Menu</h5>
<div class="list-group list-group-flush">
<a href="{{ route('super.manage-users') }}"
class="list-group-item list-group-item-action d-flex align-items-center">
<i class="bi bi-people me-3 text-primary"></i>
<div>
<div class="fw-medium">Manage Users</div>
<small class="text-muted">View, edit, and delete users</small>
</div>
</a>
<a href="{{ route('super.create-user') }}"
class="list-group-item list-group-item-action d-flex align-items-center">
<i class="bi bi-person-plus me-3 text-success"></i>
<div>
<div class="fw-medium">Add New User</div>
<small class="text-muted">Create admin or karyawan account</small>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@push('scripts')
<style>
.bg-primary-light {
background-color: rgba(65, 84, 241, 0.1);
}
.bg-success-light {
background-color: rgba(40, 167, 69, 0.1);
}
.bg-danger-light {
background-color: rgba(220, 53, 69, 0.1);
}
.bg-info-light {
background-color: rgba(13, 202, 240, 0.1);
}
.bg-warning-light {
background-color: rgba(255, 193, 7, 0.1);
}
.card-icon {
width: 50px;
height: 50px;
font-size: 24px;
}
.info-card h2 {
font-size: 28px;
font-weight: 700;
}
.table> :not(caption)>*>* {
padding: 0.75rem 1rem;
}
.badge {
padding: 0.5em 0.8em;
font-weight: 500;
}
</style>
@endpush
@elseif (auth()->user()->roles === 'admin')
<div class="pagetitle mb-4">
<h1>Dashboard Admin</h1>
<p class="text-secondary mb-0">Selamat datang <b>{{ $myData->nama }}</b></p>
</div>
<section class="section dashboard">
<div class="row g-4">
<!-- Left side columns -->
<div class="col-lg-12">
<div class="row g-4">
<!-- Daily Transactions Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Transaksi <span class="text-secondary fw-normal">|
Hari ini</span></h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-primary-light">
<i class="bi bi-cart text-primary"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $dailyTransactions ?? 0 }}</h2>
<span class="text-muted small">transaksi</span>
</div>
</div>
</div>
</div>
</div>
<!-- Monthly Revenue Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Pendapatan <span
class="text-secondary fw-normal">| Bulan ini</span></h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-success-light">
<i class="bi bi-coin text-success"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">Rp{{ number_format($monthlyRevenue ?? 0, 0, ',', '.') }}
</h2>
<span class="text-muted small">rupiah</span>
</div>
</div>
</div>
</div>
</div>
<!-- Monthly Expenses Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Pengeluaran <span
class="text-secondary fw-normal">| Bulan ini</span></h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-danger-light">
<i class="bi bi-cash text-danger"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">Rp{{ number_format($monthlyExpenses ?? 0, 0, ',', '.') }}
</h2>
<span class="text-muted small">rupiah</span>
</div>
</div>
</div>
</div>
</div>
<!-- User Stats Card -->
<div class="col-xxl-3 col-md-6">
<div class="card info-card sales-card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Pengguna Aktif</h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-info-light">
<i class="bi bi-people text-info"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $userStats['active'] ?? 0 }}</h2>
<div class="mt-2">
<span class="badge bg-primary me-2">Admin:
{{ $userStats['admin'] ?? 0 }}</span>
<span class="badge bg-secondary">Karyawan:
{{ $userStats['kasir'] ?? 0 }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recipe Status Card -->
<div class="col-xxl-6 col-xl-12">
<div class="card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Status Resep Produk</h5>
<div class="row g-4">
<div class="col-md-4">
<div class="text-center p-3 rounded bg-light">
<h2 class="mb-2">{{ $productRecipeStats['total_products'] ?? 0 }}</h2>
<p class="mb-0 text-muted">Total Produk</p>
</div>
</div>
<div class="col-md-4">
<div class="text-center p-3 rounded bg-success-light">
<h2 class="mb-2">{{ $productRecipeStats['with_recipe'] ?? 0 }}</h2>
<p class="mb-0 text-success">Resep Lengkap</p>
</div>
</div>
<div class="col-md-4">
<div class="text-center p-3 rounded bg-warning-light">
<h2 class="mb-2">{{ $productRecipeStats['without_recipe'] ?? 0 }}</h2>
<p class="mb-0 text-warning">Belum Ada Resep</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Low Stock Materials Card -->
<div class="col-xxl-6 col-xl-12">
<div class="card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Bahan Baku Menipis</h5>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th>Bahan</th>
<th class="text-center">Stok</th>
<th class="text-center">Minimum</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
@forelse($lowStockMaterials as $material)
<tr>
<td class="fw-medium">{{ $material->name }}</td>
<td class="text-center">{{ number_format($material->current_stock, 0) }} {{ $material->unit }}</td>
<td class="text-center">{{ number_format($material->minimum_stock, 0) }} {{ $material->unit }}</td>
<td class="text-center">
<span class="badge bg-danger">Stok Rendah</span>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="text-center py-4 text-muted">
<i class="bi bi-info-circle me-2"></i>Tidak ada bahan baku yang
menipis
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Products with Low Materials Card -->
<div class="col-xxl-12">
<div class="card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Produk dengan Bahan Baku Menipis</h5>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th>Produk</th>
<th>Bahan Menipis</th>
<th class="text-center">Stok Bahan</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
@forelse($productsWithLowMaterials as $product)
<tr>
<td class="fw-medium">{{ $product->nama_produk }}</td>
<td>{{ $product->material_name }}</td>
<td class="text-center">{{ number_format($product->current_stock, 0) }} / {{ number_format($product->minimum_stock, 0) }}</td>
<td class="text-center">
<span class="badge bg-warning">Perlu Perhatian</span>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="text-center py-4 text-muted">
<i class="bi bi-info-circle me-2"></i>Tidak ada produk dengan
bahan baku menipis
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Revenue Chart -->
<div class="col-12">
<div class="card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Pendapatan <span
class="text-secondary fw-normal">| 30 Hari Terakhir</span></h5>
<div id="revenueChart" class="chart-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@push('scripts')
<script>
var options = {
series: [{
name: 'Pendapatan',
data: @json($revenueData['amounts'] ?? [])
}],
chart: {
type: 'area',
height: 350,
zoom: {
enabled: false
},
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.3,
stops: [0, 90, 100]
}
},
grid: {
borderColor: '#f1f1f1',
row: {
colors: ['transparent'],
opacity: 0.5
},
padding: {
top: 10,
right: 10,
bottom: 10,
left: 10
}
},
xaxis: {
categories: @json($revenueData['dates'] ?? []),
labels: {
rotate: -45,
rotateAlways: true,
style: {
fontSize: '12px',
fontFamily: 'inherit'
}
},
axisBorder: {
show: false
}
},
yaxis: {
labels: {
formatter: function(value) {
return 'Rp' + value.toLocaleString('id-ID');
},
style: {
fontSize: '12px',
fontFamily: 'inherit'
}
}
},
tooltip: {
y: {
formatter: function(value) {
return 'Rp' + value.toLocaleString('id-ID');
}
}
},
colors: ['#4154f1']
};
var chart = new ApexCharts(document.querySelector("#revenueChart"), options);
chart.render();
</script>
<style>
.bg-primary-light {
background-color: rgba(65, 84, 241, 0.1);
}
.bg-success-light {
background-color: rgba(40, 167, 69, 0.1);
}
.bg-danger-light {
background-color: rgba(220, 53, 69, 0.1);
}
.bg-info-light {
background-color: rgba(13, 202, 240, 0.1);
}
.bg-warning-light {
background-color: rgba(255, 193, 7, 0.1);
}
.card-icon {
width: 50px;
height: 50px;
font-size: 24px;
}
.info-card h2 {
font-size: 28px;
font-weight: 700;
}
.chart-container {
min-height: 400px;
}
.table> :not(caption)>*>* {
padding: 0.75rem 1rem;
}
.badge {
padding: 0.5em 0.8em;
font-weight: 500;
}
</style>
@endpush
@elseif (auth()->user()->roles === 'karyawan')
<div class="pagetitle mb-4">
<h1>Dashboard Karyawan</h1>
<p class="text-secondary mb-0">Selamat datang <b>{{ $myData->nama }}</b></p>
</div>
<section class="section dashboard">
<div class="row g-4">
<div class="col-lg-12">
<div class="row align-items-center">
<!-- Daily Transactions Card -->
<div class="col-xxl-6 col-md-8">
<div class="card info-card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Transaksi <span class="text-secondary fw-normal">|
Hari ini</span></h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-primary-light">
<i class="bi bi-cart text-primary"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $dailyTransactions ?? 0 }}</h2>
<span class="text-muted small">transaksi</span>
</div>
<div class="ms-auto">
<img src="{{ asset('img/iconcriospyy.png') }}" alt="Icon"
style="width: 80; height: 80px; object-fit: cover;">
</div>
</div>
</div>
</div>
</div>
<!-- Status Resep produk -->
<div class="col-xxl-6 col-xl-12">
<div class="card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Status Resep Produk</h5>
<div class="row g-4">
<div class="col-md-4">
<div class="text-center p-3 rounded bg-light">
<h2 class="mb-2">{{ $productRecipeStats['total_products'] ?? 0 }}</h2>
<p class="mb-0 text-muted">Total Produk</p>
</div>
</div>
<div class="col-md-4">
<div class="text-center p-3 rounded bg-success-light">
<h2 class="mb-2">{{ $productRecipeStats['with_recipe'] ?? 0 }}</h2>
<p class="mb-0 text-success">Resep Lengkap</p>
</div>
</div>
<div class="col-md-4">
<div class="text-center p-3 rounded bg-warning-light">
<h2 class="mb-2">{{ $productRecipeStats['without_recipe'] ?? 0 }}</h2>
<p class="mb-0 text-warning">Belum Ada Resep</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Low Stock Materials Card -->
<div class="col-xxl-6 col-xl-12">
<div class="card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Bahan Baku Menipis</h5>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th>Bahan</th>
<th class="text-center">Stok</th>
<th class="text-center">Minimum</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
@forelse($lowStockMaterials as $material)
<tr>
<td class="fw-medium">{{ $material->name }}</td>
<td class="text-center">{{ number_format($material->current_stock, 0) }} {{ $material->unit }}</td>
<td class="text-center">{{ number_format($material->minimum_stock, 0) }} {{ $material->unit }}</td>
<td class="text-center">
<span class="badge bg-danger">Stok Rendah</span>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="text-center py-4 text-muted">
<i class="bi bi-info-circle me-2"></i>Tidak ada bahan baku yang
menipis
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Products with Low Materials Card -->
<div class="col-xxl-12">
<div class="card">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-4">Produk dengan Bahan Baku Menipis</h5>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th>Produk</th>
<th>Bahan Menipis</th>
<th class="text-center">Stok Bahan</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
@forelse($productsWithLowMaterials as $product)
<tr>
<td class="fw-medium">{{ $product->nama_produk }}</td>
<td>{{ $product->material_name }}</td>
<td class="text-center">{{ number_format($product->current_stock, 0) }} / {{ number_format($product->minimum_stock, 0) }}</td>
<td class="text-center">
<span class="badge bg-warning">Perlu Perhatian</span>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="text-center py-4 text-muted">
<i class="bi bi-info-circle me-2"></i>Tidak ada produk dengan
bahan baku menipis
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@elseif (auth()->user()->roles === 'pelanggan')
<div class="pagetitle mb-4">
<h1>Dashboard</h1>
<p class="text-secondary mb-0">Selamat datang <b>{{ $myData->nama }}</b></p>
</div>
<section class="section dashboard">
<div class="row g-4">
<div class="col-12">
<div class="row g-4">
<!-- Points Card -->
<div class="col-md-6">
<div class="card info-card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Poin Anda</h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-success-light">
<i class="bi bi-coin text-success"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $myData->poin }}</h2>
<span class="text-muted small">poin</span>
</div>
</div>
</div>
</div>
</div>
<!-- Reservations Card -->
<div class="col-md-6">
<div class="card info-card h-100">
<div class="card-body p-4">
<h5 class="card-title fw-bold mb-3">Reservasi <span class="text-secondary fw-normal">|
Mendatang</span></h5>
<div class="d-flex align-items-center">
<div
class="card-icon rounded-circle d-flex align-items-center justify-content-center bg-primary-light">
<i class="bi bi-calendar-check text-primary"></i>
</div>
<div class="ps-3">
<h2 class="mb-0">{{ $countReservasi ?? 0 }}</h2>
<span class="text-muted small">reservasi</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endif
@endsection