src/AppRoutes.tsx

@@ -14,6 +14,7 @@ import FormSuratKeteranganBelumKawin from "./pages/darmasaba/form_surat_keterang
 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 Surat from "./pages/darmasaba/surat";
 import Home from "./pages/Home";
 import CredentialPage from "./pages/scr/dashboard/credential/credential_page";
 import DashboardHome from "./pages/scr/dashboard/dashboard_home";
@@ -84,6 +85,7 @@ export default function AppRoutes() {
             path="/darmasaba/surat-keterangan-kelakuan-baik"
             element={<FormSuratKeteranganKelakuanBaik />}
           />
+          <Route path="/darmasaba/surat" element={<Surat />} />
         </Route>
         <Route path="/" element={<Home />} />
 

src/clientRoutes.ts

@@ -14,6 +14,7 @@ const clientRoutes = {
   "/darmasaba/keterangan-kelahiran": "/darmasaba/keterangan-kelahiran",
   "/darmasaba/surat-keterangan-tempat-usaha": "/darmasaba/surat-keterangan-tempat-usaha",
   "/darmasaba/surat-keterangan-kelakuan-baik": "/darmasaba/surat-keterangan-kelakuan-baik",
+  "/darmasaba/surat": "/darmasaba/surat",
   "/": "/",
   "/scr": "/scr",
   "/scr/dashboard": "/scr/dashboard",

src/components/DashboardCountData.tsx

@@ -1,98 +1,101 @@
 import apiFetch from "@/lib/apiFetch";
 import { Card, Flex, Grid, Group, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconFileCertificate, IconMessageReport, IconUsers } from "@tabler/icons-react";
+import {
+  IconFileCertificate,
+  IconMessageReport,
+  IconUsers,
+} from "@tabler/icons-react";
 import useSWR from "swr";
 
 export default function DashboardCountData() {
-   const { data, mutate, isLoading } = useSWR("/", () =>
-      apiFetch.api.dashboard.count.get()
-   );
+  const { data, mutate, isLoading } = useSWR("/", () =>
+    apiFetch.api.dashboard.count.get(),
+  );
 
-   useShallowEffect(() => {
-      mutate();
-   }, []);
+  useShallowEffect(() => {
+    mutate();
+  }, []);
 
-   return (
-      <Grid>
-         <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-            <MetricCard
-               icon={<IconMessageReport size={28} />}
-               label="Pengaduan Hari Ini"
-               value={String(data?.data?.pengaduan?.today)}
-               change={String(data?.data?.pengaduan?.kenaikan) + "%"}
-               color={"gray"}
-            />
-         </Grid.Col>
-         <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-            <MetricCard
-               icon={<IconFileCertificate size={28} />}
-               label="Pengajuan Surat Hari Ini"
-               value={String(data?.data?.pelayanan?.today)}
-               change={String(data?.data?.pelayanan?.kenaikan) + "%"}
-               color="gray"
-            />
-         </Grid.Col>
-         <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-            <MetricCard
-               icon={<IconUsers size={28} />}
-               label="Warga"
-               value={String(data?.data?.warga)}
-               color="blue"
-            />
-         </Grid.Col>
-      </Grid>
-   );
+  return (
+    <Grid>
+      <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+        <MetricCard
+          icon={<IconMessageReport size={28} />}
+          label="Pengaduan Hari Ini"
+          value={String(data?.data?.pengaduan?.today)}
+          change={String(data?.data?.pengaduan?.kenaikan) + "%"}
+          color={"gray"}
+        />
+      </Grid.Col>
+      <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+        <MetricCard
+          icon={<IconFileCertificate size={28} />}
+          label="Pengajuan Surat Hari Ini"
+          value={String(data?.data?.pelayanan?.today)}
+          change={String(data?.data?.pelayanan?.kenaikan) + "%"}
+          color="gray"
+        />
+      </Grid.Col>
+      <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+        <MetricCard
+          icon={<IconUsers size={28} />}
+          label="Warga"
+          value={String(data?.data?.warga)}
+          color="blue"
+        />
+      </Grid.Col>
+    </Grid>
+  );
 }
 
-
 function MetricCard({
-   icon,
-   label,
-   value,
-   change,
-   color,
+  icon,
+  label,
+  value,
+  change,
+  color,
 }: {
-   icon: React.ReactNode;
-   label: string;
-   value: string;
-   change?: string;
-   color: string;
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  change?: string;
+  color: string;
 }) {
-   return (
-      <Card
-         radius="lg"
-         p="md"
-         withBorder
-         style={{
-            background:
-               "linear-gradient(145deg, rgba(30,30,30,0.95), rgba(55,55,55,0.9))",
-            borderColor: "rgba(100,100,100,0.2)",
-            transition: "transform 0.15s ease, box-shadow 0.15s ease",
-         }}
-         onMouseEnter={(e) =>
-            (e.currentTarget.style.boxShadow = "0 0 10px rgba(0,255,200,0.2)")
-         }
-         onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
-      >
-         <Stack gap={6}>
-            <Group gap={6}>
-               {icon}
-               <Text size="sm" c="dimmed">
-                  {label}
-               </Text>
-            </Group>
-            <Flex align="center" justify="space-between">
-               <Text fw={600} size="xl" c="gray.0">
-                  {value}
-               </Text>
-               {change && (
-                  <Text size="sm" c={color}>
-                     {change}
-                  </Text>
-               )}
-            </Flex>
-         </Stack>
-      </Card>
-   );
-}
+  return (
+    <Card
+      radius="lg"
+      p="md"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(30,30,30,0.95), rgba(55,55,55,0.9))",
+        borderColor: "rgba(100,100,100,0.2)",
+        transition: "transform 0.15s ease, box-shadow 0.15s ease",
+      }}
+      onMouseEnter={(e) =>
+        (e.currentTarget.style.boxShadow = "0 0 10px rgba(0,255,200,0.2)")
+      }
+      onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
+    >
+      <Stack gap={6}>
+        <Group gap={6}>
+          {icon}
+          <Text size="sm" c="dimmed">
+            {label}
+          </Text>
+        </Group>
+        <Flex align="center" justify="space-between">
+          <Text fw={600} size="xl" c="gray.0">
+            {value}
+          </Text>
+          {change && (
+            <Text size="sm" c={color}>
+              {change}
+            </Text>
+          )}
+        </Flex>
+      </Stack>
+    </Card>
+  );
+}

src/components/DashboardGrafik.tsx

@@ -7,77 +7,71 @@ import { useEffect, useState } from "react";
 import useSWR from "swr";
 
 export default function DashboardGrafik() {
-   const [options, setOptions] = useState<EChartsOption>({});
-   const { data, mutate, isLoading } = useSWR(
-      "grafik-dashboard",
-      async () => {
-         return apiFetch.api.dashboard.grafik.get().then(res => res.data);
-      }
-   );
+  const [options, setOptions] = useState<EChartsOption>({});
+  const { data, mutate, isLoading } = useSWR("grafik-dashboard", async () => {
+    return apiFetch.api.dashboard.grafik.get().then((res) => res.data);
+  });
 
-   const loadData = () => {
-      if (!data) return;
-      const option: EChartsOption = {
-         darkMode: true,
-         animation: true,
-         legend: {
-            textStyle: { color: "#fff" }
-         },
-         tooltip: {},
-         dataset: {
-            dimensions: data.dimensions,
-            source: data.source
-         },
-         xAxis: {
-            type: "category",
-            axisLabel: { color: "#fff" }
-         },
-         yAxis: {
-            type: "value",
-            minInterval: 1,
-            axisLabel: { color: "#fff" }
-         },
-         color: ["#1abc9c", "#10816aff"],
-         series: [
-            { type: "bar" },
-            { type: "bar" }
-         ]
-      };
+  const loadData = () => {
+    if (!data) return;
+    const option: EChartsOption = {
+      darkMode: true,
+      animation: true,
+      legend: {
+        textStyle: { color: "#fff" },
+      },
+      tooltip: {},
+      dataset: {
+        dimensions: data.dimensions,
+        source: data.source,
+      },
+      xAxis: {
+        type: "category",
+        axisLabel: { color: "#fff" },
+      },
+      yAxis: {
+        type: "value",
+        minInterval: 1,
+        axisLabel: { color: "#fff" },
+      },
+      color: ["#1abc9c", "#10816aff"],
+      series: [{ type: "bar" }, { type: "bar" }],
+    };
 
-      setOptions(option);
-   };
+    setOptions(option);
+  };
 
-   useEffect(() => {
-      if (data) loadData();
-   }, [data]);
+  useEffect(() => {
+    if (data) loadData();
+  }, [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 25px rgba(0,255,200,0.08)",
-         }}
-      >
-         <Stack gap="sm">
-            <Flex align="center" justify="space-between">
-               <Flex direction={"column"}>
-                  <Title order={4} c="gray.0">
-                     Grafik Pengaduan dan Pelayanan Surat
-                  </Title>
-                  <Text size="sm">7 Hari Terakhir</Text>
-               </Flex>
-               <IconChartBar size={20} color="gray" />
-            </Flex>
-            <Divider my="xs" />
-            <Stack gap="sm">
-               <EChartsReact style={{ height: 400 }} option={options} />
-            </Stack>
-         </Stack>
-      </Card>
-   )
-}
+  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 25px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="sm">
+        <Flex align="center" justify="space-between">
+          <Flex direction={"column"}>
+            <Title order={4} c="gray.0">
+              Grafik Pengaduan dan Pelayanan Surat
+            </Title>
+            <Text size="sm">7 Hari Terakhir</Text>
+          </Flex>
+          <IconChartBar size={20} color="gray" />
+        </Flex>
+        <Divider my="xs" />
+        <Stack gap="sm">
+          <EChartsReact style={{ height: 400 }} option={options} />
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}

src/components/DashboardLastData.tsx

@@ -1,133 +1,210 @@
 import apiFetch from "@/lib/apiFetch";
-import { Badge, Button, Card, Flex, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
+import {
+  Badge,
+  Button,
+  Card,
+  Flex,
+  Group,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
 
 export default function DashboardLastData() {
-   const navigate = useNavigate();
-   const { data, mutate, isLoading } = useSWR("last-update", async () => {
-      const res = await apiFetch.api.dashboard["last-update"].get();
-      return res.data
-   });
+  const navigate = useNavigate();
+  const { data, mutate, isLoading } = useSWR("last-update", async () => {
+    const res = await apiFetch.api.dashboard["last-update"].get();
+    return res.data;
+  });
 
-   useShallowEffect(() => {
-      mutate();
-   }, []);
+  useShallowEffect(() => {
+    mutate();
+  }, []);
 
+  return (
+    <Flex justify="flex-start" gap="md">
+      <Card
+        radius="lg"
+        p="xl"
+        withBorder
+        w={"50%"}
+        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 25px rgba(0,255,200,0.08)",
+        }}
+      >
+        <Stack gap="sm">
+          <Flex
+            align="center"
+            pb={"sm"}
+            justify="space-between"
+            style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
+          >
+            <Title order={4} c="gray.0">
+              Last update pengaduan
+            </Title>
+            <Button
+              variant="subtle"
+              size="xs"
+              radius="md"
+              onClick={() => navigate(`/scr/dashboard/pengaduan/list`)}
+            >
+              View All
+            </Button>
+          </Flex>
+          <Stack gap="sm" mt="md" align="stretch" justify="center">
+            {data &&
+            Array.isArray(data.pengaduan) &&
+            data.pengaduan.length > 0 ? (
+              data.pengaduan.map((item: any, index: number) => (
+                <PengaduanSection
+                  key={index}
+                  id={item.id}
+                  nomer={item.noPengaduan}
+                  judul={item.title}
+                  status={item.status}
+                  updated={item.updatedAt}
+                  kategori="pengaduan"
+                />
+              ))
+            ) : (
+              <Text c="dimmed" ta={"center"}>
+                Tidak ada data
+              </Text>
+            )}
+          </Stack>
+        </Stack>
+      </Card>
 
-   return (
-      <Flex justify="flex-start" gap="md">
-         <Card
-            radius="lg"
-            p="xl"
-            withBorder
-            w={"50%"}
-            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 25px rgba(0,255,200,0.08)",
-            }}
-         >
-            <Stack gap="sm">
-               <Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
-                  <Title order={4} c="gray.0">
-                     Last update pengaduan
-                  </Title>
-                  <Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pengaduan/list`)}>View All</Button>
-               </Flex>
-               <Stack gap="sm" mt="md" align="stretch" justify="center">
-                  {
-                     data && Array.isArray(data.pengaduan) && data.pengaduan.length > 0 ? data.pengaduan.map((item: any, index: number) => (
-                        <PengaduanSection
-                           key={index}
-                           id={item.id}
-                           nomer={item.noPengaduan}
-                           judul={item.title}
-                           status={item.status}
-                           updated={item.updatedAt}
-                           kategori="pengaduan"
-                        />
-                     )) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
-                  }
-               </Stack>
-            </Stack>
-         </Card>
-
-         <Card
-            radius="lg"
-            p="xl"
-            withBorder
-            w={"50%"}
-            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 25px rgba(0,255,200,0.08)",
-            }}
-         >
-            <Stack gap="sm">
-               <Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
-                  <Title order={4} c="gray.0">
-                     Last update pelayanan surat
-                  </Title>
-                  <Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pelayanan-surat/list-pelayanan`)}>View All</Button>
-               </Flex>
-               <Stack gap="sm" mt="md" align="stretch" justify="center">
-                  {
-                     data && Array.isArray(data.pelayanan) && data.pelayanan.length > 0 ? data.pelayanan.map((item: any, index: number) => (
-                        <PengaduanSection
-                           key={index}
-                           id={item.id}
-                           nomer={item.noPengajuan}
-                           judul={item.title}
-                           status={item.status}
-                           updated={item.updatedAt}
-                           kategori="pelayanan"
-                        />
-                     )) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
-                  }
-               </Stack>
-            </Stack>
-         </Card>
-      </Flex>
-   );
+      <Card
+        radius="lg"
+        p="xl"
+        withBorder
+        w={"50%"}
+        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 25px rgba(0,255,200,0.08)",
+        }}
+      >
+        <Stack gap="sm">
+          <Flex
+            align="center"
+            pb={"sm"}
+            justify="space-between"
+            style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
+          >
+            <Title order={4} c="gray.0">
+              Last update pelayanan surat
+            </Title>
+            <Button
+              variant="subtle"
+              size="xs"
+              radius="md"
+              onClick={() =>
+                navigate(`/scr/dashboard/pelayanan-surat/list-pelayanan`)
+              }
+            >
+              View All
+            </Button>
+          </Flex>
+          <Stack gap="sm" mt="md" align="stretch" justify="center">
+            {data &&
+            Array.isArray(data.pelayanan) &&
+            data.pelayanan.length > 0 ? (
+              data.pelayanan.map((item: any, index: number) => (
+                <PengaduanSection
+                  key={index}
+                  id={item.id}
+                  nomer={item.noPengajuan}
+                  judul={item.title}
+                  status={item.status}
+                  updated={item.updatedAt}
+                  kategori="pelayanan"
+                />
+              ))
+            ) : (
+              <Text c="dimmed" ta={"center"}>
+                Tidak ada data
+              </Text>
+            )}
+          </Stack>
+        </Stack>
+      </Card>
+    </Flex>
+  );
 }
 
-function PengaduanSection({ id, nomer, judul, status, updated, kategori }: { id: string, nomer: string, judul: string, status: string, updated: string, kategori: 'pengaduan' | 'pelayanan' }) {
-   const navigate = useNavigate();
+function PengaduanSection({
+  id,
+  nomer,
+  judul,
+  status,
+  updated,
+  kategori,
+}: {
+  id: string;
+  nomer: string;
+  judul: string;
+  status: string;
+  updated: string;
+  kategori: "pengaduan" | "pelayanan";
+}) {
+  const navigate = useNavigate();
 
-   return (
-      <Stack
-         gap="xs"
-         onClick={() => navigate(kategori == "pelayanan" ? `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${id}` : `/scr/dashboard/pengaduan/detail?id=${id}`)}
+  return (
+    <Stack
+      gap="xs"
+      onClick={() =>
+        navigate(
+          kategori == "pelayanan"
+            ? `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${id}`
+            : `/scr/dashboard/pengaduan/detail?id=${id}`,
+        )
+      }
+    >
+      <Flex
+        align="center"
+        pb={"sm"}
+        justify="space-between"
+        gap="md"
+        style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
       >
-         <Flex align="center" pb={"sm"} justify="space-between" gap="md" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
-            <Flex direction={"column"}>
-               <Text size="md" c="gray.2" lineClamp={1}>
-                  {judul}
-               </Text>
-               <Group>
-                  <Text size="sm" c="dimmed">
-                     #{nomer} ∙ {updated}
-                  </Text>
-               </Group>
-            </Flex>
-            <Tooltip label={status}>
-               <Badge size="xs" circle color={
-                  status === "diterima"
-                     ? "green"
-                     : status === "ditolak"
-                        ? "red"
-                        : status === "selesai"
-                           ? "blue"
-                           : status === "dikerjakan"
-                              ? "gray"
-                              : "yellow"
-               } />
-            </Tooltip>
-         </Flex>
-      </Stack>
-   )
-}
+        <Flex direction={"column"}>
+          <Text size="md" c="gray.2" lineClamp={1}>
+            {judul}
+          </Text>
+          <Group>
+            <Text size="sm" c="dimmed">
+              #{nomer} ∙ {updated}
+            </Text>
+          </Group>
+        </Flex>
+        <Tooltip label={status}>
+          <Badge
+            size="xs"
+            circle
+            color={
+              status === "diterima"
+                ? "green"
+                : status === "ditolak"
+                  ? "red"
+                  : status === "selesai"
+                    ? "blue"
+                    : status === "dikerjakan"
+                      ? "gray"
+                      : "yellow"
+            }
+          />
+        </Tooltip>
+      </Flex>
+    </Stack>
+  );
+}

src/components/DesaSetting.tsx

@@ -12,7 +12,7 @@ import {
   Stack,
   Table,
   Title,
-  Tooltip
+  Tooltip,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit } from "@tabler/icons-react";
@@ -23,11 +23,15 @@ import useSWR from "swr";
 import ModalFile from "./ModalFile";
 import notification from "./notificationGlobal";
 
