Organogram Feature Functionality

This document will outline the key features and functionalities of the interactive organogram tool. The tool will be designed to allow for the creation, management, and visualization of an organization's structure.

The feature will be split into two main views: an Editor View for organisation owners and a Read-Only View for general users.

1. Organogram Editor View (`Organogram.vue`)

The Editor View will be a powerful tool for building and maintaining the organogram. It will provide a rich set of features for owners to accurately map out the company's hierarchy and user roles.

The main toolbar at the top of the page will provide high-level actions for managing the entire organogram.

Publish / Unpublish:
- Will allow owners to make the organogram publicly visible to the rest of the organization.
- When a chart is published, a "Published" badge will be clearly displayed.
Auto-Layout:
- Will automatically arrange all user nodes on the canvas into a clean, hierarchical layout.
- This feature will intelligently place managers above their direct reports and align users at the same level.
- Unconnected users will be neatly arranged at the bottom.
Freeze / Unfreeze:
- Freeze: Will lock the organogram, preventing any further edits, such as moving nodes or changing reporting lines. This will be useful for preserving a specific layout.
- Unfreeze: Will unlock the organogram, re-enabling all editing capabilities.
Auto-Save Indicator:
- The organogram will automatically save any changes (like moving a user, zooming, or changing settings) after a few seconds of inactivity.
- A subtle "Auto-saving..." indicator will appear in the toolbar to let the user know their work is being saved.

1.2. Interactive Canvas

The canvas will be the main workspace where the organogram is built.

Panning: Users will be able to click and drag any empty space on the canvas to move the entire organogram view around.
Zooming: Users will be able to use the + and - buttons (located at the top-left) to zoom in and out, allowing for both high-level views and detailed inspection.
Moving Users: Users will be able to click and drag any user node to freely position it on the canvas.
Creating Reporting Lines:
1. Right-click on a user who reports to someone (the subordinate). This will enter "Connecting Mode."
2. Right-click on the user they report to (the manager).
3. A line will be drawn connecting the two, visually representing the reporting relationship.
Deleting Reporting Lines:
- Right-click directly on a connection line. A confirmation prompt will appear, and upon confirming, the reporting relationship will be removed from the database.

Look and Feel

Canvas: The canvas will be clean white background, offering a clean and professional aesthetic that aids with differentiation with the nodes without being distracting.
Nodes: User nodes will be presented as clean, modern cards with rounded corners and a soft drop-shadow to make them visually distinct.
Connectors: The lines representing reporting relationships will be rendered as smooth, curved connectors that are easy to trace, even in a densely populated organogram.

1.3. Side Panel

The side panel on the right will provide tools for adding users and customizing the visual display of the organogram.

User Management Tab

Add Users to Canvas:
- This tab will display a list of all users in the organization who are not yet on the organogram.
- Users will be able to be searched by name or email.
- Users will be able to simply click on a user in the list to add them to the canvas as a new node.
How-to-Use Guide: A handy reference section will be included in the panel, providing quick instructions on how to use the editor's main features.

Settings Tab

Node Information Visibility:
- This tab will provide a series of toggles that will allow the owner to control what information is visible on the user nodes across the entire organogram.
- This will be useful for creating a cleaner, more focused view.
- Visibility will be able to be toggled for:
  - Avatar
  - Name
  - Job Title
  - Office Location
  - Start Date
  - Departments
  - Committees
  - Organisation Functions
  - Divisions
  - Direct Reports count

1.4. User Nodes

Each user will be represented by a "node" on the organogram, which will display their information in a clear and structured way.

Editing User Details:
- Hovering over a user node will reveal a pencil icon. Clicking this will open a modal window where an owner can edit the user's details.
- Editable fields will include:
  - Job Title
  - Start Date
  - Departments
  - Divisions
  - Committees
  - Organisation Functions
  - ISP Seat (a specific internal status)
Information Displayed on the Node:
- Basic Info: Avatar, Name, and Job Title.
- Direct Reports Count: A badge will show how many people report directly to that user.
- Location & Tenure: Office Location and Start Date.
- ISP Seat Badge: A special badge will appear if the user will have an "ISP Seat".
- Organizational Groups: Will display abbreviated names for the user's primary Department, Division, Function, and Committee, with a + indicator if they belong to more than one.

2. Read-Only View (`OrganogramView.vue`)

The Read-Only View will be what general users see when they access the organogram. It will be designed for clear visualization without the risk of accidental edits.

View Published Organogram: Users will be able to see the latest published version of the organogram, including all users, their reporting lines, and the information enabled by the owner.
Limited Interaction:
- Panning and Zooming: Users will still be able to pan and zoom to navigate the organogram.
- No Editing: All editing functionality will be disabled. Users will not be able to move nodes, change reporting lines, or edit user details.
Clean Interface: The interface will be simplified, removing the toolbar and side panel to provide an unobstructed view of the organizational chart. A "Published" badge will be shown to indicate its status.

3. Admin Console Management

The data that will populate the organogram (such as departments, divisions, etc.) will be managed within the Organisation's Admin Console. This will ensure a single source of truth for all organizational units.

3.1. Managing Departments, Divisions, and Functions

These sections will behave similarly, allowing for the creation and management of these core organizational units.

Create, Edit, and Delete: Owners will be able to create new departments, divisions, or functions, edit their names and descriptions, and delete them when no longer needed.
User Assignment: In the "Edit" screen for any of these units, there will be a "Users" list.
- Owners will be able to attach existing users from the organisation to the department, division, or function.
- They will also be able to detach users who are no longer part of that unit.
List View: The main list view for each of these sections will display:
- Name and description.
- A user count badge, showing how many users are assigned to that unit.
- Standard search and sort functionality.

3.2. Managing Committees

Committees will have slightly more advanced functionality.

Create and Edit: Owners will be able to create new committees, providing a name, abbreviation (e.g., "H&S" for Health & Safety), and a description.
User Assignment: Similar to other units, users will be able to be attached to or detached from a committee.
Default Committees:
- The system will include "default" committees that are managed by the system.
- The only default committee for now will be OPAL
- These committees will not be able to be edited or deleted by owners. A warning message and a "System Committee" badge will make this clear in the interface.
- However, owners will still be able to manage user assignments for these default committees.
List View: The committees list will include:
- Name, abbreviation, and description.
- A user count badge.
- A "Default" icon to easily identify system-managed committees.
- Advanced filtering options (e.g., show only default committees, or committees with/without users).