Merge pull request #203 from bipproduction/amalia/16-des-24

Amalia/16 des 24

src/app/api/new/investasi/route.ts

@@ -98,6 +98,38 @@ export async function GET(request: Request) {
          if (userLoginId == null) {
             return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
          }
+
+         const data = await prisma.investasi.findMany({
+            take: 5,
+            skip: dataSkip,
+            orderBy: {
+               updatedAt: "desc",
+            },
+            where: {
+               authorId: userLoginId,
+               masterStatusInvestasiId: status,
+            },
+            select: {
+               id: true,
+               title: true,
+               targetDana: true,
+               imageId: true,
+               countDown: true,
+               updatedAt: true,
+               MasterPencarianInvestor: {
+                  select: {
+                     name: true
+                  }
+               }
+            }
+         });
+
+         dataFix = data.map((v: any) => ({
+            ..._.omit(v, ["MasterPencarianInvestor"]),
+            pencarianInvestor: v.MasterPencarianInvestor.name
+         }))
+
+
       }
 
 

src/app/dev/investasi/main/portofolio/[id]/page.tsx

@@ -1,22 +1,23 @@
 import { investasi_funGetPortofolioByStatusId } from "@/app_modules/investasi/_fun";
-import { Investasi_UiPortofolio } from "@/app_modules/investasi/_ui";
+import { Investasi_UiPortofolio, Investasi_UiPortofolioNew } from "@/app_modules/investasi/_ui";
 import getStatusInvestasi from "@/app_modules/investasi/fun/master/get_status_investasi";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const statusId = params.id;
+  // const statusId = params.id;
   const listStatus = await getStatusInvestasi();
-  const dataPortofolio = await investasi_funGetPortofolioByStatusId({
+  // const dataPortofolio = await investasi_funGetPortofolioByStatusId({
-    page: 1,
+  //   page: 1,
-    statusId: statusId,
+  //   statusId: statusId,
-  });
+  // });
 
   return (
     <>
-      <Investasi_UiPortofolio
+      {/* <Investasi_UiPortofolio
         statusId={statusId}
         listStatus={listStatus as any}
         dataPortofolio={dataPortofolio as any}
-      />
+      /> */}
+      <Investasi_UiPortofolioNew listStatus={listStatus as any} />
     </>
   );
 }

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