-export default function DesaSetting({ permissions }: { permissions: JsonValue[] }) {
+export default function DesaSetting({
+  permissions,
+}: {
+  permissions: JsonValue[];
+}) {
   const [btnDisable, setBtnDisable] = useState(false);
   const [btnLoading, setBtnLoading] = useState(false);
   const [opened, { open, close }] = useDisclosure(false);
-  const [img, setImg] = useState<any>()
+  const [img, setImg] = useState<any>();
   const [openedPreview, setOpenedPreview] = useState(false);
   const [viewImg, setViewImg] = useState("");
   const { data, mutate, isLoading } = useSWR("/", () =>
@@ -51,13 +55,19 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
       let finalData = { ...dataEdit }; // ← buffer data terbaru
 
       if (dataEdit.name === "TTD") {
-        const oldImg = await apiFetch.api.pengaduan["delete-image"].post({ file: dataEdit.value, folder: "lainnya" });
-        const resImg = await apiFetch.api.pengaduan.upload.post({ file: img, folder: "lainnya" });
+        const oldImg = await apiFetch.api.pengaduan["delete-image"].post({
+          file: dataEdit.value,
+          folder: "lainnya",
+        });
+        const resImg = await apiFetch.api.pengaduan.upload.post({
+          file: img,
+          folder: "lainnya",
+        });
 
         if (resImg.status === 200) {
           finalData = {
             ...finalData,
-            value: resImg.data?.filename || ""
+            value: resImg.data?.filename || "",
           };
 
           setDataEdit(finalData); // update state
@@ -70,7 +80,6 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
         }
       }
 
-
       const res = await apiFetch.api["configuration-desa"].edit.post(finalData);
 
       if (res.status === 200) {
@@ -100,8 +109,11 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
     }
   }
 
-
-  function chooseEdit({ data }: { data: { id: string; value: string; name: string }; }) {
+  function chooseEdit({
+    data,
+  }: {
+    data: { id: string; value: string; name: string };
+  }) {
     setDataEdit(data);
     open();
   }
@@ -133,31 +145,27 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="ld">
-          {
-            dataEdit.name == "TTD"
-              ?
-              (
-                <Input.Wrapper label={dataEdit.name}>
-                  <FileInput
-                    clearable
-                    placeholder="Upload TTD"
-                    accept="image/*"
-                    onChange={(e) => { setImg(e) }}
-                  />
-                </Input.Wrapper>
-              )
-              :
-              (
-                <Input.Wrapper label={dataEdit.name}>
-                  <Input
-                    value={dataEdit.value}
-                    onChange={(e) =>
-                      onValidation({ kat: "value", value: e.target.value })
-                    }
-                  />
-                </Input.Wrapper>
-              )
-          }
+          {dataEdit.name == "TTD" ? (
+            <Input.Wrapper label={dataEdit.name}>
+              <FileInput
+                clearable
+                placeholder="Upload TTD"
+                accept="image/*"
+                onChange={(e) => {
+                  setImg(e);
+                }}
+              />
+            </Input.Wrapper>
+          ) : (
+            <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}>
@@ -203,21 +211,33 @@ export default function DesaSetting({ permissions }: { permissions: JsonValue[]
                 <Table.Tr key={v.id}>
                   <Table.Td>{v.name}</Table.Td>
                   <Table.Td>
-                    {
-                      v.name == "TTD"
-                        ?
-                        v.value ?
-                          <Anchor href="#" onClick={() => { setViewImg(v.value); setOpenedPreview(true); }} underline="always">
-                            Lihat
-                          </Anchor>
-                          :
-                          "-"
-                        :
-                        v.value
-                    }
+                    {v.name == "TTD" ? (
+                      v.value ? (
+                        <Anchor
+                          href="#"
+                          onClick={() => {
+                            setViewImg(v.value);
+                            setOpenedPreview(true);
+                          }}
+                          underline="always"
+                        >
+                          Lihat
+                        </Anchor>
+                      ) : (
+                        "-"
+                      )
+                    ) : (
+                      v.value
+                    )}
                   </Table.Td>
                   <Table.Td>
-                    <Tooltip label={permissions.includes("setting.desa.edit") ? "Edit Setting" : "Edit Setting - Anda tidak memiliki akses"}>
+                    <Tooltip
+                      label={
+                        permissions.includes("setting.desa.edit")
+                          ? "Edit Setting"
+                          : "Edit Setting - Anda tidak memiliki akses"
+                      }
+                    >
                       <ActionIcon
                         variant="light"
                         size="sm"

src/components/KategoriPelayananSurat.tsx

@@ -23,7 +23,11 @@ import { useState } from "react";
 import useSWR from "swr";
 import notification from "./notificationGlobal";
 
-export default function KategoriPelayananSurat({ permissions }: { permissions: JsonValue[] }) {
+export default function KategoriPelayananSurat({
+  permissions,
+}: {
+  permissions: JsonValue[];
+}) {
   const [openedDelete, { open: openDelete, close: closeDelete }] =
     useDisclosure(false);
   const [openedDetail, { open: openDetail, close: closeDetail }] =
@@ -53,7 +57,6 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
     mutate();
   }, []);
 
-
   async function handleCreate() {
     try {
       setBtnLoading(true);
@@ -535,19 +538,17 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
           <Title order={4} c="gray.2">
             Kategori Pelayanan Surat
           </Title>
-          {
-            permissions.includes("setting.kategori_pelayanan.tambah") && (
-              <Tooltip label="Tambah Kategori Pelayanan Surat">
-                <Button
-                  variant="light"
-                  leftSection={<IconPlus size={20} />}
-                  onClick={openTambah}
-                >
-                  Tambah
-                </Button>
-              </Tooltip>
-            )
-          }
+          {permissions.includes("setting.kategori_pelayanan.tambah") && (
+            <Tooltip label="Tambah Kategori Pelayanan Surat">
+              <Button
+                variant="light"
+                leftSection={<IconPlus size={20} />}
+                onClick={openTambah}
+              >
+                Tambah
+              </Button>
+            </Tooltip>
+          )}
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
@@ -578,7 +579,15 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
                           <IconEye size={20} />
                         </ActionIcon>
                       </Tooltip>
-                      <Tooltip label={permissions.includes("setting.kategori_pelayanan.edit") ? "Edit Kategori" : "Edit Kategori - Anda tidak memiliki akses"}>
+                      <Tooltip
+                        label={
+                          permissions.includes(
+                            "setting.kategori_pelayanan.edit",
+                          )
+                            ? "Edit Kategori"
+                            : "Edit Kategori - Anda tidak memiliki akses"
+                        }
+                      >
                         <ActionIcon
                           variant="light"
                           size="sm"
@@ -587,12 +596,24 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
                             setDataChoose(v);
                             open();
                           }}
-                          disabled={!permissions.includes("setting.kategori_pelayanan.edit")}
+                          disabled={
+                            !permissions.includes(
+                              "setting.kategori_pelayanan.edit",
+                            )
+                          }
                         >
                           <IconEdit size={20} />
                         </ActionIcon>
                       </Tooltip>
-                      <Tooltip label={permissions.includes("setting.kategori_pelayanan.delete") ? "Hapus Kategori" : "Hapus Kategori - Anda tidak memiliki akses"}>
+                      <Tooltip
+                        label={
+                          permissions.includes(
+                            "setting.kategori_pelayanan.delete",
+                          )
+                            ? "Hapus Kategori"
+                            : "Hapus Kategori - Anda tidak memiliki akses"
+                        }
+                      >
                         <ActionIcon
                           variant="light"
                           size="sm"
@@ -602,7 +623,11 @@ export default function KategoriPelayananSurat({ permissions }: { permissions: J
                             setDataDelete(v.id);
                             openDelete();
                           }}
-                          disabled={!permissions.includes("setting.kategori_pelayanan.delete")}
+                          disabled={
+                            !permissions.includes(
+                              "setting.kategori_pelayanan.delete",
+                            )
+                          }
                         >
                           <IconTrash size={20} />
                         </ActionIcon>

src/components/KategoriPengaduan.tsx

@@ -20,7 +20,11 @@ import { useState } from "react";
 import useSWR from "swr";
 import notification from "./notificationGlobal";
 
-export default function KategoriPengaduan({ permissions }: { permissions: JsonValue[] }) {
+export default function KategoriPengaduan({
+  permissions,
+}: {
+  permissions: JsonValue[];
+}) {
   const [openedDelete, { open: openDelete, close: closeDelete }] =
     useDisclosure(false);
   const [btnDisable, setBtnDisable] = useState(true);
@@ -294,19 +298,17 @@ export default function KategoriPengaduan({ permissions }: { permissions: JsonVa
           <Title order={4} c="gray.2">
             Kategori Pengaduan
           </Title>
-          {
-            permissions.includes("setting.kategori_pengaduan.tambah") && (
-              <Tooltip label="Tambah Kategori Pengaduan">
-                <Button
-                  variant="light"
-                  leftSection={<IconPlus size={20} />}
-                  onClick={openTambah}
-                >
-                  Tambah
-                </Button>
-              </Tooltip>
-            )
-          }
+          {permissions.includes("setting.kategori_pengaduan.tambah") && (
+            <Tooltip label="Tambah Kategori Pengaduan">
+              <Button
+                variant="light"
+                leftSection={<IconPlus size={20} />}
+                onClick={openTambah}
+              >
+                Tambah
+              </Button>
+            </Tooltip>
+          )}
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
@@ -323,18 +325,38 @@ export default function KategoriPengaduan({ permissions }: { permissions: JsonVa
                   <Table.Td>{v.name}</Table.Td>
                   <Table.Td>
                     <Group>
-                      <Tooltip label={permissions.includes("setting.kategori_pengaduan.edit") ? "Edit Kategori" : "Edit Kategori - Anda tidak memiliki akses"}>
+                      <Tooltip
+                        label={
+                          permissions.includes(
+                            "setting.kategori_pengaduan.edit",
+                          )
+                            ? "Edit Kategori"
+                            : "Edit Kategori - Anda tidak memiliki akses"
+                        }
+                      >
                         <ActionIcon
                           variant="light"
                           size="sm"
                           style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
                           onClick={() => chooseEdit({ data: v })}
-                          disabled={!permissions.includes("setting.kategori_pengaduan.edit") || v.id == "lainnya"}
+                          disabled={
+                            !permissions.includes(
+                              "setting.kategori_pengaduan.edit",
+                            ) || v.id == "lainnya"
+                          }
                         >
                           <IconEdit size={20} />
                         </ActionIcon>
                       </Tooltip>
-                      <Tooltip label={permissions.includes("setting.kategori_pengaduan.delete") ? "Hapus Kategori" : "Hapus Kategori - Anda tidak memiliki akses"}>
+                      <Tooltip
+                        label={
+                          permissions.includes(
+                            "setting.kategori_pengaduan.delete",
+                          )
+                            ? "Hapus Kategori"
+                            : "Hapus Kategori - Anda tidak memiliki akses"
+                        }
+                      >
                         <ActionIcon
                           variant="light"
                           size="sm"
@@ -344,7 +366,11 @@ export default function KategoriPengaduan({ permissions }: { permissions: JsonVa
                             setDataDelete(v.id);
                             openDelete();
                           }}
-                          disabled={!permissions.includes("setting.kategori_pengaduan.delete") || v.id == "lainnya"}
+                          disabled={
+                            !permissions.includes(
+                              "setting.kategori_pengaduan.delete",
+                            ) || v.id == "lainnya"
+                          }
                         >
                           <IconTrash size={20} />
                         </ActionIcon>

src/components/ModalFile.tsx

@@ -3,92 +3,100 @@ import { Flex, Image, Loader, Modal } from "@mantine/core";
 import { useEffect, useState } from "react";
 import notification from "./notificationGlobal";
 
-export default function ModalFile({ open, onClose, folder, fileName }: { open: boolean, onClose: () => void, folder: string, fileName: string }) {
-   const [viewFile, setViewFile] = useState<string>("");
-   const [loading, setLoading] = useState<boolean>(false);
-   const [typeFile, setTypeFile] = useState<string>("");
-   const [error, setError] = useState<boolean>(false);
+export default function ModalFile({
+  open,
+  onClose,
+  folder,
+  fileName,
+}: {
+  open: boolean;
+  onClose: () => void;
+  folder: string;
+  fileName: string;
+}) {
+  const [viewFile, setViewFile] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [typeFile, setTypeFile] = useState<string>("");
+  const [error, setError] = useState<boolean>(false);
 
-   useEffect(() => {
-      if (open && fileName) {
-         loadImage();
+  useEffect(() => {
+    if (open && fileName) {
+      loadImage();
+    }
+  }, [open, fileName]);
+
+  const loadImage = async () => {
+    try {
+      setViewFile("");
+      setLoading(true);
+
+      // detect type of file
+      const { ext, type } = detectFileType(fileName);
+      setTypeFile(type || "");
+
+      // load file
+      const urlApi =
+        "/api/pengaduan/image?folder=" + folder + "&fileName=" + fileName;
+      const res = await fetch(urlApi);
+      if (!res.ok) {
+        setError(true);
+        return notification({
+          title: "Error",
+          message: "Failed to load image",
+          type: "error",
+        });
       }
-   }, [open, fileName]);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
+      setViewFile(url);
+    } catch (err) {
+      setError(true);
+      notification({
+        title: "Error",
+        message: "Failed to load image",
+        type: "error",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
 
-   const loadImage = async () => {
-      try {
-         setViewFile("");
-         setLoading(true);
+  useEffect(() => {
+    if (error) {
+      onClose();
+    }
+  }, [error]);
 
-         // detect type of file
-         const { ext, type } = detectFileType(fileName);
-         setTypeFile(type || "");
-
-         // load file
-         const urlApi = '/api/pengaduan/image?folder=' + folder + '&fileName=' + fileName;
-         const res = await fetch(urlApi);
-         if (!res.ok) {
-            setError(true);
-            return notification({
-               title: "Error",
-               message: "Failed to load image",
-               type: "error",
-            });
-         }
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
-
-         setViewFile(url);
-      } catch (err) {
-         setError(true);
-         notification({
-            title: "Error",
-            message: "Failed to load image",
-            type: "error",
-         });
-      } finally {
-         setLoading(false);
-      }
-   };
-
-   useEffect(() => {
-      if (error) {
-         onClose();
-      }
-   }, [error]);
-
-
-
-   return (
-      <Modal
-         opened={open}
-         onClose={onClose}
-         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
-         size="xl"
-         withCloseButton
-         removeScrollProps={{ allowPinchZoom: true }}
-         title="File"
-      >
-         {loading && (
-            <Flex justify="center" align="center" h={200}>
-               <Loader />
-            </Flex>
-         )}
-         {viewFile && (
-            <>
-               {typeFile == "pdf" ? (
-                  <embed src={viewFile} type="application/pdf" width="100%" height="950" />
-               ) : (
-                  <Image
-                     radius="md"
-                     h={300}
-                     fit="contain"
-                     src={viewFile}
-                  />
-               )}
-            </>
-         )}
-      </Modal>
-   );
+  return (
+    <Modal
+      opened={open}
+      onClose={onClose}
+      overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      size="xl"
+      withCloseButton
+      removeScrollProps={{ allowPinchZoom: true }}
+      title="File"
+    >
+      {loading && (
+        <Flex justify="center" align="center" h={200}>
+          <Loader />
+        </Flex>
+      )}
+      {viewFile && (
+        <>
+          {typeFile == "pdf" ? (
+            <embed
+              src={viewFile}
+              type="application/pdf"
+              width="100%"
+              height="950"
+            />
+          ) : (
+            <Image radius="md" h={300} fit="contain" src={viewFile} />
+          )}
+        </>
+      )}
+    </Modal>
+  );
 }

src/components/ModalSurat.tsx

@@ -18,122 +18,129 @@ import SKTidakMampu from "./surat/SKTidakMampu";
 import SKUsaha from "./surat/SKUsaha";
 import SKYatim from "./surat/SKYatimPiatu";
 
-export default function ModalSurat({ open, onClose, surat }: { open: boolean, onClose: () => void, surat: string }) {
-   const A4Style = {
-      width: "210mm",
-      height: "297mm",
-      padding: "20mm",
-      background: "#fff",
-      color: "#000",
-      fontSize: "14px",
-      fontFamily: "Times New Roman",
-   };
-   const hiddenRef = useRef<any>(null);
-   const { data, mutate, isLoading } = useSWR("surat", () =>
-      apiFetch.api.surat.detail.get({
-         query: {
-            id: surat,
-         },
-      }),
-   );
+export default function ModalSurat({
+  open,
+  onClose,
+  surat,
+}: {
+  open: boolean;
+  onClose: () => void;
+  surat: string;
+}) {
+  const A4Style = {
+    width: "210mm",
+    height: "297mm",
+    padding: "20mm",
+    background: "#fff",
+    color: "#000",
+    fontSize: "14px",
+    fontFamily: "Times New Roman",
+  };
+  const hiddenRef = useRef<any>(null);
+  const { data, mutate, isLoading } = useSWR("surat", () =>
+    apiFetch.api.surat.detail.get({
+      query: {
+        id: surat,
+      },
+    }),
+  );
 
-   useShallowEffect(() => {
-      mutate();
-   }, []);
+  useShallowEffect(() => {
+    mutate();
+  }, []);
 
+  const downloadPDF = async () => {
+    const element = hiddenRef.current;
+    const canvas = await html2canvas(element, {
+      scale: 2,
+      useCORS: true,
+      allowTaint: true,
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+    });
 
-   const downloadPDF = async () => {
-      const element = hiddenRef.current;
-      const canvas = await html2canvas(element, {
-         scale: 2,
-         useCORS: true,
-         allowTaint: true,
-         width: element.offsetWidth,
-         height: element.offsetHeight,
-      });
+    const imgData = canvas.toDataURL("image/jpeg", 1.0);
 
-      const imgData = canvas.toDataURL("image/jpeg", 1.0);
+    const pdf = new jsPDF("p", "mm", "a4");
+    const pageWidth = 210; // A4 width mm
+    const pageHeight = 297; // A4 height mm
 
-      const pdf = new jsPDF("p", "mm", "a4");
-      const pageWidth = 210; // A4 width mm
-      const pageHeight = 297; // A4 height mm
+    const imgWidth = pageWidth;
+    const imgHeight = (canvas.height * pageWidth) / canvas.width;
 
-      const imgWidth = pageWidth;
-      const imgHeight = (canvas.height * pageWidth) / canvas.width;
+    pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
 
-      pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
+    pdf.save(`${data?.data?.surat?.nameCategory}.pdf`);
+  };
 
-      pdf.save(`${data?.data?.surat?.nameCategory}.pdf`);
-   };
+  return (
+    <>
+      <Modal
+        opened={open}
+        onClose={() => onClose()}
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+        size="auto"
+        withCloseButton={false}
+        removeScrollProps={{ allowPinchZoom: true }}
+        styles={{
+          header: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "12px 16px",
+          },
+          title: {
+            width: "100%",
+          },
+        }}
+        title={
+          <Flex justify="space-between" align="center" w="100%">
+            <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>
 
-   return (
-      <>
-         <Modal
-            opened={open}
-            onClose={() => onClose()}
-            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
-            size="auto"
-            withCloseButton={false}
-            removeScrollProps={{ allowPinchZoom: true }}
-            styles={{
-               header: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  padding: "12px 16px",
-               },
-               title: {
-                  width: "100%",
-               }
-            }}
-            title={
-               <Flex justify="space-between" align="center" w="100%">
-                  <div style={{ fontSize: 18, fontWeight: 600 }}>
-                     Preview Surat
-                  </div>
+            <Flex gap={8}>
+              <ActionIcon size={32} variant="default">
+                <IconDownload size={20} onClick={downloadPDF} />
+              </ActionIcon>
 
-                  <Flex gap={8}>
-                     <ActionIcon size={32} variant="default">
-                        <IconDownload size={20} onClick={downloadPDF} />
-                     </ActionIcon>
-
-                     <ActionIcon size={32} variant="default" onClick={onClose}>
-                        <IconX size={20} />
-                     </ActionIcon>
-                  </Flex>
-               </Flex>
-            }
-         >
-            <div ref={hiddenRef} style={A4Style}>
-               {
-                  data && data.data
-                     ? data.data.surat.idCategory == "skusaha"
-                        ? <SKUsaha data={data.data} />
-                        : data.data.surat.idCategory == "skkelahiran"
-                           ? <SKKelahiran data={data.data} />
-                           : data.data.surat.idCategory == "skkelakuanbaik"
-                              ? <SKKelakuanBaik data={data.data} />
-                              : data.data.surat.idCategory == "skpenghasilan"
-                                 ? <SKPenghasilan data={data.data} />
-                                 : data.data.surat.idCategory == "sktidakmampu"
-                                    ? <SKTidakMampu data={data.data} />
-                                    : data.data.surat.idCategory == "skyatimpiatu"
-                                       ? <SKYatim data={data.data} />
-                                       : data.data.surat.idCategory == "skdomisiliorganisasi"
-                                          ? <SKDomisiliOrganisasi data={data.data} />
-                                          : data.data.surat.idCategory == "skbedabiodata"
-                                             ? <SKBedaBiodataDiri data={data.data} />
-                                             : data.data.surat.idCategory == "sktempatusaha"
-                                                ? <SKTempatUsaha data={data.data} />
-                                                : data.data.surat.idCategory == "skbelumkawin"
-                                                   ? <SKBelumKawin data={data.data} />
-                                                   : data.data.surat.idCategory == "skkematian"
-                                                      ? <SKKematian data={data.data} />
-                                                      : <></>
-                     : <></>
-               }
-            </div>
-         </Modal>
-      </>
-   )
-}
+              <ActionIcon size={32} variant="default" onClick={onClose}>
+                <IconX size={20} />
+              </ActionIcon>
+            </Flex>
+          </Flex>
+        }
+      >
+        <div ref={hiddenRef} style={A4Style}>
+          {data && data.data ? (
+            data.data.surat.idCategory == "skusaha" ? (
+              <SKUsaha data={data.data} />
+            ) : data.data.surat.idCategory == "skkelahiran" ? (
+              <SKKelahiran data={data.data} />
+            ) : data.data.surat.idCategory == "skkelakuanbaik" ? (
+              <SKKelakuanBaik data={data.data} />
+            ) : data.data.surat.idCategory == "skpenghasilan" ? (
+              <SKPenghasilan data={data.data} />
+            ) : data.data.surat.idCategory == "sktidakmampu" ? (
+              <SKTidakMampu data={data.data} />
+            ) : data.data.surat.idCategory == "skyatimpiatu" ? (
+              <SKYatim data={data.data} />
+            ) : data.data.surat.idCategory == "skdomisiliorganisasi" ? (
+              <SKDomisiliOrganisasi data={data.data} />
+            ) : data.data.surat.idCategory == "skbedabiodata" ? (
+              <SKBedaBiodataDiri data={data.data} />
+            ) : data.data.surat.idCategory == "sktempatusaha" ? (
+              <SKTempatUsaha data={data.data} />
+            ) : data.data.surat.idCategory == "skbelumkawin" ? (
+              <SKBelumKawin data={data.data} />
+            ) : data.data.surat.idCategory == "skkematian" ? (
+              <SKKematian data={data.data} />
+            ) : (
+              <></>
+            )
+          ) : (
+            <></>
+          )}
+        </div>
+      </Modal>
+    </>
+  );
+}

src/components/PermissionRole.tsx

@@ -3,65 +3,66 @@ import { Anchor, Flex, Stack, Text } from "@mantine/core";
 import { useState } from "react";
 
 interface Node {
-   label: string;
-   children: any;
-   actions: string[];
+  label: string;
+  children: any;
+  actions: string[];
 }
 
 function RenderNode({ node }: { node: Node }) {
-   const sub = Object.values(node.children || {});
+  const sub = Object.values(node.children || {});
 
-   return (
-      <Stack pl="md" gap={6}>
-         {/* Title */}
-         <Text size="sm">- {node.label}</Text>
+  return (
+    <Stack pl="md" gap={6}>
+      {/* Title */}
+      <Text size="sm">- {node.label}</Text>
 
-         {/* Children */}
-         {sub.map((child: any, i) => (
-            <RenderNode key={i} node={child} />
-         ))}
-      </Stack>
-   );
+      {/* Children */}
+      {sub.map((child: any, i) => (
+        <RenderNode key={i} node={child} />
+      ))}
+    </Stack>
+  );
 }
 
 function RenderNode2({ node }: { node: Node }) {
-   const sub = Object.values(node.children || {});
+  const sub = Object.values(node.children || {});
 
-   return (
-      <Flex direction={"row"} wrap={'wrap'} gap={6}>
-         {/* Title */}
-         <Text size="sm">{node.label},</Text>
+  return (
+    <Flex direction={"row"} wrap={"wrap"} gap={6}>
+      {/* Title */}
+      <Text size="sm">{node.label},</Text>
 
-         {/* Children */}
-         {sub.map((child: any, i) => (
-            <RenderNode2 key={i} node={child} />
-         ))}
-      </Flex>
-   );
+      {/* Children */}
+      {sub.map((child: any, i) => (
+        <RenderNode2 key={i} node={child} />
+      ))}
+    </Flex>
+  );
 }
 
-export default function PermissionRole({ permissions }: { permissions: string[] }) {
-   const [showAll, setShowAll] = useState(false);
-   if (!permissions?.length) return <Text c="dimmed">-</Text>;
+export default function PermissionRole({
+  permissions,
+}: {
+  permissions: string[];
+}) {
+  const [showAll, setShowAll] = useState(false);
+  if (!permissions?.length) return <Text c="dimmed">-</Text>;
 
-   const groups = groupPermissions(permissions);
-   const rootNodes = Object.values(groups);
+  const groups = groupPermissions(permissions);
+  const rootNodes = Object.values(groups);
 
-   return (
-      <Stack gap="sm">
-         {
-            showAll ?
-               rootNodes.map((node: any, idx) => (
-                  <RenderNode key={idx} node={node} />
-               ))
-               :
-               rootNodes.slice(0, 2).map((node: any, idx) => (
-                  <RenderNode2 key={idx} node={node} />
-               ))
-         }
-         <Anchor size="xs" onClick={() => setShowAll(!showAll)} >
-            {showAll ? "View less" : "View more"}
-         </Anchor>
-      </Stack>
-   );
+  return (
+    <Stack gap="sm">
+      {showAll
+        ? rootNodes.map((node: any, idx) => (
+            <RenderNode key={idx} node={node} />
+          ))
+        : rootNodes
+            .slice(0, 2)
+            .map((node: any, idx) => <RenderNode2 key={idx} node={node} />)}
+      <Anchor size="xs" onClick={() => setShowAll(!showAll)}>
+        {showAll ? "View less" : "View more"}
+      </Anchor>
+    </Stack>
+  );
 }

src/components/PermissionTree.tsx

@@ -1,177 +1,183 @@
 import permissionConfig from "@/lib/listPermission.json";
-import { ActionIcon, Checkbox, Collapse, Group, Stack, Text } from "@mantine/core";
+import {
+  ActionIcon,
+  Checkbox,
+  Collapse,
+  Group,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
 import { useState } from "react";
 
 interface Node {
-   label: string;
-   key: string;
-   children?: Node[];
+  label: string;
+  key: string;
+  children?: Node[];
 }
 
 export default function PermissionTree({
-   selected,
-   onChange,
+  selected,
+  onChange,
 }: {
-   selected: string[];
-   onChange: (val: string[]) => void;
+  selected: string[];
+  onChange: (val: string[]) => void;
 }) {
-   // Ambil semua child dari node
-   const [openNodes, setOpenNodes] = useState<Record<string, boolean>>({});
+  // Ambil semua child dari node
+  const [openNodes, setOpenNodes] = useState<Record<string, boolean>>({});
 
-   function toggleNode(label: string) {
-      setOpenNodes(prev => ({ ...prev, [label]: !prev[label] }));
-   }
+  function toggleNode(label: string) {
+    setOpenNodes((prev) => ({ ...prev, [label]: !prev[label] }));
+  }
 
-   function getAllChildKeys(node: Node): string[] {
-      let result: string[] = [];
-      if (node.children) {
-         node.children.forEach((c) => {
-            result.push(c.key);
-            result = [...result, ...getAllChildKeys(c)];
-         });
+  function getAllChildKeys(node: Node): string[] {
+    let result: string[] = [];
+    if (node.children) {
+      node.children.forEach((c) => {
+        result.push(c.key);
+        result = [...result, ...getAllChildKeys(c)];
+      });
+    }
+    return result;
+  }
+
+  // Dapatkan parentKey, jika ada
+  function getParentKey(key: string) {
+    const split = key.split(".");
+    if (split.length <= 1) return null;
+    split.pop();
+    return split.join(".");
+  }
+
+  // Update parent ke atas secara rekursif
+  function updateParent(next: string[], parentKey: string | null): string[] {
+    if (!parentKey) return next;
+
+    const allChildKeys = findAllChildKeysFromKey(parentKey);
+
+    const selectedChild = allChildKeys.filter((c) => next.includes(c));
+
+    if (selectedChild.length === 0) {
+      // Semua child uncheck → parent uncheck
+      next = next.filter((x) => x !== parentKey);
+    } else if (selectedChild.length === allChildKeys.length) {
+      // Semua child check → parent check
+      if (!next.includes(parentKey)) {
+        next.push(parentKey);
       }
-      return result;
-   }
-
-   // Dapatkan parentKey, jika ada
-   function getParentKey(key: string) {
-      const split = key.split(".");
-      if (split.length <= 1) return null;
-      split.pop();
-      return split.join(".");
-   }
-
-
-   // Update parent ke atas secara rekursif
-   function updateParent(next: string[], parentKey: string | null): string[] {
-      if (!parentKey) return next;
-
-      const allChildKeys = findAllChildKeysFromKey(parentKey);
-
-      const selectedChild = allChildKeys.filter((c) => next.includes(c));
-
-      if (selectedChild.length === 0) {
-         // Semua child uncheck → parent uncheck
-         next = next.filter((x) => x !== parentKey);
-      } else if (selectedChild.length === allChildKeys.length) {
-         // Semua child check → parent check
-         if (!next.includes(parentKey)) {
-            next.push(parentKey);
-         }
-      } else {
-         // Sebagian child check → parent intermediate (checked = true, rendered sebagai indeterminate)
-         if (!next.includes(parentKey)) {
-            next.push(parentKey);
-         }
+    } else {
+      // Sebagian child check → parent intermediate (checked = true, rendered sebagai indeterminate)
+      if (!next.includes(parentKey)) {
+        next.push(parentKey);
       }
+    }
 
-      // Rekursif naik ke atas
-      return updateParent(next, getParentKey(parentKey));
-   }
+    // Rekursif naik ke atas
+    return updateParent(next, getParentKey(parentKey));
+  }
 
-   // dapatkan child dari string key
-   function findAllChildKeysFromKey(parentKey: string) {
-      const list: string[] = [];
+  // dapatkan child dari string key
+  function findAllChildKeysFromKey(parentKey: string) {
+    const list: string[] = [];
 
-      function traverse(nodes: Node[]) {
-         nodes.forEach((n) => {
-            if (n.key.startsWith(parentKey + ".") && n.key !== parentKey) {
-               list.push(n.key);
-            }
-            if (n.children) traverse(n.children);
-         });
-      }
+    function traverse(nodes: Node[]) {
+      nodes.forEach((n) => {
+        if (n.key.startsWith(parentKey + ".") && n.key !== parentKey) {
+          list.push(n.key);
+        }
+        if (n.children) traverse(n.children);
+      });
+    }
 
-      traverse(permissionConfig.menus);
-      return list;
-   }
+    traverse(permissionConfig.menus);
+    return list;
+  }
 
-   const RenderMenu = ({ menu }: { menu: Node }) => {
-      const hasChild = menu.children && menu.children.length > 0;
-      const open = openNodes[menu.label] ?? false;
-      const childKeys = getAllChildKeys(menu);
-      const isChecked = selected.includes(menu.key);
-      const isIndeterminate =
-         !isChecked &&
-         selected.some(
-            (x) =>
-               typeof x === "string" &&
-               x.startsWith(menu.key + ".")
-         );
-
-      function handleCheck() {
-         let next = [...selected];
-
-         if (childKeys.length > 0) {
-            // klik parent
-            if (!isChecked) {
-               next = [...new Set([...next, menu.key, ...childKeys])];
-            } else {
-               next = next.filter((x) => x !== menu.key && !childKeys.includes(x));
-            }
-
-            next = updateParent(next, getParentKey(menu.key));
-            onChange(next);
-            return;
-         }
-
-         // klik child
-         if (isChecked) {
-            next = next.filter((x) => x !== menu.key);
-         } else {
-            next.push(menu.key);
-         }
-
-         next = updateParent(next, getParentKey(menu.key));
-         onChange(next);
-      }
-
-      return (
-         <Stack gap={4}>
-            <Group gap="xs">
-               {menu.children && menu.children.length > 0 ? (
-                  <ActionIcon
-                     variant="subtle"
-                     onClick={() => toggleNode(menu.label)}
-                  >
-                     {openNodes[menu.label] ? (
-                        <IconChevronDown size={16} />
-                     ) : (
-                        <IconChevronRight size={16} />
-                     )}
-                  </ActionIcon>
-               ) : (
-                  <div style={{ width: 28 }} />
-               )}
-
-               <Checkbox
-                  label={menu.label}
-                  checked={isChecked}
-                  indeterminate={isIndeterminate}
-                  onChange={handleCheck}
-               />
-            </Group>
-
-            {menu.children && (
-               <Collapse in={open}>
-                  <Stack gap={4} pl="md">
-                     {menu.children.map((child) => (
-                        <RenderMenu key={child.key} menu={child} />
-                     ))}
-                  </Stack>
-               </Collapse>
-            )}
-         </Stack>
+  const RenderMenu = ({ menu }: { menu: Node }) => {
+    const hasChild = menu.children && menu.children.length > 0;
+    const open = openNodes[menu.label] ?? false;
+    const childKeys = getAllChildKeys(menu);
+    const isChecked = selected.includes(menu.key);
+    const isIndeterminate =
+      !isChecked &&
+      selected.some(
+        (x) => typeof x === "string" && x.startsWith(menu.key + "."),
       );
-   };
 
-   return (
-      <Stack>
-         <Text size="sm">Hak Akses</Text>
-         {permissionConfig.menus.filter((menu: Node) => !menu.key.startsWith("api") && !menu.key.startsWith("credential")).map((menu: Node) => (
-            <RenderMenu key={menu.key} menu={menu} />
-         ))}
+    function handleCheck() {
+      let next = [...selected];
+
+      if (childKeys.length > 0) {
+        // klik parent
+        if (!isChecked) {
+          next = [...new Set([...next, menu.key, ...childKeys])];
+        } else {
+          next = next.filter((x) => x !== menu.key && !childKeys.includes(x));
+        }
+
+        next = updateParent(next, getParentKey(menu.key));
+        onChange(next);
+        return;
+      }
+
+      // klik child
+      if (isChecked) {
+        next = next.filter((x) => x !== menu.key);
+      } else {
+        next.push(menu.key);
+      }
+
+      next = updateParent(next, getParentKey(menu.key));
+      onChange(next);
+    }
+
+    return (
+      <Stack gap={4}>
+        <Group gap="xs">
+          {menu.children && menu.children.length > 0 ? (
+            <ActionIcon variant="subtle" onClick={() => toggleNode(menu.label)}>
+              {openNodes[menu.label] ? (
+                <IconChevronDown size={16} />
+              ) : (
+                <IconChevronRight size={16} />
+              )}
+            </ActionIcon>
+          ) : (
+            <div style={{ width: 28 }} />
+          )}
+
+          <Checkbox
+            label={menu.label}
+            checked={isChecked}
+            indeterminate={isIndeterminate}
+            onChange={handleCheck}
+          />
+        </Group>
+
+        {menu.children && (
+          <Collapse in={open}>
+            <Stack gap={4} pl="md">
+              {menu.children.map((child) => (
+                <RenderMenu key={child.key} menu={child} />
+              ))}
+            </Stack>
+          </Collapse>
+        )}
       </Stack>
-   );
+    );
+  };
+
+  return (
+    <Stack>
+      <Text size="sm">Hak Akses</Text>
+      {permissionConfig.menus
+        .filter(
+          (menu: Node) =>
+            !menu.key.startsWith("api") && !menu.key.startsWith("credential"),
+        )
+        .map((menu: Node) => (
+          <RenderMenu key={menu.key} menu={menu} />
+        ))}
+    </Stack>
+  );
 }

src/components/ProfileUser.tsx

@@ -13,7 +13,11 @@ import type { JsonValue } from "generated/prisma/runtime/library";
 import { useEffect, useState } from "react";
 import notification from "./notificationGlobal";
 
-export default function ProfileUser({ permissions }: { permissions: JsonValue[] }) {
+export default function ProfileUser({
+  permissions,
+}: {
+  permissions: JsonValue[];
+}) {
   const [opened, setOpened] = useState(false);
   const [openedPassword, setOpenedPassword] = useState(false);
   const [pwdBaru, setPwdBaru] = useState("");
@@ -127,21 +131,17 @@ export default function ProfileUser({ permissions }: { permissions: JsonValue[]
             Profile Pengguna
           </Title>
           <Group gap="md">
-            {
-              permissions.includes("setting.profile.edit") && (
-                <Button variant="light" onClick={() => setOpened(true)}>
-                  Edit
-                </Button>
-              )
-            }
+            {permissions.includes("setting.profile.edit") && (
+              <Button variant="light" onClick={() => setOpened(true)}>
+                Edit
+              </Button>
+            )}
 
-            {
-              permissions.includes("setting.profile.password") && (
-                <Button variant="light" onClick={() => setOpenedPassword(true)}>
-                  Ubah Password
-                </Button>
-              )
-            }
+            {permissions.includes("setting.profile.password") && (
+              <Button variant="light" onClick={() => setOpenedPassword(true)}>
+                Ubah Password
+              </Button>
+            )}
           </Group>
         </Flex>
         <Divider my={0} />

src/components/UserRoleSetting.tsx

@@ -1,17 +1,17 @@
 import apiFetch from "@/lib/apiFetch";
 import {
-   ActionIcon,
-   Button,
-   Divider,
-   Flex,
-   Group,
-   Input,
-   Modal,
-   Stack,
-   Table,
-   Text,
-   Title,
-   Tooltip
+  ActionIcon,
+  Button,
+  Divider,
+  Flex,
+  Group,
+  Input,
+  Modal,
+  Stack,
+  Table,
+  Text,
+  Title,
+  Tooltip,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
@@ -24,404 +24,449 @@ import PermissionRole from "./PermissionRole";
 import PermissionTree from "./PermissionTree";
 
 interface MenuNode {
-   key: string;
-   label: string;
-   default: boolean;
-   children?: MenuNode[];
+  key: string;
+  label: string;
+  default: boolean;
+  children?: MenuNode[];
 }
 
-export default function UserRoleSetting({ permissions }: { permissions: JsonValue[] }) {
-   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("role-list", () =>
-      apiFetch.api.user.role.get(),
-   );
-   const list = data?.data || [];
-   const listRole = dataRole?.data || [];
-   const [dataEdit, setDataEdit] = useState({
-      id: "",
-      name: "",
-      permissions: [],
-   });
-   const [dataTambah, setDataTambah] = useState({
-      name: "",
-      permissions: [],
-   });
-   const [error, setError] = useState({
-      name: false,
-      permissions: false,
-   });
+export default function UserRoleSetting({
+  permissions,
+}: {
+  permissions: JsonValue[];
+}) {
+  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("role-list", () =>
+    apiFetch.api.user.role.get(),
+  );
+  const list = data?.data || [];
+  const listRole = dataRole?.data || [];
+  const [dataEdit, setDataEdit] = useState({
+    id: "",
+    name: "",
+    permissions: [],
+  });
+  const [dataTambah, setDataTambah] = useState({
+    name: "",
+    permissions: [],
+  });
+  const [error, setError] = useState({
+    name: false,
+    permissions: false,
+  });
 
-   useShallowEffect(() => {
-      mutate();
-   }, []);
+  useShallowEffect(() => {
+    mutate();
+  }, []);
 
-   async function handleCreate() {
-      try {
-         setBtnLoading(true);
-         const res = await apiFetch.api.user["role-create"].post(dataTambah as any);
-         if (res.status === 200) {
-            mutate();
-            closeTambah();
-            setDataTambah({
-               name: "",
-               permissions: [],
-            });
-            notification({
-               title: "Success",
-               message: "Your role have been saved",
-               type: "success",
-            });
-         } else {
-            notification({
-               title: "Error",
-               message: "Failed to create role",
-               type: "error",
-            });
-         }
-      } catch (error) {
-         console.error(error);
-         notification({
-            title: "Error",
-            message: "Failed to create role",
-            type: "error",
-         });
-      } finally {
-         setBtnLoading(false);
-      }
-   }
-
-   async function handleEdit() {
-      try {
-         setBtnLoading(true);
-         const res = await apiFetch.api.user["role-update"].post(dataEdit as any);
-         if (res.status === 200) {
-            mutate();
-            close();
-            notification({
-               title: "Success",
-               message: "Your role have been saved",
-               type: "success",
-            });
-         } else {
-            notification({
-               title: "Error",
-               message: "Failed to edit role",
-               type: "error",
-            });
-         }
-      } catch (error) {
-         console.error(error);
-         notification({
-            title: "Error",
-            message: "Failed to edit role",
-            type: "error",
-         });
-      } finally {
-         setBtnLoading(false);
-      }
-   }
-
-   async function handleDelete() {
-      try {
-         setBtnLoading(true);
-         const res = await apiFetch.api.user["role-delete"].post({ id: dataDelete });
-         if (res.status === 200) {
-            mutate();
-            closeDelete();
-            notification({
-               title: "Success",
-               message: "Your role have been deleted",
-               type: "success",
-            });
-         } else {
-            notification({
-               title: "Error",
-               message: "Failed to delete role",
-               type: "error",
-            });
-         }
-      } catch (error) {
-         console.error(error);
-         notification({
-            title: "Error",
-            message: "Failed to delete role",
-            type: "error",
-         });
-      } finally {
-         setBtnLoading(false);
-      }
-   }
-
-   function chooseEdit({ data }: { data: { id: string; name: string; permissions: []; }; }) {
-      setDataEdit({
-         id: data.id, name: data.name, permissions: data.permissions ? data.permissions : []
-      });
-      open();
-   }
-
-   function onValidation({ kat, value, aksi, }: { kat: "name" | "permission"; value: string | null; aksi: "edit" | "tambah"; }) {
-      if (value == null || value.length < 1) {
-         setBtnDisable(true);
-         setError({ ...error, [kat]: true });
+  async function handleCreate() {
+    try {
+      setBtnLoading(true);
+      const res = await apiFetch.api.user["role-create"].post(
+        dataTambah as any,
+      );
+      if (res.status === 200) {
+        mutate();
+        closeTambah();
+        setDataTambah({
+          name: "",
+          permissions: [],
+        });
+        notification({
+          title: "Success",
+          message: "Your role have been saved",
+          type: "success",
+        });
       } else {
-         setBtnDisable(false);
-         setError({ ...error, [kat]: false });
+        notification({
+          title: "Error",
+          message: "Failed to create role",
+          type: "error",
+        });
       }
-
-      if (aksi === "edit") {
-         setDataEdit({ ...dataEdit, [kat]: value });
-      } else {
-         setDataTambah({ ...dataTambah, [kat]: value });
-      }
-   }
-
-   function buildOrderList(menus: MenuNode[]): string[] {
-      const list: string[] = [];
-
-      const traverse = (nodes: MenuNode[]) => {
-         nodes.forEach((node) => {
-            list.push(node.key);
-            if (node.children) traverse(node.children);
-         });
-      };
-
-      traverse(menus);
-      return list;
-   }
-
-   function sortByJsonOrder(arrayData: string[]): string[] {
-      const orderList = buildOrderList(listMenu.menus);
-
-      return arrayData.sort((a, b) => {
-         return orderList.indexOf(a) - orderList.indexOf(b);
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Error",
+        message: "Failed to create role",
+        type: "error",
       });
-   }
+    } finally {
+      setBtnLoading(false);
+    }
+  }
 
-   useShallowEffect(() => {
-      if (dataEdit.name.length > 0) {
-         setBtnDisable(false);
+  async function handleEdit() {
+    try {
+      setBtnLoading(true);
+      const res = await apiFetch.api.user["role-update"].post(dataEdit as any);
+      if (res.status === 200) {
+        mutate();
+        close();
+        notification({
+          title: "Success",
+          message: "Your role have been saved",
+          type: "success",
+        });
+      } else {
+        notification({
+          title: "Error",
+          message: "Failed to edit role",
+          type: "error",
+        });
       }
-   }, [dataEdit.id]);
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Error",
+        message: "Failed to edit role",
+        type: "error",
+      });
+    } finally {
+      setBtnLoading(false);
+    }
+  }
 
-   return (
-      <>
-         {/* Modal Edit */}
-         <Modal
-            opened={opened}
-            onClose={close}
-            title={"Edit"}
-            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
-            size={"lg"}
-         >
-            <Stack gap="ld">
-               <Input.Wrapper label="Nama Role">
-                  <Input
-                     value={dataEdit.name}
-                     onChange={(e) =>
-                        onValidation({
-                           kat: "name",
-                           value: e.target.value,
-                           aksi: "edit",
-                        })
-                     }
-                  />
-               </Input.Wrapper>
-               <PermissionTree
-                  selected={dataEdit.permissions}
-                  onChange={(permissions) => {
-                     setDataEdit({ ...dataEdit, permissions: sortByJsonOrder(permissions) as never[] });
-                  }}
-               />
-               <Group justify="center" grow>
-                  <Button variant="light" onClick={close}>
-                     Batal
-                  </Button>
-                  <Button
-                     variant="filled"
-                     onClick={handleEdit}
-                     disabled={
-                        btnDisable ||
-                        dataEdit.name.length < 1 ||
-                        dataEdit.permissions?.length < 1
-                     }
-                     loading={btnLoading}
-                  >
-                     Simpan
-                  </Button>
-               </Group>
-            </Stack>
-         </Modal>
+  async function handleDelete() {
+    try {
+      setBtnLoading(true);
+      const res = await apiFetch.api.user["role-delete"].post({
+        id: dataDelete,
+      });
+      if (res.status === 200) {
+        mutate();
+        closeDelete();
+        notification({
+          title: "Success",
+          message: "Your role have been deleted",
+          type: "success",
+        });
+      } else {
+        notification({
+          title: "Error",
+          message: "Failed to delete role",
+          type: "error",
+        });
+      }
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Error",
+        message: "Failed to delete role",
+        type: "error",
+      });
+    } finally {
+      setBtnLoading(false);
+    }
+  }
 
-         {/* Modal Tambah */}
-         <Modal
-            opened={openedTambah}
-            onClose={closeTambah}
-            title={"Tambah"}
-            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
-            size={"lg"}
-         >
-            <Stack gap="ld">
-               <Input.Wrapper
-                  label="Nama Role"
-                  description=""
-                  error={error.name ? "Field is required" : ""}
-               >
-                  <Input
-                     value={dataTambah.name}
-                     onChange={(e) =>
-                        onValidation({
-                           kat: "name",
-                           value: e.target.value,
-                           aksi: "tambah",
-                        })
-                     }
-                  />
-               </Input.Wrapper>
-               <PermissionTree
-                  selected={dataTambah.permissions}
-                  onChange={(permissions) => {
-                     setDataTambah({ ...dataTambah, permissions: sortByJsonOrder(permissions) as never[] });
-                  }}
-               />
-               <Group justify="center" grow>
-                  <Button variant="light" onClick={closeTambah}>
-                     Batal
-                  </Button>
-                  <Button
-                     variant="filled"
-                     onClick={handleCreate}
-                     disabled={
-                        btnDisable ||
-                        dataTambah.name.length < 1 ||
-                        dataTambah.permissions.length < 1
-                     }
-                     loading={btnLoading}
-                  >
-                     Simpan
-                  </Button>
-               </Group>
-            </Stack>
-         </Modal>
+  function chooseEdit({
+    data,
+  }: {
+    data: { id: string; name: string; permissions: [] };
+  }) {
+    setDataEdit({
+      id: data.id,
+      name: data.name,
+      permissions: data.permissions ? data.permissions : [],
+    });
+    open();
+  }
 
-         {/* 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 role 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>
+  function onValidation({
+    kat,
+    value,
+    aksi,
+  }: {
+    kat: "name" | "permission";
+    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 });
+    }
 
-         <Stack gap={"md"}>
-            <Flex align="center" justify="space-between">
-               <Title order={4} c="gray.2">
-                  Daftar Role
-               </Title>
-               {
-                  permissions.includes('setting.user_role.tambah') && (
-                     <Tooltip label="Tambah Role">
-                        <Button
-                           variant="light"
-                           leftSection={<IconPlus size={20} />}
-                           onClick={openTambah}
+    if (aksi === "edit") {
+      setDataEdit({ ...dataEdit, [kat]: value });
+    } else {
+      setDataTambah({ ...dataTambah, [kat]: value });
+    }
+  }
+
+  function buildOrderList(menus: MenuNode[]): string[] {
+    const list: string[] = [];
+
+    const traverse = (nodes: MenuNode[]) => {
+      nodes.forEach((node) => {
+        list.push(node.key);
+        if (node.children) traverse(node.children);
+      });
+    };
+
+    traverse(menus);
+    return list;
+  }
+
+  function sortByJsonOrder(arrayData: string[]): string[] {
+    const orderList = buildOrderList(listMenu.menus);
+
+    return arrayData.sort((a, b) => {
+      return orderList.indexOf(a) - orderList.indexOf(b);
+    });
+  }
+
+  useShallowEffect(() => {
+    if (dataEdit.name.length > 0) {
+      setBtnDisable(false);
+    }
+  }, [dataEdit.id]);
+
+  return (
+    <>
+      {/* Modal Edit */}
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={"Edit"}
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+        size={"lg"}
+      >
+        <Stack gap="ld">
+          <Input.Wrapper label="Nama Role">
+            <Input
+              value={dataEdit.name}
+              onChange={(e) =>
+                onValidation({
+                  kat: "name",
+                  value: e.target.value,
+                  aksi: "edit",
+                })
+              }
+            />
+          </Input.Wrapper>
+          <PermissionTree
+            selected={dataEdit.permissions}
+            onChange={(permissions) => {
+              setDataEdit({
+                ...dataEdit,
+                permissions: sortByJsonOrder(permissions) as never[],
+              });
+            }}
+          />
+          <Group justify="center" grow>
+            <Button variant="light" onClick={close}>
+              Batal
+            </Button>
+            <Button
+              variant="filled"
+              onClick={handleEdit}
+              disabled={
+                btnDisable ||
+                dataEdit.name.length < 1 ||
+                dataEdit.permissions?.length < 1
+              }
+              loading={btnLoading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* Modal Tambah */}
+      <Modal
+        opened={openedTambah}
+        onClose={closeTambah}
+        title={"Tambah"}
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+        size={"lg"}
+      >
+        <Stack gap="ld">
+          <Input.Wrapper
+            label="Nama Role"
+            description=""
+            error={error.name ? "Field is required" : ""}
+          >
+            <Input
+              value={dataTambah.name}
+              onChange={(e) =>
+                onValidation({
+                  kat: "name",
+                  value: e.target.value,
+                  aksi: "tambah",
+                })
+              }
+            />
+          </Input.Wrapper>
+          <PermissionTree
+            selected={dataTambah.permissions}
+            onChange={(permissions) => {
+              setDataTambah({
+                ...dataTambah,
+                permissions: sortByJsonOrder(permissions) as never[],
+              });
+            }}
+          />
+          <Group justify="center" grow>
+            <Button variant="light" onClick={closeTambah}>
+              Batal
+            </Button>
+            <Button
+              variant="filled"
+              onClick={handleCreate}
+              disabled={
+                btnDisable ||
+                dataTambah.name.length < 1 ||
+                dataTambah.permissions.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 role 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 Role
+          </Title>
+          {permissions.includes("setting.user_role.tambah") && (
+            <Tooltip label="Tambah Role">
+              <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>Role</Table.Th>
+                <Table.Th>Permission</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 w={"150"}>{v.name}</Table.Td>
+                    <Table.Td>
+                      <PermissionRole permissions={v.permissions} />
+                    </Table.Td>
+                    <Table.Td w={"100"}>
+                      <Group>
+                        <Tooltip
+                          label={
+                            permissions.includes("setting.user_role.edit")
+                              ? "Edit Role"
+                              : "Edit Role - Anda tidak memiliki akses"
+                          }
                         >
-                           Tambah
-                        </Button>
-                     </Tooltip>
-                  )
-               }
-            </Flex>
-            <Divider my={0} />
-            <Stack gap={"md"}>
-               <Table highlightOnHover>
-                  <Table.Thead>
-                     <Table.Tr>
-                        <Table.Th>Role</Table.Th>
-                        <Table.Th>Permission</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 w={"150"}>{v.name}</Table.Td>
-                              <Table.Td>
-                                 <PermissionRole permissions={v.permissions} />
-                              </Table.Td>
-                              <Table.Td w={"100"}>
-                                 <Group>
-                                    <Tooltip label={permissions.includes('setting.user_role.edit') ? "Edit Role" : "Edit Role - Anda tidak memiliki akses"}>
-                                       <ActionIcon
-                                          variant="light"
-                                          size="sm"
-                                          style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
-                                          onClick={() => chooseEdit({ data: v })}
-                                          disabled={!permissions.includes('setting.user_role.edit') || v.id == "developer"}
-                                       >
-                                          <IconEdit size={20} />
-                                       </ActionIcon>
-                                    </Tooltip>
-                                    <Tooltip label={permissions.includes('setting.user_role.delete') ? "Delete Role" : "Delete Role - Anda tidak memiliki akses"}>
-                                       <ActionIcon
-                                          variant="light"
-                                          size="sm"
-                                          color="red"
-                                          style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
-                                          onClick={() => {
-                                             setDataDelete(v.id);
-                                             openDelete();
-                                          }}
-                                          disabled={!permissions.includes('setting.user_role.delete') || v.id == "developer"}
-                                       >
-                                          <IconTrash size={20} />
-                                       </ActionIcon>
-                                    </Tooltip>
-                                 </Group>
-                              </Table.Td>
-                           </Table.Tr>
-                        ))
-                     ) : (
-                        <Table.Tr>
-                           <Table.Td colSpan={5} align="center">
-                              Data Role Tidak Ditemukan
-                           </Table.Td>
-                        </Table.Tr>
-                     )}
-                  </Table.Tbody>
-               </Table>
-            </Stack>
-         </Stack>
-      </>
-   );
+                          <ActionIcon
+                            variant="light"
+                            size="sm"
+                            style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                            onClick={() => chooseEdit({ data: v })}
+                            disabled={
+                              !permissions.includes("setting.user_role.edit") ||
+                              v.id == "developer"
+                            }
+                          >
+                            <IconEdit size={20} />
+                          </ActionIcon>
+                        </Tooltip>
+                        <Tooltip
+                          label={
+                            permissions.includes("setting.user_role.delete")
+                              ? "Delete Role"
+                              : "Delete Role - Anda tidak memiliki akses"
+                          }
+                        >
+                          <ActionIcon
+                            variant="light"
+                            size="sm"
+                            color="red"
+                            style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                            onClick={() => {
+                              setDataDelete(v.id);
+                              openDelete();
+                            }}
+                            disabled={
+                              !permissions.includes(
+                                "setting.user_role.delete",
+                              ) || v.id == "developer"
+                            }
+                          >
+                            <IconTrash size={20} />
+                          </ActionIcon>
+                        </Tooltip>
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                ))
+              ) : (
+                <Table.Tr>
+                  <Table.Td colSpan={5} align="center">
+                    Data Role Tidak Ditemukan
+                  </Table.Td>
+                </Table.Tr>
+              )}
+            </Table.Tbody>
+          </Table>
+        </Stack>
+      </Stack>
+    </>
+  );
 }

src/components/UserSetting.tsx

@@ -21,7 +21,11 @@ import { useState } from "react";
 import useSWR from "swr";
 import notification from "./notificationGlobal";
 
-export default function UserSetting({ permissions }: { permissions: JsonValue[] }) {
+export default function UserSetting({
+  permissions,
+}: {
+  permissions: JsonValue[];
+}) {
   const [btnDisable, setBtnDisable] = useState(true);
   const [btnLoading, setBtnLoading] = useState(false);
   const [opened, { open, close }] = useDisclosure(false);
@@ -437,20 +441,17 @@ export default function UserSetting({ permissions }: { permissions: JsonValue[]
           <Title order={4} c="gray.2">
             Daftar User
           </Title>
-          {
-            permissions.includes('setting.user.tambah') && (
-              <Tooltip label="Tambah User">
-                <Button
-                  variant="light"
-                  leftSection={<IconPlus size={20} />}
-                  onClick={openTambah}
-                >
-                  Tambah
-                </Button>
-              </Tooltip>
-            )
-          }
-
+          {permissions.includes("setting.user.tambah") && (
+            <Tooltip label="Tambah User">
+              <Button
+                variant="light"
+                leftSection={<IconPlus size={20} />}
+                onClick={openTambah}
+              >
+                Tambah
+              </Button>
+            </Tooltip>
+          )}
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
@@ -474,18 +475,33 @@ export default function UserSetting({ permissions }: { permissions: JsonValue[]
                     <Table.Td>{v.nameRole}</Table.Td>
                     <Table.Td>
                       <Group>
-                        <Tooltip label={permissions.includes('setting.user.edit') ? "Edit User" : "Edit User - Anda tidak memiliki akses"}>
+                        <Tooltip
+                          label={
+                            permissions.includes("setting.user.edit")
+                              ? "Edit User"
+                              : "Edit User - Anda tidak memiliki akses"
+                          }
+                        >
                           <ActionIcon
                             variant="light"
                             size="sm"
                             style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
                             onClick={() => chooseEdit({ data: v })}
-                            disabled={!permissions.includes('setting.user.edit') || v.roleId == "developer"}
+                            disabled={
+                              !permissions.includes("setting.user.edit") ||
+                              v.roleId == "developer"
+                            }
                           >
                             <IconEdit size={20} />
                           </ActionIcon>
                         </Tooltip>
-                        <Tooltip label={permissions.includes('setting.user.delete') ? "Delete User" : "Delete User - Anda tidak memiliki akses"}>
+                        <Tooltip
+                          label={
+                            permissions.includes("setting.user.delete")
+                              ? "Delete User"
+                              : "Delete User - Anda tidak memiliki akses"
+                          }
+                        >
                           <ActionIcon
                             variant="light"
                             size="sm"
@@ -495,7 +511,10 @@ export default function UserSetting({ permissions }: { permissions: JsonValue[]
                               setDataDelete(v.id);
                               openDelete();
                             }}
-                            disabled={!permissions.includes('setting.user.delete') || v.roleId == "developer"}
+                            disabled={
+                              !permissions.includes("setting.user.delete") ||
+                              v.roleId == "developer"
+                            }
                           >
                             <IconTrash size={20} />
                           </ActionIcon>

src/components/surat/SKBedaBiodataDiri.tsx

@@ -3,157 +3,242 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKBedaBiodataDiri({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>();
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>();
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-
-   return (
-      <div style={{ lineHeight: "1.25" }}>
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "15px" }}>
-            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}<br />
-            Kode Pos: {data.setting.desaPos}
-         </div>
-
-         {/* JUDUL */}
-         <div style={{ textAlign: "center" }}>
-            <b><u>SURAT KETERANGAN BEDA BIODATA DIRI</u></b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* YANG BERTANDA TANGAN */}
-         <div style={{ marginTop: "15px" }}>
-            Yang bertanda tangan di bawah ini:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr>
-                     <td style={{ width: "160px" }}>Nama</td>
-                     <td style={{ width: "10px" }}>:</td>
-                     <td>{data.setting.perbekelNama}</td>
-                  </tr>
-                  <tr>
-                     <td>Jabatan</td>
-                     <td>:</td>
-                     <td>{data.setting.perbekelJabatan + " " + data.setting.desaNama}</td>
-                  </tr>
-                  <tr>
-                     <td>Kecamatan</td>
-                     <td>:</td>
-                     <td>{data.setting.desaKecamatan}</td>
-                  </tr>
-                  <tr>
-                     <td>Kabupaten</td>
-                     <td>:</td>
-                     <td>{data.setting.desaKabupaten}</td>
-                  </tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
-         <div style={{ marginTop: "15px" }}>
-            Dengan ini menerangkan bahwa berdasarkan keterangan dari yang bersangkutan:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
-                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
-                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
-                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "15px" }}>
-            Bahwa orang tersebut di atas <b>benar merupakan orang yang sama</b>, meskipun terdapat <b>perbedaan data pribadi (biodata)</b> pada beberapa dokumen, sebagai berikut:
-         </div>
-
-         <div style={{ marginTop: "15px" }}>
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>1. Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
-                  <tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "15px" }}>
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>2. Tempat/Tanggal Lahir</td><td style={{ width: "10px" }}>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
-                  <tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
-                  <tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "15px" }}>
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>3. Nama Orang Tua</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama orang tua")}</td></tr>
-                  <tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
-                  <tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "15px" }}>
-            Perbedaan tersebut terjadi karena <b>kesalahan penulisan/pencatatan administratif</b>, namun yang bersangkutan adalah <b>orang yang sama</b>.
-            <br />
-            Dengan surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan sebagaimana mestinya.
-         </div>
-
-         <div style={{ marginTop: "15px" }}>
-            Dikeluarkan di {data.setting.desaNama} <br />
-            Pada tanggal {data.surat.createdAt}
-         </div>
-
-         {/* TANDA TANGAN */}
-         <div style={{ marginTop: "0px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
-            <div style={{ textAlign: "center" }}>
-               Kepala Desa / Lurah {data.setting.desaNama}
-               <br /><br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.25" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "15px" }}>
+        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}
+        <br />
+        Kode Pos: {data.setting.desaPos}
       </div>
-   );
+
+      {/* JUDUL */}
+      <div style={{ textAlign: "center" }}>
+        <b>
+          <u>SURAT KETERANGAN BEDA BIODATA DIRI</u>
+        </b>
+        <br />
+        Nomor: {data.surat.noSurat}
+      </div>
+
+      {/* YANG BERTANDA TANGAN */}
+      <div style={{ marginTop: "15px" }}>
+        Yang bertanda tangan di bawah ini:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{data.setting.perbekelNama}</td>
+            </tr>
+            <tr>
+              <td>Jabatan</td>
+              <td>:</td>
+              <td>
+                {data.setting.perbekelJabatan + " " + data.setting.desaNama}
+              </td>
+            </tr>
+            <tr>
+              <td>Kecamatan</td>
+              <td>:</td>
+              <td>{data.setting.desaKecamatan}</td>
+            </tr>
+            <tr>
+              <td>Kabupaten</td>
+              <td>:</td>
+              <td>{data.setting.desaKabupaten}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+      <div style={{ marginTop: "15px" }}>
+        Dengan ini menerangkan bahwa berdasarkan keterangan dari yang
+        bersangkutan:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>Tempat/Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir")}</td>
+            </tr>
+            <tr>
+              <td>Jenis Kelamin</td>
+              <td>:</td>
+              <td>{getValue("jenis kelamin")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat")}</td>
+            </tr>
+            <tr>
+              <td>Pekerjaan</td>
+              <td>:</td>
+              <td>{getValue("pekerjaan")}</td>
+            </tr>
+            <tr>
+              <td>NIK</td>
+              <td>:</td>
+              <td>{getValue("nik")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "15px" }}>
+        Bahwa orang tersebut di atas <b>benar merupakan orang yang sama</b>,
+        meskipun terdapat <b>perbedaan data pribadi (biodata)</b> pada beberapa
+        dokumen, sebagai berikut:
+      </div>
+
+      <div style={{ marginTop: "15px" }}>
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>1. Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>Tertulis pada dokumen A</td>
+              <td>:</td>
+              <td>{getValue("tertulis pada dokumen a")}</td>
+            </tr>
+            <tr>
+              <td>Tertulis pada dokumen B</td>
+              <td>:</td>
+              <td>{getValue("tertulis pada dokumen b")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "15px" }}>
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>2. Tempat/Tanggal Lahir</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("tempat tanggal lahir")}</td>
+            </tr>
+            <tr>
+              <td>Tertulis pada dokumen A</td>
+              <td>:</td>
+              <td>{getValue("tertulis pada dokumen a")}</td>
+            </tr>
+            <tr>
+              <td>Tertulis pada dokumen B</td>
+              <td>:</td>
+              <td>{getValue("tertulis pada dokumen b")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "15px" }}>
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>3. Nama Orang Tua</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama orang tua")}</td>
+            </tr>
+            <tr>
+              <td>Tertulis pada dokumen A</td>
+              <td>:</td>
+              <td>{getValue("tertulis pada dokumen a")}</td>
+            </tr>
+            <tr>
+              <td>Tertulis pada dokumen B</td>
+              <td>:</td>
+              <td>{getValue("tertulis pada dokumen b")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "15px" }}>
+        Perbedaan tersebut terjadi karena{" "}
+        <b>kesalahan penulisan/pencatatan administratif</b>, namun yang
+        bersangkutan adalah <b>orang yang sama</b>.
+        <br />
+        Dengan surat keterangan ini dibuat dengan sebenar-benarnya untuk
+        dipergunakan sebagaimana mestinya.
+      </div>
+
+      <div style={{ marginTop: "15px" }}>
+        Dikeluarkan di {data.setting.desaNama} <br />
+        Pada tanggal {data.surat.createdAt}
+      </div>
+
+      {/* TANDA TANGAN */}
+      <div
+        style={{
+          marginTop: "0px",
+          display: "flex",
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          Kepala Desa / Lurah {data.setting.desaNama}
+          <br />
+          <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKBelumKawin.tsx

@@ -3,108 +3,166 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKBelumKawin({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>();
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>();
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.3" }}>
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "10px" }}>
-            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}<br />
-            Kode Pos: {data.setting.desaPos}
-         </div>
-
-         {/* JUDUL */}
-         <div style={{ textAlign: "center", margin: "20px 0" }}>
-            <b><u>SURAT KETERANGAN BELUM KAWIN</u></b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* YANG BERTANDA TANGAN */}
-         <div style={{ marginTop: "15px" }}>
-            Yang bertanda tangan di bawah ini {data.setting.perbekelJabatan} {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan}, Kabupaten {data.setting.desaKabupaten}, dengan ini menerangkan bahwa:
-         </div>
-
-         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
-         <div style={{ marginTop: "20px" }}>
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
-                  <tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
-                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
-                  <tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
-                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Berdasarkan keterangan dari yang bersangkutan dan data administrasi kependudukan yang ada di Desa {data.setting.desaNama},
-            yang bersangkutan benar sampai saat ini belum pernah menikah, baik secara adat, agama, maupun hukum negara.
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Dikeluarkan di {data.setting.desaNama} <br />
-            Pada tanggal {data.surat.createdAt}
-         </div>
-
-         {/* TANDA TANGAN */}
-         <div style={{ marginTop: "40px", display: "flex", justifyContent: "space-between", width: "100%" }}>
-            <div style={{ textAlign: "center" }}>
-               <br /><br />
-               Pemohon
-               <br /><br /><br /><br /><br /><br />
-               <u>{getValue("nama")}</u> <br />
-            </div>
-            <div style={{ textAlign: "center" }}>
-               <br /><br />
-               Kepala Desa / Lurah {data.setting.desaNama}
-               <br /><br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.3" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "10px" }}>
+        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}
+        <br />
+        Kode Pos: {data.setting.desaPos}
       </div>
-   );
+
+      {/* JUDUL */}
+      <div style={{ textAlign: "center", margin: "20px 0" }}>
+        <b>
+          <u>SURAT KETERANGAN BELUM KAWIN</u>
+        </b>
+        <br />
+        Nomor: {data.surat.noSurat}
+      </div>
+
+      {/* YANG BERTANDA TANGAN */}
+      <div style={{ marginTop: "15px" }}>
+        Yang bertanda tangan di bawah ini {data.setting.perbekelJabatan}{" "}
+        {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan},
+        Kabupaten {data.setting.desaKabupaten}, dengan ini menerangkan bahwa:
+      </div>
+
+      {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+      <div style={{ marginTop: "20px" }}>
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>NIK</td>
+              <td>:</td>
+              <td>{getValue("nik")}</td>
+            </tr>
+            <tr>
+              <td>Tempat/Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir")}</td>
+            </tr>
+            <tr>
+              <td>Jenis Kelamin</td>
+              <td>:</td>
+              <td>{getValue("jenis kelamin")}</td>
+            </tr>
+            <tr>
+              <td>Agama</td>
+              <td>:</td>
+              <td>{getValue("agama")}</td>
+            </tr>
+            <tr>
+              <td>Pekerjaan</td>
+              <td>:</td>
+              <td>{getValue("pekerjaan")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Berdasarkan keterangan dari yang bersangkutan dan data administrasi
+        kependudukan yang ada di Desa {data.setting.desaNama}, yang bersangkutan
+        benar sampai saat ini belum pernah menikah, baik secara adat, agama,
+        maupun hukum negara.
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat
+        digunakan sebagaimana mestinya.
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Dikeluarkan di {data.setting.desaNama} <br />
+        Pada tanggal {data.surat.createdAt}
+      </div>
+
+      {/* TANDA TANGAN */}
+      <div
+        style={{
+          marginTop: "40px",
+          display: "flex",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          <br />
+          <br />
+          Pemohon
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <u>{getValue("nama")}</u> <br />
+        </div>
+        <div style={{ textAlign: "center" }}>
+          <br />
+          <br />
+          Kepala Desa / Lurah {data.setting.desaNama}
+          <br />
+          <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKDomisiliOrganisasi.tsx

@@ -3,121 +3,163 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKDomisiliOrganisasi({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.3" }}>
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "10px" }}>
-            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}<br />
-            Kode Pos: {data.setting.desaPos}
-         </div>
-
-         {/* JUDUL */}
-         <div style={{ textAlign: "center", margin: "20px 0" }}>
-            <b><u>SURAT KETERANGAN DOMISILI ORGANISASI</u></b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* YANG BERTANDA TANGAN */}
-         <div style={{ marginTop: "15px" }}>
-            Yang bertanda tangan di bawah ini:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr>
-                     <td style={{ width: "160px" }}>Nama</td>
-                     <td style={{ width: "10px" }}>:</td>
-                     <td>{data.setting.perbekelNama}</td>
-                  </tr>
-                  <tr>
-                     <td>Jabatan</td>
-                     <td>:</td>
-                     <td>{data.setting.perbekelJabatan}</td>
-                  </tr>
-                  <tr>
-                     <td>Alamat Kantor</td>
-                     <td>:</td>
-                     <td>{data.setting.desaAlamat}</td>
-                  </tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
-         <div style={{ marginTop: "20px" }}>
-            Dengan ini menerangkan bahwa:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Nama Organisasi</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>Jenis Organisasi</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
-                  <tr><td>Nomor Telepon</td><td>:</td><td>{getValue("negara")}</td></tr>
-                  <tr><td>Nama Pimpinan</td><td>:</td><td>{getValue("agama")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Benar bahwa organisasi tersebut berdomisili di wilayah Desa / Kelurahan {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan}, Kabupaten {data.setting.desaKabupaten}.
-            Dan sampai saat ini masih aktif melakukan kegiatan sesuai dengan bidangnya.<br />
-            Surat keterangan ini dibuat untuk keperluan {getValue("keperluan")}.
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Dikeluarkan di {data.setting.desaNama} <br />
-            Pada tanggal {data.surat.createdAt}
-         </div>
-
-         {/* TANDA TANGAN */}
-         <div style={{ marginTop: "40px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
-            <div style={{ textAlign: "center" }}>
-               <br />
-               Kepala Desa / Lurah {data.setting.desaNama}
-               <br /><br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.3" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "10px" }}>
+        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}
+        <br />
+        Kode Pos: {data.setting.desaPos}
       </div>
-   );
+
+      {/* JUDUL */}
+      <div style={{ textAlign: "center", margin: "20px 0" }}>
+        <b>
+          <u>SURAT KETERANGAN DOMISILI ORGANISASI</u>
+        </b>
+        <br />
+        Nomor: {data.surat.noSurat}
+      </div>
+
+      {/* YANG BERTANDA TANGAN */}
+      <div style={{ marginTop: "15px" }}>
+        Yang bertanda tangan di bawah ini:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{data.setting.perbekelNama}</td>
+            </tr>
+            <tr>
+              <td>Jabatan</td>
+              <td>:</td>
+              <td>{data.setting.perbekelJabatan}</td>
+            </tr>
+            <tr>
+              <td>Alamat Kantor</td>
+              <td>:</td>
+              <td>{data.setting.desaAlamat}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+      <div style={{ marginTop: "20px" }}>
+        Dengan ini menerangkan bahwa:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama Organisasi</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>Jenis Organisasi</td>
+              <td>:</td>
+              <td>{getValue("jenis kelamin")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir")}</td>
+            </tr>
+            <tr>
+              <td>Nomor Telepon</td>
+              <td>:</td>
+              <td>{getValue("negara")}</td>
+            </tr>
+            <tr>
+              <td>Nama Pimpinan</td>
+              <td>:</td>
+              <td>{getValue("agama")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Benar bahwa organisasi tersebut berdomisili di wilayah Desa / Kelurahan{" "}
+        {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan},
+        Kabupaten {data.setting.desaKabupaten}. Dan sampai saat ini masih aktif
+        melakukan kegiatan sesuai dengan bidangnya.
+        <br />
+        Surat keterangan ini dibuat untuk keperluan {getValue("keperluan")}.
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat
+        digunakan sebagaimana mestinya.
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Dikeluarkan di {data.setting.desaNama} <br />
+        Pada tanggal {data.surat.createdAt}
+      </div>
+
+      {/* TANDA TANGAN */}
+      <div
+        style={{
+          marginTop: "40px",
+          display: "flex",
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          <br />
+          Kepala Desa / Lurah {data.setting.desaNama}
+          <br />
+          <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKKelahiran.tsx

@@ -3,142 +3,244 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKKelahiran({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.2" }}>
-
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "20px" }}>
-            <b>PEMERINTAH KABUPATEN/KOTA {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}
-         </div>
-
-         {/* JUDUL */}
-         <div style={{ textAlign: "center", margin: "20px 0" }}>
-            <b><u>SURAT KETERANGAN KELAHIRAN</u></b><br />
-            Nomor : {data.surat.noSurat}
-         </div>
-
-         {/* PEMBUKA */}
-         <div>
-            Yang bertanda tangan di bawah ini, {data.setting.perbekelJabatan}
-            {` ${data.setting.desaNama}, Kecamatan ${data.setting.desaKecamatan}, Kabupaten/Kota ${data.setting.desaKabupaten}`}
-            , dengan ini menerangkan bahwa:
-         </div>
-
-         {/* DATA KELAHIRAN ANAK */}
-         <div style={{ marginTop: "20px" }}>
-            Telah lahir seorang anak pada:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "200px" }}>Tanggal Lahir</td><td>:</td><td>{getValue("tanggal lahir anak")}</td></tr>
-                  <tr><td>Pukul</td><td>:</td><td>{getValue("pukul lahir anak")}</td></tr>
-                  <tr><td>Tempat Kelahiran</td><td>:</td><td>{getValue("tempat lahir anak")}</td></tr>
-                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin anak")}</td></tr>
-                  <tr><td>Anak ke</td><td>:</td><td>{getValue("anak ke")}</td></tr>
-                  <tr><td>Nama Anak</td><td>:</td><td>{getValue("nama anak")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* DATA IBU */}
-         <div style={{ marginTop: "20px" }}>
-            Dari seorang ibu bernama:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "200px" }}>Nama Lengkap Ibu</td><td>:</td><td>{getValue("nama ibu")}</td></tr>
-                  <tr><td>NIK</td><td>:</td><td>{getValue("nik ibu")}</td></tr>
-                  <tr><td>Tempat & Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir ibu")}</td></tr>
-                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan ibu")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat ibu")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* DATA AYAH */}
-         <div style={{ marginTop: "20px" }}>
-            Dan seorang ayah bernama:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "200px" }}>Nama Lengkap Ayah</td><td>:</td><td>{getValue("nama ayah")}</td></tr>
-                  <tr><td>NIK</td><td>:</td><td>{getValue("nik ayah")}</td></tr>
-                  <tr><td>Tempat & Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir ayah")}</td></tr>
-                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan ayah")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat ayah")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* DATA PELAPOR */}
-         <div style={{ marginTop: "20px" }}>
-            Berdasarkan laporan dari:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "200px" }}>Nama Pelapor</td><td>:</td><td>{getValue("nama pelapor")}</td></tr>
-                  <tr><td>Hubungan dengan Anak</td><td>:</td><td>{getValue("hubungan pelapor")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat pelapor")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* PENUTUP */}
-         <div style={{ marginTop: "20px", textAlign: "justify" }}>
-            Demikian Surat Keterangan Kelahiran ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
-         </div>
-
-         {/* TEMPAT TANGGAL */}
-         <table style={{ width: "100%", marginTop: "20px" }}>
-            <tbody>
-               <tr><td style={{ width: "200px" }}>Dikeluarkan di</td><td>:</td><td>{data.setting.desaNama}</td></tr>
-               <tr><td>Pada tanggal</td><td>:</td><td>{data.surat.createdAt}</td></tr>
-            </tbody>
-         </table>
-
-         {/* TANDA TANGAN */}
-         <div style={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "flex-end" }}>
-            <div style={{ textAlign: "center" }}>
-               Kepala Desa / Lurah {data.setting.desaNama}
-               <br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.2" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "20px" }}>
+        <b>
+          PEMERINTAH KABUPATEN/KOTA {_.upperCase(data.setting.desaKabupaten)}
+        </b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}
       </div>
-   );
+
+      {/* JUDUL */}
+      <div style={{ textAlign: "center", margin: "20px 0" }}>
+        <b>
+          <u>SURAT KETERANGAN KELAHIRAN</u>
+        </b>
+        <br />
+        Nomor : {data.surat.noSurat}
+      </div>
+
+      {/* PEMBUKA */}
+      <div>
+        Yang bertanda tangan di bawah ini, {data.setting.perbekelJabatan}
+        {` ${data.setting.desaNama}, Kecamatan ${data.setting.desaKecamatan}, Kabupaten/Kota ${data.setting.desaKabupaten}`}
+        , dengan ini menerangkan bahwa:
+      </div>
+
+      {/* DATA KELAHIRAN ANAK */}
+      <div style={{ marginTop: "20px" }}>
+        Telah lahir seorang anak pada:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "200px" }}>Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tanggal lahir anak")}</td>
+            </tr>
+            <tr>
+              <td>Pukul</td>
+              <td>:</td>
+              <td>{getValue("pukul lahir anak")}</td>
+            </tr>
+            <tr>
+              <td>Tempat Kelahiran</td>
+              <td>:</td>
+              <td>{getValue("tempat lahir anak")}</td>
+            </tr>
+            <tr>
+              <td>Jenis Kelamin</td>
+              <td>:</td>
+              <td>{getValue("jenis kelamin anak")}</td>
+            </tr>
+            <tr>
+              <td>Anak ke</td>
+              <td>:</td>
+              <td>{getValue("anak ke")}</td>
+            </tr>
+            <tr>
+              <td>Nama Anak</td>
+              <td>:</td>
+              <td>{getValue("nama anak")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* DATA IBU */}
+      <div style={{ marginTop: "20px" }}>
+        Dari seorang ibu bernama:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "200px" }}>Nama Lengkap Ibu</td>
+              <td>:</td>
+              <td>{getValue("nama ibu")}</td>
+            </tr>
+            <tr>
+              <td>NIK</td>
+              <td>:</td>
+              <td>{getValue("nik ibu")}</td>
+            </tr>
+            <tr>
+              <td>Tempat & Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir ibu")}</td>
+            </tr>
+            <tr>
+              <td>Pekerjaan</td>
+              <td>:</td>
+              <td>{getValue("pekerjaan ibu")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat ibu")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* DATA AYAH */}
+      <div style={{ marginTop: "20px" }}>
+        Dan seorang ayah bernama:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "200px" }}>Nama Lengkap Ayah</td>
+              <td>:</td>
+              <td>{getValue("nama ayah")}</td>
+            </tr>
+            <tr>
+              <td>NIK</td>
+              <td>:</td>
+              <td>{getValue("nik ayah")}</td>
+            </tr>
+            <tr>
+              <td>Tempat & Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir ayah")}</td>
+            </tr>
+            <tr>
+              <td>Pekerjaan</td>
+              <td>:</td>
+              <td>{getValue("pekerjaan ayah")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat ayah")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* DATA PELAPOR */}
+      <div style={{ marginTop: "20px" }}>
+        Berdasarkan laporan dari:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "200px" }}>Nama Pelapor</td>
+              <td>:</td>
+              <td>{getValue("nama pelapor")}</td>
+            </tr>
+            <tr>
+              <td>Hubungan dengan Anak</td>
+              <td>:</td>
+              <td>{getValue("hubungan pelapor")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat pelapor")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* PENUTUP */}
+      <div style={{ marginTop: "20px", textAlign: "justify" }}>
+        Demikian Surat Keterangan Kelahiran ini dibuat dengan sebenarnya agar
+        dapat digunakan sebagaimana mestinya.
+      </div>
+
+      {/* TEMPAT TANGGAL */}
+      <table style={{ width: "100%", marginTop: "20px" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "200px" }}>Dikeluarkan di</td>
+            <td>:</td>
+            <td>{data.setting.desaNama}</td>
+          </tr>
+          <tr>
+            <td>Pada tanggal</td>
+            <td>:</td>
+            <td>{data.surat.createdAt}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      {/* TANDA TANGAN */}
+      <div
+        style={{
+          marginTop: "40px",
+          width: "100%",
+          display: "flex",
+          justifyContent: "flex-end",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          Kepala Desa / Lurah {data.setting.desaNama}
+          <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKKelakuanBaik.tsx

@@ -3,143 +3,153 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKKelakuanBaik({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.3" }}>
-
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "30px" }}>
-            <b style={{ fontSize: "18px" }}>SURAT KETERANGAN KELAKUAN BAIK</b><br />
-            (PENGANTAR SKCK)<br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* PEMBUKA */}
-         <div style={{ marginBottom: "15px" }}>
-            Yang bertanda tangan di bawah ini menerangkan dengan sebenarnya bahwa:
-         </div>
-
-         {/* IDENTITAS PENDUDUK */}
-         <table style={{ width: "100%", marginBottom: "15px" }}>
-            <tbody>
-               <tr>
-                  <td style={{ width: "180px" }}>Nama lengkap</td>
-                  <td style={{ width: "10px" }}>:</td>
-                  <td>{getValue("nama")}</td>
-               </tr>
-               <tr>
-                  <td>NIK</td>
-                  <td>:</td>
-                  <td>{getValue("nik")}</td>
-               </tr>
-               <tr>
-                  <td>Tempat/Tgl Lahir</td>
-                  <td>:</td>
-                  <td>{getValue("tempat tanggal lahir")}</td>
-               </tr>
-               <tr>
-                  <td>Jenis Kelamin</td>
-                  <td>:</td>
-                  <td>{getValue("jenis kelamin")}</td>
-               </tr>
-               <tr>
-                  <td>Agama</td>
-                  <td>:</td>
-                  <td>{getValue("agama")}</td>
-               </tr>
-               <tr>
-                  <td>Pekerjaan</td>
-                  <td>:</td>
-                  <td>{getValue("pekerjaan")}</td>
-               </tr>
-               <tr>
-                  <td>Alamat</td>
-                  <td>:</td>
-                  <td>{getValue("alamat")}</td>
-               </tr>
-            </tbody>
-         </table>
-
-         {/* ISI */}
-         <div style={{ textAlign: "justify", marginBottom: "15px" }}>
-            Adalah benar penduduk yang berdomisili di wilayah kami dan selama tinggal di lingkungan
-            Desa {data.setting.desaNama}, berkelakuan baik, tidak pernah terlibat perbuatan melanggar hukum,
-            serta dikenal sopan dan aktif dalam kegiatan kemasyarakatan.
-         </div>
-
-         <div style={{ textAlign: "justify", marginBottom: "15px" }}>
-            Surat keterangan ini diberikan sebagai pengantar permohonan penerbitan Surat Keterangan
-            Catatan Kepolisian (SKCK) ke Polsek/Polres {getValue("polsek")}.
-         </div>
-
-         <div style={{ textAlign: "justify", marginBottom: "15px" }}>
-            Surat ini berlaku selama 6 (enam) bulan sejak tanggal diterbitkan, kecuali terdapat perubahan
-            data yang mendasar.
-         </div>
-
-         <div style={{ textAlign: "justify", marginBottom: "20px" }}>
-            Demikian surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.
-         </div>
-
-         {/* TANGGAL */}
-         <table style={{ width: "100%", marginBottom: "40px" }}>
-            <tbody>
-               <tr>
-                  <td style={{ width: "180px" }}>Dikeluarkan di</td>
-                  <td style={{ width: "10px" }}>:</td>
-                  <td>{data.setting.desaNama}</td>
-               </tr>
-               <tr>
-                  <td>Pada tanggal</td>
-                  <td>:</td>
-                  <td>{data.surat.createdAt}</td>
-               </tr>
-            </tbody>
-         </table>
-
-         {/* TANDA TANGAN */}
-         <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
-            <div style={{ textAlign: "center" }}>
-               Kepala Desa {data.setting.desaNama}
-               <br /> <br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
-               <u>{data.setting.perbekelNama}</u><br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.3" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "30px" }}>
+        <b style={{ fontSize: "18px" }}>SURAT KETERANGAN KELAKUAN BAIK</b>
+        <br />
+        (PENGANTAR SKCK)
+        <br />
+        Nomor: {data.surat.noSurat}
       </div>
-   );
+
+      {/* PEMBUKA */}
+      <div style={{ marginBottom: "15px" }}>
+        Yang bertanda tangan di bawah ini menerangkan dengan sebenarnya bahwa:
+      </div>
+
+      {/* IDENTITAS PENDUDUK */}
+      <table style={{ width: "100%", marginBottom: "15px" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "180px" }}>Nama lengkap</td>
+            <td style={{ width: "10px" }}>:</td>
+            <td>{getValue("nama")}</td>
+          </tr>
+          <tr>
+            <td>NIK</td>
+            <td>:</td>
+            <td>{getValue("nik")}</td>
+          </tr>
+          <tr>
+            <td>Tempat/Tgl Lahir</td>
+            <td>:</td>
+            <td>{getValue("tempat tanggal lahir")}</td>
+          </tr>
+          <tr>
+            <td>Jenis Kelamin</td>
+            <td>:</td>
+            <td>{getValue("jenis kelamin")}</td>
+          </tr>
+          <tr>
+            <td>Agama</td>
+            <td>:</td>
+            <td>{getValue("agama")}</td>
+          </tr>
+          <tr>
+            <td>Pekerjaan</td>
+            <td>:</td>
+            <td>{getValue("pekerjaan")}</td>
+          </tr>
+          <tr>
+            <td>Alamat</td>
+            <td>:</td>
+            <td>{getValue("alamat")}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      {/* ISI */}
+      <div style={{ textAlign: "justify", marginBottom: "15px" }}>
+        Adalah benar penduduk yang berdomisili di wilayah kami dan selama
+        tinggal di lingkungan Desa {data.setting.desaNama}, berkelakuan baik,
+        tidak pernah terlibat perbuatan melanggar hukum, serta dikenal sopan dan
+        aktif dalam kegiatan kemasyarakatan.
+      </div>
+
+      <div style={{ textAlign: "justify", marginBottom: "15px" }}>
+        Surat keterangan ini diberikan sebagai pengantar permohonan penerbitan
+        Surat Keterangan Catatan Kepolisian (SKCK) ke Polsek/Polres{" "}
+        {getValue("polsek")}.
+      </div>
+
+      <div style={{ textAlign: "justify", marginBottom: "15px" }}>
+        Surat ini berlaku selama 6 (enam) bulan sejak tanggal diterbitkan,
+        kecuali terdapat perubahan data yang mendasar.
+      </div>
+
+      <div style={{ textAlign: "justify", marginBottom: "20px" }}>
+        Demikian surat keterangan ini dibuat dengan sebenarnya untuk
+        dipergunakan sebagaimana mestinya.
+      </div>
+
+      {/* TANGGAL */}
+      <table style={{ width: "100%", marginBottom: "40px" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "180px" }}>Dikeluarkan di</td>
+            <td style={{ width: "10px" }}>:</td>
+            <td>{data.setting.desaNama}</td>
+          </tr>
+          <tr>
+            <td>Pada tanggal</td>
+            <td>:</td>
+            <td>{data.surat.createdAt}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      {/* TANDA TANGAN */}
+      <div
+        style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
+      >
+        <div style={{ textAlign: "center" }}>
+          Kepala Desa {data.setting.desaNama}
+          <br /> <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
+          <br />
+          <u>{data.setting.perbekelNama}</u>
+          <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKKematian.tsx

@@ -3,118 +3,201 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKKematian({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.3" }}>
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "10px" }}>
-            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}<br />
-            Kode Pos: {data.setting.desaPos}
-         </div>
-
-         {/* JUDUL */}
-         <div style={{ textAlign: "center", margin: "20px 0" }}>
-            <b><u>SURAT KETERANGAN KEMATIAN</u></b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* YANG BERTANDA TANGAN */}
-         <div style={{ marginTop: "15px" }}>
-            Yang bertanda tangan di bawah ini:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
-                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
-                  <tr><td>Hubungan dengan almarhum/almarhumah</td><td>:</td><td>{getValue("hubungan dengan almarhum")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Melaporkan bahwa:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
-                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
-                  <tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
-                  <tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Telah meninggal dunia pada:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Tanggal Kematian</td><td style={{ width: "10px" }}>:</td><td>{getValue("tanggal kematian")}</td></tr>
-                  <tr><td>Waktu Kematian</td><td>:</td><td>{getValue("waktu kematian")}</td></tr>
-                  <tr><td>Tempat Kematian</td><td>:</td><td>{getValue("tempat kematian")}</td></tr>
-                  <tr><td>Penyebab Kematian</td><td>:</td><td>{getValue("penyebab kematian")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
-         </div>
-
-         {/* TANDA TANGAN */}
-         <div style={{ marginTop: "40px", display: "flex", justifyContent: "space-between", width: "100%" }}>
-            <div style={{ textAlign: "center" }}>
-               <br /><br />
-               Pemohon
-               <br /><br /><br /><br /> <br />
-               <u>{getValue("nama")}</u> <br />
-            </div>
-            <div style={{ textAlign: "center" }}>
-               <br />
-               Kepala Desa / Lurah {data.setting.desaNama}
-               <br /><br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.3" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "10px" }}>
+        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}
+        <br />
+        Kode Pos: {data.setting.desaPos}
       </div>
-   );
+
+      {/* JUDUL */}
+      <div style={{ textAlign: "center", margin: "20px 0" }}>
+        <b>
+          <u>SURAT KETERANGAN KEMATIAN</u>
+        </b>
+        <br />
+        Nomor: {data.surat.noSurat}
+      </div>
+
+      {/* YANG BERTANDA TANGAN */}
+      <div style={{ marginTop: "15px" }}>
+        Yang bertanda tangan di bawah ini:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>NIK</td>
+              <td>:</td>
+              <td>{getValue("nik")}</td>
+            </tr>
+            <tr>
+              <td>Pekerjaan</td>
+              <td>:</td>
+              <td>{getValue("pekerjaan")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat")}</td>
+            </tr>
+            <tr>
+              <td>Hubungan dengan almarhum/almarhumah</td>
+              <td>:</td>
+              <td>{getValue("hubungan dengan almarhum")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Melaporkan bahwa:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>NIK</td>
+              <td>:</td>
+              <td>{getValue("nik")}</td>
+            </tr>
+            <tr>
+              <td>Jenis Kelamin</td>
+              <td>:</td>
+              <td>{getValue("jenis kelamin")}</td>
+            </tr>
+            <tr>
+              <td>Tempat/Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir")}</td>
+            </tr>
+            <tr>
+              <td>Agama</td>
+              <td>:</td>
+              <td>{getValue("agama")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Telah meninggal dunia pada:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Tanggal Kematian</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("tanggal kematian")}</td>
+            </tr>
+            <tr>
+              <td>Waktu Kematian</td>
+              <td>:</td>
+              <td>{getValue("waktu kematian")}</td>
+            </tr>
+            <tr>
+              <td>Tempat Kematian</td>
+              <td>:</td>
+              <td>{getValue("tempat kematian")}</td>
+            </tr>
+            <tr>
+              <td>Penyebab Kematian</td>
+              <td>:</td>
+              <td>{getValue("penyebab kematian")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat
+        digunakan sebagaimana mestinya.
+      </div>
+
+      {/* TANDA TANGAN */}
+      <div
+        style={{
+          marginTop: "40px",
+          display: "flex",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          <br />
+          <br />
+          Pemohon
+          <br />
+          <br />
+          <br />
+          <br /> <br />
+          <u>{getValue("nama")}</u> <br />
+        </div>
+        <div style={{ textAlign: "center" }}>
+          <br />
+          Kepala Desa / Lurah {data.setting.desaNama}
+          <br />
+          <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKPenghasilan.tsx

@@ -3,141 +3,180 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKPenghasilan({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
-   return (
-      <div style={{ lineHeight: "1.3" }}>
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "10px" }}>
-            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}<br />
-            Kode Pos: {data.setting.desaPos}
-         </div>
-
-         {/* JUDUL */}
-         <div style={{ textAlign: "center", margin: "20px 0" }}>
-            <b><u>SURAT KETERANGAN PENGHASILAN</u></b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* YANG BERTANDA TANGAN */}
-         <div style={{ marginTop: "15px" }}>
-            Yang bertanda tangan di bawah ini:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr>
-                     <td style={{ width: "160px" }}>Nama</td>
-                     <td style={{ width: "10px" }}>:</td>
-                     <td>{data.setting.perbekelNama}</td>
-                  </tr>
-                  <tr>
-                     <td>Jabatan</td>
-                     <td>:</td>
-                     <td>{data.setting.perbekelJabatan}</td>
-                  </tr>
-                  <tr>
-                     <td>Kecamatan</td>
-                     <td>:</td>
-                     <td>{data.setting.desaKecamatan}</td>
-                  </tr>
-                  <tr>
-                     <td>Kabupaten</td>
-                     <td>:</td>
-                     <td>{data.setting.desaKabupaten}</td>
-                  </tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* IDENTITAS */}
-         <div style={{ marginTop: "20px" }}>
-            Dengan ini menerangkan bahwa:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Nama</td><td>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
-                  <tr><td>Tempat / Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
-                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* PENGHASILAN */}
-         <div style={{ marginTop: "20px" }}>
-            Berdasarkan keterangan yang bersangkutan, orang tersebut memiliki penghasilan rata-rata:
-            <table style={{ width: "100%", marginTop: "10px" }}>
-               <tbody>
-                  <tr>
-                     <td style={{ width: "160px" }}>Penghasilan</td>
-                     <td style={{ width: "10px" }}>:</td>
-                     <td>
-                        Rp {getValue("penghasilan")}
-                        {" "}
-                        ({getValue("penghasilan terbilang")}) per bulan
-                     </td>
-                  </tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* KEPERLUAN */}
-         <div style={{ marginTop: "20px" }}>
-            Surat keterangan ini dibuat untuk keperluan: <b>{getValue("alasan permohonan")}</b>.
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
-         </div>
-
-         {/* TANGGAL & TANDA TANGAN */}
-         <div style={{ marginTop: "20px" }}>
-            Dikeluarkan di {data.setting.desaNama} <br />
-            Pada tanggal {data.surat.createdAt}
-         </div>
-
-         <div style={{ marginTop: "40px", display: "flex", justifyContent: "flex-end" }}>
-            <div style={{ textAlign: "center" }}>
-               Kepala Desa / Lurah {data.setting.desaNama}
-               <br /> <br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  return (
+    <div style={{ lineHeight: "1.3" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "10px" }}>
+        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}
+        <br />
+        Kode Pos: {data.setting.desaPos}
       </div>
-   );
+
+      {/* JUDUL */}
+      <div style={{ textAlign: "center", margin: "20px 0" }}>
+        <b>
+          <u>SURAT KETERANGAN PENGHASILAN</u>
+        </b>
+        <br />
+        Nomor: {data.surat.noSurat}
+      </div>
+
+      {/* YANG BERTANDA TANGAN */}
+      <div style={{ marginTop: "15px" }}>
+        Yang bertanda tangan di bawah ini:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{data.setting.perbekelNama}</td>
+            </tr>
+            <tr>
+              <td>Jabatan</td>
+              <td>:</td>
+              <td>{data.setting.perbekelJabatan}</td>
+            </tr>
+            <tr>
+              <td>Kecamatan</td>
+              <td>:</td>
+              <td>{data.setting.desaKecamatan}</td>
+            </tr>
+            <tr>
+              <td>Kabupaten</td>
+              <td>:</td>
+              <td>{data.setting.desaKabupaten}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* IDENTITAS */}
+      <div style={{ marginTop: "20px" }}>
+        Dengan ini menerangkan bahwa:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>Jenis Kelamin</td>
+              <td>:</td>
+              <td>{getValue("jenis kelamin")}</td>
+            </tr>
+            <tr>
+              <td>Tempat / Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir")}</td>
+            </tr>
+            <tr>
+              <td>Pekerjaan</td>
+              <td>:</td>
+              <td>{getValue("pekerjaan")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* PENGHASILAN */}
+      <div style={{ marginTop: "20px" }}>
+        Berdasarkan keterangan yang bersangkutan, orang tersebut memiliki
+        penghasilan rata-rata:
+        <table style={{ width: "100%", marginTop: "10px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Penghasilan</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>
+                Rp {getValue("penghasilan")} (
+                {getValue("penghasilan terbilang")}) per bulan
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* KEPERLUAN */}
+      <div style={{ marginTop: "20px" }}>
+        Surat keterangan ini dibuat untuk keperluan:{" "}
+        <b>{getValue("alasan permohonan")}</b>.
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat
+        dipergunakan sebagaimana mestinya.
+      </div>
+
+      {/* TANGGAL & TANDA TANGAN */}
+      <div style={{ marginTop: "20px" }}>
+        Dikeluarkan di {data.setting.desaNama} <br />
+        Pada tanggal {data.surat.createdAt}
+      </div>
+
+      <div
+        style={{
+          marginTop: "40px",
+          display: "flex",
+          justifyContent: "flex-end",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          Kepala Desa / Lurah {data.setting.desaNama}
+          <br /> <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKTempatUsaha.tsx

@@ -3,119 +3,142 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKTempatUsaha({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (key: string) =>
-      _.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (key: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((i: any) => i.jenis === key)?.value || "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
-
-   return (
-      <div style={{ lineHeight: "1.5" }}>
-         {/* TITLE */}
-         <div style={{ textAlign: "center", marginBottom: "20px" }}>
-            <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TEMPAT USAHA</b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* ISI */}
-         <div>
-            <div style={{ marginBottom: "10px" }}>
-               Yang bertanda tangan dibawah ini, saya:
-            </div>
-
-            {/* DATA PEJABAT */}
-            <div>
-               <Row label="Nama" value={data.setting.perbekelNama} />
-               <Row label="Jabatan" value={data.setting.perbekelJabatan} />
-               <Row label="Alamat" value={data.setting.desaAlamat} />
-            </div>
-
-            <br />
-
-            <div>Dengan ini menerangkan bahwa:</div>
-
-            {/* DATA WARGA */}
-            <div>
-               <Row label="Nama Pemilik Usaha" value={getValue("nama")} />
-               <Row label="Tempat/Tanggal Lahir" value={getValue("tempat tanggal lahir")} />
-               <Row label="Alamat Pemilik Usaha" value={getValue("alamat")} />
-               <Row label="Nomor KTP" value={getValue("nik")} />
-            </div>
-
-            <br />
-
-            <div>Benar yang bersangkutan memiliki tempat usaha dengan keterangan seperti berikut:</div>
-
-            <div>
-               <Row label="Nama Usaha" value={getValue("nama usaha")} />
-               <Row label="Bidang Usaha" value={getValue("bidang usaha")} />
-               <Row label="Alamat Usaha" value={getValue("alamat usaha")} />
-               <Row label="Status Tempat Usaha" value={getValue("status tempat usaha")} />
-               <Row label="Luas Tempat Usaha" value={getValue("luas tempat usaha")} />
-               <Row label="Jumlah Karyawan" value={getValue("jumlah karyawan")} />
-            </div>
-
-            <p style={{ textAlign: "justify" }}>
-               Surat keterangan ini dibuat untuk keperluan <b>{getValue("alasan permohonan")}.</b>
-            </p>
-
-            <p style={{ textAlign: "justify" }}>
-               Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
-            </p>
-
-            <div>
-               <Row label="Dikeluarkan di" value={data.setting.desaNama} />
-               <Row label="Pada tanggal" value={data.surat.createdAt} />
-            </div>
-
-            <br /><br />
-
-            {/* TANDA TANGAN */}
-            <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
-               <div style={{ textAlign: "center" }}>
-                  {data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
-                  <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
-                  <u>{data.setting.perbekelNama}</u><br />
-                  {data.setting.perbekelJabatan + " " + data.setting.desaNama}
-               </div>
-            </div>
-         </div>
+  return (
+    <div style={{ lineHeight: "1.5" }}>
+      {/* TITLE */}
+      <div style={{ textAlign: "center", marginBottom: "20px" }}>
+        <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TEMPAT USAHA</b>
+        <br />
+        Nomor: {data.surat.noSurat}
       </div>
-   );
+
+      {/* ISI */}
+      <div>
+        <div style={{ marginBottom: "10px" }}>
+          Yang bertanda tangan dibawah ini, saya:
+        </div>
+
+        {/* DATA PEJABAT */}
+        <div>
+          <Row label="Nama" value={data.setting.perbekelNama} />
+          <Row label="Jabatan" value={data.setting.perbekelJabatan} />
+          <Row label="Alamat" value={data.setting.desaAlamat} />
+        </div>
+
+        <br />
+
+        <div>Dengan ini menerangkan bahwa:</div>
+
+        {/* DATA WARGA */}
+        <div>
+          <Row label="Nama Pemilik Usaha" value={getValue("nama")} />
+          <Row
+            label="Tempat/Tanggal Lahir"
+            value={getValue("tempat tanggal lahir")}
+          />
+          <Row label="Alamat Pemilik Usaha" value={getValue("alamat")} />
+          <Row label="Nomor KTP" value={getValue("nik")} />
+        </div>
+
+        <br />
+
+        <div>
+          Benar yang bersangkutan memiliki tempat usaha dengan keterangan
+          seperti berikut:
+        </div>
+
+        <div>
+          <Row label="Nama Usaha" value={getValue("nama usaha")} />
+          <Row label="Bidang Usaha" value={getValue("bidang usaha")} />
+          <Row label="Alamat Usaha" value={getValue("alamat usaha")} />
+          <Row
+            label="Status Tempat Usaha"
+            value={getValue("status tempat usaha")}
+          />
+          <Row
+            label="Luas Tempat Usaha"
+            value={getValue("luas tempat usaha")}
+          />
+          <Row label="Jumlah Karyawan" value={getValue("jumlah karyawan")} />
+        </div>
+
+        <p style={{ textAlign: "justify" }}>
+          Surat keterangan ini dibuat untuk keperluan{" "}
+          <b>{getValue("alasan permohonan")}.</b>
+        </p>
+
+        <p style={{ textAlign: "justify" }}>
+          Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat
+          dipergunakan sebagaimana mestinya.
+        </p>
+
+        <div>
+          <Row label="Dikeluarkan di" value={data.setting.desaNama} />
+          <Row label="Pada tanggal" value={data.surat.createdAt} />
+        </div>
+
+        <br />
+        <br />
+
+        {/* TANDA TANGAN */}
+        <div
+          style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
+        >
+          <div style={{ textAlign: "center" }}>
+            {data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
+            <img src={viewImg || undefined} alt="ttd perbekel" width={100} />
+            <br />
+            <u>{data.setting.perbekelNama}</u>
+            <br />
+            {data.setting.perbekelJabatan + " " + data.setting.desaNama}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-function Row({ label, value }: { label: string, value: string }) {
-   return (
-      <div style={{ display: "flex", marginBottom: "4px" }}>
-         <div style={{ width: "180px" }}>{label}</div>
-         <div style={{ width: "10px" }}>:</div>
-         <div>{value}</div>
-      </div>
-   );
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div style={{ display: "flex", marginBottom: "4px" }}>
+      <div style={{ width: "180px" }}>{label}</div>
+      <div style={{ width: "10px" }}>:</div>
+      <div>{value}</div>
+    </div>
+  );
 }

src/components/surat/SKTidakMampu.tsx

@@ -3,110 +3,118 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKTidakMampu({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (key: string) =>
-      _.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (key: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((i: any) => i.jenis === key)?.value || "",
+    );
 
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.5" }}>
-         {/* TITLE */}
-         <div style={{ textAlign: "center", marginBottom: "20px" }}>
-            <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TIDAK MAMPU</b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* ISI */}
-         <div>
-            <div style={{ marginBottom: "10px" }}>
-               Yang bertanda tangan dibawah ini, saya
-            </div>
-
-            {/* DATA PEJABAT */}
-            <div>
-
-               <Row label="Nama" value={data.setting.perbekelNama} />
-               <Row label="Alamat" value={data.setting.desaAlamat} />
-               <Row label="Jabatan" value={data.setting.perbekelJabatan} />
-
-            </div>
-
-            <br />
-
-            <div>Dengan ini menerangkan bahwa:</div>
-
-            {/* DATA WARGA */}
-            <div>
-
-               <Row label="Nama" value={getValue("nama")} />
-               <Row label="Tempat Tgl Lahir" value={getValue("tempat tanggal lahir")} />
-               <Row label="Alamat" value={getValue("alamat")} />
-               <Row label="NIK" value={getValue("nik")} />
-
-            </div>
-
-            <br />
-
-            <p style={{ textAlign: "justify" }}>
-               Orang tersebut benar-benar penduduk desa {data.setting.desaNama} dan termasuk keluarga tidak mampu.
-               Surat keterangan ini dipergunakan untuk
-               <b>{getValue("alasan permohonan")}.</b>
-            </p>
-
-            <p style={{ textAlign: "justify" }}>
-               Demikian surat keterangan ini kami buat dengan sebenar-benarnya untuk dapat dipergunakan
-               sebagaimana mestinya.
-            </p>
-
-            <br /><br />
-
-            {/* TANDA TANGAN */}
-            <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
-               <div style={{ textAlign: "center" }}>
-                  {data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
-                  <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
-                  <u>{data.setting.perbekelNama}</u><br />
-                  {data.setting.perbekelJabatan + " " + data.setting.desaNama}
-               </div>
-            </div>
-         </div>
+  return (
+    <div style={{ lineHeight: "1.5" }}>
+      {/* TITLE */}
+      <div style={{ textAlign: "center", marginBottom: "20px" }}>
+        <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TIDAK MAMPU</b>
+        <br />
+        Nomor: {data.surat.noSurat}
       </div>
-   );
+
+      {/* ISI */}
+      <div>
+        <div style={{ marginBottom: "10px" }}>
+          Yang bertanda tangan dibawah ini, saya
+        </div>
+
+        {/* DATA PEJABAT */}
+        <div>
+          <Row label="Nama" value={data.setting.perbekelNama} />
+          <Row label="Alamat" value={data.setting.desaAlamat} />
+          <Row label="Jabatan" value={data.setting.perbekelJabatan} />
+        </div>
+
+        <br />
+
+        <div>Dengan ini menerangkan bahwa:</div>
+
+        {/* DATA WARGA */}
+        <div>
+          <Row label="Nama" value={getValue("nama")} />
+          <Row
+            label="Tempat Tgl Lahir"
+            value={getValue("tempat tanggal lahir")}
+          />
+          <Row label="Alamat" value={getValue("alamat")} />
+          <Row label="NIK" value={getValue("nik")} />
+        </div>
+
+        <br />
+
+        <p style={{ textAlign: "justify" }}>
+          Orang tersebut benar-benar penduduk desa {data.setting.desaNama} dan
+          termasuk keluarga tidak mampu. Surat keterangan ini dipergunakan untuk
+          <b>{getValue("alasan permohonan")}.</b>
+        </p>
+
+        <p style={{ textAlign: "justify" }}>
+          Demikian surat keterangan ini kami buat dengan sebenar-benarnya untuk
+          dapat dipergunakan sebagaimana mestinya.
+        </p>
+
+        <br />
+        <br />
+
+        {/* TANDA TANGAN */}
+        <div
+          style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
+        >
+          <div style={{ textAlign: "center" }}>
+            {data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
+            <img src={viewImg || undefined} alt="ttd perbekel" width={100} />
+            <br />
+            <u>{data.setting.perbekelNama}</u>
+            <br />
+            {data.setting.perbekelJabatan + " " + data.setting.desaNama}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-function Row({ label, value }: { label: string, value: string }) {
-   return (
-      <div style={{ display: "flex", marginBottom: "4px" }}>
-         <div style={{ width: "180px" }}>{label}</div>
-         <div style={{ width: "10px" }}>:</div>
-         <div>{value}</div>
-      </div>
-   );
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div style={{ display: "flex", marginBottom: "4px" }}>
+      <div style={{ width: "180px" }}>{label}</div>
+      <div style={{ width: "10px" }}>:</div>
+      <div>{value}</div>
+    </div>
+  );
 }

src/components/surat/SKUsaha.tsx

@@ -3,147 +3,217 @@ import { useEffect, useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKUsaha({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (jenis: string) =>
-      _.upperFirst(
-         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
-      );
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (jenis: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
+        "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.3" }}>
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "10px" }}>
-            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}<br />
-            Kode Pos: {data.setting.desaPos}
-         </div>
-
-         {/* JUDUL */}
-         <div style={{ textAlign: "center", margin: "15px 0" }}>
-            <b><u>SURAT KETERANGAN USAHA</u></b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         {/* YANG BERTANDA TANGAN */}
-         <div style={{ marginTop: "15px" }}>
-            Yang bertanda tangan di bawah ini:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr>
-                     <td style={{ width: "160px" }}>Nama</td>
-                     <td style={{ width: "10px" }}>:</td>
-                     <td>{data.setting.perbekelNama}</td>
-                  </tr>
-                  <tr>
-                     <td>Jabatan</td>
-                     <td>:</td>
-                     <td>{data.setting.perbekelJabatan}</td>
-                  </tr>
-                  <tr>
-                     <td>Kecamatan</td>
-                     <td>:</td>
-                     <td>{data.setting.desaKecamatan}</td>
-                  </tr>
-                  <tr>
-                     <td>Kabupaten</td>
-                     <td>:</td>
-                     <td>{data.setting.desaKabupaten}</td>
-                  </tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
-         <div style={{ marginTop: "20px" }}>
-            Dengan ini menerangkan dengan sesungguhnya bahwa:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
-                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
-                  <tr><td>Tempat / Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
-                  <tr><td>Warga Negara</td><td>:</td><td>{getValue("negara")}</td></tr>
-                  <tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
-                  <tr><td>Status</td><td>:</td><td>{getValue("status perkawinan")}</td></tr>
-                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
-                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* DOMISILI */}
-         <div style={{ marginTop: "20px" }}>
-            Bahwa orang tersebut di atas benar-benar penduduk:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Desa / Kelurahan</td><td style={{ width: "10px" }}>:</td><td>{data.setting.desaNama}</td></tr>
-                  <tr><td>Kecamatan</td><td>:</td><td>{data.setting.desaKecamatan}</td></tr>
-                  <tr><td>Kabupaten</td><td>:</td><td>{data.setting.desaKabupaten}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         {/* USAHA */}
-         <div style={{ marginTop: "20px" }}>
-            Dan yang bersangkutan benar memiliki usaha:
-            <table style={{ width: "100%", marginTop: "5px" }}>
-               <tbody>
-                  <tr><td style={{ width: "160px" }}>Jenis Usaha</td><td style={{ width: "10px" }}>:</td><td>{getValue("jenis usaha")}</td></tr>
-                  <tr><td>Alamat Usaha</td><td>:</td><td>{getValue("alamat usaha")}</td></tr>
-               </tbody>
-            </table>
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.
-         </div>
-
-         <div style={{ marginTop: "20px" }}>
-            Dikeluarkan di {data.setting.desaNama} <br />
-            Pada tanggal {data.surat.createdAt}
-         </div>
-
-         {/* TANDA TANGAN */}
-         <div style={{ marginTop: "10px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
-            <div style={{ textAlign: "center" }}>
-               <br />
-               Kepala Desa / Lurah {data.setting.desaNama}
-               <br /><br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} />
-               <br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.3" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "10px" }}>
+        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}
+        <br />
+        Kode Pos: {data.setting.desaPos}
       </div>
-   );
+
+      {/* JUDUL */}
+      <div style={{ textAlign: "center", margin: "15px 0" }}>
+        <b>
+          <u>SURAT KETERANGAN USAHA</u>
+        </b>
+        <br />
+        Nomor: {data.surat.noSurat}
+      </div>
+
+      {/* YANG BERTANDA TANGAN */}
+      <div style={{ marginTop: "15px" }}>
+        Yang bertanda tangan di bawah ini:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{data.setting.perbekelNama}</td>
+            </tr>
+            <tr>
+              <td>Jabatan</td>
+              <td>:</td>
+              <td>{data.setting.perbekelJabatan}</td>
+            </tr>
+            <tr>
+              <td>Kecamatan</td>
+              <td>:</td>
+              <td>{data.setting.desaKecamatan}</td>
+            </tr>
+            <tr>
+              <td>Kabupaten</td>
+              <td>:</td>
+              <td>{data.setting.desaKabupaten}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+      <div style={{ marginTop: "20px" }}>
+        Dengan ini menerangkan dengan sesungguhnya bahwa:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Nama</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("nama")}</td>
+            </tr>
+            <tr>
+              <td>Jenis Kelamin</td>
+              <td>:</td>
+              <td>{getValue("jenis kelamin")}</td>
+            </tr>
+            <tr>
+              <td>Tempat / Tanggal Lahir</td>
+              <td>:</td>
+              <td>{getValue("tempat tanggal lahir")}</td>
+            </tr>
+            <tr>
+              <td>Warga Negara</td>
+              <td>:</td>
+              <td>{getValue("negara")}</td>
+            </tr>
+            <tr>
+              <td>Agama</td>
+              <td>:</td>
+              <td>{getValue("agama")}</td>
+            </tr>
+            <tr>
+              <td>Status</td>
+              <td>:</td>
+              <td>{getValue("status perkawinan")}</td>
+            </tr>
+            <tr>
+              <td>Pekerjaan</td>
+              <td>:</td>
+              <td>{getValue("pekerjaan")}</td>
+            </tr>
+            <tr>
+              <td>Alamat</td>
+              <td>:</td>
+              <td>{getValue("alamat")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* DOMISILI */}
+      <div style={{ marginTop: "20px" }}>
+        Bahwa orang tersebut di atas benar-benar penduduk:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Desa / Kelurahan</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{data.setting.desaNama}</td>
+            </tr>
+            <tr>
+              <td>Kecamatan</td>
+              <td>:</td>
+              <td>{data.setting.desaKecamatan}</td>
+            </tr>
+            <tr>
+              <td>Kabupaten</td>
+              <td>:</td>
+              <td>{data.setting.desaKabupaten}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* USAHA */}
+      <div style={{ marginTop: "20px" }}>
+        Dan yang bersangkutan benar memiliki usaha:
+        <table style={{ width: "100%", marginTop: "5px" }}>
+          <tbody>
+            <tr>
+              <td style={{ width: "160px" }}>Jenis Usaha</td>
+              <td style={{ width: "10px" }}>:</td>
+              <td>{getValue("jenis usaha")}</td>
+            </tr>
+            <tr>
+              <td>Alamat Usaha</td>
+              <td>:</td>
+              <td>{getValue("alamat usaha")}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan
+        sebagaimana mestinya.
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        Dikeluarkan di {data.setting.desaNama} <br />
+        Pada tanggal {data.surat.createdAt}
+      </div>
+
+      {/* TANDA TANGAN */}
+      <div
+        style={{
+          marginTop: "10px",
+          display: "flex",
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          <br />
+          Kepala Desa / Lurah {data.setting.desaNama}
+          <br />
+          <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/components/surat/SKYatimPiatu.tsx

@@ -4,191 +4,209 @@ import { useState } from "react";
 import notification from "../notificationGlobal";
 
 export default function SKYatim({ data }: { data: any }) {
-   const [viewImg, setViewImg] = useState<string>("");
-   const getValue = (key: string) =>
-      _.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
+  const [viewImg, setViewImg] = useState<string>("");
+  const getValue = (key: string) =>
+    _.upperFirst(
+      data.surat.dataText.find((i: any) => i.jenis === key)?.value || "",
+    );
 
-   const loadImage = async () => {
-      try {
-         setViewImg("");
-         if (!data.setting.perbekelTTD) return;
+  const loadImage = async () => {
+    try {
+      setViewImg("");
+      if (!data.setting.perbekelTTD) return;
 
-         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
-         // Fetch manual agar mendapatkan Response asli
-         const res = await fetch(urlApi);
-         if (!res.ok)
-            return notification({
-               title: "Error",
-               message: "Failed to load image sign",
-               type: "error",
-            });
-         const blob = await res.blob();
-         const url = URL.createObjectURL(blob);
+      const urlApi =
+        "/api/pengaduan/image?folder=lainnya&fileName=" +
+        data.setting.perbekelTTD;
+      // Fetch manual agar mendapatkan Response asli
+      const res = await fetch(urlApi);
+      if (!res.ok)
+        return notification({
+          title: "Error",
+          message: "Failed to load image sign",
+          type: "error",
+        });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
-      } catch (err) {
-         console.error("Gagal load gambar:", err);
-      }
-   };
+      setViewImg(url);
+    } catch (err) {
+      console.error("Gagal load gambar:", err);
+    }
+  };
 
-   useShallowEffect(() => {
-      loadImage();
-   }, [data]);
-
-   return (
-      <div style={{ lineHeight: "1.3" }}>
-
-         {/* HEADER */}
-         <div style={{ textAlign: "center", marginBottom: "10px" }}>
-            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
-            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
-            <b>DESA {_.upperCase(data.setting.desaNama)}</b><br />
-            Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
-         </div>
-
-         <div style={{ textAlign: "center", marginTop: "15px" }}>
-            <b><u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u></b><br />
-            Nomor: {data.surat.noSurat}
-         </div>
-
-         <br />
-
-         {/* BAGIAN PENANDATANGAN */}
-         <div>Yang bertanda tangan di bawah ini:</div>
-         <table style={{ width: "100%", marginTop: "5px" }}>
-            <tbody>
-               <tr>
-                  <td style={{ width: "180px" }}>Nama</td>
-                  <td>: {data.setting.perbekelNama}</td>
-               </tr>
-               <tr>
-                  <td>Jabatan</td>
-                  <td>: {data.setting.perbekelJabatan}</td>
-               </tr>
-               <tr>
-                  <td>Alamat Kantor</td>
-                  <td>: {data.setting.desaAlamat}</td>
-               </tr>
-            </tbody>
-         </table>
-
-         <br />
-
-         {/* BAGIAN IDENTITAS ANAK */}
-         <div>Dengan ini menerangkan bahwa:</div>
-
-         <table style={{ width: "100%", marginTop: "5px" }}>
-            <tbody>
-               <tr>
-                  <td style={{ width: "180px" }}>Nama</td>
-                  <td>: {getValue("nama")}</td>
-               </tr>
-               <tr>
-                  <td>Tempat/Tanggal Lahir</td>
-                  <td>: {getValue("tempat tanggal lahir")}</td>
-               </tr>
-               <tr>
-                  <td>Jenis Kelamin</td>
-                  <td>: {getValue("jenis kelamin")}</td>
-               </tr>
-               <tr>
-                  <td>Alamat</td>
-                  <td>: {getValue("alamat")}</td>
-               </tr>
-               <tr>
-                  <td>NIK</td>
-                  <td>: {getValue("nik")}</td>
-               </tr>
-               <tr>
-                  <td>Pekerjaan</td>
-                  <td>: {getValue("pekerjaan")}</td>
-               </tr>
-            </tbody>
-         </table>
-
-         <br />
-
-         {/* KETERANGAN ORANG TUA */}
-         <div>
-            Benar bahwa yang bersangkutan adalah <b>anak (Yatim / Piatu / Yatim Piatu)</b>,
-            dengan keterangan sebagai berikut:
-         </div>
-
-         <br />
-
-         <div><b>1. Nama Ayah</b></div>
-         <table style={{ width: "100%" }}>
-            <tbody>
-               <tr>
-                  <td style={{ width: "180px" }}>Nama Ayah</td>
-                  <td>: {getValue("nama ayah")}</td>
-               </tr>
-               <tr>
-                  <td>Status</td>
-                  <td>: {getValue("status ayah")}</td>
-               </tr>
-            </tbody>
-         </table>
-
-         <br />
-
-         <div><b>2. Nama Ibu</b></div>
-         <table style={{ width: "100%" }}>
-            <tbody>
-               <tr>
-                  <td style={{ width: "180px" }}>Nama Ibu</td>
-                  <td>: {getValue("nama ibu")}</td>
-               </tr>
-               <tr>
-                  <td>Status</td>
-                  <td>: {getValue("status ibu")}</td>
-               </tr>
-            </tbody>
-         </table>
-
-         <br />
-
-         <div>
-            Dengan demikian, berdasarkan keterangan pihak keluarga dan data di Kantor Desa,
-            maka benar bahwa yang bersangkutan adalah
-            <b> anak (Yatim / Piatu / Yatim Piatu).</b>
-         </div>
-
-         <br />
-
-         <div>
-            Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan sebagaimana mestinya.
-         </div>
-
-         <br />
-
-         {/* TANGGAL & TEMPAT */}
-         <table style={{ width: "100%", marginTop: "10px" }}>
-            <tbody>
-               <tr>
-                  <td style={{ width: "180px" }}>Dikeluarkan di</td>
-                  <td>: {data.setting.desaNama}</td>
-               </tr>
-               <tr>
-                  <td>Pada tanggal</td>
-                  <td>: {data.surat.createdAt}</td>
-               </tr>
-            </tbody>
-         </table>
-
-         <br />
-
-         {/* TTD */}
-         <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
-            <div style={{ textAlign: "center" }}>
-               Kepala Desa {data.setting.desaNama}
-               <br /><br />
-               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
-               <u>{data.setting.perbekelNama}</u> <br />
-               NIP. {data.setting.perbekelNIP}
-            </div>
-         </div>
+  useShallowEffect(() => {
+    loadImage();
+  }, [data]);
 
+  return (
+    <div style={{ lineHeight: "1.3" }}>
+      {/* HEADER */}
+      <div style={{ textAlign: "center", marginBottom: "10px" }}>
+        <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
+        <br />
+        <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
+        <br />
+        <b>DESA {_.upperCase(data.setting.desaNama)}</b>
+        <br />
+        Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
       </div>
-   );
+
+      <div style={{ textAlign: "center", marginTop: "15px" }}>
+        <b>
+          <u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u>
+        </b>
+        <br />
+        Nomor: {data.surat.noSurat}
+      </div>
+
+      <br />
+
+      {/* BAGIAN PENANDATANGAN */}
+      <div>Yang bertanda tangan di bawah ini:</div>
+      <table style={{ width: "100%", marginTop: "5px" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "180px" }}>Nama</td>
+            <td>: {data.setting.perbekelNama}</td>
+          </tr>
+          <tr>
+            <td>Jabatan</td>
+            <td>: {data.setting.perbekelJabatan}</td>
+          </tr>
+          <tr>
+            <td>Alamat Kantor</td>
+            <td>: {data.setting.desaAlamat}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <br />
+
+      {/* BAGIAN IDENTITAS ANAK */}
+      <div>Dengan ini menerangkan bahwa:</div>
+
+      <table style={{ width: "100%", marginTop: "5px" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "180px" }}>Nama</td>
+            <td>: {getValue("nama")}</td>
+          </tr>
+          <tr>
+            <td>Tempat/Tanggal Lahir</td>
+            <td>: {getValue("tempat tanggal lahir")}</td>
+          </tr>
+          <tr>
+            <td>Jenis Kelamin</td>
+            <td>: {getValue("jenis kelamin")}</td>
+          </tr>
+          <tr>
+            <td>Alamat</td>
+            <td>: {getValue("alamat")}</td>
+          </tr>
+          <tr>
+            <td>NIK</td>
+            <td>: {getValue("nik")}</td>
+          </tr>
+          <tr>
+            <td>Pekerjaan</td>
+            <td>: {getValue("pekerjaan")}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <br />
+
+      {/* KETERANGAN ORANG TUA */}
+      <div>
+        Benar bahwa yang bersangkutan adalah{" "}
+        <b>anak (Yatim / Piatu / Yatim Piatu)</b>, dengan keterangan sebagai
+        berikut:
+      </div>
+
+      <br />
+
+      <div>
+        <b>1. Nama Ayah</b>
+      </div>
+      <table style={{ width: "100%" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "180px" }}>Nama Ayah</td>
+            <td>: {getValue("nama ayah")}</td>
+          </tr>
+          <tr>
+            <td>Status</td>
+            <td>: {getValue("status ayah")}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <br />
+
+      <div>
+        <b>2. Nama Ibu</b>
+      </div>
+      <table style={{ width: "100%" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "180px" }}>Nama Ibu</td>
+            <td>: {getValue("nama ibu")}</td>
+          </tr>
+          <tr>
+            <td>Status</td>
+            <td>: {getValue("status ibu")}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <br />
+
+      <div>
+        Dengan demikian, berdasarkan keterangan pihak keluarga dan data di
+        Kantor Desa, maka benar bahwa yang bersangkutan adalah
+        <b> anak (Yatim / Piatu / Yatim Piatu).</b>
+      </div>
+
+      <br />
+
+      <div>
+        Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan
+        sebagaimana mestinya.
+      </div>
+
+      <br />
+
+      {/* TANGGAL & TEMPAT */}
+      <table style={{ width: "100%", marginTop: "10px" }}>
+        <tbody>
+          <tr>
+            <td style={{ width: "180px" }}>Dikeluarkan di</td>
+            <td>: {data.setting.desaNama}</td>
+          </tr>
+          <tr>
+            <td>Pada tanggal</td>
+            <td>: {data.surat.createdAt}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <br />
+
+      {/* TTD */}
+      <div
+        style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
+      >
+        <div style={{ textAlign: "center" }}>
+          Kepala Desa {data.setting.desaNama}
+          <br />
+          <br />
+          <img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
+          <br />
+          <u>{data.setting.perbekelNama}</u> <br />
+          NIP. {data.setting.perbekelNIP}
+        </div>
+      </div>
+    </div>
+  );
 }

src/pages/Login.tsx

@@ -28,16 +28,19 @@ export default function Login() {
         window.location.href = clientRoutes["/scr/dashboard/warga/list-warga"];
         break;
       case "credential":
-        window.location.href = clientRoutes["/scr/dashboard/credential/credential"];
+        window.location.href =
+          clientRoutes["/scr/dashboard/credential/credential"];
         break;
       case "setting":
-        window.location.href = clientRoutes["/scr/dashboard/setting/detail-setting"];
+        window.location.href =
+          clientRoutes["/scr/dashboard/setting/detail-setting"];
         break;
       case "api_key":
         window.location.href = clientRoutes["/scr/dashboard/apikey/apikey"];
         break;
       case "pelayanan":
-        window.location.href = clientRoutes["/scr/dashboard/pelayanan-surat/list-pelayanan"];
+        window.location.href =
+          clientRoutes["/scr/dashboard/pelayanan-surat/list-pelayanan"];
         break;
       default:
         window.location.href = clientRoutes["/scr/dashboard"];

src/pages/darmasaba/surat.tsx

@@ -0,0 +1,331 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   ActionIcon,
+   Badge,
+   Box,
+   Button,
+   Card,
+   Container,
+   Divider,
+   Grid,
+   Group,
+   Select,
+   Stack,
+   Text,
+   TextInput,
+   Textarea,
+   Tooltip
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+   IconBuildingCommunity,
+   IconInfoCircle,
+   IconMapPin,
+   IconUser
+} from "@tabler/icons-react";
+import React from "react";
+import useSWR from "swr";
+
+// =========================
+// Reusable UI components
+// =========================
+
+function FieldLabel({ label, hint }: { label: string; hint?: string }) {
+   return (
+      <Group justify="apart" gap="xs" align="center">
+         <Text fw={600}>{label}</Text>
+         {hint && (
+            <Tooltip label={hint} withArrow>
+               <ActionIcon size={24} variant="subtle">
+                  <IconInfoCircle size={16} />
+               </ActionIcon>
+            </Tooltip>
+         )}
+      </Group>
+   );
+}
+
+function FormSection({
+   title,
+   icon,
+   children,
+   description,
+}: {
+   title: string;
+   icon?: React.ReactNode;
+   children: React.ReactNode;
+   description?: string;
+}) {
+   return (
+      <Card radius="md" shadow="sm" withBorder>
+         <Group justify="apart" align="center" mb="xs">
+            <Group align="center" gap="xs">
+               {icon}
+               <Text fw={700}>{title}</Text>
+            </Group>
+            {description && <Badge variant="light">{description}</Badge>}
+         </Group>
+
+         <Divider mb="sm" />
+         <Stack gap="sm">{children}</Stack>
+      </Card>
+   );
+}
+
+// =========================
+// Main form component
+// =========================
+
+export default function FormSurat() {
+   const { data, mutate, isLoading } = useSWR("category-pelayanan-list", () =>
+      apiFetch.api.pelayanan.category.get(),
+   );
+
+   const listCategory = data?.data || [];
+
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+   return (
+      <Container size="md" w={"100%"}>
+         <Box>
+            <Stack gap="lg">
+               <Group justify="apart" align="center">
+                  <Group align="center">
+                     <IconBuildingCommunity size={28} />
+                     <div>
+                        <Text fw={800} size="xl">
+                           Surat Keterangan Tidak Mampu (SKTM)
+                        </Text>
+                        <Text size="sm" c="dimmed">
+                           Blangko resmi untuk pengajuan Surat Keterangan Tidak Mampu —
+                           digunakan untuk keperluan pendidikan, kesehatan, atau
+                           administrasi.
+                        </Text>
+                     </div>
+                  </Group>
+                  <Group>
+                     <Badge radius="sm">Form Length: 3 Sections</Badge>
+                  </Group>
+               </Group>
+
+               <form>
+                  <Stack gap="lg">
+                     {/* Header Section */}
+                     <FormSection
+                        title="Pemohon"
+                        icon={<IconUser size={16} />}
+                        description="Informasi identitas pemohon"
+                     >
+                        <Grid>
+                           <Grid.Col span={6}>
+                              <TextInput
+                                 label={
+                                    <FieldLabel
+                                       label="Nama Lengkap"
+                                       hint="Nama lengkap pemohon"
+                                    />
+                                 }
+                                 placeholder="Budi Setiawan"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={6}>
+                              <TextInput
+                                 label={
+                                    <FieldLabel
+                                       label="Nomor Telephone"
+                                       hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
+                                    />
+                                 }
+                                 placeholder="08123456789"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={12}>
+                              <Select
+                                 label={<FieldLabel label="Jenis Surat" hint="Jenis surat yang ingin diajukan" />}
+                                 placeholder="Pilih jenis surat"
+                                 data={listCategory.map((item: any) => ({
+                                    value: item.id,
+                                    label: item.name,
+                                 }))}
+                              />
+                           </Grid.Col>
+                        </Grid>
+                     </FormSection>
+
+                     <FormSection
+                        title="Syarat Dokumen"
+                        description="Syarat dokumen yang diperlukan"
+                     >
+                        <Grid>
+                           <Grid.Col span={6}>
+                              <TextInput
+                                 label={
+                                    <FieldLabel
+                                       label="Nama Lengkap"
+                                       hint="Sesuai KTP"
+                                    />
+                                 }
+                                 placeholder="Nama lengkap"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={6}>
+                              <TextInput
+                                 label={
+                                    <FieldLabel
+                                       label="NIK"
+                                       hint="16 digit, tanpa spasi"
+                                    />
+                                 }
+                                 placeholder="3201xxxxxxxxxxxx"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={6}>
+                              <TextInput
+                                 label={
+                                    <FieldLabel
+                                       label="Tempat, Tanggal Lahir"
+                                       hint="Contoh: Denpasar, 31-12-1990"
+                                    />
+                                 }
+                                 placeholder="Tempat, tanggal lahir"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={6}>
+                              <Select
+                                 label={<FieldLabel label="Jenis Kelamin" />}
+                                 placeholder="Pilih jenis kelamin"
+                                 data={["Laki-laki", "Perempuan"]}
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={6}>
+                              <Select
+                                 label={<FieldLabel label="Agama" />}
+                                 placeholder="Pilih agama"
+                                 data={[
+                                    "Islam",
+                                    "Kristen",
+                                    "Katolik",
+                                    "Hindu",
+                                    "Buddha",
+                                    "Konghucu",
+                                    "Lainnya",
+                                 ]}
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={6}>
+                              <Select
+                                 label={<FieldLabel label="Status Perkawinan" />}
+                                 placeholder="Pilih status"
+                                 data={[
+                                    "Belum Kawin",
+                                    "Kawin",
+                                    "Cerai Hidup",
+                                    "Cerai Mati",
+                                 ]}
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={6}>
+                              <TextInput
+                                 label={<FieldLabel label="Pekerjaan" />}
+                                 placeholder="Pekerjaan"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={12}>
+                              <Textarea
+                                 label={<FieldLabel label="Alamat Lengkap" />}
+                                 placeholder="Alamat domisili"
+                                 minRows={2}
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={2}>
+                              <TextInput
+                                 label={<FieldLabel label="RT" />}
+                                 placeholder="001"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={2}>
+                              <TextInput
+                                 label={<FieldLabel label="RW" />}
+                                 placeholder="002"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={4}>
+                              <TextInput
+                                 label={<FieldLabel label="Desa / Kelurahan" />}
+                                 placeholder="Desa"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={4}>
+                              <TextInput
+                                 label={<FieldLabel label="Kecamatan" />}
+                                 placeholder="Kecamatan"
+                              />
+                           </Grid.Col>
+
+                           <Grid.Col span={4}>
+                              <TextInput
+                                 label={<FieldLabel label="Kabupaten / Kota" />}
+                                 placeholder="Kabupaten / Kota"
+                              />
+                           </Grid.Col>
+                        </Grid>
+                     </FormSection>
+
+                     {/* Keterangan Section */}
+                     <FormSection
+                        title="Keterangan"
+                        icon={<IconMapPin size={18} />}
+                        description="Isi pernyataan SKTM"
+                     >
+                        <Textarea
+                           label={
+                              <FieldLabel
+                                 label="Isi Surat"
+                                 hint="Jelaskan kondisi ekonomi secara singkat"
+                              />
+                           }
+                           placeholder="Pernyataan resmi bahwa yang bersangkutan benar-benar tergolong keluarga tidak mampu..."
+                           minRows={4}
+                        />
+
+                        <TextInput
+                           label={
+                              <FieldLabel
+                                 label="Keperluan"
+                                 hint="Contoh: Beasiswa pendidikan / Perawatan kesehatan"
+                              />
+                           }
+                           placeholder="Keperluan surat"
+                        />
+                     </FormSection>
+
+                     {/* Actions */}
+                     <Group justify="right" mt="md">
+                        <Button variant="default" onClick={() => { }}>
+                           Reset
+                        </Button>
+                        <Button type="submit">Kirim / Simpan</Button>
+                     </Group>
+                  </Stack>
+               </form>
+            </Stack>
+         </Box>
+      </Container>
+   );
+}

src/pages/scr/dashboard/dashboard_home.tsx

@@ -9,7 +9,7 @@ import {
   Progress,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 
 export default function Dashboard() {

src/pages/scr/dashboard/dashboard_layout.tsx

@@ -285,45 +285,47 @@ function NavigationDashboard() {
 
   return (
     <Stack gap="xs" p="sm">
-      {navItems.filter((item) => permissions.includes(item.key)).map((item) => (
-        <NavLink
-          key={item.path}
-          active={isActive(item.path as keyof typeof clientRoute)}
-          leftSection={item.icon}
-          label={
-            <Flex align="center" gap={6}>
-              <Text fw={500}>{item.label}</Text>
-              {isActive(item.path as keyof typeof clientRoute) && (
-                <Badge
-                  variant="light"
-                  color="teal"
-                  radius="sm"
-                  size="xs"
-                  style={{ textTransform: "none" }}
-                >
-                  Active
-                </Badge>
-              )}
-            </Flex>
-          }
-          description={item.description}
-          onClick={() =>
-            navigate(clientRoutes[item.path as keyof typeof clientRoute])
-          }
-          style={{
-            backgroundColor: isActive(item.path as keyof typeof clientRoute)
-              ? "rgba(0,255,200,0.1)"
-              : "transparent",
-            borderRadius: "8px",
-            transition: "all 0.2s ease",
-          }}
-          styles={{
-            label: { color: "white" },
-            description: { color: "#aaa" },
-            section: { color: "teal" },
-          }}
-        />
-      ))}
+      {navItems
+        .filter((item) => permissions.includes(item.key))
+        .map((item) => (
+          <NavLink
+            key={item.path}
+            active={isActive(item.path as keyof typeof clientRoute)}
+            leftSection={item.icon}
+            label={
+              <Flex align="center" gap={6}>
+                <Text fw={500}>{item.label}</Text>
+                {isActive(item.path as keyof typeof clientRoute) && (
+                  <Badge
+                    variant="light"
+                    color="teal"
+                    radius="sm"
+                    size="xs"
+                    style={{ textTransform: "none" }}
+                  >
+                    Active
+                  </Badge>
+                )}
+              </Flex>
+            }
+            description={item.description}
+            onClick={() =>
+              navigate(clientRoutes[item.path as keyof typeof clientRoute])
+            }
+            style={{
+              backgroundColor: isActive(item.path as keyof typeof clientRoute)
+                ? "rgba(0,255,200,0.1)"
+                : "transparent",
+              borderRadius: "8px",
+              transition: "all 0.2s ease",
+            }}
+            styles={{
+              label: { color: "white" },
+              description: { color: "#aaa" },
+              section: { color: "teal" },
+            }}
+          />
+        ))}
     </Stack>
   );
 }

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

@@ -19,7 +19,7 @@ import {
   Text,
   Textarea,
   ThemeIcon,
-  Title
+  Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
@@ -29,7 +29,7 @@ import {
   IconFileCheck,
   IconMessageReport,
   IconPhone,
-  IconUser
+  IconUser,
 } from "@tabler/icons-react";
 import type { User } from "generated/prisma";
 import type { JsonValue } from "generated/prisma/runtime/library";
@@ -59,7 +59,14 @@ export default function DetailPengajuanPage() {
       <Grid>
         <Grid.Col span={8}>
           <Stack gap={"xl"}>
-            <DetailDataPengajuan data={data?.data?.pengajuan} syaratDokumen={data?.data?.syaratDokumen} dataText={data?.data?.dataText} onAction={() => { mutate(); }} />
+            <DetailDataPengajuan
+              data={data?.data?.pengajuan}
+              syaratDokumen={data?.data?.syaratDokumen}
+              dataText={data?.data?.dataText}
+              onAction={() => {
+                mutate();
+              }}
+            />
             <DetailDataHistori data={data?.data?.history} />
           </Stack>
         </Grid.Col>
@@ -71,7 +78,17 @@ export default function DetailPengajuanPage() {
   );
 }
 
-function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data: any, syaratDokumen: any, dataText: any, onAction: () => void }) {
+function DetailDataPengajuan({
+  data,
+  syaratDokumen,
+  dataText,
+  onAction,
+}: {
+  data: any;
+  syaratDokumen: any;
+  dataText: any;
+  onAction: () => void;
+}) {
   const [opened, { open, close }] = useDisclosure(false);
   const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
   const [keterangan, setKeterangan] = useState("");
@@ -88,7 +105,9 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
       setHost(data?.user ?? null);
 
       if (data?.permissions && Array.isArray(data.permissions)) {
-        const onlySetting = data.permissions.filter((p: any) => p.startsWith("pelayanan"));
+        const onlySetting = data.permissions.filter((p: any) =>
+          p.startsWith("pelayanan"),
+        );
         setPermissions(onlySetting);
       }
     }
@@ -99,10 +118,15 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
     try {
       const res = await apiFetch.api.pelayanan["update-status"].post({
         id: data?.id,
-        status: cat == 'tolak' ? 'ditolak' : data.status == 'antrian' ? 'diterima' : 'selesai',
+        status:
+          cat == "tolak"
+            ? "ditolak"
+            : data.status == "antrian"
+              ? "diterima"
+              : "selesai",
         keterangan: keterangan,
         idUser: host?.id ?? "",
-        noSurat: noSurat
+        noSurat: noSurat,
       });
 
       if (res?.status === 200) {
@@ -120,7 +144,6 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
           type: "error",
         });
       }
-
     } catch (error) {
       console.error(error);
       notification({
@@ -129,7 +152,7 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
         type: "error",
       });
     }
-  }
+  };
 
   useShallowEffect(() => {
     if (viewImg) {
@@ -142,7 +165,7 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
       <ModalFile
         open={openedPreviewFile && !_.isEmpty(viewImg)}
         onClose={() => {
-          setOpenedPreviewFile(false)
+          setOpenedPreviewFile(false);
         }}
         folder="syarat-dokumen"
         fileName={viewImg}
@@ -159,14 +182,25 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
           {catModal === "tolak" ? (
             <>
               <Text>
-                Anda yakin ingin menolak pengajuan surat ini? Berikan alasan penolakan
+                Anda yakin ingin menolak pengajuan surat ini? Berikan alasan
+                penolakan
               </Text>
-              <Textarea size="md" minRows={5} value={keterangan} onChange={(e) => setKeterangan(e.target.value)} />
+              <Textarea
+                size="md"
+                minRows={5}
+                value={keterangan}
+                onChange={(e) => setKeterangan(e.target.value)}
+              />
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Batal
                 </Button>
-                <Button variant="filled" color="red" disabled={keterangan.length < 1} onClick={() => handleKonfirmasi("tolak")}>
+                <Button
+                  variant="filled"
+                  color="red"
+                  disabled={keterangan.length < 1}
+                  onClick={() => handleKonfirmasi("tolak")}
+                >
                   Tolak
                 </Button>
               </Group>
@@ -174,21 +208,31 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
           ) : (
             <>
               <Text>
-                Anda yakin ingin {data?.status == 'antrian' ? 'menerima' : 'menyetujui'} pengajuan surat ini?
-                {
-                  data.status == 'diterima' && 'Masukkan nomer surat yang akan dibuat'
-                }
+                Anda yakin ingin{" "}
+                {data?.status == "antrian" ? "menerima" : "menyetujui"}{" "}
+                pengajuan surat ini?
+                {data.status == "diterima" &&
+                  "Masukkan nomer surat yang akan dibuat"}
               </Text>
-              {
-                data.status == 'diterima' && (
-                  <Textarea size="md" minRows={5} value={noSurat} onChange={(e) => setNoSurat(e.target.value)} placeholder="Contoh : 08/D-IV/11/2025" />
-                )
-              }
+              {data.status == "diterima" && (
+                <Textarea
+                  size="md"
+                  minRows={5}
+                  value={noSurat}
+                  onChange={(e) => setNoSurat(e.target.value)}
+                  placeholder="Contoh : 08/D-IV/11/2025"
+                />
+              )}
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Tidak
                 </Button>
-                <Button variant="filled" color="green" onClick={() => handleKonfirmasi("terima")} disabled={data.status == 'diterima' && noSurat.length < 1}>
+                <Button
+                  variant="filled"
+                  color="green"
+                  onClick={() => handleKonfirmasi("terima")}
+                  disabled={data.status == "diterima" && noSurat.length < 1}
+                >
                   Ya
                 </Button>
               </Group>
@@ -196,11 +240,13 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
           )}
         </Stack>
       </Modal>
-      {
-        data?.status == "selesai" &&
-        (<ModalSurat open={openedPreview} onClose={() => setOpenedPreview(false)} surat={data?.idSurat} />)
-      }
-
+      {data?.status == "selesai" && (
+        <ModalSurat
+          open={openedPreview}
+          onClose={() => setOpenedPreview(false)}
+          surat={data?.idSurat}
+        />
+      )}
 
       <Card
         radius="md"
@@ -263,7 +309,11 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                   >
                     {syaratDokumen?.map((v: any) => (
                       <List.Item key={v.id}>
-                        <Anchor onClick={() => { setViewImg(v.value) }}>
+                        <Anchor
+                          onClick={() => {
+                            setViewImg(v.value);
+                          }}
+                        >
                           {v.jenis}
                         </Anchor>
                       </List.Item>
@@ -271,8 +321,6 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                   </List>
                 </Flex>
 
-
-
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconAlignJustified size={20} />
@@ -281,82 +329,85 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
 
                   <Table withRowBorders={false}>
                     <Table.Tbody>
-                      {
-                        dataText?.map((item: any) => (
-                          <Table.Tr key={item.id}>
-                            <Table.Td style={{ whiteSpace: "nowrap", width: "10%" }}>{_.upperFirst(item.jenis)}</Table.Td>
-                            <Table.Td>:</Table.Td>
-                            <Table.Td style={{ width: "85%" }}>{_.upperFirst(item.value)}</Table.Td>
-                          </Table.Tr>
-                        ))
-                      }
+                      {dataText?.map((item: any) => (
+                        <Table.Tr key={item.id}>
+                          <Table.Td
+                            style={{ whiteSpace: "nowrap", width: "10%" }}
+                          >
+                            {_.upperFirst(item.jenis)}
+                          </Table.Td>
+                          <Table.Td>:</Table.Td>
+                          <Table.Td style={{ width: "85%" }}>
+                            {_.upperFirst(item.value)}
+                          </Table.Td>
+                        </Table.Tr>
+                      ))}
                     </Table.Tbody>
                   </Table>
                 </Flex>
               </Stack>
             </Grid.Col>
             <Grid.Col span={12}>
-              {
-                data?.status === "antrian" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      disabled={!permissions.includes("pelayanan.antrian.tolak")}
-                      variant="light"
-                      onClick={() => {
-                        setCatModal("tolak");
-                        open();
-                      }}
-                    >
-                      Tolak
-                    </Button>
-                    <Button
-                      disabled={!permissions.includes("pelayanan.antrian.terima")}
-                      variant="filled"
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Terima
-                    </Button>
-                  </Group>
-                ) : data?.status === "diterima" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      disabled={!permissions.includes("pelayanan.diterima.tolak")}
-                      variant="light"
-                      onClick={() => {
-                        setCatModal("tolak");
-                        open();
-                      }}
-                    >
-                      Tolak
-                    </Button>
-                    <Button
-                      disabled={!permissions.includes("pelayanan.diterima.setujui")}
-                      variant="filled"
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Setujui
-                    </Button>
-                  </Group>
-                ) :
-                  data?.status === "selesai" ?
-                    (
-                      <Group justify="center" grow>
-                        <Button
-                          variant="light"
-                          onClick={() => setOpenedPreview(!openedPreview)}
-                        >
-                          Surat
-                        </Button>
-                      </Group>
-                    )
-                    : <></>
-              }
+              {data?.status === "antrian" ? (
+                <Group justify="center" grow>
+                  <Button
+                    disabled={!permissions.includes("pelayanan.antrian.tolak")}
+                    variant="light"
+                    onClick={() => {
+                      setCatModal("tolak");
+                      open();
+                    }}
+                  >
+                    Tolak
+                  </Button>
+                  <Button
+                    disabled={!permissions.includes("pelayanan.antrian.terima")}
+                    variant="filled"
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Terima
+                  </Button>
+                </Group>
+              ) : data?.status === "diterima" ? (
+                <Group justify="center" grow>
+                  <Button
+                    disabled={!permissions.includes("pelayanan.diterima.tolak")}
+                    variant="light"
+                    onClick={() => {
+                      setCatModal("tolak");
+                      open();
+                    }}
+                  >
+                    Tolak
+                  </Button>
+                  <Button
+                    disabled={
+                      !permissions.includes("pelayanan.diterima.setujui")
+                    }
+                    variant="filled"
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Setujui
+                  </Button>
+                </Group>
+              ) : data?.status === "selesai" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="light"
+                    onClick={() => setOpenedPreview(!openedPreview)}
+                  >
+                    Surat
+                  </Button>
+                </Group>
+              ) : (
+                <></>
+              )}
             </Grid.Col>
           </Grid>
         </Stack>
@@ -395,26 +446,25 @@ function DetailDataHistori({ data }: { data: any }) {
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {
-              data?.map((item: any) => (
-                <Table.Tr key={item.id}>
-                  <Table.Td style={{ whiteSpace: "nowrap" }}>
-                    {
-                      item.createdAt.toLocaleString("id-ID", {
-                        day: "2-digit",
-                        month: "short",
-                        year: "numeric",
-                        hour: "2-digit",
-                        minute: "2-digit",
-                        hour12: false
-                      })
-                    }</Table.Td>
-                  <Table.Td>{item.deskripsi}</Table.Td>
-                  <Table.Td>{item.status}</Table.Td>
-                  <Table.Td style={{ whiteSpace: "nowrap" }}>{item.nameUser ? item.nameUser : "-"}</Table.Td>
-                </Table.Tr>
-              ))
-            }
+            {data?.map((item: any) => (
+              <Table.Tr key={item.id}>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.createdAt.toLocaleString("id-ID", {
+                    day: "2-digit",
+                    month: "short",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    hour12: false,
+                  })}
+                </Table.Td>
+                <Table.Td>{item.deskripsi}</Table.Td>
+                <Table.Td>{item.status}</Table.Td>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.nameUser ? item.nameUser : "-"}
+                </Table.Td>
+              </Table.Tr>
+            ))}
           </Table.Tbody>
         </Table>
       </Stack>

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

@@ -20,7 +20,7 @@ import {
   IconClockHour3,
   IconFileSad,
   IconSearch,
-  IconUser
+  IconUser,
 } from "@tabler/icons-react";
 import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -123,7 +123,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
         take: "",
         page: page.toString(),
       },
-    })
+    }),
   );
 
   useShallowEffect(() => {
@@ -131,12 +131,10 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
     mutate();
   }, [status, value]);
 
