Interface Overview
Thomas is a newly appointed OpEx manager at a multi-site pharma company. He has just received his ProBeya login and is looking at the screen for the first time. This guide walks Thomas — and you — through every part of the interface, using a real plant hierarchy as the example.
The Three Zones
The ProBeya interface is divided into three consistent areas that stay the same no matter where you navigate:
+--------------------------------------------------------------+
| TOP BAR |
| Breadcrumbs | View Tabs | Filter Sort Search Members |
+----------+---------------------------------------------------+
| | |
| SIDEBAR | MAIN CONTENT AREA |
| | |
| Org | Board / Table / Timeline / Calendar / Visual |
| Dashboard| |
| Workspaces |
| + Projects |
| | |
| Settings | |
| User | |
+----------+---------------------------------------------------+
Sidebar — Your Navigation Tree
The sidebar on the left is your primary navigation. Think of it as the plant org chart, but interactive.
Organization Switcher
At the very top sits a dropdown showing your current organization name and a first-letter badge. If you belong to multiple organizations (e.g., you consult across Acme Pharma and BioGenesis), click it to switch. Switching changes the subdomain context and reloads your data.
Dashboard Link
Just below the org switcher, the Dashboard link takes you to your personal command center — stats, overdue items, KPIs, and activity feed.
Workspace Tree
This is where ProBeya mirrors your physical plant structure. Here is what Thomas might see:
Brussels Manufacturing Site
+-- Sterile Fill-Finish
| +-- Line 1 TIER 1 Board
| +-- Line 2 TIER 1 Board
| +-- Packaging SQCDP
+-- Quality Control Lab
| +-- OOS Investigation Tracker
+-- Warehouse & Logistics
+-- Temperature Excursion Log
Dublin API Site
+-- Upstream Processing
| +-- Bioreactor Batch Tracker
+-- Downstream Purification
+-- Chromatography Run Log
Each workspace shows a colored icon (Factory for production sites, Flask for labs, Briefcase for admin departments). Click the chevron to expand or collapse child projects. Click the + button next to any workspace to create a new project inside it.
Settings and User Info
At the bottom of the sidebar: links to Settings (account, workspace, organization) and your user info (avatar, name, email) with a PWA Install button if the app is not yet installed on your device.
Collapsing the Sidebar
Click the toggle icon at the top of the sidebar to collapse it and maximize your working area. The sidebar width animates smoothly to zero. Click again to restore it.
Collapse the sidebar and expand an item detail panel simultaneously. You get a wide board view with the selected item's details visible on the right — perfect for walking through actions one by one.
Top Bar — Context and Controls
The top bar sits above the main content area and provides contextual controls for whatever you are viewing.
Breadcrumbs
Shows your current location: Workspace > Project > View. Click any segment to navigate up the hierarchy. For Thomas, this might read: Brussels Manufacturing Site / Sterile Fill-Finish / Line 1 TIER 1 Board / Board.
View Switcher
Tabs to toggle between the five core views:
| Tab | What it shows |
|---|---|
| Board | Kanban-style columns with draggable cards |
| Table | Spreadsheet rows with inline editing and frozen first column |
| Timeline | Gantt chart with zoom levels (week, month, quarter) |
| Calendar | Monthly grid with items as colored pills on their dates |
| Visual | Freeform infinite canvas with widgets, sticky notes, and charts |
Additional module tabs appear when enabled: KPI, Actions, Forms, Audits, Checklists, Gemba, DCM.
Filter, Sort, and Search
- Filter — open the filter panel to narrow items (e.g., "show only overdue CAPAs assigned to Quality"). See Filters and Sorting.
- Sort — configure single or multi-column sorting.
- Search — search within the current board, or press
Cmd+K/Ctrl+Kfor global search.
Presence Indicators
Avatars of other team members currently viewing the same board appear in the top bar. This is powered by WebSocket + Redis pub/sub — you can see in real time who is looking at the same data.
Main Content Area
This is where your work lives. The content changes depending on which view tab is active. On mobile devices (below 640px), the Board view switches to a vertical accordion layout where each group is a collapsible section — designed for touchscreens and gloved hands on the shop floor.
Item Detail Panel
Click any item — in any view — to open the detail panel, a slide-out sheet from the right. The board stays visible in the background so you maintain spatial context. The detail panel shows:
- Item title — click to edit inline
- Property grid — all field values with click-to-edit behavior
- Rich text description — for investigation notes, SOP references, or meeting minutes
- Comments — threaded conversations with mentions, rich text, and inline editing
- Activity log — full audit trail of who changed what and when
- File attachments — upload photos, batch records, training certificates
- Delete button — with confirmation dialog
Press Escape to close the panel.
Command Palette
Press Cmd+K / Ctrl+K from anywhere to open the command palette — a unified search and action interface:
- Search for items, projects, and workspaces by name
- Navigate directly to any page
- Execute commands without touching the mouse
Results update in real time as you type and are filtered to your current organization.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Cmd+K / Ctrl+K | Open command palette |
N | Create a new item |
E | Edit the selected item |
/ | Focus the search bar |
? | Show all shortcuts |
Escape | Close detail panel or dialog |
Tab | Move between cells in Table view |
Enter | Confirm edit, move to next row |
Responsive Design
| Screen size | Behavior |
|---|---|
| Desktop (1024px+) | Full sidebar, top bar, and content area side by side |
| Tablet (640-1023px) | Sidebar collapses to icons; content fills the width |
| Mobile (<640px) | Bottom navigation bar replaces sidebar; Board view uses vertical accordion |
Troubleshooting
| Problem | Solution |
|---|---|
| Sidebar not showing workspaces | The workspace list is fetched via tRPC. Check your network connection or refresh. |
| Organization switcher missing | You belong to only one organization. The switcher appears when you have multiple memberships. |
| Presence avatars not updating | WebSocket connection may have dropped. Refresh the page to reconnect. |
Next Steps
- Getting Started — create your first workspace and project
- Dashboard — customize your command center
- Board View — master the Kanban view for daily standups
- Workspaces — understand workspace hierarchy and permissions