Regional Office Management

Overview

The Regional Office Management in Worksphere provides administrators with a comprehensive interface to manage regional office records within the organization. Regional offices represent geographical divisions that oversee branch operations and manage regional activities. This module enables creation, management, and oversight of regional office records across the Worksphere system.

Purpose

The Regional Office Management enables:

Create Regional Offices - Add new regional office records with complete details
View Regional Offices - Display all regional offices in a searchable, filterable list
Edit Regional Offices - Modify regional office information and status
Delete Regional Offices - Permanently remove regional offices from the system
Search Regional Offices - Quickly locate specific regional offices by description or code
Filter Regional Offices - Filter by status, code, and other criteria
Manage Regional Hierarchy - Track geographical and organizational structure

Module Features

Regional office creation with essential information
Multi-column search and filtering
Status management (Active/Inactive)
Unique code generation and management
Checkbox row selection (single and bulk)
Permanent deletion functionality (no recovery)
Soft-delete alternative unavailable (important note)
Audit trail for all changes
Role-based access control

Important Note: Permanent Deletion

⚠️ Critical: Regional office deletion is PERMANENT and CANNOT BE REVERSED. Unlike Company and Head Office management which use soft-delete (deactivation), regional office deletion removes all data permanently from the system. Administrators must exercise caution when deleting regional offices.

Module Navigation

Accessing the Regional Office Management Module

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

Access Points

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

User Access

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

Page 1: Regional Office List Page

URL: `/regional-office`

Overview

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

Page Description

The Regional Office List page contains:

Page Header
- Title: "Regional Office Lists"
- Breadcrumb: Dashboard > Company > Regional Office
- User info and logout in top right
Action Bar
- "Add Regional Office" 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
Regional Office Table
- Displays all regional offices with columns and actions
- Supports row selection with checkboxes
- Pagination controls
Footer
- Pagination controls
- Rows per page selector

Action Bar Components

Add Regional Office Button

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

Global Search Input

Type: Text Input
Placeholder: "Search by description, code, or status"
Max Length: 100
Search Scope: Searches across Description, Code, and Status
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
Description	Description	Text Input	Full text search	Primary identifier
Code	Code	Text Input	Exact/partial match	Unique identifier
Status	Status	Dropdown	Active/Inactive	Status filter
Actions	Actions	None	Edit/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...)
Description	Regional office description	Text	40%	Primary identifier
Code	Regional office code	Text	20%	Unique identifier
Status	Active/Inactive status	Text	15%	Status indicator
Actions	Edit/Delete icons	Buttons	12%	Quick action buttons

Column Filter Features

Description Filter

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

Code Filter

Type: Text Input
Placeholder: "Filter by code"
Search Type: Exact or partial match
Case Insensitive: Yes
Real-time: Yes
Auto-format: Uppercase

Status Filter

Type: Dropdown
Placeholder: "All Status"
Options:
- All Status (shows all)
- Active
- Inactive
Multi-select: No (single select)
Default: "All Status"
Searchable: No (only 3 options)

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

Description

Full description of the regional office
Text format (max 50 characters)
Primary identifier and searchable
Clickable to view regional office details
Bold font for emphasis
Displayed in full (no truncation if under 50 chars)
Example: "North India Region", "South Zone Operations"

Code

Unique identifier for the regional office
Text format (alphanumeric, no spaces)
Auto-generated or manually entered
Searchable and filterable
Displayed in monospace font
Example: "REGION-001", "RO-NORTH"
Unique validation applied

Status

Active/Inactive status indicator
Shows visual indicator (badge/pill)
- Green badge for "Active"
- Grey badge for "Inactive"
Filterable by dropdown
Text format
Example: "Active", "Inactive"

Actions

Edit Icon (Pencil icon, Blue)
- Click to edit regional office details
- Navigates to /regional-office/edit/:id
- Hover shows "Edit" tooltip
Delete Icon (Trash icon, Red)
- Click to permanently delete regional office
- Shows deletion confirmation modal
- Hover shows "Delete" tooltip
- WARNING: Permanent deletion, no recovery

