feat(marketing): Refactor marketing wizard steps and add data collection methods

- Moved all marketing wizard step components to `create/_components` directory
- Added `collectData` static method to each step component for data retrieval
- Reorganized file structure to improve component modularity
- Prepared steps for dynamic data collection in wizard workflow
- Added VSCode settings file for project configuration
- Introduced new CMS-related components and services
- Updated API endpoints and added new query hooks

src/app/marketing/create/_components/ChallengesStep.tsx

@@ -33,3 +33,8 @@ const ChallengesStep = () => {
 };
 
 export default ChallengesStep;
+
+ChallengesStep.collectData = async () => {
+  const { getValues } = useChallengesStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/ChartStep.tsx

@@ -125,3 +125,8 @@ const ChartStep = () => {
 };
 
 export default ChartStep;
+
+ChartStep.collectData = async () => {
+  const { getValues } = useChartStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/ContactsStep.tsx

@@ -90,3 +90,13 @@ const ContactsStep = () => {
 };
 
 export default ContactsStep;
+
+ContactsStep.collectData = async () => {
+  const { getValues } = useContactsStepPresenter();
+  return getValues();
+}
+
+ContactsStep.collectData = async () => {
+  const { getValues } = useContactsStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/FeaturesStep.tsx

@@ -33,3 +33,8 @@ const FeaturesStep = () => {
 };
 
 export default FeaturesStep;
+
+FeaturesStep.collectData = async () => {
+  const { getValues } = useFeaturesStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/FooterStep.tsx

@@ -70,3 +70,8 @@ const FooterStep = () => {
 };
 
 export default FooterStep;
+
+FooterStep.collectData = async () => {
+  const { getValues } = useFooterStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/HeroStep.tsx

@@ -131,4 +131,9 @@ const HeroStep = () => {
   );
 };
 
+HeroStep.collectData = async () => {
+  const { getValues } = useHeroStepPresenter();
+  return getValues();
+}
+
 export default HeroStep;

src/app/marketing/create/_components/useChallengesStepPresenter.ts

@@ -18,6 +18,7 @@ const useChallengesStepPresenter = () => {
     control,
     watch,
     formState: { errors },
+    getValues
   } = useForm<IChallengesStepFields>({
     defaultValues: {
       challenges: [{ icon: "", title: "", description: "" }],
@@ -33,6 +34,10 @@ const useChallengesStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -43,6 +48,8 @@ const useChallengesStepPresenter = () => {
     remove,
     control,
     watch,
+    getValues,
+    collectData
  };
 };
 

src/app/marketing/create/_components/useChartStepPresenter.ts

@@ -14,6 +14,7 @@ const useChartStepPresenter = () => {
     control,
     watch,
     formState: { errors },
+    getValues
   } = useForm<IChartStepFields>({
     defaultValues: {
       chart_points: [{ x: "", y: 0 }],
@@ -29,6 +30,10 @@ const useChartStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -39,6 +44,8 @@ const useChartStepPresenter = () => {
     remove,
     control,
     watch,
+    getValues,
+    collectData
   };
 };
 

src/app/marketing/create/_components/useContactsStepPresenter.ts

@@ -18,6 +18,8 @@ const useContactsStepPresenter = () => {
     register,
     handleSubmit,
     control,
+    getValues,
+
     formState: { errors },
   } = useForm<IContactsStepFields>({
     defaultValues: {
@@ -49,6 +51,10 @@ const useContactsStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -56,6 +62,8 @@ const useContactsStepPresenter = () => {
     onSubmit,
     fields,
     control,
+    collectData,
+    getValues,
   };
 };
 

src/app/marketing/create/_components/useFeaturesStepPresenter.ts

@@ -18,6 +18,7 @@ const useFeaturesStepPresenter = () => {
     control,
     watch,
     formState: { errors },
+    getValues
   } = useForm<IFeaturesStepFields>({
     defaultValues: {
       features: [{ icon: "", title: "", description: "" }],
@@ -33,6 +34,10 @@ const useFeaturesStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -43,6 +48,8 @@ const useFeaturesStepPresenter = () => {
     remove,
     control,
     watch,
+    getValues,
+    collectData
  };
 };
 

src/app/marketing/create/_components/useFooterStepPresenter.ts

@@ -13,17 +13,24 @@ const useFooterStepPresenter = () => {
     register,
     handleSubmit,
     formState: { errors },
+    getValues
   } = useForm<FooterFormValues>();
 
   const onSubmit = (data: FooterFormValues) => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
     onSubmit,
     errors,
+   collectData,
+   getValues,
  };
 };
 

src/app/marketing/create/_components/useHeroStepPresenter.ts

@@ -14,6 +14,7 @@ const useHeroStepPresenter = () => {
     register,
     handleSubmit,
     formState: { errors },
+    getValues,
   } = useForm<IHeroStepFields>();
 
   const onSubmit = (data: IHeroStepFields) => {
@@ -25,7 +26,13 @@ const useHeroStepPresenter = () => {
     handleSubmit,
     errors,
     onSubmit,
+    getValues,
   };
 };
 
+(useHeroStepPresenter as any).collectData = async () => {
+  const { getValues } = useForm<IHeroStepFields>();
+  return getValues();
+};
+
 export default useHeroStepPresenter;

src/app/marketing/create/page.tsx

@@ -0,0 +1,112 @@
+"use client";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import Stepper, { Step } from "@/components/ui/Stepper";
+import { BreadcrumbItem } from "@/types/shared";
+import { useRef, useState } from "react";
+import ChallengesStep from "./_components/ChallengesStep";
+import ChartStep from "./_components/ChartStep";
+import ContactsStep from "./_components/ContactsStep";
+import FeaturesStep from "./_components/FeaturesStep";
+import FooterStep from "./_components/FooterStep";
+import HeroStep from "./_components/HeroStep";
+
+const Marketing = () => {
+  const [step, setStep] = useState(0);
+  const heroRef = useRef<any>(null);
+  const chartRef = useRef<any>(null);
+  const featuresRef = useRef<any>(null);
+  const challengesRef = useRef<any>(null);
+  const benefitsRef = useRef<any>(null);
+  const contactsRef = useRef<any>(null);
+  const footerRef = useRef<any>(null);
+  const breadcrumbItems: BreadcrumbItem[] = [
+    {
+      href: "/",
+      name: "Dashboard",
+    },
+    {
+      href: "/marketing",
+      name: "Marketing",
+    },
+    {
+      href: "/marketing/create",
+      name: "Create Marketing",
+    },
+  ];
+
+  const collectStepData = async (stepIndex: number) => {
+    let stepData = {};
+    const refs = [heroRef, chartRef, featuresRef, challengesRef, benefitsRef, contactsRef, footerRef];
+    
+    const currentRef = refs[stepIndex];
+    if (currentRef?.current?.collectData) {
+      stepData = await currentRef.current.collectData();
+      
+      // Submit data to backend
+      if (stepData) {
+        await submitData(stepData, stepIndex);
+      }
+    }
+  };
+
+  const submitData = async (data: any, stepIndex: number) => {
+    const apiUrl = "/api/marketing-data";
+    console.log(`Submitting data for step ${stepIndex}:`, data);
+  };
+
+  const steps: Step[] = [
+    {
+      title: "Hero",
+      description: "Create the hero section",
+      content: <HeroStep />,
+    },
+    {
+      title: "Chart",
+      description: "Create the chart",
+      content: <ChartStep />,
+    },
+    {
+      title: "Features",
+      description: "Add features",
+      content: <FeaturesStep />,
+    },
+    {
+      title: "Challenges",
+      description: "Create challenges section",
+      content: <ChallengesStep />,
+    },
+    {
+      title: "Benefits",
+      description: "create benefits section",
+      content: <ChallengesStep />,
+    },
+    {
+      title: "Contacts",
+      description: "Create contacts section",
+      content: <ContactsStep />,
+    },
+    {
+      title: "Footer",
+      description: "Add footer information",
+      content: <FooterStep />,
+    },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <ShowcaseSection title="Create Marketing page">
+        <Stepper
+          steps={steps}
+          currentStep={step}
+          onStepChange={(newStep) => {
+            collectStepData(step);
+            setStep(newStep);
+          }}
+        ></Stepper>
+      </ShowcaseSection>
+    </>
+  );
+};
+
+export default Marketing;

src/app/marketing/page.tsx

@@ -1,18 +1,8 @@
-"use client";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
-import Stepper, { Step } from "@/components/ui/Stepper";
+import CmsTable from "@/components/Tables/cms";
 import { BreadcrumbItem } from "@/types/shared";
-import { useState } from "react";
-import { ShowcaseSection } from "../../components/Layouts/showcase-section";
-import ChallengesStep from "./_components/ChallengesStep";
-import ChartStep from "./_components/ChartStep";
-import ContactsStep from "./_components/ContactsStep";
-import FeaturesStep from "./_components/FeaturesStep";
-import FooterStep from "./_components/FooterStep";
-import HeroStep from "./_components/HeroStep";
 
-const Marketing = () => {
-  const [step, setStep] = useState(5);
+const MarketingPage = () => {
   const breadcrumbItems: BreadcrumbItem[] = [
     {
       href: "/",
@@ -23,55 +13,12 @@ const Marketing = () => {
       name: "Marketing",
     },
   ];
-  const steps: Step[] = [
-    {
-      title: "Hero",
-      description: "Create the hero section",
-      content: <HeroStep />,
-    },
-    {
-      title: "Chart",
-      description: "Create the chart",
-      content: <ChartStep />,
-    },
-    {
-      title: "Features",
-      description: "Add features",
-      content: <FeaturesStep />,
-    },
-    {
-      title: "Challenges",
-      description: "Create challenges section",
-      content: <ChallengesStep />,
-    },
-    {
-      title: "Benefits",
-      description: "create benefits section",
-      content: <ChallengesStep />,
-    },
-    {
-      title: "Contacts",
-      description: "Create contacts section",
-      content: <ContactsStep />,
-    },
-    {
-      title: "Footer",
-      description: "Add footer information",
-      content: <FooterStep />,
-    },
-  ];
   return (
     <>
       <Breadcrumb items={breadcrumbItems} />
-      <ShowcaseSection title="Create Marketing page">
-        <Stepper
-          steps={steps}
-          currentStep={step}
-          onStepChange={setStep}
-        ></Stepper>
-      </ShowcaseSection>
+      <CmsTable />
     </>
   );
 };
 
-export default Marketing;
+export default MarketingPage;

src/components/Auth/Signin/index.tsx

@@ -1,5 +1,3 @@
-import Link from "next/link";
-import GoogleSigninButton from "../GoogleSigninButton";
 import SigninWithPassword from "../SigninWithPassword";
 
 export default function Signin() {

src/components/HOC/EmptyListWrapper.tsx

@@ -0,0 +1,30 @@
+import { TableCell, TableRow } from "@/components/ui/table";
+import { ReactNode } from "react";
+
+interface EmptyListWrapperProps<T> {
+  list: T[];
+  emptyMessage: string;
+  columns: string[];
+  children: ReactNode;
+}
+
+function EmptyListWrapper<T>({
+  list,
+  emptyMessage,
+  columns,
+  children,
+}: EmptyListWrapperProps<T>) {
+  if (!list.length) {
+    return (
+      <TableRow>
+        <TableCell className="text-center" colSpan={columns.length * 100}>
+          <h2>{emptyMessage}</h2>
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export default EmptyListWrapper;

src/components/Tables/cms/index.tsx

@@ -0,0 +1,39 @@
+"use client";
+import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+import ListHeader from "@/components/ui/ListHeader";
+import { Table, TableBody, TableHead } from "@/components/ui/table";
+import TableSkeleton from "@/components/ui/TableSkeleton";
+import { TableHeader, TableRow } from "../../ui/table";
+import useCmsTablePresenter from "./useCmsTablePresenter";
+
+const CmsTable = () => {
+  const { columns, data, isPending } = 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 />
+      <Table>
+        <TableHeader>
+          <TableRow className="border-none uppercase [&>th]:text-start">
+            {columns.map((column) => (
+              <TableHead key={column} colSpan={100}>
+                {column}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        {isPending && <TableSkeleton column={columns.length} />}
+        <TableBody>
+          <EmptyListWrapper
+            list={data?.data.cms ?? []}
+            columns={columns}
+            emptyMessage="No Cms were found"
+          >
+            Hollo
+          </EmptyListWrapper>
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default CmsTable;

src/components/Tables/cms/useCmsTablePresenter.ts

@@ -0,0 +1,15 @@
+"use client";
+import { useGetCmsList } from "@/hooks/queries/useCmsQueries";
+
+const useCmsTablePresenter = () => {
+  const columns = ["row", "title", "created at"];
+  const { isPending, data } = useGetCmsList();
+
+  return {
+    columns,
+    isPending,
+    data,
+  };
+};
+
+export default useCmsTablePresenter;

src/hooks/queries/useCmsQueries.ts

@@ -0,0 +1,22 @@
+import { API_ENDPOINTS } from "@/lib/api";
+import { cmsService } from "@/lib/api/services/cms-service";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+export const useGetCmsList = () => {
+  const queryKey = useMemo(() => [API_ENDPOINTS.CMS.BASE()], []);
+  return useQuery({
+    queryKey,
+    queryFn: cmsService.getCms,
+  });
+};
+export const useCreateCms = () => {
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.CMS.BASE(), "Create cms"],
+    [],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: cmsService.createCms,
+  });
+};

src/lib/api/endpoints.ts

@@ -3,6 +3,9 @@ export const API_ENDPOINTS = {
   POSTS: {
     READ_ALL: "posts ",
   },
+  CMS: {
+    BASE: (id?: string) => (id ? `cms/${id}` : "cms"),
+  },
   USER: {
     LOGIN: "profile/login",
     LOGOUT: "profile/logout",

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

@@ -0,0 +1,23 @@
+import api from "../axios";
+import { API_ENDPOINTS } from "../endpoints";
+import { ApiResponse } from "../types";
+import { TCmsResponse } from "../types/TCms";
+
+export const cmsService = {
+  getCms: async (): Promise<ApiResponse<TCmsResponse>> => {
+    try {
+      return (await api.get(API_ENDPOINTS.CMS.BASE())).data;
+    } catch (error) {
+      console.error("Error Caught in CMS Service => Get cms", error);
+      throw error;
+    }
+  },
+  createCms: async (data: any) => {
+    try {
+      return (await api.post(API_ENDPOINTS.CMS.BASE(), data)).data;
+    } catch (error) {
+      console.error("Error Caught in CMS Service => Create cms", error);
+      throw error;
+    }
+  },
+};

src/lib/api/types/TCms.ts

@@ -0,0 +1,84 @@
+import { z } from "zod";
+
+const CmsSchema = z.object({
+  cms: z.array(
+    z.object({
+      advantages: z.object({
+        cards: z.array(
+          z.object({
+            description: z.string(),
+            icon: z.string(),
+            title: z.string(),
+          }),
+        ),
+        description: z.string(),
+        title: z.string(),
+      }),
+      challenges: z.object({
+        cards: z.array(
+          z.object({
+            description: z.string(),
+            icon: z.string(),
+            title: z.string(),
+          }),
+        ),
+        description: z.string(),
+        title: z.string(),
+      }),
+      chart: z.object({
+        data: z.array(
+          z.object({
+            key: z.string(),
+            value: z.number(),
+          }),
+        ),
+        missedAmount: z.string(),
+        title: z.string(),
+      }),
+      contact: z.object({
+        description: z.string(),
+        fields: z.array(
+          z.object({
+            label: z.string(),
+            name: z.string(),
+            placeholder: z.string(),
+            required: z.boolean(),
+          }),
+        ),
+        submitButtonText: z.string(),
+        title: z.string(),
+      }),
+      features: z.object({
+        cards: z.array(
+          z.object({
+            description: z.string(),
+            icon: z.string(),
+            title: z.string(),
+          }),
+        ),
+        description: z.string(),
+        title: z.string(),
+      }),
+      footer: z.object({
+        copyright: z.string(),
+        email: z.string(),
+        location: z.string(),
+        phone: z.string(),
+        tagline: z.string(),
+      }),
+      hero: z.object({
+        buttonLink: z.string(),
+        buttonText: z.string(),
+        description: z.string(),
+        gifFile: z.string(),
+        title: z.string(),
+      }),
+      created_at: z.number(),
+      updated_at: z.number(),
+      id: z.string(),
+      key: z.string(),
+      type: z.string(),
+    }),
+  ),
+});
+export type TCmsResponse = z.infer<typeof CmsSchema>;