Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Attendance Management System (AMS) is a web application designed specifically for teachers to efficiently record and manage student attendance for each class period. The application simplifies the attendance process by allowing teachers to select class details and mark students as present or absent with minimal effort.

## CORE FEATURES
1. **User Authentication**: Secure login functionality for teachers using username and password, ensuring that only authorized personnel can access attendance features.
2. **Teacher Dashboard**: A streamlined dashboard that provides easy access to key functionalities such as taking attendance, viewing previous attendance records, and logging out.
3. **Class & Period Selection**: An intuitive interface for teachers to select branch, year, section, subject, and period, ensuring accurate attendance marking.
4. **Student List Display**: A dynamic list of students that reflects the selected class details, displaying each student’s roll number and name, with options for marking attendance.
5. **Attendance Marking & Submission**: A straightforward process for marking each student as Present or Absent, with validation checks to ensure all selections are made before submission.
6. **Viewing Attendance Records**: A feature allowing teachers to retrieve and view previously submitted attendance records based on date, subject, and period.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a limited color palette, and a strong emphasis on typography for clarity.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal readability.
- **Layout**: A single-page application layout with a top navigation bar for dashboard access and a main content area displaying forms and data. Sections are clearly separated with generous padding and margin for ease of use.
- **Typography**: Use a sans-serif font such as Inter or Roboto for body text, with larger, bolder headings to create a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-driven architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid UI development and consistent design.
- **UI Components**: Utilize shadcn/ui for reusable UI components that align with the overall design aesthetic.
- **State Management**: Use React's built-in state management or consider Context API for sharing state across components if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Build Authentication Module**: Create the login component to handle user authentication, ensuring secure access.
3. **Develop Teacher Dashboard**: Implement the dashboard view, including links to take attendance and view previous records.
4. **Create Class Selection Interface**: Develop the form for class and period selection, integrating dropdowns for branches, years, sections, subjects, and date.
5. **Student List Display**: Build the student list component, dynamically rendering based on class selections and including attendance options.
6. **Implement Attendance Marking**: Develop the functionality for marking attendance and the submission process, including validation rules.
7. **Build Attendance Viewing Feature**: Create a component that allows teachers to filter and view past attendance records.
8. **Test and Optimize**: Conduct thorough testing for user experience, performance, and security, making necessary adjustments.

## USER EXPERIENCE
Teachers will log in to the system and be greeted by a clean dashboard that displays their available options. Upon selecting the appropriate class details, they will see a list of students with clear attendance options. The interface allows easy toggling between Present and Absent statuses, streamlining the attendance marking process. After submitting attendance, teachers will receive immediate confirmation, enhancing the overall user experience. The design ensures that all interactions are intuitive and require minimal effort, catering to the needs of busy educators.