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

ts_web/elements/account/navigation.ts

@@ -183,14 +183,6 @@ export class LeleAccountNavigation extends DeesElement {
           <dees-icon .icon=${'lucide:shield'}></dees-icon>
           Manage Roles
         </div>
-        <div
-          class="navigationOption"
-          @click=${async () => {
-          }}
-        >
-          <dees-icon .icon=${'lucide:plus'}></dees-icon>
-          Create Organization
-        </div>
         <div
           class="navigationOption"
           @click=${async () => {
@@ -207,15 +199,58 @@ export class LeleAccountNavigation extends DeesElement {
         <div class="navigationGroupLabel">Organization</div>
         <dees-input-dropdown
           .label=${'Select organization'}
-          @selectedOption=${(eventArg: CustomEvent) => {
+          @selectedOption=${async (eventArg: CustomEvent) => {
+            // Handle "Create new..." option
+            if (eventArg.detail.key === '__create_new__') {
+              this.dispatchEvent(new CustomEvent('open-create-org-modal', {
+                bubbles: true,
+                composed: true,
+              }));
+              return;
+            }
             const currentState = states.accountState.getState();
-            states.accountState.dispatchAction(
-              states.setSelectedOrg,
-              currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
-            );
+            const newOrg = currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload);
+            states.accountState.dispatchAction(states.setSelectedOrg, newOrg);
+
+            // Auto-navigate to new org's current page type (reactivity)
+            const currentPath = window.location.pathname;
+            const subrouter = await this.getAccountRouter();
+            if (currentPath.includes('/org/') && newOrg) {
+              // Extract the page type (apps, billing, etc.) and navigate to new org
+              const pathParts = currentPath.split('/');
+              const pageType = pathParts[5]; // /account/org/:orgName/:pageType
+              if (pageType) {
+                subrouter.pushUrl(`/org/${newOrg.data.slug}/${pageType}`);
+              } else {
+                subrouter.pushUrl(`/org/${newOrg.data.slug}`);
+              }
+            }
           }}
         ></dees-input-dropdown>
 
+        <div
+          class="navigationOption"
+          @click=${async () => {
+            const currentState = states.accountState.getState();
+            if (currentState.selectedOrg) {
+              const subrouter = await this.getAccountRouter();
+              subrouter.pushUrl(`/org/${currentState.selectedOrg.data.slug}`);
+            } else {
+              this.dispatchEvent(new CustomEvent('open-org-select-modal', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  targetPath: '/org/:orgName',
+                  title: 'Select Organization',
+                  description: 'Choose an organization to view its overview.',
+                },
+              }));
+            }
+          }}
+        >
+          <dees-icon .icon=${'lucide:home'}></dees-icon>
+          Overview
+        </div>
         <div
           class="navigationOption"
           @click=${async () => {
@@ -223,6 +258,16 @@ export class LeleAccountNavigation extends DeesElement {
             if (currentState.selectedOrg) {
               const subrouter = await this.getAccountRouter();
               subrouter.pushUrl(`/org/${currentState.selectedOrg.data.slug}/apps`);
+            } else {
+              this.dispatchEvent(new CustomEvent('open-org-select-modal', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  targetPath: '/org/:orgName/apps',
+                  title: 'Select Organization',
+                  description: 'Choose an organization to view its apps.',
+                },
+              }));
             }
           }}
         >
@@ -250,6 +295,16 @@ export class LeleAccountNavigation extends DeesElement {
             if (currentState.selectedOrg) {
               const subrouter = await this.getAccountRouter();
               subrouter.pushUrl(`/org/${currentState.selectedOrg.data.slug}/billing`);
+            } else {
+              this.dispatchEvent(new CustomEvent('open-org-select-modal', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  targetPath: '/org/:orgName/billing',
+                  title: 'Select Organization',
+                  description: 'Choose an organization to view its billing.',
+                },
+              }));
             }
           }}
         >
@@ -296,11 +351,21 @@ export class LeleAccountNavigation extends DeesElement {
         payload: orgArg.data.slug,
       };
     };
+
+    // "Create new..." option to add at the end
+    const createNewOption = {
+      option: '+ Create new...',
+      key: '__create_new__',
+      payload: '__create_new__',
+    };
+
     states.accountState
       .select((stateArg) => stateArg.organizations)
       .pipe(
         plugins.deesDomtools.plugins.smartrx.rxjs.ops.map((orgArrayArg) => {
-          return orgArrayArg.map(orgToMenuEntry);
+          const orgEntries = orgArrayArg.map(orgToMenuEntry);
+          // Add "Create new..." at the end
+          return [...orgEntries, createNewOption];
         })
       )
       .subscribe((menuEntries) => {