Feature: Dashboard - layout, style

src/app/views/dashboard/dashboard.component.html

@@ -1,4 +1,60 @@
-<a mat-flat-button routerLink="/employee/new">New Employee</a>
-<a mat-flat-button routerLink="/employee/1">Edit Employee 3</a>
-<button mat-flat-button (click)="testInfo()">Test Info</button>
-<button mat-flat-button (click)="testError()">Test Error</button>
+<div class="dashboard">
+
+    <div class="dashboard__action-row">
+        <mat-form-field>
+            <mat-label>Search</mat-label>
+            <input matInput>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Qualification</mat-label>
+            <mat-select>
+                <mat-option>Angular</mat-option>
+                <mat-option>Java</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        @if (true) {
+            <button mat-fab class="shadowless">
+                <mat-icon>add</mat-icon>
+            </button>
+        }
+    </div>
+
+    <mat-table [dataSource]="employeeDataSource" class="dashboard__employees">
+        <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef>Id</th>
+            <td mat-cell *matCellDef="let employee">{{ employee.id }}</td>
+        </ng-container>
+        <ng-container matColumnDef="firstName">
+            <th mat-header-cell *matHeaderCellDef>First Name</th>
+            <td mat-cell *matCellDef="let employee">{{ employee.firstName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="lastName">
+            <th mat-header-cell *matHeaderCellDef>Last Name</th>
+            <td mat-cell *matCellDef="let employee">{{ employee.lastName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="skills">
+            <th mat-header-cell *matHeaderCellDef>Skills</th>
+            <td mat-cell *matCellDef="let employee">
+                <ul>
+                    @for (skill of employee.skillSet; track skill) {
+                        <li>{{ skill.skill }}</li>
+                    }
+                </ul>
+            </td>
+        </ng-container>
+        <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let employee">
+                <button mat-mini-fab class="shadowless">
+                    <mat-icon>edit</mat-icon>
+                </button>
+                <button mat-mini-fab class="shadowless warn">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="employeesDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: employeesDisplayedColumns;"></tr>
+    </mat-table>
+</div>

src/app/views/dashboard/dashboard.component.scss

@@ -0,0 +1,46 @@
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__action-row {
+    display: flex;
+    gap: 1rem;
+
+    :first-child {
+      flex-grow: 1;
+    }
+  }
+
+  &__employees {
+    width: 100%;
+
+    tr {
+      display: flex;
+      width: 100%;
+
+      .mat-column-id{
+        width: 4rem;
+      }
+
+      .mat-column-firstName, .mat-column-lastName, .mat-column-skills {
+        width: 0;
+        flex-grow: 1;
+      }
+      ul{
+        margin: 0;
+      }
+      th.mat-column-actions{
+        width: calc(40px * 2 + 1rem);
+      }
+      td.mat-column-actions{
+        gap: 1rem;
+        display: flex;
+        padding: 0;
+        padding-top: 0.25rem;
+        align-items: start;
+      }
+
+    }
+  }
+}

src/app/views/dashboard/dashboard.component.ts

@@ -1,20 +1,38 @@
-import { Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterLink } from '@angular/router';
-import { NotificationService, NotificationType } from '@core/notification/notification.service';
+import {Component} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTableDataSource, MatTableModule} from '@angular/material/table';
+import {AuthService} from '@core/auth/auth.service';
+import {Employee, EmployeeService} from '@core/ems';
+import {NotificationService, NotificationType} from '@core/notification/notification.service';
+import {MatIcon} from '@angular/material/icon';
 
 @Component({
     selector: 'app-dashboard',
-    imports: [MatButtonModule, RouterLink],
+    imports: [MatButtonModule, MatSelectModule, MatFormFieldModule, MatTableModule, ReactiveFormsModule, MatInputModule, MatIcon],
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent {
-    constructor(private notifications: NotificationService) { }
+
+    employeeDataSource: MatTableDataSource<Employee> = new MatTableDataSource<Employee>([]);
+    employeesDisplayedColumns = ['id', 'firstName', 'lastName', 'skills', 'actions'];
+
+    constructor(private notifications: NotificationService, protected auth: AuthService, private employeeService: EmployeeService) {
+        this.employeeService.getAllEmployees().subscribe((employees) => {
+            this.employeeDataSource = new MatTableDataSource(employees);
+
+        });
+    }
+
     testInfo() {
         this.notifications.publish('Cake', NotificationType.Information);
     }
 
     testError() {
         this.notifications.publish('Cake', NotificationType.Error);
-    }}
+    }
+}