From 663e36bc4b27d5659b81a2351fc23a064a86ad04 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 11 Nov 2025 11:11:21 +0800
Subject: [PATCH] update: dashboard admin

Deskripsi:
- list pelayanan surat
- detail pelayanan surat

No Issues
---
 src/AppRoutes.tsx                             |   5 +
 src/clientRoutes.ts                           |   1 +
 .../pelayanan-surat/detail_pelayanan_page.tsx | 370 ++++++++++
 .../pelayanan-surat/list_pelayanan_page.tsx   |  11 +-
 .../scr/dashboard/pengaduan/detail_page.tsx   | 653 +++++++++---------
 .../scr/dashboard/pengaduan/list_page.tsx     |   4 +-
 6 files changed, 724 insertions(+), 320 deletions(-)
 create mode 100644 src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx

diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
index b083d0e..fc5ebc6 100644
--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@@ -18,6 +18,7 @@ import Home from "./pages/Home";
 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 DetailPelayananPage from "./pages/scr/dashboard/pelayanan-surat/detail_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";
@@ -99,6 +100,10 @@ export default function AppRoutes() {
               path="/scr/dashboard/pelayanan-surat/list-pelayanan"
               element={<ListPelayananPage />}
             />
+            <Route
+              path="/scr/dashboard/pelayanan-surat/detail-pelayanan"
+              element={<DetailPelayananPage />}
+            />
             <Route
               path="/scr/dashboard/pengaduan/list"
               element={<ListPage />}
diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts
index 42ce0b8..b1b098a 100644
--- a/src/clientRoutes.ts
+++ b/src/clientRoutes.ts
@@ -20,6 +20,7 @@ const clientRoutes = {
   "/scr/dashboard/credential/credential": "/scr/dashboard/credential/credential",
   "/scr/dashboard/dashboard-home": "/scr/dashboard/dashboard-home",
   "/scr/dashboard/pelayanan-surat/list-pelayanan": "/scr/dashboard/pelayanan-surat/list-pelayanan",
+  "/scr/dashboard/pelayanan-surat/detail-pelayanan": "/scr/dashboard/pelayanan-surat/detail-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",
diff --git a/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx b/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
new file mode 100644
index 0000000..c088207
--- /dev/null
+++ b/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
@@ -0,0 +1,370 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+  Anchor,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Modal,
+  Stack,
+  Table,
+  Text,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import { useDisclosure, 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 DetailPelayananPage() {
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const id = query.get("id");
+
+  return (
+    <Container size="xl" py="xl" w={"100%"}>
+      <Grid>
+        <Grid.Col span={8}>
+          <Stack gap={"xl"}>
+            <DetailDataPelayanan />
+            <DetailDataHistori />
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={4}>
+          <DetailUserPelayanan />
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
+}
+
+function DetailDataPelayanan() {
+  const [opened, { open, close }] = useDisclosure(false);
+  const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={"Konfirmasi"}
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="sm">
+          {catModal === "tolak" ? (
+            <>
+              <Text>
+                Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
+              </Text>
+
+              <Textarea size="md" minRows={5} />
+              <Group justify="center" grow>
+                <Button variant="light" onClick={close}>
+                  Batal
+                </Button>
+                <Button variant="filled" color="red" onClick={close}>
+                  Tolak
+                </Button>
+              </Group>
+            </>
+          ) : (
+            <>
+              <Text>Anda yakin ingin menerima pengaduan ini?</Text>
+              <Group justify="center" grow>
+                <Button variant="light" onClick={close}>
+                  Batal
+                </Button>
+                <Button variant="filled" color="green" onClick={close}>
+                  Terima
+                </Button>
+              </Group>
+            </>
+          )}
+        </Stack>
+      </Modal>
+
+      <Card
+        radius="md"
+        p="lg"
+        withBorder
+        style={{
+          background:
+            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+          borderColor: "rgba(100,100,100,0.2)",
+          boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+        }}
+      >
+        <Stack gap={"md"}>
+          <Flex align="center" justify="space-between">
+            <Group gap="xs">
+              <Title order={4} c="gray.2">
+                Pelayanan Surat
+              </Title>
+              <Title order={4} c="dimmed">
+                #PGf-2345-33
+              </Title>
+            </Group>
+            <Badge
+              size="xl"
+              variant="light"
+              radius="sm"
+              color={"yellow"}
+              style={{ textTransform: "none" }}
+            >
+              antrian
+            </Badge>
+          </Flex>
+          <Divider my={0} />
+          <Grid>
+            <Grid.Col span={6}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} />
+                    <Text size="md">Judul</Text>
+                  </Group>
+                  <Text size="md" c={"white"}>
+                    Judul Pelayanan Surat
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconMapPin size={20} />
+                    <Text size="md">Lokasi</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconCategory size={20} />
+                    <Text size="md">Kategori</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconPhotoScan size={20} />
+                    <Text size="md">Gambar</Text>
+                  </Group>
+                  <Anchor href="https://mantine.dev/" target="_blank">
+                    Lihat Gambar
+                  </Anchor>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} />
+                    <Text size="md">Detail</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    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.
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconInfoTriangle size={20} />
+                    <Text size="md">Keterangan</Text>
+                  </Group>
+                  <Text size="md" c={"white"}>
+                    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.
+                  </Text>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Group justify="center" grow>
+                <Button
+                  variant="light"
+                  onClick={() => {
+                    setCatModal("tolak");
+                    open();
+                  }}
+                >
+                  Tolak
+                </Button>
+                <Button
+                  variant="filled"
+                  onClick={() => {
+                    setCatModal("terima");
+                    open();
+                  }}
+                >
+                  Terima
+                </Button>
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Card>
+    </>
+  );
+}
+
+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) => (
+    <Table.Tr key={element.name}>
+      <Table.Td>{element.position}</Table.Td>
+      <Table.Td>{element.name}</Table.Td>
+      <Table.Td>{element.symbol}</Table.Td>
+      <Table.Td>{element.mass}</Table.Td>
+    </Table.Tr>
+  ));
+  return (
+    <Card
+      radius="md"
+      p="lg"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        borderColor: "rgba(100,100,100,0.2)",
+        boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="md">
+        <Flex align="center" justify="space-between">
+          <Title order={4} c="gray.2">
+            Histori Pengaduan
+          </Title>
+        </Flex>
+        <Divider my={0} />
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Tanggal</Table.Th>
+              <Table.Th>Deskripsi</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>User</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </Stack>
+    </Card>
+  );
+}
+
+function DetailUserPelayanan() {
+  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 (
+    <Card
+      radius="md"
+      p="lg"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        borderColor: "rgba(100,100,100,0.2)",
+        boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="md">
+        <Flex align="center" justify="space-between">
+          <Flex direction={"column"}>
+            <Title order={4} c="gray.2">
+              Warga
+            </Title>
+          </Flex>
+        </Flex>
+        <Divider my={0} />
+        <Stack gap="md">
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconUser size={20} />
+              <Text size="md">Nama</Text>
+            </Group>
+            <Text size="md" c={"white"}>
+              Amalia Dwi Yustiani
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconMapPin size={20} />
+              <Text size="md">Telepon</Text>
+            </Group>
+            <Text size="md" c="white">
+              08123456789
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconMessageReport size={20} />
+              <Text size="md">Jumlah Pengaduan</Text>
+            </Group>
+            <Text size="md" c="white">
+              10
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconFileCertificate size={20} />
+              <Text size="md">Jumlah Pelayanan Surat</Text>
+            </Group>
+            <Text size="md" c="white">
+              10
+            </Text>
+          </Group>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
diff --git a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx
index 6a5c0aa..db5a160 100644
--- a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx
+++ b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx
@@ -133,6 +133,8 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
     mutate();
   }, [status, value]);
 
