fix: pelayanan surat

Deskripsi:
- pelayanan surat

No Issues

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

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>

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>

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}>

src/pages/Login.tsx

@@ -1,12 +1,12 @@
 import clientRoutes from "@/clientRoutes";
 import {
   Button,
-  Container,
-  Group,
+  Center,
+  Paper,
   PasswordInput,
   Stack,
   Text,
-  TextInput,
+  TextInput
 } from "@mantine/core";
 import { useState } from "react";
 import apiFetch from "../lib/apiFetch";
@@ -73,25 +73,73 @@ export default function Login() {
   };
 
   return (
-    <Container>
-      <Stack>
-        <Text>Login</Text>
-        <TextInput
-          placeholder="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <PasswordInput
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <Group justify="right">
-          <Button onClick={handleSubmit} disabled={loading}>
+    <Center
+      h="100vh"
+      style={{
+        background:
+          "radial-gradient(circle at top, #1f2d2b 0%, #0b0f0e 60%)",
+      }}
+    >
+      <Paper
+        radius="lg"
+        p="xl"
+        w={420}
+        style={{
+          background: "rgba(20, 20, 20, 0.75)",
+          backdropFilter: "blur(12px)",
+          border: "1px solid rgba(255, 255, 255, 0.08)",
+          boxShadow: "0 20px 60px rgba(0,0,0,0.6)",
+        }}
+      >
+        <Stack>
+          <Text
+            size="xl"
+            fw={700}
+            ta="center"
+            c="white"
+          >
+            Welcome Back
+          </Text>
+
+          <Text
+            size="sm"
+            ta="center"
+            c="dimmed"
+          >
+            Sign in to continue to your dashboard
+          </Text>
+
+          <TextInput
+            label="Email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+
+          <PasswordInput
+            label="Password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+
+          <Button
+            fullWidth
+            mt="md"
+            radius="md"
+            size="md"
+            variant="gradient"
+            gradient={{ from: "teal", to: "cyan", deg: 45 }}
+            style={{
+              transition: "all 0.2s ease",
+            }}
+            onClick={handleSubmit}
+            disabled={loading}
+          >
             Login
           </Button>
-        </Group>
-      </Stack>
-    </Container>
+        </Stack>
+      </Paper>
+    </Center>
   );
 }

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)
                       }
                     />
                   ) : (

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",

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}

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
@@ -93,6 +102,7 @@ function DetailDataPengaduan({
   const [keterangan, setKeterangan] = useState("");
   const [host, setHost] = useState<User | null>(null);
   const [permissions, setPermissions] = useState<JsonValue[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     async function fetchHost() {
@@ -111,6 +121,7 @@ function DetailDataPengaduan({
 
   const handleKonfirmasi = async (cat: "terima" | "tolak") => {
     try {
+      setIsLoading(true);
       const res = await apiFetch.api.pengaduan["update-status"].post({
         id: data?.id,
         status:
@@ -184,6 +195,8 @@ function DetailDataPengaduan({
         message: "Failed to update pengaduan",
         type: "error",
       });
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -218,6 +231,7 @@ function DetailDataPengaduan({
                   color="red"
                   disabled={keterangan.length < 1}
                   onClick={() => handleKonfirmasi("tolak")}
+                  loading={isLoading}
                 >
                   Tolak
                 </Button>
@@ -242,6 +256,7 @@ function DetailDataPengaduan({
                   variant="filled"
                   color="green"
                   onClick={() => handleKonfirmasi("terima")}
+                  loading={isLoading}
                 >
                   Ya
                 </Button>

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={

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

@@ -1,62 +1,75 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
+import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
 import {
   Avatar,
   Box,
   Button,
   Card,
+  CloseButton,
   Container,
   Divider,
   Flex,
   Grid,
   Group,
+  Input,
   LoadingOverlay,
+  Pagination,
   Stack,
   Table,
   Text,
   Title,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconPhone } from "@tabler/icons-react";
+import { IconPhone, IconSearch } from "@tabler/icons-react";
 import _ from "lodash";
+import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import useSwr from "swr";
 
 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");
-  const { data, mutate, isLoading } = useSwr("/", () =>
-    apiFetch.api.warga.detail.get({
-      query: {
-        id: id!,
-      },
-    }),
-  );
+  // const { data, mutate, isLoading } = useSwr("/", () =>
+  //   apiFetch.api.warga.detail.get({
+  //     query: {
+  //       id: id!,
+  //     },
+  //   }),
+  // );
 
-  useShallowEffect(() => {
-    mutate();
-  }, []);
+  // useShallowEffect(() => {
+  //   mutate();
+  // }, []);
 
   return (
     <>
       <LoadingOverlay
-        visible={isLoading}
+        // visible={isLoading}
         zIndex={1000}
         overlayProps={{ radius: "sm", blur: 2 }}
       />
       <Container size="xl" py="xl" w={"100%"}>
         <Grid>
+          <Grid.Col span={12}>
+            <BreadCrumbs dataLink={dataMenu} back />
+          </Grid.Col>
           <Grid.Col span={4}>
-            <DetailWarga data={data?.data?.warga} />
+            <DetailWarga id={id!} />
           </Grid.Col>
           <Grid.Col span={8}>
             <Stack gap={"xl"}>
               <DetailDataHistori
-                data={data?.data?.pengaduan}
+                id={id!}
                 kategori="pengaduan"
               />
               <DetailDataHistori
-                data={data?.data?.pelayanan}
+                id={id!}
                 kategori="pelayanan"
               />
             </Stack>
@@ -68,13 +81,66 @@ export default function DetailWargaPage() {
 }
 
 function DetailDataHistori({
-  data,
+  id,
   kategori,
 }: {
-  data: any;
+  id: string;
   kategori: "pengaduan" | "pelayanan";
 }) {
   const navigate = useNavigate();
+  const [data, setData] = useState<any>([]);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalRows, setTotalRows] = useState(0);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+
+  async function getData() {
+    try {
+      const res = await apiFetch.api.warga.detail.get({
+        query: {
+          id,
+          category: kategori,
+          page: String(page),
+          search
+        }
+      }) as { data: { success: boolean; data: any[]; totalPages: number, totalRows: number } };
+
+      if (res?.data?.success) {
+        setData(res.data.data)
+        setTotalPages(res?.data?.totalPages)
+        setTotalRows(res?.data?.totalRows)
+      } else {
+        setData([])
+        setTotalPages(1)
+        setTotalRows(0)
+        notification({
+          title: "Failed",
+          message: "Failed to get data",
+          type: "error",
+        });
+      }
+
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Failed",
+        message: "Failed to get data",
+        type: "error",
+      });
+    }
+  }
+
+  useShallowEffect(() => {
+    getData()
+  }, [page])
+
+
+  useShallowEffect(() => {
+    setPage(1)
+    if (page == 1) {
+      getData()
+    }
+  }, [search]);
 
   return (
     <Card
@@ -93,6 +159,36 @@ function DetailDataHistori({
           <Title order={4} c="gray.2">
             Histori {_.upperFirst(kategori)}
           </Title>
+          <Flex
+            gap="md"
+            justify="flex-start"
+            align="center"
+            direction="row"
+          >
+            <Input
+              value={search}
+              placeholder="Cari data..."
+              onChange={(event) => setSearch(event.currentTarget.value)}
+              leftSection={<IconSearch size={16} />}
+              rightSectionPointerEvents="all"
+              rightSection={
+                <CloseButton
+                  aria-label="Clear input"
+                  onClick={() => setSearch("")}
+                  style={{ display: search ? undefined : "none" }}
+                />
+              }
+            />
+            <Text size="sm" c="gray.5" >
+              {`${5 * (page - 1) + 1} – ${Math.min(totalRows, 5 * page)} of ${totalRows}`}
+            </Text>
+            <Pagination
+              total={totalPages}
+              value={page}
+              onChange={setPage}
+              withPages={false}
+            />
+          </Flex>
         </Flex>
         <Divider my={0} />
         <Table>
@@ -110,7 +206,7 @@ function DetailDataHistori({
             {data?.length > 0 ? (
               data?.map((item: any, index: number) => (
                 <Table.Tr key={index}>
-                  <Table.Td>{item.noPengaduan}</Table.Td>
+                  <Table.Td w={"180"}>{item.noPengaduan}</Table.Td>
                   <Table.Td>
                     {kategori == "pengaduan" ? item.title : item.category}
                   </Table.Td>
@@ -121,11 +217,11 @@ function DetailDataHistori({
                       onClick={() => {
                         kategori == "pengaduan"
                           ? navigate(
-                              `/scr/dashboard/pengaduan/detail?id=${item.id}`,
-                            )
+                            `/scr/dashboard/pengaduan/detail?id=${item.id}`,
+                          )
                           : navigate(
-                              `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${item.id}`,
-                            );
+                            `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${item.id}`,
+                          );
                       }}
                     >
                       Detail
@@ -147,7 +243,33 @@ function DetailDataHistori({
   );
 }
 
-function DetailWarga({ data }: { data: any }) {
+function DetailWarga({ id }: { id: string }) {
+  const [data, setData] = useState<any>(null);
+
+  async function getWarga() {
+    try {
+      const res = await apiFetch.api.warga.detail.get({
+        query: {
+          id: id,
+          category: "warga",
+          page: "1",
+          search: "",
+        },
+      });
+      setData(res.data);
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Failed",
+        message: "Failed to get data warga",
+        type: "error",
+      });
+    }
+  }
+
+  useShallowEffect(() => {
+    getWarga();
+  }, []);
   return (
     <Card
       radius="md"

src/server/routes/warga_route.ts

@@ -97,68 +97,137 @@ const WargaRoute = new Elysia({
       }
    })
    .get("/detail", async ({ query }) => {
-      const { id } = query
+      const { id, category, search, page } = query
+      const skip = !page ? 0 : (Number(page) - 1) * 5
+
       const dataWarga = await prisma.warga.findUnique({
          where: {
             id
          }
       })
 
-      const dataPengaduan = await prisma.pengaduan.findMany({
-         orderBy: {
-            createdAt: "desc"
-         },
-         where: {
+      if (!dataWarga)
+         return { success: false, message: "data warga tidak ditemukan", data: null, totalPages: 1, totalRows: 0 }
+
+      if (category == "warga") {
+         return dataWarga
+      } else if (category == "pengaduan") {
+         const where: any = {
             isActive: true,
-            idWarga: id
-         },
-         select: {
-            id: true,
-            status: true,
-            noPengaduan: true,
-            title: true
+            idWarga: id,
+            OR: [
+               {
+                  title: {
+                     contains: search ?? "",
+                     mode: "insensitive"
+                  },
+               },
+               {
+                  noPengaduan: {
+                     contains: search ?? "",
+                     mode: "insensitive"
+                  },
+               }
+            ]
          }
-      })
 
+         const totalData = await prisma.pengaduan.count({
+            where
+         });
+         const dataPengaduan = await prisma.pengaduan.findMany({
+            skip,
+            take: 5,
+            orderBy: {
+               createdAt: "desc"
+            },
+            where,
+            select: {
+               id: true,
+               status: true,
+               noPengaduan: true,
+               title: true
+            }
+         })
 
+         const dataReturn = {
+            success: true,
+            message: "data pengaduan berhasil diambil",
+            data: dataPengaduan,
+            totalRows: totalData,
+            totalPages: Math.ceil(totalData / 5)
+         }
 
-      const dataPelayanan = await prisma.pelayananAjuan.findMany({
-         orderBy: {
-            createdAt: "desc"
-         },
-         where: {
+         return dataReturn
+      } else if (category == "pelayanan") {
+         const where: any = {
             isActive: true,
-            idWarga: id
-         },
-         select: {
-            id: true,
-            noPengajuan: true,
-            status: true,
-            CategoryPelayanan: {
-               select: {
-                  name: true
+            idWarga: id,
+            OR: [
+               {
+                  CategoryPelayanan: {
+                     name: {
+                        contains: search ?? "",
+                        mode: "insensitive"
+                     },
+                  },
+               },
+               {
+                  noPengajuan: {
+                     contains: search ?? "",
+                     mode: "insensitive"
+                  },
+               },
+            ]
+         }
+
+         const totalData = await prisma.pelayananAjuan.count({
+            where
+         });
+
+         const dataPelayanan = await prisma.pelayananAjuan.findMany({
+            skip,
+            take: 5,
+            orderBy: {
+               createdAt: "desc"
+            },
+            where,
+            select: {
+               id: true,
+               noPengajuan: true,
+               status: true,
+               CategoryPelayanan: {
+                  select: {
+                     name: true
+                  }
                }
             }
+         })
+
+         const dataPelayanFix = dataPelayanan.map((v: any) => ({
+            ..._.omit(v, ["CategoryPelayanan"]),
+            id: v.id,
+            noPengaduan: v.noPengajuan,
+            status: v.status,
+            category: v.CategoryPelayanan.name
+         }))
+
+         const dataReturn = {
+            success: true,
+            message: "data pelayanan berhasil diambil",
+            data: dataPelayanFix,
+            totalRows: totalData,
+            totalPages: Math.ceil(totalData / 5)
          }
-      })
 
-      const dataPelayanFix = dataPelayanan.map((v: any) => ({
-         ..._.omit(v, ["CategoryPelayanan"]),
-         id: v.id,
-         noPengaduan: v.noPengajuan,
-         status: v.status,
-         category: v.CategoryPelayanan.name
-      }))
-
-      return {
-         warga: dataWarga,
-         pengaduan: dataPengaduan,
-         pelayanan: dataPelayanFix
+         return dataReturn
       }
 
    }, {
       query: t.Object({
-         id: t.String({ minLength: 1, error: "id harus diisi" })
+         id: t.String({ minLength: 1, error: "id harus diisi" }),
+         category: t.String({ minLength: 1, error: "kategori harus diisi" }),
+         page: t.String({ optional: true }),
+         search: t.String({ optional: true }),
       }),
       detail: {
          summary: "Detail Warga",