feat

Desc:
- Detail portofolio investasi
- Detail saham terbeli
- Berita
- Detail berita
- Detail dokumen
- Detail prospektus
- Edit berita
- Edit dokumen
- Edit prospektus
#No issue

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
+    "@mantine/carousel": "^7.1.5",
     "@mantine/core": "^6.0.17",
     "@mantine/dropzone": "^7.1.3",
     "@mantine/hooks": "^6.0.17",
@@ -23,6 +24,7 @@
     "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.4",
     "autoprefixer": "10.4.14",
+    "embla-carousel-react": "^8.0.0-rc14",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",
     "iron-session": "^6.3.1",
@@ -33,6 +35,7 @@
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-simple-toasts": "^5.10.0",
     "react-toastify": "^9.1.3",
     "socket.io-client": "^4.7.2",

src/app/dev/investasi/berita/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutBeritaInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutBeritaInvestasi>{children}</LayoutBeritaInvestasi>
+    </>
+  );
+}

src/app/dev/investasi/berita/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { BeritaInvestasi } from "@/app_modules/investasi";
+
+export default async function Page({params}: {params: {id: string}}) {
+  return (
+    <>
+      <BeritaInvestasi id={params.id}/>
+    </>
+  );
+}

src/app/dev/investasi/detail/[id]/layout.tsx

@@ -1,8 +1,14 @@
 import { LayoutDetailInvestasi } from "@/app_modules/investasi";
 import React from "react";
 
-export default async function Layout({children}: {children: React.ReactNode}) {
-    return<>
-    <LayoutDetailInvestasi>{children}</LayoutDetailInvestasi>
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailInvestasi>{children}</LayoutDetailInvestasi>
     </>
-}
+  );
+}

src/app/dev/investasi/detail/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { DetailInvestasi } from "@/app_modules/investasi";
 
-export default async function Page() {
+export default async function Page({params}: {params: {id: string}}) {
     return<>
-    <DetailInvestasi/>
+    <DetailInvestasi id={params.id}/>
     </>
 }

src/app/dev/investasi/detail_berita/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailBeritaInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailBeritaInvestasi>{children}</LayoutDetailBeritaInvestasi>
+    </>
+  );
+}

src/app/dev/investasi/detail_berita/[id]/page.tsx

@@ -0,0 +1,7 @@
+import { DetailBeritaInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return <>
+    <DetailBeritaInvestasi/>
+    </>
+}

src/app/dev/investasi/detail_dokumen/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutDetailDokumenInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDetailDokumenInvestasi>{children}</LayoutDetailDokumenInvestasi>
+    </>
+  );
+}

src/app/dev/investasi/detail_dokumen/[id]/page.tsx

@@ -0,0 +1,7 @@
+import { DetailDokumenInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <DetailDokumenInvestasi/>
+    </>
+}

src/app/dev/investasi/detail_porto/[id]/page.tsx

@@ -2,6 +2,6 @@ import { PortofolioDetailInvestasi } from "@/app_modules/investasi";
 
 export default async function Page({params} : {params: {id: string}}) {
     return<>
-    <PortofolioDetailInvestasi/>
+    <PortofolioDetailInvestasi id={params.id}/>
     </>
 }

src/app/dev/investasi/detail_prospektus/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutDetailPropektus } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutDetailPropektus>{children}</LayoutDetailPropektus>
+    </>
+}

src/app/dev/investasi/detail_prospektus/[id]/page.tsx

@@ -0,0 +1,7 @@
+import { DetailPropektus } from "@/app_modules/investasi";
+
+export default async function Page(params:any) {
+    return<>
+    <DetailPropektus/>
+    </>
+}

src/app/dev/investasi/detail_saham_terbeli/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutDetailSahamTerbeli } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutDetailSahamTerbeli>{children}</LayoutDetailSahamTerbeli>
+    </>
+}

src/app/dev/investasi/detail_saham_terbeli/[id]/page.tsx

@@ -0,0 +1,5 @@
+import { DetailSahamTerbeli } from "@/app_modules/investasi";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  return <DetailSahamTerbeli id={params.id} />;
+}

src/app/dev/investasi/edit_berita/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutEditBeritaInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({children}: { children: React.ReactNode }) {
+    return<>
+    <LayoutEditBeritaInvestasi>{children}</LayoutEditBeritaInvestasi>
+    </>
+}

src/app/dev/investasi/edit_berita/[id]/page.tsx

@@ -0,0 +1,7 @@
+import { EditBeritaInvestasi } from "@/app_modules/investasi";
+
+export default async function Page(params:any) {
+    return<>
+    <EditBeritaInvestasi/>
+    </>
+}

