Test foto server
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
// import { useState } from "react";
|
||||
// import { Document, Page, pdfjs } from "react-pdf";
|
||||
// import "react-pdf/dist/Page/AnnotationLayer.css";
|
||||
// import "react-pdf/dist/Page/TextLayer.css";
|
||||
// import styles from "./styles.module.css";
|
||||
|
||||
// pdfjs.GlobalWorkerOptions.workerSrc = new URL(
|
||||
// "pdfjs-dist/build/pdf.worker.min.mjs",
|
||||
// import.meta.url
|
||||
// ).toString();
|
||||
|
||||
export function ComponentInvestasi_FrameFileView({
|
||||
fileId,
|
||||
path,
|
||||
}: {
|
||||
fileId: string;
|
||||
path: string;
|
||||
}) {
|
||||
return (
|
||||
<Stack>
|
||||
{/* <MyFile file={path + fileId} /> */}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
// function MyFile({ file }: { file: any }) {
|
||||
// const [numPages, setNumPages] = useState<number | null>(null);
|
||||
// const [pageNumber, setPageNumber] = useState(1);
|
||||
|
||||
// function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
|
||||
// setNumPages(numPages);
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <Document
|
||||
// className={styles.file_view}
|
||||
// file={file}
|
||||
// onLoadSuccess={onDocumentLoadSuccess}
|
||||
|
||||
// >
|
||||
// <Page className={styles.page} pageNumber={pageNumber} />
|
||||
// </Document>
|
||||
// {/* <p>
|
||||
// Page {pageNumber} of {numPages}
|
||||
// </p> */}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
@@ -0,0 +1,17 @@
|
||||
.file_view {
|
||||
width: 100%;
|
||||
/* padding: 30px; */
|
||||
background-color: aqua;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 92vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page {
|
||||
/* display: grid;
|
||||
place-items: center; Centers both horizontally and vertically */
|
||||
height: 5vh;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
7
src/app_modules/investasi/_component/index.ts
Normal file
7
src/app_modules/investasi/_component/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { ComponentInvestasi_FrameFileView } from "./file_view/frame_file_view";
|
||||
import { ComponentInvestasi_BoxMetodePembayaran } from "./transaksi/box_metode_pembayaran";
|
||||
import { ComponentInvestasi_BoxPembelian } from "./transaksi/box_pembelian";
|
||||
|
||||
export { ComponentInvestasi_BoxPembelian };
|
||||
export { ComponentInvestasi_BoxMetodePembayaran };
|
||||
export { ComponentInvestasi_FrameFileView };
|
||||
@@ -0,0 +1,78 @@
|
||||
import {
|
||||
AccentColor,
|
||||
MainColor,
|
||||
} from "@/app_modules/_global/color/color_pallet";
|
||||
import { Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
|
||||
export function ComponentInvestasi_BoxMetodePembayaran({
|
||||
listBank,
|
||||
}: {
|
||||
listBank: any[];
|
||||
}) {
|
||||
const [bank, setBank] = useState(listBank);
|
||||
const [pilihBank, setPilihBank] = useState("");
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
async function onProses() {
|
||||
console.log(pilihBank);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Radio.Group
|
||||
value={pilihBank}
|
||||
onChange={setPilihBank}
|
||||
withAsterisk
|
||||
color="yellow"
|
||||
>
|
||||
{bank.map((e, i) => (
|
||||
<Paper
|
||||
key={e.id}
|
||||
style={{
|
||||
backgroundColor: AccentColor.blue,
|
||||
border: `2px solid ${AccentColor.darkblue}`,
|
||||
padding: "15px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<Radio
|
||||
styles={{
|
||||
radio: {
|
||||
color: "yellow",
|
||||
},
|
||||
}}
|
||||
value={e.id}
|
||||
label={
|
||||
<Title order={6} color="white">
|
||||
{e.name}
|
||||
</Title>
|
||||
}
|
||||
/>
|
||||
</Paper>
|
||||
))}
|
||||
</Radio.Group>
|
||||
|
||||
<Button
|
||||
disabled={pilihBank === "" ? true : false}
|
||||
style={{ transition: "0.5s" }}
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onProses();
|
||||
}}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Pilih
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
136
src/app_modules/investasi/_component/transaksi/box_pembelian.tsx
Normal file
136
src/app_modules/investasi/_component/transaksi/box_pembelian.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import {
|
||||
AccentColor,
|
||||
MainColor,
|
||||
} from "@/app_modules/_global/color/color_pallet";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Divider,
|
||||
Group,
|
||||
NumberInput,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useFocusTrap, useLocalStorage } from "@mantine/hooks";
|
||||
import { useAtom } from "jotai";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { MODEL_INVESTASI } from "../../_lib/interface";
|
||||
import { gs_investas_menu } from "../../g_state";
|
||||
import { NEW_RouterInvestasi } from "../../../../app/lib/router_hipmi/router_investasi";
|
||||
|
||||
export function ComponentInvestasi_BoxPembelian({
|
||||
dataInvestasi,
|
||||
}: {
|
||||
dataInvestasi: MODEL_INVESTASI;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const focusTrapRef = useFocusTrap();
|
||||
const [data, setData] = useState(dataInvestasi);
|
||||
const [maxPembelian, setMaxPembelian] = useState(Number(data.sisaLembar));
|
||||
const [total, setTotal] = useLocalStorage({
|
||||
key: "total_investasi",
|
||||
defaultValue: 0,
|
||||
});
|
||||
const [jumlah, setJumlah] = useLocalStorage({
|
||||
key: "jumlah_investasi",
|
||||
defaultValue: 0,
|
||||
});
|
||||
const [hotmenu, setHotmenu] = useAtom(gs_investas_menu);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={{
|
||||
padding: "15px",
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
{/* Sisa Lembar Saham */}
|
||||
<Group position="apart" mb={"md"}>
|
||||
<Text>Sisa Lembar Saham</Text>
|
||||
<Text fz={23}>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumFractionDigits: 10,
|
||||
}).format(+data.sisaLembar)}{" "}
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
{/* Harga perlembar saham */}
|
||||
<Group position="apart" mb={"md"}>
|
||||
<Text>Harga Perlembar</Text>
|
||||
<Text fz={23}>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumFractionDigits: 10,
|
||||
}).format(+data.hargaLembar)}{" "}
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
{/* Lembar saham */}
|
||||
<Group position="apart" mb={"md"}>
|
||||
<Box>
|
||||
<Text>Jumlah Pembelian</Text>
|
||||
<Text c={"blue"} fs={"italic"} fz={10}>
|
||||
minimal pembelian 10 lembar
|
||||
</Text>
|
||||
</Box>
|
||||
<NumberInput
|
||||
type="number"
|
||||
ref={focusTrapRef}
|
||||
w={100}
|
||||
max={maxPembelian}
|
||||
min={0}
|
||||
value={jumlah}
|
||||
onChange={(val: any) => {
|
||||
setTotal(val * +data.hargaLembar);
|
||||
setJumlah(val);
|
||||
// console.log(val);
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Divider my={"lg"} />
|
||||
|
||||
<Group position="apart" mb={"md"}>
|
||||
<Box>
|
||||
<Text>Total Harga</Text>
|
||||
</Box>
|
||||
<Text fz={25}>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumFractionDigits: 10,
|
||||
}).format(total)}
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Center>
|
||||
<Button
|
||||
disabled={jumlah < 10}
|
||||
w={350}
|
||||
radius={50}
|
||||
onClick={() => {
|
||||
// onProses();
|
||||
router.push(NEW_RouterInvestasi.metode_pembayaran + data.id, {
|
||||
scroll: false,
|
||||
});
|
||||
}}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
>
|
||||
Beli
|
||||
</Button>
|
||||
</Center>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user