498 lines
16 KiB
PHP
498 lines
16 KiB
PHP
@extends('layouts.app2')
|
|
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* ============================================
|
|
STAT CARDS
|
|
============================================ */
|
|
.stat-cards-row {
|
|
margin-left: var(--gap);
|
|
margin-right: var(--gap);
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
/* Jarak antar kotak */
|
|
margin-bottom: 20px;
|
|
|
|
/* Hapus margin kiri-kanan di sini jika bungkus luarnya
|
|
sudah menggunakan <div class="container"> agar sejajar lurus */
|
|
}
|
|
|
|
.stat-card {
|
|
background: #ffffff;
|
|
border: 1px solid #E5E7EB;
|
|
/* Warna garis tepi yang lebih soft */
|
|
border-radius: 8px;
|
|
/* Lebih kotak persis seperti UI */
|
|
padding: 45px 35px;
|
|
/* Proporsi tinggi yang lebih pas */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
|
|
/* Bayangan soft ke bawah */
|
|
transition: box-shadow 0.25s, transform 0.25s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* Icon container */
|
|
.stat-icon {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* Width & Height fix dihapus agar SVG ukuran besar Anda bisa tampil utuh bebas */
|
|
}
|
|
|
|
/* Warna ikon per card (jika sewaktu-waktu pakai font-icon) */
|
|
.stat-icon.icon-produk {
|
|
color: #1A2962;
|
|
}
|
|
|
|
.stat-icon.icon-dilihat {
|
|
color: #2D9CDB;
|
|
}
|
|
|
|
.stat-icon.icon-stok {
|
|
color: #27AE60;
|
|
}
|
|
|
|
.stat-icon.icon-kategori {
|
|
color: #9B51E0;
|
|
}
|
|
|
|
.stat-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
/* Jarak antara teks label dan angka */
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 13.5px;
|
|
font-weight: 200;
|
|
color: #9CA3AF;
|
|
/* Warna abu-abu yang lebih pas dengan UI */
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36px;
|
|
/* Diperbesar agar angkanya raksasa seperti di UI */
|
|
font-weight: 800;
|
|
color: #000000;
|
|
/* Warna hitam kebiruan pekat */
|
|
line-height: 1;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Responsive khusus grid stat-cards */
|
|
@media (max-width: 1200px) {
|
|
.stat-cards-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
/* Jadi 2 baris x 2 kolom di tablet */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.stat-cards-row {
|
|
grid-template-columns: 1fr;
|
|
/* Jadi 1 kolom memanjang di HP */
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
TABLE SECTION (Produk Paling Sering Dilihat)
|
|
============================================ */
|
|
.table-card {
|
|
background-color: #ffffff;
|
|
margin-left: var(--gap);
|
|
margin-right: var(--gap);
|
|
border: 1px solid #E5E7EB;
|
|
border-radius: 12px;
|
|
/* Disesuaikan agar melengkungnya pas seperti UI */
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
|
|
/* Bayangan lebih halus */
|
|
overflow: hidden;
|
|
margin-bottom: 40px;
|
|
/* margin-left & right dihapus agar kartu sejajar lurus dengan layout grid atasnya */
|
|
}
|
|
|
|
.table-card-header {
|
|
padding: 24px 24px 24px 30px;
|
|
}
|
|
|
|
.table-card-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Tabel Utama */
|
|
.dashboard-table {
|
|
margin-left: var(--gap);
|
|
margin-right: var(--gap);
|
|
|
|
/* KUNCI: Kurangi 100% dengan total margin kiri (1 var) + margin kanan (1 var) */
|
|
width: calc(100% - (var(--gap) * 2));
|
|
|
|
border-collapse: collapse;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Header Tabel */
|
|
.dashboard-table thead tr {
|
|
background-color: #F3F4F6;
|
|
/* Warna abu-abu header sesuai UI */
|
|
}
|
|
|
|
.dashboard-table thead th {
|
|
padding: 16px 24px;
|
|
/* Jarak padding kiri/kanan disamakan dengan header teks */
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #111827;
|
|
text-align: left;
|
|
border: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Lebar Kolom (Proporsional sesuai gambar) */
|
|
.dashboard-table th.col-produk,
|
|
.dashboard-table td.col-produk {
|
|
width: 35%;
|
|
}
|
|
|
|
.dashboard-table th.col-kategori,
|
|
.dashboard-table td.col-kategori {
|
|
width: 20%;
|
|
}
|
|
|
|
.dashboard-table th.col-kondisi,
|
|
.dashboard-table td.col-kondisi {
|
|
width: 15%;
|
|
}
|
|
|
|
.dashboard-table th.col-stok,
|
|
.dashboard-table td.col-stok {
|
|
width: 15%;
|
|
}
|
|
|
|
.dashboard-table th.col-dilihat,
|
|
.dashboard-table td.col-dilihat {
|
|
width: 15%;
|
|
}
|
|
|
|
/* Row Body Tabel */
|
|
.dashboard-table tbody tr {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.dashboard-table tbody tr:hover {
|
|
background-color: #F9FAFB;
|
|
/* Efek hover baris yang sangat halus */
|
|
}
|
|
|
|
.dashboard-table tbody td {
|
|
padding: 20px 24px;
|
|
/* Jarak atas bawah lebih lega sesuai UI */
|
|
font-size: 14px;
|
|
color: #111827;
|
|
font-weight: 500;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #E5E7EB;
|
|
/* Garis pemisah antar baris yang rapi */
|
|
}
|
|
|
|
/* Sel Produk (Gambar + Nama) */
|
|
.product-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Thumbnail Produk - Diubah menjadi PERSEGI PANJANG sesuai UI */
|
|
.product-thumb {
|
|
width: 80px;
|
|
height: 52px;
|
|
border-radius: 6px;
|
|
object-fit: contain;
|
|
background-color: #F3F4F6;
|
|
flex-shrink: 0;
|
|
border: none;
|
|
/* Border dihapus karena UI tidak pakai border di gambar */
|
|
padding: 4px;
|
|
mix-blend-mode: multiply;
|
|
/* Menyamarkan background putih pada foto sepatu */
|
|
}
|
|
|
|
.product-name-text {
|
|
font-weight: 600;
|
|
color: #111827;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Badge Kondisi */
|
|
.badge-kondisi {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 6px 16px;
|
|
/* Padding dilebarkan sedikit */
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Warna spesifik badge disesuaikan dengan UI */
|
|
.badge-new {
|
|
background-color: #22C55E;
|
|
/* Hijau terang */
|
|
color: #ffffff;
|
|
}
|
|
|
|
.badge-second {
|
|
background-color: #8892A0;
|
|
/* Abu-abu solid medium */
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Teks Stok & Dilihat */
|
|
.td-stok,
|
|
.td-dilihat {
|
|
color: #111827;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE
|
|
============================================ */
|
|
@media (max-width: 1100px) {
|
|
.stat-cards-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stat-cards-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 26px;
|
|
width: 46px;
|
|
height: 46px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 18px 16px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.table-card-header {
|
|
padding: 16px 16px 12px;
|
|
}
|
|
|
|
.dashboard-table thead th,
|
|
.dashboard-table tbody td {
|
|
padding: 12px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.product-thumb {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.product-cell {
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Sembunyikan kolom kurang penting di tablet */
|
|
.col-stok,
|
|
.th-stok {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.stat-cards-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 22px;
|
|
}
|
|
|
|
/* Sembunyikan kolom kategori di hp kecil */
|
|
.col-kategori,
|
|
.th-kategori {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<h2 class="mb-4" style="font-weight: 800; color: #0F1C2E; margin-left: var(--gap); font-size: 26px;">
|
|
Dashboard
|
|
</h2>
|
|
|
|
{{-- ============================================================
|
|
STAT CARDS — 4 kartu statistik
|
|
Data diambil dari controller: $totalProduk, $totalDilihat,
|
|
$totalStok, $totalKategori
|
|
============================================================ --}}
|
|
<div class="stat-cards-row">
|
|
|
|
{{-- Card 1: Total Produk --}}
|
|
<div class="stat-card">
|
|
<div class="stat-icon icon-produk">
|
|
{{-- Diperbesar: width 72, height 72, stroke-width 3.6 --}}
|
|
<svg width="72" height="72" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="26,6 46,16 46,36 26,46 6,36 6,16 26,6" stroke="#1A2962" stroke-width="3.6"
|
|
stroke-linejoin="round" fill="none" />
|
|
<polyline points="26,6 26,46" stroke="#1A2962" stroke-width="3.6" stroke-linejoin="round" fill="none" />
|
|
<polyline points="6,16 26,26 46,16" stroke="#1A2962" stroke-width="3.6" stroke-linejoin="round"
|
|
fill="none" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Total Produk</span>
|
|
<span class="stat-value">{{ $totalProduk ?? 24 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 2: Total Dilihat --}}
|
|
<div class="stat-card">
|
|
<div class="stat-icon icon-dilihat">
|
|
{{-- Diperbesar: width 72, height 55, stroke-width 3.8 --}}
|
|
<svg width="72" height="55" viewBox="0 0 52 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M2 20C2 20 10 4 26 4C42 4 50 20 50 20C50 20 42 36 26 36C10 36 2 20 2 20Z" stroke="#2D9CDB"
|
|
stroke-width="3.8" stroke-linejoin="round" fill="none" />
|
|
<circle cx="26" cy="20" r="7" stroke="#2D9CDB" stroke-width="3.8" fill="none" />
|
|
<circle cx="26" cy="20" r="3.5" fill="#2D9CDB" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Total Dilihat</span>
|
|
<span class="stat-value">{{ number_format($totalDilihat ?? 5662, 0, ',', '.') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 3: Total Stok Barang --}}
|
|
<div class="stat-card">
|
|
<div class="stat-icon icon-stok">
|
|
{{-- Diperbesar: width 72, height 50, stroke-width 4.5 --}}
|
|
<svg width="72" height="50" viewBox="0 0 52 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="2,30 18,14 28,22 50,4" stroke="#27AE60" stroke-width="4.5" stroke-linecap="round"
|
|
stroke-linejoin="round" fill="none" />
|
|
<polyline points="38,4 50,4 50,16" stroke="#27AE60" stroke-width="4.5" stroke-linecap="round"
|
|
stroke-linejoin="round" fill="none" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Total Stok Barang</span>
|
|
<span class="stat-value">{{ $totalStok ?? 48 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 4: Total Kategori --}}
|
|
<div class="stat-card">
|
|
<div class="stat-icon icon-kategori">
|
|
{{-- Diperbesar: width 60, height 60 (sudah proporsional & tebal dengan sendirinya) --}}
|
|
<svg width="60" height="60" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="4" y="18" width="10" height="22" rx="2" fill="#9B51E0" />
|
|
<rect x="17" y="10" width="10" height="30" rx="2" fill="#9B51E0" />
|
|
<rect x="30" y="22" width="10" height="18" rx="2" fill="#9B51E0" />
|
|
</svg>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Total Kategori</span>
|
|
<span class="stat-value">{{ $totalKategori ?? 4 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>{{-- /stat-cards-row --}}
|
|
|
|
{{-- ============================================================
|
|
TABEL — Produk Paling Sering Dilihat
|
|
Data dari controller: $topProducts (collection)
|
|
============================================================ --}}
|
|
<div class="table-card">
|
|
|
|
<div class="table-card-header">
|
|
<h3 class="table-card-title">Produk Paling Sering Dilihat</h3>
|
|
</div>
|
|
|
|
<table class="dashboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-produk">Produk</th>
|
|
<th class="col-kategori th-kategori">Kategori</th>
|
|
<th class="col-kondisi">Kondisi</th>
|
|
<th class="col-stok th-stok">Sisa Stok</th>
|
|
<th class="col-dilihat">Total Dilihat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
@forelse($topProducts as $product)
|
|
<tr>
|
|
<td class="col-produk">
|
|
<div class="product-cell">
|
|
@php
|
|
// Cek dan ambil gambar pertama jika datanya berupa array
|
|
$gambarUtama = is_array($product['image']) ? $product['image'][0] : $product['image'];
|
|
@endphp
|
|
|
|
<img src="{{ asset('images/' . $gambarUtama) }}" alt="{{ $product['name'] }}"
|
|
class="product-thumb" loading="lazy"
|
|
onerror="this.src='https://placehold.co/70x70/F3F4F6/9CA3AF?text=Img'">
|
|
|
|
<span class="product-name-text">{{ $product['name'] }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="col-kategori td-kategori">{{ $product['category'] }}</td>
|
|
<td class="col-kondisi">
|
|
@if(strtolower($product['status']) === 'new')
|
|
<span class="badge-kondisi badge-new">NEW</span>
|
|
@else
|
|
<span class="badge-kondisi badge-second">SECOND</span>
|
|
@endif
|
|
</td>
|
|
<td class="col-stok td-stok th-stok">{{ $product['stock'] }} Pcs</td>
|
|
<td class="col-dilihat td-dilihat">
|
|
{{ number_format($product['views'], 0, ',', '.') }}
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" style="text-align:center; padding: 40px 20px; color: #9CA3AF; font-size: 14px;">
|
|
Belum ada data produk.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="table-bottom-line"></div>
|
|
|
|
</div>
|
|
@endsection |