From 546b17427d23758d22a9826c289276375dd4cebd Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Fri, 5 Sep 2025 17:04:59 +0300
Subject: [PATCH 1/7] sso login dialog

---
 .../app/components/login/login.component.html | 10 +++----
 .../app/components/login/login.component.ts   | 10 +++++++
 .../login/sso-dialog/sso-dialog.component.css |  3 +++
 .../sso-dialog/sso-dialog.component.html      | 16 ++++++++++++
 .../sso-dialog/sso-dialog.component.spec.ts   | 23 ++++++++++++++++
 .../login/sso-dialog/sso-dialog.component.ts  | 26 +++++++++++++++++++
 6 files changed, 83 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/app/components/login/sso-dialog/sso-dialog.component.css
 create mode 100644 frontend/src/app/components/login/sso-dialog/sso-dialog.component.html
 create mode 100644 frontend/src/app/components/login/sso-dialog/sso-dialog.component.spec.ts
 create mode 100644 frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts

diff --git a/frontend/src/app/components/login/login.component.html b/frontend/src/app/components/login/login.component.html
index 567c4893e..2fce0b124 100644
--- a/frontend/src/app/components/login/login.component.html
+++ b/frontend/src/app/components/login/login.component.html
@@ -82,13 +82,13 @@ <h1 class="mat-headline-4 loginTitle">
                 <span class="login-form__github-caption">Continue with GitHub</span>
             </button>
 
-            <div *ngIf="!isCustomDomain" class="login-form__sso-button-box"
-                matTooltip="Coming soon"
-                matTooltipPosition="above">
-                <button disabled type="button" mat-stroked-button color="primary" data-testid="login-github-button"
+            <div *ngIf="!isCustomDomain" class="login-form__sso-button-box">
+                <button type="button" mat-stroked-button color="primary"
+                    data-testid="login-sso-button"
                     class="login-form__sso-button"
                     angulartics2On="click"
-                    angularticsAction="Login: login with github is clicked">
+                    angularticsAction="Login: login with sso is clicked"
+                    (click)="openLoginWithSSOdialog()">
                     <svg class="login-form__sso-icon" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M15.75 8.21393H14.625V5.96393C14.625 2.85893 12.105 0.338928 9 0.338928C5.895 0.338928 3.375 2.85893 3.375 5.96393V8.21393H2.25C1.0125 8.21393 0 9.22643 0 10.4639V21.7139C0 22.9514 1.0125 23.9639 2.25 23.9639H15.75C16.9875 23.9639 18 22.9514 18 21.7139V10.4639C18 9.22643 16.9875 8.21393 15.75 8.21393ZM9 18.3389C7.7625 18.3389 6.75 17.3264 6.75 16.0889C6.75 14.8514 7.7625 13.8389 9 13.8389C10.2375 13.8389 11.25 14.8514 11.25 16.0889C11.25 17.3264 10.2375 18.3389 9 18.3389ZM12.4875 8.21393H5.5125V5.96393C5.5125 4.04018 7.07625 2.47643 9 2.47643C10.9237 2.47643 12.4875 4.04018 12.4875 5.96393V8.21393Z" fill="#212121"/>
                     </svg>
diff --git a/frontend/src/app/components/login/login.component.ts b/frontend/src/app/components/login/login.component.ts
index 16649281e..a948fe6f4 100644
--- a/frontend/src/app/components/login/login.component.ts
+++ b/frontend/src/app/components/login/login.component.ts
@@ -19,6 +19,8 @@ import { Router } from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { accounts } from 'google-one-tap';
 import { environment } from 'src/environments/environment';
+import { MatDialog } from '@angular/material/dialog';
+import { SsoDialogComponent } from './sso-dialog/sso-dialog.component';
 
 declare var google: any;
 
@@ -68,6 +70,8 @@ export class LoginComponent implements OnInit, AfterViewInit {
     private ngZone: NgZone,
     private _notifications: NotificationsService,
     public _company: CompanyService,
+    public dialog: MatDialog,
+
   ) { }
 
   ngOnInit(): void {
@@ -150,6 +154,12 @@ export class LoginComponent implements OnInit, AfterViewInit {
     });
   }
 
