Merge pull request #495 from sawankshrma/new-feat-Report

Feature: Report Page

Author: wurstbrot

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { UsageComponent } from './pages/usage/usage.component';
 import { TeamsComponent } from './pages/teams/teams.component';
 import { RoadmapComponent } from './pages/roadmap/roadmap.component';
 import { SettingsComponent } from './pages/settings/settings.component';
+import { ReportComponent } from './pages/report/report.component';
 
 const routes: Routes = [
   { path: '', component: CircularHeatmapComponent },
@@ -24,6 +25,7 @@ const routes: Routes = [
   { path: 'userday', component: UserdayComponent },
   { path: 'roadmap', component: RoadmapComponent },
   { path: 'settings', component: SettingsComponent },
+  { path: 'report', component: ReportComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -32,6 +33,10 @@ import { KpiComponent } from './component/kpi/kpi.component';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-groups-editor.module';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { ReportComponent } from './pages/report/report.component';
+import { ReportConfigModalComponent } from './component/report-config-modal/report-config-modal.component';
+import { TeamSelectorComponent } from './component/team-selector/team-selector.component';
+import { ColResizeDirective } from './directive/col-resize.directive';
 
 @NgModule({
   declarations: [
@@ -56,6 +61,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     ProgressSliderComponent,
     KpiComponent,
     SettingsComponent,
+    ReportComponent,
+    ReportConfigModalComponent,
+    TeamSelectorComponent,
+    ColResizeDirective,
   ],
   imports: [
     BrowserModule,
@@ -65,6 +74,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatDialogModule,
     ReactiveFormsModule,
     MatToolbarModule,
+    MatMenuModule,
     FormsModule,
     HttpClientModule,
     TeamsGroupsEditorModule,

src/app/component/report-config-modal/report-config-modal.component.css

@@ -0,0 +1,145 @@
+.config-content {
+    max-height: 70vh;
+    overflow-y: auto;
+    padding: 0 40px;
+    background-color: var(--background-primary);
+}
+
+mat-dialog-title{
+    font-size:20px;
+}
+
+.config-section {
+    padding: 16px 0;
+}
+
+.config-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    margin-top: 12px;
+}
+
+.config-row-label {
+    font-size: 0.95em;
+    white-space: nowrap;
+}
+
+.slider-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+}
+
+.word-cap-slider {
+    width: 100%;
+}
+
+.config-section h3 {
+    margin: 0 0 4px 0;
+    font-size: 1.1em;
+    font-weight: 500;
+}
+
+.config-hint {
+    margin: 0 0 12px 0;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
+
+.select-all-actions {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.config-row-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.config-row-label mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    color: var(--text-secondary);
+}
+
+.checkbox-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 8px;
+}
+
+.search-field {
+    width: 80%;
+    margin-bottom: 8px;
+}
+
+.activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 4px 0;
+    border: 1px solid var(--text-tertiary);
+    border-radius: 4px;
+    padding: 8px;
+}
+
+.activity-checkbox-label {
+    display: flex;
+    flex-direction: column;
+}
+
+.activity-name {
+    font-weight: 500;
+}
+
+.activity-meta {
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+.references-section {
+    margin-top: 12px;
+}
+
+.references-subtoggle {
+    display: flex;
+    gap: 12px;
+    margin-top: 6px;
+    margin-left: 28px;
+    flex-wrap: wrap;
+}
+
+mat-divider {
+    margin: 4px 0;
+}
+
+.column-toggle {
+    border-radius: 999px;
+    padding: 2px;
+    border: 1px solid var(--text-tertiary);
+    background: var(--background-secondary);
+}
+
+/* buttons */
+.column-toggle .mat-button-toggle {
+    border-radius: 999px;
+    border: none;
+    padding: 0 16px;
+    color: var(--text-secondary);
+    background: transparent;
+}
+
+/* selected */
+.column-toggle .mat-button-toggle-checked {
+    background: var(--primary-color);
+    color: var(--text-on-primary);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
+}