From ddefbbbbff9b29edb1a9c399de48150f5c836094 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 11 Nov 2025 11:00:54 +0800
Subject: [PATCH 1/5] update: dashboard admin

Deskripsi:
- tampilan detail pengaduan

No Issues
---
 .../scr/dashboard/pengaduan/detail_page.tsx   | 258 ++++++++++--------
 1 file changed, 151 insertions(+), 107 deletions(-)

diff --git a/src/pages/scr/dashboard/pengaduan/detail_page.tsx b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
index a5051fd..11fb9a1 100644
--- a/src/pages/scr/dashboard/pengaduan/detail_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
@@ -2,18 +2,21 @@ 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 { useShallowEffect } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
    IconAlignJustified,
    IconCategory,
@@ -51,115 +54,156 @@ export default function DetailPengaduanPage() {
 }
 
 function DetailDataPengaduan() {
+   const [opened, { open, close }] = useDisclosure(false);
+   const [catModal, setCatModal] = useState<'tolak' | 'terima'>('tolak');
+
    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">
-               <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">
-                           <IconAlignJustified size={20} />
-                           <Text size="md">
-                              Judul
+      <>
+         <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">
+                        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">
+                              <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>
-                        </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
+                        </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>
-                        </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>
-         </Stack>
-      </Card>
+                        </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>
+      </>
    );
 }
 
-- 
2.49.1


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 2/5] 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">
-- 
2.49.1


From 5b0f9b06d8fa1bdd3d523ae73264b44d0d67b771 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 11 Nov 2025 12:01:54 +0800
Subject: [PATCH 3/5] update: dashboard

Deskripsi:
- tampilan list warga
- tampilan detail warga

No Issues
---
 src/AppRoutes.tsx                             |  10 +
 src/clientRoutes.ts                           |   2 +
 src/pages/scr/dashboard/dashboard_layout.tsx  |   6 +-
 .../pelayanan-surat/list_pelayanan_page.tsx   |   4 +-
 .../scr/dashboard/warga/detail_warga_page.tsx | 191 ++++++++++++++++++
 .../scr/dashboard/warga/list_warga_page.tsx   |  97 +++++++++
 6 files changed, 306 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/scr/dashboard/warga/detail_warga_page.tsx
 create mode 100644 src/pages/scr/dashboard/warga/list_warga_page.tsx

diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
index fc5ebc6..de98664 100644
--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@@ -19,6 +19,8 @@ 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 DetailWargaPage from "./pages/scr/dashboard/warga/detail_warga_page";
+import ListWargaPage from "./pages/scr/dashboard/warga/list_warga_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";
@@ -104,6 +106,14 @@ export default function AppRoutes() {
               path="/scr/dashboard/pelayanan-surat/detail-pelayanan"
               element={<DetailPelayananPage />}
             />
+            <Route
+              path="/scr/dashboard/warga/detail-warga"
+              element={<DetailWargaPage />}
+            />
+            <Route
+              path="/scr/dashboard/warga/list-warga"
+              element={<ListWargaPage />}
+            />
             <Route
               path="/scr/dashboard/pengaduan/list"
               element={<ListPage />}
diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts
index b1b098a..6abe3a6 100644
--- a/src/clientRoutes.ts
+++ b/src/clientRoutes.ts
@@ -21,6 +21,8 @@ const clientRoutes = {
   "/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/warga/detail-warga": "/scr/dashboard/warga/detail-warga",
+  "/scr/dashboard/warga/list-warga": "/scr/dashboard/warga/list-warga",
   "/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/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx
index f4241b1..169eeb5 100644
--- a/src/pages/scr/dashboard/dashboard_layout.tsx
+++ b/src/pages/scr/dashboard/dashboard_layout.tsx
@@ -236,10 +236,10 @@ function NavigationDashboard() {
       description: "Manage pelayanan surat",
     },
     {
-      path: "/scr/dashboard/user",
+      path: "/scr/dashboard/warga/list-warga",
       icon: <IconUsersGroup size={20} />,
-      label: "User",
-      description: "Manage user",
+      label: "Warga",
+      description: "Manage warga",
     },
     {
       path: "/scr/dashboard/setting",
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 db5a160..0a6d2bb 100644
--- a/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx
+++ b/src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx
@@ -195,7 +195,9 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
             onClick={() => {
-              navigate(`/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${v.id}`);
+              navigate(
+                `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${v.id}`,
+              );
             }}
           >
             <Stack gap="md">
diff --git a/src/pages/scr/dashboard/warga/detail_warga_page.tsx b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
new file mode 100644
index 0000000..e1b6a2b
--- /dev/null
+++ b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
@@ -0,0 +1,191 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   Avatar,
+   Box,
+   Card,
+   Container,
+   Divider,
+   Flex,
+   Grid,
+   Group,
+   Stack,
+   Table,
+   Text,
+   Title
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+   IconMail,
+   IconMapPin,
+   IconPhone
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import useSwr from "swr";
+
+export default function DetailWargaPage() {
+   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={4}>
+               <DetailWarga />
+            </Grid.Col>
+            <Grid.Col span={8}>
+               <Stack gap={"xl"}>
+                  <DetailDataHistori />
+                  <DetailDataHistori />
+               </Stack>
+            </Grid.Col>
+         </Grid>
+      </Container>
+   );
+}
+
+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 DetailWarga() {
+   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)",
+         }}
+      >
+         <Box
+            style={{
+               backgroundColor: "#f7d86c",
+               height: 100,
+               borderRadius: "12px",
+               position: "relative",
+            }}
+         />
+         <Group>
+            {/* Profile image */}
+            <Avatar
+               src="https://i.pravatar.cc/150?img=32"
+               radius={100}
+               size={90}
+               style={{
+                  position: "absolute",
+                  top: 80,
+                  left: 30,
+                  border: "4px solid white",
+               }}
+            />
+
+            {/* Main content */}
+            <Stack ml={115} gap={4}>
+               <Text fw={700} fz="lg">
+                  Lizbeth Moore
+               </Text>
+               <Text fz="sm" c="dimmed">
+                  Social Media Strategies
+               </Text>
+            </Stack>
+         </Group>
+
+         {/* Contact info */}
+         <Card
+            radius="md"
+            mt="md"
+            p="md"
+            withBorder={false}
+         >
+            <Stack gap="xs">
+               <Group gap="xs">
+                  <IconMail size={18} />
+                  <Text size="sm">lizbeth.moore@email.com</Text>
+               </Group>
+
+               <Group gap="xs">
+                  <IconPhone size={18} />
+                  <Text size="sm">+1 555-7788</Text>
+               </Group>
+
+               <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">Greenway Ave, Los Angeles, CA, USA</Text>
+               </Group>
+            </Stack>
+         </Card>
+      </Card>
+   );
+}
diff --git a/src/pages/scr/dashboard/warga/list_warga_page.tsx b/src/pages/scr/dashboard/warga/list_warga_page.tsx
new file mode 100644
index 0000000..cb34134
--- /dev/null
+++ b/src/pages/scr/dashboard/warga/list_warga_page.tsx
@@ -0,0 +1,97 @@
+import {
+  Button,
+  Card,
+  CloseButton,
+  Container,
+  Divider,
+  Flex,
+  Input,
+  Stack,
+  Table,
+  Title,
+} from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function ListWargaPage() {
+  const navigate = useNavigate();
+  const [value, setValue] = useState("");
+  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.Td>
+        <Button
+          variant="outline"
+          onClick={() => {
+            navigate(
+              `/scr/dashboard/warga/detail-warga?id=${element.position}`,
+            );
+          }}
+        >
+          Detail
+        </Button>
+      </Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <Container size="xl" py="xl" w={"100%"}>
+      <Card
+        radius="lg"
+        p="xl"
+        withBorder
+        style={{
+          background:
+            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        }}
+      >
+        <Stack gap="md">
+          <Flex align="center" justify="space-between">
+            <Title order={3} c="gray.2">
+              List Data Warga
+            </Title>
+            <Input
+              value={value}
+              placeholder="Cari warga..."
+              onChange={(event) => setValue(event.currentTarget.value)}
+              leftSection={<IconSearch size={16} />}
+              rightSectionPointerEvents="all"
+              rightSection={
+                <CloseButton
+                  aria-label="Clear input"
+                  onClick={() => setValue("")}
+                  style={{ display: value ? undefined : "none" }}
+                />
+              }
+            />
+          </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.Th>Aksi</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>{rows}</Table.Tbody>
+          </Table>
+        </Stack>
+      </Card>
+    </Container>
+  );
+}
-- 
2.49.1


