feat(tender-list): add GSAP for animations and enhance table functionality

- Integrated GSAP for improved animations in the tender list components, enhancing user experience during data loading and transitions.
- Refactored TendersTable and TenderListFilters to utilize new animation features, providing smoother interactions.
- Updated TableBody and TableSkeleton components to support ref forwarding, improving flexibility in rendering and animations.
- Enhanced useTenderListPresenter to manage loading states and pagination more effectively, ensuring better data handling and user feedback.

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -3,10 +3,11 @@ import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
 import { apiDefaultParams } from "@/constants/Api_Params";
 import { useTendersQuery } from "@/hooks/queries";
 import { TCustomer } from "@/lib/api";
-import { deleteEmptyKeys } from "@/utils/shared";
+import { deleteEmptyKeys, getPaginatedRowNumber, unixToDate } from "@/utils/shared";
+import gsap from "gsap";
 import { useIsMutating } from "@tanstack/react-query";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 const COMMA_SEPARATED_FILTER_KEYS = new Set([
@@ -216,7 +217,6 @@ const TENDER_FILTER_MODAL_KEYS = new Set<string>([
 
 const useTenderListPresenter = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [currentTender, setCurrentTender] = useState<TCustomer | null>(null);
   const [modalConfig, setModalConfig] = useState<
     Partial<ConfirmationModalProps>
@@ -227,6 +227,10 @@ const useTenderListPresenter = () => {
   const searchParams = useSearchParams();
   const isMutating = useIsMutating();
 
+  const tableSectionRef = useRef<HTMLDivElement>(null);
+  const skeletonTbodyRef = useRef<HTMLTableSectionElement>(null);
+  const dataTbodyRef = useRef<HTMLTableSectionElement>(null);
+
   const {
     register: filterRegister,
     handleSubmit: handleFilterSubmit,
@@ -253,6 +257,110 @@ const useTenderListPresenter = () => {
   const shouldShowPagination =
     !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
 
+  const tendersList = data?.data?.tenders ?? [];
+
+  const langQuerySuffix = useMemo(() => {
+    const lang = params?.lang;
+    return typeof lang === "string" && lang.trim()
+      ? `?lang=${encodeURIComponent(lang)}`
+      : "";
+  }, [params?.lang]);
+
+  const navigateToTenderDetails = useCallback(
+    (tenderId: string) => {
+      router.push(`${pathName}/${tenderId}${langQuerySuffix}`);
+    },
+    [pathName, router, langQuerySuffix],
+  );
+
+  const navigateToTenderFeedback = useCallback(
+    (tenderId: string) => {
+      router.push(`${pathName}/feedback/${tenderId}${langQuerySuffix}`);
+    },
+    [pathName, router, langQuerySuffix],
+  );
+
+  const handlePaginationChange = useCallback(
+    (e: { selected: number }) => {
+      const limit = data?.meta?.limit ?? 10;
+      setParams((currentParams) => ({
+        ...currentParams,
+        offset: e.selected * limit,
+        limit,
+      }));
+    },
+    [data?.meta?.limit, setParams],
+  );
+
+  const getRowNumber = useCallback(
+    (index: number) =>
+      getPaginatedRowNumber({
+        index,
+        page: data?.meta?.page,
+        limit: data?.meta?.limit,
+      }),
+    [data?.meta?.limit, data?.meta?.page],
+  );
+
+  const formatDateTimeCell = useCallback((unix: number) => {
+    return unixToDate({ unix, hasTime: true });
+  }, []);
+
+  const pagination = useMemo(
+    () => ({
+      currentPage: data?.meta?.page ? data.meta.page - 1 : 0,
+      totalPages: data?.meta?.pages ?? 1,
+    }),
+    [data?.meta?.page, data?.meta?.pages],
+  );
+
+  useLayoutEffect(() => {
+    const reduced =
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    const ctx = gsap.context(() => {
+      if (reduced) return;
+
+      if (isPending) {
+        const tbody = skeletonTbodyRef.current;
+        if (!tbody) return;
+        const rows = tbody.querySelectorAll("tr");
+        gsap.fromTo(
+          rows,
+          { opacity: 0.35, y: 14 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: 0.42,
+            stagger: 0.032,
+            ease: "power2.out",
+          },
+        );
+        return;
+      }
+
+      const tbody = dataTbodyRef.current;
+      if (!tbody) return;
+      const rows = tbody.querySelectorAll("tr");
+      if (!rows.length) return;
+      gsap.fromTo(
+        rows,
+        { opacity: 0, y: 18 },
+        {
+          opacity: 1,
+          y: 0,
+          duration: 0.46,
+          stagger: 0.05,
+          ease: "power3.out",
+          clearProps: "opacity,transform",
+        },
+      );
+    }, tableSectionRef);
+
+    return () => ctx.revert();
+  }, [isPending, data]);
+
   const search = (data: any) => {
     const mappedDateRanges = mapDateRangeFilters(data);
     const normalizedData = normalizeFilterValues(mappedDateRanges);
@@ -266,8 +374,11 @@ const useTenderListPresenter = () => {
     const cleanedParams = deleteEmptyKeys(newParams);
     const queryString = new URLSearchParams(cleanedParams).toString();
     router.push(`${pathName}?${queryString}`);
-    setIsFilterModalOpen(false);
   };
+
+  const clearAllFilters = useCallback(() => {
+    router.push(pathName);
+  }, [pathName, router]);
   const columns = [
     "row",
     "title",
@@ -295,8 +406,7 @@ const useTenderListPresenter = () => {
     setIsModalOpen,
     modalConfig,
     setModalConfig,
-    isFilterModalOpen,
-    setIsFilterModalOpen,
+    clearAllFilters,
     filterRegister,
     handleFilterSubmit,
     search,
@@ -305,6 +415,16 @@ const useTenderListPresenter = () => {
     control,
     isMutating,
     shouldShowPagination,
+    tableSectionRef,
+    skeletonTbodyRef,
+    dataTbodyRef,
+    tendersList,
+    navigateToTenderDetails,
+    navigateToTenderFeedback,
+    handlePaginationChange,
+    getRowNumber,
+    formatDateTimeCell,
+    pagination,
   };
 };