From efbdb825355c12deb77d72fc99abc9911126301b Mon Sep 17 00:00:00 2001 From: AmirReza Jamali Date: Tue, 11 Nov 2025 15:22:12 +0330 Subject: [PATCH] feat: Add CMS context, hooks, and types for managing CMS data - Implemented CmsContext and CmsProvider for global state management of CMS data. - Created a custom hook `useGetCms` to fetch CMS data using React Query. - Defined TypeScript interfaces for CMS response and its related data structures. - Added error handling for data fetching in both the service and context. --- app/_components/ApexChart.tsx | 25 ++---------- app/marketing/[id]/page.tsx | 22 ++++++++-- app/marketing/layout.tsx | 2 +- app/marketing/page.tsx | 12 +++--- context/Cms.ctx.tsx | 43 +++++++++++++++++++ hooks/useCmsQueries.ts | 21 ++++++++++ package-lock.json | 27 ++++++++++++ package.json | 1 + public/file.svg | 5 ++- public/mobile.gif | Bin 4144537 -> 11090506 bytes public/mobile.svg | 75 ---------------------------------- types/TCms.ts | 72 ++++++++++++++++++++++++++++++++ 12 files changed, 198 insertions(+), 107 deletions(-) create mode 100644 context/Cms.ctx.tsx create mode 100644 hooks/useCmsQueries.ts delete mode 100644 public/mobile.svg create mode 100644 types/TCms.ts diff --git a/app/_components/ApexChart.tsx b/app/_components/ApexChart.tsx index 1fce3ce..6599110 100644 --- a/app/_components/ApexChart.tsx +++ b/app/_components/ApexChart.tsx @@ -1,5 +1,6 @@ "use client"; +import { CmsData } from "@/types/TCms"; import { ApexOptions } from "apexcharts"; import dynamic from "next/dynamic"; import { useEffect, useState } from "react"; @@ -15,7 +16,7 @@ interface ChartState { options: ApexOptions; } -const ApexChart = () => { +const ApexChart = ({ cmsData }: { cmsData?: CmsData }) => { const [state, setState] = useState(null); useEffect(() => { @@ -23,10 +24,7 @@ const ApexChart = () => { series: [ { name: "Sales", - data: [ - 182, 192, 230, 198, 243, 234, 244, 210, 274, 220, 225, 289, 265, - 304, - ], + data: cmsData?.chart.data.map((item) => item.value) || [10, 10, 10], }, ], options: { @@ -58,22 +56,7 @@ const ApexChart = () => { colors: ["#0164FF"], xaxis: { type: "datetime", - categories: [ - "1/11/2024", - "2/11/2024", - "3/11/2024", - "5/11/2024", - "6/11/2024", - "7/11/2024", - "8/11/2024", - "9/11/2024", - "10/11/2024", - "11/11/2024", - "12/11/2024", - "1/11/2025", - "2/11/2025", - "3/11/2025", - ], + categories: cmsData?.chart.data.map((item) => item.key), tickAmount: 0, labels: { formatter: function (value: any, timestamp: any, opts: any) { diff --git a/app/marketing/[id]/page.tsx b/app/marketing/[id]/page.tsx index 2e948dc..b0c9cbd 100644 --- a/app/marketing/[id]/page.tsx +++ b/app/marketing/[id]/page.tsx @@ -1,4 +1,6 @@ import ApexChart from "@/app/_components/ApexChart"; +import { cmsService } from "@/hooks/useCmsQueries"; +import { CmsResponse } from "@/types/TCms"; import { Metadata } from "next"; import Image from "next/image"; @@ -21,7 +23,20 @@ export const metadata: Metadata = { }, }; -export default function Home() { +interface IProps { + params: { id: string }; +} + +export default async function Home({ params }: IProps) { + const { id } = params; + + let cmsData: CmsResponse | null = null; + try { + cmsData = await cmsService.getCms(id); + } catch (error) { + console.error("Error fetching CMS data:", error); + } + const centerFrames = [ { src: "/magnifier.svg", @@ -45,6 +60,7 @@ export default function Home() { "We operate on a partnership model. We only succeed when you win. This aligns our goals and makes us a true partner in your growth.", }, ]; + return ( <>
@@ -52,13 +68,13 @@ export default function Home() {

$ - 12,345,678 + {cmsData?.data.chart.missedAmount ?? 1672}

total tender amount you missed today

- +
-
+