hipmi-mobile/app/(application)/admin/investment/[id]/[status]/index.tsx

/* eslint-disable react-hooks/exhaustive-deps */
import {
  ActionIcon,
  AlertDefaultSystem,
  BadgeCustom,
  BaseBox,
  ButtonCustom,
  DrawerCustom,
  DummyLandscapeImage,
  MenuDrawerDynamicGrid,
  ProgressCustom,
  Spacing,
  StackCustom,
  TextCustom,
  ViewWrapper,
} from "@/components";
import { IconProspectus } from "@/components/_Icon";
import { IconDot, IconList } from "@/components/_Icon/IconComponent";
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
import ReportBox from "@/components/Box/ReportBox";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
import {
  apiAdminInvestasiUpdateByStatus,
  apiAdminInvestmentDetailById,
} from "@/service/api-admin/api-admin-investment";
import { colorBadgeStatus } from "@/utils/colorBadge";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import React from "react";
import Toast from "react-native-toast-message";

export default function AdminInvestmentDetail() {
  const { id, status } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = React.useState(false);

  const [data, setData] = React.useState<any | null>(null);
  const [isLoading, setLoading] = React.useState(false);

  useFocusEffect(
    React.useCallback(() => {
      onLoadData();
    }, [id])
  );

  const onLoadData = async () => {
    try {
      const response = await apiAdminInvestmentDetailById({ id: id as string });
      // console.log("[GETONE INVEST]", JSON.stringify(response, null, 2));
      if (response.success) {
        setData(response.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  const listData = [
    {
      label: "Username",
      value: (data && data?.author?.username) || "-",
    },
    {
      label: "Judul",
      value: (data && data?.title) || "-",
    },
    {
      label: "Status",
      value:
        data && data?.MasterStatusInvestasi?.name ? (
          <BadgeCustom
            color={colorBadgeStatus({
              status: data?.MasterStatusInvestasi?.name as string,
            })}
          >
            {_.startCase(data?.MasterStatusInvestasi?.name as string)}
          </BadgeCustom>
        ) : (
          "-"
        ),
    },
    {
      label: "Dana Dibutuhkan",
      value: `Rp. ${
        (data && data?.targetDana && formatCurrencyDisplay(data?.targetDana)) ||
        "-"
      }`,
    },
    {
      label: "Harga Perlembar",
      value: `Rp. ${
        (data &&
          data?.hargaLembar &&
          formatCurrencyDisplay(data?.hargaLembar)) ||
        "-"
      }`,
    },
    {
      label: "Total Lembar",
      value:
        (data &&
          data?.totalLembar &&
          formatCurrencyDisplay(data?.totalLembar)) ||
        "-",
    },
    {
      label: "ROI",
      value: `${(data && data?.roi && data?.roi) || 0} %`,
    },
    {
      label: "Pembagian Deviden",
      value: (data && data?.MasterPembagianDeviden?.name) + " bulan" || "-",
    },
    {
      label: "Jadwal Pembagian",
      value: (data && data?.MasterPeriodeDeviden?.name) || "-",
    },
    {
      label: "Pencarian Investor",
      value: (data && data?.MasterPencarianInvestor?.name) + " hari" || "-",
    },
  ];

  const handlerSubmitPublish = async () => {
    try {
      setLoading(true);
      const response = await apiAdminInvestasiUpdateByStatus({
        id: id as string,
        status: "publish",
        data: data,
      });

      // console.log("[GET ON INVEST]", JSON.stringify(response, null, 2));
      if (!response.success) {
        Toast.show({
          type: "error",
          text1: "Gagal mempublikasikan data",
        });
        return;
      }

      Toast.show({
        type: "success",
        text1: "Berhasil mempublikasikan data",
      });
      router.replace(`/admin/investment/publish/status`);
    } catch (error) {
      console.log("[ERROR]", error);
    } finally {
      setLoading(false);
    }
  };

  const rightComponent = (
    <ActionIcon
      icon={<IconDot size={ICON_SIZE_BUTTON} />}
      onPress={() => {
        setOpenDrawer(true);
      }}
    />
  );

  return (
    <>
      <ViewWrapper
        headerComponent={
          <AdminBackButtonAntTitle
            title={`Detail Data`}
            rightComponent={status === "publish" && rightComponent}
          />
        }
      >
        {status === "publish" && (
          <BaseBox>
            <ProgressCustom
              label={data && `${data.progress}%` || "0%"}
              value={data && data.progress || 0}
              size="lg"
            />
            <Spacing />
            <StackCustom gap={"xs"}>
              <GridDetail_4_8
                label={<TextCustom bold>Sisa Saham</TextCustom>}
                value={
                  <TextCustom>
                    {data && formatCurrencyDisplay(data && data?.sisaLembar)} lembar
                  </TextCustom>
                }
              />
              <GridDetail_4_8
                label={<TextCustom bold>Validasi Transaksi</TextCustom>}
                value={
                  <TextCustom>
                    {data && data?.Investasi_Invoice.length} Proses
                  </TextCustom>
                }
              />
            </StackCustom>
          </BaseBox>
        )}

        <BaseBox>
          <StackCustom>
            <DummyLandscapeImage imageId={data?.imageId} />
            {listData.map((item, i) => (
              <GridDetail_4_8
                key={i}
                label={<TextCustom bold>{item.label}</TextCustom>}
                value={<TextCustom>{item.value}</TextCustom>}
              />
            ))}
          </StackCustom>
        </BaseBox>

        <BaseBox>
          <StackCustom>
            <GridDetail_4_8
              label={<TextCustom bold>File Prospektus</TextCustom>}
              value={
                <ButtonCustom
                  iconLeft={
                    <IconProspectus
                      size={ICON_SIZE_BUTTON}
                      color={MainColor.darkblue}
                    />
                  }
                  onPress={() => {
                    router.push(
                      `/(application)/(file)/${data?.prospektusFileId}`
                    );
                  }}
                >
                  Preview
                </ButtonCustom>
              }
            />
            <GridDetail_4_8
              label={<TextCustom bold>File Dokumen</TextCustom>}
              value={
                <StackCustom>
                  {_.isEmpty(data?.DokumenInvestasi) ? (
                    <TextCustom align="center">-</TextCustom>
                  ) : (
                    data?.DokumenInvestasi?.map((item: any, index: number) => {
                      const titleFix = item?.title?.substring(0, 10) || "";

                      return (
                        <ButtonCustom
                          key={item.id || index} // ✅ pastikan key unik
                          iconLeft={
                            <IconProspectus
                              size={ICON_SIZE_BUTTON}
                              color={MainColor.darkblue}
                            />
                          }
                          onPress={() => {
                            router.push(
                              `/(application)/(file)/${item?.fileId}`
                            );
                          }}
                        >
                          <TextCustom color="black" truncate>
                            {titleFix}...
                          </TextCustom>
                        </ButtonCustom>
                      );
                    })
                  )}
                </StackCustom>
              }
            />
          </StackCustom>
        </BaseBox>

        {data &&
          data?.catatan &&
          (status === "review" || status === "reject") && (
            <ReportBox text={data?.catatan} />
          )}

        {status === "review" && (
          <AdminButtonReview
            isLoading={isLoading}
            onPublish={() => {
              AlertDefaultSystem({
                title: "Publish",
                message: "Apakah anda yakin ingin mempublikasikan data ini?",
                textLeft: "Batal",
                textRight: "Ya",
                onPressRight: () => {
                  handlerSubmitPublish();
                },
              });
            }}
            onReject={() => {
              router.push(
                `/admin/investment/${id}/reject-input?status=${_.lowerCase(
                  data?.MasterStatusInvestasi?.name
                )}`
              );
            }}
          />
        )}

        {status === "reject" && (
          <AdminButtonReject
            title="Tambah Catatan"
            onReject={() => {
              router.push(`/admin/investment/${id}/reject-input`);
            }}
          />
        )}
      </ViewWrapper>

      <DrawerCustom
        isVisible={openDrawer}
        closeDrawer={() => setOpenDrawer(false)}
        height={"auto"}
      >
        <MenuDrawerDynamicGrid
          data={[
            {
              label: "Daftar Investor",
              icon: <IconList />,
              path: `/admin/investment/${id}/list-of-investor`,
            },
            // {
            //   label: "Daftar Pencarian Dana",
            //   icon: <IconList />,
            //   path: `/admin/donation/${id}/list-disbursement-of-funds`,
            // },
          ]}
          onPressItem={(item) => {
            setOpenDrawer(false);
            router.push(item.path as any);
          }}
        />
      </DrawerCustom>
    </>
  );
}