+
+ ) : (
+
+ 
+
+
+ {/* Title */}
+
+ {getPageTitle()}
+ + {/* Right Section */} +
+ {/* Dark Mode Toggle */}
+
+
+ {/* User Info */}
+
+
+
+
+ {/* Divider */}
+
+
+ {/* Icons */}
+
+
+ I. B. Surya Prabhawa M...
++ Kepala Desa +
+
+
+
+
+
+
+
+
+ Detail Kinerja Divisi
+
+
+
+
+
+
+
+
+ );
+};
+
+export default KinerjaDivisi;
diff --git a/src/app/components/pengaduan-layanan-publik.tsx b/src/app/components/pengaduan-layanan-publik.tsx
new file mode 100644
index 0000000..287a002
--- /dev/null
+++ b/src/app/components/pengaduan-layanan-publik.tsx
@@ -0,0 +1,412 @@
+import type React from "react";
+import { useState } from "react";
+import { Badge } from "@/app/components/ui/badge";
+import { Button } from "@/app/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/app/components/ui/card";
+import { Input } from "@/app/components/ui/input";
+import { Select } from "@/app/components/ui/select";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/app/components/ui/table";
+import { Textarea } from "@/app/components/ui/textarea";
+
+const PengaduanLayananPublik = () => {
+ const [activeTab, setActiveTab] = useState<"complaints" | "services">(
+ "complaints",
+ );
+ const [newComplaint, setNewComplaint] = useState({
+ title: "",
+ category: "",
+ description: "",
+ });
+
+ // Sample data for complaints
+ const complaints = [
+ {
+ id: 1,
+ title: "Jalan Rusak di Jalan Raya",
+ category: "Infrastruktur",
+ status: "Pending",
+ priority: "High",
+ date: "2024-02-01",
+ reporter: "Bapak Ahmad",
+ },
+ {
+ id: 2,
+ title: "Pemadaman Listrik Berkelanjutan",
+ category: "Utilitas",
+ status: "In Progress",
+ priority: "Medium",
+ date: "2024-02-03",
+ reporter: "Ibu Sari",
+ },
+ {
+ id: 3,
+ title: "Pelayanan Administrasi Lambat",
+ category: "Administrasi",
+ status: "Resolved",
+ priority: "Low",
+ date: "2024-01-28",
+ reporter: "Pak Joko",
+ },
+ {
+ id: 4,
+ title: "Kebersihan Lingkungan",
+ category: "Sanitasi",
+ status: "Pending",
+ priority: "Medium",
+ date: "2024-02-05",
+ reporter: "Bu Dewi",
+ },
+ ];
+
+ // Sample data for public services
+ const services = [
+ {
+ id: 1,
+ name: "Pembuatan KTP",
+ description:
+ "Pelayanan pembuatan Kartu Tanda Penduduk baru atau perpanjangan",
+ status: "Available",
+ category: "Administrasi",
+ lastUpdated: "2024-02-01",
+ },
+ {
+ id: 2,
+ name: "Pembuatan Surat Keterangan Usaha",
+ description: "Surat keterangan untuk keperluan usaha atau perizinan",
+ status: "Available",
+ category: "Administrasi",
+ lastUpdated: "2024-02-02",
+ },
+ {
+ id: 3,
+ name: "Pelayanan Kesehatan",
+ description: "Pelayanan kesehatan dasar di puskesmas desa",
+ status: "Available",
+ category: "Kesehatan",
+ lastUpdated: "2024-01-30",
+ },
+ {
+ id: 4,
+ name: "Program Bantuan Sosial",
+ description:
+ "Informasi dan pendaftaran program bantuan sosial dari pemerintah",
+ status: "Limited",
+ category: "Sosial",
+ lastUpdated: "2024-02-04",
+ },
+ ];
+
+ const handleInputChange = (
+ e: React.ChangeEvent
+
+
+ + Kinerja Divisi +
+
+
+
+
+
+
+
+ Total Divisi
+
+
+
+
+
+
+
+
+ Rata-rata Pencapaian
+
+
+
+
+
+
+
+
+
+ Divisi Melebihi Target
+
+
+
+
+
+
+
+
+
+
+ 5
+ Jumlah divisi aktif
+
+
+
+ 87.4%
+ Target tercapai
+
+
+
+ 2
+ Dari total 5 divisi
+
+
+
+ Grafik Pencapaian Divisi
+
+
+
+
+
+
+
+ Distribusi Anggaran Divisi
+
+
+
+
+
+
+
+ + Grafik pencapaian akan ditampilkan di sini +
+
+
+ + Diagram distribusi anggaran akan ditampilkan di sini +
+
+
+ );
+};
+
+export default PengaduanLayananPublik;
diff --git a/src/app/components/sidebar.tsx b/src/app/components/sidebar.tsx
new file mode 100644
index 0000000..62cc8eb
--- /dev/null
+++ b/src/app/components/sidebar.tsx
@@ -0,0 +1,82 @@
+import { Link, useLocation } from "@tanstack/react-router";
+import { Search } from "lucide-react";
+import { cn } from "./ui/utils";
+
+interface SidebarProps {
+ className?: string;
+}
+
+export function Sidebar({ className }: SidebarProps) {
+ const location = useLocation();
+
+ // Define menu items with their paths
+ const menuItems = [
+ { name: "Beranda", path: "/dashboard" },
+ { name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" },
+ { name: "Pengaduan & Layanan Publik", path: "/dashboard/pengaduan" },
+ { name: "Jenna Analytic", path: "/dashboard/analytic" },
+ { name: "Demografi & Kependudukan", path: "/dashboard/demografi" },
+ { name: "Keuangan & Anggaran", path: "/dashboard/keuangan" },
+ { name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
+ { name: "Sosial", path: "/dashboard/sosial" },
+ { name: "Keamanan", path: "/dashboard/keamanan" },
+ { name: "Bantuan", path: "/dashboard/bantuan" },
+ { name: "Pengaturan", path: "/dashboard/pengaturan" },
+ ];
+
+ return (
+
+
+
+ {activeTab === "complaints" ? (
+ + Pengaduan & Layanan Publik +
+
+
+
+
+
+ {/* Complaint Submission Form */}
+
+ ) : (
+
+
+
+
+ Ajukan Pengaduan
+
+
+
+
+
+
+
+
+ {/* Complaints List */}
+
+
+
+
+ Daftar Pengaduan
+
+
+
+
+
+
+
+
+
+
+
+
+ Layanan Publik Tersedia
+
+
+
+
+
+
+
+
+
+ Statistik Layanan
+
+
+
+
+
+
+ )}
+
+ {services.map((service) => (
+
+
+
+ {service.name}
+
+
+
+
+
+ ))}
+
+ + {service.description} +
+
+
+ {service.status}
+
+
+ {service.category}
+
+
+ + Terakhir diperbarui: {service.lastUpdated} +
+
+
+
+
+ + Jumlah Layanan Tersedia +
++ 12 +
+
+
+ + Layanan Terpopuler +
++ 4 +
+
+
+ + Permintaan Baru +
++ 23 +
+
+ {/* Logo */}
+
+ );
+}
diff --git a/src/app/components/ui/accordion.tsx b/src/app/components/ui/accordion.tsx
new file mode 100644
index 0000000..a7a42da
--- /dev/null
+++ b/src/app/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "./utils";
+
+function Accordion({
+ ...props
+}: React.ComponentProps
+
+
+ {/* Search */}
+
+
+
+ DESA
+
+
+ +
+
+ + Digitalisasi Desa Transparansi Kerja +
+
+
+
+ {/* Menu Items */}
+
+
+
+ {children}
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+