upd: dashboard admin

Deskripsi:
- pagination list pengajuan surat

NO Issues

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

@@ -6,8 +6,10 @@ import {
   Container,
   Divider,
   Flex,
+  Grid,
   Group,
   Input,
+  Pagination,
   Stack,
   Tabs,
   Text,
@@ -113,22 +115,26 @@ type StatusKey =
 function ListPelayananSurat({ status }: { status: StatusKey }) {
   const [page, setPage] = useState(1);
   const [value, setValue] = useState("");
-  const { data, mutate, isLoading } = useSwr("/", async () => {
+  const { data, mutate, isLoading } = useSwr("/", async () =>
-    const res = await apiFetch.api.pelayanan.list.get({
+    apiFetch.api.pelayanan.list.get({
       query: {
         status,
         search: value,
         take: "",
-        page: "",
+        page: page.toString(),
       },
-    });
+    })
+  );
+
+  useShallowEffect(() => {
+    setPage(1);
+    mutate();
+  }, [status, value]);
 
-    return Array.isArray(res?.data) ? res.data : []; // ⬅ paksa return array
-  });
 
   useShallowEffect(() => {
     mutate();
-  }, [status, value]);
+  }, [page]);
 
 
   useShallowEffect(() => {
@@ -155,26 +161,38 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
       </Card>
     );
 
-  const list = 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;
 
   return (
     <Stack gap="xl">
-      <Group grow>
+      <Grid>
-        <Input
+        <Grid.Col span={10}>
-          value={value}
+          <Input
-          placeholder="Cari pengajuan..."
+            value={value}
-          onChange={(event) => setValue(event.currentTarget.value)}
+            placeholder="Cari pengajuan..."
-          leftSection={<IconSearch size={16} />}
+            onChange={(event) => setValue(event.currentTarget.value)}
-          rightSectionPointerEvents="all"
+            leftSection={<IconSearch size={16} />}
-          rightSection={
+            rightSectionPointerEvents="all"
-            <CloseButton
+            rightSection={
-              aria-label="Clear input"
+              <CloseButton
-              onClick={() => setValue("")}
+                aria-label="Clear input"
-              style={{ display: value ? undefined : "none" }}
+                onClick={() => setValue("")}
-            />
+                style={{ display: value ? undefined : "none" }}
-          }
+              />
-        />
+            }
-      </Group>
+          />
+        </Grid.Col>
+        <Grid.Col span={2}>
+          <Group justify="space-between" grow>
+            <Text size="sm">{`${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>
       {Array.isArray(list) && list?.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
@@ -247,7 +265,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
                       Tanggal Ajuan
                     </Text>
                   </Group>
-                  <Text size="md">{v.createdAt}</Text>
+                  <Text size="md">{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/list_page.tsx

@@ -201,7 +201,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
           </Group>
         </Grid.Col>
       </Grid>
-      {list.length === 0 ? (
+      {Array.isArray(list) && list.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
             <IconFileSad size={32} color="gray" />

src/server/routes/pelayanan_surat_route.ts

@@ -581,6 +581,14 @@ const PelayananRoute = new Elysia({
                      mode: "insensitive"
                   },
                },
+            },
+            {
+               Warga: {
+                  name: {
+                     contains: search ?? "",
+                     mode: "insensitive"
+                  },
+               },
             }
          ]
       }
@@ -592,6 +600,11 @@ const PelayananRoute = new Elysia({
          }
       }
 
+
+      const totalData = await prisma.pelayananAjuan.count({
+         where
+      });
+
       const data = await prisma.pelayananAjuan.findMany({
          skip,
          take: !take ? 10 : Number(take),
@@ -625,12 +638,20 @@ const PelayananRoute = new Elysia({
             category: item.CategoryPelayanan.name,
             warga: item.Warga.name,
             status: item.status,
-            createdAt: item.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }),
+            createdAt: item.createdAt,
             updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt),
          }
       })
 
-      return dataFix
+      const dataReturn = {
+         data: dataFix,
+         total: totalData,
+         page: Number(page) || 1,
+         pageSize: !take ? 10 : Number(take),
+         totalPages: Math.ceil(totalData / (!take ? 10 : Number(take)))
+      }
+
+      return dataReturn
    }, {
       query: t.Object({
          take: t.String({ optional: true }),