feat(admin-institutions): add last updated on institution summary tab

Author: Vlad0n20

src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.html

@@ -4,6 +4,13 @@
   </div>
 } @else {
   <div class="w-full">
+    @if (summaryMetrics()?.reportYearmonth) {
+      <div class="last-updated-section mb-3">
+        <span class="last-updated-label">{{ 'adminInstitutions.summary.lastUpdated' | translate }}:</span>
+        <span class="last-updated-date">{{ summaryMetrics()!.reportYearmonth | reportDate }}</span>
+      </div>
+    }
+
     <div class="flex flex-wrap mt-4 gap-3 md:gap-4">
       @for (item of statisticsData; track $index) {
         <osf-statistic-card class="width-25" [label]="item.label | translate" [value]="item.value" />

src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss

@@ -25,3 +25,21 @@
     width: 100%;
   }
 }
+
+.last-updated-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem; // 14px
+  color: var(--text-color-secondary);
+  padding: 0.75rem 0;
+
+  .last-updated-label {
+    font-weight: 600;
+  }
+
+  .last-updated-date {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+}

src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.ts

@@ -10,6 +10,7 @@ import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/
 import { StatisticCardComponent } from '@osf/shared/components/statistic-card/statistic-card.component';
 import { DatasetInput } from '@osf/shared/models/charts/dataset-input';
 import { SelectOption } from '@osf/shared/models/select-option.model';
+import { ReportDatePipe } from '@osf/shared/pipes/report-date.pipe';
 import { DoughnutChartComponent } from '@shared/components/doughnut-chart/doughnut-chart.component';
 
 import {
@@ -23,7 +24,14 @@ import {
 
 @Component({
   selector: 'osf-institutions-summary',
-  imports: [StatisticCardComponent, LoadingSpinnerComponent, DoughnutChartComponent, BarChartComponent, TranslatePipe],
+  imports: [
+    StatisticCardComponent,
+    LoadingSpinnerComponent,
+    DoughnutChartComponent,
+    BarChartComponent,
+    TranslatePipe,
+    ReportDatePipe,
+  ],
   templateUrl: './institutions-summary.component.html',
   styleUrl: './institutions-summary.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/shared/pipes/report-date.pipe.spec.ts

@@ -0,0 +1,48 @@
+import { ReportDatePipe } from './report-date.pipe';
+
+describe('ReportDatePipe', () => {
+  let pipe: ReportDatePipe;
+
+  beforeEach(() => {
+    pipe = new ReportDatePipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should transform "2024-08" to "August 1, 2024"', () => {
+    expect(pipe.transform('2024-08')).toBe('August 1, 2024');
+  });
+
+  it('should transform "2024-12" to "December 1, 2024"', () => {
+    expect(pipe.transform('2024-12')).toBe('December 1, 2024');
+  });
+
+  it('should transform "2025-01" to "January 1, 2025"', () => {
+    expect(pipe.transform('2025-01')).toBe('January 1, 2025');
+  });
+
+  it('should return empty string for null', () => {
+    expect(pipe.transform(null)).toBe('');
+  });
+
+  it('should return empty string for undefined', () => {
+    expect(pipe.transform(undefined)).toBe('');
+  });
+
+  it('should return empty string for empty string', () => {
+    expect(pipe.transform('')).toBe('');
+  });
+
+  it('should return empty string for invalid format', () => {
+    expect(pipe.transform('invalid')).toBe('');
+    expect(pipe.transform('2024')).toBe('');
+    expect(pipe.transform('2024-')).toBe('');
+  });
+
+  it('should return empty string for invalid month', () => {
+    expect(pipe.transform('2024-13')).toBe('');
+    expect(pipe.transform('2024-00')).toBe('');
+  });
+});

src/app/shared/pipes/report-date.pipe.ts

@@ -0,0 +1,51 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Transforms a report yearmonth string from "YYYY-MM" format to "Month Day, Year" format
+ * Example: "2024-08" -> "August 1, 2024"
+ */
+@Pipe({
+  name: 'reportDate',
+  standalone: true,
+})
+export class ReportDatePipe implements PipeTransform {
+  private readonly monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  transform(yearMonth: string | null | undefined): string {
+    if (!yearMonth) {
+      return '';
+    }
+
+    // Input format: "YYYY-MM" (e.g., "2024-08")
+    const [yearStr, monthStr] = yearMonth.split('-');
+
+    if (!yearStr || !monthStr) {
+      return '';
+    }
+
+    const year = parseInt(yearStr, 10);
+    const month = parseInt(monthStr, 10);
+
+    if (isNaN(year) || isNaN(month) || month < 1 || month > 12) {
+      return '';
+    }
+
+    const monthName = this.monthNames[month - 1];
+
+    // Output format: "Month 1, Year" (e.g., "August 1, 2024")
+    return `${monthName} 1, ${year}`;
+  }
+}

src/assets/i18n/en.json

@@ -2834,6 +2834,7 @@
     },
     "summary": {
       "title": "Summary",
+      "lastUpdated": "Last Updated",
       "totalUsersByDepartment": "Total Users by Department",
       "publicPrivateProjects": "Public vs Private Projects",
       "publicEmbargoedRegistrations": "Public vs Embargoed Registrations",