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

Merge pull request #71 from bipproduction/ui/profile

Browse Source 
UI/profile
This commit is contained in:
Bagasbanuna02
2024-07-10 17:12:25 +08:00
committed by GitHub
parent cbe4a7b2c0 ab6f2fe8a7
commit cd1a43135c
133 changed files with 3087 additions and 2376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/portofolio/logo/55409a1f-8d3d-455a-b5bf-10cd64eda28b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
public/portofolio/logo/a7ebdb61-1200-45b3-b868-ed9cc811c8b8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
public/portofolio/logo/c457514a-9b0b-48b8-8ae6-2d903f8964bc.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

20
src/app/dev/home/layout.tsx
View File

@@ -1,20 +0,0 @@
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { HomeLayout } from "@/app_modules/home";
import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
import { redirect } from "next/navigation";
export default async function Layout({ children }: { children: any }) {
const userId = await user_getOneUserId();
const dataUser = await user_getOneByUserId(userId);
const countNotifikasi = await notifikasi_countUserNotifikasi();
return (
<>
<HomeLayout dataUser={dataUser as any} countNotifikasi={countNotifikasi}>
{children}
</HomeLayout>
</>
);
}

9
src/app/dev/home/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
{/* <ComponentGlobal_V2_LoadingPage /> */}
</>
);
}

9
src/app/dev/home/page.tsx
View File

@@ -4,6 +4,7 @@ import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
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 { redirect } from "next/navigation";
export default async function Page() {
@@ -24,9 +25,15 @@ export default async function Page() {
// setTimeout(a, 3000);
// });
const countNotifikasi = await notifikasi_countUserNotifikasi();
return (
<>
<HomeView dataUser={dataUser as any} dataJob={dataJob as any} />
<HomeView
dataUser={dataUser as any}
dataJob={dataJob as any}
countNotifikasi={countNotifikasi}
/>
</>
);
}

25
src/app/dev/katalog/[id]/layout.tsx
View File

@@ -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 (
<>
<KatalogLayout profileId={params.id}>{children}</KatalogLayout>
<KatalogLayout
profileId={profileId}
userLoginId={userLoginId}
authorId={authorId as any}
>
{children}
</KatalogLayout>
</>
);
}

9
src/app/dev/katalog/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

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

@@ -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 (
<>
<KatalogView
<Katalog_MainView
profile={dataProfile as any}
listPorto={listPorto as any}
userLoginId={authorId}
userLoginId={userLoginId}
/>
</>
);

3
src/app/dev/notifikasi/page.tsx
View File

@@ -1,9 +1,8 @@
import { Notifikasi_MainView } from "@/app_modules/notifikasi";
import notifikasi_getByUserId from "@/app_modules/notifikasi/fun/get/get_notifiaksi_by_id";
export default async function Page() {
const listNotifikasi = await notifikasi_getByUserId()
const listNotifikasi = await notifikasi_getByUserId({ page: 1 });
return (
<>

9
src/app/dev/portofolio/create/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

17
src/app/dev/portofolio/daftar-portofolio/[id]/page.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Portofolio_ViewListDetail } from "@/app_modules/katalog/portofolio";
import { portofolio_funGetAllDaftarByid } from "@/app_modules/katalog/portofolio/fun/get/get_all_portofolio";
export default async function Page({ params }: { params: { id: string } }) {
const profileId = params.id;
const dataPortofolio = await portofolio_funGetAllDaftarByid({
profileId,
page: 1,
});
return (
<>
<Portofolio_ViewListDetail dataPortofolio={dataPortofolio as any} profileId={profileId} />
</>
);
}

9
src/app/dev/portofolio/edit/data/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

9
src/app/dev/portofolio/edit/logo/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

9
src/app/dev/portofolio/edit/medsos/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

9
src/app/dev/portofolio/main/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

9
src/app/dev/portofolio/main/[id]/page.tsx
View File

@@ -4,14 +4,15 @@ import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/
export default async function Page({ params }: { params: { id: string } }) {
const getPorto = await portofolio_getOneById(params.id);
const userLoginId = await user_getOneUserId()
const userLoginId = await user_getOneUserId();
return (
<>
{/* {JSON.stringify(getPorto)} */}
<ViewPortofolio dataPorto={getPorto as any} userLoginId={userLoginId as any} />
<ViewPortofolio
dataPorto={getPorto as any}
userLoginId={userLoginId as any}
/>
</>
);
}

9
src/app/dev/profile/create/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

9
src/app/dev/profile/edit/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

16
src/app/dev/profile/upload/background/[id]/layout.tsx
View File

@@ -1,8 +1,16 @@
import LayoutProfile_UpdateFotoBackground from "@/app_modules/katalog/profile/upload/foto_background/layout";
import React from "react";
export default async function Layout({children}: {children: React.ReactNode}) {
return<>
<LayoutProfile_UpdateFotoBackground>{children}</LayoutProfile_UpdateFotoBackground>
export default async function Layout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<LayoutProfile_UpdateFotoBackground>
{children}
</LayoutProfile_UpdateFotoBackground>
</>
}
);
}

9
src/app/dev/profile/upload/background/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

15
src/app/dev/profile/upload/foto/[id]/layout.tsx
View File

@@ -1,9 +1,14 @@
import { UploadFotoProfileLayout } from "@/app_modules/katalog/profile";
import React from "react";
export default async function Layout({children, params}: {children: React.ReactNode, params: {id: string}}) {
let profileId = params.id
return <>
<UploadFotoProfileLayout profileId={profileId} >{children}</UploadFotoProfileLayout>
export default async function Layout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<UploadFotoProfileLayout>{children}</UploadFotoProfileLayout>
</>
}
);
}

9
src/app/dev/profile/upload/foto/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

4
src/app/dev/user_search/main/page.tsx → src/app/dev/user-search/page.tsx
View File

@@ -1,8 +1,8 @@
import { UserSearch_MainView } from "@/app_modules/user_search";
import { UserSearch_getListUser } from "@/app_modules/user_search/fun/get/get_list_user";
import { userSearch_getAllUser } from "@/app_modules/user_search/fun/get/get_all_user";
export default async function Page() {
const listUser = await UserSearch_getListUser({ name: "" });
const listUser = await userSearch_getAllUser({ page: 1 });
return <UserSearch_MainView listUser={listUser as any} />;
}

10
src/app/dev/user_search/main/layout.tsx
View File

@@ -1,10 +0,0 @@
import { LayoutUserSearch_MainView } from "@/app_modules/user_search";
import React from "react";
export default async function Layout({
children,
}: {
children: React.ReactNode;
}) {
return <LayoutUserSearch_MainView>{children}</LayoutUserSearch_MainView>;
}

4
src/app/lib/router_hipmi/router_katalog.ts
View File

@@ -19,9 +19,13 @@ export const RouterProfile = {
};
export const RouterPortofolio = {
main_detail: "/dev/portofolio/main/",
api_logo_porto: "/api/portofolio/logo/",
create: "/dev/portofolio/create/",
daftar_portofolio: "/dev/portofolio/daftar-portofolio/",
//edit
edit_data_bisnis: "/dev/portofolio/edit/data/",
edit_logo_bisnis: "/dev/portofolio/edit/logo/",

2
src/app/lib/router_hipmi/router_user_search.ts
View File

@@ -1,3 +1,3 @@
export const RouterUserSearch = {
main: "/dev/user_search/main"
main: "/dev/user-search"
}

2
src/app/zCoba/page.tsx
View File

@@ -1,5 +1,5 @@
import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import Coba_TestLoading from "@/app_modules/zCoba";
import { Text } from "@mantine/core";

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

@@ -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,
};

106
src/app_modules/auth/logout/view.tsx
View File

@@ -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 (
<>
<Modal opened={opened} onClose={toggle} centered withCloseButton={false}>
<Stack>
<Title order={6}>Anda yakin ingin keluar ?</Title>
<Group align="center" position="center">
<Button
onClick={() => {
setLoading(false);
toggle();
}}
radius={50}
>
Batal
</Button>
<Button
loaderPosition="center"
loading={loading2 ? true : false}
radius={50}
bg={Warna.merah}
color="red"
onClick={() => {
setLoading2(true);
onClickLogout();
}}
>
Keluar
</Button>
</Group>
</Stack>
</Modal>
{/* <ActionIcon variant="transparent">
<IconLogout color={Warna.merah} onClick={toggle} />
</ActionIcon> */}
<Button
loading={loading ? true : false}
loaderPosition="center"
radius={"xl"}
color={"red"}
onClick={() => {
setLoading(true);
toggle();
}}
>
Logout
</Button>
<ComponentGlobal_UI_Modal
title={"Anda yakin ingin keluar ?"}
buttonKiri={
<Button
onClick={() => {
setLoading(false);
setOpened(false);
}}
radius={50}
>
Batal
</Button>
}
buttonKanan={
<Button
loaderPosition="center"
loading={loading ? true : false}
radius={50}
bg={Warna.merah}
color="red"
onClick={() => {
setLoading(true);
onClickLogout();
}}
>
Keluar
</Button>
}
opened={opened}
close={() => setOpened(false)}
/>
<Stack align="center" spacing={"xs"}>
<ActionIcon
variant="transparent"
c="white"
onClick={() => {
setOpened(true);
}}
>
<IconLogout color="red" />
</ActionIcon>
<Text fw={"bold"} align="center" color="red">
Keluar
</Text>
</Stack>
</>
);
}

2
src/app_modules/auth/register/view.tsx
View File

@@ -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);
}

9
src/app_modules/auth/splash/view.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { MainColor } from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_SplashScreen from "@/app_modules/component_global/splash/splash_global";
import { BackgroundImage, Center, Image, Paper, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
@@ -11,12 +12,12 @@ export default function SplashScreen({ data }: { data: any }) {
useShallowEffect(() => {
if (!data) {
setTimeout(() => {
return router.push("/dev/auth/login");
}, 2000);
return router.push("/dev/auth/login", { scroll: false });
}, 1000);
} else {
setTimeout(() => {
return router.push("/dev/home");
}, 2000);
return router.push("/dev/home", { scroll: false });
}, 1000);
}
}, []);

