- Add ChangeEvent import for proper TypeScript typing
- Remove unused register function from useForm hook
- Refactor onChange handler with explicit ChangeEvent<HTMLSelectElement> type annotation
- Extract target value into variable for improved readability
- Ensure consistent form field updates between setValue and setCompanies calls
- Improve type safety and reduce potential runtime errors in form handling
- Remove unused FormErrorMessages import
- Add watch and setValue hooks from useForm for better form state management
- Implement useEffect to properly initialize company_ids field with default values
- Replace register-based validation with controlled component pattern
- Move onChange handler from register to Select component onChange prop
- Add selectedCompanyId state tracking using watch hook
- Change required validation from register config to component prop
- Improve form field synchronization between react-hook-form and component state
This commit introduces several enhancements to form components and user experience across the application.
- **Sign-in Form:**
- Implemented a loading state using `useIsMutating` from TanStack Query.
- The username and password fields are now disabled during the login process to prevent concurrent submissions.
- The "Sign in" button displays a spinner while the mutation is pending, providing clear visual feedback.
- **Assign to Company Modal:**
- Refactored the modal to use `react-hook-form` for more robust state management and validation.
- The form submission button is now disabled while the assignment request is in progress.
- **Tag Input Component:**
- Added a new `shouldAddWithSpace` prop to allow creating tags by pressing the space bar, increasing the component's flexibility.
- **Header:**
- Corrected the image path for the mobile header logo to display the correct icon.
This commit introduces a new "Companies" page to the dashboard, providing a comprehensive view of company data in a sortable and paginated table.
Key changes include:
- A new page at `/companies` to display the data table.
- A new API route `/api/companies` that serves mock company data.
- A `CompaniesTable` component built with `react-table` featuring sorting, pagination, and search functionality.
- Reusable `TablePagination` and `TableActions` components to support the table.
- The `moment` library has been added as a dependency to format dates within the table.
- A new `CrossIcon` has been added for UI controls.
- The `InputGroup` component is enhanced with an `autoComplete` prop.
- A link to the new "Companies" page has been added to the sidebar navigation.
AmirReza Jamali