autocomit

backup_story2_20260208_120845/applications/application-detail/application-detail.component.html

@@ -0,0 +1,55 @@
+<div class="container">
+  <div *ngIf="loading" class="loading">Loading...</div>
+  <div *ngIf="error" class="error">{{ error }}</div>
+
+  <div *ngIf="application && !loading" class="detail-card">
+    <div class="header">
+      <h1>{{ application.name }}</h1>
+      <div class="actions">
+        <button (click)="edit()" class="btn-primary">Edit</button>
+        <button (click)="delete()" class="btn-danger">Delete</button>
+      </div>
+    </div>
+
+    <div class="details">
+      <div class="detail-row">
+        <label>Status:</label>
+        <span class="status-badge" [ngClass]="getStatusClass(application.status)">
+          {{ getStatusDisplay(application.status) }}
+        </span>
+      </div>
+
+      <div class="detail-row">
+        <label>Description:</label>
+        <span>{{ application.description || '-' }}</span>
+      </div>
+
+      <div class="detail-row">
+        <label>Business Unit:</label>
+        <span>{{ application.businessUnit.name }}</span>
+      </div>
+
+      <div class="detail-row">
+        <label>End of Support Date:</label>
+        <span>{{ application.endOfSupportDate ? (application.endOfSupportDate | date:'mediumDate') : '-' }}</span>
+      </div>
+
+      <div class="detail-row">
+        <label>End of Life Date:</label>
+        <span>{{ application.endOfLifeDate ? (application.endOfLifeDate | date:'mediumDate') : '-' }}</span>
+      </div>
+
+      <div class="detail-row">
+        <label>Created:</label>
+        <span>{{ application.createdAt | date:'medium' }}</span>
+      </div>
+
+      <div class="detail-row">
+        <label>Last Updated:</label>
+        <span>{{ application.updatedAt | date:'medium' }}</span>
+      </div>
+    </div>
+
+    <button (click)="back()" class="btn-secondary">Back to List</button>
+  </div>
+</div>

backup_story2_20260208_120845/applications/application-detail/application-detail.component.scss

@@ -0,0 +1,127 @@
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.loading, .error {
+  text-align: center;
+  padding: 2rem;
+}
+
+.error {
+  color: #f44336;
+}
+
+.detail-card {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #f5f5f5;
+
+  h1 {
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+
+.details {
+  margin-bottom: 2rem;
+}
+
+.detail-row {
+  display: flex;
+  padding: 1rem 0;
+  border-bottom: 1px solid #f5f5f5;
+
+  label {
+    font-weight: 600;
+    width: 250px;
+    color: #555;
+  }
+
+  span {
+    flex: 1;
+    color: #333;
+  }
+}
+
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  
+  &.status-idea {
+    background-color: #e3f2fd;
+    color: #1976d2;
+  }
+  
+  &.status-in-development {
+    background-color: #fff3e0;
+    color: #f57c00;
+  }
+  
+  &.status-in-service {
+    background-color: #e8f5e9;
+    color: #388e3c;
+  }
+  
+  &.status-maintenance {
+    background-color: #fff9c4;
+    color: #f57f17;
+  }
+  
+  &.status-decommissioned {
+    background-color: #f5f5f5;
+    color: #616161;
+  }
+}
+
+.btn-primary, .btn-secondary, .btn-danger {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.btn-primary {
+  background-color: #3f51b5;
+  color: white;
+
+  &:hover {
+    background-color: #303f9f;
+  }
+}
+
+.btn-secondary {
+  background-color: #f5f5f5;
+  color: #333;
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+}
+
+.btn-danger {
+  background-color: #f44336;
+  color: white;
+
+  &:hover {
+    background-color: #d32f2f;
+  }
+}

backup_story2_20260208_120845/applications/application-detail/application-detail.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-application-detail',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="container"><h1>Application Detail</h1><p class="info-message">ℹ️ Coming in Story 2</p></div>`,
+  styles: [`.container { max-width: 1200px; margin: 2rem auto; padding: 2rem; } .info-message { background: #e3f2fd; padding: 1rem; border-radius: 4px; }`]
+})
+export class ApplicationDetailComponent {}