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

feat

Browse Source 
Desc:
- Edit investasi
- Portofolio Investasi
- Upload bukti transfer
#No Issue
This commit is contained in:
Bagasbanuna02
2023-10-24 10:59:51 +08:00
parent cdd09e6fbf
commit 55624e8b4e
22 changed files with 823 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app_modules/investasi/create/layout.tsx
View File

@@ -13,7 +13,7 @@ export default function InvestasiCreateLayout({
<>
<AppShell
header={
<HeaderTamplate route="/dev/investasi/main" title="Investasi Baru" />
<HeaderTamplate title="Investasi Baru" />
}
>
{children}

8
src/app_modules/investasi/dummy/data_dummy.json
View File

@@ -11,8 +11,8 @@
"updatedAt": "2023-10-20T03:47:19.610Z",
"authorId": "clntsruqk0002tlrfyc9vzhxx",
"masterPeriodeDevidenId": "Akhir Project",
"masterPembagianDevidenId": "3",
"masterPencarianInvestorId": "60",
"masterPembagianDevidenId": 3,
"masterPencarianInvestorId": 60,
"imagesId": "clny2l8dj0000tlagcpsi9dmz",
"persentase": 40
},
@@ -28,8 +28,8 @@
"updatedAt": "2023-10-20T01:53:52.539Z",
"authorId": "clntxvesu0002tlnbz030gx30",
"masterPeriodeDevidenId": "Selamanya",
"masterPembagianDevidenId": "6",
"masterPencarianInvestorId": "30",
"masterPembagianDevidenId": 6,
"masterPencarianInvestorId": 4,
"imagesId": "clnxyjc070000tlamc5jmsqse",
"persentase": 60
}

13
src/app_modules/investasi/edit/layout.tsx Normal file
View File

@@ -0,0 +1,13 @@
"use client"
import HeaderTamplate from "@/app_modules/component/header_tamplate"
import { AppShell } from "@mantine/core"
import React from "react"
export default function LayoutEditInvestasi({children}: {children: React.ReactNode}){
return<>
<AppShell header={<HeaderTamplate title="Edit Portofolio Investasi"/>}>
{children}
</AppShell>
</>
}

56
src/app_modules/investasi/edit/view.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client";
import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
export default function EditInvestasi({id}:{id:string}) {
const router = useRouter();
const listEdit = [
{
id: 1,
name: "Intro",
route: "/dev/investasi/edit_intro/",
},
{
id: 2,
name: "Prospektus",
route: "",
},
{
id: 3,
name: "Dokumen",
route: "",
},
{
id: 4,
name: "Berita",
route: "",
},
];
return (
<>
{listEdit.map((e) => (
<Paper
key={e.id}
w={"100%"}
h={50}
bg={"gray"}
mb={"md"}
onClick={() => router.push(e.route + `${id}`)}
>
<Grid align="center" justify="center" h={50} px={"sm"}>
<Grid.Col span={10}>
<Text>{e.name}</Text>
</Grid.Col>
<Grid.Col span={2}>
<Center>
<IconChevronRight />
</Center>
</Grid.Col>
</Grid>
</Paper>
))}
</>
);
}

15
src/app_modules/investasi/edit_intro/layout.tsx Normal file
View File

@@ -0,0 +1,15 @@
"use client"
import HeaderTamplate from "@/app_modules/component/header_tamplate"
import { AppShell } from "@mantine/core"
import React from "react"
export default function LayoutEditIntroInvestasi({children}: {children: React.ReactNode}){
return<>
<AppShell
header={<HeaderTamplate title="Edit Intro"/>}
>
{children}
</AppShell>
</>
}

198
src/app_modules/investasi/edit_intro/view.tsx Normal file
View File

