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

Donation

Browse Source 
Add:
- ProgressSection.tsx
- ComponentInfoFundrising.tsx
- donation/[id]/infromation-fundrising.tsx
- donation/[id]/detail-story.tsx

Fix:
- Donation/ComponentStoryFunrising.tsx
- Donation/ComponentBoxDetailData.tsx

## No Issue
This commit is contained in:
Bagasbanuna02
2025-08-04 14:06:40 +08:00
parent d437365b5e
commit 3bcadbf643
11 changed files with 315 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/(application)/(user)/_layout.tsx
View File

@@ -390,7 +390,20 @@ export default function UserLayout() {
headerLeft: () => <BackButton />, headerLeft: () => <BackButton />,
}} }}
/> />
<Stack.Screen
name="donation/[id]/detail-story"
options={{
title: "Cerita Penggalang",
headerLeft: () => <BackButton />,
}}
/>
<Stack.Screen
name="donation/[id]/infromation-fundrising"
options={{
title: "Informasi Penggalang Dana",
headerLeft: () => <BackButton />,
}}
/>
{/* ========== End Donation Section ========= */} {/* ========== End Donation Section ========= */}

43
app/(application)/(user)/donation/(tabs)/index.tsx
View File

@@ -1,15 +1,9 @@
import { import {
BaseBox, FloatingButton,
DummyLandscapeImage, ViewWrapper
FloatingButton,
Grid,
ProgressCustom,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components"; } from "@/components";
import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
import { router } from "expo-router"; import { router } from "expo-router";
import { View } from "react-native";
export default function DonationBeranda() { export default function DonationBeranda() {
return ( return (
@@ -20,36 +14,7 @@ export default function DonationBeranda() {
} }
> >
{Array.from({ length: 10 }).map((_, index) => ( {Array.from({ length: 10 }).map((_, index) => (
<BaseBox <Donation_BoxPublish key={index} id={index.toString()}/>
key={index}
paddingTop={7}
paddingBottom={7}
href={`/investment/${index}`}
>
<Grid>
<Grid.Col span={5}>
<DummyLandscapeImage height={100} />
</Grid.Col>
<Grid.Col span={1}>
<View />
</Grid.Col>
<Grid.Col span={6}>
<StackCustom>
<View>
<TextCustom truncate>
Judul Donasi: Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</TextCustom>
<TextCustom size="small">Sisa hari: 0</TextCustom>
</View>
<ProgressCustom value={(index % 5) * 20} size="lg" />
{/* <TextCustom>
Terkumpul : Rp 300.000
</TextCustom> */}
</StackCustom>
</Grid.Col>
</Grid>
</BaseBox>
))} ))}
</ViewWrapper> </ViewWrapper>
); );

2
app/(application)/(user)/donation/[id]/[status]/detail.tsx
View File

@@ -42,7 +42,7 @@ export default function DonasiDetailStatus() {
/> />
<ViewWrapper> <ViewWrapper>
<Donation_ComponentBoxDetailData /> <Donation_ComponentBoxDetailData />
<Donation_ComponentStoryFunrising /> <Donation_ComponentStoryFunrising id={id as string} />
<Spacing /> <Spacing />
<Donation_ButtonStatusSection status={status as string} /> <Donation_ButtonStatusSection status={status as string} />
<Spacing /> <Spacing />

28
app/(application)/(user)/donation/[id]/detail-story.tsx Normal file
View File

@@ -0,0 +1,28 @@
import {
DummyLandscapeImage,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { useLocalSearchParams } from "expo-router";
export default function DonationDetailStory() {
const { id } = useLocalSearchParams();
return (
<ViewWrapper>
<StackCustom>
<TextCustom>
Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
</TextCustom>
<DummyLandscapeImage />
<TextCustom>
Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
</TextCustom>
</StackCustom>
</ViewWrapper>
);
}

34
app/(application)/(user)/donation/[id]/index.tsx
View File

@@ -1,9 +1,37 @@
import { TextCustom } from "@/components"; import {
BoxButtonOnFooter,
ButtonCustom,
StackCustom,
ViewWrapper
} from "@/components";
import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
import { useLocalSearchParams } from "expo-router";
export default function DonasiDetailBeranda() {
const { id } = useLocalSearchParams();
const buttonSection = (
<>
<BoxButtonOnFooter>
<ButtonCustom>Donasi</ButtonCustom>
</BoxButtonOnFooter>
</>
);
export default function DonasiBeranda() {
return ( return (
<> <>
<TextCustom>Detail Donasi</TextCustom> <ViewWrapper footerComponent={buttonSection}>
<StackCustom>
<Donation_ComponentBoxDetailData
bottomSection={<Donation_ProgressSection />}
/>
<Donation_ComponentInfoFundrising id={id as string} />
<Donation_ComponentStoryFunrising id={id as string} />
</StackCustom>
</ViewWrapper>
</> </>
); );
} }

44
app/(application)/(user)/donation/[id]/infromation-fundrising.tsx Normal file
View File

@@ -0,0 +1,44 @@
import {
AvatarCustom,
BaseBox,
ButtonCustom,
CenterCustom,
Grid,
Spacing,
TextCustom,
ViewWrapper
} from "@/components";
import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
import React from "react";
export default function DonationInformationFunrising() {
return (
<>
<ViewWrapper>
<BaseBox>
<Grid>
<Grid.Col span={6} style={{ justifyContent: "center" }}>
<CenterCustom>
<AvatarCustom size="lg" />
<TextCustom bold size="large" truncate>
@Username
</TextCustom>
</CenterCustom>
</Grid.Col>
<Grid.Col span={6} style={{ justifyContent: "center" }}>
<ButtonCustom href={`/profile/1234`}>
Kunjungi Profile
</ButtonCustom>
</Grid.Col>
</Grid>
</BaseBox>
<Spacing />
{Array.from({ length: 10 }).map((_, index) => (
<Donation_BoxPublish key={index} id={index.toString()} />
))}
</ViewWrapper>
</>
);
}

41
screens/Donation/BoxPublish.tsx Normal file
View File

@@ -0,0 +1,41 @@
import {
BaseBox,
Grid,
DummyLandscapeImage,
StackCustom,
TextCustom,
ProgressCustom,
} from "@/components";
import { View } from "react-native";
export default function Donation_BoxPublish({ id }: { id: string }) {
return (
<>
<BaseBox paddingTop={7} paddingBottom={7} href={`/donation/${id}`}>
<Grid>
<Grid.Col span={5}>
<DummyLandscapeImage unClickPath height={100} />
</Grid.Col>
<Grid.Col span={1}>
<View />
</Grid.Col>
<Grid.Col span={6}>
<StackCustom>
<View>
<TextCustom truncate>
Judul Donasi: Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</TextCustom>
<TextCustom size="small">Sisa hari: 0</TextCustom>
</View>
<ProgressCustom value={(Number(id) % 5) * 20} size="lg" />
{/* <TextCustom>
Terkumpul : Rp 300.000
</TextCustom> */}
</StackCustom>
</Grid.Col>
</Grid>
</BaseBox>
</>
);
}

8
screens/Donation/ComponentBoxDetailData.tsx
View File

@@ -5,9 +5,14 @@ import {
TextCustom, TextCustom,
Grid, Grid,
} from "@/components"; } from "@/components";
import React from "react";
import { View } from "react-native"; import { View } from "react-native";
export default function Donation_ComponentBoxDetailData() { export default function Donation_ComponentBoxDetailData({
bottomSection,
}: {
bottomSection?: React.ReactNode;
}) {
return ( return (
<> <>
<BaseBox> <BaseBox>
@@ -39,6 +44,7 @@ export default function Donation_ComponentBoxDetailData() {
</View> </View>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
{bottomSection}
</StackCustom> </StackCustom>
</BaseBox> </BaseBox>
</> </>

48
screens/Donation/ComponentInfoFundrising.tsx Normal file
View File

@@ -0,0 +1,48 @@
import {
AvatarUsernameAndOtherComponent,
BaseBox,
Grid,
InformationBox,
StackCustom,
TextCustom,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
export default function Donation_ComponentInfoFundrising({
id,
}: {
id: string;
}) {
return (
<>
<BaseBox href={`/donation/${id}/infromation-fundrising`} style={{paddingBottom: 0}}>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={10}>
<TextCustom bold size="large">
Informasi Penggalang Dana
</TextCustom>
</Grid.Col>
<Grid.Col span={2}>
<Ionicons
name="chevron-forward-circle-outline"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
style={{
alignSelf: "flex-end",
}}
/>
</Grid.Col>
</Grid>
<AvatarUsernameAndOtherComponent />
<InformationBox
text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</StackCustom>
</BaseBox>
</>
);
}

68
screens/Donation/ComponentStoryFunrising.tsx
View File

@@ -3,36 +3,40 @@ import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value"; import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
export default function Donation_ComponentStoryFunrising() { export default function Donation_ComponentStoryFunrising({
return ( id,
<> }: {
<BaseBox> id: string;
<StackCustom gap={"xs"}> }) {
<Grid> return (
<Grid.Col span={10}> <>
<TextCustom bold size="large"> <BaseBox href={`/donation/${id}/detail-story`}>
Cerita Penggalang Dana <StackCustom gap={"xs"}>
</TextCustom> <Grid>
</Grid.Col> <Grid.Col span={10}>
<Grid.Col span={2}> <TextCustom bold size="large">
<Ionicons Cerita Penggalang Dana
name="chevron-forward-circle-outline" </TextCustom>
size={ICON_SIZE_SMALL} </Grid.Col>
color={MainColor.yellow} <Grid.Col span={2}>
style={{ <Ionicons
alignSelf: "flex-end", name="chevron-forward-circle-outline"
}} size={ICON_SIZE_SMALL}
/> color={MainColor.yellow}
</Grid.Col> style={{
</Grid> alignSelf: "flex-end",
<TextCustom truncate={3}> }}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, />
iusto porro quae optio accusantium amet minima deleniti temporibus </Grid.Col>
cum voluptatem vel veniam doloribus blanditiis sapiente deserunt </Grid>
distinctio eaque aliquid laboriosam? <TextCustom truncate={3}>
</TextCustom> Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,
</StackCustom> iusto porro quae optio accusantium amet minima deleniti temporibus
</BaseBox> cum voluptatem vel veniam doloribus blanditiis sapiente deserunt
</> distinctio eaque aliquid laboriosam?
); </TextCustom>
</StackCustom>
</BaseBox>
</>
);
} }

59
screens/Donation/ProgressSection.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { ProgressCustom, Spacing, Grid, TextCustom } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { View } from "react-native";
export default function Donation_ProgressSection() {
return (
<>
<View>
<ProgressCustom size="lg" />
<Spacing />
<Grid>
<Grid.Col span={4}>
<View style={{ alignItems: "center" }}>
<Ionicons
name="flower-sharp"
size={ICON_SIZE_MEDIUM}
color={MainColor.yellow}
/>
<Spacing height={10} />
<TextCustom size="small">Donatur</TextCustom>
</View>
</Grid.Col>
<Grid.Col
span={4}
style={{
borderLeftWidth: 1,
borderLeftColor: MainColor.white,
borderRightWidth: 1,
borderRightColor: MainColor.white,
}}
>
<View style={{ alignItems: "center" }}>
<Ionicons
name="chatbox"
size={ICON_SIZE_MEDIUM}
color={MainColor.yellow}
/>
<Spacing height={10} />
<TextCustom size="small">Kabar Terbaru</TextCustom>
</View>
</Grid.Col>
<Grid.Col span={4}>
<View style={{ alignItems: "center" }}>
<MaterialIcons
name="transfer-within-a-station"
size={ICON_SIZE_MEDIUM}
color={MainColor.yellow}
/>
<Spacing height={10} />
<TextCustom size="small">Pencairan Dana</TextCustom>
</View>
</Grid.Col>
</Grid>
</View>
</>
);
}