Integrasi API: Admin Job

Add:
-  service/api-admin/api-admin-job.ts

Fix:
 modified:   app/(application)/admin/job/[status]/status.tsx
        modified:   app/(application)/admin/job/index.tsx
        modified:   components/_ShareComponent/SearchInput.tsx

### 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={
-          <AdminBackButtonAntTitle title={`Detail Group ${id}`} />
-        }
+        headerComponent={<AdminBackButtonAntTitle title={`Detail Group`} />}
       >
         <StackCustom gap={"xs"}>
           <BaseBox>
             <StackCustom>
-              {listData.map((item, i) => (
-                <Grid key={i}>
+              {listData(data).map((item: any, index: number) => (
+                <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) => (
-                <Grid key={i}>
-                  <Grid.Col
-                    span={4}
-                    style={{ justifyContent: "center", paddingRight: 10 }}
-                  >
-                    <TextCustom bold>Username</TextCustom>
-                  </Grid.Col>
-                  <Grid.Col span={8} style={{ justifyContent: "center" }}>
-                    <TextCustom>
-                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    </TextCustom>
-                  </Grid.Col>
-                </Grid>
-              ))}
+              {data?.ProjectCollaboration_AnggotaRoomChat?.map(
+                (item: any, index: number) => (
+                  <StackCustom key={index} gap={0}>
+                    <Grid>
+                      <Grid.Col
+                        span={4}
+                        style={{ justifyContent: "center", paddingRight: 10 }}
+                      >
+                        <TextCustom bold>Nama</TextCustom>
+                      </Grid.Col>
+                      <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                        <TextCustom>
+                          {item?.User?.Profile?.name || "-"}
+                        </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:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: data?.ProjectCollaboration?.purpose || "-",
   },
   {
     label: "Keuntungan",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: data?.ProjectCollaboration?.benefit || "-",
   },
 ];

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);
-              // router.replace(`/admin/job/reject/status`);
+              handlerReject();
             },
           })
         }
@@ -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,
-  Spacing,
+  LoaderCustom,
   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"
-              title3="Nama Group"
+              title2="Jumlah peserta"
+              title3="Nama group"
             />
-            <Spacing height={10} />
             <Divider />
 
