dreamfactorysoftware · thekevinm · Aug 12, 2025 · Aug 12, 2025
diff --git a/dist/1307.574ece94de3860bf.js b/dist/1307.574ece94de3860bf.js
diff --git a/dist/1307.cd2b540170f346b9.js b/dist/1307.cd2b540170f346b9.js
diff --git a/dist/1361.478caeb5e427cd4a.js b/dist/1361.478caeb5e427cd4a.js
diff --git a/dist/1361.b86eff7134763666.js b/dist/1361.b86eff7134763666.js
diff --git a/dist/assets/i18n/home/en.json b/dist/assets/i18n/home/en.json
@@ -99,19 +99,21 @@
     "services": {
       "title": "API Services",
       "total": "Your Services",
-      "createPrompt": "Get started! Create your first API using the cards above"
+      "createPrompt": "🚀 Get started! Create your first API service above!"
     },
     "admins": {
       "title": "Admins",
       "total": "Total Admins"
     },
     "apiKeys": {
       "title": "API Keys",
-      "total": "Your API Keys"
+      "total": "Your API Keys",
+      "createPrompt": "🔑 Secure your APIs! Generate an API key now!"
     },
     "roles": {
       "title": "Roles",
-      "total": "Your Roles"
+      "total": "Your Roles",
+      "createPrompt": "🔒 Control access! Set up your first role!"
     }
   }
 }
diff --git a/dist/index.html b/dist/index.html
@@ -9,5 +9,5 @@
   <body class="mat-typography">
     <df-root></df-root>
     <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
-  <script src="runtime.6c1d3ca2f59f96ab.js" type="module"></script><script src="polyfills.def0190516b19e6b.js" type="module"></script><script src="main.3a61f19611b057ae.js" type="module"></script></body>
+  <script src="runtime.39466d98a67656d9.js" type="module"></script><script src="polyfills.def0190516b19e6b.js" type="module"></script><script src="main.e75fec6e47178c34.js" type="module"></script></body>
 </html>
diff --git a/dist/main.3a61f19611b057ae.js b/dist/main.3a61f19611b057ae.js
diff --git a/dist/main.e75fec6e47178c34.js b/dist/main.e75fec6e47178c34.js
diff --git a/dist/runtime.6c1d3ca2f59f96ab.js → dist/runtime.39466d98a67656d9.js b/dist/runtime.6c1d3ca2f59f96ab.js → dist/runtime.39466d98a67656d9.js
diff --git a/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.html b/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.html
@@ -1,7 +1,10 @@
-<mat-card class="dashboard-card" 
+<mat-card
+  class="dashboard-card"
   [class]="'card-' + color"
   [class.zero-value]="isZero"
-  [class.shake-animation]="isZero">
+  [class.shake-animation]="isZero"
+  [class.clickable]="clickable"
+  (click)="onClick()">
   <mat-card-content>
     <div class="card-header">
       <div class="icon-container" [class]="'icon-' + color">

diff --git a/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss b/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss
@@ -10,6 +10,15 @@
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }
 
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
+    }
+  }
+
   .mat-card-content {
     padding: 20px;
   }
@@ -125,26 +134,23 @@
 
   span {
     position: relative;
-    
+
     &::after {
       content: '';
       position: absolute;
       bottom: -2px;
       left: 0;
       right: 0;
       height: 2px;
-      background: linear-gradient(90deg, 
-        transparent, 
-        #d32f2f, 
-        transparent
-      );
+      background: linear-gradient(90deg, transparent, #d32f2f, transparent);
       animation: underline-slide 2s infinite;
     }
   }
 }
 
 @keyframes urgent-pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.9;
     transform: scale(1);
   }
@@ -191,7 +197,8 @@
     left: -2px;
     right: -2px;
     bottom: -2px;
