This commit expands the company profile by adding several new fields to the create and edit forms. This allows for the collection of more detailed and comprehensive company information.
Key changes include:
- Added new fields: Establishment Date, Company Type, Business Nature, Industry, Country, State, and City.
- Introduced a new reusable `DatePicker` component, utilizing `react-datepicker`, for date input.
- Created a new `CalendarIcon` for use in the date picker.
- Updated the company Zod schema, API services, and data types to support the new fields.
Additionally, this commit includes a refactor to standardize the `MultiSelect` component by renaming the `text` prop to `label` for better consistency across form elements. Form labels are now capitalized for a uniform UI.
This commit introduces the `react-tooltip` library to improve user interface clarity and provide a better user experience.
Tooltips have been added to the action icons (Edit, Delete, Change Status) in the Admins table. This provides users with clear, on-hover information about the function of each icon, enhancing usability and reducing ambiguity.
The implementation involved:
- Adding `react-tooltip` as a project dependency.
- Importing the required CSS in the root layout.
- Integrating the `Tooltip` component within the Admins table.
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 the functionality for super admins to change the status of other admin users to either 'Active' or 'Inactive'. This provides better control over admin account access.
Key changes include:
- A 'Status' column with a visual badge has been added to the admins table.
- A new 'Change Status' action button, using a new `UserSettingIcon`, opens a modal for status updates.
- The backend service and frontend mutation for updating an admin's status are implemented.
- The `IUser` type and a new `AdminStatus` enum have been added to support this feature.
Additionally, the confirmation modal implementation has been simplified across the admin and customer tables by removing the `modalConfig` state.
This commit introduces a loading state for form submissions and replaces the custom switch component with a third-party library for improved user experience and maintainability.
- Adds `react-switch` as a dependency to replace the custom-built switch component, providing a more robust and feature-rich solution.
- Implements a loading indicator on form submission buttons and in the confirmation modal by utilizing the `useIsMutating` hook from TanStack Query. This provides clear visual feedback to the user during asynchronous operations.
- Creates a reusable `FormFooter` component to encapsulate the submit and cancel buttons, centralizing the form submission logic and loading state.
- Refactors the company create/edit forms to use the new `FormFooter` and `react-switch` components.
- Moves the `BreadcrumbItem` type to a shared types file for better code organization.
The main logo SVG has been replaced with an updated version.
The previous logo had hardcoded fill colors, making it difficult to adapt to different color schemes, such as light and dark modes.
The new SVG uses `fill="currentColor"`, which allows its color to be controlled via the parent element's CSS `color` property. This makes the logo easily themeable and more flexible for use throughout the application.
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