89 lines
2.4 KiB
JavaScript
89 lines
2.4 KiB
JavaScript
// ExpensePage.js
|
|
import React from 'react';
|
|
import { View, Text, StyleSheet, ScrollView } from 'react-native';
|
|
|
|
const ExpensePage = () => {
|
|
// Data pengeluaran untuk pengelolaan sampah, bisa diganti dengan data dari API atau state global
|
|
const expenses = [
|
|
{ id: 1, description: 'Biaya Transportasi Pengangkutan Sampah', amount: 3000000 },
|
|
{ id: 2, description: 'Biaya Pemeliharaan TPS', amount: 1200000 },
|
|
{ id: 3, description: 'Gaji Petugas Pengelola Sampah', amount: 1500000 },
|
|
{ id: 4, description: 'Biaya Pengadaan Alat Pengelolaan Sampah', amount: 800000 },
|
|
{ id: 5, description: 'Biaya Sosialisasi Pengelolaan Sampah', amount: 500000 },
|
|
];
|
|
|
|
const totalExpense = expenses.reduce((total, expense) => total + expense.amount, 0);
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
<Text style={styles.header}>Halaman Pengeluaran Pengelolaan Sampah</Text>
|
|
<View style={styles.expensesList}>
|
|
{expenses.map((expense) => (
|
|
<View key={expense.id} style={styles.expenseItem}>
|
|
<Text style={styles.description}>{expense.description}</Text>
|
|
<Text style={styles.amount}>Rp {expense.amount.toLocaleString()}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
<View style={styles.totalContainer}>
|
|
<Text style={styles.totalText}>Total Pengeluaran Pengelolaan Sampah:</Text>
|
|
<Text style={styles.totalAmount}>Rp {totalExpense.toLocaleString()}</Text>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 20,
|
|
backgroundColor: '#f8f8f8',
|
|
},
|
|
header: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
expensesList: {
|
|
marginBottom: 20,
|
|
},
|
|
expenseItem: {
|
|
backgroundColor: '#fff',
|
|
padding: 15,
|
|
marginBottom: 10,
|
|
borderRadius: 5,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 5,
|
|
},
|
|
description: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
amount: {
|
|
fontSize: 16,
|
|
color: '#888',
|
|
},
|
|
totalContainer: {
|
|
backgroundColor: '#fff',
|
|
padding: 15,
|
|
borderRadius: 5,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 5,
|
|
},
|
|
totalText: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
},
|
|
totalAmount: {
|
|
fontSize: 18,
|
|
color: '#f00',
|
|
marginTop: 10,
|
|
},
|
|
});
|
|
|
|
export default ExpensePage;
|