Frontend
Company
Head Office

Head Office Management

Overview

The Head Office Management in Worksphere provides administrators with a comprehensive interface to manage head office records within the organization. Head offices represent the primary administrative and operational centers for companies, containing key management and contact information. This module enables creation, management, and oversight of head office records across the Worksphere system.

Purpose

The Head Office Management enables:

  • Create Head Offices - Add new head office records with complete details
  • View Head Offices - Display all head offices in a searchable, filterable list
  • Edit Head Offices - Modify head office information and management details
  • Deactivate Head Offices - Soft-delete head offices from the system
  • Search Head Offices - Quickly locate specific head offices by name or company
  • Filter Head Offices - Filter by company, country, city, and other criteria
  • Manage Head Office Structure - Track organizational hierarchy

Module Features

  • Head office creation with comprehensive form
  • Multi-column search and filtering
  • Company-based head office organization
  • Manager and contact information management
  • Location and address management
  • Soft-delete (deactivation) functionality
  • Horizontal scroll support for wide tables
  • Checkbox row selection (single and bulk)
  • Audit trail for all changes
  • Role-based access control

Module Navigation

Accessing the Head Office Management Module

Application: Worksphere
URL: http://localhost:3000
Path: Company → Head Office or Direct Access: /head-office

Access Points

  • Main Navigation: Sidebar menu under Company dropdown
  • Direct URL Access: /head-office
  • Dashboard Shortcut: Head Office Management quick link
  • From Company List: Related head offices link

User Access

  • Authorized Roles: Admin, Super Admin
  • Required Permissions: Head office management access
  • Session: User must be logged in

Page 1: Head Office List Page

URL: /head-office

Overview

The Head Office List page displays all head offices in the Worksphere system in a comprehensive table format. It provides advanced search, filtering, and management capabilities for administrators to efficiently manage head office records.

Page Description

The Head Office List page contains:

  1. Page Header

    • Title: "HeadOffice Lists"
    • Breadcrumb: Dashboard > Company > Head Office
    • User info and logout in top right
  2. Action Bar

    • "Add HeadOffice" button (Primary action)
    • Search input field
    • Table view toggle button
  3. Column Filters

    • Individual filter inputs below each column header
    • Real-time filtering as data is entered
  4. Head Office Table

    • Displays all head offices with columns and actions
    • Supports row selection with checkboxes
    • Horizontal scroll support for wide content
    • Pagination controls
  5. Footer

    • Pagination controls
    • Rows per page selector

Action Bar Components

Add HeadOffice Button

  • Type: Primary Button (Blue)
  • Label: "+ Add HeadOffice" or "New Head Office"
  • Position: Top right of page
  • Action: Navigate to Add New Head Office page
  • Keyboard: ALT + H shortcut
  • Icon: Plus icon

Global Search Input

  • Type: Text Input
  • Placeholder: "Search by head office name, company, or city"
  • Max Length: 100
  • Search Scope: Searches across Head Office Name, Company Name, City
  • Real-time: Filters results as you type
  • Clear Button: X icon to clear search
  • Icon: Search/Magnifying glass icon

Table View Toggle

  • Type: Toggle Button
  • Label: "Table" button
  • Icon: Table icon / Grid icon
  • Position: Right of search field
  • States: Active/Inactive
  • Behavior: Shows/hides table view options

Column Headers & Filters

ColumnHeaderFilter TypeSearch ScopeNotes
Checkbox(Select All)CheckboxRow selectionBulk select
S NoSerial NumberNoneAuto-generatedRead-only
Head Office NameHead Office NameText InputFull text searchPrimary identifier
Company NameCompany NameDropdownSelect from companiesFilter by company
CountryCountryDropdownSelect from countriesLocation filter
CityCityText InputFull text searchCity filter
ActionsActionsNoneEdit/View/DeleteQuick actions

Table Columns & Fields

ColumnDescriptionData TypeWidthNotes
CheckboxRow selectionCheckbox5%Bulk select multiple rows
S NoSerial numberInteger8%Auto-generated (1, 2, 3...)
Head Office NameName of the head officeText25%Primary identifier
Company NameAssociated companyText20%Parent company name
CountryCountry locationText15%Country name
CityCity locationText15%City name
ActionsView/Edit/Delete iconsButtons12%Quick action buttons

Column Filter Features

