# style:

- UI Investasi
- UI Donasi
## No issue

src/app_modules/investasi/portofolio/draft.tsx

@@ -22,6 +22,7 @@ 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";
+import { ComponentInvestasi_CardStatus } from "../component/detail/card_status";
 
 export default function Draft({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -38,44 +39,14 @@ export default function Draft({ data }: { data: MODEL_Investasi[] }) {
     <>
       {/* <pre> {JSON.stringify(data,null, 2)}</pre> */}
       {data.map((e) => (
-        <Paper
-          key={e.id}
-          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}>
-              <Text fw={"bold"}> {_.capitalize(e.title)}</Text>
-              <Stack spacing={0}>
-                <Text fz={10}>Target Dana:</Text>
-                <Text>
-                  Rp.{" "}
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+e.targetDana)}
-                </Text>
-              </Stack>
-            </Grid.Col>
+         <Box key={e.id}>
+          <ComponentInvestasi_CardStatus
+            data={e}
+            path={RouterInvestasi.detail_draft}
+          />
+        </Box>
 
-            <Grid.Col span={4}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt=""
-                    src={RouterInvestasi.api_gambar + `${e.imagesId}`}
-                  />
-                </Paper>
-              </AspectRatio>
-            </Grid.Col>
-          </Grid>
-        </Paper>
+       
       ))}
     </>
   );

src/app_modules/investasi/portofolio/publish.tsx

@@ -24,12 +24,7 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
   const [sisaWaktu, setSisaWaktu] = useState();
 
-  if (_.isEmpty(data))
-    return (
-      <>
-        <ComponentGlobal_IsEmptyData />
-      </>
-    );
+  if (_.isEmpty(data)) return <ComponentGlobal_IsEmptyData />;
 
   return (
     <>

src/app_modules/investasi/portofolio/reject.tsx

@@ -1,28 +1,19 @@
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
-  Card,
-  CardSection,
   AspectRatio,
   Box,
-  Title,
-  Divider,
-  Group,
-  Badge,
-  Image,
-  Text,
-  Center,
   Grid,
-  Stack,
+  Image,
   Paper,
+  Stack,
+  Text,
 } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import {
-  MODEL_Investasi,
-  MODEL_Status_investasi,
-} from "../model/model_investasi";
-import { useState } from "react";
 import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import { MODEL_Investasi } from "../model/model_investasi";
+import { ComponentInvestasi_CardStatus } from "../component/detail/card_status";
 
 export default function Reject({ data }: { data: MODEL_Investasi[] }) {
   const [investasi, setInvestasi] = useState(data);
@@ -37,40 +28,13 @@ export default function Reject({ data }: { data: MODEL_Investasi[] }) {
 
   return (
     <>
-
       {investasi.map((e) => (
-        <Paper
-          key={e.id}
-          withBorder
-          mb={"md"}
-          p={"xs"}
-          onClick={() => router.push(RouterInvestasi.detail_reject + `${e.id}`)}
-        >
-          <Grid>
-            <Grid.Col span={8}>
-              <Text fw={"bold"}> {_.capitalize(e.title)}</Text>
-              <Stack spacing={0}>
-                <Text fz={10}>Target Dana:</Text>
-              <Text>
-                Rp. {new Intl.NumberFormat("id-ID", {
-                  maximumSignificantDigits: 10,
-                }).format(+e.targetDana)}
-              </Text>
-              </Stack>
-            </Grid.Col>
-
-            <Grid.Col span={4}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt=""
-                    src={RouterInvestasi.api_gambar + `${e.imagesId}`}
-                  />
-                </Paper>
-              </AspectRatio>
-            </Grid.Col>
-          </Grid>
-        </Paper>
+        <Box key={e.id}>
+          <ComponentInvestasi_CardStatus
+            data={e}
+            path={RouterInvestasi.detail_reject}
+          />
+        </Box>
       ))}
     </>
   );

src/app_modules/investasi/portofolio/review.tsx

@@ -22,6 +22,7 @@ import {
 } from "../model/model_investasi";
 import _ from "lodash";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import { ComponentInvestasi_CardStatus } from "../component/detail/card_status";
 
 export default function Review({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -35,40 +36,12 @@ export default function Review({ data }: { data: MODEL_Investasi[] }) {
   return (
     <>
       {data.map((e) => (
-        <Paper
-          // sx={{ borderStyle: "solid", borderColor: "orange", borderWidth: "1px" }}
-          key={e.id}
-          mb={"md"}
-          p={"xs"}
-          withBorder
-          onClick={() => router.push(RouterInvestasi.detail_review + `${e.id}`)}
-        >
-          <Grid>
-            <Grid.Col span={8}>
-              <Text fw={"bold"}> {_.capitalize(e.title)}</Text>
-              <Stack spacing={0}>
-                <Text fz={10}>Target Dana:</Text>
-                <Text>
-                  Rp.{" "}
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+e.targetDana)}
-                </Text>
-              </Stack>
-            </Grid.Col>
-
-            <Grid.Col span={4}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt=""
-                    src={RouterInvestasi.api_gambar + `${e.imagesId}`}
-                  />
-                </Paper>
-              </AspectRatio>
-            </Grid.Col>
-          </Grid>
-        </Paper>
+        <Box key={e.id}>
+          <ComponentInvestasi_CardStatus
+            data={e}
+            path={RouterInvestasi.detail_review}
+          />
+        </Box>
       ))}
     </>
   );

src/app_modules/investasi/portofolio/view.tsx

@@ -1,23 +1,21 @@
 "use client";
 
-import {
-  Stack,
-  Tabs
-} from "@mantine/core";
+import { Stack, Tabs } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { useAtom } from "jotai";
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { gs_StatusPortoInvestasi } from "../g_state";
-import {
-  MODEL_Status_investasi
-} from "../model/model_investasi";
+import { MODEL_Status_investasi } from "../model/model_investasi";
 import Draft from "./draft";
 import Publish from "./publish";
 import Reject from "./reject";
 import Review from "./review";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function PortofolioInvestasi({
   listStatusInvestasi,
@@ -79,16 +77,16 @@ export default function PortofolioInvestasi({
             ))}
           </Tabs.List>
 
-          <Tabs.Panel key={"1"} value="Draft">
+          <Tabs.Panel value="Draft">
             <Draft data={dataDraft as any} />
           </Tabs.Panel>
-          <Tabs.Panel key={"2"} value="Review">
+          <Tabs.Panel value="Review">
             <Review data={dataReview as any} />
           </Tabs.Panel>
-          <Tabs.Panel key={"3"} value="Publish">
+          <Tabs.Panel value="Publish">
             <Publish data={dataPublish as any} />
           </Tabs.Panel>
-          <Tabs.Panel key={"4"} value="Reject">
+          <Tabs.Panel value="Reject">
             <Reject data={dataReject as any} />
           </Tabs.Panel>
         </Stack>