bastian/keyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard

Browse Source
This commit is contained in:
Bastian Wagner
2025-01-02 15:55:56 +01:00
parent efbfc2eb01
commit 5c6516095b
24 changed files with 490 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
client/src/app/modules/dashboard/dashboard.component.html
View File

@@ -0,0 +1,67 @@
<div class="dashboard-container">
<!-- Welcome Section -->
<div class="welcome-section">
<h1>Willkommen bei Keyvault Pro</h1>
<p>Verwalte deine Schlüssel und Systeme</p>
</div>
<!-- Quick Stats Cards -->
<div class="stats-grid">
<mat-card class="stat-card">
<mat-card-header>
<mat-icon>key</mat-icon>
<mat-card-title>Schlüssel</mat-card-title>
</mat-card-header>
<mat-card-content>
<span class="stat-number">{{ keyCount }}</span>
<p>Aktive Schlüssel</p>
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="/keys">Verwalten</button>
</mat-card-actions>
</mat-card>
<mat-card class="stat-card">
<mat-card-header>
<mat-icon>lock</mat-icon>
<mat-card-title>Zylinder</mat-card-title>
</mat-card-header>
<mat-card-content>
<span class="stat-number">{{ cylinderCount }}</span>
<p>Registrierte Zylinder</p>
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="/cylinders">Verwalten</button>
</mat-card-actions>
</mat-card>
<mat-card class="stat-card">
<mat-card-header>
<mat-icon>admin_panel_settings</mat-icon>
<mat-card-title>Systeme</mat-card-title>
</mat-card-header>
<mat-card-content>
<span class="stat-number">{{ systemCount }}</span>
<p>Aktive Systeme</p>
</mat-card-content>
<mat-card-actions>
<button mat-button routerLink="/systems">Verwalten</button>
</mat-card-actions>
</mat-card>
</div>
<!-- Recent Activity Section -->
<div class="recent-activity">
<h2>Letzte Aktivitäten</h2>
<mat-card>
<mat-card-content>
<ag-grid-angular
style="width: 100%; height: 300px;"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
</mat-card-content>
</mat-card>
</div>
</div>

85
client/src/app/modules/dashboard/dashboard.component.scss
View File

@@ -0,0 +1,85 @@
.dashboard-container {
padding: 24px;
height: calc(100% - 48px);
display: flex;
flex-direction: column;
gap: 24px;
.welcome-section {
h1 {
font-size: 24px;
margin: 0;
color: #333;
}
p {
margin: 8px 0 0 0;
color: #666;
}
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
.stat-card {
background: white;
border-radius: 8px;
mat-card-header {
padding: 16px 16px 0;
gap: 12px;
mat-icon {
color: #2D6B05;
}
}
mat-card-content {
padding: 16px;
text-align: center;
.stat-number {
font-size: 36px;
font-weight: 500;
color: #2D6B05;
}
p {
margin: 8px 0 0;
color: #666;
}
}
mat-card-actions {
padding: 8px;
display: flex;
justify-content: center;
}
}
}
.recent-activity {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
h2 {
margin: 0;
font-size: 20px;
color: #333;
}
mat-card {
flex: 1;
min-height: 0;
mat-card-content {
height: 100%;
padding: 16px;
}
}
}
}

55
client/src/app/modules/dashboard/dashboard.component.ts
View File

@@ -1,15 +1,62 @@
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
import { ColDef, GridOptions, GridReadyEvent } from 'ag-grid-community'; // Column Definition Type Interface
import { ApiService } from '../../shared/api.service';
import { MatIconModule } from '@angular/material/icon';
import {MatCardModule} from '@angular/material/card';
import { RouterModule } from '@angular/router';
import { AgLoadingComponent } from '../../shared/ag-grid/components/ag-loading/ag-loading.component';
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [AgGridAngular],
imports: [AgGridAngular, MatIconModule, AgGridAngular, MatCardModule, RouterModule],
providers: [DatePipe],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss'
})
export class DashboardComponent {
private api = inject(ApiService);
private datePipe = inject(DatePipe);
gridOptions: GridOptions = {
columnDefs: [
{ field: 'createdAt', headerName: 'Zeitpunkt', width: 160,
cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) },
{ field: 'message', headerName: 'Aktion', flex: 1 },
{ field: 'user', headerName: 'Benutzer', flex: 0,
cellRenderer: (data: any) => `${data.value?.firstName} ${data.value?.lastName}` }
],
pagination: true,
paginationPageSize: 10,
loading: true,
loadingOverlayComponent: AgLoadingComponent
};
// Stats
keyCount = 0;
cylinderCount = 0;
systemCount = 0;
ngOnInit() {
this.loadStats();
}
loadStats() {
this.api.getStats().subscribe(stats => {
this.keyCount = stats.keys;
this.cylinderCount = stats.cylinders;
this.systemCount = stats.systems;
});
}
onGridReady(params: GridReadyEvent) {
params.api.setGridOption("loading", true);
this.api.getActivities().subscribe(activity => {
params.api.setGridOption("rowData", activity)
params.api.setGridOption("loading", false);
});
}
}