HRMS - Human Resource Management System

A comprehensive mobile application built with React Native and Expo, paired with a Node.js backend, for managing employee-related tasks including leave requests, reimbursements, daily reports, attendance tracking, and more.

Overview

The HRMS (Human Resource Management System) is a full-stack solution designed to streamline HR operations for organizations. The frontend is a React Native mobile app providing an intuitive interface for employees and admins, while the backend is a robust Node.js API handling data management, authentication, and real-time notifications.

Features

Core Features

• User Authentication: Separate login screens for employees and admins with JWT-based security
• Employee Dashboard: Centralized hub displaying attendance summary, recent leaves, reimbursements, and quick actions
• Attendance Tracking: Check-in/check-out functionality with time tracking and location services
• Leave Management: Request, view, and manage leave applications with approval status tracking
• Reimbursement Tracking: Submit and track expense reimbursements with status updates
• Daily Reports: Log and view daily work reports with customizable forms
• Settings: Customize app preferences, profile information, and security settings
• Admin Panel: Employee management, analytics, user management, and system oversight
• Notifications: Real-time notifications using Socket.IO for approvals and updates
• Responsive Design: Optimized UI using NativeWind (TailwindCSS for React Native)

Additional Features

• Offline Support: Basic offline data synchronization capabilities
• Multi-language Support: Framework ready for internationalization
• Biometric Authentication: Support for fingerprint/face ID login
• Push Notifications: Integration ready for real-time updates
• Advanced Reporting: Analytics and reporting for admins

Tech Stack

Frontend (Mobile App)

• Framework: React Native (v0.81.5)
• Platform: Expo (~v54.0.25)
• Language: TypeScript (~v5.9.2)
• Styling: NativeWind (v4.2.1) with TailwindCSS (v3.4.18)
• Navigation: React Navigation v7 (Native Stack & Bottom Tabs)
• Icons: Lucide React Native (v0.555.0)
• State Management: React Hooks
• Animations: React Native Reanimated (~v3.17.4)
• Safe Area: React Native Safe Area Context (~v5.6.0)
• HTTP Client: Axios (v1.13.2)
• Location Services: Expo Location (v19.0.8)

Backend (API Server)

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Real-time Communication: Socket.IO
• Authentication: JSON Web Tokens (JWT)
• Validation: Joi
• Security: Helmet, CORS, bcrypt for password hashing
• Email: Nodemailer
• Logging: Winston
• Rate Limiting: express-rate-limit

Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (version 18 or higher)
• npm or yarn
• Expo CLI (npm install -g @expo/cli)
• Android Studio (for Android development) or Xcode (for iOS development)
• MongoDB (local or cloud instance)

Installation

Frontend Setup

1. Clone the repository:

   git clone <repository-url>
   cd hrms

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Run on your preferred platform:

   • For Android: npm run android
   • For iOS: npm run ios
   • For Web: npm run web

Backend Setup

1. Navigate to the backend directory:

   cd Backend

2. Install dependencies:

   npm install

3. Create a .env file in the Backend root directory and add the following environment variables:

   PORT=3000
   MONGODB_URI=mongodb://localhost:27017/hrms
   JWT_SECRET=your_jwt_secret_key_here
   EMAIL_USER=your_email@example.com
   EMAIL_PASS=your_email_password_or_app_password

4. Start the server:

   node index.js

Usage

Mobile App Usage

1. Launch the app on your device or emulator
2. Navigate through the splash screen and get started screen
3. Choose between Admin or Employee login
4. Access various features through the bottom tab navigation:
   • Leave: View leave balance, history, and submit new leave applications
   • Reimburse: View and track reimbursement requests
   • Dashboard: Overview of attendance, recent activities, and quick check-in/out
   • Daily Report: Submit and view daily work reports
   • Settings: Manage profile, security settings, and app preferences

Admin Features

• Employee Management: Add, edit, and manage employee records
• Analytics: View employee analytics and system reports
• User Management: Manage user roles and permissions Approval Workflows: Approve/reject leave requests and reimbursements

Backend Integration

The HRMS system includes a robust Node.js backend for data management and API services. The backend handles authentication, database operations, and real-time notifications. For detailed backend setup, API endpoints, and configuration, refer to Backend/Readme.md.

Project Structure

hrms/
├── assets/                          # Static assets (icons, images)
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash-icon.png
├── src/
│   ├── components/                  # Reusable UI components
│   │   ├── AddEmployee.tsx          # Form for adding new employees
│   │   ├── AddLeave.tsx             # Form for submitting leave requests
│   │   ├── AddReimbursement.tsx     # Form for reimbursement submissions
│   │   ├── AttendanceCheckIn.tsx    # Check-in/check-out component
│   │   ├── LeaveBalance.tsx         # Displays leave balance information
│   │   ├── LeaveHistory.tsx         # Shows leave application history
│   │   ├── NewLeaveApplication.tsx  # Form for submitting new leave requests
│   │   ├── ProfileInformation.tsx   # User profile management component
│   │   ├── ReportForm.tsx           # Form for daily report submission
│   │   └── SecurityAndPolicy.tsx    # Security settings and policies
│   ├── navigation/                  # Navigation configurations
│   │   ├── AdminBottomTabNavigator.tsx # Admin bottom tab navigation
│   │   ├── AppNavigator.tsx         # Main stack navigator (auth flow)
│   │   └── BottomTabNavigator.tsx   # Employee bottom tab navigator
│   └── screens/                     # App screens
│       ├── AdminDashboardScreen.tsx # Admin main dashboard
│       ├── AdminEmployeeAnalyticsScreen.tsx # Employee analytics view
│       ├── AdminEmployeeManagementScreen.tsx # Employee management interface
│       ├── AdminForgotPasswordScreen.tsx # Admin password recovery
│       ├── AdminLoginScreen.tsx     # Admin authentication
│       ├── AdminSettings.tsx        # Admin settings
│       ├── DailyReportScreen.tsx    # Daily report submission
│       ├── EmployeeDashboardScreen.tsx # Employee main dashboard
│       ├── EmployeeDetailsScreen.tsx # Employee profile details
│       ├── EmployeeLoginScreen.tsx  # Employee authentication
│       ├── GetStartedScreen.tsx     # Onboarding screen
│       ├── HomeScreen.tsx           # Home screen
│       ├── LeaveScreen.tsx          # Leave management interface
│       ├── ReimburseDetailsScreen.tsx # Reimbursement details view
│       ├── ReimburseScreen.tsx      # Reimbursement tracking
│       ├── SecuritySettingScreen.tsx # Security settings
│       ├── SettingsScreen.tsx       # General settings
│       ├── SplashScreen.tsx         # Splash screen
│       └── UserManagementScreen.tsx # User management
├── Backend/
│   ├── config/
│   │   └── db.js              # Database connection
│   ├── controllers/           # Route controllers
│   ├── middleware/
│   │   └── auth.middleware.js # Authentication middleware
│   ├── models/                # Mongoose models
│   ├── routes/                # API routes
│   ├── services/              # Business logic services
│   ├── index.js               # Main application file
│   ├── package.json
│   └── Readme.md
├── .gitignore
├── app.json
├── App.tsx
├── babel.config.js
├── global.css
├── index.ts
├── metro.config.js
├── nativewind-env.d.ts
├── output.css
├── package-lock.json
├── package.json
├── README.md
├── tailwind.config.js
├── TaskList.md
├── TODO.md
├── tsconfig.json