# Job Verification Frontend Flow Guide

This comprehensive guide documents the complete frontend experience for the job verification system, including all steps from login to job completion.

## Table of Contents

1. [System Overview](#system-overview)
2. [User Roles](#user-roles)
3. [Authentication Flow](#authentication-flow)
4. [Job Creation Flow](#job-creation-flow)
5. [Candidate Job List](#candidate-job-list)
6. [Job Verification Methods](#job-verification-methods)
   - [OTP Verification](#otp-verification)
   - [QR Code Verification](#qr-code-verification)
   - [Face ID Verification](#face-id-verification)
7. [Partner Verification Flow](#partner-verification-flow)
8. [Security Considerations](#security-considerations)
9. [Testing URL](#testing-url)
10. [Frontend Components](#frontend-components)

## System Overview

The job verification system enables candidates to clock in and out of jobs using multiple verification methods, with partners verifying these actions. The system consists of three key components:

1. **Candidate Interface** (`web/application/modules/candidate/*`)
2. **Partner Interface** (`web/application/modules/partner/*`)
3. **Database Layer** (`job_accepted_candidate` and `job_employee` tables)

```ascii
┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│                 │      │                 │      │                 │
│    Candidate    │◄────►│    Database     │◄────►│     Partner     │
│    Interface    │      │     Layer       │      │    Interface    │
│                 │      │                 │      │                 │
└─────────────────┘      └─────────────────┘      └─────────────────┘
```

## User Roles

### Candidate
- Logs in to the system
- Views available jobs
- Applies for jobs
- Clocks in/out using verification methods
- Views job history and status

### Partner
- Creates job listings
- Reviews candidate applications
- Verifies candidate clock in/out
- Manages job records

## Authentication Flow

### Candidate Login

```ascii
┌─────────────┐      ┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│             │      │             │      │             │      │             │
│  Login Page │─────►│ Credentials │─────►│ Validation  │─────►│  Dashboard  │
│             │      │   Input     │      │             │      │             │
└─────────────┘      └─────────────┘      └─────────────┘      └─────────────┘
```

1. Navigate to `testing.reco-logocloud.com/login`
2. Enter email/username and password
3. System validates credentials
4. On success, redirect to candidate dashboard
5. On failure, display error message

### Face Recognition Login (Alternative)

```ascii
┌─────────────┐      ┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│             │      │             │      │             │      │             │
│  Login Page │─────►│ Face Login  │─────►│ Face Scan   │─────►│  Dashboard  │
│             │      │   Option    │      │ Verification│      │             │
└─────────────┘      └─────────────┘      └─────────────┘      └─────────────┘
```

1. Navigate to `testing.reco-logocloud.com/login`
2. Click "Login with Face Recognition"
3. Camera activates for face scanning
4. System matches face against enrolled faces
5. On success, redirect to candidate dashboard
6. On failure, display error message and fallback to credential login

## Job Creation Flow

### Partner Job Creation

```ascii
┌─────────────┐      ┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│             │      │             │      │             │      │             │
│  Partner    │─────►│ Create Job  │─────►│ Job Details │─────►│ Publish Job │
│  Dashboard  │      │   Form      │      │   Input     │      │             │
└─────────────┘      └─────────────┘      └─────────────┘      └─────────────┘
```

1. Partner logs in to dashboard
2. Navigates to "Create Job" section
3. Fills job details:
   - Job title
   - Description
   - Location
   - Date and time slots
   - Required skills
   - Compensation
4. Publishes job listing
5. System creates job record in database

## Candidate Job List

The candidate job list is the central hub for candidates to view and manage their jobs. It's implemented in `web/assets/candidate/candidate_job_list.js` and `web/application/modules/candidate/views/candidate_job_list.php`.

```ascii
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  Candidate Dashboard                                        │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Date Filter                                          │   │
│  │ ┌──────────┐  ┌──────────┐  ┌──────────┐            │   │
│  │ │Start Date│  │ End Date │  │  Apply   │            │   │
│  │ └──────────┘  └──────────┘  └──────────┘            │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Job Listing                                          │   │
│  │                                                       │   │
│  │ ┌───────────────────────────────────────────────┐   │   │
│  │ │ Job Title                                      │   │   │
│  │ │ Location, Date, Time                           │   │   │
│  │ │                                                │   │   │
│  │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐        │   │   │
│  │ │ │Entry OTP │ │Entry QR  │ │Entry Face│        │   │   │
│  │ │ └──────────┘ └──────────┘ └──────────┘        │   │   │
│  │ │                                                │   │   │
│  │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐        │   │   │
│  │ │ │Exit OTP  │ │Exit QR   │ │Exit Face │        │   │   │
│  │ │ └──────────┘ └──────────┘ └──────────┘        │   │   │
│  │ └───────────────────────────────────────────────┘   │   │
│  │                                                       │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

### Job List Features

1. **Date Filtering**
   - Start date and end date selection
   - Apply button to filter jobs by date range

2. **Job Display Options**
   - Grid view (default)
   - List view (more detailed)

3. **Job Cards**
   - Job title and details
   - Location and time information
   - Verification buttons (OTP, QR, Face ID)
   - Job status indicators

4. **Pagination**
   - Navigate through multiple job pages
   - Page size controls

### Job List Implementation

The job list is loaded dynamically using AJAX:

```javascript
function job_list_load(sdate, edate, per) {
    $.ajax({
        url: base_url + "candidate_job_list_ajax",
        type: "POST",
        dataType: "JSON",
        data: {"start_date": sdate, "end_date": edate, "per": per, 'r_csrf': csrf_page_token},
        success: function (response) {
            if (response.status == 1) {
                $('.joblist_data').html(response.html);
                $('.total_record').html(response.total_record);
            } else {
                errorTosterMessage(response.msg);
            }
        }
    });
}
```

## Job Verification Methods

The system supports three verification methods for clock in/out:

1. OTP (One-Time Password)
2. QR Code
3. Face ID

### OTP Verification

```ascii
Candidate Interface         System                    Partner Interface          Database
(job_list_ajax.php)    (Controllers)             (job_verification.php)     (Tables)
       │                    │                            │                      │
       │                    │                            │                      │
1)┌────┼────────────────┐  │                            │                      │
  │Show verification    │  │                            │                      │
  │buttons when:       │  │                            │                      │
  │- job_status=3/5   │  │                            │                      │
  │- within time      │  │                            │                      │
  └────┼────────────────┘  │                            │                      │
       │                    │                            │                      │
2)     ├─Request Entry OTP─>│                            │                      │
       │                    │                            │                      │
       │              ┌─────┼────────────┐               │                      │
       │              │get_entry_code(): │               │                      │
       │              │- Generate OTP    │               │                      │
       │              │- Create Job ID   │               │                      │
       │              └─────┼────────────┘               │                      │
       │                    │                            │                      │
       │                    ├─Store OTP/Job ID─────────────────────────────────>│
       │                    │                            │     (job_accepted_candidate)
       │                    │                            │                      │
3)     │<───Send via SMS/Email                          │                      │
       │                    │                            │                      │
4)     ├─Show to Partner────────────────────────────────>│                      │
       │                    │                            │                      │
       │                    │                      ┌─────┼──────────────┐      │
       │                    │                      │confirm_otp_by_     │      │
       │                    │                      │partner():          │      │
       │                    │                      │- Validate OTP      │      │
       │                    │                      │- Check time window │      │
       │                    │                      └─────┼──────────────┘      │
       │                    │                            │                      │
       │                    │                            ├─Record Entry────────>│
       │                    │                            │  (job_employee)      │
       │                    │                            │                      │
5)     │<───────────────────┼────────Confirm Entry──────┤                      │
       │                    │                            │                      │
```

#### OTP Frontend Implementation

1. **Request OTP**
   ```javascript
   $(document).on("click", '.get_entry_otp', function () {
       var entry_otp_job_id = $(this).data("entry_otp_job_id");
       var job_avability_id = $(this).data('job_avi_id');
       $.ajax({
           url: base_url + "candidate/get_entry_code",
           type: "POST",
           dataType: "JSON",
           data: {'job_id': entry_otp_job_id, 'job_avability_id': job_avability_id},
           success: function (response) {
               if (response.status == 1) {
                   successTosterMessage(response.message);
                   $('#div_secound' + entry_otp_job_id + ' #otp_confirm_' + entry_otp_job_id + '_' + job_avability_id).html("<b>" + js_lang.entry_confirm_otp + "</b> : " + response.confirm_otp);
               }
           }
       });
   });
   ```

2. **Display OTP**
   - OTP is displayed to the candidate
   - Candidate shows OTP to partner for verification

3. **Partner Verification**
   - Partner enters OTP in their interface
   - System validates OTP and records entry/exit

### QR Code Verification

```ascii
Candidate Interface         System                    Partner Interface          Database
(job_list_ajax.php)    (Controllers)             (job_verification.php)     (Tables)
       │                    │                            │                      │
       │                    │                            │                      │
1)┌────┼────────────────┐  │                            │                      │
  │Show QR button when: │  │                            │                      │
  │- job_status=3/5    │  │                            │                      │
  │- within time       │  │                            │                      │
  └────┼────────────────┘  │                            │                      │
       │                    │                            │                      │
2)     ├─Request QR Code──>│                            │                      │
       │              ┌─────┼────────────┐               │                      │
       │              │get_entry_qrcode()│               │                      │
       │              │- Generate QR data│               │                      │
       │              │- Create QR image │               │                      │
       │              └─────┼────────────┘               │                      │
       │                    │                            │                      │
       │                    ├─Store QR data──────────────────────────────────>│
       │                    │                            │  (job_accepted_candidate)
       │                    │                            │                      │
3)     │<───Return QR Image─┤                            │                      │
       │                    │                            │                      │
4)     ├─Show QR to Partner─────────────────────────────>│                      │
       │                    │                            │                      │
       │                    │                      ┌─────┼──────────────┐      │
       │                    │                      │job_varify():       │      │
       │                    │                      │- Decrypt QR        │      │
       │                    │                      │- Validate data     │      │
       │                    │                      │- Check time window │      │
       │                    │                      └─────┼──────────────┘      │
       │                    │                            │                      │
       │                    │                            ├─Record Entry────────>│
       │                    │                            │  (job_employee)      │
5)     │<───────────────────┼────────Confirm Entry──────┤                      │
       │                    │                            │                      │
```

#### QR Code Frontend Implementation

1. **Request QR Code**
   ```javascript
   $(document).on("click", '.get_entry_qrcode', function () {
       var entry_otp_job_id = $(this).data("entry_qr_job_id");
       var job_avability_id = $(this).data('job_avi_id');
       var partner_id = $(this).data('partner_id');
       $.ajax({
           url: base_url + "candidate/get_entry_qrcode",
           type: "POST",
           dataType: "JSON",
           data: {'job_id': entry_otp_job_id, 'job_avability_id': job_avability_id, 'partner_id': partner_id},
           success: function (response) {
               if (response.status == 1) {
                   $('#view_entry_exit_qr_code').modal('show');
                   $('.qrcode_data').attr("src", response.link);
                   successTosterMessage(response.message);
               }
           }
       });
   });
   ```

2. **Display QR Code**
   - QR code is displayed in a modal
   - Candidate shows QR code to partner for scanning

3. **Partner Verification**
   - Partner scans QR code with their device
   - System validates QR data and records entry/exit

### Face ID Verification

```ascii
Candidate Interface         System                    Partner Interface          Database
(job_list_ajax.php)    (Controllers)             (job_verification.php)     (Tables)
       │                    │                            │                      │
       │                    │                            │                      │
1)┌────┼────────────────┐  │                            │                      │
  │Show Face ID button  │  │                            │                      │
  │when:               │  │                            │                      │
  │- job_status=3/5    │  │                            │                      │
  │- within time       │  │                            │                      │
  │- has face enrolled │  │                            │                      │
  └────┼────────────────┘  │                            │                      │
       │                    │                            │                      │
2)     ├─Capture Face Image>│                            │                      │
       │              ┌─────┼────────────┐               │                      │
       │              │verify_entry_face()│              │                      │
       │              │- Verify time window│              │                      │
       │              │- Search face      │              │                      │
       │              │- Match user ID    │              │                      │
       │              └─────┼────────────┘               │                      │
       │                    │                            │                      │
3)     │                    ├─Record Entry───────────────────────────────────>│
       │                    │                            │  (job_employee)      │
       │                    │                            │                      │
