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>