barker/bookie/src/app/home/home.component.html

<div fxLayout="row wrap" fxLayoutGap="grid 20px">
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('guest-book') !== -1"
    [routerLink]="['/', 'guest-book']"
  >
    <h3 class="item-name">Guest Book</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('sales') !== -1"
    [routerLink]="['/', 'sales']"
  >
    <h3 class="item-name">Sales</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('cashier-report') !== -1"
    [routerLink]="['/', 'cashier-report']"
  >
    <h3 class="item-name">Cashier Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('sale-report') !== -1"
    [routerLink]="['/', 'sale-report']"
  >
    <h3 class="item-name">Sale Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('tax-report') !== -1"
    [routerLink]="['/', 'tax-report']"
  >
    <h3 class="item-name">Tax Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('product-sale-report') !== -1"
    [routerLink]="['/', 'product-sale-report']"
  >
    <h3 class="item-name">Product Sale Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('bill-settlement-report') !== -1"
    [routerLink]="['/', 'bill-settlement-report']"
  >
    <h3 class="item-name">Bill Settlement Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('beer-consumption-report') !== -1"
    [routerLink]="['/', 'beer-consumption-report']"
  >
    <h3 class="item-name">Beer Consumption Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('discount-report') !== -1"
    [routerLink]="['/', 'discount-report']"
  >
    <h3 class="item-name">Discount Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('tables') !== -1"
    [routerLink]="['/', 'tables']"
  >
    <h3 class="item-name">Tables</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('sections') !== -1"
    [routerLink]="['/', 'sections']"
  >
    <h3 class="item-name">Sections</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
    [routerLink]="['/', 'menu-categories']"
  >
    <h3 class="item-name">Menu Categories</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
    [routerLink]="['/', 'sale-categories']"
  >
    <h3 class="item-name">Sale Categories</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
    [routerLink]="['/', 'products']"
  >
    <h3 class="item-name">Products</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('modifiers') !== -1"
    [routerLink]="['/', 'modifier-categories']"
  >
    <h3 class="item-name">Modifier Categories</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('modifiers') !== -1"
    [routerLink]="['/', 'modifiers']"
  >
    <h3 class="item-name">Modifiers</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('taxes') !== -1"
    [routerLink]="['/', 'taxes']"
  >
    <h3 class="item-name">Taxes</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('devices') !== -1"
    [routerLink]="['/', 'devices']"
  >
    <h3 class="item-name">Devices</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('section-printers') !== -1"
    [routerLink]="['/', 'section-printers']"
  >
    <h3 class="item-name">Section Printers</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('printers') !== -1"
    [routerLink]="['/', 'printers']"
  >
    <h3 class="item-name">Printers</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('users') !== -1"
    [routerLink]="['/', 'roles']"
  >
    <h3 class="item-name">Roles</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('users') !== -1"
    [routerLink]="['/', 'users']"
  >
    <h3 class="item-name">Users</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
    [routerLink]="['/', 'header-footer']"
  >
    <h3 class="item-name">Header / Footer</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
    [routerLink]="['/', 'product-updates-report']"
  >
    <h3 class="item-name">Product Updates Report</h3>
  </mat-card>
  <mat-card
    fxLayout="column"
    class="square-button"
    matRipple
    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
    [routerLink]="['/', 'update-product-prices']"
  >
    <h3 class="item-name">Update Product Prices</h3>
  </mat-card>
</div>
<footer class="footer">
  <p>Backend: v{{ auth.user?.ver }} / Frontend: v{{ version }} on {{ auth.device.name }}</p>
</footer>