wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui tamplate

Browse Source
This commit is contained in:
Bagasbanuna02
2025-03-12 11:30:17 +08:00
parent 509b26894c
commit fca06c707d
19 changed files with 949 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/dev/(user)/home/page.tsx
View File

@@ -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 (
<>
{/* <HomeViewNew /> */}
<V2_View_Home />
{/* <V2_View_Home /> */}
<V3_View_Home />
</>
);
}

12
src/app/emotion.tsx
View File

@@ -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({
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>HIPMI</title>
</head>
<body suppressHydrationWarning={true} style={{backgroundColor: MainColor.black}}>
<body
suppressHydrationWarning={true}
style={{ backgroundColor: MainColor.black }}
>
<CacheProvider value={cache}>
<MantineProvider withGlobalStyles withNormalizeCSS>
<Notifications position="top-center" containerWidth={300} />

5
src/app/zCoba/home/page.tsx
View File

@@ -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 (
<>
<MobileAppLayout />
<ViewV2 />
</>
);
}

159
src/app/zCoba/home/v2_coba_tamplate.tsx Normal file
View File

@@ -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<boolean>(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 (
<Box className={classes.pageContainer}>
{/* Header - tetap di atas */}
<Box
className={cx(classes.header, { [classes.scrolled]: scrolled })}
component="header"
>
<Container size="xl" className={classes.headerContainer}>
<Group position="apart" w={"100%"}>
<ActionIcon>
<IconSearch />
</ActionIcon>
<Title order={4}>Home Test</Title>
<ActionIcon>
<IconBell />
</ActionIcon>
</Group>
</Container>
</Box>
{/* Konten utama - bisa di-scroll */}
<Box className={classes.content}>
<Container>{children}</Container>
</Box>
{/* Footer - tetap di bawah */}
<Box className={classes.footer} component="footer">
<Container size="xl">
<Group position="apart" py="md">
<Text size="sm">© 2025 Nama Perusahaan</Text>
<Group spacing="xs">
<Button variant="subtle" size="xs">
Privasi
</Button>
<Button variant="subtle" size="xs">
Syarat
</Button>
</Group>
</Group>
</Container>
</Box>
</Box>
);
}

152
src/app/zCoba/home/v2_tamplate.tsx
View File

@@ -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 (
<Box
style={{
width: "100%",
height: "100vh",
overflow: "hidden",
backgroundColor: MainColor.black,
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
}}
>
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1, // Pastikan background di belakang konten
backgroundImage: "url(/aset/global/main_background.png)",
backgroundSize: "cover",
backgroundPosition: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto",
}}
>
{/* Header */}
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
height: "8vh",
zIndex: 100,
backgroundColor: MainColor.darkblue,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "0 16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<ActionIcon
c={MainColor.white}
variant="transparent"
radius="xl"
onClick={() => {}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={MainColor.yellow}>
Test Template
</Title>
<ActionIcon c="white" variant="transparent" onClick={() => {}}>
<IconBell />
</ActionIcon>
</Box>
{/* Konten Utama (Bisa Di-scroll) */}
<Box
style={{
position: "fixed",
top: "8vh", // Mulai di bawah header
bottom: "10vh", // Berakhir di atas footer
left: 0,
right: 0,
overflowY: "auto", // Bisa di-scroll
padding: "16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
{/* Logo */}
<Image
src={"/aset/home/home-hipmi-new.png"}
alt="logo"
height={140}
fit="cover"
style={{
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
marginBottom: "16px",
}}
/>
{/* Dummy Content untuk Testing Scroll */}
{Array.from({ length: 20 }).map((_, i) => (
<Paper
key={i}
p="md"
bg={MainColor.darkblue}
style={{
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
marginBottom: "8px",
}}
>
<Text c={MainColor.white}>Item {i + 1}</Text>
</Paper>
))}
</Box>
{/* Footer */}
<Box
style={{
position: "fixed",
bottom: 0,
left: 0,
right: 0,
height: "10vh",
zIndex: 100,
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<Group spacing="xl">
<ActionIcon variant="transparent" onClick={() => {}}>
<IconUserCircle color="white" />
</ActionIcon>
<Text fz={10} c={MainColor.white}>
Profile
</Text>
</Group>
</Box>
</Box>
</Box>
);
}

91
src/app/zCoba/home/v2_view.tsx Normal file
View File

@@ -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 (
<ClientLayout>
<Stack spacing="xl" c={"white"}>
<Title order={1} ta="center" my="lg" size="h2">
Selamat Datang
</Title>
<Text size="md" ta="center" mb="lg">
Aplikasi dengan layout yang dioptimalkan untuk tampilan mobile
</Text>
<Stack spacing="md">
{[...Array(5)].map((_, index) => (
<Card opacity={0.3} key={index} shadow="sm" padding="md" radius="md" withBorder>
<Card.Section>
<Image
src={`/api/placeholder/400/200`}
height={160}
alt={`Produk ${index + 1}`}
/>
</Card.Section>
<Group position="apart" mt="md" mb="xs">
<Text fw={500}>Produk {index + 1}</Text>
<Badge color="blue" variant="light">
Baru
</Badge>
</Group>
<Text size="sm" color="dimmed" lineClamp={2}>
Deskripsi produk yang singkat dan padat untuk tampilan mobile.
Fokus pada informasi penting saja.
</Text>
<Button
variant="light"
color="blue"
fullWidth
mt="md"
radius="md"
>
Lihat Detail
</Button>
</Card>
))}
</Stack>
<Paper
shadow="md"
p="md"
withBorder
radius="md"
style={{
backgroundImage: "linear-gradient(45deg, #228be6, #4c6ef5)",
color: "white",
}}
>
<Text fw={700} size="lg" ta="center">
Promo Spesial
</Text>
<Text ta="center" my="sm">
Dapatkan diskon 20% untuk pembelian pertama
</Text>
<Button variant="white" color="blue" fullWidth>
Klaim Sekarang
</Button>
</Paper>
</Stack>
</ClientLayout>
);
}

59
src/app_modules/_global/component/button_create.tsx
View File

@@ -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 (
<>
<ActionIcon
// bg={"blue"}
// variant="light"
radius={"xl"}
className={classes.button}
size={"xl"}
style={{
position: "absolute",
zIndex: 1,
bottom: 100,
right: 30,
transition: "0.5s",
border: `1px solid ${AccentColor.skyblue}`,
backgroundColor: AccentColor.softblue,
padding: 3,
}}
// radius={"xl"}
// size={"xl"}
// style={{
// position: "fixed", // Menggunakan fixed untuk memastikan posisi tetap
// zIndex: 1000, // Pastikan z-index tinggi
// bottom: "20px", // Jarak dari bawah
// right: "20px", // Jarak dari kanan
// transition: "0.5s",
// border: `1px solid ${AccentColor.skyblue}`,
// backgroundColor: AccentColor.softblue,
// padding: 3,
// }}
onClick={() => {
setLoading(true);
router.push(path);
}}
>
{/* PAKE LOADING */}
{/* {isLoading ? (
<Loader color={AccentColor.blue} size={25} />
) : (
<IconPencilPlus color="white" />
)} */}
{/* GA PAKE LOADING */}
<IconPencilPlus color={MainColor.white} />
</ActionIcon>
</>

105
src/app_modules/_global/component/new/component_header.tsx Normal file
View File

@@ -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 (
<>
<Group
w={"100%"}
h={"100%"}
position={posotion ? posotion : "apart"}
px={"md"}
>
{hideButtonLeft ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : customButtonLeft ? (
customButtonLeft
) : (
<ActionIcon
c={MainColor.white}
variant="transparent"
radius={"xl"}
onClick={() => {
setIsLoading(true);
routerLeft === undefined
? router.back()
: router.push(routerLeft, { scroll: false });
}}
>
{/* PAKE LOADING SAAT KLIK BACK */}
{/* {isLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : iconLeft ? (
iconLeft
) : (
<IconChevronLeft />
)} */}
{/* GA PAKE LOADING SAAT KLIK BACK */}
{iconLeft ? iconLeft : <IconChevronLeft />}
</ActionIcon>
)}
<Title order={5} c={MainColor.yellow}>
{title}
</Title>
{customButtonRight ? (
customButtonRight
) : iconRight === undefined ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : routerRight === undefined ? (
<Box>{iconRight}</Box>
) : (
<ActionIcon
c={"white"}
variant="transparent"
onClick={() => {
setRightLoading(true);
router.push(routerRight);
}}
>
{isRightLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
iconRight
)}
</ActionIcon>
)}
</Group>
</>
);
}

51
src/app_modules/_global/component/new/new_button_create.tsx Normal file
View File

@@ -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 (
<>
<ActionIcon
radius={"xl"}
size={"xl"}
style={{
position: "absolute",
zIndex: 1,
bottom: 100,
right: 30,
transition: "0.5s",
border: `1px solid ${AccentColor.skyblue}`,
backgroundColor: AccentColor.softblue,
padding: 3,
maxWidth: "500px", // Batasi lebar maksimum
margin: "0 auto", // Pusatkan layout
}}
onClick={() => {
setLoading(true);
router.push(path);
}}
>
{/* PAKE LOADING */}
{/* {isLoading ? (
<Loader color={AccentColor.blue} size={25} />
) : (
<IconPencilPlus color="white" />
)} */}
{/* GA PAKE LOADING */}
<IconPencilPlus color={MainColor.white} />
</ActionIcon>
</>
);
}