4)     │<───Confirm Entry───┤                            │                      │
       │                    │                            │                      │
```

#### Face ID Enrollment

Before using Face ID verification, candidates must enroll their face:

1. Navigate to face enrollment page
2. Camera activates for face capture
3. System guides through capturing 5 face images from different angles
4. Images are processed and stored in AWS Rekognition
5. Face enrollment status is saved to database

```javascript
async function submitEnrollment() {
    try {
        const response = await fetch('<?php echo base_url("candidate/face/enroll-face"); ?>', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ images: capturedFaces })
        });

        const data = await response.json();

        if (response.ok) {
            showStatus('Face enrollment successful!', 'success');
            // Redirect to account page
        } else {
            throw new Error(data.message || 'Enrollment failed');
        }
    } catch (error) {
        showStatus('Enrollment failed. Please try again.', 'error');
    }
}
```

#### Face ID Verification Implementation

1. **Initiate Face Verification**
   ```javascript
   $(document).on("click", '.get_entry_face', function () {
       var job_id = $(this).data("entry_face_job_id");
       var job_avability_id = $(this).data('job_avi_id');
       
       // Set verification type and job details
       $('#faceVerificationType').val('entry');
       $('#faceVerificationJobId').val(job_id);
       $('#faceVerificationJobAviId').val(job_avability_id);
       
       // Show modal
       $('#faceVerificationModal').modal('show');
   });
   ```

2. **Capture and Verify Face**
   ```javascript
   function captureAndVerify() {
       const video = document.getElementById('faceVideo');
       const canvas = document.getElementById('faceCanvas');
       const context = canvas.getContext('2d');
       
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
       context.drawImage(video, 0, 0, canvas.width, canvas.height);
       
       const imageData = canvas.toDataURL('image/jpeg');
       const verificationType = $('#faceVerificationType').val();
       const job_id = $('#faceVerificationJobId').val();
       const job_avability_id = $('#faceVerificationJobAviId').val();
       
       // Get geolocation
       if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(function(position) {
               const lat = position.coords.latitude;
               const lng = position.coords.longitude;
               
               // Send to server
               $.ajax({
                   url: base_url + "candidate/" + (verificationType === 'entry' ? 'verify_entry_face' : 'verify_exit_face'),
                   method: 'POST',
                   data: {
                       job_id: job_id,
                       job_avability_id: job_avability_id,
                       image: imageData,
                       lat: lat,
                       lng: lng
                   },
                   success: function(response) {
                       if (response.success) {
                           showStatus(response.message, 'success');
                           setTimeout(function() {
                               $('#faceVerificationModal').modal('hide');
                               job_list_load(sdate, edate, per);
                           }, 2000);
                       } else {
                           showStatus(response.message, 'error');
                       }
                   }
               });
           });
       }
   }
   ```

3. **Backend Processing**
   - Image is sent to AWS Rekognition for face matching
   - System validates user identity and time window
   - Entry/exit is recorded directly without partner verification

## Partner Verification Flow

Partners have their own interface for verifying candidate clock in/out:

```ascii
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  Partner Dashboard                                          │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Job Verification                                     │   │
│  │                                                       │   │
│  │ ┌───────────────────────────────────────────────┐   │   │
│  │ │ Enter Job ID or Scan QR Code                   │   │   │
│  │ │                                                │   │   │
│  │ │ ┌──────────┐                                   │   │   │
│  │ │ │  Job ID  │                                   │   │   │
│  │ │ └──────────┘                                   │   │   │
│  │ │                                                │   │   │
│  │ │ ┌──────────┐                                   │   │   │
│  │ │ │  Verify  │                                   │   │   │
│  │ │ └──────────┘                                   │   │   │
│  │ └───────────────────────────────────────────────┘   │   │
│  │                                                       │   │
│  │ ┌───────────────────────────────────────────────┐   │   │
│  │ │ Candidate Details                              │   │   │
│  │ │ Job Details                                    │   │   │
│  │ │                                                │   │   │
│  │ │ ┌──────────┐ ┌──────────┐                     │   │   │
│  │ │ │ Confirm  │ │ Reject   │                     │   │   │
│  │ │ └──────────┘ └──────────┘                     │   │   │
│  │ └───────────────────────────────────────────────┘   │   │
│  │                                                       │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