@@ -0,0 +1,198 @@
"use client";
import { Paper, Grid, Center, Text, Title, Button, Divider, AspectRatio, Box, FileButton, Group, Select, TextInput, Image } from "@mantine/core";
import { IconCamera, IconChevronRight } from "@tabler/icons-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
export default function EditIntroInvestasi() {
const router = useRouter()
const [edit, setEdit] = useState(true);
// return (
// <>
// {edit ? (
// <Link href={"https://pii.or.id/uploads/dummies.pdf"} target="_blank" style={{textDecorationLine: "none"}}>
// <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
// <Grid
// align="center"
// justify="center"
// h={50}
// px={"sm"}
// onClick={() => ""}
// >
// <Grid.Col span={10}>
// <Text>Nama File.pdf</Text>
// </Grid.Col>
// <Grid.Col span={2}>
// <Center>
// <IconChevronRight />
// </Center>
// </Grid.Col>
// </Grid>
// </Paper>
// </Link>
// ) : (
// <Center>
// <Title order={4}>Tidak ada file</Title>
// </Center>
// )}
// <Divider mt={"lg"}/>
// <Center>
// <Button mt={"md"} compact radius={50}>
// Upload
// </Button>
// </Center>
// </>
// );
const [img, setImg] = useState<any | null>();
const [value, setValue] = useState({
title: "",
targetDana: "",
hargaLembar: "",
totalLembar: "",
roi: "",
pencarianInvestorId: "",
periodeDevidenId: "",
pembagianDevidenId: "",
});
return<>
<Box>
<AspectRatio ratio={16 / 9}>
{img ? (
<Image alt="" src={img} />
) : (
<Image alt="" src={"/aset/no-img.png"} />
)}
</AspectRatio>
<Group position="center" mt={"md"}>
<FileButton
onChange={async (files: any) => {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
// setImg(buffer);
// setFl(files);
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
w={350}
radius={50}
// bg={Warna.biru}
// onClick={() => router.push("/dev/investasi/upload")}
>
<IconCamera />
</Button>
)}
</FileButton>
</Group>
<Center>
<Box mt={"md"} w={350}>
<TextInput
label="Judul Proyek"
onChange={(val) => {
setValue({
...value,
title: val.target.value,
});
}}
/>
<TextInput
label="Dana Dibutuhan"
type="number"
onChange={(val) => {
setValue({
...value,
targetDana: val.target.value,
});
}}
/>
<TextInput
label="Harga Per Lember"
type="number"
onChange={(val) => {
setValue({
...value,
hargaLembar: val.target.value,
});
}}
/>
<TextInput
label="Total Lembar"
type="number"
onChange={(val) => {
setValue({
...value,
totalLembar: val.target.value,
});
}}
/>
<TextInput
label="Rasio Keuntungan / ROI"
type="number"
onChange={(val) => {
setValue({
...value,
roi: val.target.value,
});
}}
/>
<Select
label="Pencarian Investor"
// data={pencarianInvestor.map((e) => ({
// value: e.id,
// label: e.name,
// }))}
data={[]}
onChange={(val) => {
setValue({
...(value as any),
pencarianInvestorId: val,
});
}}
/>
<Select
label="Periode Deviden"
// data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
data={[]}
onChange={(val) => {
setValue({
...(value as any),
periodeDevidenId: val,
});
}}
/>
<Select
label="Pembagian Deviden"
// data={pembagianDeviden.map((e) => ({
// value: e.id,
// label: e.name,
// }))}
data={[]}
onChange={(val) => {
setValue({
...(value as any),
pembagianDevidenId: val,
});
}}
/>
</Box>
</Center>
<Center my={"lg"}>
<Button w={200} radius={50}
// onClick={() => onSubmit() }
>
Update
</Button>
</Center>
</Box>
</>
}

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

