How to Build a Attendance App with Lovable

1Create an attendance tracking schema in Supabase.
2
3Tables:
4- departments: id, name, standard_start_time (time, e.g. '09:00:00'), standard_end_time (time), grace_period_minutes (int default 15), created_at
5- employees: id, user_id (references auth.users, unique), first_name, last_name, email, department_id (references departments), role ('employee' | 'manager' | 'admin'), employment_type ('full_time' | 'part_time' | 'contractor'), is_active (bool default true), created_at
6- attendance: id, employee_id (references employees), clock_in (timestamptz), clock_out (timestamptz, nullable), is_late (bool default false), late_by_minutes (int, nullable), notes (text), created_at
7
8Add a UNIQUE constraint on attendance using: CREATE UNIQUE INDEX idx_attendance_employee_day ON attendance(employee_id, date(clock_in AT TIME ZONE 'UTC')).
9
10Create a Postgres trigger function flag_late_arrival() that fires AFTER INSERT on attendance:
111. Fetch the employee's department standard_start_time and grace_period_minutes
122. Compare the time portion of NEW.clock_in (in local time) with standard_start_time + grace_period_minutes
133. If clock_in time exceeds the grace cutoff, UPDATE attendance SET is_late = true, late_by_minutes = (difference in minutes) WHERE id = NEW.id
14
15RLS:
16- employees: users can SELECT their own row. Managers can SELECT employees in their department. Admins can SELECT/INSERT/UPDATE/DELETE all.
17- attendance: employees can SELECT their own rows and INSERT their own (employee_id must match their employees row). Managers can SELECT their department. Admins full access.
18- departments: authenticated users SELECT, admin INSERT/UPDATE/DELETE.

1Build a clock in/out page at src/pages/Attendance.tsx.
2
3Requirements:
4- Fetch today's attendance record for the current user's employee row on mount
5- If no record exists (not clocked in yet):
6  - Show a large 'Clock In' Button (full width, primary variant) with a Clock icon
7  - Show the current time updating live with setInterval every second
8  - Show the employee's department name and standard start time
9  - Clicking 'Clock In' INSERTs into attendance with clock_in = new Date().toISOString() and the employee_id
10  - Handle the unique constraint error gracefully: if insert fails with 'unique' error, show 'You already clocked in today'
11- If record exists and clock_out is null (clocked in, not out):
12  - Show a green 'Clocked In' Badge with the clock-in time
13  - Show a running timer since clock-in
14  - Show an is_late Badge if applicable (red 'Late - X minutes')
15  - Show a large 'Clock Out' Button (outline variant)
16  - Clicking 'Clock Out' UPDATEs the attendance row with clock_out = now()
17- If record exists and clock_out is set (completed for today):
18  - Show a summary Card: clocked in at X, clocked out at Y, hours worked Z
19  - Show a green check with 'Attendance recorded for today'
20- Add a notes Input below the buttons (optional, saves on clock-out)

1Build a monthly attendance calendar at src/components/AttendanceCalendar.tsx.
2
3Requirements:
4- Accept props: attendanceByDate (Record<string, { status: 'present' | 'late' | 'absent' | 'weekend' }>) where key is 'YYYY-MM-DD'
5- Use the shadcn/ui Calendar component with components={{ DayContent }} override
6- Custom DayContent renders the day number plus a small colored dot below it:
7  - present (on-time): green dot
8  - late: amber dot
9  - absent (workday with no record): red dot
10  - weekend: no dot
11- On month change, fetch attendance for the new month from Supabase and rebuild the attendanceByDate map
12- On a standalone page src/pages/CalendarView.tsx:
13  - Employee view: show their own calendar
14  - Manager view: add an employee Select dropdown to switch between team members
15  - Show a legend below the calendar (colored dots with labels)
16  - Show summary stats for the visible month: Present X, Late X, Absent X days

1Build an admin attendance page at src/pages/AttendanceAdmin.tsx.
2
3Requirements:
4- DataTable using TanStack Table with columns: Employee Name, Department, Date, Clock In, Clock Out, Hours Worked (calculated), Status Badge (On Time=green, Late=amber, Absent=red, No Clock Out=gray), Late By (minutes, only for late records)
5- Filter bar above table:
6  - Employee multi-select (list from employees table)
7  - Department Select
8  - Status multi-select (On Time, Late, Absent)
9  - Date range Popover with two Calendar pickers (from/to)
10  - Clear Filters Button
11- Pagination (25 rows per page)
12- 'Export CSV' Button that downloads filtered results as a CSV file. Include all visible columns. Filename: 'attendance-{from}-{to}.csv'
13- For absent days: these are not rows in the attendance table. Generate them by finding all work days (Mon-Fri) in the date range where no attendance record exists for each active employee.
14- Protect this page: only manager and admin roles can access it. Redirect others to /attendance.

1Add a department analytics section to the admin dashboard at src/pages/AdminDashboard.tsx.
2
3Requirements:
4- Date range selector (this week / this month / last 30 days / custom)
5- Recharts GroupedBarChart with one group of bars per department:
6  - Bar 1: On-time arrivals count (green)
7  - Bar 2: Late arrivals count (amber)
8  - Bar 3: Absent days count (red)
9  - X-axis: department names
10  - Y-axis: count of occurrences
11  - Tooltip showing exact counts and percentages
12- Below the chart, a DataTable ranking departments by on-time percentage: Department, Total Days, On Time %, Late %, Absent %
13- Four stat Cards above the chart: Total Employees Active, Average Attendance Rate (%), Late Rate (%), Most Punctual Department
14- Add a second chart: LineChart showing overall attendance rate (present+late / total expected) per week for the last 12 weeks