From 715a929e13fdc09ffe7246a6a6fa8a17f42f6ef7 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 11 Nov 2025 15:31:00 +0800
Subject: [PATCH 4/5] upd: dashboard admin

Deskripsi:
- tampilan profile;2A
- tampilan list category pengaduan
- tampilan list category pelayanan surat
- tampilan list configurasi desa

No Issues
---
 src/AppRoutes.tsx                             |   5 +
 src/clientRoutes.ts                           |   1 +
 src/pages/scr/dashboard/dashboard_layout.tsx  |   2 +-
 .../dashboard/setting/detail_setting_page.tsx | 150 ++++++++
 .../scr/dashboard/warga/detail_warga_page.tsx | 321 +++++++++---------
 5 files changed, 313 insertions(+), 166 deletions(-)
 create mode 100644 src/pages/scr/dashboard/setting/detail_setting_page.tsx

diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
index de98664..f0b024d 100644
--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@@ -25,6 +25,7 @@ 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 DetailSettingPage from "./pages/scr/dashboard/setting/detail_setting_page";
 import ScrLayout from "./pages/scr/scr_layout";
 import DirPage from "./pages/dir/dir_page";
 import NotFound from "./pages/NotFound";
@@ -126,6 +127,10 @@ export default function AppRoutes() {
               path="/scr/dashboard/apikey/apikey"
               element={<ApikeyPage />}
             />
+            <Route
+              path="/scr/dashboard/setting/detail-setting"
+              element={<DetailSettingPage />}
+            />
           </Route>
         </Route>
         <Route path="/dir/dir" element={<DirPage />} />
diff --git a/src/clientRoutes.ts b/src/clientRoutes.ts
index 6abe3a6..9329ce6 100644
--- a/src/clientRoutes.ts
+++ b/src/clientRoutes.ts
@@ -26,6 +26,7 @@ const clientRoutes = {
   "/scr/dashboard/pengaduan/list": "/scr/dashboard/pengaduan/list",
   "/scr/dashboard/pengaduan/detail": "/scr/dashboard/pengaduan/detail",
   "/scr/dashboard/apikey/apikey": "/scr/dashboard/apikey/apikey",
+  "/scr/dashboard/setting/detail-setting": "/scr/dashboard/setting/detail-setting",
   "/dir/dir": "/dir/dir",
   "/*": "/*"
 } as const;
diff --git a/src/pages/scr/dashboard/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx
index 169eeb5..2fc3115 100644
--- a/src/pages/scr/dashboard/dashboard_layout.tsx
+++ b/src/pages/scr/dashboard/dashboard_layout.tsx
@@ -242,7 +242,7 @@ function NavigationDashboard() {
       description: "Manage warga",
     },
     {
-      path: "/scr/dashboard/setting",
+      path: "/scr/dashboard/setting/detail-setting",
       icon: <IconSettings size={20} />,
       label: "Setting",
       description:
diff --git a/src/pages/scr/dashboard/setting/detail_setting_page.tsx b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
new file mode 100644
index 0000000..ec6e714
--- /dev/null
+++ b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
@@ -0,0 +1,150 @@
+import { Button, Card, Container, Divider, Flex, Grid, Group, Input, NavLink, Stack, Table, Title } from "@mantine/core";
+import { IconCircleOff, IconGauge, IconHome2 } from "@tabler/icons-react";
+import { useLocation } from "react-router-dom";
+
+export default function DetailSettingPage() {
+   const { search } = useLocation();
+   const query = new URLSearchParams(search);
+   const type = query.get("type");
+
+   return (
+      <Container size="xl" py="xl" w={"100%"}>
+         <Grid>
+            <Grid.Col span={3}>
+               <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)",
+                  }}
+               >
+                  <NavLink
+                     href={`?type=profile`}
+                     label="Profile"
+                     leftSection={<IconHome2 size={16} stroke={1.5} />}
+                     active={type === "profile" || !type}
+                  />
+                  <NavLink
+                     href={`?type=cat-pengaduan`}
+                     label="Kategori Pengaduan"
+                     leftSection={<IconGauge size={16} stroke={1.5} />}
+                     active={type === "cat-pengaduan"}
+                  />
+                  <NavLink
+                     href={`?type=cat-pelayanan`}
+                     label="Kategori Pelayanan Surat"
+                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
+                     active={type === "cat-pelayanan"}
+                  />
+                  <NavLink
+                     href={`?type=desa`}
+                     label="Desa"
+                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
+                     active={type === "desa"}
+                  />
+               </Card>
+            </Grid.Col>
+            <Grid.Col span={9}>
+               <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)",
+                  }}
+               >
+                  {type === "cat-pengaduan"
+                     ? <KategoriPengaduanPage />
+                     : type === "cat-pelayanan"
+                        ? <KategoriPengaduanPage />
+                        : type === "desa"
+                           ? <KategoriPengaduanPage />
+                           : <ProfilePage />}
+               </Card>
+            </Grid.Col>
+         </Grid>
+      </Container>
+   );
+}
+
+function ProfilePage() {
+   return (
+      <Stack gap={"md"}>
+         <Flex align="center" justify="space-between">
+            <Title order={4} c="gray.2">
+               Profile Pengguna
+            </Title>
+            <Button variant="light">Edit</Button>
+         </Flex>
+         <Divider my={0} />
+         <Stack gap={"md"}>
+            <Group gap="xl" grow>
+               <Input.Wrapper label="Nama" description="" error="">
+                  <Input value={"Amalia Dwi Yustiani"} readOnly />
+               </Input.Wrapper>
+               <Input.Wrapper label="Phone" description="" error="">
+                  <Input value={"08123456789"} readOnly />
+               </Input.Wrapper>
+            </Group>
+            <Group gap="xl" grow>
+               <Input.Wrapper label="Email" description="" error="">
+                  <Input value={"amaliadwiyustiani@gmail.com"} readOnly />
+               </Input.Wrapper>
+               <Input.Wrapper label="Role" description="" error="">
+                  <Input value={"Admin"} readOnly />
+               </Input.Wrapper>
+            </Group>
+         </Stack>
+      </Stack>
+   )
+}
+
+function KategoriPengaduanPage() {
+   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 (
+      <Stack gap={"md"}>
+         <Flex align="center" justify="space-between">
+            <Title order={4} c="gray.2">
+               Kategori Pengaduan
+            </Title>
+            <Button variant="light">Tambah</Button>
+         </Flex>
+         <Divider my={0} />
+         <Stack gap={"md"}>
+            <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>
+      </Stack>
+   )
+}
diff --git a/src/pages/scr/dashboard/warga/detail_warga_page.tsx b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
index e1b6a2b..a4a3d04 100644
--- a/src/pages/scr/dashboard/warga/detail_warga_page.tsx
+++ b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
@@ -1,191 +1,182 @@
 import apiFetch from "@/lib/apiFetch";
 import {
-   Avatar,
-   Box,
-   Card,
-   Container,
-   Divider,
-   Flex,
-   Grid,
-   Group,
-   Stack,
-   Table,
-   Text,
-   Title
+  Avatar,
+  Box,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Stack,
+  Table,
+  Text,
+  Title,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import {
-   IconMail,
-   IconMapPin,
-   IconPhone
-} from "@tabler/icons-react";
+import { IconMail, IconMapPin, IconPhone } from "@tabler/icons-react";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 import useSwr from "swr";
 
 export default function DetailWargaPage() {
-   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={4}>
-               <DetailWarga />
-            </Grid.Col>
-            <Grid.Col span={8}>
-               <Stack gap={"xl"}>
-                  <DetailDataHistori />
-                  <DetailDataHistori />
-               </Stack>
-            </Grid.Col>
-         </Grid>
-      </Container>
-   );
+  return (
+    <Container size="xl" py="xl" w={"100%"}>
+      <Grid>
+        <Grid.Col span={4}>
+          <DetailWarga />
+        </Grid.Col>
+        <Grid.Col span={8}>
+          <Stack gap={"xl"}>
+            <DetailDataHistori />
+            <DetailDataHistori />
+          </Stack>
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
 }
 
 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 DetailWarga() {
-   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)",
-         }}
-      >
-         <Box
-            style={{
-               backgroundColor: "#f7d86c",
-               height: 100,
-               borderRadius: "12px",
-               position: "relative",
-            }}
-         />
-         <Group>
-            {/* Profile image */}
-            <Avatar
-               src="https://i.pravatar.cc/150?img=32"
-               radius={100}
-               size={90}
-               style={{
-                  position: "absolute",
-                  top: 80,
-                  left: 30,
-                  border: "4px solid white",
-               }}
-            />
+  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)",
+      }}
+    >
+      <Box
+        style={{
+          backgroundColor: "#f7d86c",
+          height: 100,
+          borderRadius: "12px",
+          position: "relative",
+        }}
+      />
+      <Group>
+        {/* Profile image */}
+        <Avatar
+          src="https://i.pravatar.cc/150?img=32"
+          radius={100}
+          size={90}
+          style={{
+            position: "absolute",
+            top: 80,
+            left: 30,
+            border: "4px solid white",
+          }}
+        />
 
