Integrasi API: Admin Collaboration

Fix: Tampilan yang terintegrasi API
 - app/(application)/(user)/collaboration/[id]/edit.tsx
 - app/(application)/admin/collaboration/[id]/[status].tsx
 - app/(application)/admin/collaboration/[id]/group.tsx
 - app/(application)/admin/collaboration/[id]/reject-input.tsx
 - app/(application)/admin/collaboration/group.tsx
 - app/(application)/admin/collaboration/index.tsx
 - app/(application)/admin/collaboration/publish.tsx
 - app/(application)/admin/collaboration/reject.tsx
 - components/_ShareComponent/Admin/TableValue.tsx
 - screens/Collaboration/BoxPublishSection.tsx
 - service/api-admin/api-admin-collaboration.ts

### No Issue

app/(application)/(user)/collaboration/[id]/edit.tsx

@@ -19,7 +19,6 @@ import Toast from "react-native-toast-message";
 
 export default function CollaborationEdit() {
   const { id } = useLocalSearchParams();
-  console.log("id :", id);
   const [data, setData] = useState<any>();
   const [listMaster, setListMaster] = useState<any[]>([]);
   const [loadingData, setLoadingData] = useState(false);

app/(application)/admin/collaboration/[id]/[status].tsx

@@ -9,6 +9,7 @@ import {
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import { MainColor } from "@/constants/color-palet";
 import { apiAdminCollaborationGetById } from "@/service/api-admin/api-admin-collaboration";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -28,7 +29,7 @@ export default function AdminCollaborationPublish() {
     try {
       const response = await apiAdminCollaborationGetById({
         id: id as string,
-        category: status as "publish" | "reject" | "group",
+        category: status as any,
       });
 
       if (response.success) {
@@ -39,7 +40,7 @@ export default function AdminCollaborationPublish() {
     }
   };
 
-  const bottomFooter = (
+  const bottomFooter = status === "publish" && (
     <BoxButtonOnFooter>
       <ButtonCustom
         backgroundColor={MainColor.red}
@@ -76,6 +77,17 @@ export default function AdminCollaborationPublish() {
             ))}
           </StackCustom>
         </BaseBox>
+
+      {data?.report && (
+        <BaseBox>
+          <GridTwoView
+            spanLeft={4}
+            spanRight={8}
+            leftIcon={<TextCustom bold>Catatan report</TextCustom>}
+            rightIcon={<TextCustom>{data?.report}</TextCustom>}
+          />
+        </BaseBox>
+      )}
       </ViewWrapper>
     </>
   );

app/(application)/admin/collaboration/[id]/group.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
@@ -6,23 +7,45 @@ import {
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { useLocalSearchParams } from "expo-router";
+import { apiAdminCollaborationGetById } from "@/service/api-admin/api-admin-collaboration";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminCollaborationGroup() {
   const { id } = useLocalSearchParams();
-  console.log("params:", id);
+  const [data, setData] = useState<any | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminCollaborationGetById({
+        id: id as string,
+        category: "group",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <>
       <ViewWrapper
-        headerComponent={
+        headerComponent={<AdminBackButtonAntTitle title={`Detail Group`} />}
-          <AdminBackButtonAntTitle title={`Detail Group ${id}`} />
-        }
       >
         <StackCustom gap={"xs"}>
           <BaseBox>
             <StackCustom>
-              {listData.map((item, i) => (
+              {listData(data).map((item: any, index: number) => (
-                <Grid key={i}>
+                <Grid key={index}>
                   <Grid.Col
                     span={4}
                     style={{ justifyContent: "center", paddingRight: 10 }}
@@ -40,21 +63,36 @@ export default function AdminCollaborationGroup() {
             <StackCustom>
               <TextCustom align="center">Anggota</TextCustom>
 
-              {Array.from({ length: 10 }).map((_, i) => (
+              {data?.ProjectCollaboration_AnggotaRoomChat?.map(
-                <Grid key={i}>
+                (item: any, index: number) => (
-                  <Grid.Col
+                  <StackCustom key={index} gap={0}>
-                    span={4}
+                    <Grid>
-                    style={{ justifyContent: "center", paddingRight: 10 }}
+                      <Grid.Col
-                  >
+                        span={4}
-                    <TextCustom bold>Username</TextCustom>
+                        style={{ justifyContent: "center", paddingRight: 10 }}
-                  </Grid.Col>
+                      >
-                  <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                        <TextCustom bold>Nama</TextCustom>
-                    <TextCustom>
+                      </Grid.Col>
-                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                      <Grid.Col span={8} style={{ justifyContent: "center" }}>
-                    </TextCustom>
+                        <TextCustom>
-                  </Grid.Col>
+                          {item?.User?.Profile?.name || "-"}
-                </Grid>
+                        </TextCustom>
-              ))}
+                      </Grid.Col>
+                    </Grid>
+                    <Grid>
+                      <Grid.Col
+                        span={4}
+                        style={{ justifyContent: "center", paddingRight: 10 }}
+                      >
+                        <TextCustom bold>Username</TextCustom>
+                      </Grid.Col>
+                      <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                        <TextCustom>{item?.User?.username || "-"}</TextCustom>
+                      </Grid.Col>
+                    </Grid>
+                  </StackCustom>
+                )
+              )}
             </StackCustom>
           </BaseBox>
         </StackCustom>
@@ -63,35 +101,35 @@ export default function AdminCollaborationGroup() {
   );
 }
 
-const listData = [
+const listData = (data: any) => [
   {
     label: "Admin Group",
-    value: "Bagas Banuna",
+    value: data?.ProjectCollaboration?.Author?.username || "-",
   },
   {
     label: "Nama Group",
-    value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    value: data?.name || "-",
   },
   {
     label: "Industri",
-    value: "Kesehatan",
+    value:
+      data?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name ||
+      "-",
   },
   {
     label: "Jumlah Partisipan ",
-    value: "0",
+    value: data?.ProjectCollaboration_AnggotaRoomChat?.length || "-",
   },
   {
     label: "Lokasi",
-    value: "Kuta Selatan, Bali",
+    value: data?.ProjectCollaboration?.lokasi || "-",
   },
   {
     label: "Tujuan Proyek",
-    value:
+    value: data?.ProjectCollaboration?.purpose || "-",
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     label: "Keuntungan",
-    value:
+    value: data?.ProjectCollaboration?.benefit || "-",
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
 ];

app/(application)/admin/collaboration/[id]/reject-input.tsx

@@ -6,12 +6,41 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { apiAdminCollaborationReject } from "@/service/api-admin/api-admin-collaboration";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function AdminCollaborationRejectInput() {
   const { id } = useLocalSearchParams();
-  const [value, setValue] = useState(id as string);
+  const [value, setValue] = useState("");
+
+  const handlerReject = async () => {
+    console.log("value:", value);
+    // router.replace(`/admin/job/reject/status`);
+    try {
+      const response = await apiAdminCollaborationReject({
+        id: id as string,
+        data: value,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Report gagal",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Report berhasil",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   const buttonSubmit = (
     <BoxButtonOnFooter>
@@ -23,12 +52,8 @@ export default function AdminCollaborationRejectInput() {
             message: "Apakah anda yakin ingin menolak data ini?",
             textLeft: "Batal",
             textRight: "Ya",
-            onPressLeft: () => {
-              router.back();
-            },
             onPressRight: () => {
-              console.log("value:", value);
+              handlerReject();
-              // router.replace(`/admin/job/reject/status`);
             },
           })
         }
@@ -40,7 +65,9 @@ export default function AdminCollaborationRejectInput() {
     <>
       <ViewWrapper
         footerComponent={buttonSubmit}
-        headerComponent={<AdminBackButtonAntTitle title="Penolakan Collaboration" />}
+        headerComponent={
+          <AdminBackButtonAntTitle title="Penolakan Collaboration" />
+        }
       >
         <TextAreaCustom
           value={value}

app/(application)/admin/collaboration/group.tsx

@@ -1,67 +1,101 @@
 import {
   ActionIcon,
-  BaseBox,
+  LoaderCustom,
-  Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminCollaboration } from "@/service/api-admin/api-admin-collaboration";
 import { Octicons } from "@expo/vector-icons";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { Divider } from "react-native-paper";
 
 export default function AdminCollaborationGroup() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminCollaboration({
+        category: "group",
+      });
+      
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
-        <StackCustom gap={"xs"}>
+        <StackCustom>
           <AdminComp_BoxTitle title="Group" />
-          <BaseBox>
+          <>
             <AdminTitleTable
               title1="Aksi"
-              title2="Admin Group"
+              title2="Jumlah peserta"
-              title3="Nama Group"
+              title3="Nama group"
             />
-            <Spacing height={10} />
             <Divider />
 
-            {Array.from({ length: 10 }).map((_, index) => (
+            {loadList ? (
-              <AdminTableValue
+              <LoaderCustom />
-                key={index}
+            ) : _.isEmpty(list) ? (
-                value1={
+              <TextCustom align="center" color="gray">
-                  <ActionIcon
+                Belum ada data
-                    icon={
+              </TextCustom>
-                      <Octicons
+            ) : (
-                        name="eye"
+              list?.map((item: any, index: number) => (
-                        size={ICON_SIZE_BUTTON}
+                <View key={index}>
-                        color="black"
+                  <AdminTableValue
+                    value1={
+                      <ActionIcon
+                        icon={
+                          <Octicons
+                            name="eye"
+                            size={ICON_SIZE_BUTTON}
+                            color="black"
+                          />
+                        }
+                        onPress={() => {
+                          router.push(`/admin/collaboration/${item.id}/group`);
+                        }}
                       />
                     }
-                    onPress={() => {
+                    value2={
-                      router.push(`/admin/collaboration/${index}/group`);
+                      <TextCustom truncate={1}>
-                    }}
+                        {item?.ProjectCollaboration_AnggotaRoomChat?.length ||
+                          "-"}
+                      </TextCustom>
+                    }
+                    value3={
+                      <TextCustom truncate={2}>{item?.name || "-"}</TextCustom>
+                    }
                   />
-                }
+                </View>
-                value2={
+              ))
-                  <TextCustom truncate={1}>Username username </TextCustom>
+            )}
-                }
+          </>
-                value3={
-                  <TextCustom truncate={2}>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Blanditiis asperiores quidem deleniti architecto eaque et
-                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
-                    ducimus! Dolorem nobis modi officia debitis, beatae
-                    mollitia.
-                  </TextCustom>
-                }
-              />
-            ))}
-          </BaseBox>
         </StackCustom>
       </ViewWrapper>
     </>

app/(application)/admin/collaboration/index.tsx

@@ -9,7 +9,6 @@ import { useCallback, useState } from "react";
 
 export default function AdminCollaboration() {
   const [list, setList] = useState<any | null>(null);
-  const [loadList, setLoadList] = useState(false);
 
   useFocusEffect(
     useCallback(() => {
@@ -19,7 +18,6 @@ export default function AdminCollaboration() {
 
   const handlerLoadList = async () => {
     try {
-      setLoadList(true);
       const response = await apiAdminCollaboration({
         category: "dashboard",
       });
@@ -31,8 +29,6 @@ export default function AdminCollaboration() {
       }
     } catch (error) {
       console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
     }
   };
 

app/(application)/admin/collaboration/publish.tsx

@@ -15,6 +15,7 @@ import { Octicons } from "@expo/vector-icons";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { Divider } from "react-native-paper";
 
 export default function AdminCollaborationPublish() {
@@ -43,10 +44,11 @@ export default function AdminCollaborationPublish() {
       setLoadList(false);
     }
   };
+
   return (
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
-        <StackCustom gap={"xs"}>
+        <StackCustom>
           <AdminComp_BoxTitle title="Publish" />
 
           <AdminTitleTable
@@ -60,36 +62,39 @@ export default function AdminCollaborationPublish() {
           {loadList ? (
             <LoaderCustom />
           ) : _.isEmpty(list) ? (
-            <TextCustom>Belum ada data</TextCustom>
+            <TextCustom align="center" color="gray">
+              Belum ada data
+            </TextCustom>
           ) : (
             list?.map((item: any, index: number) => (
-              <AdminTableValue
+              <View key={index}>
-                key={index}
+                <AdminTableValue
-                value1={
+                  value1={
-                  <ActionIcon
+                    <ActionIcon
-                    icon={
+                      icon={
-                      <Octicons
+                        <Octicons
-                        name="eye"
+                          name="eye"
-                        size={ICON_SIZE_BUTTON}
+                          size={ICON_SIZE_BUTTON}
-                        color="black"
+                          color="black"
-                      />
+                        />
-                    }
+                      }
-                    onPress={() => {
+                      onPress={() => {
-                      router.push(`/admin/collaboration/${item?.id}/publish`);
+                        router.push(`/admin/collaboration/${item?.id}/publish`);
-                    }}
+                      }}
-                  />
+                    />
-                }
+                  }
-                value2={
+                  value2={
-                  <TextCustom align="center" truncate={1}>
+                    <TextCustom align="center" truncate={1}>
-                    {item?.Author?.username || "-"}{" "}
+                      {item?.Author?.username || "-"}{" "}
-                  </TextCustom>
+                    </TextCustom>
-                }
+                  }
-                value3={
+                  value3={
-                  <TextCustom align="center" truncate={2}>
+                    <TextCustom align="center" truncate={2}>
-                    {item?.title || "-"}
+                      {item?.title || "-"}
-                  </TextCustom>
+                    </TextCustom>
-                }
+                  }
-              />
+                />
+              </View>
             ))
           )}
         </StackCustom>

app/(application)/admin/collaboration/reject.tsx

@@ -1,67 +1,99 @@
 import {
   ActionIcon,
-  BaseBox,
+  LoaderCustom,
-  Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminCollaboration } from "@/service/api-admin/api-admin-collaboration";
 import { Octicons } from "@expo/vector-icons";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { Divider } from "react-native-paper";
 
 export default function AdminCollaborationReject() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminCollaboration({
+        category: "reject",
+      });
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
-        <StackCustom gap={"xs"}>
+        <StackCustom>
           <AdminComp_BoxTitle title="Reject" />
-          <BaseBox>
+          <AdminTitleTable
-            <AdminTitleTable
+            title1="Aksi"
-              title1="Aksi"
+            title2="Username"
-              title2="Username"
+            title3="Judul Proyek"
-              title3="Judul Proyek"
+          />
-            />
+          <Divider />
-            <Spacing height={10} />
-            <Divider />
 
-            {Array.from({ length: 10 }).map((_, index) => (
+          {loadList ? (
-              <AdminTableValue
+            <LoaderCustom />
-                key={index}
+          ) : _.isEmpty(list) ? (
-                value1={
+            <TextCustom>Belum ada data</TextCustom>
-                  <ActionIcon
+          ) : (
-                    icon={
+            list?.map((item: any) => (
-                      <Octicons
+              <View key={item.id}>
-                        name="eye"
+                <AdminTableValue
-                        size={ICON_SIZE_BUTTON}
+                  key={item?.id}
-                        color="black"
+                  value1={
-                      />
+                    <ActionIcon
-                    }
+                      icon={
-                    onPress={() => {
+                        <Octicons
-                      router.push(`/admin/collaboration/${index}/reject`);
+                          name="eye"
-                    }}
+                          size={ICON_SIZE_BUTTON}
-                  />
+                          color="black"
-                }
+                        />
-                value2={
+                      }
-                  <TextCustom truncate={1}>Username username </TextCustom>
+                      onPress={() => {
-                }
+                        router.push(`/admin/collaboration/${item?.id}/reject`);
-                value3={
+                      }}
-                  <TextCustom truncate={2}>
+                    />
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  }
-                    Blanditiis asperiores quidem deleniti architecto eaque et
+                  value2={
-                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                    <TextCustom align="center" truncate={1}>
-                    ducimus! Dolorem nobis modi officia debitis, beatae
+                      {item?.Author?.username || "-"}
-                    mollitia.
+                    </TextCustom>
-                  </TextCustom>
+                  }
-                }
+                  value3={
-              />
+                    <TextCustom align="center" truncate={2}>
-            ))}
+                      {item?.title || "-"}
-          </BaseBox>
+                    </TextCustom>
+                  }
+                />
+              </View>
+            ))
+          )}
         </StackCustom>
       </ViewWrapper>
     </>

components/_ShareComponent/Admin/TableValue.tsx

@@ -7,10 +7,12 @@ export default function AdminTableValue({
   value1,
   value2,
   value3,
+  bottomLine = false,
 }: {
   value1: React.ReactNode;
   value2: React.ReactNode;
   value3: React.ReactNode;
+  bottomLine?: boolean;
 }) {
   return (
     <>
@@ -50,7 +52,7 @@ export default function AdminTableValue({
             {value3}
           </Grid.Col>
         </Grid>
-        <Divider />
+        {bottomLine && <Divider />}
       </View>
     </>
   );

screens/Collaboration/BoxPublishSection.tsx

@@ -15,23 +15,24 @@ function Collaboration_BoxPublishSection({
   data: any;
   rightComponentAvatar?: React.ReactNode;
 }) {
+
   return (
     <>
       <BoxWithHeaderSection href={href}>
         <StackCustom gap={0}>
           <AvatarUsernameAndOtherComponent
-            avatarHref={`/profile/${data?.Author?.id}`}
+            avatarHref={`/profile/${data?.Author?.Profile?.id}`}
             name={data?.Author?.username || "Username"}
             rightComponent={rightComponentAvatar}
             avatar={data?.Author?.Profile?.imageId}
             withBottomLine
           />
 
-          <StackCustom>
+          <StackCustom style={{paddingBlock: 10}}>
             <TextCustom truncate size="large" bold align="center">
               {data?.title || "-"}
             </TextCustom>
-            <TextCustom truncate={2}>{data?.purpose || "-"}</TextCustom>
+            {/* <TextCustom truncate={2}>{data?.purpose || "-"}</TextCustom> */}
             {/* <TextCustom bold size="small" >
             2 Partisipan
           </TextCustom> */}

service/api-admin/api-admin-collaboration.ts

@@ -31,3 +31,20 @@ export async function apiAdminCollaborationGetById({
     throw error;
   }
 }
+
+export async function apiAdminCollaborationReject({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/admin/collaboration/${id}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}