import React, { useState, useEffect } from "react";
import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";
import { useRouter } from "expo-router";
import { FontAwesome5, MaterialCommunityIcons } from "@expo/vector-icons";
export default function Dashboard() {
const router = useRouter();
const [currentDateTime, setCurrentDateTime] = useState(new Date());
const [loading, setLoading] = useState(false);
// Update time every second
useEffect(() => {
const timer = setInterval(() => {
setCurrentDateTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
// Placeholder sensor values (replace with real sensor data when available)
const waterQualityData = {
turbidity: "2.5 NTU",
tds: "150 ppm",
pH: "7.2",
temperature: "25°C",
};
return (
<View style={styles.container}>
{/* Date and Time Display */}
<View style={styles.calendarContainer}>
<Text style={styles.dateText}>
{currentDateTime.toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})}
</Text>
<Text style={styles.timeText}>
{currentDateTime.toLocaleTimeString("en-US")}
</Text>
</View>
{/* Dashboard Content */}
<Text style={styles.header}>Water Quality Dashboard</Text>
<Text style={styles.subText}>Monitoring key water parameters</Text>
{/* Water Quality Metrics */}
<View style={styles.metricsContainer}>
{/* Turbidity */}
<View style={styles.metric}>
<FontAwesome5 name="water" size={30} color="#1E90FF" />
<Text style={styles.metricLabel}>Turbidity</Text>
<Text style={styles.metricValue}>{waterQualityData.turbidity}</Text>
</View>
{/* Total Dissolved Solids (TDS) */}
<View style={styles.metric}>
<MaterialCommunityIcons name="water-outline" size={30} color="#00BFFF" />
<Text style={styles.metricLabel}>TDS</Text>
<Text style={styles.metricValue}>{waterQualityData.tds}</Text>
</View>
{/* pH Level */}
<View style={styles.metric}>
<MaterialCommunityIcons name="test-tube" size={30} color="#32CD32" />
<Text style={styles.metricLabel}>pH</Text>
<Text style={styles.metricValue}>{waterQualityData.pH}</Text>
</View>
{/* Temperature */}
<View style={styles.metric}>
<MaterialCommunityIcons name="thermometer" size={30} color="#FF4500" />
<Text style={styles.metricLabel}>Temperature</Text>
<Text style={styles.metricValue}>{waterQualityData.temperature}</Text>
</View>
<Text style={styles.parameter_results}>What parameter indicates {"\n"}...............................</Text>
</View>
{/* Navigation Buttons */}
<TouchableOpacity style={[styles.button, loading && styles.buttonDisabled]} onPress={() => router.push("./recentrecords")} disabled={loading}>
{loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.buttonText}>Go to Recent Records</Text>}
</TouchableOpacity>
<TouchableOpacity style={[styles.button, loading && styles.buttonDisabled]} onPress={() => router.push('./chatmessage')} disabled={loading}>
{loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.buttonText}>Chat with us</Text>}
</TouchableOpacity>
<TouchableOpacity style={[styles.button, loading && styles.buttonDisabled]} onPress={() => router.push('./admin')} disabled={loading}>
{loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.buttonText}>Admin</Text>}
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "center",
paddingHorizontal: 20,
backgroundColor: "rgb(38, 47, 41)", // Same background as Login
},
calendarContainer: {
backgroundColor: "#fff",
padding: 10,
borderRadius: 8,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
marginBottom: 40,
marginTop: 15,
marginLeft: 20,
},
dateText: {
fontSize: 16,
fontWeight: "bold",
color: "#333",
},
timeText: {
fontSize: 14,
color: "#666",
marginTop: 2,
},
header: {
fontSize: 30,
fontWeight: "bold",
color: "#fff",
marginBottom: 25,
textAlign: "center",
},
subText: {
fontSize: 18,
color: "#F4EAE6",
textAlign: "center",
},
metricsContainer: {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
alignItems: "center",
marginTop: 20,
},
metric: {
width: 140,
backgroundColor: "rgba(255, 255, 255, 0.2)",
alignItems: "center",
padding: 15,
margin: 10,
borderRadius: 10,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
metricLabel: {
fontSize: 16,
fontWeight: "bold",
marginTop: 5,
color: "#fff",
},
metricValue: {
fontSize: 14,
color: "#ddd",
marginTop: 2,
},
button: {
backgroundColor: "rgba(255, 255, 255, 0.2)",
paddingVertical: 14,
borderRadius: 10,
alignItems: "center",
marginTop: 10,
width: "80%",
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 3,
},
buttonDisabled: {
backgroundColor: "#6B5FAE",
},
buttonText: {
color: "#fff",
fontSize: 18,
fontWeight: "bold",
},
parameter_results: {
fontSize: 16,
color: "#fff",
marginTop: 50,
},
});
tell me features that i can add
Based on your current implementation, here are valuable features you could add to enhance your water quality monitoring dashboard:
Would you like me to elaborate on any specific feature from this list that you're particularly interested in implementing?
Here's a payment screen implementation that users will need to complete before accessing your dashboard:
I've created a comprehensive payment screen that will direct users to the dashboard after successful payment. Here are the key features:
This payment screen creates a professional onboarding experience that builds trust with users before they access your water quality monitoring dashboard. After successful payment, they'll be automatically directed to your dashboard screen.
Would you like me to explain how to integrate this with a real payment processor like Stripe or implement any additional features?