5 may production

apps/36-blocks/project.json

@@ -19,11 +19,6 @@
                 "outputPath": "dist/apps/36-blocks",
                 "index": "apps/36-blocks/src/index.html",
                 "browser": "apps/36-blocks/src/main.ts",
-                "server": "apps/36-blocks/src/main.server.ts",
-                "prerender": true,
-                "ssr": {
-                    "entry": "apps/36-blocks/src/server.ts"
-                },
                 "polyfills": ["zone.js"],
                 "tsConfig": "apps/36-blocks/tsconfig.app.json",
                 "inlineStyleLanguage": "scss",

apps/36-blocks/src/app/app.component.ts

@@ -118,16 +118,22 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
         if (isPlatformBrowser(this.platformId)) {
             this.actions$.pipe(ofType(logInActions.authenticatedAction), takeUntil(this.destroy$)).subscribe(() => {
                 const currentUrl = this.router.url;
+                const websiteRoutes = [
+                    '/pricing',
+                    '/about',
+                    '/contact',
+                    '/security',
+                    '/privacy',
+                    '/terms',
+                    '/register',
+                    '/login',
+                ];
                 const isOnWebsiteRoute =
                     currentUrl === '/' ||
                     currentUrl === '' ||
-                    currentUrl.startsWith('/pricing') ||
-                    currentUrl.startsWith('/about') ||
-                    currentUrl.startsWith('/contact') ||
-                    currentUrl.startsWith('/security') ||
-                    currentUrl.startsWith('/privacy') ||
-                    currentUrl.startsWith('/terms');
-                if (isOnWebsiteRoute) {
+                    websiteRoutes.some((route) => currentUrl.startsWith(route));
+                const isOnboardingRoute = currentUrl.startsWith('/onboarding');
+                if (isOnWebsiteRoute && !isOnboardingRoute) {
                     this.router.navigate(['/app/dashboard']);
                 }
             });

apps/36-blocks/src/app/app.config.server.ts

@@ -1,8 +1,6 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideServerRendering, withRoutes } from '@angular/ssr';
 import { PERSISTENCE } from '@angular/fire/compat/auth';
-import { serverRoutes } from './app.routes.server';
 
 export const config: ApplicationConfig = {
-    providers: [provideServerRendering(withRoutes(serverRoutes)), { provide: PERSISTENCE, useValue: 'none' }],
+    providers: [{ provide: PERSISTENCE, useValue: 'none' }],
 };

apps/36-blocks/src/app/app.config.ts

@@ -15,8 +15,10 @@ import { appRoutes } from './app.routes';
 import { environment } from '../environments/environment';
 import { reducers, clearStateMetaReducer } from './core/ngrx/store/app.state';
 import { loginsReducer } from './website/home/ngrx/store/login.state';
+import { registrationReducer } from './website/home/ngrx/reducers/registration.reducer';
 import { RootEffects } from './core/ngrx/effects/root';
 import { LogInEffects } from './website/home/ngrx/effects/login.effects';
+import { RegistrationEffects } from './website/home/ngrx/effects/registration.effects';
 import { ErrorInterceptor } from '@proxy/services/interceptor/errorInterceptor';
 import { ProxyBaseUrls } from '@proxy/models/root-models';
 import { AuthInitializerService } from './core/auth-initializer.service';
@@ -33,7 +35,8 @@ export const appConfig: ApplicationConfig = {
         provideHttpClient(withFetch(), withInterceptorsFromDi()),
         provideStore(reducers, { metaReducers: [clearStateMetaReducer] }),
         provideState('auth', loginsReducer),
-        provideEffects([RootEffects, LogInEffects]),
+        provideState('registration', registrationReducer),
+        provideEffects([RootEffects, LogInEffects, RegistrationEffects]),
         ...(!environment.production ? [provideStoreDevtools({ maxAge: 25, serialize: true })] : []),
         { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
         {

apps/36-blocks/src/app/app.routes.server.ts

@@ -1,26 +1,6 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
-    {
-        path: '',
-        renderMode: RenderMode.Prerender,
-    },
-    {
-        path: 'app/**',
-        renderMode: RenderMode.Client,
-    },
-    {
-        path: 'widget-preview/**',
-        renderMode: RenderMode.Client,
-    },
-    {
-        path: 'project',
-        renderMode: RenderMode.Client,
-    },
-    {
-        path: 'client/**',
-        renderMode: RenderMode.Client,
-    },
     {
         path: '**',
         renderMode: RenderMode.Client,

apps/36-blocks/src/app/app.routes.ts

@@ -1,19 +1,21 @@
 import { Component, inject } from '@angular/core';
 import { Route, Router } from '@angular/router';
-import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/compat/auth-guard';
 import { CookieService } from 'ngx-cookie-service';
 import { AuthService } from '@proxy/services/proxy/auth';
+import { CanActivateRouteGuard } from './website/home/authguard';
 
 @Component({ template: '', standalone: true })
 class NotFoundRedirectComponent {}
 
-const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
-
 export const appRoutes: Route[] = [
     {
         path: '',
         loadChildren: () => import('./website/website.routes').then((r) => r.websiteRoutes),
     },
+    {
+        path: 'onboarding',
+        loadComponent: () => import('./panel/onboarding/onboarding.component').then((c) => c.OnboardingComponent),
+    },
     {
         path: 'app',
         loadChildren: () => import('./panel/panel.routes').then((r) => r.panelRoutes),
@@ -24,15 +26,13 @@ export const appRoutes: Route[] = [
             import('./panel/features/create-feature/feature-preview/widget-preview/widget-preview.component').then(
                 (c) => c.WidgetPreviewComponent
             ),
-        data: { authGuardPipe: redirectUnauthorizedToLogin },
-        canActivate: [AngularFireAuthGuard],
+        canActivate: [CanActivateRouteGuard],
     },
     {
         path: 'project',
         loadComponent: () =>
             import('./panel/create-project/create-project.component').then((c) => c.CreateProjectComponent),
-        data: { authGuardPipe: redirectUnauthorizedToLogin },
-        canActivate: [AngularFireAuthGuard],
+        canActivate: [CanActivateRouteGuard],
     },
     {
         path: 'client',

apps/36-blocks/src/app/panel/dashboard/dashboard.component.html

@@ -78,7 +78,7 @@ <h2 class="my-0 text-xl font-bold">Analytics Overview</h2>
                         >
                     </div>
                     <p class="text-3xl font-bold m-0 leading-tight">
-                        {{ getCardValue(overviewData(), card.valueKey) | number }}
+                        {{ getCardValue(overviewData(), card.valueKey, card.valueKeyFallback) | number }}
                     </p>
                     <span class="text-xs mt-1">{{ card.sub }}</span>
                 </div>

apps/36-blocks/src/app/panel/dashboard/dashboard.component.ts

@@ -70,8 +70,14 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 
     readonly overviewCards = OVERVIEW_CARDS;
 
-    getCardValue(data: any, path: string): number {
-        return path.split('.').reduce((acc, k) => acc?.[k], data) ?? 0;
+    getCardValue(data: any, path: string, fallbackPath?: string): number {
+        const read = (p: string) => p.split('.').reduce((acc, k) => acc?.[k], data);
+        const primary = read(path);
+        if (fallbackPath) {
+            if (primary) return primary as number;
+            return (read(fallbackPath) as number) ?? 0;
+        }
+        return (primary as number) ?? 0;
     }
 
     readonly rangeOptions = RANGE_OPTIONS;

apps/36-blocks/src/app/panel/dashboard/dashboard.models.ts

@@ -33,6 +33,7 @@ export interface IRangeOption {
 export interface IOverviewCard {
     key: string;
     valueKey: string;
+    valueKeyFallback?: string;
     label: string;
     icon: string;
     sub: string;
@@ -85,7 +86,8 @@ export interface IBreakdownGroupByOption {
 export const OVERVIEW_CARDS: IOverviewCard[] = [
     {
         key: 'users',
-        valueKey: 'users.client_total',
+        valueKey: 'users.feature_configuration_total',
+        valueKeyFallback: 'users.client_total',
         label: 'Total Users',
         icon: 'people',
         sub: 'registered total',

apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.html

@@ -3,9 +3,11 @@
         <proxy-loader></proxy-loader>
     }
     <div class="flex justify-start gap-2 mb-6" [class.items-start]="isEditMode" [class.items-center]="!isEditMode">
-        <button type="button" matIconButton [routerLink]="['/app', 'features']">
-            <mat-icon>keyboard_arrow_left</mat-icon>
-        </button>
+        @if (!sideNavService.hideSidebar()) {
+            <button type="button" matIconButton [routerLink]="['/app', 'features']">
+                <mat-icon>keyboard_arrow_left</mat-icon>
+            </button>
+        }
         @if (isEditMode) {
             <div class="flex items-center gap-1">
                 @if (nameFieldEditMode) {
@@ -300,7 +302,11 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
     @if (isEditMode) {
         <div class="flex gap-4 grow items-start">
             <mat-card class="outline-card p-0 grow">
-                <mat-tab-group animationDuration="0ms" class="h-full block-feature-tabs">
+                <mat-tab-group
+                    animationDuration="0ms"
+                    class="h-full block-feature-tabs"
+                    [(selectedIndex)]="editModeMainTabIndex"
+                >
                     <mat-tab label="Service">
                         <div class="flex flex-col h-full p-6">
                             @if (featureForm.get('primaryDetails.feature_id')?.value === 1) {
@@ -437,11 +443,18 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
                             </mat-tab>
                         </mat-tab-group>
                     </mat-tab>
+                    <mat-tab label="Manage Members">
+                        <div class="flex flex-col h-full p-6">
+                            <ng-container *ngTemplateOutlet="manageFeature"></ng-container>
+                        </div>
+                    </mat-tab>
                 </mat-tab-group>
             </mat-card>
-            <div class="shrink-0 sticky top-0 self-start">
-                <ng-container *ngTemplateOutlet="previewAuthorization"></ng-container>
-            </div>
+            @if (editModeMainTabIndex !== editModeManageMembersTabIndex) {
+                <div class="shrink-0 sticky top-0 self-start">
+                    <ng-container *ngTemplateOutlet="previewAuthorization"></ng-container>
+                </div>
+            }
         </div>
     }
 </div>
@@ -1191,6 +1204,15 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
     </div>
 </ng-template>
 
+<ng-template #manageFeature>
+    <div class="flex flex-col gap-4">
+        <div class="">
+            <div>
+                <proxy-management [referenceId]="getReferenceId()"></proxy-management>
+            </div>
+        </div>
+    </div>
+</ng-template>
 <ng-template #webhook>
     <div class="flex flex-col gap-6 my-4">
         <div class="card-with-header">

apps/36-blocks/src/app/panel/features/create-feature/create-feature.component.ts

@@ -67,7 +67,9 @@ import { CreatePlanDialogComponent } from './create-plan-dialog/create-plan-dial
 import { CreateTaxDialogComponent } from './create-tax-dialog/create-tax-dialog.component';
 import { ConfirmDialogComponent } from '@proxy/ui/confirm-dialog';
 import { ServiceListComponent, ServiceListItem } from '@proxy/ui/service-list';
+import { ManagementComponent } from '../../users/management/management.component';
 import { UiSettingsService } from '../../layout/ui-settings.service';
+import { SideNavService } from '../../layout/side-nav.service';
 import { WidgetThemeService } from 'apps/36-blocks-widget/src/app/otp/service/widget-theme.service';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { FeaturePreviewComponent } from './feature-preview/feature-preview.component';
@@ -139,6 +141,7 @@ export interface PeriodicElement {
         ServiceListComponent,
         MatButtonToggleModule,
         FeaturePreviewComponent,
+        ManagementComponent,
     ],
     templateUrl: './create-feature.component.html',
     styleUrls: ['./create-feature.component.scss'],
@@ -160,6 +163,7 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy,
     private http = inject(HttpClient);
     private uiSettings = inject(UiSettingsService);
     private themeService = inject(WidgetThemeService);
+    public readonly sideNavService = inject(SideNavService);
 
     public taxes: any[] = [];
     public createPlanForm: any;
@@ -220,6 +224,10 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy,
     public uploadLogoUrl$: Observable<string | null> = this.componentStore.uploadLogoUrl$;
     public errorInUploadLogo$: Observable<boolean> = this.componentStore.errorInUploadLogo$;
     public isEditMode = false;
+    /** Selected index of the edit-mode tab group; used to hide the preview panel on Manage Members. */
+    public editModeMainTabIndex = 0;
+    /** Manage Members tab index: Service, Branding, Setting, Design & code, Webhook, Manage Members. */
+    public readonly editModeManageMembersTabIndex = 5;
     public previewInputPosition: 'top' | 'bottom' = 'top';
     public selectedServiceIndex = 0;
     public selectedSubscriptionServiceIndex = -2;

apps/36-blocks/src/app/panel/layout/layout.component.html

@@ -3,6 +3,7 @@
         class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0 bg-color p-2"
         [class.mat-drawer-toggle-btn-hover]="sideNavService.isSideNavOpen()"
         [class]="!sideNavService.isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[260px]'"
+        [class.!hidden]="sideNavService.hideSidebar()"
     >
         @let clientSettings = clientSettings$ | async; @let clientList = clients$ | async;
         @let isMultipleClients = (clientList?.data?.length ?? 0) > 1;
@@ -71,10 +72,7 @@
             </button>
         </div>
         <!-- Proxy Sidenav::START -->
-        <proxy-main-left-side-nav
-            class="mat-drawer-nav proxy-left-menu flex-1"
-            [isSideNavOpen]="!sideNavService.isSideNavOpen()"
-        ></proxy-main-left-side-nav>
+        <proxy-main-left-side-nav class="mat-drawer-nav proxy-left-menu flex-1"></proxy-main-left-side-nav>
         <!-- Proxy Sidenav::END -->
         @if (logInData$ | async; as user) {
             <proxy-sidebar-user-menu