Shift Details

Overview

The Shift Details in Worksphere provides administrators with a comprehensive interface to manage shift schedules and configurations for operational units. Shifts represent distinct work periods with specific timings, personnel requirements, and operational parameters. This module enables creation, management, and oversight of shift details across units in the Worksphere system.

Purpose

The Shift Details enables:

• Add Shift Details - Create new shift configurations for units
• Add Multiple Shifts - Configure multiple shifts for a single unit
• View Shifts - Display all shift configurations for a unit
• Edit Shifts - Modify shift information and parameters
• Delete Shifts - Remove shift configurations
• Delete Multiple Shifts - Remove multiple shifts at once
• Submit Shifts - Finalize and submit all shift details
• Reset Form - Clear entered shift details

Module Features

• Single and bulk shift creation
• Multiple shift support per unit
• Start/end time configuration
• Personnel strength tracking
• Shift count management
• Form validation and confirmation
• Success/error messaging
• Helper tooltips and guidance
• Role-based access control

Module Navigation

Accessing the Shift Details Module

Application: Worksphere
URL: http://localhost:3000
Path: Unit → Shift Details or Direct Access: /unit/shift-details

Access Points

• From Unit Creation: Tab Three in multi-step unit form
• From Unit List: Click unit to manage shifts
• Direct Access: Via sidebar navigation
• From Field Officer Management: Related shifts link

User Access

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

Shift Details Pages

Page One: Shift Details List Page

URL: /unit/shift-details

Overview

The Shift Details List page displays all shift configurations for a selected unit. It provides management capabilities for administrators to configure and manage shift schedules.

Page Description

The Shift Details List page contains:

1. Page Header

   • Title: "Shift Details"
   • Breadcrumb: Dashboard > Unit > Shift Details
   • User info and logout in top right

2. Unit Selection Section

   • Unit dropdown (Select or search unit)
   • Unit details display (read-only)
   • Search functionality

3. Action Bar

   • "Add Shift Detail" button (Primary action)
   • Edit buttons for each shift
   • Delete buttons for each shift
   • Multi-select checkboxes for bulk operations

4. Shift Details Table

   • Displays all configured shifts for selected unit
   • Shows shift information with columns and actions
   • Supports row selection with checkboxes
   • Pagination controls

5. Footer

   • Submit All button
   • Reset Form button
   • Pagination controls

Unit Selection Section

Unit Dropdown (Required)

• Type: Dropdown/Search
• Required: Yes
• Placeholder: "Select unit"
• Options: List of all active units
• Searchable: Yes (real-time search)
• Behavior: Loads shift details when unit selected
• Help Text: "Select a unit to manage its shift details"
• Search Scope: Unit Name, Code, Branch

Shift Details Table

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
• Right-aligned

Shift Name

• Name/identifier of the shift
• Text format
• Primary identifier and searchable
• Bold font for emphasis
• Example: "Morning Shift", "Evening Shift", "Night Shift", "Flexible Shift"

Start Time

• Shift start time
• Time format (HH:MM, 24-hour)
• Shows scheduled start
• Example: "06:00", "09:00", "14:00"

End Time

• Shift end time
• Time format (HH:MM, 24-hour)
• Shows scheduled end
• Example: "14:00", "17:00", "22:00"

Auth Strength

• Total personnel required for shift
• Integer format
• Shows authorized strength/headcount
• Right-aligned in column
• Example: 25, 50, 100

Actions

• Edit Icon (Pencil icon, Blue)
  • Click to edit shift details
  • Opens edit form with pre-filled data
  • Hover shows "Edit" tooltip
• Delete Icon (Trash icon, Red)
  • Click to delete shift
  • Shows deletion confirmation modal
  • Hover shows "Delete" tooltip

Buttons & Actions

Tooltips & Helper Text

Shift Count

• Label: "Shift Count"
• Text: "Number of shifts required for this unit"
• Position: Shows on hover over shift count indicator
• Example: "3 shifts configured for this unit"

Auth Strength

• Label: "Auth Strength"
• Text: "Total number of personnel required for this shift"
• Position: Shows on hover over Auth Strength column
• Example: "50 personnel required for this shift"

Start Time / End Time

• Label: "Start Time / End Time"
• Text: "Define the working hours for this shift. Use 24-hour format (HH:MM)"
• Position: Shows on hover over time fields
• Format Guide: "Example: 06:00 to 14:00 for morning shift"

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 shifts (with confirmation)

Sorting

• Click column header to sort ascending/descending
• Active sort shows arrow indicator (↑ or ↓)
• Supported columns: Shift Name, Start Time, End Time, Auth Strength

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