src/app/dev/investasi/edit_dokumen/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutEditDokumenInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutEditDokumenInvestasi>{children}</LayoutEditDokumenInvestasi>
+    </>
+}

src/app/dev/investasi/edit_dokumen/[id]/page.tsx

@@ -0,0 +1,7 @@
+import { EditDokumenInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <EditDokumenInvestasi/>
+    </>
+}

src/app/dev/investasi/edit_prospektus/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutEditProspektusInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutEditProspektusInvestasi>{children}</LayoutEditProspektusInvestasi>
+    </>
+}

src/app/dev/investasi/edit_prospektus/[id]/page.tsx

@@ -0,0 +1,7 @@
+import { EditProspektusInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <EditProspektusInvestasi/>
+    </>
+}

src/app/lib/app_route.ts

@@ -0,0 +1,14 @@
+export const RouteInvestasi = {
+  //INVESTASI
+  // edit //
+  edit_intro: "/dev/investasi/edit_intro/",
+  edit_prospektus: "/dev/investasi/edit_prospektus/",
+  edit_dokumen: "/dev/investasi/edit_dokumen/",
+  edit_berita: "/dev/investasi/edit_berita/",
+  // detail //
+  berita: "/dev/investasi/berita/",
+  detail_saham_terbeli: "/dev/investasi/detail_saham_terbeli/",
+  detail_prospektus: "/dev/investasi/detail_prospektus/",
+  detail_dokumen: "/dev/investasi/detail_dokumen/",
+  detail_berita: "/dev/investasi/detail_berita/",
+};

