From caf250c5caee9763eb10ad342ea8073cabe23aa8 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Wed, 6 Aug 2025 11:53:33 +0800
Subject: [PATCH 1/3] Admin Add: - Menambahkan folder : /admin/collaboration ,
 /admin/investmen - NavbarMenu

### No Issue
---
 app/(application)/admin/_layout.tsx           | 155 ++++++++++++++----
 .../admin/collaboration/group.tsx             |  11 ++
 .../admin/collaboration/index.tsx             |  11 ++
 .../admin/collaboration/publish.tsx           |  11 ++
 .../admin/collaboration/reject.tsx            |  11 ++
 app/(application)/admin/investment/index.tsx  |  11 ++
 .../admin/investment/publish.tsx              |  11 ++
 app/(application)/admin/investment/reject.tsx |  11 ++
 app/(application)/admin/investment/review.tsx |  11 ++
 components/Drawer/DrawerAdmin.tsx             |  22 ++-
 components/Drawer/NavbarMenu.tsx              |  77 ++++++---
 components/Drawer/SidebarMenu.tsx             |   2 +-
 screens/Authentication/LoginView.tsx          |   4 +-
 screens/Profile/ListPage.tsx                  |   2 +-
 14 files changed, 276 insertions(+), 74 deletions(-)
 create mode 100644 app/(application)/admin/collaboration/group.tsx
 create mode 100644 app/(application)/admin/collaboration/index.tsx
 create mode 100644 app/(application)/admin/collaboration/publish.tsx
 create mode 100644 app/(application)/admin/collaboration/reject.tsx
 create mode 100644 app/(application)/admin/investment/index.tsx
 create mode 100644 app/(application)/admin/investment/publish.tsx
 create mode 100644 app/(application)/admin/investment/reject.tsx
 create mode 100644 app/(application)/admin/investment/review.tsx

diff --git a/app/(application)/admin/_layout.tsx b/app/(application)/admin/_layout.tsx
index b7cfcfe..b7d65f8 100644
--- a/app/(application)/admin/_layout.tsx
+++ b/app/(application)/admin/_layout.tsx
@@ -1,20 +1,12 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  ClickableCustom,
-  DrawerCustom,
-  StackCustom,
-  TextCustom,
-} from "@/components";
+import { StackCustom } from "@/components";
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
-import NavbarMenu from "@/components/Drawer/NavbarMenu";
-import SidebarMenu from "@/components/Drawer/SidebarMenu";
+import NavbarMenu, { NavbarItem } from "@/components/Drawer/NavbarMenu";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
+import { Stack } from "expo-router";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function AdminLayout() {
   const [openDrawer, setOpenDrawer] = useState(false);
@@ -45,17 +37,37 @@ export default function AdminLayout() {
           ),
         }}
       >
-        <Stack.Screen name="dashboard" options={{ title: "Dashboard" }} />
+        <Stack.Screen name="dashboard" options={{ title: "Main Dashboard" }} />
+        <Stack.Screen name="investment/index" options={{ title: "Dashboard Investasi" }} />
+        <Stack.Screen name="investment/publish" options={{ title: "Investasi Publish" }} />
+        <Stack.Screen name="investment/review" options={{ title: "Investasi Review" }} />
+        <Stack.Screen name="investment/reject" options={{ title: "Investasi Reject" }} />
         <Stack.Screen name="maps" options={{ title: "Maps" }} />
         <Stack.Screen name="information" options={{ title: "Information" }} />
-        <Stack.Screen name="job/index" options={{ title: "Job" }} />
+        <Stack.Screen name="job/index" options={{ title: "Dashboard Job" }} />
         <Stack.Screen name="job/publish" options={{ title: "Job Publish" }} />
         <Stack.Screen name="job/review" options={{ title: "Job Review" }} />
         <Stack.Screen name="job/reject" options={{ title: "Job Reject" }} />
+        <Stack.Screen
+          name="collaboration/index"
+          options={{ title: "Dashboard Collaboration" }}
+        />
+        <Stack.Screen
+          name="collaboration/publish"
+          options={{ title: "Collaboration Publish" }}
+        />
+        <Stack.Screen
+          name="collaboration/group"
+          options={{ title: "Collaboration Group" }}
+        />
+        <Stack.Screen
+          name="collaboration/reject"
+          options={{ title: "Collaboration Reject" }}
+        />
       </Stack>
 
       <DrawerAdmin isVisible={openDrawer} onClose={() => setOpenDrawer(false)}>
-        <StackCustom gap={"lg"}>
+        <StackCustom gap={"xs"}>
           <Ionicons
             name="close"
             size={ICON_SIZE_SMALL}
@@ -64,31 +76,102 @@ export default function AdminLayout() {
             style={{ alignSelf: "flex-end" }}
           />
 
-          <NavbarMenu
-            items={[
-              { label: "Dashboard", icon: "home", link: "/admin/dashboard" },
-              { label: "Maps", icon: "map", link: "/admin/maps" },
-              {
-                label: "Information",
-                icon: "information-circle",
-                link: "/admin/information",
-              },
-              {
-                label: "Job",
-                icon: "calendar",
-                links: [
-                  { label: "Summary", link: "/admin/job" },
-                  { label: "Publish", link: "/admin/job/publish" },
-                  { label: "Review", link: "/admin/job/review" },
-                  { label: "Reject", link: "/admin/job/reject" },
-                ],
-              },
-            ]}
-            onClose={() => setOpenDrawer(false)}
-          />
+          <NavbarMenu items={listItem} onClose={() => setOpenDrawer(false)} />
         </StackCustom>
       </DrawerAdmin>
     </>
   );
 }
 