Validations & Notes

• Unit Required: Must select unit before adding shifts
• Empty State: If no shifts, show "No shifts configured. Click 'Add Shift Detail' to create one."
• Permissions: Only admin/superadmin can manage shifts
• Bulk Delete: Warning before deleting multiple shifts
• Page Load: Shifts load within 2 seconds
• Real-time Search: Results update within 500ms
• Shift Count Display: Shows total number of configured shifts at top

User Flow - Shift Details List Page

┌──────────────────────────────────┐
│   Shift Details List Page        │
│                                  │
│  Unit Selection:                 │
│  [Select Unit ▼]                 │
│                                  │
│  [+ Add Shift Detail]             │
│                                  │
├──────────────────────────────────┤
│                                  │
│  S No | Shift Name | Start | End │
│        |            | Time  | Time │ Auth Strength │ Actions
│  ──────────────────────────────  │
│   1   │ Morning   │ 06:00 │ 14:00 │ 50 │ ✎ 🗑
│   2   │ Evening   │ 14:00 │ 22:00 │ 40 │ ✎ 🗑
│   3   │ Night     │ 22:00 │ 06:00 │ 30 │ ✎ 🗑
│                                  │
│  [Submit All Shifts] [Reset]     │
│                                  │
│  [Previous] [1] [2] [Next]       │
│  Showing 1 to 10 of 50 entries   │
│                                  │
└──────────────────────────────────┘

Page Two: Add Shift Details Modal/Form

Overview

The Add Shift Details modal allows administrators to create new shift configurations for a selected unit. Multiple shifts can be added sequentially.

Modal Header

• Title: "Add Shift Details"
• Close Button: X icon in top-right corner
• Description: "Fill in the shift details for the selected unit. You can add multiple shift details for a single unit if required."

Form Fields

Shift Name (Required)

• Type: Text Input
• Required: Yes (marked with *)
• Max Length: 50 characters
• Placeholder: "e.g., Morning Shift, Evening Shift"
• Validation Rules:
  • Cannot be empty
  • Letters, numbers, spaces, hyphens allowed
  • At least 3 characters
  • Max 50 characters
• Error Messages:
  • "Shift name is required"
  • "Shift name must be at least 3 characters"
  • "Shift name exceeds 50 characters"
• Help Text: "Name or identifier for this shift"
• Examples: "Morning Shift", "Evening Shift", "Night Shift", "Flexible Shift"

Start Time (Required)

• Type: Time Input
• Required: Yes (marked with *)
• Format: HH:MM (24-hour)
• Placeholder: "06:00"
• Validation Rules:
  • Cannot be empty
  • Must be valid time format (HH:MM)
  • Hours: 00-23, Minutes: 00-59
  • Must be before End Time
• Error Messages:
  • "Start time is required"
  • "Invalid time format (use HH:MM)"
  • "Start time must be before end time"
• Help Text: "Define the working hours for this shift (24-hour format)"
• Examples: "06:00", "09:00", "14:00", "22:00"

End Time (Required)

• Type: Time Input
• Required: Yes (marked with *)
• Format: HH:MM (24-hour)
• Placeholder: "14:00"
• Validation Rules:
  • Cannot be empty
  • Must be valid time format (HH:MM)
  • Hours: 00-23, Minutes: 00-59
  • Must be after Start Time
  • Can be next day (e.g., 22:00 to 06:00)
• Error Messages:
  • "End time is required"
  • "Invalid time format (use HH:MM)"
  • "End time must be after start time"
• Help Text: "Define when this shift ends (24-hour format)"
• Examples: "14:00", "17:00", "22:00", "06:00 (next day)"

Auth Strength (Required)

• Type: Number Input
• Required: Yes (marked with *)
• Min: 1
• Max: 99999
• Placeholder: "e.g., 50"
• Validation Rules:
  • Cannot be empty
  • Must be positive integer
  • No decimals
  • Minimum 1 personnel
• Error Messages:
  • "Auth strength is required"
  • "Must be a positive number"
  • "Auth strength must be at least 1"
  • "Value exceeds maximum limit"
• Help Text: "Total number of personnel required for this shift"
• Tooltip: "Auth Strength - Total number of personnel required for this shift"

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: Add button shows loading spinner during submission
• Time Picker: Interactive time selector or text input
• Unsaved Changes: Warning if user tries to close with unsaved data
• Success Message: Green banner: "Shift details added successfully!"
• Auto-Clear: Form clears after successful addition (ready for next shift)
• Stay Open: Modal remains open for adding multiple shifts

