src/app/shared/components/notifications/notifications.component.html

@@ -1,4 +1,4 @@
 <div *ngIf="notifications$ | async as notification" class="notification" [ngClass]="notification.type">
-    {{ notification.message }}
+     {{ notification.message | translate }}
     <button class="close-btn" (click)="clearNotification()">×</button>
 </div>

src/app/shared/components/notifications/notifications.component.ts

@@ -2,10 +2,11 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { NotificationService } from '../../services/notification.service';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-notifications',
-  imports: [CommonModule],
+  imports: [CommonModule, TranslateModule],
   templateUrl: './notifications.component.html',
   styleUrl: './notifications.component.scss'
 })

src/app/sms-gateway/sms-gateway.component.html

@@ -22,7 +22,7 @@
                                                     class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
                                                     <span *ngIf="!selectedGateway"></span>
                                                     <span *ngIf="selectedGateway">{{(selectedGateway === selectedGatewayType.SYRIATEL ? 'syriatelCredentials' : (selectedGateway === selectedGatewayType.TWILIO ? 'twilioCredentials' : (selectedGateway === selectedGatewayType.JAZZ ? 'jazzCredentials' : ''))) | translate}}</span>
-                                                    <select class="form-select"style="min-width: 200px; width: auto;"  [(ngModel)]="selectedGateway">
+                                                    <select class="form-select-sms-gateway"style="min-width: 200px; width: auto;"  [(ngModel)]="selectedGateway">
                                                         <option value="">{{'SMSGatewaySelect' | translate}}</option>
                                                         <option [value]="selectedGatewayType.SYRIATEL">{{'SMSGatewaySyriatel' | translate}}</option>
                                                         <option [value]="selectedGatewayType.TWILIO">{{'SMSGatewayTwillio' | translate}}</option>

src/app/user-management/setup-user/setup-user.component.html

@@ -75,6 +75,31 @@
                                                         </div>
                                                          <div class="row g-3 mb-3">
                                                              <div class="col-md-6">
+                                                                <div class="d-flex align-items-center gap-2">
+                                                                    <label for="email" class="text-nowrap">
+                                                                        {{ 'email' | translate }}<span
+                                                                            class="mandatory">*</span>
+                                                                    </label>
+                                                                    <div class="password-wrapper position-relative w-100">
+                                                                       <input id="email"
+                                                                            class="form-control"
+                                                                            formControlName="email"   
+                                                                            name="email"                                                     
+                                                                            placeholder="{{ 'email' | translate }}" appNoWhitespaces/>
+                                                                            
+                                                                    <div class="text-danger" *ngIf="userForm.get('email')?.errors?.['required'] 
+                                                                                                    && userForm.get('email')?.touched">
+                                                                        {{ 'fieldRequired' | translate }}
+                                                                    </div>
+                                                                    <div class="text-danger" *ngIf="userForm.get('email')?.errors?.['email'] 
+                                                                                                    && userForm.get('email')?.touched">
+                                                                        {{"invalidEmail" | translate}}
+                                                                    </div>
+                                                                    </div>
+                                                                    
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-md-6">
                                                                 <div class="d-flex align-items-center gap-2">
                                                                     <label for="defaultPassword" class="text-nowrap">
                                                                         {{ 'defaultPassword' | translate }}<span
@@ -94,10 +119,24 @@
                                                                     
                                                                 </div>
                                                             </div>
-                                                            <div class="col-md-6">
+                                                            
-                                                                
+                                                        </div>
+                                                      <div class="col-md-6">
+                                                        <div class="d-flex align-items-center gap-2">
+                                                          <label for="userRole" class="text-nowrap">
+                                                            {{ 'SelectRole' | translate }}<span class="mandatory">*</span>
+                                                          </label>
+                                                            <div class="password-wrapper position-relative w-100">
+                                                              <ng-select id="userRole" class="form-select" formControlName="userRole" [items]="roleOptions" bindLabel="label"
+                                                                bindValue="value" placeholder="{{ 'SelectRole' | translate }}" >
+                                                              </ng-select>
+                                                            
+                                                              <div class="text-danger" *ngIf="userForm.get('userRole')?.touched && userForm.get('userRole')?.invalid">
+                                                                {{ 'fieldRequired' | translate }}
+                                                              </div>
                                                             </div>
                                                         </div>
+                                                      </div>
                                                          <div class="row g-3 mb-3">
                                                             <div class="col-md-6 ms-auto text-end">
                                                             <button type="button" class="btn btn-primary waves-effect waves-light" (click)="onSubmit()" [disabled]="userForm.invalid"

src/app/user-management/setup-user/setup-user.component.ts

