From 16462c42149f3123ba679659ddeeff2bbd85bf5c Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Fri, 1 Aug 2025 11:35:39 +0800 Subject: [PATCH] Invesment 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 --- app/(application)/(user)/_layout.tsx | 29 ++++++- .../(user)/event/(tabs)/status.tsx | 14 ++-- .../(user)/investment/(tabs)/portofolio.tsx | 4 +- .../(user)/investment/(tabs)/transaction.tsx | 36 +++++++- .../[id]/(transaction-flow)/failed.tsx | 79 +++++++++++++++++ .../[id]/(transaction-flow)/invoice.tsx | 41 +++++---- .../[id]/(transaction-flow)/process.tsx | 36 +++++++- .../[id]/(transaction-flow)/select-bank.tsx | 9 +- .../[id]/(transaction-flow)/success.tsx | 84 +++++++++++++++++++ .../(user)/job/(tabs)/status.tsx | 12 +-- .../(user)/voting/(tabs)/status.tsx | 4 +- components/Badge/BadgeCustom.tsx | 8 +- lib/dummy-data/_master/status-transaction.ts | 8 ++ lib/dummy-data/_master/status.tsx | 2 +- 14 files changed, 317 insertions(+), 49 deletions(-) create mode 100644 app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx create mode 100644 app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx create mode 100644 lib/dummy-data/_master/status-transaction.ts diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx index e8ed068..5a5a328 100644 --- a/app/(application)/(user)/_layout.tsx +++ b/app/(application)/(user)/_layout.tsx @@ -287,7 +287,16 @@ export default function UserLayout() { name="investment/[id]/(transaction-flow)/invoice" options={{ title: "Invoice", - headerLeft: () => , + headerLeft: () => ( + + router.navigate(`/investment/(tabs)/transaction`) + } + /> + ), }} /> router.navigate(`/investment/(tabs)/transaction`)} + onPress={() => + router.navigate(`/investment/(tabs)/transaction`) + } /> ), }} /> + , + }} + /> + , + }} + /> {/* ========== End Investment Section ========= */} diff --git a/app/(application)/(user)/event/(tabs)/status.tsx b/app/(application)/(user)/event/(tabs)/status.tsx index 86cccc5..1605185 100644 --- a/app/(application)/(user)/event/(tabs)/status.tsx +++ b/app/(application)/(user)/event/(tabs)/status.tsx @@ -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 = ( ({ + data={dummyMasterStatus.map((e, i) => ({ id: i, label: e.label, value: e.value, diff --git a/app/(application)/(user)/investment/(tabs)/portofolio.tsx b/app/(application)/(user)/investment/(tabs)/portofolio.tsx index 17e31e1..32c2aa3 100644 --- a/app/(application)/(user)/investment/(tabs)/portofolio.tsx +++ b/app/(application)/(user)/investment/(tabs)/portofolio.tsx @@ -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 = ( ({ + data={dummyMasterStatus.map((e, i) => ({ id: i, label: e.label, value: e.value, diff --git a/app/(application)/(user)/investment/(tabs)/transaction.tsx b/app/(application)/(user)/investment/(tabs)/transaction.tsx index c5688b9..bf8d5ac 100644 --- a/app/(application)/(user)/investment/(tabs)/transaction.tsx +++ b/app/(application)/(user)/investment/(tabs)/transaction.tsx @@ -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 ( - {Array.from({ length: 10 }).map((_, i) => ( - + {randomStatusData.map((item, i) => ( + { + handlePress(item.value); + }} + > @@ -38,10 +66,10 @@ export default function InvestmentTransaction() { - Berhasil + {item.label} diff --git a/app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx b/app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx new file mode 100644 index 0000000..9b10578 --- /dev/null +++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx @@ -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 ( + + + + + + Transaksi anda gagal karena bukti transfer tidak sesuai dengan + data kami. Jika ini masalah khusus silahkan hubungi pada kontak + whatsapp kami. + + + + + + + + + Detail Transaksi + + + + + + {listData.map((item, i) => ( + + + {item.label} + + + + {item.value} + + + + ))} + + + + + ); +} + +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", + }, +]; diff --git a/app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx b/app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx index ce773d5..6ce95c7 100644 --- a/app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx +++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx @@ -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 ( <> @@ -84,19 +84,26 @@ export default function InvestmentInvoice() { Upload bukti transfer anda. - { - router.push("/(application)/(image)/take-picture/123") - }} icon="upload"> + { + router.push("/(application)/(image)/take-picture/123"); + }} + icon="upload" + > Upload - { - router.push(`/investment/${id}/(transaction-flow)/process`) - - }}>Saya Sudah Transfer + { + router.push(`/investment/${id}/(transaction-flow)/process`); + }} + > + Saya Sudah Transfer + + ); diff --git a/app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx b/app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx index c2d8653..eec7c2b 100644 --- a/app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx +++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx @@ -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 ( <> - Menunggu Konfirmasi Admin + + + Admin sedang memproses transaksimu + + + + + + + + + + Hubungi admin jika tidak kunjung di proses! Klik pada logo + Whatsapp ini. + + + + + + diff --git a/app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx b/app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx index 4111083..04c5863 100644 --- a/app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx +++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx @@ -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() { <> router.push(`/investment/${id}/invoice`)} + onPress={() => router.replace(`/investment/${id}/invoice`)} > Pilih diff --git a/app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx b/app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx new file mode 100644 index 0000000..a087ecb --- /dev/null +++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx @@ -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 ( + + + + + + + + Terimakasih telah percaya pada kami untuk mengelola dana anda! + Info mengenai update Investasi ini bisa di lihat di kolom berita. + + + + + + + Detail Transaksi + + + + + + + {listData.map((item, i) => ( + + + {item.label} + + + {item.value} + + + ))} + + + + + ); +} + +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", + }, +]; diff --git a/app/(application)/(user)/job/(tabs)/status.tsx b/app/(application)/(user)/job/(tabs)/status.tsx index 3b32962..e54f6cc 100644 --- a/app/(application)/(user)/job/(tabs)/status.tsx +++ b/app/(application)/(user)/job/(tabs)/status.tsx @@ -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 = ( ({ + data={dummyMasterStatus.map((e, i) => ({ id: i, label: e.label, value: e.value, diff --git a/app/(application)/(user)/voting/(tabs)/status.tsx b/app/(application)/(user)/voting/(tabs)/status.tsx index 006dae6..01ad922 100644 --- a/app/(application)/(user)/voting/(tabs)/status.tsx +++ b/app/(application)/(user)/voting/(tabs)/status.tsx @@ -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 = ( ({ + data={dummyMasterStatus.map((e, i) => ({ id: i, label: e.label, value: e.value, diff --git a/components/Badge/BadgeCustom.tsx b/components/Badge/BadgeCustom.tsx index eada0c7..7c65e63 100644 --- a/components/Badge/BadgeCustom.tsx +++ b/components/Badge/BadgeCustom.tsx @@ -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 = ({ style, ...props }) => { - const colors = { + // Daftar warna bawaan + const defaultColors = { primary: "#339AF0", success: "#40C057", warning: "#FAB005", @@ -52,8 +53,7 @@ const BadgeCustom: React.FC = ({ 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: { diff --git a/lib/dummy-data/_master/status-transaction.ts b/lib/dummy-data/_master/status-transaction.ts new file mode 100644 index 0000000..36923f2 --- /dev/null +++ b/lib/dummy-data/_master/status-transaction.ts @@ -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 }, +]; diff --git a/lib/dummy-data/_master/status.tsx b/lib/dummy-data/_master/status.tsx index e5f7068..6994397 100644 --- a/lib/dummy-data/_master/status.tsx +++ b/lib/dummy-data/_master/status.tsx @@ -1,4 +1,4 @@ -export const masterStatus = [ +export const dummyMasterStatus = [ { value: "publish", label: "Publish" }, { value: "review", label: "Review" }, { value: "draft", label: "Draft" },