"use client";

import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_global";
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
import AdminGlobal_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
import {
  MODEL_DONASI,
  MODEL_DONASI_PENCAIRAN_DANA
} from "@/app_modules/donasi/model/interface";
import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
import { RouterAdminGlobal } from "@/lib";
import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
import { clientLogger } from "@/util/clientLogger";
import mqtt_client from "@/util/mqtt_client";
import {
  ActionIcon,
  Badge,
  Box,
  Button,
  Center,
  Grid,
  Group,
  Modal,
  Pagination,
  Paper,
  ScrollArea,
  Select,
  SimpleGrid,
  Spoiler,
  Stack,
  Table,
  Text,
  TextInput,
  Title,
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { IconReload } from "@tabler/icons-react";
import _, { toNumber } from "lodash";
import moment from "moment";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import SkeletonAdminDetailDonasiPublish from "../../component/skeleton_detail_donasi_publish";
import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
import { apiGetAdminAllDaftarDonatur, apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";

export default function AdminDonasi_DetailPublish({
  countDonatur,
  listPencairan,
}: {
  countDonatur: number;
  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
}) {
  const [pencairan, setPencairan] = useState(listPencairan);
  // const [isReload, setReload] = useState(false);

  return (
    <>
      {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
      <Stack>
        <>
          <AdminGlobal_ComponentBackButton
            path={RouterAdminDonasi.table_publish}
          />
          <TampilanDetailDonasi countDonatur={countDonatur} />
          <TampilanListDonatur
            
          />
          <TampilanListPencairan pencairan={pencairan} />
        </>
      </Stack>
    </>
  );
}

function TampilanDetailDonasi({
  countDonatur,
}: {
  countDonatur: number;
}) {
  const params = useParams<{ id: string }>();
  const [data, setData] = useState<MODEL_DONASI | null>(null);
  const [isReload, setReload] = useState(false);


  useShallowEffect(() => {

    loadInitialData();
  }, [isReload])
  const loadInitialData = async () => {
    try {
      const response = await apiGetAdminDonasiById({
        id: params.id,
      })

      if (response?.success && response?.data) {
        setTimeout(() => {
          setData(response.data)
        }, 3000);
      } else {
        console.log("Invalid data format recieved:", response);
        setData(null)
      }
    } catch (error) {
      clientLogger.error("Invalid data format recieved:", error);
      setData(null);
    }
  }
  const [opened, { open, close }] = useDisclosure(false);
  const router = useRouter();
  const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);


  return (
    <>
      {!data ? (<CustomSkeletonAdmin height={"40vh"}/>) : (
        <Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
          <Stack>
            <SimpleGrid
              cols={3}
              spacing="lg"
              breakpoints={[
                { maxWidth: "62rem", cols: 3, spacing: "md" },
                { maxWidth: "48rem", cols: 2, spacing: "sm" },
                { maxWidth: "36rem", cols: 1, spacing: "sm" },
              ]}
            >
              <Paper p={"xs"} bg={AdminColor.softBlue}>
                <Stack>
                  <Title c={AdminColor.white} align="center" order={4}>
                    Gambar Donasi
                  </Title>
                  <Admin_ComponentLoadImageLandscape fileId={data?.imageId} />
                </Stack>
              </Paper>

              <Paper p={"sm"} bg={AdminColor.softBlue}>
                <Stack spacing={5}>
                  <Title c={AdminColor.white} order={4}>Detail Donasi</Title>
                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={"xs"}>Judul</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Title order={5} c={AdminColor.white}>
                        {data?.title}
                      </Title>
                    </Grid.Col>
                  </Grid>

                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={"xs"}>Penggalang Dana</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Title order={5} c={AdminColor.white}>
                        {data?.Author.username}
                      </Title>
                    </Grid.Col>
                  </Grid>

                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={"xs"}>Durasi</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Title c={AdminColor.white} order={5}>
                        {data?.DonasiMaster_Durasi.name} hari
                      </Title>
                    </Grid.Col>
                  </Grid>

                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={"xs"}>Dana dibutuhkan</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <ComponentGlobal_TampilanRupiah
                        nominal={+data?.target}
                        color={AdminColor.yellow}
                      />
                    </Grid.Col>
                  </Grid>

                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={"xs"}>Kategori</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Title c={AdminColor.white} order={5}>
                        {data?.DonasiMaster_Ketegori?.name}
                      </Title>
                    </Grid.Col>
                  </Grid>

                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={"xs"}>Total donatur</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Title order={5} c={AdminColor.white}>
                        {countDonatur}
                      </Title>
                    </Grid.Col>
                  </Grid>

                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={12}>Progres</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Title order={5} c={AdminColor.white}>
                        {toNumber(data.progres).toFixed(2)} %
                      </Title>
                    </Grid.Col>
                  </Grid>

                  <Grid>
                    <Grid.Col span={4}>
                      <Text c={AdminColor.white} fz={12}>Dana terkumpul</Text>
                    </Grid.Col>
                    <Grid.Col c={AdminColor.white} span={"content"}>:</Grid.Col>
                    <Grid.Col span={"auto"}>
                      <ComponentGlobal_TampilanRupiah
                        nominal={+data?.terkumpul}
                        color={AdminColor.yellow}
                      />
                    </Grid.Col>
                  </Grid>
                </Stack>
              </Paper>

              {/* Pencairan Dana */}
              <Paper bg={AdminColor.softBlue} p={"sm"}>
                <Stack spacing={"xl"}>
                  <Center>
                    <Title c={AdminColor.white} order={4}>Pencairan Dana</Title>
                  </Center>
                  <Grid>
                    <Grid.Col span={"auto"}>
                      <Stack spacing={0}>
                        <Text c={AdminColor.white} fz={"xs"}>Total Dana Dicairkan</Text>
                        <ComponentGlobal_TampilanRupiah
                          nominal={data?.totalPencairan}
                          color={AdminColor.yellow}
                        />
                      </Stack>
                    </Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Stack spacing={0}>
                        <Text c={AdminColor.white} fz={"xs"}>Bank Tujuan</Text>
                        <Title order={6} c={AdminColor.white}>
                          {data?.namaBank}
                        </Title>
                      </Stack>
                    </Grid.Col>
                  </Grid>
                  <Grid>
                    <Grid.Col span={"auto"}>
                      <Stack spacing={0}>
                        <Text c={AdminColor.white} fz={"xs"}>Akumulasi Pencairan</Text>
                        <Title order={6} c={AdminColor.white}>
                          {data?.akumulasiPencairan} Kali
                        </Title>
                      </Stack>
                    </Grid.Col>
                    <Grid.Col span={"auto"}>
                      <Stack spacing={0}>
                        <Text fz={"xs"} c={AdminColor.white}>Nomor Rekening</Text>
                        <Title order={6} c={AdminColor.white}>
                          {data?.rekening}
                        </Title>
                      </Stack>
                    </Grid.Col>
                  </Grid>

                  <Stack align="center" spacing={0}>
                    <Text c={AdminColor.white} fz={"xs"}>Sisa Dana</Text>
                    <ComponentGlobal_TampilanRupiah
                      nominal={
                        toNumber(data.terkumpul) -
                        toNumber(data.totalPencairan)
                      }
                      color={AdminColor.yellow}
                    />
                  </Stack>

                  <Button
                    loaderPosition="center"
                    loading={isLoadingPencairanDana}
                    radius={"xl"}
                    onClick={() => {
                      setIsLoadingPencairanDana(true);
                      router.push(
                        RouterAdminDonasi_OLD.pencairan_dana + `${data?.id}`
                      );
                    }}
                  >
                    Cairkan Dana
                  </Button>
                </Stack>
              </Paper>
            </SimpleGrid>
          </Stack>
        </Paper>
      )}
      <Modal opened={opened} onClose={close} centered>
        <PencairanDana />
      </Modal>
    </>
  );
}

function PencairanDana() {
  return (
    <>
      <Stack>
        <TextInput label="Masukan nominal" />
      </Stack>
    </>
  );
}

//######################## LIST DONATUR #####################//
function TampilanListDonatur() {
  const router = useRouter();
  const params = useParams<{ id: string }>();
  const donasiId = params.id;
  const [isLoadingCek, setLoadingCek] = useState(false);
  const [idData, setIdData] = useState("");
  const [lisDonatur, setListDonatur] = useState<any[] | null>(null);
  const [listStatus, setListStatus] = useState<MODEL_NEW_DEFAULT_MASTER[] | null>(null);
  const [isNPage, setNPage] = useState<number>(1);
  const [isActivePage, setActivePage] = useState(1);
 
  const [selectStatus, setSelectStatus] = useState("");


  useShallowEffect(() => {
    handleLoadData();
  }, [isActivePage, selectStatus]);

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

  const handleLoadData = async () => {
    try {
      const cek = globalStatusTransaksi.find((e) => e.id === selectStatus);
      const response = await apiGetAdminAllDaftarDonatur({
        id: donasiId,
        page: `${isActivePage}`,
        status: cek?.name,
      });

      if (response?.success && response?.data?.data) {
        setListDonatur(response.data.data);
        setNPage(response.data.nPage || 1);
      } else {
        console.error("Invalid data format received:", response);
        setListDonatur([]);
      }
    } catch (error) {
      clientLogger.error("Error get data daftar donatur", error);
      setListDonatur([]);
    }
  }

  const handleLoadStatus = async () => {
    try {
      const response = await apiGetMasterStatusTransaksi();


      if (response?.success && response?.data) {
        setListStatus(response.data);
      } else {
        console.error("Invalid data format received:", response);
        setListStatus(null);
      }
    } catch (error) {
      clientLogger.error("Error get status donatur", error);
      setListStatus(null);
    }
  }
  const onPageClick = async (page: number) => {
    setActivePage(page);
  }
  async function onSelect(selectStatus: any) {
    setSelectStatus(selectStatus);
  }
  async function onReload() {
    setSelectStatus("");
    handleLoadData();
  }



  const renderTableBody = () => {
    if (!Array.isArray(lisDonatur) || lisDonatur.length === 0) {
      return (
        <tr>
          <td colSpan={12}>
            <Center>
              <Text c={AccentColor.white}>Tidak ada data</Text>
            </Center>
          </td>
        </tr>
      );
    }
    return lisDonatur?.map((e, i) => (
      <tr key={i}>
        <td>
          <Center c={AccentColor.white}>{e?.Author.username}</Center>
        </td>
        <td>
          <Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
        </td>
        <td>
          <Center c={AccentColor.white}>
            <ComponentGlobal_TampilanRupiah nominal={+e?.nominal} />
          </Center>
        </td>
        <td>
          <Center c={AccentColor.white}>
            {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
              new Date(e?.createdAt)
            )}
          </Center>
        </td>
        <td>
          <Center >
            <Badge c={AccentColor.white} w={150} variant="dot">
              {e?.DonasiMaster_StatusInvoice?.name}
            </Badge>
          </Center>
        </td>
        <td>
          <Center>
            {e?.donasiMaster_StatusInvoiceId === "1" ||
              e?.donasiMaster_StatusInvoiceId === "2" ? (
              <Button
                loaderPosition="center"
                loading={isLoadingCek && idData === e?.id}
                radius={"xl"}
                onClick={() => {
                  setLoadingCek(true), setIdData(e?.id);
                  router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
                }}
              >
                Cek
              </Button>
            ) : (
              "-"
            )}
          </Center>
        </td>
        <td>
          <Center>
            {e?.donasiMaster_StatusInvoiceId === "1" ? (
              <Button radius={"xl"} disabled>
                Selesai
              </Button>
            ) : e?.DonasiMaster_StatusInvoice?.id === "2" ? (
              <ButtonAccept
                invoiceId={e?.id}
                donasiId={donasiId}
                nominal={+e?.nominal}
                danaTerkumpul={+e?.terkumpul}
                target={+e?.target}
                onSetDonasi={() => {
                  onReload();
                }}
                onSuccessDonatur={(val) => {
                  setListDonatur(val.data);
                  setNPage(val.nPage);
                }}
              />
            ) : (
              <Text>-</Text>
            )}
          </Center>
        </td>
      </tr>
    ));
  }

  if (!lisDonatur && !listStatus) return <CustomSkeletonAdmin height={"80vh"} />

  return (
    <>
      <Stack spacing={"xs"} h={"100%"}>
        {/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
        <ComponentAdminGlobal_TitlePage
          name="Daftar Donatur"
          color={AdminColor.softBlue}
          component={
            <Group>
              <ActionIcon
                size={"lg"}
                radius={"xl"}
                variant="light"
                onClick={() => {
                  onReload();
                }}
              >
                <IconReload />
              </ActionIcon>
              <Select
                placeholder="Pilih status"
                value={selectStatus}
                data={listStatus?.map((e, i) => ({
                  value: e.id,
                  label: e.name,
                })) || []}
                onChange={(val: any) => {
                  onSelect(val);
                }}
              />
            </Group>
          }
        />

        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
          <ScrollArea w={"100%"} h={"90%"}>
            <Table
              verticalSpacing={"xl"}
              horizontalSpacing={"md"}
              p={"md"}
              w={1500}
            >
              <thead>
                <tr>
                  <th>
                    <Center c={AccentColor.white}>Nama Donatur</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Nama Bank</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Jumlah Donasi</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Tanggal</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Status</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Bukti Transfer</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Aksi</Center>
                  </th>
                </tr>
              </thead>
              <tbody>{renderTableBody()}</tbody>
            </Table>
          </ScrollArea>

          <Center mt={"xl"}>
            <Pagination
              value={isActivePage}
              total={isNPage}
              onChange={(val) => {
                onPageClick(val);
              }}
            />
          </Center>
        </Paper>
      </Stack>
    </>
  );
}

function ButtonAccept({
  invoiceId,
  donasiId,
  nominal,
  danaTerkumpul,
  target,
  onSetDonasi: onSuccessDonasi,
  onSuccessDonatur,
}: {
  invoiceId: string;
  donasiId: string;
  nominal: number;
  danaTerkumpul: number;
  target: number;
  onSetDonasi: (val: boolean) => void;
  onSuccessDonatur: (val: any) => void;
}) {
  const [opened, { open, close }] = useDisclosure(false);
  const [isLoading, setIsLoading] = useState(false);

  async function onAccept() {
    let nominalDonasi = nominal;
    let jumlahTerkumpul = danaTerkumpul;

    const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
      invoiceId: invoiceId,
      donasiId: donasiId,
      jumlahTerkumpul: jumlahTerkumpul,
      nominal: nominalDonasi,
      statusInvoiceId: "1",
      target: target,
    });
    if (updateStatus.status == 200) {
      setIsLoading(true);
      const dataNotif = {
        appId: updateStatus.data?.id,
        userId: updateStatus.data?.authorId,
        pesan: updateStatus.data?.Donasi?.title,
        status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
        kategoriApp: "DONASI",
        title: "Terimakasih, Donasi anda telah diterima",
      };

      const notif = await adminNotifikasi_funCreateToUser({
        data: dataNotif as any,
      });

      if (notif.status === 201) {
        mqtt_client.publish(
          "USER",
          JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
        );

        mqtt_client.publish(
          "donasi_invoice",
          JSON.stringify({
            invoiceId: invoiceId,
            statusInvoiceId: "1",
          })
        );
      }

      const dataNotifToAuthorDonasi = {
        appId: updateStatus.data?.Donasi?.id,
        userId: updateStatus.data?.Donasi?.authorId,
        pesan: updateStatus.data?.Donasi?.title,
        status: "Donatur Baru",
        kategoriApp: "DONASI",
        title: "Ada donatur baru",
      };

      const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
        data: dataNotifToAuthorDonasi as any,
      });

      if (notifToAuthorDonasi.status === 201) {
        mqtt_client.publish(
          "USER",
          JSON.stringify({
            userId: updateStatus?.data?.Donasi?.authorId,
            count: 1,
          })
        );
      }

      const updateData = await AdminDonasi_getOneById(donasiId);
      onSuccessDonasi(updateData as any);
      // const updatelistDonatur = await adminDonasi_getListDonatur({
      //   donasiId: donasiId,
      //   page: 1,
      // });
      onSuccessDonatur(true);

      ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
      setIsLoading(false);
    } else {
      ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
      setIsLoading(false);
    }
    close();
  }

  return (
    <>
      <Button
        color="green"
        radius={"xl"}
        onClick={() => {
          open();
        }}
      >
        Terima
      </Button>

      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
        <Paper>
          <Stack align="center">
            <Title
              align="center"
              order={6}
            >{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
            <Group position="center">
              <Button radius={"xl"} onClick={() => close()}>
                Batal
              </Button>
              <Button
                color="green"
                loading={isLoading}
                loaderPosition="center"
                radius={"xl"}
                onClick={() => {
                  onAccept();
                }}
              >
                Terima
              </Button>
            </Group>
          </Stack>
        </Paper>
      </Modal>
    </>
  );
}