### Partner Verification Methods

1. **Job ID Verification**
   - Partner enters Job ID provided by candidate
   - System validates Job ID and displays job details
   - Partner confirms entry/exit

2. **OTP Verification**
   - Partner enters OTP provided by candidate
   - System validates OTP and displays job details
   - Partner confirms entry/exit

3. **QR Code Scanning**
   - Partner scans QR code shown by candidate
   - System decodes QR data and displays job details
   - Partner confirms entry/exit

### Partner Verification Implementation

```javascript
// Job ID verification
$("#job_varify_form").submit(function (e) {
    e.preventDefault();
    var jobid = $("#jobid").val();
    $.ajax({
        url: base_url + "partner/get_jobid_wise_data",
        type: "POST",
        dataType: "JSON",
        data: {'jobid': jobid, 'r_csrf': csrf_page_token},
        success: function (response) {
            if (response.status == 1) {
                $(".job_varify_data").html(response.html);
            } else {
                errorTosterMessage(response.message);
            }
        }
    });
});

// OTP verification
$("#confirm_otp_form").submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: base_url + "partner/confirm_otp_by_partner",
        type: "POST",
        dataType: "JSON",
        data: $(this).serialize(),
        success: function (response) {
            if (response.status == 1) {
                successTosterMessage(response.message);
                setTimeout(function () {
                    location.reload();
                }, 2000);
            } else {
                errorTosterMessage(response.message);
            }
        }
    });
});
```

