Group

Overview

The Group in Worksphere provides administrators with a comprehensive interface to manage organization groups. Groups serve as the top-level organizational unit that contains companies, departments, and other sub-divisions. This module enables creation, management, and organization of groups within the Worksphere system.

Purpose

The Group enables:

• Create Groups - Add new organizational groups
• View Groups - Display all groups in a list format
• Edit Groups - Modify group details and information
• Delete Groups - Remove groups from the system
• Search Groups - Quickly locate specific groups
• Grid View - Toggle between different view modes

Module Features

• Group creation and management
• Comprehensive group information (name, description)
• Grid view and list view options
• Search functionality
• Bulk selection with checkboxes
• Quick action buttons (Edit, Delete)
• Confirmation dialogs for destructive actions
• Role-based access control

Module Navigation

Accessing the Group Module

Application: Worksphere
URL: http://localhost:3000
Path: Company → Group or Direct Access: /group

Access Points

• Main Navigation: Sidebar menu under Company dropdown
• Direct URL Access: /group
• From Dashboard: Company Management shortcut
• From Company List: Related groups link

User Access

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

Page 1: Group List Page

URL: /group

Overview

The Group List page displays all groups in the Worksphere system. It provides search functionality, view options, and management capabilities for administrators to efficiently manage organizational groups.

Page Description

The Group List page contains:

1. Page Header

   • Title: "Group Management"
   • Breadcrumb: Dashboard > Company > Group
   • User info and logout in top right

2. Action Bar

   • "Add Group" button (Primary action)
   • Search input field
   • Grid view toggle button

3. Group Table

   • Displays all groups with columns and actions
   • Supports row selection with checkboxes
   • Shows pagination information

4. Footer

   • Pagination controls
   • Rows per page selector

Action Bar Components

Add Group Button

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

Search Input Field

• Type: Text Input
• Placeholder: "Search groups by name or description"
• Max Length: 100
• Search Scope: Searches across Group Name and Description
• Real-time: Filters results as you type
• Clear Button: X icon to clear search
• Icon: Search/Magnifying glass icon

Grid View Toggle

• Type: Toggle Button
• Icon: Grid view / List view icon
• Position: Right of search field
• States:
  • Active/Highlighted (current view)
  • Inactive (alternative view)
• Behavior: Switches between grid and list layout

Table Columns & Fields

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

Group Name

• Full name of the group
• Text format (max 100 characters)
• Primary identifier and searchable
• Clickable to view group details
• Bold font for emphasis
• Truncated with ellipsis (...) if too long

Description

• Detailed description of the group
• Text format (max 500 characters)
• Optional field
• Shows partial text with ellipsis
• Hover shows full text in tooltip
• Left-aligned

Actions

• Edit Icon (Pencil icon, Blue)
  • Click to edit group details
  • Navigates to /group/details/:id
  • Hover shows "Edit" tooltip
• Delete Icon (Trash icon, Red)
  • Click to delete group
  • Shows confirmation modal
  • Hover shows "Delete" tooltip

Buttons & Icons

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 groups

Sorting

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

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 Functionality

1. Enter search text in search field
2. System filters results in real-time
3. Searches across Group Name and Description
4. Shows matching groups in table
5. Shows "No groups found" if no matches
6. Click "X" to clear search and show all groups

Grid View

• Appearance: Card-based layout instead of table
• Card Content:
  • Group Name (bold)
  • Description (2-3 lines)
  • Edit/Delete action buttons
• Responsive: Adjusts columns based on screen size
• Spacing: Even distribution across page

List View (Default)

• Appearance: Traditional table layout
• Columns: S No, Group Name, Description, Actions
• Row Height: Standard row spacing
• Alternating Rows: Light gray background on alternate rows

Validations & Notes

• Empty State: If no groups, show "No groups available. Click 'Add Group' to create one."
• Search No Results: "No groups match your search criteria"
• Permissions: Only admin/superadmin can manage groups
• Bulk Delete: Warning before deleting multiple groups
• Page Load: Groups load within 2 seconds
• Real-time Search: Results update within 500ms