+const listItem: 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" },
+      { label: "Review", link: "/admin/investment/review" },
+      { label: "Reject", link: "/admin/investment/reject" },
+    ],
+  },
+  {
+    label: "Donasi",
+    icon: "hand-right",
+    links: [
+      { label: "Dashboard", link: "/admin/donasi" },
+      { label: "Publish", link: "/admin/donasi/publish" },
+      { label: "Review", link: "/admin/donasi/review" },
+      { label: "Reject", link: "/admin/donasi/reject" },
+      { label: "Kategori", link: "/admin/donasi/kategori" },
+    ],
+  },
+  {
+    label: "Event",
+    icon: "calendar-clear",
+    links: [
+      { label: "Dashboard", link: "/admin/event" },
+      { label: "Publish", link: "/admin/event/publish" },
+      { label: "Review", link: "/admin/event/review" },
+      { label: "Reject", link: "/admin/event/reject" },
+      { label: "Tipe Acara", link: "/admin/event/tipe-acara" },
+      { label: "Riwayat", link: "/admin/event/riwayat" },
+    ],
+  },
+  {
+    label: "Voting",
+    icon: "accessibility-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/voting" },
+      { label: "Publish", link: "/admin/voting/publish" },
+      { label: "Review", link: "/admin/voting/review" },
+      { label: "Reject", link: "/admin/voting/reject" },
+      { label: "Riwayat", link: "/admin/voting/riwayat" },
+    ],
+  },
+  {
+    label: "Job",
+    icon: "desktop-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/job" },
+      { label: "Publish", link: "/admin/job/publish" },
+      { label: "Review", link: "/admin/job/review" },
+      { label: "Reject", link: "/admin/job/reject" },
+    ],
+  },
+  {
+    label: "Forum",
+    icon: "chatbubble-ellipses-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/forum" },
+      { label: "Posting", link: "/admin/forum/publish" },
+      { label: "Report Posting", link: "/admin/forum/review" },
+      { label: "Report Comment", link: "/admin/forum/reject" },
+    ],
+  },
+  {
+    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/information",
+  },
+  {
+    label: "User Access",
+    icon: "people",
+    link: "/admin/user-access",
+  },
+];
diff --git a/app/(application)/admin/collaboration/group.tsx b/app/(application)/admin/collaboration/group.tsx
new file mode 100644
index 0000000..f00a9bd
--- /dev/null
+++ b/app/(application)/admin/collaboration/group.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminCollaborationGroup() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Collaboration Group</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/collaboration/index.tsx b/app/(application)/admin/collaboration/index.tsx
new file mode 100644
index 0000000..5109ce6
--- /dev/null
+++ b/app/(application)/admin/collaboration/index.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminCollaboration() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Collaboration</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/collaboration/publish.tsx b/app/(application)/admin/collaboration/publish.tsx
new file mode 100644
index 0000000..442e866
--- /dev/null
+++ b/app/(application)/admin/collaboration/publish.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminCollaborationPublish() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Collaboration Publish</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/collaboration/reject.tsx b/app/(application)/admin/collaboration/reject.tsx
new file mode 100644
index 0000000..b351ed7
--- /dev/null
+++ b/app/(application)/admin/collaboration/reject.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminCollaborationReject() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Collaboration Reject</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/investment/index.tsx b/app/(application)/admin/investment/index.tsx
new file mode 100644
index 0000000..876ce21
--- /dev/null
+++ b/app/(application)/admin/investment/index.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestment() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Investment</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/investment/publish.tsx b/app/(application)/admin/investment/publish.tsx
new file mode 100644
index 0000000..a194391
--- /dev/null
+++ b/app/(application)/admin/investment/publish.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestmentPublish() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Investment Publish</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/investment/reject.tsx b/app/(application)/admin/investment/reject.tsx
new file mode 100644
index 0000000..26292a7
--- /dev/null
+++ b/app/(application)/admin/investment/reject.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestmentReject() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Investment Reject</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/investment/review.tsx b/app/(application)/admin/investment/review.tsx
new file mode 100644
index 0000000..37e018e
--- /dev/null
+++ b/app/(application)/admin/investment/review.tsx
@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestmentReview() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Investment Review</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/components/Drawer/DrawerAdmin.tsx b/components/Drawer/DrawerAdmin.tsx
index fc433d4..d29bba1 100644
--- a/components/Drawer/DrawerAdmin.tsx
+++ b/components/Drawer/DrawerAdmin.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useRef } from "react";
 import {
-    Animated,
-    Dimensions,
-    InteractionManager,
-    PanResponder,
-    StyleSheet
+  Animated,
+  Dimensions,
+  InteractionManager,
+  PanResponder,
+  StyleSheet,
 } from "react-native";
 
 import { AccentColor, MainColor } from "@/constants/color-palet";