+  const navigate = useNavigate();
+
   if (isLoading)
     return (
       <Card
@@ -169,17 +171,13 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
             />
           }
         />
-        {/* <Group justify="flex-end">
-          <Text size="sm">Menampilkan {Number(data?.data?.length) * (page - 1) + 1} – {Math.min(10, Number(data?.data?.length) * page)} dari {Number(data?.data?.length)}</Text>
-          <Pagination total={Number(data?.data?.length)} value={page} onChange={setPage} withPages={false} />
-        </Group> */}
       </Group>
       {list.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
             <IconFileSad size={32} color="gray" />
             <Text c="dimmed" size="sm">
-              No pengaduan have been added yet.
+              No pelayanan surat have been added yet.
             </Text>
           </Stack>
         </Flex>
@@ -196,6 +194,9 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
               borderColor: "rgba(100,100,100,0.2)",
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
+            onClick={() => {
+              navigate(`/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${v.id}`);
+            }}
           >
             <Stack gap="md">
               <Flex align="center" justify="space-between">
diff --git a/src/pages/scr/dashboard/pengaduan/detail_page.tsx b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
index 11fb9a1..dedffa2 100644
--- a/src/pages/scr/dashboard/pengaduan/detail_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
@@ -1,345 +1,370 @@
 import apiFetch from "@/lib/apiFetch";
 import {
-   Anchor,
-   Badge,
-   Button,
-   Card,
-   Container,
-   Divider,
-   Flex,
-   Grid,
-   Group,
-   Modal,
-   Stack,
-   Table,
-   Text,
-   Textarea,
-   Title
+  Anchor,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Modal,
+  Stack,
+  Table,
+  Text,
+  Textarea,
+  Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
-   IconAlignJustified,
-   IconCategory,
-   IconFileCertificate,
-   IconInfoTriangle,
-   IconMapPin,
-   IconMessageReport,
-   IconPhotoScan,
-   IconUser
+  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");
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const id = query.get("id");
 
-   return (
-      <Container size="xl" py="xl" w={"100%"}>
-         <Grid>
-            <Grid.Col span={8}>
-               <Stack gap={"xl"}>
-                  <DetailDataPengaduan />
-                  <DetailDataHistori />
-               </Stack>
-            </Grid.Col>
-            <Grid.Col span={4}>
-               <DetailUserPengaduan />
-            </Grid.Col>
-         </Grid>
-      </Container>
-   );
+  return (
+    <Container size="xl" py="xl" w={"100%"}>
+      <Grid>
+        <Grid.Col span={8}>
+          <Stack gap={"xl"}>
+            <DetailDataPengaduan />
+            <DetailDataHistori />
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={4}>
+          <DetailUserPengaduan />
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
 }
 
 function DetailDataPengaduan() {
-   const [opened, { open, close }] = useDisclosure(false);
-   const [catModal, setCatModal] = useState<'tolak' | 'terima'>('tolak');
+  const [opened, { open, close }] = useDisclosure(false);
+  const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
 
-   return (
-      <>
-         <Modal opened={opened} onClose={close} title={"Konfirmasi"} centered overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}>
-            <Stack gap="sm">
-               {
-                  catModal === 'tolak'
-                     ? (
-                        <>
-                           <Text>Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan</Text>
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={"Konfirmasi"}
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="sm">
+          {catModal === "tolak" ? (
+            <>
+              <Text>
+                Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
+              </Text>
 
-                           <Textarea size="md" minRows={5} />
-                           <Group justify="center" grow>
-                              <Button variant="light" onClick={close}>Batal</Button>
-                              <Button variant="filled" color="red" onClick={close}>Tolak</Button>
-                           </Group>
-                        </>
-                     )
-                     :
-                     (
-                        <>
-                           <Text>Anda yakin ingin menerima pengaduan ini?</Text>
-                           <Group justify="center" grow>
-                              <Button variant="light" onClick={close}>Batal</Button>
-                              <Button variant="filled" color="green" onClick={close}>Terima</Button>
-                           </Group>
-                        </>
-                     )
-               }
+              <Textarea size="md" minRows={5} />
+              <Group justify="center" grow>
+                <Button variant="light" onClick={close}>
+                  Batal
+                </Button>
+                <Button variant="filled" color="red" onClick={close}>
+                  Tolak
+                </Button>
+              </Group>
+            </>
+          ) : (
+            <>
+              <Text>Anda yakin ingin menerima pengaduan ini?</Text>
+              <Group justify="center" grow>
+                <Button variant="light" onClick={close}>
+                  Batal
+                </Button>
+                <Button variant="filled" color="green" onClick={close}>
+                  Terima
+                </Button>
+              </Group>
+            </>
+          )}
+        </Stack>
+      </Modal>
 
-            </Stack>
-         </Modal>
-
-         <Card
-            radius="md"
-            p="lg"
-            withBorder
-            style={{
-               background:
-                  "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
-               borderColor: "rgba(100,100,100,0.2)",
-               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
-            }}
-         >
-            <Stack gap={"md"}>
-               <Flex align="center" justify="space-between">
+      <Card
+        radius="md"
+        p="lg"
+        withBorder
+        style={{
+          background:
+            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+          borderColor: "rgba(100,100,100,0.2)",
+          boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+        }}
+      >
+        <Stack gap={"md"}>
+          <Flex align="center" justify="space-between">
+            <Group gap="xs">
+              <Title order={4} c="gray.2">
+                Pengaduan
+              </Title>
+              <Title order={4} c="dimmed">
+                #PGf-2345-33
+              </Title>
+            </Group>
+            <Badge
+              size="xl"
+              variant="light"
+              radius="sm"
+              color={"yellow"}
+              style={{ textTransform: "none" }}
+            >
+              antrian
+            </Badge>
+          </Flex>
+          <Divider my={0} />
+          <Grid>
+            <Grid.Col span={6}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
-                     <Title order={4} c="gray.2">
-                        Pengaduan
-                     </Title>
-                     <Title order={4} c="dimmed">
-                        #PGf-2345-33
-                     </Title>
+                    <IconAlignJustified size={20} />
+                    <Text size="md">Judul</Text>
                   </Group>
-                  <Badge
-                     size="xl"
-                     variant="light"
-                     radius="sm"
-                     color={"yellow"}
-                     style={{ textTransform: "none" }}
-                  >
-                     antrian
-                  </Badge>
-               </Flex>
-               <Divider my={0} />
-               <Grid>
-                  <Grid.Col span={6}>
-                     <Stack gap="md">
-                        <Flex direction={"column"} justify="flex-start">
-                           <Group gap="xs">
-                              <IconAlignJustified size={20} />
-                              <Text size="md">
-                                 Judul
-                              </Text>
-                           </Group>
-                           <Text size="md" c={"white"}>Judul Pengaduan</Text>
-                        </Flex>
-                        <Flex direction={"column"} justify="flex-start">
-                           <Group gap="xs">
-                              <IconMapPin size={20} />
-                              <Text size="md">
-                                 Lokasi
-                              </Text>
-                           </Group>
-                           <Text size="md" c="white">fwef</Text>
-                        </Flex>
-                     </Stack>
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                     <Stack gap="md">
-                        <Flex direction={"column"} justify="flex-start">
-                           <Group gap="xs">
-                              <IconCategory size={20} />
-                              <Text size="md">
-                                 Kategori
-                              </Text>
-                           </Group>
-                           <Text size="md" c="white">fwef</Text>
-                        </Flex>
-                        <Flex direction={"column"} justify="flex-start">
-                           <Group gap="xs">
-                              <IconPhotoScan size={20} />
-                              <Text size="md">
-                                 Gambar
-                              </Text>
-                           </Group>
-                           <Anchor href="https://mantine.dev/" target="_blank">
-                              Lihat Gambar
-                           </Anchor>
-                        </Flex>
-                     </Stack>
-                  </Grid.Col>
-                  <Grid.Col span={12}>
-                     <Stack gap="md">
-                        <Flex direction={"column"} justify="flex-start">
-                           <Group gap="xs">
-                              <IconAlignJustified size={20} />
-                              <Text size="md">
-                                 Detail
-                              </Text>
-                           </Group>
-                           <Text size="md" c="white">
-                              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.
-                           </Text>
-                        </Flex>
-                        <Flex direction={"column"} justify="flex-start">
-                           <Group gap="xs">
-                              <IconInfoTriangle size={20} />
-                              <Text size="md">
-                                 Keterangan
-                              </Text>
-                           </Group>
-                           <Text size="md" c={"white"}>
-                              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.
-                           </Text>
-                        </Flex>
-                     </Stack>
-                  </Grid.Col>
-                  <Grid.Col span={12}>
-                     <Group justify="center" grow>
-                        <Button variant="light" onClick={() => { setCatModal('tolak'); open() }}>Tolak</Button>
-                        <Button variant="filled" onClick={() => { setCatModal('terima'); open() }}>Terima</Button>
-                     </Group>
-                  </Grid.Col>
-               </Grid>
-            </Stack>
-         </Card>
-      </>
-   );
+                  <Text size="md" c={"white"}>
+                    Judul Pengaduan
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconMapPin size={20} />
+                    <Text size="md">Lokasi</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconCategory size={20} />
+                    <Text size="md">Kategori</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconPhotoScan size={20} />
+                    <Text size="md">Gambar</Text>
+                  </Group>
+                  <Anchor href="https://mantine.dev/" target="_blank">
+                    Lihat Gambar
+                  </Anchor>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} />
+                    <Text size="md">Detail</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    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.
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconInfoTriangle size={20} />
+                    <Text size="md">Keterangan</Text>
+                  </Group>
+                  <Text size="md" c={"white"}>
+                    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.
+                  </Text>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Group justify="center" grow>
+                <Button
+                  variant="light"
+                  onClick={() => {
+                    setCatModal("tolak");
+                    open();
+                  }}
+                >
+                  Tolak
+                </Button>
+                <Button
+                  variant="filled"
+                  onClick={() => {
+                    setCatModal("terima");
+                    open();
+                  }}
+                >
+                  Terima
+                </Button>
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Card>
+    </>
+  );
 }
 
 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 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) => (
-      <Table.Tr key={element.name}>
-         <Table.Td>{element.position}</Table.Td>
-         <Table.Td>{element.name}</Table.Td>
-         <Table.Td>{element.symbol}</Table.Td>
-         <Table.Td>{element.mass}</Table.Td>
-      </Table.Tr>
-   ));
-   return (
-      <Card
-         radius="md"
-         p="lg"
-         withBorder
-         style={{
-            background:
-               "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
-            borderColor: "rgba(100,100,100,0.2)",
-            boxShadow: "0 0 20px rgba(0,255,200,0.08)",
-         }}
-      >
-         <Stack gap="md">
-            <Flex align="center" justify="space-between">
-               <Title order={4} c="gray.2">
-                  Histori Pengaduan
-               </Title>
-            </Flex>
-            <Divider my={0} />
-            <Table>
-               <Table.Thead>
-                  <Table.Tr>
-                     <Table.Th>Tanggal</Table.Th>
-                     <Table.Th>Deskripsi</Table.Th>
-                     <Table.Th>Status</Table.Th>
-                     <Table.Th>User</Table.Th>
-                  </Table.Tr>
-               </Table.Thead>
-               <Table.Tbody>{rows}</Table.Tbody>
-            </Table>
-         </Stack>
-      </Card>
-
-   )
+  const rows = elements.map((element) => (
+    <Table.Tr key={element.name}>
+      <Table.Td>{element.position}</Table.Td>
+      <Table.Td>{element.name}</Table.Td>
+      <Table.Td>{element.symbol}</Table.Td>
+      <Table.Td>{element.mass}</Table.Td>
+    </Table.Tr>
+  ));
+  return (
+    <Card
+      radius="md"
+      p="lg"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        borderColor: "rgba(100,100,100,0.2)",
+        boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="md">
+        <Flex align="center" justify="space-between">
+          <Title order={4} c="gray.2">
+            Histori Pengaduan
+          </Title>
+        </Flex>
+        <Divider my={0} />
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Tanggal</Table.Th>
+              <Table.Th>Deskripsi</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>User</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </Stack>
+    </Card>
+  );
 }
 
 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: "",
