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

Merge pull request #363 from bipproduction/bagas/6-mar-25

Browse Source 
Fix tamplate ui
This commit is contained in:
Bagasbanuna02
2025-03-06 15:09:47 +08:00
committed by GitHub
parent 7ef6d950ac 6a733d89cc
commit 74355629e2
37 changed files with 1809 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -2,6 +2,8 @@
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
## [1.2.73](https://github.com/bipproduction/hipmi/compare/v1.2.72...v1.2.73) (2025-03-06)
## [1.2.72](https://github.com/bipproduction/hipmi/compare/v1.2.71...v1.2.72) (2025-03-05)
## [1.2.71](https://github.com/bipproduction/hipmi/compare/v1.2.70...v1.2.71) (2025-03-04)

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "hipmi",
"version": "1.2.72",
"version": "1.2.73",
"private": true,
"prisma": {
"seed": "bun prisma/seed.ts"

76
src/app/api/investasi/[id]/investor/route.ts Normal file
View File

@@ -0,0 +1,76 @@
import backendLogger from "@/util/backendLogger";
import { NextResponse } from "next/server";
import prisma from "@/lib/prisma";
import _ from "lodash";
export { GET };
async function GET(request: Request, { params }: { params: { id: string } }) {
try {
let fixData;
const { id } = params;
const { searchParams } = new URL(request.url);
const page = searchParams.get("page");
const takeData = 10
const skipData = Number(page) * takeData - takeData;
if (!page) {
fixData = await prisma.investasi_Invoice.findMany({
where: {
investasiId: id,
StatusInvoice: {
name: "Berhasil",
},
},
include: {
Author: {
select: {
Profile: true,
},
},
},
});
} else {
const Alldata = await prisma.investasi_Invoice.findMany({
skip: skipData,
take: takeData,
where: {
investasiId: id,
StatusInvoice: {
name: "Berhasil",
},
},
include: {
Author: {
select: {
Profile: true,
},
},
},
});
fixData = Alldata.map((e, i) => ({
..._.omit(e, ["Author"]),
Profile: e.Author?.Profile,
}));
}
return NextResponse.json({
success: true,
message: "Success get data investor",
data: fixData,
});
} catch (error) {
backendLogger.error("Error get data investor >>", error);
return NextResponse.json(
{
success: false,
message: "Error get data investor",
reason: (error as Error).message,
},
{
status: 500,
}
);
}
}

6
src/app/api/investasi/[id]/route.ts
View File

@@ -19,7 +19,11 @@ export async function GET(
Profile: true,
},
},
Investasi_Invoice: true,
Investasi_Invoice: {
where: {
statusInvoiceId: "1"
}
},
MasterStatusInvestasi: true,
BeritaInvestasi: true,
DokumenInvestasi: true,

60
src/app/api/investasi/saham/[id]/route.ts Normal file
View File

@@ -0,0 +1,60 @@
import { NextResponse } from "next/server";
export { GET };
async function GET(request: Request, { params }: { params: { id: string } }) {
try {
const { id } = params;
const data = await prisma.investasi_Invoice.findFirst({
where: {
id: id,
},
include: {
MasterBank: true,
StatusInvoice: {
where: {
name: "Berhasil",
}
},
Investasi: {
include: {
MasterPembagianDeviden: true,
MasterPencarianInvestor: true,
MasterPeriodeDeviden: true,
ProspektusInvestasi: true,
Investasi_Invoice: {
where: {
statusInvoiceId: "1",
},
},
},
},
Author: {
include: {
Profile: true,
},
},
},
});
const { ...allData } = data;
const Investor = data?.Investasi?.Investasi_Invoice;
const result = { ...allData, Investor };
return NextResponse.json({
success: true,
message: "Berhasil mengambil data",
data: result,
});
} catch (error) {
console.log(error);
return NextResponse.json(
{
success: false,
message: "Gagal mengambil data",
reason: (error as Error).message,
},
{ status: 500 }
);
}
}

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

@@ -1,9 +1,11 @@
import { HomeViewNew } from "@/app_modules/home";
import { V2_View_Home } from "@/app_modules/home/v2_home_view";
export default async function PageHome() {
return (
<>
<HomeViewNew />
{/* <HomeViewNew /> */}
<V2_View_Home />
</>
);
}

4
src/app/dev/investasi/detail/saham/[id]/page.tsx
View File

@@ -3,11 +3,11 @@ import { Investasi_UiDetailSahamSaya } from "@/app_modules/investasi/_ui";
export default async function Page({ params }: { params: { id: string } }) {
const invoiceId = params.id;
const dataSaham = await investasi_funGetOneInvoiceById({ invoiceId });
// const dataSaham = await investasi_funGetOneInvoiceById({ invoiceId });
return (
<>
<Investasi_UiDetailSahamSaya dataSaham={dataSaham} />
<Investasi_UiDetailSahamSaya />
</>
);
}

4
src/app/dev/investasi/status-transaksi/berhasil/[id]/page.tsx
View File

@@ -4,10 +4,10 @@ import { Investasi_UiTransaksiBerhasil } from "@/app_modules/investasi/_ui";
export default async function Page({params}: {params: {id: string}}) {
const invoiceId = params.id;
const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
// const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
return (
<>
<Investasi_UiTransaksiBerhasil dataTransaksi={dataTransaksi} />
<Investasi_UiTransaksiBerhasil />
</>
);
}

7
src/app/dev/investasi/status-transaksi/gagal/[id]/page.tsx
View File

