manager page design and fixes

This commit is contained in:
Moaz Dawalibi 2024-09-16 17:05:10 +03:00
parent 1d39a4cd4f
commit edd50bafad
40 changed files with 1179 additions and 124 deletions

View File

@ -37,14 +37,14 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandLess />
<MdExpandLess className="sidebar_menu_icaon" />
</div>
) : (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandMore />
<MdExpandMore className="sidebar_menu_icaon"/>
</div>
)}
</>

View File

@ -20,7 +20,7 @@ const FilterLayout = ({
haveOrder = true
}: {
filterTitle: string;
sub_children: any;
sub_children?: any;
search_by?:string;
width?:string;
haveFilter?:boolean;

View File

@ -12,7 +12,7 @@ function NotFoundPage() {
<ProtectedRouteProvider className="not_found_page">
<div className="not_found_container">
<img src="/App/Error.png" alt="Error 404" width={600}/>
<img src="/App/Error.png" alt="Error 404" width={500}/>
<h3>{t("practical.sorry_something_went_wrong")}</h3>
<p>{t("practical.error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist")}</p>
<Button className="not_found_button" onClick={() => navigate("/", { replace: true })}>

View File

@ -0,0 +1,52 @@
import { useTranslation } from "react-i18next";
import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
import PageHeader from "../../../../Layout/Dashboard/PageHeader";
import { Suspense } from "react";
import { Spin } from "antd";
import { ModalEnum } from "../../../../enums/Model";
import { canAddReSeller } from "../../../../utils/hasAbilityFn";
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";
const TableHeader = () => {
const [t] = useTranslation();
useSetPageTitle(t(`page_header.add_reseller`));
const handelSubmit = (values: any) => {
console.log(values, "values");
};
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<PageHeader
pageTitle="add_manager"
ModelAbility={ModalEnum?.MANAGER_ADD}
canAdd={false}
/>
<div>
<Formik
initialValues={getInitialValues({})}
validationSchema={getValidationSchema}
onSubmit={handelSubmit}
>
<Form className="Form_details_container">
<PersonalDetailsForm />
<TitleDetailsForm />
<AttachmentForm />
<div className="resellerButton">
<button type="button">{t("practical.cancel")}</button>
<button type="submit">
{t("practical.add")} {t("models.manager")}
</button>
</div>
</Form>
</Formik>
</div>
</Suspense>
</div>
);
};
export default TableHeader;

View File

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

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;

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;
}
}

View File

@ -0,0 +1,87 @@
import { useFormikContext } from "formik";
import { useState, useRef, useEffect } from "react";
import "./ImageBoxField.scss";
import ImageIcon from "./ImageIcon";
import ImageCancelIcon from "./ImageCancelIcon";
import { generateImagePreview } from "./generateImagePreview";
import { getNestedValue } from "../../../../../utils/getNestedValue";
import { useTranslation } from "react-i18next";
// Helper function to generate image preview from a File
const ImageBoxField = ({ name }: any) => {
const formik = useFormikContext<any>();
const value = getNestedValue(formik.values, name);
const [imagePreview, setImagePreview] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
if (value instanceof File) {
generateImagePreview(value, setImagePreview);
} else if (typeof value === "string") {
setImagePreview(value);
} else {
setImagePreview(null);
}
}, [value]);
const handleFileChange = (event: any) => {
const file = event.target.files[0];
if (file) {
generateImagePreview(file, setImagePreview);
formik.setFieldValue(name, file);
}
};
const handleButtonClick = () => {
const fileInput = fileInputRef.current;
if (fileInput) {
fileInput.click();
}
};
const handleCancel = () => {
setImagePreview("");
formik.setFieldValue(name, "");
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
};
const [t] = useTranslation();
return (
<div className="ImageBoxField">
<header>{t(`input.${name}`)}</header>
<div className="ImageHeader">
{imagePreview ? (
<>
<ImageCancelIcon
onClick={handleCancel}
className="ImageCancelIcon"
/>
<ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
</>
) : (
<div className="VisibleHidden">hidden</div>
)}
</div>
<div className="ImageBox">
{imagePreview ? (
<img src={imagePreview} alt="Preview" className="imagePreview" />
) : (
<ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
)}
</div>
<input
id={`file-input-${name}`}
type="file"
accept="image/png, image/jpeg, image/webp"
style={{ display: "none" }}
onChange={handleFileChange}
ref={fileInputRef}
/>
</div>
);
};
export default ImageBoxField;

View File

@ -0,0 +1,18 @@
import React from "react";
interface ImageCancelIconProps extends React.HTMLAttributes<HTMLDivElement> {}
const ImageCancelIcon: React.FC<ImageCancelIconProps> = (props) => {
return (
<div {...props}>
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7 5.44469L12.4447 0L14 1.55531L8.55531 7L14 12.4447L12.4436 14L6.9989 8.55531L1.55531 14L0 12.4436L5.44469 6.9989L0 1.55421L1.55531 0.00109986L7 5.44469Z"
fill="#515B73"
/>
</svg>
</div>
);
};
export default ImageCancelIcon;

View File