Head Office Name Filter

  • Type: Text Input
  • Placeholder: "Search head office name"
  • Search Type: Partial match (contains)
  • Case Insensitive: Yes
  • Real-time: Yes
  • Wildcard: Auto-applied

Company Name Filter

  • Type: Dropdown
  • Placeholder: "All Companies"
  • Options: List of all available companies
  • Multi-select: No (single select)
  • Default: "All Companies" (shows all)
  • Searchable: Yes
  • Dependent: Shows only companies with head offices

Country Filter

  • Type: Dropdown
  • Placeholder: "All Countries"
  • Options: List of countries with head offices
  • Multi-select: No (single select)
  • Default: "All Countries" (shows all)
  • Searchable: Yes
  • Dependent: Options based on available head offices

City Filter

  • Type: Text Input
  • Placeholder: "Search city"
  • Search Type: Partial match
  • Case Insensitive: Yes
  • Real-time: Yes

Fields in Detail

Checkbox

  • Position: First column
  • Selects individual row
  • Select All checkbox in header
  • Maintains selection on pagination
  • Enables bulk delete functionality

S No

  • Serial number starting from 1
  • Automatically incremented
  • Resets on pagination
  • Non-editable field
  • Right-aligned in column

Head Office Name

  • Full name of the head office
  • Text format
  • Primary identifier and searchable
  • Clickable to view head office details
  • Bold font for emphasis
  • Truncated with ellipsis (...) if too long
  • Example: "ABC Corporation - Head Office"

Company Name

  • Associated company name
  • Text format
  • Shows parent company relationship
  • Links to company details
  • Example: "ABC Corporation Pvt Ltd"

Country

  • Country location
  • Text format
  • Shows physical location
  • Filterable by country dropdown
  • Example: "India", "United States", "United Kingdom"

City

  • City/Town location
  • Text format
  • Shows operational location
  • Searchable and filterable
  • Example: "New York", "Mumbai", "London"

Actions

  • View Icon (Eye icon, Blue)
    • Click to view head office details
    • Navigates to /head-office/details/:id
    • Hover shows "View" tooltip
  • Edit Icon (Pencil icon, Blue)
    • Click to edit head office details
    • Navigates to /head-office/edit/:id
    • Hover shows "Edit" tooltip
  • Delete Icon (Trash icon, Red)
    • Click to deactivate head office
    • Shows confirmation modal
    • Hover shows "Deactivate" tooltip

Buttons & Icons

Button/IconLabelActionResult
Add HeadOffice"+ Add HeadOffice"Navigate to formOpens /head-office/add-head-office
ViewEye iconView head officeOpens /head-office/details/:id
EditPencil iconEdit head officeOpens /head-office/edit/:id
DeleteTrash iconShow deactivationOpens delete modal
SearchSearch iconFilter listFilters in real-time
ClearX iconReset searchClears search text
TableTable iconToggle viewShows table options

Table Features

Row Selection

  • Single Select: Click checkbox to select/deselect row
  • Bulk Select: Click header checkbox to select/deselect all
  • Selection State: Highlighted row background (light blue)
  • Selection Count: Shows "X rows selected" below table
  • Bulk Actions: Delete all selected head offices (with confirmation)
  • Click Row: Can click row to view details (if enabled)

Horizontal Scroll

  • Support: Wide tables scroll horizontally on smaller screens
  • Sticky Header: Column headers remain visible while scrolling
  • Sticky First Column: S No and checkbox columns stay visible
  • Scroll Indicators: Shows when content extends beyond viewport
  • Touch Friendly: Swipe to scroll on mobile devices

Sorting

  • Click column header to sort ascending/descending
  • Active sort shows arrow indicator (↑ or ↓)
  • Supported columns: Head Office Name, Company Name, Country, City

Pagination

  • Rows per page: Default 10, options: 10, 25, 50, 100
  • Navigation: Previous/Next buttons and page numbers
  • Info: Shows "Showing 1 to 10 of 50 entries"
  • Current Page: Highlighted page number

Search & Filter Behavior

  1. Global Search:

    • Enter text in main search field
    • Searches across Head Office Name, Company Name, City
    • Results update in real-time
  2. Column Filters:

    • Enter text/select from column filter below header
    • Applies filter to specific column
    • Multiple filters work together (AND logic)
  3. Company Filter Dropdown:

    • Select company from dropdown
    • Shows only head offices for selected company
    • "All Companies" option shows all head offices
  4. Country Filter Dropdown:

    • Select country from dropdown
    • Shows only head offices in selected country
    • "All Countries" option shows all head offices
  5. Filter Combination:

    • Combine multiple filters
    • All filters applied simultaneously
    • Shows "No head offices found" if no matches

