fix tamplate ui
This commit is contained in:
@@ -1,9 +1,11 @@
|
|||||||
import { HomeViewNew } from "@/app_modules/home";
|
import { HomeViewNew } from "@/app_modules/home";
|
||||||
|
import { V2_View_Home } from "@/app_modules/home/v2_home_view";
|
||||||
|
|
||||||
export default async function PageHome() {
|
export default async function PageHome() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<HomeViewNew />
|
{/* <HomeViewNew /> */}
|
||||||
|
<V2_View_Home />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
import { MainColor } from "@/app_modules/_global/color";
|
||||||
// import './globals.css'
|
// import './globals.css'
|
||||||
import { CacheProvider } from "@emotion/react";
|
import { CacheProvider } from "@emotion/react";
|
||||||
import {
|
import {
|
||||||
@@ -30,9 +31,13 @@ export default function RootStyleRegistry({
|
|||||||
return (
|
return (
|
||||||
<html lang="en" data-theme="light">
|
<html lang="en" data-theme="light">
|
||||||
<head>
|
<head>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
<title>HIPMI</title>
|
<title>HIPMI</title>
|
||||||
</head>
|
</head>
|
||||||
<body suppressHydrationWarning={true}>
|
<body suppressHydrationWarning={true} style={{backgroundColor: MainColor.black}}>
|
||||||
<CacheProvider value={cache}>
|
<CacheProvider value={cache}>
|
||||||
<MantineProvider withGlobalStyles withNormalizeCSS>
|
<MantineProvider withGlobalStyles withNormalizeCSS>
|
||||||
<Notifications position="top-center" containerWidth={300} />
|
<Notifications position="top-center" containerWidth={300} />
|
||||||
|
|||||||
@@ -1,17 +1,9 @@
|
|||||||
import { Test_Children } from "./test_children";
|
import { MobileAppLayout } from "./v2_tamplate";
|
||||||
import Test_FooterHome from "./test_footer";
|
|
||||||
import Test_LayoutHeaderTamplate from "./test_header";
|
|
||||||
import { Test_Tamplate } from "./test_tamplate";
|
|
||||||
|
|
||||||
export default async function Page() {
|
export default async function Page() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Test_Tamplate
|
<MobileAppLayout />
|
||||||
header={<Test_LayoutHeaderTamplate title="Test scroll" />}
|
|
||||||
// footer={<Test_FooterHome />}
|
|
||||||
>
|
|
||||||
<Test_Children />
|
|
||||||
</Test_Tamplate>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
26
src/app/zCoba/home/v2_children.tsx
Normal file
26
src/app/zCoba/home/v2_children.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Box, ScrollArea } from "@mantine/core";
|
||||||
|
|
||||||
|
export function V2_Children({
|
||||||
|
children,
|
||||||
|
height,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
height?: number;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
style={{ zIndex: 0 }}
|
||||||
|
px={"md"}
|
||||||
|
h={height ? "82vh" : "92vh"}
|
||||||
|
pos={"static"}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{/* <ScrollArea h={"100%"} px={"md"} bg={"cyan"}>
|
||||||
|
</ScrollArea> */}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
src/app/zCoba/home/v2_header.tsx
Normal file
42
src/app/zCoba/home/v2_header.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { MainColor } from "@/app_modules/_global/color";
|
||||||
|
import { ActionIcon, Box, Group, Title } from "@mantine/core";
|
||||||
|
import { IconBell, IconChevronLeft } from "@tabler/icons-react";
|
||||||
|
|
||||||
|
export function V2_Header() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
h={"8vh"}
|
||||||
|
style={{
|
||||||
|
zIndex: 10,
|
||||||
|
alignContent: "center",
|
||||||
|
}}
|
||||||
|
w={"100%"}
|
||||||
|
pos={"sticky"}
|
||||||
|
top={0}
|
||||||
|
bg={MainColor.darkblue}
|
||||||
|
>
|
||||||
|
<Group h={"100%"} position={"apart"} px={"md"}>
|
||||||
|
<ActionIcon
|
||||||
|
c={MainColor.white}
|
||||||
|
variant="transparent"
|
||||||
|
radius={"xl"}
|
||||||
|
onClick={() => {}}
|
||||||
|
>
|
||||||
|
<IconChevronLeft />
|
||||||
|
</ActionIcon>
|
||||||
|
|
||||||
|
<Title order={5} c={MainColor.yellow}>
|
||||||
|
Test Tamplate
|
||||||
|
</Title>
|
||||||
|
|
||||||
|
<ActionIcon c={"white"} variant="transparent" onClick={() => {}}>
|
||||||
|
<IconBell />
|
||||||
|
</ActionIcon>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
127
src/app/zCoba/home/v2_home_view.tsx
Normal file
127
src/app/zCoba/home/v2_home_view.tsx
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||||
|
import {
|
||||||
|
listMenuHomeBody,
|
||||||
|
menuHomeJob,
|
||||||
|
} from "@/app_modules/home/component/list_menu_home";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Stack,
|
||||||
|
SimpleGrid,
|
||||||
|
Paper,
|
||||||
|
ActionIcon,
|
||||||
|
Group,
|
||||||
|
Image,
|
||||||
|
Text,
|
||||||
|
} from "@mantine/core";
|
||||||
|
import { IconUserSearch } from "@tabler/icons-react";
|
||||||
|
|
||||||
|
export function V2_HomeView() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box>
|
||||||
|
<Image
|
||||||
|
height={140}
|
||||||
|
fit={"cover"}
|
||||||
|
alt="logo"
|
||||||
|
src={"/aset/home/home-hipmi-new.png"}
|
||||||
|
styles={{
|
||||||
|
imageWrapper: {
|
||||||
|
border: `2px solid ${AccentColor.blue}`,
|
||||||
|
borderRadius: "10px 10px 10px 10px",
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
borderRadius: "8px 8px 8px 8px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{Array.from(new Array(2)).map((e, i) => (
|
||||||
|
<Stack my={"sm"} key={i}>
|
||||||
|
<SimpleGrid cols={2} spacing="md">
|
||||||
|
{listMenuHomeBody.map((e, i) => (
|
||||||
|
<Paper
|
||||||
|
key={e.id}
|
||||||
|
h={150}
|
||||||
|
bg={MainColor.darkblue}
|
||||||
|
style={{
|
||||||
|
borderRadius: "10px 10px 10px 10px",
|
||||||
|
border: `2px solid ${AccentColor.blue}`,
|
||||||
|
}}
|
||||||
|
onClick={() => {}}
|
||||||
|
>
|
||||||
|
<Stack align="center" justify="center" h={"100%"}>
|
||||||
|
<ActionIcon
|
||||||
|
size={50}
|
||||||
|
variant="transparent"
|
||||||
|
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||||
|
>
|
||||||
|
{e.icon}
|
||||||
|
</ActionIcon>
|
||||||
|
<Text
|
||||||
|
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||||
|
fz={"xs"}
|
||||||
|
>
|
||||||
|
{e.name}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
</Paper>
|
||||||
|
))}
|
||||||
|
</SimpleGrid>
|
||||||
|
|
||||||
|
{/* Job View */}
|
||||||
|
<Paper
|
||||||
|
p={"md"}
|
||||||
|
w={"100%"}
|
||||||
|
bg={MainColor.darkblue}
|
||||||
|
style={{
|
||||||
|
borderRadius: "10px 10px 10px 10px",
|
||||||
|
border: `2px solid ${AccentColor.blue}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack onClick={() => {}}>
|
||||||
|
<Group>
|
||||||
|
<ActionIcon
|
||||||
|
variant="transparent"
|
||||||
|
size={40}
|
||||||
|
c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
|
||||||
|
>
|
||||||
|
{menuHomeJob.icon}
|
||||||
|
</ActionIcon>
|
||||||
|
<Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
|
||||||
|
{menuHomeJob.name}
|
||||||
|
</Text>
|
||||||
|
</Group>
|
||||||
|
<SimpleGrid cols={2} spacing="md">
|
||||||
|
{Array.from({ length: 2 }).map((e, i) => (
|
||||||
|
<Stack key={i}>
|
||||||
|
<Group spacing={"xs"}>
|
||||||
|
<Stack h={"100%"} align="center" justify="flex-start">
|
||||||
|
<IconUserSearch size={20} color={MainColor.white} />
|
||||||
|
</Stack>
|
||||||
|
<Stack spacing={0} w={"60%"}>
|
||||||
|
<Text
|
||||||
|
lineClamp={1}
|
||||||
|
fz={"sm"}
|
||||||
|
c={MainColor.yellow}
|
||||||
|
fw={"bold"}
|
||||||
|
>
|
||||||
|
nama {i}
|
||||||
|
</Text>
|
||||||
|
<Text fz={"sm"} c={MainColor.white} lineClamp={2}>
|
||||||
|
judulnya {i}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
</Group>
|
||||||
|
</Stack>
|
||||||
|
))}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Paper>
|
||||||
|
</Stack>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
152
src/app/zCoba/home/v2_tamplate.tsx
Normal file
152
src/app/zCoba/home/v2_tamplate.tsx
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/app_modules/_global/ui/new_ui_content.tsx
Normal file
23
src/app_modules/_global/ui/new_ui_content.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { Box } from "@mantine/core";
|
||||||
|
|
||||||
|
export function NewUI_Content({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
28
src/app_modules/_global/ui/new_ui_footer.tsx
Normal file
28
src/app_modules/_global/ui/new_ui_footer.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { Box } from "@mantine/core";
|
||||||
|
import { AccentColor } from "../color";
|
||||||
|
|
||||||
|
export function NewUI_Footer({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
123
src/app_modules/_global/ui/new_ui_header.tsx
Normal file
123
src/app_modules/_global/ui/new_ui_header.tsx
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
import { ActionIcon, Box, Group, Title, Loader } from "@mantine/core";
|
||||||
|
import { AccentColor, MainColor } from "../color";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { IconChevronLeft } from "@tabler/icons-react";
|
||||||
|
|
||||||
|
export function NewUI_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 (
|
||||||
|
<>
|
||||||
|
<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",
|
||||||
|
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
|
||||||
|
margin: "0 auto", // Pusatkan di tengah layar desktop
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
src/app_modules/_global/ui/new_ui_tamplate.tsx
Normal file
39
src/app_modules/_global/ui/new_ui_tamplate.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { BackgroundImage, Box } from "@mantine/core";
|
||||||
|
import { MainColor } from "../color";
|
||||||
|
|
||||||
|
export function NewUI_Tamplate({ children }: { children: React.ReactNode }) {
|
||||||
|
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",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
110
src/app_modules/home/component/new_footer_home.tsx
Normal file
110
src/app_modules/home/component/new_footer_home.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import { APIs } from "@/lib";
|
||||||
|
import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
|
||||||
|
import { MainColor } from "@/app_modules/_global/color";
|
||||||
|
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
|
||||||
|
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
|
||||||
|
import {
|
||||||
|
ActionIcon,
|
||||||
|
Box,
|
||||||
|
Center,
|
||||||
|
SimpleGrid,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
} from "@mantine/core";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Home_ComponentAvatarProfile } from "./comp_avatar_profile";
|
||||||
|
import { listMenuHomeFooter } from "./list_menu_home";
|
||||||
|
import { IconUser } from "@tabler/icons-react";
|
||||||
|
import { IconUserCircle } from "@tabler/icons-react";
|
||||||
|
|
||||||
|
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 });
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
</Center>
|
||||||
|
</SimpleGrid>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
171
src/app_modules/home/v2_home_view.tsx
Normal file
171
src/app_modules/home/v2_home_view.tsx
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { gs_user_ntf } from "@/lib/global_state";
|
||||||
|
import global_limit from "@/lib/limit";
|
||||||
|
import { clientLogger } from "@/util/clientLogger";
|
||||||
|
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";
|
||||||
|
import { RouterNotifikasi } from "@/lib/router_hipmi/router_notifikasi";
|
||||||
|
import { RouterUserSearch } from "@/lib/router_hipmi/router_user_search";
|
||||||
|
import { ActionIcon, Image, Indicator, Text } from "@mantine/core";
|
||||||
|
import { IconUserSearch, IconBell } from "@tabler/icons-react";
|
||||||
|
import { AccentColor, MainColor } from "../_global/color";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
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";
|
||||||
|
|
||||||
|
export function V2_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 (
|
||||||
|
<>
|
||||||
|
<NewUI_Tamplate>
|
||||||
|
<NewUI_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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<NewUI_Content>
|
||||||
|
<BodyHome dataUser={dataUser} />
|
||||||
|
</NewUI_Content>
|
||||||
|
|
||||||
|
<NewUI_Footer>
|
||||||
|
<NewFooterHome dataUser={dataUser} />
|
||||||
|
</NewUI_Footer>
|
||||||
|
</NewUI_Tamplate>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user