jenna-mcp/src/pages/scr/dashboard/pengaduan/list_page.tsx

import apiFetch from "@/lib/apiFetch";
import {
  Badge,
  Card,
  CloseButton,
  Container,
  Divider,
  Flex,
  Grid,
  Group,
  Input,
  Pagination,
  Stack,
  Tabs,
  Text,
  Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
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, subscribe } from "valtio";

const state = proxy({ reload: "" });
function reloadState() {
  state.reload = Math.random().toString();
}

export default function PengaduanListPage() {
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  const status = query.get("status") as StatusKey;

  return (
    <Container size="xl" py="xl" w={"100%"}>
      <Stack gap="xl">
        <TabListPengaduan status={status || "semua"} />
        <ListPengaduan status={status || "semua"} />
      </Stack>
    </Container>
  );
}

function TabListPengaduan({ status }: { status: string }) {
  const navigate = useNavigate();
  const { data, mutate, isLoading } = useSwr("/pengaduan/count", () =>
    apiFetch.api.pengaduan.count.get().then((res) => res.data),
  );

  useShallowEffect(() => {
    mutate();
  }, []);

  return (
    <Tabs defaultValue={status || "semua"} color="teal">
      <Tabs.List grow>
        <Tabs.Tab
          value="semua"
          onClick={() => {
            navigate("?status=semua");
          }}
        >
          Semua ({data?.semua || 0})
        </Tabs.Tab>
        <Tabs.Tab
          value="antrian"
          onClick={() => {
            navigate("?status=antrian");
          }}
        >
          Antrian ({data?.antrian || 0})
        </Tabs.Tab>
        <Tabs.Tab
          value="diterima"
          onClick={() => {
            navigate("?status=diterima");
          }}
        >
          Diterima ({data?.diterima || 0})
        </Tabs.Tab>
        <Tabs.Tab
          value="dikerjakan"
          onClick={() => {
            navigate("?status=dikerjakan");
          }}
        >
          Dikerjakan ({data?.dikerjakan || 0})
        </Tabs.Tab>
        <Tabs.Tab
          value="selesai"
          onClick={() => {
            navigate("?status=selesai");
          }}
        >
          Selesai ({data?.selesai || 0})
        </Tabs.Tab>
        <Tabs.Tab
          value="ditolak"
          onClick={() => {
            navigate("?status=ditolak");
          }}
        >
          Ditolak ({data?.ditolak || 0})
        </Tabs.Tab>
      </Tabs.List>
    </Tabs>
  );
}

type StatusKey =
  | "antrian"
  | "diterima"
  | "dikerjakan"
  | "ditolak"
  | "selesai"
  | "semua";

function ListPengaduan({ status }: { status: StatusKey }) {
  const navigate = useNavigate();
  const [page, setPage] = useState(1);
  const [value, setValue] = useState("");
  const { data, mutate, isLoading } = useSwr("/", async () =>
    apiFetch.api.pengaduan.list.get({
      query: {
        status,
        search: value,
        take: "",
        page: page.toString(),
      },
    }),
  );

  useShallowEffect(() => {
    setPage(1);
    mutate();
  }, [status, value]);

  useShallowEffect(() => {
    mutate();
  }, [page]);

  useShallowEffect(() => {
    const unsubscribe = subscribe(state, () => mutate());
    return () => unsubscribe();
  }, []);

  if (isLoading)
    return (
      <Card
        radius="lg"
        p="xl"
        withBorder
        style={{
          background:
            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
        }}
      >
        <Text size="sm" c="dimmed">
          Loading pengaduan...
        </Text>
      </Card>
    );

  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 toDate = (d: any) => new Date(d);

  return (
    <Stack gap="xl">
      <Grid>
        <Grid.Col span={9}>
          <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" }}
              />
            }
          />
        </Grid.Col>
        <Grid.Col span={3}>
          <Group justify="flex-end">
            <Text
              size="sm"
              c="gray.5"
            >{`${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">
            <IconFileSad size={32} color="gray" />
            <Text c="dimmed" size="sm">
              No pengaduan have been added yet.
            </Text>
          </Stack>
        </Flex>
      ) : (
        Array.isArray(list) &&
        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)",
            }}
            onClick={() =>
              navigate(`/scr/dashboard/pengaduan/detail?id=${v.id}`)
            }
          >
            <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>
                    <Text size="sm" c="dimmed">
                      {String(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"
                            ? "gray"
                            : "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>
                  </Group>
                  <Text size="md">
                    {toDate(v.createdAt).toLocaleDateString("id-ID", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })}
                  </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}</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}</Text>
                </Flex>
              </Stack>
            </Stack>
          </Card>
        ))
      )}
    </Stack>
  );
}