fix cache bug in sales page and some fixes

src/Layout/Dashboard/FilterLayout.tsx

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

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

@@ -10,8 +10,11 @@ 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 />
+        <ModelForm isEdit={true} />
       </LayoutModel>
     </>
   );

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

@@ -19,6 +19,8 @@ const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
     { name: "male", id: "male" },
     { name: "female", id: "female" },
   ];
+
+  
   return (
     <Row className="w-100">
       <Col>
@@ -32,25 +34,28 @@ 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

@@ -0,0 +1,60 @@
+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,6 +4,8 @@ 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,11 +1,7 @@
 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,6 +27,7 @@ const TableHeader = () => {
         <FilterLayout
           sub_children={<FilterForm />}
           filterTitle="table.collections"
+          haveSearch={false}
         />
         <Table />
       </Suspense>

src/Pages/ReSeller/Collections/Table.tsx

@@ -4,17 +4,20 @@ 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,24 +1,15 @@
 import React from "react";
 import { getInitialValues, getValidationSchema } from "./formUtil";
 import { ModalEnum } from "../../../../enums/Model";
-import { QueryStatusEnum } from "../../../../enums/QueryStatus";
-import ValidationModelForm from "./ValidationModelForm";
-import SalesModelForm from "./SalesModelForm";
-import SubmitModelForm from "./SubmitModelForm";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus"
 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 (
     <>
@@ -29,9 +20,7 @@ const AddModel: React.FC = () => {
         getInitialValues={getInitialValues(objectToEdit)}
         getValidationSchema={getValidationSchema}
       >
-        {Forms[salesModelEnum.Number]}
-        {Forms[salesModelEnum.Package]}
-        {Forms[salesModelEnum.Submit]}
+        <ModelBody/>
       </LayoutModel>
     </>
   );

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

@@ -0,0 +1,39 @@
+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,16 +1,17 @@
 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 = () => {
+const Form = ({
+  handleCloseModel = () => {},
+}:ModalBodyProps) => {
     
-  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
-  const { setIsOpen } = useModalState((state) => state);
+  const { objectToEdit } = useObjectToEdit();
   const {t} = useTranslation();
 
   const formik = useFormikContext();
@@ -20,18 +21,13 @@ 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">
@@ -40,13 +36,15 @@ const Form = () => {
         <span>
           {t(`models.add_sales`)}{" "}
         </span>
-        <MdCancel onClick={handleCancel} />
+        <MdCancel onClick={handleCloseModel} />
       </header>
+      
       <Divider />
+
       <div className="sales_info_modal">
         <div className="info">
-          <img src="/Image/faker_user.png" alt="" />
-          <span>
+          {/* <img src="/Image/faker_user.png" alt="" /> */}
+          <span className="mr-20">
             <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
             <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
           </span>
@@ -59,8 +57,9 @@ const Form = () => {
           option={PackagesInfo}
         />
       </div>
+
       <div className="buttons">
-        <Button className="back_button pointer" onClick={handleCancel}>
+        <Button className="back_button pointer" onClick={handleCloseModel}>
           {t("practical.cancel")}
         </Button>
         <Button
@@ -76,6 +75,7 @@ const Form = () => {
           )}
         </Button>
       </div>  
+
     </div>
   );
 };

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

@@ -9,15 +9,21 @@ 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 = () => {
+const Form = ({
+  handleCloseModel = () => {},
+}:ModalBodyProps) => {
 
   const { setObjectToEdit , objectToEdit } = useObjectToEdit();
-  const { resetForm, values, setFieldValue } = useFormikContext<any>();
+  const { values, setFieldValue } = useFormikContext<any>();
+  const formik = useFormikContext();
   const { setIsOpen } = useModalState((state) => state);
+  const queryClient = useQueryClient();
   const {t} = useTranslation();
 
-  const {mutate,status,error}:any = useAddSales();
+  const { mutate, status, error,reset }: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) => ({
@@ -25,7 +31,6 @@ const Form = () => {
     name: info.name + " " + `( ${info?.original_price} )`
   }));
 
-  
   const handleNext = ()=>{
     mutate({
       package_id:values?.package_id,
@@ -33,42 +38,46 @@ 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 )
-    }else if(status === QueryStatusEnum.ERROR){
+      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 );
+      reset();
+      formik?.resetForm();
+    }
+    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 )
+      setFieldValue( "currentModalIndex" , 0 );
+      queryClient.resetQueries();
+      reset();
+
     }
+
   }, [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={handleCancel} />
+        <MdCancel onClick={handleCloseModel} />
       </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>
@@ -84,8 +93,9 @@ const Form = () => {
           allowClear={false}
         />
       </div>
+
       <div className="buttons">
-        <Button className="back_button pointer" onClick={handleCancel}>
+        <Button className="back_button pointer" onClick={handleCloseModel}>
           {t("practical.cancel")}
         </Button>
         <Button
@@ -101,6 +111,7 @@ const Form = () => {
           )}
         </Button>
       </div>  
+
     </div>
   );
 };

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

@@ -1,7 +1,6 @@
 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";
@@ -9,20 +8,22 @@ import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
 import { useEffect, useState } from "react";
 import { useGetStudentByPhone } from "../../../../api/sales";
-import { toast } from "react-toastify";
+import { ModalBodyProps } from "../../../../types/Sales";
 
-const Form = () => {
+const Form = ({
+  handleCloseModel = () => {},
+}:ModalBodyProps) => {
   
   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,isError,status } = useGetStudentByPhone({
+  const { data, status, isSuccess } = useGetStudentByPhone({
     phone_number:phoneNumber,
   },{
     enabled: triggerApi
@@ -30,28 +31,19 @@ const Form = () => {
 
   const handleNext = ()=>{
     if(values?.phone_number && phoneNumber.toString().length === 10 ){
-      setTriggerApi(true)
+      setTriggerApi(true);
+      setObjectToEdit({data})
     }
   }
 
-  const handleCancel = () => {
-      setIsOpen("");
-      formik.resetForm();    
-  };
 
   useEffect(() => {
-    if(!!data?.data?.phone_number){
-      setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
+    if(isSuccess){
+      setTriggerApi(false);
       setObjectToEdit({data})
-      setTriggerApi(false)
+      setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
     }
-    else if(!data?.data){
-      setTriggerApi(false)
-    }
-    if(isError){
-      toast.error(t('toast.phone_number_not_found'))
-    }
-  }, [data?.data,triggerApi,isError])
+  }, [isSuccess]);
 
 
   return (
@@ -62,8 +54,9 @@ const Form = () => {
         <span>
           {t(`models.add_sales`)}{" "}
         </span>
-        <MdCancel onClick={handleCancel} />
+        <MdCancel onClick={handleCloseModel} />
       </header>
+
       <Divider />
 
       <Row className="w-100">
@@ -75,8 +68,9 @@ const Form = () => {
           />
           <Divider className="margin_auto"/>
         </Col>
+
         <div className="buttons">
-              <Button className="back_button pointer" onClick={handleCancel}>
+          <Button className="back_button pointer" onClick={handleCloseModel}>
             {t("practical.cancel")}
           </Button>
           <Button
@@ -92,6 +86,7 @@ const Form = () => {
             )}
           </Button>
         </div>
+
       </Row>
       
     </div>

src/Pages/ReSeller/Sales/Table.tsx

@@ -1,22 +1,24 @@
 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,3 +112,7 @@
   pointer-events: none; 
   opacity: 0.6; 
 }
+
+.mr-20{
+  margin-right: 20px;
+}

src/api/sales.ts

@@ -10,11 +10,13 @@ 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(KEY, API.GET, params, options);
+export const useGetAllSales = (params?: any, options?: any) =>useGetQuery(KEYSales, 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,7 +560,8 @@
     "due_to":"صالح الى",
     "reseller":"البائعين",
     "activation_date":"تاريخ التنشيط",
-    "expiration_date":"تاريخ الالغاء"
+    "expiration_date":"تاريخ الالغاء",
+    "package":"حزمة"
   },
   "select": {
     "enums": {

src/types/Sales.ts

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