151
src/app_modules/_global/ui/V2_layout_tamplate.tsx Normal file
View File

@@ -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 <Box className={classes.pageContainer}>{children}</Box>;
}
export function UI_NewHeader({ children }: { children: ReactNode }) {
const { classes, cx } = useStyles();
const [scrolled, setScrolled] = useState<boolean>(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 (
<Box
className={cx(classes.header, { [classes.scrolled]: scrolled })}
component="header"
>
<Container size="xl" className={classes.headerContainer}>
{children}
</Container>
</Box>
);
}
export function UI_NewChildren({ children }: { children: ReactNode }) {
const { classes } = useStyles();
return (
<Box className={classes.content}>
<Container size="xl" py="md">
{children}
</Container>
</Box>
);
}
export function UI_NewFooter({ children }: { children: ReactNode }) {
const { classes } = useStyles();
return (
<Box className={classes.footer} component="footer">
{children}
</Box>
);
}

1
src/app_modules/_global/ui/new_ui_content.tsx
View File

@@ -11,7 +11,6 @@ export function NewUI_Content({
<>
<Box
style={{
position: "fixed",
top: "8vh", // Mulai di bawah header
bottom: "10vh", // Berakhir di atas footer
left: 0,

2
src/app_modules/_global/ui/new_ui_tamplate.tsx
View File

@@ -8,7 +8,7 @@ export function NewUI_Tamplate({ children }: { children: React.ReactNode }) {
<Box
style={{
width: "100%",
height: "100vh",
minHeight: "100dvh",
overflow: "hidden",
backgroundColor: MainColor.darkblue,
position: "relative",

1
src/app_modules/_global/ui/ui_drawer_custom.tsx
View File

@@ -44,6 +44,7 @@ export default function UIGlobal_DrawerCustom({
left: 0,
right: 0,
width: 500,
zIndex:10
},
body: {
backgroundColor: AccentColor.darkblue,

149
src/app_modules/home/component/new_footer_home.tsx
View File

@@ -21,90 +21,77 @@ export default function NewFooterHome({ dataUser }: { dataUser: any | null }) {
const router = useRouter();
return (
<Box
style={{
zIndex: 99,
borderRadius: "20px 20px 0px 0px",
}}
w={"100%"}
bottom={0}
h={"9vh"}
>
<SimpleGrid cols={listMenuHomeFooter.length + 1}>
{listMenuHomeFooter.map((e) => (
<Center h={"9vh"} key={e.id}>
<Stack
align="center"
spacing={0}
onClick={() => {
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 });
}
}}
<SimpleGrid cols={listMenuHomeFooter.length + 1} w={"100%"}>
{listMenuHomeFooter.map((e) => (
<Center key={e.id}>
<Stack
align="center"
spacing={0}
onClick={() => {
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 });
}
}}
>
<ActionIcon
radius={"xl"}
c={e.link === "" ? "gray" : MainColor.white}
variant="transparent"
>
<ActionIcon
radius={"xl"}
c={e.link === "" ? "gray" : MainColor.white}
variant="transparent"
>
{e.icon}
</ActionIcon>
<Text
lineClamp={1}
c={e.link === "" ? "gray" : MainColor.white}
fz={12}
>
{e.name}
</Text>
</Stack>
</Center>
))}
<Center h={"9vh"}>
<Stack align="center" spacing={2}>
{!dataUser ? (
<CustomSkeleton height={25} width={25} radius={"xl"} />
) : dataUser?.profile === undefined ? (
<ActionIcon
variant={"transparent"}
onClick={() =>
router.push(RouterProfile.create, { scroll: false })
}
>
<IconUserCircle color="white" />
</ActionIcon>
) : (
<ActionIcon
variant={"transparent"}
onClick={() => {
router.push(
RouterProfile.katalogOLD + `${dataUser?.profile}`,
{
scroll: false,
}
);
}}
>
<Home_ComponentAvatarProfile
url={APIs.GET({
fileId: dataUser?.imageId as string,
size: "50",
})}
/>
</ActionIcon>
)}
<Text fz={10} c={MainColor.white}>
Profile
{e.icon}
</ActionIcon>
<Text
lineClamp={1}
c={e.link === "" ? "gray" : MainColor.white}
fz={12}
>
{e.name}
</Text>
</Stack>
</Center>
</SimpleGrid>
</Box>
))}
<Center>
<Stack align="center" spacing={2}>
{!dataUser ? (
<CustomSkeleton height={25} width={25} radius={"xl"} />
) : dataUser?.profile === undefined ? (
<ActionIcon
variant={"transparent"}
onClick={() =>
router.push(RouterProfile.create, { scroll: false })
}
>
<IconUserCircle color="white" />
</ActionIcon>
) : (
<ActionIcon
variant={"transparent"}
onClick={() => {
router.push(RouterProfile.katalogOLD + `${dataUser?.profile}`, {
scroll: false,
});
}}
>
<Home_ComponentAvatarProfile
url={APIs.GET({
fileId: dataUser?.imageId as string,
size: "50",
})}
/>
</ActionIcon>
)}
<Text fz={10} c={MainColor.white}>
Profile
</Text>
</Stack>
</Center>
</SimpleGrid>
);
}

2
src/app_modules/home/v2_home_view.tsx
View File

@@ -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<number | null>(null);

177
src/app_modules/home/v3_home_view.tsx Normal file
View File

@@ -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<number | null>(null);
const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
const [dataUser, setDataUser] = useState<any | null>(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 (
<>
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header
title="HIPMI"
customButtonLeft={
!dataUser && !countNtf ? (
<ActionIcon radius={"xl"} variant={"transparent"}>
<IconUserSearch color={"gray"} />
</ActionIcon>
) : dataUser?.profile === undefined ? (
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
router.push(RouterProfile.create, { scroll: false });
}}
>
<IconUserSearch color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
router.push(RouterUserSearch.main, { scroll: false });
}}
>
<IconUserSearch color={MainColor.white} />
</ActionIcon>
)
}
customButtonRight={
!dataUser && !countNtf ? (
<ActionIcon radius={"xl"} variant={"transparent"}>
<IconBell color={"gray"} />
</ActionIcon>
) : dataUser?.profile === undefined ? (
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
router.push(RouterProfile.create, { scroll: false });
}}
>
<IconBell color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon
variant="transparent"
disabled={countNtf == null}
onClick={() => {
setCategoryPage("Semua");
router.push(
RouterNotifikasi.categoryApp({ name: "semua" }),
{
scroll: false,
}
);
}}
>
{countNtf != null && countNtf > 0 ? (
<Indicator
processing
color={MainColor.yellow}
label={
<Text fz={10} c={MainColor.darkblue}>
{countNtf > 99 ? "99+" : countNtf}
</Text>
}
>
<IconBell color={MainColor.white} />
</Indicator>
) : (
<IconBell color={MainColor.white} />
)}
</ActionIcon>
)
}
/>
</UI_NewHeader>
<UI_NewChildren>
<BodyHome dataUser={dataUser} />
</UI_NewChildren>
<UI_NewFooter>
<NewFooterHome dataUser={dataUser} />
</UI_NewFooter>
</UI_NewLayoutTamplate>
</>
);
}

