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

@@ -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<ChartState | null>(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) {