Invesment

Fix:
- styles/global-styles.ts : tambah alignSelfFlexEnd
- my-holding: basic ui
- portofolio.: basic ui
- transaction: basic ui

## No Issue

app/(application)/(user)/_layout.tsx

@@ -193,6 +193,13 @@ export default function UserLayout() {
         {/* ========== End Crowdfunding Section ========= */}
 
         {/* ========== Investment Section ========= */}
+        <Stack.Screen
+          name="investment/(tabs)"
+          options={{
+            title: "Investasi",
+            headerLeft: () => <BackButton path="/crowdfunding" />,
+          }}
+        />
         <Stack.Screen
           name="investment/create"
           options={{
@@ -202,7 +209,7 @@ export default function UserLayout() {
         />
 
         {/* ========== End Investment Section ========= */}
-        
+
         {/* ========== Donation Section ========= */}
         <Stack.Screen
           name="donation/create"

app/(application)/(user)/crowdfunding/index.tsx

@@ -15,7 +15,7 @@ export default function Crowdfunding() {
     {
       title: "Investasi",
       desc: "Buat investasi dan jual beli saham lebih mudah dengan pengguna lain.",
-      path: "investment/create",
+      path: "investment/(tabs)",
     },
     {
       title: "Donasi",

app/(application)/(user)/investment/(tabs)/_layout.tsx

@@ -0,0 +1,59 @@
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { TabsStyles } from "@/styles/tabs-styles";
+import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function InvestmentTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Bursa",
+          tabBarIcon: ({ color }) => (
+            <Ionicons
+              name="bar-chart-outline"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="portofolio"
+        options={{
+          title: "Portofolio",
+          tabBarIcon: ({ color }) => (
+            <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="my-holding"
+        options={{
+          title: "Saham Saya",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="hand-holding-dollar"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="transaction"
+        options={{
+          title: "Transaksi",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="money-bill-transfer"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/(application)/(user)/investment/(tabs)/index.tsx

@@ -0,0 +1,81 @@
+import {
+  BaseBox,
+  FloatingButton,
+  Grid,
+  ProgressCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import dayjs from "dayjs";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+export default function InvestmentBursa() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/investment/create")} />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
+          <Grid>
+            <Grid.Col span={5}>
+              <Image
+                source={DUMMY_IMAGE.background}
+                style={{ width: "auto", height: 100, borderRadius: 10 }}
+              />
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <StackCustom>
+                <TextCustom truncate={2}>
+                  Title here : 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>
+                <ProgressCustom value={index % 5 * 20} size="lg" />
+                <TextCustom>
+                  Sisa waktu: {dayjs().diff(dayjs(), "day")} hari
+                </TextCustom>
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}
+
+
+//   <View style={{ padding: 20, gap: 16 }}>
+//     <TextCustom>Progress 70%</TextCustom>
+//     <ProgressCustom value={70} color="primary" size="md" />
+
+//     <TextCustom>Success Progress</TextCustom>
+//     <ProgressCustom value={40} color="success" size="lg" />
+
+//     <TextCustom>Warning Progress (small)</TextCustom>
+//     <ProgressCustom value={90} color="warning" size="sm" />
+
+//     <TextCustom>Error Indeterminate</TextCustom>
+//     <ProgressCustom value={null} color="error" size="md" />
+
+//     <TextCustom>Custom Radius</TextCustom>
+//     <ProgressCustom value={60} color="info" size="xl" radius={4} />
+
+//     <ProgressCustom value={70} color="primary" size="lg" />
+
+//     <ProgressCustom value={45} color="success" size="md" label="Halfway!" />
+
+//     <ProgressCustom value={90} color="warning" size="lg" showLabel={false} />
+
+//     <ProgressCustom value={null} color="error" size="sm" label="Loading..." />
+//   </View>;

app/(application)/(user)/investment/(tabs)/my-holding.tsx

@@ -0,0 +1,49 @@
+import {
+  BaseBox,
+  Grid,
+  ProgressCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { View } from "react-native";
+
+export default function InvestmentMyHolding() {
+  return (
+    <ViewWrapper hideFooter>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
+          <Grid>
+            <Grid.Col span={6}>
+              <StackCustom gap={"xs"}>
+                <TextCustom truncate={2}>
+                  Title here : 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 height={5} />
+                <TextCustom size="small">Rp. 7.500.000</TextCustom>
+                <TextCustom size="small">300 Lembar</TextCustom>
+              </StackCustom>
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col
+              span={5}
+              style={{
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <ProgressCustom value={(index % 5) * 20} size="lg" />
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/investment/(tabs)/portofolio.tsx

@@ -0,0 +1,70 @@
+import {
+  BaseBox,
+  Grid,
+  ScrollableCustom,
+  Spacing,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { masterStatus } from "@/lib/dummy-data/_master/status";
+import { Image } from "expo-image";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function InvestmentPortofolio() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={masterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+  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>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/investment/(tabs)/transaction.tsx

@@ -0,0 +1,53 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { GStyles } from "@/styles/global-styles";
+import dayjs from "dayjs";
+import { View } from "react-native";
+
+export default function InvestmentTransaction() {
+  return (
+    <ViewWrapper hideFooter>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <BaseBox key={i} paddingTop={7} paddingBottom={7}>
+          <Grid>
+            <Grid.Col span={6}>
+              <StackCustom gap={"xs"}>
+                <TextCustom truncate>
+                  Title Investment: Lorem ipsum dolor sit amet consectetur
+                  adipisicing elit. Am culpa excepturi deleniti soluta animi
+                  porro amet ducimus.
+                </TextCustom>
+                <TextCustom color="gray" size="small">
+                  {dayjs().format("DD/MM/YYYY")}
+                </TextCustom>
+              </StackCustom>
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5} style={{ alignItems: "flex-end" }}>
+              <StackCustom gap={"xs"}>
+                <TextCustom bold truncate>
+                  Rp. 7.500.000
+                </TextCustom>
+                <BadgeCustom
+                  variant="light"
+                  color="success"
+                  style={GStyles.alignSelfFlexEnd}
+                >
+                  Berhasil
+                </BadgeCustom>
+              </StackCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/investment/create.tsx

@@ -1,11 +1,197 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+    BaseBox,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    CenterCustom,
+    InformationBox,
+    LandscapeFrameUploaded,
+    SelectCustom,
+    Spacing,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+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 { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
 
 export default function InvestmentCreate() {
+  const [data, setData] = useState({
+    title: "",
+    targetDana: 0,
+    hargaPerLembar: 0,
+    totalLembar: 0,
+    rasioKeuntungan: 0,
+    pencarianInvestor: "",
+    periodeDeviden: "",
+    pembagianDeviden: "",
+  });
+
+//   const [coba, setCoba] = useState(""); 
   return (
     <ViewWrapper>
-      <TextCustom bold size="large">
-        Buat Investasi
-      </TextCustom>
+      <StackCustom gap={"xs"}>
+        {/* <View style={GStyles.inputContainerInput}>
+          <TextInput
+            style={{
+              ...GStyles.inputText,
+            }}
+            onChangeText={(value) => setCoba(value)}
+            value={coba}
+            keyboardType="decimal-pad"
+          />
+        </View> */}
+
+        <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." />
+
+        <BaseBox>
+          <CenterCustom>
+            <FontAwesome5
+              name="file-pdf"
+              size={30}
+              color={MainColor.disabled}
+            />
+          </CenterCustom>
+        </BaseBox>
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.push("/take-picture/1")}
+        >
+          Upload File
+        </ButtonCenteredOnly>
+        <Spacing />
+
+        <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>
   );
 }

app/(application)/coba/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react";
 import {
   View,
@@ -11,6 +12,8 @@ import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import EventDetailScreen from "./double-scroll";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import CustomUploadButton from "./upload-button";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 const { width } = Dimensions.get("window");
 
@@ -117,14 +120,38 @@ const CustomTabNavigator = () => {
 
   const ActiveComponent = getActiveComponent();
 
+  const handleImageUpload = (file: any) => {
+    console.log("Gambar dipilih:", file);
+    // Upload ke server
+  };
+
+  const handlePdfOrPngUpload = (file: any) => {
+    console.log("PDF atau PNG dipilih:", file);
+  };
+
   return (
     <>
-      <Stack.Screen
-        options={{
-          title: "Custom Tab Navigator",
-        }}
-      />
-      <EventDetailScreen />
+      <SafeAreaView edges={["bottom"]} style={styles.container}>
+        <Stack.Screen
+          options={{
+            title: "Custom Tab Navigator",
+          }}
+        />
+        <EventDetailScreen />
+
+        <CustomUploadButton
+          allowedExtensions={["jpeg", "png"]}
+          buttonTitle="Unggah Gambar (JPEG/PNG)"
+          onFileSelected={handleImageUpload}
+        />
+
+        {/* Hanya PDF atau PNG */}
+        <CustomUploadButton
+          allowedExtensions={["pdf"]}
+          buttonTitle="Unggah PDF atau PNG"
+          onFileSelected={handlePdfOrPngUpload}
+        />
+      </SafeAreaView>
     </>
     // <View style={styles.container}>
     //   {/* Content Area */}

app/(application)/coba/upload-button.tsx

@@ -0,0 +1,99 @@
+// components/CustomUploadButton.tsx
+import React from 'react';
+import { Button, Alert, View, StyleSheet } from 'react-native';
+import * as DocumentPicker from 'expo-document-picker';
+import { isValidFileType, getMimeType } from '../../../utils/fileValidation';
+
+interface UploadButtonProps {
+  allowedExtensions: string[];
+  buttonTitle?: string;
+  onFileSelected?: (file: {
+    uri: string;
+    name: string;
+    size: number | null;
+    mimeType: string;
+  }) => void;
+}
+
+const CustomUploadButton: React.FC<UploadButtonProps> = ({
+  allowedExtensions,
+  buttonTitle = 'Pilih File',
+  onFileSelected,
+}) => {
+  const handlePickFile = async () => {
+    try {
+      // Coba filter dengan MIME type jika memungkinkan
+      const typeFilter = getMimeTypeFilter(allowedExtensions);
+
+      const result = await DocumentPicker.getDocumentAsync({
+        type: typeFilter, // Ini membantu memfilter di UI pemilih
+        copyToCacheDirectory: true,
+      });
+
+      if (result.canceled) {
+        Alert.alert('Dibatalkan', 'Tidak ada file yang dipilih.');
+        return;
+      }
+
+      const file = result.assets[0];
+      const { uri, name, size } = file;
+
+      // Validasi ekstensi secara manual (cadangan jika MIME tidak akurat)
+      if (!isValidFileType(name, allowedExtensions)) {
+        Alert.alert(
+          'Format Tidak Didukung',
+          `Hanya file dengan ekstensi berikut yang diperbolehkan: ${allowedExtensions.join(', ')}`
+        );
+        return;
+      }
+
+      const mimeType = getMimeType(name);
+
+      // Kirim data file ke komponen induk
+      if (onFileSelected) {
+        onFileSelected({ uri, name, size: size || null, mimeType });
+      }
+
+      Alert.alert('Berhasil', `File ${name} berhasil dipilih!`);
+    } catch (error) {
+      console.error('Error picking file:', error);
+      Alert.alert('Error', 'Terjadi kesalahan saat memilih file.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Button title={buttonTitle} onPress={handlePickFile} />
+    </View>
+  );
+};
+
+// Fungsi bantu untuk menghasilkan MIME type filter dari ekstensi
+const getMimeTypeFilter = (extensions: string[]): string => {
+  const mimeTypes: string[] = [];
+  extensions.forEach((ext) => {
+    switch (ext.toLowerCase()) {
+      case 'jpg':
+      case 'jpeg':
+        if (!mimeTypes.includes('image/jpeg')) mimeTypes.push('image/jpeg');
+        break;
+      case 'png':
+        if (!mimeTypes.includes('image/png')) mimeTypes.push('image/png');
+        break;
+      case 'pdf':
+        if (!mimeTypes.includes('application/pdf')) mimeTypes.push('application/pdf');
+        break;
+      default:
+        mimeTypes.push('*/*'); // fallback
+    }
+  });
+  return mimeTypes.length > 0 ? mimeTypes.join(',') : '*/*';
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+  },
+});
+
+export default CustomUploadButton;

bun.lock

@@ -18,6 +18,8 @@
         "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",
@@ -833,6 +835,8 @@
 
     "expo-constants": ["expo-constants@17.1.7", "", { "dependencies": { "@expo/config": "~11.0.12", "@expo/env": "~1.0.7" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-byBjGsJ6T6FrLlhOBxw4EaiMXrZEn/MlUYIj/JAd+FS7ll5X/S4qVRbIimSJtdW47hXMq0zxPfJX6njtA56hHA=="],
 
+    "expo-document-picker": ["expo-document-picker@13.1.6", "", { "peerDependencies": { "expo": "*" } }, "sha512-8FTQPDOkyCvFN/i4xyqzH7ELW4AsB6B3XBZQjn1FEdqpozo6rpNJRr7sWFU/93WrLgA9FJEKpKbyr6XxczK6BA=="],
+
     "expo-file-system": ["expo-file-system@18.1.11", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-HJw/m0nVOKeqeRjPjGdvm+zBi5/NxcdPf8M8P3G2JFvH5Z8vBWqVDic2O58jnT1OFEy0XXzoH9UqFu7cHg9DTQ=="],
 
     "expo-font": ["expo-font@13.3.2", "", { "dependencies": { "fontfaceobserver": "^2.1.0" }, "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-wUlMdpqURmQ/CNKK/+BIHkDA5nGjMqNlYmW0pJFXY/KE/OG80Qcavdu2sHsL4efAIiNGvYdBS10WztuQYU4X0A=="],

components/Progress/ProgressCustom.tsx

@@ -0,0 +1,193 @@
+import { useTheme } from "@react-navigation/native";
+import React from "react";
+import { Animated, StyleSheet, Text, View, ViewStyle } from "react-native";
+
+type ProgressColor =
+  | "primary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info"
+  | "dark";
+
+type ProgressSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface ProgressProps {
+  value?: number | null;
+  color?: ProgressColor;
+  size?: ProgressSize;
+  radius?: number;
+  style?: ViewStyle;
+  animated?: boolean;
+  label?: React.ReactNode; // Konten label (bisa string, number, atau elemen)
+  showLabel?: boolean; // Jika ingin mengontrol visibilitas
+}
+
+const getColor = (color: ProgressColor, isDark: boolean) => {
+  const palette: Record<ProgressColor, string> = {
+    primary: "#FFC107",
+    success: "#228B22",
+    warning: "#FFA500",
+    error: "#DC3545",
+    info: "#177DDC",
+    dark: isDark ? "#DADADA" : "#212121",
+  };
+  return palette[color];
+};
+
+const getSize = (size: ProgressSize): number => {
+  const sizes: Record<ProgressSize, number> = {
+    xs: 6,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+  };
+  return sizes[size];
+};
+
+const ProgressCustom: React.FC<ProgressProps> = ({
+  value = 0,
+  color = "primary",
+  size = "md",
+  radius = 999,
+  style,
+  animated = true,
+  label,
+  showLabel = true,
+}) => {
+  const { dark } = useTheme();
+  const isDark = dark ?? false;
+
+  const barHeight = getSize(size);
+  const progressColor = getColor(color, isDark);
+  const displayValue =
+    typeof value === "number" ? Math.max(0, Math.min(100, value)) : 0;
+
+  // Animasi indeterminate
+  const translateX = React.useRef(new Animated.Value(-1)).current;
+
+  React.useEffect(() => {
+    if (value === null && animated) {
+      const animation = Animated.loop(
+        Animated.timing(translateX, {
+          toValue: 1,
+          duration: 1200,
+          useNativeDriver: true,
+        })
+      );
+      animation.start();
+      return () => animation.stop();
+    }
+  }, [value, animated, translateX]);
+
+  const isIndeterminate = value === null;
+
+  // Tentukan teks label
+  const labelText =
+    label !== undefined
+      ? label
+      : typeof value === "number"
+      ? `${Math.round(value)}%`
+      : "";
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height: barHeight,
+          borderRadius: radius,
+          backgroundColor: isDark
+            ? "rgb(255, 255, 255)"
+            : "rgba(255, 255, 255, 0.84)",
+        },
+        style,
+      ]}
+    >
+      {/* Progress Fill */}
+      {isIndeterminate ? (
+        <Animated.View
+          style={[
+            styles.indeterminateBar,
+            {
+              width: "50%",
+              height: barHeight,
+              borderRadius: radius,
+              backgroundColor: progressColor,
+              transform: [
+                {
+                  translateX: translateX.interpolate({
+                    inputRange: [-1, 1],
+                    outputRange: [-100, 100],
+                  }),
+                },
+              ],
+            },
+          ]}
+        />
+      ) : (
+        <View
+          style={[
+            styles.progressBar,
+            {
+              width: `${displayValue}%`,
+              height: barHeight,
+              borderRadius: radius,
+              backgroundColor: progressColor,
+            },
+          ]}
+        />
+      )}
+
+      {/* Label di tengah */}
+      {showLabel && labelText ? (
+        <View style={StyleSheet.absoluteFill}>
+          <Text
+            style={[
+              styles.label,
+              {
+                fontSize: barHeight * 0.7,
+                lineHeight: barHeight,
+                color: isDark ? "black" : "black", // Warna teks, bisa disesuaikan
+                fontWeight: "600",
+              },
+            ]}
+            numberOfLines={1}
+            adjustsFontSizeToFit
+          >
+            {labelText}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export default ProgressCustom;
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    backgroundColor: "rgba(0,0,0,0.1)",
+    width: "100%",
+    justifyContent: "center", // Pusatkan label secara vertikal
+  },
+  progressBar: {
+    backgroundColor: "#007BFF",
+  },
+  indeterminateBar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    backgroundColor: "#007BFF",
+  },
+  label: {
+    textAlign: "center",
+    width: "100%",
+    // Hindari overlap dengan background — bisa tambahkan shadow atau background jika perlu
+    textShadowColor: "rgba(255,255,255,0.6)",
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 1,
+  },
+});

components/index.ts

@@ -55,6 +55,8 @@ import TabBarBackground from "./_ShareComponent/TabBarBackground";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import SearchInput from "./_ShareComponent/SearchInput";
 import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
+// Progress
+import ProgressCustom from "./Progress/ProgressCustom";
 
 export {
   AlertCustom,
@@ -96,6 +98,8 @@ export {
   // Map
   MapCustom,
   MenuDrawerDynamicGrid,
+  // Progress
+  ProgressCustom,
   // Scroll
   ScrollableCustom,
   // Select

lib/dummy-data/investment/pembagian-deviden.ts

@@ -0,0 +1,20 @@
+const dummyPembagianDeviden = [
+  {
+    id: "1",
+    name: "3",
+  },
+  {
+    id: "2",
+    name: "6",
+  },
+  {
+    id: "3",
+    name: "9",
+  },
+  {
+    id: "4",
+    name: "12",
+  },
+];
+
+export default dummyPembagianDeviden;

lib/dummy-data/investment/pencarian-investor.ts

@@ -0,0 +1,20 @@
+const dummyListPencarianInvestor = [
+  {
+    id: "1",
+    name: "30",
+  },
+  {
+    id: "2",
+    name: "60",
+  },
+  {
+    id: "3",
+    name: "90",
+  },
+  {
+    id: "4",
+    name: "120",
+  },
+];
+
+export default dummyListPencarianInvestor;

lib/dummy-data/investment/periode-deviden.ts

@@ -0,0 +1,12 @@
+const dummyPeriodeDeviden = [
+  {
+    id: "1",
+    name: "Selamanya",
+  },
+  {
+    id: "2",
+    name: "Satu tahun",
+  },
+];
+
+export default dummyPeriodeDeviden;

package.json

@@ -25,6 +25,8 @@
     "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",

styles/global-styles.ts

@@ -320,4 +320,7 @@ export const GStyles = StyleSheet.create({
   alignSelfCenter: {
     alignSelf: "center",
   },
+  alignSelfFlexEnd: {
+    alignSelf: "flex-end",
+  },
 });

utils/fileValidation.ts

@@ -0,0 +1,34 @@
+// utils/fileValidation.ts
+const ALLOWED_TYPES: Record<string, string[]> = {
+  image: ["jpeg", "jpg", "png"],
+  document: ["pdf", "png"],
+  pdf: ["pdf"],
+  png: ["png"],
+};
+
+export const isValidFileType = (
+  fileName: string,
+  allowedExtensions: string[]
+): boolean => {
+  const extension = fileName.split(".").pop()?.toLowerCase();
+  return !!extension && allowedExtensions.includes(extension);
+};
+
+// Helper: Dapatkan MIME type berdasarkan ekstensi (opsional)
+export const getMimeType = (fileName: string): string => {
+  const ext = fileName.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "jpg":
+      return "image/jpg";
+    case "jpeg":
+      return "image/jpeg";
+    case "png":
+      return "image/png";
+    case "pdf":
+      return "application/pdf";
+    default:
+      return "application/octet-stream";
+  }
+};
+
+export default ALLOWED_TYPES;