money component ui improvements

frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts

@@ -171,12 +171,22 @@ export class DbTableWidgetsComponent implements OnInit {
   "phone_validation": true
 }
 `,
+  Country: `// No settings required`,
   Foreign_key: `// Provide settings for foreign key widget
 {
   "column_name": "", // copy the name of the column you selected
   "referenced_column_name": "",
   "referenced_table_name": ""
 }
+`,
+  Money: `// Configure money widget settings
+// example:
+{
+  "default_currency": "USD",
+  "show_currency_selector": false,
+  "decimal_places": 2,
+  "allow_negative": true
+}
 `,
   }
 

frontend/src/app/components/ui-components/filter-fields/country/country.component.ts

@@ -23,7 +23,7 @@ export class CountryFilterComponent extends BaseFilterFieldComponent {
   @Input() value: string;
 
   public countries: {value: string | null, label: string, flag: string}[] = [];
-  public countryControl = new FormControl('');
+  public countryControl = new FormControl<{value: string | null, label: string, flag: string} | string>('');
   public filteredCountries: Observable<{value: string | null, label: string, flag: string}[]>;
 
   originalOrder = () => { return 0; }
@@ -40,15 +40,15 @@ export class CountryFilterComponent extends BaseFilterFieldComponent {
   private setupAutocomplete(): void {
     this.filteredCountries = this.countryControl.valueChanges.pipe(
       startWith(''),
-      map(value => this._filter(value || ''))
+      map(value => this._filter(typeof value === 'string' ? value : (value?.label || '')))
     );
   }
 
   private setInitialValue(): void {
     if (this.value) {
       const country = this.countries.find(c => c.value === this.value);
       if (country) {
-        this.countryControl.setValue(country.label);
+        this.countryControl.setValue(country);
       }
     }
   }

frontend/src/app/components/ui-components/row-fields/country/country.component.ts

@@ -23,7 +23,7 @@ export class CountryRowComponent extends BaseRowFieldComponent {
   @Input() value: string;
 
   public countries: {value: string | null, label: string, flag: string}[] = [];
-  public countryControl = new FormControl('');
+  public countryControl = new FormControl<{value: string | null, label: string, flag: string} | string>('');
   public filteredCountries: Observable<{value: string | null, label: string, flag: string}[]>;
 
   originalOrder = () => { return 0; }
@@ -40,15 +40,15 @@ export class CountryRowComponent extends BaseRowFieldComponent {
   private setupAutocomplete(): void {
     this.filteredCountries = this.countryControl.valueChanges.pipe(
       startWith(''),
-      map(value => this._filter(value || ''))
+      map(value => this._filter(typeof value === 'string' ? value : (value?.label || '')))
     );
   }
 
   private setInitialValue(): void {
     if (this.value) {
       const country = this.countries.find(c => c.value === this.value);
       if (country) {
-        this.countryControl.setValue(country.label);
+        this.countryControl.setValue(country);
       }
     }
   }

frontend/src/app/components/ui-components/row-fields/money/money.component.css

@@ -0,0 +1,76 @@
+.money-widget {
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.money-input-container {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.money-selector {
+  min-width: 180px;
+  flex-shrink: 0;
+  margin-left: 16px;
+}
+
+.money-selector .mat-mdc-form-field {
+  margin-left: 0;
+}
+
+.amount-input {
+  flex: 1;
+  min-width: 120px;
+}
+
+
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .money-input-container {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .money-selector {
+    width: 100%;
+    min-width: unset;
+    margin-left: 16px;
+  }
+}
+
+/* Ensure proper spacing with Material Design */
+.mat-mdc-form-field {
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.mat-mdc-form-field + .mat-mdc-form-field {
+  margin-left: 0;
+}
+
+/* Prefix/suffix styling */
+.mat-mdc-form-field-prefix,
+.mat-mdc-form-field-suffix {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+[data-theme="dark"] .mat-mdc-form-field-prefix,
+[data-theme="dark"] .mat-mdc-form-field-suffix {
+  color: rgba(255, 255, 255, 0.87);
+}
+
+/* Specific styling for text prefix */
+.mat-mdc-form-field-text-prefix {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+  margin-right: 4px;
+}
+
+[data-theme="dark"] .mat-mdc-form-field-text-prefix {
+  color: rgba(255, 255, 255, 0.87);
+}

frontend/src/app/components/ui-components/row-fields/money/money.component.html

@@ -0,0 +1,43 @@
+<div class="money-widget">
+  <div class="money-input-container">
+    <!-- Currency selector (if enabled) -->
+    <mat-form-field 
+      *ngIf="showCurrencySelector" 
+      class="money-selector" 
+      appearance="outline">
+      <mat-label>Currency</mat-label>
+      <mat-select 
+        [(value)]="selectedCurrency"
+        (selectionChange)="onCurrencyChange()"
+        [disabled]="disabled"
+        attr.data-testid="record-{{label}}-money-selector">
+        <mat-option 
+          *ngFor="let currency of currencies" 
+          [value]="currency.code">
+          {{ displayCurrencyFn(currency) }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <!-- Amount input -->
+    <mat-form-field 
+      class="amount-input" 
+      appearance="outline">
+      <mat-label>{{normalizedLabel}}</mat-label>
+      <span matTextPrefix *ngIf="selectedCurrencyData && displayAmount">{{selectedCurrencyData.symbol}}</span>
+      <input 
+        matInput
+        type="text"
+        [(ngModel)]="displayAmount"
+        (ngModelChange)="onAmountChange()"
+        (blur)="onAmountBlur()"
+        [placeholder]="placeholder"
+        [required]="required"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        attr.data-testid="record-{{label}}-money-amount"
+        [step]="0.01">
+    </mat-form-field>
+  </div>
+
+</div>