Explore

Personel Page

List Travel Agent Page

Timedoor Indonesia

Last edited 27 days ago by Timedoor Indonesia.

1. Header

Purpose: Show page title and Hikaria logo on the right

Content and Elements:

Page Title Text “Personel”

Hikaria Logo

2. Tabs

Purpose: Switches between list view of driver and travel agent

User Flow:

App Launched → Bottom Navigation → Personnel → List Driver Page → Tap Travel Agent → List Travel Agent

Content and Elements:

2 Tabs with icon and text:

Person icon & “Driver”

Usersfour icon & “Travel Agent” (active)

Behavior and Interactions:

onClick change list page data:

Driver → Fetch and Load Driver list data

Travel Agent → Fetch and Load Travel Agent list data

Data Sources:

Static

State:

Default (inactive)

⁠

⁠

Active

⁠

⁠

3. Personnel List

Purpose: Displays the list of personnel filtered by selected type – travel agent

Content and Elements:

Person Avatar

Name

Phone Number

Behavior and Interactions:

Scrollable

Data Sources:

Dynamic

API Name:

Google Spreadsheet API

State:

Empty

⁠

4. Add Button

Purpose: Allow user to add new personnel to the list

Content and Elements:

Primary button with text “Add Travel Agent”

Behavior and Interactions:

onClick navigate to Add Travel Agent Page

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.