Karimaldeen/school-dashboard-exercise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formate

Browse Source
This commit is contained in:
karimalden 2024-08-07 16:37:27 +03:00
parent 0f471f4483
commit 1055417dc0
21 changed files with 5720 additions and 3293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8614
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

5
src/Components/Layout/Navbar/MenuItem.tsx
View File

@ -25,7 +25,10 @@ export const MenuItem = ({ item, location, index }: any) => {
<i>{item.icon}</i> <i>{item.icon}</i>
<Link to={item.path || "/"}>{t(item.text)}</Link> <Link to={item.path || "/"}>{t(item.text)}</Link>
{item?.children && ( {item?.children && (
<DropdownToggle isOpen={isDropdownOpen} onClick={() => handleDropdown(index)} /> <DropdownToggle
isOpen={isDropdownOpen}
onClick={() => handleDropdown(index)}
/>
)} )}
</div> </div>

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

@ -1,54 +1,58 @@
import React from 'react' import React from "react";
import { getLocalStorage } from '../../../utils/LocalStorage'; import { getLocalStorage } from "../../../utils/LocalStorage";
import { USER_KEY } from '../../../config/AppKey'; import { USER_KEY } from "../../../config/AppKey";
import { translateOptions } from '../../../utils/translatedOptions'; import { translateOptions } from "../../../utils/translatedOptions";
import { search_array } from '../../../Routes'; import { search_array } from "../../../Routes";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import SearchFieldWithSelect from '../../DataTable/SearchFieldWithSelect'; import SearchFieldWithSelect from "../../DataTable/SearchFieldWithSelect";
import { Tooltip } from 'antd'; import { Tooltip } from "antd";
import useModalHandler from '../../../utils/useModalHandler'; import useModalHandler from "../../../utils/useModalHandler";
import { ModalEnum } from '../../../enums/Model'; import { ModalEnum } from "../../../enums/Model";
import Image from '../../Ui/Image'; import Image from "../../Ui/Image";
const NavBarRightSide = () => { const NavBarRightSide = () => {
const userData = getLocalStorage(USER_KEY); const userData = getLocalStorage(USER_KEY);
const [t] = useTranslation() const [t] = useTranslation();
const translateArray = translateOptions(search_array, t); const translateArray = translateOptions(search_array, t);
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const handleEdit = () => { const handleEdit = () => {
handel_open_model(ModalEnum.CHANGE_PASSWORD); handel_open_model(ModalEnum.CHANGE_PASSWORD);
}; };
return ( return (
<article> <article>
<div className="header_search"> <div className="header_search">
<SearchFieldWithSelect <SearchFieldWithSelect
options={translateArray} options={translateArray}
placeholder={t("practical.search_here")} placeholder={t("practical.search_here")}
/> />
</div>
<span className="header_icons">
<div>
<Image src="/Icon/bell.png" alt="Notifications" />
</div> </div>
<Tooltip <span className="header_icons">
placement="top" <div>
title={<div onClick={handleEdit}>{t("header.change_your_current_password")}</div>} <Image src="/Icon/bell.png" alt="Notifications" />
color="#E0E0E0"
>
<div className="gear">
<Image src="/Icon/gear.png" alt="Settings" />
</div> </div>
</Tooltip> <Tooltip
</span> placement="top"
<div className="header_profile"> title={
<span> <div onClick={handleEdit}>
<h6>{userData?.username}</h6> {t("header.change_your_current_password")}
<p>{userData?.type}</p> </div>
}
color="#E0E0E0"
>
<div className="gear">
<Image src="/Icon/gear.png" alt="Settings" />
</div>
</Tooltip>
</span> </span>
<Image src="/Layout/DefaultStudentImage.png" alt="Profile" /> <div className="header_profile">
</div> <span>
</article> <h6>{userData?.username}</h6>
) <p>{userData?.type}</p>
} </span>
<Image src="/Layout/DefaultStudentImage.png" alt="Profile" />
</div>
</article>
);
};
export default NavBarRightSide export default NavBarRightSide;

7
src/Components/Layout/Navbar/SubMenu.tsx
View File

@ -10,7 +10,12 @@ const SubMenu: React.FC<SubMenuProps> = ({ items, location }) => {
return ( return (
<div className="sub-menu"> <div className="sub-menu">
{items.map((childItem, index) => ( {items.map((childItem, index) => (
<MenuItem key={index} item={childItem} location={location} index={index} /> <MenuItem
key={index}
item={childItem}
location={location}
index={index}
/>
))} ))}
</div> </div>
); );

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

@ -4,60 +4,60 @@ import { MdExpandLess, MdExpandMore } from "react-icons/md";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
export const MenuItem = ({ item, location, index }: any) => { export const MenuItem = ({ item, location, index }: any) => {
const isActive = location.pathname.split("/")[1] === item.path?.slice(1); const isActive = location.pathname.split("/")[1] === item.path?.slice(1);
// console.log(location.pathname.split("/")[1]); // console.log(location.pathname.split("/")[1]);
const [openDropdown, setOpenDropdown] = useState<number | null>(null); const [openDropdown, setOpenDropdown] = useState<number | null>(null);
const handleDropdown = (index: number) => { const handleDropdown = (index: number) => {
setOpenDropdown((prev) => (prev === index ? null : index)); setOpenDropdown((prev) => (prev === index ? null : index));
};
const isDropdownOpen = openDropdown === index;
const [t] = useTranslation();
const navigate = useNavigate();
return (
<>
<div
className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"} `}
onClick={() => navigate(item.path || "/")}
>
<i>{item.icon}</i>
<Link to={item.path || "/"}>{t(item.text)}</Link>
{item?.children && (
<>
{isDropdownOpen ? (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandLess />
</div>
) : (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandMore />
</div>
)}
</>
)}
</div>
{item?.children && isDropdownOpen && (
<div className="sub-menu">
{item.children.map((childItem: any, index: any) => (
<MenuItem
key={index}
item={childItem}
location={location}
index={index}
/>
))}
</div>
)}
</>
);
}; };
const isDropdownOpen = openDropdown === index;
const [t] = useTranslation();
const navigate = useNavigate();
return (
<>
<div
className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"} `}
onClick={() => navigate(item.path || "/")}
>
<i>{item.icon}</i>
<Link to={item.path || "/"}>{t(item.text)}</Link>
{item?.children && (
<>
{isDropdownOpen ? (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandLess />
</div>
) : (
<div
className="DropDownIcon"
onClick={() => handleDropdown(index)}
>
<MdExpandMore />
</div>
)}
</>
)}
</div>
{item?.children && isDropdownOpen && (
<div className="sub-menu">
{item.children.map((childItem: any, index: any) => (
<MenuItem
key={index}
item={childItem}
location={location}
index={index}
/>
))}
</div>
)}
</>
);
};

24
src/Components/Routes/RenderRouteElement.tsx
View File

@ -3,17 +3,13 @@ import SpinContainer from "../Layout/SpinContainer";
import Layout from "../../Layout/Ui/Layout"; import Layout from "../../Layout/Ui/Layout";
export const RenderRouteElement = (route: any) => ( export const RenderRouteElement = (route: any) => (
<Suspense <Suspense
fallback={ fallback={
<Layout> <Layout>
<SpinContainer /> <SpinContainer />
</Layout> </Layout>
} }
> >
{route.header ? ( {route.header ? <Layout>{route.element}</Layout> : route.element || <></>}
<Layout>{route.element}</Layout> </Suspense>
) : ( );
route.element || <></>
)}
</Suspense>
);

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

@ -5,16 +5,15 @@ import { Route } from "react-router-dom";
import { RenderRouteElement } from "./RenderRouteElement"; import { RenderRouteElement } from "./RenderRouteElement";
export const renderRoutesRecursively = (routes: TMenuItem[]) => export const renderRoutesRecursively = (routes: TMenuItem[]) =>
routes.map((route: TMenuItem) => { routes.map((route: TMenuItem) => {
const useAbility = hasAbility(route.abilities, route.abilities_value); const useAbility = hasAbility(route.abilities, route.abilities_value);
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)} />
{route.children && renderRoutesRecursively(route.children)} {route.children && renderRoutesRecursively(route.children)}
</React.Fragment> </React.Fragment>
); );
});
});

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

