Merge pull request #160 from bipproduction/amalia/05-des-24
Amalia/05 des 24
This commit is contained in:
Bagasbanuna02
193
src/app_modules/home/component/body_home.tsx
Normal file
193
src/app_modules/home/component/body_home.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
|
||||
import { ActionIcon, Box, Group, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconUserSearch } from "@tabler/icons-react";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { apiGetDataHome } from "../fun/get/api_home";
|
||||
import { listMenuHomeBody, menuHomeJob } from "./list_menu_home";
|
||||
|
||||
export default function BodyHome() {
|
||||
const router = useRouter()
|
||||
const [dataUser, setDataUser] = useState<any>({})
|
||||
const [dataJob, setDataJob] = useState<any[]>([])
|
||||
const [loadingJob, setLoadingJob] = useState(true)
|
||||
|
||||
useShallowEffect(() => {
|
||||
cekUserLogin()
|
||||
getHomeJob()
|
||||
}, []);
|
||||
|
||||
|
||||
async function cekUserLogin() {
|
||||
try {
|
||||
const response = await apiGetDataHome("?cat=cek_profile")
|
||||
if (response.success) {
|
||||
setDataUser(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function getHomeJob() {
|
||||
try {
|
||||
setLoadingJob(true)
|
||||
const response = await apiGetDataHome("?cat=job")
|
||||
if (response.success) {
|
||||
setDataJob(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingJob(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper
|
||||
radius={"xl"}
|
||||
mb={"xs"}
|
||||
style={{
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
}}
|
||||
>
|
||||
<Image radius={"lg"} alt="logo" src={"/aset/home/home-hipmi-new.png"} />
|
||||
</Paper>
|
||||
|
||||
<Stack my={"sm"}>
|
||||
<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={() => {
|
||||
if (dataUser.profile === undefined || dataUser?.profile === null) {
|
||||
return ComponentGlobal_NotifikasiPeringatan(
|
||||
"Lengkapi Profile"
|
||||
);
|
||||
} else {
|
||||
if (e.link === "") {
|
||||
return ComponentGlobal_NotifikasiPeringatan(
|
||||
"Cooming Soon !!"
|
||||
);
|
||||
} else {
|
||||
router.push(e.link, { scroll: false });
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack align="center" justify="center" h={"100%"}>
|
||||
<ActionIcon
|
||||
size={50}
|
||||
variant="transparent"
|
||||
c={e.link === "" ? "gray.3" : "white"}
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text c={e.link === "" ? "gray.3" : "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={() => {
|
||||
if (dataUser.profile === undefined || dataUser?.profile === null) {
|
||||
return ComponentGlobal_NotifikasiPeringatan(
|
||||
"Lengkapi Profile"
|
||||
);
|
||||
} else {
|
||||
if (menuHomeJob.link === "") {
|
||||
return ComponentGlobal_NotifikasiPeringatan(
|
||||
"Cooming Soon !!"
|
||||
);
|
||||
} else {
|
||||
return router.push(menuHomeJob.link, { scroll: false });
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Group>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
size={40}
|
||||
c={menuHomeJob.link === "" ? "gray.3" : "white"}
|
||||
>
|
||||
{menuHomeJob.icon}
|
||||
</ActionIcon>
|
||||
<Text c={menuHomeJob.link === "" ? "gray.3" : "white"}>
|
||||
{menuHomeJob.name}
|
||||
</Text>
|
||||
</Group>
|
||||
{
|
||||
loadingJob ?
|
||||
Array(2)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Box key={i} mb={"md"}>
|
||||
<Skeleton height={10} mt={0} radius="xl" width={"50%"} />
|
||||
<Skeleton height={10} mt={10} radius="xl" />
|
||||
<Skeleton height={10} mt={10} radius="xl" />
|
||||
</Box>
|
||||
))
|
||||
: _.isEmpty(dataJob) ?
|
||||
(<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />)
|
||||
: (
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
{dataJob.map((e, i) => (
|
||||
<Stack key={e.id}>
|
||||
<Group spacing={"xs"}>
|
||||
<Stack h={"100%"} align="center" justify="flex-start">
|
||||
<IconUserSearch size={20} color="white" />
|
||||
</Stack>
|
||||
<Stack spacing={0} w={"60%"}>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
fz={"sm"}
|
||||
c={MainColor.yellow}
|
||||
fw={"bold"}
|
||||
>
|
||||
{e?.Author.username}
|
||||
</Text>
|
||||
<Text fz={"sm"} c={"white"} lineClamp={2}>
|
||||
{e?.title}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
)
|
||||
}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
113
src/app_modules/home/component/footer_home.tsx
Normal file
113
src/app_modules/home/component/footer_home.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { APIs } from "@/app/lib";
|
||||
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
|
||||
import { ActionIcon, Box, Center, SimpleGrid, Stack, Text } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconUserCircle } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { apiGetDataHome } from "../fun/get/api_home";
|
||||
import { Home_ComponentAvatarProfile } from "./comp_avatar_profile";
|
||||
import { listMenuHomeFooter } from "./list_menu_home";
|
||||
|
||||
export default function FooterHome() {
|
||||
const router = useRouter()
|
||||
const [dataUser, setDataUser] = useState<any>({})
|
||||
|
||||
useShallowEffect(() => {
|
||||
cekUserLogin();
|
||||
}, []);
|
||||
|
||||
|
||||
async function cekUserLogin() {
|
||||
try {
|
||||
const response = await apiGetDataHome("?cat=cek_profile")
|
||||
if (response.success) {
|
||||
setDataUser(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
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.profile === undefined || dataUser?.profile === null) {
|
||||
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
|
||||
} else {
|
||||
if (e.link == "") {
|
||||
ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
|
||||
} else {
|
||||
router.push(e.link, { scroll: false })
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ActionIcon
|
||||
radius={"xl"}
|
||||
c={e.link === "" ? "gray" : "white"}
|
||||
variant="transparent"
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
c={e.link === "" ? "gray" : "white"}
|
||||
fz={12}
|
||||
>
|
||||
{e.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
))}
|
||||
|
||||
<Center h={"9vh"}>
|
||||
<Stack
|
||||
align="center"
|
||||
spacing={2}
|
||||
onClick={() => {
|
||||
if (dataUser.profile === undefined || dataUser?.profile === null) {
|
||||
router.push(RouterProfile.create, { scroll: false });
|
||||
} else {
|
||||
router.push(
|
||||
RouterProfile.katalogOLD + `${dataUser?.profile}`,
|
||||
{ scroll: false }
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ActionIcon variant={"transparent"}>
|
||||
{dataUser.profile === undefined || dataUser?.profile === null
|
||||
?
|
||||
<IconUserCircle color="white" />
|
||||
:
|
||||
<Home_ComponentAvatarProfile
|
||||
url={APIs.GET({
|
||||
fileId: dataUser?.imageId as string,
|
||||
size: "50"
|
||||
})}
|
||||
/>
|
||||
}
|
||||
</ActionIcon>
|
||||
<Text fz={10} c={"white"}>
|
||||
Profile
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
67
src/app_modules/home/component/list_menu_home.tsx
Normal file
67
src/app_modules/home/component/list_menu_home.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { RouterColab } from '@/app/lib/router_hipmi/router_colab';
|
||||
import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
|
||||
import { RouterForum } from '@/app/lib/router_hipmi/router_forum';
|
||||
import { RouterJob } from '@/app/lib/router_hipmi/router_job';
|
||||
import { RouterMap } from '@/app/lib/router_hipmi/router_map';
|
||||
import { RouterVote } from '@/app/lib/router_hipmi/router_vote';
|
||||
import { IconAffiliate, IconBriefcase, IconHeartHandshake, IconMap2, IconMessages, IconPackageImport, IconPresentation, IconShoppingBag } from '@tabler/icons-react';
|
||||
|
||||
|
||||
// yg ada di footer home
|
||||
export const listMenuHomeFooter = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Forums",
|
||||
icon: <IconMessages />,
|
||||
link: RouterForum.splash,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "MarketPlace",
|
||||
icon: <IconShoppingBag />,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Business Maps",
|
||||
icon: <IconMap2 />,
|
||||
link: RouterMap.splash,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
// yg ada di kotak2 home (body)
|
||||
export const listMenuHomeBody = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Event",
|
||||
icon: <IconPresentation size={50} />,
|
||||
link: RouterEvent.splash,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Collaboration",
|
||||
icon: <IconAffiliate size={50} />,
|
||||
link: RouterColab.splash,
|
||||
},
|
||||
|
||||
{
|
||||
id: 3,
|
||||
name: "Voting",
|
||||
icon: <IconPackageImport size={50} />,
|
||||
link: RouterVote.splash,
|
||||
},
|
||||
|
||||
{
|
||||
id: 4,
|
||||
name: "Crowd Funding",
|
||||
icon: <IconHeartHandshake size={50} />,
|
||||
link: `/dev/crowd/splash`,
|
||||
},
|
||||
];
|
||||
|
||||
export const menuHomeJob = {
|
||||
name: "Job Vacancy",
|
||||
icon: <IconBriefcase size={50} />,
|
||||
link: RouterJob.spalsh,
|
||||
};
|
||||
4
src/app_modules/home/fun/get/api_home.ts
Normal file
4
src/app_modules/home/fun/get/api_home.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const apiGetDataHome = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/home${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
import { listMenuHomeFooter } from './component/list_menu_home';
|
||||
import HomeView from "./view_home";
|
||||
import HomeViewNew from "./view_home_new";
|
||||
import Home_UserNotActive from "./user_non_active";
|
||||
|
||||
export { HomeView, Home_UserNotActive as Home_UserNonActive };
|
||||
export { HomeView, HomeViewNew, listMenuHomeFooter, Home_UserNotActive as Home_UserNonActive };
|
||||
|
||||
127
src/app_modules/home/view_home_new.tsx
Normal file
127
src/app_modules/home/view_home_new.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
"use client";
|
||||
import { gs_count_ntf, gs_user_ntf } from "@/app/lib/global_state";
|
||||
import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
|
||||
import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
|
||||
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 { ComponentGlobal_NotifikasiPeringatan } from "../_global/notif_global";
|
||||
import UIGlobal_LayoutHeaderTamplate from "../_global/ui/ui_header_tamplate";
|
||||
import UIGlobal_LayoutTamplate from "../_global/ui/ui_layout_tamplate";
|
||||
import notifikasi_countUserNotifikasi from "../notifikasi/fun/count/fun_count_by_id";
|
||||
import BodyHome from "./component/body_home";
|
||||
import FooterHome from "./component/footer_home";
|
||||
import { apiGetDataHome } from "./fun/get/api_home";
|
||||
|
||||
export default function HomeViewNew({ countNotifikasi }: { countNotifikasi: number; }) {
|
||||
const [countNtf, setCountNtf] = useState(countNotifikasi);
|
||||
const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
|
||||
const [countLoadNtf, setCountLoadNtf] = useAtom(gs_count_ntf);
|
||||
const [dataUser, setDataUser] = useState<any>({})
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
onLoadNotifikasi({
|
||||
onLoad(val) {
|
||||
setCountNtf(val);
|
||||
},
|
||||
});
|
||||
|
||||
setCountNtf(countLoadNtf as any);
|
||||
}, [countLoadNtf, setCountNtf]);
|
||||
|
||||
useShallowEffect(() => {
|
||||
setCountNtf(countNtf + newUserNtf);
|
||||
setNewUserNtf(0);
|
||||
}, [newUserNtf, setCountNtf]);
|
||||
|
||||
async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) {
|
||||
const loadNotif = await notifikasi_countUserNotifikasi();
|
||||
onLoad(loadNotif);
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
cekUserLogin();
|
||||
}, []);
|
||||
|
||||
|
||||
async function cekUserLogin() {
|
||||
try {
|
||||
const response = await apiGetDataHome("?cat=cek_profile")
|
||||
if (response.success) {
|
||||
setDataUser(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<UIGlobal_LayoutTamplate
|
||||
header={
|
||||
<UIGlobal_LayoutHeaderTamplate
|
||||
title="HIPMI"
|
||||
customButtonLeft={
|
||||
<ActionIcon
|
||||
radius={"xl"}
|
||||
variant={"transparent"}
|
||||
onClick={() => {
|
||||
if (dataUser.profile === undefined || dataUser?.profile === null) {
|
||||
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
|
||||
} else {
|
||||
router.push(RouterUserSearch.main, { scroll: false });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconUserSearch color="white" />
|
||||
</ActionIcon>
|
||||
}
|
||||
customButtonRight={
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
if (dataUser.profile === undefined || dataUser?.profile === null) {
|
||||
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
|
||||
} else {
|
||||
router.push(RouterNotifikasi.categoryApp({ name: "semua" }), {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{
|
||||
countNotifikasi > 0
|
||||
?
|
||||
<Indicator
|
||||
processing
|
||||
color={MainColor.yellow}
|
||||
label={
|
||||
<Text fz={10} c={MainColor.darkblue}>
|
||||
{countNotifikasi > 99 ? "99+" : countNotifikasi}
|
||||
</Text>
|
||||
}
|
||||
>
|
||||
<IconBell color="white" />
|
||||
</Indicator>
|
||||
:
|
||||
<IconBell color="white" />
|
||||
}
|
||||
|
||||
</ActionIcon>
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
footer={<FooterHome />}
|
||||
>
|
||||
<BodyHome />
|
||||
</UIGlobal_LayoutTamplate>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,2 +1,4 @@
|
||||
import ViewKatalogNew from "./view_katalog_new";
|
||||
|
||||
export { Katalog_MainView } from "./view_katalog";
|
||||
export { ViewKatalogNew }
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { IListPortofolio } from './lib/type_portofolio';
|
||||
import { apiGetPortofolioByProfile } from './lib/api_portofolio';
|
||||
import CreatePortofolio from "./create/view";
|
||||
import CreatePortofolioLayout from "./create/layout";
|
||||
import PortofolioLayout from "./ui/ui_layout";
|
||||
@@ -20,6 +22,8 @@ export {
|
||||
LayoutPortofolio_EditDataBisnis,
|
||||
LayoutPortofolio_EditLogoBisnis,
|
||||
LayoutPortofolio_EditMedsosBisnis,
|
||||
apiGetPortofolioByProfile
|
||||
};
|
||||
export type { IListPortofolio };
|
||||
export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";
|
||||
|
||||
|
||||
4
src/app_modules/katalog/portofolio/lib/api_portofolio.ts
Normal file
4
src/app_modules/katalog/portofolio/lib/api_portofolio.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const apiGetPortofolioByProfile = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/portofolio${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface IListPortofolio {
|
||||
id: string
|
||||
id_Portofolio: string
|
||||
profileId: string
|
||||
namaBisnis: string
|
||||
}
|
||||
139
src/app_modules/katalog/ui/list_portolio_new.tsx
Normal file
139
src/app_modules/katalog/ui/list_portolio_new.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import { Box, Center, Group, Paper, Skeleton, Stack, Text, Title } from "@mantine/core";
|
||||
import { apiGetPortofolioByProfile, IListPortofolio } from "../portofolio";
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import _ from "lodash";
|
||||
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import { IconCaretRight } from "@tabler/icons-react";
|
||||
|
||||
export default function ListPortofolioProfileNew() {
|
||||
const router = useRouter();
|
||||
const param = useParams<{ id: string }>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [dataPortofolio, setDataPortofolio] = useState<IListPortofolio[]>([])
|
||||
|
||||
async function getPortofolio() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetPortofolioByProfile(`?profile=${param.id}&page=profile`)
|
||||
if (response.success) {
|
||||
setDataPortofolio(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getPortofolio()
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Stack spacing={"sm"}>
|
||||
<Group position="center">
|
||||
<Title order={4}>Portofolio</Title>
|
||||
</Group>
|
||||
|
||||
<Stack
|
||||
style={{
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<>
|
||||
<Skeleton height={70} radius={"md"} width={"100%"} />
|
||||
<Skeleton height={70} radius={"md"} width={"100%"} />
|
||||
</>
|
||||
:
|
||||
|
||||
_.isEmpty(dataPortofolio) ? (
|
||||
<Center>
|
||||
<Text fs={"italic"} fz={"xs"} c={"gray"}>
|
||||
- Belum Ada Portofolio -
|
||||
</Text>
|
||||
</Center>
|
||||
) : (
|
||||
<Stack>
|
||||
{dataPortofolio.map((e, i) => (
|
||||
<Paper
|
||||
shadow="sm"
|
||||
key={i}
|
||||
radius={"md"}
|
||||
onClick={() => {
|
||||
router.push(RouterPortofolio.main_detail + e?.id);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: MainColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Group position="apart">
|
||||
<Stack spacing={0} w={"80%"}>
|
||||
<Text fw={"bold"} lineClamp={1}>
|
||||
{e?.namaBisnis}
|
||||
</Text>
|
||||
<Text fz={10} c={MainColor.yellow}>
|
||||
#{e.id_Portofolio}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<IconCaretRight color="white" size={25} />
|
||||
</Stack>
|
||||
</Group>
|
||||
</Paper>
|
||||
))}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
loading ? <></>
|
||||
:
|
||||
_.isEmpty(dataPortofolio) ? (
|
||||
""
|
||||
) : (
|
||||
<Group position="right">
|
||||
<Text
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
RouterPortofolio.daftar_portofolio + param.id,
|
||||
{ scroll: false }
|
||||
)
|
||||
}
|
||||
fw={"bold"}
|
||||
fz={"sm"}
|
||||
>
|
||||
Lihat semua
|
||||
</Text>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
131
src/app_modules/katalog/ui/profile_detail.tsx
Normal file
131
src/app_modules/katalog/ui/profile_detail.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { AccentColor } from "@/app_modules/_global/color";
|
||||
import { apiGetUserProfile, IUserProfile } from "@/app_modules/user";
|
||||
import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconBrandGmail, IconGenderFemale, IconGenderMale, IconHome, IconPhone } from "@tabler/icons-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { Profile_ComponentAvatarProfile, Profile_ComponentLoadBackgroundImage } from "../profile/_component";
|
||||
import SkeletonProfile from "./skeleton_profile";
|
||||
|
||||
export default function ProfileDetail() {
|
||||
const param = useParams<{ id: string }>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [dataProfile, setDataProfile] = useState<IUserProfile>()
|
||||
const listInformation = [
|
||||
{
|
||||
icon: <IconPhone />,
|
||||
value: "+" + dataProfile?.nomor,
|
||||
},
|
||||
{
|
||||
icon: <IconBrandGmail />,
|
||||
value: dataProfile?.email,
|
||||
},
|
||||
{
|
||||
icon: <IconHome />,
|
||||
value: dataProfile?.alamat,
|
||||
},
|
||||
{
|
||||
icon:
|
||||
dataProfile?.jenisKelamin === "Laki-laki" ? (
|
||||
<IconGenderMale />
|
||||
) : (
|
||||
<IconGenderFemale />
|
||||
),
|
||||
value: dataProfile?.jenisKelamin,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
async function getProfile() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetUserProfile(`?profile=${param.id}`)
|
||||
if (response.success) {
|
||||
setDataProfile(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getProfile()
|
||||
}, []);
|
||||
|
||||
return <>
|
||||
<Stack
|
||||
spacing={0}
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonProfile /> :
|
||||
<>
|
||||
<Box>
|
||||
<Profile_ComponentLoadBackgroundImage
|
||||
fileId={dataProfile?.imageBackgroundId as any}
|
||||
size={500}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
bottom: 60,
|
||||
margin: "auto",
|
||||
width: "100%",
|
||||
marginBottom: -30,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Profile_ComponentAvatarProfile
|
||||
fileId={dataProfile?.imageId as any}
|
||||
style={{
|
||||
borderStyle: "solid",
|
||||
borderColor: AccentColor.darkblue,
|
||||
borderWidth: "2px",
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
<Stack align="center" c={"white"} mt={"xs"} spacing={0}>
|
||||
<Text fw={"bold"} lineClamp={1}>
|
||||
{dataProfile?.name}
|
||||
</Text>
|
||||
<Text fs={"italic"} fz={"sm"} lineClamp={1}>
|
||||
@{dataProfile?.username}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack spacing={"xs"}>
|
||||
{listInformation.map((e, i) => (
|
||||
<Group key={i} align="flex-start">
|
||||
<ThemeIcon
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
{e.icon}
|
||||
</ThemeIcon>
|
||||
<Box w={"85%"}>
|
||||
<Text fw={"bold"}>{e?.value}</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
}
|
||||
</Stack>
|
||||
</>;
|
||||
}
|
||||
42
src/app_modules/katalog/ui/skeleton_profile.tsx
Normal file
42
src/app_modules/katalog/ui/skeleton_profile.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
|
||||
|
||||
export default function SkeletonProfile() {
|
||||
return (
|
||||
<>
|
||||
<Box mb={"lg"}>
|
||||
<Skeleton height={200} radius={"md"} />
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
bottom: 60,
|
||||
width: "100%",
|
||||
marginBottom: -30,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Avatar radius={"50%"} size={100} bg={"gray"} />
|
||||
</Center>
|
||||
</Box>
|
||||
<Stack align="center" justify="center" spacing={"xs"}>
|
||||
<Skeleton height={15} radius={"md"} width={"50%"} />
|
||||
<Skeleton height={15} radius={"md"} width={"20%"} />
|
||||
</Stack>
|
||||
|
||||
<Box mt={"lg"}>
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<Box key={index} py={5}>
|
||||
<Grid align="center">
|
||||
<Grid.Col span={1}>
|
||||
<Skeleton w={25} h={25} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={11}>
|
||||
<Skeleton w={"100%"} h={15} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
20
src/app_modules/katalog/view_katalog_new.tsx
Normal file
20
src/app_modules/katalog/view_katalog_new.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
'use client'
|
||||
import { Stack } from "@mantine/core";
|
||||
import ProfileDetail from "./ui/profile_detail";
|
||||
import ListPortofolioProfileNew from "./ui/list_portolio_new";
|
||||
|
||||
export default function ViewKatalogNew() {
|
||||
return (
|
||||
<>
|
||||
<Stack mb={"lg"}>
|
||||
<ProfileDetail />
|
||||
{/* <Portofolio_UiListView
|
||||
listPorto={listPorto as any}
|
||||
profile={profile}
|
||||
userLoginId={userLoginId}
|
||||
/> */}
|
||||
<ListPortofolioProfileNew />
|
||||
</Stack>
|
||||
</>
|
||||
)
|
||||
}
|
||||
5
src/app_modules/user/index.ts
Normal file
5
src/app_modules/user/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { IUserProfile } from './lib/type_user';
|
||||
import { apiGetUserProfile } from "./lib/api_user";
|
||||
|
||||
export { apiGetUserProfile };
|
||||
export type { IUserProfile };
|
||||
4
src/app_modules/user/lib/api_user.ts
Normal file
4
src/app_modules/user/lib/api_user.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const apiGetUserProfile = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/user${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
14
src/app_modules/user/lib/type_user.ts
Normal file
14
src/app_modules/user/lib/type_user.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
export interface IUserProfile {
|
||||
id: string
|
||||
username: string
|
||||
nomor: string
|
||||
active:boolean
|
||||
masterUserRoleId: string
|
||||
idProfile: string
|
||||
name: string
|
||||
email: string
|
||||
alamat: string
|
||||
jenisKelamin: string
|
||||
imageId: string
|
||||
imageBackgroundId: string
|
||||
}
|
||||
Reference in New Issue
Block a user