Buttons

Info Prompt - Add Multiple Shifts

Display: Below form fields or in tooltip area

Info Message:

ℹ️ You can add more than one shift detail for the same unit by clicking 
"Add Shift Detail".

Display Style:

• Light blue background with info icon
• Non-dismissible
• Always visible to guide users
• Located above buttons area

Page Three: Edit Shift Details Form

Overview

The Edit Shift Details form allows administrators to modify existing shift configurations.

Form Header

• Title: "Edit Shift Details"
• Description: "Update the selected shift information. Changes will be applied only to this shift detail."
• Shift Info: Shows which shift is being edited (e.g., "Editing: Morning Shift")

Form Fields

The Edit Shift Details form contains all the same fields as Add Shift Details:

Fields in Detail

All fields maintain the same validation rules as Add Shift Details:

Shift Name (Required)

• Pre-filled with current shift name
• Fully editable
• Same validation rules as Add form
• Uniqueness check within unit context

Start Time (Required)

• Pre-filled with current start time
• Fully editable
• Same validation rules as Add form
• Must be before End Time

End Time (Required)

• Pre-filled with current end time
• Fully editable
• Same validation rules as Add form
• Must be after Start Time

Auth Strength (Required)

• Pre-filled with current auth strength
• Fully editable
• Same validation rules as Add form
• Can be increased or decreased

Form Behavior

• Pre-fill: On form load, all fields populated with current data
• Change Detection: Form indicates unsaved changes (visual indicator)
• Error Display: Validation errors appear below respective fields
• Confirmation: Shows confirmation message before saving: "Are you sure you want to update this shift detail?"
• Success Message: "Shift details updated successfully!"
• Loading State: Update button shows loading spinner during submission
• Unsaved Changes Warning: Prompt if user tries to close with unsaved changes

Buttons

Page Four: Delete Shift Details Confirmation Modal

Overview

The Delete Shift Details confirmation modal appears when an administrator clicks the delete action on a shift. It confirms the user's intention to permanently delete the shift.

Modal Dialog

Dialog Header

• Title: "Delete Shift Details"
• Close Button: X icon in top-right corner
• Icon: Warning/Alert icon in red

Dialog Content

Primary Message:

Are you sure you want to delete this shift detail?
This action cannot be undone.

Additional Information:

• Shows shift name being deleted
• Shows shift timings (Start - End)
• Shows auth strength
• Shows warning: "Deleting this will permanently remove the selected shift detail."
• Example: "Deleting 'Morning Shift' (06:00 - 14:00, Auth Strength: 50)"

Dialog Body

Buttons & Actions

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: 450-550px width, centered on screen
• Z-index: Above all other elements

Success Message

After confirmation:

Shift details deleted successfully.

Display:

• Green banner at top of page
• Auto-dismisses after 5 seconds
• Shows before list refreshes

Page Five: Delete Multiple Shift Details Confirmation Modal (Optional)

Overview

The Delete Multiple Shift Details confirmation modal appears when deleting multiple shifts at once.

Modal Dialog

Dialog Header

• Title: "Delete Shift Details"
• Close Button: X icon in top-right corner
• Icon: Warning/Alert icon in red

Dialog Content

Primary Message:

Are you sure you want to delete the selected shift details?
This action cannot be undone.

Additional Information:

• Shows number of shifts selected for deletion
• Lists shift names being deleted
• Shows warning: "Deleting these shifts will permanently remove all selected shift details."
• Example: "Deleting 3 shift details: Morning Shift, Evening Shift, Night Shift"

Dialog Body

Buttons & Actions

Success Message

After confirmation:

Selected shift details deleted successfully.

Display:

• Green banner at top of page
• Auto-dismisses after 5 seconds
• Shows shift count deleted

Page Six: Submit All Shift Details Confirmation Modal

Overview

The Submit All Shift Details confirmation modal appears when submitting all configured shifts for final approval.

Modal Dialog

Dialog Header

• Title: "Submit Shift Details"
• Close Button: X icon in top-right corner
• Icon: Confirmation icon (checkmark)

Dialog Content

Primary Message:

Are you sure you want to submit all added shift details for this unit?

Additional Information:

• Shows number of shifts being submitted
• Lists all shifts with timings
• Shows total personnel count across all shifts
• Example: "Submitting 3 shift details for 'North Delhi Unit' with total strength of 120 personnel"

Dialog Body

Buttons & Actions

Modal Behavior

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

Success Message

After confirmation:

Shift details submitted successfully.

Display:

