diff --git a/src/Components/Layout/Navbar/NavBarRightSide.tsx b/src/Components/Layout/Navbar/NavBarRightSide.tsx
index 3d54e86..61319b9 100644
--- a/src/Components/Layout/Navbar/NavBarRightSide.tsx
+++ b/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>
   );
diff --git a/src/Components/Utils/Filter/useFilter.tsx b/src/Components/Utils/Filter/useFilter.tsx
index a27e6ff..c89233e 100644
--- a/src/Components/Utils/Filter/useFilter.tsx
+++ b/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"
diff --git a/src/Components/ValidationField/View/Date.tsx b/src/Components/ValidationField/View/Date.tsx
index 54cc5bc..2f5b1f8 100644
--- a/src/Components/ValidationField/View/Date.tsx
+++ b/src/Components/ValidationField/View/Date.tsx
@@ -25,7 +25,8 @@ const Date = ({
   const onCalendarChange = (value: any) => {
     formik.setFieldValue(name, value);
   };
-
+  console.log(FormikValue);
+  
   const Formatter = [DateEnum?.FORMATE];
   return (
     <div className="ValidationField w-100 ">
diff --git a/src/Layout/Dashboard/LayoutModel.tsx b/src/Layout/Dashboard/LayoutModel.tsx
index a7bdbfe..1a40383 100644
--- a/src/Layout/Dashboard/LayoutModel.tsx
+++ b/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";
@@ -75,8 +75,7 @@ const LayoutModel = ({
       enableReinitialize={true}
       initialValues={getInitialValues}
       validationSchema={getValidationSchema}
-      onSubmit={handleSubmit}
-      
+      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>
 
diff --git a/src/Layout/Ui/SideBar.tsx b/src/Layout/Ui/SideBar.tsx
index 2ff4ddf..73d63d3 100644
--- a/src/Layout/Ui/SideBar.tsx
+++ b/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>
diff --git a/src/Pages/Admin/FinancialCollection/Model/AddModel.tsx b/src/Pages/Admin/FinancialCollection/Model/AddModel.tsx
new file mode 100644
index 0000000..40df4b3
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Admin/FinancialCollection/Model/EditModel.tsx b/src/Pages/Admin/FinancialCollection/Model/EditModel.tsx
new file mode 100644
index 0000000..0623645
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Admin/FinancialCollection/Model/FilterForm.tsx b/src/Pages/Admin/FinancialCollection/Model/FilterForm.tsx
new file mode 100644
index 0000000..74efbf4
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Admin/FinancialCollection/Model/ModelForm.tsx b/src/Pages/Admin/FinancialCollection/Model/ModelForm.tsx
new file mode 100644
index 0000000..c390198
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Admin/FinancialCollection/Model/formUtil.ts b/src/Pages/Admin/FinancialCollection/Model/formUtil.ts
new file mode 100644
index 0000000..153bc12
--- /dev/null
+++ b/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"),
+  });
+};
diff --git a/src/Pages/Admin/FinancialCollection/Page.tsx b/src/Pages/Admin/FinancialCollection/Page.tsx
new file mode 100644
index 0000000..c2e219c
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Admin/FinancialCollection/Table.tsx b/src/Pages/Admin/FinancialCollection/Table.tsx
new file mode 100644
index 0000000..912d680
--- /dev/null
+++ b/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;
diff --git a/src/Pages/Admin/FinancialCollection/index.tsx b/src/Pages/Admin/FinancialCollection/index.tsx
new file mode 100644
index 0000000..447f22d
--- /dev/null
+++ b/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,
+};
diff --git a/src/Pages/Admin/FinancialCollection/useTableColumns.tsx b/src/Pages/Admin/FinancialCollection/useTableColumns.tsx
new file mode 100644
index 0000000..fb5873b
--- /dev/null
+++ b/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;
+};
diff --git a/src/Pages/Admin/Grade/Table.tsx b/src/Pages/Admin/Grade/Table.tsx
index 71c8528..107e721 100644
--- a/src/Pages/Admin/Grade/Table.tsx
+++ b/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}  />;
 };
diff --git a/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx b/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx
index 1a7d7cf..4962836 100644
--- a/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx
+++ b/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>
   )
 }
diff --git a/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx b/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx
index 8019084..9d4426f 100644
--- a/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx
+++ b/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}
          />
     </>
   )
