How to Build a HR Management System with Lovable

1Create an HR management system with Supabase. Set up these tables:
2
3- departments: id, org_id, name, manager_id (references employees.id, nullable), created_at
4- positions: id, org_id, department_id, title, level (junior|mid|senior|lead|manager|director|executive), created_at
5- employees: id, org_id, user_id (references auth.users, nullable), first_name, last_name, email, phone, department_id, position_id, manager_id (self-referencing FK to employees.id), hire_date, employment_type (full_time|part_time|contractor), status (active|on_leave|terminated), avatar_url, created_at
6- leave_requests: id, employee_id, type (annual|sick|maternity|paternity|unpaid|other), start_date, end_date, days_count (computed), reason, status (pending|approved|rejected|cancelled), reviewed_by (references employees.id), review_note, created_at, updated_at
7- attendance: id, employee_id, date, check_in_at, check_out_at, work_hours (computed), status (present|absent|late|half_day), notes, created_at
8- employee_documents: id, employee_id, name, type (contract|id|certificate|other), storage_path, uploaded_by, created_at
9
10RLS policies:
11- Employee tier: employees.SELECT WHERE user_id = auth.uid(), leave_requests.SELECT WHERE employee_id = (SELECT id FROM employees WHERE user_id = auth.uid()), attendance.SELECT WHERE employee_id = same
12- Manager tier: employees.SELECT WHERE department_id IN (SELECT department_id FROM employees WHERE user_id = auth.uid()), same scope for leave_requests and attendance
13- HR tier: full SELECT/INSERT/UPDATE/DELETE on all tables WHERE org_id matches
14- Implement role detection via a profiles table: id, user_id, org_id, hr_role (employee|manager|hr_admin)

1Build the main HR app layout with a Tabs navigation at src/pages/HR.tsx.
2
3Tabs structure:
4- Directory: employee directory
5- Leave: leave requests management
6- Attendance: attendance tracking
7- Documents: document storage
8- Analytics: charts and reports
9
10For the Directory tab:
11- Fetch employees with joins on departments and positions
12- Render as a shadcn/ui DataTable (TanStack Table v8)
13- Columns: Avatar + full name (clickable), position title, department name, employment type Badge (full_time=blue, part_time=yellow, contractor=gray), status Badge (active=green, on_leave=orange, terminated=red), hire date, manager name
14- Add a department filter Select above the table
15- Add a search Input that filters by name or email
16- Clicking a row opens an employee profile Sheet showing all details, their manager, and quick links to their leave history and documents
17- HR admins see an Edit button in the Sheet; employees see read-only view of their own profile

1Build the Leave tab module. It should show different UIs based on the user's hr_role:
2
3For employees (hr_role = 'employee'):
4- Show their own leave history as a DataTable: type Badge, dates, days count, status Badge (pending=yellow, approved=green, rejected=red, cancelled=gray), review note if rejected
5- 'Request Leave' Button that opens a Dialog
6- Dialog form (react-hook-form + zod): leave type Select, start date Calendar Popover, end date Calendar Popover (auto-calculates days_count excluding weekends), reason Textarea
7- On submit, insert into leave_requests with status = 'pending'
8- Subscribe to Realtime on leave_requests WHERE id = request.id — when status changes to approved or rejected, show a Sonner toast: 'Your leave request was approved' or 'Your leave request was rejected: [review_note]'
9
10For managers (hr_role = 'manager'):
11- Show a DataTable of pending leave requests from their team
12- Each row has Approve Button (green) and Reject Button (red)
13- Reject opens a small Dialog to enter a review_note
14- On approve/reject, update leave_requests with status and reviewed_by
15- Show a Badge count on the Leave tab label showing total pending requests
16
17For HR admins: show all requests with ability to filter by department and export as CSV