-
   useShallowEffect(() => {
     mutate();
   }, [page]);
 
-
   useShallowEffect(() => {
     const unsubscribe = subscribe(state, () => mutate());
     return () => unsubscribe();
@@ -189,8 +187,16 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
         </Grid.Col>
         <Grid.Col span={3}>
           <Group justify="flex-end">
-            <Text size="sm" c="gray.5">{`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`}</Text>
-            <Pagination total={totalPage} value={page} onChange={setPage} withPages={false} />
+            <Text
+              size="sm"
+              c="gray.5"
+            >{`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`}</Text>
+            <Pagination
+              total={totalPage}
+              value={page}
+              onChange={setPage}
+              withPages={false}
+            />
           </Group>
         </Grid.Col>
       </Grid>
@@ -204,7 +210,8 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
           </Stack>
         </Flex>
       ) : (
-        Array.isArray(list) && list?.map((v: any) => (
+        Array.isArray(list) &&
+        list?.map((v: any) => (
           <Card
             key={v.id}
             radius="lg"
@@ -266,7 +273,13 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
                       Tanggal Ajuan
                     </Text>
                   </Group>
-                  <Text size="md">{toDate(v.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })}</Text>
+                  <Text size="md">
+                    {toDate(v.createdAt).toLocaleDateString("id-ID", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">

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

@@ -16,7 +16,7 @@ import {
   Table,
   Text,
   Textarea,
-  Title
+  Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
@@ -58,7 +58,12 @@ export default function DetailPengaduanPage() {
       <Grid>
         <Grid.Col span={8}>
           <Stack gap={"xl"}>
-            <DetailDataPengaduan data={data?.data?.pengaduan} onAction={() => { mutate(); }} />
+            <DetailDataPengaduan
+              data={data?.data?.pengaduan}
+              onAction={() => {
+                mutate();
+              }}
+            />
             <DetailDataHistori data={data?.data?.history} />
           </Stack>
         </Grid.Col>
@@ -70,7 +75,13 @@ export default function DetailPengaduanPage() {
   );
 }
 
-function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: () => void }) {
+function DetailDataPengaduan({
+  data,
+  onAction,
+}: {
+  data: any | null;
+  onAction: () => void;
+}) {
   const [opened, { open, close }] = useDisclosure(false);
   const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
   const [openedPreview, setOpenedPreview] = useState(false);
@@ -84,7 +95,9 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
       setHost(data?.user ?? null);
 
       if (data?.permissions && Array.isArray(data.permissions)) {
-        const onlySetting = data.permissions.filter((p: any) => p.startsWith("pengaduan"));
+        const onlySetting = data.permissions.filter((p: any) =>
+          p.startsWith("pengaduan"),
+        );
         setPermissions(onlySetting);
       }
     }
@@ -95,9 +108,16 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
     try {
       const res = await apiFetch.api.pengaduan["update-status"].post({
         id: data?.id,
-        status: cat == 'tolak' ? 'ditolak' : data.status == 'antrian' ? 'diterima' : data.status == 'diterima' ? 'dikerjakan' : 'selesai',
+        status:
+          cat == "tolak"
+            ? "ditolak"
+            : data.status == "antrian"
+              ? "diterima"
+              : data.status == "diterima"
+                ? "dikerjakan"
+                : "selesai",
         keterangan: keterangan,
-        idUser: host?.id ?? ""
+        idUser: host?.id ?? "",
       });
 
       if (res?.status === 200) {
@@ -115,7 +135,6 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
           type: "error",
         });
       }
-
     } catch (error) {
       console.error(error);
       notification({
@@ -124,11 +143,10 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
         type: "error",
       });
     }
-  }
+  };
 
   return (
     <>
-
       {/* MODAL KONFIRMASI */}
       <Modal
         opened={opened}
@@ -143,24 +161,46 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
                 Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
               </Text>
 
-              <Textarea size="md" minRows={5} value={keterangan} onChange={(e) => setKeterangan(e.target.value)} />
+              <Textarea
+                size="md"
+                minRows={5}
+                value={keterangan}
+                onChange={(e) => setKeterangan(e.target.value)}
+              />
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Batal
                 </Button>
-                <Button variant="filled" color="red" disabled={keterangan.length < 1} onClick={() => handleKonfirmasi("tolak")}>
+                <Button
+                  variant="filled"
+                  color="red"
+                  disabled={keterangan.length < 1}
+                  onClick={() => handleKonfirmasi("tolak")}
+                >
                   Tolak
                 </Button>
               </Group>
             </>
           ) : (
             <>
-              <Text>Anda yakin ingin {data?.status == 'antrian' ? 'menerima' : data.status == 'diterima' ? 'mengerjakan' : 'menyelesaikan'} pengaduan ini?</Text>
+              <Text>
+                Anda yakin ingin{" "}
+                {data?.status == "antrian"
+                  ? "menerima"
+                  : data.status == "diterima"
+                    ? "mengerjakan"
+                    : "menyelesaikan"}{" "}
+                pengaduan ini?
+              </Text>
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Tidak
                 </Button>
-                <Button variant="filled" color="green" onClick={() => handleKonfirmasi("terima")}>
+                <Button
+                  variant="filled"
+                  color="green"
+                  onClick={() => handleKonfirmasi("terima")}
+                >
                   Ya
                 </Button>
               </Group>
@@ -169,7 +209,6 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
         </Stack>
       </Modal>
 
-
       {/* MODAL GAMBAR */}
       <ModalFile
         open={openedPreview && !_.isEmpty(data?.image)}
@@ -259,18 +298,20 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
                     <IconPhotoScan size={20} />
                     <Text size="md">Gambar</Text>
                   </Group>
-                  {
-                    data?.image != null && data?.image != ""
-                      ?
-                      <Anchor href="#" onClick={() => { setOpenedPreview(true) }}>
-                        Lihat Gambar
-                      </Anchor>
-                      :
-                      <Text size="md" c="white">
-                        -
-                      </Text>
-                  }
-
+                  {data?.image != null && data?.image != "" ? (
+                    <Anchor
+                      href="#"
+                      onClick={() => {
+                        setOpenedPreview(true);
+                      }}
+                    >
+                      Lihat Gambar
+                    </Anchor>
+                  ) : (
+                    <Text size="md" c="white">
+                      -
+                    </Text>
+                  )}
                 </Flex>
               </Stack>
             </Grid.Col>
@@ -285,74 +326,76 @@ function DetailDataPengaduan({ data, onAction }: { data: any | null, onAction: (
                     {_.upperFirst(data?.detail)}
                   </Text>
                 </Flex>
-                {
-                  data?.keterangan && (
-                    <Flex direction={"column"} justify="flex-start">
-                      <Group gap="xs">
-                        <IconInfoTriangle size={20} />
-                        <Text size="md">Keterangan</Text>
-                      </Group>
-                      <Text size="md" c={"white"}>
-                        {_.upperFirst(data?.keterangan)}
-                      </Text>
-                    </Flex>
-                  )
-                }
+                {data?.keterangan && (
+                  <Flex direction={"column"} justify="flex-start">
+                    <Group gap="xs">
+                      <IconInfoTriangle size={20} />
+                      <Text size="md">Keterangan</Text>
+                    </Group>
+                    <Text size="md" c={"white"}>
+                      {_.upperFirst(data?.keterangan)}
+                    </Text>
+                  </Flex>
+                )}
               </Stack>
             </Grid.Col>
             <Grid.Col span={12}>
-              {
-                data?.status === "antrian" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      variant="light"
-                      disabled={!permissions.includes("pengaduan.antrian.tolak")}
-                      onClick={() => {
-                        setCatModal("tolak");
-                        open();
-                      }}
-                    >
-                      Tolak
-                    </Button>
-                    <Button
-                      variant="filled"
-                      disabled={!permissions.includes("pengaduan.antrian.terima")}
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Terima
-                    </Button>
-                  </Group>
-                ) : data?.status === "diterima" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      variant="filled"
-                      disabled={!permissions.includes("pengaduan.diterima.dikerjakan")}
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Kerjakan
-                    </Button>
-                  </Group>
-                ) : data?.status === "dikerjakan" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      variant="filled"
-                      disabled={!permissions.includes("pengaduan.dikerjakan.selesai")}
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Selesai
-                    </Button>
-                  </Group>
-                ) : <></>
-              }
+              {data?.status === "antrian" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="light"
+                    disabled={!permissions.includes("pengaduan.antrian.tolak")}
+                    onClick={() => {
+                      setCatModal("tolak");
+                      open();
+                    }}
+                  >
+                    Tolak
+                  </Button>
+                  <Button
+                    variant="filled"
+                    disabled={!permissions.includes("pengaduan.antrian.terima")}
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Terima
+                  </Button>
+                </Group>
+              ) : data?.status === "diterima" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="filled"
+                    disabled={
+                      !permissions.includes("pengaduan.diterima.dikerjakan")
+                    }
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Kerjakan
+                  </Button>
+                </Group>
+              ) : data?.status === "dikerjakan" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="filled"
+                    disabled={
+                      !permissions.includes("pengaduan.dikerjakan.selesai")
+                    }
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Selesai
+                  </Button>
+                </Group>
+              ) : (
+                <></>
+              )}
             </Grid.Col>
           </Grid>
         </Stack>
@@ -391,25 +434,25 @@ function DetailDataHistori({ data }: { data: any }) {
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {
-              data?.map((item: any) => (
-                <Table.Tr key={item.id}>
-                  <Table.Td style={{ whiteSpace: "nowrap" }}>{
-                    item.createdAt.toLocaleString("id-ID", {
-                      day: "2-digit",
-                      month: "short",
-                      year: "numeric",
-                      hour: "2-digit",
-                      minute: "2-digit",
-                      hour12: false
-                    })
-                  }</Table.Td>
-                  <Table.Td>{item.deskripsi}</Table.Td>
-                  <Table.Td>{item.status}</Table.Td>
-                  <Table.Td style={{ whiteSpace: "nowrap" }}>{item.nameUser ? item.nameUser : "-"}</Table.Td>
-                </Table.Tr>
-              ))
-            }
+            {data?.map((item: any) => (
+              <Table.Tr key={item.id}>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.createdAt.toLocaleString("id-ID", {
+                    day: "2-digit",
+                    month: "short",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    hour12: false,
+                  })}
+                </Table.Td>
+                <Table.Td>{item.deskripsi}</Table.Td>
+                <Table.Td>{item.status}</Table.Td>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.nameUser ? item.nameUser : "-"}
+                </Table.Td>
+              </Table.Tr>
+            ))}
           </Table.Tbody>
         </Table>
       </Stack>

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

