```html

Display 3: Single Customer View – Entering and Viewing Tab Data
 

Full documentation at the functionality, user interface, and performance levels
 

Overview
 

The Single Customer View is the operational core of the tabs system.
 

This is where:
 

• Tab data is actually created

• Business processes are executed

• Statuses advance

• Automations are triggered

• Records are reviewed, edited, copied, or deleted
   

While settings define the structure and header navigation filters customers,
the Single Customer View is where the work gets done.
 

Purpose of the Single Customer View
 

This view exists to:
 

• Manage tab records for each customer

• Store structured business data

• Track progress using statuses and sub-statuses

• Enable bulk actions and automation

• Provide a unified workspace for customer-specific business processes
   

Every record created here is:
 

• Stored in the tabs table

• Linked to one customer

• Governed by the tab configuration from the settings
   

Location and Access Control
 

• URL: Dynamic customer profile page (/customer/{id})
   

Access Conditions
 

A tab appears for a customer only when all the following conditions are met:
 

1. The user is logged in

2. The user has access to the customer

3. The customer belongs to a folder assigned to the tab

4. The user has access to the tab (shard_with)
    

This ensures data isolation and permission safety.
 

Visual Page Structure
 

The Single Customer View is divided into three logical areas:
 

1️⃣ Left Sidebar
 

• Customer details

• Vertical list of tabs

• Active tab highlighted

• Scrollable if many tabs
   

2️⃣ Main Content Area
 

• Records of the selected tab

• Table/grid layout

• Actions and controls
   

3️⃣ Optional Right Panel
 

• Customer-related information

• Additional widgets or integrations
   

  Tab Navigation Bar (Left)
   

  Purpose
   

  Serves as a tab switcher within the customer context.
   

  Behavior
   

• Tabs displayed vertically

• Names shown in current language

• Only tabs assigned to the customer's folder appear

• Clicking a tab dynamically loads its data
   

• Active State
   

• Highlighted background
   

• ---

  Tab Container Architecture
   

  Each tab has its own DOM container.
  
   

  HTML ID Format
   

  {tab_name_for_customer}{tab_id}

  
  Example
   

  Test_123_En32
   

  Why This Is Important
   

• Ensures uniqueness

• Allows quick targeting via JavaScript

• Supports dynamic show/hide behavior
   

• ---

  Core Components Within a Tab
   

  Each tab contains three main control layers:
   

  ---

  
  1️⃣ Field Navigation Bar (Top Control Layer)
   

  This bar manages field visibility and navigation.
   

  Components
   

• ⬅ Scroll Left (horizontal fields)

• ? Field Selector (show/hide columns)

• ➕ Add Record Button

• ➡ Scroll Right
   

• Purpose
   

• Handle tabs with many fields

• Improve usability

• Control column visibility without reloading
  
   

  2️⃣ Tab Actions Bar (Bulk Actions Layer)
   

  This is the workflow control panel.
   

  Available Actions
   

• Copy to another tab

• Copy and merge records

• Trigger automations

• Filter by status

• Bulk delete records
   

• Key Concept
   

  Actions here operate on selected rows — enabling powerful bulk workflows.
   

• 3️⃣ Tab Records Table (Main Data Layer)
   

  Structure
   

• Header (thead)

• Body (tbody)

• One row = one tab record
   

• Columns
   

• Checkbox (bulk selection)

• Status

• Sub-status (if enabled)

• Custom fields (dynamic)
   

• Data Source
   

• Loaded via AJAX

• Fetched from the tabs table

• Filtered by cust_id + tab_id
   

• ---

  Adding a Tab Record
   

  Step Flow
   

• Click ➕ Add

• Form opens (dynamic fields)

• Fill required fields

• Select status/sub-status

• Save

• Backend

• Endpoint: add_tab_for_cust

• Validates fields

• Inserts into tabs

• Refreshes table

• ---

  Viewing Records
   

  Data Loading
   

• Triggered by tab click

• AJAX-based

• Fast and isolated per tab
   

• Display
   

• In-line editable cells

• Color-coded statuses

• Responsive layout

• Click cell → Edit

• Auto-save or confirm

• Immediate database update
   

• Full Edit
   

• Edit icon opens modal

• All fields editable

• Validation applied
   

• ---

  Deleting Records
   

  Single Delete
   

• Row delete icon

• Confirmation

• Immediate removal
   

• Bulk Delete
   

• Select multiple rows

• Click delete

• Single confirmation

• Efficient cleanup
   

• ---

  Status and Sub-status Management
   

  Features
   

• Color-coded statuses

• Dropdown selection

• Optional sub-status for each status

• Auto-save behavior
   

• Status Filtering
   

• Table filtering by status

• Integration with other filters

• Clearable
   

• ---

  Field Visibility and Filtering
   

  Field Selector
   

• Toggle columns on/off

• Save preferences

• Reset to defaults
   

• Column Filters
   

• Text search

• Numerical ranges
   

• ---

  Copying Records Between Tabs
   

  Copy Only
   

• Inserts a new record

• Preserves values

• New timestamp
   

• Copy and Merge
   

• Matches existing records

• Updates where relevant

• Prevents duplicates
   

• ---

  Automation Integration
   

  Automation Triggers
   

• On record addition

• On status change

• On field update

• Manual execution
   

• This turns tabs into workflow engines, not just data tables.
   

  ---

  
  Responsive Behavior
   

  Desktop

• Full table

• All controls visible
   

• Tablet
   

• Horizontal scrolling
   

• Mobile
   

• Card layout

• Essential actions only

• Touch-friendly UI
   

• ---

  Performance and Optimization