Documentation: Inbox migration investigation and full migration plan

src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md

@@ -0,0 +1,140 @@
+---
+title: Full Angular Migration Plan - Inbox Component
+description: Complete migration plan for inbox component including parent dependency chain
+---
+
+# Full Angular Migration Plan: Inbox Component
+
+**Date:** January 14, 2026  
+**By:** Husainuddin Mohammed, 223380186  
+**Task:** Complete full Angular migration for units/tasks/inbox
+
+---
+
+## Component Dependency Chain
+
+```
+units/index.coffee (Parent 1)
+    ↓
+    Provides: unit, unitRole
+    ↓
+units/tasks/tasks.coffee (Parent 2)
+    ↓
+    Provides: taskData object
+    ↓
+units/tasks/inbox/inbox.coffee (Child)
+    ↓
+    Uses: unit, unitRole, taskData
+```
+
+**The problem:** Inbox component needs data from two AngularJS parent states. Can't fully migrate
+inbox until parents are migrated.
+
+---
+
+## What Each Parent Provides
+
+**Parent 1 (units/index.coffee):**
+
+- Loads unit object from API
+- Resolves user's role for this unit
+- Handles permissions and redirects
+
+**Parent 2 (units/tasks/tasks.coffee):**
+
+- Creates taskData object structure
+- Manages task selection logic
+- Syncs URL with selected task
+
+**Child (inbox.coffee):**
+
+- Sets task source function
+- Renders Angular InboxComponent
+- Already migrated to Angular - just needs parent cleanup
+
+---
+
+## Migration Order: 3 PRs
+
+### PR 1: Migrate units/index (START HERE)
+
+**Status:** Already started - https://github.com/thoth-tech/doubtfire-web/pull/435
+
+Migrate the root parent first. Replace AngularJS state with Angular resolvers that provide unit and
+unitRole data.
+
+**Files to change:**
+
+- Create Angular state in `doubtfire.states.ts`
+- Add resolvers for unit and unitRole
+- Delete `units/states/index/index.coffee`
+
+**Why first:** Foundation for everything below it
+
+---
+
+### PR 2: Migrate units/tasks
+
+Replace AngularJS state with Angular equivalent that manages taskData object.
+
+**Files to change:**
+
+- Create state or service for taskData management
+- Update `doubtfire.states.ts`
+- Delete `units/states/tasks/tasks.coffee`
+
+**Why second:** Depends on PR 1 providing unit/unitRole
+
+---
+
+### PR 3: Complete inbox migration
+
+Remove remaining AngularJS files now that parents provide data through Angular.
+
+**Files to delete:**
+
+- `units/states/tasks/inbox/inbox.coffee`
+- `units/states/tasks/inbox/inbox.tpl.html`
+
+**Why last:** Depends on both parent PRs
+
+---
+
+## Visual Flow
+
+```
+Current State:
+    AngularJS State → AngularJS State → AngularJS wrapper → Angular Component
+    (units/index)     (units/tasks)      (inbox.coffee)      (InboxComponent)
+
+After PR 1:
+    Angular State → AngularJS State → AngularJS wrapper → Angular Component
+    ✓
+
+After PR 2:
+    Angular State → Angular State → AngularJS wrapper → Angular Component
+    ✓              ✓
+
+After PR 3:
+    Angular State → Angular State → Angular Component
+    ✓              ✓               ✓ (fully migrated)
+```
+
+---
+
+## Testing Strategy
+
+Each PR needs to verify:
+
+- Unit loads correctly with proper permissions
+- Task selection and navigation works
+- URL syncing functions properly
+- Inbox displays tasks and allows interaction
+- No console errors
+
+---
+
+## Key Principle
+
+**Bottom-up migration:** Start at the root (units/index), work down to the child (inbox). Each PR is
+independently testable and valuable even if later ones are delayed.

src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md

@@ -0,0 +1,117 @@
+---
+title: Inbox Migration Investigation Report
+description: Investigation report for the inbox component migration from AngularJS to Angular
+---
+
+# Inbox Migration Investigation Report
+
+**Date:** January 08, 2026  
+**By:** Husainuddin Mohammed, 223380186  
+**Task:** Investigate inbox component migration from AngularJS to Angular
+
+---
+
+## What I Found
+
+The inbox component has already been migrated to Angular (`InboxComponent`), but it can't work
+standalone because it depends on data from two AngularJS parent states.
+
+**Component dependency diagram:**
+
+```
+units/index (AngularJS parent)
+    ↓ provides: unit, unitRole
+units/tasks (AngularJS parent)
+    ↓ provides: taskData
+inbox (Angular component - already exists)
+    ↓ needs all the above data
+```
+
+The Angular component exists, but the parents feeding it data are still AngularJS.
+
+---
+
+## Current State
+
+**What works:**
+
+- Angular InboxComponent exists (`.component.ts`, `.html`, `.scss`)
+- Old AngularJS files still present (`.coffee`, `.tpl.html`)
+- App loads via AngularJS route → renders Angular component with scope data
+
+**What doesn't work:**
+
+- Can't create standalone Angular route
+- Component expects `@Input()` data that comes from AngularJS parent scopes
+- Creating Angular state without parents causes component to break
+
+---
+
+## The Problem
+
+InboxComponent requires these inputs:
+
+- `unit: Unit` (from units/index parent)
+- `unitRole: UnitRole` (from units/index parent)
+- `taskData` object (from units/tasks parent)
+
+Without the parent data, the component has nothing to display.
+
+---
+
+## Two Approaches
+
+### Approach 1: Keep Parents (Partial Migration)
+
+**What:** Keep AngularJS parents, only migrate inbox routing **Pros:** Quick, minimal changes
+**Cons:** Still dependent on AngularJS, need to revisit later **Files to remove:** Just
+`inbox.coffee` and `.tpl.html`
+
+### Approach 2: Migrate Everything (Complete Migration)
+
+**What:** Migrate both parent states first, then inbox **Pros:** Clean, fully Angular, no AngularJS
+dependencies **Cons:** More work, needs parent migration first **Files to remove:** All inbox
+AngularJS files after parents done
+
+---
+
+## Recommended Path
+
+**Approach 2** is the right solution. Here's why:
+
+Both parent states (`units/index` and `units/tasks`) need migration anyway. If we do partial
+migration now, we'll have to come back and redo work later when parents are migrated.
+
+**Migration order:**
+
+1. Migrate units/index parent
+2. Migrate units/tasks parent
+3. Clean up inbox (just delete old files)
+
+This is detailed in the full migration plan document.
+
+---
+
+## Current Files
+
+**Angular (keep):**
+
+- `inbox.component.ts`
+- `inbox.component.html`
+- `inbox.component.scss`
+- `inbox.component.spec.ts`
+
+**AngularJS (delete after parent migration):**
+
+- `inbox.coffee`
+- `inbox.tpl.html`
+- `inbox.scss` (old version)
+
+---
+
+## Key Insight
+
+The inbox isn't really blocked by its own complexity - it's blocked by parent dependencies. Once
+parents are migrated to Angular, finishing inbox is just cleanup (delete old files).
+
+The real work is in the parent migrations, which is covered in the full migration plan.