upd: list pengaduan

Deskripsi:
- pencarian data list pengaduan

No Issues

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

@@ -2,17 +2,26 @@ import apiFetch from "@/lib/apiFetch";
 import {
   Badge,
   Card,
+  CloseButton,
   Container,
   Divider,
   Flex,
   Group,
+  Input,
   Stack,
   Tabs,
   Text,
   Title
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconAlignJustified, IconClockHour3, IconFileSad, IconMapPin } from "@tabler/icons-react";
+import {
+  IconAlignJustified,
+  IconClockHour3,
+  IconFileSad,
+  IconMapPin,
+  IconSearch,
+} from "@tabler/icons-react";
+import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import useSwr from "swr";
 import { proxy } from "valtio";
@@ -25,17 +34,13 @@ function reloadState() {
 export default function PengaduanListPage() {
   const { search } = useLocation();
   const query = new URLSearchParams(search);
-  const status = query.get("status");
+  const status = query.get("status") as StatusKey;
 
   return (
-    <Container
-      size="xl"
-      py="xl"
-      w={"100%"}
-    >
+    <Container size="xl" py="xl" w={"100%"}>
       <Stack gap="xl">
-        <TabListPengaduan status={status || "all"} />
-        <ListPengaduan status={status || "all"} />
+        <TabListPengaduan status={status || "semua"} />
+        <ListPengaduan status={status || "semua"} />
       </Stack>
     </Container>
   );
@@ -44,39 +49,83 @@ export default function PengaduanListPage() {
 function TabListPengaduan({ status }: { status: string }) {
   const navigate = useNavigate();
   const dataCount = useSwr("/pengaduan/count", () =>
-    apiFetch.api.pengaduan.count.get().then((res) => res.data)
+    apiFetch.api.pengaduan.count.get().then((res) => res.data),
   );
 
   return (
-    <Tabs defaultValue={status || "all"} color="teal">
+    <Tabs defaultValue={status || "semua"} color="teal">
       <Tabs.List grow>
-        <Tabs.Tab value="all" onClick={() => { navigate("?status=all") }}>Semua ({dataCount?.data?.semua || 0})</Tabs.Tab>
-        <Tabs.Tab value="antrian" onClick={() => { navigate("?status=antrian") }}>Antrian ({dataCount?.data?.antrian || 0})</Tabs.Tab>
-        <Tabs.Tab value="diterima" onClick={() => { navigate("?status=diterima") }}>Diterima ({dataCount?.data?.diterima || 0})</Tabs.Tab>
-        <Tabs.Tab value="dikerjakan" onClick={() => { navigate("?status=dikerjakan") }}>Dikerjakan ({dataCount?.data?.dikerjakan || 0})</Tabs.Tab>
-        <Tabs.Tab value="selesai" onClick={() => { navigate("?status=selesai") }}>Selesai ({dataCount?.data?.selesai || 0})</Tabs.Tab>
-        <Tabs.Tab value="ditolak" onClick={() => { navigate("?status=ditolak") }}>Ditolak ({dataCount?.data?.ditolak || 0})</Tabs.Tab>
+        <Tabs.Tab
+          value="all"
+          onClick={() => {
+            navigate("?status=semua");
+          }}
+        >
+          Semua ({dataCount?.data?.semua || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="antrian"
+          onClick={() => {
+            navigate("?status=antrian");
+          }}
+        >
+          Antrian ({dataCount?.data?.antrian || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="diterima"
+          onClick={() => {
+            navigate("?status=diterima");
+          }}
+        >
+          Diterima ({dataCount?.data?.diterima || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="dikerjakan"
+          onClick={() => {
+            navigate("?status=dikerjakan");
+          }}
+        >
+          Dikerjakan ({dataCount?.data?.dikerjakan || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="selesai"
+          onClick={() => {
+            navigate("?status=selesai");
+          }}
+        >
+          Selesai ({dataCount?.data?.selesai || 0})
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="ditolak"
+          onClick={() => {
+            navigate("?status=ditolak");
+          }}
+        >
+          Ditolak ({dataCount?.data?.ditolak || 0})
+        </Tabs.Tab>
       </Tabs.List>
     </Tabs>
   );
 }
 
-function ListPengaduan({ status }: { status: string }) {
+type StatusKey = "antrian" | "diterima" | "dikerjakan" | "ditolak" | "selesai" | "semua";
+function ListPengaduan({ status }: { status: StatusKey }) {
+  const [page, setPage] = useState(1);
+  const [value, setValue] = useState("");
   const { data, mutate, isLoading } = useSwr("/", () =>
     apiFetch.api.pengaduan.list.get({
       query: {
         status,
-        search: "",
+        search: value,
         take: "",
-        page: ""
+        page: "",
       },
     }),
   );
 
   useShallowEffect(() => {
     mutate();
-  }, [status]);
-
+  }, [status, value]);
 
   if (isLoading)
     return (
@@ -99,94 +148,118 @@ function ListPengaduan({ status }: { status: string }) {
 
   return (
     <Stack gap="xl">
-      {
-        list.length === 0 ? (
-          <Flex justify="center" align="center" py={"xl"}>
-            <Stack gap={4} align="center">
-              <IconFileSad size={32} color="gray" />
-              <Text c="dimmed" size="sm">
-                No pengaduan have been added yet.
-              </Text>
-            </Stack>
-          </Flex>
-        ) :
-          list.map((v: any) => (
-            <Card
-              key={v.id}
-              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 20px rgba(0,255,200,0.08)",
-              }}
-            >
-              <Stack gap="md">
-                <Flex align="center" justify="space-between">
-                  <Flex direction={"column"}>
-                    <Title order={3} c="gray.2">
-                      {v.title}
+      <Group grow>
+        <Input
+          value={value}
+          placeholder="Cari pengaduan..."
+          onChange={(event) => setValue(event.currentTarget.value)}
+          leftSection={<IconSearch size={16} />}
+          rightSectionPointerEvents="all"
+          rightSection={
+            <CloseButton
+              aria-label="Clear input"
+              onClick={() => setValue('')}
+              style={{ display: value ? undefined : 'none' }}
+            />
+          }
+        />
+        {/* <Group justify="flex-end">
+          <Text size="sm">Menampilkan {Number(data?.data?.length) * (page - 1) + 1} – {Math.min(10, Number(data?.data?.length) * page)} dari {Number(data?.data?.length)}</Text>
+          <Pagination total={Number(data?.data?.length)} value={page} onChange={setPage} withPages={false} />
+        </Group> */}
+      </Group>
+      {list.length === 0 ? (
+        <Flex justify="center" align="center" py={"xl"}>
+          <Stack gap={4} align="center">
+            <IconFileSad size={32} color="gray" />
+            <Text c="dimmed" size="sm">
+              No pengaduan have been added yet.
+            </Text>
+          </Stack>
+        </Flex>
+      ) : (
+        list.map((v: any) => (
+          <Card
+            key={v.id}
+            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 20px rgba(0,255,200,0.08)",
+            }}
+          >
+            <Stack gap="md">
+              <Flex align="center" justify="space-between">
+                <Flex direction={"column"}>
+                  <Title order={3} c="gray.2">
+                    {v.title}
+                  </Title>
+                  <Group>
+                    <Title order={6} c="gray.5">
+                      #{v.noPengaduan}
                     </Title>
-                    <Group>
-                      <Title order={6} c="gray.5">
-                        #{v.noPengaduan}
-                      </Title>
-                      <Text size="sm" c="dimmed">
-                        {v.updatedAt}
-                      </Text>
-                    </Group>
-                  </Flex>
-                  <Badge
-                    size="xl"
-                    variant="light"
-                    radius="sm"
-                    color={v.status === "diterima" ? "green" : v.status === "ditolak" ? "red" : v.status === "selesai" ? "blue" : v.status === "dikerjakan" ? "purple" : "yellow"}
-                    style={{ textTransform: "none" }}
-                  >
-                    {v.status}
-                  </Badge>
+                    <Text size="sm" c="dimmed">
+                      {v.updatedAt}
+                    </Text>
+                  </Group>
                 </Flex>
-                <Divider my={0} />
-                <Stack gap="sm">
-                  <Flex direction={"column"} justify="flex-start">
-                    <Group gap="xs">
-                      <IconClockHour3 size={20} color="white" />
-                      <Text size="md" c="white">
-                        Tanggal Aduan
-                      </Text>
-                    </Group>
-                    <Text size="md">
-                      {v.createdAt}
+                <Badge
+                  size="xl"
+                  variant="light"
+                  radius="sm"
+                  color={
+                    v.status === "diterima"
+                      ? "green"
+                      : v.status === "ditolak"
+                        ? "red"
+                        : v.status === "selesai"
+                          ? "blue"
+                          : v.status === "dikerjakan"
+                            ? "purple"
+                            : "yellow"
+                  }
+                  style={{ textTransform: "none" }}
+                >
+                  {v.status}
+                </Badge>
+              </Flex>
+              <Divider my={0} />
+              <Stack gap="sm">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconClockHour3 size={20} color="white" />
+                    <Text size="md" c="white">
+                      Tanggal Aduan
                     </Text>
-                  </Flex>
-                  <Flex direction={"column"} justify="flex-start">
-                    <Group gap="xs">
-                      <IconMapPin size={20} color="white" />
-                      <Text size="md" c="white">
-                        Lokasi
-                      </Text>
-                    </Group>
-                    <Text size="md">
-                      {v.location}
+                  </Group>
+                  <Text size="md">{v.createdAt}</Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconMapPin size={20} color="white" />
+                    <Text size="md" c="white">
+                      Lokasi
                     </Text>
-                  </Flex>
-                  <Flex direction={"column"} justify="flex-start">
-                    <Group gap="xs">
-                      <IconAlignJustified size={20} color="white" />
-                      <Text size="md" c="white">
-                        Detail
-                      </Text>
-                    </Group>
-                    <Text size="md">
-                      {v.detail}
+                  </Group>
+                  <Text size="md">{v.location}</Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} color="white" />
+                    <Text size="md" c="white">
+                      Detail
                     </Text>
-                  </Flex>
-                </Stack>
+                  </Group>
+                  <Text size="md">{v.detail}</Text>
+                </Flex>
               </Stack>
-            </Card>
-          ))}
+            </Stack>
+          </Card>
+        ))
+      )}
     </Stack>
   );
 }