wip

PlanTempus.Application/wwwroot/css/employees.css

@@ -464,6 +464,11 @@ swp-edit-select {
 /* ===========================================
    VIEW CONTAINERS (List/Detail swap)
    =========================================== */
+swp-employees-list-view,
+swp-employee-detail-view {
+  transition: opacity 100ms ease;
+}
+
 swp-employees-list-view {
   display: block;
 }
@@ -473,6 +478,15 @@ swp-employee-detail-view {
   min-height: calc(100vh - 60px);
 }
 
+/* View transition states */
+.view-fade-out {
+  opacity: 0;
+}
+
+.view-fade-in {
+  opacity: 1;
+}
+
 swp-back-link {
   display: inline-flex;
   align-items: center;

PlanTempus.Application/wwwroot/ts/modules/employees.ts

@@ -159,12 +159,27 @@ export class EmployeesController {
    */
   private showDetailViewInternal(employeeKey: string): void {
     if (this.listView && this.detailView) {
-      this.listView.style.display = 'none';
-      this.detailView.style.display = 'block';
-      this.detailView.dataset.employee = employeeKey;
+      // Fade out list view
+      this.listView.classList.add('view-fade-out');
+
+      // After fade, switch views
+      setTimeout(() => {
+        this.listView!.style.display = 'none';
+        this.listView!.classList.remove('view-fade-out');
+
+        // Show detail view with fade in
+        this.detailView!.style.display = 'block';
+        this.detailView!.classList.add('view-fade-out');
+        this.detailView!.dataset.employee = employeeKey;
 
         // Reset to first tab
-      this.switchTab(this.detailView, 'general');
+        this.switchTab(this.detailView!, 'general');
+
+        // Trigger fade in
+        requestAnimationFrame(() => {
+          this.detailView!.classList.remove('view-fade-out');
+        });
+      }, 100);
     }
   }
 
@@ -186,8 +201,23 @@ export class EmployeesController {
    */
   private showListViewInternal(): void {
     if (this.listView && this.detailView) {
-      this.detailView.style.display = 'none';
-      this.listView.style.display = 'block';
+      // Fade out detail view
+      this.detailView.classList.add('view-fade-out');
+
+      // After fade, switch views
+      setTimeout(() => {
+        this.detailView!.style.display = 'none';
+        this.detailView!.classList.remove('view-fade-out');
+
+        // Show list view with fade in
+        this.listView!.style.display = 'block';
+        this.listView!.classList.add('view-fade-out');
+
+        // Trigger fade in
+        requestAnimationFrame(() => {
+          this.listView!.classList.remove('view-fade-out');
+        });
+      }, 100);
     }
   }
 }