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

#style:

Browse Source 
Deskripsi :
- Perbaikan UI Donasi
## NO Issue
This commit is contained in:
Bagasbanuna02
2024-07-22 10:29:51 +08:00
parent 8fa3f0332d
commit 73c6d58eef
89 changed files with 1686 additions and 1442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/app_modules/donasi/main/beranda.tsx
View File

@@ -1,73 +1,41 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { Warna } from "@/app/lib/warna";
import {
ActionIcon,
Affix,
AspectRatio,
Avatar,
Badge,
Box,
Button,
Card,
CardSection,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
rem,
} from "@mantine/core";
import { useViewportSize, useWindowScroll } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { MODEL_DONASI } from "../model/interface";
import { useState } from "react";
import ComponentDonasi_BoxPublish from "../component/box_publish";
import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
import { ActionIcon, Affix, Box, rem } from "@mantine/core";
import { useWindowScroll } from "@mantine/hooks";
import { IconPencilPlus } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentDonasi_CardPublish from "../component/card_view/box_publish";
import { MODEL_DONASI } from "../model/interface";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import _ from "lodash";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
export default function MainDonasi({
listDonasi,
}: {
listDonasi: MODEL_DONASI[];
}) {
const router = useRouter();
const [isLoading, setLoading] = useState(false);
const [scroll, scrollTo] = useWindowScroll();
const [data, setData] = useState(listDonasi);
return (
<>
<Affix position={{ bottom: rem(150), right: rem(30) }}>
<ActionIcon
loading={isLoading ? true : false}
opacity={scroll.y > 0 ? 0.5 : ""}
style={{
transition: "0.5s",
}}
size={"xl"}
radius={"xl"}
variant="transparent"
bg={"orange"}
onClick={() => {
setLoading(true);
router.push(RouterDonasi.create_donasi);
}}
>
<IconPencilPlus color="white" />
</ActionIcon>
</Affix>
<ComponentDonasi_BoxPublish
dataDonasi={listDonasi}
path={RouterDonasi.detail_main}
/>
<Box>
<ComponentGlobal_CreateButton path={RouterDonasi.create_donasi} />
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
data.map((e, i) => (
<Box key={i}>
<ComponentDonasi_CardPublish
data={e as any}
path={RouterDonasi.detail_main}
/>
</Box>
))
)}
</Box>
</>
);
}

149
src/app_modules/donasi/main/donasi_saya.tsx
View File

