updated

dev-dist/sw.js

@@ -82,11 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-<<<<<<< HEAD
-    "revision": "0.iv1sobg60j"
-=======
-    "revision": "0.3bv9k3911i8"
->>>>>>> 688f6740627f6cdb421849d1fb012420be1d9d10
+    "revision": "0.ahcfbbr0fl8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package-lock.json

@@ -22,6 +22,7 @@
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.54.2",
         "react-icons": "^5.4.0",
+        "react-quill": "^2.0.0",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.1.1",
         "vite-plugin-pwa": "^0.21.1"
@@ -3284,6 +3285,15 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "license": "MIT",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
@@ -5348,6 +5358,15 @@
         "node": ">= 0.2.0"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5574,6 +5593,26 @@
         }
       }
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6085,12 +6124,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -6890,6 +6947,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -7829,6 +7902,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -7948,6 +8037,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8206,6 +8301,34 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -8281,6 +8404,21 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.0",
+    "react-quill": "^2.0.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.1",
     "vite-plugin-pwa": "^0.21.1"

src/Pages/Dashboard/Dashboard.tsx

@@ -59,11 +59,16 @@ const Dashboard = () => {
       title: "How to create new account?",
       text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
     },
+    {
+      value: "5",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
   ];
 
   return (
     <MainFrame>
-      <Box  display={"flex"} p={"20px"} pe={'20px'}  gap={5}>
+      <Box display={"flex"} p={"20px"} pt={'8px'} gap={5}>
         <Box rounded={'lg'} w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
           <Heading fontSize={"sm"} p={2}>
             Total Users
@@ -112,7 +117,7 @@ const Dashboard = () => {
         </Box>
         <Box
           p={"20px"}
-          w={"49%"}
+          w={"50%"}
           rounded={'lg'}
           boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
         >
@@ -143,8 +148,8 @@ const Dashboard = () => {
           <CircularApp />
         </Box>
       </Box>
-      <Box  p={"20px"} pt={0} display={"flex"} gap={5}>
-        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} p={"10px"} overflow={'auto'}>
+      <Box p={"20px"} pt={0} display={"flex"} gap={5}>
+        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} p={"10px"} overflow={'auto'}>
           <HStack justifyContent={"space-between"} mb={5}>
             <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
             <Button
@@ -160,7 +165,6 @@ const Dashboard = () => {
           <AccordionRoot collapsible defaultValue={["b"]}>
             {accItems.map((item, index) => (
               <AccordionItem
-              boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} 
                 key={index}
                 value={item.value}
                 bg={"#fff"}
@@ -179,10 +183,11 @@ const Dashboard = () => {
             ))}
           </AccordionRoot>
         </Box>
-        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} overflow={'auto'}>
+        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} overflow={'auto'}>
           <AgencyName />
         </Box>
       </Box>
+     
     </MainFrame>
   );
 };

src/Pages/Login.tsx

@@ -5,7 +5,6 @@ import {
   Image,
   Input,
   Text,
-  Theme,
   VStack,
 } from "@chakra-ui/react";
 import axios from "axios";

src/Pages/ManageCMS/TermsAndConditions/TermAndConditionSkeleton.tsx

@@ -0,0 +1,16 @@
+import { Box, Skeleton } from '@chakra-ui/react'
+import React from 'react'
+
+const TermAndConditionSkeleton = () => {
+  return (
+    <Box px={3} pb={3} w="90%">
+            <Skeleton height="20px" mb="10px" width="90%" />
+            <Skeleton height="20px" mb="15px" width="90%" />
+            <Skeleton height="20px" mb="10px" width="90%" />
+            <Skeleton height="20px" mb="10px" width="80%" />
+            <Skeleton height="20px" width="60%" />
+          </Box>
+  )
+}
+
+export default TermAndConditionSkeleton

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx

@@ -1,37 +1,57 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
+import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
 import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
