import React, { useState } from 'react'; import { View, Text, SafeAreaView, ScrollView, TouchableOpacity, Image, Modal } from 'react-native'; import MapView, { Marker } from 'react-native-maps'; import { Ionicons } from '@expo/vector-icons';

const HomePage = () => {
  const [isModalVisible, setIsModalVisible] = useState(false); const [selectedChallan, setSelectedChallan] = useState(null);

  const currentSpeed = 80; const deviceStatus = 'Active'; const lastActiveTime = '2023-04-14 10:30 AM';

  const alerts = { generated: 5, pending: 2, overspeedingRate: 12, };

  const challans = [{ id: 1, date: '2023-04-12', time: '15:30', location: 'Main St, City', speed: 75, amount: 100 }, { id: 2, date: '2023-04-10', time: '10:15', location: 'Highway 1, Town', speed: 90, amount: 200 },];

  const handleChallanPress = (challan) => { setSelectedChallan(challan); setIsModalVisible(true); };

  return ( <SafeAreaView className="flex-1 bg-gray-900 pt-12"> <View className="bg-gray-800 py-4 px-6 flex-row justify-between items-center"> <Text className="text-xl font-bold text-white">Welcome</Text> <TouchableOpacity onPress={handleLogout}> <Ionicons name="logout" size={24} color="white" /> </TouchableOpacity> </View>

<ScrollView contentContainerStyle="flex-grow pt-5"> <View className="p-4"> <View className="flex-column mb-4 justify-center"> <View className="bg-gray-700 rounded-lg p-4 mr-4 flex-1 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Speed</Text> <View className="flex-row items-center justify-center"> <Text className="text-5xl font-bold text-white">{currentSpeed}</Text> <Text className="ml-4 text-2xl font-semibold text-white">km/h</Text> </View> </View> <View className="flex-1 space-y-4"> <View className="bg-gray-700 rounded-lg p-4 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Alerts</Text> <Text className="text-4xl font-bold text-yellow-400">{alerts.generated}</Text> </View> <View className="bg-gray-700 rounded-lg p-4 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Challans</Text> <Text className="text-4xl font-bold text-red-500">{alerts.pending}</Text> </View> <View className="bg-gray-700 rounded-lg p-4 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Overspeeding</Text> <Text className="text-4xl font-bold text-red-500">{alerts.overspeedingRate}%</Text> </View> </View> </View> <View className="bg-gray-800 rounded-lg p-4 mb-6 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Location</Text> <MapView className="h-48 rounded-lg" region={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} style={{ borderRadius: 8 }} > <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} title="Vehicle Location" pinColor="blue" /> </MapView> </View> </View> <View className="bg-gray-800 rounded-lg p-4 mb-6 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Recent Challans</Text> {challans.map((challan) => ( <TouchableOpacity key={challan.id} className="bg-gray-700 rounded-lg p-4 mb-2 flex-row justify-between items-center" onPress={() => handleChallanPress(challan)} > <View> <Text className="text-white font-semibold">{challan.location}</Text> <Text className="text-gray-400 text-sm">{challan.date} {challan.time}</Text> </View> <View className="flex-row items-center"> <Ionicons name="speedometer" size={20} color="white" /> <Text className="text-white ml-2">{challan.speed} km/h</Text> </View> <Text className="text-white font-semibold">${challan.amount}</Text> </TouchableOpacity> ))} </View> <View className="bg-gray-800 rounded-lg p-4 mb-6 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Vehicle Information</Text> <View className="flex-row items-center justify-between"> <View> <Text className="text-white font-semibold">ABC123</Text> <Text className="text-gray-400 text-sm">License Plate</Text> </View> <View> <Text className="text-white font-semibold">Toyota Camry</Text> <Text className="text-gray-400 text-sm">2020</Text> </View> <View className="flex-row items-center"> <Ionicons name="radio-button-on" size={20} color={deviceStatus === 'Active' ? 'green' : 'red'} /> <Text className="text-white ml-2">{deviceStatus}</Text> </View> </View> </View> </View> </ScrollView>
<Modal visible={isModalVisible} animationType="slide" transparent={true} onRequestClose={() => setIsModalVisible(false)}

<View className="flex-1 justify-center items-center bg-black bg-opacity-50"> <View className="bg-gray-800 rounded-lg p-4 shadow-lg"> <Text className="text-lg font-semibold text-white mb-2">Challan Details</Text> {selectedChallan && ( <View> <Text className="text-white">Date: {selectedChallan.date}</Text> <Text className="text-white">Time: {selectedChallan.time}</Text> <Text className="text-white">Location: {selectedChallan.location}</Text> <Text className="text-white">Speed: {selectedChallan.speed} km/h</Text> <Text className="text-white">Amount: ${selectedChallan.amount}</Text> </View> )} <TouchableOpacity onPress={() => setIsModalVisible(false)} className="bg-red-500 py-2 px-4 rounded-lg mt-4" > <Text className="text-white font-bold">Close</Text> </TouchableOpacity> </View> </View> </Modal > </SafeAreaView > );
};
export default HomePage; redesign the code