diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
index 74aebc0..b083d0e 100644
--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@@ -19,6 +19,7 @@ import CredentialPage from "./pages/scr/dashboard/credential/credential_page";
import DashboardHome from "./pages/scr/dashboard/dashboard_home";
import ListPelayananPage from "./pages/scr/dashboard/pelayanan-surat/list_pelayanan_page";
import ListPage from "./pages/scr/dashboard/pengaduan/list_page";
+import DetailPage from "./pages/scr/dashboard/pengaduan/detail_page";
import ApikeyPage from "./pages/scr/dashboard/apikey/apikey_page";
import DashboardLayout from "./pages/scr/dashboard/dashboard_layout";
import ScrLayout from "./pages/scr/scr_layout";
@@ -102,6 +103,10 @@ export default function AppRoutes() {
path="/scr/dashboard/pengaduan/list"
element={}
/>
+ }
+ />
}
diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts
index d141a3b..42ce0b8 100644
--- a/src/clientRoutes.ts
+++ b/src/clientRoutes.ts
@@ -21,6 +21,7 @@ const clientRoutes = {
"/scr/dashboard/dashboard-home": "/scr/dashboard/dashboard-home",
"/scr/dashboard/pelayanan-surat/list-pelayanan": "/scr/dashboard/pelayanan-surat/list-pelayanan",
"/scr/dashboard/pengaduan/list": "/scr/dashboard/pengaduan/list",
+ "/scr/dashboard/pengaduan/detail": "/scr/dashboard/pengaduan/detail",
"/scr/dashboard/apikey/apikey": "/scr/dashboard/apikey/apikey",
"/dir/dir": "/dir/dir",
"/*": "/*"
diff --git a/src/pages/scr/dashboard/pengaduan/detail_page.tsx b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
new file mode 100644
index 0000000..a5051fd
--- /dev/null
+++ b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
@@ -0,0 +1,301 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+ Anchor,
+ Badge,
+ Card,
+ Container,
+ Divider,
+ Flex,
+ Grid,
+ Group,
+ Stack,
+ Table,
+ Text,
+ Title
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+ IconAlignJustified,
+ IconCategory,
+ IconFileCertificate,
+ IconInfoTriangle,
+ IconMapPin,
+ IconMessageReport,
+ IconPhotoScan,
+ IconUser
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import useSwr from "swr";
+
+export default function DetailPengaduanPage() {
+ const { search } = useLocation();
+ const query = new URLSearchParams(search);
+ const id = query.get("id");
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function DetailDataPengaduan() {
+ return (
+
+
+
+
+
+ Pengaduan
+
+
+ #PGf-2345-33
+
+
+
+ antrian
+
+
+
+
+
+
+
+
+
+
+ Judul
+
+
+ Judul Pengaduan
+
+
+
+
+
+ Lokasi
+
+
+ fwef
+
+
+
+
+
+
+
+
+
+ Kategori
+
+
+ fwef
+
+
+
+
+
+ Gambar
+
+
+
+ Lihat Gambar
+
+
+
+
+
+
+
+
+
+
+ Detail
+
+
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum, corporis iusto. Suscipit veritatis quas, non nobis fuga, laudantium accusantium tempora sint aliquid architecto totam esse eum excepturi nostrum fugiat ut.
+
+
+
+
+
+
+ Keterangan
+
+
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. At fugiat eligendi nesciunt dolore? Maiores a cumque vitae suscipit incidunt quos beatae modi, vel, id ullam quae voluptas, deserunt quas placeat.
+
+
+
+
+
+
+
+ );
+}
+
+function DetailDataHistori() {
+ const elements = [
+ { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
+ { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
+ { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
+ { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
+ { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
+ ];
+
+ const rows = elements.map((element) => (
+
+ {element.position}
+ {element.name}
+ {element.symbol}
+ {element.mass}
+
+ ));
+ return (
+
+
+
+
+ Histori Pengaduan
+
+
+
+
+
+
+ Tanggal
+ Deskripsi
+ Status
+ User
+
+
+ {rows}
+
+
+
+
+ )
+}
+
+function DetailUserPengaduan() {
+ const [page, setPage] = useState(1);
+ const [value, setValue] = useState("");
+ const { data, mutate, isLoading } = useSwr("/", () =>
+ apiFetch.api.pengaduan.list.get({
+ query: {
+ status,
+ search: value,
+ take: "",
+ page: "",
+ },
+ }),
+ );
+
+ useShallowEffect(() => {
+ mutate();
+ }, [status, value]);
+
+ const list = data?.data || [];
+
+ return (
+
+
+
+
+
+ Warga
+
+
+
+
+
+
+
+
+
+ Nama
+
+
+ Amalia Dwi Yustiani
+
+
+
+
+
+ Telepon
+
+
+ 08123456789
+
+
+
+
+
+ Jumlah Pengaduan
+
+
+ 10
+
+
+
+
+
+ Jumlah Pelayanan Surat
+
+
+ 10
+
+
+
+
+ );
+}
diff --git a/src/pages/scr/dashboard/pengaduan/list_page.tsx b/src/pages/scr/dashboard/pengaduan/list_page.tsx
index 547b79d..a3e94f3 100644
--- a/src/pages/scr/dashboard/pengaduan/list_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/list_page.tsx
@@ -115,7 +115,9 @@ type StatusKey =
| "ditolak"
| "selesai"
| "semua";
+
function ListPengaduan({ status }: { status: StatusKey }) {
+ const navigate = useNavigate();
const [page, setPage] = useState(1);
const [value, setValue] = useState("");
const { data, mutate, isLoading } = useSwr("/", () =>
@@ -196,6 +198,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
borderColor: "rgba(100,100,100,0.2)",
boxShadow: "0 0 20px rgba(0,255,200,0.08)",
}}
+ onClick={() => navigate(`/scr/dashboard/pengaduan/detail?id=${v.id}`)}
>
diff --git a/src/server/routes/pengaduan_route.ts b/src/server/routes/pengaduan_route.ts
index 96f0fa9..bd3129c 100644
--- a/src/server/routes/pengaduan_route.ts
+++ b/src/server/routes/pengaduan_route.ts
@@ -563,6 +563,7 @@ const PengaduanRoute = new Elysia({
const dataFix = data.map((item) => {
return {
noPengaduan: item.noPengaduan,
+ id: item.id,
title: item.title,
detail: item.detail,
status: item.status,