Admin

App-Information
Add:
- screens/Admin/App-Information
- _ShareComponent/Admin
- app/(application)/admin/app-information

### No Issue

app/(application)/admin/_layout.tsx

@@ -1,27 +1,29 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
-  ClickableCustom,
+  AlertDefaultSystem,
   DrawerCustom,
+  GridComponentView,
+  MenuDrawerDynamicGrid,
   StackCustom,
   TextCustom,
 } from "@/components";
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
 import NavbarMenu from "@/components/Drawer/NavbarMenu";
-import SidebarMenu from "@/components/Drawer/SidebarMenu";
 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 { router, Stack } from "expo-router";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function AdminLayout() {
-  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
+  const [openDrawerUser, setOpenDrawerUser] = useState(false);
   return (
     <>
       <Stack
         screenOptions={{
+          title: "HIPMI DASHBOARD",
           headerStyle: GStyles.headerStyle,
           headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
@@ -33,7 +35,7 @@ export default function AdminLayout() {
               name="menu"
               size={ICON_SIZE_SMALL}
               color={MainColor.white}
-              onPress={() => setOpenDrawer(true)}
+              onPress={() => setOpenDrawerNavbar(true)}
             />
           ),
           headerRight: () => (
@@ -41,54 +43,185 @@ export default function AdminLayout() {
               name="circle-user"
               size={ICON_SIZE_SMALL}
               color={MainColor.white}
+              onPress={() => setOpenDrawerUser(true)}
             />
           ),
         }}
       >
-        <Stack.Screen name="dashboard" options={{ title: "Dashboard" }} />
-        <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/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="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="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="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"}>
+      <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={[
-              { 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)}
+            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>
     </>
   );
 }
-

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

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

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

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

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

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} />
+    ),
+  },
+];

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

@@ -1,10 +1,10 @@
 import { TextCustom, ViewWrapper } from "@/components";
 
-export default function AdminInformation() {
+export default function AdminInvestment() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Information</TextCustom>
+        <TextCustom>Admin Investment</TextCustom>
       </ViewWrapper>
     </>
   );

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

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

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

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

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

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"

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

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, 
 }: {

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

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

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) =>
@@ -41,18 +52,31 @@ 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
+      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>
   );
 }
@@ -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",
   },
 });

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,

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",

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

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

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

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,

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" />
+    </>
+  );
+}

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

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" />
+    </>
+  );
+}

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/app-information",
+  },
+  {
+    label: "User Access",
+    icon: "people",
+    link: "/admin/user-access",
+  },
+];

screens/Profile/ListPage.tsx

@@ -61,7 +61,7 @@ export const drawerItemsProfile = ({
       />
     ),
     label: "Dashboard Admin",
-    path: `/(application)/(admin)/dashboard`,
+    path: `/(application)/admin/dashboard`,
   },
   {
     icon: (