Alur Payment

# feat
- Pembelian saham
- Function progres
### No Issue

src/app_modules/investasi/detail_saham_terbeli/view.tsx

@@ -15,6 +15,7 @@ import {
   Group,
   Image,
   Paper,
+  Progress,
   Slider,
   Stack,
   Text,
@@ -22,13 +23,24 @@ import {
 } from "@mantine/core";
 import {
   IconBookDownload,
+  IconCircleCheck,
   IconFileDescription,
   IconSpeakerphone,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
+import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
+import { useState } from "react";
+import moment from "moment";
 
-export default function DetailSahamTerbeli({id}: {id: string}) {
+export default function DetailSahamTerbeli({
+  dataTransaksi,
+  investor
+}: {
+  dataTransaksi: MODEL_Transaksi_Investasi;
+  investor: number
+}) {
   const router = useRouter();
+  const [investasi, setINvestasi] = useState(dataTransaksi);
   const listBox = [
     {
       id: 1,
@@ -54,50 +66,104 @@ export default function DetailSahamTerbeli({id}: {id: string}) {
       <Group position="apart" mb={"md"}>
         <Flex align={"center"} gap={"xs"}>
           <Avatar src={"/aset/avatar.png"} />
-          <Text>Username</Text>
+          <Text>{investasi.Investasi.author.username}</Text>
         </Flex>
-        <Text>Sisa waktu : 20 Hari</Text>
+        {(() => {
+          if (
+            Number(investasi.Investasi.MasterPencarianInvestor.name) -
+              moment(new Date()).diff(new Date(investasi.createdAt), "days") <=
+            0
+          ) {
+            return (
+              <>
+                <Group position="right">
+                  <IconCircleCheck color="green" />
+                  <Text c={"green"}>Selesai</Text>
+                </Group>
+              </>
+            );
+          } else {
+            return (
+              <>
+                <Group position="right" spacing={"xs"}>
+                  <Text>Sisa waktu:</Text>
+                  <Text>
+                    {Number(investasi.Investasi.MasterPencarianInvestor.name) -
+                      moment(new Date()).diff(
+                        new Date(investasi.Investasi.countDown),
+                        "days"
+                      )}{" "}
+                    Hari
+                  </Text>
+                </Group>
+              </>
+            );
+          }
+        })()}
       </Group>
 
       {/* Gambar Investasi */}
       <Paper withBorder mb={"md"}>
         <AspectRatio ratio={16 / 9}>
-          <Image alt="" src={"/aset/no-img.png"} />
+          <Image alt="" src={RouterInvestasi.api_gambar + `${investasi.Investasi.imagesId}`} />
         </AspectRatio>
       </Paper>
 
       {/* Title dan Persentase */}
       <Box mb={"md"}>
         <Title order={4} mb={"xs"}>
-          Judul Proyek
+          {investasi.Investasi.title}
         </Title>
-        <Slider
-          disabled
-          size={10}
-          value={60}
-          marks={[{ value: 60, label: "60%" }]}
-        />
+        <Progress
+                label={
+                  "" +
+                  (
+                    ((+investasi.Investasi.totalLembar - +investasi.Investasi.sisaLembar) /
+                      +investasi.Investasi.totalLembar) *
+                    100
+                  ).toFixed(1) +
+                  "%"
+                }
+                value={
+                  +(
+                    ((+investasi.Investasi.totalLembar - +investasi.Investasi.sisaLembar) /
+                    +investasi.Investasi.totalLembar) *
+                  100
+                  ).toFixed(2)
+                }
+                color="teal"
+                size="xl"
+                radius="xl"
+              />
       </Box>
 
       {/* Rincian Data */}
       <Grid p={"md"}>
         <Grid.Col span={6}>
           <Stack>
-            <Box>
+            {/* <Box>
               <Text>Terkumpul</Text>
               <Text>Rp. </Text>
-            </Box>
+            </Box> */}
             <Box>
               <Text>Dana Dibutuhkan</Text>
-              <Text>Rp. </Text>
+              <Text>Rp. {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.Investasi.targetDana)}</Text>
             </Box>
             <Box>
               <Text>Harga Per Lembar</Text>
-              <Text>Rp. </Text>
+              <Text>Rp. {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.Investasi.hargaLembar)}</Text>
             </Box>
             <Box>
               <Text>Jadwal Pembagian</Text>
-              <Text>3 Bulan </Text>
+              <Text>{investasi.Investasi.MasterPembagianDeviden.name} bulan </Text>
+            </Box>
+            <Box>
+              <Text>Pembagian Deviden</Text>
+              <Text>{investasi.Investasi.MasterPeriodeDeviden.name}</Text>
             </Box>
           </Stack>
         </Grid.Col>
@@ -105,19 +171,23 @@ export default function DetailSahamTerbeli({id}: {id: string}) {
           <Stack>
             <Box>
               <Text>Investor</Text>
-              <Text>4657</Text>
+              <Text>{investor} pengguna</Text>
             </Box>
             <Box>
               <Text>ROI</Text>
-              <Text>%</Text>
+              <Text>{investasi.Investasi.roi}%</Text>
             </Box>
             <Box>
               <Text>Total Lembar</Text>
-              <Text>0</Text>
+              <Text>{new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.Investasi.totalLembar)} lembar</Text>
             </Box>
             <Box>
-              <Text>Pembagian Deviden</Text>
-              <Text>Selamanya</Text>
+              <Text>Sisa Lembar</Text>
+              <Text>{new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.Investasi.sisaLembar)} lembar</Text>
             </Box>
           </Stack>
         </Grid.Col>
@@ -135,7 +205,9 @@ export default function DetailSahamTerbeli({id}: {id: string}) {
             <Stack>
               <Box>
                 <Text>Total Pembelian</Text>
-                <Text>Rp. 0</Text>
+                <Text>Rp. {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.gross_amount)}</Text>
               </Box>
             </Stack>
           </Grid.Col>
@@ -143,7 +215,9 @@ export default function DetailSahamTerbeli({id}: {id: string}) {
             <Stack>
               <Box>
                 <Text>Lembar Dibeli</Text>
-                <Text>100</Text>
+                <Text>{new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.quantity)} lembar</Text>
               </Box>
             </Stack>
           </Grid.Col>
@@ -153,7 +227,11 @@ export default function DetailSahamTerbeli({id}: {id: string}) {
       {/* List Box */}
       <Grid mb={"sm"} justify="center">
         {listBox.map((e) => (
-          <Grid.Col span={"auto"} key={e.id} onClick={() => router.push(e.route + `${id}`)}>
+          <Grid.Col
+            span={"auto"}
+            key={e.id}
+            onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
+          >
             <Center>
               <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
                 <Flex direction={"column"} align={"center"} justify={"center"}>