371 lines
11 KiB
TypeScript
371 lines
11 KiB
TypeScript
"use client";
|
|
import {
|
|
ActionIcon,
|
|
AppShell,
|
|
Avatar,
|
|
Box,
|
|
Center,
|
|
Flex,
|
|
Footer,
|
|
Grid,
|
|
Group,
|
|
Header,
|
|
Loader,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
ThemeIcon,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { HomeView } from ".";
|
|
import {
|
|
IconUserSearch,
|
|
IconAward,
|
|
IconQrcode,
|
|
IconUserCircle,
|
|
} from "@tabler/icons-react";
|
|
import { Logout } from "../auth";
|
|
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
|
import { MODEL_USER } from "./model/interface";
|
|
import React, { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
|
|
import { ComponentGlobal_NotifikasiBerhasil } from "../component_global/notif_global/notifikasi_berhasil";
|
|
import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
|
|
|
|
export default function HomeLayout({
|
|
dataUser,
|
|
children,
|
|
}: {
|
|
dataUser: MODEL_USER;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState(dataUser);
|
|
const [loadingProfil, setLoadingProfile] = useState(false);
|
|
const [loadingUS, setLoadingUS] = useState(false);
|
|
const listFooter = [
|
|
{
|
|
id: 1,
|
|
name: "Temukan user",
|
|
icon: <IconUserSearch />,
|
|
link: ``,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Profile",
|
|
icon: <IconUserCircle />,
|
|
link: RouterProfile.katalog,
|
|
},
|
|
];
|
|
|
|
const Compo_Footer = (
|
|
<Footer height={70} w={"100%"} bg={"black"}>
|
|
<Grid p={"xs"}>
|
|
<Grid.Col span={"auto"}>
|
|
{loadingUS ? (
|
|
<Center>
|
|
<Loader />
|
|
</Center>
|
|
) : (
|
|
<Center>
|
|
<Stack
|
|
align="center"
|
|
spacing={0}
|
|
onClick={() => {
|
|
if (user?.Profile === null) {
|
|
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
|
|
} else {
|
|
setLoadingUS(true);
|
|
// router.push(RouterProfile.katalog + `${user.Profile.id}`);
|
|
router.push(RouterUserSearch.main);
|
|
}
|
|
}}
|
|
>
|
|
<ActionIcon variant={"transparent"}>
|
|
<IconUserSearch color="white" />
|
|
</ActionIcon>
|
|
<Text fz={"xs"} c={"white"}>
|
|
Temukan pengguna
|
|
</Text>
|
|
</Stack>
|
|
</Center>
|
|
)}
|
|
</Grid.Col>
|
|
<Grid.Col span={"auto"}>
|
|
{loadingProfil ? (
|
|
<Center>
|
|
<Loader />
|
|
</Center>
|
|
) : (
|
|
<Center>
|
|
<Stack
|
|
align="center"
|
|
spacing={2}
|
|
onClick={() => {
|
|
setLoadingProfile(true);
|
|
if (user?.Profile === null) {
|
|
router.push(RouterProfile.create + `${user.id}`);
|
|
} else {
|
|
router.push(RouterProfile.katalog + `${user.Profile.id}`);
|
|
}
|
|
}}
|
|
>
|
|
<ActionIcon variant={"transparent"}>
|
|
{user?.Profile === null ? (
|
|
<IconUserCircle color="white" />
|
|
) : (
|
|
<Avatar
|
|
radius={"xl"}
|
|
size={25}
|
|
sx={{
|
|
borderStyle: "solid",
|
|
borderWidth: "0.5px",
|
|
borderColor: "white",
|
|
}}
|
|
src={
|
|
RouterProfile.api_foto_profile +
|
|
`${user?.Profile.imagesId}`
|
|
}
|
|
/>
|
|
)}
|
|
</ActionIcon>
|
|
<Text fz={"xs"} c={"white"}>
|
|
Profile
|
|
</Text>
|
|
</Stack>
|
|
</Center>
|
|
)}
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Footer>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Box>
|
|
{/* Header */}
|
|
<Box
|
|
style={{
|
|
zIndex: 99,
|
|
}}
|
|
w={"100%"}
|
|
bg={"black"}
|
|
pos={"sticky"}
|
|
top={0}
|
|
h={50}
|
|
>
|
|
<Center h={"100%"}>
|
|
<Title order={4} c={"white"}>
|
|
HIPMI
|
|
</Title>
|
|
</Center>
|
|
</Box>
|
|
|
|
{/* Children */}
|
|
<Box p={"sm"} pos={"static"}>
|
|
<Stack>
|
|
{children}
|
|
<Box
|
|
style={{
|
|
height: "10vh",
|
|
}}
|
|
></Box>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Footer */}
|
|
<Box
|
|
style={{
|
|
zIndex: 99,
|
|
}}
|
|
w={"100%"}
|
|
bg={"black"}
|
|
pos={"fixed"}
|
|
bottom={0}
|
|
h={"10vh"}
|
|
>
|
|
<SimpleGrid cols={2}>
|
|
<Center h={"10vh"}>
|
|
{loadingUS ? (
|
|
<Center>
|
|
<Loader />
|
|
</Center>
|
|
) : (
|
|
<Center>
|
|
<Stack
|
|
align="center"
|
|
spacing={0}
|
|
onClick={() => {
|
|
if (user?.Profile === null) {
|
|
ComponentGlobal_NotifikasiPeringatan(
|
|
"Lengkapi Profile"
|
|
);
|
|
} else {
|
|
setLoadingUS(true);
|
|
// router.push(RouterProfile.katalog + `${user.Profile.id}`);
|
|
router.push(RouterUserSearch.main);
|
|
}
|
|
}}
|
|
>
|
|
<ActionIcon variant={"transparent"}>
|
|
<IconUserSearch color="white" />
|
|
</ActionIcon>
|
|
<Text fz={"xs"} c={"white"}>
|
|
Temukan pengguna
|
|
</Text>
|
|
</Stack>
|
|
</Center>
|
|
)}
|
|
</Center>
|
|
|
|
<Center h={"10vh"}>
|
|
{loadingProfil ? (
|
|
<Center>
|
|
<Loader />
|
|
</Center>
|
|
) : (
|
|
<Center>
|
|
<Stack
|
|
align="center"
|
|
spacing={2}
|
|
onClick={() => {
|
|
setLoadingProfile(true);
|
|
if (user?.Profile === null) {
|
|
router.push(RouterProfile.create + `${user.id}`);
|
|
} else {
|
|
router.push(
|
|
RouterProfile.katalog + `${user.Profile.id}`
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
<ActionIcon variant={"transparent"}>
|
|
{user?.Profile === null ? (
|
|
<IconUserCircle color="white" />
|
|
) : (
|
|
<Avatar
|
|
radius={"xl"}
|
|
size={25}
|
|
sx={{
|
|
borderStyle: "solid",
|
|
borderWidth: "0.5px",
|
|
borderColor: "white",
|
|
}}
|
|
src={
|
|
RouterProfile.api_foto_profile +
|
|
`${user?.Profile.imagesId}`
|
|
}
|
|
/>
|
|
)}
|
|
</ActionIcon>
|
|
<Text fz={"xs"} c={"white"}>
|
|
Profile
|
|
</Text>
|
|
</Stack>
|
|
</Center>
|
|
)}
|
|
</Center>
|
|
</SimpleGrid>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<AppShell
|
|
header={
|
|
<Header height={50} bg={"dark"}>
|
|
<Group position="center" align="center" h={50} p={"sm"}>
|
|
<Text color="white" fw={"bold"}>
|
|
HIPMI
|
|
</Text>
|
|
{/* <Logout/> */}
|
|
</Group>
|
|
</Header>
|
|
}
|
|
footer={
|
|
<Footer height={70} bg={"dark"}>
|
|
<Grid p={"xs"} bg={"blue"}>
|
|
<Grid.Col
|
|
bg={"red"}
|
|
span={"auto"}
|
|
onClick={() => {
|
|
if (user?.Profile === null) {
|
|
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
|
|
} else {
|
|
setLoadingUS(true);
|
|
// router.push(RouterProfile.katalog + `${user.Profile.id}`);
|
|
router.push(RouterUserSearch.main);
|
|
}
|
|
}}
|
|
>
|
|
{loadingUS ? (
|
|
<Center>
|
|
<Loader />
|
|
</Center>
|
|
) : (
|
|
<Stack align="center" spacing={0}>
|
|
<ActionIcon variant={"transparent"}>
|
|
<IconUserSearch color="white" />
|
|
</ActionIcon>
|
|
<Text fz={"xs"} c={"white"}>
|
|
Temukan pengguna
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Grid.Col>
|
|
<Grid.Col
|
|
bg={"cyan"}
|
|
span={"auto"}
|
|
onClick={() => {
|
|
setLoadingProfile(true);
|
|
if (user?.Profile === null) {
|
|
router.push(RouterProfile.create + `${user.id}`);
|
|
} else {
|
|
router.push(RouterProfile.katalog + `${user.Profile.id}`);
|
|
}
|
|
}}
|
|
>
|
|
{loadingProfil ? (
|
|
<Center>
|
|
<Loader />
|
|
</Center>
|
|
) : (
|
|
<Stack align="center" spacing={2}>
|
|
<ActionIcon variant={"transparent"}>
|
|
{user?.Profile === null ? (
|
|
<IconUserCircle color="white" />
|
|
) : (
|
|
<Avatar
|
|
radius={"xl"}
|
|
size={30}
|
|
sx={{
|
|
borderStyle: "solid",
|
|
borderWidth: "0.5px",
|
|
borderColor: "white",
|
|
}}
|
|
src={
|
|
RouterProfile.api_foto_profile +
|
|
`${user?.Profile.imagesId}`
|
|
}
|
|
/>
|
|
)}
|
|
</ActionIcon>
|
|
<Text fz={"xs"} c={"white"}>
|
|
Profile
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Footer>
|
|
}
|
|
>
|
|
{children}
|
|
</AppShell>
|
|
</>
|
|
);
|
|
}
|