The YUSEN LIMO Warehouse System is a fully browser-based warehouse management system (WMS) built for Yusen Logistics Philippines Inc. It provides operations teams with a unified interface for recording inbound and outbound cargo, monitoring live inventory, managing user accounts, and generating activity reports — all without a backend server. Every feature runs entirely in the browser, with data persisted in the browser’s Local Storage.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.
Key Features
Shipment Entry
Tabbed inbound and outbound forms capture client details, HAWB/MAWB numbers, quantities, trucker and driver information, cargo condition, and warehouse location. Each saved record is immediately reflected in inventory and activity views.
Inventory Management
A searchable, filterable, and paginated inventory table aggregates shipments by reference number. A slide-out detail drawer displays full shipment metadata and a chronological outbound release history.
QR Code Scanning
Camera-based QR scanning via
jsQR and the Camera API auto-fills shipment forms or searches inventory. JSON payloads with standard field aliases are decoded by normalizeShipmentPayload(), with fallback to plain HAWB/MAWB text.Role-Based Access
Two roles — Admin and Employee — control which pages and actions are available. Admin-only routes (
user-management.html) are guarded by guardPageAccess(). Navigation items are conditionally shown via the .admin-only-nav CSS class.Notifications
A notification bell in the topbar displays an unread badge. The panel is generated from recent shipment activity and persisted under
warehouseNotificationState. Items can be individually or bulk-marked as read.Data Export
Activity data can be exported as
.xlsx (via the xlsx CDN library) or as a formatted PDF (via jsPDF and jsPDF-AutoTable). Exports operate on the currently active filtered dataset.Technology Stack
| Technology | Role | Notes |
|---|---|---|
| HTML5 | Page structure | Static page templates for login and all authenticated views |
| CSS3 | Styling | Responsive layout, component appearance, and custom breakpoints at 900px and 640px |
| Vanilla JavaScript | Application logic | Auth, persistence, rendering, QR scanning, and all UI interactions |
| Bootstrap Icons | Icons | Buttons, navigation links, and UI affordances |
| Material Symbols | Icons | Supplementary symbol icons throughout the UI |
| Local Storage | Data persistence | Stores accounts, sessions, shipments, profiles, pictures, and notifications |
| jsQR | QR decoding | Decodes QR payloads from per-frame canvas image data |
| Camera API | Camera access | navigator.mediaDevices.getUserMedia() provides the live scanner feed |
| xlsx | Excel export | Exports filtered activity report data as .xlsx files |
| jsPDF + jsPDF-AutoTable | PDF export | Generates printable PDF reports from activity data |
Intended Users
- Admin
- Employee
Admin users have full access to every page and operation in the system.Accessible pages
- Dashboard (
pages/dashboard.html) - Inbound / Outbound (
pages/inbound-outbound.html) - Inventory (
pages/inventory.html) - Profile (
pages/profile.html) - User Management (
pages/user-management.html) — admin-exclusive
- Create, view, edit, and delete user accounts via
AuthService.createUser(),AuthService.updateUser(), andAuthService.deleteUser() - Reset any user’s password to the default (
Password123) viaAuthService.resetPassword() - Toggle user active/inactive status via
AuthService.toggleUserStatus() - Access all shipment entry, inventory, and reporting features
- Admin routes are protected by
guardPageAccess()inassets/app.js, which checksAuthService.getCurrentUser()?.role === 'admin' - Non-admin users attempting to open an admin route are redirected to
dashboard.html
Client-Side Architecture
The YUSEN LIMO Warehouse System is entirely client-side. There is no backend server, database, or API. All data — user accounts, sessions, shipment records, profiles, and notifications — is stored in the browser’s Local Storage. This means data is specific to the browser and device being used. Clearing browser storage or switching browsers will reset all application data to the seeded defaults.
Default Seeded Accounts
When the app starts for the first time (or when Local Storage contains no account data),AuthService.initializeAuth() seeds two default accounts. These are defined in the seededAccounts array inside assets/auth.js:
| Role | Username | Password |
|---|---|---|
| Admin | admin001 | Admin@123 |
| Employee | emp001 | Employee@123 |
ADM-001) and the employee account with Joseph Dela Cruz (Employee ID: EMP-001). Both accounts are active by default and should be updated after first login in any shared-use deployment.