User Flow - Group List Page

┌──────────────────────────────────┐
│    Group Management Page         │
│    (List Page)                   │
│                                  │
│  [+ Add Group] [Search...]  [≡][≡] │
│  (Add button) (Search field) (View toggles)
│                                  │
├──────────────────────────────────┤
│ □ | S No | Group Name | Desc | Actions
│ ─────────────────────────────────│
│ ☑  │  1  │ Finance   │ Fin... │ ✎ 🗑
│ ☐  │  2  │ IT Ops    │ Tech.. │ ✎ 🗑
│ ☐  │  3  │ HR Dept   │ Human. │ ✎ 🗑
│                                  │
│  [Previous] [1] [2] [Next]       │
│  Showing 1 to 10 of 50 entries   │
│  Rows per page: [10▼]            │
│                                  │
└──────────────────────────────────┘
         ↓           ↓           ↓
    Click      Click Add     Click Edit
    Search     Group Button    Icon
         │           │           │
         ▼           ▼           ▼
     Filter      Add Group    Edit Group
     Results     Page         Page

Page 2: Add New Group Page

URL: /group/add-group

Overview

The Add New Group page allows administrators to create new groups in the Worksphere system. It provides a simple form with essential group information fields.

Page Description

The Add New Group page contains:

1. Page Header

   • Title: "Add New Group"
   • Breadcrumb: Dashboard > Company > Group > Add
   • Back link to return to list

2. Group Form

   • Form fields for group information
   • Validation on submit
   • Real-time field validation

3. Action Buttons

   • Submit button to create group
   • Reset button to clear form
   • Cancel button to discard changes

Form Fields

Fields in Detail

Group Name (Required)

