Revisi tampilan

fix:
- alur pembuatan investasi
- tampilan investasi
### No issue
This commit is contained in:
2023-12-05 10:14:51 +08:00
parent 7477b0f458
commit a2149b071e
61 changed files with 779 additions and 470 deletions

View File

@@ -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>
))}
</>
);
}

View File

@@ -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>
))}
</>
);

View File

@@ -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>
))}
</>
);

View File

@@ -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>
))}
</>
);

View File

@@ -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>
</>
);
}