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

Merge pull request #160 from bipproduction/amalia/05-des-24

Browse Source 
Amalia/05 des 24
This commit is contained in:
Bagasbanuna02
2024-12-06 09:10:55 +08:00
committed by GitHub
parent 87c7bdc08e 66c65bc937
commit 8429b0c704
23 changed files with 1072 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/api/new/home/route.ts Normal file
View File

@@ -0,0 +1,68 @@
import { prisma } from "@/app/lib";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { NextResponse } from "next/server";
// GET DATA HOME
export async function GET(request: Request) {
try {
let fixData
const { searchParams } = new URL(request.url)
const kategori = searchParams.get("cat")
const userLoginId = await funGetUserIdByToken()
if (userLoginId == null) {
return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
}
if (kategori == "job") {
fixData = await prisma.job.findMany({
take: 2,
orderBy: {
createdAt: "desc",
},
where: {
isActive: true,
masterStatusId: "1"
},
select: {
id: true,
Author: {
select: {
id: true,
username: true,
},
},
title: true,
deskripsi: true
},
});
} else if (kategori == "cek_profile") {
const data = await prisma.user.findUnique({
where: {
id: userLoginId,
},
select: {
Profile: {
select: {
id: true,
imageId: true,
}
}
}
});
fixData = {
profile: data?.Profile?.id,
imageId: data?.Profile?.imageId
}
}
return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: fixData }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
}
}

55
src/app/api/new/portofolio/route.ts Normal file
View File

@@ -0,0 +1,55 @@
import { prisma } from "@/app/lib";
import { NextResponse } from "next/server";
// GET ALL DATA PORTOFOLIO BY PROFILE ID
export async function GET(request: Request) {
try {
let fixData
const { searchParams } = new URL(request.url)
const profile = searchParams.get("profile")
const page = searchParams.get("page")
if (page == "profile") {
fixData = await prisma.portofolio.findMany({
take: 2,
orderBy: {
createdAt: "desc",
},
where: {
profileId: profile,
active: true,
},
select: {
id: true,
id_Portofolio: true,
namaBisnis: true,
profileId: true,
},
});
} else if (page == "portofolio") {
fixData = await prisma.portofolio.findMany({
orderBy: {
createdAt: "desc",
},
where: {
profileId: profile,
active: true,
},
select: {
id: true,
id_Portofolio: true,
namaBisnis: true,
profileId: true,
},
});
}
return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: fixData }, { status: 200 });
}
catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
}
}

58
src/app/api/new/user/route.ts Normal file
View File

@@ -0,0 +1,58 @@
import { prisma } from "@/app/lib";
import { NextResponse } from "next/server";
// GET ONE DATA USER PROFILE BY PROFILE ID
export async function GET(request: Request) {
try {
const { searchParams } = new URL(request.url)
const profile = searchParams.get("profile")
const data = await prisma.profile.findUnique({
where: {
id: String(profile),
},
select: {
id: true,
name: true,
email: true,
alamat: true,
jenisKelamin: true,
imageId: true,
imageBackgroundId: true,
userId: true,
User: {
select: {
username: true,
nomor: true,
active: true,
masterUserRoleId: true
}
}
}
});
const dataFix = {
id: data?.userId,
username: data?.User?.username,
nomor: data?.User?.nomor,
active: data?.User?.active,
masterUserRoleId: data?.User?.masterUserRoleId,
idProfile: data?.id,
name: data?.name,
email: data?.email,
alamat: data?.alamat,
jenisKelamin: data?.jenisKelamin,
imageId: data?.imageId,
imageBackgroundId: data?.imageBackgroundId
}
return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix, }, { status: 200 });
}
catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
}
}

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

