feat(form): add loading state and replace custom switch component

This commit introduces a loading state for form submissions and replaces the custom switch component with a third-party library for improved user experience and maintainability.

- Adds `react-switch` as a dependency to replace the custom-built switch component, providing a more robust and feature-rich solution.
- Implements a loading indicator on form submission buttons and in the confirmation modal by utilizing the `useIsMutating` hook from TanStack Query. This provides clear visual feedback to the user during asynchronous operations.
- Creates a reusable `FormFooter` component to encapsulate the submit and cancel buttons, centralizing the form submission logic and loading state.
- Refactors the company create/edit forms to use the new `FormFooter` and `react-switch` components.
- Moves the `BreadcrumbItem` type to a shared types file for better code organization.

src/components/Tables/tenders/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import useTenderListPresenter from "./useTenderListPresenter";
 import Status from "@/components/ui/Status";
 import {
   Table,
@@ -10,13 +9,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import useTenderListPresenter from "./useTenderListPresenter";
 
-import { TendersSkeleton } from "./Skeleton";
-import { cn } from "@/lib/utils";
-import { getStatusColor } from "@/utils/shared";
 import { ExclamationIcon } from "@/assets/icons";
 import Pagination from "@/components/ui/pagination";
-import Page from "../../../app/forms/form-layout/page";
+import TableSkeleton from "@/components/ui/TableSkeleton";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
 const TendersTable = () => {
   const { allTenders, isPending, router, pathName, setParams } =
@@ -27,9 +25,9 @@ const TendersTable = () => {
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
-            {/* <TableHead colSpan={100} className="text-start font-extrabold">
+            <TableHead colSpan={100} className="text-start font-extrabold">
               Row
-            </TableHead> */}
+            </TableHead>
             <TableHead colSpan={100} className="text-start font-extrabold">
               Title
             </TableHead>
@@ -49,7 +47,7 @@ const TendersTable = () => {
           </TableRow>
         </TableHeader>
 
-        {isPending && <TendersSkeleton />}
+        {isPending && <TableSkeleton column={6} />}
         <TableBody>
           {allTenders?.data.tenders?.map((item, index) =>
             !item ? (
@@ -59,9 +57,9 @@ const TendersTable = () => {
                 key={item.id}
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
               >
-                {/* <TableCell className="text-start" colSpan={100}>
+                <TableCell className="text-start" colSpan={100}>
                   {index + 1}
-                </TableCell> */}
+                </TableCell>
                 <TableCell className="text-start" colSpan={100}>
                   {item.title}
                 </TableCell>

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -1,11 +1,11 @@
 "use client";
 import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
+import { apiDefaultParams } from "@/constants/Api_Params";
 import { useTendersQuery } from "@/hooks/queries";
 import useDebounce from "@/hooks/useDebounce";
 import { TCustomer } from "@/lib/api";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { useInView } from "react-intersection-observer";
+import { useEffect, useState } from "react";
 import { z } from "zod";
 const useTenderListPresenter = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -15,15 +15,13 @@ const useTenderListPresenter = () => {
     Partial<ConfirmationModalProps>
   >({});
   const [params, setParams] = useState<Record<string, any>>({
-    sort: "created_at",
+    ...apiDefaultParams,
   });
   const router = useRouter();
   const debouncedSearch = useDebounce(search, 1000);
   const pathName = usePathname();
   const { data, error, isPending } = useTendersQuery(params);
 
-  const { ref, inView } = useInView({ threshold: 0.5 });
-
   useEffect(() => {
     const result = z.string().safeParse(debouncedSearch);
     if (result.success) {
@@ -36,14 +34,8 @@ const useTenderListPresenter = () => {
   const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
   };
-  // const onConfirmDelete = () => {
-  //   if (currentTender) {
-  //     deleteTender(currentTender.id);
-  //   }
-  // };
 
   return {
-    ref,
     currentTender,
     setCurrentTender,
     search,