Done

src/Components/ValidationField/View/Date.tsx

@@ -27,7 +27,7 @@ const Date = ({ name, label,picker="date" ,isDisabled,props,onChange,placeholder
             placeholder={placeholder}
                 allowClear
                 className={`${className} w-100`}
-                // defaultValue={formik.values[name]}
+                defaultValue={formik.values[name]}
                 size="large" 
                 onChange={onChange || onCalendarChange}
                 disabled={isDisabled}

src/Components/ValidationField/View/SearchField.tsx

@@ -48,7 +48,8 @@ const SearchField = ({ name, label, placeholder, isDisabled, searchBy, option, i
           options={option}
           size="large"
           className={`${className} w-100`}
-          defaultValue={formik.values[name]}
+          value={formik.values[name]}
+          // defaultValue={formik.values[name]}
           allowClear
           {...(isMulti && { mode: "multiple" })}
           onChange={onChange || SelecthandleChange}

src/Components/ValidationField/View/SelectField.tsx

@@ -25,7 +25,7 @@ const SelectField = ({ name, label, placeholder, isDisabled,option,isMulti,onCha
             options={option}
             size="large" 
             className={`${className} w-100`}
-            defaultValue={formik.values[name]}
+            value={formik.values[name]}
             allowClear
             {...(isMulti && { mode: "multiple" })}
             onChange={onChange || SelecthandleChange}

src/Layout/Dashboard/ViewPage.tsx

@@ -14,10 +14,10 @@ type TViewPage ={
    getDataToSend:any,
    handleSubmit:any,
   //  BarStatus:any,
-   showProgressBar?:boolean,
+   IsloadingButton:boolean
 }
 
-const ViewPage: React.FC<TViewPage>=  ({children,getInitialValues, getValidationSchema,handleSubmit,showProgressBar = true})=> {
+const ViewPage: React.FC<TViewPage>=  ({children,getInitialValues, getValidationSchema,handleSubmit,IsloadingButton})=> {
     
     const {objectToEdit} = usePageState()
     const {t} = useTranslation();
@@ -43,23 +43,18 @@ const ViewPage: React.FC<TViewPage>=  ({children,getInitialValues, getValidation
             <Form>
               {/* <HeadTabs tabs={tabs} /> */}
                 {children}
-                {showProgressBar && 
+                { 
                   <>
-                    {/* <ProgressBar
+               
-                    value={BarStatus?.value}
-                    isLoading={BarStatus?.isLoading}
-                    isError={BarStatus?.isError}
-                    isSuccess={BarStatus?.isSuccess}
-                    /> */}
                     <div className="d-flex mt-4 justify-content-center align-items-center">
-                      {/* <LoadingButton
+                      <LoadingButton
                         type="submit"
                         color="primary"
-                        // isLoading={BarStatus?.isLoading}
+                        isLoading={IsloadingButton}
                       >
                         {t("save")}  
-                      </LoadingButton> */}
+                      </LoadingButton>
-                      <Button  type="submit" color="primary">  {t("save")}  </Button>
+                      {/* <Button disabled={isLoading}  type="submit" color="primary">  {t("save")}  </Button> */}
                     </div>
                   </>
                 }

src/Pages/Categories/View/Add/AttributeValueTab/Field/File.tsx

@@ -5,13 +5,18 @@ import { Button, Upload, UploadFile } from 'antd'
 import { UploadOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useFormikContext } from 'formik';
+import { ImageBaseURL } from '../../../../../../api/config';
 
 
-const File = ({ parentKey,tabKey}:any) => {
+const FileAttributeaValue = ({ parentKey,tabKey}:any) => {
     const { t } = useTranslation();
   const formik = useFormikContext<any>();
   const name = `Attribute.[${parentKey}].AttributeValue[${tabKey}].${"image"}`;
-  const imageUrl =  formik?.values?.Attribute?.[parentKey]?.AttributeValue?.[tabKey]?.["image"] ? URL.createObjectURL(formik?.values?.Attribute?.[parentKey]?.AttributeValue?.[tabKey]?.["image"]) : "" ;
+  const fileObject = formik?.values?.Attribute?.[parentKey]?.AttributeValue?.[tabKey]?.["image"];
+
+  const FormikimageUrl = fileObject ? ImageBaseURL + fileObject :  '';
+
+  const imageUrl = typeof fileObject === "string" ? (FormikimageUrl)?.replace("public", "/storage") : (fileObject instanceof File) ? URL.createObjectURL(fileObject) : "";
 
   const fileList: UploadFile[] = [
 
@@ -59,4 +64,4 @@ const File = ({ parentKey,tabKey}:any) => {
   )
 }
 
-export default File
+export default FileAttributeaValue

src/Pages/Categories/View/Add/AttributeValueTab/TabsContainer.tsx

@@ -1,5 +1,5 @@
 // TabsContainer.tsx
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Tabs, Space } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
 import { toast } from 'react-toastify';
@@ -74,8 +74,9 @@ export const TabsContainer= ({parentKey}:any) => {
   };
   
   const [removedAttributeValue, setremovedAttributeValue] = useState<string[]>([]);
+
   useEffect(() => {
-    setFieldValue(`removedAttributeValue`, removedAttributeValue);
+    setFieldValue(`removedAttributeValue[${parentKey}]`, removedAttributeValue);
    
   }, [removedAttributeValue]);
 

src/Pages/Categories/View/Add/fn/isvalidation.ts

@@ -1,7 +1,7 @@
 import { toast } from 'react-toastify';
 
 
-export const isvalidation = (attributes: any[] | undefined, t: any) => {
+export const isvalidation = (attributes: any[] , t: any) => {
   const validationResults: boolean[] = [];
   let previousNames: { [key: string]: string } = {};
 

src/Pages/Categories/View/AddPage.tsx

@@ -14,12 +14,13 @@ import { useAddAttributeValue } from '../../../api/attributeValue';
 
 import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
 import { isvalidation } from './Add/fn/isvalidation';
+import { toast } from 'react-toastify';
 
 const AddcategoriesPage = () => {
     
   const { setObjectToEdit, objectToEdit } = usePageState()
 
-    const {mutate ,isSuccess,data } = useAddCategories()
+    const {mutate,isLoading:IsloadingButton ,isSuccess,data } = useAddCategories()
     const {mutateAsync} = useAddAttribute()
     const {mutate:AddAttributeValue } = useAddAttributeValue()
 
@@ -28,40 +29,121 @@ const AddcategoriesPage = () => {
  
   
     const handleSubmit = (values:any)=>{ 
-          console.log(values,"values");
+      console.log(values,"values");
-        function isValid(){
+      function isValid(){
-        values?.Attribute?.slice(1)?.forEach((item:any) => {
+      values?.Attribute?.slice(1)?.forEach((item:any) => {
-          if (item && Object.keys(item).length > 0){
+      if (item && Object.keys(item).length > 0){
-            setAttribute((prevAddAttributeValue) => [...prevAddAttributeValue, item]);
+      setAttribute((prevAddAttributeValue) => [...prevAddAttributeValue, item]);
-          }
-  
-          });
-      
-        setAttributeValues(values?.Attribute?.slice(1)?.map((item:any)=>{
-          if (item && Object.keys(item).length > 0){
-            return item?.AttributeValue
-          }
-        }))
-        const CategoriesValues = {
-          name: {
-            en:values?.name_en,
-            ar:values?.name_ar,
-            de:values?.name_de
-          },
-          parent_id:values?.parent_id,
-          photo:values?.photo,
-        }
-        mutate(CategoriesValues)  
       }
-      const validationResults = isvalidation(values?.Attribute, t);
+      
+      });
+      
+      
+      setAttributeValues(values?.Attribute?.slice(1)?.map((item:any)=>{
+      if (item && Object.keys(item).length > 0){
+      return item?.AttributeValue
+      }
+      }))
+      const CategoriesValues = {
+      name: {
+      en:values?.name_en,
+      ar:values?.name_ar,
+      de:values?.name_de
+      },
+      parent_id:values?.parent_id,
+      photo:values?.photo,
+      }
+      mutate(CategoriesValues) 
+      }
+      const validationResults: boolean[] = [];
+      let previousNames: any = {};
+      
+      values?.Attribute?.slice(1)?.forEach((item: any, index: any) => {
+      if (item && Object.keys(item).length > 0) {
+      const itemName = t('name');
+      const itemNumber = index + 1;
+      
+      // Check if the names are unique across items
+      const currentItemNames = {
+      name_ar: item?.name_ar,
+      name_en: item?.name_en,
+      name_de: item?.name_de,
+      };
+      
+      if (
+      previousNames.name_ar === currentItemNames.name_ar ||
+      previousNames.name_en === currentItemNames.name_en ||
+      previousNames.name_de === currentItemNames.name_de
+      ) {
+      toast.error(`${itemName} ${t('unique_error_names')}`);
+      validationResults.push(false);
+      }
+      
+      previousNames = currentItemNames;
+      
+      // Check for other validation rules
+      if (!item?.name_ar || !item?.name_en || !item?.name_de) {
+      toast.error(`${t('required_name')} ${itemNumber}`);
+      validationResults.push(false);
+      } else if (!item?.type) {
+      toast.error(`${t('required_type')} ${itemNumber}`);
+      validationResults.push(false);
+      } else if (item?.type === "image") {
+      if (Array.isArray(item.AttributeValue)) {
+      item?.AttributeValue.slice(1)?.forEach((attrItem: any, index: number) => {
+      if (attrItem && Object.keys(attrItem).length > 0) {
+      if (attrItem.image === null) {
+      toast.error(`${t('required_image')} ${index + 1}`);
+      validationResults.push(false);
+      } else if (!attrItem?.value_ar || !attrItem?.value_en || !attrItem?.value_de) {
+      toast.error(`${t('required_text')} ${index + 1}`);
+      validationResults.push(false);
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
+      }
+      } else if (item?.type === "color") {
+      if (Array.isArray(item.AttributeValue)) {
+      item?.AttributeValue.slice(1)?.forEach((attrItem: any, index: number) => {
+      if (attrItem && Object.keys(attrItem).length > 0) {
+      const hexColorRegex = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+      if (attrItem && !hexColorRegex.test(attrItem?.value_en)) {
+      toast.error(`${t('required_color')} ${index + 1}`);
+      validationResults.push(false);
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
+      }
+      } else if (item?.type === "text") {
+      if (Array.isArray(item.AttributeValue)) {
+      item?.AttributeValue.slice(1)?.forEach((attrItem: any, index: number) => {
+      if (attrItem && Object.keys(attrItem).length > 0) {
+      if (attrItem && (!attrItem?.value_ar || !attrItem?.value_en || !attrItem?.value_de)) {
+      toast.error(` ${t('required_text')} ${index + 1}`);
+      validationResults.push(false);
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
+      }
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
       
       if (validationResults.every((result) => result)) {
-          isValid();
+      isValid();
       }
       
      
       
-  }
+      }
   useEffect(()=>{
 
     if(isSuccess){
@@ -87,13 +169,21 @@ const AddcategoriesPage = () => {
           AttributeValues[index]?.slice(1)?.map((dataToSend:any , index:number)=>{
     
             const AttributeValue = dataToSend 
+            const IMage =
+            (typeof AttributeValue?.image === 'string') ?
+            {
+              copied_assets: {  image: AttributeValue?.image }
+            } :
+            {
+              image: AttributeValue?.image
+            };
             const NewAttributeValues = {
               value:{
                 en:AttributeValue?.value_en,
                 ar:AttributeValue?.value_ar,
                 de:AttributeValue?.value_de
               },
-              image:AttributeValue?.main_photo, 
+              ...IMage,
               attribute_id:AttributeId,
             }
             if (NewAttribute.type === "color") {
@@ -125,7 +215,7 @@ const AddcategoriesPage = () => {
   }, []);
 
     
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Categories/View/Edit/AttributeValueTab/TabsContainer.tsx

@@ -81,7 +81,7 @@ const initialItemShape: any = {
 
   const [removedAttributeValues, setRemovedAttributeValues] = useState<string[]>([]);
   useEffect(() => {
-    setFieldValue(`removedAttributeValues`, removedAttributeValues);
+    setFieldValue(`removedAttributeValue[${parentKey}]`, removedAttributeValues);
 
   }, [removedAttributeValues]);
 

src/Pages/Categories/View/EditPage.tsx

@@ -4,7 +4,7 @@ import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
 import 'react-tabs/style/react-tabs.css';
 import { MdLanguage } from 'react-icons/md'
 import ViewPage from '../../../Layout/Dashboard/ViewPage';
-import { Rate, Spin } from 'antd';
+import { Spin } from 'antd';
 import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
 import { useParams } from 'react-router-dom';
 import LoadingPage from '../../../Layout/app/LoadingPage';
@@ -15,9 +15,9 @@ import { TabsContainer } from './Edit/AttributeTab/TabsContainer';
 import { useAddAttribute, useGetSingleAttribute } from '../../../api/attribute';
 import { useDeleteAttribute, useUpdateAttribute } from '../../../api/attribute';
 import { useAddAttributeValue, useDeleteAttributeValue, useUpdateAttributeValue } from '../../../api/attributeValue';
+import { toast } from 'react-toastify';
 import Form from './Add/AddForm';
 import filterUndefinedAndEmpty from '../../../utils/Array/filterUndefinedAndEmpty';
-import { isvalidation } from './Add/fn/isvalidation';
 
 const EditPage = () => {
   const { setObjectToEdit, objectToEdit } = usePageState()
@@ -26,13 +26,13 @@ const EditPage = () => {
   const { id } = useParams()
 
   const { data: Atrribute, isLoading: isLoadingAtrribute, isRefetching: AttributeisRefetching } = useGetSingleAttribute({ name: "category_id", id: id }, {})
-  const { mutate, isError, isSuccess } = useUpdateCategories()
+  const { mutate, isSuccess,isLoading:IsloadingButton } = useUpdateCategories()
-  const { mutateAsync, isSuccess: isSuccessAddAttribute, data: AttributeData, isError: isErrorAddAttribute } = useAddAttribute()
+  const { mutateAsync } = useAddAttribute()
-  const { mutate: mutateAttributeValue, isSuccess: isSuccessAddAttributeValue, data: AttributeValueData, isError: isErrorAddAttributeValue } = useAddAttributeValue()
+  const { mutate: mutateAttributeValue } = useAddAttributeValue()
-  const { mutate: UpdateAttribute, isSuccess: isSuccessAttribute, isError: isErrorUpdateAttribute } = useUpdateAttribute("put")
+  const { mutate: UpdateAttribute } = useUpdateAttribute("put")
-  const { mutate: UpdateAttributeValue, isSuccess: isSuccessAttributeValue, isError: isErrorUpdateAttributeValue } = useUpdateAttributeValue()
+  const { mutate: UpdateAttributeValue } = useUpdateAttributeValue()
-  const { mutate: DeleteAttributeValue, isError: isErrorDeleteAttributeValue } = useDeleteAttributeValue()
+  const { mutate: DeleteAttributeValue } = useDeleteAttributeValue()
-  const { mutate: DeleteAttribute, isError: isErrorDeleteAttribute } = useDeleteAttribute()
+  const { mutate: DeleteAttribute } = useDeleteAttribute()
 
 
   const [removedAttribute, setremovedAttribute] = useState<any[]>([])
@@ -49,35 +49,41 @@ const EditPage = () => {
   const [OldDataValues, setOldDataValues] = useState([])
 
 
-  const handleSubmit = (values: any
+  const handleSubmit = (values: any) => {
-  ) => {
 
     function isValid() {
       const attributes = values?.Attribute?.slice(1);
+      const flattenedAndFiltered = values?.removedAttributeValue?.flat().filter((value:any) => value !== undefined);
+
+      console.log(flattenedAndFiltered,"flattenedAndFiltered");
 
       setremovedAttribute(values?.removedAttribute)
-      setremovedAttributeValue(values?.removedAttributeValue)
+      setremovedAttributeValue(flattenedAndFiltered)
-      console.log(attributes, "attributes");
       
       if (attributes) {
         attributes.forEach((item: any, index: number) => {
           if (item?.id && item?.id !== null) {
+            console.log(item,"setEditAttribute");
+          
             setEditAttribute((prevEditAttribute) => [...prevEditAttribute, item]);
-            console.log(item, "item");
             if (item?.AttributeValue) {
               item.AttributeValue.slice(1).forEach((attrValueItem: any) => {
                 if (attrValueItem && Object.keys(attrValueItem).length > 0) { // Check if attrValueItem is defined and not empty
                   setEditAttributeValue((prevEditAttributeValue) => [...prevEditAttributeValue, [index, attrValueItem]]);
+                  console.log(attrValueItem,"setEditAttributeValue");
+
                 }
               });
             }
           } else {
             setAddAttribute((prevAddAttribute) => [...prevAddAttribute, item]);
+            console.log(item,"setAddAttribute");
+
             if (item?.AttributeValue) {
               item?.AttributeValue?.slice(1)?.forEach((attrValueItem: any) => {                
-                console.log(attrValueItem, "attrValueItemadd");
-
                 if (attrValueItem && Object.keys(attrValueItem)?.length > 0) { // Check if attrValueItem is defined and not empty
+                  console.log(attrValueItem,"setAddAttributeValue");
+
                   setAddAttributeValue((prevEditAttributeValue) => [...prevEditAttributeValue, [index, attrValueItem]]);
                 }
               });
@@ -102,15 +108,94 @@ const EditPage = () => {
         delete EditedCategory['photo']
       }
 
-      console.log(EditedCategory, "EditedCategory");
       
       mutate(EditedCategory)
     }
-    const validationResults = isvalidation(values?.Attribute, t);
+    const validationResults: boolean[] = [];
+      let previousNames: any = {};
       
-    if (validationResults.every((result) => result)) {
+      values?.Attribute?.slice(1)?.forEach((item: any, index: any) => {
+      if (item && Object.keys(item).length > 0) {
+      const itemName = t('name');
+      const itemNumber = index + 1;
+      
+      // Check if the names are unique across items
+      const currentItemNames = {
+      name_ar: item?.name_ar,
+      name_en: item?.name_en,
+      name_de: item?.name_de,
+      };
+      
+      if (
+      previousNames.name_ar === currentItemNames.name_ar ||
+      previousNames.name_en === currentItemNames.name_en ||
+      previousNames.name_de === currentItemNames.name_de
+      ) {
+      toast.error(`${itemName} ${t('unique_error_names')}`);
+      validationResults.push(false);
+      }
+      
+      previousNames = currentItemNames;
+      
+      // Check for other validation rules
+      if (!item?.name_ar || !item?.name_en || !item?.name_de) {
+      toast.error(`${t('required_name')} ${itemNumber}`);
+      validationResults.push(false);
+      } else if (!item?.type) {
+      toast.error(`${t('required_type')} ${itemNumber}`);
+      validationResults.push(false);
+      } else if (item?.type === "image") {
+      if (Array.isArray(item.AttributeValue)) {
+      item?.AttributeValue.slice(1)?.forEach((attrItem: any, index: number) => {
+      if (attrItem && Object.keys(attrItem).length > 0) {
+      if (attrItem.image === null) {
+      toast.error(`${t('required_image')} ${index + 1}`);
+      validationResults.push(false);
+      } else if (!attrItem?.value_ar || !attrItem?.value_en || !attrItem?.value_de) {
+      toast.error(`${t('required_text')} ${index + 1}`);
+      validationResults.push(false);
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
+      }
+      } else if (item?.type === "color") {
+      if (Array.isArray(item.AttributeValue)) {
+      item?.AttributeValue.slice(1)?.forEach((attrItem: any, index: number) => {
+      if (attrItem && Object.keys(attrItem).length > 0) {
+      const hexColorRegex = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+      if (attrItem && !hexColorRegex.test(attrItem?.value_en)) {
+      toast.error(`${t('required_color')} ${index + 1}`);
+      validationResults.push(false);
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
+      }
+      } else if (item?.type === "text") {
+      if (Array.isArray(item.AttributeValue)) {
+      item?.AttributeValue.slice(1)?.forEach((attrItem: any, index: number) => {
+      if (attrItem && Object.keys(attrItem).length > 0) {
+      if (attrItem && (!attrItem?.value_ar || !attrItem?.value_en || !attrItem?.value_de)) {
+      toast.error(` ${t('required_text')} ${index + 1}`);
+      validationResults.push(false);
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
+      }
+      } else {
+      validationResults.push(true);
+      }
+      }
+      });
+      
+      if (validationResults.every((result) => result)) {
       isValid();
-    }
+      }
 
 
   }
@@ -125,7 +210,6 @@ const EditPage = () => {
   useEffect(() => {
 
     if (isSuccess) {
-      console.log(isSuccess, "isSuccess");
 
 
       const categoryId = id;
@@ -134,7 +218,6 @@ const EditPage = () => {
 
       filteredEditAttribute?.map((dataToSend: any, index: number) => {
 
-        console.log(index, "index");
 
         const EditAttribute = dataToSend
         const foundObject = OldData.find((item: any) => item.id === EditAttribute?.id) as any;
@@ -188,20 +271,19 @@ const EditPage = () => {
 
         }
         const result: [number, any][] = filterByIndex(index, EditAttributeValue);
-        console.log(result, "result");
         const filteredresult = filterUndefinedAndEmpty(result);
+        console.log(filteredresult, "EditAttributeValue");
 
         filteredresult?.map((dataToSend: any) => {
           if (dataToSend?.id && dataToSend.id !== null) {
-            console.log(OldDataValues, "OldDataValues");
 
             const foundObjectValue = (OldDataValues[index] as any).find((item: any) => item.id === dataToSend?.id) as any;
-            console.log(foundObjectValue, "foundObjectValue");
-            console.log(OldDataValues[index], "OldDataValues[index]");
 
             const EditAttributeValue = dataToSend
             console.log(EditAttributeValue);
 
+     
+
             const NewEditAttributeValue = {
               id: EditAttributeValue?.id,
               value: {
@@ -209,7 +291,7 @@ const EditPage = () => {
                 ar: EditAttributeValue?.value_ar,
                 de: EditAttributeValue?.value_de
               },
-              image: EditAttributeValue?.main_photo,
+              image: EditAttributeValue?.image,
               // attribute_id:EditAttribute?.id,
               // id: EditAttributeValue?.id,
             }
@@ -225,8 +307,8 @@ const EditPage = () => {
               delete NewEditAttributeValue['image']
             }
 
+              
             if (foundObjectValue) {
-              console.log(foundObjectValue, "foundObjectValue");
 
               Object.keys(NewEditAttributeValue).forEach((propName: any) => {
                 if (foundObjectValue.hasOwnProperty(propName)) {
@@ -253,9 +335,6 @@ const EditPage = () => {
                 //@ts-ignore
                 delete NewEditAttributeValue.value;
               }
-              console.log(foundObjectValue.value, "foundObjectValue.value");
-              console.log(NewEditAttributeValue.value, "NewEditAttributeValue.value");
-
 
               if (Object.keys(NewEditAttributeValue).length > 0) {
                 //@ts-ignore
@@ -264,7 +343,6 @@ const EditPage = () => {
                 NewEditAttributeValue.id = foundObjectValue?.id;
 
 
-                console.log(NewEditAttributeValue, "EditAttribute");
                 UpdateAttributeValue(NewEditAttributeValue)
 
               }
@@ -274,15 +352,16 @@ const EditPage = () => {
 
           }
           else {
-            console.log("mutateAttributeValue");
 
             const EditAttributeValue = dataToSend
-            const IMages = EditAttributeValue?.id !== null ? {
+            const IMage =
-              main_photo: EditAttributeValue?.main_photo,
+            (typeof EditAttributeValue?.image === 'string') ?
-              image: EditAttributeValue?.image,
+            {
-            } : {
+              copied_assets: {  image: EditAttributeValue?.image }
-              copied_assets: { image: EditAttributeValue?.image },
+            } :
-            }
+            {
+              image: EditAttributeValue?.image
+            };
             const NewEditAttributeValue = {
 
               value: {
@@ -290,9 +369,7 @@ const EditPage = () => {
                 ar: EditAttributeValue?.value_ar,
                 de: EditAttributeValue?.value_de
               },
-              // image: EditAttributeValue?.main_photo,
+              ...IMage,
-              ...IMages,
-              // attribute_id:EditAttribute?.id,
               attribute_id: EditAttribute?.id,
             }
             if (EditAttribute.type === "color") {
@@ -317,8 +394,8 @@ const EditPage = () => {
         DeleteAttribute({ id: item })
       })
 
-      console.log(AddAttribute, "AddAttribute");
       const filteredAddAttribute = filterUndefinedAndEmpty(AddAttribute);
+      console.log(filteredAddAttribute,"AddAttribute");
 
       filteredAddAttribute?.map((dataToSend: any, index: number) => {
 
@@ -337,18 +414,27 @@ const EditPage = () => {
         mutateAsync(NewAddAttribute).then((data: any) => {
           const AttributeId = (data as any)?.id;
           // console.log(AttributeValues[0]?.slice(1),"AttributeValues");
-          const result: [number, any][] = filterByIndex(0, AddAttributeValue);
+          const result: [number, any][] = filterByIndex(index, AddAttributeValue);
+          console.log(AddAttribute?.AttributeValue,"AddAttribute?.AttributeValue");
 
-          result?.map((dataToSend: any, index: number) => {
+          AddAttribute?.AttributeValue?.slice(1)?.map((dataToSend: any, index: number) => {
 
             const AddAttributeValue = dataToSend
+            const IMage =
+            (typeof AddAttributeValue?.image === 'string') ?
+            {
+              copied_assets: {  image: AddAttributeValue?.image }
+            } :
+            {
+              image: AddAttributeValue?.image
+            };
             const NewAddAttributeValue = {
               value: {
                 en: AddAttributeValue?.value_en,
                 ar: AddAttributeValue?.value_ar,
                 de: AddAttributeValue?.value_de
               },
-              image: AddAttributeValue?.main_photo,
+              ...IMage,
               attribute_id: AttributeId,
             }
             mutateAttributeValue(NewAddAttributeValue)
@@ -396,9 +482,8 @@ const EditPage = () => {
     setOldDataValues(Atrribute?.data?.map((item: any) => {
       return item?.attribute_value
     }))
-    console.log(OldDataValues, "OldDataValues");
 
-  }, [data?.category, Atrribute?.data, isRefetching, AttributeisRefetching]);
+  }, [data?.category, Atrribute?.data,isRefetching,AttributeisRefetching]);
 
 
   const getValidationSchema = () => {
@@ -406,7 +491,7 @@ const EditPage = () => {
   };
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
   if (AttributeisRefetching || isRefetching || isLoadingAtrribute || isLoading || !objectToEdit || (Array.isArray(objectToEdit) && objectToEdit.some(item => item === undefined))) {
     return <Spin />

src/Pages/Coupon/View/AddPage.tsx

@@ -12,25 +12,28 @@ import Form from './AddForm';
 const AddCouponPage = () => {
 
 
-  const { mutate, isLoading, isSuccess } = useAddCoupon()
+  const { mutate, isLoading:IsloadingButton, isSuccess } = useAddCoupon()
   const handleSubmit = (values: any) => {
 
     values.active_at = values.active[0].format('YYYY-MM-DD HH:mm:ss.SSS')
      values.active_to = values.active[1].format('YYYY-MM-DD HH:mm:ss.SSS')
      values.status = values.active ? "active" : "inactive"
 
+     const products = Array.isArray(values?.product_attr) ? 
+    values?.product_attr.map((item: any) => {
+      return { "itemable_type": "product", "itemable_id": item };
+    })?.filter((item: any) => item.itemable_id !== "") || [] : [];
 
+  // Check if category_attr is an array before mapping over it
+  const category = Array.isArray(values?.category_attr) ? 
+    values?.category_attr.map((item: any) => {
+      return { "itemable_type": "category", "itemable_id": item };
+    })?.filter((item: any) => item.itemable_id !== "") || [] : [];
 
+    if (products.length > 0 || category.length > 0 ) {
+      values['items'] = [...products, ...category];
 
-const products = values?.product_attr?.map((item: any) => {
+    }
-  return { "itemable_type": "product", "itemable_id": item };
-})?.filter((item: any) => item.itemable_id !== "")|| [];
-
-const category = values?.category_attr?.map((item: any) => {
-  return { "itemable_type": "category", "itemable_id": item };
-})?.filter((item: any) => item.itemable_id !== "") || [];
-
-values['items'] = [...products, ...category];
   
 
 console.log(values, "values");
@@ -45,7 +48,7 @@ mutate(values)
 
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Coupon/View/EditForm.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Col, Row } from 'reactstrap';
 import ValidationField from '../../../Components/ValidationField/ValidationField';
 import { useFormikContext } from 'formik';
@@ -12,7 +12,7 @@ import useFormatToSelect from '../../../Hooks/useFormatToSelect';
 import { useGetProduct } from '../../../api/product';
 
 function Form() {
-  const { values } = useFormikContext<any>();
+  const { values,setFieldValue } = useFormikContext<any>();
   const [t] = useTranslation(); // FLAT    coupn not be spacified && flate 
   const coupon_type = [{ lable: "general", value: "general" },{ lable: "specified", value: "specified" }]
   const coupon_type_discount_flat = [{ lable: "general", value: "general" }]
@@ -23,6 +23,16 @@ function Form() {
 
   const SelectCategoriesData = useFormatToSelect(CategoriesData?.categories)
   const SelectProductData = useFormatToSelect(ProductData?.BaseProducts)
+  useEffect(() => {
+
+    if (values?.discount_type === 'flat') {
+        console.log(values?.coupon_type,"values?.coupon_type");
+        
+      setFieldValue("coupon_type","general")
+
+    }
+  }, [values?.discount_type])
+  
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>

src/Pages/Coupon/View/EditPage.tsx

@@ -18,7 +18,7 @@ import Form from './EditForm';
 const EditPage = () => {
   const { setObjectToEdit, objectToEdit } = usePageState()
   const { t } = useTranslation();
-  const { data,isLoading,isRefetching } = useGetOneCoupon()
+  const { data,isLoading:IsloadingButton,isRefetching } = useGetOneCoupon()
   const { mutate, isSuccess } = useUpdateCoupon("put")
   const handleSubmit = (values: any) => {
     const products = values?.product_attr?.map((item: any) => {
@@ -66,13 +66,13 @@ const EditPage = () => {
   const getValidationSchema = () => {
     return null
   };
-  if (  isLoading || !objectToEdit || isRefetching) {
+  if (  IsloadingButton || !objectToEdit || isRefetching) {
     return <Spin />
   }
 
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Coupon/formUtil.ts

@@ -38,7 +38,7 @@ export const getInitialValues = (objectToEdit: any | null = null): any => {
     }
   });
   return {
-    id: objectToEdit?.id ?? 0,
+    id: objectToEdit?.id ?? null,
     name: objectToEdit?.name ,
     code: objectToEdit?.code ,
     //@ts-ignore
@@ -60,19 +60,19 @@ export const getInitialValues = (objectToEdit: any | null = null): any => {
 
 export const getInitialValuesForAdd = (objectToEdit: any | null = null): any => {
   return {
-    id: '',
+    // id: '',
-    name: '',
+    name: null,
-    code: '',
+    code: null,
-    active: '',
+    active: null,
-    minimum_total_to_order: '',
+    minimum_total_to_order: null,
-    maximum_number_of_uses_per_user: '',
+    maximum_number_of_uses_per_user: null,
-    maximum_number_of_uses: '',
+    maximum_number_of_uses: null,
-    coupon_value: '',
+    coupon_value: null,
-    coupon_type: 'general',
+    coupon_type: null,
-    discount_type: '',
+    discount_type: null,
-    product_attr: '',
+    product_attr: null,
-    category_attr: '',
+    category_attr: null,
-    status: '',
+    status: 0,
 
     
 

src/Pages/Notifcation/View/AddForm.tsx

@@ -1,28 +1,69 @@
 
 import { Col, Row } from 'reactstrap';
 import ValidationField from '../../../Components/ValidationField/ValidationField';
+import { useGetUsers } from '../../../api/users';
+import { useTranslation } from 'react-i18next';
+import { useFormikContext } from 'formik';
+import { useEffect } from 'react';
 
 function Form() {
-  const type = [{ lable: "other", value: "other" },{ lable: "product", value: "product"},{ lable: "order", value: "order" }]
+  const type = [{ lable: "other", value: "other" }, { lable: "product", value: "product" }, { lable: "order", value: "order" }]
 
+  const { data: user } = useGetUsers()
+  const [t]=useTranslation()
+  const useFormatToSelect = (Data : any) => {
+    const format = (data :any) => {
+      if (!data) return [];
+      return data.map((item :any) => ({
+        value: item?.id,
+        label: item?.name,
+      }));
+    };
+  
+    return format(Data);
+  };
+  const SelectData = useFormatToSelect(user?.data)
+
+  // const selectAllOption = [{ label: t("Select All"), value: "*" }];
+  const selectAllOption = { label: "Select All", value: "*" };
+
+  const optionsWithSelectAll = [selectAllOption, ...SelectData];
+  const { values,setFieldValue} = useFormikContext<any>();
+
+  const hasAsterisk = values?.user_ids.some((item:any) => typeof item === 'string' && item.includes('*'));
+  const option = hasAsterisk ? [selectAllOption] : optionsWithSelectAll;
+
+    useEffect(() => {
+      if(hasAsterisk){
+        setFieldValue("user_ids",["*"])
+        
+      }
+    }, [hasAsterisk])
+    
+    
+    useEffect(() => {
+      console.log(values?.user_ids,"user_ids");
+      
+    }, [values.user_ids])
     
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-        <Col>
+      <Col>
-      <ValidationField name="body_en" />
+        <ValidationField name="body_en" />
-      <ValidationField name="body_ar" />
+        <ValidationField name="body_ar" />
-      <ValidationField name="body_de" />
+        <ValidationField name="body_de" />
-      {/* <ValidationField name="meta" /> */}
+        {/* <ValidationField name="meta" /> */}
+        <ValidationField name="user_ids" label='user' type="Search" option={option} searchBy={"name"}  isMulti />
 
 
       </Col>
       <Col>
-      <ValidationField name="title_en" />
+        <ValidationField name="title_en" />
-      <ValidationField name="title_ar" />
+        <ValidationField name="title_ar" />
-      <ValidationField name="title_de" />
+        <ValidationField name="title_de" />
 
-      {/* <ValidationField name="type" type="Select" option={type} /> */}
+        {/* <ValidationField name="type" type="Select" option={type} /> */}
 
 
 

src/Pages/Notifcation/View/AddPage.tsx

@@ -14,30 +14,36 @@ import { useAddNotification } from '../../../api/notification';
 const AddPage = () => {
 
 
-  const { mutate, isLoading, isSuccess } = useAddNotification()
+  const { mutate, isLoading:IsloadingButton, isSuccess } = useAddNotification()
   const {id} = useParams()
   const handleSubmit = (values: any) => {
+    const hasAsterisk = values?.user_ids.some((item:any) => typeof item === 'string' && item.includes('*'));
+    
+    const userIds = hasAsterisk ? { notifyAll: 1 } : { user_ids: values?.user_ids };
   
     const body = {
       en: values.body_en,
       ar: values.body_ar,
-      du: values.body_de
+      de: values.body_de
-    }
+    };
-    const meta = {}
+  
+    const meta = {};
+  
     const title = {
       en: values.title_en,
       ar: values.title_ar,
-      du: values.title_de
+      de: values.title_de
-    }
-    const dataToSend = {
-      body: JSON.stringify(body),
-      meta: JSON.stringify(meta),
-      title:JSON.stringify(title),
-      user_ids: [id],
-      type: "other",
-
     };
   
+    const dataToSend = {
+      body: body,
+      meta: meta,
+      title: title,
+      type: "other",
+      ...userIds
+    };
+    
+    console.log(dataToSend?.notifyAll);
     
     mutate(dataToSend);
   };
@@ -45,11 +51,11 @@ const AddPage = () => {
 
   const { t } = useTranslation();
 
-  useNavigateOnSuccess(isSuccess, '/users')
+  useNavigateOnSuccess(isSuccess, '/notification')
 
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Notifcation/View/formUtil.ts

@@ -37,7 +37,7 @@ export const getValidationSchema = (editMode: boolean = false): Yup.Schema<any>
     body_en: Yup.string().required('Required'),
     body_ar: Yup.string().required('Required'),
     body_de: Yup.string().required('Required'),
-    // meta: Yup.string().required('Required'),
+    user_ids: Yup.array().min(1, 'At least one user must be selected').required('Required'),
 
     title_en: Yup.string().required('Required'),
     title_ar: Yup.string().required('Required'),

src/Pages/Products/ProductsPage.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import DashBody from '../../Layout/Dashboard/DashBody'
 import DashHeader from '../../Layout/Dashboard/DashHeader'
 import LyTable from '../../Layout/Dashboard/LyTable'
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
 import SearchField from '../../Layout/Dashboard/SearchField'
+import { usePageState } from '../../lib/state mangment/LayoutPagestate'
 
 function ProductsPage() {
 
@@ -19,6 +20,8 @@ function ProductsPage() {
     const navigate = useNavigate()
     const totalRows = data?.meta?.total;
   
+  
+
   return (
     <DashBody status={status as QueryStatusEnum} >
     <DashHeader showAddButton={false} title={'products'}>

src/Pages/Products/View/AddPage.tsx

@@ -18,7 +18,7 @@ import { AddNewVariation } from './Addfn/AddNewVariation';
 const AddProductPage = () => {
 
 
-  const { mutate, isLoading, data, isSuccess } = useAddProduct()
+  const { mutate, isLoading:IsloadingButton, data, isSuccess } = useAddProduct()
   const { mutate: AddVariation, isSuccess: SuccessVariation } = useAddProductVariation()
 
   const [IsValed, setIsValed] = useState(false)
@@ -65,11 +65,11 @@ const AddProductPage = () => {
 
   const { t } = useTranslation();
 
-  useNavigateOnSuccess(SuccessVariation, '/products')
+  useNavigateOnSuccess(isSuccess, '/products')
 
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Products/View/Addfn/AddNewVariation.ts

@@ -3,19 +3,21 @@ export function AddNewVariation(Varibletaps: any[], data: any, AddVariation: any
     const baseProductId = data?.id;
     Varibletaps?.forEach((dataToSend: any) => {
       const varible = dataToSend;
-      const info = varible?.info;
+      const info = varible?.info ?? [];
-      const convertedArray = info?.reduce((acc: any, obj: any) => {
+        const convertedArray = Array.isArray(info) ?? info.reduce((acc: any, obj: any) => {
-        acc[obj.Description] = obj.key;
+          acc[obj.Description] = obj.key;
-        return acc;
+          return acc;
-      }, {});
+        }, {});  
       const jsonString = JSON.stringify(convertedArray);
-      const IMages = varible?.id !== null ? {
+
+      const IMages = (varible?.id !== null || varible?.id !== 0) ? {
         main_photo: varible?.main_photo,
         images: varible?.images,
       } : {
         copied_assets: { main_photo: varible?.main_photo, images: varible?.images },
       }
 
+
       const Newproduct = {
         name: {
           en: varible?.name_en,

src/Pages/Products/View/EditPage.tsx

@@ -24,7 +24,7 @@ const ViewProduct = () => {
   const { data, isLoading, isRefetching } = useGetOneProduct({ id: id })
 
   const [OldData, setOldData] = useState(data?.data?.products)
-  const { mutate, isSuccess } = useUpdateProduct('put')
+  const { mutate, isSuccess, isLoading: IsloadingButton } = useUpdateProduct('put')
   const { mutate: UpdateVariation, isSuccess: UpdetedSuccessVariation } = useUpdateProductVariation()
   const { mutate: AddVariation, isSuccess: AddedSuccessVariation, data: ProductVariationData } = useAddProductVariation()
 
@@ -38,7 +38,9 @@ const ViewProduct = () => {
 
   const handleSubmit = (values: any) => {
     // Update removedVarianteValues state
-    console.log(values?.removedVariant, "values?.removedVariant");
+    // console.log(values?.removedVariant, "values?.removedVariant");
+    console.log(values, "values");
+
     function isValid() {
       setremovedVariant(values?.removedVariant);
       const variables = values?.variable?.slice(1);
@@ -59,9 +61,9 @@ const ViewProduct = () => {
       mutate(newData);
     }
     const validationResults = isvalidation(values.variable, t);
-    if (validationResults.every((result) => result)) {
+    // if (validationResults.every((result) => result)) {
-      isValid();
+    //   isValid();
-    }
+    // }
 
 
   };
@@ -69,6 +71,15 @@ const ViewProduct = () => {
 
 
 
+  function arraysAreEqual(array1: any, array2: any) {
+    // Sort both arrays
+    const sortedArray1 = array1.slice().sort();
+    const sortedArray2 = array2.slice().sort();
+
+    // Compare the sorted arrays
+    return JSON.stringify(sortedArray1) === JSON.stringify(sortedArray2);
+  }
+
 
 
   useEffect(() => {
@@ -79,18 +90,29 @@ const ViewProduct = () => {
       filtered_Variant?.map((dataToSend: any, index: number) => {
         console.log(dataToSend, "dataToSend");
         const varible = dataToSend
-        if (varible?.id && varible?.id !== null) {
+        if (varible?.id && varible?.id !== null && varible?.id !== 0) {
           const foundObject = OldData.find((item: any) => item.id === varible?.id) as any;
-          const info = varible?.info
+          const formattedOldInfoData = foundObject?.info ? Object.entries(foundObject?.info).map(([key, value], index) => ({
-          console.log(info, "info");
+            [`Description`]: key,
-
+            [`key`]: value,
-          const convertedArray = info.reduce((acc: any, obj: any) => {
+          })) : [];
+          // const info = varible?.info
+          const info = varible?.info ?? [];
+          const convertedArray = Array.isArray(info) ?? info.reduce((acc: any, obj: any) => {
             acc[obj.Description] = obj.key;
             return acc;
           }, {});
           const jsonString = JSON.stringify(convertedArray);
-          console.log(jsonString, "jsonStringinfo");
 
+          const images_product = foundObject?.images?.map((item: any) => {
+            return item?.path
+          })
+          const array1 =images_product;
+          const array2 =varible?.images;
+
+          const isEqual2 = array1.length === array2.length && array1.every((value:any, index:any) => value === array2[index]);
+
+          console.log("Arrays are equal:", isEqual2);
 
           const Editedproduct = {
             name: {
@@ -103,16 +125,16 @@ const ViewProduct = () => {
               ar: varible?.description_ar,
               de: varible?.description_de
             },
-            // quantity: varible?.quantity,
+            quantity: varible?.quantity,
             main_photo: varible?.main_photo,
             images: varible?.images,
             info: jsonString,
             price: varible?.price,
 
 
-            product_attributes: varible?.attribute?.map((item: any, index: any) => {
+            // product_attributes: varible?.attribute?.map((item: any, index: any) => {
-              return { attribute_value_id: item?.value, attribute_id: item?.id }
+            //   return { attribute_value_id: item?.value, attribute_id: item?.id }
-            }),
+            // }),
 
           }
           if (foundObject) {
@@ -154,35 +176,45 @@ const ViewProduct = () => {
                 delete Editedproduct[key];
               }
             });
-            if (convertedArray && foundObject.info) {
+            console.log(foundObject.info, "foundObject.info");
-              const editedInfoKeys = Object.keys(convertedArray);
-              const foundInfoKeys = Object.keys(foundObject.info);
-              console.log(editedInfoKeys, "editedInfoKeys");
-              console.log(foundInfoKeys, "foundInfoKeys");
 
-              // Check if the number of keys is the same
+            const isEqual = arraysAreEqual(formattedOldInfoData, varible?.info);
-              if (editedInfoKeys.length === foundInfoKeys.length) {
+            console.log(isEqual, "isEqual");
-                // Check if all keys and their corresponding values are the same
 
-                const keysAreEqual = editedInfoKeys.every((key: any) => {
+            if (isEqual) {
-                  //@ts-ignore
+              //@ts-ignore
-                  console.log(convertedArray[key], "convertedArray[key] ");
+              delete Editedproduct?.info;
-                  console.log(foundObject.info[key], "foundObject.info[key]");
-                  return convertedArray[key] === foundObject.info[key];
-                });
-
-                if (keysAreEqual) {
-                  // Remove the info property from Editedproduct
-                  //@ts-ignore
-
-                  delete Editedproduct.info;
-                }
-              }
-              if (Object.keys(Editedproduct.info).length === 0) {
-                //@ts-ignore
-                delete Editedproduct.info;
-              }
             }
+
+            // if (convertedArray && foundObject.info) {
+            //   const editedInfoKeys = Object.keys(convertedArray);
+            //   const foundInfoKeys = Object.keys(foundObject.info);
+            //   console.log(editedInfoKeys, "editedInfoKeys");
+            //   console.log(foundInfoKeys, "foundInfoKeys");
+
+            //   // Check if the number of keys is the same
+            //   if (editedInfoKeys.length === foundInfoKeys.length) {
+            //     // Check if all keys and their corresponding values are the same
+
+            //     const keysAreEqual = editedInfoKeys.every((key: any) => {
+            //       //@ts-ignore
+            //       console.log(convertedArray[key], "convertedArray[key] ");
+            //       console.log(foundObject.info[key], "foundObject.info[key]");
+            //       return convertedArray[key] === foundObject.info[key];
+            //     });
+
+            //     if (keysAreEqual) {
+            //       // Remove the info property from Editedproduct
+            //       //@ts-ignore
+
+            //       delete Editedproduct.info;
+            //     }
+            //   }
+            //   if (Object.keys(Editedproduct.info).length === 0) {
+            //     //@ts-ignore
+            //     delete Editedproduct.info;
+            //   }
+            // }
             if (Object.keys(Editedproduct).length > 0) {
               //@ts-ignore
               Editedproduct._method = "PUT";
@@ -197,19 +229,21 @@ const ViewProduct = () => {
 
 
         } else {
-          const info = varible?.info
+          const info = varible?.info ?? [];
-          const convertedArray = info?.reduce((acc: any, obj: any) => {
+          const convertedArray = Array.isArray(info) ?? info.reduce((acc: any, obj: any) => {
             acc[obj.Description] = obj.key;
             return acc;
           }, {});
           const jsonString = JSON.stringify(convertedArray);
-
+          const IMages =
-          const IMages = varible?.id !== null ? {
+            (typeof varible?.main_photo === 'string' || typeof varible?.images === 'string') ?
-            main_photo: varible?.main_photo,
+              {
-            images: varible?.images,
+                copied_assets: { main_photo: varible?.main_photo, images: varible?.images }
-          } : {
+              } :
-            copied_assets: { main_photo: varible?.main_photo, images: varible?.images },
+              {
-          }
+                main_photo: varible?.main_photo,
+                images: varible?.images
+              };
 
           const Newproduct = {
             name: {
@@ -245,8 +279,9 @@ const ViewProduct = () => {
 
       console.log(removedVariant);
       const filtered_removedVariant = filterUndefinedAndEmpty(removedVariant);
+      console.log(filtered_removedVariant);
 
-      filtered_removedVariant?.map((item: any) => {
+      removedVariant?.map((item: any) => {
         return DeleteVariation({ id: item })
       })
     }
@@ -254,23 +289,23 @@ const ViewProduct = () => {
 
 
 
-  useNavigateOnSuccess(isSuccess , '/products')
+  useNavigateOnSuccess(isSuccess, '/products')
 
 
   useEffect(() => {
     // refetch()
     setObjectToEdit(data?.data);
     setOldData(data?.data?.products)
-  }, [data, data?.data, id, isRefetching]);
+  }, [data, data?.data?.products, data?.data, id, isRefetching]);
 
   const getValidationSchema = () => {
     return null
   };
-  if (isRefetching) {
+  if (isRefetching || isLoading) {
     return <Spin />
   }
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit, IsloadingButton };
 
 
   return (
@@ -289,7 +324,7 @@ const ViewProduct = () => {
               <div className=" mt-4"><BasicInfo /></div>
             </TabBody>
             <TabBody >
-              <div className=" mt-4"> {isLoading && objectToEdit ? <Spin /> : <TabsContainer />} </div>
+              <div className=" mt-4"> {isLoading && objectToEdit && isRefetching ? <Spin /> : <TabsContainer />} </div>
             </TabBody>
 
           </Tabs>

src/Pages/Products/View/FormikTab/Field/Atteibute.tsx

@@ -20,7 +20,7 @@ const Attribute = ({ tabKey }: any) => {
       const uniqueOptionsMap = new Map();
       item?.attribute_value.forEach((attr: any) => {
         if (!uniqueOptionsMap.has(attr.value[language])) {
-          uniqueOptionsMap.set(attr.value[language], { attribute_id: attr.attribute_id, id: attr.id });
+          uniqueOptionsMap.set(attr.value[language], { attribute_id: attr.id, id: attr.attribute_id });
         }
       });
 
@@ -30,6 +30,10 @@ const Attribute = ({ tabKey }: any) => {
         id: value.id, // Include id in the option
       }));
 
+      if (options.length === 0) {
+        return <></>; // Don't render anything if options are empty
+      }
+    
       return (
         <div className='ValidationField'>
 

src/Pages/Products/View/FormikTab/Field/File.tsx

@@ -8,20 +8,23 @@ import { useFormikContext } from 'formik';
 import { ImageBaseURL } from '../../../../../api/config';
 
 
-const File = ({ tabKey}:any) => {
+const FileProduct = ({ tabKey}:any) => {
     const { t } = useTranslation();
   const formik = useFormikContext<any>();
   const name =  `variable[${tabKey}].${"main_photo"}`;
-  let FormikName = formik.values?.variable[tabKey]?.main_photo;
+  let FormikName = formik?.values?.variable[tabKey]?.main_photo as any;
-  const imageUrl = FormikName ? ImageBaseURL + FormikName :  '';
+  const FormikimageUrl = FormikName ? ImageBaseURL + FormikName :  '';
+
+  const imageUrl = typeof FormikName === "string" ? (FormikimageUrl)?.replace("public", "/storage") : (FormikName instanceof File) ? URL.createObjectURL(FormikName) : "";
+
   const fileList: UploadFile[] = [
 
     {
       uid: '-1',
       name: '',
       status: 'done',
-      url: imageUrl?.replace("public", "/storage"),
+      url: imageUrl,
-      thumbUrl: imageUrl?.replace("public", "/storage")
+      thumbUrl: imageUrl
     }
   ];
   const FilehandleChange = (value:any) => {
@@ -60,4 +63,4 @@ const File = ({ tabKey}:any) => {
   )
 }
 
-export default File
+export default FileProduct

src/Pages/Products/View/FormikTab/Field/FileImage.tsx

@@ -11,8 +11,11 @@ const MaltyFile = ({ tabKey }: any) => {
 
     // Construct imageUrl and fileList for each file
     const files = formik.values?.variable[tabKey]?.images || [];
+
     const fileItems = files.map((file: any, index: number) => {
-        const imageUrl = file ? ImageBaseURL + file : '';
+        
+        const FormikimageUrl = file ? ImageBaseURL + file :  '';      
+        const imageUrl = typeof file === "string" ? (FormikimageUrl)?.replace("public", "/storage") : (file instanceof File) ? URL.createObjectURL(file) : "";
         return {
             uid: `-${index}`,
             name: file?.name || '',

src/Pages/Products/View/FormikTab/Field/Object.tsx

@@ -34,7 +34,7 @@ const ObjectField = ({ tabKey }: any) => {
     };
 
     useEffect(() => {
-        console.log(initialValues);
+        // console.log(initialValues);
     }, [initialValues])
 
     return (

src/Pages/Products/View/FormikTab/TabsContainer.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Tabs, Space } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
 import { toast } from 'react-toastify';
-import {  FormikValues, useFormikContext } from 'formik';
+import { FormikValues, useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { useProductVarianState } from '../../../../lib/state mangment/Pages/Products';
 import { VariableTabs } from './VariableTabs';
@@ -15,24 +15,24 @@ export const TabsContainer: React.FC = () => {
   const [activeKey, setActiveKey] = useState('1');
   const [t] = useTranslation()
   const initialItemShape: any = {
-    label:  `${t(`variant`)} 1`,
+    label: `${t(`variant`)} 1`,
     key: '1',
     closable: true,
   };
   const formikContext = useFormikContext<FormikValues>();
-const { setFieldValue } = useFormikContext();
+  const { setFieldValue } = useFormikContext();
-const { values, handleChange } = formikContext;
+  const { values, handleChange } = formikContext;
-const varianCount = values?.variable?.slice(1)?.map((item:any,index:any)=>{
+  const varianCount = values?.variable?.slice(1)?.map((item: any, index: any) => {
-  return {
+    return {
-    label: `${t(`variant`)}`+ `${index+1}`,
+      label: `${t(`variant`)}` + `${index + 1}`,
-    key: index+1,
+      key: index + 1,
-    closable: true,
+      closable: true,
-  }
+    }
-})?? initialItemShape
+  }) ?? initialItemShape
-const [items, setItems] = useState(varianCount ?? [initialItemShape]); // Ensure items is always an array
+  const [items, setItems] = useState(varianCount ?? [initialItemShape]); // Ensure items is always an array
-const [width, setWidth] = useState(window.innerWidth);
+  const [width, setWidth] = useState(window.innerWidth);
 
-  const findFirstMissingKey = (itemKeys:string[]) => {
+  const findFirstMissingKey = (itemKeys: string[]) => {
     const keysAsNumbers = itemKeys.map(Number); // Convert strings to numbers
     for (let i = 1; i <= keysAsNumbers.length + 1; i++) {
       if (!keysAsNumbers.includes(i)) {
@@ -62,7 +62,7 @@ const [width, setWidth] = useState(window.innerWidth);
   };
 
   const handleDuplicate = (targetKey: string) => {
-    const targetItem = items.find((item:any) => item.key === targetKey);
+    const targetItem = items.find((item: any) => item.key === targetKey);
     if (targetItem) {
       const newKey = `${nextKey}`;
       const newItem = { ...targetItem, key: newKey, label: `${t(`variant`)} ${newKey}` };
@@ -70,7 +70,14 @@ const [width, setWidth] = useState(window.innerWidth);
       setActiveKey(newKey);
 
       const originalValues = values?.variable?.[targetKey];
-      setFieldValue(`variable.${newKey}`, {...originalValues,id:null});
+      if(originalValues.id === null){
+
+        setFieldValue(`variable.${newKey}`, { ...originalValues, id: 0 });
+
+      }else{
+        setFieldValue(`variable.${newKey}`, { ...originalValues, id: null });
+
+      }
 
       const originalInfo = values?.info?.[targetKey];
 
@@ -83,40 +90,40 @@ const [width, setWidth] = useState(window.innerWidth);
     }
   };
 
- const [removedVariant, setremovedVariant] = useState<string[]>([]);
+  const [removedVariant, setremovedVariant] = useState<string[]>([]);
   useEffect(() => {
     setFieldValue(`removedVariant`, removedVariant);
 
   }, [removedVariant]);
   const handleRemove = (targetKey: string) => {
-    const newItems = items.filter((item:any) => item.key !== targetKey);
+    const newItems = items.filter((item: any) => item.key !== targetKey);
     const removedItem = values?.variable[targetKey] as any;
     if (removedItem?.id) {
       setremovedVariant((prevRemovedvariable) => [...prevRemovedvariable, removedItem.id]);
     }
-          const newActiveKey = newItems.length ? newItems[newItems.length - 1].key : '1';
+    const newActiveKey = newItems.length ? newItems[newItems.length - 1].key : '1';
-        setItems(newItems);
+    setItems(newItems);
-        setActiveKey(newActiveKey);
+    setActiveKey(newActiveKey);
-        setFieldValue(`variable.${targetKey}`, undefined);
+    setFieldValue(`variable.${targetKey}`, undefined);
-        setFieldValue(`info.${targetKey}`, undefined);
+    setFieldValue(`info.${targetKey}`, undefined);
 
 
-};
+  };
 
-useEffect(() => {
+  useEffect(() => {
-  const handleResize = () => {
+    const handleResize = () => {
       setWidth(window.innerWidth);
-  };
+    };
 
-  window.addEventListener('resize', handleResize);
+    window.addEventListener('resize', handleResize);
 
-  return () => {
+    return () => {
       window.removeEventListener('resize', handleResize);
-  };
+    };
-}, []);
+  }, []);
-const tabPosition = width > 1000 ? 'left' : 'top';
+  const tabPosition = width > 1000 ? 'left' : 'top';
 
-  return  (
+  return (
     <>
       <Tabs
         type="editable-card"
@@ -125,21 +132,21 @@ const tabPosition = width > 1000 ? 'left' : 'top';
         onEdit={(targetKey: any, action) => (action === 'add' ? handleAdd() : handleRemove(targetKey))}
         tabPosition={tabPosition}
         items={
-        items.map((item: any) => ({
+          items.map((item: any) => ({
-          label: <Space>{t(`${item.label}`)} <CopyOutlined onClick={() => handleDuplicate(item.key)} /></Space>,
+            label: <Space>{t(`${item.label}`)} <CopyOutlined onClick={() => handleDuplicate(item.key)} /></Space>,
-          children: <VariableTabs tabKey={item.key} />,
+            children: <VariableTabs tabKey={item.key} />,
-          key: item.key,
+            key: item.key,
-          closable: item.closable,
+            closable: item.closable,
-        })) 
+          }))
-      }
+        }
 
       >
 
       </Tabs>
-     { items.length === 0 && (
+      {items.length === 0 && (
-              <h6 className='AddNewTabText'>{t("Add New Variant")}</h6>
+        <h6 className='AddNewTabText'>{t("Add New Variant")}</h6>
 
-           )}
+      )}
     </>
-    );
+  );
 };

src/Pages/Products/View/FormikTab/VariableTabs.tsx

@@ -9,6 +9,7 @@ import ObjectField from './Field/Object';
 import Atteibute from './Field/Atteibute';
 
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 
 interface VariableTabsProps {
     tabKey: string;
@@ -18,6 +19,7 @@ export const VariableTabs: React.FC<VariableTabsProps> = ({ tabKey }) => {
     const { t } = useTranslation();
     const formikContext = useFormikContext<FormikValues>();
     const { values, handleChange } = formikContext;
+    // const {id}= useParams()
 
     const handleFieldChange = (fieldName: string) => (
         e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | any
@@ -56,14 +58,8 @@ export const VariableTabs: React.FC<VariableTabsProps> = ({ tabKey }) => {
                         onChange={handleFieldChange('quantity')}
                         type="number"
                     /> */}
-                      <FormItem
-                        label={t(`price`)}
-                        value={FormikName("price")}
-                        onChange={handleFieldChange('price')}
-                        type="number"
-                    />
                 
-                    {values?.category_id &&
+                    {(values?.category_id && (!values?.variable?.[tabKey]?.id || values?.variable?.[tabKey]?.id == null || values?.variable?.[tabKey]?.id == 0) ) &&
                         <Atteibute tabKey={tabKey} />
                     }
                    
@@ -85,7 +81,12 @@ export const VariableTabs: React.FC<VariableTabsProps> = ({ tabKey }) => {
                         value={FormikName("description_de")}
                         onChange={handleFieldChange('description_de')}
                     />
-                  
+                    <FormItem
+                        label={t(`price`)}
+                        value={FormikName("price")}
+                        onChange={handleFieldChange('price')}
+                        type="number"
+                    />
                     <File tabKey={tabKey} />
                     <MaltyFile tabKey={tabKey} />
                 </Col>

src/Pages/Products/formUtil.ts

@@ -9,14 +9,20 @@ export const getInitialValues = (objectToEdit: any) => {
     return {};
   }
   const products =  objectToEdit?.products?.map((item: any) => {
-    console.log(item,"item");
+    // console.log(item,"item");
 
 
    const formattedData = item?.info ? Object.entries(item?.info).map(([key, value], index) => ({
-    [`${index}.Description`]: key,
+    [`Description`]: key,
-    [`${index}.key`]: value,
+    [`key`]: value,
   })) : [];
 
+  // console.log(formattedData,"formattedData");
+  const images_product = item?.images?.map((item:any)=>{
+    return item?.path
+  })
+  console.log(images_product,"images_product");
+  
   
     return ({
     
@@ -26,11 +32,11 @@ export const getInitialValues = (objectToEdit: any) => {
       description_ar: item?.description["ar"],
       description_en: item?.description["en"],
       description_de: item?.description["de"],
-      images: item?.images,
+      images: images_product,
       main_photo: item?.main_photo,
       price: item?.price,
-      quantity: item?.quantity,
+      // quantity: item?.quantity,
-      products_attributes: item?.products_attributes,
+      // products_attributes: item?.products_attributes,
       id:item?.id,
       info:formattedData
 
@@ -43,7 +49,6 @@ export const getInitialValues = (objectToEdit: any) => {
     [`${index}.key`]: value,
   }));
   console.log(products,"products");
-  console.log(objectToEdit,"objectToEdit");
 
 
   return {
@@ -60,7 +65,7 @@ export const getInitialValues = (objectToEdit: any) => {
     price: objectToEdit?.price ?? "",
 
     variable: [{}, ...products],
-    info: [undefined, ...formattedData] ?? [],
+    // info: [undefined, ...formattedData] ?? [],
     removedVariant:[],
   }
 };

src/Pages/Slider/View/AddPage.tsx

@@ -13,7 +13,7 @@ import Form from './AddForm';
 const AddSliderPage = () => {
     
 
-    const {mutate , isLoading , isSuccess} = useAddSlider()
+    const {mutate , isLoading:IsloadingButton , isSuccess} = useAddSlider()
   const handleSubmit = (values:any)=>{
 
     mutate(values)  
@@ -26,7 +26,7 @@ const AddSliderPage = () => {
   
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Slider/View/EditPage.tsx

@@ -19,7 +19,7 @@ const EditPage = () => {
   const { setObjectToEdit, objectToEdit } = usePageState()
   const {t} = useTranslation();
   const { data } = useGetOneSlider()
-  const {mutate ,isSuccess} = useUpdateSlider()
+  const {mutate ,isSuccess,isLoading:IsloadingButton} = useUpdateSlider()
   const FormatedData = data?.data ;
   const handleSubmit = (values:any)=>{
   
@@ -51,7 +51,7 @@ const EditPage = () => {
   };
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Users/SendNotifcation/View/AddPage.tsx

@@ -14,25 +14,25 @@ import { useAddNotification } from '../../../../api/notification';
 const AddPage = () => {
 
 
-  const { mutate, isLoading, isSuccess } = useAddNotification()
+  const { mutate, isLoading:IsloadingButton, isSuccess } = useAddNotification()
   const {id} = useParams()
   const handleSubmit = (values: any) => {
  
     const body = {
       en: values.body_en,
       ar: values.body_ar,
-      du: values.body_de
+      de: values.body_de
     }
     const meta = {}
     const title = {
       en: values.title_en,
       ar: values.title_ar,
-      du: values.title_de
+      de: values.title_de
     }
     const dataToSend = {
-      body: JSON.stringify(body),
+      body: body,
-      meta: JSON.stringify(meta),
+      meta: meta,
-      title:JSON.stringify(title),
+      title:title,
       user_ids: [id],
       type: "other",
 
@@ -48,7 +48,7 @@ const AddPage = () => {
 
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/Users/View/AddPage.tsx

@@ -12,7 +12,7 @@ import Form from './AddForm';
 const AddPage = () => {
 
 
-  const { mutate, isLoading, isSuccess } = useAddUsers()
+  const { mutate, isLoading:IsloadingButton, isSuccess } = useAddUsers()
   const handleSubmit = (values: any) => {
 
 
@@ -26,7 +26,7 @@ mutate(values)
 
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
 
 
   return (

src/Pages/order/Edit/EditPage.tsx

@@ -21,7 +21,7 @@ import { useGetOneOrder, useUpdateOrder } from '../../../api/order';
 const EditPage = () => {
   const { setObjectToEdit, objectToEdit } = usePageState()
   const {t} = useTranslation();
-  const {mutate ,isSuccess} = useUpdateOrder("put")
+  const {mutate ,isSuccess,isLoading:IsloadingButton} = useUpdateOrder("put")
   const { id } = useParams();
   const { data, isLoading } = useGetOneOrder({id: id })
   const handleSubmit = (values:any)=>{
@@ -48,7 +48,7 @@ const EditPage = () => {
   };
 
 
-  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
   if (  isLoading || !objectToEdit) {
     return <Spin />
   }

src/Pages/order/Edit/formUtil.ts

@@ -1,6 +1,7 @@
 
 import * as Yup from "yup";
 import { buildFormData } from "../../../api/helper/buildFormData";
+import * as dayjs from 'dayjs'
 
 interface formUtilCommon {
   number:number,
@@ -25,7 +26,8 @@ export const getInitialValues = (objectToEdit: any | null = null): any => {
     id: objectToEdit?.id ?? 0,
     state:objectToEdit?.state ?? "",
     admin_note: objectToEdit?.admin_note ?? '',
-    deliviration_estimated_time:objectToEdit?.deliviration_estimated_time ??"",
+        //@ts-ignore
+    deliviration_estimated_time: dayjs(objectToEdit?.deliviration_estimated_time,"YYYY-MM-DD") ??"",
     delivery_link:objectToEdit?.delivery_link ??"",
    
   }; 

src/Pages/order/useTableColumns.tsx

@@ -21,7 +21,7 @@ const useTableColumns = () => {
         name: t("name"),
         sortable: false,
         center:true,
-        selector:(row:any) => row?.user?.name[language],
+        selector:(row:any) => row?.user?.name,
 
       },
       {

src/api/helper/ueGetPagination.tsx

@@ -19,7 +19,7 @@ const navigate = useNavigate()
   },
   {
     onError: (error:any) => {
-      if(error.response.status == 401 || error.response.status == 403){
+      if(error?.response?.status == 401 || error?.response?.status == 403){
           logout()
           navigate("/auth")
 

src/api/helper/useAddMutation.ts

@@ -26,7 +26,7 @@ function  useAddMutation(key: string, url: string): UseMutationResult<AxiosRespo
     {
       onSuccess: (data) => {
         queryClient.invalidateQueries([key]);
-        toast.success(data.message || t("added_uccessful"));
+        toast.success(data.message || t("added_successful"));
       },
       onError: (error:any) => {
         const message = error?.response?.data?.message || t("failed_to_add_data");

src/api/helper/useAddMutationJson.ts

@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient, UseMutationResult } from 'react-query';
+import { toast } from 'react-toastify';
+import useAxios from './useAxios';
+import { useTranslation } from 'react-i18next';
+
+type AxiosResponse = {
+  message: string;
+  data:any ,
+  success:true 
+};
+
+function  useAddMutationJson(key: string, url: string): UseMutationResult<AxiosResponse, unknown, any, unknown> {
+  const axios = useAxios();
+  const [t] = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation<AxiosResponse, unknown, any, unknown>(
+    async (dataToSend) => {
+      const { data } = await axios.post(url, dataToSend);
+      return data;
+    },
+    {
+      onSuccess: (data) => {
+        queryClient.invalidateQueries([key]);
+        toast.success(data.message || t("added_successful"));
+      },
+      onError: (error:any) => {
+        const message = error?.response?.data?.message || t("failed_to_add_data");
+        toast.error(message);
+      }
+    }
+  );
+}
+
+export default useAddMutationJson;

src/api/helper/useGetOneQuery.ts

@@ -27,6 +27,7 @@ function useGetOneQuery(key: string, url: string , params:any={},options:any={})
       }
       
     },
+    cacheTime: 0, // Set cacheTime to 0 to disable caching
     refetchOnWindowFocus: false,
     
     ...options

src/api/product.ts

@@ -19,11 +19,11 @@ const API = {
 
 };
 const KEY = "Product"
-const ONEKEY = "OneProduct"
+// const ONEKEY = "Product"
 
 
 export const useGetProduct = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params);
-export const useGetOneProduct = (params?:any) => useGetOneQuery(ONEKEY, API.GET_ALL,params);
+export const useGetOneProduct = (params?:any) => useGetOneQuery(KEY, API.GET_ALL,params);
 
 export const useAddProduct = () => useAddMutation(KEY, API.ADD);
 export const useAddProductVariation = () => useAddMutation(KEY, API.ADD_VAR);

src/utils/Array/filterUndefinedAndEmpty.ts

@@ -1,5 +1,5 @@
 const filterUndefinedAndEmpty = (array:any) => {
-    return array.filter((data:any) => data !== undefined && Object.keys(data).length !== 0);
+    return array?.filter((data:any) => data !== undefined && Object.keys(data).length !== 0);
   };
   
   export default filterUndefinedAndEmpty;