Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for HRMS Application

## APPLICATION OVERVIEW
This project involves creating a web application for a Human Resource Management System (HRMS) that integrates with an ESSL biometric attendance machine. The application will streamline attendance tracking, employee management, and reporting functionalities, providing a centralized platform for HR tasks.

## CORE FEATURES
1. **Employee Management**: Manage employee profiles, including personal information, job details, and attendance records.
2. **Attendance Tracking**: Integrate with the ESSL biometric attendance machine to automatically log employee attendance and generate reports.
3. **Leave Management**: Allow employees to apply for leave, and enable HR to approve or reject requests with notifications.
4. **Reporting Dashboard**: Provide visual analytics and reports on attendance, leaves, and employee performance.
5. **User Authentication**: Secure login and registration system for both HR and employees with role-based access control.
6. **Notifications & Alerts**: Send notifications for important events such as leave approvals, reminders, and updates.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: A clean, responsive layout with a sidebar for navigation, a main content area for dashboards and forms, and cards for displaying key information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing application state if necessary)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript. Install necessary dependencies including Tailwind CSS, Redux, and shadcn/ui.
2. **Design the UI Layout**: Create a responsive layout with a sidebar for navigation and a main content area. Use Tailwind CSS for styling.
3. **Implement Authentication**: Set up user authentication with role-based access control using JWT tokens.
4. **Integrate Biometric Attendance**: Develop the integration with the ESSL biometric attendance machine to pull attendance data.
5. **Build Core Features**: 
   - Develop the employee management module with CRUD functionalities.
   - Create the attendance tracking feature to display attendance records.
   - Implement leave management with forms for application and approval processes.
   - Build the reporting dashboard using charts and tables.
6. **Set Up Notifications**: Utilize a notification system to alert users of important updates and reminders.
7. **Test the Application**: Perform thorough testing to ensure all features function correctly and are user-friendly.

## USER EXPERIENCE
Users will interact with a clean interface that allows for easy navigation through the sidebar. Employees can view their attendance records, apply for leave, and receive notifications. HR personnel can manage employee profiles, track attendance, and generate reports through an intuitive dashboard, ensuring a seamless experience across all functionalities. The application will be responsive, ensuring optimal usability on both desktop and mobile devices.

This comprehensive prompt will guide the development of a fully functional HRMS application that aligns with the user's vision while maintaining a minimalist and user-friendly design.