diff --git a/src/Pages/Categories/AddCategoriesModal.tsx b/src/Pages/Categories/AddCategoriesModal.tsx
deleted file mode 100644
index 08cdbe1..0000000
--- a/src/Pages/Categories/AddCategoriesModal.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-import React from 'react'
-import LayoutModal from '../../Layout/Dashboard/LayoutModal'
-import AddForm from './AddForm'
-import { useAddCategories } from '../../api/Categories'
-import { getDataToSend, getInitialValues, getValidationSchema } from './formUtil'
-import { QueryStatusEnum } from '../../config/QueryStatus'
-import { useTranslation } from 'react-i18next'
-
-function AddCategoriesModal() {
-
-
- const [t] = useTranslation()
- const {mutate , status} = useAddCategories()
- const handelSubmit = (values:any )=>{
- values['name'] = {
- "en" : values.name_en,
- "ar" : values.name_ar,
- "de" : values.name_de,
- }
- console.log(values);
- mutate(values)
-
- }
- return (
-
-
-
-
- )
-}
-
-export default AddCategoriesModal
-
diff --git a/src/Pages/Categories/EditCategories/Page.tsx b/src/Pages/Categories/EditCategories/Page.tsx
deleted file mode 100644
index c883658..0000000
--- a/src/Pages/Categories/EditCategories/Page.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import FormPage from '../../../Layout/Dashboard/FormPage';
-import EditForm from './EditForm';
-import { getInitialValues, getValidationSchema } from '../formUtil';
-import { useParams } from 'react-router-dom';
-import KarimSpinner from '../../../Components/Karimalden/Ui/KarimSpinner';
-import { useAddCategories, useGetOneCategories } from '../../../api/Categories';
-
-const EditPage = () => {
-
- const { id } = useParams()
- const { data,isLoading } = useGetOneCategories({id})
- const {mutate} = useAddCategories()
- const handleSubmit = (values: any) => {
- const newdata = {} as any;
-
- for (const key in data) {
- if (values[key] !== data[key]) {
- newdata[key] = values[key];
- }
- }
-
- return mutate(newdata);
- };
-
- return (
-
- handleSubmit(values)}
- initialValues={getInitialValues(data)}
- validationSchema={getValidationSchema}
- title='Edit Categories'
- >
-
-
-
-
- );
-};
-
-export default EditPage;
diff --git a/src/Pages/Categories/CategoriesPage.tsx b/src/Pages/Categories/Page.tsx
similarity index 52%
rename from src/Pages/Categories/CategoriesPage.tsx
rename to src/Pages/Categories/Page.tsx
index 6d31781..dae9843 100644
--- a/src/Pages/Categories/CategoriesPage.tsx
+++ b/src/Pages/Categories/Page.tsx
@@ -4,37 +4,39 @@ import DashBody from '../../Layout/Dashboard/DashBody'
import DashHeader from '../../Layout/Dashboard/DashHeader'
import LyTable from '../../Layout/Dashboard/LyTable'
import useTableColumns from './useTableColumns'
-import { useGetCategories} from '../../api/Categories'
-
-import { useTranslation } from 'react-i18next'
-import AddCategoriesModal from './AddCategoriesModal'
import { QueryStatusEnum } from '../../config/QueryStatus'
-// import * as XLSX from 'ts-xlsx';
+import { useGetProduct } from '../../api/product'
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
+import { useGetCategories } from '../../api/Categories'
-function CategoriesPage() {
+function Page() {
const column =useTableColumns()
const {data ,status } = useGetCategories()
- const {t} = useTranslation();
+ console.log(data);
+ const [t] = useTranslation()
+ const navigate = useNavigate()
-
return (
+ // Pass Status to Layout
-
+
+ navigate('/categories/add')}>
-
-
+ />
+
+
)
}
-export default CategoriesPage
+export default Page
diff --git a/src/Pages/Categories/AddForm.tsx b/src/Pages/Categories/View/AddForm.tsx
similarity index 67%
rename from src/Pages/Categories/AddForm.tsx
rename to src/Pages/Categories/View/AddForm.tsx
index 7dc0f6f..a0b2f06 100644
--- a/src/Pages/Categories/AddForm.tsx
+++ b/src/Pages/Categories/View/AddForm.tsx
@@ -1,17 +1,15 @@
import React from 'react'
import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
-import { FakeSelectData } from '../../Layout/app/Const';
+import KarimField from '../../../Components/Karimalden/KarimField';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
-import { useGetCategories } from '../../api/Categories';
+import { useTranslation } from 'react-i18next';
-function AddForm() {
+function Form() {
const formik = useFormikContext
();
- const {data } = useGetCategories()
-
+ const [t] = useTranslation();
return (
@@ -27,11 +25,12 @@ function AddForm() {
+
)
}
-export default AddForm
+export default Form
diff --git a/src/Pages/Categories/View/AddPage.tsx b/src/Pages/Categories/View/AddPage.tsx
new file mode 100644
index 0000000..ff09d8d
--- /dev/null
+++ b/src/Pages/Categories/View/AddPage.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react'
+import { getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
+import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
+import 'react-tabs/style/react-tabs.css';
+import { MdLanguage } from 'react-icons/md'
+import ViewPage from '../../../Layout/Dashboard/ViewPage';
+import { useTranslation } from 'react-i18next';
+import { BsInfoCircle } from 'react-icons/bs';
+import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
+import { useAddCategories } from '../../../api/Categories';
+import Form from './AddForm';
+
+const AddcategoriesPage = () => {
+
+
+ const {mutate , isLoading , isSuccess} = useAddCategories()
+ const handleSubmit = (values:any)=>{
+
+ values['name'] = {
+ "en" : values.name_en,
+ "ar" : values.name_ar,
+ "de" : values.name_de,
+ }
+ mutate(values)
+
+
+ }
+ const {t} = useTranslation();
+
+ useNavigateOnSuccess(isSuccess , '/categories' )
+
+
+
+ const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+
+
+ return (
+
+
+
+
+
+
{t("BasicInfo")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Form
+
+
diff --git a/src/Pages/Categories/View/EditPage.tsx b/src/Pages/Categories/View/EditPage.tsx
new file mode 100644
index 0000000..52c1d74
--- /dev/null
+++ b/src/Pages/Categories/View/EditPage.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react'
+import { getInitialValues, getDataToSend } from '../formUtil'
+import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
+import 'react-tabs/style/react-tabs.css';
+import { MdLanguage } from 'react-icons/md'
+import { FaSadCry } from 'react-icons/fa'
+import ViewPage from '../../../Layout/Dashboard/ViewPage';
+import { Rate } from 'antd';
+import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
+import { useParams } from 'react-router-dom';
+import LoadingPage from '../../../Layout/app/LoadingPage';
+import { useTranslation } from 'react-i18next';
+import { BsInfoCircle } from 'react-icons/bs';
+import { useGetOneCategories, useUpdateCategories } from '../../../api/Categories';
+import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
+import Form from './EditForm';
+
+const EditPage = () => {
+ const { setObjectToEdit, objectToEdit } = usePageState()
+ const {t} = useTranslation();
+ const { data } = useGetOneCategories()
+ const {mutate ,isSuccess} = useUpdateCategories()
+ const FormatedData = data?.category ;
+ const handleSubmit = (values:any)=>{
+
+ const newData = {} as any;
+
+ for (const key in FormatedData) {
+ if (values[key] !== FormatedData[key]) {
+ newData[key] = values[key];
+ }
+
+ const language = localStorage.getItem("language") ?? "en";
+
+ newData['name'] = {
+ [language]: values.name,
+ };
+ }
+
+ return mutate(newData);
+ }
+
+ useNavigateOnSuccess(isSuccess , '/categories')
+
+
+ useEffect(() => {
+ console.log(data);
+
+ setObjectToEdit(data?.category);
+
+ }, [data]);
+
+
+ const getValidationSchema = () => {
+ return null
+ };
+
+
+ const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
+
+
+ return (
+
+ {objectToEdit && data ?
+
+
+
+
{t("BasicInfo")}
+
+
+
+
+
+
+
+
+
+ :
}
+
+
+
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default CreateForm
\ No newline at end of file
diff --git a/src/Pages/Coupon/FormProducts.tsx b/src/Pages/Coupon/FormProducts.tsx
new file mode 100644
index 0000000..22cd08d
--- /dev/null
+++ b/src/Pages/Coupon/FormProducts.tsx
@@ -0,0 +1,55 @@
+
+import React from 'react'
+import { Col, Row } from 'reactstrap';
+import KarimField from '../../Components/Karimalden/KarimField';
+import { useFormikContext } from 'formik';
+
+import { DatePicker } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+function FormProduct() {
+ const formik = useFormikContext();
+ const [t] = useTranslation();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default FormProduct
+
+
diff --git a/src/Pages/Coupon/ProductsPage.tsx b/src/Pages/Coupon/ProductsPage.tsx
new file mode 100644
index 0000000..29a62f2
--- /dev/null
+++ b/src/Pages/Coupon/ProductsPage.tsx
@@ -0,0 +1,41 @@
+
+import React from 'react'
+import DashBody from '../../Layout/Dashboard/DashBody'
+import DashHeader from '../../Layout/Dashboard/DashHeader'
+import LyTable from '../../Layout/Dashboard/LyTable'
+import useTableColumns from './useTableColumns'
+import { QueryStatusEnum } from '../../config/QueryStatus'
+import { useGetProduct } from '../../api/product'
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
+
+function ProductsPage() {
+
+ const column =useTableColumns()
+ const {data ,status } = useGetProduct("")
+ console.log(data);
+ const [t] = useTranslation()
+ const navigate = useNavigate()
+
+ return (
+ // Pass Status to Layout
+
+
+ navigate('/products/add')}>
+
+
+
+
+
+
+ )
+}
+
+export default ProductsPage
+
diff --git a/src/Pages/Coupon/View/AddPage.tsx b/src/Pages/Coupon/View/AddPage.tsx
new file mode 100644
index 0000000..6247fe6
--- /dev/null
+++ b/src/Pages/Coupon/View/AddPage.tsx
@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import { getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
+import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
+import 'react-tabs/style/react-tabs.css';
+import { MdLanguage } from 'react-icons/md'
+import { FaSadCry } from 'react-icons/fa'
+import ViewPage from '../../../Layout/Dashboard/ViewPage';
+import { Rate } from 'antd';
+import BasicInfo from './BasicInfo';
+import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
+import { useParams } from 'react-router-dom';
+import LoadingPage from '../../../Layout/app/LoadingPage';
+import { useTranslation } from 'react-i18next';
+import { BsInfoCircle } from 'react-icons/bs';
+import BasicInfo2 from './BasicInfo2';
+import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
+import { useAddProduct } from '../../../api/product';
+
+const AddProductPage = () => {
+
+
+ const {mutate , isLoading , isSuccess} = useAddProduct()
+ const [BarStatus, setBarStatus] = useState({ value: 0, isLoading: false, isError: false, isSuccess: false })
+ const handleSubmit = (values:any)=>{
+
+ console.log(values);
+
+ const formToSend = getDataToSend(values)
+
+
+ mutate(formToSend);
+
+ }
+ const {t} = useTranslation();
+
+ useNavigateOnSuccess(isSuccess , '/products' )
+
+
+
+ const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit, BarStatus };
+
+
+ return (
+
+
+
+
+
+
{t("BasicInfo")}
+
+
{t("BasicInfo2")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default BasicInfo
\ No newline at end of file
diff --git a/src/Pages/Coupon/View/BasicInfo2.tsx b/src/Pages/Coupon/View/BasicInfo2.tsx
new file mode 100644
index 0000000..378d320
--- /dev/null
+++ b/src/Pages/Coupon/View/BasicInfo2.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { Col, Row } from 'reactstrap'
+import KarimField from '../../../Components/Karimalden/KarimField'
+import { useTranslation } from 'react-i18next';
+
+const BasicInfo2 = () => {
+ const [t] = useTranslation();
+
+ const categoryOption = [] as any
+
+
+
+ return (
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+
+{/*
+
+ */}
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default BasicInfo2
\ No newline at end of file
diff --git a/src/Pages/Coupon/View/Page.tsx b/src/Pages/Coupon/View/Page.tsx
new file mode 100644
index 0000000..6fa9f43
--- /dev/null
+++ b/src/Pages/Coupon/View/Page.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react'
+import { getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
+import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
+import 'react-tabs/style/react-tabs.css';
+import { MdLanguage } from 'react-icons/md'
+import { FaSadCry } from 'react-icons/fa'
+import ViewPage from '../../../Layout/Dashboard/ViewPage';
+import { Rate } from 'antd';
+import BasicInfo from './BasicInfo';
+import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
+import { useParams } from 'react-router-dom';
+import LoadingPage from '../../../Layout/app/LoadingPage';
+import { useTranslation } from 'react-i18next';
+import { BsInfoCircle } from 'react-icons/bs';
+import { useGetOneProduct, useUpdateProduct } from '../../../api/product';
+import BasicInfo2 from './BasicInfo2';
+import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
+
+const ViewProduct = () => {
+ const { setObjectToEdit, objectToEdit } = usePageState()
+ const {t} = useTranslation();
+ const { id } = useParams()
+ const { data } = useGetOneProduct({id:id})
+ const [BarStatus, setBarStatus] = useState({ value: 0, isLoading: false, isError: false, isSuccess: false })
+ const {mutate ,isSuccess} = useUpdateProduct()
+ const handleSubmit = (values:any)=>{
+
+ values['product_id'] = id
+
+ values['is_highlight'] =values['is_highlight'] == true ?1 :0
+ values['is_most_purchase'] =values['is_most_purchase'] == true ?1 :0
+
+ const formToSend = getDataToSend(values)
+
+ mutate(formToSend)
+ }
+
+ useNavigateOnSuccess(isSuccess , '/products')
+
+
+ useEffect(() => {
+ console.log(data);
+
+ setObjectToEdit(data);
+
+
+
+ }, [data]);
+
+ useEffect(()=>{
+
+
+ return ()=>{
+ setObjectToEdit(null)
+
+ }
+ },[])
+
+ const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit, BarStatus };
+
+
+ return (
+
+ {objectToEdit && data ?
+
+
+
+
{t("BasicInfo")}
+
+
{t("BasicInfo2")}
+
+
+
+
+
+
+
+
+
+
+
+
+ :
}
+
+
+
- // {
- // !row.deleted_at ? t('available') : t('unavailable')
-
- // }
- //
- // )
- // }
- // },
-
],
[t]
);
diff --git a/src/Pages/Coupon/AddCouponModal.tsx b/src/Pages/Coupon2/AddCouponModal.tsx
similarity index 100%
rename from src/Pages/Coupon/AddCouponModal.tsx
rename to src/Pages/Coupon2/AddCouponModal.tsx
diff --git a/src/Pages/Coupon/AddForm.tsx b/src/Pages/Coupon2/AddForm.tsx
similarity index 89%
rename from src/Pages/Coupon/AddForm.tsx
rename to src/Pages/Coupon2/AddForm.tsx
index 2d4036d..2556b20 100644
--- a/src/Pages/Coupon/AddForm.tsx
+++ b/src/Pages/Coupon2/AddForm.tsx
@@ -6,11 +6,11 @@ import { FakeSelectData } from '../../Layout/app/Const';
import { useFormikContext } from 'formik';
import { DatePicker } from 'antd';
-import { useGetCoupon } from '../../api/Coupon';
+import { useGetSlider } from '../../api/Slider';
function AddForm() {
const formik = useFormikContext();
- const {data } = useGetCoupon()
+ const {data } = useGetSlider()
return (
diff --git a/src/Pages/Coupon/CouponPage.tsx b/src/Pages/Coupon2/CouponPage.tsx
similarity index 97%
rename from src/Pages/Coupon/CouponPage.tsx
rename to src/Pages/Coupon2/CouponPage.tsx
index 45a0235..cffad89 100644
--- a/src/Pages/Coupon/CouponPage.tsx
+++ b/src/Pages/Coupon2/CouponPage.tsx
@@ -24,7 +24,7 @@ function CouponPage() {
{
handleSubmit(values)}
- initialValues={getInitialValues(data)}
+ initialValues={getInitialValues(data?.coupons)}
validationSchema={getValidationSchema}
title='Edit Coupon'
>
diff --git a/src/Pages/Coupon2/formUtil.ts b/src/Pages/Coupon2/formUtil.ts
new file mode 100644
index 0000000..1c5bf86
--- /dev/null
+++ b/src/Pages/Coupon2/formUtil.ts
@@ -0,0 +1,76 @@
+
+import * as Yup from "yup";
+import { buildFormData } from "../../api/helper/buildFormData";
+
+interface formUtilCommon {
+ number:number,
+ value:number
+}
+
+interface ObjectToEdit extends formUtilCommon {
+
+ id?:number,
+
+}
+
+interface InitialValues extends ObjectToEdit {
+
+}
+interface ValidateSchema extends formUtilCommon{
+
+}
+
+export const getInitialValues = (objectToEdit: any | null = null): any => {
+ return {
+ id: objectToEdit?.id ?? 0,
+ name: objectToEdit?.name??"",
+ code: objectToEdit?.code??"",
+ coupon_value: objectToEdit?.coupon_value??"",
+ status: objectToEdit?.status??"",
+ active_to: objectToEdit?.active_to??"",
+ discount_type: objectToEdit?.discount_type??"",
+ coupon_type: objectToEdit?.coupon_type??"",
+ minimum_total_to_order: objectToEdit?.minimum_total_to_order??"",
+ maximum_number_of_uses: objectToEdit?.maximum_number_of_uses??"",
+ useable_by_guest: objectToEdit?.useable_by_guest??"",
+
+ };
+};
+
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema => {
+ // Validate input
+ return Yup.object().shape({
+ name : Yup.string().required('Required'),
+ code : Yup.number().required('Required'),
+ coupon_value : Yup.number().required('Required'),
+ status : Yup.string().required('Required'),
+ active_to : Yup.string().required('Required'),
+ discount_type : Yup.string().required('Required'),
+ coupon_type : Yup.string().required('Required'),
+ minimum_total_to_order : Yup.number().required('Required'),
+ maximum_number_of_uses : Yup.number().required('Required'),
+ useable_by_guest : Yup.string().required('Required'),
+
+ });
+};
+
+
+export const getDataToSend = (values: any): FormData => {
+ const data = { ...values };
+
+
+ const formData = new FormData();
+ buildFormData(formData, data);
+ return formData;
+};
+
+export const ChangeDataToPrint = (data:any)=>{
+
+ let new_array = data
+ for(let i =0 ; i {
+ const [t] = useTranslation();
+ const deleteMutation = useDeleteCoupon()
+ const navigate = useNavigate()
+ return useMemo(
+ () => [
+
+ {
+ name: t("name"),
+ sortable: false,
+ center: "true",
+ cell: (row:any) => row?.name
+ },
+
+ {
+ name: t("code"),
+ sortable: false,
+ center: "true",
+ cell: (row:any) => row?.code
+ },
+ {
+ name: t("coupon_value"),
+ sortable: false,
+ center: "true",
+ cell: (row:any) => row?.coupon_value
+ }
+ ,
+ {
+ name: t("status"),
+ sortable: false,
+ center: true,
+ cell: (row:any) => {
+ return
+
+ }
+ },
+ {
+ name: t("discount_type"),
+ sortable: false,
+ center: "true",
+ cell: (row:any) => row?.discount_type
+ },
+ {
+ name: t("coupon_type"),
+ sortable: false,
+ center: "true",
+ cell: (row:any) => row?.coupon_type
+ },
+ {
+ name: "#",
+ sortable: false,
+ center: true,
+ cell: (row:any) => (
+ navigate(`/Coupon/${row.id}`) }
+ showView={false}
+ onDelete={() => deleteMutation.mutate({ id: row.id })}
+ />
+ ),
+ },
+ // {
+ // name: t("status"),
+ // sortable: false,
+ // center: "true",
+ // cell: (row:any) => {
+
+ // return(
+ //
+ // {
+ // !row.deleted_at ? t('available') : t('unavailable')
+
+ // }
+ //
+ // )
+ // }
+ // },
+
+ ],
+ [t]
+ );
+};
+
+export default useTableColumns;
+
diff --git a/src/Pages/Products/ProductsPage.tsx b/src/Pages/Products/ProductsPage.tsx
new file mode 100644
index 0000000..b615214
--- /dev/null
+++ b/src/Pages/Products/ProductsPage.tsx
@@ -0,0 +1,40 @@
+
+import React from 'react'
+import DashBody from '../../Layout/Dashboard/DashBody'
+import DashHeader from '../../Layout/Dashboard/DashHeader'
+import LyTable from '../../Layout/Dashboard/LyTable'
+import useTableColumns from './useTableColumns'
+import { QueryStatusEnum } from '../../config/QueryStatus'
+import { useGetProduct } from '../../api/product'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
+
+function ProductsPage() {
+
+ const column =useTableColumns()
+ const {data ,status } = useGetProduct()
+ console.log(data);
+ const [t] = useTranslation()
+ const navigate = useNavigate()
+
+ return (
+ // Pass Status to Layout
+
+
+ navigate('/products/add')}>
+
+
+
+
+
+
+ )
+}
+
+export default ProductsPage
+
diff --git a/src/Pages/Products/View/AddPage.tsx b/src/Pages/Products/View/AddPage.tsx
new file mode 100644
index 0000000..e409562
--- /dev/null
+++ b/src/Pages/Products/View/AddPage.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react'
+import { getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
+import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
+import 'react-tabs/style/react-tabs.css';
+import { MdLanguage } from 'react-icons/md'
+import { FaCheck, FaSadCry } from 'react-icons/fa'
+import ViewPage from '../../../Layout/Dashboard/ViewPage';
+import { Rate } from 'antd';
+import BasicInfo from './BasicInfo';
+import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
+import { useParams } from 'react-router-dom';
+import LoadingPage from '../../../Layout/app/LoadingPage';
+import { useTranslation } from 'react-i18next';
+import { BsInfoCircle } from 'react-icons/bs';
+import BasicInfo2 from './BasicInfo2';
+import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
+import { useAddProduct } from '../../../api/product';
+import VarianInfo from './VarianInfo';
+
+const AddProductPage = () => {
+
+
+ const { mutate, isLoading, isSuccess } = useAddProduct()
+ const [BarStatus, setBarStatus] = useState({ value: 0, isLoading: false, isError: false, isSuccess: false })
+ const [IsValed, setIsValed] = useState(1)
+ const handleSubmit = (values: any) => {
+
+
+
+ values['name'] = {
+ "en" : values.name_en,
+ "ar" : values.name_ar,
+ "de" : values.name_de,
+ }
+ values['description'] = {
+ "en" : values.description_en,
+ "ar" : values.description_ar,
+ "de" : values.description_de,
+ }
+
+
+ const infoArray = Object.entries(values.info).map(([key, value]: [string, any]) => ({
+ [key.split('.')[1]]: value
+ }));
+ values["info"]= infoArray
+
+ console.log(infoArray);
+
+ // mutate(values);
+ // console.log(values);
+
+ }
+ const { t } = useTranslation();
+
+ useNavigateOnSuccess(isSuccess, '/products')
+
+
+
+ const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit, BarStatus };
+
+
+ return (
+
+
+
+
+
+
{t("Base_info")} {IsValed ? : "" }
+
+
{t("VarianInfo")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default BasicInfo
\ No newline at end of file
diff --git a/src/Pages/Products/View/BasicInfo2.tsx b/src/Pages/Products/View/BasicInfo2.tsx
new file mode 100644
index 0000000..30b91f9
--- /dev/null
+++ b/src/Pages/Products/View/BasicInfo2.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Col, Row } from 'reactstrap'
+import KarimField from '../../../Components/Karimalden/KarimField'
+import { useTranslation } from 'react-i18next';
+import ObjectField from './ObjectField';
+
+const BasicInfo2 = () => {
+ const [t] = useTranslation();
+
+ const categoryOption = [] as any
+
+
+
+ return (
+
+
+ {/* */}
+
+
+
+ {/* */}
+ {/* */}
+ {/* */}
+
+
+
+
+
+ )
+}
+
+export default BasicInfo2
\ No newline at end of file
diff --git a/src/Pages/Products/View/ObjectField.tsx b/src/Pages/Products/View/ObjectField.tsx
new file mode 100644
index 0000000..01b8b4a
--- /dev/null
+++ b/src/Pages/Products/View/ObjectField.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Card, Form, Input, Space, Typography } from 'antd';
+import { useFormikContext } from 'formik';
+
+const ObjectField: React.FC = () => {
+ const [form] = Form.useForm();
+ const formik = useFormikContext();
+ const [FieldItems, setFieldItems] = useState([])
+ const handleChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setFieldItems((prevState:any) => ({
+ ...prevState,
+ [name]: value
+ }));
+ formik.setFieldValue("info", FieldItems)
+
+ };
+
+ useEffect(() => {
+ form.setFieldsValue({
+ items: [{ list: [{ Attribute: '', Description: '' }] }]
+ });
+
+ }, []);
+
+ return (
+
+ );
+};
+
+export default ObjectField;
diff --git a/src/Pages/Products/View/Page.tsx b/src/Pages/Products/View/Page.tsx
new file mode 100644
index 0000000..95d9b89
--- /dev/null
+++ b/src/Pages/Products/View/Page.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react'
+import { getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
+import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
+import 'react-tabs/style/react-tabs.css';
+import { MdLanguage } from 'react-icons/md'
+import { FaSadCry } from 'react-icons/fa'
+import ViewPage from '../../../Layout/Dashboard/ViewPage';
+import { Rate } from 'antd';
+import BasicInfo from './BasicInfo';
+import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
+import { useParams } from 'react-router-dom';
+import LoadingPage from '../../../Layout/app/LoadingPage';
+import { useTranslation } from 'react-i18next';
+import { BsInfoCircle } from 'react-icons/bs';
+import { useGetOneProduct, useUpdateProduct } from '../../../api/product';
+import BasicInfo2 from './BasicInfo2';
+import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
+import VarianInfo from './VarianInfo';
+
+const ViewProduct = () => {
+ const { setObjectToEdit, objectToEdit } = usePageState()
+ const {t} = useTranslation();
+ const { id } = useParams()
+ const { data } = useGetOneProduct({id:id})
+ const [BarStatus, setBarStatus] = useState({ value: 0, isLoading: false, isError: false, isSuccess: false })
+ const {mutate ,isSuccess} = useUpdateProduct()
+ const handleSubmit = (values:any)=>{
+
+ values['product_id'] = id
+
+ values['is_highlight'] =values['is_highlight'] == true ?1 :0
+ values['is_most_purchase'] =values['is_most_purchase'] == true ?1 :0
+
+ const formToSend = getDataToSend(values)
+
+ mutate(formToSend)
+ }
+
+ useNavigateOnSuccess(isSuccess , '/products')
+
+
+ useEffect(() => {
+ console.log(data);
+
+ setObjectToEdit(data);
+
+
+
+ }, [data]);
+
+ useEffect(()=>{
+
+
+ return ()=>{
+ setObjectToEdit(null)
+
+ }
+ },[])
+
+ const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit, BarStatus };
+
+
+ return (
+
+ {objectToEdit && data ?
+
+
+
+
{t("Base_info")}
+
+
{t("VarianInfo")}
+
+
+
+
+
+
+
+
+
+
+
+
+ :
}
+
+
+
+
+
+ )
+}
+
+export default VarianInfo
\ No newline at end of file
diff --git a/src/Pages/Products/View/taps/NewTabs.tsx b/src/Pages/Products/View/taps/NewTabs.tsx
new file mode 100644
index 0000000..548973c
--- /dev/null
+++ b/src/Pages/Products/View/taps/NewTabs.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const NewTabs = () => {
+ function handelClick(){
+
+ }
+ return (
+
+
+
+ )
+}
+
+export default NewTabs
\ No newline at end of file
diff --git a/src/Pages/Products/View/taps/ResposiveTabs.tsx b/src/Pages/Products/View/taps/ResposiveTabs.tsx
new file mode 100644
index 0000000..e1f87f5
--- /dev/null
+++ b/src/Pages/Products/View/taps/ResposiveTabs.tsx
@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { Tabs, Space, Input } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+const { TabPane } = Tabs;
+
+interface TabItem {
+ label: string;
+ children: string;
+ key: string;
+ closable: boolean;
+}
+
+const initialItemShape: TabItem = {
+ label: 'variable 1',
+ children: 'Content of Tab 1',
+ key: '1',
+ closable: false,
+};
+
+const App: React.FC = () => {
+ const [activeKey, setActiveKey] = useState(initialItemShape.key);
+ const [items, setItems] = useState([initialItemShape]);
+ const [inputValues, setInputValues] = useState<{ [key: string]: string[] }>({});
+ const onChange = (newActiveKey: string) => {
+ setActiveKey(newActiveKey);
+ };
+
+ const add = () => {
+ const newActiveKey = `${items.length + 1}`;
+ const newItem: TabItem = {
+ ...initialItemShape,
+ key: newActiveKey,
+ label: `variable ${newActiveKey}`,
+ };
+ const newPanes = [...items, newItem];
+ setItems(newPanes);
+ setActiveKey(newActiveKey);
+ };
+
+ const duplicate = (targetKey: string) => {
+ const targetItem = items.find((item) => item.key === targetKey);
+ if (targetItem) {
+ const newActiveKey = `${items.length + 1}`;
+ const newItem: TabItem = {
+ ...targetItem,
+ key: newActiveKey,
+ label: `variable ${newActiveKey}`,
+ };
+ const newPanes = [...items, newItem];
+ setItems(newPanes);
+ setActiveKey(newActiveKey);
+ }
+ };
+
+ const remove = (targetKey: string) => {
+ let newActiveKey = activeKey;
+ let lastIndex = -1;
+ items.forEach((item, i) => {
+ if (item.key === targetKey) {
+ lastIndex = i - 1;
+ }
+ });
+ const newPanes = items.filter((item) => item.key !== targetKey);
+ if (newPanes.length && newActiveKey === targetKey) {
+ if (lastIndex >= 0) {
+ newActiveKey = newPanes[lastIndex].key;
+ } else {
+ newActiveKey = newPanes[0].key;
+ }
+ }
+ setItems(newPanes);
+ setActiveKey(newActiveKey);
+ };
+
+ const handleInputChange = (key: string, values: string[]) => {
+ setInputValues((prevInputValues) => ({
+ ...prevInputValues,
+ [key]: values,
+ }));
+ console.log(inputValues);
+ };
+
+ const onEdit = (
+ targetKey: string | React.MouseEvent | React.KeyboardEvent,
+ action: 'add' | 'remove'
+ ) => {
+ if (action === 'add') {
+ add();
+ } else {
+ remove(targetKey as string);
+ }
+ };
+
+ return (
+
+ {items.map((item) => (
+
+ {item.label}
+ duplicate(item.key)} />
+
+ }
+ closable={item.closable}
+ >
+ handleInputChange(item.key, values)}
+ />
+
+ ))}
+
+ );
+};
+
+interface VariableTabsProps {
+ value: string[];
+ onChange: (value: string[]) => void;
+}
+
+const VariableTabs: React.FC = ({ value, onChange }) => {
+ const handleInputChange = (index: number) => (e: React.ChangeEvent) => {
+ const newValues = [...value];
+ newValues[index] = e.target.value;
+ onChange(newValues);
+ };
+ const [t] = useTranslation()
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/src/Pages/Products/View/varianForm.tsx b/src/Pages/Products/View/varianForm.tsx
new file mode 100644
index 0000000..5505375
--- /dev/null
+++ b/src/Pages/Products/View/varianForm.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Col, Row } from 'reactstrap'
+import KarimField from '../../../Components/Karimalden/KarimField'
+import { useTranslation } from 'react-i18next';
+
+const varianForm = () => {
+ const [t] = useTranslation();
+
+ return (
+
+
+
+
+
+
+ {/* */}
+ {/* */}
+
+
+
+
+
+ )
+}
+
+export default varianForm
\ No newline at end of file
diff --git a/src/Pages/Products/formUtil.ts b/src/Pages/Products/formUtil.ts
new file mode 100644
index 0000000..f0d0889
--- /dev/null
+++ b/src/Pages/Products/formUtil.ts
@@ -0,0 +1,61 @@
+
+import * as Yup from "yup";
+import { buildFormData } from "../../api/helper/buildFormData";
+import { mapTranslatedProperties } from "../../utils/language/mapTranslatedProperties";
+
+
+
+export const getInitialValues = (objectToEdit: any | null = null) => {
+
+ // console.log(objectToEdit);
+
+ return {
+ id: objectToEdit?.id ?? 0,
+ name:objectToEdit?.name ?? "",
+ name_ar: objectToEdit?.name?.ar ?? '',
+ name_en: objectToEdit?.name?.en ?? '',
+ name_de: objectToEdit?.name?.de ?? '',
+ description: objectToEdit?.description ?? '',
+ price:objectToEdit?.price??"",
+ main_photo:objectToEdit?.main_photo??"",
+ images:objectToEdit?.images??"",
+ category_id:objectToEdit?.category_id??1,
+ variable:[],
+
+ }
+};
+
+export const getValidationSchema = (editMode: boolean = false) => {
+ // validate input
+ return Yup.object().shape({
+ // name_ar: Yup.string().required('Required'),
+ // name_en: Yup.string().required('Required'),
+ // name_de: Yup.string().required('Required'),
+ // description_ar: Yup.string().required('Required'),
+ // description_en: Yup.string().required('Required'),
+ // description_de: Yup.string().required('Required'),
+ // price: Yup.number().required('Required'),
+ // // info: Yup.string().required('Required'),
+ // main_photo: Yup.string().required('Required'),
+ // // images: Yup.string().required('Required'),
+ // category_id: Yup.string().required('Required'),
+ // quantity: Yup.number().required('Required'),
+
+ });
+};
+
+export const getDataToSend = (values: any): FormData => {
+ const data = { ...values };
+ // console.log(data);
+
+ if(typeof data['product_main_image'] == 'string') delete data['product_main_image']
+
+ data['en_product_name'] = values['translated_fields']['1']['product_name']
+data['ar_product_name'] =values['translated_fields']['2']['product_name']
+data['ar_product_description'] =values['translated_fields']['2']['product_description']
+data['en_product_description'] =values['translated_fields']['1']['product_description']
+ const formData = new FormData();
+ buildFormData(formData, data);
+ return formData;
+};
+
diff --git a/src/Pages/Products/useTableColumns.tsx b/src/Pages/Products/useTableColumns.tsx
new file mode 100644
index 0000000..c827704
--- /dev/null
+++ b/src/Pages/Products/useTableColumns.tsx
@@ -0,0 +1,92 @@
+
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import Actions from "../../Components/Ui/tables/Actions";
+import { HovarableImage } from "../../Components/Ui";
+import { BaseURL } from "../../api/config";
+import { ToggleStatus } from "../../Components/Ui/ToggleStatus";
+import ColumnsImage from "../../Components/Columns/ColumnsImage";
+import LoadingSpinner from "../../Components/Ui/LoadingSpinner";
+import { Switch } from "antd";
+import { mapTranslatedProperties } from "../../utils/language/mapTranslatedProperties";
+// import { useDeleteProduct, useUpdateProductStatus } from "../../api/owner_products";
+import { useNavigate } from "react-router-dom";
+import { useDeleteProduct, useUpdateProductStatus } from "../../api/product";
+
+
+const useTableColumns :any = () => {
+ const [t] = useTranslation();
+ const toggleMutation = useUpdateProductStatus();
+ const deleteMutation = useDeleteProduct();
+
+ const navigate = useNavigate()
+ const handleChange = (row:any)=> {
+ const status = row?.favorite ;
+ toggleMutation.mutate({id:row?.id,new_status:status})
+
+ }
+
+ return useMemo(
+ () => [
+
+ {
+ name: t("image"),
+ center: "true",
+ cell: (row: any) => {
+ return (
+
+ )
+ }
+ },
+ {
+ name: t("name"),
+ sortable: false,
+ center: true,
+ selector:(row:any) => row?.name,
+
+ },
+ {
+ name: t("price"),
+ sortable: false,
+ center: true,
+ selector:(row:any) => row?.price,
+
+ },
+ {
+ name: t("description"),
+ sortable: false,
+ center: true,
+ cell: (row:any) => (
+ row?.description
+ ),
+ },
+
+ {
+ name: t("favorite"),
+ sortable: false,
+ center: true,
+ cell: (row:any) => (
+
+ ),
+ },
+ {
+ name: "#",
+ sortable: false,
+ center: "true",
+ cell: (row:any) => (
+ navigate('/products/'+row.id)}
+ objectToEdit={row}
+ showEdit={true}
+ showView={false}
+ onDelete={() => deleteMutation.mutate({ product_id: row.id })}
+ />
+ ),
+ },
+ ],
+ [t]
+ );
+};
+
+export default useTableColumns;
+
diff --git a/src/Pages/order/OrderPage.tsx b/src/Pages/order/OrderPage.tsx
new file mode 100644
index 0000000..1a4d5ad
--- /dev/null
+++ b/src/Pages/order/OrderPage.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import useTableColumns from "./useTableColumns";
+import DashBody from "../../Layout/Dashboard/DashBody";
+import DashHeader from "../../Layout/Dashboard/DashHeader";
+import { QueryStatusEnum } from "../../config/QueryStatus";
+import LyTable from "../../Layout/Dashboard/LyTable";
+import { useTranslation } from "react-i18next";
+import { useGetOrder } from "../../api/order";
+// import SearchField from "../../Components/Karimalden/View/SearchField";
+const OrderPage = () => {
+ const [t] = useTranslation();
+
+
+
+ //filters
+ const [search, setSearchText] = React.useState("");
+
+
+ const filterIsApplied = search !== "";
+
+
+
+
+ //Table Content -- Data + Columns
+ const { data, isLoading , status } = useGetOrder({search});
+ console.log(data);
+
+ const totalRows = data?.pagination?.total || 0;
+
+ const columns = useTableColumns();
+
+ return (
+ <>
+
+
+ {/* */}
+
+
+
+
+
+ );
+};
+
+export default OrderPage;
diff --git a/src/Pages/order/Select.js b/src/Pages/order/Select.js
new file mode 100644
index 0000000..0071fb7
--- /dev/null
+++ b/src/Pages/order/Select.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import {
+ Dropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+import PropTypes from 'prop-types';
+import {BsArrowDownShort} from 'react-icons/bs'
+import { useTranslation } from 'utility/language';
+
+function SelectType({ direction, title , setSelectType,setRefreshPage}) {
+ const t = useTranslation()
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen((prevState) => !prevState);
+
+ return (
+
+
+ {t(localStorage.getItem('order_status') || 'all')}
+
+ {
+ setRefreshPage(v => !v)
+ setSelectType('status')
+ localStorage.setItem('order_status','')
+ }} style={{width:"100%", }}>{t('all')}
+ {
+ setRefreshPage(v => !v)
+ setSelectType('complete')
+ localStorage.setItem('order_status','complete')
+ }} style={{color:"black", width:"100%"}}>{t('complete')}
+ {
+ setRefreshPage(v => !v)
+ setSelectType('canceled')
+ localStorage.setItem('order_status','canceled')
+ }} style={{color:"black", width:"100%"}}>{t('canceled')}
+
+
+
+
+ );
+}
+
+SelectType.propTypes = {
+ direction: PropTypes.string,
+};
+
+export default SelectType;
diff --git a/src/Pages/order/form/formUtils.js b/src/Pages/order/form/formUtils.js
new file mode 100644
index 0000000..2df2197
--- /dev/null
+++ b/src/Pages/order/form/formUtils.js
@@ -0,0 +1,61 @@
+import * as Yup from "yup";
+import { buildFormData } from "api/helpers";
+
+export const getInitialValues = (objectToEdit = null) => {
+ if (!objectToEdit) {
+ return {
+ driver_name:"",
+ driver_id_number: "",
+ driver_car_back_side:""
+ };
+ }
+
+ return {
+ driver_name:objectToEdit.driver_name,
+ driver_id_number: objectToEdit.driver_id_numbert,
+ customer_image: "",
+ driver_car_back_side:""
+
+ };
+};
+
+export const getValidationSchema = (editMode = false) => {
+ return Yup.object().shape({
+ customer_name:Yup.string().required("required"),
+ driver_id_number: Yup.number().required("required"),
+
+
+
+ ...(!editMode && {
+ subcategory_image: Yup.mixed().required("required"),
+ }),
+ });
+};
+
+export const getDataToSend = (values) => {
+ const data = { ...values };
+ if (values.subcategory_image === "") {
+ delete data["subcategory_image"];
+ }
+ const formData = new FormData();
+ buildFormData(formData, data);
+ return formData;
+};
+export const selectFailGender = [
+ {value : "female" , label:"female"},
+ {value:"male" , label:"male"}
+]
+
+
+export const ChangePointShape = (array_of_points)=>{
+ let my_new_array = [];
+ for (let index = 0; index < array_of_points.length; index+=5) {
+ const my_latlong =(array_of_points[index]).split(',')
+ my_new_array.push({
+ lat:+ my_latlong[0],
+ lng:+my_latlong[1]
+ })
+
+ }
+ return my_new_array ;
+}
\ No newline at end of file
diff --git a/src/Pages/order/useTableColumns.tsx b/src/Pages/order/useTableColumns.tsx
new file mode 100644
index 0000000..44eceff
--- /dev/null
+++ b/src/Pages/order/useTableColumns.tsx
@@ -0,0 +1,113 @@
+import React, { useMemo } from "react";
+// import { history } from "../../../history";
+// import { GrView } from "react-icons/gr";
+// import OrderStatus from "components/OrderStatus";
+// import Actions from "components/table/TableActions";
+import { useTranslation } from "react-i18next";
+import { useDeleteOrder } from "../../api/order";
+import { GrView } from "react-icons/gr";
+import Actions from "../../Components/Ui/tables/Actions";
+import { history } from "../../ProviderContainer";
+import { useNavigate } from "react-router-dom";
+import ColumnsImage from "../../Components/Columns/ColumnsImage";
+
+const useTableColumns = () => {
+ const [t] = useTranslation();
+ const navigate = useNavigate()
+ const deleteMutation = useDeleteOrder()
+
+ let column = [
+ {
+ name: t("order_code"),
+ sortable: false,
+ center:true,
+ selector:(row:any) => row?.id,
+ },
+ {
+ name: t("image"),
+ sortable: false,
+ center:true,
+ selector:(row:any) => {
+ const {avatar} = row.user
+ return(
+
+
+ )
+ }
+ },
+
+ {
+ name: t("name"),
+ sortable: false,
+ center:true,
+ selector:(row:any) => row?.user?.name,
+
+ },
+ {
+ name: t("email"),
+ sortable: false,
+ center:true,
+ selector:(row:any) => row?.user?.email,
+
+ },
+ {
+ name: t("status"),
+ center: true,
+
+ cell:(row:any)=>{
+
+ return row?.order_status;
+ // return
+
+ }
+ },
+ {
+ name: t("payment_method"),
+ selector: "payment_method",
+ center: true,
+ cell:(row:any)=>{
+ return t(row?.payment_method)
+ }
+ },
+ {
+ name: t("price"),
+ center: true,
+ cell:(row:any)=>{
+ console.log(row);
+
+ return (row?.order_total)
+ }
+ },
+ {
+ name: "#",
+ center: true,
+ cell: (row:any) =>
+
+
+ deleteMutation.mutate({order_id:row.id })}
+ showEdit={false}
+ onView={()=>navigate(`/order/${row?.id}` , {replace:true})}
+ />
+
+
+
+
+ },
+
+
+
+
+ ]
+
+
+
+
+
+ return column
+
+};
+
+export default useTableColumns;
diff --git a/src/Pages/order/view-one/Order.js b/src/Pages/order/view-one/Order.js
new file mode 100644
index 0000000..959523b
--- /dev/null
+++ b/src/Pages/order/view-one/Order.js
@@ -0,0 +1,93 @@
+import Reac from 'react'
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle } from 'reactstrap';
+import OrderForm from './OrderForm';
+import DataTable from 'react-data-table-component';
+import useTableColumns from './useTableColumns';
+import { useTranslation } from 'react-i18next';
+import { useGetOneOrder } from '../../../api/order';
+import LoadingPage from '../../../Layout/app/LoadingPage';
+import { history } from '../../../ProviderContainer';
+import StatusOrderController from './StatusOrderController';
+
+
+
+
+
+
+export default function Order() {
+ const { id } = useParams();
+ const [t] = useTranslation();
+
+
+
+ const navigate = useNavigate()
+
+
+ const { data, isLoading, notFound } = useGetOneOrder({id: id })
+
+
+ const order = data?.data || {};
+
+
+ const columns = useTableColumns();
+ const items = order?.products ;
+
+ console.log(items);
+
+console.log(order);
+
+ if (isLoading) {
+ return ()
+ }
+
+ return (
+
+
+
+
+ {t("order_id")} : {order?.id}
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+ {("no_records")}}
+ // noHeader
+
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/src/Pages/order/view-one/OrderForm.js b/src/Pages/order/view-one/OrderForm.js
new file mode 100644
index 0000000..b022f1c
--- /dev/null
+++ b/src/Pages/order/view-one/OrderForm.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { Row, Col } from 'reactstrap'
+import classes from './OrderForm.module.scss';
+import { useTranslation } from 'react-i18next';
+import { ChangeformatDate } from '../../../utils/Date/ChangeFormat';
+export default function OrderForm({ order }) {
+
+ const [t] = useTranslation();
+ return (
+ <>
+
+
+ {t("customer_name")}{" : "}{order.user?.name}
+ {t("customer_phone_number")}{" : "}{order.user?.phone}
+ {t("order_created_at")}{" : "}{ChangeformatDate(order.created_at)}
+
+
+ {t("address")}{" : "}{order?.form?.address}
+ {t("country")}{" : "}{order?.form?.country}
+ {t("note")}{" : "}{order?.form?.note}
+
+
+
+
+
+
+
+
+
+
{t("totals")}
+
{t("sub_total")}{" : "}{order?.total}
+
{t("delivery_fee")}{" : "}{0}
+
{t("overall_total")}{" : "}{order?.total}
+
+
+ )
+}
diff --git a/src/Pages/order/view-one/OrderForm.module.scss b/src/Pages/order/view-one/OrderForm.module.scss
new file mode 100644
index 0000000..4e64eee
--- /dev/null
+++ b/src/Pages/order/view-one/OrderForm.module.scss
@@ -0,0 +1,36 @@
+.totalsForm {
+ width: 60%;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 1rem;
+ border-radius: 10px;
+ border: 3px solid #122236;
+ margin-bottom: 10px;
+}
+
+.Wrapper {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1rem;
+}
+.Wrapper h1{
+ color: #122236;
+}
+
+.test {
+ padding: 1rem;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-direction: column;
+
+}
+
+p {
+ font-weight: 600;
+}
diff --git a/src/Pages/order/view-one/OrderStatus.js b/src/Pages/order/view-one/OrderStatus.js
new file mode 100644
index 0000000..0a90a8f
--- /dev/null
+++ b/src/Pages/order/view-one/OrderStatus.js
@@ -0,0 +1,31 @@
+import React from "react";
+import { Badge } from "reactstrap";
+
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+
+const OrderStatus = ({ order_status }) => {
+ const [t] = useTranslation();
+ const all={
+ pending:{color:"secondary"},
+ accepted:{color:"success"},
+ accept:{color:"success"},
+ delivering:{color:"primary"},
+ delivered:{color:"success"},
+ canceled:{color:"danger"}
+ }
+
+
+
+ return (
+
+ {t(order_status)}
+
+ );
+};
+
+OrderStatus.propTypes = {
+ order_status: PropTypes.string.isRequired,
+};
+
+export default OrderStatus;
diff --git a/src/Pages/order/view-one/StatusOrderController.js b/src/Pages/order/view-one/StatusOrderController.js
new file mode 100644
index 0000000..e2330bd
--- /dev/null
+++ b/src/Pages/order/view-one/StatusOrderController.js
@@ -0,0 +1,80 @@
+import React from 'react'
+
+import OrderStatus from './OrderStatus';
+import { useTranslation } from 'react-i18next';
+import { useAcceptOrder, useCancelOrder, useDeliverOrder, useDeliveredOrder } from '../../../api/order';
+import { LoadingButton } from '../../../Components/Ui/LoadingButton';
+export default function StatusOrderController({ order_status, order_id }) {
+ const acceptMutation = useAcceptOrder();
+ const cancelMutation = useCancelOrder();
+ const deliverMutation = useDeliverOrder();
+ const deliveredMutation = useDeliveredOrder();
+ const [t] = useTranslation();
+ const controll = {
+ pending: {
+ nextMutation: acceptMutation,
+ nextLabel: "accept",
+ nextColor: "primary",
+ prevMutation: cancelMutation,
+ prevLabel: "cancel",
+ prevColor: "danger",
+ },
+ accepted: {
+ nextMutation: deliverMutation,
+ nextLabel: "deliver",
+ nextColor: "primary",
+ prevMutation: cancelMutation,
+ prevLabel: 'cancel',
+ prevColor: "danger",
+ },
+ delivering: {
+ nextMutation: deliveredMutation,
+ nextLabel: "delivered",
+ nextColor: "primary",
+ prevMutation: cancelMutation,
+ prevLabel: 'cancel',
+ prevColor: "danger",
+ },
+ delivered: {
+ nextMutation: null,
+ nextLabel: null,
+ prevMutation: null,
+ prevLabel: null
+ },
+ canceled: {
+ nextMutation: null,
+ nextLabel: null,
+ prevMutation: null,
+ prevLabel: null
+ },
+
+ }
+ return (
+
+
+
{t("order_status")}{" : "}{}
+ {
+ controll[order_status].nextMutation && controll[order_status].nextLabel &&
controll[order_status].nextMutation.mutate({ order_id: order_id })}
+ >
+ {t(controll[order_status].nextLabel)}
+
+ }
+
+ {
+ controll[order_status].prevMutation && controll[order_status].prevLabel &&
controll[order_status].prevMutation.mutate({ order_id: order_id })}
+ >
+ {t(controll[order_status].prevLabel)}
+
+ }
+
+
+
*/}
- 
+ {/* 
+