From 4a11c25f62a9d08bef5a2f7d2f3a352cfcb5b691 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Thu, 21 Aug 2025 10:45:50 +0000
Subject: [PATCH 01/11] widget improvements

---
 .../db-table-widgets.component.ts             | 21 +++++-
 .../boolean/boolean.component.html            | 10 ++-
 .../boolean/boolean.component.ts              |  3 +
 .../number/number.component.css               |  4 +-
 .../number/number.component.html              |  2 +-
 .../number/number.component.ts                | 20 +++++
 .../text/text.component.css                   |  6 ++
 .../text/text.component.html                  |  2 +-
 .../record-view-fields/text/text.component.ts | 75 ++++++++++++++++++-
 .../boolean/boolean.component.html            | 10 ++-
 .../boolean/boolean.component.ts              |  3 +
 .../number/number.component.css               |  4 +-
 .../number/number.component.html              |  2 +-
 .../number/number.component.ts                | 20 +++++
 .../text/text.component.css                   |  6 ++
 .../text/text.component.html                  |  2 +-
 .../text/text.component.ts                    | 75 ++++++++++++++++++-
 17 files changed, 250 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
index c1e7671cd..8bde8bc08 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
@@ -169,10 +169,13 @@ export class DbTableWidgetsComponent implements OnInit {
   "allow_negative": true
 }
 `,
-    Number: `// Configure number display with unit conversion
+    Number: `// Configure number display with unit conversion and threshold validation
 // Example units: "bytes", "meters", "seconds", "grams"
+// threshold_min/threshold_max: Values outside these limits will be highlighted in red
 {
-  "unit": null
+  "unit": null,
+  "threshold_min": null,
+  "threshold_max": null
 }`,
     Password:
 `// provide algorithm to encrypt your password, one of:
@@ -226,7 +229,19 @@ export class DbTableWidgetsComponent implements OnInit {
     }
   ]
 }`,
