feat(reset-password): implement reset password functionality for admins and customers

- Added new ResetPasswordModalContent component for displaying generated passwords.
- Integrated reset password functionality in the AdminsTable and CustomersTable components, allowing users to reset passwords for admins and customers.
- Created useResetPasswordModalPresenter hook to manage password visibility and clipboard copying.
- Updated API services and hooks to support reset password requests for both admins and customers.
- Enhanced tooltip functionality for reset password actions in the tables.

src/components/Tables/customers/index.tsx

@@ -1,5 +1,10 @@
 "use client";
-import { ExclamationIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import {
+  ExclamationIcon,
+  KeyIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from "@/assets/icons";
 import { Building } from "@/components/Layouts/sidebar/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
@@ -8,6 +13,7 @@ import ListHeader from "@/components/ui/ListHeader";
 import ListWrapper from "@/components/ui/ListWrapper";
 import Modal from "@/components/ui/modal";
 import Pagination from "@/components/ui/pagination";
+import ResetPasswordModalContent from "@/components/ui/ResetPasswordModalContent";
 import Status from "@/components/ui/Status";
 import {
   Table,
@@ -58,6 +64,11 @@ const CustomersTable = () => {
     dataTbodyRef,
     pagination,
     handlePaginationChange,
+    isResetPasswordModalOpen,
+    closeResetPasswordModal,
+    openResetPasswordModalForCustomer,
+    generatedPassword,
+    isResettingPassword,
   } = useCustomerListPresenter();
 
   return (
@@ -215,6 +226,26 @@ const CustomersTable = () => {
                           <span className="sr-only">Assign To Company </span>
                           <Building />
                         </button>
+                        <button
+                          type="button"
+                          data-tooltip-id="reset-password"
+                          data-tooltip-content="Reset password"
+                          data-tooltip-place="top"
+                          className="hover:text-primary"
+                          onClick={() =>
+                            openResetPasswordModalForCustomer(customer)
+                          }
+                        >
+                          <Tooltip
+                            {..._TooltipDefaultParams({
+                              id: "reset-password",
+                            })}
+                          />
+                          <span className="sr-only">
+                            Reset Customer Password
+                          </span>
+                          <KeyIcon />
+                        </button>
                         <button
                           data-tooltip-id="feedback"
                           data-tooltip-content="Feedback"
@@ -269,6 +300,19 @@ const CustomersTable = () => {
           />
         </Modal>
       </div>
+      <Modal
+        isOpen={isResetPasswordModalOpen}
+        onClose={closeResetPasswordModal}
+        showButtons={false}
+      >
+        <ResetPasswordModalContent
+          subjectName={currentCustomer?.full_name}
+          subjectLabel="customer"
+          password={generatedPassword}
+          isLoading={isResettingPassword}
+          isOpen={isResetPasswordModalOpen}
+        />
+      </Modal>
       {isModalOpen && (
         <ConfirmationModal
           isOpen={isModalOpen}

src/components/Tables/customers/useCustomerListPresenter.ts

@@ -5,6 +5,7 @@ import {
   useCompanyFullList,
   useCustomersQuery,
   useDeleteCustomerQuery,
+  useResetCustomerPassword,
 } from "@/hooks/queries";
 import { useHybridPagination } from "@/hooks/useHybridPagination";
 import { useTableSectionRowAnimations } from "@/hooks/useTableSectionRowAnimations";
@@ -27,6 +28,11 @@ const useCustomerListPresenter = () => {
   );
 
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isResetPasswordModalOpen, setIsResetPasswordModalOpen] =
+    useState(false);
+  const [generatedPassword, setGeneratedPassword] = useState<string | null>(
+    null,
+  );
   const pathName = usePathname();
   const searchParams = useSearchParams();
   const [params, setParams] = useState<Record<string, any>>({
@@ -90,6 +96,26 @@ const useCustomerListPresenter = () => {
     },
   );
 
+  const { mutate: resetCustomerPassword, isPending: isResettingPassword } =
+    useResetCustomerPassword({
+      successCallback: (password) => setGeneratedPassword(password),
+    });
+
+  const openResetPasswordModalForCustomer = useCallback(
+    (customer: TCustomer) => {
+      setCurrentCustomer(customer);
+      setGeneratedPassword(null);
+      setIsResetPasswordModalOpen(true);
+      resetCustomerPassword(customer.id);
+    },
+    [resetCustomerPassword],
+  );
+
+  const closeResetPasswordModal = useCallback(() => {
+    setIsResetPasswordModalOpen(false);
+    setGeneratedPassword(null);
+  }, []);
+
   const search = (formData: any) => {
     const newParams = buildFirstPageParams({ ...params, ...formData });
     const cleanedParams = deleteEmptyKeys(newParams);
@@ -154,6 +180,11 @@ const useCustomerListPresenter = () => {
     dataTbodyRef,
     pagination,
     handlePaginationChange,
+    isResetPasswordModalOpen,
+    closeResetPasswordModal,
+    openResetPasswordModalForCustomer,
+    generatedPassword,
+    isResettingPassword,
   };
 };