Skip to content

Navigating the portal

A tour of the web portal layout: sidebar, header, content area, and the common interaction patterns you'll see on every page.

Required role

Any role with web portal access.

Overview

The portal uses a classic admin-panel layout: a fixed sidebar on the left, a header across the top, and a main content area that changes based on what you've selected. Most pages follow the same patterns for tables, filters, and form layouts, so once you learn one, you know them all.

The layout

┌─────────────────────────────────────────────────┐
│  Header: search │ notifications │ profile       │
├──────────┬──────────────────────────────────────┤
│ Sidebar  │  Breadcrumbs                         │
│          │                                      │
│ Dashboard│  Main content                        │
│ Tasks    │                                      │
│ Mapping  │                                      │
│ ...      │                                      │
│          │                                      │
└──────────┴──────────────────────────────────────┘

The sidebar

The sidebar is your primary navigation. What appears in it depends on your role — you only see menu items that lead to pages you're allowed to open.

Top-level groups (your mileage varies by role):

  • Dashboard — the landing page.
  • Tasks — task list, drafts, history.
  • Assignments — drag-and-drop assignment interface.
  • Approvals — task review queue (Supervisor / Admin).
  • Scheduling — recurring schedules and calendar.
  • Mapping — asset hierarchy editor.
  • Components — component catalogue.
  • Master data — thresholds, units, products, tools, etc.
  • Safety procedures — safety checklist definitions.
  • Shutdowns — shutdown reports and history.
  • NFC tags — tag lifecycle and skip report.
  • Reports — dashboards and exports.
  • Users (Admin / Mapper) — user management.
  • Roles (Admin) — custom role configuration.
  • Settings (Admin) — company-wide configuration.

Collapse / expand

The sidebar has a collapse button at the top. Collapsed, it shows only icons — useful on smaller screens. Your preference persists across sessions.

Role-based visibility

If you don't see a menu item described in this handbook, it's probably because your role doesn't have permission to open that page. See Permissions matrix.

The header

Click the search icon (or press /) to focus the global search. It searches across:

  • Asset hierarchy names.
  • Task names.
  • User names.
  • Component names.

Type a few characters, pick a result, and the portal jumps straight to the matching item.

Notifications

The bell icon shows your unread notification count. Click to open the notification feed. Each notification links to the relevant entity (the task, the repair request, the shutdown). See Notifications.

Profile menu

Click your avatar (top right) to open the profile menu:

  • Profile — name, email, avatar, language, password.
  • Notifications — notification preferences.
  • Help — link to this handbook.
  • Sign out — ends your session.

If you're a PegotecUser with access to multiple companies, the header also includes a company switcher dropdown.

The breadcrumb bar

Just under the header, the breadcrumb shows where you are:

Home › Mapping › Production Site 1 › Line A › Section 3

Each segment is clickable — jump back up the hierarchy in one click.

Common table patterns

Most listing pages show data in a table with the same controls:

Sorting

Click a column header to sort ascending. Click again for descending. A small arrow shows the current sort direction.

Filtering

Above the table, a filter bar offers:

  • Text search — filters across searchable columns.
  • Dropdown filters — scope by category (status, site, role, etc.).
  • Date range — for time-bound data (reports, tasks, activity logs).

Filters persist across sessions — the next time you open the page, your last filter state is restored. If a page looks empty when you return, check whether a leftover filter is hiding your data.

Pagination

Large tables paginate by default at 25 rows. Change the page size at the bottom-right. For tables with tens of thousands of rows, use filters rather than scrolling through pages.

Bulk actions

Where supported, rows have a checkbox in the first column. Select rows, then use the bulk action bar that appears at the bottom of the viewport:

  • Approve selected.
  • Assign selected.
  • Delete selected (with confirmation).
  • Export selected as CSV.

Row actions

Each row usually has a three-dot menu or action icons at the right end:

  • Edit — open the detail page.
  • Duplicate — create a copy.
  • Archive / deactivate — soft delete.
  • Delete — hard delete (with confirmation).

Common form patterns

Validation

Required fields are marked with a red asterisk. If you try to submit without filling them, inline error messages appear next to the offending field — they don't scroll off-screen.

Save / Save and continue

Most forms have two buttons:

  • Save — persists and returns you to the list.
  • Save and continue — persists and keeps you on the form, useful for iterative editing.

Discard changes

If you have unsaved changes and navigate away, the portal prompts you to confirm.

Dependent fields

Some forms update downstream fields based on earlier selections. Changing "Production site" may reset "Line" and "Section" because those lists depend on the site.

Real-time updates

The portal maintains a WebSocket connection to the server. When data changes (a new task gets assigned to you, a task you're watching gets submitted for approval, a shutdown is reported), the relevant views update without a page refresh.

A small indicator in the header shows connection state:

  • Green — connected, receiving real-time updates.
  • Orange — reconnecting.
  • Red — disconnected, data may be stale.

If the connection drops, the portal keeps working — but you'll need to refresh to see changes made by others.

Dark mode

Click the sun/moon toggle in the header (if visible) to switch between light and dark themes. Your choice persists across sessions.

Keyboard navigation

The portal is mouse- and touch-driven; no global keyboard shortcuts are implemented.

Responsive behaviour

The portal is responsive down to about 1024 × 600. Below that, some dense tables force horizontal scrolling. Tablets in portrait and small laptops work fine; phones are technically supported but awkward — use the mobile app for phone-size work.

Multi-tab behaviour

You can open multiple tabs of the portal. Each tab shares the same session. Real-time updates flow to every open tab. If you sign out in one tab, all tabs sign out.

Signing out and sessions

  • Click your avatar → Sign out to end the session.
  • Sessions idle-expire after a configurable window (default 8 hours).
  • After expiry, the next click sends you to the login screen. Your form state is lost — don't leave half-filled forms overnight.

Help in the UI

Many screens include contextual help:

  • Hover over a ? icon next to a field for a tooltip explanation.
  • Click Help in the profile menu to jump to this handbook.

Troubleshooting

Problem See
Menu item is missing Your role may not have access — Permissions matrix
Page looks empty Filters may be hiding data — clear the filter bar
Real-time updates aren't arriving Sync is stuck or failing
Portal is slow Performance is slow
Keyboard shortcuts don't work Make sure focus isn't on a text input; some shortcuts are suppressed while typing