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/app/marketing/create/page.tsx

@@ -24,6 +24,7 @@ interface IPageTypeFields {
   language?: string;
   company_name?: string;
   country?: string;
+  key: string;
 }
 
 const Marketing = () => {
@@ -152,7 +153,8 @@ const Marketing = () => {
 
     const finalData = {
       ...allData,
-      page_type: pageTypeData.type,
+      type: pageTypeData.type,
+      key: pageTypeData.key,
       ...(pageTypeData.type === "company" && {
         language: pageTypeData.language,
         company_name: pageTypeData.company_name,
@@ -229,7 +231,7 @@ const Marketing = () => {
               {...registerPageType("type", {
                 required: { message: FormErrorMessages.required, value: true },
               })}
-              name="page_type"
+              name="type"
               label="Page Type"
               required
               items={[
@@ -310,6 +312,23 @@ const Marketing = () => {
                 {pageTypeErrors.country.message}
               </p>
             )}
+            <InputGroup
+              {...registerPageType("key", {
+                required: {
+                  value: true,
+                  message: FormErrorMessages.required,
+                },
+              })}
+              label="Page key"
+              name="key"
+              placeholder="Please enter page key"
+              type="text"
+            />
+            {pageTypeErrors.key && (
+              <p className="mt-1 text-sm text-red-500">
+                {pageTypeErrors.key.message}
+              </p>
+            )}
           </div>
         </div>
 

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>

src/hooks/queries/useCmsQueries.ts

@@ -1,7 +1,9 @@
 import { API_ENDPOINTS } from "@/lib/api";
 import { cmsService } from "@/lib/api/services/cms-service";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
 import { useMemo } from "react";
+import { toast } from "react-toastify";
 
 export const useGetCmsList = () => {
   const queryKey = useMemo(() => [API_ENDPOINTS.CMS.BASE()], []);
@@ -18,6 +20,8 @@ export const useGetCmsDetails = (id: string) => {
   });
 };
 export const useCreateCms = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const mutationKey = useMemo(
     () => [API_ENDPOINTS.CMS.BASE(), "Create cms"],
     [],
@@ -25,5 +29,30 @@ export const useCreateCms = () => {
   return useMutation({
     mutationKey,
     mutationFn: cmsService.createCms,
+    onSuccess: ({ data }: { data: { message: string } }) => {
+      toast.success(data.message);
+      router.push("/marketing");
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.CMS.BASE()],
+      });
+    },
+  });
+};
+export const useDeleteCms = (successCallback?: () => void) => {
+  const queryClient = useQueryClient();
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.CMS.BASE(), "Delete CMS"],
+    [],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: cmsService.deleteCms,
+    onSuccess: ({ data }: { data: { message: string } }) => {
+      toast.success(data.message);
+      successCallback?.();
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.CMS.BASE()],
+      });
+    },
   });
 };

src/lib/api/services/cms-service.ts

@@ -28,4 +28,12 @@ export const cmsService = {
       throw error;
     }
   },
+  deleteCms: async (id: string) => {
+    try {
+      return (await api.delete(API_ENDPOINTS.CMS.BASE(id))).data;
+    } catch (error) {
+      console.error("Error caught in CMS Service => delete CMS: ", error);
+      throw error;
+    }
+  },
 };

src/lib/api/types/TCms.ts

@@ -155,6 +155,7 @@ export const cmsListResponseSchema = z.object({
 export const cmsDetailsResponse = z.object({
   cms: CmsSchema,
 });
+export type TCms = z.infer<typeof CmsSchema>;
 export type TCmsListResponse = z.infer<typeof cmsListResponseSchema>;
-export type TCmsDetailsResponse = z.infer<typeof cmsDetailsResponse>
+export type TCmsDetailsResponse = z.infer<typeof cmsDetailsResponse>;
 export type TCmsCredentials = z.infer<typeof CmsCredentials>;