Unit Management
Overview
The Unit Management in Worksphere provides administrators with a comprehensive interface to manage operational units within branches. Units represent the smallest operational divisions with their own configuration, field officer assignments, shift schedules, and deployment plans. This module enables creation, management, and detailed configuration of units across the Worksphere system.
Purpose
The Unit Management enables:
- Create Units - Add new unit records with comprehensive multi-step configuration
- View Units - Display all units in a searchable, filterable list
- Edit Units - Modify unit information and operational details
- Manage Field Officers - Assign and manage field officers to units
- Configure Shifts - Define shift schedules for unit operations
- Plan Deployments - Create deployment plans for units
- Search & Filter Units - Quickly locate specific units
Module Features
- Unit creation with 4-tab multi-step form
- Comprehensive unit configuration (60+ fields)
- Field officer assignment management
- Shift details and scheduling
- Deployment plan configuration
- Auto-progression to next tab after save
- Search and filtering functionality
- Audit trail for all changes
- Role-based access control
Module Navigation
Accessing the Unit Management Module
Application: Worksphere
URL: http://localhost:3000
Path: Unit → Unit Management or Direct Access: /unit
Access Points
- Main Navigation: Sidebar menu under Unit dropdown
- Direct URL Access:
/unit - Dashboard Shortcut: Unit Management quick link
- From Branch List: Related units link
User Access
- Authorized Roles: Admin, Super Admin
- Required Permissions: Unit management access
- Session: User must be logged in
Multi-Step Form Structure
The Unit Creation form is organized into 4 tabs for comprehensive configuration:
┌─────────────────────────────────────────────────┐
│ Unit Creation Multi-Step Form │
├─────────────────────────────────────────────────┤
│ │
│ [Tab One] [Tab Two] [Tab Three] [Tab Four] │
│ (Active) (Disabled) (Disabled) (Disabled) │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ TAB ONE: UNIT INFORMATION │ │
│ │ │ │
│ │ Section One A: Basic Fields │ │
│ │ ├─ Branch (required) │ │
│ │ ├─ Unit Code (required) │ │
│ │ ├─ Unit Name (required) │ │
│ │ └─ Unit Description (optional) │ │
│ │ │ │
│ │ Section One B: Configuration Options │ │
│ │ ├─ Unit Type (required) │ │
│ │ ├─ Operating Mode (required) │ │
│ │ ├─ Opening Date (required) │ │
│ │ └─ Status (required) │ │
│ │ │ │
│ │ Section One C: Geographical Details │ │
│ │ ├─ Country (required) │ │
│ │ ├─ State (required) │ │
│ │ ├─ City (required) │ │
│ │ ├─ Postal Code (required) │ │
│ │ └─ Address (required) │ │
│ │ │ │
│ │ Section One D: Advanced Details │ │
│ │ ├─ Unit Capacity (required) │ │
│ │ ├─ Operational Hours (required) │ │
│ │ ├─ Manager Name (required) │ │
│ │ ├─ Manager Contact (required) │ │
│ │ ├─ Manager Email (required) │ │
│ │ └─ Additional Notes (optional) │ │
│ │ │ │
│ │ [Save] [Cancel] │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Tabs become active/enabled after saving │
│ current tab. Auto-progress to next tab. │
│ │
└─────────────────────────────────────────────────┘Page One: Unit List Page
URL: /unit
Overview
The Unit List page displays all units in the Worksphere system. It provides search, filtering, and management capabilities for administrators.
Page Description
The Unit List page contains:
-
Page Header
- Title: "Unit Lists"
- Breadcrumb:
Dashboard > Unit > Units - User info and logout in top right
-
Action Bar
- "Add Unit" button (Primary action)
- Search input field
-
Unit Table
- Displays all units with columns and actions
- Supports row selection with checkboxes
- Pagination controls
-
Footer
- Pagination controls
- Rows per page selector
Buttons & Actions
| Button/Icon | Label | Action | Result |
|---|---|---|---|
| Add Unit | "+ Add Unit" | Navigate to form | Opens /unit/add-unit |
| Edit | Pencil icon | Edit unit | Opens /unit/edit/:id |
| Delete | Trash icon | Show confirmation | Opens delete modal |
| Search | Search icon | Filter list | Filters in real-time |
Table Features
- Rows per page: Default 10, options: 10, 25, 50, 100
- Navigation: Previous/Next buttons and page numbers
- Search Scope: Searches across Unit Name, Code, Branch
- Real-time: Results update within 500ms
Page Two: Add New Unit Page - Tab One
URL: /unit/add-unit
Overview
The Add New Unit page presents a 4-tab multi-step form for comprehensive unit configuration. Tab One focuses on unit information and basic setup.
Tab One: Unit Information
Section One A: Basic Fields
| Field | Type | Required | Max Length | Validation |
|---|---|---|---|---|
| Branch | Dropdown | Yes | - | Select branch |
| Unit Code | Text Input | Yes | 50 | Alphanumeric |
| Unit Name | Text Input | Yes | 100 | Letters, numbers, spaces |
| Unit Description | Textarea | No | 500 | Any characters |
Branch (Required)
- Type: Dropdown/Select
- Required: Yes (marked with *)
- Placeholder: "Select branch"
- Options: List of all active branches
- Searchable: Yes
- Validation Rules:
- Cannot be empty
- Must select valid branch
- Error Message: "Branch is required"
- Help Text: "Select parent branch for this unit"
Unit Code (Required)
- Type: Text Input
- Required: Yes (marked with *)
- Max Length: 50 characters
- Placeholder: "e.g., UNIT-001"
- Validation Rules:
- Cannot be empty
- Must be unique
- Alphanumeric and hyphens only
- At least 2 characters
- Error Messages:
- "Unit code is required"
- "Unit code already exists"
- "Invalid format (use alphanumeric and hyphens)"
- Help Text: "Unique identifier for unit"
- Auto-format: Uppercase
Unit Name (Required)
- Type: Text Input
- Required: Yes (marked with *)
- Max Length: 100 characters
- Placeholder: "e.g., North Delhi Operations Unit"
- Validation Rules:
- Cannot be empty
- Letters, numbers, spaces, hyphens allowed
- At least 3 characters
- Max 100 characters
- Error Messages:
- "Unit name is required"
- "Unit name must be at least 3 characters"
- "Unit name exceeds 100 characters"
- Help Text: "Official unit name (3-100 characters)"
- Character Counter: Shows "45/100" as you type
Unit Description (Optional)
- Type: Textarea
- Required: No
- Max Length: 500 characters
- Placeholder: "Enter unit description (optional)"
- Validation Rules:
- Optional field
- Any characters allowed
- Max 500 characters
- Help Text: "Detailed description of unit's purpose and operations"
- Character Counter: Shows "150/500" as you type
- Rows: 4-5 rows height
Section One B: Configuration Options
| Field | Type | Required | Validation |
|---|---|---|---|
| Unit Type | Dropdown | Yes | Select type |
| Operating Mode | Dropdown | Yes | Select mode |
| Opening Date | Date Picker | Yes | Valid date |
| Status | Dropdown | Yes | Active/Inactive |
Unit Type (Required)
- Type: Dropdown/Select
- Required: Yes (marked with *)
- Placeholder: "Select unit type"
- Options:
- Headquarters
- Operations Center
- Service Center
- Field Office
- Support Office
- Other
- Validation Rules:
- Cannot be empty
- Must select valid type
- Error Message: "Unit type is required"
- Help Text: "Type or category of unit operation"
Operating Mode (Required)
- Type: Dropdown/Select
- Required: Yes (marked with *)
- Placeholder: "Select operating mode"
- Options:
- Full-Time
- Part-Time
- Shift-Based
- On-Demand
- Seasonal
- Validation Rules:
- Cannot be empty
- Must select valid mode
- Error Message: "Operating mode is required"
- Help Text: "How the unit operates (full-time, shift-based, etc.)"
Opening Date (Required)
- Type: Date Picker
- Required: Yes (marked with *)
- Format: YYYY-MM-DD
- Placeholder: "Select opening date"
- Validation Rules:
- Cannot be empty
- Must be valid date
- Cannot be in future (typically)
- Error Messages:
- "Opening date is required"
- "Invalid date format"
- "Date cannot be in future"
- Help Text: "Date unit was established"
- Calendar Picker: Shows calendar widget for easy selection
Status (Required)
- Type: Dropdown/Select
- Required: Yes (marked with *)
- Placeholder: "Select status"
- Options:
- Active
- Inactive
- On-Hold
- Closed
- Default Value: "Active"
- Validation Rules:
- Cannot be empty
- Must select valid status
- Error Message: "Status is required"
- Help Text: "Current operational status of unit"
Section One C: Geographical Details
| Field | Type | Required | Validation |
|---|---|---|---|
| Country | Dropdown | Yes | Select country |
| State | Dropdown | Yes | Select state |
| City | Text Input | Yes | Letters and spaces |
| Postal Code | Text Input | Yes | Numbers, hyphens |
| Address | Textarea | Yes | Any characters |
Country (Required)
- Type: Dropdown/Select
- Required: Yes (marked with *)
- Placeholder: "Select country"
- Options: List of countries
- Searchable: Yes
- Validation Rules:
- Cannot be empty
- Must select valid country
- Error Message: "Country is required"
- Help Text: "Country where unit operates"
State (Required)
- Type: Dropdown/Select
- Required: Yes (marked with *)
- Placeholder: "Select state/province"
- Options: Filtered based on 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., Delhi"
- Validation Rules:
- Cannot be empty
- Letters and spaces only
- At least 2 characters
- Max 50 characters
- Error Messages:
- "City is required"
- "Invalid city name"
- Help Text: "City or town name"
Postal Code (Required)
- Type: Text Input
- Required: Yes (marked with *)
- Max Length: 20 characters
- Placeholder: "e.g., 110001"
- Validation Rules:
- Cannot be empty
- Numbers and hyphens only
- 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"
- Validation Rules:
- Cannot be empty
- Any characters allowed
- Max 500 characters
- Error Messages:
- "Address is required"
- "Address exceeds 500 characters"
- Help Text: "Full street address of unit (max 500 characters)"
- Character Counter: Shows "150/500"
- Rows: 4-5 rows height
Section One D: Advanced Details
| Field | Type | Required | Max Length | Validation |
|---|---|---|---|---|
| Unit Capacity | Number Input | Yes | - | Integer > 0 |
| Operational Hours | Text Input | Yes | 50 | Time format |
| Manager Name | Text Input | Yes | 100 | Letters and spaces |
| Manager Contact | Text Input | Yes | 20 | Numbers, hyphens |
| Manager Email | Email Input | Yes | 100 | Valid email |
| Additional Notes | Textarea | No | 500 | Any characters |
Unit Capacity (Required)
- Type: Number Input
- Required: Yes (marked with *)
- Min: 1
- Max: 99999
- Placeholder: "e.g., 100"
- Validation Rules:
- Cannot be empty
- Must be positive integer
- No decimals
- Error Messages:
- "Unit capacity is required"
- "Must be a positive number"
- Help Text: "Total capacity or strength of unit"
Operational Hours (Required)
- Type: Text Input
- Required: Yes (marked with *)
- Max Length: 50 characters
- Placeholder: "e.g., 09:00 AM - 06:00 PM"
- Validation Rules:
- Cannot be empty
- Format: HH:MM AM/PM format
- Max 50 characters
- Error Message: "Invalid operational hours format"
- Help Text: "Standard operational hours for unit"
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 and spaces only
- At least 3 characters
- Max 100 characters
- Error Messages:
- "Manager name is required"
- "Invalid manager name format"
- Help Text: "Name of unit manager/head"
Manager Contact (Required)
- Type: Text Input
- Required: Yes (marked with *)
- Max Length: 20 characters
- Placeholder: "e.g., +1-555-123-4567"
- Validation Rules:
- Cannot be empty
- Numbers, hyphens, spaces, parentheses allowed
- At least 7 digits
- Max 20 characters
- Error Messages:
- "Manager contact is required"
- "Invalid phone number format"
- Help Text: "Manager's direct phone number"
Manager Email (Required)
- Type: Email Input
- Required: Yes (marked with *)
- Max Length: 100 characters
- Placeholder: "e.g., manager@unit.com"
- Validation Rules:
- Cannot be empty
- Must be valid email format
- Max 100 characters
- Error Messages:
- "Manager email is required"
- "Invalid email format"
- Help Text: "Manager's email address"
Additional Notes (Optional)
- Type: Textarea
- Required: No
- Max Length: 500 characters
- Placeholder: "Enter any additional notes about the unit"
- Validation Rules:
- Optional field
- Any characters allowed
- Max 500 characters
- Help Text: "Additional information or notes about this unit"
- Character Counter: Shows "0/500"
- Rows: 4 rows height
Tab One 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: Save button shows loading spinner during submission
- Dependent Fields: State field depends on Country selection
- Success Message: Green banner at top: "Unit information saved successfully!"
- Auto-Progress: Redirects to Tab Two after successful save
- Character Counters: Show remaining characters for text areas
- Unsaved Changes: Browser warning if user tries to leave with unsaved data
Tab One Buttons
| Button | Type | Action | Result |
|---|---|---|---|
| Save | Primary Button (Blue) | Save unit information | Validates, saves Tab One data, auto-advances to Tab Two |
| Cancel | Secondary Button | Return to list | Returns to Unit List without saving |
Pages Three - Four: Additional Tabs
Tab Two: Field Officer Assignment
The Field Officer tab allows assignment of one or more field officers to the unit with designation and availability tracking.
Tab Three: Shift Details
The Shift Details tab configures shift schedules, working hours, break times, and shift-based operations for the unit.
Tab Four: Deployment Plan
The Deployment Plan tab creates comprehensive deployment strategies, coverage areas, and operational distribution plans for the unit.
Edit Unit Page
URL: /unit/edit/:id
Overview
The Edit Unit page allows administrators to modify existing unit information using the same 4-tab structure as the Add Unit page.
Form Behavior
- Pre-fill: All fields populated with current unit data
- Change Detection: Form indicates unsaved changes
- Tab Access: All tabs accessible (not disabled like in Add mode)
- Auto-Save: Each tab saves independently
- Success Message: "Unit updated successfully!"
- Loading State: Save button shows loading spinner
Buttons & Actions
| Button | Type | Action | Result |
|---|---|---|---|
| Update / Save | Primary Button (Blue) | Save changes for current tab | Updates unit, shows success message, remains on tab |
| Cancel | Secondary Button | Discard changes | Returns to Unit List without saving |
| Delete | Danger Button (Red) | Open deletion confirmation | Shows deletion modal |
Delete Unit Confirmation Modal
Overview
Confirmation dialog for permanent unit deletion.
Modal Dialog
- Title: "Are you sure?"
- Icon: Warning/Alert icon in red
- Message: "You are about to permanently delete this unit."
- Shows: Unit name, code, and associated branch
Buttons
| Button | Type | Action | Result |
|---|---|---|---|
| Yes, delete it! | Danger Button (Red) | Confirms deletion | Permanently deletes unit, shows success, refreshes list |
| Cancel | Secondary Button | Cancels deletion | Closes modal, returns to previous page |
Important Notes
- Permanent Deletion: No recovery option
- Cascade Effects: May affect field officers and shifts
- Confirmation Required: User must explicitly click "Yes, delete it!"
- Audit Trail: Deletion logged with user info and timestamp
Unit Management Best Practices
For Administrators
-
Creating Units
- Use clear, descriptive unit names
- Generate unique codes for identification
- Complete all required fields
- Ensure accurate location information
- Assign qualified managers
- Document operational hours clearly
-
Managing Units
- Regularly review unit information
- Update details when organizational changes occur
- Maintain accurate manager contact information
- Track unit capacity and utilization
- Monitor field officer assignments
- Update shift schedules as needed
-
Best Practices
- Set up field officers immediately after unit creation
- Configure shift details before operations begin
- Create deployment plans based on coverage needs
- Maintain audit trail of changes
- Verify all information before finalization
Success Messages
| Action | Message | Display Time |
|---|---|---|
| Create Unit | "Unit created successfully!" | 5 seconds |
| Update Unit | "Unit updated successfully!" | 5 seconds |
| Delete Unit | "Unit deleted permanently!" | 5 seconds |
End of Documentation