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/feedback-table/useFeedbackTablePresenter.ts

@@ -1,8 +1,12 @@
 "use client";
 import { apiDefaultParams } from "@/constants/Api_Params";
 import { useGetFeedback } from "@/hooks/queries";
+import { useTableSectionRowAnimations } from "@/hooks/useTableSectionRowAnimations";
+import { deleteEmptyKeys } from "@/utils/shared";
+import { useIsMutating } from "@tanstack/react-query";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
 
 interface IProps {
   id: string;
@@ -14,6 +18,19 @@ const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathName = usePathname();
+  const isMutating = useIsMutating();
+
+  const {
+    register: filterRegister,
+    handleSubmit: handleFilterSubmit,
+    reset: filterFormReset,
+    watch,
+    setValue: setFilterValue,
+  } = useForm();
+
+  const tableSectionRef = useRef<HTMLDivElement>(null);
+  const skeletonTbodyRef = useRef<HTMLTableSectionElement>(null);
+  const dataTbodyRef = useRef<HTMLTableSectionElement>(null);
 
   useEffect(() => {
     const newParams: Record<string, unknown> = {
@@ -25,7 +42,8 @@ const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
       newParams[key] = value;
     }
     setParams(newParams);
-  }, [searchParams]);
+    filterFormReset(newParams as any);
+  }, [searchParams, filterFormReset]);
 
   const queryParams = useMemo(
     () => ({ ...params, [paramKey]: id }),
@@ -33,6 +51,13 @@ const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
   );
 
   const { data, isLoading } = useGetFeedback(queryParams);
+
+  useTableSectionRowAnimations(isLoading, data, {
+    tableSectionRef,
+    skeletonTbodyRef,
+    dataTbodyRef,
+  });
+
   const columns = [
     "row",
     "feedback type",
@@ -45,6 +70,39 @@ const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
     !isLoading &&
     (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],
+  );
+
+  const search = (formData: any) => {
+    const next = { ...params, ...formData, offset: 0 };
+    const cleaned = deleteEmptyKeys(next);
+    const queryString = new URLSearchParams(
+      cleaned as Record<string, string>,
+    ).toString();
+    router.push(`${pathName}?${queryString}`);
+  };
+
+  const clearAllFilters = useCallback(() => {
+    router.push(pathName);
+  }, [pathName, router]);
+
   const getShowcaseSectionTitle = () => {
     if (paramKey === "tender_id") {
       const title = data?.data?.[0]?.tender?.title;
@@ -62,6 +120,18 @@ const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
     metadata: data?.meta,
     setParams,
     shouldShowPagination,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    clearAllFilters,
+    tableSectionRef,
+    skeletonTbodyRef,
+    dataTbodyRef,
+    pagination,
+    handlePaginationChange,
+    isMutating,
   };
 };