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=

1
package-lock.json generated
View File

@ -12782,7 +12782,6 @@
"version": "2.0.15", "version": "2.0.15",
"resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz", "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz",
"integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==", "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==",
"license": "MIT",
"dependencies": { "dependencies": {
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"qr.js": "0.0.0" "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 { Divider } from "antd";
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next";
import { RxHome } from "react-icons/rx"; import { RxHome } from "react-icons/rx";
const AddressCard = ({ data }: { data: any }) => { const AddressCard = ({ data }: { data: any }) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className='address_card'> <div className="address_card">
<h5>{t("practical.address")}</h5> <h5>{t("practical.address")}</h5>
<Divider /> <Divider />
<div className="address_card_body"> <div className="address_card_body">
{data?.map((address:any)=>( {data?.map((address: any) => (
<div> <div>
<RxHome /> <RxHome />
<span> <span>
@ -20,9 +20,7 @@ const AddressCard = ({ data }: { data: any }) => {
))} ))}
</div> </div>
</div> </div>
) );
} };
export default AddressCard
export default AddressCard;

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

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

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

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

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

@ -1,27 +1,30 @@
export const StudentParamInfo = [ export const StudentParamInfo = [
{key:"الحنس" , 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"}, { key: "sex", value: "male" },
{key:"sex" , value:"male"}, { key: "sex", value: "male" },
{key:"sex" , value:"male"} { key: "sex", value: "male" },
] ];
export const ReSellerParamInfo = [ export const ReSellerParamInfo = [
{key:"رقم الهوية" , value:"12i9128921019"}, { 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:"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 = [ 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 = [ 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" },
];

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

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

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

@ -14,7 +14,7 @@ const ImageBoxField = ({ name }: any) => {
const value = getNestedValue(formik?.values, name); const value = getNestedValue(formik?.values, name);
const [imagePreview, setImagePreview] = useState<string | null>(null); const [imagePreview, setImagePreview] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null); const fileInputRef = useRef<HTMLInputElement | null>(null);
const [t] = useTranslation() const [t] = useTranslation();
useEffect(() => { useEffect(() => {
if (value instanceof File) { if (value instanceof File) {
generateImagePreview(value, setImagePreview); generateImagePreview(value, setImagePreview);
@ -32,8 +32,8 @@ const ImageBoxField = ({ name }: any) => {
const maxSize = 2 * 1024 * 1024; const maxSize = 2 * 1024 * 1024;
if (file.size > maxSize) { if (file.size > maxSize) {
alert(t('validation.File_size_exceeds_2_MB_limit.')); alert(t("validation.File_size_exceeds_2_MB_limit."));
event.target.value = ''; event.target.value = "";
return; return;
} }

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

@ -1,17 +1,18 @@
import "./ImageBoxField.scss"; import "./ImageBoxField.scss";
import { useState, useRef, useEffect,memo } from "react"; import { useState, useRef, useEffect, memo } from "react";
import ImageIcon from "./ImageIcon"; import ImageIcon from "./ImageIcon";
import ImageCancelIcon from "./ImageCancelIcon"; import ImageCancelIcon from "./ImageCancelIcon";
import { getNestedValue } from "../../../utils/getNestedValue"; import { getNestedValue } from "../../../utils/getNestedValue";
import { generateImagePreview } from "./generateImagePreview"; import { generateImagePreview } from "./generateImagePreview";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual"; 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 ImageBoxFieldMemo = memo(
const {values,setFieldValue} = form ({ form, field }: any) => {
const {name} = field; const { values, setFieldValue } = form;
const { name } = field;
const value = getNestedValue(values, name); const value = getNestedValue(values, name);
const [imagePreview, setImagePreview] = useState<string | null>(null); const [imagePreview, setImagePreview] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null); const fileInputRef = useRef<HTMLInputElement | null>(null);
@ -33,8 +34,8 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
const maxSize = 2 * 1024 * 1024; const maxSize = 2 * 1024 * 1024;
if (file.size > maxSize) { if (file.size > maxSize) {
alert(t('validation.File_size_exceeds_2_MB_limit.')); alert(t("validation.File_size_exceeds_2_MB_limit."));
event.target.value = ''; event.target.value = "";
return; return;
} }
@ -98,8 +99,10 @@ import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual";
/> />
</div> </div>
); );
}, (prevProps, nextProps) => { },
return areFieldPropsEqual(prevProps, nextProps) (prevProps, nextProps) => {
}); return areFieldPropsEqual(prevProps, nextProps);
},
);
export default ImageBoxFieldMemo; export default ImageBoxFieldMemo;

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

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

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

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

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

@ -14,14 +14,15 @@ const SelectTagV2: React.FC = () => {
const { data, isLoading } = useGetAllTag({ name: searchValue }); const { data, isLoading } = useGetAllTag({ name: searchValue });
const { t } = useTranslation(); const { t } = useTranslation();
// Get selected tags from Formik // Get selected tags from Formik
const CurrentTags = formik.values.tags ?? []; // Assuming tags are stored as array of objects const CurrentTags = formik.values.tags ?? []; // Assuming tags are stored as array of objects
console.log(CurrentTags,"CurrentTags"); console.log(CurrentTags, "CurrentTags");
const NewShapeTags = CurrentTags?.map((item:any)=> {return item?.name ?? item }) const NewShapeTags = CurrentTags?.map((item: any) => {
return item?.name ?? item;
});
const handleChange = (_value: any[],option:any) => { const handleChange = (_value: any[], option: any) => {
// console.log(option,"option"); // console.log(option,"option");
console.log(_value); console.log(_value);
@ -51,7 +52,6 @@ const SelectTagV2: React.FC = () => {
console.log(additionalData); console.log(additionalData);
return ( return (
<div className="SelectTag"> <div className="SelectTag">
<label>{t("models.tag")}</label> <label>{t("models.tag")}</label>
@ -77,7 +77,6 @@ const SelectTagV2: React.FC = () => {
} }
}} }}
value={NewShapeTags} value={NewShapeTags}
/> />
</div> </div>
); );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,30 +1,29 @@
import TextArea from 'antd/es/input/TextArea'; import TextArea from "antd/es/input/TextArea";
import React, { Suspense, useEffect, useState } from 'react'; import React, { Suspense, useEffect, useState } from "react";
import { parseTextAndLatex } from '../../utils/parseTextAndLatex'; import { parseTextAndLatex } from "../../utils/parseTextAndLatex";
import LatexPreview from '../CustomFields/MathComponent'; import LatexPreview from "../CustomFields/MathComponent";
import { Checkbox } from 'antd'; import { Checkbox } from "antd";
import { CheckboxProps } from 'antd/lib'; import { CheckboxProps } from "antd/lib";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { FaPlus } from 'react-icons/fa'; import { FaPlus } from "react-icons/fa";
import { useObjectToEdit } from '../../zustand/ObjectToEditState'; import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import SpinContainer from '../Layout/SpinContainer'; import SpinContainer from "../Layout/SpinContainer";
import { areFieldPropsEqual } from './areFieldPropsEqual'; import { areFieldPropsEqual } from "./areFieldPropsEqual";
const AddLazyModal = React.lazy(() => import("./AddLaTexModal")); const AddLazyModal = React.lazy(() => import("./AddLaTexModal"));
const EditLazyModal = React.lazy(() => import("./EditLaTexModal")); 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 { setFieldValue, touched, errors, getFieldProps, values } = form;
const { name ,value} = field;
const { setFieldValue ,touched ,errors ,getFieldProps,values} = form;
const { ShowLatexOption, Success } = useObjectToEdit(); const { ShowLatexOption, Success } = useObjectToEdit();
const [showPreview, setShowPreview] = useState(false); const [showPreview, setShowPreview] = useState(false);
const Preview = parseTextAndLatex(value ?? ""); const Preview = parseTextAndLatex(value ?? "");
const onPreviewChange: CheckboxProps["onChange"] = (e) => {
const onPreviewChange: CheckboxProps['onChange'] = (e) => {
setShowPreview(e.target.checked); setShowPreview(e.target.checked);
}; };
@ -44,62 +43,65 @@ const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...prop
// setIsEditModalOpen(true); // setIsEditModalOpen(true);
}; };
const [curCentValue, setCurrentValue] = useState(value) const [curCentValue, setCurrentValue] = useState(value);
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const handleChangeInput = (
setCurrentValue(e.target.value) e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
setCurrentValue(e.target.value);
}; };
const onBlur = ()=>{ const onBlur = () => {
if (curCentValue !== value) { if (curCentValue !== value) {
setFieldValue(name, curCentValue); setFieldValue(name, curCentValue);
} }
} };
useEffect(() => { useEffect(() => {
if(Success){ if (Success) {
setCurrentValue(null) setCurrentValue(null);
} }
}, [Success]) }, [Success]);
useEffect(() => { useEffect(() => {
if(value){ if (value) {
setCurrentValue(value) setCurrentValue(value);
} }
}, [value]) }, [value]);
const isError = !!touched?.[name] && !!errors?.[name]; const isError = !!touched?.[name] && !!errors?.[name];
const errorMessage = isError ? errors?.[name] as string ?? "" : "" ; const errorMessage = isError ? ((errors?.[name] as string) ?? "") : "";
console.log(values); console.log(values);
let metaName = name.substring(0, name.lastIndexOf('.')); let metaName = name.substring(0, name.lastIndexOf("."));
if (metaName.includes('.') || metaName.includes('[')) { metaName += ".meta";} else {metaName += "meta"} if (metaName.includes(".") || metaName.includes("[")) {
const meta = getFieldProps(metaName).value ; metaName += ".meta";
console.log(metaName,meta); } else {
const direction = meta?.direction === "ltr" ? "ltr" : "rtl" metaName += "meta";
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"})
} }
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 ( return (
<div className='LaTeXInput'> <div className="LaTeXInput">
<label htmlFor={name} className="text"> <label htmlFor={name} className="text">
<div>{t(label || name)}</div> <div className='error_message'>{t(errorMessage)}</div> <div>{t(label || name)}</div>{" "}
<div className="error_message">{t(errorMessage)}</div>
</label> </label>
<div className='LaTeXInputArea'> <div className="LaTeXInputArea">
<TextArea <TextArea
size="large" size="large"
showCount showCount
@ -112,30 +114,39 @@ const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...prop
dir={Dir} dir={Dir}
{...props} {...props}
/> />
<div className='LaTeXInputOptions'> <div className="LaTeXInputOptions">
<Checkbox onChange={handleChangeDirection} checked={direction === "ltr"} >{t("header.change_direction")}</Checkbox> <Checkbox
onChange={handleChangeDirection}
checked={direction === "ltr"}
>
{t("header.change_direction")}
</Checkbox>
{ShowLatexOption && ( {ShowLatexOption && (
<> <>
<Checkbox onChange={onPreviewChange}>{t("header.show_preview")}</Checkbox> <Checkbox onChange={onPreviewChange}>
<button type='button' className='addMML' onClick={showModal}> {t("header.show_preview")}
<FaPlus/> {t("MML")} </Checkbox>
<button type="button" className="addMML" onClick={showModal}>
<FaPlus /> {t("MML")}
</button> </button>
</> </>
)} )}
</div> </div>
{showPreview && ( {showPreview && (
<div className='showPreviewInput'> <div className="showPreviewInput">
{Preview?.map((item: any, index: number) => { {Preview?.map((item: any, index: number) => {
if (item?.isLatex) { if (item?.isLatex) {
console.log(item?.text); console.log(item?.text);
return ( return (
<span dir='ltr' key={index} onClick={() => handleEditModal(item)} className='LatexPreview'> <span
dir="ltr"
key={index}
onClick={() => handleEditModal(item)}
className="LatexPreview"
>
<LatexPreview latex={item?.text} /> <LatexPreview latex={item?.text} />
</span> </span>
); );
@ -147,14 +158,28 @@ const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...prop
</div> </div>
<Suspense fallback={<SpinContainer />}> <Suspense fallback={<SpinContainer />}>
<AddLazyModal name={name} Latex={Latex} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} setLatex={setLatex} setCurrentValue={setCurrentValue} /> <AddLazyModal
<EditLazyModal name={name} Latex={Latex} isModalOpen={isEditModalOpen} setIsModalOpen={setIsEditModalOpen} setLatex={setLatex} /> name={name}
Latex={Latex}
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
setLatex={setLatex}
setCurrentValue={setCurrentValue}
/>
<EditLazyModal
name={name}
Latex={Latex}
isModalOpen={isEditModalOpen}
setIsModalOpen={setIsEditModalOpen}
setLatex={setLatex}
/>
</Suspense> </Suspense>
</div> </div>
); );
}, (prevProps, nextProps) => { },
return areFieldPropsEqual(prevProps, nextProps) (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 // utilityFunctions.ts
import { FieldProps } from 'formik'; import { FieldProps } from "formik";
export const areFieldPropsEqual = ( export const areFieldPropsEqual = (prevProps: any, nextProps: any): boolean => {
prevProps: any,
nextProps: any
): boolean => {
const prevError = prevProps.form.errors[prevProps.field.name]; const prevError = prevProps.form.errors[prevProps.field.name];
const nextError = nextProps.form.errors[nextProps.field.name]; const nextError = nextProps.form.errors[nextProps.field.name];
@ -14,7 +11,5 @@ export const areFieldPropsEqual = (
const prevValue = prevProps.field.value; const prevValue = prevProps.field.value;
const nextValue = nextProps.field.value; const nextValue = nextProps.field.value;
return ( return false;
false
);
}; };

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

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

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

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

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

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

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

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

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

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

@ -7,7 +7,6 @@ import { BsEyeFill } from "react-icons/bs";
import { GoTrash } from "react-icons/go"; import { GoTrash } from "react-icons/go";
import { BsQrCode } from "react-icons/bs"; import { BsQrCode } from "react-icons/bs";
interface ActionButtonsProps { interface ActionButtonsProps {
canEdit?: boolean; canEdit?: boolean;
canDelete?: boolean; canDelete?: boolean;
@ -19,7 +18,7 @@ interface ActionButtonsProps {
onShow?: () => void; onShow?: () => void;
index?: number; index?: number;
className?: string; className?: string;
canShowQr?:boolean canShowQr?: boolean;
onShoqQr?: () => void; onShoqQr?: () => void;
} }

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

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

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

@ -1,18 +1,24 @@
import { Button } from 'antd' import { Button } from "antd";
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next";
import { CiEdit } from "react-icons/ci"; import { CiEdit } from "react-icons/ci";
const EditSettingButton = ({buttonName,onClick}:{buttonName?:string,onClick?:() => void}) => { const EditSettingButton = ({
const {t} = useTranslation(); buttonName,
onClick,
}: {
buttonName?: string;
onClick?: () => void;
}) => {
const { t } = useTranslation();
return ( return (
<div> <div>
<Button className=' setting_edit_button' onClick={onClick}> <Button className=" setting_edit_button" onClick={onClick}>
<CiEdit/> <CiEdit />
{t(`header.edit`) ?? (`header.${buttonName}`)} {t(`header.edit`) ?? `header.${buttonName}`}
</Button> </Button>
</div> </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 { Button } from "antd";
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next";
const SecuritySettingButton = ({name,danger = false}:{name:string,danger?:boolean}) => { const SecuritySettingButton = ({
const {t} = useTranslation(); name,
danger = false,
}: {
name: string;
danger?: boolean;
}) => {
const { t } = useTranslation();
return ( return (
<div> <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> </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;

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

@ -1,15 +1,23 @@
import { Button } from 'antd'; import { Button } from "antd";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { HiOutlineTrash } from "react-icons/hi2"; import { HiOutlineTrash } from "react-icons/hi2";
const TrashButton = ({name,onClick,icon = true}:{name:string,onClick?:() =>void,icon?:boolean}) => { const TrashButton = ({
const {t} = useTranslation(); name,
onClick,
icon = true,
}: {
name: string;
onClick?: () => void;
icon?: boolean;
}) => {
const { t } = useTranslation();
return ( return (
<Button className='trash_button' onClick={onClick}> <Button className="trash_button" onClick={onClick}>
{ icon ? <HiOutlineTrash/> : "" } {icon ? <HiOutlineTrash /> : ""}
{t(`header.${name}`)} {t(`header.${name}`)}
</Button> </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; setIsOpen: any;
} }
const useFilter = () => { const useFilter = () => {
const { setIsOpen, isOpen } = useModalState((state) => state); const { setIsOpen, isOpen } = useModalState((state) => state);
const { filterState, setFilterState, clearFilterState } = useFilterState(); const { filterState, setFilterState, clearFilterState } = useFilterState();

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

@ -53,13 +53,12 @@ const File = ({
const maxSize = 2 * 1024 * 1024; // 2 MB in bytes const maxSize = 2 * 1024 * 1024; // 2 MB in bytes
if (file.size > maxSize) { 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 Upload.LIST_IGNORE; // Prevent the file from being uploaded
} }
return true; // Allow the file to be uploaded return true; // Allow the file to be uploaded
}; };
return ( return (
<div className={`ValidationField upload_image_button ${className ?? ""} `}> <div className={`ValidationField upload_image_button ${className ?? ""} `}>
<label htmlFor={name} className="text"> <label htmlFor={name} className="text">
@ -76,7 +75,6 @@ const File = ({
customRequest={customRequest} customRequest={customRequest}
className={` w-100`} className={` w-100`}
id={name} id={name}
> >
<Button <Button
className={isError ? "isError w-100 " : " w-100"} className={isError ? "isError w-100 " : " w-100"}

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

@ -48,11 +48,10 @@ const SearchField = ({
} }
}, [page]); }, [page]);
const SelectableChange = (value: any,option:any) => { const SelectableChange = (value: any, option: any) => {
if(isMulti){ if (isMulti) {
formik?.setFieldValue(name, option ?? []); formik?.setFieldValue(name, option ?? []);
}else{ } else {
formik?.setFieldValue(name, option ?? {}); formik?.setFieldValue(name, option ?? {});
} }
@ -96,7 +95,8 @@ const SearchField = ({
const handleScroll = (event: any) => { const handleScroll = (event: any) => {
const target = event.target; const target = event.target;
const isAtBottom = 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) { if (isAtBottom && canChangePage && PageName && page) {
console.log("Scrolled to the last option!"); console.log("Scrolled to the last option!");
@ -109,9 +109,11 @@ const SearchField = ({
console.log(AllPagesOption); console.log(AllPagesOption);
console.log(option, "option"); console.log(option, "option");
const value = isMulti ? formik.values[name]?.map((item:any)=>{ const value = isMulti
return item?.name ?? item ? formik.values[name]?.map((item: any) => {
}) : formik.values[name]?.["name"] ?? "" return item?.name ?? item;
})
: (formik.values[name]?.["name"] ?? "");
console.log(value); console.log(value);
return ( return (

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

@ -47,7 +47,6 @@ const TextField = ({
showCount showCount
maxLength={1000} maxLength={1000}
autoSize={{ minRows: 4, maxRows: 10 }} autoSize={{ minRows: 4, maxRows: 10 }}
onChange={onChange || TextFilehandleChange} onChange={onChange || TextFilehandleChange}
id={name} id={name}
{...props} {...props}

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

@ -49,10 +49,7 @@ const TextFieldMML = ({
onChange={onChange || TextFilehandleChange} onChange={onChange || TextFilehandleChange}
id={name} id={name}
{...props} {...props}
/> />
</ValidationFieldContainer> </ValidationFieldContainer>
</div> </div>
); );

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

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

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

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

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

@ -1,5 +1,4 @@
export const translateOptions = (options: any, t: any) => { export const translateOptions = (options: any, t: any) => {
return options?.map((opt: any) => ({ return options?.map((opt: any) => ({
...opt, ...opt,
label: t(`${opt?.label}`), 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 DateFieldProps = BaseFieldProps & {
type: "DataRange" | "Date" | "Time"; 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"; picker?: "data" | "week" | "month" | "quarter" | "year";
showTime?:boolean showTime?: boolean;
}; };
type FileFieldProps = BaseFieldProps & { type FileFieldProps = BaseFieldProps & {

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

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

2
src/Hooks/useFormField.tsx
View File

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

18
src/Hooks/useUnsavedChangesWarning.tsx
View File

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

11
src/Hooks/useWindowResize.tsx
View File

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

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

@ -18,15 +18,15 @@ const FilterLayout = ({
width = "500px", width = "500px",
haveFilter = true, haveFilter = true,
haveOrder = true, haveOrder = true,
haveSearch = true haveSearch = true,
}: { }: {
filterTitle: string; filterTitle: string;
sub_children?: any; sub_children?: any;
search_by?:string; search_by?: string;
width?:string; width?: string;
haveFilter?:boolean; haveFilter?: boolean;
haveOrder?:boolean; haveOrder?: boolean;
haveSearch?:boolean haveSearch?: boolean;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const translateArray = translateOptions(search_array, t); const translateArray = translateOptions(search_array, t);
@ -49,8 +49,7 @@ const FilterLayout = ({
<div className="model_sub_children">{sub_children}</div> <div className="model_sub_children">{sub_children}</div>
<FilterSubmit /> <FilterSubmit />
</FilterBody> </FilterBody>
{haveFilter && {haveFilter && (
<div className="filter_button" onClick={() => setIsOpen(true)}> <div className="filter_button" onClick={() => setIsOpen(true)}>
<span> <span>
<BiFilterAlt className="addition_select_icon" /> <BiFilterAlt className="addition_select_icon" />
@ -58,12 +57,10 @@ const FilterLayout = ({
</span> </span>
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
} )}
</span> </span>
<span> <span>{haveOrder && <OrderBySelect />}</span>
{haveOrder && <OrderBySelect />}
</span>
</div> </div>
</div> </div>
@ -77,7 +74,12 @@ const FilterLayout = ({
</span> </span>
<div className="header_search"> <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> </div>
</div> </div>

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

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

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

@ -21,8 +21,8 @@ interface LayoutModalProps {
ModelClassName?: string; ModelClassName?: string;
width?: string; width?: string;
isLoading?: boolean; isLoading?: boolean;
buttonTitle?:string; buttonTitle?: string;
initialButtonName?:boolean initialButtonName?: boolean;
} }
const LayoutModel = ({ const LayoutModel = ({
@ -70,7 +70,6 @@ const LayoutModel = ({
open={isOpen === ModelEnum} open={isOpen === ModelEnum}
onCancel={handleCancel} onCancel={handleCancel}
> >
<Formik <Formik
enableReinitialize={true} enableReinitialize={true}
initialValues={getInitialValues} initialValues={getInitialValues}
@ -85,8 +84,8 @@ const LayoutModel = ({
} }
}, [isOpen]); }, [isOpen]);
return <Form className="w-100"> return (
<Form className="w-100">
<header> <header>
<span> <span>
{t(`practical.${isAddModal ? "add" : "edit"}`)}{" "} {t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
@ -100,18 +99,22 @@ const LayoutModel = ({
<Divider /> <Divider />
<div className="buttons"> <div className="buttons">
<Button className="back_button pointer" onClick={handleCancel}> <Button
className="back_button pointer"
onClick={handleCancel}
>
{t("practical.cancel")} {t("practical.cancel")}
</Button> </Button>
<Button <Button
className="add_button" className="add_button"
disabled={status === QueryStatusEnum.LOADING || !formik.dirty} disabled={
status === QueryStatusEnum.LOADING || !formik.dirty
}
htmlType="submit" htmlType="submit"
> >
{ {initialButtonName
initialButtonName ? t(`practical.${isAddModal ? "add" : "edit"}`) ? t(`practical.${isAddModal ? "add" : "edit"}`)
: t(`practical.${buttonTitle}`) : t(`practical.${buttonTitle}`)}
}
{status === QueryStatusEnum.LOADING && ( {status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div"> <span className="Spinier_Div">
<Spin /> <Spin />
@ -120,8 +123,8 @@ const LayoutModel = ({
</Button> </Button>
</div> </div>
</main> </main>
</Form>
</Form>; );
}} }}
</Formik> </Formik>
</Modal> </Modal>

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

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

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

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

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

@ -24,11 +24,11 @@ const DataTable: React.FC<DataTableProps> = ({
}; };
const isRefetching = response?.isRefetching; const isRefetching = response?.isRefetching;
const isLoading = response?.isLoading; const isLoading = response?.isLoading;
const dataLength = data?.length ; const dataLength = data?.length;
const {setDataTableLength} = useDataTableState() const { setDataTableLength } = useDataTableState();
useEffect(() => { useEffect(() => {
setDataTableLength(dataLength) setDataTableLength(dataLength);
}, [dataLength]) }, [dataLength]);
return ( return (
<Table <Table
@ -63,10 +63,8 @@ const DataTable: React.FC<DataTableProps> = ({
nextIcon: <>{t("practical.next")}</>, nextIcon: <>{t("practical.next")}</>,
prevIcon: <> {t("practical.prev")} </>, prevIcon: <> {t("practical.prev")} </>,
className: "pagination_antd", className: "pagination_antd",
showSizeChanger:false showSizeChanger: false,
}} }}
{...props} {...props}
/> />
); );

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

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

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

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

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

@ -6,21 +6,26 @@ import { FaArrowRight } from "react-icons/fa6";
function NotFoundPage() { function NotFoundPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const {t} = useTranslation(); const { t } = useTranslation();
return ( return (
<ProtectedRouteProvider className="not_found_page"> <ProtectedRouteProvider className="not_found_page">
<div className="not_found_container"> <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> <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> <p>
<Button className="not_found_button" onClick={() => navigate("/", { replace: true })}> {t(
<FaArrowRight/> "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")} {t("practical.return_to_the_dashboard")}
</Button> </Button>
</div> </div>
</ProtectedRouteProvider> </ProtectedRouteProvider>
); );
} }

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

@ -10,11 +10,11 @@ import { ParamsEnum } from "../../../../enums/params";
const AddModel: React.FC = () => { const AddModel: React.FC = () => {
const { mutate, status } = useAddArea(); const { mutate, status } = useAddArea();
const {city_id} = useParams<ParamsEnum>() const { city_id } = useParams<ParamsEnum>();
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
mutate({ mutate({
...values, ...values,
city_id city_id,
}); });
}; };
return ( 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 EditModel: React.FC = () => {
const { mutate, status } = useUpdateArea(); const { mutate, status } = useUpdateArea();
const { objectToEdit } = useObjectToEdit((state) => state); const { objectToEdit } = useObjectToEdit((state) => state);
const {city_id} = useParams<ParamsEnum>() const { city_id } = useParams<ParamsEnum>();
const handleSubmit = (values: any) => { const handleSubmit = (values: any) => {
const Data_to_send = { ...values,city_id }; const Data_to_send = { ...values, city_id };
mutate(Data_to_send); mutate(Data_to_send);
}; };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -10,7 +10,9 @@ export const getInitialValues = (
name: objectToEdit?.name ?? "", name: objectToEdit?.name ?? "",
amount: objectToEdit?.amount ?? "", amount: objectToEdit?.amount ?? "",
code: objectToEdit?.code ?? "", 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 ?? "", grade_id: objectToEdit?.grade ?? "",
}; };
}; };
@ -20,8 +22,12 @@ export const getValidationSchema = () => {
return Yup.object().shape({ return Yup.object().shape({
name: Yup.string().required("validation.required"), name: Yup.string().required("validation.required"),
due_to: 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"), code: Yup.string()
amount: Yup.number().required("validation.required").typeError("validation.Must_be_a_number"), .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(); const deleteMutation = useDeleteCoupon();
useSetPageTitle([ useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"}, { name: `${t(`page_header.home`)}`, path: "/" },
{name:`${t(`page_header.Coupon`)}`, path:"Coupon"} { name: `${t(`page_header.Coupon`)}`, path: "Coupon" },
]); ]);
return ( return (
@ -33,7 +33,11 @@ const TableHeader = () => {
ModelAbility={ModalEnum?.COUPON_ADD} ModelAbility={ModalEnum?.COUPON_ADD}
canAdd={canAddCoupon} canAdd={canAddCoupon}
/> />
<FilterLayout sub_children={<FilterForm />} haveFilter={false} filterTitle="table.Coupon" /> <FilterLayout
sub_children={<FilterForm />}
haveFilter={false}
filterTitle="table.Coupon"
/>
<Table /> <Table />
<AddModalForm /> <AddModalForm />
<EditModalForm /> <EditModalForm />

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

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

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

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

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

@ -17,7 +17,7 @@ const AddModel: React.FC = () => {
mutate({ mutate({
...values, ...values,
date: dayjs(values?.date).format('YYYY-MM-DD'), date: dayjs(values?.date).format("YYYY-MM-DD"),
}); });
}; };
return ( return (

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

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

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

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

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

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

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

@ -4,7 +4,10 @@ import { ModalEnum } from "../../../enums/Model";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react"; import { lazy, Suspense } from "react";
import { Spin } from "antd"; import { Spin } from "antd";
import { canAddFinancial_Collection, canAddTags } from "../../../utils/hasAbilityFn"; import {
canAddFinancial_Collection,
canAddTags,
} from "../../../utils/hasAbilityFn";
import useSetPageTitle from "../../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { useDeleteTag } from "../../../api/tags"; import { useDeleteTag } from "../../../api/tags";
import PageHeader from "../../../Layout/Dashboard/PageHeader"; import PageHeader from "../../../Layout/Dashboard/PageHeader";
@ -22,8 +25,11 @@ const TableHeader = () => {
const [t] = useTranslation(); const [t] = useTranslation();
useSetPageTitle([ useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"}, { name: `${t(`page_header.home`)}`, path: "/" },
{name:`${t(`page_header.financial_collection`)}`, path:"financial_collection"} {
name: `${t(`page_header.financial_collection`)}`,
path: "financial_collection",
},
]); ]);
const deleteMutation = useDeleteFinancialCollection(); 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 { useFilterStateState } from "../../../zustand/Filter";
import { useGetAllFinancialCollection } from "../../../api/financial_collection"; import { useGetAllFinancialCollection } from "../../../api/financial_collection";
const App: React.FC = () => { const App: React.FC = () => {
const { filterState } = useFilterState(); const { filterState } = useFilterState();
const { Filter } = useFilterStateState(); const { Filter } = useFilterStateState();
const name = Filter?.name ; const name = Filter?.name;
const sort_by = Filter?.sort_by ; const sort_by = Filter?.sort_by;
const response = useGetAllFinancialCollection({ const response = useGetAllFinancialCollection({
pagination: true, 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 { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useModalState } from "../../../zustand/Modal"; import { useModalState } from "../../../zustand/Modal";
import { useTranslation } from "react-i18next"; 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"; import ActionButtons from "../../../Components/Table/ActionButtons";
export const useColumns = () => { export const useColumns = () => {
@ -34,21 +39,21 @@ export const useColumns = () => {
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
align: "center", align: "center",
ellipsis:true ellipsis: true,
}, },
{ {
title: t("columns.date"), title: t("columns.date"),
dataIndex: "date", dataIndex: "date",
key: "date", key: "date",
align: "center", align: "center",
ellipsis:true ellipsis: true,
}, },
{ {
title: t("columns.description"), title: t("columns.description"),
dataIndex: "description", dataIndex: "description",
key: "description", key: "description",
align: "center", align: "center",
ellipsis:true ellipsis: true,
}, },
{ {
title: t("columns.procedure"), title: t("columns.procedure"),

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -10,7 +10,6 @@ export const getInitialValues = (objectToEdit: Partial<any>) => {
contact_number: objectToEdit?.contact_number ?? null, contact_number: objectToEdit?.contact_number ?? null,
role_id: objectToEdit?.role_id ?? null, role_id: objectToEdit?.role_id ?? null,
password: objectToEdit?.password ?? 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) => { const handleSubmit = (values: any) => {
mutate({ mutate({
...values, ...values,
grade_id:values?.grade_id?.id grade_id: values?.grade_id?.id,
}); });
}; };
return ( 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 { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => { 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); mutate(Data_to_send);
}; };

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

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

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

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

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

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

81
src/Pages/Admin/Notifications/AddNotification/Add/Page.tsx Normal file
View File

@ -0,0 +1,81 @@
import { useTranslation } from "react-i18next";
import useSetPageTitle from "../../../../../Hooks/useSetPageTitle";
import PageHeader from "../../../../../Layout/Dashboard/PageHeader";
import { Suspense, useEffect } from "react";
import { Spin } from "antd";
import { ModalEnum } from "../../../../../enums/Model";
import PersonalDetailsForm from "../Form/PersonalDetailsForm";
import { Formik, Form } from "formik";
import { getInitialValues, getValidationSchema } from "../Form/formUtils";
import TitleDetailsForm from "../Form/TitleDetailsForm";
import AttachmentForm from "../Form/AttachmentForm";
import { useNavigate } from "react-router-dom";
import { QueryStatusEnum } from "../../../../../enums/QueryStatus";
import { useAddNotification } from "../../../../../api/notification";
const TableHeader = () => {
const [t] = useTranslation();
const Navigate = useNavigate();
const { mutate, isSuccess, status } = useAddNotification();
useSetPageTitle(t(`page_header.add_notification`));
const handleSubmit = (values: any) => {
const DataToSend = {
...values,
location: {
lat: values.lat,
lng: values.lng,
},
};
mutate(DataToSend);
};
useEffect(() => {
if (isSuccess === true) {
console.log(1);
Navigate("/add_Notifications");
}
}, [isSuccess]);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<PageHeader
pageTitle="manage_notification"
ModelAbility={ModalEnum?.NOTIFICATION_ADD}
canAdd={false}
/>
<div>
<Formik
initialValues={getInitialValues({})}
validationSchema={getValidationSchema}
onSubmit={handleSubmit}
>
{({ dirty }) => (
<Form className="Form_details_container">
<TitleDetailsForm />
<PersonalDetailsForm />
<div className="resellerButton">
<button
type="button"
onClick={() => Navigate("/add_Notifications")}
>
{t("practical.cancel")}
</button>
<button type="submit" disabled={!dirty}>
{t("practical.send")} {t("models.notifications")}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</Form>
)}
</Formik>
</div>
</Suspense>
</div>
);
};
export default TableHeader;

30
src/Pages/Admin/Notifications/AddNotification/Form/AttachmentForm.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { FaImage } from "react-icons/fa";
import ImageBoxField from "./ImageBoxField/ImageBoxField";
import ValidationField from "../../../../../Components/ValidationField/ValidationField";
const AttachmentForm = () => {
const [t] = useTranslation();
return (
<div className="AttachmentForm">
<header className="header_form">
<FaImage />
<h4>{t("header.attachment")}</h4>
</header>
<div className="AttachmentFormBody ">
<main className="main_form_body">
<ImageBoxField name="personal_image" />
<ImageBoxField name="id_image" />
</main>
<div className="MapField">
<ValidationField name="lat" placeholder="lat" label="lat" />
<ValidationField name="lng" placeholder="lng" label="lng" />
</div>
</div>
</div>
);
};
export default AttachmentForm;

25
src/Pages/Admin/Notifications/AddNotification/Form/FilterForm.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from "react";
import ValidationField from "../../../../../Components/ValidationField/ValidationField";
import { Col, Row } from "reactstrap";
const FilterForm = () => {
return (
<div>
<Row>
<Col>
<ValidationField
placeholder="first_name"
label="first_name"
name="first_name"
/>
{/* <ValidationField placeholder="last_name" label="last_name" name="last_name" /> */}
</Col>
{/* <Col>
<ValidationField placeholder="username" label="username" name="username" />
</Col> */}
</Row>
</div>
);
};
export default FilterForm;

38
src/Pages/Admin/Notifications/AddNotification/Form/ImageBoxField/ImageBoxField.scss Normal file
View File

@ -0,0 +1,38 @@
.ImageBoxField {
.ImageBox {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border: max(1.5px, 0.1vw) dashed #a9c3f1;
margin-block: 10px;
border-radius: 5px;
z-index: 9999999 !important;
.ImageBoxIcon {
cursor: pointer;
}
.imagePreview {
max-width: 99%;
height: auto;
max-height: 99%;
object-fit: contain;
border-radius: 5px;
}
}
.ImageHeader {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.ImageCancelIcon {
width: 16px !important;
height: 16px !important;
}
.ImageBoxIcon {
width: 20px !important;
height: 20px !important;
}
}

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