Added stuff

munstackA/src/app/sgmm-level-view/sgmm-level0-overview/sgmm-level0-overview.component.ts

@@ -20,29 +20,31 @@ import { SharedStateService } from 'src/app/shared-state.service';
               <div class="w-24 h-24 bg-red-200 rounded-full flex items-center justify-center text-sm font-bold">
                 Management
               </div>
-              <div class="absolute text-sm font-bold text-green-700 -top-2">Environment</div>
-              <div class="absolute text-sm font-bold text-orange-700 -bottom-2">Organization</div>
             </div>
           </div>
 
           <!-- Interactive hotspots -->
           <div 
             class="absolute left-40 top-8 cursor-pointer bg-green-100 p-2 rounded-lg shadow hover:bg-green-200"
+            (click)="zoomIn.emit()"
           >
             Environmental Spheres
           </div>
           <div 
             class="absolute right-40 top-24 cursor-pointer bg-green-100 p-2 rounded-lg shadow hover:bg-green-200"
+            (click)="zoomIn.emit()"
           >
             Stakeholders
           </div>
           <div 
             class="absolute left-36 bottom-24 cursor-pointer bg-orange-100 p-2 rounded-lg shadow hover:bg-orange-200"
+            (click)="zoomIn.emit()"
           >
             Processes
           </div>
           <div 
             class="absolute right-36 bottom-16 cursor-pointer bg-orange-100 p-2 rounded-lg shadow hover:bg-orange-200"
+            (click)="zoomIn.emit()"
           >
             Development Modes
           </div>
@@ -57,16 +59,9 @@ import { SharedStateService } from 'src/app/shared-state.service';
   imports: [CommonModule],
 })
 export class SgmmLevel0OverviewComponent implements OnInit {
-  currentLevel = 0; // local property if you need to display or use it
 
-  constructor(private sharedState: SharedStateService) {}
+  constructor() {}
 
-  ngOnInit(): void {
-    // Observe the shared "currentLevel" in real time
-    this.sharedState.currentLevel$.subscribe(level => {
-      this.currentLevel = level;
-      console.log('Level changed to:', level);
-      // or do any other logic you need here
-    });
-  }
+  ngOnInit(): void {}
+  @Output() zoomIn = new EventEmitter<void>();
 }

munstackA/src/app/sgmm-level-view/sgmm-level3-interactions/sgmm-level3-interactions.component.html

@@ -0,0 +1,39 @@
+<!-- Level 3: Interaction Issues -->
+<div class="bg-yellow-50 rounded-lg p-8 relative">
+  <div class="absolute right-2 top-2 text-sm text-gray-500">1,000 ft View</div>
+  <h3 class="text-xl font-bold mb-4 text-center">Interaction Issues</h3>
+  <div class="grid grid-cols-2 gap-4 mb-4">
+    <div class="bg-white p-4 rounded-lg shadow-md">
+      <h4 class="font-bold">Resources</h4>
+      <p class="text-sm">For {{ selectedDimensions.maturity }} companies:</p>
+      <ul class="text-xs text-left list-disc pl-4 mt-2">
+        <li>Financial resources</li>
+        <li>Human capital acquisition</li>
+        <li>Technology integration</li>
+      </ul>
+    </div>
+    <div class="bg-white p-4 rounded-lg shadow-md">
+      <h4 class="font-bold">Norms and Values</h4>
+      <p class="text-sm">Relevant for {{ selectedDimensions.persona }}:</p>
+      <ul class="text-xs text-left list-disc pl-4 mt-2">
+        <li>Leadership principles</li>
+        <li>Corporate social responsibility</li>
+        <li>Ethical frameworks</li>
+      </ul>
+    </div>
+  </div>
+  <div class="grid grid-cols-1 gap-4">
+    <div class="bg-white p-4 rounded-lg shadow-md">
+      <h4 class="font-bold">Concerns and Interests</h4>
+      <p class="text-sm">For {{ selectedDimensions.size }} enterprises in {{ selectedDimensions.market }} markets:</p>
+      <div class="grid grid-cols-3 gap-2 mt-2">
+        <div class="bg-blue-50 p-2 rounded text-xs">Growth strategies</div>
+        <div class="bg-blue-50 p-2 rounded text-xs">Regulatory compliance</div>
+        <div class="bg-blue-50 p-2 rounded text-xs">Competitive positioning</div>
+        <div class="bg-blue-50 p-2 rounded text-xs">Digital transformation</div>
+        <div class="bg-blue-50 p-2 rounded text-xs">Stakeholder management</div>
+        <div class="bg-blue-50 p-2 rounded text-xs">Risk mitigation</div>
+      </div>
+    </div>
+  </div>
+</div>

munstackA/src/app/sgmm-level-view/sgmm-level3-interactions/sgmm-level3-interactions.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { SgmmLevel3InteractionsComponent } from './sgmm-level3-interactions.component';
+
+describe('SgmmLevel3InteractionsComponent', () => {
+  let component: SgmmLevel3InteractionsComponent;
+  let fixture: ComponentFixture<SgmmLevel3InteractionsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [SgmmLevel3InteractionsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SgmmLevel3InteractionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

munstackA/src/app/sgmm-level-view/sgmm-level3-interactions/sgmm-level3-interactions.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sgmm-level3-interactions',
+  templateUrl: './sgmm-level3-interactions.component.html',
+  styleUrls: ['./sgmm-level3-interactions.component.scss'],
+  standalone: true,
+})
+export class SgmmLevel3InteractionsComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}