diff --git a/bun.lock b/bun.lock index bc48f7c..fd5b486 100644 --- a/bun.lock +++ b/bun.lock @@ -54,7 +54,6 @@ "embla-carousel-react": "^8.1.1", "input-otp": "^1.2.1", "lucide-react": "^0.563.0", - "next-themes": "^0.4.6", "openapi-fetch": "^0.15.0", "pino": "^10.3.0", "pino-pretty": "^13.1.3", @@ -1231,8 +1230,6 @@ "neo-async": ["neo-async@2.6.2", "", {}, "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="], - "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="], - "node-abi": ["node-abi@3.87.0", "", { "dependencies": { "semver": "^7.3.5" } }, "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ=="], "node-fetch-native": ["node-fetch-native@1.6.7", "", {}, "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="], diff --git a/package.json b/package.json index 4ed4248..e900a2c 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "embla-carousel-react": "^8.1.1", "input-otp": "^1.2.1", "lucide-react": "^0.563.0", - "next-themes": "^0.4.6", "openapi-fetch": "^0.15.0", "pino": "^10.3.0", "pino-pretty": "^13.1.3", diff --git a/src/app/components/dashboard-card.tsx b/src/app/components/dashboard-card.tsx index b60ddaa..9eaed80 100644 --- a/src/app/components/dashboard-card.tsx +++ b/src/app/components/dashboard-card.tsx @@ -1,4 +1,7 @@ import type { ReactNode } from "react"; +// Import Mantine components directly +import { Group, Text, ThemeIcon, Badge } from "@mantine/core"; +// Import custom Card and its sub-components import { Card } from "./ui/card"; interface DashboardCardProps { @@ -20,24 +23,36 @@ export function DashboardCard({ }: DashboardCardProps) { return ( -
-
-

{title}

-
-

{value}

+ +
+ + {title} + + + + {value} + {badge && ( -
+ {badge} -
+ )} -
- {subtitle &&

{subtitle}

} - {change &&

↗ {change}

} + + {subtitle && ( + + {subtitle} + + )} + {change && ( + + ↗ {change} + + )}
-
+ {icon} -
-
+ + ); } diff --git a/src/app/components/dashboard-content.tsx b/src/app/components/dashboard-content.tsx index d65f14b..82ed46f 100644 --- a/src/app/components/dashboard-content.tsx +++ b/src/app/components/dashboard-content.tsx @@ -15,9 +15,25 @@ import { ResponsiveContainer, XAxis, YAxis, + Tooltip, // Added Tooltip import } from "recharts"; -import { DashboardCard } from "./dashboard-card"; -import { Card } from "./ui/card"; + +// Import Mantine components + +import { + Grid, + Stack, + Group, + Text, + Title, + ActionIcon, + Progress, + Box, + Badge, + ThemeIcon, + Card, // Added for icon containers + useMantineColorScheme, // Add this import +} from "@mantine/core"; const barChartData = [ { month: "Jan", value: 145 }, @@ -51,229 +67,345 @@ const eventData = [ ]; export function DashboardContent() { + const { colorScheme } = useMantineColorScheme(); + const dark = colorScheme === 'dark'; return ( -
+ {/* Stats Cards */} -
- } - /> - } - /> - } - /> - } - badge="87%" - /> -
- - {/* Charts Section */} -
+ + + + + + + Surat Minggu Ini + + + + 99 + + + + 14 baru, 14 diproses + + + 12% dari minggu lalu ↗ +12% + + + + + + + + + + + + + + Pengaduan Aktif + + + + 28 + + + + 14 baru, 14 diproses + + + + + + + + + + + + + + Layanan Selesai + + + + 156 + + + + bulan ini + + + +8% + + + + + + + + + + + + + + Kepuasan Warga + + + + 87.2% + + + + dari 482 responden + + + + + + + 87% + + + + + + {/* Bar Chart */} - -
-
-

- Statistik Pengajuan Surat -

-

- Trend pengajuan surat 6 bulan terakhir -

-
- -
- - - - - - - - - + + + + + + + + {/* Pie Chart */} - -

Tingkat Kepuasan

-

Tingkat kepuasan layanan