• Green banner at top of page
• Auto-dismisses after 5 seconds
• Shift list becomes read-only after submission

Page Seven: Reset Form Confirmation Modal

Overview

The Reset Form confirmation modal appears when resetting the form to clear all entered shift details.

Modal Dialog

Dialog Header

• Title: "Reset Form"
• Close Button: X icon in top-right corner
• Icon: Warning/Alert icon in orange

Dialog Content

Primary Message:

This will clear all entered shift details.
Are you sure you want to continue?

Additional Information:

• Shows number of shifts that will be cleared
• Lists shifts being removed from form
• Shows warning: "This action will remove all unsaved shift configurations."
• Example: "Clearing 3 shift details: Morning Shift, Evening Shift, Night Shift"

Dialog Body

Buttons & Actions

Modal Behavior

• Backdrop: Semi-transparent dark overlay behind modal
• Click Outside: Clicking outside modal closes it (cancels reset)
• Keyboard: Pressing ESC closes modal (cancels reset)
• 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

Success Message

After confirmation:

Form has been reset. All shift details have been cleared.

Display:

• Info banner at top of page
• Auto-dismisses after 3 seconds
• Form returns to empty state

Shift Details User Flow

START (Unit Creation Tab Three OR Shift Management)
  │
  ├──→ Shift Details List Page
  │     │
  │     ├─ Select Unit from dropdown
  │     │  ↓
  │     │  Load existing shifts for unit
  │     │
  │     ├─ View All Configured Shifts
  │     │  ├─ Shift Name, Start Time, End Time
  │     │  ├─ Auth Strength for each shift
  │     │  └─ Edit/Delete options
  │     │
  │     ├─ Click "Add Shift Detail" button
  │     │  ↓
  │     │  Add Shift Details Modal
  │     │  │
  │     │  ├─ Fill Shift Name *
  │     │  ├─ Fill Start Time *
  │     │  ├─ Fill End Time *
  │     │  ├─ Fill Auth Strength *
  │     │  │
  │     │  ├─ Info: "You can add multiple shifts..."
  │     │  │
  │     │  ├─ Validate all fields
  │     │  │  │
  │     │  │  ├─ Valid: Click "Add Shift Detail"
  │     │  │  │          ↓
  │     │  │  │         Save shift
  │     │  │  │         Clear form
  │     │  │  │         Show success message
  │     │  │  │         Modal stays open
  │     │  │  │
  │     │  │  └─ Invalid: Show error messages
  │     │  │            Focus on first error
  │     │  │
  │     │  ├─ Add More Shifts:
  │     │  │  └─ Repeat form filling and submission
  │     │  │
  │     │  └─ Click "Cancel"
  │     │     ↓
  │     │     Close modal
  │     │     Return to list
  │     │     Unsaved shifts discarded
  │     │
  │     ├─ Click Edit (Pencil) icon for existing shift
  │     │  ↓
  │     │  Edit Shift Details Form
  │     │  │
  │     │  ├─ Pre-filled with existing shift data
  │     │  ├─ Modify Shift Name (optional)
  │     │  ├─ Modify Start Time (optional)
  │     │  ├─ Modify End Time (optional)
  │     │  ├─ Modify Auth Strength (optional)
  │     │  │
  │     │  ├─ Validate changes
  │     │  │  │
  │     │  │  ├─ Valid: Click "Update"
  │     │  │  │          ↓
  │     │  │  │         Show confirmation:
  │     │  │  │         "Are you sure you want to
  │     │  │  │          update this shift detail?"
  │     │  │  │          ↓
  │     │  │  │         Confirm or Cancel
  │     │  │  │         If Confirm:
  │     │  │  │         - Save changes
  │     │  │  │         - Show success message
  │     │  │  │         - Return to list
  │     │  │  │
  │     │  │  └─ Invalid: Show error messages
  │     │  │
  │     │  └─ Click "Cancel"
  │     │     ↓
  │     │     Return to list
  │     │     Changes discarded
  │     │
  │     ├─ Click Delete (Trash) icon for shift
  │     │  ↓
  │     │  Delete Confirmation Modal
  │     │  │
  │     │  ├─ Show warning:
  │     │  │  "Are you sure you want to delete
  │     │  │   this shift detail?"
  │     │  │  "This action cannot be undone"
  │     │  │
  │     │  ├─ Show shift details:
  │     │  │  - Shift Name
  │     │  │  - Start Time - End Time
  │     │  │  - Auth Strength
  │     │  │
  │     │  ├─ Click "Delete"
  │     │  │  ↓
  │     │  │  Permanently delete shift
  │     │  │  Close modal
  │     │  │  Show success: "Shift details
  │     │  │  deleted successfully"
  │     │  │  Refresh shift list
  │     │  │  Remove from display
  │     │  │
  │     │  └─ Click "Cancel"
  │     │     ↓
  │     │     Close modal
  │     │     Return to list
  │     │     Shift remains
  │     │
  │     ├─ Click Select All checkbox
  │     │  ↓
  │     │  Select multiple shifts
  │     │
  │     ├─ Click "Delete" for selected shifts
  │     │  ↓
  │     │  Delete Multiple Confirmation Modal
  │     │  │
  │     │  ├─ Show warning:
  │     │  │  "Are you sure you want to delete
  │     │  │   the selected shift details?"
  │     │  │
  │     │  ├─ Show list of selected shifts
  │     │  │
  │     │  ├─ Click "Delete"
  │     │  │  ↓
  │     │  │  Delete all selected shifts
  │     │  │  Show success: "Selected shift
  │     │  │  details deleted successfully"
  │     │  │
  │     │  └─ Click "Cancel"
  │     │     ↓
  │     │     Close modal
  │     │     Shifts remain
  │     │
  │     ├─ Click "Submit All Shifts"
  │     │  ↓
  │     │  Submit Confirmation Modal
  │     │  │
  │     │  ├─ Show warning:
  │     │  │  "Are you sure you want to
  │     │  │   submit all shift details?"
  │     │  │
  │     │  ├─ Show all shifts summary:
  │     │  │  - Number of shifts
  │     │  │  - Total personnel strength
  │     │  │
  │     │  ├─ Click "Submit"
  │     │  │  ↓
  │     │  │  Submit all shifts
  │     │  │  Close modal
  │     │  │  Show success: "Shift details
  │     │  │  submitted successfully"
  │     │  │  Lock for editing
  │     │  │
  │     │  └─ Click "Cancel"
  │     │     ↓
  │     │     Close modal
  │     │     Return to list
  │     │     Shifts remain editable
  │     │
  │     ├─ Click "Reset Form"
  │     │  ↓
  │     │  Reset Confirmation Modal
  │     │  │
  │     │  ├─ Show warning:
  │     │  │  "This will clear all entered
  │     │  │   shift details. Are you sure?"
  │     │  │
  │     │  ├─ Show shifts to be cleared
  │     │  │
  │     │  ├─ Click "Reset"
  │     │  │  ↓
  │     │  │  Clear all shift form data
  │     │  │  Close modal
  │     │  │  Show info: "Form has been reset"
  │     │  │  Return to empty form
  │     │  │
  │     │  └─ Click "Cancel"
  │     │     ↓
  │     │     Close modal
  │     │     Keep all data
  │     │
  │     └─ Pagination & Sorting
  │        ├─ Navigate pages
  │        ├─ Change rows per page
  │        └─ Sort by columns
  │
  └──────────────────────────────
     End of Shift Configuration

