Karimaldeen/hijabi-dashboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Karimaldeen:b91fc7e7cf89e1bb7889f0307fea31332abd34ae
Branches Tags
Karimaldeen:master
Karimaldeen:test
..
compare: Karimaldeen:37ba4708680fd659e1e5e3e501bf6df8976cb974
Branches Tags
Karimaldeen:test
Karimaldeen:master

No commits in common. "b91fc7e7cf89e1bb7889f0307fea31332abd34ae" and "37ba4708680fd659e1e5e3e501bf6df8976cb974" have entirely different histories.
b91fc7e7cf ... 37ba470868

40 changed files with 126 additions and 717 deletions
Show Stats Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -1,7 +1,6 @@
{
"cSpell.words": [
"aldeen",
"antd",
"Datepicker",
"formik",
"Karim",

4
package.json
View File

@ -68,8 +68,8 @@
"zustand": "^4.4.5"
},
"scripts": {
"start": "vite --port=3000",
"build": "vite build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"g:api": "node src/Extensions/FileGenerator/generateApi.js",

2
index.html → public/index.html
View File

@ -7,7 +7,7 @@
name="description"
content="Web site created using create-react-app"
/>
<script type="module" src="/src/index.tsx"></script>
<title>Hijab - App</title>
</head>
<body>

10
src/Components/Utils/getNestedValue.ts
View File

@ -1,10 +0,0 @@
export const getNestedValue = (obj: any, path: string): any => {
return path.split('.').reduce((acc, part) => {
const arrayMatch = part.match(/(\w+)\[(\d+)\]/);
if (arrayMatch) {
const [, key, index] = arrayMatch;
return acc && acc[key] && acc[key][index];
}
return acc && acc[part];
}, obj);
};

1
src/Components/ValidationField/View/Default.tsx
View File

@ -6,7 +6,6 @@ const Default = ({ name, label, placeholder, isDisabled, onChange, props,type }:
const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
console.log(name);
return (
<div className="ValidationField w-100" >

72
src/Components/ValidationField/View/File.tsx
View File

@ -1,37 +1,32 @@
import { Button, Upload, UploadFile } from 'antd';
import { Button, Upload, UploadFile } from 'antd'
import useFormField from '../../../Hooks/useFormField';
import { UploadOutlined } from '@ant-design/icons';
import { getNestedValue } from '../../Utils/getNestedValue';
import { ImageBaseURL } from '../../../api/config';
import { fixImageUrl } from '../utils/fixImageUrl';
import { customRequest } from '../utils/customRequest';
import { ImageBaseURL } from '../../../api/config';
const File: React.FC<any> = ({
name,
label,
onChange,
isDisabled,
placeholder,
className,
props,
}) => {
const { formik, t, isError } = useFormField(name, props);
const FormikName = getNestedValue(formik.values, name);
const imageUrl = FormikName? fixImageUrl(ImageBaseURL + FormikName): '';
const File = ({ name, label, onChange, isDisabled,placholder,className, props }: any) => {
const { formik, t ,isError} = useFormField(name, props)
let FormikName = formik.values[name];
const imageUrl = formik.values[name] ? ImageBaseURL + FormikName : '';
const fileList: UploadFile[] = [
{
uid: '-1',
name: '',
status: 'done',
url: imageUrl,
thumbUrl: imageUrl,
},
url: FormikName == ""? imageUrl : imageUrl?.replace("public", "/storage"),
thumbUrl: FormikName == ""? imageUrl : imageUrl?.replace("public", "/storage")
}
];
const FilehandleChange = (value:any) => {
;
formik.setFieldValue(name, value.file.originFileObj)
};
const customRequest = async ({ onSuccess}: any) => {
onSuccess();
};
return (
<div className="ValidationField">
<label htmlFor={name} className="text">
@ -43,22 +38,25 @@ const File: React.FC<any> = ({
listType="picture"
maxCount={1}
defaultFileList={[...fileList]}
onChange={onChange}
onChange={onChange || FilehandleChange}
customRequest={customRequest}
className={`${className} w-100`}
>
<Button
className={isError ? 'isError w-100' : ' w-100'}
icon={<UploadOutlined />}
>
{placeholder ?? t('upload_image')}
</Button>
{isError && (
<div className="Error_color">required</div>
)}
</Upload>
</div>
);
};
export default File;
>
<Button className={isError ? "isError w-100" : " w-100"} icon={<UploadOutlined />}>
{placholder ?? t("upload_image") }
</Button>
<div className='Error_color'> {isError ? "required" : ""}</div>
</Upload>
</div>
)
}
export default File

99
src/Components/ValidationField/View/MaltyFile.tsx
View File

@ -1,97 +1,52 @@
import { Button, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { ImageBaseURL } from '../../../api/config';
import { useTranslation } from 'react-i18next';
import useFormField from '../../../Hooks/useFormField';
import useFormField from "../../../Hooks/useFormField";
import { customRequest } from "../utils/customRequest";
import { getNestedValue } from "../../Utils/getNestedValue";
import { fixImageUrl } from "../utils/fixImageUrl";
import { ImageBaseURL } from "../../../api/config";
import { Console } from "console";
const MaltyFile = ({
name,
label,
onChange,
isDisabled,
placeholder,
className,
props,
}: any) => {
const MaltyFile = ({ name, label, onChange, isDisabled, placholder, className, props }: any) => {
const { formik, t, isError } = useFormField(name, props);
const FormikName = getNestedValue(formik.values, name);
let imageUrl = FormikName ?? null;
const imageUrl = formik?.values[name] ? ImageBaseURL + formik.values[name] : '';
const fileList = formik?.values[name] ? formik?.values[name]?.map((file: any, index: number) => ({
uid: index,
name: file.name,
status: 'done',
url: file.url || '',
thumbUrl: file.url || '',
})) : [];
// Mapping formik values to fileList format
console.table(imageUrl)
const fileList = imageUrl
? imageUrl.map((file: any, index: number) => {
const imageUrl = (file?.path || file?.url) ? fixImageUrl(ImageBaseURL + file?.path ?? file?.url): '';
console.log(file);
console.log(imageUrl);
return file instanceof File
? {
uid: index,
name: file?.name,
status: "done",
originFileObj: file,
}
: {
uid: index,
id: file?.id,
name: file?.name,
status: "done",
url: imageUrl || "",
thumbUrl: imageUrl || "",
};
})
: [];
const FilehandleChange = ({ fileList }: any) => {
if (fileList.length === 0) {
formik.setFieldValue(name, null);
} else {
formik.setFieldValue(
name,
fileList.map((file: any) => {
console.log(file);
return(
file?.originFileObj ?? file
)
}),
);
}
const FilehandleChange = ({ file, fileList }: any) => {
formik.setFieldValue(name, fileList.map((file: any) => file.originFileObj));
};
const customRequest = async ({ onSuccess }: any) => {
// Perform any necessary actions before onSuccess is called
onSuccess();
};
return (
<div className="ValidationField upload_image_button">
<div className="ValidationField">
<label htmlFor={name} className="text">
{t(`input.${label || name}`)}
{t(`${label || name}`)}
</label>
<Upload
disabled={isDisabled}
listType="picture"
fileList={fileList} // Using fileList instead of defaultFileList
defaultFileList={[...fileList]}
onChange={onChange || FilehandleChange}
customRequest={customRequest}
className={`${className} w-100`}
multiple // Allow multiple files to be selected
id={name}
>
<Button
className={isError ? "isError w-100" : " w-100"}
icon={<UploadOutlined />}
>
{t(`input.` + placeholder) ?? t("input.upload_image")}
<Button className={isError ? "isError w-100" : " w-100"} icon={<UploadOutlined />}>
{placholder ?? t("upload_image")}
</Button>
<div className="Error_color"> {isError ? "required" : ""}</div>
<div className='Error_color'> {isError ? "required" : ""}</div>
</Upload>
</div>
);
};
export default MaltyFile;
78

3
src/Components/ValidationField/utils/customRequest.ts
View File

@ -1,3 +0,0 @@
export const customRequest = async ({ onSuccess}: any) => {
onSuccess();
}

3
src/Components/ValidationField/utils/fixImageUrl.ts
View File

@ -1,3 +0,0 @@
export const fixImageUrl = (url: string | undefined): string => {
return url?.replace('public', '/storage') || '';
};

6
src/Layout/Dashboard/ViewPage.tsx
View File

@ -14,10 +14,10 @@ type TViewPage ={
getDataToSend:any,
handleSubmit:any,
// BarStatus:any,
IsLoadingButton:boolean
IsloadingButton:boolean
}
const ViewPage: React.FC<TViewPage>= ({children,getInitialValues, getValidationSchema,handleSubmit,IsLoadingButton})=> {
const ViewPage: React.FC<TViewPage>= ({children,getInitialValues, getValidationSchema,handleSubmit,IsloadingButton})=> {
const {objectToEdit} = usePageState()
const {t} = useTranslation();
@ -66,7 +66,7 @@ const ViewPage: React.FC<TViewPage>= ({children,getInitialValues, getValidation
<LoadingButton
type="submit"
color="primary"
isLoading={IsLoadingButton}
isLoading={IsloadingButton}
>
{t("save")}
</LoadingButton>

4
src/Pages/Categories/Page.tsx
View File

@ -18,10 +18,14 @@ function Page() {
const navigate = useNavigate()
const totalRows = data?.meta?.total;
const { setObjectToEdit, objectToEdit } = usePageState()
console.log(objectToEdit,"objectToEdit");
useEffect(() => {
console.log(objectToEdit,"objectToEdit");
if(objectToEdit)
setObjectToEdit(null)
}, [setObjectToEdit,objectToEdit ,data,isRefetching])
return (

8
src/Pages/Categories/View/AddPage.tsx
View File

@ -19,7 +19,7 @@ const AddcategoriesPage = () => {
const { setObjectToEdit, objectToEdit } = usePageState()
const {mutate,isLoading:IsLoadingButton ,isSuccess,data } = useAddCategories()
const {mutate,isLoading:IsloadingButton ,isSuccess,data } = useAddCategories()
const {mutateAsync} = useAddAttribute()
const {mutate:AddAttributeValue } = useAddAttributeValue()
@ -218,7 +218,7 @@ const AddcategoriesPage = () => {
}, []);
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -227,9 +227,9 @@ const AddcategoriesPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("attributes")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("attributes")}</h6></div></Tab>
</TabList>

8
src/Pages/Categories/View/EditPage.tsx
View File

@ -26,7 +26,7 @@ const EditPage = () => {
const { id } = useParams()
const { data: Atrribute, isLoading: isLoadingAtrribute, isRefetching: AttributeisRefetching } = useGetSingleAttribute({ name: "category_id", id: id }, {})
const { mutate, isSuccess,isLoading:IsLoadingButton } = useUpdateCategories()
const { mutate, isSuccess,isLoading:IsloadingButton } = useUpdateCategories()
const { mutateAsync } = useAddAttribute()
const { mutate: mutateAttributeValue } = useAddAttributeValue()
const { mutate: UpdateAttribute } = useUpdateAttribute("put")
@ -492,7 +492,7 @@ const EditPage = () => {
};
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
if (AttributeisRefetching || isRefetching || isLoadingAtrribute || isLoading || !objectToEdit || (Array.isArray(objectToEdit) && objectToEdit.some(item => item === undefined))) {
return <Spin />
@ -506,8 +506,8 @@ const EditPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("attributes")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("attributes")}</h6></div></Tab>
</TabList>

6
src/Pages/Coupon/View/AddPage.tsx
View File

@ -12,7 +12,7 @@ import Form from './AddForm';
const AddCouponPage = () => {
const { mutate, isLoading:IsLoadingButton, isSuccess } = useAddCoupon()
const { mutate, isLoading:IsloadingButton, isSuccess } = useAddCoupon()
const handleSubmit = (values: any) => {
const transformedValues = { ...values }; // Create a new object
@ -46,7 +46,7 @@ const AddCouponPage = () => {
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -55,7 +55,7 @@ const AddCouponPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>

8
src/Pages/Coupon/View/EditPage.tsx
View File

@ -18,7 +18,7 @@ import Form from './EditForm';
const EditPage = () => {
const { setObjectToEdit, objectToEdit } = usePageState()
const { t } = useTranslation();
const { data,isLoading:IsLoadingButton,isRefetching } = useGetOneCoupon()
const { data,isLoading:IsloadingButton,isRefetching } = useGetOneCoupon()
const { mutate, isSuccess } = useUpdateCoupon("put")
const handleSubmit = (values: any) => {
const products = values?.product_attr?.map((item: any) => {
@ -70,13 +70,13 @@ const EditPage = () => {
const getValidationSchema = () => {
return null
};
if ( IsLoadingButton || !objectToEdit || isRefetching) {
if ( IsloadingButton || !objectToEdit || isRefetching) {
return <Spin />
}
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -85,7 +85,7 @@ const EditPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
</TabList>
<TabBody >

6
src/Pages/Notifcation/View/AddPage.tsx
View File

@ -14,7 +14,7 @@ import { useAddNotification } from '../../../api/notification';
const AddPage = () => {
const { mutate, isLoading:IsLoadingButton, isSuccess } = useAddNotification()
const { mutate, isLoading:IsloadingButton, isSuccess } = useAddNotification()
const {id} = useParams()
const handleSubmit = (values: any) => {
const hasAsterisk = values?.user_ids.some((item:any) => typeof item === 'string' && item.includes('*'));
@ -55,7 +55,7 @@ const AddPage = () => {
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -64,7 +64,7 @@ const AddPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>

8
src/Pages/Products/View/AddPage.tsx
View File

@ -18,7 +18,7 @@ import { AddNewVariation } from './Addfn/AddNewVariation';
const AddProductPage = () => {
const { mutate, isLoading:IsLoadingButton, data, isSuccess } = useAddProduct()
const { mutate, isLoading:IsloadingButton, data, isSuccess } = useAddProduct()
const { mutate: AddVariation } = useAddProductVariation()
const [IsValed, setIsValed] = useState(false)
@ -74,7 +74,7 @@ const AddProductPage = () => {
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -83,9 +83,9 @@ const AddProductPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='SingleInfo'>{t("Base_info")} </h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleInfo'>{t("Base_info")} </h6></div></Tab>
<Tab ><div className='TabContainer'><span className='TabIcon'><BsInfoCircle size={20} /></span> <h6 className='SingleInfo'>{t("VarianInfo")}</h6></div></Tab>
<Tab ><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><BsInfoCircle size={20} /></span> <h6 className='SingleInfo'>{t("VarianInfo")}</h6></div></Tab>
</TabList>

8
src/Pages/Products/View/EditPage.tsx
View File

@ -24,7 +24,7 @@ const ViewProduct = () => {
const { data, isLoading, isRefetching } = useGetOneProduct({ id: id })
const [OldData, setOldData] = useState(data?.data?.products)
const { mutate, isSuccess, isLoading: IsLoadingButton } = useUpdateProduct('put')
const { mutate, isSuccess, isLoading: IsloadingButton } = useUpdateProduct('put')
const { mutate: UpdateVariation } = useUpdateProductVariation()
const { mutate: AddVariation } = useAddProductVariation()
@ -343,7 +343,7 @@ console.log(mappedAttributes, "mappedAttributes");
return <Spin />
}
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit, IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit, IsloadingButton };
return (
@ -352,9 +352,9 @@ console.log(mappedAttributes, "mappedAttributes");
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("Base_info")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("Base_info")}</h6></div></Tab>
<Tab><div className='TabContainer'><span className='TabIcon'><BsInfoCircle size={20} /></span> <h6 className='Tab_Info'>{t("VarianInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><BsInfoCircle size={20} /></span> <h6 className='Tab_Info'>{t("VarianInfo")}</h6></div></Tab>
</TabList>

6
src/Pages/Slider/View/AddPage.tsx
View File

@ -13,7 +13,7 @@ import Form from './AddForm';
const AddSliderPage = () => {
const {mutate , isLoading:IsLoadingButton , isSuccess} = useAddSlider()
const {mutate , isLoading:IsloadingButton , isSuccess} = useAddSlider()
const handleSubmit = (values:any)=>{
mutate(values)
@ -26,7 +26,7 @@ const AddSliderPage = () => {
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -35,7 +35,7 @@ const AddSliderPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>

6
src/Pages/Slider/View/EditPage.tsx
View File

@ -19,7 +19,7 @@ const EditPage = () => {
const { setObjectToEdit, objectToEdit } = usePageState()
const {t} = useTranslation();
const { data } = useGetOneSlider()
const {mutate ,isSuccess,isLoading:IsLoadingButton} = useUpdateSlider()
const {mutate ,isSuccess,isLoading:IsloadingButton} = useUpdateSlider()
const FormatedData = data?.data ;
const handleSubmit = (values:any)=>{
@ -51,7 +51,7 @@ const EditPage = () => {
};
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -60,7 +60,7 @@ const EditPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
</TabList>
<TabBody >

6
src/Pages/SupportMessages/View/AddPage.tsx
View File

@ -11,7 +11,7 @@ import Form from './AddForm';
const AddSupportMessagesPage = () => {
const {mutate , isLoading:IsLoadingButton , isSuccess} = useAddSupportMessages()
const {mutate , isLoading:IsloadingButton , isSuccess} = useAddSupportMessages()
const handleSubmit = (values:any)=>{
console.log(values,"values");
@ -25,7 +25,7 @@ const AddSupportMessagesPage = () => {
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -34,7 +34,7 @@ const AddSupportMessagesPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>

6
src/Pages/Users/SendNotifcation/View/AddPage.tsx
View File

@ -14,7 +14,7 @@ import { useAddNotification } from '../../../../api/notification';
const AddPage = () => {
const { mutate, isLoading:IsLoadingButton, isSuccess } = useAddNotification()
const { mutate, isLoading:IsloadingButton, isSuccess } = useAddNotification()
const {id} = useParams()
const handleSubmit = (values: any) => {
@ -48,7 +48,7 @@ const AddPage = () => {
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -57,7 +57,7 @@ const AddPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>

6
src/Pages/Users/View/EditPage.tsx
View File

@ -15,7 +15,7 @@ const EditPage = () => {
const { setObjectToEdit, objectToEdit } = usePageState()
const {t} = useTranslation();
const { data } = useGetOneUser()
const {mutate ,isSuccess,isLoading:IsLoadingButton} = useUpdateAdmin()
const {mutate ,isSuccess,isLoading:IsloadingButton} = useUpdateAdmin()
const handleSubmit = (values:any)=>{
return mutate(values);
@ -37,7 +37,7 @@ const EditPage = () => {
};
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
return (
@ -46,7 +46,7 @@ const EditPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
</TabList>
<TabBody >

58
src/Pages/newProduct/ProductsPage.tsx
View File

@ -1,58 +0,0 @@
import DashBody from '../../Layout/Dashboard/DashBody'
import DashHeader from '../../Layout/Dashboard/DashHeader'
import LyTable from '../../Layout/Dashboard/LyTable'
import useTableColumns from './useTableColumns'
import { QueryStatusEnum } from '../../config/QueryStatus'
import { useGetProduct } from '../../api/product'
import { useNavigate } from 'react-router-dom'
import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
import SearchField from '../../Layout/Dashboard/SearchField'
import SelectField from '../../Layout/Dashboard/SelectWSearchField'
import { useGetCategories } from '../../api/Categories'
function ProductsPage() {
const column =useTableColumns()
const {data ,status } = useGetProduct()
const navigate = useNavigate()
const totalRows = data?.meta?.total;
const { data:Categories } = useGetCategories()
const language = localStorage.getItem("language") ?? "en"
const SelectData = Categories?.categories?.map((item:any)=>(
{
label : item?.name[language],
value : item?.id
}
))
return (
<DashBody status={status as QueryStatusEnum} >
<DashHeader showAddButton={false} title={'products'}>
<div className='RightSide d-flex gap-2 align-center '>
<SelectField selectBy="category" submiteBy="category_id" lebel="category" option={SelectData} />
<SearchField searchBy="name"/>
<AddButton onClick={()=>navigate('add')}></AddButton>
</div>
</DashHeader>
<LyTable
data={data?.BaseProducts}
isLoading={false}
columns={column}
total={totalRows }
is_pagination={true}
/>
</DashBody>
)
}
export default ProductsPage

54
src/Pages/newProduct/View/AddPage.tsx
View File

@ -1,54 +0,0 @@
import { getInitialValues, getValidationSchema, getDataToSend } from '../formUtil'
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
import 'react-tabs/style/react-tabs.css';
import { MdLanguage } from 'react-icons/md'
import ViewPage from '../../../Layout/Dashboard/ViewPage';
import BasicInfo from './BasicInfo';
import { useTranslation } from 'react-i18next';
import VariantInfo from './VariantInfo';
// import AttributeInfo from './AttributeInfo';
const AddProductPage = () => {
const handleSubmit = (values: any) => {
console.log(values,"values");
}
const { t } = useTranslation();
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton:false };
return (
<div className='ViewPage'>
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 >{t("Base_info")} </h6></div></Tab>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 >{t("variant")} </h6></div></Tab>
</TabList>
<TabBody >
<div className="mt-4"><BasicInfo /></div>
</TabBody>
<TabBody >
<div className="mt-4"><VariantInfo /></div>
</TabBody>
</Tabs>
</ViewPage>
</div>
)
}
export default AddProductPage

59
src/Pages/newProduct/View/BasicInfo.tsx
View File

@ -1,59 +0,0 @@
import React, { useEffect, useState } from 'react'
import { Col, Row } from 'reactstrap'
import ValidationField from '../../../Components/ValidationField/ValidationField'
import { useTranslation } from 'react-i18next';
import { useFormikContext } from 'formik';
import { toast } from 'react-toastify';
import { useGetCategories } from '../../../api/Categories';
import useFormatToSelect from '../../../Hooks/useFormatToSelect';
import { useParams } from 'react-router-dom';
const BasicInfo = ({ setIsValed, IsValed }: any) => {
const [t] = useTranslation();
const formikContext = useFormikContext();
const { values, isValid } = formikContext;
const { data } = useGetCategories()
const language = localStorage.getItem("language") ?? "en"
const {id}=useParams()
const SelectData = data?.categories?.map((item:any)=>(
{
label : item?.name[language],
value : item?.id
}
))
useEffect(() => {
const { name_ar, name_en, name_de, main_photo, category_id } = values as any;
if (name_ar && name_en && name_de && main_photo && category_id && IsValed === false) {
toast.success(t("view_information_filed_fill_sucsessfully"));
setIsValed(true)
} else {
// console.log(isValid, "isValid");
}
}, [values]);
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
<ValidationField name="name_ar" />
<ValidationField name="name_en" />
</Col>
<Col>
<ValidationField name="name_de" />
{/* <ValidationField name="main_photo" type='File' /> */}
{!id &&
<ValidationField name="category_id" type="Search" label='category' placeholder='category' option={SelectData} searchBy={"name"} />
}
</Col>
</Row>
)
}
export default BasicInfo

35
src/Pages/newProduct/View/Tabs/TabContent.tsx
View File

@ -1,35 +0,0 @@
import React from 'react'
import { Variant } from '../../formUtil'
import { Col, Row } from 'reactstrap';
import ValidationField from '../../../../Components/ValidationField/ValidationField';
const TabContent = ({data,index}:{data:Variant,index:number}) => {
console.log(data);
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col>
<ValidationField name={`variant.${index}.name.ar`} label='name_ar' placeholder='name_ar' />
<ValidationField name={`variant.${index}.name.en`} label='name_en' placeholder='name_en' />
<ValidationField name={`variant.${index}.name.de`} label='name_de' placeholder='name_de' />
</Col>
<Col>
<ValidationField name={`variant.${index}.description.ar`} label='description_ar' placeholder='description_ar' />
<ValidationField name={`variant.${index}.description.en`} label='description_en' placeholder='description_en' />
<ValidationField name={`variant.${index}.description.de`} label='description_de' placeholder='description_de' />
<ValidationField name={`variant.${index}.price`} label='price' placeholder='price' />
<ValidationField type='File' name={`variant.${index}.main_photo`} label='main_photo' placeholder='main_photo' />
<ValidationField type='MaltyFile' name={`variant.${index}.images`} label='images' placeholder='images' />
</Col>
</Row>
)
}
export default TabContent

40
src/Pages/newProduct/View/Tabs/TabsContainer.tsx
View File

@ -1,40 +0,0 @@
import React from 'react'
import { Variant } from '../../formUtil'
import { Tabs, TabsProps } from 'antd';
import { useTranslation } from 'react-i18next';
import TabContent from './TabContent';
import AddIcon from '../handle/AddIcon';
import DeleteIcon from '../handle/DeleteIcon';
import DuplicateIcon from '../handle/DuplicateIcon';
const TabsContainer = ({data}:{data:Variant[]}) => {
const [t] = useTranslation()
const width = 1400;
const label = "variant"
const tabPosition = width > 1000 ? 'left' : 'top';
const items : TabsProps['items'] = data?.map((item:Variant,index:number) =>{
const key = index + 1 ;
return {
key: String(key) ,
label: <div className='tabHeader'> <div>{t(label)} {key} </div> <DuplicateIcon index={index} /> <DeleteIcon index={index}/> </div>,
children:<TabContent index={index} data={item} />
}
})
return (
<Tabs
defaultActiveKey="1"
items={items}
tabPosition={tabPosition}
type="editable-card"
removeIcon
addIcon={<AddIcon/>}
/>
)
}
export default TabsContainer

13
src/Pages/newProduct/View/VariantInfo.tsx
View File

@ -1,13 +0,0 @@
import { useFormikContext } from 'formik'
import { InitialValuesProductType, Variant } from '../formUtil'
import TabsContainer from './Tabs/TabsContainer'
const VariantInfo = () => {
const {values} = useFormikContext<InitialValuesProductType>()
const variant = values?.variant
return (
<TabsContainer data={variant} />
)
}
export default VariantInfo

24
src/Pages/newProduct/View/handle/AddIcon.tsx
View File

@ -1,24 +0,0 @@
import { useFormikContext } from 'formik'
import { FaPlus } from 'react-icons/fa'
import { emptyVariant, InitialValuesProductType } from '../../formUtil'
const AddIcon = () => {
const {values,setFieldValue} = useFormikContext<InitialValuesProductType>()
const handleClick = ()=>{
setFieldValue("variant",
[...values?.variant,
emptyVariant
]
)
}
return (
<FaPlus size={20} onClick={()=> handleClick()}/>
)
}
export default AddIcon

21
src/Pages/newProduct/View/handle/DeleteIcon.tsx
View File

@ -1,21 +0,0 @@
import { useFormikContext } from 'formik'
import { InitialValuesProductType } from '../../formUtil'
import { MdOutlineDeleteOutline } from 'react-icons/md'
const DeleteIcon = ({index}:{index:number}) => {
const {values,setFieldValue} = useFormikContext<InitialValuesProductType>()
const handleClick = ()=>{
const newData = values?.variant?.filter((_, i: number) => i !== index);
setFieldValue("variant", newData)
}
return (
<MdOutlineDeleteOutline size={20} onClick={()=> handleClick()}/>
)
}
export default DeleteIcon

29
src/Pages/newProduct/View/handle/DuplicateIcon.tsx
View File

@ -1,29 +0,0 @@
import { useFormikContext } from 'formik'
import { FaPlus } from 'react-icons/fa'
import { InitialValuesProductType } from '../../formUtil'
import { CopyOutlined } from '@ant-design/icons'
const DuplicateIcon = ({index}:{index:number}) => {
const {values,setFieldValue} = useFormikContext<InitialValuesProductType>()
const handleClick = ()=>{
const currentValue = values?.variant?.find((item:any,key:number)=>{
return index === key
})
setFieldValue("variant",
[
...values?.variant,
currentValue
]
)
}
return (
<CopyOutlined size={20} onClick={()=> handleClick()}/>
)
}
export default DuplicateIcon

68
src/Pages/newProduct/formUtil.ts
View File

@ -1,68 +0,0 @@
import * as Yup from "yup";
interface translate {
ar: string;
en: string;
de: string;
}
export interface Variant {
name: translate;
description: translate;
price:number | null;
main_photo:File | string | null
images:(File | string | null | object)[]
}
interface Category {
id: string;
}
interface ObjectToEditProductType {
id: string;
name: translate;
category: Category;
variant?: Variant[];
}
export interface InitialValuesProductType {
id: string;
name: translate;
category_id: string;
variant: Variant[];
}
export const emptyVariant : Variant = {
name: { en: '', de: '', ar: '' },
description: { en: '', de: '', ar: '' },
price:null,
main_photo:null,
images:[
{ created_at: "2024-06-11T10:14:38.000000Z",
id: 35,
path : "public/product/images/XX5EcgZmtbNhBoaXwdjNTKjHYPrOsBqyQDHu2omI.png"
}
],
}
export const getInitialValues = (objectToEdit: ObjectToEditProductType): InitialValuesProductType => {
const variant = objectToEdit?.variant;
return {
id: objectToEdit?.id,
name: objectToEdit?.name ?? { en: '', de: '', ar: '' },
category_id: objectToEdit?.category?.id ?? '',
variant: variant ?? [emptyVariant]
};
};
export const getValidationSchema = (editMode: boolean = false) => {
return Yup.object().shape({
});
};
export const getDataToSend = (values: any): FormData => {
const data = { ...values };
return data;
};

89
src/Pages/newProduct/useTableColumns.tsx
View File

@ -1,89 +0,0 @@
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import Actions from "../../Components/Ui/tables/Actions";
import { HovarableImage } from "../../Components/Ui";
import { BaseURL } from "../../api/config";
import { ToggleStatus } from "../../Components/Ui/ToggleStatus";
import ColumnsImage from "../../Components/Columns/ColumnsImage";
import LoadingSpinner from "../../Components/Ui/LoadingSpinner";
import { Switch } from "antd";
import { mapTranslatedProperties } from "../../utils/language/mapTranslatedProperties";
// import { useDeleteProduct, useUpdateProductStatus } from "../../api/owner_products";
import { useNavigate } from "react-router-dom";
import { useDeleteProduct, useUpdateProductStatus } from "../../api/product";
const useTableColumns :any = () => {
const [t] = useTranslation();
const toggleMutation = useUpdateProductStatus();
const deleteMutation = useDeleteProduct();
const navigate = useNavigate()
const handleChange = (row:any)=> {
const status = row?.favorite ;
toggleMutation.mutate({id:row?.id,new_status:status})
}
const language = localStorage.getItem("language") ?? "en"
return useMemo(
() => [
{
name: t("id"),
sortable: true, // Enable sorting for id column
center: true,
selector: (row: any) => row.id, // Specify selector function for sorting
}, {
name: t("name"),
sortable: false,
center: true,
selector:(row:any) => row?.name?.[language],
},
{
name: t("product_count"),
sortable: false,
center: true,
selector:(row:any) => row?.product_count,
},
{
name: t("category"),
sortable: false,
center: true,
cell: (row:any) => (
row?.category?.name?.[language]
),
},
// {
// name: t("favorite"),
// sortable: false,
// center: true,
// cell: (row:any) => (
// <ToggleStatus handleSwitch={handleChange} object={row} toggleMutation={toggleMutation} />
// ),
// },
{
name: "#",
sortable: false,
center: "true",
cell: (row:any) => (
<Actions
onEdit={()=> navigate('/products/'+row.id)}
objectToEdit={row}
showEdit={true}
showView={false}
onDelete={() => deleteMutation.mutate({ id: row.id })}
/>
),
},
],
[t]
);
};
export default useTableColumns;

10
src/Pages/order/EditPage.tsx
View File

@ -21,7 +21,7 @@ import ViewForm from './View/ViewForm';
const EditPage = () => {
const { setObjectToEdit, objectToEdit } = usePageState()
const {t} = useTranslation();
const {mutate ,isSuccess,isLoading:IsLoadingButton} = useUpdateOrder("put")
const {mutate ,isSuccess,isLoading:IsloadingButton} = useUpdateOrder("put")
const { id } = useParams();
const { data, isLoading } = useGetOneOrder({id: id })
const handleSubmit = (values:any) => {
@ -65,7 +65,7 @@ const EditPage = () => {
};
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
if ( isLoading || !objectToEdit) {
return <Spin />
}
@ -79,9 +79,9 @@ const EditPage = () => {
<ViewPage {...ViewProps}>
<Tabs>
<TabList>
<Tab><div className='TabContainer'><span className='TabIcon'><FaEdit size={20} /></span> <h6 className='Tab_Info'>{t("EditDetails")}</h6></div></Tab>
<Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='TabContainer'><span className='TabIcon'><FaFirstOrderAlt size={20} /></span> <h6 className='Tab_Info'>{t("OrderItems")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><FaEdit size={20} /></span> <h6 className='Tab_Info'>{t("EditDetails")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>
<Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><FaFirstOrderAlt size={20} /></span> <h6 className='Tab_Info'>{t("OrderItems")}</h6></div></Tab>
</TabList>
<TabBody >

17
src/Routes.tsx
View File

@ -17,11 +17,6 @@ import EditCategories from "./Pages/Categories/View/EditPage";
import ProductsPage from "./Pages/Products/ProductsPage";
import AddProductPage from "./Pages/Products/View/AddPage";
import EditProduct from "./Pages/Products/View/EditPage";
import NewProductsPage from "./Pages/newProduct/ProductsPage";
import AddNewProductPage from "./Pages/newProduct/View/AddPage";
import OrderPage from "./Pages/order/OrderPage";
import EditOrder from "./Pages/order/EditPage";
@ -205,17 +200,5 @@ export const RoutesLinks: RoutesLinksType[] = [
element: <AddSupportMessagesPage />,
hidden:true
},
{
name: "NewProducts",
element: <NewProductsPage />,
icon: <FaProductHunt /> ,
href: "/Newproducts",
},
{
name: "add_Newproducts",
element: <AddNewProductPage />,
href: "/Newproducts/add",
hidden:true
},
]

12
src/Styles/Layout/Layout.scss
View File

@ -546,15 +546,3 @@ padding: 10px 40px;
}
}
.tabHeader{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ant-tabs .ant-tabs-tab .anticon:not(:last-child) {
margin-right: 0px;
}

4
src/Styles/component/Tab_Info.scss
View File

@ -1,12 +1,12 @@
.TabContainer{
.Tab_Info_Container{
display: flex;justify-content: start;align-items: center;
.Tab_Info{
font-size: 1.4vw;
padding-left: .5vw;
margin-bottom: 0;
}
.TabIcon{
.SignleDriverInfoIcon{
svg{
width: 90%;
}

11
vite.config.js
View File

@ -1,11 +0,0 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [react()],
};
});