121 lines
7.7 KiB
PHP
121 lines
7.7 KiB
PHP
@extends('layouts.user-dashboard')
|
|
|
|
@section('title', 'Dashboard')
|
|
|
|
@section('content')
|
|
<div class="mb-8">
|
|
<h1 class="text-2xl font-bold text-gray-900">Dashboard Anggota</h1>
|
|
<p class="text-sm text-gray-400 mt-1">Selamat datang, {{ auth()->user()->name ?? 'User' }}!</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{{-- Buku Dipinjam --}}
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-primary-100/50 transition-shadow">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center shadow-lg shadow-primary-200">
|
|
<i class="fas fa-book-reader text-white text-lg"></i>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-primary-600 bg-primary-50 px-2 py-1 rounded-full">Aktif</span>
|
|
</div>
|
|
<p class="text-3xl font-black text-gray-900">{{ $buku_dipinjam ?? 0 }}</p>
|
|
<p class="text-xs text-gray-400 font-medium mt-1">Buku Sedang Dipinjam</p>
|
|
</div>
|
|
|
|
{{-- Status Keanggotaan --}}
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-emerald-100/50 transition-shadow">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-200">
|
|
<i class="fas fa-id-badge text-white text-lg"></i>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">Verified</span>
|
|
</div>
|
|
<p class="text-xl font-bold text-gray-900">Aktif</p>
|
|
<p class="text-xs text-gray-400 font-medium mt-1">Status Keanggotaan</p>
|
|
</div>
|
|
|
|
{{-- Informasi --}}
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-amber-100/50 transition-shadow">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl flex items-center justify-center shadow-lg shadow-amber-200">
|
|
<i class="fas fa-bell text-white text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-xl font-bold text-gray-900">-</p>
|
|
<p class="text-xs text-gray-400 font-medium mt-1">Notifikasi Terbaru</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Tabel Riwayat & Tanggungan User --}}
|
|
<div class="mt-10">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-bold text-gray-900">Riwayat & Tanggungan Buku</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
|
@if(isset($peminjaman) && $peminjaman->count() > 0)
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 border-b border-gray-200 text-gray-600 text-sm">
|
|
<th class="py-4 px-6 font-semibold whitespace-nowrap">Judul Buku</th>
|
|
<th class="py-4 px-6 font-semibold whitespace-nowrap">Tanggal Pinjam</th>
|
|
<th class="py-4 px-6 font-semibold whitespace-nowrap">Batas Tanggal</th>
|
|
<th class="py-4 px-6 font-semibold whitespace-nowrap">Total Denda</th>
|
|
<th class="py-4 px-6 font-semibold whitespace-nowrap">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-700 text-sm">
|
|
@foreach($peminjaman as $item)
|
|
@php
|
|
$is_telat = $item->total_denda > 0;
|
|
@endphp
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors {{ $is_telat && $item->status_peminjaman == 'Dipinjam' ? 'bg-red-50/20' : '' }}">
|
|
<td class="py-4 px-6 font-bold text-gray-900 max-w-xs truncate" title="{{ $item->buku->judul ?? '-' }}">
|
|
{{ $item->buku->judul ?? 'Buku Tidak Tersedia' }}
|
|
</td>
|
|
<td class="py-4 px-6">
|
|
{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->translatedFormat('d M Y') }}
|
|
</td>
|
|
<td class="py-4 px-6 font-medium {{ $is_telat && $item->status_peminjaman == 'Dipinjam' ? 'text-red-600' : 'text-gray-700' }}">
|
|
{{ \Carbon\Carbon::parse($item->tanggal_kembali)->translatedFormat('d M Y') }}
|
|
</td>
|
|
<td class="py-4 px-6">
|
|
@if($item->total_denda > 0)
|
|
<span class="text-red-600 font-bold whitespace-nowrap">
|
|
Rp {{ number_format($item->total_denda, 0, ',', '.') }}
|
|
</span>
|
|
@else
|
|
<span class="text-gray-400 font-medium">-</span>
|
|
@endif
|
|
</td>
|
|
<td class="py-4 px-6">
|
|
@if($item->status_peminjaman === 'Dipinjam')
|
|
@if($is_telat)
|
|
<span class="px-3 py-1 bg-red-100 text-red-700 font-bold rounded-full text-xs whitespace-nowrap"><i class="fas fa-exclamation-circle mr-1"></i> Terlambat</span>
|
|
@else
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-700 font-bold rounded-full text-xs whitespace-nowrap">Sedang Dipinjam</span>
|
|
@endif
|
|
@elseif($item->status_peminjaman === 'Dikembalikan')
|
|
<span class="px-3 py-1 bg-green-100 text-green-700 font-bold rounded-full text-xs whitespace-nowrap"><i class="fas fa-check-circle mr-1"></i> Dikembalikan</span>
|
|
@else
|
|
<span class="px-3 py-1 bg-gray-100 text-gray-700 font-bold rounded-full text-xs whitespace-nowrap">{{ $item->status_peminjaman }}</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<div class="p-10 text-center flex flex-col items-center justify-center bg-gray-50/50">
|
|
<div class="w-20 h-20 bg-primary-50 text-primary-300 rounded-full flex items-center justify-center mb-4">
|
|
<i class="fas fa-book-reader text-3xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-1">Peminjaman Kosong</h3>
|
|
<p class="text-gray-500 font-medium">Anda belum memiliki riwayat peminjaman buku.</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endsection
|