From 5f620c030b813b6bcc0e0fce909112ef4888fc7f Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Wed, 10 Jul 2024 10:11:43 +0800 Subject: [PATCH] #style: UI Katalog Desc: - Tampilan UI katalog selesai diubah ## No Issuee --- src/app/dev/katalog/[id]/layout.tsx | 25 ++- src/app/dev/katalog/[id]/loading.tsx | 9 - src/app/dev/katalog/[id]/page.tsx | 28 +--- src/app_modules/auth/index.ts | 4 +- src/app_modules/auth/logout/view.tsx | 106 ++++++------ src/app_modules/auth/register/view.tsx | 2 +- src/app_modules/auth/validasi/view.tsx | 2 +- .../component_global/ui/ui_drawer.tsx | 22 ++- .../ui/ui_layout_tamplate.tsx | 3 +- .../home/user_non_active/index.tsx | 4 +- src/app_modules/job/detail/draft/layout.tsx | 4 +- .../katalog/component/button_header_right.tsx | 44 +++++ .../katalog/component/drawer_katalog.tsx | 118 +++++++++++++ src/app_modules/katalog/index.ts | 3 +- src/app_modules/katalog/main/index.ts | 2 +- src/app_modules/katalog/main/layout.tsx | 103 +++--------- src/app_modules/katalog/main/view.tsx | 49 ------ src/app_modules/katalog/main/view_katalog.tsx | 33 ++++ .../katalog/portofolio/create/view.tsx | 24 +-- .../katalog/portofolio/list_view/view.tsx | 1 - .../katalog/portofolio/ui_portofolio.tsx | 141 ++++++++++++++++ src/app_modules/katalog/profile/edit/view.tsx | 14 +- .../profile/fun/get/get_one_user_profile.ts | 27 ++- src/app_modules/katalog/profile/index.ts | 16 +- .../main/{view.tsx => view_profile.tsx} | 11 +- .../katalog/profile/ui_profile.tsx | 156 ++++++++++++++++++ src/app_modules/katalog/ui/ui_katalog.tsx | 31 ++++ src/app_modules/katalog/view_katalog.tsx | 23 +++ src/app_modules/zCoba/index.tsx | 133 +-------------- 29 files changed, 722 insertions(+), 416 deletions(-) delete mode 100644 src/app/dev/katalog/[id]/loading.tsx create mode 100644 src/app_modules/katalog/component/button_header_right.tsx create mode 100644 src/app_modules/katalog/component/drawer_katalog.tsx delete mode 100644 src/app_modules/katalog/main/view.tsx create mode 100644 src/app_modules/katalog/main/view_katalog.tsx create mode 100644 src/app_modules/katalog/portofolio/ui_portofolio.tsx rename src/app_modules/katalog/profile/main/{view.tsx => view_profile.tsx} (96%) create mode 100644 src/app_modules/katalog/profile/ui_profile.tsx create mode 100644 src/app_modules/katalog/ui/ui_katalog.tsx create mode 100644 src/app_modules/katalog/view_katalog.tsx diff --git a/src/app/dev/katalog/[id]/layout.tsx b/src/app/dev/katalog/[id]/layout.tsx index 62c2dc48..82012dc7 100644 --- a/src/app/dev/katalog/[id]/layout.tsx +++ b/src/app/dev/katalog/[id]/layout.tsx @@ -1,10 +1,29 @@ +import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token"; import { KatalogLayout } from "@/app_modules/katalog/main"; +import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile"; + +export default async function Layout({ + children, + params, +}: { + children: any; + params: { id: string }; +}) { + const profileId = params.id; + const dataProfile = await Profile_getOneProfileAndUserById(profileId) + const authorId = dataProfile?.userId; + const userLoginId = await user_getOneUserId(); + -export default async function Layout({ children, params }: { children: any, params: {id: string} }) { - // const a = atob(params.id.toString()) return ( <> - {children} + + {children} + ); } diff --git a/src/app/dev/katalog/[id]/loading.tsx b/src/app/dev/katalog/[id]/loading.tsx deleted file mode 100644 index b1f8b62f..00000000 --- a/src/app/dev/katalog/[id]/loading.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2"; - -export default async function Page() { - return ( - <> - - - ); -} diff --git a/src/app/dev/katalog/[id]/page.tsx b/src/app/dev/katalog/[id]/page.tsx index f2ff9949..9116b1e1 100644 --- a/src/app/dev/katalog/[id]/page.tsx +++ b/src/app/dev/katalog/[id]/page.tsx @@ -1,37 +1,21 @@ -import prisma from "@/app/lib/prisma"; -import { KatalogView } from "@/app_modules/katalog/main"; -import { url } from "inspector"; -import { unsealData } from "iron-session"; -import _ from "lodash"; -import { cookies } from "next/headers"; -import { redirect } from "next/navigation"; -import { funGetUserProfile } from "@/app_modules/fun_global/get_user_profile"; -import yaml from "yaml"; -import fs from "fs"; -import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio"; import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token"; -import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile"; +import { Katalog_MainView } from "@/app_modules/katalog"; +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 { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id"; -const config = yaml.parse(fs.readFileSync("config.yaml").toString()); + export default async function Page({ params }: { params: { id: string } }) { let profileId = params.id; - const authorId = await user_getOneUserId(); - const dataUser = await user_getOneByUserId(authorId) + const userLoginId = await user_getOneUserId(); const listPorto = await funGetListPortofolio(profileId); const dataProfile = await Profile_getOneProfileAndUserById(profileId); - // await new Promise((a, b) => { - // setTimeout(a, 1000); - // }); - return ( <> - ); diff --git a/src/app_modules/auth/index.ts b/src/app_modules/auth/index.ts index 599f9aaa..e7f9843f 100644 --- a/src/app_modules/auth/index.ts +++ b/src/app_modules/auth/index.ts @@ -2,12 +2,12 @@ import SplashScreen from "./splash/view"; import Login from "./login/view"; import Validasi from "./validasi/view"; import Register from "./register/view"; -import User_Logout from "./logout/view"; +import Component_Logout from "./logout/view"; export { SplashScreen, Login, Validasi, Register, - User_Logout as Logout, + Component_Logout as Logout, }; diff --git a/src/app_modules/auth/logout/view.tsx b/src/app_modules/auth/logout/view.tsx index 51524892..d50ad426 100644 --- a/src/app_modules/auth/logout/view.tsx +++ b/src/app_modules/auth/logout/view.tsx @@ -1,6 +1,14 @@ "use client"; -import { ActionIcon, Button, Group, Modal, Stack, Title } from "@mantine/core"; +import { + ActionIcon, + Button, + Group, + Modal, + Stack, + Text, + Title, +} from "@mantine/core"; import { useRouter } from "next/navigation"; import { useAtom } from "jotai"; import { gs_kodeId, gs_nomor, gs_otp } from "../state/state"; @@ -12,13 +20,13 @@ import { auth_Logout } from "../fun/fun_logout"; import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan"; import { RouterAuth } from "@/app/lib/router_hipmi/router_auth"; import { useState } from "react"; +import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal"; -export default function User_Logout() { +export default function Component_Logout() { const router = useRouter(); - const [opened, { toggle }] = useDisclosure(false); + const [opened, setOpened] = useState(false); const [kodeId, setKodeId] = useAtom(gs_kodeId); const [loading, setLoading] = useState(false); - const [loading2, setLoading2] = useState(false); async function onClickLogout() { // await auth_Logout(kodeId).then((res) => { @@ -36,50 +44,52 @@ export default function User_Logout() { return ( <> - - - Anda yakin ingin keluar ? - - - - - - - {/* - - */} - + { + setLoading(false); + setOpened(false); + }} + radius={50} + > + Batal + + } + buttonKanan={ + + } + opened={opened} + close={() => setOpened(false)} + /> + + + { + setOpened(true); + }} + > + + + + Keluar + + ); } diff --git a/src/app_modules/auth/register/view.tsx b/src/app_modules/auth/register/view.tsx index 59dd2e1f..3eeec6e2 100644 --- a/src/app_modules/auth/register/view.tsx +++ b/src/app_modules/auth/register/view.tsx @@ -66,7 +66,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) { if (val.status === 200) { ComponentGlobal_NotifikasiBerhasil(res.message); setLoading(true); - router.push(RouterHome.main_home); + router.push(RouterHome.main_home, { scroll: false }); } else { ComponentGlobal_NotifikasiPeringatan(val.message); } diff --git a/src/app_modules/auth/validasi/view.tsx b/src/app_modules/auth/validasi/view.tsx index 2b729418..83c32c8d 100644 --- a/src/app_modules/auth/validasi/view.tsx +++ b/src/app_modules/auth/validasi/view.tsx @@ -48,7 +48,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) { if (res.role === "1") { ComponentGlobal_NotifikasiBerhasil(res.message); setLoading(true); - router.push(RouterHome.main_home); + router.push(RouterHome.main_home, {scroll: false}); } else { router.push(RouterAdminDashboard.splash_admin); } diff --git a/src/app_modules/component_global/ui/ui_drawer.tsx b/src/app_modules/component_global/ui/ui_drawer.tsx index ccbd53fe..7a52b0a7 100644 --- a/src/app_modules/component_global/ui/ui_drawer.tsx +++ b/src/app_modules/component_global/ui/ui_drawer.tsx @@ -12,6 +12,12 @@ import { MainColor, AccentColor } from "../color/color_pallet"; import React from "react"; import { useRouter } from "next/navigation"; +interface MODEL_DRAWER { + id: string; + name: string; + icon: string; + path: string; +} export default function ComponentGlobal_UI_Drawer({ opened, close, @@ -19,7 +25,7 @@ export default function ComponentGlobal_UI_Drawer({ }: { opened: boolean; close: () => void; - component: any[]; + component: MODEL_DRAWER[] | any[]; }) { const router = useRouter(); return ( @@ -32,10 +38,16 @@ export default function ComponentGlobal_UI_Drawer({ withCloseButton={false} styles={{ content: { + padding: 0, + position: "absolute", + margin: "auto", backgroundColor: "transparent", + left: 0, + right: 0, + width: 500, }, body: { - backgroundColor: MainColor.darkblue, + backgroundColor: AccentColor.darkblue, borderTop: `2px solid ${AccentColor.blue}`, borderRight: `1px solid ${AccentColor.blue}`, borderLeft: `1px solid ${AccentColor.blue}`, @@ -51,7 +63,7 @@ export default function ComponentGlobal_UI_Drawer({ - + {component.map((e, i) => ( {e.icon} - {e.name} + + {e.name} + ))} diff --git a/src/app_modules/component_global/ui/ui_layout_tamplate.tsx b/src/app_modules/component_global/ui/ui_layout_tamplate.tsx index d9823a7a..d7cce1d6 100644 --- a/src/app_modules/component_global/ui/ui_layout_tamplate.tsx +++ b/src/app_modules/component_global/ui/ui_layout_tamplate.tsx @@ -27,11 +27,12 @@ export default function LayoutGlobal_UI_Tamplate({ h={"100%"} style={{ overflowY: "auto", + overflowX: "auto", backgroundColor: MainColor.black, position: "fixed", }} > - + Tunggu Konfirmasi Admin ! - + diff --git a/src/app_modules/job/detail/draft/layout.tsx b/src/app_modules/job/detail/draft/layout.tsx index 90dc406a..4d322916 100644 --- a/src/app_modules/job/detail/draft/layout.tsx +++ b/src/app_modules/job/detail/draft/layout.tsx @@ -14,7 +14,7 @@ import { } from "@mantine/core"; import React from "react"; import ComponentJob_HeaderTamplate from "../../component/header_tamplate"; -import { IconDots, IconEdit, IconX } from "@tabler/icons-react"; +import { IconDots, IconDotsVertical, IconEdit, IconX } from "@tabler/icons-react"; import { RouterJob } from "@/app/lib/router_hipmi/router_job"; import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate"; import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate"; @@ -54,7 +54,7 @@ export default function LayoutJob_DetailDraft({ title="Detail Draft" iconRight={ open()}> - + } // routerRight={} diff --git a/src/app_modules/katalog/component/button_header_right.tsx b/src/app_modules/katalog/component/button_header_right.tsx new file mode 100644 index 00000000..dc0bdd32 --- /dev/null +++ b/src/app_modules/katalog/component/button_header_right.tsx @@ -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 ? ( + + ) : ( + open()}> + + + )} + + close()} + profileId={profileId} + /> + + ); +} diff --git a/src/app_modules/katalog/component/drawer_katalog.tsx b/src/app_modules/katalog/component/drawer_katalog.tsx new file mode 100644 index 00000000..135837f0 --- /dev/null +++ b/src/app_modules/katalog/component/drawer_katalog.tsx @@ -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: , + path: RouterProfile.edit + profileId, + }, + { + id: "2", + name: "Ubah Foto Profile", + icon: , + path: RouterProfile.update_foto_profile + profileId, + }, + { + id: "3", + name: "Ubah Latar Belakang", + icon: , + path: RouterProfile.update_foto_background + profileId, + }, + ]; + + return ( + <> + 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%", + }, + }} + > + + + + + + + + {listPage.map((e, i) => ( + + { + router.push(e.path); + setPageId(e?.id); + setIsLoading(true) + }} + > + {isLoading && e.id === pageId ? : e.icon} + + + {e.name} + + + ))} + + + + + + ); +} diff --git a/src/app_modules/katalog/index.ts b/src/app_modules/katalog/index.ts index 215b6612..c95adbb5 100644 --- a/src/app_modules/katalog/index.ts +++ b/src/app_modules/katalog/index.ts @@ -1,3 +1,4 @@ import HeaderTransparent from "./component/header_transparent"; -export {HeaderTransparent as headerTransparent} \ No newline at end of file +export { HeaderTransparent as headerTransparent }; +export { Katalog_MainView } from "./view_katalog"; diff --git a/src/app_modules/katalog/main/index.ts b/src/app_modules/katalog/main/index.ts index e1ebf6e6..d45aca2e 100644 --- a/src/app_modules/katalog/main/index.ts +++ b/src/app_modules/katalog/main/index.ts @@ -1,4 +1,4 @@ -import KatalogView from "./view"; +import KatalogView from "./view_katalog"; import KatalogLayout from "./layout"; export {KatalogView, KatalogLayout} \ No newline at end of file diff --git a/src/app_modules/katalog/main/layout.tsx b/src/app_modules/katalog/main/layout.tsx index f6707ee2..c20e6148 100644 --- a/src/app_modules/katalog/main/layout.tsx +++ b/src/app_modules/katalog/main/layout.tsx @@ -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 ( <> - - - { - router.back(); - }} - > - - - - Katalog - - - {/* router.push(RouterAdminDashboard.splash_admin)} - > - - */} - - + + } + /> } > {children} - - - ); - - return ( - <> - - - { - router.back(); - }} - > - - - - Katalog - - - {/* router.push(RouterAdminDashboard.splash_admin)} - > - - */} - - - } - > - {children} - + ); } diff --git a/src/app_modules/katalog/main/view.tsx b/src/app_modules/katalog/main/view.tsx deleted file mode 100644 index ae6263ce..00000000 --- a/src/app_modules/katalog/main/view.tsx +++ /dev/null @@ -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 ( - <> - - - - - {profile?.User.id === userLoginId ? : ""} - - - - ); -} diff --git a/src/app_modules/katalog/main/view_katalog.tsx b/src/app_modules/katalog/main/view_katalog.tsx new file mode 100644 index 00000000..d8eb6f19 --- /dev/null +++ b/src/app_modules/katalog/main/view_katalog.tsx @@ -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 ( + <> + + + + + + ); +} diff --git a/src/app_modules/katalog/portofolio/create/view.tsx b/src/app_modules/katalog/portofolio/create/view.tsx index 33326b5d..b690a15b 100644 --- a/src/app_modules/katalog/portofolio/create/view.tsx +++ b/src/app_modules/katalog/portofolio/create/view.tsx @@ -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, diff --git a/src/app_modules/katalog/portofolio/list_view/view.tsx b/src/app_modules/katalog/portofolio/list_view/view.tsx index 9906372b..f6efd726 100644 --- a/src/app_modules/katalog/portofolio/list_view/view.tsx +++ b/src/app_modules/katalog/portofolio/list_view/view.tsx @@ -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(""); diff --git a/src/app_modules/katalog/portofolio/ui_portofolio.tsx b/src/app_modules/katalog/portofolio/ui_portofolio.tsx new file mode 100644 index 00000000..0b04792b --- /dev/null +++ b/src/app_modules/katalog/portofolio/ui_portofolio.tsx @@ -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 ( + <> + + + + + Portofolio + {profile?.User.id === userLoginId ? ( + { + router.push(RouterPortofolio.create + `${profile.id}`); + setLoading(true); + }} + > + {loading ? ( + + ) : ( + + )} + + ) : ( + + )} + + + + {_.isEmpty(listPorto) ? ( +
+ + - Belum Ada Portofolio - + +
+ ) : ( + + {listPorto.map((e, i) => ( + { + setIdPorto(e?.id); + setLoadingPorto(true); + router.push(`/dev/portofolio/main/${e?.id}/`); + }} + > + + + + {e?.namaBisnis} + + + + + {idPorto === e?.id && loadingPorto ? ( + + ) : ( + + )} + + + + + ))} + + )} + + + + + + ); +} diff --git a/src/app_modules/katalog/profile/edit/view.tsx b/src/app_modules/katalog/profile/edit/view.tsx index ff14742e..51793b8e 100644 --- a/src/app_modules/katalog/profile/edit/view.tsx +++ b/src/app_modules/katalog/profile/edit/view.tsx @@ -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(); diff --git a/src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts b/src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts index 68a34ee7..9403b99a 100644 --- a/src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts +++ b/src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts @@ -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; diff --git a/src/app_modules/katalog/profile/index.ts b/src/app_modules/katalog/profile/index.ts index 2590cf5e..b23c734c 100644 --- a/src/app_modules/katalog/profile/index.ts +++ b/src/app_modules/katalog/profile/index.ts @@ -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 }; + diff --git a/src/app_modules/katalog/profile/main/view.tsx b/src/app_modules/katalog/profile/main/view_profile.tsx similarity index 96% rename from src/app_modules/katalog/profile/main/view.tsx rename to src/app_modules/katalog/profile/main/view_profile.tsx index 0a25fdf7..b8d0a8c4 100644 --- a/src/app_modules/katalog/profile/main/view.tsx +++ b/src/app_modules/katalog/profile/main/view_profile.tsx @@ -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 ( <> {/* 
{JSON.stringify(profile, null,2)}
*/} - + {/* Background dan foto */} {/* Upload Background Profile */} diff --git a/src/app_modules/katalog/profile/ui_profile.tsx b/src/app_modules/katalog/profile/ui_profile.tsx new file mode 100644 index 00000000..541ab28d --- /dev/null +++ b/src/app_modules/katalog/profile/ui_profile.tsx @@ -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: , + value: profile?.User.nomor, + }, + { + icon: , + value: profile?.email, + }, + { + icon: , + value: profile?.alamat, + }, + { + icon: + profile.jenisKelamin === "Laki-laki" ? ( + + ) : ( + + ), + value: profile?.jenisKelamin, + }, + ]; + + return ( + <> + + + Background + +
+ +
+ + + {profile?.name} + + + @{profile?.User?.username} + + + + + + + + {listInformation.map((e, i) => ( + + + {e.icon} + + + {e?.value} + + + ))} + + + {/* 
+          {JSON.stringify(profile, null, 2)}
+
*/} + + + ); +} diff --git a/src/app_modules/katalog/ui/ui_katalog.tsx b/src/app_modules/katalog/ui/ui_katalog.tsx new file mode 100644 index 00000000..bee69dbe --- /dev/null +++ b/src/app_modules/katalog/ui/ui_katalog.tsx @@ -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 ( + <> + + + + + + ); +} \ No newline at end of file diff --git a/src/app_modules/katalog/view_katalog.tsx b/src/app_modules/katalog/view_katalog.tsx new file mode 100644 index 00000000..5829b0a3 --- /dev/null +++ b/src/app_modules/katalog/view_katalog.tsx @@ -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 ( + <> + + + ); +} diff --git a/src/app_modules/zCoba/index.tsx b/src/app_modules/zCoba/index.tsx index 50213dba..e38bc529 100644 --- a/src/app_modules/zCoba/index.tsx +++ b/src/app_modules/zCoba/index.tsx @@ -2,36 +2,16 @@ import { ActionIcon, - Affix, - BackgroundImage, Box, Button, - Center, - Group, - LoadingOverlay, - Paper, - ScrollArea, - SimpleGrid, - Skeleton, - Stack, - Text, - rem, + Stack } from "@mantine/core"; import { useState } from "react"; -import useInfiniteScroll, { - ScrollDirection, -} from "react-easy-infinite-scroll-hook"; -import { createItems, loadMore } from "./utils"; -import { v4 as uuidv4 } from "uuid"; -import { useShallowEffect } from "@mantine/hooks"; -import { ScrollOnly } from "next-scroll-loader"; +import { IconPencilPlus } from "@tabler/icons-react"; import _ from "lodash"; -import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2"; import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate"; -import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate"; -import { Icon123, IconPencilPlus, IconX } from "@tabler/icons-react"; -import { AccentColor, MainColor } from "../component_global/color/color_pallet"; + const newData = Array(20) .fill(0) @@ -56,49 +36,16 @@ const data2 = [ ]; export default function Coba_TestLoading() { - // const [data, setData] = useState(newData); - // const [isLoading, setIsLoading] = useState(false); - - // return ( - // <> - // { - // const newData = Array.from( - // { length: 50 }, - // (_, i) => i + data.length + 1 - // ); - // await new Promise((resolve) => setTimeout(resolve, 2000)); - // return newData; - // }} - // > - // {(item) =>
{item}
} - // - // - // ); - const [data, setData] = useState(data2); + const [openDrawer, setOpenDrawer] = useState(false); return ( <> - + {/* */} + - - ); - return ( - <> - - {Array(50) - .fill(0) - .map((e, i) => ( - {i + 1} - ))} - - ); @@ -174,71 +121,3 @@ function CreateButton() { ); } - -function BackgroundImageComponent() { - const footer = ( - - {Array.from({ length: 4 }).map((e, i) => ( -
- - - - - Apa - -
- ))} - - ); - return ( - <> - - {/* Header */} - - - - - {/* Children */} - - - {Array.from({ length: 10 }).map((e, i) => ( - - {i + 1} - - ))} - - - - {/* Footer */} - - - {footer} - - - - - ); -}