diff --git a/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts b/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts index 34b2279..0c6ee59 100644 --- a/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts +++ b/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts @@ -1,9 +1,8 @@ export class ReportBuilder { public report_id: number; - public report_name: string; - public description: string; - public report_tags: string; - public servicename: string; - // Add SureConnect reference - public sureConnectId: number | null; -} \ No newline at end of file +public report_name:string; +public description: string; +public report_tags: string; +public servicename:string; + +} diff --git a/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts b/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts index 9f8c8f5..36e89e4 100644 --- a/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts +++ b/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts @@ -23,39 +23,6 @@ export interface DashboardContentModel { component?: any; name: string; type?:string; - // Chart properties - xAxis?: string; - yAxis?: string | string[]; - chartType?: string; - charttitle?: string; - chartlegend?: boolean; - showlabel?: boolean; - chartcolor?: boolean; - slices?: boolean; - donut?: boolean; - charturl?: string; - chartparameter?: string; - datastore?: string; - table?: string; - datasource?: string; - fieldName?: string; - connection?: string; - baseFilters?: any[]; - // Common filter properties - commonFilterEnabled?: boolean; - // Drilldown properties - drilldownEnabled?: boolean; - drilldownApiUrl?: string; - drilldownXAxis?: string; - drilldownYAxis?: string; - drilldownParameter?: string; - drilldownFilters?: any[]; - drilldownLayers?: any[]; - // Compact filter properties - filterKey?: string; - filterType?: string; - filterLabel?: string; - filterOptions?: string[]; } export interface DashboardModel { @@ -100,10 +67,6 @@ export class value1{ export const WidgetsMock: WidgetModel[] = [ - { - name: 'Common Filter', - identifier: 'common_filter' - }, { name: 'Radar Chart', identifier: 'radar_chart' @@ -148,4 +111,4 @@ export const WidgetsMock: WidgetModel[] = [ name: 'To Do', identifier: 'to_do_chart' } -] \ No newline at end of file +] 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 774fa24..df4eba9 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,155 +1,39 @@ - -
- -
-
-
-
-
-
-
-
-
+ - -
- - - --> \ 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 1edea49..221d360 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,653 +1,23 @@ -// ======================================== -// 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%); + .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; + // color:#80b0ff; } - - .floating-shapes { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - - .shape { - position: absolute; - border-radius: 50%; - background: linear-gradient(45deg, rgba($primary-400, 0.1), rgba($accent-purple, 0.1)); - animation: float 6s ease-in-out infinite; - - &.shape-1 { - width: 200px; - height: 200px; - top: 10%; - left: 10%; - animation-delay: 0s; - } - - &.shape-2 { - width: 150px; - height: 150px; - top: 60%; - right: 15%; - animation-delay: 2s; - } - - &.shape-3 { - width: 100px; - height: 100px; - bottom: 20%; - left: 20%; - animation-delay: 4s; - } - - &.shape-4 { - width: 80px; - height: 80px; - top: 30%; - right: 30%; - animation-delay: 1s; - } - } - } -} - -// Main Content -.login-content { - position: relative; - z-index: 2; - display: grid; - grid-template-columns: 1fr 1fr; - max-width: 1200px; - width: 100%; - margin: 0 auto; - padding: $space-8; - gap: $space-12; - align-items: center; -} - -// Left Side - Branding -.login-branding { - display: flex; - align-items: center; - justify-content: center; - padding: $space-8; - - .brand-content { - text-align: center; - max-width: 400px; - } - - .logo-section { - margin-bottom: $space-8; - - .logo-container { - position: relative; - display: inline-block; - margin-bottom: $space-6; - - .logo-img { - width: 80px; - height: 80px; - object-fit: contain; - filter: drop-shadow(0 8px 16px rgba($primary-600, 0.3)); - transition: transform $duration-300 $ease-out; - } - - .logo-glow { - position: absolute; - top: -10px; - left: -10px; - right: -10px; - bottom: -10px; - background: linear-gradient(45deg, $primary-400, $accent-purple); - border-radius: 50%; - opacity: 0; - filter: blur(20px); - transition: opacity $duration-300 $ease-out; - } - - &:hover { - .logo-img { - transform: scale(1.1); - } - - .logo-glow { - opacity: 0.3; - } - } - } - - .brand-title { - font-size: $text-4xl; - font-weight: $font-bold; - color: $gray-900; - margin-bottom: $space-2; - background: linear-gradient(135deg, $primary-600, $accent-purple); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - } - - .brand-subtitle { - font-size: $text-lg; - color: $gray-600; - font-weight: $font-medium; - } - } - - .brand-features { - display: flex; - flex-direction: column; - gap: $space-4; - - .feature-item { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-3; - background: rgba(255, 255, 255, 0.8); - border-radius: $radius-lg; - backdrop-filter: $backdrop-blur-sm; - border: 1px solid rgba(255, 255, 255, 0.2); - transition: all $duration-200 $ease-out; - - &:hover { - transform: translateX(8px); - background: rgba(255, 255, 255, 0.9); - box-shadow: $shadow-md; - } - - .feature-icon { - color: $primary-600; - font-size: $text-lg; - } - - span { - font-size: $text-sm; - font-weight: $font-medium; - color: $gray-700; - } - } - } -} - -// Right Side - Login Form -.login-form-section { - display: flex; - align-items: center; - justify-content: center; - padding: $space-8; - - .form-container { - width: 100%; - max-width: 400px; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: $backdrop-blur-md; - border-radius: $radius-2xl; - padding: $space-8; - box-shadow: $shadow-xl; - border: 1px solid rgba(255, 255, 255, 0.2); - } - - .form-header { - text-align: center; - margin-bottom: $space-8; - - .form-title { - font-size: $text-2xl; - font-weight: $font-bold; - color: $gray-900; - margin-bottom: $space-2; - } - - .form-subtitle { - font-size: $text-sm; - color: $gray-600; - } - } - - .modern-login-form { - .form-group { - margin-bottom: $space-6; - - .form-label { - display: block; - font-size: $text-sm; - font-weight: $font-semibold; - color: $gray-700; - margin-bottom: $space-2; - } - - .input-container { - position: relative; - display: flex; - align-items: center; - - .input-icon { - position: absolute; - left: $space-3; - color: $gray-400; - font-size: $text-base; - z-index: 2; - } - - .modern-input { - width: 100%; - padding: $space-3 $space-3 $space-3 $space-10; - border: 2px solid $gray-200; - border-radius: $radius-lg; - font-size: $text-sm; - font-weight: $font-medium; - color: $gray-900; - background: $white; - transition: all $duration-200 $ease-out; - - &::placeholder { - color: $gray-400; - } - - &:focus { - outline: none; - border-color: $primary-500; - box-shadow: 0 0 0 3px rgba($primary-500, 0.1); - } - - &:hover { - border-color: $gray-300; - } - } - - // Password field with toggle button - &:has(.password-toggle) .modern-input { - padding-right: $space-10; - } - - .password-toggle { - position: absolute; - right: $space-3; - top: 50%; - transform: translateY(-50%); - background: none; - border: none; - color: $gray-400; - cursor: pointer; - padding: $space-1; - border-radius: $radius-sm; - transition: all $duration-200 $ease-out; - z-index: 2; - - &:hover { - color: $gray-600; - background: rgba($gray-100, 0.5); - } - - &:focus { - outline: none; - color: $primary-600; - background: rgba($primary-50, 0.5); - } - - clr-icon { - font-size: $text-base; - } - - .toggle-text { - font-size: $text-xs; - font-weight: $font-semibold; - color: inherit; - text-transform: uppercase; - letter-spacing: 0.05em; - } - } - } - } - - .form-options { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: $space-6; - - .checkbox-container { - display: flex; - align-items: center; - gap: $space-2; - cursor: pointer; - - .modern-checkbox { - width: 18px; - height: 18px; - accent-color: $primary-600; - } - - .checkbox-label { - font-size: $text-sm; - color: $gray-600; - font-weight: $font-medium; - } - } - - .forgot-link { - font-size: $text-sm; - color: $primary-600; - text-decoration: none; - font-weight: $font-medium; - transition: color $duration-200 $ease-out; - - &:hover { - color: $primary-700; - } - } - } - - .error-message { - display: flex; - align-items: center; - gap: $space-2; - padding: $space-3; - background: rgba($accent-red, 0.1); - border: 1px solid rgba($accent-red, 0.2); - border-radius: $radius-lg; - margin-bottom: $space-6; - color: $accent-red; - font-size: $text-sm; - font-weight: $font-medium; - - clr-icon { - font-size: $text-base; - } - } - - .modern-login-btn { - width: 100%; - padding: $space-4; - background: linear-gradient(135deg, $primary-600, $primary-700); - color: $white; - border: none; - border-radius: $radius-lg; - font-size: $text-base; - font-weight: $font-semibold; - cursor: pointer; - transition: all $duration-200 $ease-out; - position: relative; - overflow: hidden; - - &:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: $shadow-lg; - background: linear-gradient(135deg, $primary-700, $primary-800); - } - - &:active { - transform: translateY(0); - } - - &:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; - } - - &.loading { - .btn-content { - opacity: 0; - } - - .btn-loading { - opacity: 1; - } - } - - .btn-content { - display: flex; - align-items: center; - justify-content: center; - gap: $space-2; - transition: opacity $duration-200 $ease-out; - } - - .btn-loading { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - align-items: center; - gap: $space-2; - opacity: 0; - transition: opacity $duration-200 $ease-out; - - .spinner { - width: 16px; - height: 16px; - border: 2px solid rgba(255, 255, 255, 0.3); - border-top: 2px solid $white; - border-radius: 50%; - animation: spin 1s linear infinite; - } - } - } - - .signup-section { - text-align: center; - margin-top: $space-6; - - .signup-text { - font-size: $text-sm; - color: $gray-600; - - .signup-link { - color: $primary-600; - text-decoration: none; - font-weight: $font-semibold; - transition: color $duration-200 $ease-out; - - &:hover { - color: $primary-700; - } - } - } - } - } - - .social-login { - margin-top: $space-8; - - .divider { - position: relative; - text-align: center; - margin-bottom: $space-6; - - &::before { - content: ''; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: $gray-200; - } - - span { - background: rgba(255, 255, 255, 0.95); - padding: 0 $space-4; - font-size: $text-xs; - color: $gray-500; - font-weight: $font-medium; - } - } - - .social-buttons { - display: grid; - grid-template-columns: 1fr 1fr; - gap: $space-3; - - .social-btn { - display: flex; - align-items: center; - justify-content: center; - gap: $space-2; - padding: $space-3; - border: 2px solid $gray-200; - border-radius: $radius-lg; - background: $white; - color: $gray-700; - font-size: $text-sm; - font-weight: $font-medium; - cursor: pointer; - transition: all $duration-200 $ease-out; - - &:hover { - border-color: $gray-300; - transform: translateY(-1px); - box-shadow: $shadow-md; - } - - &.google-btn:hover { - border-color: #db4437; - color: #db4437; - } - - &.microsoft-btn:hover { - border-color: #0078d4; - color: #0078d4; - } - - clr-icon { - font-size: $text-base; - } - } - } - } -} - -// Animations -@keyframes float { - 0%, 100% { - transform: translateY(0px) rotate(0deg); - } - 50% { - transform: translateY(-20px) rotate(180deg); - } -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -// Responsive Design -@media (max-width: $breakpoint-lg) { - .login-content { - grid-template-columns: 1fr; - gap: $space-8; - padding: $space-6; - } - - .login-branding { - order: 2; - padding: $space-4; - - .brand-content { - max-width: 100%; - } - - .logo-section .brand-title { - font-size: $text-3xl; - } - - .brand-features { - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - } - } - - .login-form-section { - order: 1; - padding: $space-4; - - .form-container { - padding: $space-6; - } - } -} - -@media (max-width: $breakpoint-md) { - .modern-login-container { - padding: $space-4; - } - - .login-content { - padding: $space-4; - } - - .login-branding { - .brand-features { - flex-direction: column; - } - } - - .login-form-section .form-container { - padding: $space-4; - } -} - -// Legacy styles (preserved for compatibility) -.tamplate1 { - background-image: url(../../../../assets/images/new.png); - background-repeat: no-repeat; - background-size: 60%; - background-position: right center; - border: 1px solid #000; -} - -.tamplate2 { - 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 d31362b..be82326 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,8 +41,6 @@ export class LoginPageComponent implements OnInit { email = ''; password = ''; isError = false; - isLoading = false; - showPassword = false; model: any = {}; errMsg: string = ''; @@ -73,80 +71,32 @@ export class LoginPageComponent implements OnInit { } onLogin() { - console.log('onLogin called'); - console.log('Form data:', { email: this.model.email, password: this.model.password }); - - // Reset error state - this.isError = false; - this.errMsg = ''; - - // Validate inputs - if (!this.model.email || !this.model.password) { - this.isError = true; - this.errMsg = 'Please enter both email and password'; - console.log('Validation failed - missing email or password'); - return; - } - - // Set loading state - this.isLoading = true; - console.log('Loading state set to true, making API call...'); - // tslint:disable-next-line:max-line-length this.loginService.getToken(this.model.email, this.model.password) - .subscribe( - 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]); - }, + .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} + }, (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 timeout'; - break; + this.errMsg = 'Request Timedout'; case 500: - this.errMsg = 'Internal server error'; - break; - case 0: - this.errMsg = 'Network error - please check your connection'; - break; + this.errMsg = 'Internal Server Error'; default: - this.errMsg = 'An error occurred. Please try again.'; + this.errMsg = 'Server Error'; } } ); + } goaccount(){ } @@ -154,17 +104,5 @@ export class LoginPageComponent implements OnInit { this.router.navigate(["../forgotpass"], { relativeTo: this.route }); } - // Clear error when user starts typing - clearError() { - if (this.isError) { - this.isError = false; - this.errMsg = ''; - } - } - - // Toggle password visibility - togglePasswordVisibility() { - this.showPassword = !this.showPassword; - } } 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 56b2b42..8052672 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,6 +12,12 @@ + + + + + + @@ -234,8 +240,7 @@ export class Stepper_workflowComponent implements OnInit { rsModaldescription = false; goToReplaceStringdescription(row) { - this.rowSelected = row; - this.rsModaldescription = true; + this.rowSelected = row; this.rsModaldescription = true; } @@ -248,39 +253,6 @@ 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 fb96a15..88a4b66 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,465 +1,279 @@ -
    +
      2. -
    2. {{'SECURITY' | translate}}
      3. -
    3. {{'MENU_ACCESS_CONTROL' | translate}}
      4. +
    4. {{'SECURITY' | translate}}
      5. +
    5. {{ 'MENU_ACCESS_CONTROL' | translate }}
    -
    -
    -
    - +
    +
    +
    +

    {{ 'MENU_ACCESS_CONTROL' | translate }}

    -
    -

    {{'MENU_ACCESS_CONTROL' | translate}}

    -

    {{'SECURITY' | translate}}

    +
    + {{ 'EDIT_MODE' | translate }}
    -
    - {{'EDIT_MODE' | 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' | translate}} ... - -
{{'NO_DATA_AVAILABLE' | translate}}
+ Loading ... +
{{ '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' | translate}}Menuname
- + - {{'RECORDS_PER_PAGE' | translate}} + Record per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}} + of {{pagination.totalItems}} Records - + - - {{'LOADING' | translate}} ... - -
{{'NO_DATA_AVAILABLE' | translate}}
+ Loading ... +
No data available
 - - - - {{'NO' | translate}} - - - - - - - {{'MENU_ITEM_NAME' | translate}} - - - - - - - {{'VIEW' | translate}} - - - - - - - {{'CREATE' | translate}} - - - - - - - {{'EDIT' | translate}} - - - - - - - {{'DELETE' | translate}} - - - - - - - {{'QUERY' | translate}} - - - - - - - {{'EXPORT' | translate}} - - - - + + NO + + + Menu Item Name + + + View + + + Create + + + Edit + + + Delete + + + + Query + + + Export + + {{i+1}} - - {{all.menuItemDesc}} - - - - - - - - - - - - - - - - - - - + {{all.menuItemDesc}} + + + + + + - + - +
{{'MENUNAME' | translate}}Menuname
- + - {{'RECORDS_PER_PAGE' | translate}} + Record per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}} + of {{pagination.totalItems}} Records - -

