fixes

admin: collection and some fixes

src/Components/Layout/Navbar/NavBarRightSide.tsx

@@ -38,7 +38,7 @@ const NavBarRightSide = () => {
           icon={<CiCirclePlus size={25} />}
         />
         <TooltipComp
-          onClick={()=>(Navigate('/notifications'))}
+          // onClick={()=>(Navigate('/notifications'))}
           className="NotificationsIcon"
           note="notification"
           color="#E0E0E0"
@@ -55,7 +55,9 @@ const NavBarRightSide = () => {
           <h6>{userData?.username}</h6>
           <p>{userData?.type}</p>
         </span> */}
-        <Image onClick={()=>(Navigate('/profile'))} src="/Image/faker_user.png" alt="Profile" />
+        <Image 
+        // onClick={()=>(Navigate('/profile'))}
+        src="/Image/faker_user.png" alt="Profile" />
       </div>
     </article>
   );

src/Components/Utils/Filter/useFilter.tsx

@@ -158,14 +158,14 @@ const useFilter = () => {
     return (
       <div className="filter-submit-buttons buttons">
         <Button
-          className="back_button filter_modal_add_button"
+          className="back_button filter_modal_cancel_button"
           type="default"
           htmlType="reset"
         >
           {t("practical.reset")}
         </Button>
         <Button
-          className="add_button pointer filter_modal_add_button"
+          className="pointer filter_modal_add_button"
           type="primary"
           {...buttonProps}
           htmlType="submit"

src/Components/ValidationField/View/Date.tsx

@@ -25,6 +25,7 @@ const Date = ({
   const onCalendarChange = (value: any) => {
     formik.setFieldValue(name, value);
   };
+  console.log(FormikValue);
   
   const Formatter = [DateEnum?.FORMATE];
   return (

src/Components/ValidationField/View/Default.tsx

@@ -37,6 +37,7 @@ const Default = ({
           name={name}
           id={name}
           disabled={isDisabled}
+          value={formik?.values?.[name]}
           size="large"
           {...(type === "number" && { min: 0 })}
           {...props}

src/Layout/Dashboard/LayoutModel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Divider, Modal, Spin } from "antd";
+import { Button, Divider, Modal, Spin } from "antd";
 import { useModalState } from "../../zustand/Modal";
 import FormikForm from "./FormikFormModel";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
@@ -76,7 +76,6 @@ const LayoutModel = ({
       initialValues={getInitialValues}
       validationSchema={getValidationSchema}
       onSubmit={handleSubmit} 
-      
     >
       {(formik) => {
         useEffect(() => {
@@ -101,13 +100,13 @@ const LayoutModel = ({
             <Divider />
 
             <div className="buttons">
-              <div className="back_button pointer" onClick={handleCancel}>
+              <Button className="back_button pointer" onClick={handleCancel}>
                 {t("practical.cancel")}
-              </div>
+              </Button>
-              <button
+              <Button
                 className="add_button"
                 disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
-                type="submit"
+                htmlType="submit"
               >
                 {
                   initialButtonName ?  t(`practical.${isAddModal ? "add" : "edit"}`)
@@ -118,7 +117,7 @@ const LayoutModel = ({
                     <Spin />
                   </span>
                 )}
-              </button>
+              </Button>
             </div>
           </main>
 

src/Layout/Ui/SideBar.tsx

@@ -66,7 +66,9 @@ const SideBar = ({
       </div>
       <div className="side_bar_setting">
         <p>{t("sidebar.setting")}</p>
-        <div onClick={() => {navigate("/setting")}}>
+        <div 
+        // onClick={() => {navigate("/setting")}}
+        >
           <CiSettings />
           <span>{t("sidebar.setting")}</span>
         </div>

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { useAddTag } from "../../../../api/tags";
+import ModelForm from "./ModelForm";
+import { useAddFinancialCollection } from "../../../../api/financial_collection";
+import { formatDate } from "../../../../utils/formatDate";
+import dayjs from "dayjs";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddFinancialCollection();
+
+  const handleSubmit = (values: any) => {
+    console.log(values);
+    
+    mutate({
+      ...values,
+      date: dayjs(values?.date).format('YYYY-MM-DD'),
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.Financial_Collection_ADD}
+        modelTitle="financial_collection"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { getInitialValues, getValidationSchema, getValidationSchemaEdit } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useUpdateTag } from "../../../../api/tags";
+import { useUpdateFinancialCollection } from "../../../../api/financial_collection";
+import dayjs from "dayjs";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateFinancialCollection();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+  console.log(objectToEdit);
+  
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+      date: dayjs(values?.date).format('YYYY-MM-DD'),
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.Financial_Collection_EDIT}
+        modelTitle="financial_collection_details"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchemaEdit}
+        isAddModal={false}
+      >
+        <ModelForm isEdit={true}/>
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;

src/Pages/Admin/FinancialCollection/Model/FilterForm.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+import { useGetAllReseller } from "../../../../api/reseller";
+
+const FilterForm = () => {
+  const {data} = useGetAllReseller()
+
+  return (
+    <div>
+      <Row>
+        <Col>
+          <ValidationField placeholder="description" label="description" name="description" />
+          <ValidationField placeholder="amount" label="amount" name="amount" />
+          <ValidationField 
+            placeholder="reseller" 
+            label="reseller" 
+            name="reseller_id" 
+            type="Select" 
+            option={data?.data?.map((e: any) => ({
+              ...e,
+              fullName: `${e.first_name} ${e.last_name}`
+            }))} 
+            fieldNames={{ 
+              label: "fullName",
+              value: "id"
+            }}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,38 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { useGetAllReseller } from "../../../../api/reseller";
+
+const Form = ({isEdit= false}:{isEdit?:boolean}) => {
+  const {data} = useGetAllReseller()
+  
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField placeholder="description" label="description" name="description" />
+        <ValidationField placeholder="amount" label="amount" name="amount" />
+      </Col>
+      <Col>
+      <ValidationField placeholder="date" label="date" name="date" type="Date"/>
+      {isEdit ? " " :
+      <ValidationField 
+        placeholder="reseller" 
+        label="reseller" 
+        name="reseller_id" 
+        type="Select" 
+        option={data?.data?.map((e: any) => ({
+          ...e,
+          fullName: `${e.first_name} ${e.last_name}`
+        }))} 
+        fieldNames={{ 
+          label: "fullName",
+          value: "id"
+        }}
+      />
+      }
+
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;

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

@@ -0,0 +1,30 @@
+import * as Yup from "yup";
+import dayjs from "dayjs";
+export const getInitialValues = (objectToEdit: any): any => {
+  console.log(objectToEdit);
+  
+  return {
+    id: objectToEdit?.id ?? null,
+    description: objectToEdit?.description ?? null,
+    amount: objectToEdit?.amount ?? null,
+    date: objectToEdit?.date ? dayjs(objectToEdit?.date) : null,
+    reseller_id: objectToEdit?.reseller_id ?? null,
+  };
+};
+
+export const getValidationSchema = () => {
+  return Yup.object().shape({
+    description: Yup.string().required("validation.required"),
+    amount: Yup.mixed().required("validation.required"),
+    date: Yup.mixed().required("validation.required"),
+    reseller_id: Yup.mixed().required("validation.required"),
+  });
+};
+
+export const getValidationSchemaEdit = () => {
+  return Yup.object().shape({
+    description: Yup.string().required("validation.required"),
+    amount: Yup.mixed().required("validation.required"),
+    date: Yup.mixed().required("validation.required"),
+  });
+};

src/Pages/Admin/FinancialCollection/Page.tsx

@@ -0,0 +1,54 @@
+import { FaPlus } from "react-icons/fa";
+import useModalHandler from "../../../utils/useModalHandler";
+import { ModalEnum } from "../../../enums/Model";
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import { canAddFinancial_Collection, canAddTags } from "../../../utils/hasAbilityFn";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { useDeleteTag } from "../../../api/tags";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import { useDeleteFinancialCollection } from "../../../api/financial_collection";
+const Table = lazy(() => import("./Table"));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
+const DeleteModalForm = lazy(
+  () => import("../../../Layout/Dashboard/DeleteModels"),
+);
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.financial_collection`)}`, path:"financial_collection"}
+  ]);
+
+  const deleteMutation = useDeleteFinancialCollection();
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="financial_collection"
+          ModelAbility={ModalEnum?.Financial_Collection_ADD}
+          canAdd={canAddFinancial_Collection}
+        />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          filterTitle="sidebar.financial_collection"
+        />
+        <Table />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.Financial_Collection_DELETE}
+        />
+        <AddModalForm />
+        <EditModalForm />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Admin/FinancialCollection/Table.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
+import { useFilterStateState } from "../../../zustand/Filter";
+import { useGetAllFinancialCollection } from "../../../api/financial_collection";
+const App: React.FC = () => {
+
+  const { filterState } = useFilterState();
+  const { Filter } = useFilterStateState();
+  const name = Filter?.name ; 
+  const sort_by = Filter?.sort_by ; 
+
+  const response = useGetAllFinancialCollection({
+    pagination: true,
+    name,
+    sort_by,
+    ...filterState,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;

src/Pages/Admin/FinancialCollection/index.tsx

@@ -0,0 +1,17 @@
+import { useColumns } from "./useTableColumns";
+import Table from "./Table";
+
+import { FaPlus } from "react-icons/fa";
+
+import AddModalForm from "./Model/AddModel";
+import EditModalForm from "./Model/EditModel";
+// import DeleteModalForm from "../../";
+
+export {
+  Table,
+  useColumns,
+  AddModalForm,
+  EditModalForm,
+  // DeleteModalForm,
+  FaPlus,
+};

src/Pages/Admin/FinancialCollection/useTableColumns.tsx

@@ -0,0 +1,73 @@
+import { TableColumnsType } from "antd";
+import { tags } from "../../../types/Item";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useModalState } from "../../../zustand/Modal";
+import { useTranslation } from "react-i18next";
+import { canDeleteFinancial_Collection, canDeleteTags, canEditFinancial_Collection, canEditTags } from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const { setIsOpen } = useModalState((state) => state);
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const handelDelete = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.Financial_Collection_DELETE);
+  };
+  const handleEdit = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.Financial_Collection_EDIT);
+  };
+
+  const columns: TableColumnsType<any> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.amount"),
+      dataIndex: "amount",
+      key: "amount",
+      align: "center",
+      ellipsis:true
+    },
+    {
+      title: t("columns.date"),
+      dataIndex: "date",
+      key: "date",
+      align: "center",
+      ellipsis:true
+    },
+    {
+      title: t("columns.description"),
+      dataIndex: "description",
+      key: "description",
+      align: "center",
+      ellipsis:true
+    },
+    {
+      title: t("columns.procedure"),
+      key: "actions",
+      align: "center",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canEditFinancial_Collection}
+            canEdit={canDeleteFinancial_Collection}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};

src/Pages/Admin/Grade/Table.tsx

@@ -16,6 +16,7 @@ const App: React.FC = () => {
     name,
     sort_by
   });
+// console.log(response);
 
   return <DataTable response={response} useColumns={useColumns}  />;
 };

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

@@ -1,12 +1,13 @@
+import { Spin } from "antd";
 import { useTranslation } from "react-i18next"
 
-const CollectionInfoCard = ({label,value}:{label:string,value:string}) => {
+const CollectionInfoCard = ({label,value,isLoading}:{label:string,value:string,isLoading?:boolean}) => {
 
     const {t} = useTranslation();
   return (
     <div className='collection_info_card'>
         <h5>{t(`card.${label}`)}</h5>
-        <p>{t(value)}</p>
+        <p> {isLoading ?<Spin/>: t(value)}</p>
     </div>
   )
 }

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

@@ -1,30 +1,39 @@
 import React from 'react'
 import CollectionInfoCard from './CollectionInfoCard'
 import { useTranslation } from 'react-i18next'
+import { useGetSummery } from '../../../../api/sales';
+import { Spin } from 'antd';
 
-const CollectionsCards = ({data}:{data?:any}) => {
+const CollectionsCards = () => {
     const {t} = useTranslation();
+    const { data ,isLoading} = useGetSummery();
+
   return (
     <>
         <CollectionInfoCard 
          label={t('total_sells')} 
-         value={"210"}
+         isLoading={isLoading}
+         value={data?.data?.total_sells}
          />
         <CollectionInfoCard 
          label={t('reseller_profit')} 
-         value={"210"}
+         isLoading={isLoading}
+         value={data?.data?.reseller_profit}
          />
          <CollectionInfoCard 
          label={t('company_profit')} 
-         value={"210"}
+         isLoading={isLoading}
+         value={data?.data?.dues}
          />
          <CollectionInfoCard 
          label={t('collected')} 
-         value={"210"}
+         isLoading={isLoading}
+         value={data?.data?.collected_amount}
          />
          <CollectionInfoCard 
          label={t('residual')} 
-         value={"210"}
+         isLoading={isLoading}
+         value={data?.data?.remaining_amount}
          />
     </>
   )

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

@@ -1,18 +1,17 @@
-import React from "react";
 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>
         <Col>
-          <ValidationField
+          <ValidationField placeholder="description" label="description" name="description" />
-            placeholder="activation_date"
+          <ValidationField placeholder="amount" label="amount" name="amount" />
-            label="activation_date"
-            name="activation_date"
-          />
-          {/* <ValidationField placeholder="name" label="name" name="name" /> */}
         </Col>
       </Row>
     </div>

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

@@ -0,0 +1,22 @@
+import React from "react";
+import ValidationField from "../../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+
+const FilterForm = () => {
+  return (
+    <div>
+      <Row>
+        <Col>
+          <ValidationField
+            placeholder="activation_date"
+            label="activation_date"
+            name="activation_date"
+          />
+          {/* <ValidationField placeholder="name" label="name" name="name" /> */}
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;

src/Pages/ReSeller/Collections/Show/Page.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
+import PageHeader from "../../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+const Table = lazy(() => import("./Table"));
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.collections`)}`, path:"collections"},
+    {name:`${t(`page_header.show_collection`)}`, path:"show_collection"},
+
+  ]);
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="show_collection"
+        />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          filterTitle="table.show_collection"
+        />
+        <Table />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/ReSeller/Collections/Show/Table.tsx

@@ -0,0 +1,25 @@
+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 { useGetCollection } from "../../../../api/collections";
+import { useParams } from "react-router-dom";
+
+const App: React.FC = () => {
+  const [searchQuery] = useSearchQuery("name");
+  const { filterState } = useFilterState();
+  const {collection_id}= useParams()
+  console.log(collection_id);
+  
+  const response = useGetCollection({
+    name: searchQuery,
+    pagination: true,
+    ...filterState,
+    show:collection_id
+  });
+
+  return <DataTable response={response} useColumns={useColumns} dataSource={[]} />;
+};
+
+export default App;

src/Pages/ReSeller/Collections/Show/useTableColumns.tsx

@@ -0,0 +1,35 @@
+import { TableColumnsType } from "antd";
+import { Collection } from "../../../../types/Item";
+import { useTranslation } from "react-i18next";
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const columns: TableColumnsType<Collection> = [
+    {
+      title: t("columns.ID"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.amount"),
+      dataIndex: "amount",
+      key: "amount",
+      align: "center",
+    },
+    {
+      title: t("columns.date"),
+      dataIndex: "date",
+      key: "date",
+      align: "center",
+    },
+    {
+      title: t("columns.description"),
+      dataIndex: "description",
+      key: "description",
+      align: "center",
+    },
+  ];
+
+  return columns;
+};

src/Pages/ReSeller/Collections/useTableColumns.tsx

@@ -20,9 +20,9 @@ export const useColumns = () => {
       align: "center",
     },
     {
-      title: t("columns.date_of_receipt"),
+      title: t("columns.date"),
-      dataIndex: "date_of_receipt",
+      dataIndex: "date",
-      key: "date_of_receipt",
+      key: "date",
       align: "center",
     },
     {
@@ -31,12 +31,6 @@ export const useColumns = () => {
       key: "description",
       align: "center",
     },
-    {
-      title: t("columns.residual"),
-      dataIndex: "residual",
-      key: "residual",
-      align: "center",
-    },
   ];
 
   return columns;

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

@@ -5,54 +5,33 @@ import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 import ValidationModelForm from "./ValidationModelForm";
 import SalesModelForm from "./SalesModelForm";
 import SubmitModelForm from "./SubmitModelForm";
-
-import { useAddSales } from "../../../../api/sales";
 import LayoutModel from "./LayoutModel";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { salesModelEnum } from "../../../../enums/salesForms";
 
 const AddModel: React.FC = () => {
-  const { mutate, status } = useAddSales();
-
-  const handleSubmit = (values: any) => {
-    // mutate({
-    //   ...values,
-    // });
-  };
-  enum modal {
-    Number= 0,
-    Package= 1,
-    Sure= 2
-  } 
 
+  const { objectToEdit } = useObjectToEdit();
+  const handleSubmit = () => {};
   const Forms = {
-    [modal.Number]:  <ValidationModelForm /> ,
+    [salesModelEnum.Number]:  <ValidationModelForm /> ,
-    [modal.Package] : <SalesModelForm /> ,
+    [salesModelEnum.Package] : <SalesModelForm /> ,
-    [modal.Sure]:  <SubmitModelForm /> 
+    [salesModelEnum.Submit]:  <SubmitModelForm /> 
   }
-  // const modelTitle = Forms.[modal.Number] ? "sale" : Forms.Package ? "adcs" : "Ascas";  
-  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
   console.log(objectToEdit);
 
-  
   return (
     <>
       <LayoutModel
-        status={status as QueryStatusEnum}
+        status={objectToEdit?.status as QueryStatusEnum}
         ModelEnum={ModalEnum.Sales_ADD}
-        modelTitle={"modelTitle"}
         handleSubmit={handleSubmit}
-        getInitialValues={getInitialValues({})}
+        getInitialValues={getInitialValues(objectToEdit)}
         getValidationSchema={getValidationSchema}
-        initialButtonName={false}
-        buttonTitle="search"
       >
-        {/* {Forms["Number"]} */}
+        {Forms[salesModelEnum.Number]}
-        <>
+        {Forms[salesModelEnum.Package]}
-          <ValidationModelForm/>
+        {Forms[salesModelEnum.Submit]}
-          <SalesModelForm/>
-          <SubmitModelForm/>
-        </>
-
       </LayoutModel>
     </>
   );

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

@@ -1,4 +1,3 @@
-import React from "react";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { Col, Row } from "reactstrap";
 
@@ -11,8 +10,14 @@ const FilterForm = () => {
             placeholder="activation_date"
             label="activation_date"
             name="activation_date"
+            type="Date"
+          />
+          <ValidationField
+          placeholder="expiration_date"
+          label="expiration_date"
+          name="expiration_date"
+          type="Date"
           />
-          {/* <ValidationField placeholder="name" label="name" name="name" /> */}
         </Col>
       </Row>
     </div>

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

@@ -6,56 +6,55 @@ import { useTranslation } from "react-i18next";
 import { QueryStatusEnum } from "../../../../enums/QueryStatus";
 import SpinContainer from "../../../../Components/Layout/SpinContainer";
 import { MdCancel } from "react-icons/md";
-import { Form, Formik } from "formik";
+import { Form, Formik, useFormikContext } from "formik";
 
 interface LayoutModalProps {
   isAddModal?: boolean;
-  modelTitle: string;
   handleSubmit: (values: any) => void;
+  handleReset?: (values: any) => void;
   getInitialValues: any;
   getValidationSchema: any;
   children: React.ReactNode;
-  status: QueryStatusEnum;
+  status?: QueryStatusEnum;
   ModelEnum: any;
   ModelClassName?: string;
   width?: string;
   isLoading?: boolean;
-  buttonTitle?:string;
-  initialButtonName?:boolean
 }
 
 const LayoutModel = ({
   isAddModal = true,
   children,
   handleSubmit = () => {},
+  handleReset = () => {},
   getInitialValues,
   getValidationSchema,
   status,
-  modelTitle,
   ModelEnum,
   ModelClassName,
   width = "800px",
   isLoading = false,
-  buttonTitle,
-  initialButtonName = true,
 }: LayoutModalProps) => {
   const { isOpen, setIsOpen } = useModalState((state) => state);
   const { setObjectToEdit } = useObjectToEdit();
+  const formik = useFormikContext();
   useEffect(() => {
     if (isAddModal && status === QueryStatusEnum.SUCCESS) {
       setIsOpen("isSuccess");
       setObjectToEdit({});
+      formik.resetForm();
       return;
     }
     if (status === QueryStatusEnum.SUCCESS) {
       setIsOpen("");
-      setObjectToEdit({});
     }
+
   }, [setIsOpen, status]);
 
   const handleCancel = () => {
     setIsOpen("");
     setObjectToEdit({});
+    formik.resetForm();
   };
 
   const [t] = useTranslation();
@@ -75,7 +74,7 @@ const LayoutModel = ({
       initialValues={getInitialValues}
       validationSchema={getValidationSchema}
       onSubmit={handleSubmit}
-      
+      onReset={handleReset}
     >
       {(formik) => {
         useEffect(() => {

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

@@ -1,43 +1,41 @@
-import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
 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 { Divider, Spin } from "antd";
+import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
 
-const Form = ({status}:{status?:any}) => {
+const Form = () => {
   
-  const {values,setFieldValue} = useFormikContext<any>()
-  console.log(values?.currentModalIndex);
-  const { isOpen, setIsOpen } = useModalState((state) => state);
   const { objectToEdit,setObjectToEdit } = useObjectToEdit();
+  const { setIsOpen } = useModalState((state) => state);
   const {t} = useTranslation();
+
   const formik = useFormikContext();
+  const { values, setFieldValue } = useFormikContext<any>()
+
   const handleNext = ()=>{
     setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
   }
+
   const handleCancel = () => {
     setIsOpen("");
-    setObjectToEdit({});
+    formik.resetForm();
   };
 
-console.log(objectToEdit);
   const student_info = objectToEdit?.data?.data
   const PackagesInfo = student_info?.packages.map((info:any) => ({
     id: info?.id,
     name: info.name + " " + `( ${info?.original_price} )`
   }));
   
-console.log(PackagesInfo);
 
   return (
     values?.currentModalIndex == 1 &&      
-
     <div className="w-100">
+
       <header className="modal_title">
         <span>
           {t(`models.add_sales`)}{" "}
@@ -50,7 +48,7 @@ console.log(PackagesInfo);
           <img src="/Image/faker_user.png" alt="" />
           <span>
             <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
-            <h5>الصف: <p> {student_info?.grade_name}</p></h5>
+            <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
           </span>
         </div>
         <ValidationField
@@ -61,12 +59,11 @@ console.log(PackagesInfo);
           option={PackagesInfo}
         />
       </div>
-      {/* {values?.currentModalIndex} */}
       <div className="buttons">
-        <div className="back_button pointer" onClick={handleCancel}>
+        <Button className="back_button pointer" onClick={handleCancel}>
           {t("practical.cancel")}
-        </div>
+        </Button>
-        <button
+        <Button
           className="add_button"
           disabled={status === QueryStatusEnum.LOADING || !formik.dirty || !values?.package_id}
           onClick={handleNext}
@@ -77,7 +74,7 @@ console.log(PackagesInfo);
               <Spin />
             </span>
           )}
-        </button>
+        </Button>
       </div>  
     </div>
   );

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

@@ -1,33 +1,24 @@
-import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
 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 { Divider, Spin } from "antd";
+import { Button, Divider, Spin } from "antd";
 import { MdCancel } from "react-icons/md";
+import { useAddSales } from "../../../../api/sales";
+import { useEffect } from "react";
+import { toast } from "react-toastify";
 
-const Form = ({status}:{status?:any}) => {
+const Form = () => {
   
-  const {values,setFieldValue} = useFormikContext<any>()
-  console.log(values?.currentModalIndex);
-  const { isOpen, setIsOpen } = useModalState((state) => state);
   const { setObjectToEdit,objectToEdit } = useObjectToEdit();
+  const { resetForm, values, setFieldValue } = useFormikContext<any>();
+  const { setIsOpen } = useModalState((state) => state);
   const {t} = useTranslation();
-  const formik = useFormikContext();
-  const handleNext = ()=>{
-    setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
-    setIsOpen("");
-
-  }
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
 
+  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) => ({
     id: info?.id,
@@ -35,6 +26,35 @@ const Form = ({status}:{status?:any}) => {
   }));
 
   
+  const handleNext = ()=>{
+    mutate({
+      package_id:values?.package_id,
+      student_id:objectToEdit?.data?.data?.student_id,
+      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){
+      toast.error(t(`toast.${error?.response?.data?.message}` || `toast.error_while_trying_please_try_again`)) 
+    }
+    if(values?.currentModalIndex >= 3){
+      setIsOpen("")
+      setObjectToEdit({})
+      setFieldValue( "currentModalIndex" , 0 )
+    }
+  }, [values?.currentModalIndex,status])
+  
   return (
     values?.currentModalIndex == 2 &&      
 
@@ -50,8 +70,8 @@ const Form = ({status}:{status?:any}) => {
         <div className="info">
           <img src="/Image/faker_user.png" alt="" />
           <span>
-            <h5>أنس محمد ياسر القلعجي</h5>
+            <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
-            <h5>الصف: <p> بكالوريا / علمي</p></h5>
+            <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
           </span>
         </div>
         <ValidationField
@@ -64,12 +84,11 @@ const Form = ({status}:{status?:any}) => {
           allowClear={false}
         />
       </div>
-      {/* {values?.currentModalIndex} */}
       <div className="buttons">
-        <div className="back_button pointer" onClick={handleCancel}>
+        <Button className="back_button pointer" onClick={handleCancel}>
           {t("practical.cancel")}
-        </div>
+        </Button>
-        <button
+        <Button
           className="add_button"
           disabled={status === QueryStatusEnum.LOADING}
           onClick={handleNext}
@@ -80,7 +99,7 @@ const Form = ({status}:{status?:any}) => {
               <Spin />
             </span>
           )}
-        </button>
+        </Button>
       </div>  
     </div>
   );

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

@@ -1,27 +1,29 @@
 import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
 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 { Divider, Spin } from "antd";
+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";
 
 const Form = () => {
-  const {values,setFieldValue} = useFormikContext<any>()
-  const [triggerApi, setTriggerApi] = useState(false)
-  const  phoneNumber : number =  values?.phone_number 
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
-  const {t} = useTranslation();
-  const formik = useFormikContext();
 
-  const {data,isError,isSuccess,status} = useGetStudentByPhone({
+  const [triggerApi, setTriggerApi] = useState(false)
-    phone_number:phoneNumber
+  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({
+    phone_number:phoneNumber,
   },{
     enabled: triggerApi 
   });
@@ -31,35 +33,31 @@ const Form = () => {
       setTriggerApi(true)
     }
   }
-  console.log(status);
-  console.log(isSuccess);
     
   const handleCancel = () => {
       setIsOpen("");
-    setObjectToEdit({});
+      formik.resetForm();    
   };
-  console.log(data?.data);
 
   useEffect(() => {
-    
     if(!!data?.data?.phone_number){
       setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
       setObjectToEdit({data})
       setTriggerApi(false)
-
     }
-    else {
+    else if(!data?.data){
       setTriggerApi(false)
-      
     }
-    
+    if(isError){
-  }, [data?.data])
+      toast.error(t('toast.phone_number_not_found'))
+    }
+  }, [data?.data,triggerApi,isError])
   
 
   return (
     values?.currentModalIndex == 0 &&      
-
     <div className="w-100">
+
       <header className="modal_title">
         <span>
           {t(`models.add_sales`)}{" "}
@@ -78,23 +76,24 @@ const Form = () => {
             <Divider className="margin_auto"/>
         </Col>
             <div className="buttons">
-            <div className="back_button pointer" onClick={handleCancel}>
+              <Button className="back_button pointer" onClick={handleCancel}>
                 {t("practical.cancel")}
-            </div>
+              </Button>
-            <button
+              <Button
                 className="add_button"
-              disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
+                disabled={status === QueryStatusEnum.LOADING || !formik.dirty || !values?.phone_number}
                 onClick={handleNext}
               >
-              {t(`practical.search`)}
+                {t(`practical.sale`)}
                 {status === QueryStatusEnum.LOADING && (
                   <span className="Spinier_Div">
                     <Spin />
                   </span>
                 )}
-            </button>
+              </Button>
             </div>  
       </Row>
+
     </div>
   );
 };

src/Pages/ReSeller/Sales/Model/formUtil.ts

@@ -1,26 +1,26 @@
 import * as Yup from "yup";
 
+// Function to get the initial values
 export const getInitialValues = (objectToEdit: any): any => {
+  console.log(objectToEdit);
+
   return {
     id: objectToEdit?.id ?? null,
     phone_number: objectToEdit?.phone_number ?? null,
     currentModalIndex: 0,
-    package_id:objectToEdit?.package_id ?? null
+    package_id: objectToEdit?.package_id ?? null,
+    student_id: objectToEdit?.student_id ?? null,
+    coupon_id: objectToEdit?.coupon_id ?? null,
   };
 };
 
+// Validation schema with Yup
 export const getValidationSchema = () => {
   return Yup.object().shape({
     phone_number: Yup.string()
       .required("Phone number is required")
-      .length(10, "Phone number must be exactly 10 numbers") 
+      .length(10, "Phone number must be exactly 10 digits")
-      .matches(/^\d{10}$/, "Phone number must be a valid 10-number number"),
+      .matches(/^\d{10}$/, "Phone number must be a valid 10-digit number"),
-    currentModalIndex: Yup.number().max(2)
+    currentModalIndex: Yup.number().max(2),
-  });
-};
-
-export const getValidationSchemaForSale = () => {
-  return Yup.object().shape({
-    package_id: Yup.string().required("package_id is required")
   });
 };

src/Pages/ReSeller/Sales/Page.tsx

@@ -11,11 +11,14 @@ const Table = lazy(() => import("./Table"));
 const AddModalForm = lazy(() => import("./Model/AddModel"));
 
 const TableHeader = () => {
+  
   const [t] = useTranslation();
   useSetPageTitle([
     {name:`${t(`page_header.home`)}`, path:"/"},
     {name:`${t(`page_header.sales`)}`, path:"sales"}
-  ]);  return (
+  ]);  
+
+  return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>
         <PageHeader

src/Pages/ReSeller/Sales/Table.tsx

@@ -4,14 +4,19 @@ 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";
+
 const App: React.FC = () => {
+  
   const [searchQuery] = useSearchQuery("name");
-  const { filterState } = useFilterState();
+  const { filterState }:any = useFilterState();
   
   const response = useGetAllSales({
     name: searchQuery,
     pagination: true,
     ...filterState,
+    activation_date:formatDate(filterState?.activation_date),
+    expiration_date:formatDate(filterState?.expiration_date),
   });
 
   return <DataTable response={response} useColumns={useColumns} />;

src/Pages/ReSeller/Sales/index.tsx

@@ -4,14 +4,10 @@ import Table from "./Table";
 import { FaPlus } from "react-icons/fa";
 
 import AddModalForm from "./Model/AddModel";
-import EditModalForm from "./Model/EditModel";
-// import DeleteModalForm from "../../";
 
 export {
   Table,
   useColumns,
   AddModalForm,
-  EditModalForm,
-  // DeleteModalForm,
   FaPlus,
 };

src/Pages/ReSeller/Sales/useTableColumns.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 export const useColumns = () => {
   const [t] = useTranslation();
 
-
   const columns: TableColumnsType<Sales> = [
     {
       title: t("columns.id"),
@@ -15,32 +14,38 @@ export const useColumns = () => {
     },
     {
       title: t("columns.student_full_name"),
+      key: "student_full_name",
+      align: "center",
+      render: (row) => {
+        return row?.student?.first_name +" "+ row?.student?.last_name;
+      },
+    },
+    {
+      title: t("columns.grade"),
+      render: (row) => {
+        return row?.package?.name;
+      },
+      key: "package",
+      align: "center",
+    },
+    {
+      title: t("columns.paid_price"),
+      render: (row) => {
+        return row?.package?.price;
+      },
+      key: "price",
+      align: "center",
+    },
+    {
+      title: t("columns.activation_date"),
       dataIndex: "activation_date",
       key: "activation_date",
       align: "center",
     },
     {
-      title: t("columns.grade"),
+      title: t("columns.expiration_date"),
-      dataIndex: "grade",
+      dataIndex: "expiration_date",
-      key: "grade",
+      key: "expiration_date",
-      align: "center",
-    },
-    {
-      title: t("columns.package"),
-      dataIndex: "package",
-      key: "package",
-      align: "center",
-    },
-    {
-      title: t("columns.amount_paid"),
-      dataIndex: "amount_paid",
-      key: "amount_paid",
-      align: "center",
-    },
-    {
-      title: t("columns.sale_date"),
-      dataIndex: "sale_date",
-      key: "sale_date",
       align: "center",
     },
   ];

src/Pages/ReSeller/StudentPackage/useTableColumns.tsx

@@ -65,24 +65,6 @@ export const useColumns = () => {
         return row?.student?.sex;
       },
     },
-    // {
-    //   title: t("columns.procedure"),
-    //   key: "actions",
-    //   align: "center",
-    //   width: "25vw",
-    //   render: (_text, record, index) => {
-    //     return (
-    //       <ActionButtons
-    //         // canDelete={canEditUser}
-    //         canEdit={canDeleteUser}
-    //         index={index}
-    //         onDelete={() => handelDelete(record)}
-    //         onEdit={() => handleEdit(record)}
-
-    //       />
-    //     );
-    //   },
-    // },
   ];
 
   return columns;

src/Routes.tsx

@@ -31,6 +31,8 @@ const Manager = React.lazy(() => import("./Pages/Admin/Manager/Page"));
 const AddManager = React.lazy(() => import("./Pages/Admin/Manager/Add/Page"));
 const EditManager = React.lazy(() => import("./Pages/Admin/Manager/Edit/Page"));
 
+const FinancialCollection = React.lazy(() => import("./Pages/Admin/FinancialCollection/Page"));
+
 
 const ReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Page"));
 const ShowReSeller = React.lazy(() => import("./Pages/Admin/Reseller/show/Page"));
@@ -52,6 +54,7 @@ const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));
 /// RESELLER ///
 const Sales = React.lazy(() => import("./Pages/ReSeller/Sales/Page"));
 const Collections = React.lazy(() => import("./Pages/ReSeller/Collections/Page"));
+const ShowCollection = React.lazy(() => import("./Pages/ReSeller/Collections/Show/Page"));
 
 const NotificationReSeller = React.lazy(() => import("./Pages/ReSeller/Notifications/Page"));
 const ProfileReSeller = React.lazy(() => import("./Pages/ReSeller/Profile/Page"));
@@ -192,7 +195,16 @@ export const menuItems: TMenuItem[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
-
+  {
+    header: "page_header.financial_collection",
+    element: <FinancialCollection />,
+    icon: <FaMoneyBill />,
+    text: "sidebar.financial_collection",
+    path: `/${ABILITIES_ENUM?.Financial_Collection}`,
+    abilities: ABILITIES_ENUM?.Financial_Collection,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
 
   /// RESELLER /////
   {
@@ -217,17 +229,17 @@ export const menuItems: TMenuItem[] = [
     prevPath: 0,
     type: UserTypeEnum.RE_SELLER,
   },
-  {
+  // {
-    header: "page_header.profile",
+  //   header: "page_header.profile",
-    element: <ProfileReSeller />,
+  //   element: <ProfileReSeller />,
-    icon: <CgProfile />,
+  //   icon: <CgProfile />,
-    text: "sidebar.profile",
+  //   text: "sidebar.profile",
-    path: `/${ABILITIES_ENUM?.PROFILE}`,
+  //   path: `/${ABILITIES_ENUM?.PROFILE}`,
-    abilities: ABILITIES_ENUM?.Profile_RE_SELLER,
+  //   abilities: ABILITIES_ENUM?.Profile_RE_SELLER,
-    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+  //   abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 0,
+  //   prevPath: 0,
-    type: UserTypeEnum.RE_SELLER,
+  //   type: UserTypeEnum.RE_SELLER,
-  },
+  // },
 
 ];
 
@@ -380,7 +392,16 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 1,
   },
+  {
+    header: "page_header.collection",
+    element: <ShowCollection />,
+    path: `/${ABILITIES_ENUM?.Collections}/:${ParamsEnum?.Collection_ID}`,
+    abilities: ABILITIES_ENUM?.Collections,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+    type:UserTypeEnum.RE_SELLER
 
+  },
 ];
 
 export const AppRoutes: Record<string, string> = Object.fromEntries(

src/Styles/DataTable/FillterNav.scss

@@ -43,7 +43,9 @@
     font-size: 20px;
   }
 }
+.main_modal{
   
+}
 .add_button {
   outline: none;
   border: none;
@@ -64,8 +66,12 @@
     
   }
   transition: .4s ease-in-out;
-
+  &:focus{
+    // display: none !important;
+  }
   &:hover{
-    scale: 1.1;
+    scale: 1.04;
+    background: var(--primary) !important;
+    color: var(--white) !important;
   }
 }

src/Styles/Layout/FilterLayout.scss

@@ -93,6 +93,10 @@
   padding: 20px 10px !important;
 }
 
+.filter_modal_add_button{
+  padding: 20.8px 10px !important;
+}
+
 @media screen and (max-width: 800px) {
 
   .filter_modal_add_button,

src/Styles/Layout/SideBar.scss

@@ -94,7 +94,6 @@
         color: var(--borderColor);
       }
       svg {
-        // width: 20px;
         border-radius: 5px;
         padding: 4px;
         color: var(--borderColor);
@@ -121,7 +120,6 @@
       justify-content: start;
       background: inherit;
       font-size: 20px;
-      // height: 2.5vw;
       width: 80%;
       font-weight: bold;
       margin-inline: auto;
@@ -152,7 +150,6 @@
   }
 }
 .active {
-  // transform: translateX(-1vw);
   color: var(--text) !important;
   background-color: var(--bg);
   font-weight: bold;
@@ -162,8 +159,6 @@
   }
 
   i {
-    // width: 1.5vw;
-    // height: 1.5vw;
     border-radius: 5px;
     display: flex;
     justify-content: center;
@@ -209,6 +204,11 @@
   .side_bar_links {
     display: flex;
     align-items: center;
+    .DropDownLink{
+      .DropDownIcon{
+        transform: translate(-1.4vw,10px);
+      }
+    }
     .active {
       background: inherit !important;
     }
@@ -240,7 +240,7 @@
     div {
       @include Flex;
       width: 100%;
-      margin-block: 12px;
+      margin-block: 0px;
       svg {
         height: 36px;
         padding: 7px;

src/Styles/Pages/collections.scss

@@ -4,7 +4,6 @@
     gap: 5px;
     .collection_info_card {
         display: flex;
-        justify-content: center;
         flex-direction: column;
         width: 15vw;
         padding: 1.2vw 1.2vw;

src/api/collections.ts

@@ -1,7 +1,7 @@
 import useGetQuery from "./helper/useGetQuery";
 
 const API = {
-  GET: "/collections",
+  GET: "/resellers/financialCollection",
 };
 
 const KEY = "collections";

src/api/financial_collection.ts

@@ -0,0 +1,20 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/financialCollection",
+  ADD: "/financialCollection",
+  DELETE: "/financialCollection",
+  UPDATE: "/financialCollection",
+};
+
+const KEY = "financialCollection";
+
+export const useGetAllFinancialCollection = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddFinancialCollection = () => useAddMutation(KEY, API.ADD);
+export const useUpdateFinancialCollection = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeleteFinancialCollection = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);

src/api/helper/useAxios.ts

@@ -50,9 +50,12 @@ function useAxios() {
       return response;
     },
     function (error) {
-      console.log(error?.response);
+      // Reject errors with non-2xx status codes
+      const status = error?.response?.status;
+      if (status >= 400) {
+        return Promise.reject(error);
+      }
   
-      const status = error?.request?.status;
       const errorMsg = error?.response?.data?.error;
       const errorField = error?.response?.data;
       const method = error.config.method;
@@ -65,8 +68,6 @@ function useAxios() {
             ? errorMsg
             : errorMsg?.[ErrorKey]?.[0] ??
               t("validation.some_thing_went_wrong");
-        console.log(isString);
-
         toast.error(t(`${isString}`));
         return;
       }
@@ -80,8 +81,11 @@ function useAxios() {
         toast.error(errorMessage);
         return Promise.reject(error);
       }
-    },
+  
+      return Promise.reject(error); // Important to reject the promise
+    }
   );
+  
   return build_Axios;
 
   // return buildAxios.build();

src/api/sales.ts

@@ -3,15 +3,18 @@ import useGetQuery from "./helper/useGetQuery";
 
 const API = {
   GET: "/resellers/studentPackage",
-  ADD: "/resellers/studentPackage",
+  ADD: "/resellers/studentPackage/purchase",
   GET_BY_PHONE: "/resellers/studentPackage/student",
   GET_SUMMERY: "/resellers/studentPackage/summery",
 
 };
 
 const KEY = "sales";
+const KEY2 = "Sale_Student_Data";
+const KEY3 = "collection_summery";
+
 
 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(KEY, API.GET_BY_PHONE, params, options);
+export const useGetStudentByPhone = (params?: any, options?: any) => useGetQuery(KEY2, API.GET_BY_PHONE, params, options);
-export const useGetSummery = () => useGetQuery(KEY, API.GET_SUMMERY);
+export const useGetSummery = () => useGetQuery(KEY3, API.GET_SUMMERY);

src/enums/Model.ts

@@ -237,4 +237,10 @@ export enum ModalEnum {
   /// email
 
   Email_EDIT = "Email.edit",
+
+  ///financial_collection
+
+  Financial_Collection_EDIT = "Financial_Collection.edit",
+  Financial_Collection_ADD = "Financial_Collection.add",
+  Financial_Collection_DELETE = "Financial_Collection.delete",
 }

src/enums/abilities.ts

@@ -60,7 +60,8 @@ export enum ABILITIES_ENUM {
   Email = "email",
   Phone = "phone",
   CITY = "city",
-       AREA = "area"
+  AREA = "area",
+  Financial_Collection = "financial_collection"
   ////
 }
 

src/enums/params.ts

@@ -14,4 +14,5 @@ export enum ParamsEnum {
   RE_SELLER_ID = "re_seller_id",
   ROLE_ID = "role_id",
   CITY_ID = "city_id",
+  Collection_ID  = "collection_id"
 }

src/enums/salesForms.ts

@@ -0,0 +1,5 @@
+export enum salesModelEnum {
+    Number= 0,
+    Package= 1,
+    Submit= 2
+  } 

src/translate/ar.json

@@ -149,7 +149,8 @@
     "past_your_MMl_text":"ضع نص MMl الخاص بك",
     "add_MML":"إضافة MML",
     "show_preview":"عرض المعاينة",
-    "show_MMl":" MML عرض"
+    "show_MMl":" MML عرض",
+    "financial_collection":"التحصيلات"
   },
   "columns": {
     "id": "الرقم التعريفي",
@@ -233,7 +234,8 @@
     "delete":"حذف",
     "read":"قراءة",
     "managers":"مدراء",
-    "show":"عرض"
+    "show":"عرض",
+    "paid_price":"المبلغ المدفوع"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -313,7 +315,9 @@
     "Map":"الخريطة",
     "Show":"عرض",
     "Hide":"اخفاء",
-    "sale":"بيع"
+    "sale":"بيع",
+    "financial_collection":"التحصيلات",
+    "show_collection":"حصيلة"
   },
   "Table": {
     "header": "",
@@ -404,7 +408,9 @@
     "Area":"المنطقة",
     "City":"مدينة",
     "add_sales":"إضافة عملية بيع",
-    "are_you_sure_about_sale":"هل أنت متأكد من عملية البيع ؟"
+    "are_you_sure_about_sale":"هل أنت متأكد من عملية البيع ؟",
+    "financial_collection":"التحصيلات",
+    "show_collection":"حصيلة"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -538,7 +544,11 @@
     "contact_number2":"رقم الهاتف الإضافي",
     "lat":"الطول",
     "lng":"العرض",
-    "choose":"حدد"
+    "choose":"حدد",
+    "amount":"مبلغ",
+    "reseller":"البائعين",
+    "activation_date":"تاريخ التنشيط",
+    "expiration_date":"تاريخ الالغاء"
   },
   "select": {
     "enums": {
@@ -875,7 +885,8 @@
     "sales":"المبيعات",
     "collections": "التحصيلات",
     "Area":"المنطقة",
-    "city":"مدينة"
+    "city":"مدينة",
+    "financial_collection":"التحصيلات"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -924,7 +935,9 @@
     "City":"مدينة",
     "Area":"المنطقة",
     "setting":"الإعدادات",
-    "edit_reseller":"تعديل البائع"
+    "edit_reseller":"تعديل البائع",
+    "financial_collection":"التحصيلات",
+    "show_collection":"حصيلة"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -973,7 +986,9 @@
     "sales":"المبيعات",
     "setting":"الإعدادات",
     "City":"مدينة",
-    "Area":"المنطقة"
+    "Area":"المنطقة",
+    "financial_collection":"التحصيلات",
+    "show_collection":"حصيلة"
   },
   "table": {
     "student": "قائمة الطلاب",
@@ -992,7 +1007,9 @@
     "City":"مدينة",
     "notification":"الاشعارات",
     "upload_your_photo_and_personal_data_here":"قم بتحميل صورتك وبياناتك الشخصية هنا",
-    "get_notified_of_whats_happening_now_you_can_turn_it_off_at_any_time":"احصل على إشعار بما يحدث الآن ، يمكنك إيقاف تشغيله في أي وقت"
+    "get_notified_of_whats_happening_now_you_can_turn_it_off_at_any_time":"احصل على إشعار بما يحدث الآن ، يمكنك إيقاف تشغيله في أي وقت",
+    "financial_collection":"التحصيلات",
+    "show_collection":"حصيلة"
   },
   "card" : {
     "residual":"المتبقي",
@@ -1001,6 +1018,12 @@
     "reseller_profit":"نسبة الأرباح (10%)",
     "total_sells":"إجمالي المبيعات"
   },
+  "toast" : {
+    "phone_number_not_found":"رقم الهاتف غير موجود",
+    "error_while_trying_please_try_again":"حدث خطأ أثناء المحاولة، يرجى المحاولة مرة أخرى",
+    "Student Already Have this Package":"الطالب لديه هذه الحزمة بالفعل",
+    "The combination of student_id and package_id already exists.":"مجموعة الطالب والحزمة موجودة بالفعل."
+  },
   "alphabet": {
     "A": "A",
     "B": "B",

src/types/Item.ts

@@ -367,7 +367,7 @@ export type Sales = {
 
 export type Collection = {
   id: number;
-  student: student;
+  amount: student;
-  expiration_date: string;
+  date: string;
-  activation_date: string;
+  description: string;
 };

src/utils/hasAbilityFn.ts

@@ -767,7 +767,7 @@ export const canShowQuestionBank = hasAbility(
 );
 
 
-/// User
+/// sales
 
 export const canAddSales = hasAbility(
   ABILITIES_ENUM.Sales,
@@ -797,3 +797,26 @@ export const canEditEmail = hasAbility(
   ABILITIES_ENUM.Email,
   ABILITIES_VALUES_ENUM.UPDATE,
 );
+
+/// financial_collection
+
+export const canAddFinancial_Collection = hasAbility(
+  ABILITIES_ENUM.Financial_Collection,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+
+export const canEditFinancial_Collection = hasAbility(
+  ABILITIES_ENUM.Financial_Collection,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeleteFinancial_Collection = hasAbility(
+  ABILITIES_ENUM.Financial_Collection,
+  ABILITIES_VALUES_ENUM.DELETE,
+);
+
+
+// collection reseller
+export const canShowCollection = hasAbility(
+  ABILITIES_ENUM.Collections,
+  ABILITIES_VALUES_ENUM.SHOW,
+);