fix: File view

Deksripsi:
- Tampilan file view pdf
- Optimalisasi admin
## No Isuue

src/app_modules/investasi/_component/comp_card_border_and_background.tsx

@@ -0,0 +1,40 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { Card } from "@mantine/core";
+import React from "react";
+
+export function Investasi_ComponentStylesCard({
+  children,
+  backgroundColor,
+  border,
+  marginBottom,
+  onClickHandler,
+}: {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  border?: string;
+  marginBottom?: string | number;
+  onClickHandler?: (val: any) => void;
+}) {
+  
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: backgroundColor
+            ? backgroundColor
+            : AccentColor.darkblue,
+          border: `2px solid ${border ? border : AccentColor.blue}`,
+          paddingInline: "20px",
+          paddingTop: "15px",
+          paddingBottom: "20px",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: marginBottom ? marginBottom : "0x",
+        }}
+        onClick={onClickHandler}
+      >
+        {children}
+      </Card>
+    </>
+  );
+}

src/app_modules/investasi/_component/detail/comp_box_daftar_berita.tsx

@@ -0,0 +1,48 @@
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color";
+import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
+import { IconFileDescription } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Investasi_ComponentBoxDaftarBerita({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Paper
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.softblue}`,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
+        <Flex direction={"column"} align={"center"} justify={"center"}>
+          <Text fz={12}>Berita</Text>
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            size={60}
+            onClick={() => {
+              setLoading(true);
+              router.push(RouterInvestasi_OLD.daftar_berita + investasiId);
+            }}
+          >
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <IconFileDescription size={70} color="white" />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/_component/detail/comp_box_daftar_dokumen.tsx

@@ -0,0 +1,48 @@
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color";
+import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
+import { IconFileDescription } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Investasi_ComponentBoxDaftarDokumen({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Paper
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.softblue}`,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
+        <Flex direction={"column"} align={"center"} justify={"center"}>
+          <Text fz={12}>Dokumen</Text>
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            size={60}
+            onClick={() => {
+              setLoading(true);
+              router.push(RouterInvestasi_OLD.detail_dokumen + investasiId);
+            }}
+          >
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <IconFileDescription size={70} color="white" />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/_component/detail/comp_box_prospektus.tsx

@@ -0,0 +1,49 @@
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color";
+import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
+import { IconBookDownload } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Investasi_ComponentBoxProspektus({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Paper
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.softblue}`,
+          borderRadius: "10px",
+          color: "white",
+          
+        }}
+      >
+        <Flex direction={"column"} align={"center"} justify={"center"}>
+          <Text fz={12}>Prospektus</Text>
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            size={60}
+            onClick={() => {
+              setLoading(true);
+              router.push(RouterInvestasi_OLD.detail_prospektus + investasiId);
+            }}
+          >
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <IconBookDownload size={70} color="white" />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx

@@ -0,0 +1,138 @@
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { ComponentGlobal_AvatarAndAuthorName } from "@/app_modules/_global/component";
+import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import {
+  Stack,
+  AspectRatio,
+  Title,
+  Grid,
+  Box,
+  SimpleGrid,
+  Image,
+  Text,
+} from "@mantine/core";
+import { Investasi_ComponentStylesCard } from "../../comp_card_border_and_background";
+import { Investasi_ComponentBoxDaftarBerita } from "../comp_box_daftar_berita";
+import { Investasi_ComponentBoxDaftarDokumen } from "../comp_box_daftar_dokumen";
+import { Investasi_ComponentBoxProspektus } from "../comp_box_prospektus";
+
+export function Investasi_ComponentBoxDetailData({
+  data,
+}: {
+  data: MODEL_INVOICE_INVESTASI;
+}) {
+  return (
+    <>
+      <Investasi_ComponentStylesCard>
+        <Stack>
+          <ComponentGlobal_AvatarAndAuthorName dataUser={data?.Author} />
+          <AspectRatio ratio={1 / 1} mx={0} mah={250}>
+            <Image
+              alt=""
+              src={
+                RouterInvestasi_OLD.api_gambar + `${data?.Investasi.imagesId}`
+              }
+              radius={"sm"}
+              mah={250}
+              width={"100%"}
+            />
+          </AspectRatio>
+          <Title order={3} mb={"xs"} align="center">
+            {data?.Investasi.title}
+          </Title>
+
+          {/* Rincian Data */}
+          <Grid mb={"md"}>
+            <Grid.Col span={6}>
+              <Stack>
+                <Box>
+                  <Text>Dana Dibutuhkan</Text>
+                  <Text fw={"bold"}>
+                    Rp.{" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.targetDana)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Harga Per Lembar</Text>
+                  <Text fw={"bold"}>
+                    Rp.{" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.hargaLembar)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Jadwal Pembagian</Text>
+                  <Text fw={"bold"}>
+                    {data?.Investasi?.MasterPembagianDeviden?.name} bulan{" "}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Pembagian Deviden</Text>
+                  <Text fw={"bold"}>
+                    {data?.Investasi?.MasterPeriodeDeviden?.name}
+                  </Text>
+                </Box>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Stack>
+                <Box>
+                  <Text>Investor</Text>
+                  <Text fw={"bold"}>
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(data?.Investor?.length)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>ROI</Text>
+                  <Text fw={"bold"}>{data?.Investasi.roi}%</Text>
+                </Box>
+                <Box>
+                  <Text>Total Lembar</Text>
+                  <Text fw={"bold"}>
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.totalLembar)}{" "}
+                    lembar
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Sisa Lembar</Text>
+                  <Text fw={"bold"}>
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.sisaLembar)}{" "}
+                    lembar
+                  </Text>
+                </Box>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+
+          <SimpleGrid
+            cols={3}
+            breakpoints={[
+              { maxWidth: "62rem", cols: 3, spacing: "md" },
+              { maxWidth: "48rem", cols: 2, spacing: "sm" },
+              { maxWidth: "36rem", cols: 1, spacing: "sm" },
+            ]}
+          >
+            <Investasi_ComponentBoxProspektus
+              investasiId={data?.Investasi?.id}
+            />
+            <Investasi_ComponentBoxDaftarDokumen
+              investasiId={data?.Investasi?.id}
+            />
+            <Investasi_ComponentBoxDaftarBerita
+              investasiId={data?.Investasi?.id}
+            />
+          </SimpleGrid>
+        </Stack>
+      </Investasi_ComponentStylesCard>
+    </>
+  );
+}

src/app_modules/investasi/_component/detail/saham_saya/comp_harga_dan_lembar.tsx

@@ -0,0 +1,49 @@
+import {
+  ComponentGlobal_TampilanRupiah,
+  ComponentGlobal_TampilanAngkaRatusan,
+} from "@/app_modules/_global/component";
+import { Stack, Grid, Text } from "@mantine/core";
+import { data } from "autoprefixer";
+import { Investasi_ComponentStylesCard } from "../../comp_card_border_and_background";
+import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+
+export function Investasi_ComponentBoxHargaDanLembarSaham({
+  data,
+}: {
+  data: MODEL_INVOICE_INVESTASI;
+}) {
+  return (
+    <>
+      <Investasi_ComponentStylesCard>
+        <Stack>
+          <Stack spacing={5}>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Transaksi Saham</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <ComponentGlobal_TampilanRupiah
+                  fontWeight={"bold"}
+                  nominal={+data?.nominal}
+                />
+              </Grid.Col>
+            </Grid>
+
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Saham Terbeli</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <ComponentGlobal_TampilanAngkaRatusan
+                  fontWeight={"bold"}
+                  nominal={+data?.lembarTerbeli}
+                  textAfter="Lembar"
+                />
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Investasi_ComponentStylesCard>
+    </>
+  );
+}

src/app_modules/investasi/_component/detail/saham_saya/comp_progress_saham.tsx

@@ -0,0 +1,27 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { Stack, Progress, Text } from "@mantine/core";
+import { Investasi_ComponentStylesCard } from "../../comp_card_border_and_background";
+
+export function Investasi_ComponentBoxProgress({
+  progress,
+}: {
+  progress: string;
+}) {
+  return (
+    <>
+      <Investasi_ComponentStylesCard>
+        <Stack>
+          <Text fw={"bold"}>Progres Saham</Text>
+          <Progress
+            styles={{ label: { color: "black" } }}
+            color={MainColor.yellow}
+            size={"xl"}
+            value={+progress}
+            label={progress + "%"}
+            radius={"xl"}
+          />
+        </Stack>
+      </Investasi_ComponentStylesCard>
+    </>
+  );
+}

src/app_modules/investasi/_component/index.ts

@@ -1,5 +1,13 @@
+import { Investasi_ComponentStylesCard } from "./comp_card_border_and_background";
+import { Investasi_ComponentBoxDaftarBerita } from "./detail/comp_box_daftar_berita";
+import { Investasi_ComponentBoxDaftarDokumen } from "./detail/comp_box_daftar_dokumen";
+import { Investasi_ComponentBoxProspektus } from "./detail/comp_box_prospektus";
+import { Investasi_ComponentBoxDetailData } from "./detail/saham_saya/comp_detail_data";
+import { Investasi_ComponentBoxHargaDanLembarSaham } from "./detail/saham_saya/comp_harga_dan_lembar";
+import { Investasi_ComponentBoxProgress } from "./detail/saham_saya/comp_progress_saham";
 import { Investasi_ComponentCardBeranda } from "./main/comp_card_beranda";
 import { Investasi_ComponentCardDaftarTransaksi } from "./main/comp_card_daftar_transaksi";
+import { Investasi_ComponentSahamSaya } from "./main/comp_card_saham_saya";
 import { Investasi_ComponentFooterMain } from "./main/comp_footer_main";
 import { Investasi_ComponentButtonUpdateBeranda } from "./main/comp_update_beranda";
 
@@ -7,3 +15,11 @@ export { Investasi_ComponentFooterMain };
 export { Investasi_ComponentCardBeranda };
 export { Investasi_ComponentButtonUpdateBeranda };
 export { Investasi_ComponentCardDaftarTransaksi };
+export { Investasi_ComponentSahamSaya };
+export { Investasi_ComponentStylesCard as Investasasi_ComponentBoxBorderAndBackground };
+export { Investasi_ComponentBoxProspektus };
+export { Investasi_ComponentBoxDaftarDokumen };
+export { Investasi_ComponentBoxDaftarBerita };
+export { Investasi_ComponentBoxHargaDanLembarSaham };
+export { Investasi_ComponentBoxProgress };
+export { Investasi_ComponentBoxDetailData };

src/app_modules/investasi/_component/main/comp_card_beranda.tsx

@@ -19,7 +19,7 @@ import moment from "moment";
 import { MODEL_INVESTASI } from "../../_lib/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 
 export function Investasi_ComponentCardBeranda({
   data,

src/app_modules/investasi/_component/main/comp_card_daftar_transaksi.tsx

@@ -16,7 +16,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 
 export function Investasi_ComponentCardDaftarTransaksi({
   data,
@@ -32,15 +32,13 @@ export function Investasi_ComponentCardDaftarTransaksi({
     invoiceId: string;
     statusInvoiceId: string;
   }) {
-
     // Berhasil
-     if (statusInvoiceId === "1") {
-       setVisible(true);
-       return router.push(NEW_RouterInvestasi.transaksi_berhasil + invoiceId, {
-         scroll: false,
-       });
-     }
-
+    if (statusInvoiceId === "1") {
+      setVisible(true);
+      return router.push(NEW_RouterInvestasi.transaksi_berhasil + invoiceId, {
+        scroll: false,
+      });
+    }
 
     // Proses
     if (statusInvoiceId === "2") {
@@ -86,24 +84,39 @@ export function Investasi_ComponentCardDaftarTransaksi({
         }
       >
         <Group position="apart">
-          <Title order={6}>{data.Investasi.title}</Title>
-          <Title order={5}>
+          <Text fw={"bold"}>{data.Investasi.title}</Text>
+          <Text fw={"bold"}>
             Rp.
             {new Intl.NumberFormat("id-ID", {
               maximumFractionDigits: 10,
             }).format(+data.nominal)}
-          </Title>
+          </Text>
         </Group>
         <Group position="apart">
           <Stack spacing={0}>
             {/* <Text fz={"xs"}>Bank {data.namaBank}</Text> */}
-            <Text fz={"xs"}>{moment(data.createdAt).format("ll")}</Text>
+            <Text fz={"xs"} c={"gray"}>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "long" }).format(
+                data.createdAt
+              )}
+            </Text>
           </Stack>
-          <Text>{data.lembarTerbeli} Lembar</Text>
+          <Title
+            order={6}
+            c={
+              data.statusInvoiceId === "1"
+                ? "green"
+                : data.statusInvoiceId === "2"
+                  ? "blue"
+                  : data.statusInvoiceId === "3"
+                    ? "orange"
+                    : "red"
+            }
+          >
+            {data.StatusInvoice.name}
+          </Title>
         </Group>
-        <Center mt={"sm"}>
-          <Badge>{data.StatusInvoice.name}</Badge>
-        </Center>
+
         {visible && <ComponentGlobal_CardLoadingOverlay />}
       </Card>
     </>

src/app_modules/investasi/_component/main/comp_card_saham_saya.tsx

@@ -0,0 +1,104 @@
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import {
+  Box,
+  Card,
+  Center,
+  Group,
+  Paper,
+  Progress,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_TampilanAngkaRatusan,
+  ComponentGlobal_TampilanRupiah,
+} from "@/app_modules/_global/component";
+import { useRouter } from "next/navigation";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { useState } from "react";
+import { Investasi_ComponentStylesCard } from "../comp_card_border_and_background";
+
+export function Investasi_ComponentSahamSaya({
+  data,
+}: {
+  data: MODEL_INVOICE_INVESTASI;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Investasi_ComponentStylesCard
+        onClickHandler={() => {
+          setVisible(true);
+          router.push(NEW_RouterInvestasi.detail_saham + data?.id, {
+            scroll: false,
+          });
+        }}
+        marginBottom={"15px"}
+      >
+        <SimpleGrid cols={2} spacing={"xs"}>
+          <Box>
+            <Stack spacing={0}>
+              <Text fw={"bold"} lineClamp={2}>
+                {data?.Investasi?.title}
+              </Text>
+              <ComponentGlobal_TampilanRupiah
+                nominal={+data?.nominal}
+                color="white"
+                fontSize={"xs"}
+              />
+              <ComponentGlobal_TampilanAngkaRatusan
+                nominal={+data?.lembarTerbeli}
+                color="white"
+                fontSize={"xs"}
+                textAfter="Lembar"
+              />
+            </Stack>
+          </Box>
+
+          <Stack justify="center">
+            <Progress
+              size={"xl"}
+              radius={"xl"}
+              color="yellow"
+              value={+data.Investasi.progress}
+              label={data.Investasi.progress + "%"}
+              styles={{
+                bar: {
+                  backgroundColor: MainColor.yellow,
+                },
+                root: {
+                  backgroundColor: "whitesmoke",
+                },
+                label: {
+                  color: "black",
+                },
+              }}
+            />
+          </Stack>
+        </SimpleGrid>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
+      </Investasi_ComponentStylesCard>
+
+      {/* <Card
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "15px",
+        }}
+        onClick={}
+      ></Card> */}
+    </>
+  );
+}