@ -10,17 +10,14 @@ const Layout = ({
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
}) => { }) => {
return ( return (
<ProtectedRouteProvider className="Layout">
<ProtectedRouteProvider className="Layout"> <main className={`${className} Layout_Body`}>
<main className={`${className} Layout_Body`}> <NavBar />
<NavBar /> <div className="Layout_Children">{children}</div>
<div className="Layout_Children">{children}</div> </main>
</main> <SideBar />
<SideBar /> </ProtectedRouteProvider>
</ProtectedRouteProvider>
); );
}; };

6
src/Layout/Ui/NavBar.tsx
View File

@ -17,7 +17,6 @@ const NavBar = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const PrevPath = getPrevPathRoute(location.pathname); const PrevPath = getPrevPathRoute(location.pathname);
const handelNavigate = () => { const handelNavigate = () => {
if (PrevPath === 0) { if (PrevPath === 0) {
return; return;
@ -25,14 +24,13 @@ const NavBar = () => {
navigate(deletePathSegments(location.pathname, PrevPath)); navigate(deletePathSegments(location.pathname, PrevPath));
}; };
return ( return (
<div className="NavBar"> <div className="NavBar">
<span className="navbar_link" onClick={handelNavigate}> <span className="navbar_link" onClick={handelNavigate}>
<MdOutlineArrowForwardIos /> {PageTitle} <MdOutlineArrowForwardIos /> {PageTitle}
</span> </span>
<NavBarRightSide/> <NavBarRightSide />
<Suspense fallback={<SpinContainer/>}> <Suspense fallback={<SpinContainer />}>
<ChangePasswordModel /> <ChangePasswordModel />
</Suspense> </Suspense>
</div> </div>

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

@ -10,8 +10,6 @@ import { getLocalStorage } from "../../utils/LocalStorage";
import { BRANCH_OBJECT_KEY } from "../../config/AppKey"; import { BRANCH_OBJECT_KEY } from "../../config/AppKey";
import { MenuItem } from "../../Components/Layout/SideBar/MenuItem"; import { MenuItem } from "../../Components/Layout/SideBar/MenuItem";
const SideBar = () => { const SideBar = () => {
const location = useLocation(); const location = useLocation();

17
src/ProviderContainer.tsx
View File

@ -9,17 +9,12 @@ function ProviderContainer({ children }: ChildrenType) {
return ( return (
<BrowserRouter basename="/"> <BrowserRouter basename="/">
<I18nProvider> <I18nProvider>
<QueryProvider> <QueryProvider>
<ToastProvider> <ToastProvider>
<AntdProvider> <AntdProvider>{children}</AntdProvider>
</ToastProvider>
{children} </QueryProvider>
</AntdProvider> </I18nProvider>
</ToastProvider>
</QueryProvider>
</I18nProvider>
</BrowserRouter> </BrowserRouter>
); );
} }

1
src/Styles/Pages/Division.scss
View File

@ -70,7 +70,6 @@
color: black; color: black;
} }
} }
} }
.ModelBodyForm { .ModelBodyForm {
padding: 2vw; padding: 2vw;

1
src/api/helper/useAxios.ts
View File

@ -1,4 +1,3 @@
import useAuthState from "../../zustand/AuthState"; import useAuthState from "../../zustand/AuthState";
import { BaseURL, HEADER_KEY } from "../config"; import { BaseURL, HEADER_KEY } from "../config";
import AxiosBuilder from "./AxiosBuilder"; import AxiosBuilder from "./AxiosBuilder";

11
src/enums/LocalStorageEnum.ts
View File

@ -1,7 +1,6 @@
export enum LocalStorageEnum { export enum LocalStorageEnum {
PROJECT_NAME = 'SCHOOL_DASHBOARD_EXERCISE', PROJECT_NAME = "SCHOOL_DASHBOARD_EXERCISE",
LANGUAGE_KEY = LocalStorageEnum.PROJECT_NAME + '_LANGUAGE', LANGUAGE_KEY = LocalStorageEnum.PROJECT_NAME + "_LANGUAGE",
TOKEN_KEY = LocalStorageEnum.PROJECT_NAME + '_TOKEN_KEY', TOKEN_KEY = LocalStorageEnum.PROJECT_NAME + "_TOKEN_KEY",
USER_KEY = LocalStorageEnum.PROJECT_NAME + '_USER_KEY', USER_KEY = LocalStorageEnum.PROJECT_NAME + "_USER_KEY",
} }

24
src/lib/AntdProvider.tsx
View File

@ -1,4 +1,4 @@
import { ConfigProvider } from 'antd'; import { ConfigProvider } from "antd";
function AntdProvider({ children }: { children: React.ReactNode }) { function AntdProvider({ children }: { children: React.ReactNode }) {
const primaryColor = "#3182ce"; const primaryColor = "#3182ce";
@ -6,18 +6,18 @@ function AntdProvider({ children }: { children: React.ReactNode }) {
return ( return (
<ConfigProvider <ConfigProvider
theme={{ theme={{
token: { token: {
colorPrimary: primaryColor, colorPrimary: primaryColor,
},
components: {
Table: {
headerBg: bgColor,
headerColor: primaryColor,
}, },
}, components: {
}} Table: {
> headerBg: bgColor,
headerColor: primaryColor,
},
},
}}
>
{children} {children}
</ConfigProvider> </ConfigProvider>
); );

6
src/lib/I18nProvider.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from "react";
import { I18nextProvider } from 'react-i18next'; import { I18nextProvider } from "react-i18next";
import i18n from './i18nConfig'; // Import the configured i18n instance import i18n from "./i18nConfig"; // Import the configured i18n instance
interface I18nProviderProps { interface I18nProviderProps {
children: ReactNode; children: ReactNode;

11
src/lib/ProtectedRouteProvider.tsx
View File

@ -6,7 +6,10 @@ interface ProtectedRouteProviderProps extends React.HTMLProps<HTMLDivElement> {
children: React.ReactNode; children: React.ReactNode;
} }
function ProtectedRouteProvider({ children, ...props }: ProtectedRouteProviderProps) { function ProtectedRouteProvider({
children,
...props
}: ProtectedRouteProviderProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const { isAuthenticated } = useAuthState(); const { isAuthenticated } = useAuthState();
@ -16,11 +19,7 @@ function ProtectedRouteProvider({ children, ...props }: ProtectedRouteProviderPr
} }
}, [isAuthenticated, navigate]); }, [isAuthenticated, navigate]);
return ( return <div {...props}>{children}</div>;
<div {...props}>
{children}
</div>
);
} }
export default ProtectedRouteProvider; export default ProtectedRouteProvider;

8
src/lib/i18nConfig.tsx
View File

@ -1,6 +1,6 @@
import i18n from 'i18next'; import i18n from "i18next";
import { initReactI18next } from 'react-i18next'; import { initReactI18next } from "react-i18next";
import translationAR from '../translate/ar.json'; import translationAR from "../translate/ar.json";
const resources = { const resources = {
ar: { ar: {
@ -10,7 +10,7 @@ const resources = {
i18n.use(initReactI18next).init({ i18n.use(initReactI18next).init({
resources, resources,
lng: 'ar', // Set the default language lng: "ar", // Set the default language
interpolation: { interpolation: {
escapeValue: false, escapeValue: false,
}, },