Admin Job:

Add:
- admin/job/[status]/
- dmin/job/[id]/

### No issue

app/(application)/(user)/voting/(tabs)/history.tsx

@@ -1,5 +1,5 @@
 import { ViewWrapper } from "@/components";
-import TabsTwoHeaderCustom from "@/components/_ShareComponent/TabsTwoHeaderCustom";
+import TabsTwoButtonCustom from "@/components/_ShareComponent/TabsTwoHeaderCustom";
 import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
 import { useState } from "react";
 
@@ -15,7 +15,7 @@ export default function VotingHistory() {
     <ViewWrapper
       hideFooter
       headerComponent={
-        <TabsTwoHeaderCustom
+        <TabsTwoButtonCustom
           leftValue="all"
           rightValue="main"
           leftText="Semua Riwayat"

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,66 +41,45 @@ export default function AdminLayout() {
           headerRight: () => (
             <FontAwesome6
               name="circle-user"
-              size={ICON_SIZE_SMALL}
+              size={ICON_SIZE_MEDIUM}
               color={MainColor.white}
               onPress={() => setOpenDrawerUser(true)}
             />
           ),
         }}
       >
-        <Stack.Screen name="dashboard" 
+        <Stack.Screen name="dashboard" />
-        // options={{ title: "Main Dashboard" }} 
+        {/* ================== Investment Start ================== */}
-        />
+        <Stack.Screen name="investment/index" />
-        <Stack.Screen
+        <Stack.Screen name="investment/publish" />
-          name="investment/index"
+        <Stack.Screen name="investment/review" />
-          // options={{ title: "Dashboard Investasi" }}
+        <Stack.Screen name="investment/reject" />
-        />
+        {/* ================== Investment End ================== */}
-        <Stack.Screen
+
-          name="investment/publish"
+        {/* ================== Maps Start ================== */}
-          // options={{ title: "Investasi Publish" }}
+        <Stack.Screen name="maps" />
-        />
+        {/* ================== Maps End ================== */}
-        <Stack.Screen
+
-          name="investment/review"
+        {/* ================== App Information Start ================== */}
-          // options={{ title: "Investasi Review" }}
+        <Stack.Screen name="app-information/index" />
-        />
+        {/* ================== App Information End ================== */}
-        <Stack.Screen
+
-          name="investment/reject"
+        {/* ================== Job Start ================== */}
-          // options={{ title: "Investasi Reject" }}
+        <Stack.Screen name="job/index" />
-        />
+        <Stack.Screen name="job/publish" />
-        <Stack.Screen name="maps" 
+        <Stack.Screen name="job/review" />
-        // options={{ title: "Maps" }} 
+        <Stack.Screen name="job/reject" />
-        />
+        <Stack.Screen name="job/[status]/status" />
-        <Stack.Screen name="app-information/index" 
+        <Stack.Screen name="job/[id]/[status]/index" />
-        // options={{ title: "Information" }} 
+
-        />
+        {/* ================== Collaboration Start ================== */}
-        <Stack.Screen name="job/index" 
+        <Stack.Screen name="collaboration/index" />
-        // options={{ title: "Dashboard Job" }} 
+        <Stack.Screen name="collaboration/publish" />
-        />
+        <Stack.Screen name="collaboration/group" />
-        <Stack.Screen name="job/publish" 
+        <Stack.Screen name="collaboration/reject" />
-        // options={{ title: "Job Publish" }} 
+        <Stack.Screen name="collaboration/[id]/[status]"/>
-        />
+        <Stack.Screen name="collaboration/[id]/group"/>
-        <Stack.Screen name="job/review" 
+        {/* ================== Collaboration End ================== */}
-        // options={{ title: "Job Review" }} 
-        />
-        <Stack.Screen name="job/reject" 
-        // options={{ title: "Job Reject" }} 
-        />
-        <Stack.Screen
-          name="collaboration/index"
-          // options={{ title: "Dashboard Collaboration" }}
-        />
-        <Stack.Screen
-          name="collaboration/publish"
-          // options={{ title: "Collaboration Publish" }}
-        />
-        <Stack.Screen
-          name="collaboration/group"
-          // options={{ title: "Collaboration Group" }}
-        />
-        <Stack.Screen
-          name="collaboration/reject"
-          // options={{ title: "Collaboration Reject" }}
-        />
       </Stack>
 
       <DrawerAdmin

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/collaboration/[id]/[status].tsx

@@ -0,0 +1,89 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+import { useLocalSearchParams } from "expo-router";
+
+export default function AdminCollaborationPublish() {
+  const { id, status } = useLocalSearchParams();
+  console.log("params:", id, status);
+  const bottomFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor="white"
+        onPress={() => {}}
+      >
+        Reject
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail ${status}`} />}
+        footerComponent={bottomFooter}
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col
+                  span={4}
+                  style={{ justifyContent: "center", paddingRight: 10 }}
+                >
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Username",
+    value: "Bagas Banuna",
+  },
+  {
+    label: "Judul Proyek",
+    value:
+      "Judul Proyek: Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+  },
+  {
+    label: "Industri",
+    value: "Kesehatan",
+  },
+  {
+    label: "Jumlah Partisipan ",
+    value: "0",
+  },
+  {
+    label: "Lokasi",
+    value: "Kuta Selatan, Bali",
+  },
+  {
+    label: "Tujuan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    label: "Keuntungan",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];

app/(application)/admin/collaboration/[id]/group.tsx

@@ -0,0 +1,97 @@
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { useLocalSearchParams } from "expo-router";
+
+export default function AdminCollaborationGroup() {
+  const { id } = useLocalSearchParams();
+  console.log("params:", id);
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle title={`Detail Group ${id}`} />
+        }
+      >
+        <StackCustom gap={"xs"}>
+          <BaseBox>
+            <StackCustom>
+              {listData.map((item, i) => (
+                <Grid key={i}>
+                  <Grid.Col
+                    span={4}
+                    style={{ justifyContent: "center", paddingRight: 10 }}
+                  >
+                    <TextCustom bold>{item.label}</TextCustom>
+                  </Grid.Col>
+                  <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                    <TextCustom>{item.value}</TextCustom>
+                  </Grid.Col>
+                </Grid>
+              ))}
+            </StackCustom>
+          </BaseBox>
+          <BaseBox>
+            <StackCustom>
+              <TextCustom align="center">Anggota</TextCustom>
+
+              {Array.from({ length: 10 }).map((_, i) => (
+                <Grid key={i}>
+                  <Grid.Col
+                    span={4}
+                    style={{ justifyContent: "center", paddingRight: 10 }}
+                  >
+                    <TextCustom bold>Username</TextCustom>
+                  </Grid.Col>
+                  <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                    <TextCustom>
+                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    </TextCustom>
+                  </Grid.Col>
+                </Grid>
+              ))}
+            </StackCustom>
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Admin Group",
+    value: "Bagas Banuna",
+  },
+  {
+    label: "Nama Group",
+    value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+  },
+  {
+    label: "Industri",
+    value: "Kesehatan",
+  },
+  {
+    label: "Jumlah Partisipan ",
+    value: "0",
+  },
+  {
+    label: "Lokasi",
+    value: "Kuta Selatan, Bali",
+  },
+  {
+    label: "Tujuan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    label: "Keuntungan",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];

app/(application)/admin/collaboration/group.tsx

@@ -1,10 +1,68 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  ActionIcon,
+  BaseBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Divider } from "react-native-paper";
 
 export default function AdminCollaborationGroup() {
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
-        <TextCustom>Admin Collaboration Group</TextCustom>
+        <StackCustom gap={"xs"}>
+          <AdminComp_BoxTitle title="Group" />
+          <BaseBox>
+            <AdminTitleTable
+              title1="Aksi"
+              title2="Admin Group"
+              title3="Nama Group"
+            />
+            <Spacing height={10} />
+            <Divider />
+
+            {Array.from({ length: 10 }).map((_, index) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/collaboration/${index}/group`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom truncate={1}>Username username </TextCustom>
+                }
+                value3={
+                  <TextCustom truncate={2}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Blanditiis asperiores quidem deleniti architecto eaque et
+                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                    ducimus! Dolorem nobis modi officia debitis, beatae
+                    mollitia.
+                  </TextCustom>
+                }
+              />
+            ))}
+          </BaseBox>
+        </StackCustom>
       </ViewWrapper>
     </>
   );