- {{'ADD_MENU_ACCESS_CONTROL' | translate}} -

+ +

Add Menu Access Control

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

- {{'UPDATE_MENU_ACCESS_CONTROL' | translate}} -

+ +

Update Menu Access Control

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

{{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' | translate}}?

-

{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}

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

Are You Sure Want to delete?

+

{{rowSelected.menuItemId.menuItemId}}

- - + +
-
\ No newline at end of file + + +
+

Are You Sure Want to delete Main menu with submenu?

+

{{rowSelected.menuItemId.menuItemId}}

+
+ + +
+
+ \ 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 4446200..1b7ad42 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,160 +1,43 @@ -@import '../../../../../styles/_design-tokens.scss'; - -// Import base styles -input[type=text], -[type=date], -[type=password], -[type=checkbox] { +input[type=text],[type=date],[type=password],[type=checkbox] { width: 100%; padding: 15px 20px; - background-color: var(--theme-surface); + // margin: 3px 0; + background-color:rgb(255, 255, 255); display: inline-block; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; + border: 1px solid #ccc; + border-radius: 4px; box-sizing: border-box; - font-family: var(--theme-font-primary); - color: var(--theme-text); } +.required-field{ + color: red; +font-size: 18px; -input[type=text]:focus, -[type=date]:focus, -[type=password]:focus, -[type=checkbox]:focus { - outline: none; - border-color: var(--theme-primary); - box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); } - -.required-field { - color: var(--theme-error, #ef4444); - font-size: 18px; -} - +// select{ +// width: 100%; +// padding: 5px 5px; +// border: 1px solid #ccc; +// border-radius: 4px; +// } .td-title { text-align: center; width: 150px; - color: white; +color: white; font-weight: bold; - background-color: var(--theme-primary); + background-color: rgba(63, 122, 231, 0.863); + //color: rgb(24, 13, 13); } - -th { +th{ + //background-color:rgb(170, 169, 169); font-weight: bold; } - -.td-content { +.td-content{ text-align: left; } - -// 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); - } - } +.delete,.heading{ + text-align: center; + color: red; } - //toggle button .switch { position: relative; @@ -193,585 +76,24 @@ th { transition: .4s; } -input:checked+.slider { - background-color: var(--theme-primary); +input:checked + .slider { + background-color: #0072a3; } -input:focus+.slider { - box-shadow: 0 0 1px var(--theme-primary); +input:focus + .slider { + box-shadow: 0 0 1px #0072a3; } -input:checked+.slider:before { +input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } -.slider.round { - 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 { + border-radius: 34px; } - &:not(:last-child) { - border-bottom: 1px solid #e5e7eb; + .slider.round:before { + border-radius: 50%; } - - .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 ada1420..1ccf78e 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,8 +6,6 @@ import { MenuGroupService } from 'src/app/services/admin/menu-group.service'; import { MenumaintanceService } from 'src/app/services/admin/menumaintance.service'; import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service'; import { UsermaintanceService } from '../../../../services/admin/usermaintance.service'; -import { ThemeService } from 'src/app/services/theme.service'; - @Component({ selector: 'app-menuaccesscontrol', templateUrl: './menuaccesscontrol.component.html', @@ -38,26 +36,15 @@ export class MenuaccesscontrolComponent implements OnInit { toggle: boolean = false; maindata; showdata; - // UI enhancements (no API changes) - filterText: string = ''; - - constructor( - private mainservice: UsermaintanceService, + constructor(private mainservice: UsermaintanceService, private _fb: FormBuilder, private toastr: ToastrService, private route: ActivatedRoute, private usergrpservice: UsergrpmaintainceService, private menuGroupService: MenuGroupService, - private menuservice: MenumaintanceService, - private themeService: ThemeService - ) { } + private menuservice: MenumaintanceService,) { } ngOnInit(): void { - // Ensure theme variables are applied to the view - this.themeService.currentTheme$.subscribe(() => { - // CSS variables are updated globally; no extra handling needed here - }); - this.showdata = this.menuGroupService.getdata(); console.log(this.showdata); this.mcreate = this.showdata.mcreate; @@ -74,64 +61,35 @@ export class MenuaccesscontrolComponent implements OnInit { grpid: this.usergrpid, gmenuid: this.menuselectid, }); + } - - // Stats & filtering helpers for UI only - get totalItems(): number { - const list: any[] = (this.alldata as unknown as any[]) || []; - return list.length; - } - - get mainMenuCount(): number { - const list: any[] = (this.alldata as unknown as any[]) || []; - return list.filter(it => it && it.menuId === 0).length; - } - - get subMenuCount(): number { - const list: any[] = (this.alldata as unknown as any[]) || []; - return list.filter(it => it && it.menuId !== 0).length; - } - - get filteredAllData(): any[] { - const items: any[] = (this.alldata as unknown as any[]) || []; - const text = (this.filterText || '').toLowerCase(); - if (!text) { return items; } - return items.filter(m => ( - (m?.menuItemDesc || '').toLowerCase().includes(text) - )); - } - dropddowngetdata() { this.usergrpservice.getAll().subscribe((data) => { console.log(data); this.givendata = data; }); } - getdata() { this.menuservice.getByCurrentUserMenuGroupId1().subscribe(resp => { this.menus = resp; console.log('menus: ', this.menus); }) } - getall() { this.usergrpservice.getall().subscribe((data) => { this.secmenuaccessdata = data console.log(data); }) } - idofselected(val) { console.log(val); this.usergrpid = val; + } - idselected(val) { console.log(val) this.menuselectid = val; } - getbyuseriddata() { this.usergrpservice.getbyusergrpid(this.usergrpid).subscribe((data) => { this.alldata = data; @@ -146,19 +104,17 @@ 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; @@ -172,30 +128,28 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }, - (error) => { - console.log('Error in adding data...', error); - if (error.status == 400) { - this.toastr.error(error.error); + (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(); + }); - } 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) => { @@ -212,13 +166,11 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }); } - modaldeletemainmenu(row) { this.rowSelected = row; console.log(this.rowSelected) this.modaldelete1 = true; } - delete1(id, usrgrp) { this.modaldelete1 = false; this.usergrpservice.deletemain(id, usrgrp).subscribe((data) => { @@ -235,7 +187,6 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }); } - onUpdate(id: any, usrgrp: any) { this.modaledit = false; console.log(id, usrgrp); @@ -253,7 +204,6 @@ export class MenuaccesscontrolComponent implements OnInit { this.ngOnInit(); }); } - onChecked(value) { if (value == "y") { this.selected = "y" @@ -263,13 +213,11 @@ export class MenuaccesscontrolComponent implements OnInit { this.selected = "n"// make a call for unchecked } } - changedelete(val) { console.log(val); val = this.colvalue = val; console.log(val); } - data: {}; Sync(id: any, row) { this.rowSelected = row; @@ -291,9 +239,8 @@ 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 f9ee1bd..7025f45 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,39 +1,11 @@ -
    + +
    2. {{ 'SECURITY' | translate }}
    3. {{ 'MENU_MAINTENANCE' | translate }}
    -
    -
    -
    -
    - -
    -
    -

    {{ 'MENU_MAINTENANCE' | translate }}

    -

    {{ 'MAIN_MENU' | translate }}

    -
    -
    -
    - - - - -
    -
    + -
    -
    -
    {{ totalMenus }}
    -
    {{ 'TOTAL_MENUS' | translate }}
    -
    -
    -
    {{ enabledMenusCount }}
    -
    {{ 'ENABLED' | translate }}
    -
    -
    -
    {{ disabledMenusCount }}
    -
    {{ 'DISABLED' | translate }}
    -
    -
    +
    +
    +

    {{ 'MENU_MAINTENANCE' | translate }}

    + {{ 'MAIN_MENU' | translate }}
    -
    -
    -
    - - -
    -
    - -
    - - -
    + +
    +
    + +
    -
    + + + + + +
    +
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - {{'LOADING'|translate}} ... - -
    - -
    {{ 'NO_DATA' | translate }}
    -
    {{ error }}
    -
    -     - + + {{'LOADING'|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}}
    -
    ID: {{user.menuId}} • Seq: {{user.itemSeq}}
    -
    -
    -     - {{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}}
    -
    Action Link{{user.main_menu_action_name}}
    -
    Module{{user.moduleName}}
    -
    -     -     + + + + + + +
    Menu Name: {{user.menuItemDesc}}
    +     + - - - 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
    -
    -
    -
    *Required Only - Number
    -
    +
    *This field is Required
    -
    - - -
    -
    *This field is - Required
    +
    +
    *Required Only Number
    +
    -
    -
    - - -
    -
    *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 d14e655..ab11a3c 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,591 +60,3 @@ select{ border-radius: 4px; } -/* Modern theme-aware enhancements */ -.mm-container { - background: var(--theme-surface); - border-radius: var(--theme-border-radius); - box-shadow: var(--theme-shadow); - padding: 1rem; -} - -.mm-hero { - display: flex; - justify-content: space-between; - align-items: center; - background: var(--theme-glass-bg); - backdrop-filter: blur(12px); - border: 1px solid var(--theme-glass-border); - border-radius: calc(var(--theme-border-radius) + 4px); - padding: 1rem 1.25rem; - margin-bottom: 0.75rem; - box-shadow: var(--theme-glass-shadow); -} - -.mm-hero__content { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.mm-hero__icon clr-icon { - width: 28px; - height: 28px; - color: var(--theme-primary); - filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)); -} - -.mm-hero__title { - font-size: 1.25rem; - line-height: 1.2; - margin: 0; -} - -.mm-hero__subtitle { - margin: 0; - font-size: 0.875rem; - color: var(--theme-text-secondary); -} - -.mm-hero__actions .btn + .btn { - margin-left: 0.5rem; -} - -.mm-breadcrumb { - margin-bottom: 0.75rem; -} - -.mm-header-row { - align-items: center; - margin-top: 0.75rem; -} - -.mm-title-wrap { - display: inline-flex; - align-items: center; - gap: 0.75rem; -} - -.mm-title { - display: inline-block; - font-weight: 600; - color: var(--theme-text); -} - -.mm-subtitle { - display: inline-block; -} - -.mm-actions { - text-align: right; -} - -.mm-btn-group { - margin-right: 0.5rem; -} - -.mm-btn-primary { - border-radius: var(--theme-border-radius); - background: var(--theme-primary); - color: #fff; - box-shadow: 0 2px 6px rgba(0,0,0,0.08); - transition: transform 120ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), box-shadow 150ms ease; -} - -.mm-btn-primary:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); transform: translateY(-1px); } -.mm-btn-primary:active { transform: translateY(0); } - -.mm-btn-outline { - border-radius: var(--theme-border-radius); - border: 1px solid var(--theme-primary); - color: var(--theme-primary); - background: transparent; -} - -.mm-btn-outline:hover { background: var(--theme-primary-100); } - -.mm-btn-secondary { - border-radius: var(--theme-border-radius); - background: var(--theme-secondary); - color: #fff; -} - -.mm-btn-text { - margin-left: 0.35rem; -} - -.mm-grid { - background: var(--theme-surface); - border-radius: var(--theme-border-radius); - box-shadow: var(--theme-shadow); -} -.mm-grid--modern .datagrid-header { - background: linear-gradient(135deg, var(--theme-primary-50), transparent); -} - -.mm-col-title { - display: inline-flex; - align-items: center; - gap: 6px; - font-weight: 600; -} - -.mm-col--icon { width: 44px; } -.mm-col--no { width: 70px; } -.mm-col--name { min-width: 220px; } -.mm-col--id { width: 120px; } -.mm-col--seq { width: 120px; } -.mm-col--module { min-width: 160px; } -.mm-col--link { min-width: 220px; } -.mm-col--status { width: 140px; } -.mm-col--submenu { width: 100px; } -.mm-col--action { width: 140px; } - -.mm-card { - background: var(--theme-glass-bg); - backdrop-filter: blur(10px); - border: 1px solid var(--theme-glass-border); - border-radius: var(--theme-border-radius); - padding: 0.25rem; -} - -.mm-grid-footer { - border-top: 1px solid rgba(0,0,0,0.06); -} - -.mm-col--icon, -.mm-cell--icon { - max-width: 40px; -} - -.mm-row:hover { - background: var(--theme-primary-50); -} - -.mm-icon-action { - cursor: pointer; - padding: 6px; - border-radius: 6px; - transition: background 150ms ease-out, transform 150ms ease-out; -} - -.mm-icon-action:hover { - background: var(--theme-primary-100); - transform: translateY(-1px); -} - -.mm-icon-edit { - color: var(--theme-accent); -} - -.mm-icon-link { - color: var(--theme-secondary); -} - -.mm-icon-help { - color: var(--theme-primary); -} - -.mm-icon-delete { - color: #ef4444; -} - -.mm-danger:hover { - background: rgba(239, 68, 68, 0.12); -} - -.mm-modal .modal-body { - background: var(--theme-surface); -} - -.mm-modal .modal-title { - font-weight: 600; -} - -/* Modernize Add/Edit modals */ -.mm-modal .modal-body form { - display: block; -} - -.mm-modal .modal-body .clr-row { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px 16px; -} - -@media (max-width: 640px) { - .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } -} - -.mm-modal label { - display: inline-block; - margin-bottom: 6px; - font-weight: 600; - color: var(--theme-text); -} - -.mm-modal input.clr-input, -.mm-modal select { - width: 100%; - padding: 10px 12px; - border-radius: 10px; - border: 1px solid rgba(0,0,0,0.12); - background: var(--theme-background); - transition: border-color 150ms ease, box-shadow 150ms ease; -} - -.mm-modal input.clr-input:focus, -.mm-modal select:focus { - outline: none; - border-color: var(--theme-primary); - box-shadow: 0 0 0 3px var(--theme-primary-100); -} - -.mm-modal .modal-footer { - display: flex; - justify-content: flex-end; - gap: 10px; -} - -.mm-modal .modal-footer .btn.btn-primary { - background: var(--theme-primary); - color: #fff; - border-radius: 10px; -} - -.mm-modal .modal-footer .btn.btn-outline { - border-radius: 10px; - border: 1px solid var(--theme-secondary); - color: var(--theme-secondary); -} - -.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; } - -.mm-item { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.mm-item__avatar clr-icon { - width: 18px; - height: 18px; - color: var(--theme-accent); -} - -.mm-item__title { - font-weight: 600; -} - -.mm-item__meta { - font-size: 0.75rem; - color: var(--theme-text-secondary); -} - -.mm-chip { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 2px 8px; - border-radius: 999px; - border: 1px solid rgba(0,0,0,0.06); - background: var(--theme-primary-50); -} - -.mm-link { - display: inline-flex; - align-items: center; - gap: 6px; -} - -.mm-badge { - display: inline-block; - padding: 2px 10px; - border-radius: 999px; - background: var(--theme-secondary); - color: white; - font-size: 0.75rem; -} - -.mm-badge--success { - background: var(--theme-primary); -} - -.mm-badge--muted { - background: var(--theme-primary-200); - color: var(--theme-text); -} - -.mm-actions-inline .btn { - margin-right: 6px; -} - -.mm-detail { - display: grid; - grid-template-columns: 1fr; - gap: 8px; - padding: 8px 0; -} - -.mm-detail__row { - display: flex; - justify-content: space-between; -} - -/* Skeleton loader */ -.mm-skeleton-list { - display: grid; - gap: 10px; - margin: 8px 0 12px; -} - -.mm-skeleton-item { - display: grid; - grid-template-columns: 44px 1.2fr 0.8fr 0.6fr 1fr 120px 140px; - align-items: center; - gap: 10px; - padding: 8px; - background: var(--theme-surface); - border-radius: var(--theme-border-radius); - border: 1px solid rgba(0,0,0,0.05); -} - -.mm-skel { - height: 12px; - border-radius: 6px; - background: linear-gradient( - 90deg, - rgba(0,0,0,0.05) 25%, - rgba(0,0,0,0.08) 37%, - rgba(0,0,0,0.05) 63% - ); - background-size: 400% 100%; - animation: mm-shimmer 1.2s ease-in-out infinite; -} - -.mm-skel--icon { width: 24px; height: 24px; border-radius: 50%; } -.mm-skel--title { width: 60%; height: 14px; } -.mm-skel--meta { width: 40%; } -.mm-skel--chip { width: 80px; } -.mm-skel--link { width: 60%; } -.mm-skel--badge { width: 70px; } -.mm-skel--actions { width: 60px; } - -@keyframes mm-shimmer { - 0% { background-position: 100% 0; } - 100% { background-position: 0 0; } -} - -@media (prefers-reduced-motion: reduce) { - .mm-skel { animation: none; } -} - -/* Row mount animation */ -.mm-row { transition: transform 220ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), background 200ms ease; } -.mm-row.ng-enter { transform: translateY(8px); opacity: 0.001; } -.mm-row.ng-enter-active { transform: translateY(0); opacity: 1; } - -/* Responsive layouts */ -@media (max-width: 1024px) { - .mm-col--id, .mm-col--seq, .mm-col--submenu { display: none; } -} - -@media (max-width: 768px) { - .mm-col--link { display: none; } - .mm-item__meta { display: none; } - .mm-actions-inline .btn { padding: 0 6px; } -} - -@media (max-width: 640px) { - .mm-col--action { width: 100px; } - .mm-col--status { width: 110px; } - .mm-hero { flex-direction: column; align-items: flex-start; gap: 0.5rem; } - .mm-hero__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; } -} - -/* Sticky toolbar */ -.mm-toolbar { - position: sticky; - top: 0; - z-index: 10; - display: flex; - justify-content: space-between; - align-items: center; - gap: 8px; - padding: 8px 10px; - margin-bottom: 8px; - background: var(--theme-surface); - border: 1px solid rgba(0,0,0,0.05); - border-radius: var(--theme-border-radius); - box-shadow: 0 1px 0 rgba(0,0,0,0.03); -} - -.mm-search { - display: inline-flex; - align-items: center; - gap: 6px; - border: 1px solid rgba(0,0,0,0.08); - padding: 6px 8px; - border-radius: 999px; - background: var(--theme-background); -} - -.mm-search__input { - border: none; - outline: none; - background: transparent; - min-width: 220px; -} - -.mm-select { - border-radius: 999px; - padding: 6px 10px; - border: 1px solid rgba(0,0,0,0.08); - background: var(--theme-background); -} - -@media (max-width: 640px) { - .mm-search__input { min-width: 140px; } -} - -.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; } - -/* Card view */ -.mm-cards { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 12px; -} - -@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } } - -.mm-card-item { - background: var(--theme-surface); - border: 1px solid rgba(0,0,0,0.06); - border-radius: var(--theme-border-radius); - box-shadow: var(--theme-shadow); - overflow: hidden; - display: flex; - flex-direction: column; -} - -.mm-card-item__header { - display: flex; - align-items: center; - gap: 10px; - padding: 10px 12px; - background: linear-gradient(135deg, var(--theme-primary-50), transparent); - min-height: 48px; -} - -.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; } -.mm-card-item__title { font-weight: 700; flex: 1 1 auto; } -.mm-card-item__badge { margin-left: auto; } - -/* Prevent overlaps and long text issues */ -.mm-ellipsis { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mm-card-item__title { - max-width: 60%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -@media (max-width: 640px) { - .mm-card-item__title { max-width: 54%; } -} - -.mm-card-item__body { - padding: 10px 12px; - display: grid; - grid-template-columns: repeat(2, minmax(0,1fr)); - gap: 8px; -} - -@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } } - -.mm-kv { display: flex; justify-content: space-between; } -.mm-kv span { color: var(--theme-text-secondary); } - -.mm-card-item__footer { - padding: 10px 12px; - display: flex; - gap: 8px; - border-top: 1px solid rgba(0,0,0,0.06); -} - -/* Theme the card footer buttons */ -.mm-card-item__footer .btn { - border-radius: 10px; -} - -.mm-card-item__footer .btn.btn-outline { - border: 1px solid var(--theme-secondary); - color: var(--theme-secondary); - background: transparent; -} - -.mm-card-item__footer .btn.btn-outline:hover { background: rgba(0,0,0,0.04); } - -.mm-card-item__footer .btn:not(.btn-outline) { - background: var(--theme-primary); - color: #fff; -} - -.mm-card-item__footer .btn:not(.btn-outline):hover { - filter: brightness(0.98); -} - -/* View toggle buttons */ -.mm-view-toggle .btn.btn-primary { background: var(--theme-primary); color: #fff; } -.mm-view-toggle .btn:not(.btn-primary) { background: var(--theme-primary-100); color: var(--theme-text); } - -.mm-stats { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.75rem; - margin: 0.75rem 0 1rem; -} - -.mm-stat { - background: var(--theme-surface); - border-radius: var(--theme-border-radius); - padding: 0.75rem 1rem; - border: 1px solid rgba(0,0,0,0.05); -} - -.mm-stat__value { - font-size: 1.25rem; - font-weight: 700; - color: var(--theme-primary); -} - -.mm-stat__label { - font-size: 0.75rem; - color: var(--theme-text-secondary); -} - -.mm-empty { - text-align: center; - padding: 1.5rem 0.5rem; - color: var(--theme-text-secondary); -} - -.mm-empty clr-icon { - width: 32px; - height: 32px; - color: var(--theme-secondary); - margin-bottom: 0.25rem; -} - -.mm-empty__title { - font-weight: 600; -} - 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 03d5887..af0657f 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,7 +9,6 @@ import { CsvService } from 'src/app/services/csv.service'; import { ExcelService } from 'src/app/services/excel.service'; import * as moment from 'moment'; import { TranslateService } from '@ngx-translate/core'; -import { ThemeService } from 'src/app/services/theme.service'; @Component({ selector: 'app-menumaintance', templateUrl: './menumaintance.component.html', @@ -32,10 +31,6 @@ export class MenumaintanceComponent implements OnInit { showdata; error; submitted = false; - // Quick filter UI state (no API/logic changes) - filterText = ''; - statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All'; - viewMode: 'cards' | 'table' = 'cards'; constructor(private menuservice: MenumaintanceService, private toastr: ToastrService, private excel: ExcelService, @@ -44,14 +39,9 @@ export class MenumaintanceComponent implements OnInit { private menuGroupService: MenuGroupService, private csvService: CsvService, private translate: TranslateService, - private router: Router, - private themeService: ThemeService) { } + private router: Router,) { } ngOnInit(): void { - // Ensure theme variables are applied; subscription keeps this view reactive to theme changes - this.themeService.currentTheme$.subscribe(() => { - // Theme applied globally via CSS variables; no additional handling needed here - }); this.showdata = this.menuGroupService.getdata(); console.log(this.showdata); this.mcreate = this.showdata.mcreate; @@ -79,71 +69,6 @@ export class MenumaintanceComponent implements OnInit { this.getdata(); } - // Stats for UI (template-safe, no inline arrow functions) - get totalMenus(): number { - return this.menus ? this.menus.length : 0; - } - - get enabledMenusCount(): number { - const list: any[] = (this.menus as unknown as any[]) || []; - return list.filter(menu => menu && menu.status === 'Enable').length; - } - - get disabledMenusCount(): number { - const list: any[] = (this.menus as unknown as any[]) || []; - return list.filter(menu => menu && menu.status === 'Disable').length; - } - - // Filtered list for view - get filteredMenus(): Rn_Main_Menu[] { - const items: any[] = (this.menus as unknown as any[]) || []; - const text = (this.filterText || '').toLowerCase(); - const status = this.statusFilter; - return items.filter(m => { - const matchText = !text || ( - (m.menuItemDesc || '').toLowerCase().includes(text) || - (m.moduleName || '').toLowerCase().includes(text) || - (m.main_menu_action_name || '').toLowerCase().includes(text) - ); - const matchStatus = !status || status === 'All' || m.status === status; - return matchText && matchStatus; - }); - } - - setViewMode(mode: 'cards' | 'table') { - this.viewMode = mode; - } - - // Resolve a safe Clarity icon shape for a menu item - getIconShape(menu: any): string { - const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim(); - const name = raw.toLowerCase(); - const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a'; - if (invalid) { - return 'file'; // universal fallback icon - } - // Optional alias normalization - const aliasMap: Record = { - '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 4a5da87..a685d03 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,50 +9,22 @@ Sub Menu
        --> -
        -
        -
        -
        -

        Sub-Menu Maintenance

        -

        Sub Menu

        -
        -
        -
        - -
        -
        +
        +
        +

        Sub-Menu Maintenance

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

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

        Update Sub Menu Maintenance

        {{rowSelected.menuItemId}}

        @@ -301,7 +240,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 c4061f4..aad7811 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,88 +1,3 @@ -@import '../../../../../styles/design-tokens'; - -.mm-breadcrumb { margin-bottom: 0.75rem; } -.mm-modal .modal-body { background: var(--theme-surface); } -.mm-modal .modal-title { font-weight: 600; } -.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } -@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } } -.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); } -.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; } -.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); } -.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; } -.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; } -.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); } -.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; } - -.mm-hero { - display: flex; justify-content: space-between; align-items: center; - background: var(--theme-glass-bg); backdrop-filter: blur(12px); - border: 1px solid var(--theme-glass-border); - border-radius: calc(var(--theme-border-radius) + 4px); - padding: 1rem 1.25rem; margin-bottom: 0.75rem; box-shadow: var(--theme-glass-shadow); -} -.mm-hero__content { display: flex; align-items: center; gap: 0.75rem; } -.mm-hero__icon clr-icon { width: 28px; height: 28px; color: var(--theme-primary); } -.mm-hero__title { font-size: 1.25rem; margin: 0; } -.mm-hero__subtitle { margin: 0; font-size: 0.875rem; color: var(--theme-text-secondary); } -.mm-hero__actions .btn + .btn { margin-left: 0.5rem; } - -.mm-btn-primary { border-radius: var(--theme-border-radius); background: var(--theme-primary); color: #fff; } -.mm-btn-text { margin-left: 0.35rem; } - -.mm-toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--theme-border-radius); box-shadow: 0 1px 0 rgba(0,0,0,0.03); } -.mm-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(0,0,0,0.08); padding: 6px 8px; border-radius: 999px; background: var(--theme-background); } -.mm-search__input { border: none; outline: none; background: transparent; min-width: 220px; } -.mm-select { border-radius: 999px; padding: 6px 10px; border: 1px solid rgba(0,0,0,0.08); background: var(--theme-background); } -.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; } - -.mm-card { background: var(--theme-glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--theme-glass-border); border-radius: var(--theme-border-radius); padding: 0.25rem; } -.mm-grid { background: var(--theme-surface); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); } -.mm-grid--modern .datagrid-header { background: linear-gradient(135deg, var(--theme-primary-50), transparent); } -.mm-grid-footer { border-top: 1px solid rgba(0,0,0,0.06); } -.mm-row:hover { background: var(--theme-primary-50); } -.mm-item { display: flex; align-items: center; gap: 0.75rem; } -.mm-item__avatar clr-icon { width: 18px; height: 18px; color: var(--theme-accent); } -.mm-item__title { font-weight: 600; } -.mm-item__meta { font-size: 0.75rem; color: var(--theme-text-secondary); } -.mm-actions-inline .btn { margin-right: 6px; } -.mm-actions-inline .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); } -.mm-actions-inline .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); } -.mm-actions-inline .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; } -.mm-actions-inline .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); } - -.mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } -@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } .mm-search__input { min-width: 140px; } } -.mm-card-item { background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); overflow: hidden; display: flex; flex-direction: column; } -.mm-card-item__header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, var(--theme-primary-50), transparent); } -.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; } -.mm-card-item__title { font-weight: 700; flex: 1 1 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.mm-card-item__badge { margin-left: auto; } -.mm-card-item__body { padding: 10px 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } -@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } } -.mm-kv { display: flex; justify-content: space-between; } -.mm-kv span { color: var(--theme-text-secondary); } -.mm-card-item__footer { padding: 10px 12px; display: flex; gap: 8px; border-top: 1px solid rgba(0,0,0,0.06); } -.mm-card-item__footer .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); } -.mm-card-item__footer .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); } -.mm-card-item__footer .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; } -.mm-card-item__footer .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); } -.mm-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--theme-secondary); color: #fff; font-size: 0.75rem; } -.mm-badge--success { background: var(--theme-primary); } -.mm-badge--muted { background: var(--theme-primary-200); color: var(--theme-text); } - -/* Modals */ -.mm-modal .modal-body { background: var(--theme-surface); } -.mm-modal .modal-title { font-weight: 600; } -.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } -@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } } -.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); } -.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; } -.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); } -.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; } -.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; } -.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); } -.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; } input[type=text],[type=date],[type=password],[type=number] { width: 100%; padding: 15px 20px; 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 5893b4a..5489d80 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,5 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { ThemeService } from 'src/app/services/theme.service'; import { MenumaintanceService } from '../../../../services/admin/menumaintance.service'; import { Rn_Main_Menu } from '../../../../models/builder/Rn_Main_Menu'; import { ActivatedRoute, Router } from '@angular/router'; @@ -31,22 +30,13 @@ export class SubmenuComponent implements OnInit { mainid; submitted = false; public entryForm: FormGroup; - // UI filter/view state - filterText = ''; - statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All'; - viewMode: 'cards' | 'table' = 'cards'; - constructor(private menuservice: MenumaintanceService, private toastr: ToastrService, private _fb: FormBuilder, private route: ActivatedRoute, - private router: Router, - private themeService: ThemeService) { } + private router: Router,) { } ngOnInit(): void { - this.themeService.currentTheme$.subscribe(() => { - // Theme CSS variables applied globally - }); this.id = this.route.snapshot.params["id"]; console.log("project mainmenu with id = ", this.id); this.getById(this.id); @@ -65,34 +55,6 @@ export class SubmenuComponent implements OnInit { // this.getdata(); } - - // Derived/filtered list for view - get filteredSubMenus(): any[] { - const items: any[] = (this.sub as unknown as any[]) || []; - const text = (this.filterText || '').toLowerCase(); - const status = this.statusFilter; - return items.filter(m => { - const matchText = !text || ( - (m.menuItemDesc || '').toLowerCase().includes(text) || - (m.moduleName || '').toLowerCase().includes(text) || - (m.main_menu_action_name || '').toLowerCase().includes(text) - ); - const matchStatus = !status || status === 'All' || m.status === status; - return matchText && matchStatus; - }); - } - - setViewMode(mode: 'cards' | 'table') { this.viewMode = mode; } - - // Resolve a safe icon - getIconShape(menu: any): string { - const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim(); - const name = raw.toLowerCase(); - const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a'; - if (invalid) return 'file'; - const alias: Record = { 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 93987f1..f0d36a5 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,320 +1,224 @@ -
          + +
          2. {{ 'SECURITY' | translate }}
          3. {{'USER_GROUP_MAINTENANCE' | translate}}
            4. +
          -
          -
          -
          -
          -

          {{'USER_GROUP_MAINTENANCE' | translate}}

          -

          {{ 'SECURITY' | translate }}

          -
          + +
          +
          +
          +

          {{'USER_GROUP_MAINTENANCE' | 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}}
        -         -         - - - - 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}}
        -
        -
        - - - + +
        + + + + + + + + + {{'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}} + + {{user.updateDateFormated}} + + + + + + + + + + + + + + + +
        username{{user.groupName}}
        +         +         + + + + Record per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + +

        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?

        -

        This action cannot be undone

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

        Are You Sure Want to delete?

        +

        {{rowSelected.usrGrp}}

        - - + +
        + +

        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 d903195..c871274 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,748 +1,8 @@ -@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; - } +@import '../../../../../styles1.scss'; +input.ng-invalid.ng-touched { + border-color: red; } -.ug-btn-text { - margin-left: 8px; +.error_mess { + color: red; } - -// Modern Button Styles using ThemeService -.ug-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 20px; - font-size: 14px; - font-weight: 500; - line-height: 1; - border-radius: 8px; - border: 1px solid transparent; - cursor: pointer; - transition: all 200ms ease-out; - text-decoration: none; - position: relative; - overflow: hidden; - font-family: var(--theme-font-primary); - z-index: 1; - - &:focus { - outline: 2px solid var(--theme-primary); - outline-offset: 2px; - } - - &:disabled { - opacity: 0.5; - cursor: not-allowed; - pointer-events: none; - } - - // Sizes - &.ug-btn-sm { - padding: 8px 16px; - font-size: 13px; - height: 32px; - } - - &.ug-btn-md { - padding: 12px 20px; - font-size: 14px; - height: 40px; - } - - &.ug-btn-lg { - padding: 16px 24px; - font-size: 16px; - height: 48px; - } - - // Variants - &.ug-btn-primary { - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-color: var(--theme-primary); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%); - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - } - - &:active { - transform: translateY(0); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - } - } - - &.ug-btn-secondary { - background: var(--theme-surface); - color: var(--theme-text); - border-color: rgba(0, 0, 0, 0.1); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: var(--theme-background); - border-color: rgba(0, 0, 0, 0.2); - transform: translateY(-1px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - } - } - - &.ug-btn-outline { - background: transparent; - color: var(--theme-secondary); - border-color: var(--theme-secondary); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity - border-color: var(--theme-secondary); - color: var(--theme-secondary); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - } - } - - &.ug-btn-error { - background: var(--theme-error, #ef4444); - color: white; - border-color: var(--theme-error, #ef4444); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: var(--theme-error-dark, #dc2626); - border-color: var(--theme-error-dark, #dc2626); - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1); - } - } - - &.ug-btn-ghost { - background: transparent; - color: var(--theme-text-secondary); - border-color: transparent; - - &:hover { - background: var(--theme-background); - color: var(--theme-text); - } - } -} - -.ug-toolbar { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 24px; - padding: 16px; - background: var(--theme-surface); - border-radius: 12px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &__left { - flex: 1; - } - - &__right { - display: flex; - gap: 8px; - } -} - -.ug-search { - position: relative; - max-width: 400px; - - clr-icon { - position: absolute; - left: 12px; - top: 50%; - transform: translateY(-50%); - color: #9ca3af; - z-index: 1; - } - - &__input { - width: 100%; - padding: 12px 12px 12px 40px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; - font-size: 14px; - transition: all 200ms ease-out; - background: var(--theme-surface); - color: var(--theme-text); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); - - &:focus { - outline: none; - border-color: var(--theme-primary); - box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity - } - } -} - -.ug-view-toggle { - display: flex; - border: 1px solid #d1d5db; - border-radius: 8px; - overflow: hidden; - - .ug-btn { - border-radius: 0; - border: none; - background: var(--theme-surface); - color: var(--theme-text-secondary); - - &:first-child { - border-right: 1px solid #d1d5db; - } - - &.ug-btn-primary { - background: var(--theme-primary); - color: white; - } - } -} - -// Modern Table Styles -.ug-grid { - background: var(--theme-surface); - border-radius: 16px; - overflow: hidden; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - margin-bottom: 24px; - - ::ng-deep .datagrid { - .datagrid-head { - background: var(--theme-background); - - .datagrid-column { - padding: 16px 24px; - font-size: 12px; - font-weight: 600; - color: var(--theme-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; - border-bottom: 1px solid #e5e7eb; - } - } - - .datagrid-row { - transition: background-color 150ms ease-out; - - &:hover { - background: var(--theme-background); - } - - &:not(:last-child) { - border-bottom: 1px solid #e5e7eb; - } - - .datagrid-cell { - padding: 16px 24px; - font-size: 14px; - color: var(--theme-text); - } - } - - .datagrid-footer { - background: var(--theme-background); - border-top: 1px solid #e5e7eb; - padding: 16px 24px; - } - } -} - -.ug-grid-footer { - background: var(--theme-background); - border-top: 1px solid #e5e7eb; -} - -// Modern Card Styles - More beautiful design -.ug-cards { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 24px; - margin-bottom: 24px; -} - -.ug-card-item { - background: var(--theme-surface); - border: 1px solid rgba(0, 0, 0, 0.06); - border-radius: var(--theme-border-radius); // Using theme variable - box-shadow: var(--theme-shadow); // Using theme variable - overflow: hidden; - display: flex; - flex-direction: column; - transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); - - &:hover { - transform: translateY(-5px); - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity - } - - &__header { - display: flex; - align-items: center; - gap: 10px; - padding: 16px; - background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity - min-height: 60px; - } - - &__icon { - clr-icon { - width: 24px; - height: 24px; - color: var(--theme-primary); - } - } - - &__title { - font-weight: 700; - flex: 1 1 auto; - font-size: 18px; - color: var(--theme-text); - max-width: 60%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &__badge { - margin-left: auto; - display: inline-flex; - align-items: center; - padding: 4px 12px; - font-size: 12px; - font-weight: 600; - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.05em; - } - - &__body { - padding: 16px; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; - } - - &__footer { - padding: 16px; - display: flex; - gap: 8px; - border-top: 1px solid rgba(0, 0, 0, 0.06); - background: var(--theme-background); - } -} - -.ug-kv { - display: flex; - justify-content: space-between; - font-size: 14px; - - span { - color: var(--theme-text-secondary); - } - - strong { - color: var(--theme-text); - font-weight: 500; - text-align: right; - max-width: 60%; - overflow: hidden; - text-overflow: ellipsis; - } -} - -// Theme the card footer buttons -.ug-card-item__footer .ug-btn { - border-radius: 10px; - flex: 1; - justify-content: center; -} - -.ug-card-item__footer .ug-btn.ug-btn-outline { - border: 1px solid var(--theme-secondary); - color: var(--theme-secondary); - background: transparent; - - &:hover { - background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity - border-color: var(--theme-secondary); - color: var(--theme-secondary); - } -} - -.ug-card-item__footer .ug-btn.ug-btn-error { - background: var(--theme-error, #ef4444); - color: #fff; - border-color: var(--theme-error, #ef4444); - - &:hover { - background: var(--theme-error-dark, #dc2626); - border-color: var(--theme-error-dark, #dc2626); - transform: translateY(-2px); - } -} - -// Table view action buttons -.ug-action-item { - @extend .ug-btn; - @extend .ug-btn-ghost; - @extend .ug-btn-sm; - width: 100%; - justify-content: flex-start; - margin-bottom: 4px; - text-align: left; - - clr-icon { - width: 16px; - height: 16px; - margin-right: 8px; - } - - &.ug-btn-error { - color: var(--theme-error, #ef4444); - - &:hover { - background: rgba(239, 68, 68, 0.1); - } - } -} - -// Ensure action overflow is visible -::ng-deep .datagrid-action-overflow { - button.action-item { - display: flex; - align-items: center; - width: 100%; - text-align: left; - padding: 8px 12px; - - clr-icon { - margin-right: 8px; - } - } -} - -// Status Badges -.ug-status-badge { - display: inline-flex; - align-items: center; - padding: 6px 16px; - font-size: 13px; - font-weight: 600; - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.ug-status-enabled { - background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%); - color: #10b981; -} - -.ug-status-disabled { - background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%); - color: #ef4444; -} - -// Form Styles -.ug-form-group { - margin-bottom: 20px; -} - -.ug-form-label { - display: block; - font-size: 14px; - font-weight: 500; - color: var(--theme-text); - margin-bottom: 8px; - font-family: var(--theme-font-primary); -} - -.ug-form-input, .ug-form-select { - width: 100%; - padding: 12px 16px; - font-size: 14px; - line-height: 1.5; - color: var(--theme-text); - background: var(--theme-surface); - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; - transition: all 200ms ease-out; - margin-bottom: 0; - font-family: var(--theme-font-primary); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); - - &:focus { - outline: none; - border-color: var(--theme-primary); - box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity - } - - &:disabled { - background: var(--theme-background); - color: var(--theme-text-secondary); - cursor: not-allowed; - } - - &.error { - border-color: #ef4444; - box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); - } - - &::placeholder { - color: var(--theme-text-secondary); - } -} - -.ug-form-select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 12px center; - background-repeat: no-repeat; - background-size: 16px 12px; - padding-right: 40px; - appearance: none; -} - -.ug-form-error { - color: #ef4444; - font-size: 12px; - margin-top: 6px; - font-weight: 500; -} - -.required-field { - color: #ef4444; - margin-left: 4px; -} - -.ug-file-input { - width: 100%; - padding: 12px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; - background: var(--theme-surface); - color: var(--theme-text); - - &::file-selector-button { - @extend .ug-btn; - @extend .ug-btn-secondary; - margin-right: 12px; - padding: 8px 16px; - border: none; - } -} - -// Delete Modal Styles -.ug-delete-header { - text-align: center; - padding: 24px; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -.ug-delete-icon { - color: #ef4444; - margin-bottom: 16px; -} - -.ug-delete-title { - font-size: 24px; - font-weight: 700; - color: var(--theme-text); - margin: 0 0 8px 0; -} - -.ug-delete-subtitle { - font-size: 16px; - color: var(--theme-text-secondary); - margin: 0; -} - -.ug-delete-details { - padding: 24px; -} - -.ug-delete-detail-item { - display: flex; - justify-content: space-between; - padding: 12px 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); - - &:last-child { - border-bottom: none; - } -} - -.ug-delete-detail-label { - font-weight: 500; - color: var(--theme-text-secondary); -} - -.ug-delete-detail-value { - font-weight: 600; - color: var(--theme-text); -} - -.delete { - color: #ef4444; - text-align: center; - margin-bottom: 16px; - font-weight: 600; - font-size: 20px; -} - -.heading { - text-align: center; - margin-bottom: 24px; - color: var(--theme-text); - font-weight: 600; -} - -// Modal Header -::ng-deep .modal-header { - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-radius: 16px 16px 0 0 !important; - padding: 20px 24px !important; - - .modal-title { - color: white; - font-weight: 600; - font-size: 20px; - margin: 0; - } - - .close { - color: white; - opacity: 0.8; - - &:hover { - opacity: 1; - } - } -} - -// Modal Body -::ng-deep .modal-body { - padding: 24px !important; -} - -// Modal Footer -::ng-deep .modal-footer { - padding: 20px 24px !important; - background: var(--theme-background); - border-radius: 0 0 16px 16px !important; - border-top: 1px solid rgba(0, 0, 0, 0.05) !important; -} - -// Responsive adjustments -@media (max-width: 768px) { - .ug-hero { - flex-direction: column; - gap: 16px; - text-align: center; - - &__content { - flex-direction: column; - text-align: center; - } - - &__actions { - width: 100%; - justify-content: center; - flex-wrap: wrap; - } - } - - .ug-toolbar { - flex-direction: column; - gap: 16px; - } - - .ug-search { - max-width: 100%; - } - - .ug-cards { - grid-template-columns: 1fr; - } - - .ug-card-item { - &__header { - flex-direction: column; - text-align: center; - - &__icon { - margin-right: 0; - margin-bottom: 16px; - } - } - - &__footer { - justify-content: center; - } - } -} \ 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 5b62fad..d1f1934 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, OnDestroy } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { ExcelService } from '../../../../services/excel.service'; @@ -8,15 +8,12 @@ import { ToastrService } from 'ngx-toastr'; import { MenuGroupService } from 'src/app/services/admin/menu-group.service'; import { CsvService } from 'src/app/services/csv.service'; import { TranslateService } from '@ngx-translate/core'; -import { ThemeService } from 'src/app/services/theme.service'; -import { Subscription } from 'rxjs'; - @Component({ selector: 'app-usergrpmaintenance', templateUrl: './usergrpmaintenance.component.html', styleUrls: ['./usergrpmaintenance.component.scss'] }) -export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { +export class UsergrpmaintenanceComponent implements OnInit { loading = false; public entryForm: FormGroup; givendata; @@ -26,13 +23,10 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { modaledit=false; modaldelete=false; rowSelected :any= {}; - mcreate: string | boolean = false; - medit: string | boolean = false; - showdata: any; + mcreate; + medit; + showdata; submitted=false; - filterText: string = ''; - viewMode: 'table' | 'cards' = 'cards'; - private themeSubscription: Subscription; constructor( private excel: ExcelService, @@ -44,32 +38,21 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { private mainservice:UsergrpmaintainceService, private csvService: CsvService, private translate: TranslateService, - private themeService: ThemeService, ) { } - switchLanguage(language: string) { this.translate.use(language); } - ngOnInit(): void { - this.themeSubscription = this.themeService.currentTheme$.subscribe(() => { - // Theme changes will automatically update CSS variables - // This triggers a re-render of themed elements - }); - this.showdata = this.menuGroupService.getdata(); - console.log('Showdata:', this.showdata); - 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); - } + console.log(this.showdata); + this.mcreate=this.showdata.mcreate; + console.log(this.mcreate); + this.medit=this.showdata.medit + console.log(this.medit); this.mainservice.getAll().subscribe((data) => { - console.log('Data received:', data); - this.givendata = data || []; + console.log(data); + this.givendata = data; if(this.givendata.length==0){ this.error="No data Available"; console.log(this.error) @@ -89,30 +72,6 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { }); } - - ngOnDestroy(): void { - if (this.themeSubscription) { - this.themeSubscription.unsubscribe(); - } - } - - get totalGroups(): number { - const list: any[] = (this.givendata as unknown as any[]) || []; - return list.length; - } - - - get filteredGroups(): any[] { - const items: any[] = (this.givendata as unknown as any[]) || []; - const text = (this.filterText || '').toLowerCase(); - if (!text) { return items; } - return items.filter(g => ( - (g?.groupName || '').toLowerCase().includes(text) || - (g?.groupDesc || '').toLowerCase().includes(text) - )); - } - - setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; } onExport() { this.excel.exportAsExcelFile(this.givendata, 'user_', moment().format('YYYYMMDD_HHmmss')) @@ -122,8 +81,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { //this.router.navigate(["../usermaintanceadd"],{relativeTo:this.route}); } goToEdit(row){ - console.log('Edit clicked for row:', row); - this.rowSelected = {...row}; // Create a copy to avoid reference issues + this.rowSelected = row; this.modaledit=true; //this.router.navigate(["../usermaintanceedit/"+ id], { relativeTo: this.route }); } @@ -177,8 +135,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { // } } onDelete(row) { - console.log('Delete clicked for row:', row); - this.rowSelected = {...row}; // Create a copy to avoid reference issues + this.rowSelected = row; this.modaldelete=true; } @@ -243,4 +200,4 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy { 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 88e73f5..fd24638 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,202 +1,124 @@ -
          + +
          2. {{ 'SECURITY' | translate }}
          3. {{'USER_MAINTENANCE'| translate}}
            4. +
          -
          -
          -
          -
          -

          {{'USER_MAINTENANCE'| translate}}

          -

          {{ 'SECURITY' | translate }}

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

          {{'USER_MAINTENANCE'| 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' | translate}}?

          -

          {{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}

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

          Are You Sure Want to delete?

          +

          {{rowSelected.userId}}

          - - + +
          + -

          {{'IMPORT_FILE' | translate}}

          +

          Import File

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

          User Maintenance

          -

          Add New User

          -
          -
          -
          +

          User Maintenance

          + Add Mode
          +
          +
          +
          -
          -
          - -
          -
          - - -
          -
          *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
          -
          *Email must be a valid email address
          -
          -
          - -
          - - -
          -
          *Password is required
          -
          * Password must be at least 6 characters
          -
          -
          - -
          - - -
          -
          * Confirm Password is required
          -
          * Password and Confirm Password must be match.
          -
          -
          - -
          - - -
          -
          *This field is Required
          -
          -
          - -
          - - -
          -
          *This field is Required
          -
          -
          -
          - -
          - - -
          - -
          -
          +
          + + +
          +
          *This field is Required
          +
          * Please Follow your pattern,+91 Enter 10 digit Mobile Number. +
          - - -

          Select From List:

          -
          -
          -
          - +
          +
          +
          + + +
          +
          *Password is required
          +
          * Password must be at least 6 characters
          + +
          +
          +
          + + +
          +
          * 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
          +
          +
          + + +
          + + + +
          + +
          - - - Loading ... - - - - No - - - - - Customer Code - - - - - Customer Id - - - - - Customer Name - - - - {{i+1}} - {{user.customerCode}} - {{user.customerId}} - {{user.customerName}} + +

          Select From List:

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

          Select From List:

          -
          -
          -
          - + + {{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 + + +
          -
          + - - - Loading ... - - - - No - - - - - Department Code - - + +

          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 + + +           - - {{i+1}} - {{user.departmentCode}} - - - - - - -
          No{{user.id}}
          -           -           - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - - -
          -           - - -

          Select From List:

          -
          -
          -
          -
          -
          + - - - Loading ... - - - - No - - - - - Position Code - - + +

          Select From List:

          +
          +
          +
          + +
          +
          - - {{i+1}} - {{user.positionCode}} - - - - - - -
          No{{user.id}}
          -           -           + + Loading ... + + No + + + Position Code + - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - - -
          -           \ No newline at end of file + + {{i+1}} + {{user.positionCode}} + + + + + + + + + + +
          NO{{user.id}}
          +           +           + + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + +           + + + + +
          +           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 e182a11..c871274 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,6 +1,4 @@ @import '../../../../../styles1.scss'; -@import '../../../../../styles/_design-tokens.scss'; - input.ng-invalid.ng-touched { border-color: red; } @@ -8,383 +6,3 @@ input.ng-invalid.ng-touched { .error_mess { color: red; } - -// User Maintenance Add Styles -.um-hero { - display: flex; - justify-content: space-between; - align-items: center; - padding: 24px 32px; - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-radius: 16px; - margin-bottom: 24px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.2); - font-family: var(--theme-font-primary); - - &__content { - display: flex; - align-items: center; - gap: 16px; - } - - &__icon { - background: rgba(255, 255, 255, 0.2); - border-radius: 50%; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; - - clr-icon { - width: 36px; - height: 36px; - color: white; - } - } - - &__title { - font-size: 28px; - font-weight: 700; - margin: 0; - color: white; - font-family: var(--theme-font-secondary); - } - - &__subtitle { - font-size: 16px; - margin: 0; - opacity: 0.9; - color: rgba(255, 255, 255, 0.8); - } -} - -.um-add-container { - background: var(--theme-surface); - border-radius: 16px; - padding: 24px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - margin-bottom: 24px; -} - -.um-form-card { - background: var(--theme-surface); - border-radius: 12px; - padding: 24px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); -} - -.um-form { - .clr-row { - margin: 0 -12px; - } - - .clr-col-md-6, - .clr-col-sm-12 { - padding: 0 12px; - margin-bottom: 20px; - } -} - -.um-form-label { - display: block; - font-size: 14px; - font-weight: 500; - color: var(--theme-text); - margin-bottom: 8px; - font-family: var(--theme-font-primary); -} - -.um-form-input, -.um-form-select { - width: 100%; - padding: 12px 16px; - font-size: 14px; - line-height: 1.5; - color: var(--theme-text); - background: var(--theme-surface); - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; - transition: all 200ms ease-out; - margin-bottom: 0; - font-family: var(--theme-font-primary); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); - - &:focus { - outline: none; - border-color: var(--theme-primary); - box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity - } - - &:disabled { - background: var(--theme-background); - color: var(--theme-text-secondary); - cursor: not-allowed; - } - - &.error { - border-color: #ef4444; - box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); - } - - &::placeholder { - color: var(--theme-text-secondary); - } -} - -.um-form-select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 12px center; - background-repeat: no-repeat; - background-size: 16px 12px; - padding-right: 40px; - appearance: none; -} - -.um-error-message { - color: #ef4444; - font-size: 12px; - margin-top: 6px; - font-weight: 500; -} - -.required-field { - color: #ef4444; - margin-left: 4px; -} - -.um-form-actions { - display: flex; - gap: 12px; - margin-top: 24px; - padding-top: 24px; - border-top: 1px solid rgba(0, 0, 0, 0.05); -} - -// Modern Button Styles using ThemeService -.um-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 20px; - font-size: 14px; - font-weight: 500; - line-height: 1; - border-radius: 8px; - border: 1px solid transparent; - cursor: pointer; - transition: all 200ms ease-out; - text-decoration: none; - position: relative; - overflow: hidden; - font-family: var(--theme-font-primary); - z-index: 1; - - &:focus { - outline: 2px solid var(--theme-primary); - outline-offset: 2px; - } - - &:disabled { - opacity: 0.5; - cursor: not-allowed; - pointer-events: none; - } - - // Sizes - &.um-btn-sm { - padding: 8px 16px; - font-size: 13px; - height: 32px; - } - - &.um-btn-md { - padding: 12px 20px; - font-size: 14px; - height: 40px; - } - - &.um-btn-lg { - padding: 16px 24px; - font-size: 16px; - height: 48px; - } - - // Variants - &.um-btn-primary { - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-color: var(--theme-primary); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%); - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - } - - &:active { - transform: translateY(0); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - } - } - - &.um-btn-outline { - background: transparent; - color: var(--theme-secondary); - border-color: var(--theme-secondary); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity - border-color: var(--theme-secondary); - color: var(--theme-secondary); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - } - } - - &.um-btn-error { - background: var(--theme-error, #ef4444); - color: white; - border-color: var(--theme-error, #ef4444); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: var(--theme-error-dark, #dc2626); - border-color: var(--theme-error-dark, #dc2626); - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1); - } - } - - &.um-btn-ghost { - background: transparent; - color: var(--theme-text-secondary); - border-color: transparent; - - &:hover { - background: var(--theme-background); - color: var(--theme-text); - } - } -} - -.um-clickable-cell { - color: var(--theme-primary); - cursor: pointer; - transition: all 200ms ease-out; - - &:hover { - text-decoration: underline; - transform: translateY(-1px); - } -} - -// Modal Styles -::ng-deep .modal-header { - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-radius: 16px 16px 0 0 !important; - padding: 20px 24px !important; - - .modal-title { - color: white; - font-weight: 600; - font-size: 20px; - margin: 0; - } - - .close { - color: white; - opacity: 0.8; - - &:hover { - opacity: 1; - } - } -} - -::ng-deep .modal-body { - padding: 24px !important; -} - -::ng-deep .modal-footer { - padding: 20px 24px !important; - background: var(--theme-background); - border-radius: 0 0 16px 16px !important; - border-top: 1px solid rgba(0, 0, 0, 0.05) !important; -} - -// Data Grid Styles -.um-datagrid { - background: var(--theme-surface); - border-radius: 16px; - overflow: hidden; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - margin-bottom: 24px; - - ::ng-deep .datagrid { - .datagrid-head { - background: var(--theme-background); - - .datagrid-column { - padding: 16px 24px; - font-size: 12px; - font-weight: 600; - color: var(--theme-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; - border-bottom: 1px solid #e5e7eb; - } - } - - .datagrid-row { - transition: background-color 150ms ease-out; - - &:hover { - background: var(--theme-background); - } - - &:not(:last-child) { - border-bottom: 1px solid #e5e7eb; - } - - .datagrid-cell { - padding: 16px 24px; - font-size: 14px; - color: var(--theme-text); - } - } - - .datagrid-footer { - background: var(--theme-background); - border-top: 1px solid #e5e7eb; - padding: 16px 24px; - } - } -} - -// Responsive adjustments -@media (max-width: 768px) { - .um-hero { - flex-direction: column; - gap: 16px; - text-align: center; - - &__content { - flex-direction: column; - text-align: center; - } - } - - .um-form-actions { - flex-direction: column; - } - - .um-btn { - width: 100%; - } -} \ 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 d1f3388..a7522e4 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,9 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router'; import { AccesstypeService } from 'src/app/services/admin/accesstype.service'; import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service'; import { UsermaintanceService } from '../../../../services/admin/usermaintance.service'; -import { TranslateService } from '@ngx-translate/core'; -import { ThemeService } from 'src/app/services/theme.service'; -import { Subscription } from 'rxjs'; @Component({ selector: 'app-usermaintanceadd', @@ -15,63 +12,51 @@ import { Subscription } from 'rxjs'; }) 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; - private themeSubscription: Subscription; + submitted=false; - 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 translate: TranslateService, - private themeService: ThemeService, - ) { } + private usergrpservice: UsergrpmaintainceService + ) { } - 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], @@ -87,38 +72,31 @@ 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(); } - - ngOnDestroy(): void { - if (this.themeSubscription) { - this.themeSubscription.unsubscribe(); - } - } - - getdata() { + 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; @@ -142,11 +120,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) @@ -158,63 +136,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; +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.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; - } + }); + this.position=false; + } } -export function ConfirmedValidator(controlName: string, matchingControlName: string) { +export function ConfirmedValidator(controlName: string, matchingControlName: string){ return (formGroup: FormGroup) => { - const control = formGroup.controls[controlName]; - const matchingControl = formGroup.controls[matchingControlName]; - if (matchingControl.errors && !matchingControl.errors.confirmedValidator) { - return; - } - if (control.value !== matchingControl.value) { - matchingControl.setErrors({ confirmedValidator: true }); - } else { - matchingControl.setErrors(null); - } + 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 e2721fe..64d92fe 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,249 +1,348 @@ -
            -
            2. -
          2. Security
            3. -
          3. User Maintenance
            4. -
          -
          -
          -
          -
          -

          User Maintenance

          -

          Edit User

          -
          -
          -
          +

          User Maintenance

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

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

          Select From List:

          -
          -
          -
          - + + + + + + + + + + + + + + + + + +
          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 + + +
          -
          + - - - Loading ... - - - - No - - - - - Department Code - - + +

          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 + + +           - - {{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}} - - - Records per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} - of {{pagination.totalItems}} Records - - -           -
          -           \ No newline at end of file + + + + + + + + + +
          NO{{user.id}}
          +           + + + + + Records per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} Records + + + + + + + +
          +           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 66585f8..36abb8c 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,375 +1 @@ @import '../../../../../styles1.scss'; -@import '../../../../../styles/_design-tokens.scss'; - -// User Maintenance Edit Styles -.um-hero { - display: flex; - justify-content: space-between; - align-items: center; - padding: 24px 32px; - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-radius: 16px; - margin-bottom: 24px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.2); - font-family: var(--theme-font-primary); - - &__content { - display: flex; - align-items: center; - gap: 16px; - } - - &__icon { - background: rgba(255, 255, 255, 0.2); - border-radius: 50%; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; - - clr-icon { - width: 36px; - height: 36px; - color: white; - } - } - - &__title { - font-size: 28px; - font-weight: 700; - margin: 0; - color: white; - font-family: var(--theme-font-secondary); - } - - &__subtitle { - font-size: 16px; - margin: 0; - opacity: 0.9; - color: rgba(255, 255, 255, 0.8); - } -} - -.um-edit-container { - background: var(--theme-surface); - border-radius: 16px; - padding: 24px; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - margin-bottom: 24px; -} - -.um-form-card { - background: var(--theme-surface); - border-radius: 12px; - padding: 24px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); -} - -.um-form { - .clr-row { - margin: 0 -12px; - } - - .clr-col-md-6, - .clr-col-sm-12 { - padding: 0 12px; - margin-bottom: 20px; - } -} - -.um-form-label { - display: block; - font-size: 14px; - font-weight: 500; - color: var(--theme-text); - margin-bottom: 8px; - font-family: var(--theme-font-primary); -} - -.um-form-input, -.um-form-select { - width: 100%; - padding: 12px 16px; - font-size: 14px; - line-height: 1.5; - color: var(--theme-text); - background: var(--theme-surface); - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 8px; - transition: all 200ms ease-out; - margin-bottom: 0; - font-family: var(--theme-font-primary); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); - - &:focus { - outline: none; - border-color: var(--theme-primary); - box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity - } - - &:disabled { - background: var(--theme-background); - color: var(--theme-text-secondary); - cursor: not-allowed; - } - - &.error { - border-color: #ef4444; - box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); - } - - &::placeholder { - color: var(--theme-text-secondary); - } -} - -.um-form-select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 12px center; - background-repeat: no-repeat; - background-size: 16px 12px; - padding-right: 40px; - appearance: none; -} - -.required-field { - color: #ef4444; - margin-left: 4px; -} - -.um-form-actions { - display: flex; - gap: 12px; - margin-top: 24px; - padding-top: 24px; - border-top: 1px solid rgba(0, 0, 0, 0.05); -} - -// Modern Button Styles using ThemeService -.um-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 20px; - font-size: 14px; - font-weight: 500; - line-height: 1; - border-radius: 8px; - border: 1px solid transparent; - cursor: pointer; - transition: all 200ms ease-out; - text-decoration: none; - position: relative; - overflow: hidden; - font-family: var(--theme-font-primary); - z-index: 1; - - &:focus { - outline: 2px solid var(--theme-primary); - outline-offset: 2px; - } - - &:disabled { - opacity: 0.5; - cursor: not-allowed; - pointer-events: none; - } - - // Sizes - &.um-btn-sm { - padding: 8px 16px; - font-size: 13px; - height: 32px; - } - - &.um-btn-md { - padding: 12px 20px; - font-size: 14px; - height: 40px; - } - - &.um-btn-lg { - padding: 16px 24px; - font-size: 16px; - height: 48px; - } - - // Variants - &.um-btn-primary { - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-color: var(--theme-primary); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%); - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - } - - &:active { - transform: translateY(0); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - } - } - - &.um-btn-outline { - background: transparent; - color: var(--theme-secondary); - border-color: var(--theme-secondary); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity - border-color: var(--theme-secondary); - color: var(--theme-secondary); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - } - } - - &.um-btn-error { - background: var(--theme-error, #ef4444); - color: white; - border-color: var(--theme-error, #ef4444); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - - &:hover { - background: var(--theme-error-dark, #dc2626); - border-color: var(--theme-error-dark, #dc2626); - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1); - } - } - - &.um-btn-ghost { - background: transparent; - color: var(--theme-text-secondary); - border-color: transparent; - - &:hover { - background: var(--theme-background); - color: var(--theme-text); - } - } -} - -.um-clickable-cell { - color: var(--theme-primary); - cursor: pointer; - transition: all 200ms ease-out; - - &:hover { - text-decoration: underline; - transform: translateY(-1px); - } -} - -// Modal Styles -::ng-deep .modal-header { - background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%); - color: white; - border-radius: 16px 16px 0 0 !important; - padding: 20px 24px !important; - - .modal-title { - color: white; - font-weight: 600; - font-size: 20px; - margin: 0; - } - - .close { - color: white; - opacity: 0.8; - - &:hover { - opacity: 1; - } - } -} - -::ng-deep .modal-body { - padding: 24px !important; -} - -::ng-deep .modal-footer { - padding: 20px 24px !important; - background: var(--theme-background); - border-radius: 0 0 16px 16px !important; - border-top: 1px solid rgba(0, 0, 0, 0.05) !important; -} - -// Data Grid Styles -.um-datagrid { - background: var(--theme-surface); - border-radius: 16px; - overflow: hidden; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - margin-bottom: 24px; - - ::ng-deep .datagrid { - .datagrid-head { - background: var(--theme-background); - - .datagrid-column { - padding: 16px 24px; - font-size: 12px; - font-weight: 600; - color: var(--theme-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; - border-bottom: 1px solid #e5e7eb; - } - } - - .datagrid-row { - transition: background-color 150ms ease-out; - - &:hover { - background: var(--theme-background); - } - - &:not(:last-child) { - border-bottom: 1px solid #e5e7eb; - } - - .datagrid-cell { - padding: 16px 24px; - font-size: 14px; - color: var(--theme-text); - } - } - - .datagrid-footer { - background: var(--theme-background); - border-top: 1px solid #e5e7eb; - padding: 16px 24px; - } - } -} - -// Responsive adjustments -@media (max-width: 768px) { - .um-hero { - flex-direction: column; - gap: 16px; - text-align: center; - - &__content { - flex-direction: column; - text-align: center; - } - } - - .um-form-actions { - flex-direction: column; - } - - .um-btn { - width: 100%; - } -} \ 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 533fc95..2f33378 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,9 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { AccesstypeService } from 'src/app/services/admin/accesstype.service'; import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service'; import { UsermaintanceService } from '../../../../services/admin/usermaintance.service'; -import { TranslateService } from '@ngx-translate/core'; -import { ThemeService } from 'src/app/services/theme.service'; -import { Subscription } from 'rxjs'; +//import { Usermain } from 'src/app/models/usermaintaince'; @Component({ selector: 'app-usermaintanceedit', @@ -13,52 +11,40 @@ import { Subscription } from 'rxjs'; 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; - private themeSubscription: Subscription; + constructor(private route:ActivatedRoute, + private mainservice:UsermaintanceService, + private router: Router,private accesstype:AccesstypeService, + private usergrpservice: UsergrpmaintainceService - constructor(private route: ActivatedRoute, - private mainservice: UsermaintanceService, - private router: Router, private accesstype: AccesstypeService, - private usergrpservice: UsergrpmaintainceService, - private translate: TranslateService, - private themeService: ThemeService, - ) { } - - switchLanguage(language: string) { - this.translate.use(language); - } + ) { } ngOnInit(): void { - this.themeSubscription = this.themeService.currentTheme$.subscribe(() => { - // Theme changes will automatically update CSS variables - // This triggers a re-render of themed elements - }); - this.id = this.route.snapshot.params["id"]; console.log("update with id = ", this.id); this.getById(this.id); @@ -66,89 +52,82 @@ export class UsermaintanceeditComponent implements OnInit { this.usergrp(); this.getdata(); } - - ngOnDestroy(): void { - if (this.themeSubscription) { - this.themeSubscription.unsubscribe(); - } - } - - getdata() { + 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); - }); +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) => { +} +goback(){ + this.router.navigate(["../../usermaintance"], { relativeTo: this.route }); +} + gotodepartmet(){ + this.department=!this.department; + this.mainservice.getalldepartment().subscribe((data)=>{ console.log(data); - this.departmentdata = data; + this.departmentdata=data; }); } - getdepid(id: number) { - this.clickedID = id; - console.log("clicked by id" + id); + 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 ee798b2..30fdb9f 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,400 +8,236 @@ {{ 'SEQ_GENERATOR' | translate }}
              2. +
            -
            -
            -
            -
            -

            {{ 'SEQ_GENERATOR' | translate }}

            -

            {{ 'FND' | translate }}

            +
            +
            +
            +

            {{ 'SEQ_GENERATOR' | translate }}

            +
            + +
            + + +
            -
            -
            - - -
            -
            -
            -
            -
            -
            - - -
            -
            -
            -
            -
            {{ totalSequences }}
            -
            {{ 'TOTAL_SEQUENCES' | translate }}
            -
            -
            - - -
            -
            -
            + + + + Loading ... + +
            {{error}}
            +             + + + {{ 'CURRENT_NO' | translate }} + + + + + {{ 'NAME' | translate }} + + + + + {{ 'PREFIX' | translate }} + + - - - - {{ 'LOADING' | translate }} ... - -
            {{error}}
            -             - - - - - {{ 'CURRENT_NO' | translate }} - - - - - - - - {{ 'NAME' | translate }} - - - - - - - - {{ 'PREFIX' | translate }} - - - + + + {{ 'SEPARATOR' | translate }} + + - - - - {{ 'SEPARATOR' | translate }} - - - + + + {{ 'SEQUENCE_SIZE' | translate }} + + + + + {{user.current_no}} + {{user.sequence_name}} + {{user.prefix}} + {{user.seperator}} + {{user.sequence_size}} + + + + + - - - - {{ '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 }} - - -             + -
            -
            -
            -
            -
            {{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}}
            -
            -
            - - -
            -
            -
            + + + {{ 'USERS_PER_PAGE' | translate + }} + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users + + +
            - -
            -
            -
            - -
            -

            {{ 'ARE_YOU_SURE_WANT_TO_DELETE' | translate }}?

            -

            {{ 'THIS_ACTION_CANNOT_BE_UNDONE' | translate }}

            + + +
            +

            Are You Sure Want to delete?

            +

            {{rowSelected.id}}

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

            - {{ 'ADD_SEQUENCE_GENERATOR' | translate }} -

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

            Add Sequence Genarator

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

            - {{ '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 6ac473d..52f40a2 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,694 +1,72 @@ -@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 { +input[type=text],[type=number], +[type=date], +[type=password] { 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); - } - } -} - -.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; + 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; } .required-field { - color: var(--theme-error, #ef4444); - margin-left: 4px; + color: red; + font-size: 18px; } -.sq-form-help { - color: var(--theme-text-secondary); - font-size: 12px; - margin-bottom: 16px; - font-family: var(--theme-font-primary); +.green { + background-color: rgb(156, 231, 156); + 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); +.blue { + background-color: #57abcf; //rgb(82, 87, 161); + color: black; } -// 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; - 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); - } - } -} - -// 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); - } - } -} - -// Delete Modal Styles -.sq-delete-header { - text-align: center; - padding: 24px; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -.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; +.td-title { text-align: center; - - &__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: 150px; + color: white; + font-weight: bold; + background-color: rgba(63, 122, 231, 0.863); + //color: rgb(24, 13, 13); +} + +th { + //background-color:rgb(170, 169, 169); + font-weight: bold; +} + +.td-content { + text-align: left; +} + +.delete, +.heading { + text-align: center; + color: red; +} + +.section p { + background-color: rgb(206, 201, 201); + padding: 10px; + font-size: 18px; +} + +select { width: 100%; - } - - .sq-cards { - grid-template-columns: 1fr; - } - - .sq-form-actions { - flex-direction: column; - } - - .sq-btn { - width: 100%; - justify-content: center; - } - - .sq-card-item__footer { - flex-direction: column; - } + padding: 5px 5px; + border: 1px solid #ccc; + border-radius: 4px; +} + +input.ng-invalid.ng-touched { + border-color: red; +} + +.error_mess { + color: red; } \ 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 e826e2a..a9dea2a 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,13 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormGroup } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; import { SequenceService } from 'src/app/services/api/sequence.service'; import { ExcelService } from 'src/app/services/excel.service'; import * as moment from 'moment'; import { HttpErrorResponse } from '@angular/common/http'; -import { ThemeService } from 'src/app/services/theme.service'; - @Component({ selector: 'app-sequencegenarator', templateUrl: './sequencegenarator.component.html', @@ -24,70 +22,27 @@ export class SequencegenaratorComponent implements OnInit { modaladd = false; modaledit = false; submitted = false; - filterText = ''; - // Changed default view to cards - viewMode: 'table' | 'cards' = 'cards'; public entryForm: FormGroup; - - constructor( - private seqservice: SequenceService, - private router: Router, - private toastr: ToastrService, - private _fb: FormBuilder, - private route: ActivatedRoute, - private excel: ExcelService, - private themeService: ThemeService - ) { } + constructor(private seqservice: SequenceService, private router: Router, private toastr: ToastrService, private _fb: FormBuilder, + private route: ActivatedRoute, private excel: ExcelService) { } ngOnInit(): void { - // Ensure theme variables are applied to the view - this.themeService.currentTheme$.subscribe(() => { - // CSS variables are updated globally; no extra handling needed here - }); - this.getall(); this.entryForm = this._fb.group({ - prefix: [null, Validators.required], + prefix: [null], sequence_size: [null], suffix: [null], starting_no: [null], seperator: [null], - sequence_name: [null, Validators.required], + + sequence_name: [null], sequence_code: [null], demonstration: [null], + current_no: [null] }); } - - // Stats & filtering helpers for UI only - get totalSequences(): number { - return ((this.alldata as unknown as any[]) || []).length; - } - - get filteredSequences(): any[] { - const items: any[] = (this.alldata as unknown as any[]) || []; - const text = (this.filterText || '').toLowerCase(); - if (!text) { return items; } - - // Search across all relevant fields - return items.filter(s => ( - (s?.sequence_name || '').toLowerCase().includes(text) || - (s?.prefix || '').toLowerCase().includes(text) || - (s?.sequence_code || '').toLowerCase().includes(text) || - (s?.suffix || '').toLowerCase().includes(text) || - (s?.seperator || '').toLowerCase().includes(text) || - (s?.sequence_size?.toString() || '').includes(text) || - (s?.starting_no?.toString() || '').includes(text) || - (s?.current_no?.toString() || '').includes(text) || - (s?.demonstration || '').toLowerCase().includes(text) - )); - } - - setViewMode(mode: 'table' | 'cards') { - this.viewMode = mode; - } - getall() { this.seqservice.getAll().subscribe((data) => { console.log(data); @@ -102,8 +57,27 @@ export class SequencegenaratorComponent implements OnInit { if (error) { this.error = "No data Available OR server Error"; } + }) } + // onSubmit(){ + // console.log(this.entryForm.value); + // this.seqservice.create(this.entryForm.value).subscribe((data)=>{ + // console.log(data); + // if (data) { + // this.toastr.success('Added successfully'); + // } + // }, + // (error) => { + // console.log('Error in adding data...',+error); + // if(error){ + // this.toastr.error('Not added Data'); + // } + + // }); + // this.modaladd=false; + // } + onSubmit() { console.log(this.entryForm.value); @@ -112,8 +86,10 @@ export class SequencegenaratorComponent implements OnInit { return } this.onCreate(); + } + onCreate() { this.modaladd = false; this.seqservice.create(this.entryForm.value).subscribe( @@ -139,24 +115,22 @@ export class SequencegenaratorComponent implements OnInit { }); } + goToAdd() { this.modaladd = true; - this.submitted = false; - // Reset form - this.entryForm.reset(); + } onExport() { - this.excel.exportAsExcelFile(this.alldata, 'sequence_', + this.excel.exportAsExcelFile(this.alldata, 'user_', moment().format('YYYYMMDD_HHmmss')) } goToEdit(row) { - this.rowSelected = { ...row }; // Create a copy to avoid direct binding issues + this.rowSelected = row; console.log(row) this.modaledit = true; } - onDelete(row) { this.rowSelected = row; this.modaldelete = true; @@ -187,8 +161,8 @@ export class SequencegenaratorComponent implements OnInit { this.ngOnInit(); } }); + } - onUpdate(id) { this.modaledit = false; this.seqservice.update(id, this.rowSelected).subscribe((data) => { @@ -213,4 +187,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 9a2e3ff..8883c9d 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,235 +1,144 @@ - - -
            - -
            -
            - Logo -
            -
            -
            -
            - - {{ sysparameter?.company_Display_Name }} - Enterprise Platform - - - CloudnSure - Enterprise Platform - -
            + + +
            + + +
            + +
            + + {{ sysparameter?.company_Display_Name }} + + + CloudnSure +
            -
            - -
            - - Home -
            +
            + + - -
            - - Dashboard -
            +             + - -
            - - Shield Dashboard -
            +             + - -
            - - Reports -
            -             - - -
            - - Settings -
            -             - - -
            - - Theme Customization -
            -             + + +
            - - - - -
            - - - -
            - -
            + + About + Profile Settings + -
            - - - - About - - - - Profile Settings - - -
            - - - - - - - - English -
            🇺🇸
            + +             + English - - - हिन्दी -
            🇮🇳
            +             + Hindi - - - தமிழ் -
            🇮🇳
            +             + Tamil - - - ਪੰਜਾਬੀ -
            🇮🇳
            +             + Punjabi - - - മലയാളം -
            🇮🇳
            +             + Malayalam             + + Change Password + Log out -
            - - - - Change Password - - - - Log out -
            -
            -
            -
            - -
            +
            +
            +
            - + -
            -
            - - -
            - - - -
            - - {{ menu.menuItemDesc }} - -
            - - - - - - {{ subnav.menuItemDesc }} - - - -             -             - - - - - {{ menu.menuItemDesc }} + -
            + +
            - - - + - - + - - - - - + - @@ -306,18 +215,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 3afe935..77f629a 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,10 +1,3 @@ -// ======================================== -// MODERN LAYOUT COMPONENT STYLES -// ======================================== - -@import '../../../../styles/design-tokens'; - -// Legacy form styles (preserved for compatibility) input[type=text],[type=date], select,textarea { width: 100%; padding: 12px 20px; @@ -14,680 +7,6 @@ input[type=text],[type=date], select,textarea { border-radius: 4px; box-sizing: border-box; } -// Modern Layout Styles -// ======================================== - -.modern-layout { - background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%); - min-height: 100vh; -} - -// Header Styles -// ======================================== - -.modern-header { - background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%); - backdrop-filter: $backdrop-blur-md; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: $shadow-lg; - position: sticky; - top: 0; - z-index: $z-sticky; - height: $header-height; - padding: 0 $space-6; -} - -.modern-branding { - display: flex; - align-items: center; - gap: $space-4; - - .modern-nav-link { - display: flex; - align-items: center; - gap: $space-4; - text-decoration: none; - color: inherit; - transition: all $duration-200 $ease-out; - - &:hover { - transform: translateY(-1px); - } - } - - .logo-container { - position: relative; - display: flex; - align-items: center; - } - - .logo-wrapper { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 48px; - height: 48px; - background: $gradient-primary; - border-radius: $radius-xl; - box-shadow: $shadow-md; - transition: all $duration-300 $ease-out; - - &:hover { - transform: scale(1.05); - box-shadow: $shadow-lg; - } - - .logo-img { - width: 32px; - height: 32px; - object-fit: contain; - filter: brightness(0) invert(1); - } - - .logo-glow { - position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - background: $gradient-primary; - border-radius: $radius-xl; - opacity: 0; - filter: blur(8px); - transition: opacity $duration-300 $ease-out; - } - - &:hover .logo-glow { - opacity: 0.3; - } - } - - .brand-text { - display: flex; - flex-direction: column; - gap: 2px; - - .company-title { - font-size: $text-xl; - font-weight: $font-bold; - color: $white; - line-height: 1.2; - } - - .company-subtitle { - font-size: $text-xs; - font-weight: $font-medium; - color: rgba(255, 255, 255, 0.8); - text-transform: uppercase; - letter-spacing: 0.05em; - } - } -} - -// Header Navigation -// ======================================== - -.modern-header-nav { - display: flex; - align-items: center; - gap: $space-2; - margin-left: $space-8; - - .modern-nav-icon { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 48px; - height: 48px; - border-radius: $radius-lg; - background: transparent; - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - transition: all $duration-200 $ease-out; - - &:hover { - background: rgba(255, 255, 255, 0.1); - color: $white; - transform: translateY(-1px); - } - - &.active { - background: rgba(255, 255, 255, 0.2); - color: $white; - box-shadow: $shadow-md; - } - - .nav-icon-wrapper { - position: relative; - display: flex; - align-items: center; - justify-content: center; - } - - .nav-tooltip { - position: absolute; - top: -40px; - left: 50%; - transform: translateX(-50%); - background: $gray-900; - color: $white; - padding: $space-2 $space-3; - border-radius: $radius-md; - font-size: $text-xs; - font-weight: $font-medium; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: all $duration-200 $ease-out; - z-index: $z-tooltip; - - &::after { - content: ''; - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - border: 4px solid transparent; - border-top-color: $gray-900; - } - } - - &:hover .nav-tooltip { - opacity: 1; - visibility: visible; - } - } -} - -// Header Actions -// ======================================== - -.modern-header-actions { - display: flex; - align-items: center; - gap: $space-4; - margin-left: auto; -} - -.modern-user-dropdown { - .modern-user-button { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-2 $space-4; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: $radius-xl; - color: $white; - text-decoration: none; - transition: all $duration-200 $ease-out; - cursor: pointer; - - &:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); - transform: translateY(-1px); - box-shadow: $shadow-md; - } - - .user-avatar { - position: relative; - display: flex; - align-items: center; - justify-content: center; - } - - .avatar-circle { - width: 36px; - height: 36px; - background: rgba(255, 255, 255, 0.2); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: $white; - font-size: $text-sm; - font-weight: $font-semibold; - } - - .user-status-indicator { - position: absolute; - bottom: 0; - right: 0; - width: 12px; - height: 12px; - background: $accent-green; - border: 2px solid $white; - border-radius: 50%; - } - - .user-info { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; - - .user-name { - font-size: $text-sm; - font-weight: $font-semibold; - color: $white; - line-height: 1.2; - } - - .user-role { - font-size: $text-xs; - color: rgba(255, 255, 255, 0.8); - text-transform: uppercase; - letter-spacing: 0.05em; - } - } - - .dropdown-arrow { - font-size: $text-xs; - color: rgba(255, 255, 255, 0.8); - transition: transform $duration-200 $ease-out; - } - - &:hover .dropdown-arrow { - transform: rotate(180deg); - } - } -} - -// Dropdown Menu -// ======================================== - -.modern-dropdown-menu { - background: $white; - border: 1px solid $gray-200; - border-radius: $radius-xl; - box-shadow: $shadow-xl; - padding: $space-2; - min-width: 280px; - margin-top: $space-2; - - .dropdown-header { - padding: $space-4; - border-bottom: 1px solid $gray-200; - margin-bottom: $space-2; - - .user-profile { - display: flex; - align-items: center; - gap: $space-3; - - .profile-avatar { - width: 48px; - height: 48px; - background: $gradient-primary; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: $white; - font-size: $text-lg; - font-weight: $font-semibold; - } - - .profile-info { - display: flex; - flex-direction: column; - gap: 2px; - - .profile-name { - font-size: $text-sm; - font-weight: $font-semibold; - color: $gray-900; - } - - .profile-email { - font-size: $text-xs; - color: $gray-500; - } - } - } - } - - .dropdown-divider { - height: 1px; - background: $gray-200; - margin: $space-2 0; - } - - .modern-dropdown-item { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-3 $space-4; - border-radius: $radius-lg; - color: $gray-700; - text-decoration: none; - font-size: $text-sm; - font-weight: $font-medium; - transition: all $duration-200 $ease-out; - - &:hover { - background: $gray-50; - color: $gray-900; - transform: translateX(4px); - } - - &.logout-item { - color: $accent-red; - - &:hover { - background: rgba($accent-red, 0.1); - color: $accent-red; - } - } - - clr-icon { - font-size: $text-base; - width: 20px; - height: 20px; - } - } -} - -// Language Dropdown -// ======================================== - -.modern-language-dropdown { - .modern-language-button { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-3 $space-4; - width: 100%; - background: transparent; - border: none; - color: $gray-700; - text-decoration: none; - font-size: $text-sm; - font-weight: $font-medium; - border-radius: $radius-lg; - transition: all $duration-200 $ease-out; - cursor: pointer; - - &:hover { - background: $gray-50; - color: $gray-900; - } - - .language-icon { - font-size: $text-base; - color: $primary-600; - } - - .dropdown-arrow { - margin-left: auto; - font-size: $text-xs; - color: $gray-400; - transition: transform $duration-200 $ease-out; - } - - &:hover .dropdown-arrow { - transform: rotate(180deg); - } - } - - .modern-language-menu { - background: $white; - border: 1px solid $gray-200; - border-radius: $radius-xl; - box-shadow: $shadow-lg; - padding: $space-2; - min-width: 200px; - margin-left: $space-2; - - .modern-lang-item { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-3 $space-4; - border-radius: $radius-lg; - color: $gray-700; - text-decoration: none; - font-size: $text-sm; - font-weight: $font-medium; - transition: all $duration-200 $ease-out; - - &:hover { - background: $primary-50; - color: $primary-700; - transform: translateX(4px); - } - - .lang-icon { - font-size: $text-base; - color: $primary-600; - } - - .lang-flag { - margin-left: auto; - font-size: $text-lg; - } - } - } -} - -// Content Container -// ======================================== - -.modern-content-container { - display: flex; - min-height: calc(100vh - #{$header-height}); - background: transparent; -} - -.modern-content-area { - flex: 1; - background: transparent; - padding: 0; - overflow-x: hidden; - - .content-wrapper { - padding: $space-6; - min-height: calc(100vh - #{$header-height}); - } -} - -// Sidebar Styles -// ======================================== - -.modern-sidebar { - background: rgba(255, 255, 255, 0.98); - backdrop-filter: $backdrop-blur-md; - border-right: 1px solid rgba(0, 0, 0, 0.05); - box-shadow: $shadow-lg; - width: $sidebar-width; - transition: all $duration-300 $ease-out; - - &.nav-collapsed { - width: $sidebar-width-collapsed; - } - - .sidebar-content { - padding: $space-4 0; - } - - .menu-item-wrapper { - margin-bottom: $space-2; - } -} - -// Navigation Groups -// ======================================== - -.modern-nav-group { - margin-bottom: $space-2; - - .nav-group-header { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-3 $space-4; - color: $gray-700; - font-size: $text-sm; - font-weight: $font-semibold; - cursor: pointer; - border-radius: $radius-lg; - margin: 0 $space-2; - transition: all $duration-200 $ease-out; - - &:hover { - background: $gray-50; - color: $gray-900; - } - - .nav-group-icon { - font-size: $text-lg; - color: $primary-600; - } - - .nav-group-title { - flex: 1; - } - - .nav-group-arrow { - font-size: $text-sm; - color: $gray-400; - transition: transform $duration-200 $ease-out; - - &.rotated { - transform: rotate(90deg); - } - } - } - - .modern-nav-children { - margin-top: $space-1; - padding-left: $space-4; - } -} - -// Navigation Links -// ======================================== - -.modern-nav-link, -.modern-nav-link-single { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-3 $space-4; - color: $gray-600; - text-decoration: none; - font-size: $text-sm; - font-weight: $font-medium; - border-radius: $radius-lg; - margin: 0 $space-2; - transition: all $duration-200 $ease-out; - position: relative; - - &:hover { - background: $primary-50; - color: $primary-700; - transform: translateX(4px); - } - - &.active { - background: $primary-100; - color: $primary-800; - font-weight: $font-semibold; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 3px; - height: 20px; - background: $primary-600; - border-radius: 0 $radius-sm $radius-sm 0; - } - } - - .nav-link-icon { - font-size: $text-base; - color: $gray-500; - width: 20px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; - } - - .nav-link-text { - flex: 1; - } - - &:hover .nav-link-icon { - color: $primary-600; - } - - &.active .nav-link-icon { - color: $primary-700; - } -} - -// Responsive Design -// ======================================== - -@media (max-width: $breakpoint-lg) { - .modern-header { - padding: 0 $space-4; - } - - .modern-header-nav { - margin-left: $space-4; - gap: $space-1; - - .modern-nav-icon { - width: 40px; - height: 40px; - } - } - - .modern-content-area .content-wrapper { - padding: $space-4; - } - - .modern-sidebar { - width: $sidebar-width-collapsed; - - .nav-group-title, - .nav-link-text { - display: none; - } - - .modern-nav-link, - .modern-nav-link-single { - justify-content: center; - padding: $space-3; - } - } -} - -@media (max-width: $breakpoint-md) { - .modern-branding .brand-text { - display: none; - } - - .modern-user-button .user-info { - display: none; - } - - .modern-header-nav { - display: none; - } -} - -// Legacy styles (preserved for compatibility) -// ======================================== - .center-content { //width: 100%; // max-width: 800px; 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 4619158..7747324 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,7 +20,6 @@ import { ProjectSetup } from 'src/app/models/builder/Project_setup'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { TranslateService } from '@ngx-translate/core'; -import { ThemeService } from 'src/app/services/theme.service'; @Component({ selector: 'app-layout', @@ -29,52 +28,51 @@ import { ThemeService } from 'src/app/services/theme.service'; }) export class LayoutComponent implements OnInit { // baseUrl= environment.chaturl; - @Input() data: any; + @Input() data:any; loading = false; apps: Array = []; projectsetup; collapsed = true; - public showAppAlert: boolean = false; - modalteam = false; - public userName: string = ""; - - private formCode: string = 'teacher_form'; - public key: string = "formCode"; - public storage: Storage = sessionStorage; + public showAppAlert:boolean = false; +modalteam=false; + public userName: string=""; + 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; @@ -82,89 +80,89 @@ export class LayoutComponent implements OnInit { this.storage.setItem(this.key, this.formCode); this.user_name = this.userInfoService.getUserName(); console.log('user name: ' + this.user_name); - this.userrole = this.userInfoService.getRoles(); - 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; - // }); +// 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; + },); } +} +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); +} - - - 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; - },); - } +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; + },); } +} @@ -172,11 +170,11 @@ export class LayoutComponent implements OnInit { - showSetupMenus: boolean = false; - toggleSetupMenus() { - this.showSetupMenus = !this.showSetupMenus; +showSetupMenus: boolean = false; +toggleSetupMenus() { + this.showSetupMenus = !this.showSetupMenus; - } +} @@ -185,74 +183,74 @@ export class LayoutComponent implements OnInit { - // 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(); @@ -262,32 +260,32 @@ export class LayoutComponent implements OnInit { 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']); } @@ -295,17 +293,17 @@ export class LayoutComponent implements OnInit { me; md; mv; - send(val) { + send(val){ console.log(val); this.menuGroupService.storeaddeditvalues(val); - this.mc = val.mcreate; - this.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 b97a6cc..873f882 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,240 +1,3 @@ - -
            - -
            -
            -
            -

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