Validations & Notes

  • Empty State: If no head offices, show "No head offices available. Click 'Add HeadOffice' to create one."
  • Search No Results: "No head offices match your search criteria"
  • Permissions: Only admin/superadmin can manage head offices
  • Bulk Delete: Warning before deactivating multiple head offices
  • Page Load: Head offices load within 2 seconds
  • Real-time Search: Results update within 500ms
  • Inactive Head Offices: Shown with grey text/stripe (if visible)

User Flow - Head Office List Page

┌──────────────────────────────────┐
│   HeadOffice Lists Page          │
│   (List Page)                    │
│                                  │
│  [+ Add HeadOffice] [Search...] [≡] │
│   (Add button) (Search field) (View) │
│                                  │
├──────────────────────────────────┤
│                                  │
│ Search filters for each column:  │
│ [Name] [Company▼] [Country▼]     │
│ [City]                           │
│                                  │
├──────────────────────────────────┤
│ □ │ S# │ HO Name │ Company │    │
│   │    │         │         │ Country │ City │ Actions
│ ─────────────────────────────────│
│ ☑  │ 1  │ ABC HO  │ ABC Corp    │
│   │    │         │             │ India │ Mumbai │ 👁 ✎ 🗑
│ ☐  │ 2  │ XYZ HO  │ XYZ Corp    │
│   │    │         │             │ USA │ New York │ 👁 ✎ 🗑
│ ☐  │ 3  │ PQR HO  │ PQR Corp    │
│   │    │         │             │ UK │ London │ 👁 ✎ 🗑
│                                  │
│  [Previous] [1] [2] [Next]       │
│  Showing 1 to 10 of 50 entries   │
│  Rows per page: [10▼]            │
│                                  │
└──────────────────────────────────┘
         ↓           ↓        ↓
    Click      Click Add    Click
    Search     HeadOffice   Edit/
    Filters    Button       Delete
         │           │        │
         ▼           ▼        ▼
     Filter      Add New    Edit/
     Results    Head Office Delete
               Page          Page

Page 2: Add New Head Office Page

URL: /head-office/add-head-office

Overview

The Add New Head Office page allows administrators to create new head office records in the Worksphere system. It provides a comprehensive form with all necessary head office information fields organized in logical sections.

Page Description

The Add New Head Office page contains:

  1. Page Header

    • Title: "Add New Head Office"
    • Breadcrumb: Dashboard > Company > Head Office > Add
    • Back link to return to list
  2. Head Office Form

    • Form fields organized in sections
    • Validation on submit
    • Real-time field validation
  3. Form Sections

    • Company & Basic Information
    • Management Details
    • Contact Information
    • Location Details
  4. Action Buttons

    • Submit button to create head office
    • Reset button to clear form
    • Cancel button to discard changes

Form Organization & Sections

The head office form is organized into 4 logical sections:

┌──────────────────────────────────────┐
│ Add New Head Office Form             │
├──────────────────────────────────────┤
│                                      │
│ COMPANY & BASIC INFORMATION          │
│ ├─ Company (dropdown)                │
│ └─ Head Office Name                  │
│                                      │
│ MANAGEMENT DETAILS                   │
│ ├─ Head / Manager Name               │
│                                      │
│ CONTACT INFORMATION                  │
│ ├─ Phone Number                      │
│                                      │
│ LOCATION DETAILS                     │
│ ├─ Country                           │
│ ├─ State / Province                  │
│ ├─ City                              │
│ ├─ Postal Code                       │
│ └─ Address                           │
│                                      │
│ [Submit] [Reset] [Cancel]            │
└──────────────────────────────────────┘

Form Fields - Section 1: Company & Basic Information

FieldTypeRequiredMax LengthValidation
CompanyDropdownYes-Select from companies
Head Office NameText InputYes100Letters, numbers, spaces

Company (Required)

  • Type: Dropdown/Select
  • Required: Yes (marked with *)
  • Placeholder: "Select company"
  • Options: List of all active companies
  • Searchable: Yes
  • Validation Rules:
    • Cannot be empty
    • Must select valid company
  • Error Message: "Company is required"
  • Help Text: "Select parent company for this head office"