-    String: `// No settings required`,
+    String: `// Optional validation for string values
+// validate: Any validator.js method (e.g., "isEmail", "isURL", "isUUID", "isJSON", "isAlpha", "isNumeric")
+// Full list: isEmail, isURL, isMACAddress, isIP, isIPRange, isFQDN, isBoolean, isIBAN, isBIC,
+// isAlpha, isAlphanumeric, isNumeric, isPort, isLowercase, isUppercase, isAscii, isBase64,
+// isHexadecimal, isHexColor, isRgbColor, isHSL, isMD5, isHash, isJWT, isJSON, isUUID,
+// isMongoId, isCreditCard, isISBN, isISSN, isMobilePhone, isPostalCode, isEthereumAddress,
+// isCurrency, isBtcAddress, isISO8601, isISO31661Alpha2, isISO31661Alpha3, isISO4217,
+// isDataURI, isMagnetURI, isMimeType, isLatLong, isSlug, isStrongPassword, isTaxID, isVAT
+// OR use "regex" with a regex parameter for custom pattern matching
+{
+  "validate": null,
+  "regex": null
+}`,
     Textarea: `// provide number of strings to show.
 {
   "rows": 5
diff --git a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html
index 6afe2967d..81fbe48e8 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html
@@ -1,3 +1,9 @@
-<mat-icon *ngIf="value === true" class="boolean-icon boolean-icon-true">check_small</mat-icon>
-<mat-icon *ngIf="value === false" class="boolean-icon boolean-icon-false">close_small</mat-icon>
+<mat-icon *ngIf="value === true" 
+          [ngClass]="{'boolean-icon': true, 'boolean-icon-true': !invertColors, 'boolean-icon-false': invertColors}">
+  check_small
+</mat-icon>
+<mat-icon *ngIf="value === false" 
+          [ngClass]="{'boolean-icon': true, 'boolean-icon-false': !invertColors, 'boolean-icon-true': invertColors}">
+  close_small
+</mat-icon>
 <span *ngIf="value !== true && value !== false">—</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.ts
index 0947ac496..ef3ce9550 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.ts
@@ -13,4 +13,7 @@ import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-rec
   imports: [MatIconModule, CommonModule]
 })
 export class BooleanRecordViewComponent extends BaseRecordViewFieldComponent {
+  get invertColors(): boolean {
+    return this.widgetStructure?.widget_params?.invertColors === true;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css
index 8b1378917..82dac759f 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css
+++ b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css
@@ -1 +1,3 @@
-
+.out-of-threshold {
+  color: #f44336;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html
index 8f3bd4c32..c98316b79 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html
@@ -1 +1 @@
-<span class="field-view-value">{{displayValue}}</span>
+<span class="field-view-value" [class.out-of-threshold]="isOutOfThreshold">{{displayValue}}</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts
index bb3773ddf..011036e74 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts
@@ -32,4 +32,24 @@ export class NumberRecordViewComponent extends BaseRecordViewFieldComponent {
       return this.value.toString();
     }
   }
+
+  get isOutOfThreshold(): boolean {
+    if (this.value == null || this.value === '') {
+      return false;
+    }
+
+    const thresholdMin = this.widgetStructure?.widget_params?.threshold_min;
+    const thresholdMax = this.widgetStructure?.widget_params?.threshold_max;
+    const numValue = parseFloat(this.value);
+
+    if (thresholdMin !== undefined && numValue < thresholdMin) {
+      return true;
+    }
+
+    if (thresholdMax !== undefined && numValue > thresholdMax) {
+      return true;
+    }
+
+    return false;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css
index e69de29bb..944378e53 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css
+++ b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css
@@ -0,0 +1,6 @@
+.validation-error {
+  color: #f44336;
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-underline-offset: 2px;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.html b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.html
index 7dfcb3f4b..d6b7e12f0 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.html
@@ -1 +1 @@
-<span class="field-view-value">{{value || '—'}}</span>
+<span class="field-view-value" [class.validation-error]="isInvalid" [title]="isInvalid ? validationErrorMessage : ''">{{value || '—'}}</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.ts b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.ts
index 788c2c8fb..68cb8dc14 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.ts
@@ -1,5 +1,5 @@
 import { Component, Injectable } from '@angular/core';
-
+import * as validator from 'validator';
 import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
 
 @Injectable()
@@ -10,4 +10,77 @@ import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-rec
   imports: []
 })
 export class TextRecordViewComponent extends BaseRecordViewFieldComponent {
+  get isInvalid(): boolean {
+    if (!this.value || this.value === '') {
+      return false;
+    }
+
+    const validateType = this.widgetStructure?.widget_params?.validate;
+    if (!validateType) {
+      return false;
+    }
+
+    const stringValue = String(this.value);
+
+    // Special case for regex validation
+    if (validateType === 'regex') {
+      const regexPattern = this.widgetStructure?.widget_params?.regex;
+      if (!regexPattern) {
+        return false;
+      }
+      try {
+        const regex = new RegExp(regexPattern);
+        return !regex.test(stringValue);
+      } catch (error) {
+        console.warn('Invalid regex pattern:', error);
+        return false;
+      }
+    }
+
+    // Check if validator has this method
+    const validatorMethod = validator[validateType];
+    if (typeof validatorMethod !== 'function') {
+      console.warn(`Unknown validator method: ${validateType}`);
+      return false;
+    }
+
+    try {
+      // Call the validator method and invert result (true if invalid)
+      return !validatorMethod(stringValue);
+    } catch (error) {
+      console.warn(`Validation error for ${validateType}:`, error);
+      return false;
+    }
+  }
+
+  get validationErrorMessage(): string {
+    const validateType = this.widgetStructure?.widget_params?.validate;
+    if (!validateType) {
+      return '';
+    }
+
+    if (validateType === 'regex') {
+      return 'Does not match the required pattern';
+    }
+
+    // Create user-friendly messages for common validators
+    const messages = {
+      isEmail: 'Invalid email address',
+      isURL: 'Invalid URL',
+      isIP: 'Invalid IP address',
+      isUUID: 'Invalid UUID',
+      isJSON: 'Invalid JSON',
+      isCreditCard: 'Invalid credit card number',
+      isISBN: 'Invalid ISBN',
+      isAlpha: 'Should contain only letters',
+      isNumeric: 'Should contain only numbers',
+      isAlphanumeric: 'Should contain only letters and numbers',
+      isHexColor: 'Invalid hex color',
+      isBase64: 'Invalid Base64 string',
+      isMobilePhone: 'Invalid mobile phone number',
+      isPostalCode: 'Invalid postal code'
+    };
+
+    return messages[validateType] || `Invalid ${validateType.replace(/^is/, '').toLowerCase()}`;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
index a83870454..4012df024 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
@@ -1,7 +1,13 @@
 <div class="field-display">
   <div class="field-value">
-    <mat-icon *ngIf="value === true" class="boolean-icon boolean-icon-true">check_small</mat-icon>
-    <mat-icon *ngIf="value === false" class="boolean-icon boolean-icon-false">close_small</mat-icon>
+    <mat-icon *ngIf="value === true" 
+              [ngClass]="{'boolean-icon': true, 'boolean-icon-true': !invertColors, 'boolean-icon-false': invertColors}">
+      check_small
+    </mat-icon>
+    <mat-icon *ngIf="value === false" 
+              [ngClass]="{'boolean-icon': true, 'boolean-icon-false': !invertColors, 'boolean-icon-true': invertColors}">
+      close_small
+    </mat-icon>
     <span *ngIf="value !== true && value !== false">—</span>
   </div>
 </div>
diff --git a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts
index dc78799f4..b56ddec31 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts
@@ -15,4 +15,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
   imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
 })
 export class BooleanDisplayComponent extends BaseTableDisplayFieldComponent {
+  get invertColors(): boolean {
+    return this.widgetStructure?.widget_params?.invertColors === true;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
index 8b1378917..82dac759f 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
@@ -1 +1,3 @@
-
+.out-of-threshold {
+  color: #f44336;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
index 356e592cb..8e72705c6 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
@@ -1,5 +1,5 @@
 <div class="field-display">
-  <span class="field-value">{{displayValue}}</span>
+  <span class="field-value" [class.out-of-threshold]="isOutOfThreshold">{{displayValue}}</span>
   <button type="button" mat-icon-button
       class="field-copy-button"
       matTooltip="Copy"
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
index ca4ca22d1..749e4e3a2 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
@@ -35,4 +35,24 @@ export class NumberDisplayComponent extends BaseTableDisplayFieldComponent {
       return this.value.toString();
     }
   }
+
+  get isOutOfThreshold(): boolean {
+    if (this.value == null || this.value === '') {
+      return false;
+    }
+
+    const thresholdMin = this.widgetStructure?.widget_params?.threshold_min;
+    const thresholdMax = this.widgetStructure?.widget_params?.threshold_max;
+    const numValue = parseFloat(this.value);
+
+    if (thresholdMin !== undefined && numValue < thresholdMin) {
+      return true;
+    }
+
+    if (thresholdMax !== undefined && numValue > thresholdMax) {
+      return true;
+    }
+
+    return false;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css
index e69de29bb..944378e53 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css
@@ -0,0 +1,6 @@
+.validation-error {
+  color: #f44336;
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-underline-offset: 2px;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.html b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.html
index acf48b2d5..743383066 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.html
@@ -1,5 +1,5 @@
 <div class="field-display">
-  <span class="field-value">{{value || '—'}}</span>
+  <span class="field-value" [class.validation-error]="isInvalid" [title]="isInvalid ? validationErrorMessage : ''">{{value || '—'}}</span>
   <button type="button" mat-icon-button
       class="field-copy-button"
       matTooltip="Copy"
diff --git a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.ts b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.ts
index 42a66f0a6..ca94c0152 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.ts
@@ -1,5 +1,5 @@
 import { Component, Injectable } from '@angular/core';
-
+import * as validator from 'validator';
 import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,4 +14,77 @@ import { MatTooltipModule } from '@angular/material/tooltip';
   imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
 })
 export class TextDisplayComponent extends BaseTableDisplayFieldComponent {
+  get isInvalid(): boolean {
+    if (!this.value || this.value === '') {
+      return false;
+    }
+
+    const validateType = this.widgetStructure?.widget_params?.validate;
+    if (!validateType) {
+      return false;
+    }
+
+    const stringValue = String(this.value);
+
+    // Special case for regex validation
+    if (validateType === 'regex') {
+      const regexPattern = this.widgetStructure?.widget_params?.regex;
+      if (!regexPattern) {
+        return false;
+      }
+      try {
+        const regex = new RegExp(regexPattern);
+        return !regex.test(stringValue);
+      } catch (error) {
+        console.warn('Invalid regex pattern:', error);
+        return false;
+      }
+    }
+
+    // Check if validator has this method
+    const validatorMethod = validator[validateType];
+    if (typeof validatorMethod !== 'function') {
+      console.warn(`Unknown validator method: ${validateType}`);
+      return false;
+    }
+
+    try {
+      // Call the validator method and invert result (true if invalid)
+      return !validatorMethod(stringValue);
+    } catch (error) {
+      console.warn(`Validation error for ${validateType}:`, error);
+      return false;
+    }
+  }
+
+  get validationErrorMessage(): string {
+    const validateType = this.widgetStructure?.widget_params?.validate;
+    if (!validateType) {
+      return '';
+    }
+
+    if (validateType === 'regex') {
+      return 'Does not match the required pattern';
+    }
+
+    // Create user-friendly messages for common validators
+    const messages = {
+      isEmail: 'Invalid email address',
+      isURL: 'Invalid URL',
+      isIP: 'Invalid IP address',
+      isUUID: 'Invalid UUID',
+      isJSON: 'Invalid JSON',
+      isCreditCard: 'Invalid credit card number',
+      isISBN: 'Invalid ISBN',
+      isAlpha: 'Should contain only letters',
+      isNumeric: 'Should contain only numbers',
+      isAlphanumeric: 'Should contain only letters and numbers',
+      isHexColor: 'Invalid hex color',
+      isBase64: 'Invalid Base64 string',
+      isMobilePhone: 'Invalid mobile phone number',
+      isPostalCode: 'Invalid postal code'
+    };
+
+    return messages[validateType] || `Invalid ${validateType.replace(/^is/, '').toLowerCase()}`;
+  }
 }

From ad04d2dbaef6128510fe617000a68c8063003f4c Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Sun, 24 Aug 2025 19:53:13 +0000
Subject: [PATCH 02/11] bugfixes

---
 .../db-table-widgets.component.ts             | 11 ++--
 .../boolean/boolean.component.html            |  4 +-
 .../boolean/boolean.component.ts              | 10 +++
 .../long-text/long-text.component.html        |  9 +++
 .../long-text/long-text.component.ts          | 63 ++++++++++++++++---
 .../text/text.component.html                  |  9 +++
 .../record-edit-fields/text/text.component.ts | 63 ++++++++++++++++++-
 .../record-edit-fields/url/url.component.css  | 10 +++
 8 files changed, 163 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
index 8bde8bc08..2c8d269ab 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
@@ -84,17 +84,20 @@ export class DbTableWidgetsComponent implements OnInit {
 <p class="post-paragraph">
   A well-designed <strong>admin panel</strong> isn’t just about managing data — it’s about making that data easier to understand and interact with. By customizing how each field is displayed, you can turn raw database values into meaningful, user-friendly interfaces that save time and reduce errors.
 </p>`;