app/(application)/admin/collaboration/index.tsx

@@ -1,11 +1,37 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { StackCustom, ViewWrapper } from "@/components";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { Entypo, FontAwesome } from "@expo/vector-icons";
 
 export default function AdminCollaboration() {
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
-        <TextCustom>Admin Collaboration</TextCustom>
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
       </ViewWrapper>
     </>
   );
 }
+
+const listData = [
+  {
+    label: "Publish",
+    value: 4,
+    icon: <Entypo name="publish" size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Group",
+    value: 7,
+    icon: <FontAwesome name="group" size={25} color={MainColor.yellow} />,
+  },
+  {
+    label: "Reject",
+    value: 7,
+    icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+  },
+];

app/(application)/admin/collaboration/publish.tsx

@@ -1,11 +1,70 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  ActionIcon,
+  BaseBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Divider } from "react-native-paper";
 
 export default function AdminCollaborationPublish() {
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
-        <TextCustom>Admin Collaboration Publish</TextCustom>
+        <StackCustom gap={"xs"}>
+          <AdminComp_BoxTitle title="Publish" />
+          <BaseBox>
+            <AdminTitleTable
+              title1="Aksi"
+              title2="Username"
+              title3="Judul Proyek"
+            />
+            <Spacing height={10} />
+            <Divider />
+
+            {Array.from({ length: 10 }).map((_, index) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/collaboration/${index}/publish`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom truncate={1}>Username username </TextCustom>
+                }
+                value3={
+                  <TextCustom truncate={2}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Blanditiis asperiores quidem deleniti architecto eaque et
+                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                    ducimus! Dolorem nobis modi officia debitis, beatae
+                    mollitia.
+                  </TextCustom>
+                }
+              />
+            ))}
+          </BaseBox>
+        </StackCustom>
       </ViewWrapper>
     </>
   );
 }
+

app/(application)/admin/collaboration/reject.tsx

@@ -1,10 +1,68 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  ActionIcon,
+  BaseBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Divider } from "react-native-paper";
 
 export default function AdminCollaborationReject() {
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
-        <TextCustom>Admin Collaboration Reject</TextCustom>
+        <StackCustom gap={"xs"}>
+          <AdminComp_BoxTitle title="Reject" />
+          <BaseBox>
+            <AdminTitleTable
+              title1="Aksi"
+              title2="Username"
+              title3="Judul Proyek"
+            />
+            <Spacing height={10} />
+            <Divider />
+
+            {Array.from({ length: 10 }).map((_, index) => (
+              <AdminTableValue
+                key={index}
+                value1={
+                  <ActionIcon
+                    icon={
+                      <Octicons
+                        name="eye"
+                        size={ICON_SIZE_BUTTON}
+                        color="black"
+                      />
+                    }
+                    onPress={() => {
+                      router.push(`/admin/collaboration/${index}/reject`);
+                    }}
+                  />
+                }
+                value2={
+                  <TextCustom truncate={1}>Username username </TextCustom>
+                }
+                value3={
+                  <TextCustom truncate={2}>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Blanditiis asperiores quidem deleniti architecto eaque et
+                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                    ducimus! Dolorem nobis modi officia debitis, beatae
+                    mollitia.
+                  </TextCustom>
+                }
+              />
+            ))}
+          </BaseBox>
+        </StackCustom>
       </ViewWrapper>
     </>
   );

app/(application)/admin/job/[id]/[status]/index.tsx

@@ -0,0 +1,110 @@
+import {
+  BadgeCustom,
+  BaseBox,
+  ButtonCustom,
+  DummyLandscapeImage,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+import { useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+
+export default function AdminJobDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+
+  const colorBadge = () => {
+    if (status === "publish") {
+      return MainColor.green;
+    } else if (status === "review") {
+      return MainColor.orange;
+    } else if (status === "reject") {
+      return MainColor.red;
+    }
+  };
+
+  const listData = [
+    {
+      label: "Username",
+      value: "Bagas Banuna",
+    },
+    {
+      label: "Judul",
+      value: `Judul Proyek: ${id}Lorem ipsum dolor sit amet consectetur adipisicing elit.`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Konten",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    {
+      label: "Deskripsi",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    // {
+    //   label: "Poster",
+    //   value: (
+    //     <ButtonCustom
+    //       href={`/(application)/()/${id}`}
+    //     >
+    //       Lihat Poster
+    //     </ButtonCustom>
+    //   ),
+    // },
+  ];
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col
+                  span={4}
+                  style={{ justifyContent: "center", paddingRight: 10 }}
+                >
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8} style={{ justifyContent: "center" }}>
+                  <TextCustom>{item.value}</TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+
+            <TextCustom bold>Poster</TextCustom>
+
+            <DummyLandscapeImage />
+          </StackCustom>
+        </BaseBox>
+
+        {status === "review" && (
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom backgroundColor={MainColor.green} textColor="white">
+                Publish
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              <ButtonCustom backgroundColor={MainColor.red} textColor="white">
+                Reject
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+        )}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/job/[status]/status.tsx

@@ -0,0 +1,76 @@
+import {
+  ActionIcon,
+  BaseBox,
+  SearchInput,
+  Spacing,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { Divider } from "react-native-paper";
+
+export default function AdminJobStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Job Vacancy" />}>
+        <AdminComp_BoxTitle
+          title={`${_.startCase(status as string)}`}
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Pekerjaan"
+          />
+          <Spacing />
+          <Divider />
+
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Octicons
+                      name="eye"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/job/${index}/${status}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/job/index.tsx

@@ -1,11 +1,45 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { Entypo, FontAwesome, FontAwesome6 } from "@expo/vector-icons";
 
 export default function AdminJob() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Admin Job</TextCustom>
+        <AdminTitlePage title="Job Vacancy" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
       </ViewWrapper>
     </>
   );
 }
+
+const listData = [
+  {
+    label: "Publish",
+    value: 4,
+    icon: <Entypo name="publish" size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Review",
+    value: 7,
+    icon: (
+      <FontAwesome6
+        name="person-circle-check"
+        size={25}
+        color={MainColor.orange}
+      />
+    ),
+  },
+  {
+    label: "Reject",
+    value: 5,
+    icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+  },
+];

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/_Icon/IconArchive.tsx

@@ -2,11 +2,11 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Ionicons } from "@expo/vector-icons";
 
-export default function IconArchive({ color }: { color?: string }) {
+export default function IconArchive({ color, size }: { color?: string; size?: number }) {
   return (
     <Ionicons
       name="archive"
-      size={ICON_SIZE_SMALL}
+      size={size || ICON_SIZE_SMALL}
       color={color || MainColor.white}
     />
   );

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

@@ -3,7 +3,7 @@ import CircleContainer from "@/components/Container/CircleContainer";
 import Grid from "@/components/Grid/GridCustom";
 import StackCustom from "@/components/Stack/StackCustom";
 import TextCustom from "@/components/Text/TextCustom";
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 
 interface BoxDashboardProps {
   item: {
@@ -37,7 +37,7 @@ export default function AdminComp_BoxDashboard({ item }: BoxDashboardProps) {
             span={3}
             style={{ alignItems: "flex-start", justifyContent: "center" }}
           >
-            <CircleContainer icon={item.icon} />
+            <CircleContainer style={{ backgroundColor: MainColor.white, borderColor: AccentColor.blue }} icon={item.icon} />
           </Grid.Col>
         </Grid>
       </BaseBox>

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/_ShareComponent/Admin/TableTitle.tsx

@@ -0,0 +1,28 @@
+import Grid from "@/components/Grid/GridCustom";
+import TextCustom from "@/components/Text/TextCustom";
+
+export default function AdminTitleTable({
+  title1,
+  title2,
+  title3,
+}: {
+  title1: string;
+  title2: string;
+  title3: string;
+}) {
+  return (
+    <>
+      <Grid>
+        <Grid.Col span={3} style={{ alignItems: "center", justifyContent: "center" }}>
+          <TextCustom bold align="center">{title1}</TextCustom>
+        </Grid.Col>
+        <Grid.Col span={3} style={{ alignItems: "center", justifyContent: "center" }}>
+          <TextCustom bold align="center">{title2}</TextCustom>
+        </Grid.Col>
+        <Grid.Col span={6} style={{ alignItems: "center", justifyContent: "center" }}>
+          <TextCustom bold align="center">{title3}</TextCustom>
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}

components/_ShareComponent/Admin/TableValue.tsx

@@ -0,0 +1,56 @@
+import Grid from "@/components/Grid/GridCustom";
+import React from "react";
+import { View } from "react-native";
+import { Divider } from "react-native-paper";
+
+export default function AdminTableValue({
+  value1,
+  value2,
+  value3,
+}: {
+  value1: React.ReactNode;
+  value2: React.ReactNode;
+  value3: React.ReactNode;
+}) {
+  return (
+    <>
+      <View style={{ paddingVertical: 5 }}>
+        <Grid>
+          <Grid.Col
+            span={3}
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              paddingLeft: 5,
+              paddingRight: 5,
+            }}
+          >
+            {value1}
+          </Grid.Col>
+          <Grid.Col
+            span={3}
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              paddingLeft: 5,
+              paddingRight: 5,
+            }}
+          >
+            {value2}
+          </Grid.Col>
+          <Grid.Col
+            span={6}
+            style={{
+              justifyContent: "center",
+              paddingLeft: 5,
+              paddingRight: 5,
+            }}
+          >
+            {value3}
+          </Grid.Col>
+        </Grid>
+        <Divider />
+      </View>
+    </>
+  );
+}

components/_ShareComponent/Admin/TitlePage.tsx

@@ -0,0 +1,11 @@
+import TextCustom from "@/components/Text/TextCustom";
+
+export default function AdminTitlePage({ title }: { title: string }) {
+  return (
+    <>
+      <TextCustom bold size={30}>
+        {title}
+      </TextCustom>
+    </>
+  );
+}

components/_ShareComponent/SearchInput.tsx

@@ -17,7 +17,7 @@ export default function SearchInput({
   onPress,
   iconLeft,
   iconRight,
-  containerStyle = { marginBottom: 0 },
+  containerStyle,
   style,
   ...props
 }: SearchInputProps) {
@@ -32,7 +32,7 @@ export default function SearchInput({
       }
       placeholder={placeholder}
       borderRadius={50}
-      containerStyle={containerStyle}
+      containerStyle={[containerStyle, { marginBottom: 0 }]}
       {...props}
     />
   );

components/_ShareComponent/TabsTwoHeaderCustom.tsx

@@ -1,15 +1,16 @@
-import { MainColor, AccentColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { View } from "react-native";
 import ButtonCustom from "../Button/ButtonCustom";
 import Spacing from "./Spacing";
 
-export default function TabsTwoHeaderCustom ({
+export default function TabsTwoButtonCustom ({
     leftValue,
     rightValue,
     leftText,
     rightText,
     activeCategory,
     handlePress,
+    hideBackground,
 }: {
     leftValue: string;
     rightValue: string;
@@ -17,6 +18,7 @@ export default function TabsTwoHeaderCustom ({
     rightText: string;
     activeCategory: string | null;
     handlePress: (item: string) => void;
+    hideBackground?: boolean;
 }) {
     return (
       <>
@@ -25,7 +27,7 @@ export default function TabsTwoHeaderCustom ({
             flexDirection: "row",
             alignItems: "center",
             padding: 5,
-            backgroundColor: MainColor.soft_darkblue,
+            backgroundColor: hideBackground ? "transparent" : MainColor.soft_darkblue,
             borderRadius: 50,
             width: "100%",
           }}

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/Admin/listPageAdmin.tsx

@@ -57,9 +57,9 @@ const adminListMenu: NavbarItem[] = [
     icon: "desktop-outline",
     links: [
       { label: "Dashboard", link: "/admin/job" },
-      { label: "Publish", link: "/admin/job/publish" },
+      { label: "Publish", link: "/admin/job/publish/status" },
-      { label: "Review", link: "/admin/job/review" },
+      { label: "Review", link: "/admin/job/review/status" },
-      { label: "Reject", link: "/admin/job/reject" },
+      { label: "Reject", link: "/admin/job/reject/status" },
     ],
   },
   {

screens/Authentication/LoginView.tsx

@@ -30,7 +30,7 @@ export default function LoginView() {
     const id = randomAlfabet + randomNumber + fixNumber;
     console.log("login user id :", id);
 
-    // router.navigate("/verification");
+    router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
     // router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
@@ -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/job")}>
+          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]"    ]
 }