@@ -107,9 +107,15 @@ export default function DrawerAdmin({
         {...panResponder.panHandlers}
       >
         {/* Handle Bar (opsional) */}
-        {/* <View style={styles.handleBar} /> */}
-
-        <SafeAreaView>{children}</SafeAreaView>
+        <SafeAreaView
+          edges={["top", "bottom"]}
+          style={{
+            flex: 1,
+          }}
+        >
+          {children}
+          {/* <Spacing/> */}
+        </SafeAreaView>
       </Animated.View>
     </>
   );
diff --git a/components/Drawer/NavbarMenu.tsx b/components/Drawer/NavbarMenu.tsx
index a5fda5b..7ba4d9c 100644
--- a/components/Drawer/NavbarMenu.tsx
+++ b/components/Drawer/NavbarMenu.tsx
@@ -1,17 +1,17 @@
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { Ionicons } from "@expo/vector-icons";
 import { router, usePathname } from "expo-router";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Animated,
+  ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from "react-native";
-import TextCustom from "../Text/TextCustom";
 
-interface NavbarItem {
+export interface NavbarItem {
   label: string;
   icon?: keyof typeof Ionicons.glyphMap;
   color?: string;
@@ -33,6 +33,17 @@ export default function NavbarMenu({ items, onClose }: NavbarMenuProps) {
   const [activeLink, setActiveLink] = useState<string | null>(null);
   const [openKeys, setOpenKeys] = useState<string[]>([]); // Untuk kontrol dropdown
 
+  // Normalisasi path: hapus trailing slash
+  const normalizePath = (path: string) => path.replace(/\/+$/, "");
+  const normalizedPathname = pathname ? normalizePath(pathname) : "";
+
+  // Set activeLink saat pathname berubah
+  useEffect(() => {
+    if (normalizedPathname) {
+      setActiveLink(normalizedPathname);
+    }
+  }, [normalizedPathname]);
+
   // Toggle dropdown
   const toggleOpen = (label: string) => {
     setOpenKeys((prev) =>
@@ -40,21 +51,34 @@ export default function NavbarMenu({ items, onClose }: NavbarMenuProps) {
     );
   };
 
-  return (
-    <View style={styles.container}>
-      {items.map((item) => (
-        <MenuItem
-          key={item.label}
-          item={item}
-          onClose={onClose}
-          activeLink={activeLink}
-          setActiveLink={setActiveLink}
-          isOpen={openKeys.includes(item.label)}
-          toggleOpen={() => toggleOpen(item.label)}
-        />
-      ))}
-    </View>
-  );
+ return (
+   <View
+     style={{
+      //  flex: 1,
+      //  backgroundColor: MainColor.black,
+       marginBottom: 20,
+     }}
+   >
+     <ScrollView
+       contentContainerStyle={{
+         paddingVertical: 10, // Opsional: tambahkan padding
+       }}
+      //  showsVerticalScrollIndicator={false} // Opsional: sembunyikan indikator scroll
+     >
+       {items.map((item) => (
+         <MenuItem
+           key={item.label}
+           item={item}
+           onClose={onClose}
+           activeLink={activeLink}
+           setActiveLink={setActiveLink}
+           isOpen={openKeys.includes(item.label)}
+           toggleOpen={() => toggleOpen(item.label)}
+         />
+       ))}
+     </ScrollView>
+   </View>
+ );
 }
 
 // Komponen Item Menu
@@ -83,7 +107,7 @@ function MenuItem({
       duration: 200,
       useNativeDriver: false,
     }).start();
-  }, [isOpen, item.links]);
+  }, [isOpen, item.links, animatedHeight]);
 
   // Jika ada submenu
   if (item.links && item.links.length > 0) {
@@ -93,7 +117,7 @@ function MenuItem({
         <TouchableOpacity style={styles.parentItem} onPress={toggleOpen}>
           <Ionicons
             name={item.icon}
-            size={20}
+            size={16}
             color={MainColor.white}
             style={styles.icon}
           />
@@ -135,7 +159,7 @@ function MenuItem({
                 }}
               >
                 <Ionicons
-                  name="caret-forward-sharp"
+                  name="radio-button-on-outline"
                   size={16}
                   color={isSubActive ? MainColor.yellow : MainColor.white}
                   style={styles.icon}
@@ -168,7 +192,7 @@ function MenuItem({
     >
       <Ionicons
         name={item.icon}
-        size={20}
+        size={16}
         color={isActive ? MainColor.yellow : MainColor.white}
         style={styles.icon}
       />
@@ -186,14 +210,14 @@ function MenuItem({
 // Styles
 const styles = StyleSheet.create({
   container: {
-    marginTop: 20,
+    marginBottom: 5,
   },
   parentItem: {
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 12,
     paddingHorizontal: 10,
-    backgroundColor: AccentColor.darkblue,
+    // backgroundColor: AccentColor.darkblue,
     borderRadius: 8,
     marginBottom: 5,
     justifyContent: "space-between",
@@ -210,7 +234,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingVertical: 12,
     paddingHorizontal: 10,
-    backgroundColor: AccentColor.darkblue,
+    // backgroundColor: AccentColor.darkblue,
     borderRadius: 8,
     marginBottom: 5,
   },
@@ -246,6 +270,7 @@ const styles = StyleSheet.create({
   },
   subText: {
     color: MainColor.white,
-    fontSize: 14,
+    fontSize: 16,
+    fontWeight: "500",
   },
 });
diff --git a/components/Drawer/SidebarMenu.tsx b/components/Drawer/SidebarMenu.tsx
index ce1d541..91a9896 100644
--- a/components/Drawer/SidebarMenu.tsx
+++ b/components/Drawer/SidebarMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Animated,
   Dimensions,
diff --git a/screens/Authentication/LoginView.tsx b/screens/Authentication/LoginView.tsx
index 094027d..5f244fb 100644
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -32,7 +32,7 @@ export default function LoginView() {
 
     // router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
-    // router.navigate("/(application)/(user)/home");
+    router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
     // router.navigate(`/(application)/(image)/preview-image/${id}`);
@@ -40,7 +40,7 @@ export default function LoginView() {
     // router.replace("/(application)/coba");
     // router.navigate("/investment/(tabs)")1
     // router.navigate("/crowdfunding")
-    router.navigate("/admin/dashboard")
+    // router.navigate("/admin/dashboard")
   }
 
   return (
diff --git a/screens/Profile/ListPage.tsx b/screens/Profile/ListPage.tsx
index ddfeee4..b830854 100644
--- a/screens/Profile/ListPage.tsx
+++ b/screens/Profile/ListPage.tsx
@@ -61,7 +61,7 @@ export const drawerItemsProfile = ({
       />
     ),
     label: "Dashboard Admin",
-    path: `/(application)/(admin)/dashboard`,
+    path: `/(application)/admin/dashboard`,
   },
   {
     icon: (

From bcc0e0258160719100983c7bfe7b56389098ba67 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Wed, 6 Aug 2025 15:02:47 +0800
Subject: [PATCH 2/3] Admin Add: - screens/Admin/ - admin/notification/

Component
Add:
-  components/_ShareComponent/GridSectionView.tsx

### No Issue
---
 app/(application)/admin/_layout.tsx           | 245 ++++++++++--------
 .../admin/notification/index.tsx              |  20 ++
 app/_layout.tsx                               |   5 +-
 components/Drawer/MenuDrawerDynamicGird.tsx   |   1 +
 components/Drawer/NavbarMenu.tsx              |  56 ++--
 .../_ShareComponent/GridSectionView.tsx       |  25 ++
 components/index.ts                           |   2 +
 screens/Admin/listPageAdmin.tsx               |  96 +++++++
 8 files changed, 316 insertions(+), 134 deletions(-)
 create mode 100644 app/(application)/admin/notification/index.tsx
 create mode 100644 components/_ShareComponent/GridSectionView.tsx
 create mode 100644 screens/Admin/listPageAdmin.tsx

diff --git a/app/(application)/admin/_layout.tsx b/app/(application)/admin/_layout.tsx
index b7d65f8..303345c 100644
--- a/app/(application)/admin/_layout.tsx
+++ b/app/(application)/admin/_layout.tsx
@@ -1,15 +1,24 @@
-import { StackCustom } from "@/components";
+import {
+  AlertDefaultSystem,
+  DrawerCustom,
+  GridComponentView,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+} from "@/components";
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
-import NavbarMenu, { NavbarItem } from "@/components/Drawer/NavbarMenu";
+import NavbarMenu from "@/components/Drawer/NavbarMenu";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { adminListMenu } from "@/screens/Admin/listPageAdmin";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
-import { Stack } from "expo-router";
+import { router, Stack } from "expo-router";
 import { useState } from "react";
 
 export default function AdminLayout() {
-  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
+  const [openDrawerUser, setOpenDrawerUser] = useState(false);
   return (
     <>
       <Stack
@@ -25,7 +34,7 @@ export default function AdminLayout() {
               name="menu"
               size={ICON_SIZE_SMALL}
               color={MainColor.white}
-              onPress={() => setOpenDrawer(true)}
+              onPress={() => setOpenDrawerNavbar(true)}
             />
           ),
           headerRight: () => (
@@ -33,15 +42,28 @@ export default function AdminLayout() {
               name="circle-user"
               size={ICON_SIZE_SMALL}
               color={MainColor.white}
+              onPress={() => setOpenDrawerUser(true)}
             />
           ),
         }}
       >
         <Stack.Screen name="dashboard" options={{ title: "Main Dashboard" }} />
-        <Stack.Screen name="investment/index" options={{ title: "Dashboard Investasi" }} />
-        <Stack.Screen name="investment/publish" options={{ title: "Investasi Publish" }} />
-        <Stack.Screen name="investment/review" options={{ title: "Investasi Review" }} />
-        <Stack.Screen name="investment/reject" options={{ title: "Investasi Reject" }} />
+        <Stack.Screen
+          name="investment/index"
+          options={{ title: "Dashboard Investasi" }}
+        />
+        <Stack.Screen
+          name="investment/publish"
+          options={{ title: "Investasi Publish" }}
+        />
+        <Stack.Screen
+          name="investment/review"
+          options={{ title: "Investasi Review" }}
+        />
+        <Stack.Screen
+          name="investment/reject"
+          options={{ title: "Investasi Reject" }}
+        />
         <Stack.Screen name="maps" options={{ title: "Maps" }} />
         <Stack.Screen name="information" options={{ title: "Information" }} />
         <Stack.Screen name="job/index" options={{ title: "Dashboard Job" }} />
@@ -66,112 +88,125 @@ export default function AdminLayout() {
         />
       </Stack>
 
-      <DrawerAdmin isVisible={openDrawer} onClose={() => setOpenDrawer(false)}>
+      <DrawerAdmin
+        isVisible={openDrawerNavbar}
+        onClose={() => setOpenDrawerNavbar(false)}
+      >
         <StackCustom gap={"xs"}>
           <Ionicons
             name="close"
             size={ICON_SIZE_SMALL}
             color={MainColor.white}
-            onPress={() => setOpenDrawer(false)}
+            onPress={() => setOpenDrawerNavbar(false)}
             style={{ alignSelf: "flex-end" }}
           />
 
-          <NavbarMenu items={listItem} onClose={() => setOpenDrawer(false)} />
+          <NavbarMenu
+            items={adminListMenu}
+            onClose={() => setOpenDrawerNavbar(false)}
+          />
         </StackCustom>
       </DrawerAdmin>
+
+      <DrawerCustom
+        isVisible={openDrawerUser}
+        closeDrawer={() => setOpenDrawerUser(false)}
+        height={"auto"}
+      >
+        <StackCustom>
+          <GridComponentView
+            leftIcon={
+              <Ionicons
+                name="person"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.white}
+              />
+            }
+          >
+            <TextCustom>Username</TextCustom>
+          </GridComponentView>
+          <GridComponentView
+            leftIcon={
+              <Ionicons
+                name="ribbon-outline"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.white}
+              />
+            }
+          >
+            <TextCustom>User Role</TextCustom>
+          </GridComponentView>
+
+          <MenuDrawerDynamicGrid
+            columns={3}
+            data={[
+              {
+                label: "Notifikasi",
+                value: "notification",
+                icon: (
+                  <Ionicons
+                    name="notifications"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.white}
+                  />
+                ),
+                path: "/admin/notification",
+              },
+              {
+                label: "Kembali ke User",
+                value: "back-to-user",
+                icon: (
+                  <Ionicons
+                    name="git-compare"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.white}
+                  />
+                ),
+                path: "" as any,
+              },
+              {
+                label: "Keluar",
+                value: "logout",
+                icon: (
+                  <Ionicons
+                    name="log-out"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.white}
+                  />
+                ),
+                path: "" as any,
+                color: MainColor.red,
+              },
+            ]}
+            onPressItem={(item) => {
+              if (item.value === "notification") {
+                router.push("/admin/notification");
+                setOpenDrawerUser(false);
+              } else if (item.value === "back-to-user") {
+                AlertDefaultSystem({
+                  title: "Kembali ke User",
+                  message: "Apakah Anda yakin ingin kembali ke user?",
+                  textLeft: "Batal",
+                  textRight: "Ya",
+                  onPressRight: () => {
+                    router.replace(`/(application)/(user)/profile/${123}`);
+                  },
+                });
+              } else if (item.value === "logout") {
+                AlertDefaultSystem({
+                  title: "Keluar",
+                  message: "Apakah Anda yakin ingin keluar?",
+                  textLeft: "Batal",
+                  textRight: "Keluar",
+                  onPressRight: () => {
+                    router.replace("/");
+                  },
+                });
+              }
+            }}
+          />
+        </StackCustom>
+      </DrawerCustom>
     </>
   );
 }
-
-const listItem: 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" },
-      { label: "Review", link: "/admin/investment/review" },
-      { label: "Reject", link: "/admin/investment/reject" },
-    ],
-  },
-  {
-    label: "Donasi",
-    icon: "hand-right",
-    links: [
-      { label: "Dashboard", link: "/admin/donasi" },
-      { label: "Publish", link: "/admin/donasi/publish" },
-      { label: "Review", link: "/admin/donasi/review" },
-      { label: "Reject", link: "/admin/donasi/reject" },
-      { label: "Kategori", link: "/admin/donasi/kategori" },
-    ],
-  },
-  {
-    label: "Event",
-    icon: "calendar-clear",
-    links: [
-      { label: "Dashboard", link: "/admin/event" },
-      { label: "Publish", link: "/admin/event/publish" },
-      { label: "Review", link: "/admin/event/review" },
-      { label: "Reject", link: "/admin/event/reject" },
-      { label: "Tipe Acara", link: "/admin/event/tipe-acara" },
-      { label: "Riwayat", link: "/admin/event/riwayat" },
-    ],
-  },
-  {
-    label: "Voting",
-    icon: "accessibility-outline",
-    links: [
-      { label: "Dashboard", link: "/admin/voting" },
-      { label: "Publish", link: "/admin/voting/publish" },
-      { label: "Review", link: "/admin/voting/review" },
-      { label: "Reject", link: "/admin/voting/reject" },
-      { label: "Riwayat", link: "/admin/voting/riwayat" },
-    ],
-  },
-  {
-    label: "Job",
-    icon: "desktop-outline",
-    links: [
-      { label: "Dashboard", link: "/admin/job" },
-      { label: "Publish", link: "/admin/job/publish" },
-      { label: "Review", link: "/admin/job/review" },
-      { label: "Reject", link: "/admin/job/reject" },
-    ],
-  },
-  {
-    label: "Forum",
-    icon: "chatbubble-ellipses-outline",
-    links: [
-      { label: "Dashboard", link: "/admin/forum" },
-      { label: "Posting", link: "/admin/forum/publish" },
-      { label: "Report Posting", link: "/admin/forum/review" },
-      { label: "Report Comment", link: "/admin/forum/reject" },
-    ],
-  },
-  {
-    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/information",
-  },
-  {
-    label: "User Access",
-    icon: "people",
-    link: "/admin/user-access",
-  },
-];
diff --git a/app/(application)/admin/notification/index.tsx b/app/(application)/admin/notification/index.tsx
new file mode 100644
index 0000000..eef8cc0
--- /dev/null
+++ b/app/(application)/admin/notification/index.tsx
@@ -0,0 +1,20 @@
+import { BackButton, TextCustom, ViewWrapper } from "@/components";
+import { Stack } from "expo-router";
+
+export default function AdminNotification() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Admin Notifikasi",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <></>,
+        }}
+      />
+
+      <ViewWrapper>
+        <TextCustom>Notification</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 078d297..14240ab 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -14,7 +14,10 @@ export default function RootLayout() {
             headerTitleAlign: "center",
           }}
         >
-          <Stack.Screen name="index" options={{ title: "" }} />
+          <Stack.Screen
+            name="index"
+            options={{ title: "", headerBackVisible: false }}
+          />
           <Stack.Screen name="+not-found" options={{ title: "" }} />
           <Stack.Screen
             name="verification"
diff --git a/components/Drawer/MenuDrawerDynamicGird.tsx b/components/Drawer/MenuDrawerDynamicGird.tsx
index eba1007..5b4c8ac 100644
--- a/components/Drawer/MenuDrawerDynamicGird.tsx
+++ b/components/Drawer/MenuDrawerDynamicGird.tsx
@@ -7,6 +7,7 @@ import { Href } from "expo-router";
 type IMenuDrawerItemProps = {
     icon: React.ReactNode;
     label: string;
+    value?: string;
     path?: Href;
     color?: string;
 }
diff --git a/components/Drawer/NavbarMenu.tsx b/components/Drawer/NavbarMenu.tsx
index 7ba4d9c..6416647 100644
--- a/components/Drawer/NavbarMenu.tsx
+++ b/components/Drawer/NavbarMenu.tsx
@@ -51,34 +51,34 @@ export default function NavbarMenu({ items, onClose }: NavbarMenuProps) {
     );
   };
 
