upd: dashboard admin

Deskripsi:
- list user
- tambah usr
- delete user

- beserta api

NO Issues

src/App.tsx

@@ -1,7 +1,7 @@
 import "@mantine/core/styles.css";
-import "@mantine/notifications/styles.css";
 import "@mantine/dates/styles.css";
 import { Notifications } from "@mantine/notifications";
+import "@mantine/notifications/styles.css";
 
 import { MantineProvider } from "@mantine/core";
 import AppRoutes from "./AppRoutes";

src/AppRoutes.tsx

@@ -1,28 +1,34 @@
 // ⚡ Auto-generated by generateRoutes.ts — DO NOT EDIT MANUALLY
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import DarmasabaHome from "./pages/darmasaba/darmasaba_home";
-import DarmasabaLayout from "./pages/darmasaba/darmasaba_layout";
-import FormKartuKeluarga from "./pages/darmasaba/form_kartu_keluarga";
-import FormKartuTandaPenduduk from "./pages/darmasaba/form_kartu_tanda_penduduk";
-import FormKeteranganKelahiran from "./pages/darmasaba/form_keterangan_kelahiran";
-import FormLaporanSampah from "./pages/darmasaba/form_laporan_sampah";
-import FormSuratKeteranganBelumKawin from "./pages/darmasaba/form_surat_keterangan_belum_kawin";
-import FormSuratKeteranganDomisiliOrganisasi from "./pages/darmasaba/form_surat_keterangan_domisili_organisasi";
-import FormSuratKeteranganKelakuanBaik from "./pages/darmasaba/form_surat_keterangan_kelakuan_baik";
-import FormSuratKeteranganPenghasilan from "./pages/darmasaba/form_surat_keterangan_penghasilan";
-import FormSuratKeteranganTempatUsaha from "./pages/darmasaba/form_surat_keterangan_tempat_usaha";
-import FormSuratKeteranganTidakMampu from "./pages/darmasaba/form_surat_keterangan_tidak_mampu";
-import FormSuratKeteranganUsaha from "./pages/darmasaba/form_surat_keterangan_usaha";
-import DirPage from "./pages/dir/dir_page";
-import Home from "./pages/Home";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Login from "./pages/Login";
-import NotFound from "./pages/NotFound";
-import ApikeyPage from "./pages/scr/dashboard/apikey/apikey_page";
+import DarmasabaLayout from "./pages/darmasaba/darmasaba_layout";
+import FormSuratKeteranganUsaha from "./pages/darmasaba/form_surat_keterangan_usaha";
+import FormSuratKeteranganTidakMampu from "./pages/darmasaba/form_surat_keterangan_tidak_mampu";
+import DarmasabaHome from "./pages/darmasaba/darmasaba_home";
+import FormKartuTandaPenduduk from "./pages/darmasaba/form_kartu_tanda_penduduk";
+import FormKartuKeluarga from "./pages/darmasaba/form_kartu_keluarga";
+import FormLaporanSampah from "./pages/darmasaba/form_laporan_sampah";
+import FormSuratKeteranganPenghasilan from "./pages/darmasaba/form_surat_keterangan_penghasilan";
+import FormSuratKeteranganDomisiliOrganisasi from "./pages/darmasaba/form_surat_keterangan_domisili_organisasi";
+import FormSuratKeteranganBelumKawin from "./pages/darmasaba/form_surat_keterangan_belum_kawin";
+import FormKeteranganKelahiran from "./pages/darmasaba/form_keterangan_kelahiran";
+import FormSuratKeteranganTempatUsaha from "./pages/darmasaba/form_surat_keterangan_tempat_usaha";
+import FormSuratKeteranganKelakuanBaik from "./pages/darmasaba/form_surat_keterangan_kelakuan_baik";
+import Home from "./pages/Home";
 import CredentialPage from "./pages/scr/dashboard/credential/credential_page";
 import DashboardHome from "./pages/scr/dashboard/dashboard_home";
