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.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.
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)
tests/auth.test.js. It is not required to run the application itself.Clone or Download the Repository
Clone the repository from GitHub, or download it as a ZIP archive and extract it to a local folder.After cloning you should see the following at the root:
Serve the Files with a Local Web Server
The app must be served over HTTP (not opened as a raw VS Code Live Server extensionInstall the Live Server extension, right-click Any static file server will work. The only requirement is that files are served over
file:// URL) for the Camera API and QR scanning to work. Use any of the following options:Python (no install required on macOS / Linux)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)http://localhost or https:// so the browser treats the page as a secure context.Open the Application in Your Browser
With your server running, navigate to the root URL in your browser: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.Log In with the Seeded Admin Account
Use the default admin credentials that are seeded by
Enter the credentials and click Sign In. The
AuthService.initializeAuth() on first load:| Field | Value |
|---|---|
| User ID | admin001 |
| Password | Admin@123 |
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.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
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
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.