Update main.module.ts

frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts

@@ -4,6 +4,5 @@ export class ReportBuilder {
 public description: string;
 public report_tags: string;
 public servicename:string;
-  // Add SureConnect reference
+
-  public sureConnectId: number | null;
 }

frontend/angular-clarity-master/src/app/models/builder/dashboard.ts

@@ -23,39 +23,6 @@ export interface DashboardContentModel {
   component?: any;
   name: string;
   type?:string;
-  // Chart properties
-  xAxis?: string;
-  yAxis?: string | string[];
-  chartType?: string;
-  charttitle?: string;
-  chartlegend?: boolean;
-  showlabel?: boolean;
-  chartcolor?: boolean;
-  slices?: boolean;
-  donut?: boolean;
-  charturl?: string;
-  chartparameter?: string;
-  datastore?: string;
-  table?: string;
-  datasource?: string;
-  fieldName?: string;
-  connection?: string;
-  baseFilters?: any[];
-  // Common filter properties
-  commonFilterEnabled?: boolean;
-  // Drilldown properties
-  drilldownEnabled?: boolean;
-  drilldownApiUrl?: string;
-  drilldownXAxis?: string;
-  drilldownYAxis?: string;
-  drilldownParameter?: string;
-  drilldownFilters?: any[];
-  drilldownLayers?: any[];
-  // Compact filter properties
-  filterKey?: string;
-  filterType?: string;
-  filterLabel?: string;
-  filterOptions?: string[];
 }
 
 export interface DashboardModel {
@@ -100,10 +67,6 @@ export class value1{
 
 
 export const WidgetsMock: WidgetModel[] = [
-  {
-      name: 'Common Filter',
-      identifier: 'common_filter'
-  },
   {
       name: 'Radar Chart',
       identifier: 'radar_chart'

frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html

@@ -1,155 +1,39 @@
-<!-- Modern AI-Inspired Login Page -->
+<!-- <router-outlet></router-outlet> -->
-<div class="modern-login-container" *ngIf="showLogin2">
-  <!-- Background Elements -->
-  <div class="login-background">
-    <div class="gradient-overlay"></div>
-    <div class="floating-shapes">
-      <div class="shape shape-1"></div>
-      <div class="shape shape-2"></div>
-      <div class="shape shape-3"></div>
-      <div class="shape shape-4"></div>
-    </div>
-  </div>
 
-  <!-- Main Login Content -->
+<!-- <div class="login-wrapper" *ngIf="showLogin2 && loginEnvironment.templateNo == 'Template 1'" [style.backgroundImage]="'url(' + loginEnvironment.imagePath + ')'">
-  <div class="login-content">
+    <form class="login">
-    <!-- Left Side - Branding -->
+      <section class="title">
-    <div class="login-branding">
+        <h3 class="welcome">Welcome to</h3>
-      <div class="brand-content">
-        <div class="logo-section">
-          <div class="logo-container">
-            <img class="logo-img" src="assets/images/icon/micrologo.png" alt="CloudnSure Logo">
-            <div class="logo-glow"></div>
-          </div>
-          <h1 class="brand-title">
-            <ng-container *ngIf="loginEnvironment?.companyName; else defaultTitle">
         {{ loginEnvironment.companyName }}
-            </ng-container>
+        <h5 class="hint">Use your  ID to sign in OR  <a [routerLink]="['/email-verification']" class="signup">create one now </a> </h5>
-            <ng-template #defaultTitle>
+      </section>
-              CloudnSure
+      <div class="login-group">
-            </ng-template>
+        <clr-input-container>
-          </h1>
+          <label class="clr-sr-only">Username</label>
-          <p class="brand-subtitle">Enterprise Platform</p>
+          <input type="text" name="username" clrInput autocomplete="off" [(ngModel)]="model.email"
+          placeholder="Username (sysadmin)"/>
+      </clr-input-container>
+      <clr-password-container>
+          <label class="clr-sr-only">Password</label>
+          <input type="password" name="password" clrPassword id="login_password" autocomplete="off" [(ngModel)]="model.password"
+          placeholder="Password (test3)"/>
+      </clr-password-container>
+        <clr-checkbox-wrapper>
+          <input clrCheckbox type="checkbox" id="rememberme">
+          <label for="rememberme"> Remember me </label>
+        </clr-checkbox-wrapper>
+  
+        <div class="error active" *ngIf="isError">
+          Invalid user name or password
         </div>
         
-        <div class="brand-features">
+        <button  [disabled]="!model.email || !model.password" type="submit" class="btn btn-primary"
-          <div class="feature-item">
+          (click)="onLogin()">Login</button>
-            <clr-icon shape="shield" class="feature-icon"></clr-icon>
+        <a (click)="goforgotpass()" class="signup">{{ loginEnvironment.forgotpassword }}</a>
-            <span>Secure & Reliable</span>
-          </div>
-          <div class="feature-item">
-            <clr-icon shape="analytics" class="feature-icon"></clr-icon>
-            <span>Advanced Analytics</span>
-          </div>
-          <div class="feature-item">
-            <clr-icon shape="cog" class="feature-icon"></clr-icon>
-            <span>Customizable</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Right Side - Login Form -->
-    <div class="login-form-section">
-      <div class="form-container">
-        <div class="form-header">
-          <h2 class="form-title">Welcome Back</h2>
-          <p class="form-subtitle">Sign in to your account to continue</p>
-        </div>
-
-        <form class="modern-login-form" (ngSubmit)="onLogin()">
-          <!-- Username Field -->
-          <div class="form-group">
-            <label class="form-label">Username</label>
-            <div class="input-container">
-              <clr-icon shape="user" class="input-icon"></clr-icon>
-              <input type="text" name="username" class="modern-input" autocomplete="username" [(ngModel)]="model.email"
-                (input)="clearError()" placeholder="Enter your username" required>
-            </div>
-          </div>
-
-          <!-- Password Field -->
-          <div class="form-group">
-            <label class="form-label">Password</label>
-            <div class="input-container">
-              <clr-icon shape="lock" class="input-icon"></clr-icon>
-              <input [type]="showPassword ? 'text' : 'password'" name="password" class="modern-input"
-                autocomplete="current-password" [(ngModel)]="model.password" (input)="clearError()"
-                placeholder="Enter your password" required>
-              <button type="button" class="password-toggle" (click)="togglePasswordVisibility()"
-                [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
-                <span class="toggle-text">{{ showPassword ? 'Hide' : 'Show' }}</span>
-              </button>
-            </div>
-          </div>
-
-          <!-- Remember Me & Forgot Password -->
-          <div class="form-options">
-            <label class="checkbox-container">
-              <input type="checkbox" id="rememberme" class="modern-checkbox">
-              <span class="checkmark"></span>
-              <span class="checkbox-label">Remember me</span>
-            </label>
-            <a href="javascript://" class="forgot-link" (click)="goforgotpass()">
-              Forgot password?
-            </a>
-          </div>
-
-          <!-- Error Message -->
-          <div class="error-message" *ngIf="isError">
-            <clr-icon shape="exclamation-triangle"></clr-icon>
-            <span>{{ errMsg || 'Invalid username or password' }}</span>
-          </div>
-
-          <!-- Login Button -->
-          <button type="submit" class="modern-login-btn" [disabled]="isLoading" [class.loading]="isLoading">
-            <span class="btn-content" *ngIf="!isLoading">
-              <clr-icon shape="login"></clr-icon>
-              Sign In
-            </span>
-            <span class="btn-loading" *ngIf="isLoading">
-              <div class="spinner"></div>
-              Signing In...
-            </span>
-          </button>
-
-          <!-- Sign Up Link -->
-          <div class="signup-section" *ngIf="loginEnvironment?.isSignup === 'true'">
-            <p class="signup-text">
-              Don't have an account?
-              <a [routerLink]="['/email-verification']" class="signup-link">
-                Create one now
-              </a>
-            </p>
       </div>
     </form>
+  </div> -->
 
-        <!-- Social Login (Optional) -->
-        <div class="social-login">
-          <div class="divider">
-            <span>Or continue with</span>
-          </div>
-          <div class="social-buttons">
-            <button class="social-btn google-btn" type="button">
-              <clr-icon shape="world"></clr-icon>
-              <span>Google</span>
-            </button>
-            <button class="social-btn microsoft-btn" type="button">
-              <clr-icon shape="world"></clr-icon>
-              <span>Microsoft</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-
-
-
-<!-- 
   <div [class]="getWrapperClass()" *ngIf="showLogin2 && loginEnvironment.templateNo == '<templateNo>'" [style.backgroundImage]="'url(' + ('../../../../assets/images/new.png') + ')'">
     <form class="login">
       <section class="title">
@@ -224,7 +108,7 @@
 
   
 
-
+  <!-- <div class="login-wrapper"> -->
     <div [class]="getWrapperClass()" *ngIf="showLogin2 && loginEnvironment.templateNo == 'Template 2'" [style.backgroundImage]="'url(' + (loginEnvironment.loginImageURL !== 'null' || null ? loginEnvironment.loginImageURL : '../../../../assets/images/new.png') + ')'">
         <form class="login">
           <section class="title">
@@ -259,4 +143,4 @@
           </div>
         </form>
     </div>
-       -->
+      

frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss

@@ -1,633 +1,3 @@
-// ========================================
-// MODERN AI-INSPIRED LOGIN PAGE STYLES
-// ========================================
-
-@import '../../../../styles/design-tokens';
-
-// Modern Login Container
-.modern-login-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(135deg, $primary-50 0%, $primary-100 50%, $secondary-50 100%);
-}
-
-// Background Elements
-.login-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  overflow: hidden;
-
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(135deg, 
-      rgba($primary-600, 0.1) 0%, 
-      rgba($primary-400, 0.05) 50%, 
-      rgba($accent-purple, 0.1) 100%);
-  }
-
-  .floating-shapes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .shape {
-      position: absolute;
-      border-radius: 50%;
-      background: linear-gradient(45deg, rgba($primary-400, 0.1), rgba($accent-purple, 0.1));
-      animation: float 6s ease-in-out infinite;
-
-      &.shape-1 {
-        width: 200px;
-        height: 200px;
-        top: 10%;
-        left: 10%;
-        animation-delay: 0s;
-      }
-
-      &.shape-2 {
-        width: 150px;
-        height: 150px;
-        top: 60%;
-        right: 15%;
-        animation-delay: 2s;
-      }
-
-      &.shape-3 {
-        width: 100px;
-        height: 100px;
-        bottom: 20%;
-        left: 20%;
-        animation-delay: 4s;
-      }
-
-      &.shape-4 {
-        width: 80px;
-        height: 80px;
-        top: 30%;
-        right: 30%;
-        animation-delay: 1s;
-      }
-    }
-  }
-}
-
-// Main Content
-.login-content {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-  padding: $space-8;
-  gap: $space-12;
-  align-items: center;
-}
-
-// Left Side - Branding
-.login-branding {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: $space-8;
-
-  .brand-content {
-    text-align: center;
-    max-width: 400px;
-  }
-
-  .logo-section {
-    margin-bottom: $space-8;
-
-    .logo-container {
-      position: relative;
-      display: inline-block;
-      margin-bottom: $space-6;
-
-      .logo-img {
-        width: 80px;
-        height: 80px;
-        object-fit: contain;
-        filter: drop-shadow(0 8px 16px rgba($primary-600, 0.3));
-        transition: transform $duration-300 $ease-out;
-      }
-
-      .logo-glow {
-        position: absolute;
-        top: -10px;
-        left: -10px;
-        right: -10px;
-        bottom: -10px;
-        background: linear-gradient(45deg, $primary-400, $accent-purple);
-        border-radius: 50%;
-        opacity: 0;
-        filter: blur(20px);
-        transition: opacity $duration-300 $ease-out;
-      }
-
-      &:hover {
-        .logo-img {
-          transform: scale(1.1);
-        }
-
-        .logo-glow {
-          opacity: 0.3;
-        }
-      }
-    }
-
-    .brand-title {
-      font-size: $text-4xl;
-      font-weight: $font-bold;
-      color: $gray-900;
-      margin-bottom: $space-2;
-      background: linear-gradient(135deg, $primary-600, $accent-purple);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-
-    .brand-subtitle {
-      font-size: $text-lg;
-      color: $gray-600;
-      font-weight: $font-medium;
-    }
-  }
-
-  .brand-features {
-    display: flex;
-    flex-direction: column;
-    gap: $space-4;
-
-    .feature-item {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-      padding: $space-3;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: $radius-lg;
-      backdrop-filter: $backdrop-blur-sm;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      transition: all $duration-200 $ease-out;
-
-      &:hover {
-        transform: translateX(8px);
-        background: rgba(255, 255, 255, 0.9);
-        box-shadow: $shadow-md;
-      }
-
-      .feature-icon {
-        color: $primary-600;
-        font-size: $text-lg;
-      }
-
-      span {
-        font-size: $text-sm;
-        font-weight: $font-medium;
-        color: $gray-700;
-      }
-    }
-  }
-}
-
-// Right Side - Login Form
-.login-form-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: $space-8;
-
-  .form-container {
-    width: 100%;
-    max-width: 400px;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: $backdrop-blur-md;
-    border-radius: $radius-2xl;
-    padding: $space-8;
-    box-shadow: $shadow-xl;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-
-  .form-header {
-    text-align: center;
-    margin-bottom: $space-8;
-
-    .form-title {
-      font-size: $text-2xl;
-      font-weight: $font-bold;
-      color: $gray-900;
-      margin-bottom: $space-2;
-    }
-
-    .form-subtitle {
-      font-size: $text-sm;
-      color: $gray-600;
-    }
-  }
-
-  .modern-login-form {
-    .form-group {
-      margin-bottom: $space-6;
-
-      .form-label {
-        display: block;
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-        color: $gray-700;
-        margin-bottom: $space-2;
-      }
-
-        .input-container {
-          position: relative;
-          display: flex;
-          align-items: center;
-
-          .input-icon {
-            position: absolute;
-            left: $space-3;
-            color: $gray-400;
-            font-size: $text-base;
-            z-index: 2;
-          }
-
-          .modern-input {
-            width: 100%;
-            padding: $space-3 $space-3 $space-3 $space-10;
-            border: 2px solid $gray-200;
-            border-radius: $radius-lg;
-            font-size: $text-sm;
-            font-weight: $font-medium;
-            color: $gray-900;
-            background: $white;
-            transition: all $duration-200 $ease-out;
-
-            &::placeholder {
-              color: $gray-400;
-            }
-
-            &:focus {
-              outline: none;
-              border-color: $primary-500;
-              box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
-            }
-
-            &:hover {
-              border-color: $gray-300;
-            }
-          }
-
-          // Password field with toggle button
-          &:has(.password-toggle) .modern-input {
-            padding-right: $space-10;
-          }
-
-          .password-toggle {
-            position: absolute;
-            right: $space-3;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: $gray-400;
-            cursor: pointer;
-            padding: $space-1;
-            border-radius: $radius-sm;
-            transition: all $duration-200 $ease-out;
-            z-index: 2;
-
-            &:hover {
-              color: $gray-600;
-              background: rgba($gray-100, 0.5);
-            }
-
-            &:focus {
-              outline: none;
-              color: $primary-600;
-              background: rgba($primary-50, 0.5);
-            }
-
-            clr-icon {
-              font-size: $text-base;
-            }
-
-            .toggle-text {
-              font-size: $text-xs;
-              font-weight: $font-semibold;
-              color: inherit;
-              text-transform: uppercase;
-              letter-spacing: 0.05em;
-            }
-          }
-        }
-    }
-
-    .form-options {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: $space-6;
-
-      .checkbox-container {
-        display: flex;
-        align-items: center;
-        gap: $space-2;
-        cursor: pointer;
-
-        .modern-checkbox {
-          width: 18px;
-          height: 18px;
-          accent-color: $primary-600;
-        }
-
-        .checkbox-label {
-          font-size: $text-sm;
-          color: $gray-600;
-          font-weight: $font-medium;
-        }
-      }
-
-      .forgot-link {
-        font-size: $text-sm;
-        color: $primary-600;
-        text-decoration: none;
-        font-weight: $font-medium;
-        transition: color $duration-200 $ease-out;
-
-        &:hover {
-          color: $primary-700;
-        }
-      }
-    }
-
-    .error-message {
-      display: flex;
-      align-items: center;
-      gap: $space-2;
-      padding: $space-3;
-      background: rgba($accent-red, 0.1);
-      border: 1px solid rgba($accent-red, 0.2);
-      border-radius: $radius-lg;
-      margin-bottom: $space-6;
-      color: $accent-red;
-      font-size: $text-sm;
-      font-weight: $font-medium;
-
-      clr-icon {
-        font-size: $text-base;
-      }
-    }
-
-    .modern-login-btn {
-      width: 100%;
-      padding: $space-4;
-      background: linear-gradient(135deg, $primary-600, $primary-700);
-      color: $white;
-      border: none;
-      border-radius: $radius-lg;
-      font-size: $text-base;
-      font-weight: $font-semibold;
-      cursor: pointer;
-      transition: all $duration-200 $ease-out;
-      position: relative;
-      overflow: hidden;
-
-      &:hover:not(:disabled) {
-        transform: translateY(-2px);
-        box-shadow: $shadow-lg;
-        background: linear-gradient(135deg, $primary-700, $primary-800);
-      }
-
-      &:active {
-        transform: translateY(0);
-      }
-
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        transform: none;
-      }
-
-      &.loading {
-        .btn-content {
-          opacity: 0;
-        }
-
-        .btn-loading {
-          opacity: 1;
-        }
-      }
-
-      .btn-content {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: $space-2;
-        transition: opacity $duration-200 $ease-out;
-      }
-
-      .btn-loading {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: flex;
-        align-items: center;
-        gap: $space-2;
-        opacity: 0;
-        transition: opacity $duration-200 $ease-out;
-
-        .spinner {
-          width: 16px;
-          height: 16px;
-          border: 2px solid rgba(255, 255, 255, 0.3);
-          border-top: 2px solid $white;
-          border-radius: 50%;
-          animation: spin 1s linear infinite;
-        }
-      }
-    }
-
-    .signup-section {
-      text-align: center;
-      margin-top: $space-6;
-
-      .signup-text {
-        font-size: $text-sm;
-        color: $gray-600;
-
-        .signup-link {
-          color: $primary-600;
-          text-decoration: none;
-          font-weight: $font-semibold;
-          transition: color $duration-200 $ease-out;
-
-          &:hover {
-            color: $primary-700;
-          }
-        }
-      }
-    }
-  }
-
-  .social-login {
-    margin-top: $space-8;
-
-    .divider {
-      position: relative;
-      text-align: center;
-      margin-bottom: $space-6;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: $gray-200;
-      }
-
-      span {
-        background: rgba(255, 255, 255, 0.95);
-        padding: 0 $space-4;
-        font-size: $text-xs;
-        color: $gray-500;
-        font-weight: $font-medium;
-      }
-    }
-
-    .social-buttons {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: $space-3;
-
-      .social-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: $space-2;
-        padding: $space-3;
-        border: 2px solid $gray-200;
-        border-radius: $radius-lg;
-        background: $white;
-        color: $gray-700;
-        font-size: $text-sm;
-        font-weight: $font-medium;
-        cursor: pointer;
-        transition: all $duration-200 $ease-out;
-
-        &:hover {
-          border-color: $gray-300;
-          transform: translateY(-1px);
-          box-shadow: $shadow-md;
-        }
-
-        &.google-btn:hover {
-          border-color: #db4437;
-          color: #db4437;
-        }
-
-        &.microsoft-btn:hover {
-          border-color: #0078d4;
-          color: #0078d4;
-        }
-
-        clr-icon {
-          font-size: $text-base;
-        }
-      }
-    }
-  }
-}
-
-// Animations
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(-20px) rotate(180deg);
-  }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-// Responsive Design
-@media (max-width: $breakpoint-lg) {
-  .login-content {
-    grid-template-columns: 1fr;
-    gap: $space-8;
-    padding: $space-6;
-  }
-
-  .login-branding {
-    order: 2;
-    padding: $space-4;
-
-    .brand-content {
-      max-width: 100%;
-    }
-
-    .logo-section .brand-title {
-      font-size: $text-3xl;
-    }
-
-    .brand-features {
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-  }
-
-  .login-form-section {
-    order: 1;
-    padding: $space-4;
-
-    .form-container {
-      padding: $space-6;
-    }
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .modern-login-container {
-    padding: $space-4;
-  }
-
-  .login-content {
-    padding: $space-4;
-  }
-
-  .login-branding {
-    .brand-features {
-      flex-direction: column;
-    }
-  }
-
-  .login-form-section .form-container {
-    padding: $space-4;
-  }
-}
-
-// Legacy styles (preserved for compatibility)
   .tamplate1 {
     background-image: url(../../../../assets/images/new.png);
     background-repeat: no-repeat;
@@ -646,8 +16,8 @@
     align-items: center;
     border: 1px solid #000;
   }
-
   .signup {
     cursor: pointer;
+    // color:#80b0ff;
   }
   

frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts

@@ -41,8 +41,6 @@ export class LoginPageComponent implements OnInit {
   email = '';
   password = '';
   isError = false;
-  isLoading = false;
-  showPassword = false;
 
   model: any = {};
   errMsg: string = '';
@@ -73,82 +71,32 @@ export class LoginPageComponent implements OnInit {
   }
 
   onLogin() {
-    console.log('onLogin called');
-    console.log('Form data:', { email: this.model.email, password: this.model.password });
-    
-    // Reset error state
-    this.isError = false;
-    this.errMsg = '';
-    
-    // Validate inputs
-    if (!this.model.email || !this.model.password) {
-      this.isError = true;
-      this.errMsg = 'Please enter both email and password';
-      console.log('Validation failed - missing email or password');
-      return;
-    }
-
-    // Set loading state
-    this.isLoading = true;
-    console.log('Loading state set to true, making API call...');
-
     // tslint:disable-next-line:max-line-length
     this.loginService.getToken(this.model.email, this.model.password)
-      .subscribe(
+      .subscribe(resp => {
-        resp => {
-          console.log('API Response received:', resp);
-          // Always reset loading state when response is received
-          this.isLoading = false;
-          
-          // Handle different response formats
-          if (resp.operationStatus === 'ERROR') {
-            this.isError = true;
-            this.errMsg = resp.operationMessage || 'Login failed';
-            return;
-          }
-          // Handle different response formats
-          if (resp.success === 'false' || resp.success === false) {
-            this.isError = true;
-            this.errMsg = resp.message || 'Login failed';
-            return;
-          }
         if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") {
-            this.isError = true;
+          this.errMsg = 'Checking Email or password';
-            this.errMsg = 'Invalid email or password';
           return;
         }
-          
+        this.router.navigate([resp.landingPage]);// add , {skipLocationChange: true}
-          // Success - navigate to landing page
-          console.log('Login successful, navigating to:', resp.landingPage);
-          this.router.navigate([resp.landingPage]);
       },
         (errResponse: HttpErrorResponse) => {
-          console.log('API Error received:', errResponse);
-          // Always reset loading state when error occurs
-          this.isLoading = false;
-          this.isError = true;
-          
           switch (errResponse.status) {
             case 401:
               this.errMsg = 'Email or password is incorrect';
               break;
             case 404:
               this.errMsg = 'Service not found';
-              break;
             case 408:
-              this.errMsg = 'Request timeout';
+              this.errMsg = 'Request Timedout';
-              break;
             case 500:
-              this.errMsg = 'Internal server error';
+              this.errMsg = 'Internal Server Error';
-              break;
-            case 0:
-              this.errMsg = 'Network error - please check your connection';
-              break;
             default:
-              this.errMsg = 'An error occurred. Please try again.';
+              this.errMsg = 'Server Error';
           }
         }
       );
+
   }
   goaccount(){
   }
@@ -156,17 +104,5 @@ export class LoginPageComponent implements OnInit {
     this.router.navigate(["../forgotpass"], { relativeTo: this.route });
   }
 
-  // Clear error when user starts typing
-  clearError() {
-    if (this.isError) {
-      this.isError = false;
-      this.errMsg = '';
-    }
-  }
-
-  // Toggle password visibility
-  togglePasswordVisibility() {
-    this.showPassword = !this.showPassword;
-  }
 
 }

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts

@@ -12,6 +12,12 @@
 
 
 
+
+
+
+
+
+
 
 
 
@@ -234,8 +240,7 @@ export class Stepper_workflowComponent implements OnInit {
 
   rsModaldescription = false;
   goToReplaceStringdescription(row) {
-    this.rowSelected = row;
+    this.rowSelected = row; this.rsModaldescription = true;
-     this.rsModaldescription = true;
   }
 
 
@@ -248,39 +253,6 @@ export class Stepper_workflowComponent implements OnInit {
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this.router.navigate(["../demostepper/", id], { relativeTo: this.route });
-
-
-
-
   }
 
   // updateaction

frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html

@@ -1,465 +1,279 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{'SECURITY' | translate}}</a></li>
   <li><a href="javascript://">{{ 'MENU_ACCESS_CONTROL' | translate }}</a></li>
 </ol>
 
-<section class="mac-hero">
+<div class="clr-row">
-  <div class="mac-hero__content">
+  <div class="clr-col-6" style="display:flex ;">
-    <div class="mac-hero__icon">
+    <div style="margin-right: 25px;">
-      <clr-icon shape="shield-check"></clr-icon>
+      <h4 style="font-weight:300;">{{ 'MENU_ACCESS_CONTROL' | translate }} </h4>
     </div>
-    <div>
+    <div style="margin-top:27px ; position: relative;">
-      <h2 class="mac-hero__title">{{'MENU_ACCESS_CONTROL' | translate}}</h2>
+      <span class="label label-light-blue" style="display: inline;">{{ 'EDIT_MODE' | translate }}</span>
-      <p class="mac-hero__subtitle">{{'SECURITY' | translate}}</p>
     </div>
   </div>
-  <div class="mac-hero__actions">
+  <div class="clr-col-6" style="text-align: right;">
-    <span class="mac-chip">{{'EDIT_MODE' | translate}}</span>
+    {{ 'FOR' | translate }} <select id="" style="height: 30px;" (change)="idofselected($event.target.value)">
-    <div class="mac-sep"></div>
-    <label class="mac-label">{{'FOR' | translate}}</label>
-    <select class="mac-select" (change)="idofselected($event.target.value)">
       <option *ngFor="let sub of givendata" [value]="sub.usrGrp" [selected]="sub.usrGrp== 40">{{sub.groupName}}</option>
     </select>
-    <button id="add" class="mac-btn mac-btn-primary" (click)="getbyuseriddata()">
+    <button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="getbyuseriddata()"> {{ 'RELOAD' |
-      <clr-icon shape="refresh"></clr-icon>
+      translate }} </button>
-      <span class="mac-btn-text">{{'RELOAD' | translate}}</span>
+    <span *ngIf="!toggle">{{ 'SHOW_ALL' | translate }} </span><span *ngIf="toggle">{{ 'ONLY_MAIN_MENU' | translate
-    </button>
+      }}</span>
-    <div class="mac-toggle">
-      <span class="mac-toggle__label" *ngIf="!toggle">{{'SHOW_ALL' | translate}}</span>
-      <span class="mac-toggle__label" *ngIf="toggle">{{'ONLY_MAIN_MENU' | translate}}</span>
     <label class="switch">
       <input type="checkbox" ([ngModel])="toggle" checked (click)="toggleCheckbox()">
       <span class="slider round"></span>
     </label>
   </div>
 </div>
-</section>
+<hr>
 
-<div class="mac-container">
+<div class="dg-wrapper">
   <div class="clr-row">
-    <div class="clr-col-12 mac-actions">
+
-      <button id="add" class="mac-btn mac-btn-primary" (click)="modaladd()" [disabled]="!toggle">
+    <div class="clr-col-12" style="text-align: right;">
-        <clr-icon shape="plus"></clr-icon>
+
-        <span>{{'ADD' | translate}}</span>
+      <button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="modaladd()" [disabled]="!toggle">
-      </button>
+        <clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }} </button>
-      <div *ngIf="!toggle" class="error-message mac-hint">
+      <div *ngIf="!toggle" class="error-message" style="color: red; font-size: 14px; margin-top: 5px;">
-        {{'CLOSE_TOGGLE_TO_ACTIVATE_ADD_BUTTON' | translate}}
+        {{ ' Close toggle to activate Add button. ' | translate }}
       </div>
     </div>
   </div>
 
-  <div class="mac-toolbar">
-    <div class="mac-toolbar__left">
-      <div class="mac-search">
-        <clr-icon shape="search"></clr-icon>
-        <input class="mac-search__input" type="text" placeholder="{{'SEARCH' | translate}}" [(ngModel)]="filterText" />
-      </div>
-    </div>
-    <div class="mac-toolbar__right mac-stats">
-      <div class="mac-stat">
-        <div class="mac-stat__value">{{ totalItems }}</div>
-        <div class="mac-stat__label">{{'TOTAL_ITEMS' | translate}}</div>
-      </div>
-      <div class="mac-stat">
-        <div class="mac-stat__value">{{ mainMenuCount }}</div>
-        <div class="mac-stat__label">{{'MAIN_MENUS' | translate}}</div>
-      </div>
-      <div class="mac-stat">
-        <div class="mac-stat__value">{{ subMenuCount }}</div>
-        <div class="mac-stat__label">{{'SUB_MENUS' | translate}}</div>
-      </div>
-    </div>
-  </div>
 
-  <clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="!toggle">
+  <clr-datagrid [clrDgLoading]="loading" *ngIf="!toggle">
     <clr-dg-placeholder>
-      <ng-template #loadingSpinner>
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
-        <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
-      </ng-template>
       <div *ngIf="alldata?.length === 0;else loadingSpinner">{{ 'NO_DATA_AVAILABLE' | translate }}</div>
     </clr-dg-placeholder>
 
-    <clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'NO' | translate }}
-        <span class="mac-col-title">
+      </ng-container></clr-dg-column>
-          <clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
+    <clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-        </span>
+        {{ 'MENU_ITEM_NAME' | translate }}
-      </ng-container>
+      </ng-container></clr-dg-column>
-    </clr-dg-column>
+    <clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
-    <clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
+        {{ 'VIEW' | translate }}
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+      </ng-container></clr-dg-column>
-        <span class="mac-col-title">
+    <clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-          <clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
+        {{ 'CREATE' | translate }}
-        </span>
+      </ng-container></clr-dg-column>
-      </ng-container>
+    <clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-    </clr-dg-column>
+        {{ 'EDIT' | translate }}
-    <clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
+      </ng-container></clr-dg-column>
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+    <clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
+        {{ 'DELETE' | translate }}
-          <clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
+        <!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
-        </span>
+      </ng-container></clr-dg-column>
-      </ng-container>
+    <clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-    </clr-dg-column>
+        {{ 'QUERY' | translate }}
-    <clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
+      </ng-container></clr-dg-column>
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+    <clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
+        {{ 'EXPORT' | translate }}
-          <clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
+      </ng-container></clr-dg-column>
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
 
-    <clr-dg-row *ngFor="let all of filteredAllData;let i=index">
+    <clr-dg-row *ngFor="let all of alldata;let i=index">
       <clr-dg-cell>{{i+1}}</clr-dg-cell>
-      <clr-dg-cell *ngIf="all.menuId==0">
+      <clr-dg-cell *ngIf="all.menuId==0"><b>{{all.menuItemDesc}}</b></clr-dg-cell>
-        <b>{{all.menuItemDesc}}</b>
-      </clr-dg-cell>
       <clr-dg-cell *ngIf="all.menuId!==0">&nbsp;&nbsp;&nbsp;{{all.menuItemDesc}}</clr-dg-cell>
-      <clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mvisible">
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
-      </clr-dg-cell>
+      <clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
-      <clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mcreate">
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
-      </clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.medit">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mdelete">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mquery">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mexport">
-      </clr-dg-cell>
 
       <clr-dg-action-overflow>
-        <button class="mac-action-item" (click)="modalEdit(all)">
+        <button class="action-item" (click)="modalEdit(all)">{{ 'EDIT' | translate }} <clr-icon shape="edit"
-          {{'EDIT' | translate}}
+            class="is-error"></clr-icon></button>
-          <clr-icon shape="edit" class="is-error"></clr-icon>
+        <button class="action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">{{ 'DELETE' | translate }}
-        </button>
+          <clr-icon shape="trash" class="is-error"></clr-icon></button>
-        <button class="mac-action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">
+        <button class="action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">{{ 'DELETE_MENU_SUBMENU' |
-          {{'DELETE' | translate}}
+          translate }}
-          <clr-icon shape="trash" class="is-error"></clr-icon>
+          <clr-icon shape="edit" class="is-error"></clr-icon></button>
-        </button>
+
-        <button class="mac-action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">
-          {{'DELETE_MENU_SUBMENU' | translate}}
-          <clr-icon shape="edit" class="is-error"></clr-icon>
-        </button>
       </clr-dg-action-overflow>
 
       <clr-dg-row-detail *clrIfExpanded>
         <table class="table">
           <tr>
-            <td class="td-title">{{'MENUNAME' | translate}}</td>
+            <td class="td-title">Menuname</td>
             <td class="td-content"></td>
           </tr>
+
+
         </table>
       </clr-dg-row-detail>
     </clr-dg-row>
 
-    <clr-dg-footer class="mac-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
-        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-        {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
+        of {{pagination.totalItems}} Records
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
 
-  <clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="toggle">
+  <clr-datagrid [clrDgLoading]="loading" *ngIf="toggle">
     <clr-dg-placeholder>
-      <ng-template #loadingSpinner>
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
-        <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
+      <div *ngIf="alldata?.length === 0;else loadingSpinner">No data available</div>
-      </ng-template>
-      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{'NO_DATA_AVAILABLE' | translate}}</div>
     </clr-dg-placeholder>
 
-    <clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+        NO
-        <span class="mac-col-title">
+      </ng-container></clr-dg-column>
-          <clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
+    <clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-        </span>
+        Menu Item Name
-      </ng-container>
+      </ng-container></clr-dg-column>
-    </clr-dg-column>
+    <clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
-    <clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
+        View
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+      </ng-container></clr-dg-column>
-        <span class="mac-col-title">
+    <clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-          <clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
+        Create
-        </span>
+      </ng-container></clr-dg-column>
-      </ng-container>
+    <clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-    </clr-dg-column>
+        Edit
-    <clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
+      </ng-container></clr-dg-column>
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+    <clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
+        Delete
-          <clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
+        <!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
-        </span>
+      </ng-container></clr-dg-column>
-      </ng-container>
+    <clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-    </clr-dg-column>
+        Query
-    <clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
+      </ng-container></clr-dg-column>
-      <ng-container *clrDgHideableColumn="{hidden: false}">
+    <clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
+        Export
-          <clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
+      </ng-container></clr-dg-column>
-        </span>
+    <ng-container *ngFor="let all of alldata;let i=index">
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <ng-container *ngFor="let all of filteredAllData;let i=index">
       <clr-dg-row *ngIf="all.menuId==0">
         <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell>
+        <clr-dg-cell><b>{{all.menuItemDesc}}</b></clr-dg-cell>
-          <b>{{all.menuItemDesc}}</b>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
-        </clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
-        <clr-dg-cell>
+        <clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mvisible">
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
-        </clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
-        <clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mcreate">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.medit">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mdelete">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mquery">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mexport">
-        </clr-dg-cell>
         <clr-dg-action-overflow>
-          <button class="mac-action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">
+          <button class="action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">Sync <clr-icon shape="shrink"
-            {{'SYNC' | translate}}
+              class="is-error"></clr-icon> </button>
-            <clr-icon shape="shrink" class="is-error"></clr-icon>
-          </button>
         </clr-dg-action-overflow>
         <clr-dg-row-detail *clrIfExpanded>
           <table class="table">
             <tr>
-              <td class="td-title">{{'MENUNAME' | translate}}</td>
+              <td class="td-title">Menuname</td>
               <td class="td-content"></td>
             </tr>
           </table>
         </clr-dg-row-detail>
       </clr-dg-row>
     </ng-container>
-    <clr-dg-footer class="mac-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
-        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-        {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
+        of {{pagination.totalItems}} Records
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
-    <h3 class="modal-title mac-modal-title">
+    <h3 class="modal-title">Add Menu Access Control</h3>
-      <clr-icon shape="plus"></clr-icon> {{'ADD_MENU_ACCESS_CONTROL' | translate}}
-    </h3>
     <div class="modal-body">
       <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
         <div class="clr-row">
-          <div class="clr-col-sm-12 mac-form-group">
+          <div class="clr-col-sm-12">
-            <label class="mac-form-label" for="name">{{'MENU_NAME' | translate}}
+            <label for="name">Menu Name<span class="required-field">*</span></label>
-              <span class="required-field">*</span>
+            <select name="" id="" style="width: 100%;padding: 5px 5px;border: 1px solid #ccc;border-radius: 4px;"
-            </label>
+              (change)="idselected($event.target.value)">
-            <select name="" id="" class="mac-form-select w-100" (change)="idselected($event.target.value)">
               <option *ngFor="let sub of menus" [value]="sub.menuItemId">{{sub.menuItemDesc}}</option>
             </select>
-            <div class="mac-form-help">{{'CHOOSE_MAIN_MENU_FOR_ACCESS' | translate}}</div>
           </div>
         </div>
+        <br>
         <div class="modal-footer">
-          <button type="button" class="mac-btn mac-btn-outline" (click)="modalAdd = false">
+          <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
-            <clr-icon shape="times"></clr-icon>
+          <button type="submit" class="btn btn-primary">ADD</button>
-            <span>{{'CANCEL' | translate}}</span>
-          </button>
-          <button type="submit" class="mac-btn mac-btn-primary">
-            <clr-icon shape="check"></clr-icon>
-            <span>{{'ADD' | translate}}</span>
-          </button>
         </div>
       </form>
     </div>
+
   </clr-modal>
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
-    <h3 class="modal-title mac-modal-title">
+    <h3 class="modal-title">Update Menu Access Control</h3>
-      <clr-icon shape="edit"></clr-icon> {{'UPDATE_MENU_ACCESS_CONTROL' | translate}}
-    </h3>
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
-      <div class="mac-form-help">{{'MENU_ID' | translate}}: 
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
-        <code class="clr-code">{{rowSelected.menuItemId.menuItemId}}</code>
-      </div>
       <form (ngSubmit)="onUpdate(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)">
-        <div class="mac-perms">
+        <div class="clr-row">
-          <label class="mac-perm">
+          <div class="clr-col-md-3 clr-col-sm-12">
-            <input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible" (change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
+            <label for="tags">View</label>
-            <span class="mac-perm__icon">
+            <input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible"
-              <clr-icon shape="eye"></clr-icon>
+              (change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
-            </span>
-            <span class="mac-perm__label">{{'VIEW' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mcreate" [(ngModel)]="selected ===rowSelected.mcreate" (change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="plus"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'CREATE' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit" (change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="edit"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'EDIT' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete" (change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="trash"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'DELETE' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery" (change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="search"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'QUERY' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport" (change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="export"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'EXPORT' | translate}}</span>
-          </label>
           </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="name">Create</label>
+            <input type="checkbox" clrCheckbox name="mcreate" name="mcreate"
+              [(ngModel)]="selected ===rowSelected.mcreate"
+              (change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Edit</label>
+            <input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit"
+              (change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Delete</label>
+            <input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete"
+              (change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Query</label>
+            <input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery"
+              (change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Export</label>
+            <input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport"
+              (change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
+          </div>
+
+        </div>
+        <br>
         <div class="modal-footer">
-          <button type="button" class="mac-btn mac-btn-outline" (click)="modaledit = false">
+          <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
-            <clr-icon shape="times"></clr-icon>
+          <button type="submit" class="btn btn-primary">UPDATE</button>
-            <span>{{'CANCEL' | translate}}</span>
-          </button>
-          <button type="submit" class="mac-btn mac-btn-primary">
-            <clr-icon shape="check"></clr-icon>
-            <span>{{'UPDATE' | translate}}</span>
-          </button>
         </div>
       </form>
     </div>
   </clr-modal>
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-    <div class="modal-body">
-      <div class="mac-delete-header">
-        <div class="mac-delete-icon">
-          <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-        </div>
-        <h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?</h1>
-        <p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
-      </div>
-      <div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
-        <div class="mac-delete-detail-item">
-          <span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
-          <span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete = false">
-          <clr-icon shape="times"></clr-icon>
-          <span>{{'CANCEL' | translate}}</span>
-        </button>
-        <button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
-          <clr-icon shape="trash"></clr-icon>
-          <span>{{'DELETE' | translate}}</span>
-        </button>
-      </div>
-    </div>
-  </clr-modal>
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
-    <div class="modal-body">
+      <h1 class="delete">Are You Sure Want to delete?</h1>
-      <div class="mac-delete-header">
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
-        <div class="mac-delete-icon">
-          <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-        </div>
-        <h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE_MAIN_MENU_WITH_SUBMENU' | translate}}?</h1>
-        <p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
-      </div>
-      <div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
-        <div class="mac-delete-detail-item">
-          <span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
-          <span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
-        </div>
-      </div>
       <div class="modal-footer">
-        <button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete1 = false">
+        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
-          <clr-icon shape="times"></clr-icon>
+        <button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
-          <span>{{'CANCEL' | translate}}</span>
+          class="btn btn-primary">Delete</button>
-        </button>
-        <button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
-          <clr-icon shape="trash"></clr-icon>
-          <span>{{'DELETE' | translate}}</span>
-        </button>
       </div>
     </div>
   </clr-modal>
+  <clr-modal [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h1 class="delete">Are You Sure Want to delete Main menu with submenu?</h1>
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete1 = false">Cancel</button>
+        <button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
+          class="btn btn-primary">Delete</button>
       </div>
+    </div>
+  </clr-modal>

frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss

@@ -1,160 +1,43 @@
-@import '../../../../../styles/_design-tokens.scss';
+input[type=text],[type=date],[type=password],[type=checkbox] {
-
-// Import base styles
-input[type=text],
-[type=date],
-[type=password],
-[type=checkbox] {
   width: 100%;
   padding: 15px 20px;
-  background-color: var(--theme-surface);
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
   display: inline-block;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid #ccc;
-  border-radius: 8px;
+  border-radius: 4px;
   box-sizing: border-box;
-  font-family: var(--theme-font-primary);
-  color: var(--theme-text);
 }
-
-input[type=text]:focus,
-[type=date]:focus,
-[type=password]:focus,
-[type=checkbox]:focus {
-  outline: none;
-  border-color: var(--theme-primary);
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-}
-
 .required-field{
-  color: var(--theme-error, #ef4444);
+  color: red;
 font-size: 18px;
-}
 
+}
+// select{
+//   width: 100%;
+//   padding: 5px 5px;
+//   border: 1px solid #ccc;
+//   border-radius: 4px;
+// }
 .td-title {
   text-align: center;
   width: 150px;
 color: white;
   font-weight: bold;
-  background-color: var(--theme-primary);
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
 }
-
 th{
+  //background-color:rgb(170, 169, 169);
   font-weight: bold;
 }
-
 .td-content{
   text-align: left;
 }
-
+.delete,.heading{
-// Modern Button Styles using ThemeService
+  text-align: center;
-.mac-btn {
+  color: red;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
 }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.mac-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.mac-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.mac-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.mac-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.mac-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1);
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.mac-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.mac-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
 //toggle button
 .switch {
   position: relative;
@@ -194,11 +77,11 @@ th {
 }
 
 input:checked + .slider {
-  background-color: var(--theme-primary);
+  background-color: #0072a3;
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px var(--theme-primary);
+  box-shadow: 0 0 1px #0072a3;
 }
 
 input:checked + .slider:before {
@@ -214,564 +97,3 @@ input:checked+.slider:before {
       .slider.round:before {
         border-radius: 50%;
       }
-
-// Modern themed enhancements (ThemeService variables)
-.mm-breadcrumb {
-  color: var(--theme-text-secondary);
-}
-
-.mac-header-left {
-  display: flex;
-}
-
-.mac-title h4 {
-  font-weight: 300;
-}
-
-.mac-edit-chip {
-  margin-top: 27px;
-  position: relative;
-}
-
-.mac-chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  background-color: var(--theme-background);
-  color: var(--theme-text);
-  border-radius: var(--theme-border-radius);
-  font-size: 14px;
-  font-weight: 500;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.mac-header-right {
-  text-align: right;
-}
-
-.mac-select {
-  height: 40px;
-  padding: 8px 12px;
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-  }
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.mac-btn-primary {
-  margin-left: 20px;
-  box-shadow: var(--theme-shadow);
-}
-
-.mac-actions {
-  text-align: right;
-  margin-bottom: 24px;
-}
-
-.mac-hint {
-  color: var(--theme-error, #ef4444);
-  font-size: 14px;
-  margin-top: 5px;
-}
-
-.mac-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.mac-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-.mac-modal .modal-title {
-  color: var(--theme-text);
-}
-
-// Hero and actions
-.mac-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-}
-
-.mac-sep {
-  width: 1px;
-  height: 22px;
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.mac-label {
-  color: white;
-  font-weight: 500;
-}
-
-.mac-toggle__label {
-  color: white;
-  font-weight: 500;
-}
-
-// Grid columns
-.mac-col-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--theme-text-secondary);
-}
-
-.mac-col--perm .mac-col-title clr-icon {
-  color: var(--theme-primary);
-}
-
-// Toolbar, search and stats
-.mac-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    gap: 16px;
-  }
-}
-
-.mac-search {
-  position: relative;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
-    width: 100%;
-    padding: 12px 12px 12px 40px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 200ms ease-out;
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-    font-family: var(--theme-font-primary);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-    }
-  }
-}
-
-.mac-stats {
-  display: flex;
-  gap: 16px;
-}
-
-.mac-stat {
-  min-width: 110px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.04);
-  border-radius: var(--theme-border-radius);
-  padding: 16px;
-  text-align: center;
-  box-shadow: var(--theme-shadow);
-
-  &__value {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--theme-primary);
-    margin-bottom: 4px;
-  }
-
-  &__label {
-    font-size: 12px;
-    color: var(--theme-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-}
-
-// Enhanced modals
-.mac-modal-title clr-icon {
-  margin-right: 6px;
-  color: var(--theme-primary);
-}
-
-.mac-form-group {
-  margin-bottom: 20px;
-}
-
-.mac-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.mac-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-}
-
-.mac-form-help {
-  color: var(--theme-text-secondary);
-  font-size: 12px;
-  margin-top: 6px;
-  font-family: var(--theme-font-primary);
-}
-
-.mac-perms {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
-  margin: 24px 0;
-}
-
-.mac-perm {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-  transition: all 200ms ease-out;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  }
-
-  input[type="checkbox"] {
-    width: auto;
-    padding: 0;
-  }
-}
-
-.mac-perm__icon clr-icon {
-  color: var(--theme-primary);
-  width: 20px;
-  height: 20px;
-}
-
-.mac-perm__label {
-  color: var(--theme-text);
-  font-weight: 500;
-  font-family: var(--theme-font-primary);
-}
-
-// Datagrid action overflow buttons
-.mac-action-item {
-  @extend .mac-btn;
-  @extend .mac-btn-ghost;
-  @extend .mac-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
-  text-align: left;
-
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-
-  &.mac-btn-error {
-    color: var(--theme-error, #ef4444);
-
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-  }
-}
-
-// Delete Modal Styles
-.mac-delete-header {
-  text-align: center;
-  padding: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.mac-delete-icon {
-  color: var(--theme-error, #ef4444);
-  margin-bottom: 16px;
-}
-
-.mac-delete-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.mac-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.mac-delete-details {
-  padding: 24px;
-}
-
-.mac-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.mac-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.mac-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.delete,
-.heading {
-  text-align: center;
-  color: var(--theme-error, #ef4444);
-}
-
-// Modal Header
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-
-  .close {
-    color: white;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-// Modal Body
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-// Modal Footer
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .mac-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-
-    &__actions {
-      flex-direction: column;
-      width: 100%;
-    }
-  }
-
-  .mac-toolbar {
-    flex-direction: column;
-    gap: 16px;
-  }
-
-  .mac-search {
-    max-width: 100%;
-  }
-
-  .mac-stats {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .mac-perms {
-    grid-template-columns: 1fr;
-  }
-
-  .mac-actions {
-    text-align: center;
-  }
-
-  .mac-btn {
-    width: 100%;
-    justify-content: center;
-  }
-}

frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts

@@ -6,8 +6,6 @@ import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
 import { MenumaintanceService } from 'src/app/services/admin/menumaintance.service';
 import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
 import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
-import { ThemeService } from 'src/app/services/theme.service';
-
 @Component({
   selector: 'app-menuaccesscontrol',
   templateUrl: './menuaccesscontrol.component.html',
@@ -38,26 +36,15 @@ export class MenuaccesscontrolComponent implements OnInit {
   toggle: boolean = false;
   maindata;
   showdata;
-  // UI enhancements (no API changes)
+  constructor(private mainservice: UsermaintanceService,
-  filterText: string = '';
-  
-  constructor(
-    private mainservice: UsermaintanceService,
     private _fb: FormBuilder,
     private toastr: ToastrService,
     private route: ActivatedRoute,
     private usergrpservice: UsergrpmaintainceService,
     private menuGroupService: MenuGroupService,
-    private menuservice: MenumaintanceService,
+    private menuservice: MenumaintanceService,) { }
-    private themeService: ThemeService
-  ) { }
 
   ngOnInit(): void {
-    // Ensure theme variables are applied to the view
-    this.themeService.currentTheme$.subscribe(() => {
-      // CSS variables are updated globally; no extra handling needed here
-    });
-    
     this.showdata = this.menuGroupService.getdata();
     console.log(this.showdata);
     this.mcreate = this.showdata.mcreate;
@@ -74,64 +61,35 @@ export class MenuaccesscontrolComponent implements OnInit {
       grpid: this.usergrpid,
       gmenuid: this.menuselectid,
     });
-  }
 
-  // Stats & filtering helpers for UI only
-  get totalItems(): number {
-    const list: any[] = (this.alldata as unknown as any[]) || [];
-    return list.length;
   }
-  
-  get mainMenuCount(): number {
-    const list: any[] = (this.alldata as unknown as any[]) || [];
-    return list.filter(it => it && it.menuId === 0).length;
-  }
-  
-  get subMenuCount(): number {
-    const list: any[] = (this.alldata as unknown as any[]) || [];
-    return list.filter(it => it && it.menuId !== 0).length;
-  }
-  
-  get filteredAllData(): any[] {
-    const items: any[] = (this.alldata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    return items.filter(m => (
-      (m?.menuItemDesc || '').toLowerCase().includes(text)
-    ));
-  }
-  
   dropddowngetdata() {
     this.usergrpservice.getAll().subscribe((data) => {
       console.log(data);
       this.givendata = data;
     });
   }
-  
   getdata() {
     this.menuservice.getByCurrentUserMenuGroupId1().subscribe(resp => {
       this.menus = resp;
       console.log('menus: ', this.menus);
     })
   }
-  
   getall() {
     this.usergrpservice.getall().subscribe((data) => {
       this.secmenuaccessdata = data
       console.log(data);
     })
   }
-  
   idofselected(val) {
     console.log(val);
     this.usergrpid = val;
-  }
 
+  }
   idselected(val) {
     console.log(val)
     this.menuselectid = val;
   }
-  
   getbyuseriddata() {
     this.usergrpservice.getbyusergrpid(this.usergrpid).subscribe((data) => {
       this.alldata = data;
@@ -153,12 +111,10 @@ export class MenuaccesscontrolComponent implements OnInit {
         }
       });
   }
-  
   modaladd() {
     this.modalAdd = true;
     this.getdata();
   }
-  
   onSubmit() {
     this.modalAdd = false;
     this.entryForm.value.grpid = this.usergrpid;
@@ -182,20 +138,18 @@ export class MenuaccesscontrolComponent implements OnInit {
         }
         this.ngOnInit();
       });
-  }
 
+  }
   modalEdit(row) {
     this.rowSelected = row;
     console.log(this.rowSelected);
     this.modaledit = true;
   }
-  
   modalDelete(row) {
     this.rowSelected = row;
     console.log(this.rowSelected)
     this.modaldelete = true;
   }
-  
   delete(id, usrgrp) {
     this.modaldelete = false;
     this.usergrpservice.delete(id, usrgrp).subscribe((data) => {
@@ -212,13 +166,11 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     });
   }
-  
   modaldeletemainmenu(row) {
     this.rowSelected = row;
     console.log(this.rowSelected)
     this.modaldelete1 = true;
   }
-  
   delete1(id, usrgrp) {
     this.modaldelete1 = false;
     this.usergrpservice.deletemain(id, usrgrp).subscribe((data) => {
@@ -235,7 +187,6 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     });
   }
-  
   onUpdate(id: any, usrgrp: any) {
     this.modaledit = false;
     console.log(id, usrgrp);
@@ -253,7 +204,6 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     });
   }
-  
   onChecked(value) {
     if (value == "y") {
       this.selected = "y"
@@ -263,13 +213,11 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.selected = "n"// make a call for unchecked
     }
   }
-  
   changedelete(val) {
     console.log(val);
     val = this.colvalue = val;
     console.log(val);
   }
-  
   data: {};
   Sync(id: any, row) {
     this.rowSelected = row;
@@ -291,7 +239,6 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     })
   }
-  
   toggleCheckbox() {
     this.toggle = !this.toggle;
     //this.dataService.setDivToggler(this.toggler);

frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html

@@ -1,39 +1,11 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
   <li><a href="javascript://">{{ 'MENU_MAINTENANCE' | translate }}</a></li>
 </ol>
 
-<div class="mm-container">
+
-  <section class="mm-hero">
-    <div class="mm-hero__content">
-      <div class="mm-hero__icon">
-        <clr-icon shape="organization"></clr-icon>
-      </div>
-      <div>
-        <h2 class="mm-hero__title">{{ 'MENU_MAINTENANCE' | translate }}</h2>
-        <p class="mm-hero__subtitle">{{ 'MAIN_MENU' | translate }}</p>
-      </div>
-    </div>
-    <div class="mm-hero__actions">
-      <button class="btn btn-outline mm-btn-outline" (click)="onExport()">
-        <clr-icon shape="export"></clr-icon>
-        <span class="mm-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
-      </button>
-      <button class="btn btn-primary mm-btn-primary" (click)="csvImport()">
-        <clr-icon shape="import"></clr-icon>
-        <span class="mm-btn-text">{{ 'IMPORT' | translate }}</span>
-      </button>
-      <button id="add" class="btn btn-primary mm-btn-primary" (click)="goToAdd()">
-        <clr-icon shape="plus"></clr-icon>
-        <span class="mm-btn-text">{{ 'ADD' | translate }}</span>
-      </button>
-      <button class="btn mm-btn-secondary" (click)="downloadFiles()">
-        <clr-icon shape="download"></clr-icon>
-        <span class="mm-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
-      </button>
-    </div>
-  </section>
   <!-- <div class="clr-row">
     <div class="clr-col-12" style="text-align: right;">
       <button id="add" *ngIf="mcreate == 'true'"  class="btn btn-primary" (click)="goToAdd()">
@@ -41,44 +13,29 @@
       </button>
     </div>
   </div> -->
-  <div class="mm-stats">
+  <div class="clr-row" style="margin-top: 15px;">
-    <div class="mm-stat">
+    <div class="clr-col">
-      <div class="mm-stat__value">{{ totalMenus }}</div>
+      <h3 style="font-weight: 300;display: inline;">{{ 'MENU_MAINTENANCE' | translate }} </h3>
-      <div class="mm-stat__label">{{ 'TOTAL_MENUS' | translate }}</div>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">{{ 'MAIN_MENU' | translate }}</span><br>
-    </div>
+
-    <div class="mm-stat">
-      <div class="mm-stat__value">{{ enabledMenusCount }}</div>
-      <div class="mm-stat__label">{{ 'ENABLED' | translate }}</div>
-    </div>
-    <div class="mm-stat">
-      <div class="mm-stat__value">{{ disabledMenusCount }}</div>
-      <div class="mm-stat__label">{{ 'DISABLED' | translate }}</div>
-    </div>
     </div>
 
-  <div class="mm-toolbar">
+    <div class="clr-col" style="text-align: right;">
-    <div class="mm-toolbar__left">
+      <div class="btn-group">
-      <div class="mm-search">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
-        <clr-icon shape="search"></clr-icon>
+
-        <input class="mm-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
     </div>
-    </div>
+    
-    <div class="mm-toolbar__right">
+    <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
-      <select class="mm-select" [(ngModel)]="statusFilter">
+
-        <option value="All">{{ 'ALL' | translate }}</option>
+    <button class="btn btn-outline" (click)="onExport()">
-        <option value="Enable">{{ 'ENABLED' | translate }}</option>
+      <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
-        <option value="Disable">{{ 'DISABLED' | translate }}</option>
-      </select>
-      <div class="mm-view-toggle">
-        <button class="btn btn-sm" [class.btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-          <clr-icon shape="view-cards"></clr-icon>
     </button>
-        <button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+        <button id="add"  class="btn btn-primary"  (click)="goToAdd()">
-          <clr-icon shape="table"></clr-icon>
+            <clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
         </button>
     </div>
 </div>
-  </div>
   <!-- <table class="table">
     <thead>
       <tr>
@@ -187,81 +144,62 @@
 
     </tbody>
   </table> -->
-
+  <clr-datagrid [clrDgLoading]="loading"  [(clrDgSelected)]="selected">
-  <div class="mm-skeleton-list" *ngIf="loading">
+    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ... </clr-spinner></ng-template>
-    <div class="mm-skeleton-item" *ngFor="let i of [1,2,3,4,5,6]">
+      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
-      <div class="mm-skel mm-skel--icon"></div>
+      <clr-dg-column [clrDgField]="''" style="max-width: 40px;">
-      <div class="mm-skel mm-skel--title"></div>
-      <div class="mm-skel mm-skel--meta"></div>
-      <div class="mm-skel mm-skel--chip"></div>
-      <div class="mm-skel mm-skel--link"></div>
-      <div class="mm-skel mm-skel--badge"></div>
-      <div class="mm-skel mm-skel--actions"></div>
-    </div>
-  </div>
-  <div class="mm-card" *ngIf="viewMode==='table'">
-    <clr-datagrid class="mm-grid mm-grid--modern" [clrDgLoading]="loading" [(clrDgSelected)]="selected">
-      <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ...
-          </clr-spinner></ng-template>
-        <div class="mm-empty" *ngIf="error;else loadingSpinner">
-          <clr-icon shape="warning-standard"></clr-icon>
-          <div class="mm-empty__title">{{ 'NO_DATA' | translate }}</div>
-          <div class="mm-empty__subtitle">{{ error }}</div>
-        </div>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="''" class="mm-col mm-col--icon">
         <ng-container *clrDgHideableColumn="{hidden: false}"></ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--no">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}</span>
+          {{'NO' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--name">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}</span>
+          {{'MENU_ITEM_NAME' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--id">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="id-badge"></clr-icon> {{'ID' | translate}}</span>
+          {{'ID' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--seq">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="number-list"></clr-icon> {{'SEQUENCE' | translate}}</span>
+          {{'SEQUENCE' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--module">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="application"></clr-icon> {{'MODULE_NAME' | translate}}</span>
+          {{'MODULE_NAME' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--link">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="link"></clr-icon> {{'MENU_ACTION_LINK' | translate}}</span>
+          {{'MENU_ACTION_LINK' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--status">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="shield-check"></clr-icon> {{'STATUS' | translate}}</span>
+          {{'STATUS' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--submenu">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           {{'SUB_MENU' | translate}}
         </ng-container>
       </clr-dg-column>
       
-      <clr-dg-column class="mm-col mm-col--action">
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           <clr-icon shape="bars"></clr-icon>
           {{'ACTION' | translate}}
@@ -269,49 +207,22 @@
       </clr-dg-column>
       
 
-      <clr-dg-row class="mm-row" *clrDgItems="let user of filteredMenus;let i = index" [clrDgItem]="user">
+    <clr-dg-row *clrDgItems="let user of menus;let i = index" [clrDgItem]="user">
-        <clr-dg-cell class="mm-cell mm-cell--icon">
+      <clr-dg-cell style="max-width: 40px;">
-          <span class="mm-icon-action"><clr-icon shape="edit" (click)="goToEdit(user)"
+        <span style="cursor: pointer;"><clr-icon shape="edit" (click)="goToEdit(user)" class="red is-error" style="color:red;"></clr-icon></span>
-              class="is-error mm-icon-edit"></clr-icon></span>
       </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--no">{{i+1}}</clr-dg-cell>
+      <clr-dg-cell >{{i+1}}</clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--name">
+      <clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
-          <div class="mm-item">
+      <clr-dg-cell >{{user.menuId}}</clr-dg-cell>
-            <div class="mm-item__avatar"><clr-icon shape="bookmark"></clr-icon></div>
+      <clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
-            <div class="mm-item__text">
+      <clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
-              <div class="mm-item__title">{{user.menuItemDesc}}</div>
+      <clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
-              <div class="mm-item__meta">ID: {{user.menuId}} • Seq: {{user.itemSeq}}</div>
+      <clr-dg-cell >{{user.status}} </clr-dg-cell>
-            </div>
+      <clr-dg-cell ><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)" style="color: rgb(108, 108, 194);"></clr-icon> </clr-dg-cell>
-          </div>
+      <clr-dg-cell>
-        </clr-dg-cell>
+        <span style="cursor: pointer;padding: 10px; "><clr-icon shape="trash"  (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
-        <clr-dg-cell class="mm-cell mm-cell--id">{{user.menuId}}</clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--seq">{{user.itemSeq}}</clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--module">
-          <div class="mm-chip mm-chip--module">
-            <clr-icon shape="application"></clr-icon>
-            <span>{{user.moduleName}}</span>
-          </div>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--link">
-          <div class="mm-link">
-            <clr-icon shape="link"></clr-icon>
-            <span>{{user.main_menu_action_name}}</span>
-          </div>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--status">
-          <span class="mm-badge" [class.mm-badge--success]="user.status==='Enable'"
-            [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</span>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--submenu"><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)"
-            class="mm-icon-link"></clr-icon> </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--action">
-          <div class="mm-actions-inline">
-            <button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon></button>
-            <button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon></button>
-          </div>
         <clr-signpost>
-            <span class="mm-icon-action" clrSignpostTrigger><clr-icon shape="help"
+          <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
-                class="mm-icon-help"></clr-icon></span>
           <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
             <h5 style="margin-top: 0">{{'WHO_COLUMN'|translate}} </h5>
                   <div>{{'ACCOUNT_ID'|translate}} <code class="clr-code">{{user.accountId}}</code></div>
@@ -328,15 +239,16 @@
       </clr-dg-action-overflow> -->
 
                 <clr-dg-row-detail *clrIfExpanded >
-          <div class="mm-detail">
+                  <table class="table">
-            <div class="mm-detail__row"><span>Menu Name</span><strong>{{user.menuItemDesc}}</strong></div>
+                    <tr>
-            <div class="mm-detail__row"><span>Action Link</span><strong>{{user.main_menu_action_name}}</strong></div>
+                      <td class="td-title">Menu Name: </td>
-            <div class="mm-detail__row"><span>Module</span><strong>{{user.moduleName}}</strong></div>
+                      <td class="td-content">{{user.menuItemDesc}}</td>
-          </div>
+                    </tr>
+                  </table>
                 </clr-dg-row-detail>
     </clr-dg-row>
 
-      <clr-dg-footer class="mm-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
         <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
@@ -344,37 +256,8 @@
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
-  </div>
 
-  <div *ngIf="viewMode==='cards'">
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
-    <div class="mm-cards">
-      <div class="mm-card-item" *ngFor="let user of filteredMenus; let i = index">
-        <div class="mm-card-item__header">
-          <!-- <div class="mm-card-item__icon"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
-          <div class="mm-card-item__title">{{user.menuItemDesc}}</div>
-          <div class="mm-card-item__badge" [class.mm-badge--success]="user.status==='Enable'"
-            [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</div>
-        </div>
-        <div class="mm-card-item__body">
-          <div class="mm-kv"><span>ID</span><strong>{{user.menuId}}</strong></div>
-          <div class="mm-kv"><span>Sequence</span><strong>{{user.itemSeq}}</strong></div>
-          <div class="mm-kv"><span>Module</span><strong>{{user.moduleName}}</strong></div>
-          <div class="mm-kv mm-link"><clr-icon shape="link"></clr-icon><strong>{{user.main_menu_action_name}}</strong>
-          </div>
-        </div>
-        <div class="mm-card-item__footer">
-          <button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon>
-            Edit</button>
-          <button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon>
-            Delete</button>
-          <button class="btn btn-sm" (click)="submenu(user.menuItemId)"><clr-icon shape="bullet-list"></clr-icon>
-            Submenu</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Add Menu Maintenance</h3>
     <div class="modal-body">
           <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
@@ -391,28 +274,24 @@
             <label for="name">Menu Item Name<span class="required-field">*</span></label>
            <input type="text" class="clr-input" formControlName="menuItemDesc">
            <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field
+            <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field is Required</div>
-                is Required</div>
         </div>
           </div>
           <div class="clr-col-sm-12">
             <label for="tags">Sequence</label>
             <input type="text" class="clr-input" formControlName="itemSeq">
             <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is
+              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is Required</div>
-                Required</div>
           </div>
           <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only
+            <div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only Number</div>
-                Number</div>
         </div>
             </div>
             <div class="clr-col-sm-12">
               <label for="tags">Module Name</label>
               <input type="text" class="clr-input" formControlName="moduleName">
               <div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is
+                <div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is Required</div>
-                Required</div>
             </div>
               </div>
             <div class="clr-col-sm-12">
@@ -422,16 +301,14 @@
                 <option value="Disable">Disable</option>
                 </select>
                 <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is
+                  <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
-                Required</div>
               </div>
               </div>
               <div class="clr-col-sm-12">
                 <label for="tags">Menu Action Link</label>
                 <input type="text" class="clr-input" formControlName="main_menu_action_name">
                 <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">*This field is Required</div>
-                *This field is Required</div>
               </div>
                 <!-- <select NAME="menu_id" >
                   <option SELECTED >Home Menu
@@ -476,8 +353,7 @@
                   <label for="tags">Menu Icon Name</label>
                   <input type="text" class="clr-input" formControlName="main_menu_icon_name">
                   <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This
+                    <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This field is Required</div>
-                field is Required</div>
                 </div>
                     </div>
         </div>
@@ -491,7 +367,7 @@
 
   </clr-modal>
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
 
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
       <h1 class="delete">Are You Sure Want to delete?</h1>
@@ -504,7 +380,7 @@
   </clr-modal>
 
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Update Menu Maintenance</h3>
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
       <h2 class="heading">{{rowSelected.menuItemId}}</h2>
@@ -536,13 +412,11 @@
               </div>
               <div class="clr-col-sm-12">
                 <label for="tags">Menu Action Link</label>
-            <input type="text" class="clr-input" name="main_menu_action_name"
+                <input type="text" class="clr-input" name="main_menu_action_name" [(ngModel)]="rowSelected.main_menu_action_name">
-              [(ngModel)]="rowSelected.main_menu_action_name">
                 </div>
                 <div class="clr-col-sm-12">
                   <label for="tags">Menu Icon Name </label>
-            <input type="text" class="clr-input" name="main_menu_icon_name"
+                  <input type="text" class="clr-input" name="main_menu_icon_name" [(ngModel)]="rowSelected.main_menu_icon_name">
-              [(ngModel)]="rowSelected.main_menu_icon_name">
                   </div>
         </div>
         <br>
@@ -556,14 +430,12 @@
   </clr-modal>
 
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
     <h3 class="modal-title">Import File</h3>
     <div class="modal-body">
-      <input type="file" name="file" class="file" (change)="selectFile($event)"
+        <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
     </div>
     <div class="modal-footer">
         <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
     </div>
   </clr-modal>
-</div>

frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss

@@ -60,591 +60,3 @@ select{
   border-radius: 4px;
 }
 
-/* Modern theme-aware enhancements */
-.mm-container {
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-  padding: 1rem;
-}
-
-.mm-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--theme-glass-bg);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--theme-glass-border);
-  border-radius: calc(var(--theme-border-radius) + 4px);
-  padding: 1rem 1.25rem;
-  margin-bottom: 0.75rem;
-  box-shadow: var(--theme-glass-shadow);
-}
-
-.mm-hero__content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.mm-hero__icon clr-icon {
-  width: 28px;
-  height: 28px;
-  color: var(--theme-primary);
-  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
-}
-
-.mm-hero__title {
-  font-size: 1.25rem;
-  line-height: 1.2;
-  margin: 0;
-}
-
-.mm-hero__subtitle {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-hero__actions .btn + .btn {
-  margin-left: 0.5rem;
-}
-
-.mm-breadcrumb {
-  margin-bottom: 0.75rem;
-}
-
-.mm-header-row {
-  align-items: center;
-  margin-top: 0.75rem;
-}
-
-.mm-title-wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.mm-title {
-  display: inline-block;
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.mm-subtitle {
-  display: inline-block;
-}
-
-.mm-actions {
-  text-align: right;
-}
-
-.mm-btn-group {
-  margin-right: 0.5rem;
-}
-
-.mm-btn-primary {
-  border-radius: var(--theme-border-radius);
-  background: var(--theme-primary);
-  color: #fff;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
-  transition: transform 120ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), box-shadow 150ms ease;
-}
-
-.mm-btn-primary:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); transform: translateY(-1px); }
-.mm-btn-primary:active { transform: translateY(0); }
-
-.mm-btn-outline {
-  border-radius: var(--theme-border-radius);
-  border: 1px solid var(--theme-primary);
-  color: var(--theme-primary);
-  background: transparent;
-}
-
-.mm-btn-outline:hover { background: var(--theme-primary-100); }
-
-.mm-btn-secondary {
-  border-radius: var(--theme-border-radius);
-  background: var(--theme-secondary);
-  color: #fff;
-}
-
-.mm-btn-text {
-  margin-left: 0.35rem;
-}
-
-.mm-grid {
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-}
-.mm-grid--modern .datagrid-header {
-  background: linear-gradient(135deg, var(--theme-primary-50), transparent);
-}
-
-.mm-col-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 600;
-}
-
-.mm-col--icon { width: 44px; }
-.mm-col--no { width: 70px; }
-.mm-col--name { min-width: 220px; }
-.mm-col--id { width: 120px; }
-.mm-col--seq { width: 120px; }
-.mm-col--module { min-width: 160px; }
-.mm-col--link { min-width: 220px; }
-.mm-col--status { width: 140px; }
-.mm-col--submenu { width: 100px; }
-.mm-col--action { width: 140px; }
-
-.mm-card {
-  background: var(--theme-glass-bg);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--theme-glass-border);
-  border-radius: var(--theme-border-radius);
-  padding: 0.25rem;
-}
-
-.mm-grid-footer {
-  border-top: 1px solid rgba(0,0,0,0.06);
-}
-
-.mm-col--icon,
-.mm-cell--icon {
-  max-width: 40px;
-}
-
-.mm-row:hover {
-  background: var(--theme-primary-50);
-}
-
-.mm-icon-action {
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 6px;
-  transition: background 150ms ease-out, transform 150ms ease-out;
-}
-
-.mm-icon-action:hover {
-  background: var(--theme-primary-100);
-  transform: translateY(-1px);
-}
-
-.mm-icon-edit {
-  color: var(--theme-accent);
-}
-
-.mm-icon-link {
-  color: var(--theme-secondary);
-}
-
-.mm-icon-help {
-  color: var(--theme-primary);
-}
-
-.mm-icon-delete {
-  color: #ef4444;
-}
-
-.mm-danger:hover {
-  background: rgba(239, 68, 68, 0.12);
-}
-
-.mm-modal .modal-body {
-  background: var(--theme-surface);
-}
-
-.mm-modal .modal-title {
-  font-weight: 600;
-}
-
-/* Modernize Add/Edit modals */
-.mm-modal .modal-body form {
-  display: block;
-}
-
-.mm-modal .modal-body .clr-row {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px 16px;
-}
-
-@media (max-width: 640px) {
-  .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; }
-}
-
-.mm-modal label {
-  display: inline-block;
-  margin-bottom: 6px;
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.mm-modal input.clr-input,
-.mm-modal select {
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid rgba(0,0,0,0.12);
-  background: var(--theme-background);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.mm-modal input.clr-input:focus,
-.mm-modal select:focus {
-  outline: none;
-  border-color: var(--theme-primary);
-  box-shadow: 0 0 0 3px var(--theme-primary-100);
-}
-
-.mm-modal .modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.mm-modal .modal-footer .btn.btn-primary {
-  background: var(--theme-primary);
-  color: #fff;
-  border-radius: 10px;
-}
-
-.mm-modal .modal-footer .btn.btn-outline {
-  border-radius: 10px;
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-}
-
-.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
-
-.mm-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.mm-item__avatar clr-icon {
-  width: 18px;
-  height: 18px;
-  color: var(--theme-accent);
-}
-
-.mm-item__title {
-  font-weight: 600;
-}
-
-.mm-item__meta {
-  font-size: 0.75rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  border: 1px solid rgba(0,0,0,0.06);
-  background: var(--theme-primary-50);
-}
-
-.mm-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.mm-badge {
-  display: inline-block;
-  padding: 2px 10px;
-  border-radius: 999px;
-  background: var(--theme-secondary);
-  color: white;
-  font-size: 0.75rem;
-}
-
-.mm-badge--success {
-  background: var(--theme-primary);
-}
-
-.mm-badge--muted {
-  background: var(--theme-primary-200);
-  color: var(--theme-text);
-}
-
-.mm-actions-inline .btn {
-  margin-right: 6px;
-}
-
-.mm-detail {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-  padding: 8px 0;
-}
-
-.mm-detail__row {
-  display: flex;
-  justify-content: space-between;
-}
-
-/* Skeleton loader */
-.mm-skeleton-list {
-  display: grid;
-  gap: 10px;
-  margin: 8px 0 12px;
-}
-
-.mm-skeleton-item {
-  display: grid;
-  grid-template-columns: 44px 1.2fr 0.8fr 0.6fr 1fr 120px 140px;
-  align-items: center;
-  gap: 10px;
-  padding: 8px;
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  border: 1px solid rgba(0,0,0,0.05);
-}
-
-.mm-skel {
-  height: 12px;
-  border-radius: 6px;
-  background: linear-gradient(
-    90deg,
-    rgba(0,0,0,0.05) 25%,
-    rgba(0,0,0,0.08) 37%,
-    rgba(0,0,0,0.05) 63%
-  );
-  background-size: 400% 100%;
-  animation: mm-shimmer 1.2s ease-in-out infinite;
-}
-
-.mm-skel--icon { width: 24px; height: 24px; border-radius: 50%; }
-.mm-skel--title { width: 60%; height: 14px; }
-.mm-skel--meta { width: 40%; }
-.mm-skel--chip { width: 80px; }
-.mm-skel--link { width: 60%; }
-.mm-skel--badge { width: 70px; }
-.mm-skel--actions { width: 60px; }
-
-@keyframes mm-shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: 0 0; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .mm-skel { animation: none; }
-}
-
-/* Row mount animation */
-.mm-row { transition: transform 220ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), background 200ms ease; }
-.mm-row.ng-enter { transform: translateY(8px); opacity: 0.001; }
-.mm-row.ng-enter-active { transform: translateY(0); opacity: 1; }
-
-/* Responsive layouts */
-@media (max-width: 1024px) {
-  .mm-col--id, .mm-col--seq, .mm-col--submenu { display: none; }
-}
-
-@media (max-width: 768px) {
-  .mm-col--link { display: none; }
-  .mm-item__meta { display: none; }
-  .mm-actions-inline .btn { padding: 0 6px; }
-}
-
-@media (max-width: 640px) {
-  .mm-col--action { width: 100px; }
-  .mm-col--status { width: 110px; }
-  .mm-hero { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
-  .mm-hero__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
-}
-
-/* Sticky toolbar */
-.mm-toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  margin-bottom: 8px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0,0,0,0.05);
-  border-radius: var(--theme-border-radius);
-  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
-}
-
-.mm-search {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid rgba(0,0,0,0.08);
-  padding: 6px 8px;
-  border-radius: 999px;
-  background: var(--theme-background);
-}
-
-.mm-search__input {
-  border: none;
-  outline: none;
-  background: transparent;
-  min-width: 220px;
-}
-
-.mm-select {
-  border-radius: 999px;
-  padding: 6px 10px;
-  border: 1px solid rgba(0,0,0,0.08);
-  background: var(--theme-background);
-}
-
-@media (max-width: 640px) {
-  .mm-search__input { min-width: 140px; }
-}
-
-.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; }
-
-/* Card view */
-.mm-cards {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } }
-
-.mm-card-item {
-  background: var(--theme-surface);
-  border: 1px solid rgba(0,0,0,0.06);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.mm-card-item__header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  background: linear-gradient(135deg, var(--theme-primary-50), transparent);
-  min-height: 48px;
-}
-
-.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; }
-.mm-card-item__title { font-weight: 700; flex: 1 1 auto; }
-.mm-card-item__badge { margin-left: auto; }
-
-/* Prevent overlaps and long text issues */
-.mm-ellipsis {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mm-card-item__title {
-  max-width: 60%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media (max-width: 640px) {
-  .mm-card-item__title { max-width: 54%; }
-}
-
-.mm-card-item__body {
-  padding: 10px 12px;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0,1fr));
-  gap: 8px;
-}
-
-@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } }
-
-.mm-kv { display: flex; justify-content: space-between; }
-.mm-kv span { color: var(--theme-text-secondary); }
-
-.mm-card-item__footer {
-  padding: 10px 12px;
-  display: flex;
-  gap: 8px;
-  border-top: 1px solid rgba(0,0,0,0.06);
-}
-
-/* Theme the card footer buttons */
-.mm-card-item__footer .btn {
-  border-radius: 10px;
-}
-
-.mm-card-item__footer .btn.btn-outline {
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-  background: transparent;
-}
-
-.mm-card-item__footer .btn.btn-outline:hover { background: rgba(0,0,0,0.04); }
-
-.mm-card-item__footer .btn:not(.btn-outline) {
-  background: var(--theme-primary);
-  color: #fff;
-}
-
-.mm-card-item__footer .btn:not(.btn-outline):hover {
-  filter: brightness(0.98);
-}
-
-/* View toggle buttons */
-.mm-view-toggle .btn.btn-primary { background: var(--theme-primary); color: #fff; }
-.mm-view-toggle .btn:not(.btn-primary) { background: var(--theme-primary-100); color: var(--theme-text); }
-
-.mm-stats {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.75rem;
-  margin: 0.75rem 0 1rem;
-}
-
-.mm-stat {
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  padding: 0.75rem 1rem;
-  border: 1px solid rgba(0,0,0,0.05);
-}
-
-.mm-stat__value {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--theme-primary);
-}
-
-.mm-stat__label {
-  font-size: 0.75rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-empty {
-  text-align: center;
-  padding: 1.5rem 0.5rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-empty clr-icon {
-  width: 32px;
-  height: 32px;
-  color: var(--theme-secondary);
-  margin-bottom: 0.25rem;
-}
-
-.mm-empty__title {
-  font-weight: 600;
-}
-

frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts

@@ -9,7 +9,6 @@ import { CsvService } from 'src/app/services/csv.service';
 import { ExcelService } from 'src/app/services/excel.service';
 import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
 @Component({
   selector: 'app-menumaintance',
   templateUrl: './menumaintance.component.html',
@@ -32,10 +31,6 @@ export class MenumaintanceComponent implements OnInit {
   showdata;
   error;
   submitted = false;
-  // Quick filter UI state (no API/logic changes)
-  filterText = '';
-  statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All';
-  viewMode: 'cards' | 'table' = 'cards';
   constructor(private menuservice: MenumaintanceService,
     private toastr: ToastrService,
     private excel: ExcelService,
@@ -44,14 +39,9 @@ export class MenumaintanceComponent implements OnInit {
     private menuGroupService: MenuGroupService,
     private csvService: CsvService,
     private translate: TranslateService,
-    private router: Router,
+    private router: Router,) { }
-    private themeService: ThemeService) { }
 
   ngOnInit(): void {
-    // Ensure theme variables are applied; subscription keeps this view reactive to theme changes
-    this.themeService.currentTheme$.subscribe(() => {
-      // Theme applied globally via CSS variables; no additional handling needed here
-    });
     this.showdata = this.menuGroupService.getdata();
     console.log(this.showdata);
     this.mcreate = this.showdata.mcreate;
@@ -79,71 +69,6 @@ export class MenumaintanceComponent implements OnInit {
     this.getdata();
   }
 
-  // Stats for UI (template-safe, no inline arrow functions)
-  get totalMenus(): number {
-    return this.menus ? this.menus.length : 0;
-  }
-
-  get enabledMenusCount(): number {
-    const list: any[] = (this.menus as unknown as any[]) || [];
-    return list.filter(menu => menu && menu.status === 'Enable').length;
-  }
-
-  get disabledMenusCount(): number {
-    const list: any[] = (this.menus as unknown as any[]) || [];
-    return list.filter(menu => menu && menu.status === 'Disable').length;
-  }
-
-  // Filtered list for view
-  get filteredMenus(): Rn_Main_Menu[] {
-    const items: any[] = (this.menus as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    const status = this.statusFilter;
-    return items.filter(m => {
-      const matchText = !text || (
-        (m.menuItemDesc || '').toLowerCase().includes(text) ||
-        (m.moduleName || '').toLowerCase().includes(text) ||
-        (m.main_menu_action_name || '').toLowerCase().includes(text)
-      );
-      const matchStatus = !status || status === 'All' || m.status === status;
-      return matchText && matchStatus;
-    });
-  }
-
-  setViewMode(mode: 'cards' | 'table') {
-    this.viewMode = mode;
-  }
-
-  // Resolve a safe Clarity icon shape for a menu item
-  getIconShape(menu: any): string {
-    const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim();
-    const name = raw.toLowerCase();
-    const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a';
-    if (invalid) {
-      return 'file'; // universal fallback icon
-    }
-    // Optional alias normalization
-    const aliasMap: Record<string, string> = {
-      'home': 'home',
-      'dashboard': 'dashboard',
-      'menu': 'list',
-      'list': 'list',
-      'link': 'link',
-      'application': 'application',
-      'applications': 'applications',
-      'module': 'application',
-      'settings': 'cog',
-      'config': 'cog',
-      'user': 'user',
-      'users': 'users',
-      'folder': 'folder',
-      'file': 'file',
-      'tag': 'tag',
-      'bookmark': 'bookmark'
-    };
-    return aliasMap[name] ?? name;
-  }
-
   switchLanguage(language: string) {
     this.translate.use(language);
   }

frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html

@@ -1,5 +1,5 @@
 
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>Security</a></li>
   <li><a href="javascript://">Menu Maintenance</a></li>
@@ -9,50 +9,22 @@
 <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br> -->
 
 
-<section class="mm-hero">
+<div class="clr-row" style="margin-top: 15px;">
-  <div class="mm-hero__content">
+  <div class="clr-col-8">
-    <div class="mm-hero__icon"><clr-icon shape="organization"></clr-icon></div>
+    <h3 style="font-weight: 300;display: inline;">Sub-Menu Maintenance </h3>
-    <div>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br>
-      <h2 class="mm-hero__title">Sub-Menu Maintenance</h2>
-      <p class="mm-hero__subtitle">Sub Menu</p>
-    </div>
-  </div>
-  <div class="mm-hero__actions">
-    <button id="add" class="btn btn-primary mm-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="mm-btn-text">Add</span>
-    </button>
-  </div>
-</section>
 
-<div class="mm-toolbar">
-  <div class="mm-toolbar__left">
-    <div class="mm-search">
-      <clr-icon shape="search"></clr-icon>
-      <input class="mm-search__input" type="text" placeholder="Search" [(ngModel)]="filterText" />
 </div>
-  </div>
+  <div class="clr-col-4" style="text-align: right;">
-  <div class="mm-toolbar__right">
+    <button id="add" class="btn btn-primary" (click)="goToAdd()">
-    <select class="mm-select" [(ngModel)]="statusFilter">
+      <clr-icon shape="plus"></clr-icon>ADD New
-      <option value="All">All</option>
-      <option value="Enable">Enabled</option>
-      <option value="Disable">Disabled</option>
-    </select>
-    <div class="mm-view-toggle">
-      <button class="btn btn-sm" [class.btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-        <clr-icon shape="view-cards"></clr-icon>
-      </button>
-      <button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
-        <clr-icon shape="table"></clr-icon>
     </button>
   </div>
 </div>
-</div>
 
 
 
-  <div class="mm-card" *ngIf="viewMode==='table'">
+  <clr-datagrid [clrDgLoading]="loading"  >
-  <clr-datagrid class="mm-grid mm-grid--modern" [clrDgLoading]="loading">
     <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
 
     <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
@@ -77,29 +49,19 @@
       Status
     </ng-container></clr-dg-column>
 
-    <clr-dg-row class="mm-row" *clrDgItems="let user of filteredSubMenus;let i = index" [clrDgItem]="user">
+    <clr-dg-row *clrDgItems="let user of sub;let i = index" [clrDgItem]="user">
       <clr-dg-cell >{{i+1}}</clr-dg-cell>
-      <clr-dg-cell>
+      <clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
-        <div class="mm-item">
-          <!-- <div class="mm-item__avatar"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
-          <div class="mm-item__text">
-            <div class="mm-item__title">{{user.menuItemDesc}}</div>
-            <div class="mm-item__meta">ID: {{ user.menuId || '—' }} | Seq: {{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : '—' }}</div>
-          </div>
-        </div>
-      </clr-dg-cell>
       <clr-dg-cell >{{user.menuId}}</clr-dg-cell>
       <clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
       <clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
       <clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
       <clr-dg-cell >{{user.status}} </clr-dg-cell>
 
-      <clr-dg-cell class="mm-cell mm-cell--action">
+      <clr-dg-action-overflow>
-        <div class="mm-actions-inline">
+        <button class="action-item" (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
-          <button class="btn btn-sm btn-outline mm-btn-edit" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon></button>
+        <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
-          <button class="btn btn-sm btn-outline mm-btn-delete" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon></button>
+                </clr-dg-action-overflow>
-        </div>
-      </clr-dg-cell>
 
                 <clr-dg-row-detail *clrIfExpanded >
                   <table class="table">
@@ -111,7 +73,7 @@
                 </clr-dg-row-detail>
         </clr-dg-row>
 
-    <clr-dg-footer class="mm-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
         <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
@@ -119,31 +81,8 @@
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
-  </div>
 
-  <div *ngIf="viewMode==='cards'">
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
-    <div class="mm-cards">
-      <div class="mm-card-item" *ngFor="let user of filteredSubMenus; let i = index">
-        <div class="mm-card-item__header">
-          <!-- <div class="mm-card-item__icon"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
-          <div class="mm-card-item__title">{{user.menuItemDesc}}</div>
-          <div class="mm-card-item__badge" [class.mm-badge--success]="user.status==='Enable'" [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</div>
-        </div>
-        <div class="mm-card-item__body">
-          <div class="mm-kv"><span>ID</span><strong>{{ user.menuId || '—' }}</strong></div>
-          <div class="mm-kv"><span>Sequence</span><strong>{{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : '—' }}</strong></div>
-          <div class="mm-kv"><span>Module</span><strong class="mm-ellipsis">{{ user.moduleName || '—' }}</strong></div>
-          <div class="mm-kv mm-link"><clr-icon shape="link"></clr-icon><strong class="mm-ellipsis">{{ user.main_menu_action_name || '—' }}</strong></div>
-        </div>
-        <div class="mm-card-item__footer">
-          <button class="btn btn-sm btn-outline mm-btn-edit" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon> Edit</button>
-          <button class="btn btn-sm btn-outline mm-btn-delete" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon> Delete</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Add Sub Menu Maintenance</h3>
     <div class="modal-body">
           <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
@@ -262,7 +201,7 @@
   </clr-modal>
 
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Update Sub Menu Maintenance</h3>
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
       <h2 class="heading">{{rowSelected.menuItemId}}</h2>

frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss

@@ -1,88 +1,3 @@
-@import '../../../../../styles/design-tokens';
-
-.mm-breadcrumb { margin-bottom: 0.75rem; }
-.mm-modal .modal-body { background: var(--theme-surface); }
-.mm-modal .modal-title { font-weight: 600; }
-.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
-@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } }
-.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); }
-.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; }
-.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); }
-.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
-.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; }
-.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); }
-.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
-
-.mm-hero {
-  display: flex; justify-content: space-between; align-items: center;
-  background: var(--theme-glass-bg); backdrop-filter: blur(12px);
-  border: 1px solid var(--theme-glass-border);
-  border-radius: calc(var(--theme-border-radius) + 4px);
-  padding: 1rem 1.25rem; margin-bottom: 0.75rem; box-shadow: var(--theme-glass-shadow);
-}
-.mm-hero__content { display: flex; align-items: center; gap: 0.75rem; }
-.mm-hero__icon clr-icon { width: 28px; height: 28px; color: var(--theme-primary); }
-.mm-hero__title { font-size: 1.25rem; margin: 0; }
-.mm-hero__subtitle { margin: 0; font-size: 0.875rem; color: var(--theme-text-secondary); }
-.mm-hero__actions .btn + .btn { margin-left: 0.5rem; }
-
-.mm-btn-primary { border-radius: var(--theme-border-radius); background: var(--theme-primary); color: #fff; }
-.mm-btn-text { margin-left: 0.35rem; }
-
-.mm-toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--theme-border-radius); box-shadow: 0 1px 0 rgba(0,0,0,0.03); }
-.mm-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(0,0,0,0.08); padding: 6px 8px; border-radius: 999px; background: var(--theme-background); }
-.mm-search__input { border: none; outline: none; background: transparent; min-width: 220px; }
-.mm-select { border-radius: 999px; padding: 6px 10px; border: 1px solid rgba(0,0,0,0.08); background: var(--theme-background); }
-.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; }
-
-.mm-card { background: var(--theme-glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--theme-glass-border); border-radius: var(--theme-border-radius); padding: 0.25rem; }
-.mm-grid { background: var(--theme-surface); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); }
-.mm-grid--modern .datagrid-header { background: linear-gradient(135deg, var(--theme-primary-50), transparent); }
-.mm-grid-footer { border-top: 1px solid rgba(0,0,0,0.06); }
-.mm-row:hover { background: var(--theme-primary-50); }
-.mm-item { display: flex; align-items: center; gap: 0.75rem; }
-.mm-item__avatar clr-icon { width: 18px; height: 18px; color: var(--theme-accent); }
-.mm-item__title { font-weight: 600; }
-.mm-item__meta { font-size: 0.75rem; color: var(--theme-text-secondary); }
-.mm-actions-inline .btn { margin-right: 6px; }
-.mm-actions-inline .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); }
-.mm-actions-inline .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); }
-.mm-actions-inline .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; }
-.mm-actions-inline .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); }
-
-.mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
-@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } .mm-search__input { min-width: 140px; } }
-.mm-card-item { background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); overflow: hidden; display: flex; flex-direction: column; }
-.mm-card-item__header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, var(--theme-primary-50), transparent); }
-.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; }
-.mm-card-item__title { font-weight: 700; flex: 1 1 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.mm-card-item__badge { margin-left: auto; }
-.mm-card-item__body { padding: 10px 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
-@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } }
-.mm-kv { display: flex; justify-content: space-between; }
-.mm-kv span { color: var(--theme-text-secondary); }
-.mm-card-item__footer { padding: 10px 12px; display: flex; gap: 8px; border-top: 1px solid rgba(0,0,0,0.06); }
-.mm-card-item__footer .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); }
-.mm-card-item__footer .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); }
-.mm-card-item__footer .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; }
-.mm-card-item__footer .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); }
-.mm-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--theme-secondary); color: #fff; font-size: 0.75rem; }
-.mm-badge--success { background: var(--theme-primary); }
-.mm-badge--muted { background: var(--theme-primary-200); color: var(--theme-text); }
-
-/* Modals */
-.mm-modal .modal-body { background: var(--theme-surface); }
-.mm-modal .modal-title { font-weight: 600; }
-.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
-@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } }
-.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); }
-.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; }
-.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); }
-.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
-.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; }
-.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); }
-.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
 input[type=text],[type=date],[type=password],[type=number] {
   width: 100%;
   padding: 15px 20px;

frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ThemeService } from 'src/app/services/theme.service';
 import { MenumaintanceService } from '../../../../services/admin/menumaintance.service';
 import { Rn_Main_Menu } from '../../../../models/builder/Rn_Main_Menu';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -31,22 +30,13 @@ export class SubmenuComponent implements OnInit {
   mainid;
   submitted = false;
   public entryForm: FormGroup;
-  // UI filter/view state
-  filterText = '';
-  statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All';
-  viewMode: 'cards' | 'table' = 'cards';
-
   constructor(private menuservice: MenumaintanceService,
     private toastr: ToastrService,
     private _fb: FormBuilder,
     private route: ActivatedRoute,
-    private router: Router,
+    private router: Router,) { }
-    private themeService: ThemeService) { }
 
   ngOnInit(): void {
-    this.themeService.currentTheme$.subscribe(() => {
-      // Theme CSS variables applied globally
-    });
     this.id = this.route.snapshot.params["id"];
     console.log("project mainmenu with id = ", this.id);
     this.getById(this.id);
@@ -65,34 +55,6 @@ export class SubmenuComponent implements OnInit {
 
     // this.getdata();
   }
-
-  // Derived/filtered list for view
-  get filteredSubMenus(): any[] {
-    const items: any[] = (this.sub as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    const status = this.statusFilter;
-    return items.filter(m => {
-      const matchText = !text || (
-        (m.menuItemDesc || '').toLowerCase().includes(text) ||
-        (m.moduleName || '').toLowerCase().includes(text) ||
-        (m.main_menu_action_name || '').toLowerCase().includes(text)
-      );
-      const matchStatus = !status || status === 'All' || m.status === status;
-      return matchText && matchStatus;
-    });
-  }
-
-  setViewMode(mode: 'cards' | 'table') { this.viewMode = mode; }
-
-  // Resolve a safe icon
-  getIconShape(menu: any): string {
-    const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim();
-    const name = raw.toLowerCase();
-    const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a';
-    if (invalid) return 'file';
-    const alias: Record<string, string> = { application:'application', applications:'applications', settings:'cog', config:'cog', user:'user', users:'users', folder:'folder', file:'file', tag:'tag', bookmark:'bookmark', home:'home', dashboard:'dashboard', menu:'list', list:'list', link:'link', module:'application' };
-    return alias[name] ?? name;
-  }
   getById(id: any) {
     this.menuservice.getbyid(id).subscribe((data) => {
       this.sub = data;

frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html

@@ -1,71 +1,47 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
   <li><a href="javascript://">{{'USER_GROUP_MAINTENANCE' | translate}}</a></li>
+
 </ol>
 
-<section class="ug-hero">
+
-  <div class="ug-hero__content">
+<div class="dg-wrapper">
-    <div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
+  <div class="clr-row">
-    <div>
+    <div class="clr-col">
-      <h2 class="ug-hero__title">{{'USER_GROUP_MAINTENANCE' | translate}}</h2>
+      <h3>{{'USER_GROUP_MAINTENANCE' | translate}}</h3>
-      <p class="ug-hero__subtitle">{{ 'SECURITY' | translate }}</p>
   </div>
-  </div>
+    <div class="clr-col" style="text-align: right;">
-  <div class="ug-hero__actions">
+      <div class="btn-group">
-    <button class="ug-btn ug-btn-secondary" (click)="downloadFiles()">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
-      <clr-icon shape="download"></clr-icon>
-      <span class="ug-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
-    </button>
-    <button class="ug-btn ug-btn-secondary" (click)="csvImport()">
-      <clr-icon shape="import"></clr-icon>
-      <span class="ug-btn-text">{{ 'IMPORT' | translate }}</span>
-    </button>
-    <button class="ug-btn ug-btn-secondary" (click)="onExport()">
-      <clr-icon shape="export"></clr-icon>
-      <span class="ug-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
-    </button>
-    <button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="ug-btn-text">{{ 'ADD' | translate }}</span>
-    </button>
 
       </div>
-</section>
+      <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
-
+        <button class="btn btn-outline" (click)="onExport()">
-<div class="ug-toolbar">
+          <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
-  <div class="ug-toolbar__left">
-    <div class="ug-search">
-      <clr-icon shape="search"></clr-icon>
-      <input class="ug-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
-    </div>
-  </div>
-  <div class="ug-toolbar__right">
-    <div class="ug-view-toggle">
-      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-        <clr-icon shape="view-cards"></clr-icon>
         </button>
-      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+        <button id="add"  class="btn btn-primary" *ngIf="mcreate == 'true'" (click)="goToAdd()">
-        <clr-icon shape="table"></clr-icon>
+          <clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
       </button>
     </div>
   </div>
-</div>
 
-<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
+
-  <clr-dg-placeholder>
+
-    <ng-template #loadingSpinner>
+
-      <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
+
-    </ng-template>
+
-    <div *ngIf="error;else loadingSpinner">{{error}}</div>
+
-  </clr-dg-placeholder>
+  <clr-datagrid [clrDgLoading]="loading">
+    <clr-dg-placeholder> <ng-template #loadingSpinner><clr-spinner>{{'LOADING' | translate}} ... </clr-spinner></ng-template>
+      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
 
       <clr-dg-column [clrDgField]="'usrGrp'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
           {{'USERGROUP_NO' | translate}}
         </ng-container>
       </clr-dg-column>
-
       <clr-dg-column [clrDgField]="'groupName'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
           {{'GROUP_NAME' | translate}}
@@ -92,32 +68,19 @@
         </ng-container>
       </clr-dg-column>
 
-  <clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
+    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
       <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell>
       <clr-dg-cell>{{user.groupName}}</clr-dg-cell>
       <clr-dg-cell >{{user.groupDesc}}</clr-dg-cell>
       <clr-dg-cell>{{user.groupLevel}}</clr-dg-cell>
-    <clr-dg-cell>
+      <clr-dg-cell>{{user.status}}</clr-dg-cell>
-      <span class="ug-status-badge" [class.ug-status-enabled]="user.status === 'E'"
+      <!-- <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell> -->
-        [class.ug-status-disabled]="user.status === 'D'">
-        {{user.status === 'E' ? 'Enabled' : 'Disabled'}}
-      </span>
-    </clr-dg-cell>
       <clr-dg-cell>{{user.updateDateFormated}}</clr-dg-cell>
 
       <clr-dg-action-overflow>
-      <!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user)">
+
-        <clr-icon shape="edit"></clr-icon>
+        <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user)">   {{'EDIT' | translate}}</button>
-        {{'EDIT' | translate}}
+        <button class="action-item" (click)="onDelete(user)">{{'DELETE'|translate}}<clr-icon shape="trash" class="is-error"></clr-icon></button>
-      </button> -->
-      <button class="ug-action-item" (click)="goToEdit(user)">
-        <clr-icon shape="edit"></clr-icon>
-        {{'EDIT' | translate}}
-      </button>
-      <button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon>
-        {{'DELETE'|translate}}
-      </button>
       </clr-dg-action-overflow>
 
       <clr-dg-row-detail *clrIfExpanded>
@@ -126,11 +89,13 @@
             <td class="td-title">username</td>
             <td class="td-content">{{user.groupName}}</td>
           </tr>
+
+
         </table>
       </clr-dg-row-detail>
     </clr-dg-row>
 
-  <clr-dg-footer class="ug-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
         <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
@@ -138,183 +103,122 @@
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
-
-<div class="ug-cards" *ngIf="viewMode==='cards'">
-  <div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
-    <div class="ug-card-item__header">
-      <div class="ug-card-item__icon"><clr-icon shape="users"></clr-icon></div>
-     
-      <div class="ug-card-item__title">{{user.groupName}}</div>
-      <div class="ug-card-item__badge" [class.ug-status-enabled]="user.status === 'E'"
-        [class.ug-status-disabled]="user.status === 'D'">
-        {{user.status === 'E' ? 'Enabled' : 'Disabled'}}
-      </div>
-    </div>
-    <div class="ug-card-item__body">
-      <div class="ug-kv"><span>ID</span><strong>{{user.usrGrp}}</strong></div>
-      <div class="ug-kv"><span>Desc</span><strong>{{user.groupDesc}}</strong></div>
-      <div class="ug-kv"><span>Level</span><strong>{{user.groupLevel}}</strong></div>
-      <div class="ug-kv"><span>Updated</span><strong>{{user.updateDateFormated}}</strong></div>
-    </div>
-    <div class="ug-card-item__footer">
-      <!-- <button class="ug-btn ug-btn-sm ug-btn-outline" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user)">
-        <clr-icon shape="edit"></clr-icon> Edit
-      </button> -->
-      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="goToEdit(user)">
-        <clr-icon shape="edit"></clr-icon> Edit
-      </button>
-      <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon> Delete
-      </button>
-    </div>
-  </div>
 </div>
 
 <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
   <h3 class="modal-title">Add User Group Maintenance</h3>
   <div class="modal-body">
         <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
-
+      <div class="clr-row">
-      <div class="ug-form-group">
+        <div class="clr-col-sm-12">
-        <label for="groupName" class="ug-form-label">User Group<span class="required-field">*</span></label>
+          <label for="name">User Group<span class="required-field">*</span></label>
-        <input type="text" id="groupName" class="ug-form-input" formControlName="groupName">
+         <input type="text" class="clr-input" formControlName="groupName">
-        <div *ngIf="submitted && entryForm.controls.groupName.errors" class="ug-form-error">
+         <div *ngIf="submitted && entryForm.controls.groupName.errors" class="error_mess">
-          <div *ngIf="submitted && entryForm.controls.groupName.errors.required">*This field is Required</div>
+          <div *ngIf="submitted && entryForm.controls.groupName.errors.required" class="error_mess">*This field is Required</div>
       </div>
         </div>
-
+        <div class="clr-col-sm-12">
-      <div class="ug-form-group">
+          <label for="name">Description<span class="required-field">*</span></label>
-        <label for="groupDesc" class="ug-form-label">Description<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" formControlName="groupDesc">
-        <input type="text" id="groupDesc" class="ug-form-input" formControlName="groupDesc">
+         <div *ngIf="submitted && entryForm.controls.groupDesc.errors" class="error_mess">
-        <div *ngIf="submitted && entryForm.controls.groupDesc.errors" class="ug-form-error">
+          <div *ngIf="submitted && entryForm.controls.groupDesc.errors.required" class="error_mess">*This field is Required</div>
-          <div *ngIf="submitted && entryForm.controls.groupDesc.errors.required">*This field is Required</div>
       </div>
         </div>
-
+        <div class="clr-col-sm-12">
-      <div class="ug-form-group">
+          <label for="tags">Status<span class="required-field">*</span></label>
-        <label for="status" class="ug-form-label">Status<span class="required-field">*</span></label>
+          <select  id="" formControlName="status">
-        <select id="status" class="ug-form-select" formControlName="status">
-          <option value="">Select Status</option>
             <option value="E">Enable</option>
-          <option value="D">Disable</option>
+              <option  value="D">Disable</option></select>
+              <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
+            </div>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">Group Level<span class="required-field">*</span></label>
+            <select  id="" formControlName="groupLevel">
+              <option >10</option>
+              <option >20</option>
+             <option >30</option>
+             <option >40</option>
+             <option>50</option>
             </select>
-        <div *ngIf="submitted && entryForm.controls.status.errors" class="ug-form-error">
+            <div *ngIf="submitted && entryForm.controls.groupLevel.errors" class="error_mess">
-          <div *ngIf="submitted && entryForm.controls.status.errors.required">*This field is Required</div>
+              <div *ngIf="submitted && entryForm.controls.groupLevel.errors.required" class="error_mess">*This field is Required</div>
           </div>
             </div>
-
-      <div class="ug-form-group">
-        <label for="groupLevel" class="ug-form-label">Group Level<span class="required-field">*</span></label>
-        <select id="groupLevel" class="ug-form-select" formControlName="groupLevel">
-          <option value="">Select Level</option>
-          <option value="10">10</option>
-          <option value="20">20</option>
-          <option value="30">30</option>
-          <option value="40">40</option>
-          <option value="50">50</option>
-        </select>
-        <div *ngIf="submitted && entryForm.controls.groupLevel.errors" class="ug-form-error">
-          <div *ngIf="submitted && entryForm.controls.groupLevel.errors.required">*This field is Required</div>
       </div>
-      </div>
+      <br>
-
       <div class="modal-footer">
-        <button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
-        <button type="submit" class="ug-btn ug-btn-primary">ADD</button>
+        <button type="submit" class="btn btn-primary" >ADD</button>
         </div>
 </form>
   </div>
+
 </clr-modal>
 
 <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
   <h3 class="modal-title">Update User Group Maintenance</h3>
+
+
   <div class="modal-body" *ngIf="rowSelected.usrGrp">
-
+    <h2 class="heading">{{rowSelected.usrGrp}}</h2>
-    <div class="ug-form-group">
+        <form (ngSubmit)="onUpdate(rowSelected.usrGrp)">
-      <label for="editUsrGrp" class="ug-form-label">User Group ID</label>
+      <div class="clr-row">
-      <input type="text" id="editUsrGrp" class="ug-form-input" [(ngModel)]="rowSelected.usrGrp" name="usrGrp" disabled>
+        <div class="clr-col-sm-12">
+          <label for="name">User Group<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" [(ngModel)]="rowSelected.groupName" name="groupName">
         </div>
-
+        <div class="clr-col-sm-12">
-    <div class="ug-form-group">
+          <label for="name">Description<span class="required-field">*</span></label>
-      <label for="editGroupName" class="ug-form-label">User Group<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" [(ngModel)]="rowSelected.groupDesc" name="groupDesc">
-      <input type="text" id="editGroupName" class="ug-form-input" [(ngModel)]="rowSelected.groupName" name="groupName">
         </div>
-
+        <div class="clr-col-sm-12">
-    <div class="ug-form-group">
+          <label for="tags">Status<span class="required-field">*</span></label>
-      <label for="editGroupDesc" class="ug-form-label">Description<span class="required-field">*</span></label>
+          <select  id="" [(ngModel)]="rowSelected.status" name="status">
-      <input type="text" id="editGroupDesc" class="ug-form-input" [(ngModel)]="rowSelected.groupDesc" name="groupDesc">
-    </div>
-
-    <div class="ug-form-group">
-      <label for="editStatus" class="ug-form-label">Status<span class="required-field">*</span></label>
-      <select id="editStatus" class="ug-form-select" [(ngModel)]="rowSelected.status" name="status">
             <option value="E">Enable</option>
-        <option value="D">Disable</option>
+              <option  value="D">Disable</option></select>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">Group Level<span class="required-field">*</span></label>
+            <select  id="" [(ngModel)]="rowSelected.groupLevel" name="groupLevel">
+              <option >10</option>
+              <option >20</option>
+             <option >30</option>
+             <option >40</option>
+             <option>50</option>
             </select>
             </div>
-
-    <div class="ug-form-group">
-      <label for="editGroupLevel" class="ug-form-label">Group Level<span class="required-field">*</span></label>
-      <select id="editGroupLevel" class="ug-form-select" [(ngModel)]="rowSelected.groupLevel" name="groupLevel">
-        <option value="10">10</option>
-        <option value="20">20</option>
-        <option value="30">30</option>
-        <option value="40">40</option>
-        <option value="50">50</option>
-      </select>
       </div>
-
+      <br>
       <div class="modal-footer">
-      <button type="button" class="ug-btn ug-btn-outline" (click)="modaledit = false">Cancel</button>
+        <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
-      <button type="submit" (click)="onUpdate(rowSelected.usrGrp)" class="ug-btn ug-btn-primary">Update</button>
+        <button type="submit" class="btn btn-primary" >Update</button>
         </div>
+</form>
   </div>
-</clr-modal>
 
+</clr-modal>
 <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
   <div class="modal-body" *ngIf="rowSelected.usrGrp">
-    <div class="ug-delete-header">
+    <h1 class="delete">Are You Sure Want to delete?</h1>
-      <div class="ug-delete-icon">
+    <h2 class="heading">{{rowSelected.usrGrp}}</h2>
-        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-      </div>
-      <h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
-      <p class="ug-delete-subtitle">This action cannot be undone</p>
-    </div>
-
-    <div class="ug-delete-details">
-      <div class="ug-delete-detail-item">
-        <span class="ug-delete-detail-label">User Group ID:</span>
-        <span class="ug-delete-detail-value">{{rowSelected.usrGrp}}</span>
-      </div>
-      <div class="ug-delete-detail-item">
-        <span class="ug-delete-detail-label">Group Name:</span>
-        <span class="ug-delete-detail-value">{{rowSelected.groupName}}</span>
-      </div>
-      <div class="ug-delete-detail-item">
-        <span class="ug-delete-detail-label">Description:</span>
-        <span class="ug-delete-detail-value">{{rowSelected.groupDesc}}</span>
-      </div>
-      
-    </div>
-
     <div class="modal-footer">
-      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
-      <button type="submit" (click)="delete(rowSelected.usrGrp)" class="ug-btn ug-btn-error">Delete</button>
+    <button type="submit" (click)="delete(rowSelected.usrGrp)" class="btn btn-primary" >Delete</button>
     </div>
   </div>
 </clr-modal>
 
+
+
 <clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
   <h3 class="modal-title">Import File</h3>
   <div class="modal-body">
-    <div class="ug-form-group">
+      <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-      <label class="ug-form-label">Select CSV File</label>
-      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-    </div>
   </div>
   <div class="modal-footer">
-    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
+      <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
-    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
   </div>
 </clr-modal>

frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss

@@ -1,748 +1,8 @@
-@import '../../../../../styles.scss';
+@import '../../../../../styles1.scss';
-
+input.ng-invalid.ng-touched {
-// Import design tokens
+  border-color: red;
-@import '../../../../../styles/design-tokens';
-
-// User Group Maintenance Styles
-.ug-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    gap: 12px;
-  }
-}
-
-.ug-btn-text {
-  margin-left: 8px;
-}
-
-// Modern Button Styles using ThemeService
-.ug-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.ug-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.ug-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.ug-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.ug-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.ug-btn-secondary {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(0, 0, 0, 0.1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-background);
-      border-color: rgba(0, 0, 0, 0.2);
-      transform: translateY(-1px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.ug-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.ug-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.ug-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.ug-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    gap: 8px;
-  }
 }
 
-.ug-search {
+.error_mess {
-  position: relative;
+  color: red;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
-    width: 100%;
-    padding: 12px 12px 12px 40px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 200ms ease-out;
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-    }
-  }
-}
-
-.ug-view-toggle {
-  display: flex;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  overflow: hidden;
-
-  .ug-btn {
-    border-radius: 0;
-    border: none;
-    background: var(--theme-surface);
-    color: var(--theme-text-secondary);
-
-    &:first-child {
-      border-right: 1px solid #d1d5db;
-    }
-
-    &.ug-btn-primary {
-      background: var(--theme-primary);
-      color: white;
-    }
-  }
-}
-
-// Modern Table Styles
-.ug-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.ug-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-// Modern Card Styles - More beautiful design
-.ug-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
-}
-
-.ug-card-item {
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: var(--theme-border-radius); // Using theme variable
-  box-shadow: var(--theme-shadow); // Using theme variable
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 16px;
-    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
-    min-height: 60px;
-  }
-
-  &__icon {
-    clr-icon {
-      width: 24px;
-      height: 24px;
-      color: var(--theme-primary);
-    }
-  }
-
-  &__title {
-    font-weight: 700;
-    flex: 1 1 auto;
-    font-size: 18px;
-    color: var(--theme-text);
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__badge {
-    margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 12px;
-    font-size: 12px;
-    font-weight: 600;
-    border-radius: 9999px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  &__body {
-    padding: 16px;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-  }
-
-  &__footer {
-    padding: 16px;
-    display: flex;
-    gap: 8px;
-    border-top: 1px solid rgba(0, 0, 0, 0.06);
-    background: var(--theme-background);
-  }
-}
-
-.ug-kv {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  
-  span {
-    color: var(--theme-text-secondary);
-  }
-
-  strong {
-    color: var(--theme-text);
-    font-weight: 500;
-    text-align: right;
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-// Theme the card footer buttons
-.ug-card-item__footer .ug-btn {
-  border-radius: 10px;
-  flex: 1;
-  justify-content: center;
-}
-
-.ug-card-item__footer .ug-btn.ug-btn-outline {
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-  background: transparent;
-  
-  &:hover {
-    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-    border-color: var(--theme-secondary);
-    color: var(--theme-secondary);
-  }
-}
-
-.ug-card-item__footer .ug-btn.ug-btn-error {
-  background: var(--theme-error, #ef4444);
-  color: #fff;
-  border-color: var(--theme-error, #ef4444);
-  
-  &:hover {
-    background: var(--theme-error-dark, #dc2626);
-    border-color: var(--theme-error-dark, #dc2626);
-    transform: translateY(-2px);
-  }
-}
-
-// Table view action buttons
-.ug-action-item {
-  @extend .ug-btn;
-  @extend .ug-btn-ghost;
-  @extend .ug-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
-  text-align: left;
-  
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-  
-  &.ug-btn-error {
-    color: var(--theme-error, #ef4444);
-    
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-  }
-}
-
-// Ensure action overflow is visible
-::ng-deep .datagrid-action-overflow {
-  button.action-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-align: left;
-    padding: 8px 12px;
-    
-    clr-icon {
-      margin-right: 8px;
-    }
-  }
-}
-
-// Status Badges
-.ug-status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  border-radius: 9999px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.ug-status-enabled {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
-  color: #10b981;
-}
-
-.ug-status-disabled {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
-  color: #ef4444;
-}
-
-// Form Styles
-.ug-form-group {
-  margin-bottom: 20px;
-}
-
-.ug-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.ug-form-input, .ug-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: #ef4444;
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.ug-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.ug-form-error {
-  color: #ef4444;
-  font-size: 12px;
-  margin-top: 6px;
-  font-weight: 500;
-}
-
-.required-field {
-  color: #ef4444;
-  margin-left: 4px;
-}
-
-.ug-file-input {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  
-  &::file-selector-button {
-    @extend .ug-btn;
-    @extend .ug-btn-secondary;
-    margin-right: 12px;
-    padding: 8px 16px;
-    border: none;
-  }
-}
-
-// Delete Modal Styles
-.ug-delete-header {
-  text-align: center;
-  padding: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.ug-delete-icon {
-  color: #ef4444;
-  margin-bottom: 16px;
-}
-
-.ug-delete-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.ug-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.ug-delete-details {
-  padding: 24px;
-}
-
-.ug-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.ug-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.ug-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.delete {
-  color: #ef4444;
-  text-align: center;
-  margin-bottom: 16px;
-  font-weight: 600;
-  font-size: 20px;
-}
-
-.heading {
-  text-align: center;
-  margin-bottom: 24px;
-  color: var(--theme-text);
-  font-weight: 600;
-}
-
-// Modal Header
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-// Modal Body
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-// Modal Footer
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .ug-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    &__actions {
-      width: 100%;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-  }
-  
-  .ug-toolbar {
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .ug-search {
-    max-width: 100%;
-  }
-  
-  .ug-cards {
-    grid-template-columns: 1fr;
-  }
-  
-  .ug-card-item {
-    &__header {
-      flex-direction: column;
-      text-align: center;
-      
-      &__icon {
-        margin-right: 0;
-        margin-bottom: 16px;
-      }
-    }
-    
-    &__footer {
-      justify-content: center;
-    }
-  }
 }

frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ExcelService } from '../../../../services/excel.service';
@@ -8,15 +8,12 @@ import { ToastrService } from 'ngx-toastr';
 import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
 import { CsvService } from 'src/app/services/csv.service';
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
-
 @Component({
   selector: 'app-usergrpmaintenance',
   templateUrl: './usergrpmaintenance.component.html',
   styleUrls: ['./usergrpmaintenance.component.scss']
 })
-export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
+export class UsergrpmaintenanceComponent implements OnInit {
   loading = false;
   public entryForm: FormGroup;
   givendata;
@@ -26,13 +23,10 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
   modaledit=false;
   modaldelete=false;
   rowSelected :any= {};
-  mcreate: string | boolean = false;
+  mcreate;
-  medit: string | boolean = false;
+  medit;
-  showdata: any;
+  showdata;
   submitted=false;
-  filterText: string = '';
-  viewMode: 'table' | 'cards' = 'cards';
-  private themeSubscription: Subscription;
 
   constructor(
     private excel: ExcelService,
@@ -44,32 +38,21 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
     private mainservice:UsergrpmaintainceService,
     private csvService: CsvService,
     private translate: TranslateService,
-    private themeService: ThemeService,
   ) { }
-  
   switchLanguage(language: string) {
     this.translate.use(language);
   }
-  
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.showdata = this.menuGroupService.getdata();
-    console.log('Showdata:', this.showdata);
+    console.log(this.showdata);
-    if (this.showdata) {
+      this.mcreate=this.showdata.mcreate;
-      // Handle both string and boolean values
+      console.log(this.mcreate);
-      this.mcreate = this.showdata.mcreate === 'true' || this.showdata.mcreate === true ? true : false;
+      this.medit=this.showdata.medit
-      this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false;
+      console.log(this.medit);
-      console.log('MCREATE:', this.mcreate);
-      console.log('MEDIT:', this.medit);
-    }
 
     this.mainservice.getAll().subscribe((data) => {
-      console.log('Data received:', data);
+      console.log(data);
-      this.givendata = data || [];
+      this.givendata = data;
       if(this.givendata.length==0){
         this.error="No data Available";
         console.log(this.error)
@@ -89,30 +72,6 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
 
       });
   }
-  
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
-  get totalGroups(): number {
-    const list: any[] = (this.givendata as unknown as any[]) || [];
-    return list.length;
-  }
-
-  
-  get filteredGroups(): any[] {
-    const items: any[] = (this.givendata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    return items.filter(g => (
-      (g?.groupName || '').toLowerCase().includes(text) ||
-      (g?.groupDesc || '').toLowerCase().includes(text)
-    ));
-  }
-
-  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
   onExport() {
     this.excel.exportAsExcelFile(this.givendata, 'user_',
       moment().format('YYYYMMDD_HHmmss'))
@@ -122,8 +81,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
     //this.router.navigate(["../usermaintanceadd"],{relativeTo:this.route});
     }
   goToEdit(row){
-    console.log('Edit clicked for row:', row);
+    this.rowSelected = row;
-    this.rowSelected = {...row}; // Create a copy to avoid reference issues
     this.modaledit=true;
         //this.router.navigate(["../usermaintanceedit/"+ id], { relativeTo: this.route });
       }
@@ -177,8 +135,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
       //  }
      }
      onDelete(row) {
-      console.log('Delete clicked for row:', row);
+      this.rowSelected = row;
-      this.rowSelected = {...row}; // Create a copy to avoid reference issues
        this.modaldelete=true;
     }
 

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html

@@ -1,108 +1,80 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
   <li><a href="javascript://">{{'USER_MAINTENANCE'| translate}}</a></li>
+
 </ol>
 
-<section class="um-hero">
-  <div class="um-hero__content">
-    <div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
-    <div>
-      <h2 class="um-hero__title">{{'USER_MAINTENANCE'| translate}}</h2>
-      <p class="um-hero__subtitle">{{ 'SECURITY' | translate }}</p>
-    </div>
-  </div>
-  <div class="um-hero__actions">
-    <button class="um-btn um-btn-secondary" (click)="downloadFiles()">
-      <clr-icon shape="download"></clr-icon>
-      <span class="um-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
-    </button>
-    <button class="um-btn um-btn-secondary" (click)="csvImport()">
-      <clr-icon shape="import"></clr-icon>
-      <span class="um-btn-text">{{ 'IMPORT' | translate }}</span>
-    </button>
-    <button class="um-btn um-btn-secondary" (click)="onExport()">
-      <clr-icon shape="export"></clr-icon>
-      <span class="um-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
-    </button>
-    <button id="add" class="um-btn um-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="um-btn-text">{{ 'ADD' | translate }}</span>
-    </button>
-    <!-- <button id="add" class="um-btn um-btn-primary" *ngIf="mcreate == 'true' || mcreate == true" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="um-btn-text">{{ 'ADD' | translate }}</span>
-    </button> -->
-  </div>
-</section>
 
-<div class="um-toolbar">
+<div class="dg-wrapper">
-  <div class="um-toolbar__left">
+  <div class="clr-row">
-    <div class="um-search">
+    <div class="clr-col">
-      <clr-icon shape="search"></clr-icon>
+      <h3>{{'USER_MAINTENANCE'| translate}} </h3>
-      <input class="um-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
   </div>
+    <div class="clr-col" style="text-align: right;">
+      <div class="btn-group">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
+
     </div>
-  <div class="um-toolbar__right">
+    <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
-    <div class="um-view-toggle">
+      <button class="btn btn-outline" (click)="onExport()">
-      <button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
+        <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
-        <clr-icon shape="view-cards"></clr-icon>
       </button>
-      <button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+      <button id="add"  class="btn btn-primary" *ngIf="mcreate == 'true'" (click)="goToAdd()">
-        <clr-icon shape="table"></clr-icon>
+        <clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
       </button>
     </div>
   </div>
-</div>
 
-<clr-datagrid class="um-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
+
+
+
+
+
+
+  <clr-datagrid [clrDgLoading]="loading">
     <clr-dg-placeholder >
-    <ng-template #loadingSpinner>
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
-      <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
-    </ng-template>
       <div *ngIf="error;else loadingSpinner">{{error}}</div>
     </clr-dg-placeholder>
+    <!-- <clr-dg-placeholder *ngIf="!loading1;" > <clr-spinner>not</clr-spinner></clr-dg-placeholder>
+    <ng-template #other_content style="text-align: center;">Data Not found...</ng-template> -->
 
-  <clr-dg-column [clrDgField]="'userId'">
+    <clr-dg-column [clrDgField]="'userId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
+      User Id
-      {{'USER_ID' | translate}}
+    </ng-container></clr-dg-column>
-    </ng-container>
+    <!-- <clr-dg-column [clrDgField]="'username'" style="width: 300px;"> <ng-container *clrDgHideableColumn="{hidden: false}">
-  </clr-dg-column>
+      User Name
-  <clr-dg-column [clrDgField]="'fullName'" style="width: 200px;">
+    </ng-container></clr-dg-column> -->
-    <ng-container *clrDgHideableColumn="{hidden: false}">
+    <clr-dg-column [clrDgField]="'fullName'" style="width: 200px;"><ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'FULL_NAME' | translate}}
+      Full Name
-    </ng-container>
+      </ng-container></clr-dg-column >
-  </clr-dg-column>
+    <clr-dg-column [clrDgField]="'email'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-  <clr-dg-column [clrDgField]="'email'">
+      Email
-    <ng-container *clrDgHideableColumn="{hidden: false}">
+    </ng-container></clr-dg-column>
-      {{'EMAIL' | translate}}
+    <clr-dg-column [clrDgField]="'usrGrpName'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-    </ng-container>
+      User Group Name
-  </clr-dg-column>
+    </ng-container></clr-dg-column>
-  <clr-dg-column [clrDgField]="'usrGrpName'">
+    <!-- <clr-dg-column [clrDgField]="'customerNumer'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Customer Number
-      {{'USER_GROUP_NAME' | translate}}
+    </ng-container></clr-dg-column> -->
-    </ng-container>
-  </clr-dg-column>
 
-  <clr-dg-row *clrDgItems="let user of filteredUsers;let i = index" [clrDgItem]="user">
+
+
+    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
       <clr-dg-cell>{{user.userId}}</clr-dg-cell>
+      <!-- <clr-dg-cell>{{user.username}}</clr-dg-cell> -->
       <clr-dg-cell >{{user.fullName}}</clr-dg-cell>
       <clr-dg-cell>{{user.email}}</clr-dg-cell>
       <clr-dg-cell>{{user.usrGrpName}}</clr-dg-cell>
+      <!-- <clr-dg-cell>{{user.customerNumer}}</clr-dg-cell> -->
+
 
       <clr-dg-action-overflow>
-      <!-- <button class="um-action-item" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user.userId)">
+
-        <clr-icon shape="edit"></clr-icon>
+        <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user.userId)">Edit</button>
-        {{'EDIT' | translate}}
+        <button class="action-item" (click)="onDelete(user)">Delete<cds-icon shape="trash" class="is-error"></cds-icon></button>
-      </button> -->
-      <button class="um-action-item" (click)="goToEdit(user.userId)">
-        <clr-icon shape="edit"></clr-icon>
-        {{'EDIT' | translate}}
-      </button>
-      <button class="um-action-item um-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon>
-        {{'DELETE'|translate}}
-      </button>
             </clr-dg-action-overflow>
 
       <clr-dg-row-detail *clrIfExpanded>
@@ -111,11 +83,13 @@
             <td class="td-title">username</td>
             <td class="td-content">{{user.username}}</td>
           </tr>
+
+
         </table>
       </clr-dg-row-detail>
     </clr-dg-row>
 
-  <clr-dg-footer class="um-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
         <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
@@ -123,80 +97,28 @@
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
+</div>
 
-<div class="um-cards" *ngIf="viewMode==='cards'">
-  <div class="um-card-item" *ngFor="let user of filteredUsers; let i = index">
-    <div class="um-card-item__header">
-      <div class="um-card-item__icon"><clr-icon shape="user"></clr-icon></div>
-      <div class="um-card-item__title">{{user.fullName}}</div>
-      <div class="um-card-item__badge">ID: {{user.userId}}</div>
-    </div>
-    <div class="um-card-item__body">
-      <div class="um-kv"><span>{{'EMAIL' | translate}}</span><strong>{{user.email}}</strong></div>
-      <div class="um-kv"><span>{{'GROUP' | translate}}</span><strong>{{user.usrGrpName}}</strong></div>
-    </div>
-    <div class="um-card-item__footer">
-      <!-- <button class="um-btn um-btn-sm um-btn-outline" *ngIf="medit == 'true' || medit == true"
-        (click)="goToEdit(user.userId)">
-        <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-      </button> -->
-
-      <button class="um-btn um-btn-sm um-btn-outline" (click)="goToEdit(user.userId)">
-        <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-      </button>
-      <button class="um-btn um-btn-sm um-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
-      </button>
-    </div>
-  </div>
-</div>
 
 <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
   <div class="modal-body" *ngIf="rowSelected.userId">
-    <div class="um-delete-header">
+    <h1 class="delete">Are You Sure Want to delete?</h1>
-      <div class="um-delete-icon">
+    <h2 class="heading">{{rowSelected.userId}}</h2>
-        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-      </div>
-      <h1 class="um-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?</h1>
-      <p class="um-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
-    </div>
-
-    <div class="um-delete-details">
-      <div class="um-delete-detail-item">
-        <span class="um-delete-detail-label">{{'USER_ID' | translate}}:</span>
-        <span class="um-delete-detail-value">{{rowSelected.userId}}</span>
-      </div>
-      <div class="um-delete-detail-item">
-        <span class="um-delete-detail-label">{{'FULL_NAME' | translate}}:</span>
-        <span class="um-delete-detail-value">{{rowSelected.fullName}}</span>
-      </div>
-      <div class="um-delete-detail-item">
-        <span class="um-delete-detail-label">{{'EMAIL' | translate}}:</span>
-        <span class="um-delete-detail-value">{{rowSelected.email}}</span>
-      </div>
-    </div>
-
     <div class="modal-footer">
-      <button type="button" class="um-btn um-btn-outline" (click)="modaldelete = false">{{'CANCEL' |
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
-        translate}}</button>
+    <button type="submit" (click)="delete(rowSelected.userId)" class="btn btn-primary" >Delete</button>
-      <button type="submit" (click)="delete(rowSelected.userId)" class="um-btn um-btn-error">{{'DELETE' |
-        translate}}</button>
     </div>
   </div>
 </clr-modal>
 
+
 <clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
-  <h3 class="modal-title">{{'IMPORT_FILE' | translate}}</h3>
+  <h3 class="modal-title">Import File</h3>
   <div class="modal-body">
-    <div class="um-form-group">
+      <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-      <label class="um-form-label">{{'SELECT_CSV_FILE' | translate}}</label>
-      <input type="file" name="file" class="um-file-input" (change)="selectFile($event)"
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-    </div>
   </div>
   <div class="modal-footer">
-    <button class="um-btn um-btn-outline" type="button" (click)="modalCsv = false">{{'CANCEL' | translate}}</button>
+      <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
-    <button class="um-btn um-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">{{'IMPORT' |
-      translate}}</button>
   </div>
 </clr-modal>

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss

@@ -1,656 +1,4 @@
-@import '../../../../../styles.scss';
-
-// Import design tokens
-@import '../../../../../styles/design-tokens';
-
 .delete,.heading{
   text-align: center;
   color: red;
 }
-
-// Modern User Maintenance Styles
-.um-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    gap: 12px;
-  }
-}
-
-.um-btn-text {
-  margin-left: 8px;
-}
-
-// Modern Button Styles using ThemeService
-.um-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.um-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.um-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.um-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.um-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.um-btn-secondary {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(0, 0, 0, 0.1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-background);
-      border-color: rgba(0, 0, 0, 0.2);
-      transform: translateY(-1px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.um-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.um-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    gap: 8px;
-  }
-}
-
-.um-search {
-  position: relative;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
-    width: 100%;
-    padding: 12px 12px 12px 40px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 200ms ease-out;
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-    }
-  }
-}
-
-.um-view-toggle {
-  display: flex;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  overflow: hidden;
-
-  .um-btn {
-    border-radius: 0;
-    border: none;
-    background: var(--theme-surface);
-    color: var(--theme-text-secondary);
-
-    &:first-child {
-      border-right: 1px solid #d1d5db;
-    }
-
-    &.um-btn-primary {
-      background: var(--theme-primary);
-      color: white;
-    }
-  }
-}
-
-// Modern Table Styles
-.um-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.um-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-// Modern Card Styles - More beautiful design
-.um-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
-}
-
-.um-card-item {
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: var(--theme-border-radius); // Using theme variable
-  box-shadow: var(--theme-shadow); // Using theme variable
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 16px;
-    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
-    min-height: 60px;
-  }
-
-  &__icon {
-    clr-icon {
-      width: 24px;
-      height: 24px;
-      color: var(--theme-primary);
-    }
-  }
-
-  &__title {
-    font-weight: 700;
-    flex: 1 1 auto;
-    font-size: 18px;
-    color: var(--theme-text);
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__badge {
-    margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 12px;
-    font-size: 12px;
-    font-weight: 600;
-    border-radius: 9999px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.05) 100%);
-    color: var(--theme-secondary);
-  }
-
-  &__body {
-    padding: 16px;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-  }
-
-  &__footer {
-    padding: 16px;
-    display: flex;
-    gap: 8px;
-    border-top: 1px solid rgba(0, 0, 0, 0.06);
-    background: var(--theme-background);
-  }
-}
-
-.um-kv {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  
-  span {
-    color: var(--theme-text-secondary);
-  }
-
-  strong {
-    color: var(--theme-text);
-    font-weight: 500;
-    text-align: right;
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-// Theme the card footer buttons
-.um-card-item__footer .um-btn {
-  border-radius: 10px;
-  flex: 1;
-  justify-content: center;
-}
-
-.um-card-item__footer .um-btn.um-btn-outline {
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-  background: transparent;
-}
-
-.um-card-item__footer .um-btn.um-btn-outline:hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.um-card-item__footer .um-btn.um-btn-error {
-  background: var(--theme-error, #ef4444);
-  color: #fff;
-}
-
-.um-card-item__footer .um-btn.um-btn-error:hover {
-  background: var(--theme-error-dark, #dc2626);
-}
-
-// Action items in table
-.um-action-item {
-  @extend .um-btn;
-  @extend .um-btn-ghost;
-  @extend .um-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
-  text-align: left;
-  
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-  
-  &.um-btn-error {
-    color: var(--theme-error, #ef4444);
-    
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-  }
-}
-
-// Ensure action overflow is visible
-::ng-deep .datagrid-action-overflow {
-  button.action-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-align: left;
-    padding: 8px 12px;
-    
-    clr-icon {
-      margin-right: 8px;
-    }
-  }
-}
-
-// Delete Modal Styles
-.um-delete-header {
-  text-align: center;
-  padding: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.um-delete-icon {
-  color: #ef4444;
-  margin-bottom: 16px;
-}
-
-.um-delete-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.um-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.um-delete-details {
-  padding: 24px;
-}
-
-.um-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.um-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.um-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-// Form Styles
-.um-form-group {
-  margin-bottom: 20px;
-}
-
-.um-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.um-file-input {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  
-  &::file-selector-button {
-    @extend .um-btn;
-    @extend .um-btn-secondary;
-    margin-right: 12px;
-    padding: 8px 16px;
-    border: none;
-  }
-}
-
-// Modal Header
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-// Modal Body
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-// Modal Footer
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .um-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    &__actions {
-      width: 100%;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-  }
-  
-  .um-toolbar {
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .um-search {
-    max-width: 100%;
-  }
-  
-  .um-cards {
-    grid-template-columns: 1fr;
-  }
-  
-  .um-card-item {
-    &__header {
-      flex-direction: column;
-      text-align: center;
-      
-      &__icon {
-        margin-right: 0;
-        margin-bottom: 16px;
-      }
-    }
-    
-    &__footer {
-      justify-content: center;
-    }
-  }
-}

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ExcelService } from '../../../../services/excel.service';
@@ -8,15 +8,12 @@ import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
 import { ToastrService } from 'ngx-toastr';
 import { CsvService } from 'src/app/services/csv.service';
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
-
 @Component({
   selector: 'app-usermaintance',
   templateUrl: './usermaintance.component.html',
   styleUrls: ['./usermaintance.component.scss']
 })
-export class UsermaintanceComponent implements OnInit, OnDestroy {
+export class UsermaintanceComponent implements OnInit {
   loading = false;
   loading1=false;
   public entryForm: FormGroup;
@@ -24,18 +21,13 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
   orders;
   modalAdd= false;
   modaledit=false;
-  mcreate: string | boolean = false;
+mcreate;
-  medit: string | boolean = false;
+medit;
 mdelete;
 showdata;
 error;
 modaldelete=false;
 rowSelected :any= {};
-  // UI-only state
-  filterText: string = '';
-  viewMode: 'table' | 'cards' = 'cards';
-  private themeSubscription: Subscription;
-  
   constructor(private excel: ExcelService,
     private _fb: FormBuilder,
     private router: Router, private toastr:ToastrService,
@@ -44,41 +36,25 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
     private mainservice:UsermaintanceService,
     private csvService: CsvService,
     private translate: TranslateService,
-    private themeService: ThemeService,
     ) {this.loading1 = true;
       setTimeout(() => {
         this.loading1 = false;
       }, 1000); }
-      
       switchLanguage(language: string) {
         this.translate.use(language);
       }
-  
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.showdata = this.menuGroupService.getdata();
     console.log(this.showdata);
-    if (this.showdata) {
+      this.mcreate=this.showdata.mcreate;
-      this.mcreate = this.showdata.mcreate === 'true' || this.showdata.mcreate === true ? true : false;
       console.log(this.mcreate);
       this.mdelete=this.showdata.mdelete
       console.log(this.mdelete);
-      this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false;
+      this.medit=this.showdata.medit
       console.log(this.medit);
-    }
     this.getData();
-  }
 
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
      }
-  }
-  
   getData(){
     this.mainservice.getAll().subscribe((data) => {
       console.log(data);
@@ -103,23 +79,6 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
     });
   }
 
-  // UI helpers
-  get totalUsers(): number {
-    const list: any[] = (this.givendata as unknown as any[]) || [];
-    return list.length;
-  }
-  get filteredUsers(): any[] {
-    const items: any[] = (this.givendata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    return items.filter(u => (
-      (u?.fullName || '').toLowerCase().includes(text) ||
-      (u?.email || '').toLowerCase().includes(text) ||
-      (u?.usrGrpName || '').toLowerCase().includes(text)
-    ));
-  }
-  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
-
 
   // csv
 
@@ -170,7 +129,7 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
         this.router.navigate(["../usermaintancedit/"+ id], { relativeTo: this.route });
       }
       onDelete(row) {
-        this.rowSelected = {...row}; // Create a copy to avoid reference issues
+        this.rowSelected = row;
          this.modaldelete=true;
       }
 

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html

@@ -1,141 +1,176 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
-  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
-  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon> Security</a></li>
-  <li><a href="javascript://">User Maintenance</a></li>
-</ol>
 
-<section class="um-hero">
+    <h4 style="font-weight: 300;display: inline;"> User Maintenance</h4>
-  <div class="um-hero__content">
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Add Mode</span><br>
-    <div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
+    <hr>
-    <div>
+    <div class="main" >
-      <h2 class="um-hero__title">User Maintenance</h2>
+      <form [formGroup]="entryForm">
-      <p class="um-hero__subtitle">Add New User</p>
-    </div>
-  </div>
-</section>
 
-<div class="um-add-container">
-  <div class="um-form-card">
-    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="um-form">
         <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
+          <div class="clr-col-md-4 clr-col-sm-12">
-          <label for="first_name" class="um-form-label">First Name<span class="required-field">*</span></label>
+            <label for="name"> First Name</label>
-          <input type="text" id="first_name" class="um-form-input" formControlName="first_name">
+           <input type="text" class="clr-input" formControlName="first_name">
-          <div *ngIf="submitted && entryForm.controls.first_name.errors" class="um-error-message">
+           <div *ngIf="submitted && entryForm.controls.first_name.errors" class="error_mess">
-            <div *ngIf="submitted && entryForm.controls.first_name.errors.required">*This field is Required</div>
+            <div *ngIf="submitted && entryForm.controls.first_name.errors.required" class="error_mess">*This field is Required</div>
         </div>
           </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Last Name</label>
+           <input type="text" class="clr-input" formControlName="last_name">
+           <div *ngIf="submitted && entryForm.controls.last_name.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.last_name.errors.required" class="error_mess">*This field is Required</div>
+        </div>
+          </div>
+           <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Mobile Number</label>
+           <input type="text" class="clr-input" formControlName="mob_no" required pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+           <div *ngIf="submitted && entryForm.controls.mob_no.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.mob_no.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="submitted && entryForm.controls.mob_no.errors.pattern" class="error_mess">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.
+            </div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="last_name" class="um-form-label">Last Name<span class="required-field">*</span></label>
-          <input type="text" id="last_name" class="um-form-input" formControlName="last_name">
-          <div *ngIf="submitted && entryForm.controls.last_name.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.last_name.errors.required">*This field is Required</div>
         </div>
           </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" formControlName="new_password" minlenght="6">
+           <div *ngIf="submitted && entryForm.controls.new_password.errors" class="error_mess">
+            <div *ngIf="entryForm.controls.new_password.errors.required" class="error_mess">*Password is required</div>
+            <div *ngIf="entryForm.controls.new_password.errors.minlength" class="error_mess">* Password must be at least 6 characters</div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="mob_no" class="um-form-label">Mobile Number<span class="required-field">*</span></label>
-          <input type="text" id="mob_no" class="um-form-input" formControlName="mob_no" required pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
-          <div *ngIf="submitted && entryForm.controls.mob_no.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.mob_no.errors.required">*This field is Required</div>
-            <div *ngIf="submitted && entryForm.controls.mob_no.errors.pattern">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
         </div>
           </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Confirm New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" formControlName="confirm_password">
+           <div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="error_mess">
+            <div *ngIf="entryForm.controls.confirm_password.errors.required" class="error_mess">* Confirm Password is required</div>
+            <div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator" class="error_mess">* Password and Confirm Password must be match.</div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="email" class="um-form-label">Email<span class="required-field">*</span></label>
-          <input type="text" id="email" class="um-form-input" formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
-          <div *ngIf="submitted && entryForm.controls.email.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.email.errors.required">*This field is Required</div>
-            <div *ngIf="submitted && entryForm.controls.email.errors.pattern">*Email must be a valid email address</div>
         </div>
           </div>
-        
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+            <label for="name">Business Title</label>
-          <label for="new_password" class="um-form-label">New Password<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="title">
-          <input type="password" id="new_password" class="um-form-input" formControlName="new_password" minlength="6">
-          <div *ngIf="submitted && entryForm.controls.new_password.errors" class="um-error-message">
-            <div *ngIf="entryForm.controls.new_password.errors.required">*Password is required</div>
-            <div *ngIf="entryForm.controls.new_password.errors.minlength">* Password must be at least 6 characters</div>
           </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> Short Name</label>
+           <input type="text" class="clr-input" formControlName="shortName">
           </div>
-        
+          <div class="clr-col-md-4 clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+            <label for="name">Full Name</label>
-          <label for="confirm_password" class="um-form-label">Confirm New Password<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="fullName">
-          <input type="password" id="confirm_password" class="um-form-input" formControlName="confirm_password">
+          </div> -->
-          <div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="um-error-message">
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
-            <div *ngIf="entryForm.controls.confirm_password.errors.required">* Confirm Password is required</div>
+            <label for="tags">Status</label>
-            <div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator">* Password and Confirm Password must be match.</div>
+            <select  id="" formControlName="status">
+              <option value="E">Enable</option>
+              <option  value="A">Active</option></select>
+            </div> -->
+            <!-- <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Position Code</label>
+             <input type="text" class="clr-input" formControlName="positionCodeString" [(ngModel)]="userobjpos.positionCode" name="positionCode" >
             </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotoposition()">V</button>
             </div>
-        
+            <div class="clr-col-md-3 clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+              <label for="name">Department Code</label>
-          <label for="usrGrpId" class="um-form-label">User Group<span class="required-field">*</span></label>
+             <input type="text" class="clr-input" formControlName="departmentCodeString" [(ngModel)]="userobjdept.departmentCode" name="departmentCode">
-          <select id="usrGrpId" class="um-form-select" formControlName="usrGrpId">
+            </div>
-            <option value="">Select User Group</option>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
-            <option *ngFor="let group of usergrpdata" [value]="group.usrGrp">{{group.groupName}}</option>
+              <button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
+            </div> -->
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="tags">User Group</label>
+              <select  id="tags" formControlName="usrGrpId" >
+                <option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
                 </select>
-          <div *ngIf="submitted && entryForm.controls.usrGrpId.errors" class="um-error-message">
+                <div *ngIf="submitted && entryForm.controls.usrGrpId.errors" class="error_mess">
-            <div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required">*This field is Required</div>
+                  <div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required" class="error_mess">*This field is Required</div>
               </div>
               </div>
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Customer Id</label>
+               <input type="text" class="clr-input" formControlName="customerId" name="customerCode">
+              </div> -->
+              <!-- <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+                <button style="margin-right: 5px;" >V</button>
+              </div> -->
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Email</label>
+               <input type="text" class="clr-input" formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
+               <div *ngIf="submitted && entryForm.controls.email.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.email.errors.required" class="error_mess">*This field is Required</div>
+                <!-- <div *ngIf="submitted && entryForm.controls.email.errors.email" class="error_mess">*Email must be a valid email address</div> -->
+                <div *ngIf="submitted && entryForm.controls.email.errors.pattern" class="error_mess">*Email must be a valid email address</div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
+            </div>
-          <label for="accesstype" class="um-form-label">Access Type<span class="required-field">*</span></label>
+              </div>
-          <select id="accesstype" class="um-form-select" formControlName="accesstype">
+              <div class="clr-col-md-4 clr-col-sm-12">
-            <option value="">Select Access Type</option>
+                <label for="tags">Access Type</label>
-            <option *ngFor="let access of accessdata" [value]="access.name">{{access.name}}</option>
+                <select  name="usrGrpId" formControlName="accesstype">
+                  <option *ngFor="let sub of accessdata" [value]="sub.name" [selected]="true">{{sub.name}}</option>
                  </select>
-          <div *ngIf="submitted && entryForm.controls.accesstype.errors" class="um-error-message">
+                 <div *ngIf="submitted && entryForm.controls.accesstype.errors" class="error_mess">
-            <div *ngIf="submitted && entryForm.controls.accesstype.errors.required">*This field is Required</div>
+                  <div *ngIf="submitted && entryForm.controls.accesstype.errors.required" class="error_mess">*This field is Required</div>
-          </div>
               </div>
                 </div>
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Notification</label>
+                <select  id="" formControlName="notification">
+                  <option value="N" >NO</option>
+                  <option value="Y">YES</option></select>
+                </div> -->
 
-      <div class="um-form-actions">
-        <button type="button" class="um-btn um-btn-outline" (click)="goback()">
-          <clr-icon shape="times"></clr-icon>
-          <span>Cancel</span>
-        </button>
-        <button type="submit" class="um-btn um-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>Add User</span>
-        </button>
                    </div>
+                   <!-- <div class="clr-row">
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created By</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created On</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated By</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated On</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                  </div> -->
                   </form>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="goback()">Cancel</button>
+      <button type="button"  class="btn btn-primary" (click)="onSubmit()">Add</button>
       </div>
     </div>
 
-<!-- Customer Modal -->
+
     <clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
       <h3 class="modal-title"><b>Select From List:</b></h3>
       <div class="modal-body">
         <div class="clr-row">
           <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
            </div>
           </div>
 
          <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             No
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Customer Code
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerCode'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Customer Id
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+
           <clr-dg-column [clrDgField]="'customerName'">
             <ng-container *clrDgHideableColumn="{hidden: false}">
               Customer Name
@@ -144,14 +179,14 @@
 
           <clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
             <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getcustID(user.customerId)" class="um-clickable-cell">{{user.customerCode}}</clr-dg-cell>
+            <clr-dg-cell (click)="getcustID(user.customerId)" style="color: rgb(108, 108, 194);" >{{user.customerCode}}</clr-dg-cell>
             <clr-dg-cell >{{user.customerId}}</clr-dg-cell>
             <clr-dg-cell>{{user.customerName}}</clr-dg-cell>
 
             <clr-dg-row-detail *clrIfExpanded>
               <table class="table">
                 <tr>
-              <td class="td-title">No</td>
+                  <td class="td-title">NO</td>
                   <td class="td-content">{{user.id}}</td>
                 </tr>
                 <tr>
@@ -163,7 +198,7 @@
                   <td class="td-content">{{user.customerId}} </td>
                 </tr>
                 <tr>
-              <td class="td-title">Customer Name</td>
+                  <td class="td-title"> Customer Name<td>
                   <td class="td-content">{{user.customerName}}</td>
                 </tr>
               </table>
@@ -181,39 +216,36 @@
       </div>
     </clr-modal>
 
-<!-- Department Modal -->
     <clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
       <h3 class="modal-title"><b>Select From List:</b></h3>
       <div class="modal-body">
         <div class="clr-row">
           <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
            </div>
           </div>
 
+
          <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             No
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Department Code
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
 
           <clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
             <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getdepid(user.departmentCode)" class="um-clickable-cell">{{user.departmentCode}}</clr-dg-cell>
+            <clr-dg-cell (click)="getdepid(user.departmentCode)" style="color: rgb(108, 108, 194);" >{{user.departmentCode}}</clr-dg-cell>
+
+
+
 
             <clr-dg-row-detail *clrIfExpanded>
               <table class="table">
                 <tr>
-              <td class="td-title">No</td>
+                  <td class="td-title">NO</td>
                   <td class="td-content">{{user.id}}</td>
                 </tr>
                </table>
@@ -228,42 +260,43 @@
             </clr-dg-pagination>
           </clr-dg-footer>
         </clr-datagrid>
+
+
+
+
       </div>
     </clr-modal>
 
-<!-- Position Modal -->
     <clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
       <h3 class="modal-title"><b>Select From List:</b></h3>
       <div class="modal-body">
         <div class="clr-row">
           <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
            </div>
           </div>
 
+
          <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             No
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Position Code
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
 
           <clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
             <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getposid(user.positionCode)" class="um-clickable-cell">{{user.positionCode}}</clr-dg-cell>
+            <clr-dg-cell (click)="getposid(user.positionCode)" style="color: rgb(108, 108, 194);" >{{user.positionCode}}</clr-dg-cell>
+
+
+
 
             <clr-dg-row-detail *clrIfExpanded>
               <table class="table">
                 <tr>
-              <td class="td-title">No</td>
+                  <td class="td-title">NO</td>
                   <td class="td-content">{{user.id}}</td>
                 </tr>
                </table>
@@ -278,5 +311,9 @@
             </clr-dg-pagination>
           </clr-dg-footer>
         </clr-datagrid>
+
+
+
+
       </div>
     </clr-modal>

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss

@@ -1,6 +1,4 @@
 @import '../../../../../styles1.scss';
-@import '../../../../../styles/_design-tokens.scss';
-
 input.ng-invalid.ng-touched {
   border-color: red;
 }
@@ -8,383 +6,3 @@ input.ng-invalid.ng-touched {
 .error_mess {
   color: red;
 }
-
-// User Maintenance Add Styles
-.um-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-}
-
-.um-add-container {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-}
-
-.um-form-card {
-  background: var(--theme-surface);
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.um-form {
-  .clr-row {
-    margin: 0 -12px;
-  }
-  
-  .clr-col-md-6,
-  .clr-col-sm-12 {
-    padding: 0 12px;
-    margin-bottom: 20px;
-  }
-}
-
-.um-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.um-form-input,
-.um-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: #ef4444;
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.um-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.um-error-message {
-  color: #ef4444;
-  font-size: 12px;
-  margin-top: 6px;
-  font-weight: 500;
-}
-
-.required-field {
-  color: #ef4444;
-  margin-left: 4px;
-}
-
-.um-form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-// Modern Button Styles using ThemeService
-.um-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.um-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.um-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.um-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.um-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.um-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.um-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.um-clickable-cell {
-  color: var(--theme-primary);
-  cursor: pointer;
-  transition: all 200ms ease-out;
-
-  &:hover {
-    text-decoration: underline;
-    transform: translateY(-1px);
-  }
-}
-
-// Modal Styles
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Data Grid Styles
-.um-datagrid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .um-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-  }
-  
-  .um-form-actions {
-    flex-direction: column;
-  }
-  
-  .um-btn {
-    width: 100%;
-  }
-}

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts

@@ -4,9 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
 import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
 import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
-import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-usermaintanceadd',
@@ -40,27 +37,15 @@ export class UsermaintanceaddComponent implements OnInit {
   accessdata;
   error;
   submitted=false;
-  private themeSubscription: Subscription;
 
   constructor( private _fb: FormBuilder,
     private mainservice:UsermaintanceService,
     private router: Router,private accesstype:AccesstypeService,
     private route: ActivatedRoute,
-    private usergrpservice: UsergrpmaintainceService,
+    private usergrpservice: UsergrpmaintainceService
-    private translate: TranslateService,
-    private themeService: ThemeService,
     ) { }
 
-  switchLanguage(language: string) {
-    this.translate.use(language);
-  }
-  
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.entryForm = this._fb.group({
       first_name :['',[Validators.required]],
       last_name:['',[Validators.required]],
@@ -96,13 +81,6 @@ export class UsermaintanceaddComponent implements OnInit {
       this.usergrp();
       this.getdata();
   }
-  
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
   getdata(){
     this.accesstype.getAll().subscribe(resp => {
       this.accessdata = resp;

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html

@@ -1,108 +1,206 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
-  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
-  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon> Security</a></li>
-  <li><a href="javascript://">User Maintenance</a></li>
-</ol>
 
-<section class="um-hero">
+    <h4 style="font-weight: 300;display: inline;"> User Maintenance</h4>
-  <div class="um-hero__content">
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Edit Mode</span><br>
-    <div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
+    <hr>
-    <div>
+    <div class="main" >
-      <h2 class="um-hero__title">User Maintenance</h2>
+      <form *ngIf="data1">
-      <p class="um-hero__subtitle">Edit User</p>
-    </div>
-  </div>
-</section>
-
-<div class="um-edit-container">
-  <div class="um-form-card">
-    <form *ngIf="data1" (ngSubmit)="update()" class="um-form">
         <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
+          <div class="clr-col-md-4 clr-col-sm-12">
-          <label for="first_name" class="um-form-label">First Name<span class="required-field">*</span></label>
+            <label for="name"> First Name</label>
-          <input type="text" id="first_name" class="um-form-input" name="first_name" [(ngModel)]="data1.fullName">
+           <input type="text" class="clr-input" name="first_name" [(ngModel)]="data1.fullName" >
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Last Name</label>
+           <input type="text" class="clr-input" name="last_name" [(ngModel)]="data1.last_name">
+          </div>
+           <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Mobile Number</label>
+           <input type="text" class="clr-input" name="mob_no" [(ngModel)]="data1.mob_no">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" name="new_password" [(ngModel)]="data1.userPassw">
           </div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
-          <label for="last_name" class="um-form-label">Last Name<span class="required-field">*</span></label>
+            <label for="name">Business Title</label>
-          <input type="text" id="last_name" class="um-form-input" name="last_name" [(ngModel)]="data1.last_name">
+           <input type="text" class="clr-input" formControlName="title">
           </div>
-
+          <div class="clr-col-md-4 clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+            <label for="name"> Short Name</label>
-          <label for="mob_no" class="um-form-label">Mobile Number<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="shortName">
-          <input type="text" id="mob_no" class="um-form-input" name="mob_no" [(ngModel)]="data1.mob_no">
           </div>
-
+          <div class="clr-col-md-4 clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+            <label for="name">Full Name</label>
-          <label for="email" class="um-form-label">Email<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="fullName">
-          <input type="text" id="email" class="um-form-input" name="email" [(ngModel)]="data1.email">
+          </div> -->
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="tags">Status</label>
+            <select  id="" formControlName="status">
+              <option value="E">Enable</option>
+              <option  value="A">Active</option></select>
+            </div> -->
+            <!-- <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Position Code</label>
+             <input type="text" class="clr-input" formControlName="positionCodeString" [(ngModel)]="userobjpos.positionCode" name="positionCode" >
             </div>
-
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
-        <div class="clr-col-md-6 clr-col-sm-12">
+              <button style="margin-right: 5px;" (click)="gotoposition()">V</button>
-          <label for="new_password" class="um-form-label">New Password<span class="required-field">*</span></label>
-          <input type="password" id="new_password" class="um-form-input" name="new_password" [(ngModel)]="data1.userPassw">
             </div>
-
+            <div class="clr-col-md-3 clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+              <label for="name">Department Code</label>
-          <label for="usrGrpId" class="um-form-label">User Group<span class="required-field">*</span></label>
+             <input type="text" class="clr-input" formControlName="departmentCodeString" [(ngModel)]="userobjdept.departmentCode" name="departmentCode">
-          <select id="usrGrpId" class="um-form-select" [(ngModel)]="data1.usrGrpId" name="usrGrpId">
+            </div>
-            <option value="">Select User Group</option>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
-            <option *ngFor="let group of usergrpdata" [value]="group.usrGrp">{{group.groupName}}</option>
+              <button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
+            </div> -->
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="tags">User Group</label>
+              <select [(ngModel)]="data1.usrGrpId" name="usrGrpId">
+                <option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
                </select>
               </div>
-
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+                <label for="name">Customer Id</label>
-          <label for="accesstype" class="um-form-label">Access Type<span class="required-field">*</span></label>
+               <input type="text" class="clr-input" formControlName="customerId" name="customerCode">
-          <select id="accesstype" class="um-form-select" [(ngModel)]="data1.accesstype" name="accesstype">
+              </div> -->
-            <option value="">Select Access Type</option>
+              <!-- <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
-            <option *ngFor="let access of accessdata" [value]="access.name">{{access.name}}</option>
+                <button style="margin-right: 5px;" >V</button>
+              </div> -->
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Email</label>
+               <input type="text" class="clr-input" name="email" [(ngModel)]="data1.email">
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Access Type</label>
+                <select [(ngModel)]="data1.accesstype" name="usrGrpId">
+                  <option *ngFor="let sub of accessdata" [value]="sub.name">{{sub.name}}</option>
                  </select>
                 </div>
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Notification</label>
+                <select  id="" formControlName="notification">
+                  <option value="N" >NO</option>
+                  <option value="Y">YES</option></select>
+                </div> -->
+
+                   </div>
+        <!-- <div class="clr-row">
+
+
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> User Name</label>
+           <input type="text" class="clr-input" [(ngModel)]="data1.username" name="username">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" [(ngModel)]="data1.userPassw" name="userPassw">
           </div>
 
-      <div class="um-form-actions">
+          <div class="clr-col-md-4 clr-col-sm-12">
-        <button type="button" class="um-btn um-btn-outline" (click)="goback()">
+            <label for="name">Business Title</label>
-          <clr-icon shape="times"></clr-icon>
+           <input type="text" class="clr-input" [(ngModel)]="data1.title" name="title">
-          <span>Close</span>
-        </button>
-        <button type="submit" class="um-btn um-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>Update User</span>
-        </button>
           </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> Short Name</label>
+           <input type="text" class="clr-input" [(ngModel)]="data1.shortName" name="shortName">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Full Name</label>
+           <input type="text" class="clr-input" [(ngModel)]="data1.fullName" name="fullName">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="tags">Status</label>
+            <select [(ngModel)]="data1.status" name="status">
+              <option value="E">Enable</option>
+              <option  value="A">Active</option></select>
+            </div>
+            <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Position Code</label>
+             <input type="text" class="clr-input" [(ngModel)]="data1.positionCodeString" [value]="userobjpos.positionCode"  name="positionCodeString">
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotoposition()">V</button>
+            </div>
+            <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Department Code</label>
+             <input type="text" class="clr-input" [(ngModel)]="data1.departmentCodeString" [value]="userobjdept.departmentCode" name="departmentCodeString">
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="tags">User Group</label>
+              <select [(ngModel)]="data1.usrGrpId" name="usrGrpId">
+                <option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
+               </select>
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Customer Id</label>
+               <input type="text" class="clr-input" [(ngModel)]="data1.customerId" [value]="userobjcust.customerCode" name="customerId">
+              </div>
+              <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+                <button style="margin-right: 5px;" (click)="gotocustomerid()">V</button>
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Email</label>
+               <input type="text" class="clr-input"[(ngModel)]="data1.email" name="email">
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Notification</label>
+                <select [(ngModel)]="data1.notification" name="notification">
+                  <option value="N" >NO</option>
+                  <option value="Y">YES</option></select>
+                </div>
+
+                   </div>
+                   <div class="clr-row">
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created By</label>
+                     <input type="text" class="clr-input" [(ngModel)]="data1.createby" name="createby">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created On</label>
+                     <input type="text" class="clr-input" [(ngModel)]="data1.createdate" name="createdate">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated By</label>
+                     <input type="text" class="clr-input" [(ngModel)]="data1.updateby" name="updateby">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated On</label>
+                     <input type="text" class="clr-input"[(ngModel)]="data1.updatedate" name="updatedate">
+                    </div>
+                  </div> -->
                   </form>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="goback()">Close</button>
+      <button type="button"  class="btn btn-primary" (click)="update()">Update</button>
       </div>
     </div>
 
-<!-- Customer Modal -->
     <clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
       <h3 class="modal-title"><b>Select From List:</b></h3>
       <div class="modal-body">
         <div class="clr-row">
           <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
            </div>
           </div>
 
          <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             No
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Customer Code
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerCode'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Customer Id
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+
           <clr-dg-column [clrDgField]="'customerName'">
             <ng-container *clrDgHideableColumn="{hidden: false}">
               Customer Name
@@ -111,14 +209,14 @@
 
           <clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
             <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getcustID(user.customerId)" class="um-clickable-cell">{{user.customerCode}}</clr-dg-cell>
+            <clr-dg-cell (click)="getcustID(user.customerId)" style="color: rgb(108, 108, 194);" >{{user.customerCode}}</clr-dg-cell>
             <clr-dg-cell >{{user.customerId}}</clr-dg-cell>
             <clr-dg-cell>{{user.customerName}}</clr-dg-cell>
 
             <clr-dg-row-detail *clrIfExpanded>
               <table class="table">
                 <tr>
-              <td class="td-title">No</td>
+                  <td class="td-title">NO</td>
                   <td class="td-content">{{user.id}}</td>
                 </tr>
                 <tr>
@@ -130,7 +228,7 @@
                   <td class="td-content">{{user.customerId}} </td>
                 </tr>
                 <tr>
-              <td class="td-title">Customer Name</td>
+                  <td class="td-title"> Customer Name<td>
                   <td class="td-content">{{user.customerName}}</td>
                 </tr>
               </table>
@@ -148,39 +246,36 @@
       </div>
     </clr-modal>
 
-<!-- Department Modal -->
     <clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
       <h3 class="modal-title"><b>Select From List:</b></h3>
       <div class="modal-body">
         <div class="clr-row">
           <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
            </div>
           </div>
 
+
          <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             No
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Department Code
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
 
           <clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
             <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getdepid(user.departmentCode)" class="um-clickable-cell">{{user.departmentCode}}</clr-dg-cell>
+            <clr-dg-cell (click)="getdepid(user.departmentCode)" style="color: rgb(108, 108, 194);" >{{user.departmentCode}}</clr-dg-cell>
+
+
+
 
             <clr-dg-row-detail *clrIfExpanded>
               <table class="table">
                 <tr>
-              <td class="td-title">No</td>
+                  <td class="td-title">NO</td>
                   <td class="td-content">{{user.id}}</td>
                 </tr>
                </table>
@@ -195,42 +290,42 @@
             </clr-dg-pagination>
           </clr-dg-footer>
         </clr-datagrid>
+
+
+
+
       </div>
     </clr-modal>
-
-<!-- Position Modal -->
     <clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
       <h3 class="modal-title"><b>Select From List:</b></h3>
       <div class="modal-body">
         <div class="clr-row">
           <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
            </div>
           </div>
 
+
          <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             No
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
             Position Code
-        </ng-container>
+          </ng-container></clr-dg-column>
-      </clr-dg-column>
 
           <clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
             <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getposid(user.positionCode)" class="um-clickable-cell">{{user.positionCode}}</clr-dg-cell>
+            <clr-dg-cell (click)="getposid(user.positionCode)" style="color: rgb(108, 108, 194);" >{{user.positionCode}}</clr-dg-cell>
+
+
+
 
             <clr-dg-row-detail *clrIfExpanded>
               <table class="table">
                 <tr>
-              <td class="td-title">No</td>
+                  <td class="td-title">NO</td>
                   <td class="td-content">{{user.id}}</td>
                 </tr>
                </table>
@@ -245,5 +340,9 @@
             </clr-dg-pagination>
           </clr-dg-footer>
         </clr-datagrid>
+
+
+
+
       </div>
     </clr-modal>

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss

@@ -1,375 +1 @@
 @import '../../../../../styles1.scss';
-@import '../../../../../styles/_design-tokens.scss';
-
-// User Maintenance Edit Styles
-.um-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-}
-
-.um-edit-container {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-}
-
-.um-form-card {
-  background: var(--theme-surface);
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.um-form {
-  .clr-row {
-    margin: 0 -12px;
-  }
-  
-  .clr-col-md-6,
-  .clr-col-sm-12 {
-    padding: 0 12px;
-    margin-bottom: 20px;
-  }
-}
-
-.um-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.um-form-input,
-.um-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: #ef4444;
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.um-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.required-field {
-  color: #ef4444;
-  margin-left: 4px;
-}
-
-.um-form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-// Modern Button Styles using ThemeService
-.um-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.um-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.um-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.um-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.um-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.um-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.um-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.um-clickable-cell {
-  color: var(--theme-primary);
-  cursor: pointer;
-  transition: all 200ms ease-out;
-
-  &:hover {
-    text-decoration: underline;
-    transform: translateY(-1px);
-  }
-}
-
-// Modal Styles
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Data Grid Styles
-.um-datagrid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .um-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-  }
-  
-  .um-form-actions {
-    flex-direction: column;
-  }
-  
-  .um-btn {
-    width: 100%;
-  }
-}

frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts

@@ -3,9 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
 import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
 import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
-import { TranslateService } from '@ngx-translate/core';
+//import { Usermain } from 'src/app/models/usermaintaince';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-usermaintanceedit',
@@ -39,26 +37,14 @@ export class UsermaintanceeditComponent implements OnInit {
   position:boolean=false;
   usergrpdata;
   error;
-  private themeSubscription: Subscription;
-
   constructor(private route:ActivatedRoute,
     private mainservice:UsermaintanceService,
     private router: Router,private accesstype:AccesstypeService,
-    private usergrpservice: UsergrpmaintainceService,
+    private usergrpservice: UsergrpmaintainceService
-    private translate: TranslateService,
+
-    private themeService: ThemeService,
    ) { }
 
-  switchLanguage(language: string) {
-    this.translate.use(language);
-  }
-
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.id = this.route.snapshot.params["id"];
     console.log("update with id = ", this.id);
     this.getById(this.id);
@@ -66,13 +52,6 @@ export class UsermaintanceeditComponent implements OnInit {
     this.usergrp();
     this.getdata();
   }
-  
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
   getdata(){
     this.accesstype.getAll().subscribe(resp => {
       this.accessdata = resp;

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.html

@@ -71,13 +71,19 @@
             Calculated Fields
           </ng-container></clr-dg-column>
 
-
+        <!-- Webhook Status Column -->
+        <clr-dg-column>
+          <ng-container *clrDgHideableColumn="{hidden: false}">
+            Webhook Status
+          </ng-container>
+        </clr-dg-column>
 
         <!-- who column -->
         <clr-dg-column>
           <ng-container *clrDgHideableColumn="{hidden: false}">
             <clr-icon shape="bars"></clr-icon> Action
-          </ng-container></clr-dg-column>
+          </ng-container>
+        </clr-dg-column>
         <!-- end -->
 
         <clr-dg-row *clrDgItems="let user of product" [clrDgItem]="user">
@@ -104,7 +110,7 @@
               <span
                 style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
                 title="{{user.url_endpoint}}" (click)="showFullUrl(user.url_endpoint)">
-                {{user.url | slice:0:30}}{{user.url_endpoint.length > 30 ? '...' : ''}}
+                {{user.url | slice:0:30}}{{user?.url_endpoint?.length > 30 ? '...' : ''}}
               </span>
               <button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url_endpoint)" title="Copy URL">
                 <clr-icon shape="copy-to-clipboard"></clr-icon>
@@ -138,11 +144,14 @@
             style="cursor: pointer; align-items: center;"><clr-icon shape="details"
               *ngIf="user.calculated_field_json"></clr-icon></clr-dg-cell>
 
-
+          <!-- Webhook Status Cell -->
+          <clr-dg-cell>
+            <span *ngIf="user.webhook_url && user.webhook_url.trim() !== ''" class="webhook-enabled">Enabled</span>
+            <span *ngIf="!user.webhook_url || user.webhook_url.trim() === ''" class="webhook-disabled">Disabled</span>
+          </clr-dg-cell>
 
           <!-- who column -->
           <clr-dg-cell>
-            <div style="display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;">
             <clr-signpost>
               <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
                   style="color: rgb(0, 130, 236);"></clr-icon></span>
@@ -157,20 +166,57 @@
             </clr-signpost>
 
             <!-- New JSON Update button -->
-              <button class="btn btn-icon btn-sm" (click)="updateJson(user.id)" title="Update JSON">
+            <button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
               <clr-icon shape="refresh"></clr-icon>
             </button>
 
             <!-- Calculated Field button -->
-              <button class="btn btn-icon btn-sm" (click)="fetchAvailableKeys(user, false)" title="Create Calculated Field">
+            <button class="btn btn-icon" (click)="fetchAvailableKeys(user)" title="Create Calculated Field">
               <clr-icon shape="calculator"></clr-icon>
             </button>
           
             <!-- Group By button -->
-              <button class="btn btn-icon btn-sm" (click)="openGroupByModal(user)" title="Group By Configuration">
+            <button class="btn btn-icon" (click)="openGroupByModal(user)" title="Group By Configuration">
               <clr-icon shape="group"></clr-icon>
             </button>
-            </div>
+          
+            <!-- Blending Keys button (only shown for blending type with non-empty blending_lakeids) -->
+            <button class="btn btn-icon" 
+                  (click)="fetchBlendingKeys(user)" 
+                  title="Configure Blending Query"
+                  *ngIf="canShowBlendingAction(user)">
+              <clr-icon shape="code"></clr-icon>
+            </button>
+          
+            <!-- Field Mapping button -->
+            <button class="btn btn-icon" 
+                  (click)="openFieldMappingModal(user)" 
+                  title="Field Mapping"
+                  *ngIf="user.url && user.sure_connect_id">
+              <clr-icon shape="map"></clr-icon>
+            </button>
+          
+            <!-- Scheduler button -->
+            <button class="btn btn-icon" 
+                  (click)="openSchedulerModal(user)" 
+                  title="Scheduler">
+              <clr-icon shape="clock"></clr-icon>
+            </button>
+            
+            <!-- Webhook toggle button -->
+            <button class="btn btn-icon" 
+                  (click)="toggleWebhook(user)" 
+                  title="Toggle Webhook">
+              <clr-icon shape="network-globe"></clr-icon>
+            </button>
+            
+            <!-- Copy Webhook URL button -->
+            <button class="btn btn-icon" 
+                  (click)="copyWebhookUrl(user.webhook_url)" 
+                  title="Copy Webhook URL"
+                  *ngIf="user.webhook_url && user.webhook_url.trim() !== ''">
+              <clr-icon shape="copy-to-clipboard"></clr-icon>
+            </button>
           </clr-dg-cell>
 
           <!-- who colmn -->
@@ -434,8 +480,32 @@
           </select>
         </div>
 
-        <!-- Add ref_datalake_id dropdown -->
+        <!-- Data Lake Type -->
         <div class="clr-col-sm-12">
+          <label>Data Lake Type</label>
+          <select class="clr-input" [(ngModel)]="rowSelected.datalake_type" name="datalake_type">
+            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
+          </select>
+        </div>
+
+        <!-- Blending Data Lakes (only show when blending type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
+          <label>Blending Data Lakes</label>
+          <div class="checkbox-container">
+            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
+              <input 
+                type="checkbox" 
+                [value]="dataLake.id" 
+                (change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
+                [checked]="isEditBlendingLakeSelected(dataLake.id)">
+              <label>{{ dataLake.name }}</label>
+            </div>
+          </div>
+          <small class="clr-subtext">Select data lakes to blend</small>
+        </div>
+
+        <!-- Reference Data Lake (only show when normal type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'normal'">
           <label>Reference Data Lake</label>
           <select class="clr-input" [(ngModel)]="rowSelected.ref_datalake_id" name="ref_datalake_id">
             <option value="">Select Data Lake</option>
@@ -563,8 +633,32 @@
           </select>
         </div>
 
-        <!-- Add ref_datalake_id dropdown -->
+        <!-- Data Lake Type -->
         <div class="clr-col-sm-12">
+          <label>Data Lake Type</label>
+          <select formControlName="datalake_type">
+            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
+          </select>
+        </div>
+
+        <!-- Blending Data Lakes (only show when blending type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
+          <label>Blending Data Lakes</label>
+          <div class="checkbox-container">
+            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
+              <input 
+                type="checkbox" 
+                [value]="dataLake.id" 
+                (change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
+                [checked]="isBlendingLakeSelected(dataLake.id)">
+              <label>{{ dataLake.name }}</label>
+            </div>
+          </div>
+          <small class="clr-subtext">Select data lakes to blend</small>
+        </div>
+
+        <!-- Reference Data Lake (only show when normal type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'normal'">
           <label>Reference Data Lake</label>
           <select formControlName="ref_datalake_id">
             <option value="">Select Data Lake</option>
@@ -916,4 +1010,200 @@
   </div>
 </clr-modal>
 
-<!-- htmlpopup -->   
+<!-- Blending Keys Panel -->
+<div class="blending-keys-panel" *ngIf="showBlendingKeys">
+  <div class="panel-header">
+    <h3>Blending Configuration</h3>
+    <button class="btn btn-icon" (click)="closeBlendingKeys()" title="Close">
+      <clr-icon shape="close"></clr-icon>
+    </button>
+  </div>
+  
+  <div class="panel-content">
+    <!-- Display keys for each blending lake -->
+    <div class="keys-container" *ngFor="let keyData of blendingKeysData">
+      <h4>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h4>
+      <div class="headers-container">
+        <span class="header-tag" *ngFor="let header of keyData.headers">{{ header }}</span>
+      </div>
+    </div>
+    
+    <!-- SQL Query Editor -->
+    <div class="sql-editor-container">
+      <h4>SQL Query Builder</h4>
+      <textarea class="clr-textarea sql-textarea" 
+                [(ngModel)]="sqlQueryText" 
+                placeholder="Enter your SQL query here using the available headers..."
+                rows="6"></textarea>
+      <div class="editor-actions">
+        <button class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Blending Configuration Modal -->
+<clr-modal [(clrModalOpen)]="showBlendingKeys" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Blending Configuration</h3>
+  <div class="modal-body">
+    <div class="blending-config-container">
+      <!-- Display keys for each blending lake -->
+      <div class="keys-section" *ngIf="blendingKeysData && blendingKeysData.length > 0">
+        <h4 class="section-title">
+          <clr-icon shape="data-field" class="section-icon"></clr-icon>
+          Available Data Sources
+        </h4>
+        <div class="keys-container">
+          <div class="key-card" *ngFor="let keyData of blendingKeysData">
+            <div class="key-header">
+              <h5>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h5>
+            </div>
+            <div class="headers-container">
+              <span class="header-tag" *ngFor="let header of keyData.headers" 
+                    (click)="insertHeaderIntoQuery(header)">
+                {{ header }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- SQL Query Editor -->
+      <div class="sql-editor-section">
+        <h4 class="section-title">
+          <clr-icon shape="code" class="section-icon"></clr-icon>
+          SQL Query Builder
+        </h4>
+        <div class="sql-editor-container">
+          <textarea class="clr-textarea sql-textarea" 
+                    [(ngModel)]="sqlQueryText" 
+                    placeholder="Enter your SQL query here using the available headers. Click on header names above to insert them into your query."
+                    rows="8"></textarea>
+          <div class="editor-hint">
+            <small class="clr-subtext">Tip: Click on header names above to automatically insert them into your query</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="closeBlendingKeys()">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
+  </div>
+</clr-modal>
+
+<!-- Field Mapping Modal -->
+<clr-modal [(clrModalOpen)]="showFieldMappingModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Field Mapping Configuration</h3>
+  <div class="modal-body">
+    <div class="field-mapping-container">
+      <div class="instructions">
+        <p>Map original field names to new names. Leave mapping blank to exclude field from mapping.</p>
+      </div>
+      
+      <div class="mapping-table-container" *ngIf="fieldMappingData && fieldMappingData.length > 0">
+        <table class="table mapping-table">
+          <thead>
+            <tr>
+              <th width="50%">Original Field Name</th>
+              <th width="50%">Mapped Field Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let field of fieldMappingData; let i = index">
+              <td class="original-field">
+                <span class="field-tag">{{ field.original }}</span>
+              </td>
+              <td>
+                <input type="text" 
+                       class="clr-input mapping-input" 
+                       [(ngModel)]="field.mapped" 
+                       placeholder="Enter new field name"
+                       (ngModelChange)="updateFieldMapping(i, $event)">
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <div class="no-data-message" *ngIf="fieldMappingData && fieldMappingData.length === 0">
+        <p>No fields available for mapping. Please check the data source configuration.</p>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="closeFieldMappingModal()">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="updateFieldMappings()" [disabled]="!fieldMappingData || fieldMappingData.length === 0">Update Field Mappings</button>
+  </div>
+</clr-modal>
+
+<!-- Scheduler Modal -->
+<clr-modal [(clrModalOpen)]="showSchedulerModal" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Job Scheduler</h3>
+  <div class="modal-body">
+    <div class="scheduler-container">
+      <div class="data-lake-info">
+        <h4>Data Lake: {{ selectedSchedulerItem?.name }}</h4>
+      </div>
+      
+      <!-- Job Information -->
+      <div class="job-info-section" *ngIf="schedulerJob">
+        <div class="job-header">
+          <h5>Job Information</h5>
+          <span class="badge" [ngClass]="getStatusBadgeClass(schedulerJob.status)">
+            {{ schedulerJob.status }}
+          </span>
+        </div>
+        
+        <div class="job-details">
+          <div class="detail-row">
+            <label>Job Name:</label>
+            <span>{{ schedulerJob.name }}</span>
+          </div>
+          <div class="detail-row">
+            <label>Job Type:</label>
+            <span>{{ schedulerJob.jobType }}</span>
+          </div>
+          <div class="detail-row">
+            <label>Description:</label>
+            <span>{{ schedulerJob.description }}</span>
+          </div>
+        </div>
+        
+        <!-- Job Actions -->
+        <div class="job-actions">
+          <button class="btn btn-warning" (click)="pauseJob()" *ngIf="schedulerJob.status === 'RUNNING'">
+            <clr-icon shape="pause"></clr-icon> Pause Job
+          </button>
+          <button class="btn btn-success" (click)="resumeJob()" *ngIf="schedulerJob.status === 'PAUSED'">
+            <clr-icon shape="play"></clr-icon> Resume Job
+          </button>
+          <button class="btn btn-danger" (click)="stopJob()" *ngIf="schedulerJob.status !== 'STOPPED'">
+            <clr-icon shape="stop"></clr-icon> Stop Job
+          </button>
+          <button class="btn btn-primary" (click)="restartJob()" *ngIf="schedulerJob.status === 'STOPPED'">
+            <clr-icon shape="play"></clr-icon> Restart Job
+          </button>
+        </div>
+      </div>
+      
+      <!-- No Job Found -->
+      <div class="no-job-section" *ngIf="schedulerJob === null">
+        <div class="no-job-message">
+          <p>No scheduled job found for this Data Lake.</p>
+          <p>Would you like to create a new job?</p>
+        </div>
+        
+        <div class="create-job-actions">
+          <button class="btn btn-primary" (click)="createJob()">
+            <clr-icon shape="plus"></clr-icon> Create Job
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="closeSchedulerModal()">Close</button>
+  </div>
+
+</clr-modal>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.scss

@@ -384,3 +384,494 @@
   border: 1px solid #ccc;
   border-radius: 4px;
 }
+
+/* Data Lake Type Styles */
+.clr-subtext {
+  display: block;
+  margin-top: 5px;
+  font-size: 12px;
+  color: #666;
+}
+
+[data-multiple] {
+  height: auto !important;
+  min-height: 80px;
+}
+
+/* Checkbox Styles for Blending Data Lakes */
+.checkbox-container {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: #f9f9f9;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.checkbox-item input[type="checkbox"] {
+  margin-right: 8px;
+}
+
+.checkbox-item label {
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+/* Blending Keys Panel Styles */
+.blending-keys-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border-top: 1px solid #ccc;
+  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
+  z-index: 1000;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+  background-color: #f5f5f5;
+}
+
+.panel-header h3 {
+  margin: 0;
+  color: #333;
+}
+
+.panel-content {
+  padding: 15px;
+}
+
+.keys-container {
+  margin-bottom: 20px;
+  padding: 10px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  background-color: #fafafa;
+}
+
+.keys-container h4 {
+  margin-top: 0;
+  color: #555;
+}
+
+.headers-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.header-tag {
+  display: inline-block;
+  background-color: #e3f2fd;
+  border: 1px solid #bbdefb;
+  border-radius: 12px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.sql-editor-container {
+  margin-top: 20px;
+}
+
+.sql-textarea {
+  width: 100%;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+}
+
+.editor-actions {
+  margin-top: 10px;
+  text-align: right;
+}
+
+/* Blending Configuration Modal Styles */
+.blending-config-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.section-title {
+  color: #0072a0;
+  font-weight: 600;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+}
+
+.section-icon {
+  margin-right: 10px;
+}
+
+.keys-section {
+  padding: 15px;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.key-card {
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 15px;
+  margin-bottom: 15px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.key-header h5 {
+  margin: 0 0 10px 0;
+  color: #333;
+  font-weight: 500;
+}
+
+.headers-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.header-tag {
+  display: inline-flex;
+  align-items: center;
+  background-color: #e3f2fd;
+  border: 1px solid #bbdefb;
+  border-radius: 20px;
+  padding: 6px 12px;
+  margin: 4px;
+  font-size: 13px;
+  font-family: monospace;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.header-tag:hover {
+  background-color: #bbdefb;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.sql-editor-section {
+  padding: 15px;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.sql-editor-container {
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 15px;
+}
+
+.sql-textarea {
+  width: 100%;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  min-height: 150px;
+}
+
+.editor-hint {
+  margin-top: 10px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}
+
+/* Field Mapping Modal Styles */
+.field-mapping-container {
+  padding: 10px;
+}
+
+.instructions {
+  background-color: #e3f2fd;
+  border: 1px solid #bbdefb;
+  border-radius: 4px;
+  padding: 15px;
+  margin-bottom: 20px;
+}
+
+.instructions p {
+  margin: 0;
+  color: #1976d2;
+}
+
+.mapping-table-container {
+  overflow-x: auto;
+}
+
+.mapping-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.mapping-table th {
+  background-color: #f5f5f5;
+  padding: 12px 15px;
+  text-align: left;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 2px solid #ddd;
+}
+
+.mapping-table td {
+  padding: 12px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.original-field {
+  vertical-align: middle;
+}
+
+.field-tag {
+  display: inline-block;
+  background-color: #e0e0e0;
+  border: 1px solid #bdbdbd;
+  border-radius: 4px;
+  padding: 6px 10px;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.mapping-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.mapping-input:focus {
+  outline: none;
+  border-color: #0072a0;
+  box-shadow: 0 0 0 2px rgba(0, 114, 160, 0.2);
+}
+
+.no-data-message {
+  text-align: center;
+  padding: 30px;
+  color: #666;
+  font-style: italic;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}
+
+/* Scheduler Modal Styles */
+.scheduler-container {
+  padding: 10px;
+}
+
+.data-lake-info h4 {
+  margin: 0 0 20px 0;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.job-info-section {
+  background-color: #f9f9f9;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.job-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.job-header h5 {
+  margin: 0;
+  color: #333;
+}
+
+.badge {
+  padding: 5px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.badge-success {
+  background-color: #4caf50;
+  color: white;
+}
+
+.badge-warning {
+  background-color: #ff9800;
+  color: white;
+}
+
+.badge-danger {
+  background-color: #f44336;
+  color: white;
+}
+
+.badge-light {
+  background-color: #e0e0e0;
+  color: #333;
+}
+
+.job-details {
+  margin-bottom: 20px;
+}
+
+.detail-row {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.detail-row label {
+  font-weight: 500;
+  width: 120px;
+  color: #555;
+}
+
+.detail-row span {
+  flex: 1;
+}
+
+.job-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.job-actions .btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.no-job-section {
+  text-align: center;
+  padding: 30px 20px;
+}
+
+.no-job-message p {
+  margin: 10px 0;
+  color: #666;
+}
+
+.no-job-message p:first-child {
+  font-size: 18px;
+  color: #333;
+}
+
+.create-job-actions {
+  margin-top: 20px;
+}
+
+.create-job-actions .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}
+
+/* Webhook Status Styles */
+.webhook-enabled {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: #4caf50;
+  color: white;
+}
+
+.webhook-disabled {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: #f44336;
+  color: white;
+}
+
+/* Webhook Status Styles */
+.webhook-status {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.webhook-status.enabled {
+  background-color: #4caf50;
+  color: white;
+}
+
+.webhook-status.disabled {
+  background-color: #f44336;
+  color: white;
+}
+
+/* Webhook Modal Styles */
+.webhook-container {
+  padding: 10px;
+}
+
+.webhook-container .data-lake-info h4 {
+  margin: 0 0 20px 0;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.webhook-form {
+  margin-bottom: 20px;
+}
+
+.webhook-info {
+  background-color: #e3f2fd;
+  border: 1px solid #bbdefb;
+  border-radius: 4px;
+  padding: 15px;
+  margin-top: 20px;
+}
+
+.webhook-info p {
+  margin: 0;
+  color: #1976d2;
+}

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { AlertService } from 'src/app/services/alert.service';
 import { Data_lakeservice } from './Data_lake.service';
+import { SchedulerService } from 'src/app/services/scheduler.service';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
 import { ExtensionService } from 'src/app/services/fnd/extension.service';
 import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
@@ -10,6 +11,7 @@ import { UserInfoService } from 'src/app/services/user-info.service';
 import { SureconnectService } from '../sureconnect/sureconnect.service';
 import { HttpClient } from '@angular/common/http';
 import { ApiRequestService } from 'src/app/services/api/api-request.service';
+import { DataLakeSchedulerService } from './dataLakescheduler.service';
 declare var JsBarcode: any;
 @Component({
   selector: 'app-Data_lake',
@@ -66,6 +68,12 @@ export class Data_lakeComponent implements OnInit {
   dataLakeList: any[] = [];
   selectedDataLake: any = null;
 
+  // New properties for data lake type
+  dataLakeTypes = [
+    { value: 'normal', label: 'Normal' },
+    { value: 'blending', label: 'Blending' }
+  ];
+
   // Calculated field properties
   calculatedFieldModalOpen = false;
   availableKeys: string[] = [];
@@ -99,10 +107,36 @@ export class Data_lakeComponent implements OnInit {
   
   selectedAggregationFields: { field: string; operation: string }[] = [];
   
+  // New property to store selected blending lake IDs as string
+  selectedBlendingLakeIds: string[] = [];
+  editSelectedBlendingLakeIds: string[] = [];
+  
+  // New properties for blending functionality
+  showBlendingKeys = false;
+  blendingKeysData: any[] = [];
+  sqlQueryText = '';
+  selectedBlendingItem: any = null;
+  
+  // New properties for field mapping
+  showFieldMappingModal = false;
+  fieldMappingData: any[] = [];
+  fieldMappings: { [key: string]: string } = {};
+  selectedMappingItem: any = null;
+  
+  // New properties for scheduler functionality
+  showSchedulerModal = false;
+  schedulerJob: any = null;
+  selectedSchedulerItem: any = null;
+  
+  // New properties for webhook functionality
+  showWebhookModal = false;
+  selectedWebhookItem: any = null;
+  
   constructor(
     private extensionService: ExtensionService,
     private userInfoService: UserInfoService,
     private mainService: Data_lakeservice,
+    private schedulerService: DataLakeSchedulerService,
     private alertService: AlertService,
     private toastr: ToastrService,
     private _fb: FormBuilder,
@@ -124,23 +158,19 @@ export class Data_lakeComponent implements OnInit {
     this.getDataLakeList(); // Fetch Data Lake list for reference dropdown
     this.entryForm = this._fb.group({
       name: [null],
-
       url: [null],
-
       schedule: [null],
-
       cron_job: [null],
-
       json: [null],
-
       url_endpoint: [null],
-
       batch_volume: [null],
+      sure_connect_id: [null],
+      ref_datalake_id: [null],
+      datalake_type: ['normal'], // Default to normal
+      blending_lakeids: [[]], // Array for multiple selections
+      webhook_url: [null] // Add webhook_url field
+    });
     
-      sure_connect_id: [null], // Add SureConnect field
-      ref_datalake_id: [null], // Add Data Lake reference field
-
-    }); // component_button200
     // form code start
     this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
       console.log(data);
@@ -240,8 +270,7 @@ export class Data_lakeComponent implements OnInit {
   // Fetch Data Lake list for reference dropdown
   getDataLakeList() {
     this.mainService.getAll().subscribe((data: any[]) => {
-      // Filter out the current item to avoid self-reference
+      this.dataLakeList = data;
-      this.dataLakeList = data.filter(item => item.id !== (this.rowSelected?.id || 0));
       console.log('Data Lake List:', this.dataLakeList);
     }, (error) => {
       console.log('Error fetching Data Lake list:', error);
@@ -686,8 +715,16 @@ export class Data_lakeComponent implements OnInit {
     this.editCronExpression = row.cron_job || '';
     // Set the selected SureConnect for edit form
     this.selectedSureConnect = row.sure_connect_id || null;
-    // Set the selected Data Lake for edit form
+    
-    this.selectedDataLake = row.ref_datalake_id || null;
+    // Initialize blending lake IDs for edit form from string
+    if (row.blending_lakeids && typeof row.blending_lakeids === 'string') {
+      this.editSelectedBlendingLakeIds = row.blending_lakeids.split(',').filter(id => id.trim() !== '');
+    } else if (row.blending_lakeids && Array.isArray(row.blending_lakeids)) {
+      this.editSelectedBlendingLakeIds = row.blending_lakeids.map(id => id.toString());
+    } else {
+      this.editSelectedBlendingLakeIds = [];
+    }
+    
     // Use setTimeout to ensure the component has time to initialize
     setTimeout(() => {
       this.modalEdit = true;
@@ -838,18 +875,22 @@ export class Data_lakeComponent implements OnInit {
   }
   
   goToAdd(row) {
-    this.modalAdd = true;
+    this.modalAdd = false;
     this.addCronExpression = '';
     this.selectedSureConnect = null; // Reset SureConnect selection
-    this.selectedDataLake = null; // Reset Data Lake selection
     this.submitted = false;
+    // Reset blending lake IDs for add form
+    this.selectedBlendingLakeIds = [];
+    
     // Reset the form control for cron_job and sure_connect_id
     if (this.entryForm) {
       if (this.entryForm.get('cron_job')) {
         this.entryForm.get('cron_job')?.setValue('');
       }
-
+      // Reset blending_lakeids to empty string
+      this.entryForm.get('blending_lakeids')?.setValue('');
     }
+    this.modalAdd = true;
   }
   submitted = false;
   onSubmit() {
@@ -1290,4 +1331,433 @@ export class Data_lakeComponent implements OnInit {
       return [];
     }
   }
+  
+  // Method to check if blending action should be available
+  canShowBlendingAction(item: any): boolean {
+    return item.datalake_type === 'blending' && 
+           item.blending_lakeids && 
+           item.blending_lakeids.trim() !== '';
+  }
+  
+  // Method to insert header into SQL query at cursor position
+  insertHeaderIntoQuery(header: string) {
+    const textarea = document.querySelector('.sql-textarea') as HTMLTextAreaElement;
+    if (textarea) {
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const text = textarea.value;
+      const before = text.substring(0, start);
+      const after = text.substring(end, text.length);
+      
+      // Insert the header at cursor position
+      this.sqlQueryText = before + header + after;
+      
+      // Set cursor position after the inserted text
+      setTimeout(() => {
+        textarea.selectionStart = start + header.length;
+        textarea.selectionEnd = start + header.length;
+        textarea.focus();
+      }, 0);
+    } else {
+      // Fallback: append to end of text
+      this.sqlQueryText += header;
+    }
+  }
+  
+  // Method to fetch blending keys
+  fetchBlendingKeys(item: any) {
+    this.selectedBlendingItem = item;
+    this.blendingKeysData = [];
+    this.showBlendingKeys = true;
+    
+    // Initialize SQL query text from existing data
+    if (item.sqlquery_json) {
+      this.sqlQueryText = item.sqlquery_json;
+    } else {
+      this.sqlQueryText = '';
+    }
+    
+    // Parse blending_lakeids string to array
+    const lakeIds = item.blending_lakeids.split(',').map(id => id.trim()).filter(id => id !== '');
+    
+    // Fetch keys for each lake ID
+    lakeIds.forEach(lakeId => {
+      this.mainService.fetchBlendingKeys(Number(lakeId)).subscribe(
+        (data: any) => {
+          this.blendingKeysData.push({
+            lakeId: lakeId,
+            tableName: data.tableName,
+            headers: data.headers
+          });
+        },
+        (error) => {
+          console.error('Error fetching keys for lake ID:', lakeId, error);
+          this.toastr.error(`Failed to fetch keys for Data Lake ${lakeId}`);
+        }
+      );
+    });
+  }
+  
+  // Method to update SQL query
+  updateSqlQuery() {
+    if (!this.selectedBlendingItem) {
+      this.toastr.error('No blending item selected');
+      return;
+    }
+    
+    // Update the SQL query JSON field
+    this.selectedBlendingItem.sqlquery_json = this.sqlQueryText;
+    
+    // Call update service
+    this.mainService.update(this.selectedBlendingItem.id, this.selectedBlendingItem).subscribe(
+      (response) => {
+        this.toastr.success('SQL query updated successfully');
+        // Update the local data
+        const index = this.product.findIndex(p => p.id === this.selectedBlendingItem.id);
+        if (index !== -1) {
+          this.product[index] = {...this.selectedBlendingItem};
+        }
+      },
+      (error) => {
+        console.error('Error updating SQL query:', error);
+        this.toastr.error('Failed to update SQL query');
+      }
+    );
+  }
+  
+  // Method to close blending keys panel
+  closeBlendingKeys() {
+    this.showBlendingKeys = false;
+    this.blendingKeysData = [];
+    this.sqlQueryText = '';
+    this.selectedBlendingItem = null;
+  }
+  
+  // Method to handle checkbox change for blending lakes (ADD form)
+  onBlendingLakeCheckboxChange(event: any, lakeId: number) {
+    const lakeIdStr = lakeId.toString();
+    if (event.target.checked) {
+      // Add to selected blending lake IDs
+      if (!this.selectedBlendingLakeIds.includes(lakeIdStr)) {
+        this.selectedBlendingLakeIds.push(lakeIdStr);
+      }
+    } else {
+      // Remove from selected blending lake IDs
+      const index = this.selectedBlendingLakeIds.indexOf(lakeIdStr);
+      if (index > -1) {
+        this.selectedBlendingLakeIds.splice(index, 1);
+      }
+    }
+    
+    // Update the form control value as a comma-separated string
+    this.entryForm.get('blending_lakeids')?.setValue(this.selectedBlendingLakeIds.join(','));
+  }
+  
+  // Method to check if a blending lake is selected (ADD form)
+  isBlendingLakeSelected(lakeId: number): boolean {
+    return this.selectedBlendingLakeIds.includes(lakeId.toString());
+  }
+  
+  // Method to handle checkbox change for blending lakes (EDIT form)
+  onEditBlendingLakeCheckboxChange(event: any, lakeId: number) {
+    const lakeIdStr = lakeId.toString();
+    if (event.target.checked) {
+      // Add to selected blending lake IDs
+      if (!this.editSelectedBlendingLakeIds.includes(lakeIdStr)) {
+        this.editSelectedBlendingLakeIds.push(lakeIdStr);
+      }
+    } else {
+      // Remove from selected blending lake IDs
+      const index = this.editSelectedBlendingLakeIds.indexOf(lakeIdStr);
+      if (index > -1) {
+        this.editSelectedBlendingLakeIds.splice(index, 1);
+      }
+    }
+    
+    // Update the rowSelected value as a comma-separated string
+    this.rowSelected.blending_lakeids = this.editSelectedBlendingLakeIds.join(',');
+  }
+  
+  // Method to check if a blending lake is selected (EDIT form)
+  isEditBlendingLakeSelected(lakeId: number): boolean {
+    return this.editSelectedBlendingLakeIds.includes(lakeId.toString());
+  }
+  
+  // Method to open field mapping modal
+  openFieldMappingModal(item: any) {
+    this.selectedMappingItem = item;
+    this.fieldMappingData = [];
+    this.fieldMappings = {};
+    this.showFieldMappingModal = true;
+    
+    // Fetch available keys using the same API as calculated fields
+    this.mainService.fetchAvailableKeys(item.url, item.sure_connect_id).subscribe(
+      (keys: string[]) => {
+        // Initialize field mappings with empty values
+        this.fieldMappingData = keys.map(key => ({
+          original: key,
+          mapped: ''
+        }));
+        
+        // If there's existing mapping data, populate it
+        if (item.mapping_json) {
+          try {
+            const existingMappings = JSON.parse(item.mapping_json);
+            this.fieldMappingData.forEach(field => {
+              if (existingMappings[field.original]) {
+                field.mapped = existingMappings[field.original];
+              }
+            });
+          } catch (e) {
+            console.error('Error parsing existing mapping JSON:', e);
+          }
+        }
+      },
+      (error) => {
+        console.error('Error fetching keys for field mapping:', error);
+        this.toastr.error('Failed to fetch available keys for field mapping');
+      }
+    );
+  }
+  
+  // Method to update field mappings
+  updateFieldMappings() {
+    if (!this.selectedMappingItem) {
+      this.toastr.error('No item selected for mapping');
+      return;
+    }
+    
+    // Create mapping object
+    const mappings: { [key: string]: string } = {};
+    this.fieldMappingData.forEach(field => {
+      if (field.mapped && field.mapped.trim() !== '') {
+        mappings[field.original] = field.mapped.trim();
+      }
+    });
+    
+    // Convert to JSON string
+    const mappingJson = JSON.stringify(mappings);
+    
+    // Update the mapping JSON field
+    this.selectedMappingItem.mapping_json = mappingJson;
+    
+    // Call update service
+    this.mainService.update(this.selectedMappingItem.id, this.selectedMappingItem).subscribe(
+      (response) => {
+        this.toastr.success('Field mappings updated successfully');
+        // Update the local data
+        const index = this.product.findIndex(p => p.id === this.selectedMappingItem.id);
+        if (index !== -1) {
+          this.product[index] = {...this.selectedMappingItem};
+        }
+        this.closeFieldMappingModal();
+      },
+      (error) => {
+        console.error('Error updating field mappings:', error);
+        this.toastr.error('Failed to update field mappings');
+      }
+    );
+  }
+  
+  // Method to close field mapping modal
+  closeFieldMappingModal() {
+    this.showFieldMappingModal = false;
+    this.fieldMappingData = [];
+    this.fieldMappings = {};
+    this.selectedMappingItem = null;
+  }
+  
+  // Method to update individual field mapping
+  updateFieldMapping(index: number, value: string) {
+    if (index >= 0 && index < this.fieldMappingData.length) {
+      this.fieldMappingData[index].mapped = value;
+    }
+  }
+  
+  
+  // Method to open scheduler modal
+  openSchedulerModal(item: any) {
+    this.selectedSchedulerItem = item;
+    this.schedulerJob = null;
+    this.showSchedulerModal = true;
+    
+    // Fetch job by lake ID
+    this.schedulerService.getJobByLakeId(item.id).subscribe(
+      (job: any) => {
+        this.schedulerJob = job;
+      },
+      (error) => {
+        // If job not found, it's expected - we'll show create option
+        if (error.status === 404) {
+          this.schedulerJob = null;
+        } else {
+          console.error('Error fetching scheduler job:', error);
+          this.toastr.error('Failed to fetch scheduler job information');
+        }
+      }
+    );
+  }
+  
+  // Method to create a new job
+  createJob() {
+    if (!this.selectedSchedulerItem) {
+      this.toastr.error('No data lake selected');
+      return;
+    }
+    
+    const jobData = {
+      name: this.selectedSchedulerItem.name,
+      status: 'RUNNING',
+      description: `Scheduled job for ${this.selectedSchedulerItem.name}`,
+      jobType: 'DATALAKE',
+      lakeid: this.selectedSchedulerItem.id
+    };
+    
+    this.schedulerService.createJob(jobData).subscribe(
+      (job: any) => {
+        this.schedulerJob = job;
+        this.toastr.success('Job created successfully');
+      },
+      (error) => {
+        console.error('Error creating job:', error);
+        this.toastr.error('Failed to create job');
+      }
+    );
+  }
+  
+  // Method to pause a job
+  pauseJob() {
+    if (!this.schedulerJob || !this.schedulerJob.id) {
+      this.toastr.error('No job selected');
+      return;
+    }
+    
+    this.schedulerService.pauseJob(this.schedulerJob.id).subscribe(
+      (response: any) => {
+        this.schedulerJob.status = 'PAUSED';
+        this.toastr.success('Job paused successfully');
+      },
+      (error) => {
+        console.error('Error pausing job:', error);
+        this.toastr.error('Failed to pause job');
+      }
+    );
+  }
+  
+  // Method to resume a job
+  resumeJob() {
+    if (!this.schedulerJob || !this.schedulerJob.id) {
+      this.toastr.error('No job selected');
+      return;
+    }
+    
+    this.schedulerService.resumeJob(this.schedulerJob.id).subscribe(
+      (response: any) => {
+        this.schedulerJob.status = 'RUNNING';
+        this.toastr.success('Job resumed successfully');
+      },
+      (error) => {
+        console.error('Error resuming job:', error);
+        this.toastr.error('Failed to resume job');
+      }
+    );
+  }
+  
+  // Method to stop a job
+  stopJob() {
+    if (!this.schedulerJob || !this.schedulerJob.id) {
+      this.toastr.error('No job selected');
+      return;
+    }
+    
+    this.schedulerService.stopJob(this.schedulerJob.id).subscribe(
+      (response: any) => {
+        this.schedulerJob.status = 'STOPPED';
+        this.toastr.success('Job stopped successfully');
+      },
+      (error) => {
+        console.error('Error stopping job:', error);
+        this.toastr.error('Failed to stop job');
+      }
+    );
+  }
+  
+  // Method to restart a stopped job
+  restartJob() {
+    if (!this.schedulerJob || !this.schedulerJob.id) {
+      this.toastr.error('No job selected');
+      return;
+    }
+    
+    // To restart a job, we need to create a new job with the same parameters
+    const jobData = {
+      name: this.schedulerJob.name,
+      status: 'RUNNING',
+      description: this.schedulerJob.description,
+      jobType: this.schedulerJob.jobType,
+      lakeid: this.schedulerJob.lakeid
+    };
+    
+    this.schedulerService.createJob(jobData).subscribe(
+      (job: any) => {
+        this.schedulerJob = job;
+        this.toastr.success('Job restarted successfully');
+      },
+      (error) => {
+        console.error('Error restarting job:', error);
+        this.toastr.error('Failed to restart job');
+      }
+    );
+  }
+  
+  // Method to close scheduler modal
+  closeSchedulerModal() {
+    this.showSchedulerModal = false;
+    this.schedulerJob = null;
+    this.selectedSchedulerItem = null;
+  }
+  
+  // Method to get status badge class
+  getStatusBadgeClass(status: string): string {
+    switch (status) {
+      case 'RUNNING':
+        return 'badge-success';
+      case 'PAUSED':
+        return 'badge-warning';
+      case 'STOPPED':
+        return 'badge-danger';
+      default:
+        return 'badge-light';
+    }
+  }
+  
+  // Method to toggle webhook for a data lake item
+  toggleWebhook(item: any) {
+    // Call the enableWebhook service method
+    this.mainService.enableWebhook(item.id).subscribe(
+      (updatedItem: any) => {
+        // Update the local data with the response from the server
+        const index = this.product.findIndex(p => p.id === item.id);
+        if (index !== -1) {
+          this.product[index] = {...updatedItem};
+        }
+        
+        // Show success message based on the new webhook status
+        if (updatedItem.webhook_url && updatedItem.webhook_url.trim() !== '') {
+          this.toastr.success('Webhook enabled successfully');
+        } else {
+          this.toastr.success('Webhook disabled successfully');
+        }
+      },
+      (error) => {
+        console.error('Error toggling webhook:', error);
+        this.toastr.error('Failed to toggle webhook');
+      }
+    );
+  }
+  
+  // Method to copy webhook URL to clipboard
+  copyWebhookUrl(webhookUrl: string) {
+    this.copyToClipboard(webhookUrl);
+  }
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.service.ts

@@ -42,6 +42,12 @@ export class Data_lakeservice{
     return this.apiRequest.get(apiUrl);
   }
 
+  // Method to fetch blending keys for a specific lake ID
+  fetchBlendingKeys(lakeId: number): Observable<any> {
+    const _http = `${this.baseURL}/keys/${lakeId}`;
+    return this.apiRequest.get(_http);
+  }
+  
   // Method to update calculated fields for a data lake item
   updateCalculatedFields(id: number, calculatedFieldJson: string, isCalculatedField: boolean): Observable<any> {
     const _http = this.baseURL + "/" + id;
@@ -51,5 +57,11 @@ export class Data_lakeservice{
     };
     return this.apiRequest.put(_http, data);
   }
+  
+  // Method to enable webhook for a data lake item
+  enableWebhook(id: number): Observable<any> {
+    const _http = `${this.baseURL}/webhook/${id}`;
+    return this.apiRequest.get(_http);
+  }
 // updateaction
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.html

@@ -1,6 +1,15 @@
 <div class="cron-job-builder">
   <h4>Cron Job Builder</h4>
   <div class="clr-row">
+    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
+      <div class="form-group">
+        <label>Second</label>
+        <select class="form-control" [(ngModel)]="second" (change)="onFieldChange()">
+          <option *ngFor="let option of secondOptions" [value]="option.value">{{ option.label }}</option>
+        </select>
+      </div>
+    </div>
+    
     <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
       <div class="form-group">
         <label>Minute</label>
@@ -28,7 +37,7 @@
       </div>
     </div>
     
-    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-6 clr-col-12">
+    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
       <div class="form-group">
         <label>Month</label>
         <select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
@@ -37,7 +46,7 @@
       </div>
     </div>
     
-    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-12 clr-col-12">
+    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
       <div class="form-group">
         <label>Day of Week</label>
         <select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.ts

@@ -10,7 +10,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
   @Input() instanceId: string = ''; // Unique identifier for each instance
   @Output() cronExpressionChange = new EventEmitter<string>();
   
-  // Cron job fields
+  // Cron job fields (now starting with seconds)
+  second: string = '*';
   minute: string = '*';
   hour: string = '*';
   dayOfMonth: string = '*';
@@ -21,6 +22,7 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
   cronDescription: string = '';
   
   // Options for selectors
+  secondOptions: any[] = [];
   minuteOptions: any[] = [];
   hourOptions: any[] = [];
   dayOfMonthOptions: any[] = [];
@@ -29,9 +31,10 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     // Initialize options for each instance
-    this.minuteOptions = this.generateOptions(0, 59);
+    this.secondOptions = this.generateOptions(0, 59, 'second');
-    this.hourOptions = this.generateOptions(0, 23);
+    this.minuteOptions = this.generateOptions(0, 59, 'minute');
-    this.dayOfMonthOptions = this.generateOptions(1, 31);
+    this.hourOptions = this.generateOptions(0, 23, 'hour');
+    this.dayOfMonthOptions = this.generateOptions(1, 31, 'day');
     this.monthOptions = [
       { value: '*', label: 'Every month' },
       { value: '1', label: 'January' },
@@ -73,8 +76,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
     }
   }
 
-  generateOptions(start: number, end: number): any[] {
+  generateOptions(start: number, end: number, type: string): any[] {
-    const options = [{ value: '*', label: `Every (${start === 0 ? '0' : start}-${end})` }];
+    const options = [{ value: '*', label: `Every ${type} (${start === 0 ? '0' : start}-${end})` }];
     for (let i = start; i <= end; i++) {
       options.push({ value: i.toString(), label: i.toString() });
     }
@@ -83,7 +86,16 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
 
   parseCronExpression(expression: string) {
     const parts = expression.split(' ');
-    if (parts.length >= 5) {
+    if (parts.length >= 6) {  // Now expecting 6 parts with seconds
+      this.second = parts[0];
+      this.minute = parts[1];
+      this.hour = parts[2];
+      this.dayOfMonth = parts[3];
+      this.month = parts[4];
+      this.dayOfWeek = parts[5];
+    } else if (parts.length >= 5) {  // For backward compatibility with 5-part cron expressions
+      // Default seconds to 0 if not provided
+      this.second = '0';
       this.minute = parts[0];
       this.hour = parts[1];
       this.dayOfMonth = parts[2];
@@ -95,19 +107,33 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
   generateDescription() {
     let description = 'Runs ';
     
+    // Second description
+    if (this.second === '*') {
+      description += 'every second';
+    } else if (this.second.includes('/')) {
+      const interval = this.second.split('/')[1];
+      description += `every ${interval} seconds`;
+    } else {
+      description += `at second ${this.second}`;
+    }
+    
     // Minute description
     if (this.minute === '*') {
-      description += 'every minute';
+      if (this.second === '*') {
+        description += '';
+      } else {
+        description += ' of every minute';
+      }
     } else if (this.minute.includes('/')) {
       const interval = this.minute.split('/')[1];
-      description += `every ${interval} minutes`;
+      description += ` of every ${interval} minutes`;
     } else {
       description += ` at minute ${this.minute}`;
     }
     
     // Hour description
     if (this.hour === '*') {
-      if (this.minute === '*') {
+      if (this.minute === '*' && this.second === '*') {
         description += '';
       } else {
         description += ' past every hour';
@@ -146,21 +172,23 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
     }
     
     // Special case for simple patterns
-    if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
+    if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
       description = 'Runs at midnight on the first day of every month';
-    } else if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+    } else if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
       description = 'Runs at midnight every day';
-    } else if (this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+    } else if (this.second === '0' && this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
       description = 'Runs at the top of every hour';
-    } else if (this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+    } else if (this.second === '0' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
-      description = 'Runs every minute';
+      description = 'Runs at the top of every minute';
+    } else if (this.second === '*' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+      description = 'Runs every second';
     }
     
     this.cronDescription = description;
   }
 
   buildCronExpression() {
-    const expression = `${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
+    const expression = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
     this.cronExpressionChange.emit(expression);
     this.generateDescription(); // Update description when expression changes
     return expression;

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/dataLakescheduler.service.ts

@@ -0,0 +1,47 @@
+
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+import { HttpClient } from "@angular/common/http";
+import { ApiRequestService } from "src/app/services/api/api-request.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataLakeSchedulerService {
+  private baseURL = "scheduler";
+
+  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService,
+  ) { }
+
+  // Get job by lake ID
+  getJobByLakeId(lakeId: number): Observable<any> {
+    const _http = `${this.baseURL}/lake/${lakeId}`;
+    return this.apiRequest.get(_http);
+  }
+
+  // Create a new job
+  createJob(jobData: any): Observable<any> {
+    const _http = `${this.baseURL}/create`;
+    return this.apiRequest.post(_http, jobData);
+  }
+
+  // Pause a job
+  pauseJob(jobId: number): Observable<any> {
+    const _http = `${this.baseURL}/pause/${jobId}`;
+    return this.apiRequest.post(_http, {});
+  }
+
+  // Resume a job
+  resumeJob(jobId: number): Observable<any> {
+    const _http = `${this.baseURL}/resume/${jobId}`;
+    return this.apiRequest.post(_http, {});
+  }
+
+  // Stop a job
+  stopJob(jobId: number): Observable<any> {
+    const _http = `${this.baseURL}/stop/${jobId}`;
+    return this.apiRequest.delete(_http);
+  }
+}

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts

@@ -0,0 +1,125 @@
+import { Injectable } from '@angular/core';
+import { Observable, forkJoin } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ApiRequestService } from 'src/app/services/api/api-request.service';
+import { ChartType, UiComponent, ComponentProperty, ChartTemplate, DynamicField } from './chart-config-manager.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DynamicChartLoaderService {
+  private chartTypesUrl = 'api/chart-types';
+  private uiComponentsUrl = 'api/ui-components';
+  private componentPropertiesUrl = 'api/component-properties';
+  private chartTemplatesUrl = 'api/chart-templates';
+  private dynamicFieldsUrl = 'api/dynamic-fields';
+
+  constructor(private apiRequest: ApiRequestService) { }
+
+  /**
+   * Load all chart configurations dynamically
+   * This method fetches all chart types and their associated components, templates, and fields
+   */
+  loadAllChartConfigurations(): Observable<any> {
+    console.log('Loading all chart configurations dynamically');
+
+    // Load all chart types first
+    return this.apiRequest.get(this.chartTypesUrl).pipe(
+      map(chartTypes => {
+        console.log('Loaded chart types:', chartTypes);
+        return chartTypes;
+      })
+    );
+  }
+
+  /**
+   * Load complete configuration for a specific chart type
+   * This includes UI components, templates, and dynamic fields
+   */
+  loadChartConfiguration(chartTypeId: number): Observable<{
+    chartType: ChartType,
+    uiComponents: UiComponent[],
+    templates: ChartTemplate[],
+    dynamicFields: DynamicField[]
+  }> {
+    console.log(`Loading complete configuration for chart type ${chartTypeId}`);
+
+    // Load all related data in parallel
+    return forkJoin({
+      chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
+      uiComponents: this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`),
+      templates: this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`),
+      dynamicFields: this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`)
+    }).pipe(
+      map(result => {
+        console.log(`Loaded complete configuration for chart type ${chartTypeId}:`, result);
+        return result;
+      })
+    );
+  }
+
+  /**
+   * Load chart template for a specific chart type
+   * This is used to render the chart UI dynamically
+   */
+  loadChartTemplate(chartTypeId: number): Observable<ChartTemplate[]> {
+    console.log(`Loading chart templates for chart type ${chartTypeId}`);
+    return this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`);
+  }
+
+  /**
+   * Load UI components for a specific chart type
+   * These define what configuration fields are needed for the chart
+   */
+  loadUiComponents(chartTypeId: number): Observable<UiComponent[]> {
+    console.log(`Loading UI components for chart type ${chartTypeId}`);
+    return this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`);
+  }
+
+  /**
+   * Load dynamic fields for a specific chart type
+   * These define additional dynamic fields that can be used in the chart
+   */
+  loadDynamicFields(chartTypeId: number): Observable<DynamicField[]> {
+    console.log(`Loading dynamic fields for chart type ${chartTypeId}`);
+    return this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`);
+  }
+
+  /**
+   * Get chart type by name
+   * This is useful for finding a chart type by its name rather than ID
+   */
+  // getChartTypeByName(name: string): Observable<ChartType | null> {
+  //   console.log(`Finding chart type by name: ${name}`);
+  //   return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
+  //     map((chartTypes: ChartType[]) => {
+  //       console.log('Available chart types:', chartTypes);
+  //       const chartType = chartTypes.find(ct => ct.name === name);
+  //       console.log(`Found chart type for name ${name}:`, chartType);
+  //       return chartType || null;
+  //     })
+  //   );
+  // }
+
+  getChartTypeByName(name: string): Observable<any> {
+    console.log(`Finding chart type by name: ${name}`);
+    return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
+  }
+
+
+
+  /**
+   * Load all active chart types
+   * This is used to populate the chart selection in the dashboard editor
+   */
+  loadActiveChartTypes(): Observable<ChartType[]> {
+    console.log('Loading active chart types');
+    return this.apiRequest.get(`${this.chartTypesUrl}`).pipe(
+      map((chartTypes: ChartType[]) => {
+        const activeChartTypes = chartTypes.filter(ct => ct.isActive);
+        console.log('Loaded active chart types:', activeChartTypes);
+        return activeChartTypes;
+      })
+    );
+  }
+}

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts

@@ -127,6 +127,7 @@ export class ChartTypeFieldsComponent implements OnInit {
       return;
     }
 
+    console.log('Updating dynamic field:', this.selectedDynamicField);
     this.loadingState = ClrLoadingState.LOADING;
     this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
       next: (data) => {

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html

@@ -17,6 +17,9 @@
   <div style="display: inline; float: right;">
     <!-- <button class="btn btn-primary">Build</button>
       <button class="btn btn-primary" (click)="onSchedule()">Schedule</button> -->
+    <button class="btn btn-success" (click)="testDynamicChartCreation()" style="margin-left: 10px;" *ngIf="!fromRunner">
+      <clr-icon shape="test"></clr-icon> Test Dynamic Chart
+    </button>
   </div>
 
 </div>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts

@@ -30,6 +30,8 @@ import { CompactFilterComponent } from '../common-filter';
 import { FilterService } from '../common-filter/filter.service';
 // Add the UnifiedChartComponent import
 import { UnifiedChartComponent } from '../gadgets/unified-chart';
+// Add the DynamicChartLoaderService import
+import { DynamicChartLoaderService } from '../chart-config/dynamic-chart-loader.service';
 
 function isNullArray(arr) {
   return !Array.isArray(arr) || arr.length === 0;
@@ -58,6 +60,7 @@ export class EditnewdashComponent implements OnInit {
   // Add availableKeys property for compact filter
   availableKeys: string[] = [];
 
+  // Initialize with default widgets and update dynamically
   WidgetsMock: WidgetModel[] = [
     {
       name: 'Common Filter',
@@ -75,26 +78,26 @@ export class EditnewdashComponent implements OnInit {
       name: 'Line Chart',
       identifier: 'line_chart'
     },
-    {
+    // {
-      name: 'Bar Chart',
+    //   name: 'Bar Chart',
-      identifier: 'bar_chart'
+    //   identifier: 'bar_chart'
-    },
+    // },
-    {
+    // {
-      name: 'Pie Chart',
+    //   name: 'Pie Chart',
-      identifier: 'pie_chart'
+    //   identifier: 'pie_chart'
-    },
+    // },
-    {
+    // {
-      name: 'Polar Area Chart',
+    //   name: 'Polar Area Chart',
-      identifier: 'polar_area_chart'
+    //   identifier: 'polar_area_chart'
-    },
+    // },
-    {
+    // {
-      name: 'Bubble Chart',
+    //   name: 'Bubble Chart',
-      identifier: 'bubble_chart'
+    //   identifier: 'bubble_chart'
-    },
+    // },
-    {
+    // {
-      name: 'Scatter Chart',
+    //   name: 'Scatter Chart',
-      identifier: 'scatter_chart'
+    //   identifier: 'scatter_chart'
-    },
+    // },
     {
     name: 'Dynamic Chart',
     identifier: 'dynamic_chart'
@@ -206,6 +209,9 @@ export class EditnewdashComponent implements OnInit {
   // Add drilldown column data property
   drilldownColumnData = []; // Add drilldown column data property
 
+  // Add chart types property for dynamic chart selection
+  chartTypes: any[] = [];
+
   constructor(private route: ActivatedRoute,
     private router: Router,
     private dashboardService: Dashboard3Service,
@@ -214,7 +220,8 @@ export class EditnewdashComponent implements OnInit {
     private datastoreService: DatastoreService,
     private alertService: AlertsService,
     private sureconnectService: SureconnectService,
-    private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor
+    private filterService: FilterService,
+    private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
 
   // Add property to track if coming from dashboard runner
   fromRunner: boolean = false;
@@ -299,6 +306,9 @@ export class EditnewdashComponent implements OnInit {
       apiUrl: ['']
     });
     
+    // Load chart types for dynamic chart selection
+    this.loadChartTypesForSelection();
+    
     // Load sureconnect data first, then load dashboard data
     this.loadSureconnectData();
     
@@ -306,6 +316,37 @@ export class EditnewdashComponent implements OnInit {
     this.loadCommonFilterData();
   }
 
+  // Add method to load all chart types for dynamic selection
+  loadChartTypesForSelection() {
+  console.log('Loading chart types for selection');
+  this.dynamicChartLoader.loadActiveChartTypes().subscribe({
+    next: (chartTypes) => {
+      console.log('Loaded chart types for selection:', chartTypes);
+      this.chartTypes = chartTypes;
+
+      // Convert each chart type to a WidgetModel
+      const newWidgets = chartTypes.map(ct => ({
+        name: ct.displayName || ct.name,
+        // identifier: ct.name.toLowerCase().replace(/\s+/g, '_')
+        identifier: `${ct.name.toLowerCase().replace(/\s+/g, '_')}_chart`
+      }));
+
+      // Filter out duplicates by identifier
+      const existingIds = new Set(this.WidgetsMock.map(w => w.identifier));
+      const uniqueNewWidgets = newWidgets.filter(w => !existingIds.has(w.identifier));
+
+      // Append unique new widgets to WidgetsMock
+      this.WidgetsMock = [...this.WidgetsMock, ...uniqueNewWidgets];
+
+      console.log('Updated WidgetsMock:', this.WidgetsMock);
+    },
+    error: (error) => {
+      console.error('Error loading chart types for selection:', error);
+    }
+  });
+}
+
+  
   // Add method to load sureconnect data
   loadSureconnectData() {
     this.sureconnectService.getAll().subscribe((data: any[]) => {
@@ -448,6 +489,7 @@ export class EditnewdashComponent implements OnInit {
         'polar': 'Polar Area Chart',
         'bubble': 'Bubble Chart',
         'scatter': 'Scatter Chart'
+        // Removed hardcoded heatmap entry to make it fully dynamic
       };
       
       // If this is a unified chart, set the name back to the appropriate chart name
@@ -504,9 +546,11 @@ export class EditnewdashComponent implements OnInit {
     //this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
   }
 
-  onDrop(ev) {
+  onDrop = (ev) => {
+    console.log("on drop event ", ev);
     const componentType = ev.dataTransfer.getData("widgetIdentifier");
     // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
+    console.log("on drop ", componentType);
     let maxChartId = 0;
     if (this.dashboardArray && this.dashboardArray.length > 0) {
       const validChartIds = this.dashboardArray
@@ -520,155 +564,26 @@ export class EditnewdashComponent implements OnInit {
     switch (componentType) {
       // Handle all chart types by converting them to unified charts
       case "radar_chart":
-        return this.dashboardArray.push({
+        // Use dynamic chart creation for all chart types
-          cols: 5,
+        return this.createDynamicChart('radar', maxChartId);
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Radar Chart",
-          chartType: 'radar',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "line_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('line', maxChartId);
-          cols: 5,
-          rows: 7,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Line Chart",
-          chartType: 'line',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "doughnut_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('doughnut', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Doughnut Chart",
-          chartType: 'doughnut',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "bar_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('bar', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Bar Chart",
-          chartType: 'bar',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "pie_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('pie', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Pie Chart",
-          chartType: 'pie',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "polar_area_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('polar', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Polar Area Chart",
-          chartType: 'polar',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "bubble_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('bubble', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Bubble Chart",
-          chartType: 'bubble',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "scatter_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('scatter', maxChartId);
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Scatter Chart",
-          chartType: 'scatter',
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "dynamic_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Dynamic Chart",
-          chartType: 'line', // Default to line for dynamic chart
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "financial_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
-          cols: 5,
-          rows: 6,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: UnifiedChartComponent,
-          name: "Financial Chart",
-          chartType: 'line', // Default to line for financial chart
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
       case "to_do_chart":
         return this.dashboardArray.push({
           cols: 5,
@@ -715,21 +630,16 @@ export class EditnewdashComponent implements OnInit {
           name: "Grid View"
         });
       case "unified_chart":
-        return this.dashboardArray.push({
+        return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
-          cols: 5,
+      default:
-          rows: 6,
+        // Handle any other chart types dynamically
-          x: 0,
+        // Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
-          y: 0,
+        const chartTypeName = componentType.replace('_chart', '');
-          chartid: maxChartId + 1,
+        console.log('Creating dynamic chart of type:', chartTypeName);
-          component: UnifiedChartComponent,
+        console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
-          name: "Unified Chart",
+        
-          // Add default configuration for unified chart
+        // Use dynamic chart creation for all chart types
-          chartType: 'bar',
+        return this.createDynamicChart(chartTypeName, maxChartId);
-          xAxis: '',
-          yAxis: '',
-          table: '',
-          connection: undefined
-        });
     }
   }
   removeItem(item) {
@@ -1143,14 +1053,10 @@ export class EditnewdashComponent implements OnInit {
     }
     
     // For UnifiedChartComponent, pass chart properties with chartType
-    // Check for specific chart names that use UnifiedChartComponent
+    // Check if the component is UnifiedChartComponent dynamically
-    const unifiedChartNames = [
+    if (item.component === UnifiedChartComponent || 
-      'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 
+        (item.component && item.component.name === 'UnifiedChartComponent') ||
-      'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
+        item.name === 'Unified Chart') {
-      'Dynamic Chart', 'Financial Chart', 'Unified Chart'
-    ];
-    
-    if (unifiedChartNames.includes(item.name)) {
       const unifiedChartInputs = {
         chartType: item.chartType || 'bar',
         xAxis: item.xAxis,
@@ -2045,4 +1951,266 @@ export class EditnewdashComponent implements OnInit {
     }
   }
 
+  // Add method to apply dynamic template to a chart
+  applyDynamicTemplate(chartItem: any, template: any) {
+    console.log('Applying dynamic template to chart:', chartItem, template);
+    
+    // Apply HTML template
+    if (template.templateHtml) {
+      // In a real implementation, you would dynamically render the HTML template
+      // For now, we'll just log it
+      console.log('HTML Template:', template.templateHtml);
+    }
+    
+    // Apply CSS styles
+    if (template.templateCss) {
+      // In a real implementation, you would dynamically apply the CSS styles
+      // For now, we'll just log it
+      console.log('CSS Template:', template.templateCss);
+    }
+    
+    // Return the chart item with template applied
+    return {
+      ...chartItem,
+      template: template
+    };
+  }
+  
+  // Add method to test dynamic chart creation
+  testDynamicChartCreation() {
+    console.log('Testing dynamic chart creation');
+    
+    // Show a success message to the user
+    alert('Dynamic chart test started. Check the browser console for detailed output.');
+    
+    // Load all chart types
+    this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
+      next: (chartTypes) => {
+        console.log('Loaded chart types:', chartTypes);
+        
+        // Find bar chart type
+        const barChartType = chartTypes.find((ct: any) => ct.name === 'bar');
+        if (barChartType) {
+          console.log('Found bar chart type:', barChartType);
+          
+          // Load configuration for bar chart
+          this.dynamicChartLoader.loadChartConfiguration(barChartType.id).subscribe({
+            next: (config) => {
+              console.log('Loaded bar chart configuration:', config);
+              
+              // Create a test chart item
+              const chartItem = {
+                cols: 5,
+                rows: 6,
+                x: 0,
+                y: 0,
+                chartid: 100,
+                component: UnifiedChartComponent,
+                name: 'Test Dynamic Bar Chart',
+                chartType: 'bar',
+                xAxis: '',
+                yAxis: '',
+                table: '',
+                connection: undefined,
+                // Add dynamic fields from configuration
+                dynamicFields: config.dynamicFields || []
+              };
+              
+              console.log('Created test chart item:', chartItem);
+              
+              // If we have templates, apply the default one
+              if (config.templates && config.templates.length > 0) {
+                const defaultTemplate = config.templates.find((t: any) => t.isDefault) || config.templates[0];
+                if (defaultTemplate) {
+                  console.log('Applying default template:', defaultTemplate);
+                  const chartWithTemplate = this.applyDynamicTemplate(chartItem, defaultTemplate);
+                  console.log('Chart with template:', chartWithTemplate);
+                  
+                  // Show success message
+                  alert('Dynamic chart test completed successfully! Check console for details.');
+                }
+              } else {
+                // Show success message even without templates
+                alert('Dynamic chart test completed successfully! No templates found. Check console for details.');
+              }
+            },
+            error: (error) => {
+              console.error('Error loading bar chart configuration:', error);
+              alert('Error loading bar chart configuration. Check console for details.');
+            }
+          });
+        } else {
+          console.warn('Bar chart type not found');
+          alert('Bar chart type not found in the database.');
+        }
+      },
+      error: (error) => {
+        console.error('Error loading chart types:', error);
+        alert('Error loading chart types. Check console for details.');
+      }
+    });
+  }
+
+  // Add method to load dynamic chart configuration
+  loadDynamicChartConfiguration(chartTypeId: number) {
+    console.log(`Loading dynamic chart configuration for chart type ${chartTypeId}`);
+    this.dynamicChartLoader.loadChartConfiguration(chartTypeId).subscribe({
+      next: (config) => {
+        console.log('Loaded dynamic chart configuration:', config);
+        // Here you would apply the configuration to the UI
+        // For example, populate form fields, set up templates, etc.
+      },
+      error: (error) => {
+        console.error('Error loading dynamic chart configuration:', error);
+      }
+    });
+  }
+
+  
+
+  // Add method to create a dynamic chart with configuration from database
+  createDynamicChart = (chartTypeName: string, maxChartId: number) => {
+    console.log(`Creating dynamic chart of type: ${chartTypeName}`);
+    
+    // First, get the chart type by name
+    this.dynamicChartLoader.getChartTypeByName(chartTypeName).subscribe({
+      next: (chartType) => {
+        if (chartType) {
+          console.log(`Found chart type:`, chartType);
+          
+          // Load the complete configuration for this chart type
+          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
+            next: (config) => {
+              console.log(`Loaded configuration for ${chartTypeName}:`, config);
+              
+              // Create the chart item with dynamic configuration
+              const chartItem = {
+                cols: 5,
+                rows: 6,
+                x: 0,
+                y: 0,
+                chartid: maxChartId + 1,
+                component: UnifiedChartComponent,
+                name: chartType.displayName || chartTypeName,
+                chartType: chartType.name,
+                xAxis: '',
+                yAxis: '',
+                table: '',
+                connection: undefined,
+                // Add any dynamic fields from the configuration
+                dynamicFields: config.dynamicFields || []
+              };
+              
+              // Add UI components as configuration properties
+              if (config.uiComponents && config.uiComponents.length > 0) {
+                config.uiComponents.forEach(component => {
+                  chartItem[component.componentName] = '';
+                });
+              }
+              
+              this.dashboardArray.push(chartItem);
+              console.log(`Created dynamic chart:`, chartItem);
+            },
+            error: (error) => {
+              console.error(`Error loading configuration for ${chartTypeName}:`, error);
+              // Fallback to default configuration
+              this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
+            }
+          });
+        } else {
+          console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
+          this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
+        }
+      },
+      error: (error) => {
+        console.error('Error loading configuration for chart type:', error);
+        // Fallback to default configuration
+        this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
+      }
+    });
+  }
+  
+  // Fallback method to create default chart configuration
+  createDefaultChart = (chartTypeName: string, chartDisplayName: string) => {
+    console.log(`Creating default chart for ${chartTypeName}`);
+    
+    // Map chart type names to chart types - making it fully dynamic
+    const chartTypeMap = {
+      'bar': 'bar',
+      'line': 'line',
+      'pie': 'pie',
+      'doughnut': 'doughnut',
+      'radar': 'radar',
+      'polar': 'polar',
+      'bubble': 'bubble',
+      'scatter': 'scatter'
+      // Removed hardcoded heatmap entry to make it fully dynamic
+    };
+    
+    // Get the chart type from the name - default to bubble for unknown chart types
+    const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bubble';
+    
+    // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
+    let maxChartId = 0;
+    if (this.dashboardArray && this.dashboardArray.length > 0) {
+      const validChartIds = this.dashboardArray
+        .map(item => item.chartid)
+        .filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
+      
+      if (validChartIds.length > 0) {
+        maxChartId = Math.max(...validChartIds);
+      }
+    }
+    
+    const chartItem = {
+      cols: 5,
+      rows: 6,
+      x: 0,
+      y: 0,
+      chartid: maxChartId + 1,
+      component: UnifiedChartComponent,
+      name: chartDisplayName,
+      chartType: chartType,
+      xAxis: '',
+      yAxis: '',
+      table: '',
+      connection: undefined
+    };
+    
+    this.dashboardArray.push(chartItem);
+    console.log('Created default chart:', chartItem);
+    
+    // Update the dashboard collection
+    this.dashboardCollection.dashboard = this.dashboardArray.slice();
+    
+    // Force gridster to refresh
+    if (this.options && this.options.api) {
+      this.options.api.optionsChanged();
+    }
+  }
+
+  // Helper method to get display name for chart type - making it fully dynamic
+  getChartDisplayName = (chartTypeName: string): string => {
+    const displayNameMap = {
+      'bar': 'Bar Chart',
+      'line': 'Line Chart',
+      'pie': 'Pie Chart',
+      'doughnut': 'Doughnut Chart',
+      'radar': 'Radar Chart',
+      'polar': 'Polar Area Chart',
+      'bubble': 'Bubble Chart',
+      'scatter': 'Scatter Chart'
+      // Removed hardcoded heatmap entry to make it fully dynamic
+    };
+    
+    // For unknown chart types, create a display name by capitalizing the first letter and adding ' Chart'
+    const displayName = displayNameMap[chartTypeName.toLowerCase()];
+    if (displayName) {
+      return displayName;
+    } else {
+      // Capitalize first letter and add ' Chart'
+      return chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
+    }
+  }
+
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html

@@ -26,110 +26,21 @@
 
   <!-- Render different chart types based on chartType input -->
   <div class="chart-wrapper">
-    <!-- Bar Chart -->
+    <!-- Dynamic Chart Container - uses extracted dynamic options and styles but static template -->
-    <div *ngIf="chartType === 'bar'" class="chart-canvas-container">
+    <div *ngIf="dynamicTemplate || chartType" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'bar'"
+        [chartType]="chartType || 'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
     </div>
 
-    <!-- Line Chart -->
+    <!-- Fallback for when no chart type is specified -->
-    <div *ngIf="chartType === 'line'" class="chart-canvas-container">
+    <div *ngIf="!dynamicTemplate && !chartType" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'line'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Pie Chart -->
-    <div *ngIf="chartType === 'pie'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'pie'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Doughnut Chart -->
-    <div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'doughnut'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Bubble Chart -->
-    <div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="bubbleChartData"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'bubble'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Radar Chart -->
-    <div *ngIf="chartType === 'radar'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'radar'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Polar Area Chart -->
-    <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'polarArea'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Scatter Chart -->
-    <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'scatter'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Default/Unknown Chart Type -->
-    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { Dashboard3Service } from '../../../../../../services/builder/dashboard3.service';
 import { FilterService } from '../../common-filter/filter.service';
 import { Subscription } from 'rxjs';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartDataset } from 'chart.js';
+import { DynamicChartLoaderService } from '../../chart-config/dynamic-chart-loader.service';
 
 @Component({
   selector: 'app-unified-chart',
@@ -75,9 +76,151 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
   private documentClickHandler: ((event: MouseEvent) => void) | null = null;
   private filtersInitialized: boolean = false;
 
+  // Dynamic template properties
+  dynamicTemplate: string = '';
+  dynamicStyles: string = '';
+  dynamicOptions: any = null;
+  
+  // Properties to hold extracted values from dynamic template
+  extractedChartType: string = '';
+  extractedDatasetsBinding: string = '';
+  extractedLabelsBinding: string = '';
+  extractedOptionsBinding: string = '';
+  extractedLegendBinding: string = '';
+  extractedChartClickBinding: string = '';
+  extractedChartHoverBinding: string = '';
+
+  // Add setter to log when dynamicTemplate changes
+  setDynamicTemplate(value: string) {
+    console.log('Setting dynamic template:', value);
+    this.dynamicTemplate = value;
+    
+    // Extract values from the dynamic template
+    this.extractTemplateValues(value);
+    
+    // Apply dynamic options if they were extracted
+    if (this.dynamicOptions) {
+      this.mergeDynamicOptions();
+    }
+    
+    // Apply dynamic styles if they were extracted
+    if (this.dynamicStyles) {
+      this.applyDynamicStyles();
+    }
+    
+    // Trigger change detection to ensure the template is rendered
+    setTimeout(() => {
+      console.log('Dynamic template updated in DOM');
+      // Check if the dynamic template container exists
+      const dynamicContainer = this.el.nativeElement.querySelector('.dynamic-template-container');
+      console.log('Dynamic template container:', dynamicContainer);
+      if (dynamicContainer) {
+        console.log('Dynamic container innerHTML:', dynamicContainer.innerHTML);
+      }
+      // Check if the canvas element exists in the DOM
+      const canvasElements = this.el.nativeElement.querySelectorAll('canvas');
+      console.log('Canvas elements found in DOM:', canvasElements.length);
+      if (canvasElements.length > 0) {
+        console.log('First canvas element:', canvasElements[0]);
+        // Check if it has the baseChart directive processed
+        const firstCanvas = canvasElements[0];
+        console.log('Canvas has baseChart directive processed:', firstCanvas.classList.contains('chartjs-render-monitor'));
+      } else {
+        console.log('No canvas elements found - checking if template was inserted but not processed');
+        // Check if there's HTML content in the dynamic container
+        if (dynamicContainer) {
+          const htmlContent = dynamicContainer.innerHTML;
+          console.log('HTML content in dynamic container:', htmlContent);
+          if (htmlContent && htmlContent.includes('canvas')) {
+            console.log('Canvas tag found in HTML but not processed by Angular');
+          }
+        }
+      }
+    }, 100);
+  }
+
+  // Extract values from dynamic template HTML
+  private extractTemplateValues(template: string): void {
+    console.log('Extracting values from template:', template);
+    
+    // Reset extracted values
+    this.extractedChartType = this.chartType || '';
+    this.extractedDatasetsBinding = 'chartData';
+    this.extractedLabelsBinding = 'chartLabels';
+    this.extractedOptionsBinding = 'chartOptions';
+    this.extractedLegendBinding = 'chartLegend';
+    this.extractedChartClickBinding = 'chartClicked($event)';
+    this.extractedChartHoverBinding = 'chartHovered($event)';
+    
+    if (!template) {
+      console.log('No template to extract values from');
+      return;
+    }
+    
+    // Parse the template to extract bindings
+    // Look for [chartType] binding
+    const chartTypeMatch = template.match(/\[chartType\]="([^"]+)"/);
+    if (chartTypeMatch && chartTypeMatch[1]) {
+      this.extractedChartType = chartTypeMatch[1];
+      console.log('Extracted chartType binding:', this.extractedChartType);
+    }
+    
+    // Look for [datasets] binding
+    const datasetsMatch = template.match(/\[datasets\]="([^"]+)"/);
+    if (datasetsMatch && datasetsMatch[1]) {
+      this.extractedDatasetsBinding = datasetsMatch[1];
+      console.log('Extracted datasets binding:', this.extractedDatasetsBinding);
+    }
+    
+    // Look for [labels] binding
+    const labelsMatch = template.match(/\[labels\]="([^"]+)"/);
+    if (labelsMatch && labelsMatch[1]) {
+      this.extractedLabelsBinding = labelsMatch[1];
+      console.log('Extracted labels binding:', this.extractedLabelsBinding);
+    }
+    
+    // Look for [options] binding
+    const optionsMatch = template.match(/\[options\]="([^"]+)"/);
+    if (optionsMatch && optionsMatch[1]) {
+      this.extractedOptionsBinding = optionsMatch[1];
+      console.log('Extracted options binding:', this.extractedOptionsBinding);
+    }
+    
+    // Look for [legend] binding
+    const legendMatch = template.match(/\[legend\]="([^"]+)"/);
+    if (legendMatch && legendMatch[1]) {
+      this.extractedLegendBinding = legendMatch[1];
+      console.log('Extracted legend binding:', this.extractedLegendBinding);
+    }
+    
+    // Look for (chartClick) binding
+    const chartClickMatch = template.match(/\(chartClick\)="([^"]+)"/);
+    if (chartClickMatch && chartClickMatch[1]) {
+      this.extractedChartClickBinding = chartClickMatch[1];
+      console.log('Extracted chartClick binding:', this.extractedChartClickBinding);
+    }
+    
+    // Look for (chartHover) binding
+    const chartHoverMatch = template.match(/\(chartHover\)="([^"]+)"/);
+    if (chartHoverMatch && chartHoverMatch[1]) {
+      this.extractedChartHoverBinding = chartHoverMatch[1];
+      console.log('Extracted chartHover binding:', this.extractedChartHoverBinding);
+    }
+    
+    // Extract CSS styles if present in the template
+    const styleMatch = template.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
+    if (styleMatch && styleMatch[1]) {
+      this.dynamicStyles = styleMatch[1];
+      console.log('Extracted CSS styles:', this.dynamicStyles);
+    }
+  }
+
   constructor(
     private dashboardService: Dashboard3Service,
-    private filterService: FilterService
+    private filterService: FilterService,
+    private dynamicChartLoader: DynamicChartLoaderService,
+    private renderer: Renderer2,
+    private el: ElementRef
   ) { }
 
   ngOnInit(): void {
@@ -110,12 +253,21 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
 
     // Initialize chart options with default structure
     this.initializeChartOptions();
+
+    // Load dynamic template and options for this chart type
+    this.loadDynamicChartConfig();
+
     this.fetchChartData();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     console.log('UnifiedChartComponent input changes:', changes);
 
+    // Log chartType changes specifically
+    if (changes.chartType) {
+      console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
+    }
+
     // Log all input values for debugging
     console.log('Current input values:', {
       chartType: this.chartType,
@@ -179,6 +331,11 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       });
     }
 
+    // Load dynamic template and options if chart type changed
+    if (chartTypeChanged) {
+      this.loadDynamicChartConfig();
+    }
+
     // Only fetch data if the actual chart configuration changed and we're not already fetching
     if (!this.isFetchingData && (chartTypeChanged || xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
       drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
@@ -217,6 +374,175 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  // Load dynamic chart configuration (template, styles, and options) for the current chart type
+  private loadDynamicChartConfig(): void {
+    if (!this.chartType) {
+      console.log('No chart type specified, skipping dynamic chart config loading');
+      return;
+    }
+
+    console.log(`Loading dynamic chart configuration for chart type: ${this.chartType}`);
+    console.log('Current dynamic template:', this.dynamicTemplate);
+
+    // Get chart type by name and load its configuration
+    console.log('Calling getChartTypeByName with:', this.chartType);
+    this.dynamicChartLoader.getChartTypeByName(this.chartType).subscribe({
+      next: (chartType) => {
+        console.log('Received chart type by name :', chartType);
+        if (chartType) {
+          console.log('Found chart type:', chartType);
+
+          // Load the complete configuration for this chart type
+          console.log('Loading chart configuration for chart type ID:', chartType.id);
+          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
+            next: (config) => {
+              console.log('Received chart configuration:', config);
+              console.log('Loaded chart configuration:', config);
+
+              // Apply the first template if available (for CSS styles)
+              if (config.templates && config.templates.length > 0) {
+                const defaultTemplate = config.templates.find(t => t.isDefault) || config.templates[0];
+                if (defaultTemplate) {
+                  const templateHtml = defaultTemplate.templateHtml || '';
+                  console.log('Template HTML to be set:', templateHtml);
+                  this.setDynamicTemplate(templateHtml);
+                  this.dynamicStyles = defaultTemplate.templateCss || '';
+
+                  // Apply styles to the component
+                  this.applyDynamicStyles();
+
+                  console.log('Applied dynamic template and styles', {
+                    template: this.dynamicTemplate,
+                    styles: this.dynamicStyles
+                  });
+                }
+              } else {
+                console.log('No templates found for chart type:', this.chartType);
+              }
+
+              // Apply dynamic options if available
+              console.log('Checking for dynamic fields:', config.dynamicFields);
+              if (config.dynamicFields && config.dynamicFields.length > 0) {
+                // Find the field that contains chart options
+                const optionsField = config.dynamicFields.find(field =>
+                  field.fieldName === 'chartOptions' || field.fieldName.toLowerCase().includes('options'));
+
+                if (!optionsField) {
+                  console.log('No chartOptions field found in dynamic fields');
+                }
+
+                if (optionsField && optionsField.fieldOptions) {
+                  try {
+                    this.dynamicOptions = JSON.parse(optionsField.fieldOptions);
+                    console.log('Applied dynamic chart options:', this.dynamicOptions);
+
+                    // Merge dynamic options with current chart options
+                    this.mergeDynamicOptions();
+                  } catch (e) {
+                    console.error('Error parsing dynamic chart options:', e);
+                  }
+                }
+              } else {
+                console.log('No dynamic fields found for chart type:', this.chartType);
+              }
+            },
+            error: (error) => {
+              console.error('Error loading chart configuration:', error);
+            }
+          });
+        } else {
+          console.log(`Chart type ${this.chartType} not found in database`);
+          // Log available chart types for debugging
+          console.log('Available chart types in database:');
+          this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
+            next: (chartTypes) => {
+              console.log('All chart types:', chartTypes);
+            },
+            error: (error) => {
+              console.error('Error loading chart types:', error);
+            }
+          });
+        }
+      },
+      error: (error) => {
+        console.error('Error loading chart type:', error);
+      }
+    });
+  }
+
+  // Merge dynamic options with current chart options
+  private mergeDynamicOptions(): void {
+    if (this.dynamicOptions) {
+      console.log('Merging dynamic options with existing chart options:', {
+        existing: this.chartOptions,
+        dynamic: this.dynamicOptions
+      });
+      
+      // Deep merge dynamic options with existing chart options
+      this.chartOptions = this.deepMerge(this.chartOptions, this.dynamicOptions);
+      
+      console.log('Merged chart options:', this.chartOptions);
+
+      // If we have a chart instance, update it
+      if (this.chart) {
+        this.chart.options = this.chartOptions;
+        this.chart.render();
+      }
+    }
+  }
+  
+  // Helper method for deep merging objects
+  private deepMerge(target: any, source: any): any {
+    const result = { ...target };
+    
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
+          // Recursively merge objects
+          result[key] = this.deepMerge(result[key] || {}, source[key]);
+        } else {
+          // Override with source value
+          result[key] = source[key];
+        }
+      }
+    }
+    
+    return result;
+  }
+
+  // Apply dynamic styles to the component
+  private applyDynamicStyles(): void {
+    // Remove any previously applied dynamic styles
+    const existingStyles = this.el.nativeElement.querySelectorAll('.dynamic-chart-styles');
+    existingStyles.forEach((style: HTMLElement) => {
+      style.remove();
+    });
+
+    // Apply new styles if available
+    if (this.dynamicStyles) {
+      const styleElement = this.renderer.createElement('style');
+      this.renderer.setAttribute(styleElement, 'class', 'dynamic-chart-styles');
+      this.renderer.setProperty(styleElement, 'textContent', this.dynamicStyles);
+      this.renderer.appendChild(this.el.nativeElement, styleElement);
+      console.log('Applied dynamic styles to component');
+    }
+  }
+
+  // Initialize chart after dynamic template is rendered
+  private initializeDynamicChart(): void {
+    // This is a complex issue - Angular directives in dynamically inserted HTML
+    // don't get processed automatically. We would need to use a different approach
+    // such as creating components dynamically or using a different template mechanism.
+    console.log('Initializing dynamic chart - this is where we would handle chart initialization');
+    
+    // NOTE: The baseChart directive in dynamically inserted HTML via [innerHTML] 
+    // will not be processed by Angular. This is a limitation of Angular's change detection.
+    // Possible solutions:
+    // 1. Use Angular's dynamic component creation API
+    // 2. Modify the approach to use a different template mechanism
+    // 3. Keep the canvas element in the static template and only load options dynamically
+  }
+
   // Check if filters are available
   hasFilters(): boolean {
     const hasBaseFilters = this.baseFilters && this.baseFilters.length > 0;
@@ -349,6 +675,12 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       }
     };
 
+    // If we have dynamic options, use them instead of the default ones
+    if (this.dynamicOptions) {
+      this.mergeDynamicOptions();
+      return;
+    }
+
     switch (this.chartType) {
       case 'bar':
         this.initializeBarChartOptions();

frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html

@@ -1,4 +1,4 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
     <li>
         <a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']">
             <clr-icon shape="home"></clr-icon>
@@ -8,400 +8,236 @@
         <a href="">
             <clr-icon shape="flag"></clr-icon>{{ 'SEQ_GENERATOR' | translate }}</a>
     </li>
+
 </ol>
 
-<section class="sq-hero">
+<div class="dg-wrapper">
-  <div class="sq-hero__content">
+    <div class="clr-row">
-    <div class="sq-hero__icon"><clr-icon shape="number-list"></clr-icon></div>
+        <div class="clr-col-8">
-    <div>
+            <h3>{{ 'SEQ_GENERATOR' | translate }}</h3>
-      <h2 class="sq-hero__title">{{ 'SEQ_GENERATOR' | translate }}</h2>
-      <p class="sq-hero__subtitle">{{ 'FND' | translate }}</p>
         </div>
-  </div>
-  <div class="sq-hero__actions">
-    <button class="sq-btn sq-btn-outline" (click)="onExport()">
-      <clr-icon shape="export"></clr-icon> <span class="sq-btn-text">{{ 'EXPORT' | translate }}</span>
-    </button>
-    <button id="add" class="sq-btn sq-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon><span class="sq-btn-text">{{ 'ADD' | translate }}</span>
-    </button>
-  </div>
-</section>
 
-<div class="sq-container">
+        <div class="clr-col-4" style="text-align: right;">
-  <div class="sq-toolbar">
+            <button class="btn btn-outline" (click)="onExport()">
-    <div class="sq-toolbar__left">
+                <clr-icon shape="export"></clr-icon> {{ 'EXPORT' | translate }}
-      <div class="sq-search">
-        <clr-icon shape="search"></clr-icon>
-        <input class="sq-search__input" type="text" [placeholder]="'SEARCH_ALL_FIELDS' | translate" [(ngModel)]="filterText" />
-      </div>
-    </div>
-    <div class="sq-toolbar__right sq-stats">
-      <div class="sq-stat">
-        <div class="sq-stat__value">{{ totalSequences }}</div>
-        <div class="sq-stat__label">{{ 'TOTAL_SEQUENCES' | translate }}</div>
-      </div>
-      <div class="sq-view-toggle">
-        <button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-          <clr-icon shape="view-cards"></clr-icon>
             </button>
-        <button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+            <button id="add" class="btn btn-primary" (click)="goToAdd()">
-          <clr-icon shape="table"></clr-icon>
+                <clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }}
             </button>
         </div>
     </div>
-  </div>
 
-  <clr-datagrid class="sq-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'" [(clrDgSelected)]="selected">
+    <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
         <clr-dg-placeholder>
             <ng-template #loadingSpinner>
-        <clr-spinner>{{ 'LOADING' | translate }} ... </clr-spinner>
+                <clr-spinner>Loading ... </clr-spinner>
             </ng-template>
             <div *ngIf="error;else loadingSpinner">{{error}}</div>
         </clr-dg-placeholder>
-    
+        <clr-dg-column [clrDgField]="'seq_no'">
-    <clr-dg-column [clrDgField]="'current_no'" class="sq-col sq-col--no">
             <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
+                {{ 'CURRENT_NO' | translate }}
-          <clr-icon shape="hashtag"></clr-icon> {{ 'CURRENT_NO' | translate }}
+            </ng-container>
-        </span>
+        </clr-dg-column>
+        <clr-dg-column [clrDgField]="'seq_no'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'NAME' | translate }}
+            </ng-container>
+        </clr-dg-column>
+        <clr-dg-column [clrDgField]="'prefix'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'PREFIX' | translate }}
             </ng-container>
         </clr-dg-column>
 
-    <clr-dg-column [clrDgField]="'sequence_name'" class="sq-col sq-col--name">
+        <clr-dg-column [clrDgField]="'seperator'">
             <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
+                {{ 'SEPARATOR' | translate }}
-          <clr-icon shape="tag"></clr-icon> {{ 'NAME' | translate }}
-        </span>
             </ng-container>
         </clr-dg-column>
 
-    <clr-dg-column [clrDgField]="'prefix'" class="sq-col sq-col--prefix">
+        <clr-dg-column [clrDgField]="'digit'">
             <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
+                {{ 'SEQUENCE_SIZE' | translate }}
-          <clr-icon shape="text"></clr-icon> {{ 'PREFIX' | translate }}
-        </span>
             </ng-container>
         </clr-dg-column>
-
+        <!-- <clr-dg-column [clrDgField]="'date_format'">
-    <clr-dg-column [clrDgField]="'seperator'" class="sq-col sq-col--separator">
             <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
+                Date Format
-          <clr-icon shape="split-string"></clr-icon> {{ 'SEPARATOR' | translate }}
-        </span>
             </ng-container>
-    </clr-dg-column>
+        </clr-dg-column> -->
-
+        <clr-dg-row *clrDgItems="let user of alldata" [clrDgItem]="user">
-    <clr-dg-column [clrDgField]="'sequence_size'" class="sq-col sq-col--size">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="ruler"></clr-icon> {{ 'SEQUENCE_SIZE' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'suffix'" class="sq-col sq-col--suffix">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="text"></clr-icon> {{ 'SUFFIX' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'starting_no'" class="sq-col sq-col--starting">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="play"></clr-icon> {{ 'STARTING_NO' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'sequence_code'" class="sq-col sq-col--code">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="code"></clr-icon> {{ 'SEQUENCE_CODE' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-row *clrDgItems="let user of filteredSequences" [clrDgItem]="user">
             <clr-dg-cell>{{user.current_no}}</clr-dg-cell>
             <clr-dg-cell>{{user.sequence_name}}</clr-dg-cell>
             <clr-dg-cell>{{user.prefix}}</clr-dg-cell>
             <clr-dg-cell>{{user.seperator}}</clr-dg-cell>
             <clr-dg-cell>{{user.sequence_size}}</clr-dg-cell>
-      <clr-dg-cell>{{user.suffix}}</clr-dg-cell>
+            <!-- <clr-dg-cell>{{user.date_format}}</clr-dg-cell> -->
-      <clr-dg-cell>{{user.starting_no}}</clr-dg-cell>
-      <clr-dg-cell>{{user.sequence_code}}</clr-dg-cell>
             <clr-dg-action-overflow>
-        <button class="sq-action-item" (click)="goToEdit(user)"> 
+                <button class="action-item" (click)="goToEdit(user)"> {{ 'EDIT' | translate }} <clr-icon shape="edit"
-          {{ 'EDIT' | translate }} 
+                        class="is-error"></clr-icon></button>
-          <clr-icon shape="edit"></clr-icon>
+                <button class="action-item" (click)="onDelete(user)"> {{ 'DELETE' | translate }}<clr-icon shape="trash"
-        </button>
+                        class="is-error"></clr-icon></button>
-        <button class="sq-action-item sq-btn-error" (click)="onDelete(user)"> 
-          {{ 'DELETE' | translate }}
-          <clr-icon shape="trash"></clr-icon>
-        </button>
             </clr-dg-action-overflow>
+
+
         </clr-dg-row>
 
-    <clr-dg-footer class="sq-grid-footer">
+        <clr-dg-footer>
             <clr-dg-pagination #pagination [clrDgPageSize]="10">
-        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">
+                <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{ 'USERS_PER_PAGE' | translate
-          {{ 'RECORDS_PER_PAGE' | translate }}
+                    }}</clr-dg-page-size>
-        </clr-dg-page-size>
+                {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
-        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} 
-        {{ 'OF' | translate }} {{pagination.totalItems}} {{ 'RECORDS' | translate }}
             </clr-dg-pagination>
         </clr-dg-footer>
     </clr-datagrid>
-
-  <div class="sq-cards" *ngIf="viewMode==='cards'">
-    <div class="sq-card-item" *ngFor="let user of filteredSequences">
-      <div class="sq-card-item__header">
-        <div class="sq-card-item__icon"><clr-icon shape="number-list"></clr-icon></div>
-        <div class="sq-card-item__title">{{user.sequence_name}}</div>
-        <div class="sq-card-item__badge">{{user.current_no}}</div>
-      </div>
-      <div class="sq-card-item__body">
-        <div class="sq-kv"><span>{{ 'PREFIX' | translate }}</span><strong>{{user.prefix}}</strong></div>
-        <div class="sq-kv"><span>{{ 'SEPARATOR' | translate }}</span><strong>{{user.seperator}}</strong></div>
-        <div class="sq-kv"><span>{{ 'SEQUENCE_SIZE' | translate }}</span><strong>{{user.sequence_size}}</strong></div>
-        <div class="sq-kv" *ngIf="user.suffix"><span>{{ 'SUFFIX' | translate }}</span><strong>{{user.suffix}}</strong></div>
-        <div class="sq-kv" *ngIf="user.starting_no"><span>{{ 'STARTING_NO' | translate }}</span><strong>{{user.starting_no}}</strong></div>
-        <div class="sq-kv" *ngIf="user.sequence_code"><span>{{ 'SEQUENCE_CODE' | translate }}</span><strong>{{user.sequence_code}}</strong></div>
-        <div class="sq-kv" *ngIf="user.demonstration"><span>{{ 'DEMONSTRATION' | translate }}</span><strong>{{user.demonstration}}</strong></div>
-      </div>
-      <div class="sq-card-item__footer">
-        <button class="sq-btn sq-btn-sm sq-btn-outline" (click)="goToEdit(user)">
-          <clr-icon shape="edit"></clr-icon> {{ 'EDIT' | translate }}
-        </button>
-        <button class="sq-btn sq-btn-sm sq-btn-outline" (click)="onDelete(user)">
-          <clr-icon shape="trash"></clr-icon> {{ 'DELETE' | translate }}
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 
-<clr-modal class="sq-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <div class="modal-body">
-    <div class="sq-delete-header">
-      <div class="sq-delete-icon">
-        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-      </div>
-      <h1 class="sq-delete-title">{{ 'ARE_YOU_SURE_WANT_TO_DELETE' | translate }}?</h1>
-      <p class="sq-delete-subtitle">{{ 'THIS_ACTION_CANNOT_BE_UNDONE' | translate }}</p>
-    </div>
-    <div class="sq-delete-details" *ngIf="rowSelected.id">
-      <div class="sq-delete-detail-item">
-        <span class="sq-delete-detail-label">{{ 'SEQUENCE_ID' | translate }}:</span>
-        <span class="sq-delete-detail-value">{{rowSelected.id}}</span>
-      </div>
-      <div class="sq-delete-detail-item">
-        <span class="sq-delete-detail-label">{{ 'SEQUENCE_NAME' | translate }}:</span>
-        <span class="sq-delete-detail-value">{{rowSelected.sequence_name}}</span>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="sq-btn sq-btn-outline" (click)="modaldelete = false">
-        <clr-icon shape="times"></clr-icon>
-        <span>{{ 'CANCEL' | translate }}</span>
-      </button>
-      <button type="submit" (click)="delete(rowSelected.id)" class="sq-btn sq-btn-error">
-        <clr-icon shape="trash"></clr-icon>
-        <span>{{ 'DELETE' | translate }}</span>
-      </button>
-    </div>
-  </div>
-</clr-modal>
 
-<clr-modal class="sq-modal" [(clrModalOpen)]="modaladd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title sq-modal-title">
-    <clr-icon shape="plus"></clr-icon> {{ 'ADD_SEQUENCE_GENERATOR' | translate }}
-  </h3>
-  <div class="modal-body">
-    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="sq-form">
-      <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_name" class="sq-form-label">
-            {{ 'NAME' | translate }}<span class="required-field">*</span>
-          </label>
-          <input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" formControlName="sequence_name">
-          <div *ngIf="submitted && entryForm.controls.sequence_name.errors" class="sq-error-message">
-            <div *ngIf="submitted && entryForm.controls.sequence_name.errors.required">
-              {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
-            </div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_code" class="sq-form-label">
-            {{ 'SEQUENCE_CODE' | translate }}
-          </label>
-          <input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" formControlName="sequence_code">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="demonstration" class="sq-form-label">
-            {{ 'DEMONSTRATION' | translate }}
-          </label>
-          <input type="text" id="demonstration" class="sq-form-input" formControlName="demonstration">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="prefix" class="sq-form-label">
-            {{ 'PREFIX' | translate }}<span class="required-field">*</span>
-          </label>
-          <input type="text" id="prefix" class="sq-form-input" formControlName="prefix" name="prefix">
-          <div *ngIf="submitted && entryForm.controls.prefix.errors" class="sq-error-message">
-            <div *ngIf="submitted && entryForm.controls.prefix.errors.required">
-              {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
-            </div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="suffix" class="sq-form-label">
-            {{ 'SUFFIX' | translate }}
-          </label>
-          <input type="text" id="suffix" class="sq-form-input" name="suffix" formControlName="suffix">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="seperator" class="sq-form-label">
-            {{ 'SEPARATOR' | translate }}
-          </label>
-          <input type="text" id="seperator" class="sq-form-input" name="seperator" formControlName="seperator">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="starting_no" class="sq-form-label">
-            {{ 'STARTING_NO' | translate }}
-          </label>
-          <input type="number" id="starting_no" class="sq-form-input" name="starting_no" formControlName="starting_no">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="current_no" class="sq-form-label">
-            {{ 'CURRENT_NO' | translate }}
-          </label>
-          <input type="number" id="current_no" class="sq-form-input" formControlName="current_no">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_size" class="sq-form-label">
-            {{ 'SEQUENCE_SIZE' | translate }}
-          </label>
-          <input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" formControlName="sequence_size">
-        </div>
-      </div>
-      
-      <div class="sq-form-actions">
-        <button type="button" class="sq-btn sq-btn-outline" (click)="modaladd = false">
-          <clr-icon shape="times"></clr-icon>
-          <span>{{ 'CANCEL' | translate }}</span>
-        </button>
-        <button type="submit" class="sq-btn sq-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>{{ 'ADD' | translate }}</span>
-        </button>
-      </div>
-    </form>
-  </div>
-</clr-modal>
-
-<clr-modal class="sq-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title sq-modal-title">
-    <clr-icon shape="edit"></clr-icon> {{ 'UPDATE_SEQUENCE_GENERATOR' | translate }}
-  </h3>
     <div class="modal-body" *ngIf="rowSelected.id">
-    <div class="sq-form-help">
+        <h1 class="delete">Are You Sure Want to delete?</h1>
-      {{ 'SEQUENCE_ID' | translate }}: <code class="clr-code">{{rowSelected.id}}</code>
+        <h2 class="heading">{{rowSelected.id}}</h2>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+            <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
         </div>
+    </div>
+</clr-modal>
 
-    <form (ngSubmit)="onUpdate(rowSelected.id)" class="sq-form">
+
+<clr-modal [(clrModalOpen)]="modaladd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Add Sequence Genarator</h3>
+    <div class="modal-body">
+        <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
             <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
+                <div class="clr-col-sm-12">
-          <label for="sequence_name" class="sq-form-label">
+                    <label for="name">Name<span class="required-field">*</span></label>
-            {{ 'NAME' | translate }}<span class="required-field">*</span>
+                    <input type="text" class="clr-input" name="sequence_name" formControlName="sequence_name">
-          </label>
-          <input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
-          <div class="sq-error-message" *ngIf="!rowSelected.sequence_name">
-            {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
                 </div>
+                <div class="clr-col-sm-12">
+                    <label for="name">Sequence Code</label>
+                    <input type="text" class="clr-input" name="sequence_code" formControlName="sequence_code">
+                </div>
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Implementation</label>
+                    <select name="implementation" formControlName="implementation" class="clr-dropdown">
+                            <option>standard</option>
+                            <option>shared</option>
+                    </select>
+                </div> -->
+                <div class="clr-col-sm-12">
+                    <label for="tags">Demonstration</label>
+                    <input type="text" class="clr-input" formControlName="demonstration">
+                </div>
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Active</label>
+                    <input type="checkbox" formControlName="active" name="active" clrCheckbox>
+                </div> -->
+
+                <div class="clr-col-sm-12">
+                    <label for="name">Prefix<span class="required-field">*</span></label>
+                    <input type="text" class="clr-input" formControlName="prefix" name="prefix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">suffix</label>
+                    <input type="text" class="clr-input" name="suffix" formControlName="suffix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Separator</label>
+                    <input type="text" class="clr-input" name="seperator" formControlName="seperator">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Starting No</label>
+                    <input type="number" class="clr-input" name="starting_no" formControlName="starting_no">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Current No</label>
+                    <input type="number" class="clr-input" formControlName="current_no">
                 </div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
+                <div class="clr-col-sm-12">
-          <label for="sequence_code" class="sq-form-label">
+                    <label for="tags"> Size</label>
-            {{ 'SEQUENCE_CODE' | translate }}
+                    <input type="number" class="clr-input" name="sequence_size" formControlName="sequence_size">
-          </label>
-          <input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
                 </div>
-        
+                <!-- <div class="clr-col-sm-12">
-        <div class="clr-col-md-6 clr-col-sm-12">
+                    <label for="tags">Date Format</label>
-          <label for="demonstration" class="sq-form-label">
+                    <input type="text" class="clr-input" name="date_format" formControlName="date_format">
-            {{ 'DEMONSTRATION' | translate }}
+                </div> -->
-          </label>
-          <input type="text" id="demonstration" class="sq-form-input" name="demonstration" [(ngModel)]="rowSelected.demonstration" readonly>
             </div>
-        
+            <br>
-        <div class="clr-col-md-6 clr-col-sm-12">
+            <div class="modal-footer">
-          <label for="prefix" class="sq-form-label">
+                <button type="button" class="btn btn-outline" (click)="modaladd = false">Cancel</button>
-            {{ 'PREFIX' | translate }}<span class="required-field">*</span>
+                <button type="submit" class="btn btn-primary">ADD</button>
-          </label>
-          <input type="text" id="prefix" class="sq-form-input" name="prefix" [(ngModel)]="rowSelected.prefix">
-          <div class="sq-error-message" *ngIf="!rowSelected.prefix">
-            {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="suffix" class="sq-form-label">
-            {{ 'SUFFIX' | translate }}
-          </label>
-          <input type="text" id="suffix" class="sq-form-input" name="suffix" [(ngModel)]="rowSelected.suffix">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="seperator" class="sq-form-label">
-            {{ 'SEPARATOR' | translate }}
-          </label>
-          <input type="text" id="seperator" class="sq-form-input" name="seperator" [(ngModel)]="rowSelected.seperator">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="starting_no" class="sq-form-label">
-            {{ 'STARTING_NO' | translate }}
-          </label>
-          <input type="number" id="starting_no" class="sq-form-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="current_no" class="sq-form-label">
-            {{ 'CURRENT_NO' | translate }}
-          </label>
-          <input type="number" id="current_no" class="sq-form-input" name="current_no" [(ngModel)]="rowSelected.current_no" readonly>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_size" class="sq-form-label">
-            {{ 'SEQUENCE_SIZE' | translate }}
-          </label>
-          <input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
-        </div>
-      </div>
-      
-      <div class="sq-form-actions">
-        <button type="button" class="sq-btn sq-btn-outline" (click)="modaledit = false">
-          <clr-icon shape="times"></clr-icon>
-          <span>{{ 'CANCEL' | translate }}</span>
-        </button>
-        <button type="submit" class="sq-btn sq-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>{{ 'UPDATE' | translate }}</span>
-        </button>
             </div>
         </form>
     </div>
+
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Update Sequence Genarator</h3>
+    <div class="modal-body" *ngIf="rowSelected.id">
+        <h2 class="heading">{{rowSelected.id}}</h2>
+        <form (ngSubmit)="onUpdate(rowSelected.id)">
+            <div class="clr-row">
+                <div class="clr-col-sm-12">
+                    <label for="name">Name<span class="required-field">*</span></label>
+                    <input type="text" class="clr-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="name">Sequence Code</label>
+                    <input type="text" class="clr-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
+                </div>
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Implementation</label>
+                    <select name="implementation" class="clr-dropdown" [(ngModel)]="rowSelected.implementation">
+                <option>standard</option>
+                <option>shared</option>
+              </select>
+                </div> -->
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Active</label>
+                    <input type="checkbox" name="active" name="menuId" clrCheckbox [(ngModel)]="rowSelected.active">
+                </div> -->
+
+                <div class="clr-col-sm-12">
+                    <label for="name">Prefix<span class="required-field">*</span></label>
+                    <input type="text" class="clr-input" name="prefix" [(ngModel)]="rowSelected.prefix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">suffix</label>
+                    <input type="text" class="clr-input" name="suffix" [(ngModel)]="rowSelected.suffix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Separator</label>
+                    <input type="text" class="clr-input" name="seperator" [(ngModel)]="rowSelected.seperator">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Starting No</label>
+                    <input type="number" class="clr-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Current No</label>
+                    <input type="number" class="clr-input" name="current_no" [(ngModel)]="rowSelected.current_no"
+                        readonly>
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Demonstration</label>
+                    <input type="text" class="clr-input" name="demonstration" [(ngModel)]="rowSelected.demonstration"
+                        readonly>
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Sequence Size</label>
+                    <input type="number" class="clr-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
+                </div>
+            </div>
+            <br>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+                <button type="submit" class="btn btn-primary">Update</button>
+            </div>
+        </form>
+    </div>
+
 </clr-modal>

frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss

@@ -1,694 +1,72 @@
-@import '../../../../../styles/_design-tokens.scss';
+input[type=text],[type=number],
-
+[type=date],
-// Sequence Generator Styles
+[type=password] {
-.sq-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-}
-
-.sq-container {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-}
-
-// Toolbar, search and stats
-.sq-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-}
-
-.sq-search {
-  position: relative;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
     width: 100%;
-    padding: 12px 12px 12px 40px;
+    padding: 15px 20px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    // margin: 3px 0;
-    border-radius: 8px;
+    background-color: rgb(255, 255, 255);
-    font-size: 14px;
+    display: inline-block;
-    transition: all 200ms ease-out;
+    border: 1px solid #ccc;
-    background: var(--theme-surface);
+    border-radius: 4px;
-    color: var(--theme-text);
+    box-sizing: border-box;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-    font-family: var(--theme-font-primary);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-    }
-  }
-}
-
-.sq-stats {
-  display: flex;
-  gap: 16px;
-}
-
-.sq-stat {
-  min-width: 110px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.04);
-  border-radius: var(--theme-border-radius);
-  padding: 16px;
-  text-align: center;
-  box-shadow: var(--theme-shadow);
-
-  &__value {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--theme-primary);
-    margin-bottom: 4px;
-  }
-
-  &__label {
-    font-size: 12px;
-    color: var(--theme-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-}
-
-.sq-view-toggle {
-  display: flex;
-  gap: 8px;
-  
-  .sq-btn {
-    min-width: 40px;
-  }
-}
-
-// Grid columns
-.sq-col-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--theme-text-secondary);
-}
-
-.sq-col--prefix .sq-col-title clr-icon,
-.sq-col--separator .sq-col-title clr-icon,
-.sq-col--size .sq-col-title clr-icon {
-  color: var(--theme-primary);
-}
-
-// Data Grid Styles
-.sq-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.sq-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-// Card View Styles
-.sq-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
-}
-
-.sq-card-item {
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  overflow: hidden;
-  transition: all 200ms ease-out;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    padding: 20px;
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 12px;
-    margin-right: 16px;
-    
-    clr-icon {
-      width: 24px;
-      height: 24px;
-      color: white;
-    }
-  }
-
-  &__title {
-    flex: 1;
-    font-size: 18px;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  &__badge {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    padding: 4px 12px;
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  &__body {
-    padding: 20px;
-  }
-
-  &__footer {
-    display: flex;
-    gap: 12px;
-    padding: 0 20px 20px;
-  }
-}
-
-.sq-kv {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-  &:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border-bottom: none;
-  }
-
-  span {
-    color: var(--theme-text-secondary);
-    font-size: 14px;
-  }
-
-  strong {
-    color: var(--theme-text);
-    font-weight: 500;
-  }
-}
-
-// Form Styles
-.sq-form {
-  .clr-row {
-    margin: 0 -12px;
-  }
-  
-  .clr-col-md-6,
-  .clr-col-sm-12 {
-    padding: 0 12px;
-    margin-bottom: 20px;
-  }
-}
-
-.sq-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.sq-form-input,
-.sq-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.sq-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.sq-error-message {
-  color: var(--theme-error, #ef4444);
-  font-size: 12px;
-  margin-top: 6px;
-  font-weight: 500;
 }
 
 .required-field {
-  color: var(--theme-error, #ef4444);
+    color: red;
-  margin-left: 4px;
+    font-size: 18px;
 }
 
-.sq-form-help {
+.green {
-  color: var(--theme-text-secondary);
+    background-color: rgb(156, 231, 156);
-  font-size: 12px;
+    color: black;
-  margin-bottom: 16px;
-  font-family: var(--theme-font-primary);
 }
 
-.sq-form-actions {
+.blue {
-  display: flex;
+    background-color: #57abcf; //rgb(82, 87, 161);
-  gap: 12px;
+    color: black;
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-// Modern Button Styles using ThemeService
+.td-title {
-.sq-btn {
+    text-align: center;
-  display: inline-flex;
+    width: 150px;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.sq-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.sq-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.sq-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.sq-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
     color: white;
-    border-color: var(--theme-primary);
+    font-weight: bold;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    background-color: rgba(63, 122, 231, 0.863);
-
+    //color: rgb(24, 13, 13);
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-    &:active {
+th {
-      transform: translateY(0);
+    //background-color:rgb(170, 169, 169);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    font-weight: bold;
-    }
 }
 
-  &.sq-btn-outline {
+.td-content {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1);
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.sq-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.sq-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-// Action items in datagrid
-.sq-action-item {
-  @extend .sq-btn;
-  @extend .sq-btn-ghost;
-  @extend .sq-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
     text-align: left;
-
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
 }
 
-  &.sq-btn-error {
+.delete,
-    color: var(--theme-error, #ef4444);
+.heading {
-
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-      color: var(--theme-error, #ef4444);
-    }
-  }
-}
-
-// Delete Modal Styles
-.sq-delete-header {
     text-align: center;
-  padding: 24px;
+    color: red;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.sq-delete-icon {
+.section p {
-  color: var(--theme-error, #ef4444);
+    background-color: rgb(206, 201, 201);
-  margin-bottom: 16px;
+    padding: 10px;
+    font-size: 18px;
 }
 
-.sq-delete-title {
+select {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.sq-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.sq-delete-details {
-  padding: 24px;
-}
-
-.sq-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.sq-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.sq-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-// Modal Styles
-.sq-modal-title clr-icon {
-  margin-right: 6px;
-  color: var(--theme-primary);
-}
-
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Breadcrumb
-.mm-breadcrumb {
-  color: var(--theme-text-secondary);
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .sq-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    &__actions {
     width: 100%;
-      justify-content: center;
+    padding: 5px 5px;
-    }
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
-  .sq-toolbar {
+input.ng-invalid.ng-touched {
-    flex-direction: column;
+    border-color: red;
-    gap: 16px;
 }
 
-  .sq-search {
+.error_mess {
-    max-width: 100%;
+    color: red;
-  }
-  
-  .sq-stats {
-    flex-direction: column;
-    width: 100%;
-  }
-  
-  .sq-cards {
-    grid-template-columns: 1fr;
-  }
-  
-  .sq-form-actions {
-    flex-direction: column;
-  }
-  
-  .sq-btn {
-    width: 100%;
-    justify-content: center;
-  }
-  
-  .sq-card-item__footer {
-    flex-direction: column;
-  }
 }

frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts

@@ -1,13 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { SequenceService } from 'src/app/services/api/sequence.service';
 import { ExcelService } from 'src/app/services/excel.service';
 import * as moment from 'moment';
 import { HttpErrorResponse } from '@angular/common/http';
-import { ThemeService } from 'src/app/services/theme.service';
-
 @Component({
   selector: 'app-sequencegenarator',
   templateUrl: './sequencegenarator.component.html',
@@ -24,70 +22,27 @@ export class SequencegenaratorComponent implements OnInit {
   modaladd = false;
   modaledit = false;
   submitted = false;
-  filterText = '';
-  // Changed default view to cards
-  viewMode: 'table' | 'cards' = 'cards';
 
   public entryForm: FormGroup;
-  
+  constructor(private seqservice: SequenceService, private router: Router, private toastr: ToastrService, private _fb: FormBuilder,
-  constructor(
+    private route: ActivatedRoute, private excel: ExcelService) { }
-    private seqservice: SequenceService, 
-    private router: Router, 
-    private toastr: ToastrService, 
-    private _fb: FormBuilder,
-    private route: ActivatedRoute, 
-    private excel: ExcelService, 
-    private themeService: ThemeService
-  ) { }
 
   ngOnInit(): void {
-    // Ensure theme variables are applied to the view
-    this.themeService.currentTheme$.subscribe(() => {
-      // CSS variables are updated globally; no extra handling needed here
-    });
-    
     this.getall();
     this.entryForm = this._fb.group({
-      prefix: [null, Validators.required],
+      prefix: [null],
       sequence_size: [null],
       suffix: [null],
       starting_no: [null],
       seperator: [null],
-      sequence_name: [null, Validators.required],
+
+      sequence_name: [null],
       sequence_code: [null],
       demonstration: [null],
+
       current_no: [null]
     });
   }
-  
-  // Stats & filtering helpers for UI only
-  get totalSequences(): number { 
-    return ((this.alldata as unknown as any[]) || []).length; 
-  }
-  
-  get filteredSequences(): any[] {
-    const items: any[] = (this.alldata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    
-    // Search across all relevant fields
-    return items.filter(s => (
-      (s?.sequence_name || '').toLowerCase().includes(text) ||
-      (s?.prefix || '').toLowerCase().includes(text) ||
-      (s?.sequence_code || '').toLowerCase().includes(text) ||
-      (s?.suffix || '').toLowerCase().includes(text) ||
-      (s?.seperator || '').toLowerCase().includes(text) ||
-      (s?.sequence_size?.toString() || '').includes(text) ||
-      (s?.starting_no?.toString() || '').includes(text) ||
-      (s?.current_no?.toString() || '').includes(text) ||
-      (s?.demonstration || '').toLowerCase().includes(text)
-    ));
-  }
-  
-  setViewMode(mode: 'table' | 'cards') { 
-    this.viewMode = mode; 
-  }
-  
   getall() {
     this.seqservice.getAll().subscribe((data) => {
       console.log(data);
@@ -102,8 +57,27 @@ export class SequencegenaratorComponent implements OnInit {
       if (error) {
         this.error = "No data Available OR server Error";
       }
+
     })
   }
+  // onSubmit(){
+  // console.log(this.entryForm.value);
+  // this.seqservice.create(this.entryForm.value).subscribe((data)=>{
+  //   console.log(data);
+  //   if (data) {
+  //     this.toastr.success('Added successfully');
+  //         }
+  // },
+  // (error) => {
+  // console.log('Error in adding data...',+error);
+  // if(error){
+  //   this.toastr.error('Not added Data');
+  // }
+
+  // });
+  // this.modaladd=false;
+  // }
+
 
   onSubmit() {
     console.log(this.entryForm.value);
@@ -112,8 +86,10 @@ export class SequencegenaratorComponent implements OnInit {
       return
     }
     this.onCreate();
+
   }
 
+
   onCreate() {
     this.modaladd = false;
     this.seqservice.create(this.entryForm.value).subscribe(
@@ -139,24 +115,22 @@ export class SequencegenaratorComponent implements OnInit {
       });
   }
 
+
   goToAdd() {
     this.modaladd = true;
-    this.submitted = false;
+
-    // Reset form
-    this.entryForm.reset();
   }
 
   onExport() {
-    this.excel.exportAsExcelFile(this.alldata, 'sequence_',
+    this.excel.exportAsExcelFile(this.alldata, 'user_',
       moment().format('YYYYMMDD_HHmmss'))
   }
 
   goToEdit(row) {
-    this.rowSelected = { ...row }; // Create a copy to avoid direct binding issues
+    this.rowSelected = row;
     console.log(row)
     this.modaledit = true;
   }
-  
   onDelete(row) {
     this.rowSelected = row;
     this.modaldelete = true;
@@ -187,8 +161,8 @@ export class SequencegenaratorComponent implements OnInit {
           this.ngOnInit();
         }
       });
-  }
 
+  }
   onUpdate(id) {
     this.modaledit = false;
     this.seqservice.update(id, this.rowSelected).subscribe((data) => {

frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html

@@ -1,74 +1,38 @@
-<clr-main-container class="modern-layout">
+<clr-main-container>
-  <clr-header class="header-5 modern-header">
+  <clr-header class="header-5">
-    <div class="branding modern-branding">
+    <div class="branding">
-      <a href="javascript://" class="nav-link modern-nav-link">
+      <a href="javascript://" class="nav-link">
-        <div class="logo-container">
+        <a href="#" class="logo">
-          <div class="logo-wrapper">
+          <img class="img" src="assets/images/icon/micrologo.png" alt="" height="50" width="50">
-            <img class="logo-img" src="assets/images/icon/micrologo.png" alt="Logo" height="40" width="40">
+        </a>
-            <div class="logo-glow"></div>
+        <div style="width:40px;margin-right:10px;">
+
       </div>
-        </div>
-        <div class="brand-text">
       <ng-container *ngIf="sysparameter?.company_Display_Name !== null; else OPtitle">
-            <span class="company-title">{{ sysparameter?.company_Display_Name }}</span>
+        <span class="title">{{ sysparameter?.company_Display_Name }}</span>
-            <span class="company-subtitle">Enterprise Platform</span>
       </ng-container>
       <ng-template #OPtitle>
-            <span class="company-title">CloudnSure</span>
+        <span class="title">CloudnSure</span>
-            <span class="company-subtitle">Enterprise Platform</span>
       </ng-template>
-        </div>
       </a>
     </div>
 
 
-    <div class="header-nav modern-header-nav" [clr-nav-level]="1">
+    <div class="header-nav" [clr-nav-level]="1">
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
+      <a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/dashboard" (click)="loadMenuByMenuGroup()">
-        routerLink="/cns-portal/dashboard" (click)="loadMenuByMenuGroup()">
-        <div class="nav-icon-wrapper">
         <clr-icon shape="home"></clr-icon>
-          <span class="nav-tooltip">Home</span>
-        </div>
       </a>
 
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
+      <a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/dashboardrunner" >
-        routerLink="/cns-portal/dashboardrunner">
-        <div class="nav-icon-wrapper">
         <clr-icon shape="grid-view" solid></clr-icon>
-          <span class="nav-tooltip">Dashboard</span>
-        </div>
       </a>
 
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
+      <a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/rerunner/all" (click)="getName()">
-        routerLink="/cns-portal/shield-dashboard">
-        <div class="nav-icon-wrapper">
-          <clr-icon shape="shield" solid></clr-icon>
-          <span class="nav-tooltip">Shield Dashboard</span>
-        </div>
-      </a>
-
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
-        routerLink="/cns-portal/rerunner/all" (click)="getName()">
-        <div class="nav-icon-wrapper">
         <clr-icon shape="file-group" solid="true"></clr-icon>
-          <span class="nav-tooltip">Reports</span>
-        </div>
       </a>
 
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
+      <a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/setupicon" (click)="toggleSetupMenus()">
-        routerLink="/cns-portal/setupicon" (click)="toggleSetupMenus()">
-        <div class="nav-icon-wrapper">
         <clr-icon shape="cog" solid="true"></clr-icon>
-          <span class="nav-tooltip">Settings</span>
-        </div>
-      </a>
-
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
-        routerLink="/cns-portal/theme-customization">
-        <div class="nav-icon-wrapper">
-          <clr-icon shape="palette" solid="true"></clr-icon>
-          <span class="nav-tooltip">Theme Customization</span>
-        </div>
       </a>     
     </div>
 
@@ -78,149 +42,94 @@
     
     
     
-    <div class="header-actions modern-header-actions">
+    <div class="header-actions">
-      <clr-dropdown class="modern-user-dropdown">
+      <!-- <span (click)="restartTour()" style="display: flex;align-items: center;margin-right: 20px;">
-        <button class="modern-user-button" clrDropdownTrigger>
+        <clr-icon shape="play"></clr-icon>
-          <div class="user-avatar">
+    </span> -->
-            <div class="avatar-circle">
+      <clr-dropdown>
-              <clr-icon shape="user"></clr-icon>
+        <button class="nav-text demo-title" clrDropdownTrigger>
-            </div>
+          <clr-icon shape="user"></clr-icon><label style="line-height: 60px; cursor: pointer;"> {{userName}}</label>
-            <div class="user-status-indicator"></div>
+          <clr-icon shape="caret down"></clr-icon>
-          </div>
-          <div class="user-info">
-            <span class="user-name">{{userName}}</span>
-            <span class="user-role">Administrator</span>
-          </div>
-          <clr-icon shape="caret down" class="dropdown-arrow"></clr-icon>
         </button>
-        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right" class="modern-dropdown-menu">
+        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
-          <div class="dropdown-header">
+          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/about">About</a>
-            <div class="user-profile">
+          <a href="javascript://" clrDropdownItem routerLink="profile-settings">Profile Settings</a>
-              <div class="profile-avatar">
-                <clr-icon shape="user"></clr-icon>
-              </div>
-              <div class="profile-info">
-                <span class="profile-name">{{userName}}</span>
-                <span class="profile-email">admin@cloudnsure.com</span>
-              </div>
-            </div>
-          </div>
           
-          <div class="dropdown-divider"></div>
-
-          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/about" class="modern-dropdown-item">
-            <clr-icon shape="info-circle"></clr-icon>
-            <span>About</span>
-          </a>
-          <a href="javascript://" clrDropdownItem routerLink="profile-settings" class="modern-dropdown-item">
-            <clr-icon shape="cog"></clr-icon>
-            <span>Profile Settings</span>
-          </a>
-
-          <div class="dropdown-divider"></div>
 
            <!-- Language Dropdown Section -->
-          <clr-dropdown class="sub-dropdown modern-language-dropdown">
+           <clr-dropdown class="sub-dropdown">
-            <button clrDropdownTrigger class="modern-language-button">
+            <button clrDropdownTrigger style="display: flex; align-items: center; padding: 8px; width: 100%; background: none; border: none; cursor: pointer;">
-              <clr-icon shape="language" class="language-icon"></clr-icon>
+              <clr-icon shape="language" class="language-icon" style="margin-right: 5px;"></clr-icon>
-              <span>{{ 'Choose language' | translate }}</span>
+              <label style="margin: 0;">{{ 'Choose language' | translate }}</label>
-              <clr-icon shape="caret down" class="dropdown-arrow"></clr-icon>
+              <clr-icon shape="caret down" style="margin-left: auto;"></clr-icon>
             </button>
-            <clr-dropdown-menu *clrIfOpen clrPosition="right" class="modern-language-menu">
+            <clr-dropdown-menu *clrIfOpen clrPosition="right">
-              <a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="modern-lang-item">
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
-                <clr-icon shape="globe" class="lang-icon"></clr-icon>
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> English
-                <span>English</span>
-                <div class="lang-flag">🇺🇸</div>
               </a>
-              <a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="modern-lang-item">
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
-                <clr-icon shape="globe" class="lang-icon"></clr-icon>
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Hindi
-                <span>हिन्दी</span>
-                <div class="lang-flag">🇮🇳</div>
               </a>
-              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="modern-lang-item">
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
-                <clr-icon shape="globe" class="lang-icon"></clr-icon>
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Tamil
-                <span>தமிழ்</span>
-                <div class="lang-flag">🇮🇳</div>
               </a>
-              <a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="modern-lang-item">
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
-                <clr-icon shape="globe" class="lang-icon"></clr-icon>
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Punjabi
-                <span>ਪੰਜਾਬੀ</span>
-                <div class="lang-flag">🇮🇳</div>
               </a>
-              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="modern-lang-item">
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
-                <clr-icon shape="globe" class="lang-icon"></clr-icon>
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Malayalam
-                <span>മലയാളം</span>
-                <div class="lang-flag">🇮🇳</div>
               </a>
             </clr-dropdown-menu>
           </clr-dropdown>
+          <!-- <a href="javascript://" clrDropdownItem routerLink="myworkspace">My Workspaces</a> -->
+          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/passwordreset">Change Password</a>
+          <a href="javascript://" clrDropdownItem (click)="onLogout()">Log out</a>
 
-          <div class="dropdown-divider"></div>
-
-          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/passwordreset" class="modern-dropdown-item">
-            <clr-icon shape="key"></clr-icon>
-            <span>Change Password</span>
-          </a>
-          <a href="javascript://" clrDropdownItem (click)="onLogout()" class="modern-dropdown-item logout-item">
-            <clr-icon shape="logout"></clr-icon>
-            <span>Log out</span>
-          </a>
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
   </clr-header>
 
-  <div class="content-container modern-content-container">
+  <div class="content-container">
-    <main class="content-area modern-content-area">
+    <main class="content-area">
-      <div class="content-wrapper">
       <router-outlet></router-outlet>
-      </div>
     </main>
 
-    <clr-vertical-nav class="modern-sidebar" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed"
+    <clr-vertical-nav  [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed" [clr-nav-level]="2">
-      [clr-nav-level]="2">
 
       <!-- <clr-vertical-nav-group *ngIf="!showFolderNames && !showSetupMenus && !showDashNames" routerLinkActive="active">
 
       
        
       </clr-vertical-nav-group> -->
-      <div class="sidebar-content">
+      <div *ngFor="let menu of menus">
-        <div *ngFor="let menu of menus" class="menu-item-wrapper">
         <!-- NEED MODIFICATION-->
         <!-- <div *ngIf="menu.sub_menus.length >=1;then content else other_content"></div> -->
         <div *ngIf="menu.subMenus !== null && menu.subMenus?.length >=1;then content else other_content"></div>
         <ng-template #content>
-            <!-- if sub menu is present -->
+            <!-- if sub munu is present -->
-            <clr-vertical-nav-group routerLinkActive="active" class="modern-nav-group">
+                <clr-vertical-nav-group routerLinkActive="active"> <!--*ngIf="!showFolderNames && !showSetupMenus && !showDashNames" -->
-              <div class="nav-group-header">
+                    <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon></clr-icon>
-                <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon class="nav-group-icon"></clr-icon>
+                    {{ menu.menuItemDesc }}
-                <span class="nav-group-title">{{ menu.menuItemDesc }}</span>
-                <clr-icon shape="angle" class="nav-group-arrow" [class.rotated]="false"></clr-icon>
-              </div>
                     <!-- SUB NAV-->
-              <clr-vertical-nav-group-children class="modern-nav-children">
+                    <clr-vertical-nav-group-children *ngFor="let subnav of menu.subMenus">
-                <ng-container *ngFor="let subnav of menu.subMenus">
+                        <a clrVerticalNavLink  *ngIf="subnav.mvisible == 'true'"   routerLinkActive="active" (click)="send(subnav)">
-                  <a clrVerticalNavLink *ngIf="subnav.mvisible == 'true'" routerLinkActive="active"
+                           <!-- <clr-icon [attr.shape]="subnav.mainMenuIconName" clrVerticalNavIcon></clr-icon>'./' + subnav.main_menu_action_name  (click)="send(subnav) [ngStyle]="subnav.mvisible == 'true' && { 'display': 'none' }"
-                    (click)="send(subnav)" class="modern-nav-link">
+                          [routerLink]=subnav.mvisible == 'true' ? ['./' + subnav.main_menu_action_name] : []-->
-                    <clr-icon [attr.shape]="subnav.mainMenuIconName || 'circle'" clrVerticalNavIcon
+                          {{ subnav.menuItemDesc }}
-                      class="nav-link-icon"></clr-icon>
-                    <span class="nav-link-text">{{ subnav.menuItemDesc }}</span>
                         </a>
-                </ng-container>
                     </clr-vertical-nav-group-children>
                 </clr-vertical-nav-group>
+            <!-- </div> -->
         </ng-template>
         <ng-template #other_content>
            <!-- if sub menu is not present -->
-            <a clrVerticalNavLink routerLinkActive="active" [routerLink]="'./'+ menu.main_menu_action_name"
+            <a clrVerticalNavLink routerLinkActive="active" [routerLink]="'./'+ menu.main_menu_action_name">
-              class="modern-nav-link-single">
+               <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon></clr-icon>
-              <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon class="nav-link-icon"></clr-icon>
+                {{ menu.menuItemDesc }}
-              <span class="nav-link-text">{{ menu.menuItemDesc }}</span>
             </a>
         </ng-template>
     </div>
-      </div>
 
     <!-- <div *ngFor="let report of reportNames">
       <clr-vertical-nav-group *ngIf="showFolderNames && !showSetupMenus" routerLinkActive="active" routerLink="/cns-portal/rerunner/all">

frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss

@@ -1,10 +1,3 @@
-// ========================================
-// MODERN LAYOUT COMPONENT STYLES
-// ========================================
-
-@import '../../../../styles/design-tokens';
-
-// Legacy form styles (preserved for compatibility)
 input[type=text],[type=date], select,textarea {
   width: 100%;
   padding: 12px 20px;
@@ -14,680 +7,6 @@ input[type=text],[type=date], select,textarea {
   border-radius: 4px;
   box-sizing: border-box;
 }
-// Modern Layout Styles
-// ========================================
-
-.modern-layout {
-  background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%);
-  min-height: 100vh;
-}
-
-// Header Styles
-// ========================================
-
-.modern-header {
-  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
-  backdrop-filter: $backdrop-blur-md;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: $shadow-lg;
-  position: sticky;
-  top: 0;
-  z-index: $z-sticky;
-  height: $header-height;
-  padding: 0 $space-6;
-}
-
-.modern-branding {
-  display: flex;
-  align-items: center;
-  gap: $space-4;
-
-  .modern-nav-link {
-    display: flex;
-    align-items: center;
-    gap: $space-4;
-    text-decoration: none;
-    color: inherit;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      transform: translateY(-1px);
-    }
-  }
-
-  .logo-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .logo-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: $gradient-primary;
-    border-radius: $radius-xl;
-    box-shadow: $shadow-md;
-    transition: all $duration-300 $ease-out;
-
-    &:hover {
-      transform: scale(1.05);
-      box-shadow: $shadow-lg;
-    }
-
-    .logo-img {
-      width: 32px;
-      height: 32px;
-      object-fit: contain;
-      filter: brightness(0) invert(1);
-    }
-
-    .logo-glow {
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      background: $gradient-primary;
-      border-radius: $radius-xl;
-      opacity: 0;
-      filter: blur(8px);
-      transition: opacity $duration-300 $ease-out;
-    }
-
-    &:hover .logo-glow {
-      opacity: 0.3;
-    }
-  }
-
-  .brand-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    .company-title {
-      font-size: $text-xl;
-      font-weight: $font-bold;
-      color: $white;
-      line-height: 1.2;
-    }
-
-    .company-subtitle {
-      font-size: $text-xs;
-      font-weight: $font-medium;
-      color: rgba(255, 255, 255, 0.8);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-  }
-}
-
-// Header Navigation
-// ========================================
-
-.modern-header-nav {
-  display: flex;
-  align-items: center;
-  gap: $space-2;
-  margin-left: $space-8;
-
-  .modern-nav-icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: $radius-lg;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: $white;
-      transform: translateY(-1px);
-    }
-
-    &.active {
-      background: rgba(255, 255, 255, 0.2);
-      color: $white;
-      box-shadow: $shadow-md;
-    }
-
-    .nav-icon-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .nav-tooltip {
-      position: absolute;
-      top: -40px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: $gray-900;
-      color: $white;
-      padding: $space-2 $space-3;
-      border-radius: $radius-md;
-      font-size: $text-xs;
-      font-weight: $font-medium;
-      white-space: nowrap;
-      opacity: 0;
-      visibility: hidden;
-      transition: all $duration-200 $ease-out;
-      z-index: $z-tooltip;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-        border: 4px solid transparent;
-        border-top-color: $gray-900;
-      }
-    }
-
-    &:hover .nav-tooltip {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}
-
-// Header Actions
-// ========================================
-
-.modern-header-actions {
-  display: flex;
-  align-items: center;
-  gap: $space-4;
-  margin-left: auto;
-}
-
-.modern-user-dropdown {
-  .modern-user-button {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-2 $space-4;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: $radius-xl;
-    color: $white;
-    text-decoration: none;
-    transition: all $duration-200 $ease-out;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-      border-color: rgba(255, 255, 255, 0.3);
-      transform: translateY(-1px);
-      box-shadow: $shadow-md;
-    }
-
-    .user-avatar {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .avatar-circle {
-      width: 36px;
-      height: 36px;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $white;
-      font-size: $text-sm;
-      font-weight: $font-semibold;
-    }
-
-    .user-status-indicator {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 12px;
-      height: 12px;
-      background: $accent-green;
-      border: 2px solid $white;
-      border-radius: 50%;
-    }
-
-    .user-info {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 2px;
-
-      .user-name {
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-        color: $white;
-        line-height: 1.2;
-      }
-
-      .user-role {
-        font-size: $text-xs;
-        color: rgba(255, 255, 255, 0.8);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-    }
-
-    .dropdown-arrow {
-      font-size: $text-xs;
-      color: rgba(255, 255, 255, 0.8);
-      transition: transform $duration-200 $ease-out;
-    }
-
-    &:hover .dropdown-arrow {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-// Dropdown Menu
-// ========================================
-
-.modern-dropdown-menu {
-  background: $white;
-  border: 1px solid $gray-200;
-  border-radius: $radius-xl;
-  box-shadow: $shadow-xl;
-  padding: $space-2;
-  min-width: 280px;
-  margin-top: $space-2;
-
-  .dropdown-header {
-    padding: $space-4;
-    border-bottom: 1px solid $gray-200;
-    margin-bottom: $space-2;
-
-    .user-profile {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-
-      .profile-avatar {
-        width: 48px;
-        height: 48px;
-        background: $gradient-primary;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: $white;
-        font-size: $text-lg;
-        font-weight: $font-semibold;
-      }
-
-      .profile-info {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-
-        .profile-name {
-          font-size: $text-sm;
-          font-weight: $font-semibold;
-          color: $gray-900;
-        }
-
-        .profile-email {
-          font-size: $text-xs;
-          color: $gray-500;
-        }
-      }
-    }
-  }
-
-  .dropdown-divider {
-    height: 1px;
-    background: $gray-200;
-    margin: $space-2 0;
-  }
-
-  .modern-dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-3 $space-4;
-    border-radius: $radius-lg;
-    color: $gray-700;
-    text-decoration: none;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      background: $gray-50;
-      color: $gray-900;
-      transform: translateX(4px);
-    }
-
-    &.logout-item {
-      color: $accent-red;
-
-      &:hover {
-        background: rgba($accent-red, 0.1);
-        color: $accent-red;
-      }
-    }
-
-    clr-icon {
-      font-size: $text-base;
-      width: 20px;
-      height: 20px;
-    }
-  }
-}
-
-// Language Dropdown
-// ========================================
-
-.modern-language-dropdown {
-  .modern-language-button {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-3 $space-4;
-    width: 100%;
-    background: transparent;
-    border: none;
-    color: $gray-700;
-    text-decoration: none;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    border-radius: $radius-lg;
-    transition: all $duration-200 $ease-out;
-    cursor: pointer;
-
-    &:hover {
-      background: $gray-50;
-      color: $gray-900;
-    }
-
-    .language-icon {
-      font-size: $text-base;
-      color: $primary-600;
-    }
-
-    .dropdown-arrow {
-      margin-left: auto;
-      font-size: $text-xs;
-      color: $gray-400;
-      transition: transform $duration-200 $ease-out;
-    }
-
-    &:hover .dropdown-arrow {
-      transform: rotate(180deg);
-    }
-  }
-
-  .modern-language-menu {
-    background: $white;
-    border: 1px solid $gray-200;
-    border-radius: $radius-xl;
-    box-shadow: $shadow-lg;
-    padding: $space-2;
-    min-width: 200px;
-    margin-left: $space-2;
-
-    .modern-lang-item {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-      padding: $space-3 $space-4;
-      border-radius: $radius-lg;
-      color: $gray-700;
-      text-decoration: none;
-      font-size: $text-sm;
-      font-weight: $font-medium;
-      transition: all $duration-200 $ease-out;
-
-      &:hover {
-        background: $primary-50;
-        color: $primary-700;
-        transform: translateX(4px);
-      }
-
-      .lang-icon {
-        font-size: $text-base;
-        color: $primary-600;
-      }
-
-      .lang-flag {
-        margin-left: auto;
-        font-size: $text-lg;
-      }
-    }
-  }
-}
-
-// Content Container
-// ========================================
-
-.modern-content-container {
-  display: flex;
-  min-height: calc(100vh - #{$header-height});
-  background: transparent;
-}
-
-.modern-content-area {
-  flex: 1;
-  background: transparent;
-  padding: 0;
-  overflow-x: hidden;
-
-  .content-wrapper {
-    padding: $space-6;
-    min-height: calc(100vh - #{$header-height});
-  }
-}
-
-// Sidebar Styles
-// ========================================
-
-.modern-sidebar {
-  background: rgba(255, 255, 255, 0.98);
-  backdrop-filter: $backdrop-blur-md;
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
-  box-shadow: $shadow-lg;
-  width: $sidebar-width;
-  transition: all $duration-300 $ease-out;
-
-  &.nav-collapsed {
-    width: $sidebar-width-collapsed;
-  }
-
-  .sidebar-content {
-    padding: $space-4 0;
-  }
-
-  .menu-item-wrapper {
-    margin-bottom: $space-2;
-  }
-}
-
-// Navigation Groups
-// ========================================
-
-.modern-nav-group {
-  margin-bottom: $space-2;
-
-  .nav-group-header {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-3 $space-4;
-    color: $gray-700;
-    font-size: $text-sm;
-    font-weight: $font-semibold;
-    cursor: pointer;
-    border-radius: $radius-lg;
-    margin: 0 $space-2;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      background: $gray-50;
-      color: $gray-900;
-    }
-
-    .nav-group-icon {
-      font-size: $text-lg;
-      color: $primary-600;
-    }
-
-    .nav-group-title {
-      flex: 1;
-    }
-
-    .nav-group-arrow {
-      font-size: $text-sm;
-      color: $gray-400;
-      transition: transform $duration-200 $ease-out;
-
-      &.rotated {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  .modern-nav-children {
-    margin-top: $space-1;
-    padding-left: $space-4;
-  }
-}
-
-// Navigation Links
-// ========================================
-
-.modern-nav-link,
-.modern-nav-link-single {
-  display: flex;
-  align-items: center;
-  gap: $space-3;
-  padding: $space-3 $space-4;
-  color: $gray-600;
-  text-decoration: none;
-  font-size: $text-sm;
-  font-weight: $font-medium;
-  border-radius: $radius-lg;
-  margin: 0 $space-2;
-  transition: all $duration-200 $ease-out;
-  position: relative;
-
-  &:hover {
-    background: $primary-50;
-    color: $primary-700;
-    transform: translateX(4px);
-  }
-
-  &.active {
-    background: $primary-100;
-    color: $primary-800;
-    font-weight: $font-semibold;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 3px;
-      height: 20px;
-      background: $primary-600;
-      border-radius: 0 $radius-sm $radius-sm 0;
-    }
-  }
-
-  .nav-link-icon {
-    font-size: $text-base;
-    color: $gray-500;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .nav-link-text {
-    flex: 1;
-  }
-
-  &:hover .nav-link-icon {
-    color: $primary-600;
-  }
-
-  &.active .nav-link-icon {
-    color: $primary-700;
-  }
-}
-
-// Responsive Design
-// ========================================
-
-@media (max-width: $breakpoint-lg) {
-  .modern-header {
-    padding: 0 $space-4;
-  }
-
-  .modern-header-nav {
-    margin-left: $space-4;
-    gap: $space-1;
-
-    .modern-nav-icon {
-      width: 40px;
-      height: 40px;
-    }
-  }
-
-  .modern-content-area .content-wrapper {
-    padding: $space-4;
-  }
-
-  .modern-sidebar {
-    width: $sidebar-width-collapsed;
-
-    .nav-group-title,
-    .nav-link-text {
-      display: none;
-    }
-
-    .modern-nav-link,
-    .modern-nav-link-single {
-      justify-content: center;
-      padding: $space-3;
-    }
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .modern-branding .brand-text {
-    display: none;
-  }
-
-  .modern-user-button .user-info {
-    display: none;
-  }
-
-  .modern-header-nav {
-    display: none;
-  }
-}
-
-// Legacy styles (preserved for compatibility)
-// ========================================
-
 .center-content {
   //width: 100%;
  // max-width: 800px;

frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts

@@ -20,7 +20,6 @@ import { ProjectSetup } from 'src/app/models/builder/Project_setup';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
 
 @Component({
   selector: 'app-layout',
@@ -54,7 +53,6 @@ export class LayoutComponent implements OnInit {
     private reportBuilderService: ReportBuilderService,
     private dashboardService : Dashboard3Service,
     private translate: TranslateService,
-    private themeService: ThemeService,
     // private guidedTourService: GuidedTourService,
     // private tourservice: TourService,
     private toastr: ToastrService,

frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html

@@ -1,240 +1,3 @@
-<!-- Modern Dashboard Welcome Section -->
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
-<div class="modern-dashboard">
-  <!-- Welcome Header -->
-  <div class="welcome-section">
-    <div class="welcome-content">
-      <div class="welcome-text">
-        <h1 class="welcome-title animate-fade-in-up">
-          Welcome to CloudnSure
-          <span class="title-accent">Enterprise Platform</span>
-        </h1>
-        <p class="welcome-subtitle animate-fade-in-up stagger-1">
-          Your comprehensive solution for data management, reporting, and business intelligence
-        </p>
-        <div class="welcome-actions animate-fade-in-up stagger-2">
-          <button class="modern-btn btn-primary btn-lg">
-            <clr-icon shape="play"></clr-icon>
-            Get Started
-          </button>
-          <button class="modern-btn btn-outline btn-lg">
-            <clr-icon shape="book"></clr-icon>
-            View Documentation
-          </button>
-          <button class="modern-btn btn-ghost btn-lg" routerLink="/cns-portal/theme-customization">
-            <clr-icon shape="palette"></clr-icon>
-            Customize Theme
-          </button>
-        </div>
-      </div>
-      <div class="welcome-visual animate-fade-in-right">
-        <div class="visual-container">
-          <div class="floating-card card-1">
-            <clr-icon shape="analytics"></clr-icon>
-            <span>Analytics</span>
-          </div>
-          <div class="floating-card card-2">
-            <clr-icon shape="file-group"></clr-icon>
-            <span>Reports</span>
-          </div>
-          <div class="floating-card card-3">
-            <clr-icon shape="cog"></clr-icon>
-            <span>Settings</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Quick Stats Cards -->
-  <div class="stats-section">
-    <div class="stats-grid">
-      <div class="modern-card stats-card animate-fade-in-up stagger-1">
-        <div class="card-header">
-          <div class="stats-icon primary">
-            <clr-icon shape="users"></clr-icon>
-          </div>
-          <div class="stats-trend positive">
-            <clr-icon shape="trending-up"></clr-icon>
-            <span>+12%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">1,234</div>
-          <div class="stats-label">Active Users</div>
-        </div>
-      </div>
-
-      <div class="modern-card stats-card animate-fade-in-up stagger-2">
-        <div class="card-header">
-          <div class="stats-icon success">
-            <clr-icon shape="file-group"></clr-icon>
-          </div>
-          <div class="stats-trend positive">
-            <clr-icon shape="trending-up"></clr-icon>
-            <span>+8%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">567</div>
-          <div class="stats-label">Reports Generated</div>
-        </div>
-      </div>
-
-      <div class="modern-card stats-card animate-fade-in-up stagger-3">
-        <div class="card-header">
-          <div class="stats-icon warning">
-            <clr-icon shape="clock"></clr-icon>
-          </div>
-          <div class="stats-trend negative">
-            <clr-icon shape="trending-down"></clr-icon>
-            <span>-3%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">2.4s</div>
-          <div class="stats-label">Avg Response Time</div>
-        </div>
-      </div>
-
-      <div class="modern-card stats-card animate-fade-in-up stagger-4">
-        <div class="card-header">
-          <div class="stats-icon info">
-            <clr-icon shape="shield"></clr-icon>
-          </div>
-          <div class="stats-trend positive">
-            <clr-icon shape="check"></clr-icon>
-            <span>99.9%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">99.9%</div>
-          <div class="stats-label">Uptime</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Quick Actions -->
-  <div class="actions-section">
-    <h2 class="section-title animate-fade-in-up">Quick Actions</h2>
-    <div class="actions-grid">
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-1 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="plus-circle"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Create Report</h3>
-          <p>Build custom reports with our intuitive report builder</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-2 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="upload"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Import Data</h3>
-          <p>Upload and process your data files quickly</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-3 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="cog"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>System Settings</h3>
-          <p>Configure your system preferences and options</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-4 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="help-info"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Help & Support</h3>
-          <p>Get help and access our knowledge base</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-5 hover-lift" routerLink="/cns-portal/theme-customization">
-        <div class="action-icon">
-          <clr-icon shape="palette"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Theme Customization</h3>
-          <p>Customize colors, fonts, and appearance</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-    </div>
-  </div>
-
-  <!-- Recent Activity -->
-  <div class="activity-section">
-    <h2 class="section-title animate-fade-in-up">Recent Activity</h2>
-    <div class="modern-card activity-card animate-fade-in-up">
-      <div class="activity-list">
-        <div class="activity-item">
-          <div class="activity-icon success">
-            <clr-icon shape="check"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">Report generated successfully</div>
-            <div class="activity-time">2 minutes ago</div>
-          </div>
-        </div>
-        
-        <div class="activity-item">
-          <div class="activity-icon info">
-            <clr-icon shape="user"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">New user registered</div>
-            <div class="activity-time">15 minutes ago</div>
-          </div>
-        </div>
-        
-        <div class="activity-item">
-          <div class="activity-icon warning">
-            <clr-icon shape="exclamation-triangle"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">System maintenance scheduled</div>
-            <div class="activity-time">1 hour ago</div>
-          </div>
-        </div>
-        
-        <div class="activity-item">
-          <div class="activity-icon primary">
-            <clr-icon shape="upload"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">Data import completed</div>
-            <div class="activity-time">2 hours ago</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Legacy breadcrumb (hidden but preserved for compatibility) -->
-<ol class="breadcrumb breadcrumb-arrow font-trirong" style="display: none;">
   <li><a href="javascript://">Home</a></li>
 </ol>

frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss

@@ -1,510 +0,0 @@
-// ========================================
-// MODERN DASHBOARD COMPONENT STYLES
-// ========================================
-
-
-@import '../../../../styles/design-tokens';
-
-
-// Dashboard Container
-// ========================================
-
-.modern-dashboard {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0;
-}
-
-// Welcome Section
-// ========================================
-
-.welcome-section {
-  background: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
-  border-radius: $radius-2xl;
-  margin-bottom: $space-8;
-  overflow: hidden;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
-    opacity: 0.3;
-  }
-
-  .welcome-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: $space-12 $space-8;
-    position: relative;
-    z-index: 1;
-
-    @media (max-width: $breakpoint-lg) {
-      flex-direction: column;
-      text-align: center;
-      gap: $space-8;
-    }
-  }
-
-  .welcome-text {
-    flex: 1;
-    max-width: 600px;
-
-    .welcome-title {
-      font-size: $text-5xl;
-      font-weight: $font-bold;
-      color: $white;
-      margin-bottom: $space-4;
-      line-height: 1.1;
-
-      @media (max-width: $breakpoint-md) {
-        font-size: $text-4xl;
-      }
-
-      .title-accent {
-        display: block;
-        font-size: $text-2xl;
-        font-weight: $font-medium;
-        color: rgba(255, 255, 255, 0.8);
-        margin-top: $space-2;
-
-        @media (max-width: $breakpoint-md) {
-          font-size: $text-xl;
-        }
-      }
-    }
-
-    .welcome-subtitle {
-      font-size: $text-xl;
-      color: rgba(255, 255, 255, 0.9);
-      margin-bottom: $space-8;
-      line-height: 1.6;
-
-      @media (max-width: $breakpoint-md) {
-        font-size: $text-lg;
-      }
-    }
-
-    .welcome-actions {
-      display: flex;
-      gap: $space-4;
-      flex-wrap: wrap;
-
-      @media (max-width: $breakpoint-sm) {
-        flex-direction: column;
-        align-items: stretch;
-      }
-    }
-  }
-
-  .welcome-visual {
-    flex: 0 0 300px;
-    position: relative;
-
-    @media (max-width: $breakpoint-lg) {
-      flex: none;
-      width: 100%;
-      max-width: 400px;
-    }
-
-    .visual-container {
-      position: relative;
-      width: 100%;
-      height: 200px;
-
-      .floating-card {
-        position: absolute;
-        background: rgba(255, 255, 255, 0.15);
-        backdrop-filter: $backdrop-blur-md;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: $radius-xl;
-        padding: $space-4;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $space-2;
-        color: $white;
-        font-size: $text-sm;
-        font-weight: $font-medium;
-        animation: float 3s ease-in-out infinite;
-
-        clr-icon {
-          font-size: $text-2xl;
-        }
-
-        &.card-1 {
-          top: 20px;
-          left: 20px;
-          animation-delay: 0s;
-        }
-
-        &.card-2 {
-          top: 60px;
-          right: 40px;
-          animation-delay: 1s;
-        }
-
-        &.card-3 {
-          bottom: 20px;
-          left: 60px;
-          animation-delay: 2s;
-        }
-      }
-    }
-  }
-}
-
-// Stats Section
-// ========================================
-
-.stats-section {
-  margin-bottom: $space-8;
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: $space-6;
-
-    @media (max-width: $breakpoint-sm) {
-      grid-template-columns: 1fr;
-      gap: $space-4;
-    }
-  }
-
-  .stats-card {
-    padding: $space-6;
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: $gradient-primary;
-    }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: $space-4;
-
-      .stats-icon {
-        width: 48px;
-        height: 48px;
-        border-radius: $radius-xl;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: $text-xl;
-
-        &.primary {
-          background: rgba($primary-500, 0.1);
-          color: $primary-600;
-        }
-
-        &.success {
-          background: rgba($accent-green, 0.1);
-          color: $accent-green;
-        }
-
-        &.warning {
-          background: rgba($accent-orange, 0.1);
-          color: $accent-orange;
-        }
-
-        &.info {
-          background: rgba($primary-500, 0.1);
-          color: $primary-600;
-        }
-      }
-
-      .stats-trend {
-        display: flex;
-        align-items: center;
-        gap: $space-1;
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-
-        &.positive {
-          color: $accent-green;
-        }
-
-        &.negative {
-          color: $accent-red;
-        }
-
-        clr-icon {
-          font-size: $text-sm;
-        }
-      }
-    }
-
-    .card-body {
-      .stats-value {
-        font-size: $text-3xl;
-        font-weight: $font-bold;
-        color: $gray-900;
-        margin-bottom: $space-1;
-        line-height: 1;
-      }
-
-      .stats-label {
-        font-size: $text-sm;
-        color: $gray-600;
-        font-weight: $font-medium;
-      }
-    }
-  }
-}
-
-// Actions Section
-// ========================================
-
-.actions-section {
-  margin-bottom: $space-8;
-
-  .section-title {
-    font-size: $text-2xl;
-    font-weight: $font-bold;
-    color: $gray-900;
-    margin-bottom: $space-6;
-    text-align: center;
-  }
-
-  .actions-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: $space-6;
-
-    @media (max-width: $breakpoint-sm) {
-      grid-template-columns: 1fr;
-      gap: $space-4;
-    }
-  }
-
-  .action-card {
-    display: flex;
-    align-items: center;
-    gap: $space-4;
-    padding: $space-6;
-    text-decoration: none;
-    color: inherit;
-    border: 1px solid $gray-200;
-    transition: all $duration-300 $ease-out;
-
-    &:hover {
-      border-color: $primary-300;
-      transform: translateY(-2px);
-      box-shadow: $shadow-xl;
-    }
-
-    .action-icon {
-      width: 56px;
-      height: 56px;
-      background: $gradient-primary;
-      border-radius: $radius-xl;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $white;
-      font-size: $text-xl;
-      flex-shrink: 0;
-    }
-
-    .action-content {
-      flex: 1;
-
-      h3 {
-        font-size: $text-lg;
-        font-weight: $font-semibold;
-        color: $gray-900;
-        margin-bottom: $space-1;
-      }
-
-      p {
-        font-size: $text-sm;
-        color: $gray-600;
-        margin: 0;
-        line-height: 1.5;
-      }
-    }
-
-    .action-arrow {
-      color: $gray-400;
-      font-size: $text-lg;
-      transition: transform $duration-200 $ease-out;
-    }
-
-    &:hover .action-arrow {
-      transform: translateX(4px);
-    }
-  }
-}
-
-// Activity Section
-// ========================================
-
-.activity-section {
-  .section-title {
-    font-size: $text-2xl;
-    font-weight: $font-bold;
-    color: $gray-900;
-    margin-bottom: $space-6;
-    text-align: center;
-  }
-
-  .activity-card {
-    padding: 0;
-    overflow: hidden;
-
-    .activity-list {
-      .activity-item {
-        display: flex;
-        align-items: center;
-        gap: $space-4;
-        padding: $space-4 $space-6;
-        border-bottom: 1px solid $gray-100;
-        transition: background-color $duration-200 $ease-out;
-
-        &:last-child {
-          border-bottom: none;
-        }
-
-        &:hover {
-          background: $gray-50;
-        }
-
-        .activity-icon {
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: $text-base;
-          flex-shrink: 0;
-
-          &.success {
-            background: rgba($accent-green, 0.1);
-            color: $accent-green;
-          }
-
-          &.info {
-            background: rgba($primary-500, 0.1);
-            color: $primary-600;
-          }
-
-          &.warning {
-            background: rgba($accent-orange, 0.1);
-            color: $accent-orange;
-          }
-
-          &.primary {
-            background: rgba($primary-500, 0.1);
-            color: $primary-600;
-          }
-        }
-
-        .activity-content {
-          flex: 1;
-
-          .activity-title {
-            font-size: $text-sm;
-            font-weight: $font-medium;
-            color: $gray-900;
-            margin-bottom: 2px;
-          }
-
-          .activity-time {
-            font-size: $text-xs;
-            color: $gray-500;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Responsive Design
-// ========================================
-
-@media (max-width: $breakpoint-lg) {
-  .welcome-section .welcome-content {
-    padding: $space-8 $space-6;
-  }
-
-  .stats-section .stats-grid {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  }
-
-  .actions-section .actions-grid {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .welcome-section .welcome-content {
-    padding: $space-6 $space-4;
-  }
-
-  .welcome-text .welcome-title {
-    font-size: $text-3xl;
-  }
-
-  .welcome-text .welcome-subtitle {
-    font-size: $text-base;
-  }
-
-  .stats-section .stats-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .actions-section .actions-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: $breakpoint-sm) {
-  .modern-dashboard {
-    padding: 0 $space-4;
-  }
-
-  .welcome-section {
-    margin-bottom: $space-6;
-  }
-
-  .stats-section,
-  .actions-section,
-  .activity-section {
-    margin-bottom: $space-6;
-  }
-
-  .welcome-actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
-// Animation Keyframes
-// ========================================
-
-@keyframes float {
-
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-
-  50% {
-    transform: translateY(-10px);
-  }
-}

frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ThemeService } from '../../../services/theme.service';
 
 @Component({
   selector: 'app-main-page',
@@ -8,13 +7,9 @@ import { ThemeService } from '../../../services/theme.service';
 })
 export class MainPageComponent implements OnInit {
 
-  constructor(private themeService: ThemeService) { }
+  constructor() { }
 
   ngOnInit() {
-    // Initialize theme service
-    this.themeService.currentTheme$.subscribe(theme => {
-      // Theme changes will be automatically applied via CSS variables
-    });
   }
 
 }

frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts

@@ -1,25 +1,3 @@
-import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
-
-import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
-
-
-import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
-import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
-import { StateComponent } from './BuilderComponents/testdata/State/State.component';
-import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
-import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
-import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
-import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
-import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
-import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
-import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
-import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
-import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
-import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
-import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
-import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
-import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
-import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
 
 
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -60,10 +38,7 @@ import { AccesstypeComponent } from './admin/accesstype/accesstype.component';
 import { ModulesComponent } from './admin/modules/modules.component';
 
 import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
-import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
 import { ReportrunnerallComponent } from './builder/report-runner/reportrunnerall/reportrunnerall.component';
-import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
-import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
 import { ReportBuildComponent } from './builder/report-build/report-build.component';
 import { ReportbuildallComponent } from './builder/report-build/reportbuildall/reportbuildall.component';
 import { ReportbuildaddComponent } from './builder/report-build/reportbuildadd/reportbuildadd.component';
@@ -109,13 +84,6 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
 import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
 import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
 import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
-import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
-import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
-import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
-import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
-import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
-import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
-import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
 import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
 import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
 import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -127,10 +95,14 @@ import { QueryComponent } from './superadmin/query/query.component';
 import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
 import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
 import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
-
+import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
-
+import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
-
+import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
-
+import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
+import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.component';
+import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
+import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
+import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
 const routes: Routes = [
   //Important: The sequence of path is important as the router go over then in sequential manner
   { path: '', redirectTo: '/cns-portal/dashboard', pathMatch: 'full' },
@@ -224,6 +196,11 @@ const routes: Routes = [
           { path: 'editdashn/:id', component: EditnewdashComponent },
           { path: 'schedule/:id', component: ScheduleComponent },
           { path: 'chart-types', component: ChartTypePageComponent },
+          { path: 'chart-types/add', component: AddChartTypeComponent },
+          { path: 'chart-types/edit/:id', component: EditChartTypeComponent },
+          { path: 'chart-types/:id/ui-components', component: ChartTypeUiComponentsComponent },
+          { path: 'chart-types/:id/templates', component: ChartTypeTemplatesComponent },
+          { path: 'chart-types/:id/fields', component: ChartTypeFieldsComponent },
         ]
       },
 
@@ -331,178 +308,8 @@ const routes: Routes = [
 
 
 
-
-
-      { path: 'Country', component: CountryComponent },
-
-
-      { path: 'Adv3', component: Adv3Component },
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-      { path: 'Ad10', component: Ad10Component },
-
-
-      { path: 'Childform', component: ChildformComponent },
-
-
-      { path: 'District', component: DistrictComponent },
-
-
-      { path: 'State', component: StateComponent },
-
-
-      { path: 'Country', component: CountryComponent },
-
-
-      { path: 'Ad9', component: Ad9Component },
-
-
-      { path: 'Ad8', component: Ad8Component },
-
-
-      { path: 'Ad7', component: Ad7Component },
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-      { path: 'Ad6', component: Ad6Component },
-
-
-      { path: 'Adv5', component: Adv5Component },
-
-
-      { path: 'Support', component: SupportComponent },
-
-
-      { path: 'Adv3', component: Adv3Component },
-
-
       { path: 'tokenregistery', component: Token_registeryComponent },
 
-
-      { path: 'Defatest', component: DefatestComponent },
-
-
-      { path: 'Country', component: CountryComponent },
-
-
-      { path: 'Defatest', component: DefatestComponent },
-
-      { path: 'Test2', component: Test2Component },
-
-
-      { path: 'Country', component: CountryComponent },
-
-
-
-      { path: 'Test2', component: Test2Component },
-
-      { path: 'Childform', component: ChildformComponent },
-
-
-      { path: 'District', component: DistrictComponent },
-
-
-      { path: 'State', component: StateComponent },
-
-
-      { path: 'Country', component: CountryComponent },
-
-
-      { path: 'Ad9', component: Ad9Component },
-
-
-      { path: 'Ad8', component: Ad8Component },
-
-
-      { path: 'Ad7', component: Ad7Component },
-
-
-      { path: 'Ad6', component: Ad6Component },
-
-
-      { path: 'Adv5', component: Adv5Component },
-
-
-      { path: 'Adv4', component: Adv4Component },
-
-
-      { path: 'Support', component: SupportComponent },
-
-
-      { path: 'Adv3', component: Adv3Component },
-
-
-      { path: 'Dv2', component: Dv2Component },
-
-
-      { path: 'Adv1', component: Adv1Component },
-
-
-      { path: 'Basicp3', component: Basicp3Component },
-
-
-      { path: 'Basicp2', component: Basicp2Component },
-
-
-      { path: 'Basicp1', component: Basicp1Component },
-      { path: 'cust', component: Customer_informationComponent },
-
-      { path: 'Order_summary', component: Order_summaryComponent },
-
-
-      { path: 'Types', component: TypesComponent },
-
-
-      { path: 'Product', component: ProductComponent },
-
-
-      { path: 'Manufacturer', component: ManufacturerComponent },
-
-
-      { path: 'Deployment_type', component: Deployment_typeComponent },
-
-
-
-
       { path: 'Stepper_workflow', component: Stepper_workflowComponent },
 
 

frontend/angular-clarity-master/src/app/modules/main/main.module.ts

@@ -1,25 +1,3 @@
-import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
-
-import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
-
-import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
-import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
-import { StateComponent } from './BuilderComponents/testdata/State/State.component';
-import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
-import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
-import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
-import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
-import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
-import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
-import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
-import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
-import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
-import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
-import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
-import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
-import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
-import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
-
 
 
 import { CommonModule } from '@angular/common';
@@ -75,9 +53,6 @@ import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit
 import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
 import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
 import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
-import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
-import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
-import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
 
 
 import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
@@ -138,13 +113,7 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
 import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
 import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
 import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
-import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
+
-import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
-import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
-import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
-import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
-import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
-import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
 import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
 import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
 import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -165,11 +134,34 @@ import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-das
 // Import UnifiedChartComponent
 import { UnifiedChartComponent } from './builder/dashboardnew/gadgets/unified-chart/unified-chart.component';
 // Import ChartConfigManagerComponent
-import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config-manager/chart-config-manager.component';
+import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config/chart-config-manager.component';
 // Import ChartTypeManagerComponent
 import { ChartTypeManagerComponent } from './builder/dashboardnew/chart-type-manager/chart-type-manager.component';
 // Import ChartTypePageComponent
 import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
+// Import AddChartTypeComponent
+import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
+// Import EditChartTypeComponent
+import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
+// Import ChartTypeUiComponentsComponent
+import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
+// Import ChartTypeTemplatesComponent
+import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
+// Import ChartTypeFieldsComponent
+import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.component';
+// Import new form components
+import { ChartTypeFormComponent } from './builder/dashboardnew/chart-config/forms/chart-type-form.component';
+import { UiComponentFormComponent } from './builder/dashboardnew/chart-config/forms/ui-component-form.component';
+import { ComponentPropertyFormComponent } from './builder/dashboardnew/chart-config/forms/component-property-form.component';
+import { ChartTemplateFormComponent } from './builder/dashboardnew/chart-config/forms/chart-template-form.component';
+import { DynamicFieldFormComponent } from './builder/dashboardnew/chart-config/forms/dynamic-field-form.component';
+// Import ChartConfigModalComponent
+import { ChartConfigModalComponent } from './builder/dashboardnew/editnewdash/chart-config-modal.component';
+// Import DynamicChartLoaderService
+import { DynamicChartLoaderService } from './builder/dashboardnew/chart-config/dynamic-chart-loader.service';
+import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
+import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
+import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
 
 @NgModule({
   declarations: [
@@ -189,6 +181,27 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
     ChartTypeManagerComponent,
     // Add ChartTypePageComponent to declarations
     ChartTypePageComponent,
+    // Add AddChartTypeComponent to declarations
+    AddChartTypeComponent,
+    // Add EditChartTypeComponent to declarations
+    EditChartTypeComponent,
+    // Add ChartTypeUiComponentsComponent to declarations
+    ChartTypeUiComponentsComponent,
+    // Add ChartTypeTemplatesComponent to declarations
+    ChartTypeTemplatesComponent,
+    // Add ChartTypeFieldsComponent to declarations
+    ChartTypeFieldsComponent,
+    // Add new form components to declarations
+    ChartTypeFormComponent,
+    UiComponentFormComponent,
+    ComponentPropertyFormComponent,
+    ChartTemplateFormComponent,
+    DynamicFieldFormComponent,
+    // Add ChartConfigModalComponent to declarations
+    ChartConfigModalComponent,
+    // Add ChartTypeDisplayComponent to declarations
+    
+
     DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
     // Add CompactFilterRunnerComponent to declarations
     CompactFilterRunnerComponent,
@@ -201,7 +214,7 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
     ApiregisterylineComponent,
     DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
     MappingruleaddComponent,
-    MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
+    MappingruleeditComponent, Stepper_workflowComponent,
     Data_lakeComponent,
     SureconnectComponent,
     EditsureconnectComponent,
@@ -214,32 +227,8 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
 
 
     ThemeCustomizationComponent,
-    Ad10Component,
+   
     Token_registeryComponent,
-    DefatestComponent,
-    Test2Component,
-    Order_summaryComponent,
-    TypesComponent,
-    ProductComponent,
-    ManufacturerComponent,
-    Deployment_typeComponent,
-    ChildformComponent,
-    DistrictComponent,
-    StateComponent,
-    CountryComponent,
-    Ad9Component,
-    Ad8Component,
-    Ad7Component,
-    Ad6Component,
-    Adv5Component,
-    Adv4Component,
-    SupportComponent,
-    Adv3Component,
-    Dv2Component,
-    Adv1Component,
-    Basicp3Component,
-    Basicp2Component,
-    Basicp1Component,
      ],
   imports: [
     QRCodeModule,
@@ -266,8 +255,10 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
   providers: [
     CookieService,
     WireframeService,
-
+    DynamicChartLoaderService
-
+  ],
+  exports: [
+    ChartConfigManagerComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

frontend/angular-clarity-master/src/app/modules/main/main.module.ts.tmp

@@ -1,252 +0,0 @@
-import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
-
-import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
-
-import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
-import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
-import { StateComponent } from './BuilderComponents/testdata/State/State.component';
-import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
-import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
-import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
-import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
-import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
-import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
-import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
-import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
-import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
-import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
-import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
-import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
-import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
-import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
-
-
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ClarityModule } from '@clr/angular';
-
-import { MainPageComponent } from '../main/fnd/main-page/main-page.component';
-import { MainRoutingModule } from './main-routing.module';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
-// import { AboutComponent } from '../main/admin/about/about.component';
-// import { LayoutComponent } from './layout/layout.component';
-import { HelperModule } from 'src/app/pipes/helpers.module';
-import { PasswordResetComponent } from '../main/admin/password-reset/password-reset.component';
-import { UserComponent } from '../main/admin/user/user.component';
-
-
-import { AllMenuGroupComponent } from '../main/admin/menu-group/all/all-menu-group.component';
-import { EditMenuGroupComponent } from '../main/admin/menu-group/edit/edit-menu-group.component';
-import { MenuGroupComponent } from '../main/admin/menu-group/menu-group.component';
-import { ReadOnlyMenuGroupComponent } from '../main/admin/menu-group/read-only/readonly-menu-group.component';
-import { AddMenurComponent } from '../main/admin/menu-register/add-menur/add-menur.component';
-import { AllMenurComponent } from '../main/admin/menu-register/all-menur/all-menur.component';
-import { EditMenurComponent } from '../main/admin/menu-register/edit-menur/edit-menur.component';
-import { MenuRegisterComponent } from '../main/admin/menu-register/menu-register.component';
-import { ReadonlyMenurComponent } from '../main/admin/menu-register/readonly-menur/readonly-menur.component';
-import { ProfileSettingComponent } from '../main/admin/profile-setting/profile-setting.component';
-import { UsermaintanceaddComponent } from '../main/admin/usermaintanceadd/usermaintanceadd.component';
-import { UsermaintanceeditComponent } from '../main/admin/usermaintanceedit/usermaintanceedit.component';
-
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { HttpClientModule } from '@angular/common/http';
-import { CodemirrorModule } from "@ctrl/ngx-codemirror";
-import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { GridsterModule } from 'angular-gridster2';
-import { DynamicModule } from 'ng-dynamic-component';
-import { NgChartsModule } from 'ng2-charts';
-import { CKEditorModule } from 'ng2-ckeditor';
-
-import { UserRegistrationComponent } from '../main/admin/user-registration/user-registration.component';
-
-import { QRCodeModule } from 'angularx-qrcode';
-import { TagInputModule } from 'ngx-chips';
-import { CookieService } from 'ngx-cookie-service';
-import { ImageCropperModule } from 'ngx-image-cropper';
-import { ModulesComponent } from './admin/modules/modules.component';
-import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
-import { SubmenuComponent } from './admin/submenu/submenu.component';
-
-import { WireframeService } from 'src/app/services/builder/wireframe.service';
-import { ReportBuildComponent } from './builder/report-build/report-build.component';
-import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit/reportbuildedit.component';
-import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
-import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
-import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
-import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
-import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
-import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
-
-
-import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
-import { EditformnewdashComponent } from './builder/dashboardnew/editformnewdash/editformnewdash.component';
-import { EditnewdashComponent } from './builder/dashboardnew/editnewdash/editnewdash.component';
-import { BarChartComponent } from './builder/dashboardnew/gadgets/bar-chart/bar-chart.component';
-import { BubbleChartComponent } from './builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component';
-import { DoughnutChartComponent } from './builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component';
-import { DynamicChartComponent } from './builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component';
-import { FinancialChartComponent } from './builder/dashboardnew/gadgets/financial-chart/financial-chart.component';
-import { GridViewComponent } from './builder/dashboardnew/gadgets/grid-view/grid-view.component';
-import { LineChartComponent } from './builder/dashboardnew/gadgets/line-chart/line-chart.component';
-import { PieChartComponent } from './builder/dashboardnew/gadgets/pie-chart/pie-chart.component';
-import { PolarChartComponent } from './builder/dashboardnew/gadgets/polar-chart/polar-chart.component';
-import { RadarChartComponent } from './builder/dashboardnew/gadgets/radar-chart/radar-chart.component';
-import { ScatterChartComponent } from './builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component';
-import { ToDoChartComponent } from './builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component';
-import { ScheduleComponent } from './builder/dashboardnew/schedule/schedule.component';
-import { CommonFilterComponent } from './builder/dashboardnew/common-filter/common-filter.component';
-import { ChartWrapperComponent } from './builder/dashboardnew/common-filter/chart-wrapper.component';
-import { AddextensionComponent } from './fnd/extension/addextension/addextension.component';
-import { AllextensionComponent } from './fnd/extension/allextension/allextension.component';
-import { EditextensionComponent } from './fnd/extension/editextension/editextension.component';
-import { ExtensionComponent } from './fnd/extension/extension.component';
-
-import { BarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component';
-import { BubbleRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component';
-import { DashrunnerlineComponent } from './builder/dashboardrunner/dashrunnerline/dashrunnerline.component';
-import { DoughnutRunnerComponent } from './builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component';
-import { GridRunnerComponent } from './builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component';
-import { LineRunnerComponent } from './builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component';
-import { PieRunnerComponent } from './builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component';
-import { PolarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component';
-import { RadarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component';
-import { ScatterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component';
-import { TodoRunnerComponent } from './builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component';
-
-import { ApiregisteryComponent } from './fnd/apiregistery/apiregistery.component';
-
-import { BulkimportComponent } from './datamanagement/bulkimport/bulkimport.component';
-import { BulkimportaddComponent } from './datamanagement/bulkimport/bulkimportadd/bulkimportadd.component';
-import { BulkimportallComponent } from './datamanagement/bulkimport/bulkimportall/bulkimportall.component';
-import { BulkimporteditComponent } from './datamanagement/bulkimport/bulkimportedit/bulkimportedit.component';
-import { BulkimporteditlineComponent } from './datamanagement/bulkimport/bulkimporteditline/bulkimporteditline.component';
-import { BulkimportlineComponent } from './datamanagement/bulkimport/bulkimportline/bulkimportline.component';
-import { DatamanagementComponent } from './datamanagement/datamanagement/datamanagement.component';
-import { DatamananementworkflowComponent } from './datamanagement/datamananementworkflow/datamananementworkflow.component';
-import { MappingruleComponent } from './datamanagement/mappingrule/mappingrule.component';
-import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingruleadd/mappingruleadd.component';
-import { MappingruleallComponent } from './datamanagement/mappingrule/mappingruleall/mappingruleall.component';
-import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
-import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
-import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
-import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
-import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
-import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
-import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
-import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
-import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
-import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
-import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
-import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
-import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
-import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
-import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
-import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
-// import { QueryComponent } from './superadmin/query/query.component';
-// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
-// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
-
-import { FieldTypesModule } from '../../shared/components/field-types/field-types.module';
-import { SharedModule } from '../../shared/shared.module';
-import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.component';
-import { CronJobBuilderComponent } from './builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component';
-import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
-import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
-import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';
-
-// Import Shield Dashboard Module
-import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module';
-
-@NgModule({
-  declarations: [
-    MainPageComponent, PageNotFoundComponent, UserComponent, PasswordResetComponent,
-    MyworkspaceComponent,
-    ReportRunnerComponent, ReportrunnereditComponent, Reportrunneredit2Component, MenuGroupComponent, AllMenuGroupComponent, EditMenuGroupComponent, ReadOnlyMenuGroupComponent, UserRegistrationComponent,
-    MenuRegisterComponent, AddMenurComponent, EditMenurComponent, AllMenurComponent, ReadonlyMenurComponent, ProfileSettingComponent,
-    UsermaintanceaddComponent, UsermaintanceeditComponent,
-    SubmenuComponent, ModulesComponent, SessionloggerComponent,
-    DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
-    CommonFilterComponent, ChartWrapperComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
-    DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
-    ReportBuildComponent, ReportbuildeditComponent, ReportbuildqueryComponent, ReportBuild2Component, ReportBuild2editComponent,
-    // QueryComponent, QueryaddComponent, QueryeditComponent,
-    ExtensionComponent,
-    AllextensionComponent,
-    AddextensionComponent, EditextensionComponent, ApiregisteryComponent, AllapiregisteryComponent, AddapiregisteryComponent, EditapiregisteryComponent,
-
-    ApiregisterylineComponent,
-    DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
-    MappingruleaddComponent,
-    MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
-    Data_lakeComponent,
-    SureconnectComponent,
-    EditsureconnectComponent,
-    OauthComponent,
-    CronJobBuilderComponent,
-    //  FileUploadListComponent,
-
-
-    // buildercomponents
-
-
-    ThemeCustomizationComponent,
-    Ad10Component,
-    Token_registeryComponent,
-    DefatestComponent,
-    Test2Component,
-    Order_summaryComponent,
-    TypesComponent,
-    ProductComponent,
-    ManufacturerComponent,
-    Deployment_typeComponent,
-    ChildformComponent,
-    DistrictComponent,
-    StateComponent,
-    CountryComponent,
-    Ad9Component,
-    Ad8Component,
-    Ad7Component,
-    Ad6Component,
-    Adv5Component,
-    Adv4Component,
-    SupportComponent,
-    Adv3Component,
-    Dv2Component,
-    Adv1Component,
-    Basicp3Component,
-    Basicp2Component,
-    Basicp1Component,
-  ],
-  imports: [
-    QRCodeModule,
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ClarityModule,
-    HelperModule,
-    MainRoutingModule,
-    DragDropModule,
-    HttpClientModule,
-    ImageCropperModule,
-    TagInputModule,
-    CodemirrorModule,
-    CKEditorModule,
-    GridsterModule,
-    NgChartsModule,
-    NgxChartsModule,
-    DynamicModule,
-    FieldTypesModule,
-    SharedModule,
-    ShieldDashboardModule,
-  ],
-  providers: [
-    CookieService,
-    WireframeService,
-
-
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class MainModule { }

frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.html

@@ -1,280 +0,0 @@
-<!-- Theme Customization Screen -->
-<div class="theme-customization-screen">
-    <!-- Header -->
-    <div class="theme-header">
-        <div class="header-content">
-            <div class="header-left">
-                <h1 class="page-title">
-                    <clr-icon shape="palette"></clr-icon>
-                    Theme Customization
-                </h1>
-                <p class="page-subtitle">Customize your application's appearance with colors, fonts, and styles</p>
-            </div>
-            <div class="header-actions">
-                <button class="modern-btn btn-outline" (click)="resetToDefault()">
-                    <clr-icon shape="refresh"></clr-icon>
-                    Reset to Default
-                </button>
-                <button class="modern-btn btn-primary" (click)="exportTheme()">
-                    <clr-icon shape="download"></clr-icon>
-                    Export Theme
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Main Content -->
-    <div class="theme-content">
-        <div class="theme-layout">
-            <!-- Left Sidebar - Theme Selection -->
-            <div class="theme-sidebar">
-                <div class="sidebar-section">
-                    <h3 class="section-title">Predefined Themes</h3>
-                    <div class="theme-grid">
-                        <div *ngFor="let theme of themes" class="theme-card"
-                            [class.active]="currentTheme?.id === theme.id" (click)="selectTheme(theme.id)">
-                            <div class="theme-preview" [style.background]="theme.colors.background">
-                                <div class="preview-header" [style.background]="theme.colors.primary"></div>
-                                <div class="preview-content">
-                                    <div class="preview-card" [style.background]="theme.colors.surface"
-                                        [style.border-radius]="theme.borderRadius">
-                                        <div class="preview-text" [style.color]="theme.colors.text">Sample Text</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="theme-info">
-                                <h4 class="theme-name">{{ theme.name }}</h4>
-                                <div class="theme-colors">
-                                    <div class="color-dot" [style.background]="theme.colors.primary"></div>
-                                    <div class="color-dot" [style.background]="theme.colors.secondary"></div>
-                                    <div class="color-dot" [style.background]="theme.colors.accent"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="sidebar-section">
-                    <button class="modern-btn btn-primary btn-block" (click)="startCustomizing()"
-                        [disabled]="isCustomizing">
-                        <clr-icon shape="cog"></clr-icon>
-                        Customize Theme
-                    </button>
-                </div>
-            </div>
-
-            <!-- Right Content - Customization Panel -->
-            <div class="theme-main">
-                <div *ngIf="!isCustomizing" class="welcome-state">
-                    <div class="welcome-content">
-                        <div class="welcome-icon">
-                            <clr-icon shape="palette" size="48"></clr-icon>
-                        </div>
-                        <h2>Choose a Theme</h2>
-                        <p>Select from our predefined themes or create your own custom theme to match your brand and
-                            preferences.</p>
-                        <div class="current-theme-info" *ngIf="currentTheme">
-                            <h3>Current Theme: {{ currentTheme.name }}</h3>
-                            <div class="theme-preview-large" [style.background]="currentTheme.colors.background">
-                                <div class="preview-header" [style.background]="currentTheme.colors.primary"></div>
-                                <div class="preview-content">
-                                    <div class="preview-card" [style.background]="currentTheme.colors.surface"
-                                        [style.border-radius]="currentTheme.borderRadius">
-                                        <div class="preview-text" [style.color]="currentTheme.colors.text">Sample Text
-                                        </div>
-                                        <div class="preview-text-secondary"
-                                            [style.color]="currentTheme.colors.textSecondary">Secondary Text</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div *ngIf="isCustomizing" class="customization-panel">
-                    <!-- Customization Header -->
-                    <div class="customization-header">
-                        <h2>Customize Your Theme</h2>
-                        <div class="header-actions">
-                            <button class="modern-btn btn-outline" (click)="cancelCustomizing()">
-                                <clr-icon shape="times"></clr-icon>
-                                Cancel
-                            </button>
-                            <button class="modern-btn btn-primary" (click)="applyCustomTheme()">
-                                <clr-icon shape="check"></clr-icon>
-                                Apply Theme
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Color Customization -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="color-palette"></clr-icon>
-                            Colors
-                        </h3>
-                        <div class="color-grid">
-                            <div class="color-group">
-                                <label class="color-label">Primary Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('primary')"
-                                        (input)="onColorChange('primary', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('primary')"
-                                        (input)="onColorChange('primary', $event.target.value); previewTheme()">
-                                </div>
-                                <div class="color-presets">
-                                    <div *ngFor="let preset of colorPresets" class="preset-color"
-                                        [style.background]="preset.value" [title]="preset.name"
-                                        (click)="onColorChange('primary', preset.value); previewTheme()">
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Secondary Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('secondary')"
-                                        (input)="onColorChange('secondary', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('secondary')"
-                                        (input)="onColorChange('secondary', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Accent Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('accent')"
-                                        (input)="onColorChange('accent', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('accent')"
-                                        (input)="onColorChange('accent', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Background Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('background')"
-                                        (input)="onColorChange('background', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('background')"
-                                        (input)="onColorChange('background', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Surface Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('surface')"
-                                        (input)="onColorChange('surface', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('surface')"
-                                        (input)="onColorChange('surface', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Text Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('text')"
-                                        (input)="onColorChange('text', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('text')"
-                                        (input)="onColorChange('text', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Font Customization -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="text"></clr-icon>
-                            Typography
-                        </h3>
-                        <div class="font-grid">
-                            <div class="font-group">
-                                <label class="font-label">Primary Font</label>
-                                <select class="font-select" [value]="getFontValue('primary')"
-                                    (change)="onFontChange('primary', $event.target.value); previewTheme()">
-                                    <option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
-                                    </option>
-                                </select>
-                                <div class="font-preview" [style.font-family]="getFontValue('primary')">
-                                    The quick brown fox jumps over the lazy dog
-                                </div>
-                            </div>
-
-                            <div class="font-group">
-                                <label class="font-label">Secondary Font</label>
-                                <select class="font-select" [value]="getFontValue('secondary')"
-                                    (change)="onFontChange('secondary', $event.target.value); previewTheme()">
-                                    <option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
-                                    </option>
-                                </select>
-                                <div class="font-preview" [style.font-family]="getFontValue('secondary')">
-                                    The quick brown fox jumps over the lazy dog
-                                </div>
-                            </div>
-
-                            <div class="font-group">
-                                <label class="font-label">Monospace Font</label>
-                                <select class="font-select" [value]="getFontValue('mono')"
-                                    (change)="onFontChange('mono', $event.target.value); previewTheme()">
-                                    <option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
-                                    </option>
-                                </select>
-                                <div class="font-preview" [style.font-family]="getFontValue('mono')">
-                                    The quick brown fox jumps over the lazy dog
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Advanced Settings -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="cog"></clr-icon>
-                            Advanced Settings
-                        </h3>
-                        <div class="advanced-grid">
-                            <div class="advanced-group">
-                                <label class="advanced-label">Border Radius</label>
-                                <div class="range-input-group">
-                                    <input type="range" class="range-slider" min="0" max="2" step="0.25"
-                                        [value]="getBorderRadiusValue().replace('rem', '')"
-                                        (input)="onBorderRadiusChange($event.target.value + 'rem'); previewTheme()">
-                                    <span class="range-value">{{ getBorderRadiusValue() }}</span>
-                                </div>
-                            </div>
-
-                            <div class="advanced-group">
-                                <label class="advanced-label">Shadow Intensity</label>
-                                <div class="range-input-group">
-                                    <input type="range" class="range-slider" min="0" max="50" step="5"
-                                        [value]="getShadowValueNumber()"
-                                        (input)="onShadowChange('0 ' + $event.target.value + 'px 15px -3px rgba(0, 0, 0, 0.1)'); previewTheme()">
-                                    <span class="range-value">{{ getShadowValueNumber() }}px</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Import/Export -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="import"></clr-icon>
-                            Import/Export
-                        </h3>
-                        <div class="import-export-grid">
-                            <div class="import-group">
-                                <label class="import-label">Import Theme</label>
-                                <input type="file" class="file-input" accept=".json" (change)="importTheme($event)">
-                                <button class="modern-btn btn-outline">
-                                    <clr-icon shape="upload"></clr-icon>
-                                    Choose File
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.scss

@@ -1,622 +0,0 @@
-// ========================================
-// THEME CUSTOMIZATION COMPONENT STYLES
-// ========================================
-@import '../../../../styles/design-tokens';
-
-// Main Container
-// ========================================
-
-.theme-customization-screen {
-  min-height: 100vh;
-  background: var(--theme-background, $gray-50);
-  padding: $space-6;
-}
-
-// Header
-// ========================================
-
-.theme-header {
-  background: var(--theme-surface, $white);
-  border-radius: $radius-2xl;
-  box-shadow: var(--theme-shadow, $shadow-lg);
-  margin-bottom: $space-8;
-  padding: $space-6;
-
-  .header-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $space-4;
-
-    @media (max-width: $breakpoint-md) {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  .header-left {
-    .page-title {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-      font-size: $text-3xl;
-      font-weight: $font-bold;
-      color: var(--theme-text, $gray-900);
-      margin-bottom: $space-2;
-
-      clr-icon {
-        color: var(--theme-primary, $primary-500);
-      }
-    }
-
-    .page-subtitle {
-      font-size: $text-lg;
-      color: var(--theme-text-secondary, $gray-600);
-      margin: 0;
-    }
-  }
-
-  .header-actions {
-    display: flex;
-    gap: $space-3;
-    flex-shrink: 0;
-
-    @media (max-width: $breakpoint-md) {
-      width: 100%;
-      justify-content: stretch;
-    }
-  }
-}
-
-// Main Content
-// ========================================
-
-.theme-content {
-  .theme-layout {
-    display: grid;
-    grid-template-columns: 350px 1fr;
-    gap: $space-8;
-    min-height: 600px;
-
-    @media (max-width: $breakpoint-lg) {
-      grid-template-columns: 1fr;
-      gap: $space-6;
-    }
-  }
-}
-
-// Sidebar
-// ========================================
-
-.theme-sidebar {
-  background: var(--theme-surface, $white);
-  border-radius: $radius-2xl;
-  box-shadow: var(--theme-shadow, $shadow-lg);
-  padding: $space-6;
-  height: fit-content;
-
-  .sidebar-section {
-    margin-bottom: $space-6;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .section-title {
-    font-size: $text-lg;
-    font-weight: $font-semibold;
-    color: var(--theme-text, $gray-900);
-    margin-bottom: $space-4;
-  }
-
-  .theme-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: $space-4;
-  }
-
-  .theme-card {
-    border: 2px solid transparent;
-    border-radius: $radius-xl;
-    padding: $space-4;
-    cursor: pointer;
-    transition: all $duration-200 $ease-out;
-    background: var(--theme-surface, $white);
-
-    &:hover {
-      border-color: var(--theme-primary, $primary-200);
-      transform: translateY(-2px);
-      box-shadow: var(--theme-shadow, $shadow-lg);
-    }
-
-    &.active {
-      border-color: var(--theme-primary, $primary-500);
-      box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
-    }
-
-    .theme-preview {
-      height: 80px;
-      border-radius: $radius-lg;
-      overflow: hidden;
-      margin-bottom: $space-3;
-      position: relative;
-
-      .preview-header {
-        height: 20px;
-        width: 100%;
-      }
-
-      .preview-content {
-        padding: $space-3;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .preview-card {
-          width: 100%;
-          height: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-          .preview-text {
-            font-size: $text-xs;
-            font-weight: $font-medium;
-          }
-        }
-      }
-    }
-
-    .theme-info {
-      .theme-name {
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-        color: var(--theme-text, $gray-900);
-        margin-bottom: $space-2;
-      }
-
-      .theme-colors {
-        display: flex;
-        gap: $space-2;
-
-        .color-dot {
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          border: 2px solid var(--theme-surface, $white);
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-  }
-}
-
-// Main Panel
-// ========================================
-
-.theme-main {
-  background: var(--theme-surface, $white);
-  border-radius: $radius-2xl;
-  box-shadow: var(--theme-shadow, $shadow-lg);
-  padding: $space-6;
-  min-height: 600px;
-}
-
-// Welcome State
-// ========================================
-
-.welcome-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 400px;
-
-  .welcome-content {
-    text-align: center;
-    max-width: 500px;
-
-    .welcome-icon {
-      margin-bottom: $space-6;
-
-      clr-icon {
-        color: var(--theme-primary, $primary-500);
-      }
-    }
-
-    h2 {
-      font-size: $text-2xl;
-      font-weight: $font-bold;
-      color: var(--theme-text, $gray-900);
-      margin-bottom: $space-4;
-    }
-
-    p {
-      font-size: $text-lg;
-      color: var(--theme-text-secondary, $gray-600);
-      margin-bottom: $space-8;
-      line-height: 1.6;
-    }
-
-    .current-theme-info {
-      h3 {
-        font-size: $text-xl;
-        font-weight: $font-semibold;
-        color: var(--theme-text, $gray-900);
-        margin-bottom: $space-4;
-      }
-
-      .theme-preview-large {
-        height: 120px;
-        border-radius: $radius-xl;
-        overflow: hidden;
-        position: relative;
-        box-shadow: var(--theme-shadow, $shadow-lg);
-
-        .preview-header {
-          height: 30px;
-          width: 100%;
-        }
-
-        .preview-content {
-          padding: $space-4;
-          height: 90px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .preview-card {
-            width: 100%;
-            height: 50px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-            .preview-text {
-              font-size: $text-sm;
-              font-weight: $font-semibold;
-              margin-bottom: 2px;
-            }
-
-            .preview-text-secondary {
-              font-size: $text-xs;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Customization Panel
-// ========================================
-
-.customization-panel {
-  .customization-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: $space-8;
-    padding-bottom: $space-4;
-    border-bottom: 1px solid var(--theme-text-secondary, $gray-200);
-
-    h2 {
-      font-size: $text-2xl;
-      font-weight: $font-bold;
-      color: var(--theme-text, $gray-900);
-      margin: 0;
-    }
-
-    .header-actions {
-      display: flex;
-      gap: $space-3;
-    }
-  }
-
-  .customization-section {
-    margin-bottom: $space-8;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .section-title {
-      display: flex;
-      align-items: center;
-      gap: $space-2;
-      font-size: $text-lg;
-      font-weight: $font-semibold;
-      color: var(--theme-text, $gray-900);
-      margin-bottom: $space-4;
-
-      clr-icon {
-        color: var(--theme-primary, $primary-500);
-      }
-    }
-  }
-}
-
-// Color Customization
-// ========================================
-
-.color-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.color-group {
-  .color-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .color-input-group {
-    display: flex;
-    gap: $space-2;
-    margin-bottom: $space-3;
-
-    .color-picker {
-      width: 40px;
-      height: 40px;
-      border: none;
-      border-radius: $radius-lg;
-      cursor: pointer;
-      overflow: hidden;
-
-      &::-webkit-color-swatch-wrapper {
-        padding: 0;
-      }
-
-      &::-webkit-color-swatch {
-        border: none;
-        border-radius: $radius-lg;
-      }
-    }
-
-    .color-text {
-      flex: 1;
-      padding: $space-2 $space-3;
-      border: 1px solid var(--theme-text-secondary, $gray-300);
-      border-radius: $radius-lg;
-      font-size: $text-sm;
-      color: var(--theme-text, $gray-900);
-      background: var(--theme-surface, $white);
-
-      &:focus {
-        outline: none;
-        border-color: var(--theme-primary, $primary-500);
-        box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
-      }
-    }
-  }
-
-  .color-presets {
-    display: flex;
-    gap: $space-2;
-    flex-wrap: wrap;
-
-    .preset-color {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      cursor: pointer;
-      border: 2px solid var(--theme-surface, $white);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      transition: transform $duration-200 $ease-out;
-
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-}
-
-// Font Customization
-// ========================================
-
-.font-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.font-group {
-  .font-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .font-select {
-    width: 100%;
-    padding: $space-2 $space-3;
-    border: 1px solid var(--theme-text-secondary, $gray-300);
-    border-radius: $radius-lg;
-    font-size: $text-sm;
-    color: var(--theme-text, $gray-900);
-    background: var(--theme-surface, $white);
-    margin-bottom: $space-3;
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary, $primary-500);
-      box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
-    }
-  }
-
-  .font-preview {
-    padding: $space-3;
-    background: var(--theme-background, $gray-50);
-    border-radius: $radius-lg;
-    font-size: $text-sm;
-    color: var(--theme-text, $gray-700);
-    border: 1px solid var(--theme-text-secondary, $gray-200);
-  }
-}
-
-// Advanced Settings
-// ========================================
-
-.advanced-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.advanced-group {
-  .advanced-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .range-input-group {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-
-    .range-slider {
-      flex: 1;
-      height: 6px;
-      border-radius: 3px;
-      background: var(--theme-text-secondary, $gray-300);
-      outline: none;
-      cursor: pointer;
-
-      &::-webkit-slider-thumb {
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: var(--theme-primary, $primary-500);
-        cursor: pointer;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-
-      &::-moz-range-thumb {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: var(--theme-primary, $primary-500);
-        cursor: pointer;
-        border: none;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-    }
-
-    .range-value {
-      font-size: $text-sm;
-      font-weight: $font-medium;
-      color: var(--theme-text, $gray-700);
-      min-width: 60px;
-      text-align: center;
-    }
-  }
-}
-
-// Import/Export
-// ========================================
-
-.import-export-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.import-group {
-  .import-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .file-input {
-    display: none;
-  }
-}
-
-// Responsive Design
-// ========================================
-
-@media (max-width: $breakpoint-lg) {
-  .theme-customization-screen {
-    padding: $space-4;
-  }
-
-  .theme-header {
-    padding: $space-4;
-  }
-
-  .theme-sidebar,
-  .theme-main {
-    padding: $space-4;
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .theme-customization-screen {
-    padding: $space-3;
-  }
-
-  .theme-header {
-    padding: $space-3;
-  }
-
-  .theme-sidebar,
-  .theme-main {
-    padding: $space-3;
-  }
-
-  .color-grid,
-  .font-grid,
-  .advanced-grid,
-  .import-export-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: $breakpoint-sm) {
-  .theme-customization-screen {
-    padding: $space-2;
-  }
-
-  .theme-header {
-    padding: $space-3;
-  }
-
-  .theme-sidebar,
-  .theme-main {
-    padding: $space-3;
-  }
-}

frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.ts

@@ -1,246 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ThemeService, Theme } from '../../../services/theme.service';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'app-theme-customization',
-  templateUrl: './theme-customization.component.html',
-  styleUrls: ['./theme-customization.component.scss']
-})
-export class ThemeCustomizationComponent implements OnInit, OnDestroy {
-  themes: Theme[] = [];
-  currentTheme: Theme | null = null;
-  customTheme: Partial<Theme> = {
-    colors: {
-      primary: '#0ea5e9',
-      secondary: '#64748b',
-      accent: '#8b5cf6',
-      background: '#f8fafc',
-      surface: '#ffffff',
-      text: '#111827',
-      textSecondary: '#6b7280'
-    },
-    fonts: {
-      primary: 'Inter',
-      secondary: 'Poppins',
-      mono: 'JetBrains Mono'
-    },
-    borderRadius: '0.75rem',
-    shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-  };
-  isCustomizing = false;
-  showAdvanced = false;
-  
-  private themeSubscription: Subscription = new Subscription();
-
-  // Color presets and font options from service
-  colorPresets = this.themeService.getColorPresets();
-  fontOptions = this.themeService.getFontOptions();
-
-  constructor(private themeService: ThemeService) {}
-
-  ngOnInit(): void {
-    this.themes = this.themeService.getThemes();
-    this.currentTheme = this.themeService.getCurrentTheme();
-    
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(theme => {
-      this.currentTheme = theme;
-    });
-
-    this.initializeCustomTheme();
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-
-  selectTheme(themeId: string): void {
-    this.themeService.selectTheme(themeId);
-    this.isCustomizing = false;
-  }
-
-  startCustomizing(): void {
-    this.isCustomizing = true;
-    this.initializeCustomTheme();
-  }
-
-  cancelCustomizing(): void {
-    this.isCustomizing = false;
-    this.initializeCustomTheme();
-  }
-
-  applyCustomTheme(): void {
-    if (this.customTheme.colors && this.customTheme.fonts) {
-      const customTheme: Theme = {
-        id: 'custom',
-        name: 'Custom Theme',
-        colors: this.customTheme.colors,
-        fonts: this.customTheme.fonts,
-        borderRadius: this.customTheme.borderRadius || '0.5rem',
-        shadow: this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-      };
-      this.themeService.applyTheme(customTheme);
-    }
-    this.isCustomizing = false;
-  }
-
-  resetToDefault(): void {
-    this.themeService.resetToDefault();
-  }
-
-  exportTheme(): void {
-    const themeJson = this.themeService.exportTheme();
-    this.downloadFile(themeJson, 'theme.json', 'application/json');
-  }
-
-  importTheme(event: any): void {
-    const file = event.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e.target?.result as string;
-        if (this.themeService.importTheme(content)) {
-          alert('Theme imported successfully!');
-        } else {
-          alert('Failed to import theme. Please check the file format.');
-        }
-      };
-      reader.readAsText(file);
-    }
-  }
-
-  private initializeCustomTheme(): void {
-    if (this.currentTheme) {
-      this.customTheme = {
-        colors: { 
-          primary: this.currentTheme.colors.primary,
-          secondary: this.currentTheme.colors.secondary,
-          accent: this.currentTheme.colors.accent,
-          background: this.currentTheme.colors.background,
-          surface: this.currentTheme.colors.surface,
-          text: this.currentTheme.colors.text,
-          textSecondary: this.currentTheme.colors.textSecondary
-        },
-        fonts: { 
-          primary: this.currentTheme.fonts.primary,
-          secondary: this.currentTheme.fonts.secondary,
-          mono: this.currentTheme.fonts.mono
-        },
-        borderRadius: this.currentTheme.borderRadius,
-        shadow: this.currentTheme.shadow
-      };
-    } else {
-      // Default values if no current theme
-      this.customTheme = {
-        colors: {
-          primary: '#0ea5e9',
-          secondary: '#64748b',
-          accent: '#8b5cf6',
-          background: '#f8fafc',
-          surface: '#ffffff',
-          text: '#111827',
-          textSecondary: '#6b7280'
-        },
-        fonts: {
-          primary: 'Inter',
-          secondary: 'Poppins',
-          mono: 'JetBrains Mono'
-        },
-        borderRadius: '0.75rem',
-        shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-      };
-    }
-  }
-
-  private downloadFile(content: string, filename: string, contentType: string): void {
-    const blob = new Blob([content], { type: contentType });
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    link.click();
-    window.URL.revokeObjectURL(url);
-  }
-
-  // Color picker methods
-  onColorChange(colorType: string, value: string): void {
-    if (!this.customTheme.colors) {
-      this.customTheme.colors = {
-        primary: '#0ea5e9',
-        secondary: '#64748b',
-        accent: '#8b5cf6',
-        background: '#f8fafc',
-        surface: '#ffffff',
-        text: '#111827',
-        textSecondary: '#6b7280'
-      };
-    }
-    (this.customTheme.colors as any)[colorType] = value;
-  }
-
-  // Font picker methods
-  onFontChange(fontType: string, value: string): void {
-    if (!this.customTheme.fonts) {
-      this.customTheme.fonts = {
-        primary: 'Inter',
-        secondary: 'Poppins',
-        mono: 'JetBrains Mono'
-      };
-    }
-    (this.customTheme.fonts as any)[fontType] = value;
-  }
-
-  // Border radius methods
-  onBorderRadiusChange(value: string): void {
-    this.customTheme.borderRadius = value;
-  }
-
-  // Shadow methods
-  onShadowChange(value: string): void {
-    this.customTheme.shadow = value;
-  }
-
-  // Preview methods
-  previewTheme(): void {
-    if (this.isCustomizing && this.customTheme.colors && this.customTheme.fonts) {
-      const previewTheme: Theme = {
-        id: 'preview',
-        name: 'Preview Theme',
-        colors: this.customTheme.colors,
-        fonts: this.customTheme.fonts,
-        borderRadius: this.customTheme.borderRadius || '0.5rem',
-        shadow: this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-      };
-      this.themeService.applyTheme(previewTheme);
-    }
-  }
-
-  // Utility methods
-  getColorValue(colorType: string): string {
-    if (this.customTheme.colors) {
-      return (this.customTheme.colors as any)[colorType] || '#0ea5e9';
-    }
-    return '#0ea5e9';
-  }
-
-  getFontValue(fontType: string): string {
-    if (this.customTheme.fonts) {
-      return (this.customTheme.fonts as any)[fontType] || 'Inter';
-    }
-    return 'Inter';
-  }
-
-  getBorderRadiusValue(): string {
-    return this.customTheme.borderRadius || '0.75rem';
-  }
-
-  getShadowValue(): string {
-    return this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
-  }
-
-  getShadowValueNumber(): string {
-    const shadowValue = this.getShadowValue();
-    const match = shadowValue.match(/\d+/);
-    return match ? match[0] : '10';
-  }
-}

frontend/angular-clarity-master/src/app/services/api/login.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { Observable, BehaviorSubject, Subject } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { UserInfoService, LoginInfoInStorage} from '../user-info.service';
 import { ApiRequestService } from './api-request.service';
 import { HttpClient } from '@angular/common/http';
@@ -43,15 +43,12 @@ export class LoginService {
 
         */
 
-        // let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
+        let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
-       let loginDataSubject: Subject<any> = new Subject<any>();
-
         let loginInfoReturn:LoginInfoInStorage; // Object that we want to send back to Login Page
 
         this.apiRequest.loginAuthentication('token/session', bodyData)
-            .subscribe({
+            .subscribe(jsonResp => {
-                next: (jsonResp) => {
+                console.log('login response: ', jsonResp);
-                    console.log('login response in service : ', jsonResp);
                 if (jsonResp.operationMessage=='Login Failed') {
                   this.toastr.warning('Not Login Getting Error check your Username and password');
                }
@@ -81,17 +78,16 @@ export class LoginService {
                     this.userInfoService.storeUserInfo(JSON.stringify(loginInfoReturn.user));
                 }
                 else {
-                        //Create a failure object that we want to send back to login page
+                    //Create a faliure object that we want to send back to login page
                     loginInfoReturn = {
                         "success":false,
-                            "message":jsonResp.operationMessage,
+                        "message":jsonResp.msgDesc,
                         "landingPage":"/login"
                     };
                 }
                 loginDataSubject.next(loginInfoReturn);
-                    loginDataSubject.complete(); // Complete the subject
             },
-                error: (err) => {
+            err => {
                 console.log('login error ', err);
               loginInfoReturn = {
                 "success": false,
@@ -101,9 +97,6 @@ export class LoginService {
               if (err) {
                 this.toastr.error('Getting Server Error');
              }
-                    loginDataSubject.next(loginInfoReturn); // Send the error response
-                    loginDataSubject.complete(); // Complete the subject
-                }
             });
 
             return loginDataSubject;

frontend/angular-clarity-master/src/app/services/builder/additionalcontainer.service.ts

@@ -8,9 +8,7 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class AdditionalcontainerService {
-  // baseurl = environment.sureops;
+  baseurl = environment.sureops;
-  baseurl = environment.backendUrl;
-
   private baseURL = "Gaurav_testing/Gaurav_testing" ;
   constructor(private apiRequest: ApiRequestService,
     private _http: HttpClient,) { }

frontend/angular-clarity-master/src/app/services/builder/dashboard3.service.ts

@@ -39,15 +39,18 @@ export class Dashboard3Service {
           return this.apiRequest.delete(_http);
       }
 
-  getById(id: number) {
+      getById(id:number)
+      {
         let _http = this.getbyidURL + "/" + id;
         return this.apiRequest.get(_http);
       }
 
-  addToDB(line: any): Observable<any> {
+      addToDB(line:any):Observable<any>
+      {
        return this.apiRequest.put(this.editURL,line);
       }
-  UpdateLineData(id: number, line: any) {
+      UpdateLineData(id:number, line:any)
+      {
       // line = {
       //         headers: new HttpHeaders({
       //           'Content-Type': 'application/json'
@@ -281,46 +284,13 @@ export class Dashboard3Service {
   return this.apiRequest.get(`Dashboard/Dashboard`);
 }
 
-  public getChartData(tableName: string, jobType: string, xAxis?: any, yAxes?: any, sureId?: number, parameter?: string, parameterValue?: string, filters?: string): Observable<any> {
+public getChartData(tableName: string, jobType: string, xAxis?:any,yAxes?:any ): Observable<any> {
-    let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
+  const url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
-    if (sureId) {
-      url += `&sureId=${sureId}`;
-    }
-    if (parameter) {
-      url += `&parameter=${encodeURIComponent(parameter)}`;
-    }
-    if (parameterValue) {
-      url += `&parameterValue=${encodeURIComponent(parameterValue)}`;
-    }
-    
-    console.log('=== DASHBOARD SERVICE DEBUG INFO ===');
-    console.log('Base URL:', url);
-    console.log('Filters parameter:', filters);
-
-    // Parse filters JSON and add as a single "filters" parameter
-    if (filters) {
-      try {
-        const filterObj = JSON.parse(filters);
-        console.log('Parsed filter object:', filterObj);
-        
-        // Add all filters as a single "filters" parameter with JSON object
-        url += `&filters=${encodeURIComponent(JSON.stringify(filterObj))}`;
-        console.log('Added filters parameter:', JSON.stringify(filterObj));
-      } catch (e) {
-        console.warn('Failed to parse filter parameters:', e);
-      }
-    }
-
-    console.log('Final constructed URL:', url);
-    console.log('=== END DASHBOARD SERVICE DEBUG ===');
   return this._http.get(url);
 }
 
-  public getUrlChartData(tableName: string, jobType: string, xAxis: any, yAxes: any, store: any, chartUrl: any, sureId?: number): Observable<any> {
+public getUrlChartData(tableName: string, jobType: string, xAxis:any,yAxes:any,store:any,chartUrl:any): Observable<any> {
-    let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&url=${chartUrl}&xAxis=${xAxis}&yAxes=${yAxes}&datastore_name=${store}`;
+  const url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&url=${chartUrl}&xAxis=${xAxis}&yAxes=${yAxes}&datastore_name=${store}`;
-    if (sureId) {
-      url += `&sureId=${sureId}`;
-    }
   return this._http.get(url);
 }
 

frontend/angular-clarity-master/src/app/services/fnd/alerts.service.ts

@@ -62,20 +62,7 @@ export class AlertsService {
       return this.apiRequest.get(`AlertRules/columnlist/${id}/${tableName}`);
     }
 
-    public getColumnfromurl(url: any, sureId?: number): Observable<any> {
+    public getColumnfromurl(url: any): Observable<any> {
-      let apiUrl = `chart/getAllKeys?apiUrl=${url}`;
+      return this.apiRequest.get(`chart/getAllKeys?apiUrl=${url}`);
-      if (sureId) {
-        apiUrl += `&sureId=${sureId}`;
-      }
-      return this.apiRequest.get(apiUrl);
-    }
-    
-    // Get values for a specific key from API
-    public getValuesFromUrl(url: string, sureId: number | undefined, key: string): Observable<any> {
-      let apiUrl = `chart/getValue?apiUrl=${url}&key=${key}`;
-      if (sureId) {
-        apiUrl += `&sureId=${sureId}`;
-      }
-      return this.apiRequest.get(apiUrl);
     }
 }

frontend/angular-clarity-master/src/app/services/theme.service.ts

@@ -1,326 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-export interface ThemeColors {
-  primary: string;
-  secondary: string;
-  accent: string;
-  background: string;
-  surface: string;
-  text: string;
-  textSecondary: string;
-}
-
-export interface Theme {
-  id: string;
-  name: string;
-  colors: ThemeColors;
-  borderRadius: string;
-  shadow: string;
-  fonts: {
-    primary: string;
-    secondary: string;
-    mono: string;
-  };
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ThemeService {
-  private currentThemeSubject = new BehaviorSubject<Theme>(this.getDefaultTheme());
-  public currentTheme$ = this.currentThemeSubject.asObservable();
-
-  private readonly STORAGE_KEY = 'cloudnsure-theme';
-
-  constructor() {
-    this.loadThemeFromStorage();
-  }
-
-  // Default theme
-  private getDefaultTheme(): Theme {
-    return {
-      id: 'default',
-      name: 'Default Blue',
-      colors: {
-        primary: '#0ea5e9',
-        secondary: '#64748b',
-        accent: '#8b5cf6',
-        background: '#f8fafc',
-        surface: '#ffffff',
-        text: '#1f2937',
-        textSecondary: '#6b7280'
-      },
-      borderRadius: '0.5rem',
-      shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-      fonts: {
-        primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-      }
-    };
-  }
-
-  // Predefined themes
-  getThemes(): Theme[] {
-    return [
-      this.getDefaultTheme(),
-      {
-        id: 'purple',
-        name: 'Purple Dream',
-        colors: {
-          primary: '#8b5cf6',
-          secondary: '#64748b',
-          accent: '#ec4899',
-          background: '#faf5ff',
-          surface: '#ffffff',
-          text: '#1f2937',
-          textSecondary: '#6b7280'
-        },
-        borderRadius: '0.75rem',
-        shadow: '0 10px 15px -3px rgba(139, 92, 246, 0.1)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      },
-      {
-        id: 'green',
-        name: 'Forest Green',
-        colors: {
-          primary: '#10b981',
-          secondary: '#64748b',
-          accent: '#f59e0b',
-          background: '#f0fdf4',
-          surface: '#ffffff',
-          text: '#1f2937',
-          textSecondary: '#6b7280'
-        },
-        borderRadius: '0.375rem',
-        shadow: '0 10px 15px -3px rgba(16, 185, 129, 0.1)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      },
-      {
-        id: 'orange',
-        name: 'Sunset Orange',
-        colors: {
-          primary: '#f59e0b',
-          secondary: '#64748b',
-          accent: '#ef4444',
-          background: '#fffbeb',
-          surface: '#ffffff',
-          text: '#1f2937',
-          textSecondary: '#6b7280'
-        },
-        borderRadius: '1rem',
-        shadow: '0 10px 15px -3px rgba(245, 158, 11, 0.1)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      },
-      {
-        id: 'dark',
-        name: 'Dark Mode',
-        colors: {
-          primary: '#3b82f6',
-          secondary: '#9ca3af',
-          accent: '#8b5cf6',
-          background: '#111827',
-          surface: '#1f2937',
-          text: '#f9fafb',
-          textSecondary: '#d1d5db'
-        },
-        borderRadius: '0.5rem',
-        shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.3)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      }
-    ];
-  }
-
-  // Get current theme
-  getCurrentTheme(): Theme {
-    return this.currentThemeSubject.value;
-  }
-
-  // Apply theme
-  applyTheme(theme: Theme): void {
-    this.currentThemeSubject.next(theme);
-    this.saveThemeToStorage(theme);
-    this.updateCSSVariables(theme);
-  }
-
-  // Select theme by ID
-  selectTheme(themeId: string): void {
-    const theme = this.getThemes().find(t => t.id === themeId);
-    if (theme) {
-      this.applyTheme(theme);
-    }
-  }
-
-  // Update theme colors
-  updateThemeColors(colors: Partial<ThemeColors>): void {
-    const currentTheme = this.getCurrentTheme();
-    const updatedTheme = {
-      ...currentTheme,
-      colors: { ...currentTheme.colors, ...colors }
-    };
-    this.applyTheme(updatedTheme);
-  }
-
-  // Update theme fonts
-  updateThemeFonts(fonts: Partial<Theme['fonts']>): void {
-    const currentTheme = this.getCurrentTheme();
-    const updatedTheme = {
-      ...currentTheme,
-      fonts: { ...currentTheme.fonts, ...fonts }
-    };
-    this.applyTheme(updatedTheme);
-  }
-
-  // Update theme properties
-  updateThemeProperty(property: keyof Theme, value: any): void {
-    const currentTheme = this.getCurrentTheme();
-    const updatedTheme = {
-      ...currentTheme,
-      [property]: value
-    };
-    this.applyTheme(updatedTheme);
-  }
-
-  // Reset to default theme
-  resetToDefault(): void {
-    this.applyTheme(this.getDefaultTheme());
-  }
-
-  // Export theme
-  exportTheme(): string {
-    return JSON.stringify(this.getCurrentTheme(), null, 2);
-  }
-
-  // Import theme
-  importTheme(themeJson: string): boolean {
-    try {
-      const theme = JSON.parse(themeJson) as Theme;
-      if (this.validateTheme(theme)) {
-        this.applyTheme(theme);
-        return true;
-      }
-      return false;
-    } catch (error) {
-      console.error('Invalid theme JSON:', error);
-      return false;
-    }
-  }
-
-  // Validate theme structure
-  private validateTheme(theme: any): theme is Theme {
-    return (
-      theme &&
-      typeof theme.id === 'string' &&
-      typeof theme.name === 'string' &&
-      theme.colors &&
-      typeof theme.colors.primary === 'string' &&
-      typeof theme.colors.secondary === 'string' &&
-      typeof theme.colors.accent === 'string' &&
-      typeof theme.colors.background === 'string' &&
-      typeof theme.colors.surface === 'string' &&
-      typeof theme.colors.text === 'string' &&
-      typeof theme.colors.textSecondary === 'string'
-    );
-  }
-
-  // Update CSS custom properties
-  private updateCSSVariables(theme: Theme): void {
-    const root = document.documentElement;
-    
-    // Update color variables
-    root.style.setProperty('--theme-primary', theme.colors.primary);
-    root.style.setProperty('--theme-secondary', theme.colors.secondary);
-    root.style.setProperty('--theme-accent', theme.colors.accent);
-    root.style.setProperty('--theme-background', theme.colors.background);
-    root.style.setProperty('--theme-surface', theme.colors.surface);
-    root.style.setProperty('--theme-text', theme.colors.text);
-    root.style.setProperty('--theme-text-secondary', theme.colors.textSecondary);
-    
-    // Update other properties
-    root.style.setProperty('--theme-border-radius', theme.borderRadius);
-    root.style.setProperty('--theme-shadow', theme.shadow);
-    root.style.setProperty('--theme-font-primary', theme.fonts.primary);
-    root.style.setProperty('--theme-font-secondary', theme.fonts.secondary);
-    root.style.setProperty('--theme-font-mono', theme.fonts.mono);
-
-    // Update body class for theme-specific styling
-    document.body.className = document.body.className.replace(/theme-\w+/g, '');
-    document.body.classList.add(`theme-${theme.id}`);
-  }
-
-  // Load theme from localStorage
-  private loadThemeFromStorage(): void {
-    try {
-      const stored = localStorage.getItem(this.STORAGE_KEY);
-      if (stored) {
-        const theme = JSON.parse(stored) as Theme;
-        if (this.validateTheme(theme)) {
-          this.currentThemeSubject.next(theme);
-          this.updateCSSVariables(theme);
-        }
-      } else {
-        // Apply default theme on first load
-        this.updateCSSVariables(this.getDefaultTheme());
-      }
-    } catch (error) {
-      console.error('Error loading theme from storage:', error);
-      this.updateCSSVariables(this.getDefaultTheme());
-    }
-  }
-
-  // Save theme to localStorage
-  private saveThemeToStorage(theme: Theme): void {
-    try {
-      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(theme));
-    } catch (error) {
-      console.error('Error saving theme to storage:', error);
-    }
-  }
-
-  // Get color presets for color picker
-  getColorPresets(): { name: string; value: string }[] {
-    return [
-      { name: 'Blue', value: '#0ea5e9' },
-      { name: 'Purple', value: '#8b5cf6' },
-      { name: 'Green', value: '#10b981' },
-      { name: 'Orange', value: '#f59e0b' },
-      { name: 'Red', value: '#ef4444' },
-      { name: 'Pink', value: '#ec4899' },
-      { name: 'Indigo', value: '#6366f1' },
-      { name: 'Teal', value: '#14b8a6' },
-      { name: 'Yellow', value: '#eab308' },
-      { name: 'Gray', value: '#64748b' }
-    ];
-  }
-
-  // Get font options
-  getFontOptions(): { name: string; value: string }[] {
-    return [
-      { name: 'Inter', value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Poppins', value: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Roboto', value: 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' },
-      { name: 'Open Sans', value: '"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Lato', value: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Montserrat', value: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Source Sans Pro', value: '"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Nunito', value: 'Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }
-    ];
-  }
-}

frontend/angular-clarity-master/src/app/shared/components/dynamic-form/dynamic-form.component.ts

@@ -1,89 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
-import { FieldConfig } from '../field-types/base-field.component';
-import { FieldFactoryService } from '../field-types/field-factory.service';
-
-@Component({
-  selector: 'app-dynamic-form',
-  template: `
-    <form [class]="formClass" (ngSubmit)="onSubmit()">
-      <div class="clr-row">
-        <div 
-          *ngFor="let field of fields" 
-          [class]="'clr-col-' + (field.colSpan || 12) + ' clr-col-sm-12'"
-        >
-          <ng-container #fieldContainer></ng-container>
-        </div>
-      </div>
-      
-      <div class="sq-form-actions" *ngIf="showActions">
-        <button 
-          type="button" 
-          class="sq-btn sq-btn-outline" 
-          (click)="onCancel()"
-          [disabled]="isSubmitting"
-        >
-          <clr-icon shape="times"></clr-icon>
-          <span>{{ cancelText }}</span>
-        </button>
-        <button 
-          type="submit" 
-          class="sq-btn sq-btn-primary" 
-          [disabled]="isSubmitting"
-        >
-          <clr-icon [attr.shape]="submitIcon"></clr-icon>
-          <span>{{ submitText }}</span>
-        </button>
-      </div>
-    </form>
-  `
-})
-export class DynamicFormComponent {
-  @Input() fields: FieldConfig[] = [];
-  @Input() formData: any = {};
-  @Input() formClass: string = 'sq-form';
-  @Input() showActions: boolean = true;
-  @Input() submitText: string = 'Submit';
-  @Input() cancelText: string = 'Cancel';
-  @Input() submitIcon: string = 'check';
-  
-  @Output() formSubmit = new EventEmitter<any>();
-  @Output() formCancel = new EventEmitter<void>();
-  
-  @ViewChild('fieldContainer', { read: ViewContainerRef }) fieldContainer: ViewContainerRef;
-  
-  isSubmitting = false;
-  
-  constructor(
-    private fieldFactory: FieldFactoryService,
-    private componentFactoryResolver: ComponentFactoryResolver
-  ) {}
-  
-  ngAfterViewInit() {
-    this.renderFields();
-  }
-  
-  renderFields() {
-    this.fieldContainer.clear();
-    
-    this.fields.forEach(field => {
-      this.fieldFactory.createField(
-        this.fieldContainer,
-        field.type,
-        field,
-        this.formData[field.name],
-        (value) => {
-          this.formData[field.name] = value;
-        }
-      );
-    });
-  }
-  
-  onSubmit() {
-    this.isSubmitting = true;
-    this.formSubmit.emit(this.formData);
-  }
-  
-  onCancel() {
-    this.formCancel.emit();
-  }
-}

frontend/angular-clarity-master/src/app/shared/components/field-types/base-field.component.ts

@@ -1,25 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-export interface FieldConfig {
-  name: string;
-  label: string;
-  type: string;
-  required?: boolean;
-  placeholder?: string;
-  validators?: any[];
-  options?: any[];
-  [key: string]: any; // For additional properties
-}
-
-@Component({
-  template: ''
-})
-export class BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: any;
-  @Output() valueChange = new EventEmitter<any>();
-  
-  onChange(value: any) {
-    this.valueChange.emit(value);
-  }
-}

frontend/angular-clarity-master/src/app/shared/components/field-types/field-factory.service.ts

@@ -1,52 +0,0 @@
-import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
-import { TextFieldComponent } from './text-field.component';
-import { NumberFieldComponent } from './number-field.component';
-import { PhoneFieldComponent } from './phone-field.component';
-import { ParagraphFieldComponent } from './paragraph-field.component';
-import { PasswordFieldComponent } from './password-field.component';
-import { TextareaFieldComponent } from './textarea-field.component';
-import { BaseFieldComponent } from './base-field.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class FieldFactoryService {
-  private componentMap: any = {
-    'text': TextFieldComponent,
-    'number': NumberFieldComponent,
-    'phone': PhoneFieldComponent,
-    'paragraph': ParagraphFieldComponent,
-    'password': PasswordFieldComponent,
-    'textarea': TextareaFieldComponent
-  };
-
-  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
-
-  createField(
-    container: ViewContainerRef,
-    fieldType: string,
-    fieldConfig: any,
-    value: any,
-    valueChangeCallback: (value: any) => void
-  ): any {
-    const component = this.componentMap[fieldType];
-    if (!component) {
-      throw new Error(`Unsupported field type: ${fieldType}`);
-    }
-
-    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
-    const componentRef = container.createComponent(factory);
-    
-    // Cast to BaseFieldComponent to access properties safely
-    const instance = componentRef.instance as BaseFieldComponent;
-    (instance as any).field = fieldConfig;
-    (instance as any).value = value;
-    
-    // Subscribe to value changes
-    if ((instance as any).valueChange && typeof (instance as any).valueChange.subscribe === 'function') {
-      (instance as any).valueChange.subscribe(valueChangeCallback);
-    }
-    
-    return componentRef;
-  }
-}

frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.module.ts

@@ -1,44 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ClarityModule } from '@clr/angular';
-
-import { BaseFieldComponent } from './base-field.component';
-import { TextFieldComponent } from './text-field.component';
-import { NumberFieldComponent } from './number-field.component';
-import { PhoneFieldComponent } from './phone-field.component';
-import { ParagraphFieldComponent } from './paragraph-field.component';
-import { PasswordFieldComponent } from './password-field.component';
-import { TextareaFieldComponent } from './textarea-field.component';
-import { DynamicFormComponent } from '../dynamic-form/dynamic-form.component';
-
-@NgModule({
-  declarations: [
-    BaseFieldComponent,
-    TextFieldComponent,
-    NumberFieldComponent,
-    PhoneFieldComponent,
-    ParagraphFieldComponent,
-    PasswordFieldComponent,
-    TextareaFieldComponent,
-    DynamicFormComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ClarityModule
-  ],
-  exports: [
-    BaseFieldComponent,
-    TextFieldComponent,
-    NumberFieldComponent,
-    PhoneFieldComponent,
-    ParagraphFieldComponent,
-    PasswordFieldComponent,
-    TextareaFieldComponent,
-    DynamicFormComponent
-  ],
-  providers: []
-})
-export class FieldTypesModule { }

frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.scss

@@ -1,364 +0,0 @@
-// Shared field styles with modern UI enhancements following UI rules
-.field-container {
-  margin-bottom: 24px;
-  position: relative;
-  animation: fadeInUp 0.3s ease-out;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.sq-form-label {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-  letter-spacing: 0.02em;
-  
-  .label-text {
-    flex: 1;
-  }
-  
-  .required-indicator {
-    color: var(--theme-error, #ef4444);
-    margin-left: 6px;
-    font-size: 16px;
-    line-height: 1;
-  }
-}
-
-.sq-form-input,
-.sq-form-textarea {
-  width: 100%;
-  padding: 14px 16px;
-  font-size: 15px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 2px solid rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  backdrop-filter: blur(10px);
-  
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
-    background: var(--theme-surface);
-    transform: translateY(-2px);
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-
-  &.error {
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
-    animation: shake 0.5s ease-in-out;
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-    font-style: italic;
-    opacity: 0.7;
-  }
-  
-  &:hover:not(:disabled):not(:focus) {
-    border-color: rgba(0, 0, 0, 0.15);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-    transform: translateY(-1px);
-  }
-}
-
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-5px); }
-  75% { transform: translateX(5px); }
-}
-
-.sq-form-textarea {
-  min-height: 120px;
-  resize: vertical;
-  border-radius: 12px;
-}
-
-.field-description {
-  color: var(--theme-text-secondary);
-  font-size: 13px;
-  margin-top: 8px;
-  font-style: italic;
-  line-height: 1.4;
-  display: flex;
-  align-items: flex-start;
-  
-  &::before {
-    content: "ℹ";
-    margin-right: 6px;
-    font-size: 12px;
-  }
-}
-
-.sq-error-message {
-  color: var(--theme-error, #ef4444);
-  font-size: 13px;
-  margin-top: 8px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  background: rgba(239, 68, 68, 0.05);
-  border-radius: 8px;
-  border-left: 3px solid var(--theme-error, #ef4444);
-  
-  &::before {
-    content: "⚠";
-    margin-right: 8px;
-    font-size: 16px;
-  }
-}
-
-// Phone field specific styles
-.phone-input-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  
-  .phone-input {
-    flex: 1;
-    border-radius: 12px;
-    padding-left: 100px;
-  }
-  
-  .country-code-selector {
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    bottom: 2px;
-    display: flex;
-    align-items: center;
-    padding: 0 12px;
-    background: var(--theme-background);
-    border-radius: 10px 0 0 10px;
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    z-index: 1;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    
-    &:hover {
-      background: var(--theme-surface);
-    }
-    
-    .country-flag {
-      margin-right: 8px;
-      font-size: 18px;
-    }
-    
-    .country-code {
-      font-weight: 500;
-      color: var(--theme-text);
-    }
-    
-    .dropdown-icon {
-      margin-left: 6px;
-      transition: transform 0.2s ease;
-    }
-  }
-  
-  .country-code-btn {
-    margin-left: 8px;
-    min-width: 80px;
-    border-radius: 12px;
-  }
-}
-
-// Password field specific styles with modern enhancements
-.password-input-container {
-  position: relative;
-  display: flex;
-  
-  .password-input {
-    flex: 1;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: none;
-  }
-  
-  .password-toggle {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: none;
-    height: 48px;
-    background: var(--theme-background);
-    border: 2px solid rgba(0, 0, 0, 0.08);
-    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--theme-text-secondary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 16px;
-    cursor: pointer;
-    
-    &:hover {
-      background: var(--theme-surface);
-      color: var(--theme-text);
-    }
-    
-    &:focus {
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
-      outline: none;
-    }
-    
-    clr-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-}
-
-.password-strength {
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-  padding: 12px;
-  background: var(--theme-background);
-  border-radius: 12px;
-  transition: all 0.3s ease;
-  
-  &.weak {
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.2);
-  }
-  
-  &.medium {
-    background: rgba(245, 158, 11, 0.1);
-    border: 1px solid rgba(245, 158, 11, 0.2);
-  }
-  
-  &.strong {
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.2);
-  }
-  
-  .strength-meter {
-    flex: 1;
-    height: 10px;
-    background-color: #e5e7eb;
-    border-radius: 5px;
-    overflow: hidden;
-    margin-right: 16px;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    
-    .strength-bar {
-      height: 100%;
-      border-radius: 5px;
-      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-      
-      &.weak {
-        background: linear-gradient(90deg, #ef4444 0%, #ef4444 100%);
-        width: 33%;
-      }
-      
-      &.medium {
-        background: linear-gradient(90deg, #ef4444 0%, #f59e0b 100%);
-        width: 66%;
-      }
-      
-      &.strong {
-        background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
-        width: 100%;
-      }
-    }
-  }
-  
-  .strength-label {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--theme-text-secondary);
-    min-width: 100px;
-    text-align: right;
-    
-    &.weak {
-      color: #ef4444;
-    }
-    
-    &.medium {
-      color: #f59e0b;
-    }
-    
-    &.strong {
-      color: #10b981;
-    }
-  }
-}
-
-// Character count for text areas with modern styling
-.character-count {
-  text-align: right;
-  font-size: 13px;
-  color: var(--theme-text-secondary);
-  margin-top: 8px;
-  font-weight: 500;
-  padding: 6px 12px;
-  background: var(--theme-background);
-  border-radius: 20px;
-  display: inline-block;
-  float: right;
-  transition: all 0.2s ease;
-  
-  &.warning {
-    color: #f59e0b;
-    background: rgba(245, 158, 11, 0.1);
-  }
-  
-  &.error {
-    color: #ef4444;
-    background: rgba(239, 68, 68, 0.1);
-  }
-}
-
-// Enhanced input group for better visual hierarchy
-.input-group {
-  position: relative;
-  margin-bottom: 24px;
-  
-  .input-group-prepend,
-  .input-group-append {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-    color: var(--theme-text-secondary);
-    padding: 0 12px;
-  }
-  
-  .input-group-prepend {
-    left: 12px;
-  }
-  
-  .input-group-append {
-    right: 12px;
-  }
-  
-  .input-with-addon {
-    padding-left: 40px;
-  }
-}

frontend/angular-clarity-master/src/app/shared/components/field-types/index.ts

@@ -1,8 +0,0 @@
-export * from './base-field.component';
-export * from './text-field.component';
-export * from './number-field.component';
-export * from './phone-field.component';
-export * from './paragraph-field.component';
-export * from './password-field.component';
-export * from './textarea-field.component';
-export * from './field-factory.service';

frontend/angular-clarity-master/src/app/shared/components/field-types/number-field.component.ts

@@ -1,38 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-number-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <input 
-        [id]="field.name"
-        type="number"
-        class="sq-form-input"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [min]="field.min"
-        [max]="field.max"
-        [step]="field.step || 1"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      />
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class NumberFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: number;
-}

frontend/angular-clarity-master/src/app/shared/components/field-types/paragraph-field.component.ts

@@ -1,43 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-paragraph-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <textarea
-        [id]="field.name"
-        class="sq-form-textarea"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [rows]="field.rows || 4"
-        [cols]="field.cols || 50"
-        [attr.maxlength]="field.maxLength"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      ></textarea>
-      <div class="character-count" *ngIf="field.showCharacterCount && field.maxLength" [ngClass]="{
-        'warning': value?.length > field.maxLength * 0.8,
-        'error': value?.length >= field.maxLength
-      }">
-        {{ value?.length || 0 }}/{{ field.maxLength }}
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class ParagraphFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-}     

frontend/angular-clarity-master/src/app/shared/components/field-types/password-field.component.ts

@@ -1,89 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-password-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <div class="password-input-container">
-        <input
-          [id]="field.name"
-          [type]="isPasswordVisible ? 'text' : 'password'"
-          class="sq-form-input password-input"
-          [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-          [value]="value"
-          (input)="onChange($event.target.value)"
-          [required]="field.required"
-          [attr.minlength]="field.minLength"
-          [attr.maxlength]="field.maxLength"
-          [readonly]="field.readonly"
-          [disabled]="field.disabled"
-        />
-        <button 
-          type="button"
-          class="password-toggle"
-          (click)="togglePasswordVisibility()"
-          [attr.aria-label]="isPasswordVisible ? 'Hide password' : 'Show password'"
-          [title]="isPasswordVisible ? 'Hide password' : 'Show password'"
-        >
-          <clr-icon [attr.shape]="isPasswordVisible ? 'eye-hide' : 'eye'"></clr-icon>
-        </button>
-      </div>
-      <div class="password-strength" *ngIf="field.showStrengthIndicator && value" [ngClass]="getPasswordStrengthClass()">
-        <div class="strength-meter">
-          <div class="strength-bar" [ngClass]="getPasswordStrengthClass()"></div>
-        </div>
-        <span class="strength-label" [ngClass]="getPasswordStrengthClass()">{{ passwordStrengthLabel }}</span>
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class PasswordFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-  
-  isPasswordVisible = false;
-  
-  get passwordStrength(): number {
-    if (!this.value) return 0;
-    
-    let strength = 0;
-    if (this.value.length >= 8) strength += 25;
-    if (/[A-Z]/.test(this.value)) strength += 25;
-    if (/[0-9]/.test(this.value)) strength += 25;
-    if (/[^A-Za-z0-9]/.test(this.value)) strength += 25;
-    
-    return strength;
-  }
-  
-  get passwordStrengthLabel(): string {
-    const strength = this.passwordStrength;
-    if (strength < 25) return 'Very Weak';
-    if (strength < 50) return 'Weak';
-    if (strength < 75) return 'Medium';
-    if (strength < 100) return 'Strong';
-    return 'Very Strong';
-  }
-  
-  getPasswordStrengthClass(): string {
-    const strength = this.passwordStrength;
-    if (strength < 25) return 'weak';
-    if (strength < 50) return 'weak';
-    if (strength < 75) return 'medium';
-    return 'strong';
-  }
-  
-  togglePasswordVisibility() {
-    this.isPasswordVisible = !this.isPasswordVisible;
-  }
-}  

frontend/angular-clarity-master/src/app/shared/components/field-types/phone-field.component.ts

@@ -1,72 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-phone-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <div class="phone-input-container">
-        <div class="country-code-selector" (click)="toggleCountryCodeSelector()" *ngIf="field.showCountryCodeSelector">
-          <span class="country-flag">🇺🇸</span>
-          <span class="country-code">{{ selectedCountryCode }}</span>
-          <span class="dropdown-icon">▼</span>
-        </div>
-        <input 
-          [id]="field.name"
-          type="tel"
-          class="sq-form-input phone-input"
-          [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-          [value]="value"
-          (input)="onPhoneChange($event.target.value)"
-          [required]="field.required"
-          [pattern]="field.pattern || '.*'"
-          [readonly]="field.readonly"
-          [disabled]="field.disabled"
-        />
-        <button 
-          *ngIf="field.showCountryCodeSelector" 
-          class="sq-btn sq-btn-outline sq-btn-sm country-code-btn"
-          type="button"
-          (click)="toggleCountryCodeSelector()"
-        >
-          {{ selectedCountryCode }}
-        </button>
-      </div>
-      <div *ngIf="errorMessage" class="sq-error-message">
-        {{ errorMessage }}
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-    </div>
-  `
-})
-export class PhoneFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-  
-  selectedCountryCode = '+91';
-  errorMessage = '';
-  
-  onPhoneChange(value: string) {
-    // Validate phone number format
-    if (this.field.pattern) {
-      const regex = new RegExp(this.field.pattern);
-      if (!regex.test(value)) {
-        this.errorMessage = this.field.errorMessage || 'Please enter a valid phone number';
-      } else {
-        this.errorMessage = '';
-      }
-    }
-    this.onChange(value);
-  }
-  
-  toggleCountryCodeSelector() {
-    // Implementation for country code selector
-    // This would typically open a modal or dropdown
-  }
-}

frontend/angular-clarity-master/src/app/shared/components/field-types/text-field.component.ts

@@ -1,43 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-text-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <input 
-        [id]="field.name"
-        type="text"
-        class="sq-form-input"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [attr.maxlength]="field.maxLength"
-        [attr.minlength]="field.minLength"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      />
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div class="character-count" *ngIf="field.showCharacterCount && value" [ngClass]="{
-        'warning': field.maxLength && value?.length > field.maxLength * 0.8,
-        'error': field.maxLength && value?.length >= field.maxLength
-      }">
-        {{ value?.length || 0 }}{{ field.maxLength ? '/' + field.maxLength : '' }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class TextFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-}

frontend/angular-clarity-master/src/app/shared/components/field-types/textarea-field.component.ts

@@ -1,43 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-textarea-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <textarea
-        [id]="field.name"
-        class="sq-form-textarea"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [rows]="field.rows || 4"
-        [cols]="field.cols || 50"
-        [attr.maxlength]="field.maxLength"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      ></textarea>
-      <div class="character-count" *ngIf="field.showCharacterCount && field.maxLength" [ngClass]="{
-        'warning': value?.length > field.maxLength * 0.8,
-        'error': value?.length >= field.maxLength
-      }">
-        {{ value?.length || 0 }}/{{ field.maxLength }}
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class TextareaFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-}    

frontend/angular-clarity-master/src/app/shared/shared.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FieldTypesModule } from './components/field-types/field-types.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FieldTypesModule
-  ],
-  exports: [
-    FieldTypesModule
-  ]
-})
-export class SharedModule { }

frontend/angular-clarity-master/src/assets/i18n/en.json

@@ -343,7 +343,6 @@
   "Email_Field2": "Email_Field2",
   "Static": "Static",
   "District": "District",
-  "Ad10": "Ad10",
   "about_yourself": "about_yourself",
   "datagrid_Field2": "datagrid_Field2",
   "Toggle_Switch2": "Toggle_Switch2",
@@ -372,9 +371,5 @@
   "select_Field2": "select_Field2",
   "Password_Field": "Password_Field",
   "age": "age",
-  "Button_Field": "Button_Field",
+  "Button_Field": "Button_Field"
-  "API_REGISTERY": "API Registry",
-  "API_REGISTERY_DESCRIPTION": "API Registry Description",
-  "TOKEN_REGISTERY": "Token Registry",
-  "TOKEN_REGISTERY_DESCRIPTION": "Token Registry Description"
 }

frontend/angular-clarity-master/src/assets/i18n/hi.json

@@ -105,8 +105,6 @@
   "REPORT_DESCRIPTION": "रिपोर्ट विवरण",
   "API_REGISTERY": "एपीआई रजिस्ट्री",
   "API_REGISTERY_DESCRIPTION": "एपीआई रजिस्ट्री विवरण",
-  "TOKEN_REGISTERY": "टोकन रजिस्ट्री",
-  "TOKEN_REGISTERY_DESCRIPTION": "टोकन रजिस्ट्री विवरण",
   "ACTIVE": "सक्रिय",
   "FOLDER_NAME": "फ़ोल्डर नाम",
   "ACTION": "क्रिया",

frontend/angular-clarity-master/src/styles.scss

@@ -1,19 +1,7 @@
 @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 @import '~@clr/icons/clr-icons.min.css';
 
-// Modern Design System Imports
+/* font set ==================== */
-@import './styles/design-tokens';
-@import './styles/theme-variables';
-@import './styles/base';
-@import './styles/components';
-@import './styles/animations';
-
-// Google Fonts - Modern Typography
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
-
-/* Legacy font set ==================== */
 @import url(https://fonts.googleapis.com/css?family=Athiti|Bai+Jamjuree|Chakra+Petch|Charmonman|Chonburi|Fahkwang|Itim|K2D|Kanit|KoHo|Kodchasan|Krub|Maitree|Mali|Mitr|Niramit|Pattaya|Pridi|Prompt|Sriracha|Srisakdi|Taviraj|Trirong);
 
 .font-athiti { font-family: 'Athiti', sans-serif; }
@@ -208,78 +196,3 @@ margin-right: 0;
 .float-right {
   float: right !important;
 }
-
-// Global styles for enhanced components
-.btn {
-  @extend .modern-btn;
-}
-
-.modal-dialog {
-  @extend .modern-modal;
-  
-  .modal-header {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: $white;
-    border-radius: $radius-2xl $radius-2xl 0 0;
-    
-    .modal-title {
-      color: $white;
-      font-weight: $font-bold;
-    }
-    
-    .close {
-      color: $white;
-      opacity: 0.8;
-      
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-  
-  .modal-body {
-    padding: $space-6;
-  }
-  
-  .modal-footer {
-    padding: $space-5 $space-6;
-    background: $gray-50;
-    border-radius: 0 0 $radius-2xl $radius-2xl;
-  }
-}
-
-.datagrid {
-  @extend .modern-table;
-}
-
-.badge {
-  @extend .modern-badge;
-}
-
-.alert {
-  @extend .modern-alert;
-}
-
-.spinner {
-  @extend .modern-spinner;
-}
-
-.skeleton {
-  @extend .modern-skeleton;
-}
-
-.form-group {
-  @extend .modern-form-group;
-  
-  .form-label {
-    @extend .form-label;
-  }
-  
-  .form-input, .form-select {
-    @extend .form-input;
-  }
-  
-  .form-error {
-    @extend .form-error;
-  }
-}

frontend/angular-clarity-master/src/styles/_animations.scss

@@ -1,602 +0,0 @@
-// ========================================
-// ANIMATIONS - Smooth & Modern Transitions
-// ========================================
-
-@import './design-tokens';
-
-// Fade Animations
-// ========================================
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes fadeInRight {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-// Scale Animations
-// ========================================
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes scaleOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-}
-
-@keyframes scaleUp {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(1.05);
-  }
-}
-
-@keyframes scaleDown {
-  from {
-    transform: scale(1.05);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-// Slide Animations
-// ========================================
-
-@keyframes slideInUp {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInDown {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideOutUp {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes slideOutDown {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-// Rotation Animations
-// ========================================
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spinReverse {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes bounce {
-  0%, 20%, 53%, 80%, 100% {
-    transform: translate3d(0, 0, 0);
-  }
-  40%, 43% {
-    transform: translate3d(0, -8px, 0);
-  }
-  70% {
-    transform: translate3d(0, -4px, 0);
-  }
-  90% {
-    transform: translate3d(0, -2px, 0);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-2px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(2px);
-  }
-}
-
-@keyframes wiggle {
-  0%, 7% {
-    transform: rotateZ(0);
-  }
-  15% {
-    transform: rotateZ(-15deg);
-  }
-  20% {
-    transform: rotateZ(10deg);
-  }
-  25% {
-    transform: rotateZ(-10deg);
-  }
-  30% {
-    transform: rotateZ(6deg);
-  }
-  35% {
-    transform: rotateZ(-4deg);
-  }
-  40%, 100% {
-    transform: rotateZ(0);
-  }
-}
-
-// Loading Animations
-// ========================================
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-@keyframes shimmer2 {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes dots {
-  0%, 20% {
-    color: transparent;
-    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
-  }
-  40% {
-    color: currentColor;
-    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
-  }
-  60% {
-    text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 transparent;
-  }
-  80%, 100% {
-    text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 currentColor;
-  }
-}
-
-@keyframes wave {
-  0%, 60%, 100% {
-    transform: initial;
-  }
-  30% {
-    transform: translateY(-15px);
-  }
-}
-
-// Hover Animations
-// ========================================
-
-@keyframes float {
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
-
-@keyframes glow {
-  0% {
-    box-shadow: 0 0 5px rgba($primary-500, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba($primary-500, 0.8), 0 0 30px rgba($primary-500, 0.6);
-  }
-  100% {
-    box-shadow: 0 0 5px rgba($primary-500, 0.5);
-  }
-}
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-// Animation Classes
-// ========================================
-
-// Fade Classes
-.animate-fade-in {
-  animation: fadeIn $duration-300 $ease-out;
-}
-
-.animate-fade-out {
-  animation: fadeOut $duration-300 $ease-out;
-}
-
-.animate-fade-in-up {
-  animation: fadeInUp $duration-500 $ease-out;
-}
-
-.animate-fade-in-down {
-  animation: fadeInDown $duration-500 $ease-out;
-}
-
-.animate-fade-in-left {
-  animation: fadeInLeft $duration-500 $ease-out;
-}
-
-.animate-fade-in-right {
-  animation: fadeInRight $duration-500 $ease-out;
-}
-
-// Scale Classes
-.animate-scale-in {
-  animation: scaleIn $duration-300 $ease-out;
-}
-
-.animate-scale-out {
-  animation: scaleOut $duration-300 $ease-out;
-}
-
-.animate-scale-up {
-  animation: scaleUp $duration-200 $ease-out;
-}
-
-.animate-scale-down {
-  animation: scaleDown $duration-200 $ease-out;
-}
-
-// Slide Classes
-.animate-slide-in-up {
-  animation: slideInUp $duration-500 $ease-out;
-}
-
-.animate-slide-in-down {
-  animation: slideInDown $duration-500 $ease-out;
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft $duration-500 $ease-out;
-}
-
-.animate-slide-in-right {
-  animation: slideInRight $duration-500 $ease-out;
-}
-
-.animate-slide-out-up {
-  animation: slideOutUp $duration-300 $ease-out;
-}
-
-.animate-slide-out-down {
-  animation: slideOutDown $duration-300 $ease-out;
-}
-
-.animate-slide-out-left {
-  animation: slideOutLeft $duration-300 $ease-out;
-}
-
-.animate-slide-out-right {
-  animation: slideOutRight $duration-300 $ease-out;
-}
-
-// Rotation Classes
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.animate-spin-reverse {
-  animation: spinReverse 1s linear infinite;
-}
-
-.animate-bounce {
-  animation: bounce 1s infinite;
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.animate-shake {
-  animation: shake 0.5s ease-in-out;
-}
-
-.animate-wiggle {
-  animation: wiggle 1s ease-in-out;
-}
-
-// Loading Classes
-.animate-shimmer {
-  animation: shimmer 1.5s infinite;
-}
-
-.animate-shimmer2 {
-  animation: shimmer2 1.5s infinite;
-}
-
-.animate-dots {
-  animation: dots 1.4s infinite;
-}
-
-.animate-wave {
-  animation: wave 1.4s infinite;
-}
-
-// Hover Classes
-.animate-float {
-  animation: float 3s ease-in-out infinite;
-}
-
-.animate-glow {
-  animation: glow 2s ease-in-out infinite;
-}
-
-.animate-ripple {
-  animation: ripple 0.6s linear;
-}
-
-// Transition Classes
-// ========================================
-
-.transition-all {
-  transition: all $duration-300 $ease-out;
-}
-
-.transition-colors {
-  transition: color $duration-200 $ease-out, background-color $duration-200 $ease-out, border-color $duration-200 $ease-out;
-}
-
-.transition-opacity {
-  transition: opacity $duration-200 $ease-out;
-}
-
-.transition-transform {
-  transition: transform $duration-200 $ease-out;
-}
-
-.transition-shadow {
-  transition: box-shadow $duration-200 $ease-out;
-}
-
-// Hover Effects
-// ========================================
-
-.hover-lift {
-  transition: transform $duration-200 $ease-out, box-shadow $duration-200 $ease-out;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: $shadow-lg;
-  }
-}
-
-.hover-glow {
-  transition: box-shadow $duration-200 $ease-out;
-
-  &:hover {
-    box-shadow: 0 0 20px rgba($primary-500, 0.3);
-  }
-}
-
-.hover-scale {
-  transition: transform $duration-200 $ease-out;
-
-  &:hover {
-    transform: scale(1.05);
-  }
-}
-
-.hover-rotate {
-  transition: transform $duration-200 $ease-out;
-
-  &:hover {
-    transform: rotate(5deg);
-  }
-}
-
-.hover-bounce {
-  transition: transform $duration-200 $ease-bounce;
-
-  &:hover {
-    transform: translateY(-4px);
-  }
-}
-
-// Staggered Animations
-// ========================================
-
-.stagger-1 { animation-delay: 0.1s; }
-.stagger-2 { animation-delay: 0.2s; }
-.stagger-3 { animation-delay: 0.3s; }
-.stagger-4 { animation-delay: 0.4s; }
-.stagger-5 { animation-delay: 0.5s; }
-.stagger-6 { animation-delay: 0.6s; }
-.stagger-7 { animation-delay: 0.7s; }
-.stagger-8 { animation-delay: 0.8s; }
-
-// Animation States
-// ========================================
-
-.animation-paused {
-  animation-play-state: paused;
-}
-
-.animation-running {
-  animation-play-state: running;
-}
-
-// Reduced Motion Support
-// ========================================
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-
-  .animate-spin,
-  .animate-pulse,
-  .animate-bounce,
-  .animate-float,
-  .animate-glow {
-    animation: none;
-  }
-}

frontend/angular-clarity-master/src/styles/_base.scss

@@ -1,411 +0,0 @@
-// ========================================
-// BASE STYLES - Modern UI Foundation
-// ========================================
-
-@import './design-tokens';
-
-
-// CSS Reset & Base Styles
-// ========================================
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  font-family: $font-primary;
-  font-size: $text-base;
-  font-weight: $font-normal;
-  line-height: $leading-normal;
-  color: $gray-900;
-  background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%);
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-
-// Typography
-// ========================================
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: $font-secondary;
-  font-weight: $font-semibold;
-  line-height: $leading-tight;
-  color: $gray-900;
-  margin: 0;
-}
-
-h1 { font-size: $text-4xl; }
-h2 { font-size: $text-3xl; }
-h3 { font-size: $text-2xl; }
-h4 { font-size: $text-xl; }
-h5 { font-size: $text-lg; }
-h6 { font-size: $text-base; }
-
-p {
-  margin: 0 0 $space-4 0;
-  color: $gray-700;
-}
-
-a {
-  color: $primary-600;
-  text-decoration: none;
-  transition: color $duration-200 $ease-out;
-  
-  &:hover {
-    color: $primary-700;
-  }
-  
-  &:focus {
-    outline: 2px solid $primary-500;
-    outline-offset: 2px;
-    border-radius: $radius-sm;
-  }
-}
-
-// Lists
-ul, ol {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-// Images
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-// Form Elements
-// ========================================
-
-input, textarea, select {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-}
-
-button {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-// Focus Styles
-// ========================================
-
-:focus {
-  outline: 2px solid $primary-500;
-  outline-offset: 2px;
-}
-
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-:focus-visible {
-  outline: 2px solid $primary-500;
-  outline-offset: 2px;
-}
-
-// Selection Styles
-// ========================================
-
-::selection {
-  background-color: $primary-100;
-  color: $primary-900;
-}
-
-::-moz-selection {
-  background-color: $primary-100;
-  color: $primary-900;
-}
-
-// Scrollbar Styles
-// ========================================
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: $gray-100;
-  border-radius: $radius-full;
-}
-
-::-webkit-scrollbar-thumb {
-  background: $gray-300;
-  border-radius: $radius-full;
-  transition: background-color $duration-200 $ease-out;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: $gray-400;
-}
-
-::-webkit-scrollbar-corner {
-  background: $gray-100;
-}
-
-// Utility Classes
-// ========================================
-
-// Display
-.d-block { display: block; }
-.d-inline { display: inline; }
-.d-inline-block { display: inline-block; }
-.d-flex { display: flex; }
-.d-inline-flex { display: inline-flex; }
-.d-grid { display: grid; }
-.d-none { display: none; }
-
-// Flexbox
-.flex-row { flex-direction: row; }
-.flex-col { flex-direction: column; }
-.flex-wrap { flex-wrap: wrap; }
-.flex-nowrap { flex-wrap: nowrap; }
-
-.justify-start { justify-content: flex-start; }
-.justify-center { justify-content: center; }
-.justify-end { justify-content: flex-end; }
-.justify-between { justify-content: space-between; }
-.justify-around { justify-content: space-around; }
-
-.items-start { align-items: flex-start; }
-.items-center { align-items: center; }
-.items-end { align-items: flex-end; }
-.items-stretch { align-items: stretch; }
-
-.flex-1 { flex: 1 1 0%; }
-.flex-auto { flex: 1 1 auto; }
-.flex-initial { flex: 0 1 auto; }
-.flex-none { flex: none; }
-
-// Spacing
-.m-0 { margin: 0; }
-.m-1 { margin: $space-1; }
-.m-2 { margin: $space-2; }
-.m-3 { margin: $space-3; }
-.m-4 { margin: $space-4; }
-.m-5 { margin: $space-5; }
-.m-6 { margin: $space-6; }
-.m-8 { margin: $space-8; }
-
-.mt-0 { margin-top: 0; }
-.mt-1 { margin-top: $space-1; }
-.mt-2 { margin-top: $space-2; }
-.mt-3 { margin-top: $space-3; }
-.mt-4 { margin-top: $space-4; }
-.mt-5 { margin-top: $space-5; }
-.mt-6 { margin-top: $space-6; }
-.mt-8 { margin-top: $space-8; }
-
-.mb-0 { margin-bottom: 0; }
-.mb-1 { margin-bottom: $space-1; }
-.mb-2 { margin-bottom: $space-2; }
-.mb-3 { margin-bottom: $space-3; }
-.mb-4 { margin-bottom: $space-4; }
-.mb-5 { margin-bottom: $space-5; }
-.mb-6 { margin-bottom: $space-6; }
-.mb-8 { margin-bottom: $space-8; }
-
-.ml-0 { margin-left: 0; }
-.ml-1 { margin-left: $space-1; }
-.ml-2 { margin-left: $space-2; }
-.ml-3 { margin-left: $space-3; }
-.ml-4 { margin-left: $space-4; }
-.ml-5 { margin-left: $space-5; }
-.ml-6 { margin-left: $space-6; }
-.ml-8 { margin-left: $space-8; }
-
-.mr-0 { margin-right: 0; }
-.mr-1 { margin-right: $space-1; }
-.mr-2 { margin-right: $space-2; }
-.mr-3 { margin-right: $space-3; }
-.mr-4 { margin-right: $space-4; }
-.mr-5 { margin-right: $space-5; }
-.mr-6 { margin-right: $space-6; }
-.mr-8 { margin-right: $space-8; }
-
-.p-0 { padding: 0; }
-.p-1 { padding: $space-1; }
-.p-2 { padding: $space-2; }
-.p-3 { padding: $space-3; }
-.p-4 { padding: $space-4; }
-.p-5 { padding: $space-5; }
-.p-6 { padding: $space-6; }
-.p-8 { padding: $space-8; }
-
-.pt-0 { padding-top: 0; }
-.pt-1 { padding-top: $space-1; }
-.pt-2 { padding-top: $space-2; }
-.pt-3 { padding-top: $space-3; }
-.pt-4 { padding-top: $space-4; }
-.pt-5 { padding-top: $space-5; }
-.pt-6 { padding-top: $space-6; }
-.pt-8 { padding-top: $space-8; }
-
-.pb-0 { padding-bottom: 0; }
-.pb-1 { padding-bottom: $space-1; }
-.pb-2 { padding-bottom: $space-2; }
-.pb-3 { padding-bottom: $space-3; }
-.pb-4 { padding-bottom: $space-4; }
-.pb-5 { padding-bottom: $space-5; }
-.pb-6 { padding-bottom: $space-6; }
-.pb-8 { padding-bottom: $space-8; }
-
-.pl-0 { padding-left: 0; }
-.pl-1 { padding-left: $space-1; }
-.pl-2 { padding-left: $space-2; }
-.pl-3 { padding-left: $space-3; }
-.pl-4 { padding-left: $space-4; }
-.pl-5 { padding-left: $space-5; }
-.pl-6 { padding-left: $space-6; }
-.pl-8 { padding-left: $space-8; }
-
-.pr-0 { padding-right: 0; }
-.pr-1 { padding-right: $space-1; }
-.pr-2 { padding-right: $space-2; }
-.pr-3 { padding-right: $space-3; }
-.pr-4 { padding-right: $space-4; }
-.pr-5 { padding-right: $space-5; }
-.pr-6 { padding-right: $space-6; }
-.pr-8 { padding-right: $space-8; }
-
-// Text
-.text-xs { font-size: $text-xs; }
-.text-sm { font-size: $text-sm; }
-.text-base { font-size: $text-base; }
-.text-lg { font-size: $text-lg; }
-.text-xl { font-size: $text-xl; }
-.text-2xl { font-size: $text-2xl; }
-.text-3xl { font-size: $text-3xl; }
-.text-4xl { font-size: $text-4xl; }
-
-.font-thin { font-weight: $font-thin; }
-.font-light { font-weight: $font-light; }
-.font-normal { font-weight: $font-normal; }
-.font-medium { font-weight: $font-medium; }
-.font-semibold { font-weight: $font-semibold; }
-.font-bold { font-weight: $font-bold; }
-.font-extrabold { font-weight: $font-extrabold; }
-.font-black { font-weight: $font-black; }
-
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-.text-justify { text-align: justify; }
-
-.text-primary { color: $primary-600; }
-.text-secondary { color: $secondary-600; }
-.text-success { color: $success; }
-.text-warning { color: $warning; }
-.text-error { color: $error; }
-.text-gray-500 { color: $gray-500; }
-.text-gray-600 { color: $gray-600; }
-.text-gray-700 { color: $gray-700; }
-.text-gray-900 { color: $gray-900; }
-
-// Border Radius
-.rounded-none { border-radius: $radius-none; }
-.rounded-sm { border-radius: $radius-sm; }
-.rounded { border-radius: $radius-base; }
-.rounded-md { border-radius: $radius-md; }
-.rounded-lg { border-radius: $radius-lg; }
-.rounded-xl { border-radius: $radius-xl; }
-.rounded-2xl { border-radius: $radius-2xl; }
-.rounded-3xl { border-radius: $radius-3xl; }
-.rounded-full { border-radius: $radius-full; }
-
-// Shadows
-.shadow-sm { box-shadow: $shadow-sm; }
-.shadow { box-shadow: $shadow-base; }
-.shadow-md { box-shadow: $shadow-md; }
-.shadow-lg { box-shadow: $shadow-lg; }
-.shadow-xl { box-shadow: $shadow-xl; }
-.shadow-2xl { box-shadow: $shadow-2xl; }
-.shadow-inner { box-shadow: $shadow-inner; }
-
-// Transitions
-.transition { transition: all $duration-200 $ease-out; }
-.transition-fast { transition: all $duration-150 $ease-out; }
-.transition-slow { transition: all $duration-300 $ease-out; }
-
-// Responsive Utilities
-// ========================================
-
-@media (max-width: $breakpoint-sm) {
-  .sm\:hidden { display: none; }
-  .sm\:block { display: block; }
-  .sm\:flex { display: flex; }
-  .sm\:text-sm { font-size: $text-sm; }
-  .sm\:text-base { font-size: $text-base; }
-  .sm\:p-2 { padding: $space-2; }
-  .sm\:p-4 { padding: $space-4; }
-}
-
-@media (max-width: $breakpoint-md) {
-  .md\:hidden { display: none; }
-  .md\:block { display: block; }
-  .md\:flex { display: flex; }
-  .md\:text-sm { font-size: $text-sm; }
-  .md\:text-base { font-size: $text-base; }
-  .md\:p-2 { padding: $space-2; }
-  .md\:p-4 { padding: $space-4; }
-}
-
-@media (max-width: $breakpoint-lg) {
-  .lg\:hidden { display: none; }
-  .lg\:block { display: block; }
-  .lg\:flex { display: flex; }
-  .lg\:text-sm { font-size: $text-sm; }
-  .lg\:text-base { font-size: $text-base; }
-  .lg\:p-2 { padding: $space-2; }
-  .lg\:p-4 { padding: $space-4; }
-}
-
-// Accessibility
-// ========================================
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-// Reduced Motion
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}

frontend/angular-clarity-master/src/styles/_components.scss

@@ -1,709 +0,0 @@
-// ========================================
-// COMPONENT STYLES - Modern UI Components
-// ========================================
-
-
-@import './design-tokens';
-
-// Card Components
-// ========================================
-
-.modern-card {
-  background: $card-bg;
-  backdrop-filter: $backdrop-blur-md;
-  border: 1px solid $card-border;
-  border-radius: $radius-xl;
-  box-shadow: $card-shadow;
-  padding: $space-6;
-  transition: all $duration-300 $ease-out;
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: $glass-gradient;
-  }
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: $shadow-xl;
-    border-color: rgba($primary-500, 0.2);
-  }
-
-  &.glassmorphism {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: $backdrop-blur-lg;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-
-  &.gradient {
-    background: $gradient-primary;
-    color: $white;
-    border: none;
-
-    &::before {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: $space-4;
-  padding-bottom: $space-4;
-  border-bottom: 1px solid $gray-200;
-
-  .card-title {
-    font-size: $text-xl;
-    font-weight: $font-semibold;
-    color: $gray-900;
-    margin: 0;
-  }
-
-  .card-actions {
-    display: flex;
-    gap: $space-2;
-  }
-}
-
-.card-body {
-  color: $gray-700;
-  line-height: $leading-relaxed;
-}
-
-.card-footer {
-  margin-top: $space-4;
-  padding-top: $space-4;
-  border-top: 1px solid $gray-200;
-  display: flex;
-  justify-content: flex-end;
-  gap: $space-3;
-}
-
-// Button Components
-// ========================================
-
-.modern-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: $space-2;
-  padding: $space-3 $space-6;
-  font-size: $text-sm;
-  font-weight: $font-medium;
-  line-height: 1;
-  border-radius: $radius-lg;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all $duration-200 $ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-
-  &:focus {
-    outline: 2px solid $primary-500;
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.btn-sm {
-    padding: $space-2 $space-4;
-    font-size: $text-xs;
-    height: $btn-height-sm;
-  }
-
-  &.btn-md {
-    padding: $space-3 $space-6;
-    font-size: $text-sm;
-    height: $btn-height-md;
-  }
-
-  &.btn-lg {
-    padding: $space-4 $space-8;
-    font-size: $text-base;
-    height: $btn-height-lg;
-  }
-
-  // Variants
-  &.btn-primary {
-    background: $gradient-primary;
-    color: $white;
-    border-color: $primary-600;
-
-    &:hover {
-      background: linear-gradient(135deg, $primary-600 0%, $primary-800 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: $shadow-md;
-    }
-  }
-
-  &.btn-secondary {
-    background: $white;
-    color: $gray-700;
-    border-color: $gray-300;
-
-    &:hover {
-      background: $gray-50;
-      border-color: $gray-400;
-      transform: translateY(-1px);
-      box-shadow: $shadow-md;
-    }
-  }
-
-  &.btn-outline {
-    background: transparent;
-    color: $primary-600;
-    border-color: $primary-600;
-
-    &:hover {
-      background: $primary-50;
-      border-color: $primary-700;
-      color: $primary-700;
-    }
-  }
-
-  &.btn-ghost {
-    background: transparent;
-    color: $gray-600;
-    border-color: transparent;
-
-    &:hover {
-      background: $gray-100;
-      color: $gray-900;
-    }
-  }
-
-  &.btn-success {
-    background: $gradient-success;
-    color: $white;
-    border-color: $accent-green;
-
-    &:hover {
-      background: linear-gradient(135deg, #059669 0%, #047857 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-  }
-
-  &.btn-warning {
-    background: $gradient-warning;
-    color: $white;
-    border-color: $accent-orange;
-
-    &:hover {
-      background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-  }
-
-  &.btn-error {
-    background: $gradient-error;
-    color: $white;
-    border-color: $accent-red;
-
-    &:hover {
-      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-  }
-
-  // Loading state
-  &.loading {
-    position: relative;
-    color: transparent;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      border: 2px solid transparent;
-      border-top: 2px solid currentColor;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// Form Components
-// ========================================
-
-.modern-form-group {
-  margin-bottom: $space-6;
-
-  .form-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: $gray-700;
-    margin-bottom: $space-2;
-  }
-
-  .form-input {
-    width: 100%;
-    padding: $space-3 $space-4;
-    font-size: $text-sm;
-    line-height: $leading-normal;
-    color: $gray-900;
-    background: $white;
-    border: 1px solid $input-border;
-    border-radius: $radius-lg;
-    transition: all $duration-200 $ease-out;
-
-    &:focus {
-      outline: none;
-      border-color: $input-border-focus;
-      box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
-    }
-
-    &:disabled {
-      background: $gray-100;
-      color: $gray-500;
-      cursor: not-allowed;
-    }
-
-    &.error {
-      border-color: $input-border-error;
-      box-shadow: 0 0 0 3px rgba($error, 0.1);
-    }
-
-    &::placeholder {
-      color: $gray-400;
-    }
-  }
-
-  .form-textarea {
-    @extend .form-input;
-    min-height: 120px;
-    resize: vertical;
-  }
-
-  .form-select {
-    @extend .form-input;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right $space-3 center;
-    background-repeat: no-repeat;
-    background-size: 16px 12px;
-    padding-right: $space-10;
-    appearance: none;
-  }
-
-  .form-error {
-    margin-top: $space-1;
-    font-size: $text-xs;
-    color: $error;
-  }
-
-  .form-help {
-    margin-top: $space-1;
-    font-size: $text-xs;
-    color: $gray-500;
-  }
-}
-
-// Input Group
-.input-group {
-  display: flex;
-  align-items: stretch;
-
-  .input-group-prepend {
-    display: flex;
-    align-items: center;
-    padding: $space-3 $space-4;
-    background: $gray-100;
-    border: 1px solid $gray-300;
-    border-right: none;
-    border-radius: $radius-lg 0 0 $radius-lg;
-    color: $gray-600;
-  }
-
-  .input-group-append {
-    display: flex;
-    align-items: center;
-    padding: $space-3 $space-4;
-    background: $gray-100;
-    border: 1px solid $gray-300;
-    border-left: none;
-    border-radius: 0 $radius-lg $radius-lg 0;
-    color: $gray-600;
-  }
-
-  .form-input {
-    border-radius: 0;
-
-    &:first-child {
-      border-radius: $radius-lg 0 0 $radius-lg;
-    }
-
-    &:last-child {
-      border-radius: 0 $radius-lg $radius-lg 0;
-    }
-
-    &:only-child {
-      border-radius: $radius-lg;
-    }
-  }
-}
-
-// Table Components
-// ========================================
-
-.modern-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: $white;
-  border-radius: $radius-xl;
-  overflow: hidden;
-  box-shadow: $shadow-lg;
-
-  thead {
-    background: $gray-50;
-
-    th {
-      padding: $space-4 $space-6;
-      text-align: left;
-      font-size: $text-xs;
-      font-weight: $font-semibold;
-      color: $gray-600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      border-bottom: 1px solid $gray-200;
-
-      &:first-child {
-        padding-left: $space-8;
-      }
-
-      &:last-child {
-        padding-right: $space-8;
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      transition: background-color $duration-150 $ease-out;
-
-      &:hover {
-        background: $gray-50;
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid $gray-200;
-      }
-    }
-
-    td {
-      padding: $space-4 $space-6;
-      font-size: $text-sm;
-      color: $gray-700;
-
-      &:first-child {
-        padding-left: $space-8;
-      }
-
-      &:last-child {
-        padding-right: $space-8;
-      }
-    }
-  }
-}
-
-// Badge Components
-// ========================================
-
-.modern-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: $space-1 $space-3;
-  font-size: $text-xs;
-  font-weight: $font-medium;
-  border-radius: $radius-full;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-
-  &.badge-primary {
-    background: $primary-100;
-    color: $primary-800;
-  }
-
-  &.badge-secondary {
-    background: $secondary-100;
-    color: $secondary-800;
-  }
-
-  &.badge-success {
-    background: rgba($accent-green, 0.1);
-    color: $accent-green;
-  }
-
-  &.badge-warning {
-    background: rgba($accent-orange, 0.1);
-    color: $accent-orange;
-  }
-
-  &.badge-error {
-    background: rgba($accent-red, 0.1);
-    color: $accent-red;
-  }
-
-  &.badge-gray {
-    background: $gray-100;
-    color: $gray-700;
-  }
-}
-
-// Alert Components
-// ========================================
-
-.modern-alert {
-  padding: $space-4 $space-6;
-  border-radius: $radius-lg;
-  border: 1px solid;
-  margin-bottom: $space-4;
-  display: flex;
-  align-items: flex-start;
-  gap: $space-3;
-
-  .alert-icon {
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-
-  .alert-content {
-    flex: 1;
-
-    .alert-title {
-      font-weight: $font-semibold;
-      margin-bottom: $space-1;
-    }
-
-    .alert-message {
-      font-size: $text-sm;
-      line-height: $leading-relaxed;
-    }
-  }
-
-  &.alert-info {
-    background: rgba($primary-500, 0.05);
-    border-color: rgba($primary-500, 0.2);
-    color: $primary-800;
-
-    .alert-icon {
-      color: $primary-600;
-    }
-  }
-
-  &.alert-success {
-    background: rgba($accent-green, 0.05);
-    border-color: rgba($accent-green, 0.2);
-    color: #065f46;
-
-    .alert-icon {
-      color: $accent-green;
-    }
-  }
-
-  &.alert-warning {
-    background: rgba($accent-orange, 0.05);
-    border-color: rgba($accent-orange, 0.2);
-    color: #92400e;
-
-    .alert-icon {
-      color: $accent-orange;
-    }
-  }
-
-  &.alert-error {
-    background: rgba($accent-red, 0.05);
-    border-color: rgba($accent-red, 0.2);
-    color: #991b1b;
-
-    .alert-icon {
-      color: $accent-red;
-    }
-  }
-}
-
-// Modal Components
-// ========================================
-
-.modern-modal {
-  .modal-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba($black, 0.5);
-    backdrop-filter: $backdrop-blur-sm;
-    z-index: $z-modal-backdrop;
-    animation: fadeIn $duration-200 $ease-out;
-  }
-
-  .modal-dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: $white;
-    border-radius: $radius-2xl;
-    box-shadow: $shadow-2xl;
-    z-index: $z-modal;
-    max-width: 90vw;
-    max-height: 90vh;
-    overflow: hidden;
-    animation: slideIn $duration-300 $ease-out;
-
-    .modal-header {
-      padding: $space-6 $space-8;
-      border-bottom: 1px solid $gray-200;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .modal-title {
-        font-size: $text-xl;
-        font-weight: $font-semibold;
-        color: $gray-900;
-        margin: 0;
-      }
-
-      .modal-close {
-        background: none;
-        border: none;
-        color: $gray-400;
-        cursor: pointer;
-        padding: $space-2;
-        border-radius: $radius-md;
-        transition: all $duration-200 $ease-out;
-
-        &:hover {
-          background: $gray-100;
-          color: $gray-600;
-        }
-      }
-    }
-
-    .modal-body {
-      padding: $space-6 $space-8;
-      max-height: 60vh;
-      overflow-y: auto;
-    }
-
-    .modal-footer {
-      padding: $space-6 $space-8;
-      border-top: 1px solid $gray-200;
-      display: flex;
-      justify-content: flex-end;
-      gap: $space-3;
-    }
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -60%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
-// Loading Components
-// ========================================
-
-.modern-spinner {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid $gray-200;
-  border-top: 2px solid $primary-500;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-
-  &.spinner-sm {
-    width: 16px;
-    height: 16px;
-    border-width: 1.5px;
-  }
-
-  &.spinner-lg {
-    width: 32px;
-    height: 32px;
-    border-width: 3px;
-  }
-}
-
-.modern-skeleton {
-  background: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-  border-radius: $radius-md;
-
-  &.skeleton-text {
-    height: 1em;
-    margin-bottom: $space-2;
-  }
-
-  &.skeleton-title {
-    height: 1.5em;
-    margin-bottom: $space-4;
-  }
-
-  &.skeleton-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-
-  &.skeleton-button {
-    height: 40px;
-    width: 100px;
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}

frontend/angular-clarity-master/src/styles/_design-tokens.scss

@@ -1,258 +0,0 @@
-// ========================================
-// DESIGN TOKENS - Modern UI Design System
-// ========================================
-
-// Dynamic Theme Variables (CSS Custom Properties)
-// ========================================
-:root {
-  // Default theme colors (fallback)
-  --theme-primary: #0ea5e9;
-  --theme-secondary: #64748b;
-  --theme-accent: #8b5cf6;
-  --theme-error: #ef4444;
-  --theme-error-dark: #dc2626;
-  --theme-background: #f8fafc;
-  --theme-surface: #ffffff;
-  --theme-text: #1f2937;
-  --theme-text-secondary: #6b7280;
-  --theme-border-radius: 0.5rem;
-  --theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  --theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-}
-
-// Color Palette
-// ========================================
-
-// Primary Colors (with theme support)
-$primary-50: #f0f9ff;
-$primary-100: #e0f2fe;
-$primary-200: #bae6fd;
-$primary-300: #7dd3fc;
-$primary-400: #38bdf8;
-$primary-500: var(--theme-primary, #0ea5e9);  // Dynamic primary
-$primary-600: #0284c7;
-$primary-700: #0369a1;
-$primary-800: #075985;
-$primary-900: #0c4a6e;
-
-// Secondary Colors (with theme support)
-$secondary-50: #f8fafc;
-$secondary-100: #f1f5f9;
-$secondary-200: #e2e8f0;
-$secondary-300: #cbd5e1;
-$secondary-400: #94a3b8;
-$secondary-500: var(--theme-secondary, #64748b);  // Dynamic secondary
-$secondary-600: #475569;
-$secondary-700: #334155;
-$secondary-800: #1e293b;
-$secondary-900: #0f172a;
-
-// Accent Colors (with theme support)
-$accent-purple: var(--theme-accent, #8b5cf6);
-$accent-green: #10b981;
-$accent-orange: #f59e0b;
-$accent-red: #ef4444;
-$accent-pink: #ec4899;
-
-// Neutral Colors (with theme support)
-$white: #ffffff;
-$gray-50: #f9fafb;
-$gray-100: #f3f4f6;
-$gray-200: #e5e7eb;
-$gray-300: #d1d5db;
-$gray-400: #9ca3af;
-$gray-500: #6b7280;
-$gray-600: #4b5563;
-$gray-700: #374151;
-$gray-800: #1f2937;
-$gray-900: var(--theme-text, #111827);  // Dynamic text color
-$black: #000000;
-
-// Theme-aware colors
-$theme-background: var(--theme-background, #f8fafc);
-$theme-surface: var(--theme-surface, #ffffff);
-$theme-text: var(--theme-text, #1f2937);
-$theme-text-secondary: var(--theme-text-secondary, #6b7280);
-
-// Semantic Colors
-$success: $accent-green;
-$warning: $accent-orange;
-$error: $accent-red;
-$info: $primary-500;
-
-// Typography
-// ========================================
-
-// Font Families (with theme support)
-$font-primary: var(--theme-font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
-$font-secondary: var(--theme-font-secondary, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
-$font-mono: var(--theme-font-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace);
-
-// Font Sizes
-$text-xs: 0.75rem;    // 12px
-$text-sm: 0.875rem;   // 14px
-$text-base: 1rem;     // 16px
-$text-lg: 1.125rem;   // 18px
-$text-xl: 1.25rem;    // 20px
-$text-2xl: 1.5rem;    // 24px
-$text-3xl: 1.875rem;  // 30px
-$text-4xl: 2.25rem;   // 36px
-$text-5xl: 3rem;      // 48px
-$text-6xl: 3.75rem;   // 60px
-
-// Font Weights
-$font-thin: 100;
-$font-light: 300;
-$font-normal: 400;
-$font-medium: 500;
-$font-semibold: 600;
-$font-bold: 700;
-$font-extrabold: 800;
-$font-black: 900;
-
-// Line Heights
-$leading-none: 1;
-$leading-tight: 1.25;
-$leading-snug: 1.375;
-$leading-normal: 1.5;
-$leading-relaxed: 1.625;
-$leading-loose: 2;
-
-// Spacing System
-// ========================================
-
-$space-0: 0;
-$space-1: 0.25rem;   // 4px
-$space-2: 0.5rem;    // 8px
-$space-3: 0.75rem;   // 12px
-$space-4: 1rem;      // 16px
-$space-5: 1.25rem;   // 20px
-$space-6: 1.5rem;    // 24px
-$space-8: 2rem;      // 32px
-$space-10: 2.5rem;   // 40px
-$space-12: 3rem;     // 48px
-$space-16: 4rem;     // 64px
-$space-20: 5rem;     // 80px
-$space-24: 6rem;     // 96px
-$space-32: 8rem;     // 128px
-
-// Border Radius (with theme support)
-// ========================================
-
-$radius-none: 0;
-$radius-sm: 0.125rem;   // 2px
-$radius-base: 0.25rem;  // 4px
-$radius-md: 0.375rem;   // 6px
-$radius-lg: var(--theme-border-radius, 0.5rem);     // Dynamic border radius
-$radius-xl: 0.75rem;    // 12px
-$radius-2xl: 1rem;      // 16px
-$radius-3xl: 1.5rem;    // 24px
-$radius-full: 9999px;
-
-// Shadows (with theme support)
-// ========================================
-
-$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$shadow-lg: var(--theme-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));  // Dynamic shadow
-$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-
-// Glassmorphism Shadows
-$glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-$glass-shadow-lg: 0 20px 40px 0 rgba(31, 38, 135, 0.4);
-
-// Animation
-// ========================================
-
-// Timing Functions
-$ease-in: cubic-bezier(0.4, 0, 1, 1);
-$ease-out: cubic-bezier(0, 0, 0.2, 1);
-$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-$ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-// Duration
-$duration-75: 75ms;
-$duration-100: 100ms;
-$duration-150: 150ms;
-$duration-200: 200ms;
-$duration-300: 300ms;
-$duration-500: 500ms;
-$duration-700: 700ms;
-$duration-1000: 1000ms;
-
-// Responsive Breakpoints
-// ========================================
-
-$breakpoint-sm: 640px;   // Small devices
-$breakpoint-md: 768px;   // Medium devices
-$breakpoint-lg: 1024px;  // Large devices
-$breakpoint-xl: 1280px;  // Extra large devices
-$breakpoint-2xl: 1536px; // 2X large devices
-
-// Z-Index Scale
-// ========================================
-
-$z-dropdown: 1000;
-$z-sticky: 1020;
-$z-fixed: 1030;
-$z-modal-backdrop: 1040;
-$z-modal: 1050;
-$z-popover: 1060;
-$z-tooltip: 1070;
-$z-toast: 1080;
-
-// Component Specific Variables
-// ========================================
-
-// Header
-$header-height: 4rem; // 64px
-$header-bg: rgba(255, 255, 255, 0.95);
-$header-border: rgba(0, 0, 0, 0.1);
-
-// Sidebar
-$sidebar-width: 16rem; // 256px
-$sidebar-width-collapsed: 4rem; // 64px
-$sidebar-bg: rgba(255, 255, 255, 0.98);
-$sidebar-border: rgba(0, 0, 0, 0.05);
-
-// Cards
-$card-bg: rgba(255, 255, 255, 0.9);
-$card-border: rgba(0, 0, 0, 0.05);
-$card-shadow: $shadow-lg;
-
-// Buttons
-$btn-height-sm: 2rem; // 32px
-$btn-height-md: 2.5rem; // 40px
-$btn-height-lg: 3rem; // 48px
-
-// Form Elements
-$input-height: 2.5rem; // 40px
-$input-border: rgba(0, 0, 0, 0.1);
-$input-border-focus: $primary-500;
-$input-border-error: $error;
-
-// Gradients
-// ========================================
-
-$gradient-primary: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
-$gradient-secondary: linear-gradient(135deg, $secondary-500 0%, $secondary-700 100%);
-$gradient-accent: linear-gradient(135deg, $accent-purple 0%, $accent-pink 100%);
-$gradient-success: linear-gradient(135deg, $accent-green 0%, #059669 100%);
-$gradient-warning: linear-gradient(135deg, $accent-orange 0%, #d97706 100%);
-$gradient-error: linear-gradient(135deg, $accent-red 0%, #dc2626 100%);
-
-// Glassmorphism Gradients
-$glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
-$glass-gradient-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
-
-// Backdrop Blur
-$backdrop-blur-sm: blur(4px);
-$backdrop-blur-md: blur(8px);
-$backdrop-blur-lg: blur(16px);
-$backdrop-blur-xl: blur(24px);

frontend/angular-clarity-master/src/styles/_theme-variables.scss

@@ -1,367 +0,0 @@
-// ========================================
-// DYNAMIC THEME VARIABLES
-// ========================================
-@import './design-tokens';
-// CSS Custom Properties for Dynamic Theming
-// These variables will be set by the ThemeService at runtime
-
-:root {
-  // Default theme variables (fallback values)
-  --theme-primary: #0ea5e9;
-  --theme-secondary: #64748b;
-  --theme-accent: #8b5cf6;
-  --theme-background: #f8fafc;
-  --theme-surface: #ffffff;
-  --theme-text: #111827;
-  --theme-text-secondary: #6b7280;
-  
-  // Font variables
-  --theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-  
-  // Other theme properties
-  --theme-border-radius: 0.75rem;
-  --theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  
-  // Derived colors for better theme integration
-  --theme-primary-50: #{rgba(#0ea5e9, 0.05)};
-  --theme-primary-100: #{rgba(#0ea5e9, 0.1)};
-  --theme-primary-200: #{rgba(#0ea5e9, 0.2)};
-  --theme-primary-300: #{rgba(#0ea5e9, 0.3)};
-  --theme-primary-500: #0ea5e9;
-  --theme-primary-600: #{darken(#0ea5e9, 10%)};
-  --theme-primary-700: #{darken(#0ea5e9, 20%)};
-  --theme-primary-800: #{darken(#0ea5e9, 30%)};
-  --theme-primary-900: #{darken(#0ea5e9, 40%)};
-  
-  // Gradient definitions using theme colors
-  --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-700) 100%);
-  --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, #{darken(#64748b, 20%)} 100%);
-  --theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, #{darken(#8b5cf6, 20%)} 100%);
-  
-  // Glassmorphism effects
-  --theme-glass-bg: rgba(255, 255, 255, 0.1);
-  --theme-glass-border: rgba(255, 255, 255, 0.2);
-  --theme-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-}
-
-// Dark theme overrides
-[data-theme="dark"] {
-  --theme-background: #111827;
-  --theme-surface: #1f2937;
-  --theme-text: #f9fafb;
-  --theme-text-secondary: #d1d5db;
-  --theme-glass-bg: rgba(0, 0, 0, 0.1);
-  --theme-glass-border: rgba(255, 255, 255, 0.1);
-  --theme-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
-}
-
-// Theme-aware utility classes
-// ========================================
-
-// Background colors
-.bg-theme-primary { background-color: var(--theme-primary) !important; }
-.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
-.bg-theme-accent { background-color: var(--theme-accent) !important; }
-.bg-theme-background { background-color: var(--theme-background) !important; }
-.bg-theme-surface { background-color: var(--theme-surface) !important; }
-
-// Text colors
-.text-theme-primary { color: var(--theme-primary) !important; }
-.text-theme-secondary { color: var(--theme-secondary) !important; }
-.text-theme-accent { color: var(--theme-accent) !important; }
-.text-theme-text { color: var(--theme-text) !important; }
-.text-theme-text-secondary { color: var(--theme-text-secondary) !important; }
-
-// Border colors
-.border-theme-primary { border-color: var(--theme-primary) !important; }
-.border-theme-secondary { border-color: var(--theme-secondary) !important; }
-.border-theme-accent { border-color: var(--theme-accent) !important; }
-
-// Gradients
-.bg-gradient-theme-primary { background: var(--theme-gradient-primary) !important; }
-.bg-gradient-theme-secondary { background: var(--theme-gradient-secondary) !important; }
-.bg-gradient-theme-accent { background: var(--theme-gradient-accent) !important; }
-
-// Font families
-.font-theme-primary { font-family: var(--theme-font-primary) !important; }
-.font-theme-secondary { font-family: var(--theme-font-secondary) !important; }
-.font-theme-mono { font-family: var(--theme-font-mono) !important; }
-
-// Border radius
-.rounded-theme { border-radius: var(--theme-border-radius) !important; }
-
-// Shadows
-.shadow-theme { box-shadow: var(--theme-shadow) !important; }
-
-// Glassmorphism effects
-.glass-theme {
-  background: var(--theme-glass-bg) !important;
-  backdrop-filter: blur(16px) !important;
-  border: 1px solid var(--theme-glass-border) !important;
-  box-shadow: var(--theme-glass-shadow) !important;
-}
-
-// Theme-aware component overrides
-// ========================================
-
-// Update existing component styles to use theme variables
-.modern-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border: 1px solid rgba(var(--theme-text-secondary), 0.1);
-  box-shadow: var(--theme-shadow);
-}
-
-.modern-btn {
-  &.btn-primary {
-    background: var(--theme-gradient-primary);
-    color: white;
-    border-color: var(--theme-primary-600);
-  }
-
-  &.btn-secondary {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(var(--theme-text-secondary), 0.2);
-  }
-
-  &.btn-outline {
-    background: transparent;
-    color: var(--theme-primary);
-    border-color: var(--theme-primary);
-  }
-}
-
-.modern-form-group {
-  .form-label {
-    color: var(--theme-text);
-  }
-
-  .form-input {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(var(--theme-text-secondary), 0.2);
-
-    &:focus {
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px var(--theme-primary-100);
-    }
-
-    &::placeholder {
-      color: var(--theme-text-secondary);
-    }
-  }
-}
-
-.modern-table {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-
-  thead {
-    background: var(--theme-background);
-
-    th {
-      color: var(--theme-text-secondary);
-    }
-  }
-
-  tbody {
-    tr {
-      &:hover {
-        background: var(--theme-background);
-      }
-    }
-
-    td {
-      color: var(--theme-text);
-    }
-  }
-}
-
-.modern-alert {
-  &.alert-info {
-    background: var(--theme-primary-100);
-    border-color: var(--theme-primary-200);
-    color: var(--theme-primary-800);
-  }
-
-  &.alert-success {
-    background: rgba(16, 185, 129, 0.1);
-    border-color: rgba(16, 185, 129, 0.2);
-    color: #065f46;
-  }
-
-  &.alert-warning {
-    background: rgba(245, 158, 11, 0.1);
-    border-color: rgba(245, 158, 11, 0.2);
-    color: #92400e;
-  }
-
-  &.alert-error {
-    background: rgba(239, 68, 68, 0.1);
-    border-color: rgba(239, 68, 68, 0.2);
-    color: #991b1b;
-  }
-}
-
-// Layout component theme integration
-// ========================================
-
-.modern-layout {
-  background: var(--theme-background);
-}
-
-.modern-header {
-  background: rgba(var(--theme-surface), 0.95);
-  border-bottom: 1px solid rgba(var(--theme-text-secondary), 0.1);
-  color: var(--theme-text);
-}
-
-.modern-branding {
-  .company-title {
-    color: var(--theme-text);
-  }
-
-  .company-subtitle {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.modern-sidebar {
-  background: rgba(var(--theme-surface), 0.98);
-  border-right: 1px solid rgba(var(--theme-text-secondary), 0.05);
-  color: var(--theme-text);
-}
-
-.modern-nav-link,
-.modern-nav-link-single {
-  color: var(--theme-text-secondary);
-
-  &:hover {
-    background: var(--theme-primary-100);
-    color: var(--theme-primary-700);
-  }
-
-  &.active {
-    background: var(--theme-primary-100);
-    color: var(--theme-primary-800);
-  }
-}
-
-.modern-user-button {
-  background: transparent;
-  color: var(--theme-text);
-  border-color: rgba(var(--theme-text-secondary), 0.2);
-
-  &:hover {
-    background: var(--theme-background);
-    border-color: rgba(var(--theme-text-secondary), 0.3);
-  }
-}
-
-.modern-dropdown-menu {
-  background: var(--theme-surface);
-  border-color: rgba(var(--theme-text-secondary), 0.2);
-  color: var(--theme-text);
-}
-
-.modern-dropdown-item {
-  color: var(--theme-text);
-
-  &:hover {
-    background: var(--theme-background);
-    color: var(--theme-text);
-  }
-}
-
-// Dashboard theme integration
-// ========================================
-
-.modern-dashboard {
-  background: var(--theme-background);
-}
-
-.welcome-section {
-  background: var(--theme-gradient-primary);
-  color: white;
-}
-
-.stats-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border: 1px solid rgba(var(--theme-text-secondary), 0.1);
-
-  .stats-value {
-    color: var(--theme-text);
-  }
-
-  .stats-label {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.action-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border-color: rgba(var(--theme-text-secondary), 0.2);
-
-  &:hover {
-    border-color: var(--theme-primary-300);
-  }
-
-  h3 {
-    color: var(--theme-text);
-  }
-
-  p {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.activity-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-
-  .activity-item {
-    border-bottom-color: rgba(var(--theme-text-secondary), 0.1);
-
-    &:hover {
-      background: var(--theme-background);
-    }
-
-    .activity-title {
-      color: var(--theme-text);
-    }
-
-    .activity-time {
-      color: var(--theme-text-secondary);
-    }
-  }
-}
-
-// Responsive theme adjustments
-// ========================================
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --theme-background: #111827;
-    --theme-surface: #1f2937;
-    --theme-text: #f9fafb;
-    --theme-text-secondary: #d1d5db;
-  }
-}
-
-// Print styles
-// ========================================
-
-@media print {
-  :root {
-    --theme-background: white;
-    --theme-surface: white;
-    --theme-text: black;
-    --theme-text-secondary: #666;
-    --theme-shadow: none;
-  }
-}