209 lines
8.1 KiB
PHP
209 lines
8.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<style>
|
|
.dashboard-header {
|
|
background: #ff7b00;
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-top: 20px;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
}
|
|
.dashboard-header h1 {
|
|
font-weight: 700;
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
.dashboard-header .meta-info {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
.dashboard-header .meta-info i {
|
|
margin-right: 8px;
|
|
}
|
|
.stat-card {
|
|
border-radius: 15px;
|
|
border: 1px solid #e0e0e0;
|
|
transition: transform 0.2s;
|
|
height: 100%;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
|
|
}
|
|
.stat-card .card-header-custom {
|
|
padding: 20px 20px 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
.stat-card .stat-label {
|
|
font-weight: 600;
|
|
color: #616161;
|
|
font-size: 1rem;
|
|
}
|
|
.stat-card .stat-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
.stat-card .card-body {
|
|
padding: 10px 20px 25px;
|
|
}
|
|
.stat-card .stat-value {
|
|
font-size: 2.2rem;
|
|
font-weight: 800;
|
|
margin-bottom: 1px;
|
|
}
|
|
.stat-card .stat-subtext {
|
|
font-size: 0.9rem;
|
|
color: #757575;
|
|
}
|
|
|
|
/* Color variations */
|
|
.stat-card.green { border-bottom: 4px solid #c8e6c9; }
|
|
.stat-card.green .stat-icon { background-color: #e8f5e9; color: #2e7d32; }
|
|
.stat-card.green .stat-value { color: #1b5e20; }
|
|
.stat-card.green .stat-label-bg { background: #f1fbf1; }
|
|
|
|
.stat-card.red { border-bottom: 4px solid #ffcdd2; }
|
|
.stat-card.red .stat-icon { background-color: #ffebee; color: #c62828; }
|
|
.stat-card.red .stat-value { color: #b71c1c; }
|
|
.stat-card.red .stat-label-bg { background: #fff5f5; }
|
|
|
|
.stat-card.blue { border-bottom: 4px solid #bbdefb; }
|
|
.stat-card.blue .stat-icon { background-color: #e3f2fd; color: #1565c0; }
|
|
.stat-card.blue .stat-value { color: #0d47a1; }
|
|
.stat-card.blue .stat-label-bg { background: #f5faff; }
|
|
|
|
.stat-label-bg {
|
|
padding: 5px 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid px-4">
|
|
<!-- Redesigned Header -->
|
|
<div class="dashboard-header shadow-sm">
|
|
<h1>Dashboard Karyawan</h1>
|
|
<div class="meta-info">
|
|
<div><i class="fas fa-shopping-cart"></i> Lokasi: {{ session('branch') ?? 'Cabang 1' }}</div>
|
|
<div class="mt-1" id="current-date-display">
|
|
<!-- Will be updated by JS or PHP -->
|
|
{{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Redesigned Triple Cards -->
|
|
<div class="row">
|
|
<!-- Card 1: Total Penjualan -->
|
|
<div class="col-lg-4 col-md-4 col-sm-12 mb-4">
|
|
<div class="stat-card green bg-white shadow-sm overflow-hidden">
|
|
<div class="stat-label-bg">
|
|
<div class="card-header-custom p-0 mb-0">
|
|
<span class="stat-label">Total Penjualan Hari Ini</span>
|
|
<div class="stat-icon"><i class="fas fa-chart-line"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="stat-value">Rp {{ number_format($totalSalesToday, 0, ',', '.') }}</div>
|
|
<div class="stat-subtext">{{ $transactionCountToday }} transaksi hari ini</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Total Pengeluaran -->
|
|
<div class="col-lg-4 col-md-4 col-sm-12 mb-4">
|
|
<div class="stat-card red bg-white shadow-sm overflow-hidden">
|
|
<div class="stat-label-bg">
|
|
<div class="card-header-custom p-0 mb-0">
|
|
<span class="stat-label">Total Pengeluaran Hari Ini</span>
|
|
<div class="stat-icon"><i class="fas fa-chart-line fa-flip-vertical"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="stat-value">Rp {{ number_format($totalPurchasesToday, 0, ',', '.') }}</div>
|
|
<div class="stat-subtext">Operasional & supplies</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Jumlah Penjualan (Custom requested change) -->
|
|
<div class="col-lg-4 col-md-4 col-sm-12 mb-4">
|
|
<div class="stat-card blue bg-white shadow-sm overflow-hidden">
|
|
<div class="stat-label-bg">
|
|
<div class="card-header-custom p-0 mb-0">
|
|
<span class="stat-label">Total Transaksi Penjualan</span>
|
|
<div class="stat-icon"><i class="fas fa-wallet"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Changing Saldo Kas to amount of transactions as per request -->
|
|
<div class="stat-value text-center" style="font-size: 3rem;">{{ $transactionCountToday }}</div>
|
|
<div class="stat-subtext text-center font-weight-bold mt-2">Transaksi Selesai</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optional Detail Section (Keep for functionality) -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
|
<div class="card-header bg-white py-3">
|
|
<h5 class="mb-0 font-weight-bold"><i class="fas fa-history mr-2"></i>Aktivitas Terbaru - {{ session('branch') }}</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr class="bg-light">
|
|
<th class="border-0 px-4">Waktu</th>
|
|
<th class="border-0">Tipe</th>
|
|
<th class="border-0">Deskripsi</th>
|
|
<th class="border-0 text-right px-4">Nominal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($activities as $act)
|
|
<tr>
|
|
<td class="px-4">{{ \Carbon\Carbon::parse($act->created_at)->format('H:i') }}</td>
|
|
<td><span class="badge {{ $act->badge }}">{{ $act->type }}</span></td>
|
|
<td>{{ $act->item }} ({{ $act->quantity }})</td>
|
|
<td class="text-right px-4">Rp {{ number_format($act->total_price, 0, ',', '.') }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="text-center py-4 text-muted">Belum ada aktivitas hari ini.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-white text-center py-3">
|
|
<a href="/laporan/penjualan" class="text-primary font-weight-bold">Lihat Semua Laporan <i class="fas fa-arrow-right ml-1"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Ensure date matches the localized requirement if Carbon isn't ideal
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const dateEl = document.getElementById('current-date-display');
|
|
const now = new Date();
|
|
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
// dateEl.textContent = now.toLocaleDateString('id-ID', options);
|
|
});
|
|
</script>
|
|
@endsection
|