src/app_modules/investasi/berita/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutBeritaInvestasi({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    return (
+      <>
+        <AppShell header={<HeaderTamplate title="Berita" />}>
+          {children}
+        </AppShell>
+      </>
+    );
+  }

src/app_modules/investasi/berita/view.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { RouteInvestasi } from "@/app/lib/app_route";
+import { AspectRatio, Grid, Image, Paper, Text, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+export default function BeritaInvestasi({id}: {id: string}) {
+    const router = useRouter()
+  return (
+    <>
+      <Paper h={100} w={"100%"} bg={"gray"} p={"sm"} onClick={() => router.push(RouteInvestasi.detail_berita + `${id}`)}>
+        <Title order={6}>Judul berita</Title>
+        <Grid pt={5}>
+          <Grid.Col span={8}>
+            <Text fz={12}>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+            </Text>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <AspectRatio ratio={16 / 9} h={50} w={100}>
+              <Image alt="" src={"/aset/no-img.png"} />
+            </AspectRatio>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/detail/view.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { RouteInvestasi } from "@/app/lib/app_route";
 import { Warna } from "@/app/lib/warna";
 import {
   ActionIcon,
@@ -25,26 +26,26 @@ import {
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
-export default function DetailInvestasi() {
+export default function DetailInvestasi({id}: {id: string}) {
   const router = useRouter();
   const listBox = [
     {
       id: 1,
       name: "Prospektus",
       icon: <IconBookDownload size={70} />,
-      route: "",
+      route: RouteInvestasi.detail_prospektus,
     },
     {
       id: 2,
       name: "Dokumen",
       icon: <IconFileDescription size={70} />,
-      route: "",
+      route: RouteInvestasi.detail_dokumen
     },
     {
       id: 3,
       name: "Berita",
       icon: <IconSpeakerphone size={70} />,
-      route: "",
+      route: RouteInvestasi.berita,
     },
   ];
 
@@ -124,7 +125,7 @@ export default function DetailInvestasi() {
       {/* List Box */}
       <Grid mb={"md"}>
         {listBox.map((e) => (
-          <Grid.Col span={"auto"} key={e.id}>
+          <Grid.Col span={"auto"} key={e.id} onClick={() => router.push(e.route + `${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>

src/app_modules/investasi/detail_berita/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutDetailBeritaInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Detail Berita" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_berita/view.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { Text } from "@mantine/core"
+
+export default function DetailBeritaInvestasi(){
+    return<>
+    <Text>Berita</Text>
+    
+    </>
+}

src/app_modules/investasi/detail_dokumen/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutDetailDokumenInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Dokumen" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_dokumen/view.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { Paper, Grid, Center, Text } from "@mantine/core"
+import { IconChevronRight } from "@tabler/icons-react"
+import Link from "next/link"
+
+export default function DetailDokumenInvestasi(){
+    return<>
+     <Link
+          href={"https://pii.or.id/uploads/dummies.pdf"}
+          target="_blank"
+          style={{ textDecorationLine: "none" }}
+        >
+          <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+            <Grid
+              align="center"
+              justify="center"
+              h={50}
+              px={"sm"}
+              onClick={() => ""}
+            >
+              <Grid.Col span={10}>
+                <Text>Nama File.pdf</Text>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Center>
+                  <IconChevronRight />
+                </Center>
+              </Grid.Col>
+            </Grid>
+          </Paper>
+        </Link>
+    
+    </>
+}

src/app_modules/investasi/detail_porto/layout.tsx

@@ -21,7 +21,7 @@ export default function LayoutPortofolioDetailInvestasi({
       <AppShell
         header={
           <HeaderTamplate
-            title="Detail Porto"
+            title="Portofolio Investasi"
             icon={<IconEdit />}
             route2={`/dev/investasi/edit/${id}`}
           />

src/app_modules/investasi/detail_porto/view.tsx

@@ -1,9 +1,11 @@
 "use client";
+import { RouteInvestasi } from "@/app/lib/app_route";
 import {
   ActionIcon,
   AspectRatio,
   Avatar,
   Box,
+  Center,
   Flex,
   Grid,
   Group,
@@ -21,37 +23,40 @@ import {
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
-export default function PortofolioDetailInvestasi() {
+export default function PortofolioDetailInvestasi({id}: {id: string}) {
   const router = useRouter();
   const listBox = [
     {
       id: 1,
       name: "Prospektus",
       icon: <IconBookDownload size={70} />,
-      route: "",
+      route: RouteInvestasi.edit_prospektus,
     },
     {
       id: 2,
       name: "Dokumen",
       icon: <IconFileDescription size={70} />,
-      route: "",
+      route: RouteInvestasi.edit_dokumen,
     },
     {
       id: 3,
       name: "Berita",
       icon: <IconSpeakerphone size={70} />,
-      route: "",
+      route: RouteInvestasi.edit_berita,
     },
   ];
   return (
     <>
-      <Group position="apart" mb={"md"}>
+      {/* <Group position="apart" mb={"md"}>
         <Flex align={"center"} gap={"xs"}>
           <Avatar src={"/aset/avatar.png"} />
           <Text>Username</Text>
         </Flex>
         <Text>Sisa waktu : 20 Hari</Text>
-      </Group>
+      </Group> */}
+      <Center mb={'sm'}>
+      <Text>Sisa waktu : 20 Hari</Text>
+      </Center>
 
       <Paper withBorder mb={"md"}>
         <AspectRatio ratio={16 / 9}>
@@ -117,9 +122,9 @@ export default function PortofolioDetailInvestasi() {
       </Grid>
 
       {/* List Box */}
-      <Grid mb={"md"}>
+      {/* <Grid mb={"md"}>
         {listBox.map((e) => (
-          <Grid.Col span={"auto"} key={e.id}>
+          <Grid.Col span={"auto"} key={e.id} onClick={() => router.push(e.route + `${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>
@@ -130,7 +135,7 @@ export default function PortofolioDetailInvestasi() {
             </Paper>
           </Grid.Col>
         ))}
-      </Grid>
+      </Grid> */}
     </>
   );
 }

src/app_modules/investasi/detail_prospektus/layout.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import router from "next/router";
+import { title } from "process";
+import React from "react";
+
+export default function LayoutDetailProspektus({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Prospektus" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_prospektus/view.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Paper, Grid, Center, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+
+export default function DetailPropektus() {
+  return (
+    <>
+      <Link
+        href={"https://pii.or.id/uploads/dummies.pdf"}
+        target="_blank"
+        style={{ textDecorationLine: "none" }}
+      >
+        <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+          <Grid
+            align="center"
+            justify="center"
+            h={50}
+            px={"sm"}
+            onClick={() => ""}
+          >
+            <Grid.Col span={10}>
+              <Text>Nama File.pdf</Text>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Center>
+                <IconChevronRight />
+              </Center>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      </Link>
+    </>
+  );
+}

src/app_modules/investasi/detail_saham_terbeli/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutDetailSahamTerbeli({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Saham Terbeli" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_saham_terbeli/view.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { RouteInvestasi } from "@/app/lib/app_route";
+import { Warna } from "@/app/lib/warna";
+import {
+  ActionIcon,
+  AspectRatio,
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Slider,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconBookDownload,
+  IconFileDescription,
+  IconSpeakerphone,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function DetailSahamTerbeli({id}: {id: string}) {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouteInvestasi.detail_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouteInvestasi.detail_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouteInvestasi.detail_berita,
+    },
+  ];
+  return (
+    <>
+      <Group position="apart" mb={"md"}>
+        <Flex align={"center"} gap={"xs"}>
+          <Avatar src={"/aset/avatar.png"} />
+          <Text>Username</Text>
+        </Flex>
+        <Text>Sisa waktu : 20 Hari</Text>
+      </Group>
+
+      {/* Gambar Investasi */}
+      <Paper withBorder mb={"md"}>
+        <AspectRatio ratio={16 / 9}>
+          <Image alt="" src={"/aset/no-img.png"} />
+        </AspectRatio>
+      </Paper>
+
+      {/* Title dan Persentase */}
+      <Box mb={"md"}>
+        <Title order={4} mb={"xs"}>
+          Judul Proyek
+        </Title>
+        <Slider
+          disabled
+          size={10}
+          value={60}
+          marks={[{ value: 60, label: "60%" }]}
+        />
+      </Box>
+
+      {/* Rincian Data */}
+      <Grid p={"md"}>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Terkumpul</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Dana Dibutuhkan</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Harga Per Lembar</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Jadwal Pembagian</Text>
+              <Text>3 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>
+            </Box>
+            <Box>
+              <Text>Total Lembar</Text>
+              <Text>0</Text>
+            </Box>
+            <Box>
+              <Text>Pembagian Deviden</Text>
+              <Text>Selamanya</Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+
+      <Divider my={"md"} />
+
+      {/* Saham Terbeli */}
+      <Box>
+        <Center>
+          <Title order={5}>Saham Anda</Title>
+        </Center>
+        <Grid p={"md"}>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>Total Pembelian</Text>
+                <Text>Rp. 0</Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>Lembar Dibeli</Text>
+                <Text>100</Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+      </Box>
+
+      {/* List Box */}
+      <Grid mb={"sm"} justify="center">
+        {listBox.map((e) => (
+          <Grid.Col span={"auto"} key={e.id} onClick={() => router.push(e.route + `${id}`)}>
+            <Center>
+              <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
+                <Flex direction={"column"} align={"center"} justify={"center"}>
+                  <Text fz={12}>{e.name}</Text>
+                  <ActionIcon variant="transparent" size={60}>
+                    {e.icon}
+                  </ActionIcon>
+                </Flex>
+              </Paper>
+            </Center>
+          </Grid.Col>
+        ))}
+      </Grid>
+    </>
+  );
+}

src/app_modules/investasi/edit/view.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { RouteInvestasi } from "@/app/lib/app_route";
 import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -10,22 +11,22 @@ export default function EditInvestasi({id}:{id:string}) {
     {
       id: 1,
       name: "Intro",
-      route: "/dev/investasi/edit_intro/",
+      route: RouteInvestasi.edit_intro,
     },
     {
       id: 2,
       name: "Prospektus",
-      route: "",
+      route: RouteInvestasi.edit_prospektus,
     },
     {
       id: 3,
       name: "Dokumen",
-      route: "",
+      route: RouteInvestasi.edit_dokumen,
     },
     {
       id: 4,
       name: "Berita",
-      route: "",
+      route: RouteInvestasi.edit_berita,
     },
   ];
   return (

src/app_modules/investasi/edit_berita/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutEditBeritaInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Edit Berita" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/edit_berita/view.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { Text } from "@mantine/core"
+
+export default function EditBeritaInvestasi(){
+    return<>
+    <Text>Berita</Text>
+    
+    </>
+}

src/app_modules/investasi/edit_dokumen/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutEditDokumenInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Edit Dokumen" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/edit_dokumen/view.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { Paper, Grid, Center, Title, Divider, Button, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function EditDokumenInvestasi(){
+    const [edit, setEdit] = useState(false);
+
+  return (
+    <>
+      {edit ? (
+        <Link
+          href={"https://pii.or.id/uploads/dummies.pdf"}
+          target="_blank"
+          style={{ textDecorationLine: "none" }}
+        >
+          <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+            <Grid
+              align="center"
+              justify="center"
+              h={50}
+              px={"sm"}
+              onClick={() => ""}
+            >
+              <Grid.Col span={10}>
+                <Text>Nama File.pdf</Text>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Center>
+                  <IconChevronRight />
+                </Center>
+              </Grid.Col>
+            </Grid>
+          </Paper>
+        </Link>
+      ) : (
+        <Center>
+          <Title order={4}>Tidak ada file</Title>
+        </Center>
+      )}
+
+      <Divider mt={"lg"} />
+
+      <Center>
+        <Button mt={"md"} compact radius={50}>
+          Upload
+        </Button>
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/edit_intro/view.tsx

@@ -10,44 +10,6 @@ import { useState } from "react";
 export default function EditIntroInvestasi() {
   const router = useRouter()
   const [edit, setEdit] = useState(true);
-  // return (
-  //   <>
-  //     {edit ? (
-  //      <Link href={"https://pii.or.id/uploads/dummies.pdf"} target="_blank" style={{textDecorationLine: "none"}}>
-  //       <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
-  //         <Grid
-  //           align="center"
-  //           justify="center"
-  //           h={50}
-  //           px={"sm"}
-  //           onClick={() => ""}
-  //         >
-  //           <Grid.Col span={10}>
-  //             <Text>Nama File.pdf</Text>
-  //           </Grid.Col>
-  //           <Grid.Col span={2}>
-  //             <Center>
-  //               <IconChevronRight />
-  //             </Center>
-  //           </Grid.Col>
-  //         </Grid>
-  //       </Paper>
-  //      </Link>
-  //     ) : (
-  //       <Center>
-  //         <Title order={4}>Tidak ada file</Title>
-  //       </Center>
-  //     )}
-
-  //     <Divider mt={"lg"}/>
-
-  //     <Center>
-  //       <Button mt={"md"} compact radius={50}>
-  //         Upload
-  //       </Button>
-  //     </Center>
-  //   </>
-  // );
   const [img, setImg] = useState<any | null>();
   const [value, setValue] = useState({
     title: "",
@@ -189,6 +151,7 @@ export default function EditIntroInvestasi() {
         <Center my={"lg"}>
           <Button w={200} radius={50}
           //  onClick={() => onSubmit() }
+          onClick={() => router.back()}
           >
             Update
           </Button>

src/app_modules/investasi/edit_propektus/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutEditProspektusInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Edit Prospektus" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/edit_propektus/view.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  Paper,
+  Grid,
+  Center,
+  Title,
+  Divider,
+  Button,
+  Text,
+} from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function EditProspektusInvestasi() {
+  const [edit, setEdit] = useState(true);
+
+  return (
+    <>
+      {edit ? (
+        <Link
+          href={"https://pii.or.id/uploads/dummies.pdf"}
+          target="_blank"
+          style={{ textDecorationLine: "none" }}
+        >
+          <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+            <Grid
+              align="center"
+              justify="center"
+              h={50}
+              px={"sm"}
+              onClick={() => ""}
+            >
+              <Grid.Col span={10}>
+                <Text>Nama File.pdf</Text>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Center>
+                  <IconChevronRight />
+                </Center>
+              </Grid.Col>
+            </Grid>
+          </Paper>
+        </Link>
+      ) : (
+        <Center>
+          <Title order={4}>Tidak ada file</Title>
+        </Center>
+      )}
+
+      <Divider mt={"lg"} />
+
+      <Center>
+        <Button mt={"md"} compact radius={50}>
+          Upload
+        </Button>
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/index.ts

@@ -12,12 +12,28 @@ import UploadBuktiTransferInvestasi from "./upload_bukti/view";
 import LayoutBuktiTransferInvestasi from "./upload_bukti/layout";
 import KonfirmasiBuktiInvestasi from "./konfirmasi/view";
 import PortofolioInvestasi from "./portofolio/view";
-import PortofolioDetailInvestasi from "./porto_detail/view";
-import LayoutPortofolioDetailInvestasi from "./porto_detail/layout";
+import PortofolioDetailInvestasi from "./detail_porto/view";
+import LayoutPortofolioDetailInvestasi from "./detail_porto/layout";
 import EditInvestasi from "./edit/view";
 import LayoutEditInvestasi from "./edit/layout";
 import EditIntroInvestasi from "./edit_intro/view";
 import LayoutEditIntroInvestasi from "./edit_intro/layout";
+import EditProspektusInvestasi from "./edit_propektus/view";
+import LayoutEditProspektusInvestasi from "./edit_propektus/layout";
+import EditDokumenInvestasi from "./edit_dokumen/view";
+import LayoutEditDokumenInvestasi from "./edit_dokumen/layout";
+import EditBeritaInvestasi from "./edit_berita/view";
+import LayoutEditBeritaInvestasi from "./edit_berita/layout";
+import DetailSahamTerbeli from "./detail_saham_terbeli/view";
+import LayoutDetailSahamTerbeli from "./detail_saham_terbeli/layout";
+import DetailPropektus from "./detail_prospektus/view";
+import LayoutDetailPropektus from "./detail_prospektus/layout";
+import DetailDokumenInvestasi from "./detail_dokumen/view";
+import LayoutDetailDokumenInvestasi from "./detail_dokumen/layout";
+import DetailBeritaInvestasi from "./detail_berita/view";
+import LayoutDetailBeritaInvestasi from "./detail_berita/layout";
+import BeritaInvestasi from "./berita/view";
+import LayoutBeritaInvestasi from "./berita/layout";
 
 export {
   MainInvestasi,
@@ -40,4 +56,21 @@ export {
   LayoutEditInvestasi,
   EditIntroInvestasi,
   LayoutEditIntroInvestasi,
+  EditProspektusInvestasi,
+  LayoutEditProspektusInvestasi,
+  EditDokumenInvestasi,
+  LayoutEditDokumenInvestasi,
+  EditBeritaInvestasi,
+  LayoutEditBeritaInvestasi,
+  DetailSahamTerbeli,
+  LayoutDetailSahamTerbeli,
+  DetailPropektus,
+  LayoutDetailPropektus,
+  DetailDokumenInvestasi,
+  LayoutDetailDokumenInvestasi,
+  DetailBeritaInvestasi,
+  LayoutDetailBeritaInvestasi,
+  BeritaInvestasi,
+  LayoutBeritaInvestasi as LayoutBeritaInvestasi,
 };
+

src/app_modules/investasi/main/view.tsx

@@ -101,7 +101,7 @@ export default function MainInvestasi({
             {(() => {
               if (
                 e.masterPencarianInvestorId -
-                  moment(new Date()).diff(new Date(e.createdAt), "days") ===
+                  moment(new Date()).diff(new Date(e.createdAt), "days") <=
                 0
               ) {
                 return (

src/app_modules/investasi/portofolio/view.tsx

@@ -1,105 +1,255 @@
-"use client"
+"use client";
 
-import { AspectRatio, Box, Card, CardSection, Divider, Grid, Group, Image, Slider, Stack, Text, Title } from "@mantine/core"
-import dataDummy from "../dummy/data_dummy.json"
-import moment from "moment"
-import { useRouter } from "next/navigation"
-import { IconCircleCheck } from "@tabler/icons-react"
+import {
+  AspectRatio,
+  Avatar,
+  Box,
+  Button,
+  Card,
+  CardSection,
+  Collapse,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Slider,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import dataDummy from "../dummy/data_dummy.json";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { IconCaretDown, IconCircleCheck } from "@tabler/icons-react";
+import { useState } from "react";
 
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel } from "react-responsive-carousel";
+import { useDisclosure } from "@mantine/hooks";
+import { Warna } from "@/app/lib/warna";
+import { RouteInvestasi } from "@/app/lib/app_route";
 
-export default  function PortofolioInvestasi() {
-    const router = useRouter()
-    return<>
-    
-     {dataDummy.map((e) => (
-        <Card key={e.id}  withBorder mb={"lg"} onClick={() => router.push(`/dev/investasi/porto_detail/${e.id}`)}>
-          <CardSection p={"xs"}>
-            <AspectRatio ratio={16 / 9}>
-              {/* {e.imagesId ? (
+export default function PortofolioInvestasi() {
+  const router = useRouter();
+  return (
+    <>
+      <MyPortofolioInvestasi />
+      <SahamTerbeli />
+    </>
+  );
+}
+
+function MyPortofolioInvestasi() {
+  const [opened, { toggle }] = useDisclosure(false);
+  const router = useRouter();
+
+  return (
+    <Box mx="auto">
+      <Paper mb={5} onClick={toggle} bg={Warna.biru} px={"md"} h={40}>
+        <Group position="apart" align="center" h={40}>
+          <Title order={6}>Portofolio Saya</Title>
+          <IconCaretDown />
+        </Group>
+      </Paper>
+
+      <Collapse in={opened} transitionDuration={700}>
+        {dataDummy.map((e) => (
+          <Card
+            key={e.id}
+            withBorder
+            mb={"lg"}
+            onClick={() => router.push(`/dev/investasi/detail_porto/${e.id}`)}
+          >
+            <CardSection p={"xs"}>
+              <AspectRatio ratio={16 / 9}>
+                {/* {e.imagesId ? (
                 <Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
               ) : (
                 <Image alt="" src={"/aset/no-img.png"} />
               )} */}
                 <Image alt="" src={"/aset/no-img.png"} />
+              </AspectRatio>
+            </CardSection>
 
-            </AspectRatio>
-          </CardSection>
-
-          <CardSection p={"lg"}>
-            <Box mt={"md"}>
-              <Slider
-                size={10}
-                disabled
-                labelAlwaysOn
-                value={e.persentase}
-                marks={
-                  [
-                    {value: e.persentase, label: e.persentase + `%`}
-                  ]
+            <CardSection p={"lg"}>
+              <Box mt={"md"}>
+                <Slider
+                  size={10}
+                  disabled
+                  labelAlwaysOn
+                  value={e.persentase}
+                  marks={[{ value: e.persentase, label: e.persentase + `%` }]}
+                />
+                <Title order={4}>{e.title}</Title>
+              </Box>
+            </CardSection>
+            <Divider />
+            <CardSection p={"md"}>
+              {(() => {
+                if (
+                  e.masterPencarianInvestorId -
+                    moment(new Date()).diff(new Date(e.createdAt), "days") ===
+                  0
+                ) {
+                  return (
+                    <>
+                      <Group position="right">
+                        <IconCircleCheck />
+                        <Text>Selesai</Text>
+                      </Group>
+                    </>
+                  );
+                } else {
+                  return (
+                    <>
+                      <Group position="right" spacing={"xs"}>
+                        <Text>Sisa waktu:</Text>
+                        <Text>
+                          {e.masterPencarianInvestorId -
+                            moment(new Date()).diff(
+                              new Date(e.createdAt),
+                              "days"
+                            )}
+                        </Text>
+                        <Text>Hari</Text>
+                      </Group>
+                    </>
+                  );
                 }
-              />
-              <Title order={4}>{e.title}</Title>
-            </Box>
-            <Box mt={"md"}>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Stack>
-                    <Box>
-                      <Text>Dana Dibutuhkan</Text>
-                      <Text>Rp. {e.targetDana}</Text>
-                    </Box>
-                    <Box>
-                      <Text>Harga Per Lembar</Text>
-                      <Text>Rp. {e.hargaLembar}</Text>
-                    </Box>
-                  </Stack>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Stack>
-                    <Box>
-                      <Text>ROI</Text>
-                      <Text>{e.roi}%</Text>
-                    </Box>
-                    <Box>
-                      <Text>Total Lembar</Text>
-                      <Text>{e.totalLembar}</Text>
-                    </Box>
-                  </Stack>
-                </Grid.Col>
-              </Grid>
-            </Box>
-          </CardSection>
-          <Divider />
-          <CardSection p={"md"}>
-          {(() => {
-              if (
-                e.masterPencarianInvestorId -
-                  moment(new Date()).diff(new Date(e.createdAt), "days") ===
-                0
-              ) {
-                return (
-                  <>
-                    <Group position="right">
-                    <IconCircleCheck/>
-                    <Text>Selesai</Text>
-                    </Group>
-                  </>
-                );
-              } else {
-                return<>
-                <Group position="right" spacing={"xs"}>
-                  <Text>Sisa waktu:</Text>
-                  <Text>
-                    {e.masterPencarianInvestorId -
-                      moment(new Date()).diff(new Date(e.createdAt), "days")}
-                  </Text>
-                  <Text>Hari</Text>
-                </Group>
-                </>
+              })()}
+            </CardSection>
+          </Card>
+        ))}
+      </Collapse>
+    </Box>
+  );
+}
+
+function SahamTerbeli() {
+  const router = useRouter();
+  const [opened, { toggle }] = useDisclosure(true);
+
+  return (
+    <>
+      <Box maw={400} mx="auto">
+        <Paper mb={5} onClick={toggle} bg={Warna.hijau_tua} px={"md"} h={40}>
+          <Group position="apart" align="center" h={40}>
+            <Title order={6}>Saham Saya</Title>
+            <IconCaretDown />
+          </Group>
+        </Paper>
+
+        <Collapse in={opened} transitionDuration={700}>
+          {dataDummy.map((e) => (
+            <Card
+              key={e.id}
+              withBorder
+              mb={"lg"}
+              onClick={() =>
+                router.push(RouteInvestasi.detail_saham_terbeli + `${e.id}`)
               }
-            })()}
-          </CardSection>
-        </Card>
-      ))}
+            >
+              <CardSection>
+                <Group position="left" mt={"sm"} px={"md"}>
+                  <Flex align={"center"} gap={"xs"}>
+                    <Avatar src={"/aset/avatar.png"} />
+                    <Text>Username</Text>
+                  </Flex>
+                 
+                </Group>
+              </CardSection>
+              <CardSection p={"xs"}>
+                <AspectRatio ratio={16 / 9}>
+                  {/* {e.imagesId ? (
+                    <Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
+                  ) : (
+                    <Image alt="" src={"/aset/no-img.png"} />
+                  )} */}
+                  <Image alt="" src={"/aset/no-img.png"} />
+                </AspectRatio>
+              </CardSection>
+
+              <CardSection p={"lg"}>
+                <Box mt={"md"}>
+                  <Slider
+                    size={10}
+                    disabled
+                    labelAlwaysOn
+                    value={e.persentase}
+                    marks={[{ value: e.persentase, label: e.persentase + `%` }]}
+                  />
+                  <Title order={4}>{e.title}</Title>
+                </Box>
+                <Box mt={"md"}>
+                  <Grid>
+                    <Grid.Col span={6}>
+                      <Stack>
+                        <Box>
+                          <Text>Dana Dibutuhkan</Text>
+                          <Text>Rp. {e.targetDana}</Text>
+                        </Box>
+                        <Box>
+                          <Text>Harga Per Lembar</Text>
+                          <Text>Rp. {e.hargaLembar}</Text>
+                        </Box>
+                      </Stack>
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <Stack>
+                        <Box>
+                          <Text>ROI</Text>
+                          <Text>{e.roi}%</Text>
+                        </Box>
+                        <Box>
+                          <Text>Total Lembar</Text>
+                          <Text>{e.totalLembar}</Text>
+                        </Box>
+                      </Stack>
+                    </Grid.Col>
+                  </Grid>
+                </Box>
+              </CardSection>
+              <Divider />
+              <CardSection p={"md"}>
+                {(() => {
+                  if (
+                    e.masterPencarianInvestorId -
+                      moment(new Date()).diff(new Date(e.createdAt), "days") ===
+                    0
+                  ) {
+                    return (
+                      <>
+                        <Group position="right">
+                          <IconCircleCheck />
+                          <Text>Selesai</Text>
+                        </Group>
+                      </>
+                    );
+                  } else {
+                    return (
+                      <>
+                        <Group position="right" spacing={"xs"}>
+                          <Text>Sisa waktu:</Text>
+                          <Text>
+                            {e.masterPencarianInvestorId -
+                              moment(new Date()).diff(
+                                new Date(e.createdAt),
+                                "days"
+                              )}
+                          </Text>
+                          <Text>Hari</Text>
+                        </Group>
+                      </>
+                    );
+                  }
+                })()}
+              </CardSection>
+            </Card>
+          ))}
+        </Collapse>
+      </Box>
     </>
-}
+  );
+}

src/app_modules/investasi/proses_investasi/view.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { useCounter } from "@mantine/hooks";
+import { useCounter, useShallowEffect } from "@mantine/hooks";
 import {
   IconMinus,
   IconNumber10Small,
@@ -22,19 +22,21 @@ import {
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import toast from "react-simple-toasts";
 
 export default function ProsesInvestasi() {
-  const [count, handlers] = useCounter(0, { min: 1, max: 100 });
+  const router = useRouter();
+  const [count, handlers] = useCounter(0, { min: 1, max: 1000 });
   const [hargaLembar, setHargaLembar] = useState(1000);
-  const router = useRouter()
 
-//   const formatter = new Intl.NumberFormat("", {
-//     style: 'currency',
-//     currency: 'RP',
-  
-//   });
-  
 
+  //   const formatter = new Intl.NumberFormat("", {
+  //     style: 'currency',
+  //     currency: 'RP',
+
+  //   });
+
+  
 
   return (
     <>
@@ -46,14 +48,6 @@ export default function ProsesInvestasi() {
               <IconRefresh />
             </ActionIcon>
 
-            <ActionIcon
-              variant="filled"
-              radius={50}
-              onClick={handlers.increment}
-            >
-              <IconPlus />
-            </ActionIcon>
-            <Text>{count}</Text>
             <ActionIcon
               variant="filled"
               radius={50}
@@ -61,10 +55,19 @@ export default function ProsesInvestasi() {
             >
               <IconMinus />
             </ActionIcon>
+            {/* Jumlah saham  */}
+            <Text>{count}</Text>
             <ActionIcon
               variant="filled"
               radius={50}
-              onClick={() => handlers.set(100)}
+              onClick={handlers.increment}
+            >
+              <IconPlus />
+            </ActionIcon>
+            <ActionIcon
+              variant="filled"
+              radius={50}
+              onClick={() => handlers.set(1000)}
             >
               <IconNumber10Small />
             </ActionIcon>
@@ -82,7 +85,22 @@ export default function ProsesInvestasi() {
           <Text fz={25}>Rp.{hargaLembar * count} </Text>
         </Group>
         <Center>
-            <Button w={350} radius={50} bg={Warna.biru} onClick={()=>router.push("/dev/investasi/upload_bukti") }>Proses</Button>
+          <Button
+            w={350}
+            radius={50}
+            bg={Warna.biru}
+            onClick={() => {
+             
+              if(hargaLembar * count === 1000){
+                return toast("Minimal pembelian 10.000")
+              } else {
+                router.push("/dev/investasi/upload_bukti");
+                localStorage.setItem("total_harga", (hargaLembar * count) as any)
+              }
+            }}
+          >
+            Proses
+          </Button>
         </Center>
       </Box>
     </>

src/app_modules/investasi/upload_bukti/view.tsx

@@ -21,6 +21,8 @@ export default function UploadBuktiTransferInvestasi() {
   const router = useRouter()
   const [fl, setFl] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>(null);
+
+  const totalHarga = localStorage.getItem("total_harga")
   return (
     <>
       <Grid align="center">
@@ -50,7 +52,7 @@ export default function UploadBuktiTransferInvestasi() {
           <Text>Total Harga</Text>
         </Grid.Col>
         <Grid.Col span={"auto"}>
-          <Text>Rp. 100.000</Text>
+          <Text>Rp. {totalHarga}</Text>
         </Grid.Col>
         <Grid.Col span={"auto"}></Grid.Col>
       </Grid>