Feature:

Add: - Component alert system - Page collaboration Id Fix: - Box base - Menu drawer dibuatkan interface # No Issue '
2025-07-23 15:40:53 +08:00
parent 70e324e76e
commit 30d61c84aa
8 changed files with 303 additions and 38 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -114,7 +114,7 @@ export default function UserLayout() {
          name="collaboration/(tabs)"
          options={{
            title: "Collaboration",
-            headerLeft: () => <BackButton />,
+            headerLeft: () => <BackButton path="/home" />,
          }}
        />
        <Stack.Screen
@@ -124,6 +124,13 @@ export default function UserLayout() {
            headerLeft: () => <BackButton />,
          }}
        />
+        <Stack.Screen
+          name="collaboration/[id]/list-of-participants"
+          options={{
+            title: "Daftar Partisipan",
+            headerLeft: () => <BackButton />,
+          }}
+        />

        {/* ========== End Collaboration Section ========= */}

--- a/app/(application)/(user)/collaboration/(tabs)/index.tsx
+++ b/app/(application)/(user)/collaboration/(tabs)/index.tsx
@@ -1,29 +1,28 @@
-import {
-    FloatingButton,
-    ViewWrapper
-} from "@/components";
+import { FloatingButton, ViewWrapper } from "@/components";
 import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
 import { router } from "expo-router";

 export default function CollaborationBeranda() {
  return (
-    <ViewWrapper
-      hideFooter
-      floatingButton={
-        <FloatingButton
-          onPress={() => {
-            router.push("/collaboration/create")
-          }}
-        />
-      }
-    >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Collaboration_BoxPublishSection
-          key={index}
-          id={index.toString()}
-          href={`/collaboration`}
-        />
-      ))}
-    </ViewWrapper>
+    <>
+      <ViewWrapper
+        hideFooter
+        floatingButton={
+          <FloatingButton
+            onPress={() => {
+              router.push("/collaboration/create");
+            }}
+          />
+        }
+      >
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Collaboration_BoxPublishSection
+            key={index}
+            id={index.toString()}
+            href={`/collaboration/${index}`}
+          />
+        ))}
+      </ViewWrapper>
+    </>
  );
 }