-import DashboardLayout from "./pages/scr/dashboard/dashboard_layout";
+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";
+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";
 
 export default function AppRoutes() {
   return (
@@ -93,14 +99,38 @@ export default function AppRoutes() {
               path="/scr/dashboard/dashboard-home"
               element={<DashboardHome />}
             />
+            <Route
+              path="/scr/dashboard/pelayanan-surat/list-pelayanan"
+              element={<ListPelayananPage />}
+            />
+            <Route
+              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 />}
             />
+            <Route
+              path="/scr/dashboard/pengaduan/detail"
+              element={<DetailPage />}
+            />
             <Route
               path="/scr/dashboard/apikey/apikey"
               element={<ApikeyPage />}
             />
+            <Route
+              path="/scr/dashboard/setting/detail-setting"
+              element={<DetailSettingPage />}
+            />
           </Route>
         </Route>
         <Route path="/dir/dir" element={<DirPage />} />

src/clientRoutes.ts

@@ -19,8 +19,14 @@ const clientRoutes = {
   "/scr/dashboard": "/scr/dashboard",
   "/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/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",
+  "/scr/dashboard/setting/detail-setting": "/scr/dashboard/setting/detail-setting",
   "/dir/dir": "/dir/dir",
   "/*": "/*"
 } as const;

src/components/DesaSetting.tsx

@@ -0,0 +1,157 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   ActionIcon,
+   Button,
+   Divider,
+   Flex,
+   Group,
+   Input,
+   Modal,
+   Stack,
+   Table,
+   Title,
+   Tooltip
+} from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { IconEdit } from "@tabler/icons-react";
+import { useState } from "react";
+import useSWR from "swr";
+import notification from "./notificationGlobal";
+
+export default function DesaSetting() {
+   const [btnDisable, setBtnDisable] = useState(false);
+   const [btnLoading, setBtnLoading] = useState(false);
+   const [opened, { open, close }] = useDisclosure(false);
+   const { data, mutate, isLoading } = useSWR("/", () =>
+      apiFetch.api["configuration-desa"].list.get(),
+   );
+   const list = data?.data || [];
+   const [dataEdit, setDataEdit] = useState({
+      id: "",
+      value: "",
+      name: "",
+   });
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+   async function handleEdit() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api["configuration-desa"].edit.post(dataEdit);
+         if (res.status === 200) {
+            mutate();
+            close();
+            notification({
+               title: "Success",
+               message: "Your settings have been saved",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to edit configuration",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.log(error);
+         notification({
+            title: "Error",
+            message: "Failed to edit configuration",
+            type: "error",
+         })
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   function chooseEdit({ data }: { data: { id: string, value: string, name: string } }) {
+      setDataEdit(data);
+      open();
+   }
+
+   function onValidation({ kat, value }: { kat: 'value', value: string }) {
+      if (value.length < 1) {
+         setBtnDisable(true);
+      } else {
+         setBtnDisable(false);
+      }
+
+      if (kat === 'value') {
+         setDataEdit({ ...dataEdit, value: value });
+      }
+   }
+
+   useShallowEffect(() => {
+      if (dataEdit.value.length > 0) {
+         setBtnDisable(false);
+      }
+   }, [dataEdit.id]);
+
+   return (
+      <>
+         <Modal
+            opened={opened}
+            onClose={close}
+            title={"Edit"}
+            centered
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="ld">
+               <Input.Wrapper label={dataEdit.name}>
+                  <Input value={dataEdit.value} onChange={(e) => onValidation({ kat: 'value', value: e.target.value })} />
+               </Input.Wrapper>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={close}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" onClick={handleEdit} disabled={btnDisable} loading={btnLoading}>
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+         <Stack gap={"md"}>
+            <Flex align="center" justify="space-between">
+               <Title order={4} c="gray.2">
+                  Pengaturan Desa
+               </Title>
+            </Flex>
+            <Divider my={0} />
+            <Stack gap={"md"}>
+               <Table highlightOnHover>
+                  <Table.Thead>
+                     <Table.Tr>
+                        <Table.Th>Nama</Table.Th>
+                        <Table.Th>Value</Table.Th>
+                        <Table.Th>Aksi</Table.Th>
+                     </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                     {list?.map((v: any) => (
+                        <Table.Tr key={v.id}>
+                           <Table.Td>{v.name}</Table.Td>
+                           <Table.Td>{v.value}</Table.Td>
+                           <Table.Td>
+                              <Tooltip label="Edit Setting">
+                                 <ActionIcon
+                                    variant="light"
+                                    size="sm"
+                                    style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                    onClick={() => chooseEdit({ data: v })}
+                                 >
+                                    <IconEdit size={20} />
+                                 </ActionIcon>
+                              </Tooltip>
+                           </Table.Td>
+                        </Table.Tr>
+                     ))}
+                  </Table.Tbody>
+               </Table>
+            </Stack>
+         </Stack>
+      </>
+   );
+}

src/components/KategoriPengaduan.tsx

@@ -0,0 +1,234 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   ActionIcon,
+   Button,
+   Divider,
+   Flex,
+   Group,
+   Input,
+   Modal,
+   Stack,
+   Table,
+   Title,
+   Tooltip
+} from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { IconEdit, IconPlus } from "@tabler/icons-react";
+import { useState } from "react";
+import useSWR from "swr";
+import notification from "./notificationGlobal";
+
+export default function KategoriPengaduan() {
+   const [btnDisable, setBtnDisable] = useState(true);
+   const [btnLoading, setBtnLoading] = useState(false);
+   const [opened, { open, close }] = useDisclosure(false);
+   const [openedTambah, { open: openTambah, close: closeTambah }] = useDisclosure(false);
+   const { data, mutate, isLoading } = useSWR("/", () =>
+      apiFetch.api.pengaduan.category.get(),
+   );
+   const list = data?.data || [];
+   const [dataEdit, setDataEdit] = useState({
+      id: "",
+      name: "",
+   });
+   const [dataTambah, setDataTambah] = useState("")
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+   async function handleCreate() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.pengaduan.category.create.post({ name: dataTambah });
+         if (res.status === 200) {
+            mutate();
+            closeTambah();
+            setDataTambah("");
+            notification({
+               title: "Success",
+               message: "Your category have been saved",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to create category",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.log(error);
+         notification({
+            title: "Error",
+            message: "Failed to create category",
+            type: "error",
+         })
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   async function handleEdit() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.pengaduan.category.update.post(dataEdit);
+         if (res.status === 200) {
+            mutate();
+            close();
+            notification({
+               title: "Success",
+               message: "Your category have been saved",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to edit category",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.log(error);
+         notification({
+            title: "Error",
+            message: "Failed to edit category",
+            type: "error",
+         })
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   function chooseEdit({ data }: { data: { id: string, value: string, name: string } }) {
+      setDataEdit(data);
+      open();
+   }
+
+   function onValidation({ kat, value, aksi }: { kat: 'name', value: string, aksi: 'edit' | 'tambah' }) {
+      if (value.length < 1) {
+         setBtnDisable(true);
+      } else {
+         setBtnDisable(false);
+      }
+
+      if (kat === 'name') {
+         if (aksi === 'edit') {
+            setDataEdit({ ...dataEdit, name: value });
+         } else {
+            setDataTambah(value);
+         }
+      }
+   }
+
+   useShallowEffect(() => {
+      if (dataEdit.name.length > 0) {
+         setBtnDisable(false);
+      }
+   }, [dataEdit.id]);
+
+   useShallowEffect(() => {
+      if (dataTambah.length > 0) {
+         setBtnDisable(false);
+      }
+   }, [dataTambah]);
+
+   return (
+      <>
+         {/* Modal Edit */}
+         <Modal
+            opened={opened}
+            onClose={close}
+            title={"Edit"}
+            centered
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="ld">
+               <Input.Wrapper label="Edit Kategori">
+                  <Input value={dataEdit.name} onChange={(e) => onValidation({ kat: 'name', value: e.target.value, aksi: 'edit' })} />
+               </Input.Wrapper>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={close}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" onClick={handleEdit} disabled={btnDisable} loading={btnLoading}>
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+         {/* Modal Tambah */}
+         <Modal
+            opened={openedTambah}
+            onClose={closeTambah}
+            title={"Tambah"}
+            centered
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="ld">
+               <Input.Wrapper label="Tambah Kategori">
+                  <Input value={dataTambah} onChange={(e) => onValidation({ kat: 'name', value: e.target.value, aksi: 'tambah' })} />
+               </Input.Wrapper>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={closeTambah}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" onClick={handleCreate} disabled={btnDisable} loading={btnLoading}>
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+
+
+         <Stack gap={"md"}>
+            <Flex align="center" justify="space-between">
+               <Title order={4} c="gray.2">
+                  Kategori Pengaduan
+               </Title>
+               <Tooltip label="Tambah Kategori Pengaduan">
+                  <Button
+                     variant="light"
+                     leftSection={<IconPlus size={20} />}
+                     onClick={openTambah}
+                  >
+                     Tambah
+                  </Button>
+               </Tooltip>
+            </Flex>
+            <Divider my={0} />
+            <Stack gap={"md"}>
+               <Table highlightOnHover>
+                  <Table.Thead>
+                     <Table.Tr>
+                        <Table.Th>Kategori</Table.Th>
+                        <Table.Th>Aksi</Table.Th>
+                     </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                     {list?.map((v: any) => (
+                        <Table.Tr key={v.id}>
+                           <Table.Td>{v.name}</Table.Td>
+                           <Table.Td>
+                              <Tooltip label="Edit Setting">
+                                 <ActionIcon
+                                    variant="light"
+                                    size="sm"
+                                    style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                    onClick={() => chooseEdit({ data: v })}
+                                 >
+                                    <IconEdit size={20} />
+                                 </ActionIcon>
+                              </Tooltip>
+                           </Table.Td>
+                        </Table.Tr>
+                     ))}
+                  </Table.Tbody>
+               </Table>
+            </Stack>
+         </Stack>
+      </>
+   );
+}

src/components/ProfileUser.tsx

@@ -0,0 +1,190 @@
+import apiFetch from "@/lib/apiFetch";
+import { Button, Divider, Flex, Group, Input, Modal, Stack, Title } from "@mantine/core";
+import { useEffect, useState } from "react";
+import notification from "./notificationGlobal";
+
+export default function ProfileUser() {
+   const [opened, setOpened] = useState(false);
+   const [openedPassword, setOpenedPassword] = useState(false);
+   const [pwdBaru, setPwdBaru] = useState("");
+   const [host, setHost] = useState({
+      id: "",
+      name: "",
+      phone: "",
+      roleId: "",
+      email: "",
+   });
+
+   const [error, setError] = useState({
+      name: false,
+      email: false,
+      phone: false,
+   });
+
+   useEffect(() => {
+      async function fetchHost() {
+         const { data } = await apiFetch.api.user.find.get();
+         setHost({
+            id: data?.user?.id ?? "",
+            name: data?.user?.name ?? "",
+            phone: data?.user?.phone ?? "",
+            roleId: data?.user?.roleId ?? "",
+            email: data?.user?.email ?? "",
+         });
+      }
+      fetchHost();
+   }, []);
+
+
+   function onValidation({ kat, value }: { kat: 'name' | 'email' | 'phone', value: string, }) {
+      if (value.length < 1) {
+         setError({ ...error, [kat]: true });
+      } else {
+         setError({ ...error, [kat]: false });
+      }
+
+      setHost({ ...host, [kat]: value });
+   }
+
+   async function handleUpdate() {
+      try {
+         const res = await apiFetch.api.user.update.post(host);
+         if (res.status === 200) {
+            setOpened(false);
+            notification({
+               title: "Success",
+               message: "Your profile have been saved",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to update profile",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.log(error);
+         notification({
+            title: "Error",
+            message: "Failed to update profile",
+            type: "error",
+         })
+      }
+   }
+
+   async function handleUpdatePassword() {
+      try {
+         const res = await apiFetch.api.user["update-password"].post({ password: pwdBaru, id: host.id });
+         if (res.status === 200) {
+            setPwdBaru("");
+            setOpenedPassword(false);
+            notification({
+               title: "Success",
+               message: "Your password have been saved",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to update password",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.log(error);
+         notification({
+            title: "Error",
+            message: "Failed to update password",
+            type: "error",
+         })
+      }
+   }
+
+
+
+   return (
+      <>
+         <Stack gap={"md"}>
+            <Flex align="center" justify="space-between">
+               <Title order={4} c="gray.2">
+                  Profile Pengguna
+               </Title>
+               <Group gap="md">
+                  <Button variant="light" onClick={() => setOpened(true)}>Edit</Button>
+                  <Button variant="light" onClick={() => setOpenedPassword(true)}>Ubah Password</Button>
+               </Group>
+            </Flex>
+            <Divider my={0} />
+            <Stack gap={"md"}>
+               <Group gap="xl" grow>
+                  <Input.Wrapper label="Nama" description="" error="">
+                     <Input value={host?.name ?? ""} readOnly />
+                  </Input.Wrapper>
+                  <Input.Wrapper label="Phone" description="" error="">
+                     <Input value={host?.phone ?? ""} readOnly />
+                  </Input.Wrapper>
+               </Group>
+               <Group gap="xl" grow>
+                  <Input.Wrapper label="Email" description="" error="">
+                     <Input value={host?.email ?? ""} readOnly />
+                  </Input.Wrapper>
+                  <Input.Wrapper label="Role" description="" error="">
+                     <Input value={host?.roleId ?? ""} readOnly />
+                  </Input.Wrapper>
+               </Group>
+            </Stack>
+         </Stack>
+
+         <Modal
+            opened={opened}
+            onClose={() => setOpened(false)}
+            title={"Edit Profile"}
+
+            size={"lg"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap={"md"}>
+               <Input.Wrapper label="Nama" description="" error={error.name ? "Field is required" : ""}>
+                  <Input value={host?.name ?? ""} onChange={(e) => onValidation({ kat: 'name', value: e.target.value })} />
+               </Input.Wrapper>
+               <Input.Wrapper label="Phone" description="" error={error.phone ? "Field is required" : ""}>
+                  <Input value={host?.phone ?? ""} onChange={(e) => onValidation({ kat: 'phone', value: e.target.value })} />
+               </Input.Wrapper>
+               <Input.Wrapper label="Email" description="" error={error.email ? "Field is required" : ""}>
+                  <Input value={host?.email ?? ""} onChange={(e) => onValidation({ kat: 'email', value: e.target.value })} />
+               </Input.Wrapper>
+               <Group grow>
+                  <Button variant="light" onClick={() => setOpened(false)}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" onClick={() => handleUpdate()} disabled={error.name || error.phone || error.email}>
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+         <Modal
+            opened={openedPassword}
+            onClose={() => setOpenedPassword(false)}
+            title={"Ubah Password"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap={"md"}>
+               <Input.Wrapper label="Password Baru" description="">
+                  <Input value={pwdBaru} onChange={(e) => setPwdBaru(e.target.value)} />
+               </Input.Wrapper>
+               <Group grow>
+                  <Button variant="light" onClick={() => setOpenedPassword(false)}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" onClick={() => handleUpdatePassword()} disabled={pwdBaru.length < 1}>
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+      </>
+   )
+}

src/components/UserSetting.tsx

@@ -0,0 +1,365 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   ActionIcon,
+   Button,
+   Divider,
+   Flex,
+   Group,
+   Input,
+   Modal,
+   Select,
+   Stack,
+   Table,
+   Text,
+   Title,
+   Tooltip
+} from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import { useState } from "react";
+import useSWR from "swr";
+import notification from "./notificationGlobal";
+
+export default function UserSetting() {
+   const [btnDisable, setBtnDisable] = useState(true);
+   const [btnLoading, setBtnLoading] = useState(false);
+   const [opened, { open, close }] = useDisclosure(false);
+   const [openedDelete, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+   const [dataDelete, setDataDelete] = useState("")
+   const { data: dataRole, mutate: mutateRole, isLoading: isLoadingRole } = useSWR("user-role", () =>
+      apiFetch.api.user.role.get(),
+   );
+   const [openedTambah, { open: openTambah, close: closeTambah }] = useDisclosure(false);
+   const { data, mutate, isLoading } = useSWR("user-list", () =>
+      apiFetch.api.user.list.get(),
+   );
+   const list = data?.data || [];
+   const listRole = dataRole?.data || [];
+   const [dataEdit, setDataEdit] = useState({
+      id: "",
+      name: "",
+      phone: "",
+      email: "",
+      roleId: "",
+   });
+   const [dataTambah, setDataTambah] = useState({
+      name: "",
+      email: "",
+      roleId: "",
+      password: "",
+      phone: "",
+   })
+   const [error, setError] = useState({
+      name: false,
+      email: false,
+      roleId: false,
+      password: false,
+      phone: false,
+   })
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+   async function handleCreate() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.user.create.post(dataTambah);
+         if (res.status === 200) {
+            mutate();
+            closeTambah();
+            setDataTambah({
+               name: "",
+               email: "",
+               roleId: "",
+               password: "",
+               phone: "",
+            });
+            notification({
+               title: "Success",
+               message: "Your user have been saved",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to create user ",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.error(error);
+         notification({
+            title: "Error",
+            message: "Failed to create user",
+            type: "error",
+         })
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   async function handleEdit() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.pengaduan.category.update.post(dataEdit);
+         if (res.status === 200) {
+            mutate();
+            close();
+            notification({
+               title: "Success",
+               message: "Your category have been saved",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to edit category",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.error(error);
+         notification({
+            title: "Error",
+            message: "Failed to edit category",
+            type: "error",
+         })
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   async function handleDelete() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.user.delete.post({ id: dataDelete });
+         if (res.status === 200) {
+            mutate();
+            closeDelete();
+            notification({
+               title: "Success",
+               message: "Your user have been deleted",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to delete user",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.error(error);
+         notification({
+            title: "Error",
+            message: "Failed to delete user",
+            type: "error",
+         })
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   function chooseEdit({ data }: { data: { id: string, name: string, phone: string, email: string, roleId: string } }) {
+      setDataEdit(data);
+      open();
+   }
+
+   function onValidation({ kat, value, aksi }: { kat: 'name' | 'email' | 'roleId' | 'password' | 'phone', value: string | null, aksi: 'edit' | 'tambah' }) {
+      if (value == null || value.length < 1) {
+         setBtnDisable(true);
+         setError({ ...error, [kat]: true });
+      } else {
+         setBtnDisable(false);
+         setError({ ...error, [kat]: false });
+      }
+
+
+      if (aksi === 'edit') {
+         setDataEdit({ ...dataEdit, [kat]: value });
+      } else {
+         setDataTambah({ ...dataTambah, [kat]: value });
+      }
+   }
+
+   useShallowEffect(() => {
+      if (dataEdit.name.length > 0) {
+         setBtnDisable(false);
+      }
+   }, [dataEdit.id]);
+
+
+   return (
+      <>
+         {/* Modal Edit */}
+         <Modal
+            opened={opened}
+            onClose={close}
+            title={"Edit"}
+            centered
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="ld">
+               <Input.Wrapper label="Edit Kategori">
+                  <Input value={dataEdit.name} onChange={(e) => onValidation({ kat: 'name', value: e.target.value, aksi: 'edit' })} />
+               </Input.Wrapper>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={close}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" onClick={handleEdit} disabled={btnDisable} loading={btnLoading}>
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+         {/* Modal Tambah */}
+         <Modal
+            opened={openedTambah}
+            onClose={closeTambah}
+            title={"Tambah"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="ld">
+               <Input.Wrapper label="Nama" description="" error={error.name ? "Field is required" : ""}>
+                  <Input value={dataTambah.name} onChange={(e) => onValidation({ kat: 'name', value: e.target.value, aksi: 'tambah' })} />
+               </Input.Wrapper>
+               <Select
+                  label="Role"
+                  placeholder="Pilih Role"
+                  data={listRole.map((r: any) => ({
+                     value: r.id,
+                     label: r.name,
+                  }))}
+                  value={dataTambah.roleId || null}
+                  error={error.roleId ? "Field is required" : ""}
+                  onChange={(_value, option) => { onValidation({ kat: 'roleId', value: option?.value, aksi: 'tambah' }) }}
+               />
+               <Input.Wrapper label="Phone" description="">
+                  <Input value={dataTambah.phone} onChange={(e) => onValidation({ kat: 'phone', value: e.target.value, aksi: 'tambah' })} />
+               </Input.Wrapper>
+               <Input.Wrapper label="Email" description="" error={error.email ? "Field is required" : ""}>
+                  <Input value={dataTambah.email} onChange={(e) => onValidation({ kat: 'email', value: e.target.value, aksi: 'tambah' })} />
+               </Input.Wrapper>
+               <Input.Wrapper label="Password" description="" error={error.password ? "Field is required" : ""}>
+                  <Input value={dataTambah.password} onChange={(e) => onValidation({ kat: 'password', value: e.target.value, aksi: 'tambah' })} />
+               </Input.Wrapper>
+
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={closeTambah}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" onClick={handleCreate} disabled={btnDisable || dataTambah.name.length < 1 || dataTambah.email.length < 1 || dataTambah.password.length < 1 || dataTambah.roleId.length < 1 || dataTambah.phone.length < 1} loading={btnLoading}>
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+
+         {/* Modal Delete */}
+         <Modal
+            opened={openedDelete}
+            onClose={closeDelete}
+            title={"Delete"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="md">
+               <Text size="md" color="gray.6">
+                  Apakah anda yakin ingin menghapus user ini?
+               </Text>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={closeDelete}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" color="red" onClick={handleDelete} loading={btnLoading}>
+                     Hapus
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+
+         <Stack gap={"md"}>
+            <Flex align="center" justify="space-between">
+               <Title order={4} c="gray.2">
+                  Daftar User
+               </Title>
+               <Tooltip label="Tambah User">
+                  <Button
+                     variant="light"
+                     leftSection={<IconPlus size={20} />}
+                     onClick={openTambah}
+                  >
+                     Tambah
+                  </Button>
+               </Tooltip>
+            </Flex>
+            <Divider my={0} />
+            <Stack gap={"md"}>
+               <Table highlightOnHover>
+                  <Table.Thead>
+                     <Table.Tr>
+                        <Table.Th>Nama</Table.Th>
+                        <Table.Th>Telepon</Table.Th>
+                        <Table.Th>Email</Table.Th>
+                        <Table.Th>Role</Table.Th>
+                        <Table.Th>Aksi</Table.Th>
+                     </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                     {
+                        list.length > 0 ? (
+                           list?.map((v: any) => (
+                              <Table.Tr key={v.id}>
+                                 <Table.Td>{v.name}</Table.Td>
+                                 <Table.Td>{v.phone}</Table.Td>
+                                 <Table.Td>{v.email}</Table.Td>
+                                 <Table.Td>{v.roleId}</Table.Td>
+                                 <Table.Td>
+                                    <Group>
+                                       <Tooltip label="Edit User">
+                                          <ActionIcon
+                                             variant="light"
+                                             size="sm"
+                                             style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                             onClick={() => chooseEdit({ data: v })}
+                                          >
+                                             <IconEdit size={20} />
+                                          </ActionIcon>
+                                       </Tooltip>
+                                       <Tooltip label="Delete User">
+                                          <ActionIcon
+                                             variant="light"
+                                             size="sm"
+                                             color="red"
+                                             style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                             onClick={() => {
+                                                setDataDelete(v.id)
+                                                openDelete()
+                                             }}
+                                          >
+                                             <IconTrash size={20} />
+                                          </ActionIcon>
+                                       </Tooltip>
+                                    </Group>
+                                 </Table.Td>
+                              </Table.Tr>
+                           ))
+                        ) : (
+                           <Table.Tr>
+                              <Table.Td colSpan={5} align="center">
+                                 Data User Tidak Ditemukan
+                              </Table.Td>
+                           </Table.Tr>
+                        )
+                     }
+                  </Table.Tbody>
+               </Table>
+            </Stack>
+         </Stack>
+      </>
+   );
+}

src/components/notificationGlobal.ts

@@ -0,0 +1,38 @@
+import { showNotification } from "@mantine/notifications";
+
+export default function notification({ title, message, type }: { title: string, message: string, type: "success" | "error" | "warning" | "info" }) {
+   switch (type) {
+      case "success":
+         return showNotification({
+            title,
+            message,
+            color: "green",
+            autoClose: 3000,
+         })
+         break;
+      case "error":
+         return showNotification({
+            title,
+            message,
+            color: "red",
+            autoClose: 3000,
+         })
+         break;
+      case "warning":
+         return showNotification({
+            title,
+            message,
+            color: "orange",
+            autoClose: 3000,
+         })
+         break;
+      case "info":
+         return showNotification({
+            title,
+            message,
+            color: "blue",
+            autoClose: 3000,
+         })
+         break;
+   }
+}

src/index.tsx

@@ -1,3 +1,4 @@
+import cors from "@elysiajs/cors";
 import Swagger from "@elysiajs/swagger";
 import Elysia from "elysia";
 import html from "./index.html";
@@ -12,7 +13,9 @@ import LayananRoute from "./server/routes/layanan_route";
 import { MCPRoute } from "./server/routes/mcp_route";
 import PelayananRoute from "./server/routes/pelayanan_surat_route";
 import PengaduanRoute from "./server/routes/pengaduan_route";
+import TestRoute from "./server/routes/test";
 import UserRoute from "./server/routes/user_route";
+import ConfigurationDesaRoute from "./server/routes/configuration_desa_route";
 
 const Docs = new Elysia({
   tags: ["docs"],
@@ -28,6 +31,8 @@ const Api = new Elysia({
 })
   .use(PengaduanRoute)
   .use(PelayananRoute)
+  .use(ConfigurationDesaRoute)
+  .use(TestRoute)
   .use(apiAuth)
   .use(ApiKeyRoute)
   .use(DarmasabaRoute)
@@ -40,6 +45,13 @@ const app = new Elysia()
   .use(Api)
   .use(Docs)
   .use(Auth)
+  .use(
+    cors({
+      origin: "*",
+      methods: ["GET", "POST", "OPTIONS"],
+      allowedHeaders: ["Content-Type"],
+    }),
+  )
   .get(
     "/.well-known/mcp.json",
     async () => {

src/pages/scr/dashboard/dashboard_layout.tsx

@@ -230,19 +230,19 @@ function NavigationDashboard() {
       description: "Manage pengaduan warga",
     },
     {
-      path: "/scr/dashboard/pelayanan",
+      path: "/scr/dashboard/pelayanan-surat/list-pelayanan",
       icon: <IconFileCertificate size={20} />,
       label: "Pelayanan Surat",
       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",
+      path: "/scr/dashboard/setting/detail-setting",
       icon: <IconSettings size={20} />,
       label: "Setting",
       description:

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>
+  );
+}

src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx

@@ -0,0 +1,274 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+  Badge,
+  Card,
+  CloseButton,
+  Container,
+  Divider,
+  Flex,
+  Group,
+  Input,
+  Stack,
+  Tabs,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+  IconAlignJustified,
+  IconClockHour3,
+  IconFileSad,
+  IconMapPin,
+  IconSearch,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import useSwr from "swr";
+import { proxy } from "valtio";
+
+const state = proxy({ reload: "" });
+function reloadState() {
+  state.reload = Math.random().toString();
+}
+
+export default function PelayananSuratListPage() {
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const status = query.get("status") as StatusKey;
+
+  return (
+    <Container size="xl" py="xl" w={"100%"}>
+      <Stack gap="xl">
+        <TabListPelayananSurat status={status || "semua"} />
+        <ListPelayananSurat status={status || "semua"} />
+      </Stack>
+    </Container>
+  );
+}
+
+function TabListPelayananSurat({ status }: { status: string }) {
+  const navigate = useNavigate();
+  const dataCount = useSwr("/pelayanan-surat/count", () =>
+    apiFetch.api.pengaduan.count.get().then((res) => res.data),
+  );
+
+  return (
+    <Tabs defaultValue={status || "semua"} color="teal">
+      <Tabs.List grow>
+        <Tabs.Tab
+          value="all"
+          onClick={() => {
+            navigate("?status=semua");
+          }}
+        >
+          Semua ({dataCount?.data?.semua || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="antrian"
+          onClick={() => {
+            navigate("?status=antrian");
+          }}
+        >
+          Antrian ({dataCount?.data?.antrian || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="diterima"
+          onClick={() => {
+            navigate("?status=diterima");
+          }}
+        >
+          Diterima ({dataCount?.data?.diterima || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="dikerjakan"
+          onClick={() => {
+            navigate("?status=dikerjakan");
+          }}
+        >
+          Dikerjakan ({dataCount?.data?.dikerjakan || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="selesai"
+          onClick={() => {
+            navigate("?status=selesai");
+          }}
+        >
+          Selesai ({dataCount?.data?.selesai || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="ditolak"
+          onClick={() => {
+            navigate("?status=ditolak");
+          }}
+        >
+          Ditolak ({dataCount?.data?.ditolak || 0})
+        </Tabs.Tab>
+      </Tabs.List>
+    </Tabs>
+  );
+}
+
+type StatusKey =
+  | "antrian"
+  | "diterima"
+  | "dikerjakan"
+  | "ditolak"
+  | "selesai"
+  | "semua";
+function ListPelayananSurat({ status }: { status: StatusKey }) {
+  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 navigate = useNavigate();
+
+  if (isLoading)
+    return (
+      <Card
+        radius="lg"
+        p="xl"
+        withBorder
+        style={{
+          background:
+            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        }}
+      >
+        <Text size="sm" c="dimmed">
+          Loading pengaduan...
+        </Text>
+      </Card>
+    );
+
+  const list = data?.data || [];
+
+  return (
+    <Stack gap="xl">
+      <Group grow>
+        <Input
+          value={value}
+          placeholder="Cari pengaduan..."
+          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" }}
+            />
+          }
+        />
+      </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 pelayanan surat have been added yet.
+            </Text>
+          </Stack>
+        </Flex>
+      ) : (
+        list.map((v: any) => (
+          <Card
+            key={v.id}
+            radius="lg"
+            p="xl"
+            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)",
+            }}
+            onClick={() => {
+              navigate(
+                `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${v.id}`,
+              );
+            }}
+          >
+            <Stack gap="md">
+              <Flex align="center" justify="space-between">
+                <Flex direction={"column"}>
+                  <Title order={3} c="gray.2">
+                    {v.title}
+                  </Title>
+                  <Group>
+                    <Title order={6} c="gray.5">
+                      #{v.noPengaduan}
+                    </Title>
+                    <Text size="sm" c="dimmed">
+                      {v.updatedAt}
+                    </Text>
+                  </Group>
+                </Flex>
+                <Badge
+                  size="xl"
+                  variant="light"
+                  radius="sm"
+                  color={
+                    v.status === "diterima"
+                      ? "green"
+                      : v.status === "ditolak"
+                        ? "red"
+                        : v.status === "selesai"
+                          ? "blue"
+                          : v.status === "dikerjakan"
+                            ? "purple"
+                            : "yellow"
+                  }
+                  style={{ textTransform: "none" }}
+                >
+                  {v.status}
+                </Badge>
+              </Flex>
+              <Divider my={0} />
+              <Stack gap="sm">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconClockHour3 size={20} color="white" />
+                    <Text size="md" c="white">
+                      Tanggal Aduan
+                    </Text>
+                  </Group>
+                  <Text size="md">{v.createdAt}</Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconMapPin size={20} color="white" />
+                    <Text size="md" c="white">
+                      Lokasi
+                    </Text>
+                  </Group>
+                  <Text size="md">{v.location}</Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} color="white" />
+                    <Text size="md" c="white">
+                      Detail
+                    </Text>
+                  </Group>
+                  <Text size="md">{v.detail}</Text>
+                </Flex>
+              </Stack>
+            </Stack>
+          </Card>
+        ))
+      )}
+    </Stack>
+  );
+}

src/pages/scr/dashboard/pengaduan/detail_page.tsx

@@ -0,0 +1,397 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+  Anchor,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  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 DetailPengaduanPage() {
+  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>
+  );
+}
+
+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 (
+    <>
+      <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>
+
+      <Modal
+        opened={openedModalImage}
+        onClose={closeModalImage}
+        title="Gambar Pengaduan"
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Image src={imageSrc!} />
+      </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="#" onClick={handleLihatGambar}>
+                    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 DetailUserPengaduan() {
+  const [page, setPage] = useState(1);
+  const [value, setValue] = useState("");
+  const { data, mutate, isLoading } = useSwr("/", () =>
+    apiFetch.api.pengaduan.list.get({
+      query: {
+        status,
+        search: value,
+        take: "",
+        page: "",
+      },
+    }),
+  );
+
+  useShallowEffect(() => {
+    mutate();
+  }, [status, value]);
+
+  const list = data?.data || [];
+
+  return (
+    <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>
+  );
+}

src/pages/scr/dashboard/pengaduan/list_page.tsx

@@ -2,21 +2,29 @@ import apiFetch from "@/lib/apiFetch";
 import {
   Badge,
   Card,
+  CloseButton,
   Container,
   Divider,
   Flex,
   Group,
+  Input,
   Stack,
   Tabs,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { showNotification } from "@mantine/notifications";
-import { IconAlignJustified, IconClockHour3, IconMapPin } from "@tabler/icons-react";
+import {
+  IconAlignJustified,
+  IconClockHour3,
+  IconFileSad,
+  IconMapPin,
+  IconSearch,
+} from "@tabler/icons-react";
+import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import useSwr from "swr";
-import { proxy, subscribe } from "valtio";
+import { proxy } from "valtio";
 
 const state = proxy({ reload: "" });
 function reloadState() {
@@ -26,19 +34,13 @@ function reloadState() {
 export default function PengaduanListPage() {
   const { search } = useLocation();
   const query = new URLSearchParams(search);
-
-  const status = query.get("status");
-  console.log(status, "status");
+  const status = query.get("status") as StatusKey;
 
   return (
-    <Container
-      size="xl"
-      py="xl"
-      w={"100%"}
-    >
+    <Container size="xl" py="xl" w={"100%"}>
       <Stack gap="xl">
-        <TabListPengaduan status={status || "all"} />
-        <ListPengaduan />
+        <TabListPengaduan status={status || "semua"} />
+        <ListPengaduan status={status || "semua"} />
       </Stack>
     </Container>
   );
@@ -46,47 +48,92 @@ export default function PengaduanListPage() {
 
 function TabListPengaduan({ status }: { status: string }) {
   const navigate = useNavigate();
+  const dataCount = useSwr("/pengaduan/count", () =>
+    apiFetch.api.pengaduan.count.get().then((res) => res.data),
+  );
+
   return (
-    <Tabs defaultValue={status || "all"} color="teal">
+    <Tabs defaultValue={status || "semua"} color="teal">
       <Tabs.List grow>
-        <Tabs.Tab value="all" onClick={() => { navigate("?status=all") }}>Semua</Tabs.Tab>
-        <Tabs.Tab value="antrian" onClick={() => { navigate("?status=antrian") }}>Antrian</Tabs.Tab>
-        <Tabs.Tab value="diterima" onClick={() => { navigate("?status=diterima") }}>Diterima</Tabs.Tab>
-        <Tabs.Tab value="dikerjakan" onClick={() => { navigate("?status=dikerjakan") }}>Dikerjakan</Tabs.Tab>
-        <Tabs.Tab value="ditolak" onClick={() => { navigate("?status=ditolak") }}>Ditolak</Tabs.Tab>
-        <Tabs.Tab value="selesai" onClick={() => { navigate("?status=selesai") }}>Selesai</Tabs.Tab>
+        <Tabs.Tab
+          value="all"
+          onClick={() => {
+            navigate("?status=semua");
+          }}
+        >
+          Semua ({dataCount?.data?.semua || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="antrian"
+          onClick={() => {
+            navigate("?status=antrian");
+          }}
+        >
+          Antrian ({dataCount?.data?.antrian || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="diterima"
+          onClick={() => {
+            navigate("?status=diterima");
+          }}
+        >
+          Diterima ({dataCount?.data?.diterima || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="dikerjakan"
+          onClick={() => {
+            navigate("?status=dikerjakan");
+          }}
+        >
+          Dikerjakan ({dataCount?.data?.dikerjakan || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="selesai"
+          onClick={() => {
+            navigate("?status=selesai");
+          }}
+        >
+          Selesai ({dataCount?.data?.selesai || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="ditolak"
+          onClick={() => {
+            navigate("?status=ditolak");
+          }}
+        >
+          Ditolak ({dataCount?.data?.ditolak || 0})
+        </Tabs.Tab>
       </Tabs.List>
     </Tabs>
   );
 }
 
-function ListPengaduan() {
+type StatusKey =
+  | "antrian"
+  | "diterima"
+  | "dikerjakan"
+  | "ditolak"
+  | "selesai"
+  | "semua";
+
+function ListPengaduan({ status }: { status: StatusKey }) {
+  const navigate = useNavigate();
+  const [page, setPage] = useState(1);
+  const [value, setValue] = useState("");
   const { data, mutate, isLoading } = useSwr("/", () =>
-    apiFetch.api.credential.list.get(),
+    apiFetch.api.pengaduan.list.get({
+      query: {
+        status,
+        search: value,
+        take: "",
+        page: "",
+      },
+    }),
   );
 
   useShallowEffect(() => {
-    const unsubscribe = subscribe(state, () => mutate());
-    return () => unsubscribe();
-  }, []);
-
-  async function handleRemove(id: string) {
-    try {
-      await apiFetch.api.credential.rm.delete({ id });
-      showNotification({
-        color: "teal",
-        title: "Credential Deleted",
-        message: "The credential was successfully removed.",
-      });
-      reloadState();
-    } catch {
-      showNotification({
-        color: "red",
-        title: "Error",
-        message: "Failed to delete credential. Please try again.",
-      });
-    }
-  }
+    mutate();
+  }, [status, value]);
 
   if (isLoading)
     return (
@@ -100,87 +147,130 @@ function ListPengaduan() {
         }}
       >
         <Text size="sm" c="dimmed">
-          Loading credentials...
+          Loading pengaduan...
         </Text>
       </Card>
     );
 
-  const list = data?.data?.list || [];
+  const list = data?.data || [];
 
   return (
-    <Card
-      radius="lg"
-      p="xl"
-      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={3} c="gray.2">
-              Dompet Hilang
-            </Title>
-            <Group>
-              <Title order={6} c="gray.5">
-                #PGD-061125-001
-              </Title>
-              <Text size="sm" c="dimmed">
-                updated 2 minutes ago
-              </Text>
-            </Group>
-          </Flex>
-          <Badge
-            size="xl"
-            variant="light"
-            radius="sm"
-            color="gray"
-            style={{ textTransform: "none" }}
-          >
-            Antrian
-          </Badge>
+    <Stack gap="xl">
+      <Group grow>
+        <Input
+          value={value}
+          placeholder="Cari pengaduan..."
+          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" }}
+            />
+          }
+        />
+        {/* <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.
+            </Text>
+          </Stack>
         </Flex>
-        <Divider my={0} />
-        <Stack gap="sm">
-          <Flex direction={"column"} justify="flex-start">
-            <Group gap="xs">
-              <IconClockHour3 size={20} color="white" />
-              <Text size="md" c="white">
-                Tanggal Aduan
-              </Text>
-            </Group>
-            <Text size="md">
-              05 November 2025
-            </Text>
-          </Flex>
-          <Flex direction={"column"} justify="flex-start">
-            <Group gap="xs">
-              <IconMapPin size={20} color="white" />
-              <Text size="md" c="white">
-                Lokasi
-              </Text>
-            </Group>
-            <Text size="md">
-              Jalan Darmasaba Raya no 77
-            </Text>
-          </Flex>
-          <Flex direction={"column"} justify="flex-start">
-            <Group gap="xs">
-              <IconAlignJustified size={20} color="white" />
-              <Text size="md" c="white">
-                Detail
-              </Text>
-            </Group>
-            <Text size="md">
-              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, obcaecati. Sint natus culpa temporibus neque quasi expedita ratione, facere optio incidunt quibusdam suscipit nam nemo delectus beatae similique velit obcaecati?
-            </Text>
-          </Flex>
-        </Stack>
-      </Stack>
-    </Card>
+      ) : (
+        list.map((v: any) => (
+          <Card
+            key={v.id}
+            radius="lg"
+            p="xl"
+            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)",
+            }}
+            onClick={() =>
+              navigate(`/scr/dashboard/pengaduan/detail?id=${v.id}`)
+            }
+          >
+            <Stack gap="md">
+              <Flex align="center" justify="space-between">
+                <Flex direction={"column"}>
+                  <Title order={3} c="gray.2">
+                    {v.title}
+                  </Title>
+                  <Group>
+                    <Title order={6} c="gray.5">
+                      #{v.noPengaduan}
+                    </Title>
+                    <Text size="sm" c="dimmed">
+                      {v.updatedAt}
+                    </Text>
+                  </Group>
+                </Flex>
+                <Badge
+                  size="xl"
+                  variant="light"
+                  radius="sm"
+                  color={
+                    v.status === "diterima"
+                      ? "green"
+                      : v.status === "ditolak"
+                        ? "red"
+                        : v.status === "selesai"
+                          ? "blue"
+                          : v.status === "dikerjakan"
+                            ? "purple"
+                            : "yellow"
+                  }
+                  style={{ textTransform: "none" }}
+                >
+                  {v.status}
+                </Badge>
+              </Flex>
+              <Divider my={0} />
+              <Stack gap="sm">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconClockHour3 size={20} color="white" />
+                    <Text size="md" c="white">
+                      Tanggal Aduan
+                    </Text>
+                  </Group>
+                  <Text size="md">{v.createdAt}</Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconMapPin size={20} color="white" />
+                    <Text size="md" c="white">
+                      Lokasi
+                    </Text>
+                  </Group>
+                  <Text size="md">{v.location}</Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} color="white" />
+                    <Text size="md" c="white">
+                      Detail
+                    </Text>
+                  </Group>
+                  <Text size="md">{v.detail}</Text>
+                </Flex>
+              </Stack>
+            </Stack>
+          </Card>
+        ))
+      )}
+    </Stack>
   );
 }

src/pages/scr/dashboard/setting/detail_setting_page.tsx

@@ -0,0 +1,150 @@
+import DesaSetting from "@/components/DesaSetting";
+import KategoriPengaduan from "@/components/KategoriPengaduan";
+import ProfileUser from "@/components/ProfileUser";
+import UserSetting from "@/components/UserSetting";
+import {
+  Button,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  NavLink,
+  Stack,
+  Table,
+  Title
+} from "@mantine/core";
+import {
+  IconBuildingBank,
+  IconCategory2,
+  IconMailSpark,
+  IconUserCog,
+  IconUsersGroup
+} 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={<IconUserCog size={16} stroke={1.5} />}
+              active={type === "profile" || !type}
+            />
+            <NavLink
+              href={`?type=user`}
+              label="User"
+              leftSection={<IconUsersGroup size={16} stroke={1.5} />}
+              active={type === "user"}
+            />
+            <NavLink
+              href={`?type=cat-pengaduan`}
+              label="Kategori Pengaduan"
+              leftSection={<IconCategory2 size={16} stroke={1.5} />}
+              active={type === "cat-pengaduan"}
+            />
+            <NavLink
+              href={`?type=cat-pelayanan`}
+              label="Kategori Pelayanan Surat"
+              leftSection={<IconMailSpark size={16} stroke={1.5} />}
+              active={type === "cat-pelayanan"}
+            />
+            <NavLink
+              href={`?type=desa`}
+              label="Desa"
+              leftSection={<IconBuildingBank 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" ? (
+              <KategoriPengaduan />
+            ) : type === "cat-pelayanan" ? (
+              <KategoriPengaduanPage />
+            ) : type === "desa" ? (
+              <DesaSetting />
+            ) : type === "user" ? (
+              <UserSetting />
+            ) : (
+              <ProfileUser />
+            )}
+          </Card>
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
+}
+
+
+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>
+  );
+}

src/pages/scr/dashboard/warga/detail_warga_page.tsx

@@ -0,0 +1,182 @@
+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>
+  );
+}

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>
+  );
+}

src/server/lib/get-last-updated.ts

@@ -0,0 +1,21 @@
+export function getLastUpdated(date: string | Date): string {
+   const now = new Date();
+   const updated = new Date(date);
+   const diffMs = now.getTime() - updated.getTime();
+
+   const diffMinutes = Math.floor(diffMs / (1000 * 60));
+   const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+   const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+   if (diffMinutes < 1) return "baru saja";
+   if (diffMinutes < 60) return `${diffMinutes} menit lalu`;
+   if (diffHours < 24) return `${diffHours} jam lalu`;
+   if (diffDays < 7) return `${diffDays} hari lalu`;
+
+   // kalau sudah lebih dari seminggu, tampilkan tanggal
+   return updated.toLocaleDateString("id-ID", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+   });
+}

src/server/lib/mimetypeToExtension.ts

@@ -0,0 +1,42 @@
+export function mimeToExtension(mimeType: string): string {
+  const map: Record<string, string> = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/gif": "gif",
+    "image/webp": "webp",
+    "image/svg+xml": "svg",
+    "image/bmp": "bmp",
+    "image/tiff": "tiff",
+
+    "video/mp4": "mp4",
+    "video/webm": "webm",
+    "video/ogg": "ogv",
+    "video/quicktime": "mov",
+
+    "audio/mpeg": "mp3",
+    "audio/wav": "wav",
+    "audio/ogg": "ogg",
+    "audio/webm": "weba",
+
+    "application/pdf": "pdf",
+    "application/zip": "zip",
+    "application/x-zip-compressed": "zip",
+    "application/json": "json",
+    "application/javascript": "js",
+    "application/x-httpd-php": "php",
+    "application/msword": "doc",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+    "application/vnd.ms-excel": "xls",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+    "application/vnd.ms-powerpoint": "ppt",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx",
+
+    "text/plain": "txt",
+    "text/html": "html",
+    "text/css": "css",
+    "text/csv": "csv",
+    "text/xml": "xml",
+  };
+
+  return map[mimeType.toLowerCase()] || "bin"; // default jika tidak dikenal
+}

src/server/lib/seafile.ts

@@ -136,33 +136,99 @@ export async function catFile(config: Config, fileName: string): Promise<string>
 }
 
 export async function uploadFile(config: Config, file: File): Promise<string> {
-  const remoteName = path.basename(file.name);
+   const remoteName = path.basename(file.name);
 
-  // 1. Dapatkan upload link (pakai Authorization)
-  const uploadUrlResponse = await fetchWithAuth(
-    config,
-    `${config.URL}/${config.REPO}/upload-link/`
-  );
-  const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
+   // 1. Dapatkan upload link (pakai Authorization)
+   const uploadUrlResponse = await fetchWithAuth(
+      config,
+      `${config.URL}/${config.REPO}/upload-link/`
+   );
+   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
 
-  // 2. Siapkan form-data
-  const formData = new FormData();
-  formData.append("parent_dir", "/");
-  formData.append("relative_path", "syarat-dokumen"); // tanpa slash di akhir
-  formData.append("file", file, remoteName); // file langsung, jangan pakai Blob
+   // 2. Siapkan form-data
+   const formData = new FormData();
+   formData.append("parent_dir", "/");
+   formData.append("relative_path", "syarat-dokumen"); // tanpa slash di akhir
+   formData.append("file", file, remoteName); // file langsung, jangan pakai Blob
 
-  // 3. Upload file TANPA Authorization header, token di query param
-  const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
-    method: "POST",
-    body: formData,
-  });
+   // 3. Upload file TANPA Authorization header, token di query param
+   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
+      method: "POST",
+      body: formData,
+   });
 
-  const text = await res.text();
+   const text = await res.text();
 
-  if (!res.ok) throw new Error(`Upload failed: ${text}`);
-  return `✅ Uploaded ${file.name} successfully`;
+   if (!res.ok) throw new Error(`Upload failed: ${text}`);
+   return `✅ Uploaded ${file.name} successfully`;
 }
 
+export async function uploadFileBase64(config: Config, base64File: { name: string; data: string; }): Promise<string> {
+   const remoteName = path.basename(base64File.name);
+
+   // 1. Dapatkan upload link (pakai Authorization)
+   const uploadUrlResponse = await fetchWithAuth(
+      config,
+      `${config.URL}/${config.REPO}/upload-link/`
+   );
+   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
+
+   // 2. Konversi base64 ke Blob
+   const binary = Buffer.from(base64File.data, "base64");
+   const blob = new Blob([binary]);
+
+   // 3. Siapkan form-data
+   const formData = new FormData();
+   formData.append("parent_dir", "/");
+   formData.append("relative_path", "syarat-dokumen"); // tanpa slash di akhir
+   formData.append("file", blob, remoteName);
+
+   // 4. Upload file TANPA Authorization header, token di query param
+   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
+      method: "POST",
+      body: formData,
+   });
+
+   const text = await res.text();
+
+   if (!res.ok) throw new Error(`Upload failed: ${text}`);
+   return `✅ Uploaded ${base64File.name} successfully`;
+}
+
+export async function uploadFileToFolder(config: Config, base64File: { name: string; data: string; }, folder: 'syarat-dokumen' | 'pengaduan'): Promise<string> {
+   const remoteName = path.basename(base64File.name);
+
+   // 1. Dapatkan upload link (pakai Authorization)
+   const uploadUrlResponse = await fetchWithAuth(
+      config,
+      `${config.URL}/${config.REPO}/upload-link/`
+   );
+   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
+
+   // 2. Konversi base64 ke Blob
+   const binary = Buffer.from(base64File.data, "base64");
+   const blob = new Blob([binary]);
+
+   // 3. Siapkan form-data
+   const formData = new FormData();
+   formData.append("parent_dir", "/");
+   formData.append("relative_path", folder); // tanpa slash di akhir
+   formData.append("file", blob, remoteName);
+
+   // 4. Upload file TANPA Authorization header, token di query param
+   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
+      method: "POST",
+      body: formData,
+   });
+
+   const text = await res.text();
+
+   if (!res.ok) throw new Error(`Upload failed: ${text}`);
+   return `✅ Uploaded ${base64File.name} successfully`;
+}
+
+
+
 
 export async function removeFile(config: Config, fileName: string): Promise<string> {
    await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`, { method: 'DELETE' });
@@ -192,49 +258,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);
-// });
+}

src/server/routes/configuration_desa_route.ts

@@ -0,0 +1,48 @@
+import Elysia, { t } from "elysia";
+import { prisma } from "../lib/prisma";
+
+const ConfigurationDesaRoute = new Elysia({
+   prefix: "configuration-desa",
+   tags: ["configuration-desa"],
+})
+
+   .get("/list", async () => {
+      const data = await prisma.configuration.findMany({
+         orderBy: {
+            name: "asc"
+         }
+      })
+
+      return data
+   }, {
+      detail: {
+         summary: "List Konfigurasi",
+         description: `tool untuk mendapatkan list konfigurasi`,
+      }
+   })
+   .post("/edit", async ({ body }) => {
+      const { id, value } = body
+
+      await prisma.configuration.update({
+         where: {
+            id,
+         },
+         data: {
+            value,
+         }
+      })
+
+      return { success: true, message: 'konfigurasi sudah diperbarui' }
+   }, {
+      body: t.Object({
+         id: t.String({ minLength: 1, error: "id harus diisi" }),
+         value: t.String({ minLength: 1, error: "value harus diisi" }),
+      }),
+      detail: {
+         summary: "edit konfigurasi desa",
+         description: `tool untuk edit konfigurasi desa`
+      }
+   })
+   ;
+
+export default ConfigurationDesaRoute

src/server/routes/pelayanan_surat_route.ts

@@ -38,10 +38,7 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        kategori pelayanan surat sudah dibuat`
+      return { success: true, message: 'kategori pelayanan surat sudah dibuat' }
    }, {
       body: t.Object({
          name: t.String({ minLength: 1, error: "name harus diisi" }),
@@ -67,10 +64,7 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        kategori pelayanan surat sudah diperbarui`
+      return { success: true, message: 'kategori pelayanan surat sudah diperbarui' }
    }, {
       body: t.Object({
          id: t.String({ minLength: 1, error: "id harus diisi" }),
@@ -95,10 +89,7 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        kategori pelayanan surat sudah dihapus`
+      return { success: true, message: 'kategori pelayanan surat sudah dihapus' }
    }, {
       body: t.Object({
          id: t.String({ minLength: 1, error: "id harus diisi" }),
@@ -252,10 +243,7 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        pengaduan sudah dibuat`
+      return { success: true, message: 'pengajuan surat sudah dibuat' }
    }, {
       body: t.Object({
          idCategory: t.String({ minLength: 1, error: "idCategory harus diisi" }),
@@ -300,10 +288,7 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        pengajuan surat sudah diperbarui`
+      return { success: true, message: 'pengajuan surat sudah diperbarui' }
    }, {
       body: t.Object({
          id: t.String({ minLength: 1, error: "id harus diisi" }),

src/server/routes/pengaduan_route.ts

@@ -1,9 +1,12 @@
 import Elysia, { t } from "elysia"
 import type { StatusPengaduan } from "generated/prisma"
+import { v4 as uuidv4 } from "uuid"
+import { getLastUpdated } from "../lib/get-last-updated"
+import { mimeToExtension } from "../lib/mimetypeToExtension"
 import { generateNoPengaduan } from "../lib/no-pengaduan"
 import { normalizePhoneNumber } from "../lib/normalizePhone"
 import { prisma } from "../lib/prisma"
-import { defaultConfigSF, uploadFile } from "../lib/seafile"
+import { catFile, defaultConfigSF, testConnection, uploadFile, uploadFileBase64 } from "../lib/seafile"
 
 const PengaduanRoute = new Elysia({
    prefix: "pengaduan",
@@ -37,10 +40,7 @@ const PengaduanRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        kategori pengaduan sudah dibuat`
+      return { success: true, message: 'kategori pengaduan sudah dibuat' }
    }, {
       body: t.Object({
          name: t.String({ minLength: 1, error: "name harus diisi" }),
@@ -62,10 +62,7 @@ const PengaduanRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        kategori pengaduan sudah diperbarui`
+      return { success: true, message: 'kategori pengaduan sudah diperbarui' }
    }, {
       body: t.Object({
          id: t.String({ minLength: 1, error: "id harus diisi" }),
@@ -88,10 +85,7 @@ const PengaduanRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        kategori pengaduan sudah dihapus`
+      return { success: true, message: 'kategori pengaduan sudah dihapus' }
    }, {
       body: t.Object({
          id: t.String({ minLength: 1, error: "id harus diisi" }),
@@ -106,20 +100,21 @@ const PengaduanRoute = new Elysia({
 
    // --- PENGADUAN ---
    .post("/create", async ({ body }) => {
-      const { title, detail, location, image, idCategory, idWarga, phone } = body
+      const { judulPengaduan, detailPengaduan, lokasi, namaGambar, kategoriId, wargaId, noTelepon } = body
+      let imageFix = namaGambar
       const noPengaduan = await generateNoPengaduan()
-      let idCategoryFix = idCategory
-      let idWargaFix = idWarga
+      let idCategoryFix = kategoriId
+      let idWargaFix = wargaId
       const category = await prisma.categoryPengaduan.findUnique({
          where: {
-            id: idCategory,
+            id: kategoriId,
          }
       })
 
       if (!category) {
          const cariCategory = await prisma.categoryPengaduan.findFirst({
             where: {
-               name: idCategory,
+               name: kategoriId,
             }
          })
 
@@ -133,12 +128,12 @@ const PengaduanRoute = new Elysia({
 
       const warga = await prisma.warga.findUnique({
          where: {
-            id: idWarga,
+            id: wargaId,
          }
       })
 
       if (!warga) {
-         const nomorHP = normalizePhoneNumber({ phone })
+         const nomorHP = normalizePhoneNumber({ phone: noTelepon })
          const cariWarga = await prisma.warga.findUnique({
             where: {
                phone: nomorHP,
@@ -148,7 +143,7 @@ const PengaduanRoute = new Elysia({
          if (!cariWarga) {
             const wargaCreate = await prisma.warga.create({
                data: {
-                  name: idWarga,
+                  name: wargaId,
                   phone: nomorHP,
                },
                select: {
@@ -164,12 +159,12 @@ const PengaduanRoute = new Elysia({
 
       const pengaduan = await prisma.pengaduan.create({
          data: {
-            title,
-            detail,
+            title: judulPengaduan,
+            detail: detailPengaduan,
             idCategory: idCategoryFix,
             idWarga: idWargaFix,
-            location,
-            image,
+            location: lokasi,
+            image: imageFix,
             noPengaduan,
          },
          select: {
@@ -178,7 +173,7 @@ const PengaduanRoute = new Elysia({
       })
 
       if (!pengaduan.id) {
-         throw new Error("gagal membuat pengaduan")
+         return { success: false, message: 'gagal membuat pengaduan' }
       }
 
       await prisma.historyPengaduan.create({
@@ -188,23 +183,77 @@ const PengaduanRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        pengaduan sudah dibuat`
+      return { success: true, message: 'pengaduan sudah dibuat dengan nomer ' + noPengaduan + ', nomer ini akan digunakan untuk mengakses pengaduan ini' }
    }, {
       body: t.Object({
-         title: t.String({ minLength: 1, error: "title harus diisi" }),
-         detail: t.String({ minLength: 1, error: "detail harus diisi" }),
-         location: t.String({ minLength: 1, error: "location harus diisi" }),
-         image: t.Any(),
-         idCategory: t.String({ minLength: 1, error: "idCategory harus diisi" }),
-         idWarga: t.String({ minLength: 1, error: "idWarga harus diisi" }),
-         phone: t.String({ minLength: 1, error: "phone harus diisi" }),
+         judulPengaduan: t.String({
+            minLength: 3,
+            error: "Judul pengaduan harus diisi dan minimal 3 karakter",
+            examples: ["Sampah menumpuk di depan rumah"],
+            description: "Judul singkat dari pengaduan warga"
+         }),
+
+         detailPengaduan: t.String({
+            minLength: 5,
+            error: "Deskripsi pengaduan harus diisi dan minimal 10 karakter",
+            examples: ["Terdapat sampah yang menumpuk selama seminggu di depan rumah saya"],
+            description: "Penjelasan lebih detail mengenai pengaduan"
+         }),
+
+         lokasi: t.String({
+            minLength: 5,
+            error: "Lokasi pengaduan harus diisi",
+            examples: ["Jl. Raya No. 1, RT 01 RW 02, Darmasaba"],
+            description: "Alamat atau titik lokasi pengaduan"
+         }),
+
+         namaGambar: t.String({
+            optional: true,
+            examples: ["sampah.jpg"],
+            description: "Nama file gambar yang telah diupload (opsional)"
+         }),
+
+         kategoriId: t.String({
+            minLength: 1,
+            error: "ID kategori pengaduan harus diisi",
+            examples: ["kebersihan"],
+            description: "ID atau nama kategori pengaduan (contoh: kebersihan, keamanan, lainnya)"
+         }),
+
+         wargaId: t.String({
+            minLength: 1,
+            error: "ID warga harus diisi",
+            examples: ["budiman"],
+            description: "ID unik warga yang melapor (jika sudah terdaftar)"
+         }),
+
+         noTelepon: t.String({
+            minLength: 1,
+            error: "Nomor telepon harus diisi",
+            examples: ["08123456789", "+628123456789"],
+            description: "Nomor telepon warga pelapor"
+         }),
       }),
+
       detail: {
-         summary: "Create Pengaduan Warga",
-         description: `tool untuk membuat pengaduan warga`,
+         summary: "Buat Pengaduan Warga",
+         description: `
+Endpoint ini digunakan untuk membuat data pengaduan (laporan) baru dari warga.
+
+Alur proses:
+1. Sistem memvalidasi kategori pengaduan berdasarkan ID.
+   - Jika ID kategori tidak ditemukan, sistem akan mencari berdasarkan nama kategori.
+   - Jika tetap tidak ditemukan, kategori akan diset menjadi "lainnya".
+2. Sistem memvalidasi data warga berdasarkan ID.
+   - Jika warga tidak ditemukan, sistem akan mencari berdasarkan nomor telepon.
+   - Jika tetap tidak ditemukan, data warga baru akan dibuat secara otomatis.
+3. Sistem menghasilkan nomor pengaduan unik (noPengaduan).
+4. Data pengaduan akan disimpan ke database, termasuk judul, detail, lokasi, gambar (opsional), dan data warga.
+5. Sistem juga membuat catatan riwayat awal pengaduan dengan deskripsi "Pengaduan dibuat".
+
+Respon:
+- success: true jika pengaduan berhasil dibuat.
+- message: berisi pesan sukses dan nomor pengaduan yang dapat digunakan untuk melacak status pengaduan.`,
          tags: ["mcp"]
       }
    })
@@ -245,10 +294,7 @@ const PengaduanRoute = new Elysia({
          }
       })
 
-      return `
-        ${JSON.stringify(body)}
-
-        status pengaduan sudah diupdate`
+      return { success: true, message: 'status pengaduan sudah diupdate' }
    }, {
       body: t.Object({
          id: t.String({ minLength: 1, error: "id harus diisi" }),
@@ -267,6 +313,11 @@ const PengaduanRoute = new Elysia({
       const data = await prisma.pengaduan.findUnique({
          where: {
             id,
+            OR: [
+               {
+                  noPengaduan: id
+               }
+            ]
          },
          select: {
             id: true,
@@ -344,7 +395,7 @@ const PengaduanRoute = new Elysia({
    }, {
       detail: {
          summary: "Detail Pengaduan Warga",
-         description: `tool untuk mendapatkan detail pengaduan warga / history pengaduan / mengecek status pengaduan`,
+         description: `tool untuk mendapatkan detail pengaduan warga / history pengaduan / mengecek status pengaduan berdasarkan id atau nomer Pengaduan`,
          tags: ["mcp"]
       }
    })
@@ -431,38 +482,233 @@ const PengaduanRoute = new Elysia({
          tags: ["mcp"]
       }
    })
-   .post("/upload",
-      async ({ body }) => {
-         const { file } = body;
+   .post("/upload", async ({ body }) => {
+      const { file } = body;
 
-         // Validasi file
-         if (!file) {
-            return { success: false, message: "File tidak ditemukan" };
-         }
-
-         // Upload ke Seafile (pastikan uploadFile menerima Blob atau ArrayBuffer)
-         // const buffer = await file.arrayBuffer();
-         const result = await uploadFile(defaultConfigSF, file);
-
-         return {
-            success: true,
-            message: "Upload berhasil",
-            filename: file.name,
-            size: file.size,
-            seafileResult: result
-         };
-      },
-      {
-         body: t.Object({
-            file: t.File({ format: "binary" })
-         }),
-         detail: {
-            summary: "Upload File",
-            description: "Tool untuk upload file ke Seafile",
-            tags: ["mcp"],
-            consumes: ["multipart/form-data"]
-         },
+      // Validasi file
+      if (!file) {
+         return { success: false, message: "File tidak ditemukan" };
       }
-   );
+
+      // Upload ke Seafile (pastikan uploadFile menerima Blob atau ArrayBuffer)
+      // const buffer = await file.arrayBuffer();
+      const result = await uploadFile(defaultConfigSF, file);
+
+      return {
+         success: true,
+         message: "Upload berhasil",
+         filename: file.name,
+         size: file.size,
+         seafileResult: result
+      };
+   }, {
+      body: t.Object({
+         file: t.File({ format: "binary" })
+      }),
+      detail: {
+         summary: "Upload File",
+         description: "Tool untuk upload file ke Seafile",
+         tags: ["mcp"],
+         consumes: ["multipart/form-data"]
+      },
+   })
+   .post("/upload-base64", async ({ body }) => {
+      const { data, mimetype } = body;
+      const ext = mimeToExtension(mimetype)
+      const name = `${uuidv4()}.${ext}`
+
+      // Validasi file
+      if (!data) {
+         return { success: false, message: "File tidak ditemukan" };
+      }
+
+      // Konversi file ke base64
+      // const buffer = await file.arrayBuffer();
+      // const base64String = Buffer.from(buffer).toString("base64");
+
+      // (Opsional) jika perlu dikirim ke Seafile sebagai base64
+      const result = await uploadFileBase64(defaultConfigSF, { name: name, data: data });
+
+      return {
+         success: true,
+         message: "Upload berhasil",
+         data: {
+            name,
+            mimetype,
+            ext,
+         }
+      };
+   }, {
+      body: t.Object({
+         data: t.String(),
+         mimetype: t.String()
+      }),
+      detail: {
+         summary: "Upload File (Base64)",
+         description: "Tool untuk upload file ke Seafile dalam format Base64",
+         tags: ["mcp"],
+         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))
+
+      let where: any = {
+         isActive: true,
+         OR: [
+            {
+               title: {
+                  contains: search ?? "",
+                  mode: "insensitive"
+               },
+            },
+            {
+               noPengaduan: {
+                  contains: search ?? "",
+                  mode: "insensitive"
+               },
+            },
+            {
+               detail: {
+                  contains: search ?? "",
+                  mode: "insensitive"
+               },
+            },
+            {
+               Warga: {
+                  phone: {
+                     contains: search ?? "",
+                     mode: "insensitive"
+                  },
+               },
+            }
+         ]
+      }
+
+      if (status && status !== "semua") {
+         where = {
+            ...where,
+            status: status
+         }
+      }
+
+      const data = await prisma.pengaduan.findMany({
+         skip,
+         take: !take ? 10 : Number(take),
+         orderBy: {
+            createdAt: "desc"
+         },
+         where,
+         select: {
+            id: true,
+            noPengaduan: true,
+            title: true,
+            detail: true,
+            location: true,
+            status: true,
+            createdAt: true,
+            updatedAt: true,
+            CategoryPengaduan: {
+               select: {
+                  name: true
+               }
+            },
+            Warga: {
+               select: {
+                  name: true,
+               }
+            }
+         }
+      })
+
+      const dataFix = data.map((item) => {
+         return {
+            noPengaduan: item.noPengaduan,
+            id: item.id,
+            title: item.title,
+            detail: item.detail,
+            status: item.status,
+            location: item.location,
+            createdAt: item.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }),
+            updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt),
+         }
+      })
+
+      return dataFix
+   }, {
+      query: t.Object({
+         take: t.String({ optional: true }),
+         page: t.String({ optional: true }),
+         search: t.String({ optional: true }),
+         status: t.String({ optional: true }),
+      }),
+      detail: {
+         summary: "List Pengaduan Warga",
+         description: `tool untuk mendapatkan list pengaduan warga`,
+      }
+   })
+   .get("/count", async ({ query }) => {
+      const counts = await prisma.pengaduan.groupBy({
+         by: ['status'],
+         where: {
+            isActive: true,
+         },
+         _count: {
+            status: true,
+         },
+      });
+
+      const grouped = Object.fromEntries(
+         counts.map(c => [c.status, c._count.status])
+      );
+
+      const total = await prisma.pengaduan.count({
+         where: { isActive: true },
+      });
+
+      return {
+         antrian: grouped?.antrian || 0,
+         diterima: grouped?.diterima || 0,
+         dikerjakan: grouped?.dikerjakan || 0,
+         ditolak: grouped?.ditolak || 0,
+         selesai: grouped?.selesai || 0,
+         semua: total,
+      };
+   }, {
+      detail: {
+         summary: "Jumlah Pengaduan Warga",
+         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

src/server/routes/test.ts

@@ -0,0 +1,53 @@
+import Elysia, { t } from "elysia";
+
+const TestRoute = new Elysia({
+    prefix: "test",
+    tags: ["mcp", "test"],
+})
+.get("/info-rapat-list", () => {
+    return {
+        success: true,
+        message: "data info rapat berhasil diambil",
+        data: [
+            {
+                judul: "Info Rapat",
+                tanggal: "2025-11-10",
+                deskripsi: "Info rapat",
+                gambar: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII="
+            }
+        ]
+    }
+}, {
+    detail: {
+        summary: "mendapatkan list rapat",
+        description: "mendapatkan list rapat dari database",
+    }
+})
+    
+.post("/simpan-rapat", ({ body }) => {
+    if (!body.gambar) {
+        return {
+            success: false,
+            message: "gambar harus diisi",
+        }
+    }
+    return {
+        success: true,
+        message: "data info rapat berhasil diambil",
+        chunk: body.gambar.substring(22)
+    }
+}, {
+    body: t.Object({
+        judul: t.String(),
+        tanggal: t.String(),
+        deskripsi: t.String(),
+        gambar: t.Required(t.String()),
+    }),
+    detail: {
+        summary: "simpan data rapat",
+        description: "simpan data rapat memerlukan base64 gambar",
+    }
+})
+
+export default TestRoute
+

src/server/routes/user_route.ts

@@ -47,5 +47,140 @@ const UserRoute = new Elysia({
             description: "upsert user",
         }
     })
+    .post("/update-password", async ({ body }) => {
+        const { password, id } = body
+        const update = await prisma.user.update({
+            where: {
+                id
+            },
+            data: {
+                password
+            }
+        })
+
+        return {
+            success: true,
+            message: "Password updated successfully",
+        }
+    }, {
+        body: t.Object({
+            password: t.String({ minLength: 1, error: "password is required" }),
+            id: t.String({ minLength: 1, error: "id is required" })
+        }),
+        detail: {
+            summary: "update password",
+            description: "update password user",
+        }
+    })
+    .post("/update", async ({ body }) => {
+        const { name, phone, id, roleId } = body
+        const update = await prisma.user.update({
+            where: {
+                id
+            },
+            data: {
+                name,
+                phone,
+                roleId
+            }
+        })
+
+        return {
+            success: true,
+            message: "User updated successfully",
+        }
+    }, {
+        body: t.Object({
+            name: t.String({ minLength: 1, error: "name is required" }),
+            phone: t.String({ minLength: 1, error: "phone is required" }),
+            id: t.String({ minLength: 1, error: "id is required" }),
+            roleId: t.String({ minLength: 1, error: "roleId is required" })
+        }),
+        detail: {
+            summary: "update",
+            description: "update user",
+        }
+    })
+    .post("/create", async ({ body }) => {
+        const { name, phone, roleId, email, password } = body
+        const create = await prisma.user.create({
+            data: {
+                name,
+                phone,
+                roleId,
+                email,
+                password
+            }
+        })
+
+        return {
+            success: true,
+            message: "User created successfully",
+        }
+    }, {
+        body: t.Object({
+            name: t.String({ minLength: 1, error: "name is required" }),
+            phone: t.String({ minLength: 1, error: "phone is required" }),
+            roleId: t.String({ minLength: 1, error: "roleId is required" }),
+            email: t.String({ minLength: 1, error: "email is required" }),
+            password: t.String({ minLength: 1, error: "password is required" })
+        }),
+        detail: {
+            summary: "create",
+            description: "create user",
+        }
+    })
+    .get("/list", async (ctx) => {
+        const { user } = ctx as any
+
+        const data = await prisma.user.findMany({
+            where: {
+                isActive: true,
+                NOT: {
+                    id: user.id
+                }
+            }
+        })
+
+        return data
+    }, {
+        detail: {
+            summary: "list",
+            description: "list user",
+        }
+    })
+    .get("/role", async () => {
+        const data = await prisma.role.findMany()
+        return data
+    }, {
+        detail: {
+            summary: "role",
+            description: "role user",
+        }
+    })
+    .post("/delete", async ({ body }) => {
+        const { id } = body
+        const deleteData = await prisma.user.update({
+            where: {
+                id
+            },
+            data: {
+                isActive: false
+            }
+        })
+
+        return {
+            success: true,
+            message: "User deleted successfully",
+        }
+    }, {
+        body: t.Object({
+            id: t.String({ minLength: 1, error: "id is required" })
+        }),
+        detail: {
+            summary: "delete",
+            description: "delete user",
+        }
+    })
 
 export default UserRoute

upload_base64.sh

@@ -0,0 +1,5 @@
+IMAGE_BASE64=$(base64 image.png | tr -d '\n')
+
+curl -X POST http://localhost:3000/api/pengaduan/upload-base64 \
+  -H "Content-Type: application/json" \
+  -d "{\"file\": \"$IMAGE_BASE64\"}"

x.ts

@@ -1,133 +1,39 @@
-/**
- * src/utils/swagger-to-mcp.ts
- * 
- * Auto-converter: Swagger (OpenAPI) → MCP manifest (real-time)
- * 
- * - Fetch swagger JSON dynamically from process.env.BUN_PUBLIC_BASE_URL + "/docs/json"
- * - Generate MCP manifest for AI discovery (/.well-known/mcp.json)
- * - Can be used as Bun CLI or integrated in Elysia route
- */
+import fs from "fs";
 
-import { writeFileSync } from "fs"
+// 1️⃣ File yang mau diupload
+const filePath = "image.png";
+const apiUrl = "http://localhost:3000/api/pengaduan/upload-base64";
 
-interface OpenAPI {
-    info: { title?: string; description?: string; version?: string }
-    paths: Record<string, any>
-}
+// 2️⃣ Baca file dan ubah ke base64
+const fileBuffer = fs.readFileSync(filePath);
+const base64Data = fileBuffer.toString("base64");
 
-interface McpManifest {
-    schema_version: string
-    name: string
-    description: string
-    version?: string
-    endpoints: Record<string, string>
-    capabilities: Record<string, any>
-    contact?: { email?: string }
-}
+// 3️⃣ Buat payload JSON
+const payload = {
+  data: base64Data,
+  mimetype: "image/png"
+};
 
-/**
- * Convert OpenAPI JSON to MCP manifest format
- */
-async function convertOpenApiToMcp(baseUrl: string): Promise<McpManifest> {
-    const res = await fetch(`${baseUrl}/docs/json`)
-    if (!res.ok) throw new Error(`Failed to fetch Swagger JSON from ${baseUrl}/docs/json`)
+// 4️⃣ Kirim ke server pakai fetch
+async function uploadBase64() {
+  try {
+    const res = await fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
 
-    const openapi: OpenAPI = await res.json()
-
-    const manifest: McpManifest = {
-        schema_version: "1.0",
-        name: openapi.info?.title ?? "MCP Server",
-        description: openapi.info?.description ?? "Auto-generated MCP manifest from Swagger",
-        version: openapi.info?.version ?? "0.0.0",
-        endpoints: {
-            openapi: `${baseUrl}/docs/json`,
-            mcp: `${baseUrl}/.well-known/mcp.json`
-        },
-        capabilities: {}
+    if (!res.ok) {
+      throw new Error(`Request failed: ${res.status} ${res.statusText}`);
     }
 
-    for (const [path, methods] of Object.entries(openapi.paths || {})) {
-        for (const [method, def] of Object.entries<any>(methods)) {
-            const tags = def.tags || ["default"]
-            const tag = tags[0]
-            const operationId = def.operationId || `${method}_${path.replace(/[\/{}]/g, "_")}`
-
-            manifest.capabilities[tag] ??= {}
-
-            // Extract parameters and body schema
-            const params: Record<string, string> = {}
-            const required: string[] = []
-
-            if (Array.isArray(def.parameters)) {
-                for (const p of def.parameters) {
-                    const type = p.schema?.type || "string"
-                    params[p.name] = type
-                    if (p.required) required.push(p.name)
-                }
-            }
-
-            const bodySchema = def.requestBody?.content?.["application/json"]?.schema
-            if (bodySchema?.properties) {
-                for (const [key, prop] of Object.entries<any>(bodySchema.properties)) {
-                    params[key] = prop.type || "string"
-                }
-                if (Array.isArray(bodySchema.required))
-                    required.push(...bodySchema.required)
-            }
-
-            // Generate example cURL
-            const sampleCurl = [
-                `curl -X ${method.toUpperCase()} ${baseUrl}${path}`,
-                Object.keys(params).length > 0
-                    ? `  -H 'Content-Type: application/json' -d '${JSON.stringify(
-                          Object.fromEntries(Object.keys(params).map(k => [k, params[k] === "string" ? k : "value"]))
-                      )}'`
-                    : ""
-            ]
-                .filter(Boolean)
-                .join(" \\\n")
-
-            manifest.capabilities[tag][operationId] = {
-                method: method.toUpperCase(),
-                path,
-                summary: def.summary || def.description || "",
-                parameters: Object.keys(params).length > 0 ? params : undefined,
-                required: required.length > 0 ? required : undefined,
-                command: sampleCurl
-            }
-        }
-    }
-
-    return manifest
+    const result = await res.json();
+    console.log("✅ Upload sukses:", result);
+  } catch (err) {
+    console.error("❌ Upload gagal:", err);
+  }
 }
 
-/**
- * CLI entry
- * bun run src/utils/swagger-to-mcp.ts
- */
-if (import.meta.main) {
-    const baseUrl = process.env.BUN_PUBLIC_BASE_URL
-    if (!baseUrl) {
-        console.error("❌ Missing BUN_PUBLIC_BASE_URL environment variable.")
-        process.exit(1)
-    }
-
-    convertOpenApiToMcp(baseUrl)
-        .then(manifest => {
-            writeFileSync(".well-known/mcp.json", JSON.stringify(manifest, null, 2))
-            console.log("✅ Generated .well-known/mcp.json")
-        })
-        .catch(err => console.error("❌ Failed to convert Swagger → MCP:", err))
-}
-
-/**
- * Optional: Elysia integration
- * Automatically serve /.well-known/mcp.json
- */
-// import Elysia from "elysia"
-// new Elysia()
-//     .get("/.well-known/mcp.json", async () => {
-//         const baseUrl = process.env.BUN_PUBLIC_BASE_URL!
-//         return await convertOpenApiToMcp(baseUrl)
-//     })
-//     .listen(3000)
+uploadBase64();