@fleetbase/ember-ui 0.3.10 → 0.3.12

package/addon/helpers/resolve-component.js

@@ -1,16 +1,34 @@
 import Helper from '@ember/component/helper';
 import { getOwner } from '@ember/application';
 import { ensureSafeComponent } from '@embroider/util';
+import { ExtensionComponent } from '@fleetbase/ember-core/contracts';
 
 export default class ResolveComponentHelper extends Helper {
     compute([value]) {
         const owner = getOwner(this);
 
+        // Handle string form extension components
+        if (typeof value === 'string' && value.startsWith('#extension-component')) {
+            /* eslint-disable no-unused-vars */
+            const [_, engineName, componentPathOrName] = value.split(':');
+            return new ExtensionComponent(engineName, componentPathOrName);
+        }
+
         // If it's a string name, pass through — resolver will handle it.
         if (typeof value === 'string') {
             return value;
         }
 
+        // Handle ExtensionComponent definition (lazy loading)
+        if (value && typeof value === 'object' && value.engine && value.path) {
+            return value;
+        }
+
+        // If it has a component property, recurse
+        if (value && typeof value === 'object' && value.component) {
+            return this.compute([value.component]);
+        }
+
         // If it's a component class or a pre-wrapped safe definition,
         // ensure it's safe for this template's owner and return it.
         if (value && (typeof value === 'function' || typeof value === 'object')) {

package/addon/helpers/set-object-kv.js

@@ -0,0 +1,9 @@
+import { helper } from '@ember/component/helper';
+
+/* eslint-disable no-unused-vars */
+export default helper(function setObjectKv([object, key, value]) {
+    object = {
+        ...object,
+        [key]: value,
+    };
+});

package/addon/helpers/unwrap-coordinates.js

@@ -0,0 +1,249 @@
+import { helper } from '@ember/component/helper';
+import { isArray } from '@ember/array';
+
+const L = window.leaflet || window.L;
+/**
+ * Recursively wraps geographic coordinates so that all longitude values are normalized
+ * to the canonical range of [-180, 180] degrees.
+ *
+ * This function assumes coordinates are provided in GeoJSON order: [lng, lat, ...].
+ * It works in two primary scenarios:
+ *
+ * 1. **Single Coordinate Array:**
+ *    If the input is a coordinate point (an array of numbers where the first element
+ *    is the longitude and the second is the latitude), the function applies the wrap
+ *    formula to the longitude component. Any additional dimensions (such as altitude)
+ *    are preserved.
+ *
+ *    For example:
+ *    ```js
+ *    // Input: [200, 45]  (200° longitude is out-of-range)
+ *    // Output: [-160, 45]
+ *    ```
+ *
+ * 2. **Nested Coordinate Arrays:**
+ *    If the input is an array of coordinate points (e.g. a line string, polygon ring, or
+ *    multi-ring/multi-polygon structure), the function recursively processes each sub-array.
+ *
+ *    For example:
+ *    ```js
+ *    // Input: [[200, 45], [210, 46], [220, 47]]
+ *    // Output: [[-160, 45], [-150, 46], [-140, 47]]
+ *    ```
+ *
+ * If the input is not an array, the function returns it unchanged.
+ *
+ * @param {*} coords - The coordinate or nested array of coordinates to be wrapped.
+ *                     Expected format for a coordinate is [lng, lat, ...].
+ * @returns {*} A new coordinate or nested array of coordinates with longitudes normalized
+ *              to the range [-180, 180]. Non-array inputs are returned as-is.
+ *
+ * @example
+ * // Wrapping a single coordinate:
+ * const coord = [200, 45];
+ * const wrappedCoord = leafletWrapCoordinates(coord);
+ * // wrappedCoord is [-160, 45]
+ *
+ * @example
+ * // Wrapping a polygon ring:
+ * const ring = [
+ *   [200, 45],
+ *   [210, 46],
+ *   [220, 47],
+ *   [200, 45] // closing the ring
+ * ];
+ * const wrappedRing = leafletWrapCoordinates(ring);
+ * // wrappedRing is [[-160, 45], [-150, 46], [-140, 47], [-160, 45]]
+ *
+ * @export
+ */
+export function leafletWrapCoordinates(coords) {
+    // If this is a coordinate point (e.g. [lng, lat, ...])
+    if (isArray(coords) && typeof coords[0] === 'number' && coords.length >= 2) {
+        const lng = coords[0];
+        // Wrap the longitude into [-180, 180]
+        const wrappedLng = ((((lng + 180) % 360) + 360) % 360) - 180;
+        // Return a new coordinate array preserving any extra dimensions (such as altitude)
+        return [wrappedLng, ...coords.slice(1)];
+    }
+    // Otherwise, assume it's a nested array (e.g. a ring or array of rings)
+    else if (isArray(coords)) {
+        return coords.map(leafletWrapCoordinates);
+    }
+    // If it's not an array, just return it.
+    return coords;
+}
+
+/**
+ * Converts a latitude and longitude pair to a projected CRS point using Leaflet's projection.
+ *
+ * @param {number} lat - The latitude value.
+ * @param {number} lng - The longitude value.
+ * @param {Object} [crs=L.CRS.EPSG3857] - The coordinate reference system to use (defaults to EPSG:3857).
+ * @returns {L.Point} The projected CRS point as an instance of L.Point.
+ */
+export function latLngToCRS(lat, lng, crs = L.CRS.EPSG3857) {
+    const latLng = L.latLng(lat, lng);
+    const point = crs.project(latLng);
+    return crs.unproject(point);
+}
+
+/**
+ * Recursively converts an array of geographic coordinates in GeoJSON order ([lng, lat, ...])
+ * to Leaflet's projected CRS coordinates.
+ *
+ * This function expects that the input `coords` is an array containing coordinate arrays
+ * in GeoJSON order. For example:
+ *
+ *   - A single coordinate: [lng, lat, ...]
+ *   - A line string or ring: an array of coordinates, e.g., [[lng, lat], [lng, lat], ...]
+ *   - A nested array for polygons or multipolygons.
+ *
+ * The conversion process involves two steps:
+ *
+ * 1. **Wrapping:**
+ *    The coordinates are first passed through `leafletWrapCoordinates` to ensure that
+ *    all longitude values are normalized to the canonical range of [-180, 180].
+ *
+ * 2. **Projection:**
+ *    The geographic coordinates are then converted to a projected CRS using `latLngToCRS`.
+ *
+ * Depending on the structure of the input, the function returns:
+ *
+ *   - A single projected point (L.Point) if a single coordinate array is provided.
+ *   - An array of projected points if an array of coordinates (e.g., line string) is provided.
+ *   - A nested array of projected points for polygons or multipolygons.
+ *
+ * @param {*} coords - An array of coordinate arrays in GeoJSON order ([lng, lat, ...]).
+ *                     This can be a single coordinate, an array of coordinates, or a nested array.
+ * @returns {*} The coordinate(s) converted to the projected CRS, matching the structure of the input.
+ *
+ * @example
+ * // Converting a single coordinate:
+ * const projectedPoint = unwrapCoordinates([ -80, 26 ]);
+ *
+ * @example
+ * // Converting a line string (ring):
+ * const projectedLine = unwrapCoordinates([
+ *   [ -80, 26 ],
+ *   [ -80.1, 26.1 ],
+ *   [ -80.2, 26.2 ]
+ * ]);
+ *
+ * @example
+ * // Converting a polygon (array of rings):
+ * const projectedPolygon = unwrapCoordinates([
+ *   [
+ *     [ -80, 26 ],
+ *     [ -80.1, 26.1 ],
+ *     [ -80.2, 26.2 ],
+ *     [ -80, 26 ]
+ *   ]
+ * ]);
+ */
+export function leafletUnwrapCoordinates(coords) {
+    if (!isArray(coords)) {
+        // If it's not an array, return it as-is.
+        return coords;
+    }
+
+    // Ensure coordinates are wrapped properly to the canonical [-180, 180] range.
+    coords = leafletWrapCoordinates(coords);
+
+    // If the first element is a number, assume this is a single coordinate [lng, lat, ...].
+    if (typeof coords[0] === 'number') {
+        // Call leafletWrapCoordinates again for safety (though it should already be wrapped).
+        coords = leafletWrapCoordinates(coords);
+        // Note: Since our input is in GeoJSON order ([lng, lat]), we convert by swapping the order.
+        return latLngToCRS(coords[1], coords[0]);
+    }
+
+    // If the first element is an array and its first element is a number,
+    // assume this is an array of coordinates (e.g., a line string or ring).
+    if (isArray(coords[0]) && typeof coords[0][0] === 'number') {
+        return coords.map((c) => latLngToCRS(c[1], c[0]));
+    }
+
+    // Otherwise, assume it's a nested array (e.g., for polygons or multipolygons)
+    return coords.map(leafletUnwrapCoordinates);
+}
+
+/**
+ * Ember helper to "unwrap" coordinate arrays for Leaflet usage.
+ *
+ * This helper converts coordinate data into a form that is compatible with Leaflet’s
+ * coordinate reference system. It supports two types of input:
+ *
+ * 1. **GeoJSON Geometry Object:**
+ *    An object with a `coordinates` property. In this case the coordinates are assumed
+ *    to already be in GeoJSON order ([lng, lat, ...]). The helper unwraps these
+ *    coordinates using `leafletUnwrapCoordinates` and returns a new geometry object
+ *    with the unwrapped coordinates.
+ *
+ * 2. **Array of Coordinates:**
+ *    An array of coordinate arrays (e.g. a line string, ring, or polygon) provided in
+ *    [lat, lng] order. The helper first converts these to GeoJSON order ([lng, lat])
+ *    and then unwraps them using `leafletUnwrapCoordinates`.
+ *
+ * **Note:**
+ * - The unwrapping process adjusts coordinate values to ensure they form a continuous
+ *   representation (for example, when dealing with dateline-crossing geometries).
+ * - If the input is neither an object with a `coordinates` property nor an array,
+ *   it is returned unchanged.
+ *
+ * @param {Array|Object} input - Either:
+ *    - A GeoJSON geometry object with a `coordinates` property, where coordinates are in [lng, lat] order.
+ *    - An array of coordinate arrays in [lat, lng] order.
+ * @returns {Array|Object} A new geometry object or coordinate array with unwrapped coordinates,
+ *                         preserving the structure of the input.
+ *
+ * @example
+ * // Example 1: GeoJSON geometry object input:
+ * let geojson = {
+ *   type: 'Polygon',
+ *   coordinates: [
+ *     [[-80, 26], [-80.1, 26.1], [-80.2, 26.2], [-80, 26]]
+ *   ]
+ * };
+ * let result = unwrapCoordinates([geojson]);
+ *
+ * @example
+ * // Example 2: Array of coordinates in [lat, lng] order:
+ * let coords = [
+ *   [26, -80],
+ *   [26.1, -80.1],
+ *   [26.2, -80.2]
+ * ];
+ * let result = unwrapCoordinates([coords]);
+ */
+export default helper(function unwrapCoordinates([input]) {
+    if (!input) {
+        return input;
+    }
+
+    // If input is an object with a "coordinates" property,
+    // assume it is a GeoJSON geometry where coordinates are in [lng, lat] order.
+    if (typeof input === 'object' && input.coordinates) {
+        const unwrappedCoordinates = leafletUnwrapCoordinates(input.coordinates);
+        return {
+            ...input,
+            coordinates: unwrappedCoordinates,
+        };
+    }
+
+    // Otherwise, assume input is an array of coordinates.
+    // The helper expects these coordinates to be in [lat, lng] order.
+    // Convert them to GeoJSON order ([lng, lat]) before unwrapping.
+    if (isArray(input) && input.length > 0) {
+        if (typeof input[0][0] === 'number') {
+            // Input is an array of coordinates in [lat, lng] order.
+            input = input.map(([latitude, longitude]) => [longitude, latitude]);
+        } else {
+            // If the structure is nested (e.g., for polygons or multipolygons),
+            // reverse the outer array as a fallback. (This branch can be customized as needed.)
+            input = input.reverse();
+        }
+    }
+    const unwrappedCoordinates = leafletUnwrapCoordinates(input);
+    return unwrappedCoordinates;
+});

package/addon/services/dashboard.js

@@ -17,6 +17,7 @@ export default class DashboardService extends Service {
     @service fetch;
     @service notifications;
     @service universe;
+    @service('universe/widget-service') widgetService;
     @service intl;
 
     /**
@@ -52,8 +53,9 @@ export default class DashboardService extends Service {
 
     /**
      * Task for loading dashboards from the store. It sets the current dashboard and checks if adding widget is necessary.
+     * Uses drop modifier to prevent concurrent executions and race conditions.
      */
-    @task *loadDashboards({ defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', extension = 'core' }) {
+    @task({ drop: true }) *loadDashboards({ defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', extension = 'core' }) {
         this.universe.registerDashboard(defaultDashboardId);
 
         const dashboards = yield this.store.query('dashboard', { limit: -1, extension });
@@ -174,10 +176,10 @@ export default class DashboardService extends Service {
     reset() {
         this.currentDashboard = null;
         this.dashboards = [];
-        // unload from store
+        // unload from store - must unload widgets first to avoid orphaned records
         next(() => {
+            this.store.unloadAll('dashboard-widget');
             this.store.unloadAll('dashboard');
-            // this.store.unloadAll('dashboard-widget');
         });
     }
 
@@ -193,20 +195,37 @@ export default class DashboardService extends Service {
         const loadedDashboards = this.store.peekAll('dashboard');
 
         // check for default dashboard loaded in store
-        defaultDashboard = loadedDashboards.find((dashboard) => dashboard && dashboard.id === defaultDashboardId);
-        if (defaultDashboard) {
-            return defaultDashboard;
+        defaultDashboard = loadedDashboards.find((dashboard) => {
+            return dashboard && dashboard.id === defaultDashboardId && !dashboard.isDeleted && !dashboard.isDestroying && !dashboard.isDestroyed;
+        });
+        if (defaultDashboard) return defaultDashboard;
+
+        // Peek existing record in identity map
+        const existingDashboard = this.store.peekRecord('dashboard', defaultDashboardId);
+        // Only return if it's in a valid state (not deleted, destroying, or destroyed)
+        if (existingDashboard && !existingDashboard.isDeleted && !existingDashboard.isDestroying && !existingDashboard.isDestroyed) {
+            return existingDashboard;
         }
 
         // create new default dashboard
-        defaultDashboard = this.store.createRecord('dashboard', {
-            id: defaultDashboardId,
-            uuid: defaultDashboardId,
-            name: defaultDashboardName,
-            is_default: false,
-            user_uuid: 'system',
-            widgets: this._createDefaultDashboardWidgets(defaultDashboardId),
-        });
+        try {
+            defaultDashboard = this.store.createRecord('dashboard', {
+                id: defaultDashboardId,
+                uuid: defaultDashboardId,
+                name: defaultDashboardName,
+                is_default: false,
+                user_uuid: 'system',
+                widgets: this._createDefaultDashboardWidgets(defaultDashboardId),
+            });
+        } catch (error) {
+            // Handle race condition where record was created between our peek and createRecord
+            if (error.message && error.message.includes('already been used')) {
+                defaultDashboard = this.store.peekRecord('dashboard', defaultDashboardId);
+                if (defaultDashboard) return defaultDashboard;
+            }
+            // Re-throw if it's a different error
+            throw error;
+        }
 
         return defaultDashboard;
     }
@@ -217,11 +236,14 @@ export default class DashboardService extends Service {
      * @returns {Array} An array of default dashboard widgets.
      */
     _createDefaultDashboardWidgets(defaultDashboardId = 'dashboard') {
-        const widgets = this.universe.getDefaultWidgets(defaultDashboardId).map((defaultWidget) => {
+        const widgets = this.widgetService.getDefaultWidgets(defaultDashboardId);
+
+        return widgets.map((defaultWidget) => {
+            const existingWidget = this.store.peekRecord('dashboard-widget', defaultWidget.id);
+            if (existingWidget) return existingWidget;
+
             return this.store.createRecord('dashboard-widget', defaultWidget);
         });
-
-        return widgets;
     }
 
     /**

package/addon/styles/components/badge.css

@@ -30,6 +30,8 @@
 }
 
 .status-badge[class*='2'] > span,
+.status-badge.confirmed-status-badge > span,
+.status-badge.confirm-status-badge > span,
 .status-badge.green-status-badge > span,
 .status-badge.resolved-status-badge > span,
 .status-badge.published-status-badge > span,
@@ -49,6 +51,8 @@
 }
 
 .status-badge[class*='2'] > span svg,
+.status-badge.confirmed-status-badge > span svg,
+.status-badge.confirm-status-badge > span svg,
 .status-badge.green-status-badge > span svg,
 .status-badge.resolved-status-badge > span svg,
 .status-badge.published-status-badge > span svg,
@@ -148,6 +152,7 @@
 .status-badge.disputed-status-badge > span,
 .status-badge.inactive-status-badge > span,
 .status-badge.failed-status-badge > span,
+.status-badge.cancelled-status-badge > span,
 .status-badge.canceled-status-badge > span {
     @apply bg-red-800 border-red-700 text-red-100;
 }
@@ -166,11 +171,13 @@
 .status-badge.disabled-status-badge > span svg,
 .status-badge.disputed-status-badge > span svg,
 .status-badge.failed-status-badge > span svg,
+.status-badge.cancelled-status-badge > span svg,
 .status-badge.canceled-status-badge > span svg {
     @apply text-red-300;
 }
 
 .status-badge[class*='4'] > span,
+.status-badge.in-transit-status-badge > span,
 .status-badge.idle-status-badge > span,
 .status-badge.draft-status-badge > span,
 .status-badge.yellow-status-badge > span,
@@ -194,6 +201,7 @@
 }
 
 .status-badge[class*='4'] > span svg,
+.status-badge.in-transit-status-badge > span svg,
 .status-badge.idle-status-badge > span svg,
 .status-badge.draft-status-badge > span svg,
 .status-badge.yellow-status-badge > span svg,

package/addon/styles/components/input.css

@@ -457,6 +457,14 @@ body[data-theme='dark'] .money-input-currency-selector .ember-basic-dropdown-con
     line-height: 1rem;
 }
 
+.emberTagInput.form-input-sm {
+    height: 34px;
+}
+
+.emberTagInput.form-input-sm .emberTagInput-new > input.emberTagInput-input {
+    padding: 0.1rem;
+}
+
 body[data-theme='dark'] .emberTagInput.form-input:disabled,
 body[data-theme='dark'] .emberTagInput.form-input.disabled,
 body[data-theme='dark'] .emberTagInput:disabled,

package/addon/styles/components/table.css

@@ -326,3 +326,186 @@ body[data-theme='dark'] .next-table-wrapper.rounded-b > table > tbody > tr:last-
 .next-table-wrapper.auto-height > table > tbody > tr:last-child > td:last-child {
     border-bottom-right-radius: 0.25rem;
 }
+
+/* Sortable column styles */
+.table-wrapper table thead tr th.is-sortable {
+    @apply cursor-pointer select-none;
+}
+
+.table-wrapper table thead tr th .th-inner-wrapper {
+    @apply flex items-center justify-between;
+}
+
+.table-wrapper table thead tr th .th-content {
+    @apply flex-grow;
+}
+
+.table-wrapper table thead tr th .sort-icon-wrapper {
+    @apply ml-2 flex items-center gap-1 text-gray-400;
+}
+
+.table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
+    @apply font-semibold text-blue-500 bg-blue-100 rounded-full flex items-center justify-center;
+    height: 0.75rem;
+    width: 0.75rem;
+    font-size: 0.5rem;
+    line-height: 0.5rem;
+}
+
+.table-wrapper table thead tr th .sort-icon-wrapper > div:last-child {
+    @apply w-4 h-4 flex flex-col items-center justify-center;
+}
+
+.table-wrapper table thead tr th .sort-icon-wrapper > .sort-icon:first-child {
+    margin-bottom: -7px;
+}
+
+.table-wrapper table thead tr th .sort-icon {
+    @apply text-gray-400;
+}
+
+.table-wrapper table thead tr th:hover .sort-icon {
+    @apply text-gray-300;
+}
+
+.table-wrapper table thead tr th .sort-icon.is-ascending,
+.table-wrapper table thead tr th .sort-icon.is-descending {
+    @apply text-blue-400;
+}
+
+.next-table-wrapper table thead tr th.is-sortable {
+    @apply cursor-pointer select-none;
+}
+
+.next-table-wrapper table thead tr th .th-inner-wrapper {
+    @apply flex items-center justify-between;
+}
+
+.next-table-wrapper table thead tr th .th-content {
+    @apply flex-grow;
+}
+
+.next-table-wrapper table thead tr th .sort-icon-wrapper {
+    @apply ml-2 flex items-center gap-1 text-gray-400;
+}
+
+.next-table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
+    @apply font-semibold text-blue-500 bg-blue-100 rounded-full flex items-center justify-center;
+    height: 0.75rem;
+    width: 0.75rem;
+    font-size: 0.5rem;
+    line-height: 0.5rem;
+}
+
+.next-table-wrapper table thead tr th .sort-icon-wrapper > div:last-child {
+    @apply w-4 h-4 flex flex-col items-center justify-center;
+}
+
+.next-table-wrapper table thead tr th .sort-icon-wrapper .sort-icon:first-child {
+    margin-bottom: -7px;
+}
+
+.next-table-wrapper table thead tr th .sort-icon {
+    @apply text-gray-400;
+}
+
+.next-table-wrapper table thead tr th:hover .sort-icon {
+    @apply text-gray-300;
+}
+
+.next-table-wrapper table thead tr th .sort-icon.is-ascending,
+.next-table-wrapper table thead tr th .sort-icon.is-descending {
+    @apply text-blue-400;
+}
+
+/* Dark theme sortable column styles */
+[data-theme='dark'] .table-wrapper table thead tr th .sort-icon {
+    @apply text-gray-400;
+}
+
+[data-theme='dark'] .table-wrapper table thead tr th:hover .sort-icon {
+    @apply text-gray-100;
+}
+
+[data-theme='dark'] .table-wrapper table thead tr th .sort-icon.is-ascending,
+[data-theme='dark'] .table-wrapper table thead tr th .sort-icon.is-descending {
+    @apply text-blue-400;
+}
+
+[data-theme='dark'] .table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
+    @apply text-blue-100 bg-blue-900;
+}
+
+[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon {
+    @apply text-gray-400;
+}
+
+[data-theme='dark'] .next-table-wrapper table thead tr th:hover .sort-icon {
+    @apply text-gray-100;
+}
+
+[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon.is-ascending,
+[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon.is-descending {
+    @apply text-blue-400;
+}
+
+[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
+    @apply text-blue-100 bg-blue-900;
+}
+
+/* Floating pagination styles */
+.next-table-wrapper.has-floating-pagination {
+    @apply relative pb-16;
+}
+
+.next-table-wrapper .floating-pagination {
+    @apply fixed bottom-4 right-4 z-50;
+    @apply bg-white dark:bg-gray-800;
+    @apply rounded-lg shadow-lg;
+    @apply border border-gray-200 dark:border-gray-700;
+    padding: 0.25rem 0.5rem;
+}
+
+/* Remove default pagination padding when floating */
+.next-table-wrapper .floating-pagination .fleetbase-pagination {
+    @apply p-0;
+}
+
+/* Add spacing between meta info and buttons */
+.next-table-wrapper .floating-pagination .fleetbase-pagination-meta-info {
+    margin-right: 0.75rem;
+}
+
+/* Thin horizontal scrollbar to match vertical scrollbar */
+.next-table-wrapper {
+    overflow-x: auto;
+    overflow-y: visible;
+}
+
+.next-table-wrapper::-webkit-scrollbar {
+    height: 8px; /* Match thin vertical scrollbar */
+}
+
+.next-table-wrapper::-webkit-scrollbar-track {
+    @apply bg-gray-100 dark:bg-gray-700;
+    @apply rounded;
+}
+
+.next-table-wrapper::-webkit-scrollbar-thumb {
+    @apply bg-gray-400 dark:bg-gray-500;
+    @apply rounded;
+}
+
+.next-table-wrapper::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500 dark:bg-gray-400;
+}
+
+/* Firefox thin scrollbar */
+.next-table-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(156 163 175) rgb(243 244 246); /* gray-400 gray-100 */
+}
+
+[data-theme='dark'] .next-table-wrapper {
+    scrollbar-color: rgb(107 114 128) rgb(55 65 81); /* gray-500 gray-700 */
+}