68
src/app_modules/job/component/new_footer.tsx Normal file
View File

@@ -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: <IconHome />,
},
{
id: 2,
name: "Status",
path: RouterJob.status({ id: "1" }),
icon: <IconReservedLine />,
},
{
id: 3,
name: "Arsip",
path: RouterJob.arsip,
icon: <IconHistory />,
},
];
return (
<>
<SimpleGrid cols={3} h={"9vh"} mx={"xs"} w={"100%"}>
{listFooter.map((e, i) => (
<Stack key={i} align="center" justify="center" spacing={0}>
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={hotMenuId === e.id ? MainColor.yellow : "white"}
onClick={() =>
e.path === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.replace(e.path), setHotMenuId(e.id))
}
>
{e.icon}
</ActionIcon>
<Text
c={hotMenuId === e.id ? MainColor.yellow : "white"}
fz={"xs"}
lineClamp={1}
>
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>
</>
);
}

15
src/app_modules/job/main/beranda/view_beranda.tsx
View File

@@ -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<MODEL_JOB[]>([]);
@@ -115,6 +116,8 @@ export default function Job_ViewBeranda() {
/>
)}
{/* <Component_NewCreateButton path={RouterJob.create} /> */}
<ComponentGlobal_CreateButton path={RouterJob.create} />
<TextInput
@@ -131,7 +134,11 @@ export default function Job_ViewBeranda() {
}}
/>
<Box mb={"xl"}>
{/* <ActionIcon>
<IconPlus />
</ActionIcon> */}
<Box >
{!data?.length && isLoading ? (
<Job_ComponentSkeletonBeranda />
) : _.isEmpty(data) ? (
@@ -139,7 +146,7 @@ export default function Job_ViewBeranda() {
) : (
// --- Main component --- //
<ScrollOnly
height="75vh"
height="80vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />

90
src/app_modules/job/main/new_layout.tsx
View File

@@ -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: <IconHome />,
},
{
id: 2,
name: "Status",
path: RouterJob.status({ id: "1" }),
icon: <IconReservedLine />,
},
{
id: 3,
name: "Arsip",
path: RouterJob.arsip,
icon: <IconHistory />,
},
];
return (
<>
<NewUI_Tamplate>
<NewUI_Header title="Job ni" routerLeft={RouterHome.main_home} />
<NewUI_Content isScroll="unset">{children}</NewUI_Content>
<NewUI_Footer>
<SimpleGrid cols={3} h={"9vh"} mx={"xs"} w={"100%"}>
{listFooter.map((e, i) => (
<Stack key={i} align="center" justify="center" spacing={0}>
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={hotMenuId === e.id ? MainColor.yellow : "white"}
onClick={() =>
e.path === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.replace(e.path), setHotMenuId(e.id))
}
>
{e.icon}
</ActionIcon>
<Text
c={hotMenuId === e.id ? MainColor.yellow : "white"}
fz={"xs"}
lineClamp={1}
>
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>
</NewUI_Footer>
</NewUI_Tamplate>
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Job" routerLeft={RouterHome.main_home} />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
<UI_NewFooter>
<NewFooter />
</UI_NewFooter>
</UI_NewLayoutTamplate>
</>
);
}