src->pages->

CreateEditTask.js:
import React, { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import useTaskStore from "../store/taskStore";

const CreateEditTask = () => {

const { taskId } = useParams();
const tasks = useTaskStore((state) => state.tasks);
const addTask = useTaskStore((state) => state.addTask);
const updateTask = useTaskStore((state) => state.updateTask);
const navigate = useNavigate();

const task = tasks.find((task) => task.id === taskId) || {

id: "",
title: "",
description: "",
status: "pending",
priority: 1,
date: new Date().toISOString().split("T")[0],
};

const [formData, setFormData] = useState(task);

const handleSubmit = (e) => {

e.preventDefault();
if (taskId) {
updateTask(taskId, formData);
} else {
addTask({ ...formData, id: Date.now().toString() });
}
navigate("/tasks");
};

return (
<div className="create-edit-task">
<h1>{taskId ? "Edit Task" : "Create Task"}</h1>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Title" value={formData.title}
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
required />
<textarea placeholder="Description" value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
required />
<select value={formData.status} onChange={(e) =>
setFormData({ ...formData, status: e.target.value })}>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
</select>
<button type="submit">{taskId ? "Update Task" : "Create Task"}</button>
</form>
</div>
);
};

export default CreateEditTask;

Dashboard.css:
import React from "react";
import { Link } from "react-router-dom";
import useTaskStore from "../store/taskStore";

const Dashboard = () => {

 const tasks = useTaskStore((state) => state.tasks);

const totalTasks = tasks.length;

const completedTasks = tasks.filter((task) => task.status ===
"completed").length;
const pendingTasks = totalTasks - completedTasks;

return (
<div className="dashboard">
<h1 className="dashboard-title">Dashboard</h1>
<div className="stats">
<div className="stat-card">
<h3>Total Tasks</h3>
<p>{totalTasks}</p>
</div>
<div className="stat-card">
<h3>Completed Tasks</h3>
<p>{completedTasks}</p>
</div>
<div className="stat-card">
<h3>Pending Tasks</h3>
<p>{pendingTasks}</p>
</div>
</div>
<div className="quick-actions">
<Link to="/create-task" className="action-button">Create New Task</Link>
<Link to="/tasks" className="action-button">View All Tasks</Link>
</div>
</div>
);
};

export default Dashboard;

Dashboard.css:

.dashboard {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

.dashboard-title {
text-align: center;
color: #007bff;
margin-bottom: 30px;
}

.stats {
display: flex;
justify-content: space-around;
margin-bottom: 30px;
}

.stat-card {
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 30%;
}

.stat-card h3 {
 margin-bottom: 10px;
color: #333;
}

.stat-card p {
font-size: 24px;
font-weight: bold;
color: #007bff;
}

.quick-actions {
display: flex;
justify-content: center;
gap: 20px;
}

.action-button {
background: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
text-align: center;
}

.action-button:hover {
background: #0056b3;
}
ForgotPassword.js:

// src/pages/ForgotPassword.js
import React from "react";

import { useState } from "react";

import { auth } from "../firebaseConfig";
import { sendPasswordResetEmail } from "firebase/auth";
import { Link } from "react-router-dom";

const ForgotPassword = () => {

const [email, setEmail] = useState("");

const handleReset = async (e) => {

e.preventDefault();
try {
await sendPasswordResetEmail(auth, email);
alert("Password reset email sent!");
} catch (error) {
console.error("Error:", error.message);
}
};

return (
<div className="flex justify-center items-center h-screen bg-gray-100">
<div className="bg-white p-8 rounded-lg shadow-lg w-96">
<h2 className="text-2xl font-bold text-center mb-6">Reset Password</h2>
<form onSubmit={handleReset}>
<input type="email" placeholder="Enter your email" className="w-full
p-2 mb-4 border rounded" onChange={(e) => setEmail(e.target.value)} />
<button type="submit" className="w-full bg-yellow-500 text-white py-2
rounded">Send Reset Email</button>
</form>
<p className="text-center mt-4"><Link to="/login" className="text-blue-
500">Back to Login</Link></p>
</div>
 </div>
);
};

export default ForgotPassword;

Login.js:

// src/pages/Login.js
import React from "react";
import './Login.css'; // This assumes Login.css is in the same directory as
Login.js

import { useState } from "react";

import { auth } from "../firebaseConfig";
import { signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from
"firebase/auth";
import { Link, useNavigate } from "react-router-dom";

const Login = () => {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const googleProvider = new GoogleAuthProvider();

const handleLogin = async (e) => {

e.preventDefault();
try {
await signInWithEmailAndPassword(auth, email, password);
navigate("/dashboard");
} catch (error) {
console.error("Login failed:", error.message);
}
};

const handleGoogleLogin = async () => {

try {
await signInWithPopup(auth, googleProvider);
navigate("/dashboard");
} catch (error) {
console.error("Google Login failed:", error.message);
}
};

return (
<div className="flex justify-center items-center h-screen bg-gray-100">
<div className="bg-white p-8 rounded-lg shadow-lg w-96">
<h2 className="text-2xl font-bold text-center mb-6">Login</h2>
<form onSubmit={handleLogin}>
<input type="email" placeholder="Email" className="w-full p-2 mb-4
border rounded" onChange={(e) => setEmail(e.target.value)} />
<input type="password" placeholder="Password" className="w-full p-2
mb-4 border rounded" onChange={(e) => setPassword(e.target.value)} />
<button type="submit" className="w-full bg-blue-500 text-white py-2
rounded">Login</button>
</form>
<button onClick={handleGoogleLogin} className="w-full bg-red-500 text-
white py-2 rounded mt-2">Login with Google</button>
<p className="text-center mt-4">Don't have an account? <Link
to="/register" className="text-blue-500">Sign up</Link></p>
<p className="text-center mt-4">Forgot Password <Link to="/forgot-
password" className="text-blue-500">Click here to reset</Link></p>
</div>
</div>
 );
};

export default Login;

Login.css:

/* Global styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f0f8ff; /* Light blueish background */
color: #333;
}

.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.bg-gray-100 {
background-color: #92f2f4; /* Light grayish background */
}

.bg-white {
background-color: rgb(255, 255, 255);
}

.p-8 {
padding: 32px;
}

.rounded-lg {
border-radius: 8px;
}

.shadow-lg {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.w-96 {
width: 384px;
}

.text-2xl {
font-size: 1.5rem;
}

.font-bold {
font-weight: bold;
}

.text-center {
text-align: center;
}

.mb-6 {
margin-bottom: 24px;
}

.mb-4 {
 margin-bottom: 16px;
}

.mt-2 {
margin-top: 8px;
}

.mt-4 {
margin-top: 16px;
}

.w-full {
width: 100%;
}

.p-2 {
padding: 8px;
}

.border {
border: 1px solid #ccc;
}

.rounded {
border-radius: 5px;
}

.bg-blue-500 {
background-color: #007bff; /* Blue color */
}

.bg-red-500 {
background-color: #db4437; /* Google red color */
}

.text-white {
color: white;
}

.text-blue-500 {
color: #007bff; /* Blue color */
}

.py-2 {
padding-top: 8px;
padding-bottom: 8px;
}

/* Button hover effects */

button:hover {
opacity: 0.9;
}

/* Link hover effects */

a:hover {
text-decoration: underline;
}

/* Small screen responsiveness */

@media screen and (max-width: 480px) {
.w-96 {
width: 100%; /* Make form full width on smaller screens */
}
}
Register.js:

// src/pages/Register.js

import React from "react";

import { useState } from "react";

import { auth } from "../firebaseConfig";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { Link, useNavigate } from "react-router-dom";

const Register = () => {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();

const handleSignup = async (e) => {

e.preventDefault();
try {
await createUserWithEmailAndPassword(auth, email, password);
navigate("/dashboard");
} catch (error) {
console.error("Signup failed:", error.message);
}
};

return (
<div className="flex justify-center items-center h-screen bg-gray-100">
<div className="bg-white p-8 rounded-lg shadow-lg w-96">
<h2 className="text-2xl font-bold text-center mb-6">Register</h2>
<form onSubmit={handleSignup}>
<input type="email" placeholder="Email" className="w-full p-2 mb-4
border rounded" onChange={(e) => setEmail(e.target.value)} />
<input type="password" placeholder="Password" className="w-full p-2
mb-4 border rounded" onChange={(e) => setPassword(e.target.value)} />
<button type="submit" className="w-full bg-green-500 text-white py-2
rounded">Sign Up</button>
</form>
<p className="text-center mt-4">Already have an account? <Link
to="/login" className="text-blue-500">Login</Link></p>
</div>
</div>
);
};

export default Register;

TaskDetails.js:
import React from "react";
import { useParams, Link } from "react-router-dom";
import useTaskStore from "../store/taskStore";

const TaskDetails = () => {

const { taskId } = useParams();
const tasks = useTaskStore((state) => state.tasks);
const task = tasks.find((task) => task.id === taskId);

if (!task) {
return <div>Task not found!</div>;
}

return (
<div className="task-details">
 <h1>{task.title}</h1>
<p>{task.description}</p>
<p>Status: {task.status}</p>
<p>Priority: {task.priority}</p>
<p>Due Date: {task.date}</p>
<Link to="/tasks">Back to Tasks</Link>
</div>
);
};

export default TaskDetails;

TaskDetails.css:
.task-details {
padding: 20px;
max-width: 800px;
margin: 0 auto;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.task-details h1 {
color: #007bff;
margin-bottom: 20px;
}

.task-details p {
margin-bottom: 10px;
}

TaskManagement.js:

import React, { useState } from "react";

import { Link } from "react-router-dom";
import useTaskStore from "../store/taskStore";

const TaskManagement = () => {

const tasks = useTaskStore((state) => state.tasks);
const [filter, setFilter] = useState("all");
const [sort, setSort] = useState("date");
const [currentPage, setCurrentPage] = useState(1);
const tasksPerPage = 10;

const filteredTasks = tasks.filter((task) =>

filter === "all" ? true : task.status === filter
);

const sortedTasks = filteredTasks.sort((a, b) =>

sort === "date" ? new Date(b.date) - new Date(a.date) : b.priority -
a.priority
);

const indexOfLastTask = currentPage * tasksPerPage;

const indexOfFirstTask = indexOfLastTask - tasksPerPage;
const currentTasks = sortedTasks.slice(indexOfFirstTask, indexOfLastTask);

return (
<div className="task-management">
<h1>Task Management</h1>
<div className="filters">
<select onChange={(e) => setFilter(e.target.value)}>
<option value="all">All Tasks</option>
<option value="completed">Completed</option>
 <option value="pending">Pending</option>
</select>
<select onChange={(e) => setSort(e.target.value)}>
<option value="date">Sort by Date</option>
<option value="priority">Sort by Priority</option>
</select>
</div>
<div className="task-list">
{currentTasks.map((task) => (
<div key={task.id} className="task-card">
<h3>{task.title}</h3>
<p>{task.description}</p>
<p>Status: {task.status}</p>
<Link to={`/task/${task.id}`}>View Details</Link>
</div>
))}
</div>
</div>
);
};

export default TaskManagement;

TaskManagement.css:
.task-management {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

.filters {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.task-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}

.task-card {
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.task-card h3 {
margin-bottom: 10px;
color: #007bff;
}

.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}

.pagination button {
background: #007bff;
color: white;
 padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.pagination button:hover {
background: #0056b3;
}

src->
taskStore.js:

import { create } from "zustand";

const useTaskStore = create((set) => ({

tasks: [],
addTask: (task) => set((state) => ({ tasks: [...state.tasks, task] })),
updateTask: (id, updatedTask) =>
set((state) => ({
tasks: state.tasks.map((task) =>
task.id === id ? { ...task, ...updatedTask } : task
),
})),
deleteTask: (id) =>
set((state) => ({ tasks: state.tasks.filter((task) => task.id !== id) })),
}));

export default useTaskStore;

App.js:
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register";
import ForgotPassword from "./pages/ForgotPassword";
import Dashboard from "./pages/Dashboard";
import TaskManagement from "./pages/TaskManagement";
import TaskDetails from "./pages/TaskDetails";
import CreateEditTask from "./pages/CreateEditTask";

function App() {
return (
<Router>
<Routes>
{/* Authentication Pages */}
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/forgot-password" element={<ForgotPassword />} />

{/* Core Application Pages */}

<Route path="/" element={<Dashboard />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/tasks" element={<TaskManagement />} />
<Route path="/task/:taskId" element={<TaskDetails />} />
<Route path="/create-task" element={<CreateEditTask />} />
<Route path="/edit-task/:taskId" element={<CreateEditTask />} />
</Routes>
</Router>
);
}
export default App;

firebaseConfig.js:

import { initializeApp } from "firebase/app";

import { getAuth } from "firebase/auth";

const firebaseConfig = {
apiKey: "AIzaSyDwftwT10KQnj5DdBLC339djWpv-_DN-Hs",
authDomain: "task-4ecd9.firebaseapp.com",
projectId: "task-4ecd9",
storageBucket: "task-4ecd9.firebasestorage.app",
messagingSenderId: "378829543455",
appId: "1:378829543455:web:3a028a984357098b861d2a",
measurementId: "G-EWMBD85ZTD"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);