diff --git a/src/Pages/ReSeller/Collections/Model/FilterForm.tsx b/src/Pages/ReSeller/Collections/Model/FilterForm.tsx
index d601efb..b687b6a 100644
--- a/src/Pages/ReSeller/Collections/Model/FilterForm.tsx
+++ b/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
-            placeholder="activation_date"
-            label="activation_date"
-            name="activation_date"
-          />
-          {/* <ValidationField placeholder="name" label="name" name="name" /> */}
+          <ValidationField placeholder="description" label="description" name="description" />
+          <ValidationField placeholder="amount" label="amount" name="amount" />
         </Col>
       </Row>
     </div>
diff --git a/src/Pages/ReSeller/Collections/Page.tsx b/src/Pages/ReSeller/Collections/Page.tsx
index 37f9b22..e62a422 100644
--- a/src/Pages/ReSeller/Collections/Page.tsx
+++ b/src/Pages/ReSeller/Collections/Page.tsx
@@ -14,7 +14,7 @@ const TableHeader = () => {
     {name:`${t(`page_header.home`)}`, path:"/"},
     {name:`${t(`page_header.collections`)}`, path:"collections"}
   ]);
-
+  
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>
@@ -22,7 +22,7 @@ const TableHeader = () => {
           pageTitle="collections"
         />
           <div className="collection_infos">
-          <CollectionsCards/>
+          <CollectionsCards />
         </div>
         <FilterLayout
           sub_children={<FilterForm />}
diff --git a/src/Pages/ReSeller/Collections/Show/Model/FilterForm.tsx b/src/Pages/ReSeller/Collections/Show/Model/FilterForm.tsx
new file mode 100644
index 0000000..1c2464c
--- /dev/null
+++ b/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;
diff --git a/src/Pages/ReSeller/Collections/Show/Page.tsx b/src/Pages/ReSeller/Collections/Show/Page.tsx
new file mode 100644
index 0000000..8b672fd
--- /dev/null
+++ b/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;
diff --git a/src/Pages/ReSeller/Collections/Show/Table.tsx b/src/Pages/ReSeller/Collections/Show/Table.tsx
new file mode 100644
index 0000000..d4478d7
--- /dev/null
+++ b/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;
diff --git a/src/Pages/ReSeller/Collections/Show/useTableColumns.tsx b/src/Pages/ReSeller/Collections/Show/useTableColumns.tsx
new file mode 100644
index 0000000..9eb9da5
--- /dev/null
+++ b/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;
+};
diff --git a/src/Pages/ReSeller/Collections/useTableColumns.tsx b/src/Pages/ReSeller/Collections/useTableColumns.tsx
index b5057b1..5c581a1 100644
--- a/src/Pages/ReSeller/Collections/useTableColumns.tsx
+++ b/src/Pages/ReSeller/Collections/useTableColumns.tsx
@@ -20,9 +20,9 @@ export const useColumns = () => {
       align: "center",
     },
     {
-      title: t("columns.date_of_receipt"),
-      dataIndex: "date_of_receipt",
-      key: "date_of_receipt",
+      title: t("columns.date"),
+      dataIndex: "date",
+      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;
diff --git a/src/Pages/ReSeller/Sales/Model/AddModel.tsx b/src/Pages/ReSeller/Sales/Model/AddModel.tsx
index 10eeea0..86161d6 100644
--- a/src/Pages/ReSeller/Sales/Model/AddModel.tsx
+++ b/src/Pages/ReSeller/Sales/Model/AddModel.tsx
@@ -11,7 +11,7 @@ import LayoutModel from "./LayoutModel";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 
 const AddModel: React.FC = () => {
-  const { mutate, status } = useAddSales();
+  // const { mutate, status } = useAddSales();
 
   const handleSubmit = (values: any) => {
     // mutate({
@@ -31,13 +31,13 @@ const AddModel: React.FC = () => {
   }
   // const modelTitle = Forms.[modal.Number] ? "sale" : Forms.Package ? "adcs" : "Ascas";  
   const { objectToEdit,setObjectToEdit } = useObjectToEdit();
-console.log(objectToEdit);
+  console.log(objectToEdit);
 
   
   return (
     <>
       <LayoutModel
-        status={status as QueryStatusEnum}
+        status={objectToEdit?.status as QueryStatusEnum}
         ModelEnum={ModalEnum.Sales_ADD}
         modelTitle={"modelTitle"}
         handleSubmit={handleSubmit}
diff --git a/src/Pages/ReSeller/Sales/Model/FilterForm.tsx b/src/Pages/ReSeller/Sales/Model/FilterForm.tsx
index d601efb..6689ba0 100644
--- a/src/Pages/ReSeller/Sales/Model/FilterForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/FilterForm.tsx
@@ -11,8 +11,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>
diff --git a/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx b/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx
index cf8f36e..16aa4c1 100644
--- a/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx
+++ b/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx
@@ -15,7 +15,7 @@ interface LayoutModalProps {
   getInitialValues: any;
   getValidationSchema: any;
   children: React.ReactNode;
-  status: QueryStatusEnum;
+  status?: QueryStatusEnum;
   ModelEnum: any;
   ModelClassName?: string;
   width?: string;
@@ -75,7 +75,6 @@ const LayoutModel = ({
       initialValues={getInitialValues}
       validationSchema={getValidationSchema}
       onSubmit={handleSubmit}
-      
     >
       {(formik) => {
         useEffect(() => {
diff --git a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
index cd60205..a4212e6 100644
--- a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx
@@ -6,10 +6,10 @@ 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);
@@ -31,8 +31,7 @@ console.log(objectToEdit);
     id: info?.id,
     name: info.name + " " + `( ${info?.original_price} )`
   }));
-
-console.log(PackagesInfo);
+  
 
   return (
     values?.currentModalIndex == 1 &&      
@@ -50,7 +49,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
@@ -63,10 +62,10 @@ console.log(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 +76,7 @@ console.log(PackagesInfo);
               <Spin />
             </span>
           )}
-        </button>
+        </Button>
       </div>  
     </div>
   );
diff --git a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
index 129acdd..40f6ceb 100644
--- a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx
@@ -1,40 +1,58 @@
-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";
 
-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 {t} = useTranslation();
-  const formik = useFormikContext();
-  const handleNext = ()=>{
-    setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
-    setIsOpen("");
-
-  }
-  const handleCancel = () => {
-    setIsOpen("");
-    setObjectToEdit({});
-  };
-
 
+  const {mutate,isSuccess,status} = 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,
     name: info.name + " " + `( ${info?.original_price} )`
   }));
 
+    
+  const handleNext = ()=>{
+    mutate({
+      package_id:values?.package_id,
+      student_id:objectToEdit?.data?.data?.student_id,
+      coupon_id:coupon_id_object?.coupon_id
+    });
+  }
+  const handleCancel = () => {
+    setObjectToEdit({});
+    setIsOpen("");
+    setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
+  };
 
+
+  useEffect(() => {
+    if(status === QueryStatusEnum.SUCCESS){
+      setIsOpen("");
+      setObjectToEdit({});
+      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
+    }
+    if(values?.currentModalIndex >= 3){
+      setIsOpen("")
+      setObjectToEdit({})
+      setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
+
+    }
+  }, [isSuccess,values?.currentModalIndex])
+  
   return (
     values?.currentModalIndex == 2 &&      
 
@@ -50,8 +68,8 @@ const Form = ({status}:{status?:any}) => {
         <div className="info">
           <img src="/Image/faker_user.png" alt="" />
           <span>
-            <h5>أنس محمد ياسر القلعجي</h5>
-            <h5>الصف: <p> بكالوريا / علمي</p></h5>
+            <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
+            <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
           </span>
         </div>
         <ValidationField
@@ -61,15 +79,14 @@ const Form = ({status}:{status?:any}) => {
           type="Select"
           option={PackagesInfo}
           disabled
-        allowClear={false}
+          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 +97,7 @@ const Form = ({status}:{status?:any}) => {
               <Spin />
             </span>
           )}
-        </button>
+        </Button>
       </div>  
     </div>
   );
diff --git a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
index 60fcf74..ffa30fb 100644
--- a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
+++ b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
@@ -1,17 +1,17 @@
 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";
 
 const Form = () => {
+
   const {values,setFieldValue} = useFormikContext<any>()
   const [triggerApi, setTriggerApi] = useState(false)
   const  phoneNumber : number =  values?.phone_number 
@@ -21,7 +21,7 @@ const Form = () => {
   const formik = useFormikContext();
 
   const {data,isError,isSuccess,status} = useGetStudentByPhone({
-    phone_number:phoneNumber
+    phone_number:phoneNumber,
   },{
     enabled: triggerApi 
   });
@@ -30,30 +30,33 @@ const Form = () => {
     if(values?.phone_number && phoneNumber.toString().length === 10){
       setTriggerApi(true)
     }
+    // if(values?.currentModalIndex == 0 && phoneNumber.toString().length === 10){
+    //   toast.error("phone number not found ")
+    // }
   }
-  console.log(status);
-  console.log(isSuccess);
-
+  // console.log(status);
+  // console.log(isSuccess);
+  // console.log(isError);
+  // console.log(data?.data);
+  // console.log(triggerApi);
+  
+    
   const handleCancel = () => {
     setIsOpen("");
     setObjectToEdit({});
   };
-  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)
-      
     }
     
-  }, [data?.data])
+  }, [data?.data,triggerApi])
   
 
   return (
@@ -78,21 +81,21 @@ 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>
diff --git a/src/Pages/ReSeller/Sales/Model/formUtil.ts b/src/Pages/ReSeller/Sales/Model/formUtil.ts
index 23cec28..f10799d 100644
--- a/src/Pages/ReSeller/Sales/Model/formUtil.ts
+++ b/src/Pages/ReSeller/Sales/Model/formUtil.ts
@@ -1,26 +1,26 @@
 import * as Yup from "yup";
+import { formatDate } from "../../../../utils/formatDate";
 
+// Function to get the initial values
 export const getInitialValues = (objectToEdit: any): any => {
+  
   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 ?? 0,
+    coupon_id: objectToEdit?.coupon_id ?? 1,
   };
 };
 
