166 lines
3.3 KiB
TypeScript
166 lines
3.3 KiB
TypeScript
import { View, Text, StyleSheet, ScrollView } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
export default function HistoryScreen() {
|
|
const transactions = [
|
|
{
|
|
id: 1,
|
|
title: "Gaji Bulanan",
|
|
amount: "Rp 5.000.000",
|
|
type: "income",
|
|
date: "12 April 2026",
|
|
icon: "wallet",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Makan Siang",
|
|
amount: "Rp 50.000",
|
|
type: "expense",
|
|
date: "13 April 2026",
|
|
icon: "restaurant",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Transport",
|
|
amount: "Rp 20.000",
|
|
type: "expense",
|
|
date: "14 April 2026",
|
|
icon: "car",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Freelance Project",
|
|
amount: "Rp 1.500.000",
|
|
type: "income",
|
|
date: "15 April 2026",
|
|
icon: "briefcase",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
<Text style={styles.title}>Riwayat Transaksi</Text>
|
|
<Text style={styles.subtitle}>
|
|
Semua pemasukan dan pengeluaran kamu
|
|
</Text>
|
|
|
|
{transactions.map((item) => (
|
|
<View key={item.id} style={styles.card}>
|
|
<View style={styles.leftSection}>
|
|
<View
|
|
style={[
|
|
styles.iconContainer,
|
|
item.type === "income"
|
|
? styles.incomeBg
|
|
: styles.expenseBg,
|
|
]}
|
|
>
|
|
<Ionicons
|
|
name={item.icon as any}
|
|
size={22}
|
|
color={item.type === "income" ? "#16A34A" : "#DC2626"}
|
|
/>
|
|
</View>
|
|
|
|
<View>
|
|
<Text style={styles.transactionTitle}>{item.title}</Text>
|
|
<Text style={styles.transactionDate}>{item.date}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text
|
|
style={[
|
|
styles.amount,
|
|
item.type === "income"
|
|
? styles.incomeText
|
|
: styles.expenseText,
|
|
]}
|
|
>
|
|
{item.type === "income" ? "+" : "-"} {item.amount}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#F5F7FA",
|
|
padding: 20,
|
|
paddingTop: 55,
|
|
},
|
|
|
|
title: {
|
|
fontSize: 30,
|
|
fontWeight: "bold",
|
|
marginBottom: 6,
|
|
},
|
|
|
|
subtitle: {
|
|
fontSize: 15,
|
|
color: "#666",
|
|
marginBottom: 28,
|
|
},
|
|
|
|
card: {
|
|
backgroundColor: "#FFFFFF",
|
|
borderRadius: 18,
|
|
padding: 18,
|
|
marginBottom: 16,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 6,
|
|
elevation: 3,
|
|
},
|
|
|
|
leftSection: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 14,
|
|
},
|
|
|
|
iconContainer: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 14,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
|
|
incomeBg: {
|
|
backgroundColor: "#DCFCE7",
|
|
},
|
|
|
|
expenseBg: {
|
|
backgroundColor: "#FEE2E2",
|
|
},
|
|
|
|
transactionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
marginBottom: 4,
|
|
},
|
|
|
|
transactionDate: {
|
|
fontSize: 13,
|
|
color: "#777",
|
|
},
|
|
|
|
amount: {
|
|
fontSize: 15,
|
|
fontWeight: "700",
|
|
},
|
|
|
|
incomeText: {
|
|
color: "#16A34A",
|
|
},
|
|
|
|
expenseText: {
|
|
color: "#DC2626",
|
|
},
|
|
}); |