@@ -1,23 +1,21 @@
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get"; import { HomeViewNew } from "@/app_modules/home";
import { HomeView } from "@/app_modules/home";
import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
import { job_getTwoForHomeView } from "@/app_modules/job/fun/get/get_two_for_home_view";
import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id"; import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
export default async function PageHome() { export default async function PageHome() {
const userLoginId = await funGetUserIdByToken(); // const userLoginId = await funGetUserIdByToken();
const dataUser = await user_getOneByUserId(userLoginId as string); // const dataUser = await user_getOneByUserId(userLoginId as string);
const dataJob = await job_getTwoForHomeView(); // const dataJob = await job_getTwoForHomeView();
const countNotifikasi = await notifikasi_countUserNotifikasi(); const countNotifikasi = await notifikasi_countUserNotifikasi();
return ( return (
<> <>
<HomeView {/* <HomeView
dataUser={dataUser as any} dataUser={dataUser as any}
dataJob={dataJob as any} dataJob={dataJob as any}
countNotifikasi={countNotifikasi} countNotifikasi={countNotifikasi}
/> /> */}
<HomeViewNew countNotifikasi={countNotifikasi} />
</> </>
); );
} }

8
src/app/dev/katalog/[id]/page.tsx
View File

@@ -1,5 +1,5 @@
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get"; import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { Katalog_MainView } from "@/app_modules/katalog"; import { Katalog_MainView, ViewKatalogNew } from "@/app_modules/katalog";
import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio"; import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile"; import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
@@ -12,11 +12,13 @@ export default async function Page({ params }: { params: { id: string } }) {
return ( return (
<> <>
<Katalog_MainView {/* <Katalog_MainView
profile={dataProfile as any} profile={dataProfile as any}
listPorto={listPorto as any} listPorto={listPorto as any}
userLoginId={userLoginId as any} userLoginId={userLoginId as any}
/> /> */}
<ViewKatalogNew />
</> </>
); );
} }

193
src/app_modules/home/component/body_home.tsx Normal file
View 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
View 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
View 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
View 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)
}

4
src/app_modules/home/index.ts
View File

@@ -1,4 +1,6 @@
import { listMenuHomeFooter } from './component/list_menu_home';
import HomeView from "./view_home"; import HomeView from "./view_home";
import HomeViewNew from "./view_home_new";
import Home_UserNotActive from "./user_non_active"; 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
View 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>
</>
);
}

2
src/app_modules/katalog/index.ts
View File

@@ -1,2 +1,4 @@
import ViewKatalogNew from "./view_katalog_new";
export { Katalog_MainView } from "./view_katalog"; export { Katalog_MainView } from "./view_katalog";
export { ViewKatalogNew }

4
src/app_modules/katalog/portofolio/index.ts
View File

@@ -1,3 +1,5 @@
import { IListPortofolio } from './lib/type_portofolio';
import { apiGetPortofolioByProfile } from './lib/api_portofolio';
import CreatePortofolio from "./create/view"; import CreatePortofolio from "./create/view";
import CreatePortofolioLayout from "./create/layout"; import CreatePortofolioLayout from "./create/layout";
import PortofolioLayout from "./ui/ui_layout"; import PortofolioLayout from "./ui/ui_layout";
@@ -20,6 +22,8 @@ export {
LayoutPortofolio_EditDataBisnis, LayoutPortofolio_EditDataBisnis,
LayoutPortofolio_EditLogoBisnis, LayoutPortofolio_EditLogoBisnis,
LayoutPortofolio_EditMedsosBisnis, LayoutPortofolio_EditMedsosBisnis,
apiGetPortofolioByProfile
}; };
export type { IListPortofolio };
export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio"; export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";

4
src/app_modules/katalog/portofolio/lib/api_portofolio.ts Normal file
View 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)
}

6
src/app_modules/katalog/portofolio/lib/type_portofolio.ts Normal file
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
}

1
src/middleware.ts
View File

@@ -32,6 +32,7 @@ const middlewareConfig: MiddlewareConfig = {
"/auth/api/login", "/auth/api/login",
"/aset/global/main_background.png", "/aset/global/main_background.png",
"/aset/logo/logo-hipmi.png", "/aset/logo/logo-hipmi.png",
"/api/new/*"
], ],
encodedKey: process.env.NEXT_PUBLIC_BASE_TOKEN_KEY!, encodedKey: process.env.NEXT_PUBLIC_BASE_TOKEN_KEY!,
sessionKey: process.env.NEXT_PUBLIC_BASE_SESSION_KEY!, sessionKey: process.env.NEXT_PUBLIC_BASE_SESSION_KEY!,