Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/phauline-racel/LIMO-YUSEN-WAREHOUSE/llms.txt

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

The Amvel Warehouse system supports QR code scanning via the device camera to auto-fill shipment forms and filter inventory records. Scanning is handled entirely in the browser using the jsQR library (v1.4.0), which continuously decodes frames from a live <video> element. No external scanning app or plugin is required — the camera opens inside the page in a modal overlay.

Where QR scanning is available

The QR scan button (identified by the bi-qr-code-scan Bootstrap Icon) appears in two locations:
  • Inbound & Outbound form — Each of the HAWB and MAWB input fields has an inline scan button. Clicking it opens the scan modal. A successful scan attempts to populate all recognized form fields (client, destination, HAWB, MAWB, invoice, transaction type, plate number, date, and time).
  • Inventory and Dashboard search bars — The search toolbar on the Inventory page contains a scan button alongside the #inventorySearchInput field. On the Dashboard (Activity Log view), the scan button targets the #activitySearchInput field. A successful scan uses the detected value as a search term, filtering the displayed records immediately.

Expected QR payload format

The recommended QR payload is a JSON string. All fields are optional; only the keys that are present will be applied to the form.
{
  "client": "YAZAKI ORD",
  "destination": "Manila",
  "hawb": "YPH-04800983",
  "mawb": "SPSF-26A-030",
  "invoice": "INV-2024-001",
  "transactionType": "AFF Import",
  "plateNo": "NBB-7639",
  "date": "2026-07-01",
  "time": "09:30"
}
  • date must be in YYYY-MM-DD format.
  • time must be in HH:mm (24-hour) format.
  • transactionType must match one of the select options exactly: AFF Import, AFF Export, OFF Import, OFF Export. Partial or case-insensitive matches are attempted as a fallback.

Alternative field aliases

The normalizeShipmentPayload() function accepts several alternative key names in addition to the canonical ones. This allows QR codes generated by other systems to be scanned without modification.
Canonical fieldAlso accepted as
clientClient, shipmentClient
destinationDestination, shipTo
hawbHAWB, hawbNumber, shipmentId
mawbMAWB, mawbNumber
invoiceinvoiceNumber, markings, marking
transactionTypetransactionTypeName, transaction_type, transactionTypeLabel, transaction, type
plateNoplate, plateNumber, vehiclePlate, vehiclePlateNo

Plain text QR codes

If the QR code content is a plain string rather than a JSON object, the system treats it as a direct search value. It is applied to whichever search input is present on the current page:
  • On the Inventory page → populates #inventorySearchInput and refreshes the inventory table.
  • On the Dashboard / Activity page → populates #activitySearchInput and refreshes the activity list.
  • On the Inbound & Outbound form (where neither search input exists) → the string cannot be applied to the page and the system shows an “Invalid QR Code” alert.
This means any QR code that encodes a bare HAWB or MAWB number (e.g. YPH-04800983) can be used to search inventory without needing a full JSON payload.

How form filling works

When a scan result is decoded, handleScannedPayload(text, modal, context) is called. The following steps occur in order:
1

Parse the scanned text

JSON.parse(text) is attempted. If it succeeds, the result is a structured payload object. If it fails (plain text or malformed JSON), the raw string is used instead.
2

Check whether the current page has a search input

applyScannedPayloadToPage(payload) is called first. If #inventorySearchInput or #activitySearchInput is found in the DOM, the search value extracted from the payload is written to that input and the relevant data refresh function (refreshInventory or refreshActivity) is called. The modal closes and processing stops.
3

Populate the shipment form (if no search input was found)

populateShipmentForm(payload, context) is called. normalizeShipmentPayload() maps the payload (including all aliases) to canonical field names. Each [data-field] element in the active form context is then updated.
4

Pre-fill location and unit from stored records

findStoredShipmentByScanValue() searches warehouseShipments for an existing record whose hawb or mawb matches the scanned value. If found, the stored location is written to the location field and the stored unit is applied to the unit select — saving re-entry for repeat shipments.
5

Default date and time to Philippine time

If date or time were not present in the payload, they are defaulted to the current date and time in the Asia/Manila timezone using getPhilippineDateTime(). This ensures the form is always pre-filled with a valid timestamp even for minimal QR codes.
6

Close the modal and stop the camera

The scan modal is hidden, its inbound/outbound CSS classes are removed, and stopQrScanner() is called to release the camera stream.

Camera requirements

For QR scanning to function, the following conditions must be met:
  • The browser must support navigator.mediaDevices.getUserMedia (all modern browsers support this).
  • The page must be served over HTTPS or from localhost. Camera access is blocked by browsers on plain HTTP origins.
  • The system requests the environment (rear-facing) camera using { video: { facingMode: 'environment' } }. On desktop browsers with a single camera, the default camera is used.
  • The camera feed is rendered in the <video id="cameraPreview"> element inside the scan modal. jsQR reads pixel data from each video frame via an off-screen <canvas>.
If the browser shows a camera permission prompt, click Allow. If permission was previously denied, you must reset it in your browser’s site settings (usually accessible via the lock icon in the address bar) and reload the page.

Troubleshooting

The browser has blocked camera access for this site.Fix: Open your browser’s site settings (click the lock/info icon in the address bar → Site settings → Camera → Allow). On mobile devices, also check the operating system’s app-level camera permissions for your browser. After granting permission, reload the page and try scanning again.
The browser does not implement navigator.mediaDevices.getUserMedia, or the page is being served over plain HTTP (not HTTPS or localhost).Fix: Use a modern browser (Chrome, Edge, Firefox, Safari) and ensure the page is accessed via HTTPS. If a camera is not available, use manual keyboard entry for all form fields.
The scanner is running but the QR code is not triggering a result.Fix: Ensure there is adequate lighting on the code. Hold the device steady and position the QR code within the four-corner scan window shown on screen. Avoid glare on printed codes. jsQR requires the entire QR code to be visible within the camera frame. If the code is very small, move closer to it.
The decoded content could not be parsed as JSON and the current page has no search input to receive a plain-text value (i.e. you are on the Inbound & Outbound form, and the scanned string is not a recognizable HAWB or MAWB).Fix: Verify that the QR code was generated using the expected JSON payload format described above. Plain-text QR codes are only useful on the Inventory and Dashboard pages, not on the form itself.

Build docs developers (and LLMs) love