View 3: Single Customer View – Tab Data Entry & Viewing
 

Complete Functional, UI, and Execution-Level Documentation
 

Overview
 

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

This is the place where:
 

• Tab data is actually created

• Business workflows are executed

• Statuses move forward

• 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 work happens.
 

Purpose of the Single Customer View
 

This view exists to:
 

• Manage tab records per customer

• Store structured business data

• Track progress using statuses and sub-statuses

• Enable bulk operations and automation

• Provide a unified workspace for customer-specific workflows
   

Every record created here is:
 

• Stored in the tabs table

• Linked to one customer

• Governed by the tab configuration from Settings
   

Location & Access Control
 

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

Access Conditions
 

A tab appears for a customer only when all are true:
 

1. User is logged in

2. User has access to the customer

3. Customer belongs to a folder assigned to the tab

4. User has access to the tab (shard_with)
    

This guarantees 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
 

• Selected tab’s records

• Table/grid layout

• Actions and controls
   

3️⃣ Optional Right Panel
 

• Related customer info

• Additional widgets or integrations
   

  Tab Navigation Sidebar (Left)
   

  Purpose
   

  Acts 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 loads its data dynamically
   

• 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 Matters
   

• Guarantees uniqueness

• Enables fast JavaScript targeting

• Supports dynamic show/hide behavior
   

• ---

  Core Components Inside a Tab
   

  Each tab contains three major control layers:
   

  ---

  
  1️⃣ Field Navigation Bar (Top Control Layer)
   

  This bar manages field visibility and navigation.
   

  Components
   

• ⬅ Left scroll (horizontal fields)

• ? Fields selector (show/hide columns)

• ➕ Add Record button

• ➡ Right scroll
   

• Purpose
   

• Handle tabs with many fields

• Improve usability

• Control column visibility without reloading
  
   

  2️⃣ Tab Action Bar (Bulk Operations Layer)
   

  This is the workflow control panel.
   

  Available Actions
   

• Copy to another tab

• Copy & merge records

• Run 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 select)

• Status

• Sub-status (if enabled)

• Custom fields (dynamic)
   

• Data Source
   

• Loaded via AJAX

• Pulled from tabs table

• Filtered by cust_id + tab_id
   

• ---

  Adding a Tab Record
   

  Step-by-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 when tab is clicked

• AJAX-based

• Fast and isolated per tab
   

• Display
   

• Inline editable cells

• Color-coded statuses

• Responsive layout

• Click cell → edit

• Auto-save or confirm

• Immediate DB 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

• One confirmation

• Efficient cleanup
   

• ---

  Status & Sub-Status Management
   

  Features
   

• Color-coded statuses

• Dropdown selection

• Optional sub-status per status

• Auto-save behavior
   

• Status Filtering
   

• Filter table by status

• Combine with other filters

• Clearable
   

• ---

  Field Visibility & Filtering
   

  Field Selector
   

• Toggle columns on/off

• Save preferences

• Reset defaults
   

• Column Filters
   

• Text search

• Numeric ranges
   

• ---

  Copying Records Between Tabs
   

  Copy Only
   

• Inserts new record

• Preserves values

• New timestamp
   

• Copy & Merge
   

• Matches existing records

• Updates where applicable

• Prevents duplicates
   

• ---

  Automation Integration
   

  Automation Triggers
   

• On add record

• 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 & Optimization
   

• Lazy loading per tab

• Cached configurations

• Pagination for large datasets

• Minimal DOM updates
  
  
  Final Conceptual Understanding
  
   

  The Single Customer View is where tab definitions become living business data — edited, progressed, automated, and audited per customer.

  ---

  
  Final One-Line Summary
   

  View 3 is the operational workspace where tab records are created, managed, and driven through business workflows for each individual customer.