87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
// src/components/dashboard/Hero.tsx
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<div className="bg-blue-50 rounded-3xl p-8 shadow-sm border border-blue-100 mb-8">
|
|
{/* HEADER */}
|
|
<div className="flex justify-between items-start mb-8">
|
|
<div>
|
|
<p className="text-gray-500 text-lg">
|
|
Selamat datang kembali 👋
|
|
</p>
|
|
|
|
<h1 className="text-5xl font-extrabold text-blue-700 mt-2">
|
|
Dashboard
|
|
</h1>
|
|
</div>
|
|
|
|
{/* PROFILE */}
|
|
<div className="flex items-center gap-3 bg-white rounded-full px-4 py-2 shadow border">
|
|
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
|
|
BU
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-semibold text-black">
|
|
Bu Sari
|
|
</h3>
|
|
<p className="text-gray-500 text-sm">
|
|
Admin
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* STAT CARDS */}
|
|
<div className="grid grid-cols-4 gap-6">
|
|
<div className="bg-white rounded-2xl p-6 shadow border">
|
|
<p className="text-gray-500 mb-2">
|
|
Permintaan Hari Ini
|
|
</p>
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
27
|
|
</h2>
|
|
<p className="text-green-600 mt-2">
|
|
+5 dari kemarin
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl p-6 shadow border">
|
|
<p className="text-gray-500 mb-2">
|
|
Menunggu Persetujuan
|
|
</p>
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
5
|
|
</h2>
|
|
<p className="text-yellow-600 mt-2">
|
|
Perlu tindakan segera
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl p-6 shadow border">
|
|
<p className="text-gray-500 mb-2">
|
|
Total Barang
|
|
</p>
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
48
|
|
</h2>
|
|
<p className="text-green-600 mt-2">
|
|
3 stok hampir habis
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl p-6 shadow border">
|
|
<p className="text-gray-500 mb-2">
|
|
Pengguna Aktif
|
|
</p>
|
|
<h2 className="text-4xl font-bold text-blue-700">
|
|
214
|
|
</h2>
|
|
<p className="text-green-600 mt-2">
|
|
Siswa & petugas
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |