Admin App Information

Add:
- app-information/information-bank/

Component
Fix:
- constans-value: Icon size re name

### No Issue

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,41 @@ 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={() => {
+                  router.push("/admin/app-information/information-bank/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,52 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function AdminAppInformation_BankCreate() {
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        iconLeft={<Ionicons name="add" size={16} color="black" />}
+        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>
+    </>
+  );
+}

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/_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/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

screens/Admin/App-Information/InformationBankSection.tsx

@@ -1,48 +1,29 @@
-import {
+import { ActionIcon, BaseBox, Divider, Grid, 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";
 
 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>
@@ -52,22 +33,22 @@ export default function AdminAppInformation_Bank() {
         {dummyMasterBank.map((e, i) => (
           <View key={i}>
             <Grid>
-              <Grid.Col span={4}>
+              <Grid.Col span={3} style={{ alignItems: "center" }}>
-                <ButtonCustom
+                <ActionIcon
-                  iconLeft={
+                  icon={
                     <FontAwesome5
                       name="edit"
-                      size={ICON_SIZE_SMALL}
+                      size={ICON_SIZE_BUTTON}
                       color="black"
                     />
                   }
-                  onPress={() => {}}
+                  onPress={() => {
-                >
+                    router.push(`/admin/app-information/information-bank/${i}`);
-                  Edit
+                  }}
-                </ButtonCustom>
+                />
               </Grid.Col>
               <Grid.Col
-                span={4}
+                span={3}
                 style={{ alignItems: "center", justifyContent: "center" }}
               >
                 <Switch
@@ -82,7 +63,7 @@ export default function AdminAppInformation_Bank() {
                   }}
                 />
               </Grid.Col>
-              <Grid.Col span={4} style={{ justifyContent: "center" }}>
+              <Grid.Col span={6} style={{ justifyContent: "center" }}>
                 <TextCustom>{e.code}</TextCustom>
               </Grid.Col>
             </Grid>

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