-            {/* Main content */}
-            <Stack ml={115} gap={4}>
-               <Text fw={700} fz="lg">
-                  Lizbeth Moore
-               </Text>
-               <Text fz="sm" c="dimmed">
-                  Social Media Strategies
-               </Text>
-            </Stack>
-         </Group>
+        {/* Main content */}
+        <Stack ml={115} gap={4}>
+          <Text fw={700} fz="lg">
+            Lizbeth Moore
+          </Text>
+          <Text fz="sm" c="dimmed">
+            Social Media Strategies
+          </Text>
+        </Stack>
+      </Group>
 
-         {/* Contact info */}
-         <Card
-            radius="md"
-            mt="md"
-            p="md"
-            withBorder={false}
-         >
-            <Stack gap="xs">
-               <Group gap="xs">
-                  <IconMail size={18} />
-                  <Text size="sm">lizbeth.moore@email.com</Text>
-               </Group>
+      {/* Contact info */}
+      <Card radius="md" mt="md" p="md" withBorder={false}>
+        <Stack gap="xs">
+          <Group gap="xs">
+            <IconMail size={18} />
+            <Text size="sm">lizbeth.moore@email.com</Text>
+          </Group>
 
-               <Group gap="xs">
-                  <IconPhone size={18} />
-                  <Text size="sm">+1 555-7788</Text>
-               </Group>
+          <Group gap="xs">
+            <IconPhone size={18} />
+            <Text size="sm">+1 555-7788</Text>
+          </Group>
 
