Bright. — Task Management Calendar

A role-based task management application with an interactive calendar interface. HR managers can assign, edit, and delete tasks for employees, while employees can self-assign tasks and mark them as completed.

---

Features

Role-Based Access

• HR Manager — Assign tasks to any employee, edit/delete tasks, view tasks per employee
• Employee — Self-assign tasks, mark tasks as completed via checkbox

Calendar

• Interactive calendar powered by Ant Design
• Click any future date to create a task
• Tasks displayed as color-coded chips inside calendar cells
• Past dates are disabled

Task Color Coding

Color	Meaning
🟢 Green	Self-assigned by employee
🔵 Blue	Assigned by HR
⚪ Grey + strikethrough	Completed
🔴 Red	Overdue (deadline has passed)

Task Management

• Each task includes: task name, assigned date, deadline (date + time), status, and assigned by
• HR can edit task title and deadline
• HR can delete tasks with confirmation prompt
• Employees can toggle task completion via checkbox
• Duplicate task detection prevents creating identical tasks on the same date

Upcoming Tasks Sidebar

• Displays all tasks (lifetime) for the selected user
• Color-coded left border matching calendar chip colors
• Overdue tasks highlighted in red with an "Overdue" tag
• Completed tasks shown with grey styling and strikethrough text
• "Today" tag on tasks assigned for the current date
• Sticky sidebar that stays visible while scrolling

---

Tech Stack

Layer	Technology
Framework	TanStack Start (React, SPA mode)
Router	TanStack Router (file-based)
UI Library	Ant Design v6
Styling	Tailwind CSS v4
HTTP Client	Axios
Backend	JSON Server
Build Tool	Vite v7
Language	TypeScript

---

Getting Started

Prerequisites

• Node.js v18+
• npm

Installation

git clone <repo-url>
cd tanstack-todo-calendar
npm install

Running the App

1. Start the JSON Server backend (port 3333):

npx json-server db.json --port 3333

2. Start the dev server (port 3000) in a separate terminal:

npm run dev

3. Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm run preview

Run Tests

npm test

---

Project Structure

src/
├── components/
│   └── calender.tsx            # Calendar with color-coded task rendering
├── routes/
│   ├── __root.tsx              # Root HTML layout
│   ├── index.tsx               # Auth redirect logic
│   └── _pages/
│       ├── $userId.tsx         # Dashboard — calendar, sidebar, task modals
│       ├── signin.tsx          # Sign in page
│       └── signup.tsx          # Sign up page
├── router.tsx                  # TanStack Router configuration
└── styles.css                  # Tailwind + calendar style overrides
db.json                         # JSON Server database (users + tasks)

---

Data Model

User

Field	Type	Description
id	string	Unique ID
name	string	Display name
username	string	Login username
password	string	Login password
role	"hr" | "employee"	Determines permissions

Task

Field	Type	Description
id	string	Auto-generated by JSON Server
task	string	Task title / description
assignedTo	string	Employee user ID
assignedBy	string	User ID of who created the task
status	"pending" | "completed"	Task completion status
assignedDate	string	Date task was assigned (YYYY-MM-DD)
deadline	string	Deadline with time (YYYY-MM-DD HH:mm)

---

Default Accounts

Role	Username	Password
HR	hr_himanshu	2003
Employee	honours	123
Employee	nitin	123
Employee	kajal	123

---

Workflow

As HR

1. Sign in with HR credentials
2. Select an employee from the dropdown
3. Click a date on the calendar to assign a task
4. Fill in the task title and deadline (date + time)
5. Edit or delete existing tasks using the icons in the sidebar

As Employee

1. Sign in with employee credentials
2. Click a date on the calendar to self-assign a task
3. Check the checkbox on a task in the sidebar to mark it as completed
4. Completed tasks appear greyed out with strikethrough