• Type: Text Input
• Required: Yes (marked with *)
• Max Length: 100 characters
• Placeholder: "Enter group name"
• Example: "Finance Department", "IT Operations", "HR Division"
• Validation Rules:
  • Cannot be empty
  • Letters, numbers, spaces, and hyphens allowed
  • No special characters (@, #, $, %, etc.)
  • Must be unique (not duplicate of existing group)
  • At least 3 characters
  • Max 100 characters
• Error Messages:
  • "Group name is required"
  • "Group name must be at least 3 characters"
  • "Group name already exists"
  • "Invalid characters in group name"
• Help Text: "Name of the organizational group (3-100 characters)"
• Character Counter: Shows "45/100" as you type

Description (Optional)

• Type: Textarea
• Required: No
• Max Length: 500 characters
• Placeholder: "Enter group description (optional)"
• Example: "This group manages all financial operations and budgeting"
• Validation Rules:
  • Optional field
  • Any characters allowed
  • Max 500 characters
  • No validation on format
• Help Text: "Provide details about this group's purpose and responsibilities"
• Character Counter: Shows "150/500" as you type
• Rows: 4-5 rows height

Buttons & Actions

Form Behavior

• Validation: Real-time field validation as you type
• Error Display: Red error messages appear below respective fields
• Field Focus: First invalid field gets focus on submission attempt
• Loading State: Submit button shows loading spinner during submission
• Unsaved Changes: Browser warning if user tries to leave with unsaved data
• Success Message: Green banner at top: "Group created successfully!"
• Auto-redirect: Redirects to Group List after 2-3 seconds
• Field Auto-clear: Form clears after successful submission

Validations & Notes

Required Fields:

• Group Name

Optional Fields:

• Description

Group Name Validation:

• Must be 3-100 characters
• Letters, numbers, spaces, hyphens only
• Must be unique (no duplicate names)
• Trimmed of leading/trailing spaces
• Case-insensitive uniqueness check

Description Validation:

• Optional field
• Max 500 characters
• No format restrictions
• Trimmed of leading/trailing spaces

On Submit:

• All required fields validated
• Error messages shown for invalid fields
• Form prevents submission if invalid
• Success message displayed on completion
• User redirected to list after success

Page 3: Edit Group Page

URL: /group/details/:id

Overview

The Edit Group page allows administrators to modify existing group information. The form is pre-populated with current group data.

Page Description

The Edit Group page contains:

1. Page Header

   • Title: "Edit Group"
   • Breadcrumb: Dashboard > Company > Group > Edit
   • Displays current group name
   • Back link to return to list

2. Group Form

   • Pre-filled with existing group data
   • Same fields as Add New Group page
   • Real-time field validation

3. Action Buttons

   • Edit/Update button to save changes
   • Cancel button to discard changes
   • Delete button (optional) to remove group

Form Fields

The Edit Group page contains the same fields as Add New Group page:

Fields in Detail

Group Name (Required)

• Pre-filled with current group name
• Fully editable
• Same validation rules as Add Group page
• Uniqueness check excludes current group

Description (Optional)

• Pre-filled with current description
• Fully editable
• Same validation rules as Add Group page
• Can be cleared if not required

Buttons & Actions

Form Behavior

• Pre-fill: On page load, all fields populated with current data
• Change Detection: Form indicates unsaved changes (*)
• Error Display: Validation errors appear below respective fields
• Success Message: "Group 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 Group List after 2-3 seconds

Validations & Notes

• Same Validations: All field validations same as Add Group page
• Unique Check: Ensures name is unique except current group
• Required Fields: Group Name (same as Add page)
• Optional Fields: Description (same as Add page)
• Change Detection: Shows visual indicator of unsaved changes
• Error Handling: Same error messages as Add Group page

Page 4: Delete Group Confirmation Modal

Overview

The Delete Group Confirmation is a modal dialog that appears when an administrator clicks the delete action on a group. It confirms the user's intention to delete the group and warns about potential impacts.

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 won't be able to revert this!

Additional Information:

• Group name to be deleted
• Warning about impacts
• Shows example: "Deleting 'Finance Department' group"

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

User Flow - Delete Group

┌────────────────────────────────┐
│   Edit Group Page              │
│   Click Delete button (Red)    │
├────────────────────────────────┤
│                                │
│  ┌─ Delete Modal appears       │
│  │  Shows:                     │
│  │  ⚠ (Warning icon)           │
│  │  "Are you sure?"            │
│  │  "You won't be able to      │
│  │   revert this!"             │
│  │                             │
│  │  Group: "Finance Dept"      │
│  │                             │
│  │  [Yes, delete it!]          │
│  │  [Cancel]                   │
│  │                             │
│  ├─ Click "Yes, delete it!"    │
│  │  ↓                          │
│  │  Delete group               │
│  │  Close modal                │
│  │  Show success: "Group       │
│  │  deleted successfully!"     │
│  │  Refresh Group List         │
│  │  Remove from display        │
│  │                             │
│  ├─ Click "Cancel"             │
│  │  ↓                          │
│  │  Close modal                │
│  │  Return to Edit page        │
│  │  No changes made            │
│  │                             │
│  └─ Click X (close button)     │
│     ↓                          │
│     Close modal                │
│     Return to Edit page        │
│                                │
└────────────────────────────────┘

Group Management User Flow

START (User navigates to Group Module)
  │
  ├──→ Group List Page (/group)
  │     │
  │     ├─ Search/Filter Groups
  │     │  │
  │     │  ├─ Select View (Grid/List)
  │     │  │
  │     │  ├─ View All Groups
  │     │  │
  │     │  ├─ Click "Add Group"
  │     │  │  ↓
  │     │  │  Add Group Form Page
  │     │  │  │
  │     │  │  ├─ Fill Group Name *
  │     │  │  ├─ Fill Description (opt)
  │     │  │  │
  │     │  │  ├─ Click "Submit"
  │     │  │  │  ↓
  │     │  │  │  Validate fields
  │     │  │  │  │
  │     │  │  │  ├─ Valid: Save group
  │     │  │  │  │         Show success
  │     │  │  │  │         Return to list
  │     │  │  │  │
  │     │  │  │  └─ Invalid: Show errors
  │     │  │  │
  │     │  │  ├─ Click "Reset"
  │     │  │  │  ↓
  │     │  │  │  Clear form
  │     │  │  │
  │     │  │  └─ Click "Cancel"
  │     │  │     ↓
  │     │  │     Return to list
  │     │  │
  │     │  ├─ Click Edit (Pencil) icon
  │     │  │  ↓
  │     │  │  Edit Group Page (/group/details/:id)
  │     │  │  │
  │     │  │  ├─ Pre-filled Form
  │     │  │  │  ├─ Group Name (editable)
  │     │  │  │  └─ Description (editable)
  │     │  │  │
  │     │  │  ├─ Modify fields
  │     │  │  │  │
  │     │  │  │  ├─ Click "Update"
  │     │  │  │  │  ↓
  │     │  │  │  │  Validate fields
  │     │  │  │  │  │
  │     │  │  │  │  ├─ Valid: Save changes
  │     │  │  │  │  │         Show success
  │     │  │  │  │  │         Return to list
  │     │  │  │  │  │
  │     │  │  │  │  └─ Invalid: Show errors
  │     │  │  │  │
  │     │  │  │  └─ Click "Cancel"
  │     │  │  │     ↓
  │     │  │  │     Return to list
  │     │  │  │
  │     │  │  └─ Click "Delete"
  │     │  │     ↓
  │     │  │     Delete Confirmation Modal
  │     │  │     │
  │     │  │     ├─ Show warning
  │     │  │     ├─ Show group name
  │     │  │     │
  │     │  │     ├─ Click "Yes, delete it!"
  │     │  │     │  ↓
  │     │  │     │  Delete group
  │     │  │     │  Close modal
  │     │  │     │  Show success
  │     │  │     │  Return to list
  │     │  │     │
  │     │  │     └─ Click "Cancel"
  │     │  │        ↓
  │     │  │        Close modal
  │     │  │        Return to edit page
  │     │  │
  │     │  └─ Click Delete (Trash) icon
  │     │     ↓
  │     │     Delete Confirmation Modal
  │     │     (Same flow as above)
  │     │
  │     └─ Logout
  │        ↓
  │        Session Ends
  │
  └──────────────────────
     END

Group Management Best Practices

For Administrators

1. Creating Groups

   • Use clear, descriptive group names
   • Provide meaningful descriptions
   • Organize groups hierarchically
   • Document group purposes
   • Avoid duplicate names

2. Managing Groups

   • Regularly review group structure
   • Update group information when changes occur
   • Maintain accurate descriptions
   • Archive unused groups rather than delete
   • Track group dependencies

3. Searching & Navigation

   • Use search for quick lookups
   • Toggle between grid/list views as needed
   • Use column sorting to organize data
   • Select multiple items for bulk operations
   • Check group details before deletion

Success Messages

Field Specifications & Validation

Group Name Field

Display Rules:

• Shows full name in form
• Truncated in list (with ellipsis)
• Bold in list view
• Searchable field

Input Rules:

• Accept: Letters (A-Z, a-z)
• Accept: Numbers (0-9)
• Accept: Spaces
• Accept: Hyphens (-)
• Reject: Special characters (@, #, $, %, &, etc.)
• Reject: Leading/trailing spaces (auto-trimmed)

Validation:

• Required: Yes
• Minimum: 3 characters
• Maximum: 100 characters
• Unique: Must not duplicate existing group
• Real-time: Error shown as user types

Error Messages:

• "Group name is required"
• "Group name must be at least 3 characters"
• "Group name must be less than 100 characters"
• "Group name already exists"
• "Invalid characters in group name"

Description Field

Display Rules:

• Shows full description in form
• Shows partial description in list (2-3 lines)
• Hover tooltip shows full text
• Optional field indicator

Input Rules:

• Accept: Any characters
• Accept: Line breaks (new lines)
• Accept: Spaces, punctuation
• Trimmed: Leading/trailing spaces removed

Validation:

• Required: No
• Minimum: 0 characters
• Maximum: 500 characters
• Format: No restrictions
• Real-time: Character count shown

Error Messages:

• "Description must be less than 500 characters"

End of Documentation