Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/edgar2420/QrPermision/llms.txt

Use this file to discover all available pages before exploring further.

PermisosQR provides two distinct scanning modes to cover different operational contexts. The in-app scanner is designed for logged-in operators working at a fixed station or using a company device — it leverages the session token for authorization and routes all actions through the standard authenticated API. The public scan mode is designed for environments where a physical label is scanned by anyone with a phone: no login session is required, but the person authorizing the action must supply their email and password inline with each request. Both modes use the same html5-qrcode library to access the device camera, and both support manual ID entry as a fallback when camera access is unavailable.

In-App Scanning (Authenticated)

The in-app scanner is available at /scan and requires an active login session. It uses the html5-qrcode library to read the device’s rear-facing camera at 10 fps inside a 220×220 px scanning window.
1

Activate the camera

The operator taps Activar cámara. The browser requests getUserMedia({ video: { facingMode: 'environment' } }).
2

Decode the QR

html5-qrcode decodes the printed label. The raw value matches /QR-?(\d+)/i or a bare integer, extracting the numeric QR ID.
3

Fetch current status

The app calls GET /api/qr/:id with the session token to retrieve the QR’s current status, active permission details, and elapsed time.
4

Branch on status

  • available → the enable modal opens. The operator enters the employee name and time limit, then confirms POST /api/permissions/enable.
  • active → the return modal opens with the live countdown timer. The operator confirms POST /api/permissions/return.
  • disabled / expired → an error state is displayed; no action is possible.
Manual ID fallback: If the camera is unavailable or denied, the operator can type the QR ID (e.g., 42 or QR-42) directly into the text input and press Enter or Buscar to trigger the same lookup flow.
# Fetch a QR's current state (authenticated)
curl http://localhost:4000/api/qr/42 \
  -H "Authorization: Bearer <token>"
{
  "success": true,
  "data": {
    "id": 42,
    "status": "available",
    "created_by_name": "Admin Principal",
    "active_permission_id": null,
    "received_by": null,
    "allowed_minutes": null,
    "exit_time": null,
    "enabled_by_name": null
  }
}

Public Scan Mode (No Login Required)

Public scan mode allows any person with a phone to handle a permission event — useful when the employee themselves can confirm a return, or when a supervisor who is not logged into the dashboard needs to authorize an exit at the door. The page is served at /scan/:id and has no authentication middleware.
Even though the page loads without a login session, every public action verifies the authorizing operator’s credentials server-side on each request. The email and password fields in the request body must belong to a user with is_active = true in the database. An inactive or non-existent user receives a 401 or 403 response and the action is rejected.
The public flow has three steps:
1

Load QR info

On page load the app calls GET /api/qr/public/:id. This endpoint returns status, active permission details, and elapsed time — but no sensitive user data.
curl http://localhost:4000/api/qr/public/5
{
  "success": true,
  "data": {
    "id": 5,
    "status": "available",
    "created_at": "2024-06-01T08:00:00.000Z",
    "received_by": null,
    "allowed_minutes": null,
    "exit_time": null,
    "return_time": null,
    "time_used_minutes": null,
    "delay_minutes": null,
    "is_compliant": null,
    "enabled_by_name": null
  }
}
2

Enable a permission (public)

If the QR is available, the modal asks for the employee name, time limit, and the authorizing operator’s credentials.
curl -X POST http://localhost:4000/api/qr/public/5/enable \
  -H "Content-Type: application/json" \
  -d '{
    "receivedBy": "Juan Pérez",
    "allowedMinutes": 20,
    "email": "operador@permisosqr.com",
    "password": "admin123"
  }'
Response200 OK
{
  "success": true,
  "data": {
    "id": 5,
    "status": "active",
    "created_at": "2024-06-01T08:00:00.000Z",
    "received_by": "Juan Pérez",
    "allowed_minutes": 20,
    "exit_time": "2024-06-15T10:00:00.000Z",
    "return_time": null,
    "time_used_minutes": null,
    "delay_minutes": null,
    "is_compliant": null,
    "enabled_by_name": "Operador Norte"
  }
}
3

Return a permission (public)

If the QR is active, the modal shows the live countdown timer and asks for the operator’s credentials to confirm the return.
curl -X POST http://localhost:4000/api/qr/public/5/return \
  -H "Content-Type: application/json" \
  -d '{
    "email": "operador@permisosqr.com",
    "password": "admin123"
  }'
Response200 OK
{
  "success": true,
  "data": {
    "time_used_minutes": "18.75",
    "delay_minutes": "0.00",
    "is_compliant": true
  }
}

QR URL Format

Every printed QR code encodes the URL that the public scan page responds to. When any mobile camera app scans the code, the OS opens it directly in the browser:
https://<host>:3000/scan/<id>
For example, QR code with ID 42 encodes:
https://permisosqr.example.com:3000/scan/42
The React Router catches this path, extracts the ID from the URL params, and immediately calls GET /api/qr/public/42 to load the QR’s current state. If the QR is available or active, the appropriate action modal opens automatically — no navigation required.

Comparing Scan Modes

AttributeValue
URL/scan
Auth required✅ JWT session token
QR info endpointGET /api/qr/:id
Enable endpointPOST /api/permissions/enable
Return endpointPOST /api/permissions/return
Credentials in body❌ No
Use caseFixed-station operators with a company device
The PermisosQR frontend is a Progressive Web App (PWA). Operators and supervisors can add it to their phone’s home screen for one-tap access to the scanner — no app store installation needed. On iOS, use Share → Add to Home Screen; on Android, use ⋮ → Add to Home screen from Chrome.

Build docs developers (and LLMs) love