+  openLoginWithSSOdialog() {
+    this.dialog.open(SsoDialogComponent, {
+      width: '32em'
+    });
+  }
+
   loginWith2FA() {
     this.submitting = true;
     this._auth.loginWith2FA(this.authCode)
diff --git a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.css b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.css
new file mode 100644
index 000000000..b321285f7
--- /dev/null
+++ b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.css
@@ -0,0 +1,3 @@
+.mat-mdc-form-field {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.html b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.html
new file mode 100644
index 000000000..f761f47bd
--- /dev/null
+++ b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.html
@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>Single Sign-On</h1>
+<form #ssoForm="ngForm" (ngSubmit)="loginWithSSO()">
+    <mat-dialog-content>
+        <mat-form-field appearance="outline">
+            <mat-label>Enter company SSO ID</mat-label>
+            <input matInput [(ngModel)]="companySsoId" name="companyId" #companyId="ngModel" required data-testid="company-id-input">
+            <mat-error *ngIf="companyId.errors?.required && (companyId.invalid && companyId.touched)">Company ID should not be empty.</mat-error>
+        </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+        <button mat-flat-button mat-dialog-close>Cancel</button>
+        <button mat-flat-button color="primary">
+            Login
+        </button>
+    </mat-dialog-actions>
+</form>
diff --git a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.spec.ts b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.spec.ts
new file mode 100644
index 000000000..9d7ff79b9
--- /dev/null
+++ b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SsoDialogComponent } from './sso-dialog.component';
+
+describe('SsoDialogComponent', () => {
+  let component: SsoDialogComponent;
+  let fixture: ComponentFixture<SsoDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SsoDialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SsoDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts
new file mode 100644
index 000000000..0455b1887
--- /dev/null
+++ b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'app-sso-dialog',
+  imports: [
+    FormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule
+  ],
+  templateUrl: './sso-dialog.component.html',
+  styleUrl: './sso-dialog.component.css'
+})
+export class SsoDialogComponent {
+  public companySsoId: string;
+
+  loginWithSSO() {
+    window.location.href = `https://app.rocketadmin.com/saas/saml/login/${this.companySsoId}`;
+  }
+}

From 46738996cebc071aa3fe80768bb5cc41293d6529 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Sep 2025 15:45:15 +0300
Subject: [PATCH 2/7] saml: add saml config and sso dialog

---
 frontend/src/app/app-routing.module.ts        |   2 +
 .../components/company/company.component.css  |   4 +-
 .../components/company/company.component.html |  43 ++++--
 .../connect-db/connect-db.component.html      |   2 +-
 .../sso-dialog/sso-dialog.component.html      |   6 +-
 .../login/sso-dialog/sso-dialog.component.ts  |   4 +-
 .../src/app/components/sso/sso.component.css  |  45 ++++++
 .../src/app/components/sso/sso.component.html | 135 ++++++++++++++++++
 .../app/components/sso/sso.component.spec.ts  |  23 +++
 .../src/app/components/sso/sso.component.ts   |  86 +++++++++++
 frontend/src/app/models/company.ts            |  18 +++
 frontend/src/app/services/company.service.ts  |  38 ++++-
 12 files changed, 383 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/app/components/sso/sso.component.css
 create mode 100644 frontend/src/app/components/sso/sso.component.html
 create mode 100644 frontend/src/app/components/sso/sso.component.spec.ts
 create mode 100644 frontend/src/app/components/sso/sso.component.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 6f0dde1f8..4b6e4f98a 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -29,6 +29,7 @@ import { UserDeletedSuccessComponent } from './components/user-deleted-success/u
 import { UserSettingsComponent } from './components/user-settings/user-settings.component';
 import { UsersComponent } from './components/users/users.component';
 import { ZapierComponent } from './components/zapier/zapier.component';
+import { SsoComponent } from './components/sso/sso.component';
 
 const routes: Routes = [
   {path: '', redirectTo: '/connections-list', pathMatch: 'full'},
@@ -46,6 +47,7 @@ const routes: Routes = [
   // company routes have to be in this specific order
   {path: 'company/:company-id/verify/:verification-token', pathMatch: 'full', component: CompanyMemberInvitationComponent, title: 'Invitation | Rocketadmin'},
   {path: 'company', pathMatch: 'full', component: CompanyComponent, canActivate: [AuthGuard]},
+  {path: 'sso/:company-id', pathMatch: 'full', component: SsoComponent, canActivate: [AuthGuard]},
   {path: 'change-password', component: PasswordChangeComponent, canActivate: [AuthGuard]},
   {path: 'upgrade', component: UpgradeComponent, canActivate: [AuthGuard], title: 'Upgrade | Rocketadmin'},
   {path: 'upgrade/payment', component: PaymentFormComponent, canActivate: [AuthGuard], title: 'Payment | Rocketadmin'},
diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css
index 6ed6fcb27..ea18f5bb7 100644
--- a/frontend/src/app/components/company/company.component.css
+++ b/frontend/src/app/components/company/company.component.css
@@ -77,7 +77,9 @@
     }
 }
 
-.tableHeader__button {
+.tableHeader__actions {
+    display: flex;
+    gap: 8px;
     margin-bottom: 16px;
 }
 
diff --git a/frontend/src/app/components/company/company.component.html b/frontend/src/app/components/company/company.component.html
index dde5f5a43..92240981f 100644
--- a/frontend/src/app/components/company/company.component.html
+++ b/frontend/src/app/components/company/company.component.html
@@ -57,22 +57,35 @@ <h1 class="mat-h1 companyPageHeader">
 
     <div class="tableHeader">
         <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan === 'free' && isSaas" data-testid="company-members-max-string">(max 3)</span></h2>
-        <div data-testid="company-invitation-button-wrapper"
-            [matTooltip]="currentPlan === 'free' && usersCount >= 3 && isSaas ? 'To add more members please upgrade your plan.' : null">
-            <button *ngIf="currentUser && currentUser.role === 'ADMIN'"
-                mat-flat-button type="button"
-                data-testid="company-invitation-button"
-                angulartics2On="click"
-                angularticsAction="Company: invite member is clicked"
-                class="tableHeader__button" color="primary"
-                (click)="handleAddMemberDialogOpen()"
-                [disabled]="currentPlan === 'free' && usersCount >= 3 && isSaas">
-                Invite member
-                <mat-icon *ngIf="currentPlan === 'free' && usersCount >= 3 && isSaas">
-                    info_outline
-                </mat-icon>
-            </button>
+        <div class="tableHeader__actions">
+            <div data-testid="sso-button-wrapper"
+                [matTooltip]="currentPlan !== 'enterprise' && isSaas ? 'To turn on SAML SSO upgrade your plan to Enterprise.' : null">
+                <a *ngIf="currentUser && (currentUser.role === 'ADMIN' || currentUser.role === 'DB_ADMIN')"
+                    mat-button
+                    routerLink="/sso/{{company.id}}"
+                    [disabled]="currentPlan !== 'enterprise' && isSaas"
+                    angulartics2On="click"
+                    angularticsAction="Dashboard: add row is clicked">
+                    Configure SAML
+                </a>
+            </div>
+            <div data-testid="company-invitation-button-wrapper"
+                [matTooltip]="currentPlan === 'free' && usersCount >= 3 && isSaas ? 'To add more members please upgrade your plan.' : null">
+                <button *ngIf="currentUser && currentUser.role === 'ADMIN'"
+                    mat-flat-button type="button" color="primary"
+                    data-testid="company-invitation-button"
+                    angulartics2On="click"
+                    angularticsAction="Company: invite member is clicked"
+                    (click)="handleAddMemberDialogOpen()"
+                    [disabled]="currentPlan === 'free' && usersCount >= 3 && isSaas">
+                    Invite member
+                    <mat-icon *ngIf="currentPlan === 'free' && usersCount >= 3 && isSaas">
+                        info_outline
+                    </mat-icon>
+                </button>
+            </div>
         </div>
+
     </div>
 
     <app-placeholder-table-data *ngIf="submittingUsersChange"></app-placeholder-table-data>
diff --git a/frontend/src/app/components/connect-db/connect-db.component.html b/frontend/src/app/components/connect-db/connect-db.component.html
index 1a98bd37b..dba77f8cb 100644
--- a/frontend/src/app/components/connect-db/connect-db.component.html
+++ b/frontend/src/app/components/connect-db/connect-db.component.html
@@ -2,7 +2,7 @@
 <app-alert *ngIf="isDemo" [alert]="isDemoConnectionWarning"></app-alert>
 
 <div class="connectPage">
-    <form action="" #connectForm="ngForm" class="form"
+    <form #connectForm="ngForm" class="form"
         (ngSubmit)="handleCredentialsSubmitting(connectForm)">
         <h1 class="mat-h1 connectForm__fullLine">
             {{ connectionID ? 'Edit credentials' : 'Connect database' }}
diff --git a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.html b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.html
index f761f47bd..ee02b6f1f 100644
--- a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.html
+++ b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.html
@@ -2,9 +2,9 @@ <h1 mat-dialog-title>Single Sign-On</h1>
 <form #ssoForm="ngForm" (ngSubmit)="loginWithSSO()">
     <mat-dialog-content>
         <mat-form-field appearance="outline">
-            <mat-label>Enter company SSO ID</mat-label>
-            <input matInput [(ngModel)]="companySsoId" name="companyId" #companyId="ngModel" required data-testid="company-id-input">
-            <mat-error *ngIf="companyId.errors?.required && (companyId.invalid && companyId.touched)">Company ID should not be empty.</mat-error>
+            <mat-label>Enter company SSO Identifier</mat-label>
+            <input matInput [(ngModel)]="companySsoIdentifier" name="ssoIdentifier" #ssoIdentifier="ngModel" required data-testid="company-sso-identifier-input">
+            <mat-error *ngIf="ssoIdentifier.errors?.required && (ssoIdentifier.invalid && ssoIdentifier.touched)">Company SSO Identifier should not be empty.</mat-error>
         </mat-form-field>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
diff --git a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts
index 0455b1887..a8179bf6a 100644
--- a/frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts
+++ b/frontend/src/app/components/login/sso-dialog/sso-dialog.component.ts
@@ -18,9 +18,9 @@ import { MatInputModule } from '@angular/material/input';
   styleUrl: './sso-dialog.component.css'
 })
 export class SsoDialogComponent {
-  public companySsoId: string;
+  public companySsoIdentifier: string = '';
 
   loginWithSSO() {
-    window.location.href = `https://app.rocketadmin.com/saas/saml/login/${this.companySsoId}`;
+    window.location.href = `https://app.rocketadmin.com/saas/saml/login-by-slug/${this.companySsoIdentifier}`;
   }
 }
