add UsageLimit admin page

backend/core/src/main/java/org/opencdmp/commons/enums/UsageLimitTargetMetric.java

@@ -5,18 +5,18 @@ import org.opencdmp.data.converters.enums.DatabaseEnum;
 
 import java.util.Map;
 
-public enum UsageLimitMetricValue implements DatabaseEnum<String> {
+public enum UsageLimitTargetMetric implements DatabaseEnum<String> {
-	USER_COUNT(MetricValues.UserCount),
+	USER_COUNT(TargetMetrics.UserCount),
-	PLAN_COUNT(MetricValues.PlanCount),
+	PLAN_COUNT(TargetMetrics.PlanCount),
-	BLUEPRINT_COUNT(MetricValues.BlueprintCount),
+	BLUEPRINT_COUNT(TargetMetrics.BlueprintCount),
-	DESCRIPTION_COUNT(MetricValues.DescriptionCount),
+	DESCRIPTION_COUNT(TargetMetrics.DescriptionCount),
-	DESCRIPTION_TEMPLATE_COUNT(MetricValues.DescriptionTemplateCount),
+	DESCRIPTION_TEMPLATE_COUNT(TargetMetrics.DescriptionTemplateCount),
-	DESCRIPTION_TEMPLATE_TYPE_COUNT(MetricValues.DescriptionTemplateTypeCount),
+	DESCRIPTION_TEMPLATE_TYPE_COUNT(TargetMetrics.DescriptionTemplateTypeCount),
-	PREFILLING_SOURCES_COUNT(MetricValues.PrefillingSourcesCount),
+	PREFILLING_SOURCES_COUNT(TargetMetrics.PrefillingSourcesCount),
-	REFERENCE_TYPE_COUNT(MetricValues.ReferenceTypeCount);
+	REFERENCE_TYPE_COUNT(TargetMetrics.ReferenceTypeCount);
 	private final String value;
 
-	public static class MetricValues {
+	public static class TargetMetrics {
 		public static final String UserCount = "user_count";
 		public static final String PlanCount = "plan_count";
 		public static final String BlueprintCount = "blueprint_count";
@@ -27,7 +27,7 @@ public enum UsageLimitMetricValue implements DatabaseEnum<String> {
 		public static final String ReferenceTypeCount = "reference_type_count";
 	}
 
-	UsageLimitMetricValue(String value) {
+	UsageLimitTargetMetric(String value) {
 		this.value = value;
 	}
 
@@ -36,9 +36,9 @@ public enum UsageLimitMetricValue implements DatabaseEnum<String> {
 		return this.value;
 	}
 
-	private static final Map<String, UsageLimitMetricValue> map = EnumUtils.getEnumValueMap(UsageLimitMetricValue.class);
+	private static final Map<String, UsageLimitTargetMetric> map = EnumUtils.getEnumValueMap(UsageLimitTargetMetric.class);
 
-	public static UsageLimitMetricValue of(String i) {
+	public static UsageLimitTargetMetric of(String i) {
 		return map.get(i);
 	}
 }

backend/core/src/main/java/org/opencdmp/data/UsageLimitEntity.java

@@ -2,8 +2,9 @@ package org.opencdmp.data;
 
 import jakarta.persistence.*;
 import org.opencdmp.commons.enums.IsActive;
-import org.opencdmp.commons.enums.UsageLimitMetricValue;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
 import org.opencdmp.data.converters.enums.IsActiveConverter;
+import org.opencdmp.data.converters.enums.UsageLimitTargetMetricConverter;
 import org.opencdmp.data.tenant.TenantScopedBaseEntity;
 
 import java.time.Instant;
@@ -27,10 +28,11 @@ public class UsageLimitEntity extends TenantScopedBaseEntity {
     public static final int _labelLength = 250;
 
 
-    @Column(name = "metric_value", nullable = false)
+    @Column(name = "target_metric", nullable = false)
-    private UsageLimitMetricValue metricValue;
+    @Convert(converter = UsageLimitTargetMetricConverter.class)
+    private UsageLimitTargetMetric targetMetric;
 
-    public static final String _metricValue = "metricValue";
+    public static final String _targetMetric = "targetMetric";
 
     @Column(name = "value", nullable = false)
     private Long value;
@@ -69,12 +71,12 @@ public class UsageLimitEntity extends TenantScopedBaseEntity {
         this.label = label;
     }
 
-    public UsageLimitMetricValue getMetricValue() {
+    public UsageLimitTargetMetric getTargetMetric() {
-        return metricValue;
+        return targetMetric;
     }
 
-    public void setMetricValue(UsageLimitMetricValue metricValue) {
+    public void setTargetMetric(UsageLimitTargetMetric targetMetric) {
-        this.metricValue = metricValue;
+        this.targetMetric = targetMetric;
     }
 
     public Long getValue() {

backend/core/src/main/java/org/opencdmp/data/converters/enums/UsageLimitTargetMetricConverter.java

@@ -0,0 +1,11 @@
+package org.opencdmp.data.converters.enums;
+
+import jakarta.persistence.Converter;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
+
+@Converter
+public class UsageLimitTargetMetricConverter extends DatabaseEnumConverter<UsageLimitTargetMetric, String> {
+    public UsageLimitTargetMetric of(String i) {
+        return UsageLimitTargetMetric.of(i);
+    }
+}

backend/core/src/main/java/org/opencdmp/model/UsageLimit.java

@@ -1,7 +1,7 @@
 package org.opencdmp.model;
 
 import org.opencdmp.commons.enums.IsActive;
-import org.opencdmp.commons.enums.UsageLimitMetricValue;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
 
 import java.time.Instant;
 import java.util.UUID;
@@ -14,8 +14,8 @@ public class UsageLimit {
     private String label;
     public static final String _label = "label";
 
-    private UsageLimitMetricValue metricValue;
+    private UsageLimitTargetMetric targetMetric;
-    public static final String _metricValue = "metricValue";
+    public static final String _targetMetric = "targetMetric";
 
     private Long value;
     public static final String _value = "value";
@@ -51,12 +51,12 @@ public class UsageLimit {
         this.label = label;
     }
 
-    public UsageLimitMetricValue getMetricValue() {
+    public UsageLimitTargetMetric getTargetMetric() {
-        return metricValue;
+        return targetMetric;
     }
 
-    public void setMetricValue(UsageLimitMetricValue metricValue) {
+    public void setTargetMetric(UsageLimitTargetMetric targetMetric) {
-        this.metricValue = metricValue;
+        this.targetMetric = targetMetric;
     }
 
     public Long getValue() {

backend/core/src/main/java/org/opencdmp/model/builder/UsageLimitBuilder.java

@@ -52,8 +52,8 @@ public class UsageLimitBuilder extends BaseBuilder<UsageLimit, UsageLimitEntity>
                 m.setId(d.getId());
             if (fields.hasField(this.asIndexer(UsageLimit._label)))
                 m.setLabel(d.getLabel());
-            if (fields.hasField(this.asIndexer(UsageLimit._metricValue)))
+            if (fields.hasField(this.asIndexer(UsageLimit._targetMetric)))
-                m.setMetricValue(d.getMetricValue());
+                m.setTargetMetric(d.getTargetMetric());
             if (fields.hasField(this.asIndexer(UsageLimit._value)))
                 m.setValue(d.getValue());
             if (fields.hasField(this.asIndexer(UsageLimit._createdAt)))

backend/core/src/main/java/org/opencdmp/model/persist/UsageLimitPersist.java

@@ -1,7 +1,7 @@
 package org.opencdmp.model.persist;
 
 import gr.cite.tools.validation.specification.Specification;
-import org.opencdmp.commons.enums.UsageLimitMetricValue;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
 import org.opencdmp.commons.validation.BaseValidator;
 import org.opencdmp.convention.ConventionService;
 import org.opencdmp.data.UsageLimitEntity;
@@ -24,8 +24,8 @@ public class UsageLimitPersist {
     private String label;
     public static final String _label = "label";
 
-    private UsageLimitMetricValue metricValue;;
+    private UsageLimitTargetMetric targetMetric;;
-    public static final String _metricValue = "metricValue";
+    public static final String _targetMetric = "targetMetric";
 
     private Long value;
     public static final String _value = "value";
@@ -49,12 +49,12 @@ public class UsageLimitPersist {
         this.label = label;
     }
 
-    public UsageLimitMetricValue getMetricValue() {
+    public UsageLimitTargetMetric getTargetMetric() {
-        return metricValue;
+        return targetMetric;
     }
 
-    public void setMetricValue(UsageLimitMetricValue metricValue) {
+    public void setTargetMetric(UsageLimitTargetMetric targetMetric) {
-        this.metricValue = metricValue;
+        this.targetMetric = targetMetric;
     }
 
     public Long getValue() {
@@ -110,11 +110,14 @@ public class UsageLimitPersist {
                             .must(() -> this.lessEqualLength(item.getLabel(), UsageLimitEntity._labelLength))
                             .failOn(UsageLimitPersist._label).failWith(this.messageSource.getMessage("Validation_MaxLength", new Object[]{UsageLimitPersist._label}, LocaleContextHolder.getLocale())),
                     this.spec()
-                            .must(() -> !this.isNull(item.getMetricValue()))
+                            .must(() -> !this.isNull(item.getTargetMetric()))
-                            .failOn(UsageLimitPersist._metricValue).failWith(this.messageSource.getMessage("Validation_Required", new Object[]{UsageLimitPersist._metricValue}, LocaleContextHolder.getLocale())),
+                            .failOn(UsageLimitPersist._targetMetric).failWith(this.messageSource.getMessage("Validation_Required", new Object[]{UsageLimitPersist._targetMetric}, LocaleContextHolder.getLocale())),
                     this.spec()
                             .must(() -> !this.isNull(item.getValue()))
-                            .failOn(UsageLimitPersist._value).failWith(this.messageSource.getMessage("Validation_Required", new Object[]{UsageLimitPersist._value}, LocaleContextHolder.getLocale()))
+                            .failOn(UsageLimitPersist._value).failWith(this.messageSource.getMessage("Validation_Required", new Object[]{UsageLimitPersist._value}, LocaleContextHolder.getLocale())),
+                    this.spec()
+                            .must(() -> item.getValue() > 0)
+                            .failOn(UsageLimitPersist._value).failWith(this.messageSource.getMessage("Validation_UnexpectedValue", new Object[]{UsageLimitPersist._value}, LocaleContextHolder.getLocale()))
                     );
         }
     }

backend/core/src/main/java/org/opencdmp/query/UsageLimitQuery.java

@@ -10,7 +10,7 @@ import jakarta.persistence.criteria.CriteriaBuilder;
 import jakarta.persistence.criteria.Predicate;
 import org.opencdmp.authorization.AuthorizationFlags;
 import org.opencdmp.commons.enums.IsActive;
-import org.opencdmp.commons.enums.UsageLimitMetricValue;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
 import org.opencdmp.commons.scope.user.UserScope;
 import org.opencdmp.data.*;
 import org.opencdmp.model.UsageLimit;
@@ -32,7 +32,7 @@ public class UsageLimitQuery extends QueryBase<UsageLimitEntity> {
 
     private Collection<IsActive> isActives;
 
-    private Collection<UsageLimitMetricValue> usageLimitMetricValues;
+    private Collection<UsageLimitTargetMetric> usageLimitTargetMetrics;
 
     private Collection<UUID> excludedIds;
 
@@ -88,18 +88,18 @@ public class UsageLimitQuery extends QueryBase<UsageLimitEntity> {
         return this;
     }
 
-    public UsageLimitQuery usageLimitMetricValues(UsageLimitMetricValue value) {
+    public UsageLimitQuery usageLimitTargetMetrics(UsageLimitTargetMetric value) {
-        this.usageLimitMetricValues = List.of(value);
+        this.usageLimitTargetMetrics = List.of(value);
         return this;
     }
 
-    public UsageLimitQuery usageLimitMetricValues(UsageLimitMetricValue... value) {
+    public UsageLimitQuery usageLimitTargetMetrics(UsageLimitTargetMetric... value) {
-        this.usageLimitMetricValues = Arrays.asList(value);
+        this.usageLimitTargetMetrics = Arrays.asList(value);
         return this;
     }
 
-    public UsageLimitQuery usageLimitMetricValues(Collection<UsageLimitMetricValue> values) {
+    public UsageLimitQuery usageLimitTargetMetrics(Collection<UsageLimitTargetMetric> values) {
-        this.usageLimitMetricValues = values;
+        this.usageLimitTargetMetrics = values;
         return this;
     }
 
@@ -145,7 +145,7 @@ public class UsageLimitQuery extends QueryBase<UsageLimitEntity> {
 
     @Override
     protected Boolean isFalseQuery() {
-        return this.isEmpty(this.ids) || this.isEmpty(this.isActives) || this.isEmpty(this.excludedIds) || this.isEmpty(this.usageLimitMetricValues);
+        return this.isEmpty(this.ids) || this.isEmpty(this.isActives) || this.isEmpty(this.excludedIds) || this.isEmpty(this.usageLimitTargetMetrics);
     }
 
     @Override
@@ -166,9 +166,9 @@ public class UsageLimitQuery extends QueryBase<UsageLimitEntity> {
                 inClause.value(item);
             predicates.add(inClause);
         }
-        if (this.usageLimitMetricValues != null) {
+        if (this.usageLimitTargetMetrics != null) {
-            CriteriaBuilder.In<UsageLimitMetricValue> inClause = queryContext.CriteriaBuilder.in(queryContext.Root.get(UsageLimitEntity._metricValue));
+            CriteriaBuilder.In<UsageLimitTargetMetric> inClause = queryContext.CriteriaBuilder.in(queryContext.Root.get(UsageLimitEntity._targetMetric));
-            for (UsageLimitMetricValue item : this.usageLimitMetricValues)
+            for (UsageLimitTargetMetric item : this.usageLimitTargetMetrics)
                 inClause.value(item);
             predicates.add(inClause);
         }
@@ -192,7 +192,7 @@ public class UsageLimitQuery extends QueryBase<UsageLimitEntity> {
         item.setId(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._id, UUID.class));
         item.setTenantId(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._tenantId, UUID.class));
         item.setLabel(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._label, String.class));
-        item.setMetricValue(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._metricValue, UsageLimitMetricValue.class));
+        item.setTargetMetric(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._targetMetric, UsageLimitTargetMetric.class));
         item.setValue(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._value, Long.class));
         item.setCreatedAt(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._createdAt, Instant.class));
         item.setUpdatedAt(QueryBase.convertSafe(tuple, columns, UsageLimitEntity._updatedAt, Instant.class));
@@ -206,8 +206,8 @@ public class UsageLimitQuery extends QueryBase<UsageLimitEntity> {
             return UsageLimitEntity._id;
         else if (item.match(UsageLimit._label))
             return UsageLimitEntity._label;
-        else if (item.match(UsageLimit._metricValue))
+        else if (item.match(UsageLimit._targetMetric))
-            return UsageLimitEntity._metricValue;
+            return UsageLimitEntity._targetMetric;
         else if (item.match(UsageLimit._value))
             return UsageLimitEntity._value;
         else if (item.match(UsageLimit._createdAt))

backend/core/src/main/java/org/opencdmp/query/lookup/UsageLimitLookup.java

@@ -3,7 +3,7 @@ package org.opencdmp.query.lookup;
 import gr.cite.tools.data.query.Lookup;
 import gr.cite.tools.data.query.QueryFactory;
 import org.opencdmp.commons.enums.IsActive;
-import org.opencdmp.commons.enums.UsageLimitMetricValue;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
 import org.opencdmp.query.UsageLimitQuery;
 
 import java.util.List;
@@ -14,7 +14,7 @@ public class UsageLimitLookup extends Lookup {
     private String like;
     private List<IsActive> isActive;
     private List<UUID> ids;
-    private List<UsageLimitMetricValue> usageLimitMetricValues;
+    private List<UsageLimitTargetMetric> usageLimitTargetMetrics;
     private List<UUID> excludedIds;
 
     public String getLike() {
@@ -39,12 +39,12 @@ public class UsageLimitLookup extends Lookup {
 
     public void setIds(List<UUID> ids) { this.ids = ids; }
 
-    public List<UsageLimitMetricValue> getUsageLimitsMetricValues() {
+    public List<UsageLimitTargetMetric> getUsageLimitTargetMetrics() {
-        return usageLimitMetricValues;
+        return usageLimitTargetMetrics;
     }
 
-    public void setUsageLimitsMetricValues(List<UsageLimitMetricValue> usageLimitMetricValues) {
+    public void setUsageLimitTargetMetrics(List<UsageLimitTargetMetric> usageLimitTargetMetrics) {
-        this.usageLimitMetricValues = usageLimitMetricValues;
+        this.usageLimitTargetMetrics = usageLimitTargetMetrics;
     }
 
     public List<UUID> getExcludedIds() {
@@ -60,7 +60,7 @@ public class UsageLimitLookup extends Lookup {
         if (this.like != null) query.like(this.like);
         if (this.isActive != null) query.isActive(this.isActive);
         if (this.ids != null) query.ids(this.ids);
-        if (this.usageLimitMetricValues != null) query.usageLimitMetricValues(this.usageLimitMetricValues);
+        if (this.usageLimitTargetMetrics != null) query.usageLimitTargetMetrics(this.usageLimitTargetMetrics);
         if (this.excludedIds != null) query.excludedIds(this.excludedIds);
 
         this.enrichCommon(query);

backend/core/src/main/java/org/opencdmp/service/usagelimit/UsageLimitService.java

@@ -5,7 +5,7 @@ import gr.cite.tools.exception.MyForbiddenException;
 import gr.cite.tools.exception.MyNotFoundException;
 import gr.cite.tools.exception.MyValidationException;
 import gr.cite.tools.fieldset.FieldSet;
-import org.opencdmp.commons.enums.UsageLimitMetricValue;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
 import org.opencdmp.model.UsageLimit;
 import org.opencdmp.model.persist.UsageLimitPersist;
 
@@ -18,6 +18,6 @@ public interface UsageLimitService {
 
     void deleteAndSave(UUID id) throws MyForbiddenException, InvalidApplicationException;
 
-    void checkIncrease(UsageLimitMetricValue metric);
+    void checkIncrease(UsageLimitTargetMetric metric);
 
 }

backend/core/src/main/java/org/opencdmp/service/usagelimit/UsageLimitServiceImpl.java

@@ -14,7 +14,7 @@ import gr.cite.tools.logging.MapLogEntry;
 import org.opencdmp.authorization.AuthorizationFlags;
 import org.opencdmp.authorization.Permission;
 import org.opencdmp.commons.enums.IsActive;
-import org.opencdmp.commons.enums.UsageLimitMetricValue;
+import org.opencdmp.commons.enums.UsageLimitTargetMetric;
 import org.opencdmp.commons.scope.user.UserScope;
 import org.opencdmp.convention.ConventionService;
 import org.opencdmp.data.TenantEntityManager;
@@ -98,7 +98,7 @@ public class UsageLimitServiceImpl implements UsageLimitService {
         }
 
         data.setLabel(model.getLabel());
-        data.setMetricValue(model.getMetricValue());
+        data.setTargetMetric(model.getTargetMetric());
         data.setValue(model.getValue());
         data.setUpdatedAt(Instant.now());
         if (isUpdate)
@@ -118,7 +118,7 @@ public class UsageLimitServiceImpl implements UsageLimitService {
         this.deleterFactory.deleter(UsageLimitDeleter.class).deleteAndSaveByIds(List.of(id));
     }
 
-    public void checkIncrease(UsageLimitMetricValue metric) {
+    public void checkIncrease(UsageLimitTargetMetric metric) {
         //TODO
     }
 

frontend/src/app/app-routing.module.ts

@@ -357,6 +357,19 @@ const appRoutes: Routes = [
 			title: 'GENERAL.TITLES.ENTITY-LOCKS'
 		},
 	},
+	{
+		path: 'usage-limits',
+		loadChildren: () => import('./ui/admin/usage-limit/usage-limit.module').then(m => m.UsageLimitModule),
+		data: {
+			authContext: {
+				permissions: [AppPermission.ViewUsageLimitPage]
+			},
+			...BreadcrumbService.generateRouteDataConfiguration({
+				title: 'BREADCRUMBS.USAGE-LIMITS'
+			}),
+			title: 'GENERAL.TITLES.USAGE-LIMITS'
+		},
+	},
 	{
 		path: 'annotation-statuses',
 		loadChildren: () => import('@annotation-service/ui/admin/status/status.module').then(m => m.StatusModule),

frontend/src/app/core/common/enum/permission.enum.ts

@@ -200,6 +200,11 @@ export enum AppPermission {
 	EditStatus = "EditStatus",
 	DeleteStatus = "DeleteStatus",
 
+	//UsageLimit
+	BrowseUsageLimit = "BrowseUsageLimit",
+	EditUsageLimit = "EditUsageLimit",
+	DeleteUsageLimit = "DeleteUsageLimit",
+
 
 	// UI Pages
 	ViewDescriptionTemplateTypePage = "ViewDescriptionTemplateTypePage",
@@ -225,5 +230,6 @@ export enum AppPermission {
 	ViewMineInAppNotificationPage = "ViewMineInAppNotificationPage",
 	ViewTenantConfigurationPage = "ViewTenantConfigurationPage",
 	ViewStatusPage = "ViewStatusPage",
+	ViewUsageLimitPage = "ViewUsageLimitPage",
 }
 

frontend/src/app/core/common/enum/usage-limit-target-metric.ts

@@ -0,0 +1,10 @@
+export enum UsageLimitTargetMetric {
+	USER_COUNT = "user_count",
+	PLAN_COUNT = "plan_count",
+	BLUEPRINT_COUNT = "blueprint_count",
+	DESCRIPTION_COUNT = "description_count",
+	DESCRIPTION_TEMPLATE_COUNT = "description_template_count",
+	DESCRIPTION_TEMPLATE_TYPE_COUNT = "description_template_type_count",
+	PREFILLING_SOURCES_COUNT = "prefilling_sources_count",
+	REFERENCE_TYPE_COUNT = "reference_type_count"
+}

frontend/src/app/core/core-service.module.ts

@@ -47,6 +47,7 @@ import { TenantConfigurationService } from './services/tenant-configuration/tena
 import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service';
 import { TenantHandlingService } from './services/tenant/tenant-handling.service';
 import { RouterUtilsService } from './services/router/router-utils.service';
+import { UsageLimitService } from './services/usage-limit/usage.service';
 //
 //
 // This is shared module that provides all the services. Its imported only once on the AppModule.
@@ -113,7 +114,8 @@ export class CoreServiceModule {
 				TenantConfigurationService,
 				StorageFileService,
 				TenantHandlingService,
-				RouterUtilsService
+				RouterUtilsService,
+				UsageLimitService
 			],
 		};
 	}

frontend/src/app/core/model/usage-limit/usage-limit.ts

@@ -0,0 +1,14 @@
+import { UsageLimitTargetMetric } from "@app/core/common/enum/usage-limit-target-metric";
+import { BaseEntity, BaseEntityPersist } from "@common/base/base-entity.model";
+
+export interface UsageLimit extends BaseEntity {
+	label: string;
+	targetMetric: UsageLimitTargetMetric;
+	value: number;
+}
+
+export interface UsageLimitPersist extends BaseEntityPersist {
+	label: string;
+	targetMetric: UsageLimitTargetMetric;
+	value: number;
+}

frontend/src/app/core/query/usage-limit.lookup.ts

@@ -0,0 +1,24 @@
+import { Lookup } from '@common/model/lookup';
+import { Guid } from '@common/types/guid';
+import { IsActive } from '../common/enum/is-active.enum';
+import { UsageLimitTargetMetric } from '../common/enum/usage-limit-target-metric';
+
+export class UsageLimitLookup extends Lookup implements UsageLimitFilter {
+	ids: Guid[];
+	usageLimitTargetMetrics: UsageLimitTargetMetric[];
+	excludedIds: Guid[];
+	like: string;
+	isActive: IsActive[];
+
+	constructor() {
+		super();
+	}
+}
+
+export interface UsageLimitFilter {
+	ids: Guid[];
+	usageLimitTargetMetrics: UsageLimitTargetMetric[];
+	excludedIds: Guid[];
+	like: string;
+	isActive: IsActive[];
+}

frontend/src/app/core/services/usage-limit/usage.service.ts

@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { IsActive } from '@app/core/common/enum/is-active.enum';
+import { UsageLimit, UsageLimitPersist } from '@app/core/model/usage-limit/usage-limit';
+import { UsageLimitLookup } from '@app/core/query/usage-limit.lookup';
+import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
+import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
+import { QueryResult } from '@common/model/query-result';
+import { FilterService } from '@common/modules/text-filter/filter-service';
+import { Guid } from '@common/types/guid';
+import { Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { nameof } from 'ts-simple-nameof';
+import { ConfigurationService } from '../configuration/configuration.service';
+import { BaseHttpV2Service } from '../http/base-http-v2.service';
+
+@Injectable()
+export class UsageLimitService {
+
+	constructor(private http: BaseHttpV2Service, private configurationService: ConfigurationService, private filterService: FilterService) {
+	}
+
+	private get apiBase(): string { return `${this.configurationService.server}usage-limit`; }
+
+	query(q: UsageLimitLookup): Observable<QueryResult<UsageLimit>> {
+		const url = `${this.apiBase}/query`;
+		return this.http.post<QueryResult<UsageLimit>>(url, q).pipe(catchError((error: any) => throwError(error)));
+	}
+
+	getSingle(id: Guid, reqFields: string[] = []): Observable<UsageLimit> {
+		const url = `${this.apiBase}/${id}`;
+		const options = { params: { f: reqFields } };
+
+		return this.http
+			.get<UsageLimit>(url, options).pipe(
+				catchError((error: any) => throwError(error)));
+	}
+
+	persist(item: UsageLimitPersist): Observable<UsageLimit> {
+		const url = `${this.apiBase}/persist`;
+
+		return this.http
+			.post<UsageLimit>(url, item).pipe(
+				catchError((error: any) => throwError(error)));
+	}
+
+	delete(id: Guid): Observable<UsageLimit> {
+		const url = `${this.apiBase}/${id}`;
+
+		return this.http
+			.delete<UsageLimit>(url).pipe(
+				catchError((error: any) => throwError(error)));
+	}
+
+	//
+	// Autocomplete Commons
+	//
+	// tslint:disable-next-line: member-ordering
+	singleAutocompleteConfiguration: SingleAutoCompleteConfiguration = {
+		initialItems: (data?: any) => this.query(this.buildAutocompleteLookup()).pipe(map(x => x.items)),
+		filterFn: (searchQuery: string, data?: any) => this.query(this.buildAutocompleteLookup(searchQuery)).pipe(map(x => x.items)),
+		getSelectedItem: (selectedItem: any) => this.query(this.buildAutocompleteLookup(null, null, [selectedItem])).pipe(map(x => x.items[0])),
+		displayFn: (item: UsageLimit) => item.label,
+		titleFn: (item: UsageLimit) => item.label,
+		valueAssign: (item: UsageLimit) => item.id,
+	};
+
+	// tslint:disable-next-line: member-ordering
+	multipleAutocompleteConfiguration: MultipleAutoCompleteConfiguration = {
+		initialItems: (excludedItems: any[], data?: any) => this.query(this.buildAutocompleteLookup(null, excludedItems ? excludedItems : null)).pipe(map(x => x.items)),
+		filterFn: (searchQuery: string, excludedItems: any[]) => this.query(this.buildAutocompleteLookup(searchQuery, excludedItems)).pipe(map(x => x.items)),
+		getSelectedItems: (selectedItems: any[]) => this.query(this.buildAutocompleteLookup(null, null, selectedItems)).pipe(map(x => x.items)),
+		displayFn: (item: UsageLimit) => item.label,
+		titleFn: (item: UsageLimit) => item.label,
+		valueAssign: (item: UsageLimit) => item.id,
+	};
+
+	private buildAutocompleteLookup(like?: string, excludedIds?: Guid[], ids?: Guid[]): UsageLimitLookup {
+		const lookup: UsageLimitLookup = new UsageLimitLookup();
+		lookup.page = { size: 100, offset: 0 };
+		if (excludedIds && excludedIds.length > 0) { lookup.excludedIds = excludedIds; }
+		if (ids && ids.length > 0) { lookup.ids = ids; }
+		lookup.isActive = [IsActive.Active];
+		lookup.project = {
+			fields: [
+				nameof<UsageLimit>(x => x.id),
+				nameof<UsageLimit>(x => x.label)
+			]
+		};
+		lookup.order = { items: [nameof<UsageLimit>(x => x.label)] };
+		if (like) { lookup.like = this.filterService.transformLike(like); }
+		return lookup;
+	}
+}

frontend/src/app/core/services/utilities/enum-utils.service.ts

@@ -29,6 +29,7 @@ import { AppRole } from '../../common/enum/app-role';
 import { PlanBlueprintExtraFieldDataType } from '../../common/enum/plan-blueprint-field-type';
 import { PlanStatus } from '../../common/enum/plan-status';
 import { ValidationType } from '../../common/enum/validation-type';
+import { UsageLimitTargetMetric } from '@app/core/common/enum/usage-limit-target-metric';
 
 @Injectable()
 export class EnumUtils {
@@ -303,4 +304,18 @@ export class EnumUtils {
 		}
 	}
 
+	public toUsageLimitTargetMetricString(value: UsageLimitTargetMetric): string {
+		switch (value) {
+			case UsageLimitTargetMetric.USER_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.USER-COUNT');
+			case UsageLimitTargetMetric.PLAN_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.PLAN-COUNT');
+			case UsageLimitTargetMetric.BLUEPRINT_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.BLUEPRINT-COUNT');
+			case UsageLimitTargetMetric.DESCRIPTION_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.DESCRIPTION-COUNT');
+			case UsageLimitTargetMetric.DESCRIPTION_TEMPLATE_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.DESCRIPTION-TEMPLATE-COUNT');
+			case UsageLimitTargetMetric.DESCRIPTION_TEMPLATE_TYPE_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.DESCRIPTION-TEMPLATE-TYPE-COUNT');
+			case UsageLimitTargetMetric.PREFILLING_SOURCES_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.PREFILLING-SOURCES-COUNT');
+			case UsageLimitTargetMetric.REFERENCE_TYPE_COUNT: return this.language.instant('TYPES.USAGE-LIMIT-TARGET-METRIC.REFERENCE-TYPE-COUNT');
+			default: return '';
+		}
+	}
+
 }

frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html

@@ -0,0 +1,61 @@
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-md-10 offset-md-1 usage-limit-editor">
+			<div class="row align-items-center mb-4 mt-4" *ngIf="formGroup">
+				<div class="col-md col-12">
+					<app-navigation-breadcrumb />
+				</div>
+				<div class="col-auto">
+					<button mat-button class="action-btn" (click)="cancel()" type="button">{{'USAGE-LIMIT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+				</div>
+				<div class="col-auto" *ngIf="!isNew">
+					<button mat-button class="action-btn" type="button" (click)="delete()">
+						<mat-icon>delete</mat-icon>
+						{{'USAGE-LIMIT-EDITOR.ACTIONS.DELETE' | translate}}
+					</button>
+				</div>
+				<div class="col-auto" *ngIf="canSave">
+					<button mat-button class="action-btn" (click)="formSubmit()">
+						<mat-icon>save</mat-icon>
+						{{'USAGE-LIMIT-EDITOR.ACTIONS.SAVE' | translate}}
+					</button>
+				</div>
+			</div>
+
+			<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
+				<mat-card appearance="outlined" class="pt-3 pb-3">
+					<mat-card-content>
+						<div class="row">
+							<div class="col-4">
+								<mat-form-field class="w-100">
+									<mat-label>{{'USAGE-LIMIT-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
+									<input matInput type="text" name="label" [formControl]="formGroup.get('label')">
+									<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
+									<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
+							</div>
+							<div class="col-4">
+								<mat-form-field class="w-100">
+									<mat-label>{{'USAGE-LIMIT-EDITOR.FIELDS.TARGET-METRIC' | translate}}</mat-label>
+										<mat-select [formControl]="formGroup.get('targetMetric')">
+											<mat-option *ngFor="let metric of targetMetricEnum" [value]="metric">{{enumUtils.toUsageLimitTargetMetricString(metric)}}</mat-option>
+										</mat-select>
+										<mat-error *ngIf="formGroup.get('targetMetric').hasError('targetMetric')">{{formGroup.get('targetMetric').getError('backendError').message}}</mat-error>
+										<mat-error *ngIf="formGroup.get('targetMetric').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
+							</div>
+							<div class="col-4">
+								<mat-form-field class="col pl-0 underline-line-field">
+									<mat-label>{{'USAGE-LIMIT-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
+									<input matInput min="1" type="number" [formControl]="formGroup.get('value')">
+									<mat-error *ngIf="formGroup.get('value').hasError('backendError')">{{formGroup.get('value').getError('backendError').message}}</mat-error>
+									<mat-error *ngIf="formGroup.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+					</mat-card-content>
+				</mat-card>
+			</form>
+		</div>
+	</div>
+</div>

frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.scss

@@ -0,0 +1,39 @@
+.usage-limit-editor {
+
+  .remove {
+	background-color: white;
+    color: black;
+  }
+
+  .add {
+	background-color: white;
+    color: #009700;
+  }
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
+	background-color: var(--primary-color-3);
+}
+
+::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
+    background-color: #b0b0b0;
+}
+
+.action-btn {
+	border-radius: 30px;
+	background-color: var(--secondary-color);
+	border: 1px solid transparent;
+	padding-left: 2em;
+	padding-right: 2em;
+	box-shadow: 0px 3px 6px #1E202029;
+
+	transition-property: background-color, color;
+	transition-duration: 200ms;
+	transition-delay: 50ms;
+	transition-timing-function: ease-in-out;
+  &:disabled{
+		background-color: #CBCBCB;
+		color: #FFF;
+		border: 0px;
+	}
+}

frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.ts

@@ -0,0 +1,183 @@
+
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IsActive } from '@app/core/common/enum/is-active.enum';
+import { AppPermission } from '@app/core/common/enum/permission.enum';
+import { UsageLimit, UsageLimitPersist } from '@app/core/model/usage-limit/usage-limit';
+import { AuthService } from '@app/core/services/auth/auth.service';
+import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
+import { LockService } from '@app/core/services/lock/lock.service';
+import { LoggingService } from '@app/core/services/logging/logging-service';
+import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { UsageLimitService } from '@app/core/services/usage-limit/usage.service';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { QueryParamsService } from '@app/core/services/utilities/query-params.service';
+import { BaseEditor } from '@common/base/base-editor';
+import { FormService } from '@common/forms/form-service';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
+import { FilterService } from '@common/modules/text-filter/filter-service';
+import { Guid } from '@common/types/guid';
+import { TranslateService } from '@ngx-translate/core';
+import { map, takeUntil } from 'rxjs/operators';
+import { UsageLimitEditorModel } from './usage-limit-editor.model';
+import { UsageLimitEditorResolver } from './usage-limit-editor.resolver';
+import { UsageLimitEditorService } from './usage-limit-editor.service';
+import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
+import { Title } from '@angular/platform-browser';
+import { UsageLimitTargetMetric } from '@app/core/common/enum/usage-limit-target-metric';
+
+
+@Component({
+	selector: 'app-usage-limit-editor-component',
+	templateUrl: 'usage-limit-editor.component.html',
+	styleUrls: ['./usage-limit-editor.component.scss'],
+	providers: [UsageLimitEditorService]
+})
+export class UsageLimitEditorComponent extends BaseEditor<UsageLimitEditorModel, UsageLimit> implements OnInit {
+
+	isNew = true;
+	isDeleted = false;
+	formGroup: UntypedFormGroup = null;
+	showInactiveDetails = false;
+	targetMetricEnum = this.enumUtils.getEnumValues<UsageLimitTargetMetric>(UsageLimitTargetMetric);
+
+	protected get canDelete(): boolean {
+		return !this.isDeleted && !this.isNew && this.hasPermission(this.authService.permissionEnum.DeleteUsageLimit);
+	}
+
+	protected get canSave(): boolean {
+		return !this.isDeleted && this.hasPermission(this.authService.permissionEnum.EditUsageLimit);
+	}
+
+	protected get canFinalize(): boolean {
+		return !this.isDeleted && this.hasPermission(this.authService.permissionEnum.EditUsageLimit);
+	}
+
+
+	private hasPermission(permission: AppPermission): boolean {
+		return this.authService.hasPermission(permission) || this.editorModel?.permissions?.includes(permission);
+	}
+
+	constructor(
+		// BaseFormEditor injected dependencies
+		protected dialog: MatDialog,
+		protected language: TranslateService,
+		protected formService: FormService,
+		protected router: Router,
+		protected uiNotificationService: UiNotificationService,
+		protected httpErrorHandlingService: HttpErrorHandlingService,
+		protected filterService: FilterService,
+		protected route: ActivatedRoute,
+		protected queryParamsService: QueryParamsService,
+		protected lockService: LockService,
+		protected authService: AuthService,
+		protected configurationService: ConfigurationService,
+		// Rest dependencies. Inject any other needed deps here:
+		public enumUtils: EnumUtils,
+		private tenantService: UsageLimitService,
+		private logger: LoggingService,
+		private usageLimitEditorService: UsageLimitEditorService,
+		private titleService: Title,
+		protected routerUtils: RouterUtilsService,
+	) {
+		const descriptionLabel: string = route.snapshot.data['entity']?.code;
+		if (descriptionLabel) {
+			titleService.setTitle(descriptionLabel);
+		} else {
+			titleService.setTitle('USAGE-LIMIT-EDITOR.TITLE-EDIT-USAGE-LIMIT');
+		}
+		super(dialog, language, formService, router, uiNotificationService, httpErrorHandlingService, filterService, route, queryParamsService, lockService, authService, configurationService);
+	}
+
+	ngOnInit(): void {
+		super.ngOnInit();
+	}
+
+	getItem(itemId: Guid, successFunction: (item: UsageLimit) => void) {
+		this.tenantService.getSingle(itemId, UsageLimitEditorResolver.lookupFields())
+			.pipe(map(data => data as UsageLimit), takeUntil(this._destroyed))
+			.subscribe(
+				data => successFunction(data),
+				error => this.onCallbackError(error)
+			);
+	}
+
+	prepareForm(data: UsageLimit) {
+		try {
+			this.editorModel = data ? new UsageLimitEditorModel().fromModel(data) : new UsageLimitEditorModel();
+
+			this.isDeleted = data ? data.isActive === IsActive.Inactive : false;
+			this.buildForm();
+		} catch (error) {
+			this.logger.error('Could not parse UsageLimit item: ' + data + error);
+			this.uiNotificationService.snackBarNotification(this.language.instant('COMMONS.ERRORS.DEFAULT'), SnackBarNotificationLevel.Error);
+		}
+	}
+
+	buildForm() {
+		this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !this.authService.hasPermission(AppPermission.EditUsageLimit));
+		this.usageLimitEditorService.setValidationErrorModel(this.editorModel.validationErrorModel);
+	}
+
+	refreshData(): void {
+		this.getItem(this.editorModel.id, (data: UsageLimit) => this.prepareForm(data));
+	}
+
+	refreshOnNavigateToData(id?: Guid): void {
+		this.formGroup.markAsPristine();
+
+		this.router.navigate([this.routerUtils.generateUrl('/usage-limits')], { queryParams: { 'lookup': this.queryParamsService.serializeLookup(this.lookupParams), 'lv': ++this.lv }, replaceUrl: true, relativeTo: this.route });
+	}
+
+	persistEntity(onSuccess?: (response) => void): void {
+		const formData = this.formGroup.getRawValue() as UsageLimitPersist;
+
+		this.tenantService.persist(formData)
+			.pipe(takeUntil(this._destroyed)).subscribe(
+				complete => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(complete),
+				error => this.onCallbackError(error)
+			);
+	}
+
+	formSubmit(): void {
+		this.formService.removeAllBackEndErrors(this.formGroup);
+		this.formService.touchAllFormFields(this.formGroup);
+		if (!this.isFormValid()) {
+			return;
+		}
+
+		this.persistEntity();
+	}
+
+	public delete() {
+		const value = this.formGroup.value;
+		if (value.id) {
+			const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+				maxWidth: '300px',
+				data: {
+					message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+					confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+					cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
+				}
+			});
+			dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+				if (result) {
+					this.tenantService.delete(value.id).pipe(takeUntil(this._destroyed))
+						.subscribe(
+							complete => this.onCallbackDeleteSuccess(),
+							error => this.onCallbackError(error)
+						);
+				}
+			});
+		}
+	}
+
+	clearErrorModel() {
+		this.editorModel.validationErrorModel.clear();
+		this.formService.validateAllFormFields(this.formGroup);
+	}
+
+}

frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.model.ts

@@ -0,0 +1,54 @@
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
+import { UsageLimitTargetMetric } from "@app/core/common/enum/usage-limit-target-metric";
+import { UsageLimit, UsageLimitPersist } from "@app/core/model/usage-limit/usage-limit";
+import { BaseEditorModel } from "@common/base/base-form-editor-model";
+import { BackendErrorValidator } from "@common/forms/validation/custom-validator";
+import { ValidationErrorModel } from "@common/forms/validation/error-model/validation-error-model";
+import { Validation, ValidationContext } from "@common/forms/validation/validation-context";
+
+export class UsageLimitEditorModel extends BaseEditorModel implements UsageLimitPersist {
+	label: string;
+	targetMetric: UsageLimitTargetMetric;
+	value: number;
+	permissions: string[];
+
+	public validationErrorModel: ValidationErrorModel = new ValidationErrorModel();
+	protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
+
+	constructor() { super(); }
+
+	public fromModel(item: UsageLimit): UsageLimitEditorModel {
+		if (item) {
+			super.fromModel(item);
+			this.label = item.label;
+			this.targetMetric = item.targetMetric;
+			this.value = item.value;
+		}
+		return this;
+	}
+
+	buildForm(context: ValidationContext = null, disabled: boolean = false): UntypedFormGroup {
+		if (context == null) { context = this.createValidationContext(); }
+
+		return this.formBuilder.group({
+			id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators],
+			label: [{ value: this.label, disabled: disabled }, context.getValidation('label').validators],
+			targetMetric: [{ value: this.targetMetric, disabled: disabled }, context.getValidation('targetMetric').validators],
+			value: [{ value: this.value, disabled: disabled }, context.getValidation('value').validators],
+			hash: [{ value: this.hash, disabled: disabled }, context.getValidation('hash').validators]
+		});
+	}
+
+	createValidationContext(): ValidationContext {
+		const baseContext: ValidationContext = new ValidationContext();
+		const baseValidationArray: Validation[] = new Array<Validation>();
+		baseValidationArray.push({ key: 'id', validators: [BackendErrorValidator(this.validationErrorModel, 'id')] });
+		baseValidationArray.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'label')] });
+		baseValidationArray.push({ key: 'targetMetric', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'targetMetric')] });
+		baseValidationArray.push({ key: 'value', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'value')] });
+		baseValidationArray.push({ key: 'hash', validators: [] });
+
+		baseContext.validation = baseValidationArray;
+		return baseContext;
+	}
+}

frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.resolver.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { UsageLimit } from '@app/core/model/usage-limit/usage-limit';
+import { UsageLimitService } from '@app/core/services/usage-limit/usage.service';
+import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
+import { BaseEditorResolver } from '@common/base/base-editor.resolver';
+import { Guid } from '@common/types/guid';
+import { takeUntil, tap } from 'rxjs/operators';
+import { nameof } from 'ts-simple-nameof';
+
+@Injectable()
+export class UsageLimitEditorResolver extends BaseEditorResolver {
+
+	constructor(private usageLimitService: UsageLimitService, private breadcrumbService: BreadcrumbService) {
+		super();
+	}
+
+	public static lookupFields(): string[] {
+		return [
+			...BaseEditorResolver.lookupFields(),
+			nameof<UsageLimit>(x => x.id),
+			nameof<UsageLimit>(x => x.label),
+			nameof<UsageLimit>(x => x.targetMetric),
+			nameof<UsageLimit>(x => x.value),
+			nameof<UsageLimit>(x => x.createdAt),
+			nameof<UsageLimit>(x => x.updatedAt),
+			nameof<UsageLimit>(x => x.hash),
+			nameof<UsageLimit>(x => x.isActive)
+		]
+	}
+
+	resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+
+		const fields = [
+			...UsageLimitEditorResolver.lookupFields()
+		];
+		const id = route.paramMap.get('id');
+
+		if (id != null) {
+			return this.usageLimitService.getSingle(Guid.parse(id), fields).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed));
+		}
+	}
+}

frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from "@angular/core";
+import { ValidationErrorModel } from "@common/forms/validation/error-model/validation-error-model";
+
+@Injectable()
+export class UsageLimitEditorService {
+	private validationErrorModel: ValidationErrorModel;
+
+	public setValidationErrorModel(validationErrorModel: ValidationErrorModel): void {
+		this.validationErrorModel = validationErrorModel;
+	}
+
+	public getValidationErrorModel(): ValidationErrorModel {
+		return this.validationErrorModel;
+	}
+}

frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html

@@ -0,0 +1,59 @@
+<div class="d-flex align-items-center gap-1-rem">
+
+	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
+		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
+	</button>
+
+
+	<mat-menu #filterMenu>
+		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+			<div class="row justify-content-between">
+				<div class="col-auto mt-2">
+					<h4>{{'USAGE-LIMIT-LISTING.FILTER.TITLE' | translate}}</h4>
+				</div>
+				<div class="col-auto">
+					<button color="accent" mat-button (click)="clearFilters()">
+						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
+					</button>
+				</div>
+			</div>
+
+			<div class="row mt-3">
+				<div class="col-12">
+					<section class="w-100">
+						<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
+							{{'USAGE-LIMIT-LISTING.FILTER.IS-ACTIVE' | translate}}
+						</mat-slide-toggle>
+					</section>
+				</div>
+			</div>
+
+			<div class="row mt-3">
+				<div class="col-12">
+					<mat-form-field class="w-100">
+						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}</mat-label>
+						<mat-select multiple [(ngModel)]="internalFilters.usageLimitTargetMetrics">
+							<mat-option *ngFor="let metric of targetMetricEnumValues" [value]="metric">{{enumUtils.toUsageLimitTargetMetricString(metric)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+			</div>
+
+			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
+				<div class="col-auto">
+					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+						{{'USAGE-LIMIT-LISTING.FILTER.CANCEL' | translate}}
+					</button>
+				</div>
+				<div class="col-auto">
+					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+						{{'USAGE-LIMIT-LISTING.FILTER.APPLY-FILTERS' | translate}}
+					</button>
+				</div>
+			</div>
+		</div>
+	</mat-menu>
+
+	<app-expandable-search-field [(value)]=internalFilters.like (valueChange)="onSearchTermChange($event)" />
+</div>

frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.scss

@@ -0,0 +1,20 @@
+::ng-deep.mat-mdc-menu-panel {
+	max-width: 100% !important;
+	height: 100% !important;
+}
+
+:host::ng-deep.mat-mdc-menu-content:not(:empty) {
+	padding-top: 0 !important;
+}
+
+
+.filter-button{
+	padding-top: .6rem;
+	padding-bottom: .6rem;
+}
+
+::ng-deep .mdc-form-field {
+	label {
+			margin: 0;
+	}
+}

frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts

@@ -0,0 +1,101 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { IsActive } from '@app/core/common/enum/is-active.enum';
+import { UsageLimitTargetMetric } from '@app/core/common/enum/usage-limit-target-metric';
+import { UsageLimitFilter } from '@app/core/query/usage-limit.lookup';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { BaseComponent } from '@common/base/base.component';
+import { nameof } from 'ts-simple-nameof';
+
+@Component({
+	selector: 'app-usage-limit-listing-filters',
+	templateUrl: './usage-limit-listing-filters.component.html',
+	styleUrls: ['./usage-limit-listing-filters.component.scss']
+})
+export class UsageLimitListingFiltersComponent extends BaseComponent implements OnInit, OnChanges {
+
+	@Input() readonly filter: UsageLimitFilter;
+	@Output() filterChange = new EventEmitter<UsageLimitFilter>();
+	targetMetricEnumValues = this.enumUtils.getEnumValues<UsageLimitTargetMetric>(UsageLimitTargetMetric);
+
+
+	// * State
+	internalFilters: UsageLimitListingFilters = this._getEmptyFilters();
+
+	protected appliedFilterCount: number = 0;
+	constructor(
+		public enumUtils: EnumUtils,
+	) { super(); }
+
+	ngOnInit() {
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		const filterChange = changes[nameof<UsageLimitListingFiltersComponent>(x => x.filter)]?.currentValue as UsageLimitFilter;
+		if (filterChange) {
+			this.updateFilters()
+		}
+	}
+
+
+	onSearchTermChange(searchTerm: string): void {
+		this.applyFilters()
+	}
+
+
+	protected updateFilters(): void {
+		this.internalFilters = this._parseToInternalFilters(this.filter);
+		this.appliedFilterCount = this._computeAppliedFilters(this.internalFilters);
+	}
+
+	protected applyFilters(): void {
+		const { isActive, like, usageLimitTargetMetrics} = this.internalFilters ?? {}
+		this.filterChange.emit({
+			...this.filter,
+			like,
+			isActive: isActive ? [IsActive.Active] : [IsActive.Inactive],
+			usageLimitTargetMetrics
+		})
+	}
+
+
+	private _parseToInternalFilters(inputFilter: UsageLimitFilter): UsageLimitListingFilters {
+		if (!inputFilter) {
+			return this._getEmptyFilters();
+		}
+
+		let { excludedIds, ids, isActive, like, usageLimitTargetMetrics } = inputFilter;
+
+		return {
+			isActive: (isActive ?? [])?.includes(IsActive.Active) || !isActive?.length,
+			like: like,
+			usageLimitTargetMetrics: usageLimitTargetMetrics
+		}
+
+	}
+
+	private _getEmptyFilters(): UsageLimitListingFilters {
+		return {
+			isActive: true,
+			like: null,
+			usageLimitTargetMetrics: null
+		}
+	}
+
+	private _computeAppliedFilters(filters: UsageLimitListingFilters): number {
+		let count = 0;
+		if (filters?.isActive) {
+			count++
+		}
+		return count;
+	}
+
+	clearFilters() {
+		this.internalFilters = this._getEmptyFilters();
+	}
+}
+
+interface UsageLimitListingFilters {
+	isActive: boolean;
+	usageLimitTargetMetrics: UsageLimitTargetMetric[];
+	like: string;
+}

frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html

@@ -0,0 +1,97 @@
+<div class="container-fluid">
+	<div class="row usage-limit-listing">
+		<div class="col-md-10 offset-md-1">
+
+			<div class="row mb-4 mt-4">
+				<div class="col">
+					<app-navigation-breadcrumb />
+
+				</div>
+				<div class="col-auto">
+					<button mat-raised-button class="create-btn"
+						*ngIf="authService.hasPermission(authService.permissionEnum.EditUsageLimit)"
+						[routerLink]="routerUtils.generateUrl(['/usage-limits/new'])">
+						<mat-icon>add</mat-icon>
+						{{'USAGE-LIMIT-LISTING.CREATE' | translate}}
+					</button>
+				</div>
+			</div>
+
+			<app-hybrid-listing [rows]="gridRows" [columns]="gridColumns" [visibleColumns]="visibleColumns"
+				[count]="totalElements" [offset]="currentPageNumber" [limit]="lookup.page.size"
+				[defaultSort]="lookup.order?.items" [externalSorting]="true" (rowActivated)="onRowActivated($event)"
+				(pageLoad)="alterPage($event)" (columnSort)="onColumnSort($event)"
+				(columnsChanged)="onColumnsChanged($event)" [listItemTemplate]="listItemTemplate">
+
+				<app-usage-limit-listing-filters hybrid-listing-filters [(filter)]="lookup"
+					(filterChange)="filterChanged($event)" />
+
+				<app-user-settings-picker [key]="userSettingsKey" [userPreference]="lookup"
+					(onSettingSelected)="changeSetting($event)" [autoSelectUserSettings]="autoSelectUserSettings"
+					user-preference-settings />
+			</app-hybrid-listing>
+
+		</div>
+	</div>
+</div>
+
+<ng-template #listItemTemplate let-item="item" let-isColumnSelected="isColumnSelected">
+
+
+	<div class="d-flex align-items-center p-3 gap-1-rem">
+		<div class="row">
+			<ng-container *ngIf="isColumnSelected('label')">
+				<a class="buttonLinkClass" [routerLink]="routerUtils.generateUrl('./' + item?.id)" class="col-12"
+					(click)="$event.stopPropagation()">{{item?.label | nullifyValue}}</a>
+				<br />
+			</ng-container>
+
+			<ng-container *ngIf="isColumnSelected('value')">
+				<span class="col-12">
+					{{'USAGE-LIMIT-LISTING.FIELDS.VALUE' | translate}}:
+					<small>
+						{{item?.value | nullifyValue}}
+					</small>
+				</span>
+				<br>
+			</ng-container>
+
+			<ng-container *ngIf="isColumnSelected('createdAt')">
+				<span class="col-12">
+					{{'USAGE-LIMIT-LISTING.FIELDS.CREATED-AT' | translate}}:
+					<small>
+						{{item?.createdAt | dateTimeFormatter : 'short' | nullifyValue}}
+					</small>
+				</span>
+				<br>
+			</ng-container>
+			<ng-container *ngIf="isColumnSelected('updatedAt')">
+				<span class="col-12">
+					{{'USAGE-LIMIT-LISTING.FIELDS.UPDATED-AT' | translate}}:
+					<small>
+						{{item?.updatedAt | dateTimeFormatter : 'short' | nullifyValue}}
+					</small>
+				</span>
+			</ng-container>
+		</div>
+	</div>
+</ng-template>
+
+<ng-template #actions let-row="row" let-item>
+	<div class="row" (click)="$event.stopPropagation()">
+		<div class="col-auto">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+				<mat-icon>more_horiz</mat-icon>
+			</button>
+			<mat-menu #actionsMenu="matMenu">
+				<button mat-menu-item [routerLink]="routerUtils.generateUrl(['/usage-limits/', row.id])">
+					<mat-icon>edit</mat-icon>{{'USAGE-LIMIT-LISTING.ACTIONS.EDIT' | translate}}
+				</button>
+				<button mat-menu-item (click)="deleteType(row.id)">
+					<mat-icon>delete</mat-icon>
+					{{'USAGE-LIMIT-LISTING.ACTIONS.DELETE' | translate}}
+				</button>
+			</mat-menu>
+		</div>
+	</div>
+</ng-template>

frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.scss

@@ -0,0 +1,59 @@
+.usage-limit-listing {
+  margin-top: 1.3rem;
+  margin-left: 1rem;
+  margin-right: 2rem;
+
+  .mat-header-row{
+    background: #f3f5f8;
+  }
+  .mat-card {
+    margin: 16px 0;
+    padding: 0px;
+  }
+  
+  .mat-row {
+    cursor: pointer;
+    min-height: 4.5em;
+  }
+  
+  mat-row:hover {
+    background-color: #eef5f6;
+  }
+  .mat-fab-bottom-right {
+    float: right;
+    z-index: 5;
+  }
+}
+.create-btn {
+    border-radius: 30px;
+    background-color: var(--secondary-color);
+    padding-left: 2em;
+    padding-right: 2em;
+  
+    .button-text{
+      display: inline-block;
+    }
+}
+
+.dlt-btn {
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.status-chip{
+  
+  border-radius: 20px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0.2em;
+  font-size: .8em;
+}
+
+.status-chip-finalized{
+  color: #568b5a;
+  background: #9dd1a1 0% 0% no-repeat padding-box;
+}
+
+.status-chip-draft{
+  color: #00c4ff;
+  background: #d3f5ff 0% 0% no-repeat padding-box;
+}

frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.ts

@@ -0,0 +1,186 @@
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IsActive } from '@app/core/common/enum/is-active.enum';
+import { UsageLimit } from '@app/core/model/usage-limit/usage-limit';
+import { UsageLimitLookup } from '@app/core/query/usage-limit.lookup';
+import { AuthService } from '@app/core/services/auth/auth.service';
+import { UsageLimitService } from '@app/core/services/usage-limit/usage.service';
+import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { QueryParamsService } from '@app/core/services/utilities/query-params.service';
+import { BaseListingComponent } from '@common/base/base-listing-component';
+import { PipeService } from '@common/formatting/pipe.service';
+import { DataTableDateTimeFormatPipe } from '@app/core/pipes/date-time-format.pipe';
+import { QueryResult } from '@common/model/query-result';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
+import { ColumnDefinition, ColumnsChangedEvent, HybridListingComponent, PageLoadEvent } from '@common/modules/hybrid-listing/hybrid-listing.component';
+import { Guid } from '@common/types/guid';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { nameof } from 'ts-simple-nameof';
+import { IsActiveTypePipe } from '@common/formatting/pipes/is-active-type.pipe';
+import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
+import { UsageLimitTargetMetricPipe } from '@common/formatting/pipes/usage-limits-target-metric.pipe';
+import { UsageLimitTargetMetric } from '@app/core/common/enum/usage-limit-target-metric';
+
+@Component({
+	templateUrl: './usage-limit-listing.component.html',
+	styleUrls: ['./usage-limit-listing.component.scss']
+})
+export class UsageLimitListingComponent extends BaseListingComponent<UsageLimit, UsageLimitLookup> implements OnInit {
+	publish = false;
+	userSettingsKey = { key: 'UsageLimitListingUserSettings' };
+	propertiesAvailableForOrder: ColumnDefinition[];
+
+	@ViewChild('actions', { static: true }) actions?: TemplateRef<any>;
+	@ViewChild(HybridListingComponent, { static: true }) hybridListingComponent: HybridListingComponent;
+
+	private readonly lookupFields: string[] = [
+		nameof<UsageLimit>(x => x.id),
+		nameof<UsageLimit>(x => x.label),
+		nameof<UsageLimit>(x => x.targetMetric),
+		nameof<UsageLimit>(x => x.value),
+		nameof<UsageLimit>(x => x.updatedAt),
+		nameof<UsageLimit>(x => x.createdAt),
+		nameof<UsageLimit>(x => x.hash),
+		nameof<UsageLimit>(x => x.isActive)
+	];
+
+	rowIdentity = x => x.id;
+
+	constructor(
+		public routerUtils: RouterUtilsService,
+		protected router: Router,
+		protected route: ActivatedRoute,
+		protected uiNotificationService: UiNotificationService,
+		protected httpErrorHandlingService: HttpErrorHandlingService,
+		protected queryParamsService: QueryParamsService,
+		private usageLimitService: UsageLimitService,
+		public authService: AuthService,
+		private pipeService: PipeService,
+		public enumUtils: EnumUtils,
+		private language: TranslateService,
+		private dialog: MatDialog
+	) {
+		super(router, route, uiNotificationService, httpErrorHandlingService, queryParamsService);
+		// Lookup setup
+		// Default lookup values are defined in the user settings class.
+		this.lookup = this.initializeLookup();
+	}
+
+	ngOnInit() {
+		super.ngOnInit();
+	}
+
+	protected initializeLookup(): UsageLimitLookup {
+		const lookup = new UsageLimitLookup();
+		lookup.metadata = { countAll: true };
+		lookup.page = { offset: 0, size: this.ITEMS_PER_PAGE };
+		lookup.isActive = [IsActive.Active];
+		lookup.order = { items: [this.toDescSortField(nameof<UsageLimit>(x => x.createdAt))] };
+		this.updateOrderUiFields(lookup.order);
+
+		lookup.project = {
+			fields: this.lookupFields
+		};
+
+		return lookup;
+	}
+
+	protected setupColumns() {
+		this.gridColumns.push(...[{
+			prop: nameof<UsageLimit>(x => x.label),
+			sortable: true,
+			languageName: 'USAGE-LIMIT-LISTING.FIELDS.LABEL'
+		}, {
+			prop: nameof<UsageLimit>(x => x.targetMetric),
+			sortable: true,
+			languageName: 'USAGE-LIMIT-LISTING.FIELDS.TARGET-METRIC',
+			pipe: this.pipeService.getPipe<UsageLimitTargetMetricPipe>(UsageLimitTargetMetricPipe)
+		},
+		{
+			prop: nameof<UsageLimit>(x => x.value),
+			sortable: true,
+			languageName: 'USAGE-LIMIT-LISTING.FIELDS.VALUE',
+		},
+		{
+			prop: nameof<UsageLimit>(x => x.createdAt),
+			sortable: true,
+			languageName: 'USAGE-LIMIT-LISTING.FIELDS.CREATED-AT',
+			pipe: this.pipeService.getPipe<DataTableDateTimeFormatPipe>(DataTableDateTimeFormatPipe).withFormat('short')
+		},
+		{
+			prop: nameof<UsageLimit>(x => x.updatedAt),
+			sortable: true,
+			languageName: 'USAGE-LIMIT-LISTING.FIELDS.UPDATED-AT',
+			pipe: this.pipeService.getPipe<DataTableDateTimeFormatPipe>(DataTableDateTimeFormatPipe).withFormat('short')
+		},
+		{
+			prop: nameof<UsageLimit>(x => x.isActive),
+			sortable: true,
+			languageName: 'USAGE-LIMIT-LISTING.FIELDS.IS-ACTIVE',
+			pipe: this.pipeService.getPipe<IsActiveTypePipe>(IsActiveTypePipe)
+		},
+		{
+			alwaysShown: true,
+			cellTemplate: this.actions,
+			maxWidth: 120
+		}
+		]);
+		this.propertiesAvailableForOrder = this.gridColumns.filter(x => x.sortable);
+	}
+
+	//
+	// Listing Component functions
+	//
+	onColumnsChanged(event: ColumnsChangedEvent) {
+		super.onColumnsChanged(event);
+		this.onColumnsChangedInternal(event.properties.map(x => x.toString()));
+	}
+
+	private onColumnsChangedInternal(columns: string[]) {
+		// Here are defined the projection fields that always requested from the api.
+		const fields = new Set(this.lookupFields);
+		this.gridColumns.map(x => x.prop)
+			.filter(x => !columns?.includes(x as string))
+			.forEach(item => {
+				fields.delete(item as string)
+			});
+		this.lookup.project = { fields: [...fields] };
+		this.onPageLoad({ offset: 0 } as PageLoadEvent);
+	}
+
+	protected loadListing(): Observable<QueryResult<UsageLimit>> {
+		return this.usageLimitService.query(this.lookup);
+	}
+
+	public deleteType(id: Guid) {
+		if (id) {
+			const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+				data: {
+					isDeleteConfirmation: true,
+					message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+					confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+					cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
+				}
+			});
+			dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+				if (result) {
+					this.usageLimitService.delete(id).pipe(takeUntil(this._destroyed))
+						.subscribe(
+							complete => this.onCallbackSuccess(),
+							error => this.onCallbackError(error)
+						);
+				}
+			});
+		}
+	}
+
+	onCallbackSuccess(): void {
+		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-DELETE'), SnackBarNotificationLevel.Success);
+		this.refresh();
+	}
+}

frontend/src/app/ui/admin/usage-limit/usage-limit.module.ts

@@ -0,0 +1,39 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { NgModule } from "@angular/core";
+import { AutoCompleteModule } from "@app/library/auto-complete/auto-complete.module";
+import { CommonFormattingModule } from '@common/formatting/common-formatting.module';
+import { CommonFormsModule } from '@common/forms/common-forms.module';
+import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
+import { HybridListingModule } from "@common/modules/hybrid-listing/hybrid-listing.module";
+import { TextFilterModule } from "@common/modules/text-filter/text-filter.module";
+import { UserSettingsModule } from "@common/modules/user-settings/user-settings.module";
+import { CommonUiModule } from '@common/ui/common-ui.module';
+import { NgxDropzoneModule } from "ngx-dropzone";
+import { UsageLimitRoutingModule } from './usage-limit.routing';
+import { UsageLimitEditorComponent } from './editor/usage-limit-editor.component';
+import { RichTextEditorModule } from '@app/library/rich-text-editor/rich-text-editor.module';
+import { UsageLimitListingComponent } from './listing/usage-limit-listing.component';
+import { UsageLimitListingFiltersComponent } from './listing/filters/usage-limit-listing-filters.component';
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		CommonFormsModule,
+		ConfirmationDialogModule,
+		UsageLimitRoutingModule,
+		NgxDropzoneModule,
+		DragDropModule,
+		AutoCompleteModule,
+		HybridListingModule,
+		TextFilterModule,
+		UserSettingsModule,
+		CommonFormattingModule,
+		RichTextEditorModule
+	],
+	declarations: [
+		UsageLimitEditorComponent,
+		UsageLimitListingComponent,
+		UsageLimitListingFiltersComponent
+	]
+})
+export class UsageLimitModule { }

frontend/src/app/ui/admin/usage-limit/usage-limit.routing.ts

@@ -0,0 +1,54 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { UsageLimitEditorComponent } from './editor/usage-limit-editor.component';
+import { UsageLimitListingComponent } from './listing/usage-limit-listing.component';
+import { AppPermission } from '@app/core/common/enum/permission.enum';
+import { AuthGuard } from '@app/core/auth-guard.service';
+import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
+import { PendingChangesGuard } from '@common/forms/pending-form-changes/pending-form-changes-guard.service';
+import { UsageLimitEditorResolver } from './editor/usage-limit-editor.resolver';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: UsageLimitListingComponent,
+		canActivate: [AuthGuard]
+	},
+	{
+		path: 'new',
+		canActivate: [AuthGuard],
+		component: UsageLimitEditorComponent,
+		canDeactivate: [PendingChangesGuard],
+		data: {
+			authContext: {
+				permissions: [AppPermission.EditUsageLimit]
+			},
+			...BreadcrumbService.generateRouteDataConfiguration({
+				title: 'BREADCRUMBS.NEW-USAGE-LIMIT'
+			})
+		}
+	},
+	{
+		path: ':id',
+		canActivate: [AuthGuard],
+		component: UsageLimitEditorComponent,
+		canDeactivate: [PendingChangesGuard],
+		resolve: {
+			'entity': UsageLimitEditorResolver
+		},
+		data: {
+			authContext: {
+				permissions: [AppPermission.EditUsageLimit]
+			}
+		}
+
+	},
+	{ path: '**', loadChildren: () => import('@common/modules/page-not-found/page-not-found.module').then(m => m.PageNotFoundModule) },
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule],
+	providers: [UsageLimitEditorResolver]
+})
+export class UsageLimitRoutingModule { }