//######################## LIST PENCAIRAN #####################//
function TampilanListPencairan({
  pencairan,
}: {
  pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
}) {
  const router = useRouter();
  const [data, setData] = useState(pencairan);
  const [opened, { open, close }] = useDisclosure(false);
  const [gambarId, setGambarId] = useState("");

  const rowTable = data.map((e) => (
    <tr key={e.id}>
      <td>
        <Center c={AdminColor.white}>
          <TampilanRupiahDonasi nominal={e.nominalCair} />
        </Center>
      </td>
      <td>
        <Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
      </td>
      <td>
        <Center c={AdminColor.white}>
          <Text>{e.title}</Text>
        </Center>
      </td>
      <td width={500}>
        <Box w={"100%"}>
          <Spoiler hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
            {e.deskripsi}
          </Spoiler>
        </Box>
      </td>
      <td>
        <Box>
          <Center>
            <Button
              radius={"xl"}
              bg={"green"}
              color="green"
              onClick={() => {
                // open();
                // setGambarId(e.imagesId);
                router.push(
                  RouterAdminDonasi.transfer_invoice_reimbursement + e?.imagesId
                );
              }}
            >
              Cek
            </Button>
          </Center>
        </Box>
      </td>
    </tr>
  ));

  return (
    <>

      <Stack spacing={"xs"} h={"100%"}>
        <ComponentAdminGlobal_TitlePage
          name="Rincian Pencairan Dana"
          color={AdminColor.softBlue}
          component={
            <Group>
              <ActionIcon
                size={"lg"}
                radius={"xl"}
                variant="light"
                onClick={() => {
                  // onRelaod();
                }}
              >
                <IconReload />
              </ActionIcon>
              {/* <Select
              placeholder="Pilih status"
              value={isSelect}
              data={listMasterStatus.map((e) => ({
                value: e.id,
                label: e.name,
              }))}
              onChange={(val) => {
                onSelect(val);
              }}
            /> */}
            </Group>
          }
        />

        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
          <ScrollArea w={"100%"} h={"90%"}>
            <Table
              verticalSpacing={"xl"}
              horizontalSpacing={"md"}
              p={"md"}
              w={1500}

            >
              <thead>
                <tr>
                  <th>
                    <Center c={AccentColor.white}>Nominal</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Tanggal</Center>
                  </th>
                  <th>
                    <Center c={AccentColor.white}>Judul</Center>
                  </th>
                  <th style={{ color: AccentColor.white }}>Deskripsi</th>
                  <th>
                    <Center c={AccentColor.white}>Bukti Transfer</Center>
                  </th>
                </tr>
              </thead>
              <tbody>{rowTable}</tbody>
            </Table>
          </ScrollArea>

          {/* <Center mt={"xl"}>
            <Pagination
              value={isActivePage}
              total={isNPage}
              onChange={(val) => {
                onPageClick(val);
              }}
            />
          </Center> */}
        </Paper>
      </Stack>


    </>
  );
}