-            {Array.from({ length: 10 }).map((_, index) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
+            {loadList ? (
+              <LoaderCustom />
+            ) : _.isEmpty(list) ? (
+              <TextCustom align="center" color="gray">
+                Belum ada data
+              </TextCustom>
+            ) : (
+              list?.map((item: any, index: number) => (
+                <View key={index}>
+                  <AdminTableValue
+                    value1={
+                      <ActionIcon
+                        icon={
+                          <Octicons
+                            name="eye"
+                            size={ICON_SIZE_BUTTON}
+                            color="black"
+                          />
+                        }
+                        onPress={() => {
+                          router.push(`/admin/collaboration/${item.id}/group`);
+                        }}
                       />
                     }
-                    onPress={() => {
-                      router.push(`/admin/collaboration/${index}/group`);
-                    }}
+                    value2={
+                      <TextCustom truncate={1}>
+                        {item?.ProjectCollaboration_AnggotaRoomChat?.length ||
+                          "-"}
+                      </TextCustom>
+                    }
+                    value3={
+                      <TextCustom truncate={2}>{item?.name || "-"}</TextCustom>
+                    }
                   />
-                }
-                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>
+                </View>
+              ))
+            )}
+          </>
         </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
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/collaboration/${item?.id}/publish`);
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom align="center" truncate={1}>
-                    {item?.Author?.username || "-"}{" "}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom align="center" truncate={2}>
-                    {item?.title || "-"}
-                  </TextCustom>
-                }
-              />
+              <View key={index}>
+                <AdminTableValue
+                  value1={
+                    <ActionIcon
+                      icon={
+                        <Octicons
+                          name="eye"
+                          size={ICON_SIZE_BUTTON}
+                          color="black"
+                        />
+                      }
+                      onPress={() => {
+                        router.push(`/admin/collaboration/${item?.id}/publish`);
+                      }}
+                    />
+                  }
+                  value2={
+                    <TextCustom align="center" truncate={1}>
+                      {item?.Author?.username || "-"}{" "}
+                    </TextCustom>
+                  }
+                  value3={
+                    <TextCustom align="center" truncate={2}>
+                      {item?.title || "-"}
+                    </TextCustom>
+                  }
+                />
+              </View>
             ))
           )}
         </StackCustom>

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

@@ -1,67 +1,99 @@
 import {
   ActionIcon,
-  BaseBox,
-  Spacing,
+  LoaderCustom,
   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
-              title1="Aksi"
-              title2="Username"
-              title3="Judul Proyek"
-            />
-            <Spacing height={10} />
-            <Divider />
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Proyek"
+          />
+          <Divider />
 
-            {Array.from({ length: 10 }).map((_, index) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/collaboration/${index}/reject`);
-                    }}
-                  />
-                }
-                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>
+          {loadList ? (
+            <LoaderCustom />
+          ) : _.isEmpty(list) ? (
+            <TextCustom>Belum ada data</TextCustom>
+          ) : (
+            list?.map((item: any) => (
+              <View key={item.id}>
+                <AdminTableValue
+                  key={item?.id}
+                  value1={
+                    <ActionIcon
+                      icon={
+                        <Octicons
+                          name="eye"
+                          size={ICON_SIZE_BUTTON}
+                          color="black"
+                        />
+                      }
+                      onPress={() => {
+                        router.push(`/admin/collaboration/${item?.id}/reject`);
+                      }}
+                    />
+                  }
+                  value2={
+                    <TextCustom align="center" truncate={1}>
+                      {item?.Author?.username || "-"}
+                    </TextCustom>
+                  }
+                  value3={
+                    <TextCustom align="center" truncate={2}>
+                      {item?.title || "-"}
+                    </TextCustom>
+                  }
+                />
+              </View>
+            ))
+          )}
         </StackCustom>
       </ViewWrapper>
     </>

app/(application)/admin/job/[status]/status.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
-  BaseBox,
+  LoaderCustom,
   SearchInput,
-  Spacing,
+  StackCustom,
   TextCustom,
   ViewWrapper
 } from "@/components";
