-Ensures profile image is not uploaded again during every update

>> -Disabled  future date on date of birth , hence only people with 10 years can registet
>> -form reset on succesfully creation of products
>> -toast show up on successfully creation of products
>> -ensured correct date formatting in all page

src/components/chartssection.tsx

@@ -1,9 +1,13 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Chart } from 'react-google-charts';
 import { unstable_noStore as noStore } from 'next/cache';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import request from '@/utils/axios';
+
+import { toast } from 'react-toastify';
+import { showToast } from '@/helpers/toast';
+
 interface Params {
   user: any;
   data: any;
@@ -14,6 +18,8 @@ export const options = {
   title: '',
 };
 const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
+
+  const ProductCategory = useRef<HTMLInputElement>(null);
   const data1 = [
     ['Task', 'Hours per Day'],
     [
@@ -28,6 +34,40 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
     ['productsStats', data?.productsStats > 1 ? data?.productsStats : 0.2],
   ];
 
+
+
+  const mutation = useMutation({
+    mutationFn: (product_categories: string) => {
+      return request.post(`/categories`, {categoryName:product_categories})
+    },
+    onError: (error: any) => {
+      showToast(error.response.data.error, 'error');
+    },
+
+      onSuccess: async (result:any) => {
+        window.location.reload();
+      },
+
+      onSettled: (result, error) => {
+        showToast(error.response.data.message, 'error');
+      },
+  })
+
+  const handleAddCategory= async () => {
+
+    const product_categories=ProductCategory.current?.value as string
+    if(product_categories.length>2){
+
+     await mutation.mutate(product_categories);
+
+    }else{
+      showToast('Product category must be atleast 3 characters length', 'error');
+    }
+    //alert(product_categories)
+
+  };
+
+
   return (
     <div className="flex gap-7 sm:w-[80%] h-full sm:flex-row flex-col w-full sm:justify-start sm:items-start justify-center items-center ">
       {user && user?.Role?.name === 'seller' ? (
@@ -82,12 +122,19 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
           </div>
         </div>
       )}
-      <div className="sm:w-[50%] w-[90%] border-[1px] h-[200px]  ">
+      <div className="sm:w-[50%] w-[90%] border-[1px] h-[300px]  ">
         <div className="w-full flex justify-center mx-4 mt-2 items-center flex-col ">
           <h1 className="font-semibold text-1xl text-left mx-4 w-full mb-3">
             All Categolie On Market
           </h1>
+
+          <div className=' flex flex-col min-w-[80%] md:min-w-[80%] md:w-[80%] md:flex-row items-center justify-evenly py-2 mb-2 gap-4'>
+              <input className=' w-[100%] md:w-[70%] h-12  shadow-lg border border-slate-500' ref={ProductCategory}/> 
+              <button className='sm:min-w-[30%] min-w-[100%] h-12 bg-primaryBlue px-4 text-white text-sm' onClick={handleAddCategory}>Add Category</button>
+          </div>
+
           <div className=" w-[80%] p-2 rounded-sm overflow-auto h-[150px]">
+
             <ul className="flex flex-col gap-3">
               {categories &&
                 categories?.map((el: any) => (
@@ -110,4 +157,4 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
   );
 };
 
-export default Chartssection;
+export default Chartssection;