2
src/app_modules/auth/validasi/view.tsx
View File

@@ -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);
}

6
src/app_modules/component_global/splash/splash_global.tsx
View File

@@ -1,20 +1,20 @@
"use client";
import { Stack, Loader, ActionIcon, ThemeIcon } from "@mantine/core";
import ComponentGlobal_UI_LayoutTamplate from "../ui/ui_layout_tamplate";
import UIGlobal_LayoutTamplate from "../ui/ui_layout_tamplate";
import { IconMessages, IconX } from "@tabler/icons-react";
export default function ComponentGlobal_SplashScreen({ icon }: { icon: any }) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate>
<UIGlobal_LayoutTamplate>
<Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
<ThemeIcon variant="transparent" size={300} c="white">
{icon}
</ThemeIcon>
<Loader variant="dots" color="white" />
</Stack>
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

58
src/app_modules/component_global/ui/ui_drawer.tsx
View File

@@ -1,17 +1,23 @@
import {
Drawer,
Stack,
Group,
ActionIcon,
Drawer,
Group,
SimpleGrid,
Stack,
Text,
Box,
} from "@mantine/core";
import { IconX, IconEdit } from "@tabler/icons-react";
import { MainColor, AccentColor } from "../color/color_pallet";
import React from "react";
import { IconX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { AccentColor } from "../color/color_pallet";
import ComponentGlobal_UI_Loader from "./ui_loader";
interface MODEL_DRAWER {
id: string;
name: string;
icon: string;
path: string;
}
export default function ComponentGlobal_UI_Drawer({
opened,
close,
@@ -19,9 +25,19 @@ export default function ComponentGlobal_UI_Drawer({
}: {
opened: boolean;
close: () => void;
component: any[];
component:
| {
id: string;
name: string;
icon: string;
path: string;
}[]
| any[];
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [pageId, setPageId] = useState("");
return (
<>
<Drawer
@@ -32,10 +48,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,17 +73,27 @@ export default function ComponentGlobal_UI_Drawer({
<IconX color="white" />
</ActionIcon>
</Group>
<SimpleGrid cols={4}>
<SimpleGrid cols={component.length < 4 ? component.length : 4}>
{component.map((e, i) => (
<Stack key={i} align="center" spacing={"xs"}>
<ActionIcon
variant="transparent"
c="white"
onClick={() => router.push(e.path)}
onClick={() => {
setPageId(e?.id);
setIsLoading(true);
router.push(e?.path);
}}
>
{e.icon}
{isLoading && e?.id === pageId ? (
<ComponentGlobal_UI_Loader />
) : (
e?.icon
)}
</ActionIcon>
<Text color="white">{e.name}</Text>
<Text align="center" color="white">
{e?.name}
</Text>
</Stack>
))}
</SimpleGrid>

16
src/app_modules/component_global/ui/ui_header_tamplate.tsx
View File

@@ -11,19 +11,21 @@ import {
} from "@mantine/core";
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import React, { useState } from "react";
import { AccentColor, MainColor } from "../color/color_pallet";
export default function ComponentGlobal_UI_HeaderTamplate({
export default function UIGlobal_LayoutHeaderTamplate({
title,
posotion,
// left button
hideButtonLeft,
iconLeft,
routerLeft,
customButtonLeft,
// right button
iconRight,
routerRight,
customButtonRight,
}: {
title: string;
posotion?: any;
@@ -31,9 +33,11 @@ export default function ComponentGlobal_UI_HeaderTamplate({
hideButtonLeft?: boolean;
iconLeft?: any;
routerLeft?: any;
customButtonLeft?: React.ReactNode;
// right button
iconRight?: any;
routerRight?: any;
customButtonRight?: React.ReactNode;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
@@ -53,6 +57,8 @@ export default function ComponentGlobal_UI_HeaderTamplate({
<Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
{hideButtonLeft ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : customButtonLeft ? (
customButtonLeft
) : (
<ActionIcon
c={"white"}
@@ -62,7 +68,7 @@ export default function ComponentGlobal_UI_HeaderTamplate({
setIsLoading(true);
routerLeft === undefined
? router.back()
: router.push(routerLeft);
: router.push(routerLeft, { scroll: false });
}}
>
{isLoading ? (
@@ -79,7 +85,9 @@ export default function ComponentGlobal_UI_HeaderTamplate({
{title}
</Title>
{iconRight === undefined ? (
{customButtonRight ? (
customButtonRight
) : iconRight === undefined ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : routerRight === undefined ? (
<Box>{iconRight}</Box>

149
src/app_modules/component_global/ui/ui_layout_tamplate.tsx
View File

@@ -1,13 +1,17 @@
"use client";
import {
BackgroundImage,
Box,
Container,
Footer,
rem,
ScrollArea,
} from "@mantine/core";
import { AccentColor, MainColor } from "../color/color_pallet";
import React from "react";
export default function ComponentGlobal_UI_LayoutTamplate({
export default function UIGlobal_LayoutTamplate({
children,
header,
footer,
@@ -18,56 +22,105 @@ export default function ComponentGlobal_UI_LayoutTamplate({
}) {
return (
<>
<BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"} style={{position: "relative"}}>
{/* Header */}
{header ? (
<Box
h={"8vh"}
style={{
zIndex: 10,
}}
w={"100%"}
pos={"sticky"}
top={0}
<Box
w={"100%"}
h={"100%"}
style={{
overflowY: "auto",
overflowX: "auto",
backgroundColor: MainColor.black,
position: "fixed",
}}
>
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue} >
<BackgroundImage
src={"/aset/global/main_background.png"}
h={"100vh"}
style={{ position: "relative" }}
>
{header}
</Box>
) : (
""
)}
<UIHeader header={header} />
{/* Children */}
<Box style={{zIndex: 0}} h={footer ? "82vh" : "92vh"} pos={"static"}>
<ScrollArea h={"100%"} px={"md"}>
{children}
</ScrollArea>
</Box>
<UIChildren footer={footer}>{children}</UIChildren>
{/* Footer */}
{footer ? (
<Box style={{ position: "relative", bottom: 0 }} >
<Box
style={{
zIndex: 10,
borderRadius: "20px 20px 0px 0px",
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
width: "100%",
}}
bg={AccentColor.darkblue}
color="blue"
pos={"absolute"}
// bottom={0}
h={"10vh"}
>
{footer}
</Box>
</Box>
) : (
""
)}
</BackgroundImage>
<UIFooter footer={footer} />
</BackgroundImage>
</Container>
</Box>
</>
);
}
function UIHeader({ header }: { header: React.ReactNode }) {
return (
<>
{header ? (
<Box
h={"8vh"}
style={{
zIndex: 10,
}}
w={"100%"}
pos={"sticky"}
top={0}
>
{header}
</Box>
) : (
""
)}
</>
);
}
function UIChildren({
children,
footer,
}: {
children: React.ReactNode;
footer: React.ReactNode;
}) {
return (
<>
<Box style={{ zIndex: 0 }} h={footer ? "82vh" : "92vh"} pos={"static"}>
<ScrollArea h={"100%"} px={"md"}>
{children}
</ScrollArea>
</Box>
</>
);
}
function UIFooter({ footer }: { footer: React.ReactNode }) {
return (
<>
{footer ? (
<Box
style={{
position: "relative",
bottom: 0,
height: "10vh",
zIndex: 10,
borderRadius: "20px 20px 0px 0px",
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
}}
bg={AccentColor.darkblue}
>
<Box
h={"100%"}
style={{
borderRadius: "20px 20px 0px 0px",
width: "100%",
}}
pos={"absolute"}
>
{footer}
</Box>
</Box>
) : (
""
)}
</>
);
}

10
src/app_modules/component_global/ui/ui_loader.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { Loader } from "@mantine/core";
import { MainColor } from "../color/color_pallet";
export default function ComponentGlobal_UI_Loader({ size }: { size?: number }) {
return (
<>
<Loader color={MainColor.yellow} size={size ? size : 20} />
</>
);
}

66
src/app_modules/forum/component/detail_component/ui_report_komentar.tsx Normal file
View File

@@ -0,0 +1,66 @@
"use client"
import { Stack, Paper, Text, List, Box } from "@mantine/core";
import { useState } from "react";
import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
export function ComponentForum_UiDetailReportKomentar({
dataKomentar,
}: {
dataKomentar: any;
}) {
const [data, setData] = useState<MODEL_FORUM_KOMENTAR>(dataKomentar.data);
const [list, setList] = useState<any[]>(dataKomentar.list);
return (
<>
<Box
p={"md"}
style={{
backgroundColor: MainColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px 10px 10px 10px",
}}
>
<Stack c="white">
<Text fw={"bold"} align="center" mb={"lg"}>
Komentar anda telah dihapus dari sebuah postingan oleh ADMIN, karena
memiliki beberapa laporan dari pengguna lain !
</Text>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Komentar anda</Text>
<Paper withBorder p={"sm"}>
<Text>
<div dangerouslySetInnerHTML={{ __html: data.komentar }} />
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>
Pada postingan : {data.Forum_Posting.Author.username}
</Text>
<Paper withBorder p={"sm"}>
<Text>
<div
dangerouslySetInnerHTML={{
__html: data.Forum_Posting.diskusi,
}}
/>
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Laporan yang diterima :</Text>
<List withPadding>
{list.map((x, i) => (
<List.Item c={"white"} key={i}>{x}</List.Item>
))}
</List>
</Stack>
</Stack>
</Box>
</>
);
}

61
src/app_modules/forum/component/detail_component/ui_report_posting.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client";
import { Stack, Paper, Text, List, Box } from "@mantine/core";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export function ComponentForum_UiDetailReportPosting({
dataPosting,
}: {
dataPosting: any;
}) {
const [data, setData] = useState<MODEL_FORUM_POSTING>(dataPosting.data);
const [list, setList] = useState<any[]>(dataPosting.list);
return (
<>
<Box
p={"md"}
style={{
backgroundColor: MainColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px 10px 10px 10px",
}}
>
<Stack c="white">
<Text fw={"bold"} align="center" mb={"lg"}>
Postingan anda telah dihapus dari beranda oleh ADMIN, karena
memiliki beberapa laporan dari pengguna lain !
</Text>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Pada postingan</Text>
<Paper withBorder p={"sm"}>
<Text>
<div
dangerouslySetInnerHTML={{
__html: data.diskusi,
}}
/>
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Laporan yang diterima :</Text>
<List withPadding>
{list.map((x, i) => (
<List.Item c={"white"} key={i}>
{x}
</List.Item>
))}
</List>
</Stack>
</Stack>
</Box>
</>
);
}

10
src/app_modules/forum/create/layout.tsx
View File

@@ -4,8 +4,8 @@ import { AppShell } from "@mantine/core";
import React from "react";
import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_Create({
children,
@@ -14,11 +14,11 @@ export default function LayoutForum_Create({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Postingan"/>}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Tambah Postingan"/>}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>

71
src/app_modules/forum/detail/detail_report_komentar.tsx
View File

@@ -1,19 +1,7 @@
"use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { ComponentForum_UiDetailReportKomentar } from "../component/detail_component/ui_report_komentar";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import {
Box,
Center,
Group,
List,
Paper,
Stack,
Text,
Title,
} from "@mantine/core";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
import { useState } from "react";
export default function Forum_DetailReportKomentar({
dataKomentar,
@@ -22,58 +10,13 @@ export default function Forum_DetailReportKomentar({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentForum_HeaderTamplate title="Report Komentar" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Report Komentar" />}
>
{<View dataKomentar={dataKomentar} />}
</AppComponentGlobal_LayoutTamplate>
{<ComponentForum_UiDetailReportKomentar dataKomentar={dataKomentar} />}
</UIGlobal_LayoutTamplate>
</>
);
}
function View({ dataKomentar }: { dataKomentar: any }) {
const [data, setData] = useState<MODEL_FORUM_KOMENTAR>(dataKomentar.data);
const [list, setList] = useState<any[]>(dataKomentar.list);
return (
<>
<Stack>
<Text fw={"bold"} align="center" mb={"lg"}>
Komentar anda telah dihapus dari sebuah postingan oleh ADMIN, karena
memiliki beberapa laporan dari pengguna lain !
</Text>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Komentar anda</Text>
<Paper withBorder p={"sm"}>
<Text>
<div dangerouslySetInnerHTML={{ __html: data.komentar }} />
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>
Pada postingan : {data.Forum_Posting.Author.username}
</Text>
<Paper withBorder p={"sm"}>
<Text>
<div
dangerouslySetInnerHTML={{
__html: data.Forum_Posting.diskusi,
}}
/>
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Laporan yang diterima :</Text>
<List withPadding>
{list.map((x, i) => (
<List.Item key={i}>{x}</List.Item>
))}
</List>
</Stack>
</Stack>
</>
);
}

57
src/app_modules/forum/detail/detail_report_posting.tsx
View File

@@ -1,10 +1,7 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import { List, Paper, Stack, Text } from "@mantine/core";
import { MODEL_FORUM_POSTING } from "../model/interface";
import { useState } from "react";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { Stack, Text } from "@mantine/core";
import { ComponentForum_UiDetailReportPosting } from "../component/detail_component/ui_report_posting";
export default function Forum_DetailReportPosting({
dataPosting,
@@ -13,49 +10,11 @@ export default function Forum_DetailReportPosting({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentForum_HeaderTamplate title="Report Posting" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Report Posting" />}
>
<View dataPosting={dataPosting} />
</AppComponentGlobal_LayoutTamplate>
</>
);
}
function View({ dataPosting }: { dataPosting: any }) {
const [data, setData] = useState<MODEL_FORUM_POSTING>(dataPosting.data);
const [list, setList] = useState<any[]>(dataPosting.list);
return (
<>
<Stack>
<Text fw={"bold"} align="center" mb={"lg"}>
Postingan anda telah dihapus dari beranda oleh ADMIN, karena memiliki
beberapa laporan dari pengguna lain !
</Text>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Pada postingan</Text>
<Paper withBorder p={"sm"}>
<Text>
<div
dangerouslySetInnerHTML={{
__html: data.diskusi,
}}
/>
</Text>
</Paper>
</Stack>
<Stack spacing={"xs"}>
<Text fw={"bold"}>Laporan yang diterima :</Text>
<List withPadding>
{list.map((x, i) => (
<List.Item key={i}>{x}</List.Item>
))}
</List>
</Stack>
</Stack>
<ComponentForum_UiDetailReportPosting dataPosting={dataPosting} />
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/forum/detail/layout.tsx
View File

@@ -8,8 +8,8 @@ import { IconChevronLeft } from "@tabler/icons-react";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import { revalidatePath } from "next/cache";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export const dynamic = "force-dynamic";
export default function LayoutForum_Detail({
@@ -24,11 +24,11 @@ export default function LayoutForum_Detail({
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Postingan" posotion={"left"} />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Postingan" posotion={"left"} />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={

10
src/app_modules/forum/edit/posting/layout.tsx
View File

@@ -4,8 +4,8 @@ import { AppShell } from "@mantine/core";
import React from "react";
import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_EditPosting({
children,
@@ -14,11 +14,11 @@ export default function LayoutForum_EditPosting({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Edit Postingan" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Postingan" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={<ComponentForum_HeaderTamplate title="Edit Postingan" />}

10
src/app_modules/forum/forumku/layout.tsx
View File

@@ -6,8 +6,8 @@ import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { IconX } from "@tabler/icons-react";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_Forumku({
children,
@@ -18,16 +18,16 @@ export default function LayoutForum_Forumku({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title={`${username}`}
iconLeft={<IconX />}
/>
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={

4
src/app_modules/forum/main/beranda.tsx
View File

@@ -158,7 +158,7 @@ export default function Forum_Beranda({
</ActionIcon>
</Affix>
<Stack spacing={"xl"}>
<Stack spacing={"xl"} >
<TextInput
radius={"xl"}
placeholder="Topik forum apa yang anda cari hari ini ?"
@@ -179,7 +179,7 @@ export default function Forum_Beranda({
) : (
// --- Main component --- //
<ScrollOnly
height="83vh"
height="85vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />

10
src/app_modules/forum/main/layout.tsx
View File

@@ -26,8 +26,8 @@ import { MODEL_USER } from "@/app_modules/home/model/interface";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_Main({
children,
@@ -43,9 +43,9 @@ export default function LayoutForum_Main({
return (
<>
<ComponentGlobal_UI_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title="FORUM"
iconRight={
<ActionIcon
@@ -80,7 +80,7 @@ export default function LayoutForum_Main({
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={

10
src/app_modules/forum/report/komentar/layout.tsx
View File

@@ -3,8 +3,8 @@
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import React from "react";
import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutForum_ReportKomentar({
children,
@@ -13,13 +13,13 @@ export default function LayoutForum_ReportKomentar({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Komentar" />
<UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Komentar" />
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={
<ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Komentar"/>

10
src/app_modules/forum/report/posting/layout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutForum_ReportPosting({
@@ -11,13 +11,13 @@ export default function LayoutForum_ReportPosting({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Posting" />
<UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Posting" />
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>

4
src/app_modules/forum/splash/index.tsx
View File

@@ -2,7 +2,7 @@
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import ComponentGlobal_SplashScreen from "@/app_modules/component_global/splash/splash_global";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import {
Avatar,
Center,
@@ -20,7 +20,7 @@ export default function Forum_Splash() {
const router = useRouter();
useShallowEffect(() => {
setTimeout(() => {
router.replace(RouterForum.beranda);
router.replace(RouterForum.beranda, { scroll: false });
}, 1000);
}, []);

106
src/app_modules/home/component/button_header.tsx Normal file
View File

@@ -0,0 +1,106 @@
"use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import { ActionIcon, Indicator, Loader, Text } from "@mantine/core";
import { MODEL_USER } from "../model/interface";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
import { IconBell, IconUserSearch } from "@tabler/icons-react";
import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
import { useShallowEffect } from "@mantine/hooks";
import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
export function ComponentHome_ButtonHeaderLeft({
dataUser,
}: {
dataUser: MODEL_USER;
}) {
const router = useRouter();
const [isLoadingUS, setIsLoadingUS] = useState(false);
return (
<>
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
if (dataUser?.Profile === null) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
} else {
setIsLoadingUS(true);
router.push(RouterUserSearch.main, { scroll: false });
}
}}
>
{isLoadingUS ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
<IconUserSearch color="white" />
)}
</ActionIcon>
</>
);
}
export function ComponentHome_ButtonHeaderRight({
dataUser,
countNotifikasi,
}: {
dataUser: MODEL_USER;
countNotifikasi: number;
}) {
const router = useRouter();
const [count, setCount] = useState(countNotifikasi);
const [isLoadingBell, setIsLoadingBell] = useState(false);
useShallowEffect(() => {
onLoadNotifkasi({
onLoad(val) {
setCount(val);
},
});
}, []);
async function onLoadNotifkasi({ onLoad }: { onLoad: (val: any) => void }) {
const loadNotifikasi = await notifikasi_countUserNotifikasi();
onLoad(loadNotifikasi);
}
return (
<>
<ActionIcon
variant="transparent"
onClick={() => {
if (dataUser?.Profile === null) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
} else {
router.push(RouterNotifikasi.main, { scroll: false });
setIsLoadingBell(true);
}
}}
>
{isLoadingBell ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
<Indicator
processing
color={MainColor.yellow}
label={
<Text fz={10} c={MainColor.darkblue}>
{count > 99 ? "99+" : count}
</Text>
}
>
<IconBell color="white" />
</Indicator>
)}
</ActionIcon>
</>
);
}

193
src/app_modules/home/view.tsx → src/app_modules/home/component/ui_home.tsx
View File

@@ -1,43 +1,49 @@
"use client";
import {
ActionIcon,
Box,
Center,
Group,
Image,
Loader,
LoadingOverlay,
Overlay,
Paper,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import {
IconAffiliate,
IconBriefcase,
IconHeartHandshake,
IconPackageImport,
IconPresentation,
IconUserSearch,
} from "@tabler/icons-react";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import {
Box,
Paper,
Stack,
SimpleGrid,
ActionIcon,
Loader,
Group,
Image,
Text,
Avatar,
Center,
} from "@mantine/core";
import {
IconPresentation,
IconAffiliate,
IconPackageImport,
IconHeartHandshake,
IconBriefcase,
IconUserSearch,
IconMap2,
IconMessages,
IconShoppingBag,
IconUserCircle,
} from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { AccentColor, MainColor } from "../component_global/color/color_pallet";
import ComponentGlobal_IsEmptyData from "../component_global/is_empty_data";
import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
import { MODEL_JOB } from "../job/model/interface";
import { MODEL_USER } from "./model/interface";
import { MODEL_USER } from "../model/interface";
import { MODEL_JOB } from "@/app_modules/job/model/interface";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
export default function HomeView({
export function Home_UiView({
dataUser,
dataJob,
}: {
@@ -86,7 +92,7 @@ export default function HomeView({
return (
<>
<Box p={"md"}>
<Box>
<Paper
radius={"xl"}
mb={"xs"}
@@ -130,7 +136,7 @@ export default function HomeView({
} else {
setIsLoading(true);
setPageId(e.id);
router.push(e.link);
router.push(e.link, { scroll: false });
}
}
}}
@@ -179,13 +185,14 @@ export default function HomeView({
);
} else {
setLoadingJob(true);
return router.push(routePageJob.link);
return router.push(routePageJob.link, { scroll: false });
}
}
}}
>
<Group>
<ActionIcon
variant="transparent"
size={40}
c={routePageJob.link === "" ? "gray.3" : "white"}
>
@@ -230,3 +237,123 @@ export default function HomeView({
</>
);
}
const listHalamanFooter = [
{
id: 1,
name: "Forums",
icon: <IconMessages />,
link: RouterForum.splash,
},
{
id: 2,
name: "MarketPlace",
icon: <IconShoppingBag />,
link: "",
},
{
id: 3,
name: "Business Maps",
icon: <IconMap2 />,
link: "",
},
];
export function Home_UiFooter({ dataUser }: { dataUser: MODEL_USER }) {
const router = useRouter();
const [isLoadingProfil, setIsLoadingProfile] = useState(false);
const [isLoadingPage, setIsLoadingPage] = useState(false);
const [pageId, setPageId] = useState(0);
return (
<>
<Box
style={{
zIndex: 99,
borderRadius: "20px 20px 0px 0px",
}}
w={"100%"}
bottom={0}
h={"10vh"}
>
<SimpleGrid cols={4}>
{listHalamanFooter.map((e, i) => (
<Center h={"10vh"} key={e.id}>
<Stack align="center" spacing={0}>
<ActionIcon
radius={"xl"}
// loading={isLoadingPage && e.id === pageId ? true : false}
c={e.link === "" ? "gray" : "white"}
variant="transparent"
onClick={() => {
if (dataUser?.Profile === null) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
} else {
e.link === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.push(e.link, { scroll: false }),
setIsLoadingPage(true),
setPageId(e?.id));
}
}}
>
{isLoadingPage && e.id === pageId ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
e.icon
)}
</ActionIcon>
<Text c={e.link === "" ? "gray" : "white"} fz={"xs"}>
{e.name}
</Text>
</Stack>
</Center>
))}
<Center h={"10vh"}>
<Stack
align="center"
spacing={2}
onClick={() => {
setIsLoadingProfile(true);
if (dataUser?.Profile === null) {
router.push(RouterProfile.create, { scroll: false });
} else {
router.push(
RouterProfile.katalog + `${dataUser?.Profile?.id}`,
{ scroll: false }
);
}
}}
>
<ActionIcon variant={"transparent"}>
{dataUser?.Profile === null ? (
<IconUserCircle color="white" />
) : isLoadingProfil ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
<Avatar
radius={"xl"}
size={25}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "white",
}}
src={
RouterProfile.api_foto_profile +
`${dataUser?.Profile.imagesId}`
}
/>
)}
</ActionIcon>
<Text fz={"xs"} c={"white"}>
Profile
</Text>
</Stack>
</Center>
</SimpleGrid>
</Box>
</>
);
}

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

@@ -1,5 +1,4 @@
import HomeView from "./view";
import HomeLayout from "./layout";
import HomeView from "./view_home";
import Home_UserNotActive from "./user_non_active";
export { HomeView, HomeLayout, Home_UserNotActive as Home_UserNonActive };
export { HomeView, Home_UserNotActive as Home_UserNonActive };

310
src/app_modules/home/layout.tsx
View File

@@ -1,310 +0,0 @@
"use client";
import {
ActionIcon,
AppShell,
Avatar,
BackgroundImage,
Box,
Center,
Flex,
Footer,
Grid,
Group,
Header,
Indicator,
Loader,
Paper,
ScrollArea,
SimpleGrid,
Stack,
Text,
ThemeIcon,
Title,
} from "@mantine/core";
import { HomeView } from ".";
import {
IconUserSearch,
IconAward,
IconQrcode,
IconUserCircle,
IconBell,
IconMessages,
IconShoppingBag,
IconMap2,
} from "@tabler/icons-react";
import { Logout } from "../auth";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { MODEL_USER } from "./model/interface";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
import { ComponentGlobal_NotifikasiBerhasil } from "../component_global/notif_global/notifikasi_berhasil";
import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
import { useShallowEffect } from "@mantine/hooks";
import notifikasi_countUserNotifikasi from "../notifikasi/fun/count/fun_count_by_id";
import mqtt_client from "@/util/mqtt_client";
import { AccentColor, MainColor } from "../component_global/color/color_pallet";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
export default function HomeLayout({
dataUser,
children,
countNotifikasi,
}: {
dataUser: MODEL_USER;
children: React.ReactNode;
countNotifikasi: number;
}) {
const router = useRouter();
// const [user, setUser] = useState(dataUser);
const [isLoadingProfil, setIsLoadingProfile] = useState(false);
const [isLoadingUS, setIsLoadingUS] = useState(false);
const [isLoadingBell, setIsLoadingBell] = useState(false);
const [isLoadingPage, setIsLoadingPage] = useState(false);
const [pageId, setPageId] = useState(0);
const [countNotif, setCountNotif] = useState(countNotifikasi);
const listHalamanFooter = [
{
id: 1,
name: "Forums",
icon: <IconMessages />,
link: RouterForum.splash,
},
{
id: 2,
name: "MarketPlace",
icon: <IconShoppingBag />,
link: "",
},
{
id: 3,
name: "Business Maps",
icon: <IconMap2 />,
link: "",
},
];
useShallowEffect(() => {
mqtt_client.subscribe("USER");
mqtt_client.on("message", (topic: any, message: any) => {
// console.log(topic);
const data = JSON.parse(message.toString());
if (data.userId === dataUser.id) {
setCountNotif(countNotif + data.count);
}
});
onLoadNotifikasi({
onLoad(val) {
setCountNotif(val);
},
});
}, [countNotif]);
async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) {
const loadNotif = await notifikasi_countUserNotifikasi();
onLoad(loadNotif);
}
return (
<>
<BackgroundImage
src={"/aset/global/main_background.png"}
h={"100vh"}
pos={"static"}
>
{/* Header */}
<Box
style={{
zIndex: 98,
}}
w={"100%"}
bg={MainColor.darkblue}
pos={"sticky"}
top={0}
h={"8vh"}
>
<Group position="apart" h={"100%"} px={"md"}>
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
if (dataUser?.Profile === null) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
} else {
setIsLoadingUS(true);
router.push(RouterUserSearch.main);
}
}}
>
{isLoadingUS ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
<IconUserSearch color="white" />
)}
</ActionIcon>
<Center>
<Title order={4} c={MainColor.yellow}>
HIPMI
</Title>
</Center>
<ActionIcon
variant="transparent"
onClick={() => {
if (dataUser?.Profile === null) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
} else {
router.push(RouterNotifikasi.main);
setIsLoadingBell(true);
}
}}
>
{isLoadingBell ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
<Indicator
processing
color={MainColor.yellow}
label={
<Text fz={10} c={MainColor.darkblue}>
{countNotif}
</Text>
}
>
<IconBell color="white" />
</Indicator>
)}
</ActionIcon>
</Group>
</Box>
{/* Children */}
<Box h={"82vh"} pos={"static"}>
<ScrollArea h={"100%"}>
{/* {Array(10)
.fill(0)
.map((e, i) => (
<Paper key={i} withBorder p={"lg"} h={100}>
{i + 1}
</Paper>
))} */}
{children}
</ScrollArea>
<Box
style={{
height: "10vh",
}}
/>
</Box>
{/* Footer */}
<Box
style={{
zIndex: 99,
borderRadius: "20px 20px 0px 0px",
}}
// bg={MainColor.darkblue}
w={"100%"}
// color="blue"
pos={"fixed"}
bottom={0}
h={"10vh"}
>
<SimpleGrid
bg={AccentColor.darkblue}
cols={4}
style={{
borderRadius: "20px 20px 0px 0px",
borderTop: `2px solid ${AccentColor.blue}`,
}}
>
{listHalamanFooter.map((e, i) => (
<Center h={"10vh"} key={e.id}>
<Stack align="center" spacing={0}>
<ActionIcon
radius={"xl"}
// loading={isLoadingPage && e.id === pageId ? true : false}
c={e.link === "" ? "gray" : "white"}
variant="transparent"
onClick={() => {
if (dataUser?.Profile === null) {
ComponentGlobal_NotifikasiPeringatan(
"Lengkapi Profile"
);
} else {
e.link === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.push(e.link),
setIsLoadingPage(true),
setPageId(e?.id));
}
}}
>
{isLoadingPage && e.id === pageId ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
e.icon
)}
</ActionIcon>
<Text c={e.link === "" ? "gray" : "white"} fz={"xs"}>
{e.name}
</Text>
</Stack>
</Center>
))}
<Center h={"10vh"}>
<Stack
align="center"
spacing={2}
onClick={() => {
setIsLoadingProfile(true);
if (dataUser?.Profile === null) {
router.push(RouterProfile.create);
} else {
router.push(
RouterProfile.katalog + `${dataUser.Profile.id}`
);
}
}}
>
<ActionIcon variant={"transparent"}>
{dataUser?.Profile === null ? (
<IconUserCircle color="white" />
) : isLoadingProfil ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
<Avatar
radius={"xl"}
size={25}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "white",
}}
src={
RouterProfile.api_foto_profile +
`${dataUser?.Profile.imagesId}`
}
/>
)}
</ActionIcon>
<Text fz={"xs"} c={"white"}>
Profile
</Text>
</Stack>
</Center>
</SimpleGrid>
</Box>
</BackgroundImage>
</>
);
}

4
src/app_modules/home/user_non_active/index.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { Logout } from "@/app_modules/auth";
import User_Logout from "@/app_modules/auth/logout/view";
import Component_Logout from "@/app_modules/auth/logout/view";
import { Center, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
export default function Home_UserNotActive() {
@@ -44,7 +44,7 @@ export default function Home_UserNotActive() {
<Title order={4} c={"gray"}>
Tunggu Konfirmasi Admin !
</Title>
<User_Logout />
<Component_Logout />
</Stack>
</Center>
</>

43
src/app_modules/home/view_home.tsx Normal file
View File

@@ -0,0 +1,43 @@
import UIGlobal_LayoutHeaderTamplate from "../component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "../component_global/ui/ui_layout_tamplate";
import { MODEL_JOB } from "../job/model/interface";
import {
ComponentHome_ButtonHeaderLeft,
ComponentHome_ButtonHeaderRight,
} from "./component/button_header";
import { Home_UiFooter, Home_UiView } from "./component/ui_home";
import { MODEL_USER } from "./model/interface";
export default function HomeView({
dataUser,
dataJob,
countNotifikasi,
}: {
dataUser: MODEL_USER;
dataJob: MODEL_JOB[];
countNotifikasi: number;
}) {
return (
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="HIPMI"
customButtonLeft={
<ComponentHome_ButtonHeaderLeft dataUser={dataUser} />
}
customButtonRight={
<ComponentHome_ButtonHeaderRight
dataUser={dataUser}
countNotifikasi={countNotifikasi}
/>
}
/>
}
footer={<Home_UiFooter dataUser={dataUser} />}
>
<Home_UiView dataJob={dataJob} dataUser={dataUser} />
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/job/create/layout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutJob_Create({
@@ -11,11 +11,11 @@ export default function LayoutJob_Create({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Job" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Tambah Job" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/job/detail/arsip/layout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutJob_DetailArsip({
@@ -11,11 +11,11 @@ export default function LayoutJob_DetailArsip({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Detail Arsip" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Arsip" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

14
src/app_modules/job/detail/draft/layout.tsx
View File

@@ -14,11 +14,11 @@ 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 ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import { useRouter } from "next/navigation";
import { useDisclosure } from "@mantine/hooks";
import {
@@ -48,13 +48,13 @@ export default function LayoutJob_DetailDraft({
return (
<>
<ComponentGlobal_UI_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title="Detail Draft"
iconRight={
<ActionIcon variant="transparent" onClick={() => open()}>
<IconDots color="white" />
<IconDotsVertical color="white" />
</ActionIcon>
}
// routerRight={}
@@ -62,7 +62,7 @@ export default function LayoutJob_DetailDraft({
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
<ComponentGlobal_UI_Drawer
opened={opened}

10
src/app_modules/job/detail/main/layout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutJob_MainDetail({
@@ -11,11 +11,11 @@ export default function LayoutJob_MainDetail({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Detail Job" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Job" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/job/detail/publish/layout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutJob_DetailPublish({
@@ -11,11 +11,11 @@ export default function LayoutJob_DetailPublish({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Detail Publish" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Publish" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/job/detail/reject/layout.tsx
View File

@@ -5,8 +5,8 @@ import React from "react";
import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { IconEdit } from "@tabler/icons-react";
export default function LayoutJob_DetailReject({
@@ -16,11 +16,11 @@ export default function LayoutJob_DetailReject({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Detail Reject" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/job/detail/review/layout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutJob_DetailReview({
@@ -11,11 +11,11 @@ export default function LayoutJob_DetailReview({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Detail Review" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/job/edit/layout.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutJob_Edit({
@@ -11,11 +11,11 @@ export default function LayoutJob_Edit({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Edit Job" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Job" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);

3
src/app_modules/job/main/beranda/ui_beranda.tsx
View File

@@ -9,6 +9,7 @@ import { ScrollOnly } from "next-scroll-loader";
import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
import { job_getAllListPublish } from "../../fun/get/get_all_publish";
import ComponentJob_CreateButton from "../../component/button/create_button";
import { IconSearch } from "@tabler/icons-react";
export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
const [data, setData] = useState(listData);
@@ -31,12 +32,14 @@ export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
<ComponentJob_CreateButton />
<TextInput
style={{
position: "sticky",
top: 0,
zIndex: 99,
}}
radius={"xl"}
icon={<IconSearch/>}
placeholder="Pekerjaan apa yang anda cari ?"
onChange={(val) => {
onSearch(val.currentTarget.value);

10
src/app_modules/job/main/layout.tsx
View File

@@ -3,8 +3,8 @@
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import { MainColor } from "@/app_modules/component_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
import { IconHistory, IconHome, IconReservedLine } from "@tabler/icons-react";
import { useAtom } from "jotai";
@@ -46,9 +46,9 @@ export default function LayoutJob_Main({
return (
<>
<ComponentGlobal_UI_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentGlobal_UI_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title="JOB"
routerLeft={RouterHome.main_home}
/>
@@ -118,7 +118,7 @@ export default function LayoutJob_Main({
}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

10
src/app_modules/job/non_user_view/layout.tsx
View File

@@ -4,8 +4,8 @@ import { AppShell, Center } from "@mantine/core";
import React from "react";
import ComponentJob_HeaderTamplate from "../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
export default function LayoutJob_NonUserView({
children,
@@ -14,11 +14,11 @@ export default function LayoutJob_NonUserView({
}) {
return (
<>
<ComponentGlobal_UI_LayoutTamplate
header={<ComponentGlobal_UI_HeaderTamplate title="Job Vacancy" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Job Vacancy" />}
>
{children}
</ComponentGlobal_UI_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

2
src/app_modules/job/splash/ui_splash.tsx
View File

@@ -18,7 +18,7 @@ export function Job_UiSplash() {
setTimeout(() => {
setHotMenu(1);
setStatus("Publish");
router.replace(RouterJob.beranda);
router.replace(RouterJob.beranda, { scroll: false });
}, 1000);
}, []);
return (

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";

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

@@ -1,4 +1,3 @@
import KatalogView from "./view";
import KatalogLayout from "./layout";
export {KatalogView, KatalogLayout}
export { 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 UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate 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
<UIGlobal_LayoutTamplate
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>
<UIGlobal_LayoutHeaderTamplate
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>
</UIGlobal_LayoutTamplate>
</>
);
}

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>
</>
);
}

80
src/app_modules/katalog/portofolio/component/button_delete.tsx Normal file
View File

@@ -0,0 +1,80 @@
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 { Button, Group, Modal, Stack, Title } from "@mantine/core";
import { IconTrash } from "@tabler/icons-react";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import router from "next/router";
import { useState } from "react";
import { Portofolio_funDeletePortofolioById } from "../fun/delete/fun_delete_by_id";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { useRouter } from "next/navigation";
import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
export function ComponentPortofolio_ButtonDelete({
userLoginId,
dataPorto,
}: {
userLoginId: string;
dataPorto: MODEL_PORTOFOLIO;
}) {
const router = useRouter();
const [openModal, setModal] = useState(false);
const [loadingDel, setLoadingDel] = useState(false);
return (
<>
{userLoginId === dataPorto?.Profile.userId ? (
<Button
radius={"xl"}
bg={"red"}
color="red"
onClick={() => {
setModal(true)
}}
>
<IconTrash />
</Button>
) : (
""
)}
<ComponentGlobal_UI_Modal
title={"Anda yakin menghapus portofolio ini ?"}
opened={openModal}
close={() => setModal(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
radius={"xl"}
color="red"
loaderPosition="center"
loading={loadingDel ? true : false}
onClick={() => onDelete(router, dataPorto as any, setLoadingDel)}
>
Hapus
</Button>
}
/>
</>
);
}
async function onDelete(
router: AppRouterInstance,
dataPorto: MODEL_PORTOFOLIO,
setLoadingDel: any
) {
await Portofolio_funDeletePortofolioById(dataPorto).then((res) => {
if (res.status === 200) {
setLoadingDel(true);
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}

64
src/app_modules/katalog/portofolio/component/button_more.tsx Normal file
View File

@@ -0,0 +1,64 @@
"use client";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_UI_Drawer from "@/app_modules/component_global/ui/ui_drawer";
import { ActionIcon } from "@mantine/core";
import {
IconDots,
IconDotsVertical,
IconEdit,
IconId,
IconPhotoEdit,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentPortofolio_ButtonMore({
portoId,
userLoginId,
authorId,
}: {
portoId: string;
userLoginId: string;
authorId: string;
}) {
const [openDrawer, setOpenDrawer] = useState(false);
const listPage = [
{
id: "1",
name: "Update detail bisnis",
icon: <IconEdit />,
path: RouterPortofolio.edit_data_bisnis + `${portoId}`,
},
{
id: "2",
name: "Update logo ",
icon: <IconPhotoEdit />,
path: RouterPortofolio.edit_logo_bisnis + `${portoId}`,
},
{
id: "3",
name: "Update sosial media",
icon: <IconId />,
path: RouterPortofolio.edit_medsos_bisnis + `${portoId}`,
},
];
return (
<>
{userLoginId === authorId ? (
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color="white" />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>
)}
<ComponentGlobal_UI_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={listPage}
/>
</>
);
}

50
src/app_modules/katalog/portofolio/component/card_view_daftar.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { Group, Paper, Stack, Text } from "@mantine/core";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
import { IconCaretRight } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
export function ComponentPortofolio_DaftarBoxView({
data,
}: {
data: MODEL_PORTOFOLIO;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
return (
<>
<Paper
shadow="sm"
radius={"md"}
mb={"lg"}
onClick={() => {
setIsLoading(true);
router.push(RouterPortofolio.main_detail + data.id);
}}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Group position="apart">
<Text fw={"bold"} lineClamp={1} w={"80%"}>
{data?.namaBisnis}
</Text>
<Stack>
{isLoading ? (
<ComponentGlobal_UI_Loader />
) : (
<IconCaretRight color="white" size={25} />
)}
</Stack>
</Group>
</Paper>
</>
);
}

14
src/app_modules/katalog/portofolio/create/layout.tsx
View File

@@ -1,22 +1,18 @@
"use client";
import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import ComponentKatalog_HeaderTamplate from "../../component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
export default function CreatePortofolioLayout({ children, profileId }: { children: any, profileId: any }) {
const router = useRouter();
return (
<>
<AppComponentGlobal_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentKatalog_HeaderTamplate title="Buat Portofolio"/>
<UIGlobal_LayoutHeaderTamplate title="Buat Portofolio"/>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

97
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,21 @@ import {
Paper,
Select,
Stack,
Text,
TextInput,
Textarea,
Title,
} 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";
import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function CreatePortofolio({
bidangBisnis,
@@ -69,10 +68,15 @@ export default function CreatePortofolio({
<>
{/* {JSON.stringify(profileId)} */}
<Stack px={"sm"} spacing={50}>
<Stack px={"sm"} mb={"lg"} spacing={50}>
<Stack spacing={"sm"}>
<ComponentKatalog_NotedBox informasi="Lengkapi Data Bisnis" />
<ComponentGlobal_BoxInformation informasi="Lengkapi Data Bisnis" />
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Nama Bisnis"
placeholder="Nama bisnis"
@@ -85,6 +89,11 @@ export default function CreatePortofolio({
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Bidang Bisnis"
placeholder="Pilih salah satu bidang bisnis"
@@ -100,6 +109,11 @@ export default function CreatePortofolio({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Alamat Kantor"
placeholder="Alamat kantor"
@@ -112,6 +126,11 @@ export default function CreatePortofolio({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Nomor Telepon Kantor"
placeholder="Nomor telepon kantor"
@@ -125,6 +144,11 @@ export default function CreatePortofolio({
/>
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: "white",
},
}}
maxLength={150}
autosize
minRows={2}
@@ -147,7 +171,7 @@ export default function CreatePortofolio({
</Stack>
<Stack>
<ComponentKatalog_NotedBox informasi="Upload Logo Bisnis Anda!" />
<ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda!" />
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"} withBorder>
<Image alt="Foto" src={img ? img : "/aset/no-img.png"} />
@@ -182,10 +206,10 @@ export default function CreatePortofolio({
<Button
{...props}
radius={"xl"}
variant="outline"
w={150}
leftIcon={<IconCamera />}
compact
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
@@ -197,6 +221,11 @@ export default function CreatePortofolio({
<Stack>
<ComponentKatalog_NotedBox informasi="Isi hanya pada sosial media yang anda miliki" />
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Facebook"
maxLength={100}
placeholder="Facebook"
@@ -208,6 +237,11 @@ export default function CreatePortofolio({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Instagram"
maxLength={100}
placeholder="Instagram"
@@ -219,6 +253,11 @@ export default function CreatePortofolio({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Tiktok"
maxLength={100}
placeholder="Tiktok"
@@ -230,6 +269,11 @@ export default function CreatePortofolio({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Twitter"
maxLength={100}
placeholder="Twitter"
@@ -241,6 +285,11 @@ export default function CreatePortofolio({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Youtube"
maxLength={100}
placeholder="Youtube"
@@ -256,8 +305,6 @@ export default function CreatePortofolio({
<Button
mt={"md"}
radius={50}
bg={Warna.hijau_muda}
color="green"
loading={loading ? true : false}
loaderPosition="center"
onClick={() => {
@@ -271,6 +318,12 @@ export default function CreatePortofolio({
setIsFile
);
}}
bg={MainColor.yellow}
color="yellow"
c={"black"}
style={{
border: `2px solid ${AccentColor.yellow}`,
}}
>
Simpan
</Button>

11
src/app_modules/katalog/portofolio/edit/data/layout.tsx
View File

@@ -1,8 +1,7 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
import { AppShell } from "@mantine/core";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
@@ -13,11 +12,11 @@ export default function LayoutPortofolio_EditDataBisnis({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentKatalog_HeaderTamplate title="Edit Data Bisnis" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Data Bisnis" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

58
src/app_modules/katalog/portofolio/edit/data/index.tsx → src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx
View File

@@ -1,20 +1,22 @@
"use client";
import { Box, Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
import {
MainColor
} from "@/app_modules/component_global/color/color_pallet";
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 { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
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 { Portofolio_funEditDataBisnis } from "../../fun/edit/fun_edit_data_bisnis_by_id";
import {
MODEL_PORTOFOLIO,
MODEL_PORTOFOLIO_BIDANG_BISNIS,
} from "../../model/interface";
import { useState } from "react";
import _ from "lodash";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { Portofolio_funEditDataBisnis } from "../../fun/edit/fun_edit_data_bisnis_by_id";
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";
export default function Portofolio_EditDataBisnis({
dataPorto,
@@ -30,9 +32,14 @@ export default function Portofolio_EditDataBisnis({
return (
<>
{/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
<Stack spacing={50} p={"md"}>
<Stack spacing={50} p={"sm"}>
<Stack>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
value={value.namaBisnis}
label="Nama Bisnis"
@@ -53,6 +60,11 @@ export default function Portofolio_EditDataBisnis({
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
value={value.MasterBidangBisnis.id}
label="Bidang Bisnis"
@@ -71,6 +83,11 @@ export default function Portofolio_EditDataBisnis({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
value={value.alamatKantor}
label="Alamat Kantor"
@@ -91,6 +108,11 @@ export default function Portofolio_EditDataBisnis({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
value={value.tlpn}
label="Nomor Telepon Kantor"
@@ -113,6 +135,11 @@ export default function Portofolio_EditDataBisnis({
/>
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: "white",
},
}}
autosize
minRows={2}
maxRows={5}
@@ -142,12 +169,19 @@ export default function Portofolio_EditDataBisnis({
</Stack>
</Stack>
<Button
disabled={_.values(value).includes("") ? true : false}
radius={"xl"}
loading={loading ? true : false}
loaderPosition="center"
onClick={() => {
onUpdate(router, value as any, setLoading);
}}
bg={MainColor.yellow}
color={"yellow"}
c={"black"}
style={{
transition: "0.5s",
}}
>
Update
</Button>

8
src/app_modules/katalog/portofolio/edit/logo/layout.tsx
View File

@@ -1,6 +1,8 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
import { AppShell } from "@mantine/core";
import React from "react";
@@ -12,11 +14,11 @@ export default function LayoutPortofolio_EditLogoBisnis({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentKatalog_HeaderTamplate title="Edit Logo Bisnis" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Logo Bisnis" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

56
src/app_modules/katalog/portofolio/edit/logo/index.tsx → src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
View File

@@ -1,30 +1,29 @@
"use client";
import {
RouterPortofolio,
RouterProfile,
RouterPortofolio
} from "@/app/lib/router_hipmi/router_katalog";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
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 {
AspectRatio,
Box,
Button,
Center,
FileButton,
Image,
Paper,
Stack,
Stack
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { profile } from "console";
import image from "next/image";
import { useRouter } from "next/navigation";
import router from "next/router";
import { useState } from "react";
import { MODEL_PORTOFOLIO } from "../../model/interface";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Portofolio_funEditLogoBisnisById } from "../../fun/edit/fun_edit_logo_bisnis_by_id";
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_PORTOFOLIO } from "../../model/interface";
export default function Portofolio_EditLogoBisnis({
dataPorto,
@@ -38,7 +37,16 @@ export default function Portofolio_EditLogoBisnis({
return (
<>
<Stack spacing={"xl"} px={"sm"}>
<Paper p={"sm"} withBorder radius={"sm"} shadow="lg">
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Stack>
<AspectRatio ratio={1 / 1}>
<Image
@@ -71,10 +79,10 @@ export default function Portofolio_EditLogoBisnis({
<Button
{...props}
radius={"xl"}
variant="outline"
w={150}
leftIcon={<IconCamera />}
compact
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
@@ -88,8 +96,16 @@ export default function Portofolio_EditLogoBisnis({
<Button
radius={"xl"}
onClick={() =>
onUpdate(router, dataPorto.id, file as any, setLoading)
// onUpdate(router, dataPorto.id, file as any, setLoading)
console.log("apa")
}
bg={MainColor.yellow}
color="yellow"
c={"black"}
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.yellow}`,
}}
>
Simpan
</Button>
@@ -97,11 +113,7 @@ export default function Portofolio_EditLogoBisnis({
<Button
disabled
radius={"xl"}
loading={loading ? true : false}
loaderPosition="center"
onClick={() =>
onUpdate(router, dataPorto.id, file as any, setLoading)
}
>
Simpan
</Button>

11
src/app_modules/katalog/portofolio/edit/medsos/layout.tsx
View File

@@ -1,8 +1,7 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentKatalog_HeaderTamplate from "@/app_modules/katalog/component/header_tamplate";
import { AppShell } from "@mantine/core";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutPortofolio_EditMedsosBisnis({
@@ -12,11 +11,11 @@ export default function LayoutPortofolio_EditMedsosBisnis({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentKatalog_HeaderTamplate title="Edit Media Sosial" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Media Sosial" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

46
src/app_modules/katalog/portofolio/edit/medsos/index.tsx → src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx
View File

@@ -10,6 +10,10 @@ import { useRouter } from "next/navigation";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function Portofolio_EditMedsosBisnis({
dataMedsos,
@@ -23,9 +27,23 @@ export default function Portofolio_EditMedsosBisnis({
return (
<>
{/* <pre>{JSON.stringify(dataMedsos, null, 2)}</pre> */}
<Paper shadow="lg" p={"sm"}>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Stack px={"sm"}>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Facebook"
value={medsos.facebook}
placeholder="Facebook"
@@ -37,6 +55,11 @@ export default function Portofolio_EditMedsosBisnis({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Instagram"
value={medsos.instagram}
placeholder="Instagram"
@@ -48,6 +71,11 @@ export default function Portofolio_EditMedsosBisnis({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Tiktok"
value={medsos.tiktok}
placeholder="Tiktok"
@@ -59,6 +87,11 @@ export default function Portofolio_EditMedsosBisnis({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Twitter"
value={medsos.twitter}
placeholder="Twitter"
@@ -70,6 +103,11 @@ export default function Portofolio_EditMedsosBisnis({
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
label="Youtube"
value={medsos.youtube}
placeholder="Youtube"
@@ -87,6 +125,12 @@ export default function Portofolio_EditMedsosBisnis({
loading={loading ? true : false}
loaderPosition="center"
onClick={() => onUpdate(router, medsos, setLoading)}
style={{
backgroundColor: MainColor.yellow,
border: `2px solid ${AccentColor.yellow}`,
transition: "0.5s",
color: "black",
}}
>
Update
</Button>

28
src/app_modules/katalog/portofolio/fun/get/get_all_portofolio.tsx Normal file
View File

@@ -0,0 +1,28 @@
"use server";
import prisma from "@/app/lib/prisma";
export async function portofolio_funGetAllDaftarByid({
profileId,
page,
}: {
profileId: string;
page: number;
}) {
const takeData = 10;
const skipData = page * takeData - takeData;
const data = await prisma.portofolio.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},
where: {
profileId: profileId,
active: true,
},
});
return data
}

9
src/app_modules/katalog/portofolio/fun/get/get_list_portofolio.ts
View File

@@ -4,19 +4,20 @@ import prisma from "@/app/lib/prisma";
export async function funGetListPortofolio(profileId: any) {
const data = await prisma.portofolio.findMany({
take: 2,
orderBy: {
createdAt: "desc"
createdAt: "desc",
},
where: {
profileId: profileId,
active: true
active: true,
},
select: {
id: true,
namaBisnis: true,
profileId: true
profileId: true,
},
});
return data
return data;
}

1
src/app_modules/katalog/portofolio/fun/get/get_one_portofolio.ts
View File

@@ -29,6 +29,7 @@ export async function portofolio_getOneById(portoId: string) {
Portofolio_MediaSosial: true,
Profile: {
select: {
userId: true,
User: {
select: {
id: true,

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

@@ -1,11 +1,10 @@
import CreatePortofolio from "./create/view";
import CreatePortofolioLayout from "./create/layout";
import ListPortofolioView from "./list_view/view";
import PortofolioLayout from "./main/layout";
import ViewPortofolio from "./main/view";
import Portofolio_EditDataBisnis from "./edit/data";
import Portofolio_EditLogoBisnis from "./edit/logo";
import Portofolio_EditMedsosBisnis from "./edit/medsos";
import PortofolioLayout from "./ui/ui_layout";
import Portofolio_UiDetail from "./ui/ui_detail_portofolio";
import Portofolio_EditDataBisnis from "./edit/data/ui_edit_data";
import Portofolio_EditLogoBisnis from "./edit/logo/ui_edit_logo";
import Portofolio_EditMedsosBisnis from "./edit/medsos/ui_edit_medsos";
import LayoutPortofolio_EditBisnis from "./edit/layout";
import LayoutPortofolio_EditDataBisnis from "./edit/data/layout";
import LayoutPortofolio_EditLogoBisnis from "./edit/logo/layout";
@@ -14,9 +13,8 @@ import LayoutPortofolio_EditMedsosBisnis from "./edit/medsos/layout";
export {
CreatePortofolio,
CreatePortofolioLayout,
ListPortofolioView,
PortofolioLayout,
ViewPortofolio,
Portofolio_UiDetail as ViewPortofolio,
Portofolio_EditDataBisnis,
Portofolio_EditLogoBisnis,
Portofolio_EditMedsosBisnis,
@@ -25,3 +23,5 @@ export {
LayoutPortofolio_EditLogoBisnis,
LayoutPortofolio_EditMedsosBisnis,
};
export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";

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

@@ -1,139 +0,0 @@
"use client";
import {
ActionIcon,
Box,
Center,
Grid,
Group,
Loader,
Paper,
ScrollArea,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import _ from "lodash";
import {
IconCaretRight,
IconCaretRightFilled,
IconChevronRight,
IconCirclePlus,
IconEyeCheck,
IconPencilPlus,
} from "@tabler/icons-react";
import { MODEL_PORTOFOLIO_Lama } from "@/app_modules/model_global/portofolio";
import { useRouter } from "next/navigation";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { Warna } from "@/app/lib/warna";
import { MODEL_PROFILE } from "../../profile/model/interface";
import { MODEL_PORTOFOLIO } from "../model/interface";
export default function ListPortofolioView({
listPorto,
profile,
userLoginId,
}: {
listPorto: MODEL_PORTOFOLIO[];
profile: MODEL_PROFILE;
userLoginId: string;
}) {
const router = useRouter();
// const [porto, setPorto] = useState(listPorto);
const [loading, setLoading] = useState(false);
const [loadingPorto, setLoadingPorto] = useState(false);
const [idPorto, setIdPorto] = useState("");
return (
<>
{/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
<Paper p={"md"} shadow="lg" withBorder bg={"gray.1"}>
<Stack spacing={"sm"}>
<Group position="apart">
<ActionIcon variant="transparent" disabled></ActionIcon>
<Title order={4}>Portofolio</Title>
{profile?.User.id === userLoginId ? (
<ActionIcon
loading={loading ? true : false}
variant="transparent"
onClick={() => {
router.push(RouterPortofolio.create + `${profile.id}`);
setLoading(true);
}}
>
<IconPencilPlus color={Warna.biru} />
</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>
</Paper>
</>
);
}

114
src/app_modules/katalog/portofolio/main/layout.tsx
View File

@@ -1,114 +0,0 @@
"use client";
import {
ActionIcon,
AppShell,
Button,
Group,
Header,
Modal,
Stack,
Title,
} from "@mantine/core";
import HeaderTransparent from "../../component/header_transparent";
import { useRouter } from "next/navigation";
import { IconArrowLeft, IconChevronLeft, IconEdit } from "@tabler/icons-react";
import ComponentKatalog_HeaderTamplate from "../../component/header_tamplate";
import { title } from "process";
import { useDisclosure } from "@mantine/hooks";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { useState } from "react";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
export default function PortofolioLayout({
children,
portoId,
userLoginId,
authorId,
}: {
children: any;
portoId: any;
userLoginId: string;
authorId: string;
}) {
const router = useRouter();
const [opened, { open, close }] = useDisclosure(false);
const [loadingData, setLoadingData] = useState(false);
const [loadingLogo, setLoadingLogo] = useState(false);
const [loadingMedia, setLoadingMedia] = useState(false);
return (
<>
<AppComponentGlobal_LayoutTamplate
header={
<Header height={50} sx={{ borderStyle: "none" }}>
<Group h={50} position="apart" px={"md"}>
<ActionIcon
variant="transparent"
onClick={() => {
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5}>Detail Portofolio</Title>
{userLoginId === authorId ? (
<ActionIcon variant="transparent" onClick={() => open()}>
<IconEdit />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>
)}
</Group>
</Header>
}
>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Stack>
<Title order={6}>Anda ingin mengupdate Detail Bisnis ?</Title>
<Button
radius={"xl"}
variant="outline"
loaderPosition="center"
loading={loadingData ? true : false}
onClick={() => {
setLoadingData(true);
router.push(RouterPortofolio.edit_data_bisnis + `${portoId}`);
}}
>
Data Bisnis
</Button>
<Button
radius={"xl"}
variant="outline"
color="green"
loaderPosition="center"
loading={loadingLogo ? true : false}
onClick={() => {
setLoadingLogo(true);
router.push(RouterPortofolio.edit_logo_bisnis + `${portoId}`);
}}
>
Logo Bisnis
</Button>
<Button
radius={"xl"}
variant="outline"
color="orange"
loaderPosition="center"
loading={loadingMedia ? true : false}
onClick={() => {
setLoadingMedia(true);
router.push(RouterPortofolio.edit_medsos_bisnis + `${portoId}`);
}}
>
Media Sosial
</Button>
</Stack>
</Modal>
{children}
</AppComponentGlobal_LayoutTamplate>
</>
);
}

241
src/app_modules/katalog/portofolio/main/view.tsx
View File

@@ -1,241 +0,0 @@
"use client";
import {
RouterPortofolio,
RouterProfile,
} from "@/app/lib/router_hipmi/router_katalog";
import { Warna } from "@/app/lib/warna";
import { MODEL_PORTOFOLIO_OLD } from "@/app_modules/model_global/portofolio";
import {
AspectRatio,
Box,
Button,
Center,
Grid,
Group,
Image,
Modal,
Paper,
Stack,
Text,
Title,
} from "@mantine/core";
import {
IconBrandFacebook,
IconBrandInstagram,
IconBrandTiktok,
IconBrandTwitter,
IconBrandYoutube,
IconBuilding,
IconBuildingSkyscraper,
IconListDetails,
IconMapPin,
IconNotes,
IconPhoneCall,
IconPinned,
IconTrash,
} from "@tabler/icons-react";
import { redirect, useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { portofolio_getOneById } from "../fun/get/get_one_portofolio";
import _ from "lodash";
import { Portofolio_funDeletePortofolioById } from "../fun/delete/fun_delete_by_id";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
export default function ViewPortofolio({
dataPorto,
userLoginId,
}: {
dataPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
const router = useRouter();
const [porto, setPorto] = useState(dataPorto);
const [opened, { open, close }] = useDisclosure(false);
const [loadingDel, setLoadingDel] = useState(false);
return (
<>
{/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
<Stack>
<Paper p={"sm"} withBorder shadow="lg">
<Title order={6}>Data Bisnis</Title>
<Stack p={"sm"}>
<Grid>
<Grid.Col span={2}>
<IconBuildingSkyscraper />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.namaBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPhoneCall />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>+{dataPorto?.tlpn}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconMapPin />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.alamatKantor}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconListDetails />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.MasterBidangBisnis.name}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPinned />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.deskripsi}</Text>
</Grid.Col>
</Grid>
</Stack>
</Paper>
<Paper p={"sm"} withBorder shadow="lg">
<Title order={6}>Logo Bisnis</Title>
<AspectRatio ratio={1 / 1}>
<Paper>
<Image
alt="Foto"
src={RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`}
/>
</Paper>
</AspectRatio>
</Paper>
<Paper p={"sm"} withBorder shadow="lg">
<Title order={6}>Media Sosial Bisnis</Title>
<Stack p={"sm"}>
<Grid>
<Grid.Col span={2}>
<IconBrandFacebook />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.facebook ? (
<Text>{dataPorto?.Portofolio_MediaSosial.facebook}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandInstagram />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.instagram ? (
<Text>{dataPorto?.Portofolio_MediaSosial.instagram}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandTiktok />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.tiktok ? (
<Text>{dataPorto?.Portofolio_MediaSosial.tiktok}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandTwitter />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.twitter ? (
<Text>{dataPorto?.Portofolio_MediaSosial.twitter}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandYoutube />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.youtube ? (
<Text>{dataPorto?.Portofolio_MediaSosial.youtube}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
</Stack>
</Paper>
{userLoginId === dataPorto?.Profile?.User?.id ? (
<Button
radius={"xl"}
bg={"red"}
color="red"
onClick={() => {
open();
}}
>
<IconTrash />
</Button>
) : (
""
)}
</Stack>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Stack>
<Title order={6}>Anda yakin menghapus portofolio ini ?</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => close()}>
Batal
</Button>
<Button
radius={"xl"}
color="red"
loaderPosition="center"
loading={loadingDel ? true : false}
onClick={() => onDelete(router, dataPorto as any, setLoadingDel)}
>
Hapus
</Button>
</Group>
</Stack>
</Modal>
</>
);
}
async function onDelete(
router: AppRouterInstance,
dataPorto: MODEL_PORTOFOLIO,
setLoadingDel: any
) {
await Portofolio_funDeletePortofolioById(dataPorto).then((res) => {
if (res.status === 200) {
setLoadingDel(true);
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}

75
src/app_modules/katalog/portofolio/ui/ui_detail_data.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { Paper, Title, Stack, Grid, Text } from "@mantine/core";
import {
IconBuildingSkyscraper,
IconPhoneCall,
IconMapPin,
IconListDetails,
IconPinned,
} from "@tabler/icons-react";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
export function Portofolio_UiDetailData({
dataPorto,
}: {
dataPorto: MODEL_PORTOFOLIO;
}) {
return (
<>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Title order={6}>Data Bisnis</Title>
<Stack p={"sm"}>
<Grid>
<Grid.Col span={2}>
<IconBuildingSkyscraper />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.namaBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPhoneCall />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>+{dataPorto?.tlpn}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconMapPin />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.alamatKantor}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconListDetails />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.MasterBidangBisnis.name}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPinned />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{dataPorto?.deskripsi}</Text>
</Grid.Col>
</Grid>
</Stack>
</Paper>
</>
);
}

36
src/app_modules/katalog/portofolio/ui/ui_detail_logo.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { Paper, Title, AspectRatio, Image } from "@mantine/core";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
export function Portofolio_UiDetailLogo({
dataPorto,
}: {
dataPorto: MODEL_PORTOFOLIO;
}) {
return (
<>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Title mb={"lg"} order={6}>Logo Bisnis</Title>
<AspectRatio ratio={1 / 1}>
<Paper>
<Image
alt="Foto"
src={RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`}
/>
</Paper>
</AspectRatio>
</Paper>
</>
);
}

98
src/app_modules/katalog/portofolio/ui/ui_detail_media.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client";
import { Paper, Title, Stack, Grid, Text } from "@mantine/core";
import {
IconBrandFacebook,
IconBrandInstagram,
IconBrandTiktok,
IconBrandTwitter,
IconBrandYoutube,
} from "@tabler/icons-react";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
export function Portofolio_UiSosialMedia({
dataPorto,
}: {
dataPorto: MODEL_PORTOFOLIO;
}) {
return (
<>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Title order={6}>Media Sosial Bisnis</Title>
<Stack p={"sm"}>
<Grid>
<Grid.Col span={2}>
<IconBrandFacebook />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.facebook ? (
<Text>{dataPorto?.Portofolio_MediaSosial.facebook}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandInstagram />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.instagram ? (
<Text>{dataPorto?.Portofolio_MediaSosial.instagram}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandTiktok />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.tiktok ? (
<Text>{dataPorto?.Portofolio_MediaSosial.tiktok}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandTwitter />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.twitter ? (
<Text>{dataPorto?.Portofolio_MediaSosial.twitter}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconBrandYoutube />
</Grid.Col>
<Grid.Col span={"auto"}>
{dataPorto?.Portofolio_MediaSosial.youtube ? (
<Text>{dataPorto?.Portofolio_MediaSosial.youtube}</Text>
) : (
"-"
)}
</Grid.Col>
</Grid>
</Stack>
</Paper>
</>
);
}

34
src/app_modules/katalog/portofolio/ui/ui_detail_portofolio.tsx Normal file
View File

@@ -0,0 +1,34 @@
"use client";
import {
Stack
} from "@mantine/core";
import { ComponentPortofolio_ButtonDelete } from "../component/button_delete";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { Portofolio_UiDetailData } from "./ui_detail_data";
import { Portofolio_UiDetailLogo } from "./ui_detail_logo";
import { Portofolio_UiSosialMedia } from "./ui_detail_media";
export default function Portofolio_UiDetail({
dataPorto,
userLoginId,
}: {
dataPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Stack mb={"lg"}>
<Portofolio_UiDetailData dataPorto={dataPorto} />
<Portofolio_UiDetailLogo dataPorto={dataPorto} />
<Portofolio_UiSosialMedia dataPorto={dataPorto} />
<ComponentPortofolio_ButtonDelete
dataPorto={dataPorto}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}

36
src/app_modules/katalog/portofolio/ui/ui_layout.tsx Normal file
View File

@@ -0,0 +1,36 @@
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { ComponentPortofolio_ButtonMore } from "../component/button_more";
export default function PortofolioLayout({
children,
portoId,
userLoginId,
authorId,
}: {
children: any;
portoId: any;
userLoginId: string;
authorId: string;
}) {
return (
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="Detail Portofolio"
customButtonRight={
<ComponentPortofolio_ButtonMore
portoId={portoId}
authorId={authorId}
userLoginId={userLoginId}
/>
}
/>
}
>
{children}
</UIGlobal_LayoutTamplate>
</>
);
}

48
src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio.tsx Normal file
View File

@@ -0,0 +1,48 @@
"use client";
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
import { Box, Center } from "@mantine/core";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import { ComponentPortofolio_DaftarBoxView } from "../component/card_view_daftar";
import { portofolio_funGetAllDaftarByid } from "../fun/get/get_all_portofolio";
import { MODEL_PORTOFOLIO } from "../model/interface";
export function Portofolio_UiListDetail({
dataPortofolio,
profileId,
}: {
dataPortofolio: MODEL_PORTOFOLIO[];
profileId: string;
}) {
const [data, setData] = useState(dataPortofolio);
const [activePage, setActivePage] = useState(1);
return (
<>
<Box py={5}>
<ScrollOnly
height="90vh"
renderLoading={() => (
<Center mt={"lg"}>
<ComponentGlobal_UI_Loader />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await portofolio_funGetAllDaftarByid({
profileId,
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => <ComponentPortofolio_DaftarBoxView data={item} />}
</ScrollOnly>
</Box>
</>
);
}

23
src/app_modules/katalog/portofolio/view/view_list_detail_portofolio.tsx Normal file
View File

@@ -0,0 +1,23 @@
import UIGlobal_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import React from "react";
import { Portofolio_UiListDetail } from "../ui/ui_list_detail_portofolio";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import { MODEL_PORTOFOLIO } from "../model/interface";
export async function Portofolio_ViewListDetail({
dataPortofolio,
profileId
}: {
dataPortofolio: MODEL_PORTOFOLIO[]
profileId: string
}) {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Daftar Portofolio" />}
>
<Portofolio_UiListDetail dataPortofolio={dataPortofolio} profileId={profileId} />
</UIGlobal_LayoutTamplate>
</>
);
}

Some files were not shown because too many files have changed in this diff Show More