// App.js import React, { useState, useEffect } from "react"; import { View, Text, TextInput, Button, FlatList, TouchableOpacity, Alert, } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import { FAB, Card, Title, Paragraph, Provider as PaperProvider, Appbar, } from "react-native-paper"; import { SearchBar } from "react-native-elements"; import Icon from "react-native-vector-icons/MaterialIcons"; import Animated, { useAnimatedStyle, withSpring, useSharedValue, } from "react-native-reanimated"; import { styles } from "./styles"; const HomeScreen = ({ navigation }) => { const [employees, setEmployees] = useState([]); const [search, setSearch] = useState(""); const [filteredEmployees, setFilteredEmployees] = useState([]); const [sortOrder, setSortOrder] = useState("asc"); const fabScale = useSharedValue(1); useEffect(() => { const defaultEmployees = [ { id: "1", empId: "EMP001", name: "Ramesh", position: "Software Engineer", }, { id: "2", empId: "EMP002", name: "Suresh", position: "Product Manager", }, { id: "3", empId: "EMP003", name: "Naresh", position: "UI/UX Designer", }, ]; setEmployees(defaultEmployees); }, []); useEffect(() => { const filtered = employees.filter((employee) => employee.name.toLowerCase().includes(search.toLowerCase()) ); setFilteredEmployees(filtered); }, [search, employees]); const handleSort = () => { const newOrder = sortOrder === "asc" ? "desc" : "asc"; setSortOrder(newOrder); const sortedEmployees = [...employees].sort((a, b) => { if (newOrder === "asc") { return a.name.localeCompare(b.name); } else { return b.name.localeCompare(a.name); } }); setEmployees(sortedEmployees); }; const deleteEmployee = (id) => { const updatedEmployees = employees.filter( (employee) => employee.id !== id ); setEmployees(updatedEmployees); }; const editEmployee = (id, updatedEmployee) => { const updatedEmployees = employees.map((employee) => employee.id === id ? updatedEmployee : employee ); setEmployees(updatedEmployees); }; const addEmployee = (newEmployee) => { if ( employees.some((employee) => employee.empId === newEmployee.empId) ) { Alert.alert("Error", "Employee with the same ID already exists."); } else { setEmployees([...employees, newEmployee]); navigation.goBack(); } }; const fabStyle = useAnimatedStyle(() => { return { transform: [{ scale: withSpring(fabScale.value) }], }; }); return ( <View style={styles.container}> <View style={styles.titleContainer}> <Icon name="people" size={24} color="white" style={styles.titleIcon} /> <Text style={styles.title}>GeeksforGeeks Emp Management</Text> </View> <Appbar.Header style={styles.appbar}> <SearchBar placeholder="Search Employees..." onChangeText={setSearch} value={search} lightTheme containerStyle={styles.searchBarContainer} inputContainerStyle={styles.searchBarInputContainer} /> <Appbar.Action icon={() => ( <Icon name="filter-alt" size={24} color="white" /> )} onPress={handleSort} /> </Appbar.Header> {(filteredEmployees.length === 0 && search !== "") || (employees.length === 0 && filteredEmployees.length === 0) ? ( <View style={styles.noRecordsContainer}> <Text>No records found</Text> </View> ) : ( <FlatList data={filteredEmployees} keyExtractor={(item) => item.id} renderItem={({ item }) => ( <Card style={styles.card}> <Card.Content> <Title>{item.name}</Title> <Paragraph>ID: {item.empId}</Paragraph> <Paragraph>Position: {item.position}</Paragraph> </Card.Content> <Card.Actions> <TouchableOpacity onPress={() => navigation.navigate("Edit", { employee: item, editEmployee: editEmployee, }) } > <Icon name="edit" size={24} color="#3498db" style={styles.actionIcon} /> </TouchableOpacity> <TouchableOpacity onPress={() => deleteEmployee(item.id)} > <Icon name="delete" size={24} color="#3498db" style={styles.actionIcon} /> </TouchableOpacity> </Card.Actions> </Card> )} style={styles.employeeList} /> )} <Animated.View style={[styles.fab, fabStyle]}> <FAB icon={() => <Icon name="add" size={24} color="white" />} onPress={() => { fabScale.value = 0.8; navigation.navigate("Add", { addEmployee: addEmployee, }); }} onStateChange={({ nativeEvent }) => { if (nativeEvent.state === 2) { fabScale.value = 1; } }} /> </Animated.View> </View> ); }; const AddEmpScreen = ({ route, navigation }) => { const [name, setName] = useState(""); const [position, setPosition] = useState(""); const [empId, setEmpId] = useState(""); const addEmployee = () => { if (!empId || !name || !position) { Alert.alert("Error", "Please fill in all the fields."); return; } const existingEmployees = route.params?.employees || []; if (existingEmployees.some((employee) => employee.empId === empId)) { Alert.alert("Error", "Employee with the same ID already exists."); } else { route.params?.addEmployee({ id: Date.now().toString(), empId, name, position, }); navigation.goBack(); } }; return ( <View style={styles.container}> <TextInput placeholder="Enter Employee ID" value={empId} onChangeText={(text) => setEmpId(text)} style={styles.input} /> <TextInput placeholder="Enter Name" value={name} onChangeText={(text) => setName(text)} style={styles.input} /> <TextInput placeholder="Enter Position" value={position} onChangeText={(text) => setPosition(text)} style={styles.input} /> <Button title="Add Employee" onPress={addEmployee} /> </View> ); }; const EditEmpScreen = ({ route, navigation }) => { const { employee, editEmployee } = route.params; const [empId, setEmpId] = useState(employee.empId); const [name, setName] = useState(employee.name); const [position, setPosition] = useState(employee.position); const saveChanges = () => { if (!empId || !name || !position) { Alert.alert("Error", "Please fill in all the fields."); return; } const existingEmployees = route.params?.employees || []; if ( existingEmployees.some( (emp) => emp.id !== employee.id && emp.empId === empId ) ) { Alert.alert("Error", "Employee with the same ID already exists."); } else { editEmployee(employee.id, { ...employee, empId, name, position }); navigation.goBack(); } }; return ( <View style={styles.container}> <TextInput placeholder="Enter Employee ID" value={empId} onChangeText={(text) => setEmpId(text)} style={styles.input} /> <TextInput placeholder="Enter Name" value={name} onChangeText={(text) => setName(text)} style={styles.input} /> <TextInput placeholder="Enter Position" value={position} onChangeText={(text) => setPosition(text)} style={styles.input} /> <Button title="Save Changes" onPress={saveChanges} /> </View> ); }; const Stack = createStackNavigator(); const App = () => { return ( <PaperProvider> <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Add" component={AddEmpScreen} /> <Stack.Screen name="Edit" component={EditEmpScreen} /> </Stack.Navigator> </NavigationContainer> </PaperProvider> ); }; export default App;