- - - - {pieChartData.map((_entry, index) => ( - - ))} - - - -
-
-
- Sangat puas (0%) -
-
-
- Puas (0%) -
-
-
- Cukup (0%) -
-
-
- Kurang (0%) -
-
- -
+ + + + Tingkat Kepuasan + + + Tingkat kepuasan layanan + + + + + {pieChartData.map((_entry, index) => ( + + ))} + + + + + + + + Sangat puas (0%) + + + + Puas (0%) + + + + Cukup (0%) + + + + Kurang (0%) + + + + + {/* Bottom Section */} -
+ {/* Divisi Teraktif */} - -
- - - - - - -

Divisi Teraktif

-
-
- {divisiData.map((divisi, index) => ( -
-
- {divisi.name} - - {divisi.value} Kegiatan - -
-
-
+ + + + {/* Original SVG icon */} + + -
-
- ))} -
- + + + + + + Divisi Teraktif + + + {divisiData.map((divisi, index) => ( + + + + {divisi.name} + + + {divisi.value} Kegiatan + + + + + ))} + + + {/* Kalender */} - -
- -

- Kalender & Kegiatan Mendatang -

-
-
- {eventData.map((event, index) => ( -
-

{event.date}

-

{event.title}

-
- ))} -
- -
+ + + + + Kalender & Kegiatan Mendatang + + + {eventData.map((event, index) => ( + + + {event.date} + + {event.title} + + ))} + + + + {/* APBDes Chart */} - -

Grafik APBDes

