Invesment

Add : - screens/Invesment/ - app/(application)/(user)/investment/[id]/ Fix: - index & portofolio: basic UI ## No Issue
2025-07-30 14:31:39 +08:00
parent a43ddaa9d6
commit c863c04fb4
12 changed files with 470 additions and 40 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -207,6 +207,27 @@ export default function UserLayout() {
            headerLeft: () => <BackButton />,
          }}
        />
+        <Stack.Screen
+          name="investment/[id]/index"
+          options={{
+            title: "Detail Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/list-of-document"
+          options={{
+            title: "Daftar Dokumen",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/edit"
+          options={{
+            title: "Edit Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />

        {/* ========== End Investment Section ========= */}

--- a/app/(application)/(user)/investment/(tabs)/index.tsx
+++ b/app/(application)/(user)/investment/(tabs)/index.tsx
@@ -22,7 +22,7 @@ export default function InvestmentBursa() {
      }
    >
      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
+        <BaseBox key={index} paddingTop={7} paddingBottom={7} href={`/investment/${index}`}>
          <Grid>
            <Grid.Col span={5}>
              <Image
--- a/app/(application)/(user)/investment/(tabs)/portofolio.tsx
+++ b/app/(application)/(user)/investment/(tabs)/portofolio.tsx
@@ -1,16 +1,7 @@
-import {
-  BaseBox,
-  Grid,
-  ScrollableCustom,
-  Spacing,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { ScrollableCustom, ViewWrapper } from "@/components";
 import { masterStatus } from "@/lib/dummy-data/_master/status";
-import { Image } from "expo-image";
+import Investment_StatusBox from "@/screens/Invesment/StatusBox";
 import { useState } from "react";
-import { View } from "react-native";

 export default function InvestmentPortofolio() {
  const [activeCategory, setActiveCategory] = useState<string | null>(
@@ -36,34 +27,12 @@ export default function InvestmentPortofolio() {
  return (
    <ViewWrapper headerComponent={scrollComponent} hideFooter>
      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
-          <Grid>
-            <Grid.Col span={6}>
-              <TextCustom truncate={2}>
-                Title here : {activeCategory} Lorem ipsum dolor sit amet consectetur adipisicing
-                elit. Omnis, exercitationem, sequi enim quod distinctio maiores
-                laudantium amet, quidem atque repellat sit vitae qui aliquam est
-                veritatis laborum eum voluptatum totam!
-              </TextCustom>
-
-              <Spacing />
-
-              <TextCustom bold size="small">
-                Target Dana:
-              </TextCustom>
-              <TextCustom>Rp. {index + 1 % 3/4 * 1004000}</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={5}>
-              <Image
-                source={DUMMY_IMAGE.background}
-                style={{ width: "auto", height: 100, borderRadius: 10 }}
-              />
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
+        <Investment_StatusBox
+          key={index}
+          id={index.toString()}
+          status={activeCategory as string}
+          href={`/investment/${index}/${activeCategory}/detail`}
+        />
      ))}
    </ViewWrapper>
  );
--- a/app/(application)/(user)/investment/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/investment/[id]/[status]/detail.tsx
@@ -0,0 +1,171 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  BackButton,
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  DotButton,
+  DrawerCustom,
+  DummyLandscapeImage,
+  Grid,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Investment_ButtonStatusSection from "@/screens/Invesment/ButtonStatusSection";
+import { FontAwesome6 } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function InvestmentDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
+
+  const handlePressDraft = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerDraft(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : null,
+          //  : status === "publish" ? (
+          //   <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          // ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <BaseBox paddingBottom={0}>
+          <StackCustom gap={"xs"}>
+            <DummyLandscapeImage />
+            <Spacing />
+            <TextCustom align="center" size="xlarge" bold>
+              Title of Investment
+            </TextCustom>
+            <Spacing />
+
+            {listData.map((item, index) => (
+              <Grid key={index}>
+                <Grid.Col span={4}>
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                  <View />
+                </Grid.Col>
+                <Grid.Col span={7} style={{ justifyContent: "center" }}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+
+            <Grid>
+              <Grid.Col span={6} style={{ paddingRight: 10 }}>
+                <BaseBox
+                  backgroundColor={AccentColor.blue}
+                  style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                >
+                  <StackCustom>
+                    <TextCustom align="center">Prospektus</TextCustom>
+                    <CenterCustom>
+                      <FontAwesome6
+                        name="file-contract"
+                        size={50}
+                        color={MainColor.white}
+                      />
+                    </CenterCustom>
+                  </StackCustom>
+                </BaseBox>
+              </Grid.Col>
+
+              <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+                <BaseBox
+                  backgroundColor={AccentColor.blue}
+                  style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                  href={`/investment/${id}/list-of-document`}
+                >
+                  <StackCustom>
+                    <TextCustom align="center">Dokumen</TextCustom>
+                    <CenterCustom>
+                      <FontAwesome6
+                        name="file-lines"
+                        size={50}
+                        color={MainColor.white}
+                      />
+                    </CenterCustom>
+                  </StackCustom>
+                </BaseBox>
+              </Grid.Col>
+            </Grid>
+          </StackCustom>
+        </BaseBox>
+        <Spacing />
+        <Investment_ButtonStatusSection status={status as string} />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawerDraft}
+        closeDrawer={() => setOpenDrawerDraft(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit",
+              path: `/investment/${id}/edit`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressDraft as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Target Dana",
+    value: "Rp. 7.500.000",
+  },
+  {
+    label: "Harga Per Lembar",
+    value: "Rp. 2.400.",
+  },
+  {
+    label: "Return Of Investment (ROI)",
+    value: "3 %",
+  },
+  {
+    label: "Total Lembar",
+    value: "1.200",
+  },
+  {
+    label: "Jadwal Pembagian",
+    value: "Rp. 2.880.000",
+  },
+  {
+    label: "Pembagian Deviden",
+    value: "Selamanya",
+  },
+  {
+    label: "Pencarian Investor",
+    value: "30 Hari",
+  },
+];
--- a/app/(application)/(user)/investment/[id]/edit.tsx
+++ b/app/(application)/(user)/investment/[id]/edit.tsx
@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentEdit() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Edit</TextCustom>
+    </ViewWrapper>
+  );
+}
--- a/app/(application)/(user)/investment/[id]/index.tsx
+++ b/app/(application)/(user)/investment/[id]/index.tsx
@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentDetail() {
+    return (
+        <ViewWrapper>
+            <TextCustom>Investment Detail</TextCustom>
+        </ViewWrapper>
+    )
+}
--- a/app/(application)/(user)/investment/[id]/list-of-document.tsx
+++ b/app/(application)/(user)/investment/[id]/list-of-document.tsx
@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentListOfDocument() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Document List</TextCustom>
+    </ViewWrapper>
+  );
+}
--- a/bun.lock
+++ b/bun.lock
@@ -11,6 +11,7 @@
        "@react-navigation/elements": "^2.3.8",
        "@react-navigation/native": "^7.1.6",
        "@react-navigation/native-stack": "^7.3.21",
+        "@types/lodash": "^4.17.20",
        "@types/react-native-vector-icons": "^6.4.18",
        "dayjs": "^1.11.13",
        "expo": "53.0.17",
@@ -31,6 +32,7 @@
        "expo-symbols": "~0.4.5",
        "expo-system-ui": "~5.0.10",
        "expo-web-browser": "~14.2.0",
+        "lodash": "^4.17.21",
        "react": "19.0.0",
        "react-dom": "19.0.0",
        "react-native": "0.79.5",
@@ -451,6 +453,8 @@

    "@types/json5": ["@types/json5@0.0.29", "", {}, "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="],

+    "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
+
    "@types/node": ["@types/node@24.0.3", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg=="],

    "@types/react": ["@types/react@19.0.14", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-ixLZ7zG7j1fM0DijL9hDArwhwcCb4vqmePgwtV0GfnkHRSCUEv4LvzarcTdhoqgyMznUx/EhoTUv31CKZzkQlw=="],
@@ -1159,6 +1163,8 @@

    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],

+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
    "lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="],

    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,16 +9,21 @@
      "version": "1.0.0",
      "dependencies": {
        "@expo/vector-icons": "^14.1.0",
+        "@react-native-community/datetimepicker": "8.4.1",
        "@react-navigation/bottom-tabs": "^7.4.2",
        "@react-navigation/drawer": "^7.5.2",
        "@react-navigation/elements": "^2.3.8",
        "@react-navigation/native": "^7.1.6",
        "@react-navigation/native-stack": "^7.3.21",
        "@types/react-native-vector-icons": "^6.4.18",
+        "dayjs": "^1.11.13",
        "expo": "53.0.17",
        "expo-blur": "~14.1.5",
        "expo-camera": "~16.1.10",
+        "expo-clipboard": "~7.1.5",
        "expo-constants": "~17.1.7",
+        "expo-document-picker": "~13.1.6",
+        "expo-file-system": "~18.1.11",
        "expo-font": "~13.3.2",
        "expo-haptics": "~14.1.4",
        "expo-image": "~2.3.2",
@@ -37,6 +42,7 @@
        "react-native-international-phone-number": "^0.9.3",
        "react-native-maps": "1.20.1",
        "react-native-otp-entry": "^1.8.5",
+        "react-native-pager-view": "6.7.1",
        "react-native-paper": "^5.14.5",
        "react-native-reanimated": "~3.17.4",
        "react-native-safe-area-context": "5.4.0",
@@ -2801,6 +2807,29 @@
        }
      }
    },
+    "node_modules/@react-native-community/datetimepicker": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-8.4.1.tgz",
+      "integrity": "sha512-DrK+CUS5fZnz8dhzBezirkzQTcNDdaXer3oDLh0z4nc2tbdIdnzwvXCvi8IEOIvleoc9L95xS5tKUl0/Xv71Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": ">=52.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-windows": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@react-native/assets-registry": {
      "version": "0.79.5",
      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.79.5.tgz",
@@ -5343,6 +5372,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
    "node_modules/debug": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -6331,6 +6366,17 @@
        }
      }
    },
+    "node_modules/expo-clipboard": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/expo-clipboard/-/expo-clipboard-7.1.5.tgz",
+      "integrity": "sha512-TCANUGOxouoJXxKBW5ASJl2WlmQLGpuZGemDCL2fO5ZMl57DGTypUmagb0CVUFxDl0yAtFIcESd78UsF9o64aw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/expo-constants": {
      "version": "17.1.7",
      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.1.7.tgz",
@@ -6345,6 +6391,15 @@
        "react-native": "*"
      }
    },
