Skip to content

Passport Application System

Overview

This document provides technical details about the Passport Application React component, which is part of the student portal system. The component allows students to apply for passport-related certificates and track their application status.

Key Features

  1. Application Form:
  2. Supports both fresh and renewal passport applications
  3. Normal and tatkal (urgent) processing modes
  4. Travel plan information collection

  5. Form validation

  6. Application Status Tracking:

  7. View history of all passport applications
  8. See current status (Approved/Rejected/Pending)

  9. View remarks from administrators

  10. User Interface:

  11. Tab-based navigation between application and status views
  12. Responsive design for all device sizes
  13. Modern UI with icons and visual indicators

Technical Stack

  • Frontend: React.js with functional components
  • State Management: React Query for data fetching and mutations
  • UI Library: DaisyUI (Tailwind CSS component library)
  • Icons: React Icons (Font Awesome set)
  • Form Handling: React state management with validation
  • API Client: Custom newRequest wrapper (likely around Axios)

Code Structure Explanation

1. Initial Setup and State Management

const initialFormData = {
    applicationType: 'fresh',
    placeOfBirth: '',
    semester: '',
    mode: 'normal',
    tatkalReason: '',
    travelPlans: 'no',
    travelDetails: '',
    fromDate: '',
    toDate: ''
};

const [formData, setFormData] = useState(initialFormData);
const [formErrors, setFormErrors] = useState({});
const [activeTab, setActiveTab] = useState('application');
  • initialFormData: Default values for the form fields
  • formData: Current state of the form inputs
  • formErrors: Validation error messages
  • activeTab: Controls which view is displayed (application form or status)

2. Data Fetching with React Query

// Get user data from localStorage
const {data:userData} = JSON.parse(localStorage.getItem("currentUser"));
const {userId} = userData.user;

// Fetch student data
const { isLoading, error, data: studentData } = useQuery({
    queryKey: [`passport-${userId}`],
    queryFn: () =>
        newRequest.get(`/student/${userId}/passport`).then((res) => res.data),
});

// Fetch application history
const { data: applications = [] } = useQuery({
    queryKey: ['passport-applications'],
    queryFn: () =>
        newRequest.get(`/student/${userId}/passport/applications`).then((res) => res.data),
});
  • Uses React Query's useQuery hook for data fetching
  • Student data is fetched based on the logged-in user's ID
  • Application history is stored in the applications variable
  • Default value of empty array prevents undefined errors

3. Form Validation

const validateForm = () => {
    const errors = {};

    if (!formData.placeOfBirth?.trim()) {
        errors.placeOfBirth = 'Place of birth is required';
    }

    // ... other validation checks

    setFormErrors(errors);
    return Object.keys(errors).length === 0;
};
  • Checks required fields
  • Validates date ranges for travel plans
  • Sets error messages in formErrors state
  • Returns true if form is valid

4. Form Submission

const createApplication = useMutation({
    mutationFn: (formData) => {
        return newRequest.post(`/student/${userId}/passport/apply`, formData);
    },
    onSuccess: () => {
        queryClient.invalidateQueries(['passport-applications']);
        setFormData(initialFormData);
        setFormErrors({});
        toast.success('Passport application submitted successfully');
        setActiveTab('status');
    },
    // ... error handling
});

const handleSubmit = (e) => {
    e.preventDefault();
    if (validateForm()) {
        createApplication.mutate(formData);
    }
};
  • Uses React Query's useMutation for form submission
  • On success:
  • Refetches application history
  • Resets form
  • Shows success notification
  • Switches to status tab
  • Only submits if form validation passes

5. UI Components

InfoDisplay Component

const InfoDisplay = ({ label, value, icon: Icon }) => (
    <div className="flex items-center space-x-3 py-2">
        {Icon && (
            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center border border-indigo-200 shadow-sm">
                <Icon className="w-5 h-5 text-indigo-600" />
            </div>
        )}
        <div>
            <div className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-0.5">{label}</div>
            <div className="text-sm font-semibold text-gray-800">{value}</div>
        </div>
    </div>
);
  • Reusable component for displaying student information
  • Shows label and value with an optional icon
  • Consistent styling across all information displays

Application Form

The form is divided into several sections:

  1. Application Type: Radio buttons for fresh/renewal
  2. Student Information: Displays readonly student data
  3. Additional Details: Place of birth and semester selection
  4. Application Mode: Normal or tatkal with reason field
  5. Travel Plans: Optional travel information
  6. Submit Buttons: With reset functionality

Status Table

Displays application history with:

  • Application date
  • Type and mode
  • Remarks
  • Status with color-coded indicators

6. Styling Approach

  • Uses DaisyUI (Tailwind CSS component library) for consistent styling
  • Custom gradient text for headings
  • Responsive grid layouts
  • Animated transitions for better UX
  • Color-coded status indicators
  • Icon integration for visual cues

Technical Considerations

  1. Performance:
  2. React Query optimizes data fetching and caching

  3. Memoization could be added for complex components if needed

  4. Security:

  5. User authentication handled at higher level

  6. User-specific data fetched based on authenticated user ID

  7. Accessibility:

  8. Semantic HTML structure
  9. Proper labeling of form elements

  10. Sufficient color contrast

  11. Error Handling:

  12. Form validation with clear error messages
  13. API error handling with toast notifications

Integration Points

  1. API Endpoints:
  2. GET /student/{userId}/passport - Student data
  3. GET /student/{userId}/passport/applications - Application history

  4. POST /student/{userId}/passport/apply - Submit new application

  5. Dependencies:

  6. React Query for data management
  7. React Icons for UI icons
  8. DaisyUI/Tailwind CSS for styling
  9. Custom newRequest for API calls