@@ -368,6 +339,53 @@
+
+
+ Emergency Fund
+ @if (!hasImpersonationId && summary?.totalValueInBaseCurrency > 0) {
+
+ }
+
+
+ @if (
+ hasPermissionToUpdateUserSettings &&
+ !isLoading &&
+ !user?.settings?.isRestrictedView &&
+ user?.subscription?.type !== 'Basic'
+ ) {
+
+ }
+
+
+
Interest
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
index 5d4e87f30f..6feaa22d1a 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
@@ -1,3 +1,11 @@
:host {
display: block;
+
+ .indent-1 {
+ margin-left: 1rem;
+ }
+
+ .indent-2 {
+ margin-left: 2rem;
+ }
}
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
index b1e32c6c36..5b3c0f46b8 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
@@ -21,6 +21,7 @@ import {
ellipsisHorizontalCircleOutline,
informationCircleOutline
} from 'ionicons/icons';
+import { isNumber } from 'lodash';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -55,9 +56,10 @@ export class GfPortfolioSummaryComponent implements OnChanges {
addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
}
- protected get buyingPowerPercentage() {
+ protected get cashPercentage() {
return this.summary?.totalValueInBaseCurrency
- ? this.summary.cash / this.summary.totalValueInBaseCurrency
+ ? this.summary.totalCashInBaseCurrency /
+ this.summary.totalValueInBaseCurrency
: 0;
}
@@ -75,6 +77,27 @@ export class GfPortfolioSummaryComponent implements OnChanges {
: 0;
}
+ protected get holdingsInBaseCurrency() {
+ if (
+ !isNumber(this.summary?.currentValueInBaseCurrency) ||
+ !isNumber(this.summary?.totalCashInBaseCurrency)
+ ) {
+ return null;
+ }
+
+ return (
+ this.summary.currentValueInBaseCurrency -
+ this.summary.totalCashInBaseCurrency
+ );
+ }
+
+ protected get holdingsPercentage() {
+ return this.summary?.totalValueInBaseCurrency &&
+ isNumber(this.holdingsInBaseCurrency)
+ ? this.holdingsInBaseCurrency / this.summary.totalValueInBaseCurrency
+ : 0;
+ }
+
public ngOnChanges() {
if (this.summary) {
if (