Add Frontend for Attribute Management

[Ahmad-Akel]

🔠 Description:

This pull request implements the frontend for managing attributes.

The following changes were made:

1. 🆕 Components Added:

   • AttributesListPage: Main page for displaying and managing attributes.
   • AttributesList: Component for listing attributes with sorting and deletion functionality.
   • DeleteDialog: Dialog for confirming attribute deletions.
   • NavButton and NavBar: Components for navigation.

2. 🌟 Features Implemented:

   • Infinite scrolling for loading more attributes.
   • Search functionality with debouncing to minimize API calls.
   • Sorting attributes by name and creation date.
   • Deletion of attributes with confirmation dialog.

3. 🎨 Styling:

   • Applied styles using CSS classes.

4. ⚠️ Error Handling:

   • Implemented error handling for fetching and deleting attributes.

🔗 Attachments:

frontend-demo.webm

📚 Libraries Used

• axios: For making API requests.
• react-infinite-scroll-component: For implementing infinite scroll.
• @mui/material: For UI components.
• lodash.debounce: For debouncing the search input.

📌 Additional Information

• Environment Variables: Ensure the following environment variable is set:
  • REACT_APP_API_BASE_URL: Base URL for the API.

📝 Notes

• Attempted to set up path aliases (e.g., @styles, @components) in tsconfig.json but encountered issues, so the imports are currently using relative paths. Further investigation is needed to resolve the alias configuration problem.