fix: pelayanan surat

Deskripsi: - pelayanan surat No Issues
fix: update data pengajuan surat
2026-01-14 17:41:27 +08:00 · 2026-01-14 15:58:51 +08:00 · 2026-01-13 17:18:01 +08:00 · 2026-01-13 17:10:59 +08:00 · 2026-01-13 15:38:29 +08:00 · 2026-01-13 15:10:08 +08:00
10 changed files with 205 additions and 82 deletions
--- a/src/components/BreadCrumbs.tsx
+++ b/src/components/BreadCrumbs.tsx
@@ -0,0 +1,44 @@
+import { ActionIcon, Anchor, Breadcrumbs, Card, Group } from "@mantine/core";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useNavigate } from "react-router-dom";
+
+export default function BreadCrumbs({ dataLink, back, linkBack }: { dataLink: { title: string, link: string, active: boolean }[], back?: boolean, linkBack?: string }) {
+   const navigate = useNavigate();
+
+   return (
+      <Card
+         radius="md"
+         p="sm"
+         withBorder
+         style={{
+            background:
+               "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+            borderColor: "rgba(100,100,100,0.2)",
+            boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+         }}
+      >
+         <Group>
+            {
+               back &&
+               <ActionIcon variant="outline" aria-label="Settings" radius={"lg"} onClick={() => window.history.back()}>
+                  <IconChevronLeft size={20} stroke={1.5} />
+               </ActionIcon>
+            }
+            <Breadcrumbs>
+               {
+                  dataLink.map((item, index) => (
+                     <Anchor
+                        c={item.active ? "gray.0" : "gray.5"}
+                        onClick={() => item.active || item.link == "#" ? null : navigate(item.link)}
+                        key={index}
+                     >
+                        {item.title}
+                     </Anchor>
+                  ))
+               }
+            </Breadcrumbs>
+         </Group>
+
+      </Card>
+   )
+}
--- a/src/components/DesaSetting.tsx
+++ b/src/components/DesaSetting.tsx
@@ -207,7 +207,7 @@ export default function DesaSetting({
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
-              {list?.map((v: any) => (
+              {list.length > 0 && list?.map((v: any) => (
                <Table.Tr key={v.id}>
                  <Table.Td>{v.name}</Table.Td>
                  <Table.Td>
--- a/src/components/KategoriPelayananSurat.tsx
+++ b/src/components/KategoriPelayananSurat.tsx
@@ -4,19 +4,17 @@ import {
  Button,
  Divider,
  Flex,
-  Grid,
  Group,
-  Input,
  List,
  Modal,
  Stack,
  Table,
  Text,
  Title,
-  Tooltip,
+  Tooltip
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconEdit, IconEye, IconPlus, IconTrash } from "@tabler/icons-react";
+import { IconEye, IconTrash } from "@tabler/icons-react";
 import type { JsonValue } from "generated/prisma/runtime/library";
 import { useState } from "react";
 import useSWR from "swr";
@@ -625,7 +623,7 @@ export default function KategoriPelayananSurat({
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
-              {list?.map((v: any) => (
+              {list.length > 0 && list?.map((v: any) => (
                <Table.Tr key={v.id}>
                  <Table.Td>{v.name}</Table.Td>
                  <Table.Td>
--- a/src/components/ModalSurat.tsx
+++ b/src/components/ModalSurat.tsx
@@ -1,5 +1,5 @@
 import apiFetch from "@/lib/apiFetch";
-import { Flex, Loader, Modal, Text } from "@mantine/core";
+import { Flex, Modal, Progress, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import html2canvas from "html2canvas";
 import jsPDF from "jspdf";
@@ -35,7 +35,7 @@ export default function ModalSurat({
    fontSize: "14px",
    fontFamily: "Times New Roman",
  };
-  const [uploading, setUploading] = useState<"Menyiapkan" | "Mengupload" | "Selesai">("Menyiapkan")
+  const [uploading, setUploading] = useState<{ text: "Menyiapkan" | "Mengupload" | "Selesai", value: number }>({ text: "Menyiapkan", value: 10 })
  const hiddenRef = useRef<any>(null);
  const { data, mutate, isLoading } = useSWR("surat", () =>
    apiFetch.api.surat.detail.get({
@@ -52,7 +52,7 @@ export default function ModalSurat({
  const uploadPdf = async () => {
    try {
      if (data && data.data && data.data.surat && (data.data.surat.file == "" || data.data.surat.file == null)) {
-        setUploading("Mengupload");
+        setUploading({ text: "Mengupload", value: 75 });
        const element = hiddenRef.current;
        const canvas = await html2canvas(element, {
          scale: 2,
@@ -95,7 +95,7 @@ export default function ModalSurat({
          filename: resImg.data?.filename!,
        });

-        setUploading("Selesai");
+        setUploading({ text: "Selesai", value: 100 });
        setTimeout(() => {
          onClose(resUpdate.data?.link);
        }, 1000)
@@ -136,14 +136,24 @@ export default function ModalSurat({
          },
        }}
        title={
-          <Flex justify="space-between" align="center" w="100%">
-            <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>
+          <>
+            <Flex justify="space-between" align="center" w="100%">
+              <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>

-            <Flex gap={8} align="center">
+              {/* <Flex gap={8} align="center">
              <Loader color="blue" size="xs" />
-              <Text size="sm">{uploading}</Text>
+              <Text size="sm">{uploading.text}</Text>
+            </Flex> */}
            </Flex>
-          </Flex>
+            <Stack
+              align="stretch"
+              justify="center"
+              gap="xs"
+            >
+              <Text size="sm" ta="center">{uploading.text} - Harap menunggu sampai selesai</Text>
+              <Progress radius="md" value={uploading.value} animated size="lg" />
+            </Stack>
+          </>
        }
      >
        <div ref={hiddenRef} style={A4Style}>
--- a/src/pages/darmasaba/update_data_surat.tsx
+++ b/src/pages/darmasaba/update_data_surat.tsx
@@ -317,57 +317,60 @@ function SearchData() {
  }

  return (
-    <FormSection
-      title="Cari Pengajuan Surat"
-      info="Masukkan nomor pengajuan dan nomor telepon yang digunakan saat pengajuan surat."
-    >
-      <Grid>
-        <Grid.Col span={6}>
-          <TextInput
-            label={
-              <FieldLabel
-                label="Nomor Pengajuan"
-                hint="Nomor pengajuan surat"
-              />
-            }
-            placeholder="PS-2025-000123"
-            onChange={(e) => {
-              setSearchPengajuan(e.target.value);
-            }}
-          />
-        </Grid.Col>
+    <>
+      <FullScreenLoading visible={submitLoading} text="Mencari Data" />
+      <FormSection
+        title="Cari Pengajuan Surat"
+        info="Masukkan nomor pengajuan dan nomor telepon yang digunakan saat pengajuan surat."
+      >
+        <Grid>
+          <Grid.Col span={6}>
+            <TextInput
+              label={
+                <FieldLabel
+                  label="Nomor Pengajuan"
+                  hint="Nomor pengajuan surat"
+                />
+              }
+              placeholder="PS-2025-000123"
+              onChange={(e) => {
+                setSearchPengajuan(e.target.value);
+              }}
+            />
+          </Grid.Col>

-        <Grid.Col span={6}>
-          <TextInput
-            label={
-              <FieldLabel
-                label="Nomor Telephone"
-                hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
-              />
-            }
-            placeholder="08123456789"
-            type="number"
-            onChange={(e) => {
-              setSearchPengajuanPhone(e.target.value);
-            }}
-          />
-        </Grid.Col>
+          <Grid.Col span={6}>
+            <TextInput
+              label={
+                <FieldLabel
+                  label="Nomor Telephone"
+                  hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
+                />
+              }
+              placeholder="08123456789"
+              type="number"
+              onChange={(e) => {
+                setSearchPengajuanPhone(e.target.value);
+              }}
+            />
+          </Grid.Col>

-        <Grid.Col span={12}>
-          <Button
-            fullWidth
-            variant="light"
-            color="blue"
-            onClick={() => {
-              handleSearch();
-            }}
-            loading={submitLoading}
-          >
-            Cari Pengajuan
-          </Button>
-        </Grid.Col>
-      </Grid>
-    </FormSection>
+          <Grid.Col span={12}>
+            <Button
+              fullWidth
+              variant="light"
+              color="blue"
+              onClick={() => {
+                handleSearch();
+              }}
+              loading={submitLoading}
+            >
+              Cari Pengajuan
+            </Button>
+          </Grid.Col>
+        </Grid>
+      </FormSection>
+    </>
  );
 }

@@ -387,6 +390,7 @@ function DataUpdate({
  const [dataSyaratDokumen, setDataSyaratDokumen] = useState<DataItem[]>([]);
  const [dataPengajuan, setDataPengajuan] = useState<DataPengajuan | {}>({});
  const [status, setStatus] = useState("");
+  const [loadingFetchData, setLoadingFetchData] = useState(false);
  const [formSurat, setFormSurat] = useState<FormUpdateSurat>({
    dataPelengkap: [],
    syaratDokumen: [],
@@ -394,6 +398,7 @@ function DataUpdate({

  async function fetchData() {
    try {
+      setLoadingFetchData(true);
      const res = await apiFetch.api.pelayanan["detail-data"].post({
        nomerPengajuan: noPengajuan,
      });
@@ -421,6 +426,8 @@ function DataUpdate({
      }
    } catch (error) {
      console.error("Error fetching data:", error);
+    } finally {
+      setLoadingFetchData(false);
    }
  }

@@ -600,7 +607,7 @@ function DataUpdate({

  return (
    <>
-      <FullScreenLoading visible={submitLoading} />
+      <FullScreenLoading visible={submitLoading || loadingFetchData} />
      <Modal
        opened={opened}
        onClose={close}
@@ -667,6 +674,7 @@ function DataUpdate({
                <Grid.Col span={6} key={index}>
                  {item.type == "enum" ? (
                    <Select
+                      disabled={status != "ditolak" && status != "antrian"}
                      allowDeselect={false}
                      label={<FieldLabel label={item.name} hint={item.desc} />}
                      data={item.options ?? []}
@@ -686,6 +694,7 @@ function DataUpdate({
                    />
                  ) : item.type == "date" ? (
                    <DateInput
+                      disabled={status != "ditolak" && status != "antrian"}
                      locale="id"
                      valueFormat="DD MMMM YYYY"
                      label={<FieldLabel label={item.name} hint={item.desc} />}
@@ -712,7 +721,7 @@ function DataUpdate({
                              (n: any) => n.key === item.key,
                            )?.value,
                          )
-                          :   parseTanggalID(item.value)
+                          : parseTanggalID(item.value)
                      }
                    />
                  ) : (
--- a/src/pages/scr/dashboard/dashboard_layout.tsx
+++ b/src/pages/scr/dashboard/dashboard_layout.tsx
@@ -73,7 +73,7 @@ export default function DashboardLayout() {
    <AppShell
      padding="lg"
      navbar={{
-        width: 260,
+        width: 300,
        breakpoint: "sm",
        collapsed: { mobile: !opened, desktop: !opened },
      }}
@@ -290,22 +290,31 @@ function NavigationDashboard() {
        .map((item) => (
          <NavLink
            key={item.path}
-            active={isActive(item.path as keyof typeof clientRoute)}
+            active={isActive(item.path as keyof typeof clientRoute) ||
+              (location.pathname == "/scr/dashboard/pelayanan-surat/detail-pelayanan" && item.path == "/scr/dashboard/pelayanan-surat/list-pelayanan") ||
+              (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list") ||
+              (location.pathname == "/scr/dashboard/warga/detail-warga" && item.path == "/scr/dashboard/warga/list-warga")}
            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>
-                )}
+                {(
+                  isActive(item.path as keyof typeof clientRoute) ||
+                  (location.pathname == "/scr/dashboard/pelayanan-surat/detail-pelayanan" && item.path == "/scr/dashboard/pelayanan-surat/list-pelayanan") ||
+                  (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list") ||
+                  (location.pathname == "/scr/dashboard/warga/detail-warga" && item.path == "/scr/dashboard/warga/list-warga")
+                )
+                  && (
+                    <Badge
+                      variant="light"
+                      color="teal"
+                      radius="sm"
+                      size="xs"
+                      style={{ textTransform: "none" }}
+                    >
+                      Active
+                    </Badge>
+                  )}
              </Flex>
            }
            description={item.description}
@@ -313,7 +322,10 @@ function NavigationDashboard() {
              navigate(clientRoutes[item.path as keyof typeof clientRoute])
            }
            style={{
-              backgroundColor: isActive(item.path as keyof typeof clientRoute)
+              backgroundColor: isActive(item.path as keyof typeof clientRoute) ||
+                (location.pathname == "/scr/dashboard/pelayanan-surat/detail-pelayanan" && item.path == "/scr/dashboard/pelayanan-surat/list-pelayanan") ||
+                (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list") ||
+                (location.pathname == "/scr/dashboard/warga/detail-warga" && item.path == "/scr/dashboard/warga/list-warga")
                ? "rgba(0,255,200,0.1)"
                : "transparent",
              borderRadius: "8px",
--- a/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
+++ b/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
@@ -1,3 +1,5 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
+import FullScreenLoading from "@/components/FullScreenLoading";
 import ModalFile from "@/components/ModalFile";
 import ModalSurat from "@/components/ModalSurat";
 import notification from "@/components/notificationGlobal";
@@ -49,6 +51,11 @@ import { useLocation } from "react-router-dom";
 import useSwr from "swr";

 export default function DetailPengajuanPage() {
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Pelayanan Surat", link: "/scr/dashboard/pelayanan-surat/list-pelayanan", active: false },
+    { title: "Detail Pengajuan Surat", link: "#", active: true },
+  ];
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  const id = query.get("id");
@@ -67,6 +74,9 @@ export default function DetailPengajuanPage() {
  return (
    <Container size="xl" py="xl" w={"100%"}>
      <Grid>
+        <Grid.Col span={12}>
+          <BreadCrumbs dataLink={dataMenu} back />
+        </Grid.Col>
        <Grid.Col span={8}>
          <Stack gap={"xl"}>
            <DetailDataPengajuan
@@ -116,6 +126,7 @@ function DetailDataPengajuan({
  const [editValue, setEditValue] = useState({ id: "", jenis: "", val: "", option: null as any, type: "", key: "" })
  const [openEdit, setOpenEdit] = useState(false)
  const [loadingUpdate, setLoadingUpdate] = useState(false)
+  const [loadingFS, setLoadingFS] = useState({ value: false, text: "" })

  useEffect(() => {
    async function fetchHost() {
@@ -134,6 +145,7 @@ function DetailDataPengajuan({

  async function sendWA({ status, linkSurat, linkUpdate }: { status: string, linkSurat: string, linkUpdate: string }) {
    try {
+      setLoadingFS({ value: true, text: "Sending message to warga" })
      const resWA = await apiFetch.api["send-wa"]["pengajuan-surat"].post({
        noPengajuan: data?.noPengajuan ?? "",
        jenisSurat: data?.category ?? "",
@@ -172,10 +184,14 @@ function DetailDataPengajuan({
        type: "error",
      });
    }
+    finally {
+      setLoadingFS({ value: false, text: "" })
+    }
  }

  const handleKonfirmasi = async (cat: "terima" | "tolak") => {
    try {
+      setLoadingFS({ value: true, text: "Updating status" })
      const statusFix = cat == "tolak"
        ? "ditolak"
        : data.status == "antrian"
@@ -225,6 +241,8 @@ function DetailDataPengajuan({
        message: "Failed to update pengajuan surat",
        type: "error",
      });
+    } finally {
+      setLoadingFS({ value: false, text: "" })
    }
  };

@@ -298,6 +316,8 @@ function DetailDataPengajuan({

  return (
    <>
+
+      <FullScreenLoading visible={loadingFS.value} text={loadingFS.text} />
      {/* MODAL EDIT DATA PELENGKAP */}
      <Modal
        opened={openEdit}
@@ -365,6 +385,7 @@ function DetailDataPengajuan({
        open={openedPreviewFile && !_.isEmpty(viewImg.file)}
        onClose={() => {
          setOpenedPreviewFile(false);
+          setViewImg({ file: "", folder: "" })
        }}
        folder={viewImg.folder}
        fileName={viewImg.file}
--- a/src/pages/scr/dashboard/pengaduan/detail_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
 import ModalFile from "@/components/ModalFile";
 import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
@@ -40,6 +41,11 @@ import useSwr from "swr";


 export default function DetailPengaduanPage() {
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Pengaduan", link: "/scr/dashboard/pengaduan/list", active: false },
+    { title: "Detail Pengaduan", link: "#", active: true },
+  ];
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  const id = query.get("id");
@@ -58,6 +64,9 @@ export default function DetailPengaduanPage() {
  return (
    <Container size="xl" py="xl" w={"100%"}>
      <Grid>
+        <Grid.Col span={12}>
+          <BreadCrumbs dataLink={dataMenu} back />
+        </Grid.Col>
        <Grid.Col span={8}>
          <Stack gap={"xl"}>
            <DetailDataPengaduan
--- a/src/pages/scr/dashboard/setting/detail_setting_page.tsx
+++ b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
 import DesaSetting from "@/components/DesaSetting";
 import KategoriPelayananSurat from "@/components/KategoriPelayananSurat";
 import KategoriPengaduan from "@/components/KategoriPengaduan";
@@ -15,14 +16,21 @@ import {
  IconUsersGroup,
 } from "@tabler/icons-react";
 import type { JsonValue } from "generated/prisma/runtime/library";
+import _ from "lodash";
 import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";

 export default function DetailSettingPage() {
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  const type = query.get("type");
+  const navigate = useNavigate();
  const [permissions, setPermissions] = useState<JsonValue[]>([]);
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Setting", link: "#", active: false },
+    { title: type == "cat-pengaduan" ? "Kategori Pengaduan" : type == "cat-pelayanan" ? "Kategori Pelayanan Surat" : type ? _.upperFirst(type) : "Profile", link: "#", active: true },
+  ];

  useEffect(() => {
    async function fetchPermissions() {
@@ -87,6 +95,9 @@ export default function DetailSettingPage() {
  return (
    <Container size="xl" py="xl" w={"100%"}>
      <Grid>
+        <Grid.Col span={12}>
+          <BreadCrumbs dataLink={dataMenu} back />
+        </Grid.Col>
        <Grid.Col span={3}>
          <Card
            radius="md"
@@ -104,7 +115,7 @@ export default function DetailSettingPage() {
              .map((item) => (
                <NavLink
                  key={item.key}
-                  href={"?type=" + item.path}
+                  onClick={()=>{navigate("?type=" + item.path)}}
                  label={item.label}
                  leftSection={item.icon}
                  active={
--- a/src/pages/scr/dashboard/warga/detail_warga_page.tsx
+++ b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
 import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
 import {
@@ -26,6 +27,11 @@ import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";

 export default function DetailWargaPage() {
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Warga", link: "/scr/dashboard/warga/list-warga", active: false },
+    { title: "Detail Warga", link: "#", active: true },
+  ];
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  const id = query.get("id");
@@ -50,6 +56,9 @@ export default function DetailWargaPage() {
      />
      <Container size="xl" py="xl" w={"100%"}>
        <Grid>
+          <Grid.Col span={12}>
+            <BreadCrumbs dataLink={dataMenu} back />
+          </Grid.Col>
          <Grid.Col span={4}>
            <DetailWarga id={id!} />
          </Grid.Col>
Author	SHA1	Message	Date
amaliadwiy	3348cbe8e3	fix: pelayanan surat Deskripsi: - pelayanan surat No Issues	2026-01-14 17:41:27 +08:00
amaliadwiy	727984a076	fix: update data pengajuan surat Deskripsi: - loading saat melakukan pencarian - disable select dan input date saat status selesai No Issues	2026-01-14 15:58:51 +08:00
amaliadwiy	a7a0ad7e37	Merge pull request 'amalia/13-jan-26' (#109 ) from amalia/13-jan-26 into main Reviewed-on: http://wibugit.wibudev.com/wibu/jenna-mcp/pulls/109	2026-01-13 17:18:01 +08:00
amaliadwiy	9fed41cbe8	fix: testing surat	2026-01-13 17:10:59 +08:00
amaliadwiy	fc387fe8e6	fix: menu setting deskiripsi: - navigate - list length No Issues	2026-01-13 15:38:29 +08:00
amaliadwiy	80df579499	qc: nomer 2 dan 4 Deskripsi: - button back - breadcrumb - active menu No Issues	2026-01-13 15:10:08 +08:00
amaliadwiy	5bbbc15c27	Merge pull request 'fix: qc' (#108 ) from amalia/12-jan-26 into main Reviewed-on: http://wibugit.wibudev.com/wibu/jenna-mcp/pulls/108	2026-01-12 17:47:04 +08:00
amaliadwiy	82765f6ef0	fix: qc Deskripsi: - breadcumbs - back - active menu nb: blm selesai No Issues	2026-01-12 17:43:04 +08:00
amaliadwiy	e8b5720118	Merge pull request 'amalia/09-jan-26' (#107 ) from amalia/09-jan-26 into main Reviewed-on: http://wibugit.wibudev.com/wibu/jenna-mcp/pulls/107	2026-01-09 17:23:26 +08:00