@@ -1,36 +1,30 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import {
AspectRatio,
Avatar,
Badge,
Box,
Button,
Card,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
Text
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { MODEL_DONASI_INVOICE } from "../model/interface";
import { useState } from "react";
import TampilanRupiahDonasi from "../component/tampilan_rupiah";
import ComponentDonasi_TampilanHitungMundur from "../component/tampilan_hitung_mundur";
import moment from "moment";
import toast from "react-simple-toasts";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import _ from "lodash";
import ComponentDonasi_IsEmptyData from "../component/is_empty_data";
import moment from "moment";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-simple-toasts";
import ComponentDonasi_TampilanHitungMundur from "../component/tampilan_hitung_mundur";
import TampilanRupiahDonasi from "../component/tampilan_rupiah";
import { MODEL_DONASI_INVOICE } from "../model/interface";
export default function DonasiSayaDonasi({
listInvoice,
@@ -42,71 +36,70 @@ export default function DonasiSayaDonasi({
const { height, width } = useViewportSize();
if (_.isEmpty(listInvoice))
return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
return <ComponentGlobal_IsEmptyData />;
return (
<>
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{invoice.map((e, i) => (
<Box
key={i}
onClick={() =>
onClick(router, e.donasiMaster_StatusInvoiceId, e.id, e.Donasi.id)
}
>
<Stack>
<Grid>
<Grid.Col span={5}>
<Stack spacing={5}>
<Stack spacing={0}>
<Text fz={"xs"} fw={"bold"} truncate>
{e.Donasi.title}
</Text>
<ComponentDonasi_TampilanHitungMundur
durasi={e.Donasi.DonasiMaster_Durasi.name}
publishTime={e.Donasi.publishTime}
textSize={10}
/>
</Stack>
<Progress value={+e.Donasi.progres} color="orange" />
<Group position="apart">
<Stack spacing={0}>
<Text fz={10}>Donasi Saya</Text>
<Text fz={10} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+e.nominal} />
</Text>
</Stack>
</Group>
<Badge size="xs" variant="dot">
<Text>{e.DonasiMaster_StatusInvoice.name}</Text>
</Badge>
{invoice.map((e, i) => (
<Box
style={{
backgroundColor: AccentColor.blue,
border: `2px solid ${AccentColor.darkblue}`,
padding: "15px",
cursor: "pointer",
borderRadius: "10px",
color: "white",
marginBottom: "15px",
}}
key={i}
onClick={() =>
onClick(router, e.donasiMaster_StatusInvoiceId, e.id, e.Donasi.id)
}
>
<Stack>
<Grid>
<Grid.Col span={5}>
<Stack spacing={5}>
<Stack spacing={0}>
<Text fz={"xs"} fw={"bold"} truncate>
{e.Donasi.title}
</Text>
<ComponentDonasi_TampilanHitungMundur
durasi={e.Donasi.DonasiMaster_Durasi.name}
publishTime={e.Donasi.publishTime}
textSize={10}
/>
</Stack>
</Grid.Col>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.Donasi.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
<Progress value={+e.Donasi.progres} color="orange" />
<Group position="apart">
<Stack spacing={0}>
<Text fz={10}>Donasi Saya</Text>
<Text fz={10} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+e.nominal} />
</Text>
</Stack>
</Group>
<Badge size="xs" variant="filled" color="yellow">
<Text>{e.DonasiMaster_StatusInvoice.name}</Text>
</Badge>
</Stack>
</Grid.Col>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.Donasi.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
</Grid>
{/* {width > 575 ? "" : <Divider />} */}
</Stack>
</Box>
))}
</>
);
}

118
src/app_modules/donasi/main/galang_dana.tsx
View File

@@ -1,118 +0,0 @@
"use client";
import {
Affix,
Box,
Button,
Divider,
Stack,
Tabs,
TabsProps,
Text,
rem,
} from "@mantine/core";
import { IconCirclePlus } from "@tabler/icons-react";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { gs_donasi_tabs_posting } from "../global_state";
import PostingPublishDonasi from "./galang_dana/publish";
import PostingReviewDonasi from "./galang_dana/review";
import PostingRejectDonasi from "./galang_dana/reject";
import { Warna } from "@/app/lib/warna";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import PostingDraftDonasi from "./galang_dana/draft";
export default function GalangDanaDonasi({
listPublish,
listReview,
listDraft,
listReject,
}: {
listPublish: any;
listReview: any;
listDraft: any;
listReject: any;
}) {
const router = useRouter();
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
const listPosting = [
{
id: 1,
value: "Publish",
path: <PostingPublishDonasi listPublish={listPublish} />,
color: "green",
},
{
id: 2,
value: "Review",
path: <PostingReviewDonasi listReview={listReview} />,
color: "yellow",
},
{
id: 3,
value: "Draft",
path: <PostingDraftDonasi listDraft={listDraft} />,
color: "red",
},
{
id: 4,
value: "Reject",
path: <PostingRejectDonasi listReject={listReject} />,
color: "red",
},
];
return (
<>
{/* <Affix position={{ bottom: rem(150), right: rem(20) }}>
<Button
radius={"xl"}
bg={"orange"}
color="orange"
leftIcon={<IconCirclePlus />}
onClick={() => router.push(RouterDonasi.create_donasi)}
>
Galang Dana
</Button>
</Affix> */}
<Stack>
<Tabs
color="orange"
variant="pills"
radius="xl"
defaultValue="Publish"
value={tabsPostingDonasi}
onTabChange={setTabsPostingDonasi}
>
<Stack>
<Tabs.List grow>
{listPosting.map((e, i) => (
<Tabs.Tab
key={e.id}
value={e.value}
bg={tabsPostingDonasi === e.value ? e.color : "gray.1"}
>
<Text
c={tabsPostingDonasi === e.value ? "white" : "gray"}
fw={tabsPostingDonasi === e.value ? 900 : "normal"}
>
{e.value}
</Text>
</Tabs.Tab>
))}
</Tabs.List>
{listPosting.map((e, i) => (
<Tabs.Panel key={e.id} value={e.value} pt="xs">
{e.path}
</Tabs.Panel>
))}
</Stack>
</Tabs>
</Stack>
</>
);
}

85
src/app_modules/donasi/main/galang_dana/draft.tsx
View File

@@ -2,89 +2,30 @@
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
Box
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
import { MODEL_DONASI } from "../../model/interface";
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import _ from "lodash";
import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
import { MODEL_DONASI } from "../../model/interface";
export default function PostingDraftDonasi({
listDraft,
}: {
listDraft: MODEL_DONASI[];
}) {
const { height, width } = useViewportSize();
const router = useRouter();
if (_.isEmpty(listDraft))
return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
if (_.isEmpty(listDraft)) return <ComponentGlobal_IsEmptyData />;
return (
<>
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{listDraft.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_draft + `${e.id}`)}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{e.title}
</Text>
<Stack spacing={0}>
<Text fz={"sm"}>Terget Dana</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
<TampilanRupiahDonasi nominal={+e.target} />
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
{listDraft.map((e, i) => (
<Box key={i}>
<ComponentDonasi_CardStatus
data={e}
path={RouterDonasi.detail_draft}
/>
</Box>
))}
</>
);
}

48
src/app_modules/donasi/main/galang_dana/publish.tsx
View File

@@ -1,40 +1,40 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
import ComponentDonasi_CardPublish from "../../component/card_view/box_publish";
import { MODEL_DONASI } from "../../model/interface";
import { useState } from "react";
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
import ComponentDonasi_TampilanHitungMundur from "../../component/tampilan_hitung_mundur";
import ComponentDonasi_BoxPublish from "../../component/box_publish";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import _ from "lodash";
import { Box } from "@mantine/core";
export default function PostingPublishDonasi({
listPublish,
}: {
listPublish: MODEL_DONASI[];
}) {
const [data, setData] = useState(listPublish);
return (
<>
<ComponentDonasi_BoxPublish dataDonasi={listPublish} path={RouterDonasi.detail_publish} />
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
data.map((e, i) => (
<Box key={i}>
<ComponentDonasi_CardPublish
data={e}
path={RouterDonasi.detail_publish}
/>
</Box>
))
)}
</>
);
// return (
// <>
// <ComponentDonasi_CardPublish dataDonasi={listPublish} path={RouterDonasi.detail_publish} />
// </>
// );
}

129
src/app_modules/donasi/main/galang_dana/reject.tsx
View File

@@ -4,9 +4,6 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Image,
@@ -14,78 +11,88 @@ import {
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import _ from "lodash";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
import { MODEL_DONASI } from "../../model/interface";
import { useState } from "react";
import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
import _ from "lodash";
import { MODEL_DONASI } from "../../model/interface";
import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
export default function PostingRejectDonasi({
listReject,
}: {
listReject: MODEL_DONASI[];
}) {
const { height, width } = useViewportSize();
const router = useRouter();
const [donasi, setDonasi] = useState(listReject);
if (_.isEmpty(listReject))
return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
const [data, setData] = useState(listReject);
return (
<>
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{donasi.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_reject + `${e.id}`)}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{e.title}
</Text>
<Stack spacing={0}>
<Text fz={"sm"} fw={"bold"}>
Alasan ditolak
</Text>
<Text fz={"sm"} lineClamp={2}>
{e.catatan}
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
{data.map((e, i) => (
<Box key={i}>
<ComponentDonasi_CardStatus
data={e}
path={RouterDonasi.detail_reject}
/>
</Box>
))}
</>
);
// if (_.isEmpty(listReject))
// return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
// return (
// <>
// <SimpleGrid
// cols={4}
// spacing="lg"
// breakpoints={[
// { maxWidth: "62rem", cols: 3, spacing: "md" },
// { maxWidth: "48rem", cols: 2, spacing: "sm" },
// { maxWidth: "36rem", cols: 1, spacing: "sm" },
// ]}
// >
// {donasi.map((e, i) => (
// <Box
// key={i}
// onClick={() => router.push(RouterDonasi.detail_reject + `${e.id}`)}
// >
// <Stack>
// <Grid>
// <Grid.Col span={7}>
// <AspectRatio ratio={16 / 9}>
// <Paper radius={"md"}>
// <Image
// alt="Foto"
// src={RouterDonasi.api_gambar + `${e.imagesId}`}
// radius={"md"}
// />
// </Paper>
// </AspectRatio>
// </Grid.Col>
// <Grid.Col span={5}>
// <Stack spacing={"xs"}>
// <Text fz={"sm"} fw={"bold"} lineClamp={2}>
// {e.title}
// </Text>
// <Stack spacing={0}>
// <Text fz={"sm"} fw={"bold"}>
// Alasan ditolak
// </Text>
// <Text fz={"sm"} lineClamp={2}>
// {e.catatan}
// </Text>
// </Stack>
// </Stack>
// </Grid.Col>
// </Grid>
// {width > 575 ? "" : <Divider />}
// </Stack>
// </Box>
// ))}
// </SimpleGrid>
// </>
// );
}

89
src/app_modules/donasi/main/galang_dana/review.tsx
View File

@@ -1,92 +1,29 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Box,
Button,
Card,
Center,
Divider,
Grid,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import toast from "react-simple-toasts";
import { MODEL_DONASI } from "../../model/interface";
import { Box } from "@mantine/core";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import _ from "lodash";
import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
import { MODEL_DONASI } from "../../model/interface";
export default function PostingReviewDonasi({
listReview,
}: {
listReview: MODEL_DONASI[];
}) {
const { height, width } = useViewportSize();
const router = useRouter();
if (_.isEmpty(listReview))
return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
if (_.isEmpty(listReview)) return <ComponentGlobal_IsEmptyData />;
return (
<>
<SimpleGrid
cols={4}
spacing="lg"
breakpoints={[
{ maxWidth: "62rem", cols: 3, spacing: "md" },
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
{listReview.map((e, i) => (
<Box
key={i}
onClick={() => router.push(RouterDonasi.detail_review + `${e.id}`)}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"} bg={"gray.1"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${e.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
</Grid.Col>
<Grid.Col span={5}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{e.title}
</Text>
<Stack spacing={0}>
<Text fz={"sm"}>Terget Dana</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
Rp.{" "}
{new Intl.NumberFormat("id-ID", {
maximumFractionDigits: 10,
}).format(+e.target)}
</Text>
</Stack>
</Stack>
</Grid.Col>
</Grid>
{width > 575 ? "" : <Divider />}
</Stack>
</Box>
))}
</SimpleGrid>
{listReview.map((e, i) => (
<Box key={i}>
<ComponentDonasi_CardStatus
data={e}
path={RouterDonasi.detail_review}
/>
</Box>
))}
</>
);
}

109
src/app_modules/donasi/main/galang_dana/ui_galang_dana.tsx Normal file
View File

@@ -0,0 +1,109 @@
"use client";
import {
Stack,
Tabs,
Text
} from "@mantine/core";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { gs_donasi_tabs_posting } from "../../global_state";
import PostingDraftDonasi from "./draft";
import PostingPublishDonasi from "./publish";
import PostingRejectDonasi from "./reject";
import PostingReviewDonasi from "./review";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function GalangDanaDonasi({
listPublish,
listReview,
listDraft,
listReject,
}: {
listPublish: any;
listReview: any;
listDraft: any;
listReject: any;
}) {
const router = useRouter();
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
const listPosting = [
{
id: 1,
value: "Publish",
path: <PostingPublishDonasi listPublish={listPublish} />,
color: "green",
},
{
id: 2,
value: "Review",
path: <PostingReviewDonasi listReview={listReview} />,
color: "yellow",
},
{
id: 3,
value: "Draft",
path: <PostingDraftDonasi listDraft={listDraft} />,
color: "red",
},
{
id: 4,
value: "Reject",
path: <PostingRejectDonasi listReject={listReject} />,
color: "red",
},
];
return (
<>
<Tabs
color="orange"
variant="pills"
radius="xl"
defaultValue="Publish"
value={tabsPostingDonasi}
onTabChange={setTabsPostingDonasi}
styles={{
tabsList: {
backgroundColor: MainColor.darkblue,
position: "sticky",
top: 0,
zIndex: 99,
},
}}
>
<Stack>
<Tabs.List grow>
{listPosting.map((e, i) => (
<Tabs.Tab
key={e.id}
value={e.value}
fw={"bold"}
c={"black"}
style={{
transition: "0.5s",
backgroundColor:
tabsPostingDonasi === e.value ? MainColor.yellow : "white",
border:
tabsPostingDonasi === e.value
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
}}
>
{e.value}
</Tabs.Tab>
))}
</Tabs.List>
{listPosting.map((e, i) => (
<Tabs.Panel key={e.id} value={e.value} pt="xs">
{e.path}
</Tabs.Panel>
))}
</Stack>
</Tabs>
</>
);
}

202
src/app_modules/donasi/main/layout.tsx
View File

@@ -1,30 +1,22 @@
"use client";
import {
ActionIcon,
Center,
Flex,
Footer,
Grid,
Group,
Header,
Text,
Title
} from "@mantine/core";
import React, { useState } from "react";
import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import {
IconChevronLeft,
IconGiftCardFilled,
IconHome,
IconMoneybag
IconMoneybag,
} from "@tabler/icons-react";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { gs_donasi_hot_menu } from "../global_state";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
export default function LayoutDonasi({
children,
@@ -40,7 +32,7 @@ export default function LayoutDonasi({
const [isLoading, setLoading] = useState(false);
const [isRightLoading, setRightLoading] = useState(false);
const listPage = [
const listFooter = [
{
id: 1,
name: "Beranda",
@@ -63,80 +55,122 @@ export default function LayoutDonasi({
return (
<>
<AppComponentGlobal_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<Header height={50} sx={{ borderStyle: "none" }}>
<Group h={50} position="apart" px={"md"}>
<ActionIcon
radius={"xl"}
variant="transparent"
loading={isLoading ? true : false}
onClick={() => {
setLoading(true);
router.push(RouterCrowd.main);
}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5}>Donasi</Title>
<ActionIcon disabled variant="transparent"/>
{/* <ActionIcon
radius={"md"}
loading={isRightLoading ? true : false}
variant="transparent"
onClick={() => {
setRightLoading(true);
router.push(RouterDonasi.notif_page + `${userId}`);
}}
>
{_.isEmpty(isRead) ? (
<IconBell />
) : isRead.includes(false) ? (
<Indicator processing color="orange">
<IconBell />
</Indicator>
) : (
<IconBell />
)}
</ActionIcon> */}
</Group>
</Header>
<UIGlobal_LayoutHeaderTamplate
title="Donasi"
routerLeft={RouterCrowd.main}
/>
}
footer={
<Footer height={"10vh"} bg={"dark"}>
<Grid align="center" h={"10vh"} pt={"xs"} grow>
{/* Tampilan Bursa */}
{listPage.map((e, i) => (
<Grid.Col
key={e.id}
span={3}
onClick={() => {
router.push(e.path);
setActive(i);
}}
<SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
{listFooter.map((e, i) => (
<Stack key={i} align="center" justify="center" spacing={0}>
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={active === i ? MainColor.yellow : "white"}
onClick={() =>
e.path === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.replace(e.path), setActive(i))
}
>
<Center>
<Flex direction={"column"} align={"center"} w={"100%"}>
<ActionIcon
variant="transparent"
c={active === i ? "orange" : "white"}
>
{e.icon}
</ActionIcon>
<Text c={active === i ? "orange" : "white"} fz={"xs"}>
{e.name}
</Text>
</Flex>
</Center>
</Grid.Col>
))}
</Grid>
</Footer>
{e.icon}
</ActionIcon>
<Text
c={active === i ? MainColor.yellow : "white"}
fz={"xs"}
lineClamp={1}
>
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>
}
>
{/* {JSON.stringify(isRead)} */}
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
// return (
// <>
// <AppComponentGlobal_LayoutTamplate
// header={
// <Header height={50} sx={{ borderStyle: "none" }}>
// <Group h={50} position="apart" px={"md"}>
// <ActionIcon
// radius={"xl"}
// variant="transparent"
// loading={isLoading ? true : false}
// onClick={() => {
// setLoading(true);
// router.push(RouterCrowd.main);
// }}
// >
// <IconChevronLeft />
// </ActionIcon>
// <Title order={5}>Donasi</Title>
// <ActionIcon disabled variant="transparent" />
// {/* <ActionIcon
// radius={"md"}
// loading={isRightLoading ? true : false}
// variant="transparent"
// onClick={() => {
// setRightLoading(true);
// router.push(RouterDonasi.notif_page + `${userId}`);
// }}
// >
// {_.isEmpty(isRead) ? (
// <IconBell />
// ) : isRead.includes(false) ? (
// <Indicator processing color="orange">
// <IconBell />
// </Indicator>
// ) : (
// <IconBell />
// )}
// </ActionIcon> */}
// </Group>
// </Header>
// }
// footer={
// <Footer height={"10vh"} bg={"dark"}>
// <Grid align="center" h={"10vh"} pt={"xs"} grow>
// {/* Tampilan Bursa */}
// {listPage.map((e, i) => (
// <Grid.Col
// key={e.id}
// span={3}
// onClick={() => {
// router.push(e.path);
// setActive(i);
// }}
// >
// <Center>
// <Flex direction={"column"} align={"center"} w={"100%"}>
// <ActionIcon
// variant="transparent"
// c={active === i ? "orange" : "white"}
// >
// {e.icon}
// </ActionIcon>
// <Text c={active === i ? "orange" : "white"} fz={"xs"}>
// {e.name}
// </Text>
// </Flex>
// </Center>
// </Grid.Col>
// ))}
// </Grid>
// </Footer>
// }
// >
// {/* {JSON.stringify(isRead)} */}
// {children}
// </AppComponentGlobal_LayoutTamplate>
// </>
// );
}