From 82ed63dd641b5e81fc5488420b552168732b66cf Mon Sep 17 00:00:00 2001
From: Saurabh186 <sawrabhsharma1234@gmail.com>
Date: Wed, 1 Apr 2026 16:34:30 +0530
Subject: [PATCH] fix desigb issue

---
 .../app/dashboard/dashboard.component.html    | 150 ++++--------------
 .../app/dashboard/dashboard.component.scss    |  78 +++++++++
 .../src/app/dashboard/dashboard.component.ts  |   1 +
 .../src/app/layout/layout.component.html      |   2 +-
 .../src/app/logs/log/log.component.html       |   6 +-
 .../src/app/ngrx/effects/root/root.effect.ts  |  10 --
 6 files changed, 114 insertions(+), 133 deletions(-)

diff --git a/apps/36-blocks/src/app/dashboard/dashboard.component.html b/apps/36-blocks/src/app/dashboard/dashboard.component.html
index c3e1994e..cd3446a2 100644
--- a/apps/36-blocks/src/app/dashboard/dashboard.component.html
+++ b/apps/36-blocks/src/app/dashboard/dashboard.component.html
@@ -1,120 +1,32 @@
-<div
-    class="flex flex-col items-center justify-center flex-1 w-full min-h-[calc(100vh-64px)] h-screen px-4"
-    style="background-color: var(--mat-card-elevated-container-color, var(--mat-sys-surface-container-low))"
->
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 520 400"
-        class="w-full max-w-[480px]"
-        role="img"
-        aria-label="Coming Soon illustration"
-    >
-        <!-- Background blobs -->
-        <ellipse cx="260" cy="370" rx="200" ry="18" fill="var(--color-common-border)" opacity="0.5" />
-        <!-- Monitor -->
-        <rect
-            x="100"
-            y="60"
-            width="320"
-            height="210"
-            rx="18"
-            ry="18"
-            fill="var(--color-common-bg)"
-            stroke="var(--color-common-border)"
-            stroke-width="3"
-        />
-        <rect x="115" y="75" width="290" height="175" rx="8" ry="8" fill="var(--color-common-app-bg)" />
-        <!-- Monitor stand -->
-        <rect
-            x="225"
-            y="270"
-            width="70"
-            height="36"
-            rx="4"
-            ry="4"
-            fill="var(--color-common-bg)"
-            stroke="var(--color-common-border)"
-            stroke-width="2.5"
-        />
-        <rect x="185" y="302" width="150" height="14" rx="7" ry="7" fill="var(--color-common-border)" />
-        <!-- Screen glow lines (under construction pattern) -->
-        <rect x="150" y="108" width="220" height="12" rx="6" fill="var(--color-common-border)" opacity="0.6" />
-        <rect x="150" y="130" width="160" height="10" rx="5" fill="var(--color-common-border)" opacity="0.4" />
-        <rect x="150" y="150" width="190" height="10" rx="5" fill="var(--color-common-border)" opacity="0.4" />
-        <!-- Gear big -->
-        <g transform="translate(245,185)">
-            <circle cx="0" cy="0" r="32" fill="none" stroke="var(--color-dark-accent)" stroke-width="5" />
-            <circle cx="0" cy="0" r="12" fill="var(--color-dark-accent)" opacity="0.15" />
-            <circle cx="0" cy="0" r="12" fill="none" stroke="var(--color-dark-accent)" stroke-width="3.5" />
-            <g stroke="var(--color-dark-accent)" stroke-width="5" stroke-linecap="round">
-                <line x1="0" y1="-32" x2="0" y2="-42" />
-                <line x1="0" y1="32" x2="0" y2="42" />
-                <line x1="-32" y1="0" x2="-42" y2="0" />
-                <line x1="32" y1="0" x2="42" y2="0" />
-                <line x1="-22.6" y1="-22.6" x2="-29.7" y2="-29.7" />
-                <line x1="22.6" y1="22.6" x2="29.7" y2="29.7" />
-                <line x1="22.6" y1="-22.6" x2="29.7" y2="-29.7" />
-                <line x1="-22.6" y1="22.6" x2="-29.7" y2="29.7" />
-            </g>
-        </g>
-        <!-- Gear small -->
-        <g transform="translate(305,160)">
-            <circle
-                cx="0"
-                cy="0"
-                r="16"
-                fill="none"
-                stroke="var(--color-dark-accent)"
-                stroke-width="3.5"
-                opacity="0.6"
-            />
-            <circle
-                cx="0"
-                cy="0"
-                r="6"
-                fill="none"
-                stroke="var(--color-dark-accent)"
-                stroke-width="2.5"
-                opacity="0.6"
-            />
-            <g stroke="var(--color-dark-accent)" stroke-width="3.5" stroke-linecap="round" opacity="0.6">
-                <line x1="0" y1="-16" x2="0" y2="-21" />
-                <line x1="0" y1="16" x2="0" y2="21" />
-                <line x1="-16" y1="0" x2="-21" y2="0" />
-                <line x1="16" y1="0" x2="21" y2="0" />
-                <line x1="-11.3" y1="-11.3" x2="-14.8" y2="-14.8" />
-                <line x1="11.3" y1="11.3" x2="14.8" y2="14.8" />
-                <line x1="11.3" y1="-11.3" x2="14.8" y2="-14.8" />
-                <line x1="-11.3" y1="11.3" x2="-14.8" y2="14.8" />
-            </g>
-        </g>
-        <!-- Wrench -->
-        <g transform="translate(185,178) rotate(-35)">
-            <rect x="-5" y="-30" width="10" height="52" rx="4" fill="var(--color-dark-accent)" opacity="0.7" />
-            <rect x="-12" y="-40" width="24" height="14" rx="7" fill="var(--color-dark-accent)" opacity="0.7" />
-            <rect x="-12" y="18" width="24" height="14" rx="7" fill="var(--color-dark-accent)" opacity="0.7" />
-        </g>
-        <!-- Text label -->
-        <text
-            x="260"
-            y="342"
-            text-anchor="middle"
-            font-family="inherit"
-            font-size="22"
-            font-weight="700"
-            fill="var(--mat-sys-on-surface)"
-        >
-            Coming Soon
-        </text>
-        <text
-            x="260"
-            y="366"
-            text-anchor="middle"
-            font-family="inherit"
-            font-size="13"
-            fill="var(--color-common-secondary-text)"
-        >
-            Dashboard is under construction
-        </text>
-    </svg>
+<div class="coming-soon-container flex flex-1 w-full items-center justify-center min-h-[calc(100vh-64px)] p-10">
+    <div class="coming-soon-content text-center max-w-[600px]">
+        <div class="icon-wrapper inline-flex items-center justify-center w-[120px] h-[120px] rounded-full mb-8">
+            <mat-icon class="coming-soon-icon">rocket_launch</mat-icon>
+        </div>
+        <h1 class="coming-soon-title text-5xl font-bold tracking-tight mb-4">Coming Soon</h1>
+        <p class="coming-soon-subtitle text-xl font-medium mb-3">We're working hard to bring you something amazing.</p>
+        <p class="coming-soon-description text-base leading-relaxed mb-10">
+            Our dashboard is under construction. Stay tuned for powerful analytics and insights.
+        </p>
+        <div class="coming-soon-features flex justify-center gap-8 flex-wrap">
+            <div
+                class="feature-item flex flex-col items-center gap-2 px-6 py-5 rounded-xl border transition-all duration-300 cursor-default"
+            >
+                <mat-icon class="feature-icon">analytics</mat-icon>
+                <span class="text-sm font-medium">Analytics</span>
+            </div>
+            <div
+                class="feature-item flex flex-col items-center gap-2 px-6 py-5 rounded-xl border transition-all duration-300 cursor-default"
+            >
+                <mat-icon class="feature-icon">insights</mat-icon>
+                <span class="text-sm font-medium">Insights</span>
+            </div>
+            <div
+                class="feature-item flex flex-col items-center gap-2 px-6 py-5 rounded-xl border transition-all duration-300 cursor-default"
+            >
+                <mat-icon class="feature-icon">trending_up</mat-icon>
+                <span class="text-sm font-medium">Reports</span>
+            </div>
+        </div>
+    </div>
 </div>
