├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
└── vite.svg
├── src
├── App.css
├── App.jsx
├── assets
│ └── react.svg
├── components
│ ├── Auth
│ │ └── Login.jsx
│ ├── Dashboard
│ │ ├── AdminDashboard.jsx
│ │ └── EmployeeDashboard.jsx
│ ├── TaskList
│ │ ├── AcceptTask.jsx
│ │ ├── CompleteTask.jsx
│ │ ├── FailedTask.jsx
│ │ ├── NewTask.jsx
│ │ └── TaskList.jsx
│ └── other
│ │ ├── AllTask.jsx
│ │ ├── CreateTask.jsx
│ │ ├── Header.jsx
│ │ └── TaskListNumbers.jsx
├── context
│ └── AuthProvider.jsx
├── index.css
├── main.jsx
└── utils
│ └── localStorage.jsx
├── tailwind.config.js
└── vite.config.js
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | 'react-refresh/only-export-components': [
17 | 'warn',
18 | { allowConstantExport: true },
19 | ],
20 | },
21 | }
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ems",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0"
15 | },
16 | "devDependencies": {
17 | "@types/react": "^18.2.66",
18 | "@types/react-dom": "^18.2.22",
19 | "@vitejs/plugin-react": "^4.2.1",
20 | "autoprefixer": "^10.4.20",
21 | "eslint": "^8.57.0",
22 | "eslint-plugin-react": "^7.34.1",
23 | "eslint-plugin-react-hooks": "^4.6.0",
24 | "eslint-plugin-react-refresh": "^0.4.6",
25 | "postcss": "^8.4.47",
26 | "tailwindcss": "^3.4.13",
27 | "vite": "^5.2.0"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react'
2 | import Login from './components/Auth/Login'
3 | import EmployeeDashboard from './components/Dashboard/EmployeeDashboard'
4 | import AdminDashboard from './components/Dashboard/AdminDashboard'
5 | import { AuthContext } from './context/AuthProvider'
6 |
7 | const App = () => {
8 |
9 | const [user, setUser] = useState(null)
10 | const [loggedInUserData, setLoggedInUserData] = useState(null)
11 | const [userData,SetUserData] = useContext(AuthContext)
12 |
13 | useEffect(()=>{
14 | const loggedInUser = localStorage.getItem('loggedInUser')
15 |
16 | if(loggedInUser){
17 | const userData = JSON.parse(loggedInUser)
18 | setUser(userData.role)
19 | setLoggedInUserData(userData.data)
20 | }
21 |
22 | },[])
23 |
24 |
25 | const handleLogin = (email, password) => {
26 | if (email == 'admin@me.com' && password == '123') {
27 | setUser('admin')
28 | localStorage.setItem('loggedInUser', JSON.stringify({ role: 'admin' }))
29 | } else if (userData) {
30 | const employee = userData.find((e) => email == e.email && e.password == password)
31 | if (employee) {
32 | setUser('employee')
33 | setLoggedInUserData(employee)
34 | localStorage.setItem('loggedInUser', JSON.stringify({ role: 'employee',data:employee }))
35 | }
36 | }
37 | else {
38 | alert("Invalid Credentials")
39 | }
40 | }
41 |
42 |
43 |
44 | return (
45 | <>
46 | {!user ? : ''}
47 | {user == 'admin' ? : (user == 'employee' ? : null) }
48 |
49 | )
50 | }
51 |
52 | export default App
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Auth/Login.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | const Login = ({handleLogin}) => {
4 |
5 |
6 |
7 | const [email, setEmail] = useState('')
8 | const [password, setPassword] = useState('')
9 |
10 |
11 | const submitHandler = (e)=>{
12 | e.preventDefault()
13 | handleLogin(email,password)
14 | setEmail("")
15 | setPassword("")
16 | }
17 |
18 |
19 | return (
20 |
47 | )
48 | }
49 |
50 | export default Login
--------------------------------------------------------------------------------
/src/components/Dashboard/AdminDashboard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Header from '../other/Header'
3 | import CreateTask from '../other/CreateTask'
4 | import AllTask from '../other/AllTask'
5 |
6 | const AdminDashboard = (props) => {
7 | return (
8 |
13 | )
14 | }
15 |
16 | export default AdminDashboard
--------------------------------------------------------------------------------
/src/components/Dashboard/EmployeeDashboard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Header from '../other/Header'
3 | import TaskListNumbers from '../other/TaskListNumbers'
4 | import TaskList from '../TaskList/TaskList'
5 |
6 | const EmployeeDashboard = (props) => {
7 |
8 | return (
9 |
10 |
11 |
15 | )
16 | }
17 |
18 | export default EmployeeDashboard
--------------------------------------------------------------------------------
/src/components/TaskList/AcceptTask.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const AcceptTask = ({data}) => {
4 | console.log();
5 | return (
6 |
7 |
8 |
{data.category}
9 | {data.taskDate}
10 |
11 |
{data.taskTitle}
12 |
13 | {data.taskDescription}
14 |
15 |
16 |
17 |
18 |
19 |
6 |
7 |
{data.category}
8 | {data.taskDate}
9 |
10 |
{data.taskTitle}
11 |
12 | {data.taskDescription}
13 |
14 |
15 |
16 |
17 |
6 |
7 |
{data.category}
8 | {data.taskDate}
9 |
10 |
{data.taskTitle}
11 |
12 | {data.taskDescription}
13 |
14 |
15 |
16 |
17 |
6 |
7 |
{data.category}
8 | {data.taskDate}
9 |
10 |
{data.taskTitle}
11 |
12 | {data.taskDescription}
13 |
14 |
15 |
16 |
17 |
10 | {data.tasks.map((elem, idx) => {
11 | if (elem.active) {
12 | return
13 | }
14 | if (elem.newTask) {
15 | return
16 | }
17 | if (elem.completed) {
18 | return
19 | }
20 | if (elem.failed) {
21 | return
22 | }
23 |
24 | })}
25 |
11 |
12 |
Employee Name
13 | New Task
14 | Active Task
15 | Completed
16 | Failed
17 |
18 |
19 | {userData.map(function(elem,idx){
20 | return
21 |
{elem.firstName}
22 | {elem.taskCounts.newTask}
23 | {elem.taskCounts.active}
24 | {elem.taskCounts.completed}
25 | {elem.taskCounts.failed}
26 |
27 | })}
28 |
29 |
30 |
31 |
23 |
Hello
username 👋
24 |
25 |
26 | )
27 | }
28 |
29 | export default Header
--------------------------------------------------------------------------------
/src/components/other/TaskListNumbers.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const TaskListNumbers = ({data}) => {
4 | return (
5 |
6 |
7 |
8 |
{data.taskCounts.newTask}
9 | New Task
10 |
11 |
12 |
{data.taskCounts.completed}
13 | Completed Task
14 |
15 |
16 |
{data.taskCounts.active}
17 | Accepted Task
18 |
19 |
20 |
{data.taskCounts.failed}
21 | Failed Task
22 |
23 |
21 |
22 | {children}
23 |
24 |