@ -0,0 +1,18 @@
import React from "react";
interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {}
const ImageIcon: React.FC<ImageIconProps> = (props) => {
return (
<div {...props}>
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.25 5.625C11.25 7.11684 10.6574 8.54758 9.60248 9.60248C8.54758 10.6574 7.11684 11.25 5.625 11.25C4.13316 11.25 2.70242 10.6574 1.64752 9.60248C0.592632 8.54758 0 7.11684 0 5.625C0 4.13316 0.592632 2.70242 1.64752 1.64752C2.70242 0.592632 4.13316 0 5.625 0C7.11684 0 8.54758 0.592632 9.60248 1.64752C10.6574 2.70242 11.25 4.13316 11.25 5.625ZM6.25 3.125C6.25 2.95924 6.18415 2.80027 6.06694 2.68306C5.94973 2.56585 5.79076 2.5 5.625 2.5C5.45924 2.5 5.30027 2.56585 5.18306 2.68306C5.06585 2.80027 5 2.95924 5 3.125V5H3.125C2.95924 5 2.80027 5.06585 2.68306 5.18306C2.56585 5.30027 2.5 5.45924 2.5 5.625C2.5 5.79076 2.56585 5.94973 2.68306 6.06694C2.80027 6.18415 2.95924 6.25 3.125 6.25H5V8.125C5 8.29076 5.06585 8.44973 5.18306 8.56694C5.30027 8.68415 5.45924 8.75 5.625 8.75C5.79076 8.75 5.94973 8.68415 6.06694 8.56694C6.18415 8.44973 6.25 8.29076 6.25 8.125V6.25H8.125C8.29076 6.25 8.44973 6.18415 8.56694 6.06694C8.68415 5.94973 8.75 5.79076 8.75 5.625C8.75 5.45924 8.68415 5.30027 8.56694 5.18306C8.44973 5.06585 8.29076 5 8.125 5H6.25V3.125ZM16.25 3.75H12.2413C12.1187 3.3183 11.9542 2.89964 11.75 2.5H16.25C17.2446 2.5 18.1984 2.89509 18.9017 3.59835C19.6049 4.30161 20 5.25544 20 6.25V16.25C20 17.2446 19.6049 18.1984 18.9017 18.9017C18.1984 19.6049 17.2446 20 16.25 20H6.25C5.25544 20 4.30161 19.6049 3.59835 18.9017C2.89509 18.1984 2.5 17.2446 2.5 16.25V11.75C2.89667 11.9533 3.31333 12.1171 3.75 12.2413V16.25C3.75 16.7162 3.8775 17.1525 4.1 17.525L9.93625 11.79C10.2869 11.4457 10.7586 11.2528 11.25 11.2528C11.7414 11.2528 12.2131 11.4457 12.5637 11.79L18.4012 17.525C18.6298 17.139 18.7502 16.6986 18.75 16.25V6.25C18.75 5.58696 18.4866 4.95107 18.0178 4.48223C17.5489 4.01339 16.913 3.75 16.25 3.75ZM16.25 8.125C16.25 8.37123 16.2015 8.61505 16.1073 8.84253C16.013 9.07002 15.8749 9.27672 15.7008 9.45083C15.5267 9.62494 15.32 9.76305 15.0925 9.85727C14.865 9.9515 14.6212 10 14.375 10C14.1288 10 13.885 9.9515 13.6575 9.85727C13.43 9.76305 13.2233 9.62494 13.0492 9.45083C12.8751 9.27672 12.737 9.07002 12.6427 8.84253C12.5485 8.61505 12.5 8.37123 12.5 8.125C12.5 7.62772 12.6975 7.15081 13.0492 6.79917C13.4008 6.44754 13.8777 6.25 14.375 6.25C14.8723 6.25 15.3492 6.44754 15.7008 6.79917C16.0525 7.15081 16.25 7.62772 16.25 8.125ZM15 8.125C15 7.95924 14.9342 7.80027 14.8169 7.68306C14.6997 7.56585 14.5408 7.5 14.375 7.5C14.2092 7.5 14.0503 7.56585 13.9331 7.68306C13.8158 7.80027 13.75 7.95924 13.75 8.125C13.75 8.29076 13.8158 8.44973 13.9331 8.56694C14.0503 8.68415 14.2092 8.75 14.375 8.75C14.5408 8.75 14.6997 8.68415 14.8169 8.56694C14.9342 8.44973 15 8.29076 15 8.125ZM4.985 18.4075C5.36871 18.6321 5.80538 18.7504 6.25 18.75H16.25C16.7125 18.75 17.1437 18.625 17.515 18.4075L11.6875 12.6825C11.5707 12.568 11.4136 12.5038 11.25 12.5038C11.0864 12.5038 10.9293 12.568 10.8125 12.6825L4.985 18.4075Z"
fill="#515B73"
/>
</svg>
</div>
);
};
export default ImageIcon;

View File

@ -0,0 +1,10 @@
export const generateImagePreview = (
file: File,
setImagePreview: (result: string) => void,
) => {
const reader = new FileReader();
reader.onloadend = () => {
setImagePreview(reader.result as string);
};
reader.readAsDataURL(file);
};

View File

