Component:

Add: components/_ShareComponent/DummyLandscapeImage.

Job
Add:
- edit & status per id

- BoxDetailSectio
- ButtonStatusSection

Fix:
- index, status, archive: penyesuaian ui

# No Issue

app/(application)/(user)/_layout.tsx

@@ -154,7 +154,7 @@ export default function UserLayout() {
         <Stack.Screen
           name="job/create"
           options={{
-            title: "Tambah Lowongan Pekerjaan",
+            title: "Tambah Job",
             headerLeft: () => <BackButton />,
           }}
         />
@@ -168,7 +168,14 @@ export default function UserLayout() {
         <Stack.Screen
           name="job/[id]/index"
           options={{
-            title: "Detail Lowongan Pekerjaan",
+            title: "Detail Job",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="job/[id]/edit"
+          options={{
+            title: "Edit Job",
             headerLeft: () => <BackButton />,
           }}
         />

app/(application)/(user)/event/[id]/[status]/detail-event.tsx

@@ -73,9 +73,9 @@ export default function EventDetailStatus() {
         height={250}
       >
         <MenuDrawerDynamicGrid
-          data={menuDrawerDraftEvent({ id: id as string })}
+          data={menuDrawerDraftEvent({ id: id as string }) as any}
           columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
         />
       </DrawerCustom>
 

app/(application)/(user)/job/(tabs)/archive.tsx

@@ -3,9 +3,9 @@ import { jobDataDummy } from "@/screens/Job/listDataDummy";
 
 export default function JobArchive() {
   return (
-    <ViewWrapper>
+    <ViewWrapper hideFooter>
       {jobDataDummy.map((e, i) => (
-        <BaseBox key={i} paddingBlock={20}>
+        <BaseBox key={i} paddingTop={20} paddingBottom={20}>
           <TextCustom align="center" bold truncate size="large">
             {e.posisi}
           </TextCustom>

app/(application)/(user)/job/(tabs)/status.tsx

@@ -33,9 +33,15 @@ export default function JobStatus() {
   return (
     <ViewWrapper headerComponent={scrollComponent} hideFooter>
       {jobDataDummy.map((e, i) => (
-        <BaseBox key={i} paddingBlock={20}>
+        <BaseBox
+          key={i}
+          paddingTop={20}
+          paddingBottom={20}
+          href={`/job/${e.id}/${activeCategory}/detail`}
+          // onPress={() => console.log("pressed")}
+        >
           <TextCustom align="center" bold truncate size="large">
-            {activeCategory?.toUpperCase()} {e.posisi}
+            {e.posisi} {activeCategory?.toUpperCase()}
           </TextCustom>
         </BaseBox>
       ))}

app/(application)/(user)/job/[id]/[status]/detail.tsx

@@ -0,0 +1,65 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
+import Job_ButtonStatusSection from "@/screens/Job/ButtonStatusSection";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function JobDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <Job_BoxDetailSection data={jobDetail} />
+        <Job_ButtonStatusSection status={status as string} />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit",
+              path: `/job/${id}/edit`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePress as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/job/[id]/edit.tsx

@@ -0,0 +1,67 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function JobEdit() {
+  const buttonSubmit = () => {
+    return (
+      <>
+        <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+        <Spacing />
+      </>
+    );
+  };
+
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+
+        <Spacing />
+
+        <TextInputCustom
+          label="Judul Lowongan"
+          placeholder="Masukan Judul Lowongan Kerja"
+          required
+        />
+
+        <TextAreaCustom
+          label="Syarat & Kualifikasi"
+          placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <TextAreaCustom
+          label="Deskripsi Lowongan"
+          placeholder="Masukan Deskripsi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        {buttonSubmit()}
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -1,18 +1,16 @@
 import {
-  BaseBox,
   ButtonCustom,
   Spacing,
-  StackCustom,
+  ViewWrapper
-  TextCustom,
-  ViewWrapper,
 } from "@/components";
+import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
 import { jobDataDummy } from "@/screens/Job/listDataDummy";
 import { Ionicons } from "@expo/vector-icons";
+import * as Clipboard from "expo-clipboard";
 import { useLocalSearchParams } from "expo-router";
 import { Alert, Linking } from "react-native";
-import * as Clipboard from "expo-clipboard";
-import { MainColor } from "@/constants/color-palet";
 
 export default function JobDetail() {
   const { id } = useLocalSearchParams();
@@ -34,7 +32,9 @@ export default function JobDetail() {
 
     return (
       <ButtonCustom
-        iconLeft={<Ionicons name="globe" size={ICON_SIZE_SMALL} color="white" />}
+        iconLeft={
+          <Ionicons name="globe" size={ICON_SIZE_SMALL} color="white" />
+        }
         onPress={openInBrowser}
         backgroundColor="green"
         textColor="white"
@@ -70,25 +70,9 @@ export default function JobDetail() {
 
   return (
     <ViewWrapper>
-      <BaseBox>
+      <Job_BoxDetailSection data={jobDetail}/>
-        <StackCustom gap={"lg"}>
-          <TextCustom align="center" bold size="large">
-            {jobDetail?.posisi}
-          </TextCustom>
-
-          <StackCustom gap={"sm"}>
-            <TextCustom bold>Syarat & Ketentuan :</TextCustom>
-            <TextCustom>{jobDetail?.syaratKetentuan}</TextCustom>
-          </StackCustom>
-
-          <StackCustom gap={"sm"}>
-            <TextCustom bold>Deskripsi :</TextCustom>
-            <TextCustom>{jobDetail?.deskripsi}</TextCustom>
-          </StackCustom>
-        </StackCustom>
-      </BaseBox>
       <OpenLinkButton />
-      <Spacing/>
+      <Spacing />
       <CopyLinkButton />
     </ViewWrapper>
   );

app/(application)/(user)/job/create.tsx

@@ -1,18 +1,17 @@
 import {
-    ButtonCenteredOnly,
+  ButtonCenteredOnly,
-    ButtonCustom,
+  ButtonCustom,
-    InformationBox,
+  InformationBox,
-    LandscapeFrameUploaded,
+  LandscapeFrameUploaded,
-    Spacing,
+  Spacing,
-    StackCustom,
+  StackCustom,
-    TextAreaCustom,
+  TextAreaCustom,
-    TextInputCustom,
+  TextInputCustom,
-    ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { router } from "expo-router";
 
 export default function JobCreate() {
-    
   const buttonSubmit = () => {
     return (
       <>
@@ -23,19 +22,23 @@ export default function JobCreate() {
         >
           Simpan
         </ButtonCustom>
-        <Spacing/>
+        <Spacing />
       </>
     );
   };
 
-
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
 
         <LandscapeFrameUploaded />
-        <ButtonCenteredOnly onPress={() => console.log("Upload")} icon="upload">
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
           Upload
         </ButtonCenteredOnly>
 

components/Box/BaseBox.tsx

@@ -72,6 +72,8 @@ export default function BaseBox({
               marginBottom,
               paddingBlock,
               paddingInline,
+              paddingTop,
+              paddingBottom,
             },
             style,
           ]}

components/_ShareComponent/DummyLandscapeImage.tsx

@@ -0,0 +1,32 @@
+import { AccentColor } from "@/constants/color-palet";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { Image } from "expo-image";
+import { StyleSheet } from "react-native";
+import ClickableCustom from "../Clickable/ClickableCustom";
+import { router } from "expo-router";
+
+export default function DummyLandscapeImage() {
+  return (
+    <ClickableCustom
+      onPress={() => {
+        router.push("/(application)/(image)/preview-image/1");
+      }}
+    >
+      <Image source={DUMMY_IMAGE.background} style={styles.backgroundImage} />
+    </ClickableCustom>
+  );
+}
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    width: "100%",
+    height: 200, // Tinggi background sesuai kebutuhan
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 6,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: AccentColor.blue,
+    backgroundColor: "white",
+  },
+});

components/index.ts

@@ -50,6 +50,7 @@ import Spacing from "./_ShareComponent/Spacing";
 import TabBarBackground from "./_ShareComponent/TabBarBackground";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import SearchInput from "./_ShareComponent/SearchInput";
+import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
 
 export {
   AlertCustom,
@@ -93,6 +94,7 @@ export {
   SelectCustom,
   // ShareComponent
   SearchInput,
+  DummyLandscapeImage,
   Spacing,
   // Stack
   StackCustom,

screens/Job/BoxDetailSection.tsx

@@ -0,0 +1,28 @@
+import { BaseBox, StackCustom, DummyLandscapeImage, TextCustom } from "@/components";
+
+export default function Job_BoxDetailSection({data}: {data: any}) {
+    return (
+      <>
+        <BaseBox>
+          <StackCustom gap={"lg"}>
+            <DummyLandscapeImage />
+
+            <TextCustom align="center" bold size="large">
+              {data?.posisi}
+            </TextCustom>
+
+            <StackCustom gap={"sm"}>
+              <TextCustom bold>Syarat & Ketentuan :</TextCustom>
+              <TextCustom>{data?.syaratKetentuan}</TextCustom>
+            </StackCustom>
+
+            <StackCustom gap={"sm"}>
+              <TextCustom bold>Deskripsi :</TextCustom>
+              <TextCustom>{data?.deskripsi}</TextCustom>
+            </StackCustom>
+          </StackCustom>
+        </BaseBox>
+      </>
+    );
+}
+    

screens/Job/ButtonStatusSection.tsx

@@ -0,0 +1,135 @@
+import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+export default function Job_ButtonStatusSection({
+  status,
+}: {
+  status: string;
+}) {
+  const handleBatalkanReview = () => {
+    AlertDefaultSystem({
+      title: "Batalkan Review",
+      message: "Apakah Anda yakin ingin batalkan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleAjukanReview = () => {
+    AlertDefaultSystem({
+      title: "Ajukan Review",
+      message: "Apakah Anda yakin ingin ajukan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleEditKembali = () => {
+    AlertDefaultSystem({
+      title: "Edit Kembali",
+      message: "Apakah Anda yakin ingin edit kembali ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleOpenDeleteAlert = () => {
+    AlertDefaultSystem({
+      title: "Hapus",
+      message: "Apakah Anda yakin ingin menghapus data ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const DeleteButton = () => {
+    return (
+      <>
+        <ButtonCustom
+          backgroundColor="red"
+          textColor="white"
+          onPress={handleOpenDeleteAlert}
+        >
+          Hapus
+        </ButtonCustom>
+      </>
+    );
+  };
+
+  switch (status) {
+    case "publish":
+      return (
+        <>
+          <ButtonCustom
+            onPress={() => {
+              console.log("Arsipkan");
+              router.replace("/(application)/(user)/job/(tabs)/archive");
+            }}
+          >
+            Arsipkan
+          </ButtonCustom>
+        </>
+      );
+
+    case "review":
+      return (
+        <ButtonCustom onPress={handleBatalkanReview}>
+          Batalkan Review
+        </ButtonCustom>
+      );
+
+    case "draft":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={5}>
+              <ButtonCustom onPress={handleAjukanReview}>
+                Ajukan Review
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
+          </Grid>
+        </>
+      );
+
+    case "reject":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={5}>
+              <ButtonCustom onPress={handleEditKembali}>
+                Edit Kembali
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
+          </Grid>
+        </>
+      );
+
+    default:
+      return <ButtonCustom disabled>Status Undifined</ButtonCustom>;
+  }
+}