-
-
- Belanja -
-
-
+ + + Grafik APBDes + + + + + Belanja + + + + + + Pendapatan + + + + + + Pembangunan + + + + -
+ ); } diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx index 8d74c99..09818d9 100644 --- a/src/app/components/header.tsx +++ b/src/app/components/header.tsx @@ -1,10 +1,22 @@ import { useLocation } from "@tanstack/react-router"; -import { Bell, Moon, Sun, User } from "lucide-react"; -import { useTheme } from "next-themes"; +import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists + +import { + Group, + Text, + Title, + ActionIcon, + Divider, + Avatar, + Box, + Badge, + useMantineColorScheme, +} from "@mantine/core"; export function Header() { const location = useLocation(); - const { theme, setTheme } = useTheme(); + const { colorScheme, toggleColorScheme } = useMantineColorScheme(); + const dark = colorScheme === "dark"; // Define page titles based on route const getPageTitle = () => { @@ -24,7 +36,6 @@ export function Header() { case "/bumdes": return "Bumdes & UMKM Desa"; case "/sosial": - return "Sosial"; case "/keamanan": return "Keamanan"; case "/bantuan": @@ -37,53 +48,61 @@ export function Header() { }; return ( -
-
- {/* Title */} -

{getPageTitle()}

+ + {/* Title */} + {getPageTitle()} - {/* Right Section */} -
- {/* Dark Mode Toggle */} - - - {/* User Info */} -
-
-

I. B. Surya Prabhawa M...

-

- Kepala Desa -

-
-
- -
-
- - {/* Divider */} -
- - {/* Icons */} -
- -
-
-
-
+ + + + + 10 + + + + + ); } diff --git a/src/app/components/sidebar.tsx b/src/app/components/sidebar.tsx index 62cc8eb..df08a63 100644 --- a/src/app/components/sidebar.tsx +++ b/src/app/components/sidebar.tsx @@ -1,6 +1,14 @@ -import { Link, useLocation } from "@tanstack/react-router"; +import { useNavigate, useLocation } from "@tanstack/react-router"; import { Search } from "lucide-react"; -import { cn } from "./ui/utils"; +import { + Stack, + Group, + Text, + Badge, + Input, + NavLink as MantineNavLink, + Box, +} from "@mantine/core"; interface SidebarProps { className?: string; @@ -8,12 +16,13 @@ interface SidebarProps { export function Sidebar({ className }: SidebarProps) { const location = useLocation(); + const navigate = useNavigate(); // 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: "Pengaduan & Layanan Publik", path: "/dashboard/pengaduan-layanan-publik" }, { name: "Jenna Analytic", path: "/dashboard/analytic" }, { name: "Demografi & Kependudukan", path: "/dashboard/demografi" }, { name: "Keuangan & Anggaran", path: "/dashboard/keuangan" }, @@ -25,58 +34,58 @@ export function Sidebar({ className }: SidebarProps) { ]; return ( -
+ {/* Logo */} -
-
-
+ + + DESA -
-
+ + + -
-
-

+ + + Digitalisasi Desa Transparansi Kerja -

-
+ + {/* Search */} -
-
- - -
-
+ + } + styles={{ + input: { + "&::placeholder": { + color: "var(--mantine-color-gray-5)", + }, + }, + }} + /> + {/* Menu Items */} - -
+ + {menuItems.map((item, index) => ( + navigate({ to: item.path })} + label={item.name} + active={location.pathname === item.path} + variant="subtle" + color="blue" + /> + ))} + + ); } diff --git a/src/components/ColorSchemeToggle.tsx b/src/components/ColorSchemeToggle.tsx deleted file mode 100644 index 8cc741f..0000000 --- a/src/components/ColorSchemeToggle.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; - -export function ColorSchemeToggle() { - return ( -
- {/* Placeholder for Color Scheme Toggle */} - Color Scheme Toggle -
- ); -} diff --git a/src/components/DashboardHeader.tsx b/src/components/DashboardHeader.tsx deleted file mode 100644 index c1c53ae..0000000 --- a/src/components/DashboardHeader.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; - -interface DashboardHeaderProps { - toggleSidebar: () => void; - sidebarOpened: boolean; -} - -export function DashboardHeader({ - toggleSidebar, - sidebarOpened, -}: DashboardHeaderProps) { - return ( -
- {/* Placeholder for Dashboard Header content */} - Dashboard Header -
- ); -} diff --git a/src/components/DashboardSidebar.tsx b/src/components/DashboardSidebar.tsx deleted file mode 100644 index ffc2649..0000000 --- a/src/components/DashboardSidebar.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Link, useLocation } from "@tanstack/react-router"; -import { Search } from "lucide-react"; -import { cn } from "./ui/utils"; - -interface SidebarProps { - className?: string; - sidebarOpened: boolean; - closeSidebar: () => void; -} - -export function DashboardSidebar({ - className, - sidebarOpened, - closeSidebar, -}: SidebarProps) { - const location = useLocation(); - - // Define menu items with their paths - const menuItems = [ - { name: "Beranda", path: "/" }, - { name: "Kinerja Divisi", path: "/kinerja-divisi" }, - { name: "Pengaduan & Layanan Publik", path: "/pengaduan" }, - { name: "Jenna Analytic", path: "/analytic" }, - { name: "Demografi & Kependudukan", path: "/demografi" }, - { name: "Keuangan & Anggaran", path: "/keuangan" }, - { name: "Bumdes & UMKM Desa", path: "/bumdes" }, - { name: "Sosial", path: "/sosial" }, - { name: "Keamanan", path: "/keamanan" }, - { name: "Bantuan", path: "/bantuan" }, - { name: "Pengaturan", path: "/pengaturan" }, - ]; - - return ( -
- {/* Logo */} -
-
-
- DESA -
-
- + -
-
-

- Digitalisasi Desa Transparansi Kerja -

-
- - {/* Search */} -
-
- - -
-
- - {/* Menu Items */} - -
- ); -} diff --git a/src/components/dashboard-card.tsx b/src/components/dashboard-card.tsx deleted file mode 100644 index b60ddaa..0000000 --- a/src/components/dashboard-card.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import type { ReactNode } from "react"; -import { Card } from "./ui/card"; - -interface DashboardCardProps { - title: string; - value: string | number; - subtitle?: string; - change?: string; - icon: ReactNode; - badge?: string; -} - -export function DashboardCard({ - title, - value, - subtitle, - change, - icon, - badge, -}: DashboardCardProps) { - return ( - -
-
-

{title}

-
-

{value}

- {badge && ( -
- {badge} -
- )} -
- {subtitle &&

{subtitle}

} - {change &&

↗ {change}

} -
-
- {icon} -
-
- - ); -} diff --git a/src/components/dashboard-content.tsx b/src/components/dashboard-content.tsx deleted file mode 100644 index 3d563fb..0000000 --- a/src/components/dashboard-content.tsx +++ /dev/null @@ -1,286 +0,0 @@ -import { - Calendar, - CheckCircle, - FileText, - MessageCircle, - Users, -} from "lucide-react"; -import { - Bar, - BarChart, - CartesianGrid, - Cell, - Pie, - PieChart, - ResponsiveContainer, - XAxis, - YAxis, -} from "recharts"; -import { ulid } from "ulid"; // Import ulid -import { DashboardCard } from "./dashboard-card"; -import { Card } from "./ui/card"; - -const barChartData = [ - { id: ulid(), month: "Jan", value: 145 }, - { id: ulid(), month: "Feb", value: 165 }, - { id: ulid(), month: "Mar", value: 195 }, - { id: ulid(), month: "Apr", value: 155 }, - { id: ulid(), month: "Mei", value: 205 }, - { id: ulid(), month: "Jun", value: 185 }, -]; - -const pieChartData = [ - { id: ulid(), name: "Puas", value: 25 }, - { id: ulid(), name: "Cukup", value: 25 }, - { id: ulid(), name: "Kurang", value: 25 }, - { id: ulid(), name: "Sangat puas", value: 25 }, -]; - -const COLORS = ["#4E5BA6", "#F4C542", "#8CC63F", "#E57373"]; - -const divisiData = [ - { id: ulid(), name: "Kesejahteraan", value: 37 }, - { id: ulid(), name: "Pemerintahan", value: 26 }, - { id: ulid(), name: "Keuangan", value: 17 }, - { id: ulid(), name: "Sekretaris Desa", value: 15 }, -]; - -const eventData = [ - { id: ulid(), date: "1 Oktober 2025", title: "Hari Kesaktian Pancasila" }, - { id: ulid(), date: "15 Oktober 2025", title: "Davest" }, - { id: ulid(), date: "19 Oktober 2025", title: "Rapat Koordinasi" }, -]; - -export function DashboardContent() { - return ( -
- {/* Stats Cards */} -
- } - /> - } - /> - } - /> - } - badge="87%" - /> -
- - {/* Charts Section */} -
- {/* Bar Chart */} - -
-
-