@ -0,0 +1,76 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { FaStore } from "react-icons/fa";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { convert_data_to_select } from "../../../../Layout/app/Const";
import { userTypeOptions } from "../../../../config/userTypeOptions";
import { statusType } from "../../../../config/statusType";
const PersonalDetailsForm = () => {
const [t] = useTranslation();
return (
<div className="PersonalDetailsForm">
<header className="header_form">
<FaStore />
<h4>{t("header.personal_information")}</h4>
</header>
<main className="main_form_body">
<ValidationField
name={"id_number"}
placeholder={"_"}
label={"ID Number"}
/>
<ValidationField
name={"addition_date"}
placeholder={"_"}
type="Date"
label={"Addition Date"}
/>
<ValidationField
name={"status"}
placeholder={"_"}
label={"Status"}
type="Select"
option={statusType}
/>
<ValidationField
name={"full_name"}
placeholder={"_"}
label={"Full Name"}
/>
<ValidationField
name={"phone_number"}
placeholder={"_"}
label={"Phone Number"}
type="text"
/>
<ValidationField
name={"mobile_number"}
placeholder={"_"}
label={"Mobile Number"}
/>
<ValidationField
name={"username"}
placeholder={"_"}
label={"Username"}
/>
<ValidationField
name={"password"}
placeholder={"_"}
label={"Password"}
type="text"
/>
<ValidationField
name={"role"}
placeholder={"_"}
label={"role"}
type="text"
/>
</main>
</div>
);
};
export default PersonalDetailsForm;

View File

@ -0,0 +1,30 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { FaRegAddressBook } from "react-icons/fa";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { nationalities } from "../../../../types/App";
const TitleDetailsForm = () => {
const [t] = useTranslation();
return (
<div className="TitleDetailsForm">
<header className="header_form">
<FaRegAddressBook />
<h4>{t("header.address")}</h4>
</header>
<main className="main_form_body">
<ValidationField
name={"city_id"}
placeholder={"_"}
label={"city"}
type="Select"
option={nationalities}
/>
<ValidationField name={"address"} placeholder={"_"} label={"address"} />
</main>
</div>
);
};
export default TitleDetailsForm;

View File

@ -0,0 +1,13 @@
import * as Yup from "yup";
export const getInitialValues = (objectToEdit: Partial<any>) => {
return {
id: objectToEdit?.id ?? null,
name: objectToEdit?.name ?? null,
};
};
export const getValidationSchema = () => {
// validate input
return Yup.object().shape({});
};

View File

@ -0,0 +1,33 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../../enums/Model";
import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddManager } from "../../../../api/manager";
const AddModel: React.FC = () => {
const { mutate, status } = useAddManager();
const handleSubmit = (values: any) => {
mutate({
...values,
});
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.MANAGER_ADD}
modelTitle="managers"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues({})}
getValidationSchema={getValidationSchema}
>
<ModelForm />
</LayoutModel>
</>
);
};
export default AddModel;

View File

@ -0,0 +1,36 @@
import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../../enums/Model";
import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
import ModelForm from "./ModelForm";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import { useUpdateManager } from "../../../../api/manager";
const EditModel: React.FC = () => {
const { mutate, status } = useUpdateManager();
const { objectToEdit } = useObjectToEdit((state) => state);
const handleSubmit = (values: any) => {
const Data_to_send = { ...values };
mutate(Data_to_send);
};
return (
<>
<LayoutModel
status={status as QueryStatusEnum}
ModelEnum={ModalEnum.MANAGER_EDIT}
modelTitle="managers"
handleSubmit={handleSubmit}
getInitialValues={getInitialValues(objectToEdit)}
getValidationSchema={getValidationSchema}
isAddModal={false}
>
<ModelForm />
</LayoutModel>
</>
);
};
export default EditModel;

View File

@ -0,0 +1,26 @@
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>
</Row>
</div>
);
};
export default FilterForm;

View File

@ -0,0 +1,71 @@
import { Col, Row } from "reactstrap";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { useGetAllGrade } from "../../../../api/grade";
import { useValidationValidationParamState } from "../../../../Components/ValidationField/state/ValidationValidationParamState";
const Form = ({ isEdit = false }: { isEdit?: boolean }) => {
const { ValidationParamState } = useValidationValidationParamState();
const { GradeName, GradeCurrentPage } = ValidationParamState;
const { data: Grade, isLoading: isLoadingGrade } = useGetAllGrade({
name: GradeName,
page: GradeCurrentPage,
});
const GradeOption = Grade?.data ?? [];
const canChangeGradePage = !!Grade?.links?.next;
const GradePage = Grade?.meta?.currentPage;
const sex = [
{ name: "male", id: "male" },
{ name: "female", id: "female" },
];
return (
<Row className="w-100">
<Col>
<ValidationField
name="first_name"
placeholder="first_name"
label="first_name"
/>
<ValidationField
name="last_name"
placeholder="last_name"
label="last_name"
/>
<ValidationField
name="username"
placeholder="username"
label="username"
/>
{!isEdit && (
<ValidationField
name="password"
placeholder="password"
label="password"
/>
)}
</Col>
<Col>
<ValidationField
name="phone_number"
placeholder="contact_number1"
label="contact_number1"
/>
<ValidationField
searchBy="GradeName"
name="grade_id"
label="grade"
type="Search"
option={GradeOption}
isLoading={isLoadingGrade}
canChangePage={canChangeGradePage}
PageName={"GradeCurrentPage"}
page={GradePage}
/>
<ValidationField type="Select" name="sex" option={sex} />
</Col>
</Row>
);
};
export default Form;

