Task/resolve strict template errors in rule settings dialog (#8084)

Resolve strict template errors

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Extended the content of the _General_ section by information about the import of activities from _Interactive Brokers_ on the Frequently Asked Questions (FAQ) page
+
 ## 3.81.0 - 2026-10-07
 
 ### Changed

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -6,124 +6,132 @@
   (ngSubmit)="onSubmit()"
 >
   <div class="py-3" mat-dialog-content>
+    @if (data.rule.configuration?.threshold; as threshold) {
       @if (
-      data.rule.configuration?.thresholdMin &&
-      data.rule.configuration?.thresholdMax
+        data.rule.configuration.thresholdMin &&
+        data.rule.configuration.thresholdMax
       ) {
         <div class="w-100">
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold range</ng-container>:
             <gf-value
               class="ml-1"
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="settingsForm.get('thresholdMin').value"
+              [value]="settingsForm.get('thresholdMin')?.value"
             />
             <span class="mx-1">-</span>
             <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="settingsForm.get('thresholdMax').value"
+              [value]="settingsForm.get('thresholdMax')?.value"
             />
           </h6>
           <div class="align-items-center d-flex w-100">
             <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="data.rule.configuration.threshold.min"
+              [value]="threshold.min"
             />
             <mat-slider
               class="flex-grow-1"
-            [max]="data.rule.configuration.threshold.max"
-            [min]="data.rule.configuration.threshold.min"
-            [step]="data.rule.configuration.threshold.step"
+              [max]="threshold.max"
+              [min]="threshold.min"
+              [step]="threshold.step"
             >
               <input formControlName="thresholdMin" matSliderStartThumb />
               <input formControlName="thresholdMax" matSliderEndThumb />
             </mat-slider>
             <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="data.rule.configuration.threshold.max"
+              [value]="threshold.max"
             />
           </div>
         </div>
       } @else {
-      <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMin">
+        <div
+          class="w-100"
+          [class.d-none]="!data.rule.configuration.thresholdMin"
+        >
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold Min</ng-container>:
             <gf-value
               class="ml-1"
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="settingsForm.get('thresholdMin').value"
+              [value]="settingsForm.get('thresholdMin')?.value"
             />
           </h6>
           <div class="align-items-center d-flex w-100">
             <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="data.rule.configuration.threshold.min"
+              [value]="threshold.min"
             />
             <mat-slider
               class="flex-grow-1"
               name="thresholdMin"
-            [max]="data.rule.configuration.threshold.max"
-            [min]="data.rule.configuration.threshold.min"
-            [step]="data.rule.configuration.threshold.step"
+              [max]="threshold.max"
+              [min]="threshold.min"
+              [step]="threshold.step"
             >
               <input formControlName="thresholdMin" matSliderThumb />
             </mat-slider>
             <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="data.rule.configuration.threshold.max"
+              [value]="threshold.max"
             />
           </div>
         </div>
-      <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMax">
+        <div
+          class="w-100"
+          [class.d-none]="!data.rule.configuration.thresholdMax"
+        >
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold Max</ng-container>:
             <gf-value
               class="ml-1"
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="settingsForm.get('thresholdMax').value"
+              [value]="settingsForm.get('thresholdMax')?.value"
             />
           </h6>
           <div class="align-items-center d-flex w-100">
             <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="data.rule.configuration.threshold.min"
+              [value]="threshold.min"
             />
             <mat-slider
               class="flex-grow-1"
               name="thresholdMax"
-            [max]="data.rule.configuration.threshold.max"
-            [min]="data.rule.configuration.threshold.min"
-            [step]="data.rule.configuration.threshold.step"
+              [max]="threshold.max"
+              [min]="threshold.min"
+              [step]="threshold.step"
             >
               <input formControlName="thresholdMax" matSliderThumb />
             </mat-slider>
             <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
+              [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
-            [value]="data.rule.configuration.threshold.max"
+              [value]="threshold.max"
             />
           </div>
         </div>
       }
+    }
   </div>
 
   <div align="end" mat-dialog-actions>

apps/client/src/app/pages/faq/overview/faq-overview-page.html

@@ -56,6 +56,65 @@
           return).</mat-card-content
         >
       </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >How can I import activities from
+            <i>Interactive Brokers</i> (IBKR)?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content>
+          <ol>
+            <li>Log in to your <i>Interactive Brokers</i> Client Portal</li>
+            <li>
+              Navigate to <strong>Performance &amp; Reports</strong> in the top
+              menu, then select <strong>Flex Queries</strong>
+            </li>
+            <li>
+              Click the <strong>+</strong> button next to Activity Flex Query
+            </li>
+            <li>Select <strong>Trades</strong> under Sections</li>
+            <li>Select <strong>Executions</strong> on the pop-up window</li>
+            <li>
+              Click <strong>SELECT ALL</strong> and then <strong>Save</strong>
+            </li>
+            <li>Enter a Query Name (e.g., "Ghostfolio Export")</li>
+            <li>
+              Under Delivery Configuration, set <strong>Format</strong> to
+              <strong>CSV</strong>,
+              <strong>Include header and trailer records</strong> to
+              <strong>No</strong>, <strong>Include column headers</strong> to
+              <strong>Yes</strong> and
+              <strong>Display single column header row</strong> to
+              <strong>Yes</strong>
+            </li>
+            <li>Click <strong>Create</strong></li>
+            <li>Run the Activity Flex Query</li>
+            <li>
+              Under Period, select <strong>Custom Date Range</strong> and choose
+              the dates you want to export. Run separate exports for longer
+              histories if necessary
+            </li>
+            <li>
+              Set <strong>Format</strong> to <strong>CSV</strong>, click
+              <strong>Run</strong> and download your trades
+            </li>
+            <li>
+              Import the CSV file in Ghostfolio: <strong>Portfolio</strong> →
+              <strong>Activities</strong> →
+              <strong>Import Activities...</strong>
+            </li>
+          </ol>
+          <p>
+            Please note: The export contains trades only. It does not contain
+            dividends, interest or taxes. Keep only rows with the asset class
+            <code>STK</code>. Remove all other rows before the import, for
+            example currency conversions (<code>CASH</code>, such as
+            <code>EUR.USD</code>). Symbols from exchanges outside the US might
+            need a manual change.
+          </p>
+        </mat-card-content>
+      </mat-card>
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header>
           <mat-card-title>Can I use Ghostfolio anonymously?</mat-card-title>