Fix Admin

Admin – App Information
- app/(application)/admin/app-information/index.tsx
- app/(application)/admin/app-information/business-field/[id]/index.tsx

Admin Screens
- screens/Admin/App-Information/BusinessFieldSection.tsx
- screens/Admin/App-Information/InformationBankSection.tsx
- screens/Admin/User-Access/ScreenUserAccess.tsx

New Admin Screens
- screens/Admin/App-Information/ScreenAppInformation.tsx
- screens/Admin/App-Information/ScreenBusinessFieldDetail.tsx

Shared Components
- components/_ShareComponent/Admin/BoxTitlePage.tsx

API Service
- service/api-admin/api-master-admin.ts

Styles
- styles/global-styles.ts

Docs
- docs/prompt-for-qwen-code.md

### No Issue

screens/Admin/App-Information/BusinessFieldSection.tsx

@@ -1,114 +1,56 @@
 import {
-  ActionIcon,
   BadgeCustom,
   CenterCustom,
   Grid,
-  LoaderCustom,
   StackCustom,
-  TextCustom,
+  TextCustom
 } from "@/components";
-import { AccentColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminMasterBusinessField } from "@/service/api-admin/api-master-admin";
-import { FontAwesome5 } from "@expo/vector-icons";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
+import { router } from "expo-router";
 
-export default function AdminAppInformation_BusinessFieldSection() {
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadData, setLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadList();
-    }, [])
-  );
-
-  const onLoadList = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminMasterBusinessField();
-
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR LIST BUSINESS FIELD]", error);
-      setListData([]);
-    } finally {
-      setLoadData(false);
-    }
+interface Bidang {
+  item: {
+    id: string;
+    name: string;
+    slug: string;
+    active: boolean;
+    createdAt: string;
+    updatedAt: string;
   };
+}
 
+export default function AdminAppInformation_BusinessFieldSection({
+  item,
+}: {
+  item: any;
+}) {
   return (
     <>
-      <StackCustom>
+      <AdminBasicBox
+        onPress={() =>
+          router.push(`/admin/app-information/business-field/${item.item.id}`)
+        }
+        style={{ marginHorizontal: 10, marginVertical: 5 }}
+      >
         <Grid>
-          <Grid.Col span={2} style={{ alignItems: "center" }}>
-            <TextCustom bold>Aksi</TextCustom>
+          <Grid.Col span={8} style={{ alignSelf: "center" }}>
+            <StackCustom gap={"xs"}>
+              <TextCustom bold truncate>
+                {item?.item?.name || "-"}
+              </TextCustom>
+            </StackCustom>
           </Grid.Col>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
-            <TextCustom bold>Status</TextCustom>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <TextCustom bold>Nama Bidang Bisnis</TextCustom>
+          <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+            <CenterCustom>
+              {item?.item?.active ? (
+                <BadgeCustom color="green">Aktif</BadgeCustom>
+              ) : (
+                <BadgeCustom color="red">Tidak Aktif</BadgeCustom>
+              )}
+            </CenterCustom>
           </Grid.Col>
         </Grid>
-
-        <Divider />
-
-        {loadData ? (
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom align="center">Tidak ada data</TextCustom>
-        ) : (
-          <StackCustom>
-            {listData?.map((item: any, index: number) => (
-              <View key={index}>
-                <Grid>
-                  <Grid.Col span={2} style={{ alignItems: "center" }}>
-                    <ActionIcon
-                      icon={
-                        <FontAwesome5
-                          name="edit"
-                          size={ICON_SIZE_BUTTON}
-                          color="black"
-                        />
-                      }
-                      onPress={() => {
-                        router.push(
-                          `/admin/app-information/business-field/${item.id}`
-                        );
-                      }}
-                    />
-                  </Grid.Col>
-                  <Grid.Col
-                    span={4}
-                    style={{ alignItems: "center", justifyContent: "center" }}
-                  >
-                    <CenterCustom>
-                      <BadgeCustom
-                        color={
-                          item.active ? AccentColor.blue : AccentColor.blackgray
-                        }
-                      >
-                        {item.active ? "Aktif" : "Tidak Aktif"}
-                      </BadgeCustom>
-                    </CenterCustom>
-                  </Grid.Col>
-                  <Grid.Col span={6} style={{ justifyContent: "center" }}>
-                    <TextCustom>{item.name}</TextCustom>
-                  </Grid.Col>
-                </Grid>
-              </View>
-            ))}
-          </StackCustom>
-        )}
-      </StackCustom>
+      </AdminBasicBox>
     </>
   );
 }

