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
2025-10-14 17:28:40 +08:00
parent f750d158be
commit 5f36620988
16 changed files with 833 additions and 174 deletions
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/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}>
--- a/app/(application)/(user)/waiting-room.tsx
+++ b/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",
--- a/app/(application)/admin/_layout.tsx
+++ b/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
--- a/app/(application)/admin/dashboard.tsx
+++ b/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} />
    ),
--- a/app/(application)/admin/super-admin/[id]/index.tsx
+++ b/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}`) || "-",
+  },
+];
--- a/app/(application)/admin/super-admin/index.tsx
+++ b/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>
+    </>
+  );
+}
--- a/app/(application)/admin/user-access.tsx
+++ b/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>
-    </>
-  );
-}
--- a/app/(application)/admin/user-access/[id]/index.tsx
+++ b/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}`) || "-",
+  },
+];
--- a/app/(application)/admin/user-access/index.tsx
+++ b/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>
+    </>
+  );
+}
--- a/components/ActionIcon/ActionIcon.tsx
+++ b/components/ActionIcon/ActionIcon.tsx
@@ -1,6 +1,6 @@
 import { MainColor } from "@/constants/color-palet";
 import { Href, router } from "expo-router";
-import { DimensionValue, TouchableOpacity } from "react-native";
+import { DimensionValue, StyleProp, TouchableOpacity, ViewStyle } from "react-native";

 type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | number | string | undefined;

