From fca06c707dbc16f17e11d841caf3c2c9e3d64285 Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Wed, 12 Mar 2025 11:30:17 +0800 Subject: [PATCH 1/2] fix ui tamplate --- src/app/dev/(user)/home/page.tsx | 6 +- src/app/emotion.tsx | 12 +- src/app/zCoba/home/page.tsx | 5 +- src/app/zCoba/home/v2_coba_tamplate.tsx | 159 ++++++++++++++++ src/app/zCoba/home/v2_tamplate.tsx | 152 --------------- src/app/zCoba/home/v2_view.tsx | 91 +++++++++ .../_global/component/button_create.tsx | 59 +++--- .../component/new/component_header.tsx | 105 +++++++++++ .../component/new/new_button_create.tsx | 51 +++++ .../_global/ui/V2_layout_tamplate.tsx | 151 +++++++++++++++ src/app_modules/_global/ui/new_ui_content.tsx | 1 - .../_global/ui/new_ui_tamplate.tsx | 2 +- .../_global/ui/ui_drawer_custom.tsx | 1 + .../home/component/new_footer_home.tsx | 149 +++++++-------- src/app_modules/home/v2_home_view.tsx | 2 +- src/app_modules/home/v3_home_view.tsx | 177 ++++++++++++++++++ src/app_modules/job/component/new_footer.tsx | 68 +++++++ .../job/main/beranda/view_beranda.tsx | 15 +- src/app_modules/job/main/new_layout.tsx | 90 ++------- 19 files changed, 949 insertions(+), 347 deletions(-) create mode 100644 src/app/zCoba/home/v2_coba_tamplate.tsx delete mode 100644 src/app/zCoba/home/v2_tamplate.tsx create mode 100644 src/app/zCoba/home/v2_view.tsx create mode 100644 src/app_modules/_global/component/new/component_header.tsx create mode 100644 src/app_modules/_global/component/new/new_button_create.tsx create mode 100644 src/app_modules/_global/ui/V2_layout_tamplate.tsx create mode 100644 src/app_modules/home/v3_home_view.tsx create mode 100644 src/app_modules/job/component/new_footer.tsx diff --git a/src/app/dev/(user)/home/page.tsx b/src/app/dev/(user)/home/page.tsx index 1ec18239..5d496d17 100644 --- a/src/app/dev/(user)/home/page.tsx +++ b/src/app/dev/(user)/home/page.tsx @@ -1,11 +1,11 @@ -import { HomeViewNew } from "@/app_modules/home"; -import { V2_View_Home } from "@/app_modules/home/v2_home_view"; +import { V3_View_Home } from "@/app_modules/home/v3_home_view"; export default async function PageHome() { return ( <> {/* */} - + {/* */} + ); } diff --git a/src/app/emotion.tsx b/src/app/emotion.tsx index 1dbffb99..22d5cd2f 100644 --- a/src/app/emotion.tsx +++ b/src/app/emotion.tsx @@ -2,10 +2,7 @@ import { MainColor } from "@/app_modules/_global/color"; // import './globals.css' import { CacheProvider } from "@emotion/react"; -import { - MantineProvider, - useEmotionCache -} from "@mantine/core"; +import { MantineProvider, useEmotionCache } from "@mantine/core"; import { Notifications } from "@mantine/notifications"; import { Provider } from "jotai"; import { useServerInsertedHTML } from "next/navigation"; @@ -33,11 +30,14 @@ export default function RootStyleRegistry({ HIPMI - + diff --git a/src/app/zCoba/home/page.tsx b/src/app/zCoba/home/page.tsx index 8320cd37..437474b1 100644 --- a/src/app/zCoba/home/page.tsx +++ b/src/app/zCoba/home/page.tsx @@ -1,9 +1,10 @@ -import { MobileAppLayout } from "./v2_tamplate"; +import ClientLayout from "./v2_coba_tamplate"; +import ViewV2 from "./v2_view"; export default async function Page() { return ( <> - + ); } diff --git a/src/app/zCoba/home/v2_coba_tamplate.tsx b/src/app/zCoba/home/v2_coba_tamplate.tsx new file mode 100644 index 00000000..58fec604 --- /dev/null +++ b/src/app/zCoba/home/v2_coba_tamplate.tsx @@ -0,0 +1,159 @@ +"use client"; + +import { AccentColor, MainColor } from "@/app_modules/_global/color"; +import { + ActionIcon, + BackgroundImage, // Import BackgroundImage dari Mantine + Box, + Button, + Container, + Group, + Text, + Title, +} from "@mantine/core"; +import { useDisclosure, useShallowEffect } from "@mantine/hooks"; +import { createStyles } from "@mantine/styles"; +import { IconBell, IconSearch } from "@tabler/icons-react"; +import { ReactNode, useEffect, useState } from "react"; + +// Styling langsung didefinisikan di dalam komponen +const useStyles = createStyles((theme) => ({ + pageContainer: { + display: "flex", + flexDirection: "column", + minHeight: "100dvh", // dynamic viewport height untuk mobile + width: "100%", + maxWidth: "500px", // Batasi lebar maksimum + margin: "0 auto", // Pusatkan layout + boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)", // Tambahkan shadow untuk efek mobile-like + backgroundColor: MainColor.darkblue, // Warna latar belakang fallback + + [`@media (max-width: 768px)`]: { + maxWidth: "100%", // Pada layar mobile, gunakan lebar penuh + boxShadow: "none", // Hilangkan shadow pada mobile + }, + }, + + header: { + position: "sticky", + top: 0, + width: "100%", + maxWidth: "500px", // Batasi lebar header sesuai container + margin: "0 auto", // Pusatkan header + backgroundColor: MainColor.darkblue, + boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)", + zIndex: 1000, // Pastikan z-index tinggi + transition: "all 0.3s ease", + color: MainColor.yellow, + }, + + scrolled: { + boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)", + }, + + headerContainer: { + height: "8vh", + display: "flex", + alignItems: "center", + padding: "0 16px", // Padding untuk mobile view + + [`@media (max-width: 768px)`]: { + height: "8vh", + }, + borderBottom: `1px solid ${AccentColor.blue}`, + borderBottomLeftRadius: "10px", + borderBottomRightRadius: "10px", + }, + + content: { + flex: 1, + width: "100%", + overflowY: "auto", // Izinkan scrolling pada konten + paddingBottom: "15vh", // Sesuaikan dengan tinggi footer + }, + + footer: { + width: "100%", + backgroundColor: MainColor.darkblue, + borderTop: `1px solid ${AccentColor.blue}`, + height: "10vh", // Tinggi footer + display: "flex", + alignItems: "center", + justifyContent: "center", + position: "fixed", + bottom: 0, + left: "50%", // Pusatkan footer + transform: "translateX(-50%)", // Pusatkan footer + maxWidth: "500px", // Batasi lebar footer + color: MainColor.white, + borderTopLeftRadius: "10px", + borderTopRightRadius: "10px", + }, +})); + +interface ClientLayoutProps { + children: ReactNode; +} + +export default function ClientLayout({ children }: ClientLayoutProps) { + const [scrolled, setScrolled] = useState(false); + const { classes, cx } = useStyles(); + + // Effect untuk mendeteksi scroll + useEffect(() => { + function handleScroll() { + if (window.scrollY > 10) { + setScrolled(true); + } else { + setScrolled(false); + } + } + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + return ( + + {/* Header - tetap di atas */} + + + + + + + Home Test + + + + + + + + {/* Konten utama - bisa di-scroll */} + + {children} + + + {/* Footer - tetap di bawah */} + + + + © 2025 Nama Perusahaan + + + + + + + + + ); +} diff --git a/src/app/zCoba/home/v2_tamplate.tsx b/src/app/zCoba/home/v2_tamplate.tsx deleted file mode 100644 index f6c75f78..00000000 --- a/src/app/zCoba/home/v2_tamplate.tsx +++ /dev/null @@ -1,152 +0,0 @@ -"use client"; - -import { AccentColor, MainColor } from "@/app_modules/_global/color"; -import { - ActionIcon, - Box, - Group, - Image, - Paper, - Text, - Title, -} from "@mantine/core"; -import { IconBell, IconChevronLeft, IconUserCircle } from "@tabler/icons-react"; - -export function MobileAppLayout() { - return ( - - - {/* Header */} - - {}} - > - - - - Test Template - - {}}> - - - - - {/* Konten Utama (Bisa Di-scroll) */} - - {/* Logo */} - logo - - {/* Dummy Content untuk Testing Scroll */} - {Array.from({ length: 20 }).map((_, i) => ( - - Item {i + 1} - - ))} - - - {/* Footer */} - - - {}}> - - - - Profile - - - - - - ); -} diff --git a/src/app/zCoba/home/v2_view.tsx b/src/app/zCoba/home/v2_view.tsx new file mode 100644 index 00000000..67717a6f --- /dev/null +++ b/src/app/zCoba/home/v2_view.tsx @@ -0,0 +1,91 @@ +// app/page.tsx +"use client"; + +import { + Badge, + Button, + Card, + Group, + Image, + Paper, + Stack, + Text, + Title, +} from "@mantine/core"; +import ClientLayout from "./v2_coba_tamplate"; + +export default function ViewV2() { + return ( + + + + Selamat Datang + + + + Aplikasi dengan layout yang dioptimalkan untuk tampilan mobile + + + + + {[...Array(5)].map((_, index) => ( + + + {`Produk + + + + Produk {index + 1} + + Baru + + + + + Deskripsi produk yang singkat dan padat untuk tampilan mobile. + Fokus pada informasi penting saja. + + + + + ))} + + + + + + Promo Spesial + + + Dapatkan diskon 20% untuk pembelian pertama + + + + + + + ); +} diff --git a/src/app_modules/_global/component/button_create.tsx b/src/app_modules/_global/component/button_create.tsx index 4f3e48fb..afcecc75 100644 --- a/src/app_modules/_global/component/button_create.tsx +++ b/src/app_modules/_global/component/button_create.tsx @@ -5,49 +5,62 @@ import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet"; -import { ActionIcon, Loader } from "@mantine/core"; +import { ActionIcon, createStyles, Loader } from "@mantine/core"; import { IconPencilPlus } from "@tabler/icons-react"; import { useRouter } from "next/navigation"; import { useState } from "react"; +const useStyles = createStyles((theme) => ({ + button: { + position: "fixed", // Menggunakan fixed untuk memastikan posisi tetap + zIndex: 10, // Pastikan z-index tinggi + bottom: "150px", // Jarak dari bawah + right: "20px", // Jarak dari kanan + transition: "0.5s", + border: `1px solid ${AccentColor.skyblue}`, + backgroundColor: AccentColor.softblue, + padding: 3, + // maxWidth: "500px", // Batasi lebar maksimum + // margin: "0 auto", // Pusatkan layout + borderRadius: "50%", + + // Media query untuk desktop + [`@media (min-width: 769px)`]: { + right: "calc(50% - 250px + 20px)", // Sesuaikan dengan lebar container (500px) + }, + }, +})); + export default function ComponentGlobal_CreateButton({ path, }: { path: string; }) { const router = useRouter(); + const { classes, cx } = useStyles(); const [isLoading, setLoading] = useState(false); return ( <> { - setLoading(true); router.push(path); }} > - {/* PAKE LOADING */} - {/* {isLoading ? ( - - ) : ( - - )} */} - - {/* GA PAKE LOADING */} diff --git a/src/app_modules/_global/component/new/component_header.tsx b/src/app_modules/_global/component/new/component_header.tsx new file mode 100644 index 00000000..2f0be7a3 --- /dev/null +++ b/src/app_modules/_global/component/new/component_header.tsx @@ -0,0 +1,105 @@ +import { ActionIcon, Box, Group, Title, Loader } from "@mantine/core"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { IconChevronLeft } from "@tabler/icons-react"; +import { AccentColor, MainColor } from "../../color"; + +export function Component_Header({ + title, + posotion, + // left button + hideButtonLeft, + iconLeft, + routerLeft, + customButtonLeft, + // right button + iconRight, + routerRight, + customButtonRight, + backgroundColor, +}: { + title: string; + posotion?: any; + // left button + hideButtonLeft?: boolean; + iconLeft?: any; + routerLeft?: any; + customButtonLeft?: React.ReactNode; + // right button + iconRight?: any; + routerRight?: any; + customButtonRight?: React.ReactNode; + backgroundColor?: string; +}) { + const router = useRouter(); + const [isLoading, setIsLoading] = useState(false); + const [isRightLoading, setRightLoading] = useState(false); + + return ( + <> + + {hideButtonLeft ? ( + + ) : customButtonLeft ? ( + customButtonLeft + ) : ( + { + setIsLoading(true); + routerLeft === undefined + ? router.back() + : router.push(routerLeft, { scroll: false }); + }} + > + {/* PAKE LOADING SAAT KLIK BACK */} + {/* {isLoading ? ( + + ) : iconLeft ? ( + iconLeft + ) : ( + + )} */} + + {/* GA PAKE LOADING SAAT KLIK BACK */} + {iconLeft ? iconLeft : } + + )} + + + {title} + + + {customButtonRight ? ( + customButtonRight + ) : iconRight === undefined ? ( + + ) : routerRight === undefined ? ( + {iconRight} + ) : ( + { + setRightLoading(true); + router.push(routerRight); + }} + > + {isRightLoading ? ( + + ) : ( + iconRight + )} + + )} + + + ); +} diff --git a/src/app_modules/_global/component/new/new_button_create.tsx b/src/app_modules/_global/component/new/new_button_create.tsx new file mode 100644 index 00000000..f6fba7c1 --- /dev/null +++ b/src/app_modules/_global/component/new/new_button_create.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { RouterJob } from "@/lib/router_hipmi/router_job"; +import { + AccentColor, + MainColor, +} from "@/app_modules/_global/color/color_pallet"; +import { ActionIcon, Loader } from "@mantine/core"; +import { IconPencilPlus } from "@tabler/icons-react"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +export default function Component_NewCreateButton({ path }: { path: string }) { + const router = useRouter(); + const [isLoading, setLoading] = useState(false); + + return ( + <> + { + setLoading(true); + router.push(path); + }} + > + {/* PAKE LOADING */} + {/* {isLoading ? ( + + ) : ( + + )} */} + + {/* GA PAKE LOADING */} + + + + ); +} diff --git a/src/app_modules/_global/ui/V2_layout_tamplate.tsx b/src/app_modules/_global/ui/V2_layout_tamplate.tsx new file mode 100644 index 00000000..fe6c511b --- /dev/null +++ b/src/app_modules/_global/ui/V2_layout_tamplate.tsx @@ -0,0 +1,151 @@ +"use client"; + +import { AccentColor, MainColor } from "@/app_modules/_global/color"; +import { + ActionIcon, + Box, + Button, + Container, + Group, + Text, + Title, +} from "@mantine/core"; +import { useDisclosure } from "@mantine/hooks"; +import { createStyles } from "@mantine/styles"; +import { IconBell, IconSearch } from "@tabler/icons-react"; +import { ReactNode, useEffect, useState } from "react"; + +// Styling langsung didefinisikan di dalam komponen +const useStyles = createStyles((theme) => ({ + pageContainer: { + display: "flex", + flexDirection: "column", + minHeight: "100dvh", // dynamic viewport height untuk mobile + width: "100%", + maxWidth: "500px", // Batasi lebar maksimum + margin: "0 auto", // Pusatkan layout + boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)", // Tambahkan shadow untuk efek mobile-like + backgroundColor: MainColor.darkblue, // Warna latar belakang fallback + + [`@media (max-width: 768px)`]: { + maxWidth: "100%", // Pada layar mobile, gunakan lebar penuh + boxShadow: "none", // Hilangkan shadow pada mobile + }, + }, + + header: { + position: "sticky", + top: 0, + width: "100%", + maxWidth: "500px", // Batasi lebar header sesuai container + margin: "0 auto", // Pusatkan header + backgroundColor: MainColor.darkblue, + boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)", + zIndex: 100, // Pastikan z-index tinggi + transition: "all 0.3s ease", + color: MainColor.yellow, + }, + + scrolled: { + boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)", + }, + + headerContainer: { + height: "8vh", + display: "flex", + alignItems: "center", + padding: "0 16px", // Padding untuk mobile view + + [`@media (max-width: 768px)`]: { + height: "8vh", + }, + borderBottom: `1px solid ${AccentColor.blue}`, + borderBottomLeftRadius: "10px", + borderBottomRightRadius: "10px", + }, + + content: { + flex: 1, + width: "100%", + overflowY: "hidden", // Izinkan scrolling pada konten + paddingBottom: "8vh", // Sesuaikan dengan tinggi footer + }, + + footer: { + width: "100%", + backgroundColor: MainColor.darkblue, + borderTop: `1px solid ${AccentColor.blue}`, + height: "10vh", // Tinggi footer + display: "flex", + alignItems: "center", + justifyContent: "center", + position: "fixed", + bottom: 0, + left: "50%", // Pusatkan footer + transform: "translateX(-50%)", // Pusatkan footer + maxWidth: "500px", // Batasi lebar footer + color: MainColor.white, + borderTopLeftRadius: "10px", + borderTopRightRadius: "10px", + }, +})); + +interface ClientLayoutProps { + children: ReactNode; +} + +export default function UI_NewLayoutTamplate({ children }: ClientLayoutProps) { + const { classes } = useStyles(); + + return {children}; +} + +export function UI_NewHeader({ children }: { children: ReactNode }) { + const { classes, cx } = useStyles(); + const [scrolled, setScrolled] = useState(false); + + // Effect untuk mendeteksi scroll + useEffect(() => { + function handleScroll() { + if (window.scrollY > 10) { + setScrolled(true); + } else { + setScrolled(false); + } + } + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + return ( + + + {children} + + + ); +} + +export function UI_NewChildren({ children }: { children: ReactNode }) { + const { classes } = useStyles(); + return ( + + + {children} + + + ); +} + +export function UI_NewFooter({ children }: { children: ReactNode }) { + const { classes } = useStyles(); + return ( + + {children} + + ); +} diff --git a/src/app_modules/_global/ui/new_ui_content.tsx b/src/app_modules/_global/ui/new_ui_content.tsx index a886cab5..e3e00a8e 100644 --- a/src/app_modules/_global/ui/new_ui_content.tsx +++ b/src/app_modules/_global/ui/new_ui_content.tsx @@ -11,7 +11,6 @@ export function NewUI_Content({ <> - - {listMenuHomeFooter.map((e) => ( -
- { - if (!dataUser) { - return null; - } else if (dataUser?.profile === undefined) { - router.push(RouterProfile.create, { scroll: false }); - } else if (e.link == "") { - ComponentGlobal_NotifikasiPeringatan("Cooming Soon"); - } else { - router.push(e.link, { scroll: false }); - } - }} + + {listMenuHomeFooter.map((e) => ( +
+ { + if (!dataUser) { + return null; + } else if (dataUser?.profile === undefined) { + router.push(RouterProfile.create, { scroll: false }); + } else if (e.link == "") { + ComponentGlobal_NotifikasiPeringatan("Cooming Soon"); + } else { + router.push(e.link, { scroll: false }); + } + }} + > + - - {e.icon} - - - {e.name} - - -
- ))} - -
- - {!dataUser ? ( - - ) : dataUser?.profile === undefined ? ( - - router.push(RouterProfile.create, { scroll: false }) - } - > - - - ) : ( - { - router.push( - RouterProfile.katalogOLD + `${dataUser?.profile}`, - { - scroll: false, - } - ); - }} - > - - - )} - - Profile + {e.icon} + + + {e.name}
- - + ))} + +
+ + {!dataUser ? ( + + ) : dataUser?.profile === undefined ? ( + + router.push(RouterProfile.create, { scroll: false }) + } + > + + + ) : ( + { + router.push(RouterProfile.katalogOLD + `${dataUser?.profile}`, { + scroll: false, + }); + }} + > + + + )} + + Profile + + +
+ ); } diff --git a/src/app_modules/home/v2_home_view.tsx b/src/app_modules/home/v2_home_view.tsx index 6a0092af..c29df2d1 100644 --- a/src/app_modules/home/v2_home_view.tsx +++ b/src/app_modules/home/v2_home_view.tsx @@ -7,7 +7,6 @@ import { useShallowEffect } from "@mantine/hooks"; import { useAtom } from "jotai"; import { useState } from "react"; import { NewUI_Header } from "../_global/ui/new_ui_header"; -import { NewUI_Tamplate } from "../_global/ui/new_ui_tamplate"; import { gs_notifikasi_kategori_app } from "../notifikasi/lib"; import { apiGetNotifikasiHome, apiGetDataHome } from "./fun/get/api_home"; import { RouterProfile } from "@/lib/router_hipmi/router_katalog"; @@ -21,6 +20,7 @@ import BodyHome from "./component/body_home"; import { NewUI_Footer } from "../_global/ui/new_ui_footer"; import NewFooterHome from "./component/new_footer_home"; import { NewUI_Content } from "../_global/ui/new_ui_content"; +import { NewUI_Tamplate } from "../_global/ui/new_ui_tamplate"; export function V2_View_Home() { const [countNtf, setCountNtf] = useState(null); diff --git a/src/app_modules/home/v3_home_view.tsx b/src/app_modules/home/v3_home_view.tsx new file mode 100644 index 00000000..4295db15 --- /dev/null +++ b/src/app_modules/home/v3_home_view.tsx @@ -0,0 +1,177 @@ +"use client"; + +import { gs_user_ntf } from "@/lib/global_state"; +import global_limit from "@/lib/limit"; +import { RouterProfile } from "@/lib/router_hipmi/router_katalog"; +import { RouterNotifikasi } from "@/lib/router_hipmi/router_notifikasi"; +import { RouterUserSearch } from "@/lib/router_hipmi/router_user_search"; +import { clientLogger } from "@/util/clientLogger"; +import { ActionIcon, Indicator, Text } from "@mantine/core"; +import { useShallowEffect } from "@mantine/hooks"; +import { IconBell, IconUserSearch } from "@tabler/icons-react"; +import { useAtom } from "jotai"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { MainColor } from "../_global/color"; +import { Component_Header } from "../_global/component/new/component_header"; +import UI_NewLayoutTamplate, { + UI_NewChildren, + UI_NewFooter, + UI_NewHeader, +} from "../_global/ui/V2_layout_tamplate"; +import { gs_notifikasi_kategori_app } from "../notifikasi/lib"; +import BodyHome from "./component/body_home"; +import NewFooterHome from "./component/new_footer_home"; +import { apiGetDataHome, apiGetNotifikasiHome } from "./fun/get/api_home"; + +export function V3_View_Home() { + const [countNtf, setCountNtf] = useState(null); + const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf); + const [dataUser, setDataUser] = useState(null); + const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app); + const router = useRouter(); + + useShallowEffect(() => { + if (countNtf != null) { + setCountNtf(countNtf + newUserNtf); + setNewUserNtf(0); + } + }, [newUserNtf]); + + useShallowEffect(() => { + hanlderLoadData(); + }, []); + + async function hanlderLoadData() { + try { + const listLoadData = [ + global_limit(() => onLoadNotifikasi()), + global_limit(() => cekUserLogin()), + ]; + + await Promise.all(listLoadData); + } catch (error) { + clientLogger.error("Error handler load data", error); + } + } + + async function onLoadNotifikasi() { + try { + const response = await apiGetNotifikasiHome(); + if (response && response.success) { + setCountNtf(response.data); + } + } catch (error) { + clientLogger.error("Error load notifikasi", error); + } + } + + async function cekUserLogin() { + try { + const response = await apiGetDataHome({ + path: "?cat=cek_profile", + }); + if (response && response.success) { + setDataUser(response.data); + } else { + setDataUser(null); + } + } catch (error) { + clientLogger.error("Error get data home", error); + setDataUser(null); + } + } + + return ( + <> + + + + + + ) : dataUser?.profile === undefined ? ( + { + router.push(RouterProfile.create, { scroll: false }); + }} + > + + + ) : ( + { + router.push(RouterUserSearch.main, { scroll: false }); + }} + > + + + ) + } + customButtonRight={ + !dataUser && !countNtf ? ( + + + + ) : dataUser?.profile === undefined ? ( + { + router.push(RouterProfile.create, { scroll: false }); + }} + > + + + ) : ( + { + setCategoryPage("Semua"); + router.push( + RouterNotifikasi.categoryApp({ name: "semua" }), + { + scroll: false, + } + ); + }} + > + {countNtf != null && countNtf > 0 ? ( + + {countNtf > 99 ? "99+" : countNtf} + + } + > + + + ) : ( + + )} + + ) + } + /> + + + + + + + + + + + ); +} diff --git a/src/app_modules/job/component/new_footer.tsx b/src/app_modules/job/component/new_footer.tsx new file mode 100644 index 00000000..c2d8816e --- /dev/null +++ b/src/app_modules/job/component/new_footer.tsx @@ -0,0 +1,68 @@ +import { MainColor } from "@/app_modules/_global/color"; +import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global"; +import { RouterJob } from "@/lib/router_hipmi/router_job"; +import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core"; +import { useDisclosure } from "@mantine/hooks"; +import { IconHome, IconReservedLine, IconHistory } from "@tabler/icons-react"; +import { useAtom } from "jotai"; +import { useState } from "react"; +import { gs_job_hot_menu } from "../global_state"; +import { useRouter } from "next/navigation"; + +export function NewFooter() { + const router = useRouter(); + const [hotMenuId, setHotMenuId] = useAtom(gs_job_hot_menu); + const [isLoading, setLoading] = useState(false); + const [opened, handlers] = useDisclosure(false); + + const listFooter = [ + { + id: 1, + name: "Beranda", + path: RouterJob.beranda, + icon: , + }, + + { + id: 2, + name: "Status", + path: RouterJob.status({ id: "1" }), + icon: , + }, + { + id: 3, + name: "Arsip", + path: RouterJob.arsip, + icon: , + }, + ]; + return ( + <> + + {listFooter.map((e, i) => ( + + + e.path === "" + ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon") + : (router.replace(e.path), setHotMenuId(e.id)) + } + > + {e.icon} + + + {e.name} + + + ))} + + + ); +} \ No newline at end of file diff --git a/src/app_modules/job/main/beranda/view_beranda.tsx b/src/app_modules/job/main/beranda/view_beranda.tsx index cff0ab5c..edda6ea4 100644 --- a/src/app_modules/job/main/beranda/view_beranda.tsx +++ b/src/app_modules/job/main/beranda/view_beranda.tsx @@ -4,9 +4,9 @@ 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 { Box, Center, Loader, Stack, TextInput } from "@mantine/core"; +import { ActionIcon, Box, Center, Loader, Stack, TextInput } from "@mantine/core"; import { useShallowEffect } from "@mantine/hooks"; -import { IconSearch } from "@tabler/icons-react"; +import { IconPlus, IconSearch } from "@tabler/icons-react"; import { useAtom } from "jotai"; import _ from "lodash"; import { ScrollOnly } from "next-scroll-loader"; @@ -19,6 +19,7 @@ import ComponentJob_BerandaCardView from "../../component/beranda/card_view"; import { MODEL_JOB } from "../../model/interface"; import { apiGetJob } from "../../component/api_fetch_job"; import { clientLogger } from "@/util/clientLogger"; +import Component_NewCreateButton from "@/app_modules/_global/component/new/new_button_create"; export default function Job_ViewBeranda() { const [data, setData] = useState([]); @@ -115,6 +116,8 @@ export default function Job_ViewBeranda() { /> )} + {/* */} + - + {/* + + */} + + {!data?.length && isLoading ? ( ) : _.isEmpty(data) ? ( @@ -139,7 +146,7 @@ export default function Job_ViewBeranda() { ) : ( // --- Main component --- // (
diff --git a/src/app_modules/job/main/new_layout.tsx b/src/app_modules/job/main/new_layout.tsx index 98e51167..0c8d8c46 100644 --- a/src/app_modules/job/main/new_layout.tsx +++ b/src/app_modules/job/main/new_layout.tsx @@ -1,87 +1,31 @@ "use client"; -import { MainColor } from "@/app_modules/_global/color/color_pallet"; -import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan"; -import { NewUI_Content } from "@/app_modules/_global/ui/new_ui_content"; -import { NewUI_Footer } from "@/app_modules/_global/ui/new_ui_footer"; -import { NewUI_Header } from "@/app_modules/_global/ui/new_ui_header"; -import { NewUI_Tamplate } from "@/app_modules/_global/ui/new_ui_tamplate"; +import { Component_Header } from "@/app_modules/_global/component/new/component_header"; +import UI_NewLayoutTamplate, { + UI_NewChildren, + UI_NewFooter, + UI_NewHeader, +} from "@/app_modules/_global/ui/V2_layout_tamplate"; import { RouterHome } from "@/lib/router_hipmi/router_home"; -import { RouterJob } from "@/lib/router_hipmi/router_job"; -import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core"; -import { IconHistory, IconHome, IconReservedLine } from "@tabler/icons-react"; -import { useAtom } from "jotai"; -import { useRouter } from "next/navigation"; -import React, { useState } from "react"; -import { gs_job_hot_menu } from "../global_state"; +import React from "react"; +import { NewFooter } from "../component/new_footer"; export default function NewLayoutJob_Main({ children, }: { children: React.ReactNode; }) { - const router = useRouter(); - const [hotMenuId, setHotMenuId] = useAtom(gs_job_hot_menu); - const [isLoading, setLoading] = useState(false); - - const listFooter = [ - { - id: 1, - name: "Beranda", - path: RouterJob.beranda, - icon: , - }, - - { - id: 2, - name: "Status", - path: RouterJob.status({ id: "1" }), - icon: , - }, - { - id: 3, - name: "Arsip", - path: RouterJob.arsip, - icon: , - }, - ]; - return ( <> - - - - {children} - - - - {listFooter.map((e, i) => ( - - - e.path === "" - ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon") - : (router.replace(e.path), setHotMenuId(e.id)) - } - > - {e.icon} - - - {e.name} - - - ))} - - - - + + + + + {children} + + + + ); } From 32d622ba965dbf0ca098a26ffe0693d1bd0386ad Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Wed, 12 Mar 2025 11:30:38 +0800 Subject: [PATCH 2/2] chore(release): 1.2.76 --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2915a17..64a70eb9 100644 --- a/CHANGELOG.md +++ b/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.76](https://github.com/bipproduction/hipmi/compare/v1.2.75...v1.2.76) (2025-03-12) + ## [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) diff --git a/package.json b/package.json index cc8a7799..946560e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hipmi", - "version": "1.2.75", + "version": "1.2.76", "private": true, "prisma": { "seed": "bun prisma/seed.ts"