Update main.module.ts

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

@@ -1,9 +1,8 @@
 export class ReportBuilder {
   public report_id: number;
-  public report_name: string;
+public report_name:string;
-  public description: string;
+public description: string;
-  public report_tags: string;
+public report_tags: string;
-  public servicename: 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,642 +1,12 @@
-// ========================================
+  .tamplate1 {
-// 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;
     background-size: 60%;
     background-position: right center;
     border: 1px solid #000;
-}
+  }
   
-.tamplate2 {
+  .tamplate2 {
     background-image: url(../../../../assets/images/new.png);
     background-repeat: no-repeat;
     background-size: 60%;
@@ -645,9 +15,9 @@
     justify-content: flex-end;
     align-items: center;
     border: 1px solid #000;
-}
+  }
-
+  .signup {
-.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://"><clr-icon shape="lock"></clr-icon>{{'SECURITY' | translate}}</a></li>
-  <li><a href="javascript://">{{'MENU_ACCESS_CONTROL' | 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>
+</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>
+      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{ 'NO_DATA_AVAILABLE' | translate }}</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' | 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>
+      </div>
-        <button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
+    </div>
-          <clr-icon shape="trash"></clr-icon>
+  </clr-modal>
-          <span>{{'DELETE' | translate}}</span>
+  <clr-modal [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-        </button>
+
+    <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>
-</div>

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);
 }
+.required-field{
+  color: red;
+font-size: 18px;
 
-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);
 }
-
+// select{
-.required-field {
+//   width: 100%;
-  color: var(--theme-error, #ef4444);
+//   padding: 5px 5px;
-  font-size: 18px;
+//   border: 1px solid #ccc;
-}
+//   border-radius: 4px;
-
+// }
 .td-title {
   text-align: center;
   width: 150px;
-  color: white;
+color: white;
   font-weight: bold;
-  background-color: var(--theme-primary);
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
 }
-
+th{
-th {
+  //background-color:rgb(170, 169, 169);
   font-weight: bold;
 }
-
+.td-content{
-.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;
@@ -193,585 +76,24 @@ th {
   transition: .4s;
 }
 
-input:checked+.slider {
+input:checked + .slider {
-  background-color: var(--theme-primary);
+  background-color: #0072a3;
 }
 
-input:focus+.slider {
+input:focus + .slider {
-  box-shadow: 0 0 1px var(--theme-primary);
+  box-shadow: 0 0 1px #0072a3;
 }
 
-input:checked+.slider:before {
+input:checked + .slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
 
-.slider.round {
+      .slider.round {
         border-radius: 34px;
-}
+      }
 
-.slider.round: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>
-  </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>
@@ -327,16 +238,17 @@
         <button class="action-item" *ngIf="mdelete == 'true'"  (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
       </clr-dg-action-overflow> -->
 
-        <clr-dg-row-detail *clrIfExpanded>
+                <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,35 +353,34 @@
                   <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>
         <br>
         <div class="modal-footer">
           <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
-          <button type="submit" class="btn btn-primary">ADD</button>
+          <button type="submit" class="btn btn-primary" >ADD</button>
         </div>
   </form>
     </div>
 
   </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>
       <h2 class="heading">{{rowSelected.menuItemId}}</h2>
       <div class="modal-footer">
         <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
-        <button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary">Delete</button>
+      <button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary" >Delete</button>
       </div>
     </div>
   </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,19 +412,17 @@
               </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>
         <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>
+          <button type="submit" class="btn btn-primary" >Update</button>
           </div>
   </form>
     </div>
@@ -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>
-  <div class="mm-toolbar__left">
+  <div class="clr-col-4" style="text-align: right;">
-    <div class="mm-search">
+    <button id="add" class="btn btn-primary" (click)="goToAdd()">
-      <clr-icon shape="search"></clr-icon>
+      <clr-icon shape="plus"></clr-icon>ADD New
-      <input class="mm-search__input" type="text" placeholder="Search" [(ngModel)]="filterText" />
-    </div>
-  </div>
-  <div class="mm-toolbar__right">
-    <select class="mm-select" [(ngModel)]="statusFilter">
-      <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()">
@@ -242,7 +181,7 @@
         <br>
         <div class="modal-footer">
           <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
-          <button type="submit" class="btn btn-primary">ADD</button>
+          <button type="submit" class="btn btn-primary" >ADD</button>
           </div>
   </form>
     </div>
@@ -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>
@@ -301,7 +240,7 @@
         <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>
+          <button type="submit" class="btn btn-primary" >Update</button>
           </div>
   </form>
     </div>

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.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,195 +89,136 @@
             <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}}
         of {{pagination.totalItems}} Records
       </clr-dg-pagination>
     </clr-dg-footer>
-</clr-datagrid>
+  </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>
+</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 {
+.error_mess {
-  margin-left: 8px;
+  color: red;
-}
-
-// 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 {
-  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
-    }
-  }
-}
-
-.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>
+    <div class="clr-col" style="text-align: right;">
-  <div class="um-toolbar__right">
+      <div class="btn-group">
-    <div class="um-view-toggle">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
-      <button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-        <clr-icon shape="view-cards"></clr-icon>
-      </button>
-      <button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
-        <clr-icon shape="table"></clr-icon>
-      </button>
-    </div>
-  </div>
-</div>
 
-<clr-datagrid class="um-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
+    </div>
-  <clr-dg-placeholder>
+    <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
-    <ng-template #loadingSpinner>
+      <button class="btn btn-outline" (click)="onExport()">
-      <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
+        <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
-    </ng-template>
+      </button>
+      <button id="add"  class="btn btn-primary" *ngIf="mcreate == 'true'" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
+      </button>
+    </div>
+  </div>
+
+
+
+
+
+
+
+  <clr-datagrid [clrDgLoading]="loading">
+    <clr-dg-placeholder >
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </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.fullName}}</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,92 +83,42 @@
             <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}}
         of {{pagination.totalItems}} Records
       </clr-dg-pagination>
     </clr-dg-footer>