View File

@ -0,0 +1,26 @@
import * as Yup from "yup";
import { Student, StudentInitialValues } from "../../../../types/Student";
export const getInitialValues = (
objectToEdit: Partial<Student>,
): StudentInitialValues => {
return {
id: objectToEdit?.user_id,
first_name: objectToEdit?.first_name ?? "",
last_name: objectToEdit?.last_name ?? "",
// address: objectToEdit?.address ?? "",
// birthday: objectToEdit?.birthday ?? "",
// city: objectToEdit?.city ?? "",
grade_id: objectToEdit?.grade_id,
// image: objectToEdit?.image ?? "",
sex: objectToEdit?.sex,
};
};
export const getValidationSchema = () => {
// validate input
return Yup.object().shape({
first_name: Yup.string().required("validation.required"),
last_name: Yup.string().required("validation.required"),
});
};

View File

@ -0,0 +1,54 @@
import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { ModalEnum } from "../../../enums/Model";
import PageHeader from "../../../Layout/Dashboard/PageHeader";
import { canAddManager } from "../../../utils/hasAbilityFn";
import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
import FilterForm from "./Model/FilterForm";
import { useDeleteManager } from "../../../api/manager";
const Table = lazy(() => import("./Table"));
const AddModalForm = lazy(() => import("./Model/AddModel"));
const EditModalForm = lazy(() => import("./Model/EditModel"));
const DeleteModalForm = lazy(
() => import("../../../Layout/Dashboard/DeleteModels"),
);
const TableHeader = () => {
const [t] = useTranslation();
const deleteMutation = useDeleteManager();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.users`)}`, path:"user"},
{name:`${t(`page_header.managers`)}`, path:"managers"},
]);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<PageHeader
pageTitle="users"
ModelAbility={ModalEnum?.MANAGER_ADD}
canAdd={canAddManager}
openModel={false}
locationToNavigate={"add"}
/>
<FilterLayout
sub_children={<FilterForm />}
filterTitle="table.managers_list"
/>
<Table />
<AddModalForm />
<EditModalForm />
<DeleteModalForm
deleteMutation={deleteMutation}
ModelEnum={ModalEnum?.MANAGER_DELETE}
/>
</Suspense>
</div>
);
};
export default TableHeader;

View File

@ -0,0 +1,27 @@
import { useColumns } from "./useTableColumns";
import React from "react";
import DataTable from "../../../Layout/Dashboard/Table/DataTable";
import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
import { useFilterStateState } from "../../../zustand/Filter";
import { useGetAllManager } from "../../../api/manager";
const App: React.FC = () => {
const { filterState } = useFilterState();
const { Filter } = useFilterStateState();
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const response = useGetAllManager({
name,
sort_by,
pagination: true,
...filterState,
});
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

View File

@ -0,0 +1,92 @@
import { TableColumnsType } from "antd";
import { Student } from "../../../types/Student";
import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from "../../../enums/Model";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import {
canDeleteManager,
canDeleteStudent,
canEditManager,
canEditStudent,
canShowManager,
canShowStudent,
} from "../../../utils/hasAbilityFn";
import ActionButtons from "../../../Components/Table/ActionButtons";
import { Manager } from "../../../types/Manager";
export const useColumns = () => {
const { handel_open_model } = useModalHandler();
const { setObjectToEdit } = useObjectToEdit((state) => state);
const navigate = useNavigate();
const handelShow = (record: Manager) => {
navigate(`${record?.user_id}`);
};
const handelDelete = (data: Manager) => {
setObjectToEdit(data);
handel_open_model(ModalEnum?.MANAGER_DELETE);
};
const handleEdit = (record: Student) => {
setObjectToEdit(record);
handel_open_model(ModalEnum?.MANAGER_EDIT);
};
const [t] = useTranslation();
const columns: TableColumnsType<Manager> = [
{
title: t("columns.id"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text, record) => record?.user_id,
},
{
title: `${t("columns.first_name")}`,
dataIndex: "first_name",
key: "first_name",
align: "center",
render: (_text, record) => record?.first_name,
},
{
title: `${t("columns.last_name")}`,
dataIndex: "last_name",
key: "last_name",
align: "center",
render: (_text, record) => record?.last_name,
},
{
title: `${t("columns.sex")}`,
dataIndex: "sex",
key: "sex",
align: "center",
render: (_text, record) => record?.sex,
},
{
title: "",
key: "actions",
align: "center",
render: (_text, record, index) => {
return (
<ActionButtons
canDelete={canDeleteManager}
canEdit={canEditManager}
canShow={canShowManager}
index={index}
onDelete={() => handelDelete(record)}
onEdit={() => handleEdit(record)}
onShow={() => handelShow(record)}
/>
);
},
},
];
return columns;
};

View File

@ -0,0 +1,13 @@
import * as Yup from "yup";
export const getInitialValues = (objectToEdit: any): any => {
return {
id: objectToEdit?.id ?? null,
name: objectToEdit?.name ?? null,
};
};
export const getValidationSchema = () => {
return Yup.object().shape({
name: Yup.string().required("validation.required"),
});
};

View File

@ -0,0 +1,43 @@
import { useTranslation } from "react-i18next";
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
import PageHeader from "../../../../Layout/Dashboard/PageHeader";
import FilterLayout from "../../../../Layout/Dashboard/FilterLayout";
import FormikForm from "../../../../Layout/Dashboard/FormikForm";
import { getInitialValues } from "./Model/formUtil";
const Table = lazy(() => import("./Table"));
const TableHeader = () => {
const [t] = useTranslation();
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.role`)}`, path:"role"},
{name:`${t(`page_header.permissions`)}`, path:"permissions"}
]);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<PageHeader
pageTitle="role"
addModal={false}
/>
<FilterLayout
sub_children={""}
filterTitle="page_header.permissions"
haveFilter={false}
/>
<FormikForm
initialValues={getInitialValues}
handleSubmit={()=>(console.log(1))}>
<Table />
</FormikForm>
</Suspense>
</div>
);
};
export default TableHeader;

