474 lines
13 KiB
JavaScript
474 lines
13 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
ImageBackground,
|
|
Dimensions,
|
|
Image,
|
|
ScrollView,
|
|
} from "react-native";
|
|
import {
|
|
Ionicons,
|
|
FontAwesome5,
|
|
MaterialCommunityIcons,
|
|
} from "@expo/vector-icons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import BottomTabAdmin from "../../Navigation/BottomTabAdmin";
|
|
import { LineChart } from "react-native-chart-kit";
|
|
|
|
const { width, height } = Dimensions.get("window");
|
|
|
|
const AdminScreen = () => {
|
|
const navigation = useNavigation();
|
|
const [activeSlide, setActiveSlide] = useState(0);
|
|
|
|
const data = {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May"], // Label untuk bulan
|
|
datasets: [
|
|
{
|
|
data: [5000000, 7000000, 4000000, 8000000, 6000000], // Data donasi per bulan
|
|
strokeWidth: 1, // Lebar garis
|
|
},
|
|
],
|
|
};
|
|
|
|
const handleNext = () => {
|
|
navigation.navigate(""); // Add the name of the screen to navigate
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ImageBackground
|
|
source={require("../../assets/images/bg.png")}
|
|
style={styles.backgroundImage}
|
|
>
|
|
{/* <Text style={styles.date}>05 Mei 2025</Text> */}
|
|
{/* Profile Section */}
|
|
|
|
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
|
<View style={styles.profileContainer}>
|
|
<Image
|
|
source={{
|
|
uri: "https://shanibacreative.com/wp-content/uploads/2022/10/SCI-0801220002_7-1280x1920.jpeg",
|
|
}} // Replace with your image URL
|
|
style={styles.profileImage}
|
|
/>
|
|
|
|
<Text style={styles.greetingnama}>
|
|
Halooo Dina {"\n"}
|
|
<Text style={styles.subtitle}>
|
|
Kebersihan Lingkungan Wajib Terjaga!
|
|
</Text>
|
|
</Text>
|
|
<Text style={styles.subtitle}></Text>
|
|
{/* <Text style={styles.greetingnama}>
|
|
Dinas Lingkungan Hidup{" "}
|
|
<Ionicons name="checkmark-circle" size={18} color="green" />
|
|
</Text> */}
|
|
</View>
|
|
{/* <View style={styles.header}> */}
|
|
|
|
<Text style={styles.subtitle}></Text>
|
|
<View style={styles.coinRow}>
|
|
<View style={styles.coinInfo}>
|
|
<View style={styles.coinBox}>
|
|
<Text style={styles.coinLabel}>JUMLAH DONASI</Text>
|
|
<View style={styles.coinValueRow}>
|
|
<Text style={styles.coinText}>Rp. 5.870.000</Text>
|
|
</View>
|
|
<Text style={styles.noCoinText}>Donasi dalam satu tahun</Text>
|
|
<TouchableOpacity
|
|
style={styles.historyButton}
|
|
onPress={() => navigation.navigate("RiwayatDonasiAdmin")}
|
|
>
|
|
<Text style={styles.historyButtonText}>RIWAYAT DONASI</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<View style={styles.coinInfo}>
|
|
<View style={styles.coinBox}>
|
|
<Text style={styles.coinLabel}>PENGELUARAN</Text>
|
|
<View style={styles.coinValueRow}>
|
|
<Text style={styles.coinText}>Rp. 3.270.000</Text>
|
|
</View>
|
|
<Text style={styles.noCoinText}>
|
|
Pengeluaran dalam satu bulan
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.historyButton}
|
|
onPress={() => navigation.navigate("RiwayatDonasiAdmin")}
|
|
>
|
|
<Text style={styles.historyButtonText}>
|
|
RIWAYAT PENGELUARAN
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.statsContainer}>
|
|
<View style={styles.statBox}>
|
|
<Text style={styles.statLabel}>Pengaduan</Text>
|
|
<Text style={styles.statValue}>102</Text>
|
|
</View>
|
|
|
|
<View style={styles.statBox}>
|
|
<Text style={styles.statLabel}>TPS di Nganjuk</Text>
|
|
<Text style={styles.statValue}>52</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.reportButton}
|
|
onPress={() => navigation.navigate("BerandaPengaduanAdmin")}
|
|
>
|
|
<Text style={styles.reportButtonText}>BERANDA PENGADUAN</Text>
|
|
</TouchableOpacity>
|
|
<View style={styles.menuContainer}>
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("DaftarTPSAdmin")}
|
|
>
|
|
<Ionicons
|
|
name="bookmarks"
|
|
size={40}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
<Text style={styles.menuText}>TPS di Nganjuk</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("Laporan")}
|
|
>
|
|
<MaterialCommunityIcons
|
|
name="file-document"
|
|
size={50}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
<Text style={styles.menuText}>Laporan</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("PosterEdukasiScreen")}
|
|
>
|
|
<FontAwesome5
|
|
name="chalkboard-teacher"
|
|
size={38}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
<Text style={styles.menuText}>Poster Edukasi</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => navigation.navigate("PengaduanSampahScreenAdmin")}
|
|
>
|
|
<FontAwesome5
|
|
name="exclamation-triangle"
|
|
size={40}
|
|
color="#2C6B2F"
|
|
style={styles.menuImage}
|
|
/>
|
|
<Text style={styles.menuText}>Pengaduan Sampah</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.chartContainer}>
|
|
<Text style={styles.chartTitle}>Grafik Donasi Bulanan</Text>
|
|
<LineChart
|
|
data={data}
|
|
width={width - 40} // Mengatur lebar grafik
|
|
height={220} // Mengatur tinggi grafik
|
|
chartConfig={{
|
|
backgroundColor: "#000",
|
|
backgroundGradientFrom: "#2C6B2F",
|
|
backgroundGradientTo: "#000",
|
|
decimalPlaces: 0, // Tidak ada angka desimal pada grafik
|
|
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
|
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
|
style: {
|
|
borderRadius: 16,
|
|
marginBottom: 40,
|
|
},
|
|
}}
|
|
style={styles.chartStyle}
|
|
/>
|
|
<Text style={styles.chartTitlebawah}>Grafik Donasi Bulanan</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</ImageBackground>
|
|
<BottomTabAdmin />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: "#2C6B2F", paddingTop: 20 },
|
|
scrollContainer: {
|
|
flexGrow: 1, // This ensures the ScrollView can expand to take up the remaining space
|
|
paddingHorizontal: 10,
|
|
backgroundColor: "#fff",
|
|
justifyContent: "flex-start",
|
|
// alignItems: "center",
|
|
borderBottomLeftRadius: 30,
|
|
borderTopStartRadius: 50,
|
|
borderBottomRightRadius: 30,
|
|
borderTopRightRadius: 50,
|
|
paddingBottom: 10,
|
|
marginTop: 170,
|
|
marginBottom: 150,
|
|
borderWidth: 1,
|
|
borderColor: "#cdcdcd", // Reduce this padding for better scrolling
|
|
},
|
|
chartContainer: {
|
|
paddingHorizontal: 20,
|
|
marginVertical: 20,
|
|
marginBottom: 20, // Reduced to avoid pushing the content down
|
|
},
|
|
profileContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "flex-start",
|
|
marginBottom: 20,
|
|
paddingHorizontal: 20,
|
|
},
|
|
profileImage: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 50,
|
|
marginRight: 10,
|
|
marginTop: 30,
|
|
},
|
|
chartTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
marginBottom: 10,
|
|
},
|
|
chartTitlebawah: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
marginBottom: 10,
|
|
},
|
|
chartStyle: {
|
|
borderRadius: 16,
|
|
marginBottom: 200,
|
|
},
|
|
header: {
|
|
flex: 1,
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
paddingHorizontal: 20,
|
|
backgroundColor: "#fff",
|
|
borderBottomLeftRadius: 30,
|
|
borderTopStartRadius: 50,
|
|
borderBottomRightRadius: 30,
|
|
borderTopRightRadius: 50,
|
|
paddingBottom: 50,
|
|
marginBottom: 50,
|
|
marginTop: 10,
|
|
},
|
|
date: {
|
|
fontSize: 18,
|
|
color: "#fff",
|
|
paddingHorizontal: 20,
|
|
marginBottom: 5,
|
|
alignItems: "center",
|
|
},
|
|
greeting: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
marginTop: 20,
|
|
color: "#000",
|
|
paddingHorizontal: 90,
|
|
// alignItems: "center",
|
|
// justifyContent: "center",
|
|
},
|
|
greetingnama: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
marginTop: 30,
|
|
marginLeft: -10,
|
|
color: "#000",
|
|
paddingHorizontal: 20,
|
|
flexDirection: "column",
|
|
},
|
|
subtitle: {
|
|
fontSize: 15,
|
|
color: "#000",
|
|
fontWeight: "500",
|
|
paddingHorizontal: 70,
|
|
marginBottom: -30,
|
|
marginTop: 5,
|
|
marginLeft: 20,
|
|
// justifyContent: "center",
|
|
},
|
|
coinRow: {
|
|
flexDirection: "column",
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
paddingHorizontal: 20,
|
|
marginTop: 0,
|
|
},
|
|
|
|
coinInfo: { alignItems: "flex-start" },
|
|
coinLabel: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
color: "#333",
|
|
marginBottom: 0,
|
|
marginLeft: -100,
|
|
},
|
|
coinBox: {
|
|
marginVertical: 10,
|
|
backgroundColor: "#fff",
|
|
paddingHorizontal: 130,
|
|
paddingVertical: 15,
|
|
borderRadius: 20,
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
elevation: 1,
|
|
borderWidth: 1,
|
|
borderColor: "#aaa",
|
|
position: "relative",
|
|
marginLeft: -5,
|
|
},
|
|
coinValueRow: { flexDirection: "row", alignItems: "center", marginTop: 0 },
|
|
coinText: {
|
|
fontSize: 30,
|
|
fontWeight: "bold",
|
|
color: "#333",
|
|
textAlign: "left",
|
|
marginLeft: -100,
|
|
marginBottom: 10,
|
|
},
|
|
noCoinText: {
|
|
fontSize: 12,
|
|
color: "#aaa",
|
|
marginTop: 0,
|
|
marginBottom: -5,
|
|
textAlign: "left",
|
|
marginLeft: -100,
|
|
},
|
|
statsContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
marginVertical: 0,
|
|
alignContent: "space-between",
|
|
padding: 0,
|
|
},
|
|
statBox: {
|
|
backgroundColor: "#fff",
|
|
padding: 15,
|
|
borderRadius: 15,
|
|
width: "30%",
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
borderWidth: 0.5,
|
|
justifyContent: "space-between",
|
|
marginRight: 12,
|
|
marginTop: 10,
|
|
},
|
|
statLabel: {
|
|
fontSize: 12,
|
|
justifyContent: "center",
|
|
color: "black",
|
|
alignItems: "center",
|
|
fontWeight: "600",
|
|
},
|
|
statValue: {
|
|
fontSize: 25,
|
|
fontWeight: "bold",
|
|
color: "#000",
|
|
},
|
|
historyButton: {
|
|
position: "absolute",
|
|
backgroundColor: "#2C6B2F",
|
|
borderColor: "#000",
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 10,
|
|
borderRadius: 20,
|
|
top: -6,
|
|
right: 10,
|
|
marginTop: 20,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: "110%",
|
|
elevation: 1,
|
|
},
|
|
historyButtonText: {
|
|
fontSize: 12,
|
|
fontWeight: "bold",
|
|
color: "#fff",
|
|
textAlign: "center",
|
|
},
|
|
|
|
reportButton: {
|
|
backgroundColor: "#fff",
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 10,
|
|
borderRadius: 20,
|
|
// alignItems: "center",
|
|
justifyContent: "center",
|
|
borderWidth: 0.5,
|
|
borderColor: "#000",
|
|
width: "80%",
|
|
marginTop: 15,
|
|
paddingLeft: 5,
|
|
padding: 15,
|
|
elevation: 2,
|
|
marginLeft: 40,
|
|
},
|
|
reportButtonText: {
|
|
fontSize: 16,
|
|
color: "#000",
|
|
fontWeight: "bold",
|
|
textAlign: "center",
|
|
padding: 5,
|
|
},
|
|
menuImage: {
|
|
width: 50,
|
|
height: 50,
|
|
marginLeft: 3,
|
|
marginBottom: 5,
|
|
marginTop: 10,
|
|
justifyContent: "center",
|
|
},
|
|
menuContainer: {
|
|
marginTop: 5,
|
|
marginRight: 5,
|
|
marginLeft: 12,
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
justifyContent: "space-evenly",
|
|
paddingRight: 15,
|
|
},
|
|
menuItem: {
|
|
width: "20%",
|
|
|
|
alignItems: "center",
|
|
marginVertical: 5,
|
|
padding: 10,
|
|
borderWidth: 0,
|
|
borderColor: "#fff",
|
|
borderRadius: 25,
|
|
backgroundColor: "#fff",
|
|
elevation: 2,
|
|
},
|
|
menuText: {
|
|
fontSize: 12,
|
|
fontWeight: "500",
|
|
color: "#333",
|
|
marginTop: 0,
|
|
textAlign: "center",
|
|
},
|
|
});
|
|
|
|
export default AdminScreen;
|