coreui · oumaimaamdouni · Sep 26, 2024 · Apr 4, 2025 · Apr 4, 2025 · Apr 25, 2025
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,16 @@
 module.exports = {
+  env: {
+    browser: true, // Enables browser global variables
+    es2021: true, // Enables ES2021 global variables
+    node: true, // Enables Node.js global variables
+    jest: true, // Enables Jest global variables
+  },
+  extends: [
+    'eslint:recommended', // Uses the recommended rules from ESLint
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    'plugin:react-hooks/recommended', // Enforces the Rules of Hooks
+  ],
   // parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   parserOptions: {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
@@ -7,17 +19,15 @@ module.exports = {
       jsx: true, // Allows for the parsing of JSX
     },
   },
+  plugins: ['react', 'react-hooks'],
   settings: {
     react: {
       version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
     },
   },
-  extends: [
-    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
-    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ],
-  plugins: ['react', 'react-hooks'],
   rules: {
+    console: 'off', // Disables the no-console rule
+    'no-unused-vars': 'warn', // Warns about unused variables
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
   },

diff --git a/index.html b/index.html
@@ -1,20 +1,13 @@
 <!DOCTYPE html>
-<!--
-* CoreUI Free React.js Admin Template
-* @version v5.2.0
-* @link https://coreui.io/product/free-react-admin-template/
-* Copyright (c) 2024 creativeLabs Łukasz Holeczek
-* Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
--->
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
+    <meta name="description" content="TakeIt">
     <meta name="author" content="Łukasz Holeczek">
     <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
-    <title>CoreUI Free React.js Admin Template</title>
+    <title>TakeIt</title>
     <link rel="manifest" href="/manifest.json">
     <link rel="shortcut icon" href="/favicon.ico">
   </head>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@coreui/coreui-free-react-admin-template",
-  "version": "5.2.0",
-  "description": "CoreUI Free React Admin Template",
+  "name": "taketit",
+  "version": "0.0.0",
+  "description": "Projet PFE 2025",
   "homepage": ".",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
@@ -14,7 +14,8 @@
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
     "build": "vite build",
-    "lint": "eslint \"src/**/*.js\"",
+    "lint": "eslint src/**/*.{js,jsx}",
+    "lint:fix": "eslint src/**/*.{js,jsx} --fix",
     "serve": "vite preview",
     "start": "vite"
   },
@@ -26,29 +27,48 @@
     "@coreui/react": "^5.4.0",
     "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "@mui/styled-engine-sc": "^7.1.0",
+    "@mui/x-date-pickers": "^8.3.1",
     "@popperjs/core": "^2.11.8",
+    "@tinymce/miniature": "^6.0.0",
+    "@tinymce/tinymce-react": "^6.1.0",
+    "@toolpad/core": "^0.15.0",
+    "axios": "^1.7.7",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.4",
     "classnames": "^2.5.1",
     "core-js": "^3.38.1",
+    "date-fns": "^4.1.0",
+    "jspdf": "^3.0.1",
+    "jspdf-autotable": "^5.0.2",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^7.5.2",
+    "react-toastify": "^11.0.5",
     "redux": "5.0.1",
-    "simplebar-react": "^3.2.6"
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^3.1.0",
+    "simplebar-react": "^3.2.6",
+    "styled-components": "^6.1.18"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
     "sass": "^1.79.3",
-    "vite": "^5.4.8"
+    "vite": "^6.2.0"
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,55 +1,66 @@
-import React, { Suspense, useEffect } from 'react'
-import { HashRouter, Route, Routes } from 'react-router-dom'
-import { useSelector } from 'react-redux'
-
-import { CSpinner, useColorModes } from '@coreui/react'
+import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { useDispatch } from 'react-redux'
 import './scss/style.scss'
+import PrivateRoute from './PrivateRute'
+import { checkAuthentication } from './actions/authActions'
+import { CSpinner } from '@coreui/react'
 
 // Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
 // Pages
 const Login = React.lazy(() => import('./views/pages/login/Login'))
