Merge branch 'dev' of https://git.point-dev.net/Karimaldeen/Quiz_dashboard into dev

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

@@ -0,0 +1,54 @@
+import { useTranslation } from "react-i18next";
+import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
+import PageHeader from "../../../../Layout/Dashboard/PageHeader";
+import { Suspense } from "react";
+import { Spin } from "antd";
+import { ModalEnum } from "../../../../enums/Model";
+import { canAddReSeller } from "../../../../utils/hasAbilityFn";
+import PersonalDetailsForm from "../Form/PersonalDetailsForm";
+import { Formik, Form } from "formik";
+import { getInitialValues, getValidationSchema } from "../Form/formUtils";
+import TitleDetailsForm from "../Form/TitleDetailsForm";
+import AttachmentForm from "../Form/AttachmentForm";
+import PasswordDetailsForm from "../Form/PasswordDetailsForm";
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  useSetPageTitle(t(`page_header.add_reseller`));
+  const handelSubmit = (values: any) => {
+    console.log(values, "values");
+  };
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="edit_manager"
+          ModelAbility={ModalEnum?.MANAGER_EDIT}
+          canAdd={false}
+        />
+        <div>
+          <Formik
+            initialValues={getInitialValues({})}
+            validationSchema={getValidationSchema}
+            onSubmit={handelSubmit}
+          >
+            <Form className="Form_details_container">
+              <PersonalDetailsForm />
+              <TitleDetailsForm />
+              <PasswordDetailsForm/>
+              <AttachmentForm />
+              <div className="resellerButton">
+                <button type="button">{t("practical.cancel")}</button>
+                <button type="submit">
+                  {t("practical.save_changes")}
+                </button>
+              </div>
+            </Form>
+          </Formik>
+        </div>
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Admin/Manager/Form/PasswordDetailsForm.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import { FaStore } from "react-icons/fa";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+
+const PasswordDetailsForm = () => {
+  const [t] = useTranslation();
+
+  return (
+    <div className="PasswordDetailsForm">
+      <header className="header_form">
+        <FaStore />
+        <h4>{t("header.password")}</h4>
+      </header>
+      <main className="main_form_body">
+        <ValidationField name={"password"} placeholder={"_"} label={"new_password"} />
+        <ValidationField name={"password"} placeholder={"_"} label={"submit_password"} />
+
+      </main>
+    </div>
+  );
+};
+
+export default PasswordDetailsForm;

src/Pages/Admin/Manager/Form/PersonalDetailsForm.tsx

@@ -16,15 +16,15 @@ const PersonalDetailsForm = () => {
       </header>
       <main className="main_form_body">
         <ValidationField
-          name={"id_number"}
+          name={"first_name"}
           placeholder={"_"}
-          label={"ID Number"}
+          label={"first_name"}
         />
         <ValidationField
-          name={"addition_date"}
+          name={"last_name"}
           placeholder={"_"}
           type="Date"
-          label={"Addition Date"}
+          label={"last_name"}
         />
         <ValidationField
           name={"status"}
@@ -35,9 +35,9 @@ const PersonalDetailsForm = () => {
         />
 
         <ValidationField
-          name={"full_name"}
+          name={"sex"}
           placeholder={"_"}
-          label={"Full Name"}
+          label={"sex"}
         />
         <ValidationField
           name={"phone_number"}
@@ -46,20 +46,20 @@ const PersonalDetailsForm = () => {
           type="text"
         />
         <ValidationField
-          name={"mobile_number"}
+          name={"email_address"}
           placeholder={"_"}
-          label={"Mobile Number"}
+          label={"email_address"}
         />
 
         <ValidationField
-          name={"username"}
+          name={"birthday"}
           placeholder={"_"}
-          label={"Username"}
+          label={"birthday"}
         />
         <ValidationField
-          name={"password"}
+          name={"join_date"}
           placeholder={"_"}
-          label={"Password"}
+          label={"join_date"}
           type="text"
         />
         <ValidationField

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

@@ -0,0 +1,14 @@
+import { useTranslation } from "react-i18next"
+
+const CollectionInfoCard = ({label,value}:{label:string,value:string}) => {
+
+    const {t} = useTranslation();
+  return (
+    <div className='collection_info_card'>
+        <h5>{t(label)}</h5>
+        <p>{t(value)}</p>
+    </div>
+  )
+}
+
+export default CollectionInfoCard

src/Pages/ReSeller/Collections/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/Page.tsx

@@ -0,0 +1,40 @@
+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";
+import CollectionInfoCard from "./Model/CollectionInfoCard";
+import { CollectionData } from "../../../faker/item";
+const Table = lazy(() => import("./Table"));
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.collections`)}`, path:"collections"}
+  ]);
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="collections"
+        />
+          <div className="collection_infos">
+            {CollectionData?.map((collection:any)=>(
+              <CollectionInfoCard label={collection.label} value={collection.value}/>
+            ))}
+        </div>
+        <FilterLayout
+          sub_children={<FilterForm />}
+          filterTitle="table.collections"
+        />
+        <Table />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/ReSeller/Collections/Table.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+import useSearchQuery from "../../../api/utils/useSearchQuery";
+import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
+import { useGetAllSales } from "../../../api/sales";
+
+const App: React.FC = () => {
+  const [searchQuery] = useSearchQuery("name");
+  const { filterState } = useFilterState();
+
+  const response = useGetAllSales({
+    name: searchQuery,
+    pagination: true,
+    ...filterState,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;

src/Pages/ReSeller/Collections/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/ReSeller/Collections/useTableColumns.tsx

@@ -0,0 +1,43 @@
+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_of_receipt"),
+      dataIndex: "date_of_receipt",
+      key: "date_of_receipt",
+      align: "center",
+    },
+    {
+      title: t("columns.description"),
+      dataIndex: "description",
+      key: "description",
+      align: "center",
+    },
+    {
+      title: t("columns.residual"),
+      dataIndex: "residual",
+      key: "residual",
+      align: "center",
+    },
+  ];
+
+  return columns;
+};

src/Pages/ReSeller/Notifications/Card.tsx

@@ -0,0 +1,29 @@
+import TrashButton from "../../../Components/Ui/TrashButton"
+import { notifications } from "../../../types/Notifications"
+
+
+const Card = ({name,date,image,id,pop,setPop}:notifications) => {
+    const handleDeleteOne = () => {
+        setPop(pop?.filter((item:any)=> item?.id !== id))
+    }
+    
+  return (
+        <div className="notification_card" key={id}>
+            <div>
+                <img src={image} alt={name} />
+                <div>
+                    <h5>{name}</h5>
+                    <p>{date}</p>
+                </div>
+            </div>
+            <div>
+                <TrashButton 
+                 onClick={handleDeleteOne} 
+                 name="delete"
+                 icon={false}/>
+            </div>
+        </div>  
+    )
+}
+
+export default Card

