diff --git a/frontend/src/app/tasks/task-dashboard/task-dashboard.component.css b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.css
new file mode 100644
index 0000000..84850cb
--- /dev/null
+++ b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.css
@@ -0,0 +1,27 @@
+
+
+mat-form-field {
+ width: 70%;
+}
+
+table {
+ width: 100%;
+}
+
+
+td, th {
+ width: 25%;
+}
+
+.status-indicator {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ margin: 0 auto;
+}
+
+.mat-column-status, .mat-column-finished {
+ width: 32px;
+ text-align: center;
+}
+
diff --git a/frontend/src/app/tasks/task-dashboard/task-dashboard.component.html b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.html
new file mode 100644
index 0000000..e2bfdb0
--- /dev/null
+++ b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.html
@@ -0,0 +1,47 @@
+
+ Search
+
+
+
+Show finished tasks
+
+
+
+
+ Name |
+ {{task.taskName}} |
+
+
+ ETA |
+ {{task.eta}} |
+
+
+ Start |
+ {{task.startDate}} |
+
+
+ Deadline |
+ {{task.deadline}} |
+
+
+ Finished |
+
+
+ |
+
+
+ Status |
+
+
+ |
+
+
+
+
+
+
+ No data matching the filter "{{input.value}}" |
+
+
+
+
diff --git a/frontend/src/app/tasks/task-dashboard/task-dashboard.component.spec.ts b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.spec.ts
new file mode 100644
index 0000000..9b83c15
--- /dev/null
+++ b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskDashboardComponent } from './task-dashboard.component';
+
+describe('TaskDashboardComponent', () => {
+ let component: TaskDashboardComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [TaskDashboardComponent]
+ });
+ fixture = TestBed.createComponent(TaskDashboardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/tasks/task-dashboard/task-dashboard.component.ts b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.ts
new file mode 100644
index 0000000..2430e7e
--- /dev/null
+++ b/frontend/src/app/tasks/task-dashboard/task-dashboard.component.ts
@@ -0,0 +1,49 @@
+import {AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
+import {TaskEntityInfo, TaskService} from "../../../api";
+import {MatPaginator} from "@angular/material/paginator";
+import {MatSort} from "@angular/material/sort";
+import {MatTableDataSource} from "@angular/material/table";
+import {TaskEditorComponent} from "../task-editor/task-editor.component";
+
+@Component({
+ selector: 'app-task-dashboard',
+ templateUrl: './task-dashboard.component.html',
+ styleUrls: ['./task-dashboard.component.css']
+})
+export class TaskDashboardComponent implements OnChanges{
+ ngOnChanges(): void {
+ if(this.taskgroupID != undefined) {
+ this.taskService.tasksTaskgroupIDStatusGet(this.taskgroupID!, "all").subscribe({
+ next: resp => {
+ this.datasource = new MatTableDataSource(resp);
+ this.datasource.paginator = this.paginator!;
+ this.datasource.sort = this.sort!;
+ }
+ })
+ }
+ }
+
+ @Input("taskgroupID") taskgroupID: number | undefined
+ @ViewChild(MatPaginator) paginator: MatPaginator | undefined
+ @ViewChild(MatSort) sort: MatSort | undefined
+
+ displayedColumns: string[] = ['status', 'name', 'eta', 'start', 'deadline', 'finished'];
+ datasource: MatTableDataSource = new MatTableDataSource();
+
+ constructor(private taskService: TaskService) {
+ }
+
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.datasource.filter = filterValue.trim().toLowerCase();
+
+ if (this.datasource.paginator) {
+ this.datasource.paginator.firstPage();
+ }
+ }
+
+ getStatusOfTask(task: TaskEntityInfo) {
+ return "green";
+ }
+}