Absence Justification Platform
Author: Oussama22222Created Jan 11, 2025Updated Jan 11, 2025
// Absence Justification Platform
// Frontend: React.js Setup
import React, { useState } from 'react';
import './App.css';
import './AppDesign.css'; // New CSS file for enhanced design
function AbsenceForm() {
const [formData, setFormData] = useState({
name: '',
phone: '',
email: '',
registrationNumber: '',
level: '',
group: '',
absenceDates: '',
reason: '',
otherReason: '',
file: null,
language: 'ar', // Default language set to Arabic
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const handleFileChange = (e) => {
setFormData({ ...formData, file: e.target.files[0] });
};
const handleLanguageChange = (e) => {
setFormData({ ...formData, language: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
const formDataToSend = new FormData();
Object.keys(formData).forEach((key) => {
formDataToSend.append(key, formData[key]);
});
try {
const response = await fetch('http://localhost:5000/api/submit', {
method: 'POST',
body: formDataToSend,
});
if (response.ok) {
alert('Request submitted successfully');
} else {
const errorData = await response.json();
alert(`Failed to submit the request: ${errorData.message}`);
}
} catch (error) {
console.error('Error:', error);
alert('An unexpected error occurred. Please try again later.');
}
};
return (
{formData.language === 'ar' ? 'الاسم واللقب' : 'Full Name'}:
{formData.language === 'ar' ? 'رقم الهاتف' : 'Phone Number'}:
{formData.language === 'ar' ? 'البريد الإلكتروني' : 'Email'}:
{formData.language === 'ar' ? 'رقم التسجيل' : 'Registration Number'}:
{formData.language === 'ar' ? 'المستوى الدراسي' : 'Level of Study'}:
{formData.language === 'ar' ? 'الفوج' : 'Group'}:
{formData.language === 'ar' ? 'تاريخ الغياب' : 'Date of Absence'}:
{formData.language === 'ar' ? 'حالات الغياب المبررة قانونا' : 'Legally Justified Absence Reasons'}:
{formData.reason === 'أخرى' && (
{formData.language === 'ar' ? 'في حالة الإجابة بأخرى اذكرها' : 'If Other, Please Specify'}:
)}
{formData.reason === 'أخرى' && (
)}
{formData.language === 'ar' ? 'تحميل وثيقة تبرير الغياب' : 'Upload Justification Document'}:
);
}
export default AbsenceForm;
// Backend: Express.js + Node.js Example
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.use(express.json());
app.post('/api/submit', upload.single('file'), (req, res) => {
const {
name,
phone,
email,
registrationNumber,
level,
group,
absenceDates,
reason,
otherReason,
language,
} = req.body;
const file = req.file;
console.log('Form Data:', {
name,
phone,
email,
registrationNumber,
level,
group,
absenceDates,
reason,
otherReason,
language,
file,
});
res.status(200).send('Request received successfully');
});
app.listen(5000, () => {
console.log('Server is running on http://localhost:5000');
});
{formData.language === 'ar' ? 'تبرير الغياب' : 'Absence Justification'}
Source: deep-floyd/IF