+// 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") 
-      .matches(/^\d{10}$/, "Phone number must be a valid 10-number number"),
-    currentModalIndex: Yup.number().max(2)
-  });
-};
-
-export const getValidationSchemaForSale = () => {
-  return Yup.object().shape({
-    package_id: Yup.string().required("package_id is required")
+      .length(10, "Phone number must be exactly 10 digits")
+      .matches(/^\d{10}$/, "Phone number must be a valid 10-digit number"),
+    currentModalIndex: Yup.number().max(2),
   });
 };
diff --git a/src/Pages/ReSeller/Sales/Table.tsx b/src/Pages/ReSeller/Sales/Table.tsx
index 9981329..aaff2fc 100644
--- a/src/Pages/ReSeller/Sales/Table.tsx
+++ b/src/Pages/ReSeller/Sales/Table.tsx
@@ -4,14 +4,17 @@ 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} />;
diff --git a/src/Pages/ReSeller/Sales/useTableColumns.tsx b/src/Pages/ReSeller/Sales/useTableColumns.tsx
index ea81cfc..3895a09 100644
--- a/src/Pages/ReSeller/Sales/useTableColumns.tsx
+++ b/src/Pages/ReSeller/Sales/useTableColumns.tsx
@@ -15,32 +15,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"),
-      dataIndex: "grade",
-      key: "grade",
-      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",
+      title: t("columns.expiration_date"),
+      dataIndex: "expiration_date",
+      key: "expiration_date",
       align: "center",
     },
   ];
