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

#style: UI Katalog

Browse Source 
Desc:
- Tampilan UI katalog selesai diubah
## No Issuee
This commit is contained in:
Bagasbanuna02
2024-07-10 10:11:43 +08:00
parent 9068631c33
commit 5f620c030b
29 changed files with 722 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app_modules/katalog/component/button_header_right.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_UI_Drawer from "@/app_modules/component_global/ui/ui_drawer";
import { ActionIcon, Box } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
IconDots,
IconDotsVertical,
IconEdit,
IconPhotoEdit,
IconPolaroid,
} from "@tabler/icons-react";
import { ComponentKatalog_DrawerKatalog } from "./drawer_katalog";
export function ComponentKatalog_ButtonHeaderRight({
profileId,
userLoginId,
authorId,
}: {
profileId: string;
userLoginId: string;
authorId: string;
}) {
const [opened, { open, close }] = useDisclosure();
return (
<>
{authorId !== userLoginId ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : (
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDotsVertical />
</ActionIcon>
)}
<ComponentKatalog_DrawerKatalog
opened={opened}
close={() => close()}
profileId={profileId}
/>
</>
);
}

118
src/app_modules/katalog/component/drawer_katalog.tsx Normal file
View File

@@ -0,0 +1,118 @@
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import Component_Logout from "@/app_modules/auth/logout/view";
import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
import {
ActionIcon,
Drawer,
Group,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import {
IconEdit,
IconLogout,
IconLogout2,
IconPhotoEdit,
IconPolaroid,
IconX,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentKatalog_DrawerKatalog({
opened,
close,
profileId,
}: {
opened: boolean;
close: () => void;
profileId: string;
}) {
const router = useRouter();
const [pageId, setPageId] = useState("");
const [isLoading, setIsLoading] = useState(false);
const listPage = [
{
id: "1",
name: "Edit profile",
icon: <IconEdit />,
path: RouterProfile.edit + profileId,
},
{
id: "2",
name: "Ubah Foto Profile",
icon: <IconPhotoEdit />,
path: RouterProfile.update_foto_profile + profileId,
},
{
id: "3",
name: "Ubah Latar Belakang",
icon: <IconPolaroid />,
path: RouterProfile.update_foto_background + profileId,
},
];
return (
<>
<Drawer
opened={opened}
onClose={() => close()}
position={"bottom"}
size={"auto"}
withCloseButton={false}
styles={{
content: {
padding: 0,
position: "absolute",
margin: "auto",
backgroundColor: "transparent",
left: 0,
right: 0,
width: 500,
},
body: {
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
borderRadius: "20px 20px 0px 0px",
color: "white",
paddingBottom: "5%",
},
}}
>
<Stack spacing={"xs"}>
<Group position="right">
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
</ActionIcon>
</Group>
<SimpleGrid cols={4}>
{listPage.map((e, i) => (
<Stack key={i} align="center" spacing={"xs"}>
<ActionIcon
variant="transparent"
c="white"
onClick={() => {
router.push(e.path);
setPageId(e?.id);
setIsLoading(true)
}}
>
{isLoading && e.id === pageId ? <ComponentGlobal_UI_Loader /> : e.icon}
</ActionIcon>
<Text align="center" color="white">
{e.name}
</Text>
</Stack>
))}
<Component_Logout />
</SimpleGrid>
</Stack>
</Drawer>
</>
);
}

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

@@ -1,3 +1,4 @@
import HeaderTransparent from "./component/header_transparent";
export {HeaderTransparent as headerTransparent}
export { HeaderTransparent as headerTransparent };
export { Katalog_MainView } from "./view_katalog";

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

@@ -1,4 +1,4 @@
import KatalogView from "./view";
import KatalogView from "./view_katalog";
import KatalogLayout from "./layout";
export {KatalogView, KatalogLayout}

103
src/app_modules/katalog/main/layout.tsx
View File

@@ -1,103 +1,38 @@
"use client";
import { Logout } from "@/app_modules/auth";
import {
ActionIcon,
AppShell,
Group,
Header,
Text,
Title,
} from "@mantine/core";
import {
IconUserSearch,
IconAward,
IconQrcode,
IconArrowLeft,
IconPencilPlus,
IconChevronLeft,
IconDashboard,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import ComponentKatalog_HeaderTamplate from "../component/header_tamplate";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import { title } from "process";
import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { ComponentKatalog_ButtonHeaderRight } from "../component/button_header_right";
export default function KatalogLayout({
children,
profileId,
userLoginId,
authorId,
}: {
children: any;
profileId: any;
userLoginId: string;
authorId: string;
}) {
const router = useRouter();
return (
<>
<AppComponentGlobal_LayoutTamplate
<LayoutGlobal_UI_Tamplate
header={
<Header height={50} sx={{ borderStyle: "none" }} bg={"black"}>
<Group h={50} position="apart" px={"md"}>
<ActionIcon
variant="transparent"
onClick={() => {
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={"white"}>
Katalog
</Title>
<ActionIcon variant="transparent" disabled></ActionIcon>
{/* <ActionIcon
variant="transparent"
onClick={() => router.push(RouterAdminDashboard.splash_admin)}
>
<IconDashboard />
</ActionIcon> */}
</Group>
</Header>
<LayoutGlobal_UI_HeaderTamplate
title="KATALOG"
customButtonRight={
<ComponentKatalog_ButtonHeaderRight
profileId={profileId}
userLoginId={userLoginId}
authorId={authorId as any}
/>
}
/>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</>
);
return (
<>
<AppShell
header={
<Header height={50} sx={{ borderStyle: "none" }} bg={"black"}>
<Group h={50} position="apart" px={"md"}>
<ActionIcon
variant="transparent"
onClick={() => {
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={"white"}>
Katalog
</Title>
<ActionIcon variant="transparent" disabled></ActionIcon>
{/* <ActionIcon
variant="transparent"
onClick={() => router.push(RouterAdminDashboard.splash_admin)}
>
<IconDashboard />
</ActionIcon> */}
</Group>
</Header>
}
>
{children}
</AppShell>
</LayoutGlobal_UI_Tamplate>
</>
);
}

49
src/app_modules/katalog/main/view.tsx
View File

@@ -1,49 +0,0 @@
"use client";
import { Warna } from "@/app/lib/warna";
import {
ActionIcon,
BackgroundImage,
Box,
Center,
Flex,
Grid,
Group,
Image,
Paper,
Stack,
Text,
} from "@mantine/core";
import { ProfileView } from "../profile";
import { ListPortofolioView } from "../portofolio";
import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
import { MODEL_PORTOFOLIO_Lama } from "@/app_modules/model_global/portofolio";
import User_Logout from "@/app_modules/auth/logout/view";
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
import { MODEL_PROFILE } from "../profile/model/interface";
export default function KatalogView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Stack>
<ProfileView profile={profile as any} userLoginId={userLoginId} />
<ListPortofolioView
listPorto={listPorto as any}
profile={profile}
userLoginId={userLoginId}
/>
<Stack my={"lg"} w={"100%"}>
{profile?.User.id === userLoginId ? <User_Logout /> : ""}
</Stack>
</Stack>
</>
);
}

33
src/app_modules/katalog/main/view_katalog.tsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import Component_Logout from "@/app_modules/auth/logout/view";
import {
Stack
} from "@mantine/core";
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
import { Portofolio_UiView } from "../portofolio/ui_portofolio";
import { MODEL_PROFILE } from "../profile/model/interface";
import { Profile_UiView } from "../profile/ui_profile";
export default function KatalogView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Stack>
<Profile_UiView profile={profile as any} userLoginId={userLoginId} />
<Portofolio_UiView
listPorto={listPorto as any}
profile={profile}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}

24
src/app_modules/katalog/portofolio/create/view.tsx
View File

@@ -1,8 +1,11 @@
"use client";
import { myConsole } from "@/app/fun/my_console";
import { ApiHipmi } from "@/app/lib/api";
import { Warna } from "@/app/lib/warna";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import {
BIDANG_BISNIS_OLD,
MODEL_PORTOFOLIO_OLD,
@@ -16,25 +19,16 @@ import {
Paper,
Select,
Stack,
Text,
TextInput,
Textarea,
Title,
Textarea
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import _ from "lodash";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-simple-toasts";
import funCreatePortofolio from "../fun/fun_create_portofolio";
import { IconCamera } from "@tabler/icons-react";
import ComponentKatalog_NotedBox from "../../component/noted_box";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import funCreatePortofolio from "../fun/fun_create_portofolio";
export default function CreatePortofolio({
bidangBisnis,

1
src/app_modules/katalog/portofolio/list_view/view.tsx
View File

@@ -42,7 +42,6 @@ export default function ListPortofolioView({
userLoginId: string;
}) {
const router = useRouter();
// const [porto, setPorto] = useState(listPorto);
const [loading, setLoading] = useState(false);
const [loadingPorto, setLoadingPorto] = useState(false);
const [idPorto, setIdPorto] = useState("");

141
src/app_modules/katalog/portofolio/ui_portofolio.tsx Normal file
View File

@@ -0,0 +1,141 @@
import { useRouter } from "next/navigation";
import { MODEL_PROFILE } from "../profile/model/interface";
import { MODEL_PORTOFOLIO } from "./model/interface";
import { useState } from "react";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { Warna } from "@/app/lib/warna";
import {
Paper,
Stack,
Group,
ActionIcon,
Title,
Box,
ScrollArea,
Center,
SimpleGrid,
Grid,
Loader,
Text,
} from "@mantine/core";
import { IconPencilPlus, IconCaretRight } from "@tabler/icons-react";
import _ from "lodash";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
export function Portofolio_UiView({
listPorto,
profile,
userLoginId,
}: {
listPorto: MODEL_PORTOFOLIO[];
profile: MODEL_PROFILE;
userLoginId: string;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [loadingPorto, setLoadingPorto] = useState(false);
const [idPorto, setIdPorto] = useState("");
return (
<>
<Box
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Stack spacing={"sm"}>
<Group position="apart">
<ActionIcon variant="transparent" disabled></ActionIcon>
<Title order={4}>Portofolio</Title>
{profile?.User.id === userLoginId ? (
<ActionIcon
variant="transparent"
onClick={() => {
router.push(RouterPortofolio.create + `${profile.id}`);
setLoading(true);
}}
>
{loading ? (
<ComponentGlobal_UI_Loader />
) : (
<IconPencilPlus color={AccentColor.yellow} />
)}
</ActionIcon>
) : (
<ActionIcon variant="transparent" disabled></ActionIcon>
)}
</Group>
<Box
h={
_.isEmpty(listPorto)
? 50
: listPorto.length === 1
? 100
: listPorto.length === 2
? 150
: 200
}
>
<ScrollArea h={"100%"} scrollbarSize={10}>
{_.isEmpty(listPorto) ? (
<Center>
<Text fs={"italic"} fz={"xs"} c={"gray"}>
- Belum Ada Portofolio -
</Text>
</Center>
) : (
<SimpleGrid
cols={4}
spacing="md"
breakpoints={[
{ maxWidth: "md", cols: 3, spacing: "md" },
{ maxWidth: "sm", cols: 2, spacing: "sm" },
{ maxWidth: "xs", cols: 1, spacing: "sm" },
]}
>
{listPorto.map((e, i) => (
<Paper
shadow="sm"
key={i}
bg={"gray.5"}
radius={"md"}
onClick={() => {
setIdPorto(e?.id);
setLoadingPorto(true);
router.push(`/dev/portofolio/main/${e?.id}/`);
}}
>
<Grid align="center" p={"sm"}>
<Grid.Col span={"auto"}>
<Text fw={"bold"} lineClamp={1}>
{e?.namaBisnis}
</Text>
</Grid.Col>
<Grid.Col span={"content"}>
<Stack>
{idPorto === e?.id && loadingPorto ? (
<Loader color="gray" size={25} />
) : (
<IconCaretRight color="black" size={25} />
)}
</Stack>
</Grid.Col>
</Grid>
</Paper>
))}
</SimpleGrid>
)}
</ScrollArea>
</Box>
</Stack>
</Box>
</>
);
}

14
src/app_modules/katalog/profile/edit/view.tsx
View File

@@ -1,25 +1,17 @@
"use client";
import { myConsole } from "@/app/fun/my_console";
import { ApiHipmi } from "@/app/lib/api";
import { Warna } from "@/app/lib/warna";
import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-simple-toasts";
import funEditProfile from "../fun/fun_edit_profile";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { MODEL_PROFILE } from "../model/interface";
import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { validRegex } from "../../component/regular_expressions";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
import { MODEL_PROFILE } from "../model/interface";
export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
const router = useRouter();

27
src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts
View File

@@ -8,21 +8,18 @@ export async function Profile_getOneProfileAndUserById(profileId: string) {
id: profileId,
},
select: {
userId: true,
User: true,
id: true,
name: true,
email: true,
alamat: true,
jenisKelamin: true,
imagesId: true,
imagesBackgroundId: true,
ImageProfile: true,
ImagesBackground: true
}
userId: true,
User: true,
id: true,
name: true,
email: true,
alamat: true,
jenisKelamin: true,
imagesId: true,
imagesBackgroundId: true,
ImageProfile: true,
ImagesBackground: true,
},
});
// console.log(data)
return data;

16
src/app_modules/katalog/profile/index.ts
View File

@@ -2,18 +2,12 @@ import ProfileLayout from "./create/layout";
import CreateProfile from "./create/view";
import EditProfileLayout from "./edit/layout";
import EditProfileView from "./edit/view";
import ProfileView from "./main/view_profile";
import UploadFotoProfile from "./upload/foto_profile";
import UploadFotoProfileLayout from "./upload/foto_profile/layout"
import ProfileView from "./main/view";
import Profile_UpdateFotoBackground from "./upload/foto_background";
import LayoutProfile_UpdateFotoBackground from "./upload/foto_background/layout";
import UploadFotoProfileLayout from "./upload/foto_profile/layout";
export {
ProfileLayout,
CreateProfile,
EditProfileView,
EditProfileLayout,
UploadFotoProfile,
UploadFotoProfileLayout,
ProfileView
CreateProfile, EditProfileLayout, EditProfileView, ProfileLayout, ProfileView, UploadFotoProfile,
UploadFotoProfileLayout
};

11
src/app_modules/katalog/profile/main/view.tsx → src/app_modules/katalog/profile/main/view_profile.tsx
View File

@@ -31,6 +31,7 @@ import { useState } from "react";
import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { MODEL_PROFILE } from "../model/interface";
import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
export default function ProfileView({
profile,
@@ -44,16 +45,14 @@ export default function ProfileView({
const [loadingBG, setLoadingBG] = useState(false);
const [loadingEdit, setLoadingEdit] = useState(false);
// const [data, setData] = useState(profile);
// useShallowEffect(() => {
// funGetUserProfile(user.id ?? "").then(setProfile as any);
// }, []);
// if (!profile) return <></>;
return (
<>
{/* <pre>{JSON.stringify(profile, null,2)}</pre> */}
<Paper px={"md"} py={"sm"} bg={"gray.1"} shadow="lg" withBorder>
<Paper px={"md"} py={"sm"} shadow="lg" style={{
backgroundColor: MainColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
}}>
{/* Background dan foto */}
{/* Upload Background Profile */}

156
src/app_modules/katalog/profile/ui_profile.tsx Normal file
View File

@@ -0,0 +1,156 @@
"use client";
import {
MainColor,
AccentColor,
} from "@/app_modules/component_global/color/color_pallet";
import {
Avatar,
Box,
Center,
Group,
Image,
Paper,
Stack,
Text,
ThemeIcon,
} from "@mantine/core";
import { MODEL_PROFILE } from "./model/interface";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
IconBrandGmail,
IconGenderFemale,
IconGenderMale,
IconHome,
IconPhone,
} from "@tabler/icons-react";
export function Profile_UiView({
profile,
userLoginId,
}: {
profile: MODEL_PROFILE;
userLoginId: string;
}) {
const router = useRouter();
const [loadingPP, setLoadingPP] = useState(false);
const [loadingBG, setLoadingBG] = useState(false);
const [loadingEdit, setLoadingEdit] = useState(false);
const listInformation = [
{
icon: <IconPhone />,
value: profile?.User.nomor,
},
{
icon: <IconBrandGmail />,
value: profile?.email,
},
{
icon: <IconHome />,
value: profile?.alamat,
},
{
icon:
profile.jenisKelamin === "Laki-laki" ? (
<IconGenderMale />
) : (
<IconGenderFemale />
),
value: profile?.jenisKelamin,
},
];
return (
<>
<Stack
spacing={0}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Box>
<Image
radius={"sm"}
height={200}
alt="Background"
src={
profile?.ImagesBackground.url
? RouterProfile.api_url_background +
`${profile?.ImagesBackground.url}`
: "/aset/no-image.png"
}
/>
<Box
sx={{
position: "relative",
bottom: 60,
margin: "auto",
width: "100%",
marginBottom: -30,
}}
>
<Center>
<Avatar
bg={"gray.2"}
sx={{
borderStyle: "solid",
borderColor: "gray",
borderWidth: "0.5px",
}}
src={
profile?.ImageProfile?.url
? RouterProfile.api_url_foto +
`${profile?.ImageProfile.url}`
: "/aset/global/avatar.png"
}
size={100}
radius={"100%"}
/>
</Center>
<Stack align="center" c={"white"} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1}>
{profile?.name}
</Text>
<Text fs={"italic"} fz={"sm"} lineClamp={1}>
@{profile?.User?.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>
{/* <pre
style={{
color: "white",
}}
>
{JSON.stringify(profile, null, 2)}
</pre> */}
</Stack>
</>
);
}

31
src/app_modules/katalog/ui/ui_katalog.tsx Normal file
View File

@@ -0,0 +1,31 @@
"use client"
import { Stack } from "@mantine/core";
import { Portofolio_UiView } from "../portofolio/ui_portofolio";
import { Profile_UiView } from "../profile/ui_profile";
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
import { MODEL_PROFILE } from "../profile/model/interface";
export function Katalog_UiView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Stack>
<Profile_UiView profile={profile as any} userLoginId={userLoginId} />
<Portofolio_UiView
listPorto={listPorto as any}
profile={profile}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}

23
src/app_modules/katalog/view_katalog.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { MODEL_PORTOFOLIO } from "./portofolio/model/interface";
import { MODEL_PROFILE } from "./profile/model/interface";
import { Katalog_UiView } from "./ui/ui_katalog";
export async function Katalog_MainView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Katalog_UiView
listPorto={listPorto}
profile={profile}
userLoginId={userLoginId}
/>
</>
);
}