-const Register = React.lazy(() => import('./views/pages/register/Register'))
-const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
-const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
-  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-  const storedTheme = useSelector((state) => state.theme)
+  const dispatch = useDispatch()
+  const [isChecking, setIsChecking] = useState(true)
 
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-    if (theme) {
-      setColorMode(theme)
+  const isFirstRender = useRef(true)
+
+  const checkAuth = useCallback(async () => {
+    try {
+      await dispatch(checkAuthentication())
+    } catch (error) {
+      console.error('Authentication check failed:', error)
+    } finally {
+      setIsChecking(false)
     }
+  }, [dispatch])
 
-    if (isColorModeSet()) {
-      return
+  useEffect(() => {
+    if (isFirstRender.current) {
+      checkAuth()
+      isFirstRender.current = false
     }
+  }, [checkAuth])
 
-    setColorMode(storedTheme)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  if (isChecking) {
+    return (
+      <div className="pt-3 text-center">
+        <CSpinner size="3rem" />
+      </div>
+    )
+  }
 
   return (
-    <HashRouter>
+    <BrowserRouter>
       <Suspense
         fallback={
           <div className="pt-3 text-center">
-            <CSpinner color="primary" variant="grow" />
+            <CSpinner size="3rem" />
           </div>
         }
       >
         <Routes>
-          <Route exact path="/login" name="Login Page" element={<Login />} />
-          <Route exact path="/register" name="Register Page" element={<Register />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route path="*" name="Home" element={<DefaultLayout />} />
+          <Route path="/login" name="Login Page" element={<Login />} />
+          <Route element={<PrivateRoute />} exact>
+            <Route path="/" element={<DefaultLayout />} />
+            <Route path="*" element={<DefaultLayout />} />
+          </Route>
         </Routes>
       </Suspense>
-    </HashRouter>
+    </BrowserRouter>
   )
 }
 

diff --git a/src/PrivateRute.js b/src/PrivateRute.js
@@ -0,0 +1,11 @@
+/* eslint-disable prettier/prettier */
+import React from 'react'
+import { Navigate, Outlet } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
+const PrivateRoute = () => {
+    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)
+    return isAuthenticated ? <Outlet /> : <Navigate to="/login" />
+}
+
+export default PrivateRoute
diff --git a/src/_nav.js b/src/_nav.js
@@ -268,43 +268,6 @@ const _nav = [
       text: 'NEW',
     },
   },
-  {
-    component: CNavTitle,
-    name: 'Extras',
-  },
-  {
-    component: CNavGroup,
-    name: 'Pages',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
-    items: [
-      {
-        component: CNavItem,
-        name: 'Login',
-        to: '/login',
-      },
-      {
-        component: CNavItem,
-        name: 'Register',
-        to: '/register',
-      },
-      {
-        component: CNavItem,
-        name: 'Error 404',
-        to: '/404',
-      },
-      {
-        component: CNavItem,
-        name: 'Error 500',
-        to: '/500',
-      },
-    ],
-  },
-  {
-    component: CNavItem,
-    name: 'Docs',
-    href: 'https://coreui.io/react/docs/templates/installation/',
-    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
-  },
 ]
 
 export default _nav
diff --git a/src/actions/appActions.js b/src/actions/appActions.js
@@ -0,0 +1,9 @@
+/* eslint-disable prettier/prettier */
+export const toggleUnfoldable = () => ({
+    type: 'TOGGLE_UNFOLDABLE',
+})
+
+export const switchThemeMode = (theme) => ({
+    type: 'CHANGE_THEME',
+    payload: theme
+})
diff --git a/src/actions/authActions.js b/src/actions/authActions.js
@@ -0,0 +1,98 @@
+import React from 'react'
+import authService from '../services/authService'
+
+export const loginRequest = () => ({
+  type: 'LOGIN_REQUEST',
+})
+
+export const loginSuccess = (user, role) => ({
+  type: 'LOGIN_SUCCESS',
+  payload: { user, role },
+})
+
+export const loginFailure = (error) => ({
+  type: 'LOGIN_FAILURE',
+  payload: error,
+})
+
+export const logoutRequest = () => ({
+  type: 'LOGOUT_REQUEST',
+})
+
+export const logoutSuccess = (user) => ({
+  type: 'LOGOUT_SUCCESS',
+  payload: user,
+})
+
+export const logoutFailure = (error) => ({
+  type: 'LOGOUT_FAILURE',
+  payload: error,
+})
+
+export const login = (username, password) => (dispatch) => {
+  dispatch(loginRequest())
+  return authService
+    .login(username, password)
+    .then((response) => {
+      if (response.error) {
+        dispatch(loginFailure(response.error))
+        throw new Error(response.error)
+      } else {
+        const user = response.user
+        if (user.IsEmployee && user.IsManager === false) {
+          dispatch(loginSuccess(response, 'employee'))
+        }
+        if (user.IsManager && user.IsEmployee === false) {
+          dispatch(loginSuccess(response, 'manager'))
+        }
+        return response
+      }
+    })
+    .catch((error) => {
+      dispatch(loginFailure(error))
+      throw new Error(error)
+    })
+}
+
+export const logout = () => async (dispatch) => {
+  dispatch(logoutRequest())
+  try {
+    const user = await authService.logout()
+    dispatch(logoutSuccess(user))
+  } catch (error) {
+    dispatch(logoutFailure(error))
+    console.error('Error logging out:', error)
+  }
+}
+
+export const checkAuthRequest = () => ({
+  type: 'AUTH_CHECK_REQUEST',
+})
+
+export const checkAuthSuccess = (data) => ({
+  type: 'AUTH_CHECK_SUCCESS',
+  payload: data,
+})
+
+export const checkAuthFailure = () => ({
+  type: 'AUTH_CHECK_FAILURE',
+})
+
+export const checkAuthentication = () => (dispatch) => {
+  dispatch(checkAuthRequest())
+  return authService
+    .checkAuth()
+    .then((response) => {
+      if (response.data.error) {
+        dispatch(checkAuthFailure())
+        throw new Error(response.error)
+      } else {
+        dispatch(checkAuthSuccess(response.data))
+        return response
+      }
+    })
+    .catch((error) => {
+      dispatch(checkAuthFailure())
+      throw new Error(error)
+    })
+}