//EmployeeRegistrationForm.js // Import required React Native components and libraries import React, { useState, useRef, useEffect } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, Dimensions, KeyboardAvoidingView, Platform, Alert, Modal, ActivityIndicator, Image, PermissionsAndroid } from 'react-native'; import DateTimePicker from '@react-native-community/datetimepicker'; import Icon from 'react-native-vector-icons/FontAwesome'; import { Camera } from 'react-native-vision-camera'; import { useCameraDevice, useCameraPermission } from 'react-native-vision-camera'; // Get window dimensions for responsive design const windowWidth = Dimensions.get('window').width; // API endpoint for employee registration const API_URL = 'http://192.168.1.2/api/Attendance/register_employee.php'; // Main component for employee registration const EmployeeRegistrationForm = ({ navigation }) => { // State management for form data and UI const [formData, setFormData] = useState({ employeeId: '', employeeName: '', designation: '', dateOfJoining: new Date().toISOString().split('T')[0], password: '', }); const [showDatePicker, setShowDatePicker] = useState(false); const [loading, setLoading] = useState(false); const [isCapturing, setIsCapturing] = useState(false); const [captureProgress, setCaptureProgress] = useState(0); const [showCamera, setShowCamera] = useState(false); const [capturedImages, setCapturedImages] = useState([]); const [currentImage, setCurrentImage] = useState(null); const [hasCameraPermission, setHasCameraPermission] = useState(false); const [captureInstructions, setCaptureInstructions] = useState( 'Please look straight at the camera' ); // Camera references and device setup const camera = useRef(null); const device = useCameraDevice('front'); const { hasPermission, requestPermission } = useCameraPermission(); // Check and request camera permissions on component mount useEffect(() => { const checkPermissions = async () => { try { if (Platform.OS === 'android') { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { title: 'Camera Permission', message: 'App needs access to your camera', buttonNeutral: 'Ask Me Later', buttonNegative: 'Cancel', buttonPositive: 'OK', } ); setHasCameraPermission(granted === PermissionsAndroid.RESULTS.GRANTED); } else { const permissionGranted = await requestPermission(); setHasCameraPermission(permissionGranted); } } catch (err) { console.warn('Permission error:', err); } }; checkPermissions(); }, []); // Handle form submission const handleSubmit = async () => { const { employeeId, employeeName, designation, dateOfJoining, password } = formData; // Validate all fields are filled if (!employeeId || !employeeName || !designation || !dateOfJoining || !password) { Alert.alert('Validation Error', 'Please fill in all fields.'); return; } // Check camera permission if (!hasCameraPermission) { Alert.alert('Permission Required', 'Camera permission is needed for face registration.'); return; } // Show camera for face capture setShowCamera(true); }; // Capture multiple face images with different expressions const captureFaceImages = async () => { setIsCapturing(true); setCapturedImages([]); setCaptureProgress(0); const images = []; const totalImages = 20; // Instructions for different face captures const expressions = [ 'Look straight', 'Turn slightly left', 'Turn slightly right', 'Look up slightly', 'Look down slightly', 'Smile naturally', 'Neutral expression', 'Blink normally', 'Turn head left more', 'Turn head right more', 'Raise eyebrows', 'Open mouth slightly', 'Close eyes and open', 'Tilt head left', 'Tilt head right', 'Look over left shoulder', 'Look over right shoulder', 'Neutral with glasses (if any)', 'Neutral without glasses', 'Final straight look' ]; try { // Capture sequence of images for (let i = 0; i < totalImages; i++) { if (camera.current) { // Update instruction for current capture setCaptureInstructions(expressions[i]); // Wait for user to adjust position await new Promise(resolve => setTimeout(resolve, 1000)); // Capture photo with quality settings const photo = await camera.current.takePhoto({ qualityPrioritization: 'balanced', flash: 'off', enableAutoRedEyeReduction: false, skipMetadata: true, quality: 0.5, width: 640, height: 480 }); // Store captured image images.push(photo.path); setCurrentImage(photo.path); setCaptureProgress(((i + 1) / totalImages) * 100); // Short delay between captures await new Promise(resolve => setTimeout(resolve, 300)); } } // Store all captured images and register employee setCapturedImages(images); await registerEmployeeWithFaceData(images); } catch (error) { console.error('Capture error:', error); Alert.alert('Error', 'Failed to capture face images: ' + error.message); } finally { // Reset capture state setIsCapturing(false); setCurrentImage(null); setCaptureInstructions('Please look straight at the camera'); } }; // Register employee with captured face data const registerEmployeeWithFaceData = async (images) => { try { setLoading(true); const formDataObj = new FormData(); // Add text fields to form data formDataObj.append('employeeId', formData.employeeId.trim()); formDataObj.append('employeeName', formData.employeeName.trim()); formDataObj.append('designation', formData.designation.trim()); formDataObj.append('dateOfJoining', formData.dateOfJoining); formDataObj.append('password', formData.password); // Add all captured images with proper naming images.forEach((imagePath, index) => { formDataObj.append(`faceImages[${index}]`, { uri: Platform.OS === 'android' ? `file://${imagePath}` : imagePath, type: 'image/jpeg', name: `face_${index + 1}.jpg`, }); }); // Send data to server const response = await fetch(API_URL, { method: 'POST', body: formDataObj, headers: { 'Accept': 'application/json', }, }); // Handle server response const result = await response.json(); if (result.status) { Alert.alert('Success', result.message); // Reset form on success setFormData({ employeeId: '', employeeName: '', designation: '', dateOfJoining: new Date().toISOString().split('T')[0], password: '', }); setCapturedImages([]); setShowCamera(false); navigation.navigate('Login'); } else { throw new Error(result.message || 'Registration failed'); } } catch (error) { console.error('Registration error:', error); Alert.alert('Error', 'Registration failed: ' + error.message); } finally { setLoading(false); } }; // Handle date selection change const handleDateChange = (event, selectedDate) => { setShowDatePicker(Platform.OS === 'ios'); if (selectedDate) { setFormData({ ...formData, dateOfJoining: selectedDate.toISOString().split('T')[0], }); } }; // Render the component return ( Employee Registration Employee ID setFormData({ ...formData, employeeId: text })} placeholder="Enter Employee ID" placeholderTextColor="#666" keyboardType="numeric" /> Employee Name setFormData({ ...formData, employeeName: text })} placeholder="Enter Employee Name" placeholderTextColor="#666" autoCapitalize="words" /> Designation setFormData({ ...formData, designation: text })} placeholder="Enter Designation" placeholderTextColor="#666" autoCapitalize="words" /> Password setFormData({ ...formData, password: text })} placeholder="Enter Password" placeholderTextColor="#666" secureTextEntry /> Date of Joining setShowDatePicker(true)} activeOpacity={0.7} > {showDatePicker && ( )} {loading ? 'Submitting...' : 'Submit'} setShowCamera(false)} onShow={captureFaceImages} > {device && ( )} {captureInstructions} {isCapturing && ( Capturing {Math.round(captureProgress/5)} of 20 images... ({Math.round(captureProgress)}%) {currentImage && ( )} )} {isCapturing ? 'Capturing...' : 'Retake Photos'} setShowCamera(false)} > ); }; // Styles for the component const styles = StyleSheet.create({ mainContainer: { flex: 1, backgroundColor: '#f0f2f5' }, container: { flex: 1 }, scrollContent: { flexGrow: 1, paddingBottom: 40 }, formContainer: { padding: 20, marginTop: 20 }, title: { fontSize: 32, fontWeight: 'bold', color: '#1a237e', marginBottom: 30, textAlign: 'center', }, card: { backgroundColor: '#fff', borderRadius: 20, padding: 20, elevation: 5, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 3.84, }, inputContainer: { marginBottom: 25 }, label: { fontSize: 16, color: '#34495e', marginBottom: 10, fontWeight: '600', letterSpacing: 0.5, paddingLeft: 5, }, input: { backgroundColor: '#f8f9fa', borderRadius: 12, padding: 15, fontSize: 16, borderWidth: 1, borderColor: '#e1e8ed', color: '#2c3e50', width: '100%', elevation: 2, }, dateInputContainer: { position: 'relative' }, dateInputTouchable: { flexDirection: 'row', alignItems: 'center' }, dateInput: { paddingRight: 40 }, calendarIcon: { position: 'absolute', right: 15, zIndex: 1 }, submitButton: { backgroundColor: '#4c669f', borderRadius: 12, padding: 18, alignItems: 'center', marginTop: 20, elevation: 8, }, submitButtonText: { color: '#fff', fontSize: 18, fontWeight: '700', letterSpacing: 1, }, cameraContainer: { flex: 1, backgroundColor: 'black', }, cameraOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', }, faceGuide: { width: 250, height: 300, borderWidth: 2, borderColor: 'rgba(255, 255, 255, 0.7)', borderRadius: 10, position: 'absolute', top: '20%', }, instructionContainer: { position: 'absolute', top: 100, backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 15, borderRadius: 10, }, instructionText: { color: 'white', fontSize: 18, fontWeight: 'bold', textAlign: 'center', }, captureProgressContainer: { position: 'absolute', bottom: 120, width: '80%', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 20, borderRadius: 10, }, captureProgressText: { color: 'white', fontSize: 16, marginBottom: 10, }, progressBar: { height: 10, width: '100%', backgroundColor: 'rgba(255, 255, 255, 0.3)', borderRadius: 5, overflow: 'hidden', }, progressFill: { height: '100%', backgroundColor: '#4c669f', }, previewImage: { width: 100, height: 100, borderRadius: 10, marginTop: 10, borderWidth: 2, borderColor: 'white', }, captureButton: { position: 'absolute', bottom: 40, backgroundColor: '#4c669f', padding: 15, borderRadius: 50, width: 200, alignItems: 'center', }, captureButtonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, closeButton: { position: 'absolute', top: 40, right: 20, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: 20, padding: 10, }, }); export default EmployeeRegistrationForm; //register_employee.php 'localhost', 'dbname' => 'attendance_system', 'username' => 'root', 'password' => '' ]; try { $db = new PDO( "mysql:host={$db_config['host']};dbname={$db_config['dbname']};charset=utf8mb4", $db_config['username'], $db_config['password'], [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION] ); if ($_SERVER['REQUEST_METHOD'] === 'POST') { $contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : ''; $savedImages = []; $employeeDir = ''; if (strpos($contentType, 'multipart/form-data') !== false) { $requiredFields = ['employeeId', 'employeeName', 'designation', 'dateOfJoining', 'password']; foreach ($requiredFields as $field) { if (empty($_POST[$field])) { throw new Exception("Missing required field: $field"); } } if (empty($_FILES['faceImages']) || count($_FILES['faceImages']['tmp_name']) < 20) { throw new Exception("Exactly 20 face images are required"); } $employeeId = trim($_POST['employeeId']); $employeeName = trim($_POST['employeeName']); $designation = trim($_POST['designation']); $dateOfJoining = $_POST['dateOfJoining']; $password = $_POST['password']; $stmt = $db->prepare("SELECT employee_id FROM employees WHERE employee_id = ?"); $stmt->execute([$employeeId]); if ($stmt->rowCount() > 0) { throw new Exception("Employee ID already exists"); } $db->beginTransaction(); $baseUploadDir = $_SERVER['DOCUMENT_ROOT'] . '/api/Attendance/face_images/'; $employeeDir = $baseUploadDir . $employeeId . '/'; $faceDataDir = $baseUploadDir . 'face_data/'; if (!file_exists($baseUploadDir)) { mkdir($baseUploadDir, 0777, true); } if (!file_exists($employeeDir)) { mkdir($employeeDir, 0777, true); } if (!file_exists($faceDataDir)) { mkdir($faceDataDir, 0777, true); } $stmt = $db->prepare("INSERT INTO employees (employee_id, employee_name, designation, date_of_joining, password) VALUES (?, ?, ?, ?, ?)"); $stmt->execute([ $employeeId, $employeeName, $designation, $dateOfJoining, password_hash($password, PASSWORD_BCRYPT) ]); $faceDataFile = $faceDataDir . 'face_encodings.json'; $faceEncodings = file_exists($faceDataFile) ? json_decode(file_get_contents($faceDataFile), true) : []; $faceEncoding = [ 'feature1' => rand(0, 100) / 100, 'feature2' => rand(0, 100) / 100, 'feature3' => rand(0, 100) / 100 ]; $imagePaths = []; foreach ($_FILES['faceImages']['tmp_name'] as $key => $tmpName) { $fileType = $_FILES['faceImages']['type'][$key]; if (!in_array($fileType, ['image/jpeg', 'image/jpg', 'image/png'])) { throw new Exception("Invalid file type for image " . ($key + 1) . ". Only JPG, JPEG, and PNG are allowed."); } if ($_FILES['faceImages']['size'][$key] > 2 * 1024 * 1024) { throw new Exception("File size exceeds limit (2MB) for image " . ($key + 1)); } if (is_uploaded_file($tmpName)) { $fileName = 'face_' . ($key + 1) . '_' . time() . '.jpg'; $uploadPath = $employeeDir . $fileName; $relativePath = 'face_images/' . $employeeId . '/' . $fileName; if (move_uploaded_file($tmpName, $uploadPath)) { $imagePaths[] = $relativePath; $stmt = $db->prepare("INSERT INTO employee_faces (employee_id, face_image_path) VALUES (?, ?)"); $stmt->execute([$employeeId, $relativePath]); } else { throw new Exception("Failed to move uploaded file: " . $fileName); } } } // Verify all images were saved foreach ($imagePaths as $imagePath) { if (!file_exists($_SERVER['DOCUMENT_ROOT'] . '/api/Attendance/' . $imagePath)) { throw new Exception("Failed to verify saved image: " . $imagePath); } } $faceEncodings[$employeeId] = [ 'employee_id' => $employeeId, 'features' => $faceEncoding, 'image_paths' => $imagePaths, 'timestamp' => time() ]; file_put_contents($faceDataFile, json_encode($faceEncodings, JSON_PRETTY_PRINT)); $db->commit(); http_response_code(201); echo json_encode([ 'status' => true, 'message' => 'Employee registered successfully with 20 face images', 'employeeId' => $employeeId, 'faceImagesSaved' => count($imagePaths) ]); } else { throw new Exception("Unsupported content type: " . $contentType); } } else { throw new Exception("Invalid request method"); } } catch (PDOException $e) { if (isset($db) && $db->inTransaction()) { $db->rollBack(); } if (!empty($savedImages)) { foreach ($savedImages as $imagePath) { $fullPath = $_SERVER['DOCUMENT_ROOT'] . '/api/Attendance/' . $imagePath; if (file_exists($fullPath)) { unlink($fullPath); } } if (file_exists($employeeDir)) { rmdir($employeeDir); } } http_response_code(500); echo json_encode([ 'status' => false, 'message' => 'Database error: ' . $e->getMessage() ]); } catch (Exception $e) { if (isset($db) && $db->inTransaction()) { $db->rollBack(); } if (!empty($savedImages)) { foreach ($savedImages as $imagePath) { $fullPath = $_SERVER['DOCUMENT_ROOT'] . '/api/Attendance/' . $imagePath; if (file_exists($fullPath)) { unlink($fullPath); } } if (file_exists($employeeDir)) { rmdir($employeeDir); } } http_response_code(400); echo json_encode([ 'status' => false, 'message' => $e->getMessage(), 'errorDetails' => [ 'filesReceived' => isset($_FILES['faceImages']) ? count($_FILES['faceImages']['tmp_name']) : 0 ] ]); } ?> from above code cptured images and that save function add in below all code and all of that i want to give all pages registration successfully in real device using usb debugging //EmployeeRegistratioinForm.js import React, { useState, useRef, useEffect } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, Dimensions, KeyboardAvoidingView, Platform, Alert, Modal, ActivityIndicator, Image, PermissionsAndroid } from 'react-native'; import DateTimePicker from '@react-native-community/datetimepicker'; import Icon from 'react-native-vector-icons/FontAwesome'; import { Camera } from 'react-native-vision-camera'; import { useCameraDevice, useCameraPermission } from 'react-native-vision-camera'; const windowWidth = Dimensions.get('window').width; const API_URL = 'http://192.168.1.44/api/Attendance/register_employee.php'; const EmployeeRegistrationForm = ({ navigation }) => { const [formData, setFormData] = useState({ employeeId: '', employeeName: '', designation: '', dateOfJoining: new Date().toISOString().split('T')[0], password: '', }); const [showDatePicker, setShowDatePicker] = useState(false); const [loading, setLoading] = useState(false); const [isCapturing, setIsCapturing] = useState(false); const [captureProgress, setCaptureProgress] = useState(0); const [showCamera, setShowCamera] = useState(false); const [capturedImages, setCapturedImages] = useState([]); const [currentImage, setCurrentImage] = useState(null); const [hasCameraPermission, setHasCameraPermission] = useState(false); const camera = useRef(null); const device = useCameraDevice('front'); const { hasPermission, requestPermission } = useCameraPermission(); useEffect(() => { const checkPermissions = async () => { try { if (Platform.OS === 'android') { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { title: 'Camera Permission', message: 'App needs access to your camera', buttonNeutral: 'Ask Me Later', buttonNegative: 'Cancel', buttonPositive: 'OK', } ); setHasCameraPermission(granted === PermissionsAndroid.RESULTS.GRANTED); } else { const permissionGranted = await requestPermission(); setHasCameraPermission(permissionGranted); } } catch (err) { console.warn('Permission error:', err); } }; checkPermissions(); }, []); const handleSubmit = async () => { const { employeeId, employeeName, designation, dateOfJoining, password } = formData; if (!employeeId || !employeeName || !designation || !dateOfJoining || !password) { Alert.alert('Validation Error', 'Please fill in all fields.'); return; } if (!hasCameraPermission) { Alert.alert('Permission Required', 'Camera permission is needed for face registration.'); return; } setShowCamera(true); }; const captureFaceImages = async () => { setIsCapturing(true); setCapturedImages([]); setCaptureProgress(0); const images = []; // Reduce number of images from 20 to 5 const totalImages = 5; try { for (let i = 0; i < totalImages; i++) { if (camera.current) { const photo = await camera.current.takePhoto({ qualityPrioritization: 'speed', flash: 'off', enableAutoRedEyeReduction: false, skipMetadata: true, quality: 0.3, // Reduce quality to 30% width: 640, // Set smaller image dimensions height: 480 }); images.push(photo.path); setCurrentImage(photo.path); setCaptureProgress(((i + 1) / totalImages) * 100); // Increase delay between captures await new Promise(resolve => setTimeout(resolve, 500)); } } setCapturedImages(images); await registerEmployeeWithFaceData(images); } catch (error) { console.error('Capture error:', error); Alert.alert('Error', 'Failed to capture face images: ' + error.message); } finally { setIsCapturing(false); setCurrentImage(null); } }; const registerEmployeeWithFaceData = async (images) => { try { setLoading(true); const formDataObj = new FormData(); // Add text fields formDataObj.append('employeeId', formData.employeeId.trim()); formDataObj.append('employeeName', formData.employeeName.trim()); formDataObj.append('designation', formData.designation.trim()); formDataObj.append('dateOfJoining', formData.dateOfJoining); formDataObj.append('password', formData.password); // Process images in chunks const chunkSize = 2; for (let i = 0; i < images.length; i += chunkSize) { const chunk = images.slice(i, i + chunkSize); for (let j = 0; j < chunk.length; j++) { formDataObj.append(`faceImages[${i + j}]`, { uri: Platform.OS === 'android' ? `file://${chunk[j]}` : chunk[j], type: 'image/jpeg', name: `face_${i + j}.jpg`, }); } } const response = await fetch(API_URL, { method: 'POST', body: formDataObj, headers: { 'Accept': 'application/json', 'Content-Type': 'multipart/form-data', }, }); const textResponse = await response.text(); console.log('Server response:', textResponse); const result = JSON.parse(textResponse); if (result.status) { Alert.alert('Success', result.message); // Reset form setFormData({ employeeId: '', employeeName: '', designation: '', dateOfJoining: new Date().toISOString().split('T')[0], password: '', }); setCapturedImages([]); setShowCamera(false); } else { throw new Error(result.message || 'Registration failed'); } } catch (error) { console.error('Registration error:', error); Alert.alert('Error', 'Registration failed: ' + error.message); } finally { setLoading(false); } }; const handleDateChange = (event, selectedDate) => { setShowDatePicker(Platform.OS === 'ios'); if (selectedDate) { setFormData({ ...formData, dateOfJoining: selectedDate.toISOString().split('T')[0], }); } }; return ( Employee Registration Employee ID setFormData({ ...formData, employeeId: text })} placeholder="Enter Employee ID" placeholderTextColor="#666" keyboardType="numeric" /> Employee Name setFormData({ ...formData, employeeName: text })} placeholder="Enter Employee Name" placeholderTextColor="#666" autoCapitalize="words" /> Designation setFormData({ ...formData, designation: text })} placeholder="Enter Designation" placeholderTextColor="#666" autoCapitalize="words" /> Password setFormData({ ...formData, password: text })} placeholder="Enter Password" placeholderTextColor="#666" secureTextEntry /> Date of Joining setShowDatePicker(true)} activeOpacity={0.7} > {showDatePicker && ( )} {loading ? 'Submitting...' : 'Submit'} setShowCamera(false)} onShow={captureFaceImages} > {device && ( )} {isCapturing && ( Capturing face data... {Math.round(captureProgress)}% {currentImage && ( )} )} {isCapturing ? 'Capturing...' : 'Retake Photos'} setShowCamera(false)} > ); }; const styles = StyleSheet.create({ mainContainer: { flex: 1, backgroundColor: '#f0f2f5' }, container: { flex: 1 }, scrollContent: { flexGrow: 1, paddingBottom: 40 }, formContainer: { padding: 20, marginTop: 20 }, title: { fontSize: 32, fontWeight: 'bold', color: '#1a237e', marginBottom: 30, textAlign: 'center', }, card: { backgroundColor: '#fff', borderRadius: 20, padding: 20, elevation: 5, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 3.84, }, inputContainer: { marginBottom: 25 }, label: { fontSize: 16, color: '#34495e', marginBottom: 10, fontWeight: '600', letterSpacing: 0.5, paddingLeft: 5, }, input: { backgroundColor: '#f8f9fa', borderRadius: 12, padding: 15, fontSize: 16, borderWidth: 1, borderColor: '#e1e8ed', color: '#2c3e50', width: '100%', elevation: 2, }, dateInputContainer: { position: 'relative' }, dateInputTouchable: { flexDirection: 'row', alignItems: 'center' }, dateInput: { paddingRight: 40 }, calendarIcon: { position: 'absolute', right: 15, zIndex: 1 }, submitButton: { backgroundColor: '#4c669f', borderRadius: 12, padding: 18, alignItems: 'center', marginTop: 20, elevation: 8, }, submitButtonText: { color: '#fff', fontSize: 18, fontWeight: '700', letterSpacing: 1, }, cameraContainer: { flex: 1, backgroundColor: 'black', }, cameraOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', }, faceGuide: { width: 250, height: 300, borderWidth: 2, borderColor: 'rgba(255, 255, 255, 0.7)', borderRadius: 10, position: 'absolute', top: '20%', }, captureProgressContainer: { position: 'absolute', bottom: 120, width: '80%', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 20, borderRadius: 10, }, captureProgressText: { color: 'white', fontSize: 16, marginBottom: 10, }, progressBar: { height: 10, width: '100%', backgroundColor: 'rgba(255, 255, 255, 0.3)', borderRadius: 5, overflow: 'hidden', }, progressFill: { height: '100%', backgroundColor: '#4c669f', }, previewImage: { width: 100, height: 100, borderRadius: 10, marginTop: 10, borderWidth: 2, borderColor: 'white', }, captureButton: { position: 'absolute', bottom: 40, backgroundColor: '#4c669f', padding: 15, borderRadius: 50, width: 200, alignItems: 'center', }, captureButtonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, closeButton: { position: 'absolute', top: 40, right: 20, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: 20, padding: 10, }, }); export default EmployeeRegistrationForm; //register_employee.php 'localhost', 'dbname' => 'attendance_system', 'username' => 'root', 'password' => '' ]; try { $db = new PDO( "mysql:host={$db_config['host']};dbname={$db_config['dbname']};charset=utf8mb4", $db_config['username'], $db_config['password'], [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION] ); if ($_SERVER['REQUEST_METHOD'] === 'POST') { $contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : ''; $savedImages = []; if (strpos($contentType, 'multipart/form-data') !== false) { if (empty($_POST['employeeId']) || empty($_FILES['faceImages'])) { throw new Exception("Required fields or files are missing"); } if (count($_FILES['faceImages']['tmp_name']) !== 5) { throw new Exception("Exactly 5 face images are required. Received: " . count($_FILES['faceImages']['tmp_name'])); } $employeeId = $_POST['employeeId']; $employeeName = $_POST['employeeName']; $designation = $_POST['designation']; $dateOfJoining = $_POST['dateOfJoining']; $password = $_POST['password']; } else if ($contentType === 'application/json') { $json = file_get_contents('php://input'); $data = json_decode($json, true); if (json_last_error() !== JSON_ERROR_NONE) { throw new Exception("Invalid JSON data"); } $employeeId = $data['employeeId']; $employeeName = $data['employeeName']; $designation = $data['designation']; $dateOfJoining = $data['dateOfJoining']; $password = $data['password']; } else { throw new Exception("Unsupported content type: " . $contentType); } $required_fields = ['employeeId', 'employeeName', 'designation', 'dateOfJoining', 'password']; foreach ($required_fields as $field) { if (empty($$field)) { throw new Exception("Missing required field: $field"); } } $stmt = $db->prepare("SELECT employee_id FROM employees WHERE employee_id = ?"); $stmt->execute([$employeeId]); if ($stmt->rowCount() > 0) { throw new Exception("Employee ID already exists"); } $db->beginTransaction(); $baseUploadDir = $_SERVER['DOCUMENT_ROOT'] . '/api/Attendance/face_images/'; $employeeDir = $baseUploadDir . $employeeId . '/'; if (!file_exists($baseUploadDir)) { mkdir($baseUploadDir, 0777, true); } if (!file_exists($employeeDir)) { mkdir($employeeDir, 0777, true); } $stmt = $db->prepare("INSERT INTO employees (employee_id, employee_name, designation, date_of_joining, password) VALUES (?, ?, ?, ?, ?)"); $stmt->execute([ $employeeId, $employeeName, $designation, $dateOfJoining, password_hash($password, PASSWORD_DEFAULT) ]); if (isset($_FILES['faceImages'])) { $allowedTypes = ['image/jpeg', 'image/jpg', 'image/png']; $maxFileSize = 5 * 1024 * 1024; // 5MB foreach ($_FILES['faceImages']['tmp_name'] as $key => $tmpName) { $fileType = $_FILES['faceImages']['type'][$key]; if (!in_array($fileType, $allowedTypes)) { throw new Exception("Invalid file type for image {$key}. Only JPG, JPEG, and PNG are allowed."); } $fileSize = $_FILES['faceImages']['size'][$key]; if ($fileSize > $maxFileSize) { throw new Exception("File size exceeds limit (5MB) for image {$key}"); } if (is_uploaded_file($tmpName)) { $fileName = 'face_' . ($key + 1) . '_' . time() . '.jpg'; $uploadPath = $employeeDir . $fileName; $relativePath = 'face_images/' . $employeeId . '/' . $fileName; if (move_uploaded_file($tmpName, $uploadPath)) { $savedImages[] = $relativePath; $stmt = $db->prepare("INSERT INTO employee_faces (employee_id, face_image_path) VALUES (?, ?)"); $stmt->execute([$employeeId, $relativePath]); } else { throw new Exception("Failed to move uploaded file: " . $fileName); } } } if (count($savedImages) !== 5) { throw new Exception("All 5 face images must be uploaded successfully. Only " . count($savedImages) . " were processed."); } } else { throw new Exception("No face images uploaded"); } $db->commit(); http_response_code(201); echo json_encode([ 'status' => true, 'message' => 'Employee registered successfully with 5 face images', 'imagesSaved' => count($savedImages), 'employeeId' => $employeeId ]); } else { throw new Exception("Invalid request method"); } } catch (PDOException $e) { if (isset($db) && $db->inTransaction()) { $db->rollBack(); } if (!empty($savedImages)) { foreach ($savedImages as $imagePath) { $fullPath = $_SERVER['DOCUMENT_ROOT'] . '/api/Attendance/' . $imagePath; if (file_exists($fullPath)) { unlink($fullPath); } } if (file_exists($employeeDir)) { rmdir($employeeDir); } } http_response_code(400); error_log("Database Error: " . $e->getMessage()); echo json_encode([ 'status' => false, 'message' => 'Database error occurred' ]); } catch (Exception $e) { if (isset($db) && $db->inTransaction()) { $db->rollBack(); } if (!empty($savedImages)) { foreach ($savedImages as $imagePath) { $fullPath = $_SERVER['DOCUMENT_ROOT'] . '/api/Attendance/' . $imagePath; if (file_exists($fullPath)) { unlink($fullPath); } } if (file_exists($employeeDir)) { rmdir($employeeDir); } } http_response_code(400); error_log("Error: " . $e->getMessage()); echo json_encode([ 'status' => false, 'message' => 'Registration failed: ' . $e->getMessage(), 'errorDetails' => [ 'contentType' => $contentType ?? 'unknown', 'filesReceived' => isset($_FILES['faceImages']) ? count($_FILES['faceImages']['tmp_name']) : 0, 'postData' => $_POST ?? [] ] ]); } ?>