@@ -134,7 +134,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
         take: "",
         page: page.toString(),
       },
-    })
+    }),
   );
 
   useShallowEffect(() => {
@@ -175,7 +175,6 @@ function ListPengaduan({ status }: { status: StatusKey }) {
   const pageNow = data?.data?.page || 1;
   const toDate = (d: any) => new Date(d);
 
-
   return (
     <Stack gap="xl">
       <Grid>
@@ -197,8 +196,16 @@ function ListPengaduan({ status }: { status: StatusKey }) {
         </Grid.Col>
         <Grid.Col span={3}>
           <Group justify="flex-end">
-            <Text size="sm" c="gray.5">{`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`}</Text>
-            <Pagination total={totalPage} value={page} onChange={setPage} withPages={false} />
+            <Text
+              size="sm"
+              c="gray.5"
+            >{`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`}</Text>
+            <Pagination
+              total={totalPage}
+              value={page}
+              onChange={setPage}
+              withPages={false}
+            />
           </Group>
         </Grid.Col>
       </Grid>
@@ -212,7 +219,8 @@ function ListPengaduan({ status }: { status: StatusKey }) {
           </Stack>
         </Flex>
       ) : (
-        Array.isArray(list) && list?.map((v: any) => (
+        Array.isArray(list) &&
+        list?.map((v: any) => (
           <Card
             key={v.id}
             radius="lg"
@@ -272,7 +280,13 @@ function ListPengaduan({ status }: { status: StatusKey }) {
                       Tanggal Aduan
                     </Text>
                   </Group>
-                  <Text size="md">{toDate(v.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" })}</Text>
+                  <Text size="md">
+                    {toDate(v.createdAt).toLocaleDateString("id-ID", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">

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

@@ -5,19 +5,14 @@ import ProfileUser from "@/components/ProfileUser";
 import UserRoleSetting from "@/components/UserRoleSetting";
 import UserSetting from "@/components/UserSetting";
 import apiFetch from "@/lib/apiFetch";
-import {
-  Card,
-  Container,
-  Grid,
-  NavLink
-} from "@mantine/core";
+import { Card, Container, Grid, NavLink } from "@mantine/core";
 import {
   IconBuildingBank,
   IconCategory2,
   IconMailSpark,
   IconUserCog,
   IconUserScreen,
-  IconUsersGroup
+  IconUsersGroup,
 } from "@tabler/icons-react";
 import type { JsonValue } from "generated/prisma/runtime/library";
 import { useEffect, useState } from "react";
@@ -33,7 +28,9 @@ export default function DetailSettingPage() {
     async function fetchPermissions() {
       const { data } = await apiFetch.api.user.find.get();
       if (Array.isArray(data?.permissions)) {
-        const onlySetting = data.permissions.filter((p: any) => p.startsWith("setting"));
+        const onlySetting = data.permissions.filter((p: any) =>
+          p.startsWith("setting"),
+        );
         setPermissions(onlySetting);
       } else {
         setPermissions([]);
@@ -42,7 +39,6 @@ export default function DetailSettingPage() {
     fetchPermissions();
   }, []);
 
-
   const navItems = [
     {
       key: "setting.profile",
@@ -85,8 +81,7 @@ export default function DetailSettingPage() {
       icon: <IconBuildingBank size={20} />,
       label: "Desa",
       description: "Manage desa information",
-    }
-
+    },
   ];
 
   return (
@@ -104,17 +99,19 @@ export default function DetailSettingPage() {
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
           >
-            {
-              navItems.filter((item) => permissions.includes(item.key)).map((item) => (
+            {navItems
+              .filter((item) => permissions.includes(item.key))
+              .map((item) => (
                 <NavLink
                   key={item.key}
-                  href={'?type=' + item.path}
+                  href={"?type=" + item.path}
                   label={item.label}
                   leftSection={item.icon}
-                  active={type === item.path || (!type && item.path === 'profile')}
+                  active={
+                    type === item.path || (!type && item.path === "profile")
+                  }
                 />
-              ))
-            }
+              ))}
           </Card>
         </Grid.Col>
         <Grid.Col span={9}>
@@ -130,17 +127,47 @@ export default function DetailSettingPage() {
             }}
           >
             {type === "cat-pengaduan" ? (
-              <KategoriPengaduan permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.kategori_pengaduan"))} />
+              <KategoriPengaduan
+                permissions={permissions.filter(
+                  (p) =>
+                    typeof p === "string" &&
+                    p.startsWith("setting.kategori_pengaduan"),
+                )}
+              />
             ) : type === "cat-pelayanan" ? (
-              <KategoriPelayananSurat permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.kategori_pelayanan"))} />
+              <KategoriPelayananSurat
+                permissions={permissions.filter(
+                  (p) =>
+                    typeof p === "string" &&
+                    p.startsWith("setting.kategori_pelayanan"),
+                )}
+              />
             ) : type === "desa" ? (
-              <DesaSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.desa"))} />
+              <DesaSetting
+                permissions={permissions.filter(
+                  (p) => typeof p === "string" && p.startsWith("setting.desa"),
+                )}
+              />
             ) : type === "user" ? (
-              <UserSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.user."))} />
+              <UserSetting
+                permissions={permissions.filter(
+                  (p) => typeof p === "string" && p.startsWith("setting.user."),
+                )}
+              />
             ) : type === "role" ? (
-              <UserRoleSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.user_role"))} />
+              <UserRoleSetting
+                permissions={permissions.filter(
+                  (p) =>
+                    typeof p === "string" && p.startsWith("setting.user_role"),
+                )}
+              />
             ) : (
-              <ProfileUser permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.profile"))} />
+              <ProfileUser
+                permissions={permissions.filter(
+                  (p) =>
+                    typeof p === "string" && p.startsWith("setting.profile"),
+                )}
+              />
             )}
           </Card>
         </Grid.Col>

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

@@ -37,10 +37,13 @@ export default function DetailWargaPage() {
     mutate();
   }, []);
 
-
   return (
     <>
-      <LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+      <LoadingOverlay
+        visible={isLoading}
+        zIndex={1000}
+        overlayProps={{ radius: "sm", blur: 2 }}
+      />
       <Container size="xl" py="xl" w={"100%"}>
         <Grid>
           <Grid.Col span={4}>
@@ -48,18 +51,29 @@ export default function DetailWargaPage() {
           </Grid.Col>
           <Grid.Col span={8}>
             <Stack gap={"xl"}>
-              <DetailDataHistori data={data?.data?.pengaduan} kategori="pengaduan" />
-              <DetailDataHistori data={data?.data?.pelayanan} kategori="pelayanan" />
+              <DetailDataHistori
+                data={data?.data?.pengaduan}
+                kategori="pengaduan"
+              />
+              <DetailDataHistori
+                data={data?.data?.pelayanan}
+                kategori="pelayanan"
+              />
             </Stack>
           </Grid.Col>
         </Grid>
       </Container>
     </>
-
   );
 }
 
-function DetailDataHistori({ data, kategori }: { data: any, kategori: 'pengaduan' | 'pelayanan' }) {
+function DetailDataHistori({
+  data,
+  kategori,
+}: {
+  data: any;
+  kategori: "pengaduan" | "pelayanan";
+}) {
   const navigate = useNavigate();
 
   return (
@@ -85,43 +99,47 @@ function DetailDataHistori({ data, kategori }: { data: any, kategori: 'pengaduan
           <Table.Thead>
             <Table.Tr>
               <Table.Th>No {_.upperFirst(kategori)}</Table.Th>
-              <Table.Th>{kategori == "pengaduan" ? "Judul" : "Kategori"}</Table.Th>
+              <Table.Th>
+                {kategori == "pengaduan" ? "Judul" : "Kategori"}
+              </Table.Th>
               <Table.Th>Status</Table.Th>
               <Table.Th></Table.Th>
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {
-              data?.length > 0 ? (
-                data?.map((item: any, index: number) => (
-                  <Table.Tr key={index}>
-                    <Table.Td>{item.noPengaduan}</Table.Td>
-                    <Table.Td>{kategori == "pengaduan" ? item.title : item.category}</Table.Td>
-                    <Table.Td>{item.status}</Table.Td>
-                    <Table.Td>
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          kategori == "pengaduan" ?
-                            navigate(
+            {data?.length > 0 ? (
+              data?.map((item: any, index: number) => (
+                <Table.Tr key={index}>
+                  <Table.Td>{item.noPengaduan}</Table.Td>
+                  <Table.Td>
+                    {kategori == "pengaduan" ? item.title : item.category}
+                  </Table.Td>
+                  <Table.Td>{item.status}</Table.Td>
+                  <Table.Td>
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        kategori == "pengaduan"
+                          ? navigate(
                               `/scr/dashboard/pengaduan/detail?id=${item.id}`,
-                            ) :
-                            navigate(
-                              `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${item.id}`,
                             )
-                        }}
-                      >
-                        Detail
-                      </Button>
-                    </Table.Td>
-                  </Table.Tr>
-                ))
-              ) : (
-                <Table.Tr>
-                  <Table.Td colSpan={4} align="center">Tidak ada data</Table.Td>
+                          : navigate(
+                              `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${item.id}`,
+                            );
+                      }}
+                    >
+                      Detail
+                    </Button>
+                  </Table.Td>
                 </Table.Tr>
-              )
-            }
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={4} align="center">
+                  Tidak ada data
+                </Table.Td>
+              </Table.Tr>
+            )}
           </Table.Tbody>
         </Table>
       </Stack>

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

@@ -39,7 +39,6 @@ export default function ListWargaPage() {
   const pageSize = data?.data?.pageSize || 10;
   const pageNow = data?.data?.page || 1;
 
-
   useShallowEffect(() => {
     setPages(1);
     mutate();
@@ -49,7 +48,6 @@ export default function ListWargaPage() {
     mutate();
   }, [pages]);
 
-
   return (
     <Container size="xl" py="xl" w={"100%"}>
       <Card
@@ -82,7 +80,12 @@ export default function ListWargaPage() {
             />
             <Group>
               <Text size="sm">{`${pageSize * (pages - 1) + 1} – ${Math.min(total, pageSize * pages)} of ${total}`}</Text>
-              <Pagination total={totalPage} value={pages} onChange={setPages} withPages={false} />
+              <Pagination
+                total={totalPage}
+                value={pages}
+                onChange={setPages}
+                withPages={false}
+              />
             </Group>
           </Flex>
           <Divider my={0} />
@@ -95,32 +98,33 @@ export default function ListWargaPage() {
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {
-                Array.isArray(list) && list?.length === 0 ? (
-                  <Table.Tr>
-                    <Table.Td colSpan={3} align="center">Tidak ada data</Table.Td>
+              {Array.isArray(list) && list?.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={3} align="center">
+                    Tidak ada data
+                  </Table.Td>
+                </Table.Tr>
+              ) : (
+                Array.isArray(list) &&
+                list?.map((item, i) => (
+                  <Table.Tr key={i}>
+                    <Table.Td>{item.name}</Table.Td>
+                    <Table.Td w={250}>{item.phone}</Table.Td>
+                    <Table.Td w={150}>
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          navigate(
+                            `/scr/dashboard/warga/detail-warga?id=${item.id}`,
+                          );
+                        }}
+                      >
+                        Detail
+                      </Button>
+                    </Table.Td>
                   </Table.Tr>
-                ) : (
-                  Array.isArray(list) && list?.map((item, i) => (
-                    <Table.Tr key={i}>
-                      <Table.Td>{item.name}</Table.Td>
-                      <Table.Td w={250}>{item.phone}</Table.Td>
-                      <Table.Td w={150}>
-                        <Button
-                          variant="outline"
-                          onClick={() => {
-                            navigate(
-                              `/scr/dashboard/warga/detail-warga?id=${item.id}`,
-                            );
-                          }}
-                        >
-                          Detail
-                        </Button>
-                      </Table.Td>
-                    </Table.Tr>
-                  ))
-                )
-              }
+                ))
+              )}
             </Table.Tbody>
           </Table>
         </Stack>

src/server/routes/pelayanan_surat_route.ts

@@ -102,6 +102,24 @@ const PelayananRoute = new Elysia({
          description: `tool untuk delete kategori pelayanan surat`
       }
    })
+   .get("/category/detail", async ({ query }) => {
+      const { id } = query
+      const data = await prisma.categoryPelayanan.findUnique({
+         where:{
+            id
+         }
+      })
+
+      return data
+   }, {
+      query: t.Object({
+         id: t.String({ minLength: 1, error: "id harus diisi" }),
+      }),
+      detail: {
+         summary: "Detail Kategori Pelayanan Surat by ID",
+         description: `tool untuk mendapatkan detail kategori pelayanan surat berdasarkan id`,
+      }
+   })
 
 
    // --- PELAYANAN SURAT ---