From b3be6a7f538caadaf8855753246762767c869272 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Wed, 30 Jul 2025 16:55:37 +0800
Subject: [PATCH] Invesment Add: -
 app/(application)/(user)/investment/[id]/[file]/ -
 app/(application)/(user)/investment/[id]/add-document.tsx -
 app/(application)/(user)/investment/[id]/edit-document.tsx -
 app/(application)/(user)/investment/[id]/edit-prospectus.tsx -
 app/(application)/(user)/investment/[id]/recap-of-document.tsx

Fix:
-  app/(application)/(user)/investment/[id]/list-of-document.tsx
-  app/(application)/(user)/investment/[id]/edit.tsx
-  app/(application)/(user)/investment/[id]/[status]/detail.tsx

## No Issue
---
 app/(application)/(user)/_layout.tsx          |  22 +++
 .../(user)/investment/[id]/[file]/file.tsx    |  20 +++
 .../investment/[id]/[status]/detail.tsx       |  33 +++-
 .../(user)/investment/[id]/add-document.tsx   |  58 +++++++
 .../(user)/investment/[id]/edit-document.tsx  |  58 +++++++
 .../investment/[id]/edit-prospectus.tsx       |  46 +++++
 .../(user)/investment/[id]/edit.tsx           | 159 +++++++++++++++++-
 .../investment/[id]/list-of-document.tsx      |  11 +-
 .../investment/[id]/recap-of-document.tsx     | 133 +++++++++++++++
 components/Box/InformationBox.tsx             |   2 +-
 screens/Authentication/LoginView.tsx          |   3 +-
 screens/Invesment/Document/RecapBoxDetail.tsx |  28 +++
 12 files changed, 565 insertions(+), 8 deletions(-)
 create mode 100644 app/(application)/(user)/investment/[id]/[file]/file.tsx
 create mode 100644 app/(application)/(user)/investment/[id]/add-document.tsx
 create mode 100644 app/(application)/(user)/investment/[id]/edit-document.tsx
 create mode 100644 app/(application)/(user)/investment/[id]/edit-prospectus.tsx
 create mode 100644 app/(application)/(user)/investment/[id]/recap-of-document.tsx
 create mode 100644 screens/Invesment/Document/RecapBoxDetail.tsx

diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 5c10d0d..2eced86 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -228,6 +228,28 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="investment/[id]/add-document"
+          options={{
+            title: "Tambah Dokumen",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/edit-document"
+          options={{
+            title: "Edit Dokumen",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="investment/[id]/edit-prospectus"
+          options={{
+            title: "Edit Prospektus",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
 
         {/* ========== End Investment Section ========= */}
 
diff --git a/app/(application)/(user)/investment/[id]/[file]/file.tsx b/app/(application)/(user)/investment/[id]/[file]/file.tsx
new file mode 100644
index 0000000..89cfab9
--- /dev/null
+++ b/app/(application)/(user)/investment/[id]/[file]/file.tsx
@@ -0,0 +1,20 @@
+import { BackButton, TextCustom, ViewWrapper } from "@/components";
+import { Stack, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+
+export default function InvestmentProspectus() {
+  const { file } = useLocalSearchParams();
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Pratinjau ${_.startCase(file as string)}`,
+          headerLeft: () => <BackButton />,
+        }}
+      />
+      <ViewWrapper>
+        <TextCustom>Pratinjau File</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/investment/[id]/[status]/detail.tsx b/app/(application)/(user)/investment/[id]/[status]/detail.tsx
index 1fb25fa..ea0569b 100644
--- a/app/(application)/(user)/investment/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/investment/[id]/[status]/detail.tsx
@@ -17,8 +17,14 @@ import {
 import { IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
 import Investment_ButtonStatusSection from "@/screens/Invesment/ButtonStatusSection";
-import { FontAwesome6 } from "@expo/vector-icons";
+import {
+  AntDesign,
+  FontAwesome6,
+  Ionicons,
+  MaterialIcons,
+} from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useState } from "react";
@@ -78,6 +84,7 @@ export default function InvestmentDetailStatus() {
                 <BaseBox
                   backgroundColor={AccentColor.blue}
                   style={{ borderColor: AccentColor.softblue, borderWidth: 1 }}
+                  href={`/investment/${id}/prospektus/file`}
                 >
                   <StackCustom>
                     <TextCustom align="center">Prospektus</TextCustom>
@@ -127,9 +134,31 @@ export default function InvestmentDetailStatus() {
           data={[
             {
               icon: <IconEdit />,
-              label: "Edit",
+              label: "Edit Data",
               path: `/investment/${id}/edit`,
             },
+            {
+              icon: (
+                <AntDesign
+                  name="edit"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Edit Prospektus",
+              path: `/investment/${id}/edit-prospectus`,
+            },
+            {
+              icon: (
+                <MaterialIcons
+                  name="create"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Update Dokumen",
+              path: `/investment/${id}/recap-of-document`,
+            },
           ]}
           columns={4}
           onPressItem={handlePressDraft as any}
diff --git a/app/(application)/(user)/investment/[id]/add-document.tsx b/app/(application)/(user)/investment/[id]/add-document.tsx
new file mode 100644
index 0000000..cf92f61
--- /dev/null
+++ b/app/(application)/(user)/investment/[id]/add-document.tsx
@@ -0,0 +1,58 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function InvestmentAddDocument() {
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
+          <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
+          <Spacing />
+          <TextInputCustom
+            label="Judul Dokumen"
+            placeholder="Masukan judul dokumen"
+            required
+          />
+
+          <BaseBox>
+            <CenterCustom>
+              <FontAwesome5
+                name="file-pdf"
+                size={30}
+                color={MainColor.disabled}
+              />
+            </CenterCustom>
+          </BaseBox>
+
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() =>
+              router.push("/(application)/(image)/take-picture/123")
+            }
+          >
+            Upload
+          </ButtonCenteredOnly>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/investment/[id]/edit-document.tsx b/app/(application)/(user)/investment/[id]/edit-document.tsx
new file mode 100644
index 0000000..86e1136
--- /dev/null
+++ b/app/(application)/(user)/investment/[id]/edit-document.tsx
@@ -0,0 +1,58 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function InvestmentEditDocument() {
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
+          <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
+          <Spacing />
+          <TextInputCustom
+            label="Judul Dokumen"
+            placeholder="Masukan judul dokumen"
+            required
+          />
+
+          <BaseBox>
+            <CenterCustom>
+              <FontAwesome5
+                name="file-pdf"
+                size={30}
+                color={MainColor.disabled}
+              />
+            </CenterCustom>
+          </BaseBox>
+
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() =>
+              router.push("/(application)/(image)/take-picture/123")
+            }
+          >
+            Upload
+          </ButtonCenteredOnly>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/investment/[id]/edit-prospectus.tsx b/app/(application)/(user)/investment/[id]/edit-prospectus.tsx
new file mode 100644
index 0000000..c74d04e
--- /dev/null
+++ b/app/(application)/(user)/investment/[id]/edit-prospectus.tsx
@@ -0,0 +1,46 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function InvestmentEditProspectus() {
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
+        <Spacing />
+
+        <BaseBox>
+          <CenterCustom>
+            <FontAwesome5
+              name="file-pdf"
+              size={30}
+              color={MainColor.disabled}
+            />
+          </CenterCustom>
+        </BaseBox>
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.push("/(application)/(image)/take-picture/123")}
+        >
+          Upload
+        </ButtonCenteredOnly>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/(user)/investment/[id]/edit.tsx b/app/(application)/(user)/investment/[id]/edit.tsx
index 8811af8..0008f97 100644
--- a/app/(application)/(user)/investment/[id]/edit.tsx
+++ b/app/(application)/(user)/investment/[id]/edit.tsx
@@ -1,9 +1,164 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import dummyPembagianDeviden from "@/lib/dummy-data/investment/pembagian-deviden";
+import dummyListPencarianInvestor from "@/lib/dummy-data/investment/pencarian-investor";
+import dummyPeriodeDeviden from "@/lib/dummy-data/investment/periode-deviden";
+import { router } from "expo-router";
+import { useState } from "react";
 
 export default function InvestmentEdit() {
+  const [data, setData] = useState({
+    title: "",
+    targetDana: 0,
+    hargaPerLembar: 0,
+    totalLembar: 0,
+    rasioKeuntungan: 0,
+    pencarianInvestor: "",
+    periodeDeviden: "",
+    pembagianDeviden: "",
+  });
+
   return (
     <ViewWrapper>
-      <TextCustom>Edit</TextCustom>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.push("/take-picture/1")}
+        >
+          Upload
+        </ButtonCenteredOnly>
+
+        <Spacing />
+
+        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepannya." />
+
+        <TextInputCustom
+          required
+          placeholder="Judul"
+          label="Judul"
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
+        />
+
+        <TextInputCustom
+          required
+          iconLeft="Rp."
+          placeholder="0"
+          label="Target Dana"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, targetDana: Number(value) })
+          }
+          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+        />
+
+        <TextInputCustom
+          required
+          iconLeft="Rp."
+          placeholder="0"
+          label="Target Dana"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, targetDana: Number(value) })
+          }
+          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+        />
+
+        <TextInputCustom
+          required
+          iconLeft="Rp."
+          placeholder="0"
+          label="Harga Per Lembar"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, targetDana: Number(value) })
+          }
+          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+        />
+
+        <TextInputCustom
+          required
+          placeholder="0"
+          label="Total Lembar"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, totalLembar: Number(value) })
+          }
+          value={data.totalLembar === 0 ? "" : data.totalLembar.toString()}
+        />
+
+        <TextInputCustom
+          required
+          iconRight="%"
+          label="Rasio Keuntungan / ROI %"
+          placeholder="0"
+          keyboardType="numeric"
+          onChangeText={(value) =>
+            setData({ ...data, rasioKeuntungan: Number(value) })
+          }
+          value={
+            data.rasioKeuntungan === 0 ? "" : data.rasioKeuntungan.toString()
+          }
+        />
+
+        <SelectCustom
+          required
+          placeholder="Pilih batas waktu"
+          label="Pencarian Investor"
+          data={dummyListPencarianInvestor.map((item) => ({
+            label: item.name + `${" "}hari`,
+            value: item.id,
+          }))}
+          onChange={(value) =>
+            setData({ ...data, pencarianInvestor: value as any })
+          }
+          value={data.pencarianInvestor}
+        />
+
+        <SelectCustom
+          required
+          placeholder="Pilih batas waktu"
+          label="Pilih Periode Deviden"
+          data={dummyPeriodeDeviden.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          onChange={(value) =>
+            setData({ ...data, periodeDeviden: value as any })
+          }
+          value={data.periodeDeviden}
+        />
+
+        <SelectCustom
+          required
+          placeholder="Pilih batas waktu"
+          label="Pilih Pembagian Deviden"
+          data={dummyPembagianDeviden.map((item) => ({
+            label: item.name + `${" "}bulan`,
+            value: item.id,
+          }))}
+          onChange={(value) =>
+            setData({ ...data, pembagianDeviden: value as any })
+          }
+          value={data.pembagianDeviden}
+        />
+        <Spacing />
+        <ButtonCustom onPress={() => router.replace("/investment/portofolio")}>
+          Simpan
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing height={50} />
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/investment/[id]/list-of-document.tsx b/app/(application)/(user)/investment/[id]/list-of-document.tsx
index abda925..0372189 100644
--- a/app/(application)/(user)/investment/[id]/list-of-document.tsx
+++ b/app/(application)/(user)/investment/[id]/list-of-document.tsx
@@ -1,9 +1,16 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { ViewWrapper } from "@/components";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
 
 export default function InvestmentListOfDocument() {
   return (
     <ViewWrapper>
-      <TextCustom>Document List</TextCustom>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Investment_BoxDetailDocument
+          key={index}
+          title={`Judul Dokumen ${index + 1}`}
+          href={`/investment/${index + 1}/dokumen/file`}
+        />
+      ))}
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/investment/[id]/recap-of-document.tsx b/app/(application)/(user)/investment/[id]/recap-of-document.tsx
new file mode 100644
index 0000000..d4d7cda
--- /dev/null
+++ b/app/(application)/(user)/investment/[id]/recap-of-document.tsx
@@ -0,0 +1,133 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function InvestmentRecapOfDocument() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerBox, setOpenDrawerBox] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Rekap Dokumen",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton
+              onPress={() => {
+                setOpenDrawer(true);
+                setOpenDrawerBox(false);
+              }}
+            />
+          ),
+        }}
+      />
+
+      <ViewWrapper>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Investment_BoxDetailDocument
+            key={index}
+            title={`Judul Dokumen ${index + 1}`}
+            leftIcon={
+              <Ionicons
+                name="ellipsis-horizontal-outline"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.white}
+                style={{
+                  zIndex: 10,
+                  alignSelf: "flex-end",
+                }}
+                onPress={() => setOpenDrawerBox(true)}
+              />
+            }
+            href={`/investment/${id}/dokumen/file`}
+          />
+        ))}
+      </ViewWrapper>
+
+      {/* Drawer On Header */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <AntDesign
+                  name="pluscircle"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Tambah Dokumen",
+              path: `/investment/${id}/add-document`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Drawer On Box */}
+      <DrawerCustom
+        isVisible={openDrawerBox}
+        closeDrawer={() => setOpenDrawerBox(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Dokumen",
+              path: `/investment/${id}/edit-document`,
+            },
+            {
+              icon: (
+                <Ionicons
+                  name="trash-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Hapus Dokumen",
+              path: "" as any,
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            if (item.path === ("" as any)) {
+              AlertDefaultSystem({
+                title: "Hapus Dokumen",
+                message: "Apakah anda yakin ingin menghapus dokumen ini?",
+                textLeft: "Batal",
+                textRight: "Hapus",
+                onPressRight: () => {
+                  setOpenDrawerBox(false);
+                },
+              });
+            }
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
diff --git a/components/Box/InformationBox.tsx b/components/Box/InformationBox.tsx
index f9d2f9b..33f57f7 100644
--- a/components/Box/InformationBox.tsx
+++ b/components/Box/InformationBox.tsx
@@ -7,7 +7,7 @@ import BaseBox from "./BaseBox";
 export default function InformationBox({ text }: { text: string }) {
   return (
     <>
-      <BaseBox>
+      <BaseBox paddingTop={5} paddingBottom={5}>
         <Grid>
           <Grid.Col
             span={2}
diff --git a/screens/Authentication/LoginView.tsx b/screens/Authentication/LoginView.tsx
index 641006d..e3322f6 100644
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -32,12 +32,13 @@ export default function LoginView() {
 
     // router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
-    router.navigate("/(application)/(user)/home");
+    // router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
     // router.navigate(`/(application)/(image)/preview-image/${id}`);
     // router.replace("/(application)/(user)/event/(tabs)");
     // router.replace("/(application)/coba");
+    router.navigate("/investment/(tabs)")
   }
 
   return (
diff --git a/screens/Invesment/Document/RecapBoxDetail.tsx b/screens/Invesment/Document/RecapBoxDetail.tsx
new file mode 100644
index 0000000..03750ab
--- /dev/null
+++ b/screens/Invesment/Document/RecapBoxDetail.tsx
@@ -0,0 +1,28 @@
+import { BaseBox, Grid, TextCustom } from "@/components";
+import { Href } from "expo-router";
+
+export default function Investment_BoxDetailDocument({
+  title,
+  leftIcon,
+  href,
+}: {
+  title: string;
+  leftIcon?: React.ReactNode;
+  href?: Href;
+}) {
+  return (
+    <>
+      <BaseBox href={href}>
+        <Grid>
+          <Grid.Col span={leftIcon ? 10 : 12}>
+            <TextCustom truncate>
+              {title ||
+                `Judul Dokumen: Lorem, ipsum dolor sit amet consectetur adipisicing elit.`}
+            </TextCustom>
+          </Grid.Col>
+          {leftIcon && <Grid.Col span={2}>{leftIcon}</Grid.Col>}
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}