feat(contact-us & feedback tables): implement pagination and loading states

- Added pagination functionality to ContactUsTable and FeedbackTable components, enhancing user navigation through large datasets.
- Integrated loading states to provide visual feedback during data fetching.
- Updated data fetching hooks to accept parameters for improved query handling.
- Refactored table row rendering to include pagination metadata for accurate row numbering.
- Enhanced overall user experience by conditionally rendering pagination controls based on data availability.

src/components/Tables/feedback-table/useFeedbackTablePresenter.ts

@@ -1,14 +1,38 @@
+"use client";
+import { apiDefaultParams } from "@/constants/Api_Params";
 import { useGetFeedback } from "@/hooks/queries";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
 
 interface IProps {
   id: string;
   paramKey: "tender_id" | "company_id" | "customer_id";
 }
+
 const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
-  const { data, isLoading } = useGetFeedback({ [paramKey]: id });
+  const [params, setParams] = useState<Record<string, unknown>>({});
+  const searchParams = useSearchParams();
   const router = useRouter();
   const pathName = usePathname();
+
+  useEffect(() => {
+    const newParams: Record<string, unknown> = {
+      ...apiDefaultParams,
+      offset: 0,
+      limit: 10,
+    };
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
+    }
+    setParams(newParams);
+  }, [searchParams]);
+
+  const queryParams = useMemo(
+    () => ({ ...params, [paramKey]: id }),
+    [params, paramKey, id],
+  );
+
+  const { data, isLoading } = useGetFeedback(queryParams);
   const columns = [
     "row",
     "feedback type",
@@ -16,12 +40,17 @@ const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
     "created at",
     "actions",
   ];
+
+  const shouldShowPagination =
+    !isLoading &&
+    (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
+
   const getShowcaseSectionTitle = () => {
     if (paramKey === "tender_id") {
-      return `: ${data?.data?.[0]?.tender?.title}`;
-    } else {
-      return "";
+      const title = data?.data?.[0]?.tender?.title;
+      return title ? `: ${title}` : "";
     }
+    return "";
   };
   return {
     isLoading,
@@ -30,6 +59,9 @@ const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
     pathName,
     router,
     getShowcaseSectionTitle,
+    metadata: data?.meta,
+    setParams,
+    shouldShowPagination,
   };
 };