Head Office Name (Required)

  • Type: Text Input
  • Required: Yes (marked with *)
  • Max Length: 100 characters
  • Placeholder: "e.g., ABC Corporation - Head Office"
  • Validation Rules:
    • Cannot be empty
    • Letters, numbers, spaces, hyphens allowed
    • No leading/trailing spaces (auto-trimmed)
    • At least 3 characters
    • Max 100 characters
  • Error Messages:
    • "Head office name is required"
    • "Head office name must be at least 3 characters"
    • "Head office name exceeds 100 characters"
  • Help Text: "Name of the head office (3-100 characters)"
  • Character Counter: Shows "45/100" as you type

Form Fields - Section 2: Management Details

FieldTypeRequiredMax LengthValidation
Head / Manager NameText InputYes100Letters and spaces

Head / Manager Name (Required)

  • Type: Text Input
  • Required: Yes (marked with *)
  • Max Length: 100 characters
  • Placeholder: "e.g., John Smith"
  • Validation Rules:
    • Cannot be empty
    • Letters, spaces, and hyphens only
    • No numbers or special characters
    • At least 3 characters
    • Max 100 characters
  • Error Messages:
    • "Head/Manager name is required"
    • "Invalid head/manager name format"
    • "Head/Manager name must be at least 3 characters"
  • Help Text: "Name of the head office manager or director"

Form Fields - Section 3: Contact Information

FieldTypeRequiredMax LengthValidation
Phone NumberText InputYes20Numbers and special chars

Phone Number (Required)

  • Type: Text Input
  • Required: Yes (marked with *)
  • Max Length: 20 characters
  • Placeholder: "e.g., +1-555-123-4567 or (555) 123-4567"
  • Validation Rules:
    • Cannot be empty
    • Numbers, hyphens, spaces, parentheses, plus sign allowed
    • At least 7 digits
    • Max 20 characters
    • No letters allowed
  • Error Messages:
    • "Phone number is required"
    • "Invalid phone number format"
    • "Phone number must have at least 7 digits"
  • Help Text: "Head office contact phone number"
  • Format Guide: "Format: +1-555-123-4567 or (555) 123-4567"

Form Fields - Section 4: Location Details

FieldTypeRequiredMax LengthValidation
CountryDropdownYes-Select country
State / ProvinceDropdownYes-Select state
CityText InputYes50Letters and spaces
Postal CodeText InputYes20Numbers and hyphens
AddressTextareaYes500Any characters

Country (Required)

  • Type: Dropdown/Select
  • Required: Yes (marked with *)
  • Placeholder: "Select country"
  • Options: List of countries
  • Searchable: Yes
  • Default: Based on system location or company location
  • Validation Rules:
    • Cannot be empty
    • Must select valid country
  • Error Message: "Country is required"
  • Help Text: "Country where head office is located"

State / Province (Required)

  • Type: Dropdown/Select
  • Required: Yes (marked with *)
  • Placeholder: "Select state/province"
  • Options: Filtered based on selected country
  • Dependent: Auto-populated based on country selection
  • Searchable: Yes
  • Validation Rules:
    • Cannot be empty
    • Must select valid state
    • Must match selected country
  • Error Message: "State/Province is required"
  • Help Text: "State, province, or region"

City (Required)

  • Type: Text Input
  • Required: Yes (marked with *)
  • Max Length: 50 characters
  • Placeholder: "e.g., Mumbai, New York"
  • Validation Rules:
    • Cannot be empty
    • Letters and spaces only
    • No numbers or special characters
    • At least 2 characters
    • Max 50 characters
  • Error Messages:
    • "City is required"
    • "Invalid city name"
    • "City must be at least 2 characters"
  • Help Text: "City or town name"

Postal Code (Required)

  • Type: Text Input
  • Required: Yes (marked with *)
  • Max Length: 20 characters
  • Placeholder: "e.g., 400001"
  • Validation Rules:
    • Cannot be empty
    • Numbers and hyphens only
    • No letters or special characters
    • At least 3 characters
    • Max 20 characters
  • Error Messages:
    • "Postal code is required"
    • "Invalid postal code format"
  • Help Text: "ZIP or postal code"