src/Pages/ReSeller/Notifications/NotificationArray.ts

@@ -0,0 +1,16 @@
+import { notifications } from "../../../types/Notifications";
+
+export const NotificationArray:notifications[] = [
+    {id:1,name:"تم إضافة تحصيل جديد بواسطة شاون",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:2,name:"moa",date:"منذ ساعة",image:"/Image/faker_user.png"}, 
+    {id:3,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:4,name:"hello",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:5,name:"nop",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:6,name:"hey",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+
+]

src/Pages/ReSeller/Notifications/Page.tsx

@@ -0,0 +1,41 @@
+import { Divider } from 'antd';
+import { useTranslation } from 'react-i18next'
+import { NotificationArray } from './NotificationArray';
+import { notifications } from '../../../types/Notifications';
+import Card from './Card';
+import TrashButton from '../../../Components/Ui/TrashButton';
+import { useState } from 'react';
+
+const Page = () => {
+    const {t} = useTranslation(); 
+    const [pop, setPop] = useState(NotificationArray)
+
+    const handleDeleteAll = () => {
+        setPop([])
+    }
+    
+  return (
+    <div className='notification_container'>
+        <div className='notification_header'>
+            <h3>{t("header.notifications")}</h3>
+            <TrashButton 
+             onClick={handleDeleteAll} 
+             name='delete_all'/>
+        </div>
+        <Divider/>
+        <div className="notification_body">
+            {pop?.map((not:notifications)=>(
+                <Card
+                 id={not?.id}
+                 name={not?.name} 
+                 date={not?.date} 
+                 pop={pop}
+                 setPop={setPop}
+                 image={not?.image}/>
+            ))}
+        </div>
+    </div>
+  )
+}
+
+export default Page

src/Pages/ReSeller/Profile/Form/AttachmentForm.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FaImage } from "react-icons/fa";
+import ImageBoxField from "./ImageBoxField/ImageBoxField";
+
+const AttachmentForm = () => {
+  const [t] = useTranslation();
+
+  return (
+    <div className="AttachmentForm">
+      <header className="header_form">
+        <div>
+          <FaImage />
+          <h4>{t("header.attachments")}</h4>
+        </div>
+      </header>
+      <main className="main_form_body">
+        <ImageBoxField name="personal_image" />
+        <ImageBoxField name="id_image" />
+      </main>
+    </div>
+  );
+};
+
+export default AttachmentForm;

src/Pages/ReSeller/Profile/Form/HeaderForm.tsx

@@ -0,0 +1,24 @@
+import { Button } from 'antd';
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const HeaderForm = ({name,Icon,ButtonIcon, isHaveButtonIcon= true,buttonName = "edit"}:{name:string,Icon:any,ButtonIcon?:any,isHaveButtonIcon?:boolean,buttonName?:string}) => {
+    const {t} = useTranslation();
+  return (
+    <>
+        <div>
+          <Icon />
+          <h4>{t(`header.${name}`)}</h4>
+        </div>
+        <div>
+        <Button className='edit_button' >
+        {isHaveButtonIcon?
+          <ButtonIcon/> :""}
+          {t(`header.${buttonName}`)}
+        </Button>
+        </div>
+    </>
+  )
+}
+
+export default HeaderForm

src/Pages/ReSeller/Profile/Form/ImageBoxField/ImageBoxField.scss

@@ -0,0 +1,38 @@
+.ImageBoxField {
+  .ImageBox {
+    width: 120px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: max(1.5px, 0.1vw) dashed #a9c3f1;
+    margin-block: 10px;
+    border-radius: 5px;
+    z-index: 9999999 !important;
+    .ImageBoxIcon {
+      cursor: pointer;
+    }
+    .imagePreview {
+      max-width: 99%;
+      height: auto;
+      max-height: 99%;
+      object-fit: contain;
+      border-radius: 5px;
+    }
+  }
+  .ImageHeader {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .ImageCancelIcon {
+    width: 16px !important;
+    height: 16px !important;
+  }
+  .ImageBoxIcon {
+    width: 20px !important;
+    height: 20px !important;
+  }
+}

src/Pages/ReSeller/Profile/Form/ImageBoxField/ImageBoxField.tsx

@@ -0,0 +1,87 @@
+import { useFormikContext } from "formik";
+import { useState, useRef, useEffect } from "react";
+import "./ImageBoxField.scss";
+import ImageIcon from "./ImageIcon";
+import ImageCancelIcon from "./ImageCancelIcon";
+import { generateImagePreview } from "./generateImagePreview";
+import { getNestedValue } from "../../../../../utils/getNestedValue";
+import { useTranslation } from "react-i18next";
+
+// Helper function to generate image preview from a File
+
+const ImageBoxField = ({ name }: any) => {
+  const formik = useFormikContext<any>();
+  const value = getNestedValue(formik.values, name);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (value instanceof File) {
+      generateImagePreview(value, setImagePreview);
+    } else if (typeof value === "string") {
+      setImagePreview(value);
+    } else {
+      setImagePreview(null);
+    }
+  }, [value]);
+
+  const handleFileChange = (event: any) => {
+    const file = event.target.files[0];
+    if (file) {
+      generateImagePreview(file, setImagePreview);
+      formik.setFieldValue(name, file);
+    }
+  };
+
+  const handleButtonClick = () => {
+    const fileInput = fileInputRef.current;
+    if (fileInput) {
+      fileInput.click();
+    }
+  };
+
+  const handleCancel = () => {
+    setImagePreview("");
+    formik.setFieldValue(name, "");
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const [t] = useTranslation();
+  return (
+    <div className="ImageBoxField">
+      <header>{t(`input.${name}`)}</header>
+      <div className="ImageHeader">
+        {imagePreview ? (
+          <>
+            <ImageCancelIcon
+              onClick={handleCancel}
+              className="ImageCancelIcon"
+            />
+            <ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
+          </>
+        ) : (
+          <div className="VisibleHidden">hidden</div>
+        )}
+      </div>
+      <div className="ImageBox">
+        {imagePreview ? (
+          <img src={imagePreview} alt="Preview" className="imagePreview" />
+        ) : (
+          <ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
+        )}
+      </div>
+      <input
+        id={`file-input-${name}`}
+        type="file"
+        accept="image/png, image/jpeg, image/webp"
+        style={{ display: "none" }}
+        onChange={handleFileChange}
+        ref={fileInputRef}
+      />
+    </div>
+  );
+};
+
+export default ImageBoxField;

