ok

src/pages/DashboardPage.js

@@ -0,0 +1,64 @@
+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>
+    );
+}