fix_translate

src/Hooks/useChangeLanguage.tsx

@@ -1,14 +1,14 @@
-import { useEffect } from 'react';
+  import { useEffect } from 'react';
-import { initReactI18next, useTranslation } from 'react-i18next';
+  import { initReactI18next, useTranslation } from 'react-i18next';
-import i18n from 'i18next';
+  import i18n from 'i18next';
-import translationEN from '../translate/en.json';
+  import translationEN from '../translate/en.json';
-import translationAR from '../translate/ar.json';
+  import translationAR from '../translate/ar.json';
-import translationDE from '../translate/de.json';
+  import translationDE from '../translate/de.json';
 
 
-let language = localStorage.getItem('language') ?? 'en';
+  let language = localStorage.getItem('language') ?? 'en';
 
-i18n.use(initReactI18next).init({
+  i18n.use(initReactI18next).init({
       resources: {
         en: {
           translation: translationEN
@@ -26,23 +26,37 @@ i18n.use(initReactI18next).init({
       }
     });
 
-//   console.log(navigator.language,"navigator.language");
+  //   console.log(navigator.language,"navigator.language");
 
-export function useLanguage() {
+  export function useLanguage() {
     useEffect(() => {
-    changeLanguage(language);
+      // Define a function to handle language change events
+      const handleLanguageChange = () => {
+        const newLanguage = localStorage.getItem('language') ?? 'en';
+        changeLanguage(newLanguage);
+      };
+  
+      // Add an event listener to detect changes in localStorage
+      window.addEventListener('storage', handleLanguageChange);
+  
+      // Clean up by removing the event listener when the component unmounts
+      return () => {
+        window.removeEventListener('storage', handleLanguageChange);
+      };
     }, []);
   
     const changeLanguage = (newLanguage:any) => {
       i18n.changeLanguage(newLanguage);
       localStorage.setItem('language', newLanguage);
       applyLanguageStyles(newLanguage);
+      // Refresh the page to apply the language changes
+      window.location.reload();
     };
   
     return { changeLanguage };
-}
+  }
   
-function applyLanguageStyles(language:any) {
+  function applyLanguageStyles(language:any) {
     if (language === 'ar') {
       document.body.setAttribute('dir', 'rtl');
       document.body.classList.remove('de');
@@ -56,9 +70,9 @@ function applyLanguageStyles(language:any) {
       document.body.classList.remove('ar');
       document.body.classList.add('de');
     }
-}
+  }
 
-export function useLanguageMenu() {
+  export function useLanguageMenu() {
     const { t } = useTranslation();
 
     const languageOptions = [
@@ -68,4 +82,4 @@ export function useLanguageMenu() {
     ];
 
     return { languageOptions };
-}
+  }

src/Pages/Home/HomePage.tsx

@@ -11,7 +11,6 @@ export default function HomePage() {
   const { t } = useTranslation();
   
   const {data,isLoading} = useGetHome()
-  console.log(data);
   
 
   const cardsData = [

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

@@ -74,7 +74,7 @@ const ObjectField = ({ tabKey }: any) => {
                 </Space>
             ))}
             <Button type="dashed" onClick={() => setFieldItems([...FieldItems, { Description: '', key: '' }])} block>
-                {t("+ Add Another Item")}
+                {t("Add Another Item")}
             </Button>
         </Form>
     );

src/Pages/order/OrderPage.tsx

@@ -22,7 +22,7 @@ const OrderPage = () => {
 
   const { data, status } = useGetOrder();
 
-  const totalRows = data?.pagination?.total || 0;
+  const totalRows = data?.meta?.total;
 
   const columns = useTableColumns();
 
@@ -33,18 +33,18 @@ const OrderPage = () => {
     { label: <div className='orderStatus_select'><FaTimes /> Rejected</div>, value: "rejected" },
     { label: <div className='orderStatus_select'><FaBan /> Pending Cancellation</div>, value: "pending_cancellation" }
   ];
-    const { data:Coupon } = useGetCoupon()
+  const { data: Coupon } = useGetCoupon()
 
 
-    const SelectData = Coupon?.coupons?.map((item:any)=>(
+  const SelectData = Coupon?.coupons?.map((item: any) => (
     {
-        label : item?.name,
+      label: item?.name,
-        value : item?.id
+      value: item?.id
     }
   ))
   const location = useLocation();
   const navigate = useNavigate();
-    const { username, coupon, state, fromDate, toDate, totalFrom, totalTo,reset } = useOrderFillterState();
+  const { username, coupon, state, fromDate, toDate, totalFrom, totalTo, reset } = useOrderFillterState();
 
 
   const handleSubmit = () => {
@@ -79,7 +79,7 @@ const OrderPage = () => {
   };
 
 
-    const handelReset=()=>{
+  const handelReset = () => {
 
     navigate(`${location.pathname}`);
     reset()
@@ -99,8 +99,8 @@ const OrderPage = () => {
             <CustomSearchField searchBy={"username"} />
             <SelectWSearchField selectBy="coupon" submiteBy="coupon_id" lebel="Coupon" option={SelectData} />
             <SelectField selectBy="state" lebel="status" option={stateSelect} />
-   <CustomDateRange/>
+            <CustomDateRange />
-   <CustomNumber/>
+            <CustomNumber />
             <Button type="dashed" onClick={handelReset} >{t("reset")}</Button>
             <Button type="primary" onClick={handleSubmit} >{t("submite")}</Button>
 

src/Pages/order/ui/CustomDateRange.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 import { DatePicker } from 'antd'
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useOrderFillterState } from '../../../zustand/OrderFillter';
+import { useTranslation } from 'react-i18next';
 const { RangePicker } = DatePicker;
 
 const CustomDateRange = () => {
     const dateFormat = 'YYYY-MM-DD';
     const { toDate,fromDate,setFromDate,setToDate } = useOrderFillterState(); // Moved hook call inside the functional component
+    const [t] = useTranslation();
 
     const onCalendarChange = (value: any) => {
             const FromData = value[0]?.format(dateFormat) 
@@ -23,6 +25,7 @@ const CustomDateRange = () => {
                 format={dateFormat}
                 onChange={onCalendarChange}
                 className="CustomDateRange"
+                placeholder={[t(`PriceFrom`),t(`PriceTo`)]}
             />
     )
 }

src/Pages/order/ui/CustomNumber.tsx

@@ -1,6 +1,7 @@
 import { InputNumber } from 'antd';
 import { useState, useEffect } from 'react';
 import { useOrderFillterState } from '../../../zustand/OrderFillter';
+import { useTranslation } from 'react-i18next';
 
 const CustomNumber = () => {
     const [valueFrom, setValueFrom] = useState<number | null>(null);
@@ -18,11 +19,16 @@ const CustomNumber = () => {
         setValueTo(value);
         setTotalTo(value);
     };
+    const [t] = useTranslation()
 
     return (
         <div className='CustomNumber'>
-            <InputNumber placeholder='PriceFrom' value={valueFrom} onChange={onChangeFrom} />
+            <InputNumber
-            <InputNumber placeholder='PriceTo' value={valueTo} onChange={onChangeTo} />
+             placeholder={t(`PriceFrom`)}
+            value={valueFrom} onChange={onChangeFrom} />
+            <InputNumber
+             placeholder={t(`PriceTo`)}
+             value={valueTo} onChange={onChangeTo} />
         </div>
     );
 };

src/Pages/order/useTableColumns.tsx

@@ -36,7 +36,6 @@ const useTableColumns = () => {
       {
         name: t("status"),
         center: true,
-        width:"300",
         cell: (row: any) => {
           let status = row?.state;
           let icon;
@@ -85,10 +84,10 @@ const useTableColumns = () => {
             showDelete={false}
             objectToEdit={row}
             onDelete={() => deleteMutation.mutate({order_id:row.id })}  
-            showEdit={true}
+            showEdit={false}
-            showView={false}
+            showView={true}
-            onView={()=>navigate(`/order/view/${row?.id}` )}
+            // onView={()=>navigate(`/order/view/${row?.id}` )}
-            onEdit={()=>navigate(`/order/${row?.id}` )}
+            onView={()=>navigate(`/order/${row?.id}` )}
 
             />
             

src/Styles/Layout/Layout.scss

@@ -597,6 +597,7 @@ padding: 10px 40px;
     gap: 5px;
     padding-inline: 10px;
     text-wrap: nowrap;
+    white-space: nowrap;
     width: 300px;
     align-items: center;
     justify-content: center;

src/api/helper/ueGetPagination.tsx

@@ -7,6 +7,7 @@ export default function useGetQueryPagination(KEY: string | string[], Api: strin
   const axios = useAxios();
   const location = useLocation();
   let pagination = location?.search || '';
+  const language = localStorage.getItem("language") ?? "en"
 
   const { logout } = useAuthState();
   const navigate = useNavigate();
@@ -25,7 +26,7 @@ export default function useGetQueryPagination(KEY: string | string[], Api: strin
   const apiUrl = Api + paginationParams;
 
   return useQuery(
-    [Array.isArray(KEY) ? KEY.join(',') : KEY, pagination], async () => {
+    [Array.isArray(KEY) ? KEY.join(',') : KEY, pagination,language], async () => {
       const response = await axios.get(apiUrl, { params });
       return response.data;
     },

src/api/helper/useGetOneQuery.ts

@@ -11,7 +11,7 @@ function useGetOneQuery(key: string, url: string , params:any={},options:any={})
   const {id} = useParams()
 
   return useQuery(
-    [id, key],
+    [id, key,language],
      async () => {
     const response = await axios.get(url+"/"+ id+`?lang=${language}`);
     return response.data; 

src/api/helper/useGetQuery.ts

@@ -3,12 +3,14 @@ import useAxios from './useAxios';
 import useAuthState from '../../lib/state mangment/AuthState';
 import { useNavigate } from 'react-router-dom';
 
-function useGetQuery(key: string, url: string , params:any={},options:any={}) {
+function useGetQuery(KEY: string | string[], url: string , params:any={},options:any={}) {
   const axios = useAxios();
   const {logout} = useAuthState()
   const navigate = useNavigate()
+  const language = localStorage.getItem("language") ?? "en"
+
   return useQuery(
-    params ? [key, params] : key,
+    params ? [Array.isArray(KEY) ? KEY.join(',') : KEY, params,language] : [Array.isArray(KEY) ? KEY.join(',') : KEY,language],
      async () => {
     const response = await axios.get(url , {params});
     return response.data; 

src/api/home.ts

@@ -8,7 +8,7 @@ const API = {
   UPDATE: `home/overview`,
 
 };
-const KEY = "home"
+const KEY = ["home","order","users","categories"]
 
 
 export const useGetHome = (params?:any) => useGetQuery(KEY, API.GET_ALL,params);

src/translate/ar.json

@@ -166,7 +166,15 @@
     "checkAndModify": "يرجى التحقق من الشبكة الخاصة بك وإعادة تحميل الصفحة.",
     "refetch": "إعادة تحميل الصفحة",
     "goToHome": "الانتقال إلى الصفحة الرئيسية"
-  }
+  },
+  "value_en": "القيمة (الإنجليزية)",
+  "value_ar": "القيمة (العربية)",
+  "value_de": "القيمة (الألمانية)",
+  "type": "النوع",
+  "id": "المعرف",
+  "submite": "تقديم",
+  "PriceFrom": "السعر من",
+  "PriceTo": "السعر إلى"
 
 
 

src/translate/de.json

@@ -164,7 +164,15 @@
     "refetch": "Seite neu laden",
     "goToHome": "Zum Startseite"
   }
-
+,
+"value_en": "Wert (Englisch)",
+"value_ar": "Wert (Arabisch)",
+"value_de": "Wert (Deutsch)",
+"type": "Typ",
+"id": "ID",
+"submite": "Einreichen",
+"PriceFrom": "Preis ab",
+"PriceTo": "Preis bis"
 
 
 

src/translate/en.json

@@ -169,6 +169,14 @@
     "refetch": "Refetch Page",
     "goToHome": "Go to Home"
   }
-
+,
+"value_en": "Value (English)",
+"value_ar": "Value (Arabic)",
+"value_de": "Value (German)",
+"type": "Type",
+"id": "ID",
+"submite": "Submit",
+"PriceFrom": "Price From",
+"PriceTo": "Price To"
 
 }

src/translate/text

@@ -1,12 +1,11 @@
-sorry_only_user_can_change_his_status
+value_en
-create_notification
+value_ar
-SupportMessages
+value_de
-email
+type
-whatsApp
+id
-subject
+
-message
-SupportMessages
-EditDetails
-OrderItems
-reset
 submite
+PriceFrom
+PriceTo
+PriceFrom
+PriceTo