src/Pages/ReSeller/Profile/Form/ImageBoxField/ImageCancelIcon.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+interface ImageCancelIconProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ImageCancelIcon: React.FC<ImageCancelIconProps> = (props) => {
+  return (
+    <div {...props}>
+      <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M7 5.44469L12.4447 0L14 1.55531L8.55531 7L14 12.4447L12.4436 14L6.9989 8.55531L1.55531 14L0 12.4436L5.44469 6.9989L0 1.55421L1.55531 0.00109986L7 5.44469Z"
+          fill="#515B73"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default ImageCancelIcon;

src/Pages/ReSeller/Profile/Form/ImageBoxField/ImageIcon.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ImageIcon: React.FC<ImageIconProps> = (props) => {
+  return (
+    <div {...props}>
+      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M11.25 5.625C11.25 7.11684 10.6574 8.54758 9.60248 9.60248C8.54758 10.6574 7.11684 11.25 5.625 11.25C4.13316 11.25 2.70242 10.6574 1.64752 9.60248C0.592632 8.54758 0 7.11684 0 5.625C0 4.13316 0.592632 2.70242 1.64752 1.64752C2.70242 0.592632 4.13316 0 5.625 0C7.11684 0 8.54758 0.592632 9.60248 1.64752C10.6574 2.70242 11.25 4.13316 11.25 5.625ZM6.25 3.125C6.25 2.95924 6.18415 2.80027 6.06694 2.68306C5.94973 2.56585 5.79076 2.5 5.625 2.5C5.45924 2.5 5.30027 2.56585 5.18306 2.68306C5.06585 2.80027 5 2.95924 5 3.125V5H3.125C2.95924 5 2.80027 5.06585 2.68306 5.18306C2.56585 5.30027 2.5 5.45924 2.5 5.625C2.5 5.79076 2.56585 5.94973 2.68306 6.06694C2.80027 6.18415 2.95924 6.25 3.125 6.25H5V8.125C5 8.29076 5.06585 8.44973 5.18306 8.56694C5.30027 8.68415 5.45924 8.75 5.625 8.75C5.79076 8.75 5.94973 8.68415 6.06694 8.56694C6.18415 8.44973 6.25 8.29076 6.25 8.125V6.25H8.125C8.29076 6.25 8.44973 6.18415 8.56694 6.06694C8.68415 5.94973 8.75 5.79076 8.75 5.625C8.75 5.45924 8.68415 5.30027 8.56694 5.18306C8.44973 5.06585 8.29076 5 8.125 5H6.25V3.125ZM16.25 3.75H12.2413C12.1187 3.3183 11.9542 2.89964 11.75 2.5H16.25C17.2446 2.5 18.1984 2.89509 18.9017 3.59835C19.6049 4.30161 20 5.25544 20 6.25V16.25C20 17.2446 19.6049 18.1984 18.9017 18.9017C18.1984 19.6049 17.2446 20 16.25 20H6.25C5.25544 20 4.30161 19.6049 3.59835 18.9017C2.89509 18.1984 2.5 17.2446 2.5 16.25V11.75C2.89667 11.9533 3.31333 12.1171 3.75 12.2413V16.25C3.75 16.7162 3.8775 17.1525 4.1 17.525L9.93625 11.79C10.2869 11.4457 10.7586 11.2528 11.25 11.2528C11.7414 11.2528 12.2131 11.4457 12.5637 11.79L18.4012 17.525C18.6298 17.139 18.7502 16.6986 18.75 16.25V6.25C18.75 5.58696 18.4866 4.95107 18.0178 4.48223C17.5489 4.01339 16.913 3.75 16.25 3.75ZM16.25 8.125C16.25 8.37123 16.2015 8.61505 16.1073 8.84253C16.013 9.07002 15.8749 9.27672 15.7008 9.45083C15.5267 9.62494 15.32 9.76305 15.0925 9.85727C14.865 9.9515 14.6212 10 14.375 10C14.1288 10 13.885 9.9515 13.6575 9.85727C13.43 9.76305 13.2233 9.62494 13.0492 9.45083C12.8751 9.27672 12.737 9.07002 12.6427 8.84253C12.5485 8.61505 12.5 8.37123 12.5 8.125C12.5 7.62772 12.6975 7.15081 13.0492 6.79917C13.4008 6.44754 13.8777 6.25 14.375 6.25C14.8723 6.25 15.3492 6.44754 15.7008 6.79917C16.0525 7.15081 16.25 7.62772 16.25 8.125ZM15 8.125C15 7.95924 14.9342 7.80027 14.8169 7.68306C14.6997 7.56585 14.5408 7.5 14.375 7.5C14.2092 7.5 14.0503 7.56585 13.9331 7.68306C13.8158 7.80027 13.75 7.95924 13.75 8.125C13.75 8.29076 13.8158 8.44973 13.9331 8.56694C14.0503 8.68415 14.2092 8.75 14.375 8.75C14.5408 8.75 14.6997 8.68415 14.8169 8.56694C14.9342 8.44973 15 8.29076 15 8.125ZM4.985 18.4075C5.36871 18.6321 5.80538 18.7504 6.25 18.75H16.25C16.7125 18.75 17.1437 18.625 17.515 18.4075L11.6875 12.6825C11.5707 12.568 11.4136 12.5038 11.25 12.5038C11.0864 12.5038 10.9293 12.568 10.8125 12.6825L4.985 18.4075Z"
+          fill="#515B73"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default ImageIcon;

src/Pages/ReSeller/Profile/Form/ImageBoxField/generateImagePreview.ts

@@ -0,0 +1,10 @@
+export const generateImagePreview = (
+  file: File,
+  setImagePreview: (result: string) => void,
+) => {
+  const reader = new FileReader();
+  reader.onloadend = () => {
+    setImagePreview(reader.result as string);
+  };
+  reader.readAsDataURL(file);
+};

src/Pages/ReSeller/Profile/Form/PasswordDetailsForm.tsx

@@ -0,0 +1,25 @@
+import { useTranslation } from "react-i18next";
+import { FaStore } from "react-icons/fa";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import HeaderForm from "./HeaderForm";
+
+const PasswordDetailsForm = () => {
+  const [t] = useTranslation();
+
+  return (
+    <div className="PasswordDetailsForm">
+      <header className="header_form">
+        <HeaderForm 
+         name="password"
+         Icon={FaStore}
+         isHaveButtonIcon={false}
+         buttonName="change"/>
+      </header>
+      <main className="main_form_body">
+        <ValidationField name={"password"} placeholder={"_"} label={"current_password"} />
+      </main>
+    </div>
+  );
+};
+
+export default PasswordDetailsForm;

src/Pages/ReSeller/Profile/Form/PersonalDetailsForm.tsx

@@ -0,0 +1,56 @@
+import { useTranslation } from "react-i18next";
+import { FaStore } from "react-icons/fa";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { statusType } from "../../../../config/statusType";
+import { Button } from "antd";
+import { CiEdit } from "react-icons/ci";
+import HeaderForm from "./HeaderForm";
+
+const PersonalDetailsForm = () => {
+  const [t] = useTranslation();
+  return (
+    <div className="PersonalDetailsForm">
+      <header className="header_form">
+        <HeaderForm 
+         name="personal_information"
+         Icon={FaStore}
+         ButtonIcon={CiEdit}/>
+      </header>
+      <main className="main_form_body">
+        <ValidationField
+          name={"first_name"}
+          placeholder={"_"}
+          label={"first_name"}
+        />
+        <ValidationField
+          name={"last_name"}
+          placeholder={"_"}
+          type="Date"
+          label={"last_name"}
+        />
+
+        <ValidationField
+          name={"email_address"}
+          placeholder={"_"}
+          label={"email_address"}
+          type="Select"
+          option={statusType}
+        />
+        <ValidationField
+          name={"username"}
+          placeholder={"_"}
+          label={"username"}
+        />
+
+        <ValidationField
+          name={"full_name"}
+          placeholder={"_"}
+          label={"Phone Number"}
+        />
+
+      </main>
+    </div>
+  );
+};
+
+export default PersonalDetailsForm;

src/Pages/ReSeller/Profile/Form/TitleDetailsForm.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from "react-i18next";
+import { FaStore } from "react-icons/fa";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { nationalities } from "../../../../types/App";
+import { CiEdit } from "react-icons/ci";
+import HeaderForm from "./HeaderForm";
+
+const TitleDetailsForm = () => {
+  const [t] = useTranslation();
+
+  return (
+    <div className="TitleDetailsForm">
+      <header className="header_form">
+        <HeaderForm 
+         name="address"
+         Icon={FaStore}
+         ButtonIcon={CiEdit}/>
+      </header>
+      <main className="main_form_body">
+        <ValidationField
+          name={"city_id"}
+          placeholder={"_"}
+          label={"city"}
+          type="Select"
+          option={nationalities}
+        />
+        <ValidationField name={"address"} placeholder={"_"} label={"address"} />
+      </main>
+    </div>
+  );
+};
+
+export default TitleDetailsForm;

src/Pages/ReSeller/Profile/Form/formUtils.ts

@@ -0,0 +1,13 @@
+import * as Yup from "yup";
+
+export const getInitialValues = (objectToEdit: Partial<any>) => {
+  return {
+    id: objectToEdit?.id ?? null,
+    name: objectToEdit?.name ?? null,
+  };
+};
+
+export const getValidationSchema = () => {
+  // validate input
+  return Yup.object().shape({});
+};

src/Pages/ReSeller/Profile/Page.tsx

@@ -0,0 +1,58 @@
+import { useTranslation } from "react-i18next";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import { Suspense } from "react";
+import { Spin } from "antd";
+import { ModalEnum } from "../../../enums/Model";
+import { canAddReSeller } from "../../../utils/hasAbilityFn";
+import { Formik, Form } from "formik";
+import { getInitialValues, getValidationSchema } from "./Form/formUtils";
+import PersonalDetailsForm from "./Form/PersonalDetailsForm";
+import TitleDetailsForm from "./Form/TitleDetailsForm";
+import AttachmentForm from "./Form/AttachmentForm";
+import PasswordDetailsForm from "./Form/PasswordDetailsForm";
+
+const Page = () => {
+  const [t] = useTranslation();
+  useSetPageTitle(t(`page_header.add_reseller`));
+  const handelSubmit = (values: any) => {
+    console.log(values, "values");
+  };
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.profile`)}`, path:"tag"}
+  ]);
+  return (
+    <div className="TableWithHeader profile">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="profile"
+          ModelAbility={ModalEnum?.RE_SELLER_ADD}
+          canAdd={false}
+        />
+        <div>
+          <Formik
+            initialValues={getInitialValues({})}
+            validationSchema={getValidationSchema}
+            onSubmit={handelSubmit}
+          >
+            <Form className="Form_details_container">
+              <PersonalDetailsForm />
+              <TitleDetailsForm />
+              <PasswordDetailsForm/>              
+              <AttachmentForm />
+              <div className="resellerButton">
+                <button type="button">{t("practical.cancel")}</button>
+                <button type="submit">
+                  {t("practical.add")} {t("models.reseller")}
+                </button>
+              </div>
+            </Form>
+          </Formik>
+        </div>
+      </Suspense>
+    </div>
+  );
+};
+
+export default Page;

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

@@ -0,0 +1,34 @@
+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 ModelForm from "./ModelForm";
+import { useAddStudentPackage } from "../../../../api/studentPackage";
+import { useAddSales } from "../../../../api/sales";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddSales();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.Sales_ADD}
+        modelTitle="sale"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;

