Add Filter Dropdown Functionality to Users, Leaves, and Balances Pages

[Dark-Developer93]

Description

Implement filter dropdown functionality in the Users, Leaves, and Balances pages to allow users to filter table data by all table headers. This enhancement will improve user experience by providing more granular control over the displayed data.

Features to Implement

1. Add a filter dropdown component to each page.
2. Implement filtering logic for each table based on selected filter options.
3. Ensure filter functionality works for all table headers.
4. Update the UI to reflect the current active filters.

Technical Tasks

1. Create a reusable FilterDropdown component.
2. Modify the existing table components to accept and use filter options.
3. Implement client-side filtering logic for each table.
4. Update the page components to include the FilterDropdown and handle filter state.

File Updates

1. Create a new file: app/components/FilterDropdown.tsx
2. Update Users page:
   • app/(dashboard)/dashboard/users/page.tsx
3. Update UsersTable component:
   • app/(dashboard)/dashboard/users/UsersTable.tsx
4. Update Leaves page:
   • app/(dashboard)/dashboard/leaves/page.tsx
5. Update LeavesTable component:
   • app/(dashboard)/dashboard/leaves/LeavesTable.tsx
6. Update Balances page:
   • app/(dashboard)/dashboard/balances/page.tsx
7. Update BalancesTable component:
   • app/(dashboard)/dashboard/balances/BalancesTable.tsx

Implementation Details

1. Create a FilterDropdown component that accepts table headers as options.
2. Implement useState in each page component to manage filter state.
3. Pass filter state to table components as a prop.
4. Update table components to filter data based on selected filter options.
5. Ensure filtering works for different data types (string, date, number).

Acceptance Criteria

• Each page (Users, Leaves, Balances) has a functional filter dropdown.
• Users can filter table data by any table header.
• Tables update in real-time as the user selects filter options.
• The UI clearly indicates which filters are currently active.
• Filtering works correctly for all data types present in the tables.
• The user experience is smooth and responsive.

Additional Considerations

• Consider adding the ability to apply multiple filters simultaneously.
• Implement a "Clear All Filters" option for easy reset.
• Ensure the filter functionality is accessible and works with keyboard navigation.
• Consider adding tooltips to explain filter options for complex data types.

Please update the mentioned files and create the new FilterDropdown component to fully integrate the filter functionality across these pages.