@@ -35,6 +35,10 @@ export class SetupUserComponent implements OnInit {
   totalCount: number = 0;
   mode: 'edit' | 'view' = 'view';
   buttonPermissions: any;
+  roleOptions = [
+    { label: 'Admin', value: 'ADMIN' },
+    { label: 'User', value: 'USER' }
+  ];
 
 
   constructor(
@@ -78,7 +82,7 @@ export class SetupUserComponent implements OnInit {
       userId: this.userForm.value.userId,
       userFullname: this.userForm.value.userFullname,
       email: `${this.userForm.value.userId}@dummy.com`,
-      role: 'ADMIN',
+      role: this.userForm.value.userRole,
       porOrgacode: this.storageService.getItem('POR_ORGACODE'),
       password: this.userForm.value.defaultPassword
     }
@@ -90,6 +94,7 @@ export class SetupUserComponent implements OnInit {
       this.userForm.reset(); 
       this.mode = 'edit';
       },
+     
       error: (err: any) => console.error(err)
     });
 
@@ -131,7 +136,9 @@ ngOnInit(): void {
    this.userForm = this.fb.group({
       userId: ['', [Validators.required]],
       userFullname: ['', [Validators.required, Validators.maxLength(500)]],
-      defaultPassword: ['', Validators.required]
+      defaultPassword: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      userRole: ['', Validators.required]
     });  
   
   this.userService.loadUsers();

src/app/user-management/third-party-registration/third-party-registration.component.html

@@ -290,13 +290,7 @@
                                <div class="text-muted">
                                 {{'page' | translate}} {{'of' | translate}} ( {{'totalItems' | translate}})
                               </div>
-                               <!-- <div class="text-muted">
+                                                    
-                                {{'no_record' | translate}}
-                              </div>
-                              <div class="text-muted">
-                                {{'page' | translate}} {{'of' | translate}} ( {{'record' | translate}})
-                              </div> -->
-                            
                               <div class="btn-group">
                                 <button class="btn btn-primary waves-effect waves-light">
                                   {{'previous' | translate}}

src/assets/css/bootstrap.min.css

@@ -495,7 +495,8 @@ margin-bottom:.5rem;
 	padding-right: var(--bs-gutter-x, 12px);
 	padding-left: var(--bs-gutter-x, 12px);
 	margin-right: auto;
-	margin-left: auto
+	margin-left: auto;
+	margin-bottom: 4.2rem
 }
 @media (min-width:576px) {
 .container, .container-sm {
@@ -2183,7 +2184,7 @@ border-radius:.25rem
 .form-select {
 	display: block;
 	width: 100%;
-padding:.47rem;
+/* padding:.47rem;*/
 -moz-padding-start:calc(.75rem - 3px);
 font-size:.8125rem;
 	font-weight: 400;
@@ -2194,7 +2195,7 @@ font-size:.8125rem;
 	background-repeat: no-repeat;
 background-position:right .75rem center;
 	background-size: 16px 12px;
-	border: 1px solid #ced4da;
+	/* border: 1px solid #ced4da; */
 border-radius:.25rem;
 	-webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
 	transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
@@ -2204,6 +2205,22 @@ border-radius:.25rem;
 	-moz-appearance: none;
 	appearance: none
 }
+.form-select-sms-gateway {
+    padding: .15rem;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.form-select-sms-gateway:focus {
+    outline: none;             
+    box-shadow: none;          
+    border-color: #0d6efd;     
+}
+
+
+
+
 @media (prefers-reduced-motion:reduce) {
 .form-select {
 	-webkit-transition: none;
@@ -4411,6 +4428,7 @@ border-bottom-left-radius:calc(.25rem - 0)
 	-ms-flex: 1 1 auto;
 	flex: 1 1 auto;
 	padding: 1rem 1rem;
+	padding-bottom: 1.5rem;
 }
 .card-title {
 margin-bottom:.5rem

src/assets/i18n/Arabic.json

@@ -246,5 +246,8 @@
     "permissionManagement": "إدارة الأذونات",
     "userCode": "مستخدم",
     "choose" : "يختار",
-    "allow": "يسمح"
+    "allow": "يسمح",
+    "ERR_SEC_0001": "البريد الإلكتروني موجود بالفعل",
+    "ERR_SEC_0002": "اسم المستخدم موجود بالفعل",
+    "ERR_SEC_0003": "كلمة المرور القديمة غير صحيحة"
 }

src/assets/i18n/English.json

@@ -84,6 +84,7 @@
     "name":"Name",
     "EnterThirdPartyName":"Enter Third Party Name",
     "Email":"Email",
+    "email":"Email",
     "Address":"Address",
     "phoneNumber":"Phone Number",
     "PhoneNumberPlaceHolder":"Enter Phone Number",
@@ -245,5 +246,8 @@
     "permissionManagement": "Permission Managment",
     "userCode": "User",
     "choose" : "Choose",
-    "allow": "Allow"
+    "allow": "Allow",
+    "ERR_SEC_0001": "Email already exists",
+    "ERR_SEC_0002": "Username already exists",
+    "ERR_SEC_0003": "Old Password is not correct"
 }

src/styles.scss

@@ -165,4 +165,7 @@ ng-select.form-select-sm {
 .card-header{
     border: none !important;
  }
+ .ng-select .ng-select-container{
+  width: 98% !important;
+ }