64 lines
2.9 KiB
JavaScript
64 lines
2.9 KiB
JavaScript
import { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import AddDocumentModal from '../components/AddDocumentModal'; // Kita akan buat ini
|
|
|
|
// Data dummy
|
|
const documentTypes = [
|
|
{ name: 'Akta Kelahiran', count: 0 },
|
|
{ name: 'Ijazah', count: 0 },
|
|
{ name: 'KK', count: 0 },
|
|
{ name: 'KTP', count: 6 },
|
|
{ name: 'Polinema', count: 3 },
|
|
{ name: 'Sampul Buku', count: 1 },
|
|
];
|
|
|
|
const StatCard = ({ title, value }) => (
|
|
<div className="bg-gradient-to-br from-blue-500 to-indigo-600 text-white p-6 rounded-2xl shadow-lg">
|
|
<p className="text-sm font-medium opacity-80">{title}</p>
|
|
<p className="text-4xl font-bold mt-2">{value}</p>
|
|
</div>
|
|
);
|
|
|
|
export default function DashboardPage() {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="bg-gray-50 min-h-screen">
|
|
<main className="p-4 sm:p-6 lg:p-8">
|
|
{/* Statistik */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<StatCard title="HARI INI" value="10" />
|
|
<StatCard title="BULAN INI" value="10" />
|
|
<StatCard title="TOTAL KESELURUHAN" value="10" />
|
|
</div>
|
|
|
|
{/* Daftar Jenis Dokumen */}
|
|
<div className="mt-8">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-2xl font-bold text-gray-800">Daftar Jenis Dokumen</h2>
|
|
<button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
+ Tambah Jenis
|
|
</button>
|
|
</div>
|
|
<div className="bg-white rounded-2xl shadow-sm divide-y divide-gray-100">
|
|
{documentTypes.map((doc, index) => (
|
|
<Link key={doc.name} to={`/input-data/${doc.name.toLowerCase().replace(' ', '-')}`} className="flex items-center p-4 hover:bg-gray-50 transition-colors">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold">{index + 1}</div>
|
|
<div className="ml-4 flex-grow">
|
|
<p className="font-semibold text-gray-800">{doc.name}</p>
|
|
<p className="text-sm text-gray-500">{doc.count} data tersedia</p>
|
|
</div>
|
|
{/* Arrow Icon */}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<AddDocumentModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
|
|
</div>
|
|
);
|
|
} |