-               <Group gap="xs">
-                  <IconMapPin size={18} />
-                  <Text size="sm">Greenway Ave, Los Angeles, CA, USA</Text>
-               </Group>
-            </Stack>
-         </Card>
+          <Group gap="xs">
+            <IconMapPin size={18} />
+            <Text size="sm">Greenway Ave, Los Angeles, CA, USA</Text>
+          </Group>
+        </Stack>
       </Card>
-   );
+    </Card>
+  );
 }
-- 
2.49.1


From adae0d3db13fbabaf3fba68b5fdd652e70eae536 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 11 Nov 2025 16:52:52 +0800
Subject: [PATCH 5/5] upd: tampil gambar

Deskripsi:
- masih blm bisa

No Issues
---
 .../scr/dashboard/pengaduan/detail_page.tsx   | 29 +++++++++++-
 src/server/lib/seafile.ts                     | 47 +------------------
 src/server/routes/pengaduan_route.ts          | 31 +++++++++++-
 3 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/src/pages/scr/dashboard/pengaduan/detail_page.tsx b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
index dedffa2..5509c67 100644
--- a/src/pages/scr/dashboard/pengaduan/detail_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
@@ -9,6 +9,7 @@ import {
   Flex,
   Grid,
   Group,
+  Image,
   Modal,
   Stack,
   Table,
@@ -56,6 +57,22 @@ export default function DetailPengaduanPage() {
 function DetailDataPengaduan() {
   const [opened, { open, close }] = useDisclosure(false);
   const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [openedModalImage, { open: openModalImage, close: closeModalImage }] =
+    useDisclosure(false);
+
+  async function handleLihatGambar() {
+    const res = await apiFetch.api.pengaduan.image.get({
+      query: {
+        fileName: "57d5ce89-7d18-4244-9f4c-ca21b70adb7e",
+      },
+    });
+    console.error('client',res)
+    // const blob = await res.data?.blob();
+    // setImageSrc(URL.createObjectURL(blob!));
+    // openModalImage();
+  }
+
 
   return (
     <>
@@ -99,6 +116,16 @@ function DetailDataPengaduan() {
         </Stack>
       </Modal>
 
+      <Modal
+        opened={openedModalImage}
+        onClose={closeModalImage}
+        title="Gambar Pengaduan"
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Image src={imageSrc!} />
+      </Modal>
+
       <Card
         radius="md"
         p="lg"
@@ -170,7 +197,7 @@ function DetailDataPengaduan() {
                     <IconPhotoScan size={20} />
                     <Text size="md">Gambar</Text>
                   </Group>
-                  <Anchor href="https://mantine.dev/" target="_blank">
+                  <Anchor href="#" onClick={handleLihatGambar}>
                     Lihat Gambar
                   </Anchor>
                 </Flex>
diff --git a/src/server/lib/seafile.ts b/src/server/lib/seafile.ts
index 65b03ba..5c09a8e 100644
--- a/src/server/lib/seafile.ts
+++ b/src/server/lib/seafile.ts
@@ -225,49 +225,4 @@ export async function downloadFile(config: Config, remoteFile: string, localFile
 export async function getFileLink(config: Config, fileName: string): Promise<string> {
    const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`);
    return `🔗 Link for ${fileName}:\n${(await downloadUrlResponse.text()).replace(/"/g, '')}`
-}
-
-// function showHelp(): void {
-//     return `note - simple CLI for wibu not
-// Usage:
-//   not3 ls                      List files
-//   not3 cat <file>              Show file content
-//   not3 cp <local> [remote]     Upload file
-//   not3 rm <remote>             Remove file
-//   not3 mv <old> <new>          Rename/move file
-//   not3 get <remote> [local]    Download file
-//   not3 link <file>             Get file link/URL
-//   not3 test                    Test API connection
-//   not3 config                  Edit config (~/.note.conf)
-
-// Config (~/.note.conf):
-//   TOKEN=your_seafile_token
-//   REPO=repos/<repo-id>
-//   URL=your_seafile_url/api2
-
-// Version: ${version}`);
-// }
-
-// --- Main ---
-// async function not3(): Promise<void> {
-//     const [cmd, ...args] = process.argv.slice(2);
-//     if (cmd === 'config') return editConfig();
-
-//     const config = await loadConfig();
-//     switch (cmd) {
-//         case 'test': return testConnection(config);
-//         case 'ls': return listFiles(config);
-//         case 'cat': return args[0] ? catFile(config, args[0]) : console.error('Usage: bun note.ts cat <file>');
-//         case 'cp': return args[0] ? uploadFile(config, args[0], args[1]) : console.error('Usage: bun note.ts cp <local_file> [remote_file]');
-//         case 'rm': return args[0] ? removeFile(config, args[0]) : console.error('Usage: bun note.ts rm <remote_file>');
-//         case 'mv': return args[1] ? moveFile(config, args[0]!, args[1]) : console.error('Usage: bun note.ts mv <old_name> <new_name>');
-//         case 'get': return args[0] ? downloadFile(config, args[0], args[1]) : console.error('Usage: bun note.ts get <remote_file> [local_file]');
-//         case 'link': return args[0] ? getFileLink(config, args[0]) : console.error('Usage: bun note.ts link <file>');
-//         default: return showHelp();
-//     }
-// }
-
-// not3().catch((error) => {
-//     console.error('❌ Error:', error);
-//     process.exit(1);
-// });
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/server/routes/pengaduan_route.ts b/src/server/routes/pengaduan_route.ts
index bd3129c..966a033 100644
--- a/src/server/routes/pengaduan_route.ts
+++ b/src/server/routes/pengaduan_route.ts
@@ -6,7 +6,7 @@ import { mimeToExtension } from "../lib/mimetypeToExtension"
 import { generateNoPengaduan } from "../lib/no-pengaduan"
 import { normalizePhoneNumber } from "../lib/normalizePhone"
 import { prisma } from "../lib/prisma"
-import { defaultConfigSF, uploadFile, uploadFileBase64 } from "../lib/seafile"
+import { catFile, defaultConfigSF, testConnection, uploadFile, uploadFileBase64 } from "../lib/seafile"
 
 const PengaduanRoute = new Elysia({
    prefix: "pengaduan",
@@ -487,7 +487,6 @@ const PengaduanRoute = new Elysia({
          consumes: ["multipart/form-data"]
       },
    })
-
    .get("/list", async ({ query }) => {
       const { take, page, search, status } = query
       const skip = !page ? 0 : (Number(page) - 1) * (!take ? 10 : Number(take))
@@ -619,6 +618,34 @@ const PengaduanRoute = new Elysia({
          description: `tool untuk mendapatkan jumlah pengaduan warga`,
       }
    })
+   .get("/image", async ({ query, set }) => {
+      const { fileName } = query
+
+      const connect = await testConnection(defaultConfigSF)
+      console.log({connect})
+
+      const hasil = await catFile(defaultConfigSF, fileName)
+      console.log('hasilnya', hasil)
+      // Tentukan tipe MIME berdasarkan ekstensi
+      const ext = fileName.split(".").pop()?.toLowerCase();
+      const mime =
+         ext === "jpg" || ext === "jpeg"
+            ? "image/jpeg"
+            : ext === "png"
+               ? "image/png"
+               : "application/octet-stream";
+
+      set.headers["Content-Type"] = mime;
+      return new Response(hasil);
+   }, {
+      query: t.Object({
+         fileName: t.String(),
+      }),
+      detail: {
+         summary: "Gambar Pengaduan Warga",
+         description: `tool untuk mendapatkan gambar pengaduan warga`,
+      }
+   })
    ;
 
 export default PengaduanRoute
-- 
2.49.1