diff --git a/frontend/src/app/components/sso/sso.component.css b/frontend/src/app/components/sso/sso.component.css
new file mode 100644
index 000000000..2f28fe0bf
--- /dev/null
+++ b/frontend/src/app/components/sso/sso.component.css
@@ -0,0 +1,45 @@
+.samlConfigForm {
+    display: flex;
+    flex-direction: column;
+    margin: 3em auto;
+    max-width: 520px;
+    min-width: 300px;
+    width: 100%;
+}
+
+.ssoPageHeader {
+    margin-bottom: 24px !important;
+}
+
+.actions {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    /* justify-content: space-between; */
+    background-color: var(--mat-sidenav-content-background-color);
+    box-shadow: var(--shadow);
+    height: 64px;
+    padding: 0 max(calc(50vw - 260px), 2%);
+    width: 100vw;
+}
+
+@media (prefers-color-scheme: dark) {
+    .actions {
+        --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .actions {
+        --shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+    }
+}
+
+.actions-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/sso/sso.component.html b/frontend/src/app/components/sso/sso.component.html
new file mode 100644
index 000000000..24d9834bd
--- /dev/null
+++ b/frontend/src/app/components/sso/sso.component.html
@@ -0,0 +1,135 @@
+<form class="samlConfigForm" (ngSubmit)="samlConfig.id ? updateSamlConfiguration() : createSamlConfiguration()" #samlForm="ngForm" novalidate>
+    <h1 class="mat-h1 ssoPageHeader">
+        SAML SSO Configuration
+    </h1>
+    <mat-form-field appearance="outline">
+        <mat-label>Config name</mat-label>
+        <input matInput name="config-name" #configName="ngModel"
+            data-testid="config-name-input"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.name">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>SSO identifier</mat-label>
+        <input matInput name="sso-slug" #ssoSlug="ngModel"
+            data-testid="sso-slug-input"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.slug">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Entry point</mat-label>
+        <input matInput name="entry-point" #entryPoint="ngModel"
+            data-testid="entry-point-input"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.entryPoint">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Issuer</mat-label>
+        <input matInput name="issuer" #issuer="ngModel"
+            data-testid="issuer-input"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.issuer">
+    </mat-form-field>
+
+
+
+    <mat-form-field appearance="outline">
+        <mat-label>Callback URL</mat-label>
+        <input matInput name="callback-url" #callbackUrl="ngModel"
+            data-testid="callback-url-input"
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.callbackUrl">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Certificate</mat-label>
+        <textarea matInput resizeToFitContent rows="8" name="cert" #cert="ngModel"
+            data-testid="cert-textarea"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.cert"
+        ></textarea>
+        <mat-error *ngIf="cert.errors?.required && (cert.invalid && cert.touched)">Certificate should not be empty</mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+        <mat-label>Signature algorithm</mat-label>
+        <input matInput name="signature-algorithm" #signatureAlgorithm="ngModel"
+            data-testid="signature-algorithm-input"
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.signatureAlgorithm">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Digest algorithm</mat-label>
+        <input matInput name="digest-algorithm" #digestAlgorithm="ngModel"
+            data-testid="digest-algorithm-input"
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.digestAlgorithm">
+    </mat-form-field>
+
+    <mat-checkbox name="active" #active="ngModel"
+        data-testid="active-checkbox"
+        labelPosition="after"
+        [disabled]="submitting"
+        [(ngModel)]="samlConfig.active">
+        Active
+    </mat-checkbox>
+
+    <mat-checkbox name="authnResponseSignedValidation" #authnResponseSignedValidation="ngModel"
+        data-testid="authnResponseSignedValidation-checkbox"
+        labelPosition="after"
+        [disabled]="submitting"
+        [(ngModel)]="samlConfig.authnResponseSignedValidation">
+        Authn Response Signed Validation
+    </mat-checkbox>
+
+    <mat-form-field appearance="outline">
+        <mat-label>Allowed domains</mat-label>
+        <input matInput name="allowed-domains" #allowedDomains="ngModel"
+            data-testid="allowed-domains-input"
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.allowedDomains">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Display Name</mat-label>
+        <input matInput name="display-name" #displayName="ngModel"
+            data-testid="display-name-input"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.displayName">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Logo URL</mat-label>
+        <input matInput name="logo-url" #logoUrl="ngModel"
+            data-testid="logo-url-input"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.logoUrl">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Expected Issuer</mat-label>
+        <input matInput name="expected-issuer" #expectedIssuer="ngModel"
+            data-testid="expected-issuer-input"
+            required
+            [disabled]="submitting"
+            [(ngModel)]="samlConfig.expectedIssuer">
+    </mat-form-field>
+
+    <div class="actions">
+        <div class="actions-box">
+            <a mat-stroked-button type="button" routerLink="/company"
+                data-testid="sso-back-to-company-button">
+                Back
+            </a>
+
+            <button type="submit" mat-flat-button color="primary"
+                data-testid="sso-save-button"
+                [disabled]="submitting">
+                Save
+            </button>
+        </div>
+</div>
+</form>
diff --git a/frontend/src/app/components/sso/sso.component.spec.ts b/frontend/src/app/components/sso/sso.component.spec.ts
new file mode 100644
index 000000000..ebfbcfc29
--- /dev/null
+++ b/frontend/src/app/components/sso/sso.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SsoComponent } from './sso.component';
+
+describe('SsoComponent', () => {
+  let component: SsoComponent;
+  let fixture: ComponentFixture<SsoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SsoComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SsoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/sso/sso.component.ts b/frontend/src/app/components/sso/sso.component.ts
new file mode 100644
index 000000000..135241024
--- /dev/null
+++ b/frontend/src/app/components/sso/sso.component.ts
@@ -0,0 +1,86 @@
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router, RouterModule } from '@angular/router';
+import { SamlConfig } from 'src/app/models/company';
+import { CompanyService } from 'src/app/services/company.service';
+
+@Component({
+  selector: 'app-sso',
+  imports: [
+    MatInputModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    FormsModule,
+    RouterModule,
+    MatFormFieldModule
+  ],
+  templateUrl: './sso.component.html',
+  styleUrl: './sso.component.css'
+})
+export class SsoComponent implements OnInit {
+
+  public companyId: string;
+
+  public samlConfigInitial: SamlConfig = {
+    id: '',
+    name: '',
+    entryPoint: '',
+    issuer: '',
+    callbackUrl: '',
+    cert: '',
+    signatureAlgorithm: '',
+    digestAlgorithm: "sha256",
+    active: true,
+    authnResponseSignedValidation: true,
+    allowedDomains: [],
+    displayName: '',
+    logoUrl: '',
+    expectedIssuer: '',
+    slug: ''
+  };
+  public samlConfig: SamlConfig = this.samlConfigInitial;
+
+  public submitting: boolean = false;
+
+  constructor(
+    private router: Router,
+    private _company: CompanyService
+  ) { }
+
+  ngOnInit() {
+    this.companyId = this.router.routerState.snapshot.root.firstChild.params['company-id'];
+
+    this._company.fetchSamlConfiguration(this.companyId).subscribe( (config) => {
+      if (config.length) this.samlConfig = config[0];
+    });
+  }
+
+  createSamlConfiguration() {
+    this.submitting = true;
+    this._company.createSamlConfiguration(this.companyId, this.samlConfig).subscribe(() => {
+      this.submitting = false;
+      this.router.navigate(['/company']);
+    },
+    () => { this.submitting = false; },
+    () => { this.submitting = false; });
+  }
+
+  updateSamlConfiguration() {
+    this.submitting = true;
+    this._company.updateSamlConfiguration(this.samlConfig).subscribe(() => {
+      this.submitting = false;
+      this.router.navigate(['/company']);
+    },
+    () => { this.submitting = false; },
+    () => { this.submitting = false; });
+  }
+
+}
diff --git a/frontend/src/app/models/company.ts b/frontend/src/app/models/company.ts
index 66f1c34d6..1e9c99e18 100644
--- a/frontend/src/app/models/company.ts
+++ b/frontend/src/app/models/company.ts
@@ -58,3 +58,21 @@ export interface CompanyMemberInvitation {
     invitedUserEmail: string,
     role: CompanyMemberRole
 }
+
+export interface SamlConfig {
+  id: string;
+  name: string;
+  entryPoint: string;
+  issuer: string;
+  callbackUrl: string;
+  cert: string;
+  signatureAlgorithm: string;
+  digestAlgorithm: "sha256",
+  active: true,
+  authnResponseSignedValidation: true,
+  allowedDomains: string[],
+  displayName: string,
+  logoUrl: string,
+  expectedIssuer: string,
+  slug: string
+}
diff --git a/frontend/src/app/services/company.service.ts b/frontend/src/app/services/company.service.ts
index 9b7bcff8d..0e7b3c21c 100644
--- a/frontend/src/app/services/company.service.ts
+++ b/frontend/src/app/services/company.service.ts
@@ -2,7 +2,7 @@ import { AlertActionType, AlertType } from '../models/alert';
 import { BehaviorSubject, EMPTY } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
-import { CompanyMemberRole } from '../models/company';
+import { CompanyMemberRole, SamlConfig } from '../models/company';
 import { ConfigurationService } from './configuration.service';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
@@ -484,4 +484,40 @@ export class CompanyService {
         })
       );
   }