@@ -11,17 +12,52 @@ 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 { apiAdminJob } from "@/service/api-admin/api-admin-job";
 import { Octicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
+import { useCallback, useState } from "react";
 import { Divider } from "react-native-paper";
 
 export default function AdminJobStatus() {
   const { status } = useLocalSearchParams();
+  console.log("[STATUS]", status);
+
+  const [list, setList] = useState<any | null>(null);
+  const [loadList, setLoadList] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [status, search])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminJob({
+        category: status as "publish" | "review" | "reject",
+        search,
+      });
+
+      console.log("[RESPONSE >>]", JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   const rightComponent = (
     <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
       placeholder="Cari"
+      onChangeText={setSearch}
+      value={search}
     />
   );
   return (
@@ -32,44 +68,53 @@ export default function AdminJobStatus() {
           rightComponent={rightComponent}
         />
 
-        <BaseBox>
+        <StackCustom>
           <AdminTitleTable
             title1="Aksi"
             title2="Username"
             title3="Judul Pekerjaan"
           />
-          <Spacing />
+          {/* <Spacing /> */}
           <Divider />
 
-          {Array.from({ length: 10 }).map((_, index) => (
-            <AdminTableValue
-              key={index}
-              value1={
-                <ActionIcon
-                  icon={
-                    <Octicons
-                      name="eye"
-                      size={ICON_SIZE_BUTTON}
-                      color="black"
-                    />
-                  }
-                  onPress={() => {
-                    router.push(`/admin/job/${index}/${status}`);
-                  }}
-                />
-              }
-              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>
+          {loadList ? (
+            <LoaderCustom />
+          ) : _.isEmpty(list) ? (
+            <TextCustom align="center" color="gray">
+              Tidak ada data
+            </TextCustom>
+          ) : (
+            list?.map((item: any, index: number) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/job/${item.id}/${status}`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom align="center" truncate={1}>
+                    {item?.Author?.username || "-"}
+                  </TextCustom>
+                }
+                value3={
+                  <TextCustom truncate={2} align="center">
+                    {item?.title || "-"}
+                  </TextCustom>
+                }
+              />
+            ))
+          )}
+        </StackCustom>
       </ViewWrapper>
     </>
   );

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Spacing, StackCustom, ViewWrapper } from "@/components";
 import {
   IconPublish,
@@ -7,15 +8,45 @@ import {
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminJob } from "@/service/api-admin/api-admin-job";
+import { useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminJob() {
+  const [data, setData] = useState<any | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminJob({
+        category: "dashboard",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
         <AdminTitlePage title="Job Vacancy" />
         <Spacing />
         <StackCustom gap={"xs"}>
-          {listData.map((item, i) => (
+          {listData(data).map((item: any, i: number) => (
             <AdminComp_BoxDashboard key={i} item={item} />
           ))}
         </StackCustom>
@@ -24,20 +55,20 @@ export default function AdminJob() {
   );
 }
 
-const listData = [
+const listData = (data: any) => [
   {
     label: "Publish",
-    value: 4,
+    value: (data && data?.publish) || 0,
     icon: <IconPublish size={25} color={MainColor.green} />,
   },
   {
     label: "Review",
-    value: 7,
+    value: (data && data?.review) || 0,
     icon: <IconReview size={25} color={MainColor.orange} />,
   },
   {
     label: "Reject",
-    value: 5,
+    value: (data && data?.reject) || 0,
     icon: <IconReject size={25} color={MainColor.red} />,
   },
 ];

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>
     </>
   );

components/_ShareComponent/SearchInput.tsx

@@ -2,7 +2,7 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import TextInputCustom from "../TextInput/TextInputCustom";
 import { Ionicons } from "@expo/vector-icons";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import { StyleProp, ViewStyle, TextStyle, StyleSheet } from "react-native";
 
 interface SearchInputProps {
   placeholder?: string;
@@ -12,6 +12,8 @@ interface SearchInputProps {
   containerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<TextStyle>;
   onChangeText?: (value: string) => void;
+  value?: string;
+  disabled?: boolean;
 }
 export default function SearchInput({
   placeholder,
@@ -21,6 +23,8 @@ export default function SearchInput({
   containerStyle,
   style,
   onChangeText,
+  value,
+  disabled,
   ...props
 }: SearchInputProps) {
   return (
@@ -29,14 +33,21 @@ export default function SearchInput({
         <Ionicons
           name="search-outline"
           size={ICON_SIZE_SMALL}
-          color={MainColor.placeholder}
+          color={disabled ? MainColor.white_gray : MainColor.placeholder}
         />
       }
+      value={value}
       onChangeText={onChangeText}
       placeholder={placeholder}
       borderRadius={50}
-      containerStyle={[containerStyle, { marginBottom: 0 }]}
+      containerStyle={[disabled ? styleses.disabled : styleses.containerStyle]}
+      disabled={disabled}
       {...props}
     />
   );
 }
+
+const styleses = StyleSheet.create({
+  containerStyle: { width: "100%", marginBottom: 0 },
+  disabled: { width: "100%", marginBottom: 0, color: MainColor.white_gray },
+});

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;
+  }
+}

service/api-admin/api-admin-job.ts

@@ -0,0 +1,18 @@
+import { apiConfig } from "../api-config";
+
+export async function apiAdminJob({
+  category,
+  search,
+}: {
+  category: "dashboard" | "publish" | "review" | "reject";
+  search?: string;
+}) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/job?category=${category}&search=${search}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}