- return (
-   <View
-     style={{
-      //  flex: 1,
-      //  backgroundColor: MainColor.black,
-       marginBottom: 20,
-     }}
-   >
-     <ScrollView
-       contentContainerStyle={{
-         paddingVertical: 10, // Opsional: tambahkan padding
-       }}
-      //  showsVerticalScrollIndicator={false} // Opsional: sembunyikan indikator scroll
-     >
-       {items.map((item) => (
-         <MenuItem
-           key={item.label}
-           item={item}
-           onClose={onClose}
-           activeLink={activeLink}
-           setActiveLink={setActiveLink}
-           isOpen={openKeys.includes(item.label)}
-           toggleOpen={() => toggleOpen(item.label)}
-         />
-       ))}
-     </ScrollView>
-   </View>
- );
+  return (
+    <View
+      style={{
+        //  flex: 1,
+        //  backgroundColor: MainColor.black,
+        marginBottom: 20, 
+      }}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          paddingVertical: 10, // Opsional: tambahkan padding
+        }}
+        //  showsVerticalScrollIndicator={false} // Opsional: sembunyikan indikator scroll
+      >
+        {items.map((item) => (
+          <MenuItem
+            key={item.label}
+            item={item}
+            onClose={onClose}
+            activeLink={activeLink}
+            setActiveLink={setActiveLink}
+            isOpen={openKeys.includes(item.label)}
+            toggleOpen={() => toggleOpen(item.label)}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
 }
 
 // Komponen Item Menu
diff --git a/components/_ShareComponent/GridSectionView.tsx b/components/_ShareComponent/GridSectionView.tsx
new file mode 100644
index 0000000..d7efda7
--- /dev/null
+++ b/components/_ShareComponent/GridSectionView.tsx
@@ -0,0 +1,25 @@
+import Grid from "../Grid/GridCustom";
+
+export default function GridComponentView({
+  leftIcon,
+  children,
+  rightIcon,
+}: {
+  leftIcon?: React.ReactNode;
+  children: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}) {
+  return (
+    <Grid containerStyle={{ marginBottom: 0 }}>
+      <Grid.Col span={1} style={{ justifyContent: "center" }}>
+        {leftIcon}
+      </Grid.Col>
+      <Grid.Col span={10} style={{ justifyContent: "center" }}>
+        {children}
+      </Grid.Col>
+      <Grid.Col span={1} style={{ justifyContent: "center" }}>
+        {rightIcon}
+      </Grid.Col>
+    </Grid>
+  );
+}
diff --git a/components/index.ts b/components/index.ts
index 207a212..beec144 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -55,6 +55,7 @@ import TabBarBackground from "./_ShareComponent/TabBarBackground";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import SearchInput from "./_ShareComponent/SearchInput";
 import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
+import GridComponentView from "./_ShareComponent/GridSectionView";
 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
 
@@ -107,6 +108,7 @@ export {
   // ShareComponent
   SearchInput,
   DummyLandscapeImage,
+  GridComponentView,
   Spacing,
   // Stack
   StackCustom,
diff --git a/screens/Admin/listPageAdmin.tsx b/screens/Admin/listPageAdmin.tsx
new file mode 100644
index 0000000..2ec3f62
--- /dev/null
+++ b/screens/Admin/listPageAdmin.tsx
@@ -0,0 +1,96 @@
+import { NavbarItem } from "@/components/Drawer/NavbarMenu";
+
+export { adminListMenu }
+
+const adminListMenu: 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" },
+      { label: "Review", link: "/admin/investment/review" },
+      { label: "Reject", link: "/admin/investment/reject" },
+    ],
+  },
+  {
+    label: "Donasi",
+    icon: "hand-right",
+    links: [
+      { label: "Dashboard", link: "/admin/donasi" },
+      { label: "Publish", link: "/admin/donasi/publish" },
+      { label: "Review", link: "/admin/donasi/review" },
+      { label: "Reject", link: "/admin/donasi/reject" },
+      { label: "Kategori", link: "/admin/donasi/kategori" },
+    ],
+  },
+  {
+    label: "Event",
+    icon: "calendar-clear",
+    links: [
+      { label: "Dashboard", link: "/admin/event" },
+      { label: "Publish", link: "/admin/event/publish" },
+      { label: "Review", link: "/admin/event/review" },
+      { label: "Reject", link: "/admin/event/reject" },
+      { label: "Tipe Acara", link: "/admin/event/tipe-acara" },
+      { label: "Riwayat", link: "/admin/event/riwayat" },
+    ],
+  },
+  {
+    label: "Voting",
+    icon: "accessibility-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/voting" },
+      { label: "Publish", link: "/admin/voting/publish" },
+      { label: "Review", link: "/admin/voting/review" },
+      { label: "Reject", link: "/admin/voting/reject" },
+      { label: "Riwayat", link: "/admin/voting/riwayat" },
+    ],
+  },
+  {
+    label: "Job",
+    icon: "desktop-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/job" },
+      { label: "Publish", link: "/admin/job/publish" },
+      { label: "Review", link: "/admin/job/review" },
+      { label: "Reject", link: "/admin/job/reject" },
+    ],
+  },
+  {
+    label: "Forum",
+    icon: "chatbubble-ellipses-outline",
+    links: [
+      { label: "Dashboard", link: "/admin/forum" },
+      { label: "Posting", link: "/admin/forum/publish" },
+      { label: "Report Posting", link: "/admin/forum/review" },
+      { label: "Report Comment", link: "/admin/forum/reject" },
+    ],
+  },
+  {
+    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/information",
+  },
+  {
+    label: "User Access",
+    icon: "people",
+    link: "/admin/user-access",
+  },
+];
\ No newline at end of file