screens/Admin/App-Information/InformationBankSection.tsx

@@ -1,119 +1,59 @@
 import {
-  ActionIcon,
   BadgeCustom,
   CenterCustom,
   Grid,
-  LoaderCustom,
   StackCustom,
-  TextCustom,
+  TextCustom
 } from "@/components";
-import { AccentColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminMasterBank } from "@/service/api-admin/api-master-admin";
-import { FontAwesome5 } from "@expo/vector-icons";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
+import { router } from "expo-router";
 
-export default function AdminAppInformation_Bank() {
-  const [listData, setListData] = useState<any | null>(null);
-  const [loadData, setLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      loadMasterBank();
-    }, [])
-  );
-
-  const loadMasterBank = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminMasterBank();
-
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR LIST BANK]", error);
-      setListData([]);
-    } finally {
-      setLoadData(false);
-    }
+interface BankProps {
+  item: {
+    id: string;
+    namaBank: string;
+    namaAkun: string;
+    norek: string;
+    isActive: boolean;
+    createdAt: string;
+    updatedAt: string;
   };
-
+}
+export default function AdminAppInformation_Bank({
+  item,
+}: {
+  item: BankProps;
+}) {
   return (
     <>
-      <StackCustom>
+      <AdminBasicBox
+        onPress={() =>
+          router.push(`/admin/app-information/information-bank/${item.item.id}`)
+        }
+        style={{ marginHorizontal: 10, marginVertical: 5 }}
+      >
         <Grid>
-          <Grid.Col span={3}>
-            <TextCustom bold align="center">
-              Aksi
-            </TextCustom>
+          <Grid.Col span={8}>
+            <StackCustom gap={"xs"}>
+              <TextCustom bold truncate>
+                {item?.item?.namaBank || "-"}
+              </TextCustom>
+              <TextCustom size={"small"} bold truncate color="gray">
+                {item?.item?.norek || "-"}
+              </TextCustom>
+            </StackCustom>
           </Grid.Col>
-          <Grid.Col span={3}>
-            <TextCustom bold align="center">
-              Status
-            </TextCustom>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <TextCustom bold align="center">
-              Nama Bank
-            </TextCustom>
+          <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+            <CenterCustom>
+              {item?.item?.isActive ? (
+                <BadgeCustom color="green">Aktif</BadgeCustom>
+              ) : (
+                <BadgeCustom color="red">Tidak Aktif</BadgeCustom>
+              )}
+            </CenterCustom>
           </Grid.Col>
         </Grid>
-
-        <Divider />
-
-        {loadData ? (
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom align="center">Tidak ada data</TextCustom>
-        ) : (
-          <StackCustom>
-            {listData?.map((item: any, index: number) => (
-              <View key={index}>
-                <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/information-bank/${item.id}`
-                        );
-                      }}
-                    />
-                  </Grid.Col>
-                  <Grid.Col
-                    span={3}
-                    style={{ alignItems: "center", justifyContent: "center" }}
-                  >
-                    <CenterCustom>
-                      <BadgeCustom
-                        color={
-                          item.isActive
-                            ? AccentColor.blue
-                            : AccentColor.blackgray
-                        }
-                      >
-                        {item.isActive ? "Aktif" : "Tidak Aktif"}
-                      </BadgeCustom>
-                    </CenterCustom>
-                  </Grid.Col>
-                  <Grid.Col span={6} style={{ justifyContent: "center" }}>
-                    <TextCustom align="center">{item.namaBank}</TextCustom>
-                  </Grid.Col>
-                </Grid>
-              </View>
-            ))}
-          </StackCustom>
-        )}
-      </StackCustom>
+      </AdminBasicBox>
     </>
   );
 }

screens/Admin/App-Information/ScreenAppInformation.tsx

@@ -0,0 +1,153 @@
+import { ScrollableCustom, StackCustom } from "@/components";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { usePagination } from "@/hooks/use-pagination";
+import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
+import AdminAppInformation_Bank_Component from "@/screens/Admin/App-Information/InformationBankSection";
+import { apiFetchAdminMasterAppInformation } from "@/service/api-admin/api-master-admin";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { Alert, RefreshControl } from "react-native";
+
+export function Admin_ScreenAppInformation() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("bank");
+  const [activePage, setActivePage] = useState<string>("Informasi Bank");
+
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiFetchAdminMasterAppInformation({
+        category: activeCategory as string,
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [activeCategory],
+    onError: (error) => console.error("[ERROR] Fetch job by status:", error),
+  });
+
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: `Tidak ada data ${activeCategory}`,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    setActivePage(item.label);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, [activeCategory]),
+  );
+
+  const scrollComponent = (
+    <StackCustom>
+      <ScrollableCustom
+        data={listPage.map((e, i) => ({
+          id: i,
+          label: e.label,
+          value: e.value,
+        }))}
+        onButtonPress={handlePress}
+        activeId={activeCategory as any}
+      />
+      <AdminComp_BoxTitle
+        title={activePage}
+        rightComponent={
+          <AdminActionIconPlus
+            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") {
+                Alert.alert("Coming Soon", "Next Update");
+                // router.push("/admin/app-information/sticker/create");
+              }
+            }}
+          />
+        }
+      />
+    </StackCustom>
+  );
+
+  // const renderContent = () => {
+  //   switch (activeCategory) {
+  //     case "bank":
+  //       return <AdminAppInformation_Bank_Component />;
+  //     case "business":
+  //       return <AdminAppInformation_BusinessFieldSection />;
+  //     // case "sticker":
+  //     //   return <AdminAppInformation_StickerSection />;
+  //     default:
+  //       return <AdminAppInformation_Bank_Component />;
+  //   }
+  // };
+
+  const renderItem = (item: any) => {
+    if (activeCategory === "bank") {
+      return <AdminAppInformation_Bank_Component key={item.id} item={item} />;
+    } else if (activeCategory === "business") {
+      return (
+        <AdminAppInformation_BusinessFieldSection key={item.id} item={item} />
+      );
+    } else {
+      return <AdminAppInformation_Bank_Component key={item.id} item={item} />;
+    }
+  };
+
+  return (
+    <NewWrapper
+      headerComponent={scrollComponent}
+      // ListHeaderComponent={
+
+      // }
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      hideFooter
+      // Data dan render
+      listData={pagination.listData}
+      renderItem={(item: any) => renderItem(item)}
+    />
+    //   {renderContent()}
+    // </NewWrapper>
+  );
+}
+
+const listPage = [
+  {
+    id: "1",
+    label: "Informasi Bank",
+    value: "bank",
+  },
+  {
+    id: "2",
+    label: "Bidang & Sub Bidang",
+    value: "business",
+  },
+  // {
+  //   id: "3",
+  //   label: "Stiker",
+  //   value: "sticker",
+  // },
+];

screens/Admin/App-Information/ScreenBusinessFieldDetail.tsx

@@ -0,0 +1,185 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  BaseBox,
+  CenterCustom,
+  NewWrapper,
+  Spacing,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
+import { MainColor } from "@/constants/color-palet";
+import {
+  ICON_SIZE_SMALL,
+  PAGINATION_DEFAULT_TAKE,
+} from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiAdminMasterBusinessFieldById } from "@/service/api-admin/api-master-admin";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+export function Admin_ScreenBusinessFieldDetail() {
+  const { id } = useLocalSearchParams();
+  const [bidang, setBidang] = useState<any | null>(null);
+
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiAdminMasterBusinessFieldById({
+        category: "only-sub-bidang",
+        id: id as any,
+        page: String(page),
+      });
+      // Pastikan mengembalikan struktur data yang sesuai dengan yang diharapkan oleh usePagination
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [id],
+    onError: (error) => {
+      console.log("Error fetching data sub bidang", error);
+    },
+  });
+
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      searchQuery: "",
+      emptyMessage: "Tidak ada data pengguna",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+      isInitialLoad: pagination.isInitialLoad,
+    });
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadBidang();
+      pagination.onRefresh();
+    }, [id]),
+  );
+
+  const onLoadBidang = async () => {
+    try {
+      const response = await apiAdminMasterBusinessFieldById({
+        id: id as string,
+        category: "all",
+      });
+      setBidang(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setBidang(null);
+    }
+  };
+  const renderHeader = () => (
+    <View>
+      <BaseBox
+        onPress={() =>
+          router.push(
+            `/admin/app-information/business-field/${id}/bidang-update`,
+          )
+        }
+      >
+        <StackCustom gap={"xs"}>
+          <GridSpan_NewComponent
+            span1={10}
+            span2={2}
+            text1={
+              <StackCustom>
+                <TextCustom bold size={"large"}>
+                  {bidang?.bidang?.name}
+                </TextCustom>
+                {bidang?.bidang.active ? (
+                  <BadgeCustom color="green">Aktif</BadgeCustom>
+                ) : (
+                  <BadgeCustom color="red">Tidak Aktif</BadgeCustom>
+                )}
+              </StackCustom>
+            }
+            text2={
+              <CenterCustom>
+                <Ionicons
+                  name="caret-forward"
+                  size={ICON_SIZE_SMALL}
+                  color="white"
+                />
+              </CenterCustom>
+            }
+          />
+        </StackCustom>
+      </BaseBox>
+
+      <CenterCustom>
+        <TextCustom bold>Sub Bidang</TextCustom>
+      </CenterCustom>
+      <Spacing height={5} />
+    </View>
+  );
+
+  const renderItem = ({ item }: { item: any }) => (
+    <BaseBox
+      onPress={() =>
+        router.push(
+          `/admin/app-information/business-field/${item?.id}/sub-bidang-update`,
+        )
+      }
+    >
+      <StackCustom gap={"xs"}>
+        <GridSpan_NewComponent
+          span1={10}
+          span2={2}
+          text1={
+            <StackCustom>
+              <TextCustom bold size={"large"}>
+                {item.name}
+              </TextCustom>
+              {item?.isActive ? (
+                <BadgeCustom color="green">Aktif</BadgeCustom>
+              ) : (
+                <BadgeCustom color="red">Tidak Aktif</BadgeCustom>
+              )}
+            </StackCustom>
+          }
+          text2={
+            <CenterCustom>
+              <Ionicons
+                name="caret-forward"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            </CenterCustom>
+          }
+        />
+      </StackCustom>
+    </BaseBox>
+  );
+
+  return (
+    <>
+      <NewWrapper
+        listData={pagination.listData}
+        onEndReached={pagination.loadMore}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+        hideFooter
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+        headerComponent={
+          <AdminBackButtonAntTitle title="Detail Bidang & Sub Bidang" />
+        }
+        ListHeaderComponent={renderHeader()}
+        renderItem={renderItem}
+      />
+    </>
+  );
+}

screens/Admin/User-Access/ScreenUserAccess.tsx

@@ -5,20 +5,18 @@ import {
   Grid,
   SearchInput,
   StackCustom,
-  TextCustom
+  TextCustom,
 } from "@/components";
 import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import {
-  PAGINATION_DEFAULT_TAKE
-} from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
-import { router } from "expo-router";
-import { useState } from "react";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 import { RefreshControl } from "react-native";
 
 export function Admin_ScreenUserAccess() {
@@ -54,6 +52,12 @@ export function Admin_ScreenUserAccess() {
       isInitialLoad: pagination.isInitialLoad,
     });
 
+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, []),
+  );
+
   const rightComponent = () => {
     return (
       <>