zitadel/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html

<app-meta-layout>
    <div class="max-width-container">
        <div class="head" *ngIf="project?.id">
            <a [routerLink]="[ '/granted-projects' ]" mat-icon-button>
                <mat-icon class="icon">arrow_back</mat-icon>
            </a>
            <h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>

            <div class="full-width">
                <p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
                <p *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
            </div>
        </div>

        <ng-template appHasRole [appHasRole]="['project.grant.user.grant.read']">
            <app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
                description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
                <app-user-grants [context]="userGrantContext" [projectId]="projectId" [grantId]="grantId"
                    [displayedColumns]="['select', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
                    [allowCreate]="['project.grant.user.grant.write'] | hasRole | async"
                    [allowDelete]="['project.grant.user.grant.delete'] | hasRole | async">
                </app-user-grants>
            </app-card>
        </ng-template>
    </div>
    <div class="side" metainfo>
        <div class="details">
            <div class="row">
                <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                <span *ngIf="project && project.state !== undefined"
                    class="second">{{'PROJECT.STATE.'+project.state | translate}}</span>
            </div>
        </div>

        <mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
            <mat-tab label="Details">
                <app-contributors [totalResult]="totalMemberResult" [membersSubject]="membersSubject"
                    title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
                    description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"
                    (showDetailClicked)="showDetail()" [disabled]="false">
                </app-contributors>
            </mat-tab>
            <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
                <app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.id"></app-changes>
            </mat-tab>
        </mat-tab-group>
    </div>
</app-meta-layout>