How to Build Attendance app with V0

1// Paste this prompt into V0's AI chat:
2// Build an attendance tracking system with Supabase. Create these tables:
3// 1. employees: id (uuid PK), user_id (uuid FK to auth.users), full_name (text), department (text), role (text check 'employee','manager'), is_active (boolean default true), created_at (timestamptz)
4// 2. attendance_records: id (uuid PK), employee_id (uuid FK), clock_in (timestamptz), clock_out (timestamptz), clock_in_location (point), clock_out_location (point), total_hours (numeric generated always as extract(epoch from clock_out - clock_in)/3600), notes (text), status (text default 'present')
5// 3. leave_requests: id (uuid PK), employee_id (uuid FK), leave_type (text), start_date (date), end_date (date), reason (text), status (text default 'pending'), approved_by (uuid FK)
6// Add a partial unique index: CREATE UNIQUE INDEX ON attendance_records (employee_id) WHERE clock_out IS NULL
7// Add RLS so employees see only their own records, managers see their department.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(req: NextRequest) {
10  const { employeeId, action, latitude, longitude } = await req.json()
11  const location = `(${longitude},${latitude})`
12
13  if (action === 'clock_in') {
14    const { data, error } = await supabase
15      .from('attendance_records')
16      .insert({
17        employee_id: employeeId,
18        clock_in: new Date().toISOString(),
19        clock_in_location: location,
20      })
21      .select()
22      .single()
23
24    if (error?.code === '23505') {
25      return NextResponse.json(
26        { error: 'You already have an open clock-in session' },
27        { status: 409 }
28      )
29    }
30    if (error) return NextResponse.json({ error: error.message }, { status: 500 })
31    return NextResponse.json({ data })
32  }
33
34  if (action === 'clock_out') {
35    const { data, error } = await supabase
36      .from('attendance_records')
37      .update({
38        clock_out: new Date().toISOString(),
39        clock_out_location: location,
40      })
41      .eq('employee_id', employeeId)
42      .is('clock_out', null)
43      .select()
44      .single()
45
46    if (error) return NextResponse.json({ error: error.message }, { status: 500 })
47    return NextResponse.json({ data })
48  }
49
50  return NextResponse.json({ error: 'Invalid action' }, { status: 400 })
51}

1// Paste this prompt into V0's AI chat:
2// Build a manager attendance dashboard at app/dashboard/page.tsx.
3// Requirements:
4// - Show today's attendance summary: Present count, Absent count, On Leave count in shadcn/ui Cards
5// - Display a Table of today's attendance records with columns: Employee Name, Clock In Time, Clock Out Time, Total Hours, Status Badge
6// - Add a Select dropdown to filter by department
7// - Show a monthly Progress bar per employee showing attendance percentage (days present / working days)
8// - Add Tabs for Today, This Week, This Month views
9// - Weekly view shows a grid of days with green (present), red (absent), yellow (leave) indicators per employee
10// - Use Server Components to fetch data from Supabase
11// - Managers should only see employees in their department (enforce via Supabase RLS)

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { revalidatePath } from 'next/cache'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function submitLeaveRequest(
12  employeeId: string,
13  leaveType: string,
14  startDate: string,
15  endDate: string,
16  reason: string
17) {
18  const { error } = await supabase.from('leave_requests').insert({
19    employee_id: employeeId,
20    leave_type: leaveType,
21    start_date: startDate,
22    end_date: endDate,
23    reason,
24  })
25
26  if (error) throw new Error(error.message)
27  revalidatePath('/leave')
28}
29
30export async function handleLeaveRequest(
31  requestId: string,
32  status: 'approved' | 'rejected',
33  managerId: string
34) {
35  const { error } = await supabase
36    .from('leave_requests')
37    .update({ status, approved_by: managerId })
38    .eq('id', requestId)
39    .eq('status', 'pending')
40
41  if (error) throw new Error(error.message)
42  revalidatePath('/dashboard')
43}

1// Paste this prompt into V0's AI chat:
2// Build an attendance reports page at app/reports/page.tsx.
3// Requirements:
4// - Select month and department using DatePicker and Select
5// - Display a summary Table: Employee Name, Days Present, Days Absent, Days on Leave, Total Hours, Late Arrivals
6// - Show department averages at the bottom
7// - Add a "Download CSV" Button that generates and downloads a CSV file client-side
8// - Add a PieChart (Recharts) showing the breakdown of present/absent/leave days for the department
9// - Use Server Components for the initial data fetch
10// - The CSV should include all columns plus clock-in and clock-out times for each day