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

Invesment

Browse Source 
Add
- _master/status-transaction.ts
- investment/[id]/(transaction-flow)/success.tsx
- investment/[id]/(transaction-flow)/failed.tsx

Fix:
- lib/dummy-data/_master/status.tsx

Component:
- components/Badge/BadgeCustom.tsx: Penambahan custom color

## No Issue
This commit is contained in:
Bagasbanuna02
2025-08-01 11:35:39 +08:00
parent 8e31df660a
commit 16462c4214
14 changed files with 317 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -287,7 +287,16 @@ export default function UserLayout() {
name="investment/[id]/(transaction-flow)/invoice"
options={{
title: "Invoice",
headerLeft: () => <BackButton />,
headerLeft: () => (
<Ionicons
name="close"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
onPress={() =>
router.navigate(`/investment/(tabs)/transaction`)
}
/>
),
}}
/>
<Stack.Screen
@@ -299,11 +308,27 @@ export default function UserLayout() {
name="close"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
onPress={() => router.navigate(`/investment/(tabs)/transaction`)}
onPress={() =>
router.navigate(`/investment/(tabs)/transaction`)
}
/>
),
}}
/>
<Stack.Screen
name="investment/[id]/(transaction-flow)/success"
options={{
title: "Transaksi Berhasil",
headerLeft: () => <BackButton />,
}}
/>
<Stack.Screen
name="investment/[id]/(transaction-flow)/failed"
options={{
title: "Transaksi Gagal",
headerLeft: () => <BackButton />,
}}
/>
{/* ========== End Investment Section ========= */}

14
app/(application)/(user)/event/(tabs)/status.tsx
View File