From d47fff469b996a4a527914a761d9ae5f890477d8 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Wed, 6 Aug 2025 17:35:30 +0800
Subject: [PATCH 3/3] Admin App-Information Add: -
 screens/Admin/App-Information - _ShareComponent/Admin -
 app/(application)/admin/app-information

### No Issue
---
 app/(application)/admin/_layout.tsx           | 45 ++++++---
 .../admin/app-information/index.tsx           | 62 ++++++++++++
 app/(application)/admin/dashboard.tsx         | 33 ++++++-
 app/(application)/admin/information.tsx       | 11 ---
 app/(application)/admin/maps.tsx              |  4 +-
 components/Container/CircleContainer.tsx      | 30 +++---
 components/Divider/Divider.tsx                |  4 +-
 components/Text/TextCustom.tsx                |  5 +-
 .../_ShareComponent/Admin/BoxDashboard.tsx    | 46 +++++++++
 .../_ShareComponent/Admin/BoxTitlePage.tsx    | 16 ++++
 .../App-Information/BusinessFieldSection.tsx  |  9 ++
 .../InformationBankSection.tsx                | 95 +++++++++++++++++++
 .../Admin/App-Information/StickerSection.tsx  |  9 ++
 screens/Admin/listPageAdmin.tsx               |  2 +-
 screens/Authentication/LoginView.tsx          |  4 +-
 15 files changed, 326 insertions(+), 49 deletions(-)
 create mode 100644 app/(application)/admin/app-information/index.tsx
 delete mode 100644 app/(application)/admin/information.tsx
 create mode 100644 components/_ShareComponent/Admin/BoxDashboard.tsx
 create mode 100644 components/_ShareComponent/Admin/BoxTitlePage.tsx
 create mode 100644 screens/Admin/App-Information/BusinessFieldSection.tsx
 create mode 100644 screens/Admin/App-Information/InformationBankSection.tsx
 create mode 100644 screens/Admin/App-Information/StickerSection.tsx