+
+  fetchSamlConfiguration(companyId: string) {
+    return this._http.get<any>(`/saas/saml/company/full/${companyId}`)
+      .pipe(
+        map(res => res),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showErrorSnackbar(err.error.message || err.message);
+          return EMPTY;
+        })
+      );
+  }
+
+  createSamlConfiguration(companyId: string, config: SamlConfig) {
+    return this._http.post<any>(`/saas/saml/company/${companyId}`, config)
+      .pipe(
+        map(res => res),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showErrorSnackbar(err.error.message || err.message);
+          return EMPTY;
+        })
+      );
+  }
+
+  updateSamlConfiguration(config: SamlConfig) {
+    return this._http.put<any>(`/saas/saml/${config.id}`, config)
+      .pipe(
+        map(res => res),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showErrorSnackbar(err.error.message || err.message);
+          return EMPTY;
+        })
+      );
+  }
 }

From 82c44512850eca1d73171c0ab52336366b0bccf6 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Sep 2025 16:44:25 +0300
Subject: [PATCH 3/7] update pricing table

---
 .../components/upgrade/upgrade.component.css  | 22 +++++++
 .../components/upgrade/upgrade.component.html | 18 +++++-
 .../components/upgrade/upgrade.component.ts   | 62 +++++++++++--------
 .../icons/db-logos/{db2_logo.svg => db2.svg}  |  0
 .../icons/{db-logos => }/dynamodb_logo.svg    |  0
 5 files changed, 73 insertions(+), 29 deletions(-)
 rename frontend/src/assets/icons/db-logos/{db2_logo.svg => db2.svg} (100%)
 rename frontend/src/assets/icons/{db-logos => }/dynamodb_logo.svg (100%)

diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css
index 24fa364f6..18ce5463b 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.css
+++ b/frontend/src/app/components/upgrade/upgrade.component.css
@@ -146,12 +146,34 @@
 }
 
 .plansTable {
+    --mat-table-header-container-height: 28px;
+    --mat-table-header-headline-size: 12px;
+    --mat-table-header-headline-color: rgba(0,0,0,0.64);
+
     border-radius: 12px;
     overflow: hidden;
     margin-top: -8px;
     margin-bottom: 20px;
 }
 
+@media (prefers-color-scheme: dark) {
+    .plansTable {
+        --mat-table-header-headline-color: rgba(255,255,255,0.64);
+    }
+}
+
+.databases-header-cell__users {
+    text-align: center;
+}
+
+.person-icon {
+    font-size: 20px;
+    height: 20px;
+    margin-bottom: -4px;
+    margin-left: 2px;
+    width: 20px;
+}
+
 /* .plansTable :ng-deep.mdc-data-table__cell {
     padding: 0 0 0 16px !important;
 } */
\ No newline at end of file
diff --git a/frontend/src/app/components/upgrade/upgrade.component.html b/frontend/src/app/components/upgrade/upgrade.component.html
index 1579d41a5..2b106f97d 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.html
+++ b/frontend/src/app/components/upgrade/upgrade.component.html
@@ -85,13 +85,27 @@ <h2 class="mat-header-2">Databases</h2>
                 <col style="width: 24%">
                 <col style="width: 24%">
             </colgroup>
