From e7180d2b83681b7def12415d4c9b2cc3f1e59057 Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 15 Jul 2025 15:16:16 +0300
Subject: [PATCH 1/4] feat(admin-users): added page

---
 .../admin-institutions.component.html         |  10 +
 .../admin-institutions.component.ts           |   8 +-
 .../admin-table/admin-table.component.html    | 134 +++++++----
 .../admin-table/admin-table.component.scss    |   6 +
 .../admin-table/admin-table.component.ts      |  53 ++++-
 .../admin-institutions/constants/index.ts     |   1 +
 .../project-table-columns.constant.ts         |  77 +++++++
 .../admin-institutions/mappers/index.ts       |   4 +
 ...nstitution-project-to-table-data.mapper.ts |  28 +++
 .../mappers/institution-projects.mapper.ts    |  65 ++++++
 .../admin-institutions/models/index.ts        |   5 +
 .../models/institution-project.model.ts       |  21 ++
 .../institution-projects-json-api.model.ts    |  50 ++++
 ...institution-projects-query-params.model.ts |   5 +
 ...nstitution-registrations-json-api.model.ts |  45 ++++
 .../admin-institutions/models/table.model.ts  |   2 +-
 .../institutions-projects.component.html      |  21 ++
 .../institutions-projects.component.scss      |   3 +
 .../institutions-projects.component.ts        | 216 +++++++++++++++++-
 .../institutions-users.component.html         |  85 ++++---
 .../institutions-users.component.ts           |   1 +
 .../services/institutions-admin.service.ts    |  67 +++++-
 .../store/institutions-admin.actions.ts       |  11 +
 .../store/institutions-admin.model.ts         |   4 +-
 .../store/institutions-admin.selectors.ts     |  30 +++
 .../store/institutions-admin.state.ts         |  27 +++
 .../store/async-state-with-links.model.ts     |  10 +
 src/app/shared/models/store/index.ts          |   1 +
 src/assets/i18n/en.json                       |  16 ++
 29 files changed, 887 insertions(+), 119 deletions(-)
 create mode 100644 src/app/features/admin-institutions/constants/project-table-columns.constant.ts
 create mode 100644 src/app/features/admin-institutions/mappers/institution-project-to-table-data.mapper.ts
 create mode 100644 src/app/features/admin-institutions/mappers/institution-projects.mapper.ts
 create mode 100644 src/app/features/admin-institutions/models/institution-project.model.ts
 create mode 100644 src/app/features/admin-institutions/models/institution-projects-json-api.model.ts
 create mode 100644 src/app/features/admin-institutions/models/institution-projects-query-params.model.ts
 create mode 100644 src/app/features/admin-institutions/models/institution-registrations-json-api.model.ts
 create mode 100644 src/app/shared/models/store/async-state-with-links.model.ts

diff --git a/src/app/features/admin-institutions/admin-institutions.component.html b/src/app/features/admin-institutions/admin-institutions.component.html
index 6d56b87ed..bbdd54d54 100644
--- a/src/app/features/admin-institutions/admin-institutions.component.html
+++ b/src/app/features/admin-institutions/admin-institutions.component.html
@@ -18,6 +18,16 @@ <h1>{{ institution().name }}</h1>
       </div>
     </div>
 