1import { useState } from 'react'
2import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
3import { supabase } from '@/integrations/supabase/client'
4import { Button } from '@/components/ui/button'
5import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
6import { Badge } from '@/components/ui/badge'
7import { Calendar } from '@/components/ui/calendar'
8import { format, isToday, parseISO } from 'date-fns'
9
10type AttendanceRecord = {
11  id: string
12  date: string
13  check_in_at: string | null
14  check_out_at: string | null
15  work_hours: number | null
16  status: 'present' | 'absent' | 'late' | 'half_day'
17}
18
19export function AttendanceTab({ employeeId }: { employeeId: string }) {
20  const [month, setMonth] = useState(new Date())
21  const queryClient = useQueryClient()
22
23  const { data: records = [] } = useQuery({
24    queryKey: ['attendance', employeeId, format(month, 'yyyy-MM')],
25    queryFn: async () => {
26      const start = format(new Date(month.getFullYear(), month.getMonth(), 1), 'yyyy-MM-dd')
27      const end = format(new Date(month.getFullYear(), month.getMonth() + 1, 0), 'yyyy-MM-dd')
28      const { data } = await supabase
29        .from('attendance')
30        .select('*')
31        .eq('employee_id', employeeId)
32        .gte('date', start)
33        .lte('date', end)
34        .order('date', { ascending: false })
35      return (data ?? []) as AttendanceRecord[]
36    },
37  })
38
39  const todayRecord = records.find((r) => isToday(parseISO(r.date)))
40
41  const checkIn = useMutation({
42    mutationFn: async () => {
43      const now = new Date().toISOString()
44      const hour = new Date().getHours()
45      const status = hour > 9 ? 'late' : 'present'
46      await supabase.from('attendance').upsert({
47        employee_id: employeeId,
48        date: format(new Date(), 'yyyy-MM-dd'),
49        check_in_at: now,
50        status,
51      })
52    },
53    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['attendance'] }),
54  })
55
56  const checkOut = useMutation({
57    mutationFn: async () => {
58      await supabase
59        .from('attendance')
60        .update({ check_out_at: new Date().toISOString() })
61        .eq('id', todayRecord!.id)
62    },
63    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['attendance'] }),
64  })
65
66  const presentDates = records.filter((r) => r.status === 'present' || r.status === 'late').map((r) => parseISO(r.date))
67
68  return (
69    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
70      <Card>
71        <CardHeader><CardTitle className="text-base">Today</CardTitle></CardHeader>
72        <CardContent className="space-y-3">
73          {todayRecord?.check_in_at ? (
74            <>
75              <p className="text-sm">Checked in: {format(parseISO(todayRecord.check_in_at), 'h:mm a')}</p>
76              {todayRecord.check_out_at
77                ? <p className="text-sm">Checked out: {format(parseISO(todayRecord.check_out_at), 'h:mm a')}</p>
78                : <Button onClick={() => checkOut.mutate()} variant="outline" className="w-full">Check Out</Button>
79              }
80            </>
81          ) : (
82            <Button onClick={() => checkIn.mutate()} className="w-full">Check In</Button>
83          )}
84          {todayRecord && <Badge variant="outline">{todayRecord.status}</Badge>}
85        </CardContent>
86      </Card>
87      <Card className="md:col-span-2">
88        <CardHeader><CardTitle className="text-base">Monthly View</CardTitle></CardHeader>
89        <CardContent>
90          <Calendar mode="multiple" selected={presentDates} month={month} onMonthChange={setMonth} className="rounded-md" />
91        </CardContent>
92      </Card>
93    </div>
94  )
95}

1Add two final modules:
2
31. Documents tab:
4- Create a Supabase Storage bucket called 'employee-docs' set to PRIVATE
5- Storage path pattern: employee-docs/{employee_id}/{filename}
6- Storage RLS: employees can upload/download only paths starting with their employee_id. HR admins can access all paths.
7- Build a document list component showing files per employee: name, type Badge, upload date, and a Download button
8- Download button calls supabase.storage.from('employee-docs').createSignedUrl(path, 3600) and opens the URL in a new tab
9- Add a file upload Input (accept pdf, jpg, png, docx) that uploads to the correct path and inserts a row into employee_documents
10- HR admins see a Select to choose which employee's documents they are viewing
11
122. Analytics tab (HR admins only):
13- Headcount by department: fetch COUNT(*) from employees grouped by department_id, joined to departments.name. Render as a Recharts BarChart.
14- Leave utilization: fetch approved leave_requests, group by type, sum days_count. Render as a Recharts PieChart.
15- Attendance rate this month: (present + late count) / total working days. Show as a big percentage number with a Progress bar.
16- Recent hires: DataTable of last 10 employees ordered by hire_date desc.