Integrasi Admin: User Acces & Super Admin

Add:
- admin/super-admin/
- admin/user-access/
- service/api-admin/

Fix:
- (user)/profile/[id]/index: penambahan useData dari useAuthuntuk merestart value masterRole
- integrasi pada tampilan admin

### No Issue

app/(application)/(user)/profile/[id]/index.tsx

@@ -26,7 +26,7 @@ export default function Profile() {
   const [dataToken, setDataToken] = useState<IProfile>();
   const [listPortofolio, setListPortofolio] = useState<any[]>();
 
-  const { logout, isAdmin, user } = useAuth();
+  const { token, logout, isAdmin, user, userData } = useAuth();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -42,7 +42,8 @@ export default function Profile() {
       onLoadPortofolio(id as string);
       onLoadUserByToken();
       isUserCheck();
-    }, [id])
+      userData(token as string);
+    }, [id, token])
   );
 
   const isUserCheck = () => {
@@ -136,10 +137,7 @@ const ButtonnDot = ({
 }) => {
   const isId = id === undefined || id === null;
 
-  console.log("ID CHECK", id);
-
   if (isId) {
-    console.log("ID UNDEFINED", id);
     return (
       <>
         <TouchableOpacity onPress={logout}>

app/(application)/(user)/waiting-room.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
+import { apiUser } from "@/service/api-client/api-user";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import Toast from "react-native-toast-message";
@@ -19,12 +20,25 @@ export default function WaitingRoom() {
   async function handleCheck() {
     try {
       const response = await userData(token as string);
+
       if (response.active) {
-        Toast.show({
-          type: "success",
-          text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
-        });
-        router.replace(`/(application)/(user)/profile/create`);
+        const checkProfile = await apiUser(response.id);
+
+        if (checkProfile?.data?.Profile) {
+          Toast.show({
+            type: "success",
+            text1: "Akun anda telah aktif kembali", // text2: "Anda berhasil login",
+          });
+          router.replace(`/(application)/(user)/home`);
+        } else {
+          Toast.show({
+            type: "success",
+            text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
+          });
+          router.replace(`/(application)/(user)/profile/create`);
+        }
+
+        // router.replace(`/(application)/(user)/profile/create`);
       } else {
         Toast.show({
           type: "error",

app/(application)/admin/_layout.tsx

@@ -15,7 +15,10 @@ import {
   ICON_SIZE_XLARGE,
 } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
-import { adminListMenu } from "@/screens/Admin/listPageAdmin";
+import {
+  adminListMenu,
+  superAdminListMenu,
+} from "@/screens/Admin/listPageAdmin";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -24,8 +27,11 @@ import { useState } from "react";
 export default function AdminLayout() {
   const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
   const [openDrawerUser, setOpenDrawerUser] = useState(false);
+  // const [user, setUser] = useState(null);
 
-  const { logout } = useAuth();
+  const { logout, user } = useAuth();
+
+  console.log("[USER LAYOUT]", JSON.stringify(user, null, 2));
 
   return (
     <>
@@ -56,58 +62,58 @@ export default function AdminLayout() {
           ),
         }}
       >
-        <Stack.Screen name="dashboard" />
+        {/* <Stack.Screen name="dashboard" /> */}
         {/* ================== Investment Start ================== */}
-        <Stack.Screen name="investment/index" />
+        {/* <Stack.Screen name="investment/index" /> */}
         {/* ================== Investment End ================== */}
 
         {/* ================== Maps Start ================== */}
-        <Stack.Screen name="maps" />
+        {/* <Stack.Screen name="maps" /> */}
         {/* ================== Maps End ================== */}
 
         {/* ================== App Information Start ================== */}
-        <Stack.Screen name="app-information/index" />
+        {/* <Stack.Screen name="app-information/index" /> */}
         {/* ================== App Information End ================== */}
 
         {/* ================== Job Start ================== */}
-        <Stack.Screen name="job/index" />
+        {/* <Stack.Screen name="job/index" /> */}
         {/* <Stack.Screen name="job/publish" />
         <Stack.Screen name="job/review" />
         <Stack.Screen name="job/reject" /> */}
-        <Stack.Screen name="job/[status]/status" />
-        <Stack.Screen name="job/[id]/[status]/index" />
+        {/* <Stack.Screen name="job/[status]/status" />
+        <Stack.Screen name="job/[id]/[status]/index" /> */}
 
         {/* ================== Collaboration Start ================== */}
-        <Stack.Screen name="collaboration/index" />
-        <Stack.Screen name="collaboration/publish" />
+        {/* <Stack.Screen name="collaboration/index" /> */}
+        {/* <Stack.Screen name="collaboration/publish" />
         <Stack.Screen name="collaboration/group" />
         <Stack.Screen name="collaboration/reject" />
         <Stack.Screen name="collaboration/[id]/[status]" />
-        <Stack.Screen name="collaboration/[id]/group" />
+        <Stack.Screen name="collaboration/[id]/group" /> */}
         {/* ================== Collaboration End ================== */}
 
         {/* ================== Forum Start ================== */}
-        <Stack.Screen name="forum/index" />
-        <Stack.Screen name="forum/[id]/index" />
+        {/* <Stack.Screen name="forum/index" /> */}
+        {/* <Stack.Screen name="forum/[id]/index" />
         <Stack.Screen name="forum/report-comment" />
         <Stack.Screen name="forum/report-posting" />
         <Stack.Screen name="forum/[id]/list-report-posting" />
-        <Stack.Screen name="forum/[id]/list-report-comment" />
+        <Stack.Screen name="forum/[id]/list-report-comment" /> */}
         {/* ================== Forum End ================== */}
 
         {/* ================== Voting Start ================== */}
-        <Stack.Screen name="voting/index" />
+        {/* <Stack.Screen name="voting/index" />
         <Stack.Screen name="voting/[status]/status" />
         <Stack.Screen name="voting/[id]/[status]/index" />
-        <Stack.Screen name="voting/[id]/reject-input" />
+        <Stack.Screen name="voting/[id]/reject-input" /> */}
         {/* ================== Voting End ================== */}
 
         {/* ================== Event Start ================== */}
-        <Stack.Screen name="event/index" />
+        {/* <Stack.Screen name="event/index" />
         <Stack.Screen name="event/[status]/status" />
         <Stack.Screen name="event/type-of-event" />
         <Stack.Screen name="event/type-create" />
-        <Stack.Screen name="event/type-update" />
+        <Stack.Screen name="event/type-update" /> */}
         {/* <Stack.Screen name="event/[id]/[status]/index" />
         <Stack.Screen name="event/[id]/reject-input"/> */}
         {/* ================== Event End ================== */}
@@ -134,7 +140,11 @@ export default function AdminLayout() {
           />
 
           <NavbarMenu
-            items={adminListMenu}
+            items={
+              user?.masterUserRoleId === "2"
+                ? adminListMenu
+                : superAdminListMenu
+            }
             onClose={() => setOpenDrawerNavbar(false)}
           />
         </StackCustom>
@@ -155,7 +165,7 @@ export default function AdminLayout() {
               />
             }
           >
-            <TextCustom>Username</TextCustom>
+            <TextCustom>{user?.username || "-"}</TextCustom>
           </GridComponentView>
           <GridComponentView
             leftIcon={
@@ -166,7 +176,13 @@ export default function AdminLayout() {
               />
             }
           >
-            <TextCustom>User Role</TextCustom>
+            <TextCustom>
+              {user
+                ? user?.masterUserRoleId === "2"
+                  ? "Admin"
+                  : "Super Admin"
+                : "-"}
+            </TextCustom>
           </GridComponentView>
 
           <MenuDrawerDynamicGrid

app/(application)/admin/dashboard.tsx

@@ -1,13 +1,31 @@
-import {
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
+import { StackCustom, TextCustom, ViewWrapper } from "@/components";
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminMainDashboardGetAll } from "@/service/api-admin/api-admin-main-dashboard";
 import { Ionicons } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
 
 export default function AdminDashboard() {
+  const [countUser, setCountUser] = useState(0);
+  const [countPortofolio, setCountPortofolio] = useState(0);
+
+  useEffect(() => {
+    onLoadData();
+  }, []);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminMainDashboardGetAll();
+
+      if (response.success) {
+        setCountUser(response.data.user);
+        setCountPortofolio(response.data.portofolio);
+      }
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
@@ -15,7 +33,7 @@ export default function AdminDashboard() {
           <TextCustom bold size={30}>
             Main Dashboard
           </TextCustom>
-          {listData.map((item, i) => (
+          {listData(countUser, countPortofolio).map((item, i) => (
             <AdminComp_BoxDashboard key={i} item={item} />
           ))}
         </StackCustom>
@@ -24,15 +42,15 @@ export default function AdminDashboard() {
   );
 }
 
-const listData = [
+const listData = (countUser: number, countPortofolio: number) => [
   {
     label: "User",
-    value: 4,
+    value: countUser,
     icon: <Ionicons name="people" size={30} color={MainColor.yellow} />,
   },
   {
     label: "Portofolio",
-    value: 7,
+    value: countPortofolio,
     icon: (
       <Ionicons name="id-card-outline" size={30} color={MainColor.yellow} />
     ),

app/(application)/admin/super-admin/[id]/index.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import {
+  apiAdminUserAccessGetById,
+  apiAdminUserAccessUpdateStatus,
+} from "@/service/api-admin/api-admin-user-access";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function SuperAdminDetail() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [loadData, setLoadData] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminUserAccessGetById({ id: id as string });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setLoading(true);
+      const response = await apiAdminUserAccessUpdateStatus({
+        id: id as string,
+        role: data?.masterUserRoleId === "2" ? "user" : "admin",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Update role gagal",
+        });
+        return;
+      }
+      Toast.show({
+        type: "success",
+        text1: "Update role berhasil ",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR UPDATE STATUS]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
+        footerComponent={
+          data && (
+            <BoxButtonOnFooter>
+              <ButtonCustom
+                isLoading={isLoading}
+                backgroundColor={
+                  data?.masterUserRoleId === "2" ? "red" : "green"
+                }
+                textColor={"white"}
+                onPress={handlerSubmit}
+              >
+                {data?.masterUserRoleId === "2"
+                  ? "Hapus akses admin"
+                  : "Tambah sebagai admin"}
+              </ButtonCustom>
+            </BoxButtonOnFooter>
+          )
+        }
+      >
+        {loadData ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom>
+            {listData(data && data)?.map((item: any, index: number) => (
+              <GridTwoView
+                key={index}
+                spanLeft={4}
+                spanRight={8}
+                leftIcon={<TextCustom bold>{item?.label}</TextCustom>}
+                rightIcon={<TextCustom>{item?.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        )}
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = (data: any) => [
+  {
+    label: "Username",
+    value: (data && data?.username) || "-",
+  },
+  {
+    label: "Role",
+    value: data && data?.masterUserRoleId === "2" ? "Admin" : "User",
+  },
+  {
+    label: "Nomor",
+    value: (data && `+${data?.nomor}`) || "-",
+  },
+];

app/(application)/admin/super-admin/index.tsx

@@ -0,0 +1,148 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  CenterCustom,
+  Divider,
+  SearchInput,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
+import { Ionicons } from "@expo/vector-icons";
+
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function SuperAdmin_ListUser() {
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [search])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminUserAccessGetAll({
+        search: search,
+        category: "all-role",
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    }
+  };
+
+  const rightComponent = () => {
+    return (
+      <>
+        <SearchInput
+          containerStyle={{ width: "100%", marginBottom: 0 }}
+          placeholder="Cari Username"
+          onChangeText={(text) => setSearch(text)}
+        />
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title={"Super Admin"}
+            rightComponent={rightComponent()}
+          />
+        }
+      >
+        <GridViewCustomSpan
+          span1={2}
+          span2={5}
+          span3={5}
+          component1={
+            <TextCustom align="center" bold>
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom align="center" bold>
+              Username
+            </TextCustom>
+          }
+          component3={
+            <TextCustom align="center" bold>
+              Role
+            </TextCustom>
+          }
+        />
+
+        <Divider />
+
+        <StackCustom>
+          {_.isEmpty(listData) ? (
+            <TextCustom align="center" color="gray" size={"small"}>
+              Tidak ada data
+            </TextCustom>
+          ) : (
+            listData?.map((item: any, index: number) => (
+              <GridViewCustomSpan
+                key={index}
+                span1={2}
+                span2={5}
+                span3={5}
+                component1={
+                  <CenterCustom>
+                    <Ionicons
+                      onPress={() =>
+                        router.push(`/admin/super-admin/${item?.id}`)
+                      }
+                      name="open"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.yellow}
+                    />
+                  </CenterCustom>
+
+                  // <ButtonCustom
+                  //   onPress={() =>
+                  //     router.push(`/admin/super-admin/${item?.id}`)
+                  //   }
+                  // >
+                  //   Detail
+                  // </ButtonCustom>
+                }
+                component2={
+                  <TextCustom bold truncate>
+                    {item?.username || "-"}
+                  </TextCustom>
+                }
+                component3={
+                  <CenterCustom>
+                    {item?.masterUserRoleId === "2" ? (
+                      <BadgeCustom color={AccentColor.blue}>Admin</BadgeCustom>
+                    ) : (
+                      <BadgeCustom color={AccentColor.softblue}>
+                        User
+                      </BadgeCustom>
+                    )}
+                  </CenterCustom>
+                }
+                style3={{ alignItems: "center", justifyContent: "center" }}
+              />
+            ))
+          )}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/user-access.tsx

@@ -1,117 +0,0 @@
-import {
-    ButtonCustom,
-    Divider,
-    Grid,
-    SearchInput,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
-import { Ionicons } from "@expo/vector-icons";
-
-export default function AdminUserAccess() {
-  const rightComponent = () => {
-    return (
-      <>
-        <SearchInput
-          containerStyle={{ width: "100%", marginBottom: 0 }}
-          placeholder="Cari User"
-        />
-      </>
-    );
-  };
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminComp_BoxTitle
-            title="User Access"
-            rightComponent={rightComponent()}
-          />
-        }
-      >
-        <Grid>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
-            <TextCustom bold>Aksi</TextCustom>
-          </Grid.Col>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
-            <TextCustom bold>Username</TextCustom>
-          </Grid.Col>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
-            <TextCustom bold>Nomor</TextCustom>
-          </Grid.Col>
-        </Grid>
-
-        <Divider />
-
-        <StackCustom>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <Grid key={index}>
-              <Grid.Col
-                span={4}
-                style={{
-                  alignItems: "center",
-                  paddingLeft: 5,
-                  paddingRight: 5,
-                }}
-              >
-                <TextCustom bold>
-                  <ButtonCustom
-                    iconLeft={
-                      <Ionicons
-                        name={
-                          index % 2 === 0
-                            ? "checkmark-outline"
-                            : "close-circle-outline"
-                        }
-                        size={ICON_SIZE_MEDIUM}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {}}
-                    backgroundColor={
-                      index % 2 === 0 ? MainColor.green : MainColor.red
-                    }
-                  >
-                    <TextCustom size={"small"} color={"black"}>
-                      {index % 2 === 0 ? "Berikan Akses" : "Hapus Akses"}
-                    </TextCustom>
-                  </ButtonCustom>
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col
-                span={4}
-                style={{
-                  alignItems: "center",
-                  justifyContent: "center",
-                  paddingLeft: 5,
-                  paddingRight: 5,
-                }}
-              >
-                <TextCustom bold truncate>
-                  Useraname
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col
-                span={4}
-                style={{
-                  alignItems: "center",
-                  justifyContent: "center",
-                  paddingLeft: 5,
-                  paddingRight: 5,
-                }}
-              >
-                <TextCustom bold truncate>
-                  08123456789
-                </TextCustom>
-              </Grid.Col>
-            </Grid>
-          ))}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/admin/user-access/[id]/index.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import {
+  apiAdminUserAccessGetById,
+  apiAdminUserAccessUpdateStatus,
+} from "@/service/api-admin/api-admin-user-access";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function AdminUserAccessDetail() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [loadData, setLoadData] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminUserAccessGetById({ id: id as string });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setLoading(true);
+      const response = await apiAdminUserAccessUpdateStatus({
+        id: id as string,
+        active: !data?.active,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Update aktifasi gagal",
+        });
+        return;
+      }
+      Toast.show({
+        type: "success",
+        text1: "Update aktifasi berhasil ",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR UPDATE STATUS]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
+        footerComponent={
+          data && (
+            <BoxButtonOnFooter>
+              <ButtonCustom
+                isLoading={isLoading}
+                backgroundColor={data?.active ? "red" : "green"}
+                textColor={"white"}
+                onPress={handlerSubmit}
+              >
+                {data?.active ? "Hapus Akses" : "Berikan Akses"}
+              </ButtonCustom>
+            </BoxButtonOnFooter>
+          )
+        }
+      >
+        {loadData ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom>
+            {listData(data && data)?.map((item: any, index: number) => (
+              <GridTwoView
+                key={index}
+                spanLeft={4}
+                spanRight={8}
+                leftIcon={<TextCustom bold>{item?.label}</TextCustom>}
+                rightIcon={<TextCustom>{item?.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        )}
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = (data: any) => [
+  {
+    label: "Username",
+    value: (data && data?.username) || "-",
+  },
+  {
+    label: "Aktivasi",
+    value: data && data?.active ? "Aktif" : "Tidak Aktif",
+  },
+  {
+    label: "Nomor",
+    value: (data && `+${data?.nomor}`) || "-",
+  },
+];

app/(application)/admin/user-access/index.tsx

@@ -0,0 +1,143 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  CenterCustom,
+  Divider,
+  SearchInput,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function AdminUserAccess() {
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [search])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminUserAccessGetAll({
+        search: search,
+        category: "only-user",
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    }
+  };
+
+  const rightComponent = () => {
+    return (
+      <>
+        <SearchInput
+          containerStyle={{ width: "100%", marginBottom: 0 }}
+          placeholder="Cari User"
+          onChangeText={(text) => setSearch(text)}
+        />
+      </>
+    );
+  };
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title="User Access"
+            rightComponent={rightComponent()}
+          />
+        }
+      >
+        <GridViewCustomSpan
+          span1={2}
+          span2={5}
+          span3={5}
+          component1={
+            <TextCustom align="center" bold>
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom align="center" bold>
+              Username
+            </TextCustom>
+          }
+          component3={
+            <TextCustom align="center" bold>
+              Status Akses
+            </TextCustom>
+          }
+        />
+
+        <Divider />
+
+        <StackCustom>
+          {_.isEmpty(listData) ? (
+            <TextCustom align="center" color="gray" size={"small"}>
+              Tidak ada data
+            </TextCustom>
+          ) : (
+            listData?.map((item: any, index: number) => (
+              <GridViewCustomSpan
+                key={index}
+                span1={2}
+                span2={5}
+                span3={5}
+                component1={
+                  <CenterCustom>
+                    <Ionicons
+                      onPress={() =>
+                        router.push(`/admin/user-access/${item?.id}`)
+                      }
+                      name="open"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.yellow}
+                    />
+                  </CenterCustom>
+                  // <ButtonCustom
+                  //   onPress={() =>
+                  //     router.push(`/admin/user-access/${item?.id}`)
+                  //   }
+                  // >
+                  //   Detail
+                  // </ButtonCustom>
+                }
+                component2={
+                  <TextCustom bold truncate>
+                    {item?.username || "-"}
+                  </TextCustom>
+                }
+                component3={
+                  <CenterCustom>
+                    {item?.active ? (
+                      <BadgeCustom color="green">Aktif</BadgeCustom>
+                    ) : (
+                      <BadgeCustom color="red">Tidak Aktif</BadgeCustom>
+                    )}
+                  </CenterCustom>
+                }
+                style3={{ alignItems: "center", justifyContent: "center" }}
+              />
+            ))
+          )}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}