Karimaldeen/Quiz_dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://git.point-dev.net/Karimaldeen/Quiz_dashboard into dev

Browse Source
This commit is contained in:
Majd_dk 2024-11-19 16:23:12 +03:00
commit 7b966d93ed
354 changed files with 12645 additions and 8885 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env Normal file
View File

@ -0,0 +1 @@
VITE_BASE_URL="https://nerd-back.point-dev.net/api/"

1
.env.example Normal file
View File

@ -0,0 +1 @@
REACT_APP_BASE_URL=

2
.vscode/settings.json vendored
View File

@ -30,4 +30,4 @@
"مطلوب"
],
"vite.https": true
}
}

1
package-lock.json generated
View File

@ -12782,7 +12782,6 @@
"version": "2.0.15",
"resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz",
"integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.8.1",
"qr.js": "0.0.0"

9533
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

16
src/Components/Cards/AddressCard.tsx
View File

@ -1,15 +1,15 @@
import { Divider } from 'antd'
import { useTranslation } from 'react-i18next'
import { Divider } from "antd";
import { useTranslation } from "react-i18next";
import { RxHome } from "react-icons/rx";
const AddressCard = ({ data }: { data: any }) => {
const { t } = useTranslation();
return (
<div className='address_card'>
<div className="address_card">
<h5>{t("practical.address")}</h5>
<Divider />
<div className="address_card_body">
{data?.map((address:any)=>(
{data?.map((address: any) => (
<div>
<RxHome />
<span>
@ -20,9 +20,7 @@ const AddressCard = ({ data }: { data: any }) => {
))}
</div>
</div>
)
}
export default AddressCard
);
};
export default AddressCard;

38
src/Components/Cards/AttachmentsCard.tsx
View File

@ -1,24 +1,24 @@
import { Divider } from 'antd';
import { useTranslation } from 'react-i18next'
import ImageBoxField from '../CustomFields/ImageBoxField/ImageBoxField';
import { Divider } from "antd";
import { useTranslation } from "react-i18next";
import ImageBoxField from "../CustomFields/ImageBoxField/ImageBoxField";
const AttachmentsCard = ({data}:{data?:any}) => {
const {t} = useTranslation();
const AttachmentsCard = ({ data }: { data?: any }) => {
const { t } = useTranslation();
return (
<div className='attachments_card'>
<h5>{t("practical.address")}</h5>
<Divider />
<div className='attachments_body'>
<h5>{t("practical.id_photo")}</h5>
{/* {data?.map((address:any)=>( */}
<span>
<ImageBoxField name="image" />
</span>
{/* ))} */}
</div>
<div className="attachments_card">
<h5>{t("practical.address")}</h5>
<Divider />
<div className="attachments_body">
<h5>{t("practical.id_photo")}</h5>
{/* {data?.map((address:any)=>( */}
<span>
<ImageBoxField name="image" />
</span>
{/* ))} */}
</div>
</div>
)
}
);
};
export default AttachmentsCard
export default AttachmentsCard;

80
src/Components/Cards/InfoCard.tsx
View File

@ -1,39 +1,49 @@
import { Button, Divider } from 'antd'
import { useTranslation } from 'react-i18next'
import { canAddReSeller } from '../../utils/hasAbilityFn';
import { Button, Divider } from "antd";
import { useTranslation } from "react-i18next";
import { canAddReSeller } from "../../utils/hasAbilityFn";
const InfoCard = ({ data, name, status,withButton = false,handleClick}:{ data:any, name:any, status:any,withButton?:boolean,handleClick?:() => void}) => {
const {t} = useTranslation();
const InfoCard = ({
data,
name,
status,
withButton = false,
handleClick,
}: {
data: any;
name: any;
status: any;
withButton?: boolean;
handleClick?: () => void;
}) => {
const { t } = useTranslation();
return (
<div className='info_card'>
<div className="info_card_header">
<img src="/Image/faker_user.png " alt="" />
<div className="student_name_and_sub">
<span>{status}</span>
<h2>{name}</h2>
</div>
</div>
<Divider />
<div className="info_card_body">
{data?.map((student: any) => (
<span>
<h4>{student?.key}</h4>
<p>{student?.value}</p>
</span>
))}
{withButton ?
canAddReSeller &&
<Button onClick={handleClick} className='info_card_button'>
{t("practical.collecting_an_amount")}
</Button>
: ""}
</div>
return (
<div className="info_card">
<div className="info_card_header">
<img src="/Image/faker_user.png " alt="" />
<div className="student_name_and_sub">
<span>{status}</span>
<h2>{name}</h2>
</div>
)
}
export default InfoCard
</div>
<Divider />
<div className="info_card_body">
{data?.map((student: any) => (
<span>
<h4>{student?.key}</h4>
<p>{student?.value}</p>
</span>
))}
{withButton
? canAddReSeller && (
<Button onClick={handleClick} className="info_card_button">
{t("practical.collecting_an_amount")}
</Button>
)
: ""}
</div>
</div>
);
};
export default InfoCard;

43
src/Components/Cards/ParamInfo.ts
View File

@ -1,27 +1,30 @@
export const StudentParamInfo = [
{key:"الحنس" , value:"male"},
{key:"sex" , value:"male"},
{key:"sex" , value:"male"},
{key:"sex" , value:"male"},
{key:"sex" , value:"male"},
{key:"sex" , value:"male"}
]
{ key: "الحنس", value: "male" },
{ key: "sex", value: "male" },
{ key: "sex", value: "male" },
{ key: "sex", value: "male" },
{ key: "sex", value: "male" },
{ key: "sex", value: "male" },
];
export const ReSellerParamInfo = [
{key:"رقم الهوية" , value:"12i9128921019"},
{key:"تاريخ الإضافة", value:"1/10/2010"},
{key:"تاريخ الإضافة", value:"1/10/2010"},
{key:"تاريخ الإضافة", value:"1/10/2010"},
{key:"تاريخ الإضافة", value:"1/10/2010"},
{key:"تاريخ الإضافة", value:"1/10/2010"},
{key:"تاريخ الإضافة", value:"1/10/2010"},
]
{ key: "رقم الهوية", value: "12i9128921019" },
{ key: "تاريخ الإضافة", value: "1/10/2010" },
{ key: "تاريخ الإضافة", value: "1/10/2010" },
{ key: "تاريخ الإضافة", value: "1/10/2010" },
{ key: "تاريخ الإضافة", value: "1/10/2010" },
{ key: "تاريخ الإضافة", value: "1/10/2010" },
{ key: "تاريخ الإضافة", value: "1/10/2010" },
];
export const StudentAddressInfo = [
{key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
]
{ key: "address", value: "moa moamasom aoms omaosm oasm oasm oasm asm aom" },
];
export const ReSellerAddressInfo = [
{key:"governorate" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
{key:"address" , value:"moa moamasom aoms omaosm oasm oasm oasm asm aom"},
]
{
key: "governorate",
value: "moa moamasom aoms omaosm oasm oasm oasm asm aom",
},
{ key: "address", value: "moa moamasom aoms omaosm oasm oasm oasm asm aom" },
];

6
src/Components/Columns/ColumnsImage.tsx
View File

