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/app-information/business-field/[id]/index.tsx

@@ -0,0 +1,36 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BusinessFieldDetail() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Update Bidang Bisnis" />
+
+          <TextInputCustom
+            label="Nama Bidang Bisnis"
+            placeholder="Masukan Nama Bidang Bisnis"
+            required
+          />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/business-field/create.tsx

@@ -0,0 +1,36 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BusinessFieldCreate() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Tambah
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Tambah Bidang Bisnis" />
+
+          <TextInputCustom
+            label="Nama Bidang Bisnis"
+            placeholder="Masukan Nama Bidang Bisnis"
+            required
+          />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/index.tsx

@@ -1,42 +1,37 @@
 import {
+  ActionIcon,
   ScrollableCustom,
-  ViewWrapper
+  StackCustom,
+  ViewWrapper,
 } from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 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 { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
 import { useState } from "react";
+import { View } from "react-native";
 
 export default function AdminInformation() {
   const [activeCategory, setActiveCategory] = useState<string | null>("bank");
+  const [activePage, setActivePage] = useState<string>("Informasi Bank");
 
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
+    setActivePage(item.label);
     // tambahkan logika lain seperti filter dsb.
   };
 
   const scrollComponent = (
-    <ScrollableCustom
+    <StackCustom>
-      data={[
+      <ScrollableCustom
-        {
+        data={listPage}
-          id: "1",
+        onButtonPress={handlePress}
-          label: "Informasi Bank",
+        activeId={activeCategory as any}
-          value: "bank",
+      />
-        },
+    </StackCustom>
-        {
-          id: "2",
-          label: "Bidang Bisnis",
-          value: "business",
-        },
-        {
-          id: "3",
-          label: "Stiker",
-          value: "sticker",
-        },
-      ]}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
   );
 
   const renderContent = () => {
@@ -55,8 +50,47 @@ export default function AdminInformation() {
   return (
     <>
       <ViewWrapper headerComponent={scrollComponent}>
+        <AdminComp_BoxTitle
+          title={activePage}
+          rightComponent={
+            <View style={{ flexDirection: "row" }}>
+              <ActionIcon
+                icon={
+                  <Ionicons name="add" size={ICON_SIZE_SMALL} color="black" />
+                }
+                onPress={() => {
+                  if (activeCategory === "bank") {
+                    router.push("/admin/app-information/information-bank/create");
+                  } else if (activeCategory === "business") {
+                    router.push("/admin/app-information/business-field/create");
+                  } else if (activeCategory === "sticker") {
+                    router.push("/admin/app-information/sticker/create");
+                  }
+                }}
+              />
+            </View>
+          }
+        />
         {renderContent()}
       </ViewWrapper>
     </>
   );
 }
+
+const listPage = [
+  {
+    id: "1",
+    label: "Informasi Bank",
+    value: "bank",
+  },
+  {
+    id: "2",
+    label: "Bidang Bisnis",
+    value: "business",
+  },
+  {
+    id: "3",
+    label: "Stiker",
+    value: "sticker",
+  },
+];

app/(application)/admin/app-information/information-bank/[id]/index.tsx

@@ -0,0 +1,50 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BankDetail() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Update Bank" />
+
+          <StackCustom>
+            <TextInputCustom
+              label="Nama Bank"
+              placeholder="Masukan Nama Bank"
+              required
+            />
+
+            <TextInputCustom
+              label="Nama Rekening"
+              placeholder="Masukan Nama Rekening"
+              required
+            />
+
+            <TextInputCustom
+              label="Nomor Rekening"
+              placeholder="Masukan Nomor Rekening"
+              required
+            />
+          </StackCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/information-bank/create.tsx

@@ -0,0 +1,50 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BankCreate() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => router.back()}
+      >
+        Tambah
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Tambah Daftar Bank" />
+
+          <StackCustom>
+            <TextInputCustom
+              label="Nama Bank"
+              placeholder="Masukan Nama Bank"
+              required
+            />
+
+            <TextInputCustom
+              label="Nama Rekening"
+              placeholder="Masukan Nama Rekening"
+              required
+            />
+
+            <TextInputCustom
+              label="Nomor Rekening"
+              placeholder="Masukan Nomor Rekening"
+              required
+            />
+          </StackCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/sticker/[id]/index.tsx

@@ -0,0 +1,80 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CheckboxCustom,
+  CheckboxGroup,
+  LandscapeFrameUploaded,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { dummyMasterEmotions } from "@/lib/dummy-data/_master/emotions";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function AdminAppInformation_StickerCreate() {
+  const [value, setValue] = useState<string | null>(null);
+  const [selectedEmotions, setSelectedEmotions] = useState<string[]>([]);
+
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Edit Stiker" />
+
+          <StackCustom gap={"xs"}>
+            <LandscapeFrameUploaded />
+            <ButtonCenteredOnly icon="upload" onPress={() => {}}>
+              Upload
+            </ButtonCenteredOnly>
+            <Spacing />
+
+            <SelectCustom
+              required
+              label="Jenis Kelamin"
+              data={[
+                { label: "Laki-laki", value: "laki-laki" },
+                { label: "Perempuan", value: "perempuan" },
+              ]}
+              value={value}
+              onChange={(value) => setValue(value as string)}
+            />
+
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom>Pilih Emosi Stiker</TextCustom>
+              <TextCustom color="red">*</TextCustom>
+            </View>
+            <Spacing height={10} />
+
+            <CheckboxGroup
+              value={selectedEmotions}
+              onChange={(value) => setSelectedEmotions(value as string[])}
+            >
+              <StackCustom>
+                {dummyMasterEmotions.map((e) => (
+                  <CheckboxCustom
+                    size={25}
+                    key={e.id}
+                    label={<TextCustom>{e.label}</TextCustom>}
+                    valueKey={e.id}
+                  />
+                ))}
+              </StackCustom>
+            </CheckboxGroup>
+          </StackCustom>
+        </StackCustom>
+        <Spacing />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/app-information/sticker/create.tsx

@@ -0,0 +1,84 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    CheckboxCustom,
+    CheckboxGroup,
+    LandscapeFrameUploaded,
+    SelectCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { dummyMasterEmotions } from "@/lib/dummy-data/_master/emotions";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function AdminAppInformation_StickerCreate() {
+  const [value, setValue] = useState<string | null>(null);
+  const [selectedEmotions, setSelectedEmotions] = useState<string[]>([]);
+
+  const buttonSubmit = (
+      <BoxButtonOnFooter>
+        <ButtonCustom
+          onPress={() => router.back()}
+        >
+          Tambah
+        </ButtonCustom>
+      </BoxButtonOnFooter>
+    );
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Tambah Stiker" />
+
+          <StackCustom gap={"xs"}>
+            <LandscapeFrameUploaded />
+            <ButtonCenteredOnly icon="upload" onPress={() => {}}>
+              Upload
+            </ButtonCenteredOnly>
+            <Spacing />
+
+            <SelectCustom
+              required
+              label="Jenis Kelamin"
+              data={[
+                { label: "Laki-laki", value: "laki-laki" },
+                { label: "Perempuan", value: "perempuan" },
+              ]}
+              value={value}
+              onChange={(value) => setValue(value as string)}
+            />
+
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom>Pilih Emosi Stiker</TextCustom>
+              <TextCustom color="red">*</TextCustom>
+            </View>
+            <Spacing height={10} />
+
+            <CheckboxGroup
+              value={selectedEmotions}
+              onChange={(value) => setSelectedEmotions(value as string[])}
+            >
+              <StackCustom>
+                {dummyMasterEmotions.map((e) => (
+                  <CheckboxCustom
+                    size={25}
+                    key={e.id}
+                    label={<TextCustom>{e.label}</TextCustom>}
+                    valueKey={e.id}
+                  />
+                ))}
+              </StackCustom>
+            </CheckboxGroup>
+          </StackCustom>
+        </StackCustom>
+        <Spacing/>
+      </ViewWrapper>
+    </>
+  );
+}

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/ActionIcon/ActionIcon.tsx

@@ -0,0 +1,59 @@
+import { MainColor } from "@/constants/color-palet";
+import { Href, router } from "expo-router";
+import { DimensionValue, TouchableOpacity } from "react-native";
+
+type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | number | string | undefined;
+
+export default function ActionIcon({
+  href,
+  onPress,
+  icon,
+  size = "md",
+}: {
+  href?: Href;
+  onPress?: () => void;
+  icon: React.ReactNode;
+  size?: SizeType;
+}) {
+  const sizeMap = {
+    xs: 22,
+    sm: 26,
+    md: 30,
+    lg: 34,
+    xl: 38,
+  };
+
+  const getSize = (size: SizeType): DimensionValue => {
+    if (!size) return sizeMap.md; // Default to 'md' if size is undefined
+    if (typeof size === 'string' && size in sizeMap) {
+      return sizeMap[size as keyof typeof sizeMap];
+    }
+    return size as DimensionValue;
+  };
+
+  const iconSize = getSize(size);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      style={{
+        backgroundColor: MainColor.yellow,
+        padding: 5,
+        borderRadius: 50,
+        alignItems: "center",
+        justifyContent: "center",
+        width: iconSize,
+        height: iconSize,
+      }}
+      onPress={() => {
+        if (href) {
+          router.push(href);
+        } else {
+          onPress?.();
+        }
+      }}
+    >
+      {icon}
+    </TouchableOpacity>
+  );
+}

