Design a complete Attendance Management App UI for React Native with three dashboards: Student, Class Teacher, and HoD.
General Theme: Clean and minimalistic. Use soft white background with navy blue (#003366) and teal (#008080) as accent colors. Light shadows for card elevation. Poppins font family throughout the app. Mobile-first responsive design.
Login Screen:
Title at the top: 'Welcome to Attendance Manager'.
Two inputs: Username, Password.
'Login' button (rounded).
Role selection dropdown (Student, Class Teacher, HoD).
Small educational illustration or logo above the form.
Student Dashboard:
Header greeting (e.g., "Good Morning, Alex!").
Section 1: Circular animated progress showing overall monthly attendance.
Section 2: Weekly attendance shown using small bar charts.
Section 3: Subject-wise attendance listed in cards with subject name, attendance %, progress bar (color changes based on %).
Section 4: Labs vs Lectures toggle and pie chart representation.
Low Attendance Warning card (if < 75%).
Class Teacher Dashboard:
Dropdown to select batch (Batch A, Batch B, etc.).
Cards showing Batch Attendance %, Defaulters Count, Top Performer.
Student-wise attendance table with Name, Roll No, Attendance %, Defaulter status badge (green/yellow/red).
'Mark Attendance' and 'View Reports' buttons at the bottom.
HoD Dashboard:
Class dropdown selection.
Cards for each class: Average attendance, critical alerts.
Department-wide Pie Chart for overall attendance health.
Class-wise table view with Class Name, Strength, Attendance %.
Export buttons for PDF/Excel reports.
Extra UI Features:
Smooth card hover effects.
Sticky headers for tables.
Animated pie charts and progress bars.
Empty states with illustration if no data.
Mobile navigation tab bar with icons for Dashboard, Reports, Profile.
Make everything modular and clean React Native components, grouped screen-wise.
I'll create a complete Attendance Management App UI with three dashboards using React Native and Expo. The design will follow the clean, minimalistic theme with navy blue and teal accents as specified.
#008080)#003366) and teal (#008080)The app is built with React Native and Expo, making it cross-platform compatible. The modular component structure allows for easy maintenance and future enhancements.
give preview
I'll provide a preview of the Attendance Management App UI for React Native. This app includes three dashboards (Student, Class Teacher, and HoD) with a clean, minimalistic design using navy blue and teal accent colors.
The login screen features:
The student dashboard includes:
The teacher dashboard features:
Summary cards showing:
Student attendance table with:
The HoD dashboard includes:
Summary cards for selected class:
All screens feature a bottom tab navigation bar with Dashboard, Reports, and Profile options. The UI uses the Poppins font family throughout, with light shadows for card elevation and a responsive design.
Would you like me to explain any specific part of the UI in more detail?
An error occurred during deployment. Please fix:
Failed to compile.
> Build failed because of webpack errors
error: script "build" exited with code 1
Error: Command "bun run build" exited with 1