diff --git a/app/(application)/admin/_layout.tsx b/app/(application)/admin/_layout.tsx
index 303345c..bd4383c 100644
--- a/app/(application)/admin/_layout.tsx
+++ b/app/(application)/admin/_layout.tsx
@@ -23,6 +23,7 @@ export default function AdminLayout() {
     <>
       <Stack
         screenOptions={{
+          title: "HIPMI DASHBOARD",
           headerStyle: GStyles.headerStyle,
           headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
@@ -47,44 +48,58 @@ export default function AdminLayout() {
           ),
         }}
       >
-        <Stack.Screen name="dashboard" options={{ title: "Main Dashboard" }} />
+        <Stack.Screen name="dashboard" 
+        // options={{ title: "Main Dashboard" }} 
+        />
         <Stack.Screen
           name="investment/index"
-          options={{ title: "Dashboard Investasi" }}
+          // options={{ title: "Dashboard Investasi" }}
         />
         <Stack.Screen
           name="investment/publish"
-          options={{ title: "Investasi Publish" }}
+          // options={{ title: "Investasi Publish" }}
         />
         <Stack.Screen
           name="investment/review"
-          options={{ title: "Investasi Review" }}
+          // options={{ title: "Investasi Review" }}
         />
         <Stack.Screen
           name="investment/reject"
-          options={{ title: "Investasi Reject" }}
+          // options={{ title: "Investasi Reject" }}
+        />
+        <Stack.Screen name="maps" 
+        // options={{ title: "Maps" }} 
+        />
+        <Stack.Screen name="app-information/index" 
+        // options={{ title: "Information" }} 
+        />
+        <Stack.Screen name="job/index" 
+        // options={{ title: "Dashboard Job" }} 
+        />
+        <Stack.Screen name="job/publish" 
+        // options={{ title: "Job Publish" }} 
+        />
+        <Stack.Screen name="job/review" 
+        // options={{ title: "Job Review" }} 
+        />
+        <Stack.Screen name="job/reject" 
+        // options={{ title: "Job Reject" }} 
         />
-        <Stack.Screen name="maps" options={{ title: "Maps" }} />
-        <Stack.Screen name="information" options={{ title: "Information" }} />
-        <Stack.Screen name="job/index" options={{ title: "Dashboard Job" }} />
-        <Stack.Screen name="job/publish" options={{ title: "Job Publish" }} />
-        <Stack.Screen name="job/review" options={{ title: "Job Review" }} />
-        <Stack.Screen name="job/reject" options={{ title: "Job Reject" }} />
         <Stack.Screen
           name="collaboration/index"
-          options={{ title: "Dashboard Collaboration" }}
+          // options={{ title: "Dashboard Collaboration" }}
         />
         <Stack.Screen
           name="collaboration/publish"
-          options={{ title: "Collaboration Publish" }}
+          // options={{ title: "Collaboration Publish" }}
         />
         <Stack.Screen
           name="collaboration/group"
-          options={{ title: "Collaboration Group" }}
+          // options={{ title: "Collaboration Group" }}
         />
         <Stack.Screen
           name="collaboration/reject"
-          options={{ title: "Collaboration Reject" }}
+          // options={{ title: "Collaboration Reject" }}
         />
       </Stack>
 
diff --git a/app/(application)/admin/app-information/index.tsx b/app/(application)/admin/app-information/index.tsx
new file mode 100644
index 0000000..213ad29
--- /dev/null
+++ b/app/(application)/admin/app-information/index.tsx
@@ -0,0 +1,62 @@
+import {
+  ScrollableCustom,
+  ViewWrapper
+} from "@/components";
+import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
+import AdminAppInformation_Bank from "@/screens/Admin/App-Information/InformationBankSection";
+import AdminAppInformation_StickerSection from "@/screens/Admin/App-Information/StickerSection";
+import { useState } from "react";
+
+export default function AdminInformation() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("bank");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={[
+        {
+          id: "1",
+          label: "Informasi Bank",
+          value: "bank",
+        },
+        {
+          id: "2",
+          label: "Bidang Bisnis",
+          value: "business",
+        },
+        {
+          id: "3",
+          label: "Stiker",
+          value: "sticker",
+        },
+      ]}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  const renderContent = () => {
+    switch (activeCategory) {
+      case "bank":
+        return <AdminAppInformation_Bank />;
+      case "business":
+        return <AdminAppInformation_BusinessFieldSection />;
+      case "sticker":
+        return <AdminAppInformation_StickerSection />;
+      default:
+        return <AdminAppInformation_Bank />;
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper headerComponent={scrollComponent}>
+        {renderContent()}
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/admin/dashboard.tsx b/app/(application)/admin/dashboard.tsx
index ceb6d04..4748f08 100644
--- a/app/(application)/admin/dashboard.tsx
+++ b/app/(application)/admin/dashboard.tsx
@@ -1,11 +1,40 @@
-import { 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 { Ionicons } from "@expo/vector-icons";
 
 export default function AdminDashboard() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Admin Dashboard</TextCustom>
+        <StackCustom>
+          <TextCustom bold size={30}>
+            Main Dashboard
+          </TextCustom>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
       </ViewWrapper>
     </>
   );
 }
+
+const listData = [
+  {
+    label: "User",
+    value: 4,
+    icon: <Ionicons name="people" size={30} color={MainColor.yellow} />,
+  },
+  {
+    label: "Portofolio",
+    value: 7,
+    icon: (
+      <Ionicons name="id-card-outline" size={30} color={MainColor.yellow} />
+    ),
+  },
+];
diff --git a/app/(application)/admin/information.tsx b/app/(application)/admin/information.tsx
deleted file mode 100644
index d7831ef..0000000
--- a/app/(application)/admin/information.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminInformation() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Information</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}
diff --git a/app/(application)/admin/maps.tsx b/app/(application)/admin/maps.tsx
index c08541d..f27ac3d 100644
--- a/app/(application)/admin/maps.tsx
+++ b/app/(application)/admin/maps.tsx
@@ -1,10 +1,10 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { MapCustom, ViewWrapper } from "@/components";
 
 export default function AdminMaps() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Maps</TextCustom>
+        <MapCustom height={"100%"} />
       </ViewWrapper>
     </>
   );
