# feat:

- Deskripsi:
- Notifikasi collaboration
## Issue: Scroll dari chat akan di ubah dengan package yang mas malik buat

src/app_modules/investasi/portofolio/draft.tsx

@@ -20,6 +20,8 @@ import { useRouter } from "next/navigation";
 import { MODEL_Investasi } from "../model/model_investasi";
 import _ from "lodash";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Draft({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -28,7 +30,7 @@ export default function Draft({ data }: { data: MODEL_Investasi[] }) {
   if (_.isEmpty(data))
     return (
       <>
-        <ComponentInvestasi_IsEmptyData text="Tidak ada data" />
+        <ComponentGlobal_IsEmptyData />
       </>
     );
 
@@ -37,12 +39,16 @@ export default function Draft({ data }: { data: MODEL_Investasi[] }) {
       {/* <pre> {JSON.stringify(data,null, 2)}</pre> */}
       {data.map((e) => (
         <Paper
-          // sx={{ borderStyle: "solid", borderColor: "yellow", borderWidth: "0.5px" }}
-          p={"xs"}
           key={e.id}
-          mb={"md"}
-          withBorder
           onClick={() => router.push(RouterInvestasi.detail_draft + `${e.id}`)}
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            border: `2px solid ${AccentColor.blue}`,
+            color: "white",
+            marginBottom: "15px",
+          }}
         >
           <Grid>
             <Grid.Col span={8}>

src/app_modules/investasi/portofolio/publish.tsx

@@ -1,31 +1,24 @@
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
-  Card,
-  CardSection,
   AspectRatio,
   Box,
-  Title,
-  Slider,
   Divider,
-  Group,
-  Badge,
-  Image,
-  Text,
-  Center,
   Grid,
-  Stack,
+  Group,
+  Image,
   Paper,
+  Stack,
+  Text,
 } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import {
-  MODEL_Investasi,
-  MODEL_Status_investasi,
-} from "../model/model_investasi";
+import { IconChecklist, IconCircleCheck } from "@tabler/icons-react";
 import _ from "lodash";
 import moment from "moment";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { IconChecklist, IconCircleCheck } from "@tabler/icons-react";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import { MODEL_Investasi } from "../model/model_investasi";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Publish({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -34,7 +27,7 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
   if (_.isEmpty(data))
     return (
       <>
-        <ComponentInvestasi_IsEmptyData text="Tidak ada data" />
+        <ComponentGlobal_IsEmptyData />
       </>
     );
 
@@ -43,12 +36,17 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
       {data.map((e) => (
         <Paper
           key={e.id}
-          withBorder
-          mb={"md"}
-          p={"xs"}
           onClick={() =>
             router.push(RouterInvestasi.detail_publish + `${e.id}`)
           }
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            border: `2px solid ${AccentColor.blue}`,
+            color: "white",
+            marginBottom: "15px",
+          }}
         >
           <Grid>
             <Grid.Col span={8}>
@@ -101,9 +99,13 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
                     <Box>
                       Sisa Waktu : {}
                       {Number(e.MasterPencarianInvestor.name) -
-                        moment(new Date()).diff(new Date(e.countDown), "days")} hari
+                        moment(new Date()).diff(
+                          new Date(e.countDown),
+                          "days"
+                        )}{" "}
+                      hari
                     </Box>
-                  )} 
+                  )}
                 </Group>
               </Group>
             )}

src/app_modules/investasi/portofolio/view.tsx

@@ -1,60 +1,23 @@
 "use client";
 
 import {
-  AspectRatio,
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Card,
-  CardSection,
-  Collapse,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  ScrollArea,
-  Select,
-  Slider,
   Stack,
-  Tabs,
-  Text,
-  Title,
+  Tabs
 } from "@mantine/core";
-import dataDummy from "../dummy/data_dummy.json";
-import moment from "moment";
 import { useRouter } from "next/navigation";
-import {
-  IconCaretDown,
-  IconCircleCheck,
-  IconCirclePlus,
-} 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 { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import {
-  IconPhoto,
-  IconMessageCircle,
-  IconSettings,
-} from "@tabler/icons-react";
-import { atomWithStorage } from "jotai/utils";
 import { useAtom } from "jotai";
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { gs_StatusPortoInvestasi } from "../g_state";
 import {
-  MODEL_Investasi,
-  MODEL_Status_investasi,
+  MODEL_Status_investasi
 } from "../model/model_investasi";
-import _ from "lodash";
 import Draft from "./draft";
-import Review from "./review";
 import Publish from "./publish";
 import Reject from "./reject";
+import Review from "./review";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function PortofolioInvestasi({
   listStatusInvestasi,
@@ -77,60 +40,59 @@ export default function PortofolioInvestasi({
   return (
     <>
       {/* <pre>{JSON.stringify(dataInvestasi, null, 2)}</pre> */}
-      <Stack>
-        {/* <Button
-          radius={"xl"}
-          bg={Warna.hijau_muda}
-          color="green"
-          leftIcon={<IconCirclePlus />}
-          onClick={() => router.push(RouterInvestasi.create)}
-        >
-          Buat Proyek Invetasi
-        </Button> */}
-        <Tabs
-          variant="pills"
-          radius="xl"
-          defaultValue="Draft"
-          value={activeTab}
-          onTabChange={setActiveTab}
-        >
-          <Stack>
-            <Tabs.List grow>
-              {status_inves.map((e) => (
-                <Tabs.Tab
-                  sx={
+      <Tabs
+        color="orange"
+        variant="pills"
+        radius="xl"
+        defaultValue="Draft"
+        value={activeTab}
+        onTabChange={setActiveTab}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+        }}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {status_inves.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.name}
+                fw={"bold"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    activeTab === e.name ? MainColor.yellow : "white",
+                  border:
                     activeTab === e.name
-                      ? {
-                          boxShadow:
-                            "0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.2)",
-                        }
-                      : {}
-                  }
-                  key={e.id}
-                  value={e.name}
-                  bg={activeTab === e.name ? "blue" : "gray.1"}
-                  fw={activeTab === e.name ? "bold" : "normal"}
-                >
-                  {e.name}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
+              >
+                {e.name}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
 
-            <Tabs.Panel key={"1"} value="Draft">
-              <Draft data={dataDraft as any} />
-            </Tabs.Panel>
-            <Tabs.Panel key={"2"} value="Review">
-              <Review data={dataReview as any} />
-            </Tabs.Panel>
-            <Tabs.Panel key={"3"} value="Publish">
-              <Publish data={dataPublish as any} />
-            </Tabs.Panel>
-            <Tabs.Panel key={"4"} value="Reject">
-              <Reject data={dataReject as any} />
-            </Tabs.Panel>
-          </Stack>
-        </Tabs>
-      </Stack>
+          <Tabs.Panel key={"1"} value="Draft">
+            <Draft data={dataDraft as any} />
+          </Tabs.Panel>
+          <Tabs.Panel key={"2"} value="Review">
+            <Review data={dataReview as any} />
+          </Tabs.Panel>
+          <Tabs.Panel key={"3"} value="Publish">
+            <Publish data={dataPublish as any} />
+          </Tabs.Panel>
+          <Tabs.Panel key={"4"} value="Reject">
+            <Reject data={dataReject as any} />
+          </Tabs.Panel>
+        </Stack>
+      </Tabs>
     </>
   );
 }