components/Checkbox/CheckboxCustom.tsx

@@ -1,4 +1,4 @@
-import { AccentColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { MaterialIcons } from "@expo/vector-icons"; // Bisa diganti dengan ikon lain
 import React, { useContext } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
@@ -17,7 +17,7 @@ const CheckboxGroupContext =
 // Tipe props
 // Tambahkan prop baru: groupValueKey
 interface CheckboxProps {
-  label?: string;
+  label?: string | React.ReactNode;
   description?: string;
   error?: string;
   value?: boolean; // controlled value (untuk standalone)
@@ -39,7 +39,7 @@ const CheckboxCustom: React.FC<CheckboxProps> = ({
   onChange,
   disabled: propDisabled,
   size = 20,
-  color = AccentColor.softblue,
+  color = MainColor.yellow,
   style,
   component,
   valueKey,

components/_ShareComponent/Admin/BackButton.tsx

@@ -0,0 +1,13 @@
+import ActionIcon from "@/components/ActionIcon/ActionIcon";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function AdminBackButton() {
+  return (
+    <ActionIcon
+      icon={<Ionicons name="arrow-back" size={16} color={MainColor.darkblue} />}
+      onPress={() => router.back()}
+    />
+  );
+}

components/_ShareComponent/Admin/BackButtonAntTitle.tsx

@@ -0,0 +1,31 @@
+import Grid from "@/components/Grid/GridCustom";
+import TextCustom from "@/components/Text/TextCustom";
+import { View } from "react-native";
+import AdminBackButton from "./BackButton";
+
+export default function AdminBackButtonAntTitle({
+  title,
+}: {
+  title: string;
+}) {
+  return (
+    <>
+      <Grid>
+        <Grid.Col span={2}>
+          <AdminBackButton />
+          </Grid.Col>
+          <Grid.Col
+            span={8}
+            style={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <TextCustom bold size={"large"} align="center">
+              {title}
+            </TextCustom>
+          </Grid.Col>
+          <Grid.Col span={2}>
+            <View />
+          </Grid.Col>
+        </Grid>
+      </>
+    );
+}

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

components/index.ts

@@ -1,6 +1,8 @@
 // Alert
 import AlertCustom from "./Alert/AlertCustom";
 import AlertDefaultSystem from "./Alert/AlertDefaultSystem";
+// ActionIcon
+import ActionIcon from "./ActionIcon/ActionIcon";
 // Button
 import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
@@ -60,6 +62,9 @@ import GridComponentView from "./_ShareComponent/GridSectionView";
 import ProgressCustom from "./Progress/ProgressCustom";
 
 export {
+  // ActionIcon
+  ActionIcon,
+  // Alert
   AlertCustom,
   AlertDefaultSystem,
   // Image

constants/constans-value.ts

@@ -8,11 +8,13 @@ export {
   TEXT_SIZE_MEDIUM,
   TEXT_SIZE_LARGE,
   TEXT_SIZE_XLARGE,
-  ICON_SIZE_SMALL,
+  ICON_SIZE_XLARGE as ICON_SIZE_XLARGE,
-  ICON_SIZE_MEDIUM,
+  ICON_SIZE_LARGE as ICON_SIZE_MEDIUM,
+  ICON_SIZE_MEDIUM as ICON_SIZE_SMALL,
+  ICON_SIZE_XSMALL as ICON_SIZE_XSMALL,
+  ICON_SIZE_SMALLL as ICON_SIZE_BUTTON,
   DRAWER_HEIGHT,
   RADIUS_BUTTON,
-  ICON_SIZE_BUTTON,
   PADDING_EXTRA_SMALL,
   PADDING_SMALL,
   PADDING_MEDIUM,
@@ -31,9 +33,11 @@ const TEXT_SIZE_LARGE = 16;
 const TEXT_SIZE_XLARGE = 18;
 
 // Icon Size
-const ICON_SIZE_BUTTON = 18
+const ICON_SIZE_XSMALL = 10
-const ICON_SIZE_SMALL = 20;
+const ICON_SIZE_SMALLL = 14
-const ICON_SIZE_MEDIUM = 24;
+const ICON_SIZE_MEDIUM = 18;
+const ICON_SIZE_LARGE = 22;
+const ICON_SIZE_XLARGE = 26;
 
 // Drawer Height
 const DRAWER_HEIGHT = 500; // tinggi drawer5

lib/dummy-data/_master/emotions.ts

@@ -0,0 +1,123 @@
+export const dummyMasterEmotions = [
+  {
+    id: 1,
+    label: "Senang",
+    value: "senang",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.726Z",
+    updatedAt: "2025-06-16T09:57:16.726Z",
+  },
+  {
+    id: 2,
+    label: "Sedih",
+    value: "sedih",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.730Z",
+    updatedAt: "2025-06-16T09:57:16.730Z",
+  },
+  {
+    id: 15,
+    label: "Takut",
+    value: "takut",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.730Z",
+    updatedAt: "2025-06-16T09:57:16.730Z",
+  },
+  {
+    id: 6,
+    label: "Marah",
+    value: "marah",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.730Z",
+    updatedAt: "2025-06-16T09:57:16.730Z",
+  },
+  {
+    id: 8,
+    label: "Terkejut",
+    value: "terkejut",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.730Z",
+    updatedAt: "2025-06-16T09:57:16.730Z",
+  },
+  {
+    id: 14,
+    label: "Malas",
+    value: "malas",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.730Z",
+    updatedAt: "2025-06-16T09:57:16.730Z",
+  },
+  {
+    id: 7,
+    label: "Penasaran",
+    value: "penasaran",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.731Z",
+    updatedAt: "2025-06-16T09:57:16.731Z",
+  },
+  {
+    id: 3,
+    label: "Cinta",
+    value: "cinta",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.731Z",
+    updatedAt: "2025-06-16T09:57:16.731Z",
+  },
+  {
+    id: 4,
+    label: "Bangga",
+    value: "bangga",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.731Z",
+    updatedAt: "2025-06-16T09:57:16.731Z",
+  },
+  {
+    id: 5,
+    label: "Malu",
+    value: "malu",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.731Z",
+    updatedAt: "2025-06-16T09:57:16.731Z",
+  },
+  {
+    id: 11,
+    label: "Kesal",
+    value: "kesal",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.732Z",
+    updatedAt: "2025-06-16T09:57:16.732Z",
+  },
+  {
+    id: 9,
+    label: "Bingung",
+    value: "bingung",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.732Z",
+    updatedAt: "2025-06-16T09:57:16.732Z",
+  },
+  {
+    id: 10,
+    label: "Kaget",
+    value: "kaget",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.732Z",
+    updatedAt: "2025-06-16T09:57:16.732Z",
+  },
+  {
+    id: 12,
+    label: "Iri",
+    value: "iri",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.732Z",
+    updatedAt: "2025-06-16T09:57:16.732Z",
+  },
+  {
+    id: 13,
+    label: "Lega",
+    value: "lega",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.733Z",
+    updatedAt: "2025-06-16T09:57:16.733Z",
+  },
+];
+    

screens/Admin/App-Information/BusinessFieldSection.tsx

@@ -1,9 +1,83 @@
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import {
+  ActionIcon,
+  Grid,
+  StackCustom,
+  TextCustom
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import dummyMasterBidangBisnis from "@/lib/dummy-data/master-bidang-bisnis";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import { Divider, Switch } from "react-native-paper";
 
 export default function AdminAppInformation_BusinessFieldSection() {
+  const [value, setValue] = useState(false);
+  const [selectedBusinessField, setSelectedBusinessField] = useState<any>(null);
   return (
     <>
-      <AdminComp_BoxTitle title="Bidang Bisnis" />
+      <>
+        <Grid>
+          <Grid.Col span={3} style={{ alignItems: "center" }}>
+            <TextCustom bold>Aksi</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={3} style={{ alignItems: "center" }}>
+            <TextCustom bold>Status</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <TextCustom bold>Nama Bidang Bisnis</TextCustom>
+          </Grid.Col>
+        </Grid>
+
+        <Divider />
+
+
+        <StackCustom>
+          {dummyMasterBidangBisnis.map((e, i) => (
+            <View key={i}>
+              <Grid>
+                <Grid.Col span={3} style={{ alignItems: "center" }}>
+                  <ActionIcon
+                    icon={
+                      <FontAwesome5
+                        name="edit"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/app-information/business-field/${i}`);
+                    }}
+                  />
+                </Grid.Col>
+                <Grid.Col
+                  span={3}
+                  style={{ alignItems: "center", justifyContent: "center" }}
+                >
+                  <Switch
+                    value={i === selectedBusinessField}
+                    onValueChange={() => {
+                      setValue(!value);
+                      setSelectedBusinessField(i);
+                    }}
+                    theme={{
+                      colors: {
+                        primary: MainColor.yellow,
+                      },
+                    }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                  <TextCustom>{e.name}</TextCustom>
+                </Grid.Col>
+              </Grid>
+              <Divider />
+            </View>
+          ))}
+        </StackCustom>
+      </>
     </>
   );
 }

screens/Admin/App-Information/InformationBankSection.tsx

@@ -1,95 +1,77 @@
-import {
+import { ActionIcon, Grid, StackCustom, TextCustom } from "@/components";
-  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 { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
-import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { router } from "expo-router";
 import { useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { View } from "react-native";
-import { Switch } from "react-native-paper";
+import { Divider, 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" }}>
+          <Grid.Col span={3} style={{ alignItems: "center" }}>
             <TextCustom bold>Aksi</TextCustom>
           </Grid.Col>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
+          <Grid.Col span={3} style={{ alignItems: "center" }}>
             <TextCustom bold>Status</TextCustom>
           </Grid.Col>
-          <Grid.Col span={4}>
+          <Grid.Col span={6}>
             <TextCustom bold>Nama Bank</TextCustom>
           </Grid.Col>
         </Grid>
 
         <Divider />
 
-        {dummyMasterBank.map((e, i) => (
+        <StackCustom>
-          <View key={i}>
+          {dummyMasterBank.map((e, i) => (
-            <Grid>
+            <View key={i}>
-              <Grid.Col span={4}>
+              <Grid>
-                <ButtonCustom
+                <Grid.Col span={3} style={{ alignItems: "center" }}>
-                  iconLeft={
+                  <ActionIcon
-                    <FontAwesome5
+                    icon={
-                      name="edit"
+                      <FontAwesome5
-                      size={ICON_SIZE_SMALL}
+                        name="edit"
-                      color="black"
+                        size={ICON_SIZE_BUTTON}
-                    />
+                        color="black"
-                  }
+                      />
-                  onPress={() => {}}
+                    }
+                    onPress={() => {
+                      router.push(
+                        `/admin/app-information/information-bank/${i}`
+                      );
+                    }}
+                  />
+                </Grid.Col>
+                <Grid.Col
+                  span={3}
+                  style={{ alignItems: "center", justifyContent: "center" }}
                 >
-                  Edit
+                  <Switch
-                </ButtonCustom>
+                    value={value}
-              </Grid.Col>
+                    onValueChange={() => {
-              <Grid.Col
+                      setValue(!value);
-                span={4}
+                    }}
-                style={{ alignItems: "center", justifyContent: "center" }}
+                    theme={{
-              >
+                      colors: {
-                <Switch
+                        primary: MainColor.yellow,
-                  value={value}
+                      },
-                  onValueChange={() => {
+                    }}
-                    setValue(!value);
+                  />
-                  }}
+                </Grid.Col>
-                  theme={{
+                <Grid.Col span={6} style={{ justifyContent: "center" }}>
-                    colors: {
+                  <TextCustom>{e.code}</TextCustom>
-                      primary: MainColor.yellow,
+                </Grid.Col>
-                    },
+              </Grid>
-                  }}
+              <Divider />
-                />
+            </View>
-              </Grid.Col>
+          ))}
-              <Grid.Col span={4} style={{ justifyContent: "center" }}>
+        </StackCustom>
-                <TextCustom>{e.code}</TextCustom>
+      </>
-              </Grid.Col>
-            </Grid>
-            <Divider />
-          </View>
-        ))}
-      </BaseBox>
     </>
   );
 }

screens/Admin/App-Information/StickerSection.tsx

@@ -1,9 +1,109 @@
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { ActionIcon, Grid, StackCustom, TextCustom } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import { Divider, Switch } from "react-native-paper";
 
 export default function AdminAppInformation_StickerSection() {
+  const [value, setValue] = useState(false);
   return (
     <>
-      <AdminComp_BoxTitle title="Sticker" />
+      <Grid>
+        <Grid.Col span={3} style={{ alignItems: "center" }}>
+          <TextCustom bold>Aksi</TextCustom>
+        </Grid.Col>
+        <Grid.Col span={3} style={{ alignItems: "center" }}>
+          <TextCustom bold>Status</TextCustom>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextCustom bold align="center" >Stiker</TextCustom>
+        </Grid.Col>
+      </Grid>
+
+      <Divider />
+
+      <StackCustom>
+        {listSticker.map((e, i) => (
+          <View key={i}>
+            <Grid>
+              <Grid.Col
+                span={3}
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                <ActionIcon
+                  icon={
+                    <FontAwesome5
+                      name="edit"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/app-information/sticker/${i}`);
+                  }}
+                />
+              </Grid.Col>
+              <Grid.Col
+                span={3}
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                <Switch
+                  value={value}
+                  onValueChange={() => {
+                    setValue(!value);
+                  }}
+                  theme={{
+                    colors: {
+                      primary: MainColor.yellow,
+                    },
+                  }}
+                />
+              </Grid.Col>
+              <Grid.Col span={6} style={{ justifyContent: "center", alignItems: "center" }}>
+                <Image source={e.path} style={{ width: 100, height: 100 }} />
+              </Grid.Col>
+            </Grid>
+            <Divider />
+          </View>
+        ))}
+      </StackCustom>
     </>
   );
 }
+
+const listSticker = [
+  {
+    id: "1",
+    label: "Stiker 1",
+    value: "sticker 1",
+    path: "https://wibu-storage.wibudev.com/api/files/cmb0dkn5700bjbpnnwcfpzxpz",
+  },
+  {
+    id: "2",
+    label: "Stiker 2",
+    value: "sticker 2",
+    path: "https://wibu-storage.wibudev.com/api/files/cmb0djnya00bhbpnn8b2sfpg3",
+  },
+  {
+    id: "3",
+    label: "Stiker 3",
+    value: "sticker 3",
+    path: "https://wibu-storage.wibudev.com/api/files/cmb0dj0o400bfbpnn6hrfa71y",
+  },
+  {
+    id: "4",
+    label: "Stiker 4",
+    value: "sticker 4",
+    path: "https://wibu-storage.wibudev.com/api/files/cmb0d5rdb00abbpnnrbhxrxjz",
+  },
+  {
+    id: "5",
+    label: "Stiker 5",
+    value: "sticker 5",
+    path: "https://wibu-storage.wibudev.com/api/files/cmb0d4j5q00a9bpnn0qpxa0k4",
+  },
+];

screens/Authentication/LoginView.tsx

@@ -32,7 +32,7 @@ export default function LoginView() {
 
     // router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
-    // router.navigate("/(application)/(user)/home");
+    router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
     // router.navigate(`/(application)/(image)/preview-image/${id}`);
@@ -40,7 +40,7 @@ export default function LoginView() {
     // router.replace("/(application)/coba");
     // router.navigate("/investment/(tabs)")1
     // router.navigate("/crowdfunding")
-    router.navigate("/admin/dashboard")
+    // router.navigate("/admin/dashboard")
   }
 
   return (
@@ -78,9 +78,15 @@ export default function LoginView() {
           placeholder="Masukkan nomor"
         />
 
-        <Spacing height={20} />
+        <Spacing />
 
         <ButtonCustom onPress={handleLogin}>Login</ButtonCustom>
+
+        <Spacing />
+
+        <ButtonCustom onPress={() => router.navigate("/admin/user-access")}>
+          Admin ( Delete Soon )
+        </ButtonCustom>
       </View>
     </ViewWrapper>
   );

styles/global-styles.ts

@@ -36,11 +36,11 @@ export const GStyles = StyleSheet.create({
     right: 0,
     zIndex: 10,
     backgroundColor: "transparent",
-    paddingBlock: PADDING_SMALL,
+    // paddingBlock: PADDING_EXTRA_SMALL,
     paddingInline: PADDING_MEDIUM,
     // padding: 16,
-    // paddingTop: 8,
+    paddingTop: 8,
-    // paddingBottom: 8,
+    paddingBottom: 8,
   },
   floatingContainer: {
     position: "absolute",

tsconfig.json

@@ -13,5 +13,5 @@
     "**/*.tsx",
     ".expo/types/**/*.ts",
     "expo-env.d.ts"
-    ]
+, "app/(application)/admin/app-information/business-field/[id]"    ]
 }