diff --git a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html index df4eba9..774fa24 100644 --- a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html +++ b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html @@ -1,39 +1,155 @@ - + +
+ +
+
+
+
+
+
+
+
+
- +
+ + --> +
+
+ + Secure & Reliable +
+
+ + Advanced Analytics +
+
+ + Customizable +
+
+
+
+ + +
+
+
+

Welcome Back

+

Sign in to your account to continue

+
+ + + + + +
+
+ + + + + + + + +
@@ -143,4 +259,4 @@
- \ No newline at end of file + --> \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss index 221d360..1edea49 100644 --- a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss @@ -1,23 +1,653 @@ - .tamplate1 { - background-image: url(../../../../assets/images/new.png); - background-repeat: no-repeat; - background-size: 60%; - background-position: right center; - border: 1px solid #000; +// ======================================== +// 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%); } - - .tamplate2 { - background-image: url(../../../../assets/images/new.png); - background-repeat: no-repeat; - background-size: 60%; - background-position: left center; + + .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; - justify-content: flex-end; - align-items: center; - border: 1px solid #000; + 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; + } + } } - .signup { - cursor: pointer; - // color:#80b0ff; +} + +// 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 { + background-image: url(../../../../assets/images/new.png); + background-repeat: no-repeat; + background-size: 60%; + background-position: left center; + display: flex; + justify-content: flex-end; + align-items: center; + border: 1px solid #000; +} + +.signup { + cursor: pointer; +} diff --git a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts index be82326..d31362b 100644 --- a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts @@ -41,6 +41,8 @@ export class LoginPageComponent implements OnInit { email = ''; password = ''; isError = false; + isLoading = false; + showPassword = false; model: any = {}; errMsg: string = ''; @@ -71,32 +73,80 @@ 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(resp => { - if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") { - this.errMsg = 'Checking Email or password'; - return; - } - this.router.navigate([resp.landingPage]);// add , {skipLocationChange: true} - }, + .subscribe( + resp => { + console.log('API Response received:', resp); + 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') { + 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 = 'Invalid email or password'; + return; + } + + // 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); + 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 Timedout'; + this.errMsg = 'Request timeout'; + 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 = 'Server Error'; + this.errMsg = 'An error occurred. Please try again.'; } } ); - } goaccount(){ } @@ -104,5 +154,17 @@ 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; + } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts b/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts index 8052672..56b2b42 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts @@ -12,12 +12,6 @@ - - - - - - @@ -240,7 +234,8 @@ export class Stepper_workflowComponent implements OnInit { rsModaldescription = false; goToReplaceStringdescription(row) { - this.rowSelected = row; this.rsModaldescription = true; + this.rowSelected = row; + this.rsModaldescription = true; } @@ -253,6 +248,39 @@ export class Stepper_workflowComponent implements OnInit { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + this.router.navigate(["../demostepper/", id], { relativeTo: this.route }); + + + + } // updateaction diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html index 88a4b66..fb96a15 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html @@ -1,279 +1,465 @@ -
    +
      2. -
    2. {{'SECURITY' | translate}}
      3. -
    3. {{ 'MENU_ACCESS_CONTROL' | translate }}
      4. +
    4. {{'SECURITY' | translate}}
      5. +
    5. {{'MENU_ACCESS_CONTROL' | translate}}
    -
    -
    -
    -

    {{ 'MENU_ACCESS_CONTROL' | translate }}

    +
    +
    +
    +
    -
    - {{ 'EDIT_MODE' | translate }} +
    +

    {{'MENU_ACCESS_CONTROL' | translate}}

    +

    {{'SECURITY' | translate}}

    -
    - {{ 'FOR' | translate }} - - {{ 'SHOW_ALL' | translate }} {{ 'ONLY_MAIN_MENU' | translate - }} - + +
    + {{'SHOW_ALL' | translate}} + {{'ONLY_MAIN_MENU' | translate}} + +
    -
    -
    +
    -
    +
    - -
    - - -
    - {{ ' Close toggle to activate Add button. ' | translate }} +
    + +
    + {{'CLOSE_TOGGLE_TO_ACTIVATE_ADD_BUTTON' | translate}}
    +
    +
    +
    + + +
    +
    +
    +
    +
    {{ totalItems }}
    +
    {{'TOTAL_ITEMS' | translate}}
    +
    +
    +
    {{ mainMenuCount }}
    +
    {{'MAIN_MENUS' | translate}}
    +
    +
    +
    {{ subMenuCount }}
    +
    {{'SUB_MENUS' | translate}}
    +
    +
    +
    - + - Loading ... -
    {{ 'NO_DATA_AVAILABLE' | translate }}
    + + {{'LOADING' | translate}} ... + +
    {{'NO_DATA_AVAILABLE' | translate}}
     - - {{ 'NO' | translate }} - - - {{ 'MENU_ITEM_NAME' | translate }} - - - {{ 'VIEW' | translate }} - - - {{ 'CREATE' | translate }} - - - {{ 'EDIT' | translate }} - - - {{ 'DELETE' | translate }} - - - - {{ 'QUERY' | translate }} - - - {{ 'EXPORT' | translate }} - + + + + {{'NO' | translate}} + + + + + + + {{'MENU_ITEM_NAME' | translate}} + + + + + + + {{'VIEW' | translate}} + + + + + + + {{'CREATE' | translate}} + + + + + + + {{'EDIT' | translate}} + + + + + + + {{'DELETE' | translate}} + + + + + + + {{'QUERY' | translate}} + + + + + + + {{'EXPORT' | translate}} + + + - + {{i+1}} - {{all.menuItemDesc}} + + {{all.menuItemDesc}} +    {{all.menuItemDesc}} - - - - - - + + + + + + + + + + + + + + + + + + - - - - + + + - + - -
    Menuname{{'MENUNAME' | translate}}
    - + - Record per page + {{'RECORDS_PER_PAGE' | translate}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records + {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}     - + - Loading ... -
    No data available
    + + {{'LOADING' | translate}} ... + +
    {{'NO_DATA_AVAILABLE' | translate}}
     - - NO - - - Menu Item Name - - - View - - - Create - - - Edit - - - Delete - - - - Query - - - Export - - + + + + {{'NO' | translate}} + + + + + + + {{'MENU_ITEM_NAME' | translate}} + + + + + + + {{'VIEW' | translate}} + + + + + + + {{'CREATE' | translate}} + + + + + + + {{'EDIT' | translate}} + + + + + + + {{'DELETE' | translate}} + + + + + + + {{'QUERY' | translate}} + + + + + + + {{'EXPORT' | translate}} + + + + {{i+1}} - {{all.menuItemDesc}} - - - - - - + + {{all.menuItemDesc}} + + + + + + + + + + + + + + + + + + + - + - +
    Menuname{{'MENUNAME' | translate}}
    - + - Record per page + {{'RECORDS_PER_PAGE' | translate}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records + {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}     - -

    Add Menu Access Control

    + +

    + {{'ADD_MENU_ACCESS_CONTROL' | translate}} +

    -
    - - +
    {{'CHOOSE_MAIN_MENU_FOR_ACCESS' | translate}}
    -
    - - + +
    -     - -

    Update Menu Access Control

    + +

    + {{'UPDATE_MENU_ACCESS_CONTROL' | translate}} +

    -

    {{rowSelected.menuItemId.menuItemId}}

    +
    {{'MENU_ID' | translate}}: + {{rowSelected.menuItemId.menuItemId}} +
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    - +
    + + + + + +
    -
    - - + +
    - - -
    -

    Are You Sure Want to delete?

    -

    {{rowSelected.menuItemId.menuItemId}}

    + +
    +
    +
    + +
    +

    {{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?

    +

    {{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}

    +
    +
    +
    + {{'MENU_ITEM_ID' | translate}}: + {{rowSelected.menuItemId.menuItemId}} +
    +
    - - + +
    - -
    -

    Are You Sure Want to delete Main menu with submenu?

    -

    {{rowSelected.menuItemId.menuItemId}}

    + +
    +
    +
    + +
    +

    {{'ARE_YOU_SURE_WANT_TO_DELETE_MAIN_MENU_WITH_SUBMENU' | translate}}?

    +

    {{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}

    +
    +
    +
    + {{'MENU_ITEM_ID' | translate}}: + {{rowSelected.menuItemId.menuItemId}} +
    +
    - - + +
    -     \ No newline at end of file + +
    \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss index 1b7ad42..4446200 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss @@ -1,43 +1,160 @@ -input[type=text],[type=date],[type=password],[type=checkbox] { +@import '../../../../../styles/_design-tokens.scss'; + +// Import base styles +input[type=text], +[type=date], +[type=password], +[type=checkbox] { width: 100%; padding: 15px 20px; - // margin: 3px 0; - background-color:rgb(255, 255, 255); + background-color: var(--theme-surface); display: inline-block; - border: 1px solid #ccc; - border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; 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{ -// width: 100%; -// padding: 5px 5px; -// border: 1px solid #ccc; -// border-radius: 4px; -// } + +.required-field { + color: var(--theme-error, #ef4444); + font-size: 18px; +} + .td-title { text-align: center; width: 150px; -color: white; + color: white; font-weight: bold; - background-color: rgba(63, 122, 231, 0.863); - //color: rgb(24, 13, 13); + background-color: var(--theme-primary); } -th{ - //background-color:rgb(170, 169, 169); + +th { font-weight: bold; } -.td-content{ + +.td-content { text-align: left; } -.delete,.heading{ - text-align: center; - color: red; + +// Modern Button Styles using ThemeService +.mac-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 + &.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; @@ -76,24 +193,585 @@ th{ transition: .4s; } -input:checked + .slider { - background-color: #0072a3; +input:checked+.slider { + background-color: var(--theme-primary); } -input:focus + .slider { - box-shadow: 0 0 1px #0072a3; +input:focus+.slider { + box-shadow: 0 0 1px var(--theme-primary); } -input:checked + .slider:before { +input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } - .slider.round { - border-radius: 34px; +.slider.round { + border-radius: 34px; +} + +.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); } - .slider.round:before { - border-radius: 50%; + &: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; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts index 1ccf78e..ada1420 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts @@ -6,6 +6,8 @@ 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', @@ -36,15 +38,26 @@ export class MenuaccesscontrolComponent implements OnInit { toggle: boolean = false; maindata; showdata; - constructor(private mainservice: UsermaintanceService, + // UI enhancements (no API changes) + 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; @@ -61,35 +74,64 @@ 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; @@ -104,17 +146,19 @@ export class MenuaccesscontrolComponent implements OnInit { // console.log(this.menudata) }, - (error) => { - console.log('Error in adding data...', error); - if (error) { - this.error = "No data Available" - } - }); + (error) => { + console.log('Error in adding data...', error); + if (error) { + this.error = "No data Available" + } + }); } + modaladd() { this.modalAdd = true; this.getdata(); } + onSubmit() { this.modalAdd = false; this.entryForm.value.grpid = this.usergrpid; @@ -128,28 +172,30 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }, - (error) => { - console.log('Error in adding data...', error); - if (error.status == 400) { - this.toastr.error(error.error); - - } else if (error) { - this.toastr.error('Not added Data Getting Some Error'); - } - this.ngOnInit(); - }); + (error) => { + console.log('Error in adding data...', error); + if (error.status == 400) { + this.toastr.error(error.error); + } else if (error) { + this.toastr.error('Not added Data Getting Some Error'); + } + 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) => { @@ -166,11 +212,13 @@ 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) => { @@ -187,6 +235,7 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }); } + onUpdate(id: any, usrgrp: any) { this.modaledit = false; console.log(id, usrgrp); @@ -204,6 +253,7 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }); } + onChecked(value) { if (value == "y") { this.selected = "y" @@ -213,11 +263,13 @@ 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; @@ -239,8 +291,9 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }) } + toggleCheckbox() { this.toggle = !this.toggle; //this.dataService.setDivToggler(this.toggler); } -} +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html index 7025f45..f9ee1bd 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html @@ -1,11 +1,39 @@ - -
      +
      2. {{ 'SECURITY' | translate }}
      3. {{ 'MENU_MAINTENANCE' | translate }}
      - +
      +
      +
      +
      + +
      +
      +

      {{ 'MENU_MAINTENANCE' | translate }}

      +

      {{ 'MAIN_MENU' | translate }}

      +
      +
      +
      + + + + +
      +
      -
      -
      -

      {{ 'MENU_MAINTENANCE' | translate }}

      - {{ 'MAIN_MENU' | translate }}
      - +
      +
      +
      {{ totalMenus }}
      +
      {{ 'TOTAL_MENUS' | translate }}
      - -
      -
      - - +
      +
      {{ enabledMenusCount }}
      +
      {{ 'ENABLED' | translate }}
      - - +
      +
      {{ disabledMenusCount }}
      +
      {{ 'DISABLED' | translate }}
      +
      +
      - - + +
      -
      +
      - - {{'LOADING'|translate}} ... -
      {{error}}
       - + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + {{'LOADING'|translate}} ... + +
      + +
      {{ 'NO_DATA' | translate }}
      +
      {{ error }}
      +
      +       + - - + + - {{'NO' | translate}} + {{'NO' | translate}} - - + + - {{'MENU_ITEM_NAME' | translate}} + {{'MENU_ITEM_NAME' | translate}} - - + + - {{'ID' | translate}} + {{'ID' | translate}} - - + + - {{'SEQUENCE' | translate}} + {{'SEQUENCE' | translate}} - - + + - {{'MODULE_NAME' | translate}} + {{'MODULE_NAME' | translate}} - - + + - {{'MENU_ACTION_LINK' | translate}} + {{'MENU_ACTION_LINK' | translate}} - - + + - {{'STATUS' | translate}} + {{'STATUS' | translate}} - - + + {{'SUB_MENU' | translate}} - - + + {{'ACTION' | translate}} - - - - - - {{i+1}} - {{user.menuItemDesc}} - {{user.menuId}} - {{user.itemSeq}} - {{user.moduleName}} - {{user.main_menu_action_name}} - {{user.status}} - - - - - - -
      {{'WHO_COLUMN'|translate}}
      -
      {{'ACCOUNT_ID'|translate}} {{user.accountId}}
      -
      {{'CREATED_AT'|translate}} {{user.createdAt| date}}
      -
      {{'CREATED_BY'|translate}} {{user.createdBy}}
      -
      {{'UPDATED_AT'|translate}} {{user.updatedAt | date}}
      -
      {{'UPDATED_BY'|translate}} {{user.updatedBy}}
      -       -       -       - - - - - - - -
      Menu Name: {{user.menuItemDesc}}
      -       -       + +
      +
      Menu Name{{user.menuItemDesc}}
      +
      Action Link{{user.main_menu_action_name}}
      +
      Module{{user.moduleName}}
      +
      +       + - - - Users per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} users - - -       + + + Users per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} users + + + +
      - +
      +
      +
      +
      + +
      {{user.menuItemDesc}}
      +
      {{user.status}}
      +
      +
      +
      ID{{user.menuId}}
      +
      Sequence{{user.itemSeq}}
      +
      Module{{user.moduleName}}
      +
      {{user.main_menu_action_name}} +
      +
      +
      + + + +
      +
      +
      +
      + +

      Add Menu Maintenance

      -
      +
      -
      - +
      - -
      -
      *This field is Required
      -
      + +
      +
      *This field + is Required
      +
      -
      *This field is Required
      +
      *This field is + Required
      +
      +
      +
      *Required Only + Number
      +
      -
      -
      *Required Only Number
      -
      +
      + + +
      +
      *This field is + Required
      -
      - - -
      -
      *This field is Required
      +
      +
      + + +
      +
      *This field is + Required
      -
      -
      - - -
      -
      *This field is Required
      -
      -
      -
      - - -
      -
      *This field is Required
      -
      - -
      -
      - - -
      -
      *This field is Required
      -
      -
      +
      +
      + + +
      +
      *This + field is Required
      +
      +

      - +
      - +
      - +

      Are You Sure Want to delete?

      {{rowSelected.menuItemId}}

      - +
      - +

      Update Menu Maintenance

      {{rowSelected.menuItemId}}

      -
      +
      - +
      - +
      -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +

      - -
      - + +
      +
      - +

      Import File

      - +
      - +
      -       \ No newline at end of file +       +
    \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss index ab11a3c..d14e655 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss @@ -60,3 +60,591 @@ 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; +} + diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts index af0657f..03d5887 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts @@ -9,6 +9,7 @@ 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', @@ -31,6 +32,10 @@ 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, @@ -39,9 +44,14 @@ 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; @@ -69,6 +79,71 @@ 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 = { + '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); } diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html index a685d03..4a5da87 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html @@ -1,5 +1,5 @@ -
      +
      2. Security
      3. Menu Maintenance
        4. @@ -9,22 +9,50 @@ Sub Menu
        --> -
        -
        -

        Sub-Menu Maintenance

        - Sub Menu
        - -
        -
        -
        + + +
        +
        +
        + + +
        +
        +
        + +
        + + +
        +
        - +
        + Loading ... @@ -49,19 +77,29 @@ Status - + {{i+1}} - {{user.menuItemDesc}} + +
        + +
        +
        {{user.menuItemDesc}}
        +
        ID: {{ user.menuId || '—' }} | Seq: {{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : '—' }}
        +
        +
        +         {{user.menuId}} {{user.itemSeq}} {{user.moduleName}} {{user.main_menu_action_name}} {{user.status}} - - - - + +
        + + +
        +         @@ -73,7 +111,7 @@ - + Users per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} @@ -81,8 +119,31 @@ + - +
        +
        +
        +
        + +
        {{user.menuItemDesc}}
        +
        {{user.status}}
        +
        +
        +
        ID{{ user.menuId || '—' }}
        +
        Sequence{{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : '—' }}
        +
        Module{{ user.moduleName || '—' }}
        +
        {{ user.main_menu_action_name || '—' }}
        +
        +
        + + +
        +
        +
        +
        + +

        Add Sub Menu Maintenance

        @@ -181,7 +242,7 @@
        - +
        @@ -201,7 +262,7 @@         - +

        Update Sub Menu Maintenance

        {{rowSelected.menuItemId}}

        @@ -240,7 +301,7 @@
        - +
        diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss index aad7811..c4061f4 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss @@ -1,3 +1,88 @@ +@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; diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts index 5489d80..5893b4a 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts @@ -1,4 +1,5 @@ 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'; @@ -30,13 +31,22 @@ 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); @@ -55,6 +65,34 @@ 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 = { 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; diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html index f0d36a5..93987f1 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html @@ -1,224 +1,320 @@ - -
          +
          2. {{ 'SECURITY' | translate }}
          3. {{'USER_GROUP_MAINTENANCE' | translate}}
            4. -
          - -
          -
          -
          -

          {{'USER_GROUP_MAINTENANCE' | translate}}

          +
          +
          +
          +
          +

          {{'USER_GROUP_MAINTENANCE' | translate}}

          +

          {{ 'SECURITY' | translate }}

          +
          -
          -
          - +
          + + + + + +
          +
          -
          - - - +
          + + + + + {{'LOADING' | translate}} ... + +
          {{error}}
          +           + + + {{'USERGROUP_NO' | translate}} + + + + + {{'GROUP_NAME' | translate}} + + + + + {{'GROUP_DESC' | translate}} + + + + + {{'GROUP_LEVEL' | translate}} + + + + + {{'STATUS' | translate}} + + + + + {{'UPDATED_DATE' | translate}} + + + + {{user.usrGrp}} + {{user.groupName}} + {{user.groupDesc}} + {{user.groupLevel}} + + + {{user.status === 'E' ? 'Enabled' : 'Disabled'}} + + + {{user.updateDateFormated}} + + + + + + +
        + + + + +
        username{{user.groupName}}
        +         +         - - {{'LOADING' | translate}} ... -
        {{error}}
         + + + Record per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + +         - - - {{'USERGROUP_NO' | translate}} - - - - - {{'GROUP_NAME' | translate}} - - - - - {{'GROUP_DESC' | translate}} - - - - - {{'GROUP_LEVEL' | translate}} - - - - - {{'STATUS' | translate}} - - - - - {{'UPDATED_DATE' | translate}} - - - - - {{user.usrGrp}} - {{user.groupName}} - {{user.groupDesc}} - {{user.groupLevel}} - {{user.status}} - - {{user.updateDateFormated}} - - - - - - - - - - - - - - - -
        username{{user.groupName}}
        -         -         - - - - Record per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -         +
        +
        +
        +
        + +
        {{user.groupName}}
        +
        + {{user.status === 'E' ? 'Enabled' : 'Disabled'}} +
        +
        +
        +
        ID{{user.usrGrp}}
        +
        Desc{{user.groupDesc}}
        +
        Level{{user.groupLevel}}
        +
        Updated{{user.updateDateFormated}}
        +
        +
        + + + +
        +

        Add User Group Maintenance

        -
        -
        -
        - - -
        -
        *This field is Required
        -
        -
        -
        - - -
        -
        *This field is Required
        -
        -
        -
        - - -
        -
        *This field is Required
        -
        -
        -
        - - -
        -
        *This field is Required
        -
        -
        -
        -
        -
        - - -
        -
        -
        +
        +
        + + +
        +
        *This field is Required
        +
        +
        + +
        + + +
        +
        *This field is Required
        +
        +
        + +
        + + +
        +
        *This field is Required
        +
        +
        + +
        + + +
        +
        *This field is Required
        +
        +
        + +
        + + +
        +
        +

        Update User Group Maintenance

        - -
        -

        {{rowSelected.usrGrp}}

        -
        -
        -
        - - -
        -
        - - -
        -
        - - -
        -
        - - -
        -
        -
        -
        - - -
        -
        -
        -         - +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        -
        -

        Are You Sure Want to delete?

        -

        {{rowSelected.usrGrp}}

        - - + +
        + +
        +
        +
        + +
        +

        Are You Sure Want to Delete?

        +

        This action cannot be undone

        +
        +
        +
        + User Group ID: + {{rowSelected.usrGrp}} +
        +
        + Group Name: + {{rowSelected.groupName}} +
        +
        + Description: + {{rowSelected.groupDesc}} +
        + +
        + +
        + + +
        +
        +

        Import File

        - +
        + + +
        - + +
        \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss index c871274..d903195 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss @@ -1,8 +1,748 @@ -@import '../../../../../styles1.scss'; -input.ng-invalid.ng-touched { - border-color: red; +@import '../../../../../styles.scss'; + +// Import design tokens +@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; + } } -.error_mess { - color: red; +.ug-btn-text { + margin-left: 8px; } + +// Modern Button Styles using ThemeService +.ug-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 20px; + font-size: 14px; + font-weight: 500; + line-height: 1; + border-radius: 8px; + border: 1px solid transparent; + cursor: pointer; + transition: all 200ms ease-out; + text-decoration: none; + position: relative; + overflow: hidden; + font-family: var(--theme-font-primary); + z-index: 1; + + &:focus { + outline: 2px solid var(--theme-primary); + outline-offset: 2px; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; + } + + // Sizes + &.ug-btn-sm { + padding: 8px 16px; + font-size: 13px; + height: 32px; + } + + &.ug-btn-md { + padding: 12px 20px; + font-size: 14px; + height: 40px; + } + + &.ug-btn-lg { + padding: 16px 24px; + font-size: 16px; + height: 48px; + } + + // Variants + &.ug-btn-primary { + background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); + color: white; + border-color: var(--theme-primary); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + + &:hover { + background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%); + transform: translateY(-2px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + } + + &:active { + transform: translateY(0); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + } + } + + &.ug-btn-secondary { + background: var(--theme-surface); + color: var(--theme-text); + border-color: rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + + &:hover { + background: var(--theme-background); + border-color: rgba(0, 0, 0, 0.2); + transform: translateY(-1px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + } + } + + &.ug-btn-outline { + background: transparent; + color: var(--theme-secondary); + border-color: var(--theme-secondary); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + + &:hover { + background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity + border-color: var(--theme-secondary); + color: var(--theme-secondary); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + } + } + + &.ug-btn-error { + background: var(--theme-error, #ef4444); + color: white; + border-color: var(--theme-error, #ef4444); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + + &:hover { + background: var(--theme-error-dark, #dc2626); + border-color: var(--theme-error-dark, #dc2626); + transform: translateY(-2px); + box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1); + } + } + + &.ug-btn-ghost { + background: transparent; + color: var(--theme-text-secondary); + border-color: transparent; + + &:hover { + background: var(--theme-background); + color: var(--theme-text); + } + } +} + +.ug-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + padding: 16px; + background: var(--theme-surface); + border-radius: 12px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + + &__left { + flex: 1; + } + + &__right { + display: flex; + gap: 8px; + } +} + +.ug-search { + 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; + } + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts index d1f1934..5b62fad 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { ExcelService } from '../../../../services/excel.service'; @@ -8,12 +8,15 @@ 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 { +export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { loading = false; public entryForm: FormGroup; givendata; @@ -23,10 +26,13 @@ export class UsergrpmaintenanceComponent implements OnInit { modaledit=false; modaldelete=false; rowSelected :any= {}; - mcreate; - medit; - showdata; + mcreate: string | boolean = false; + medit: string | boolean = false; + showdata: any; submitted=false; + filterText: string = ''; + viewMode: 'table' | 'cards' = 'cards'; + private themeSubscription: Subscription; constructor( private excel: ExcelService, @@ -38,21 +44,32 @@ export class UsergrpmaintenanceComponent implements OnInit { 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(this.showdata); - this.mcreate=this.showdata.mcreate; - console.log(this.mcreate); - this.medit=this.showdata.medit - console.log(this.medit); + console.log('Showdata:', this.showdata); + if (this.showdata) { + // Handle both string and boolean values + this.mcreate = this.showdata.mcreate === 'true' || this.showdata.mcreate === true ? true : false; + this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false; + console.log('MCREATE:', this.mcreate); + console.log('MEDIT:', this.medit); + } this.mainservice.getAll().subscribe((data) => { - console.log(data); - this.givendata = data; + console.log('Data received:', data); + this.givendata = data || []; if(this.givendata.length==0){ this.error="No data Available"; console.log(this.error) @@ -72,6 +89,30 @@ export class UsergrpmaintenanceComponent implements OnInit { }); } + + 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')) @@ -81,7 +122,8 @@ export class UsergrpmaintenanceComponent implements OnInit { //this.router.navigate(["../usermaintanceadd"],{relativeTo:this.route}); } goToEdit(row){ - this.rowSelected = row; + console.log('Edit clicked for row:', row); + this.rowSelected = {...row}; // Create a copy to avoid reference issues this.modaledit=true; //this.router.navigate(["../usermaintanceedit/"+ id], { relativeTo: this.route }); } @@ -135,7 +177,8 @@ export class UsergrpmaintenanceComponent implements OnInit { // } } onDelete(row) { - this.rowSelected = row; + console.log('Delete clicked for row:', row); + this.rowSelected = {...row}; // Create a copy to avoid reference issues this.modaldelete=true; } @@ -200,4 +243,4 @@ export class UsergrpmaintenanceComponent implements OnInit { this.csvService.downloadCsvs(this.ttype); } -} +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html index fd24638..88e73f5 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html @@ -1,124 +1,202 @@ - -
          +
          2. {{ 'SECURITY' | translate }}
          3. {{'USER_MAINTENANCE'| translate}}
            4. -
          - -
          -
          -
          -

          {{'USER_MAINTENANCE'| translate}}

          -
          -
          -
          - - +
          +
          +
          +
          +

          {{'USER_MAINTENANCE'| translate}}

          +

          {{ 'SECURITY' | translate }}

          - -
          +
          + + + + + +
          +
          + +
          +
          +
          + + +
          +
          +
          +
          + -
          - - - - - - - - - - Loading ... -
          {{error}}
          -           - - - - User Id - - - - Full Name - - - Email - - - User Group Name - - - - - - - {{user.userId}} - - {{user.fullName}} - {{user.email}} - {{user.usrGrpName}} - - - - - - - - - - - - - - - - - -
          username{{user.username}}
          -           -           - - - - Record per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -
          + + + + {{'LOADING' | translate}} ... + +
          {{error}}
          +           + + + + {{'USER_ID' | translate}} + + + + + {{'FULL_NAME' | translate}} + + + + + {{'EMAIL' | translate}} + + + + + {{'USER_GROUP_NAME' | translate}} + + + + + {{user.userId}} + {{user.fullName}} + {{user.email}} + {{user.usrGrpName}} + + + + + + + + + + + + + +
          username{{user.username}}
          +           +           + + + + Record per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + +           + +
          +
          +
          +
          +
          {{user.fullName}}
          +
          ID: {{user.userId}}
          +
          +
          +
          {{'EMAIL' | translate}}{{user.email}}
          +
          {{'GROUP' | translate}}{{user.usrGrpName}}
          +
          +
          + + + + +
          +
          +
          -
          -

          Are You Sure Want to delete?

          -

          {{rowSelected.userId}}

          +
          +
          + +
          +

          {{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?

          +

          {{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}

          +
          + +
          +
          + {{'USER_ID' | translate}}: + {{rowSelected.userId}} +
          +
          + {{'FULL_NAME' | translate}}: + {{rowSelected.fullName}} +
          +
          + {{'EMAIL' | translate}}: + {{rowSelected.email}} +
          +
          +
          - - + +
          - -

          Import File

          +

          {{'IMPORT_FILE' | translate}}

          - +
          + + +
          - + +
          -           + \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss index 76ab29b..428932d 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss @@ -1,4 +1,654 @@ -.delete,.heading{ +@import '../../../../../styles.scss'; +@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; + } + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts index 84197e8..d801642 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { ExcelService } from '../../../../services/excel.service'; @@ -8,12 +8,15 @@ 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 { +export class UsermaintanceComponent implements OnInit, OnDestroy { loading = false; loading1=false; public entryForm: FormGroup; @@ -21,13 +24,18 @@ export class UsermaintanceComponent implements OnInit { orders; modalAdd= false; modaledit=false; -mcreate; -medit; -mdelete; -showdata; -error; -modaldelete=false; -rowSelected :any= {}; + mcreate: string | boolean = false; + medit: string | boolean = false; + mdelete; + showdata; + error; + modaldelete=false; + rowSelected :any= {}; + // UI-only state + filterText: string = ''; + viewMode: 'table' | 'cards' = 'cards'; + private themeSubscription: Subscription; + constructor(private excel: ExcelService, private _fb: FormBuilder, private router: Router, private toastr:ToastrService, @@ -36,25 +44,41 @@ rowSelected :any= {}; 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); - } + + 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); - this.mcreate=this.showdata.mcreate; + if (this.showdata) { + 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 + this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false; console.log(this.medit); + } this.getData(); - - } + } + + ngOnDestroy(): void { + if (this.themeSubscription) { + this.themeSubscription.unsubscribe(); + } + } + getData(){ this.mainservice.getAll().subscribe((data) => { console.log(data); @@ -79,6 +103,23 @@ rowSelected :any= {}; }); } + // 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 @@ -129,7 +170,7 @@ rowSelected :any= {}; this.router.navigate(["../usermaintancedit/"+ id], { relativeTo: this.route }); } onDelete(row) { - this.rowSelected = row; + this.rowSelected = {...row}; // Create a copy to avoid reference issues this.modaldelete=true; } @@ -155,4 +196,4 @@ rowSelected :any= {}; } -} +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html index 3f73f06..d673199 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html @@ -1,319 +1,282 @@ +
            +
            2. +
          2. Security
            3. +
          3. User Maintenance
            4. +
          -

          User Maintenance

          - Add Mode
          -
          -
          -
          +
          +
          +
          +
          +

          User Maintenance

          +

          Add New User

          +
          +
          +
          -
          -
          - - -
          -
          *This field is Required
          +
          +
          + +
          +
          + + +
          +
          *This field is Required
          +
          + +
          + + +
          +
          *This field is Required
          -
          - - -
          -
          *This field is Required
          + +
          + + +
          +
          *This field is Required
          +
          * Please Follow your pattern,+91 Enter 10 digit Mobile Number.
          -
          - - -
          -
          *This field is Required
          -
          * Please Follow your pattern,+91 Enter 10 digit Mobile Number. -
          -
          + +
          + + +
          +
          *This field is Required
          +
          *Email must be a valid email address
          -
          - - -
          -
          *Password is required
          -
          * Password must be at least 6 characters
          -
          + +
          + + +
          +
          *Password is required
          +
          * Password must be at least 6 characters
          -
          - - -
          -
          * Confirm Password is required
          -
          * Password and Confirm Password must be match.
          -
          + +
          + + +
          +
          * Confirm Password is required
          +
          * Password and Confirm Password must be match.
          - - - -
          - - -
          -
          *This field is Required
          -
          -
          - - -
          - - -
          -
          *This field is Required
          - -
          *Email must be a valid email address
          +
          +
          + +
          + + +
          + +
          +
          -
          -
          -
          - - -
          -
          *This field is Required
          -
          -
          - - -
          - - - -
          - - + + +

          Select From List:

          +
          +
          +
          +
          + + + Loading ... + + + + No + + + + + Customer Code + + + + + Customer Id + + + + + Customer Name + + - -

          Select From List:

          -
          -
          -
          - -
          -
          + + {{i+1}} + {{user.customerCode}} + {{user.customerId}} + {{user.customerName}} - - Loading ... - - No - - - Customer Code - - - Customer Id - + + + + + + + + + + + + + + + + + + +
          No{{user.id}}
          Customer Code{{user.customerCode}}
          Customer Id{{user.customerId}}
          Customer Name{{user.customerName}}
          +           +           - - - Customer Name - - + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + + +
          +           - - {{i+1}} - {{user.customerCode}} - {{user.customerId}} - {{user.customerName}} - - - - - - - - - - - - - - - - - - -
          NO{{user.id}}
          Customer Code{{user.customerCode}}
          Customer Id{{user.customerId}}
          Customer Name - {{user.customerName}}
          -           -           - - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -           + + +

          Select From List:

          +
          +
          +
          +
          - +
          - -

          Select From List:

          -
          -
          -
          - -
          -
          - - - - Loading ... - - No - - - Department Code - - - - {{i+1}} - {{user.departmentCode}} - - - - - - - - - - -
          NO{{user.id}}
          -           -           - - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -           + + + Loading ... + + + + No + + + + + Department Code + + + + {{i+1}} + {{user.departmentCode}} + + + + + + +
          No{{user.id}}
          +           +           + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + +           +
          +           + + +

          Select From List:

          +
          +
          +
          +
          - +
          - -

          Select From List:

          -
          -
          -
          - -
          -
          + + + Loading ... + + + + No + + + + + Position Code + + + + {{i+1}} + {{user.positionCode}} - - Loading ... - - No - - - Position Code - + + + + + + +
          No{{user.id}}
          +           +           - - {{i+1}} - {{user.positionCode}} - - - - - - - - - - -
          NO{{user.id}}
          -           -           - - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -           - - - - -
          -           + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + + +
          +           \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss index c871274..e182a11 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss @@ -1,4 +1,6 @@ @import '../../../../../styles1.scss'; +@import '../../../../../styles/_design-tokens.scss'; + input.ng-invalid.ng-touched { border-color: red; } @@ -6,3 +8,383 @@ 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%; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts index a7522e4..d1f3388 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts @@ -4,6 +4,9 @@ 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', @@ -12,51 +15,63 @@ import { UsermaintanceService } from '../../../../services/admin/usermaintance.s }) export class UsermaintanceaddComponent implements OnInit { public entryForm: FormGroup; - customer:boolean=false; - department:boolean=false; - position:boolean=false; + customer: boolean = false; + department: boolean = false; + position: boolean = false; custdata: any; loading = false; - clickedID:number; + clickedID: number; custiddata: any; - userobjcust={ - customerName:'', - customerCode:'', + userobjcust = { + customerName: '', + customerCode: '', } departmentdata: any; positiondata: any; deptiddata: any; - userobjdept={ - departmentCode:'', + userobjdept = { + departmentCode: '', } - userobjpos={ - positionCode:'', + userobjpos = { + positionCode: '', } posiddata: any; usergrpdata; accessdata; error; - submitted=false; + submitted = false; + private themeSubscription: Subscription; - constructor( private _fb: FormBuilder, - private mainservice:UsermaintanceService, - private router: Router,private accesstype:AccesstypeService, + constructor(private _fb: FormBuilder, + private mainservice: UsermaintanceService, + private router: Router, private accesstype: AccesstypeService, private route: ActivatedRoute, - private usergrpservice: UsergrpmaintainceService - ) { } + private usergrpservice: UsergrpmaintainceService, + private translate: TranslateService, + private themeService: ThemeService, + ) { } + switchLanguage(language: string) { + this.translate.use(language); + } + ngOnInit(): void { + this.themeSubscription = this.themeService.currentTheme$.subscribe(() => { + // Theme changes will automatically update CSS variables + // This triggers a re-render of themed elements + }); + this.entryForm = this._fb.group({ - first_name :['',[Validators.required]], - last_name:['',[Validators.required]], - email:['',[Validators.required,Validators.email]], - mob_no:['',[Validators.required]], - new_password:['',[Validators.required,Validators.minLength(6)]], - confirm_password:['',[Validators.required]], - usrGrpId:['',[Validators.required]], - account_id:1, - accesstype:['',[Validators.required]], - // status:[null], + first_name: ['', [Validators.required]], + last_name: ['', [Validators.required]], + email: ['', [Validators.required, Validators.email]], + mob_no: ['', [Validators.required]], + new_password: ['', [Validators.required, Validators.minLength(6)]], + confirm_password: ['', [Validators.required]], + usrGrpId: ['', [Validators.required]], + account_id: 1, + accesstype: ['', [Validators.required]], + // status:[null], // username:[null] , // userPassw:[null] , // confirmPassword:[null], @@ -72,31 +87,38 @@ export class UsermaintanceaddComponent implements OnInit { // notification:[null], //departmentCode: this._fb.array([this.department()]), - // positionCode: this._fb.array([this.position()]), + // positionCode: this._fb.array([this.position()]), //usrGrp: this._fb.array([this.user()]), - }, { - validator: ConfirmedValidator('new_password', 'confirm_password') - }); - this.usergrp(); - this.getdata(); + }, { + validator: ConfirmedValidator('new_password', 'confirm_password') + }); + 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){ - this.error="No data Available"; + if (this.accessdata.length == 0) { + this.error = "No data Available"; console.log(this.error) } - },(error) => { - console.log(error); - if(error){ - this.error="Server Error"; - } - }) + }, (error) => { + console.log(error); + if (error) { + this.error = "Server Error"; + } + }) } - usergrp(){ + usergrp() { this.usergrpservice.getAll().subscribe((data) => { console.log(data); this.usergrpdata = data; @@ -120,11 +142,11 @@ export class UsermaintanceaddComponent implements OnInit { // }); //} - onSubmit(){ - this.submitted=true - if (this.entryForm.invalid) { - return; - } + onSubmit() { + this.submitted = true + if (this.entryForm.invalid) { + return; + } console.log(this.entryForm.value); this.mainservice.create(this.entryForm.value).subscribe(data => { console.log(data) @@ -136,63 +158,63 @@ export class UsermaintanceaddComponent implements OnInit { this.router.navigate(["../usermaintance"], { relativeTo: this.route }); } -goback(){ - this.router.navigate(["../usermaintance"], { relativeTo: this.route }); -} - gotodepartmet(){ - this.department=!this.department; - this.mainservice.getalldepartment().subscribe((data)=>{ - console.log(data); - this.departmentdata=data; - }); - } - getdepid(id:number){ - this.clickedID=id; - console.log("clicked by id"+ id); - this.mainservice.getbydepartmentid(id).subscribe((data) => { - console.log(data); - this.deptiddata= data; - // this.userObj= this.custiddata; - this.userobjdept =this.deptiddata; - - - }); - this.department=false; - } - gotoposition(){ - this.position=!this.position; - this.mainservice.getallposition().subscribe((data)=>{ - console.log(data); - this.positiondata=data; - }) - } - getposid(id:number){ - this.clickedID=id; - console.log("clicked by id"+ id); - this.mainservice.getbypositionid(id).subscribe((data) => { - console.log(data); - this.posiddata= data; - // this.userObj= this.custiddata; - this.userobjpos =this.posiddata; - - - }); - this.position=false; - } - - -} -export function ConfirmedValidator(controlName: string, matchingControlName: string){ - return (formGroup: FormGroup) => { - const control = formGroup.controls[controlName]; - const matchingControl = formGroup.controls[matchingControlName]; - if (matchingControl.errors && !matchingControl.errors.confirmedValidator) { - return; - } - if (control.value !== matchingControl.value) { - matchingControl.setErrors({ confirmedValidator: true }); - } else { - matchingControl.setErrors(null); - } + goback() { + this.router.navigate(["../usermaintance"], { relativeTo: this.route }); } + gotodepartmet() { + this.department = !this.department; + this.mainservice.getalldepartment().subscribe((data) => { + console.log(data); + this.departmentdata = data; + }); + } + getdepid(id: number) { + this.clickedID = id; + console.log("clicked by id" + id); + this.mainservice.getbydepartmentid(id).subscribe((data) => { + console.log(data); + this.deptiddata = data; + // this.userObj= this.custiddata; + this.userobjdept = this.deptiddata; + + + }); + this.department = false; + } + gotoposition() { + this.position = !this.position; + this.mainservice.getallposition().subscribe((data) => { + console.log(data); + this.positiondata = data; + }) + } + getposid(id: number) { + this.clickedID = id; + console.log("clicked by id" + id); + this.mainservice.getbypositionid(id).subscribe((data) => { + console.log(data); + this.posiddata = data; + // this.userObj= this.custiddata; + this.userobjpos = this.posiddata; + + + }); + this.position = false; + } + + } +export function ConfirmedValidator(controlName: string, matchingControlName: string) { + return (formGroup: FormGroup) => { + const control = formGroup.controls[controlName]; + const matchingControl = formGroup.controls[matchingControlName]; + if (matchingControl.errors && !matchingControl.errors.confirmedValidator) { + return; + } + if (control.value !== matchingControl.value) { + matchingControl.setErrors({ confirmedValidator: true }); + } else { + matchingControl.setErrors(null); + } + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html index 64d92fe..e2721fe 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html @@ -1,348 +1,249 @@ +
            +
            2. +
          2. Security
            3. +
          3. User Maintenance
            4. +
          -

          User Maintenance

          - Edit Mode
          -
          -
          -
          -
          -
          - - -
          -
          - - -
          -
          - - -
          -
          - - -
          +
          +
          +
          +
          +

          User Maintenance

          +

          Edit User

          +
          +
          +
          - - - -
          - - -
          - - -
          - - -
          -
          - - -
          - +
          +
          + +
          +
          + + +
          -
          - - +
          + + +
          -
          - - +
          + + +
          +
          + +
          + + +
          + +
          +
          + + + +

          Select From List:

          +
          +
          +
          +
          - -

          Select From List:

          -
          -
          -
          - -
          -
          + + + Loading ... + + + + No + + + + + Customer Code + + + + + Customer Id + + + + + Customer Name + + - - Loading ... - - No - - - Customer Code - - - Customer Id - + + {{i+1}} + {{user.customerCode}} + {{user.customerId}} + {{user.customerName}} - - - Customer Name - - + + + + + + + + + + + + + + + + + + +
          No{{user.id}}
          Customer Code{{user.customerCode}}
          Customer Id{{user.customerId}}
          Customer Name{{user.customerName}}
          +           +           - - {{i+1}} - {{user.customerCode}} - {{user.customerId}} - {{user.customerName}} + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + +           +
          +           - - - - - - - - - - - - - - - - - -
          NO{{user.id}}
          Customer Code{{user.customerCode}}
          Customer Id{{user.customerId}}
          Customer Name - {{user.customerName}}
          -           - - - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - - + + +

          Select From List:

          +
          +
          +
          +
          - +
          - -

          Select From List:

          -
          -
          -
          - -
          -
          - - - - Loading ... - - No - - - Department Code - - - - {{i+1}} - {{user.departmentCode}} - - - - - - - - - - -
          NO{{user.id}}
          -           -           - - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -           + + + Loading ... + + + + No + + + + + Department Code + + + + {{i+1}} + {{user.departmentCode}} + + + + + + +
          No{{user.id}}
          +           +           + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + +           +
          +           + + +

          Select From List:

          +
          +
          +
          +
          - - -

          Select From List:

          -
          -
          -
          - -
          -
          +
          + + + Loading ... + + + + No + + + + + Position Code + + - - Loading ... - - No - - - Position Code - + + {{i+1}} + {{user.positionCode}} - - {{i+1}} - {{user.positionCode}} + + + + + + +
          No{{user.id}}
          +           +           - - - - - - - - - -
          NO{{user.id}}
          -           -           - - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -           - - - - -
          - + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + + +
          +           \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss index 36abb8c..66585f8 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss @@ -1 +1,375 @@ @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%; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts index 2f33378..533fc95 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts @@ -3,7 +3,9 @@ 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 { Usermain } from 'src/app/models/usermaintaince'; +import { TranslateService } from '@ngx-translate/core'; +import { ThemeService } from 'src/app/services/theme.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-usermaintanceedit', @@ -11,40 +13,52 @@ import { UsermaintanceService } from '../../../../services/admin/usermaintance.s styleUrls: ['./usermaintanceedit.component.scss'] }) export class UsermaintanceeditComponent implements OnInit { - id:number; - data1:any={}; - customer:boolean=false; + id: number; + data1: any = {}; + customer: boolean = false; custdata: any; - clickedID:number; + clickedID: number; custiddata: any; loading = false; - userobjcust={ - customerName:'', - customerCode:'', + userobjcust = { + customerName: '', + customerCode: '', } accessdata; - department:boolean=false; + department: boolean = false; departmentdata: any; positiondata: any; deptiddata: any; - userobjdept={ - departmentCode:'', + userobjdept = { + departmentCode: '', } - userobjpos={ - positionCode:'', + userobjpos = { + positionCode: '', } posiddata: any; - position:boolean=false; + position: boolean = false; usergrpdata; error; - constructor(private route:ActivatedRoute, - private mainservice:UsermaintanceService, - private router: Router,private accesstype:AccesstypeService, - private usergrpservice: UsergrpmaintainceService + private themeSubscription: Subscription; - ) { } + 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); @@ -52,82 +66,89 @@ 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){ - this.error="No data Available"; + if (this.accessdata.length == 0) { + this.error = "No data Available"; console.log(this.error) } - },(error) => { - console.log(error); - if(error){ - this.error="Server Error"; - } - }) + }, (error) => { + console.log(error); + if (error) { + this.error = "Server Error"; + } + }) } - usergrp(){ + usergrp() { this.usergrpservice.getAll().subscribe((data) => { console.log(data); this.usergrpdata = data; }); } -getById(id:number){ -this.mainservice.getbyid(id).subscribe((data)=>{ - this.data1=data; - // this.data1=this.data3; - console.log(this.data1); -}); -} -update(){ - console.log(this.data1); - this.mainservice.updatenew(this.id,this.data1).subscribe((data)=>{ -console.log(data); - }); - -} -goback(){ - this.router.navigate(["../../usermaintance"], { relativeTo: this.route }); -} - gotodepartmet(){ - this.department=!this.department; - this.mainservice.getalldepartment().subscribe((data)=>{ - console.log(data); - this.departmentdata=data; + getById(id: number) { + this.mainservice.getbyid(id).subscribe((data) => { + this.data1 = data; + // this.data1=this.data3; + console.log(this.data1); }); } - getdepid(id:number){ - this.clickedID=id; - console.log("clicked by id"+ id); + update() { + console.log(this.data1); + this.mainservice.updatenew(this.id, this.data1).subscribe((data) => { + console.log(data); + }); + + } + goback() { + this.router.navigate(["../../usermaintance"], { relativeTo: this.route }); + } + gotodepartmet() { + this.department = !this.department; + this.mainservice.getalldepartment().subscribe((data) => { + console.log(data); + this.departmentdata = data; + }); + } + getdepid(id: number) { + this.clickedID = id; + console.log("clicked by id" + id); this.mainservice.getbydepartmentid(id).subscribe((data) => { console.log(data); - this.deptiddata= data; - // this.userObj= this.custiddata; - this.userobjdept =this.deptiddata; + this.deptiddata = data; + // this.userObj= this.custiddata; + this.userobjdept = this.deptiddata; - }); - this.department=false; + }); + this.department = false; } - gotoposition(){ - this.position=!this.position; - this.mainservice.getallposition().subscribe((data)=>{ + gotoposition() { + this.position = !this.position; + this.mainservice.getallposition().subscribe((data) => { console.log(data); - this.positiondata=data; + this.positiondata = data; }) } - getposid(id:number){ - this.clickedID=id; - console.log("clicked by id"+ id); + getposid(id: number) { + this.clickedID = id; + console.log("clicked by id" + id); this.mainservice.getbypositionid(id).subscribe((data) => { console.log(data); - this.posiddata= data; - // this.userObj= this.custiddata; - this.userobjpos =this.posiddata; + this.posiddata = data; + // this.userObj= this.custiddata; + this.userobjpos = this.posiddata; - }); - this.position=false; + }); + this.position = false; } -} +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html index 30fdb9f..ee798b2 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html @@ -1,4 +1,4 @@ -
            +
            1. @@ -8,236 +8,400 @@ {{ 'SEQ_GENERATOR' | translate }}
              2. -
            -
            -
            -
            -

            {{ 'SEQ_GENERATOR' | translate }}

            -
            - -
            - - -
            +
            +
            +
            +
            +

            {{ 'SEQ_GENERATOR' | translate }}

            +

            {{ 'FND' | translate }}

            +
            +
            + + +
            +
            - - - - Loading ... - -
            {{error}}
            -             - - - {{ 'CURRENT_NO' | translate }} - - - - - {{ 'NAME' | translate }} - - - - - {{ 'PREFIX' | translate }} - - +
            +
            +
            +
            + + +
            +
            +
            +
            +
            {{ totalSequences }}
            +
            {{ 'TOTAL_SEQUENCES' | translate }}
            +
            +
            + + +
            +
            +
            - - - {{ 'SEPARATOR' | translate }} - - + + + + {{ 'LOADING' | translate }} ... + +
            {{error}}
            +             + + + + + {{ 'CURRENT_NO' | translate }} + + + + + + + + {{ 'NAME' | translate }} + + + + + + + + {{ 'PREFIX' | translate }} + + + - - - {{ 'SEQUENCE_SIZE' | translate }} - - - - - {{user.current_no}} - {{user.sequence_name}} - {{user.prefix}} - {{user.seperator}} - {{user.sequence_size}} - - - - - + + + + {{ 'SEPARATOR' | translate }} + + + + + + + {{ 'SEQUENCE_SIZE' | translate }} + + + + + + + + {{ 'SUFFIX' | translate }} + + + + + + + + {{ 'STARTING_NO' | translate }} + + + + + + + + {{ 'SEQUENCE_CODE' | translate }} + + + + + + {{user.current_no}} + {{user.sequence_name}} + {{user.prefix}} + {{user.seperator}} + {{user.sequence_size}} + {{user.suffix}} + {{user.starting_no}} + {{user.sequence_code}} + + + + + - + + + + {{ 'RECORDS_PER_PAGE' | translate }} + + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + {{ 'OF' | translate }} {{pagination.totalItems}} {{ 'RECORDS' | translate }} + + +             - - - {{ 'USERS_PER_PAGE' | translate - }} - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users - - - +
            +
            +
            +
            +
            {{user.sequence_name}}
            +
            {{user.current_no}}
            +
            +
            +
            {{ 'PREFIX' | translate }}{{user.prefix}}
            +
            {{ 'SEPARATOR' | translate }}{{user.seperator}}
            +
            {{ 'SEQUENCE_SIZE' | translate }}{{user.sequence_size}}
            +
            {{ 'SUFFIX' | translate }}{{user.suffix}}
            +
            {{ 'STARTING_NO' | translate }}{{user.starting_no}}
            +
            {{ 'SEQUENCE_CODE' | translate }}{{user.sequence_code}}
            +
            {{ 'DEMONSTRATION' | translate }}{{user.demonstration}}
            +
            +
            + + +
            +
            +
            - + +
            +
            +
            + +
            +

            {{ 'ARE_YOU_SURE_WANT_TO_DELETE' | translate }}?

            +

            {{ 'THIS_ACTION_CANNOT_BE_UNDONE' | translate }}

            +
            +
            +
            + {{ 'SEQUENCE_ID' | translate }}: + {{rowSelected.id}} +
            +
            + {{ 'SEQUENCE_NAME' | translate }}: + {{rowSelected.sequence_name}} +
            +
            +
            + + +
            +
            +             -
            -

            Are You Sure Want to delete?

            -

            {{rowSelected.id}}

            -
            - - + +

            + {{ 'ADD_SEQUENCE_GENERATOR' | translate }} +

            +
            +
            +
            +
            + + +
            +
            + {{ 'THIS_FIELD_IS_REQUIRED' | translate }} +
            +
            -
            + +
            + + +
            + +
            + + +
            + +
            + + +
            +
            + {{ 'THIS_FIELD_IS_REQUIRED' | translate }} +
            +
            +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            +
            + +
            + + +
            + +
            - - -

            Add Sequence Genarator

            -
            -
            -
            -
            - - -
            -
            - - -
            - -
            - - -
            - - -
            - - -
            -
            - - -
            -
            - - -
            -
            - - -
            -
            - - -
            - -
            - - -
            - -
            -
            -
            - - -
            -
            + +

            + {{ 'UPDATE_SEQUENCE_GENERATOR' | translate }} +

            +
            +
            + {{ 'SEQUENCE_ID' | translate }}: {{rowSelected.id}}
            - - - - -

            Update Sequence Genarator

            -
            -

            {{rowSelected.id}}

            -
            -
            -
            - - -
            -
            - - -
            - - - -
            - - -
            -
            - - -
            -
            - - -
            -
            - - -
            -
            - - -
            -
            - - -
            -
            - - -
            -
            -
            -
            - - -
            -
            -
            - + +
            +
            +
            + + +
            + {{ 'THIS_FIELD_IS_REQUIRED' | translate }} +
            +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            + {{ 'THIS_FIELD_IS_REQUIRED' | translate }} +
            +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            + +
            + + +
            +
            + +
            + + +
            +
            +
            \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss index 52f40a2..6ac473d 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss @@ -1,72 +1,694 @@ -input[type=text],[type=number], -[type=date], -[type=password] { +@import '../../../../../styles/_design-tokens.scss'; + +// Sequence Generator Styles +.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: 15px 20px; - // margin: 3px 0; - background-color: rgb(255, 255, 255); - display: inline-block; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; + 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); + } + } +} + +.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: red; - font-size: 18px; + color: var(--theme-error, #ef4444); + margin-left: 4px; } -.green { - background-color: rgb(156, 231, 156); - color: black; +.sq-form-help { + color: var(--theme-text-secondary); + font-size: 12px; + margin-bottom: 16px; + font-family: var(--theme-font-primary); } -.blue { - background-color: #57abcf; //rgb(82, 87, 161); - color: black; +.sq-form-actions { + display: flex; + gap: 12px; + margin-top: 24px; + padding-top: 24px; + border-top: 1px solid rgba(0, 0, 0, 0.05); } -.td-title { - text-align: center; - width: 150px; +// Modern Button Styles using ThemeService +.sq-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 + &.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; - font-weight: bold; - background-color: rgba(63, 122, 231, 0.863); - //color: rgb(24, 13, 13); + 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); + } + } + + &.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); + } + } } -th { - //background-color:rgb(170, 169, 169); - font-weight: bold; +// Action items in datagrid +.sq-action-item { + @extend .sq-btn; + @extend .sq-btn-ghost; + @extend .sq-btn-sm; + width: 100%; + justify-content: flex-start; + margin-bottom: 4px; + text-align: left; + + clr-icon { + width: 16px; + height: 16px; + margin-right: 8px; + } + + &.sq-btn-error { + color: var(--theme-error, #ef4444); + + &:hover { + background: rgba(239, 68, 68, 0.1); + color: var(--theme-error, #ef4444); + } + } } -.td-content { - text-align: left; +// Delete Modal Styles +.sq-delete-header { + text-align: center; + padding: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } -.delete, -.heading { +.sq-delete-icon { + color: var(--theme-error, #ef4444); + margin-bottom: 16px; +} + +.sq-delete-title { + 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; - color: red; -} - -.section p { - background-color: rgb(206, 201, 201); - padding: 10px; - font-size: 18px; -} - -select { + + &__content { + flex-direction: column; + text-align: center; + } + + &__actions { + width: 100%; + justify-content: center; + } + } + + .sq-toolbar { + flex-direction: column; + gap: 16px; + } + + .sq-search { + max-width: 100%; + } + + .sq-stats { + flex-direction: column; width: 100%; - padding: 5px 5px; - border: 1px solid #ccc; - border-radius: 4px; -} - -input.ng-invalid.ng-touched { - border-color: red; -} - -.error_mess { - color: red; + } + + .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; + } } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts index a9dea2a..e826e2a 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts @@ -1,11 +1,13 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormGroup, Validators } 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', @@ -22,27 +24,70 @@ 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, - private route: ActivatedRoute, private excel: ExcelService) { } + + constructor( + 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], + prefix: [null, Validators.required], sequence_size: [null], suffix: [null], starting_no: [null], seperator: [null], - - sequence_name: [null], + sequence_name: [null, Validators.required], 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); @@ -57,27 +102,8 @@ 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); @@ -86,10 +112,8 @@ export class SequencegenaratorComponent implements OnInit { return } this.onCreate(); - } - onCreate() { this.modaladd = false; this.seqservice.create(this.entryForm.value).subscribe( @@ -115,22 +139,24 @@ export class SequencegenaratorComponent implements OnInit { }); } - goToAdd() { this.modaladd = true; - + this.submitted = false; + // Reset form + this.entryForm.reset(); } onExport() { - this.excel.exportAsExcelFile(this.alldata, 'user_', + this.excel.exportAsExcelFile(this.alldata, 'sequence_', moment().format('YYYYMMDD_HHmmss')) } goToEdit(row) { - this.rowSelected = row; + this.rowSelected = { ...row }; // Create a copy to avoid direct binding issues console.log(row) this.modaledit = true; } + onDelete(row) { this.rowSelected = row; this.modaldelete = true; @@ -161,8 +187,8 @@ export class SequencegenaratorComponent implements OnInit { this.ngOnInit(); } }); - } + onUpdate(id) { this.modaledit = false; this.seqservice.update(id, this.rowSelected).subscribe((data) => { @@ -187,4 +213,4 @@ export class SequencegenaratorComponent implements OnInit { } }); } -} +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html index 8883c9d..1246ebd 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html @@ -1,144 +1,227 @@ - - -
            - - -
            - -
            - - {{ sysparameter?.company_Display_Name }} - - - CloudnSure - + + +
            + +
            +
            + Logo +
            +
            +
            +
            + + {{ sysparameter?.company_Display_Name }} + Enterprise Platform + + + CloudnSure + Enterprise Platform + +
            -
            - - +
            + +
            + + Dashboard +
            - - + +
            + + Reports +
            - - + +
            + + Files +
            - - - + +
            + + Settings +
            +             + + +
            + + Theme Customization +
            +
            - - - - -
            - - - - - About - Profile Settings - + +
            + +
            - - - - - - English + + + + English +
            🇺🇸
             - - Hindi + + + हिन्दी +
            🇮🇳
             - - Tamil + + + தமிழ் +
            🇮🇳
             - - Punjabi + + + ਪੰਜਾਬੀ +
            🇮🇳
             - - Malayalam + + + മലയാളം +
            🇮🇳
                         - - Change Password - Log out +
            + + + + Change Password + + + + Log out +
            -
            -
            - +
            +
            +
            + +
            - + - - - - + - - - - - - - + - @@ -215,18 +298,18 @@
            -
            +
            - +
            - +
            - + \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss index 77f629a..3afe935 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss @@ -1,3 +1,10 @@ +// ======================================== +// 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; @@ -7,6 +14,680 @@ 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; diff --git a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts index 7747324..4619158 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts +++ b/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 { Router,ActivatedRoute } from '@angular/router'; -import { LoginService } from '../../../services/api/login.service'; -import { UserInfoService} from '../../../services/user-info.service'; +import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; +import { LoginService } from '../../../services/api/login.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,6 +20,7 @@ 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', @@ -28,51 +29,52 @@ import { TranslateService } from '@ngx-translate/core'; }) export class LayoutComponent implements OnInit { // baseUrl= environment.chaturl; - @Input() data:any; + @Input() data: any; loading = false; apps: Array = []; projectsetup; collapsed = true; - public showAppAlert:boolean = false; -modalteam=false; - public userName: string=""; + public showAppAlert: boolean = false; + modalteam = false; + public userName: string = ""; + + private formCode: string = 'teacher_form'; + public key: string = "formCode"; + public storage: Storage = sessionStorage; - private formCode: string ='teacher_form'; - public key:string="formCode"; - 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, - ) { + ) { this.translate.setDefaultLang('en'); - this.userName = this.userInfoService.getUserName(); - this.reportBuilderService.getrbDetails().subscribe((data) => { + this.userName = this.userInfoService.getUserName(); + this.reportBuilderService.getrbDetails().subscribe((data) => { this.gridData = data; }); } - + switchLanguage(language: string): void { this.translate.use(language); // Switch to the selected language } - user_name : any; - userrole:any; + user_name: any; + userrole: any; menus: Rn_Main_Menu[]; - menu:any; + menu: any; tourdata; steps; error; @@ -80,89 +82,89 @@ modalteam=false; 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(); - console.log('user_role',this.userrole); - this.udata=this.userInfoService.getUserId(); - console.log('user id',this.udata); + this.userrole = this.userInfoService.getRoles(); + console.log('user_role', this.userrole); + this.udata = this.userInfoService.getUserId(); + console.log('user id', this.udata); this.loadMenuByAccountId(); this.loadMenuByMenuGroup(); this.getById(1); -// this.tourservice.getall().subscribe((data)=>{ -// this.tourdata=data[1]; -// //console.log("tour data",data); -// console.log(this.tourdata); -// //console.log(this.tourdata.tourId); -// //console.log(this.tourdata.useOrb); -// //this.steps=JSON.stringify(this.tourdata.steps); -// // console.log(this.tourdata.steps); -// //this.dashboardTour.tourId=this.tourdata.tourId; -// //console.log(this.dashboardTour.tourId); -// //this.dashboardTour.useOrb=this.tourdata.useOrb; -// // this.dashboardTour.steps=this.tourdata.steps; -// }); -} - - - - -showFolderNames: boolean = false; // Variable to control the report names display -reportNames: any[] = []; // Store the report names - -// getName() { -// this.reportBuilderService.getrbDetails().pipe( -// map((data) => data.map((item) => item.folderName)) -// ).subscribe((reportName) => { -// this.reportNames = reportName; -// // this.showReportNames = true; // Toggle on -// console.log('Report Names:', this.reportNames); -// }); - -// } - - -getName() { - if (this.showFolderNames) { - // If in report mode, switch to default mode - this.showFolderNames = false; - } else { - // If in default mode, switch to report mode - this.reportBuilderService.getrbDetails().pipe( - map((data) => data.map((item) => item.folderName)) - ).subscribe( - (folderName) => { - this.reportNames = folderName; - console.log('Report Names:', this.reportNames); - this.showFolderNames = true; - },); + // this.tourservice.getall().subscribe((data)=>{ + // this.tourdata=data[1]; + // //console.log("tour data",data); + // console.log(this.tourdata); + // //console.log(this.tourdata.tourId); + // //console.log(this.tourdata.useOrb); + // //this.steps=JSON.stringify(this.tourdata.steps); + // // console.log(this.tourdata.steps); + // //this.dashboardTour.tourId=this.tourdata.tourId; + // //console.log(this.dashboardTour.tourId); + // //this.dashboardTour.useOrb=this.tourdata.useOrb; + // // this.dashboardTour.steps=this.tourdata.steps; + // }); } -} -filteredGridData: any[] = []; -gridData: any[] = []; -// Function to filter the data based on the selected folder -filterGridDataByFolder(folderName: string) { - this.filteredGridData = this.gridData.filter(item => item.folderName === folderName); -} -showDashNames: boolean = false; -dashNames: any[] = []; -getDashName() { - if (this.showDashNames) { - // If in report mode, switch to default mode - this.showDashNames = false; - } else { - // If in default mode, switch to report mode - this.dashboardService.getAllDash().pipe( - map((data) => data.map((item) => item.dashboard_name)) - ).subscribe( - (dashboard_name) => { - this.dashNames = dashboard_name; - console.log('Dashboard Names:', this.dashNames); - // this.showFolderNames = true; - this.showDashNames = true; - },); + + + showFolderNames: boolean = false; // Variable to control the report names display + reportNames: any[] = []; // Store the report names + + // getName() { + // this.reportBuilderService.getrbDetails().pipe( + // map((data) => data.map((item) => item.folderName)) + // ).subscribe((reportName) => { + // this.reportNames = reportName; + // // this.showReportNames = true; // Toggle on + // console.log('Report Names:', this.reportNames); + // }); + + // } + + + getName() { + if (this.showFolderNames) { + // If in report mode, switch to default mode + this.showFolderNames = false; + } else { + // If in default mode, switch to report mode + this.reportBuilderService.getrbDetails().pipe( + map((data) => data.map((item) => item.folderName)) + ).subscribe( + (folderName) => { + this.reportNames = folderName; + console.log('Report Names:', this.reportNames); + this.showFolderNames = true; + },); + } + } + + filteredGridData: any[] = []; + gridData: any[] = []; + // Function to filter the data based on the selected folder + filterGridDataByFolder(folderName: string) { + this.filteredGridData = this.gridData.filter(item => item.folderName === folderName); + } + + showDashNames: boolean = false; + dashNames: any[] = []; + getDashName() { + if (this.showDashNames) { + // If in report mode, switch to default mode + this.showDashNames = false; + } else { + // If in default mode, switch to report mode + this.dashboardService.getAllDash().pipe( + map((data) => data.map((item) => item.dashboard_name)) + ).subscribe( + (dashboard_name) => { + this.dashNames = dashboard_name; + console.log('Dashboard Names:', this.dashNames); + // this.showFolderNames = true; + this.showDashNames = true; + },); + } } -} @@ -170,11 +172,11 @@ getDashName() { -showSetupMenus: boolean = false; -toggleSetupMenus() { - this.showSetupMenus = !this.showSetupMenus; + showSetupMenus: boolean = false; + toggleSetupMenus() { + this.showSetupMenus = !this.showSetupMenus; -} + } @@ -183,74 +185,74 @@ toggleSetupMenus() { -// side nav menu-sub_menu -loadMenuByAccountId() { - this.realnetMenuService.getByAccountId().subscribe(resp => { - this.menus = resp; - console.log('menu: ', this.menus); - }); -} + // side nav menu-sub_menu + loadMenuByAccountId() { + this.realnetMenuService.getByAccountId().subscribe(resp => { + this.menus = resp; + console.log('menu: ', this.menus); + }); + } -loadMenuByMenuGroup() { - this.menuGroupService.getByCurrentUserMenuGroupId2().subscribe(resp => { + loadMenuByMenuGroup() { + this.menuGroupService.getByCurrentUserMenuGroupId2().subscribe(resp => { this.menus = resp; console.log('menus: ', this.menus); - },(error) => { - console.log(error); - if(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; -getById(id: number) { - this.sysparaservice.getById(id).subscribe((data) => { + }, (error) => { + console.log(error); + if (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; + 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); - } - ); -} + (err) => { + console.log(err); + } + ); + } -/* menuGroup: Rn_Menu_Group_Header[]; -menu_id: number; -loadMenuGroupData() { - this.menuGroupService.getAll().subscribe(resp => { - this.menuGroup = resp; - this.menu_id = this.menuGroup - }); -} */ + /* menuGroup: Rn_Menu_Group_Header[]; + menu_id: number; + loadMenuGroupData() { + this.menuGroupService.getAll().subscribe(resp => { + this.menuGroup = resp; + this.menu_id = this.menuGroup + }); + } */ -navbarSelectionChange(val){ - // console.log(val); -} + navbarSelectionChange(val) { + // console.log(val); + } -closeAppAlert(){ - this.showAppAlert=false; -} + closeAppAlert() { + this.showAppAlert = false; + } -isDisabled(input: string): boolean{ - if(input === null) { + isDisabled(input: string): boolean { + if (input === null) { return true; - } else false; -} + } else false; + } onLogout() { - this.userInfoService.logout().subscribe((data)=>{ + this.userInfoService.logout().subscribe((data) => { console.log(data); }); sessionStorage.clear(); @@ -260,32 +262,32 @@ isDisabled(input: string): boolean{ menuFlag1 = false; udata; uid; - message(){ + message() { //this.menuFlag = false; - // this.menuFlag1 = true; -// this.menuGroupService.getuser(this.udata).subscribe((data)=>{ -// console.log(data); -// }) -// window.open(`${this.baseUrl}`) - //window.location.href = `${this.baseUrl}`; - //this.udata=this.userInfoService.getUserInfo(); - //console.log(this.udata); + // this.menuFlag1 = true; + // this.menuGroupService.getuser(this.udata).subscribe((data)=>{ + // console.log(data); + // }) + // 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; - localStorage.setItem("id", JSON.stringify(this.udata)); - //localStorage.setItem('id', this.uid); - //window.location.href = (`${this.baseUrl}/` + this.udata), true - //this.router.navigate([`${this.baseUrl}`], { relativeTo: this.route ,queryParams: { id: this.udata }}); + 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 + //this.router.navigate([`${this.baseUrl}`], { relativeTo: this.route ,queryParams: { id: this.udata }}); - //this.router.navigate(["../sureboard"],{relativeTo: this.route, queryParams: { userid: this.udata }}); + //this.router.navigate(["../sureboard"],{relativeTo: this.route, queryParams: { userid: this.udata }}); //this.router.navigate([`${this.baseUrl}`],{relativeTo: this.route, queryParams: { userid: this.udata }}); //this.udata = this.userInfoService.getUserInfo(); //this.userInfoService.storeUserInfo(JSON.stringify(this.udata.user)); }// - modaladd(){ + modaladd() { //this.modalteam=true; this.router.navigate(['/cns-portal/myworkspace']); } @@ -293,17 +295,17 @@ isDisabled(input: string): boolean{ me; md; mv; - send(val){ + send(val) { console.log(val); this.menuGroupService.storeaddeditvalues(val); -this.mc=val.mcreate; -this.me=val.medit; -this.md=val.mdelete; -this.mv=val.mvisible; -if(this.mv == 'false'){ - this.router.navigate(['/**']) -} - this.router.navigate(['./'+ val.main_menu_action_name] , { relativeTo: this.route}); + this.mc = val.mcreate; + this.me = val.medit; + this.md = val.mdelete; + this.mv = val.mvisible; + if (this.mv == 'false') { + this.router.navigate(['/**']) + } + 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} } diff --git a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html index 873f882..b97a6cc 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html @@ -1,3 +1,240 @@ -
              + +
              + +
              +
              +
              +

              + Welcome to CloudnSure + Enterprise Platform +

              +

              + Your comprehensive solution for data management, reporting, and business intelligence +

              +
              + + + +
              +
              +
              +
              +
              + + Analytics +
              +
              + + Reports +
              +
              + + Settings +
              +
              +
              +
              +
              + + +
              +
              +
              +
              +
              + +
              +
              + + +12% +
              +
              +
              +
              1,234
              +
              Active Users
              +
              +
              + +
              +
              +
              + +
              +
              + + +8% +
              +
              +
              +
              567
              +
              Reports Generated
              +
              +
              + +
              +
              +
              + +
              +
              + + -3% +
              +
              +
              +
              2.4s
              +
              Avg Response Time
              +
              +
              + +
              +
              +
              + +
              +
              + + 99.9% +
              +
              +
              +
              99.9%
              +
              Uptime
              +
              +
              +
              +
              + + +
              +

              Quick Actions

              +
              + +
              + +
              +
              +

              Create Report

              +

              Build custom reports with our intuitive report builder

              +
              +
              + +
              +               + + +
              + +
              +
              +

              Import Data

              +

              Upload and process your data files quickly

              +
              +
              + +
              +               + + +
              + +
              +
              +

              System Settings

              +

              Configure your system preferences and options

              +
              +
              + +
              +               + + +
              + +
              +
              +

              Help & Support

              +

              Get help and access our knowledge base

              +
              +
              + +
              +               + + +
              + +
              +
              +

              Theme Customization

              +

              Customize colors, fonts, and appearance

              +
              +
              + +
              +               +
              +
              + + +
              +

              Recent Activity

              +
              +
              +
              +
              + +
              +
              +
              Report generated successfully
              +
              2 minutes ago
              +
              +
              + +
              +
              + +
              +
              +
              New user registered
              +
              15 minutes ago
              +
              +
              + +
              +
              + +
              +
              +
              System maintenance scheduled
              +
              1 hour ago
              +
              +
              + +
              +
              + +
              +
              +
              Data import completed
              +
              2 hours ago
              +
              +
              +
              +
              +
              +
              + + + diff --git a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss index e69de29..2bf0fc5 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss +++ b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss @@ -0,0 +1,510 @@ +// ======================================== +// 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,'); + 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); + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts index 9873121..4f82884 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { ThemeService } from '../../../services/theme.service'; @Component({ selector: 'app-main-page', @@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core'; }) export class MainPageComponent implements OnInit { - constructor() { } + constructor(private themeService: ThemeService) { } ngOnInit() { + // Initialize theme service + this.themeService.currentTheme$.subscribe(theme => { + // Theme changes will be automatically applied via CSS variables + }); } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.html b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.html new file mode 100644 index 0000000..70951d2 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.html @@ -0,0 +1,280 @@ + +
              + +
              +
              +
              +

              + + Theme Customization +

              +

              Customize your application's appearance with colors, fonts, and styles

              +
              +
              + + +
              +
              +
              + + +
              +
              + +
              +
              +

              Predefined Themes

              +
              +
              +
              +
              +
              +
              +
              Sample Text
              +
              +
              +
              +
              +

              {{ theme.name }}

              +
              +
              +
              +
              +
              +
              +
              +
              +
              + +
              + +
              +
              + + +
              +
              +
              +
              + +
              +

              Choose a Theme

              +

              Select from our predefined themes or create your own custom theme to match your brand and + preferences.

              +
              +

              Current Theme: {{ currentTheme.name }}

              +
              +
              +
              +
              +
              Sample Text +
              +
              Secondary Text
              +
              +
              +
              +
              +
              +
              + +
              + +
              +

              Customize Your Theme

              +
              + + +
              +
              + + +
              +

              + + Colors +

              +
              +
              + +
              + + +
              +
              +
              +
              +
              +
              + +
              + +
              + + +
              +
              + +
              + +
              + + +
              +
              + +
              + +
              + + +
              +
              + +
              + +
              + + +
              +
              + +
              + +
              + + +
              +
              +
              +
              + + +
              +

              + + Typography +

              +
              +
              + + +
              + The quick brown fox jumps over the lazy dog +
              +
              + +
              + + +
              + The quick brown fox jumps over the lazy dog +
              +
              + +
              + + +
              + The quick brown fox jumps over the lazy dog +
              +
              +
              +
              + + +
              +

              + + Advanced Settings +

              +
              +
              + +
              + + {{ getBorderRadiusValue() }} +
              +
              + +
              + +
              + + {{ getShadowValueNumber() }}px +
              +
              +
              +
              + + +
              +

              + + Import/Export +

              +
              +
              + + + +
              +
              +
              +
              +
              +
              +
              +
              \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.scss b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.scss new file mode 100644 index 0000000..b294bc2 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.scss @@ -0,0 +1,622 @@ +// ======================================== +// 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; + } +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.ts b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.ts new file mode 100644 index 0000000..bcc5e20 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.ts @@ -0,0 +1,246 @@ +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 = { + 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'; + } +} diff --git a/frontend/angular-clarity-master/src/app/services/api/login.service.ts b/frontend/angular-clarity-master/src/app/services/api/login.service.ts index 4b7bc44..0b1cb1a 100644 --- a/frontend/angular-clarity-master/src/app/services/api/login.service.ts +++ b/frontend/angular-clarity-master/src/app/services/api/login.service.ts @@ -48,7 +48,7 @@ export class LoginService { this.apiRequest.loginAuthentication('token/session', bodyData) .subscribe(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,7 +81,7 @@ export class LoginService { //Create a faliure object that we want to send back to login page loginInfoReturn = { "success":false, - "message":jsonResp.msgDesc, + "message":jsonResp.operationMessage, "landingPage":"/login" }; } diff --git a/frontend/angular-clarity-master/src/app/services/theme.service.ts b/frontend/angular-clarity-master/src/app/services/theme.service.ts new file mode 100644 index 0000000..b045c2e --- /dev/null +++ b/frontend/angular-clarity-master/src/app/services/theme.service.ts @@ -0,0 +1,326 @@ +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(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): void { + const currentTheme = this.getCurrentTheme(); + const updatedTheme = { + ...currentTheme, + colors: { ...currentTheme.colors, ...colors } + }; + this.applyTheme(updatedTheme); + } + + // Update theme fonts + updateThemeFonts(fonts: Partial): 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' } + ]; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/dynamic-form/dynamic-form.component.ts b/frontend/angular-clarity-master/src/app/shared/components/dynamic-form/dynamic-form.component.ts new file mode 100644 index 0000000..ee68c75 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/dynamic-form/dynamic-form.component.ts @@ -0,0 +1,89 @@ +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: ` +
              +
              +
              + +
              +
              + +
              + + +
              +
              + ` +}) +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(); + @Output() formCancel = new EventEmitter(); + + @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(); + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/base-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/base-field.component.ts new file mode 100644 index 0000000..c0ca5fc --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/base-field.component.ts @@ -0,0 +1,25 @@ +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(); + + onChange(value: any) { + this.valueChange.emit(value); + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-factory.service.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-factory.service.ts new file mode 100644 index 0000000..4cd8b23 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-factory.service.ts @@ -0,0 +1,52 @@ +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; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.module.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.module.ts new file mode 100644 index 0000000..a3138f5 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.module.ts @@ -0,0 +1,44 @@ +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 { } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.scss b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.scss new file mode 100644 index 0000000..4173f73 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.scss @@ -0,0 +1,364 @@ +// 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; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/index.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/index.ts new file mode 100644 index 0000000..c1ec2f7 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/index.ts @@ -0,0 +1,8 @@ +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'; \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/number-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/number-field.component.ts new file mode 100644 index 0000000..918e10c --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/number-field.component.ts @@ -0,0 +1,38 @@ +import { Component, Input } from '@angular/core'; +import { BaseFieldComponent, FieldConfig } from './base-field.component'; + +@Component({ + selector: 'app-number-field', + template: ` +
              + + +
              + {{ field.description }} +
              +
              + {{ field.errorMessage }} +
              +
              + ` +}) +export class NumberFieldComponent extends BaseFieldComponent { + @Input() field: FieldConfig; + @Input() value: number; +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/paragraph-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/paragraph-field.component.ts new file mode 100644 index 0000000..6c1b157 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/paragraph-field.component.ts @@ -0,0 +1,43 @@ +import { Component, Input } from '@angular/core'; +import { BaseFieldComponent, FieldConfig } from './base-field.component'; + +@Component({ + selector: 'app-paragraph-field', + template: ` +
              + + +
              + {{ value?.length || 0 }}/{{ field.maxLength }} +
              +
              + {{ field.description }} +
              +
              + {{ field.errorMessage }} +
              +
              + ` +}) +export class ParagraphFieldComponent extends BaseFieldComponent { + @Input() field: FieldConfig; + @Input() value: string; +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/password-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/password-field.component.ts new file mode 100644 index 0000000..b39671f --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/password-field.component.ts @@ -0,0 +1,89 @@ +import { Component, Input } from '@angular/core'; +import { BaseFieldComponent, FieldConfig } from './base-field.component'; + +@Component({ + selector: 'app-password-field', + template: ` +
              + +
              + + +
              +
              +
              +
              +
              + {{ passwordStrengthLabel }} +
              +
              + {{ field.description }} +
              +
              + {{ field.errorMessage }} +
              +
              + ` +}) +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; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/phone-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/phone-field.component.ts new file mode 100644 index 0000000..6483976 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/phone-field.component.ts @@ -0,0 +1,72 @@ +import { Component, Input } from '@angular/core'; +import { BaseFieldComponent, FieldConfig } from './base-field.component'; + +@Component({ + selector: 'app-phone-field', + template: ` +
              + +
              +
              + 🇺🇸 + {{ selectedCountryCode }} + ▼ +
              + + +
              +
              + {{ errorMessage }} +
              +
              + {{ field.description }} +
              +
              + ` +}) +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 + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/text-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/text-field.component.ts new file mode 100644 index 0000000..e45be34 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/text-field.component.ts @@ -0,0 +1,43 @@ +import { Component, Input } from '@angular/core'; +import { BaseFieldComponent, FieldConfig } from './base-field.component'; + +@Component({ + selector: 'app-text-field', + template: ` +
              + + +
              + {{ field.description }} +
              +
              + {{ value?.length || 0 }}{{ field.maxLength ? '/' + field.maxLength : '' }} +
              +
              + {{ field.errorMessage }} +
              +
              + ` +}) +export class TextFieldComponent extends BaseFieldComponent { + @Input() field: FieldConfig; + @Input() value: string; +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/textarea-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/textarea-field.component.ts new file mode 100644 index 0000000..b51e29a --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/components/field-types/textarea-field.component.ts @@ -0,0 +1,43 @@ +import { Component, Input } from '@angular/core'; +import { BaseFieldComponent, FieldConfig } from './base-field.component'; + +@Component({ + selector: 'app-textarea-field', + template: ` +
              + + +
              + {{ value?.length || 0 }}/{{ field.maxLength }} +
              +
              + {{ field.description }} +
              +
              + {{ field.errorMessage }} +
              +
              + ` +}) +export class TextareaFieldComponent extends BaseFieldComponent { + @Input() field: FieldConfig; + @Input() value: string; +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/shared/shared.module.ts b/frontend/angular-clarity-master/src/app/shared/shared.module.ts new file mode 100644 index 0000000..ae35a71 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/shared/shared.module.ts @@ -0,0 +1,14 @@ +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 { } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/assets/i18n/en.json b/frontend/angular-clarity-master/src/assets/i18n/en.json index 0b299c4..ba3c90f 100644 --- a/frontend/angular-clarity-master/src/assets/i18n/en.json +++ b/frontend/angular-clarity-master/src/assets/i18n/en.json @@ -343,6 +343,7 @@ "Email_Field2": "Email_Field2", "Static": "Static", "District": "District", + "Ad10": "Ad10", "about_yourself": "about_yourself", "datagrid_Field2": "datagrid_Field2", "Toggle_Switch2": "Toggle_Switch2", diff --git a/frontend/angular-clarity-master/src/styles.scss b/frontend/angular-clarity-master/src/styles.scss index 5428d3e..9152056 100644 --- a/frontend/angular-clarity-master/src/styles.scss +++ b/frontend/angular-clarity-master/src/styles.scss @@ -1,7 +1,19 @@ @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); @import '~@clr/icons/clr-icons.min.css'; -/* font set ==================== */ +// Modern Design System Imports +@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; } @@ -196,3 +208,78 @@ 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; + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/styles/_animations.scss b/frontend/angular-clarity-master/src/styles/_animations.scss new file mode 100644 index 0000000..2471c2e --- /dev/null +++ b/frontend/angular-clarity-master/src/styles/_animations.scss @@ -0,0 +1,602 @@ +// ======================================== +// 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; + } +} diff --git a/frontend/angular-clarity-master/src/styles/_base.scss b/frontend/angular-clarity-master/src/styles/_base.scss new file mode 100644 index 0000000..2748726 --- /dev/null +++ b/frontend/angular-clarity-master/src/styles/_base.scss @@ -0,0 +1,411 @@ +// ======================================== +// 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; + } +} diff --git a/frontend/angular-clarity-master/src/styles/_components.scss b/frontend/angular-clarity-master/src/styles/_components.scss new file mode 100644 index 0000000..5799161 --- /dev/null +++ b/frontend/angular-clarity-master/src/styles/_components.scss @@ -0,0 +1,709 @@ +// ======================================== +// 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; + } +} diff --git a/frontend/angular-clarity-master/src/styles/_design-tokens.scss b/frontend/angular-clarity-master/src/styles/_design-tokens.scss new file mode 100644 index 0000000..e91dfd5 --- /dev/null +++ b/frontend/angular-clarity-master/src/styles/_design-tokens.scss @@ -0,0 +1,258 @@ +// ======================================== +// 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); diff --git a/frontend/angular-clarity-master/src/styles/_theme-variables.scss b/frontend/angular-clarity-master/src/styles/_theme-variables.scss new file mode 100644 index 0000000..dbb184a --- /dev/null +++ b/frontend/angular-clarity-master/src/styles/_theme-variables.scss @@ -0,0 +1,367 @@ +// ======================================== +// 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; + } +}