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 notification system generates contextual alerts from recent shipment activity and surfaces them in a panel accessible from every authenticated page. Notifications are not pushed from a server — they are derived on the client from the most recently saved entries in warehouseShipments and stored in Local Storage so that read/unread state persists across page reloads and browser sessions.

​
Notification Bell

The topbar on every authenticated page contains a notification button (.notification-btn) rendered as a bell icon (bi-bell-fill). When there are unread notifications, a badge element (.badge) overlays the bell and displays the unread count. The badge is hidden (display: none) when all notifications have been read. Badge state is maintained by updateNotificationBadge(), which counts items where item.read === false in the current notificationState array and writes that count to the badge element’s textContent.

​
Notification Panel

Clicking the notification bell creates and appends a .notification-panel overlay element to the page if it does not already exist, then toggles its visibility. The panel slides open from the topbar and displays all current notifications. The panel is structured as:
  1. Header — displays “Notifications” as the panel title alongside a Mark all as read button (.mark-all-read, using the bi-check2-all icon).
  2. Body — a scrollable list of .notification-item elements, one per notification object in notificationState.
  3. Footer (.notification-footer) — a View All Notifications link (.view-all-notifications).
Each .notification-item receives an unread or read class based on item.read, and carries a data-id attribute matching the notification’s id field. The item displays a type-specific icon, the notification title, description, meta string, and a time label.

​
Notification Object Structure

Each entry in notificationState conforms to this shape:
FieldTypeDescription
idstringUnique identifier for the notification, composed of a type prefix and savedAt timestamp (e.g. latest-1704067200000-inbound)
typestringOne of inbound, outbound, status, inventory, warning, or shipment
titlestringShort human-readable headline (e.g. "New inbound shipment")
descriptionstringFull sentence describing the event (e.g. "A new inbound shipment for HAWB-001 arrived and is ready for receiving.")
metastringReference label displayed in bold under the description (e.g. "HAWB HAWB-001", "MAWB MAWB-999", or "Client ACME Corp")
timestringHuman-readable time label (e.g. "Just now", "Recently updated", "Needs attention")
readbooleanfalse = unread (shown with unread class and “New” label); true = read

​
Notification types and icons

type valueIcon class
warningbi-exclamation-triangle-fill
inventorybi-box-seam
statusbi-arrow-repeat
inbound, outbound, shipmentbi-truck

​
How Notifications Are Generated

Notifications are not stored directly by the save workflow. Instead, buildNotificationState() is called by refreshNotificationState() every time warehouse:data-updated fires. It reads warehouseShipments, sorts records by savedAt descending, and derives up to five notification items from the six most recent raw shipment entries:
  1. Latest shipment notification (type: inbound or type: outbound) — generated from the most recently saved record. The title reads “New inbound shipment” or “New outbound shipment” depending on entryType. Starts as read: false.
  2. Shipment status updated (type: status) — generated from the second most recent record, referencing the latest aggregated status value. Starts as read: false.
  3. Inventory updated (type: inventory) — generated from the third most recent record, noting that inventory values were refreshed. Starts as read: true by default.
  4. Low inventory warning (type: warning) — generated if any of the six recent records has a quantity value of 2 or fewer. Starts as read: true by default.
  5. Shipment added (type: shipment) — generated from the fourth most recent record as a general confirmation entry. Starts as read: true by default.
If no shipment records exist yet, a single placeholder notification is generated with id: 'empty-notifications' and the message “No recent shipment activity.” The meta field for each notification is resolved in priority order: HAWB → MAWB → client → "Warehouse".

​
Mark as Read

​
Mark all as read

Clicking the .mark-all-read button in the panel header maps notificationState to set every item’s read property to true, calls saveNotificationState() to persist the change, and re-renders the panel and badge. All items switch to the read class and the badge disappears.

​
Mark individual as read

Clicking any .notification-item in the panel body finds the matching item by data-id, sets its read property to true, and calls saveNotificationState() followed by renderNotificationPanel() and updateNotificationBadge(). The item’s class changes from unread to read and its time label changes from “New” to “Read”.

​
Local Storage Persistence

Notification state is persisted under the key warehouseNotificationState. The value is a JSON-serialised array of notification objects. 
// key: warehouseNotificationState
[
  {
    "id": "latest-1704067200000-inbound",
    "type": "inbound",
    "title": "New inbound shipment",
    "description": "A new inbound shipment for HAWB-20240101-001 arrived and is ready for receiving.",
    "meta": "HAWB HAWB-20240101-001",
    "time": "Just now",
    "read": false
  },
  {
    "id": "status-1704060000000",
    "type": "status",
    "title": "Shipment status updated",
    "description": "Shipment HAWB-20231231-007 now shows status RECEIVED.",
    "meta": "HAWB HAWB-20231231-007",
    "time": "Recently updated",
    "read": false
  }
]
loadNotificationState() reads this key on DOMContentLoaded. If the key is absent or the stored value is not a valid JSON array, an empty array is returned and no error is thrown. saveNotificationState() writes the current notificationState array back to the key after every read or mark-all-read operation. When refreshNotificationState() rebuilds the notification list from fresh shipment data, it preserves existing read/unread state for any id that already exists in the stored array using a Map lookup. This means that marking a notification as read survives a page navigation or browser refresh — the read: true value for that id is re-applied when the notification is regenerated on the next load.
Because warehouseNotificationState is written to localStorage (not sessionStorage), notification read/unread state persists across page reloads, tab closures, and browser restarts for as long as the user’s browser storage for the origin is not cleared. Opening a second browser tab for the same origin will share the same notification state once either tab triggers a save and the other tab reloads.

Build docs developers (and LLMs) love

Get started for freeTalk to us