25 |
26 |
27 | }/>
36 | }/>
37 | }/>
38 | }/>
39 | }/>
40 | }/>
42 | {/* }/> */}
43 | }/>
44 | {/* }/> */}
45 | }/>
46 |
47 |
48 |
49 |
50 | );
51 | }
52 |
53 | export default App;
54 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render(
12 |
27 |
109 | );
110 | }
111 |
112 | export default About;
113 |
--------------------------------------------------------------------------------
/src/components/AdminDashboard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Admindashboard.css';
3 | import { Link } from 'react-router-dom';
4 |
5 | const Dashboard = () => {
6 | return (
7 |
31 | );
32 | };
33 |
34 | export default Dashboard;
35 |
--------------------------------------------------------------------------------
/src/components/Admindashboard.css:
--------------------------------------------------------------------------------
1 | /* Dashboard.css */
2 |
3 | .dashboard {
4 | background-color: #333; /* Background color for the sidebar */
5 | color: #fff; /* Text color */
6 | width: 250px; /* Width of the sidebar */
7 | height: 100%; /* Full height of the sidebar */
8 | position: fixed; /* Fixed position to keep the sidebar visible */
9 | top: 0;
10 | left: 0;
11 | padding: 20px;
12 | }
13 |
14 | .dashboard h1 {
15 | font-size: 24px;
16 | margin-bottom: 20px;
17 | }
18 |
19 | .nav-links2 {
20 | margin-top: 40px;
21 | list-style-type: none;
22 | padding: 0;
23 | display: flex;
24 | flex-direction: column;
25 | }
26 |
27 | .nav-links2 li {
28 | margin-bottom: 10px;
29 | }
30 |
31 | .nav-links2 a {
32 | text-decoration: none;
33 | color: #fff;
34 | font-weight: bold;
35 | font-size: 16px;
36 | }
37 |
38 | .nav-links2 a:hover {
39 | text-decoration: underline;
40 | }
41 |
42 |
43 | .content {
44 | margin-left: 250px;
45 | padding: 20px;
46 | background-color: #f4f4f4;}
47 |
--------------------------------------------------------------------------------
/src/components/Dashboardtasks/ActionTypes.js:
--------------------------------------------------------------------------------
1 | // Action types for adding, editing, and deleting tasks
2 | // ActionTypes.js
3 | export const ADD_TASK = 'ADD_TASK';
4 |
5 | export const EDIT_TASK = 'EDIT_TASK';
6 | export const DELETE_TASK = 'DELETE_TASK';
--------------------------------------------------------------------------------
/src/components/Dashboardtasks/TaskAssign.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | function TaskAssign() {
4 | const [tasks, setTasks] = useState([]);
5 | const [taskName, setTaskName] = useState('');
6 | const [assignee, setAssignee] = useState('');
7 | const [comments, setComments] = useState([]);
8 | const [newComment, setNewComment] = useState('');
9 |
10 | const handleTaskNameChange = (event) => {
11 | setTaskName(event.target.value);
12 | };
13 |
14 | const handleAssigneeChange = (event) => {
15 | setAssignee(event.target.value);
16 | };
17 |
18 | const handleNewCommentChange = (event) => {
19 | setNewComment(event.target.value);
20 | };
21 |
22 | const handleTaskCreation = () => {
23 | if (taskName.trim() === '' || assignee.trim() === '') {
24 | alert('Please enter both task name and assignee.');
25 | return;
26 | }
27 |
28 | // Create a new task object
29 | const newTask = {
30 | id: Date.now(), // Generate a unique ID (you might use a library for this)
31 | name: taskName,
32 | assignee: assignee,
33 | comments: comments,
34 | };
35 |
36 | // Add the new task to the tasks array
37 | setTasks([...tasks, newTask]);
38 |
39 | // Clear the input fields
40 | setTaskName('');
41 | setAssignee('');
42 | setComments([]);
43 | };
44 |
45 | const handleAddComment = () => {
46 | if (newComment.trim() === '') {
47 | return;
48 | }
49 |
50 | // Add the new comment to the comments array
51 | setComments([...comments, newComment]);
52 |
53 | // Clear the input field
54 | setNewComment('');
55 | };
56 |
57 | return (
58 |
28 |
29 | {/* 
*/}
30 |
41 |
42 |
43 |
69 |
70 |
71 |
106 |
107 |
108 |
31 |
33 |
40 | About Our Time and Task Management Software
32 |33 |
34 | Welcome to the future of productivity and organization. Our time and task management software is designed to help you streamline your work, stay focused, and achieve your goals with ease.
35 |
36 |
37 |
38 |
44 |
68 | Key Features
45 |
46 |
67 |
47 |
50 | Effortless Task Management
48 |Create, organize, and prioritize tasks with a few clicks.
49 |
51 |
54 | Time Tracking
52 |Monitor how you spend your time to identify areas for improvement.
53 |
55 |
58 | Goal Setting
56 |Set and track your goals, and celebrate your achievements.
57 |
59 |
62 | Collaboration
60 |Collaborate with team members and share tasks seamlessly.
61 |
63 |
66 | Intuitive Interface
64 |User-friendly design for a hassle-free experience.
65 |
59 |
102 | );
103 | }
104 |
105 | export default TaskAssign;
106 |
--------------------------------------------------------------------------------
/src/components/Dashboardtasks/Taskcalendar.css:
--------------------------------------------------------------------------------
1 | .react-calendar {
2 | width: 600px;
3 | height: 200px;
4 | max-width: 100%;
5 | background-color: #fff;
6 | color: #222;
7 | border-radius: 8px;
8 | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
9 | font-family: Arial, Helvetica, sans-serif;
10 | /* line-height: 1.125em; */
11 | }
12 | .react-calendar__navigation button {
13 | color: #6f48eb;
14 | min-width: 44px;
15 | background: none;
16 | font-size: 16px;
17 | margin-top: 8px;
18 | }
19 | .react-calendar__navigation button:enabled:hover,
20 | .react-calendar__navigation button:enabled:focus {
21 | background-color: #f8f8fa;
22 | }
23 | .react-calendar__navigation button[disabled] {
24 | background-color: #f0f0f0;
25 | }
26 | abbr[title] {
27 | text-decoration: none;
28 | }
29 | /* .react-calendar__month-view__days__day--weekend {
30 | color: #d10000;
31 | } */
32 | .react-calendar__tile:enabled:hover,
33 | .react-calendar__tile:enabled:focus {
34 | background: #f8f8fa;
35 | color: #6f48eb;
36 | border-radius: 6px;
37 | }
38 | .react-calendar__tile--now {
39 | background: #6f48eb33;
40 | border-radius: 6px;
41 | font-weight: bold;
42 | color: #6f48eb;
43 | }
44 | .react-calendar__tile--now:enabled:hover,
45 | .react-calendar__tile--now:enabled:focus {
46 | background: #6f48eb33;
47 | border-radius: 6px;
48 | font-weight: bold;
49 | color: #6f48eb;
50 | margin-left: 20%;
51 | }
52 | .react-calendar__tile--hasActive:enabled:hover,
53 | .react-calendar__tile--hasActive:enabled:focus {
54 | background: #f8f8fa;
55 | }
56 | .react-calendar__tile--active {
57 | background: #6f48eb;
58 | border-radius: 6px;
59 | font-weight: bold;
60 | color: white;
61 | }
62 | .react-calendar__tile--active:enabled:hover,
63 | .react-calendar__tile--active:enabled:focus {
64 | background: #6f48eb;
65 | color: white;
66 | }
67 | .react-calendar--selectRange .react-calendar__tile--hover {
68 | background-color: #f8f8fa;
69 | }
70 | .react-calendar__tile--range {
71 | background: #f8f8fa;
72 | color: #6f48eb;
73 | border-radius: 3;
74 | }
75 |
76 | .calendar-container{
77 | padding-left: 600px;
78 | margin-top: 100px;
79 | height: 200px;
80 | }
81 | .text-center{
82 | margin-top: 100px;
83 | font-size: larger;
84 | margin-left: 300px;
85 | }
86 | .text-center1{
87 | margin-left: 780px;
88 | margin-top: 100px;
89 | }
--------------------------------------------------------------------------------
/src/components/Dashboardtasks/Taskcalendar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Calendar from 'react-calendar';
3 | import './Taskcalendar.css'; // Uncomment this line to include the default CSS
4 | import { Link } from 'react-router-dom';
5 |
6 |
7 | function CalendarView() {
8 | const [date, setDate] = useState(new Date());
9 |
10 | return (
11 | Task Assignment and Collaboration
60 |
61 |
62 |
67 |
68 |
69 |
70 |
75 |
76 |
77 |
78 | {/* Display the list of created tasks */}
79 |
80 |
101 | Task List:
81 |-
82 | {tasks.map((task) => (
83 |
-
84 | {task.name} - Assignee: {task.assignee}
85 |
-
86 | {task.comments.map((comment, index) => (
87 |
- {comment} 88 | ))} 89 |
98 | ))}
99 |
12 |
26 |
37 | );
38 | }
39 |
40 | export default CalendarView;
41 |
--------------------------------------------------------------------------------
/src/components/Dashboardtasks/Taskcreate.css:
--------------------------------------------------------------------------------
1 | /* TaskCard.css */
2 | .createtask{
3 | margin-left: 250px;
4 | margin-top: 20px;
5 | text-align: center;
6 | padding: 20px;
7 |
8 | }
9 | .tasktitle{
10 | margin-top: 20px;
11 | /* margin-bottom: 30px;
12 | margin-left: 200px; */
13 | }
14 | .card-container {
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 | min-height: 100vh;
19 | }
20 |
21 | .card {
22 | background-color: white;
23 | padding: 20px;
24 | border-radius: 5px;
25 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
26 | width: 300px;
27 | text-align: center;
28 | }
29 |
30 | .tasktitle,
31 | .taskdescription {
32 | width: 100%;
33 | padding: 10px;
34 | margin-bottom: 10px;
35 | border: 1px solid #ccc;
36 | border-radius: 3px;
37 | font-size: 16px;
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/Dashboardtasks/Taskcreate.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { addTask } from './actions';
4 | import { Link } from 'react-router-dom';
5 | import './Taskcreate.css';
6 |
7 | import Swal from 'sweetalert2';
8 |
9 | const CreateTask = () => {
10 | const [task, setTask] = useState({ title: '', description: '', date: '', priority: '' });
11 | const dispatch = useDispatch();
12 |
13 | const handleSubmit = () => {
14 |
15 | dispatch(addTask({ id: Date.now(), ...task }));
16 |
17 | setTask({ title: '', description: '', date: '', priority: '' });
18 | Swal.fire({
19 | icon: 'success',
20 | title: 'Task Created Successfully',
21 | showConfirmButton: false,
22 | timer: 1500,
23 | });
24 | };
25 |
26 | return (
27 |
27 |
36 | React Calendar
28 |
29 |
31 | 32 | Selected Date:{' '} 33 | {date.toDateString()} 34 |
35 |
28 |
48 |
49 |
50 | setTask({ ...task, title: e.target.value })}
56 | />
57 |
58 |
58 |