Add Search Functionality to Dashboard, Leaves, and Balances Pages

[Dark-Developer93]

Description

Implement a search bar in the Users, Leaves, and Balances pages to allow users to filter table data by typing. This enhancement will improve user experience by providing quick access to specific information.

Features to Implement

1. Add a search bar component to each page.
2. Implement real-time filtering of table data based on search input.
3. Ensure search functionality works across all relevant columns in each table.

Technical Tasks

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

File Updates

1. Create a new file:
   • app/components/SearchBar.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 SearchBar component with an input field and clear button.
2. Implement useState in each page component to manage search query.
3. Pass search query to table components as a prop.
4. Update table components to filter data based on search query.
5. Ensure search is case-insensitive and works across multiple columns.

Acceptance Criteria

• Each page (Users, Leaves, Balances) has a functional search bar.
• Tables update in real-time as the user types in the search bar.
• Search functionality works across all relevant columns in each table.
• The search bar has a clear button to reset the search.
• The user experience is smooth and responsive.

Additional Considerations

• Consider adding debounce to the search input for performance optimization.
• Implement highlighting of matched text in search results.
• Ensure the search functionality is accessible and works with keyboard navigation.

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