gcp-material-ui 0.0.4

package/src/app/auth/auth.service.ts

@@ -0,0 +1,50 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+
+export interface User {
+  name: string;
+  picture: string;
+  email: string;
+  id: string;
+  [key: string]: any;
+}
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private http = inject(HttpClient);
+  private router = inject(Router);
+
+  user = signal<User | null>({
+    name: 'John Doe',
+    picture: '',
+    email: 'john.doe@example.com',
+    id: '12345'
+  });
+  accessToken = signal<string | null>('mock-token-12345');
+
+  private initPromise: Promise<void>;
+
+  constructor() {
+    this.initPromise = Promise.resolve();
+  }
+
+  isReady(): Promise<void> {
+    return this.initPromise;
+  }
+
+  login() {
+    // No-op in mock setup
+  }
+
+  logout() {
+    // No-op in mock setup
+  }
+
+  isAuthenticated(): boolean {
+    return true;
+  }
+}

package/src/app/components/page/page.html

@@ -0,0 +1,20 @@
+<div class="page-container">
+  <mat-toolbar class="page-header">
+    <div class="back-section">
+      <ng-content select="[back-button]"></ng-content>
+    </div>
+    <div class="title-section">
+      <span class="page-title">{{ title }}</span>
+    </div>
+    <div class="left-actions-section">
+      <ng-content select="[left-actions]"></ng-content>
+    </div>
+    <span class="toolbar-spacer"></span>
+    <div class="actions-section">
+      <ng-content select="[actions]"></ng-content>
+    </div>
+  </mat-toolbar>
+  <div class="page-content">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/app/components/page/page.scss

@@ -0,0 +1,41 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.page-header {
+  padding: 0 24px;
+  background-color: transparent;
+  display: flex !important;
+  align-items: center;
+}
+
+.back-section {
+  display: flex;
+  margin-right: 8px;
+  align-items: center;
+}
+
+.left-actions-section {
+  display: flex;
+  margin-left: 16px;
+  gap: 8px;
+  align-items: center;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.actions-section {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.page-content {
+  flex: 1;
+  overflow: auto;
+}

package/src/app/components/page/page.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'app-page',
+  standalone: true,
+  imports: [CommonModule, MatDividerModule, MatToolbarModule],
+  templateUrl: './page.html',
+  styleUrls: ['./page.scss']
+})
+export class PageComponent {
+  @Input() title: string = '';
+}

package/src/app/dashboard/dashboard.html

