show reseller page

src/Components/Cards/AddressCard.tsx

@@ -0,0 +1,28 @@
+import { Divider } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { RxHome } from "react-icons/rx";
+
+const AddressCard = ({ data }: { data: any }) => {
+  const { t } = useTranslation();
+  return (
+    <div className='address_card'>
+      <h5>{t("practical.address")}</h5>
+      <Divider />
+      <div className="address_card_body">
+        {data?.map((address:any)=>(
+          <div>
+            <RxHome />
+            <span>
+              <h6>{t(`practical.${address?.key}`)}</h6>
+              <p>{address?.value}</p>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default AddressCard
+
+

src/Components/Cards/AttachmentsCard.tsx

@@ -0,0 +1,24 @@
+import { Divider } from 'antd';
+import { useTranslation } from 'react-i18next'
+import ImageBoxField from '../CustomFields/ImageBoxField/ImageBoxField';
+
+const AttachmentsCard = ({data}:{data?:any}) => {
+    const {t} = useTranslation();
+
+  return (
+    <div className='attachments_card'>
+        <h5>{t("practical.address")}</h5>
+        <Divider />
+        <div className='attachments_body'>
+            <h5>{t("practical.id_photo")}</h5>
+            {/* {data?.map((address:any)=>( */}
+            <span>
+                <ImageBoxField name="image"  />
+            </span>
+            {/* ))} */}
+        </div>
+    </div>
+  )
+}
+
+export default AttachmentsCard

src/Components/Cards/InfoCard.tsx

@@ -0,0 +1,39 @@
+import { Button, Divider } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { canAddReSeller } from '../../utils/hasAbilityFn';
+
+const InfoCard = ({ data, name, status,withButton = false,handleClick}:{ data:any, name:any, status:any,withButton?:boolean,handleClick?:() => void}) => {
+    const {t} = useTranslation();
+
+    return (
+        <div className='info_card'>
+            <div className="info_card_header">
+                <img src="/Image/faker_user.png " alt="" />
+                <div className="student_name_and_sub">
+                    <span>{status}</span>
+                    <h2>{name}</h2>
+                </div>
+            </div>
+            <Divider />
+            <div className="info_card_body">
+                {data?.map((student: any) => (
+                    <span>
+                        <h4>{student?.key}</h4>
+                        <p>{student?.value}</p>
+                    </span>
+                ))}
+                {withButton ? 
+                canAddReSeller &&
+                <Button onClick={handleClick} className='info_card_button'>
+                    {t("practical.collecting_an_amount")}
+                </Button>
+                : ""}
+            </div>
+            
+        </div>
+    )
+}
+
+export default InfoCard
+
+

src/Components/Cards/ParamInfo.ts

@@ -0,0 +1,27 @@
+export const StudentParamInfo = [
+    {key:"الحنس" , value:"male"},
+    {key:"sex" , value:"male"},
+    {key:"sex" , value:"male"},
+    {key:"sex" , value:"male"},
+    {key:"sex" , value:"male"},
+    {key:"sex" , value:"male"}
+]
+
+export const ReSellerParamInfo = [
+    {key:"رقم الهوية" , value:"12i9128921019"},
+    {key:"تاريخ الإضافة", value:"1/10/2010"},
+    {key:"تاريخ الإضافة", value:"1/10/2010"},
+    {key:"تاريخ الإضافة", value:"1/10/2010"},
+    {key:"تاريخ الإضافة", value:"1/10/2010"},
+    {key:"تاريخ الإضافة", value:"1/10/2010"},
+    {key:"تاريخ الإضافة", value:"1/10/2010"},
+]
+
+export const StudentAddressInfo = [
+    {key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
+]
+
+export const ReSellerAddressInfo = [
+    {key:"governorate" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
+    {key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
+]

src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx

@@ -10,7 +10,7 @@ import { generateImagePreview } from "./generateImagePreview";
 
 const ImageBoxField = ({ name }: any) => {
   const formik = useFormikContext<any>();
-  const value = getNestedValue(formik.values, name);
+  const value = getNestedValue(formik?.values, name);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 

src/Components/student/AddressCard.tsx

@@ -1,24 +0,0 @@
-import { Divider } from 'antd'
-import { useTranslation } from 'react-i18next'
-import { RxHome } from "react-icons/rx";
-
-const StudentAddressCard = ({address}:{address:string}) => {
-    const {t} = useTranslation();
-  return (
-    <div className='student_address_card'>
-        <h5>{t("practical.address")}</h5>
-        <Divider/>
-        <div className="student_address_card_body">
-            <RxHome/>
-            <span>
-                <h6>{t("practical.address")}</h6>
-                <p>{address}</p>
-            </span>
-        </div>
-    </div>
-  )
-}
-
-export default StudentAddressCard
-
-

src/Components/student/StudentInfoCard.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { studentParamInfo } from './StudentParam'
-import { Divider } from 'antd'
-
-const StudentInfoCard = ({data,name,status}:any) => {
-  return (
-    <div className='student_info_card'>
-        <div className="student_info_card_header">
-            <img src="/Image/faker_user.png " alt="" />
-            <div className="student_name_and_sub">
-                <span>{status}</span>
-                <h2>{name}</h2>
-            </div>
-        </div>
-        <Divider/>
-        <div className="student_info_card_body">
-            {data?.map((student:any)=>(
-                <span>
-                    <h4>{student?.key}</h4>
-                    <p>{student?.value}</p>
-                </span>
-            ))}
-        </div>
-    </div>
-  )
-}
-
-export default StudentInfoCard
-
-

src/Components/student/StudentParam.ts

@@ -1,8 +0,0 @@
-export const studentParamInfo = [
-    {key:"الحنس" , value:"male"},
-    {key:"sex" , value:"male"},
-    {key:"sex" , value:"male"},
-    {key:"sex" , value:"male"},
-    {key:"sex" , value:"male"},
-    {key:"sex" , value:"male"}
-]

src/Pages/Admin/Reseller/Page.tsx

@@ -1,13 +1,9 @@
-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 {
-  canAddReport,
   canAddReSeller,
-  canAddTags,
 } from "../../../utils/hasAbilityFn";
 import useSetPageTitle from "../../../Hooks/useSetPageTitle";
 import { useDeleteTag } from "../../../api/tags";

src/Pages/Admin/Reseller/show/Model/AddModel.tsx

@@ -0,0 +1,33 @@
+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 { useAddReseller } from "../../../../../api/reseller";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddReseller();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.RE_SELLER_COLLECTION_ADD}
+        modelTitle="reseller"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;

src/Pages/Admin/Reseller/show/Model/EditModel.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } 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 { useUpdateReseller } from "../../../../../api/reseller";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateReseller();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.RE_SELLER_COLLECTION_EDIT}
+        modelTitle="collection"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;

src/Pages/Admin/Reseller/show/Model/FilterForm.tsx

@@ -1,18 +1,13 @@
-import React from "react";
 import ValidationField from "../../../../../Components/ValidationField/ValidationField";
 import { Col, Row } from "reactstrap";
-import { userTypeOptions } from "../../../../../config/userTypeOptions";
 
 const FilterForm = () => {
   return (
     <div>
       <Row>
         <Col>
-          <ValidationField placeholder="username" label="username" name="username" />
+        <ValidationField placeholder="amount_value" label="amount_value" name="amount_value" />
-          <ValidationField placeholder="phone_number" label="phone_number" name="phone_number" />
+        <ValidationField type="Date" placeholder="date_of_receipt" label="date_of_receipt" name="date_of_receipt" />
-        </Col>
-        <Col>
-          <ValidationField type="Select" option={userTypeOptions} placeholder="type" label="type" name="type" />
         </Col>
       </Row>
     </div>

src/Pages/Admin/Reseller/show/Model/ModelForm.tsx

@@ -0,0 +1,17 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../../Components/ValidationField/ValidationField";
+
+const Form = () => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField placeholder="amount_value" label="amount_value" name="amount_value" />
+        <ValidationField type="Date" placeholder="date_of_receipt" label="date_of_receipt" name="date_of_receipt" />
+        <ValidationField placeholder="description" label="description" name="description" />
+
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;

src/Pages/Admin/Reseller/show/Model/formUtil.ts

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

src/Pages/Admin/Reseller/show/Page.tsx

@@ -1,38 +1,66 @@
 import { useTranslation } from "react-i18next";
-import { Suspense } from "react";
+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 InfoCard from "../../../../Components/Cards/InfoCard";
-import FilterForm from "./Model/FilterForm";
+import AddressCard from "../../../../Components/Cards/AddressCard";
-import StudentInfoCard from "../../../../Components/student/StudentInfoCard";
+import { ReSellerAddressInfo, ReSellerParamInfo } from "../../../../Components/Cards/ParamInfo";
-import StudentAddressCard from "../../../../Components/student/AddressCard";
+import StudentTabs from "./ReSellerTabs";
-import { studentParamInfo } from "../../../../Components/student/StudentParam";
+import { useParams } from "react-router-dom";
-import StudentTabs from "./StudentTabs";
+import { ParamsEnum } from "../../../../enums/params";
+import AttachmentsCard from "../../../../Components/Cards/AttachmentsCard";
+import { ModalEnum } from "../../../../enums/Model";
+import { useDeleteReseller } from "../../../../api/reseller";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import useModalHandler from "../../../../utils/useModalHandler";
+const DeleteModalForm = lazy(
+  () => import("../../../../Layout/Dashboard/DeleteModels"),);
+  const EditModalForm = lazy(() => import("./Model/EditModel"));
+  const AddModalForm = lazy(() => import("./Model/AddModel"));
 
 const TableHeader = () => {
   const [t] = useTranslation();
-  useSetPageTitle(
+  const { re_seller_id } = useParams<ParamsEnum>()
-    t(`page_header.users`) +
+
-    "/ " +
+  useSetPageTitle([
-    t(`PageTitle.students`)
+    { name: `${t(`page_header.home`)}`, path: "/" },
-    +
+    { name: `${t(`page_header.reseller`)}`, path: "reseller" },
-    " / " +
+    { name: `${t(`page_header.reseller_details`)}`, path: `reseller/${re_seller_id}` },
-    t(`PageTitle.students_details`),
+  ]);
-  );
+  const { handel_open_model } = useModalHandler();
+
+  const handleOpenModel = () =>{
+    handel_open_model(ModalEnum?.RE_SELLER_COLLECTION_ADD);
+
+  }
+  const deleteMutation = useDeleteReseller();
+
   return (
     <div className="TableWithHeader single_student">
       <Suspense fallback={<Spin />}>
         <PageHeader
-          pageTitle="users"
+          pageTitle="reseller_details"
         />
         <div className="single_student_body">
           <div className="student_info">
-            <StudentInfoCard data={studentParamInfo} name={"moaz dawalibi"} status={"subs"}/>
+            <InfoCard 
-            <StudentAddressCard address={"adawi tjara dar alshfaa askn akan an aksn akn"}  />
+              withButton={true} 
+              data={ReSellerParamInfo} 
+              name={"moaz dawalibi"} 
+              status={"subs"}
+              handleClick={handleOpenModel} />
+            <AddressCard data={ReSellerAddressInfo} />
+            <AttachmentsCard />
           </div>
           <div className="student_table">
             <StudentTabs />
+            <DeleteModalForm
+              deleteMutation={deleteMutation}
+              ModelEnum={ModalEnum?.RE_SELLER_COLLECTION_DELETE}
+            />
+            <AddModalForm/>
+            <EditModalForm/>
           </div>
 
         </div>

src/Pages/Admin/Reseller/show/ReSellerTabs.tsx

@@ -9,15 +9,16 @@ import { IoStatsChartOutline } from "react-icons/io5";
 import { useGetAllUser } from '../../../../api/user';
 import useSearchQuery from '../../../../api/utils/useSearchQuery';
 import { useFilterState } from '../../../../Components/Utils/Filter/FilterState';
+import { useGetAllReseller } from '../../../../api/reseller';
 
 const Table = lazy(() => import("./Table"));
 
-const StudentTabs = () => {
+const ReSellerTabs = () => {
     const {t} = useTranslation();
 
     const [searchQuery] = useSearchQuery("name");
     const { filterState } = useFilterState();
-    const response = useGetAllUser({
+    const response = useGetAllReseller({
         name: searchQuery,
         pagination: true,
         ...filterState,
@@ -26,26 +27,26 @@ const StudentTabs = () => {
     const items: TabsProps['items'] = [
         {
           key: '1',
-          label: t("practical.quiz"),
+          label: t("practical.sales"),
           icon:<BsQuestionSquare/>,
           children:
           <>
             <FilterLayout
               sub_children={<FilterForm />}
-              filterTitle="sidebar.quiz"
+              filterTitle="practical.sales"
             />
-            <Table response={response}/>
+            <Table response={response} salesTable={true}/>
           </>,
         },
         {
             key: '2',
-            label: t("practical.hightes_quiz"),
+            label: t("practical.collections"),
             icon:<IoStatsChartOutline/>,
             children:
             <>
               <FilterLayout
                 sub_children={<FilterForm />}
-                filterTitle="practical.hightes_quiz"
+                filterTitle="practical.collections"
               />
               <Table response={response}/>
             </>,
@@ -58,4 +59,4 @@ const StudentTabs = () => {
 )
 }
 
-export default StudentTabs
+export default ReSellerTabs

src/Pages/Admin/Reseller/show/Table.tsx

@@ -1,8 +1,14 @@
 import DataTable from "../../../../Layout/Dashboard/Table/DataTable";
 import { useColumns } from "./useTableColumns";
-const App = ({response}:{response:any}) => {
+import { useColumnsCollection } from "./useTableColumnsCollections";
 
+const App = ({salesTable = false ,response}:{salesTable?:boolean,response:any}) => {
+  if (salesTable) {
     return <DataTable response={response} useColumns={useColumns} />;
+  } else {
+    return <DataTable response={response} useColumns={useColumnsCollection} />;
+  }
+  
 };
 
 export default App;

src/Pages/Admin/Reseller/show/useTableColumns.tsx

@@ -1,45 +1,40 @@
 import { TableColumnsType } from "antd";
 import { user } from "../../../../types/Item";
 import { useTranslation } from "react-i18next";
+import { ReSeller } from "../../../../types/ReSeller";
 
 export const useColumns = () => {
   const [t] = useTranslation();
 
-  const columns: TableColumnsType<user> = [
+  const columns: TableColumnsType<ReSeller> = [
     {
-      title: t("columns.quiz_date"),
+      title: t("columns.student_full_name"),
-      dataIndex: "id",
+      dataIndex: "student_full_name",
-      key: "id",
+      key: "student_full_name",
       align: "center",
     },
     {
-      title: t("columns.subject"),
+      title: t("columns.grade"),
-      dataIndex: "username",
+      dataIndex: "grade",
-      key: "username",
+      key: "grade",
       align: "center",
     },
     {
-      title: t("columns.quiz_address"),
+      title: t("columns.package"),
-      dataIndex: "phone_number",
+      dataIndex: "package",
-      key: "phone_number",
+      key: "package",
       align: "center",
     },
     {
-      title: t("columns.created_by"),
+      title: t("columns.amount_paid"),
-      dataIndex: "type",
+      dataIndex: "amount_paid",
-      key: "type",
+      key: "amount_paid",
       align: "center",
     },
     {
-      title: t("columns.creator_name"),
+      title: t("columns.sale_date"),
-      dataIndex: "type",
+      dataIndex: "sale_date",
-      key: "type",
+      key: "sale_date",
-      align: "center",
-    },
-    {
-      title: t("columns.quiz_status"),
-      dataIndex: "type",
-      key: "type",
       align: "center",
     },
   ];

src/Pages/Admin/Reseller/show/useTableColumnsCollections.tsx

@@ -0,0 +1,82 @@
+import { TableColumnsType } from "antd";
+import { useTranslation } from "react-i18next";
+import ActionButtons from "../../../../Components/Table/ActionButtons";
+import { canDeleteReSeller, canEditReSeller, canShowReSeller } from "../../../../utils/hasAbilityFn";
+import { ReSeller } from "../../../../types/ReSeller";
+import useModalHandler from "../../../../utils/useModalHandler";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { ModalEnum } from "../../../../enums/Model";
+
+export const useColumnsCollection = () => {
+  const { handel_open_model } = useModalHandler();
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+
+  const [t] = useTranslation();
+  const handelDelete = (data: ReSeller) => {
+    setObjectToEdit(data);
+    handel_open_model(ModalEnum?.RE_SELLER_DELETE);
+  };
+
+  const handleEdit = (record: ReSeller) => {
+    setObjectToEdit(record);
+    handel_open_model(ModalEnum?.RE_SELLER_EDIT);
+  };
+  const columns: TableColumnsType<ReSeller> = [
+    {
+      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",
+    },
+    {
+      title: t("columns.procedure"),
+      dataIndex: "procedure",
+      key: "procedure",
+      align: "center",
+    },
+    {
+      title: t("columns.procedure"),
+
+      key: "actions",
+      align: "center",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canDeleteReSeller}
+            canEdit={canEditReSeller}
+            index={index}            
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};

src/Pages/Admin/Reseller/useTableColumns.tsx

@@ -1,21 +1,16 @@
 import { TableColumnsType } from "antd";
 import { ReSeller } from "../../../types/ReSeller";
-import { FaPlus } from "react-icons/fa";
 import useModalHandler from "../../../utils/useModalHandler";
 import { ModalEnum } from "../../../enums/Model";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
-import { ABILITIES_ENUM } from "../../../enums/abilities";
 import { useNavigate } from "react-router-dom";
 import {
-  canAddReSeller,
   canDeleteReSeller,
   canEditReSeller,
   canShowReSeller,
-  canShowStudent,
 } from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
-import ColumnsImage from "../../../Components/Columns/ColumnsImage";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -68,8 +63,7 @@ export const useColumns = () => {
       render: (_text, record) => record?.user?.username,
     },
     {
-      title: "",
+      title: t("columns.procedure"),
-
       key: "actions",
       align: "center",
       render: (_text, record, index) => {

src/Pages/Admin/Student/show/Page.tsx

@@ -5,21 +5,23 @@ import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
 import PageHeader from "../../../../Layout/Dashboard/PageHeader";
 import FilterLayout from "../../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Model/FilterForm";
-import StudentInfoCard from "../../../../Components/student/StudentInfoCard";
+import InfoCard from "../../../../Components/Cards/InfoCard";
-import StudentAddressCard from "../../../../Components/student/AddressCard";
+import AddressCard from "../../../../Components/Cards/AddressCard";
-import { studentParamInfo } from "../../../../Components/student/StudentParam";
+import { StudentAddressInfo, StudentParamInfo } from "../../../../Components/Cards/ParamInfo";
 import StudentTabs from "./StudentTabs";
+import { useParams } from "react-router-dom";
+import { ParamsEnum } from "../../../../enums/params";
 
 const TableHeader = () => {
   const [t] = useTranslation();
-  useSetPageTitle(
+  const {student_id} = useParams<ParamsEnum>();
-    t(`page_header.users`) +
+  
-    "/ " +
+  useSetPageTitle([
-    t(`PageTitle.students`)
+    { name: `${t(`page_header.users`)}`, path: "/" },
-    +
+    { name: `${t(`PageTitle.students`)}`, path: "students" },
-    " / " +
+    { name: `${t(`PageTitle.students_details`)}`, path: `reseller/${student_id}` },
-    t(`PageTitle.students_details`),
+  ]);
-  );
+
   return (
     <div className="TableWithHeader single_student">
       <Suspense fallback={<Spin />}>
@@ -28,8 +30,8 @@ const TableHeader = () => {
         />
         <div className="single_student_body">
           <div className="student_info">
-            <StudentInfoCard data={studentParamInfo} name={"moaz dawalibi"} status={"subs"}/>
+            <InfoCard data={StudentParamInfo} name={"moaz dawalibi"} status={"subs"} />
-            <StudentAddressCard address={"adawi tjara dar alshfaa askn akan an aksn akn"}  />
+            <AddressCard data={StudentAddressInfo} />
           </div>
           <div className="student_table">
             <StudentTabs />

src/Pages/Admin/Student/useTableColumns.tsx

@@ -1,13 +1,11 @@
 import { TableColumnsType } from "antd";
 import { Student } from "../../../types/Student";
-import { FaPlus } from "react-icons/fa";
 import useModalHandler from "../../../utils/useModalHandler";
 import { ModalEnum } from "../../../enums/Model";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
-  canAddStudent,
   canDeleteStudent,
   canEditStudent,
   canShowStudent,

src/Routes.tsx

@@ -222,7 +222,7 @@ export const CrudRoute: TCrudRoute[] = [
   {
     header: "page_header.edit_reseller",
     element: <EditReSeller />,
-    path: `/${ABILITIES_ENUM?.RE_SELLER}/:id`,
+    path: `/${ABILITIES_ENUM?.RE_SELLER}/:${ParamsEnum?.RE_SELLER_ID}/edit`,
     abilities: ABILITIES_ENUM?.RE_SELLER,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
@@ -230,7 +230,7 @@ export const CrudRoute: TCrudRoute[] = [
   {
     header: "page_header.reSeller",
     element: <ShowReSeller />,
-    path: `/${ABILITIES_ENUM?.RE_SELLER}/:id`,
+    path: `/${ABILITIES_ENUM?.RE_SELLER}/:${ParamsEnum?.RE_SELLER_ID}`,
     abilities: ABILITIES_ENUM?.RE_SELLER,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
@@ -238,7 +238,7 @@ export const CrudRoute: TCrudRoute[] = [
   {
     header: "page_header.student",
     element: <ShowStudent />,
-    path: `/${ABILITIES_ENUM?.STUDENT}/:id`,
+    path: `/${ABILITIES_ENUM?.STUDENT}/:${ParamsEnum?.STUDENT_ID}`,
     abilities: ABILITIES_ENUM?.STUDENT,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,

src/Styles/Pages/InfoCard.scss

@@ -0,0 +1,134 @@
+.single_student {
+    display: flex;
+
+    .single_student_body {
+        display: flex;
+        width: 100%;
+
+        .student_info {
+            width: 32%;
+        }
+
+        .student_table {
+            width: 68%;
+        }
+    }
+}
+
+
+
+
+
+.info_card,
+.address_card,
+.attachments_card {
+    width: 24vw;
+    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 20px 15px;
+
+    p {
+        color: #6A7287;
+    }
+
+    .info_card_header {
+        display: flex;
+        gap: 10px;
+
+        img {
+            width: 24%;
+        }
+
+        .student_name_and_sub {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            span {
+                color: greenyellow;
+            }
+
+            h2 {
+                font-size: 22px;
+            }
+        }
+    }
+
+    .info_card_body {
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+
+        span {
+            display: flex;
+            justify-content: space-between;
+
+            h4 {
+                color: #202C4B;
+                font-size: 20px;
+            }
+        }
+        .info_card_button{
+            background: var(--primary);
+            color: var(--white);
+            padding: 25px 0px;
+            border-radius: 9px;
+        }
+    }
+}
+
+
+.address_card {
+    margin-block: 30px;
+    .address_card_body {
+        display: flex;
+         flex-direction: column;
+        align-items: center;
+        div{
+            margin-block: 20px;
+            gap: 15px;
+            display: flex !important;
+        }
+        svg {
+            @include Flex;
+            border-radius: 5px;
+            background: #F2F4F8;
+            width: 40px;
+            height: 40px;
+            padding: 7px;
+        }
+    }
+}
+
+
+@media screen and (max-width:1250px) {
+    .single_student {
+        display: flex;
+
+        .single_student_body {
+            display: flex;
+            flex-direction: column !important;
+            width: 100%;
+
+            .student_info {
+                display: flex;
+                width: 100%;
+                gap: 20px;
+
+                .address_card {
+                    width: 50%;
+                    margin-block: 0 !important;
+                    max-height: 17vw;
+                }
+
+                .info_card {
+                    width: 50%;
+                }
+            }
+
+            .student_table {
+                width: 100%;
+            }
+        }
+    }
+}

src/Styles/Pages/StudentInfoCard.scss

@@ -1,100 +0,0 @@
-.single_student{
-    display: flex;
-    .single_student_body{
-        display: flex;
-        width: 100%;
-        .student_info{
-            width: 32%;
-        }
-        .student_table{
-            width: 68%;
-        }
-    }
-}
-
-
-
-
-
-.student_info_card,
-.student_address_card{
-    width: 24vw;
-    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 20px 15px ;
-    p{
-        color: #6A7287;
-    }
-    .student_info_card_header{
-        display: flex;
-        gap: 10px;
-        img{
-            width: 24%;
-        }
-        .student_name_and_sub{
-            display: flex; flex-direction: column;justify-content: center;
-            span{
-                color: greenyellow;
-            }
-            h2{
-                font-size: 22px;
-            }
-        }
-    }
-    .student_info_card_body{
-        display: flex; flex-direction: column;
-        gap: 30px;
-        span{
-            display: flex;justify-content: space-between;
-            h4{
-                color: #202C4B;
-                font-size: 20px;
-            } 
-        }
-    }
-}
-
-
-.student_address_card{   
-    margin-top: 30px;
-    .student_address_card_body{
-        display: flex;align-items: center;
-        gap: 15px;
-        svg{
-            @include Flex;
-            border-radius: 5px;
-            background: #F2F4F8;
-            width: 40px;height: 40px;
-            padding: 7px;
-        }
-    }
-}
-
-
-
-
-@media screen and (max-width:1250px) {
-    .single_student{
-        display: flex;
-        .single_student_body{
-            display: flex;flex-direction: column !important;
-            width: 100%;
-            .student_info{
-                display: flex;
-                width: 100%;
-                gap: 20px;
-                .student_address_card{
-                    width: 50%;
-                    margin-top: 0 !important;
-                    max-height: 17vw ;
-                }
-                .student_info_card{
-                    width: 50%;
-                }
-            }
-            .student_table{
-                width: 100%;
-            }
-        }
-    }
-}

src/Styles/Pages/index.scss

@@ -10,4 +10,4 @@
 @import "./Marks.scss";
 @import "./exercise.scss";
 @import './reSeller.scss';
-@import './StudentInfoCard.scss';
+@import './InfoCard.scss';

src/enums/Model.ts

@@ -176,6 +176,11 @@ export enum ModalEnum {
   RE_SELLER_ADD = "ReSeller.add",
   RE_SELLER_DELETE = "ReSeller.delete",
 
+  /// ReSeller
+  RE_SELLER_COLLECTION_EDIT = "ReSeller.edit",
+  RE_SELLER_COLLECTION_ADD = "ReSeller.add",
+  RE_SELLER_COLLECTION_DELETE = "ReSeller.delete",
+
   /// Param
   Param_EDIT = "Param.edit",
   Param_ADD = "Param.add",

src/enums/params.ts

@@ -11,4 +11,5 @@ export enum ParamsEnum {
   LESSON_ID = "lesson_id",
   QUESTION_ID = "question_id",
   CHILDREN_QUESTION_ID = "children_question_id",
+  RE_SELLER_ID = "re_seller_id",
 }

src/translate/ar.json

@@ -192,7 +192,16 @@
     "base_question": " تمرين متعدد ",
     "normal_question": " تمرين عادي",
     "hint":"شرح ",
-    "tags":"كلمات مفتاحية"
+    "tags":"كلمات مفتاحية",
+    "student_full_name":"اسم الطالب الثلاثي",
+    "amount_paid":"المبلغ المدفوع",
+    "sale_date":"تاريخ البيع",
+    "grade":"الصف",
+    "package":"حزمة",
+    "ID":"ID",
+    "residual":"المتبقي",
+    "date_of_receipt":"تاريخ الاستلام",
+    "amount":"مبلغ"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -242,7 +251,12 @@
     "Abbreviations": "الاختصارات",
     "address":"العنوان",
     "quiz":"الاختبارات",
-    "hightes_quiz":"اعلى اختبار"
+    "hightes_quiz":"اعلى اختبار",
+    "sales":"المبيعات",
+    "collections":"التحصيلات",
+    "collecting_an_amount":"تحصيل مبلغ",
+    "governorate":"المحافظة",
+    "id_photo":"صورة الهوية"
   },
   "Table": {
     "header": "",
@@ -313,7 +327,8 @@
     "user_details": "تفاصيل المستخدم",
     "reseller_details": "تفاصيل اعادة البيع",
     "reseller": "البائعين",
-    "student_package": "حزمة الطالب"
+    "student_package": "حزمة الطالب",
+    "collection":"تحصيل"
     },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -428,7 +443,9 @@
     "Seller Percentage": "نسبة البائع",
     "city": "المحافظة",
     "personal_image": "صورة شخصية",
-    "id_image": "صورة الهوية"
+    "id_image": "صورة الهوية",
+    "date_of_receipt":"تاريخ الاستلام",
+    "amount_value":"قيمة المبلغ"
   },
   "select": {
     "enums": {
@@ -795,7 +812,8 @@
     "report": "تقرير",
     "tags": "كلمات مفتاحية",
     "reseller":"البائعين",
-    "QuestionBank":"بنك الأسئلة"
+    "QuestionBank":"بنك الأسئلة",
+    "reseller_details":"تفاصيل البائع"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -833,7 +851,8 @@
     "add_reseller": " البائعين / إضافة بائع ",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "QuestionBank":"بنك الأسئلة"
+    "QuestionBank":"بنك الأسئلة",
+    "reseller_details":"تفاصيل البائع"
   },
   "table": {
     "student": "قائمة الطلاب",