+  // JSON5-formatted default params
   public defaultParams = {
     Boolean:
-`// Display "Yes/No" buttons and specify "allow_null" in field structure:
-// Use "false" to require that one of the buttons is selected;
-// Use "true" if the field might be left unspecified.
+`// Display "Yes/No" buttons with configurable options:
+// - allow_null: Use "false" to require selection, "true" if field can be left unspecified
+// - invert_colors: Swap the color scheme (typically green=Yes, red=No becomes red=Yes, green=No)
 
 {
 	"structure": {
 		"allow_null": false
+		"invert_colors": false,
 	}
-}`,
+}
+`,
     Code:
 `// provide language of code to highlight: 'html', 'css', 'typescript', 'yaml', 'markdown'
 // example:
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html
index 375b23a88..d1f5cf6f0 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isRadiogroup; else checkboxElement" class="radio-line">
+<div *ngIf="isRadiogroup; else checkboxElement" class="radio-line" [class.invert-colors]="invertColors">
     <label id="">{{normalizedLabel}}</label>
     <mat-button-toggle-group name="{{label}}-{{key}}"
         attr.data-testid="record-{{label}}-boolean-radio-group"
@@ -11,7 +11,7 @@
 </div>
 
 <ng-template #checkboxElement>
-    <div class="radio-line">
+    <div class="radio-line" [class.invert-colors]="invertColors">
         <label id="">{{normalizedLabel}}</label>
         <mat-button-toggle-group name="{{label}}-{{key}}"
             attr.data-testid="record-{{label}}-boolean-radio-group"
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
index bdd457ef6..06734dee6 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
@@ -17,6 +17,7 @@ export class BooleanEditComponent extends BaseEditFieldComponent {
   @Input() value: boolean | number | string | null;
 
   public isRadiogroup: boolean;
+  public invertColors: boolean = false;
   private connectionType: DBtype;
 
   constructor(
@@ -40,6 +41,15 @@ export class BooleanEditComponent extends BaseEditFieldComponent {
     this.onFieldChange.emit(this.value);
 
     this.isRadiogroup = (this.structure?.allow_null) || !!(this.widgetStructure?.widget_params?.structure?.allow_null);
+
+    // Parse widget parameters for invert_colors option
+    if (this.widgetStructure?.widget_params) {
+      const params = typeof this.widgetStructure.widget_params === 'string' 
+        ? JSON.parse(this.widgetStructure.widget_params) 
+        : this.widgetStructure.widget_params;
+      
+      this.invertColors = params.invert_colors === true;
+    }
   }
 
   onToggleChange(optionValue: boolean): void {
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
index 626b813c2..549be2a83 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
@@ -1,9 +1,18 @@
 <mat-form-field class="form-field" appearance="outline">
     <mat-label>{{normalizedLabel}}</mat-label>
     <textarea matInput name="{{label}}-{{key}}"
+        #textareaField="ngModel"
         [rows]="rowsCount"
+        [maxlength]="maxLength"
+        textValidator
+        [validateType]="validateType"
+        [regexPattern]="regexPattern"
         attr.data-testid="record-{{label}}-long-text"
         [required]="required" [disabled]="disabled" [readonly]="readonly"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
     </textarea>
+    <mat-error *ngIf="textareaField.errors?.['required']">This field is required.</mat-error>
+    <mat-error *ngIf="textareaField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
+    <mat-error *ngIf="textareaField.errors?.['invalidPattern'] || textareaField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>
+    <mat-hint *ngIf="maxLength && value" align="end">{{value.length}} / {{maxLength}}</mat-hint>
 </mat-form-field>
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts
index c7ebb0558..2e69cf0ee 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts
@@ -1,29 +1,78 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
+import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { TextValidatorDirective } from 'src/app/directives/text-validator.directive';
 
 @Component({
   selector: 'app-edit-long-text',
   templateUrl: './long-text.component.html',
   styleUrls: ['./long-text.component.css'],
-  imports: [MatFormFieldModule, MatInputModule, FormsModule]
+  imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule, TextValidatorDirective]
 })
-export class LongTextEditComponent extends BaseEditFieldComponent {
+export class LongTextEditComponent extends BaseEditFieldComponent implements OnInit {
   @Input() value: string;
 
   static type = 'text';
   public rowsCount: string;
+  maxLength: number | null = null;
+  validateType: string | null = null;
+  regexPattern: string | null = null;
 
-  ngOnInit(): void {
+  override ngOnInit(): void {
     super.ngOnInit();
+    
+    // Use character_maximum_length from the field structure if available
+    if (this.structure && this.structure.character_maximum_length) {
+      this.maxLength = this.structure.character_maximum_length;
+    }
+
+    // Parse widget parameters
     if (this.widgetStructure && this.widgetStructure.widget_params) {
-      this.rowsCount = this.widgetStructure.widget_params.rows
+      const params = typeof this.widgetStructure.widget_params === 'string' 
+        ? JSON.parse(this.widgetStructure.widget_params) 
+        : this.widgetStructure.widget_params;
+      
+      this.rowsCount = params.rows || '4';
+      this.validateType = params.validate || null;
+      this.regexPattern = params.regex || null;
     } else {
-      this.rowsCount = '4'
-    };
+      this.rowsCount = '4';
+    }
   }
 
+  getValidationErrorMessage(): string {
+    if (!this.validateType) {
+      return '';
+    }
+
+    if (this.validateType === 'regex') {
+      return 'Value doesn\'t match the required pattern';
+    }
+
+    // Create user-friendly messages for common validators
+    const messages = {
+      isEmail: 'Invalid email address',
+      isURL: 'Invalid URL',
+      isIP: 'Invalid IP address',
+      isUUID: 'Invalid UUID',
+      isJSON: 'Invalid JSON',
+      isCreditCard: 'Invalid credit card number',
+      isISBN: 'Invalid ISBN',
+      isAlpha: 'Should contain only letters',
+      isNumeric: 'Should contain only numbers',
+      isAlphanumeric: 'Should contain only letters and numbers',
+      isHexColor: 'Invalid hex color',
+      isBase64: 'Invalid Base64 string',
+      isMobilePhone: 'Invalid mobile phone number',
+      isMACAddress: 'Invalid MAC address',
+      isPostalCode: 'Invalid postal code',
+      isCurrency: 'Invalid currency format'
+    };
+
+    return messages[this.validateType] || `Invalid ${this.validateType}`;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
index 6ca6f5f34..a476335d2 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
@@ -1,7 +1,16 @@
 <mat-form-field class="text-form-field" appearance="outline">
     <mat-label>{{normalizedLabel}}</mat-label>
     <input matInput type="text" name="{{label}}-{{key}}"
+        #textField="ngModel"
         [required]="required" [disabled]="disabled" [readonly]="readonly"
+        [maxlength]="maxLength"
+        textValidator
+        [validateType]="validateType"
+        [regexPattern]="regexPattern"
         attr.data-testid="record-{{label}}-text"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
+    <mat-error *ngIf="textField.errors?.['required']">This field is required.</mat-error>
+    <mat-error *ngIf="textField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
+    <mat-error *ngIf="textField.errors?.['invalidPattern'] || textField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>
+    <mat-hint *ngIf="maxLength && value" align="end">{{value.length}} / {{maxLength}}</mat-hint>
 </mat-form-field>
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.ts
index b4edca35a..3aa4f65bb 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.ts
@@ -1,9 +1,11 @@
-import { Component, Injectable, Input } from '@angular/core';
+import { Component, Injectable, Input, OnInit } from '@angular/core';
 
 import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { CommonModule } from '@angular/common';
+import { TextValidatorDirective } from 'src/app/directives/text-validator.directive';
 
 @Injectable()
 
@@ -11,10 +13,65 @@ import { MatInputModule } from '@angular/material/input';
   selector: 'app-edit-text',
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.css'],
-  imports: [MatFormFieldModule, MatInputModule, FormsModule]
+  imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule, TextValidatorDirective]
 })
-export class TextEditComponent extends BaseEditFieldComponent {
+export class TextEditComponent extends BaseEditFieldComponent implements OnInit {
   @Input() value: string;
 
   static type = 'text';
+
+  maxLength: number | null = null;
+  validateType: string | null = null;
+  regexPattern: string | null = null;
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    
+    // Use character_maximum_length from the field structure if available
+    if (this.structure && this.structure.character_maximum_length) {
+      this.maxLength = this.structure.character_maximum_length;
+    }
+
+    // Parse widget parameters for validation
+    if (this.widgetStructure && this.widgetStructure.widget_params) {
+      const params = typeof this.widgetStructure.widget_params === 'string' 
+        ? JSON.parse(this.widgetStructure.widget_params) 
+        : this.widgetStructure.widget_params;
+      
+      this.validateType = params.validate || null;
+      this.regexPattern = params.regex || null;
+    }
+  }
+
+  getValidationErrorMessage(): string {
+    if (!this.validateType) {
+      return '';
+    }
+
+    if (this.validateType === 'regex') {
+      return 'Value doesn\'t match the required pattern';
+    }
+
+    // Create user-friendly messages for common validators
+    const messages = {
+      isEmail: 'Invalid email address',
+      isURL: 'Invalid URL',
+      isIP: 'Invalid IP address',
+      isUUID: 'Invalid UUID',
+      isJSON: 'Invalid JSON',
+      isCreditCard: 'Invalid credit card number',
+      isISBN: 'Invalid ISBN',
+      isAlpha: 'Should contain only letters',
+      isNumeric: 'Should contain only numbers',
+      isAlphanumeric: 'Should contain only letters and numbers',
+      isHexColor: 'Invalid hex color',
+      isBase64: 'Invalid Base64 string',
+      isMobilePhone: 'Invalid mobile phone number',
+      isMACAddress: 'Invalid MAC address',
+      isPostalCode: 'Invalid postal code',
+      isCurrency: 'Invalid currency format'
+    };
+
+    return messages[this.validateType] || `Invalid ${this.validateType}`;
+  }
 }
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/url/url.component.css b/frontend/src/app/components/ui-components/record-edit-fields/url/url.component.css
index 6e7bfe409..3f62bbbde 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/url/url.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/url/url.component.css
@@ -1,4 +1,14 @@
 .url-box {
     margin-bottom: 12px;
     width: 100%;
+}
+
+/* Handle long URL prefixes with overflow */
+::ng-deep .mat-mdc-form-field-text-prefix {
+    max-width: 30%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: middle;
 }
\ No newline at end of file

From 6f9521f6ecb23370a70bc21d47bac6876df224c9 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Mon, 25 Aug 2025 16:13:53 +0000
Subject: [PATCH 03/11] missing file

---
 .../directives/text-validator.directive.ts    | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 frontend/src/app/directives/text-validator.directive.ts

diff --git a/frontend/src/app/directives/text-validator.directive.ts b/frontend/src/app/directives/text-validator.directive.ts
new file mode 100644
index 000000000..311e95a0b
--- /dev/null
+++ b/frontend/src/app/directives/text-validator.directive.ts
@@ -0,0 +1,67 @@
+import { Directive, Input } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
+import * as validator from 'validator';
+
+@Directive({
+  selector: '[textValidator][ngModel]',
+  providers: [
+    {
+      provide: NG_VALIDATORS,
+      useExisting: TextValidatorDirective,
+      multi: true
+    }
+  ]
+})
+export class TextValidatorDirective implements Validator {
+  @Input('validateType') validateType: string | null = null;
+  @Input('regexPattern') regexPattern: string | null = null;
+  
+  validate(control: AbstractControl): ValidationErrors | null {
+    if (!control.value || control.value === '') {
+      return null;
+    }
+
+    if (!this.validateType) {
+      return null;
+    }
+
+    const stringValue = String(control.value);
+
+    // Special case for regex validation
+    if (this.validateType === 'regex') {
+      if (!this.regexPattern) {
+        return null;
+      }
+      try {
+        const regex = new RegExp(this.regexPattern);
+        if (!regex.test(stringValue)) {
+          return { invalidPattern: true };
+        }
+      } catch (error) {
+        console.warn('Invalid regex pattern:', error);
+        return null;
+      }
+      return null;
+    }
+
+    // Check if validator has this method
+    const validatorMethod = validator[this.validateType];
+    if (typeof validatorMethod !== 'function') {
+      console.warn(`Unknown validator method: ${this.validateType}`);
+      return null;
+    }
+
+    try {
+      // Call the validator method
+      const isValid = validatorMethod(stringValue);
+      if (!isValid) {
+        return { [`invalid${this.validateType}`]: true };
+      }
+    } catch (error) {
+      console.warn(`Validation error for ${this.validateType}:`, error);
+      return null;
+    }
+
+    return null;
+  }
+}
\ No newline at end of file

From 3edbec20ac8aaa2602545714eef7d6132f64278f Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Tue, 26 Aug 2025 15:16:10 +0300
Subject: [PATCH 04/11] widgets: - uuid: add disasbled attribute; - number:
 remove color and add arrow to indicate on what side of threshold value is
 exceed; - range: fix color and add component to record view map.

---
 .../uuid/uuid.component.html                  | 21 +++---
 .../number/number.component.css               | 10 ++-
 .../number/number.component.html              |  6 +-
 .../number/number.component.ts                | 11 +--
 .../range/range.component.css                 | 64 +++++++++++++++++
 .../range/range.component.html                |  8 +++
 .../range/range.component.ts                  | 69 +++++++++++++++++++
 .../number/number.component.css               | 12 +++-
 .../number/number.component.html              |  6 +-
 .../number/number.component.ts                | 25 ++++---
 .../range/range.component.css                 |  4 +-
 frontend/src/app/consts/record-view-types.ts  |  4 +-
 12 files changed, 210 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/app/components/ui-components/record-view-fields/range/range.component.css
 create mode 100644 frontend/src/app/components/ui-components/record-view-fields/range/range.component.html
 create mode 100644 frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/uuid/uuid.component.html b/frontend/src/app/components/ui-components/record-edit-fields/uuid/uuid.component.html
index 6dccab057..d8972f391 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/uuid/uuid.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/uuid/uuid.component.html
@@ -1,19 +1,20 @@
 <mat-form-field appearance="outline" class="uuid-field">
   <mat-label>{{ normalizedLabel }}</mat-label>
-  <input 
-    matInput 
-    [(ngModel)]="value" 
-    [readonly]="readonly || disabled"
+  <input
+    matInput
+    [(ngModel)]="value"
+    [readonly]="readonly"
+    [disabled]="disabled"
     [required]="required"
     (ngModelChange)="onFieldChange.emit($event)"
     placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
     class="uuid-input"
   />
-  
+
   @if (!readonly && !disabled) {
-    <button 
-      mat-icon-button 
-      matSuffix 
+    <button
+      mat-icon-button
+      matSuffix
       (click)="generateUuid()"
       matTooltip="Generate new UUID"
       type="button"
@@ -22,13 +23,13 @@
       <mat-icon>refresh</mat-icon>
     </button>
   }
-  
+
   @if (value && validateUuid(value)) {
     <mat-hint align="end">
       UUID {{ getUuidVersion(value) ? 'v' + getUuidVersion(value) : 'version unknown' }}
     </mat-hint>
   }
-  
+
   @if (value && !validateUuid(value)) {
     <mat-error>Invalid UUID format</mat-error>
   }
diff --git a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css
index 82dac759f..893313654 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css
+++ b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.css
@@ -1,3 +1,11 @@
 .out-of-threshold {
-  color: #f44336;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.out-of-threshold__icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html
index c98316b79..55d954de1 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.html
@@ -1 +1,5 @@
-<span class="field-view-value" [class.out-of-threshold]="isOutOfThreshold">{{displayValue}}</span>
+<span class="field-view-value" [class.out-of-threshold]="!!isOutOfThreshold">
+    {{displayValue}}
+    <mat-icon *ngIf="isOutOfThreshold === 'down'" class="out-of-threshold__icon">north</mat-icon>
+    <mat-icon *ngIf="isOutOfThreshold === 'up'" class="out-of-threshold__icon">south</mat-icon>
+</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts
index 011036e74..1cd47b51a 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/number/number.component.ts
@@ -1,5 +1,8 @@
 import { Component, Injectable } from '@angular/core';
+
 import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
 import convert from 'convert';
 
 @Injectable()
@@ -7,7 +10,7 @@ import convert from 'convert';
   selector: 'app-number-record-view',
   templateUrl: './number.component.html',
   styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './number.component.css'],
-  imports: []
+  imports: [CommonModule, MatIconModule]
 })
 export class NumberRecordViewComponent extends BaseRecordViewFieldComponent {
 
@@ -33,7 +36,7 @@ export class NumberRecordViewComponent extends BaseRecordViewFieldComponent {
     }
   }
 
-  get isOutOfThreshold(): boolean {
+  get isOutOfThreshold(): 'up' | 'down' | false {
     if (this.value == null || this.value === '') {
       return false;
     }
@@ -43,11 +46,11 @@ export class NumberRecordViewComponent extends BaseRecordViewFieldComponent {
     const numValue = parseFloat(this.value);
 
     if (thresholdMin !== undefined && numValue < thresholdMin) {
-      return true;
+      return 'down';
     }
 
     if (thresholdMax !== undefined && numValue > thresholdMax) {
-      return true;
+      return 'up';
     }
 
     return false;
diff --git a/frontend/src/app/components/ui-components/record-view-fields/range/range.component.css b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.css
new file mode 100644
index 000000000..bc99e1d74
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.css
@@ -0,0 +1,64 @@
+.range-display-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.range-value-label {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: 500;
+}
+
+.range-progress-bar {
+  height: 8px;
+  border-radius: 4px;
+  min-width: 160px;
+}
+
+/* Material progress bar specific styles */
+.range-progress-bar.mat-mdc-progress-bar {
+  height: 8px;
+}
+
+/* Light theme progress bar styles */
+.range-progress-bar {
+  --mdc-linear-progress-active-indicator-color: var(--color-accentedPalette-300);
+  --mdc-linear-progress-track-color: #e0e0e0;
+  --mdc-linear-progress-active-indicator-height: 8px;
+  --mdc-linear-progress-track-height: 8px;
+}
+
+/* Override Material default styles */
+.range-progress-bar ::ng-deep .mdc-linear-progress {
+  height: 8px !important;
+}
+
+.range-progress-bar ::ng-deep .mdc-linear-progress__bar {
+  height: 8px !important;
+}
+
+.range-progress-bar ::ng-deep .mdc-linear-progress__bar-inner {
+  border-top-width: 8px !important;
+}
+
+.range-progress-bar ::ng-deep .mdc-linear-progress__buffer {
+  height: 8px !important;
+}
+
+.range-progress-bar ::ng-deep .mdc-linear-progress__buffer-bar {
+  height: 8px !important;
+}
+
+/* Dark theme styles */
+@media (prefers-color-scheme: dark) {
+  .range-value-label {
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .range-progress-bar {
+    --mdc-linear-progress-active-indicator-color: var(--color-accentedPalette-700);
+    --mdc-linear-progress-track-color: rgba(255, 255, 255, 0.12);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-view-fields/range/range.component.html b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.html
new file mode 100644
index 000000000..673c6a710
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.html
@@ -0,0 +1,8 @@
+<div class="range-display-container">
+  <div class="range-value-label">{{ displayValue }}</div>
+  <mat-progress-bar 
+    mode="determinate" 
+    [value]="getProgressValue()"
+    class="range-progress-bar">
+  </mat-progress-bar>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts
new file mode 100644
index 000000000..8ba3118d5
--- /dev/null
+++ b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts
@@ -0,0 +1,69 @@
+import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
+
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+@Component({
+  selector: 'app-range-record-view',
+  standalone: true,
+  templateUrl: './range.component.html',
+  styleUrls: ['./range.component.css'],
+  imports: [
+    CommonModule,
+    MatProgressBarModule
+  ],
+})
+export class RangeRecordViewComponent extends BaseRecordViewFieldComponent implements OnInit, OnChanges {
+  @Input() declare value: number;
+  static type = 'range';
+
+  public min: number = 0;
+  public max: number = 100;
+  public step: number = 1;
+  public displayValue: string = '';
+
+  ngOnInit(): void {
+    this._parseWidgetParams();
+    this._updateDisplayValue();
+  }
+
+  ngOnChanges(): void {
+    this._parseWidgetParams();
+    this._updateDisplayValue();
+  }
+
+  public getProgressValue(): number {
+    const numValue = Number(this.value) || 0;
+    const range = this.max - this.min;
+    if (range === 0) return 0;
+    const progress = ((numValue - this.min) / range) * 100;
+    // Ensure progress is between 0 and 100
+    return Math.max(0, Math.min(100, progress));
+  }
+
+  private _parseWidgetParams(): void {
+    if (this.widgetStructure?.widget_params) {
+      try {
+        const params = this.widgetStructure.widget_params;
+        if (params.min !== undefined) {
+          this.min = Number(params.min) || 0;
+        }
+        if (params.max !== undefined) {
+          this.max = Number(params.max) || 100;
+        }
+        if (params.step !== undefined) {
+          this.step = Number(params.step) || 1;
+        }
+      } catch (error) {
+        console.error('Failed to parse widget params:', error);
+      }
+    }
+  }
+
+  private _updateDisplayValue(): void {
+    const numValue = Number(this.value) || 0;
+    this.displayValue = `${numValue} / ${this.max}`;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
index 82dac759f..bc463bdea 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
@@ -1,3 +1,11 @@
 .out-of-threshold {
-  color: #f44336;
-}
\ No newline at end of file
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.out-of-threshold__icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
index 8e72705c6..50af36655 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
@@ -1,5 +1,9 @@
 <div class="field-display">
-  <span class="field-value" [class.out-of-threshold]="isOutOfThreshold">{{displayValue}}</span>
+  <span class="field-value" [class.out-of-threshold]="!!isOutOfThreshold">
+    {{displayValue}}
+    <mat-icon *ngIf="isOutOfThreshold === 'down'" class="out-of-threshold__icon">south</mat-icon>
+    <mat-icon *ngIf="isOutOfThreshold === 'up'" class="out-of-threshold__icon">north</mat-icon>
+  </span>
   <button type="button" mat-icon-button
       class="field-copy-button"
       matTooltip="Copy"
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
index 749e4e3a2..a90dbd0dd 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
@@ -1,5 +1,6 @@
 import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -10,17 +11,17 @@ import convert from 'convert';
   selector: 'app-display-number',
   templateUrl: './number.component.html',
   styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './number.component.css'],
-  imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+  imports: [CommonModule, ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
 })
 export class NumberDisplayComponent extends BaseTableDisplayFieldComponent {
-  
+
   get displayValue(): string {
     if (this.value == null || this.value === '') {
       return '—';
     }
 
     const unit = this.widgetStructure?.widget_params?.unit;
-    
+
     if (!unit) {
       return this.value.toString();
     }
@@ -36,7 +37,7 @@ export class NumberDisplayComponent extends BaseTableDisplayFieldComponent {
     }
   }
 
-  get isOutOfThreshold(): boolean {
+  get isOutOfThreshold(): 'up' | 'down' | false {
     if (this.value == null || this.value === '') {
       return false;
     }
@@ -45,12 +46,20 @@ export class NumberDisplayComponent extends BaseTableDisplayFieldComponent {
     const thresholdMax = this.widgetStructure?.widget_params?.threshold_max;
     const numValue = parseFloat(this.value);
 
-    if (thresholdMin !== undefined && numValue < thresholdMin) {
-      return true;
+    if (thresholdMin !== null && thresholdMax !== null && numValue < thresholdMin) {
+      return 'down';
+    }
+
+    if (thresholdMin && thresholdMax === null && numValue < thresholdMin) {
+      return 'down';
+    }
+
+    if (thresholdMax !== null && thresholdMin !== null && numValue > thresholdMax) {
+      return 'up';
     }
 
-    if (thresholdMax !== undefined && numValue > thresholdMax) {
-      return true;
+    if (thresholdMax && thresholdMin === null && numValue > thresholdMax) {
+      return 'up';
     }
 
     return false;
diff --git a/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css b/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css
index 136f0fa09..b897a7ac8 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/range/range.component.css
@@ -23,7 +23,7 @@
 
 /* Light theme progress bar styles */
 .range-progress-bar {
-  --mdc-linear-progress-active-indicator-color: #1976d2;
+  --mdc-linear-progress-active-indicator-color: var(--color-accentedPalette-300);
   --mdc-linear-progress-track-color: #e0e0e0;
   --mdc-linear-progress-active-indicator-height: 8px;
   --mdc-linear-progress-track-height: 8px;
@@ -57,7 +57,7 @@
   }
 
   .range-progress-bar {
-    --mdc-linear-progress-active-indicator-color: #90caf9;
+    --mdc-linear-progress-active-indicator-color: var(--color-accentedPalette-700);
     --mdc-linear-progress-track-color: rgba(255, 255, 255, 0.12);
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/consts/record-view-types.ts b/frontend/src/app/consts/record-view-types.ts
index e0598c62d..466a350b3 100644
--- a/frontend/src/app/consts/record-view-types.ts
+++ b/frontend/src/app/consts/record-view-types.ts
@@ -15,11 +15,12 @@ import { NumberRecordViewComponent } from '../components/ui-components/record-vi
 import { PasswordRecordViewComponent } from '../components/ui-components/record-view-fields/password/password.component';
 import { PhoneRecordViewComponent } from '../components/ui-components/record-view-fields/phone/phone.component';
 import { PointRecordViewComponent } from '../components/ui-components/record-view-fields/point/point.component';
+import { RangeRecordViewComponent } from '../components/ui-components/record-view-fields/range/range.component';
 import { SelectRecordViewComponent } from '../components/ui-components/record-view-fields/select/select.component';
 import { StaticTextRecordViewComponent } from '../components/ui-components/record-view-fields/static-text/static-text.component';
 import { TextRecordViewComponent } from 'src/app/components/ui-components/record-view-fields/text/text.component';
-import { TimeRecordViewComponent } from '../components/ui-components/record-view-fields/time/time.component';
 import { TimeIntervalRecordViewComponent } from '../components/ui-components/record-view-fields/time-interval/time-interval.component';
+import { TimeRecordViewComponent } from '../components/ui-components/record-view-fields/time/time.component';
 import { UrlRecordViewComponent } from '../components/ui-components/record-view-fields/url/url.component';
 import { UuidRecordViewComponent } from '../components/ui-components/record-view-fields/uuid/uuid.component';
 
@@ -46,6 +47,7 @@ export const UIwidgets = {
     Foreign_key: ForeignKeyRecordViewComponent,
     Color: ColorRecordViewComponent,
     UUID: UuidRecordViewComponent,
+    Range: RangeRecordViewComponent
 }
 
 export const recordViewFieldTypes = {

From 826cfa2d57e397625fe0db2f6a1fc0cc35107178 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Tue, 26 Aug 2025 18:44:26 +0300
Subject: [PATCH 05/11] text, long-text: position char counter

---
 .../long-text/long-text.component.css               | 13 +++++++++++++
 .../long-text/long-text.component.html              |  3 ++-
 .../record-edit-fields/text/text.component.css      |  4 ++++
 .../record-edit-fields/text/text.component.html     |  2 +-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css
index 1d5734f00..c07e4f255 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css
@@ -1,3 +1,16 @@
 .form-field {
+    position: relative;
     width: 100%;
+}
+
+.long-textarea {
+    margin-bottom: 20px;
+}
+
+.counter {
+    position: absolute;
+    bottom: 8px;
+    font-size: 12px;
+    width: 90%;
+    background: #fff;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
index 549be2a83..782c52c9f 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
@@ -2,6 +2,7 @@
     <mat-label>{{normalizedLabel}}</mat-label>
     <textarea matInput name="{{label}}-{{key}}"
         #textareaField="ngModel"
+        class="long-textarea"
         [rows]="rowsCount"
         [maxlength]="maxLength"
         textValidator
@@ -11,8 +12,8 @@
         [required]="required" [disabled]="disabled" [readonly]="readonly"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
     </textarea>
+    <div *ngIf="maxLength && value" class="counter">{{value.length}} / {{maxLength}}</div>
     <mat-error *ngIf="textareaField.errors?.['required']">This field is required.</mat-error>
     <mat-error *ngIf="textareaField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
     <mat-error *ngIf="textareaField.errors?.['invalidPattern'] || textareaField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>
-    <mat-hint *ngIf="maxLength && value" align="end">{{value.length}} / {{maxLength}}</mat-hint>
 </mat-form-field>
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css
index d1e2ca29c..f8e826b53 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css
@@ -1,3 +1,7 @@
 .text-form-field {
     width: 100%;
+}
+
+.counter {
+    margin-right: 16px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
index a476335d2..7e1158545 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
@@ -9,8 +9,8 @@
         [regexPattern]="regexPattern"
         attr.data-testid="record-{{label}}-text"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
+    <div matSuffix *ngIf="maxLength && value" class="counter">{{value.length}} / {{maxLength}}</div>
     <mat-error *ngIf="textField.errors?.['required']">This field is required.</mat-error>
     <mat-error *ngIf="textField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
     <mat-error *ngIf="textField.errors?.['invalidPattern'] || textField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>
-    <mat-hint *ngIf="maxLength && value" align="end">{{value.length}} / {{maxLength}}</mat-hint>
 </mat-form-field>
\ No newline at end of file

From d834d7d255cf71d5a63398789bafbeb74c21286f Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Wed, 27 Aug 2025 11:01:09 +0000
Subject: [PATCH 06/11] fix: correct boolean widget configuration and parameter
 parsing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed JSON syntax error in boolean widget default parameters (missing comma)
- Removed unnecessary 'structure' nesting from boolean widget configuration
- Improved parameter parsing in BooleanEditComponent and BooleanFilterComponent
- Fixed parameter naming inconsistency (use snake_case 'invert_colors' consistently)
- Removed backward compatibility code for camelCase and nested parameters

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../db-table-widgets.component.ts                 |  6 ++----
 .../filter-fields/boolean/boolean.component.ts    | 12 +++++++++++-
 .../boolean/boolean.component.ts                  | 15 +++++++++------
 .../boolean/boolean.component.ts                  | 10 +++++++++-
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
index 01df71c45..c0a7dfb55 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
@@ -92,10 +92,8 @@ export class DbTableWidgetsComponent implements OnInit {
 // - invert_colors: Swap the color scheme (typically green=Yes, red=No becomes red=Yes, green=No)
 
 {
-	"structure": {
-		"allow_null": false
-		"invert_colors": false,
-	}
+	"allow_null": false,
+	"invert_colors": false
 }
 `,
     Code:
diff --git a/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts
index dba00a20a..ca4e4e400 100644
--- a/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts
@@ -30,7 +30,17 @@ export class BooleanFilterComponent extends BaseFilterFieldComponent {
     super.ngOnInit();
     this.connectionType = this._connections.currentConnection.type;
     this.setBooleanValue();
-    this.isRadiogroup = (this.structure?.allow_null) || !!(this.widgetStructure?.widget_params?.structure?.allow_null);
+    
+    // Parse widget parameters if available
+    let parsedParams = null;
+    if (this.widgetStructure?.widget_params) {
+      parsedParams = typeof this.widgetStructure.widget_params === 'string' 
+        ? JSON.parse(this.widgetStructure.widget_params) 
+        : this.widgetStructure.widget_params;
+    }
+    
+    // Check allow_null from either structure or widget params
+    this.isRadiogroup = (this.structure?.allow_null) || !!(parsedParams?.allow_null);
   }
 
   setBooleanValue() {
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
index 06734dee6..563263813 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
@@ -40,16 +40,19 @@ export class BooleanEditComponent extends BaseEditFieldComponent {
 
     this.onFieldChange.emit(this.value);
 
-    this.isRadiogroup = (this.structure?.allow_null) || !!(this.widgetStructure?.widget_params?.structure?.allow_null);
-
-    // Parse widget parameters for invert_colors option
+    // Parse widget parameters if available
+    let parsedParams = null;
     if (this.widgetStructure?.widget_params) {
-      const params = typeof this.widgetStructure.widget_params === 'string' 
+      parsedParams = typeof this.widgetStructure.widget_params === 'string' 
         ? JSON.parse(this.widgetStructure.widget_params) 
         : this.widgetStructure.widget_params;
-      
-      this.invertColors = params.invert_colors === true;
     }
+
+    // Check allow_null from either structure or widget params
+    this.isRadiogroup = (this.structure?.allow_null) || !!(parsedParams?.allow_null);
+
+    // Check invert_colors from widget params
+    this.invertColors = parsedParams?.invert_colors === true;
   }
 
   onToggleChange(optionValue: boolean): void {
diff --git a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts
index b56ddec31..5270c0239 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.ts
@@ -16,6 +16,14 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 })
 export class BooleanDisplayComponent extends BaseTableDisplayFieldComponent {
   get invertColors(): boolean {
-    return this.widgetStructure?.widget_params?.invertColors === true;
+    // Parse widget parameters if available
+    if (this.widgetStructure?.widget_params) {
+      const params = typeof this.widgetStructure.widget_params === 'string' 
+        ? JSON.parse(this.widgetStructure.widget_params) 
+        : this.widgetStructure.widget_params;
+      
+      return params?.invert_colors === true;
+    }
+    return false;
   }
 }

From 57c986aec27dbb5efdeb6434fce7a5b25f15680d Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Wed, 27 Aug 2025 12:30:37 +0000
Subject: [PATCH 07/11] feat: show character counter only when approaching
 limit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Display character counter for text and long-text widgets only when less than 100 characters remain until the maximum length limit

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../record-edit-fields/long-text/long-text.component.html       | 2 +-
 .../ui-components/record-edit-fields/text/text.component.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
index 782c52c9f..036c058e4 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
@@ -12,7 +12,7 @@
         [required]="required" [disabled]="disabled" [readonly]="readonly"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
     </textarea>
-    <div *ngIf="maxLength && value" class="counter">{{value.length}} / {{maxLength}}</div>
+    <div *ngIf="maxLength && value && (maxLength - value.length) < 100" class="counter">{{value.length}} / {{maxLength}}</div>
     <mat-error *ngIf="textareaField.errors?.['required']">This field is required.</mat-error>
     <mat-error *ngIf="textareaField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
     <mat-error *ngIf="textareaField.errors?.['invalidPattern'] || textareaField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
index 7e1158545..18e88753b 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
@@ -9,7 +9,7 @@
         [regexPattern]="regexPattern"
         attr.data-testid="record-{{label}}-text"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
-    <div matSuffix *ngIf="maxLength && value" class="counter">{{value.length}} / {{maxLength}}</div>
+    <div matSuffix *ngIf="maxLength && value && (maxLength - value.length) < 100" class="counter">{{value.length}} / {{maxLength}}</div>
     <mat-error *ngIf="textField.errors?.['required']">This field is required.</mat-error>
     <mat-error *ngIf="textField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
     <mat-error *ngIf="textField.errors?.['invalidPattern'] || textField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>

From d8c4c43b6e1a02e6202ba58a0ab019d0397af977 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Wed, 27 Aug 2025 12:46:01 +0000
Subject: [PATCH 08/11] fix: ensure character counter only shows with valid
 limit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add explicit check that maxLength is greater than 0 to ensure the character counter only displays when a valid limit is properly defined

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../record-edit-fields/long-text/long-text.component.html       | 2 +-
 .../ui-components/record-edit-fields/text/text.component.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
index 036c058e4..5992b3971 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
@@ -12,7 +12,7 @@
         [required]="required" [disabled]="disabled" [readonly]="readonly"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
     </textarea>
-    <div *ngIf="maxLength && value && (maxLength - value.length) < 100" class="counter">{{value.length}} / {{maxLength}}</div>
+    <div *ngIf="maxLength && maxLength > 0 && value && (maxLength - value.length) < 100" class="counter">{{value.length}} / {{maxLength}}</div>
     <mat-error *ngIf="textareaField.errors?.['required']">This field is required.</mat-error>
     <mat-error *ngIf="textareaField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
     <mat-error *ngIf="textareaField.errors?.['invalidPattern'] || textareaField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
index 18e88753b..49c432cb0 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
@@ -9,7 +9,7 @@
         [regexPattern]="regexPattern"
         attr.data-testid="record-{{label}}-text"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
-    <div matSuffix *ngIf="maxLength && value && (maxLength - value.length) < 100" class="counter">{{value.length}} / {{maxLength}}</div>
+    <div matSuffix *ngIf="maxLength && maxLength > 0 && value && (maxLength - value.length) < 100" class="counter">{{value.length}} / {{maxLength}}</div>
     <mat-error *ngIf="textField.errors?.['required']">This field is required.</mat-error>
     <mat-error *ngIf="textField.errors?.['maxlength']">Maximum length is {{maxLength}} characters.</mat-error>
     <mat-error *ngIf="textField.errors?.['invalidPattern'] || textField.errors?.[('invalid' + validateType)]">{{getValidationErrorMessage()}}</mat-error>

From d56bf2e2ed12d0c2bd1aecd603e2b8a8fdfed8d6 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Wed, 27 Aug 2025 12:49:12 +0000
Subject: [PATCH 09/11] fix: remove invertColors from boolean edit component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove invertColors property and styling from BooleanEditComponent since this option is only needed for display purposes, not during editing

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../record-edit-fields/boolean/boolean.component.html         | 4 ++--
 .../record-edit-fields/boolean/boolean.component.ts           | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html
index d1f5cf6f0..375b23a88 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isRadiogroup; else checkboxElement" class="radio-line" [class.invert-colors]="invertColors">
+<div *ngIf="isRadiogroup; else checkboxElement" class="radio-line">
     <label id="">{{normalizedLabel}}</label>
     <mat-button-toggle-group name="{{label}}-{{key}}"
         attr.data-testid="record-{{label}}-boolean-radio-group"
@@ -11,7 +11,7 @@
 </div>
 
 <ng-template #checkboxElement>
-    <div class="radio-line" [class.invert-colors]="invertColors">
+    <div class="radio-line">
         <label id="">{{normalizedLabel}}</label>
         <mat-button-toggle-group name="{{label}}-{{key}}"
             attr.data-testid="record-{{label}}-boolean-radio-group"
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
index 563263813..e2ec84d8a 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
@@ -17,7 +17,6 @@ export class BooleanEditComponent extends BaseEditFieldComponent {
   @Input() value: boolean | number | string | null;
 
   public isRadiogroup: boolean;
-  public invertColors: boolean = false;
   private connectionType: DBtype;
 
   constructor(
@@ -50,9 +49,6 @@ export class BooleanEditComponent extends BaseEditFieldComponent {
 
     // Check allow_null from either structure or widget params
     this.isRadiogroup = (this.structure?.allow_null) || !!(parsedParams?.allow_null);
-
-    // Check invert_colors from widget params
-    this.invertColors = parsedParams?.invert_colors === true;
   }
 
   onToggleChange(optionValue: boolean): void {

From de73678bc942ba6908330c9c6ec5162971085fb0 Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Thu, 28 Aug 2025 12:27:33 +0300
Subject: [PATCH 10/11] text validator: take out text validator from directive

---
 .../directives/text-validator.directive.ts    | 56 +++----------------
 frontend/src/app/validators/text.validator.ts | 55 ++++++++++++++++++
 frontend/src/app/validators/url.validator.ts  |  4 +-
 3 files changed, 63 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/app/validators/text.validator.ts

diff --git a/frontend/src/app/directives/text-validator.directive.ts b/frontend/src/app/directives/text-validator.directive.ts
index 311e95a0b..1d46fc64e 100644
--- a/frontend/src/app/directives/text-validator.directive.ts
+++ b/frontend/src/app/directives/text-validator.directive.ts
@@ -1,7 +1,10 @@
-import { Directive, Input } from '@angular/core';
-import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
 import * as validator from 'validator';
 
+import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
+import { Directive, Input } from '@angular/core';
+
+import { textValidation } from '../validators/text.validator';
+
 @Directive({
   selector: '[textValidator][ngModel]',
   providers: [
@@ -15,53 +18,8 @@ import * as validator from 'validator';
 export class TextValidatorDirective implements Validator {
   @Input('validateType') validateType: string | null = null;
   @Input('regexPattern') regexPattern: string | null = null;
-  
-  validate(control: AbstractControl): ValidationErrors | null {
-    if (!control.value || control.value === '') {
-      return null;
-    }
-
-    if (!this.validateType) {
-      return null;
-    }
-
-    const stringValue = String(control.value);
 
-    // Special case for regex validation
-    if (this.validateType === 'regex') {
-      if (!this.regexPattern) {
-        return null;
-      }
-      try {
-        const regex = new RegExp(this.regexPattern);
-        if (!regex.test(stringValue)) {
-          return { invalidPattern: true };
-        }
-      } catch (error) {
-        console.warn('Invalid regex pattern:', error);
-        return null;
-      }
-      return null;
-    }
-
-    // Check if validator has this method
-    const validatorMethod = validator[this.validateType];
-    if (typeof validatorMethod !== 'function') {
-      console.warn(`Unknown validator method: ${this.validateType}`);
-      return null;
-    }
-
-    try {
-      // Call the validator method
-      const isValid = validatorMethod(stringValue);
-      if (!isValid) {
-        return { [`invalid${this.validateType}`]: true };
-      }
-    } catch (error) {
-      console.warn(`Validation error for ${this.validateType}:`, error);
-      return null;
-    }
-
-    return null;
+  validate(control: AbstractControl): ValidationErrors | null {
+    return textValidation(this.validateType, this.regexPattern)(control);
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/validators/text.validator.ts b/frontend/src/app/validators/text.validator.ts
new file mode 100644
index 000000000..f40ddf7fd
--- /dev/null
+++ b/frontend/src/app/validators/text.validator.ts
@@ -0,0 +1,55 @@
+import * as validator from 'validator';
+
+import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
+
+export function textValidation(validateType: string, regexPattern: string):ValidatorFn {
+    return (control: AbstractControl) : ValidationErrors | null=> {
+
+        if (!control.value || control.value === '') {
+            return null;
+        }
+
+        if (!validateType) {
+            return null;
+        }
+
+        const stringValue = String(control.value);
+
+        // Special case for regex validation
+        if (validateType === 'regex') {
+        if (!regexPattern) {
+            return null;
+        }
+        try {
+            const regex = new RegExp(regexPattern);
+            if (!regex.test(stringValue)) {
+            return { invalidPattern: true };
+            }
+        } catch (error) {
+            console.warn('Invalid regex pattern:', error);
+            return null;
+        }
+        return null;
+        }
+
+        // Check if validator has this method
+        const validatorMethod = validator[validateType];
+        if (typeof validatorMethod !== 'function') {
+        console.warn(`Unknown validator method: ${validateType}`);
+        return null;
+        }
+
+        try {
+        // Call the validator method
+        const isValid = validatorMethod(stringValue);
+        if (!isValid) {
+            return { [`invalid${validateType}`]: true };
+        }
+        } catch (error) {
+        console.warn(`Validation error for ${validateType}:`, error);
+        return null;
+        }
+
+        return null;
+    }
+}
diff --git a/frontend/src/app/validators/url.validator.ts b/frontend/src/app/validators/url.validator.ts
index 1b8a6c9b7..a647ac505 100644
--- a/frontend/src/app/validators/url.validator.ts
+++ b/frontend/src/app/validators/url.validator.ts
@@ -1,13 +1,11 @@
 import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
 
-import isFQDN from 'validator/lib/isFQDN';
-
 export function urlValidation(prefix: string = ''):ValidatorFn {
     return (control: AbstractControl) : ValidationErrors | null=> {
 
         if (control.value) {
             let url = (control.value as string);
-            
+
             // If there's a prefix, prepend it to the URL for validation
             const fullUrl = prefix ? prefix + url : url;
 

From 5a6da7af1161937ba37e516f989e61f5a4b7c2ab Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Thu, 28 Aug 2025 13:19:42 +0300
Subject: [PATCH 11/11] fix red colors and dark theme

---
 .../db-table-ai-panel.component.css           | 16 +++++++++++--
 .../db-table-import-dialog.component.css      | 13 +++++++++-
 .../widget/widget.component.css               |  4 ----
 .../saved-filters-panel.component.css         | 24 +++++++++++++++----
 .../text/text.component.css                   | 13 +++++++++-
 .../text/text.component.css                   |  2 +-
 frontend/src/custom-theme.scss                |  1 -
 frontend/src/main.ts                          |  4 ++--
 8 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index e07f8f887..944d19b6e 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -123,13 +123,25 @@
 }
 
 .ai-error-message {
-    background-color: var(--color-warnPalette-100);
-    color: var(--color-warnPalette-100-contrast);
     border-radius: 8px;
     padding: 8px 8px 0;
     margin: 4px 0;
 }
 
+@media (prefers-color-scheme: light) {
+    .ai-error-message {
+        background-color: var(--color-warnPalette-100);
+        color: var(--color-warnPalette-100-contrast);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-error-message {
+        background-color: var(--color-warnDarkPalette-200);
+        color: var(--color-warnDarkPalette-200-contrast);
+    }
+}
+
 .ai-message ::ng-deep ol,
 .ai-message ::ng-deep ul {
     padding-left: 28px;
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-import-dialog/db-table-import-dialog.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-import-dialog/db-table-import-dialog.component.css
index 5d0e712dc..96862173a 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-import-dialog/db-table-import-dialog.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-import-dialog/db-table-import-dialog.component.css
@@ -21,7 +21,18 @@
 }
 
 .form__warning {
-    color: var(--color-warnPalette-500);
     margin-top: -12px;
     margin-bottom: 20px;
+}
+
+@media (prefers-color-scheme: light) {
+    .form__warning {
+        color: var(--color-warnPalette-500);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .form__warning {
+        color: var(--color-warnDarkPalette-500);
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
index 8f7c02808..4ceacd56f 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
@@ -11,10 +11,6 @@
     padding: 8px 4px;
 }
 
-/* .widget-type__docs-link {
-    color: var(--color-accentedDarkPalette-500);
-} */
-
 .code-editor-box {
     display: block;
     border: 1px solid rgba(0, 0, 0, 0.38);
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
index 86d585cf0..4e50b5293 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
@@ -11,13 +11,29 @@
 }
 
 .saved-filters-list__first-time-button {
-    background: var(--color-accentedPalette-50);
-    border: 1px dashed var(--color-accentedPalette-300);
     transition: background 0.3s ease;
 }
 
-.saved-filters-list__first-time-button:hover {
-    background: var(--color-accentedPalette-100) !important;
+@media (prefers-color-scheme: light) {
+    .saved-filters-list__first-time-button {
+        background: var(--color-accentedPalette-50);
+        border: 1px dashed var(--color-accentedPalette-300);
+    }
+
+    .saved-filters-list__first-time-button:hover {
+        background: var(--color-accentedPalette-100) !important;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .saved-filters-list__first-time-button {
+        background: var(--color-accentedPalette-900);
+        border: 1px dashed var(--color-accentedPalette-600);
+    }
+
+    .saved-filters-list__first-time-button:hover {
+        background: var(--color-accentedPalette-800) !important;
+    }
 }
 
 /* .saved-filters-tabs {
diff --git a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css
index 944378e53..f6622792a 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css
+++ b/frontend/src/app/components/ui-components/record-view-fields/text/text.component.css
@@ -1,6 +1,17 @@
 .validation-error {
-  color: #f44336;
   text-decoration: underline;
   text-decoration-style: wavy;
   text-underline-offset: 2px;
+}
+
+@media (prefers-color-scheme: light) {
+  .validation-error {
+    color: var(--color-warnPalette-500);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+    .validation-error {
+        color: var(--color-warnDarkPalette-500);
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css
index 944378e53..fc157be83 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css
@@ -1,5 +1,5 @@
 .validation-error {
-  color: #f44336;
+  color: var(--color-warnPalette-500);
   text-decoration: underline;
   text-decoration-style: wavy;
   text-underline-offset: 2px;
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index 10de3cc9a..c4304fe5b 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -8,7 +8,6 @@ $md-app-primary-color: palette.createpalette('primaryPalette');
 $md-app-accented-color: palette.createpalette('accentedPalette');
 $md-app-warn-color: palette.createpalette('warnPalette');
 $md-app-white-color: palette.createpalette('whitePalette');
-// $md-app-accented-dark-color: palette.createpalette('accentedDarkPalette');
 $md-app-warn-dark-color: palette.createpalette('warnDarkPalette');
 
 $custom-palette-primary: mat.m2-define-palette($md-app-primary-color);
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 67b51ccb0..05ce051df 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -43,10 +43,10 @@ const saasExtraProviders = (environment as any).saas ? [
   },
 ] : [];
 const colorConfig: IColorConfig<Palettes, Colors> = {
-  palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC', warnPalette: '#B71C1C', whitePalette: '#FFFFFF', accentedDarkPalette: '#C176FC', warnDarkPalette: '#E53935' },
+  palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC', warnPalette: '#B71C1C', whitePalette: '#FFFFFF', warnDarkPalette: '#E53935' },
   simpleColors: { myColorName: '#2e959a' },
 };
-type Palettes = { primaryPalette: string, accentedPalette: string, warnPalette: string, whitePalette: string, accentedDarkPalette: string, warnDarkPalette: string };
+type Palettes = { primaryPalette: string, accentedPalette: string, warnPalette: string, whitePalette: string, warnDarkPalette: string };
 type Colors = { myColorName: string };
 
 const stripeKey = location.host === environment.stagingHost ? 'pk_test_51JM8FBFtHdda1TsBTjVNBFMIAA8cXLNWTmZCF22FCS5swdJIFqMk82ZEeZpvTys7oxlDekdcYIGaQ5MEFz6lWa2s000r6RziCg' : 'pk_live_51JM8FBFtHdda1TsBR7nieMFVFigZAUXbPhQTNvaSyLynIW1lbfzO6rfqqIUn0JAGJRq9mrwKwrVCsDDFOs84M7pE006xDqNgHk'