feat:

- Tampilan buat berita
- Tampilan dialog page buat proyek investasi
- Tampilan list edit beritq
- # No issue
fix:
- Perubahan minor

package.json

@@ -34,6 +34,7 @@
     "next": "^13.5.4-canary.8",
     "postcss": "8.4.27",
     "react": "18.2.0",
+    "react-countdown": "^2.3.5",
     "react-dom": "18.2.0",
     "react-responsive-carousel": "^3.2.23",
     "react-simple-toasts": "^5.10.0",

src/app/dev/investasi/create_berita/layout.tsx

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

src/app/dev/investasi/create_berita/page.tsx

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

src/app/dev/investasi/dialog_page/create/layout.tsx

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

src/app/dev/investasi/dialog_page/create/page.tsx

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

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

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

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

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

src/app/lib/router_hipmi/router_investasi.ts

@@ -1,11 +1,12 @@
 export const RouterInvestasi = {
   //INVESTASI
   transfer: "/dev/investasi/transfer",
-  dialog_page: "/dev/investasi/dialog_page",
-  status_transaksi: "/dev/investasi/status_transaksi",
+  dialog_transaksi: "/dev/investasi/dialog_page/transaksi_saham",
+  dialog_create: "/dev/investasi/dialog_page/create",
   // portofolio
   portofolio: "/dev/investasi/main/portofolio",
   // proses beli saham
+  status_transaksi: "/dev/investasi/status_transaksi",
   metode_transfer: "/dev/investasi/metode_transfer",
   // edit //
   edit_intro: "/dev/investasi/edit_intro/",
@@ -13,9 +14,12 @@ export const RouterInvestasi = {
   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/",
+  // berita
+  berita: "/dev/investasi/berita/",
+  create_berita: "/dev/investasi/create_berita",
+  list_edit_berita: "/dev/investasi/list_edit_berita/"
 };

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

@@ -3,10 +3,12 @@
 import { RouterAdminInvestasi } from "@/app/lib/router_hipmi/router_admin";
 import {
   ActionIcon,
+  Badge,
   Box,
   Center,
   Grid,
   Paper,
+  ScrollArea,
   Stack,
   Table,
   Text,
@@ -40,23 +42,43 @@ const listBox = [
 const listTable = [
   {
     id: 1,
+    status: {
+      id: 1,
+      name: "Publish",
+    },
     name: "Subway Kuta",
   },
   {
     id: 2,
+    status: {
+      id: 2,
+      name: "Menunggu Konfirmasi",
+    },
     name: "Event MCD",
   },
   {
     id: 3,
+    status: {
+      id: 2,
+      name: " Menunggu Konfirmasi",
+    },
     name: "Villa Batubulan",
   },
   {
     id: 4,
+    status: {
+      id: 1,
+      name: "Publish",
+    },
     name: "Kost Alif Denpasar",
   },
   {
     id: 5,
-    name: "Pabrik Rokok",
+    status: {
+      id: 1,
+      name: "Publish",
+    },
+    name: "Pabrik Rokok Surya Gandum",
   },
 ];
 
@@ -66,6 +88,7 @@ export default function Admin_Investasi() {
   const tableBody = listTable.map((e) => (
     <tr key={e.id}>
       <td>{e.name}</td>
+      <td>{e.status.id === 1 ? <Badge variant="dot" color="green" >{e.status.name}</Badge> :  <Badge variant="dot" color="red">{e.status.name}</Badge> }</td>
       <td>
         <ActionIcon variant="transparent"
         onClick={() => router.push(RouterAdminInvestasi.halaman_aksi + `${e.id}`)}
@@ -101,15 +124,18 @@ export default function Admin_Investasi() {
         <Center my={"xs"}>
           <Text>List Investasi</Text>
         </Center>
-        <Table withBorder>
+        <ScrollArea w={"100%"}>
+        <Table withBorder highlightOnHover >
           <thead>
             <tr>
               <th>Nama Proyek Investasi</th>
+              <th>Status</th>
               <th>Aksi</th>
             </tr>
           </thead>
           <tbody>{tableBody}</tbody>
         </Table>
+        </ScrollArea>
       </Box>
     </>
   );

src/app_modules/admin/main/layout.tsx

@@ -6,6 +6,7 @@ import {
   Box,
   Burger,
   Drawer,
+  Footer,
   Group,
   Header,
   MediaQuery,
@@ -57,10 +58,27 @@ export default function AdminLayout({
   return (
     <>
       <AppShell
+        // footer={
+        //   <Footer height={50}>
+        //     {/* Web View */}
+        //     <MediaQuery smallerThan={"md"}  styles={{ display: "none" }}>
+        //       <Group position="apart">
+        //         <Text>1</Text>
+        //         <Text>1</Text>
+        //         <Text>1</Text>
+        //       </Group>
+        //     </MediaQuery>
+
+        //     {/* <MediaQuery smallerThan={"md"}  styles={{ display: "none", borderStyle: "transparent" }}>
+        //      <Text>ok</Text>
+        //     </MediaQuery> */}
+        //   </Footer>
+        // }
         header={
           <Header height={50}>
-            <Group h={50} align="center" px={"md"} position="apart">
-              <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+            {/* Mobile View */}
+            <MediaQuery largerThan="md" styles={{ display: "none" }}>
+              <Group h={50} align="center" px={"md"} position="apart">
                 <Burger
                   opened={opened}
                   onClick={() => setOpened((o) => !o)}
@@ -68,19 +86,42 @@ export default function AdminLayout({
                   color={theme.colors.gray[6]}
                   mr="xl"
                 />
-              </MediaQuery>
-              <Title order={6}>Dashboard Admin</Title>
-              <ActionIcon  variant="transparent" onClick={() => router.push(RouterHome.main_home)}>
-                <IconLogout color="red" />
-              </ActionIcon>
-            </Group>
+                <Title order={6}>Dashboard Admin</Title>
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(RouterHome.main_home)}
+                >
+                  <IconLogout color="red" />
+                </ActionIcon>
+              </Group>
+            </MediaQuery>
+
+            {/* Web View */}
+            <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
+              <Group position="apart" align="center" h={50} px={"md"}>
+                <Title order={4}>Dashboard Admin</Title>
+                <Group>
+                  {listAdminPage.map((e) => (
+                    <Text key={e.id}  onClick={() => router.push(e.route)}>
+                      {e.name}
+                    </Text>
+                  ))}
+                </Group>
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(RouterHome.main_home)}
+                >
+                  <IconLogout color="red" />
+                </ActionIcon>
+              </Group>
+            </MediaQuery>
           </Header>
         }
       >
         {children}
       </AppShell>
       <Drawer opened={opened} onClose={() => setOpened(false)} size={"50%"}>
-        <Stack spacing={"lg"}>
+        <Stack spacing={"xl"}>
           {listAdminPage.map((e) => (
             <Text key={e.id} onClick={() => router.push(e.route)}>
               {e.name}

src/app_modules/crowd/main/layout.tsx

@@ -15,7 +15,7 @@ export default function LayoutMainCrowd({
   return (
     <>
       <AppShell
-        header={<HeaderTamplate route="/dev/home" title="Crowd Funding" />}
+        header={<HeaderTamplate route="/dev/home" title="HIPMI Crowd Funding" />}
       >
         {children}
       </AppShell>

src/app_modules/crowd/main/view.tsx

@@ -2,27 +2,41 @@
 
 import { Warna } from "@/app/lib/warna";
 import { gs_investasiFooter } from "@/app_modules/investasi/g_state";
-import { Button, Center, Stack, Text, Title } from "@mantine/core";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import toast from "react-simple-toasts";
 
 export default function MainCrowd() {
   const router = useRouter();
-  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter)
+  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
   return (
     <>
-      <Center>
-        <Stack>
-          <Text>Selamat datang di</Text>
-          <Text>HIPMI Crowd Funding</Text>
+      <Stack>
+        
+        <Paper bg={"gray"}>
+          <AspectRatio ratio={16 / 9}>
+            <Image alt="" src={"/aset/logo.png"} />
+          </AspectRatio>
+        </Paper>
+        <Stack align="center">
           <Button
             w={300}
             radius={50}
             bg={Warna.hijau_tua}
+            color="green"
             onClick={() => {
-              router.push("/dev/investasi/main")
-              setChangeColor(false)
+              router.push("/dev/investasi/main");
+              setChangeColor(false);
             }}
           >
             Investasi
@@ -36,7 +50,8 @@ export default function MainCrowd() {
             Donasi
           </Button>
         </Stack>
-      </Center>
+      </Stack>
+     
     </>
   );
 }

src/app_modules/crowd/splash/view.tsx

@@ -13,10 +13,11 @@ export default function SplashCrowd() {
   return (
     <>
       <Center h={"100vh"}>
-       <Stack>
-       <Text>Welcome to,</Text>
-        <Title>CrowdFunding</Title>
-       </Stack>
+        <Stack align="center" justify="center">
+          <Text>Welcome to,</Text>
+          <Title>HIPMI</Title>
+          <Title order={3}>CrowdFunding</Title>
+        </Stack>
       </Center>
     </>
   );

src/app_modules/investasi/berita/view.tsx

@@ -1,19 +1,40 @@
 "use client";
 
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import { AspectRatio, Grid, Image, Paper, Text, Title } from "@mantine/core";
+import {
+  AspectRatio,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import moment from "moment";
 import { useRouter } from "next/navigation";
 
-export default function BeritaInvestasi({id}: {id: string}) {
-    const router = useRouter()
+export default function BeritaInvestasi({ id }: { id: string }) {
+  const router = useRouter();
   return (
     <>
-      <Paper h={100} w={"100%"} bg={"gray"} p={"sm"} onClick={() => router.push(RouterInvestasi.detail_berita + `${id}`)}>
-        <Title order={6}>Judul berita</Title>
+      <Paper
+       
+        w={"100%"}
+        bg={"gray"}
+        p={"sm"}
+        onClick={() => router.push(RouterInvestasi.detail_berita + `${id}`)}
+      >
+       <Stack>
+       <Group position="apart">
+          <Title order={6}>Judul berita</Title>
+          <Text fz={"xs"}>{moment(Date.now()).local().format("LL")}</Text>
+        </Group>
+
         <Grid pt={5}>
           <Grid.Col span={8}>
             <Text fz={12}>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit....
             </Text>
           </Grid.Col>
           <Grid.Col span={4}>
@@ -22,6 +43,7 @@ export default function BeritaInvestasi({id}: {id: string}) {
             </AspectRatio>
           </Grid.Col>
         </Grid>
+       </Stack>
       </Paper>
     </>
   );

src/app_modules/investasi/create/view.tsx

@@ -62,9 +62,9 @@ export default function InvestasiCreate({
       masterPembagianDevidenId: value.pembagianDevidenId,
       masterPencarianInvestorId: value.pencarianInvestorId,
     };
-    toast("Berhasil disimpan")
+    // toast("Berhasil disimpan")
     setChangeColor(true)
-    return setTimeout(() => router.push(RouterInvestasi.portofolio), 2000);
+    return setTimeout(() => router.push(RouterInvestasi.dialog_create), 1000);
 
 
     // if (_.values(body).includes("")) return toast("Lengkapi data");

src/app_modules/investasi/create_berita/layout.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell, Button, Center, Footer } from "@mantine/core";
+import { IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+import React from "react";
+import toast from "react-simple-toasts";
+
+export default function LayoutCreateBeritaInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={<HeaderTamplate title="Buat Berita" />}
+        footer={
+          <Footer height={70} sx={{ borderStyle: "none" }}>
+            <Center>
+              <Button
+                w={300}
+                radius={50}
+                bg={Warna.biru}
+                onClick={() => {
+                    router.back()
+                    toast("Berita tersimpan")
+                }}
+              >
+                Simpan
+              </Button>
+            </Center>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/create_berita/view.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { AspectRatio, Button, Center, Image, Stack, TextInput, Textarea, Title } from "@mantine/core"
+import { IconUpload } from "@tabler/icons-react"
+
+export default function CreateBeritaInvestasi(){
+    return<>
+    <Stack>
+        <AspectRatio ratio={16 / 9}>
+          <Image alt="" src={"/aset/no-img.png"} />
+        </AspectRatio>
+        <Center>
+          <Button leftIcon={<IconUpload size={10} />} compact radius={50}>
+            Upload
+          </Button>
+        </Center>
+        <TextInput label="Judul berita" />
+        <Textarea label="Deskripsi" autosize minRows={2} maxRows={6} />
+      </Stack>
+    
+    </>
+}

src/app_modules/investasi/detail_berita/view.tsx

@@ -1,10 +1,22 @@
-"use client"
+"use client";
 
-import { Text } from "@mantine/core"
+import { AspectRatio, Image, Stack, Text, Title } from "@mantine/core";
 
-export default function DetailBeritaInvestasi(){
-    return<>
-    <Text>Berita</Text>
-    
+export default function DetailBeritaInvestasi() {
+  return (
+    <>
+      <Stack>
+      <Title>Judul berita</Title>
+      <AspectRatio ratio={16/9}>
+        <Image src={"/aset/no-img.png"} alt=""/>
+      </AspectRatio>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum eaque sint
+        consequuntur consectetur ratione nostrum quasi aspernatur quae? Facere
+        repudiandae illum laborum eum recusandae, id cumque in quaerat eveniet
+        beatae.
+      </Text>
+      </Stack>
     </>
-}
+  );
+}

src/app_modules/investasi/detail_saham_terbeli/view.tsx

@@ -46,7 +46,7 @@ export default function DetailSahamTerbeli({id}: {id: string}) {
       id: 3,
       name: "Berita",
       icon: <IconSpeakerphone size={70} />,
-      route: RouterInvestasi.detail_berita,
+      route: RouterInvestasi.berita,
     },
   ];
   return (

src/app_modules/investasi/dialog_page/create/layout.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  AppShell,
+  CloseButton,
+  Footer,
+  Group,
+  Header,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import router from "next/router";
+import React from "react";
+
+export default function LayoutDialogPageCreateInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter()
+  useShallowEffect(() => {
+    setTimeout(() => router.push(RouterInvestasi.portofolio), 3000)
+  },[])
+  return (
+    <>
+      <AppShell
+        footer={
+          <Footer height={70} sx={{ borderStyle: "none" }}>
+            <Group spacing={4} position="center">
+              <IconAlertTriangle color="orange" size={20} />
+              <Text fz={"sm"}>Proyek Investasi anda akan berstatus DRAFT</Text>
+            </Group>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/dialog_page/create/view.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Group, Highlight, Stack, Text, Title } from "@mantine/core";
+import { IconAlertTriangle, IconCircleCheck } from "@tabler/icons-react";
+
+export default function DialogPageCreateInvestasi() {
+  return (
+    <>
+      <Stack h={"80vh"} align="center" justify="center">
+        <Title order={3}>Berhasil Membuat Proyek Investasi</Title>
+        <IconCircleCheck size={100} color="green" />
+        
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/dialog_page/transaksi_saham/view.tsx

@@ -4,32 +4,44 @@ import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { Box, Center, Loader, Stack, Text, Title } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconCircleCheck } from "@tabler/icons-react";
+import moment from "moment";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+import Countdown from "react-countdown";
 
 export default function CountDownTransaksiInvestasi() {
   const router = useRouter();
+  const [count, setCount] = useState<any | null>(10);
   useShallowEffect(() => {
     setTimeout(() => router.push(RouterInvestasi.status_transaksi), 10000);
   }, []);
 
+  const PopupCD = () => <Text>Sedang di Proses</Text>;
+  const countD = ({ hours, minutes, seconds, completed }: any) => {
+    if (completed) {
+      return PopupCD();
+    } else {
+      return (
+        <>
+          {minutes}:{seconds}
+        </>
+      );
+    }
+  };
+
   return (
     <>
       <Center h={"80vh"}>
         <Stack>
-          {/* <Box>
-            <Center>
-              <Text>Transfer Berhasil</Text>
-            </Center>
-            <Center>
-              <IconCircleCheck size={100} />
-            </Center>
-          </Box> */}
           <Box>
             <Center>
               <Stack spacing={"sm"}>
                 <Text>Xendit sedang memproses transaksimu</Text>
                 <Center>
-                  <Title order={5}>09:57</Title>
+                  <Title order={5}>
+                    <Countdown date={Date.now() + 600000} renderer={countD} />
+                  </Title>
                 </Center>
                 <Center>
                   <Loader size={"xl"} variant="bars" />

src/app_modules/investasi/dummy/data_dummy.json

@@ -14,11 +14,15 @@
     "masterPembagianDevidenId": 3,
     "masterPencarianInvestorId": 60,
     "imagesId": "clny2l8dj0000tlagcpsi9dmz",
-    "persentase": 40,
+    "persentase": 30,
     "saham_beli": 1,
     "statusPorto": {
       "id": 1,
       "status": "Draft"
+    },
+    "statusSaham": {
+      "id": 2,
+      "status": "Menunggu Konfirmasi"
     }
   },
   {
@@ -41,6 +45,10 @@
     "statusPorto": {
       "id": 3,
       "status": "Accept"
+    },
+    "statusSaham": {
+      "id": 1,
+      "status": "Berhasil"
     }
   },
   {
@@ -63,6 +71,10 @@
     "statusPorto": {
       "id": 3,
       "status": "Accept"
+    },
+    "statusSaham": {
+      "id": 1,
+      "status": "Berhasil"
     }
   },
   {
@@ -85,6 +97,10 @@
     "statusPorto": {
       "id": 2,
       "status": "Review"
+    },
+    "statusSaham": {
+      "id": 1,
+      "status": "Berhasil"
     }
   },
   {
@@ -107,6 +123,10 @@
     "statusPorto": {
       "id": 3,
       "status": "Accept"
+    },
+    "statusSaham": {
+      "id": 2,
+      "status": "Menunggu Konfirmasi"
     }
   }
 ]

src/app_modules/investasi/edit/view.tsx

@@ -26,7 +26,7 @@ export default function EditInvestasi({id}:{id:string}) {
     {
       id: 4,
       name: "Berita",
-      route: RouterInvestasi.edit_berita,
+      route: RouterInvestasi.list_edit_berita,
     },
   ];
   return (

src/app_modules/investasi/edit_berita/layout.tsx

@@ -1,17 +1,36 @@
 "use client";
 
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Warna } from "@/app/lib/warna";
 import HeaderTamplate from "@/app_modules/component/header_tamplate";
-import { AppShell } from "@mantine/core";
+import { AppShell, Button, Center, Footer } from "@mantine/core";
+import { useRouter } from "next/navigation";
 import React from "react";
+import toast from "react-simple-toasts";
 
 export default function LayoutEditBeritaInvestasi({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const router = useRouter()
   return (
     <>
-      <AppShell header={<HeaderTamplate title="Edit Berita" />}>
+      <AppShell
+        header={<HeaderTamplate title="Edit Berita" />}
+        footer={
+          <Footer height={70} sx={{ borderStyle: "none" }}>
+            <Center>
+              <Button w={300} radius={50} bg={Warna.hijau_muda} color="green" onClick={() => {
+                router.back()
+                toast("Berita terupdate")
+              }}>
+                Update
+              </Button>
+            </Center>
+          </Footer>
+        }
+      >
         {children}
       </AppShell>
     </>

src/app_modules/investasi/edit_berita/view.tsx

@@ -1,10 +1,33 @@
-"use client"
+"use client";
 
-import { Text } from "@mantine/core"
+import {
+  AspectRatio,
+  Button,
+  Center,
+  FileInput,
+  Image,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { IconUpload } from "@tabler/icons-react";
 
-export default function EditBeritaInvestasi(){
-    return<>
-    <Text>Berita</Text>
-    
+export default function EditBeritaInvestasi() {
+  return (
+    <>
+      <Stack>
+        <AspectRatio ratio={16 / 9}>
+          <Image alt="" src={"/aset/no-img.png"} />
+        </AspectRatio>
+        <Center>
+          <Button leftIcon={<IconUpload size={10} />} compact radius={50}>
+            Upload
+          </Button>
+        </Center>
+        <TextInput label="Judul berita" />
+        <Textarea label="Deskripsi" autosize minRows={2} maxRows={6} />
+      </Stack>
     </>
-}
+  );
+}

src/app_modules/investasi/edit_intro/view.tsx

@@ -1,14 +1,31 @@
 "use client";
 
-import { Paper, Grid, Center, Text, Title, Button, Divider, AspectRatio, Box, FileButton, Group, Select, TextInput, Image } from "@mantine/core";
+import { Warna } from "@/app/lib/warna";
+import {
+  Paper,
+  Grid,
+  Center,
+  Text,
+  Title,
+  Button,
+  Divider,
+  AspectRatio,
+  Box,
+  FileButton,
+  Group,
+  Select,
+  TextInput,
+  Image,
+} from "@mantine/core";
 import { IconCamera, IconChevronRight } from "@tabler/icons-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
 import { useState } from "react";
+import toast from "react-simple-toasts";
 
 export default function EditIntroInvestasi() {
-  const router = useRouter()
+  const router = useRouter();
   const [edit, setEdit] = useState(true);
   const [img, setImg] = useState<any | null>();
   const [value, setValue] = useState({
@@ -22,8 +39,9 @@ export default function EditIntroInvestasi() {
     pembagianDevidenId: "",
   });
 
-  return<>
-  <Box>
+  return (
+    <>
+      <Box>
         <AspectRatio ratio={16 / 9}>
           {img ? (
             <Image alt="" src={img} />
@@ -149,13 +167,18 @@ export default function EditIntroInvestasi() {
           </Box>
         </Center>
         <Center my={"lg"}>
-          <Button w={200} radius={50}
-          //  onClick={() => onSubmit() }
-          onClick={() => router.back()}
+          <Button
+            w={200}
+            radius={50}
+            bg={Warna.hijau_muda}
+            color="green"
+            //  onClick={() => onSubmit() }
+            onClick={() => {router.back(), toast("Data terupdate")}}
           >
             Update
           </Button>
         </Center>
       </Box>
-  </>
+    </>
+  );
 }

src/app_modules/investasi/index.ts

@@ -41,6 +41,12 @@ import TransferInvestasi from "./transfer/view";
 import LayoutTransferInvestasi from "./transfer/layout";
 import StatusTransaksiInvestasi from "./status_transaksi/view";
 import LayoutStatusTransaksiInvestasi from "./status_transaksi/layout";
+import DialogPageCreateInvestasi from "./dialog_page/create/view";
+import LayoutDialogPageCreateInvestasi from "./dialog_page/create/layout";
+import CreateBeritaInvestasi from "./create_berita/view";
+import LayoutCreateBeritaInvestasi from "./create_berita/layout";
+import ListEditBeritaInvestasi from "./list_edit_berita/page";
+import LayoutListEditBeritaInvestasi from "./list_edit_berita/layout";
 
 export {
   MainInvestasi,
@@ -86,4 +92,10 @@ export {
   LayoutTransferInvestasi,
   StatusTransaksiInvestasi,
   LayoutStatusTransaksiInvestasi,
+  DialogPageCreateInvestasi,
+  LayoutDialogPageCreateInvestasi,
+  CreateBeritaInvestasi,
+  LayoutCreateBeritaInvestasi,
+  ListEditBeritaInvestasi ,
+  LayoutListEditBeritaInvestasi,
 };

src/app_modules/investasi/list_edit_berita/layout.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi"
+import HeaderTamplate from "@/app_modules/component/header_tamplate"
+import { AppShell } from "@mantine/core"
+import { IconPencilPlus } from "@tabler/icons-react"
+import React from "react"
+
+export default function LayoutListEditBeritaInvestasi({children}: {children: React.ReactNode}){
+    return<>
+    <AppShell
+    header={
+        <HeaderTamplate
+          title="List Berita"
+          icon={<IconPencilPlus />}
+          route2={RouterInvestasi.create_berita}
+        />
+      }
+    >
+        {children}
+    </AppShell>
+    </>
+}

src/app_modules/investasi/list_edit_berita/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  ActionIcon,
+  AspectRatio,
+  Grid,
+  Group,
+  Image,
+  Menu,
+  Paper,
+  Spoiler,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconDots } from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import toast from "react-simple-toasts";
+
+export default function ListEditBeritaInvestasi({ id }: { id: string }) {
+  const router = useRouter();
+  return (
+    <>
+      <Paper w={"100%"} bg={"gray"} p={"sm"}>
+        <Stack spacing={"xs"}>
+          <Group position="apart">
+            <Title order={6}>Judul berita</Title>
+            <Menu position="left">
+              <Menu.Target>
+                <ActionIcon variant="transparent">
+                  <IconDots color="black" />
+                </ActionIcon>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Item
+                  onClick={() =>
+                    router.push(RouterInvestasi.edit_berita + `${id}`)
+                  }
+                >
+                  Edit
+                </Menu.Item>
+                <Menu.Item onClick={() => toast("Berita terhapus")}>
+                  Hapus
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+          </Group>
+          <Grid pt={5}>
+            <Grid.Col span={8}>
+              <Spoiler
+                fz={"xs"}
+                maxHeight={50}
+                showLabel="Selengkapnya"
+                hideLabel="Sembunyikan"
+              >
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
+                quaerat nulla autem rem rerum modi, saepe blanditiis delectus
+                illum sunt repudiandae inventore alias voluptas at! Nisi odio
+                eaque explicabo laudantium.
+              </Spoiler>
+            </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>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/model/dummy.ts

@@ -19,4 +19,8 @@ export interface DUMMY_INVESTASI {
     id: number;
     status: string;
   };
+  statusSaham: {
+    id: number;
+    status: string;
+  };
 }

src/app_modules/investasi/portofolio/view.tsx

@@ -37,7 +37,7 @@ export default function PortofolioInvestasi() {
   return (
     <>
       <MyPortofolioInvestasi />
-      <Divider my={"lg"}/>
+      <Divider my={"lg"} />
       <SahamTerbeli />
     </>
   );
@@ -49,7 +49,9 @@ function MyPortofolioInvestasi() {
 
   return (
     <>
-      <Title mb={"md"} order={4}>Portofolio Saya</Title>
+      <Title mb={"md"} order={4}>
+        Portofolio Saya
+      </Title>
       <Carousel
         showThumbs={false}
         infiniteLoop={true}
@@ -62,7 +64,7 @@ function MyPortofolioInvestasi() {
             key={e.id}
             withBorder
             mb={40}
-            bg={"gray"}
+            bg={"gray.5"}
             onClick={() => router.push(`/dev/investasi/detail_porto/${e.id}`)}
           >
             <CardSection p={"xs"}>
@@ -162,128 +164,127 @@ function SahamTerbeli() {
 
   return (
     <>
-      {/* <Box maw={400} mx="auto" mt={"xs"}>
-        <Paper mb={5} onClick={toggle} bg={Warna.hijau_tua} px={"md"} h={40}>
-          <Group position="apart" align="center" h={40}>
-            <Title order={6} c={"white"}>
-              Saham Saya
-            </Title>
-            <IconCaretDown />
-          </Group>
-        </Paper>
-
-        <Collapse in={opened} transitionDuration={700}></Collapse>
-      </Box> */}
-
-      <Title mb={"md"} order={4}>Saham Saya</Title>
+      <Title mb={"md"} order={4}>
+        Saham Saya
+      </Title>
       {dataDummy.map((e) => (
-            <Card
-              key={e.id}
-              withBorder
-              bg={"gray"}
-              mb={"lg"}
-              onClick={() =>
-                router.push(RouterInvestasi.detail_saham_terbeli + `${e.id}`)
-              }
-            >
-              <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 ? (
+        <Card
+          key={e.id}
+          withBorder
+          bg={"gray.5"}
+          mb={"lg"}
+          onClick={() =>
+            router.push(RouterInvestasi.detail_saham_terbeli + `${e.id}`)
+          }
+        >
+          <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>
+              <Image alt="" src={"/aset/no-img.png"} />
+            </AspectRatio>
+          </CardSection>
 
-              <CardSection p={"lg"}>
-                <Box>
-                  <Title order={4}>{e.title}</Title>
-                  <Slider
-                    size={10}
-                    disabled
-                    labelAlwaysOn
-                    value={e.persentase}
-                    marks={[{ value: e.persentase, label: e.persentase + `%` }]}
-                  />
-                </Box>
-              </CardSection>
-              <CardSection p={"md"}>
-                <Box>
-                  <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>
-          ))}
+          <CardSection p={"lg"}>
+            <Box mb={"md"}>
+              <Title order={4}>{e.title}</Title>
+              <Slider
+                size={10}
+                disabled
+                labelAlwaysOn
+                value={e.persentase}
+                marks={[{ value: e.persentase, label: e.persentase + `%` }]}
+              />
+            </Box>
+          </CardSection>
+          <CardSection p={"md"}>
+            <Box>
+              <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"}>
+            <Group position="apart">
+              {e.statusSaham.id === 1 ? (
+                <Badge variant="dot">{e.statusSaham.status}</Badge>
+              ) : (
+                <Badge variant="dot" color="red">
+                  {e.statusSaham.status}
+                </Badge>
+              )}
+
+              {(() => {
+                if (
+                  e.masterPencarianInvestorId -
+                    moment(new Date()).diff(new Date(e.createdAt), "days") <=
+                  0
+                ) {
+                  return (
+                    <>
+                      <Group position="center">
+                        <IconCircleCheck color="green" />
+                        <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>
+                    </>
+                  );
+                }
+              })()}
+            </Group>
+          </CardSection>
+        </Card>
+      ))}
     </>
   );
 }

src/app_modules/investasi/status_transaksi/layout.tsx

@@ -4,7 +4,10 @@ import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
   ActionIcon,
   AppShell,
+  Button,
+  Center,
   CloseButton,
+  Footer,
   Group,
   Header,
   Text,
@@ -13,6 +16,7 @@ import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import React from "react";
 import { gs_investasiFooter } from "../g_state";
+import { Warna } from "@/app/lib/warna";
 
 export default function LayoutStatusTransaksiInvestasi({
   children,
@@ -40,6 +44,13 @@ export default function LayoutStatusTransaksiInvestasi({
             </Group>
           </Header>
         }
+        footer={
+          <Footer height={70} sx={{ borderStyle: "none" }}>
+            <Center>
+              <Button w={300} radius={50} bg={Warna.biru} onClick={() => router.push(RouterInvestasi.portofolio)}>Kembali Ke Portofolio</Button>
+            </Center>
+          </Footer>
+        }
       >
         {children}
       </AppShell>

src/app_modules/investasi/transfer/layout.tsx

@@ -29,7 +29,7 @@ export default function LayoutTransferInvestasi({
                 w={300}
                 bg={Warna.biru}
                 onClick={() => {
-                  router.push(RouterInvestasi.dialog_page);
+                  router.push(RouterInvestasi.dialog_transaksi);
                   setChangeColor(true)
                   // router.push(RouterInvestasi.status_transaksi);
                   

yarn.lock

@@ -2893,6 +2893,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-countdown@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.5.tgz#70c035b5cbc7e8fdb4ad91fe5f44afd7a7933a68"
+  integrity sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"