Address (Required)

  • Type: Textarea
  • Required: Yes (marked with *)
  • Max Length: 500 characters
  • Placeholder: "Enter full street address"
  • Example: "123 Business Avenue, Suite 100"
  • Validation Rules:
    • Cannot be empty
    • Any characters allowed
    • Max 500 characters
    • No leading/trailing spaces (auto-trimmed)
  • Error Messages:
    • "Address is required"
    • "Address exceeds 500 characters"
  • Help Text: "Full street address of head office (max 500 characters)"
  • Character Counter: Shows "150/500"
  • Rows: 4-5 rows height

Buttons & Actions

ButtonTypeActionResult
SubmitPrimary Button (Blue)Create head office with form dataSaves head office, shows success message, redirects to Head Office List
ResetSecondary ButtonClear all form fieldsResets all fields to empty state
CancelSecondary ButtonReturn to list without savingNavigates back to Head Office List page

Form Behavior

  • Validation: Real-time field validation as you type
  • Error Display: Red error messages appear below respective fields
  • Required Fields: Marked with red asterisk (*)
  • Field Focus: First invalid field gets focus on submission attempt
  • Loading State: Submit button shows loading spinner during submission
  • Dependent Fields: State field depends on Country selection
  • Unsaved Changes: Browser warning if user tries to leave with unsaved data
  • Success Message: Green banner at top: "Head office created successfully!"
  • Auto-redirect: Redirects to Head Office List after 2-3 seconds
  • Field Auto-clear: Form clears after successful submission

Validations & Notes

Required Fields:

  • Company
  • Head Office Name
  • Head / Manager Name
  • Phone Number
  • Country
  • State / Province
  • City
  • Postal Code
  • Address

Optional Fields:

  • None (all fields are required)

Page 3: Edit Head Office Page

URL: /head-office/edit/:id

Overview

The Edit Head Office page allows administrators to modify existing head office information. The form is pre-populated with current head office data and follows the same structure as the Add New Head Office page.

Page Description

The Edit Head Office page contains:

  1. Page Header

    • Title: "Edit Head Office"
    • Breadcrumb: Dashboard > Company > Head Office > Edit
    • Displays current head office name
    • Back link to return to list
  2. Head Office Form

    • Pre-filled with existing head office data
    • Same fields as Add New Head Office page
    • Same 4 sections as Add Head Office
  3. Action Buttons

    • Update/Save button to save changes
    • Cancel button to discard changes
    • Delete button (optional) to deactivate head office

Form Fields

The Edit Head Office page contains all the same fields as Add New Head Office page:

SectionFieldsPre-filledEditable
Company & Basic InfoCompany, Head Office NameYesYes
Management DetailsHead / Manager NameYesYes
Contact InformationPhone NumberYesYes
Location DetailsCountry, State, City, Postal Code, AddressYesYes

Fields in Detail

All fields maintain the same validation rules as Add New Head Office page:

  • All form fields are pre-filled with current data
  • All fields are fully editable
  • All validation rules apply during editing
  • Company field cannot be changed (read-only or deactivated)

Buttons & Actions

ButtonTypeActionResult
Update / SavePrimary Button (Blue)Save form changesUpdates head office, shows success message, returns to Head Office List
CancelSecondary ButtonDiscard changesReturns to Head Office List without saving
DeleteDanger Button (Red)Open deactivation confirmationShows deactivation modal

Form Behavior

  • Pre-fill: On page load, all fields populated with current data
  • Change Detection: Form indicates unsaved changes (visual indicator)
  • Error Display: Validation errors appear below respective fields
  • Success Message: "Head office updated successfully!"
  • Loading State: Update button shows loading spinner during submission
  • Unsaved Changes Warning: Prompt if user tries to leave with unsaved changes
  • Auto-redirect: Redirects to Head Office List after 2-3 seconds
  • Read-only Fields: Company field typically read-only (cannot change)

Validations & Notes

  • Same Validations: All field validations same as Add New Head Office page
  • Company Field: Cannot be changed (locked/read-only)
  • Dependent Fields: State field depends on Country selection
  • Error Handling: Same error messages and validation logic as Add Head Office page

Page 4: Delete / Deactivate Head Office Confirmation Modal

Overview

The Delete/Deactivate Confirmation is a modal dialog that appears when an administrator clicks the delete action on a head office. It confirms the user's intention to deactivate the head office and explains the implications.

