feat(cms): Add CMS table with delete and edit functionality

- Implement CMS table with row listing and pagination
- Add delete functionality for CMS entries with confirmation modal
- Introduce edit button to navigate to edit page for specific CMS entry
- Update page type form to include new 'key' field for CMS entries
- Modify CMS service and types to support new data structure
- Enhance table presenter with additional actions and state management
Resolves data management and user interaction improvements for CMS module

src/components/Tables/cms/index.tsx

@@ -1,13 +1,29 @@
 "use client";
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import ListHeader from "@/components/ui/ListHeader";
-import { Table, TableBody, TableHead } from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
+import { unixToDate } from "@/utils/shared";
+import { Tooltip } from "react-tooltip";
 import { TableHeader, TableRow } from "../../ui/table";
 import useCmsTablePresenter from "./useCmsTablePresenter";
 
 const CmsTable = () => {
-  const { columns, data, isPending } = useCmsTablePresenter();
+  const {
+    columns,
+    data,
+    isPending,
+    isModalOpen,
+    setIsModalOpen,
+    currentCms,
+    setCurrentCms,
+    onConfirmDelete,
+    router,
+    pathname,
+  } = useCmsTablePresenter();
   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">
       <ListHeader />
@@ -28,10 +44,80 @@ const CmsTable = () => {
             columns={columns}
             emptyMessage="No Cms were found"
           >
-            Cms list will be added
+            {data?.data.cms.map((item, index) => (
+              <TableRow
+                key={item?.id || index}
+                className="odd:bg-gray-2 dark:odd:bg-gray-7"
+              >
+                <TableCell className="text-start" colSpan={100}>
+                  {index + 1}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {item.key}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {unixToDate({ unix: item.created_at, hasTime: true })}
+                </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={() => {
+                        setCurrentCms(item);
+                        setIsModalOpen(true);
+                      }}
+                    >
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
+                      <span className="sr-only">Delete Marketing </span>
+                      <TrashIcon />
+                    </button>
+                    <button
+                      data-tooltip-id="edit"
+                      data-tooltip-content="Edit"
+                      data-tooltip-place="top"
+                      className="hover:text-primary"
+                      onClick={() => router.push(`${pathname}/edit/${item.id}`)}
+                    >
+                      <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
+                      <span className="sr-only">Edit Marketing </span>
+                      <PencilSquareIcon />
+                    </button>
+                    {/* <button
+                      data-tooltip-id="details"
+                      data-tooltip-content="Details"
+                      data-tooltip-place="top"
+                      onClick={() => {
+                        router.push(`${pathname}/details/${item.id}`);
+                      }}
+                    >
+                      <Tooltip {..._TooltipDefaultParams({ id: "details" })} />
+                      <EyeIcon />
+                    </button> */}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
           </EmptyListWrapper>
         </TableBody>
       </Table>
+      {isModalOpen && (
+        <ConfirmationModal
+          isOpen={isModalOpen}
+          title={`Deleting ${currentCms?.key}`}
+          message={`Are you sure?`}
+          variant={"default"}
+          size={"md"}
+          confirmText={"Delete"}
+          cancelText={"Cancel"}
+          onConfirm={() => {
+            onConfirmDelete();
+          }}
+          onCancel={() => setIsModalOpen(false)}
+        />
+      )}
     </div>
   );
 };

src/components/Tables/cms/useCmsTablePresenter.ts

@@ -1,14 +1,35 @@
 "use client";
-import { useGetCmsList } from "@/hooks/queries/useCmsQueries";
+import { useDeleteCms, useGetCmsList } from "@/hooks/queries/useCmsQueries";
+import { TCms } from "@/lib/api/types/TCms";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
 
 const useCmsTablePresenter = () => {
-  const columns = ["row", "title", "created at"];
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentCms, setCurrentCms] = useState<TCms | null>(null);
+  const columns = ["row", "key", "created at", "actions"];
   const { isPending, data } = useGetCmsList();
-
+  const router = useRouter();
+  const pathname = usePathname();
+  const { mutate: deleteCms } = useDeleteCms(() => {
+    setIsModalOpen(false);
+    setCurrentCms(null);
+  });
+  const onConfirmDelete = () => {
+    if (!currentCms?.id) return;
+    deleteCms(currentCms.id);
+  };
   return {
     columns,
     isPending,
     data,
+    isModalOpen,
+    setIsModalOpen,
+    currentCms,
+    setCurrentCms,
+    onConfirmDelete,
+    router,
+    pathname,
   };
 };
 

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

@@ -3,6 +3,7 @@ import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
 import {
   Table,
   TableBody,
+  TableCell,
   TableHead,
   TableHeader,
   TableRow,
@@ -36,7 +37,9 @@ const ContactUsTable = () => {
             columns={columns}
             emptyMessage="No contact us is submitted"
           >
-            Contact us table will be initialized here
+            <TableRow>
+              <TableCell><div>hjgfjhg</div></TableCell>
+            </TableRow>
           </EmptyListWrapper>
         </TableBody>
       </Table>