Add Kubera

apps/client/src/app/pages/alternatives/alternatives-page-routing.module.ts

@@ -19,7 +19,7 @@ const routes: Routes = [
     .map(({ component, key, name }) => {
       return {
         canActivate: [AuthGuard],
-        path: key,
+        path: `open-source-alternative-to-${key}`,
         loadComponent: () =>
           import(`./products/${key}-page.component`).then(() => component),
         title: `Open Source Alternative to ${name}`

apps/client/src/app/pages/alternatives/alternatives-page.html

@@ -1,7 +1,9 @@
 <div class="container">
   <div class="mb-5 row">
     <div class="col">
-      <h3 class="d-none d-sm-block mb-3 text-center" i18n>Alternatives</h3>
+      <h3 class="d-none d-sm-block mb-3 text-center" i18n>
+        Open Source Alternatives to various Personal Finance Tools
+      </h3>
       <mat-card
         *ngFor="let product of products"
         appearance="outlined"
@@ -12,7 +14,7 @@
             <div class="flex-nowrap no-gutters row">
               <a
                 class="d-flex overflow-hidden w-100"
-                [routerLink]="['/alternatives', product.key]"
+                [routerLink]="['/alternatives', 'open-source-alternative-to-' + product.key]"
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">

apps/client/src/app/pages/alternatives/page-template.html

@@ -88,8 +88,18 @@
               </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-1 py-2" i18n>Pricing</td>
-                <td class="mat-mdc-cell px-1 py-2">{{ product1.pricing }}</td>
-                <td class="mat-mdc-cell px-1 py-2">{{ product2.pricing }}</td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  <ng-container *ngIf="product2.pricingPerYear"
+                    >Starting from {{ product1.pricingPerYear }} /
+                    year</ng-container
+                  >
+                </td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  <ng-container *ngIf="product2.pricingPerYear"
+                    >Starting from {{ product2.pricingPerYear }} /
+                    year</ng-container
+                  >
+                </td>
               </tr>
               <tr *ngIf="product1.note || product2.note" class="mat-mdc-row">
                 <td class="mat-mdc-cell px-1 py-2" i18n>Notes</td>

apps/client/src/app/pages/alternatives/products.ts

@@ -1,4 +1,5 @@
 import { Product } from '@ghostfolio/common/interfaces';
+import { KuberaPageComponent } from './products/kubera-page.component';
 import { MaybePageComponent } from './products/maybe-page.component';
 import { ParqetPageComponent } from './products/parqet-page.component';
 import { YeekateePageComponent } from './products/yeekatee-page.component';
@@ -14,10 +15,20 @@ export const products: Product[] = [
       'English, Dutch, French, German, Italian, Portuguese and Spanish',
     name: 'Ghostfolio',
     origin: 'Switzerland',
-    pricing: 'Starting from $19 / year',
+    pricingPerYear: '$19',
     region: 'Global',
     slogan: 'Open Source Wealth Management'
   },
+  {
+    component: KuberaPageComponent,
+    hasFreePlan: false,
+    isOpenSource: false,
+    key: 'kubera',
+    name: 'Kubera®',
+    origin: 'USA',
+    pricingPerYear: '$150',
+    slogan: 'The Time Machine for your Net Worth'
+  },
   {
     component: MaybePageComponent,
     founded: 2021,
@@ -27,7 +38,7 @@ export const products: Product[] = [
     name: 'Maybe Finance',
     note: 'Sunset in 2023',
     origin: 'USA',
-    pricing: 'Starting from $145 / year',
+    pricingPerYear: '$145',
     region: 'USA',
     slogan: 'Your financial future, in your control'
   },
@@ -39,7 +50,7 @@ export const products: Product[] = [
     key: 'parqet',
     name: 'Parqet',
     origin: 'Germany',
-    pricing: 'Starting from €88 / year',
+    pricingPerYear: '€88',
     region: 'Austria, Germany, Switzerland',
     slogan: 'Dein Vermögen immer im Blick'
   },

apps/client/src/app/pages/alternatives/products/kubera-page.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-kubera-page',
+  standalone: true,
+  templateUrl: '../page-template.html'
+})
+export class KuberaPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'kubera';
+  });
+}

libs/common/src/lib/interfaces/product.ts

@@ -8,7 +8,7 @@ export interface Product {
   name: string;
   note?: string;
   origin?: string;
-  pricing?: string;
+  pricingPerYear?: string;
   region?: string;
   slogan?: string;
 }