@@ -10,6 +10,14 @@ import ProsesInvestasi from "./proses_investasi/view";
import LayoutProsesInvestasi from "./proses_investasi/layout";
import UploadBuktiTransferInvestasi from "./upload_bukti/view";
import LayoutBuktiTransferInvestasi from "./upload_bukti/layout";
import KonfirmasiBuktiInvestasi from "./konfirmasi/view";
import PortofolioInvestasi from "./portofolio/view";
import PortofolioDetailInvestasi from "./porto_detail/view";
import LayoutPortofolioDetailInvestasi from "./porto_detail/layout";
import EditInvestasi from "./edit/view";
import LayoutEditInvestasi from "./edit/layout";
import EditIntroInvestasi from "./edit_intro/view";
import LayoutEditIntroInvestasi from "./edit_intro/layout";
export {
MainInvestasi,
@@ -24,4 +32,12 @@ export {
LayoutProsesInvestasi,
UploadBuktiTransferInvestasi,
LayoutBuktiTransferInvestasi,
KonfirmasiBuktiInvestasi,
PortofolioInvestasi,
PortofolioDetailInvestasi,
LayoutPortofolioDetailInvestasi,
EditInvestasi,
LayoutEditInvestasi,
EditIntroInvestasi,
LayoutEditIntroInvestasi,
};

26
src/app_modules/investasi/konfirmasi/view.tsx Normal file
View File

@@ -0,0 +1,26 @@
"use client";
import { Center, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconCircleCheck } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
export default function KonfirmasiBuktiInvestasi() {
const router = useRouter();
useShallowEffect(() => {
setTimeout(() => router.push("/dev/investasi/main/portofolio"), 2000);
}, []);
return (
<>
<Center h={"100vh"}>
<Stack>
<Text>Bukti Transfer Berhasil Di Upload</Text>
<Center>
<IconCircleCheck size={100} />
</Center>
</Stack>
</Center>
</>
);
}

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

@@ -17,13 +17,16 @@ import {
IconChartPieFilled,
IconPencilPlus,
} from "@tabler/icons-react";
import React from "react";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
export default function LayoutMainInvestasi({
children,
}: {
children: React.ReactNode;
}) {
const router = useRouter();
return (
<>
<AppShell
@@ -38,7 +41,12 @@ export default function LayoutMainInvestasi({
footer={
<Footer height={70} bg={"dark"}>
<Grid align="center" h={60} pt={"xs"}>
<Grid.Col span={6}>
<Grid.Col
span={6}
onClick={() => {
router.push("/dev/investasi/main");
}}
>
<Center>
<Flex direction={"column"} align={"center"} w={"100%"}>
<ActionIcon variant="transparent">
@@ -48,7 +56,12 @@ export default function LayoutMainInvestasi({
</Flex>
</Center>
</Grid.Col>
<Grid.Col span={6}>
<Grid.Col
span={6}
onClick={() => {
router.push("/dev/investasi/main/portofolio");
}}
>
<Center>
<Flex direction={"column"} align={"center"} w={"100%"}>
<ActionIcon variant="transparent">

48
src/app_modules/investasi/main/view.tsx
View File

@@ -20,8 +20,9 @@ import {
Title,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import dataDummy from "../dummy/data_dummy.json"
import moment from "moment"
import dataDummy from "../dummy/data_dummy.json";
import moment from "moment";
import { IconCheck, IconCircleCheck } from "@tabler/icons-react";
export default function MainInvestasi({
listData,
@@ -39,7 +40,12 @@ export default function MainInvestasi({
<>
{/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
{dataDummy.map((e) => (
<Card key={e.id} withBorder mb={"lg"} onClick={() => router.push(`/dev/investasi/detail/${e.id}`)}>
<Card
key={e.id}
withBorder
mb={"lg"}
onClick={() => router.push(`/dev/investasi/detail/${e.id}`)}
>
<CardSection p={"xs"}>
<AspectRatio ratio={16 / 9}>
{e.imagesId ? (
@@ -57,11 +63,7 @@ export default function MainInvestasi({
disabled
labelAlwaysOn
value={e.persentase}
marks={
[
{value: e.persentase, label: e.persentase + `%`}
]
}
marks={[{ value: e.persentase, label: e.persentase + `%` }]}
/>
<Title order={4}>{e.title}</Title>
</Box>
@@ -96,9 +98,33 @@ export default function MainInvestasi({
</CardSection>
<Divider />
<CardSection p={"md"}>
<Group position="right">
<Text>{moment(e.createdAt).fromNow()}</Text>
</Group>
{(() => {
if (
e.masterPencarianInvestorId -
moment(new Date()).diff(new Date(e.createdAt), "days") ===
0
) {
return (
<>
<Group position="right">
<IconCircleCheck/>
<Text>Selesai</Text>
</Group>
</>
);
} else {
return<>
<Group position="right" spacing={"xs"}>
<Text>Sisa waktu:</Text>
<Text>
{e.masterPencarianInvestorId -
moment(new Date()).diff(new Date(e.createdAt), "days")}
</Text>
<Text>Hari</Text>
</Group>
</>
}
})()}
</CardSection>
</Card>
))}

34
src/app_modules/investasi/porto_detail/layout.tsx Normal file
View File

@@ -0,0 +1,34 @@
"use client";
import HeaderTamplate from "@/app_modules/component/header_tamplate";
import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
import { IconArrowLeft, IconEdit } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import router from "next/router";
import { title } from "process";
import React from "react";
export default function LayoutPortofolioDetailInvestasi({
children,
id,
}: {
children: React.ReactNode;
id: string;
}) {
const router = useRouter();
return (
<>
<AppShell
header={
<HeaderTamplate
title="Detail Porto"
icon={<IconEdit />}
route2={`/dev/investasi/edit/${id}`}
/>
}
>
{children}
</AppShell>
</>
);
}

136
src/app_modules/investasi/porto_detail/view.tsx Normal file
View File

@@ -0,0 +1,136 @@
"use client";
import {
ActionIcon,
AspectRatio,
Avatar,
Box,
Flex,
Grid,
Group,
Image,
Paper,
Slider,
Stack,
Text,
Title,
} from "@mantine/core";
import {
IconBookDownload,
IconFileDescription,
IconSpeakerphone,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
export default function PortofolioDetailInvestasi() {
const router = useRouter();
const listBox = [
{
id: 1,
name: "Prospektus",
icon: <IconBookDownload size={70} />,
route: "",
},
{
id: 2,
name: "Dokumen",
icon: <IconFileDescription size={70} />,
route: "",
},
{
id: 3,
name: "Berita",
icon: <IconSpeakerphone size={70} />,
route: "",
},
];
return (
<>
<Group position="apart" mb={"md"}>
<Flex align={"center"} gap={"xs"}>
<Avatar src={"/aset/avatar.png"} />
<Text>Username</Text>
</Flex>
<Text>Sisa waktu : 20 Hari</Text>
</Group>
<Paper withBorder mb={"md"}>
<AspectRatio ratio={16 / 9}>
<Image alt="" src={"/aset/no-img.png"} />
</AspectRatio>
</Paper>
{/* Title dan Persentase */}
<Box mb={"md"}>
<Title order={4} mb={"xs"}>
Judul Proyek
</Title>
<Slider
disabled
size={10}
value={60}
marks={[{ value: 60, label: "60%" }]}
/>
</Box>
{/* Rincian Data */}
<Grid p={"md"} mb={"md"}>
<Grid.Col span={6}>
<Stack>
<Box>
<Text>Terkumpul</Text>
<Text>Rp. </Text>
</Box>
<Box>
<Text>Dana Dibutuhkan</Text>
<Text>Rp. </Text>
</Box>
<Box>
<Text>Harga Per Lembar</Text>
<Text>Rp. </Text>
</Box>
<Box>
<Text>Jadwal Pembagian</Text>
<Text>3 Bulan </Text>
</Box>
</Stack>
</Grid.Col>
<Grid.Col span={6}>
<Stack>
<Box>
<Text>Investor</Text>
<Text>4657</Text>
</Box>
<Box>
<Text>ROI</Text>
<Text>%</Text>
</Box>
<Box>
<Text>Total Lembar</Text>
<Text>0</Text>
</Box>
<Box>
<Text>Pembagian Deviden</Text>
<Text>Selamanya</Text>
</Box>
</Stack>
</Grid.Col>
</Grid>
{/* List Box */}
<Grid mb={"md"}>
{listBox.map((e) => (
<Grid.Col span={"auto"} key={e.id}>
<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>
</Grid.Col>
))}
</Grid>
</>
);
}

105
src/app_modules/investasi/portofolio/view.tsx Normal file
View File

@@ -0,0 +1,105 @@
"use client"
import { AspectRatio, Box, Card, CardSection, Divider, Grid, Group, Image, Slider, Stack, Text, Title } from "@mantine/core"
import dataDummy from "../dummy/data_dummy.json"
import moment from "moment"
import { useRouter } from "next/navigation"
import { IconCircleCheck } from "@tabler/icons-react"
export default function PortofolioInvestasi() {
const router = useRouter()
return<>
{dataDummy.map((e) => (
<Card key={e.id} withBorder mb={"lg"} onClick={() => router.push(`/dev/investasi/porto_detail/${e.id}`)}>
<CardSection p={"xs"}>
<AspectRatio ratio={16 / 9}>
{/* {e.imagesId ? (
<Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
) : (
<Image alt="" src={"/aset/no-img.png"} />
)} */}
<Image alt="" src={"/aset/no-img.png"} />
</AspectRatio>
</CardSection>
<CardSection p={"lg"}>
<Box mt={"md"}>
<Slider
size={10}
disabled
labelAlwaysOn
value={e.persentase}
marks={
[
{value: e.persentase, label: e.persentase + `%`}
]
}
/>
<Title order={4}>{e.title}</Title>
</Box>
<Box mt={"md"}>
<Grid>
<Grid.Col span={6}>
<Stack>
<Box>
<Text>Dana Dibutuhkan</Text>
<Text>Rp. {e.targetDana}</Text>
</Box>
<Box>
<Text>Harga Per Lembar</Text>
<Text>Rp. {e.hargaLembar}</Text>
</Box>
</Stack>
</Grid.Col>
<Grid.Col span={6}>
<Stack>
<Box>
<Text>ROI</Text>
<Text>{e.roi}%</Text>
</Box>
<Box>
<Text>Total Lembar</Text>
<Text>{e.totalLembar}</Text>
</Box>
</Stack>
</Grid.Col>
</Grid>
</Box>
</CardSection>
<Divider />
<CardSection p={"md"}>
{(() => {
if (
e.masterPencarianInvestorId -
moment(new Date()).diff(new Date(e.createdAt), "days") ===
0
) {
return (
<>
<Group position="right">
<IconCircleCheck/>
<Text>Selesai</Text>
</Group>
</>
);
} else {
return<>
<Group position="right" spacing={"xs"}>
<Text>Sisa waktu:</Text>
<Text>
{e.masterPencarianInvestorId -
moment(new Date()).diff(new Date(e.createdAt), "days")}
</Text>
<Text>Hari</Text>
</Group>
</>
}
})()}
</CardSection>
</Card>
))}
</>
}

120
src/app_modules/investasi/upload_bukti/view.tsx
View File

@@ -1,29 +1,109 @@
"use client"
"use client";
import { Warna } from "@/app/lib/warna"
import { Button, CopyButton, Grid, Group, Text } from "@mantine/core"
import { Warna } from "@/app/lib/warna";
import {
AspectRatio,
Button,
Center,
CopyButton,
FileButton,
Grid,
Group,
Image,
Text,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-simple-toasts";
export default function UploadBuktiTransferInvestasi(){
return<>
<Grid align="center">
export default function UploadBuktiTransferInvestasi() {
const router = useRouter()
const [fl, setFl] = useState<File | null>(null);
const [img, setImg] = useState<any | null>(null);
return (
<>
<Grid align="center">
<Grid.Col span={"auto"}>
<Text>Rekening</Text>
<Text>Rekening</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>908765467897654567</Text>
<Text>908765467897654567</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<CopyButton value="908765467897654567">
{({ copied, copy }) => (
<Button compact radius={50} color={copied ? 'teal' : 'blue'} onClick={copy}>
{copied ? 'Copied url' : 'Copy url'}
</Button>
)}
</CopyButton>
<CopyButton value="908765467897654567">
{({ copied, copy }) => (
<Button
compact
radius={50}
color={copied ? "teal" : "blue"}
onClick={copy}
>
{copied ? "Copied url" : "Copy url"}
</Button>
)}
</CopyButton>
</Grid.Col>
</Grid>
</Grid>
<Grid align="center">
<Grid.Col span={"auto"}>
<Text>Total Harga</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>Rp. 100.000</Text>
</Grid.Col>
<Grid.Col span={"auto"}></Grid.Col>
</Grid>
{/* Upload */}
<Group position="center" mt="lg" mb={"md"}>
<FileButton
onChange={async (files: any) => {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
setImg(buffer);
setFl(files);
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
// w={350}
compact
radius={50}
bg={Warna.biru}
// onClick={() => router.push("/dev/investasi/upload")}
>
Upload
</Button>
)}
</FileButton>
</Group>
<AspectRatio ratio={16 / 9} mb={"lg"}>
{img ? (
<Image alt="" src={img} />
) : (
<Image alt="" src={"/aset/no-img.png"} />
)}
</AspectRatio>
<Center>
{img === null ? (
<Button w={350} radius={50} bg={"gray"}
onClick={() => toast("Masukan Bukti Transfer")}
>
Selesai
</Button>
) : (
<Button w={350} radius={50} bg={"blue"}
onClick={() => router.push("/dev/investasi/konfirmasi")}
>
Selesai
</Button>
)}
</Center>
</>
}
);
}