API implementation for CMS and Master module

src/components/ActionIcons/Delete.tsx

@@ -1,4 +1,4 @@
-import { Icon, Image } from "@chakra-ui/react";
+import { Icon } from "@chakra-ui/react";
 import { Tooltip } from "../ui/tooltip";
 import { RiDeleteBin5Line } from "react-icons/ri";
 

src/components/Charts/BarChart.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+
 import { Bar } from "react-chartjs-2";
 import {
   Chart as ChartJS,
@@ -9,7 +9,7 @@ import {
   Tooltip,
   Legend,
 } from "chart.js";
-import { BiBorderRadius } from "react-icons/bi";
+// import { BiBorderRadius } from "react-icons/bi";
 
 // ✅ Register the required components
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

src/components/Charts/SemiDoughnutChart.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+
 import { Doughnut } from "react-chartjs-2";
 import {
   Chart as ChartJS,

src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { HStack, Stack, Table } from "@chakra-ui/react";
 import { PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot } from "./ui/pagination";
 // import {
@@ -25,6 +25,10 @@ const DataTable: React.FC<TableProps> = ({
     direction: "asc" | "desc";
   } | null>(null);
 
+  useEffect(() => {
+    setSortedData(data);
+  }, [data]);
+
   const handleSort = (column: string) => {
     if (!sortableColumns.includes(column)) return;
 

src/components/EditSubAdmin.tsx

@@ -1,5 +1,5 @@
-import { Field, Grid, Heading, Icon, Input, Span, Stack, Text } from "@chakra-ui/react";
-import { TbEdit } from "react-icons/tb";
+import { Field, Grid, Heading, Input, Span, Stack, Text } from "@chakra-ui/react";
+// import { TbEdit } from "react-icons/tb";
 import { Button } from "./ui/button";
 import { Checkbox } from "./ui/checkbox";
 import {

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/pagination.tsx

@@ -4,7 +4,6 @@ import type { ButtonProps, TextProps } from "@chakra-ui/react";
 import {
   Button,
   Pagination as ChakraPagination,
-  HStack,
   IconButton,
   Text,
   createContext,
@@ -151,7 +150,7 @@ export const PaginationNextTrigger = React.forwardRef<
   HTMLButtonElement,
   ChakraPagination.NextTriggerProps
 >(function PaginationNextTrigger(props, ref) {
-  const { size, variantMap, getHref } = useRootProps();
+  const { variantMap, getHref } = useRootProps();
   const { nextPage } = usePaginationContext();
 
   if (getHref) {
@@ -204,7 +203,7 @@ export const PaginationItems = (props: React.HTMLAttributes<HTMLElement>) => {
           <PaginationItem
             key={index}
             type="page"
-            value={page.value}
+            value={page.type === "page" ? page.value : 0}
             {...props}
           />
         ))

src/components/ui/pin-input.tsx

@@ -0,0 +1,27 @@
+import { PinInput as ChakraPinInput, Group } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface PinInputProps extends ChakraPinInput.RootProps {
+  rootRef?: React.Ref<HTMLDivElement>
+  count?: number
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  attached?: boolean
+}
+
+export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
+  function PinInput(props, ref) {
+    const { count = 4, inputProps, rootRef, attached, ...rest } = props
+    return (
+      <ChakraPinInput.Root ref={rootRef} {...rest}>
+        <ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
+        <ChakraPinInput.Control>
+          <Group attached={attached}>
+            {Array.from({ length: count }).map((_, index) => (
+              <ChakraPinInput.Input key={index} index={index} />
+            ))}
+          </Group>
+        </ChakraPinInput.Control>
+      </ChakraPinInput.Root>
+    )
+  },
+)

src/components/ui/toaster.tsx

@@ -10,24 +10,23 @@ import {
 } from "@chakra-ui/react"
 
 export const toaster = createToaster({
-  placement:'bottom',
+  placement: "bottom-end",
   pauseOnPageIdle: true,
-  max:1
 })
 
 export const Toaster = () => {
   return (
-    <Portal >
+    <Portal>
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
         {(toast) => (
-          <Toast.Root  width={{ md: "sm" }}>
+          <Toast.Root width={{ md: "sm" }}>
             {toast.type === "loading" ? (
               <Spinner size="sm" color="blue.solid" />
             ) : (
               <Toast.Indicator />
             )}
-            <Stack appearance={'light'} rounded={'full'} gap="1" flex="1" maxWidth="100%">
-              {toast.title && <Toast.Title p={2} color="#02A0A0">{toast.title}</Toast.Title>}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
               {toast.description && (
                 <Toast.Description>{toast.description}</Toast.Description>
               )}