2025-10-27 11:32:16 +08:00
119 changed files with 8106 additions and 970 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -87,9 +87,9 @@ export default function UserLayout() {

        {/* ========== Forum Section ========= */}
        <Stack.Screen
-          name="forum/index"
+          name="forum/create"
          options={{
-            title: "Forum",
+            title: "Tambah Diskusi",
            headerLeft: () => <BackButton />,
          }}
        />
--- a/app/(application)/(user)/forum/create.tsx
+++ b/app/(application)/(user)/forum/create.tsx
@@ -0,0 +1,37 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+import { useState } from "react";
+
+export default function ForumCreate() {
+  const [text, setText] = useState("");
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Posting", text);
+          router.back();
+        }}
+      >
+        Posting
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <TextAreaCustom
+        placeholder="Ketik diskusi anda..."
+        maxLength={1000}
+        showCount
+        value={text}
+        onChangeText={setText}
+      />
+    </ViewWrapper>
+  );
+}
--- a/app/(application)/(user)/forum/index.tsx
+++ b/app/(application)/(user)/forum/index.tsx
@@ -1,10 +1,47 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  BackButton,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import FloatingButton from "@/components/Button/FloatingButton";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Forum_BerandaSection from "@/screens/Forum/berandaSection";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";

 export default function Forum() {
  return (
    <>
-      <ViewWrapper>
-        <TextCustom>Forum</TextCustom>
+      <Stack.Screen
+        options={{
+          title: "Forum",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <AvatarCustom />,
+        }}
+      />
+
+      <ViewWrapper
+        headerComponent={
+          <TextInputCustom
+            iconLeft={
+              <Ionicons
+                name="search-outline"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.placeholder}
+              />
+            }
+            placeholder="Cari topik forum..."
+            borderRadius={50}
+            containerStyle={{ marginBottom: 0 }}
+          />
+        }
+        floatingButton={
+          <FloatingButton onPress={() => router.navigate("/(application)/(user)/forum/create")} />
+        }
+      >
+        <Forum_BerandaSection />
      </ViewWrapper>
    </>
  );
