fix area bug and some fixes

src/Components/DataTable/SearchFieldWithSelect.tsx

@@ -45,6 +45,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
+
   const navigate = useNavigate();
   const handleOptionClick = (option: Option) => {
     setSelectedOption(option);
@@ -57,7 +58,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
   const filteredOptions = options.filter((option) =>
     option.label.toLowerCase().includes(searchTerm.toLowerCase()),
   );
-
+  const Type = localStorage.getItem('type');
   return (
     <div ref={node} className={`search-field ${isOpen ? "open" : ""}`}>
       <div className="search-header" onClick={toggleDropdown}>
@@ -75,16 +76,19 @@ const SearchFieldWithSelect: React.FC<Props> = ({
       {(isOpen || (searchTerm !== "" && filteredOptions.length > 0)) && (
         <div className="search-options">
           <div className="search-options-list">
-            {filteredOptions.map((option) => (
+            {filteredOptions.map((option) => {
-              <div
+              console.log(option);
-                key={option.value}
+              return(
-                className="search-option"
+                <div
-                onClick={() => handleOptionClick(option)}
+                  key={option.value}
-              >
+                  className="search-option"
-                <div>{option.label}</div>
+                  onClick={() => handleOptionClick(option)}
-                {/* {withIcon &&  <IoSearch className="search__icon" />} */}
+                >
-              </div>
+                  <div>{option.label}</div>
-            ))}
+                  {/* {withIcon &&  <IoSearch className="search__icon" />} */}
+                </div>
+              )
+            })}
           </div>
         </div>
       )}

src/Components/Layout/Navbar/Tooltip.tsx

@@ -22,7 +22,7 @@ const TooltipComp = ({
   const { handel_open_model } = useModalHandler();
 
   const handleEdit = () => {
-    handel_open_model(ModalEnum.CHANGE_PASSWORD);
+    // handel_open_model(ModalEnum.CHANGE_PASSWORD);
   };
   return (
     <div className={className} onClick={onClick}>

src/Layout/Ui/NavBar.tsx

@@ -17,6 +17,8 @@ const NavBar = ({ isOpen }: { isOpen: boolean }) => {
   const navigate = useNavigate();
   const PrevPath = getPrevPathRoute(location.pathname);
   const [t] = useTranslation();
+  console.log(search_array);
+
   const translateArray = translateOptions(search_array, t);
 
   const handelNavigate = () => {

src/Pages/Admin/Reseller/Edit/Page.tsx

@@ -21,10 +21,12 @@ const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;})
   const { objectToEdit , setObjectToEdit } = useObjectToEdit();
   const {mutate, isSuccess,status} = useUpdateReseller();
   const Navigate = useNavigate()
-  console.log(objectToEdit);
   
   useSetPageTitle(t(`page_header.add_reseller`));
+  
   const handleSubmit = (values: any) => {
+    console.log(values);
+    
     const DataToSend = {
         ...values,
         location: {
@@ -32,6 +34,10 @@ const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;})
             lng: values.lng,
         },
     };    
+
+    if (values.username === objectToEdit?.user?.username) {
+      delete DataToSend.username;
+    }
     mutate(DataToSend); 
   };
     useEffect(() => {
@@ -66,9 +72,9 @@ const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;})
                 <button type="submit">
                   {t("practical.edit")} {t("models.reseller")}
                   {status === QueryStatusEnum.LOADING && (
-                  <span className="Spinier_Div">
+                    <span className="Spinier_Div">
-                    <Spin />
+                      <Spin />
-                  </span>
+                    </span>
                 )}
                 </button>
               </div>

src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx

@@ -3,9 +3,11 @@ import { useTranslation } from "react-i18next";
 import { FaRegAddressBook } from "react-icons/fa";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { nationalities } from "../../../../types/App";
+import { useGetAllArea } from "../../../../api/Area";
 
 const TitleDetailsForm = () => {
   const [t] = useTranslation();
+  const {data} = useGetAllArea();
   
   return (
     <div className="TitleDetailsForm">
@@ -18,8 +20,8 @@ const TitleDetailsForm = () => {
           name={"area_id"}
           placeholder={"_"}
           label={"city"}
-          // type="Select"
+          type="Select"
-          // option={nationalities}
+          option={data?.data}
         />
         {/* <ValidationField name={"address"} placeholder={"_"} label={"address"} /> */}
       </main>

src/Pages/Admin/Reseller/Form/formUtils.ts

@@ -36,13 +36,14 @@ interface PersonalDetailsEditForm {
   contact_number2: string | null;
   card_number: string | null;
   user: User;
-  area_id: number | null;
+  area_id: any | null;
   lat:number,
   lng:number
 }
 
 export const getInitialValues = (objectToEdit: Partial<PersonalDetailsForm>) => {
   const location = objectToEdit?.location?.[0] || { lat: 33.5138, lng: 36.2765 }; 
+  
   return {
       id: objectToEdit?.id ?? 0,
       first_name: objectToEdit?.first_name ?? null,
@@ -71,14 +72,13 @@ export const getValidationSchema = () => {
     contact_number1: Yup.string().required('contact_number1 is required'),
     contact_number2: Yup.string().required('contact_number2 is required'),
     username: Yup.string().required('username is required'),
-    area_id: Yup.number().required('area_id is required'),
+    area_id: Yup.mixed().required('area_id is required'),
   });
 };
 
 
 export const getInitialValuesEdit = (objectToEdit: Partial<PersonalDetailsEditForm>) => {
   const location = objectToEdit?.location || { lat: 0, lng: 0 };   
-  console.log(objectToEdit);
   
   return {
       id: objectToEdit?.id ?? 0,

src/Pages/Admin/question/Model/Malty/Form.tsx

@@ -1,5 +1,5 @@
 import {  Row } from "reactstrap";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import {  useFormikContext } from "formik";
 import { FaCirclePlus } from "react-icons/fa6";
 import { Choice } from "../../../../../types/Item";

src/Pages/Admin/question/Page.tsx

@@ -58,7 +58,7 @@ const TableHeader = () => {
     if(objectToEdit){
       setObjectToEdit(null)
     }
-}, [])
+  }, []);
 
   return (
     <div className="TableWithHeader">

src/Pages/Auth/LoginForm.tsx

@@ -14,6 +14,7 @@ const LoginForm = () => {
   const [t] = useTranslation();
   const handelSubmit = (values: FormValues) => {
     mutate(values);
+    // localStorage.setItem('type',)
   };
 
   const { login } = useAuthState();

src/Routes.tsx

@@ -428,14 +428,15 @@ export const AppRoutes: Record<string, string> = Object.fromEntries(
 export const CrudRoutes: any = Object.fromEntries(
   CrudRoute.map((route) => [route?.path, route?.header]),
 );
-export const search_array: { label: string; value: string }[] = menuItems
+export const search_array: { label: string; value: string; type: string }[] = menuItems
   ?.filter((item: TMenuItem) => {
     return hasAbility(item.abilities, item.abilities_value);
   })
   .map((item: TMenuItem) => ({
     label: item.header as string,
     value: item.path as string,
-  }));
+    type: item.type ? item.type : "admin",
+  }))
 
 const AllRoute = [...menuItems, ...CrudRoute];
 

src/Styles/DataTable/SearchField.scss

@@ -73,7 +73,10 @@
 .search_select_icon.open {
   transform: rotate(180deg);
 }
+.search-options{
+  border: 1px solid var(--value);
 
+}
 .search-options-list {
   max-height: 220px;
   overflow: auto;
@@ -82,9 +85,10 @@
   direction: rtl;
   scroll-behavior: smooth;
   scroll-padding: 10rem;
-
+  @include Scrollbar;
   &::-webkit-scrollbar {
-    width: 10px;
+    // background: var(--value);
+    // width: 5px;
   }
   
   /* Handle */

src/translate/ar.json

@@ -1003,7 +1003,13 @@
     "Area":"المنطقة",
     "Coupon":"قسيمة",
     "financial_collection":"التحصيلات",
-    "show_collection":"حصيلة"
+    "show_collection":"حصيلة",
+    "dashboard":"لوحة القيادة",
+    "reSeller":"البائعين",
+    "city":"مدينة",
+    "questionBank":"بنك الأسئلة",
+    "roles":"الدور",
+    "coupon":"قسيمة"
   },
   "table": {
     "student": "قائمة الطلاب",