View File

@ -0,0 +1,25 @@
import React from "react";
import DataTable from "../../../../Layout/Dashboard/Table/DataTable";
import { useColumns } from "./useTableColumns";
import { useFilterState } from "../../../../Components/Utils/Filter/FilterState";
import { useFilterStateState } from "../../../../zustand/Filter";
import { useGetAllRole } from "../../../../api/role";
import { useGetAllTag } from "../../../../api/tags";
const App: React.FC = () => {
const { filterState } = useFilterState();
const { Filter } = useFilterStateState();
const name = Filter?.name ;
const sort_by = Filter?.sort_by ;
const response = useGetAllTag({
pagination: true,
name,
sort_by,
...filterState,
});
return <DataTable response={response} useColumns={useColumns} />;
};
export default App;

View File

@ -0,0 +1,95 @@
import { TableColumnsType } from "antd";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import { useModalState } from "../../../../zustand/Modal";
import { useTranslation } from "react-i18next";
import { Role } from "../../../../types/App";
import { ModalEnum } from "../../../../enums/Model";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
export const useColumns = () => {
const [t] = useTranslation();
const { setIsOpen } = useModalState((state) => state);
const { setObjectToEdit } = useObjectToEdit((state) => state);
const handleEdit = (record: any) => {
setObjectToEdit(record);
setIsOpen(ModalEnum?.ROLE_EDIT);
};
const columns: TableColumnsType<Role> = [
// {
// title: <ValidationField name="empty" type="Checkbox"/>,
// dataIndex: "id",
// key: "id",
// align: "center",
// render: (_text) => {
// return (
// <ValidationField name="empty" type="Checkbox"/>
// );
// },
// },
{
title: t("columns.units"),
dataIndex: "name",
key: "name",
align: "center",
},
{
title: t("columns.add"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text) => {
return (
<ValidationField name="empty" type="Checkbox"/>
);
},
},
{
title: t("columns.read"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text) => {
return (
<ValidationField name="empty" type="Checkbox"/>
);
},
},
{
title: t("columns.edit"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text) => {
return (
<ValidationField name="empty" type="Checkbox"/>
);
},
},
{
title: t("columns.delete"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text) => {
return (
<ValidationField name="empty" type="Checkbox"/>
);
},
},
{
title: t("columns.allow_everyone"),
dataIndex: "id",
key: "id",
align: "center",
render: (_text) => {
return (
<ValidationField name="empty" type="Checkbox"/>
);
},
},
];
return columns;
};

View File

