update

src/app/ui/permissions/permissions.component.html

@@ -0,0 +1,14 @@
+<table mat-table [dataSource]="permissions">
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> {{'permissions.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let permission"> {{permission.name}} <mat-icon *ngIf="permission.addon" aria-hidden="false" aria-label="Add-on">add_circle</mat-icon></td>
+    </ng-container>
+
+    <ng-container matColumnDef="expires">
+        <th mat-header-cell *matHeaderCellDef> {{'permissions.expires' | i18n}} </th>
+        <td mat-cell *matCellDef="let permission">{{permission.expires | date}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="permissionColumns"></tr>
+    <tr mat-row *matRowDef="let myRowData; columns: permissionColumns"></tr>
+</table>

src/app/ui/permissions/permissions.component.scss

@@ -0,0 +1,3 @@
+table {
+    width: 100%;
+}

src/app/ui/permissions/permissions.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PermissionsComponent } from './permissions.component';
+
+describe('PermissionsComponent', () => {
+  let component: PermissionComponent;
+  let fixture: ComponentFixture<PermissionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PermissionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PermissionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ui/permissions/permissions.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-permissions',
+  templateUrl: './permissions.component.html',
+  styleUrls: ['./permissions.component.scss']
+})
+export class PermissionsComponent implements OnInit {
+
+  @Input() permissions;
+  permissionColumns = ["name", "expires"];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/ui/quotas/quotas.component.html

@@ -0,0 +1,15 @@
+<table mat-table [dataSource]="quotas">
+
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> {{'quotas.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota"> {{quota.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="quota">
+        <th mat-header-cell *matHeaderCellDef> {{'quotas.value' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota">{{quota.value}} {{quota.unit}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="quotaColumns"></tr>
+    <tr mat-row *matRowDef="let myRowData; columns: quotaColumns"></tr>
+</table>

src/app/ui/quotas/quotas.component.scss

@@ -0,0 +1,3 @@
+table {
+    width: 100%;
+}

src/app/ui/quotas/quotas.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuotasComponent } from './quotas.component';
+
+describe('QuotasComponent', () => {
+  let component: QuotasComponent;
+  let fixture: ComponentFixture<QuotasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QuotasComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuotasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ui/quotas/quotas.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input  } from '@angular/core';
+
+@Component({
+  selector: 'app-quotas',
+  templateUrl: './quotas.component.html',
+  styleUrls: ['./quotas.component.scss']
+})
+export class QuotasComponent implements OnInit {
+
+  @Input() quotas;
+  quotaColumns = ["name", "quota"];
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}