diff --git a/apps/36-blocks/src/app/dashboard/dashboard.component.scss b/apps/36-blocks/src/app/dashboard/dashboard.component.scss
index e69de29b..08e76427 100644
--- a/apps/36-blocks/src/app/dashboard/dashboard.component.scss
+++ b/apps/36-blocks/src/app/dashboard/dashboard.component.scss
@@ -0,0 +1,78 @@
+:host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.coming-soon-content {
+    animation: fadeInUp 0.8s ease-out;
+}
+
+.icon-wrapper {
+    background: linear-gradient(135deg, var(--color-dark-accent) 0%, #15b8a0 100%);
+    animation: pulse 2s infinite;
+}
+
+.coming-soon-icon {
+    font-size: 56px !important;
+    width: 56px !important;
+    height: 56px !important;
+    color: var(--color-common-white);
+}
+
+.coming-soon-title {
+    color: var(--color-common-text);
+}
+
+.coming-soon-subtitle {
+    color: var(--color-dark-accent);
+}
+
+.coming-soon-description {
+    color: var(--color-common-placeholder);
+}
+
+.feature-item {
+    background: var(--color-common-bg);
+    border-color: var(--color-common-border);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+        background: var(--color-dark-accent-light);
+        border-color: var(--color-dark-accent);
+        transform: translateY(-4px);
+        box-shadow: 0 10px 20px -5px rgba(25, 230, 206, 0.2);
+    }
+
+    .feature-icon {
+        font-size: 32px !important;
+        width: 32px !important;
+        height: 32px !important;
+        color: var(--color-dark-accent);
+    }
+
+    span {
+        color: var(--color-common-text);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(25, 230, 206, 0.4);
+    }
+    50% {
+        box-shadow: 0 0 0 20px rgba(25, 230, 206, 0);
+    }
+}
diff --git a/apps/36-blocks/src/app/dashboard/dashboard.component.ts b/apps/36-blocks/src/app/dashboard/dashboard.component.ts
index 3461c85c..7bd41d24 100644
--- a/apps/36-blocks/src/app/dashboard/dashboard.component.ts
+++ b/apps/36-blocks/src/app/dashboard/dashboard.component.ts
@@ -8,5 +8,6 @@ import { BaseComponent } from '@proxy/ui/base-component';
     selector: 'proxy-dashboard',
     imports: [RouterModule, MatIconModule],
     templateUrl: './dashboard.component.html',