--- a/app/(application)/(user)/collaboration/[id]/index.tsx
+++ b/app/(application)/(user)/collaboration/[id]/index.tsx
@@ -0,0 +1,136 @@
+import {
+    AlertDefaultSystem,
+    AvatarUsernameAndOtherComponent,
+    BackButton,
+    BoxWithHeaderSection,
+    ButtonCustom,
+    DotButton,
+    DrawerCustom,
+    Grid,
+    MenuDrawerDynamicGrid,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function CollaborationDetail() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerPartisipasi, setOpenDrawerPartisipasi] = useState(false);
+  const [openDrawerMenu, setOpenDrawerMenu] = useState(false);
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerMenu(true)} />
+          ),
+        }}
+      />
+      <ViewWrapper>
+        <BoxWithHeaderSection>
+          <AvatarUsernameAndOtherComponent />
+          <Spacing />
+          <StackCustom>
+            <TextCustom align="center" bold size="large">
+              Judul Proyek {id}
+            </TextCustom>
+            <Spacing height={0} />
+            {listData.map((item, index) => (
+              <Grid key={index}>
+                <Grid.Col span={4}>
+                  <TextCustom bold>{item.title}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BoxWithHeaderSection>
+
+        <ButtonCustom onPress={() => setOpenDrawerPartisipasi(true)}>
+          Partisipasi
+        </ButtonCustom>
+      </ViewWrapper>
+
+      {/* Drawer Partisipasi */}
+      <DrawerCustom
+        isVisible={openDrawerPartisipasi}
+        closeDrawer={() => setOpenDrawerPartisipasi(false)}
+        height={300}
+      >
+        <TextAreaCustom
+          label="Dekripsi diri"
+          placeholder="Masukan dekripsi diri"
+          required
+          showCount
+          maxLength={500}
+        />
+
+        <ButtonCustom
+          style={{ alignSelf: "flex-end" }}
+          onPress={() => {
+            AlertDefaultSystem({
+              title: "Simpan data deskripsi",
+              message: "Apakah anda sudah yakin ingin menyimpan data ini ?",
+              textLeft: "Batal",
+              textRight: "Simpan",
+              onPressRight: () => router.replace(`/collaboration/(tabs)/group`),
+            });
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      </DrawerCustom>
+
+      {/* Drawer Menu */}
+      <DrawerCustom
+        isVisible={openDrawerMenu}
+        closeDrawer={() => setOpenDrawerMenu(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <Ionicons name="people" size={24} color="white" />,
+              label: "Daftar Partisipan",
+              path: `/collaboration/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawerMenu(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
+
+const listData = [
+  {
+    title: "Industri",
+    value: "Pilihan Industri",
+  },
+  {
+    title: "Deskripsi",
+    value: "Deskripsi Proyek",
+  },
+  {
+    title: "Tujuan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    title: "Keuntungan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];
--- a/app/(application)/(user)/collaboration/[id]/list-of-participants.tsx
+++ b/app/(application)/(user)/collaboration/[id]/list-of-participants.tsx
@@ -0,0 +1,80 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BaseBox,
+    DrawerCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { Feather } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { ScrollView } from "react-native";
+
+export default function CollaborationListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  return (
+    <>
+      <ViewWrapper>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index} paddingBlock={5}>
+            <AvatarUsernameAndOtherComponent
+              avatarHref={`/profile/${id}`}
+              rightComponent={
+                <Feather
+                  name="chevron-right"
+                  size={24}
+                  color="white"
+                  onPress={() => setOpenDrawer(true)}
+                />
+              }
+            />
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+
+      {/* Drawer */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <StackCustom>
+          <TextCustom bold>Deskripsi diri</TextCustom>
+          <ScrollView style={{ height: "80%" }}>
+            <TextCustom>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
+              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum
+              dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit
+              amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit
+              amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut iqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </TextCustom>
+          </ScrollView>
+          <Spacing />
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}
--- a/components/Alert/AlertDefaultSystem.ts
+++ b/components/Alert/AlertDefaultSystem.ts
@@ -0,0 +1,31 @@
+import { Alert } from "react-native";
+
+export default function AlertDefaultSystem({
+  title,
+  message,
+  textLeft,
+  textRight,
+  onPressLeft,
+  onPressRight,
+}: {
+  title: string;
+  message: string;
+  textLeft: string;
+  textRight: string;
+  onPressLeft?: () => void;
+  onPressRight?: () => void;
+}) {
+  return Alert.alert(title, message, [
+    {
+      style: "cancel",
+      text: textLeft,
+      onPress: () => onPressLeft?.(),
+    },
+    {
+      style: "default",
+      text: textRight,
+      isPreferred: true,
+      onPress: () => onPressRight?.(),
+    },
+  ]);
+}
--- a/components/Box/BoxWithHeaderInformation.tsx
+++ b/components/Box/BoxWithHeaderInformation.tsx
@@ -12,7 +12,7 @@ export default function BoxWithHeaderSection({
 }) {
  return (
    <>
-      <BaseBox href={href} onPress={onPress} paddingTop={5}>
+      <BaseBox href={href} onPress={onPress} style={{ paddingTop: 5 }}>
        {children}
      </BaseBox>
    </>
--- a/components/Drawer/MenuDrawerDynamicGird.tsx
+++ b/components/Drawer/MenuDrawerDynamicGird.tsx
@@ -2,13 +2,26 @@ import { AccentColor, MainColor } from "@/constants/color-palet";
 import { TEXT_SIZE_SMALL } from "@/constants/constans-value";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { IMenuDrawerItem } from "../_Interface/types";
+import { Href } from "expo-router";

-const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
+type IMenuDrawerItemProps = {
+    icon: React.ReactNode;
+    label: string;
+    path?: Href;
+    color?: string;
+}
+
+interface MenuDrawerDynamicGridProps {
+    data: IMenuDrawerItemProps[];
+    columns?: number;
+    onPressItem?: (item: IMenuDrawerItemProps) => void;
+}
+const MenuDrawerDynamicGrid = ({ data, columns = 4, onPressItem }: MenuDrawerDynamicGridProps) => {
  const numColumns = columns;

  return (
    <View style={styles.container}>
-      {data.map((item: IMenuDrawerItem, index: any) => (
+      {data.map((item: IMenuDrawerItemProps, index: any) => (
        <TouchableOpacity
          key={index}
          style={[styles.itemContainer, { flexBasis: `${100 / numColumns}%` }]}
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,5 +1,6 @@
 // Alert
 import AlertCustom from "./Alert/AlertCustom";
+import AlertDefaultSystem from "./Alert/AlertDefaultSystem";
 // Button
 import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
@@ -42,33 +43,31 @@ import ScrollableCustom from "./Scroll/ScrollCustom";
 // ShareComponent
 import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 import Spacing from "./_ShareComponent/Spacing";
-import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import TabBarBackground from "./_ShareComponent/TabBarBackground";
+import ViewWrapper from "./_ShareComponent/ViewWrapper";

 export {
  AlertCustom,
+  AlertDefaultSystem,
  // Image
  AvatarCustom,
  // ShareComponent
  AvatarUsernameAndOtherComponent,
+  // Button
+  LeftButtonCustom as BackButton,
  // Box
  BaseBox,
  BoxButtonOnFooter,
-  BoxWithHeaderSection,
-  // Button
-  LeftButtonCustom as BackButton,
-  ButtonCenteredOnly,
+  BoxWithHeaderSection, ButtonCenteredOnly,
  ButtonCustom,
-  FloatingButton,
-  DotButton,
  // Center
  CenterCustom,
  // Clickable
  ClickableCustom,
  // Divider
-  DividerCustom,
+  DividerCustom, DotButton,
  // Drawer
-  DrawerCustom,
+  DrawerCustom, FloatingButton,
  // Grid
  Grid,
  InformationBox,
@@ -82,9 +81,8 @@ export {
  SelectCustom,
  // ShareComponent
  Spacing,
-  TabBarBackground,
  // Stack
-  StackCustom,
+  StackCustom, TabBarBackground,
  // TextArea
  TextAreaCustom,
  // Text
@@ -92,5 +90,6 @@ export {
  // TextInput
  TextInputCustom,
  // ViewWrapper
-  ViewWrapper,
+  ViewWrapper
 };
+