feat:
- Fitur hot menu ditambah - Fitur portofolio khusus status investasi - Fitur halaman transaksi ### No Issue #fix: - Perubahan minor
This commit is contained in:
29
src/app_modules/investasi/portofolio/layout.tsx
Normal file
29
src/app_modules/investasi/portofolio/layout.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AppShell,
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Header,
|
||||
ScrollArea,
|
||||
} from "@mantine/core";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function LayoutPortofolioInvestasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [active, setActive] = useState(0);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -15,8 +15,11 @@ import {
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Select,
|
||||
Slider,
|
||||
Stack,
|
||||
Tabs,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
@@ -31,260 +34,245 @@ import { Carousel } from "react-responsive-carousel";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { Warna } from "@/app/lib/warna";
|
||||
import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import {
|
||||
IconPhoto,
|
||||
IconMessageCircle,
|
||||
IconSettings,
|
||||
} from "@tabler/icons-react";
|
||||
import { atomWithStorage } from "jotai/utils";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_TabPortoInvestasi } from "../g_state";
|
||||
|
||||
|
||||
export default function PortofolioInvestasi() {
|
||||
const router = useRouter();
|
||||
const [activeTab, setActiveTab] = useAtom(gs_TabPortoInvestasi)
|
||||
const listButton = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Draft",
|
||||
color: "yellow",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Review",
|
||||
color: "orange",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Publish",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Reject",
|
||||
color: "red",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<MyPortofolioInvestasi />
|
||||
<Divider my={"lg"} />
|
||||
<SahamTerbeli />
|
||||
</>
|
||||
);
|
||||
}
|
||||
<Tabs variant="pills" radius="xl" defaultValue="Draft" value={activeTab} onTabChange={setActiveTab}>
|
||||
<Tabs.List>
|
||||
{listButton.map((e) => (
|
||||
<Tabs.Tab key={e.id} value={e.name} color={!activeTab ? "gray" : e.color} >
|
||||
{e.name}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs.List>
|
||||
|
||||
function MyPortofolioInvestasi() {
|
||||
const [opened, { toggle }] = useDisclosure(false);
|
||||
const router = useRouter();
|
||||
<Divider my={"xs"}/>
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title mb={"md"} order={4}>
|
||||
Portofolio Saya
|
||||
</Title>
|
||||
<Carousel
|
||||
showThumbs={false}
|
||||
infiniteLoop={true}
|
||||
showArrows={false}
|
||||
showStatus={false}
|
||||
swipeable={true}
|
||||
>
|
||||
{dataDummy.map((e) => (
|
||||
<Card
|
||||
key={e.id}
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
onClick={() => router.push(`/dev/investasi/detail_porto/${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 mb={"md"}>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
<Slider
|
||||
size={10}
|
||||
disabled
|
||||
labelAlwaysOn
|
||||
value={e.persentase}
|
||||
marks={[{ value: e.persentase, label: e.persentase + `%` }]}
|
||||
/>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="apart">
|
||||
{(() => {
|
||||
if (e.statusPorto.id === 1) {
|
||||
return (
|
||||
<Badge color="yellow" variant="outline">
|
||||
{e.statusPorto.status}
|
||||
</Badge>
|
||||
);
|
||||
} else {
|
||||
if (e.statusPorto.id === 2) {
|
||||
return (
|
||||
<Badge color="red" variant="outline">
|
||||
{e.statusPorto.status}
|
||||
</Badge>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Badge color="green" variant="outline">
|
||||
{e.statusPorto.status}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
}
|
||||
})()}
|
||||
|
||||
{(() => {
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
{listButton.map((e) => (
|
||||
<Tabs.Panel key={e.id} value={e.name} pt="xs">
|
||||
<StatusPortofolio data={e} />
|
||||
</Tabs.Panel>
|
||||
))}
|
||||
</Carousel>
|
||||
</Tabs>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SahamTerbeli() {
|
||||
const router = useRouter();
|
||||
const [opened, { toggle }] = useDisclosure(true);
|
||||
|
||||
function StatusPortofolio({ data }: { data: any }) {
|
||||
return (
|
||||
<>
|
||||
<Title mb={"md"} order={4}>
|
||||
Saham Saya
|
||||
</Title>
|
||||
{dataDummy.map((e) => (
|
||||
<Card
|
||||
key={e.id}
|
||||
withBorder
|
||||
bg={"gray.5"}
|
||||
mb={"lg"}
|
||||
onClick={() =>
|
||||
router.push(RouterInvestasi.detail_saham_terbeli + `${e.id}`)
|
||||
{(() => {
|
||||
if (data.id === 1) {
|
||||
return (
|
||||
<>
|
||||
<Draft data={data} />
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
if (data.id === 2) {
|
||||
return (
|
||||
<>
|
||||
<Review data={data} />
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
if (data.id === 3) {
|
||||
return (
|
||||
<>
|
||||
<Publish data={data} />
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Reject data={data} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
>
|
||||
<CardSection>
|
||||
<Group position="left" mt={"sm"} px={"md"}>
|
||||
<Flex align={"center"} gap={"xs"}>
|
||||
<Avatar src={"/aset/avatar.png"} />
|
||||
<Text>Username</Text>
|
||||
</Flex>
|
||||
</Group>
|
||||
</CardSection>
|
||||
<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 mb={"md"}>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
<Slider
|
||||
size={10}
|
||||
disabled
|
||||
labelAlwaysOn
|
||||
value={e.persentase}
|
||||
marks={[{ value: e.persentase, label: e.persentase + `%` }]}
|
||||
/>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<CardSection p={"md"}>
|
||||
<Box>
|
||||
<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"}>
|
||||
<Group position="apart">
|
||||
{e.statusSaham.id === 1 ? (
|
||||
<Badge variant="dot">{e.statusSaham.status}</Badge>
|
||||
) : (
|
||||
<Badge variant="dot" color="red">
|
||||
{e.statusSaham.status}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{(() => {
|
||||
if (
|
||||
e.masterPencarianInvestorId -
|
||||
moment(new Date()).diff(new Date(e.createdAt), "days") <=
|
||||
0
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<Group position="center">
|
||||
<IconCircleCheck color="green" />
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
))}
|
||||
}
|
||||
})()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Draft({ data }: { data: any }) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
onClick={() => router.push(RouterInvestasi.detail_draft)}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image alt="" src={"/aset/no-img.png"} />
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box>
|
||||
<Title order={4}>Judul Investasi</Title>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="center">
|
||||
<Badge color="yellow" variant="dot">
|
||||
Draft
|
||||
</Badge>
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Review({ data }: { data: any }) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
onClick={() => router.push(RouterInvestasi.detail_review)}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image alt="" src={"/aset/no-img.png"} />
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box >
|
||||
<Title order={4}>Judul Investasi</Title>
|
||||
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="center">
|
||||
<Badge color="orange" variant="dot">
|
||||
{data.name}
|
||||
</Badge>
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Publish({ data }: { data: any }) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
onClick={() => router.push(RouterInvestasi.detail_publish)}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image alt="" src={"/aset/no-img.png"} />
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box mb={"md"}>
|
||||
<Title order={4}>Judul Investasi</Title>
|
||||
<Slider
|
||||
size={10}
|
||||
disabled
|
||||
labelAlwaysOn
|
||||
value={60}
|
||||
marks={[{ value: 60, label: 60 + `%` }]}
|
||||
/>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="apart">
|
||||
<Badge color="green" variant="dot">
|
||||
{data.name}
|
||||
</Badge>
|
||||
<Text>Sisa Waktu : 30 Hari</Text>
|
||||
</Group>
|
||||
|
||||
</CardSection>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Reject({ data }: { data: any }) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
onClick={() => router.push(RouterInvestasi.detail_reject)}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image alt="" src={"/aset/no-img.png"} />
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box>
|
||||
<Title order={4}>Judul Investasi</Title>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="center">
|
||||
<Badge color="red" variant="dot">
|
||||
{data.name}
|
||||
</Badge>
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user