From daddeb12f826d0b86a030b3f01f2004aabfe5f9b Mon Sep 17 00:00:00 2001 From: Moaz Dawalibi Date: Mon, 23 Sep 2024 14:29:49 +0300 Subject: [PATCH 1/2] show eye in password input and some fixes --- src/Pages/Admin/Reseller/Edit/Page.tsx | 56 ++++++++++++++++++++++++-- src/Pages/Admin/Reseller/Page.tsx | 2 + src/Pages/Auth/FormField.tsx | 3 +- 3 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/Pages/Admin/Reseller/Edit/Page.tsx b/src/Pages/Admin/Reseller/Edit/Page.tsx index 1d64aa0..c8fca3a 100644 --- a/src/Pages/Admin/Reseller/Edit/Page.tsx +++ b/src/Pages/Admin/Reseller/Edit/Page.tsx @@ -1,7 +1,55 @@ -import React from "react"; +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 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 useModalHandler from "../../../../utils/useModalHandler"; -const Page = () => { - return
Page
; +const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;}) => { + + const [t] = useTranslation(); + useSetPageTitle(t(`page_header.add_reseller`)); + const handelSubmit = (values: any) => { + console.log(values, "values"); + }; + const { handel_open_model } = useModalHandler(); + + return ( +
+ }> + +
+ +
+ + + +
+ + +
+ +
+
+ +
+ ); }; -export default Page; +export default TableHeader; diff --git a/src/Pages/Admin/Reseller/Page.tsx b/src/Pages/Admin/Reseller/Page.tsx index ee7d105..40fc2df 100644 --- a/src/Pages/Admin/Reseller/Page.tsx +++ b/src/Pages/Admin/Reseller/Page.tsx @@ -10,6 +10,7 @@ import { useDeleteTag } from "../../../api/tags"; import PageHeader from "../../../Layout/Dashboard/PageHeader"; import FilterLayout from "../../../Layout/Dashboard/FilterLayout"; import FilterForm from "./Form/FilterForm"; +import EditReSeller from "./Edit/Page"; const Table = lazy(() => import("./Table")); const DeleteModalForm = lazy( () => import("../../../Layout/Dashboard/DeleteModels"), @@ -40,6 +41,7 @@ const TableHeader = () => { filterTitle="table.reseller" /> + {/* */} { - + - + */} diff --git a/src/Pages/Admin/Reseller/Add/Page.tsx b/src/Pages/Admin/Reseller/Add/Page.tsx index 8a16bc0..88e066a 100644 --- a/src/Pages/Admin/Reseller/Add/Page.tsx +++ b/src/Pages/Admin/Reseller/Add/Page.tsx @@ -1,22 +1,40 @@ import { useTranslation } from "react-i18next"; import useSetPageTitle from "../../../../Hooks/useSetPageTitle"; import PageHeader from "../../../../Layout/Dashboard/PageHeader"; -import { Suspense } from "react"; +import { Suspense, useEffect } 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 { useAddReseller } from "../../../../api/reseller"; +import { useNavigate } from "react-router-dom"; +import { QueryStatusEnum } from "../../../../enums/QueryStatus"; const TableHeader = () => { const [t] = useTranslation(); + const Navigate = useNavigate(); + const {mutate, isSuccess,status} = useAddReseller(); useSetPageTitle(t(`page_header.add_reseller`)); - const handelSubmit = (values: any) => { - console.log(values, "values"); + const handleSubmit = (values: any) => { + const DataToSend = { + ...values, + location: { + lat: values.lat, + lng: values.lng, + }, + }; + mutate(DataToSend); }; + useEffect(() => { + if(isSuccess === true){ + console.log(1); + Navigate('/reseller') + } + }, [isSuccess]) + return (
}> @@ -29,19 +47,26 @@ const TableHeader = () => { -
- - - -
- - -
- + {({ resetForm }) => ( +
+ + + +
+ + +
+ + )}
diff --git a/src/Pages/Admin/Reseller/Edit/Page.tsx b/src/Pages/Admin/Reseller/Edit/Page.tsx index c8fca3a..f02915c 100644 --- a/src/Pages/Admin/Reseller/Edit/Page.tsx +++ b/src/Pages/Admin/Reseller/Edit/Page.tsx @@ -1,24 +1,46 @@ import { useTranslation } from "react-i18next"; import useSetPageTitle from "../../../../Hooks/useSetPageTitle"; import PageHeader from "../../../../Layout/Dashboard/PageHeader"; -import { Suspense } from "react"; +import { Suspense, useEffect } from "react"; import { Spin } from "antd"; import { ModalEnum } from "../../../../enums/Model"; import PersonalDetailsForm from "../Form/PersonalDetailsForm"; import { Formik, Form } from "formik"; -import { getInitialValues, getValidationSchema } from "../Form/formUtils"; +import { getInitialValues, getInitialValuesEdit, getValidationSchema } from "../Form/formUtils"; import TitleDetailsForm from "../Form/TitleDetailsForm"; import AttachmentForm from "../Form/AttachmentForm"; import useModalHandler from "../../../../utils/useModalHandler"; +import { useObjectToEdit } from "../../../../zustand/ObjectToEditState"; +import { useUpdateReseller } from "../../../../api/reseller"; +import { useNavigate } from "react-router-dom"; +import { QueryStatusEnum } from "../../../../enums/QueryStatus"; const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;}) => { const [t] = useTranslation(); + const { objectToEdit , setObjectToEdit } = useObjectToEdit(); + const {mutate, isSuccess,status} = useUpdateReseller(); + const Navigate = useNavigate() + console.log(objectToEdit); + useSetPageTitle(t(`page_header.add_reseller`)); - const handelSubmit = (values: any) => { - console.log(values, "values"); + const handleSubmit = (values: any) => { + const DataToSend = { + ...values, + location: { + lat: values.lat, + lng: values.lng, + }, + }; + mutate(DataToSend); }; - const { handel_open_model } = useModalHandler(); + useEffect(() => { + if(isSuccess === true){ + console.log(1); + Navigate('/reseller') + } + }, [isSuccess]) + return (
@@ -30,21 +52,28 @@ const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;}) />
+ {({ resetForm }) => (
- +
- +
+ )}
diff --git a/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx b/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx index 46381e4..554d6ca 100644 --- a/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx +++ b/src/Pages/Admin/Reseller/Form/PersonalDetailsForm.tsx @@ -6,7 +6,7 @@ import { convert_data_to_select } from "../../../../Layout/app/Const"; import { userTypeOptions } from "../../../../config/userTypeOptions"; import { statusType } from "../../../../config/statusType"; -const PersonalDetailsForm = () => { +const PersonalDetailsForm = ({isEdit}:{isEdit?:boolean}) => { const [t] = useTranslation(); return (
@@ -16,6 +16,55 @@ const PersonalDetailsForm = () => {
+ + + + + + {isEdit? "" : + + } + + + + {/* { placeholder={"_"} label={"Seller Percentage"} type="text" - /> + /> */}
); diff --git a/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx b/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx index e7faa2a..a925fc4 100644 --- a/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx +++ b/src/Pages/Admin/Reseller/Form/TitleDetailsForm.tsx @@ -15,13 +15,13 @@ const TitleDetailsForm = () => {
- + {/* */}
); diff --git a/src/Pages/Admin/Reseller/Form/formUtils.ts b/src/Pages/Admin/Reseller/Form/formUtils.ts index b14915a..b9ecdf9 100644 --- a/src/Pages/Admin/Reseller/Form/formUtils.ts +++ b/src/Pages/Admin/Reseller/Form/formUtils.ts @@ -1,13 +1,89 @@ import * as Yup from "yup"; +import { objectToKeyValueArray } from "../../../../utils/objectToKeyValueArray"; -export const getInitialValues = (objectToEdit: Partial) => { +interface Location { + lat: number; + lng: number; +} +interface User { + username: string; + phone_number?: number; + type?:string +} + + +interface PersonalDetailsForm { + id: number; + first_name: string | null; + last_name: string | null; + location: Location[]; + contact_number1: string | null; + contact_number2: string | null; + card_number: string | null; + username: string | null; + password: string | null; + area_id: number | null; +} + +interface PersonalDetailsEditForm { + id: number; + first_name: string | null; + last_name: string | null; + location: Location[]; + contact_number1: string | null; + contact_number2: string | null; + card_number: string | null; + user: User; + area_id: number | null; +} + +export const getInitialValues = (objectToEdit: Partial) => { + const location = objectToEdit?.location?.[0] || { lat: 0, lng: 0 }; return { - id: objectToEdit?.id ?? null, - name: objectToEdit?.name ?? null, + id: objectToEdit?.id ?? 0, + first_name: objectToEdit?.first_name ?? null, + last_name: objectToEdit?.last_name ?? null, + location_lat: location.lat, + location_lng: location.lng, + contact_number1: objectToEdit?.contact_number1 ?? null, + contact_number2: objectToEdit?.contact_number2 ?? null, + card_number: objectToEdit?.card_number ?? null, + username: objectToEdit?.username ?? null, + password: objectToEdit?.password ?? null, + area_id: objectToEdit?.area_id ?? null, }; }; export const getValidationSchema = () => { // validate input - return Yup.object().shape({}); + return Yup.object().shape({ + id: Yup.number().required(), + first_name: Yup.string().required('first_name is required'), + last_name: Yup.string().required('last_name is required'), + location_lat: Yup.string().required('lat is required'), + location_lng: Yup.string().required('lng is required'), + contact_number1: Yup.string().required('contact_number1 is required'), + contact_number2: Yup.string().required('contact_number2 is required'), + username: Yup.string().required('username is required'), + area_id: Yup.number().required('area_id is required'), + }); }; + + +export const getInitialValuesEdit = (objectToEdit: Partial) => { + const location = objectToEdit?.location || { lat: 0, lng: 0 }; + console.log(objectToEdit); + + return { + id: objectToEdit?.id ?? 0, + first_name: objectToEdit?.first_name ?? null, + last_name: objectToEdit?.last_name ?? null, + location_lat: location.lat, + location_lng: location.lng, + contact_number1: objectToEdit?.contact_number1 ?? null, + contact_number2: objectToEdit?.contact_number2 ?? null, + card_number: objectToEdit?.card_number ?? null, + username: objectToEdit?.user?.username ?? null, + area_id: objectToEdit?.area_id ?? null, + }; +}; \ No newline at end of file diff --git a/src/Pages/Admin/Reseller/Page.tsx b/src/Pages/Admin/Reseller/Page.tsx index 40fc2df..e01a922 100644 --- a/src/Pages/Admin/Reseller/Page.tsx +++ b/src/Pages/Admin/Reseller/Page.tsx @@ -11,6 +11,7 @@ import PageHeader from "../../../Layout/Dashboard/PageHeader"; import FilterLayout from "../../../Layout/Dashboard/FilterLayout"; import FilterForm from "./Form/FilterForm"; import EditReSeller from "./Edit/Page"; +import { useDeleteReseller } from "../../../api/reseller"; const Table = lazy(() => import("./Table")); const DeleteModalForm = lazy( () => import("../../../Layout/Dashboard/DeleteModels"), @@ -25,7 +26,7 @@ const TableHeader = () => { {name:`${t(`page_header.home`)}`, path:"/"}, {name:`${t(`page_header.reseller`)}`, path:"reseller"} ]); - const deleteMutation = useDeleteTag(); + const deleteMutation = useDeleteReseller(); return (
}> diff --git a/src/Pages/Admin/Reseller/useTableColumns.tsx b/src/Pages/Admin/Reseller/useTableColumns.tsx index 9de525b..2272b2a 100644 --- a/src/Pages/Admin/Reseller/useTableColumns.tsx +++ b/src/Pages/Admin/Reseller/useTableColumns.tsx @@ -4,13 +4,14 @@ 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 { useNavigate, useParams } from "react-router-dom"; import { canDeleteReSeller, canEditReSeller, canShowReSeller, } from "../../../utils/hasAbilityFn"; import ActionButtons from "../../../Components/Table/ActionButtons"; +import { ABILITIES_ENUM } from "../../../enums/abilities"; export const useColumns = () => { const { handel_open_model } = useModalHandler(); @@ -27,9 +28,9 @@ export const useColumns = () => { handel_open_model(ModalEnum?.RE_SELLER_DELETE); }; - const handleEdit = (record: ReSeller) => { + const handleEdit = (record: ReSeller) => { setObjectToEdit(record); - handel_open_model(ModalEnum?.RE_SELLER_EDIT); + navigate(`/${ABILITIES_ENUM?.RE_SELLER}/${record?.id}/edit`) }; const [t] = useTranslation(); diff --git a/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx b/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx index 1455fc7..3a58237 100644 --- a/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx +++ b/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx @@ -12,7 +12,7 @@ const NotificationCard = ({ const {t} = useTranslation(); return ( -
+
{t(`${name}`)}

{t(`${description}`)}

diff --git a/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx b/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx index 8a84457..1a7d7cf 100644 --- a/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx +++ b/src/Pages/ReSeller/Collections/Model/CollectionInfoCard.tsx @@ -5,7 +5,7 @@ const CollectionInfoCard = ({label,value}:{label:string,value:string}) => { const {t} = useTranslation(); return (
-
{t(label)}
+
{t(`card.${label}`)}

{t(value)}

) diff --git a/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx b/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx new file mode 100644 index 0000000..8019084 --- /dev/null +++ b/src/Pages/ReSeller/Collections/Model/CollectionsCards.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import CollectionInfoCard from './CollectionInfoCard' +import { useTranslation } from 'react-i18next' + +const CollectionsCards = ({data}:{data?:any}) => { + const {t} = useTranslation(); + return ( + <> + + + + + + + ) +} + +export default CollectionsCards \ No newline at end of file diff --git a/src/Pages/ReSeller/Collections/Page.tsx b/src/Pages/ReSeller/Collections/Page.tsx index 37b68ad..37f9b22 100644 --- a/src/Pages/ReSeller/Collections/Page.tsx +++ b/src/Pages/ReSeller/Collections/Page.tsx @@ -5,8 +5,7 @@ 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"; +import CollectionsCards from "./Model/CollectionsCards"; const Table = lazy(() => import("./Table")); const TableHeader = () => { @@ -23,9 +22,7 @@ const TableHeader = () => { pageTitle="collections" />
- {CollectionData?.map((collection:any)=>( - - ))} +
} diff --git a/src/Pages/ReSeller/Collections/Table.tsx b/src/Pages/ReSeller/Collections/Table.tsx index 3c2f8c8..c2dbb6f 100644 --- a/src/Pages/ReSeller/Collections/Table.tsx +++ b/src/Pages/ReSeller/Collections/Table.tsx @@ -3,13 +3,13 @@ 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"; +import { useGetAllCollections } from "../../../api/collections"; const App: React.FC = () => { const [searchQuery] = useSearchQuery("name"); const { filterState } = useFilterState(); - const response = useGetAllSales({ + const response = useGetAllCollections({ name: searchQuery, pagination: true, ...filterState, diff --git a/src/Pages/ReSeller/Collections/index.tsx b/src/Pages/ReSeller/Collections/index.tsx index 447f22d..4a66640 100644 --- a/src/Pages/ReSeller/Collections/index.tsx +++ b/src/Pages/ReSeller/Collections/index.tsx @@ -3,15 +3,9 @@ import Table from "./Table"; import { FaPlus } from "react-icons/fa"; -import AddModalForm from "./Model/AddModel"; -import EditModalForm from "./Model/EditModel"; -// import DeleteModalForm from "../../"; export { Table, useColumns, - AddModalForm, - EditModalForm, - // DeleteModalForm, FaPlus, }; diff --git a/src/Pages/ReSeller/Profile/Page.tsx b/src/Pages/ReSeller/Profile/Page.tsx index def9cc2..14b4cad 100644 --- a/src/Pages/ReSeller/Profile/Page.tsx +++ b/src/Pages/ReSeller/Profile/Page.tsx @@ -41,12 +41,12 @@ const Page = () => { -
+ {/*
-
+
*/}
diff --git a/src/Pages/ReSeller/Sales/Model/AddModel.tsx b/src/Pages/ReSeller/Sales/Model/AddModel.tsx index dd0547e..e210318 100644 --- a/src/Pages/ReSeller/Sales/Model/AddModel.tsx +++ b/src/Pages/ReSeller/Sales/Model/AddModel.tsx @@ -1,31 +1,53 @@ 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 ValidationModelForm from "./ValidationModelForm"; +import SalesModelForm from "./SalesModelForm"; +import SubmitModelForm from "./SubmitModelForm"; + import { useAddSales } from "../../../../api/sales"; +import LayoutModel from "./LayoutModel"; const AddModel: React.FC = () => { const { mutate, status } = useAddSales(); const handleSubmit = (values: any) => { - mutate({ - ...values, - }); + // mutate({ + // ...values, + // }); }; + enum modal { + Number= 0, + Package= 1, + Sure= 2 + } + + const Forms = { + [modal.Number]: , + [modal.Package] : , + [modal.Sure]: + } + // const modelTitle = Forms.[modal.Number] ? "sale" : Forms.Package ? "adcs" : "Ascas"; + + return ( <> - + {/* {Forms["Number"]} */} + <> + + + ); diff --git a/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx b/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx new file mode 100644 index 0000000..1e05b87 --- /dev/null +++ b/src/Pages/ReSeller/Sales/Model/LayoutModel.tsx @@ -0,0 +1,103 @@ +import React, { useEffect } from "react"; +import { Divider, Modal, Spin } from "antd"; +import { useModalState } from "../../../../zustand/Modal"; +import { useObjectToEdit } from "../../../../zustand/ObjectToEditState"; +import { useTranslation } from "react-i18next"; +import { QueryStatusEnum } from "../../../../enums/QueryStatus"; +import SpinContainer from "../../../../Components/Layout/SpinContainer"; +import { MdCancel } from "react-icons/md"; +import { Form, Formik } from "formik"; + +interface LayoutModalProps { + isAddModal?: boolean; + modelTitle: string; + handleSubmit: (values: any) => void; + getInitialValues: any; + getValidationSchema: any; + children: React.ReactNode; + status: QueryStatusEnum; + ModelEnum: any; + ModelClassName?: string; + width?: string; + isLoading?: boolean; + buttonTitle?:string; + initialButtonName?:boolean +} + +const LayoutModel = ({ + isAddModal = true, + children, + handleSubmit = () => {}, + getInitialValues, + getValidationSchema, + status, + modelTitle, + ModelEnum, + ModelClassName, + width = "800px", + isLoading = false, + buttonTitle, + initialButtonName = true, +}: LayoutModalProps) => { + const { isOpen, setIsOpen } = useModalState((state) => state); + const { setObjectToEdit } = useObjectToEdit(); + useEffect(() => { + if (isAddModal && status === QueryStatusEnum.SUCCESS) { + setIsOpen("isSuccess"); + setObjectToEdit({}); + return; + } + if (status === QueryStatusEnum.SUCCESS) { + setIsOpen(""); + setObjectToEdit({}); + } + }, [setIsOpen, status]); + + const handleCancel = () => { + setIsOpen(""); + setObjectToEdit({}); + }; + + const [t] = useTranslation(); + return ( + <> + + + + {(formik) => { + useEffect(() => { + if (isOpen === "" || isOpen === "isSuccess") { + formik.setErrors({}); + formik.resetForm(); + } + }, [isOpen]); + + return
+ + +
+ {isLoading ? : children} +
+ + ; + }} + + + + ); +}; + +export default LayoutModel; diff --git a/src/Pages/ReSeller/Sales/Model/ModelForm.tsx b/src/Pages/ReSeller/Sales/Model/ModelForm.tsx deleted file mode 100644 index 4cace32..0000000 --- a/src/Pages/ReSeller/Sales/Model/ModelForm.tsx +++ /dev/null @@ -1,26 +0,0 @@ -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 ( - -
- - - - ); -}; - -export default Form; diff --git a/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx new file mode 100644 index 0000000..90b826d --- /dev/null +++ b/src/Pages/ReSeller/Sales/Model/SalesModelForm.tsx @@ -0,0 +1,62 @@ +import { Col, Row } from "reactstrap"; +import ValidationField from "../../../../Components/ValidationField/ValidationField"; +import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect"; +import { useFormikContext } from "formik"; +import { useModalState } from "../../../../zustand/Modal"; +import { useObjectToEdit } from "../../../../zustand/ObjectToEditState"; +import { useTranslation } from "react-i18next"; +import { QueryStatusEnum } from "../../../../enums/QueryStatus"; +import { Divider, Spin } from "antd"; +import { MdCancel } from "react-icons/md"; + +const Form = ({status}:{status?:any}) => { + + const {values,setFieldValue} = useFormikContext() + console.log(values?.currentModalIndex); + const { isOpen, setIsOpen } = useModalState((state) => state); + const { setObjectToEdit } = useObjectToEdit(); + const {t} = useTranslation(); + const formik = useFormikContext(); + const handleNext = ()=>{ + setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) + } + const handleCancel = () => { + setIsOpen(""); + setObjectToEdit({}); + }; + + return ( + values?.currentModalIndex == 0 && + +
+
+ + {t(`models.add_sales`)}{" "} + + +
+ +sac + {values?.currentModalIndex} +
+
+ {t("practical.cancel")} +
+ +
+
+ ); +}; + +export default Form; diff --git a/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx new file mode 100644 index 0000000..e037a5c --- /dev/null +++ b/src/Pages/ReSeller/Sales/Model/SubmitModelForm.tsx @@ -0,0 +1,62 @@ +import { Col, Row } from "reactstrap"; +import ValidationField from "../../../../Components/ValidationField/ValidationField"; +import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect"; +import { useFormikContext } from "formik"; +import { useModalState } from "../../../../zustand/Modal"; +import { useObjectToEdit } from "../../../../zustand/ObjectToEditState"; +import { useTranslation } from "react-i18next"; +import { QueryStatusEnum } from "../../../../enums/QueryStatus"; +import { Divider, Spin } from "antd"; +import { MdCancel } from "react-icons/md"; + +const Form = ({status}:{status?:any}) => { + + const {values,setFieldValue} = useFormikContext() + console.log(values?.currentModalIndex); + const { isOpen, setIsOpen } = useModalState((state) => state); + const { setObjectToEdit } = useObjectToEdit(); + const {t} = useTranslation(); + const formik = useFormikContext(); + const handleNext = ()=>{ + setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) + } + const handleCancel = () => { + setIsOpen(""); + setObjectToEdit({}); + }; + + return ( + values?.currentModalIndex == 1 && + +
+
+ + {t(`models.are_you_sure_about_sale`)}{" "} + + +
+ + + {values?.currentModalIndex} +
+
+ {t("practical.cancel")} +
+ +
+
+ ); +}; + +export default Form; diff --git a/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx new file mode 100644 index 0000000..1e5de1c --- /dev/null +++ b/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx @@ -0,0 +1,72 @@ +import { Col, Row } from "reactstrap"; +import ValidationField from "../../../../Components/ValidationField/ValidationField"; +import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect"; +import { useFormikContext } from "formik"; +import { useModalState } from "../../../../zustand/Modal"; +import { useObjectToEdit } from "../../../../zustand/ObjectToEditState"; +import { useTranslation } from "react-i18next"; +import { QueryStatusEnum } from "../../../../enums/QueryStatus"; +import { Divider, Spin } from "antd"; +import { MdCancel } from "react-icons/md"; + +const Form = ({status}:{status?:any}) => { + + const {values,setFieldValue} = useFormikContext() + console.log(values?.currentModalIndex); + const { isOpen, setIsOpen } = useModalState((state) => state); + const { setObjectToEdit } = useObjectToEdit(); + const {t} = useTranslation(); + const formik = useFormikContext(); + const handleNext = ()=>{ + setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) + } + const handleCancel = () => { + setIsOpen(""); + setObjectToEdit({}); + }; + + return ( + values?.currentModalIndex == 1 && + +
+
+ + {t(`models.`)}{" "} + + +
+ + + +
+ + + + {values?.currentModalIndex} +
+
+ {t("practical.cancel")} +
+ +
+ + + ); +}; + +export default Form; diff --git a/src/Pages/ReSeller/Sales/Model/formUtil.ts b/src/Pages/ReSeller/Sales/Model/formUtil.ts index d2aa9da..154cb77 100644 --- a/src/Pages/ReSeller/Sales/Model/formUtil.ts +++ b/src/Pages/ReSeller/Sales/Model/formUtil.ts @@ -4,10 +4,16 @@ export const getInitialValues = (objectToEdit: any): any => { return { id: objectToEdit?.id ?? null, phone_number: objectToEdit?.phone_number ?? null, + currentModalIndex: 0 }; }; + export const getValidationSchema = () => { return Yup.object().shape({ - phone_number: Yup.number().required("validation.required"), + phone_number: Yup.string() + .required("Phone number is required") + .length(10, "Phone number must be exactly 10 numbers") + .matches(/^\d{10}$/, "Phone number must be a valid 10-number number"), + currentModalIndex: Yup.number().max(2) }); -}; +}; \ No newline at end of file diff --git a/src/Pages/ReSeller/Sales/Page.tsx b/src/Pages/ReSeller/Sales/Page.tsx index f0856a9..cec13a9 100644 --- a/src/Pages/ReSeller/Sales/Page.tsx +++ b/src/Pages/ReSeller/Sales/Page.tsx @@ -4,7 +4,6 @@ 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"; diff --git a/src/Routes.tsx b/src/Routes.tsx index c8c15e7..0a91cad 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -1,6 +1,8 @@ import { TCrudRoute, TMenuItem } from "./types/App"; import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser, FaUserShield } from "react-icons/fa"; import { GoDotFill } from "react-icons/go"; +import { MdOutlineSell } from "react-icons/md"; +import { CgProfile } from "react-icons/cg"; import { GrGroup } from "react-icons/gr"; import React from "react"; @@ -182,7 +184,7 @@ export const menuItems: TMenuItem[] = [ { header: "page_header.sales", element: , - icon: , + icon: , text: "sidebar.sales", path: `/${ABILITIES_ENUM?.Sales}`, abilities: ABILITIES_ENUM?.Sales, @@ -193,7 +195,7 @@ export const menuItems: TMenuItem[] = [ { header: "page_header.collections", element: , - icon: , + icon: , text: "sidebar.collections", path: `/${ABILITIES_ENUM?.Collections}`, abilities: ABILITIES_ENUM?.Collections, @@ -204,7 +206,7 @@ export const menuItems: TMenuItem[] = [ { header: "page_header.profile", element: , - icon: , + icon: , text: "sidebar.profile", path: `/${ABILITIES_ENUM?.PROFILE}`, abilities: ABILITIES_ENUM?.Profile_RE_SELLER, @@ -266,7 +268,6 @@ export const CrudRoute: TCrudRoute[] = [ abilities_value: ABILITIES_VALUES_ENUM.INDEX, prevPath: 2, }, - { header: "page_header.add_reseller", element: , diff --git a/src/Styles/Pages/Classes.scss b/src/Styles/Pages/Classes.scss index 28e5736..caf5093 100644 --- a/src/Styles/Pages/Classes.scss +++ b/src/Styles/Pages/Classes.scss @@ -100,4 +100,11 @@ .transparent_bg{ background: transparent !important; color: #fff !important; +} + + +.margin_auto{ + @include Flex; + min-width: 100% !important; + margin-inline: auto !important; } \ No newline at end of file diff --git a/src/Styles/Pages/index.scss b/src/Styles/Pages/index.scss index 3e2a456..e0073ab 100644 --- a/src/Styles/Pages/index.scss +++ b/src/Styles/Pages/index.scss @@ -15,3 +15,4 @@ @import './profile.scss'; @import './collections.scss'; @import './setting.scss'; +@import './sales.scss'; diff --git a/src/Styles/Pages/reSeller.scss b/src/Styles/Pages/reSeller.scss index dafc561..c99df2a 100644 --- a/src/Styles/Pages/reSeller.scss +++ b/src/Styles/Pages/reSeller.scss @@ -73,4 +73,13 @@ .main_form_body{ border-radius: 10px; } -} \ No newline at end of file +} + + + + + + + + + diff --git a/src/Styles/Pages/sales.scss b/src/Styles/Pages/sales.scss new file mode 100644 index 0000000..7544b3f --- /dev/null +++ b/src/Styles/Pages/sales.scss @@ -0,0 +1,6 @@ +.reseller_modal_form{ + width: 100%; + .modal_title{ + height: 5vh; + } +} \ No newline at end of file diff --git a/src/Styles/Pages/setting.scss b/src/Styles/Pages/setting.scss index 9660a5a..463a0f8 100644 --- a/src/Styles/Pages/setting.scss +++ b/src/Styles/Pages/setting.scss @@ -52,7 +52,7 @@ .setting_tab_header, -.notification_card, +.notification_card_setting, .security_card { display: flex; justify-content: space-between; @@ -87,7 +87,7 @@ margin-bottom: 30px; } -.notification_card{ +.notification_card_setting{ &:nth-last-child(1) { border: none; } diff --git a/src/api/collections.ts b/src/api/collections.ts index 3546a5c..520c905 100644 --- a/src/api/collections.ts +++ b/src/api/collections.ts @@ -6,5 +6,5 @@ const API = { const KEY = "collections"; -export const useGetAllSales = (params?: any, options?: any) => +export const useGetAllCollections = (params?: any, options?: any) => useGetQuery(KEY, API.GET, params, options); diff --git a/src/api/sales.ts b/src/api/sales.ts index fb15fcf..c99c15d 100644 --- a/src/api/sales.ts +++ b/src/api/sales.ts @@ -2,10 +2,11 @@ import useAddMutation from "./helper/useAddMutation"; import useGetQuery from "./helper/useGetQuery"; const API = { - GET: "/sales", - ADD: "/sales", - DELETE: "/sales", - UPDATE: "/sales", + GET: "/resellers/studentPackage", + ADD: "/resellers/studentPackage", + GET_BY_PHONE: "/resellers/studentPackage/student", + GET_SUMMERY: "/resellers/studentPackage/summery", + }; const KEY = "sales"; diff --git a/src/translate/ar.json b/src/translate/ar.json index e2f6fdd..acbdf18 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -306,7 +306,8 @@ "Devices associated with the account":"الأجهزة المرتبطة بالحساب", "account_activities":"أنشطة الحساب", "This will close your account. Your account will be interactive when you log in again":"سيؤدي هذا إلى إغلاق حسابك. سيكون حسابك تفاعليا عند تسجيل الدخول مرة أخرى", - "Your account will be permanently deleted":"سيتم حذف حسابك نهائيا" + "Your account will be permanently deleted":"سيتم حذف حسابك نهائيا", + "search":"بحث" }, "Table": { "header": "", @@ -387,7 +388,9 @@ "sale":"عملية بيع", "collections": "التحصيلات", "phone_number":"رقم الهاتف", - "email_address":"عنوان البريد الإلكتروني" + "email_address":"عنوان البريد الإلكتروني", + "add_sales":"إضافة عملية بيع", + "are_you_sure_about_sale":"هل أنت متأكد من عملية البيع ؟" }, "education_class_actions": { "Student_Records": "سجلات الطلاب", @@ -516,7 +519,11 @@ "role":"الدور", "submit_password":"تأكيد كلمة المرور", "join_date":"تاريخ الانضمام", - "verify":"التحقق" + "verify":"التحقق", + "contact_number1":"رقم الهاتف", + "contact_number2":"رقم الهاتف الإضافي", + "lat":"الطول", + "lng":"العرض" }, "select": { "enums": { @@ -897,7 +904,8 @@ "collections": "التحصيلات", "sales":"المبيعات", "edit_manager":"تعديل مدير", - "setting":"الإعدادات" + "setting":"الإعدادات", + "edit_reseller":"تعديل البائع" }, "page_header": { "home": "لوحة القيادة", @@ -963,6 +971,13 @@ "upload_your_photo_and_personal_data_here":"قم بتحميل صورتك وبياناتك الشخصية هنا", "get_notified_of_whats_happening_now_you_can_turn_it_off_at_any_time":"احصل على إشعار بما يحدث الآن ، يمكنك إيقاف تشغيله في أي وقت" }, + "card" : { + "residual":"المتبقي", + "collected":"تم تحصيله", + "company_profit":"المستحقات", + "reseller_profit":"نسبة الأرباح (10%)", + "total_sells":"إجمالي المبيعات" + }, "alphabet": { "A": "A", "B": "B", diff --git a/src/utils/objectToKeyValueArray.ts b/src/utils/objectToKeyValueArray.ts new file mode 100644 index 0000000..6dc5239 --- /dev/null +++ b/src/utils/objectToKeyValueArray.ts @@ -0,0 +1,9 @@ +export function objectToKeyValueArray(obj: { [key: string]: any } | null | undefined): Array<{ key: string; value: any }> { + if (!obj) { + return [{ key: '', value: '' }] + } + return Object.entries(obj).map(([key, value]) => ({ + key, + value + })); + } \ No newline at end of file