HJ-HRMS  

A modern, scalable Human Resource Management System (HRMS) starter built with React, TypeScript, and Vite. HJ-HRMS provides a robust foundation for HR workflows, featuring authentication, protected routes, and a clean modular architecture. Perfect for organizations or developers looking to rapidly build and extend HR solutions.

🚀 Overview

HJ-HRMS is designed to streamline HR processes by providing a foundation that is easy to understand, extend, and maintain. The current version demonstrates a secure login/logout flow, protected dashboard, and a structure ready for advanced HRMS modules like employee management, attendance, payroll, and more.

✨ Features

• 🔒 Authentication: Secure login (mocked for demo)
• 🛡️ Protected Routes: Only authenticated users can access the dashboard
• 🧩 Component-based Architecture: Highly reusable and maintainable
• 🌐 Modern Routing: Powered by React Router v7
• 🎨 Tailwind CSS: Rapid UI development
• 🧰 Developer Friendly: Storybook, linting, and formatting included

🛠️ Tech Stack

• React 19
• TypeScript
• Vite
• React Router v7
• Redux Toolkit (included for state management)
• Tailwind CSS
• Radix UI

📦 Getting Started

Prerequisites

• Node.js v22.14.0+
• pnpm (recommended)

Installation

pnpm install

Running the App

pnpm run dev

Visit: http://localhost:5173

Linting & Formatting

pnpm run lint

Storybook (UI Development)

pnpm run storybook

🗂️ Project Structure

/ (root)
├── public/                # Static assets
├── src/
│   ├── components/        # Reusable UI components
│   ├── pages/             # Page components (Login, Dashboard)
│   ├── routes/            # Route definitions and protection logic
│   ├── styles/            # Tailwind and global styles
│   └── main.tsx           # Entry point
├── package.json           # Project metadata and scripts
└── README.md              # Project documentation

🔄 Application Flow

graph TD;
    A[User visits /login] --> B{Valid credentials?};
    B -- Yes --> C[Set isAuthenticated in localStorage];
    C --> D[Redirect to /dashboard];
    B -- No --> E[Show error alert];
    D --> F{Access /dashboard};
    F -- Authenticated --> G[Show Dashboard];
    F -- Not Authenticated --> H[Redirect to /login];
    G --> I[User clicks Logout];
    I --> J[Clear isAuthenticated, Redirect to /login];

Step-by-step:

1. Login: User lands on /login. Enter admin/admin to log in.
2. Authentication: On success, isAuthenticated is set in localStorage.
3. Protected Dashboard: Only accessible if authenticated. Otherwise, user is redirected to /login.
4. Logout: Clicking 'Logout' removes authentication and returns user to login.

🧩 Extending the Project

• Integrate real authentication (API, OAuth, etc.)
• Add employee management, leave, payroll modules
• Implement role-based access control
• Persist sessions securely (cookies, JWT, etc.)
• Add notifications, reporting, and analytics
• Write unit and integration tests

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Create a new Pull Request

For major changes, please open an issue first to discuss what you would like to change.

❓ FAQ

Q: Can I use this as a template for my own HRMS?
A: Absolutely! Fork and customize as needed.

Q: How do I add new pages or modules?
A: Add them to src/pages/ and update src/routes/ accordingly.

Q: How do I enable real authentication?
A: Replace the mock logic in Login.tsx with API calls and secure session handling.

📬 Contact

For questions, suggestions, or support, please open an issue or contact the maintainer at [[email protected]].

📝 License

This project is licensed under the MIT License.