diff --git a/components/Container/CircleContainer.tsx b/components/Container/CircleContainer.tsx
index 187b994..39987f9 100644
--- a/components/Container/CircleContainer.tsx
+++ b/components/Container/CircleContainer.tsx
@@ -1,22 +1,28 @@
 import { MainColor } from "@/constants/color-palet";
 import React from "react";
-import { StyleSheet, TextInput, View } from "react-native";
+import { StyleProp, StyleSheet, TextInput, View, ViewStyle } from "react-native";
 
 interface CircularInputProps {
-  value: string | number;
-  onChange?: (value: string) => void;
+  value?: string | number
+  onChange?: (value: string | number) => void;
+  icon?: React.ReactNode;
+  style?: StyleProp<ViewStyle>
 }
 
-const CircularInput: React.FC<CircularInputProps> = ({ value, onChange }) => {
+const CircularInput: React.FC<CircularInputProps> = ({ value, onChange, icon, style }) => {
   return (
-    <View style={styles.circleContainer}>
-      <TextInput
-        value={String(value)}
-        onChangeText={onChange}
-        style={styles.input}
-        keyboardType="numeric"
-        maxLength={2} // Batasan maksimal karakter
-      />
+    <View style={[styles.circleContainer, style]}>
+      {icon ? (
+        icon
+      ) : (
+        <TextInput
+          value={String(value)}
+          onChangeText={onChange}
+          style={styles.input}
+          keyboardType="numeric"
+          maxLength={2} // Batasan maksimal karakter
+        />
+      )}
     </View>
   );
 };
diff --git a/components/Divider/Divider.tsx b/components/Divider/Divider.tsx
index 810ab6e..477d354 100644
--- a/components/Divider/Divider.tsx
+++ b/components/Divider/Divider.tsx
@@ -2,8 +2,8 @@ import { AccentColor } from "@/constants/color-palet";
 import { View } from "react-native";
 
 export default function Divider({
-    color = AccentColor.blue,
-    size = 1,
+    color = AccentColor.white,
+    size = 0.5,
     marginTop= 12,
     marginBottom= 12, 
 }: {
diff --git a/components/Text/TextCustom.tsx b/components/Text/TextCustom.tsx
index c1ad0e7..49fbf3d 100644
--- a/components/Text/TextCustom.tsx
+++ b/components/Text/TextCustom.tsx
@@ -22,7 +22,7 @@ interface TextCustomProps {
   style?: StyleProp<TextStyle>;
   bold?: boolean;
   semiBold?: boolean;
-  size?: "default" | "large" | "small" | "xlarge";
+  size?: "default" | "large" | "small" | "xlarge" | number
   color?: "default" | "yellow" | "red" | "gray" | "green" | "black"
   align?: TextAlign; // Prop untuk alignment
   truncate?: boolean | number;
@@ -54,6 +54,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
     if (size === "large") selectedStyles.push(styles.large);
     else if (size === "xlarge") selectedStyles.push(styles.xlarge);
     else if (size === "small") selectedStyles.push(styles.small);
+    else if (typeof size === "number") selectedStyles.push({ fontSize: size });
 
     // Color
     if (color === "yellow") selectedStyles.push(styles.yellow);
@@ -105,7 +106,7 @@ export const styles = StyleSheet.create({
     fontSize: TEXT_SIZE_MEDIUM,
     color: MainColor.white,
     fontFamily: "Poppins-Regular",
-    lineHeight: 20,
+    // lineHeight: 20,
   },
   bold: {
     fontFamily: "Poppins-Bold",
diff --git a/components/_ShareComponent/Admin/BoxDashboard.tsx b/components/_ShareComponent/Admin/BoxDashboard.tsx
new file mode 100644
index 0000000..4c85dae
--- /dev/null
+++ b/components/_ShareComponent/Admin/BoxDashboard.tsx
@@ -0,0 +1,46 @@
+import BaseBox from "@/components/Box/BaseBox";
+import CircleContainer from "@/components/Container/CircleContainer";
+import Grid from "@/components/Grid/GridCustom";
+import StackCustom from "@/components/Stack/StackCustom";
+import TextCustom from "@/components/Text/TextCustom";
+import { MainColor } from "@/constants/color-palet";
+
+interface BoxDashboardProps {
+  item: {
+    label: string;
+    value: string | number;
+    icon: React.ReactNode;
+  };
+}
+
+export default function AdminComp_BoxDashboard({ item }: BoxDashboardProps) {
+  return (
+    <>
+      <BaseBox
+        backgroundColor={MainColor.soft_darkblue}
+        paddingTop={5}
+        paddingBottom={5}
+      >
+        <Grid containerStyle={{ marginBlock: 0 }}>
+          <Grid.Col
+            span={9}
+            style={{
+              paddingLeft: 10,
+            }}
+          >
+            <StackCustom gap={"xs"}>
+              <TextCustom bold>{item.label}</TextCustom>
+              <TextCustom size={50}>{item.value}</TextCustom>
+            </StackCustom>
+          </Grid.Col>
+          <Grid.Col
+            span={3}
+            style={{ alignItems: "flex-start", justifyContent: "center" }}
+          >
+            <CircleContainer icon={item.icon} />
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}
diff --git a/components/_ShareComponent/Admin/BoxTitlePage.tsx b/components/_ShareComponent/Admin/BoxTitlePage.tsx
new file mode 100644
index 0000000..1e97491
--- /dev/null
+++ b/components/_ShareComponent/Admin/BoxTitlePage.tsx
@@ -0,0 +1,16 @@
+import BaseBox from "@/components/Box/BaseBox";
+import TextCustom from "@/components/Text/TextCustom";
+import { TEXT_SIZE_LARGE } from "@/constants/constans-value";
+
+export default function AdminComp_BoxTitle({ title , rightComponent}: { title: string , rightComponent?: React.ReactNode}) {
+  return (
+    <>
+      <BaseBox style={{ flexDirection: "row", justifyContent: "space-between" }}>
+        <TextCustom style={{ alignSelf: "center" }} bold size={TEXT_SIZE_LARGE}>
+          {title}
+        </TextCustom>
+        {rightComponent}
+      </BaseBox>
+    </>
+  );
+}
diff --git a/screens/Admin/App-Information/BusinessFieldSection.tsx b/screens/Admin/App-Information/BusinessFieldSection.tsx
new file mode 100644
index 0000000..949fec4
--- /dev/null
+++ b/screens/Admin/App-Information/BusinessFieldSection.tsx
@@ -0,0 +1,9 @@
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+
+export default function AdminAppInformation_BusinessFieldSection() {
+  return (
+    <>
+      <AdminComp_BoxTitle title="Bidang Bisnis" />
+    </>
+  );
+}
diff --git a/screens/Admin/App-Information/InformationBankSection.tsx b/screens/Admin/App-Information/InformationBankSection.tsx
new file mode 100644
index 0000000..eab8ea9
--- /dev/null
+++ b/screens/Admin/App-Information/InformationBankSection.tsx
@@ -0,0 +1,95 @@
+import {
+  BaseBox,
+  ButtonCustom,
+  Divider,
+  Grid,
+  TextCustom
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Switch } from "react-native-paper";
+
+export default function AdminAppInformation_Bank() {
+  const [value, setValue] = useState(false);
+  return (
+    <>
+      <AdminComp_BoxTitle
+        title="Bank"
+        rightComponent={
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={{
+              backgroundColor: MainColor.yellow,
+              padding: 5,
+              borderRadius: 50,
+            }}
+            onPress={() => {}}
+          >
+            <Ionicons name="add" size={16} color="black" />
+          </TouchableOpacity>
+        }
+      />
+      <BaseBox>
+        <Grid>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Aksi</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Status</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <TextCustom bold>Nama Bank</TextCustom>
+          </Grid.Col>
+        </Grid>
+
+        <Divider />
+
+        {dummyMasterBank.map((e, i) => (
+          <View key={i}>
+            <Grid>
+              <Grid.Col span={4}>
+                <ButtonCustom
+                  iconLeft={
+                    <FontAwesome5
+                      name="edit"
+                      size={ICON_SIZE_SMALL}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {}}
+                >
+                  Edit
+                </ButtonCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={4}
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                <Switch
+                  value={value}
+                  onValueChange={() => {
+                    setValue(!value);
+                  }}
+                  theme={{
+                    colors: {
+                      primary: MainColor.yellow,
+                    },
+                  }}
+                />
+              </Grid.Col>
+              <Grid.Col span={4} style={{ justifyContent: "center" }}>
+                <TextCustom>{e.code}</TextCustom>
+              </Grid.Col>
+            </Grid>
+            <Divider />
+          </View>
+        ))}
+      </BaseBox>
+    </>
+  );
+}
diff --git a/screens/Admin/App-Information/StickerSection.tsx b/screens/Admin/App-Information/StickerSection.tsx
new file mode 100644
index 0000000..d0709ce
--- /dev/null
+++ b/screens/Admin/App-Information/StickerSection.tsx
@@ -0,0 +1,9 @@
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+
+export default function AdminAppInformation_StickerSection() {
+  return (
+    <>
+      <AdminComp_BoxTitle title="Sticker" />
+    </>
+  );
+}
diff --git a/screens/Admin/listPageAdmin.tsx b/screens/Admin/listPageAdmin.tsx
index 2ec3f62..e05ec4d 100644
--- a/screens/Admin/listPageAdmin.tsx
+++ b/screens/Admin/listPageAdmin.tsx
@@ -86,7 +86,7 @@ const adminListMenu: NavbarItem[] = [
   {
     label: "App Information",
     icon: "information-circle",
-    link: "/admin/information",
+    link: "/admin/app-information",
   },
   {
     label: "User Access",
diff --git a/screens/Authentication/LoginView.tsx b/screens/Authentication/LoginView.tsx
index 5f244fb..094027d 100644
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -32,7 +32,7 @@ export default function LoginView() {
 
     // router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
-    router.navigate("/(application)/(user)/home");
+    // router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
     // router.navigate(`/(application)/(image)/preview-image/${id}`);
@@ -40,7 +40,7 @@ export default function LoginView() {
     // router.replace("/(application)/coba");
     // router.navigate("/investment/(tabs)")1
     // router.navigate("/crowdfunding")
-    // router.navigate("/admin/dashboard")
+    router.navigate("/admin/dashboard")
   }
 
   return (