Adds department view to calendar application

Introduces department-level grouping and rendering in the calendar view

Extends the application to support:
- Department-based resource filtering
- Dynamic department header rendering
- Mock department data infrastructure

Enables more granular organizational views

src/v2/demo/DemoApp.ts

@@ -18,7 +18,7 @@ export class DemoApp {
   private animator!: NavigationAnimator;
   private container!: HTMLElement;
   private weekOffset = 0;
-  private currentView: 'day' | 'simple' | 'resource' | 'team' = 'simple';
+  private currentView: 'day' | 'simple' | 'resource' | 'team' | 'department' = 'simple';
 
   constructor(
     private orchestrator: CalendarOrchestrator,
@@ -129,6 +129,16 @@ export class DemoApp {
             { type: 'date', values: dates, idProperty: 'date', derivedFrom: 'start' }
           ]
         };
+
+      case 'department':
+        return {
+          templateId: 'department',
+          groupings: [
+            { type: 'department', values: ['dept-styling', 'dept-training'] },
+            { type: 'resource', values: ['EMP001', 'EMP002', 'EMP003', 'EMP004', 'STUDENT001', 'STUDENT002'], idProperty: 'resourceId', belongsTo: 'department.resourceIds' },
+            { type: 'date', values: dates, idProperty: 'date', derivedFrom: 'start' }
+          ]
+        };
     }
   }
 
@@ -164,6 +174,11 @@ export class DemoApp {
       this.currentView = 'team';
       this.render();
     });
+
+    document.getElementById('btn-department')?.addEventListener('click', () => {
+      this.currentView = 'department';
+      this.render();
+    });
   }
 
   private setupDrawerToggle(): void {