Bursa Investasi

# feat:
- Tampilan portofolio selesai
- Hapus investasi
- Function get data publish
### no issue

src/app_modules/investasi/detail/view.tsx

@@ -14,6 +14,7 @@ import {
   Group,
   Image,
   Paper,
+  Progress,
   Slider,
   Stack,
   Text,
@@ -21,13 +22,28 @@ import {
 } from "@mantine/core";
 import {
   IconBookDownload,
+  IconCircleCheck,
   IconFileDescription,
   IconSpeakerphone,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_Investasi } from "../model/model_investasi";
+import moment from "moment";
+import { MODEL_User_profile } from "@/app_modules/models/user_profile";
+import { RouterUserProfile } from "@/app/lib/router_hipmi/router_user_profile";
 
-export default function DetailInvestasi({id}: {id: string}) {
+export default function DetailInvestasi({
+  dataInvestasi,
+  dataUser,
+}: {
+  dataInvestasi: MODEL_Investasi;
+  dataUser: MODEL_User_profile;
+}) {
   const router = useRouter();
+  const [investasi, setInvestasi] = useState(dataInvestasi);
+  const [user, setUser] = useState(dataUser);
+
   const listBox = [
     {
       id: 1,
@@ -39,7 +55,7 @@ export default function DetailInvestasi({id}: {id: string}) {
       id: 2,
       name: "Dokumen",
       icon: <IconFileDescription size={70} />,
-      route: RouterInvestasi.detail_dokumen
+      route: RouterInvestasi.detail_dokumen,
     },
     {
       id: 3,
@@ -51,72 +67,81 @@ export default function DetailInvestasi({id}: {id: string}) {
 
   return (
     <>
+      {/* Foto username dan sisa waktu */}
       <Group position="apart" mb={"md"}>
         <Flex align={"center"} gap={"xs"}>
-          <Avatar src={"/aset/avatar.png"} />
-          <Text>Username</Text>
+          <Avatar
+            radius={50}
+            src={
+              RouterUserProfile.api_foto + `${user.Profile?.ImageProfile?.url}`
+            }
+          />
+          <Text>{user.username}</Text>
         </Flex>
-        <Text>Sisa waktu : 20 Hari</Text>
+        {Number(investasi.MasterPencarianInvestor.name) -
+          moment(new Date()).diff(new Date(investasi.updatedAt), "days") <=
+        0 ? (
+          <Group position="right">
+            <IconCircleCheck color="green" />
+            <Text c={"green"}>Selesai</Text>
+          </Group>
+        ) : (
+          <Group position="right" spacing={"xs"}>
+            <Text>Sisa waktu:</Text>
+            <Text>
+              {Number(investasi.MasterPencarianInvestor.name) -
+                moment(new Date()).diff(new Date(investasi.updatedAt), "days")}
+            </Text>
+            <Text>Hari</Text>
+          </Group>
+        )}
       </Group>
 
-      <Paper withBorder mb={"md"}>
+      <Paper withBorder mb={"md"} p={"xs"}>
         <AspectRatio ratio={16 / 9}>
-          <Image alt="" src={"/aset/no-img.png"} />
+          <Image   alt="" src={RouterInvestasi.api_gambar + `${investasi.imagesId}`} />
         </AspectRatio>
       </Paper>
 
-      {/* Title dan Persentase */}
+      {/* Title dan Progress */}
       <Box mb={"md"}>
         <Title order={4} mb={"xs"}>
-          Judul Proyek
+          {investasi.title}
         </Title>
-        <Slider
-          disabled
-          size={10}
-          value={60}
-          marks={[{ value: 60, label: "60%" }]}
-        />
+        <Progress label="0%" value={0} color="teal" size="xl" radius="xl"  animate/>
       </Box>
 
-      {/* Rincian Data */}
-      <Grid p={"md"} mb={"md"}>
+     {/* Rincian Data */}
+     <Grid p={"md"} mb={"md"}>
         <Grid.Col span={6}>
           <Stack>
-            <Box>
-              <Text>Terkumpul</Text>
-              <Text>Rp. </Text>
-            </Box>
             <Box>
               <Text>Dana Dibutuhkan</Text>
-              <Text>Rp. </Text>
+              <Text>Rp. {investasi.targetDana}</Text>
             </Box>
             <Box>
               <Text>Harga Per Lembar</Text>
-              <Text>Rp. </Text>
+              <Text>Rp. {investasi.hargaLembar}</Text>
             </Box>
             <Box>
               <Text>Jadwal Pembagian</Text>
-              <Text>3 Bulan </Text>
+              <Text>{investasi.MasterPembagianDeviden.name} bulan </Text>
             </Box>
           </Stack>
         </Grid.Col>
         <Grid.Col span={6}>
           <Stack>
-            <Box>
-              <Text>Investor</Text>
-              <Text>4657</Text>
-            </Box>
             <Box>
               <Text>ROI</Text>
-              <Text>%</Text>
+              <Text>{investasi.roi}%</Text>
             </Box>
             <Box>
               <Text>Total Lembar</Text>
-              <Text>0</Text>
+              <Text>{investasi.totalLembar} lembar</Text>
             </Box>
             <Box>
               <Text>Pembagian Deviden</Text>
-              <Text>Selamanya</Text>
+              <Text>{investasi.MasterPeriodeDeviden.name}</Text>
             </Box>
           </Stack>
         </Grid.Col>
@@ -125,7 +150,11 @@ export default function DetailInvestasi({id}: {id: string}) {
       {/* List Box */}
       <Grid mb={"md"}>
         {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.id}`)}
+          >
             <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
               <Flex direction={"column"} align={"center"} justify={"center"}>
                 <Text fz={12}>{e.name}</Text>