src/Pages/ReSeller/Sales/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/Sales/Model/ModelForm.tsx

@@ -0,0 +1,26 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
+
+const Form = ({ isEdit }: { isEdit?: boolean }) => {
+  const typeOptions = [
+    { id: "student", name: "student" },
+    { id: "reseller", name: "reseller" },
+    { id: "admin", name: "admin" },
+  ];
+  const typeArray = useFormatDataToSelect(typeOptions);
+
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField
+          placeholder="phone_number"
+          label="phone_number"
+          name="phone_number"
+        />
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;

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

@@ -0,0 +1,13 @@
+import * as Yup from "yup";
+
+export const getInitialValues = (objectToEdit: any): any => {
+  return {
+    id: objectToEdit?.id ?? null,
+    phone_number: objectToEdit?.phone_number ?? null,
+  };
+};
+export const getValidationSchema = () => {
+  return Yup.object().shape({
+    phone_number: Yup.number().required("validation.required"),
+  });
+};

src/Pages/ReSeller/Sales/Page.tsx

@@ -0,0 +1,38 @@
+import { ModalEnum } from "../../../enums/Model";
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import { canAddSales } 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";
+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 (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="sales"
+          ModelAbility={ModalEnum?.Sales_ADD}
+          canAdd={canAddSales}
+        />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          filterTitle="table.sales"
+        />
+        <Table />
+        <AddModalForm />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/ReSeller/Sales/Table.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+import useSearchQuery from "../../../api/utils/useSearchQuery";
+import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
+import { useGetAllSales } from "../../../api/sales";
+const App: React.FC = () => {
+  const [searchQuery] = useSearchQuery("name");
+  const { filterState } = useFilterState();
+
+  const response = useGetAllSales({
+    name: searchQuery,
+    pagination: true,
+    ...filterState,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;

src/Pages/ReSeller/Sales/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/ReSeller/Sales/useTableColumns.tsx

@@ -0,0 +1,49 @@
+import { TableColumnsType } from "antd";
+import { Sales } from "../../../types/Item";
+import { useTranslation } from "react-i18next";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+
+  const columns: TableColumnsType<Sales> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.student_full_name"),
+      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",
+      align: "center",
+    },
+  ];
+
+  return columns;
+};

src/Routes.tsx

@@ -25,6 +25,7 @@ const Student = React.lazy(() => import("./Pages/Admin/Student/Page"));
 const ShowStudent = React.lazy(() => import("./Pages/Admin/Student/show/Page"));
 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 ReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Page"));
@@ -44,9 +45,12 @@ const Report = React.lazy(() => import("./Pages/Admin/Report/Page"));
 const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));
 
 /// RESELLER ///