@ -16,10 +16,10 @@ const ColumnsImage = ({ src }: any) => {
if (hasError) {
// If there is an error, display the fallback icon
return <CiImageOff />;
return <CiImageOff />;
}
if(!imageUrl){
return <CiImageOff />;
if (!imageUrl) {
return <CiImageOff />;
}
return (
<Image

20
src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx
View File

@ -14,7 +14,7 @@ const ImageBoxField = ({ name }: any) => {
const value = getNestedValue(formik?.values, name);
const [imagePreview, setImagePreview] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null);
const [t] = useTranslation()
const [t] = useTranslation();
useEffect(() => {
if (value instanceof File) {
generateImagePreview(value, setImagePreview);
@ -27,14 +27,14 @@ const ImageBoxField = ({ name }: any) => {
const handleFileChange = (event: any) => {
const file = event.target.files[0];
if (file) {
const maxSize = 2 * 1024 * 1024;
const maxSize = 2 * 1024 * 1024;
if (file.size > maxSize) {
alert(t('validation.File_size_exceeds_2_MB_limit.'));
event.target.value = '';
return;
alert(t("validation.File_size_exceeds_2_MB_limit."));
event.target.value = "";
return;
}
// Process the file
@ -42,7 +42,7 @@ const ImageBoxField = ({ name }: any) => {
if (file) {
generateImagePreview(file, setImagePreview);
formik.setFieldValue(name, file);
}
};
@ -63,7 +63,7 @@ const ImageBoxField = ({ name }: any) => {
}
};
console.log(name);
return (
<div className="ImageBoxField">
<div className="ImageHeader">
@ -81,9 +81,9 @@ const ImageBoxField = ({ name }: any) => {
</div>
<div className="ImageBox" onClick={handleButtonClick}>
{imagePreview ? (
<img src={imagePreview} alt="Preview" className="imagePreview" />
<img src={imagePreview} alt="Preview" className="imagePreview" />
) : (
<ImageIcon className="ImageBoxIcon" />
<ImageIcon className="ImageBoxIcon" />
)}
</div>
<input

51
src/Components/CustomFields/ImageBoxField/ImageBoxFieldMemo.tsx
View File

@ -1,17 +1,18 @@
import "./ImageBoxField.scss";
import { useState, useRef, useEffect,memo } from "react";
import ImageIcon from "./ImageIcon";
import ImageCancelIcon from "./ImageCancelIcon";
import { getNestedValue } from "../../../utils/getNestedValue";
import { generateImagePreview } from "./generateImagePreview";
import { useTranslation } from "react-i18next";
import { useState, useRef, useEffect, memo } from "react";
import ImageIcon from "./ImageIcon";
import ImageCancelIcon from "./ImageCancelIcon";
import { getNestedValue } from "../../../utils/getNestedValue";
import { generateImagePreview } from "./generateImagePreview";
import { useTranslation } from "react-i18next";
import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
// Helper function to generate image preview from a File
// Helper function to generate image preview from a File
const ImageBoxFieldMemo = memo(({ form,field }: any) => {
const {values,setFieldValue} = form
const {name} = field;
const ImageBoxFieldMemo = memo(
({ form, field }: any) => {
const { values, setFieldValue } = form;
const { name } = field;
const value = getNestedValue(values, name);
const [imagePreview, setImagePreview] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null);
@ -28,14 +29,14 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
const handleFileChange = (event: any) => {
const file = event.target.files[0];
if (file) {
const maxSize = 2 * 1024 * 1024;
const maxSize = 2 * 1024 * 1024;
if (file.size > maxSize) {
alert(t('validation.File_size_exceeds_2_MB_limit.'));
event.target.value = '';
return;
alert(t("validation.File_size_exceeds_2_MB_limit."));
event.target.value = "";
return;
}
// Process the file
@ -43,7 +44,7 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
if (file) {
generateImagePreview(file, setImagePreview);
setFieldValue(name, file);
}
};
@ -64,8 +65,8 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
}
};
console.log(name);
console.log(name);
return (
<div className="ImageBoxField">
<div className="ImageHeader">
@ -83,9 +84,9 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
</div>
<div className="ImageBox" onClick={handleButtonClick}>
{imagePreview ? (
<img src={imagePreview} alt="Preview" className="imagePreview" />
<img src={imagePreview} alt="Preview" className="imagePreview" />
) : (
<ImageIcon className="ImageBoxIcon" />
<ImageIcon className="ImageBoxIcon" />
)}
</div>
<input
@ -98,8 +99,10 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
/>
</div>
);
}, (prevProps, nextProps) => {
return areFieldPropsEqual(prevProps, nextProps)
});
},
(prevProps, nextProps) => {
return areFieldPropsEqual(prevProps, nextProps);
},
);
export default ImageBoxFieldMemo;
export default ImageBoxFieldMemo;

23
src/Components/CustomFields/MathComponent.tsx
View File

@ -1,22 +1,15 @@
import React from 'react';
import { BlockMath } from 'react-katex';
import 'katex/dist/katex.min.css';
import React from "react";
import { BlockMath } from "react-katex";
import "katex/dist/katex.min.css";
const LatexPreview = ({ latex }: { latex: string }) => {
// console.log(latex);
// const sanitizedLatex = latex.replace(/\\_/g, '_');
// const sanitizedLatex = latex.replace(/\\_/g, '_');
return (
<div >
<BlockMath>
{latex}
</BlockMath>
<div>
<BlockMath>{latex}</BlockMath>
</div>
);
};

48
src/Components/CustomFields/SelectTag.tsx
View File

@ -9,32 +9,31 @@ const SelectTag: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [fieldValue, setFieldValue] = useState<string>("");
const [NewAdditionalData, setNewAdditionalData] = useState({})
const [NewAdditionalData, setNewAdditionalData] = useState({});
const formik = useFormikContext<any>();
const handleChange = (value: any,option:any) => {
const handleChange = (value: any, option: any) => {
console.log(option);
console.log(value);
const newSelectedOption = option?.pop()
const newSelectedOption = option?.pop();
console.log(newSelectedOption);
const newObject = {
id:newSelectedOption?.id,
name:newSelectedOption?.name
}
setNewAdditionalData(newObject)
id: newSelectedOption?.id,
name: newSelectedOption?.name,
};
setNewAdditionalData(newObject);
formik.setFieldValue("tags", value);
setSearchValue("");
setFieldValue("");
};
const handleSearch = useDebounce((value: string) => {
console.log(value,"value");
console.log(value, "value");
setSearchValue(value);
});
const handleFieldChange = (value: string) => {
setFieldValue(value);
};
@ -48,33 +47,34 @@ const SelectTag: React.FC = () => {
});
const [t] = useTranslation();
const initialData = formik?.values?.tags?.filter((item:any)=>{
return item?.id
}) ?? []
const initialData =
formik?.values?.tags?.filter((item: any) => {
return item?.id;
}) ?? [];
const options = data?.data ?? [];
const additionalData =
options.length < 1 && searchValue.length > 1 && !isLoading
? [{ id: searchValue, name: searchValue }]
: [];
const value =
formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? [];
const AllOptions = [...options, ...additionalData,NewAdditionalData, ...(initialData)];
const AllOptions = [
...options,
...additionalData,
NewAdditionalData,
...initialData,
];
const uniqueOptions = Array.from(
new Map(
AllOptions
.filter(item => Object.keys(item).length > 0) // Filter out empty objects
.map(item => [item.id, item]) // Create [id, item] pairs to ensure uniqueness
).values()
AllOptions.filter((item) => Object.keys(item).length > 0) // Filter out empty objects
.map((item) => [item.id, item]), // Create [id, item] pairs to ensure uniqueness
).values(),
);
return (
<div className="SelectTag">
<label htmlFor="">{t("models.tag")}</label>

39
src/Components/CustomFields/SelectTagV2.tsx
View File

@ -13,21 +13,22 @@ const SelectTagV2: React.FC = () => {
// Fetch tags based on search value
const { data, isLoading } = useGetAllTag({ name: searchValue });
const { t } = useTranslation();
// Get selected tags from Formik
const CurrentTags = formik.values.tags ?? []; // Assuming tags are stored as array of objects
console.log(CurrentTags,"CurrentTags");
const NewShapeTags = CurrentTags?.map((item:any)=> {return item?.name ?? item })
const handleChange = (_value: any[],option:any) => {
console.log(CurrentTags, "CurrentTags");
const NewShapeTags = CurrentTags?.map((item: any) => {
return item?.name ?? item;
});
const handleChange = (_value: any[], option: any) => {
// console.log(option,"option");
console.log(_value);
// const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})})
// const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})})
// console.log(NewShapeOption);
// formik.setFieldValue("tags", NewShapeOption);
// setSearchValue("");
// setFieldValue("");
@ -43,14 +44,13 @@ const SelectTagV2: React.FC = () => {
};
const options = data?.data ?? [];
const additionalData =
options.length < 1 && searchValue.length >= 1 && !isLoading
? [{ id: searchValue, name: searchValue }]
: options;
console.log(additionalData);
const additionalData =
options.length < 1 && searchValue.length >= 1 && !isLoading
? [{ id: searchValue, name: searchValue }]
: options;
console.log(additionalData);
return (
<div className="SelectTag">
@ -76,11 +76,10 @@ const SelectTagV2: React.FC = () => {
handleBlur();
}
}}
value={NewShapeTags}
value={NewShapeTags}
/>
</div>
);
};
export default SelectTagV2;
export default SelectTagV2;

7
src/Components/DataTable/SearchField.tsx
View File

@ -14,16 +14,15 @@ const SearchField: React.FC<Props> = ({ placeholder, searchBy }) => {
const [searchQuery, setSearchQuery] = useState<string>("");
const inputRef = useRef<HTMLInputElement>(null);
const { setFilter,Filter } = useFilterStateState();
const { setFilter, Filter } = useFilterStateState();
const { page } = PaginationParams(location);
const handleInputChange = (value: string) => {
setSearchQuery(value);
};
const handleInputChangeWithDebounce = useDebounce((value: string) => {
if(Number(page) > 1){
if (Number(page) > 1) {
}
setFilter({
[searchBy]: value,

6
src/Components/DataTable/SearchFieldWithSelect.tsx
View File

@ -58,7 +58,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
const filteredOptions = options.filter((option) =>
option.label.toLowerCase().includes(searchTerm.toLowerCase()),
);
const Type = localStorage.getItem('type');
const Type = localStorage.getItem("type");
return (
<div ref={node} className={`search-field ${isOpen ? "open" : ""}`}>
<div className="search-header" onClick={toggleDropdown}>
@ -78,7 +78,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
<div className="search-options-list">
{filteredOptions.map((option) => {
console.log(option);
return(
return (
<div
key={option.value}
className="search-option"
@ -87,7 +87,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
<div>{option.label}</div>
{/* {withIcon && <IoSearch className="search__icon" />} */}
</div>
)
);
})}
</div>
</div>

7
src/Components/Filter/PaginationColumn.tsx
View File

@ -8,15 +8,14 @@ import { useFilterStateState } from "../../zustand/Filter";
const PaginationColumn = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { Filter ,setFilter } = useFilterStateState();
const { Filter, setFilter } = useFilterStateState();
const handleChange = (value: string) => {
navigate(`?per_page=${value}`);
setFilter({
per_page:value
})
per_page: value,
});
};
return (

59
src/Components/FilterField/components/useFilter.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useState } from "react";
import '../styles/index.scss';
import "../styles/index.scss";
import CustomInput from "../design-system/CustomInput";
import { Button } from "antd";
import { useTranslation } from "react-i18next";
@ -24,37 +24,40 @@ const useFilter = () => {
};
const FilterBody = ({ children }: IFilterBody) => {
const [values, setValues] = useState({ name1: '', name2: '' });
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setValues((prev) => ({ ...prev, [name]: value }));
}, []);
const [values, setValues] = useState({ name1: "", name2: "" });
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setValues((prev) => ({ ...prev, [name]: value }));
},
[],
);
const handleSubmit = (event:React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log(values,"values");
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log(values, "values");
};
const [t] = useTranslation()
const [t] = useTranslation();
return (
<div className={`filter_body ${isBodyVisible ? 'visible' : 'hidden'}`}>
<form onSubmit={handleSubmit} >
{children}
<CustomInput
name="name1"
value={values.name1}
onChange={handleChange}
/>
<CustomInput
name="name2"
value={values.name2}
onChange={handleChange}
/>
<Button block htmlType="submit" type="primary" > {t("practical.submit")} </Button>
</form>
<div className={`filter_body ${isBodyVisible ? "visible" : "hidden"}`}>
<form onSubmit={handleSubmit}>
{children}
<CustomInput
name="name1"
value={values.name1}
onChange={handleChange}
/>
<CustomInput
name="name2"
value={values.name2}
onChange={handleChange}
/>
<Button block htmlType="submit" type="primary">
{" "}
{t("practical.submit")}{" "}
</Button>
</form>
</div>
);
};

21
src/Components/FilterField/design-system/CustomInput.tsx
View File

@ -1,5 +1,5 @@
import { Input } from 'antd';
import React from 'react';
import { Input } from "antd";
import React from "react";
interface CustomInputProps {
name: string;
@ -7,16 +7,11 @@ interface CustomInputProps {
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
const CustomInput: React.FC<CustomInputProps> = React.memo(({ name, value, onChange }) => {
console.log(`Rendering ${name}`); // For debugging purposes
return (
<Input
type="text"
name={name}
value={value}
onChange={onChange}
/>
);
});
const CustomInput: React.FC<CustomInputProps> = React.memo(
({ name, value, onChange }) => {
console.log(`Rendering ${name}`); // For debugging purposes
return <Input type="text" name={name} value={value} onChange={onChange} />;
},
);
export default CustomInput;

65
src/Components/FilterField/styles/index.scss
View File

@ -1,33 +1,34 @@
.filter_body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
opacity: 0;
transform: translateY(-20px);
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.filter_body.visible {
max-height: 200px;
opacity: 1;
transform: translateY(0);
}
.filter_body.hidden {
max-height: 0;
opacity: 0;
transform: translateY(-20px);
}
.DummyHomePage {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
width: 70%;
padding: 50px;
}
max-height: 0;
overflow: hidden;
transition:
max-height 0.3s ease-out,
opacity 0.3s ease-out,
transform 0.3s ease-out;
opacity: 0;
transform: translateY(-20px);
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.filter_body.visible {
max-height: 200px;
opacity: 1;
transform: translateY(0);
}
.filter_body.hidden {
max-height: 0;
opacity: 0;
transform: translateY(-20px);
}
.DummyHomePage {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
width: 70%;
padding: 50px;
}

152
src/Components/LatextInput/AddLaTexModal.tsx
View File

@ -1,83 +1,89 @@
import { Modal } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { useFormikContext } from 'formik';
import React, { useState } from 'react'
import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
const AddLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen,setCurrentValue}:{
name:string,
setLatex: (value:string)=> void,
Latex:string,
setIsModalOpen: (value:boolean)=> void ,
isModalOpen:boolean,
setCurrentValue:(value:string)=> void
import { Modal } from "antd";
import TextArea from "antd/es/input/TextArea";
import { useFormikContext } from "formik";
import React, { useState } from "react";
import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
const AddLaTexModal = ({
name,
setLatex,
Latex,
setIsModalOpen,
isModalOpen,
setCurrentValue,
}: {
name: string;
setLatex: (value: string) => void;
Latex: string;
setIsModalOpen: (value: boolean) => void;
isModalOpen: boolean;
setCurrentValue: (value: string) => void;
}) => {
const {values,setFieldValue,getFieldProps} = useFormikContext<any>()
const { values, setFieldValue, getFieldProps } = useFormikContext<any>();
const currentValue = getFieldProps(name).value
const handleOk = () => {
const oldValue = currentValue ?? "";
const newLatex = convertMathMLToLaTeX(Latex);
console.log(oldValue);
if(newLatex){
setFieldValue(name, oldValue + " $$ " +newLatex +" $$ ");
setCurrentValue(oldValue + " $$ " +newLatex +" $$ ")
setLatex("")
const currentValue = getFieldProps(name).value;
const handleOk = () => {
const oldValue = currentValue ?? "";
const newLatex = convertMathMLToLaTeX(Latex);
console.log(oldValue);
if (newLatex) {
setFieldValue(name, oldValue + " $$ " + newLatex + " $$ ");
setCurrentValue(oldValue + " $$ " + newLatex + " $$ ");
setLatex("");
setIsModalOpen(false);
}else{
setFieldValue(name, oldValue + " $$ " +Latex +" $$ ");
setCurrentValue(oldValue + " $$ " +Latex +" $$ ")
setLatex("")
} else {
setFieldValue(name, oldValue + " $$ " + Latex + " $$ ");
setCurrentValue(oldValue + " $$ " + Latex + " $$ ");
setLatex("");
setIsModalOpen(false);
}
};
const handleCancel = () => {
setIsModalOpen(false);
setLatex("")
};
};
const handleChangeInputLatex = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const newValue = e.target.value;
setLatex(newValue)
};
const handleCancel = () => {
setIsModalOpen(false);
setLatex("");
};
const [t] = useTranslation()
const handleChangeInputLatex = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const newValue = e.target.value;
setLatex(newValue);
};
const [t] = useTranslation();
return (
<Modal footer={false} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<div className='latexModal'>
<label className='mb-3'> {t("header.past_your_MMl_text")} </label>
<TextArea
size="large"
showCount
maxLength={5000}
autoSize={{ minRows: 4, maxRows: 10 }}
style={{height:"400px"}}
onChange={handleChangeInputLatex}
value={Latex}
/>
<div className="buttons">
<div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")}
</div>
<div
className="add_button"
onClick={handleOk}
>
{t(`practical.${ "add"}`)}
</div>
</div>
</div>
</Modal>
<Modal
footer={false}
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
>
<div className="latexModal">
<label className="mb-3"> {t("header.past_your_MMl_text")} </label>
<TextArea
size="large"
showCount
maxLength={5000}
autoSize={{ minRows: 4, maxRows: 10 }}
style={{ height: "400px" }}
onChange={handleChangeInputLatex}
value={Latex}
/>
<div className="buttons">
<div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")}
</div>
<div className="add_button" onClick={handleOk}>
{t(`practical.${"add"}`)}
</div>
</div>
</div>
</Modal>
);
};
)
}
export default AddLaTexModal
export default AddLaTexModal;

164
src/Components/LatextInput/EditLaTexModal.tsx
View File

@ -1,89 +1,91 @@
import { Modal } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { useFormikContext } from 'formik';
import React, { useState } from 'react'
import { convertMathMLToLaTeX } from '../../utils/convertMathMLToLaTeX';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
const EditLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen}:{
name:string,
setLatex: (value:string)=> void,
Latex:any,
setIsModalOpen: (value:boolean)=> void ,
isModalOpen:boolean,
import { Modal } from "antd";
import TextArea from "antd/es/input/TextArea";
import { useFormikContext } from "formik";
import React, { useState } from "react";
import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
import { parseTextAndLatex } from "../../utils/parseTextAndLatex";
const EditLaTexModal = ({
name,
setLatex,
Latex,
setIsModalOpen,
isModalOpen,
}: {
name: string;
setLatex: (value: string) => void;
Latex: any;
setIsModalOpen: (value: boolean) => void;
isModalOpen: boolean;
}) => {
const {values} = useFormikContext<any>()
const [Value, setValue] = useState(Latex?.text ?? Latex)
const { values } = useFormikContext<any>();
const [Value, setValue] = useState(Latex?.text ?? Latex);
const handleOk = () => {
console.log(1);
const oldValue = values?.[name];
const currentKey = Latex?.key ;
const Preview = parseTextAndLatex(oldValue ?? "") ;
console.log(Latex);
const newLatex = convertMathMLToLaTeX(Latex);
console.log(newLatex);
if(newLatex){
const newArray = Preview?.map((item:any,index:number)=>{
if(item?.key)
return item
})
}else{
toast.error(t("validation.that_is_not_a_valid_mml"))
const handleOk = () => {
console.log(1);
const oldValue = values?.[name];
const currentKey = Latex?.key;
const Preview = parseTextAndLatex(oldValue ?? "");
console.log(Latex);
const newLatex = convertMathMLToLaTeX(Latex);
console.log(newLatex);
if (newLatex) {
const newArray = Preview?.map((item: any, index: number) => {
if (item?.key) return item;
});
} else {
toast.error(t("validation.that_is_not_a_valid_mml"));
}
};
const handleCancel = () => {
setIsModalOpen(false);
setLatex("")
};
};
const handleChangeInputLatex = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const newValue = e.target.value;
console.log(newValue,"newValue");
setValue(newValue)
};
const handleCancel = () => {
setIsModalOpen(false);
setLatex("");
};
const [t] = useTranslation()
const handleChangeInputLatex = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const newValue = e.target.value;
console.log(newValue, "newValue");
setValue(newValue);
};
const [t] = useTranslation();
return (
<Modal footer={false} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<div className='latexModal'>
<label className='mb-3'> {t("header.past_your_MMl_text")} </label>
<TextArea
size="large"
showCount
maxLength={1000}
autoSize={{ minRows: 4, maxRows: 10 }}
style={{height:"400px"}}
onChange={handleChangeInputLatex}
value={Value
}
/>
<div className="buttons">
<div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")}
</div>
<div
className="add_button"
onClick={handleOk}
>
{t(`practical.${ "edit"}`)}
</div>
</div>
</div>
</Modal>
<Modal
footer={false}
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
>
<div className="latexModal">
<label className="mb-3"> {t("header.past_your_MMl_text")} </label>
<TextArea
size="large"
showCount
maxLength={1000}
autoSize={{ minRows: 4, maxRows: 10 }}
style={{ height: "400px" }}
onChange={handleChangeInputLatex}
value={Value}
/>
<div className="buttons">
<div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")}
</div>
<div className="add_button" onClick={handleOk}>
{t(`practical.${"edit"}`)}
</div>
</div>
</div>
</Modal>
);
};
)
}
export default EditLaTexModal
export default EditLaTexModal;

303
src/Components/LatextInput/LaTeXInputMemo.tsx
View File

@ -1,160 +1,185 @@
import TextArea from 'antd/es/input/TextArea';
import React, { Suspense, useEffect, useState } from 'react';
import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
import LatexPreview from '../CustomFields/MathComponent';
import { Checkbox } from 'antd';
import { CheckboxProps } from 'antd/lib';
import { useTranslation } from 'react-i18next';
import { FaPlus } from 'react-icons/fa';
import { useObjectToEdit } from '../../zustand/ObjectToEditState';
import SpinContainer from '../Layout/SpinContainer';
import { areFieldPropsEqual } from './areFieldPropsEqual';
import TextArea from "antd/es/input/TextArea";
import React, { Suspense, useEffect, useState } from "react";
import { parseTextAndLatex } from "../../utils/parseTextAndLatex";
import LatexPreview from "../CustomFields/MathComponent";
import { Checkbox } from "antd";
import { CheckboxProps } from "antd/lib";
import { useTranslation } from "react-i18next";
import { FaPlus } from "react-icons/fa";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import SpinContainer from "../Layout/SpinContainer";
import { areFieldPropsEqual } from "./areFieldPropsEqual";
const AddLazyModal = React.lazy(() => import("./AddLaTexModal"));
const EditLazyModal = React.lazy(() => import("./EditLaTexModal"));
const LaTeXInputMemo: React.FC<any> = React.memo(
({ field, form, label, ...props }) => {
const { name, value } = field;
const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...props }) => {
const { name ,value} = field;
const { setFieldValue ,touched ,errors ,getFieldProps,values} = form;
const { setFieldValue, touched, errors, getFieldProps, values } = form;
const { ShowLatexOption, Success } = useObjectToEdit();
const [showPreview, setShowPreview] = useState(false);
const Preview = parseTextAndLatex(value ?? "");
const { ShowLatexOption, Success } = useObjectToEdit();
const [showPreview, setShowPreview] = useState(false);
const Preview = parseTextAndLatex(value ?? "");
const onPreviewChange: CheckboxProps["onChange"] = (e) => {
setShowPreview(e.target.checked);
};
const onPreviewChange: CheckboxProps['onChange'] = (e) => {
setShowPreview(e.target.checked);
};
const [t] = useTranslation();
const [t] = useTranslation();
const [isModalOpen, setIsModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [Latex, setLatex] = useState<string>("");
const [isModalOpen, setIsModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [Latex, setLatex] = useState<string>("");
const showModal = () => {
setIsModalOpen(true);
};
const showModal = () => {
setIsModalOpen(true);
};
const handleEditModal = (item: any) => {
// console.log(item);
// setLatex(item);
// setIsEditModalOpen(true);
};
const handleEditModal = (item: any) => {
// console.log(item);
// setLatex(item);
// setIsEditModalOpen(true);
};
const [curCentValue, setCurrentValue] = useState(value)
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setCurrentValue(e.target.value)
};
const onBlur = ()=>{
if (curCentValue !== value) {
setFieldValue(name, curCentValue);
const [curCentValue, setCurrentValue] = useState(value);
const handleChangeInput = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
setCurrentValue(e.target.value);
};
const onBlur = () => {
if (curCentValue !== value) {
setFieldValue(name, curCentValue);
}
};
useEffect(() => {
if (Success) {
setCurrentValue(null);
}
}, [Success]);
useEffect(() => {
if (value) {
setCurrentValue(value);
}
}, [value]);
const isError = !!touched?.[name] && !!errors?.[name];
const errorMessage = isError ? ((errors?.[name] as string) ?? "") : "";
console.log(values);
let metaName = name.substring(0, name.lastIndexOf("."));
if (metaName.includes(".") || metaName.includes("[")) {
metaName += ".meta";
} else {
metaName += "meta";
}
}
useEffect(() => {
if(Success){
setCurrentValue(null)
}
}, [Success])
useEffect(() => {
if(value){
setCurrentValue(value)
}
}, [value])
const meta = getFieldProps(metaName).value;
console.log(metaName, meta);
const direction = meta?.direction === "ltr" ? "ltr" : "rtl";
const isError = !!touched?.[name] && !!errors?.[name];
const errorMessage = isError ? errors?.[name] as string ?? "" : "" ;
const [Dir, setDir] = useState<"ltr" | "rtl">(direction);
const handleChangeDirection = () => {
if (Dir === "ltr") {
setDir("rtl");
setFieldValue(metaName, { ...(meta ?? {}), direction: "rtl" });
} else {
setDir("ltr");
setFieldValue(metaName, { ...(meta ?? {}), direction: "ltr" });
}
};
console.log(values);
let metaName = name.substring(0, name.lastIndexOf('.'));
if (metaName.includes('.') || metaName.includes('[')) { metaName += ".meta";} else {metaName += "meta"}
const meta = getFieldProps(metaName).value ;
console.log(metaName,meta);
const direction = meta?.direction === "ltr" ? "ltr" : "rtl"
const [Dir, setDir] = useState<"ltr" | "rtl">(direction)
const handleChangeDirection = ()=>{
if(Dir === "ltr"){
setDir("rtl")
setFieldValue(metaName,{...(meta ?? {}), direction:"rtl"})
}else{
setDir("ltr")
setFieldValue(metaName,{...(meta ?? {}), direction:"ltr"})
return (
<div className="LaTeXInput">
<label htmlFor={name} className="text">
<div>{t(label || name)}</div>{" "}
<div className="error_message">{t(errorMessage)}</div>
</label>
}
}
<div className="LaTeXInputArea">
<TextArea
size="large"
showCount
maxLength={5000}
autoSize={{ minRows: 6, maxRows: 10 }}
style={{ height: "400px" }}
onChange={handleChangeInput}
value={curCentValue}
onBlur={onBlur}
dir={Dir}
{...props}
/>
<div className="LaTeXInputOptions">
<Checkbox
onChange={handleChangeDirection}
checked={direction === "ltr"}
>
{t("header.change_direction")}
</Checkbox>
return (
<div className='LaTeXInput'>
<label htmlFor={name} className="text">
<div>{t(label || name)}</div> <div className='error_message'>{t(errorMessage)}</div>
</label>
<div className='LaTeXInputArea'>
<TextArea
size="large"
showCount
maxLength={5000}
autoSize={{ minRows: 6, maxRows: 10 }}
style={{ height: "400px" }}
onChange={handleChangeInput}
value={curCentValue}
onBlur={onBlur}
dir={Dir}
{...props}
/>
<div className='LaTeXInputOptions'>
<Checkbox onChange={handleChangeDirection} checked={direction === "ltr"} >{t("header.change_direction")}</Checkbox>
{ShowLatexOption && (
<>
<Checkbox onChange={onPreviewChange}>{t("header.show_preview")}</Checkbox>
<button type='button' className='addMML' onClick={showModal}>
<FaPlus/> {t("MML")}
</button>
</>
)}
</div>
{showPreview && (
<div className='showPreviewInput'>
{Preview?.map((item: any, index: number) => {
if (item?.isLatex) {
console.log(item?.text);
return (
<span dir='ltr' key={index} onClick={() => handleEditModal(item)} className='LatexPreview'>
<LatexPreview latex={item?.text} />
</span>
);
}
return <div key={index}>{item?.text}</div>;
})}
{ShowLatexOption && (
<>
<Checkbox onChange={onPreviewChange}>
{t("header.show_preview")}
</Checkbox>
<button type="button" className="addMML" onClick={showModal}>
<FaPlus /> {t("MML")}
</button>
</>
)}
</div>
)}
{showPreview && (
<div className="showPreviewInput">
{Preview?.map((item: any, index: number) => {
if (item?.isLatex) {
console.log(item?.text);
return (
<span
dir="ltr"
key={index}
onClick={() => handleEditModal(item)}
className="LatexPreview"
>
<LatexPreview latex={item?.text} />
</span>
);
}
return <div key={index}>{item?.text}</div>;
})}
</div>
)}
</div>
<Suspense fallback={<SpinContainer />}>
<AddLazyModal
name={name}
Latex={Latex}
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
setLatex={setLatex}
setCurrentValue={setCurrentValue}
/>
<EditLazyModal
name={name}
Latex={Latex}
isModalOpen={isEditModalOpen}
setIsModalOpen={setIsEditModalOpen}
setLatex={setLatex}
/>
</Suspense>
</div>
);
},
(prevProps, nextProps) => {
return areFieldPropsEqual(prevProps, nextProps);
},
);
<Suspense fallback={<SpinContainer />}>
<AddLazyModal name={name} Latex={Latex} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} setLatex={setLatex} setCurrentValue={setCurrentValue} />
<EditLazyModal name={name} Latex={Latex} isModalOpen={isEditModalOpen} setIsModalOpen={setIsEditModalOpen} setLatex={setLatex} />
</Suspense>
</div>
);
}, (prevProps, nextProps) => {
return areFieldPropsEqual(prevProps, nextProps)
});
export default LaTeXInputMemo;
export default LaTeXInputMemo;

11
src/Components/LatextInput/areFieldPropsEqual.ts
View File

@ -1,10 +1,7 @@
// utilityFunctions.ts
import { FieldProps } from 'formik';
import { FieldProps } from "formik";
export const areFieldPropsEqual = (
prevProps: any,
nextProps: any
): boolean => {
export const areFieldPropsEqual = (prevProps: any, nextProps: any): boolean => {
const prevError = prevProps.form.errors[prevProps.field.name];
const nextError = nextProps.form.errors[nextProps.field.name];
@ -14,7 +11,5 @@ export const areFieldPropsEqual = (
const prevValue = prevProps.field.value;
const nextValue = nextProps.field.value;
return (
false
);
return false;
};

10
src/Components/Layout/Navbar/NavBarRightSide.tsx
View File

@ -38,7 +38,7 @@ const NavBarRightSide = () => {
icon={<CiCirclePlus size={25} />}
/>
<TooltipComp
onClick={()=>(Navigate('/notifications'))}
onClick={() => Navigate("/notifications")}
className="NotificationsIcon"
note="notification"
color="#E0E0E0"
@ -55,9 +55,11 @@ const NavBarRightSide = () => {
<h6>{userData?.username}</h6>
<p>{userData?.type}</p>
</span> */}
<Image
// onClick={()=>(Navigate('/profile'))}
src="/Image/faker_user.png" alt="Profile" />
<Image
// onClick={()=>(Navigate('/profile'))}
src="/Image/faker_user.png"
alt="Profile"
/>
</div>
</article>
);

2
src/Components/Layout/Navbar/Tooltip.tsx
View File

@ -16,7 +16,7 @@ const TooltipComp = ({
color: string;
icon: any;
className?: string;
onClick?:() => void
onClick?: () => void;
}) => {
const [t] = useTranslation();
const { handel_open_model } = useModalHandler();

22
src/Components/Layout/SideBar/MenuItem.tsx
View File

@ -14,11 +14,11 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
const isDropdownOpen = openDropdown === index;
const [t] = useTranslation();
const navigate = useNavigate();
const { setFilter} = useFilterStateState();
const handleNavigate = ()=>{
setFilter({})
navigate(item.path || "/")
}
const { setFilter } = useFilterStateState();
const handleNavigate = () => {
setFilter({});
navigate(item.path || "/");
};
return (
<>
@ -26,13 +26,9 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"}`}
onClick={() => handleNavigate()}
>
<Tooltip
placement="topLeft"
title={t(item?.text)}
color={'#E0E0E0'}
>
<i>{item.icon}</i>
</Tooltip>
<Tooltip placement="topLeft" title={t(item?.text)} color={"#E0E0E0"}>
<i>{item.icon}</i>
</Tooltip>
{/* Conditionally render the text based on sidebar width */}
<span style={{ display: isOpen === false ? "none" : "inline" }}>
{t(item.text)}
@ -51,7 +47,7 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandMore className="sidebar_menu_icon"/>
<MdExpandMore className="sidebar_menu_icon" />
</div>
)}
</>

1
src/Components/Routes/RenderRoutesRecursively.tsx
View File

@ -10,6 +10,7 @@ export const renderRoutesRecursively = (routes: TMenuItem[]) =>
if (!useAbility) {
return false;
}
return (
<React.Fragment key={route.path}>
<Route path={route.path} element={RenderRouteElement(route)} />

36
src/Components/Switch/Switch.tsx
View File

@ -1,24 +1,24 @@
import React from 'react';
import { Switch } from 'antd';
import React from "react";
import { Switch } from "antd";
export interface SwitchProps {
onChange?: (checked: any, event: any) => any;
checked?: boolean;
}
onChange?: (checked: any, event: any) => any;
checked?: boolean;
}
const onSwitchChange = (checked: boolean) => {
console.log(`switch to ${checked}`);
};
const SwitchButton = ({onChange,checked}:SwitchProps) => {
return(
<Switch
className='switch_button'
defaultChecked
onChange={(checked: any, event: any) =>
onChange ? onChange(checked, event) : onSwitchChange(checked)
}
// checked={checked}
/>
)
}
const SwitchButton = ({ onChange, checked }: SwitchProps) => {
return (
<Switch
className="switch_button"
defaultChecked
onChange={(checked: any, event: any) =>
onChange ? onChange(checked, event) : onSwitchChange(checked)
}
// checked={checked}
/>
);
};
export default SwitchButton;
export default SwitchButton;

11
src/Components/Table/ActionButtons.tsx
View File

@ -7,7 +7,6 @@ import { BsEyeFill } from "react-icons/bs";
import { GoTrash } from "react-icons/go";
import { BsQrCode } from "react-icons/bs";
interface ActionButtonsProps {
canEdit?: boolean;
canDelete?: boolean;
@ -19,7 +18,7 @@ interface ActionButtonsProps {
onShow?: () => void;
index?: number;
className?: string;
canShowQr?:boolean
canShowQr?: boolean;
onShoqQr?: () => void;
}
@ -44,10 +43,10 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
: "buttonAction";
return (
<Space size="middle" className={`${CustomClassName} ${className} `}>
{canShowQr && (
{canShowQr && (
<BsQrCode onClick={onShoqQr} size={22} style={{ color: "#A098AE" }} />
)}
)}
{canEdit && (
<Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
<span onClick={onEdit}>
@ -64,7 +63,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
{canShow && (
<BsEyeFill onClick={onShow} size={22} style={{ color: "green" }} />
)}
</Space>
</Space>
);
};

13
src/Components/Table/QRCodeGenerator.tsx
View File

@ -1,11 +1,12 @@
import React from 'react';
import QRCode from 'react-qr-code';
import React from "react";
import QRCode from "react-qr-code";
const QRCodeGenerator = ({url}:any) => {
const QRCodeGenerator = ({ url, serial }: any) => {
const qrValue = `${url}/${serial}`;
console.log(qrValue);
return (
<div style={{display:'flex',justifyContent:'center'}} >
<QRCode value={url} size={230} type='link' />
<div style={{ display: "flex", justifyContent: "center" }}>
<QRCode value={qrValue} size={230} type="link" />
</div>
);
};

28
src/Components/Ui/Buttons/EditSettingButton.tsx
View File

@ -1,18 +1,24 @@
import { Button } from 'antd'
import { useTranslation } from 'react-i18next'
import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { CiEdit } from "react-icons/ci";
const EditSettingButton = ({buttonName,onClick}:{buttonName?:string,onClick?:() => void}) => {
const {t} = useTranslation();
const EditSettingButton = ({
buttonName,
onClick,
}: {
buttonName?: string;
onClick?: () => void;
}) => {
const { t } = useTranslation();
return (
<div>
<Button className=' setting_edit_button' onClick={onClick}>
<CiEdit/>
{t(`header.edit`) ?? (`header.${buttonName}`)}
</Button>
<Button className=" setting_edit_button" onClick={onClick}>
<CiEdit />
{t(`header.edit`) ?? `header.${buttonName}`}
</Button>
</div>
)
}
);
};
export default EditSettingButton
export default EditSettingButton;

26
src/Components/Ui/Buttons/SecuritySettingButton.tsx
View File

@ -1,13 +1,23 @@
import { Button } from 'antd'
import { useTranslation } from 'react-i18next'
import { Button } from "antd";
import { useTranslation } from "react-i18next";
const SecuritySettingButton = ({name,danger = false}:{name:string,danger?:boolean}) => {
const {t} = useTranslation();
const SecuritySettingButton = ({
name,
danger = false,
}: {
name: string;
danger?: boolean;
}) => {
const { t } = useTranslation();
return (
<div>
<Button className={`security_setting_button ${danger ? "security_setting_button_danger" :""}`}>{t(name)}</Button>
<Button
className={`security_setting_button ${danger ? "security_setting_button_danger" : ""}`}
>
{t(name)}
</Button>
</div>
)
}
);
};
export default SecuritySettingButton
export default SecuritySettingButton;

22
src/Components/Ui/ReportTableIcon.tsx Normal file
View File

@ -0,0 +1,22 @@
import { Tooltip } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { FaPaperclip } from "react-icons/fa";
interface ReportButtonsProps {
editTooltipTitle?: any;
onClick?: () => void;
}
const ReportTableIcon = ({ editTooltipTitle, onClick }: ReportButtonsProps) => {
const { t } = useTranslation();
return (
<Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
<span onClick={onClick}>
<FaPaperclip size={22} style={{ color: "#A098AE" }} />
</span>
</Tooltip>
);
};
export default ReportTableIcon;

28
src/Components/Ui/TrashButton.tsx
View File

@ -1,15 +1,23 @@
import { Button } from 'antd';
import { useTranslation } from 'react-i18next';
import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { HiOutlineTrash } from "react-icons/hi2";
const TrashButton = ({name,onClick,icon = true}:{name:string,onClick?:() =>void,icon?:boolean}) => {
const {t} = useTranslation();
const TrashButton = ({
name,
onClick,
icon = true,
}: {
name: string;
onClick?: () => void;
icon?: boolean;
}) => {
const { t } = useTranslation();
return (
<Button className='trash_button' onClick={onClick}>
{ icon ? <HiOutlineTrash/> : "" }
{t(`header.${name}`)}
<Button className="trash_button" onClick={onClick}>
{icon ? <HiOutlineTrash /> : ""}
{t(`header.${name}`)}
</Button>
)
}
);
};
export default TrashButton
export default TrashButton;

1
src/Components/Utils/Filter/useFilter.tsx
View File

@ -34,7 +34,6 @@ interface FormikFormProps extends Omit<FormikConfig<any>, OmitFormikProps> {
setIsOpen: any;
}
const useFilter = () => {
const { setIsOpen, isOpen } = useModalState((state) => state);
const { filterState, setFilterState, clearFilterState } = useFilterState();

2
src/Components/ValidationField/View/Date.tsx
View File

@ -27,7 +27,7 @@ const Date = ({
};
console.log(props);
console.log(FormikValue);
const Formatter = [DateEnum?.FORMATE];
return (
<div className="ValidationField w-100 ">

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

@ -53,13 +53,12 @@ const File = ({
const maxSize = 2 * 1024 * 1024; // 2 MB in bytes
if (file.size > maxSize) {
alert(t('validation.File_size_exceeds_2_MB_limit.'));
alert(t("validation.File_size_exceeds_2_MB_limit."));
return Upload.LIST_IGNORE; // Prevent the file from being uploaded
}
return true; // Allow the file to be uploaded
};
return (
<div className={`ValidationField upload_image_button ${className ?? ""} `}>
<label htmlFor={name} className="text">
@ -67,7 +66,7 @@ const File = ({
</label>
<Upload
beforeUpload={beforeUpload} // Set the beforeUpload function
beforeUpload={beforeUpload} // Set the beforeUpload function
disabled={isDisabled}
listType="picture"
maxCount={1}
@ -76,7 +75,6 @@ const File = ({
customRequest={customRequest}
className={` w-100`}
id={name}
>
<Button
className={isError ? "isError w-100 " : " w-100"}

24
src/Components/ValidationField/View/SearchField.tsx
View File

@ -48,14 +48,13 @@ const SearchField = ({
}
}, [page]);
const SelectableChange = (value: any,option:any) => {
if(isMulti){
const SelectableChange = (value: any, option: any) => {
if (isMulti) {
formik?.setFieldValue(name, option ?? []);
}else{
} else {
formik?.setFieldValue(name, option ?? {});
}
const isCleared = value?.length === 0 || !value;
if (isCleared) {
@ -96,8 +95,9 @@ const SearchField = ({
const handleScroll = (event: any) => {
const target = event.target;
const isAtBottom =
target.scrollHeight - 10 <= Math.floor(target.scrollTop + target.clientHeight);
target.scrollHeight - 10 <=
Math.floor(target.scrollTop + target.clientHeight);
if (isAtBottom && canChangePage && PageName && page) {
console.log("Scrolled to the last option!");
let newPage = page + 1;
@ -109,11 +109,13 @@ const SearchField = ({
console.log(AllPagesOption);
console.log(option, "option");
const value = isMulti ? formik.values[name]?.map((item:any)=>{
return item?.name ?? item
}) : formik.values[name]?.["name"] ?? ""
const value = isMulti
? formik.values[name]?.map((item: any) => {
return item?.name ?? item;
})
: (formik.values[name]?.["name"] ?? "");
console.log(value);
return (
<div className="ValidationField w-100">
<ValidationFieldLabel

5
src/Components/ValidationField/View/TextField.tsx
View File

@ -39,15 +39,14 @@ const TextField = ({
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<Field
as={TextArea}
as={TextArea}
placeholder={t(`input.${placeholder ? placeholder : name}`)}
name={name}
disabled={isDisabled}
size="large"
showCount
maxLength={1000}
autoSize={{ minRows: 4, maxRows: 10 }}
autoSize={{ minRows: 4, maxRows: 10 }}
onChange={onChange || TextFilehandleChange}
id={name}
{...props}

53
src/Components/ValidationField/View/TextFieldMML.tsx
View File

@ -1,4 +1,4 @@
import { Input } from "antd";
import { Input } from "antd";
import React from "react";
import useFormField from "../../../Hooks/useFormField";
import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
@ -15,7 +15,7 @@ const TextFieldMML = ({
no_label,
label_icon,
className,
mathContent, // Add mathContent prop
mathContent, // Add mathContent prop
...props
}: any) => {
const { formik, isError, errorMsg, t } = useFormField(name, props);
@ -27,34 +27,31 @@ const TextFieldMML = ({
};
return (
<div className={`ValidationField w-100 ${className ?? ""} `}>
<ValidationFieldLabel
<div className={`ValidationField w-100 ${className ?? ""} `}>
<ValidationFieldLabel
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
/>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<TextArea
placeholder={t(`input.${placeholder ? placeholder : name}`)}
name={name}
label={label}
label_icon={label_icon}
no_label={no_label}
placeholder={placeholder}
t={t}
disabled={isDisabled}
size="large"
showCount
maxLength={1000}
autoSize={{ minRows: 4, maxRows: 10 }}
onChange={onChange || TextFilehandleChange}
id={name}
{...props}
/>
<ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
<TextArea
placeholder={t(`input.${placeholder ? placeholder : name}`)}
name={name}
disabled={isDisabled}
size="large"
showCount
maxLength={1000}
autoSize={{ minRows: 4, maxRows: 10 }}
onChange={onChange || TextFilehandleChange}
id={name}
{...props}
/>
</ValidationFieldContainer>
</div>
</ValidationFieldContainer>
</div>
);
};

2
src/Components/ValidationField/View/index.tsx
View File

@ -23,5 +23,5 @@ export {
SearchField,
TextField,
DropFile,
TextAreaMML
TextAreaMML,
};

16
src/Components/ValidationField/utils/ValidationField.scss
View File

@ -68,14 +68,12 @@
height: 120px;
}
//// malty select
///
.ant-select-multiple{
height: auto !important;
min-height: 40px;
.ant-select-selector{
///
.ant-select-multiple {
height: auto !important;
min-height: 40px;
.ant-select-selector {
min-height: 40px;
}
}
}
}

1
src/Components/ValidationField/utils/translatedOptions.ts
View File

@ -1,5 +1,4 @@
export const translateOptions = (options: any, t: any) => {
return options?.map((opt: any) => ({
...opt,
label: t(`${opt?.label}`),

9
src/Components/ValidationField/utils/types.ts
View File

@ -40,9 +40,14 @@ export type SearchFieldProps = BaseFieldProps &
type DateFieldProps = BaseFieldProps & {
type: "DataRange" | "Date" | "Time";
Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS" | "YYYY-MM-DD HH:mm:ss";
Format?:
| "YYYY/MM/DD"
| "MM/DD"
| "YYYY/MM"
| "YYYY-MM-DD HH:mm:ss.SSS"
| "YYYY-MM-DD HH:mm:ss";
picker?: "data" | "week" | "month" | "quarter" | "year";
showTime?:boolean
showTime?: boolean;
};
type FileFieldProps = BaseFieldProps & {

149
src/Components/exercise/Header.tsx
View File

@ -12,36 +12,42 @@ import { LocalStorageEnum } from "../../enums/LocalStorageEnum";
const Header = () => {
const [t] = useTranslation();
const { values, setValues } = useFormikContext<any>();
const { isBseQuestion, setIsBseQuestion,ShowHint,setShowHint,ShowLatexOption,setShowLatexOption } = useObjectToEdit();
// const [Setting, setSetting] = useState(false)
const isEdited = ()=>{
const {
isBseQuestion,
setIsBseQuestion,
ShowHint,
setShowHint,
ShowLatexOption,
setShowLatexOption,
} = useObjectToEdit();
// const [Setting, setSetting] = useState(false)
const isEdited = () => {
if (isBseQuestion || values?.isBase === 1) {
const content = !values?.content;
const content_image = !values?.content_image;
if(isBseQuestion || values?.isBase === 1){
const Questions =
values?.Questions?.length <= 1 &&
values?.Questions?.[0]?.answers?.length === 0;
const defaultQuestionHint =
Object.keys(values?.Questions?.[0] ?? {})?.length <= 1;
const content = !values?.content ;
const content_image = !values?.content_image ;
const Questions = values?.Questions?.length <= 1 && values?.Questions?.[0]?.answers?.length === 0 ;
const defaultQuestionHint = Object.keys(values?.Questions?.[0] ?? {})?.length <= 1
if(content && content_image && Questions && defaultQuestionHint) {
return false
if (content && content_image && Questions && defaultQuestionHint) {
return false;
}
}else{
const content = !values?.content ;
const content_image = !values?.content_image ;
const hint = !values?.hint ;
const answers = !(values?.answers?.length > 0) ;
const tags = !(values?.tags?.length > 0) ;
if(content && content_image && hint && answers && tags) {
return false
} else {
const content = !values?.content;
const content_image = !values?.content_image;
const hint = !values?.hint;
const answers = !(values?.answers?.length > 0);
const tags = !(values?.tags?.length > 0);
if (content && content_image && hint && answers && tags) {
return false;
}
}
return true
}
return true;
};
const handleChange = () => {
if (isBseQuestion) {
setIsBseQuestion(false);
@ -52,11 +58,10 @@ const Header = () => {
}
};
const confirm: PopconfirmProps['onConfirm'] = (e) => {
const confirm: PopconfirmProps["onConfirm"] = (e) => {
setTimeout(() => {
handleChange() ;
handleChange();
}, 500);
};
const content = (
@ -73,33 +78,34 @@ const Header = () => {
</div>
);
const onChangeHint: CheckboxProps['onChange'] = (e) => {
const onChangeHint: CheckboxProps["onChange"] = (e) => {
setShowHint(e.target.checked);
localStorage?.setItem(LocalStorageEnum.HINT_INPUT,e.target.checked ? "true" : "false" )
localStorage?.setItem(
LocalStorageEnum.HINT_INPUT,
e.target.checked ? "true" : "false",
);
};
const onChangeLatexOption: CheckboxProps['onChange'] = (e) => {
const onChangeLatexOption: CheckboxProps["onChange"] = (e) => {
setShowLatexOption(e.target.checked);
localStorage?.setItem(LocalStorageEnum.LATEX_OPTION_INPUT,e.target.checked ? "true" : "false" )
localStorage?.setItem(
LocalStorageEnum.LATEX_OPTION_INPUT,
e.target.checked ? "true" : "false",
);
};
const contentSetting = (
<div>
<Checkbox checked={ShowHint} onChange={onChangeHint}>
{ t("header.show_hint")}
{t("header.show_hint")}
</Checkbox>
<Checkbox checked={ShowLatexOption} onChange={onChangeLatexOption}>
{ t("header.show_MMl")}
{t("header.show_MMl")}
</Checkbox>
</div>
);
return (
<header className="exercise_add_header mb-4">
<article>
@ -112,48 +118,35 @@ const Header = () => {
</div>
</article>
<div>
<div className="question_header_setting">
<Popover trigger="click" content={contentSetting}>
<SettingFilled />
</Popover>
</div>
<div className="question_header_setting">
<Popover trigger="click" content={contentSetting}>
<SettingFilled/>
</Popover>
</div>
{
isEdited() ?
<Popconfirm
title={t("header.this_will_un_do_all_your_changes")}
okText={t("practical.yes")}
cancelText={t("practical.no")}
onConfirm={()=>{confirm()}}
defaultOpen={false}
>
<GoArrowSwitch className="m-2" />
{isBseQuestion || values?.isBase === 1
? t("header.malty_exercise")
: t("header.exercise")}
</Popconfirm>
:
{isEdited() ? (
<Popconfirm
title={t("header.this_will_un_do_all_your_changes")}
okText={t("practical.yes")}
cancelText={t("practical.no")}
onConfirm={() => {
confirm();
}}
defaultOpen={false}
>
<GoArrowSwitch className="m-2" />
{isBseQuestion || values?.isBase === 1
? t("header.malty_exercise")
: t("header.exercise")}
</Popconfirm>
) : (
<>
<GoArrowSwitch onClick={()=>confirm()} className="m-2" />
{isBseQuestion || values?.isBase === 1
? t("header.malty_exercise")
: t("header.exercise")}
<GoArrowSwitch onClick={() => confirm()} className="m-2" />
{isBseQuestion || values?.isBase === 1
? t("header.malty_exercise")
: t("header.exercise")}
</>
}
)}
</div>
</header>
);

4
src/Hooks/useFormField.tsx
View File

@ -7,7 +7,7 @@ import { useEffect } from "react";
const useFormField = (name: string, props?: any) => {
const [field, meta] = useField({ name, ...props });
const { t } = useTranslation();
const formik = useFormikContext<any>();
@ -28,7 +28,7 @@ const useFormField = (name: string, props?: any) => {
const errorMsg =
!!isError && meta.error
? t(meta.error.toString())
: Validation[name as any] ?? "";
: (Validation[name as any] ?? "");
return { Field, field, meta, formik, isError, errorMsg, t };
};

26
src/Hooks/useUnsavedChangesWarning.tsx
View File

@ -1,16 +1,16 @@
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
const useUnsavedChangesWarning = (unsavedChanges: boolean) => {
const [t] = useTranslation();
useEffect(() => {
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
if (unsavedChanges) {
// Prevent default action and stop the event
event.preventDefault();
// Optionally set returnValue to an empty string
event.returnValue = '';
event.returnValue = "";
}
};
@ -21,22 +21,22 @@ const useUnsavedChangesWarning = (unsavedChanges: boolean) => {
}
};
window.addEventListener('beforeunload', handleBeforeUnload);
window.addEventListener("beforeunload", handleBeforeUnload);
// Intercept link clicks (example for <a> elements)
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', handleNavigation);
document.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", handleNavigation);
});
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
window.removeEventListener("beforeunload", handleBeforeUnload);
// Clean up event listeners
document.querySelectorAll('a').forEach(link => {
link.removeEventListener('click', handleNavigation);
document.querySelectorAll("a").forEach((link) => {
link.removeEventListener("click", handleNavigation);
});
};
}, [unsavedChanges, t]);
};
export default useUnsavedChangesWarning;
export default useUnsavedChangesWarning;

29
src/Hooks/useWindowResize.tsx
View File

@ -1,20 +1,19 @@
import React, { useEffect, useState } from 'react'
import React, { useEffect, useState } from "react";
export const useWindowResize = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
window.addEventListener('resize', handleResize);
// Cleanup function to remove the event listener
return () => {
window.removeEventListener('resize', handleResize);
};
}, [windowWidth]);
useEffect(() => {
window.addEventListener("resize", handleResize);
// Cleanup function to remove the event listener
return () => {
window.removeEventListener("resize", handleResize);
};
}, [windowWidth]);
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
return {windowWidth , handleResize};
}
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
return { windowWidth, handleResize };
};

40
src/Layout/Dashboard/FilterLayout.tsx
View File

@ -18,15 +18,15 @@ const FilterLayout = ({
width = "500px",
haveFilter = true,
haveOrder = true,
haveSearch = true
haveSearch = true,
}: {
filterTitle: string;
sub_children?: any;
search_by?:string;
width?:string;
haveFilter?:boolean;
haveOrder?:boolean;
haveSearch?:boolean
search_by?: string;
width?: string;
haveFilter?: boolean;
haveOrder?: boolean;
haveSearch?: boolean;
}) => {
const { t } = useTranslation();
const translateArray = translateOptions(search_array, t);
@ -49,21 +49,18 @@ const FilterLayout = ({
<div className="model_sub_children">{sub_children}</div>
<FilterSubmit />
</FilterBody>
{haveFilter &&
{haveFilter && (
<div className="filter_button" onClick={() => setIsOpen(true)}>
<span>
<BiFilterAlt className="addition_select_icon" />
{t("header.filter")}
</span>
<MdKeyboardArrowDown />
</div>
}
<span>
<BiFilterAlt className="addition_select_icon" />
{t("header.filter")}
</span>
<MdKeyboardArrowDown />
</div>
)}
</span>
<span>
{haveOrder && <OrderBySelect />}
</span>
<span>{haveOrder && <OrderBySelect />}</span>
</div>
</div>
@ -77,7 +74,12 @@ const FilterLayout = ({
</span>
<div className="header_search">
{haveSearch && <SearchField searchBy={search_by} placeholder={t("practical.search_here")} />}
{haveSearch && (
<SearchField
searchBy={search_by}
placeholder={t("practical.search_here")}
/>
)}
</div>
</div>
</div>

1
src/Layout/Dashboard/FormikFormModel.tsx
View File

@ -29,7 +29,6 @@ const FormikFormModel: React.FC<FormikFormProps> = ({
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{(formik) => {
useEffect(() => {

109
src/Layout/Dashboard/LayoutModel.tsx
View File

@ -21,8 +21,8 @@ interface LayoutModalProps {
ModelClassName?: string;
width?: string;
isLoading?: boolean;
buttonTitle?:string;
initialButtonName?:boolean
buttonTitle?: string;
initialButtonName?: boolean;
}
const LayoutModel = ({
@ -70,60 +70,63 @@ const LayoutModel = ({
open={isOpen === ModelEnum}
onCancel={handleCancel}
>
<Formik
enableReinitialize={true}
initialValues={getInitialValues}
validationSchema={getValidationSchema}
onSubmit={handleSubmit}
>
{(formik) => {
useEffect(() => {
if (isOpen === "" || isOpen === "isSuccess") {
formik.setErrors({});
formik.resetForm();
}
}, [isOpen]);
<Formik
enableReinitialize={true}
initialValues={getInitialValues}
validationSchema={getValidationSchema}
onSubmit={handleSubmit}
>
{(formik) => {
useEffect(() => {
if (isOpen === "" || isOpen === "isSuccess") {
formik.setErrors({});
formik.resetForm();
}
}, [isOpen]);
return <Form className="w-100">
<header>
<span>
{t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
{t(`models.${modelTitle}`)}{" "}
</span>
<MdCancel onClick={handleCancel} />
</header>
<Divider />
<main className="main_modal">
{isLoading ? <SpinContainer /> : children}
<Divider />
<div className="buttons">
<Button className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")}
</Button>
<Button
className="add_button"
disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
htmlType="submit"
>
{
initialButtonName ? t(`practical.${isAddModal ? "add" : "edit"}`)
: t(`practical.${buttonTitle}`)
}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
return (
<Form className="w-100">
<header>
<span>
{t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
{t(`models.${modelTitle}`)}{" "}
</span>
)}
</Button>
</div>
</main>
<MdCancel onClick={handleCancel} />
</header>
<Divider />
<main className="main_modal">
{isLoading ? <SpinContainer /> : children}
<Divider />
</Form>;
}}
</Formik>
<div className="buttons">
<Button
className="back_button pointer"
onClick={handleCancel}
>
{t("practical.cancel")}
</Button>
<Button
className="add_button"
disabled={
status === QueryStatusEnum.LOADING || !formik.dirty
}
htmlType="submit"
>
{initialButtonName
? t(`practical.${isAddModal ? "add" : "edit"}`)
: t(`practical.${buttonTitle}`)}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</Button>
</div>
</main>
</Form>
);
}}
</Formik>
</Modal>
</>
);

46
src/Layout/Dashboard/PageHeader.tsx
View File

@ -1,4 +1,3 @@
import { BsPlusCircleFill } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
@ -14,14 +13,16 @@ const PageHeader = ({
pageTitle,
openModel = true,
locationToNavigate,
addModal = true
addModal = true,
modelButtonTitle = "add",
}: {
canAdd?: any;
ModelAbility?: any;
pageTitle: string;
openModel?: boolean;
locationToNavigate?: string | any;
addModal?:boolean;
addModal?: boolean;
modelButtonTitle?: string;
}) => {
const navigate = useNavigate();
const { handel_open_model } = useModalHandler();
@ -31,36 +32,37 @@ const PageHeader = ({
const { setFilter } = useFilterStateState();
const handleNavigateToPage = (location: string) => {
setFilter({})
setFilter({});
navigate(location);
};
console.log();
return (
<div className="page_header">
<header className="d-flex justify-content-between">
<span className="page_header_links" >
<span className="page_header_links">
<h1 className="page_title">{t(`PageTitle.${pageTitle}`)}</h1>
<span className="page_links">
<PageTitleComponent/>
<PageTitleComponent />
</span>
</span>
{ addModal ? canAdd && (
<div className="Selects">
<button
onClick={() =>
openModel
? handel_open_model(ModelAbility)
: handleNavigateToPage(locationToNavigate)
}
className="add_button"
>
<BsPlusCircleFill />
{t(`practical.add`)}
</button>
</div>
) :""}
{addModal
? canAdd && (
<div className="Selects">
<button
onClick={() =>
openModel
? handel_open_model(ModelAbility)
: handleNavigateToPage(locationToNavigate)
}
className="add_button"
>
<BsPlusCircleFill />
{t(`practical.${modelButtonTitle}`)}
</button>
</div>
)
: ""}
</header>
</div>
);

62
src/Layout/Dashboard/PageTitle.tsx
View File

@ -1,36 +1,38 @@
import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { usePageTitleState } from '../../zustand/PageTitleState'
import { useFilterStateState } from '../../zustand/Filter'
import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { usePageTitleState } from "../../zustand/PageTitleState";
import { useFilterStateState } from "../../zustand/Filter";
const PageTitleComponent = () => {
const { PageTitle } = usePageTitleState();
const navigate = useNavigate();
const location = useLocation();
const { setFilter } = useFilterStateState();
const {PageTitle} = usePageTitleState()
const navigate = useNavigate()
const location = useLocation()
const { setFilter } = useFilterStateState();
const handleNavigate = (path:string)=>{
const currentPath = location.pathname ;
const newPath = currentPath?.split(path)?.[0] + path ;
if(newPath !== currentPath){
setFilter({})
navigate(newPath)
}
}
const handleNavigate = (path: string) => {
const currentPath = location.pathname;
const newPath = currentPath?.split(path)?.[0] + path;
if (newPath !== currentPath) {
setFilter({});
navigate(newPath);
}
};
return (
<div className='PageTitle'>
{(Array.isArray(PageTitle) ? PageTitle : [])?.map((item,index)=>{
const lastItem = PageTitle?.length - 1 === index
return (
<div key={index} className={`PageTitleItems ${lastItem ? "PageTitleLastItem" : ""} `} onClick={()=>handleNavigate(item?.path)}>
{item?.name} {lastItem ? "" : "/"}
</div>
)
})}
<div className="PageTitle">
{(Array.isArray(PageTitle) ? PageTitle : [])?.map((item, index) => {
const lastItem = PageTitle?.length - 1 === index;
return (
<div
key={index}
className={`PageTitleItems ${lastItem ? "PageTitleLastItem" : ""} `}
onClick={() => handleNavigate(item?.path)}
>
{item?.name} {lastItem ? "" : "/"}
</div>
);
})}
</div>
)
}
);
};
export default PageTitleComponent
export default PageTitleComponent;

1
src/Layout/Dashboard/QrCodeModels.tsx
View File

@ -21,7 +21,6 @@ const QrCodeModels: React.FC<ModalFormProps> = ({
const { objectToEdit, setObjectToEdit } = useObjectToEdit();
const handleCancel = () => {
setIsOpen("");
setObjectToEdit({});

16
src/Layout/Dashboard/Table/DataTable.tsx
View File

@ -15,7 +15,7 @@ const DataTable: React.FC<DataTableProps> = ({
...props
}) => {
const data: any[] = response?.data?.data || [];
const columns = useColumns();
const { pagination, handlePageChange } = usePagination(response?.data);
const [t] = useTranslation();
@ -24,12 +24,12 @@ const DataTable: React.FC<DataTableProps> = ({
};
const isRefetching = response?.isRefetching;
const isLoading = response?.isLoading;
const dataLength = data?.length ;
const {setDataTableLength} = useDataTableState()
const dataLength = data?.length;
const { setDataTableLength } = useDataTableState();
useEffect(() => {
setDataTableLength(dataLength)
}, [dataLength])
setDataTableLength(dataLength);
}, [dataLength]);
return (
<Table
style={{ minHeight: "300px" }}
@ -63,10 +63,8 @@ const DataTable: React.FC<DataTableProps> = ({
nextIcon: <>{t("practical.next")}</>,
prevIcon: <> {t("practical.prev")} </>,
className: "pagination_antd",
showSizeChanger:false
showSizeChanger: false,
}}
{...props}
/>
);

8
src/Layout/Dashboard/usePagination.ts
View File

@ -7,13 +7,12 @@ interface Data {
}
const usePagination = (data: Data) => {
const { Filter ,setFilter } = useFilterStateState();
const { Filter, setFilter } = useFilterStateState();
const [pagination, setPagination] = useState<PaginationAntd>({
current: data?.meta?.current_page || 1,
pageSize: data?.meta?.per_page || 2,
total: data?.meta?.total || 0,
});
useEffect(() => {
@ -21,15 +20,14 @@ const usePagination = (data: Data) => {
current: data?.meta?.current_page || 1,
pageSize: data?.meta?.per_page || 2,
total: data?.meta?.total || 0,
});
}, [data]);
const handlePageChange = (page: number) => {
setFilter({
...Filter,
page:page
})
page: page,
});
};
return { pagination, handlePageChange };

3
src/Layout/Ui/Layout.tsx
View File

@ -11,9 +11,8 @@ const Layout = ({
children: React.ReactNode;
className?: string;
}) => {
const { openSideBar, setOpenSideBar } = useSideBarState();
const {openSideBar, setOpenSideBar} = useSideBarState();
return (
<ProtectedRouteProvider className="Layout">
<main

19
src/Layout/Ui/NotFoundPage.tsx
View File

@ -6,21 +6,26 @@ import { FaArrowRight } from "react-icons/fa6";
function NotFoundPage() {
const navigate = useNavigate();
const {t} = useTranslation();
const { t } = useTranslation();
return (
<ProtectedRouteProvider className="not_found_page">
<div className="not_found_container">
<img src="/App/Error.png" alt="Error 404" width={500}/>
<img src="/App/Error.png" alt="Error 404" width={500} />
<h3>{t("practical.sorry_something_went_wrong")}</h3>
<p>{t("practical.error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist")}</p>
<Button className="not_found_button" onClick={() => navigate("/", { replace: true })}>
<FaArrowRight/>
<p>
{t(
"practical.error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist",
)}
</p>
<Button
className="not_found_button"
onClick={() => navigate("/", { replace: true })}
>
<FaArrowRight />
{t("practical.return_to_the_dashboard")}
</Button>
</div>
</ProtectedRouteProvider>
);
}

4
src/Layout/Ui/SideBar.tsx
View File

@ -28,7 +28,7 @@ const SideBar = ({
const [t] = useTranslation();
const toggleSidebar = () => {
setIsOpen((prev: boolean) => !prev);
setIsOpen((prev: boolean) => !prev);
};
return (
@ -65,7 +65,7 @@ const SideBar = ({
</div>
<div className="side_bar_setting">
<p>{t("sidebar.setting")}</p>
<div
<div
// onClick={() => {navigate("/setting")}}
>
<CiSettings />

4
src/Pages/Admin/Area/Model/AddModel.tsx
View File

@ -10,11 +10,11 @@ import { ParamsEnum } from "../../../../enums/params";
const AddModel: React.FC = () => {
const { mutate, status } = useAddArea();
const {city_id} = useParams<ParamsEnum>()
const { city_id } = useParams<ParamsEnum>();
const handleSubmit = (values: any) => {
mutate({
...values,
city_id
city_id,
});
};
return (

4
src/Pages/Admin/Area/Model/EditModel.tsx
View File

@ -12,9 +12,9 @@ import { ParamsEnum } from "../../../../enums/params";
const EditModel: React.FC = () => {
const { mutate, status } = useUpdateArea();
const { objectToEdit } = useObjectToEdit((state) => state);
const {city_id} = useParams<ParamsEnum>()
const { city_id } = useParams<ParamsEnum>();
const handleSubmit = (values: any) => {
const Data_to_send = { ...values,city_id };
const Data_to_send = { ...values, city_id };
mutate(Data_to_send);
};

1
src/Pages/Admin/Area/Model/ModelForm.tsx
View File

@ -7,7 +7,6 @@ const Form = () => {
<Col>
<ValidationField name="name" placeholder="name" label="name" />
</Col>
</Row>
);
};

12
src/Pages/Admin/Area/Page.tsx
View File

@ -21,10 +21,10 @@ const DeleteModalForm = lazy(
const TableHeader = () => {
const [t] = useTranslation();
const deleteMutation = useDeleteArea();
const {city_id} = useParams<ParamsEnum>()
const { city_id } = useParams<ParamsEnum>();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.Area`)}`, path:`city/${city_id}`},
{ name: `${t(`page_header.home`)}`, path: "/" },
{ name: `${t(`page_header.Area`)}`, path: `city/${city_id}` },
]);
return (
@ -35,7 +35,11 @@ const TableHeader = () => {
ModelAbility={ModalEnum?.AREA_ADD}
canAdd={canAddArea}
/>
<FilterLayout sub_children={<FilterForm />} filterTitle="table.Area" haveFilter={false} />
<FilterLayout
sub_children={<FilterForm />}
filterTitle="table.Area"
haveFilter={false}
/>
<Table />
<AddModalForm />
<EditModalForm />

10
src/Pages/Admin/Area/Table.tsx
View File

@ -10,18 +10,18 @@ import { ParamsEnum } from "../../../enums/params";
const App: React.FC = () => {
const { filterState } = useFilterState();
const { Filter } = useFilterStateState();
const {city_id} = useParams<ParamsEnum>()
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const { city_id } = useParams<ParamsEnum>();
const name = Filter?.name;
const sort_by = Filter?.sort_by;
const response = useGetAllArea({
pagination: true,
...filterState,
city_id,
name,
sort_by
sort_by,
});
return <DataTable response={response} useColumns={useColumns} />;
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

8
src/Pages/Admin/Area/useTableColumns.tsx
View File

@ -21,10 +21,8 @@ export const useColumns = () => {
const navigate = useNavigate();
const { setFilter } = useFilterStateState();
const handelShow = (record: Area) => {
setFilter({})
setFilter({});
navigate(`${record?.id}`);
};
@ -39,7 +37,7 @@ export const useColumns = () => {
};
const [t] = useTranslation();
const columns: TableColumnsType<Area> = [
const columns: TableColumnsType<Area> = [
{
title: t("columns.id"),
dataIndex: "id",
@ -53,7 +51,7 @@ export const useColumns = () => {
key: "name",
align: "center",
render: (_text, record) => record?.name,
ellipsis:true
ellipsis: true,
},
{
title: t("columns.procedure"),

1
src/Pages/Admin/City/Model/ModelForm.tsx
View File

@ -7,7 +7,6 @@ const Form = () => {
<Col>
<ValidationField name="name" placeholder="name" label="name" />
</Col>
</Row>
);
};

10
src/Pages/Admin/City/Page.tsx
View File

@ -21,8 +21,8 @@ const TableHeader = () => {
const deleteMutation = useDeleteCity();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.City`)}`, path:"City"}
{ name: `${t(`page_header.home`)}`, path: "/" },
{ name: `${t(`page_header.City`)}`, path: "City" },
]);
return (
@ -33,7 +33,11 @@ const TableHeader = () => {
ModelAbility={ModalEnum?.CITY_ADD}
canAdd={canAddCity}
/>
<FilterLayout sub_children={<FilterForm />} haveFilter={false} filterTitle="table.City" />
<FilterLayout
sub_children={<FilterForm />}
haveFilter={false}
filterTitle="table.City"
/>
<Table />
<AddModalForm />
<EditModalForm />

8
src/Pages/Admin/City/Table.tsx
View File

@ -8,16 +8,16 @@ import { useFilterStateState } from "../../../zustand/Filter";
const App: React.FC = () => {
const { filterState } = useFilterState();
const { Filter } = useFilterStateState();
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const name = Filter?.name;
const sort_by = Filter?.sort_by;
const response = useGetAllCity({
pagination: true,
...filterState,
name,
sort_by
sort_by,
});
return <DataTable response={response} useColumns={useColumns} />;
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

7
src/Pages/Admin/City/useTableColumns.tsx
View File

@ -21,10 +21,8 @@ export const useColumns = () => {
const navigate = useNavigate();
const { setFilter } = useFilterStateState();
const handelShow = (record: City) => {
setFilter({})
setFilter({});
navigate(`${record?.id}`);
};
@ -53,10 +51,9 @@ export const useColumns = () => {
key: "name",
align: "center",
render: (_text, record) => record?.name,
ellipsis:true
ellipsis: true,
},
{
title: t("columns.procedure"),
key: "actions",
align: "center",

10
src/Pages/Admin/Coupon/Model/AddModel.tsx
View File

@ -12,15 +12,13 @@ const AddModel: React.FC = () => {
const { mutate, status } = useAddCoupon();
const handleSubmit = (values: any) => {
console.log(values?.due_to,"values?.due_to");
const due_to = values?.due_to.format("YYYY-MM-DD HH:mm:ss")
console.log(due_to);
console.log(values?.due_to, "values?.due_to");
const due_to = values?.due_to.format("YYYY-MM-DD HH:mm:ss");
console.log(due_to);
mutate({
...values,
due_to,
grade_id:values?.grade_id?.id
grade_id: values?.grade_id?.id,
});
};
return (

11
src/Pages/Admin/Coupon/Model/EditModel.tsx
View File

@ -12,8 +12,15 @@ const EditModel: React.FC = () => {
const { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => {
const due_to = typeof values?.due_to === "string" ? values?.due_to : values?.due_to.format("YYYY-MM-DD HH:mm:ss")
const Data_to_send = { ...values , due_to, grade_id:values?.grade_id?.id ?? "" };
const due_to =
typeof values?.due_to === "string"
? values?.due_to
: values?.due_to.format("YYYY-MM-DD HH:mm:ss");
const Data_to_send = {
...values,
due_to,
grade_id: values?.grade_id?.id ?? "",
};
mutate(Data_to_send);
};

69
src/Pages/Admin/Coupon/Model/ModelForm.tsx
View File

@ -3,57 +3,56 @@ import ValidationField from "../../../../Components/ValidationField/ValidationFi
import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
import { useGetAllGrade } from "../../../../api/grade";
const Form = ({Hide = false}:{Hide?:boolean }) => {
const Form = ({ Hide = false }: { Hide?: boolean }) => {
const { ValidationParamState } = useValidationValidationParamState();
const {
GradeName, GradeCurrentPage,
} = ValidationParamState;
const { GradeName, GradeCurrentPage } = ValidationParamState;
const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
name: GradeName,
page: GradeCurrentPage
page: GradeCurrentPage,
});
const GradeOption = Grade?.data ?? []
const GradeOption = Grade?.data ?? [];
const canChangeGradePage = !!Grade?.links?.next;
const GradePage = Grade?.meta?.current_page;
return (
<Row className="w-100">
<Col>
<ValidationField name="name" placeholder="name" label="name" />
<ValidationField name="amount" type="number" placeholder="amount" label="amount" />
<ValidationField
name="amount"
type="number"
placeholder="amount"
label="amount"
/>
</Col>
<Col>
<ValidationField
name="due_to" type="Date"
Format="YYYY-MM-DD HH:mm:ss"
placeholder="due_to" label="due_to"
showTime
/>
<ValidationField name="code" placeholder="code" label="code" />
{/*
<ValidationField
name="due_to"
type="Date"
Format="YYYY-MM-DD HH:mm:ss"
placeholder="due_to"
label="due_to"
showTime
/>
<ValidationField name="code" placeholder="code" label="code" />
{/*
grade_id
*/}
{!Hide &&
<ValidationField
searchBy="GradeName"
name="grade_id"
label="grade"
placeholder="grade"
type="Search"
option={GradeOption}
isLoading={isLoadingGrade}
canChangePage={canChangeGradePage}
PageName={"GradeCurrentPage"}
page={GradePage}
/>
}
{!Hide && (
<ValidationField
searchBy="GradeName"
name="grade_id"
label="grade"
placeholder="grade"
type="Search"
option={GradeOption}
isLoading={isLoadingGrade}
canChangePage={canChangeGradePage}
PageName={"GradeCurrentPage"}
page={GradePage}
/>
)}
</Col>
</Row>
);

14
src/Pages/Admin/Coupon/Model/formUtil.ts
View File

@ -10,7 +10,9 @@ export const getInitialValues = (
name: objectToEdit?.name ?? "",
amount: objectToEdit?.amount ?? "",
code: objectToEdit?.code ?? "",
due_to: objectToEdit?.due_to ? dayjs(objectToEdit?.due_to,"YYYY-MM-DD HH:mm:ss") : "",
due_to: objectToEdit?.due_to
? dayjs(objectToEdit?.due_to, "YYYY-MM-DD HH:mm:ss")
: "",
grade_id: objectToEdit?.grade ?? "",
};
};
@ -20,8 +22,12 @@ export const getValidationSchema = () => {
return Yup.object().shape({
name: Yup.string().required("validation.required"),
due_to: Yup.string().required("validation.required"),
code: Yup.string().required("validation.required").min(6,"validation.must_be_at_least_6_characters_long").max(6,"validation.must_be_at_least_6_characters_long"),
amount: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"),
code: Yup.string()
.required("validation.required")
.min(6, "validation.must_be_at_least_6_characters_long")
.max(6, "validation.must_be_at_least_6_characters_long"),
amount: Yup.number()
.required("validation.required")
.typeError("validation.Must_be_a_number"),
});
};

10
src/Pages/Admin/Coupon/Page.tsx
View File

@ -21,8 +21,8 @@ const TableHeader = () => {
const deleteMutation = useDeleteCoupon();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.Coupon`)}`, path:"Coupon"}
{ name: `${t(`page_header.home`)}`, path: "/" },
{ name: `${t(`page_header.Coupon`)}`, path: "Coupon" },
]);
return (
@ -33,7 +33,11 @@ const TableHeader = () => {
ModelAbility={ModalEnum?.COUPON_ADD}
canAdd={canAddCoupon}
/>
<FilterLayout sub_children={<FilterForm />} haveFilter={false} filterTitle="table.Coupon" />
<FilterLayout
sub_children={<FilterForm />}
haveFilter={false}
filterTitle="table.Coupon"
/>
<Table />
<AddModalForm />
<EditModalForm />

8
src/Pages/Admin/Coupon/Table.tsx
View File

@ -8,16 +8,16 @@ import { useFilterStateState } from "../../../zustand/Filter";
const App: React.FC = () => {
const { filterState } = useFilterState();
const { Filter } = useFilterStateState();
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const name = Filter?.name;
const sort_by = Filter?.sort_by;
const response = useGetAllCoupon({
pagination: true,
...filterState,
name,
sort_by
sort_by,
});
return <DataTable response={response} useColumns={useColumns} />;
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

13
src/Pages/Admin/Coupon/useTableColumns.tsx
View File

@ -21,10 +21,8 @@ export const useColumns = () => {
const navigate = useNavigate();
const { setFilter } = useFilterStateState();
const handelShow = (record: Coupon) => {
setFilter({})
setFilter({});
navigate(`${record?.id}`);
};
@ -53,7 +51,7 @@ export const useColumns = () => {
key: "name",
align: "center",
render: (_text, record) => record?.name,
ellipsis:true
ellipsis: true,
},
{
title: `${t("columns.amount")}`,
@ -61,7 +59,7 @@ export const useColumns = () => {
key: "amount",
align: "center",
render: (_text, record) => record?.amount,
ellipsis:true
ellipsis: true,
},
{
title: `${t("columns.code")}`,
@ -69,7 +67,7 @@ export const useColumns = () => {
key: "code",
align: "center",
render: (_text, record) => record?.code,
ellipsis:true
ellipsis: true,
},
{
title: `${t("columns.due_to")}`,
@ -85,10 +83,9 @@ export const useColumns = () => {
key: "status",
align: "center",
render: (_text, record) => record?.status,
ellipsis:true
ellipsis: true,
},
{
title: t("columns.procedure"),
key: "actions",
align: "center",

4
src/Pages/Admin/FinancialCollection/Model/AddModel.tsx
View File

@ -14,10 +14,10 @@ const AddModel: React.FC = () => {
const handleSubmit = (values: any) => {
console.log(values);
mutate({
...values,
date: dayjs(values?.date).format('YYYY-MM-DD'),
date: dayjs(values?.date).format("YYYY-MM-DD"),
});
};
return (

12
src/Pages/Admin/FinancialCollection/Model/EditModel.tsx
View File

@ -1,5 +1,9 @@
import React from "react";
import { getInitialValues, getValidationSchema, getValidationSchemaEdit } from "./formUtil";
import {
getInitialValues,
getValidationSchema,
getValidationSchemaEdit,
} from "./formUtil";
import { ModalEnum } from "../../../../enums/Model";
import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
@ -13,11 +17,11 @@ const EditModel: React.FC = () => {
const { mutate, status } = useUpdateFinancialCollection();
const { objectToEdit } = useObjectToEdit((state) => state);
console.log(objectToEdit);
const handleSubmit = (values: any) => {
mutate({
...values,
date: dayjs(values?.date).format('YYYY-MM-DD'),
date: dayjs(values?.date).format("YYYY-MM-DD"),
});
};
return (
@ -31,7 +35,7 @@ const EditModel: React.FC = () => {
getValidationSchema={getValidationSchemaEdit}
isAddModal={false}
>
<ModelForm isEdit={true}/>
<ModelForm isEdit={true} />
</LayoutModel>
</>
);

26
src/Pages/Admin/FinancialCollection/Model/FilterForm.tsx
View File

@ -4,26 +4,30 @@ import { Col, Row } from "reactstrap";
import { useGetAllReseller } from "../../../../api/reseller";
const FilterForm = () => {
const {data} = useGetAllReseller()
const { data } = useGetAllReseller();
return (
<div>
<Row>
<Col>
<ValidationField placeholder="description" label="description" name="description" />
<ValidationField
placeholder="description"
label="description"
name="description"
/>
<ValidationField placeholder="amount" label="amount" name="amount" />
<ValidationField
placeholder="reseller"
label="reseller"
name="reseller_id"
type="Select"
<ValidationField
placeholder="reseller"
label="reseller"
name="reseller_id"
type="Select"
option={data?.data?.map((e: any) => ({
...e,
fullName: `${e.first_name} ${e.last_name}`
}))}
fieldNames={{
fullName: `${e.first_name} ${e.last_name}`,
}))}
fieldNames={{
label: "fullName",
value: "id"
value: "id",
}}
/>
</Col>

54
src/Pages/Admin/FinancialCollection/Model/ModelForm.tsx
View File

@ -2,34 +2,44 @@ import { Col, Row } from "reactstrap";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { useGetAllReseller } from "../../../../api/reseller";
const Form = ({isEdit= false}:{isEdit?:boolean}) => {
const {data} = useGetAllReseller()
const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
const { data } = useGetAllReseller();
return (
<Row className="w-100">
<Col>
<ValidationField placeholder="description" label="description" name="description" />
<ValidationField
placeholder="description"
label="description"
name="description"
/>
<ValidationField placeholder="amount" label="amount" name="amount" />
</Col>
<Col>
<ValidationField placeholder="date" label="date" name="date" type="Date"/>
{isEdit ? " " :
<ValidationField
placeholder="reseller"
label="reseller"
name="reseller_id"
type="Select"
option={data?.data?.map((e: any) => ({
...e,
fullName: `${e.first_name} ${e.last_name}`
}))}
fieldNames={{
label: "fullName",
value: "id"
}}
/>
}
<ValidationField
placeholder="date"
label="date"
name="date"
type="Date"
/>
{isEdit ? (
" "
) : (
<ValidationField
placeholder="reseller"
label="reseller"
name="reseller_id"
type="Select"
option={data?.data?.map((e: any) => ({
...e,
fullName: `${e.first_name} ${e.last_name}`,
}))}
fieldNames={{
label: "fullName",
value: "id",
}}
/>
)}
</Col>
</Row>
);

2
src/Pages/Admin/FinancialCollection/Model/formUtil.ts
View File

@ -2,7 +2,7 @@ import * as Yup from "yup";
import dayjs from "dayjs";
export const getInitialValues = (objectToEdit: any): any => {
console.log(objectToEdit);
return {
id: objectToEdit?.id ?? null,
description: objectToEdit?.description ?? null,

12
src/Pages/Admin/FinancialCollection/Page.tsx
View File

@ -4,7 +4,10 @@ import { ModalEnum } from "../../../enums/Model";
import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import { canAddFinancial_Collection, canAddTags } from "../../../utils/hasAbilityFn";
import {
canAddFinancial_Collection,
canAddTags,
} from "../../../utils/hasAbilityFn";
import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { useDeleteTag } from "../../../api/tags";
import PageHeader from "../../../Layout/Dashboard/PageHeader";
@ -22,8 +25,11 @@ const TableHeader = () => {
const [t] = useTranslation();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.financial_collection`)}`, path:"financial_collection"}
{ name: `${t(`page_header.home`)}`, path: "/" },
{
name: `${t(`page_header.financial_collection`)}`,
path: "financial_collection",
},
]);
const deleteMutation = useDeleteFinancialCollection();

5
src/Pages/Admin/FinancialCollection/Table.tsx
View File

@ -5,11 +5,10 @@ import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
import { useFilterStateState } from "../../../zustand/Filter";
import { useGetAllFinancialCollection } from "../../../api/financial_collection";
const App: React.FC = () => {
const { filterState } = useFilterState();
const { Filter } = useFilterStateState();
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const name = Filter?.name;
const sort_by = Filter?.sort_by;
const response = useGetAllFinancialCollection({
pagination: true,

13
src/Pages/Admin/FinancialCollection/useTableColumns.tsx
View File

@ -4,7 +4,12 @@ import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useModalState } from "../../../zustand/Modal";
import { useTranslation } from "react-i18next";
import { canDeleteFinancial_Collection, canDeleteTags, canEditFinancial_Collection, canEditTags } from "../../../utils/hasAbilityFn";
import {
canDeleteFinancial_Collection,
canDeleteTags,
canEditFinancial_Collection,
canEditTags,
} from "../../../utils/hasAbilityFn";
import ActionButtons from "../../../Components/Table/ActionButtons";
export const useColumns = () => {
@ -34,21 +39,21 @@ export const useColumns = () => {
dataIndex: "amount",
key: "amount",
align: "center",
ellipsis:true
ellipsis: true,
},
{
title: t("columns.date"),
dataIndex: "date",
key: "date",
align: "center",
ellipsis:true
ellipsis: true,
},
{
title: t("columns.description"),
dataIndex: "description",
key: "description",
align: "center",
ellipsis:true
ellipsis: true,
},
{
title: t("columns.procedure"),

4
src/Pages/Admin/Grade/Page.tsx
View File

@ -21,8 +21,8 @@ const TableHeader = () => {
const deleteMutation = useDeleteGrade();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.grade`)}`, path:"grade"}
{ name: `${t(`page_header.home`)}`, path: "/" },
{ name: `${t(`page_header.grade`)}`, path: "grade" },
]);
return (

12
src/Pages/Admin/Grade/Table.tsx
View File

@ -8,17 +8,17 @@ import { useFilterStateState } from "../../../zustand/Filter";
const App: React.FC = () => {
const { filterState } = useFilterState();
const { Filter } = useFilterStateState();
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const name = Filter?.name;
const sort_by = Filter?.sort_by;
const response = useGetAllGrade({
pagination: true,
...filterState,
name:filterState.name || name,
sort_by
name: filterState.name || name,
sort_by,
});
return <DataTable response={response} useColumns={useColumns} />;
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

9
src/Pages/Admin/Grade/useTableColumns.tsx
View File

@ -21,10 +21,8 @@ export const useColumns = () => {
const navigate = useNavigate();
const { setFilter } = useFilterStateState();
const handelShow = (record: Grade) => {
setFilter({})
setFilter({});
navigate(`${record?.id}`);
};
@ -53,7 +51,7 @@ export const useColumns = () => {
key: "name",
align: "center",
render: (_text, record) => record?.name,
ellipsis:true
ellipsis: true,
},
{
title: t("columns.image"),
@ -63,11 +61,10 @@ export const useColumns = () => {
render: (_text: any, record: Grade) => {
let str = record?.icon;
return <ColumnsImage src={str}/> ;
return <ColumnsImage src={str} />;
},
},
{
title: t("columns.procedure"),
key: "actions",
align: "center",

28
src/Pages/Admin/Manager/Add/Page.tsx
View File

@ -15,22 +15,22 @@ import { useNavigate } from "react-router-dom";
const TableHeader = () => {
const [t] = useTranslation();
const Navigate = useNavigate();
const {mutate,status } = useAddManager();
const { mutate, status } = useAddManager();
const handelSubmit = (values: any) => {
console.log(values, "values");
mutate({...values});
mutate({ ...values });
};
const handleCancel = () => {
Navigate(-1);
};
console.log(status);
useEffect(() => {
if(status === QueryStatusEnum.SUCCESS){
if (status === QueryStatusEnum.SUCCESS) {
handleCancel();
}
}, [status])
}, [status]);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
@ -50,14 +50,16 @@ const TableHeader = () => {
<TitleDetailsForm />
<AttachmentForm />
<div className="resellerButton">
<button type="button" onClick={handleCancel}>{t("practical.cancel")}</button>
<button type="button" onClick={handleCancel}>
{t("practical.cancel")}
</button>
<button type="submit">
{t("practical.add")} {t("models.reseller")}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
{t("practical.add")} {t("models.reseller")}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</Form>

32
src/Pages/Admin/Manager/Edit/Page.tsx
View File

@ -16,21 +16,21 @@ import { QueryStatusEnum } from "../../../../enums/QueryStatus";
const TableHeader = () => {
const [t] = useTranslation();
const {objectToEdit} = useObjectToEdit();
const { objectToEdit } = useObjectToEdit();
const Navigate = useNavigate();
const {mutate,status } = useUpdateManager();
const { mutate, status } = useUpdateManager();
const handelSubmit = (values: any) => {
mutate({...values});
mutate({ ...values });
};
const handleCancel = () => {
Navigate(-1);
};
useEffect(() => {
if(status === QueryStatusEnum.SUCCESS){
if (status === QueryStatusEnum.SUCCESS) {
handleCancel();
}
}, [status])
}, [status]);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
@ -46,19 +46,21 @@ const TableHeader = () => {
onSubmit={handelSubmit}
>
<Form className="Form_details_container">
<PersonalDetailsForm isEdit={true}/>
<PersonalDetailsForm isEdit={true} />
<TitleDetailsForm />
<PasswordDetailsForm/>
<PasswordDetailsForm />
<AttachmentForm />
<div className="resellerButton">
<button type="button" onClick={handleCancel}>{t("practical.cancel")}</button>
<button type="button" onClick={handleCancel}>
{t("practical.cancel")}
</button>
<button type="submit">
{t("practical.add")} {t("models.reseller")}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
{t("practical.add")} {t("models.reseller")}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</Form>

13
src/Pages/Admin/Manager/Form/PasswordDetailsForm.tsx
View File

@ -12,9 +12,16 @@ const PasswordDetailsForm = () => {
<h4>{t("header.password")}</h4>
</header>
<main className="main_form_body">
<ValidationField name={"password"} placeholder={"_"} label={"new_password"} />
<ValidationField name={"password"} placeholder={"_"} label={"submit_password"} />
<ValidationField
name={"password"}
placeholder={"_"}
label={"new_password"}
/>
<ValidationField
name={"password"}
placeholder={"_"}
label={"submit_password"}
/>
</main>
</div>
);

28
src/Pages/Admin/Manager/Form/PersonalDetailsForm.tsx
View File

@ -7,11 +7,11 @@ import { userTypeOptions } from "../../../../config/userTypeOptions";
import { statusType } from "../../../../config/statusType";
import { useGetRole } from "../../../../api/role";
const PersonalDetailsForm = ({isEdit= false}:{isEdit?:boolean}) => {
const PersonalDetailsForm = ({ isEdit = false }: { isEdit?: boolean }) => {
const [t] = useTranslation();
const {data} = useGetRole();
const RoleData = data?.data
const { data } = useGetRole();
const RoleData = data?.data;
const sex = [
{ name: "male", id: "male" },
{ name: "female", id: "female" },
@ -28,24 +28,20 @@ const PersonalDetailsForm = ({isEdit= false}:{isEdit?:boolean}) => {
placeholder={"_"}
label={"username"}
/>
<ValidationField
name={"name"}
placeholder={"_"}
label={"name"}
/>
<ValidationField name={"name"} placeholder={"_"} label={"name"} />
<ValidationField
name={"contact_number"}
placeholder={"_"}
label={"contact_number"}
type="number"
/>
{!isEdit && (
<ValidationField
name={"password"}
placeholder={"_"}
label={"password"}
/>
)}
{!isEdit && (
<ValidationField
name={"password"}
placeholder={"_"}
label={"password"}
/>
)}
<ValidationField
name={"role"}
placeholder={"_"}

15
src/Pages/Admin/Manager/Form/TitleDetailsForm.tsx
View File

@ -8,14 +8,14 @@ import { useGetAllCity } from "../../../../api/City";
const TitleDetailsForm = () => {
const [t] = useTranslation();
const {data:city} = useGetAllCity();
const [CityId, setCityId] = useState()
const { data: city } = useGetAllCity();
const [CityId, setCityId] = useState();
console.log(city);
const {data} = useGetAllArea({
city_id:CityId
const { data } = useGetAllArea({
city_id: CityId,
});
return (
<div className="TitleDetailsForm">
<header className="header_form">
@ -29,7 +29,7 @@ const TitleDetailsForm = () => {
label={"city"}
type="Select"
option={city?.data}
onChange={(e)=>setCityId(e)}
onChange={(e) => setCityId(e)}
/>
<ValidationField
name={"area_id"}
@ -38,7 +38,6 @@ const TitleDetailsForm = () => {
type="Select"
disabled={!CityId}
option={data?.data}
/>
{/* <ValidationField name={"address"} placeholder={"_"} label={"address"} /> */}
</main>

3
src/Pages/Admin/Manager/Form/formUtils.ts
View File

@ -2,7 +2,7 @@ import * as Yup from "yup";
export const getInitialValues = (objectToEdit: Partial<any>) => {
console.log(objectToEdit);
return {
id: objectToEdit?.id ?? null,
name: objectToEdit?.name ?? null,
@ -10,7 +10,6 @@ export const getInitialValues = (objectToEdit: Partial<any>) => {
contact_number: objectToEdit?.contact_number ?? null,
role_id: objectToEdit?.role_id ?? null,
password: objectToEdit?.password ?? null,
};
};

2
src/Pages/Admin/Manager/Model/AddModel.tsx
View File

@ -12,7 +12,7 @@ const AddModel: React.FC = () => {
const handleSubmit = (values: any) => {
mutate({
...values,
grade_id:values?.grade_id?.id
grade_id: values?.grade_id?.id,
});
};
return (

2
src/Pages/Admin/Manager/Model/EditModel.tsx
View File

@ -12,7 +12,7 @@ const EditModel: React.FC = () => {
const { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => {
const Data_to_send = { ...values, grade_id:values?.grade_id?.id };
const Data_to_send = { ...values, grade_id: values?.grade_id?.id };
mutate(Data_to_send);
};

6
src/Pages/Admin/Manager/Page.tsx
View File

@ -19,9 +19,9 @@ const TableHeader = () => {
const deleteMutation = useDeleteManager();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.users`)}`, path:"user"},
{name:`${t(`page_header.managers`)}`, path:"managers"},
{ name: `${t(`page_header.home`)}`, path: "/" },
{ name: `${t(`page_header.users`)}`, path: "user" },
{ name: `${t(`page_header.managers`)}`, path: "managers" },
]);
return (
<div className="TableWithHeader">

6
src/Pages/Admin/Manager/Table.tsx
View File

@ -10,9 +10,8 @@ const App: React.FC = () => {
const { Filter } = useFilterStateState();
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const name = Filter?.name;
const sort_by = Filter?.sort_by;
const response = useGetAllManager({
name,
@ -20,7 +19,6 @@ const App: React.FC = () => {
pagination: true,
...filterState,
});
return <DataTable response={response} useColumns={useColumns} />;
};

7
src/Pages/Admin/Manager/useTableColumns.tsx
View File

@ -32,10 +32,9 @@ export const useColumns = () => {
handel_open_model(ModalEnum?.MANAGER_DELETE);
};
const handleEdit = (record: Manager) => {
const handleEdit = (record: Manager) => {
setObjectToEdit(record);
navigate(`/${ABILITIES_ENUM?.MANAGERS}/${record?.id}/edit`)
navigate(`/${ABILITIES_ENUM?.MANAGERS}/${record?.id}/edit`);
};
const [t] = useTranslation();
@ -59,7 +58,7 @@ export const useColumns = () => {
dataIndex: "username",
key: "username",
align: "center",
render: (_text, record) => record?.user.username ,
render: (_text, record) => record?.user.username,
},
{
title: `${t("columns.phone_number")}`,

Some files were not shown because too many files have changed in this diff Show More