From 89e83d806e2275b7ad39d06a2313ba1c72db7a21 Mon Sep 17 00:00:00 2001 From: amaliadwiy Date: Thu, 6 Nov 2025 17:37:21 +0800 Subject: [PATCH] upd: dashboard Deskripsi: - menu dashboard - tampilan pengaduan list No Issues --- src/AppRoutes.tsx | 33 ++-- src/clientRoutes.ts | 1 + src/pages/dir/dir_page.tsx | 20 +- src/pages/scr/dashboard/dashboard_layout.tsx | 45 ++++- .../scr/dashboard/pengaduan/list_page.tsx | 186 ++++++++++++++++++ 5 files changed, 253 insertions(+), 32 deletions(-) create mode 100644 src/pages/scr/dashboard/pengaduan/list_page.tsx diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx index 14289f7..18589c7 100644 --- a/src/AppRoutes.tsx +++ b/src/AppRoutes.tsx @@ -1,27 +1,28 @@ // ⚡ Auto-generated by generateRoutes.ts — DO NOT EDIT MANUALLY -import { BrowserRouter, Routes, Route } from "react-router-dom"; -import Login from "./pages/Login"; -import DarmasabaLayout from "./pages/darmasaba/darmasaba_layout"; -import FormSuratKeteranganUsaha from "./pages/darmasaba/form_surat_keterangan_usaha"; -import FormSuratKeteranganTidakMampu from "./pages/darmasaba/form_surat_keterangan_tidak_mampu"; +import { BrowserRouter, Route, Routes } from "react-router-dom"; import DarmasabaHome from "./pages/darmasaba/darmasaba_home"; -import FormKartuTandaPenduduk from "./pages/darmasaba/form_kartu_tanda_penduduk"; +import DarmasabaLayout from "./pages/darmasaba/darmasaba_layout"; import FormKartuKeluarga from "./pages/darmasaba/form_kartu_keluarga"; -import FormLaporanSampah from "./pages/darmasaba/form_laporan_sampah"; -import FormSuratKeteranganPenghasilan from "./pages/darmasaba/form_surat_keterangan_penghasilan"; -import FormSuratKeteranganDomisiliOrganisasi from "./pages/darmasaba/form_surat_keterangan_domisili_organisasi"; -import FormSuratKeteranganBelumKawin from "./pages/darmasaba/form_surat_keterangan_belum_kawin"; +import FormKartuTandaPenduduk from "./pages/darmasaba/form_kartu_tanda_penduduk"; import FormKeteranganKelahiran from "./pages/darmasaba/form_keterangan_kelahiran"; -import FormSuratKeteranganTempatUsaha from "./pages/darmasaba/form_surat_keterangan_tempat_usaha"; +import FormLaporanSampah from "./pages/darmasaba/form_laporan_sampah"; +import FormSuratKeteranganBelumKawin from "./pages/darmasaba/form_surat_keterangan_belum_kawin"; +import FormSuratKeteranganDomisiliOrganisasi from "./pages/darmasaba/form_surat_keterangan_domisili_organisasi"; import FormSuratKeteranganKelakuanBaik from "./pages/darmasaba/form_surat_keterangan_kelakuan_baik"; +import FormSuratKeteranganPenghasilan from "./pages/darmasaba/form_surat_keterangan_penghasilan"; +import FormSuratKeteranganTempatUsaha from "./pages/darmasaba/form_surat_keterangan_tempat_usaha"; +import FormSuratKeteranganTidakMampu from "./pages/darmasaba/form_surat_keterangan_tidak_mampu"; +import FormSuratKeteranganUsaha from "./pages/darmasaba/form_surat_keterangan_usaha"; +import DirPage from "./pages/dir/dir_page"; import Home from "./pages/Home"; +import Login from "./pages/Login"; +import NotFound from "./pages/NotFound"; +import ApikeyPage from "./pages/scr/dashboard/apikey/apikey_page"; import CredentialPage from "./pages/scr/dashboard/credential/credential_page"; import DashboardHome from "./pages/scr/dashboard/dashboard_home"; -import ApikeyPage from "./pages/scr/dashboard/apikey/apikey_page"; import DashboardLayout from "./pages/scr/dashboard/dashboard_layout"; +import ListPage from "./pages/scr/dashboard/pengaduan/list_page"; import ScrLayout from "./pages/scr/scr_layout"; -import DirPage from "./pages/dir/dir_page"; -import NotFound from "./pages/NotFound"; export default function AppRoutes() { return ( @@ -92,6 +93,10 @@ export default function AppRoutes() { path="/scr/dashboard/dashboard-home" element={} /> + } + /> } diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts index 6c4d06c..5db3d11 100644 --- a/src/clientRoutes.ts +++ b/src/clientRoutes.ts @@ -19,6 +19,7 @@ const clientRoutes = { "/scr/dashboard": "/scr/dashboard", "/scr/dashboard/credential/credential": "/scr/dashboard/credential/credential", "/scr/dashboard/dashboard-home": "/scr/dashboard/dashboard-home", + "/scr/dashboard/pengaduan/list": "/scr/dashboard/pengaduan/list", "/scr/dashboard/apikey/apikey": "/scr/dashboard/apikey/apikey", "/dir/dir": "/dir/dir", "/*": "/*" diff --git a/src/pages/dir/dir_page.tsx b/src/pages/dir/dir_page.tsx index c28ac42..61d0028 100644 --- a/src/pages/dir/dir_page.tsx +++ b/src/pages/dir/dir_page.tsx @@ -2,16 +2,16 @@ import { Tree } from "@mantine/core"; // ✅ Valid data, all values are unique const data = [ - { - value: 'src', - label: 'src', - children: [ - { value: 'src/components', label: 'components' }, - { value: 'src/hooks', label: 'hooks' }, - ], - }, - { value: 'package.json', label: 'package.json' }, - ]; + { + value: "src", + label: "src", + children: [ + { value: "src/components", label: "components" }, + { value: "src/hooks", label: "hooks" }, + ], + }, + { value: "package.json", label: "package.json" }, +]; export default function DirPage() { return ( diff --git a/src/pages/scr/dashboard/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx index f902969..21c53bb 100644 --- a/src/pages/scr/dashboard/dashboard_layout.tsx +++ b/src/pages/scr/dashboard/dashboard_layout.tsx @@ -1,4 +1,8 @@ -import { useEffect, useState } from "react"; +import { + default as clientRoute, + default as clientRoutes, +} from "@/clientRoutes"; +import apiFetch from "@/lib/apiFetch"; import { ActionIcon, AppShell, @@ -22,17 +26,17 @@ import { IconChevronLeft, IconChevronRight, IconDashboard, + IconFileCertificate, IconKey, IconLock, + IconMessageReport, + IconSettings, IconUser, + IconUsersGroup, } from "@tabler/icons-react"; import type { User } from "generated/prisma"; +import { useEffect, useState } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; -import { - default as clientRoute, - default as clientRoutes, -} from "@/clientRoutes"; -import apiFetch from "@/lib/apiFetch"; function Logout() { return ( @@ -98,7 +102,7 @@ export default function DashboardLayout() { size="lg" style={{ backgroundColor: "rgba(255,255,255,0.05)", - boxShadow: "0 0 6px rgba(0,255,200,0.2)", + boxShadow: "0 0 6px hsla(167, 100%, 50%, 0.20), 0.20)", }} > {opened ? : } @@ -186,7 +190,7 @@ function HostView() { {host.name} - {host.email} + {host.roleId} @@ -219,6 +223,31 @@ function NavigationDashboard() { label: "Dashboard Overview", description: "Quick summary and insights", }, + { + path: "/scr/dashboard/pengaduan/list", + icon: , + label: "Pengaduan Warga", + description: "Manage pengaduan warga", + }, + { + path: "/scr/dashboard/pelayanan", + icon: , + label: "Pelayanan Surat", + description: "Manage pelayanan surat", + }, + { + path: "/scr/dashboard/user", + icon: , + label: "User", + description: "Manage user", + }, + { + path: "/scr/dashboard/setting", + icon: , + label: "Setting", + description: + "Manage setting (category pengaduan dan pelayanan surat, desa, etc)", + }, { path: "/scr/dashboard/apikey/apikey", icon: , diff --git a/src/pages/scr/dashboard/pengaduan/list_page.tsx b/src/pages/scr/dashboard/pengaduan/list_page.tsx new file mode 100644 index 0000000..7682a34 --- /dev/null +++ b/src/pages/scr/dashboard/pengaduan/list_page.tsx @@ -0,0 +1,186 @@ +import apiFetch from "@/lib/apiFetch"; +import { + Badge, + Card, + Container, + Divider, + Flex, + Group, + Stack, + Tabs, + Text, + Title +} from "@mantine/core"; +import { useShallowEffect } from "@mantine/hooks"; +import { showNotification } from "@mantine/notifications"; +import { IconAlignJustified, IconClockHour3, IconMapPin } from "@tabler/icons-react"; +import { useLocation, useNavigate } from "react-router-dom"; +import useSwr from "swr"; +import { proxy, subscribe } from "valtio"; + +const state = proxy({ reload: "" }); +function reloadState() { + state.reload = Math.random().toString(); +} + +export default function PengaduanListPage() { + const { search } = useLocation(); + const query = new URLSearchParams(search); + + const status = query.get("status"); + console.log(status, "status"); + + return ( + + + + + + + ); +} + +function TabListPengaduan({ status }: { status: string }) { + const navigate = useNavigate(); + return ( + + + { navigate("?status=all") }}>Semua + { navigate("?status=antrian") }}>Antrian + { navigate("?status=diterima") }}>Diterima + { navigate("?status=dikerjakan") }}>Dikerjakan + { navigate("?status=ditolak") }}>Ditolak + { navigate("?status=selesai") }}>Selesai + + + ); +} + +function ListPengaduan() { + const { data, mutate, isLoading } = useSwr("/", () => + apiFetch.api.credential.list.get(), + ); + + useShallowEffect(() => { + const unsubscribe = subscribe(state, () => mutate()); + return () => unsubscribe(); + }, []); + + async function handleRemove(id: string) { + try { + await apiFetch.api.credential.rm.delete({ id }); + showNotification({ + color: "teal", + title: "Credential Deleted", + message: "The credential was successfully removed.", + }); + reloadState(); + } catch { + showNotification({ + color: "red", + title: "Error", + message: "Failed to delete credential. Please try again.", + }); + } + } + + if (isLoading) + return ( + + + Loading credentials... + + + ); + + const list = data?.data?.list || []; + + return ( + + + + + + Dompet Hilang + + + + #PGD-061125-001 + + + updated 2 minutes ago + + + + + Antrian + + + + + + + + + Tanggal Aduan + + + + 05 November 2025 + + + + + + + Lokasi + + + + Jalan Darmasaba Raya no 77 + + + + + + + Detail + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, obcaecati. Sint natus culpa temporibus neque quasi expedita ratione, facere optio incidunt quibusdam suscipit nam nemo delectus beatae similique velit obcaecati? + + + + + + ); +}