-const Student_Package = React.lazy(
+const Sales = React.lazy(() => import("./Pages/ReSeller/Sales/Page"));
-  () => import("./Pages/ReSeller/StudentPackage/Page"),
+const Collections = React.lazy(() => import("./Pages/ReSeller/Collections/Page"));
-);
+
+const NotificationReSeller = React.lazy(() => import("./Pages/ReSeller/Notifications/Page"));
+const ProfileReSeller = React.lazy(() => import("./Pages/ReSeller/Profile/Page"));
+
 
 import { hasAbility } from "./utils/hasAbility";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
@@ -97,16 +101,16 @@ export const menuItems: TMenuItem[] = [
         abilities_value: ABILITIES_VALUES_ENUM.INDEX,
         prevPath: 0,
       },
-      // {
+      {
-      //   header: "page_header.managers",
+        header: "page_header.managers",
-      //   element: <Manager />,
+        element: <Manager />,
-      //   icon: <GoDotFill className="transparent_bg" />,
+        icon: <GoDotFill className="transparent_bg" />,
-      //   text: "sidebar.managers",
+        text: "sidebar.managers",
-      //   path: `/${ABILITIES_ENUM?.MANAGERS}`,
+        path: `/${ABILITIES_ENUM?.MANAGERS}`,
-      //   abilities: ABILITIES_ENUM?.MANAGERS,
+        abilities: ABILITIES_ENUM?.MANAGERS,
-      //   abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+        abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-      //   prevPath: 0,
+        prevPath: 0,
-      // },
+      },
     ]
   },
   {
@@ -174,14 +178,35 @@ export const menuItems: TMenuItem[] = [
 
 
   /// RESELLER /////
-
   {
-    header: "page_header.student_package",
+    header: "page_header.sales",
-    element: <Student_Package />,
+    element: <Sales />,
     icon: <FaSellcast />,
-    text: "sidebar.student_package",
+    text: "sidebar.sales",
-    path: `/${ABILITIES_ENUM?.Student_Package}`,
+    path: `/${ABILITIES_ENUM?.Sales}`,
-    abilities: ABILITIES_ENUM?.Student_Package,
+    abilities: ABILITIES_ENUM?.Sales,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+    type: UserTypeEnum.RE_SELLER,
+  },
+  {
+    header: "page_header.collections",
+    element: <Collections />,
+    icon: <FaSellcast />,
+    text: "sidebar.collections",
+    path: `/${ABILITIES_ENUM?.Collections}`,
+    abilities: ABILITIES_ENUM?.Collections,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+    type: UserTypeEnum.RE_SELLER,
+  },
+  {
+    header: "page_header.profile",
+    element: <ProfileReSeller />,
+    icon: <FaSellcast />,
+    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,
@@ -281,14 +306,6 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
-  {
-    header: "page_header.notifications",
-    element: <Notifications />,
-    path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`,
-    abilities: ABILITIES_ENUM?.NOTIFICATIONS,
-    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 0,
-  },
   {
     header: "page_header.permissions",
     element: <Permissions />,
@@ -297,6 +314,14 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
+  {
+    header: "page_header.notifications",
+    element: <Notifications />,
+    path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`,
+    abilities: ABILITIES_ENUM?.NOTIFICATIONS,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
   {
     header: "page_header.add_manager",
     element: <AddManager />,
@@ -305,6 +330,24 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
+  {
+    header: "page_header.edit_manager",
+    element: <EditManager />,
+    path: `/${ABILITIES_ENUM?.MANAGERS}/edit`,
+    abilities: ABILITIES_ENUM?.MANAGERS,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
+  //// RE_SELLER
+  {
+    header: "page_header.notifications",
+    element: <NotificationReSeller />,
+    path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`,
+    abilities: ABILITIES_ENUM?.NOTIFICATIONS_RE_SELLER,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+    type: UserTypeEnum.RE_SELLER,
+  },
 ];
 
 export const AppRoutes: Record<string, string> = Object.fromEntries(

src/Styles/Antd/Model.scss

@@ -5,6 +5,7 @@
 .ant-modal .ant-modal-content {
   padding: 0;
   border-radius: 10px;
+
   .ant-modal-close {
     display: none !important;
   }
@@ -12,10 +13,12 @@
 
 .ModalForm {
   position: relative;
+
   .ant-divider-horizontal {
     // width: 90% !important;
     margin: 10px 0;
   }
+
   header {
     display: flex;
     justify-content: space-between;
@@ -26,12 +29,14 @@
     color: var(--black);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
+
     span {
       font-size: 25px;
     }
+
     svg {
       font-size: 30px;
-      color: #6a7287;
+      color: var(--value);
     }
   }
 
@@ -41,6 +46,7 @@
     flex-direction: column;
     width: 100%;
   }
+
   main {
     .buttons {
       padding-inline: 0 10px;
@@ -48,8 +54,9 @@
       gap: 10px;
       align-items: end;
       justify-content: end;
-      > button,
+
-      > div {
+      >button,
+      >div {
         position: relative;
         outline: none;
         border: none;
@@ -63,6 +70,7 @@
         align-items: center;
         justify-content: center;
         gap: 5px;
+
         &:nth-child(1) {
           background: var(--white);
           color: var(--primary);
@@ -71,13 +79,16 @@
       }
     }
   }
+
   label {
     color: var(--secondary) !important;
   }
 }
+
 .ant-modal-root .ant-modal-centered .ant-modal {
   width: 45vw;
 }
+
 .ant-modal .ant-modal-body {
   padding-inline: 1vw !important;
-}
+}

src/Styles/App/App.scss

@@ -13,6 +13,7 @@ body {
   font-weight: 600;
   font-size: 16px;
 }
+
 h1,
 h2,
 h3,
@@ -42,26 +43,32 @@ svg {
   justify-content: center;
   text-align: center;
   padding-top: 30px;
-  .not_found_container{
+
-    display: flex; flex-direction: column;
+  .not_found_container {
+    display: flex;
+    flex-direction: column;
     align-items: center;
     gap: 20px;
-    p{
+
-      color: #6A7287;
+    p {
+      color: var(--value);
       font-size: 17px;
     }
-    h3{
+
+    h3 {
       font-weight: 900;
     }
-    .not_found_button{
+
+    .not_found_button {
       @include Flex;
       width: 240px;
-      padding: 24px 22px ;
+      padding: 24px 22px;
       background: var(--primary);
       color: var(--white);
       border: none;
       transition: ease-in-out .3s;
-      &:hover{
+
+      &:hover {
         transform: scale(1.05);
         background: var(--primary);
         color: var(--white);

src/Styles/App/Varibils.scss

@@ -5,10 +5,12 @@
   --text: #202C4B;
   --subtext: #9d9d9d;
   --label: #0d5190;
+  --value: #6A7287;
   --bg: rgb(255, 255, 255);
   --bg2: #f4f7fe;
   --bg3: rgba(255, 255, 255, 0.82);
   --border-color: #b0d9ff;
+  --border-color-2: #E9EDF4;
   --shadow: rgba(0, 0, 0, 0.15);
   --white: white;
   --bgSideBar: #0f0c1c;
@@ -36,5 +38,4 @@
   --borderColor: #ffffff91;
   --opacity: #bcbcbc;
   --fieldHeight: 40px;
-}
+}
-

src/Styles/DataTable/SearchField.scss

@@ -4,17 +4,20 @@
   border-radius: 8px;
   width: 280px;
   direction: ltr;
-  color: #6a7287b2;
+  color: var(--value)b2;
 }
+
 .NavBar {
   .search-header {
     color: var(--white) !important;
     background-color: inherit;
     border-radius: 8px;
     border: 1px solid var(--borderColor);
-    svg{
+
+    svg {
       font-size: 24px;
     }
+
     input {
       color: #fff !important;
       text-align: end;
@@ -22,6 +25,7 @@
     }
   }
 }
+
 .search-header {
   display: flex;
   align-items: center;
@@ -49,6 +53,7 @@
   outline: none;
   border: none;
   position: relative;
+
   .search__input_text {
     color: var(--white);
     position: absolute;
@@ -57,6 +62,7 @@
     font-size: 30px;
     width: 100px !important;
   }
+
   font-weight: normal;
 }
 
@@ -76,6 +82,7 @@
   direction: rtl;
   scroll-behavior: smooth;
   scroll-padding: 10rem;
+
   &::-webkit-scrollbar {
     width: 10px;
   }
@@ -83,19 +90,23 @@
   /* Handle */
   &::-webkit-scrollbar-thumb {
     background-color: transparent;
-    border-radius: 5px; /* Adjust border-radius as needed */
+    border-radius: 5px;
+    /* Adjust border-radius as needed */
   }
 
   /* Track */
   &::-webkit-scrollbar-track {
-    border-radius: 5px; /* Adjust border-radius as needed */
+    border-radius: 5px;
-    background-color: transparent; /* Set to desired background color */
+    /* Adjust border-radius as needed */
+    background-color: transparent;
+    /* Set to desired background color */
   }
 }
 
 @mixin CustomScrollbar($color) {
   scroll-behavior: smooth;
   scroll-padding: 10rem;
+
   &::-webkit-scrollbar {
     width: 10px;
   }
@@ -103,13 +114,16 @@
   /* Handle */
   &::-webkit-scrollbar-thumb {
     background-color: $color;
-    border-radius: 5px; /* Adjust border-radius as needed */
+    border-radius: 5px;
+    /* Adjust border-radius as needed */
   }
 
   /* Track */
   &::-webkit-scrollbar-track {
-    border-radius: 5px; /* Adjust border-radius as needed */
+    border-radius: 5px;
-    background-color: transparent; /* Set to desired background color */
+    /* Adjust border-radius as needed */
+    background-color: transparent;
+    /* Set to desired background color */
   }
 }
 
@@ -157,4 +171,4 @@
       }
     }
   }
-}
+}

src/Styles/Layout/FilterLayout.scss

@@ -3,13 +3,15 @@
   border-radius: 10px 10px 0 0;
   box-shadow: 0px 0px 32px 2px #080F3414;
 
-  > div {
+  >div {
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .filter_and_order_by {
       display: flex;
       gap: 10px;
+
       .filter_button {
         display: flex;
         justify-content: space-between;
@@ -21,41 +23,51 @@
         border: 1px solid var(--opacity) !important;
         transition: ease-in-out 0.4s;
         cursor: pointer;
+
         &:hover {
           background: var(--bg4);
         }
+
         svg {
           font-size: 25px;
         }
       }
     }
+
     span {
       display: flex;
       align-items: center;
-      color: #6A7287;
+      color: var(--value);
+
       .pagination_select,
       .order_by_select,
       .filter_modal_select {
         border: 1px solid var(--opacity);
         border-radius: 10px;
+
         .addition_select_icon {
           font-size: 25px;
         }
-        div{
+
-          color: #6A7287;
+        div {
+          color: var(--value);
         }
       }
+
       p {
         padding-inline: 10px;
       }
     }
   }
+
   .search-field {
     border: 1px solid rgba(0, 0, 0, 0.1);
-    .search__input{
+
+    .search__input {
       width: 90%;
-      text-align: end ;  
+      text-align: end;
     }
+
     .search__icon {
       color: var(--primary);
     }
@@ -64,16 +76,12 @@
 
 .pagination_column,
 .order_by_filter {
-  .ant-select-outlined:not(.ant-select-disabled):not(
+
-      .ant-select-customize-input
+  .ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector,
-    ):not(.ant-pagination-size-changer):hover
+  .ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector {
-    .ant-select-selector,
-  .ant-select-outlined:not(.ant-select-disabled):not(
-      .ant-select-customize-input
-    ):not(.ant-pagination-size-changer):hover
-    .ant-select-selector {
     transition: ease-in-out 0.4s !important;
     cursor: pointer !important;
+
     &:hover {
       background: var(--bg4) !important;
     }
@@ -86,6 +94,7 @@
 }
 
 @media screen and (max-width: 800px) {
+
   .filter_modal_add_button,
   .filter_modal_cancel_button {
     font-size: 8px !important;
@@ -93,6 +102,6 @@
 }
 
 
-.model_sub_children{
+.model_sub_children {
   padding-bottom: 30px;
 }

src/Styles/Layout/PageHeader.scss

@@ -1,12 +1,15 @@
 .page_header {
   margin-bottom: 0px !important;
+
   .page_header_links {
     display: flex;
     flex-direction: column;
+
     .page_title {
       font-weight: bolder;
       font-size: 24px;
     }
+
     .page_links {
       color: var(--opacity);
       display: flex;
@@ -17,24 +20,25 @@
 }
 
 .filter_header_top {
-  h4{
+  h4 {
     color: var(--secondary);
-    font-weight:600;
+    font-weight: 600;
     font-size: 18px;
   }
 }
 
 
-.PageTitle{
+.PageTitle {
   display: flex;
-    gap: 10px;
+  gap: 10px;
-    margin-block: 10px;
+  margin-block: 10px;
-    .PageTitleItems{
+
-      cursor: pointer;
+  .PageTitleItems {
-      color: #6A7287;
+    cursor: pointer;
-    }
+    color: var(--value);
+  }
 }
 
-.PageTitleLastItem{
+.PageTitleLastItem {
   color: #202C4B !important;
 }

src/Styles/Pages/InfoCard.scss

@@ -28,7 +28,7 @@
     padding: 20px 15px;
 
     p {
-        color: #6A7287;
+        color: var(--value);
     }
 
     .info_card_header {
@@ -68,7 +68,8 @@
                 font-size: 20px;
             }
         }
-        .info_card_button{
+
+        .info_card_button {
             background: var(--primary);
             color: var(--white);
             padding: 25px 0px;
@@ -80,15 +81,18 @@
 
 .address_card {
     margin-block: 30px;
+
     .address_card_body {
         display: flex;
-         flex-direction: column;
+        flex-direction: column;
         align-items: center;
-        div{
+
+        div {
             margin-block: 20px;
             gap: 15px;
             display: flex !important;
         }
+
         svg {
             @include Flex;
             border-radius: 5px;
@@ -99,8 +103,9 @@
         }
     }
 }
-.tab_icon{
+
-    font-size: 30px ;
+.tab_icon {
+    font-size: 30px;
 }
 
 @media screen and (max-width:1250px) {
@@ -131,32 +136,41 @@
             .student_table {
                 width: 100%;
             }
-            .reseller_info{
+
-                display: flex; flex-wrap: wrap;
+            .reseller_info {
+                display: flex;
+                flex-wrap: wrap;
+
                 .address_card,
                 .attachments_card,
-                .info_card{
+                .info_card {
                     width: 45%;
-                    div{
+
-                        span{
+                    div {
+                        span {
                             font-size: 1.6vw !important;
                         }
-                        h4{
+
+                        h4 {
                             font-size: 1.8vw;
                         }
-                        h2{
+
+                        h2 {
                             font-size: 1.6vw !important;
                         }
-                        h6{
+
-                            font-size: 1.6vw !important; 
+                        h6 {
+                            font-size: 1.6vw !important;
                         }
-                        p{
+
+                        p {
                             font-size: 1.6vw !important;
                         }
                     }
                 }
+
                 .address_card,
-                .attachments_card{
+                .attachments_card {
                     max-height: 40vh !important;
                 }
             }

src/Styles/Pages/collections.scss

@@ -0,0 +1,26 @@
+.collection_infos {
+    margin-block: 20px;
+    display: flex;justify-content: space-between;
+    gap: 5px;
+    .collection_info_card {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        width: 15vw;
+        padding: 1.2vw 1.2vw;
+        box-shadow: 0px 0px 32px 0px #080F3414;
+        border: 1px solid var(--border-color-2) !important;
+        border-radius: 8px;
+        gap: 10px;
+        h5{
+            color: var(--secondary);
+            font-size: 1vw;
+            font-weight: bold;
+        }
+        p{
+            font-size: .9vw ;
+            color: var(--value);
+        }
+    }
+
+}

src/Styles/Pages/index.scss

@@ -12,4 +12,5 @@
 @import './reSeller.scss';
 @import './InfoCard.scss';
 @import './notifications.scss';
-@import './profile.scss';
+@import './profile.scss';
+@import './collections.scss'

src/Styles/Pages/notifications.scss

@@ -1,52 +1,68 @@
-.notification_container{
+.notification_container {
-    display: flex; flex-direction: column;
+    display: flex;
+    flex-direction: column;
     width: 96%;
     margin-inline: auto;
-    padding: 30px 20px ;
+    padding: 30px 20px;
     margin-block: 20px 50px;
     box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
     border: 1.5px solid #E9EDF4;
     border-radius: 10px;
     background: #fff;
-    .notification_header{
+
-        display: flex;align-items: center;justify-content: space-between;
+    .notification_header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         padding-inline: 20px;
-        h4{
+
+        h4 {
             color: var(--secondary);
         }
     }
-    .notification_body{
+
-        display: flex; flex-direction: column;
+    .notification_body {
+        display: flex;
+        flex-direction: column;
         justify-content: center;
-        padding-inline: 10px ;
+        padding-inline: 10px;
         gap: 30px;
-        .notification_card{
+
-            display: flex; justify-content: space-between;
+        .notification_card {
+            display: flex;
+            justify-content: space-between;
             padding: 20px 20px;
             @include Shadow;
             border: 2px solid #E9EDF4;
             border-radius: 10px;
             background: #fff;
             cursor: pointer;
-            >div{
+
-                display: flex;align-items: center;
+            >div {
+                display: flex;
+                align-items: center;
                 gap: 14px;
-                h5{
+
+                h5 {
                     color: var(--secondary);
                 }
-                img{
+
+                img {
                     width: 70px;
                 }
-                p{
+
+                p {
                     margin-top: 12px;
-                    color: #6A7287;
+                    color: var(--value);
                 }
-                .trash_button{
+
+                .trash_button {
                     visibility: hidden;
                 }
             }
-            &:hover{
+
-                .trash_button{
+            &:hover {
+                .trash_button {
                     visibility: visible;
                 }
             }
@@ -55,16 +71,18 @@
 }
 
 
-.trash_button{
+.trash_button {
     background: #E93553;
     @include Flex;
     color: var(--white);
-    padding: 20px 23px ;
+    padding: 20px 23px;
     border: none !important;
-    svg{
+
+    svg {
         font-size: 22px;
     }
-    &:hover{
+
+    &:hover {
         background: #E93553 !important;
         color: var(--white) !important;
         border: none !important;

src/api/collections.ts

@@ -0,0 +1,10 @@
+import useGetQuery from "./helper/useGetQuery";
+
+const API = {
+  GET: "/collections",
+};
+
+const KEY = "collections";
+
+export const useGetAllSales = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);

src/api/sales.ts

@@ -0,0 +1,15 @@
+import useAddMutation from "./helper/useAddMutation";
+import useGetQuery from "./helper/useGetQuery";
+
+const API = {
+  GET: "/sales",
+  ADD: "/sales",
+  DELETE: "/sales",
+  UPDATE: "/sales",
+};
+
+const KEY = "sales";
+
+export const useGetAllSales = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddSales = () => useAddMutation(KEY, API.ADD);

src/enums/Model.ts

@@ -206,8 +206,13 @@ export enum ModalEnum {
   QUESTION_BANK_DELETE = "QuestionBank.delete",
 
   /// permission
+
   PERMISSION_EDIT = "PERMISSION.edit",
   PERMISSION_ADD = "PERMISSION.add",
   PERMISSION_DELETE = "PERMISSION.delete",
   
+
+  /// sales
+
+  Sales_ADD = "Sales.add",
 }

src/enums/abilities.ts

@@ -52,6 +52,10 @@ export enum ABILITIES_ENUM {
   PROFILE = "profile",
   PERMISSIONS = "permissions",
   MANAGERS = "managers",
+  NOTIFICATIONS_RE_SELLER = "notification_re_seller" ,
+  Profile_RE_SELLER = "profile_re_seller" ,
+  Sales = "sales",
+  Collections = "collections"
 
   ////
 }

src/faker/item.ts

@@ -0,0 +1,7 @@
+export const CollectionData = [
+    {label:"إجمالي المبيعات",value:"2.000.000"},
+    {label:"نسبة الأرباح (10%)",value:"2.000.000"},
+    {label:"المستحقات",value:"2.000.000"},
+    {label:"تم تحصيله",value:"2.000.000"},
+    {label:"المتبقي",value:"2.000.000"},
+  ]

src/translate/ar.json

@@ -140,6 +140,7 @@
     "change": "تغيير",
     "role_list": "قائمة الأدوار",
     "managers":"مدراء",
+    "sales":"المبيعات",
     "hide_hint":"اخفاء الشرح",
     "show_hint":"عرض الشرح"
   },
@@ -282,7 +283,8 @@
     "id_photo": "صورة الهوية",
     "sorry_something_went_wrong": "عفوا ، حدث خطأ ما",
     "error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist": "خطأ 404 لم يتم العثور على الصفحة. عذرا الصفحة التي تبحث عنها غير موجودة ",
-    "return_to_the_dashboard": "العودة إلى لوحة القيادة"
+    "return_to_the_dashboard": "العودة إلى لوحة القيادة",
+    "save_changes":"حفظ التغييرات"
   },
   "Table": {
     "header": "",
@@ -359,7 +361,9 @@
     "role_details": "تفاصيل الأدوار",
     "created_at": "تم إنشاؤه في",
     "managers":"مدراء",
-    "manager":"مدير"
+    "manager":"مدير",
+    "sale":"عملية بيع",
+    "collections": "التحصيلات"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -485,7 +489,9 @@
     "current_password": "كلمة المرور الحالية",
     "created_at": "تم إنشاؤه في",
     "empty":"",
-    "role":"الدور"
+    "role":"الدور",
+    "submit_password":"تأكيد كلمة المرور",
+    "join_date":"تاريخ الانضمام"
   },
   "select": {
     "enums": {
@@ -818,7 +824,9 @@
     "notifications": "الإشعارات",
     "profile": "الملف الشخصي",
     "users":"المستخدمون",
-    "managers":"مدراء"
+    "managers":"مدراء",
+    "sales":"المبيعات",
+    "collections": "التحصيلات"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -860,7 +868,10 @@
     "profile": "الملف الشخصي",
     "permissions":"اذونات",
     "managers":"مدراء",
-    "add_manager":"إضافة مدير"
+    "add_manager":"إضافة مدير",
+    "collections": "التحصيلات",
+    "sales":"المبيعات",
+    "edit_manager":"تعديل مدير"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -904,7 +915,9 @@
     "profile": "الملف الشخصي",
     "user": "مستخدم",
     "permissions":"اذونات",
-    "managers":"مدراء"
+    "managers":"مدراء",
+    "collections": "التحصيلات",
+    "sales":"المبيعات"
   },
   "table": {
     "student": "قائمة الطلاب",
@@ -913,7 +926,9 @@
     "subjects": "مواد الصف",
     "QuestionBank": "بنك الأسئلة",
     "managers":"مدراء",
-    "managers_list":"قائمة المدراء"
+    "managers_list":"قائمة المدراء",
+    "sales":"المبيعات",
+    "collections": "التحصيلات"
   },
   "alphabet": {
     "A": "A",

src/types/Item.ts

@@ -354,4 +354,20 @@ type student = {
   first_name:string;
   last_name:string;
   sex:string
-}
+}
+
+
+export type Sales = {
+  id: number;
+  student: student;
+  expiration_date: string;
+  activation_date: string;
+};
+
+
+export type Collection = {
+  id: number;
+  student: student;
+  expiration_date: string;
+  activation_date: string;
+};

src/utils/hasAbilityFn.ts

@@ -719,3 +719,20 @@ export const canShowQuestionBank = hasAbility(
   ABILITIES_ENUM.QUESTION_BANK,
   ABILITIES_VALUES_ENUM.SHOW,
 );
+
+
+/// User
+
+export const canAddSales = hasAbility(
+  ABILITIES_ENUM.Sales,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+
+export const canEditSales = hasAbility(
+  ABILITIES_ENUM.Sales,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeleteSales = hasAbility(
+  ABILITIES_ENUM.Sales,
+  ABILITIES_VALUES_ENUM.DELETE,
+);