Buttons & Icons

Button/Icon	Label	Action	Result
Add Regional Office	"+ Add Regional Office"	Navigate to form	Opens `/regional-office/add-regional-office`
Edit	Pencil icon	Edit regional office	Opens `/regional-office/edit/:id`
Delete	Trash icon	Show deletion confirmation	Opens delete modal (⚠️ PERMANENT)
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 regional offices (with confirmation)
Warning: Bulk delete is permanent and irreversible

Sorting

Click column header to sort ascending/descending
Active sort shows arrow indicator (↑ or ↓)
Supported columns: Description, Code, Status

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 Description, Code, Status
- 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)
Status Filter Dropdown:
- Select status from dropdown
- Shows only regional offices with selected status
- "All Status" option shows all offices
Filter Combination:
- Combine multiple filters
- All filters applied simultaneously
- Shows "No regional offices found" if no matches

Validations & Notes

Empty State: If no regional offices, show "No regional offices available. Click 'Add Regional Office' to create one."
Search No Results: "No regional offices match your search criteria"
Permissions: Only admin/superadmin can manage regional offices
Bulk Delete: ⚠️ Warning before permanently deleting multiple offices
Page Load: Regional offices load within 2 seconds
Real-time Search: Results update within 500ms
Deleted Records: Cannot be recovered (no soft-delete option available)

User Flow - Regional Office List Page

┌──────────────────────────────────┐
│   Regional Office Lists Page     │
│   (List Page)                    │
│                                  │
│  [+ Add RO] [Search...]   [≡]    │
│   (Add button) (Search) (View)   │
│                                  │
├──────────────────────────────────┤
│                                  │
│ Search filters for each column:  │
│ [Description] [Code] [Status▼]   │
│                                  │
├──────────────────────────────────┤
│ □ │ S# │ Description │ Code │    │
│   │    │             │      │ Status │ Actions
│ ─────────────────────────────────│
│ ☑  │ 1  │ North India │ RO-01 │
│   │    │             │       │ Active │ ✎ 🗑
│ ☐  │ 2  │ South Zone  │ RO-02 │
│   │    │             │       │ Active │ ✎ 🗑
│ ☐  │ 3  │ East Region │ RO-03 │
│   │    │             │       │ Inactive │ ✎ 🗑
│                                  │
│  [Previous] [1] [2] [Next]       │
│  Showing 1 to 10 of 50 entries   │
│  Rows per page: [10▼]            │
│                                  │
└──────────────────────────────────┘
         ↓           ↓        ↓
    Click      Click Add   Click
    Search     RO Button   Edit/
    Filters              Delete
         │           │        │
         ▼           ▼        ▼
     Filter      Add New    Edit/
     Results    Regional    Delete
               Office       Office

Page 2: Add New Regional Office Page

URL: `/regional-office/add-regional-office`

Overview

The Add New Regional Office page allows administrators to create new regional office records in the Worksphere system. It provides a simple form with essential regional office information fields.

Page Description

The Add New Regional Office page contains:

Page Header
- Title: "Add New Regional Office"
- Breadcrumb: Dashboard > Company > Regional Office > Add
- Back link to return to list
Regional Office Form
- Form fields for regional office information
- Validation on submit
- Real-time field validation
Action Buttons
- Submit button to create regional office
- Reset button to clear form
- Cancel button to discard changes

Form Fields

Field	Type	Required	Max Length	Validation
Description	Text Input	Yes	50	Letters, numbers, spaces
Code	Text Input	No	50	Alphanumeric, no spaces
Status	Dropdown	No	-	Active / Inactive

Fields in Detail

Description (Required)

