Lovable Prompts for Building Attendance app

 
Setting Up Project Files & Dependencies
 

• Create your main application file named attendance.lov to host all routes, views, business logic, and modules for the Attendance app.
• Include dependency installations directly in your code. Since Lovable.dev does not have a terminal, add the necessary module imports as shown:

// Import modules for database operations, user authentication, UI rendering, and notifications

import "lovable-db"         // Handle persistent data storage (for users, attendance records)
import "lovable-auth"       // Manage user registration, login, and session logic
import "lovable-ui"         // Render interactive user interface components across views
import "lovable-notify"     // Provide real-time notifications and alerts for attendance actions

• Ensure these dependencies are integrated as part of your project configuration.

 
Database & Model Setup
 

• Define two primary models: one for User accounts and one for Attendance Records.
• Configure relationships so that each user can have multiple attendance logs, and include timestamps for check-in and check-out.

// Database models declaration

model User {
  id: UUID                // Unique identifier for the user
  name: String            // Full name of the user
  email: String           // Email for login and notifications
  password: String        // Encrypted user password
  role: String            // Role (e.g., "employee", "admin")
  createdAt: Date         // Record creation timestamp
}

model Attendance {
  id: UUID                // Unique identifier for an attendance record
  userId: UUID            // Reference to the User model
  checkIn: Date           // Timestamp when user checked in
  checkOut: Date          // Timestamp when user checked out (optional)
  date: Date              // Date of the attendance entry
}

• Ensure that database initialization logic is included to handle migrations when the app starts.

 
User Authentication & Session Management
 

• Implement registration and login routes with secure password handling.
• Setup middleware to protect routes so that only authenticated users can access attendance functionalities.

// Authentication routes and session middleware

// Register route for new user sign-up
route "/register" {
  method: "POST"
  handler: function(request, response) {
    // Validate and create a new user account
    let newUser = createUser(request.body)
    response.send({ success: true, message: "Registration successful" })
  }
}

// Login route for users to create a session
route "/login" {
  method: "POST"
  handler: function(request, response) {
    // Validate credentials and set session
    let user = authenticate(request.body.email, request.body.password)
    if (user) {
      createSession(user)
      response.send({ success: true, message: "Login successful" })
    } else {
      response.send({ success: false, message: "Invalid credentials" })
    }
  }
}

// Middleware to ensure routes are accessed by authenticated users only
middleware authGuard {
  execute: function(request, response, next) {
    if (isSessionValid(request)) {
      next()
    } else {
      response.send({ success: false, message: "Authentication required" })
    }
  }
}

• Apply authGuard middleware on routes that require user authentication.

 
Attendance Logic & Routes
 

• Create routes for checking in and checking out.
• Ensure that each attendance record is unique per day per user.
• Implement logic to only allow one check-in and one check-out per user each day.

// Attendance routes and logic

// Route to mark check-in
route "/attendance/checkin" {
  method: "POST"
  middleware: [authGuard]
  handler: function(request, response) {
    let userId = request.user.id
    let today = getTodayDate()
    
    // Check if the user has already checked in today
    if (attendanceExists(userId, today)) {
      response.send({ success: false, message: "Already checked in today" })
    } else {
      // Record check-in time
      createAttendanceRecord(userId, today, { checkIn: new Date() })
      sendNotification(userId, "Checked in successfully")
      response.send({ success: true, message: "Check-in recorded", time: new Date() })
    }
  }
}

// Route to mark check-out
route "/attendance/checkout" {
  method: "POST"
  middleware: [authGuard]
  handler: function(request, response) {
    let userId = request.user.id
    let today = getTodayDate()
    
    // Retrieve existing attendance record for today
    let record = fetchAttendanceRecord(userId, today)
    if (record == null) {
      response.send({ success: false, message: "Check-in required before check-out" })
    } else if (record.checkOut != null) {
      response.send({ success: false, message: "Already checked out today" })
    } else {
      // Update record with check-out time
      record.checkOut = new Date()
      updateAttendanceRecord(record)
      sendNotification(userId, "Checked out successfully")
      response.send({ success: true, message: "Check-out recorded", time: new Date() })
    }
  }
}

• Utilize functions like getTodayDate(), attendanceExists(), createAttendanceRecord(), fetchAttendanceRecord(), and updateAttendanceRecord() to encapsulate logic.

 
UI and User Flow
 

• Create screens for user registration, login, and a dashboard for managing attendance.
• Implement interactive buttons for "Check-In" and "Check-Out" and display real-time attendance status.
• Provide an attendance history view that lists past attendance records with check-in and check-out times.

// UI rendering for the dashboard

view "Dashboard" {
  template: "
    

      
Welcome, {{user.name}}
      

        Check-In
        Check-Out
      
      

        
Your Attendance History
        
        {{#each attendanceRecords}}
          

            Date: {{this.date}}
            Check-In: {{this.checkIn}}
            Check-Out: {{this.checkOut}}
          
        {{/each}}
      
    
  "
  // Fetch necessary data on view load
  onLoad: function() {
    loadUserAttendance()
  }
}

• Ensure functions like handleCheckIn(), handleCheckOut(), and loadUserAttendance() are defined to interact with the defined routes.

 
Reporting and History Logging
 

• Create a route for administrators to view overall attendance reports for all employees.
• Build export functionality to generate downloadable CSV or PDF reports.
• Implement filter criteria such as date range and user role for improved report management.

// Admin route to fetch overall attendance reports

route "/admin/attendance-report" {
  method: "GET"
  middleware: [authGuard]
  handler: function(request, response) {
    if (request.user.role !== "admin") {
      response.send({ success: false, message: "Access denied" })
      return
    }
    
    let filters = request.query // e.g., dateRange, userId, role
    let report = generateAttendanceReport(filters)
    
    // Optionally export report as CSV or PDF based on request parameters
    if (request.query.export == "csv") {
      let csvData = exportAsCSV(report)
      response.send({ success: true, data: csvData })
    } else {
      response.send({ success: true, data: report })
    }
  }
}

• Implement helper functions generateAttendanceReport() and exportAsCSV() to facilitate report creation.