Revisi Admin Investasi

# fix:
- Perbaharui tampilan
### No issue

src/app_modules/admin/investasi/main/table_publikasi_progres.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {
+  Paper,
+  Stack,
+  Center,
+  Title,
+  Table,
+  Group,
+  Avatar,
+} from "@mantine/core";
+import _ from "lodash";
+import moment from "moment";
+
+export default function TablePublikasiProgresInvestasi({
+  publishProgres,
+}: {
+  publishProgres: any[];
+}) {
+  return (
+    <>
+      <Paper
+        radius={"md"}
+        bg={"gray.4"}
+        p={"sm"}
+        // sx={{ borderStyle: "solid", borderColor: "teal" }}
+      >
+        <Stack spacing={"xl"}>
+          <Center>
+            <Title order={4}>Publikasi & Progres Investasi</Title>
+          </Center>
+          <Table bg={"gray.2"} sx={{borderRadius: "10px"}}>
+            <thead>
+              <tr>
+                <th>
+                  <Center>Username</Center>
+                </th>
+                <th>
+                  <Center>Publis</Center>
+                </th>
+                <th>
+                  <Center>Progres</Center>
+                </th>
+               
+              </tr>
+            </thead>
+            <tbody>
+              {_.isEmpty(publishProgres)
+                ? []
+                : publishProgres.map((e) => (
+                    <tr key={e.id}>
+                      <td>
+                        <Group position="left">
+                          <Avatar variant="gradient" radius={"xl"} />{" "}
+                          {e.author.username}
+                        </Group>
+                      </td>
+                      <td>
+                        <Center>
+                          {moment(e.updatedAt).format("DD MMM YYYY")}{" "}
+                        </Center>
+                      </td>
+                      <td>
+                        <Center>{e.progress} %</Center>
+                      </td>
+                      
+                    </tr>
+                  ))}
+            </tbody>
+          </Table>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/admin/investasi/main/table_publish.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { RouterAdminInvestasi } from "@/app/lib/router_hipmi/router_admin";
 import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
 import {
@@ -7,13 +8,18 @@ import {
   ScrollArea,
   Table,
   Tooltip,
+  Stack,
+  Avatar,
+  Group,
+  Text,
+  Center,
 } from "@mantine/core";
-import { IconEyeCheck } from "@tabler/icons-react";
+import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
 import { IconEdit, IconEye } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function TablePublish({
+export default function Admin_TablePublishInvestasi({
   dataInvestsi,
 }: {
   dataInvestsi: MODEL_Investasi[];
@@ -21,30 +27,41 @@ export default function TablePublish({
   const [investasi, setInvestasi] = useState(dataInvestsi);
   const router = useRouter();
 
+  // console.log(investasi);
+
   const tableBody = investasi.map((e) =>
     e.MasterStatusInvestasi.id === "3" ? (
       <tr key={e.id}>
+        <td>
+          <Group position="left">
+            <Avatar variant="outline" radius={"xl"} />
+            <Text>{e.author.username}</Text>
+          </Group>
+        </td>
         <td>{e.title}</td>
         <td>
-          {e.MasterStatusInvestasi.id === "3" ? (
-            <Badge variant="dot" color="green">
-              {e.MasterStatusInvestasi.name}
-            </Badge>
-          ) : (
-            "-"
-          )}
+          <Center> {e.progress} %</Center>
         </td>
         <td>
-          <Tooltip label="Detail" withArrow position="bottom">
-            <ActionIcon
-              variant="transparent"
-              onClick={() =>
-                router.push(RouterAdminInvestasi.konfirmasi + `${e.id}`)
-              }
-            >
-              <IconEyeCheck />
-            </ActionIcon>
-          </Tooltip>
+          <Center> {new Intl.NumberFormat("id-ID", {maximumFractionDigits: 10}).format(+e.sisaLembar)}</Center>
+        </td>
+        <td>
+        <Center> {new Intl.NumberFormat("id-ID", {maximumFractionDigits: 10}).format(+e.totalLembar)}</Center>
+
+        </td>
+        <td>
+          <Center>
+            <Tooltip label="Detail" withArrow position="bottom">
+              <ActionIcon
+                variant="transparent"
+                onClick={() =>
+                  router.push(RouterAdminInvestasi.konfirmasi + `${e.id}`)
+                }
+              >
+                <IconEyeCheck color="green" />
+              </ActionIcon>
+            </Tooltip>
+          </Center>
         </td>
       </tr>
     ) : (
@@ -54,26 +71,50 @@ export default function TablePublish({
 
   return (
     <>
-      <Box my={"lg"}>
-        <ScrollArea w={"100%"}>
-          {/* <Title order={5} mb={5}>
+      <Stack>
+        <ActionIcon
+          variant="outline"
+          onClick={() => router.push(RouterAdminInvestasi.main_investasi)}
+        >
+          <IconChevronLeft />
+        </ActionIcon>
+        <Box>
+          <ScrollArea w={"100%"}>
+            {/* <Title order={5} mb={5}>
               List Publish
             </Title> */}
-          <Badge color="green" variant="light" radius={0} size={"xl"}>
-            Publish
-          </Badge>
-          <Table withBorder highlightOnHover>
-            <thead>
-              <tr>
-                <th>Nama Proyek Investasi</th>
-                <th>Status</th>
-                <th>Aksi</th>
-              </tr>
-            </thead>
-            <tbody>{tableBody}</tbody>
-          </Table>
-        </ScrollArea>
-      </Box>
+            <Badge color="green" variant="light" radius={0} size={"xl"}>
+              Publish
+            </Badge>
+            <Table
+              withBorder
+              highlightOnHover
+              verticalSpacing={"md"}
+              horizontalSpacing={"md"}
+            >
+              <thead>
+                <tr>
+                  <th>Username</th>
+                  <th>Nama Proyek Investasi</th>
+                  <th>
+                    <Center>Progres</Center>
+                  </th>
+                  <th>
+                    <Center>Sisa Saham</Center>
+                  </th>
+                  <th>
+                    <Center>Total Saham</Center>
+                  </th>
+                  <th>
+                    <Center>Aksi</Center>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>{tableBody}</tbody>
+            </Table>
+          </ScrollArea>
+        </Box>
+      </Stack>
     </>
   );
 }

src/app_modules/admin/investasi/main/table_reject.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { RouterAdminInvestasi } from "@/app/lib/router_hipmi/router_admin";
 import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
 import {
@@ -7,12 +8,18 @@ import {
   ScrollArea,
   Table,
   Tooltip,
+  Stack,
+  Center,
+  Avatar,
+  Group,
+  Text,
 } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
+import { IconChevronLeft, IconEdit } from "@tabler/icons-react";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function TableReject({
+export default function Admin_TableRejectInvestasi({
   dataInvestsi,
 }: {
   dataInvestsi: MODEL_Investasi[];
@@ -23,28 +30,27 @@ export default function TableReject({
   const tableBody = investasi.map((e) =>
     e.MasterStatusInvestasi.id === "4" ? (
       <tr key={e.id}>
-        <td>{e.title}</td>
         <td>
-          {e.MasterStatusInvestasi.id === "4" ? (
-            <Badge variant="dot" color="red">
-              {e.MasterStatusInvestasi.name}
-            </Badge>
-          ) : (
-            "-"
-          )}
+          <Group position="left">
+            <Avatar variant="outline" radius={"xl"} />
+            <Text>{e.author.username}</Text>
+          </Group>
         </td>
+        <td>{_.capitalize(e.title)}</td>
         <td>{e.catatan}</td>
         <td>
-          <Tooltip label="Konfirmasi" withArrow position="bottom">
-            <ActionIcon
-              variant="transparent"
-              onClick={() =>
-                router.push(RouterAdminInvestasi.konfirmasi + `${e.id}`)
-              }
-            >
-              <IconEdit />
-            </ActionIcon>
-          </Tooltip>
+          <Center>
+            <Tooltip label="Konfirmasi" withArrow position="bottom">
+              <ActionIcon
+                variant="transparent"
+                onClick={() =>
+                  router.push(RouterAdminInvestasi.konfirmasi + `${e.id}`)
+                }
+              >
+                <IconEdit color="green" />
+              </ActionIcon>
+            </Tooltip>
+          </Center>
         </td>
       </tr>
     ) : (
@@ -54,24 +60,36 @@ export default function TableReject({
 
   return (
     <>
-      <Box my={"lg"}>
-        <ScrollArea w={"100%"}>
-          <Badge color="red" variant="light" radius={0} size={"xl"}>
-            Reject
-          </Badge>
-          <Table withBorder highlightOnHover>
-            <thead>
-              <tr>
-                <th>Nama Proyek Investasi</th>
-                <th>Status</th>
-                <th>Catatan</th>
-                <th>Aksi</th>
-              </tr>
-            </thead>
-            <tbody>{tableBody}</tbody>
-          </Table>
-        </ScrollArea>
-      </Box>
+      <Stack>
+        <ActionIcon variant="outline" onClick={() => router.back()}>
+          <IconChevronLeft />
+        </ActionIcon>
+        <Box>
+          <ScrollArea w={"100%"}>
+            <Badge color="red" variant="light" radius={0} size={"xl"}>
+              Reject
+            </Badge>
+            <Table
+              withBorder
+              highlightOnHover
+              verticalSpacing={"md"}
+              horizontalSpacing={"md"}
+            >
+              <thead>
+                <tr>
+                  <th>Username</th>
+                  <th>Nama Proyek Investasi</th>
+                  <th>Catatan</th>
+                  <th>
+                    <Center>Aksi</Center>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>{tableBody}</tbody>
+            </Table>
+          </ScrollArea>
+        </Box>
+      </Stack>
     </>
   );
 }

src/app_modules/admin/investasi/main/table_review.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { RouterAdminInvestasi } from "@/app/lib/router_hipmi/router_admin";
 import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
 import {
@@ -7,12 +8,17 @@ import {
   ScrollArea,
   Table,
   Tooltip,
+  Stack,
+  Group,
+  Avatar,
+  Text,
+  Center,
 } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
+import { IconChevronLeft, IconEdit } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function TableReview({
+export default function Admin_TableReviewInvestasi({
   dataInvestsi,
 }: {
   dataInvestsi: MODEL_Investasi[];
@@ -23,17 +29,28 @@ export default function TableReview({
   const tableBody = investasi.map((e) =>
     e.MasterStatusInvestasi.id === "2" ? (
       <tr key={e.id}>
-        <td>{e.title}</td>
         <td>
-          {e.MasterStatusInvestasi.id === "2" ? (
-            <Badge variant="dot" color="orange">
-              {e.MasterStatusInvestasi.name}
-            </Badge>
-          ) : (
-            "-"
-          )}
+          <Group position="left">
+            <Avatar variant="outline" radius={"xl"} />
+            <Text>{e.author.username}</Text>
+          </Group>
         </td>
         <td>
+          {e.title}
+        </td>
+        <td>
+          <Center>
+            {e.ProspektusInvestasi === null ? (
+              <Badge color="red">Unavailable</Badge>
+            ) : (
+              <Badge variant="dot" color="green">
+                Available
+              </Badge>
+            )}
+          </Center>
+        </td>
+        <td>
+          <Center>
           <Tooltip label="Konfirmasi" withArrow position="bottom">
             <ActionIcon
               variant="transparent"
@@ -41,9 +58,10 @@ export default function TableReview({
                 router.push(RouterAdminInvestasi.konfirmasi + `${e.id}`)
               }
             >
-              <IconEdit />
+              <IconEdit color="green" />
             </ActionIcon>
           </Tooltip>
+          </Center>
         </td>
       </tr>
     ) : (
@@ -52,23 +70,29 @@ export default function TableReview({
   );
   return (
     <>
-      <Box my={"lg"}>
-        <ScrollArea w={"100%"}>
-          <Badge color="orange" variant="light" radius={0} size={"xl"}>
-            Review
-          </Badge>
-          <Table withBorder highlightOnHover>
-            <thead>
-              <tr>
-                <th>Nama Proyek Investasi</th>
-                <th>Status</th>
-                <th>Aksi</th>
-              </tr>
-            </thead>
-            <tbody>{tableBody}</tbody>
-          </Table>
-        </ScrollArea>
-      </Box>
+      <Stack>
+        <ActionIcon variant="outline" onClick={() => router.back()}>
+          <IconChevronLeft />
+        </ActionIcon>
+        <Box>
+          <ScrollArea w={"100%"}>
+            <Badge color="orange" variant="light" radius={0} size={"xl"}>
+              Review
+            </Badge>
+            <Table withBorder highlightOnHover verticalSpacing={"md"} horizontalSpacing={"md"}>
+              <thead>
+                <tr>
+                  <th>Username</th>
+                  <th>Nama Proyek Investasi</th>
+                  <th><Center>File Prospektus</Center></th>
+                  <th><Center>Aksi</Center></th>
+                </tr>
+              </thead>
+              <tbody>{tableBody}</tbody>
+            </Table>
+          </ScrollArea>
+        </Box>
+      </Stack>
     </>
   );
 }

src/app_modules/admin/investasi/main/table_total_investasi.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  Paper,
+  Stack,
+  Center,
+  Title,
+  Table,
+  Group,
+  Avatar,
+} from "@mantine/core";
+
+export default function TableTotalInvestasi({
+  totalInvestasiByUser,
+}: {
+  totalInvestasiByUser: any[];
+}) {
+  return (
+    <>
+      <Paper
+        radius={"md"}
+        bg={"gray.4"}
+
+        p={"sm"}
+        // sx={{ borderStyle: "solid", borderColor: "teal" }}
+      >
+        <Stack spacing={"xl"}>
+          <Center>
+            <Title order={4}>Total Investasi Pengguna</Title>
+          </Center>
+          <Table bg={"gray.2"} sx={{borderRadius: "10px"}}>
+            <thead>
+              <tr>
+                <th>
+                  <Center>Username</Center>
+                </th>
+                <th>
+                  <Center>Total</Center>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {totalInvestasiByUser.map((e) => (
+                <tr key={e.id}>
+                  <td>
+                    <Group>
+                      <Avatar variant="gradient" radius={"xl"} /> {e.username}
+                    </Group>
+                  </td>
+                  <td>
+                    <Center>{e._count.Investasi}</Center>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/admin/investasi/main/view.tsx

@@ -18,12 +18,25 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
+import {
+  IconArrowBadgeRight,
+  IconArrowBigRightLine,
+  IconArrowsMaximize,
+  IconCaretRight,
+  IconChevronsDownRight,
+  IconChevronsRight,
+  IconEdit,
+  IconZoomCheck,
+} from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import TablePublish from "./table_publish";
-import TableReview from "./table_review";
-import TableReject from "./table_reject";
+import Admin_TablePublishInvestasi from "./table_publish";
+import Admin_TableReviewInvestasi from "./table_review";
+import Admin_TableRejectInvestasi from "./table_reject";
+import moment from "moment";
+import _ from "lodash";
+import TableTotalInvestasi from "./table_total_investasi";
+import TablePublikasiProgresInvestasi from "./table_publikasi_progres";
 
 export default function Admin_Investasi({
   listInvestasi,
@@ -32,6 +45,7 @@ export default function Admin_Investasi({
   countPublish,
   countReject,
   totalInvestasiByUser,
+  publishProgres,
 }: {
   listInvestasi: MODEL_Investasi[];
   countDraft: number | any;
@@ -39,6 +53,7 @@ export default function Admin_Investasi({
   countPublish: number | any;
   countReject: number | any;
   totalInvestasiByUser: any[];
+  publishProgres: any[];
 }) {
   const [investasi, setInvestasi] = useState(listInvestasi);
   const router = useRouter();
@@ -48,84 +63,81 @@ export default function Admin_Investasi({
       id: 1,
       name: "Draft",
       jumlah: countDraft,
-      color: "yellow"
+      link: "",
+      color: "yellow",
     },
     {
       id: 2,
       name: "Review",
       jumlah: countReview,
-      color: "orange"
-      
+      link: RouterAdminInvestasi.table_status_review,
+      color: "orange",
     },
     {
       id: 3,
       name: "Publish",
       jumlah: countPublish,
-      color: "green"
-
+      link: RouterAdminInvestasi.table_status_publish,
+      color: "green",
     },
     {
       id: 4,
       name: "Reject",
       jumlah: countReject,
-      color: "red"
-
+      link: RouterAdminInvestasi.table_status_reject,
+      color: "red",
     },
   ];
 
   return (
     <>
-      <Title>Investasi</Title>
-      <Divider mb={"md"} />
-      <Grid mb={"md"}>
-        {listBox.map((e) => (
-          <Grid.Col sm={12} md={6} lg={3} key={e.id}>
-            <Paper 
-            h={100} 
-            p={"xs"} 
-            bg={"gray"}
-            // bg={e.color}
-            >
-              <Center>
-                <Stack spacing={0}>
-                  <Text>{e.name}</Text>
-                  <Center>
-                    <Text fw={"bold"} fz={40}>
-                      {e.jumlah}
-                    </Text>
-                  </Center>
+      <Stack spacing={"sm"}>
+        <Title>Investasi</Title>
+        <Divider mb={"md"} />
+        {/* Status box */}
+        <Grid mb={"md"}>
+          {listBox.map((e) => (
+            <Grid.Col sm={12} md={6} lg={3} key={e.id}>
+              <Paper bg={`${e.color}.1`} p={"xs"} 
+              // sx={{borderStyle: "solid", borderColor: e.color}}
+              >
+                <Stack align="center" justify="center" spacing={0} mb={-35}>
+                  <Text tt={"uppercase"}>{e.name}</Text>
+                  <Text fw={"bold"} fz={50}>
+                    {e.jumlah}
+                  </Text>
                 </Stack>
-              </Center>
-            </Paper>
-          </Grid.Col>
-        ))}
-      </Grid>
+                <Group position="right">
+                  {e.link === "" ? (
+                    <ActionIcon variant="transparent">
+                    {/* <IconChevronsRight color="black" /> */}
+                  </ActionIcon>
+                  ) : (
+                    <ActionIcon variant="transparent" onClick={() => router.push(e.link)}>
+                      <IconChevronsRight color="black" />
+                    </ActionIcon>
+                  )}
+                </Group>
+              </Paper>
+            </Grid.Col>
+          ))}
+        </Grid>
+
+        {/* Table Total & Progres */}
+        <Grid>
+          <Grid.Col sm={12} md={4} lg={4}>
+            <TableTotalInvestasi totalInvestasiByUser={totalInvestasiByUser} />
+          </Grid.Col>
+          <Grid.Col sm={12} md={8} lg={8}>
+            <TablePublikasiProgresInvestasi publishProgres={publishProgres} />
+          </Grid.Col>
+        </Grid>
+      </Stack>
 
-      <Paper w={300}  radius={"md"} p={"sm"} sx={{borderStyle: "solid", borderColor: "teal"}} >
-       <Stack spacing={"xl"}>
-       <Title order={4}>Total Investasi Per User</Title>
-        <Table >
-          <thead>
-            <tr>
-              <th><Center>Username</Center></th>
-              <th><Center>Total</Center></th>
-            </tr>
-          </thead>
-          <tbody>
-            {totalInvestasiByUser.map((e) => (
-              <tr key={e.id}>
-                <td><Group><Avatar variant="light" radius={"xl"}/> {e.username}</Group></td>
-                <td><Center>{e._count.Investasi}</Center></td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-       </Stack>
-      </Paper>
       {/* <TablePublish dataInvestsi={investasi as any} />
       <TableReview dataInvestsi={investasi as any} />
       <TableReject dataInvestsi={investasi as any} /> */}
-      {/* <pre>{JSON.stringify(totalInvestasiByUser, null, 2)}</pre> */}
+      {/* <pre>{JSON.stringify(targetTerbesar, null, 2)}</pre> */}
     </>
   );
 }