+    <div class="px-3 py-4 bg-white md:hidden md:px-5">
+      <osf-select
+        [options]="resourceTabOptions"
+        [(selectedValue)]="selectedTab"
+        [fullWidth]="true"
+        class="text-center"
+        (changeValue)="onTabChange($event)"
+      />
+    </div>
+
     <p-tabs [value]="selectedTab" (valueChange)="onTabChange($event)" class="flex-1 px-3 hidden md:px-5 md:inline">
       <p-tablist>
         @for (item of resourceTabOptions; track $index) {
diff --git a/src/app/features/admin-institutions/admin-institutions.component.ts b/src/app/features/admin-institutions/admin-institutions.component.ts
index d17c7ffc1..14c199c81 100644
--- a/src/app/features/admin-institutions/admin-institutions.component.ts
+++ b/src/app/features/admin-institutions/admin-institutions.component.ts
@@ -8,13 +8,14 @@ import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 
+import { Primitive } from '@osf/core/helpers';
 import { resourceTabOptions } from '@osf/features/admin-institutions/constants/resource-tab-option.constant';
-import { LoadingSpinnerComponent } from '@shared/components';
+import { LoadingSpinnerComponent, SelectComponent } from '@shared/components';
 import { FetchInstitutionById, InstitutionsSearchSelectors } from '@shared/stores';
 
 @Component({
   selector: 'osf-admin-institutions',
-  imports: [TabsModule, TranslateModule, RouterOutlet, NgOptimizedImage, LoadingSpinnerComponent],
+  imports: [TabsModule, TranslateModule, RouterOutlet, NgOptimizedImage, LoadingSpinnerComponent, SelectComponent],
   templateUrl: './admin-institutions.component.html',
   styleUrl: './admin-institutions.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,10 +45,11 @@ export class AdminInstitutionsComponent implements OnInit {
     this.selectedTab = this.route.snapshot.firstChild?.routeConfig?.path || 'summary';
   }
 
-  onTabChange(selectedValue: string | number) {
+  onTabChange(selectedValue: Primitive) {
     const value = String(selectedValue);
     this.selectedTab = value;
     const selectedTab = this.resourceTabOptions.find((tab) => tab.value === value);
+
     if (selectedTab) {
       this.router.navigate([selectedTab.value], { relativeTo: this.route });
     }
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
index 6b64dba3a..9edff7cef 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
@@ -1,11 +1,11 @@
-<div class="flex justify-content-between align-items-center p-3">
-  <div>
+<div class="flex justify-content-between align-items-center py-2 px-0 md:py-3 md:px-3">
+  <div class="hidden md:block">
     <ng-content select="[slot=amount]"></ng-content>
   </div>
 
   <p-menu #downloadMenu [model]="downloadMenuItems()" appendTo="body" popup>
     <ng-template #item let-item>
-      <a class="p-menu-item-link ml-1" target="_blank" [href]="item.link">
+      <a class="p-menu-item-link ml-1" osfStopPropagation target="_blank" [href]="item.link">
         <i [class]="item.icon"></i>
 
         {{ item.label }}
@@ -13,49 +13,52 @@
     </ng-template>
   </p-menu>
 
-  <div class="filters-section flex align-items-center gap-2">
+  <div class="flex align-items-center gap-2 flex-column w-full md:flex-row md:w-fit">
     <ng-content select="[slot=otherFilters]"></ng-content>
 
-    <p-multiselect
-      [options]="tableColumns()"
-      [(ngModel)]="selectedColumns"
-      (onChange)="onColumnSelectionChange($event.value)"
-      optionLabel="header"
-      [showToggleAll]="false"
-      [showClear]="false"
-      [dropdownIcon]="'hidden'"
-    >
-      <ng-template let-values pTemplate="selectedItems">
-        <div class="flex align-items-center gap-2">
-          <i class="fa fa-table-columns text-primary font-bold"></i>
-          <span>{{ 'adminInstitutions.institutionUsers.customize' | translate }}</span>
-        </div>
-      </ng-template>
+    <div class="flex align-items-center gap-2 justify-content-between w-full md:justify-content-start md:w-fit">
+      <p-multiselect
+        class="w-9 md:w-fit"
+        [options]="tableColumns()"
+        [(ngModel)]="selectedColumns"
+        (onChange)="onColumnSelectionChange($event.value)"
+        optionLabel="header"
+        [showToggleAll]="false"
+        [showClear]="false"
+        [dropdownIcon]="'hidden'"
+      >
+        <ng-template let-values pTemplate="selectedItems">
+          <div class="flex align-items-center gap-2">
+            <i class="fa fa-table-columns text-primary font-bold"></i>
+            <span>{{ 'adminInstitutions.institutionUsers.customize' | translate }}</span>
+          </div>
+        </ng-template>
 
-      <ng-template #item let-item>
-        {{ item.header | translate }}
-      </ng-template>
-    </p-multiselect>
+        <ng-template #item let-item>
+          {{ item.header | translate }}
+        </ng-template>
+      </p-multiselect>
 
-    @if (downloadLink()) {
-      <p-button
-        icon="fa fa-download text-primary text-xl"
-        class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
-        severity="info"
-        (click)="downloadMenu.toggle($event)"
-      />
-    }
+      @if (downloadLink()) {
+        <p-button
+          icon="fa fa-download text-primary text-xl"
+          class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
+          severity="info"
+          (click)="downloadMenu.toggle($event)"
+        />
+      }
 
-    @if (reportsLink()) {
-      <a
-        pButton
-        [href]="reportsLink()"
-        class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
-        target="_blank"
-      >
-        <i class="fa fa-chart-pie text-primary border-1 border-transparent text-xl"></i>
-      </a>
-    }
+      @if (reportsLink()) {
+        <a
+          pButton
+          [href]="reportsLink()"
+          class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
+          target="_blank"
+        >
+          <i class="fa fa-chart-pie text-primary border-1 border-transparent text-xl"></i>
+        </a>
+      }
+    </div>
   </div>
 </div>
 
@@ -75,7 +78,7 @@
   <ng-template #header let-columns>
     <tr>
       @for (col of columns; track col.field) {
-        <th [pSortableColumn]="col.sortable ? col.field : null">
+        <th [pSortableColumn]="col.sortable ? col.field : null" (click)="onHeaderClick(col)">
           <div class="flex align-items-center gap-2">
             <span>{{ col.header | translate }}</span>
             @if (col.sortable) {
@@ -121,13 +124,44 @@
   </ng-template>
 </p-table>
 
-@if (enablePagination() && totalCount() > pageSize()) {
-  <div class="p-3">
-    <osf-custom-paginator
-      [first]="first()"
-      [totalCount]="totalCount()"
-      [rows]="pageSize()"
-      (pageChanged)="onPageChange($event)"
-    ></osf-custom-paginator>
+@if (isNextPreviousPagination()) {
+  <div class="flex column-gap-2 w-full justify-content-center pt-2">
+    @if (firstLink() && prevLink()) {
+      <p-button
+        icon="fas fa-angles-left paginator-icon-gray-color"
+        severity="contrast"
+        text
+        (click)="switchPage(firstLink())"
+      ></p-button>
+    }
+
+    <p-button
+      icon="fas fa-angle-left paginator-icon-gray-color"
+      severity="contrast"
+      text
+      [disabled]="!prevLink()"
+      (click)="switchPage(prevLink())"
+    >
+    </p-button>
+
+    <p-button
+      icon="fas fa-angle-right paginator-icon-gray-color"
+      severity="contrast"
+      text
+      [disabled]="!nextLink()"
+      (click)="switchPage(nextLink())"
+    >
+    </p-button>
   </div>
+} @else {
+  @if (enablePagination() && totalCount() > pageSize()) {
+    <div class="p-3">
+      <osf-custom-paginator
+        [first]="first()"
+        [totalCount]="totalCount()"
+        [rows]="pageSize()"
+        (pageChanged)="onPageChange($event)"
+      ></osf-custom-paginator>
+    </div>
+  }
 }
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
index ba786a529..0e3c9ec7f 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
@@ -19,3 +19,9 @@
   --p-button-padding-y: 0;
   --p-button-icon-only-width: max-content;
 }
+
+.paginator-icon-gray-color {
+  --p-button-text-contrast-color: var(--grey-1);
+
+  color: var(--grey-1);
+}
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts b/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts
index e5a90116c..c9a0002f3 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts
@@ -18,6 +18,7 @@ import {
   TableIconClickEvent,
 } from '@osf/features/admin-institutions/models';
 import { CustomPaginatorComponent } from '@osf/shared/components';
+import { StopPropagationDirective } from '@shared/directives';
 import { SortOrder } from '@shared/enums';
 import { QueryParams } from '@shared/models';
 
@@ -33,6 +34,7 @@ import { QueryParams } from '@shared/models';
     TranslatePipe,
     Button,
     Menu,
+    StopPropagationDirective,
   ],
   templateUrl: './admin-table.component.html',
   styleUrl: './admin-table.component.scss',
@@ -40,6 +42,7 @@ import { QueryParams } from '@shared/models';
 })
 export class AdminTableComponent {
   private readonly translateService = inject(TranslateService);
+  private userInitiatedSort = false;
 
   tableColumns = input.required<TableColumn[]>();
   tableData = input.required<TableCellData[]>();
@@ -53,9 +56,22 @@ export class AdminTableComponent {
   sortField = input<string>('');
   sortOrder = input<number>(1);
 
+  isNextPreviousPagination = input<boolean>(false);
+
+  paginationLinks = input<
+    | {
+        first?: { href: string };
+        next?: { href: string };
+        prev?: { href: string };
+        last?: { href: string };
+      }
+    | undefined
+  >();
+
   pageChanged = output<PaginatorState>();
   sortChanged = output<QueryParams>();
   iconClicked = output<TableIconClickEvent>();
+  linkPageChanged = output<string>();
 
   downloadLink = input<string>('');
   reportsLink = input<string>('');
@@ -70,17 +86,17 @@ export class AdminTableComponent {
       {
         label: 'CSV',
         icon: 'fa fa-file-csv',
-        link: this.createUrl(baseUrl, 'csv'),
+        link: this.createUrl(baseUrl, 'text/csv'),
       },
       {
         label: 'TSV',
         icon: 'fa fa-file-alt',
-        link: this.createUrl(baseUrl, 'tsv'),
+        link: this.createUrl(baseUrl, 'text/tab-separated-values'),
       },
       {
         label: 'JSON',
         icon: 'fa fa-file-code',
-        link: this.createUrl(baseUrl, 'json'),
+        link: this.createUrl(baseUrl, 'application/json'),
       },
     ];
   });
@@ -99,6 +115,10 @@ export class AdminTableComponent {
   sortColumn = computed(() => this.sortField());
   currentSortOrder = computed(() => this.sortOrder());
 
+  firstLink = computed(() => this.paginationLinks()?.first?.href || '');
+  prevLink = computed(() => this.paginationLinks()?.prev?.href || '');
+  nextLink = computed(() => this.paginationLinks()?.next?.href || '');
+
   constructor() {
     effect(() => {
       const columns = this.tableColumns();
@@ -116,13 +136,20 @@ export class AdminTableComponent {
     this.pageChanged.emit(event);
   }
 
+  onHeaderClick(column: TableColumn): void {
+    if (column.sortable) {
+      this.userInitiatedSort = true;
+    }
+  }
+
   onSort(event: SortEvent): void {
-    if (event.field) {
+    if (event.field && this.userInitiatedSort) {
       this.sortChanged.emit({
         sortColumn: event.field,
         sortOrder: event.order === -1 ? SortOrder.Desc : SortOrder.Asc,
       } as QueryParams);
     }
+    this.userInitiatedSort = false;
   }
 
   onIconClick(rowData: TableCellData, column: TableColumn): void {
@@ -160,6 +187,10 @@ export class AdminTableComponent {
     return this.translateService.instant(stringValue) || '';
   }
 
+  switchPage(link: string) {
+    this.linkPageChanged.emit(link);
+  }
+
   private formatDate(value: string, format: string): string {
     if (format === 'yyyy-mm-to-mm/yyyy') {
       const yearMonthRegex = /^(\d{4})-(\d{2})$/;
@@ -171,11 +202,21 @@ export class AdminTableComponent {
       }
     }
 
+    if (format === 'yyyy-mm-dd-to-dd/mm/yyyy') {
+      const yearMonthDayRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
+      const match = value.match(yearMonthDayRegex);
+
+      if (match) {
+        const [, year, month, day] = match;
+        return `${day}/${month}/${year}`;
+      }
+    }
+
     return value;
   }
 
-  private createUrl(baseUrl: string, format: string): string {
-    return `${baseUrl}?format=${format}`;
+  private createUrl(baseUrl: string, mediaType: string): string {
+    return `${baseUrl}&acceptMediatype=${encodeURIComponent(mediaType)}`;
   }
 
   getLinkUrl(value: string | number | TableCellLink | undefined): string {
diff --git a/src/app/features/admin-institutions/constants/index.ts b/src/app/features/admin-institutions/constants/index.ts
index 2d8e951ea..9044772a9 100644
--- a/src/app/features/admin-institutions/constants/index.ts
+++ b/src/app/features/admin-institutions/constants/index.ts
@@ -1,3 +1,4 @@
 export * from './admin-table-columns.constant';
 export * from './department-options.constant';
+export * from './project-table-columns.constant';
 export * from './resource-tab-option.constant';
diff --git a/src/app/features/admin-institutions/constants/project-table-columns.constant.ts b/src/app/features/admin-institutions/constants/project-table-columns.constant.ts
new file mode 100644
index 000000000..951cc1c4b
--- /dev/null
+++ b/src/app/features/admin-institutions/constants/project-table-columns.constant.ts
@@ -0,0 +1,77 @@
+import { TableColumn } from '@osf/features/admin-institutions/models';
+
+export const projectTableColumns: TableColumn[] = [
+  {
+    field: 'title',
+    header: 'adminInstitutions.projects.title',
+    sortable: true,
+    isLink: true,
+    linkTarget: '_blank',
+  },
+  {
+    field: 'link',
+    header: 'adminInstitutions.projects.link',
+    sortable: false,
+    isLink: true,
+    linkTarget: '_blank',
+  },
+  {
+    field: 'dateCreated',
+    header: 'adminInstitutions.projects.dateCreated',
+    sortable: true,
+    dateFormat: 'yyyy-mm-dd-to-dd/mm/yyyy',
+  },
+  {
+    field: 'dateModified',
+    header: 'adminInstitutions.projects.dateModified',
+    sortable: true,
+    dateFormat: 'yyyy-mm-dd-to-dd/mm/yyyy',
+  },
+  {
+    field: 'doi',
+    header: 'adminInstitutions.projects.doi',
+    sortable: false,
+  },
+  {
+    field: 'storageLocation',
+    header: 'adminInstitutions.projects.storageLocation',
+    sortable: false,
+  },
+  {
+    field: 'totalDataStored',
+    header: 'adminInstitutions.projects.totalDataStored',
+    sortable: false,
+  },
+  {
+    field: 'creator',
+    header: 'adminInstitutions.projects.contributorName',
+    sortable: true,
+    isLink: true,
+    linkTarget: '_blank',
+  },
+  {
+    field: 'views',
+    header: 'adminInstitutions.projects.views',
+    sortable: false,
+  },
+  {
+    field: 'resourceType',
+    header: 'adminInstitutions.projects.resourceType',
+    sortable: false,
+  },
+  {
+    field: 'license',
+    header: 'adminInstitutions.projects.license',
+    sortable: false,
+  },
+  {
+    field: 'addOns',
+    header: 'adminInstitutions.projects.addOns',
+    sortable: false,
+  },
+  {
+    field: 'funderName',
+    header: 'adminInstitutions.projects.funderName',
+    sortable: false,
+  },
+];
diff --git a/src/app/features/admin-institutions/mappers/index.ts b/src/app/features/admin-institutions/mappers/index.ts
index 5b8786253..20dbd3dfa 100644
--- a/src/app/features/admin-institutions/mappers/index.ts
+++ b/src/app/features/admin-institutions/mappers/index.ts
@@ -1,4 +1,8 @@
 export { mapInstitutionDepartment, mapInstitutionDepartments } from './institution-departments.mapper';
+export { mapProjectToTableCellData } from './institution-project-to-table-data.mapper';
+export { mapInstitutionProjects } from './institution-projects.mapper';
+export { mapIndexCardResults } from './institution-summary-index.mapper';
 export { mapInstitutionSummaryMetrics } from './institution-summary-metrics.mapper';
 export { mapUserToTableCellData } from './institution-user-to-table-data.mapper';
 export { mapInstitutionUsers } from './institution-users.mapper';
+export { sendMessageRequestMapper } from './send-message-request.mapper';
diff --git a/src/app/features/admin-institutions/mappers/institution-project-to-table-data.mapper.ts b/src/app/features/admin-institutions/mappers/institution-project-to-table-data.mapper.ts
new file mode 100644
index 000000000..22411579c
--- /dev/null
+++ b/src/app/features/admin-institutions/mappers/institution-project-to-table-data.mapper.ts
@@ -0,0 +1,28 @@
+import { InstitutionProject, TableCellData, TableCellLink } from '@osf/features/admin-institutions/models';
+
+export function mapProjectToTableCellData(project: InstitutionProject): TableCellData {
+  return {
+    title: {
+      url: project.id,
+      text: project.title,
+    } as TableCellLink,
+    link: {
+      url: project.id,
+      text: project.identifier || project.id,
+    } as TableCellLink,
+    dateCreated: project.dateCreated,
+    dateModified: project.dateModified,
+    doi: '-',
+    storageLocation: project.storageRegion || '-',
+    totalDataStored: project.storageByteCount ? `${(project.storageByteCount / (1024 * 1024)).toFixed(1)} MB` : '0 B',
+    creator: {
+      url: project.creator || '#',
+      text: project.creator || '-',
+    } as TableCellLink,
+    views: project.viewCount?.toString() || '-',
+    resourceType: project.resourceType,
+    license: project.rights || '-',
+    addOns: '-',
+    funderName: '-',
+  };
+}
diff --git a/src/app/features/admin-institutions/mappers/institution-projects.mapper.ts b/src/app/features/admin-institutions/mappers/institution-projects.mapper.ts
new file mode 100644
index 000000000..8b108d6d1
--- /dev/null
+++ b/src/app/features/admin-institutions/mappers/institution-projects.mapper.ts
@@ -0,0 +1,65 @@
+import {
+  Affiliation,
+  IncludedItem,
+  IndexCard,
+  InstitutionProject,
+  InstitutionRegistrationsJsonApi,
+  SearchResult,
+} from '../models';
+
+export function mapInstitutionProjects(response: InstitutionRegistrationsJsonApi): InstitutionProject[] {
+  if (!response.included) {
+    return [];
+  }
+
+  const searchResults = response.included.filter(
+    (item: IncludedItem): item is SearchResult => item.type === 'search-result'
+  );
+  const indexCards = response.included.filter((item: IncludedItem): item is IndexCard => item.type === 'index-card');
+  const projects: InstitutionProject[] = [];
+
+  searchResults.forEach((result: SearchResult) => {
+    const indexCardId = result.relationships?.indexCard?.data?.id;
+    if (indexCardId) {
+      const indexCard = indexCards.find((card: IndexCard) => card.id === indexCardId);
+      if (indexCard && indexCard.attributes) {
+        const metadata = indexCard.attributes.resourceMetadata;
+
+        if (metadata) {
+          projects.push({
+            id: metadata['@id'] || indexCard.id,
+            title: metadata.title?.[0]?.['@value'] || '',
+            creator: metadata.creator?.[0]?.name?.[0]?.['@value'] || '',
+            dateCreated: metadata.dateCreated?.[0]?.['@value'] || '',
+            dateModified: metadata.dateModified?.[0]?.['@value'] || '',
+            resourceType: metadata.resourceType?.[0]?.['@id'] || '',
+            accessService: metadata.accessService?.[0]?.['@id'] || '',
+            publisher: metadata.publisher?.[0]?.name?.[0]?.['@value'] || '',
+            identifier: metadata.identifier?.[0]?.['@value'] || '',
+            storageByteCount: metadata.storageByteCount?.[0]?.['@value']
+              ? parseInt(metadata.storageByteCount[0]['@value'])
+              : undefined,
+            storageRegion: metadata.storageRegion?.[0]?.prefLabel?.[0]?.['@value'] || undefined,
+            affiliation:
+              metadata.affiliation
+                ?.map((aff: Affiliation) => aff.name?.[0]?.['@value'])
+                .filter((value): value is string => Boolean(value)) || [],
+            description: metadata.description?.[0]?.['@value'] || undefined,
+            rights: metadata.rights?.[0]?.name?.[0]?.['@value'] || undefined,
+            subject: metadata.subject?.[0]?.prefLabel?.[0]?.['@value'] || undefined,
+            viewCount: metadata.usage?.[0]?.viewCount?.[0]?.['@value']
+              ? parseInt(metadata.usage[0].viewCount[0]['@value'])
+              : undefined,
+            downloadCount: metadata.usage?.[0]?.downloadCount?.[0]?.['@value']
+              ? parseInt(metadata.usage[0].downloadCount[0]['@value'])
+              : undefined,
+            hasVersion: metadata.hasVersion ? metadata.hasVersion.length > 0 : false,
+            supplements: metadata.supplements ? metadata.supplements.length > 0 : false,
+          });
+        }
+      }
+    }
+  });
+
+  return projects;
+}
diff --git a/src/app/features/admin-institutions/models/index.ts b/src/app/features/admin-institutions/models/index.ts
index fe82ed31a..c9859791c 100644
--- a/src/app/features/admin-institutions/models/index.ts
+++ b/src/app/features/admin-institutions/models/index.ts
@@ -1,6 +1,11 @@
 export * from './institution-department.model';
 export * from './institution-departments-json-api.model';
 export * from './institution-index-value-search-json-api.model';
+export * from './institution-project.model';
+export * from './institution-project.model';
+export * from './institution-projects-json-api.model';
+export * from './institution-projects-query-params.model';
+export * from './institution-registrations-json-api.model';
 export * from './institution-search-filter.model';
 export * from './institution-summary-metric.model';
 export * from './institution-summary-metrics-json-api.model';
diff --git a/src/app/features/admin-institutions/models/institution-project.model.ts b/src/app/features/admin-institutions/models/institution-project.model.ts
new file mode 100644
index 000000000..d07d4eeaa
--- /dev/null
+++ b/src/app/features/admin-institutions/models/institution-project.model.ts
@@ -0,0 +1,21 @@
+export interface InstitutionProject {
+  id: string;
+  title: string;
+  creator: string;
+  dateCreated: string;
+  dateModified: string;
+  resourceType: string;
+  accessService: string;
+  publisher: string;
+  identifier: string;
+  storageByteCount?: number;
+  storageRegion?: string;
+  affiliation?: string[];
+  description?: string;
+  rights?: string;
+  subject?: string;
+  viewCount?: number;
+  downloadCount?: number;
+  hasVersion?: boolean;
+  supplements?: boolean;
+}
diff --git a/src/app/features/admin-institutions/models/institution-projects-json-api.model.ts b/src/app/features/admin-institutions/models/institution-projects-json-api.model.ts
new file mode 100644
index 000000000..0528b8d9a
--- /dev/null
+++ b/src/app/features/admin-institutions/models/institution-projects-json-api.model.ts
@@ -0,0 +1,50 @@
+export interface IncludedItem {
+  id: string;
+  type: 'related-property-path' | 'search-result' | 'index-card';
+  attributes?: Record<string, unknown>;
+  relationships?: Record<string, unknown>;
+  links?: Record<string, unknown>;
+}
+
+export interface SearchResult extends IncludedItem {
+  type: 'search-result';
+  relationships?: {
+    indexCard?: {
+      data?: {
+        id: string;
+      };
+    };
+  };
+}
+
+export interface IndexCard extends IncludedItem {
+  type: 'index-card';
+  attributes?: {
+    resourceMetadata?: ResourceMetadata;
+  };
+}
+
+export interface ResourceMetadata {
+  '@id'?: string;
+  title?: { '@value': string }[];
+  creator?: { name?: { '@value': string }[] }[];
+  dateCreated?: { '@value': string }[];
+  dateModified?: { '@value': string }[];
+  resourceType?: { '@id': string }[];
+  accessService?: { '@id': string }[];
+  publisher?: { name?: { '@value': string }[] }[];
+  identifier?: { '@value': string }[];
+  storageByteCount?: { '@value': string }[];
+  storageRegion?: { prefLabel?: { '@value': string }[] }[];
+  affiliation?: { name?: { '@value': string }[] }[];
+  description?: { '@value': string }[];
+  rights?: { name?: { '@value': string }[] }[];
+  subject?: { prefLabel?: { '@value': string }[] }[];
+  usage?: { viewCount?: { '@value': string }[]; downloadCount?: { '@value': string }[] }[];
+  hasVersion?: unknown[];
+  supplements?: unknown[];
+}
+
+export interface Affiliation {
+  name?: { '@value': string }[];
+}
diff --git a/src/app/features/admin-institutions/models/institution-projects-query-params.model.ts b/src/app/features/admin-institutions/models/institution-projects-query-params.model.ts
new file mode 100644
index 000000000..13b269bd9
--- /dev/null
+++ b/src/app/features/admin-institutions/models/institution-projects-query-params.model.ts
@@ -0,0 +1,5 @@
+import { QueryParams } from '@shared/models';
+
+export interface InstitutionProjectsQueryParamsModel extends QueryParams {
+  cursor?: string;
+}
diff --git a/src/app/features/admin-institutions/models/institution-registrations-json-api.model.ts b/src/app/features/admin-institutions/models/institution-registrations-json-api.model.ts
new file mode 100644
index 000000000..ba9fab66e
--- /dev/null
+++ b/src/app/features/admin-institutions/models/institution-registrations-json-api.model.ts
@@ -0,0 +1,45 @@
+export interface InstitutionRegistrationsJsonApi {
+  data: {
+    id: string;
+    type: 'index-card-search';
+    attributes: {
+      totalResultCount: number;
+      cardSearchFilter: {
+        filterType: { '@id': string };
+        propertyPathKey: string;
+        propertyPathSet: Record<string, unknown>[];
+        filterValueSet: Record<string, unknown>[];
+      }[];
+    };
+    relationships: {
+      relatedProperties: {
+        data: {
+          id: string;
+          type: 'related-property-path';
+        }[];
+      };
+      searchResultPage: {
+        data: {
+          id: string;
+          type: 'search-result';
+        }[];
+        links?: {
+          first?: { href: string };
+          next?: { href: string };
+          prev?: { href: string };
+          last?: { href: string };
+        };
+      };
+    };
+    links: {
+      self: string;
+    };
+  };
+  included: {
+    id: string;
+    type: 'related-property-path' | 'search-result' | 'index-card';
+    attributes?: Record<string, unknown>;
+    relationships?: Record<string, unknown>;
+    links?: Record<string, unknown>;
+  }[];
+}
diff --git a/src/app/features/admin-institutions/models/table.model.ts b/src/app/features/admin-institutions/models/table.model.ts
index 542df0b1f..66922b336 100644
--- a/src/app/features/admin-institutions/models/table.model.ts
+++ b/src/app/features/admin-institutions/models/table.model.ts
@@ -8,7 +8,7 @@ export interface TableColumn {
   iconClass?: string;
   iconTooltip?: string;
   iconAction?: string;
-  dateFormat?: 'yyyy-mm-to-mm/yyyy' | 'default';
+  dateFormat?: 'yyyy-mm-to-mm/yyyy' | 'yyyy-mm-dd-to-dd/mm/yyyy' | 'default';
 }
 
 export interface TableCellLink {
diff --git a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html
index e69de29bb..82fd7d9d7 100644
--- a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html
+++ b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html
@@ -0,0 +1,21 @@
+<osf-admin-table
+  [tableColumns]="tableColumns"
+  [tableData]="tableData()"
+  [enablePagination]="false"
+  [isNextPreviousPagination]="true"
+  [paginationLinks]="projectsLinks()"
+  [totalCount]="totalCount()"
+  [currentPage]="currentPage()"
+  [pageSize]="currentPageSize()"
+  [first]="first()"
+  [sortField]="sortField()"
+  [sortOrder]="sortOrder()"
+  (sortChanged)="onSortChange($event)"
+  (linkPageChanged)="onLinkPageChange($event)"
+  [downloadLink]="downloadUrl()"
+  [reportsLink]="reportsLink"
+>
+  <div slot="amount" class="flex items-center">
+    <h3 class="title">{{ amountText() }}</h3>
+  </div>
+</osf-admin-table>
diff --git a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.scss b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.scss
index e69de29bb..eab134e2c 100644
--- a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.scss
+++ b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.scss
@@ -0,0 +1,3 @@
+.title {
+  color: var(--pr-blue-1);
+}
diff --git a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts
index 066666964..e9a26fda3 100644
--- a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts
+++ b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts
@@ -1,10 +1,220 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  signal,
+  untracked,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+
+import { parseQueryFilterParams } from '@core/helpers';
+import { AdminTableComponent } from '@osf/features/admin-institutions/components';
+import { projectTableColumns } from '@osf/features/admin-institutions/constants';
+import { mapProjectToTableCellData } from '@osf/features/admin-institutions/mappers';
+import { FetchProjects } from '@osf/features/admin-institutions/store/institutions-admin.actions';
+import { InstitutionsAdminSelectors } from '@osf/features/admin-institutions/store/institutions-admin.selectors';
+import { TABLE_PARAMS } from '@shared/constants';
+import { SortOrder } from '@shared/enums';
+import { Institution, QueryParams } from '@shared/models';
+import { InstitutionsSearchSelectors } from '@shared/stores';
+
+import { InstitutionProject, InstitutionProjectsQueryParamsModel, TableCellData } from '../../models';
+
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'osf-institutions-projects',
-  imports: [],
+  imports: [AdminTableComponent],
   templateUrl: './institutions-projects.component.html',
   styleUrl: './institutions-projects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class InstitutionsProjectsComponent {}
+export class InstitutionsProjectsComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly translate = inject(TranslateService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  private readonly actions = createDispatchMap({
+    fetchProjects: FetchProjects,
+  });
+
+  institutionId = '';
+  reportsLink = 'https://drive.google.com/drive/folders/1_aFmeJwLp5xBS3-8clZ4xA9L3UFxdzDd';
+
+  queryParams = toSignal(this.route.queryParams);
+  currentPage = signal(1);
+  currentPageSize = signal(TABLE_PARAMS.rows);
+  first = signal(0);
+
+  sortField = signal<string>('-dateModified');
+  sortOrder = signal<number>(1);
+
+  private lastFetchKey = '';
+  private lastQueryParams = signal<InstitutionProjectsQueryParamsModel | null>(null);
+
+  tableColumns = projectTableColumns;
+
+  projects = select(InstitutionsAdminSelectors.getProjects);
+  totalCount = select(InstitutionsAdminSelectors.getProjectsTotalCount);
+  isLoading = select(InstitutionsAdminSelectors.getProjectsLoading);
+  projectsLinks = select(InstitutionsAdminSelectors.getProjectsLinks);
+  institution = select(InstitutionsSearchSelectors.getInstitution);
+
+  tableData = computed(() => {
+    return this.projects().map((project: InstitutionProject): TableCellData => mapProjectToTableCellData(project));
+  });
+
+  amountText = computed(() => {
+    const count = this.totalCount();
+    return count + ' ' + this.translate.instant('adminInstitutions.projects.totalProjects').toLowerCase();
+  });
+
+  downloadUrl = computed(() => {
+    const baseUrl = `${environment.shareDomainUrl}/index-card-search`;
+    const institution = this.institution() as Institution;
+    const institutionIris = institution.iris || [];
+    const affiliationParam = institutionIris.join(',');
+
+    const params = new URLSearchParams({
+      'cardSearchFilter[affiliation][]': affiliationParam,
+      'cardSearchFilter[resourceType]': 'Project',
+      'cardSearchFilter[accessService]': environment.webUrl,
+      'page[cursor]': '',
+      'page[size]': '10000',
+      sort: this.sortField(),
+      withFileName: 'projects-search-results',
+      'fields[Project]':
+        'title,dateCreated,dateModified,sameAs,storageRegion.prefLabel,storageByteCount,creator.name,usage.viewCount,resourceNature.displayLabel,rights.name,hasOsfAddon.prefLabel,funder.name',
+    });
+
+    return `${baseUrl}?${params.toString()}`;
+  });
+
+  constructor() {
+    this.setupQueryParamsEffect();
+  }
+
+  onSortChange(params: QueryParams): void {
+    this.sortField.set(params.sortColumn || '-dateModified');
+    this.sortOrder.set(params.sortOrder || 1);
+
+    this.updateQueryParams({
+      sortColumn: params.sortColumn || '-dateModified',
+      sortOrder: params.sortOrder || 1,
+      cursor: '',
+    });
+  }
+
+  onLinkPageChange(linkUrl: string): void {
+    if (!linkUrl) return;
+
+    const cursor = this.extractCursorFromUrl(linkUrl);
+
+    this.updateQueryParams({
+      cursor: cursor,
+    });
+  }
+
+  private setupQueryParamsEffect(): void {
+    effect(() => {
+      const institutionId = this.route.parent?.snapshot.params['institution-id'];
+      const rawQueryParams = this.queryParams();
+      console.log(rawQueryParams);
+      if (!rawQueryParams && !institutionId) return;
+
+      this.institutionId = institutionId;
+      const parsedQueryParams = this.parseQueryParams(rawQueryParams as Params);
+
+      this.updateComponentState(parsedQueryParams);
+
+      const sortField = parsedQueryParams.sortColumn;
+      const sortOrder = parsedQueryParams.sortOrder;
+      const sortParam = sortOrder === SortOrder.Desc ? `-${sortField}` : sortField;
+      const cursor = parsedQueryParams.cursor;
+      const size = parsedQueryParams.size;
+
+      // Get institution IRIs for affiliation filter
+      const institution = this.institution() as Institution;
+      const institutionIris = institution.iris || [];
+
+      // const key = `${size}|${sortParam}|${cursor}`;
+      // if (key === this.lastFetchKey) return;
+      //
+      // this.lastFetchKey = key;
+
+      this.actions.fetchProjects(this.institutionId, institutionIris, size, sortParam, cursor);
+    });
+  }
+
+  private updateQueryParams(updates: Partial<InstitutionProjectsQueryParamsModel>): void {
+    const queryParams: Record<string, string | undefined> = {};
+    const current = this.route.snapshot.queryParams;
+
+    const same =
+      (updates.page?.toString() ?? current['page']) === current['page'] &&
+      (updates.size?.toString() ?? current['size']) === current['size'] &&
+      (updates.sortColumn ?? current['sortColumn']) === current['sortColumn'] &&
+      (updates.sortOrder?.toString() ?? current['sortOrder']) === current['sortOrder'] &&
+      (updates.cursor ?? current['cursor']) === current['cursor'];
+
+    if (same) return;
+
+    if ('page' in updates) {
+      queryParams['page'] = updates.page!.toString();
+    }
+    if ('size' in updates) {
+      queryParams['size'] = updates.size!.toString();
+    }
+    if ('sortColumn' in updates) {
+      queryParams['sortColumn'] = updates.sortColumn || undefined;
+    }
+    if ('sortOrder' in updates) {
+      queryParams['sortOrder'] = updates.sortOrder?.toString() || undefined;
+    }
+    if ('cursor' in updates) {
+      queryParams['cursor'] = updates.cursor || undefined;
+    }
+
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams,
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  private parseQueryParams(params: Params): InstitutionProjectsQueryParamsModel {
+    const parsed = parseQueryFilterParams(params);
+    return {
+      ...parsed,
+      cursor: params['cursor'] || '',
+    };
+  }
+
+  private updateComponentState(params: InstitutionProjectsQueryParamsModel): void {
+    untracked(() => {
+      this.currentPage.set(params.page);
+      this.currentPageSize.set(params.size);
+      this.first.set((params.page - 1) * params.size);
+
+      if (params.sortColumn) {
+        this.sortField.set(params.sortColumn);
+        const order = params.sortOrder === SortOrder.Desc ? -1 : 1;
+        this.sortOrder.set(order);
+      }
+    });
+  }
+
+  private extractCursorFromUrl(url: string): string {
+    const urlObj = new URL(url);
+    return urlObj.searchParams.get('page[cursor]') || '';
+  }
+}
diff --git a/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.html b/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.html
index 5943efff7..8710a5fa3 100644
--- a/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.html
+++ b/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.html
@@ -1,46 +1,45 @@
-<div class="p-4">
-  <osf-admin-table
-    [tableColumns]="tableColumns"
-    [tableData]="tableData()"
-    [enablePagination]="true"
-    [totalCount]="totalCount()"
-    [currentPage]="currentPage()"
-    [pageSize]="currentPageSize()"
-    [first]="first()"
-    [sortField]="sortField()"
-    [sortOrder]="sortOrder()"
-    (pageChanged)="onPageChange($event)"
-    (sortChanged)="onSortChange($event)"
-    (iconClicked)="onIconClick($event)"
-    [downloadLink]="'/admin/institutions/' + institutionId + '/users/export'"
-    [reportsLink]="'/admin/institutions/' + institutionId + '/reports'"
-  >
-    <div slot="amount" class="flex items-center">
-      <h3 class="title">{{ amountText() }}</h3>
-    </div>
+<osf-admin-table
+  [tableColumns]="tableColumns"
+  [tableData]="tableData()"
+  [enablePagination]="true"
+  [totalCount]="totalCount()"
+  [currentPage]="currentPage()"
+  [pageSize]="currentPageSize()"
+  [first]="first()"
+  [sortField]="sortField()"
+  [sortOrder]="sortOrder()"
+  (pageChanged)="onPageChange($event)"
+  (sortChanged)="onSortChange($event)"
+  (iconClicked)="onIconClick($event)"
+  [downloadLink]="'/admin/institutions/' + institutionId + '/users/export'"
+  [reportsLink]="reportsLink"
+>
+  <div slot="amount" class="flex items-center">
+    <h3 class="title">{{ amountText() }}</h3>
+  </div>
 
-    <div slot="otherFilters" class="flex gap-3 align-items-center">
-      <div class="flex align-items-center gap-2">
-        <p-checkbox
-          [(ngModel)]="hasOrcidFilter"
-          (onChange)="onOrcidFilterChange($event.checked)"
-          binary="true"
-          inputId="orcid-filter"
-        >
-        </p-checkbox>
-        <label class="text-sm font-medium cursor-pointer m-0" for="orcid-filter">{{
-          'adminInstitutions.institutionUsers.hasOrcid' | translate
-        }}</label>
-      </div>
+  <div slot="otherFilters" class="flex gap-3 align-items-center flex-wrap w-full md:w-fit">
+    <div class="flex align-items-center gap-2 w-full md:w-fit">
+      <p-checkbox
+        [(ngModel)]="hasOrcidFilter"
+        (onChange)="onOrcidFilterChange($event.checked)"
+        binary="true"
+        inputId="orcid-filter"
+      >
+      </p-checkbox>
+      <label class="text-sm font-medium cursor-pointer m-0" for="orcid-filter">{{
+        'adminInstitutions.institutionUsers.hasOrcid' | translate
+      }}</label>
+    </div>
 
-      <div class="flex align-items-center gap-2">
-        <osf-select
-          [options]="departmentOptions"
-          [(selectedValue)]="selectedDepartment"
-          (changeValue)="onDepartmentChange($event)"
-          [fullWidth]="false"
-        />
-      </div>
+    <div class="w-full md:w-fit">
+      <osf-select
+        class="w-full md:w-fit"
+        [options]="departmentOptions"
+        [(selectedValue)]="selectedDepartment"
+        (changeValue)="onDepartmentChange($event)"
+        [fullWidth]="true"
+      />
     </div>
-  </osf-admin-table>
-</div>
+  </div>
+</osf-admin-table>
diff --git a/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.ts b/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.ts
index ae7802897..c93d770ba 100644
--- a/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.ts
+++ b/src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.ts
@@ -70,6 +70,7 @@ export class InstitutionsUsersComponent implements OnInit {
   });
 
   institutionId = '';
+  reportsLink = 'https://drive.google.com/drive/folders/1_aFmeJwLp5xBS3-8clZ4xA9L3UFxdzDd';
 
   queryParams = toSignal(this.route.queryParams);
   currentPage = signal(1);
diff --git a/src/app/features/admin-institutions/services/institutions-admin.service.ts b/src/app/features/admin-institutions/services/institutions-admin.service.ts
index 4310e1b2b..3b5bfb4b8 100644
--- a/src/app/features/admin-institutions/services/institutions-admin.service.ts
+++ b/src/app/features/admin-institutions/services/institutions-admin.service.ts
@@ -1,16 +1,25 @@
-import { catchError, map, Observable, of } from 'rxjs';
+import { catchError, Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import { inject, Injectable } from '@angular/core';
 
 import { JsonApiService } from '@core/services';
-import { mapIndexCardResults } from '@osf/features/admin-institutions/mappers/institution-summary-index.mapper';
-import { sendMessageRequestMapper } from '@osf/features/admin-institutions/mappers/send-message-request.mapper';
 import { departmens, summaryMetrics, users } from '@osf/features/admin-institutions/services/mock';
 
+import {
+  mapIndexCardResults,
+  mapInstitutionDepartments,
+  mapInstitutionProjects,
+  mapInstitutionSummaryMetrics,
+  mapInstitutionUsers,
+  sendMessageRequestMapper,
+} from '../mappers';
 import {
   InstitutionDepartment,
   InstitutionDepartmentsJsonApi,
   InstitutionIndexValueSearchJsonApi,
+  InstitutionProject,
+  InstitutionRegistrationsJsonApi,
   InstitutionSearchFilter,
   InstitutionSummaryMetrics,
   InstitutionSummaryMetricsJsonApi,
@@ -20,11 +29,6 @@ import {
   SendMessageResponseJsonApi,
 } from '../models';
 
-import {
-  mapInstitutionDepartments,
-  mapInstitutionSummaryMetrics,
-  mapInstitutionUsers,
-} from 'src/app/features/admin-institutions/mappers';
 import { environment } from 'src/environments/environment';
 
 @Injectable({
@@ -87,6 +91,48 @@ export class InstitutionsAdminService {
       );
   }
 
+  fetchProjects(
+    institutionId: string,
+    institutionIris: string[],
+    pageSize = 10,
+    sort = '-dateModified',
+    cursor = ''
+  ): Observable<{
+    projects: InstitutionProject[];
+    totalCount: number;
+    links?: { first?: { href: string }; next?: { href: string }; prev?: { href: string }; last?: { href: string } };
+  }> {
+    const url = `${environment.shareDomainUrl}/index-card-search`;
+    let params: Record<string, string> = {};
+
+    const affiliationParam = institutionIris.join(',');
+
+    // TODO: uncomment after demo
+    params = {
+      'cardSearchFilter[affiliation][]': `https://ror.org/05d5mza29,https://test.osf.io/institutions/${institutionId}/`,
+      'cardSearchFilter[accessService]': 'https://test.osf.io/',
+
+      // 'cardSearchFilter[affiliation][]': affiliationParam,
+      'cardSearchFilter[resourceType]': 'Project',
+      // 'cardSearchFilter[accessService]': environment.webUrl,
+      'page[cursor]': cursor,
+      'page[size]': pageSize.toString(),
+      sort,
+    };
+
+    return this.jsonApiService.get<InstitutionRegistrationsJsonApi>(url, params).pipe(
+      map((response: InstitutionRegistrationsJsonApi) => {
+        const projects = mapInstitutionProjects(response);
+        const links = response.data.relationships.searchResultPage.links;
+        return {
+          projects,
+          totalCount: response.data.attributes.totalResultCount,
+          links,
+        };
+      })
+    );
+  }
+
   fetchIndexValueSearch(
     institutionId: string,
     valueSearchPropertyPath: string,
@@ -108,9 +154,6 @@ export class InstitutionsAdminService {
   sendMessage(request: SendMessageRequest): Observable<SendMessageResponseJsonApi> {
     const payload = sendMessageRequestMapper(request);
 
-    return this.jsonApiService.post<SendMessageResponseJsonApi>(
-      `${this.hardcodedUrl}/users/${request.userId}/messages/`,
-      payload
-    );
+    return this.jsonApiService.post<SendMessageResponseJsonApi>(`${this.hardcodedUrl}/institutions/messages/`, payload);
   }
 }
diff --git a/src/app/features/admin-institutions/store/institutions-admin.actions.ts b/src/app/features/admin-institutions/store/institutions-admin.actions.ts
index 06cea18c0..a44bd7457 100644
--- a/src/app/features/admin-institutions/store/institutions-admin.actions.ts
+++ b/src/app/features/admin-institutions/store/institutions-admin.actions.ts
@@ -38,6 +38,17 @@ export class FetchInstitutionUsers {
   ) {}
 }
 
+export class FetchProjects {
+  static readonly type = '[InstitutionsAdmin] Fetch Projects';
+  constructor(
+    public institutionId: string,
+    public institutionIris: string[],
+    public pageSize = 10,
+    public sort = '-dateModified',
+    public cursor = ''
+  ) {}
+}
+
 export class SendUserMessage {
   static readonly type = '[InstitutionsAdmin] Send User Message';
   constructor(
diff --git a/src/app/features/admin-institutions/store/institutions-admin.model.ts b/src/app/features/admin-institutions/store/institutions-admin.model.ts
index 472df7cb3..473fcbd94 100644
--- a/src/app/features/admin-institutions/store/institutions-admin.model.ts
+++ b/src/app/features/admin-institutions/store/institutions-admin.model.ts
@@ -1,7 +1,8 @@
-import { AsyncStateModel, AsyncStateWithTotalCount } from '@shared/models';
+import { AsyncStateModel, AsyncStateWithLinksModel, AsyncStateWithTotalCount } from '@shared/models';
 
 import {
   InstitutionDepartment,
+  InstitutionProject,
   InstitutionSearchFilter,
   InstitutionSummaryMetrics,
   InstitutionUser,
@@ -15,6 +16,7 @@ export interface InstitutionsAdminModel {
   storageRegionSearch: AsyncStateModel<InstitutionSearchFilter[]>;
   searchResults: AsyncStateModel<InstitutionSearchFilter[]>;
   users: AsyncStateWithTotalCount<InstitutionUser[]>;
+  projects: AsyncStateWithLinksModel<InstitutionProject[]>;
   sendMessage: AsyncStateModel<SendMessageResponseJsonApi | null>;
   selectedInstitutionId: string | null;
   currentSearchPropertyPath: string | null;
diff --git a/src/app/features/admin-institutions/store/institutions-admin.selectors.ts b/src/app/features/admin-institutions/store/institutions-admin.selectors.ts
index 07ec7e9ef..6b46fccf2 100644
--- a/src/app/features/admin-institutions/store/institutions-admin.selectors.ts
+++ b/src/app/features/admin-institutions/store/institutions-admin.selectors.ts
@@ -2,6 +2,7 @@ import { Selector } from '@ngxs/store';
 
 import {
   InstitutionDepartment,
+  InstitutionProject,
   InstitutionSearchFilter,
   InstitutionSummaryMetrics,
   InstitutionUser,
@@ -117,6 +118,35 @@ export class InstitutionsAdminSelectors {
     return state.users.totalCount;
   }
 
+  @Selector([InstitutionsAdminState])
+  static getProjects(state: InstitutionsAdminModel): InstitutionProject[] {
+    return state.projects.data;
+  }
+
+  @Selector([InstitutionsAdminState])
+  static getProjectsLoading(state: InstitutionsAdminModel): boolean {
+    return state.projects.isLoading;
+  }
+
+  @Selector([InstitutionsAdminState])
+  static getProjectsError(state: InstitutionsAdminModel): string | null {
+    return state.projects.error;
+  }
+
+  @Selector([InstitutionsAdminState])
+  static getProjectsTotalCount(state: InstitutionsAdminModel): number {
+    return state.projects.totalCount;
+  }
+
+  @Selector([InstitutionsAdminState])
+  static getProjectsLinks(
+    state: InstitutionsAdminModel
+  ):
+    | { first?: { href: string }; next?: { href: string }; prev?: { href: string }; last?: { href: string } }
+    | undefined {
+    return state.projects.links;
+  }
+
   @Selector([InstitutionsAdminState])
   static getSendMessageResponse(state: InstitutionsAdminModel): SendMessageResponseJsonApi | null {
     return state.sendMessage.data;
diff --git a/src/app/features/admin-institutions/store/institutions-admin.state.ts b/src/app/features/admin-institutions/store/institutions-admin.state.ts
index 478ad1072..dfb3b636f 100644
--- a/src/app/features/admin-institutions/store/institutions-admin.state.ts
+++ b/src/app/features/admin-institutions/store/institutions-admin.state.ts
@@ -15,6 +15,7 @@ import {
   FetchInstitutionSearchResults,
   FetchInstitutionSummaryMetrics,
   FetchInstitutionUsers,
+  FetchProjects,
   FetchStorageRegionSearch,
   SendUserMessage,
 } from './institutions-admin.actions';
@@ -29,6 +30,7 @@ import { InstitutionsAdminModel } from './institutions-admin.model';
     storageRegionSearch: { data: [], isLoading: false, error: null },
     searchResults: { data: [], isLoading: false, error: null },
     users: { data: [], totalCount: 0, isLoading: false, error: null },
+    projects: { data: [], totalCount: 0, isLoading: false, error: null, links: undefined },
     sendMessage: { data: null, isLoading: false, error: null },
     selectedInstitutionId: null,
     currentSearchPropertyPath: null,
@@ -146,6 +148,31 @@ export class InstitutionsAdminState {
       );
   }
 
+  @Action(FetchProjects)
+  fetchProjects(ctx: StateContext<InstitutionsAdminModel>, action: FetchProjects) {
+    const state = ctx.getState();
+    ctx.patchState({
+      projects: { ...state.projects, isLoading: true, error: null },
+    });
+
+    return this.institutionsAdminService
+      .fetchProjects(action.institutionId, action.institutionIris, action.pageSize, action.sort, action.cursor)
+      .pipe(
+        tap((response) => {
+          ctx.patchState({
+            projects: {
+              data: response.projects,
+              totalCount: response.totalCount,
+              isLoading: false,
+              error: null,
+              links: response.links,
+            },
+          });
+        }),
+        catchError((error) => handleSectionError(ctx, 'projects', error))
+      );
+  }
+
   @Action(SendUserMessage)
   sendUserMessage(ctx: StateContext<InstitutionsAdminModel>, action: SendUserMessage) {
     const state = ctx.getState();
diff --git a/src/app/shared/models/store/async-state-with-links.model.ts b/src/app/shared/models/store/async-state-with-links.model.ts
new file mode 100644
index 000000000..fcafed41f
--- /dev/null
+++ b/src/app/shared/models/store/async-state-with-links.model.ts
@@ -0,0 +1,10 @@
+import { AsyncStateWithTotalCount } from '@shared/models';
+
+export interface AsyncStateWithLinksModel<T> extends AsyncStateWithTotalCount<T> {
+  links?: {
+    first?: { href: string };
+    next?: { href: string };
+    prev?: { href: string };
+    last?: { href: string };
+  };
+}
diff --git a/src/app/shared/models/store/index.ts b/src/app/shared/models/store/index.ts
index 3b5469b1b..f129cbcc6 100644
--- a/src/app/shared/models/store/index.ts
+++ b/src/app/shared/models/store/index.ts
@@ -1,2 +1,3 @@
 export type { AsyncStateModel } from './async-state.model';
+export type { AsyncStateWithLinksModel } from './async-state-with-links.model';
 export type { AsyncStateWithTotalCount } from './async-state-with-total-count.model';
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 665d04ee1..333cfc5ab 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1810,6 +1810,22 @@
       "sendMessage": "Send message",
       "osfLink": "OSF Link",
       "orcid": "ORCID"
+    },
+    "projects": {
+      "title": "Title",
+      "link": "Link",
+      "dateCreated": "Created Date",
+      "dateModified": "Modified Date",
+      "doi": "DOI",
+      "storageLocation": "Storage Location",
+      "totalDataStored": "Total Data Stored on OSF",
+      "contributorName": "Contributor Name",
+      "views": "Views (last 30 days)",
+      "resourceType": "Resource Type",
+      "license": "License",
+      "addOns": "Add-ons",
+      "funderName": "Funder Name",
+      "totalProjects": "Total Projects"
     }
   }
 }

From 8a4c5592aed52dba9ebcedac0ec174c2795f0adb Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 15 Jul 2025 16:40:05 +0300
Subject: [PATCH 2/4] feat(admin-users): added page

---
 .../components/admin-table/admin-table.component.html     | 2 +-
 .../components/admin-table/admin-table.component.scss     | 6 ------
 .../institutions-summary.component.scss                   | 4 ++++
 .../services/institutions-admin.service.ts                | 8 ++------
 src/assets/styles/overrides/table.scss                    | 6 ++++++
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
index 9edff7cef..90d684a92 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
@@ -73,7 +73,7 @@
   [sortOrder]="currentSortOrder()"
   [customSort]="true"
   [resetPageOnSort]="false"
-  [tableStyle]="{ 'min-width': '50rem' }"
+  class="institution-admin-table"
 >
   <ng-template #header let-columns>
     <tr>
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
index 0e3c9ec7f..ba786a529 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
@@ -19,9 +19,3 @@
   --p-button-padding-y: 0;
   --p-button-icon-only-width: max-content;
 }
-
-.paginator-icon-gray-color {
-  --p-button-text-contrast-color: var(--grey-1);
-
-  color: var(--grey-1);
-}
diff --git a/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss b/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss
index f865d569d..57c5f6aab 100644
--- a/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss
+++ b/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss
@@ -9,6 +9,10 @@
 .width-33 {
   width: calc(33% - 1rem);
 
+  @media (max-width: 992px) {
+    width: calc(50% - 1rem);
+  }
+
   @media (max-width: 576px) {
     width: 100%;
   }
diff --git a/src/app/features/admin-institutions/services/institutions-admin.service.ts b/src/app/features/admin-institutions/services/institutions-admin.service.ts
index 3b5bfb4b8..c4853ef70 100644
--- a/src/app/features/admin-institutions/services/institutions-admin.service.ts
+++ b/src/app/features/admin-institutions/services/institutions-admin.service.ts
@@ -107,14 +107,10 @@ export class InstitutionsAdminService {
 
     const affiliationParam = institutionIris.join(',');
 
-    // TODO: uncomment after demo
     params = {
-      'cardSearchFilter[affiliation][]': `https://ror.org/05d5mza29,https://test.osf.io/institutions/${institutionId}/`,
-      'cardSearchFilter[accessService]': 'https://test.osf.io/',
-
-      // 'cardSearchFilter[affiliation][]': affiliationParam,
+      'cardSearchFilter[affiliation][]': affiliationParam,
       'cardSearchFilter[resourceType]': 'Project',
-      // 'cardSearchFilter[accessService]': environment.webUrl,
+      'cardSearchFilter[accessService]': environment.webUrl,
       'page[cursor]': cursor,
       'page[size]': pageSize.toString(),
       sort,
diff --git a/src/assets/styles/overrides/table.scss b/src/assets/styles/overrides/table.scss
index 2777bf16b..abb7e6a49 100644
--- a/src/assets/styles/overrides/table.scss
+++ b/src/assets/styles/overrides/table.scss
@@ -99,6 +99,12 @@ p-table {
   }
 }
 
+.institution-admin-table {
+  th {
+    min-width: 10rem;
+  }
+}
+
 @media (max-width: var.$breakpoint-xl) {
   .addon-table,
   .my-projects-table {

From 8fd90aa19a2e981784adef33903917a2b17a49fd Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Tue, 15 Jul 2025 19:26:59 +0300
Subject: [PATCH 3/4] feat(admin-users): added fixes by suggestions

---
 .../admin-table/admin-table.component.html    | 30 ++++++++------
 .../admin-table/admin-table.component.scss    |  5 +++
 .../admin-table/admin-table.component.ts      | 41 ++-----------------
 .../constants/admin-table-columns.constant.ts |  6 +--
 .../project-table-columns.constant.ts         |  4 +-
 .../admin-institutions/models/table.model.ts  |  2 +-
 .../institutions-projects.component.html      |  2 +-
 .../institutions-projects.component.ts        | 34 ++-------------
 .../institutions-summary.component.scss       |  8 ++--
 .../services/institutions-admin.service.ts    |  3 +-
 .../store/institutions-admin.selectors.ts     | 13 ++----
 src/app/shared/models/index.ts                |  1 +
 .../shared/models/pagination-links.model.ts   |  9 ++++
 .../store/async-state-with-links.model.ts     |  9 +---
 14 files changed, 58 insertions(+), 109 deletions(-)
 create mode 100644 src/app/shared/models/pagination-links.model.ts

diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
index 90d684a92..6abc01f10 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
@@ -42,7 +42,8 @@
       @if (downloadLink()) {
         <p-button
           icon="fa fa-download text-primary text-xl"
-          class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
+          outlined
+          class="download-button"
           severity="info"
           (click)="downloadMenu.toggle($event)"
         />
@@ -52,10 +53,10 @@
         <a
           pButton
           [href]="reportsLink()"
-          class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
+          class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding no-underline"
           target="_blank"
         >
-          <i class="fa fa-chart-pie text-primary border-1 border-transparent text-xl"></i>
+          <i class="fa fa-chart-pie border-1 border-transparent text-xl"></i>
         </a>
       }
     </div>
@@ -101,10 +102,18 @@
                 [target]="getLinkTarget(rowData[col.field], col)"
                 class="text-primary no-underline hover:underline"
               >
-                {{ getCellValueWithFormatting(rowData[col.field], col) }}
+                @if (col.dateFormat) {
+                  {{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
+                } @else {
+                  {{ getCellValue(rowData[col.field]) }}
+                }
               </a>
             } @else {
-              {{ getCellValueWithFormatting(rowData[col.field], col) }}
+              @if (col.dateFormat) {
+                {{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
+              } @else {
+                {{ getCellValue(rowData[col.field]) }}
+              }
             }
 
             @if (col.showIcon) {
@@ -127,16 +136,11 @@
 @if (isNextPreviousPagination()) {
   <div class="flex column-gap-2 w-full justify-content-center pt-2">
     @if (firstLink() && prevLink()) {
-      <p-button
-        icon="fas fa-angles-left paginator-icon-gray-color"
-        severity="contrast"
-        text
-        (click)="switchPage(firstLink())"
-      ></p-button>
+      <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(firstLink())"></p-button>
     }
 
     <p-button
-      icon="fas fa-angle-left paginator-icon-gray-color"
+      icon="fas fa-angle-left"
       severity="contrast"
       text
       [disabled]="!prevLink()"
@@ -145,7 +149,7 @@
     </p-button>
 
     <p-button
-      icon="fas fa-angle-right paginator-icon-gray-color"
+      icon="fas fa-angle-right"
       severity="contrast"
       text
       [disabled]="!nextLink()"
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
index ba786a529..d67ddd636 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
@@ -15,6 +15,11 @@
   }
 }
 
+.download-button {
+  --p-button-outlined-color: var(--grey-2);
+  --p-button-padding-y: 0.625rem;
+}
+
 .child-button-0-padding {
   --p-button-padding-y: 0;
   --p-button-icon-only-width: max-content;
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts b/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts
index c9a0002f3..90856d99a 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.ts
@@ -8,6 +8,7 @@ import { PaginatorState } from 'primeng/paginator';
 import { TableModule } from 'primeng/table';
 import { Tooltip } from 'primeng/tooltip';
 
+import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect, inject, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
@@ -35,6 +36,7 @@ import { QueryParams } from '@shared/models';
     Button,
     Menu,
     StopPropagationDirective,
+    DatePipe,
   ],
   templateUrl: './admin-table.component.html',
   styleUrl: './admin-table.component.scss',
@@ -42,6 +44,7 @@ import { QueryParams } from '@shared/models';
 })
 export class AdminTableComponent {
   private readonly translateService = inject(TranslateService);
+
   private userInitiatedSort = false;
 
   tableColumns = input.required<TableColumn[]>();
@@ -173,48 +176,10 @@ export class AdminTableComponent {
     return this.translateService.instant(String(value)) || '';
   }
 
-  getCellValueWithFormatting(value: string | number | TableCellLink | undefined, column: TableColumn): string {
-    if (this.isLink(value)) {
-      return this.translateService.instant(value.text);
-    }
-
-    const stringValue = String(value);
-
-    if (column.dateFormat && stringValue) {
-      return this.formatDate(stringValue, column.dateFormat);
-    }
-
-    return this.translateService.instant(stringValue) || '';
-  }
-
   switchPage(link: string) {
     this.linkPageChanged.emit(link);
   }
 
-  private formatDate(value: string, format: string): string {
-    if (format === 'yyyy-mm-to-mm/yyyy') {
-      const yearMonthRegex = /^(\d{4})-(\d{2})$/;
-      const match = value.match(yearMonthRegex);
-
-      if (match) {
-        const [, year, month] = match;
-        return `${month}/${year}`;
-      }
-    }
-
-    if (format === 'yyyy-mm-dd-to-dd/mm/yyyy') {
-      const yearMonthDayRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
-      const match = value.match(yearMonthDayRegex);
-
-      if (match) {
-        const [, year, month, day] = match;
-        return `${day}/${month}/${year}`;
-      }
-    }
-
-    return value;
-  }
-
   private createUrl(baseUrl: string, mediaType: string): string {
     return `${baseUrl}&acceptMediatype=${encodeURIComponent(mediaType)}`;
   }
diff --git a/src/app/features/admin-institutions/constants/admin-table-columns.constant.ts b/src/app/features/admin-institutions/constants/admin-table-columns.constant.ts
index 9eea223d4..12e0d68b8 100644
--- a/src/app/features/admin-institutions/constants/admin-table-columns.constant.ts
+++ b/src/app/features/admin-institutions/constants/admin-table-columns.constant.ts
@@ -21,19 +21,19 @@ export const userTableColumns: TableColumn[] = [
     field: 'monthLastLogin',
     header: 'adminInstitutions.institutionUsers.lastLogin',
     sortable: true,
-    dateFormat: 'yyyy-mm-to-mm/yyyy',
+    dateFormat: 'MM/yyyy',
   },
   {
     field: 'monthLastActive',
     header: 'adminInstitutions.institutionUsers.lastActive',
     sortable: true,
-    dateFormat: 'yyyy-mm-to-mm/yyyy',
+    dateFormat: 'MM/yyyy',
   },
   {
     field: 'accountCreationDate',
     header: 'adminInstitutions.institutionUsers.accountCreated',
     sortable: true,
-    dateFormat: 'yyyy-mm-to-mm/yyyy',
+    dateFormat: 'MM/yyyy',
   },
   { field: 'publicRegistrationCount', header: 'adminInstitutions.summary.publicRegistrations', sortable: true },
   { field: 'embargoedRegistrationCount', header: 'adminInstitutions.summary.embargoedRegistrations', sortable: true },
diff --git a/src/app/features/admin-institutions/constants/project-table-columns.constant.ts b/src/app/features/admin-institutions/constants/project-table-columns.constant.ts
index 951cc1c4b..51628fe50 100644
--- a/src/app/features/admin-institutions/constants/project-table-columns.constant.ts
+++ b/src/app/features/admin-institutions/constants/project-table-columns.constant.ts
@@ -19,13 +19,13 @@ export const projectTableColumns: TableColumn[] = [
     field: 'dateCreated',
     header: 'adminInstitutions.projects.dateCreated',
     sortable: true,
-    dateFormat: 'yyyy-mm-dd-to-dd/mm/yyyy',
+    dateFormat: 'dd/MM/yyyy',
   },
   {
     field: 'dateModified',
     header: 'adminInstitutions.projects.dateModified',
     sortable: true,
-    dateFormat: 'yyyy-mm-dd-to-dd/mm/yyyy',
+    dateFormat: 'dd/MM/yyyy',
   },
   {
     field: 'doi',
diff --git a/src/app/features/admin-institutions/models/table.model.ts b/src/app/features/admin-institutions/models/table.model.ts
index 66922b336..787796466 100644
--- a/src/app/features/admin-institutions/models/table.model.ts
+++ b/src/app/features/admin-institutions/models/table.model.ts
@@ -8,7 +8,7 @@ export interface TableColumn {
   iconClass?: string;
   iconTooltip?: string;
   iconAction?: string;
-  dateFormat?: 'yyyy-mm-to-mm/yyyy' | 'yyyy-mm-dd-to-dd/mm/yyyy' | 'default';
+  dateFormat?: 'MM/yyyy' | 'dd/MM/yyyy' | 'shortDate' | 'mediumDate' | 'longDate' | 'fullDate' | string;
 }
 
 export interface TableCellLink {
diff --git a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html
index 82fd7d9d7..7924855a6 100644
--- a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html
+++ b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html
@@ -16,6 +16,6 @@
   [reportsLink]="reportsLink"
 >
   <div slot="amount" class="flex items-center">
-    <h3 class="title">{{ amountText() }}</h3>
+    <h3 class="title">{{ totalCount() }} {{ 'adminInstitutions.projects.totalProjects' | translate }}</h3>
   </div>
 </osf-admin-table>
diff --git a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts
index e9a26fda3..ba83d069d 100644
--- a/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts
+++ b/src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts
@@ -1,17 +1,8 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslateService } from '@ngx-translate/core';
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  effect,
-  inject,
-  signal,
-  untracked,
-} from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component, computed, effect, inject, signal, untracked } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 
@@ -32,7 +23,7 @@ import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'osf-institutions-projects',
-  imports: [AdminTableComponent],
+  imports: [AdminTableComponent, TranslatePipe],
   templateUrl: './institutions-projects.component.html',
   styleUrl: './institutions-projects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,8 +31,6 @@ import { environment } from 'src/environments/environment';
 export class InstitutionsProjectsComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
-  private readonly translate = inject(TranslateService);
-  private readonly destroyRef = inject(DestroyRef);
 
   private readonly actions = createDispatchMap({
     fetchProjects: FetchProjects,
@@ -58,9 +47,6 @@ export class InstitutionsProjectsComponent {
   sortField = signal<string>('-dateModified');
   sortOrder = signal<number>(1);
 
-  private lastFetchKey = '';
-  private lastQueryParams = signal<InstitutionProjectsQueryParamsModel | null>(null);
-
   tableColumns = projectTableColumns;
 
   projects = select(InstitutionsAdminSelectors.getProjects);
@@ -73,11 +59,6 @@ export class InstitutionsProjectsComponent {
     return this.projects().map((project: InstitutionProject): TableCellData => mapProjectToTableCellData(project));
   });
 
-  amountText = computed(() => {
-    const count = this.totalCount();
-    return count + ' ' + this.translate.instant('adminInstitutions.projects.totalProjects').toLowerCase();
-  });
-
   downloadUrl = computed(() => {
     const baseUrl = `${environment.shareDomainUrl}/index-card-search`;
     const institution = this.institution() as Institution;
@@ -128,7 +109,6 @@ export class InstitutionsProjectsComponent {
     effect(() => {
       const institutionId = this.route.parent?.snapshot.params['institution-id'];
       const rawQueryParams = this.queryParams();
-      console.log(rawQueryParams);
       if (!rawQueryParams && !institutionId) return;
 
       this.institutionId = institutionId;
@@ -142,15 +122,9 @@ export class InstitutionsProjectsComponent {
       const cursor = parsedQueryParams.cursor;
       const size = parsedQueryParams.size;
 
-      // Get institution IRIs for affiliation filter
       const institution = this.institution() as Institution;
       const institutionIris = institution.iris || [];
 
-      // const key = `${size}|${sortParam}|${cursor}`;
-      // if (key === this.lastFetchKey) return;
-      //
-      // this.lastFetchKey = key;
-
       this.actions.fetchProjects(this.institutionId, institutionIris, size, sortParam, cursor);
     });
   }
diff --git a/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss b/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss
index 57c5f6aab..f39417f43 100644
--- a/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss
+++ b/src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss
@@ -1,7 +1,9 @@
+@use "assets/styles/variables" as var;
+
 .width-25 {
   width: calc(25% - 1.5rem);
 
-  @media (max-width: 576px) {
+  @media (max-width: var.$breakpoint-sm) {
     width: calc(50% - 0.5rem);
   }
 }
@@ -9,11 +11,11 @@
 .width-33 {
   width: calc(33% - 1rem);
 
-  @media (max-width: 992px) {
+  @media (max-width: var.$breakpoint-lg) {
     width: calc(50% - 1rem);
   }
 
-  @media (max-width: 576px) {
+  @media (max-width: var.$breakpoint-sm) {
     width: 100%;
   }
 }
diff --git a/src/app/features/admin-institutions/services/institutions-admin.service.ts b/src/app/features/admin-institutions/services/institutions-admin.service.ts
index c4853ef70..9dd5eedb2 100644
--- a/src/app/features/admin-institutions/services/institutions-admin.service.ts
+++ b/src/app/features/admin-institutions/services/institutions-admin.service.ts
@@ -5,6 +5,7 @@ import { inject, Injectable } from '@angular/core';
 
 import { JsonApiService } from '@core/services';
 import { departmens, summaryMetrics, users } from '@osf/features/admin-institutions/services/mock';
+import { PaginationLinksModel } from '@shared/models';
 
 import {
   mapIndexCardResults,
@@ -100,7 +101,7 @@ export class InstitutionsAdminService {
   ): Observable<{
     projects: InstitutionProject[];
     totalCount: number;
-    links?: { first?: { href: string }; next?: { href: string }; prev?: { href: string }; last?: { href: string } };
+    links?: PaginationLinksModel;
   }> {
     const url = `${environment.shareDomainUrl}/index-card-search`;
     let params: Record<string, string> = {};
diff --git a/src/app/features/admin-institutions/store/institutions-admin.selectors.ts b/src/app/features/admin-institutions/store/institutions-admin.selectors.ts
index 6b46fccf2..91959090f 100644
--- a/src/app/features/admin-institutions/store/institutions-admin.selectors.ts
+++ b/src/app/features/admin-institutions/store/institutions-admin.selectors.ts
@@ -1,5 +1,7 @@
 import { Selector } from '@ngxs/store';
 
+import { PaginationLinksModel } from '@shared/models';
+
 import {
   InstitutionDepartment,
   InstitutionProject,
@@ -128,22 +130,13 @@ export class InstitutionsAdminSelectors {
     return state.projects.isLoading;
   }
 
-  @Selector([InstitutionsAdminState])
-  static getProjectsError(state: InstitutionsAdminModel): string | null {
-    return state.projects.error;
-  }
-
   @Selector([InstitutionsAdminState])
   static getProjectsTotalCount(state: InstitutionsAdminModel): number {
     return state.projects.totalCount;
   }
 
   @Selector([InstitutionsAdminState])
-  static getProjectsLinks(
-    state: InstitutionsAdminModel
-  ):
-    | { first?: { href: string }; next?: { href: string }; prev?: { href: string }; last?: { href: string } }
-    | undefined {
+  static getProjectsLinks(state: InstitutionsAdminModel): PaginationLinksModel | undefined {
     return state.projects.links;
   }
 
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index 9e24c8269..3b9d4951c 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -23,6 +23,7 @@ export * from './metadata-field.model';
 export * from './nodes/create-project-form.model';
 export * from './nodes/nodes-json-api.model';
 export * from './paginated-data.model';
+export * from './pagination-links.model';
 export * from './project-metadata-update-payload.model';
 export * from './query-params.model';
 export * from './registration';
diff --git a/src/app/shared/models/pagination-links.model.ts b/src/app/shared/models/pagination-links.model.ts
new file mode 100644
index 000000000..055dc3918
--- /dev/null
+++ b/src/app/shared/models/pagination-links.model.ts
@@ -0,0 +1,9 @@
+export interface PaginationLinksModel {
+  first?: LinkModel;
+  next?: LinkModel;
+  prev?: LinkModel;
+}
+
+export interface LinkModel {
+  href: string;
+}
diff --git a/src/app/shared/models/store/async-state-with-links.model.ts b/src/app/shared/models/store/async-state-with-links.model.ts
index fcafed41f..a741fa71e 100644
--- a/src/app/shared/models/store/async-state-with-links.model.ts
+++ b/src/app/shared/models/store/async-state-with-links.model.ts
@@ -1,10 +1,5 @@
-import { AsyncStateWithTotalCount } from '@shared/models';
+import { AsyncStateWithTotalCount, PaginationLinksModel } from '@shared/models';
 
 export interface AsyncStateWithLinksModel<T> extends AsyncStateWithTotalCount<T> {
-  links?: {
-    first?: { href: string };
-    next?: { href: string };
-    prev?: { href: string };
-    last?: { href: string };
-  };
+  links?: PaginationLinksModel;
 }

From 4a2e8fbc414b9c60c35bd14f28caf4048db55972 Mon Sep 17 00:00:00 2001
From: volodyayakubovskyy <vyakubovskyy477@gmail.com>
Date: Wed, 16 Jul 2025 12:00:09 +0300
Subject: [PATCH 4/4] feat(admin-users): added inst registrations page

---
 .../components/admin-table/admin-table.component.html         | 4 ++--
 .../components/admin-table/admin-table.component.scss         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
index 6abc01f10..e10abf816 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.html
@@ -43,7 +43,7 @@
         <p-button
           icon="fa fa-download text-primary text-xl"
           outlined
-          class="download-button"
+          class="grey-border-color download-button"
           severity="info"
           (click)="downloadMenu.toggle($event)"
         />
@@ -56,7 +56,7 @@
           class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding no-underline"
           target="_blank"
         >
-          <i class="fa fa-chart-pie border-1 border-transparent text-xl"></i>
+          <i class="fa fa-chart-pie text-xl"></i>
         </a>
       }
     </div>
diff --git a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
index d67ddd636..5b95ea1f7 100644
--- a/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
+++ b/src/app/features/admin-institutions/components/admin-table/admin-table.component.scss
@@ -1,5 +1,5 @@
 .p-06 {
-  padding: 0.6rem;
+  padding: 0.625rem;
 }
 
 .hover-group {
@@ -16,7 +16,7 @@
 }
 
 .download-button {
-  --p-button-outlined-color: var(--grey-2);
+  --p-button-outlined-info-border-color: var(--grey-2);
   --p-button-padding-y: 0.625rem;
 }