Shipment Tracking Management: Complete Dashboard Guide

BSTD's Shipment Tracking Management module provides a powerful, centralized dashboard to monitor, manage, and communicate regarding all your shipments in real-time. This comprehensive guide covers every feature, interaction, and workflow available in the dashboard.

From live statistics cards and advanced filtering to direct customer communication via WhatsApp, status dropdowns with location capture, and full tracking history management — this page documents everything you need to master your logistics operations.

Live Dashboard Statistics

At the top of your dashboard, four interactive statistic cards provide an instant overview of your entire shipment portfolio. These cards are not just display elements — they function as active filters.

• Interactive Filtering:Click any stat card to instantly filter the shipment list below. The active card displays an "ACTIVE" badge and a ring highlight. Click again to clear the filter.
• Real-time Counts: Numbers update automatically as shipments are added, edited, or deleted from the system.
• Visual Status Grouping:The "In Transit" card intelligently groups three statuses: Picked Up, In Transit, and Out for Delivery, giving you a complete view of active movement.
• Problem Tracking: The Delayed/Cancelled card consolidates exceptions requiring immediate attention.

Search & Advanced Filtering

The dashboard provides powerful search and filter capabilities to help you locate specific shipments instantly, even with large volumes of data.

Search Capabilities

• Multi-field Search: The search bar scans across LR Number, Customer Name, and Customer Mobile simultaneously. Type any partial match to filter results instantly.
• Case-insensitive:Searches are case-insensitive, so "LR001", "lr001", and "Lr001" all return the same results.
• Real-time Filtering: Results update as you type — no need to press Enter or click a search button.

Date Range Filtering

• Start Date: Select a start date to show only shipments created on or after that date.
• End Date: Select an end date to show only shipments created on or before that date.
• Combined Range: Use both fields together to view shipments within a specific operational period.

Filter Controls

• Clear All:The "Clear All" button resets search text, date range, and stat filter in one click, restoring the full shipment list.
• Reload Data:The "Reload" button fetches fresh data from the server, showing skeleton loading cards during the refresh.
• Active Filter Indicator: When a stat filter is active, a banner appears below the stat cards showing the active filter with a one-click clear option.
• Results Counter:The dashboard displays "Showing X of Y shipments" so you always know the scope of your current view.

Shipment Cards

Each shipment is displayed as a detailed card containing all critical information organized in a clear, scannable layout. Cards are arranged in a responsive grid (2 columns on extra-large screens, 1 column on smaller devices).

Card Header Information

• LR Number:Prominently displayed as the card title (e.g., "LR No: LR-2024-001"). This is the primary identifier for the shipment.
• Status Badge: A color-coded badge shows the current status with an icon:
  • ● Picked Up — Blue with Truck icon
  • ● In Transit — Amber with Route icon
  • ● Out for Delivery — Violet with Navigation icon
  • ● Delivered — Emerald with PackageCheck icon
  • ● Delayed — Orange with Clock icon
  • ● Cancelled — Red with XCircle icon
• Route:From and To locations displayed as "Mumbai → Delhi" format.
• Customer Name: The consignee or primary contact person for the shipment.
• Expected Delivery: The target delivery date in DD/MM/YYYY format.
• Created Date & Time: Exact timestamp when the shipment was created in the system, formatted as DD/MM/YYYY, HH:MM.

Card Body Details

• Shipment ID: The internal unique identifier (UUID) for database reference.
• Action Buttons: Each card provides quick-access buttons for Tracking History, Edit, and Delete operations.

Tracking Preview

If a shipment has tracking updates, the card displays the two most recent updates in a compact preview section, showing status, location, note, and timestamp. This gives you immediate visibility without opening the full history modal.

Status Management

The dashboard provides a streamlined workflow for updating shipment statuses with automatic tracking log generation and location capture.

Status Dropdown

Each shipment card features a native dropdown menu (styled with custom theme colors) containing all six predefined status options. The current status is pre-selected.

• One-click Change: Select a new status from the dropdown to initiate an update.
• Location Prompt:Upon status change, a browser prompt asks for the current location. This is recorded in the tracking history. You may enter a location or leave it as "N/A".
• Auto-logging:Every status change automatically creates a tracking update entry with timestamp, new status, location, and a note: "Status changed to [Status] via dashboard."
• Loading State:While the update is being saved to the server, the dropdown is replaced with a spinning loader and "Updating..." text to prevent duplicate submissions.
• Optimistic UI: The status updates immediately in the interface while the server request completes in the background, providing instant visual feedback.

Status Lifecycle

Tracking History Modal

Click the "Tracking History" button on any shipment card to open a comprehensive modal displaying the complete chronological journey of the shipment.

Timeline Visualization

• Vertical Timeline: Updates are displayed in a vertical timeline with connecting lines, sorted by timestamp (newest first).
• Status Indicators: The most recent update shows a filled colored dot, while older updates display outlined dots.
• Detailed Entries: Each entry shows the status name, location, descriptive note, and full timestamp (DD/MM/YYYY, HH:MM:SS).
• Scrollable: The modal content area supports scrolling for shipments with extensive history.

