Admin User Access

Add:
- admin/user-access.tsx

### No Issue

app/(application)/admin/_layout.tsx

@@ -9,7 +9,7 @@ import {
 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 { ICON_SIZE_MEDIUM, ICON_SIZE_SMALL, ICON_SIZE_XLARGE } from "@/constants/constans-value";
 import { adminListMenu } from "@/screens/Admin/listPageAdmin";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
@@ -33,7 +33,7 @@ export default function AdminLayout() {
           headerLeft: () => (
             <Ionicons
               name="menu"
-              size={ICON_SIZE_SMALL}
+              size={ICON_SIZE_XLARGE}
               color={MainColor.white}
               onPress={() => setOpenDrawerNavbar(true)}
             />
@@ -41,7 +41,7 @@ export default function AdminLayout() {
           headerRight: () => (
             <FontAwesome6
               name="circle-user"
-              size={ICON_SIZE_SMALL}
+              size={ICON_SIZE_MEDIUM}
               color={MainColor.white}
               onPress={() => setOpenDrawerUser(true)}
             />

app/(application)/admin/user-access.tsx

@@ -0,0 +1,117 @@
+import {
+    ButtonCustom,
+    Divider,
+    Grid,
+    SearchInput,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function AdminUserAccess() {
+  const rightComponent = () => {
+    return (
+      <>
+        <SearchInput
+          containerStyle={{ width: "100%", marginBottom: 0 }}
+          placeholder="Cari User"
+        />
+      </>
+    );
+  };
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title="User Access"
+            rightComponent={rightComponent()}
+          />
+        }
+      >
+        <Grid>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Aksi</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Username</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Nomor</TextCustom>
+          </Grid.Col>
+        </Grid>
+
+        <Divider />
+
+        <StackCustom>
+          {Array.from({ length: 10 }).map((_, index) => (
+            <Grid key={index}>
+              <Grid.Col
+                span={4}
+                style={{
+                  alignItems: "center",
+                  paddingLeft: 5,
+                  paddingRight: 5,
+                }}
+              >
+                <TextCustom bold>
+                  <ButtonCustom
+                    iconLeft={
+                      <Ionicons
+                        name={
+                          index % 2 === 0
+                            ? "checkmark-outline"
+                            : "close-circle-outline"
+                        }
+                        size={ICON_SIZE_MEDIUM}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {}}
+                    backgroundColor={
+                      index % 2 === 0 ? MainColor.green : MainColor.red
+                    }
+                  >
+                    <TextCustom size={"small"} color={"black"}>
+                      {index % 2 === 0 ? "Berikan Akses" : "Hapus Akses"}
+                    </TextCustom>
+                  </ButtonCustom>
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={4}
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingLeft: 5,
+                  paddingRight: 5,
+                }}
+              >
+                <TextCustom bold truncate>
+                  Useraname
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={4}
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center",
+                  paddingLeft: 5,
+                  paddingRight: 5,
+                }}
+              >
+                <TextCustom bold truncate>
+                  08123456789
+                </TextCustom>
+              </Grid.Col>
+            </Grid>
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

components/_ShareComponent/Admin/BoxTitlePage.tsx

@@ -1,15 +1,51 @@
 import BaseBox from "@/components/Box/BaseBox";
+import Grid from "@/components/Grid/GridCustom";
 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}) {
+export default function AdminComp_BoxTitle({
+  title,
+  rightComponent,
+}: {
+  title: string;
+  rightComponent?: React.ReactNode;
+}) {
   return (
     <>
-      <BaseBox style={{ flexDirection: "row", justifyContent: "space-between" }}>
+      <BaseBox
-        <TextCustom style={{ alignSelf: "center" }} bold size={TEXT_SIZE_LARGE}>
+        style={{ flexDirection: "row", justifyContent: "space-between" }}
+        paddingTop={5}
+        paddingBottom={5}
+      >
+        {/* <TextCustom
+          // style={{ alignSelf: "center" }}
+          bold
+          size={TEXT_SIZE_LARGE}
+        >
           {title}
         </TextCustom>
-        {rightComponent}
+        {rightComponent} */}
+
+        <Grid>
+          <Grid.Col span={6} style={{ justifyContent: "center" }}>
+            <TextCustom
+              // style={{ alignSelf: "center" }}
+              bold
+              size={TEXT_SIZE_LARGE}
+            >
+              {title}
+            </TextCustom>
+          </Grid.Col>
+          <Grid.Col
+            span={6}
+            style={{
+              justifyContent: "center",
+              alignItems: "flex-end",
+            }}
+          >
+            {rightComponent}
+          </Grid.Col>
+        </Grid>
       </BaseBox>
     </>
   );

screens/Authentication/LoginView.tsx

@@ -84,7 +84,7 @@ export default function LoginView() {
 
         <Spacing />
 
-        <ButtonCustom onPress={() => router.navigate("/admin/dashboard")}>
+        <ButtonCustom onPress={() => router.navigate("/admin/user-access")}>
           Admin ( Delete Soon )
         </ButtonCustom>
       </View>