diff --git a/src/Pages/ReSeller/StudentPackage/useTableColumns.tsx b/src/Pages/ReSeller/StudentPackage/useTableColumns.tsx
index 589bb54..c22cfd6 100644
--- a/src/Pages/ReSeller/StudentPackage/useTableColumns.tsx
+++ b/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;
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 3d7ec2a..34d22cb 100644
--- a/src/Routes.tsx
+++ b/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",
-    element: <ProfileReSeller />,
-    icon: <CgProfile />,
-    text: "sidebar.profile",
-    path: `/${ABILITIES_ENUM?.PROFILE}`,
-    abilities: ABILITIES_ENUM?.Profile_RE_SELLER,
-    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 0,
-    type: UserTypeEnum.RE_SELLER,
-  },
+  // {
+  //   header: "page_header.profile",
+  //   element: <ProfileReSeller />,
+  //   icon: <CgProfile />,
+  //   text: "sidebar.profile",
+  //   path: `/${ABILITIES_ENUM?.PROFILE}`,
+  //   abilities: ABILITIES_ENUM?.Profile_RE_SELLER,
+  //   abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+  //   prevPath: 0,
+  //   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(
diff --git a/src/Styles/DataTable/FillterNav.scss b/src/Styles/DataTable/FillterNav.scss
index 785d4eb..101c5ff 100644
--- a/src/Styles/DataTable/FillterNav.scss
+++ b/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;
   }
 }
