Collaboration Mobile API

Add:
- /admin/collaboration/[id]/reject-input.tsx
- /api-admin/api-admin-collaboration.ts

Fix:
- Integrasi ke tampilan UI
app/(application)/admin/collaboration/[id]/[status].tsx
app/(application)/admin/collaboration/index.tsx
app/(application)/admin/collaboration/publish.tsx
components/_ShareComponent/Admin/TableTitle.tsx
components/_ShareComponent/Admin/TableValue.tsx

### No Issue

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -9,17 +10,43 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { MainColor } from "@/constants/color-palet";
-import { useLocalSearchParams } from "expo-router";
+import { apiAdminCollaborationGetById } from "@/service/api-admin/api-admin-collaboration";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminCollaborationPublish() {
   const { id, status } = useLocalSearchParams();
-  console.log("params:", id, status);
+  const [data, setData] = useState<any | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadData();
+    }, [status])
+  );
+
+  const handlerLoadData = async () => {
+    try {
+      const response = await apiAdminCollaborationGetById({
+        id: id as string,
+        category: status as "publish" | "reject" | "group",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const bottomFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
         backgroundColor={MainColor.red}
         textColor="white"
-        onPress={() => {}}
+        onPress={() => {
+          router.push(`/admin/collaboration/${id}/reject-input`);
+        }}
       >
         Reject
       </ButtonCustom>
@@ -29,12 +56,12 @@ export default function AdminCollaborationPublish() {
   return (
     <>
       <ViewWrapper
-        headerComponent={<AdminBackButtonAntTitle title={`Detail ${status}`} />}
+        headerComponent={<AdminBackButtonAntTitle title={`Detail`} />}
         footerComponent={bottomFooter}
       >
         <BaseBox>
           <StackCustom>
-            {listData.map((item, i) => (
+            {listData(data)?.map((item, i) => (
               <Grid key={i}>
                 <Grid.Col
                   span={4}
@@ -54,36 +81,33 @@ export default function AdminCollaborationPublish() {
   );
 }
 
-const listData = [
+const listData = (data: any) => [
   {
     label: "Username",
-    value: "Bagas Banuna",
+    value: (data && data?.Author?.username) || "-",
   },
   {
     label: "Judul Proyek",
-    value:
+    value: (data && data?.title) || "-",
-      "Judul Proyek: Lorem ipsum dolor sit amet consectetur adipisicing elit.",
   },
   {
     label: "Industri",
-    value: "Kesehatan",
+    value: (data && data?.ProjectCollaborationMaster_Industri?.name) || "-",
   },
   {
     label: "Jumlah Partisipan ",
-    value: "0",
+    value: (data && data?.ProjectCollaboration_Partisipasi.length) || "0",
   },
   {
     label: "Lokasi",
-    value: "Kuta Selatan, Bali",
+    value: (data && data?.lokasi) || "-",
   },
   {
     label: "Tujuan Proyek",
-    value:
+    value: (data && data?.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 && data?.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

@@ -0,0 +1,56 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminCollaborationRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              // router.replace(`/admin/job/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Collaboration" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -2,14 +2,45 @@ import { StackCustom, ViewWrapper } from "@/components";
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminCollaboration } from "@/service/api-admin/api-admin-collaboration";
 import { Entypo, FontAwesome } from "@expo/vector-icons";
+import { useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminCollaboration() {
+  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: "dashboard",
+      });
+
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
         <StackCustom gap={"xs"}>
-          {listData.map((item, i) => (
+          {listData(list as any).map((item, i) => (
             <AdminComp_BoxDashboard key={i} item={item} />
           ))}
         </StackCustom>
@@ -18,20 +49,23 @@ export default function AdminCollaboration() {
   );
 }
 
-const listData = [
+const listData = (list: any) => {
-  {
+  console.log("[LIST masuk]", JSON.stringify(list, null, 2));
-    label: "Publish",
+  return [
-    value: 4,
+    {
-    icon: <Entypo name="publish" size={25} color={MainColor.green} />,
+      label: "Publish",
-  },
+      value: (list && list?.publish) || "0",
-  {
+      icon: <Entypo name="publish" size={25} color={MainColor.green} />,
-    label: "Group",
+    },
-    value: 7,
+    {
-    icon: <FontAwesome name="group" size={25} color={MainColor.yellow} />,
+      label: "Group",
-  },
+      value: (list && list?.group) || "0",
-  {
+      icon: <FontAwesome name="group" size={25} color={MainColor.yellow} />,
-    label: "Reject",
+    },
-    value: 7,
+    {
-    icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+      label: "Reject",
-  },
+      value: (list && list?.reject) || "0",
-];
+      icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+    },
+  ];
+};

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

@@ -1,7 +1,6 @@
 import {
   ActionIcon,
-  BaseBox,
+  LoaderCustom,
-  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
@@ -11,26 +10,59 @@ 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 { Divider } from "react-native-paper";
 
 export default function AdminCollaborationPublish() {
+  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: "publish",
+      });
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
   return (
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
         <StackCustom gap={"xs"}>
           <AdminComp_BoxTitle title="Publish" />
-          <BaseBox>
-            <AdminTitleTable
-              title1="Aksi"
-              title2="Username"
-              title3="Judul Proyek"
-            />
-            <Spacing height={10} />
-            <Divider />
 
-            {Array.from({ length: 10 }).map((_, index) => (
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Proyek"
+          />
+          {/* <Spacing height={10} /> */}
+          <Divider />
+
+          {loadList ? (
+            <LoaderCustom />
+          ) : _.isEmpty(list) ? (
+            <TextCustom>Belum ada data</TextCustom>
+          ) : (
+            list?.map((item: any, index: number) => (
               <AdminTableValue
                 key={index}
                 value1={
@@ -43,28 +75,25 @@ export default function AdminCollaborationPublish() {
                       />
                     }
                     onPress={() => {
-                      router.push(`/admin/collaboration/${index}/publish`);
+                      router.push(`/admin/collaboration/${item?.id}/publish`);
                     }}
                   />
                 }
                 value2={
-                  <TextCustom truncate={1}>Username username </TextCustom>
+                  <TextCustom align="center" truncate={1}>
+                    {item?.Author?.username || "-"}{" "}
+                  </TextCustom>
                 }
                 value3={
-                  <TextCustom truncate={2}>
+                  <TextCustom align="center" truncate={2}>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    {item?.title || "-"}
-                    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>
     </>
   );
 }
-

components/_ShareComponent/Admin/TableTitle.tsx

@@ -13,14 +13,32 @@ export default function AdminTitleTable({
   return (
     <>
       <Grid>
-        <Grid.Col span={3} style={{ alignItems: "center", justifyContent: "center" }}>
+        <Grid.Col
-          <TextCustom bold align="center">{title1}</TextCustom>
+          span={3}
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            paddingLeft: 5,
+            paddingRight: 5,
+          }}
+        >
+          <TextCustom truncate bold align="center">
+            {title1}
+          </TextCustom>
         </Grid.Col>
-        <Grid.Col span={3} style={{ alignItems: "center", justifyContent: "center" }}>
+        <Grid.Col
-          <TextCustom bold align="center">{title2}</TextCustom>
+          span={3}
+          style={{ alignItems: "center", justifyContent: "center", paddingLeft: 5, paddingRight: 5 }}
+        >
+          <TextCustom truncate bold align="center">
+            {title2}
+          </TextCustom>
         </Grid.Col>
-        <Grid.Col span={6} style={{ alignItems: "center", justifyContent: "center" }}>
+        <Grid.Col
-          <TextCustom bold align="center">{title3}</TextCustom>
+          span={6}
+          style={{ alignItems: "center", justifyContent: "center", paddingLeft: 5, paddingRight: 5 }}
+        >
+          <TextCustom truncate bold align="center">{title3}</TextCustom>
         </Grid.Col>
       </Grid>
     </>

components/_ShareComponent/Admin/TableValue.tsx

@@ -21,8 +21,8 @@ export default function AdminTableValue({
             style={{
               alignItems: "center",
               justifyContent: "center",
-              paddingLeft: 5,
+              paddingLeft: 10,
-              paddingRight: 5,
+              paddingRight: 10,
             }}
           >
             {value1}
@@ -32,8 +32,8 @@ export default function AdminTableValue({
             style={{
               alignItems: "center",
               justifyContent: "center",
-              paddingLeft: 5,
+              paddingLeft: 10,
-              paddingRight: 5,
+              paddingRight: 10,
             }}
           >
             {value2}
@@ -42,8 +42,9 @@ export default function AdminTableValue({
             span={6}
             style={{
               justifyContent: "center",
-              paddingLeft: 5,
+              alignItems: "center",
-              paddingRight: 5,
+              paddingLeft: 10,
+              paddingRight: 10,
             }}
           >
             {value3}

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

@@ -0,0 +1,33 @@
+import { apiConfig } from "../api-config";
+
+export async function apiAdminCollaboration({
+  category,
+}: {
+  category: "dashboard" | "publish" | "reject" | "group";
+}) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/collaboration?category=${category}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminCollaborationGetById({
+  id,
+  category,
+}: {
+  id: string;
+  category: "publish" | "reject" | "group";
+}) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/collaboration/${id}?category=${category}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}