feat(contact-us): Add delete functionality to contact us table

- Add delete button with trash icon to contact us table rows
- Implement confirmation modal for delete action
- Create useDeleteContactUs mutation hook with success callback
- Add deleteContactUs method to contact-us service
- Update API endpoints to support BASE() function for dynamic ID routing
- Add state management for modal open/close and current contact selection
- Integrate toast notifications for delete success feedback
- Add tooltip component to delete button for better UX
- Update query key to use BASE() endpoint for consistency

src/components/Tables/contact-us/index.tsx

@@ -1,5 +1,7 @@
 "use client";
+import { TrashIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -9,12 +11,24 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
-import { useContactUsListPresenter } from "./useContactUsListPresenter";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { unixToDate } from "@/utils/shared";
+import { Tooltip } from "react-tooltip";
+import { useContactUsListPresenter } from "./useContactUsListPresenter";
 
 const ContactUsTable = () => {
-  const { columns, pathname, router, isPending, contacts } =
-    useContactUsListPresenter();
+  const {
+    columns,
+    pathname,
+    router,
+    isPending,
+    contacts,
+    onConfirmDelete,
+    setIsModalOpen,
+    setCurrentContact,
+    isModalOpen,
+    currentContact,
+  } = useContactUsListPresenter();
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <Table>
@@ -61,11 +75,44 @@ const ContactUsTable = () => {
                 <TableCell className="text-start" colSpan={100}>
                   {unixToDate({ unix: item?.created_at })}
                 </TableCell>
+                <TableCell className="text-start xl:pr-7.5">
+                  <div className="flex items-center justify-start gap-x-3.5">
+                    <button
+                      data-tooltip-id="delete"
+                      data-tooltip-content="Delete"
+                      data-tooltip-place="top"
+                      className="hover:text-red-500"
+                      onClick={() => {
+                        setCurrentContact(item);
+                        setIsModalOpen(true);
+                      }}
+                    >
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
+                      <span className="sr-only">Delete Contact Us </span>
+                      <TrashIcon />
+                    </button>
+                  </div>
+                </TableCell>
               </TableRow>
             ))}
           </EmptyListWrapper>
         </TableBody>
       </Table>
+      {isModalOpen && (
+        <ConfirmationModal
+          isOpen={isModalOpen}
+          title={`Deleting ${currentContact?.full_name}`}
+          message={`Are you sure?`}
+          variant={"default"}
+          size={"md"}
+          confirmText={"Delete"}
+          cancelText={"Cancel"}
+          onConfirm={() => {
+            onConfirmDelete();
+          }}
+          onCancel={() => setIsModalOpen(false)}
+        />
+      )}
     </div>
   );
 };

src/components/Tables/contact-us/useContactUsListPresenter.ts

@@ -1,7 +1,14 @@
 "use client";
-import { useReadAllContactUs } from "@/hooks/queries/useContactUsQuery";
+import {
+  useDeleteContactUs,
+  useReadAllContactUs,
+} from "@/hooks/queries/useContactUsQuery";
+import { TContact } from "@/lib/api/types/TContacts";
 import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
 export const useContactUsListPresenter = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentContact, setCurrentContact] = useState<TContact>();
   const columns: string[] = [
     "row",
     "Full name",
@@ -14,11 +21,24 @@ export const useContactUsListPresenter = () => {
   const pathname = usePathname();
   const router = useRouter();
   const { data, isPending } = useReadAllContactUs();
+  const { mutate: deleteContactUS } = useDeleteContactUs(() =>
+    setIsModalOpen(false),
+  );
+
+  const onConfirmDelete = () => {
+    if (!currentContact) return;
+    deleteContactUS(currentContact?.id);
+  };
   return {
     columns,
     pathname,
     router,
     isPending,
     contacts: data?.data.contacts,
+    onConfirmDelete,
+    setIsModalOpen,
+    setCurrentContact,
+    isModalOpen,
+    currentContact,
   };
 };