@@ -1,12 +1,12 @@
import {
BoxWithHeaderSection,
Grid,
ScrollableCustom,
StackCustom,
TextCustom
BoxWithHeaderSection,
Grid,
ScrollableCustom,
StackCustom,
TextCustom
} from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { masterStatus } from "@/lib/dummy-data/_master/status";
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
import { useState } from "react";
export default function EventStatus() {
@@ -23,7 +23,7 @@ export default function EventStatus() {
const scrollComponent = (
<ScrollableCustom
data={masterStatus.map((e, i) => ({
data={dummyMasterStatus.map((e, i) => ({
id: i,
label: e.label,
value: e.value,

4
app/(application)/(user)/investment/(tabs)/portofolio.tsx
View File

@@ -1,5 +1,5 @@
import { ScrollableCustom, ViewWrapper } from "@/components";
import { masterStatus } from "@/lib/dummy-data/_master/status";
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
import Investment_StatusBox from "@/screens/Invesment/StatusBox";
import { useState } from "react";
@@ -15,7 +15,7 @@ export default function InvestmentPortofolio() {
const scrollComponent = (
<ScrollableCustom
data={masterStatus.map((e, i) => ({
data={dummyMasterStatus.map((e, i) => ({
id: i,
label: e.label,
value: e.value,

36
app/(application)/(user)/investment/(tabs)/transaction.tsx
View File

@@ -6,15 +6,43 @@ import {
TextCustom,
ViewWrapper,
} from "@/components";
import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
import { GStyles } from "@/styles/global-styles";
import dayjs from "dayjs";
import { router } from "expo-router";
import { View } from "react-native";
export default function InvestmentTransaction() {
const randomStatusData = Array.from({ length: 10 }, () => {
const randomIndex = Math.floor(
Math.random() * dummyMasterStatusTransaction.length
);
return dummyMasterStatusTransaction[randomIndex];
});
const handlePress = (value: string) => {
if (value === "menunggu") {
router.push(`/investment/${value}/(transaction-flow)/invoice`);
} else if (value === "proses") {
router.push(`/investment/${value}/(transaction-flow)/process`);
} else if (value === "berhasil") {
router.push(`/investment/${value}/(transaction-flow)/success`);
} else if (value === "gagal") {
router.push(`/investment/${value}/(transaction-flow)/failed`);
}
};
return (
<ViewWrapper hideFooter>
{Array.from({ length: 10 }).map((_, i) => (
<BaseBox key={i} paddingTop={7} paddingBottom={7}>
{randomStatusData.map((item, i) => (
<BaseBox
key={i}
paddingTop={7}
paddingBottom={7}
onPress={() => {
handlePress(item.value);
}}
>
<Grid>
<Grid.Col span={6}>
<StackCustom gap={"xs"}>
@@ -38,10 +66,10 @@ export default function InvestmentTransaction() {
</TextCustom>
<BadgeCustom
variant="light"
color="success"
color={item.color}
style={GStyles.alignSelfFlexEnd}
>
Berhasil
{item.label}
</BadgeCustom>
</StackCustom>
</Grid.Col>

79
app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { BaseBox, Grid, Spacing, StackCustom, TextCustom, ViewWrapper } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { GStyles } from "@/styles/global-styles";
import { FontAwesome6 } from "@expo/vector-icons";
export default function InvestmentFailed() {
return (
<ViewWrapper>
<StackCustom>
<BaseBox>
<StackCustom>
<TextCustom bold align="center">
Transaksi anda gagal karena bukti transfer tidak sesuai dengan
data kami. Jika ini masalah khusus silahkan hubungi pada kontak
whatsapp kami.
</TextCustom>
<FontAwesome6
name="whatsapp"
size={50}
color={MainColor.green}
style={GStyles.alignSelfCenter}
/>
</StackCustom>
</BaseBox>
<BaseBox>
<TextCustom bold align="center" size="large">
Detail Transaksi
</TextCustom>
<Spacing />
<StackCustom>
{listData.map((item, i) => (
<Grid key={i}>
<Grid.Col span={5}>
<TextCustom bold>{item.label}</TextCustom>
</Grid.Col>
<Grid.Col span={7}>
<TextCustom style={{ paddingLeft: 10 }}>
{item.value}
</TextCustom>
</Grid.Col>
</Grid>
))}
</StackCustom>
</BaseBox>
</StackCustom>
</ViewWrapper>
);
}
const listData = [
{
label: "Bank",
value: " BCA",
},
{
label: "Rekening Penerima",
value: "Himpunan Pengusaha Muda Indonesia",
},
{
label: "No Rekening",
value: "2304235678854332",
},
{
label: "Jumlah",
value: "Rp. 1.000.000",
},
{
label: "Tanggal",
value: "2022-01-01",
},
{
label: "Lembar Terbeli",
value: "100",
},
];

41
app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx
View File

@@ -1,19 +1,19 @@
import {
BaseBox,
ButtonCenteredOnly,
ButtonCustom,
Grid,
InformationBox,
Spacing,
StackCustom,
TextCustom,
ViewWrapper
BaseBox,
ButtonCenteredOnly,
ButtonCustom,
Grid,
InformationBox,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { router, useLocalSearchParams } from "expo-router";
export default function InvestmentInvoice() {
const { id } = useLocalSearchParams();
const { id } = useLocalSearchParams();
return (
<>
<ViewWrapper>
@@ -84,19 +84,26 @@ export default function InvestmentInvoice() {
<BaseBox>
<StackCustom>
<TextCustom>Upload bukti transfer anda.</TextCustom>
<ButtonCenteredOnly onPress={() => {
router.push("/(application)/(image)/take-picture/123")
}} icon="upload">
<ButtonCenteredOnly
onPress={() => {
router.push("/(application)/(image)/take-picture/123");
}}
icon="upload"
>
Upload
</ButtonCenteredOnly>
</StackCustom>
</BaseBox>
<ButtonCustom onPress={() => {
router.push(`/investment/${id}/(transaction-flow)/process`)
}}>Saya Sudah Transfer</ButtonCustom>
<ButtonCustom
onPress={() => {
router.push(`/investment/${id}/(transaction-flow)/process`);
}}
>
Saya Sudah Transfer
</ButtonCustom>
</StackCustom>
<Spacing/>
</ViewWrapper>
</>
);

36
app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx
View File

@@ -1,11 +1,43 @@
import { BaseBox, TextCustom, ViewWrapper } from "@/components";
import {
BaseBox,
Grid,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native";
export default function InvestmentProcess() {
return (
<>
<ViewWrapper>
<BaseBox>
<TextCustom align="center">Menunggu Konfirmasi Admin</TextCustom>
<StackCustom>
<TextCustom align="center" bold>
Admin sedang memproses transaksimu
</TextCustom>
<ActivityIndicator size="large" color={MainColor.yellow} />
</StackCustom>
</BaseBox>
<BaseBox>
<Grid>
<Grid.Col span={10} style={{justifyContent: 'center'}}>
<TextCustom size="small">
Hubungi admin jika tidak kunjung di proses! Klik pada logo
Whatsapp ini.
</TextCustom>
</Grid.Col>
<Grid.Col span={2} style={{alignItems: "flex-end"}}>
<Ionicons
name="logo-whatsapp"
size={50}
color={MainColor.green}
/>
</Grid.Col>
</Grid>
</BaseBox>
</ViewWrapper>
</>

9
app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx
View File

@@ -1,4 +1,9 @@
import { BaseBox, BoxButtonOnFooter, ButtonCustom, ViewWrapper } from "@/components";
import {
BaseBox,
BoxButtonOnFooter,
ButtonCustom,
ViewWrapper,
} from "@/components";
import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
import { router, useLocalSearchParams } from "expo-router";
@@ -13,7 +18,7 @@ export default function InvestmentSelectBank() {
<>
<BoxButtonOnFooter>
<ButtonCustom
onPress={() => router.push(`/investment/${id}/invoice`)}
onPress={() => router.replace(`/investment/${id}/invoice`)}
>
Pilih
</ButtonCustom>

84
app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx Normal file
View File

@@ -0,0 +1,84 @@
import {
BaseBox,
Grid,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { GStyles } from "@/styles/global-styles";
import { FontAwesome6 } from "@expo/vector-icons";
export default function InvestmentSuccess() {
return (
<ViewWrapper>
<StackCustom>
<BaseBox>
<StackCustom>
<FontAwesome6
name="money-bill-wave"
size={100}
color={MainColor.green}
style={GStyles.alignSelfCenter}
/>
<TextCustom bold align="center">
Terimakasih telah percaya pada kami untuk mengelola dana anda!
Info mengenai update Investasi ini bisa di lihat di kolom berita.
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<TextCustom bold align="center" size="large">
Detail Transaksi
</TextCustom>
<Spacing/>
<StackCustom>
{listData.map((item, i) => (
<Grid key={i}>
<Grid.Col span={5}>
<TextCustom bold>{item.label}</TextCustom>
</Grid.Col>
<Grid.Col span={7}>
<TextCustom style={{paddingLeft: 10}}>{item.value}</TextCustom>
</Grid.Col>
</Grid>
))}
</StackCustom>
</BaseBox>
</StackCustom>
</ViewWrapper>
);
}
const listData = [
{
label: "Bank",
value: " BCA",
},
{
label: "Rekening Penerima",
value: "Himpunan Pengusaha Muda Indonesia",
},
{
label: "No Rekening",
value: "2304235678854332",
},
{
label: "Jumlah",
value: "Rp. 1.000.000",
},
{
label: "Tanggal",
value: "2022-01-01",
},
{
label: "Lembar Terbeli",
value: "100",
},
];

12
app/(application)/(user)/job/(tabs)/status.tsx
View File

@@ -1,10 +1,10 @@
import {
BaseBox,
ScrollableCustom,
TextCustom,
ViewWrapper,
BaseBox,
ScrollableCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { masterStatus } from "@/lib/dummy-data/_master/status";
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
import { jobDataDummy } from "@/screens/Job/listDataDummy";
import { useState } from "react";
@@ -20,7 +20,7 @@ export default function JobStatus() {
const scrollComponent = (
<ScrollableCustom
data={masterStatus.map((e, i) => ({
data={dummyMasterStatus.map((e, i) => ({
id: i,
label: e.label,
value: e.value,

4
app/(application)/(user)/voting/(tabs)/status.tsx
View File

@@ -6,7 +6,7 @@ import {
TextCustom,
ViewWrapper,
} from "@/components";
import { masterStatus } from "@/lib/dummy-data/_master/status";
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
import dayjs from "dayjs";
import { useState } from "react";
@@ -22,7 +22,7 @@ export default function VotingStatus() {
const scrollComponent = (
<ScrollableCustom
data={masterStatus.map((e, i) => ({
data={dummyMasterStatus.map((e, i) => ({
id: i,
label: e.label,
value: e.value,

8
components/Badge/BadgeCustom.tsx
View File

@@ -21,7 +21,7 @@ type BadgeSize = "xs" | "sm" | "md" | "lg";
interface BadgeProps extends ViewProps {
children: React.ReactNode;
variant?: BadgeVariant;
color?: BadgeColor;
color?: BadgeColor | string;
size?: BadgeSize;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
@@ -43,7 +43,8 @@ const BadgeCustom: React.FC<BadgeProps> = ({
style,
...props
}) => {
const colors = {
// Daftar warna bawaan
const defaultColors = {
primary: "#339AF0",
success: "#40C057",
warning: "#FAB005",
@@ -52,8 +53,7 @@ const BadgeCustom: React.FC<BadgeProps> = ({
dark: "#212529",
};
const themeColor = colors[color];
const themeColor = color in defaultColors ? defaultColors[color as BadgeColor] : color;
// Ganti bagian sizeStyles dan styles.container
const sizeStyles = {
xs: {

8
lib/dummy-data/_master/status-transaction.ts Normal file
View File

@@ -0,0 +1,8 @@
import { AccentColor, MainColor } from "@/constants/color-palet";
export const dummyMasterStatusTransaction = [
{ value: "berhasil", label: "Berhasil", color: MainColor.green },
{ value: "proses", label: "Proses", color: AccentColor.skyblue },
{ value: "menunggu", label: "Menunggu", color: MainColor.yellow },
{ value: "gagal", label: "Gagal", color: MainColor.red },
];

2
lib/dummy-data/_master/status.tsx
View File

@@ -1,4 +1,4 @@
export const masterStatus = [
export const dummyMasterStatus = [
{ value: "publish", label: "Publish" },
{ value: "review", label: "Review" },
{ value: "draft", label: "Draft" },