@ -6,6 +6,8 @@ import { useTranslation } from "react-i18next";
import { canDeleteRole,canEditRole } from "../../../utils/hasAbilityFn";
import ActionButtons from "../../../Components/Table/ActionButtons";
import { Role } from "../../../types/App";
import { useNavigate } from "react-router-dom";
import { ABILITIES_ENUM } from "../../../enums/abilities";
export const useColumns = () => {
const [t] = useTranslation();
@ -13,6 +15,12 @@ export const useColumns = () => {
const { setIsOpen } = useModalState((state) => state);
const { setObjectToEdit } = useObjectToEdit((state) => state);
const navigate = useNavigate();
const handelShow = (record: Role) => {
navigate(`/${record?.id}`);
};
const handelDelete = (record: any) => {
setObjectToEdit(record);
setIsOpen(ModalEnum?.ROLE_DELETE);
@ -22,6 +30,7 @@ export const useColumns = () => {
setIsOpen(ModalEnum?.ROLE_EDIT);
};
const columns: TableColumnsType<Role> = [
{
title: t("columns.id"),

View File

@ -22,13 +22,13 @@ const TableHeader = () => {
useSetPageTitle([
{name:`${t(`page_header.home`)}`, path:"/"},
{name:`${t(`page_header.student`)}`, path:"student"}
{name:`${t(`page_header.student`)}`, path:"student"},
]);
return (
<div className="TableWithHeader">
<Suspense fallback={<Spin />}>
<PageHeader
pageTitle="student"
pageTitle="users"
ModelAbility={ModalEnum?.STUDENT_ADD}
canAdd={canAddStudent}
/>

View File

@ -17,9 +17,10 @@ const TableHeader = () => {
const {student_id} = useParams<ParamsEnum>();
useSetPageTitle([
{ name: `${t(`page_header.users`)}`, path: "/" },
{ name: `${t(`page_header.home`)}`, path: "" },
{ name: `${t(`page_header.users`)}`, path: "user" },
{ name: `${t(`PageTitle.students`)}`, path: "students" },
{ name: `${t(`PageTitle.students_details`)}`, path: `reseller/${student_id}` },
{ name: `${t(`PageTitle.students_details`)}`, path: `reseller/${student_id}` , },
]);
return (

View File

@ -1,6 +1,6 @@
import { TCrudRoute, TMenuItem } from "./types/App";
import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser,FaUserShield } from "react-icons/fa";
import { CiSquareQuestion } from "react-icons/ci";
import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser, FaUserShield } from "react-icons/fa";
import { GoDotFill } from "react-icons/go";
import { GrGroup } from "react-icons/gr";
import React from "react";
@ -21,24 +21,27 @@ const EditQuestionPage = React.lazy(
() => import("./Pages/Admin/question/EditPage"),
);
const Report = React.lazy(() => import("./Pages/Admin/Report/Page"));
const Student = React.lazy(() => import("./Pages/Admin/Student/Page"));
const ShowStudent = React.lazy(() => import("./Pages/Admin/Student/show/Page"));
const Manager = React.lazy(() => import("./Pages/Admin/Manager/Page"));
const AddManager = React.lazy(() => import("./Pages/Admin/Manager/Add/Page"));
const ReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Page"));
const ShowReSeller = React.lazy(() => import("./Pages/Admin/Reseller/show/Page"));
const AddReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Add/Page"));
const EditReSeller = React.lazy(
() => import("./Pages/Admin/Reseller/Edit/Page"),
);
const EditReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Edit/Page"),);
const User = React.lazy(() => import("./Pages/Admin/User/Page"));
const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));
const QuestionBank = React.lazy(() => import("./Pages/Admin/QuestionBank/Page"));
const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/Page"));
const Profile = React.lazy(() => import("./Pages/Admin/Profile/Page"));
const Roles = React.lazy(() => import("./Pages/Admin/Roles/Page"));
const Permissions = React.lazy(() => import("./Pages/Admin/Roles/Permissions/Page"));
const Report = React.lazy(() => import("./Pages/Admin/Report/Page"));
const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));
/// RESELLER ///
const Student_Package = React.lazy(
@ -51,7 +54,6 @@ import { ParamsEnum } from "./enums/params";
import { TbCategory } from "react-icons/tb";
import { UserTypeEnum } from "./enums/UserType";
import { FaTags } from "react-icons/fa6";
import { MdGrade } from "react-icons/md";
export const menuItems: TMenuItem[] = [
{
@ -62,8 +64,8 @@ export const menuItems: TMenuItem[] = [
path: "/",
abilities: ABILITIES_ENUM?.PASS,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
type: UserTypeEnum?.PASS,
prevPath: 0,
},
{
header: "page_header.grade",
@ -75,6 +77,38 @@ export const menuItems: TMenuItem[] = [
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.user",
element: <User />,
icon: <FaUser />,
text: "sidebar.users",
path: `/${ABILITIES_ENUM?.USER}`,
abilities: ABILITIES_ENUM?.USER,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
children: [
{
header: "page_header.student",
element: <Student />,
icon: <GoDotFill className="transparent_bg" />,
text: "sidebar.student",
path: `/${ABILITIES_ENUM?.STUDENT}`,
abilities: ABILITIES_ENUM?.STUDENT,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
// {
// header: "page_header.managers",
// element: <Manager />,
// icon: <GoDotFill className="transparent_bg" />,
// text: "sidebar.managers",
// path: `/${ABILITIES_ENUM?.MANAGERS}`,
// abilities: ABILITIES_ENUM?.MANAGERS,
// abilities_value: ABILITIES_VALUES_ENUM.INDEX,
// prevPath: 0,
// },
]
},
{
header: "page_header.tags",
element: <Tags />,
@ -85,26 +119,6 @@ export const menuItems: TMenuItem[] = [
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.report",
element: <Report />,
icon: <FaPaperclip />,
text: "sidebar.report",
path: `/${ABILITIES_ENUM?.Report}`,
abilities: ABILITIES_ENUM?.Report,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.student",
element: <Student />,
icon: <GrGroup />,
text: "sidebar.student",
path: `/${ABILITIES_ENUM?.STUDENT}`,
abilities: ABILITIES_ENUM?.STUDENT,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.reSeller",
element: <ReSeller />,
@ -115,47 +129,48 @@ export const menuItems: TMenuItem[] = [
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.user",
element: <User />,
icon: <FaUser />,
text: "sidebar.user",
path: `/${ABILITIES_ENUM?.USER}`,
abilities: ABILITIES_ENUM?.USER,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.param",
element: <Param />,
icon: <FaSellcast />,
text: "sidebar.param",
path: `/${ABILITIES_ENUM?.PARAM}`,
abilities: ABILITIES_ENUM?.PARAM,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
// {
// header: "page_header.report",
// element: <Report />,
// icon: <FaPaperclip />,
// text: "sidebar.report",
// path: `/${ABILITIES_ENUM?.Report}`,
// abilities: ABILITIES_ENUM?.Report,
// abilities_value: ABILITIES_VALUES_ENUM.INDEX,
// prevPath: 0,
// },
{
header: "page_header.questionBank",
element: <QuestionBank />,
icon: <CiSquareQuestion />,
text: "sidebar.questionBank",
path: `/${ABILITIES_ENUM?.QUESTION}`,
abilities: ABILITIES_ENUM?.QUESTION,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.roles",
element: <Roles />,
icon: <FaUserShield />,
text: "sidebar.role",
path: `/${ABILITIES_ENUM?.ROLE}`,
abilities: ABILITIES_ENUM?.ROLE,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
// {
// header: "page_header.param",
// element: <Param />,
// icon: <FaSellcast />,
// text: "sidebar.param",
// path: `/${ABILITIES_ENUM?.PARAM}`,
// abilities: ABILITIES_ENUM?.PARAM,
// abilities_value: ABILITIES_VALUES_ENUM.INDEX,
// prevPath: 0,
// },
// {
// header: "page_header.questionBank",
// element: <QuestionBank />,
// icon: <CiSquareQuestion />,
// text: "sidebar.questionBank",
// path: `/${ABILITIES_ENUM?.QUESTION}`,
// abilities: ABILITIES_ENUM?.QUESTION,
// abilities_value: ABILITIES_VALUES_ENUM.INDEX,
// prevPath: 0,
// },
// {
// header: "page_header.roles",
// element: <Roles />,
// icon: <FaUserShield />,
// text: "sidebar.role",
// path: `/${ABILITIES_ENUM?.ROLE}`,
// abilities: ABILITIES_ENUM?.ROLE,
// abilities_value: ABILITIES_VALUES_ENUM.INDEX,
// prevPath: 0,
// },
/// RESELLER /////
@ -274,6 +289,22 @@ export const CrudRoute: TCrudRoute[] = [
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.permissions",
element: <Permissions />,
path: `/${ABILITIES_ENUM?.PERMISSIONS}`,
abilities: ABILITIES_ENUM?.PERMISSIONS,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
{
header: "page_header.add_manager",
element: <AddManager />,
path: `/${ABILITIES_ENUM?.MANAGERS}/add`,
abilities: ABILITIES_ENUM?.MANAGERS,
abilities_value: ABILITIES_VALUES_ENUM.INDEX,
prevPath: 0,
},
];
export const AppRoutes: Record<string, string> = Object.fromEntries(

View File

@ -68,35 +68,6 @@ svg {
}
}
}
// p {
// color: white;
// display: inline;
// }
// h6 {
// display: inline;
// margin-inline: 20px;
// height: 140px !important;
// width: 20px;
// }
// .container-not-found {
// display: flex;
// flex-direction: column;
// align-items: center;
// div {
// display: flex;
// justify-content: center;
// align-items: center;
// }
// button {
// border: none;
// outline: none;
// padding: 8px;
// border-radius: 10px;
// margin-inline: 30px;
// }
// }
}
/* Username */
@ -108,3 +79,10 @@ svg {
#password {
font-size: 1vw;
}
.DropDownIcon{
.sidebar_menu_icaon{
background: transparent !important;
color: var(--primary) !important;
}
}

View File

@ -97,8 +97,8 @@
padding-bottom: 30px;
}
.ant-select-selection-search{
color: #6A7287 !important;
display: none !important;
// color: #6A7287 !important;
// display: none !important;
}
:where(.css-dev-only-do-not-override-oad6qy).ant-select-single.ant-select-lg .ant-select-selector .ant-select-selection-search{

View File

@ -70,12 +70,12 @@
flex: 1;
gap: 0.5vw;
padding-inline: 7%;
// overflow-y: auto;
scroll-behavior: smooth;
scroll-padding: 10rem;
@include Scrollbar;
position: relative;
padding-top: 20px;
margin-block: 10px;
> p {
font-size: 18px;
margin-bottom: 5px;

View File

@ -96,3 +96,8 @@
.pointer {
cursor: pointer;
}
.transparent_bg{
background: transparent !important;
color: #fff !important;
}

31
src/api/manager.ts Normal file
View File

@ -0,0 +1,31 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/manager",
ADD: "/manager",
DELETE: "/manager",
UPDATE: "/manager",
MOVE: "/manager/moveManagers",
IMPORT: "/manager/importManagers",
};
const KEY = "manager";
export const useGetAllManager = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params);
export const useGetManager = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddManager = () => useAddMutation(KEY, API.ADD);
export const useUpdateManager = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteManager = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);
export const useMoveManager = () => useAddMutation(KEY, API.MOVE);
export const useImportManager = () => useAddMutation(KEY, API.IMPORT);

View File

@ -31,6 +31,12 @@ export enum ModalEnum {
STUDENT_DELETE = "student.delete",
STUDENT_SENDNOTIFICATION = "student.sendnotification",
////manager
MANAGER_ADD = "manager.add",
MANAGER_EDIT = "manager.edit",
MANAGER_DELETE = "manager.delete",
MANAGER_SENDNOTIFICATION = "manager.sendnotification",
////subject
SUBJECT_ADD = "subject.add",
@ -193,9 +199,15 @@ export enum ModalEnum {
Student_Package_DELETE = "Student_Package.delete",
///QuestionBank
///QuestionBank
QUESTION_BANK_ADD = "QuestionBank.add",
QUESTION_BANK_EDIT = "QuestionBank.edit",
QUESTION_BANK_DELETE = "QuestionBank.delete",
/// permission
PERMISSION_EDIT = "PERMISSION.edit",
PERMISSION_ADD = "PERMISSION.add",
PERMISSION_DELETE = "PERMISSION.delete",
QUESTION_BANK_ADD = "QuestionBank.add",
QUESTION_BANK_EDIT = "QuestionBank.edit",
QUESTION_BANK_DELETE = "QuestionBank.delete",
}

View File

@ -49,7 +49,9 @@ export enum ABILITIES_ENUM {
Student_Package = "student_package",
QUESTION_BANK = "QuestionBank",
NOTIFICATIONS = "Notifications",
PROFILE = "profile"
PROFILE = "profile",
PERMISSIONS = "permissions",
MANAGERS = "managers",
////
}

View File

@ -136,7 +136,8 @@
"password": "كلمة المرور",
"edit": "تعديل",
"change": "تغيير",
"role_list": "قائمة الأدوار"
"role_list": "قائمة الأدوار",
"managers":"مدراء"
},
"columns": {
"id": "الرقم التعريفي",
@ -212,7 +213,14 @@
"residual": "المتبقي",
"date_of_receipt": "تاريخ الاستلام",
"amount": "مبلغ",
"created_at": "تم إنشاؤه في"
"created_at": "تم إنشاؤه في",
"units":"وحدات",
"allow_everyone":"السماح للجميع",
"add":"إضافة",
"edit":"تعديل",
"delete":"حذف",
"read":"قراءة",
"managers":"مدراء"
},
"practical": {
"to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@ -345,7 +353,9 @@
"collection": "تحصيل",
"profile": "الملف الشخصي",
"role_details": "تفاصيل الأدوار",
"created_at": "تم إنشاؤه في"
"created_at": "تم إنشاؤه في",
"managers":"مدراء",
"manager":"مدير"
},
"education_class_actions": {
"Student_Records": "سجلات الطلاب",
@ -469,7 +479,9 @@
"amount_value": "قيمة المبلغ",
"email_address": "عنوان البريد الإلكتروني",
"current_password": "كلمة المرور الحالية",
"created_at": "تم إنشاؤه في"
"created_at": "تم إنشاؤه في",
"empty":"",
"role":"الدور"
},
"select": {
"enums": {
@ -800,7 +812,9 @@
"quiz": "الاختبارات",
"questionBank": "بنك الأسئلة",
"notifications": "الإشعارات",
"profile": "الملف الشخصي"
"profile": "الملف الشخصي",
"users":"المستخدمون",
"managers":"مدراء"
},
"message": {
"some_thing_went_wrong": "حدث خطأ ما",
@ -839,7 +853,10 @@
"QuestionBank": "بنك الأسئلة",
"reseller_details": "تفاصيل البائع",
"notifications": "الإشعارات",
"profile": "الملف الشخصي"
"profile": "الملف الشخصي",
"permissions":"اذونات",
"managers":"مدراء",
"add_manager":"إضافة مدير"
},
"page_header": {
"home": "لوحة القيادة",
@ -848,7 +865,7 @@
"payment": " الدفعات",
"branch": " الفروع",
"role": " الأدوار",
"student": " قائمة الطلاب ",
"student": "الطلاب",
"admin": " المسؤولون",
"student_details": "تفاصيل الطالب",
"create_student": "إنشاء طالب",
@ -881,14 +898,18 @@
"reseller_details": "تفاصيل البائع",
"notifications": "الإشعارات",
"profile": "الملف الشخصي",
"user": "مستخدم"
"user": "مستخدم",
"permissions":"اذونات",
"managers":"مدراء"
},
"table": {
"student": "قائمة الطلاب",
"reseller": "البائعين",
"grade": "قائمة الصفوف",
"subjects": "مواد الصف",
"QuestionBank": "بنك الأسئلة"
"QuestionBank": "بنك الأسئلة",
"managers":"مدراء",
"managers_list":"قائمة المدراء"
},
"alphabet": {
"A": "A",

14
src/types/Manager.ts Normal file
View File

@ -0,0 +1,14 @@
import { DateType } from "./App";
export interface Manager {
first_name: string; // The first name of the user
last_name: string; // The last name of the user
city: string | null; // The city of the user, can be null
sex: string; // The sex of the user, using a union type for possible values
image: string | null; // The URL of the user's image, can be null
address: string | null; // The address of the user, can be null
card: string | null; // The card information, can be null
birthday: DateType; // The birthday of the user, can be null
grade_id: number | string; // The ID of the user's grade
user_id: number; // The unique ID of the user
}

View File

@ -278,6 +278,26 @@ export const canMoveStudent = hasAbility(
ABILITIES_VALUES_ENUM.MOVE_STUDENTS,
);
/// Manager
export const canAddManager = hasAbility(
ABILITIES_ENUM.MANAGERS,
ABILITIES_VALUES_ENUM.STORE,
);
export const canEditManager = hasAbility(
ABILITIES_ENUM.MANAGERS,
ABILITIES_VALUES_ENUM.UPDATE,
);
export const canDeleteManager = hasAbility(
ABILITIES_ENUM.MANAGERS,
ABILITIES_VALUES_ENUM.DELETE,
);
export const canShowManager = hasAbility(
ABILITIES_ENUM.MANAGERS,
ABILITIES_VALUES_ENUM.SHOW,
);
/// EarlyDeparture
export const canAddEarlyDeparture = hasAbility(