Add Point Form

This modal window allows users to create a new point (e.g., a loading dock, a refueling station) with address, working hours and contact details.

Tab Navigation

Active Tab: Address
Additional Tabs:
- Working hours – for operating times
- Contact person – for contact details

Navigation between tabs happens without leaving or submitting the form.

UI Elements in the “Address” Tab

Point name*

Type: Text field
Placeholder: New point
Validation: Required
Purpose: Assigns a user-friendly label for the location (e.g., “Depot Hamburg”).

Type of point*

Type: Dropdown selection
Placeholder: Select
Validation: Required
Purpose: Defines operational purpose:
- Example types could include Loading / Unloading, Refuel, Maintenance, etc.

Address*

Type: Address search field + integrated map view
Placeholder: Search for an Address
Validation: Required
Purpose: Defines the geographic location for the point.
Features:
- Autocomplete address search
- Map widget (powered by HERE Maps) visualizes selected location
- Text: No address added shown if empty

Time at stop

Type: Time duration input (hours : minutes)
Placeholder/Default: 01 : 00
Purpose: Indicates estimated stop duration at the point (for scheduling/route planning).
Validation: Likely optional but recommended.

Functional Behavior

Field Validations: All starred fields (name, type, address) must be filled before enabling the save button.
Address Input: Likely requires a valid match from the HERE Maps API.
Map Display: Dynamically updates based on address selection.
Tab Navigation: Saves in-progress data between tabs without resetting.

Usability Best Practices

Pre-fill defaults: For “Time at stop”, which helps reduce friction.
Live feedback: Instant address search and map update enhances user confidence.
Clear structure: Logical top-to-bottom form flow, enhancing completion rates.

Contact Person Tab

The Contact Person tab collects contact information for a person associated with the point (e.g., a warehouse manager, site supervisor, or logistics coordinator).

This ensures that drivers or planners have immediate access to responsible individuals at the destination.

UI Elements in the “Contact Person” Tab

Name

Type: Text field
Placeholder: Contact name
Purpose: Captures the full name of the main point of contact.

Position

Type: Text field
Placeholder: Contact position
Purpose: Describes the contact’s role or title (e.g., Warehouse Manager, Site Supervisor).

Phone nr.

Type: Phone input field
Prefix: + to indicate international dialing format
Placeholder: Contact phone nr.
Purpose: Primary phone number for quick calling or messaging.

Email

Type: Email input field
Placeholder: Contact email
Purpose: Captures the work email address of the contact person.

Comments

Type: Multiline text area
Placeholder: Type your message here
Purpose: Additional information about the point or the contact such as:
- “Call 30 minutes before arrival”
- “Only available from 8 AM to 5 PM”
- “Alternative contact: John Doe”

Functional Behavior

Field Validations: Typically optional for most fields, but strongly recommended to add at least one method of contact (Phone or Email).
Save Availability: Save button is always available, but points without contacts may trigger warnings in advanced implementations (best practice).
Tab Preservation: Data filled across tabs (Address, Working hours, Contact person) remains saved until form submission or cancellation.

Usability and Practical Notes

Phone and Email Structure: Inputs are formatted to avoid mistakes (e.g., “+” enforced for phone numbers).
Multi-contact Management: If needed, multiple contacts could be supported via future expansions.
Driver Convenience: Ensures real-time communications during route interruptions or delays.

The Contact Person tab completes the creation of a point of interest by ensuring human, direct access at the physical location, enhancing reliability and operational flexibility.