Admin

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

### No Issue

app/(application)/(user)/_layout.tsx

@@ -477,6 +477,20 @@ export default function UserLayout() {
             ),
           }}
         />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/success"
+          options={{
+            title: "Donasi Berhasil",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/failed"
+          options={{
+            title: "Donasi Gagal",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Donation Section ========= */}
 

app/(application)/(user)/donation/(tabs)/my-donation.tsx

@@ -1,13 +1,14 @@
 import {
-    BadgeCustom,
+  BadgeCustom,
-    BaseBox,
+  BaseBox,
-    DummyLandscapeImage,
+  DummyLandscapeImage,
-    Grid,
+  Grid,
-    StackCustom,
+  StackCustom,
-    TextCustom,
+  TextCustom,
-    ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { router } from "expo-router";
 import { View } from "react-native";
 
 export default function DonationMyDonation() {
@@ -17,6 +18,19 @@ export default function DonationMyDonation() {
     );
     return dummyMasterStatusTransaction[randomIndex];
   });
+
+  const handlePress = (value: string) => {
+    if (value === "menunggu") {
+      router.push(`/donation/${value}/(transaction-flow)/123/invoice`);
+    } else if (value === "proses") {
+      router.push(`/donation/${value}/(transaction-flow)/123/process`);
+    } else if (value === "berhasil") {
+      router.push(`/donation/${value}/(transaction-flow)/123/success`);
+    } else if (value === "gagal") {
+      router.push(`/donation/${value}/(transaction-flow)/123/failed`);
+    }
+  };
+
   return (
     <ViewWrapper hideFooter>
       {randomStatusData.map((item, index) => (
@@ -24,11 +38,13 @@ export default function DonationMyDonation() {
           key={index}
           paddingTop={7}
           paddingBottom={7}
-          href={`/investment/${index}`}
+          onPress={() => {
+            handlePress(item.value);
+          }}
         >
           <Grid>
             <Grid.Col span={5}>
-              <DummyLandscapeImage height={100} />
+              <DummyLandscapeImage height={100} unClickPath />
             </Grid.Col>
             <Grid.Col span={1}>
               <View />

app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/failed.tsx

@@ -0,0 +1,83 @@
+import {
+  BaseBox,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
+
+export default function DonasiFailed() {
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <BaseBox>
+          <StackCustom>
+            <TextCustom bold align="center">
+              Transaksi anda gagal karena bukti transfer tidak sesuai dengan
+              data kami. Jika ini masalah khusus silahkan hubungi pada kontak
+              whatsapp kami.
+            </TextCustom>
+
+            <FontAwesome6
+              name="whatsapp"
+              size={50}
+              color={MainColor.green}
+              style={GStyles.alignSelfCenter}
+            />
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <TextCustom bold align="center" size="large">
+            Detail Transaksi
+          </TextCustom>
+
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col span={5}>
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={7}>
+                  <TextCustom style={{ paddingLeft: 10 }}>
+                    {item.value}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const listData = [
+  {
+    label: "Bank",
+    value: " BCA",
+  },
+  {
+    label: "Rekening Penerima",
+    value: "Himpunan Pengusaha Muda Indonesia",
+  },
+  {
+    label: "No Rekening",
+    value: "2304235678854332",
+  },
+  {
+    label: "Jumlah Donasi",
+    value: "Rp. 750.000",
+  },
+  {
+    label: "Tanggal",
+    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
+  },
+];

app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx

@@ -13,12 +13,12 @@ import { MainColor } from "@/constants/color-palet";
 import { router, useLocalSearchParams } from "expo-router";
 
 export default function DonationInvoice() {
-  const { id } = useLocalSearchParams();
+  const { id, transaction } = useLocalSearchParams();
   return (
     <>
       <ViewWrapper>
         <StackCustom>
-          <InformationBox text="Mohon transfer ke rekening dibawah" />
+          <InformationBox text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${transaction}`} />
           <BaseBox>
             <StackCustom gap={"xs"}>
               <TextCustom>Nama BANK</TextCustom>

app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/success.tsx

@@ -0,0 +1,83 @@
+import {
+  BaseBox,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
+
+export default function DonationSuccess() {
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <BaseBox>
+          <StackCustom>
+            <FontAwesome6
+              name="money-bill-wave"
+              size={100}
+              color={MainColor.green}
+              style={GStyles.alignSelfCenter}
+            />
+
+            <TextCustom bold align="center">
+              Terimakasih telah percaya pada kami untuk mengelola dana anda!
+              Info mengenai update Penggalian Dana ini bisa di lihat di kolom
+              berita.
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <TextCustom bold align="center" size="large">
+            Detail Transaksi
+          </TextCustom>
+
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col span={5}>
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={7}>
+                  <TextCustom style={{ paddingLeft: 10 }}>
+                    {item.value}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const listData = [
+  {
+    label: "Bank",
+    value: " BCA",
+  },
+  {
+    label: "Rekening Penerima",
+    value: "Himpunan Pengusaha Muda Indonesia",
+  },
+  {
+    label: "No Rekening",
+    value: "2304235678854332",
+  },
+  {
+    label: "Jumlah Donasi",
+    value: "Rp. 750.000",
+  },
+  {
+    label: "Tanggal",
+    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
+  },
+];

app/(application)/(user)/donation/create-story.tsx

@@ -57,7 +57,7 @@ export default function DonationCreateStory() {
         <Spacing />
         <ButtonCustom
           onPress={() => {
-            router.navigate(`/donation/(tabs)/status`);
+            router.replace(`/donation/(tabs)/status`);
           }}
         >
           Simpan

app/(application)/(user)/donation/create.tsx

@@ -66,7 +66,7 @@ export default function DonationCreate() {
         <Spacing />
         <ButtonCustom
           onPress={() => {
-            router.push("/donation/create-story");
+            router.replace("/donation/create-story");
           }}
         >
           Selanjutnya

app/(application)/_layout.tsx

@@ -7,6 +7,8 @@ export default function ApplicationLayout() {
     <>
       <Stack screenOptions={HeaderStyles}>
         <Stack.Screen name="(user)" options={{ headerShown: false }} />
+        <Stack.Screen name="admin" options={{ headerShown: false }} />
+        
 
         {/* Take Picture */}
         <Stack.Screen

app/(application)/admin/_layout.tsx

@@ -0,0 +1,227 @@
+import {
+  AlertDefaultSystem,
+  DrawerCustom,
+  GridComponentView,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
+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 { router, Stack } from "expo-router";
+import { useState } from "react";
+
+export default function AdminLayout() {
+  const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
+  const [openDrawerUser, setOpenDrawerUser] = useState(false);
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          title: "HIPMI DASHBOARD",
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+          headerTitleAlign: "center",
+          contentStyle: {
+            borderBottomColor: AccentColor.blue,
+          },
+          headerLeft: () => (
+            <Ionicons
+              name="menu"
+              size={ICON_SIZE_SMALL}
+              color={MainColor.white}
+              onPress={() => setOpenDrawerNavbar(true)}
+            />
+          ),
+          headerRight: () => (
+            <FontAwesome6
+              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="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={openDrawerNavbar}
+        onClose={() => setOpenDrawerNavbar(false)}
+      >
+        <StackCustom gap={"xs"}>
+          <Ionicons
+            name="close"
+            size={ICON_SIZE_SMALL}
+            color={MainColor.white}
+            onPress={() => setOpenDrawerNavbar(false)}
+            style={{ alignSelf: "flex-end" }}
+          />
+
+          <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>
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+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>
+        <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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminInvestment() {
+  return (
+    <>
+      <ViewWrapper>
+        <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/job/index.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminJob() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Job</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminJobPublish() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Job Publish</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminJobReject() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Job Reject</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function AdminJobReview() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Admin Job Review</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/maps.tsx

@@ -0,0 +1,11 @@
+import { MapCustom, ViewWrapper } from "@/components";
+
+export default function AdminMaps() {
+  return (
+    <>
+      <ViewWrapper>
+        <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/Box/InformationBox.tsx

@@ -3,8 +3,9 @@ import { Ionicons } from "@expo/vector-icons";
 import Grid from "../Grid/GridCustom";
 import TextCustom from "../Text/TextCustom";
 import BaseBox from "./BaseBox";
+import React from "react";
 
-export default function InformationBox({ text }: { text: string }) {
+export default function InformationBox({ text }: { text: React.ReactNode | string }) {
   return (
     <>
       <BaseBox paddingTop={5} paddingBottom={5}>

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;
+  value?: string | number
-  onChange?: (value: string) => void;
+  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}>
+    <View style={[styles.circleContainer, style]}>
-      <TextInput
+      {icon ? (
-        value={String(value)}
+        icon
-        onChangeText={onChange}
+      ) : (
-        style={styles.input}
+        <TextInput
-        keyboardType="numeric"
+          value={String(value)}
-        maxLength={2} // Batasan maksimal karakter
+          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,
+    color = AccentColor.white,
-    size = 1,
+    size = 0.5,
     marginTop= 12,
     marginBottom= 12, 
 }: {

components/Drawer/DrawerAdmin.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useRef } from "react";
+import {
+  Animated,
+  Dimensions,
+  InteractionManager,
+  PanResponder,
+  StyleSheet,
+} from "react-native";
+
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+// Lebar drawer (bisa di-pass sebagai prop)
+const DRAWER_WIDTH = Dimensions.get("window").width * 0.8; // 80% lebar layar
+
+interface DrawerAdminProps {
+  children?: React.ReactNode;
+  width?: number; // lebar drawer
+  isVisible: boolean;
+  onClose: () => void; // ganti nama dari closeDrawer agar lebih jelas
+}
+
+export default function DrawerAdmin({
+  children,
+  width = DRAWER_WIDTH,
+  isVisible,
+  onClose,
+}: DrawerAdminProps) {
+  const drawerAnim = useRef(new Animated.Value(-width)).current; // mulai dari kiri (tersembunyi)
+
+  // Efek untuk handle animasi saat isVisible berubah
+  useEffect(() => {
+    if (isVisible) {
+      Animated.timing(drawerAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(drawerAnim, {
+        toValue: -width,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isVisible, width, onClose, drawerAnim]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return Math.abs(gestureState.dx) > 10; // deteksi gesek horizontal
+      },
+      onPanResponderMove: (_, gestureState) => {
+        let newAnim = gestureState.dx; // geser ke kanan = dx positif → drawerAnim negatif
+        newAnim = Math.max(-width, Math.min(0, newAnim)); // batas antara -width dan 0
+        drawerAnim.setValue(newAnim);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dx > 100) {
+          // gesek kencang ke kiri → tutup
+          InteractionManager.runAfterInteractions(() => {
+            onClose();
+          });
+        } else {
+          // kembali ke posisi terbuka penuh
+          Animated.spring(drawerAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  if (!isVisible) return null;
+
+  return (
+    <>
+      {/* Overlay Gelap */}
+      <Animated.View
+        style={[
+          styles.overlay,
+          {
+            opacity: drawerAnim.interpolate({
+              inputRange: [-width, 0],
+              outputRange: [0, 0.6],
+              extrapolate: "clamp",
+            }),
+          },
+        ]}
+        onTouchStart={() => {
+          InteractionManager.runAfterInteractions(() => {
+            onClose();
+          });
+        }}
+      />
+
+      {/* Left Drawer */}
+      <Animated.View
+        style={[
+          styles.drawer,
+          {
+            width,
+            transform: [{ translateX: drawerAnim }],
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        {/* Handle Bar (opsional) */}
+        <SafeAreaView
+          edges={["top", "bottom"]}
+          style={{
+            flex: 1,
+          }}
+        >
+          {children}
+          {/* <Spacing/> */}
+        </SafeAreaView>
+      </Animated.View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "black",
+    zIndex: 998,
+  },
+  drawer: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: AccentColor.darkblue,
+    // borderRadius: 20, // opsional
+    shadowColor: "#000",
+    shadowOffset: { width: 2, height: 0 },
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    elevation: 5,
+    zIndex: 999,
+    padding: 20,
+  },
+  handleBar: {
+    width: 10,
+    height: 5,
+    backgroundColor: MainColor.yellow,
+    borderRadius: 5,
+    alignSelf: "flex-start",
+    marginBottom: 20,
+  },
+});

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

@@ -0,0 +1,276 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router, usePathname } from "expo-router";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export interface NavbarItem {
+  label: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  color?: string;
+  link?: string;
+  links?: {
+    label: string;
+    link: string;
+  }[];
+  initiallyOpened?: boolean;
+}
+
+interface NavbarMenuProps {
+  items: NavbarItem[];
+  onClose?: () => void;
+}
+
+export default function NavbarMenu({ items, onClose }: NavbarMenuProps) {
+  const pathname = usePathname();
+  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) =>
+      prev.includes(label) ? prev.filter((key) => key !== label) : [label]
+    );
+  };
+
+  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
+function MenuItem({
+  item,
+  onClose,
+  activeLink,
+  setActiveLink,
+  isOpen,
+  toggleOpen,
+}: {
+  item: NavbarItem;
+  onClose?: () => void;
+  activeLink: string | null;
+  setActiveLink: (link: string | null) => void;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  const isActive = activeLink === item.link;
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+
+  // Animasi saat isOpen berubah
+  React.useEffect(() => {
+    Animated.timing(animatedHeight, {
+      toValue: isOpen ? (item.links ? item.links.length * 40 : 0) : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, item.links, animatedHeight]);
+
+  // Jika ada submenu
+  if (item.links && item.links.length > 0) {
+    return (
+      <View>
+        {/* Parent Item */}
+        <TouchableOpacity style={styles.parentItem} onPress={toggleOpen}>
+          <Ionicons
+            name={item.icon}
+            size={16}
+            color={MainColor.white}
+            style={styles.icon}
+          />
+          <Text style={styles.parentText}>{item.label}</Text>
+          <Ionicons
+            name={isOpen ? "chevron-up" : "chevron-down"}
+            size={16}
+            color={MainColor.white}
+          />
+        </TouchableOpacity>
+
+        {/* Submenu (Animated) */}
+        <Animated.View
+          style={[
+            styles.submenu,
+            // {
+            //   backgroundColor: "red",
+            // },
+            {
+              height: animatedHeight,
+              opacity: animatedHeight.interpolate({
+                inputRange: [0, item.links.length * 40],
+                outputRange: [0, 1],
+                extrapolate: "clamp",
+              }),
+            },
+          ]}
+        >
+          {item.links.map((subItem, index) => {
+            const isSubActive = activeLink === subItem.link;
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.subItem, isSubActive && styles.subItemActive]}
+                onPress={() => {
+                  setActiveLink(subItem.link);
+                  onClose?.();
+                  router.push(subItem.link as any);
+                }}
+              >
+                <Ionicons
+                  name="radio-button-on-outline"
+                  size={16}
+                  color={isSubActive ? MainColor.yellow : MainColor.white}
+                  style={styles.icon}
+                />
+                <Text
+                  style={[
+                    styles.subText,
+                    isSubActive && { color: MainColor.yellow },
+                  ]}
+                >
+                  {subItem.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  // Menu tanpa submenu
+  return (
+    <TouchableOpacity
+      style={[styles.singleItem, isActive && styles.singleItemActive]}
+      onPress={() => {
+        setActiveLink(item.link || null);
+        onClose?.();
+        router.push(item.link as any);
+      }}
+    >
+      <Ionicons
+        name={item.icon}
+        size={16}
+        color={isActive ? MainColor.yellow : MainColor.white}
+        style={styles.icon}
+      />
+      <Text
+        style={[
+          styles.singleText,
+          { color: isActive ? MainColor.yellow : MainColor.white },
+        ]}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 5,
+  },
+  parentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    // backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+    justifyContent: "space-between",
+  },
+  parentText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  singleItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    // backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+  },
+  singleItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  singleText: {
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  icon: {
+    width: 24,
+    textAlign: "center",
+    paddingRight: 10,
+  },
+  submenu: {
+    overflow: "hidden",
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  subItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginBottom: 4,
+  },
+  subItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  subText: {
+    color: MainColor.white,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+});

components/Drawer/SidebarMenu.tsx

@@ -0,0 +1,279 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router, usePathname } from "expo-router";
+
+// Lebar sidebar
+const SIDEBAR_WIDTH = Dimensions.get("window").width * 0.8;
+
+interface SidebarItem {
+  label: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  color?: string;
+  link?: string;
+  links?: {
+    label: string;
+    link: string;
+  }[];
+  initiallyOpened?: boolean;
+}
+
+interface SidebarMenuProps {
+  items: SidebarItem[];
+  onClose?: () => void;
+}
+
+export default function SidebarMenu({ items, onClose }: SidebarMenuProps) {
+  const pathname = usePathname();
+  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]);
+
+  // Auto-buka dropdown jika submenu aktif
+  useEffect(() => {
+    const activeItem = items.find((item) =>
+      item.links?.some((sub) => sub.link === normalizedPathname)
+    );
+    if (activeItem && !openKeys.includes(activeItem.label)) {
+      setOpenKeys([activeItem.label]);
+    }
+  }, [normalizedPathname, items, openKeys]);
+
+  // Toggle dropdown
+  const toggleOpen = (label: string) => {
+    setOpenKeys((prev) =>
+      prev.includes(label) ? prev.filter((key) => key !== label) : [label]
+    );
+  };
+
+  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>
+  );
+}
+
+// Komponen Item Menu
+function MenuItem({
+  item,
+  onClose,
+  activeLink,
+  setActiveLink,
+  isOpen,
+  toggleOpen,
+}: {
+  item: SidebarItem;
+  onClose?: () => void;
+  activeLink: string | null;
+  setActiveLink: (link: string | null) => void;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+
+  // Animasi saat isOpen berubah
+  React.useEffect(() => {
+    Animated.timing(animatedHeight, {
+      toValue: isOpen ? (item.links ? item.links.length * 40 : 0) : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, item.links]);
+
+  // Cek apakah menu ini aktif
+  const isActive = activeLink === item.link;
+
+  // Cek apakah ada submenu aktif
+  const hasActiveSubItem = item.links?.some((sub) => sub.link === activeLink);
+
+  // Jika ada submenu
+  if (item.links && item.links.length > 0) {
+    return (
+      <View>
+        {/* Parent Item */}
+        <TouchableOpacity style={styles.parentItem} onPress={toggleOpen}>
+          <Ionicons
+            name={item.icon}
+            size={20}
+            color={MainColor.white}
+            style={styles.icon}
+          />
+          <Text style={styles.parentText}>{item.label}</Text>
+          <Ionicons
+            name={isOpen ? "chevron-up" : "chevron-down"}
+            size={16}
+            color={MainColor.white}
+          />
+        </TouchableOpacity>
+
+        {/* Submenu (Animated) */}
+        <Animated.View
+          style={[
+            styles.submenu,
+            {
+              height: animatedHeight,
+              opacity: animatedHeight.interpolate({
+                inputRange: [0, item.links.length * 40],
+                outputRange: [0, 1],
+                extrapolate: "clamp",
+              }),
+            },
+          ]}
+        >
+          {item.links.map((subItem, index) => {
+            const isSubActive = activeLink === subItem.link;
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.subItem, isSubActive && styles.subItemActive]}
+                onPress={() => {
+                  setActiveLink(subItem.link);
+                  onClose?.();
+                  router.push(subItem.link as any);
+                }}
+              >
+                <Ionicons
+                  name="caret-forward-sharp"
+                  size={16}
+                  color={isSubActive ? MainColor.yellow : MainColor.white}
+                  style={styles.icon}
+                />
+                <Text
+                  style={[
+                    styles.subText,
+                    isSubActive && { color: MainColor.yellow },
+                  ]}
+                >
+                  {subItem.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  // Menu tanpa submenu
+  return (
+    <TouchableOpacity
+      style={[styles.singleItem, isActive && styles.singleItemActive]}
+      onPress={() => {
+        setActiveLink(item.link || null);
+        onClose?.();
+        router.push(item.link as any);
+      }}
+    >
+      <Ionicons
+        name={item.icon}
+        size={20}
+        color={isActive ? MainColor.yellow : MainColor.white}
+        style={styles.icon}
+      />
+      <Text
+        style={[
+          styles.singleText,
+          { color: isActive ? MainColor.yellow : MainColor.white },
+        ]}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 20,
+  },
+  parentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+    justifyContent: "space-between",
+  },
+  parentText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  singleItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+  },
+  singleItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  singleText: {
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  icon: {
+    width: 24,
+    textAlign: "center",
+    paddingRight: 10,
+  },
+  submenu: {
+    overflow: "hidden",
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  subItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginBottom: 4,
+  },
+  subItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  subText: {
+    color: MainColor.white,
+    fontSize: 14,
+  },
+});

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/Authentication/LoginView.tsx

@@ -38,8 +38,9 @@ export default function LoginView() {
     // router.navigate(`/(application)/(image)/preview-image/${id}`);
     // router.replace("/(application)/(user)/event/(tabs)");
     // router.replace("/(application)/coba");
-    // router.navigate("/investment/(tabs)")
+    // router.navigate("/investment/(tabs)")1
-    router.navigate("/crowdfunding")
+    // router.navigate("/crowdfunding")
+    router.navigate("/admin/dashboard")
   }
 
   return (

screens/Profile/ListPage.tsx

@@ -52,11 +52,17 @@ export const drawerItemsProfile = ({
     label: "Tambah portofolio",
     path: `/(application)/portofolio/${id}/create`,
   },
-  // {
+  {
-  //   icon: "settings",
+    icon: (
-  //   label: "Dashboard Admin",
+      <Ionicons
-  //   path: `/(application)/profile/dashboard-admin`,
+        name="settings"
-  // },
+        size={ICON_SIZE_MEDIUM}
+        color={AccentColor.white}
+      />
+    ),
+    label: "Dashboard Admin",
+    path: `/(application)/admin/dashboard`,
+  },
   {
     icon: (
       <Ionicons

screens/Profile/menuDrawerSection.tsx

@@ -26,9 +26,14 @@ export default function Profile_MenuDrawerSection({
     <>
       {/* Menu Items */}
       <MenuDrawerDynamicGrid
-        data={drawerItems}
+        data={drawerItems.map((item) => ({
+          icon: item.icon,
+          label: item.label,
+          path: item.path as any,
+          color: item.color,
+        }))}
         columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
-        onPressItem={handlePress}
+        onPressItem={(item) => handlePress(item as any)}
       />
     </>
   );