- Statistik Pengajuan Surat -

-

- Trend pengajuan surat 6 bulan terakhir -

-
- -
- - - - - - - - - - - {/* Pie Chart */} - -

Tingkat Kepuasan

-

Tingkat kepuasan layanan

- - - - {pieChartData.map((_entry, index) => ( - - ))} - - - -
-
-
- Sangat puas (0%) -
-
-
- Puas (0%) -
-
-
- Cukup (0%) -
-
-
- Kurang (0%) -
-
- -
- - {/* Bottom Section */} -
- {/* Divisi Teraktif */} - -
- - Divisi Teraktif Icon - - - - - -

Divisi Teraktif

-
-
- {divisiData.map((divisi) => ( -
-
- {divisi.name} - - {divisi.value} Kegiatan - -
-
-
-
-
- ))} -
- - - {/* Kalender */} - -
- -

- Kalender & Kegiatan Mendatang -

-
-
- {eventData.map((event) => ( -
-

{event.date}

-

{event.title}

-
- ))} -
- -
- - {/* APBDes Chart */} - -

Grafik APBDes

-
-
- Belanja -
-
-
- -
- ); -} diff --git a/src/components/figma/ImageWithFallback.tsx b/src/components/figma/ImageWithFallback.tsx deleted file mode 100644 index f23274b..0000000 --- a/src/components/figma/ImageWithFallback.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type React from "react"; -import { useState } from "react"; - -const ERROR_IMG_SRC = - "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=="; - -export function ImageWithFallback( - props: React.ImgHTMLAttributes, -) { - const [didError, setDidError] = useState(false); - - const handleError = () => { - setDidError(true); - }; - - const { src, alt, style, className, ...rest } = props; - - return didError ? ( -
-
- Failed to load -
-
- ) : ( - {alt} - ); -} diff --git a/src/components/kinerja-divisi.tsx b/src/components/kinerja-divisi.tsx deleted file mode 100644 index c9bdeb8..0000000 --- a/src/components/kinerja-divisi.tsx +++ /dev/null @@ -1,274 +0,0 @@ -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; // Correct import for Button -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Progress } from "@/components/ui/progress"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; - -const KinerjaDivisi = () => { - // Sample data for division performance - const divisions = [ - { - id: 1, - name: "Divisi Teknologi", - target: 95, - achievement: 87, - status: "On Track", - projects: 12, - budget: "Rp 2.5M", - lastUpdate: "2 days ago", - }, - { - id: 2, - name: "Divisi Keuangan", - target: 90, - achievement: 92, - status: "Above Target", - projects: 8, - budget: "Rp 1.8M", - lastUpdate: "1 day ago", - }, - { - id: 3, - name: "Divisi SDM", - target: 85, - achievement: 78, - status: "Needs Attention", - projects: 6, - budget: "Rp 1.2M", - lastUpdate: "3 days ago", - }, - { - id: 4, - name: "Divisi Operasional", - target: 92, - achievement: 89, - status: "On Track", - projects: 15, - budget: "Rp 3.2M", - lastUpdate: "5 hours ago", - }, - { - id: 5, - name: "Divisi Pemasaran", - target: 88, - achievement: 91, - status: "Above Target", - projects: 10, - budget: "Rp 2.1M", - lastUpdate: "1 day ago", - }, - ]; - - return ( -
-
-