-</clr-datagrid>
+  </clr-datagrid>
-
-<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';
+.delete,.heading{
-
-// 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;
+mdelete;
-  showdata;
+showdata;
-  error;
+error;
-  modaldelete=false;
+modaldelete=false;
-  rowSelected :any= {};
+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,169 +1,204 @@
-<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>
-</div>
 
-<!-- Customer Modal -->
+      <div class="modal-footer">
-<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
+        <button type="button" class="btn btn-outline" (click)="goback()">Cancel</button>
+      <button type="button"  class="btn btn-primary" (click)="onSubmit()">Add</button>
+      </div>
+    </div>
+
+
+    <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
             </ng-container>
-      </clr-dg-column>
+            </clr-dg-column >
 
           <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.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>
-              <td class="td-title">Customer Code</td>
+                  <td class="td-title"> Customer Code</td>
                   <td class="td-content">{{user.customerCode}}</td>
                 </tr>
                 <tr>
                   <td class="td-title">Customer Id</td>
-              <td class="td-content">{{user.customerId}}</td>
+                  <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>
@@ -179,41 +214,38 @@
           </clr-dg-footer>
         </clr-datagrid>
       </div>
-</clr-modal>
+    </clr-modal>
 
-<!-- Department Modal -->
+    <clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
-<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'">
+
+
+      </div>
+    </clr-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>
+    </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',
@@ -15,62 +12,50 @@ import { Subscription } from 'rxjs';
 })
 export class UsermaintanceaddComponent implements OnInit {
   public entryForm: FormGroup;
-  customer: boolean = false;
+  customer:boolean=false;
-  department: boolean = false;
+  department:boolean=false;
-  position: boolean = false;
+  position:boolean=false;
   custdata: any;
   loading = false;
-  clickedID: number;
+  clickedID:number;
   custiddata: any;
-  userobjcust = {
+  userobjcust={
-    customerName: '',
+    customerName:'',
-    customerCode: '',
+    customerCode:'',
   }
   departmentdata: any;
   positiondata: any;
   deptiddata: any;
-  userobjdept = {
+  userobjdept={
-    departmentCode: '',
+    departmentCode:'',
   }
-  userobjpos = {
+  userobjpos={
-    positionCode: '',
+    positionCode:'',
   }
   posiddata: any;
   usergrpdata;
   accessdata;
   error;
-  submitted = false;
+  submitted=false;
-  private themeSubscription: Subscription;
 
-  constructor(private _fb: FormBuilder,
+  constructor( private _fb: FormBuilder,
-    private mainservice: UsermaintanceService,
+    private mainservice:UsermaintanceService,
-    private router: Router, private accesstype: AccesstypeService,
+    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]],
+      first_name :['',[Validators.required]],
-      last_name: ['', [Validators.required]],
+      last_name:['',[Validators.required]],
-      email: ['', [Validators.required, Validators.email]],
+      email:['',[Validators.required,Validators.email]],
-      mob_no: ['', [Validators.required]],
+      mob_no:['',[Validators.required]],
-      new_password: ['', [Validators.required, Validators.minLength(6)]],
+      new_password:['',[Validators.required,Validators.minLength(6)]],
-      confirm_password: ['', [Validators.required]],
+      confirm_password:['',[Validators.required]],
-      usrGrpId: ['', [Validators.required]],
+      usrGrpId:['',[Validators.required]],
-      account_id: 1,
+      account_id:1,
-      accesstype: ['', [Validators.required]],
+      accesstype:['',[Validators.required]],
      // status:[null],
       // username:[null] ,
       // userPassw:[null] ,
@@ -96,29 +81,22 @@ export class UsermaintanceaddComponent implements OnInit {
       this.usergrp();
       this.getdata();
   }
-  
+  getdata(){
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
-  getdata() {
     this.accesstype.getAll().subscribe(resp => {
       this.accessdata = resp;
       console.log('accessdata: ', this.accessdata);
-      if (this.accessdata.length == 0) {
+      if(this.accessdata.length==0){
-        this.error = "No data Available";
+        this.error="No data Available";
         console.log(this.error)
       }
-    }, (error) => {
+  },(error) => {
     console.log(error);
-      if (error) {
+    if(error){
-        this.error = "Server Error";
+     this.error="Server Error";
    }
   })
   }
-  usergrp() {
+  usergrp(){
     this.usergrpservice.getAll().subscribe((data) => {
       console.log(data);
       this.usergrpdata = data;
@@ -142,8 +120,8 @@ export class UsermaintanceaddComponent implements OnInit {
 
   //   });
   //}
-  onSubmit() {
+  onSubmit(){
-    this.submitted = true
+    this.submitted=true
       if (this.entryForm.invalid) {
         return;
       }
@@ -158,53 +136,53 @@ export class UsermaintanceaddComponent implements OnInit {
     this.router.navigate(["../usermaintance"], { relativeTo: this.route });
   }
 
-  goback() {
+goback(){
   this.router.navigate(["../usermaintance"], { relativeTo: this.route });
-  }
+}
-  gotodepartmet() {
+    gotodepartmet(){
-    this.department = !this.department;
+      this.department=!this.department;
-    this.mainservice.getalldepartment().subscribe((data) => {
+      this.mainservice.getalldepartment().subscribe((data)=>{
         console.log(data);
-      this.departmentdata = data;
+        this.departmentdata=data;
       });
     }
-  getdepid(id: number) {
+    getdepid(id:number){
-    this.clickedID = id;
+      this.clickedID=id;
-    console.log("clicked by id" + id);
+      console.log("clicked by id"+ id);
       this.mainservice.getbydepartmentid(id).subscribe((data) => {
         console.log(data);
-      this.deptiddata = data;
+        this.deptiddata= data;
        // this.userObj= this.custiddata;
-      this.userobjdept = this.deptiddata;
+        this.userobjdept =this.deptiddata;
 
 
         });
-    this.department = false;
+        this.department=false;
     }
-  gotoposition() {
+    gotoposition(){
-    this.position = !this.position;
+      this.position=!this.position;
-    this.mainservice.getallposition().subscribe((data) => {
+      this.mainservice.getallposition().subscribe((data)=>{
         console.log(data);
-      this.positiondata = data;
+        this.positiondata=data;
       })
     }
-  getposid(id: number) {
+    getposid(id:number){
-    this.clickedID = id;
+      this.clickedID=id;
-    console.log("clicked by id" + id);
+      console.log("clicked by id"+ id);
       this.mainservice.getbypositionid(id).subscribe((data) => {
         console.log(data);
-      this.posiddata = data;
+        this.posiddata= data;
        // this.userObj= this.custiddata;
-      this.userobjpos = this.posiddata;
+        this.userobjpos =this.posiddata;
 
 
         });
-    this.position = false;
+        this.position=false;
     }
 
 
 }
-export function ConfirmedValidator(controlName: string, matchingControlName: string) {
+export function ConfirmedValidator(controlName: string, matchingControlName: string){
   return (formGroup: FormGroup) => {
       const control = formGroup.controls[controlName];
       const matchingControl = formGroup.controls[matchingControlName];

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

@@ -1,136 +1,234 @@
-<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>
-</div>
 
-<!-- Customer Modal -->
+      <div class="modal-footer">
-<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
+        <button type="button" class="btn btn-outline" (click)="goback()">Close</button>
+      <button type="button"  class="btn btn-primary" (click)="update()">Update</button>
+      </div>
+    </div>
+
+    <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
             </ng-container>
-      </clr-dg-column>
+            </clr-dg-column >
 
           <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.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>
-              <td class="td-title">Customer Code</td>
+                  <td class="td-title"> Customer Code</td>
                   <td class="td-content">{{user.customerCode}}</td>
                 </tr>
                 <tr>
                   <td class="td-title">Customer Id</td>
-              <td class="td-content">{{user.customerId}}</td>
+                  <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>
@@ -146,41 +244,38 @@
           </clr-dg-footer>
         </clr-datagrid>
       </div>
-</clr-modal>
+    </clr-modal>
 
-<!-- Department Modal -->
+    <clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
-<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'">
+
+
+      </div>
+    </clr-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>
+    </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',
@@ -13,52 +11,40 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./usermaintanceedit.component.scss']
 })
 export class UsermaintanceeditComponent implements OnInit {
-  id: number;
+  id:number;
-  data1: any = {};
+  data1:any={};
-  customer: boolean = false;
+  customer:boolean=false;
   custdata: any;
-  clickedID: number;
+  clickedID:number;
   custiddata: any;
   loading = false;
-  userobjcust = {
+  userobjcust={
-    customerName: '',
+    customerName:'',
-    customerCode: '',
+    customerCode:'',
   }
   accessdata;
-  department: boolean = false;
+  department:boolean=false;
   departmentdata: any;
   positiondata: any;
   deptiddata: any;
-  userobjdept = {
+  userobjdept={
-    departmentCode: '',
+    departmentCode:'',
   }
-  userobjpos = {
+  userobjpos={
-    positionCode: '',
+    positionCode:'',
   }
   posiddata: any;
-  position: boolean = false;
+  position:boolean=false;
   usergrpdata;
   error;
-  private themeSubscription: Subscription;
+  constructor(private route:ActivatedRoute,
+    private mainservice:UsermaintanceService,
+    private router: Router,private accesstype:AccesstypeService,
+    private usergrpservice: UsergrpmaintainceService
 
-  constructor(private route: ActivatedRoute,
-    private mainservice: UsermaintanceService,
-    private router: Router, private accesstype: AccesstypeService,
-    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,89 +52,82 @@ export class UsermaintanceeditComponent implements OnInit {
     this.usergrp();
     this.getdata();
   }
-  
+  getdata(){
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
-  getdata() {
     this.accesstype.getAll().subscribe(resp => {
       this.accessdata = resp;
       console.log('accessdata: ', this.accessdata);
-      if (this.accessdata.length == 0) {
+      if(this.accessdata.length==0){
-        this.error = "No data Available";
+        this.error="No data Available";
         console.log(this.error)
       }
-    }, (error) => {
+  },(error) => {
     console.log(error);
-      if (error) {
+    if(error){
-        this.error = "Server Error";
+     this.error="Server Error";
    }
   })
   }
-  usergrp() {
+  usergrp(){
     this.usergrpservice.getAll().subscribe((data) => {
       console.log(data);
       this.usergrpdata = data;
     });
   }
-  getById(id: number) {
+getById(id:number){
-    this.mainservice.getbyid(id).subscribe((data) => {
+this.mainservice.getbyid(id).subscribe((data)=>{
-      this.data1 = data;
+  this.data1=data;
  // this.data1=this.data3;
   console.log(this.data1);
-    });
+});
-  }
+}
-  update() {
+update(){
   console.log(this.data1);
-    this.mainservice.updatenew(this.id, this.data1).subscribe((data) => {
+  this.mainservice.updatenew(this.id,this.data1).subscribe((data)=>{
-      console.log(data);
+console.log(data);
   });
 
-  }
+}
-  goback() {
+goback(){
   this.router.navigate(["../../usermaintance"], { relativeTo: this.route });
-  }
+}
-  gotodepartmet() {
+  gotodepartmet(){
-    this.department = !this.department;
+    this.department=!this.department;
-    this.mainservice.getalldepartment().subscribe((data) => {
+    this.mainservice.getalldepartment().subscribe((data)=>{
       console.log(data);
-      this.departmentdata = data;
+      this.departmentdata=data;
     });
   }
-  getdepid(id: number) {
+  getdepid(id:number){
-    this.clickedID = id;
+    this.clickedID=id;
-    console.log("clicked by id" + id);
+    console.log("clicked by id"+ id);
     this.mainservice.getbydepartmentid(id).subscribe((data) => {
       console.log(data);
-      this.deptiddata = data;
+      this.deptiddata= data;
      // this.userObj= this.custiddata;
-      this.userobjdept = this.deptiddata;
+      this.userobjdept =this.deptiddata;
 
 
       });
-    this.department = false;
+      this.department=false;
   }
-  gotoposition() {
+  gotoposition(){
-    this.position = !this.position;
+    this.position=!this.position;
-    this.mainservice.getallposition().subscribe((data) => {
+    this.mainservice.getallposition().subscribe((data)=>{
       console.log(data);
-      this.positiondata = data;
+      this.positiondata=data;
     })
   }
-  getposid(id: number) {
+  getposid(id:number){
-    this.clickedID = id;
+    this.clickedID=id;
-    console.log("clicked by id" + id);
+    console.log("clicked by id"+ id);
     this.mainservice.getbypositionid(id).subscribe((data) => {
       console.log(data);
-      this.posiddata = data;
+      this.posiddata= data;
      // this.userObj= this.custiddata;
-      this.userobjpos = this.posiddata;
+      this.userobjpos =this.posiddata;
 
 
       });
-    this.position = false;
+      this.position=false;
   }
 }

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 {
-      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);
-    }
-  }
-
-  &.sq-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);
-    }
-  }
-
-  &.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
+th {
-.sq-action-item {
+    //background-color:rgb(170, 169, 169);
-  @extend .sq-btn;
+    font-weight: bold;
-  @extend .sq-btn-ghost;
+}
-  @extend .sq-btn-sm;
+
-  width: 100%;
+.td-content {
-  justify-content: flex-start;
-  margin-bottom: 4px;
     text-align: left;
-
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-
-  &.sq-btn-error {
-    color: var(--theme-error, #ef4444);
-
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-      color: var(--theme-error, #ef4444);
-    }
-  }
 }
 
-// Delete Modal Styles
+.delete,
-.sq-delete-header {
+.heading {
     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 {
+
-    flex-direction: column;
+input.ng-invalid.ng-touched {
-    gap: 16px;
+    border-color: red;
-  }
+}
-  
+
-  .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">
@@ -253,7 +162,7 @@
 
     
     
-      <!-- 
+<!-- 
     <clr-vertical-nav-group *ngIf="showSetupMenus && !showDashNames && !showFolderNames" routerLinkActive="active">
       <clr-icon shape="cog" clrVerticalNavIcon class="project-visit-tour"></clr-icon>
       Setup
@@ -306,7 +215,7 @@
   <div class="modal-body">
     <form>
       <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
+        <div class="clr-col-md-6 clr-col-sm-12" >
           <label>Name: </label>
         <input class="clr-input"  type="text" name="name"  placeholder="Enter name">
         </div>
@@ -314,7 +223,7 @@
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-outline" (click)="modalteam = false">Cancel</button>
-        <button type="submit" class="btn btn-primary">Add</button>
+      <button type="submit"  class="btn btn-primary" >Add</button>
       </div>
     </form>
   </div>

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

@@ -1,8 +1,8 @@
 
-import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
+import { Component,ViewEncapsulation, OnInit, Input } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router,ActivatedRoute } from '@angular/router';
 import { LoginService   } from '../../../services/api/login.service';
-import { UserInfoService } from '../../../services/user-info.service';
+import { UserInfoService} from '../../../services/user-info.service';
 import { RealnetMenuService } from '../../../services/api/realnet-menu.service';
 import { Rn_Main_Menu } from '../../../models/builder/Rn_Main_Menu';
 import { MenuGroupService } from '../../../services/admin/menu-group.service';
@@ -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',
@@ -29,32 +28,31 @@ import { ThemeService } from 'src/app/services/theme.service';
 })
 export class LayoutComponent implements OnInit {
   // baseUrl= environment.chaturl;
-  @Input() data: any;
+  @Input() data:any;
 
   loading = false;
   apps: Array<ProjectSetup> = [];
   projectsetup;
 
   collapsed = true;
-  public showAppAlert: boolean = false;
+  public showAppAlert:boolean = false;
-  modalteam = false;
+modalteam=false;
-  public userName: string = "";
+  public userName: string="";
 
-  private formCode: string = 'teacher_form';
+  private formCode: string ='teacher_form';
-  public key: string = "formCode";
+  public key:string="formCode";
-  public storage: Storage = sessionStorage;
+  public storage:Storage = sessionStorage;
  
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private userInfoService: UserInfoService,
+    private userInfoService:UserInfoService,
     private realnetMenuService: RealnetMenuService,
     private menuGroupService: MenuGroupService,
-    private sysparaservice: SysparameterService,
+    private sysparaservice:SysparameterService,
     private reportBuilderService: ReportBuilderService,
-    private dashboardService: Dashboard3Service,
+    private dashboardService : Dashboard3Service,
     private translate: TranslateService,
-    private themeService: ThemeService,
     // private guidedTourService: GuidedTourService,
     // private tourservice: TourService,
     private toastr: ToastrService,
@@ -71,10 +69,10 @@ export class LayoutComponent implements OnInit {
   switchLanguage(language: string): void {
     this.translate.use(language);  // Switch to the selected language
   }
-  user_name: any;
+  user_name : any;
-  userrole: any;
+  userrole:any;
   menus: Rn_Main_Menu[];
-  menu: any;
+  menu:any;
   tourdata;
   steps;
   error;
@@ -82,47 +80,47 @@ export class LayoutComponent implements OnInit {
     this.storage.setItem(this.key, this.formCode);
     this.user_name = this.userInfoService.getUserName();
     console.log('user name: ' + this.user_name);
-    this.userrole = this.userInfoService.getRoles();
+    this.userrole=this.userInfoService.getRoles();
-    console.log('user_role', this.userrole);
+    console.log('user_role',this.userrole);
-    this.udata = this.userInfoService.getUserId();
+    this.udata=this.userInfoService.getUserId();
-    console.log('user id', this.udata);
+    console.log('user id',this.udata);
     this.loadMenuByAccountId();
     this.loadMenuByMenuGroup();
     this.getById(1);
-    //     this.tourservice.getall().subscribe((data)=>{
+//     this.tourservice.getall().subscribe((data)=>{
-    //       this.tourdata=data[1];
+//       this.tourdata=data[1];
-    //       //console.log("tour data",data);
+//       //console.log("tour data",data);
-    //       console.log(this.tourdata);
+//       console.log(this.tourdata);
-    //       //console.log(this.tourdata.tourId);
+//       //console.log(this.tourdata.tourId);
-    //       //console.log(this.tourdata.useOrb);
+//       //console.log(this.tourdata.useOrb);
-    // //this.steps=JSON.stringify(this.tourdata.steps);
+// //this.steps=JSON.stringify(this.tourdata.steps);
-    //      // console.log(this.tourdata.steps);
+//      // console.log(this.tourdata.steps);
-    //       //this.dashboardTour.tourId=this.tourdata.tourId;
+//       //this.dashboardTour.tourId=this.tourdata.tourId;
-    //       //console.log(this.dashboardTour.tourId);
+//       //console.log(this.dashboardTour.tourId);
-    //       //this.dashboardTour.useOrb=this.tourdata.useOrb;
+//       //this.dashboardTour.useOrb=this.tourdata.useOrb;
-    //    // this.dashboardTour.steps=this.tourdata.steps;
+//    // this.dashboardTour.steps=this.tourdata.steps;
-    //     });
+//     });
-  }
+}
 
 
 
 
-  showFolderNames: boolean = false; // Variable to control the report names display
+showFolderNames: boolean = false; // Variable to control the report names display
-  reportNames: any[] = []; // Store the report names
+reportNames: any[] = []; // Store the report names
 
-  // getName() {
+// getName() {
-  //   this.reportBuilderService.getrbDetails().pipe(
+//   this.reportBuilderService.getrbDetails().pipe(
-  //     map((data) => data.map((item) => item.folderName))
+//     map((data) => data.map((item) => item.folderName))
-  //   ).subscribe((reportName) => {
+//   ).subscribe((reportName) => {
-  //     this.reportNames = reportName;
+//     this.reportNames = reportName;
-  //     // this.showReportNames = true; // Toggle on
+//     // this.showReportNames = true; // Toggle on
-  //     console.log('Report Names:', this.reportNames);
+//     console.log('Report Names:', this.reportNames);
-  //   });
+//   });
   
-  // }
+// }
 
 
-  getName() {
+getName() {
   if (this.showFolderNames) {
     // If in report mode, switch to default mode
     this.showFolderNames = false;
@@ -137,18 +135,18 @@ export class LayoutComponent implements OnInit {
         this.showFolderNames = true;
       },);
   }
-  }
+}
 
-  filteredGridData: any[] = [];
+filteredGridData: any[] = [];
-  gridData: any[] = [];
+gridData: any[] = [];
-  // Function to filter the data based on the selected folder
+// Function to filter the data based on the selected folder
-  filterGridDataByFolder(folderName: string) {
+filterGridDataByFolder(folderName: string) {
   this.filteredGridData = this.gridData.filter(item => item.folderName === folderName);
-  }
+}
 
-  showDashNames: boolean = false;
+showDashNames: boolean = false;
-  dashNames: any[] = [];
+dashNames: any[] = [];
-  getDashName() {
+getDashName() {
   if (this.showDashNames) {
     // If in report mode, switch to default mode
     this.showDashNames = false;
@@ -164,7 +162,7 @@ export class LayoutComponent implements OnInit {
         this.showDashNames = true;
       },);
   }
-  }
+}
 
 
 
@@ -172,11 +170,11 @@ export class LayoutComponent implements OnInit {
 
 
 
-  showSetupMenus: boolean = false;
+showSetupMenus: boolean = false;
-  toggleSetupMenus() {
+toggleSetupMenus() {
   this.showSetupMenus = !this.showSetupMenus;
 
-  }
+}
 
 
 
@@ -185,74 +183,74 @@ export class LayoutComponent implements OnInit {
 
 
 
-  // side nav menu-sub_menu
+// side nav menu-sub_menu
-  loadMenuByAccountId() {
+loadMenuByAccountId() {
   this.realnetMenuService.getByAccountId().subscribe(resp => {
           this.menus = resp;
           console.log('menu: ', this.menus);
   });
-  }
+}
 
-  loadMenuByMenuGroup() {
+loadMenuByMenuGroup() {
   this.menuGroupService.getByCurrentUserMenuGroupId2().subscribe(resp => {
       this.menus = resp;
       console.log('menus: ', this.menus);
-    }, (error) => {
+  },(error) => {
     console.log(error);
-      if (error) {
+    if(error){
-        this.error = "No data Available OR server Error";
+     this.error="No data Available OR server Error";
    }
    if (error.status === 401) {
     // auto logout if 401 response returned from api
     // this.authenticationService.logout();
     this.toastr.error("Your Token Is Expire Plz login Again")
     //location.reload(true);
-      }
+}
   })
-  }
+}
-  sysparameter;
+sysparameter;
-  getById(id: number) {
+getById(id: number) {
   this.sysparaservice.getById(id).subscribe((data) => {
       this.sysparameter = data;
-      console.log("getbyiddata", this.sysparameter);
+      console.log("getbyiddata",this.sysparameter);
     },
     (err) => {
       console.log(err);
     }
   );
-  }
+}
 
 
-  /*  menuGroup: Rn_Menu_Group_Header[];
+/*  menuGroup: Rn_Menu_Group_Header[];
-  menu_id: number;
+menu_id: number;
-  loadMenuGroupData() {
+loadMenuGroupData() {
   this.menuGroupService.getAll().subscribe(resp => {
       this.menuGroup = resp;
       this.menu_id = this.menuGroup
   });
-  } */
+} */
 
 
 
 
 
-  navbarSelectionChange(val) {
+navbarSelectionChange(val){
   // console.log(val);
-  }
+}
 
-  closeAppAlert() {
+closeAppAlert(){
-    this.showAppAlert = false;
+  this.showAppAlert=false;
-  }
+}
 
-  isDisabled(input: string): boolean {
+isDisabled(input: string): boolean{
-    if (input === null) {
+  if(input === null) {
       return true;
   } else false;
-  }
+}
 
 
   onLogout() {
-    this.userInfoService.logout().subscribe((data) => {
+    this.userInfoService.logout().subscribe((data)=>{
       console.log(data);
     });
     sessionStorage.clear();
@@ -262,20 +260,20 @@ export class LayoutComponent implements OnInit {
   menuFlag1 = false;
   udata;
   uid;
-  message() {
+  message(){
     //this.menuFlag = false;
    // this.menuFlag1 = true;
-    // this.menuGroupService.getuser(this.udata).subscribe((data)=>{
+// this.menuGroupService.getuser(this.udata).subscribe((data)=>{
-    //   console.log(data);
+//   console.log(data);
-    // })
+// })
-    // window.open(`${this.baseUrl}`)
+// window.open(`${this.baseUrl}`)
    //window.location.href = `${this.baseUrl}`;
    //this.udata=this.userInfoService.getUserInfo();
    //console.log(this.udata);
 
     this.menuGroupService.save(this.udata);
 
-    this.uid = this.udata.userid;
+   this.uid=this.udata.userid;
    localStorage.setItem("id", JSON.stringify(this.udata));
    //localStorage.setItem('id', this.uid);
    //window.location.href = (`${this.baseUrl}/`  + this.udata), true
@@ -287,7 +285,7 @@ export class LayoutComponent implements OnInit {
     //this.userInfoService.storeUserInfo(JSON.stringify(this.udata.user));
   }//
 
-  modaladd() {
+  modaladd(){
     //this.modalteam=true;
     this.router.navigate(['/cns-portal/myworkspace']);
   }
@@ -295,17 +293,17 @@ export class LayoutComponent implements OnInit {
   me;
   md;
   mv;
-  send(val) {
+  send(val){
     console.log(val);
     this.menuGroupService.storeaddeditvalues(val);
-    this.mc = val.mcreate;
+this.mc=val.mcreate;
-    this.me = val.medit;
+this.me=val.medit;
-    this.md = val.mdelete;
+this.md=val.mdelete;
-    this.mv = val.mvisible;
+this.mv=val.mvisible;
-    if (this.mv == 'false') {
+if(this.mv == 'false'){
   this.router.navigate(['/**'])
-    }
+}
-    this.router.navigate(['./' + val.main_menu_action_name], { relativeTo: this.route });
+    this.router.navigate(['./'+ val.main_menu_action_name] , { relativeTo: this.route});
   }
   //skipLocationChange: true, value pass params->,queryParams:{mc:this.mc,me:this.me,md:this.md}
 }

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,10 +8,8 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class AdditionalcontainerService {
-  // baseurl = environment.sureops;
+  baseurl = environment.sureops;
-  baseurl = environment.backendUrl;
+  private baseURL = "Gaurav_testing/Gaurav_testing" ;
-
-  private baseURL = "Gaurav_testing/Gaurav_testing";
   constructor(private apiRequest: ApiRequestService,
     private _http: HttpClient,) { }
 
@@ -46,7 +44,7 @@ export class AdditionalcontainerService {
     const url = `${this.baseurl}/sureops/Additional_container/copt_to_deployment/${projId}/${profileId}/${service}`;
     return this._http.get(url);
   }
-  //	get all by project id and profile id
+//	get all by project id and profile id
   getAllContainers(projId: number, profileId: number): Observable<any> {
     const url = `${this.baseurl}/sureops/Additional_container/copt_to_deployment/${projId}/${profileId}`;
     return this._http.get(url);
@@ -54,24 +52,24 @@ export class AdditionalcontainerService {
 
 
 
-  /////////////////////////////////////
+/////////////////////////////////////
 
-  getAll(page?: number, size?: number): Observable<any> {
+getAll(page?: number, size?: number): Observable<any> {
   return this.apiRequest.get(this.baseURL);
-  }
+}
-  getById(id: number): Observable<any> {
+getById(id: number): Observable<any> {
   const _http = this.baseURL + "/" + id;
   return this.apiRequest.get(_http);
-  }
+}
-  create(data: any): Observable<any> {
+create(data: any): Observable<any> {
   return this.apiRequest.post(this.baseURL, data);
-  }
+}
-  updategaurav(id: number, data: any): Observable<any> {
+updategaurav(id: number, data: any): Observable<any> {
   const _http = this.baseURL + "/" + id;
   return this.apiRequest.put(_http, data);
-  }
+}
-  delete(id: number): Observable<any> {
+delete(id: number): Observable<any> {
   const _http = this.baseURL + "/" + id;
   return this.apiRequest.delete(_http);
-  }
+}
 }

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

@@ -19,7 +19,7 @@ export class Dashboard3Service {
   private updateURL = 'update_Dashbord1_Lineby_id';
   constructor(private _http: HttpClient,
     private apiRequest: ApiRequestService) { }
-  getAll(module_id: number, page?: number, size?: number): Observable<any> {
+    getAll(module_id: number,page?: number, size?: number): Observable<any> {
       // create Request URL params
       let me = this;
       let params: HttpParams = new HttpParams();
@@ -30,41 +30,44 @@ export class Dashboard3Service {
       return this.apiRequest.get(this.getAllURL, params);
       }
 
-  create(data: any): Observable<any> {
+      create(data:any): Observable<any> {
       return this.apiRequest.post(this.addDataURl, data);
       }
 
-  deleteField(id: number) {
+      deleteField(id:number){
         let _http = this.deleteFieldURL + "/" + id;
           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);
+      {
+       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'
       //         })
       //     };
       let _http = this.updateURL + "/" + id;
-    return this.apiRequest.put(_http, line);
+       return this.apiRequest.put(_http,line);
       }
-  getcount(moduleId: number): Observable<any> {
+getcount(moduleId: number):Observable<any>{
   return this.apiRequest.get(`get_dashboard/${moduleId}`);
-  }
+}
 
-  updateDash(dashboardHeader: any): Observable<any> {
+updateDash(dashboardHeader: any): Observable<any> {
   return this.apiRequest.put('update_dashboard_header', dashboardHeader);
-  }
+}
-  /////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////
-  resetConditions() {
+resetConditions() {
   this.ids = []; // Reset the ids array to an empty array
   this.numberIds = []; 
   this.passwordIds = []; 
@@ -80,154 +83,154 @@ export class Dashboard3Service {
   this.decimalIds = []; 
   this.percentageIds = []; 
   this.buttonIds = [];
-  }
+}
 
-  //////////// Text
+//////////// Text
-  ids: any[] = [];
+ids: any[] = [];
-  setCondition(condition: any) {
+setCondition(condition: any) {
   this.ids.push(condition);
-  }
+}
 
-  getConditions(): any[] {
+getConditions(): any[] {
   return this.ids;
-  }
+}
 
 
-  ////////// Number
+////////// Number
-  numberIds: any[] = [];
+numberIds: any[] = [];
-  setnumber(id: any) {
+setnumber(id: any) {
   this.numberIds.push(id);
-  }
+}
 
-  getnumber(): any[] {
+getnumber(): any[] {
   return this.numberIds;
-  }
+}
-  ////////////// password
+////////////// password
-  passwordIds: any[] = [];
+passwordIds: any[] = [];
-  setpassword(id: any) {
+setpassword(id: any) {
   this.passwordIds.push(id);
-  }
+}
 
-  getpassword(): any[] {
+getpassword(): any[] {
   return this.passwordIds;
-  }
+}
 
-  ////////////// Textarea
+////////////// Textarea
-  textareaIds: any[] = [];
+textareaIds: any[] = [];
-  setTextarea(id: any) {
+setTextarea(id: any) {
   this.textareaIds.push(id);
-  }
+}
 
-  getTextarea(): any[] {
+getTextarea(): any[] {
   return this.textareaIds;
-  }
+}
 
-  ////////////// Date
+////////////// Date
-  dateIds: any[] = [];
+dateIds: any[] = [];
-  setDate(id: any) {
+setDate(id: any) {
   this.dateIds.push(id);
-  }
+}
 
-  getDate(): any[] {
+getDate(): any[] {
   return this.dateIds;
-  }
+}
 
-  ////////////// Datetime
+////////////// Datetime
-  datetimeIds: any[] = [];
+datetimeIds: any[] = [];
-  setDatetime(id: any) {
+setDatetime(id: any) {
   this.datetimeIds.push(id);
-  }
+}
 
-  getDatetime(): any[] {
+getDatetime(): any[] {
   return this.datetimeIds;
-  }
+}
 
-  ////////////// Email
+////////////// Email
-  emailIds: any[] = [];
+emailIds: any[] = [];
-  setEmail(id: any) {
+setEmail(id: any) {
   this.emailIds.push(id);
-  }
+}
 
-  getEmail(): any[] {
+getEmail(): any[] {
   return this.emailIds;
-  }
+}
 
-  ////////////// Select
+////////////// Select
-  selectIds: any[] = [];
+selectIds: any[] = [];
-  setSelect(id: any) {
+setSelect(id: any) {
   this.selectIds.push(id);
-  }
+}
 
-  getSelect(): any[] {
+getSelect(): any[] {
   return this.selectIds;
-  }
+}
 
-  ////////////// Radio
+////////////// Radio
-  radioIds: any[] = [];
+radioIds: any[] = [];
-  setRadio(id: any) {
+setRadio(id: any) {
   this.radioIds.push(id);
-  }
+}
 
-  getRadio(): any[] {
+getRadio(): any[] {
   return this.radioIds;
-  }
+}
 
-  ////////////// Checkbox
+////////////// Checkbox
-  checkboxIds: any[] = [];
+checkboxIds: any[] = [];
-  setCheckbox(id: any) {
+setCheckbox(id: any) {
   this.checkboxIds.push(id);
-  }
+}
 
-  getCheckbox(): any[] {
+getCheckbox(): any[] {
   return this.checkboxIds;
-  }
+}
 
-  ////////////// fileupload
+////////////// fileupload
-  fileuloadIds: any[] = [];
+fileuloadIds: any[] = [];
-  setFileUpload(id: any) {
+setFileUpload(id: any) {
   this.fileuloadIds.push(id);
-  }
+}
 
-  getFileupload(): any[] {
+getFileupload(): any[] {
   return this.fileuloadIds;
-  }
+}
 
-  ////////////// Url
+////////////// Url
-  urlIds: any[] = [];
+urlIds: any[] = [];
-  setUrl(id: any) {
+setUrl(id: any) {
   this.urlIds.push(id);
-  }
+}
 
-  getUrl(): any[] {
+getUrl(): any[] {
   return this.urlIds;
-  }
+}
-  ////////////// Decimal
+////////////// Decimal
-  decimalIds: any[] = [];
+decimalIds: any[] = [];
-  setDecimal(id: any) {
+setDecimal(id: any) {
   this.decimalIds.push(id);
-  }
+}
 
-  getDecimal(): any[] {
+getDecimal(): any[] {
   return this.decimalIds;
-  }
+}
-  ////////////// Percentage
+////////////// Percentage
-  percentageIds: any[] = [];
+percentageIds: any[] = [];
-  setPercentage(id: any) {
+setPercentage(id: any) {
   this.percentageIds.push(id);
-  }
+}
 
-  getPercentage(): any[] {
+getPercentage(): any[] {
   return this.percentageIds;
-  }
+}
-  ////////////// Button
+////////////// Button
-  buttonIds: any[] = [];
+buttonIds: any[] = [];
-  setButton(id: any) {
+setButton(id: any) {
   this.buttonIds.push(id);
-  }
+}
 
-  getButton(): any[] {
+getButton(): any[] {
   return this.buttonIds;
-  }
+}
 
 
 
@@ -237,12 +240,12 @@ export class Dashboard3Service {
 
 
 
-  getAllDash(): Observable<any> {
+getAllDash(): Observable<any> {
   // create Request URL params
   return this.apiRequest.get(`get_Dashboard_header`);
   }
 
-  getAllByModuleId(module_id: number, page?: number, size?: number): Observable<any> {
+getAllByModuleId(module_id: number,page?: number, size?: number): Observable<any> {
   // create Request URL params
   let me = this;
   let params: HttpParams = new HttpParams();
@@ -253,86 +256,53 @@ export class Dashboard3Service {
   return this.apiRequest.get(this.getAllURL, params);
   }
 
-  ///////schedule
+///////schedule
-  public saveData(data: any): Observable<any> {
+public saveData(data: any): Observable<any> {
   return this.apiRequest.post(`DashboardSchedule/DashboardSchedule`, data);
-  }
+}
-
+
-  public getDetails(): Observable<any> {
+public getDetails(): Observable<any> {
-    return this.apiRequest.get(`DashboardSchedule/DashboardSchedule`);
+  return this.apiRequest.get(`DashboardSchedule/DashboardSchedule`);
-  }
+}
-
+
-  public getDetailsById(id: number): Observable<any> {
+public getDetailsById(id: number): Observable<any> {
-    return this.apiRequest.get(`DashboardSchedule/DashboardSchedule/${id}`);
+  return this.apiRequest.get(`DashboardSchedule/DashboardSchedule/${id}`);
-  }
+}
-
+
-  public deleteById(id: number): Observable<any> {
+public deleteById(id: number): Observable<any> {
-    return this.apiRequest.delete(`DashboardSchedule/DashboardSchedule/${id}`);
+  return this.apiRequest.delete(`DashboardSchedule/DashboardSchedule/${id}`);
-  }
+}
-
+
-  public updateData(data: any, id: number): Observable<any> {
+public updateData(data: any, id: number): Observable<any> {
-    return this.apiRequest.put(`DashboardSchedule/DashboardSchedule/${id}`, data);
+  return this.apiRequest.put(`DashboardSchedule/DashboardSchedule/${id}`, data);
-  }
+}
-
+
-  ////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////
-
+
-
+
-  public getDynamicDashDetails(): Observable<any> {
+public getDynamicDashDetails(): Observable<any> {
-    return this.apiRequest.get(`Dashboard/Dashboard`);
+  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) {
+  return this._http.get(url);
-      url += `&sureId=${sureId}`;
+}
-    }
+
-    if (parameter) {
+public getUrlChartData(tableName: string, jobType: string, xAxis:any,yAxes:any,store:any,chartUrl:any): Observable<any> {
-      url += `&parameter=${encodeURIComponent(parameter)}`;
+  const url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&url=${chartUrl}&xAxis=${xAxis}&yAxes=${yAxes}&datastore_name=${store}`;
-    }
+  return this._http.get(url);
-    if (parameterValue) {
+}
-      url += `&parameterValue=${encodeURIComponent(parameterValue)}`;
+
-    }
+featchDynamicUrlDetails(url): Observable<any> {
-    
+  return this._http.get(`${url}`);
-    console.log('=== DASHBOARD SERVICE DEBUG INFO ===');
+}
-    console.log('Base URL:', url);
+
-    console.log('Filters parameter:', filters);
+
-
+private filteredDataSubject = new BehaviorSubject<any[]>([]);
-    // Parse filters JSON and add as a single "filters" parameter
+filteredData$ = this.filteredDataSubject.asObservable();
-    if (filters) {
+
-      try {
+updateFilteredData(filteredData: any[]) {
-        const filterObj = JSON.parse(filters);
+  this.filteredDataSubject.next(filteredData);
-        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> {
-    let 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);
-  }
-
-  featchDynamicUrlDetails(url): Observable<any> {
-    return this._http.get(`${url}`);
-  }
-
-
-  private filteredDataSubject = new BehaviorSubject<any[]>([]);
-  filteredData$ = this.filteredDataSubject.asObservable();
-
-  updateFilteredData(filteredData: any[]) {
-    this.filteredDataSubject.next(filteredData);
-  }
 }

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;
-  }
-}