@@ -0,0 +1,44 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { ComponentGlobal_CardStyles, ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
+import { Grid, Stack, Text } from "@mantine/core";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { IDataInvestasiBursa } from "../../_lib/type_investasi";
+
+export function Investasi_ComponentCardPortofolio_NotPublishNew({ data, }: { data: IDataInvestasiBursa; }) {
+   const router = useRouter();
+   return (
+      <>
+         <ComponentGlobal_CardStyles
+            onClickHandler={() => {
+               router.push(NEW_RouterInvestasi.detail_portofolio({ id: data.id }), { scroll: false });
+            }}
+         >
+            <Grid>
+               <Grid.Col span={8}>
+                  <Text fw={"bold"} lineClamp={1}>
+                     {" "}
+                     {_.startCase(data.title)}
+                  </Text>
+                  <Stack spacing={0}>
+                     <Text fz={10}>Target Dana:</Text>
+                     <Text>
+                        Rp.{" "}
+                        {new Intl.NumberFormat("id-ID", {
+                           maximumSignificantDigits: 10,
+                        }).format(+data.targetDana)}
+                     </Text>
+                  </Stack>
+               </Grid.Col>
+
+               <Grid.Col span={4}>
+                  <ComponentGlobal_LoadImageCustom
+                     fileId={data.imageId}
+                     height={80}
+                  />
+               </Grid.Col>
+            </Grid>
+         </ComponentGlobal_CardStyles>
+      </>
+   );
+}

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

@@ -0,0 +1,85 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
+import { Box, Grid, Group, Stack, Text } from "@mantine/core";
+import { IconChecklist, IconCircleCheck } from "@tabler/icons-react";
+import _ from "lodash";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { IDataInvestasiBursa } from "../../_lib/type_investasi";
+import { Investasi_ComponentStylesCard } from "../comp_card_border_and_background";
+
+export function Investasi_ComponentCardPortofolioPublishNew({ data }: { data: IDataInvestasiBursa; }) {
+  const router = useRouter();
+
+  return (
+    <>
+      <Investasi_ComponentStylesCard
+        marginBottom={"15px"}
+        onClickHandler={() => {
+          router.push(NEW_RouterInvestasi.detail_main({ id: data?.id }), {
+            scroll: false,
+          });
+        }}
+      >
+        <Grid>
+          <Grid.Col span={8}>
+            <Text fw={"bold"}> {_.capitalize(data?.title)}</Text>
+            <Stack spacing={0}>
+              <Text fz={10}>Target Dana:</Text>
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+data?.targetDana)}
+              </Text>
+            </Stack>
+          </Grid.Col>
+
+          <Grid.Col span={4}>
+            <ComponentGlobal_LoadImageCustom
+              height={80}
+              fileId={data?.imageId}
+            />
+          </Grid.Col>
+        </Grid>
+
+        <Group position="center" mt={"md"}>
+          {Number(data?.pencarianInvestor) -
+            moment(new Date()).diff(new Date(data?.updatedAt), "days") <=
+          0 ? (
+            <Group position="right">
+              <IconCircleCheck color="green" />
+              <Text c={"green"}>Selesai</Text>
+            </Group>
+          ) : (
+            <Group
+              position="center"
+              style={{ fontSize: 10, fontWeight: "bold" }}
+            >
+              <Group>
+                {Number(data?.pencarianInvestor) -
+                  moment(new Date()).diff(new Date(data?.countDown), "days") <=
+                0 ? (
+                  <Group>
+                    <IconChecklist />
+                    <Text>Selesai</Text>
+                  </Group>
+                ) : (
+                  <Box>
+                    Sisa Waktu : {}
+                    {Number(data?.pencarianInvestor) -
+                      moment(new Date()).diff(
+                        new Date(data?.countDown),
+                        "days"
+                      )}{" "}
+                    hari
+                  </Box>
+                )}
+              </Group>
+            </Group>
+          )}
+        </Group>
+      </Investasi_ComponentStylesCard>
+    </>
+  );
+}

src/app_modules/investasi/_lib/type_investasi.ts

@@ -20,5 +20,7 @@ export interface IDataInvestasiBursa {
    imageId: string
    progress: string
    countDown: string
+   targetDana: string
    pencarianInvestor: string
+   updatedAt: Date
 }

src/app_modules/investasi/_ui/index.ts

@@ -26,6 +26,7 @@ import { Investasi_UiCreateBerita } from "./create/ui_create_berita";
 import { Investasi_UiDetailBerita } from "./detail/ui_berita";
 import { Investasi_UiEditInvestasiNew } from "./edit/ui_edit_investasi_new";
 import { Investasi_ViewBerandaNew } from "../_view/main/view_beranda_new";
+import { Investasi_UiPortofolioNew } from "./main/ui_portofolio_new";
 
 export { Investasi_UiProsesPembelian };
 export { Investasi_UiMetodePembayaran };
@@ -55,3 +56,4 @@ export { Investasi_UiCreateBerita };
 export { Investasi_UiDetailBerita };
 export { Investasi_UiEditInvestasiNew }
 export { Investasi_ViewBerandaNew }
+export { Investasi_UiPortofolioNew }

src/app_modules/investasi/_ui/main/ui_portofolio_new.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
+import { Stack, Tabs } from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+import { Investasi_ViewPortofolioNew } from "../../_view/main/portofolio/view_portofolio_new";
+
+export function Investasi_UiPortofolioNew({ listStatus }: { listStatus: MODEL_NEW_DEFAULT_MASTER[] }) {
+   const param = useParams<{ id: string }>();
+   const router = useRouter();
+
+   return (
+      <>
+         <Tabs
+            variant="pills"
+            radius="xl"
+            defaultValue={param.id}
+            styles={{
+               tabsList: {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 99,
+               },
+            }}
+            value={param.id}
+            onTabChange={(val: any) => {
+               router.push(NEW_RouterInvestasi.portofolio({ id: val }));
+            }}
+         >
+            <Stack>
+               <Tabs.List grow mb={"xs"}>
+                  {listStatus.map((e) => (
+                     <Tabs.Tab
+                        w={"20%"}
+                        key={e.id}
+                        value={e.id}
+                        fw={"bold"}
+                        style={{
+                           transition: "ease 0.5s ",
+                           backgroundColor:
+                              param.id === e.id ? MainColor.yellow : AccentColor.blue,
+                           color: param.id === e.id ? "black" : "white",
+                        }}
+                     >
+                        {e.name}
+                     </Tabs.Tab>
+                  ))}
+               </Tabs.List>
+
+               <Investasi_ViewPortofolioNew />
+            </Stack>
+         </Tabs>
+      </>
+   );
+}