Validation Rules & Error Messages

Shift Name Validation

• Required: Yes
• Min Length: 3 characters
• Max Length: 50 characters
• Format: Letters, numbers, spaces, hyphens
• Uniqueness: Unique within unit context
• Error Messages:
  • "Shift name is required"
  • "Shift name must be at least 3 characters"
  • "Shift name exceeds 50 characters"
  • "Invalid characters in shift name"
  • "Shift name already exists for this unit"

Start Time Validation

• Required: Yes
• Format: HH:MM (24-hour)
• Hours: 00-23
• Minutes: 00-59
• Logic: Must be before End Time
• Error Messages:
  • "Start time is required"
  • "Invalid time format (use HH:MM)"
  • "Invalid hours (00-23)"
  • "Invalid minutes (00-59)"
  • "Start time must be before end time"

End Time Validation

• Required: Yes
• Format: HH:MM (24-hour)
• Hours: 00-23
• Minutes: 00-59
• Logic: Must be after Start Time (can span midnight)
• Error Messages:
  • "End time is required"
  • "Invalid time format (use HH:MM)"
  • "Invalid hours (00-23)"
  • "Invalid minutes (00-59)"
  • "End time must be after start time"

Auth Strength Validation

• Required: Yes
• Type: Integer
• Min: 1
• Max: 99999
• Decimals: Not allowed
• Error Messages:
  • "Auth strength is required"
  • "Must be a positive number"
  • "Auth strength must be at least 1"
  • "Value exceeds maximum limit"
  • "Decimal values not allowed"

Success & Error Messages

Success Messages

Error Messages

Tooltips & Helper Text Summary

End of Documentation