Feature/crypto front

MiniKmsClient/src/app/manage-keys/manage-keys.component.html

@@ -1 +1,56 @@
-<p>manage-keys works!</p>
+<div class="controls-row">
+  <mat-form-field appearance="outline" class="control">
+    <mat-label>Alias</mat-label>
+    <input matInput placeholder="Enter alias">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="control">
+    <mat-label>Key Type</mat-label>
+    <mat-select>
+      <mat-option *ngFor="let type of keyTypes" [value]="type">
+        {{ type }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <button mat-raised-button color="primary" class="add-btn" (click)="addKey()">
+    Add Key
+  </button>
+</div>
+
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z2 full-width-table">
+
+  <!-- Key ID -->
+  <ng-container matColumnDef="keyId">
+    <th mat-header-cell *matHeaderCellDef> Key ID </th>
+    <td mat-cell *matCellDef="let element"> {{element.keyId}} </td>
+  </ng-container>
+
+  <!-- Alias -->
+  <ng-container matColumnDef="alias">
+    <th mat-header-cell *matHeaderCellDef> Alias </th>
+    <td mat-cell *matCellDef="let element"> {{element.alias}} </td>
+  </ng-container>
+
+  <!-- Key Type -->
+  <ng-container matColumnDef="keyType">
+    <th mat-header-cell *matHeaderCellDef> Key Type </th>
+    <td mat-cell *matCellDef="let element"> {{element.keyType}} </td>
+  </ng-container>
+
+  <!-- Actions -->
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef> Actions </th>
+    <td mat-cell *matCellDef="let element" class="actions-cell">
+      <button mat-stroked-button color="warn" (click)="deleteKey(element)">
+        Delete
+      </button>
+      <button mat-stroked-button color="accent" (click)="rotateKey(element)">
+        Rotate
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

MiniKmsClient/src/app/manage-keys/manage-keys.component.scss

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  min-height: 100vh; 
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.controls-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin: 20px auto;   
+  width: 60%;
+  background: white;  
+  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  padding-top: 36px;
+}
+
+.control {
+  flex: 1;
+}
+
+button.add-btn {
+  height: 56px;        
+}
+
+.full-width-table {
+  width: 80%;          
+  margin: 0 auto;      
+  background: white;   
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}

MiniKmsClient/src/app/manage-keys/manage-keys.component.ts

@@ -1,10 +1,40 @@
 import { Component } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+
+export interface KeyRecord {
+  keyId: string;
+  alias: string;
+  keyType: string;
+}
 
 @Component({
   selector: 'app-manage-keys',
   templateUrl: './manage-keys.component.html',
   styleUrl: './manage-keys.component.scss'
 })
 export class ManageKeysComponent {
+keyTypes: string[] = ['AES', 'RSA', 'HMAC'];
+
+  displayedColumns: string[] = ['keyId', 'alias', 'keyType', 'actions'];
+  dataSource = new MatTableDataSource<KeyRecord>([
+    { keyId: '1', alias: 'Key One', keyType: 'AES' },
+    { keyId: '2', alias: 'Key Two', keyType: 'RSA' },
+    { keyId: '3', alias: 'Key Three', keyType: 'AES' },
+    { keyId: '4', alias: 'Key Four', keyType: 'HMAC' }
+  ]);
+
+  addKey() {
+    console.log('Add key clicked');
+    // TODO: implement
+  }
+
+  deleteKey(key: KeyRecord) {
+    console.log('Delete key', key);
+    // TODO: implement
+  }
 
+  rotateKey(key: KeyRecord) {
+    console.log('Rotate key', key);
+    // TODO: implement
+  }
 }