src/Layout/Dashboard/FilterLayout.tsx

@@ -17,16 +17,14 @@ const FilterLayout = ({
   search_by = "name",
   width = "500px",
   haveFilter = true,
-  haveOrder = true,
-  haveSearch = true
+  haveOrder = true
 }: {
   filterTitle: string;
   sub_children?: any;
   search_by?:string;
   width?:string;
   haveFilter?:boolean;
-  haveOrder?:boolean;
-  haveSearch?:boolean
+  haveOrder?:boolean
 }) => {
   const { t } = useTranslation();
   const translateArray = translateOptions(search_array, t);
@@ -82,7 +80,7 @@ const FilterLayout = ({
         </span>
 
         <div className="header_search">
-          {haveSearch && <SearchField searchBy={search_by} placeholder={t("practical.search_here")} />}
+          <SearchField searchBy={search_by} placeholder={t("practical.search_here")} />
         </div>
       </div>
     </div>

src/Pages/Admin/Student/Model/AddModel.tsx

@@ -10,11 +10,8 @@ const AddModel: React.FC = () => {
   const { mutate, status } = useAddStudent();
 
   const handleSubmit = (values: any) => {
-    console.log(values);
-    
     mutate({
       ...values,
-      grade_id:values.grade_id?.id
     });
   };
   return (

src/Pages/Admin/Student/Model/EditModel.tsx

@@ -28,7 +28,7 @@ const EditModel: React.FC = () => {
         getValidationSchema={getValidationSchema}
         isAddModal={false}
       >
-        <ModelForm isEdit={true} />
+        <ModelForm />
       </LayoutModel>
     </>
   );

src/Pages/Admin/Student/Model/ModelForm.tsx

@@ -19,8 +19,6 @@ const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
     { name: "male", id: "male" },
     { name: "female", id: "female" },
   ];
-
-  
   return (
     <Row className="w-100">
       <Col>
@@ -34,28 +32,25 @@ const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
           placeholder="last_name"
           label="last_name"
         />
-        {!isEdit && (
-          <>
         <ValidationField
           name="username"
           placeholder="username"
           label="username"
         />
+        {!isEdit && (
           <ValidationField
             name="password"
             placeholder="password"
             label="password"
           />
+        )}
+      </Col>
+      <Col>
         <ValidationField
           name="phone_number"
           placeholder="contact_number1"
           label="contact_number1"
         />
-        
-          </>
-        )}
-      </Col>
-      <Col>
         <ValidationField
           searchBy="GradeName"
           name="grade_id"

src/Pages/Admin/Student/Model/ModelFormEdit.tsx

@@ -1,60 +0,0 @@
-import { Col, Row } from "reactstrap";
-import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import { useGetAllGrade } from "../../../../api/grade";
-import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
-import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
-
-const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
-  const { ValidationParamState } = useValidationValidationParamState();
-  const { GradeName, GradeCurrentPage } = ValidationParamState;
-
-  const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
-    name: GradeName,
-    page: GradeCurrentPage,
-  });
-  const { objectToEdit } = useObjectToEdit((state) => state);
-  const GradeOption = Grade?.data ?? [];
-  const canChangeGradePage = !!Grade?.links?.next;
-  const GradePage = Grade?.meta?.current_page;
-
-  const sex = [
-    { name: "male", id: "male" },
-    { name: "female", id: "female" },
-  ];
-  console.log(objectToEdit);
-  const GradeValue = GradeOption?.find((e:any) => e.id === objectToEdit?.grade_id)
-
-  return (
-    <Row className="w-100">
-      <Col>
-        <ValidationField
-          name="first_name"
-          placeholder="first_name"
-          label="first_name"
-        />
-        <ValidationField
-          name="last_name"
-          placeholder="last_name"
-          label="last_name"
-        />
-      </Col>
-      <Col>
-        <ValidationField
-          searchBy="GradeName"
-          name="grade_id"
-          label="grade"
-          type="Search"
-          option={GradeOption}
-          isLoading={isLoadingGrade}
-          canChangePage={canChangeGradePage}
-          PageName={"GradeCurrentPage"}
-          page={GradePage}
-          value={GradeValue?.name}
-        />
-        <ValidationField type="Select" name="sex" option={sex} />
-      </Col>
-    </Row>
-  );
-};
-
-export default Form;

src/Pages/Admin/Student/Model/formUtil.ts

@@ -4,8 +4,6 @@ import { Student, StudentInitialValues } from "../../../../types/Student";
 export const getInitialValues = (
   objectToEdit: Partial<Student>,
 ): StudentInitialValues => {
-  console.log(objectToEdit);
-  
   return {
     id: objectToEdit?.user_id,
     first_name: objectToEdit?.first_name ?? "",

src/Pages/ReSeller/Collections/Model/FilterForm.tsx

@@ -1,7 +1,11 @@
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { Col, Row } from "reactstrap";
+import { useGetAllReseller } from "../../../../api/reseller";
 
 const FilterForm = () => {
+  const {data} = useGetAllReseller()
+  console.log(data);
+
   return (
     <div>
       <Row>

src/Pages/ReSeller/Collections/Page.tsx

@@ -27,7 +27,6 @@ const TableHeader = () => {
         <FilterLayout
           sub_children={<FilterForm />}
           filterTitle="table.collections"
-          haveSearch={false}
         />
         <Table />
       </Suspense>

src/Pages/ReSeller/Collections/Table.tsx

@@ -4,20 +4,17 @@ import { useColumns } from "./useTableColumns";
 import useSearchQuery from "../../../api/utils/useSearchQuery";
 import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
 import { useGetAllCollections } from "../../../api/collections";
-import { useFilterStateState } from "../../../zustand/Filter";
 
 const App: React.FC = () => {
+  const [searchQuery] = useSearchQuery("name");
   const { filterState } = useFilterState();
-  const { Filter } = useFilterStateState();
-  const name = Filter?.description ; 
-  const sort_by = Filter?.sort_by ; 
 
   const response = useGetAllCollections({
+    name: searchQuery,
     pagination: true,
     ...filterState,
-    name,
-    sort_by    
   });
+
   return <DataTable response={response} useColumns={useColumns} />;
 };
 

src/Pages/ReSeller/Sales/Model/AddModel.tsx

@@ -1,15 +1,24 @@
 import React from "react";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../../enums/Model";
-import { QueryStatusEnum } from "../../../../enums/QueryStatus"
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import ValidationModelForm from "./ValidationModelForm";
+import SalesModelForm from "./SalesModelForm";
+import SubmitModelForm from "./SubmitModelForm";
 import LayoutModel from "./LayoutModel";
-import ModelBody from "./ModelBody";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { salesModelEnum } from "../../../../enums/salesForms";
 
 const AddModel: React.FC = () => {
 
   const { objectToEdit } = useObjectToEdit();
   const handleSubmit = () => {};
+  const Forms = {
+    [salesModelEnum.Number]:  <ValidationModelForm /> ,
+    [salesModelEnum.Package] : <SalesModelForm /> ,
+    [salesModelEnum.Submit]:  <SubmitModelForm /> 
+  }
+  console.log(objectToEdit);
 
   return (
     <>
@@ -20,7 +29,9 @@ const AddModel: React.FC = () => {
         getInitialValues={getInitialValues(objectToEdit)}
         getValidationSchema={getValidationSchema}
       >
-        <ModelBody/>
+        {Forms[salesModelEnum.Number]}
+        {Forms[salesModelEnum.Package]}
+        {Forms[salesModelEnum.Submit]}
       </LayoutModel>
     </>
   );

src/Pages/ReSeller/Sales/Model/ModelBody.tsx

@@ -1,39 +0,0 @@
-import ValidationModelForm from "./ValidationModelForm";
-import SalesModelForm from "./SalesModelForm";
-import SubmitModelForm from "./SubmitModelForm";
-import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
-import { salesModelEnum } from "../../../../enums/salesForms";
-import { useFormikContext } from "formik";
-import { useModalState } from "../../../../zustand/Modal";
-import { useQueryClient } from "react-query";
-
-const ModelBody = () => {
-    const { setObjectToEdit } = useObjectToEdit();
-    const formik = useFormikContext<any>();
-    const { setIsOpen } = useModalState((state) => state);
-    const queryClient = useQueryClient();
-
-    const handleCloseModel = () => {
-      formik?.resetForm();    
-      setIsOpen("");
-      formik?.setFieldValue( "currentModalIndex" , 0 );
-      setObjectToEdit({});
-      queryClient.resetQueries();  
-    }
-
-    const Forms = {
-      [salesModelEnum.Number]:  <ValidationModelForm handleCloseModel={handleCloseModel}/> ,
-      [salesModelEnum.Package] : <SalesModelForm handleCloseModel={handleCloseModel}/> ,
-      [salesModelEnum.Submit]:  <SubmitModelForm handleCloseModel={handleCloseModel} /> 
-    }
-
-  return (
-        <>
-          {Forms[salesModelEnum.Number]}
-          {Forms[salesModelEnum.Package]}
-          {Forms[salesModelEnum.Submit]}
-        </>
-    )
-}
-
-export default ModelBody

src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx

@@ -1,17 +1,16 @@
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
+import { useModalState } from "../../../../zustand/Modal";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
 import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
-import { ModalBodyProps } from "../../../../types/Sales";
 
-const Form = ({
-  handleCloseModel = () => {},
-}:ModalBodyProps) => {
+const Form = () => {
   
-  const { objectToEdit } = useObjectToEdit();
+  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
+  const { setIsOpen } = useModalState((state) => state);
   const {t} = useTranslation();
 
   const formik = useFormikContext();
@@ -21,13 +20,18 @@ const Form = ({
     setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
   }
 
+  const handleCancel = () => {
+    setIsOpen("");
+    formik.resetForm();
+  };
+
   const student_info = objectToEdit?.data?.data
-  const status = objectToEdit?.data?.status
   const PackagesInfo = student_info?.packages.map((info:any) => ({
     id: info?.id,
     name: info.name + " " + `( ${info?.original_price} )`
   }));
   
+
   return (
     values?.currentModalIndex == 1 &&      
     <div className="w-100">
@@ -36,15 +40,13 @@ const Form = ({
         <span>
           {t(`models.add_sales`)}{" "}
         </span>
-        <MdCancel onClick={handleCloseModel} />
+        <MdCancel onClick={handleCancel} />
       </header>
-      
       <Divider />
-
       <div className="sales_info_modal">
         <div className="info">
-          {/* <img src="/Image/faker_user.png" alt="" /> */}
-          <span className="mr-20">
+          <img src="/Image/faker_user.png" alt="" />
+          <span>
             <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
             <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
           </span>
@@ -57,9 +59,8 @@ const Form = ({
           option={PackagesInfo}
         />
       </div>
-
       <div className="buttons">
-        <Button className="back_button pointer" onClick={handleCloseModel}>
+        <Button className="back_button pointer" onClick={handleCancel}>
           {t("practical.cancel")}
         </Button>
         <Button
@@ -75,7 +76,6 @@ const Form = ({
           )}
         </Button>
       </div>  
-
     </div>
   );
 };

src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx

@@ -9,21 +9,15 @@ import { MdCancel } from "react-icons/md";
 import { useAddSales } from "../../../../api/sales";
 import { useEffect } from "react";
 import { toast } from "react-toastify";
-import { ModalBodyProps } from "../../../../types/Sales";
-import { useQueryClient } from "react-query";
 
-const Form = ({
-  handleCloseModel = () => {},
-}:ModalBodyProps) => {
+const Form = () => {
   
-  const { setObjectToEdit , objectToEdit } = useObjectToEdit();
-  const { values, setFieldValue } = useFormikContext<any>();
-  const formik = useFormikContext();
+  const { setObjectToEdit,objectToEdit } = useObjectToEdit();
+  const { resetForm, values, setFieldValue } = useFormikContext<any>();
   const { setIsOpen } = useModalState((state) => state);
-  const queryClient = useQueryClient();
   const {t} = useTranslation();
 
-  const { mutate, status, error,reset }:any = useAddSales();
+  const {mutate,status,error}:any = useAddSales();
   const coupon_id_object = objectToEdit?.data?.data?.packages.find((e:any)=>(e.id === values?.package_id))
   const student_info = objectToEdit?.data?.data
   const PackagesInfo = student_info?.packages.map((info:any) => ({
@@ -31,6 +25,7 @@ const Form = ({
     name: info.name + " " + `( ${info?.original_price} )`
   }));
 
+  
   const handleNext = ()=>{
     mutate({
       package_id:values?.package_id,
@@ -38,46 +33,42 @@ const Form = ({
       coupon_id:coupon_id_object?.coupon_id
     });
   }
+  const handleCancel = () => {
+    resetForm();    
+    setIsOpen("");
+    setFieldValue( "currentModalIndex" , 0 )
+  };
+
+
   useEffect(() => {
     if(status === QueryStatusEnum.SUCCESS){
       setIsOpen("");
       setObjectToEdit({});
-      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 );
-      reset();
-      formik?.resetForm();
-    }
-    else if(status === QueryStatusEnum.ERROR){
+      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
+    }else if(status === QueryStatusEnum.ERROR){
       toast.error(t(`toast.${error?.response?.data?.message}` || `toast.error_while_trying_please_try_again`)) 
     }
-
     if(values?.currentModalIndex >= 3){
       setIsOpen("")
       setObjectToEdit({})
-      setFieldValue( "currentModalIndex" , 0 );
-      queryClient.resetQueries();
-      reset();
-
+      setFieldValue( "currentModalIndex" , 0 )
     }
-
   }, [values?.currentModalIndex,status])
   
   return (
     values?.currentModalIndex == 2 &&      
 
     <div className="w-100">
-
       <header className="modal_title">
         <span>
           {t(`models.are_you_sure_about_sale`)}{" "}
         </span>
-        <MdCancel onClick={handleCloseModel} />
+        <MdCancel onClick={handleCancel} />
       </header>
-
       <Divider />
-
       <div className="sales_info_modal">
         <div className="info">
-          {/* <img src="/Image/faker_user.png" alt="" /> */}
+          <img src="/Image/faker_user.png" alt="" />
           <span>
             <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
             <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
@@ -93,9 +84,8 @@ const Form = ({
           allowClear={false}
         />
       </div>
-
       <div className="buttons">
-        <Button className="back_button pointer" onClick={handleCloseModel}>
+        <Button className="back_button pointer" onClick={handleCancel}>
           {t("practical.cancel")}
         </Button>
         <Button
@@ -111,7 +101,6 @@ const Form = ({
           )}
         </Button>
       </div>  
-
     </div>
   );
 };

src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx

@@ -1,6 +1,7 @@
 import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
+import { useModalState } from "../../../../zustand/Modal";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
 import { QueryStatusEnum } from "../../../../enums/QueryStatus";
@@ -8,42 +9,49 @@ import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
 import { useEffect, useState } from "react";
 import { useGetStudentByPhone } from "../../../../api/sales";
-import { ModalBodyProps } from "../../../../types/Sales";
+import { toast } from "react-toastify";
 
-const Form = ({
-  handleCloseModel = () => {},
-}:ModalBodyProps) => {
+const Form = () => {
 
-  const [ triggerApi, setTriggerApi] = useState(false)
+  const [triggerApi, setTriggerApi] = useState(false)
+  const { setIsOpen } = useModalState((state) => state);
   const { setObjectToEdit } = useObjectToEdit();
   const {t} = useTranslation();
 
-
   const formik = useFormikContext();
   const {values,setFieldValue} = useFormikContext<any>()
   const  phoneNumber : number =  values?.phone_number 
   
-  const { data, status, isSuccess } = useGetStudentByPhone({
+  const { data,isError,status } = useGetStudentByPhone({
     phone_number:phoneNumber,
   },{
     enabled: triggerApi 
   });
 
   const handleNext = ()=>{
-    if(values?.phone_number && phoneNumber.toString().length === 10 ){
-      setTriggerApi(true);
-      setObjectToEdit({data})
+    if(values?.phone_number && phoneNumber.toString().length === 10){
+      setTriggerApi(true)
     }
   }
     
+  const handleCancel = () => {
+      setIsOpen("");
+      formik.resetForm();    
+  };
 
   useEffect(() => {
-    if(isSuccess){
-      setTriggerApi(false);
-      setObjectToEdit({data})
+    if(!!data?.data?.phone_number){
       setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
+      setObjectToEdit({data})
+      setTriggerApi(false)
     }
-  }, [isSuccess]);
+    else if(!data?.data){
+      setTriggerApi(false)
+    }
+    if(isError){
+      toast.error(t('toast.phone_number_not_found'))
+    }
+  }, [data?.data,triggerApi,isError])
   
 
   return (
@@ -54,9 +62,8 @@ const Form = ({
         <span>
           {t(`models.add_sales`)}{" "}
         </span>
-        <MdCancel onClick={handleCloseModel} />
+        <MdCancel onClick={handleCancel} />
       </header>
-
       <Divider />
 
       <Row className="w-100">
@@ -68,9 +75,8 @@ const Form = ({
           />
             <Divider className="margin_auto"/>
         </Col>
-
             <div className="buttons">
-          <Button className="back_button pointer" onClick={handleCloseModel}>
+              <Button className="back_button pointer" onClick={handleCancel}>
                 {t("practical.cancel")}
               </Button>
               <Button
@@ -86,7 +92,6 @@ const Form = ({
                 )}
               </Button>
             </div>  
-
       </Row>
 
     </div>

src/Pages/ReSeller/Sales/Table.tsx

@@ -1,24 +1,22 @@
 import React from "react";
 import DataTable from "../../../Layout/Dashboard/Table/DataTable";
 import { useColumns } from "./useTableColumns";
+import useSearchQuery from "../../../api/utils/useSearchQuery";
 import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
 import { useGetAllSales } from "../../../api/sales";
 import { formatDate } from "../../../utils/formatDate";
-import { useFilterStateState } from "../../../zustand/Filter";
 
 const App: React.FC = () => {
   
+  const [searchQuery] = useSearchQuery("name");
   const { filterState }:any = useFilterState();
-  const { Filter } = useFilterStateState();
-  const name = Filter?.name ; 
-  const sort_by = Filter?.sort_by ; 
+  
   const response = useGetAllSales({
+    name: searchQuery,
     pagination: true,
     ...filterState,
     activation_date:formatDate(filterState?.activation_date),
     expiration_date:formatDate(filterState?.expiration_date),
-    name,
-    sort_by
   });
 
   return <DataTable response={response} useColumns={useColumns} />;

src/Pages/ReSeller/Sales/useTableColumns.tsx

@@ -6,12 +6,12 @@ export const useColumns = () => {
   const [t] = useTranslation();
 
   const columns: TableColumnsType<Sales> = [
-    // {
-    //   title: t("columns.id"),
-    //   dataIndex: "id",
-    //   key: "id",
-    //   align: "center",
-    // },
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
     {
       title: t("columns.student_full_name"),
       key: "student_full_name",

src/Styles/Pages/Classes.scss

@@ -112,7 +112,3 @@
   pointer-events: none; 
   opacity: 0.6; 
 }
-
-.mr-20{
-  margin-right: 20px;
-}

src/api/sales.ts

@@ -10,13 +10,11 @@ const API = {
 };
 
 const KEY = "sales";
-const KEYSales = "sales_key";
-
 const KEY2 = "Sale_Student_Data";
 const KEY3 = "collection_summery";
 
 
-export const useGetAllSales = (params?: any, options?: any) =>useGetQuery(KEYSales, API.GET, params, options);
+export const useGetAllSales = (params?: any, options?: any) =>useGetQuery(KEY, API.GET, params, options);
 export const useAddSales = () => useAddMutation(KEY, API.ADD);
 export const useGetStudentByPhone = (params?: any, options?: any) => useGetQuery(KEY2, API.GET_BY_PHONE, params, options);
 export const useGetSummery = () => useGetQuery(KEY3, API.GET_SUMMERY);

src/translate/ar.json

@@ -560,8 +560,7 @@
     "due_to":"صالح الى",
     "reseller":"البائعين",
     "activation_date":"تاريخ التنشيط",
-    "expiration_date":"تاريخ الالغاء",
-    "package":"حزمة"
+    "expiration_date":"تاريخ الالغاء"
   },
   "select": {
     "enums": {

src/types/Sales.ts

@@ -1,3 +0,0 @@
-export interface ModalBodyProps {
-    handleCloseModel?: (values: any) => void;
-  }