+    styleUrl: './dashboard.component.scss',
 })
 export class DashboardComponent extends BaseComponent {}
diff --git a/apps/36-blocks/src/app/layout/layout.component.html b/apps/36-blocks/src/app/layout/layout.component.html
index abca4e2b..ecdadc0f 100644
--- a/apps/36-blocks/src/app/layout/layout.component.html
+++ b/apps/36-blocks/src/app/layout/layout.component.html
@@ -118,7 +118,7 @@ <h4 class="m-0 py-2 px-6 text-dark font-medium">{{ user.displayName }}</h4>
         </div>
         }
     </div>
-    <div class="flex-1 flex flex-col app-content">
+    <div class="flex-1 flex flex-col" [class.app-content]="!showContainer">
         <!-- Content::START -->
         <router-outlet></router-outlet>
         <div id="ChatbotContainer" class="h-screen w-full"></div>
diff --git a/apps/36-blocks/src/app/logs/log/log.component.html b/apps/36-blocks/src/app/logs/log/log.component.html
index 4e147665..37e837a1 100644
--- a/apps/36-blocks/src/app/logs/log/log.component.html
+++ b/apps/36-blocks/src/app/logs/log/log.component.html
@@ -3,7 +3,7 @@
     <proxy-loader></proxy-loader>
     }
     <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
-        <form [formGroup]="engProjectFormGroup" class="flex flex-wrap items-center grow gap-4">
+        <form [formGroup]="engProjectFormGroup" class="flex flex-wrap items-start grow gap-4">
             <mat-form-field appearance="outline" class="no-padding w-xs-100">
                 <mat-label>Select Project</mat-label>
                 <input
@@ -66,11 +66,11 @@
                 <mat-icon matSuffix>arrow_drop_down</mat-icon>
             </mat-form-field>
             <proxy-lib-search
-                [matFormFieldClass]="'no-padding w-xs-100'"
+                [matFormFieldClass]="'w-xs-100 w-100'"
                 [placeholder]="'Hit Enter to Search'"
                 (inputChanges)="onEnter($event)"
                 [emitOnEnter]="true"
-                hint="To search in specific field use <b>field:</b> before anything (field => endpoint,request_body,response,headers)"
+                hint="Use field: to search specific fields (endpoint, request_body, response, headers)."
             ></proxy-lib-search>
         </form>
         <div class="flex items-center gap-4 ml-auto flex-wrap">
diff --git a/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts b/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts
index 66f19c7e..46b2c325 100755
--- a/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts
+++ b/apps/36-blocks/src/app/ngrx/effects/root/root.effect.ts
@@ -41,16 +41,6 @@ export class RootEffects {
                             this.showError(res.errors);
                             return rootActions.getAllClientsError();
                         }
-                        console.log(res.data?.data);
-                        const data = [
-                            ...(res.data?.data || []),
-                            ...(res.data?.data || []),
-                            ...(res.data?.data || []),
-                            ...(res.data?.data || []),
-                            ...(res.data?.data || []),
-                            ...(res.data?.data || []),
-                        ];
-                        res.data['data'] = data.map((i, indx) => ({ ...i, id: i.id + indx }));
                         return rootActions.getAllClientsSuccess({ response: res.data });
                     }),
                     catchError((err) => {