@@ -10,12 +10,14 @@ export default function ActionIcon({
  icon,
  size = "md",
  disabled = false,
+  style,
 }: {
  href?: Href;
  onPress?: () => void;
  icon: React.ReactNode;
  size?: SizeType;
  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
 }) {
  const sizeMap = {
    xs: 22,
@@ -39,7 +41,7 @@ export default function ActionIcon({
    <TouchableOpacity
      disabled={disabled}
      activeOpacity={0.7}
-      style={{
+      style={[{
        backgroundColor: disabled ? MainColor.disabled : MainColor.yellow,
        padding: 5,
        borderRadius: 50,
@@ -47,7 +49,7 @@ export default function ActionIcon({
        justifyContent: "center",
        width: iconSize,
        height: iconSize,
-      }}
+      }, style]}
      onPress={() => {
        if (disabled) return;
        if (href) {
--- a/components/_ShareComponent/GridTwoView.tsx
+++ b/components/_ShareComponent/GridTwoView.tsx
@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from "react-native";
+import { ViewStyle } from "react-native";
 import Grid from "../Grid/GridCustom";

 export default function GridTwoView({
@@ -13,15 +13,23 @@ export default function GridTwoView({
  spanRight?: number;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
-  styleLeft?: StyleProp<ViewStyle>;
-  styleRight?: StyleProp<ViewStyle>;
+  styleLeft?: ViewStyle;
+  styleRight?: ViewStyle;
 }) {
+  const baseStyle: ViewStyle = { justifyContent: "center" };
+
  return (
    <Grid containerStyle={{ marginBottom: 0 }}>
-      <Grid.Col span={spanLeft} style={{ justifyContent: "center" }}>
+      <Grid.Col
+        span={spanLeft}
+        style={styleLeft ? { ...baseStyle, ...styleLeft } : baseStyle}
+      >
        {leftIcon}
      </Grid.Col>
-      <Grid.Col span={spanRight} style={{ justifyContent: "center" }}>
+      <Grid.Col
+        span={spanRight}
+        style={styleRight ? { ...baseStyle, ...styleRight } : baseStyle}
+      >
        {rightIcon}
      </Grid.Col>
    </Grid>
--- a/components/_ShareComponent/GridViewCustomSpan.tsx
+++ b/components/_ShareComponent/GridViewCustomSpan.tsx
@@ -1,4 +1,5 @@
 import { Grid } from "@/components";
+import { StyleProp, ViewStyle } from "react-native";

 export const GridViewCustomSpan = ({
  span1,
@@ -7,31 +8,52 @@ export const GridViewCustomSpan = ({
  component1,
  component2,
  component3,
+  style1,
+  style2,
+  style3,
 }: {
-  span1: number;
-  span2: number;
-  span3: number;
+  span1?: number;
+  span2?: number;
+  span3?: number;
  component1: React.ReactNode;
  component2: React.ReactNode;
  component3: React.ReactNode;
+  style1?: StyleProp<ViewStyle>;
+  style2?: StyleProp<ViewStyle>;
+  style3?: StyleProp<ViewStyle>;
 }) => {
  return (
    <Grid>
      <Grid.Col
        span={span1 || 4}
-        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+        style={{
+          justifyContent: "center",
+          paddingRight: 10,
+          paddingLeft: 10,
+          ...(style1 as object)
+        } as ViewStyle}
      >
        {component1}
      </Grid.Col>
      <Grid.Col
        span={span2 || 4}
-        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+        style={{
+          justifyContent: "center",
+          paddingRight: 10,
+          paddingLeft: 10,
+          ...(style2 as object)
+        } as ViewStyle}
      >
        {component2}
      </Grid.Col>
      <Grid.Col
        span={span3 || 4}
-        style={{ justifyContent: "center", paddingRight: 5, paddingLeft: 5 }}
+        style={{
+          justifyContent: "center",
+          paddingRight: 10,
+          paddingLeft: 10,
+          ...(style3 as object)
+        } as ViewStyle}
      >
        {component3}
      </Grid.Col>
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -135,7 +135,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const userData = async (token: string) => {
    try {
      setIsLoading(true);
-      const response = await apiConfig.get(`/mobile/user?token=${token}`, {
+      const response = await apiConfig.get(`/mobile?token=${token}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
--- a/screens/Admin/listPageAdmin.tsx
+++ b/screens/Admin/listPageAdmin.tsx
@@ -1,6 +1,6 @@
 import { NavbarItem } from "@/components/Drawer/NavbarMenu";

-export { adminListMenu }
+export { adminListMenu, superAdminListMenu }

 const adminListMenu: NavbarItem[] = [
  {
@@ -93,4 +93,102 @@ const adminListMenu: NavbarItem[] = [
    icon: "people",
    link: "/admin/user-access",
  },
+];
+
+const superAdminListMenu: NavbarItem[] = [
+  {
+    label: "Main Dashboard",
+    icon: "home",
+    link: "/admin/dashboard",
+  },
+  {
+    label: "Investasi",
+    icon: "wallet",
+    links: [
+      { label: "Dashboard", link: "/admin/investment" },
+      { label: "Publish", link: "/admin/investment/publish/status" },
+      { label: "Review", link: "/admin/investment/review/status" },
+      { label: "Reject", link: "/admin/investment/reject/status" },
+    ],
+  },
+  {
+    label: "Donasi",
+    icon: "hand-right",
+    links: [
+      { label: "Dashboard", link: "/admin/donation" },
+      { label: "Publish", link: "/admin/donation/publish/status" },
+      { label: "Review", link: "/admin/donation/review/status" },
+      { label: "Reject", link: "/admin/donation/reject/status" },
+      { label: "Kategori", link: "/admin/donation/category" },
+    ],
+  },
+  {
+    label: "Event",
+    icon: "calendar-clear",
+    links: [
+      { label: "Dashboard", link: "/admin/event" },
+      { label: "Publish", link: "/admin/event/publish/status" },
+      { label: "Review", link: "/admin/event/review/status" },
+      { label: "Reject", link: "/admin/event/reject/status" },
+      { label: "Tipe Acara", link: "/admin/event/type-of-event" },
+      { label: "Riwayat", link: "/admin/event/riwayat/status" },
+    ],
+  },
+  {
+    label: "Voting",
+    icon: "accessibility-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/voting" },
+      { label: "Publish", link: "/admin/voting/publish/status" },
+      { label: "Review", link: "/admin/voting/review/status" },
+      { label: "Reject", link: "/admin/voting/reject/status" },
+      { label: "Riwayat", link: "/admin/voting/riwayat/status" },
+    ],
+  },
+  {
+    label: "Job",
+    icon: "desktop-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/job" },
+      { label: "Publish", link: "/admin/job/publish/status" },
+      { label: "Review", link: "/admin/job/review/status" },
+      { label: "Reject", link: "/admin/job/reject/status" },
+    ],
+  },
+  {
+    label: "Forum",
+    icon: "chatbubble-ellipses-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/forum" },
+      { label: "Posting", link: "/admin/forum/posting" },
+      { label: "Report Posting", link: "/admin/forum/report-posting" },
+      { label: "Report Comment", link: "/admin/forum/report-comment" },
+    ],
+  },
+  {
+    label: "Collaboration",
+    icon: "people",
+    links: [
+      { label: "Dashboard", link: "/admin/collaboration" },
+      { label: "Publish", link: "/admin/collaboration/publish" },
+      { label: "Group", link: "/admin/collaboration/group" },
+      { label: "Reject", link: "/admin/collaboration/reject" },
+    ],
+  },
+  { label: "Maps", icon: "map", link: "/admin/maps" },
+  {
+    label: "App Information",
+    icon: "information-circle",
+    link: "/admin/app-information",
+  },
+  {
+    label: "User Access",
+    icon: "people",
+    link: "/admin/user-access",
+  },
+  {
+    label: "Super Admin",
+    icon: "globe",
+    link: "/admin/super-admin",
+  },
 ];
--- a/service/api-admin/api-admin-main-dashboard.ts
+++ b/service/api-admin/api-admin-main-dashboard.ts
@@ -0,0 +1,10 @@
+import { apiConfig } from "../api-config";
+
+export const apiAdminMainDashboardGetAll = async () => {
+  try {
+    const response = await apiConfig.get(`/mobile/admin/main-dashboard`);
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
--- a/service/api-admin/api-admin-user-access.ts
+++ b/service/api-admin/api-admin-user-access.ts
@@ -0,0 +1,47 @@
+import { apiConfig } from "../api-config";
+
+export const apiAdminUserAccessGetAll = async ({
+  search,
+  category,
+}: {
+  search?: string;
+  category: "only-user" | "only-admin" | "all-role";
+}) => {
+  try {
+    const response = await apiConfig.get(`/mobile/admin/user?category=${category}&search=${search}`);
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const apiAdminUserAccessGetById = async ({ id }: { id: string }) => {
+  try {
+    const response = await apiConfig.get(`/mobile/admin/user/${id}`);
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const apiAdminUserAccessUpdateStatus = async ({
+  id,
+  active,
+  role,
+}: {
+  id: string;
+  active?: boolean;
+  role?: "user" | "admin" | "super_admin";
+}) => {
+  try {
+    const response = await apiConfig.put(`/mobile/admin/user/${id}`, {
+      data: {
+        active,
+        role,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};