+ {loading ?
+ );
+};
+
+export default KarimSpinner;
diff --git a/src/Components/Karimalden/View/CheckboxField.tsx b/src/Components/Karimalden/View/CheckboxField.tsx
new file mode 100644
index 0000000..329bffd
--- /dev/null
+++ b/src/Components/Karimalden/View/CheckboxField.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+import { Checkbox, Form } from 'antd';
+
+const CheckboxField = ({ name, label, isDisabled, onChange,Group,className, props }: any) => {
+
+ const { t, formik,isError,errorMsg} = useFormField(name, props)
+ const CheckboxhandleChange = (value: any) => {
+ formik.setFieldValue(name, value?.target?.checked)
+
+ };
+ return (
+
+
+
+ {t(label)}
+
+
+
+
+ )
+}
+
+export default CheckboxField
\ No newline at end of file
diff --git a/src/Components/Karimalden/View/DataRange.tsx b/src/Components/Karimalden/View/DataRange.tsx
new file mode 100644
index 0000000..6639e76
--- /dev/null
+++ b/src/Components/Karimalden/View/DataRange.tsx
@@ -0,0 +1,43 @@
+import { Form, DatePicker } from 'antd'
+
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+
+const { RangePicker } = DatePicker;
+
+const DataRange = ({ name, label,Format ,props ,onChange,isDisabled,placeholder,className}: any) => {
+
+ const { errorMsg, isError, t, formik } = useFormField(name, props)
+ const onCalendarChange = (value: any) => {
+
+ formik.setFieldValue(name, value)
+
+ };
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default DataRange
\ No newline at end of file
diff --git a/src/Components/Karimalden/View/Date.tsx b/src/Components/Karimalden/View/Date.tsx
new file mode 100644
index 0000000..4f96987
--- /dev/null
+++ b/src/Components/Karimalden/View/Date.tsx
@@ -0,0 +1,43 @@
+import { Form, DatePicker } from 'antd'
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+import dayjs from 'dayjs';
+
+const Date = ({ name, label,picker="date" ,isDisabled,props,onChange,placeholder ,className}: any) => {
+
+ const { errorMsg, isError, t, formik } = useFormField(name, props)
+ const onCalendarChange = (value: any) => {
+
+ formik.setFieldValue(name, value)
+
+ };
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default Date
\ No newline at end of file
diff --git a/src/Components/Karimalden/View/Default.tsx b/src/Components/Karimalden/View/Default.tsx
new file mode 100644
index 0000000..11e5801
--- /dev/null
+++ b/src/Components/Karimalden/View/Default.tsx
@@ -0,0 +1,34 @@
+import { Form, Input } from 'antd'
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+
+const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any) => {
+ const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
+
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default React.memo(Default);
+;
diff --git a/src/Components/Karimalden/View/File.tsx b/src/Components/Karimalden/View/File.tsx
new file mode 100644
index 0000000..d33b79f
--- /dev/null
+++ b/src/Components/Karimalden/View/File.tsx
@@ -0,0 +1,60 @@
+import { Button, Upload, UploadFile } from 'antd'
+import useFormField from '../../../Hooks/useFormField';
+import { UploadOutlined } from '@ant-design/icons';
+import { ImageBaseURL } from '../../../api/config';
+import { useTranslation } from 'react-i18next';
+
+
+const File = ({ name, label, onChange, isDisabled,placholder,className, props }: any) => {
+ const { formik, t ,isError} = useFormField(name, props)
+ const imageUrl = formik.values[name] ? ImageBaseURL + formik.values[name] : '';
+ const fileList: UploadFile[] = [
+
+ {
+ uid: '-1',
+ name: '',
+ status: 'done',
+ url: imageUrl,
+ thumbUrl: imageUrl,
+ }
+ ];
+ const FilehandleChange = (value:any) => {
+
+ formik.setFieldValue(name, value.file.originFileObj)
+
+ };
+ const customRequest = async ({ onSuccess}: any) => {
+ onSuccess();
+ };
+ return (
+
+
+
+
+ }>
+ {placholder ?? t("upload_image") }
+
+
+
+
+
+
+
+ )
+}
+
+export default File
\ No newline at end of file
diff --git a/src/Components/Karimalden/View/SearchField.tsx b/src/Components/Karimalden/View/SearchField.tsx
new file mode 100644
index 0000000..bffbe3d
--- /dev/null
+++ b/src/Components/Karimalden/View/SearchField.tsx
@@ -0,0 +1,46 @@
+import { Input } from 'antd';
+import { SearchProps } from 'antd/es/input'
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+const { Search } = Input;
+
+const SearchField = () => {
+ const navigate = useNavigate()
+ const [searchParams,] = useSearchParams();
+ const location =useLocation()
+ const {t} = useTranslation();
+
+ const [searchValue, setSearchValue] = useState(searchParams.get('search')|| "");
+
+
+ const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
+ // console.log(value);
+
+ navigate(`${location?.pathname}?search=${value}`, { replace: true });
+ }
+ const onChange = (e :any) => {
+ setSearchValue(e.target.value);
+
+ }
+
+
+ return (
+ {isError ? "required" : ""}
+
+
+ )
+}
+
+export default SearchField
\ No newline at end of file
diff --git a/src/Components/Karimalden/View/SelectField.tsx b/src/Components/Karimalden/View/SelectField.tsx
new file mode 100644
index 0000000..4a1f20c
--- /dev/null
+++ b/src/Components/Karimalden/View/SelectField.tsx
@@ -0,0 +1,41 @@
+import { Form, Select } from 'antd'
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+
+const SelectField = ({ name, label, placeholder, isDisabled,option,isMulti,onChange,className, props}: any) => {
+
+ const { errorMsg, isError, t ,formik} = useFormField(name, props)
+ const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
+ formik.setFieldValue(name, value)
+
+ };
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default React.memo(SelectField);
diff --git a/src/Components/Karimalden/View/Time.tsx b/src/Components/Karimalden/View/Time.tsx
new file mode 100644
index 0000000..debecbd
--- /dev/null
+++ b/src/Components/Karimalden/View/Time.tsx
@@ -0,0 +1,41 @@
+import { Form, TimePicker } from 'antd'
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+
+const Time = ({ name, label,className,isDisabled,onChange,props }: any) => {
+
+ const { errorMsg, isError, t, formik } = useFormField(name, props)
+ const onCalendarChange = (value: any) => {
+
+ formik.setFieldValue(name, value)
+
+ };
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default Time
\ No newline at end of file
diff --git a/src/Components/Karimalden/View/index.tsx b/src/Components/Karimalden/View/index.tsx
new file mode 100644
index 0000000..ca46bc9
--- /dev/null
+++ b/src/Components/Karimalden/View/index.tsx
@@ -0,0 +1,22 @@
+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";
+
+
+
+
+
+export {
+ Time,
+ SelectField,
+ Date,
+ DataRange,
+ CheckboxField,
+ Default,
+ File
+
+}
\ No newline at end of file
diff --git a/src/Components/Karimalden/index.tsx b/src/Components/Karimalden/index.tsx
new file mode 100644
index 0000000..ee84bc7
--- /dev/null
+++ b/src/Components/Karimalden/index.tsx
@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { ErrorMessage, useField, Field, useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { FaExclamationCircle } from 'react-icons/fa';
+import Select from 'react-select';
+import { convert_data_to_select } from '../../Layout/app/Const';
+
+
+
+
+
+export {
+ useState,
+ ErrorMessage, useField, Field, useFormikContext,
+ useTranslation,
+ FaExclamationCircle,
+ Select,
+ convert_data_to_select,
+
+
+}
\ No newline at end of file
diff --git a/src/Components/Karimalden/types.ts b/src/Components/Karimalden/types.ts
new file mode 100644
index 0000000..eb7bdf6
--- /dev/null
+++ b/src/Components/Karimalden/types.ts
@@ -0,0 +1,114 @@
+
+// export interface KarimFieldProps {
+// name: string;
+// type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
+// placeholder?: string;
+// label?: string;
+// className?: string;
+// option?: any[];
+// isMulti?: boolean;
+// isDisabled?: boolean;
+// picker?: "data" | "week" | "month" | "quarter" | "year";
+// Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM";
+// onChange?: (value: any) => void;
+// Group?: boolean
+// dir?:'ltr' | "rtl"
+// }
+
+ export interface KarimFieldPropsText {
+ name: string;
+ type: "text";
+ placeholder?: string;
+ label?: string;
+ className?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl"
+ }
+
+ export interface KarimFieldPropsSelect {
+ name: string;
+ type: "Select";
+ placeholder?: string;
+ label?: string;
+ className?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl";
+ option: any[];
+ isMulti?: boolean;
+
+ }
+ export interface KarimFieldPropsDataRange {
+ name: string;
+ type: "DataRange";
+ placeholder?: string;
+ label?: string;
+ className?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl"
+ Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM";
+ }
+ export interface KarimFieldPropsDate {
+ name: string;
+ type: "Date";
+ placeholder?: string;
+ label?: string;
+ className?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl"
+ picker?: "data" | "week" | "month" | "quarter" | "year";
+
+ }
+
+ export interface KarimFieldPropsTime {
+ name: string;
+ type: "Time";
+ label?: string;
+ placeholder?: string;
+ className?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl"
+
+ }
+
+ export interface KarimFieldPropsFile {
+ name: string;
+ type: "File";
+ placeholder?: string;
+ label?: string;
+ className?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl"
+
+ }
+ export interface KarimFieldPropsCheckbox {
+ name: string;
+ type: "Checkbox";
+ label?: string;
+ className?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl"
+ Group?: boolean
+
+ }
+ export interface KarimFieldPropstext {
+ name: string;
+ type?: "text" | "number" | "password";
+ label?: string;
+ className?: string;
+ placeholder?: string;
+ isDisabled?: boolean;
+ onChange?: (value: any) => void;
+ dir?:'ltr' | "rtl"
+ Group?: boolean
+
+ }
+
+
+ export type KarimFieldProps = KarimFieldPropsText| KarimFieldPropsSelect| KarimFieldPropsDataRange| KarimFieldPropsDate| KarimFieldPropsTime| KarimFieldPropsFile| KarimFieldPropsCheckbox| KarimFieldPropstext;
diff --git a/src/Components/Ui/Alert.tsx b/src/Components/Ui/Alert.tsx
new file mode 100644
index 0000000..c232160
--- /dev/null
+++ b/src/Components/Ui/Alert.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { confirmAlert } from "react-confirm-alert";
+import SweetAlert from "react-bootstrap-sweetalert";
+import { useTranslation } from "react-i18next";
+
+export default function CustomConfirmAlert(options : any) {
+ confirmAlert({
+ customUI: ({ onClose }) =>
+ {
+ 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..7681ffd
--- /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/state mangment/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..f345457
--- /dev/null
+++ b/src/Components/Utils/Translate.tsx
@@ -0,0 +1,77 @@
+import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
+import { useTranslation, initReactI18next } from 'react-i18next';
+import i18n from 'i18next'; // Make sure this import is correct
+import translationEN from '../../translate/en.json';
+import translationAR from '../../translate/ar.json';
+
+i18n.use(initReactI18next).init({
+ resources: {
+ en: {
+ translation: translationEN
+ },
+ ar: {
+ translation: translationAR
+ }
+ },
+ lng: 'en',
+ interpolation: {
+ escapeValue: false
+ }
+});
+let What_the_language = localStorage.getItem('language') ?? "en";
+
+if (What_the_language === "en") {
+
+ i18n.changeLanguage('en');
+ document.body.setAttribute('dir', 'ltr'); document.body.classList.add('en')}
+ else{
+ i18n.changeLanguage('ar');
+ document.body.setAttribute('dir', 'rtl'); document.body.classList.add('ar');
+}
+
+
+export default function Translate() {
+ const { t, i18n } = useTranslation();
+
+
+ const changeLanguage = (newLanguage : any) => {
+ i18n.changeLanguage(newLanguage);
+ if(newLanguage === "Ar"){
+ i18n.changeLanguage('ar');
+ document.body.setAttribute('dir', 'rtl'); document.body.classList.add('ar');localStorage.setItem("language", "ar");
+ What_the_language = "ar"
+ }
+ else if(newLanguage === "En"){
+ i18n.changeLanguage('en');
+ document.body.setAttribute('dir', 'ltr'); document.body.classList.remove('ar');localStorage.setItem("language", "en");
+ What_the_language = "en"
+
+ }
+ };
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/Components/Utils/UnBlockModal.tsx b/src/Components/Utils/UnBlockModal.tsx
new file mode 100644
index 0000000..cf3fac1
--- /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/state mangment/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}
+
+
+ OrderStatus
+ )
+}
+
+export default OrderStatus
\ No newline at end of file
diff --git a/src/Extensions/Editor/HtmlEditor.tsx b/src/Extensions/Editor/HtmlEditor.tsx
new file mode 100644
index 0000000..9d02c9b
--- /dev/null
+++ b/src/Extensions/Editor/HtmlEditor.tsx
@@ -0,0 +1,42 @@
+import React, { FC } from "react";
+import { Editor } from '@tinymce/tinymce-react';
+import { useFormikContext } from "formik";
+
+interface HtmlEditorProps {
+ langCode: number;
+ name: string;
+ editorState: string;
+}
+
+const HtmlEditor: FC{label}
+Failed !
} +
+ {children}
+
+
+ {
+ 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..22b4f3b
--- /dev/null
+++ b/src/Layout/Dashboard/AddButton/Add_Button.scss
@@ -0,0 +1,36 @@
+.Add_Button{
+ button {
+ border: 2px solid var(--primary);
+ background-color: var(--primary);
+ border-radius: 0.5vw;
+ padding:.5vw 1vw;
+ 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: bold;
+ }
+
+ 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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Layout/Dashboard/DashBody.tsx b/src/Layout/Dashboard/DashBody.tsx
new file mode 100644
index 0000000..4bd1fac
--- /dev/null
+++ b/src/Layout/Dashboard/DashBody.tsx
@@ -0,0 +1,38 @@
+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";
+
+
+const DashBody = ({ children , status }: { children: React.ReactNode ,status?:QueryStatusEnum }) => {
+ const {t} = useTranslation();
+
+ // Add You Custom Loadaing Page
+ if(status === QueryStatusEnum.LOADING){
+
+ return
+
+ {t("An Error According")}
+ {t("Please Try Again Later")} + +
+ )
+ }
+
+ return (
+ + {t("An Error According")}
+ {t("Please Try Again Later")} + +
+ { 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..5804310
--- /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/LayoutModal.tsx b/src/Layout/Dashboard/LayoutModal.tsx
new file mode 100644
index 0000000..926e7f0
--- /dev/null
+++ b/src/Layout/Dashboard/LayoutModal.tsx
@@ -0,0 +1,77 @@
+import { Form, Formik } from 'formik'
+import React, { useEffect } from 'react'
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'
+import { usePageState } from '../../lib/state mangment/LayoutPagestate'
+import { useTranslation } from 'react-i18next';
+import { LoadingButton } from '../../Components/Ui/LoadingButton';
+import { QueryStatusEnum } from '../../config/QueryStatus';
+
+interface LayoutModalProps {
+ isAddModal: boolean;
+ headerText: string;
+ handleSubmit: (values: any) => void;
+ getInitialValues: any;
+ getValidationSchema: any;
+ children: React.ReactNode;
+ status?:QueryStatusEnum
+}
+function LayoutModal({isAddModal , headerText , handleSubmit =()=>{} , getInitialValues , getValidationSchema,status ,children}:LayoutModalProps) {
+
+
+
+ const {isOpenAddModel ,setIsOpenAddModel , setIsOpenEditModel ,isOpenEditModel , objectToEdit , CloseAllModal} = usePageState(state => state)
+
+
+ useEffect(()=>{
+ if(status === QueryStatusEnum.SUCCESS){
+ CloseAllModal()
+ }
+ },[status , CloseAllModal])
+
+ const [t] = useTranslation()
+ return (
+
+
+
+ {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 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..1a8a9ab
--- /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/state mangment/AuthState'
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+
+
+ const navigate = useNavigate()
+ const { isAuthenticated } = useAuthState()
+ useEffect(() => {
+ if (!isAuthenticated) {
+
+ navigate('/auth', { replace: true })
+ }
+ }, [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..670778a
--- /dev/null
+++ b/src/Layout/app/LoadingPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import LoadingSpinner from '../../Components/Ui/LoadingSpinner'
+
+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..bae6565
--- /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..3df9188
--- /dev/null
+++ b/src/Layout/app/SideBar.tsx
@@ -0,0 +1,103 @@
+import React, { 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';
+
+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..315992f
--- /dev/null
+++ b/src/Layout/app/Types.tsx
@@ -0,0 +1,19 @@
+export interface FormTableState {
+ objectToEdit: any[];
+ OpenEdit: boolean;
+ OpenAdd: boolean;
+ }
+
+ export type KarimFieldProps = {
+ 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..0a0f9a2
--- /dev/null
+++ b/src/Layout/app/WithDrawer.tsx
@@ -0,0 +1,54 @@
+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
+}
+
+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}
+
+
+ {t("add_account")}
+{t("edit_account")}
+ +
+ 
+
+
+
+
+
+
+
+
+ )
+}
+
+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..c15b72c
--- /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/state mangment/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
+
+
+
+
+
+
+
+
+ + // { + // !row.deleted_at ? t('available') : t('unavailable') + + // } + //
+ // ) + // } + // }, + + ], + [t] + ); +}; + +export default useTableColumns; + diff --git a/src/Pages/Home/HomePage.tsx b/src/Pages/Home/HomePage.tsx new file mode 100644 index 0000000..4c20a2b --- /dev/null +++ b/src/Pages/Home/HomePage.tsx @@ -0,0 +1,87 @@ +import React from "react"; +// import StatisticsCard from "../../Components/Ui/StaticsCard/StaticCard"; +import { FaRedRiver } from "react-icons/fa"; +import { useTranslation } from "react-i18next"; +// import { ChartTypeEnum } from "../../enums/ChartTypeEnum"; +// import { Card, Col, Row } from "reactstrap"; +// import { AiOutlineUser } from 'react-icons/ai'; +// import { useGetStatistics } from "../../api/statistics"; +// import { BsCart3 } from "react-icons/bs"; +// import YearChart from "./YearChart"; +// import HighDriverRateTable from "./tables/HighDriverRate/HighDriverRateTable"; +// import LastOrderTable from "./tables/LastOrder/LastOrderTable"; +// import LoadingSpinner from "../../Components/Ui/LoadingSpinner"; +// import LoadingPage from "../../Layout/app/LoadingPage"; + +export default function HomePage() { + + const { t } = useTranslation() + + // const { data: statistics, isLoading } = useGetStatistics({ + // order_daily_date: null + // }); + + // if(isLoading){ + // return
+
+
+
+
+
+
+
+
+
+
+
+
+ {t("high_drivers_rate")}
+
+ navigate("/Drivers" , {replace:true})}>
+ {t("show_all_driver")}
+
+
+
+
+ {t("latest_orders")}
+ navigate("/order",{replace:true})}>
+ {t("show_all_orders")}
+
+
+
+