+ {
+ options.onConfirm();
+ onClose();
+ }}
+ onCancel={onClose}
+
+ />
+
+
+ );
+}
diff --git a/src/Components/Ui/CheckboxesVuexy.tsx b/src/Components/Ui/CheckboxesVuexy.tsx
new file mode 100644
index 0000000..5bc635e
--- /dev/null
+++ b/src/Components/Ui/CheckboxesVuexy.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+interface CheckBoxesVuexyProps {
+ className?: string;
+ color: string;
+ defaultChecked?: boolean;
+ checked?: boolean;
+ value?: string;
+ disabled?: boolean;
+ onClick?: () => void;
+ onChange?: () => void;
+ size?: string;
+ icon: React.ReactNode;
+ label: string;
+}
+
+const CheckBoxesVuexy: React.FC
+
+
+ {icon}
+
+ {label}
+
+ );
+};
+
+export default CheckBoxesVuexy;
diff --git a/src/Components/Ui/FileInput.tsx b/src/Components/Ui/FileInput.tsx
new file mode 100644
index 0000000..94c5df0
--- /dev/null
+++ b/src/Components/Ui/FileInput.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Input } from 'reactstrap';
+import { useFormikContext } from 'formik';
+
+type FileInputProps = {
+ name:string,
+ label:string,
+ accept:string,
+ onChange:any
+}
+function FileInput({name , accept="image/*" ,label , onChange} :FileInputProps) {
+
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default FileInput
\ No newline at end of file
diff --git a/src/Components/Ui/HovarableImage.tsx b/src/Components/Ui/HovarableImage.tsx
new file mode 100644
index 0000000..c56b31c
--- /dev/null
+++ b/src/Components/Ui/HovarableImage.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Tooltip } from "reactstrap";
+
+const tooltipStyle = {
+ backgroundColor: "white",
+ border: "2px solid lightgrey",
+ maxWidth: "400px",
+};
+
+const HovarableImage = ({ id, src, imgPreviewProps = {}, ...props }:any) => {
+ const [isOpen, setIsOpen] = React.useState(false);
+ const ID = `image_hover_tooltip_${id}`;
+ const toggleTooltip = React.useCallback(() => setIsOpen((prev) => !prev), []);
+
+ return (
+
+ 
+
+
+
+
+ );
+};
+
+export default HovarableImage;
+
diff --git a/src/Components/Ui/ImagePreview.tsx b/src/Components/Ui/ImagePreview.tsx
new file mode 100644
index 0000000..04e2177
--- /dev/null
+++ b/src/Components/Ui/ImagePreview.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const ImagePreview = ({ preview, height = 200 }:any) => {
+ const [t] = useTranslation();
+
+ return (
+
+ {preview ? (
+ 
+ ) : (
+
+ );
+};
+
+export default ImagePreview;
diff --git a/src/Components/Ui/LoadingButton.tsx b/src/Components/Ui/LoadingButton.tsx
new file mode 100644
index 0000000..248c486
--- /dev/null
+++ b/src/Components/Ui/LoadingButton.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Button, Spinner } from "reactstrap";
+
+const LoadingButton = ({ isLoading = false, ...props }) => {
+ return (
+
+ );
+};
+
+export { LoadingButton };
diff --git a/src/Components/Ui/LoadingSpinner.tsx b/src/Components/Ui/LoadingSpinner.tsx
new file mode 100644
index 0000000..efa5055
--- /dev/null
+++ b/src/Components/Ui/LoadingSpinner.tsx
@@ -0,0 +1,10 @@
+import { Spin } from 'antd'
+import React from 'react'
+
+function LoadingSpinner() {
+ return (
+ {t("image_preview")}
+ )}
+
+
+
+
+
+ );
+};
+
+
+export default ProgressBar;
diff --git a/src/Components/Ui/SelectField.tsx b/src/Components/Ui/SelectField.tsx
new file mode 100644
index 0000000..f794e31
--- /dev/null
+++ b/src/Components/Ui/SelectField.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Select from "react-select";
+import { ValidatedField } from "./ValidatedField";
+import { useFormikContext } from "formik";
+
+const SelectField = ({ label, name, options, ...props }:any) => {
+ const formik = useFormikContext
+
+
+ {/*
+ {CardTitle}
*/} +{icon}
+
+ {/*
+ {count}
*/} +{CardContent}
+
+ {showEdit &&
+ confirmAlert({
+ onConfirm: () => {
+ onDelete();
+
+ },
+ })
+ }
+ className="cursor-pointer"
+ size={20}
+ />
+ )}
+ {children}
+
+);
+};
+export default TableActions;
diff --git a/src/Components/Ui/ThreeSwitchState/TripleSwitch.tsx b/src/Components/Ui/ThreeSwitchState/TripleSwitch.tsx
new file mode 100644
index 0000000..c36ffbd
--- /dev/null
+++ b/src/Components/Ui/ThreeSwitchState/TripleSwitch.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import type { RadioChangeEvent } from 'antd';
+import { Radio } from 'antd';
+
+const onChange = (e: RadioChangeEvent) => {
+ console.log(`radio checked:${e.target.value}`);
+};
+
+const App: React.FC = () => (
+ <>
+
+
+
+
+
+ );
+};
diff --git a/src/Components/Ui/ValidatedField.tsx b/src/Components/Ui/ValidatedField.tsx
new file mode 100644
index 0000000..c2bd089
--- /dev/null
+++ b/src/Components/Ui/ValidatedField.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { ErrorMessage, useField, Field } from "formik";
+import { FormGroup } from "reactstrap";
+import { useTranslation } from "react-i18next";
+
+const ValidatedField = ({
+ name,
+ label,
+ CustomField,
+ icon: Icon,
+ optional,
+ labelIcon = null,
+ formProps,
+ isRequired,
+
+ ...props
+}:any) => {
+
+ const [field, meta] = useField({ name, ...props });
+ const [t] = useTranslation();
+
+ let Wrapper = Field;
+
+ if (CustomField) {
+ Wrapper = CustomField;
+ }
+ const fieldProps = props.type === "file" ? {} : { ...field };
+
+ return (
+ <>
+ {label && (
+
+ )}
+ + {object.is_active ? t("active") : t("inactive")} +
+
+
+ )}
+
+ {showEdit && {
+ setObjectToEdit(objectToEdit)
+ setIsOpenEditModel()
+ onEdit()
+
+ }} className="cursor-pointer m-2" size={20} />}
+ {showView &&
+ CustomConfirmAlert({
+ onConfirm: () => {
+
+
+ onDelete();
+
+ },
+ })
+ }
+ className="cursor-pointer"
+ size={20}
+ />
+ )}
+
+ {children}
+
+);
+};
+export default TableActions;
diff --git a/src/Components/Ui/tables/ConfirmAlert.tsx b/src/Components/Ui/tables/ConfirmAlert.tsx
new file mode 100644
index 0000000..bb99f66
--- /dev/null
+++ b/src/Components/Ui/tables/ConfirmAlert.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { confirmAlert } from "react-confirm-alert";
+import SweetAlert from "react-bootstrap-sweetalert";
+
+interface CustomUIProps {
+ onClose: () => void;
+ options: {
+ title?: string;
+ confirmBtnText?: string;
+ cancelBtnText?: string;
+ onConfirm: () => void;
+ body?: string;
+ };
+}
+
+export default function CustomConfirmAlert(options: any) {
+ confirmAlert({
+ customUI: ({ onClose }) =>
+
+ {t('blocking_')}{type}
+
+
+
+
+
+
+
+ {t('add_block_for_')}{type}
+
+
+
+
+ )
+}
+
+export default Loading
\ No newline at end of file
diff --git a/src/Components/Utils/SearchBar/SearchBar.scss b/src/Components/Utils/SearchBar/SearchBar.scss
new file mode 100644
index 0000000..6834dcf
--- /dev/null
+++ b/src/Components/Utils/SearchBar/SearchBar.scss
@@ -0,0 +1,43 @@
+.SearchBar{
+ .group {
+ display: flex;
+ align-items: center;
+ position: relative;
+ max-width: 190px;
+ }
+
+ .input {
+ width: 100%;
+ height: 40px;
+ padding: 0 1rem;
+ padding-left: 2.5rem;
+ border-radius: 8px;
+ outline: none;
+ font-weight: 500;
+ background: var(--primary);
+ color: var(--bg);
+ border: none;
+ box-shadow: 2px 2px 7px 0 var(--primary);
+
+ }
+
+ .input::placeholder {
+ color: var(--bg);
+ }
+
+
+
+ .icon {
+ position: absolute;
+ left: 1rem;
+ fill: var(--bg);
+ width: 1rem;
+ height: 1rem;
+ }
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/src/Components/Utils/SearchBar/SearchBar.tsx b/src/Components/Utils/SearchBar/SearchBar.tsx
new file mode 100644
index 0000000..f1f5cd2
--- /dev/null
+++ b/src/Components/Utils/SearchBar/SearchBar.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import './SearchBar.scss'
+const SearchBar = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default SearchBar
\ No newline at end of file
diff --git a/src/Components/Utils/Theme.tsx b/src/Components/Utils/Theme.tsx
new file mode 100644
index 0000000..41cd9f3
--- /dev/null
+++ b/src/Components/Utils/Theme.tsx
@@ -0,0 +1,84 @@
+import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
+import { useTranslation } from 'react-i18next';
+import { usePageState } from '../../lib/statemangment/LayoutPagestate';
+import { BsFillMoonStarsFill, BsFillSunFill, BsSunglasses } from 'react-icons/bs';
+
+
+let What_the_Theme = localStorage.getItem('theme') ?? "light";
+
+if (What_the_Theme === "dark") {
+
+ document.body.classList.add('dark')}
+ else if (What_the_Theme === "glass") {
+
+ document.body.classList.add('glass')
+ }
+
+
+
+
+export default function Theme() {
+ const {t} = useTranslation();
+
+ const {setThemChange} = usePageState()
+
+ const changeTheme = (newTheme : any) => {
+
+
+ if(newTheme === "dark"){
+ document.body.classList.remove('glass');
+ document.body.classList.add('dark');localStorage.setItem("theme", "dark");
+ What_the_Theme = "dark"
+ }
+ else if(newTheme === "light"){
+ document.body.classList.remove('glass');
+ document.body.classList.remove('dark');localStorage.setItem("theme", "light");
+ What_the_Theme = "light"
+
+ }
+ else if(newTheme === "glass"){
+ document.body.classList.remove('dark'); document.body.classList.add('glass'); localStorage.setItem("theme", "glass");
+ What_the_Theme = "glass"
+
+ }
+ setThemChange()
+ };
+ /// BsSunglasses BsFillSunFill BsFillMoonStarsFill
+
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/Components/Utils/Translate.tsx b/src/Components/Utils/Translate.tsx
new file mode 100644
index 0000000..a5aa816
--- /dev/null
+++ b/src/Components/Utils/Translate.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Menu, Dropdown } from 'antd';
+import { useLanguage, useLanguageMenu } from '../../Hooks/useChangeLanguage';
+import i18next from 'i18next';
+import type { MenuProps } from 'antd';
+
+export default function Translate() {
+ const { changeLanguage } = useLanguage();
+ const { languageOptions } = useLanguageMenu();
+
+ const handleLanguageChange = (newLanguage:string) => {
+ changeLanguage(newLanguage);
+ };
+
+ const items : MenuProps['items'] = languageOptions.map((option:any,index:number) => ({
+ key: index,
+ label: (
+ handleLanguageChange(option.code)}>
+ 
+ {option.label}
+
+ )
+ }));
+
+
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/Components/Utils/UnBlockModal.tsx b/src/Components/Utils/UnBlockModal.tsx
new file mode 100644
index 0000000..85a8e3c
--- /dev/null
+++ b/src/Components/Utils/UnBlockModal.tsx
@@ -0,0 +1,60 @@
+
+import React, { useEffect } from 'react';
+import { BsExclamationCircle } from 'react-icons/bs';
+import { Button, Card, CardBody, Input, Label, Modal, ModalHeader } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { LoadingButton } from '../Ui/LoadingButton';
+import { useCommonModelState } from '../../lib/statemangment/driver&customer/ModelState';
+import { CiLock } from "react-icons/ci";
+
+interface UnBlockModalProps {
+
+ Mutation:any,
+ type :'customer' |'driver'
+}
+
+const UnBlockModal: React.FC
+
+ {t('un_blocking_')}{type}
+
+
+
+
+
+ {t('un_block_for_')}{type}
+
+
+
+ {loading ? (
+
+ );
+};
+
+export default KarimSpinner;
diff --git a/src/Components/ValidationField/Ui/SearchBar.scss b/src/Components/ValidationField/Ui/SearchBar.scss
new file mode 100644
index 0000000..9dc4900
--- /dev/null
+++ b/src/Components/ValidationField/Ui/SearchBar.scss
@@ -0,0 +1,37 @@
+.SearchBar {
+ // margin-top: 20px;
+ .group {
+ display: flex;
+ align-items: center;
+ position: relative;
+ max-width: 350px;
+ width: 350px;
+ }
+
+ .input {
+ width: 100%;
+ height: 40px;
+ padding: 0 1rem;
+ padding-left: 2.5rem;
+ border-radius: 8px;
+ outline: none;
+ font-weight: 500;
+ background: var(--bg);
+ color: var(--text);
+ border: none;
+ box-shadow: 2px 2px 7px 0 var(--bg);
+ }
+
+ .input::placeholder {
+ color: var(--subtext);
+ opacity: 0.4;
+ }
+
+ .icon {
+ position: absolute;
+ left: 1rem;
+ fill: var(--subtext);
+ width: 1rem;
+ height: 1rem;
+ }
+}
diff --git a/src/Components/ValidationField/Ui/SearchBar.tsx b/src/Components/ValidationField/Ui/SearchBar.tsx
new file mode 100644
index 0000000..46d2566
--- /dev/null
+++ b/src/Components/ValidationField/Ui/SearchBar.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import "./SearchBar.scss";
+import { useNavigate, useSearchParams } from "react-router-dom";
+const SearchBar = () => {
+ const [searchQuery, setSearchQuery] = useState("");
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
+
+ const handleChange = (event: any) => {
+ const { value } = event.target;
+ setSearchQuery(value);
+ updateUrlParams(value);
+ };
+
+ const updateUrlParams = (value: any) => {
+ navigate(`?search=${value}`, { replace: true });
+ };
+
+ return (
+
+
+ ) : (
+ children
+ )}
+
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/Components/ValidationField/ValidationField.tsx b/src/Components/ValidationField/ValidationField.tsx
new file mode 100644
index 0000000..7d3cc79
--- /dev/null
+++ b/src/Components/ValidationField/ValidationField.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import "./utils/ValidationField.scss";
+import {
+ Date,
+ Time,
+ File,
+ DataRange,
+ SelectField,
+ Default,
+ CheckboxField,
+ MaltyFile,
+ SearchField,
+ TextField,
+ DropFile,
+} from "./View";
+import { ValidationFieldProps, ValidationFieldType } from "./utils/types";
+import LocalSearchField from "./View/LocalSearch";
+import NumberFormate from "./View/NumberFormate";
+
+const components: { [key: string]: React.FC
+
+
+
+
+
+
+ {t(`${label ? label : name}`)}
+
+
+
+ );
+};
+
+export default CheckboxField;
diff --git a/src/Components/ValidationField/View/DataRange.tsx b/src/Components/ValidationField/View/DataRange.tsx
new file mode 100644
index 0000000..17723a3
--- /dev/null
+++ b/src/Components/ValidationField/View/DataRange.tsx
@@ -0,0 +1,64 @@
+import { Form, DatePicker } from "antd";
+
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+
+const { RangePicker } = DatePicker;
+
+const DataRange = ({
+ name,
+ label,
+ Format,
+ props,
+ onChange,
+ isDisabled,
+ placeholder,
+ className,
+ no_label,
+ label_icon,
+}: any) => {
+ const { errorMsg, isError, t, formik } = useFormField(name, props);
+ const onCalendarChange = (value: any) => {
+ formik.setFieldValue(name, value);
+ };
+ return (
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+ );
+};
+
+export default DataRange;
diff --git a/src/Components/ValidationField/View/Date.tsx b/src/Components/ValidationField/View/Date.tsx
new file mode 100644
index 0000000..a285abc
--- /dev/null
+++ b/src/Components/ValidationField/View/Date.tsx
@@ -0,0 +1,69 @@
+import { Form, DatePicker } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import dayjs from "dayjs";
+
+const Date = ({
+ name,
+ label,
+ picker = "date",
+ isDisabled,
+ props,
+ onChange,
+ placeholder,
+ className,
+ no_label,
+ label_icon,
+}: any) => {
+ const { errorMsg, isError, t, formik } = useFormField(name, props);
+
+ const FormikValue = formik.values[name];
+ const onCalendarChange = (value: any) => {
+ formik.setFieldValue(name, value);
+ // console.log(value,"value ");
+ };
+
+ const Formater = "YYYY/MM/DD";
+ return (
+
+
+
+ ) : (
+
+ )}
+
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+ );
+};
+
+export default Date;
diff --git a/src/Components/ValidationField/View/Default.tsx b/src/Components/ValidationField/View/Default.tsx
new file mode 100644
index 0000000..d14e28a
--- /dev/null
+++ b/src/Components/ValidationField/View/Default.tsx
@@ -0,0 +1,62 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+
+const Default = ({
+ name,
+ label,
+ placeholder,
+ isDisabled,
+ onChange,
+ type,
+ no_label,
+ label_icon,
+ ...props
+}: any) => {
+ const { errorMsg, isError, t } = useFormField(name, props);
+
+ return (
+
+
+
+ ) : (
+
+ )}
+
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+ );
+};
+
+export default React.memo(Default);
diff --git a/src/Components/ValidationField/View/DropFile.tsx.tsx b/src/Components/ValidationField/View/DropFile.tsx.tsx
new file mode 100644
index 0000000..3a86955
--- /dev/null
+++ b/src/Components/ValidationField/View/DropFile.tsx.tsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
+import { message, Upload } from "antd";
+import type { GetProp, UploadProps } from "antd";
+import useFormField from "../../../Hooks/useFormField";
+import { ImageBaseURL } from "../../../api/config";
+
+type FileType = Parameters
+
+
+ ) : (
+
+ )}
+
+
+
+
+ {imageUrl ? (
+ 
+ ) : (
+ uploadButton
+ )}
+
+
+ );
+};
+
+export default DropFile;
diff --git a/src/Components/ValidationField/View/File.tsx b/src/Components/ValidationField/View/File.tsx
new file mode 100644
index 0000000..de0538d
--- /dev/null
+++ b/src/Components/ValidationField/View/File.tsx
@@ -0,0 +1,80 @@
+import { Button, Upload, UploadFile } from "antd";
+import useFormField from "../../../Hooks/useFormField";
+import { UploadOutlined } from "@ant-design/icons";
+import { ImageBaseURL } from "../../../api/config";
+
+const File = ({
+ name,
+ label,
+ onChange,
+ isDisabled,
+ placholder,
+ className,
+ acceptedFileType,
+ props,
+}: any) => {
+ const { formik, t, isError } = useFormField(name, props);
+ let imageUrl = formik?.values?.[name] ?? null;
+ // console.log(ImageBaseURL + imageUrl);
+
+ const fileList: UploadFile[] = imageUrl
+ ? [
+ typeof imageUrl === "string"
+ ? {
+ uid: "-1",
+ name: "",
+ status: "done",
+ url: ImageBaseURL + imageUrl,
+ thumbUrl: ImageBaseURL + imageUrl,
+ }
+ : {
+ uid: imageUrl.uid || "-1",
+ name: imageUrl.name || "",
+ status: "done",
+ originFileObj: imageUrl,
+ },
+ ]
+ : [];
+ // console.log(1);
+
+ const FilehandleChange = (value: any) => {
+ // console.log(value,"filevalue");
+ if (value.fileList.length === 0) {
+ formik.setFieldValue(name, null);
+ } else {
+ formik.setFieldValue(name, value?.file?.originFileObj);
+ }
+ };
+ const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
+ onSuccess();
+ };
+ return (
+
+
+
+
+ }
+ >
+ {placholder ?? t("Click_to_upload_the_image")}
+
+
+
+ );
+};
+
+export default File;
diff --git a/src/Components/ValidationField/View/LocalSearch.tsx b/src/Components/ValidationField/View/LocalSearch.tsx
new file mode 100644
index 0000000..382f570
--- /dev/null
+++ b/src/Components/ValidationField/View/LocalSearch.tsx
@@ -0,0 +1,93 @@
+import { Form, Select } from "antd";
+import React, { useState } from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { translateOptions } from "../utils/translatedOptions";
+
+const LocalSelectField = ({
+ name,
+ label,
+ placeholder,
+ isDisabled,
+ option,
+ isMulti,
+ onChange,
+ className,
+ props,
+ no_label,
+ label_icon,
+}: any) => {
+ const { errorMsg, isError, t, formik } = useFormField(name, props);
+
+ // State to manage the search input value
+ const [searchValue, setSearchValue] = useState("");
+
+ const handleSearch = (
+ input: string,
+ option: { value: string; label: React.ReactNode | undefined },
+ ) =>
+ option?.label?.toString().toLowerCase().includes(toLowerCase()) ||
+ option?.value?.toString().toLowerCase().includes(toLowerCase());
+
+ const SelectableChange = (value: {
+ value: string;
+ label: React.ReactNode;
+ }) => {
+ formik.setFieldValue(name, value);
+ };
+
+ const handleSelectChange = (value: any) => {
+ formik.setFieldValue(name, value);
+ if (onChange) onChange(value);
+ };
+
+ const handleSearchChange = (input: string) => {
+ setSearchValue(input); // Update the search input value
+ };
+
+ return (
+ {isError ? "required" : ""}
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+
+ );
+};
+
+export default React.memo(LocalSelectField);
diff --git a/src/Components/ValidationField/View/MaltyFile.tsx b/src/Components/ValidationField/View/MaltyFile.tsx
new file mode 100644
index 0000000..f18ad30
--- /dev/null
+++ b/src/Components/ValidationField/View/MaltyFile.tsx
@@ -0,0 +1,85 @@
+import { Button, Upload } from "antd";
+import { UploadOutlined } from "@ant-design/icons";
+
+import useFormField from "../../../Hooks/useFormField";
+
+const MaltyFile = ({
+ name,
+ label,
+ onChange,
+ isDisabled,
+ placeholder,
+ className,
+ props,
+}: any) => {
+ const { formik, t, isError } = useFormField(name, props);
+ let imageUrl = formik?.values?.[name] ?? null;
+
+ // Mapping formik values to fileList format
+ const fileList = imageUrl
+ ? imageUrl.map((file: any, index: number) => {
+ // console.log(file,"file");
+
+ return file instanceof File
+ ? {
+ uid: index,
+ name: file?.name,
+ status: "done",
+ originFileObj: file,
+ }
+ : {
+ uid: index,
+ id: file?.id,
+ name: file?.name,
+ status: "done",
+ url: file?.url || "",
+ thumbUrl: file?.url || "",
+ };
+ })
+ : [];
+
+ const FilehandleChange = ({ fileList }: any) => {
+ if (fileList.length === 0) {
+ formik.setFieldValue(name, null);
+ } else {
+ formik.setFieldValue(
+ name,
+ fileList.map((file: any) => file?.originFileObj ?? file),
+ );
+ }
+ };
+ // Custom request function
+ const customRequest = async ({ onSuccess }: any) => {
+ // Perform any necessary actions before onSuccess is called
+ onSuccess();
+ };
+
+ return (
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ }
+
+ >
+ {t(placeholder ?? t("upload_image") )}
+
+
+
+ );
+};
+
+export default MaltyFile;
diff --git a/src/Components/ValidationField/View/NumberFormate.tsx b/src/Components/ValidationField/View/NumberFormate.tsx
new file mode 100644
index 0000000..ca50a4b
--- /dev/null
+++ b/src/Components/ValidationField/View/NumberFormate.tsx
@@ -0,0 +1,75 @@
+import { Form, Input, InputNumber } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+
+const NumberFormate = ({
+ name,
+ label,
+ placeholder,
+ isDisabled,
+ props,
+ type,
+ no_label,
+ label_icon,
+}: any) => {
+ const { errorMsg, isError, t, formik } = useFormField(name, props);
+ const SelectableChange = (value: {
+ value: string;
+ label: React.ReactNode;
+ }) => {
+ formik.setFieldValue(name, value);
+ };
+ return (
+ {isError ? "required" : ""}
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+ `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+ }
+ parser={(value: any) =>
+ value?.replace(/\$\s?|(,*)/g, "") as unknown as number
+ }
+ min="0"
+ type={type ?? "text"}
+ value={formik.values[name]}
+ onChange={SelectableChange}
+ placeholder={t(
+ `${placeholder ? placeholder : label ? label : name}`,
+ )}
+ name={name}
+ disabled={isDisabled}
+ size="large"
+
+
+ // onChange={onChange ? onChange : handleChange}
+ />
+
+
+ );
+};
+
+export default React.memo(NumberFormate);
diff --git a/src/Components/ValidationField/View/SearchField.tsx b/src/Components/ValidationField/View/SearchField.tsx
new file mode 100644
index 0000000..ff35a45
--- /dev/null
+++ b/src/Components/ValidationField/View/SearchField.tsx
@@ -0,0 +1,87 @@
+import { Form, Select } from "antd";
+import React, { useEffect, useState } from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { useNavigate } from "react-router-dom";
+import { MdOutlineEdit } from "react-icons/md";
+
+const SearchField = ({
+ name,
+ label,
+ placeholder,
+ isDisabled,
+ searchBy,
+ option,
+ isMulti,
+ onChange,
+ className,
+ props,
+ no_label,
+ label_icon,
+}: any) => {
+ const { errorMsg, isError, t, formik } = useFormField(name, props);
+ const [searchQuery, setSearchQuery] = useState
+
+
+ ) : (
+
+ )}
+
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+
+ );
+};
+
+export default React.memo(SearchField);
diff --git a/src/Components/ValidationField/View/SelectField.tsx b/src/Components/ValidationField/View/SelectField.tsx
new file mode 100644
index 0000000..880a9ed
--- /dev/null
+++ b/src/Components/ValidationField/View/SelectField.tsx
@@ -0,0 +1,72 @@
+import { Form, Select } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { translateOptions } from "../utils/translatedOptions";
+
+const SelectField = ({
+ name,
+ label,
+ placeholder,
+ isDisabled,
+ option,
+ isMulti,
+ onChange,
+ className,
+ props,
+ no_label,
+ label_icon,
+}: any) => {
+ const { errorMsg, isError, t, formik } = useFormField(name, props);
+ const SelectableChange = (value: {
+ value: string;
+ label: React.ReactNode;
+ }) => {
+ formik.setFieldValue(name, value);
+ };
+ // console.log(name,"Select");
+
+ return (
+
+
+
+ ) : (
+
+ )}
+
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+
+ );
+};
+
+export default React.memo(SelectField);
diff --git a/src/Components/ValidationField/View/TextAreaField.tsx b/src/Components/ValidationField/View/TextAreaField.tsx
new file mode 100644
index 0000000..455e056
--- /dev/null
+++ b/src/Components/ValidationField/View/TextAreaField.tsx
@@ -0,0 +1,50 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { Field } from "formik";
+const { TextArea } = Input;
+
+const TextAreaField = ({
+ name,
+ label,
+ placeholder,
+ isDisabled,
+ onChange,
+ props,
+ type,
+}: any) => {
+ const { formik, isError, errorMsg, t } = useFormField(name, props);
+
+ const handleChange = (
+ e: React.ChangeEvent
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default React.memo(TextAreaField);
diff --git a/src/Components/ValidationField/View/TextField.tsx b/src/Components/ValidationField/View/TextField.tsx
new file mode 100644
index 0000000..ae71b55
--- /dev/null
+++ b/src/Components/ValidationField/View/TextField.tsx
@@ -0,0 +1,65 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+const { TextArea } = Input;
+
+const TextField = ({
+ name,
+ label,
+ placeholder,
+ isDisabled,
+ onChange,
+ props,
+ no_label,
+ label_icon,
+}: any) => {
+ const { formik, isError, errorMsg, t } = useFormField(name, props);
+ const TextFieldhandleChange = (
+ e: React.ChangeEvent
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+ );
+};
+
+export default React.memo(TextField);
diff --git a/src/Components/ValidationField/View/Time.tsx b/src/Components/ValidationField/View/Time.tsx
new file mode 100644
index 0000000..1847c0f
--- /dev/null
+++ b/src/Components/ValidationField/View/Time.tsx
@@ -0,0 +1,68 @@
+import { Form, TimePicker } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import dayjs from "dayjs";
+
+const Time = ({
+ name,
+ label,
+ className,
+ isDisabled,
+ onChange,
+ props,
+ placeholder,
+ no_label,
+ label_icon,
+}: any) => {
+ const { errorMsg, isError, t, formik } = useFormField(name, props);
+ const onCalendarChange = (value: any) => {
+ formik.setFieldValue(name, value);
+ };
+
+ const Formater = "H:mm";
+ const FormikValue = formik.values[name];
+
+ return (
+
+
+
+ ) : (
+
+ )}
+
+
+ {no_label ? (
+
+ ) : label_icon ? (
+
+
+
+ );
+};
+
+export default Time;
diff --git a/src/Components/ValidationField/View/index.tsx b/src/Components/ValidationField/View/index.tsx
new file mode 100644
index 0000000..0403969
--- /dev/null
+++ b/src/Components/ValidationField/View/index.tsx
@@ -0,0 +1,25 @@
+import Time from "./Time";
+import SelectField from "./SelectField";
+import Date from "./Date";
+import DataRange from "./DataRange";
+import CheckboxField from "./CheckboxField";
+import Default from "./Default";
+import File from "./File";
+import MaltyFile from "./MaltyFile";
+import SearchField from "./SearchField";
+import TextField from "./TextField";
+import DropFile from "./DropFile.tsx";
+
+export {
+ Time,
+ SelectField,
+ Date,
+ DataRange,
+ CheckboxField,
+ Default,
+ File,
+ MaltyFile,
+ SearchField,
+ TextField,
+ DropFile,
+};
diff --git a/src/Components/ValidationField/index.tsx b/src/Components/ValidationField/index.tsx
new file mode 100644
index 0000000..20e711f
--- /dev/null
+++ b/src/Components/ValidationField/index.tsx
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { ErrorMessage, useField, Field, useFormikContext } from "formik";
+import { useTranslation } from "react-i18next";
+import { FaExclamationCircle } from "react-icons/fa";
+import { convert_data_to_select } from "../../Layout/app/Const";
+
+export {
+ useState,
+ ErrorMessage,
+ useField,
+ Field,
+ useFormikContext,
+ useTranslation,
+ FaExclamationCircle,
+ convert_data_to_select,
+};
diff --git a/src/Components/ValidationField/utils/ValidationField.scss b/src/Components/ValidationField/utils/ValidationField.scss
new file mode 100644
index 0000000..ed6599e
--- /dev/null
+++ b/src/Components/ValidationField/utils/ValidationField.scss
@@ -0,0 +1,200 @@
+.LabelWithIcon {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+}
+.ValidationField {
+ margin-bottom: 1.3vw;
+ position: relative;
+ > * {
+ width: 100%;
+ }
+ .text,
+ .ant-form-item {
+ margin-bottom: 7px !important;
+ > span {
+ color: transparent;
+ }
+ }
+
+ // .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
+ // border: 1px solid var(--border-color);
+ // }
+
+ .Select_error {
+ .ant-select-selector {
+ border: 1px solid red !important;
+ }
+ }
+
+ // .ValidationField{
+ // .ant-select-selector{
+ // border: 1px solid var(--border-color) ;
+
+ // }
+ // }
+ > span {
+ margin-bottom: 0px !important;
+ &:focus-within {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 1px var(--primary);
+ cursor: pointer;
+ }
+ &:has(.is-invalid) {
+ border-color: red !important ;
+ }
+ input {
+ color: var(--text);
+ background: var(--bg);
+ }
+
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active {
+ -webkit-box-shadow: 0 0 0 30px white inset !important;
+ }
+ }
+}
+
+.ant-upload-select {
+ width: 100%;
+}
+.Checkboxs {
+ padding: 4%;
+}
+.SearchField {
+ button {
+ background: var(--primary);
+ }
+}
+.text {
+ color: var(--text);
+ margin-bottom: 15px;
+ font-weight: bold;
+}
+
+input:disabled {
+ color: var(--text) !important;
+}
+
+.isError {
+ outline: red 1px solid;
+ color: red;
+}
+.Error_color {
+ color: red;
+}
+// input:-webkit-autofill {
+// -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
+// }
+// input:-webkit-autofill:focus {
+// -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
+// }
+
+// /* Remove autofill background color on hover */
+// input:-webkit-autofill:hover {
+// -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
+// }
+// .upload_image_button {
+// .ant-btn {
+// min-height: 3vw !important;
+// border: 0.1vw solid var(--border-color);
+
+// display: flex;
+// align-items: center;
+// justify-content: center;
+// }
+// }
+// .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
+// min-height: 3vw !important;
+// }
+// .ant-select-multiple.ant-select-lg .ant-select-selection-overflow {
+// min-height: 3vw !important;
+// }
+
+// .ant-upload-list .ant-upload-list-item {
+// // height:3vw !important;
+// border: 1px solid var(--border-color) !important;
+// }
+
+// .TowValidationItems {
+// display: flex;
+// gap: 3%;
+// > label {
+// display: none;
+// }
+// }
+
+// .ant-select .ant-select-arrow {
+// inset-inline-end: 1vw;
+// }
+// .ant-input-affix-wrapper-lg {
+// padding: 0.5vw 1vw;
+// font-size: 1vw;
+// min-height: 3vw;
+// border-radius: 0.6vw;
+// }
+
+// .ant-picker-outlined {
+// padding: 0.5vw 1vw;
+// font-size: 1vw;
+// min-height: 3vw;
+// border-radius: 0.6vw;
+// border: 1px solid var(--border-color);
+// }
+
+// .ant-select-single.ant-select-lg .ant-select-selector {
+// min-height: 3vw;
+// border-radius: 0.6vw;
+// }
+// .ant-select-single .ant-select-selector .ant-select-selection-search-input {
+// min-height: 3vw;
+// }
+
+// .ant-select-outlined .ant-select-selector {
+// min-height: 3vw !important;
+// border-radius: 0.6vw !important;
+// }
+// .ant-select-single.ant-select-lg {
+// min-height: 3vw;
+// }
+
+// .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
+// width: 21.5vw;
+// }
+
+// .ant-input-number-outlined {
+// width: 100%;
+// height: 3vw;
+// }
+// .ant-input-number-lg ant-input-number-input {
+// width: 100%;
+// height: 3vw;
+// }
+
+// .bigRow {
+// width: 100%;
+// display: flex;
+// justify-content: space-between;
+// flex-wrap: wrap;
+// > *.w-100 {
+// width: 48% !important;
+// }
+// }
+
+// .ant-input-number-affix-wrapper-lg {
+// width: 100%;
+// height: 3vw;
+// border-radius: 0.6vw;
+// border: 1px solid var(--border-color);
+// }
+
+// .TwoSelectGroup {
+// display: flex;
+// gap: 10px;
+// margin-bottom: 20px;
+// }
+// .TwoSelectGroupbutton {
+// margin-bottom: 20px;
+// }
diff --git a/src/Components/ValidationField/utils/ValidationState.ts b/src/Components/ValidationField/utils/ValidationState.ts
new file mode 100644
index 0000000..4af51fe
--- /dev/null
+++ b/src/Components/ValidationField/utils/ValidationState.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface ValidationState {
+ Validation: any[];
+ setValidation: (value: any[]) => void;
+}
+
+export const useValidationState = create
+
+
+ ) : (
+
+ )}
+
+ OrderStatus
+ )
+}
+
+export default OrderStatus
\ No newline at end of file
diff --git a/src/Hooks/WithDrawer.tsx b/src/Hooks/WithDrawer.tsx
new file mode 100644
index 0000000..4373fe1
--- /dev/null
+++ b/src/Hooks/WithDrawer.tsx
@@ -0,0 +1,45 @@
+import React, { useState, ReactNode } from 'react';
+import type { DrawerProps } from 'antd';
+import { Drawer, Space } from 'antd';
+
+interface WithDrawerProps {
+ button: React.ReactNode;
+ children: ReactNode;
+ title:string;
+ className?:string,
+ iopen?:boolean,
+ setOpen:any
+}
+
+const WithDrawer: React.FC
+ {children}
+
+
+
+
+
+
+ )
+}
+
+export default AddButton
\ No newline at end of file
diff --git a/src/Layout/Dashboard/AddButton/AddButtonLayout.tsx b/src/Layout/Dashboard/AddButton/AddButtonLayout.tsx
new file mode 100644
index 0000000..67910e3
--- /dev/null
+++ b/src/Layout/Dashboard/AddButton/AddButtonLayout.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import './Add_Button.scss'
+import { useTranslation } from 'react-i18next'
+import { usePageState } from '../../../lib/statemangment/LayoutPagestate'
+
+
+
+const AddButtonLayout = ({haveAddModal}:any) => {
+ const { setIsOpenAddModel , setObjectToEdit } = usePageState()
+ const [t] = useTranslation();
+
+
+ return (
+ {
+ if(haveAddModal){
+
+ setIsOpenAddModel()
+ }
+ setObjectToEdit(null)
+
+ }}>
+
+
+
+ )
+}
+
+export default AddButtonLayout
\ No newline at end of file
diff --git a/src/Layout/Dashboard/AddButton/Add_Button.scss b/src/Layout/Dashboard/AddButton/Add_Button.scss
new file mode 100644
index 0000000..fc7a862
--- /dev/null
+++ b/src/Layout/Dashboard/AddButton/Add_Button.scss
@@ -0,0 +1,77 @@
+.Add_Button{
+ button {
+ border: 2px solid var(--primary);
+ background-color: var(--primary);
+ border-radius: 0.5vw;
+ height: 40px;
+ width: 70px;
+ font-size: 1vw ;
+ display: flex; justify-content: center; align-items: center;
+ box-shadow: 2px 2px 7px 0 var(--primary);
+ }
+ button span {
+ display: flex;
+ align-items: center;
+ color: var(--bg);
+ font-weight: normal;
+ font-size: 14px;
+ }
+
+ button:hover {
+ background-color:var(--primary);
+ }
+}
+
+@media screen and (max-width: 700px) {
+ .Add_Button{
+ button{
+ font-size: 2vw !important;
+ }
+ }
+}
+@media screen and (max-width: 470px) {
+ .Add_Button{
+ button{
+ font-size: 3vw !important;
+ }
+ }
+}
+
+ .Add_Button_notification{
+ button {
+ border: 2px solid var(--primary);
+ background-color: var(--primary);
+ border-radius: 0.5vw;
+ height: 40px;
+ width: 180px;
+ font-size: 1vw ;
+ display: flex; justify-content: center; align-items: center;
+ box-shadow: 2px 2px 7px 0 var(--primary);
+ }
+ button span {
+ display: flex;
+ align-items: center;
+ color: var(--bg);
+ font-weight: normal;
+ font-size: 14px;
+ }
+
+ button:hover {
+ background-color:var(--primary);
+ }
+ }
+
+ @media screen and (max-width: 700px) {
+ .Add_Button_notification{
+ button{
+ font-size: 2vw !important;
+ }
+ }
+ }
+ @media screen and (max-width: 470px) {
+ .Add_Button_notification{
+ button{
+ font-size: 3vw !important;
+ }
+ }
+ }
diff --git a/src/Layout/Dashboard/DashBody.tsx b/src/Layout/Dashboard/DashBody.tsx
new file mode 100644
index 0000000..8f2f449
--- /dev/null
+++ b/src/Layout/Dashboard/DashBody.tsx
@@ -0,0 +1,32 @@
+import { Spinner } from "reactstrap"
+import { QueryStatusEnum } from "../../config/QueryStatus"
+import LoadingPage from "../app/LoadingPage"
+import { useTranslation } from "react-i18next"
+import { BsEmojiFrown } from "react-icons/bs";
+import ErrorPage from "../app/ErrorPage";
+
+
+const DashBody = ({ children , status }: { children: React.ReactNode ,status?:QueryStatusEnum }) => {
+ const {t} = useTranslation();
+
+ // Add You Custom Loadaing Page
+ if(status === QueryStatusEnum.LOADING){
+
+ return
+ { children }
+
+ )
+}
+
+export default DashBody
diff --git a/src/Layout/Dashboard/DashHeader.tsx b/src/Layout/Dashboard/DashHeader.tsx
new file mode 100644
index 0000000..a71852d
--- /dev/null
+++ b/src/Layout/Dashboard/DashHeader.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import AddButtonLayout from "./AddButton/AddButtonLayout";
+import { useTranslation } from "react-i18next";
+
+interface DashHeaderProp {
+ title: string;
+ children?: React.ReactNode;
+ showAddButton?: boolean;
+ haveAddModal?:boolean
+}
+const DashHeader = ({
+ children,
+ title,
+ haveAddModal= true ,
+ showAddButton = true,
+}: DashHeaderProp) => {
+ const [t] = useTranslation();
+ return (
+
+ }
+
+ );
+};
+
+export default DashHeader;
diff --git a/src/Layout/Dashboard/FormPage.tsx b/src/Layout/Dashboard/FormPage.tsx
new file mode 100644
index 0000000..befc606
--- /dev/null
+++ b/src/Layout/Dashboard/FormPage.tsx
@@ -0,0 +1,42 @@
+import { Formik, Form } from 'formik';
+import React, { ReactNode } from 'react';
+import { Button } from "reactstrap";
+import * as Yup from 'yup';
+
+interface FormValues {
+ [key: string]: any;
+}
+
+interface FormPageProps {
+ handleSubmit: (values: any) => void
+ initialValues: FormValues;
+ validationSchema: any;
+ title?: string;
+ children: ReactNode;
+}
+
+const FormPage: React.FC{t(`${title}`)}
+ {children} + {showAddButton &&{title}
+
+
+ {formik => (
+
+ )}
+
+
+
+ );
+};
+
+export default FormPage;
diff --git a/src/Layout/Dashboard/FormikForm.tsx b/src/Layout/Dashboard/FormikForm.tsx
new file mode 100644
index 0000000..9e42628
--- /dev/null
+++ b/src/Layout/Dashboard/FormikForm.tsx
@@ -0,0 +1,67 @@
+import { Formik, Form } from 'formik';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from "reactstrap";
+import * as Yup from 'yup';
+
+interface FormValues {
+ [key: string]: any;
+}
+
+interface FormikFormProps {
+ handleSubmit: (values: any) => void
+ initialValues: FormValues;
+ validationSchema: any;
+ title?: string;
+ children: ReactNode;
+ ButtonName?:string
+}
+const FormikForm: React.FC
+
+
+ {t("no_records")}}
+ noHeader
+ pagination
+ progressComponent={
+
+
+
+ )
+}
+
+
+export default LyTable
\ No newline at end of file
diff --git a/src/Layout/Dashboard/PageStructure.tsx b/src/Layout/Dashboard/PageStructure.tsx
new file mode 100644
index 0000000..570254d
--- /dev/null
+++ b/src/Layout/Dashboard/PageStructure.tsx
@@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import StatusCard from "../../Extensions/Editor/StatusCard";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+import { useTranslation } from "react-i18next";
+
+interface PageStructureProps {
+ title?: string;
+ isLoading: boolean;
+ isError: boolean;
+ data?: any;
+ children:any
+}
+
+const PageStructure: FC
+
+ )
+}
+
+export default SearchField
\ No newline at end of file
diff --git a/src/Layout/Dashboard/SelectField.tsx b/src/Layout/Dashboard/SelectField.tsx
new file mode 100644
index 0000000..a770134
--- /dev/null
+++ b/src/Layout/Dashboard/SelectField.tsx
@@ -0,0 +1,39 @@
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const SelectField = ({ selectBy, lebel, option }: any) => {
+ const [searchQuery, setSearchQuery] = useState
+
+
+ );
+};
+
+export default React.memo(SelectField);
diff --git a/src/Layout/Dashboard/SelectWSearchField.tsx b/src/Layout/Dashboard/SelectWSearchField.tsx
new file mode 100644
index 0000000..bd28411
--- /dev/null
+++ b/src/Layout/Dashboard/SelectWSearchField.tsx
@@ -0,0 +1,52 @@
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const SelectWSearchField = ({ selectBy, submiteBy, lebel, option }: any) => {
+ const [searchQuery, setSearchQuery] = useState
+
+
+ );
+};
+
+export default React.memo(SelectWSearchField);
diff --git a/src/Layout/Dashboard/ViewPage.tsx b/src/Layout/Dashboard/ViewPage.tsx
new file mode 100644
index 0000000..85a61b4
--- /dev/null
+++ b/src/Layout/Dashboard/ViewPage.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardBody, Button } from "reactstrap";
+import { Formik, Form } from "formik";
+import { LoadingButton } from "../../Components/Ui/LoadingButton";
+import ProgressBar from "../../Components/Ui/ProgressBar";
+import { useLocation, useNavigate } from "react-router-dom";
+import { usePageState } from "../../lib/statemangment/LayoutPagestate";
+import { useTranslation } from "react-i18next";
+
+type TViewPage ={
+ children: React.ReactNode,
+ getInitialValues:any,
+ getValidationSchema:any,
+ handleSubmit:any,
+ // BarStatus:any,
+ IsloadingButton:boolean
+}
+
+const ViewPage: React.FC{t("Log Out")}
+ ),
+ },
+ ];
+
+ return (
+
+
+
+
+
+ }
+ >
+
+ {/*
+
+
+
+
+
+
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/Layout/app/KarimLogo.tsx b/src/Layout/app/KarimLogo.tsx
new file mode 100644
index 0000000..6c147ee
--- /dev/null
+++ b/src/Layout/app/KarimLogo.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+const KarimLogo = () => {
+ return (
+<>
+
+
+ )
+}
+
+export default KarimLogo
\ No newline at end of file
diff --git a/src/Layout/app/Layout.tsx b/src/Layout/app/Layout.tsx
new file mode 100644
index 0000000..2f3e409
--- /dev/null
+++ b/src/Layout/app/Layout.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react'
+import SideBar from './SideBar'
+import Header from './Header'
+import { useNavigate } from 'react-router-dom'
+import useAuthState from '../../lib/statemangment/AuthState'
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+
+
+ const navigate = useNavigate()
+ const { isAuthenticated } = useAuthState()
+ useEffect(() => {
+ if (!isAuthenticated) {
+
+ navigate('/auth')
+ }
+ }, [navigate])
+ return (
+ <>
+
+ 
+
+
+
+
+
+ )
+}
+
+export default Layout
\ No newline at end of file
diff --git a/src/Layout/app/LoadingPage.tsx b/src/Layout/app/LoadingPage.tsx
new file mode 100644
index 0000000..45d436f
--- /dev/null
+++ b/src/Layout/app/LoadingPage.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import LoadingSpinner from '../../Components/Ui/LoadingSpinner'
+import { Spin } from 'antd'
+
+function LoadingPage() {
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+export default LoadingPage
\ No newline at end of file
diff --git a/src/Layout/app/NotFoundPage.tsx b/src/Layout/app/NotFoundPage.tsx
new file mode 100644
index 0000000..316349a
--- /dev/null
+++ b/src/Layout/app/NotFoundPage.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+
+function NotFoundPage() {
+ const navigate = useNavigate()
+ return (
+
+
+ )
+}
+
+export default NotFoundPage
\ No newline at end of file
diff --git a/src/Layout/app/SideBar.tsx b/src/Layout/app/SideBar.tsx
new file mode 100644
index 0000000..828e387
--- /dev/null
+++ b/src/Layout/app/SideBar.tsx
@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { FaAngleDown, FaAngleRight } from 'react-icons/fa';
+import { GiHamburgerMenu } from 'react-icons/gi';
+import { Link, useLocation } from 'react-router-dom';
+import { RoutesLinks } from '../../Routes';
+import { useTranslation } from 'react-i18next';
+import KarimLogo from './KarimLogo';
+import { useWindowSize } from '../../Hooks/useWindowSize';
+import Etaxi from './Etaxi';
+import { usePageState } from '../../lib/statemangment/LayoutPagestate';
+
+interface SidebarProps {}
+
+const Sidebar: React.FC
+
+
+
+ 404
|
This page could not be found +
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/Layout/app/Types.tsx b/src/Layout/app/Types.tsx
new file mode 100644
index 0000000..b8a4dc7
--- /dev/null
+++ b/src/Layout/app/Types.tsx
@@ -0,0 +1,19 @@
+export interface FormTableState {
+ objectToEdit: any[];
+ OpenEdit: boolean;
+ OpenAdd: boolean;
+ }
+
+ export type ValidationFieldProps = {
+ name: string;
+ name2?: string;
+ type: string;
+ placeholder?: string;
+ label?: string;
+ className?: string;
+ option?: any;
+ isMulti?: boolean;
+ Disabled?: boolean;
+ group ? : boolean;
+ dir?:'rtl' | 'ltr'
+ };
\ No newline at end of file
diff --git a/src/Layout/app/WithDrawer.tsx b/src/Layout/app/WithDrawer.tsx
new file mode 100644
index 0000000..2c788a1
--- /dev/null
+++ b/src/Layout/app/WithDrawer.tsx
@@ -0,0 +1,53 @@
+import React, { useState, ReactNode } from 'react';
+import type { DrawerProps } from 'antd';
+import { Drawer, Space } from 'antd';
+
+interface WithDrawerProps {
+ button: React.ReactNode;
+ children: ReactNode;
+ className?:string
+}
+
+const WithDrawer: React.FC
+
+
+ 
+ {/*
+
+ {/*
+
+
+ {RoutesLinks?.map((item: any, index: number) => {
+ const isActive = pathname === item?.href;
+ const isDropdownOpen = openDropdown === index;
+
+ if (item?.hidden) {
+ return null;
+ }
+
+ if (item?.href ) {
+ return (
+
+ {React.cloneElement(item.icon, { size: 30 })}
+
+
+ );
+ }
+ })}
+
+ {t(`${item?.name}`)}
+
+ );
+ } else {
+ return (
+ handleDropdown(index)}
+ className={
+ isDropdownOpen
+ ? 'SideBar_Link DropDown DropDown_SideBar_Link Open'
+ : 'SideBar_Link DropDown'
+ }
+ >
+ {React.cloneElement(item.icon, { size: 30 })}
+
+ {isDropdownOpen &&
+ item?.children?.map((child: any, childIndex: number) => {
+ if (child?.href) {
+ return (
+
+ {React.cloneElement(child.icon, { size: 30 })}
+ {t(`${item?.name}`)}
+ {isDropdownOpen ?
+ {t(`${child?.name}`)}
+
+ );
+ }
+ return null;
+ })}
+
+ {children}
+
+
+
+ 
+
+
+
+
+
+
+
+
+ )
+}
+
+export default LoginForm
\ No newline at end of file
diff --git a/src/Pages/Auth/Page.tsx b/src/Pages/Auth/Page.tsx
new file mode 100644
index 0000000..7765a9f
--- /dev/null
+++ b/src/Pages/Auth/Page.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react'
+import LoginForm from './LoginForm';
+import { LoginBg } from '../../Layout/app/Const';
+import useAuthState from '../../lib/statemangment/AuthState';
+import { useNavigate } from 'react-router-dom';
+const Auth = () => {
+
+ const { isAuthenticated } = useAuthState();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (isAuthenticated) {
+ navigate('/')
+ }
+ }, [])
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default Auth
\ No newline at end of file
diff --git a/src/Pages/Auth/formUtil.ts b/src/Pages/Auth/formUtil.ts
new file mode 100644
index 0000000..1eebde0
--- /dev/null
+++ b/src/Pages/Auth/formUtil.ts
@@ -0,0 +1,36 @@
+
+import * as Yup from "yup";
+import { buildFormData } from "../../api/helper/buildFormData";
+
+interface formUtilCommon {
+ password:string,
+ email:string
+}
+
+
+interface InitialValues extends formUtilCommon {
+
+}
+interface ValidateSchema extends formUtilCommon{
+
+}
+
+export const getInitialValues = (): InitialValues => {
+
+
+ return {
+ password: "",
+ email:""
+ }
+
+
+};
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema
+
+
+
+
+
+
+
+
+
+ navigate('add')}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default AddCategoriesPage
\ No newline at end of file
diff --git a/src/Pages/Categories/View/EditForm.tsx b/src/Pages/Categories/View/EditForm.tsx
new file mode 100644
index 0000000..7f58b6c
--- /dev/null
+++ b/src/Pages/Categories/View/EditForm.tsx
@@ -0,0 +1,37 @@
+
+import React, { useEffect } from 'react'
+import { Col, Row } from 'reactstrap';
+import ValidationField from '../../../Components/ValidationField/ValidationField';
+import { useGetRestaurant } from '../../../api/Restaurant';
+import useFormatToSelect from '../../../Hooks/useFormatToSelect';
+
+function Form() {
+ const {data:Restaurant} = useGetRestaurant()
+ const SelectRestaurantData = useFormatToSelect(Restaurant?.data)
+
+
+ return (
+ {t("BasicInfo")}
+ {objectToEdit && data ?
+
+
+
+
+
+
+
+
+
+
+
+ :
+ )
+
+}
+
+export default EditPage
\ No newline at end of file
diff --git a/src/Pages/Categories/formUtil.ts b/src/Pages/Categories/formUtil.ts
new file mode 100644
index 0000000..2510793
--- /dev/null
+++ b/src/Pages/Categories/formUtil.ts
@@ -0,0 +1,22 @@
+
+import * as Yup from "yup";
+
+
+export const getInitialValues = (objectToEdit: any | null = null): any => {
+ return {
+ id: objectToEdit?.id ?? null,
+ name: objectToEdit?.name ?? null,
+ image: objectToEdit?.image ?? null,
+ restaurant_id: objectToEdit?.restaurant_id ?? null,
+
+ };
+};
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema{t("BasicInfo")}
Page
+ )
+}
+
+export default Page
\ No newline at end of file
diff --git a/src/Pages/Meal/Page.tsx b/src/Pages/Meal/Page.tsx
new file mode 100644
index 0000000..738bb44
--- /dev/null
+++ b/src/Pages/Meal/Page.tsx
@@ -0,0 +1,46 @@
+
+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 { useNavigate } from 'react-router-dom'
+import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
+import { useGetMeal } from '../../api/Meal'
+import SearchField from '../../Layout/Dashboard/SearchField'
+
+function Page() {
+
+ const column =useTableColumns()
+ const {data ,status } = useGetMeal()
+
+ const navigate = useNavigate()
+ const totalRows = data?.meta?.total;
+
+ return (
+ // Pass Status to Layout
+
+ navigate('add')}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default AddMealPage
\ No newline at end of file
diff --git a/src/Pages/Meal/View/EditForm.tsx b/src/Pages/Meal/View/EditForm.tsx
new file mode 100644
index 0000000..0fcb090
--- /dev/null
+++ b/src/Pages/Meal/View/EditForm.tsx
@@ -0,0 +1,41 @@
+
+import React, { useEffect } from 'react'
+import { Col, Row } from 'reactstrap';
+import ValidationField from '../../../Components/ValidationField/ValidationField';
+import { useGetCategories } from '../../../api/Categories';
+import useFormatToSelect from '../../../Hooks/useFormatToSelect';
+
+function Form() {
+ const {data:Categories} = useGetCategories()
+ const SelectCategoriesData = useFormatToSelect(Categories?.data)
+
+
+ return (
+ {t("BasicInfo")}
+ {objectToEdit && data ?
+
+
+
+
+
+
+
+
+
+
+
+ :
+ )
+
+}
+
+export default EditPage
\ No newline at end of file
diff --git a/src/Pages/Meal/formUtil.ts b/src/Pages/Meal/formUtil.ts
new file mode 100644
index 0000000..6d5ef37
--- /dev/null
+++ b/src/Pages/Meal/formUtil.ts
@@ -0,0 +1,27 @@
+
+import * as Yup from "yup";
+
+
+export const getInitialValues = (objectToEdit: any | null = null): any => {
+ return {
+ id: objectToEdit?.id ?? null,
+ name: objectToEdit?.name ?? null,
+ images: objectToEdit?.images ?? null,
+ category_id: objectToEdit?.category_id ?? null,
+ video: objectToEdit?.video ?? null,
+ description: objectToEdit?.description ?? null,
+ price: objectToEdit?.price ?? null,
+ attributes: objectToEdit?.attributes ?? null,
+
+
+ };
+};
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema{t("BasicInfo")}
+ navigate('add')}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default AddOfferPage
\ No newline at end of file
diff --git a/src/Pages/Offer/View/EditForm.tsx b/src/Pages/Offer/View/EditForm.tsx
new file mode 100644
index 0000000..c27fa6f
--- /dev/null
+++ b/src/Pages/Offer/View/EditForm.tsx
@@ -0,0 +1,39 @@
+
+import React, { useEffect } from 'react'
+import { Col, Row } from 'reactstrap';
+import ValidationField from '../../../Components/ValidationField/ValidationField';
+import { useGetRestaurant } from '../../../api/Restaurant';
+import useFormatToSelect from '../../../Hooks/useFormatToSelect';
+
+function Form() {
+ const {data:Restaurant} = useGetRestaurant()
+ const SelectRestaurantData = useFormatToSelect(Restaurant?.data)
+
+
+ return (
+ {t("BasicInfo")}
+ {objectToEdit && data ?
+
+
+
+
+
+
+
+
+
+
+
+ :
+ )
+
+}
+
+export default EditPage
\ No newline at end of file
diff --git a/src/Pages/Offer/formUtil.ts b/src/Pages/Offer/formUtil.ts
new file mode 100644
index 0000000..89652cd
--- /dev/null
+++ b/src/Pages/Offer/formUtil.ts
@@ -0,0 +1,25 @@
+
+import * as Yup from "yup";
+
+
+export const getInitialValues = (objectToEdit: any | null = null): any => {
+ return {
+ id: objectToEdit?.id ?? null,
+ name: objectToEdit?.name ?? null,
+ image: objectToEdit?.images ?? null,
+ restaurant_id: objectToEdit?.restaurant?.id ?? null,
+ description: objectToEdit?.description ?? null,
+ price: objectToEdit?.price ?? null,
+
+
+ };
+};
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema{t("BasicInfo")}
+ navigate('add')}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default AddRestaurantPage
\ No newline at end of file
diff --git a/src/Pages/Restaurant/View/EditForm.tsx b/src/Pages/Restaurant/View/EditForm.tsx
new file mode 100644
index 0000000..7f58b6c
--- /dev/null
+++ b/src/Pages/Restaurant/View/EditForm.tsx
@@ -0,0 +1,37 @@
+
+import React, { useEffect } from 'react'
+import { Col, Row } from 'reactstrap';
+import ValidationField from '../../../Components/ValidationField/ValidationField';
+import { useGetRestaurant } from '../../../api/Restaurant';
+import useFormatToSelect from '../../../Hooks/useFormatToSelect';
+
+function Form() {
+ const {data:Restaurant} = useGetRestaurant()
+ const SelectRestaurantData = useFormatToSelect(Restaurant?.data)
+
+
+ return (
+ {t("BasicInfo")}
+ {objectToEdit && data ?
+
+
+
+
+
+
+
+
+
+
+
+ :
+ )
+
+}
+
+export default EditPage
\ No newline at end of file
diff --git a/src/Pages/Restaurant/formUtil.ts b/src/Pages/Restaurant/formUtil.ts
new file mode 100644
index 0000000..2510793
--- /dev/null
+++ b/src/Pages/Restaurant/formUtil.ts
@@ -0,0 +1,22 @@
+
+import * as Yup from "yup";
+
+
+export const getInitialValues = (objectToEdit: any | null = null): any => {
+ return {
+ id: objectToEdit?.id ?? null,
+ name: objectToEdit?.name ?? null,
+ image: objectToEdit?.image ?? null,
+ restaurant_id: objectToEdit?.restaurant_id ?? null,
+
+ };
+};
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema{t("BasicInfo")}
+ handleChangeKey(e, index)}
+ value={group.key}
+ size="large"
+ style={{ width: "100%" }}
+ allowClear
+ disabled={only_value}
+ />
+ handleChangeValue(e, index)}
+ value={group.value}
+ size="large"
+ style={{ width: "100%" }}
+ allowClear
+
+ />
+
+ ))}
+ {!isStatic &&
+
+
+
+
+ }
+
+
+ );
+};
+
+export default FieldGroup;
diff --git a/src/Pages/Setting/Map.tsx b/src/Pages/Setting/Map.tsx
new file mode 100644
index 0000000..86febcb
--- /dev/null
+++ b/src/Pages/Setting/Map.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+
+const Map = ({lat,long}:any) => {
+ return (
+
+
+
+ {Object.entries(slogan).map(([key, value]:any, index) => {
+ console.log(key, value);
+ return (
+
+ );
+};
+
+export default Page;
diff --git a/src/Pages/Setting/View/EditForm.tsx b/src/Pages/Setting/View/EditForm.tsx
new file mode 100644
index 0000000..637410b
--- /dev/null
+++ b/src/Pages/Setting/View/EditForm.tsx
@@ -0,0 +1,46 @@
+
+import React, { useEffect } from 'react'
+import { Col, Row } from 'reactstrap';
+import ValidationField from '../../../Components/ValidationField/ValidationField';
+import { useGetCategories } from '../../../api/Categories';
+import useFormatToSelect from '../../../Hooks/useFormatToSelect';
+import FieldGroup from '../Groups/FieldGroup';
+function Form() {
+ const {data:Categories} = useGetCategories()
+ const SelectCategoriesData = useFormatToSelect(Categories?.data)
+
+
+ return (
+
+
+ {name}
++ {key} : {value} +
+ ); + })} +
+
+ phone_number : {contact_info?.phone_number}
+email : {contact_info?.email}
+ {Object.entries(attributes).map(([key, value]:any, index) => { + console.log(key, value); + return ( ++ {key} : {value} +
+ ); + })} +
+ {images?.map((item:any,index:number)=>{
+ return (
+
+ {video &&
+
+ handel_navigate(id)} size={30}/>
+
+
+ {objectToEdit && data ?
+
+
+
+
+
+
+
+
+
+
+
+ :
+ )
+
+}
+
+export default EditPage
\ No newline at end of file
diff --git a/src/Pages/Setting/formUtil.ts b/src/Pages/Setting/formUtil.ts
new file mode 100644
index 0000000..b1e2709
--- /dev/null
+++ b/src/Pages/Setting/formUtil.ts
@@ -0,0 +1,37 @@
+
+import * as Yup from "yup";
+import { KeyAndValue, objectToArray } from "../../utils/object/objectToArray";
+import { Restaurant } from "../../types/item";
+
+
+export const getInitialValues = (objectToEdit: Restaurant ): any => {
+
+
+ const slogan: KeyAndValue[] = objectToArray(objectToEdit?.slogan);
+ const contact_info: KeyAndValue[] = objectToArray(objectToEdit?.contact_info);
+ const categories = objectToEdit?.categories?.map((item:any)=>(item.id)) || null;
+
+ return {
+ id: objectToEdit?.id ?? null,
+ name: objectToEdit?.name ?? null,
+ images: objectToEdit?.images ?? null,
+ logo: objectToEdit?.logo ?? null,
+
+ address: objectToEdit?.address ?? null,
+ phone_number:contact_info?.[0]?.value ?? null,
+ email:contact_info?.[1]?.value ?? null,
+ categories:categories,
+ slogan: slogan ?? null,
+ video: objectToEdit?.video ?? null,
+ attributes: objectToEdit?.attributes ?? null,
+ };
+};
+
+export const getValidationSchema = (editMode: boolean = false): Yup.Schema