Fee Structure Management System

Overview

This document provides technical details about the Fee Structure Management React component, which allows academic administrators to add and view fee structures for different programs and semesters.

Key Features

1. Dual-View Interface:
2. Add new fee structures with comprehensive form validation
3. View existing fee structures in a detailed table

4. Tab-based navigation between views

5. Complete Fee Breakdown:

6. Supports 14 different fee categories
7. Handles both semester types (Odd/Even)

8. Works with multiple academic programs

9. Data Management:

10. Form validation for all required fields
11. API integration for CRUD operations
12. Optimized data fetching with React Query

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)
• API Client: Custom newRequest wrapper (likely around Axios)
• Form Handling: React state management with validation

Code Structure Explanation

1. State Management

const initialFormData = {
  semesterParity: "", // 0 for Even, 1 for Odd
  year: "",
  program: "",
  // ... other fee fields
};

const [formData, setFormData] = useState(initialFormData);
const [formErrors, setFormErrors] = useState({});
const [activeTab, setActiveTab] = useState("add"); // "add" or "view"

• initialFormData: Default values for all form fields
• formData: Current state of the form
• formErrors: Validation error messages
• activeTab: Controls which view is displayed

2. API Integration with React Query

// Mutation for creating new fee structure
const createFeeStructure = useMutation({
  mutationFn: (data) => newRequest.post("/acadadmin/feeControl/addFee", data),
  onSuccess: () => {
    toast.success("Fee structure added successfully");
    setFormData(initialFormData);
    queryClient.invalidateQueries(["fee-structure-list"]);
  },
  // ... error handling
});

// Query for fetching fee structures
const { isLoading, error, data: feeList = [] } = useQuery({
  queryKey: ["fee-structure-list"],
  queryFn: () => newRequest.get("/acadadmin/feeControl/getFeeBreakdown").then((res) => res.data.data),
  enabled: activeTab === "view", // Only fetch when viewing list
});

• Uses React Query for efficient data management
• Automatic cache invalidation after successful submission
• Conditional fetching based on active tab

3. Form Validation

const validateForm = () => {
  const errors = {};
  if (!formData.year) errors.year = "Year is required";
  // ... validation for all other required fields
  setFormErrors(errors);
  return Object.keys(errors).length === 0;
};

• Comprehensive validation for all fee categories
• Sets error messages in state
• Returns boolean indicating form validity

4. Form Submission

const handleSubmit = (e) => {
  e.preventDefault();
  if (validateForm()) {
    const submissionData = {
      ...formData,
      semesterParity: formData.semesterParity ? formData.semesterParity : undefined,
    };
    createFeeStructure.mutate(submissionData);
  }
};

• Prevents default form submission
• Only submits if validation passes
• Cleans up data before submission
• Triggers mutation

5. UI Components

Form View (renderFormView)

• Organized in clear sections:
• Basic Information: Year, Program, Semester Type
• Fee Details: All 14 fee categories
• Each field:
• Shows appropriate icon
• Displays validation errors
• Has consistent styling
• Responsive grid layout

List View (renderListView)

• Handles loading, error, and empty states
• Displays fee structures in a scrollable table
• Shows all fee categories with proper formatting
• Hover effects for better UX
• Compact view with abbreviated headers

6. Tab Navigation

<div className="inline-flex rounded-lg p-1 shadow-inner space-x-1 border border-indigo-200">
  <button onClick={() => setActiveTab("add")} className={`...`}>
    <FaPlus /> Add Fee Structure
  </button>
  <button onClick={() => setActiveTab("view")} className={`...`}>
    <FaListAlt /> Fee Structures List
  </button>
</div>

• Visual indicator for active tab
• Gradient styling for selected tab
• Smooth transitions between views

Technical Considerations

1. Performance:
2. Conditional data fetching reduces unnecessary API calls
3. Memoization could be added for complex components

4. Virtual scrolling could help with large fee structure lists

5. Security:

6. Assumes authentication is handled at higher level

7. No sensitive data handling in the component itself

8. Accessibility:

9. Semantic HTML structure
10. Clear form labels
11. Sufficient color contrast

12. Keyboard navigable

13. Error Handling:

14. Form validation with clear error messages
15. API error handling with toast notifications
16. Loading states for better UX

Integration Points

1. API Endpoints:
2. POST /acadadmin/feeControl/addFee - Add new fee structure

3. GET /acadadmin/feeControl/getFeeBreakdown - Get fee structure list

4. Components:

5. DocumentLayout: Wrapper for consistent page structure

6. Uses shared newRequest API client

7. Dependencies:

8. React Query for data management
9. react-icons for UI icons
10. react-hot-toast for notifications
11. DaisyUI/Tailwind CSS for styling