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

Fix : Avatar

Browse Source 
Deskripsi:
- Ubah avatar yang image nya di ambil dari storage wibu server
- Avatar forum
- Avatra job
- Avatar Investasi
- Avatar donasi
## No Issuee
This commit is contained in:
Bagasbanuna02
2024-10-03 12:00:05 +08:00
parent 284787243b
commit dba0a5c9bf
47 changed files with 839 additions and 1375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "hipmi",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"prisma": {
"seed": "npx tsx prisma/seed.ts"

3
prisma/schema.prisma
View File

@@ -231,6 +231,9 @@ model Investasi {
MasterProgresInvestasi MasterProgresInvestasi? @relation(fields: [masterProgresInvestasiId], references: [id])
masterProgresInvestasiId String?
Investasi_Invoice Investasi_Invoice[]
// imageId String?
// prospektusId String?
}
model MasterPencarianInvestor {

2
src/app/dev/forum/forumku/[id]/page.tsx
View File

@@ -19,7 +19,7 @@ export default async function Page({ params }: { params: { id: string } }) {
"Profile.imagesBackgroundId",
]);
// console.log(dataAuthor)
// console.log(auhtorSelectedData)
// console.log(auhtorSelectedData)
// await new Promise((a, b) => {
// setTimeout(a, 1000);

8
src/app/dev/investasi/detail_saham_terbeli/[id]/layout.tsx
View File

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

13
src/app/dev/investasi/detail_saham_terbeli/[id]/page.tsx
View File

@@ -1,13 +0,0 @@
import { DetailSahamTerbeli } from "@/app_modules/investasi";
import funTotalInvestorByIdInvestasi from "@/app_modules/investasi/fun/fun_total_investor_by_id";
import getOneTransaksiBerhasilByIdInvestasi from "@/app_modules/investasi/fun/get_one_transaksi_by_id";
export default async function Page({ params }: { params: { id: string } }) {
const dataTransaksi = await getOneTransaksiBerhasilByIdInvestasi(params.id);
const investor = await funTotalInvestorByIdInvestasi(
dataTransaksi?.Investasi.id as any
);
// console.log(investor);
return <DetailSahamTerbeli dataTransaksi={dataTransaksi as any} investor={investor} />;
}

1
src/app/lib/id-derectory.ts
View File

@@ -6,6 +6,7 @@ const DIRECTORY_ID = {
map_image: "cm0yjqnxl000910njplqho07w",
investasi_image: "cm0yjs35h000b10njb35o12h1",
investasi_bukti_transfer: "cm0yjsflu000d10njrc3lnqho",
investasi_pdf: "cm1soio74003p38bjyciwf1oy",
donasi_image: "cm0yk1coh000f10nj597a99kv",
donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
job_image: "cm0ypp6zl0003kp7jf59zuvjy",

6
src/app/lib/index.ts
View File

@@ -2,10 +2,12 @@ import APIs from "./APIs";
import DIRECTORY_ID from "./id-derectory";
import prisma from "./prisma";
import { pathAssetImage } from "./path_asset_image";
import { RouterImagePreview } from "./router_hipmi/router_image_preview";
export { DIRECTORY_ID };
export { prisma };
export { APIs };
export { pathAssetImage as RouterAssetImage };
export { pathAssetImage };
// Router
export { RouterImagePreview };

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

@@ -1,4 +1,4 @@
export const routerImagePreview = {
export const RouterImagePreview = {
main: ({ id }: { id: string }) => `/dev/image-preview/${id}`,
not_user_image: ({ id }: { id: string }) => `/preview-image/${id}`,
};

4
src/app_modules/_global/component/comp_load_image.tsx
View File

@@ -2,7 +2,7 @@
import { APIs } from "@/app/lib";
import { pathAssetImage } from "@/app/lib/path_asset_image";
import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
@@ -67,7 +67,7 @@ export function ComponentGlobal_LoadImage({
<Image
onClick={() => {
setIsLoading(true);
router.push(routerImagePreview.main({ id: fileId }), {
router.push(RouterImagePreview.main({ id: fileId }), {
scroll: false,
});
}}

92
src/app_modules/_global/component/comp_load_image_landscape.tsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import { APIs } from "@/app/lib";
import { pathAssetImage } from "@/app/lib/path_asset_image";
import { RouterImagePreview } from "@/app/lib";
import { Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentGlobal_LoadImageLandscape({
fileId,
}: {
fileId: string;
}) {
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const [isLoading, setLoading] = useState(false);
const url = APIs.GET({ fileId: fileId });
useShallowEffect(() => {
onLoadImage();
}, []);
async function onLoadImage() {
try {
const res = await fetch(url);
if (res.ok) {
return setIsImage(true);
}
setIsImage(false);
} catch (error) {
console.log(error);
}
}
if (isImage === null) return <Skeleton h={200} w={"100%"} />;
if (!isImage)
return (
<>
<Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
<Image
alt="No Image"
maw={150}
m={"auto"}
p={"xs"}
src={pathAssetImage.no_image}
/>
</Center>
</>
);
return (
<>
<Center>
<Image
onClick={() => {
setLoading(true);
router.push(RouterImagePreview.main({ id: fileId }), {
scroll: false,
});
}}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
borderRadius: "5px",
}}
radius={"4px"}
height={200}
alt="Image"
opacity={isLoading ? 0.5 : 1}
src={url}
/>
{isLoading ? (
<Image
alt="Loader"
src={pathAssetImage.new_loader}
height={50}
width={50}
style={{
position: "absolute",
}}
/>
) : (
""
)}
</Center>
</>
);
}

4
src/app_modules/_global/component/comp_not_user_load_image.tsx
View File

@@ -2,7 +2,7 @@
import { APIs } from "@/app/lib";
import { pathAssetImage } from "@/app/lib/path_asset_image";
import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
@@ -62,7 +62,7 @@ export function ComponentGlobal_NotUserLoadImage({
<Image
onClick={() => {
setIsLoading(true);
router.push(routerImagePreview.not_user_image({ id: fileId }), {
router.push(RouterImagePreview.not_user_image({ id: fileId }), {
scroll: false,
});
}}

2
src/app_modules/_global/component/index.ts
View File

@@ -6,6 +6,7 @@ import { ComponentGlobal_BoxUploadImage } from "./comp_box_upload_image";
import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
import { ComponentGlobal_LoaderAvatar } from "./comp_load_avatar";
import { ComponentGlobal_LoadImage } from "./comp_load_image";
import { ComponentGlobal_LoadImageLandscape } from "./comp_load_image_landscape";
import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
import { ComponentGlobal_NotUserLoadImage } from "./comp_not_user_load_image";
import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
@@ -27,3 +28,4 @@ export { ComponentGlobal_ButtonUploadFileImage };
export { ComponentGlobal_LoaderAvatar };
export { ComponentGlobal_AvatarAndUsername };
export { ComponentGlobal_NotUserLoadImage };
export { ComponentGlobal_LoadImageLandscape };

19
src/app_modules/donasi/component/card_view/card_publish.tsx
View File

@@ -2,7 +2,10 @@
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
import {
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import {
AspectRatio,
Card,
@@ -31,16 +34,8 @@ export default function ComponentDonasi_CardPublish({
return (
<>
<Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
onClick={() => {
<ComponentGlobal_CardStyles
onClickHandler={() => {
setVisible(true);
setDonasiId(data.id);
router.push(path + `${data.id}`);
@@ -88,7 +83,7 @@ export default function ComponentDonasi_CardPublish({
) : (
""
)}
</Card>
</ComponentGlobal_CardStyles>
</>
);
}

175
src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx
View File

@@ -1,8 +1,16 @@
"use client";
import { pathAssetImage, RouterImagePreview } from "@/app/lib";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_CardStyles,
ComponentGlobal_LoaderAvatar,
} from "@/app_modules/_global/component";
import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/card_publish";
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
import {
@@ -11,6 +19,7 @@ import {
} from "@/app_modules/donasi/model/interface";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import {
ActionIcon,
AspectRatio,
Box,
Center,
@@ -23,14 +32,10 @@ import {
SimpleGrid,
Stack,
Text,
Title
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import {
IconBrandGmail,
IconMoodSmile,
IconPhone
} from "@tabler/icons-react";
import { IconBrandGmail, IconMoodSmile, IconPhone } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
@@ -39,64 +44,73 @@ export default function PenggalangDanaDonasi({
}: {
dataPenggalang: MODEL_DONASI_INFO_PENGGALANG;
}) {
const [value, setValue] = useState(dataPenggalang);
const [data, setData] = useState(dataPenggalang);
return (
<>
<Stack>
<InformasiPenggalang value={value as any} />
{value.Donasi.map((e, i) => (
<Box key={i}>
<ComponentDonasi_CardPublish
data={e}
path={RouterDonasi.detail_publish}
/>
</Box>
))}
<InformasiPenggalang value={data as any} />
<Stack spacing={0}>
{data.Donasi.map((e, i) => (
<Box key={i}>
<ComponentDonasi_CardPublish
data={e}
path={RouterDonasi.detail_publish}
/>
</Box>
))}
</Stack>
</Stack>
</>
);
}
function InformasiPenggalang({ value }: { value: MODEL_USER }) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
return (
<>
{/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
<Box
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
padding: "20px",
cursor: "pointer",
borderRadius: "10px",
color: "white",
marginBottom: "10px",
}}
>
<Stack
spacing={"xl"}
>
<ComponentGlobal_CardStyles>
<Stack spacing={"xl"}>
<Stack align="center" spacing={0}>
<Paper
radius={"100%"}
h={100}
w={100}
sx={{ borderStyle: "solid" }}
>
<Center h={"100%"}>
<Image
radius={"100%"}
width={100}
height={100}
alt="Foto"
src={
RouterProfile.api_foto_profile + value?.Profile?.imagesId
}
<Box h={100}>
<ActionIcon
size={100}
radius={"100%"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
}}
opacity={isLoading ? 0.5 : 1}
onClick={() => {
router.push(
RouterImagePreview.main({
id: value.Profile.imageId as any,
}),
{ scroll: false }
);
setIsLoading(true);
}}
>
<ComponentGlobal_LoaderAvatar
fileId={value.Profile.imageId as any}
sizeAvatar={100}
/>
</Center>
</Paper>
<Title order={3}>@{value?.username}</Title>
{isLoading && (
<Image
pos={"absolute"}
height={50}
width={50}
alt="Photo"
src={pathAssetImage.new_loader}
/>
)}
</ActionIcon>
</Box>
<Title order={3}>@ {value?.username}</Title>
</Stack>
<Stack>
<Group>
@@ -113,64 +127,7 @@ function InformasiPenggalang({ value }: { value: MODEL_USER }) {
</Group>
</Stack>
</Stack>
</Box>
</>
);
}
function DataPengganganDana({ donasi }: { donasi: MODEL_DONASI[] }) {
const router = useRouter();
const { height, width } = useViewportSize();
return (
<>
<Title order={5}>Peggalangan Dana Yang Dilakukan</Title>
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{donasi.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_main + `${e.id}`)}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{e.title}
</Text>
<Progress value={50} color="orange" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+e.target} />
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
</ComponentGlobal_CardStyles>
</>
);
}

2
src/app_modules/donasi/fun/get/get_author_by_id.ts
View File

@@ -17,7 +17,7 @@ export async function Donasi_getAuthorById(authorId: string) {
id: true,
name: true,
email: true,
imagesId: true,
imageId: true,
},
},
Donasi: {

5
src/app_modules/forum/component/detail_component/detail_create_komentar.tsx
View File

@@ -93,6 +93,11 @@ export default function ComponentForum_DetailCreateKomentar({
onChange={(val) => {
setValue(val);
}}
style={{
overflowY: "auto",
maxHeight: 100,
minHeight: 50,
}}
/>
</Paper>

43
src/app_modules/forum/component/detail_component/detail_header.tsx
View File

@@ -48,6 +48,8 @@ import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
export default function ComponentForum_DetailHeader({
data,
@@ -59,6 +61,7 @@ export default function ComponentForum_DetailHeader({
onLoadData: (val: any) => void;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
return (
<>
@@ -68,30 +71,38 @@ export default function ComponentForum_DetailHeader({
span={"content"}
onClick={() => {
if (data?.Author?.id) {
setIsLoading(true);
router.push(RouterForum.forumku + data?.Author?.id);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
<Avatar
size={40}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
radius={"xl"}
bg={"gray.1"}
src={
data?.Author.Profile.imagesId
? RouterProfile.api_foto_profile +
data?.Author.Profile.imagesId
: "/aset/global/avatar.png"
}
/>
{isLoading ? (
<Avatar
size={40}
radius={"100%"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
}}
>
<ComponentGlobal_Loader variant="dots" />
</Avatar>
) : (
<ComponentGlobal_LoaderAvatar
fileId={data?.Author.Profile?.imageId as any}
/>
)}
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack spacing={3}>
<Text lineClamp={1} fz={"sm"} fw={"bold"} color="white">
{data?.Author.username ? data?.Author.username : "Nama author "}
{data?.Author.Profile.name
? data?.Author.Profile.name
: "Nama author "}
</Text>
<Badge
w={70}
@@ -102,11 +113,7 @@ export default function ComponentForum_DetailHeader({
: "red"
}
>
<Text fz={10}>
{(data?.ForumMaster_StatusPosting.id as any) === 1
? "Open"
: "Close"}
</Text>
<Text fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
</Badge>
</Stack>
</Grid.Col>

13
src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
View File

@@ -1,18 +1,14 @@
"use client";
import {
Stack,
Center,
Box,
Card,
Spoiler,
Divider,
Text,
Spoiler,
Stack,
Text
} from "@mantine/core";
import _ from "lodash";
import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
export default function ComponentForum_KomentarView({
data,
@@ -30,8 +26,6 @@ export default function ComponentForum_KomentarView({
<Card mb={"xs"} bg={"transparent"}>
<Card.Section>
<ComponentForum_KomentarAuthorNameOnHeader
authorName={data?.Author?.username}
imagesId={data?.Author?.Profile?.imagesId}
tglPublish={data?.createdAt}
userId={data?.Author?.id}
komentarId={data?.id}
@@ -39,6 +33,7 @@ export default function ComponentForum_KomentarView({
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
profile={data.Author.Profile}
/>
</Card.Section>
<Card.Section sx={{ zIndex: 0 }} p={"sm"}>

35
src/app_modules/forum/component/detail_component/detail_view.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Card, Stack, Group, Text } from "@mantine/core";
import { Card, Stack, Group, Text, Box } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_DetailHeader from "./detail_header";
@@ -8,6 +8,7 @@ import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
export default function ComponentForum_DetailForumView({
data,
@@ -22,19 +23,9 @@ export default function ComponentForum_DetailForumView({
}) {
return (
<>
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
{/* HEADER */}
<Card.Section>
<ComponentGlobal_CardStyles>
<Stack>
{/* HEADER */}
<ComponentForum_DetailHeader
data={data}
userLoginId={userLoginId}
@@ -42,11 +33,9 @@ export default function ComponentForum_DetailForumView({
onLoadData(val);
}}
/>
</Card.Section>
{/* CONTENT */}
<Card.Section sx={{ zIndex: 0 }} p={"lg"}>
<Stack spacing={"xs"}>
{/* CONTENT */}
<Box p={"lg"} >
<Text fz={"sm"} color="white">
{data?.diskusi ? (
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
@@ -54,11 +43,9 @@ export default function ComponentForum_DetailForumView({
""
)}
</Text>
</Stack>
</Card.Section>
</Box>
{/* FOOTER */}
<Card.Section>
{/* FOOTER */}
<Stack>
<Group position="apart">
<Group spacing={"xs"} px={"sm"}>
@@ -94,8 +81,8 @@ export default function ComponentForum_DetailForumView({
</Group>
</Group>
</Stack>
</Card.Section>
</Card>
</Stack>
</ComponentGlobal_CardStyles>
</>
);
}

30
src/app_modules/forum/component/forumku_component/forumku_header.tsx
View File

@@ -9,7 +9,8 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_ForumkuMoreButton from "./forumku_more_button";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
export default function ComponentForum_ForumkuHeaderCard({
data,
@@ -25,7 +26,6 @@ export default function ComponentForum_ForumkuHeaderCard({
allData: any[];
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
return (
<>
@@ -35,29 +35,15 @@ export default function ComponentForum_ForumkuHeaderCard({
span={"content"}
onClick={() => {
if (data.Author.id) {
setIsLoading(true);
router.push(RouterForum.forumku + data.Author.id);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
{isLoading ? (
<Loader color="gray" variant="dots" />
) : (
<Avatar
size={40}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
radius={"xl"}
bg={"gray.1"}
src={
data.Author.Profile.imagesId
? RouterProfile.api_foto_profile +
data.Author.Profile.imagesId
: "/aset/global/avatar.png"
}
/>
)}
<ComponentGlobal_LoaderAvatar
fileId={data.Author.Profile.imageId as any}
/>
</Grid.Col>
<Grid.Col span={"auto"}>
@@ -82,7 +68,9 @@ export default function ComponentForum_ForumkuHeaderCard({
: "red"
}
>
<Text c={"white"} fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
<Text c={"white"} fz={10}>
{data?.ForumMaster_StatusPosting.status}
</Text>
</Badge>
</Stack>
</Grid.Col>
@@ -90,7 +78,7 @@ export default function ComponentForum_ForumkuHeaderCard({
<Grid.Col span={"content"}>
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"white"} fz={"sm"} >
<Text c={"white"} fz={"sm"}>
{data.createdAt !== undefined && data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
day: "numeric",

89
src/app_modules/forum/component/forumku_component/forumku_view.tsx
View File

@@ -1,14 +1,16 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
import {
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { Box, Group, Stack, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_ForumkuHeaderCard from "./forumku_header";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function ComponentForum_ForumkuMainCardView({
data,
@@ -22,23 +24,12 @@ export default function ComponentForum_ForumkuMainCardView({
allData: any[];
}) {
const router = useRouter();
const [loadingKomen, setLoadingKomen] = useState(false);
const [loadingDetail, setLoadingDetail] = useState(false);
const [postingId, setPostingId] = useState("");
const [visable, setVisible] = useState(false);
return (
<>
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
<Card.Section>
<ComponentGlobal_CardStyles>
<Stack>
<ComponentForum_ForumkuHeaderCard
data={data}
isMoreButton={true}
@@ -46,42 +37,40 @@ export default function ComponentForum_ForumkuMainCardView({
onLoadData={onLoadData}
allData={allData}
/>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c={"white"} fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Card.Section>
<Box
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
setVisible(true);
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c={"white"} fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Box>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
loading={loadingKomen && data?.id === postingId ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
</ActionIcon>
<Group spacing={"xs"} px={"sm"}>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" : "gray"}>{data?.Forum_Komentar.length}</Text>
</Group>
</Stack>
</Card.Section>
</Card>
<Text
c={
(data?.ForumMaster_StatusPosting?.id as any) === 1
? "white"
: "gray"
}
>
{data?.Forum_Komentar.length}
</Text>
</Group>
{visable && <ComponentGlobal_CardLoadingOverlay />}
</Stack>
</ComponentGlobal_CardStyles>
</>
);
}

62
src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx
View File

@@ -1,50 +1,41 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
import { useRouter } from "next/navigation";
import moment from "moment";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import {
IconCircleFilled,
IconDots,
IconEdit,
IconFlag3,
IconMessageCircle,
IconTrash,
} from "@tabler/icons-react";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { Avatar, Divider, Grid, Group, Stack, Text } from "@mantine/core";
import { IconCircle } from "@tabler/icons-react";
import { IoIosMore } from "react-icons/io";
import { useDisclosure } from "@mantine/hooks";
import { useState } from "react";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import { useRouter } from "next/navigation";
import ComponentForum_KomentarButtonMore from "./komentar_button_more";
import { useState } from "react";
import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { data } from "autoprefixer";
import { MODEL_PROFILE } from "@/app_modules/katalog/profile/model/interface";
export default function ComponentForum_KomentarAuthorNameOnHeader({
userId,
komentarId,
imagesId,
authorName,
tglPublish,
isPembatas,
isMoreButton,
setKomentar,
postingId,
userLoginId,
profile,
}: {
userId?: string;
komentarId?: string;
imagesId?: string;
authorName?: string;
tglPublish?: Date;
isPembatas?: boolean;
isMoreButton?: boolean;
setKomentar?: any;
postingId?: string;
userLoginId: string;
profile: MODEL_PROFILE;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
return (
<>
@@ -54,30 +45,35 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
span={"content"}
onClick={() => {
if (userId) {
setIsLoading(true);
router.push(RouterForum.forumku + userId);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
<Avatar
size={30}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
radius={"xl"}
bg={"gray.1"}
src={
imagesId
? RouterProfile.api_foto_profile + imagesId
: "/aset/global/avatar.png"
}
/>
{isLoading ? (
<Avatar
size={40}
radius={"100%"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
}}
>
<ComponentGlobal_Loader variant="dots" />
</Avatar>
) : (
<ComponentGlobal_LoaderAvatar fileId={profile.imageId as any} />
)}
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack justify="center" h={"100%"}>
<Grid>
<Grid.Col span={"auto"}>
<Text color="white" lineClamp={1} fz={"sm"} fw={"bold"}>
{authorName ? authorName : "Nama author "}
{profile.name ? profile.name : "Nama author "}
</Text>
</Grid.Col>
</Grid>

37
src/app_modules/forum/component/main_component/card_header.tsx
View File

@@ -3,20 +3,14 @@
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import {
Avatar,
Badge,
Grid,
Group,
Loader,
Stack,
Text
} from "@mantine/core";
import { Avatar, Badge, Grid, Group, Loader, Stack, Text } from "@mantine/core";
import { IconCircle } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_BerandaMoreButton from "./card_more_button";
import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
export default function ComponentForum_BerandaHeaderCard({
data,
@@ -50,23 +44,20 @@ export default function ComponentForum_BerandaHeaderCard({
}}
>
{isLoading ? (
<Loader color="gray" variant="dots" />
) : (
<Avatar
size={40}
sx={{
radius={"100%"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
borderColor: "white",
}}
radius={"xl"}
bg={"gray.1"}
src={
data.Author.Profile.imagesId
? RouterProfile.api_foto_profile +
data.Author.Profile.imagesId
: "/aset/global/avatar.png"
}
>
<ComponentGlobal_Loader variant="dots" />
</Avatar>
) : (
<ComponentGlobal_LoaderAvatar
fileId={data.Author.Profile.imageId as any}
/>
)}
</Grid.Col>
@@ -76,8 +67,8 @@ export default function ComponentForum_BerandaHeaderCard({
<Grid>
<Grid.Col span={"auto"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"} color={"white"}>
{data.Author.username
? data.Author.username
{data.Author.Profile.name
? data.Author.Profile.name
: "Nama author "}
</Text>
</Grid.Col>

88
src/app_modules/forum/component/main_component/card_view.tsx
View File

@@ -2,10 +2,10 @@
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ActionIcon, Card, Group, Stack, Text } from "@mantine/core";
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { Box, Group, Stack, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
@@ -24,23 +24,12 @@ export default function ComponentForum_BerandaCardView({
allData: any[];
}) {
const router = useRouter();
const [loadingKomen, setLoadingKomen] = useState(false);
const [loadingDetail, setLoadingDetail] = useState(false);
const [postingId, setPostingId] = useState("");
const [visible, setVisible] = useState(false);
return (
<>
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
<Card.Section>
<ComponentGlobal_CardStyles>
<Stack>
<ComponentForum_BerandaHeaderCard
data={data}
isMoreButton={true}
@@ -48,42 +37,39 @@ export default function ComponentForum_BerandaCardView({
onLoadData={onLoadData}
allData={allData}
/>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c="white" fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Card.Section>
<Box
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
setVisible(true), router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c="white" fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Box>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
loading={loadingKomen && data?.id === postingId ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
</ActionIcon>
<Group spacing={"xs"}>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
{/* <TotalKomentar postingId={e?.id} /> */}
<Text color={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" :"gray"}>{data?.Forum_Komentar.length}</Text>
</Group>
</Stack>
</Card.Section>
</Card>
<Text
color={
(data?.ForumMaster_StatusPosting?.id as any) === 1
? "white"
: "gray"
}
>
{data?.Forum_Komentar.length}
</Text>
</Group>
{visible && <ComponentGlobal_CardLoadingOverlay />}
</Stack>
</ComponentGlobal_CardStyles>
</>
);
}

7
src/app_modules/forum/detail/main_detail.tsx
View File

@@ -1,9 +1,8 @@
"use client";
import { Box, Center, Loader, Stack } from "@mantine/core";
import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
import _ from "lodash";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
import mqtt_client from "@/util/mqtt_client";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
@@ -27,7 +26,6 @@ export default function Forum_MainDetail({
}) {
const [data, setData] = useState(dataPosting);
const [lsKomentar, setLsKomentar] = useState(listKomentar);
const [activePage, setActivePage] = useState(1);
// useShallowEffect(() => {
@@ -90,9 +88,8 @@ export default function Forum_MainDetail({
""
)}
<Box >
<Box>
<ScrollOnly
height={"60vh"}
renderLoading={() => (
<Center mt={"lg"}>

73
src/app_modules/forum/forumku/forum_profile.tsx
View File

@@ -1,12 +1,24 @@
"use client";
import { pathAssetImage } from "@/app/lib";
import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { Avatar, Button, Center, Grid, Stack, Text } from "@mantine/core";
import {
Avatar,
Box,
Button,
Center,
Grid,
Image,
Stack,
Text,
} from "@mantine/core";
import { IconCircleFilled } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
@@ -21,25 +33,54 @@ export default function ComponentForum_ViewForumProfile({
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [isLoadingImage, setIsLoadingImage] = useState(false);
return (
<>
<Center>
<Avatar
bg={"gray"}
radius={"100%"}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: AccentColor.yellow,
<Box
h={100}
style={{ borderRadius: "50%" }}
onClick={() => {
router.push(
RouterImagePreview.main({
id: auhtorSelectedData.Profile.imageId as any,
}),
{ scroll: false }
);
setIsLoadingImage(true);
}}
size={100}
alt="foto"
src={
RouterProfile.api_foto_profile +
auhtorSelectedData?.Profile?.imagesId
}
/>
>
{isLoadingImage ? (
<Avatar
size={100}
radius={"100%"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
}}
opacity={0.7}
>
<ComponentGlobal_LoaderAvatar
sizeAvatar={100}
fileId={auhtorSelectedData.Profile.imageId as any}
/>
<Image
pos={"absolute"}
height={50}
width={50}
alt="Photo"
src={pathAssetImage.new_loader}
/>
</Avatar>
) : (
<ComponentGlobal_LoaderAvatar
sizeAvatar={100}
fileId={auhtorSelectedData.Profile.imageId as any}
/>
)}
</Box>
</Center>
<Grid>
<Grid.Col span={"auto"}>
@@ -69,7 +110,7 @@ export default function ComponentForum_ViewForumProfile({
border: `1px solid ${AccentColor.yellow}`,
backgroundColor: MainColor.yellow,
}}
c="white"
c="black"
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}

34
src/app_modules/forum/forumku/index.tsx
View File

@@ -2,8 +2,7 @@
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import {
AccentColor,
MainColor,
AccentColor
} from "@/app_modules/_global/color/color_pallet";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import {
@@ -25,6 +24,7 @@ import ComponentForum_ForumkuMainCardView from "../component/forumku_component/f
import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
import { MODEL_FORUM_POSTING } from "../model/interface";
import ComponentForum_ViewForumProfile from "./forum_profile";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
export default function Forum_Forumku({
auhtorSelectedData,
@@ -46,32 +46,8 @@ export default function Forum_Forumku({
return (
<>
{userLoginId === auhtorSelectedData.id ? (
<Affix position={{ bottom: rem(100), right: rem(30) }}>
<ActionIcon
opacity={scroll.y > 0 ? 0.5 : ""}
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.skyblue}`,
}}
size={"xl"}
radius={"xl"}
variant="transparent"
bg={AccentColor.blue}
onClick={() => {
setLoadingCreate(true);
router.push(RouterForum.create);
}}
>
{loadingCreate ? (
<Loader size={25} />
) : (
<IconPencilPlus color="white" />
)}
</ActionIcon>
</Affix>
) : (
""
{userLoginId === auhtorSelectedData.id && (
<ComponentGlobal_CreateButton path={RouterForum.create} />
)}
<Stack spacing={"xl"}>
@@ -92,7 +68,7 @@ export default function Forum_Forumku({
) : (
// --- Main component --- //
<ScrollOnly
height={data.length < 5 ? "60vh" : "100vh"}
height={data.length < 5 ? "75vh" : "100vh"}
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />

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

@@ -1,13 +1,9 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
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/_global/component_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { IconX } from "@tabler/icons-react";
import React from "react";
export default function LayoutForum_Forumku({
children,
@@ -20,25 +16,11 @@ export default function LayoutForum_Forumku({
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title={`${username}`}
iconLeft={<IconX />}
/>
<UIGlobal_LayoutHeaderTamplate title={"Forum"} iconLeft={<IconX />} />
}
>
{children}
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={
<ComponentForum_HeaderTamplate
title={`${username}`}
changeIconBack={<IconX />}
/>
}
>
{children}
</AppComponentGlobal_LayoutTamplate> */}
</>
);
}

2
src/app_modules/forum/fun/get/get_all_komentar_by_id.ts
View File

@@ -34,7 +34,7 @@ export async function forum_funGetAllKomentarById({
Profile: {
select: {
name: true,
imagesId: true,
imageId: true,
},
},
},

3
src/app_modules/forum/fun/get/get_list_posting_by_author_id.ts
View File

@@ -35,7 +35,8 @@ export async function forum_getAllPostingByAuhtorId({
Profile: {
select: {
id: true,
imagesId: true,
name: true,
imageId: true,
},
},
},

3
src/app_modules/forum/fun/get/new_get_all_posting.ts
View File

@@ -39,7 +39,8 @@ export async function forum_new_getAllPosting({
Profile: {
select: {
id: true,
imagesId: true,
name: true,
imageId: true,
},
},
},

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

@@ -1,15 +1,12 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import {
ActionIcon,
Avatar,
Loader
} from "@mantine/core";
import { ActionIcon, Avatar } from "@mantine/core";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
@@ -21,9 +18,7 @@ export default function LayoutForum_Main({
dataAuthor: MODEL_USER;
}) {
const router = useRouter();
const [hotMenu, setHotMenu] = useState(1);
const [loading, setLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
return (
<>
@@ -36,26 +31,26 @@ export default function LayoutForum_Main({
radius={"xl"}
variant="transparent"
onClick={() => {
setLoading(true);
setIsLoading(true);
router.push(RouterForum.forumku + dataAuthor?.id);
}}
>
{loading ? (
<Loader size={20} />
) : (
{isLoading ? (
<Avatar
radius={"xl"}
size={30}
sx={{
radius={"100%"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "black",
borderWidth: "1px",
}}
alt="foto"
src={
RouterProfile.api_foto_profile +
dataAuthor?.Profile?.imagesId
}
>
<ComponentGlobal_Loader variant="dots" />
</Avatar>
) : (
<ComponentGlobal_LoaderAvatar
fileId={dataAuthor.Profile.imageId as any}
sizeAvatar={30}
/>
)}
</ActionIcon>
@@ -65,84 +60,6 @@ export default function LayoutForum_Main({
>
{children}
</UIGlobal_LayoutTamplate>
{/* <AppComponentGlobal_LayoutTamplate
header={
<Header height={50} sx={{ borderStyle: "none" }}>
<Group h={50} position="apart" px={"md"}>
<ActionIcon
variant="transparent"
onClick={() => {
setLoading(true);
return router.push(RouterHome.main_home);
}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5}>Forum</Title>
<ActionIcon
loading={loading ? true : false}
variant="transparent"
onClick={() => {
setLoading(true);
router.push(RouterForum.forumku + dataAuthor?.id);
}}
>
<Avatar
radius={"xl"}
size={30}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "black",
}}
alt="foto"
src={
RouterProfile.api_foto_profile +
dataAuthor?.Profile?.imagesId
}
/>
</ActionIcon>
</Group>
</Header>
}
// footer={
// <Footer height={60} bg={"dark"}>
// <Grid>
// {listFooter.map((e) => (
// <Grid.Col
// key={e.id}
// span={"auto"}
// pt={"md"}
// onClick={() => {
// router.replace(e.path);
// setHotMenu(e.id);
// }}
// >
// <Center>
// <Stack align="center" spacing={0}>
// <ActionIcon
// variant="transparent"
// c={hotMenu === e.id ? "blue" : "white"}
// >
// {e.icon}
// </ActionIcon>
// <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
// {e.name}
// </Text>
// </Stack>
// </Center>
// </Grid.Col>
// ))}
// </Grid>
// </Footer>
// }
>
{children}
</AppComponentGlobal_LayoutTamplate> */}
</>
);
}

4
src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx
View File

@@ -1,5 +1,5 @@
import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
import { ComponentGlobal_AvatarAndAuthorName } from "@/app_modules/_global/component";
import { ComponentGlobal_AvatarAndAuthorName, ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
import {
Stack,
@@ -25,7 +25,7 @@ export function Investasi_ComponentBoxDetailData({
<>
<Investasi_ComponentStylesCard>
<Stack>
<ComponentGlobal_AvatarAndAuthorName dataUser={data?.Author} />
<ComponentGlobal_AvatarAndUsername profile={data?.Author.Profile as any} />
<AspectRatio ratio={1 / 1} mx={0} mah={250}>
<Image
alt=""

61
src/app_modules/investasi/_component/main/comp_card_beranda.tsx
View File

@@ -1,6 +1,9 @@
import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
import { Warna } from "@/app/lib/warna";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import {
Card,
CardSection,
@@ -19,7 +22,10 @@ import moment from "moment";
import { MODEL_INVESTASI } from "../../_lib/interface";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
import {
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
export function Investasi_ComponentCardBeranda({
data,
@@ -32,17 +38,8 @@ export function Investasi_ComponentCardBeranda({
return (
<>
<Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
marginInline: "15px",
}}
onClick={() => {
<ComponentGlobal_CardStyles
onClickHandler={() => {
setLoadingDetail(true);
setVisible(true);
router.push(RouterInvestasi_OLD.detail + `${data?.id}`);
@@ -77,30 +74,9 @@ export function Investasi_ComponentCardBeranda({
size="xl"
radius="xl"
styles={{
label:{color: MainColor.black}
label: { color: MainColor.black },
}}
/>
{/* <Progress
label={
"" +
(
((+data?.totalLembar - +data?.sisaLembar) /
+data?.totalLembar) *
100
).toFixed(1) +
"%"
}
value={
+(
((+data?.totalLembar - +data?.sisaLembar) /
+data?.totalLembar) *
100
).toFixed(1)
}
color="teal"
size="xl"
radius="xl"
/> */}
</Stack>
</CardSection>
@@ -158,7 +134,20 @@ export function Investasi_ComponentCardBeranda({
</Group>
</CardSection>
{visible ? <ComponentGlobal_CardLoadingOverlay /> : ""}
</Card>
</ComponentGlobal_CardStyles>
{/* <Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
marginInline: "15px",
}}
></Card> */}
</>
);
}

4
src/app_modules/investasi/_ui/main/ui_beranda.tsx
View File

@@ -1,9 +1,5 @@
"use client";
import mqtt_client from "@/util/mqtt_client";
import { useShallowEffect } from "@mantine/hooks";
import React, { useState } from "react";
import { Investasi_ComponentButtonUpdateBeranda } from "../../_component/main/comp_update_beranda";
import { MODEL_INVESTASI } from "../../_lib/interface";
import { Investasi_ViewBeranda } from "../../_view";

580
src/app_modules/investasi/create/view.tsx
View File

@@ -30,13 +30,14 @@ import {
Text,
TextInput,
} from "@mantine/core";
import { IconUpload } from "@tabler/icons-react";
import { IconCamera, IconUpload } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { funCreateInvestasi } from "../fun/fun_create_investasi";
import { gs_investas_menu, gs_investasi_status } from "../g_state";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
export default function InvestasiCreate({
pencarianInvestor,
@@ -48,7 +49,7 @@ export default function InvestasiCreate({
pembagianDeviden: MODEL_DEFAULT_MASTER_OLD[];
}) {
const router = useRouter();
const [fl, setFl] = useState<File | null>(null);
const [file, setFile] = useState<File | null>(null);
const [img, setImg] = useState<any | null>();
const [pdf, setPdf] = useState<File | null>(null);
const [filePdf, setFilePdf] = useState<any | null>(null);
@@ -83,11 +84,11 @@ export default function InvestasiCreate({
};
// if (_.values(body).includes("")) return toast("Lengkapi data");
if (!fl) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
if (!file) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
if (!pdf) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
const gmbr = new FormData();
gmbr.append("file", fl as any);
gmbr.append("file", file as any);
const flPdf = new FormData();
flPdf.append("file", pdf as any);
@@ -138,38 +139,27 @@ export default function InvestasiCreate({
return (
<>
<Box>
{/* Inputan Create */}
<Stack spacing={"sm"} px={"md"}>
{img ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: AccentColor.blue,
padding: "10px",
borderRadius: "10px",
}}
>
<Stack px={"xs"}>
<Stack spacing={0}>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Foto"
src={img ? img : "/aset/no-img.png"}
maw={200}
height={250}
src={img}
/>
</Paper>
</AspectRatio>
) : (
<Center>
<Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="gray" />
<Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
Upload Gambar
</Text>
</Stack>
</Paper>
</Center>
)}
</AspectRatio>
) : (
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="white" />
<Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
Upload Gambar
</Text>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
{/* Upload Foto */}
<Group position="center" mb={"md"}>
@@ -185,7 +175,7 @@ export default function InvestasiCreate({
ComponentGlobal_WarningMaxUpload({});
} else {
setImg(buffer);
setFl(files);
setFile(files);
}
} catch (error) {
console.log(error);
@@ -196,7 +186,7 @@ export default function InvestasiCreate({
{(props) => (
<Button
{...props}
leftIcon={<IconUpload size={12} />}
leftIcon={<IconCamera color="black" />}
radius={50}
bg={MainColor.yellow}
color="yellow"
@@ -207,287 +197,287 @@ export default function InvestasiCreate({
)}
</FileButton>
</Group>
</Stack>
{/* Upload File */}
<Group position="center">
{!pdf ? (
<Paper
w={"100%"}
style={{
border: `2px solid gray`,
backgroundColor: "gray.1",
padding: "10px",
borderRadius: "10px",
color: "gray",
}}
>
<Text>Upload File Prospektus</Text>
</Paper>
) : (
<Paper
w={"100%"}
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: AccentColor.blue,
padding: "10px",
borderRadius: "10px",
color: "white",
}}
>
<Text lineClamp={1}>{pdf.name}</Text>
</Paper>
)}
{/* {JSON.stringify(filePdf)} */}
<FileButton
accept={"application/pdf"}
onChange={async (files: any) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > maksimalUploadFile) {
ComponentGlobal_WarningMaxUpload({});
} else {
setFilePdf(buffer);
setPdf(files);
}
} catch (error) {
console.log(error);
}
{/* Upload File */}
<Group position="center">
{!pdf ? (
<Paper
w={"100%"}
style={{
border: `2px solid gray`,
backgroundColor: "gray.1",
padding: "10px",
borderRadius: "10px",
color: "gray",
}}
>
{(props) => (
<Button
leftIcon={<IconUpload size={12} />}
{...props}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload File
</Button>
)}
</FileButton>
</Group>
<TextInput
styles={{
label: {
<Text>Upload File Prospektus</Text>
</Paper>
) : (
<Paper
w={"100%"}
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: AccentColor.blue,
padding: "10px",
borderRadius: "10px",
color: "white",
},
}}
withAsterisk
label="Judul Investasi"
placeholder="Judul investasi"
maxLength={100}
onChange={(val) => {
setValue({
...value,
title: val.target.value,
});
}}
/>
}}
>
<Text lineClamp={1}>{pdf.name}</Text>
</Paper>
)}
{/* {JSON.stringify(filePdf)} */}
<FileButton
accept={"application/pdf"}
onChange={async (files: any) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
<TextInput
styles={{
label: {
color: "white",
},
if (files.size > maksimalUploadFile) {
ComponentGlobal_WarningMaxUpload({});
} else {
setFilePdf(buffer);
setPdf(files);
}
} catch (error) {
console.log(error);
}
}}
icon={<Text fw={"bold"}>Rp.</Text>}
min={0}
withAsterisk
label="Dana Dibutuhkan"
placeholder="0"
value={target}
onChange={(val) => {
// console.log(typeof val)
>
{(props) => (
<Button
leftIcon={<IconUpload size={12} />}
{...props}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload File
</Button>
)}
</FileButton>
</Group>
<TextInput
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Judul Investasi"
placeholder="Judul investasi"
maxLength={100}
onChange={(val) => {
setValue({
...value,
title: val.target.value,
});
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
icon={<Text fw={"bold"}>Rp.</Text>}
min={0}
withAsterisk
label="Dana Dibutuhkan"
placeholder="0"
value={target}
onChange={(val) => {
// console.log(typeof val)
const match = val.currentTarget.value
.replace(/\./g, "")
.match(/^[0-9]+$/);
if (val.currentTarget.value === "") return setTarget(0 + "");
if (!match?.[0]) return null;
const nilai = val.currentTarget.value.replace(/\./g, "");
const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
setTarget(targetNilai);
setValue({
...value,
targetDana: +nilai,
});
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
icon={<Text fw={"bold"}>Rp.</Text>}
min={0}
withAsterisk
label="Harga Per Lembar"
placeholder="0"
value={harga}
onChange={(val) => {
try {
// console.log(typeof +val.currentTarget.value);
const match = val.currentTarget.value
.replace(/\./g, "")
.match(/^[0-9]+$/);
if (val.currentTarget.value === "") return setTarget(0 + "");
if (val.currentTarget.value === "") return setHarga(0 + "");
if (!match?.[0]) return null;
const nilai = val.currentTarget.value.replace(/\./g, "");
const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
setTarget(targetNilai);
onTotalLembar({
target: value.targetDana,
harga: +nilai,
});
setHarga(targetNilai);
setValue({
...value,
targetDana: +nilai,
hargaLembar: +nilai,
});
}}
/>
} catch (error) {
console.log(error);
}
}}
/>
<TextInput
styles={{
label: {
color: "white",
},
}}
icon={<Text fw={"bold"}>Rp.</Text>}
min={0}
withAsterisk
label="Harga Per Lembar"
placeholder="0"
value={harga}
onChange={(val) => {
try {
// console.log(typeof +val.currentTarget.value);
const match = val.currentTarget.value
.replace(/\./g, "")
.match(/^[0-9]+$/);
if (val.currentTarget.value === "") return setHarga(0 + "");
if (!match?.[0]) return null;
const nilai = val.currentTarget.value.replace(/\./g, "");
const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
onTotalLembar({
target: value.targetDana,
harga: +nilai,
});
setHarga(targetNilai);
setValue({
...value,
hargaLembar: +nilai,
});
} catch (error) {
console.log(error);
}
}}
/>
<Stack spacing={3} style={{ color: "white" }}>
<Text fz={"sm"} fw={500}>
Total Lembar
</Text>
<Stack spacing={0}>
<Text>{totalLembar}</Text>
<Divider />
</Stack>
<Text fz={10} fs={"italic"}>
*Total lembar dihitung dari, Target Dana : Harga Perlembar
</Text>
<Stack spacing={3} style={{ color: "white" }}>
<Text fz={"sm"} fw={500}>
Total Lembar
</Text>
<Stack spacing={0}>
<Text>{totalLembar}</Text>
<Divider />
</Stack>
<TextInput
styles={{
label: {
color: "white",
},
}}
rightSection={
<Text fw={"bold"} c={"gray"}>
%
</Text>
}
withAsterisk
type="number"
label={"Rasio Keuntungan / ROI %"}
placeholder="Masukan rasio keuntungan"
onChange={(val) => {
setValue({
...value,
roi: _.toNumber(val.target.value),
});
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Pencarian Investor"
placeholder="Pilih batas waktu"
data={pencarianInvestor.map((e) => ({
value: e.id,
label: e.name + " " + "hari",
}))}
onChange={(val) => {
setValue({
...(value as any),
pencarianInvestorId: val,
});
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Periode Deviden"
placeholder="Pilih batas waktu"
data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
onChange={(val) => {
setValue({
...(value as any),
periodeDevidenId: val,
});
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Pembagian Deviden"
placeholder="Pilih batas waktu"
data={pembagianDeviden.map((e) => ({
value: e.id,
label: e.name + " " + "bulan",
}))}
onChange={(val) => {
setValue({
...(value as any),
pembagianDevidenId: val,
});
}}
/>
<Button
my={"xl"}
style={{
transition: "0.5s",
}}
loaderPosition="center"
loading={isLoading ? true : false}
disabled={
value.title === "" ||
value.hargaLembar === 0 ||
value.targetDana === 0 ||
value.roi === 0 ||
value.pencarianInvestorId === "" ||
value.periodeDevidenId === "" ||
value.pembagianDevidenId === "" ||
fl === null ||
filePdf === null
? true
: false
}
radius={50}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => onSubmit()}
>
Simpan
</Button>
<Text fz={10} fs={"italic"}>
*Total lembar dihitung dari, Target Dana : Harga Perlembar
</Text>
</Stack>
</Box>
<TextInput
styles={{
label: {
color: "white",
},
}}
rightSection={
<Text fw={"bold"} c={"gray"}>
%
</Text>
}
withAsterisk
type="number"
label={"Rasio Keuntungan / ROI %"}
placeholder="Masukan rasio keuntungan"
onChange={(val) => {
setValue({
...value,
roi: _.toNumber(val.target.value),
});
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Pencarian Investor"
placeholder="Pilih batas waktu"
data={pencarianInvestor.map((e) => ({
value: e.id,
label: e.name + " " + "hari",
}))}
onChange={(val) => {
setValue({
...(value as any),
pencarianInvestorId: val,
});
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Periode Deviden"
placeholder="Pilih batas waktu"
data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
onChange={(val) => {
setValue({
...(value as any),
periodeDevidenId: val,
});
}}
/>
<Select
styles={{
label: {
color: "white",
},
}}
withAsterisk
label="Pembagian Deviden"
placeholder="Pilih batas waktu"
data={pembagianDeviden.map((e) => ({
value: e.id,
label: e.name + " " + "bulan",
}))}
onChange={(val) => {
setValue({
...(value as any),
pembagianDevidenId: val,
});
}}
/>
<Button
my={"xl"}
style={{
transition: "0.5s",
}}
loaderPosition="center"
loading={isLoading ? true : false}
disabled={
value.title === "" ||
value.hargaLembar === 0 ||
value.targetDana === 0 ||
value.roi === 0 ||
value.pencarianInvestorId === "" ||
value.periodeDevidenId === "" ||
value.pembagianDevidenId === "" ||
file === null ||
filePdf === null
? true
: false
}
radius={50}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => onSubmit()}
>
Simpan
</Button>
</Stack>
</>
);
}

6
src/app_modules/investasi/detail/view.tsx
View File

@@ -119,8 +119,8 @@ export default function DetailInvestasi({
}}
>
{/* Foto username dan sisa waktu */}
<ComponentGlobal_AvatarAndAuthorName
dataUser={dataInvestasi.author as any}
{/* <ComponentGlobal_AvatarAndAuthorName
dataUser={dataInvestasi.author.Profile as any}
componentRight={
data.MasterProgresInvestasi.id === "1" ? (
<Box>
@@ -174,7 +174,7 @@ export default function DetailInvestasi({
</Box>
)
}
/>
/> */}
<AspectRatio ratio={1 / 1} mx={"sm"} mah={250}>
<Image

19
src/app_modules/investasi/detail_saham_terbeli/layout.tsx
View File

@@ -1,19 +0,0 @@
"use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutDetailSahamTerbeli({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Saham Terbeli" />}>
{children}
</UIGlobal_LayoutTamplate>
</>
);
}

379
src/app_modules/investasi/detail_saham_terbeli/view.tsx
View File

@@ -1,379 +0,0 @@
"use client";
import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
import { Warna } from "@/app/lib/warna";
import {
ActionIcon,
AspectRatio,
Avatar,
Box,
Button,
Center,
Divider,
Flex,
Grid,
Group,
Image,
Paper,
Progress,
Slider,
Stack,
Text,
Title,
} from "@mantine/core";
import {
IconBookDownload,
IconCircleCheck,
IconFileDescription,
IconSpeakerphone,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { MODEL_Transaksi_Investasi } from "../_lib/interface";
import { useState } from "react";
import moment from "moment";
import _ from "lodash";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
export default function DetailSahamTerbeli({
dataTransaksi,
investor,
}: {
dataTransaksi: MODEL_Transaksi_Investasi;
investor: number;
}) {
const router = useRouter();
const [investasi, setINvestasi] = useState(dataTransaksi);
const listBox = [
{
id: 1,
name: "Prospektus",
icon: <IconBookDownload size={70} color="white" />,
route: RouterInvestasi_OLD.detail_prospektus,
},
{
id: 2,
name: "Dokumen",
icon: <IconFileDescription size={70} color="white" />,
route: RouterInvestasi_OLD.detail_dokumen,
},
{
id: 3,
name: "Berita",
icon: <IconSpeakerphone size={70} color="white" />,
route: RouterInvestasi_OLD.daftar_berita,
},
];
return (
<>
<Stack>
{/* Saham Terbeli */}
<Stack
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<Group position="apart">
<Group w={"40%"} position="center">
<Stack spacing={5} align="center">
<Text fw={'bold'}>Total Pembelian</Text>
<Text>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(+investasi.gross_amount)}
</Text>
</Stack>
</Group>
<Group w={"40%"} position="center">
<Stack spacing={5} align="center">
<Text fw={"bold"}>Lembar Dibeli</Text>
<Text>
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(+investasi.quantity)}{" "}
lembar
</Text>
</Stack>
</Group>
</Group>
</Stack>
<Stack
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
marginBottom: "15px",
}}
>
<Group position="apart" mb={"md"}>
<ComponentGlobal_AuthorNameOnHeader
authorName={investasi?.Investasi?.author?.username}
imagesId={investasi?.Investasi?.author?.Profile?.imagesId}
profileId={investasi?.Investasi?.author?.Profile?.id}
/>
{(() => {
if (
Number(investasi.Investasi.MasterPencarianInvestor.name) -
moment(new Date()).diff(
new Date(investasi.createdAt),
"days"
) <=
0
) {
return (
<>
<Group position="right">
<IconCircleCheck color="green" />
<Text c={"green"}>Selesai</Text>
</Group>
</>
);
} else {
return (
<>
<Group position="right" spacing={"xs"}>
{(() => {
if (
Number(
investasi.Investasi.MasterPencarianInvestor.name
) -
moment(new Date()).diff(
new Date(investasi.Investasi.countDown),
"days"
) <=
0
) {
return (
<>
<Group position="right" spacing={"xs"}>
<IconCircleCheck color="green" />
<Text
truncate
variant="text"
c={Warna.hijau_tua}
sx={{
fontFamily: "Greycliff CF, sans-serif",
}}
ta="center"
fz="md"
fw={700}
>
Waktu Habis
</Text>
</Group>
</>
);
} else {
return (
<>
<Group position="right" spacing={"xs"}>
<Text>Sisa waktu:</Text>
<Text truncate>
{Number(
investasi.Investasi.MasterPencarianInvestor
.name
) -
moment(new Date()).diff(
new Date(investasi.Investasi.countDown),
"days"
)}
</Text>
<Text truncate>Hari</Text>
</Group>
</>
);
}
})()}
</Group>
</>
);
}
})()}
</Group>
{/* Gambar Investasi */}
<AspectRatio ratio={1 / 1} mah={250} mx={"sm"}>
<Image
radius={"sm"}
height={250}
width={"100%"}
alt=""
src={
RouterInvestasi_OLD.api_gambar + `${investasi.Investasi.imagesId}`
}
/>
</AspectRatio>
{/* Title dan Persentase */}
<Box mb={"md"}>
<Title align="center" order={3} mb={"xs"}>
{investasi.Investasi.title}
</Title>
<Progress
label={
"" +
(
((+investasi.Investasi.totalLembar -
+investasi.Investasi.sisaLembar) /
+investasi.Investasi.totalLembar) *
100
).toFixed(1) +
"%"
}
value={
+(
((+investasi.Investasi.totalLembar -
+investasi.Investasi.sisaLembar) /
+investasi.Investasi.totalLembar) *
100
).toFixed(2)
}
color="teal"
size="xl"
radius="xl"
/>
</Box>
{/* Rincian Data */}
<Grid p={"md"}>
<Grid.Col span={6}>
<Stack>
{/* <Box>
<Text>Terkumpul</Text>
<Text>Rp. </Text>
</Box> */}
<Box>
<Text>Dana Dibutuhkan</Text>
<Text>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(+investasi.Investasi.targetDana)}
</Text>
</Box>
<Box>
<Text>Harga Per Lembar</Text>
<Text>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(+investasi.Investasi.hargaLembar)}
</Text>
</Box>
<Box>
<Text>Jadwal Pembagian</Text>
<Text>
{investasi.Investasi.MasterPembagianDeviden.name} bulan{" "}
</Text>
</Box>
<Box>
<Text>Pembagian Deviden</Text>
<Text>{investasi.Investasi.MasterPeriodeDeviden.name}</Text>
</Box>
</Stack>
</Grid.Col>
<Grid.Col span={6}>
<Stack>
<Box>
<Text>Investor</Text>
<Text>
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(investor)}{" "}
</Text>
</Box>
<Box>
<Text>ROI</Text>
<Text>{investasi.Investasi.roi}%</Text>
</Box>
<Box>
<Text>Total Lembar</Text>
<Text>
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(+investasi.Investasi.totalLembar)}{" "}
lembar
</Text>
</Box>
<Box>
<Text>Sisa Lembar</Text>
<Text>
{new Intl.NumberFormat("id-ID", {
maximumSignificantDigits: 10,
}).format(+investasi.Investasi.sisaLembar)}{" "}
lembar
</Text>
</Box>
</Stack>
</Grid.Col>
</Grid>
{/* List Box */}
<Group position="apart" px={"lg"}>
{listBox.map((e, i) => (
<Paper
key={i}
style={{
padding: "15px",
backgroundColor: AccentColor.blue,
border: `2px solid ${AccentColor.softblue}`,
borderRadius: "10px",
color: "white",
}}
>
<Flex direction={"column"} align={"center"} justify={"center"}>
<Text fz={12}>{e.name}</Text>
<ActionIcon
radius={"xl"}
variant="transparent"
size={60}
onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
>
{e.icon}
</ActionIcon>
</Flex>
</Paper>
))}
</Group>
{/*
<Grid mb={"sm"} justify="center">
{listBox.map((e) => (
<Grid.Col
span={"auto"}
key={e.id}
onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
>
<Center>
<Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
<Flex
direction={"column"}
align={"center"}
justify={"center"}
>
<Text fz={12}>{e.name}</Text>
<ActionIcon variant="transparent" size={60}>
{e.icon}
</ActionIcon>
</Flex>
</Paper>
</Center>
</Grid.Col>
))}
</Grid> */}
</Stack>
</Stack>
</>
);
}

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

@@ -22,8 +22,6 @@ import EditDokumenInvestasi from "./edit_dokumen/view";
import LayoutEditDokumenInvestasi from "./edit_dokumen/layout";
import EditBeritaInvestasi from "./edit_berita/view";
import LayoutEditBeritaInvestasi from "./edit_berita/layout";
import DetailSahamTerbeli from "./detail_saham_terbeli/view";
import LayoutDetailSahamTerbeli from "./detail_saham_terbeli/layout";
import DetailPropektus from "./detail_prospektus/view";
import LayoutDetailPropektus from "./detail_prospektus/layout";
import DetailDokumenInvestasi from "./detail_dokumen/view";
@@ -91,8 +89,6 @@ export {
LayoutEditDokumenInvestasi,
EditBeritaInvestasi,
LayoutEditBeritaInvestasi,
DetailSahamTerbeli,
LayoutDetailSahamTerbeli,
DetailPropektus,
LayoutDetailPropektus,
DetailDokumenInvestasi,

4
src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
View File

@@ -1,7 +1,7 @@
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
@@ -20,13 +20,11 @@ export function Portofolio_ComponentButtonSelanjutnya({
dataPortofolio,
file,
dataMedsos,
setIsFile,
}: {
profileId: string;
dataPortofolio: MODEL_PORTOFOLIO_OLD;
file: File;
dataMedsos: any;
setIsFile: any;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);

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

@@ -4,7 +4,6 @@ import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { BIDANG_BISNIS_OLD } from "@/app_modules/model_global/portofolio";
import {
AspectRatio,
@@ -49,7 +48,6 @@ export default function CreatePortofolio({
const [file, setFile] = useState<File | any>(null);
const [img, setImg] = useState<any | null>(null);
const [isFile, setIsFile] = useState(false);
return (
<>
@@ -186,16 +184,8 @@ export default function CreatePortofolio({
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > 2000000) {
ComponentGlobal_NotifikasiPeringatan(
"Maaf, Ukuran file terlalu besar, maximum 2mb",
3000
);
} else {
setImg(buffer);
setFile(files);
setIsFile(false);
}
setImg(buffer);
setFile(files);
} catch (error) {
console.log(error);
}
@@ -307,7 +297,6 @@ export default function CreatePortofolio({
dataMedsos={dataMedsos}
file={file}
profileId={profileId}
setIsFile={setIsFile}
/>
</Stack>

45
src/app_modules/katalog/profile/_component/comp_load_avatar.tsx
View File

@@ -1,9 +1,10 @@
"use client";
import { APIs } from "@/app/lib";
import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { pathAssetImage } from "@/app/lib";
import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { AccentColor } from "@/app_modules/_global/color";
import { Avatar, Image, Skeleton } from "@mantine/core";
import { Avatar, Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { CSSProperties, useState } from "react";
@@ -17,6 +18,7 @@ export function Profile_ComponentAvatarProfile({
}) {
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const [isLoading, setLoading] = useState(false);
const url = APIs.GET({ fileId: fileId, size: "200" });
@@ -70,18 +72,33 @@ export function Profile_ComponentAvatarProfile({
return (
<>
<Avatar
bg={"white"}
style={style}
radius={"50%"}
size={100}
src={url}
onClick={() =>
router.push(routerImagePreview.main({ id: fileId }), {
scroll: false,
})
}
/>
<Center>
<Avatar
bg={"white"}
style={style}
radius={"50%"}
size={100}
src={url}
opacity={isLoading ? 0.5 : 1}
onClick={() => {
router.push(RouterImagePreview.main({ id: fileId }), {
scroll: false,
});
setLoading(true);
}}
/>
{isLoading && (
<Image
alt="Loader"
src={pathAssetImage.new_loader}
height={50}
width={50}
style={{
position: "absolute",
}}
/>
)}
</Center>
</>
);
}

61
src/app_modules/katalog/profile/_component/comp_load_background.tsx
View File

@@ -1,13 +1,13 @@
"use client";
import { APIs } from "@/app/lib";
import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
import { pathAssetImage } from "@/app/lib/path_asset_image";
import { RouterImagePreview } from "@/app/lib";
import { Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
export function Profile_ComponentLoadBackgroundImage({
fileId,
}: {
@@ -15,7 +15,7 @@ export function Profile_ComponentLoadBackgroundImage({
}) {
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const [isLoading, setLoading] = useState(false);
const url = APIs.GET({ fileId: fileId });
useShallowEffect(() => {
@@ -45,7 +45,7 @@ export function Profile_ComponentLoadBackgroundImage({
maw={150}
m={"auto"}
p={"xs"}
src={"/aset/global/no-image.svg"}
src={pathAssetImage.no_image}
/>
</Center>
</>
@@ -53,23 +53,40 @@ export function Profile_ComponentLoadBackgroundImage({
return (
<>
<Image
onClick={() =>
router.push(routerImagePreview.main({ id: fileId }), {
scroll: false,
})
}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
borderRadius: "5px",
}}
radius={5}
height={200}
alt="Image"
src={url}
/>
<Center>
<Image
onClick={() => {
setLoading(true);
router.push(RouterImagePreview.main({ id: fileId }), {
scroll: false,
});
}}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
borderRadius: "5px",
}}
radius={"4px"}
height={200}
alt="Image"
opacity={isLoading ? 0.5 : 1}
src={url}
/>
{isLoading ? (
<Image
alt="Loader"
src={pathAssetImage.new_loader}
height={50}
width={50}
style={{
position: "absolute",
}}
/>
) : (
""
)}
</Center>
</>
);
}

20
src/app_modules/katalog/ui/ui_profile.tsx
View File

@@ -1,6 +1,5 @@
"use client";
import { APIs } from "@/app/lib";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
import {
@@ -70,12 +69,6 @@ export function Profile_UiView({
<Profile_ComponentLoadBackgroundImage
fileId={profile.imageBackgroundId as any}
/>
{/* <Image
radius={"sm"}
height={200}
alt="Background"
src={APIs.GET({ fileId: profile.imageBackgroundId as string })}
/> */}
<Box
sx={{
@@ -95,19 +88,6 @@ export function Profile_UiView({
borderWidth: "2px",
}}
/>
{/* <Avatar
bg={"gray.2"}
sx={{
borderStyle: "solid",
borderColor: AccentColor.darkblue,
borderWidth: "2px",
}}
src={
APIs.GET({fileId: profile.imageId as any})
}
size={100}
radius={"100%"}
/> */}
</Center>
<Stack align="center" c={"white"} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1}>

8
src/app_modules/map/_component/comp_load_image_map.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { APIs, RouterAssetImage } from "@/app/lib";
import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { APIs, pathAssetImage } from "@/app/lib";
import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { Box, Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
@@ -41,7 +41,7 @@ export function ComponentMap_LoadImageMap({
) : isImage ? (
<Image
onClick={() =>
router.push(routerImagePreview.main({ id: fileId }), {
router.push(RouterImagePreview.main({ id: fileId }), {
scroll: false,
})
}
@@ -74,7 +74,7 @@ export function ComponentMap_LoadImageMap({
alt="Image"
height={100}
width={100}
src={RouterAssetImage.no_image}
src={pathAssetImage.no_image}
/>
</Center>
</Box>

2
src/bin/seeder/forum/master_status.json
View File

@@ -5,6 +5,6 @@
},
{
"id": 2,
"status": "Close"
"status": "Closed"
}
]