frontend/src/app/ui/sidebar/sidebar.component.ts

@@ -120,6 +120,7 @@ export class SidebarComponent implements OnInit {
 		if (this.authentication.hasPermission(AppPermission.ViewReferencePage)) this.adminItems.routes.push({ path: '/references', title: 'SIDE-BAR.REFERENCES', icon: 'dataset_linked', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewReferenceTypePage)) this.adminItems.routes.push({ path: '/reference-type', title: 'SIDE-BAR.REFERENCE-TYPES', icon: 'add_link', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewPrefillingSourcePage)) this.adminItems.routes.push({ path: '/prefilling-sources', title: 'SIDE-BAR.PREFILLING-SOURCES', icon: 'quick_reference_all', routeType: RouteType.System });
+		if (this.authentication.hasPermission(AppPermission.ViewUsageLimitPage)) this.adminItems.routes.push({ path: '/usage-limits', title: 'SIDE-BAR.USAGE-LIMITS', icon: 'quick_reference_all', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewTenantPage)) this.adminItems.routes.push({ path: '/tenants', title: 'SIDE-BAR.TENANTS', icon: 'tenancy', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewTenantConfigurationPage)) this.adminItems.routes.push({ path: '/tenant-configuration', title: 'SIDE-BAR.TENANT-CONFIGURATION', icon: 'settings', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewUserPage)) this.adminItems.routes.push({ path: '/users', title: 'SIDE-BAR.USERS', icon: 'people', routeType: RouteType.System });

frontend/src/assets/i18n/baq.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/de.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/en.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/es.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/gr.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/hr.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/pl.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/pt.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/sk.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/sr.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/assets/i18n/tr.json

@@ -2122,6 +2122,16 @@
 			"DESCRIPTION": "Description",
 			"PLAN-BLUEPRINT": "Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template"
+		},
+		"USAGE-LIMIT-TARGET-METRIC": {
+			"USER-COUNT": "Users",
+			"PLAN-COUNT": "Plans",
+			"BLUEPRINT-COUNT": "Plan Blueprints",
+			"DESCRIPTION-COUNT": "Descriptions",
+			"DESCRIPTION-TEMPLATE-COUNT": "Description Templates",
+			"DESCRIPTION-TEMPLATE-TYPE-COUNT": "Description Template Types",
+			"PREFILLING-SOURCES-COUNT": "Prefillings Sources",
+			"REFERENCE-TYPE-COUNT": "Reference Types"
 		}
 	},
 	"FOOTER": {

frontend/src/common/formatting/common-formatting.module.ts

@@ -12,6 +12,7 @@ import { NotificationTrackingStatePipe } from './pipes/notification-tracking-sta
 import { NotificationTypePipe } from './pipes/notification-type.pipe';
 import { ReferenceSourceTypePipe } from './pipes/reference-source-type.pipe';
 import { LockTargetTypePipe } from './pipes/lock-target-type.pipe';
+import { UsageLimitTargetMetricPipe } from './pipes/usage-limits-target-metric.pipe';
 
 //
 //
@@ -33,7 +34,8 @@ import { LockTargetTypePipe } from './pipes/lock-target-type.pipe';
 		NotificationNotifyStatePipe,
 		NotificationTrackingProcessPipe,
 		NotificationTrackingStatePipe,
-		LockTargetTypePipe
+		LockTargetTypePipe,
+		UsageLimitTargetMetricPipe
 	],
 	exports: [
 		LowercaseFirstLetterPipe,
@@ -49,7 +51,8 @@ import { LockTargetTypePipe } from './pipes/lock-target-type.pipe';
 		NotificationNotifyStatePipe,
 		NotificationTrackingProcessPipe,
 		NotificationTrackingStatePipe,
-		LockTargetTypePipe
+		LockTargetTypePipe,
+		UsageLimitTargetMetricPipe
 	],
 	providers: [
 		LowercaseFirstLetterPipe,
@@ -65,7 +68,8 @@ import { LockTargetTypePipe } from './pipes/lock-target-type.pipe';
 		NotificationNotifyStatePipe,
 		NotificationTrackingProcessPipe,
 		NotificationTrackingStatePipe,
-		LockTargetTypePipe
+		LockTargetTypePipe,
+		UsageLimitTargetMetricPipe
 	]
 })
 export class CommonFormattingModule { }

frontend/src/common/formatting/pipes/usage-limits-target-metric.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+
+@Pipe({ name: 'UsageLimitTargetMetricFormat' })
+export class UsageLimitTargetMetricPipe implements PipeTransform {
+	constructor(private enumUtils: EnumUtils) { }
+
+	public transform(value): any {
+		return this.enumUtils.toUsageLimitTargetMetricString(value);
+	}
+}