Frontend
Unit
Unit

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:

  1. Page Header

    • Title: "Unit Lists"
    • Breadcrumb: Dashboard > Unit > Units
    • User info and logout in top right
  2. Action Bar

    • "Add Unit" button (Primary action)
    • Search input field
  3. Unit Table

    • Displays all units with columns and actions
    • Supports row selection with checkboxes
    • Pagination controls
  4. Footer

    • Pagination controls
    • Rows per page selector

Buttons & Actions

Button/IconLabelActionResult
Add Unit"+ Add Unit"Navigate to formOpens /unit/add-unit
EditPencil iconEdit unitOpens /unit/edit/:id
DeleteTrash iconShow confirmationOpens delete modal
SearchSearch iconFilter listFilters 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

FieldTypeRequiredMax LengthValidation
BranchDropdownYes-Select branch
Unit CodeText InputYes50Alphanumeric
Unit NameText InputYes100Letters, numbers, spaces
Unit DescriptionTextareaNo500Any 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

FieldTypeRequiredValidation
Unit TypeDropdownYesSelect type
Operating ModeDropdownYesSelect mode
Opening DateDate PickerYesValid date
StatusDropdownYesActive/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

FieldTypeRequiredValidation
CountryDropdownYesSelect country
StateDropdownYesSelect state
CityText InputYesLetters and spaces
Postal CodeText InputYesNumbers, hyphens
AddressTextareaYesAny 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

FieldTypeRequiredMax LengthValidation
Unit CapacityNumber InputYes-Integer > 0
Operational HoursText InputYes50Time format
Manager NameText InputYes100Letters and spaces
Manager ContactText InputYes20Numbers, hyphens
Manager EmailEmail InputYes100Valid email
Additional NotesTextareaNo500Any 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

ButtonTypeActionResult
SavePrimary Button (Blue)Save unit informationValidates, saves Tab One data, auto-advances to Tab Two
CancelSecondary ButtonReturn to listReturns 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

ButtonTypeActionResult
Update / SavePrimary Button (Blue)Save changes for current tabUpdates unit, shows success message, remains on tab
CancelSecondary ButtonDiscard changesReturns to Unit List without saving
DeleteDanger Button (Red)Open deletion confirmationShows 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

ButtonTypeActionResult
Yes, delete it!Danger Button (Red)Confirms deletionPermanently deletes unit, shows success, refreshes list
CancelSecondary ButtonCancels deletionCloses 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

  1. 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
  2. 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
  3. 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

ActionMessageDisplay 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