🌊 Dayflow - Human Resource Management System

A modern, fully functional HRMS (Human Resource Management System) frontend built with Next.js, TypeScript, and Tailwind CSS.

✨ Features

🔐 Authentication

• Admin/HR Sign Up - Create company account with logo upload
• Role-based Sign In - Separate login flows for Admin/HR and Employees
• Auto-generated Login IDs - Format: [CompanyCode][Initials][Year][Serial]

📊 Dashboard (Admin/HR)

• Employee cards grid with real-time status indicators
• Status Icons:
  • 🟢 Green dot - Present in office
  • ✈️ Airplane icon - On approved leave
  • 🟡 Yellow dot - Absent

👤 Employee Profile

• Resume Tab - Job title, department, employment details (editable)
• Private Info Tab - Personal, address, emergency contact, bank details (editable)
• Salary Info Tab - Comprehensive salary breakdown with calculations
• Security Tab - Password management

⏰ Attendance Management

• Employee View:
  • Check-in/Check-out functionality
  • Monthly attendance calendar
  • Work hours tracking
• Admin View:
  • All employees attendance overview
  • Date navigation
  • Status filtering

🏖️ Time-Off Management

• Employee View:
  • Request time off (Paid/Sick/Unpaid)
  • View request history and status
  • Leave balance display
• Admin View:
  • Approve/Reject requests
  • View all pending requests
  • Filter by status

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/Hitarth2510/DayFlow.git

# Navigate to project directory
cd DayFlow

# Install dependencies
npm install

# Start development server
npm run dev

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

Demo Login

Option 1: Sign Up as Admin

1. Go to /auth/signup
2. Create a company account
3. Mock employees will be auto-generated

Option 2: Use Demo Mode

1. Go to /auth/signin
2. Select role and user from dropdown
3. Default password: Pass@123

🏗️ Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── auth/              # Authentication pages
│   ├── dashboard/         # Admin dashboard
│   ├── employees/[id]/    # Employee detail view
│   ├── profile/           # User profile
│   ├── attendance/        # Attendance management
│   └── time-off/          # Time-off requests
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── layout/            # Header, DashboardLayout
│   ├── profile/           # Profile tab components
│   ├── attendance/        # Attendance components
│   ├── time-off/          # Time-off components
│   └── employees/         # Employee card component
├── context/
│   ├── auth-context.tsx   # Authentication state
│   └── data-context.tsx   # App data management
├── lib/
│   ├── mock-data.ts       # Mock data generators
│   └── utils.ts           # Utility functions
└── types/
    └── index.ts           # TypeScript type definitions

🛠️ Tech Stack

Technology	Purpose
Next.js 16	React framework with App Router
TypeScript	Type-safe JavaScript
Tailwind CSS v4	Utility-first CSS framework
shadcn/ui	Accessible UI components
Lucide React	Icon library
React Context	State management
localStorage	Data persistence (demo)

📱 Pages & Routes

Route	Description	Access
/	Landing/redirect	Public
/auth/signin	Sign in page	Public
/auth/signup	Admin sign up	Public
/dashboard	Employee cards grid	Admin/HR
/employees/[id]	Employee details	Admin/HR
/profile	My profile	All users
/attendance	Attendance management	All users
/time-off	Time-off requests	All users

🎨 UI Components Used

• Avatar, Badge, Button, Calendar
• Card, Dialog, Dropdown Menu
• Input, Label, Popover, Select
• Separator, Table, Tabs, Textarea

📄 License

This project is open source and available under the MIT License.

👥 Contributors

• Built with ❤️ for modern HR management

---

Note: This is a frontend demo with mock data. For production use, integrate with a backend API.