Revisi tampilan
fix: - alur pembuatan investasi - tampilan investasi ### No issue
This commit is contained in:
@@ -11,6 +11,10 @@ import {
|
||||
Image,
|
||||
Text,
|
||||
Center,
|
||||
Paper,
|
||||
Grid,
|
||||
Flex,
|
||||
Stack,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { MODEL_Investasi } from "../model/model_investasi";
|
||||
@@ -18,53 +22,55 @@ import _ from "lodash";
|
||||
|
||||
export default function Draft({ data }: { data: MODEL_Investasi[] }) {
|
||||
const router = useRouter();
|
||||
// console.log(data)
|
||||
|
||||
if (_.isEmpty(data))
|
||||
return (
|
||||
<>
|
||||
<Center h={"50vh"}>Tidak ada Draft</Center>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Center h={"50vh"}>Tidak ada Draft</Center>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <pre> {JSON.stringify(data,null, 2)}</pre> */}
|
||||
{data.map((e) =>
|
||||
<Card
|
||||
key={e.id}
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
onClick={() =>
|
||||
router.push(RouterInvestasi.detail_draft + `${e.id}`)
|
||||
}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
{data.map((e) => (
|
||||
<Paper
|
||||
// sx={{ borderStyle: "solid", borderColor: "yellow", borderWidth: "0.5px" }}
|
||||
p={"xs"}
|
||||
key={e.id}
|
||||
mb={"md"}
|
||||
bg={"yellow.1"}
|
||||
withBorder
|
||||
onClick={() => router.push(RouterInvestasi.detail_draft + `${e.id}`)}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Text fw={"bold"}> {_.capitalize(e.title)}</Text>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={10}>Target Dana:</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.targetDana)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="center">
|
||||
<Badge color="yellow" variant="dot">
|
||||
Draft
|
||||
</Badge>
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
)}
|
||||
<Grid.Col span={4}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,9 @@ import {
|
||||
Image,
|
||||
Text,
|
||||
Center,
|
||||
Grid,
|
||||
Stack,
|
||||
Paper,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
@@ -36,38 +39,43 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
|
||||
return (
|
||||
<>
|
||||
{data.map((e) => (
|
||||
<Card
|
||||
<Paper
|
||||
key={e.id}
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
mb={"md"}
|
||||
p={"xs"}
|
||||
bg={"green.1"}
|
||||
onClick={() =>
|
||||
router.push(RouterInvestasi.detail_publish + `${e.id}`)
|
||||
}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Text fw={"bold"}> {_.capitalize(e.title)}</Text>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={10}>Target Dana:</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.targetDana)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box mb={"md"}>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
{/* <Slider
|
||||
size={10}
|
||||
disabled
|
||||
labelAlwaysOn
|
||||
value={60}
|
||||
marks={[{ value: 60, label: 60 + `%` }]}
|
||||
/> */}
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Grid.Col span={4}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Divider my={"xs"}/>
|
||||
<Group position="center">
|
||||
{Number(e.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(new Date(e.updatedAt), "days") <=
|
||||
0 ? (
|
||||
@@ -76,10 +84,10 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
|
||||
<Text c={"green"}>Selesai</Text>
|
||||
</Group>
|
||||
) : (
|
||||
<Group position="apart">
|
||||
<Badge color="green" variant="dot">
|
||||
<Group position="center">
|
||||
{/* <Badge color="green" variant="dot">
|
||||
Publish
|
||||
</Badge>
|
||||
</Badge> */}
|
||||
<Text>
|
||||
Sisa Waktu :{" "}
|
||||
{Number(e.MasterPencarianInvestor.name) -
|
||||
@@ -88,8 +96,8 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
</CardSection>
|
||||
</Card>
|
||||
</Group>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,9 @@ import {
|
||||
Image,
|
||||
Text,
|
||||
Center,
|
||||
Grid,
|
||||
Stack,
|
||||
Paper,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
@@ -35,36 +38,39 @@ export default function Reject({ data }: { data: MODEL_Investasi[] }) {
|
||||
<>
|
||||
|
||||
{investasi.map((e) => (
|
||||
<Card
|
||||
<Paper
|
||||
key={e.id}
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
mb={"md"}
|
||||
p={"xs"}
|
||||
bg={"red.1"}
|
||||
onClick={() => router.push(RouterInvestasi.detail_reject + `${e.id}`)}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Text fw={"bold"}> {_.capitalize(e.title)}</Text>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={10}>Target Dana:</Text>
|
||||
<Text>
|
||||
Rp. {new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.targetDana)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="center">
|
||||
<Badge color="red" variant="dot">
|
||||
Reject
|
||||
</Badge>
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
<Grid.Col span={4}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,9 @@ import {
|
||||
Image,
|
||||
Center,
|
||||
Text,
|
||||
Paper,
|
||||
Grid,
|
||||
Stack,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
@@ -31,36 +34,41 @@ export default function Review({ data }: { data: MODEL_Investasi[] }) {
|
||||
return (
|
||||
<>
|
||||
{data.map((e) => (
|
||||
<Card
|
||||
<Paper
|
||||
// sx={{ borderStyle: "solid", borderColor: "orange", borderWidth: "1px" }}
|
||||
key={e.id}
|
||||
mb={"md"}
|
||||
bg={"orange.1"}
|
||||
p={"xs"}
|
||||
withBorder
|
||||
mb={40}
|
||||
bg={"gray.5"}
|
||||
onClick={() => router.push(RouterInvestasi.detail_review + `${e.id}`)}
|
||||
>
|
||||
<CardSection p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Text fw={"bold"}> {_.capitalize(e.title)}</Text>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={10}>Target Dana:</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.targetDana)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Box>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="center">
|
||||
<Badge color="yellow" variant="dot">
|
||||
Review
|
||||
</Badge>
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
<Grid.Col span={4}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -26,7 +26,11 @@ import {
|
||||
import dataDummy from "../dummy/data_dummy.json";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { IconCaretDown, IconCircleCheck } from "@tabler/icons-react";
|
||||
import {
|
||||
IconCaretDown,
|
||||
IconCircleCheck,
|
||||
IconCirclePlus,
|
||||
} from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
|
||||
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
|
||||
@@ -73,38 +77,49 @@ export default function PortofolioInvestasi({
|
||||
return (
|
||||
<>
|
||||
{/* <pre>{JSON.stringify(dataInvestasi, null, 2)}</pre> */}
|
||||
<Tabs
|
||||
variant="pills"
|
||||
radius="xl"
|
||||
defaultValue="Draft"
|
||||
value={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
>
|
||||
<Tabs.List>
|
||||
{status_inves.map((e) => (
|
||||
<Tabs.Tab
|
||||
key={e.id}
|
||||
value={e.name}
|
||||
color={!activeTab ? "gray" : e.color}
|
||||
>
|
||||
{e.name}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs.List>
|
||||
<Divider my={"xs"} />
|
||||
<Tabs.Panel key={"1"} value="Draft">
|
||||
<Draft data={dataDraft as any} />
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel key={"2"} value="Review">
|
||||
<Review data={dataReview as any} />
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel key={"3"} value="Publish">
|
||||
<Publish data={dataPublish as any} />
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel key={"4"} value="Reject">
|
||||
<Reject data={dataReject as any} />
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
<Stack>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
bg={Warna.biru}
|
||||
color="blue"
|
||||
leftIcon={<IconCirclePlus />}
|
||||
onClick={() => router.push(RouterInvestasi.create)}
|
||||
>
|
||||
Buat Proyek Invetasi
|
||||
</Button>
|
||||
<Tabs
|
||||
variant="pills"
|
||||
radius="xl"
|
||||
defaultValue="Draft"
|
||||
value={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
>
|
||||
<Tabs.List grow>
|
||||
{status_inves.map((e) => (
|
||||
<Tabs.Tab
|
||||
key={e.id}
|
||||
value={e.name}
|
||||
color={!activeTab ? "gray" : e.color}
|
||||
>
|
||||
{e.name}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs.List>
|
||||
<Divider my={"xs"} />
|
||||
<Tabs.Panel key={"1"} value="Draft">
|
||||
<Draft data={dataDraft as any} />
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel key={"2"} value="Review">
|
||||
<Review data={dataReview as any} />
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel key={"3"} value="Publish">
|
||||
<Publish data={dataPublish as any} />
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel key={"4"} value="Reject">
|
||||
<Reject data={dataReject as any} />
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user