+    "node_modules/expo-document-picker": {
+      "version": "13.1.6",
+      "resolved": "https://registry.npmjs.org/expo-document-picker/-/expo-document-picker-13.1.6.tgz",
+      "integrity": "sha512-8FTQPDOkyCvFN/i4xyqzH7ELW4AsB6B3XBZQjn1FEdqpozo6rpNJRr7sWFU/93WrLgA9FJEKpKbyr6XxczK6BA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
    "node_modules/expo-file-system": {
      "version": "18.1.11",
      "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.1.11.tgz",
@@ -10442,6 +10497,16 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-pager-view": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.7.1.tgz",
+      "integrity": "sha512-cBSr6xw4g5N7Kd3VGWcf+kmaH7iBWb0DXAf2bVo3bXkzBcBbTOmYSvc0LVLHhUPW8nEq5WjT9LCIYAzgF++EXw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-paper": {
      "version": "5.14.5",
      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.14.5.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "@react-navigation/elements": "^2.3.8",
    "@react-navigation/native": "^7.1.6",
    "@react-navigation/native-stack": "^7.3.21",
+    "@types/lodash": "^4.17.20",
    "@types/react-native-vector-icons": "^6.4.18",
    "dayjs": "^1.11.13",
    "expo": "53.0.17",
@@ -38,6 +39,7 @@
    "expo-symbols": "~0.4.5",
    "expo-system-ui": "~5.0.10",
    "expo-web-browser": "~14.2.0",
+    "lodash": "^4.17.21",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-native": "0.79.5",
--- a/screens/Invesment/ButtonStatusSection.tsx
+++ b/screens/Invesment/ButtonStatusSection.tsx
@@ -0,0 +1,121 @@
+import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
+import { router } from "expo-router";
+
+export default function Investment_ButtonStatusSection({
+  status,
+}: {
+  status: string;
+}) {
+  const handleBatalkanReview = () => {
+    AlertDefaultSystem({
+      title: "Batalkan Review",
+      message: "Apakah Anda yakin ingin batalkan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleAjukanReview = () => {
+    AlertDefaultSystem({
+      title: "Ajukan Review",
+      message: "Apakah Anda yakin ingin ajukan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleEditKembali = () => {
+    AlertDefaultSystem({
+      title: "Edit Kembali",
+      message: "Apakah Anda yakin ingin edit kembali ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleOpenDeleteAlert = () => {
+    AlertDefaultSystem({
+      title: "Hapus",
+      message: "Apakah Anda yakin ingin menghapus data ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const DeleteButton = () => {
+    return (
+      <>
+        <ButtonCustom
+          backgroundColor="red"
+          textColor="white"
+          onPress={handleOpenDeleteAlert}
+        >
+          Hapus
+        </ButtonCustom>
+      </>
+    );
+  };
+
+  switch (status) {
+    case "publish":
+      return <></>;
+
+    case "review":
+      return (
+        <ButtonCustom onPress={handleBatalkanReview}>
+          Batalkan Review
+        </ButtonCustom>
+      );
+
+    case "draft":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleAjukanReview}>
+                Ajukan Review
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
+            </Grid.Col>
+          </Grid>
+        </>
+      );
+
+    case "reject":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleEditKembali}>
+                Edit Kembali
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
+            </Grid.Col>
+          </Grid>
+        </>
+      );
+
+    default:
+      return <ButtonCustom disabled>Status Undifined</ButtonCustom>;
+  }
+}
--- a/screens/Invesment/StatusBox.tsx
+++ b/screens/Invesment/StatusBox.tsx
@@ -0,0 +1,48 @@
+import { BaseBox, Grid, Spacing, TextCustom } from "@/components";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { Image } from "expo-image";
+import { Href } from "expo-router";
+import { View } from "react-native";
+
+interface Investment_StatusBoxProps {
+  id: string;
+  status: string;
+  href?: Href
+}
+
+export default function Investment_StatusBox({
+  id,
+  status,
+  href
+}: Investment_StatusBoxProps) {
+  return (
+    <BaseBox paddingTop={7} paddingBottom={7} href={href}>
+      <Grid>
+        <Grid.Col span={6}>
+          <TextCustom truncate={2}>
+            Title here : {status} Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Omnis, exercitationem, sequi enim quod distinctio
+            maiores laudantium amet, quidem atque repellat sit vitae qui aliquam
+            est veritatis laborum eum voluptatum totam!
+          </TextCustom>
+
+          <Spacing />
+
+          <TextCustom bold size="small">
+            Target Dana:
+          </TextCustom>
+          <TextCustom>Rp. 7.500.000</TextCustom>
+        </Grid.Col>
+        <Grid.Col span={1}>
+          <View />
+        </Grid.Col>
+        <Grid.Col span={5}>
+          <Image
+            source={DUMMY_IMAGE.background}
+            style={{ width: "auto", height: 100, borderRadius: 10 }}
+          />
+        </Grid.Col>
+      </Grid>
+    </BaseBox>
+  );
+}