@@ -4,14 +4,13 @@ import { Investasi_UiTransaksiGagal } from "@/app_modules/investasi/_ui/status_t
export default async function Page({ params }: { params: { id: string } }) {
const invoiceId = params.id;
const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
const nomorAdmin = await funGlobal_getNomorAdmin();
// const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
// const nomorAdmin = await funGlobal_getNomorAdmin();
return (
<>
<Investasi_UiTransaksiGagal
dataTransaksi={dataTransaksi}
nomorAdmin={nomorAdmin as any}
/>
</>
);

7
src/app/emotion.tsx
View File

@@ -1,4 +1,5 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
// import './globals.css'
import { CacheProvider } from "@emotion/react";
import {
@@ -30,9 +31,13 @@ export default function RootStyleRegistry({
return (
<html lang="en" data-theme="light">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>HIPMI</title>
</head>
<body suppressHydrationWarning={true}>
<body suppressHydrationWarning={true} style={{backgroundColor: MainColor.black}}>
<CacheProvider value={cache}>
<MantineProvider withGlobalStyles withNormalizeCSS>
<Notifications position="top-center" containerWidth={300} />

9
src/app/zCoba/home/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { MobileAppLayout } from "./v2_tamplate";
export default async function Page() {
return (
<>
<MobileAppLayout />
</>
);
}

127
src/app/zCoba/home/test_children.tsx Normal file
View File

@@ -0,0 +1,127 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
listMenuHomeBody,
menuHomeJob,
} from "@/app_modules/home/component/list_menu_home";
import {
ActionIcon,
Box,
Group,
Image,
Paper,
SimpleGrid,
Stack,
Text
} from "@mantine/core";
import { IconUserSearch } from "@tabler/icons-react";
export function Test_Children() {
return (
<>
<Box>
<Image
height={140}
fit={"cover"}
alt="logo"
src={"/aset/home/home-hipmi-new.png"}
styles={{
imageWrapper: {
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px 10px 10px 10px",
},
image: {
borderRadius: "8px 8px 8px 8px",
},
}}
/>
{Array.from(new Array(2)).map((e, i) => (
<Stack my={"sm"} key={i}>
<SimpleGrid cols={2} spacing="md">
{listMenuHomeBody.map((e, i) => (
<Paper
key={e.id}
h={150}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
onClick={() => {}}
>
<Stack align="center" justify="center" h={"100%"}>
<ActionIcon
size={50}
variant="transparent"
c={e.link == "" ? "gray.3" : MainColor.white}
>
{e.icon}
</ActionIcon>
<Text
c={e.link == "" ? "gray.3" : MainColor.white}
fz={"xs"}
>
{e.name}
</Text>
</Stack>
</Paper>
))}
</SimpleGrid>
{/* Job View */}
<Paper
p={"md"}
w={"100%"}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
>
<Stack onClick={() => {}}>
<Group>
<ActionIcon
variant="transparent"
size={40}
c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
>
{menuHomeJob.icon}
</ActionIcon>
<Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
{menuHomeJob.name}
</Text>
</Group>
<SimpleGrid cols={2} spacing="md">
{Array.from({ length: 2 }).map((e, i) => (
<Stack key={i}>
<Group spacing={"xs"}>
<Stack h={"100%"} align="center" justify="flex-start">
<IconUserSearch size={20} color={MainColor.white} />
</Stack>
<Stack spacing={0} w={"60%"}>
<Text
lineClamp={1}
fz={"sm"}
c={MainColor.yellow}
fw={"bold"}
>
nama {i}
</Text>
<Text fz={"sm"} c={MainColor.white} lineClamp={2}>
judulnya {i}
</Text>
</Stack>
</Group>
</Stack>
))}
</SimpleGrid>
</Stack>
</Paper>
</Stack>
))}
</Box>
</>
);
}

75
src/app/zCoba/home/test_footer.tsx Normal file
View File

@@ -0,0 +1,75 @@
"use client"
import { MainColor } from "@/app_modules/_global/color";
import { listMenuHomeFooter } from "@/app_modules/home";
import {
ActionIcon,
Box,
Center,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import { IconUserCircle } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
export default function Test_FooterHome() {
const router = useRouter();
return (
<Box
style={{
zIndex: 99,
borderRadius: "20px 20px 0px 0px",
}}
w={"100%"}
bottom={0}
h={"9vh"}
>
<SimpleGrid cols={listMenuHomeFooter.length + 1}>
{listMenuHomeFooter.map((e) => (
<Center h={"9vh"} key={e.id}>
<Stack
align="center"
spacing={0}
onClick={() => {
console.log("test")
}}
>
<ActionIcon
radius={"xl"}
c={e.link === "" ? "gray" : MainColor.white}
variant="transparent"
>
{e.icon}
</ActionIcon>
<Text
lineClamp={1}
c={e.link === "" ? "gray" : MainColor.white}
fz={12}
>
{e.name}
</Text>
</Stack>
</Center>
))}
<Center h={"9vh"}>
<Stack align="center" spacing={2}>
<ActionIcon
variant={"transparent"}
onClick={() =>
console.log("test")
}
>
<IconUserCircle color="white" />
</ActionIcon>
<Text fz={10} c={MainColor.white}>
Profile
</Text>
</Stack>
</Center>
</SimpleGrid>
</Box>
);
}

130
src/app/zCoba/home/test_header.tsx Normal file
View File

@@ -0,0 +1,130 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
Header,
Group,
ActionIcon,
Text,
Title,
Box,
Loader,
} from "@mantine/core";
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
export default function Test_LayoutHeaderTamplate({
title,
posotion,
// left button
hideButtonLeft,
iconLeft,
routerLeft,
customButtonLeft,
// right button
iconRight,
routerRight,
customButtonRight,
backgroundColor,
}: {
title: string;
posotion?: any;
// left button
hideButtonLeft?: boolean;
iconLeft?: any;
routerLeft?: any;
customButtonLeft?: React.ReactNode;
// right button
iconRight?: any;
routerRight?: any;
customButtonRight?: React.ReactNode;
backgroundColor?: string;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [isRightLoading, setRightLoading] = useState(false);
return (
<>
<Box
h={"8vh"}
// w={"100%"}
// pos={"sticky"}
// top={0}
// style={{
// zIndex: 10,
// }}
sx={{
borderStyle: "none",
}}
bg={backgroundColor ? backgroundColor : MainColor.darkblue}
>
<Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
{hideButtonLeft ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : customButtonLeft ? (
customButtonLeft
) : (
<ActionIcon
c={MainColor.white}
variant="transparent"
radius={"xl"}
onClick={() => {
setIsLoading(true);
routerLeft === undefined
? router.back()
: router.push(routerLeft, { scroll: false });
}}
>
{/* PAKE LOADING SAAT KLIK BACK */}
{/* {isLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : iconLeft ? (
iconLeft
) : (
<IconChevronLeft />
)} */}
{/* GA PAKE LOADING SAAT KLIK BACK */}
{iconLeft ? (
iconLeft
) : (
<IconChevronLeft />
)}
</ActionIcon>
)}
<Title order={5} c={MainColor.yellow}>
{title}
</Title>
{customButtonRight ? (
customButtonRight
) : iconRight === undefined ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : routerRight === undefined ? (
<Box>{iconRight}</Box>
) : (
<ActionIcon
c={"white"}
variant="transparent"
onClick={() => {
setRightLoading(true);
router.push(routerRight);
}}
>
{isRightLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
iconRight
)}
</ActionIcon>
)}
</Group>
</Box>
</>
);
}

127
src/app/zCoba/home/test_tamplate.tsx Normal file
View File

@@ -0,0 +1,127 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
BackgroundImage,
Box,
Container,
rem,
ScrollArea,
} from "@mantine/core";
export function Test_Tamplate({
children,
header,
footer,
}: {
children: React.ReactNode;
header: React.ReactNode;
footer?: React.ReactNode;
}) {
return (
<>
<Box
w={"100%"}
h={"100%"}
style={{
backgroundColor: MainColor.black,
}}
>
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.green}>
{/* <BackgroundImage
src={"/aset/global/main_background.png"}
h={"100vh"}
// style={{ position: "relative" }}
> */}
<TestHeader header={header} />
<TestChildren footer={footer}>{children}</TestChildren>
<TestFooter footer={footer} />
{/* </BackgroundImage> */}
</Container>
</Box>
</>
);
}
export function TestHeader({ header }: { header: React.ReactNode }) {
return (
<>
<Box
h={"8vh"}
style={{
zIndex: 10,
alignContent: "center",
}}
w={"100%"}
pos={"sticky"}
top={0}
>
{header}
</Box>
</>
);
}
export function TestChildren({
children,
footer,
}: {
children: React.ReactNode;
footer: React.ReactNode;
}) {
return (
<>
<Box
style={{ zIndex: 0 }}
px={"md"}
h={footer ? "82vh" : "92vh"}
>
{children}
</Box>
</>
);
}
function TestFooter({ footer }: { footer: React.ReactNode }) {
return (
<>
{footer ? (
<Box
// w dihilangkan kalau relative
w={"100%"}
style={{
// position: "relative",
position: "fixed",
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}`,
// maxWidth dihilangkan kalau relative
maxWidth: rem(500),
}}
bg={AccentColor.darkblue}
>
<Box
h={"100%"}
// maw dihilangkan kalau relative
maw={rem(500)}
style={{
borderRadius: "20px 20px 0px 0px",
width: "100%",
}}
// pos={"absolute"}
>
{footer}
</Box>
</Box>
) : (
""
)}
</>
);
}

26
src/app/zCoba/home/v2_children.tsx Normal file
View File

@@ -0,0 +1,26 @@
"use client";
import { Box, ScrollArea } from "@mantine/core";
export function V2_Children({
children,
height,
}: {
children: React.ReactNode;
height?: number;
}) {
return (
<>
<Box
style={{ zIndex: 0 }}
px={"md"}
h={height ? "82vh" : "92vh"}
pos={"static"}
>
{children}
{/* <ScrollArea h={"100%"} px={"md"} bg={"cyan"}>
</ScrollArea> */}
</Box>
</>
);
}

42
src/app/zCoba/home/v2_header.tsx Normal file
View File

@@ -0,0 +1,42 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import { ActionIcon, Box, Group, Title } from "@mantine/core";
import { IconBell, IconChevronLeft } from "@tabler/icons-react";
export function V2_Header() {
return (
<>
<Box
h={"8vh"}
style={{
zIndex: 10,
alignContent: "center",
}}
w={"100%"}
pos={"sticky"}
top={0}
bg={MainColor.darkblue}
>
<Group h={"100%"} position={"apart"} px={"md"}>
<ActionIcon
c={MainColor.white}
variant="transparent"
radius={"xl"}
onClick={() => {}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={MainColor.yellow}>
Test Tamplate
</Title>
<ActionIcon c={"white"} variant="transparent" onClick={() => {}}>
<IconBell />
</ActionIcon>
</Group>
</Box>
</>
);
}

127
src/app/zCoba/home/v2_home_view.tsx Normal file
View File

@@ -0,0 +1,127 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
listMenuHomeBody,
menuHomeJob,
} from "@/app_modules/home/component/list_menu_home";
import {
Box,
Stack,
SimpleGrid,
Paper,
ActionIcon,
Group,
Image,
Text,
} from "@mantine/core";
import { IconUserSearch } from "@tabler/icons-react";
export function V2_HomeView() {
return (
<>
<Box>
<Image
height={140}
fit={"cover"}
alt="logo"
src={"/aset/home/home-hipmi-new.png"}
styles={{
imageWrapper: {
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px 10px 10px 10px",
},
image: {
borderRadius: "8px 8px 8px 8px",
},
}}
/>
{Array.from(new Array(2)).map((e, i) => (
<Stack my={"sm"} key={i}>
<SimpleGrid cols={2} spacing="md">
{listMenuHomeBody.map((e, i) => (
<Paper
key={e.id}
h={150}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
onClick={() => {}}
>
<Stack align="center" justify="center" h={"100%"}>
<ActionIcon
size={50}
variant="transparent"
c={e.link == "" ? "gray.3" : MainColor.white}
>
{e.icon}
</ActionIcon>
<Text
c={e.link == "" ? "gray.3" : MainColor.white}
fz={"xs"}
>
{e.name}
</Text>
</Stack>
</Paper>
))}
</SimpleGrid>
{/* Job View */}
<Paper
p={"md"}
w={"100%"}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
>
<Stack onClick={() => {}}>
<Group>
<ActionIcon
variant="transparent"
size={40}
c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
>
{menuHomeJob.icon}
</ActionIcon>
<Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
{menuHomeJob.name}
</Text>
</Group>
<SimpleGrid cols={2} spacing="md">
{Array.from({ length: 2 }).map((e, i) => (
<Stack key={i}>
<Group spacing={"xs"}>
<Stack h={"100%"} align="center" justify="flex-start">
<IconUserSearch size={20} color={MainColor.white} />
</Stack>
<Stack spacing={0} w={"60%"}>
<Text
lineClamp={1}
fz={"sm"}
c={MainColor.yellow}
fw={"bold"}
>
nama {i}
</Text>
<Text fz={"sm"} c={MainColor.white} lineClamp={2}>
judulnya {i}
</Text>
</Stack>
</Group>
</Stack>
))}
</SimpleGrid>
</Stack>
</Paper>
</Stack>
))}
</Box>
</>
);
}

152
src/app/zCoba/home/v2_tamplate.tsx Normal file
View File

@@ -0,0 +1,152 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
ActionIcon,
Box,
Group,
Image,
Paper,
Text,
Title,
} from "@mantine/core";
import { IconBell, IconChevronLeft, IconUserCircle } from "@tabler/icons-react";
export function MobileAppLayout() {
return (
<Box
style={{
width: "100%",
height: "100vh",
overflow: "hidden",
backgroundColor: MainColor.black,
position: "relative",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
border: "1px solid #ccc", // Garis tepi untuk visualisasi
}}
>
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1, // Pastikan background di belakang konten
backgroundImage: "url(/aset/global/main_background.png)",
backgroundSize: "cover",
backgroundPosition: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto",
}}
>
{/* Header */}
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
height: "8vh",
zIndex: 100,
backgroundColor: MainColor.darkblue,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "0 16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<ActionIcon
c={MainColor.white}
variant="transparent"
radius="xl"
onClick={() => {}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={MainColor.yellow}>
Test Template
</Title>
<ActionIcon c="white" variant="transparent" onClick={() => {}}>
<IconBell />
</ActionIcon>
</Box>
{/* Konten Utama (Bisa Di-scroll) */}
<Box
style={{
position: "fixed",
top: "8vh", // Mulai di bawah header
bottom: "10vh", // Berakhir di atas footer
left: 0,
right: 0,
overflowY: "auto", // Bisa di-scroll
padding: "16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
{/* Logo */}
<Image
src={"/aset/home/home-hipmi-new.png"}
alt="logo"
height={140}
fit="cover"
style={{
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
marginBottom: "16px",
}}
/>
{/* Dummy Content untuk Testing Scroll */}
{Array.from({ length: 20 }).map((_, i) => (
<Paper
key={i}
p="md"
bg={MainColor.darkblue}
style={{
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
marginBottom: "8px",
}}
>
<Text c={MainColor.white}>Item {i + 1}</Text>
</Paper>
))}
</Box>
{/* Footer */}
<Box
style={{
position: "fixed",
bottom: 0,
left: 0,
right: 0,
height: "10vh",
zIndex: 100,
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<Group spacing="xl">
<ActionIcon variant="transparent" onClick={() => {}}>
<IconUserCircle color="white" />
</ActionIcon>
<Text fz={10} c={MainColor.white}>
Profile
</Text>
</Group>
</Box>
</Box>
</Box>
);
}

23
src/app_modules/_global/ui/new_ui_content.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Box } from "@mantine/core";
export function NewUI_Content({ children }: { children: React.ReactNode }) {
return (
<>
<Box
style={{
position: "fixed",
top: "8vh", // Mulai di bawah header
bottom: "10vh", // Berakhir di atas footer
left: 0,
right: 0,
overflowY: "auto", // Bisa di-scroll
padding: "16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
{children}
</Box>
</>
);
}

28
src/app_modules/_global/ui/new_ui_footer.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { Box } from "@mantine/core";
import { AccentColor } from "../color";
export function NewUI_Footer({ children }: { children: React.ReactNode }) {
return (
<>
<Box
style={{
position: "fixed",
bottom: 0,
left: 0,
right: 0,
height: "10vh",
zIndex: 100,
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
{children}
</Box>
</>
);
}

123
src/app_modules/_global/ui/new_ui_header.tsx Normal file
View File

@@ -0,0 +1,123 @@
import { ActionIcon, Box, Group, Title, Loader } from "@mantine/core";
import { AccentColor, MainColor } from "../color";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { IconChevronLeft } from "@tabler/icons-react";
export function NewUI_Header({
title,
posotion,
// left button
hideButtonLeft,
iconLeft,
routerLeft,
customButtonLeft,
// right button
iconRight,
routerRight,
customButtonRight,
backgroundColor,
}: {
title: string;
posotion?: any;
// left button
hideButtonLeft?: boolean;
iconLeft?: any;
routerLeft?: any;
customButtonLeft?: React.ReactNode;
// right button
iconRight?: any;
routerRight?: any;
customButtonRight?: React.ReactNode;
backgroundColor?: string;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [isRightLoading, setRightLoading] = useState(false);
return (
<>
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
height: "8vh",
zIndex: 100,
backgroundColor: MainColor.darkblue,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
// padding: "0",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<Group
w={"100%"}
h={"100%"}
position={posotion ? posotion : "apart"}
px={"md"}
>
{hideButtonLeft ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : customButtonLeft ? (
customButtonLeft
) : (
<ActionIcon
c={MainColor.white}
variant="transparent"
radius={"xl"}
onClick={() => {
setIsLoading(true);
routerLeft === undefined
? router.back()
: router.push(routerLeft, { scroll: false });
}}
>
{/* PAKE LOADING SAAT KLIK BACK */}
{/* {isLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : iconLeft ? (
iconLeft
) : (
<IconChevronLeft />
)} */}
{/* GA PAKE LOADING SAAT KLIK BACK */}
{iconLeft ? iconLeft : <IconChevronLeft />}
</ActionIcon>
)}
<Title order={5} c={MainColor.yellow}>
{title}
</Title>
{customButtonRight ? (
customButtonRight
) : iconRight === undefined ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : routerRight === undefined ? (
<Box>{iconRight}</Box>
) : (
<ActionIcon
c={"white"}
variant="transparent"
onClick={() => {
setRightLoading(true);
router.push(routerRight);
}}
>
{isRightLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
iconRight
)}
</ActionIcon>
)}
</Group>
</Box>
</>
);
}

39
src/app_modules/_global/ui/new_ui_tamplate.tsx Normal file
View File

@@ -0,0 +1,39 @@
"use client";
import { BackgroundImage, Box } from "@mantine/core";
import { MainColor } from "../color";
export function NewUI_Tamplate({ children }: { children: React.ReactNode }) {
return (
<Box
style={{
width: "100%",
height: "100vh",
overflow: "hidden",
backgroundColor: MainColor.black,
position: "relative",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
border: "1px solid #ccc", // Garis tepi untuk visualisasi
}}
>
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1, // Pastikan background di belakang konten
backgroundImage: "url(/aset/global/main_background.png)",
backgroundSize: "cover",
backgroundPosition: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto",
}}
>
{children}
</Box>
</Box>
);
}

110
src/app_modules/home/component/new_footer_home.tsx Normal file
View File

@@ -0,0 +1,110 @@
import { APIs } from "@/lib";
import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
import { MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import {
ActionIcon,
Box,
Center,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { Home_ComponentAvatarProfile } from "./comp_avatar_profile";
import { listMenuHomeFooter } from "./list_menu_home";
import { IconUser } from "@tabler/icons-react";
import { IconUserCircle } from "@tabler/icons-react";
export default function NewFooterHome({ dataUser }: { dataUser: any | null }) {
const router = useRouter();
return (
<Box
style={{
zIndex: 99,
borderRadius: "20px 20px 0px 0px",
}}
w={"100%"}
bottom={0}
h={"9vh"}
>
<SimpleGrid cols={listMenuHomeFooter.length + 1}>
{listMenuHomeFooter.map((e) => (
<Center h={"9vh"} key={e.id}>
<Stack
align="center"
spacing={0}
onClick={() => {
if (!dataUser) {
return null;
} else if (dataUser?.profile === undefined) {
router.push(RouterProfile.create, { scroll: false });
} else if (e.link == "") {
ComponentGlobal_NotifikasiPeringatan("Cooming Soon");
} else {
router.push(e.link, { scroll: false });
}
}}
>
<ActionIcon
radius={"xl"}
c={e.link === "" ? "gray" : MainColor.white}
variant="transparent"
>
{e.icon}
</ActionIcon>
<Text
lineClamp={1}
c={e.link === "" ? "gray" : MainColor.white}
fz={12}
>
{e.name}
</Text>
</Stack>
</Center>
))}
<Center h={"9vh"}>
<Stack align="center" spacing={2}>
{!dataUser ? (
<CustomSkeleton height={25} width={25} radius={"xl"} />
) : dataUser?.profile === undefined ? (
<ActionIcon
variant={"transparent"}
onClick={() =>
router.push(RouterProfile.create, { scroll: false })
}
>
<IconUserCircle color="white" />
</ActionIcon>
) : (
<ActionIcon
variant={"transparent"}
onClick={() => {
router.push(
RouterProfile.katalogOLD + `${dataUser?.profile}`,
{
scroll: false,
}
);
}}
>
<Home_ComponentAvatarProfile
url={APIs.GET({
fileId: dataUser?.imageId as string,
size: "50",
})}
/>
</ActionIcon>
)}
<Text fz={10} c={MainColor.white}>
Profile
</Text>
</Stack>
</Center>
</SimpleGrid>
</Box>
);
}

171
src/app_modules/home/v2_home_view.tsx Normal file
View File

@@ -0,0 +1,171 @@
"use client";
import { gs_user_ntf } from "@/lib/global_state";
import global_limit from "@/lib/limit";
import { clientLogger } from "@/util/clientLogger";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import { useState } from "react";
import { NewUI_Header } from "../_global/ui/new_ui_header";
import { NewUI_Tamplate } from "../_global/ui/new_ui_tamplate";
import { gs_notifikasi_kategori_app } from "../notifikasi/lib";
import { apiGetNotifikasiHome, apiGetDataHome } from "./fun/get/api_home";
import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
import { RouterNotifikasi } from "@/lib/router_hipmi/router_notifikasi";
import { RouterUserSearch } from "@/lib/router_hipmi/router_user_search";
import { ActionIcon, Image, Indicator, Text } from "@mantine/core";
import { IconUserSearch, IconBell } from "@tabler/icons-react";
import { AccentColor, MainColor } from "../_global/color";
import { useRouter } from "next/navigation";
import BodyHome from "./component/body_home";
import { NewUI_Footer } from "../_global/ui/new_ui_footer";
import NewFooterHome from "./component/new_footer_home";
import { NewUI_Content } from "../_global/ui/new_ui_content";
export function V2_View_Home() {
const [countNtf, setCountNtf] = useState<number | null>(null);
const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
const [dataUser, setDataUser] = useState<any | null>(null);
const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
const router = useRouter();
useShallowEffect(() => {
if (countNtf != null) {
setCountNtf(countNtf + newUserNtf);
setNewUserNtf(0);
}
}, [newUserNtf]);
useShallowEffect(() => {
hanlderLoadData();
}, []);
async function hanlderLoadData() {
try {
const listLoadData = [
global_limit(() => onLoadNotifikasi()),
global_limit(() => cekUserLogin()),
];
await Promise.all(listLoadData);
} catch (error) {
clientLogger.error("Error handler load data", error);
}
}
async function onLoadNotifikasi() {
try {
const response = await apiGetNotifikasiHome();
if (response && response.success) {
setCountNtf(response.data);
}
} catch (error) {
clientLogger.error("Error load notifikasi", error);
}
}
async function cekUserLogin() {
try {
const response = await apiGetDataHome({
path: "?cat=cek_profile",
});
if (response && response.success) {
setDataUser(response.data);
} else {
setDataUser(null);
}
} catch (error) {
clientLogger.error("Error get data home", error);
setDataUser(null);
}
}
return (
<>
<NewUI_Tamplate>
<NewUI_Header
title="HIPMI"
customButtonLeft={
!dataUser && !countNtf ? (
<ActionIcon radius={"xl"} variant={"transparent"}>
<IconUserSearch color={"gray"} />
</ActionIcon>
) : dataUser?.profile === undefined ? (
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
router.push(RouterProfile.create, { scroll: false });
}}
>
<IconUserSearch color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
router.push(RouterUserSearch.main, { scroll: false });
}}
>
<IconUserSearch color={MainColor.white} />
</ActionIcon>
)
}
customButtonRight={
!dataUser && !countNtf ? (
<ActionIcon radius={"xl"} variant={"transparent"}>
<IconBell color={"gray"} />
</ActionIcon>
) : dataUser?.profile === undefined ? (
<ActionIcon
radius={"xl"}
variant={"transparent"}
onClick={() => {
router.push(RouterProfile.create, { scroll: false });
}}
>
<IconBell color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon
variant="transparent"
disabled={countNtf == null}
onClick={() => {
setCategoryPage("Semua");
router.push(RouterNotifikasi.categoryApp({ name: "semua" }), {
scroll: false,
});
}}
>
{countNtf != null && countNtf > 0 ? (
<Indicator
processing
color={MainColor.yellow}
label={
<Text fz={10} c={MainColor.darkblue}>
{countNtf > 99 ? "99+" : countNtf}
</Text>
}
>
<IconBell color={MainColor.white} />
</Indicator>
) : (
<IconBell color={MainColor.white} />
)}
</ActionIcon>
)
}
/>
<NewUI_Content>
<BodyHome dataUser={dataUser} />
</NewUI_Content>
<NewUI_Footer>
<NewFooterHome dataUser={dataUser} />
</NewUI_Footer>
</NewUI_Tamplate>
</>
);
}

4
src/app_modules/investasi/_component/detail/comp_box_investor.tsx
View File

@@ -22,7 +22,9 @@ export function Investasi_ComponentBoxInvestor({ id }: { id: string }) {
}}
onClick={() => {
setLoading(true);
router.push(NEW_RouterInvestasi.list_investor({id:id}))
router.push(NEW_RouterInvestasi.list_investor({ id: id }), {
scroll: false,
});
}}
>
<Flex direction={"column"} align={"center"} justify={"center"}>

93
src/app_modules/investasi/_lib/api_fetch_new_investasi.ts
View File

@@ -1,4 +1,9 @@
export { apiFetchGetAllInvestasi, apiNewGetOneInvestasiById };
export {
apiFetchGetAllInvestasi,
apiNewGetOneInvestasiById,
apiGetInvestorById,
apiGetOneSahamInvestasiById,
};
const apiFetchGetAllInvestasi = async ({ page }: { page: string }) => {
try {
@@ -43,7 +48,6 @@ const apiNewGetOneInvestasiById = async ({ id }: { id: string }) => {
return null;
}
const response = await fetch(`/api/investasi/${id}`, {
method: "GET",
headers: {
@@ -67,3 +71,88 @@ const apiNewGetOneInvestasiById = async ({ id }: { id: string }) => {
throw error; // Re-throw the error to handle it in the calling function
}
};
const apiGetInvestorById = async ({
id,
page,
}: {
id: string;
page: string;
}) => {
try {
// Fetch token from cookie
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) {
console.error("No token found");
return null;
}
const nextPage = `?page=${page}`;
const response = await fetch(`/api/investasi/${id}/investor${nextPage}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error(
"Failed to get list investor",
response.statusText,
errorData
);
throw new Error(errorData?.message || "Failed to get list investor");
}
// Return the JSON response
return await response.json();
} catch (error) {
console.error("Error get list investor", error);
throw error; // Re-throw the error to handle it in the calling function
}
};
const apiGetOneSahamInvestasiById = async ({
id,
}: {
id: string;
}) => {
try {
// Fetch token from cookie
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) {
console.error("No token found");
return null;
}
const response = await fetch(`/api/investasi/saham/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error(
"Failed to get list investor",
response.statusText,
errorData
);
throw new Error(errorData?.message || "Failed to get list investor");
}
// Return the JSON response
return await response.json();
} catch (error) {
console.error("Error get list investor", error);
throw error; // Re-throw the error to handle it in the calling function
}
};

58
src/app_modules/investasi/_ui/detail/ui_detail_main.tsx
View File

@@ -1,25 +1,22 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import {
UIGlobal_Drawer,
UIGlobal_LayoutHeaderTamplate,
UIGlobal_LayoutTamplate,
} from "@/app_modules/_global/ui";
import {
NEW_RouterInvestasi
} from "@/lib/router_hipmi/router_investasi";
import { ActionIcon } from "@mantine/core";
import { IconCategoryPlus, IconDotsVertical } from "@tabler/icons-react";
import { MODEL_INVESTASI } from "../../_lib/interface";
import { Investasi_ViewDetailPublish } from "../../_view";
import { useShallowEffect } from "@mantine/hooks";
import { IconCategoryPlus, IconDeviceIpadPlus, IconDotsVertical } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import {
NEW_RouterInvestasi,
RouterInvestasi_OLD,
} from "@/lib/router_hipmi/router_investasi";
import { IconDeviceIpadPlus } from "@tabler/icons-react";
import { MainColor } from "@/app_modules/_global/color";
import { useShallowEffect } from "@mantine/hooks";
import { apiNewGetOneInvestasiById } from "../../_lib/api_fetch_new_investasi";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { MODEL_INVESTASI } from "../../_lib/interface";
import { Investasi_ViewDetailPublish } from "../../_view";
export function Investasi_UiDetailMain({
userLoginId,
@@ -31,6 +28,25 @@ export function Investasi_UiDetailMain({
const [openDrawer, setOpenDrawer] = useState(false);
const [data, setData] = useState<MODEL_INVESTASI | null>(null);
useShallowEffect(() => {
handleLoadData();
}, []);
const handleLoadData = async () => {
try {
const response = await apiNewGetOneInvestasiById({ id: param.id });
if (response.success) {
setData(response.data);
} else {
setData(null);
}
} catch (error) {
console.error("Error get investasi", error);
setData(null);
}
};
const listPage = [
{
id: "1",
@@ -46,26 +62,6 @@ export function Investasi_UiDetailMain({
},
];
useShallowEffect(() => {
handleLoadData();
}, []);
const handleLoadData = async () => {
try {
const response = await apiNewGetOneInvestasiById({ id: param.id });
if (response.success) {
console.log(response.data);
setData(response.data);
} else {
setData(null);
}
} catch (error) {
console.error("Error get investasi", error);
setData(null);
}
};
return (
<>
<UIGlobal_LayoutTamplate

4
src/app_modules/investasi/_ui/detail/ui_detail_saham_saya.tsx
View File

@@ -4,13 +4,13 @@ import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_ta
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { Investasi_ViewDetailSahamSaya } from "../../_view";
export function Investasi_UiDetailSahamSaya({ dataSaham }: { dataSaham: any }) {
export function Investasi_UiDetailSahamSaya() {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Saham" />}
>
<Investasi_ViewDetailSahamSaya dataSaham={dataSaham as any} />
<Investasi_ViewDetailSahamSaya />
</UIGlobal_LayoutTamplate>
</>
);

1
src/app_modules/investasi/_ui/detail/ui_list_investor.tsx
View File

@@ -4,7 +4,6 @@ import {
UIGlobal_LayoutHeaderTamplate,
UIGlobal_LayoutTamplate,
} from "@/app_modules/_global/ui";
import { Stack } from "@mantine/core";
import { Investasi_ViewListInvestor } from "../../_view/detail/view_list_investor";
export function Investasi_UiListInvestor() {

16
src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_berhasil.tsx
View File

@@ -6,16 +6,16 @@ import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate
import { ActionIcon, Loader } from "@mantine/core";
import { IconX } from "@tabler/icons-react";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { Investasi_ViewTransaksiBerhasil } from "../../_view";
import { gs_investas_menu } from "../../g_state";
import { useShallowEffect } from "@mantine/hooks";
import { apiGetOneSahamInvestasiById } from "../../_lib/api_fetch_new_investasi";
import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export function Investasi_UiTransaksiBerhasil({
dataTransaksi,
}: {
dataTransaksi: any;
}) {
export function Investasi_UiTransaksiBerhasil() {
const router = useRouter();
const [hotMenu, setHotMenu] = useAtom(gs_investas_menu);
const [isLoading, setLoading] = useState(false);
@@ -40,7 +40,9 @@ export function Investasi_UiTransaksiBerhasil({
/>
}
>
<Investasi_ViewTransaksiBerhasil dataTransaksi={dataTransaksi} />
<Investasi_ViewTransaksiBerhasil />
</UIGlobal_LayoutTamplate>
);
}

10
src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_gagal.tsx
View File

@@ -11,13 +11,7 @@ import { useState } from "react";
import { Investasi_ViewTransaksiGagal } from "../../_view";
import { gs_investas_menu } from "../../g_state";
export function Investasi_UiTransaksiGagal({
dataTransaksi,
nomorAdmin,
}: {
dataTransaksi: any;
nomorAdmin: any
}) {
export function Investasi_UiTransaksiGagal() {
const router = useRouter();
const [hotMenu, setHotMenu] = useAtom(gs_investas_menu);
const [isLoading, setLoading] = useState(false);
@@ -42,7 +36,7 @@ export function Investasi_UiTransaksiGagal({
/>
}
>
<Investasi_ViewTransaksiGagal dataTransaksi={dataTransaksi} nomorAdmin={nomorAdmin} />
<Investasi_ViewTransaksiGagal />
</UIGlobal_LayoutTamplate>
);
}

2
src/app_modules/investasi/_view/detail/portofolio/view_detail_publish.tsx
View File

@@ -40,8 +40,6 @@ export default function Investasi_ViewDetailPublish({
userLoginId: string;
}) {
const router = useRouter();
const [boxId, setBoxId] = useState(0);
const [isLoadingBox, setLoadingBox] = useState(false);
const [isLoadingButton, setLoadingButton] = useState(false);
const [total, setTotal] = useLocalStorage({
key: "total_investasi",

43
src/app_modules/investasi/_view/detail/view_detail_saham_saya.tsx
View File

@@ -1,25 +1,50 @@
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import {
Investasi_ComponentBoxDetailData,
Investasi_ComponentBoxHargaDanLembarSaham,
Investasi_ComponentBoxProgress,
} from "../../_component";
import {
apiGetOneSahamInvestasiById
} from "../../_lib/api_fetch_new_investasi";
import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
export function Investasi_ViewDetailSahamSaya({
dataSaham,
}: {
dataSaham: MODEL_INVOICE_INVESTASI;
}) {
const [data, setData] = useState(dataSaham);
export function Investasi_ViewDetailSahamSaya() {
const param = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_INVOICE_INVESTASI | null>(null);
useShallowEffect(() => {
handleLoadData();
}, []);
const handleLoadData = async () => {
try {
const response = await apiGetOneSahamInvestasiById({ id: param.id });
if (response.success) {
setData(response.data);
} else {
setData(null);
}
} catch (error) {
console.error("Error get investasi", error);
setData(null);
}
};
if (!data) return <CustomSkeleton height={"80vh"} width={"100%"} />;
return (
<>
<Stack mb={"lg"}>
<Investasi_ComponentBoxHargaDanLembarSaham data={data} />
<Investasi_ComponentBoxProgress progress={data.Investasi.progress} />
<Investasi_ComponentBoxDetailData data={data} />
<Investasi_ComponentBoxHargaDanLembarSaham data={data as any} />
<Investasi_ComponentBoxProgress
progress={data?.Investasi?.progress as any}
/>
<Investasi_ComponentBoxDetailData data={data as any} />
</Stack>
</>
);

94
src/app_modules/investasi/_view/detail/view_list_investor.tsx
View File

@@ -1,9 +1,91 @@
"use client"
"use client";
import { Text } from "@mantine/core"
import {
ComponentGlobal_AvatarAndUsername,
ComponentGlobal_CardStyles,
ComponentGlobal_TampilanRupiah,
} from "@/app_modules/_global/component";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Center, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetInvestorById } from "../../_lib/api_fetch_new_investasi";
export function Investasi_ViewListInvestor(){
return<>
<Text>ini list</Text>
export function Investasi_ViewListInvestor() {
const param = useParams<{ id: string }>();
const investasiId = param.id;
const [data, setData] = useState<any | null>(null);
const [activePage, setActivePage] = useState(1);
useShallowEffect(() => {
handleGetListInvestor();
}, []);
const handleGetListInvestor = async () => {
try {
const response = await apiGetInvestorById({
id: investasiId,
page: String(activePage),
});
if (response) {
setData(response.data);
} else {
setData(null);
}
} catch (error) {
console.error("Error get list investor", error);
setData(null);
}
};
if (!data) return <CustomSkeleton height={100} width={"100%"} />;
return (
<>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
<Box>
<ScrollOnly
height="85vh"
renderLoading={() => (
<Center>
<ComponentGlobal_Loader size={25} />
</Center>
)}
data={data}
setData={setData as any}
moreData={async () => {
const nextPage = activePage + 1;
const loadData = await apiGetInvestorById({
id: investasiId,
page: String(nextPage),
});
setActivePage(nextPage);
return loadData.data;
}}
>
{(item) => (
<ComponentGlobal_CardStyles key={item}>
<Stack>
<ComponentGlobal_AvatarAndUsername profile={item.Profile} />
<ComponentGlobal_TampilanRupiah
nominal={item.nominal}
fontSize={"lg"}
/>
</Stack>
</ComponentGlobal_CardStyles>
)}
</ScrollOnly>
</Box>
)}
</>
}
);
}

43
src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx
View File

@@ -1,10 +1,14 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_LoadImage,
ComponentGlobal_TampilanRupiah,
} from "@/app_modules/_global/component";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import {
Box,
Button,
@@ -16,22 +20,39 @@ import {
Text,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconBrandCashapp } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetOneSahamInvestasiById } from "../../_lib/api_fetch_new_investasi";
import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
export function Investasi_ViewTransaksiBerhasil({
dataTransaksi,
}: {
dataTransaksi: any;
}) {
const router = useRouter();
const [data, setData] = useState<MODEL_INVOICE_INVESTASI>(dataTransaksi);
const [isLoading, setLoading] = useState(false);
const [file, setFile] = useState<File | null>(null);
export function Investasi_ViewTransaksiBerhasil() {
const [opened, setOpened] = useState(false);
const param = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_INVOICE_INVESTASI | null>(null);
useShallowEffect(() => {
handleLoadData();
}, []);
const handleLoadData = async () => {
try {
const response = await apiGetOneSahamInvestasiById({ id: param.id });
if (response.success) {
setData(response.data);
} else {
setData(null);
}
} catch (error) {
console.error("Error get investasi", error);
setData(null);
}
};
if (!data) return <CustomSkeleton height={"50vh"} width={"100%"} />;
return (
<>
<Stack spacing={"lg"} py={"md"}>

66
src/app_modules/investasi/_view/status_transaksi/view_transaksi_gagal.tsx
View File

@@ -2,7 +2,10 @@
import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_LoadImage, ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
import {
ComponentGlobal_LoadImage,
ComponentGlobal_TampilanRupiah,
} from "@/app_modules/_global/component";
import {
ActionIcon,
Box,
@@ -18,23 +21,58 @@ import {
Title,
} from "@mantine/core";
import { IconBrandWhatsapp } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
import { Prisma } from "@prisma/client";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { useShallowEffect } from "@mantine/hooks";
import { apiGetOneSahamInvestasiById } from "../../_lib/api_fetch_new_investasi";
import { apiGetAdminContact } from "@/app_modules/_global/lib/api_fetch_master";
export function Investasi_ViewTransaksiGagal({
dataTransaksi,
nomorAdmin,
}: {
dataTransaksi: any;
nomorAdmin: Prisma.NomorAdminCreateInput;
}) {
const router = useRouter();
const [data, setData] = useState<MODEL_INVOICE_INVESTASI>(dataTransaksi);
const [isLoading, setLoading] = useState(false);
const [file, setFile] = useState<File | null>(null);
export function Investasi_ViewTransaksiGagal() {
const [opened, setOpened] = useState(false);
const router = useRouter();
const param = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_INVOICE_INVESTASI | null>(null);
const [nomorAdmin, setNomorAdmin] =
useState<Prisma.NomorAdminCreateInput | null>(null);
useShallowEffect(() => {
handleLoadData();
handleLoadNomorAdmin();
}, []);
const handleLoadData = async () => {
try {
const response = await apiGetOneSahamInvestasiById({ id: param.id });
if (response.success) {
setData(response.data);
} else {
setData(null);
}
} catch (error) {
console.error("Error get investasi", error);
setData(null);
}
};
const handleLoadNomorAdmin = async () => {
try {
const response = await apiGetAdminContact();
if (response.success) {
setNomorAdmin(response.data);
} else {
setNomorAdmin(null);
}
} catch (error) {
console.error("Error get nomor admin", error);
}
};
if (!data || !nomorAdmin)
return <CustomSkeleton height={"50vh"} width={"100%"} />;
return (
<>
@@ -58,7 +96,7 @@ export function Investasi_ViewTransaksiGagal({
<Center>
<ActionIcon radius={"100%"} size={70} variant="light" color="white">
<a
href={`whatsapp://wa.me/${nomorAdmin.nomor}?text=Hallo admin ! Saya ada kendala pada transaksi Investasi`}
href={`whatsapp://wa.me/${nomorAdmin?.nomor}?text=Hallo admin ! Saya ada kendala pada transaksi Investasi`}
>
<IconBrandWhatsapp size={50} color="green" />
</a>