Invesment

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

## No Issue

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

@@ -1,11 +1,49 @@
-import { ViewWrapper, TextCustom } from "@/components";
+import {
+  BaseBox,
+  Grid,
+  ProgressCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { View } from "react-native";
 
 export default function InvestmentMyHolding() {
   return (
-    <ViewWrapper>
+    <ViewWrapper hideFooter>
-      <TextCustom bold size="large">
+      {Array.from({ length: 10 }).map((_, index) => (
-        My Holding
+        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
-      </TextCustom>
+          <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

@@ -1,11 +1,70 @@
-import { ViewWrapper, TextCustom } from "@/components";
+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>
+    <ViewWrapper headerComponent={scrollComponent} hideFooter>
-      <TextCustom bold size="large">
+      {Array.from({ length: 10 }).map((_, index) => (
-        Portofolio
+        <BaseBox key={index} paddingTop={7} paddingBottom={7}>
-      </TextCustom>
+          <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

@@ -1,11 +1,53 @@
-import { ViewWrapper, TextCustom } from "@/components";
+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>
+    <ViewWrapper hideFooter>
-      <TextCustom bold size="large">
+      {Array.from({ length: 10 }).map((_, i) => (
-        Transaction
+        <BaseBox key={i} paddingTop={7} paddingBottom={7}>
-      </TextCustom>
+          <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>
   );
 }

styles/global-styles.ts

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