- Kinerja Divisi -

-
- - -
-
- -
- - - Total Divisi -
- - Total Divisi Icon - - -
- - -
5
-

Jumlah divisi aktif

- - - - - - - Rata-rata Pencapaian - -
- - - Rata-rata Pencapaian Icon - - - -
- - -
87.4%
-

Target tercapai

- - - - - - - Divisi Melebihi Target - -
- - - Divisi Melebihi Target Icon - - - -
- - -
2
-

Dari total 5 divisi

- - -
- - - - Detail Kinerja Divisi - - - - - - Nama Divisi - Target (%) - Pencapaian (%) - Status - Proyek Aktif - Anggaran - Terakhir Diperbarui - - - - {divisions.map((division) => ( - - - {division.name} - - - {division.target}% - - - {division.achievement}% - - -
- - - {division.status} - -
- - - {division.projects} - - - {division.budget} - - - {division.lastUpdate} - - - ))} - -
- - - -
- - - Grafik Pencapaian Divisi - - -
-

- Grafik pencapaian akan ditampilkan di sini -

-
- - - - - - Distribusi Anggaran Divisi - - -
-

- Diagram distribusi anggaran akan ditampilkan di sini -

-
- - -
-
- ); -}; - -export default KinerjaDivisi; diff --git a/src/components/pengaduan-layanan-publik.tsx b/src/components/pengaduan-layanan-publik.tsx deleted file mode 100644 index 8a3ea95..0000000 --- a/src/components/pengaduan-layanan-publik.tsx +++ /dev/null @@ -1,407 +0,0 @@ -import type React from "react"; -import { useState } from "react"; -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Input } from "@/components/ui/input"; -import { Select } from "@/components/ui/select"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import { Textarea } from "@/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, - ) => { - const { name, value } = e.target; - setNewComplaint((prev) => ({ - ...prev, - [name]: value, - })); - }; - - const handleSelectChange = (value: string | null) => { - setNewComplaint((prev) => ({ - ...prev, - category: value ?? "", // Handle null case, assign empty string if null - })); - }; - - const handleSubmitComplaint = (e: React.FormEvent) => { - e.preventDefault(); - console.log("Submitting complaint:", newComplaint); - // Here you would typically send the complaint to your backend - alert("Pengaduan berhasil dikirim!"); - setNewComplaint({ title: "", category: "", description: "" }); - }; - - return ( -
-
-

- Pengaduan & Layanan Publik -

-
- - -
-
- - {activeTab === "complaints" ? ( -
- {/* Complaint Submission Form */} -
- - - - Ajukan Pengaduan - - - -
-
- - -
- -
- -