Skip to main content

Documentation Index

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

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

The YUSEN LIMO Warehouse System is a zero-dependency static web application. There is nothing to compile, bundle, or install for runtime. All you need is a folder of HTML, CSS, and JavaScript files served over a local web server — and a modern browser to open it. Follow the steps below to go from a fresh clone to a working warehouse dashboard in under five minutes.
1

Verify Prerequisites

You need a modern browser with JavaScript and Local Storage support. QR scanning additionally requires a device with a camera.Supported browsers
  • Google Chrome (recommended)
  • Microsoft Edge
  • Mozilla Firefox
  • Safari (macOS / iOS)
Optional: Node.jsNode.js is only needed if you want to run the authentication unit tests in tests/auth.test.js. It is not required to run the application itself.
node --version   # v16 or later recommended
2

Clone or Download the Repository

Clone the repository from GitHub, or download it as a ZIP archive and extract it to a local folder.
git clone https://github.com/raceliciouss/YUSEN-LIMO-WAREHOUSE.git
cd YUSEN-LIMO-WAREHOUSE
After cloning you should see the following at the root:
index.html
styles.css
README.md
assets/
pages/
tests/
3

Serve the Files with a Local Web Server

The app must be served over HTTP (not opened as a raw file:// URL) for the Camera API and QR scanning to work. Use any of the following options:Python (no install required on macOS / Linux)
python3 -m http.server 8080
VS Code Live Server extensionInstall the Live Server extension, right-click index.html in the Explorer panel, and select Open with Live Server. It automatically picks an available port (usually 5500).Node.js http-server (if already installed)
npx http-server -p 8080
Any static file server will work. The only requirement is that files are served over http://localhost or https:// so the browser treats the page as a secure context.
4

Open the Application in Your Browser

With your server running, navigate to the root URL in your browser:
http://localhost:8080
You should see the YUSEN LIMO login page with the Yusen Logistics branding. If you used VS Code Live Server the URL will typically be http://127.0.0.1:5500.
5

Log In with the Seeded Admin Account

Use the default admin credentials that are seeded by AuthService.initializeAuth() on first load:
FieldValue
User IDadmin001
PasswordAdmin@123
Enter the credentials and click Sign In. The login.js form handler calls AuthService.authenticateUser(), which validates the credentials against warehouseAuthAccounts in Local Storage, writes a session object to warehouseAuthSession, and redirects you to pages/dashboard.html.If you see an error, verify that Local Storage is enabled in your browser and that no browser extension is blocking script execution.
6

Explore the Dashboard

After login you will land on the Dashboard (pages/dashboard.html). This page is initialized by app.js through renderDashboardData(), which reads aggregated shipment data from Local Storage.From the sidebar you can navigate to:
  • Inbound / Outbound — record new shipment receiving or release events
  • Inventory — search, filter, and inspect current warehouse stock
  • User Management — (admin only) create and manage user accounts
  • Profile — edit your name, username, email, and profile picture
The topbar includes the global search bar, notification bell, and profile dropdown with a logout option.Try saving your first inbound shipment via Inbound / Outbound, then return to the Dashboard and Inventory to see the data reflected immediately — the warehouse:data-updated event triggers refreshInventory() and refreshActivity() automatically.

Important: Camera and QR Scanning

The Camera API (navigator.mediaDevices.getUserMedia()) used for QR scanning requires a secure context. This means the page must be served over https:// or from localhost / 127.0.0.1. If you access the app via a non-localhost IP address over plain HTTP, the browser will block camera access and the QR scan button will fail silently or show a permission error.

Opening as a Local File

You can open index.html directly by double-clicking it or dragging it into a browser (file:// protocol). Most features — login, shipment entry, inventory, profile editing, and data export — work correctly this way because they rely only on Local Storage and DOM APIs.However, QR scanning will not work when opened as a file:// URL on most browsers, because the Camera API is restricted to secure contexts. If you need QR scanning during development, always serve the app through a local web server as described in Step 3 above.

Next Steps

System Architecture

Understand the folder structure, file responsibilities, login flow, data flow, and global event system that ties the app together.

Dashboard

Learn how renderDashboardData() aggregates shipment statistics and how dashboard cards filter the activity report.

Authentication Overview

Deep-dive into AuthService, the session lifecycle, seeded accounts, and role-based access guards.

QR Scanning

Explore how the Camera API, jsQR, and normalizeShipmentPayload() work together to auto-fill shipment forms.

Build docs developers (and LLMs) love