Merge pull request #369 from bipproduction/bagas/7-mar-25

Fix ui job: scroll

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.2.75](https://github.com/bipproduction/hipmi/compare/v1.2.74...v1.2.75) (2025-03-07)
+
 ## [1.2.74](https://github.com/bipproduction/hipmi/compare/v1.2.73...v1.2.74) (2025-03-07)
 
 ## [1.2.73](https://github.com/bipproduction/hipmi/compare/v1.2.72...v1.2.73) (2025-03-06)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.2.74",
+  "version": "1.2.75",
   "private": true,
   "prisma": {
     "seed": "bun prisma/seed.ts"

src/app/api/job/route.ts

@@ -10,7 +10,7 @@ export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
     const search = searchParams.get("search");
     const page = searchParams.get("page");
-    const dataTake = 5;
+    const dataTake = 10
     const dataSkip = Number(page) * dataTake - dataTake;
 
     if (!page) {

src/app_modules/_global/ui/new_ui_content.tsx

@@ -1,6 +1,12 @@
 import { Box } from "@mantine/core";
 
-export function NewUI_Content({ children }: { children: React.ReactNode }) {
+export function NewUI_Content({
+  children,
+  isScroll,
+}: {
+  children: React.ReactNode;
+  isScroll?: React.CSSProperties["overflowY"];
+}) {
   return (
     <>
       <Box
@@ -10,7 +16,7 @@ export function NewUI_Content({ children }: { children: React.ReactNode }) {
           bottom: "10vh", // Berakhir di atas footer
           left: 0,
           right: 0,
-          overflowY: "auto", // Bisa di-scroll
+          overflowY: isScroll ? isScroll : "hidden", // Bisa di-scroll
           padding: "16px",
           maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
           margin: "0 auto", // Pusatkan di tengah layar desktop

src/app_modules/_global/ui/new_ui_tamplate.tsx

@@ -14,7 +14,7 @@ export function NewUI_Tamplate({ children }: { children: React.ReactNode }) {
         position: "relative",
         maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
         margin: "0 auto", // Pusatkan di tengah layar desktop
-        border: "1px solid #ccc", // Garis tepi untuk visualisasi
+        // border: "1px solid #ccc", // Garis tepi untuk visualisasi
       }}
     >
       <BackgroundImage

src/app_modules/home/v2_home_view.tsx

@@ -158,7 +158,7 @@ export function V2_View_Home() {
           }
         />
 
-        <NewUI_Content>
+        <NewUI_Content isScroll="auto">
           <BodyHome dataUser={dataUser} />
         </NewUI_Content>
 

src/app_modules/job/main/arsip/ui_arsip.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { RouterJob } from "@/lib/router_hipmi/router_job";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { Box, Center, Loader } from "@mantine/core";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
-import { useState } from "react";
-import ComponentJob_CardStatus from "../../component/card/card_view";
-import { job_getAllArsipById } from "../../fun/get/get_all_arsip";
-import { MODEL_JOB } from "../../model/interface";
-
-export function Job_UI_Arsip({ listData }: { listData: MODEL_JOB[] }) {
-  const [data, setData] = useState(listData);
-  const [activePage, setActivePage] = useState(1);
-
-  return (
-    <>
-      {_.isEmpty(data) ? (
-        <ComponentGlobal_IsEmptyData />
-      ) : (
-        // --- Main component --- //
-        <Box>
-          <ScrollOnly
-            height="85vh"
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <Loader color={"yellow"} />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await job_getAllArsipById({
-                page: activePage + 1,
-              });
-
-              setActivePage((val) => val + 1);
-
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentJob_CardStatus
-                data={item}
-                path={RouterJob.detail_arsip}
-              />
-            )}
-          </ScrollOnly>
-        </Box>
-      )}
-    </>
-  );
-}

src/app_modules/job/main/arsip/view_arsip.tsx

@@ -5,7 +5,7 @@ import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { RouterJob } from "@/lib/router_hipmi/router_job";
 import { clientLogger } from "@/util/clientLogger";
-import { Box, Stack } from "@mantine/core";
+import { Box, Center, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
@@ -86,8 +86,12 @@ export default function Job_ViewArsip() {
         // --- Main component --- //
         <Box>
           <ScrollOnly
-            height="85vh"
+            height="80vh"
-            renderLoading={() => <ComponentGlobal_Loader />}
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader />
+              </Center>
+            )}
             data={data}
             setData={setData}
             moreData={handleMoreData}

src/app_modules/job/main/beranda/view_beranda.tsx

@@ -4,7 +4,7 @@ import { gs_jobTiggerBeranda } from "@/lib/global_state";
 import { RouterJob } from "@/lib/router_hipmi/router_job";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { Center, Loader, Stack, TextInput } from "@mantine/core";
+import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconSearch } from "@tabler/icons-react";
 import { useAtom } from "jotai";
@@ -102,7 +102,7 @@ export default function Job_ViewBeranda() {
 
   return (
     <>
-      <Stack spacing={30}>
+      <Stack spacing={"sm"}>
         {isShowUpdate && (
           <Job_ComponentButtonUpdateBeranda
             onSetIsNewPost={(val) => {
@@ -125,12 +125,13 @@ export default function Job_ViewBeranda() {
           }}
           radius={"xl"}
           icon={<IconSearch />}
-          placeholder="Pekerjaan apa yang anda cari ?"
+          placeholder="Pekerjaan apa yang anda cari ni?"
           onChange={(val) => {
             onSearch(val.currentTarget.value);
           }}
         />
 
+        <Box mb={"xl"}>
           {!data?.length && isLoading ? (
             <Job_ComponentSkeletonBeranda />
           ) : _.isEmpty(data) ? (
@@ -151,6 +152,7 @@ export default function Job_ViewBeranda() {
               {(item) => <ComponentJob_BerandaCardView data={item} />}
             </ScrollOnly>
           )}
+        </Box>
       </Stack>
     </>
   );

src/app_modules/job/main/new_layout.tsx

@@ -49,9 +49,9 @@ export default function NewLayoutJob_Main({
   return (
     <>
       <NewUI_Tamplate>
-        <NewUI_Header title="Job" routerLeft={RouterHome.main_home} />
+        <NewUI_Header title="Job ni" routerLeft={RouterHome.main_home} />
 
-        <NewUI_Content>{children}</NewUI_Content>
+        <NewUI_Content isScroll="unset">{children}</NewUI_Content>
 
         <NewUI_Footer>
           <SimpleGrid cols={3} h={"9vh"} mx={"xs"} w={"100%"}>
@@ -82,17 +82,6 @@ export default function NewLayoutJob_Main({
         </NewUI_Footer>
       </NewUI_Tamplate>
 
-      {/* <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate
-            title="Job"
-            routerLeft={RouterHome.main_home}
-          />
-        }
-        footer={}
-      >
-        {children}
-      </UIGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/job/main/status/ui_status.tsx

@@ -25,7 +25,6 @@ export default function Job_UiStatus() {
   return (
     <>
       <Tabs
-        mt={1}
         color="yellow"
         variant="pills"
         radius={"xl"}