## Security Considerations

The job verification system implements several security measures:

1. **Time Window Validation**
   ```php
   $start_time = $entry_exit_status['start_time'] - jobVerificationStartTime();
   $end_time = $entry_exit_status['end_time'] + jobVerificationEndTime();
   
   if ($start_time <= time() && $end_time >= time()) {
       // Allow verification
   }
   ```

2. **Sequential Verification**
   ```php
   // Check if entry exists before allowing exit
   if ($get_approve_time_entry_exit['approved_time'] == "") {
       // Entry required first
   }
   ```

3. **Location Tracking**
   ```php
   $loaction = array(
       'lat' => $lat,
       'lng' => $lng
   );
   $entry_loaction = json_encode($loaction);
   ```

4. **Face Verification Security**
   ```php
   // Verify user ID matches session
   if ($recognized_user_id != $this->session->userdata(CANDIDATE_LOGGED_IN)['id']) {
       return error_response($this->lang->line('face_not_recognized'));
   }
   ```

5. **Verification Type Tracking**
   ```
   entry_verify_type/exit_verify_type values:
   1 = Job ID verification
   2 = OTP verification
   3 = QR code verification
   4 = Admin verification
   5 = Face ID verification
   ```

## Testing URL

The job verification system can be tested at:
```
https://testing.reco-logocloud.com/
```

## Frontend Components

### Main JavaScript Files

1. `web/assets/candidate/candidate_job_list.js`
   - Handles job listing display and filtering
   - Implements verification button handlers
   - Manages OTP, QR code, and Face ID verification UI

2. `web/application/modules/candidate/views/candidate_job_list.php`
   - Main job list view template
   - Contains verification modals
   - Includes styling for job list components

### Key UI Components

1. **Job List**
   - Displays available jobs with status indicators
   - Shows verification buttons based on job status and time window
   - Supports grid and list views

2. **Verification Modals**
   - OTP display
   - QR code display
   - Face verification camera interface

3. **Face Enrollment Interface**
   - Camera capture for face registration
   - Multi-step enrollment process
   - Progress indicators and feedback

4. **Partner Verification Interface**
   - Job ID/OTP input forms
   - QR code scanner
   - Verification confirmation buttons

This comprehensive guide covers the entire frontend flow for the job verification system, providing a complete reference for developers working with the system.