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

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

@@ -0,0 +1,17 @@
+import ValidationField from "../../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+
+const FilterForm = () => {
+  return (
+    <div>
+      <Row>
+        <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" />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,72 @@
+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 InfoCard from "../../../../Components/Cards/InfoCard";
+import AddressCard from "../../../../Components/Cards/AddressCard";
+import { ReSellerAddressInfo, ReSellerParamInfo } from "../../../../Components/Cards/ParamInfo";
+import StudentTabs from "./ReSellerTabs";
+import { useParams } from "react-router-dom";
+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();
+  const { re_seller_id } = useParams<ParamsEnum>()
+
+  useSetPageTitle([
+    { name: `${t(`page_header.home`)}`, path: "/" },
+    { name: `${t(`page_header.reseller`)}`, path: "reseller" },
+    { name: `${t(`page_header.reseller_details`)}`, path: `reseller/${re_seller_id}` },
+  ]);
+  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="reseller_details"
+        />
+        <div className="single_student_body">
+          <div className="student_info">
+            <InfoCard 
+              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>
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

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

@@ -0,0 +1,60 @@
+import { useTranslation } from 'react-i18next';
+import { Tabs } from 'antd';
+import type { TabsProps } from 'antd';
+import FilterLayout from '../../../../Layout/Dashboard/FilterLayout';
+import FilterForm from './Model/FilterForm';
+import { lazy } from 'react';
+import { FaMoneyBills } from "react-icons/fa6";
+import useSearchQuery from '../../../../api/utils/useSearchQuery';
+import { useFilterState } from '../../../../Components/Utils/Filter/FilterState';
+import { useGetAllReseller } from '../../../../api/reseller';
+
+const Table = lazy(() => import("./Table"));
+
+const ReSellerTabs = () => {
+    const {t} = useTranslation();
+
+    const [searchQuery] = useSearchQuery("name");
+    const { filterState } = useFilterState();
+    const response = useGetAllReseller({
+        name: searchQuery,
+        pagination: true,
+        ...filterState,
+      });
+
+    const items: TabsProps['items'] = [
+        {
+          key: '1',
+          label: t("practical.sales"),
+          icon:<FaMoneyBills className='tab_icon'/>,
+          children:
+          <>
+            <FilterLayout
+              sub_children={<FilterForm />}
+              filterTitle="practical.sales"
+            />
+            <Table response={response} salesTable={true}/>
+          </>,
+        },
+        {
+            key: '2',
+            label: t("practical.collections"),
+            icon:<FaMoneyBills className='tab_icon'/>,
+            children:
+            <>
+              <FilterLayout
+                sub_children={<FilterForm />}
+                filterTitle="practical.collections"
+              />
+              <Table response={response}/>
+            </>,
+          },
+      ];
+  return (
+    <>
+        <Tabs defaultActiveKey="1" items={items} />
+    </>
+)
+}
+
+export default ReSellerTabs

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

@@ -0,0 +1,14 @@
+import DataTable from "../../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+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/index.tsx

@@ -0,0 +1,9 @@
+import { useColumns } from "./useTableColumns";
+import Table from "./Table";
+import { FaPlus } from "react-icons/fa";
+
+export {
+  Table,
+  useColumns,
+  FaPlus,
+};

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

@@ -0,0 +1,43 @@
+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<ReSeller> = [
+    {
+      title: t("columns.student_full_name"),
+      dataIndex: "student_full_name",
+      key: "student_full_name",
+      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/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,19 +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,
 } from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
-import ColumnsImage from "../../../Components/Columns/ColumnsImage";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -21,6 +18,10 @@ export const useColumns = () => {
   const { setObjectToEdit } = useObjectToEdit((state) => state);
   const navigate = useNavigate();
 
+  const handelShow = (record: ReSeller) => {
+    navigate(`${record?.id}`);    
+  };
+
   const handelDelete = (data: ReSeller) => {
     setObjectToEdit(data);
     handel_open_model(ModalEnum?.RE_SELLER_DELETE);
@@ -62,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) => {
@@ -71,7 +71,9 @@ export const useColumns = () => {
           <ActionButtons
             canDelete={canDeleteReSeller}
             canEdit={canEditReSeller}
+            canShow={canShowReSeller}
             index={index}            
+            onShow={() => handelShow(record)}
             onDelete={() => handelDelete(record)}
             onEdit={() => handleEdit(record)}
           />

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,11 +30,11 @@ 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/>
+            <StudentTabs />
           </div>
 
         </div>

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

@@ -26,8 +26,8 @@ const StudentTabs = () => {
     const items: TabsProps['items'] = [
         {
           key: '1',
-          label: <span>{t("practical.quiz")} </span>,
+          label: t("practical.quiz"),
-          icon:<BsQuestionSquare/>,
+          icon:<BsQuestionSquare className='tab_icon'/>,
           children:
           <>
             <FilterLayout
@@ -39,8 +39,8 @@ const StudentTabs = () => {
         },
         {
             key: '2',
-            label: <span>{t("practical.hightes_quiz")} </span>,
+            label: t("practical.hightes_quiz"),
-            icon:<IoStatsChartOutline/>,
+            icon:<IoStatsChartOutline className='tab_icon'/>,
             children:
             <>
               <FilterLayout

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

@@ -24,6 +24,7 @@ const Student = React.lazy(() => import("./Pages/Admin/Student/Page"));
 const ShowStudent = React.lazy(() => import("./Pages/Admin/Student/show/Page"));
 
 const ReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Page"));
+const ShowReSeller = React.lazy(() => import("./Pages/Admin/Reseller/show/Page"));
 const AddReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Add/Page"));
 const EditReSeller = React.lazy(
   () => import("./Pages/Admin/Reseller/Edit/Page"),
@@ -221,7 +222,15 @@ 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,
+  },
+  {
+    header: "page_header.reSeller",
+    element: <ShowReSeller />,
+    path: `/${ABILITIES_ENUM?.RE_SELLER}/:${ParamsEnum?.RE_SELLER_ID}`,
     abilities: ABILITIES_ENUM?.RE_SELLER,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
@@ -229,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,136 @@
+.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;
+        }
+    }
+}
+.tab_icon{
+    font-size: 30px ;
+}
+
+@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,101 +0,0 @@
-.single_student{
-    display: flex;
-    .single_student_body{
-        display: flex;
-        width: 100%;
-        .student_info{
-            width: 32%;
-        }
-        .student_table{
-            width: 68%;
-        }
-    }
-}
-
-
-.student_info_card{
-    width: 24vw;
-    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 20px 15px ;
-    .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;
-            }
-            p{
-                color: #6A7287;
-            }
-        }
-    }
-}
-
-.student_address_card{
-    width: 24vw;
-    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 20px 15px ;    
-    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;
-        }
-        p{
-            color: #6A7287;
-        }
-    }
-}
-
-
-
-@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/Styles/Tables/Table.scss

@@ -55,10 +55,10 @@
   margin-left: 29px;
 }
 
-/* Ant tabs nav list */
+// /* Ant tabs nav list */
-.ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
+// .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
-  width: 100%;
+//   width: 100%;
-}
+// }
 
 .ant-tabs > .ant-tabs-nav,
 .ant-tabs > div > .ant-tabs-nav {

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

@@ -193,7 +193,16 @@
     "normal_question": " تمرين عادي",
     "hint":"شرح ",
     "tags":"كلمات مفتاحية",
-    "course":" الصفوف"
+    "course":" الصفوف",
+    "student_full_name":"اسم الطالب الثلاثي",
+    "amount_paid":"المبلغ المدفوع",
+    "sale_date":"تاريخ البيع",
+    "grade":"الصف",
+    "package":"حزمة",
+    "ID":"ID",
+    "residual":"المتبقي",
+    "date_of_receipt":"تاريخ الاستلام",
+    "amount":"مبلغ"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -243,7 +252,12 @@
     "Abbreviations": "الاختصارات",
     "address":"العنوان",
     "quiz":"الاختبارات",
-    "hightes_quiz":"اعلى اختبار"
+    "hightes_quiz":"اعلى اختبار",
+    "sales":"المبيعات",
+    "collections":"التحصيلات",
+    "collecting_an_amount":"تحصيل مبلغ",
+    "governorate":"المحافظة",
+    "id_photo":"صورة الهوية"
   },
   "Table": {
     "header": "",
@@ -314,7 +328,8 @@
     "user_details": "تفاصيل المستخدم",
     "reseller_details": "تفاصيل اعادة البيع",
     "reseller": "البائعين",
-    "student_package": "حزمة الطالب"
+    "student_package": "حزمة الطالب",
+    "collection":"تحصيل"
     },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -433,7 +448,9 @@
     "grade":"الصفوف",
     "subject":"المادة",
     "unit":"الوحدة",
-    "lesson":"الدرس"
+    "lesson":"الدرس",
+    "date_of_receipt":"تاريخ الاستلام",
+    "amount_value":"قيمة المبلغ"
   },
   "select": {
     "enums": {
@@ -800,7 +817,8 @@
     "report": "تقرير",
     "tags": "كلمات مفتاحية",
     "reseller":"البائعين",
-    "QuestionBank":"بنك الأسئلة"
+    "QuestionBank":"بنك الأسئلة",
+    "reseller_details":"تفاصيل البائع"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -838,7 +856,8 @@
     "add_reseller": " البائعين / إضافة بائع ",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "QuestionBank":"بنك الأسئلة"
+    "QuestionBank":"بنك الأسئلة",
+    "reseller_details":"تفاصيل البائع"
   },
   "table": {
     "student": "قائمة الطلاب",