Tabs ( Header Navigation )

View 2: Header Navigation – Tabs

This version is written as official product + technical documentation, with clear flow, conceptual explanation, and visual anchoring, while fully preserving your logic and implementation details.

Overview

The Header Navigation is the primary filtering layer of the Tabs system.
It appears as a top horizontal navigation bar and allows users to instantly filter the customer list by clicking on tabs.

Each tab in the header represents a customer segmentation rule:

“Show me only customers that have records in this tab.”

This view transforms tabs from simple data containers into real-time filtering tools that drive daily workflow and navigation.

Purpose of Header Tab Filtering

The Header Navigation exists to:

Provide one-click customer segmentation
Allow users to switch contexts instantly
Reduce manual filtering and searching
Surface operational data directly in navigation
Make tab-based workflows accessible without entering customer profiles

This is the fastest way to answer questions like:

“Which customers have open tasks?”
“Which customers are in this workflow stage?”
“Which customers have onboarding records?”

Location and Visibility

UI Location: Top horizontal header
Visibility: Always visible when logged in

The header is loaded on every authenticated page, making tab filtering globally accessible.

Access and Display Conditions

A tab appears in the header only when all conditions are met:

Header Visibility Enabled
- show_in_header = 1 in Tab Settings
User Has Access
- User is owner or admin
- OR tab is shared with the user via shard_with
Folder Compatibility
- Tab is assigned to at least one folder
- User has access to at least one of those folders
Not Already Rendered
- Prevents duplicate display
- Tabs inside groups are not rendered again as standalone items

This ensures the header remains:

Clean
Relevant
Permission-safe

Visual Structure of the Header

The header contains three visual zones:

Brand / Logo Area – Left
Tabs Navigation Area – Center / Right
User Controls – Right
- Notifications
- Time tracking
- Profile menu

Tabs live in the navigation area, where they act as interactive filters.

Tab Display Types

Individual Tabs

Displayed as horizontal list items
Blue text color (#5864ff)
Clickable
Tooltip on hover
Active tab shows a red underline

Each individual tab filters customers directly.

Tab Groups (Dropdowns)

Tab Groups are used to organize related tabs.

Group name shown in bold blue (#0214ff)
Dropdown expands on click
Child tabs listed inside
Child tabs behave exactly like individual tabs

Groups improve usability when the number of tabs grows.

How Tabs Are Rendered (Execution Logic)

Rendering Flow

Initialize HTML containers
Load tab group definitions
Render grouped tabs first
Track rendered tab IDs
Render remaining individual tabs
Output combined HTML

This ensures:

Correct ordering
No duplicates
Group priority respected

Tab Click Behavior (User Interaction)

When a user clicks a tab:

Clear Previous Active State
- Remove active_tab from all tabs
Set Active Tab
- Add active_tab class
- Show red underline
Capture Tab ID
- Read data_tab_setting_id
Trigger Customer Reload
- Pass tab ID as filter parameter
- Refresh customer list
Persist State
- Stored in session
- Survives page refresh

The UI responds instantly, giving immediate feedback.

How Customer Filtering Works

Backend Filtering Logic

Identify active tab ID
Query tabs table:
- Find all records with tab_id = active_tab
Extract unique cust_id values
Filter customer list by these IDs
Return filtered dataset to UI

Only customers with at least one record in the selected tab are displayed.

Tab Groups – Structure and Behavior

Tab groups are stored as JSON and define:

Group names (multi-language)
Order in header
Tabs inside each group
Position of each tab within group

Behavior:

Click group → expand/collapse
Click child tab → apply filter
Groups do not filter on their own

Performance & Optimization

Tabs loaded in a single query
Indexed by ID for fast lookup
Group structure cached
Minimal DOM updates on click

This ensures:

Fast header rendering
Smooth filtering experience
Scalability for many tabs

Integration with Other Views

With Settings

Header visibility controlled from Tab Settings
Changes apply immediately

With Customer View

Active tab context preserved
Seamless navigation

With Tab Groups

Groups created in settings
Reflected dynamically in header

Common Issues & Troubleshooting

Tab Not Visible

Check show_in_header
Verify sharing permissions
Confirm folder assignment
Check group configuration

Click Does Nothing

Verify JS loaded
Check console errors
Ensure valid tab ID

Active State Missing

CSS not loaded
Class override issue

Group Not Expanding

Invalid JSON structure
JS conflict
CSS missing

Final Conceptual Summary

The Header Navigation is not just a menu.

It is:

A real-time filtering engine
A visual workflow selector
A customer segmentation tool
A navigation accelerator

Final One-Line Understanding

The Header Navigation is the real-time filtering layer that transforms tab data into instant customer segmentation through clickable tabs in the top navigation bar.