-         },
-      }),
-   );
+  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]);
+  useShallowEffect(() => {
+    mutate();
+  }, [status, value]);
 
-   const list = data?.data || [];
+  const list = data?.data || [];
 
-   return (
-      <Card
-         radius="md"
-         p="lg"
-         withBorder
-         style={{
-            background:
-               "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
-            borderColor: "rgba(100,100,100,0.2)",
-            boxShadow: "0 0 20px rgba(0,255,200,0.08)",
-         }}
-      >
-         <Stack gap="md">
-            <Flex align="center" justify="space-between">
-               <Flex direction={"column"}>
-                  <Title order={4} c="gray.2">
-                     Warga
-                  </Title>
-               </Flex>
-            </Flex>
-            <Divider my={0} />
-            <Stack gap="md">
-               <Group justify="space-between" >
-                  <Group gap="xs">
-                     <IconUser size={20} />
-                     <Text size="md">
-                        Nama
-                     </Text>
-                  </Group>
-                  <Text size="md" c={"white"}>Amalia Dwi Yustiani</Text>
-               </Group>
-               <Group justify="space-between" >
-                  <Group gap="xs">
-                     <IconMapPin size={20} />
-                     <Text size="md">
-                        Telepon
-                     </Text>
-                  </Group>
-                  <Text size="md" c="white">08123456789</Text>
-               </Group>
-               <Group justify="space-between" >
-                  <Group gap="xs">
-                     <IconMessageReport size={20} />
-                     <Text size="md">
-                        Jumlah Pengaduan
-                     </Text>
-                  </Group>
-                  <Text size="md" c="white">10</Text>
-               </Group>
-               <Group justify="space-between" >
-                  <Group gap="xs">
-                     <IconFileCertificate size={20} />
-                     <Text size="md">
-                        Jumlah Pelayanan Surat
-                     </Text>
-                  </Group>
-                  <Text size="md" c="white">10</Text>
-               </Group>
-            </Stack>
-         </Stack>
-      </Card>
-   );
+  return (
+    <Card
+      radius="md"
+      p="lg"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        borderColor: "rgba(100,100,100,0.2)",
+        boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="md">
+        <Flex align="center" justify="space-between">
+          <Flex direction={"column"}>
+            <Title order={4} c="gray.2">
+              Warga
+            </Title>
+          </Flex>
+        </Flex>
+        <Divider my={0} />
+        <Stack gap="md">
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconUser size={20} />
+              <Text size="md">Nama</Text>
+            </Group>
+            <Text size="md" c={"white"}>
+              Amalia Dwi Yustiani
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconMapPin size={20} />
+              <Text size="md">Telepon</Text>
+            </Group>
+            <Text size="md" c="white">
+              08123456789
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconMessageReport size={20} />
+              <Text size="md">Jumlah Pengaduan</Text>
+            </Group>
+            <Text size="md" c="white">
+              10
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconFileCertificate size={20} />
+              <Text size="md">Jumlah Pelayanan Surat</Text>
+            </Group>
+            <Text size="md" c="white">
+              10
+            </Text>
+          </Group>
+        </Stack>
+      </Stack>
+    </Card>
+  );
 }
diff --git a/src/pages/scr/dashboard/pengaduan/list_page.tsx b/src/pages/scr/dashboard/pengaduan/list_page.tsx
index a3e94f3..a39ed65 100644
--- a/src/pages/scr/dashboard/pengaduan/list_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/list_page.tsx
@@ -198,7 +198,9 @@ 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}`)}
+            onClick={() =>
+              navigate(`/scr/dashboard/pengaduan/detail?id=${v.id}`)
+            }
           >
             <Stack gap="md">
               <Flex align="center" justify="space-between">