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 Dashboard (pages/dashboard.html) is the first screen authenticated users land on after login. It aggregates all shipment data stored in Local Storage and presents three live metric cards, a recent shipments list, and a full activity report with search, filtering, and export capabilities. Every value on the page is computed client-side from the warehouseShipments key in Local Storage via aggregateShipmentsByReference().
Metric Cards
Three summary cards are displayed at the top of the page. Each card reads from the same aggregated shipment dataset and updates whenever renderDashboardData() runs.
| Card | Element ID | Value Computed |
|---|
| Total Shipments | dashboardTotalShipments | Count of unique aggregated shipment references (shipmentRows.length) |
| Cargo in Warehouse | dashboardCargoInWarehouse | Sum of remainingValue across all aggregated rows (qtyInValue - qtyOutValue) |
| Outgoing Today | dashboardOutgoingToday | Count of aggregated shipments with outbound activity on the current date |
data-dashboard-filter attribute:
| Card Element ID | data-dashboard-filter value |
|---|
dashboardTotalShipmentsCard | all |
dashboardCargoInWarehouseCard | remaining |
dashboardOutgoingTodayCard | outgoingToday |
Card-as-filter behaviour
Clicking any metric card calls applyDashboardActivityFilter(filterType), which:
- Sets the internal
dashboardActivityFilter variable to the card’s filter type.
- Calls
clearActivityInputs() to reset all active search, date-range, transaction, and location filter inputs in the activity toolbar.
- Calls
setActiveDashboardCard(filterType) to add the active-dashboard-card CSS class to the clicked card and remove it from the others.
- Calls
refreshActivity() to re-render the activity table with the new filter applied.
When dashboardActivityFilter is set to remaining, the activity table shows only shipments that still have cargo on hand (remainingValue > 0). When set to outgoingToday, only shipments with an outbound event dated today are shown. The all filter removes any card-level restriction and shows every aggregated record.
Recent Shipments
Below the metric cards, the dashboard renders a short list of the most recently saved shipment records. The list is populated by renderDashboardData() into the #recentShipmentsBody <tbody> element.
Records are sorted by savedAt in descending order — the most recently saved record appears first. Up to five rows are displayed, each showing:
- Client —
shipment.client
- HAWB —
shipment.hawb
- Status — badge rendered from
shipment.status
- Location —
shipment.location
- Date / Time —
shipment.date and shipment.time displayed in the same cell
Activity Report
The full activity table appears below the recent shipments section. It is driven by activityData, which is the result of mapping each aggregated record through normalizeShipmentForActivity().
Search
The #activitySearchInput field performs a case-insensitive substring match against the hawb, mawb, and client fields of each activity row. Results update on every input event.
Filters
Clicking the Filters toggle (#activityFilterToggle) expands #activityFilterPanel, which contains:
- Date Range — A custom calendar popover (
#activity-date-range-popover) with preset options and a custom range picker. Available presets: Today, Yesterday, Last 7 Days, Last 30 Days, This Month, Last Month, Custom Range. Selecting a preset or applying a custom range updates the hidden #activity-date-range select and #activity-date-range-input text field, which refreshActivity() reads.
- Transaction Type — Free-text input (
#activity-transaction) matched against transactionType.
- Warehouse Location — Free-text input (
#activity-location) matched against location.
- Clear Filters — The
#activityClearFilters button resets all filter inputs and re-renders the table.
Activity table columns
| Column | Source field |
|---|
| Month | Derived from dateIn |
| Client | client |
| MAWB | mawb |
| HAWB | hawb |
| Date In | dateIn |
| Qty In | qtyInValue |
| Date Out | dateOut |
| Qty Out | qtyOutValue |
Pagination and page size
Row count is controlled by the .page-size-button group (5, 10, 20, All). The default active page size is 10. Pagination controls are rendered into #activityPagination.
Export Capabilities
Both export buttons operate on the currently filtered activity dataset — the same rows visible in the table at the time of the export.
Excel export
The Export Excel button (.excel-btn) uses the xlsx CDN library. It converts the filtered activity rows into a worksheet and triggers a .xlsx file download.
PDF export
The Export PDF button (.pdf-btn) uses jsPDF together with the jsPDF-AutoTable plugin. AutoTable formats the filtered dataset as a paginated table inside the PDF output.
Both libraries are loaded via <script> tags at the bottom of pages/dashboard.html and are not bundled — they must remain accessible at their CDN URLs.
renderDashboardData() is called in two places:
- On initial load — triggered by the
DOMContentLoaded event at the bottom of assets/app.js.
- On data change — triggered by the
warehouse:data-updated custom event, which is dispatched by saveStoredShipments() every time a shipment is persisted to Local Storage.
This means the metric cards, recent shipments list, and activity table all reflect the latest data immediately after any save operation completes, without requiring a page reload.