diff --git a/src/pages/scr/dashboard/warga/list_warga_page.tsx b/src/pages/scr/dashboard/warga/list_warga_page.tsx
index a19d578..eb0772a 100644
--- a/src/pages/scr/dashboard/warga/list_warga_page.tsx
+++ b/src/pages/scr/dashboard/warga/list_warga_page.tsx
@@ -6,9 +6,12 @@ import {
   Container,
   Divider,
   Flex,
+  Group,
   Input,
+  Pagination,
   Stack,
   Table,
+  Text,
   Title,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -19,21 +22,27 @@ import useSWR from "swr";
 
 export default function ListWargaPage() {
   const navigate = useNavigate();
-  const { data, mutate, isLoading } = useSWR("/", () =>
+  const [pages, setPages] = useState(1);
+  const [value, setValue] = useState("");
+  const { data, mutate } = useSWR("/", () =>
     apiFetch.api.warga.list.get({
       query: {
         search: value,
+        page: pages,
       },
     }),
   );
 
-  const list = data?.data || [];
+  const list = data?.data?.data || [];
+  const total = data?.data?.total || 0;
+  const totalPage = data?.data?.totalPages || 1;
+  const pageSize = data?.data?.pageSize || 10;
+  const pageNow = data?.data?.page || 1;
 
-  const [value, setValue] = useState("");
 
   useShallowEffect(() => {
     mutate();
-  }, [value]);
+  }, [value, pages]);
 
 
   return (
@@ -52,6 +61,10 @@ export default function ListWargaPage() {
             <Title order={3} c="gray.2">
               List Data Warga
             </Title>
+            <Group justify="flex-end">
+              <Text size="sm">{`Showing ${pageSize * (pages - 1) + 1} – ${Math.min(total, pageSize * pages)} of ${total}`}</Text>
+              <Pagination total={totalPage} value={pages} onChange={setPages} withPages={false} />
+            </Group>
             <Input
               value={value}
               placeholder="Cari warga..."
diff --git a/src/server/routes/pengaduan_route.ts b/src/server/routes/pengaduan_route.ts
index f9ea248..3675bb2 100644
--- a/src/server/routes/pengaduan_route.ts
+++ b/src/server/routes/pengaduan_route.ts
@@ -510,6 +510,44 @@ const PengaduanRoute = new Elysia({
          file: t.Any(),
          folder: t.String(),
       }),
+      detail: {
+         summary: "Upload File (FormData)",
+         description: "Tool untuk upload file ke folder tujuan dengan memakai FormData",
+         // tags: ["mcp"],
+         consumes: ["multipart/form-data"]
+      },
+   })
+   .post("/upload-file-form-data", async ({ body }) => {
+      const { file } = body;
+
+      // Validasi file
+      if (!file) {
+         return { success: false, message: "File tidak ditemukan" };
+      }
+
+      // Rename file
+      const renamedFile = renameFile({ oldFile: file, newName: 'random' });
+
+
+      // Upload ke Seafile (pastikan uploadFile menerima Blob atau ArrayBuffer)
+      // const buffer = await file.arrayBuffer();
+      const result = await uploadFile(defaultConfigSF, renamedFile, 'pengaduan');
+      if (result == 'gagal') {
+         return { success: false, message: "Upload gagal" };
+      }
+
+      return {
+         success: true,
+         message: "Upload berhasil",
+         filename: renamedFile.name,
+         size: renamedFile.size,
+         seafileResult: result
+      };
+   }, {
+      body: t.Object({
+         file: t.Any(),
+         // folder: t.String(),
+      }),
       detail: {
          summary: "Upload File (FormData)",
          description: "Tool untuk upload file ke folder tujuan dengan memakai FormData",
@@ -551,7 +589,7 @@ const PengaduanRoute = new Elysia({
       detail: {
          summary: "Upload File (Base64)",
          description: "Tool untuk upload file ke Seafile dalam format Base64",
-         tags: ["mcp"],
+         // tags: ["mcp"],
          consumes: ["multipart/form-data"]
       },
    })
diff --git a/src/server/routes/warga_route.ts b/src/server/routes/warga_route.ts
index 507b143..b711a20 100644
--- a/src/server/routes/warga_route.ts
+++ b/src/server/routes/warga_route.ts
@@ -9,9 +9,31 @@ const WargaRoute = new Elysia({
 })
 
    .get("/list", async ({ query }) => {
-      const { search } = query
+      const { search, page = 1 } = query
+      const dataSkip = page == null || page == undefined ? 0 : Number(page) * 10 - 10;
+
+      const totalData = await prisma.warga.count({
+         where: {
+            OR: [
+               {
+                  name: {
+                     contains: search,
+                     mode: "insensitive"
+                  }
+               },
+               {
+                  phone: {
+                     contains: search,
+                     mode: "insensitive"
+                  }
+               }
+            ]
+         }
+      });
 
       const data = await prisma.warga.findMany({
+         skip: dataSkip,
+         take: 10,
          where: {
             OR: [
                {
@@ -33,7 +55,15 @@ const WargaRoute = new Elysia({
          }
       })
 
-      return data
+      const dataFix = {
+         data,
+         total: totalData,
+         page: Number(page) || 1,
+         pageSize: 10,
+         totalPages: Math.ceil(totalData / 10)
+      };
+
+      return dataFix
    }, {
       detail: {
          summary: "List Warga",