feat(dependencies): add Lottie animation libraries and refactor NotFoundPage

- Added `@lottiefiles/dotlottie-react` and `lottie-react` dependencies for enhanced animation capabilities.
- Refactored the NotFoundPage component to utilize a dedicated NotFoundContent component, improving code organization and readability.
- Updated package.json and pnpm-lock.yaml to reflect new dependencies and their versions.

src/components/Tables/customers/useCustomerListPresenter.ts

@@ -6,18 +6,18 @@ import {
   useCustomersQuery,
   useDeleteCustomerQuery,
 } from "@/hooks/queries";
+import { useTableSectionRowAnimations } from "@/hooks/useTableSectionRowAnimations";
 import { TAssignCustomerToCompanyCredentials, TCustomer } from "@/lib/api";
 import { apiDefaultParams } from "@/constants/Api_Params";
 import { deleteEmptyKeys } from "@/utils/shared";
 import { useIsMutating } from "@tanstack/react-query";
-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 const useCustomerListPresenter = () => {
   const [isAssignCompanyModalOpen, setIsAssignCompanyModalOpen] =
     useState(false);
-  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [selectedCompanies, setSelectedCompanies] = useState<
     TAssignCustomerToCompanyCredentials | undefined
   >();
@@ -27,6 +27,7 @@ const useCustomerListPresenter = () => {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const pathName = usePathname();
+  const searchParams = useSearchParams();
   const [params, setParams] = useState<Record<string, any>>({
     ...apiDefaultParams,
   });
@@ -41,7 +42,31 @@ const useCustomerListPresenter = () => {
     setValue: setFilterValue,
   } = useForm();
 
+  const tableSectionRef = useRef<HTMLDivElement>(null);
+  const skeletonTbodyRef = useRef<HTMLTableSectionElement>(null);
+  const dataTbodyRef = useRef<HTMLTableSectionElement>(null);
+
+  useEffect(() => {
+    const newParams: Record<string, any> = {
+      ...apiDefaultParams,
+      offset: 0,
+      limit: 10,
+    };
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
+    }
+    setParams(newParams);
+    filterFormReset(newParams);
+  }, [searchParams, filterFormReset]);
+
   const { data, isPending } = useCustomersQuery(params);
+
+  useTableSectionRowAnimations(isPending, data, {
+    tableSectionRef,
+    skeletonTbodyRef,
+    dataTbodyRef,
+  });
+
   const assignCompanyCompaniesQuery = useCompanyFullList({
     enabled: isAssignCompanyModalOpen,
   });
@@ -55,15 +80,17 @@ const useCustomerListPresenter = () => {
     },
   );
 
-  const search = (data: any) => {
-    const newParams = { ...params, ...data, offset: 0 };
+  const search = (formData: any) => {
+    const newParams = { ...params, ...formData, offset: 0 };
     const cleanedParams = deleteEmptyKeys(newParams);
-    setParams(cleanedParams);
     const queryString = new URLSearchParams(cleanedParams).toString();
     router.push(`${pathName}?${queryString}`);
-    setIsFilterModalOpen(false);
   };
 
+  const clearAllFilters = useCallback(() => {
+    router.push(pathName);
+  }, [pathName, router]);
+
   const columns = [
     "row",
     "full name",
@@ -85,6 +112,26 @@ const useCustomerListPresenter = () => {
   const shouldShowPagination =
     !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
 
+  const pagination = useMemo(
+    () => ({
+      currentPage: data?.meta?.page ? data.meta.page - 1 : 0,
+      totalPages: data?.meta?.pages ?? 1,
+    }),
+    [data?.meta?.page, data?.meta?.pages],
+  );
+
+  const handlePaginationChange = useCallback(
+    (e: { selected: number }) => {
+      const limit = data?.meta?.limit ?? 10;
+      setParams((currentParams) => ({
+        ...currentParams,
+        offset: e.selected * limit,
+        limit,
+      }));
+    },
+    [data?.meta?.limit],
+  );
+
   return {
     allCustomers: customers,
     metadata: data?.meta,
@@ -102,8 +149,6 @@ const useCustomerListPresenter = () => {
     router,
     isModalOpen,
     setIsModalOpen,
-    isFilterModalOpen,
-    setIsFilterModalOpen,
     filterRegister,
     handleFilterSubmit,
     search,
@@ -113,6 +158,12 @@ const useCustomerListPresenter = () => {
     setParams,
     assignCompanyCompaniesQuery,
     shouldShowPagination,
+    clearAllFilters,
+    tableSectionRef,
+    skeletonTbodyRef,
+    dataTbodyRef,
+    pagination,
+    handlePaginationChange,
   };
 };