Absence Justification Platform

[Oussama22222]

// 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 (
    <div className="form-container">
        <form onSubmit={handleSubmit} className="form-stylish">
            <div className="form-header">
                <h1>{formData.language === 'ar' ? 'تبرير الغياب' : 'Absence Justification'}</h1>
                <select name="language" value={formData.language} onChange={handleLanguageChange} className="language-selector">
                    <option value="ar">العربية</option>
                    <option value="en">English</option>
                </select>
            </div>

            <label className="form-label">{formData.language === 'ar' ? 'الاسم واللقب' : 'Full Name'}:</label>
            <input name="name" value={formData.name} onChange={handleChange} className="form-input" required />

            <label className="form-label">{formData.language === 'ar' ? 'رقم الهاتف' : 'Phone Number'}:</label>
            <input name="phone" value={formData.phone} onChange={handleChange} className="form-input" required />

            <label className="form-label">{formData.language === 'ar' ? 'البريد الإلكتروني' : 'Email'}:</label>
            <input name="email" type="email" value={formData.email} onChange={handleChange} className="form-input" required />

            <label className="form-label">{formData.language === 'ar' ? 'رقم التسجيل' : 'Registration Number'}:</label>
            <input name="registrationNumber" value={formData.registrationNumber} onChange={handleChange} className="form-input" required />

            <label className="form-label">{formData.language === 'ar' ? 'المستوى الدراسي' : 'Level of Study'}:</label>
            <select name="level" value={formData.level} onChange={handleChange} className="form-select" required>
                <option value="">{formData.language === 'ar' ? 'اختر' : 'Select'}</option>
                <option value="السنة الثانية ليسانس علوم الإعلام والاتصال">
                    {formData.language === 'ar' ? 'السنة الثانية ليسانس علوم الإعلام والاتصال' : '2nd Year Bachelor - Media and Communication Sciences'}
                </option>
                <option value="السنة الثالثة ليسانس - تخصص: اتصال">
                    {formData.language === 'ar' ? 'السنة الثالثة ليسانس - تخصص: اتصال' : '3rd Year Bachelor - Communication'}
                </option>
                <option value="السنة الأولى ماستر - تخصص: اتصال وعلاقات عامة">
                    {formData.language === 'ar' ? 'السنة الأولى ماستر - تخصص: اتصال وعلاقات عامة' : '1st Year Master - Communication and Public Relations'}
                </option>
                <option value="السنة الثانية ماستر - تخصص: اتصال وعلاقات عامة">
                    {formData.language === 'ar' ? 'السنة الثانية ماستر - تخصص: اتصال وعلاقات عامة' : '2nd Year Master - Communication and Public Relations'}
                </option>
            </select>

            <label className="form-label">{formData.language === 'ar' ? 'الفوج' : 'Group'}:</label>
            <select name="group" value={formData.group} onChange={handleChange} className="form-select" required>
                <option value="">{formData.language === 'ar' ? 'اختر' : 'Select'}</option>
                <option value="الفوج الأول">{formData.language === 'ar' ? 'الفوج الأول' : 'Group 1'}</option>
                <option value="الفوج الثاني">{formData.language === 'ar' ? 'الفوج الثاني' : 'Group 2'}</option>
                <option value="الفوج الثالث">{formData.language === 'ar' ? 'الفوج الثالث' : 'Group 3'}</option>
            </select>

            <label className="form-label">{formData.language === 'ar' ? 'تاريخ الغياب' : 'Date of Absence'}:</label>
            <input name="absenceDates" type="text" value={formData.absenceDates} onChange={handleChange} className="form-input" required />

            <label className="form-label">{formData.language === 'ar' ? 'حالات الغياب المبررة قانونا' : 'Legally Justified Absence Reasons'}:</label>
            <select name="reason" value={formData.reason} onChange={handleChange} className="form-select" required>
                <option value="">{formData.language === 'ar' ? 'اختر' : 'Select'}</option>
                <option value="الوفاة في الأصول أو الفروع أو الأقارب">{formData.language === 'ar' ? 'الوفاة في الأصول أو الفروع أو الأقارب' : 'Death of Relatives'}</option>
                <option value="زواج المعني">{formData.language === 'ar' ? 'زواج المعني' : 'Marriage of the Student'}</option>
                <option value="عطلة الأبوة أو الأمومة للمعني">{formData.language === 'ar' ? 'عطلة الأبوة أو الأمومة للمعني' : 'Parental Leave'}</option>
                <option value="مرض المعني">{formData.language === 'ar' ? 'مرض المعني' : 'Illness of the Student'}</option>
                <option value="التكليف أو الاستدعاء الرسمي">{formData.language === 'ar' ? 'التكليف أو الاستدعاء الرسمي' : 'Official Assignment or Summon'}</option>
                <option value="أخرى">{formData.language === 'ar' ? 'أخرى' : 'Other'}</option>
            </select>

            {formData.reason === 'أخرى' && (
                <label className="form-label">{formData.language === 'ar' ? 'في حالة الإجابة بأخرى اذكرها' : 'If Other, Please Specify'}:</label>
            )}
            {formData.reason === 'أخرى' && (
                <input name="otherReason" value={formData.otherReason} onChange={handleChange} className="form-input" />
            )}

            <label className="form-label">{formData.language === 'ar' ? 'تحميل وثيقة تبرير الغياب' : 'Upload Justification Document'}:</label>
            <input name="file" type="file" onChange={handleFileChange} className="form-file-input" required />

            <button type="submit" className="submit-button">
                {formData.language === 'ar' ? 'إرسال الطلب' : 'Submit Request'}
            </button>
        </form>
    </div>
);

}

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');
});