Modal Dialog

Dialog Header

  • Title: "Are you sure?"
  • Close Button: X icon in top-right corner
  • Icon: Warning/Alert icon in red

Dialog Content

Message:

You are about to deactivate this head office.

Additional Information:

  • Head office name being deactivated
  • Associated company name
  • Warning about impacts
  • Note about soft-delete (reversible)
  • Shows example: "Deactivating 'ABC Corporation - Head Office' under ABC Corp"

Dialog Body

ContentValueNotes
Primary Message"Are you sure?"Confirmation title
Action Message"You are about to deactivate this head office."Action being taken
Head Office NameDynamic (head office name)Shows which head office will be deactivated
Company NameDynamic (company name)Shows associated company
Warning IconRed alert iconIndicates significant action
Item Type"Head Office"Type of item being deactivated
Reversibility"This action can be reversed later"Notes soft-delete nature

Buttons & Actions

ButtonTypePositionActionResult
Yes, deactivate it!Danger Button (Red)RightConfirms deactivationDeactivates head office, closes modal, shows success message, refreshes list
CancelSecondary ButtonLeftCancels deactivationCloses modal, returns to previous page

Modal Behavior

  • Backdrop: Semi-transparent dark overlay behind modal
  • Click Outside: Clicking outside modal closes it (cancels deactivation)
  • Keyboard: Pressing ESC closes modal (cancels deactivation)
  • Focus: Focus is on "Cancel" button on open (safer default)
  • Animation: Smooth fade-in animation (300ms)
  • Width: 450-550px width, centered on screen
  • Z-index: Above all other elements

Soft Delete Behavior

  • Deactivation: Head office marked as inactive
  • Data Preservation: All head office data retained
  • Recovery: Can be reactivated if needed
  • Audit Trail: Logged with user and timestamp
  • Display: Inactive head offices shown with grey/striped appearance
  • Filtering: Can filter to show/hide inactive head offices

User Flow - Delete / Deactivate Head Office

┌────────────────────────────────┐
│   Head Office List Page        │
│   OR Edit Head Office Page     │
│   Click Delete (Trash) icon    │
├────────────────────────────────┤
│                                │
│  ┌─ Delete Modal appears       │
│  │  Shows:                     │
│  │  ⚠ (Red Warning icon)       │
│  │  "Are you sure?"            │
│  │  "You are about to          │
│  │   deactivate this head      │
│  │   office."                  │
│  │                             │
│  │  Head Office: "ABC HO"      │
│  │  Company: "ABC Corp"        │
│  │  Note: "This action can be  │
│  │  reversed later"            │
│  │                             │
│  │  [Yes, deactivate it!]      │
│  │  [Cancel]                   │
│  │                             │
│  ├─ Click "Yes, deactivate it!"│
│  │  ↓                          │
│  │  Deactivate head office     │
│  │  Close modal                │
│  │  Show success: "Head office │
│  │  deactivated successfully!" │
│  │  Refresh Head Office List   │
│  │  Mark as inactive           │
│  │                             │
│  ├─ Click "Cancel"             │
│  │  ↓                          │
│  │  Close modal                │
│  │  Return to previous page    │
│  │  No changes made            │
│  │                             │
│  └─ Click X (close button)     │
│     ↓                          │
│     Close modal                │
│     Return to previous page    │
│                                │
└────────────────────────────────┘

Head Office Management User Flow (Complete)

