Admin

Add: - screens/Admin/ - admin/notification/ Component Add: - components/_ShareComponent/GridSectionView.tsx ### No Issue
2025-08-06 15:02:47 +08:00
parent caf250c5ca
commit bcc0e02581
8 changed files with 316 additions and 134 deletions
--- 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",
-  },
-];
--- a/app/(application)/admin/notification/index.tsx
+++ 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>
+    </>
+  );
+}
--- 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"
--- 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;
 }
--- 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
--- a/components/_ShareComponent/GridSectionView.tsx
+++ 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>
+  );
+}
--- 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,
--- a/screens/Admin/listPageAdmin.tsx
+++ 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",
+  },
+];