+            <!--<ng-container matColumnDef="databases">
+                <th mat-header-cell *matHeaderCellDef>
+                    Database
+                </th>
+            </ng-container>
+
+            <ng-container matColumnDef="users">
+                <th mat-header-cell *matHeaderCellDef [attr.colspan]="3" class="databases-header-cell__users">
+                    Users
+                </th>
+            </ng-container>-->
+
             <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
                 <td mat-cell *matCellDef="let element"
                     [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                    <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
-                    <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
+                    <span *ngIf="plan.key === 'title'">{{element[plan.key]}}</span>
+                    <mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-icons-outlined">all_inclusive</mat-icon>
+                    <span *ngIf="element[plan.key] !== '∞' && plan.key !== 'title'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
                 </td>
             </ng-container>
+            <!--<tr mat-header-row *matHeaderRowDef="['databases', 'users']"></tr>-->
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
diff --git a/frontend/src/app/components/upgrade/upgrade.component.ts b/frontend/src/app/components/upgrade/upgrade.component.ts
index b1b62c72b..2e4a48860 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.ts
+++ b/frontend/src/app/components/upgrade/upgrade.component.ts
@@ -10,6 +10,7 @@ import { PaymentService } from 'src/app/services/payment.service';
 import { PlanKey } from 'src/app/models/plans';
 import { RouterModule } from '@angular/router';
 import plans from '../../consts/plans';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-upgrade',
@@ -17,6 +18,7 @@ import plans from '../../consts/plans';
   imports: [
     CommonModule,
     MatButtonModule,
+    MatIconModule,
     MatTableModule,
     MatChipsModule,
     RouterModule,
@@ -37,61 +39,67 @@ export class UpgradeComponent implements OnInit {
   databases = [
     {
       title: 'MySQL',
-      free: true,
-      team: true,
-      enterprise: true
+      free: '3',
+      team: '∞',
+      enterprise: '∞'
     },
     {
       title: 'PostgreSQL',
-      free: true,
-      team: true,
-      enterprise: true
+      free: 3,
+      team: '∞',
+      enterprise: '∞'
     },
     {
       title: 'MongoDB',
-      free: true,
-      team: true,
-      enterprise: true
+      free: 3,
+      team: '∞',
+      enterprise: '∞'
     },
     {
       title: 'DynamoDB',
-      free: true,
-      team: true,
-      enterprise: true
+      free: 3,
+      team: '∞',
+      enterprise: '∞'
     },
     {
       title: 'IBM DB2',
-      free: true,
-      team: true,
-      enterprise: true
+      free: 3,
+      team: '∞',
+      enterprise: '∞'
     },
     {
       title: 'Oracle',
-      free: '',
-      team: '',
-      enterprise: true
+      free: 1,
+      team: 1,
+      enterprise: '∞'
     },
     {
       title: 'Microsoft SQL',
-      free: '',
-      team: '',
-      enterprise: true
+      free: 1,
+      team: 1,
+      enterprise: '∞'
+    },
+    {
+      title: 'Cassandra',
+      free: 1,
+      team: 1,
+      enterprise: '∞'
     }
   ]
 
   users = [
-    {
-      title:'User limit',
-      free: 'up to 3',
-      team: 'unlimited',
-      enterprise: 'unlimited'
-    },
     {
       title: 'Priority support',
       free: '',
       team: true,
       enterprise: true
     },
+    {
+      title:'SAML SSO',
+      free: '',
+      team: '',
+      enterprise: true
+    },
     {
       title: '99.9% uptime SLA',
       free: '',
diff --git a/frontend/src/assets/icons/db-logos/db2_logo.svg b/frontend/src/assets/icons/db-logos/db2.svg
similarity index 100%
rename from frontend/src/assets/icons/db-logos/db2_logo.svg
rename to frontend/src/assets/icons/db-logos/db2.svg
diff --git a/frontend/src/assets/icons/db-logos/dynamodb_logo.svg b/frontend/src/assets/icons/dynamodb_logo.svg
similarity index 100%
rename from frontend/src/assets/icons/db-logos/dynamodb_logo.svg
rename to frontend/src/assets/icons/dynamodb_logo.svg

From fe415bcc9088f36ce500f302b8f5976d0372e870 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Sep 2025 17:14:24 +0300
Subject: [PATCH 4/7] WIP fix unit tests

---
 .../app/components/sso/sso.component.spec.ts  | 46 +++++++++++++++++--
 .../components/upgrade/upgrade.component.css  |  2 +-
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/sso/sso.component.spec.ts b/frontend/src/app/components/sso/sso.component.spec.ts
index ebfbcfc29..ea8349a07 100644
--- a/frontend/src/app/components/sso/sso.component.spec.ts
+++ b/frontend/src/app/components/sso/sso.component.spec.ts
@@ -1,14 +1,54 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { SsoComponent } from './sso.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ActivatedRoute, convertToParamMap, provideRouter, Router } from '@angular/router';
+import { CompanyService } from 'src/app/services/company.service';
+import { of } from 'rxjs';
 
-describe('SsoComponent', () => {
+fdescribe('SsoComponent', () => {
   let component: SsoComponent;
   let fixture: ComponentFixture<SsoComponent>;
+  let companyServiceSpy: jasmine.SpyObj<CompanyService>;
+
+  const mockActivatedRoute = {
+    snapshot: {
+      paramMap: convertToParamMap({
+        'company-id': '123'
+      })
+    }
+  };
+
+  // Mock router state
+  const mockRouter = {
+    routerState: {
+      snapshot: {
+        root: {
+          firstChild: {
+            params: {
+              'company-id': '123'
+            }
+          }
+        }
+      }
+    },
+    navigate: jasmine.createSpy('navigate')
+  };
 
   beforeEach(async () => {
+    companyServiceSpy = jasmine.createSpyObj('CompanyService', ['fetchSamlConfiguration', 'createSamlConfiguration', 'updateSamlConfiguration']);
+    companyServiceSpy.fetchSamlConfiguration.and.returnValue(of([]));
+
     await TestBed.configureTestingModule({
-      imports: [SsoComponent]
+      imports: [
+        SsoComponent,
+        HttpClientTestingModule
+      ],
+      providers: [
+        provideRouter([]),
+        { provide: ActivatedRoute, useValue: mockActivatedRoute },
+        { provide: Router, useValue: mockRouter },
+        { provide: CompanyService, useValue: companyServiceSpy }
+      ]
     })
     .compileComponents();
 
diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css
index 18ce5463b..06fb04043 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.css
+++ b/frontend/src/app/components/upgrade/upgrade.component.css
@@ -169,7 +169,7 @@
 .person-icon {
     font-size: 20px;
     height: 20px;
-    margin-bottom: -4px;
+    margin-bottom: -6px;
     margin-left: 2px;
     width: 20px;
 }

From 476d858c69e65905d4449c29d58204b81a29420b Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Sep 2025 17:14:47 +0300
Subject: [PATCH 5/7] update CLAUDE.md

---
 frontend/CLAUDE.md | 443 +++++++++++++++++----------------------------
 1 file changed, 166 insertions(+), 277 deletions(-)

diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
index 53e336e04..9118452ad 100644
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@@ -1,58 +1,58 @@
-# Auto-Admin Frontend Development Guide
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
 ## 🚀 Project Overview
 
 This is the frontend for Auto-Admin, a database administration tool built with Angular 19. The application provides a comprehensive interface for managing database connections, tables, and data with customizable widgets and user permissions.
 
-## 🛠 Technologies & Frameworks
-
-### Core Technologies
-- **Angular**: v19.0.4 (Latest with standalone components)
-- **TypeScript**: v5.6.0 (ES2022 target)
-- **RxJS**: v7.4.0 (Reactive programming)
-- **Node.js**: Modern versions supported
-
-### UI/UX Stack
-- **Angular Material**: v19.0.3 (Primary UI library)
-- **Angular CDK**: v19.0.3 (Component Development Kit)
-- **@brumeilde/ngx-theme**: v1.2.1 (Custom theming)
-- **SCSS**: Material Design theming
-- **ngx-bootstrap**: v19.0.2 (Additional components)
+## 🔧 Development Commands
 
-### Additional Libraries
-- **@ngstack/code-editor**: v9.0.0 (Code editing)
-- **ngx-markdown**: v19.0.0 (Markdown rendering)
-- **ngx-stripe**: v19.0.0 (Payment integration)
-- **angulartics2**: v14.1.0 (Analytics)
-- **@sentry/angular-ivy**: v7.116.0 (Error monitoring)
+### Build & Development
+```bash
+yarn start                    # Start development server (ng serve)
+yarn build                    # Production build (ng build)
+yarn build --configuration=development  # Development build
+yarn build --configuration=saas         # SaaS build 
+yarn build --configuration=saas-production  # SaaS production build
+yarn build:stats             # Build with webpack bundle analyzer stats
+yarn analyze                 # Analyze bundle size
+```
 
-## 📁 Project Structure
+### Testing
+```bash
+yarn test                     # Run tests in watch mode (ng test)
+yarn test:ci                  # Run tests once for CI (--watch=false --browsers=ChromeHeadlessCustom)
+yarn test --browsers=ChromeHeadlessCustom --no-watch --no-progress  # Run tests headlessly without watch
+```
 
+### Linting
+```bash
+yarn lint                     # Run TSLint (deprecated - needs ESLint migration)
+ng lint                       # Alternative lint command
 ```
-src/app/
-├── components/
-│   ├── dashboard/           # Main data interface
-│   ├── ui-components/       # Reusable UI components
-│   │   ├── row-fields/      # Widget components (text, date, select, etc.)
-│   │   ├── filter-fields/   # Filter components
-│   │   └── alert/           # Common UI elements
-│   ├── login/               # Authentication
-│   ├── registration/        # User registration
-│   ├── connect-db/          # Database connection setup
-│   ├── company/             # Company management
-│   └── skeletons/           # Loading placeholders
-├── services/                # Business logic & API calls
-├── models/                  # TypeScript interfaces
-├── consts/                  # Constants & configurations
-├── lib/                     # Utility functions
-├── validators/              # Form validation
-└── directives/              # Custom directives
+
+### Package Management
+```bash
+yarn add package-name         # Add dependency
+yarn add -D package-name      # Add dev dependency  
+yarn install                  # Install dependencies
 ```
 
-## 🏗 Architecture Patterns
+## 🏗 Architecture Overview
 
-### Standalone Components
-Uses Angular 19's standalone component architecture:
+### Core Technologies
+- **Angular 19** with standalone components architecture
+- **TypeScript 5.6** targeting ES2022
+- **Angular Material 19** for UI components  
+- **RxJS 7.4** for reactive programming
+- **SCSS** with Material Design theming
+- **Jasmine/Karma** for testing
+
+### Key Architecture Patterns
+
+#### Standalone Components
+Uses Angular 19's standalone component architecture without NgModules:
 
 ```typescript
 @Component({
@@ -66,8 +66,8 @@ export class ExampleComponent implements OnInit {
 }
 ```
 
-### Service-Based State Management
-No NgRx - uses BehaviorSubject pattern for state:
+#### Service-Based State Management
+No NgRx - uses BehaviorSubject pattern for state management:
 
 ```typescript
 @Injectable({ providedIn: 'root' })
@@ -81,21 +81,64 @@ export class DataService {
 }
 ```
 
-### Dynamic Widget System
-Highly flexible widget system for different data types:
+#### Multi-Environment Support
+The app supports multiple deployment environments:
+- `environment.ts` - Development
+- `environment.prod.ts` - Production  
+- `environment.saas.ts` - SaaS development
+- `environment.saas-prod.ts` - SaaS production
+
+Each environment uses different file replacements and build configurations.
 
-```typescript
-export const UIwidgets = {
-  String: TextRowComponent,
-  Number: NumberRowComponent,
-  Date: DateRowComponent,
-  Boolean: BooleanRowComponent,
-  Phone: PhoneRowComponent,
-  // ... more widgets
-};
+### Project Structure
+
+```
+src/app/
+├── components/
+│   ├── dashboard/           # Main data interface
+│   ├── ui-components/       # Reusable UI components
+│   ├── login/               # Authentication
+│   ├── registration/        # User registration
+│   ├── connect-db/          # Database connection setup
+│   ├── company/             # Company management
+│   └── skeletons/           # Loading placeholders
+├── services/                # Business logic & API calls
+│   ├── auth.service.ts      # Authentication service
+│   ├── connections.service.ts # Database connections
+│   ├── tables.service.ts    # Table operations
+│   └── user.service.ts      # User management
+├── models/                  # TypeScript interfaces
+├── consts/                  # Constants & configurations
+│   ├── databases.ts         # Supported databases config
+│   └── plans.ts            # Subscription plans
+├── lib/                     # Utility functions
+├── validators/              # Form validation
+└── directives/              # Custom directives
 ```
 
-## 📝 Code Style & Conventions
+### Database Support
+
+The application supports multiple database types:
+- MySQL
+- PostgreSQL  
+- MongoDB
+- DynamoDB
+- Cassandra
+- OracleDB
+- MSSQL
+- IBM DB2
+
+Database configurations are defined in `src/app/consts/databases.ts`.
+
+### Authentication & User Management
+
+- JWT token-based authentication with expiration handling
+- Google OAuth integration
+- Demo account functionality
+- Session restoration on app initialization
+- Automatic logout on token expiration
+
+## 📝 Code Conventions
 
 ### Naming Conventions
 - **Files**: `kebab-case.component.ts`
@@ -106,6 +149,18 @@ export const UIwidgets = {
 - **Private members**: Prefixed with `_` (e.g., `_privateMethod`)
 - **Selectors**: `app-` prefix with kebab-case
 
+### Import Organization
+```typescript
+// External libraries first
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+
+// Internal imports second  
+import { BaseRowFieldComponent } from '../base-row-field/base-row-field.component';
+import { DataService } from 'src/app/services/data.service';
+```
+
 ### Component Structure
 ```typescript
 @Component({
@@ -142,59 +197,12 @@ export class WidgetNameComponent implements OnInit {
 }
 ```
 
-### Import Organization
-```typescript
-// External libraries first
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { CommonModule } from '@angular/common';
-
-// Internal imports second  
-import { BaseRowFieldComponent } from '../base-row-field/base-row-field.component';
-import { DataService } from 'src/app/services/data.service';
-```
-
-## 🎨 Styling Guidelines
+## 🧪 Testing Configuration
 
-### Material Design Implementation
-- Uses Material Design 2 (M2) APIs
-- Custom theme with light/dark mode support
-- Noto Sans font family
-
-### SCSS Structure
-```scss
-// Component-specific styles
-.component-name {
-  &__element {
-    // BEM methodology
-  }
-  
-  &--modifier {
-    // State variations
-  }
-}
-
-// Use Material Design spacing
-.mat-form-field {
-  width: 100%;
-  margin-bottom: 16px;
-}
-```
-
-### Theme Configuration
-```scss
-$custom-palette-primary: mat.m2-define-palette(mat.$m2-blue-palette);
-$custom-light-theme: mat.m2-define-light-theme((
-  color: (
-    primary: $custom-palette-primary,
-    accent: $custom-palette-accent,
-    warn: $custom-palette-warn,
-  ),
-  density: -3,
-));
-```
-
-## 🧪 Testing Guidelines
+### Test Framework
+- **Jasmine** as testing framework
+- **Karma** as test runner
+- **ChromeHeadless** for CI environments
 
 ### Test Structure
 ```typescript
@@ -215,195 +223,76 @@ describe('ComponentName', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-  
-  it('should handle user input', () => {
-    // Test user interactions
-  });
 });
 ```
 
-### Test Commands
-```bash
-npm test          # Run tests in watch mode
-npm run test:ci   # Run tests once for CI
-```
+### Karma Configuration
+Custom launcher `ChromeHeadlessCustom` is configured for CI with flags `--no-sandbox --disable-gpu`.
 
-## 🔧 Development Workflow
-
-### Development Commands
-```bash
-npm start         # Start development server
-npm run build     # Build for production
-npm test          # Run tests
-npm run lint      # Run linting (TSLint - needs ESLint migration)
-```
-
-### Environment Configuration
-- `environment.ts` - Development
-- `environment.prod.ts` - Production
-- `environment.saas.ts` - SaaS development
-- `environment.saas-prod.ts` - SaaS production
-
-## 🎯 Widget Development Guide
-
-### Creating New Widgets
-
-1. **Create Component Files**:
-```bash
-mkdir src/app/components/ui-components/row-fields/your-widget
-```
-
-2. **Extend Base Component**:
-```typescript
-export class YourWidgetComponent extends BaseRowFieldComponent {
-  @Input() value: any;
-  static type = 'your-widget';
-  
-  // Widget-specific logic
-}
-```
-
-3. **Add to Widget Registry**:
-```typescript
-// In src/app/consts/field-types.ts
-export const UIwidgets = {
-  // ... existing widgets
-  YourWidget: YourWidgetComponent,
-};
-```
+## 🎨 Styling & Theming
 
-4. **Add to Enums**:
-```typescript
-// Backend: src/enums/widget-type.enum.ts
-// Shared: shared-code/src/data-access-layer/shared/enums/table-widget-type.enum.ts
-export enum WidgetTypeEnum {
-  // ... existing types
-  YourWidget = 'YourWidget',
-}
-```
-
-5. **Configure Default Parameters**:
-```typescript
-// In db-table-widgets.component.ts
-public defaultParams = {
-  // ... existing params
-  YourWidget: `// Widget configuration documentation
-{
-  "param1": "value1",
-  "param2": true
-}`,
-};
-```
-
-## 🚨 Common Patterns & Best Practices
+### Material Design
+- Uses Material Design 2 (M2) APIs
+- Custom theme with light/dark mode support  
+- SCSS preprocessing with Material theme presets
+- Custom theme files: `src/custom-theme.scss`, `src/styles.scss`
 
-### Error Handling
-```typescript
-this.service.getData().subscribe({
-  next: (data) => {
-    // Handle success
-  },
-  error: (error) => {
-    console.error('Error occurred:', error);
-    // Show user-friendly error message
+### SCSS Structure
+```scss
+// Component-specific styles using BEM methodology
+.component-name {
+  &__element {
+    // Element styles
   }
-});
-```
-
-### Loading States
-```typescript
-export class ExampleComponent {
-  public loading = false;
   
-  async loadData() {
-    this.loading = true;
-    try {
-      const data = await this.service.getData().toPromise();
-      // Process data
-    } finally {
-      this.loading = false;
-    }
+  &--modifier {
+    // State variations
   }
 }
 ```
 
-### Form Validation
-```typescript
-// Use Angular's reactive forms with Material Design
-import { FormBuilder, Validators } from '@angular/forms';
+## 📦 Third-Party Integrations
 
-constructor(private fb: FormBuilder) {
-  this.form = this.fb.group({
-    field: ['', [Validators.required, Validators.minLength(3)]]
-  });
-}
-```
+### Analytics & Monitoring
+- **Angulartics2** with Amplitude integration
+- **@sentry/angular-ivy** for error monitoring
+- **Hotjar** for user behavior tracking (demo accounts)
+- **Intercom** for customer support
 
-## 📦 Package Management
+### Payment Processing
+- **@stripe/stripe-js** and **ngx-stripe** for payment processing
 
-### Using Yarn
-```bash
-yarn add package-name          # Add dependency
-yarn add -D package-name       # Add dev dependency  
-yarn install                   # Install dependencies
-```
+### Additional Libraries
+- **@ngstack/code-editor** for code editing capabilities
+- **ngx-markdown** for markdown rendering
+- **libphonenumber-js** for phone number handling
+- **date-fns** for date manipulation
+- **lodash** for utility functions
 
-### Important: Peer Dependencies
-When adding new packages, check for peer dependency warnings and install missing dependencies:
-```bash
-yarn add ngx-intl-tel-input intl-tel-input google-libphonenumber
-```
+## 🔧 Build Configuration
 
-## 🔄 Migration Notes
+### Angular Build Targets
+- **Default**: Development configuration
+- **Production**: Optimized build with source maps
+- **Development**: Explicit development configuration
+- **SaaS/SaaS-Production**: Specialized SaaS builds with different index files
 
-### Recommended Upgrades
-- **TSLint → ESLint**: Current linting setup uses deprecated TSLint
-- **Material Design 3**: Consider upgrading from M2 to M3 APIs
-- **Standalone Migration**: Already using standalone components (✅)
+### Bundle Size Limits
+- Initial bundle: Warning at 2MB, error at 5MB
+- Component styles: Warning at 6KB, error at 10KB
 
-### Breaking Changes to Watch
-- Angular Material API changes between versions
-- RxJS operator deprecations
-- TypeScript strict mode compliance
+## 🚨 Important Notes
 
-## 🎯 Performance Considerations
+### Migration Recommendations
+- **TSLint → ESLint**: Current linting uses deprecated TSLint
+- **Material Design 3**: Consider upgrading from M2 to M3 APIs  
 
-### Bundle Optimization
+### Performance Considerations
 - Tree-shaking enabled in production builds
 - Lazy loading for route-based features
-- OnPush change detection where applicable
-
-### Memory Management
-```typescript
-export class ExampleComponent implements OnDestroy {
-  private destroy$ = new Subject<void>();
-  
-  ngOnInit() {
-    this.service.data$.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe(data => {
-      // Handle data
-    });
-  }
-  
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}
-```
-
----
-
-## 🤝 Contributing
-
-When contributing to this project:
-
-1. Follow the established naming conventions
-2. Extend `BaseRowFieldComponent` for new widgets
-3. Add comprehensive tests for new features
-4. Update this CLAUDE.md file when adding new patterns
-5. Ensure builds pass with `npm run build`
-6. Follow the widget development guide for UI components
+- Memory leak prevention with proper subscription management using `takeUntil` pattern
 
-For questions about implementation patterns, refer to existing similar components in the codebase as examples.
\ No newline at end of file
+### Security
+- Token-based authentication with automatic expiration
+- XSS protection through Angular's built-in sanitization
+- Sentry integration for error monitoring and security alerts
\ No newline at end of file

From 734fc599fdebcd2e3f555955e0778b4bcf29a1af Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Mon, 8 Sep 2025 17:32:52 +0300
Subject: [PATCH 6/7] show app version in footer

---
 frontend/Dockerfile                              | 10 ++++++++++
 frontend/package.json                            |  9 +++++----
 frontend/scripts/update-version.js               | 16 ++++++++++++++++
 frontend/src/app/app.component.html              |  2 +-
 frontend/src/app/app.component.ts                |  2 ++
 frontend/src/app/version.ts                      |  2 ++
 frontend/src/environments/environment.dev.ts     |  3 ++-
 frontend/src/environments/environment.prod.ts    |  3 ++-
 .../src/environments/environment.saas-prod.ts    |  3 ++-
 frontend/src/environments/environment.saas.ts    |  3 ++-
 frontend/src/environments/environment.ts         |  3 ++-
 11 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 frontend/scripts/update-version.js
 create mode 100644 frontend/src/app/version.ts

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index ad6fcc46a..6bb2029b1 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,9 +1,19 @@
 FROM public.ecr.aws/docker/library/node:18-alpine as builder
+ARG VERSION
 WORKDIR /app
 COPY package.json yarn.lock ./
 RUN yarn global add @angular/cli && yarn install
 COPY angular.json browserslist tsconfig.app.json tsconfig.json tslint.json ./
+COPY scripts ./scripts/
 COPY src ./src/
+
+# Update version if VERSION build arg is provided
+RUN if [ -n "$VERSION" ]; then \
+    echo "Updating package.json version to $VERSION" && \
+    npm version $VERSION --no-git-tag-version && \
+    yarn update-version; \
+  fi
+
 RUN ng build --configuration=production
 
 FROM public.ecr.aws/docker/library/nginx:alpine
diff --git a/frontend/package.json b/frontend/package.json
index 27aaf2d84..d9e5ba978 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,16 +1,17 @@
 {
   "name": "dissendium-v0",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
+    "start": "node scripts/update-version.js && ng serve",
+    "build": "node scripts/update-version.js && ng build",
     "test": "ng test",
     "test:ci": "ng test --watch=false --browsers=ChromeHeadlessCustom",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "analyze": "webpack-bundle-analyzer dist/dissendium-v0/stats.json",
-    "build:stats": "ng build --stats-json"
+    "build:stats": "node scripts/update-version.js && ng build --stats-json",
+    "update-version": "node scripts/update-version.js"
   },
   "private": true,
   "dependencies": {
diff --git a/frontend/scripts/update-version.js b/frontend/scripts/update-version.js
new file mode 100644
index 000000000..efb0b39eb
--- /dev/null
+++ b/frontend/scripts/update-version.js
@@ -0,0 +1,16 @@
+const fs = require('fs');
+const path = require('path');
+
+// Read package.json to get the version
+const packageJsonPath = path.join(__dirname, '..', 'package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+const version = packageJson.version;
+
+// Update the version.ts file
+const versionTsPath = path.join(__dirname, '..', 'src', 'app', 'version.ts');
+const versionTsContent = `// This file is auto-generated during build
+export const version = '${version}';
+`;
+
+fs.writeFileSync(versionTsPath, versionTsContent);
+console.log(`Updated version.ts with version ${version}`);
\ No newline at end of file
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index b87357d03..7e19e03a0 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -220,7 +220,7 @@
         </mat-tab-nav-panel>
 
         <div *ngIf="!authBarTheme" class="footer">
-            <span class="footer__text">&copy; 2025 Rocketadmin</span>
+            <span class="footer__text">&copy; 2025 Rocketadmin • v{{appVersion}}</span>
         </div>
         <app-feature-notification *ngIf="isFeatureNotificationShown" (dismiss)="dismissFeatureNotification()"></app-feature-notification>
     </mat-sidenav-content>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index a0e7c2d36..1d1b031d0 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -29,6 +29,7 @@ import { UserService } from './services/user.service';
 import amplitude from 'amplitude-js';
 import { differenceInMilliseconds } from 'date-fns';
 import { environment } from '../environments/environment';
+import { version } from './version';
 
 //@ts-ignore
 window.amplitude = amplitude;
@@ -58,6 +59,7 @@ amplitude.getInstance().init("9afd282be91f94da735c11418d5ff4f5");
 export class AppComponent {
 
   public isSaas = (environment as any).saas;
+  public appVersion = version;
   userActivity;
   userInactive: Subject<any> = new Subject();
   currentFeatureNotificationId: string = 'saved-filters';
diff --git a/frontend/src/app/version.ts b/frontend/src/app/version.ts
new file mode 100644
index 000000000..fdb12fe4e
--- /dev/null
+++ b/frontend/src/app/version.ts
@@ -0,0 +1,2 @@
+// This file is auto-generated during build
+export const version = '1.0.0';
diff --git a/frontend/src/environments/environment.dev.ts b/frontend/src/environments/environment.dev.ts
index d45ec81c1..f01a9c447 100644
--- a/frontend/src/environments/environment.dev.ts
+++ b/frontend/src/environments/environment.dev.ts
@@ -4,5 +4,6 @@ export const environment = {
   apiRoot: "https://app.rocketadmin.com/api",
   saasURL: "https://app.rocketadmin.com",
   saasHostnames: ['localhost'],
-  stagingHost: ""
+  stagingHost: "",
+  version: '0.0.0'
 };
diff --git a/frontend/src/environments/environment.prod.ts b/frontend/src/environments/environment.prod.ts
index 75da7e983..acfb70db2 100644
--- a/frontend/src/environments/environment.prod.ts
+++ b/frontend/src/environments/environment.prod.ts
@@ -2,5 +2,6 @@ export const environment = {
   production: true,
   apiRoot: "/api",
   saasURL: "",
-  stagingHost: "rocketadmin-dev.tail9f8b2.ts.net" // Tailscale host
+  stagingHost: "rocketadmin-dev.tail9f8b2.ts.net", // Tailscale host
+  version: '0.0.0'
 };
diff --git a/frontend/src/environments/environment.saas-prod.ts b/frontend/src/environments/environment.saas-prod.ts
index d93fdce67..b01db2531 100644
--- a/frontend/src/environments/environment.saas-prod.ts
+++ b/frontend/src/environments/environment.saas-prod.ts
@@ -4,5 +4,6 @@ export const environment = {
     apiRoot: "/api",
     saasURL: "",
     saasHostnames: ['app.rocketadmin.com', 'localhost', 'rocketadmin-dev.tail9f8b2.ts.net'],
-    stagingHost: "rocketadmin-dev.tail9f8b2.ts.net" // Tailscale host
+    stagingHost: "rocketadmin-dev.tail9f8b2.ts.net", // Tailscale host
+    version: '0.0.0'
   };
diff --git a/frontend/src/environments/environment.saas.ts b/frontend/src/environments/environment.saas.ts
index 3b1e1ca49..c1b1dd0f8 100644
--- a/frontend/src/environments/environment.saas.ts
+++ b/frontend/src/environments/environment.saas.ts
@@ -4,5 +4,6 @@ export const environment = {
     apiRoot: "/api",
     saasURL: "",
     saasHostnames: ['app.rocketadmin.com', 'localhost', 'rocketadmin-dev.tail9f8b2.ts.net'],
-    stagingHost: "rocketadmin-dev.tail9f8b2.ts.net" // Tailscale host
+    stagingHost: "rocketadmin-dev.tail9f8b2.ts.net", // Tailscale host
+    version: '0.0.0'
 };
diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts
index 8bdf556e6..ab2f5ad78 100644
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@@ -5,7 +5,8 @@
 export const environment = {
   production: false,
   apiRoot: "/api",
-  stagingHost: "rocketadmin-dev.tail9f8b2.ts.net"  // Tailscale host
+  stagingHost: "rocketadmin-dev.tail9f8b2.ts.net",  // Tailscale host
+  version: '0.0.0'
 } as Record<string, any>;
 
 /*

From 1cf4bf1139616f606619f23007727828b463d6a3 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Wed, 10 Sep 2025 15:51:06 +0300
Subject: [PATCH 7/7] fix unit tests

---
 .../components/company/company.component.spec.ts   |  2 ++
 .../src/app/components/sso/sso.component.spec.ts   | 14 +++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/company/company.component.spec.ts b/frontend/src/app/components/company/company.component.spec.ts
index e734a7f7d..13c2becc2 100644
--- a/frontend/src/app/components/company/company.component.spec.ts
+++ b/frontend/src/app/components/company/company.component.spec.ts
@@ -16,6 +16,7 @@ import { SubscriptionPlans } from 'src/app/models/user';
 import { UserService } from 'src/app/services/user.service';
 import { of } from 'rxjs';
 import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
 
 describe('CompanyComponent', () => {
   let component: CompanyComponent;
@@ -128,6 +129,7 @@ describe('CompanyComponent', () => {
         CompanyComponent
     ],
     providers: [
+        provideRouter([]),
         provideHttpClient(),
         { provide: CompanyService, useValue: fakeCompanyService },
         { provide: UserService, useValue: fakeUserService }
diff --git a/frontend/src/app/components/sso/sso.component.spec.ts b/frontend/src/app/components/sso/sso.component.spec.ts
index ea8349a07..82d85cd9c 100644
--- a/frontend/src/app/components/sso/sso.component.spec.ts
+++ b/frontend/src/app/components/sso/sso.component.spec.ts
@@ -1,11 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SsoComponent } from './sso.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ActivatedRoute, convertToParamMap, provideRouter, Router } from '@angular/router';
+import { ActivatedRoute, convertToParamMap, Router, RouterLink, RouterModule } from '@angular/router';
 import { CompanyService } from 'src/app/services/company.service';
 import { of } from 'rxjs';
 
-fdescribe('SsoComponent', () => {
+describe('SsoComponent', () => {
   let component: SsoComponent;
   let fixture: ComponentFixture<SsoComponent>;
   let companyServiceSpy: jasmine.SpyObj<CompanyService>;
@@ -31,7 +31,11 @@ fdescribe('SsoComponent', () => {
         }
       }
     },
-    navigate: jasmine.createSpy('navigate')
+    navigate: jasmine.createSpy('navigate'),
+    events: of(null),
+    url: '/company',
+    createUrlTree: jasmine.createSpy('createUrlTree').and.returnValue({}),
+    serializeUrl: jasmine.createSpy('serializeUrl').and.returnValue('company')
   };
 
   beforeEach(async () => {
@@ -41,10 +45,10 @@ fdescribe('SsoComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         SsoComponent,
-        HttpClientTestingModule
+        HttpClientTestingModule,
+        RouterModule.forRoot([])
       ],
       providers: [
-        provideRouter([]),
         { provide: ActivatedRoute, useValue: mockActivatedRoute },
         { provide: Router, useValue: mockRouter },
         { provide: CompanyService, useValue: companyServiceSpy }