Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
The Human Resource Management System (HRMS) is a web application designed to digitize and streamline core HR operations such as employee onboarding, profile management, attendance tracking, leave management, and payroll visibility. The application serves both HR officers and employees, facilitating efficient management of employee records and workflows.

## CORE FEATURES
- **Secure Authentication**: Users can sign up and sign in using their employee ID, email, and password with role-based access for Admins and Employees.
- **Employee Dashboard**: A personalized dashboard for employees displaying quick access cards for profile, attendance, leave requests, and logout, along with recent activity alerts.
- **Admin Dashboard**: A comprehensive dashboard for HR officers that includes employee lists, attendance records, and leave approval functionalities.
- **Profile Management**: Employees can view and edit limited profile information, while Admins have full access to manage all employee details.
- **Attendance Tracking**: Daily and weekly attendance views with options for employees to check-in/check-out and status types (present, absent, half-day, leave).
- **Leave Management**: Employees can apply for leave, while Admins can review, approve or reject leave requests with immediate updates reflecting in employee records.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space and a minimal color palette to enhance focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a modern aesthetic.
- **Layout**: The main layout consists of a top navigation bar for easy access to different sections, with a sidebar for Admins to switch between employee views. The dashboard will display cards in a grid format for quick access to features.
- **Typography**: Use a clean sans-serif font such as 'Roboto' for body text and 'Montserrat' for headings to maintain a modern and readable hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust application structure and type safety.
- **Styling**: Tailwind CSS for rapid UI development and responsive design.
- **UI Components**: Utilize shadcn/ui components for a consistent and accessible user interface.
- **State Management**: Use React Context API or Redux for managing application state as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Authentication Module**: Implement secure authentication with email verification and role-based access control.
3. **Dashboard Development**: Create the Employee and Admin dashboards with respective features and quick-access cards.
4. **Profile Management**: Develop the profile management component allowing users to view and edit details based on their roles.
5. **Attendance Module**: Implement attendance tracking features with check-in/check-out functionality and different status types.
6. **Leave Management**: Create the leave management system allowing employees to apply for leave and Admins to manage requests.
7. **Payroll View**: Develop the payroll visibility feature for employees and Admins to manage payroll details.
8. **Testing**: Conduct thorough testing to ensure all functionalities work seamlessly across devices.

## USER EXPERIENCE
Users will experience a straightforward and intuitive interface, allowing employees to easily manage their profiles, attendance, and leave requests through a streamlined dashboard. Admins will benefit from a comprehensive view of employee data and workflows, enabling quick decision-making. The responsive design ensures usability across various devices, enhancing overall user satisfaction.
```