Job

Add : app/(application)/(user)/job/[id]/ Fix: - app/(application)/(user)/job/(tabs)/archive.tsx - app/(application)/(user)/job/(tabs)/index.tsx - app/(application)/(user)/job/(tabs)/status.tsx - app/(application)/(user)/job/create.tsx Package: Add: expo-clipboard # No Issue
2025-07-25 14:19:57 +08:00
parent 7528c449eb
commit 1b1732c7d8
9 changed files with 257 additions and 48 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -162,6 +162,13 @@ export default function UserLayout() {
          name="job/(tabs)"
          options={{
            title: "Job Vacancy",
+            headerLeft: () => <BackButton path="/home" />,
+          }}
+        />
+        <Stack.Screen
+          name="job/[id]/index"
+          options={{
+            title: "Detail Lowongan Pekerjaan",
            headerLeft: () => <BackButton />,
          }}
        />
--- a/app/(application)/(user)/job/(tabs)/archive.tsx
+++ b/app/(application)/(user)/job/(tabs)/archive.tsx
@@ -1,9 +1,16 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { BaseBox, TextCustom, ViewWrapper } from "@/components";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";

 export default function JobArchive() {
  return (
    <ViewWrapper>
-      <TextCustom>Job Archive</TextCustom>
+      {jobDataDummy.map((e, i) => (
+        <BaseBox key={i} paddingBlock={20}>
+          <TextCustom align="center" bold truncate size="large">
+            {e.posisi}
+          </TextCustom>
+        </BaseBox>
+      ))}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/job/(tabs)/index.tsx
+++ b/app/(application)/(user)/job/(tabs)/index.tsx
@@ -20,7 +20,7 @@ export default function JobBeranda() {
      headerComponent={<SearchInput placeholder="Cari pekerjaan" />}
    >
      {jobDataDummy.map((item, index) => (
-        <BoxWithHeaderSection key={index}>
+        <BoxWithHeaderSection key={index} onPress={() => router.push(`/job/${item.id}`)}>
          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${item.id}`} />
          <Spacing />
          <TextCustom truncate={2} align="center" bold size="large">
--- a/app/(application)/(user)/job/(tabs)/status.tsx
+++ b/app/(application)/(user)/job/(tabs)/status.tsx
@@ -1,9 +1,44 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BaseBox,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { masterStatus } from "@/lib/dummy-data/_master/status";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { useState } from "react";

 export default function JobStatus() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={masterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
  return (
-    <ViewWrapper>
-      <TextCustom>Job Status</TextCustom>
+    <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      {jobDataDummy.map((e, i) => (
+        <BaseBox key={i} paddingBlock={20}>
+          <TextCustom align="center" bold truncate size="large">
+            {activeCategory?.toUpperCase()} {e.posisi}
+          </TextCustom>
+        </BaseBox>
+      ))}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/job/[id]/index.tsx
+++ b/app/(application)/(user)/job/[id]/index.tsx
@@ -0,0 +1,95 @@
+import {
+  BaseBox,
+  ButtonCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { jobDataDummy } from "@/screens/Job/listDataDummy";
+import { Ionicons } from "@expo/vector-icons";
+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();
+
+  const jobDetail = jobDataDummy.find((e) => e.id === Number(id));
+
+  const OpenLinkButton = () => {
+    const jobUrl =
+      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+
+    const openInBrowser = async () => {
+      const supported = await Linking.canOpenURL(jobUrl);
+      if (supported) {
+        await Linking.openURL(jobUrl);
+      } else {
+        Alert.alert("Gagal membuka link", "Browser tidak tersedia.");
+      }
+    };
+
+    return (
+      <ButtonCustom
+        iconLeft={<Ionicons name="globe" size={ICON_SIZE_SMALL} color="white" />}
+        onPress={openInBrowser}
+        backgroundColor="green"
+        textColor="white"
+      >
+        Buka Lowongan di Browser
+      </ButtonCustom>
+    );
+  };
+
+  const CopyLinkButton = () => {
+    const jobUrl =
+      "https://stg-hipmi.wibudev.com/job-vacancy/cm6ijt9w8005zucv4twsct657";
+
+    const copyToClipboard = async () => {
+      await Clipboard.setStringAsync(jobUrl);
+      Alert.alert(
+        "Link disalin",
+        "Tautan lowongan telah disalin ke clipboard."
+      );
+    };
+
+    return (
+      <ButtonCustom
+        iconLeft={<Ionicons name="copy" size={ICON_SIZE_SMALL} color="white" />}
+        onPress={copyToClipboard}
+        backgroundColor={MainColor.orange}
+        textColor="white"
+      >
+        Salin Link
+      </ButtonCustom>
+    );
+  };
+
+  return (
+    <ViewWrapper>
+      <BaseBox>
+        <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/>
+      <CopyLinkButton />
+    </ViewWrapper>
+  );
+}
--- a/app/(application)/(user)/job/create.tsx
+++ b/app/(application)/(user)/job/create.tsx
@@ -1,9 +1,70 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+    ButtonCenteredOnly,
+    ButtonCustom,
+    InformationBox,
+    LandscapeFrameUploaded,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    TextInputCustom,
+    ViewWrapper
+} from "@/components";
+import { router } from "expo-router";

 export default function JobCreate() {
+    
+  const buttonSubmit = () => {
+    return (
+      <>
+        <ButtonCustom
+          onPress={() =>
+            router.replace("/(application)/(user)/job/(tabs)/status")
+          }
+        >
+          Simpan
+        </ButtonCustom>
+        <Spacing/>
+      </>
+    );
+  };
+
+
  return (
    <ViewWrapper>
-      <TextCustom>Job Create</TextCustom>
+      <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">
+          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>
  );
 }
--- a/bun.lock
+++ b/bun.lock
@@ -16,6 +16,7 @@
        "expo": "53.0.17",
        "expo-blur": "~14.1.5",
        "expo-camera": "~16.1.10",
+        "expo-clipboard": "~7.1.5",
        "expo-constants": "~17.1.7",
        "expo-font": "~13.3.2",
        "expo-haptics": "~14.1.4",
@@ -827,6 +828,8 @@

    "expo-camera": ["expo-camera@16.1.10", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-qoRJeSwPmMbuu0VfnQTC+q79Kt2SqTWColEImgithL9u0qUQcC55U89IfhZk55Hpt6f1DgKuDzUOG5oY+snSWg=="],

+    "expo-clipboard": ["expo-clipboard@7.1.5", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-TCANUGOxouoJXxKBW5ASJl2WlmQLGpuZGemDCL2fO5ZMl57DGTypUmagb0CVUFxDl0yAtFIcESd78UsF9o64aw=="],
+
    "expo-constants": ["expo-constants@17.1.7", "", { "dependencies": { "@expo/config": "~11.0.12", "@expo/env": "~1.0.7" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-byBjGsJ6T6FrLlhOBxw4EaiMXrZEn/MlUYIj/JAd+FS7ll5X/S4qVRbIimSJtdW47hXMq0zxPfJX6njtA56hHA=="],

    "expo-file-system": ["expo-file-system@18.1.11", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-HJw/m0nVOKeqeRjPjGdvm+zBi5/NxcdPf8M8P3G2JFvH5Z8vBWqVDic2O58jnT1OFEy0XXzoH9UqFu7cHg9DTQ=="],
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "expo": "53.0.17",
    "expo-blur": "~14.1.5",
    "expo-camera": "~16.1.10",
+    "expo-clipboard": "~7.1.5",
    "expo-constants": "~17.1.7",
    "expo-font": "~13.3.2",
    "expo-haptics": "~14.1.4",
--- a/screens/Job/listDataDummy.ts
+++ b/screens/Job/listDataDummy.ts
@@ -2,81 +2,81 @@ export const jobDataDummy = [
  {
    id: 1,
    posisi: "Front-End Developer",
-    perusahaan: "PT Teknologi Hebat",
-    lokasi: "Jakarta",
-    deskripsi: "Membangun UI dengan React.js",
-    tanggalDibuka: "2025-07-25",
+    deskripsi:
+      "Kami mencari Front-End Developer yang berpengalaman untuk membangun dan mengembangkan antarmuka pengguna web yang interaktif, responsif, dan menarik menggunakan React.js dan TypeScript. Kandidat akan bekerja sama dengan tim desain dan back-end untuk memastikan pengalaman pengguna yang optimal di berbagai perangkat.",
+    syaratKetentuan:
+      "Minimal 2 tahun pengalaman sebagai Front-End Developer. Menguasai React.js, TypeScript, HTML, CSS (SCSS). Memahami prinsip-prinsip desain responsif dan pengalaman pengguna (UX). Pengalaman dengan Git dan CI/CD pipeline menjadi nilai tambah.",
  },
  {
    id: 2,
    posisi: "Back-End Developer",
-    perusahaan: "PT Solusi Digital",
-    lokasi: "Bandung",
-    deskripsi: "REST API dengan Node.js & Express",
-    tanggalDibuka: "2025-07-20",
+    deskripsi:
+      "Posisi ini bertanggung jawab dalam membangun dan memelihara RESTful API, serta mengelola logika server dan interaksi dengan basis data. Anda akan bekerja dengan Node.js dan Express untuk mendukung berbagai kebutuhan aplikasi kami yang dinamis dan real-time.",
+    syaratKetentuan:
+      "Pengalaman minimal 2 tahun sebagai Back-End Developer. Menguasai Node.js, Express.js, dan basis data (MongoDB, PostgreSQL). Paham prinsip REST API, middleware, dan keamanan data. Pengalaman dengan Docker dan testing (Jest/Mocha) menjadi nilai plus.",
  },
  {
    id: 3,
    posisi: "UI/UX Designer",
-    perusahaan: "StartupKita",
-    lokasi: "Yogyakarta",
-    deskripsi: "Desain aplikasi mobile dengan Figma",
-    tanggalDibuka: "2025-07-15",
+    deskripsi:
+      "Kami mencari desainer kreatif untuk merancang pengalaman pengguna dan antarmuka yang modern dan intuitif. Anda akan terlibat dalam proses riset pengguna, wireframing, prototyping, dan pengujian desain untuk aplikasi web dan mobile.",
+    syaratKetentuan:
+      "Minimal 1 tahun pengalaman dalam UI/UX. Menguasai alat desain seperti Figma, Sketch, atau Adobe XD. Mampu membuat prototipe interaktif dan melakukan usability testing. Portofolio desain UI/UX yang pernah dikerjakan wajib dilampirkan.",
  },
  {
    id: 4,
    posisi: "DevOps Engineer",
-    perusahaan: "Cloudify Indonesia",
-    lokasi: "Remote",
-    deskripsi: "Automasi CI/CD pipeline di AWS",
-    tanggalDibuka: "2025-07-22",
+    deskripsi:
+      "Sebagai DevOps Engineer, Anda akan bertanggung jawab atas deployment otomatis, pemantauan sistem, dan infrastruktur cloud kami. Posisi ini akan fokus pada integrasi dan pengiriman berkelanjutan (CI/CD), skalabilitas, serta keamanan sistem.",
+    syaratKetentuan:
+      "Menguasai Docker, Kubernetes, Jenkins, GitLab CI, dan monitoring tools (Prometheus, Grafana). Memiliki pengalaman kerja dengan platform cloud seperti AWS atau GCP. Familiar dengan scripting Bash/Python dan prinsip keamanan DevOps.",
  },
  {
    id: 5,
    posisi: "Mobile Developer",
-    perusahaan: "AppMaju",
-    lokasi: "Surabaya",
-    deskripsi: "Kembangkan aplikasi Flutter",
-    tanggalDibuka: "2025-07-10",
+    deskripsi:
+      "Kami sedang mencari developer mobile yang terampil menggunakan Flutter untuk mengembangkan aplikasi lintas platform (iOS & Android) yang efisien dan user-friendly. Anda akan bekerja dalam tim produk untuk merancang dan mengimplementasikan fitur baru.",
+    syaratKetentuan:
+      "Pengalaman mengembangkan aplikasi Flutter setidaknya 1 tahun. Memahami state management (Provider, BLoC, atau Riverpod). Pernah merilis aplikasi di Google Play Store atau App Store. Pengalaman dengan Firebase menjadi nilai tambah.",
  },
  {
    id: 6,
    posisi: "Data Analyst",
-    perusahaan: "InsightData",
-    lokasi: "Jakarta",
-    deskripsi: "Visualisasi data & dashboard BI",
-    tanggalDibuka: "2025-07-18",
+    deskripsi:
+      "Sebagai Data Analyst, Anda akan mengumpulkan, menganalisis, dan menginterpretasikan data untuk mendukung keputusan bisnis. Anda akan membuat dashboard interaktif, laporan rutin, dan memberikan insight yang bisa ditindaklanjuti kepada tim manajemen.",
+    syaratKetentuan:
+      "Pengalaman menggunakan SQL, Excel, dan tools visualisasi data seperti Power BI atau Tableau. Kemampuan analisis statistik dan storytelling data. Pengalaman dengan Python (pandas, numpy) merupakan keunggulan.",
  },
  {
    id: 7,
    posisi: "Machine Learning Engineer",
-    perusahaan: "AIWorks",
-    lokasi: "Bandung",
-    deskripsi: "Model prediktif dengan Python & TensorFlow",
-    tanggalDibuka: "2025-07-05",
+    deskripsi:
+      "Kami membuka posisi untuk insinyur Machine Learning yang akan mengembangkan dan mengimplementasikan model prediktif untuk mendukung berbagai kebutuhan bisnis. Anda akan bekerja dengan data dalam skala besar dan menerapkan teknik NLP, klasifikasi, dan rekomendasi.",
+    syaratKetentuan:
+      "Memiliki pengalaman minimal 1 tahun dalam ML project. Menguasai Python, scikit-learn, TensorFlow, atau PyTorch. Mampu memproses data besar dengan pandas, NumPy, dan Spark. Familiar dengan deployment model ML ke production.",
  },
  {
    id: 8,
    posisi: "System Administrator",
-    perusahaan: "NetSecure",
-    lokasi: "Depok",
-    deskripsi: "Maintain server Linux & firewall",
-    tanggalDibuka: "2025-07-08",
+    deskripsi:
+      "Posisi ini bertanggung jawab atas pengelolaan dan pemeliharaan sistem server Linux, jaringan internal, dan keamanan TI perusahaan. Termasuk setup server, monitoring, dan troubleshooting sistem operasional harian.",
+    syaratKetentuan:
+      "Berpengalaman mengelola server Linux (Ubuntu/CentOS), firewall, dan konfigurasi jaringan. Paham konsep load balancing, backup otomatis, dan disaster recovery. Kemampuan scripting (Bash, Python) menjadi nilai tambah.",
  },
  {
    id: 9,
    posisi: "Quality Assurance",
-    perusahaan: "TechTesters",
-    lokasi: "Semarang",
-    deskripsi: "Manual & automated testing",
-    tanggalDibuka: "2025-07-12",
+    deskripsi:
+      "Kami mencari QA Engineer untuk memastikan kualitas produk melalui pengujian manual maupun otomatis. Anda akan menulis test case, menjalankan regresi test, dan bekerja erat dengan tim developer untuk menemukan serta memperbaiki bug lebih awal.",
+    syaratKetentuan:
+      "Pengalaman dalam manual testing dan tools otomasi seperti Selenium, Cypress, atau Playwright. Memahami prinsip SDLC dan metodologi Agile. Mampu menulis dokumentasi QA dan membuat test report secara sistematis.",
  },
  {
    id: 10,
    posisi: "Product Manager",
-    perusahaan: "Inovasi Digital",
-    lokasi: "Remote",
-    deskripsi: "Riset, roadmap, dan koordinasi tim dev",
-    tanggalDibuka: "2025-07-01",
+    deskripsi:
+      "Sebagai Product Manager, Anda akan memimpin pengembangan produk mulai dari perencanaan, peluncuran, hingga peningkatan. Anda akan mengelola roadmap, prioritas fitur, dan bekerja lintas fungsi dengan tim desain, dev, dan bisnis.",
+    syaratKetentuan:
+      "Minimal 2 tahun pengalaman sebagai Product Manager. Memahami Agile/Scrum. Keterampilan komunikasi dan analisis yang kuat. Pengalaman dalam tools seperti Jira, Confluence, dan alat wireframing. Kemampuan mengambil keputusan berbasis data.",
  },
 ];