feat(reception): Add activity logging, session metadata and org-selection UI (backend and frontend)

ts_web/elements/account/content.ts

@@ -12,6 +12,8 @@ import {
 } from '@design.estate/dees-element';
 
 import { LeleAccountNavigation } from './navigation.js';
+import { OrgSelectModal } from './org-select-modal.js';
+import { CreateOrgModal } from './create-org-modal.js';
 import { accountDesignTokens } from './sharedstyles.js';
 
 import * as views from './views/index.js';
@@ -91,6 +93,8 @@ export class IdpAccountContent extends DeesElement {
           <!--<lele-accountview-subscription></lele-accountview-subscription>-->
         </div>
       </div>
+      <idp-org-select-modal></idp-org-select-modal>
+      <idp-create-org-modal></idp-create-org-modal>
     `;
   }
 
@@ -100,6 +104,34 @@ export class IdpAccountContent extends DeesElement {
     this.subrouter = this.domtools.router.createSubRouter('/account');
     const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');
 
+    // Get modal references
+    const orgSelectModal = this.shadowRoot.querySelector('idp-org-select-modal') as OrgSelectModal;
+    const createOrgModal = this.shadowRoot.querySelector('idp-create-org-modal') as CreateOrgModal;
+
+    // Setup event listeners for modals
+    this.addEventListener('open-org-select-modal', ((e: CustomEvent) => {
+      orgSelectModal.show({
+        targetPath: e.detail.targetPath,
+        title: e.detail.title,
+        description: e.detail.description,
+      });
+    }) as EventListener);
+
+    this.addEventListener('open-create-org-modal', () => {
+      createOrgModal.show();
+    });
+
+    // Handle org selection from modal
+    orgSelectModal.addEventListener('org-selected', ((e: CustomEvent) => {
+      this.subrouter.pushUrl(e.detail.path);
+    }) as EventListener);
+
+    // Handle org creation - navigate to billing
+    createOrgModal.addEventListener('org-created', ((e: CustomEvent) => {
+      const org = e.detail.org;
+      this.subrouter.pushUrl(`/org/${org.data.slug}/billing`);
+    }) as EventListener);
+
     const cleanupViews = async () => {
       for (const child of Array.from(viewcontainer.children)) {
         viewcontainer.removeChild(child);
@@ -139,6 +171,16 @@ export class IdpAccountContent extends DeesElement {
       await this.domtools.convenience.smartdelay.delayFor(300);
     });
 
+    this.subrouter.on('/org/:orgName', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the org overview page');
+      await cleanupViews();
+      viewcontainer.append(new views.OrgView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
     this.subrouter.on('/org/:orgName/apps', async () => {
       viewcontainer.classList.add('changing');
       await this.domtools.convenience.smartdelay.delayFor(300);