Type: Text Input
Required: Yes (marked with *)
Max Length: 50 characters
Placeholder: "e.g., North India Region"
Validation Rules:
- Cannot be empty
- Letters, numbers, spaces, hyphens allowed
- No special characters (@, #, $, %, etc.)
- Max 50 characters
- Trimmed of leading/trailing spaces
Error Messages:
- "Description is required"
- "Description exceeds 50 characters"
- "Invalid characters in description"
Help Text: "Regional office description (max 50 characters)"
Character Counter: Shows "25/50" as you type

Code (Optional)

Type: Text Input
Required: No
Max Length: 50 characters
Placeholder: "e.g., RO-001 or REGION-NORTH"
Validation Rules:
- Optional field
- Alphanumeric and hyphens only
- No spaces or special characters
- Auto-converted to uppercase
- Max 50 characters
Error Message: "Invalid code format"
Help Text: "Unique code for regional office (optional, auto-generated if blank)"
Auto-generation: If blank, system generates code like "RO-00001"

Status (Optional)

Type: Dropdown/Select
Required: No
Placeholder: "Select status"
Options:
- Active (default)
- Inactive
Default Value: "Active"
Validation Rules:
- Optional field
- Must select valid status if provided
Help Text: "Set initial status (Active by default)"

Buttons & Actions

Button	Type	Action	Result
Submit	Primary Button (Blue)	Create regional office with form data	Saves regional office, shows success message, redirects to Regional Office List
Reset	Secondary Button	Clear all form fields	Resets all fields to empty state (Status reverts to Active)
Cancel	Secondary Button	Return to list without saving	Navigates back to Regional 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
Default Status: Status field defaults to "Active"
Code Auto-generation: If Code left blank, system generates unique code
Character Counter: Shows remaining characters for Description field
Unsaved Changes: Browser warning if user tries to leave with unsaved data
Success Message: Green banner at top: "Regional office created successfully!"
Auto-redirect: Redirects to Regional Office List after 2-3 seconds
Field Auto-clear: Form clears after successful submission

Validations & Notes

Required Fields:

Description

Optional Fields:

Code (auto-generated if blank)
Status (defaults to Active)

Description Validation:

Must be 1-50 characters
Letters, numbers, spaces, hyphens only
Trimmed of leading/trailing spaces
Case-sensitive

Code Validation:

Optional field
If provided, must be alphanumeric with hyphens
Max 50 characters
Auto-converted to uppercase
If blank, auto-generated as "RO-XXXXX"

Status Validation:

Optional field
Valid values: Active, Inactive
Defaults to Active if not specified

Page 3: Edit Regional Office Page

URL: `/regional-office/edit/:id`

Overview

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

Page Description

The Edit Regional Office page contains:

Page Header
- Title: "Edit Regional Office"
- Breadcrumb: Dashboard > Company > Regional Office > Edit
- Displays current regional office description
- Back link to return to list
Regional Office Form
- Pre-filled with existing regional office data
- Same fields as Add New Regional Office page
- Validation on submit
Action Buttons
- Update/Save button to save changes
- Cancel button to discard changes
- Delete button to permanently remove regional office

Form Fields

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

Field	Type	Required	Pre-filled	Editable
Description	Text Input	Yes	Yes	Yes
Code	Text Input	No	Yes	Yes
Status	Dropdown	No	Yes	Yes

Fields in Detail

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

Description: Pre-filled with current description, fully editable
Code: Pre-filled with current code, fully editable, cannot be duplicated
Status: Pre-filled with current status, fully editable

Buttons & Actions

Button	Type	Action	Result
Update / Save	Primary Button (Blue)	Save form changes	Updates regional office, shows success message, returns to Regional Office List
Cancel	Secondary Button	Discard changes	Returns to Regional Office List without saving
Delete	Danger Button (Red)	Open deletion confirmation	Shows deletion modal (⚠️ PERMANENT)

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: "Regional 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 Regional Office List after 2-3 seconds
Delete Button: Opens permanent deletion confirmation modal

Validations & Notes

Same Validations: All field validations same as Add New Regional Office page
Code Uniqueness: Code must be unique except current regional office
Description Required: Cannot be empty
Permanent Delete Warning: Delete button clearly indicates permanent deletion

Page 4: Delete Regional Office Confirmation Modal

Overview

The Delete Regional Office Confirmation is a modal dialog that appears when an administrator clicks the delete action on a regional office. It confirms the user's intention to permanently delete the regional office.

Modal Dialog

Dialog Header

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

Dialog Content

Message:

You are about to permanently delete this regional office.

Additional Information:

Regional office description being deleted
Strong warning about permanent deletion
Note: "This action cannot be reversed"
Example: "Deleting 'North India Region' (RO-001)"

Dialog Body

Content	Value	Notes
Primary Message	"Are you sure?"	Confirmation title
Action Message	"You are about to permanently delete this regional office."	Action being taken
Regional Office	Dynamic (description)	Shows which office will be deleted
Code	Dynamic (code)	Shows office code
Warning Icon	Large red alert icon	Emphasizes destructive action
Item Type	"Regional Office"	Type of item being deleted
Reversibility	"This action cannot be reversed"	PERMANENT deletion note
Data Loss Warning	"All associated data will be permanently removed"	Emphasizes data loss

Buttons & Actions

Button	Type	Position	Action	Result
Yes, delete it!	Danger Button (Red)	Right	Confirms permanent deletion	Permanently deletes regional office, closes modal, shows success message, refreshes list, removes all related records
Cancel	Secondary Button	Left	Cancels deletion	Closes modal, returns to previous page, no changes made

Modal Behavior

Backdrop: Semi-transparent dark overlay behind modal
Click Outside: Clicking outside modal closes it (cancels deletion)
Keyboard: Pressing ESC closes modal (cancels deletion)
Focus: Focus is on "Cancel" button on open (safer default)
Animation: Smooth fade-in animation (300ms)
Width: 500-600px width, centered on screen
Z-index: Above all other elements
Warning Style: High-contrast red elements for deletion button

Permanent Deletion Behavior

Deletion: Regional office completely removed from system
Data Preservation: ⚠️ NO data backup or retention
Recovery: ⚠️ IMPOSSIBLE to recover deleted data
Audit Trail: Deletion logged with user, timestamp, and IP
Cascade Delete: May affect related records (branches, units)
No Soft-Delete: Unlike other modules, no deactivation option
Immediate: Deletion takes effect immediately

User Flow - Delete Regional Office (Permanent)

┌────────────────────────────────┐
│   Regional Office List Page    │
│   OR Edit RO Page              │
│   Click Delete (Trash) icon    │
├────────────────────────────────┤
│                                │
│  ┌─ Delete Modal appears       │
│  │  Shows:                     │
│  │  ⚠ (Large Red Warning icon) │
│  │  "Are you sure?"            │
│  │  "You are about to          │
│  │   PERMANENTLY delete this   │
│  │   regional office."         │
│  │                             │
│  │  Regional Office:           │
│  │  "North India Region"       │
│  │  Code: "RO-001"             │
│  │                             │
│  │  WARNING:                   │
│  │  "This action cannot be     │
│  │   reversed"                 │
│  │  "All data will be removed" │
│  │                             │
│  │  [Yes, delete it!]          │
│  │  [Cancel]                   │
│  │                             │
│  ├─ Click "Yes, delete it!"    │
│  │  ↓                          │
│  │  Permanently delete RO      │
│  │  Remove all related data    │
│  │  Close modal                │
│  │  Show success: "Regional    │
│  │  office deleted             │
│  │  permanently!"              │
│  │  Refresh RO List            │
│  │  Record completely removed  │
│  │                             │
│  ├─ Click "Cancel"             │
│  │  ↓                          │
│  │  Close modal                │
│  │  Return to previous page    │
│  │  No changes made            │
│  │  No data deleted            │
│  │                             │
│  └─ Click X (close button)     │
│     ↓                          │
│     Close modal                │
│     Return to previous page    │
│     No data deleted            │
│                                │
└────────────────────────────────┘