Add PrimeNG

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

src/app/app.component.html

@@ -1,3 +1,2 @@
-<h1 class="text-navy text-3xl font-bold underline">Hello world!</h1>
-
+<app-header />
 <router-outlet />

src/app/app.component.spec.ts

@@ -19,6 +19,6 @@ describe('AppComponent', () => {
   it(`should have the right title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('component-library-demo');
+    expect(app.title).toEqual('121 Portal | Component Library Demo');
   });
 });

src/app/app.component.ts

@@ -1,14 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './components/header/header.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HeaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  title = 'component-library-demo';
+  title = '121 Portal | Component Library Demo';
 }

src/app/app.config.ts

@@ -3,12 +3,14 @@ import {
   provideExperimentalZonelessChangeDetection,
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideExperimentalZonelessChangeDetection(),
+    provideAnimations(),
   ],
 };

src/app/components/header/header.component.html

@@ -0,0 +1,38 @@
+<p-toolbar styleClass="bg-navy border-none rounded-none">
+  <ng-template pTemplate="start">
+    <p-button
+      icon="pi pi-bars"
+      rounded
+      severity="contrast"
+      class="mr-2 text-white"
+      (click)="sidebarVisible = true"
+    />
+    <h1 class="text-white">121 Portal</h1>
+  </ng-template>
+  <ng-template pTemplate="end">
+    <div class="align-items-center flex gap-2">
+      <p-button
+        icon="pi pi-search"
+        rounded
+        severity="contrast"
+        class="mr-1 text-white"
+      />
+      <p-button
+        icon="pi pi-bell"
+        rounded
+        severity="contrast"
+        class="mr-1 text-white"
+      />
+      <p-button
+        icon="pi pi-user"
+        rounded
+        severity="contrast"
+        class="text-white"
+      />
+    </div>
+  </ng-template>
+</p-toolbar>
+<p-sidebar [(visible)]="sidebarVisible">
+  <h3>Sidebar</h3>
+  <p>Lorem ipsum dolor sit amet...</p>
+</p-sidebar>

src/app/components/header/header.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeaderComponent],
+      providers: [provideExperimentalZonelessChangeDetection()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/header/header.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { ToolbarModule } from 'primeng/toolbar';
+import { SidebarModule } from 'primeng/sidebar';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [ButtonModule, ToolbarModule, SidebarModule],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderComponent {
+  sidebarVisible = false;
+}

src/app/pages/homepage/homepage.component.html

@@ -1 +1,43 @@
-<p>homepage works!</p>
+<div class="w-full bg-white">
+  <div class="container mx-auto pt-2">
+    <p-tabMenu [model]="navMenuItems" />
+  </div>
+</div>
+<div class="w-full">
+  <div class="container mx-auto py-4">
+    <div class="flex items-stretch">
+      <p-selectButton
+        [options]="paymentStatuses"
+        [(ngModel)]="selectedPaymentStatus"
+        optionLabel="label"
+        optionValue="value"
+      />
+
+      <div class="ml-auto flex gap-2">
+        <p-splitButton
+          label="Download"
+          [model]="downloadOptions"
+          rounded
+          [buttonDisabled]="true"
+          severity="secondary"
+        />
+        <p-button rounded severity="primary" label="Create new payment" />
+        <p-splitButton [model]="downloadOptions" rounded severity="secondary" />
+      </div>
+    </div>
+
+    <div class="mt-4 flex w-full flex-row gap-4">
+      <p-iconField iconPosition="left" class="w-1/2 [&_input]:w-full">
+        <p-inputIcon styleClass="pi pi-search" />
+        <input type="text" pInputText placeholder="Search..." />
+      </p-iconField>
+      <p-dropdown
+        [options]="sortOptions"
+        [(ngModel)]="selectedSortOption"
+        optionLabel="name"
+        placeholder="Sort By..."
+        class="w-1/2 [&>*]:w-full"
+      />
+    </div>
+  </div>
+</div>

src/app/pages/homepage/homepage.component.ts

@@ -1,11 +1,85 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { IconFieldModule } from 'primeng/iconfield';
+import { InputIconModule } from 'primeng/inputicon';
+import { InputTextModule } from 'primeng/inputtext';
+import { DropdownModule } from 'primeng/dropdown';
+import { FormsModule } from '@angular/forms';
+import { TabViewModule } from 'primeng/tabview';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { MenubarModule } from 'primeng/menubar';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [],
+  imports: [
+    FormsModule,
+    ButtonModule,
+    TabMenuModule,
+    TabViewModule,
+    SelectButtonModule,
+    IconFieldModule,
+    InputIconModule,
+    InputTextModule,
+    DropdownModule,
+    SplitButtonModule,
+    MenubarModule,
+  ],
   templateUrl: './homepage.component.html',
   styleUrl: './homepage.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HomepageComponent {}
+export class HomepageComponent {
+  navMenuItems: MenuItem[] = [
+    {
+      label: 'Overview | Participants',
+    },
+    {
+      label: 'Payments',
+      routerLink: '/', // Just throwing this in there to make one selected by default
+    },
+    {
+      label: 'Monitoring',
+    },
+  ];
+
+  paymentStatuses = [
+    {
+      label: 'All payments',
+      value: 'all',
+    },
+    {
+      label: 'Waiting for approval',
+      value: 'waiting',
+    },
+    {
+      label: 'In progress',
+      value: 'in-progress',
+    },
+    {
+      label: 'Completed',
+      value: 'completed',
+    },
+  ];
+  selectedPaymentStatus = 'all';
+
+  sortOptions = [
+    {
+      name: 'Sort By: Last Updated',
+      value: 'newest',
+    },
+    {
+      name: 'Sort By: Name',
+      value: 'name',
+    },
+  ];
+  selectedSortOption = 'newest';
+
+  downloadOptions = [
+    { label: 'Unused Vouchers' },
+    { label: 'Debit Card Usage' },
+  ];
+}

src/styles.scss

@@ -1,4 +1,15 @@
-/* You can add global styles to this file, and also import other style files */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer tailwind-base, primeng, tailwind-utilities;
+
+// Please take note of the order in which these are imported
+@import "tailwindcss/base.css" layer(tailwind-base);
+
+@import "primeng/resources/primeng.css";
+@import "primeng/resources/themes/tailwind-light/theme.css";
+@import "primeicons/primeicons.css";
+
+@import "tailwindcss/components.css" layer(tailwind-utilities);
+@import "tailwindcss/utilities.css" layer(tailwind-utilities);
+
+body {
+  @apply bg-grey-100;
+}