START (User navigates to Head Office Module)

  ├──→ Head Office List Page (/head-office)
  │     │
  │     ├─ Global Search (HO Name/Company/City)
  │     │  ↓
  │     │  Filter results in real-time
  │     │
  │     ├─ Column Level Filters
  │     │  ├─ Head Office Name filter
  │     │  ├─ Company filter (dropdown)
  │     │  ├─ Country filter (dropdown)
  │     │  └─ City filter
  │     │  ↓
  │     │  Apply filters to results
  │     │
  │     ├─ Row Selection (Checkboxes)
  │     │  ├─ Single row select
  │     │  ├─ Select all rows
  │     │  └─ Bulk delete selected
  │     │
  │     ├─ Horizontal Scroll Support
  │     │  ├─ Wide tables scroll horizontally
  │     │  └─ Sticky headers and columns
  │     │
  │     ├─ Click "Add HeadOffice" button
  │     │  ↓
  │     │  Add New Head Office Page
  │     │  (/head-office/add-head-office)
  │     │  │
  │     │  ├─ Fill Company & Basic Info Section
  │     │  │  ├─ Select Company *
  │     │  │  └─ Enter Head Office Name *
  │     │  │
  │     │  ├─ Fill Management Details Section
  │     │  │  └─ Enter Head / Manager Name *
  │     │  │
  │     │  ├─ Fill Contact Information Section
  │     │  │  └─ Enter Phone Number *
  │     │  │
  │     │  ├─ Fill Location Details Section
  │     │  │  ├─ Select Country *
  │     │  │  ├─ Select State/Province *
  │     │  │  ├─ Enter City *
  │     │  │  ├─ Enter Postal Code *
  │     │  │  └─ Enter Address *
  │     │  │
  │     │  ├─ Validate all fields
  │     │  │  │
  │     │  │  ├─ Valid: Click "Submit"
  │     │  │  │          ↓
  │     │  │  │         Save head office
  │     │  │  │         Show success message
  │     │  │  │         Redirect to list
  │     │  │  │
  │     │  │  └─ Invalid: Show error messages
  │     │  │            Focus on first error
  │     │  │            Wait for correction
  │     │  │
  │     │  └─ Click "Reset" → Clear form
  │     │     or "Cancel" → Return to list
  │     │
  │     ├─ Click View (Eye) icon
  │     │  ↓
  │     │  Head Office Details Page
  │     │  (/head-office/details/:id)
  │     │  (Read-only view of head office info)
  │     │
  │     ├─ Click Edit (Pencil) icon
  │     │  ↓
  │     │  Edit Head Office Page
  │     │  (/head-office/edit/:id)
  │     │  │
  │     │  ├─ Pre-filled with existing data
  │     │  ├─ Same form sections as Add Head Office
  │     │  ├─ Modify any field (except Company)
  │     │  │
  │     │  ├─ Validate changes
  │     │  │  │
  │     │  │  ├─ Valid: Click "Update"
  │     │  │  │          ↓
  │     │  │  │         Save changes
  │     │  │  │         Show success message
  │     │  │  │         Redirect to list
  │     │  │  │
  │     │  │  └─ Invalid: Show error messages
  │     │  │
  │     │  └─ Click "Delete" button
  │     │     ↓
  │     │     Delete Confirmation Modal
  │     │     │
  │     │     ├─ Show warning: "Are you sure?"
  │     │     ├─ Show head office and company name
  │     │     │
  │     │     ├─ Click "Yes, deactivate it!"
  │     │     │  ↓
  │     │     │  Deactivate head office
  │     │     │  Close modal
  │     │     │  Show success message
  │     │     │  Refresh list
  │     │     │  Mark as inactive
  │     │     │
  │     │     └─ Click "Cancel"
  │     │        ↓
  │     │        Close modal
  │     │        Return to edit page
  │     │
  │     ├─ Click Delete (Trash) icon from list
  │     │  ↓
  │     │  Delete Confirmation Modal
  │     │  (Same flow as above)
  │     │
  │     └─ Pagination & Sorting
  │        ├─ Navigate pages
  │        ├─ Change rows per page
  │        ├─ Sort by columns
  │        └─ Horizontal scroll

  └──────────────────────────────
     END

Head Office Management Best Practices

For Administrators

  1. Creating Head Offices

    • Use clear, descriptive head office names
    • Assign qualified management personnel
    • Complete all location information
    • Provide accurate contact details
    • Verify phone number format
    • Complete all required fields
    • One head office per company (typically)
  2. Managing Head Offices

    • Regularly review head office information
    • Update details when changes occur
    • Keep manager information current
    • Maintain accurate contact details
    • Update location if office moves
    • Track organizational hierarchy
    • Use deactivation (not deletion)
  3. Searching & Navigation

    • Use global search for quick lookups
    • Use column filters for refined results
    • Combine multiple filters (AND logic)
    • Sort by head office name or company
    • Select checkboxes for bulk operations
    • Review head office details before editing
    • Verify before deactivating
    • Use horizontal scroll on wide tables

Success Messages

ActionMessageDisplay Time
Create Head Office"Head office created successfully!"5 seconds
Update Head Office"Head office updated successfully!"5 seconds
Deactivate Head Office"Head office deactivated successfully!"5 seconds

End of Documentation