@@ -0,0 +1,287 @@
+<app-page title="Workspace Overview">
+  <div class="dashboard-container">
+    <div class="info-grid">
+      <mat-card class="dashboard-card info-card">
+        <mat-card-header>
+          <mat-icon mat-card-avatar class="info-icon">folder</mat-icon>
+          <mat-card-title>Page Templates</mat-card-title>
+          <mat-card-subtitle>Located in standard templates directory</mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+          <p>Pre-built page layouts and complex UI patterns are located in:</p>
+          <code class="path-block">src/app/page-templates/</code>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card class="dashboard-card info-card">
+        <mat-card-header>
+          <mat-icon mat-card-avatar class="info-icon">widgets</mat-icon>
+          <mat-card-title>Components</mat-card-title>
+          <mat-card-subtitle>Reusable UI building blocks</mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+          <p>Standard UI elements like forms, tables, and buttons are located in:</p>
+          <code class="path-block">src/app/demo-components/</code>
+        </mat-card-content>
+      </mat-card>
+
+      <mat-card class="dashboard-card info-card">
+        <mat-card-header>
+          <mat-icon mat-card-avatar class="info-icon">smart_toy</mat-icon>
+          <mat-card-title>LLM Context</mat-card-title>
+          <mat-card-subtitle>Repository agent guidelines</mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+          <p>Knowledge graph and automated agent context is located in the root:</p>
+          <code class="path-block">.agents/</code>
+        </mat-card-content>
+      </mat-card>
+    </div>
+
+    <mat-card class="dashboard-card welcome-card">
+      <mat-card-header>
+        <mat-icon mat-card-avatar class="info-icon">rocket_launch</mat-icon>
+        <mat-card-title>Quick Start: How to Create your own Prototype</mat-card-title>
+        <mat-card-subtitle>Bootstrap your own application</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="stepper-container">
+          <div class="stepper-item active" (click)="scrollToSection('prerequisites')">
+            <div class="stepper-circle">1</div>
+            <div class="stepper-label">Prerequisites</div>
+          </div>
+          <div class="stepper-line"></div>
+          <div class="stepper-item" (click)="scrollToSection('git-config')">
+            <div class="stepper-circle">2</div>
+            <div class="stepper-label">Git & Clone</div>
+          </div>
+          <div class="stepper-line"></div>
+          <div class="stepper-item" (click)="scrollToSection('view-components')">
+            <div class="stepper-circle">3</div>
+            <div class="stepper-label">Components</div>
+          </div>
+          <div class="stepper-line"></div>
+          <div class="stepper-item" (click)="scrollToSection('create-project')">
+            <div class="stepper-circle">4</div>
+            <div class="stepper-label">Create Project</div>
+          </div>
+          <div class="stepper-line"></div>
+          <div class="stepper-item" (click)="scrollToSection('login')">
+            <div class="stepper-circle">5</div>
+            <div class="stepper-label">Log In</div>
+          </div>
+          <div class="stepper-line"></div>
+          <div class="stepper-item" (click)="scrollToSection('deployment')">
+            <div class="stepper-circle">6</div>
+            <div class="stepper-label">Deployment</div>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Workspace Setup & Onboarding Guide -->
+    <div id="prerequisites" class="section-container">
+      <h3 class="cm-t-title-medium section-title">1. Prerequisites</h3>
+      <div class="steps-grid">
+        <div class="inner-step-card">
+          <div class="card-header">
+            <h4>1. Request access (if missing)</h4>
+          </div>
+          <p>
+            You need to be part of the <strong>%cn-fe-prototyping.prod</strong> group - most likely
+            you are already added so you can skip this step unless you cannot watch fetch a
+            repository.
+          </p>
+          <div class="card-actions">
+            <a
+              mat-button
+              color="primary"
+              href="https://ganpati2.corp.google.com/group/cn-fe-prototyping.prod?sequence=884603875"
+              target="_blank"
+              class="badge-button"
+            >
+              <mat-icon>group</mat-icon> %cn-fe-prototyping.prod
+            </a>
+          </div>
+        </div>
+
+        <div class="inner-step-card">
+          <div class="card-header">
+            <h4>2. Get JetSki</h4>
+          </div>
+          <p>Download JetSki from the software center.</p>
+          <div class="card-actions">
+            <a
+              mat-button
+              color="primary"
+              href="https://mytech.corp.google.com/software/tm-Jetski#installs"
+              target="_blank"
+              class="badge-button"
+            >
+              <mat-icon>install_desktop</mat-icon> Download JetSki Install
+            </a>
+          </div>
+        </div>
+
+        <div class="inner-step-card">
+          <div class="card-header">
+            <h4>3. Get Python</h4>
+          </div>
+          <p>
+            Python is required for gCloud (Cloud SDK). Download the macOS installer for
+            <strong>Python 3.13.12</strong>.
+          </p>
+          <div class="card-actions">
+            <a
+              mat-button
+              color="primary"
+              href="https://www.python.org/downloads/macos/"
+              target="_blank"
+              class="badge-button"
+            >
+              <mat-icon>download</mat-icon> Python 3.13.12
+            </a>
+          </div>
+        </div>
+
+        <div class="inner-step-card">
+          <div class="card-header">
+            <h4>4. Install Dependencies</h4>
+          </div>
+          <p>Follow the instructions from the official guide to install dependencies.</p>
+          <div class="card-actions">
+            <a
+              mat-button
+              color="primary"
+              href="https://docs.cloud.google.com/sdk/docs/install-sdk"
+              target="_blank"
+              class="badge-button"
+            >
+              <mat-icon>cloud_download</mat-icon> Install SDK Guide
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <mat-card id="git-config" class="dashboard-card git-card" style="margin-top: 24px">
+      <mat-card-header>
+        <mat-icon mat-card-avatar class="info-icon">code</mat-icon>
+        <mat-card-title>Git Configuration & Clonation</mat-card-title>
+        <mat-card-subtitle>Configure Git user info and clone repository</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px">
+        <p>Remember to configure git with your LDAP and email:</p>
+        <pre class="path-block"><code>git config --global user.name "ldap"
+git config --global user.email "ldap@google.com"
+git config --global pull.rebase true</code></pre>
+
+        <h4 class="cm-t-title-small" style="margin-top: 16px">Clone repository</h4>
+        <pre class="path-block"><code>git clone "sso://cn-fe-ai-internal/prototypes"</code></pre>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card id="view-components" class="dashboard-card components-card" style="margin-top: 24px">
+      <mat-card-header>
+        <mat-icon mat-card-avatar class="info-icon">visibility</mat-icon>
+        <mat-card-title>View Available Components</mat-card-title>
+        <mat-card-subtitle>Explore shared UI elements and page templates</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px">
+        <p>Navigate to the components project and run the application:</p>
+        <pre class="path-block"><code>cd components
+npm install
+npm run start</code></pre>
+        <p>
+          Go to <a href="http://localhost:4200" target="_blank">http://localhost:4200</a> to view
+          the workspace.
+        </p>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card id="create-project" class="dashboard-card project-card" style="margin-top: 24px">
+      <mat-card-header>
+        <mat-icon mat-card-avatar class="info-icon">add_circle</mat-icon>
+        <mat-card-title>Create & Run Your Project</mat-card-title>
+        <mat-card-subtitle>Bootstrap your own application</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px">
+        <p>Generate a new Angular project from the repository root:</p>
+        <pre class="path-block"><code>./create-project.sh</code></pre>
+
+        <h4 class="cm-t-title-small" style="margin-top: 16px">Run Your Application</h4>
+        <p>Navigate to your newly created project folder and run:</p>
+        <pre class="path-block"><code>cd [your-project-name]
+npm run start</code></pre>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card id="login" class="dashboard-card login-card" style="margin-top: 24px">
+      <mat-card-header>
+        <mat-icon mat-card-avatar class="info-icon">login</mat-icon>
+        <mat-card-title>How to Log In</mat-card-title>
+        <mat-card-subtitle>Step-by-step authentication process</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px">
+        <p>Watch this video guide for a visual walkthrough:</p>
+        <a
+          mat-button
+          color="primary"
+          href="https://drive.google.com/corp/drive/u/0/folders/11luQgQO-PccXn1tcy9Ftv54PKAaIcz6X"
+          target="_blank"
+        >
+          <mat-icon>videocam</mat-icon> ai-poc Video Guide
+        </a>
+
+        <ol style="margin-top: 16px; font-size: 14px; line-height: 1.6">
+          <li>Open Chrome in incognito mode.</li>
+          <li>
+            Open your app (usually
+            <a href="http://localhost:4200" target="_blank">http://localhost:4200</a>).
+          </li>
+          <li>Click <strong>Sign in with the Test Account</strong> button.</li>
+          <li>Input <code>pantheon.networking.demo@gmail.com</code> as user.</li>
+          <li>Input your company LDAP email.</li>
+          <li>Verify login.</li>
+          <li>Accept permissions.</li>
+          <li>Done.</li>
+        </ol>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card id="deployment" class="dashboard-card deploy-card" style="margin-top: 24px">
+      <mat-card-header>
+        <mat-icon mat-card-avatar class="info-icon">cloud_upload</mat-icon>
+        <mat-card-title>Deployment & OAuth Setup</mat-card-title>
+        <mat-card-subtitle>Ship your application to Cloud Run</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content style="padding: 16px">
+        <p>Deploy your application using standard script:</p>
+        <pre class="path-block"><code>./deploy.sh</code></pre>
+
+        <h4 class="cm-t-title-small" style="margin-top: 16px">Allowlist Application for OAuth</h4>
+        <p>First, get your application URL from Cloud Run console:</p>
+        <a
+          mat-button
+          color="primary"
+          href="https://pantheon.corp.google.com/run/services?project=cn-fe-ai-apps"
+          target="_blank"
+        >
+          <mat-icon>open_in_new</mat-icon> View Cloud Run Services
+        </a>
+
+        <p style="margin-top: 16px">
+          Add your production URL to BOTH allowed origins and redirect URIs in OAuth configuration:
+        </p>
+        <a
+          mat-button
+          color="primary"
+          href="https://pantheon.corp.google.com/auth/clients/639401146900-33blrbvq8l7g6e8cgqiorrdp1qvn3as2.apps.googleusercontent.com?project=cn-fe-ai-apps"
+          target="_blank"
+        >
+          <mat-icon>settings</mat-icon> OAuth Clients Config
+        </a>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</app-page>

package/src/app/dashboard/dashboard.scss

@@ -0,0 +1,196 @@
+.dashboard-container {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  font-family: 'Inter', sans-serif;
+}
+
+.dashboard-card {
+  border-radius: 12px;
+  background: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e8eaed;
+}
+
+.welcome-card {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e8f0fe 100%);
+  border: none;
+}
+
+// ... existing code ...
+
+/* Custom Stepper */
+.stepper-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  overflow-x: auto;
+}
+
+.stepper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  flex: 1;
+  min-width: 120px;
+  position: relative;
+
+  &.active {
+    .stepper-circle {
+      background: #1a73e8;
+      color: white;
+      border-color: #1a73e8;
+    }
+    .stepper-label {
+      color: #1a73e8;
+      font-weight: 500;
+    }
+  }
+}
+
+.stepper-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid #dadce0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  color: #5f6368;
+  background: white;
+  margin-bottom: 8px;
+  z-index: 2;
+}
+
+.stepper-label {
+  font-size: 13px;
+  color: #3c4043;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+.stepper-line {
+  flex: 1;
+  height: 1px;
+  background: #dadce0;
+  margin-bottom: 24px; // Align with circle center (approx)
+  z-index: 1;
+}
+
+/* Grid Layout */
+.section-container {
+  margin-top: 24px;
+}
+
+.section-title {
+  margin-bottom: 16px;
+  color: #202124;
+}
+
+.steps-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 24px;
+}
+
+.inner-step-card {
+  background: white;
+  border: 1px solid #e8eaed;
+  border-radius: 12px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #202124;
+  }
+
+  p {
+    font-size: 14px;
+    color: #5f6368;
+    margin-top: 12px;
+    margin-bottom: 24px;
+    flex-grow: 1;
+    line-height: 1.5;
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
+.card-actions {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.badge-button {
+  background: #e8f0fe !important;
+  color: #1a73e8 !important;
+  border-radius: 20px !important;
+  font-size: 13px !important;
+  height: 36px !important;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+  padding: 30px;
+}
+
+.info-card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.info-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.info-icon {
+  background: #e8f0fe;
+  color: #0c67df;
+  border-radius: 50%;
+  padding: 8px;
+}
+
+.path-block {
+  display: block;
+  background: #f1f3f4;
+  padding: 12px;
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 13px;
+  color: #202124;
+  margin-top: 12px;
+  border: 1px solid #dadce0;
+}

package/src/app/dashboard/dashboard.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { PageComponent } from '../components/page/page';
+import { MatChipsModule } from '@angular/material/chips';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  imports: [CommonModule, MatCardModule, MatIconModule, MatButtonModule, MatDividerModule, PageComponent, MatChipsModule],
+  templateUrl: './dashboard.html',
+  styleUrl: './dashboard.scss'
+})
+export class DashboardComponent {
+  scrollToSection(id: string) {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+}