Managing History Entries

• Delete Individual Updates: Each history entry has a delete button (trash icon). Clicking it triggers a browser confirmation dialog before permanently removing the entry.
• Add New Updates: Click the plus (+) button at the bottom of the modal to reveal a form for adding custom tracking updates.

Direct Customer Communication

Every shipment card provides instant communication shortcuts, allowing you to contact customers directly without leaving the dashboard or manually dialing numbers.

• Phone Call:Clicking the phone icon opens your device's default calling application with the customer's mobile number pre-filled.
• WhatsApp Integration: The WhatsApp button automatically formats the phone number by removing non-digit characters and prepending the India country code (+91) if not present. It opens WhatsApp Web or the mobile app with a direct chat link.
• Email Shortcut: If the customer has an email address on file, the mail icon opens your default email client with a new message addressed to the customer. If no email exists, the button is hidden.
• Hover Effects: Communication buttons feature color-themed hover states — blue for phone, emerald for WhatsApp, and subtle gray for email.

Creating New Shipments

Click the "Add New Shipment" button in the top-right header to open the creation modal. This streamlined form captures all essential shipment details.

Required Fields

• LR Number: The unique Lorry Receipt number (e.g., LR-2024-001). This is the primary identifier and cannot be duplicated.
• From Location: The origin city or warehouse where the shipment originates.
• To Location: The destination city or delivery point.
• Customer Name: The full name of the consignee or receiving party.
• Customer Mobile: A 10-digit Indian mobile number. The input validates the format with HTML5 pattern validation.
• Expected Delivery Date: Defaults to 5 days from today. Uses a native date picker with automatic format conversion (YYYY-MM-DD for display, DD/MM/YYYY for backend storage).

Optional Fields

• Current Status:Defaults to "Picked Up" but can be set to any status during creation.
• Customer Email: Optional email address for the customer (not shown in creation form but editable later).

Form Behavior

• Validation: All required fields must be filled before submission. The mobile field enforces a 10-digit numeric format.
• Date Handling: The date picker automatically adapts to your system theme (light/dark) for optimal visibility.
• Success Flow: After successful creation, the modal closes, the shipment list refreshes, and the new shipment appears in the dashboard.

Editing Shipment Details

Click the "Edit" button on any shipment card to open the edit modal. This uses the same form as creation but pre-populated with existing data and without the LR Number field (which is immutable).

• Pre-populated Data: All existing fields are filled automatically, including date conversion from DD/MM/YYYY (backend format) to YYYY-MM-DD (input format).
• Editable Fields: From Location, To Location, Customer Name, Customer Mobile, Expected Delivery Date, and Current Status can all be modified.
• LR Number Protection: The LR Number field is hidden during editing to prevent accidental changes to the primary identifier.
• Save Changes:Clicking "Save Changes" updates the shipment on the server and refreshes the dashboard with the new data.

Deleting Shipments

The delete functionality includes multiple safeguards to prevent accidental data loss.

• Two-step Confirmation:Clicking the Delete button first sets the shipment as a "delete target" and opens a styled confirmation modal (not a native browser alert).
• Visual Warning: The confirmation modal features red-themed styling, the LR number prominently displayed, and a clear warning that the action cannot be undone.
• Cancel Option: Both the backdrop click and the Cancel button safely dismiss the modal without deleting anything.
• Permanent Removal: Upon confirmation, the shipment is permanently deleted from the server and immediately removed from the dashboard view.

Adding Custom Tracking Updates

Beyond automatic status-change logs, you can manually add detailed tracking updates to provide granular visibility into a shipment's journey.

Add Update Form

Inside the Tracking History modal, click the plus (+) button to reveal the add update form with three fields:

• New Status (optional):Select a status from the dropdown or leave as "No Change" to add a note without altering the main status.
• Location:Enter the current physical location of the shipment (e.g., "Nashik Highway Toll Plaza").
• Note:A textarea for detailed descriptions (e.g., "Vehicle stopped for mandatory inspection. Expected delay: 2 hours.").

Update Behavior

• Timestamp Auto-generation: The system automatically records the current date and time when you submit the update.
• Form Toggle: Click Cancel to hide the form, or Add Update to submit and append the entry to the timeline.
• Server Sync: After adding or deleting an update, the dashboard silently refreshes the shipment data to ensure all views are synchronized.

Dark Mode & Theme Support

The entire dashboard is fully responsive to your system theme preferences, providing an optimal viewing experience in both light and dark modes.

• Dynamic Color System: All components use the useThemeColorshook to automatically adjust backgrounds, borders, text, and input colors based on the active theme.
• Status Colors: Status badges maintain appropriate contrast in both modes — using lighter tints in light mode and semi-transparent backgrounds in dark mode.
• Input Styling: Date inputs and form fields adapt their color scheme using the CSS color-schemeproperty to match the system theme.
• Skeleton Loading: Loading skeletons use theme-aware background colors (gray-200 in light, gray-800 in dark) for smooth visual transitions.
• Modal Backdrops: All modals use semi-transparent black backdrops with backdrop blur for a polished, modern feel regardless of theme.