diff --git a/src/Styles/Layout/FilterLayout.scss b/src/Styles/Layout/FilterLayout.scss
index a0a42c2..fcf3c85 100644
--- a/src/Styles/Layout/FilterLayout.scss
+++ b/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,
diff --git a/src/Styles/Layout/SideBar.scss b/src/Styles/Layout/SideBar.scss
index afa62cb..208bc22 100644
--- a/src/Styles/Layout/SideBar.scss
+++ b/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;
diff --git a/src/Styles/Pages/collections.scss b/src/Styles/Pages/collections.scss
index ba14340..df5e7d2 100644
--- a/src/Styles/Pages/collections.scss
+++ b/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;
diff --git a/src/api/collections.ts b/src/api/collections.ts
index 520c905..682b2f9 100644
--- a/src/api/collections.ts
+++ b/src/api/collections.ts
@@ -1,7 +1,7 @@
 import useGetQuery from "./helper/useGetQuery";
 
 const API = {
-  GET: "/collections",
+  GET: "/resellers/financialCollection",
 };
 
 const KEY = "collections";
diff --git a/src/api/financial_collection.ts b/src/api/financial_collection.ts
new file mode 100644
index 0000000..cafbe21
--- /dev/null
+++ b/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);
diff --git a/src/api/sales.ts b/src/api/sales.ts
index d1559c5..f03c1c9 100644
--- a/src/api/sales.ts
+++ b/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 useGetSummery = () => useGetQuery(KEY, API.GET_SUMMERY);
\ No newline at end of file
+export const useGetStudentByPhone = (params?: any, options?: any) => useGetQuery(KEY2, API.GET_BY_PHONE, params, options);
+export const useGetSummery = () => useGetQuery(KEY3, API.GET_SUMMERY);
\ No newline at end of file
diff --git a/src/enums/Model.ts b/src/enums/Model.ts
index 1aa011e..29294e6 100644
--- a/src/enums/Model.ts
+++ b/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",
 }
diff --git a/src/enums/abilities.ts b/src/enums/abilities.ts
index 5e93d10..c331030 100644
--- a/src/enums/abilities.ts
+++ b/src/enums/abilities.ts
@@ -59,8 +59,9 @@ export enum ABILITIES_ENUM {
   SETTING = "setting",
   Email = "email",
   Phone = "phone",
-    CITY = "city",
-       AREA = "area"
+  CITY = "city",
+  AREA = "area",
+  Financial_Collection = "financial_collection"
   ////
 }
 
diff --git a/src/enums/params.ts b/src/enums/params.ts
index 00d927d..9fc54ac 100644
--- a/src/enums/params.ts
+++ b/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"
 }
diff --git a/src/translate/ar.json b/src/translate/ar.json
index 5e06424..5477e93 100644
--- a/src/translate/ar.json
+++ b/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":"المتبقي",
diff --git a/src/types/Item.ts b/src/types/Item.ts
index dbd4a49..e26e5d2 100644
--- a/src/types/Item.ts
+++ b/src/types/Item.ts
@@ -367,7 +367,7 @@ export type Sales = {
 
 export type Collection = {
   id: number;
-  student: student;
-  expiration_date: string;
-  activation_date: string;
+  amount: student;
+  date: string;
+  description: string;
 };
diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
index 3116eef..332e72a 100644
--- a/src/utils/formatDate.ts
+++ b/src/utils/formatDate.ts
@@ -1,10 +1,10 @@
-export const formatDate = (dateString: any) => {
+export const formatDate = (dateString: any) => {  
   if (!dateString) return null; // Handle empty date string
 
   const date = new Date(dateString);
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-based
   const day = String(date.getDate()).padStart(2, "0");
-
+  
   return `${year}-${month}-${day}`; // Return formatted date
 };
diff --git a/src/utils/hasAbilityFn.ts b/src/utils/hasAbilityFn.ts
index 3fc88c1..827983d 100644
--- a/src/utils/hasAbilityFn.ts
+++ b/src/utils/hasAbilityFn.ts
@@ -767,7 +767,7 @@ export const canShowQuestionBank = hasAbility(
 );
 
 
-/// User
+/// sales
 
 export const canAddSales = hasAbility(
   ABILITIES_ENUM.Sales,
@@ -796,4 +796,27 @@ export const canEditPhone = hasAbility(
 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,
 );
\ No newline at end of file