# style:

- UI Investasi
- UI Donasi
## No issue

src/app_modules/investasi/component/detail/card_status.tsx

@@ -0,0 +1,61 @@
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Paper, Grid, Stack, AspectRatio, Text, Image } from "@mantine/core";
+import _ from "lodash";
+
+import { MODEL_Investasi } from "../../model/model_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { useRouter } from "next/navigation";
+
+export function ComponentInvestasi_CardStatus({
+  data,
+  path,
+}: {
+  data: MODEL_Investasi;
+  path: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Paper
+        onClick={() => router.push(path + `${data.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"} lineClamp={1}>
+              {" "}
+              {_.startCase(data.title)}
+            </Text>
+            <Stack spacing={0}>
+              <Text fz={10}>Target Dana:</Text>
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+data.targetDana)}
+              </Text>
+            </Stack>
+          </Grid.Col>
+
+          <Grid.Col span={4}>
+            <AspectRatio ratio={16 / 9}>
+              <Paper radius={"md"}>
+                <Image
+                  alt=""
+                  src={RouterInvestasi.api_gambar + `${data.imagesId}`}
+                />
+              </Paper>
+            </AspectRatio>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}