+import {useGetTermsAndConditionQuery} from "../../../Redux/Service/terms.and.condition.service"
+import { useContext, useEffect } from "react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { Spinner } from "../../../components/Sipnner/Spinner";
 
 
 const TermsAndConditions = () => {
+  
+  // Fetch data using RTK Query with type annotations
+    const { data, isLoading, isFetching } = useGetTermsAndConditionQuery();
+
+    const context = useContext(GlobalStateContext);
+    if (!context) throw new Error('App must be used within a GlobalStateProvider');
+    
+    const { setIsBarLoading } = context;
+    useEffect(() => {
+      setIsBarLoading(isFetching)
+    }, [data])
+
   return (
 
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           Terms And Conditions
-          </Text>
+    <MainFrame  transperant={true}>
+     
+     <VStack gap={4} pb={4} pt={0}>
+        {isLoading || isFetching ?
+          <Spinner /> : data?.data?.map(({ id, content, terms_cond_language }) => <VStack bg={'#fff'}
+            boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+            <HStack
+              w={"100%"}
+              justifyContent={"space-between"}
 
-          <HStack >
-            
-            <TermsAndConditionsAddModel />
-          </HStack>
-        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-     </Box>
+              py={0}
+              px={0}
+            >
+              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+              Terms And Conditions<Badge variant={'surface'}  colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {terms_cond_language?.language_name}</Badge>
+              </Text>
+
+              <TermsAndConditionsAddModel />
+            </HStack>
+            <Text
+              as="p"
+              fontSize="sm"
+              fontWeight={400}
+              color="#1D1D1D"
+            >
+              {content}
+            </Text>
+
+          </VStack>)}
+      </VStack>
     </MainFrame>
   )
 }

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
 import {
   DialogBody,
@@ -9,10 +10,38 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Field, Stack, Text } from "@chakra-ui/react";
 import { Button } from "../../../components/ui/button";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css"; // Import the styles
 
 function TermsAndConditionsAddModel() {
+  const [value, setValue] = useState(""); // State to manage the rich text content
+
+  // Configuration for the Quill editor toolbar
+  const modules = {
+    toolbar: [
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link", "image"],
+      ["clean"],
+    ],
+  };
+
+  // Formats allowed in the Quill editor
+  const formats = [
+    "header",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "list",
+    "bullet",
+    "link",
+    "image",
+  ];
+
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
@@ -30,10 +59,9 @@ function TermsAndConditionsAddModel() {
 
       <DialogContent
         bg={"#fff"}
-        // w={{ lg: "60%", md: "230px" }}
-        w={{ base: "90%", md: "400px" }}
+        w={{ base: "90%", md: "800px" }}
         height={"auto"}
-        p={3} // Reduced padding
+        p={3}
         bgSize={"md"}
       >
         <DialogHeader bg="white">
@@ -48,16 +76,21 @@ function TermsAndConditionsAddModel() {
               <Field.Label color="black" pt={1} fontSize="12px">
                 TermsAndConditions
               </Field.Label>
-              <Textarea
-                placeholder=""
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                p={2}
-                fontSize="12px"
-                height={'140px'}
-                _focusVisible={{outline:'none'}}
-                resize={'none'}
+              {/* Replace Textarea with ReactQuill */}
+              <ReactQuill
+                theme="snow" // Theme style
+                value={value}
+                onChange={setValue}
+                modules={modules}
+                formats={formats}
+                style={{
+                  width:"100%",
+                  color: "black",
+                  border: "none",
+                  fontSize: "12px",
+                  height: "140px",
+                  
+                }}
               />
             </Field.Root>
           </Stack>
@@ -74,4 +107,4 @@ function TermsAndConditionsAddModel() {
   );
 }
 
-export default TermsAndConditionsAddModel;
+export default TermsAndConditionsAddModel;

src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx

@@ -1,5 +1,5 @@
-import { Field, Input, Stack } from "@chakra-ui/react";
-import View from "../../../components/ActionIcons/View";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
 import {
   DialogBody,
   DialogCloseTrigger,
@@ -9,6 +9,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
+import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (

src/Pages/Profile/ChangePassword.tsx

@@ -1,22 +1,28 @@
 
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { FaRegEdit } from "react-icons/fa";
 import { Button } from "../../components/ui/button";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
 import EnterPassword from "./EnterPassword";
 function Changepassword() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2}  >
+                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
                     Change Password
                 </Button>
+
             </DialogTrigger>
 
             <DialogContent
                 bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-                p={2} 
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
                 bgSize={'md'}
             >
                 <DialogHeader bg="white" pt={3} pb={2} >
@@ -27,17 +33,22 @@ function Changepassword() {
                     <Stack p={2} >
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px"  type="password" border="1px solid grey" /></Field.Root>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px"  type="password" border="1px solid grey" /></Field.Root>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
 
                     </Stack>
                 </DialogBody>
                 <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
                 >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
                     <EnterPassword />
                 </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
             </DialogContent>
         </DialogRoot >
 

src/Pages/Profile/Profile.tsx

@@ -1,24 +1,18 @@
-import { Avatar, Box, HStack, Text, VStack } from "@chakra-ui/react";
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
 import { FaCamera } from "react-icons/fa";
-import EditableInput from "../../components/EditableInput";
 import MainFrame from "../../components/MainFrame";
-import { Field } from "../../components/ui/field";
 import Changepassword from "./ChangePassword";
 
 const Profile = () => {
   return (
     <MainFrame >
-      <HStack  alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >
-
-        <VStack   w={'50%'} p={3} rounded={'lg'} mb={3}>
-
-<HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'}  w={'100%'} px={3}  py={3} >
-        <VStack  w={'100%'} alignItems={'flex-start'} gap={0}>
-        <Box mb={2} position="relative" width="fit-content"
+      <Stack p={5}>
+        <Box position="relative" width="fit-content"
+          display="inline-block"
           cursor="pointer" onClick={() => alert("Avatar clicked!")}>
           <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
             <Avatar.Fallback />
-            <Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
+            <Avatar.Image src="https://bit.ly/sage-adebayo" />
           </Avatar.Root>
           <Box
             position="absolute"
@@ -26,42 +20,37 @@ const Profile = () => {
             left={"39px"}
             p="2px"
           >
-            <FaCamera  color="#ccc" size={16} />
+            <FaCamera color="black" size={16} />
           </Box>
         </Box>
-        <Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>Ritesh Pandey</Text>
-        <Text color="black" as={'span'} fontSize={'xs'}>
+        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
+        <Text color="black" fontSize="12px">
           Employee ID: <span>#1245679</span>
         </Text>
-        </VStack>
+        <Box w={"70%"} mt={5}>
+          <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
+              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
+              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
+          </SimpleGrid>
+          <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
+          {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+            Change Password
+          </Button> */}
+          <Changepassword />
 
-        
-        <Changepassword />
-        </HStack>
+        </Box>
 
-        
-        <VStack  w={"100%"} >
-        <Field mt={4} label="First Name" fontSize="xs" required>
-              <EditableInput defaultValue="Ritesh" placeholder="Enter first name" />
-            </Field>
-
-            <Field mt={4} label="Last Name" fontSize="xs" required>
-              <EditableInput defaultValue="Pandey" placeholder="Enter last name" />
-            </Field>
-
-            <Field mt={4} label="Mobile Number" fontSize="xs" required>
-              <EditableInput defaultValue={"98234567892"} placeholder="Mobile Number" type='number' />
-            </Field>
-
-
-
-
-
-
-        </VStack>
-        </VStack>
-
-      </HStack>
+      </Stack>
 
     </MainFrame >
   )

src/Redux/Service/terms.and.condition.service.ts

@@ -1,26 +1,16 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";
+import { TermsAndConditionsResponse } from "../../Types/termsAndConditionTypes";
 
-export const termsAndCondition = createApi({
-    reducerPath: "api",
+export const TermsAndCondition = createApi({
+    reducerPath: "TermsAndCondition",
     baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
     endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
+      getTermsAndCondition: builder.query<TermsAndConditionsResponse, void>({
+        query: () => "/term-and-condition",
+      }),
     }),
-  });
-  
-  export const {  } = termsAndCondition;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+});
+
+// Correctly export the hook
+export const { useGetTermsAndConditionQuery } = TermsAndCondition;

src/Redux/Store.tsx

@@ -14,6 +14,7 @@ import { privacyPolicy } from "./Service/privacy.policy.service";
 import { privacy } from "./Service/privacy.service";
 import { myProfile } from "./Service/myprofie.service";
 import { masterModule } from "./Service/master.module.service";
+import { TermsAndCondition } from "./Service/terms.and.condition.service";
 
 export const store = configureStore({
   reducer: {
@@ -21,6 +22,7 @@ export const store = configureStore({
     [registerUser.reducerPath]: registerUser.reducer,
     [deactivatedAccounts.reducerPath]: deactivatedAccounts.reducer,
     [faqs.reducerPath]: faqs.reducer,
+    [TermsAndCondition.reducerPath]: TermsAndCondition.reducer,
     [managePosts.reducerPath]: managePosts.reducer,
     [manageSubAdmin.reducerPath]: manageSubAdmin.reducer,
     [manageJobs.reducerPath]: manageJobs.reducer,
@@ -40,6 +42,7 @@ export const store = configureStore({
       managePosts.middleware,
       faqs.middleware,
       manageSubAdmin.middleware,
+      TermsAndCondition.middleware,
       manageJobs.middleware,
       manageGroups.middleware,
       manageContactUs.middleware,

src/Types/termsAndConditionTypes.tsx

@@ -0,0 +1,18 @@
+export interface TermsAndConditionsContent {
+    id: number;
+    language_master_xid: number;
+    content: string;
+    is_active: boolean;
+    terms_cond_language:{
+      id:number;
+      language_code:string;
+      language_name:string;
+    }
+  }
+  
+  export interface TermsAndConditionsResponse {
+    status: "success" | "error"; // Assuming it can be "success" or "error"
+    status_code: number;
+    message: string;
+    data: TermsAndConditionsContent[];
+  }

src/components/EditableInput.tsx

@@ -1,53 +0,0 @@
-import { Editable } from "@chakra-ui/react";
-import { FC } from "react";
-
-interface InputProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  defaultValue?: string;
-  placeholder?: string;
-  props?: any;
-  type?:string
-}
-const EditableInput: FC<InputProps> = ({
-  value,
-  onChange,
-  defaultValue,
-  placeholder,
-  type,
-  ...props
-}) => {
-  return (
-    <Editable.Root
-      {...props}
-      value={value}
-      onChange={() => onChange && onChange}
-      w={"100%"}
-      size={"sm"}
-      textAlign="start"
-      defaultValue={defaultValue || ""}
-    >
-      <Editable.Preview
-        bg={"#00000006"}
-        fontSize={"xs"}
-        w={"100%"}
-        bgSize={"sm"}
-        ps={3}
-        // _hover={{ backgroundColor: "#00000010" }}
-      />
-      <Editable.Input
-        fontSize={"xs"}
-        placeholder={placeholder}
-        w={"100%"}
-        border={"#ccc 1px solid"}
-        type={type}
-        _focus={{ bg: "#02A0A015" }}
-        outline={"#007F33"}
-        bgSize={"xs"}
-        ps={3}
-      />
-    </Editable.Root>
-  );
-};
-
-export default EditableInput;

src/components/MainFrame.tsx

@@ -10,15 +10,14 @@ interface MainFrameProps {
   children: React.ReactNode
   title?: string
   transperant?:boolean
-  props?:any
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children, transperant, props }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
   return (
-    <MotionVStack {...props} overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
+    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
-        // h="100%"
+        // minH="100%"
         bg={transperant?'transperant':"#ffffff"}
         // overflow={'scroll'}
         rounded="lg"

src/components/Sipnner/Spinner.tsx

@@ -1,6 +1,6 @@
 import { Center } from '@chakra-ui/react'
 import './Spinner.css'
-import MainFrame from '../MainFrame'
+// import MainFrame from '../MainFrame'
 export const Spinner = () =><Center boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} w={'100%'} h={'89vh'} bg={'#fff'} > <div className='loader'/></Center>
 
 

src/components/ui/field.tsx

@@ -15,7 +15,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
     return (
       <ChakraField.Root ref={ref} {...rest}>
         {label && (
-          <ChakraField.Label fontSize={'xs'}>
+          <ChakraField.Label>
             {label}
             <ChakraField.RequiredIndicator fallback={optionalText} />
           </ChakraField.Label>