-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
716123c
commit ef7db05
Showing
1 changed file
with
126 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
--- | ||
title: A Complete Human Resources (HR) App Built with Refine | ||
description: The Refine HR App showcases how to build efficient, enterprise-grade HR management solutions using Refine.js and modern technologies. | ||
slug: human-resources-application | ||
authors: necati | ||
tags: [react] | ||
image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/social.png | ||
hide_table_of_contents: false | ||
--- | ||
|
||
## Introduction | ||
|
||
This article introduces the HR app, a powerful example of how modern technologies can simplify and streamline HR processes. Designed to meet enterprise-level needs, the app showcases how quickly and efficiently complex applications can be built using Refine. | ||
|
||
While not a standalone product, this template serves as both a learning resource and an inspiration for creating your own HR solutions. The HR app enables businesses to manage employee data, track expenses, and maintain an organizational directory with ease, offering tailored features for both employees and managers. | ||
|
||
👉 [Live Demo](https://hr.refine.dev/overview) | ||
|
||
**Note**: The source code for this template is exclusively available to Refine enterprise users. However, you can still explore Refine’s capabilities through our [other complete app examples](https://refine.dev/templates/) and documentation to build similar functionality for your projects. | ||
|
||
## Key Features of the HR App | ||
|
||
### Login and User Selection | ||
|
||
The Login and User Selection feature ensures secure access and tailored experiences for different roles: | ||
|
||
- **Employees**: Access tools like leave balances, time-off requests, and polls. | ||
- **Managers**: Access dashboards with expense approvals, asset management, and employee oversight. | ||
|
||
![Login](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/login.png) | ||
|
||
This role-based approach organizes the app and improve user productivity. | ||
|
||
### Overview Dashboard | ||
|
||
The Overview Dashboard provides a snapshot of essential HR data, including: | ||
|
||
- **Leave Balances**: Displays annual, sick, and casual leave usage. | ||
- **Awaiting Requests**: Highlights pending approvals for expenses and time off. | ||
- **Polls**: Employees can vote on workplace policies. | ||
- **Time Offs**: View upcoming and current time-off entries. | ||
- **Celebrations**: Displays anniversaries and welcomes for new hires. | ||
|
||
![Manager](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/overview-manager.png) | ||
![Employee](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/overview-employee.png) | ||
|
||
### Time-Off Request Management | ||
|
||
Employees can submit time-off requests with notes and dates. Managers can assign or review leave requests, ensuring accurate tracking. | ||
|
||
![Employee](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/employee-timeoff.png) | ||
![Manager](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/manager-timeoff.png) | ||
|
||
### Polls | ||
|
||
Managers create and manage polls, collecting feedback on benefits and policies. Poll results are displayed in real-time, allowing informed decision-making. | ||
|
||
![Polls](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/pools.png) | ||
|
||
### Settings for Manager Role | ||
|
||
Managers can customize various HR aspects: | ||
|
||
- **Expense Types**: Define categories like Travel, Meals, and Training. | ||
- **Policy Customization**: Configure time-off policies, assets, and custom fields. | ||
|
||
![Settings](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/settings.gif) | ||
|
||
### Calendar | ||
|
||
The monthly calendar view tracks employee leaves, helping managers balance workloads effectively. | ||
|
||
![Calendar](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/calendar.png) | ||
|
||
### Organizational Directory | ||
|
||
A visual org chart displays the company’s structure with features like: | ||
|
||
- **Edit Employee**: Update department or title. | ||
- **Add Department**: Create new departments with clear hierarchies. | ||
|
||
![Org Chart](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/organizational.gif) | ||
|
||
### Expense Management | ||
|
||
- **Employees**: Submit expenses with details and attachments. | ||
- **Managers**: Assign and review expenses, ensuring financial accuracy. | ||
|
||
![Employee](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/expense%20employee.png) | ||
![Manager](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/expense-manager.png) | ||
|
||
### Asset Management | ||
|
||
Track company assets like laptops and monitors, ensuring accountability and proper usage. Due dates ensure timely returns. | ||
|
||
![Assets](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/assets-employee.png) | ||
|
||
### Employee Directory | ||
|
||
![Employee](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/employee.gif) | ||
|
||
A searchable employee list helps managers quickly access contact details and manage records. New employees can be added with comprehensive details. | ||
|
||
## Technologies Used in RefineHR App | ||
|
||
Built with Refine.js, leveraging Vite for fast development and optimized builds. | ||
|
||
- **UI Framework**: Material UI provides a consistent, professional interface. | ||
- **Data Provider**: NestJS-CRUD enables efficient data management. | ||
- **Auth Provider**: Custom Authentication ensures secure, role-based access. | ||
|
||
## Suitable for Internal HR Tool-Oriented Needs | ||
|
||
This HR app template can be adapted for various use cases, including: | ||
|
||
- Recruitment and Applicant Tracking Systems | ||
- Employee Engagement Platforms | ||
- Workforce Planning and Time Tracking | ||
- Compliance Management Systems | ||
- Payroll Management Tools | ||
- HR Analytics and Reporting | ||
- Training and Development Management | ||
|
||
## Conclusion | ||
|
||
The HR app template simplifies HR management by offering robust tools for employee data, expense tracking, and organizational oversight. It is customizable to meet specific business needs, streamlining HR processes for enhanced efficiency and productivity. |