-    background: linear-gradient(90deg, 
+    background: linear-gradient(
+      90deg,
       transparent,
       rgba(255, 107, 107, 0.3),
       transparent
@@ -217,7 +224,8 @@
 }
 
 @keyframes glow-pulse {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow: 0 0 20px rgba(255, 107, 107, 0.2);
   }
   50% {
@@ -231,7 +239,9 @@
 }
 
 @keyframes subtle-shake {
-  0%, 90%, 100% {
+  0%,
+  90%,
+  100% {
     transform: translateX(0);
   }
   92% {
@@ -258,7 +268,8 @@
 }
 
 @keyframes attention-pulse {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
   }
   50% {
@@ -298,7 +309,8 @@
       border: 2px solid #ff6b6b;
 
       &::before {
-        background: linear-gradient(90deg, 
+        background: linear-gradient(
+          90deg,
           transparent,
           rgba(255, 107, 107, 0.2),
           transparent
@@ -314,13 +326,9 @@
   ::ng-deep [prompt] {
     color: #ff8a80;
     text-shadow: 0 0 10px rgba(255, 138, 128, 0.5);
-    
+
     span::after {
-      background: linear-gradient(90deg, 
-        transparent, 
-        #ff8a80, 
-        transparent
-      );
+      background: linear-gradient(90deg, transparent, #ff8a80, transparent);
     }
   }
 }
diff --git a/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.ts b/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -24,4 +24,12 @@ export class DfDashboardCardComponent {
   @Input() isZero?: boolean = false;
   @Input() color: 'primary' | 'accent' | 'success' | 'info' | 'warn' =
     'primary';
+  @Input() clickable?: boolean = false;
+  @Output() cardClick = new EventEmitter<void>();
+
+  onClick(): void {
+    if (this.clickable) {
+      this.cardClick.emit();
+    }
+  }
 }
diff --git a/src/app/adf-home/df-dashboard/df-dashboard.component.html b/src/app/adf-home/df-dashboard/df-dashboard.component.html
@@ -22,6 +22,8 @@ <h2 class="dashboard-title">{{ 'home.dashboard.title' | transloco }}</h2>
         [subtitle]="'home.dashboard.services.total' | transloco"
         [showPrompt]="stats.services.total === 0"
         [isZero]="stats.services.total === 0"
+        [clickable]="stats.services.total === 0"
+        (cardClick)="onServicesCardClick()"
         color="primary">
         <div prompt class="service-prompt" *ngIf="stats.services.total === 0">
           <span>{{ 'home.dashboard.services.createPrompt' | transloco }}</span>
@@ -36,6 +38,8 @@ <h2 class="dashboard-title">{{ 'home.dashboard.title' | transloco }}</h2>
         [subtitle]="'home.dashboard.apiKeys.total' | transloco"
         [showPrompt]="stats.apiKeys.total === 0"
         [isZero]="stats.apiKeys.total === 0"
+        [clickable]="stats.apiKeys.total === 0"
+        (cardClick)="onApiKeysCardClick()"
         color="success">
         <div prompt class="key-prompt" *ngIf="stats.apiKeys.total === 0">
           <span>{{ 'home.dashboard.apiKeys.createPrompt' | transloco }}</span>
@@ -50,6 +54,8 @@ <h2 class="dashboard-title">{{ 'home.dashboard.title' | transloco }}</h2>
         [subtitle]="'home.dashboard.roles.total' | transloco"
         [showPrompt]="stats.roles.total === 0"
         [isZero]="stats.roles.total === 0"
+        [clickable]="stats.roles.total === 0"
+        (cardClick)="onRolesCardClick()"
         color="info">
         <div prompt class="role-prompt" *ngIf="stats.roles.total === 0">
           <span>{{ 'home.dashboard.roles.createPrompt' | transloco }}</span>

diff --git a/src/app/adf-home/df-dashboard/df-dashboard.component.ts b/src/app/adf-home/df-dashboard/df-dashboard.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -53,7 +54,8 @@ export class DfDashboardComponent implements OnInit, OnDestroy {
   constructor(
     private analyticsService: DfAnalyticsService,
     public themeService: DfThemeService,
-    public breakpointService: DfBreakpointService
+    public breakpointService: DfBreakpointService,
+    private router: Router
   ) {}
 
   ngOnInit(): void {
@@ -95,4 +97,22 @@ export class DfDashboardComponent implements OnInit, OnDestroy {
         },
       });
   }
+
+  onServicesCardClick(): void {
+    if (this.stats.services.total === 0) {
+      this.router.navigate(['/api-connections/api-types/database/create']);
+    }
+  }
+
+  onApiKeysCardClick(): void {
+    if (this.stats.apiKeys.total === 0) {
+      this.router.navigate(['/api-connections/api-keys/create']);
+    }
+  }
+
+  onRolesCardClick(): void {
+    if (this.stats.roles.total === 0) {
+      this.router.navigate(['/api-connections/role-based-access/create']);
+    }
+  }
 }
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -366,6 +366,14 @@ <h4 class="text-center" style="color: black !important">
             </ng-container>
           </ng-container>
         </ng-container>
+        <!-- First-time user guidance message for database services -->
+        <div class="first-time-guidance" *ngIf="isFirstTimeUser && isDatabase && !subscriptionRequired">
+          <fa-icon [icon]="faCircleInfo" class="guidance-icon"></fa-icon>
+          <p class="guidance-text">
+            {{ 'services.firstTimeGuidance' | transloco }}
+          </p>
+        </div>
+
         <div class="full-width action-bar" *ngIf="!subscriptionRequired">
           <button
             class="cancel-btn"
@@ -375,15 +383,33 @@ <h4 class="text-center" style="color: black !important">
             {{ 'cancel' | transloco }}
           </button>
           <div class="button-group">
+            <!-- For first-time users creating database APIs, only show Security Config button as primary -->
+            <button
+              *ngIf="isFirstTimeUser && isDatabase"
+              mat-flat-button
+              class="save-btn"
+              color="primary"
+              type="button"
+              [disabled]="!serviceForm.valid"
+              (click)="goToSecurityConfig()">
+              {{ 'services.controls.nextSecurityConfig' | transloco }}
+            </button>
+
+            <!-- For experienced users or non-database services, show both buttons -->
             <button
+              *ngIf="!(isFirstTimeUser && isDatabase)"
               mat-flat-button
               class="save-btn secondary-btn"
               type="button"
               [disabled]="!serviceForm.valid"
               (click)="goToSecurityConfig()">
               {{ 'services.controls.securityConfig' | transloco }}
             </button>
-            <button class="save-btn" mat-flat-button color="primary">
+            <button 
+              *ngIf="!(isFirstTimeUser && isDatabase)"
+              class="save-btn" 
+              mat-flat-button 
+              color="primary">
               {{ 'services.controls.createAndTest' | transloco }}
             </button>
           </div>
@@ -396,6 +422,7 @@ <h4 class="text-center" style="color: black !important">
             [serviceName]="serviceForm.get('name')?.value"
             [serviceId]="currentServiceId"
             [isDatabase]="isDatabase"
+            [isFirstTimeUser]="isFirstTimeUser"
             (goBack)="goBack()">
           </df-security-config>
         </div>