Created version 1 of the value-modeling page which is used to create …

…realistic targets for the different metrics being tracked.

frontend/src/app/main/copilot/value-modeling/grid-object.model.ts

@@ -0,0 +1,46 @@
+export interface MetricState {
+  seats: number;
+  adoptedDevs: number;
+  monthlyDevsReportingTimeSavings: number;
+  percentSeatsReportingTimeSavings: number;
+  percentSeatsAdopted: number;
+  percentMaxAdopted: number;
+  dailySuggestions: number;
+  dailyChatTurns: number;
+  weeklyPRSummaries: number;
+  weeklyTimeSaved: number;
+  monthlyTimeSavings: number;
+  annualTimeSavingsDollars: number;
+  productivityBoost: number;
+  [key: string]: number; // Index signature
+}
+
+export interface GridObject {
+  current: MetricState;
+  target: MetricState;
+  max: MetricState;
+}
+
+export function initializeGridObject(): GridObject {
+  const defaultMetricState: MetricState = {
+    seats: 0,
+    adoptedDevs: 0,
+    monthlyDevsReportingTimeSavings: 0,
+    percentSeatsReportingTimeSavings: 0,
+    percentSeatsAdopted: 0,
+    percentMaxAdopted: 0,
+    dailySuggestions: 0,
+    dailyChatTurns: 0,
+    weeklyPRSummaries: 0,
+    weeklyTimeSaved: 0,
+    monthlyTimeSavings: 0,
+    annualTimeSavingsDollars: 0,
+    productivityBoost: 0
+  };
+
+  return {
+    current: { ...defaultMetricState },
+    target: { ...defaultMetricState },
+    max: { ...defaultMetricState }
+  };
+}

frontend/src/app/main/copilot/value-modeling/value-modeling.component.scss

@@ -5,12 +5,21 @@
 }
 
 .page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 24px;
+
   h1 {
     margin: 0;
     font-size: 24px;
     font-weight: 500;
   }
+
+  .button-group {
+    display: flex;
+    gap: 16px;
+  }
 }
 
 .charts-grid {
@@ -55,10 +64,58 @@
   }
 }
 
+.metrics-table {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+
+  mat-card {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+
+      th, td {
+        padding: 8px;
+        text-align: right; /* Right justify all content */
+        width: 25%; /* Ensure consistent column widths */
+      }
+
+      th {
+        font-weight: 500;
+      }
+
+      td {
+        mat-form-field {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
 .example-right-align {
   text-align: right;
 }
 
+.invalid {
+  border-color: red;
+}
+
+mat-form-field[disabled] {
+  .mat-form-field-wrapper {
+    background-color: #f5f5f5;
+    box-shadow: none;
+  }
+
+  .mat-input-element {
+    color: #9e9e9e;
+  }
+}
+
 @media (max-width: 768px) {
   .charts-grid {
     grid-template-columns: 1fr;
@@ -75,4 +132,8 @@
       grid-template-columns: 1fr;
     }
   }
+
+  .metrics-table {
+    grid-template-columns: 1fr;
+  }
 }