src/app_modules/investasi/_view/main/portofolio/skeleton_portofolio.tsx

@@ -0,0 +1,31 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Box, Grid, Skeleton } from "@mantine/core";
+
+export default function SkeletonInvestasiPortofolio() {
+   return (
+      <>
+         {[...Array(4)].map((_, index) => (
+            <ComponentGlobal_CardStyles key={index}>
+               <Grid>
+                  <Grid.Col span={7}>
+                     <Box>
+                        {[...Array(3)].map((_, i) => (
+                           <Box key={i} py={5}>
+                              <Grid align="center">
+                                 <Grid.Col span={12}>
+                                    <Skeleton w={"90%"} h={23} />
+                                 </Grid.Col>
+                              </Grid>
+                           </Box>
+                        ))}
+                     </Box>
+                  </Grid.Col>
+                  <Grid.Col span={5}>
+                     <Skeleton w={"100%"} height={100} radius="md" />
+                  </Grid.Col>
+               </Grid>
+            </ComponentGlobal_CardStyles>
+         ))}
+      </>
+   );
+}

src/app_modules/investasi/_view/main/portofolio/view_portofolio_new.tsx

@@ -0,0 +1,79 @@
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Investasi_ComponentCardPortofolio_NotPublishNew } from "@/app_modules/investasi/_component/main/comp_card_portofolio_not_publish_new";
+import { Investasi_ComponentCardPortofolioPublishNew } from "@/app_modules/investasi/_component/main/comp_card_portofolio_publish_new";
+import { apiGetAllInvestasi } from "@/app_modules/investasi/_lib/api_interface";
+import { IDataInvestasiBursa } from "@/app_modules/investasi/_lib/type_investasi";
+import { Box, Center } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import SkeletonInvestasiPortofolio from "./skeleton_portofolio";
+
+export function Investasi_ViewPortofolioNew() {
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<IDataInvestasiBursa[]>([]);
+  const [activePage, setActivePage] = useState(1);
+  const [loading, setLoading] = useState(true)
+
+  async function getDataInvestasi() {
+    try {
+      setLoading(true)
+      const response = await apiGetAllInvestasi(`?cat=portofolio&status=${param.id}&page=1`)
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false)
+    }
+  }
+
+
+  useShallowEffect(() => {
+    getDataInvestasi()
+  }, []);
+
+  return (
+    <>
+      <Box>
+        {
+          loading ?
+            <SkeletonInvestasiPortofolio />
+            :
+            _.isEmpty(data) ? (
+              <ComponentGlobal_IsEmptyData />
+            ) : (
+              <ScrollOnly
+                height="75vh"
+                renderLoading={() => (
+                  <Center>
+                    <ComponentGlobal_Loader size={25} />
+                  </Center>
+                )}
+                data={data}
+                setData={setData}
+                moreData={async () => {
+                  const pageNew = activePage + 1
+                  const loadData = await apiGetAllInvestasi(`?cat=portofolio&status=${param.id}&page=${pageNew}`)
+                  setActivePage((val) => val + 1);
+
+                  return loadData;
+                }}
+              >
+                {
+                  param.id == "1" ?
+                    (item) => (<Investasi_ComponentCardPortofolioPublishNew data={item} />)
+                    :
+                    (item) => (<Investasi_ComponentCardPortofolio_NotPublishNew data={item} />)
+                }
+              </ScrollOnly>
+            )
+        }
+      </Box>
+    </>
+  );
+}