--- a/app/(application)/(user)/portofolio/[id]/create.tsx
+++ b/app/(application)/(user)/portofolio/[id]/create.tsx
@@ -155,7 +155,7 @@ export default function PortofolioCreate() {
          icon="upload"
          onPress={() => {
            console.log("Upload logo >>", id);
-            router.navigate(`/(application)/take-picture/${id}`);
+            router.navigate(`/(application)/(image)/take-picture/${id}`);
          }}
        >
          Upload
--- a/app/(application)/(user)/user-search/index.tsx
+++ b/app/(application)/(user)/user-search/index.tsx
@@ -61,7 +61,7 @@ export default function UserSearch() {
            return (
              <Grid key={index}>
                <Grid.Col span={2}>
-                  <AvatarCustom />
+                  <AvatarCustom href={`/profile/${index}`}/>  
                </Grid.Col>
                <Grid.Col span={9}>
                  <TextCustom size="large">Nama user {index}</TextCustom>
--- a/bun.lock
+++ b/bun.lock
@@ -33,6 +33,7 @@
        "react-native-international-phone-number": "^0.9.3",
        "react-native-maps": "1.20.1",
        "react-native-otp-entry": "^1.8.5",
+        "react-native-paper": "^5.14.5",
        "react-native-reanimated": "~3.17.4",
        "react-native-safe-area-context": "5.4.0",
        "react-native-screens": "~4.11.1",
@@ -238,6 +239,8 @@

    "@babel/types": ["@babel/types@7.27.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q=="],

+    "@callstack/react-theme-provider": ["@callstack/react-theme-provider@3.0.9", "", { "dependencies": { "deepmerge": "^3.2.0", "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { "react": ">=16.3.0" } }, "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA=="],
+
    "@egjs/hammerjs": ["@egjs/hammerjs@2.0.17", "", { "dependencies": { "@types/hammerjs": "^2.0.36" } }, "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A=="],

    "@emnapi/core": ["@emnapi/core@1.4.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.2", "tslib": "^2.4.0" } }, "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g=="],
@@ -1380,6 +1383,8 @@

    "react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],

+    "react-native-paper": ["react-native-paper@5.14.5", "", { "dependencies": { "@callstack/react-theme-provider": "^3.0.9", "color": "^3.1.2", "use-latest-callback": "^0.2.3" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-safe-area-context": "*" } }, "sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ=="],
+
    "react-native-reanimated": ["react-native-reanimated@3.17.5", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4", "react-native-is-edge-to-edge": "1.1.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-SxBK7wQfJ4UoWoJqQnmIC7ZjuNgVb9rcY5Xc67upXAFKftWg0rnkknTw6vgwnjRcvYThrjzUVti66XoZdDJGtw=="],

    "react-native-safe-area-context": ["react-native-safe-area-context@5.4.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-JaEThVyJcLhA+vU0NU8bZ0a1ih6GiF4faZ+ArZLqpYbL6j7R3caRqj+mE3lEtKCuHgwjLg3bCxLL1GPUJZVqUA=="],
@@ -1712,6 +1717,8 @@

    "@babel/traverse--for-generate-function-map/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],

+    "@callstack/react-theme-provider/deepmerge": ["deepmerge@3.3.0", "", {}, "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="],
+
    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],

    "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
@@ -1892,6 +1899,8 @@

    "react-native/semver": ["semver@7.7.2", "", { "bin": "bin/semver.js" }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],

+    "react-native-paper/color": ["color@3.2.1", "", { "dependencies": { "color-convert": "^1.9.3", "color-string": "^1.6.0" } }, "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA=="],
+
    "react-native-vector-icons/yargs": ["yargs@16.2.0", "", { "dependencies": { "cliui": "^7.0.2", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.0", "y18n": "^5.0.5", "yargs-parser": "^20.2.2" } }, "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw=="],

    "react-native-web/@react-native/normalize-colors": ["@react-native/normalize-colors@0.74.89", "", {}, "sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg=="],
@@ -2012,6 +2021,8 @@

    "ora/chalk/supports-color": ["supports-color@5.5.0", "", { "dependencies": { "has-flag": "^3.0.0" } }, "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="],

+    "react-native-paper/color/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
+
    "react-native-vector-icons/yargs/cliui": ["cliui@7.0.4", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^7.0.0" } }, "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ=="],

    "react-native-vector-icons/yargs/yargs-parser": ["yargs-parser@20.2.9", "", {}, "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="],
@@ -2048,6 +2059,8 @@

    "ora/chalk/supports-color/has-flag": ["has-flag@3.0.0", "", {}, "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="],

+    "react-native-paper/color/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
+
    "react-native-vector-icons/yargs/cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

    "serve-static/send/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
--- a/components/Box/BaseBox.tsx
+++ b/components/Box/BaseBox.tsx
@@ -1,4 +1,5 @@
 import { AccentColor } from "@/constants/color-palet";
+import { PADDING_EXTRA_SMALL, PADDING_MEDIUM, PADDING_SMALL } from "@/constants/constans-value";
 import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";

 interface BaseBoxProps {
@@ -8,14 +9,16 @@ interface BaseBoxProps {
  marginBottom?: number;
  padding?: number;
  paddingInline?: number;
+  paddingBlock?: number;
 }

 export default function BaseBox({
  children,
  style,
  onPress,
-  marginBottom = 16,
-  padding = 12,
+  marginBottom = PADDING_MEDIUM,
+  paddingBlock = PADDING_EXTRA_SMALL,
+  paddingInline = PADDING_SMALL,
 }: BaseBoxProps) {
  return (
    <>
@@ -29,7 +32,8 @@ export default function BaseBox({
              borderWidth: 1,
              borderRadius: 10,
              marginBottom,
-              padding,
+              paddingBlock,
+              paddingInline,
            },
            style,
          ]}
@@ -46,7 +50,8 @@ export default function BaseBox({
              borderWidth: 1,
              borderRadius: 10,
              marginBottom,
-              padding,
+              paddingBlock,
+              paddingInline,
            },
            style,
          ]}
--- a/components/Button/FloatingButton.tsx
+++ b/components/Button/FloatingButton.tsx
@@ -0,0 +1,45 @@
+// components/FloatingButton.tsx
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+import { FAB } from "react-native-paper";
+
+// Props untuk komponen
+interface FloatingButtonProps {
+  onPress: () => void;
+//   label?: string;
+  icon?: string; // MaterialCommunityIcons
+  style?: ViewStyle;
+}
+
+const FloatingButton: React.FC<FloatingButtonProps> = ({
+  onPress,
+  //   label = "Buat",
+  icon = "pencil-plus-outline",
+  style,
+}) => {
+  return (
+    <FAB
+      style={[styles.fab, style]}
+      icon={icon}
+      color={MainColor.white}
+      //   label={label}
+      onPress={onPress}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  fab: {
+    position: "absolute",
+    margin: 16,
+    right: 0,
+    bottom: 0,
+    backgroundColor: AccentColor.softblue, // Warna Twitter biru
+    borderRadius: 50,
+    borderColor: AccentColor.blue,
+    borderWidth: 1,
+  },
+});
+
+export default FloatingButton;
--- a/components/Image/AvatarCustom.tsx
+++ b/components/Image/AvatarCustom.tsx
@@ -1,12 +1,21 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { MainColor } from "@/constants/color-palet";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
-import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+import { Href, router } from "expo-router";
+import {
+  Image,
+  ImageSourcePropType,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";

 type Size = "base" | "sm" | "md" | "lg" | "xl";

 interface AvatarCustomProps {
  source?: ImageSourcePropType;
  size?: Size;
+  onPress?: () => void;
+  href?: Href | undefined;
 }

 const sizeMap = {
@@ -20,24 +29,42 @@ const sizeMap = {
 export default function AvatarCustom({
  source = DUMMY_IMAGE.avatar,
  size = "base",
+  onPress,
+  href,
 }: AvatarCustomProps) {
  const dimension = sizeMap[size];

+  const ImageView = ({source}: {source: ImageSourcePropType}) => {
+    return (
+      <Image
+        source={source}
+        style={[
+          // styles.overlappingAvatar,
+          {
+            width: dimension,
+            height: dimension,
+            borderRadius: dimension / 2,
+          },
+        ]}
+        resizeMode="cover"
+      />
+    )
+  }
+
  return (
-    <Image
-      source={source}
-      style={[
-        styles.overlappingAvatar,
-        {
-          width: dimension,
-          height: dimension,
-          borderRadius: dimension / 2,
-        },
-      ]}
-      resizeMode="cover"
-    />
+    <>
+      {onPress || href ? (
+        <TouchableOpacity
+          onPress={href ? () => router.navigate(href as any) : onPress}
+        >
+          <ImageView source={source} />
+        </TouchableOpacity>
+      ) : (
+        <ImageView source={source} />
+      )}
+    </>
  );
-}
+}       

 const styles = StyleSheet.create({
  container: {
--- a/components/Text/TextCustom.tsx
+++ b/components/Text/TextCustom.tsx
@@ -22,7 +22,7 @@ interface TextCustomProps {
  bold?: boolean;
  semiBold?: boolean;
  size?: "default" | "large" | "small";
-  color?: "default" | "yellow" | "red" | "gray";
+  color?: "default" | "yellow" | "red" | "gray" | "green";
  align?: TextAlign; // Prop untuk alignment
  truncate?: boolean | number;
  onPress?: () => void;
@@ -57,6 +57,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
    if (color === "yellow") selectedStyles.push(styles.yellow);
    else if (color === "red") selectedStyles.push(styles.red);
    else if (color === "gray") selectedStyles.push(styles.gray);
+    else if (color === "green") selectedStyles.push(styles.green);

    // Alignment
    if (align) {
@@ -126,4 +127,7 @@ export const styles = StyleSheet.create({
  gray: {
    color: MainColor.placeholder,
  },
+  green: {
+    color: MainColor.green,
+  },
 });
--- a/components/TextArea/TextAreaCustom.tsx
+++ b/components/TextArea/TextAreaCustom.tsx
@@ -24,6 +24,7 @@ type BaseProps = {
  maxRows?: number;
  showCount?: boolean;
  maxLength?: number;
+  height?: number;
  style?: StyleProp<ViewStyle>;
 };

@@ -44,12 +45,13 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
  disabled = false,
  borderRadius = 8,
  autosize = false,
-  minRows = 3,
+  minRows = 4,
  maxRows = 6,
  showCount = false,
  maxLength,
  value,
  onChangeText,
+  height = 100,
  style,
  ...rest
 }) => {
@@ -90,6 +92,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
          disabled && GStyles.disabledBox,
          hasError ? GStyles.inputErrorBorder : {},
          { borderRadius },
+          { height },
          style,
        ]}
      >
--- a/components/_ShareComponent/ViewWrapper.tsx
+++ b/components/_ShareComponent/ViewWrapper.tsx
@@ -18,6 +18,7 @@ interface ViewWrapperProps {
  withBackground?: boolean;
  headerComponent?: React.ReactNode;
  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
  style?: StyleProp<ViewStyle>;
 }

@@ -26,6 +27,7 @@ const ViewWrapper = ({
  withBackground = false,
  headerComponent,
  footerComponent,
+  floatingButton,
  style,
 }: ViewWrapperProps) => {
  const assetBackground = require("../../assets/images/main-background.png");
@@ -79,43 +81,12 @@ const ViewWrapper = ({
            style={{ backgroundColor: MainColor.darkblue }}
          />
        )}
+
+        {/* Floating Component (misal: FAB) */}
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
      </KeyboardAvoidingView>
-
-      {/* <SafeAreaView
-        edges={["bottom"]}
-        style={{ flex: 1, backgroundColor: MainColor.soft_darkblue }}
-      >
-        <KeyboardAvoidingView
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-          style={{ flex: 1 }}
-        >
-          <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-            {withBackground ? (
-              <ImageBackground
-                source={assetBackground}
-                resizeMode="cover"
-                style={GStyles.imageBackground}
-              >
-                <View style={GStyles.containerWithBackground}>{children}</View>
-              </ImageBackground>
-            ) : (
-              <View style={GStyles.container}>{children}</View>
-            )}
-          </ScrollView>
-
-          {footerComponent ? (
-            <SafeAreaView
-              edges={["bottom"]}
-              style={{
-                // flex: 1,
-                backgroundColor: MainColor.darkblue,
-              }}
-            >
-              {footerComponent}
-            </SafeAreaView>
-          ) : null}
-        </KeyboardAvoidingView>
-      </SafeAreaView> */}
    </>
  );
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
    "react-native-international-phone-number": "^0.9.3",
    "react-native-maps": "1.20.1",
    "react-native-otp-entry": "^1.8.5",
+    "react-native-paper": "^5.14.5",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
@@ -50,9 +51,9 @@
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/react": "~19.0.10",
-    "typescript": "~5.8.3",
    "eslint": "^9.25.0",
-    "eslint-config-expo": "~9.2.0"
+    "eslint-config-expo": "~9.2.0",
+    "typescript": "~5.8.3"
  },
  "private": true
 }
--- a/screens/Forum/berandaSection.tsx
+++ b/screens/Forum/berandaSection.tsx
@@ -0,0 +1,76 @@
+import { BaseBox, Grid, AvatarCustom, TextCustom, ClickableCustom, Spacing } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Entypo, Ionicons } from "@expo/vector-icons";
+import { View } from "react-native";
+
+export default function Forum_BerandaSection() {
+    return (
+      <>
+        {Array.from({ length: 10 }).map((e, i) => (
+          <BaseBox key={i}>
+            <View>
+              <Grid>
+                <Grid.Col span={2}>
+                  <AvatarCustom />
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>Nama User</TextCustom>
+                  <TextCustom bold size="small" color="green">
+                    Open
+                  </TextCustom>
+                </Grid.Col>
+
+                <Grid.Col
+                  span={2}
+                  style={{
+                    justifyContent: "center",
+                  }}
+                >
+                  <ClickableCustom
+                    onPress={() => {}}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <Entypo
+                      name="dots-three-horizontal"
+                      color={MainColor.white}
+                      size={ICON_SIZE_SMALL}
+                    />
+                  </ClickableCustom>
+                </Grid.Col>
+              </Grid>
+
+              <View
+                style={{
+                  backgroundColor: MainColor.soft_darkblue,
+                  padding: 8,
+                  borderRadius: 8,
+                }}
+              >
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
+                  inventore iure pariatur, libero omnis excepturi. Ullam ad
+                  officiis deleniti quos esse odit nesciunt, ipsam adipisci
+                  cumque aliquam corporis culpa fugit?
+                </TextCustom>
+              </View>
+              <Spacing />
+
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+              >
+                <Ionicons
+                  name="chatbubble-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+                <TextCustom>2</TextCustom>
+              </View>
+            </View>
+          </BaseBox>
+        ))}
+      </>
+    );
+}
--- a/styles/global-styles.ts
+++ b/styles/global-styles.ts
@@ -42,6 +42,12 @@ export const GStyles = StyleSheet.create({
    // paddingTop: 8,
    // paddingBottom: 8,
  },
+  floatingContainer: {
+    position: "absolute",
+    bottom: 80,
+    right: 20,
+    zIndex: 8,
+  },

  // Style saat disabled
  disabledBox: {