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:
-
Page Header
- Title: "HeadOffice Lists"
- Breadcrumb:
Dashboard > Company > Head Office - User info and logout in top right
-
Action Bar
- "Add HeadOffice" button (Primary action)
- Search input field
- Table view toggle button
-
Column Filters
- Individual filter inputs below each column header
- Real-time filtering as data is entered
-
Head Office Table
- Displays all head offices with columns and actions
- Supports row selection with checkboxes
- Horizontal scroll support for wide content
- Pagination controls
-
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
| Column | Header | Filter Type | Search Scope | Notes |
|---|---|---|---|---|
| Checkbox | (Select All) | Checkbox | Row selection | Bulk select |
| S No | Serial Number | None | Auto-generated | Read-only |
| Head Office Name | Head Office Name | Text Input | Full text search | Primary identifier |
| Company Name | Company Name | Dropdown | Select from companies | Filter by company |
| Country | Country | Dropdown | Select from countries | Location filter |
| City | City | Text Input | Full text search | City filter |
| Actions | Actions | None | Edit/View/Delete | Quick actions |
Table Columns & Fields
| Column | Description | Data Type | Width | Notes |
|---|---|---|---|---|
| Checkbox | Row selection | Checkbox | 5% | Bulk select multiple rows |
| S No | Serial number | Integer | 8% | Auto-generated (1, 2, 3...) |
| Head Office Name | Name of the head office | Text | 25% | Primary identifier |
| Company Name | Associated company | Text | 20% | Parent company name |
| Country | Country location | Text | 15% | Country name |
| City | City location | Text | 15% | City name |
| Actions | View/Edit/Delete icons | Buttons | 12% | 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/Icon | Label | Action | Result |
|---|---|---|---|
| Add HeadOffice | "+ Add HeadOffice" | Navigate to form | Opens /head-office/add-head-office |
| View | Eye icon | View head office | Opens /head-office/details/:id |
| Edit | Pencil icon | Edit head office | Opens /head-office/edit/:id |
| Delete | Trash icon | Show deactivation | Opens delete modal |
| Search | Search icon | Filter list | Filters in real-time |
| Clear | X icon | Reset search | Clears search text |
| Table | Table icon | Toggle view | Shows 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
-
Global Search:
- Enter text in main search field
- Searches across Head Office Name, Company Name, City
- Results update in real-time
-
Column Filters:
- Enter text/select from column filter below header
- Applies filter to specific column
- Multiple filters work together (AND logic)
-
Company Filter Dropdown:
- Select company from dropdown
- Shows only head offices for selected company
- "All Companies" option shows all head offices
-
Country Filter Dropdown:
- Select country from dropdown
- Shows only head offices in selected country
- "All Countries" option shows all head offices
-
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 PagePage 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:
-
Page Header
- Title: "Add New Head Office"
- Breadcrumb:
Dashboard > Company > Head Office > Add - Back link to return to list
-
Head Office Form
- Form fields organized in sections
- Validation on submit
- Real-time field validation
-
Form Sections
- Company & Basic Information
- Management Details
- Contact Information
- Location Details
-
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
| Field | Type | Required | Max Length | Validation |
|---|---|---|---|---|
| Company | Dropdown | Yes | - | Select from companies |
| Head Office Name | Text Input | Yes | 100 | Letters, 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
| Field | Type | Required | Max Length | Validation |
|---|---|---|---|---|
| Head / Manager Name | Text Input | Yes | 100 | Letters 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
| Field | Type | Required | Max Length | Validation |
|---|---|---|---|---|
| Phone Number | Text Input | Yes | 20 | Numbers 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
| Field | Type | Required | Max Length | Validation |
|---|---|---|---|---|
| Country | Dropdown | Yes | - | Select country |
| State / Province | Dropdown | Yes | - | Select state |
| City | Text Input | Yes | 50 | Letters and spaces |
| Postal Code | Text Input | Yes | 20 | Numbers and hyphens |
| Address | Textarea | Yes | 500 | Any 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
| Button | Type | Action | Result |
|---|---|---|---|
| Submit | Primary Button (Blue) | Create head office with form data | Saves head office, shows success message, redirects to Head Office List |
| Reset | Secondary Button | Clear all form fields | Resets all fields to empty state |
| Cancel | Secondary Button | Return to list without saving | Navigates 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:
-
Page Header
- Title: "Edit Head Office"
- Breadcrumb:
Dashboard > Company > Head Office > Edit - Displays current head office name
- Back link to return to list
-
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
-
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:
| Section | Fields | Pre-filled | Editable |
|---|---|---|---|
| Company & Basic Info | Company, Head Office Name | Yes | Yes |
| Management Details | Head / Manager Name | Yes | Yes |
| Contact Information | Phone Number | Yes | Yes |
| Location Details | Country, State, City, Postal Code, Address | Yes | Yes |
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
| Button | Type | Action | Result |
|---|---|---|---|
| Update / Save | Primary Button (Blue) | Save form changes | Updates head office, shows success message, returns to Head Office List |
| Cancel | Secondary Button | Discard changes | Returns to Head Office List without saving |
| Delete | Danger Button (Red) | Open deactivation confirmation | Shows 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
| Content | Value | Notes |
|---|---|---|
| Primary Message | "Are you sure?" | Confirmation title |
| Action Message | "You are about to deactivate this head office." | Action being taken |
| Head Office Name | Dynamic (head office name) | Shows which head office will be deactivated |
| Company Name | Dynamic (company name) | Shows associated company |
| Warning Icon | Red alert icon | Indicates significant action |
| Item Type | "Head Office" | Type of item being deactivated |
| Reversibility | "This action can be reversed later" | Notes soft-delete nature |
Buttons & Actions
| Button | Type | Position | Action | Result |
|---|---|---|---|---|
| Yes, deactivate it! | Danger Button (Red) | Right | Confirms deactivation | Deactivates head office, closes modal, shows success message, refreshes list |
| Cancel | Secondary Button | Left | Cancels deactivation | Closes 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
│
└──────────────────────────────
ENDHead Office Management Best Practices
For Administrators
-
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)
-
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)
-
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
| Action | Message | Display 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