@controleonline/ui-default 1.0.263

package/src/react/components/filters/DateShortcutFilter.styles.js

@@ -0,0 +1,82 @@
+import { StyleSheet } from 'react-native';
+
+const createStyles = themeColors =>
+  StyleSheet.create({
+    customLabel: {
+      color: themeColors.textPrimary,
+      fontSize: 12,
+      lineHeight: 14,
+      fontWeight: '900',
+      textTransform: 'uppercase',
+      letterSpacing: 0.7,
+    },
+    currentDateValue: {
+      color: themeColors.textPrimary,
+      fontSize: 12,
+      lineHeight: 14,
+      fontWeight: '800',
+    },
+    customRangeWrap: {
+      marginTop: 4,
+      paddingTop: 10,
+      borderTopWidth: 1,
+      borderTopColor: themeColors.borderSoft,
+      gap: 10,
+    },
+    customInputsRow: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    customInput: {
+      flex: 1,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      backgroundColor: themeColors.cardBgSoft,
+      color: themeColors.textPrimary,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 13,
+      lineHeight: 16,
+      fontWeight: '700',
+    },
+    validationText: {
+      color: themeColors.danger,
+      fontSize: 12,
+      lineHeight: 14,
+      fontWeight: '700',
+    },
+    customActionsRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      gap: 8,
+    },
+    secondaryButton: {
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      backgroundColor: themeColors.panelBg,
+      paddingHorizontal: 14,
+      paddingVertical: 9,
+    },
+    secondaryButtonText: {
+      color: themeColors.textPrimary,
+      fontSize: 12,
+      lineHeight: 14,
+      fontWeight: '800',
+    },
+    primaryButton: {
+      borderRadius: 999,
+      backgroundColor: themeColors.accent,
+      paddingHorizontal: 14,
+      paddingVertical: 9,
+    },
+    primaryButtonText: {
+      color: themeColors.pillTextDark,
+      fontSize: 12,
+      lineHeight: 14,
+      fontWeight: '900',
+    },
+  });
+
+export default createStyles;

package/src/react/components/filters/DefaultColumnFilter.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { TextInput, View } from 'react-native';
+import {
+  buildOptionsFromColumn,
+  getColumnKey,
+  normalizeOptionKey,
+  normalizeText,
+} from '../inputs/defaultInputUtils';
+import CompactFilterSelector from './CompactFilterSelector';
+import DateShortcutFilter from './DateShortcutFilter';
+import { resolveNextDateFilterValue } from './dateFilterSelection';
+import styles from './DefaultColumnFilter.styles';
+
+const DefaultColumnFilter = ({
+  accentColor = '#2563EB',
+  column,
+  filters = {},
+  getOptionsForColumn = null,
+  onChange = null,
+  storeName = '',
+  style = null,
+}) => {
+  const fieldName = getColumnKey(column);
+
+  if (column?.filter === false || column?.filters === false) {
+    return <View style={style} />;
+  }
+
+  if (column?.inputType === 'date-range' || column?.type === 'range-date') {
+    const filterValue = filters?.[fieldName] || {};
+    return (
+      <View style={[style, styles.filterCell]}>
+        <DateShortcutFilter
+          dense
+          store={storeName}
+          field={fieldName}
+          value={filterValue.shortcut || 'all'}
+          customRange={filterValue.customRange || { from: '', to: '' }}
+          onChange={optionKey =>
+            onChange?.(
+              fieldName,
+              resolveNextDateFilterValue(filterValue, optionKey),
+            )
+          }
+          onCustomRangeChange={range => onChange?.(fieldName, {
+            ...(filterValue || {}),
+            shortcut: 'custom',
+            customRange: range,
+          })}
+        />
+      </View>
+    );
+  }
+
+  if (column?.list) {
+    const rawOptions = buildOptionsFromColumn(column, getOptionsForColumn, storeName);
+    const options = [
+      { key: '', label: global.t?.t(storeName, 'label', 'select') || 'Selecionar' },
+      ...rawOptions,
+    ];
+    const selectedKey = normalizeOptionKey(filters?.[fieldName]);
+    const selected = options.find(option => option.key === selectedKey);
+
+    return (
+      <View style={[style, styles.filterCell]}>
+        <CompactFilterSelector
+          dense
+          store={storeName}
+          field={fieldName}
+          icon="filter"
+          accentColor={accentColor}
+          active={Boolean(selectedKey)}
+          label={selected?.label || options[0]?.label || ''}
+          options={options}
+          selectedKey={selectedKey}
+          onSelect={optionKey => {
+            onChange?.(fieldName, optionKey);
+            return true;
+          }}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[style, styles.filterCell]}>
+      <TextInput
+        style={styles.filterInput}
+        value={normalizeText(filters?.[fieldName])}
+        placeholder={global.t?.t(storeName, 'input', column?.label || fieldName)}
+        onChangeText={value => onChange?.(fieldName, value)}
+      />
+    </View>
+  );
+};
+
+export default DefaultColumnFilter;

package/src/react/components/filters/DefaultColumnFilter.styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  filterCell: {
+    paddingVertical: 4,
+    backgroundColor: '#FFFFFF',
+  },
+  filterInput: {
+    height: 30,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    backgroundColor: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});
+
+export default styles;

package/src/react/components/filters/DefaultExternalFilters.js

@@ -0,0 +1,441 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Modal,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import { resolveThemePalette, withOpacity } from '@controleonline/../../src/styles/branding';
+import { colors } from '@controleonline/../../src/styles/colors';
+import CompactFilterSelector from './CompactFilterSelector';
+import DateShortcutFilter from './DateShortcutFilter';
+import { resolveNextDateFilterValue } from './dateFilterSelection';
+import styles from './DefaultExternalFilters.styles';
+
+const DEFAULT_COMPACT_BREAKPOINT = 768;
+const noop = () => {};
+
+const normalizeText = value => String(value || '').trim();
+const DEFAULT_TRANSLATABLE_FIELDS = new Set([
+  'active',
+  'app',
+  'channel',
+  'displaytype',
+  'featured',
+  'frequency',
+  'invoicetype',
+  'installments',
+  'ordertype',
+  'peopletype',
+  'pricecalculation',
+  'productcondition',
+  'realstatus',
+  'status',
+]);
+
+const getColumnKey = column => column?.key || column?.name || '';
+
+const normalizeColumnKey = value =>
+  normalizeText(value)
+    .replace(/[^a-zA-Z0-9]/g, '')
+    .toLowerCase();
+
+const shouldTranslateOptionLabel = (column, storeName, rawLabel) => {
+  if (column?.translate === false || !normalizeText(rawLabel) || !normalizeText(storeName)) {
+    return false;
+  }
+
+  if (column?.translate === true || Array.isArray(column?.list)) {
+    return true;
+  }
+
+  return [column?.key, column?.name, column?.label]
+    .map(normalizeColumnKey)
+    .filter(Boolean)
+    .some(candidate => DEFAULT_TRANSLATABLE_FIELDS.has(candidate));
+};
+
+const shouldIncludeColumn = column =>
+  Boolean(getColumnKey(column)) &&
+  column?.show !== false &&
+  column?.visible !== false &&
+  column?.externalFilter === true &&
+  column?.filter !== false &&
+  column?.filters !== false;
+
+const normalizeFilterValue = value => {
+  if (value && typeof value === 'object') {
+    return normalizeFilterValue(value.value ?? value.id ?? value['@id'] ?? '');
+  }
+
+  return normalizeText(value);
+};
+
+const isFilledFilterValue = value => {
+  if (Array.isArray(value)) return value.length > 0;
+  if (value && typeof value === 'object') {
+    return Object.values(value).some(isFilledFilterValue);
+  }
+
+  return normalizeText(value) !== '';
+};
+
+const resolveOptionLabel = (column, option, storeName = '') => {
+  if (!option) return '';
+
+  const translateOptionLabel = rawLabel => {
+    const normalizedLabel = normalizeText(rawLabel);
+    if (!shouldTranslateOptionLabel(column, storeName, normalizedLabel)) {
+      return normalizedLabel;
+    }
+
+    return global.t?.t(storeName, 'label', normalizedLabel) || normalizedLabel;
+  };
+
+  if (typeof column?.formatList === 'function') {
+    const formatted = column.formatList(option, null, column);
+    if (formatted && typeof formatted === 'object') {
+      return translateOptionLabel(formatted.label ?? formatted.value);
+    }
+    if (formatted) return translateOptionLabel(formatted);
+  }
+
+  const rawLabel = normalizeText(
+    option.label ??
+      option[column?.searchParam] ??
+      option[column?.name] ??
+      option.name ??
+      option.status ??
+      option.wallet ??
+      option.paymentType ??
+      option.alias ??
+      option.id,
+  );
+
+  return translateOptionLabel(rawLabel);
+};
+
+const buildColumnOptions = (column, options = [], storeName = '') => [
+  {
+    key: '',
+    label: global.t?.t(storeName || 'invoice', 'label', 'select'),
+  },
+  ...(Array.isArray(options) ? options : []).map(option => ({
+    key: normalizeFilterValue(option),
+    label: resolveOptionLabel(column, option, storeName) || '-',
+  })),
+];
+
+const resolveDateState = filterValue => {
+  if (!filterValue || typeof filterValue !== 'object') {
+    return {
+      customRange: { from: '', to: '' },
+      value: 'all',
+    };
+  }
+
+  if (filterValue.shortcut) {
+    return {
+      customRange: filterValue.customRange || { from: '', to: '' },
+      value: filterValue.shortcut,
+    };
+  }
+
+  if (filterValue.start || filterValue.end || filterValue.after || filterValue.before) {
+    return {
+      customRange: {
+        from: filterValue.start || filterValue.after || '',
+        to: filterValue.end || filterValue.before || '',
+      },
+      value: 'custom',
+    };
+  }
+
+  return {
+    customRange: { from: '', to: '' },
+    value: 'all',
+  };
+};
+
+const resolveIcon = column => {
+  const key = getColumnKey(column);
+  if (key === 'status') return 'check-circle';
+  if (key === 'category') return 'tag';
+  if (column?.inputType === 'date-range' || column?.type === 'range-date') return 'calendar';
+  return 'sliders';
+};
+
+const DefaultExternalFilters = ({
+  accentColor = null,
+  compactBreakpoint = DEFAULT_COMPACT_BREAKPOINT,
+  columns = [],
+  dateOptionKeys = ['all', 'today', 'yesterday', '7d', '30d', 'custom'],
+  filters = {},
+  getOptionsForColumn = null,
+  onActiveCountChange = null,
+  onChangeFilters = null,
+  storeName = '',
+}) => {
+  const { width } = useWindowDimensions();
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+  const [isFiltersModalOpen, setIsFiltersModalOpen] = useState(false);
+  const { currentCompany } = peopleStore.getters || {};
+  const { colors: themeColors } = themeStore.getters || {};
+  const themeTokens = useMemo(
+    () => ({...themeColors, ...(currentCompany?.theme?.colors || {})}),
+    [currentCompany?.theme?.colors, themeColors],
+  );
+  const palette = useMemo(
+    () => resolveThemePalette(themeTokens, colors),
+    [themeTokens],
+  );
+  const resolvedAccentColor = accentColor || palette.primary;
+  const surfaceColor = themeTokens['bg-odd-light'] || palette.background;
+  const panelColor = themeTokens['bg-headers-light'] || palette.background;
+  const borderColor = palette.border;
+  const textColor = palette.text;
+  const textSecondaryColor = palette.textSecondary;
+  const onAccentColor = palette.secondary || palette.text;
+  const isCompactView = width > 0 && width <= compactBreakpoint;
+  const filterColumns = useMemo(
+    () => columns.filter(shouldIncludeColumn),
+    [columns],
+  );
+  const activeCount = useMemo(
+    () => filterColumns.filter(column => isFilledFilterValue(filters[getColumnKey(column)])).length,
+    [filterColumns, filters],
+  );
+
+  useEffect(() => {
+    onActiveCountChange?.(activeCount);
+  }, [activeCount, onActiveCountChange]);
+
+  const updateFilter = useCallback((key, value) => {
+    const nextFilters = { ...(filters || {}) };
+    if (!isFilledFilterValue(value)) {
+      delete nextFilters[key];
+    } else {
+      nextFilters[key] = value;
+    }
+    onChangeFilters?.(nextFilters);
+  }, [filters, onChangeFilters]);
+
+  const clearFilters = useCallback(() => {
+    onChangeFilters?.({});
+  }, [onChangeFilters]);
+
+  useEffect(() => {
+    if (!isCompactView) setIsFiltersModalOpen(false);
+  }, [isCompactView]);
+
+  if (filterColumns.length === 0) return null;
+
+  const renderFilterField = (column, compact = false) => {
+    const key = getColumnKey(column);
+    const fieldStyle = compact ? styles.modalField : styles.field;
+
+    if (column.inputType === 'date-range' || column.type === 'range-date') {
+      const dateState = resolveDateState(filters[key]);
+
+      return (
+        <View key={key} style={fieldStyle}>
+          <DateShortcutFilter
+            value={dateState.value}
+            onChange={optionKey => {
+              updateFilter(
+                key,
+                resolveNextDateFilterValue(filters[key], optionKey),
+              );
+            }}
+            customRange={dateState.customRange}
+            onCustomRangeChange={range => {
+              updateFilter(key, {
+                ...(filters[key] || {}),
+                shortcut: 'custom',
+                customRange: range,
+              });
+            }}
+            dense
+            store={storeName}
+            field={key}
+            optionKeys={dateOptionKeys}
+            colors={{
+              accent: resolvedAccentColor,
+              appBg: 'transparent',
+              border: borderColor,
+              borderSoft: withOpacity(borderColor, 0.72),
+              cardBg: palette.background,
+              cardBgSoft: surfaceColor,
+              danger: palette.error,
+              isLight: true,
+              panelBg: panelColor,
+              pillTextDark: onAccentColor,
+              textPrimary: textColor,
+              textSecondary: textSecondaryColor,
+            }}
+          />
+        </View>
+      );
+    }
+
+    if (column.list) {
+      const options = buildColumnOptions(column, getOptionsForColumn?.(column) || [], storeName);
+      const selectedKey = normalizeFilterValue(filters[key]);
+      const selectedLabel =
+        options.find(option => option.key === selectedKey)?.label ||
+        options[0]?.label ||
+        '';
+
+      return (
+        <View key={key} style={fieldStyle}>
+          <CompactFilterSelector
+            icon={resolveIcon(column)}
+            label={selectedLabel}
+            accentColor={resolvedAccentColor}
+            active={Boolean(selectedKey)}
+            dense
+            store={storeName}
+            field={key}
+            options={options}
+            selectedKey={selectedKey}
+            onSelect={optionKey => {
+              updateFilter(key, optionKey);
+              return true;
+            }}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View key={key} style={[fieldStyle, styles.inputWrap, { borderColor, backgroundColor: surfaceColor }]}>
+        <Text style={[styles.inputLabel, { color: textSecondaryColor }]}>
+          {global.t?.t(storeName, 'input', column.label || key)}
+        </Text>
+        <TextInput
+          style={[styles.input, { color: textColor }]}
+          value={normalizeText(filters[key])}
+          onChangeText={value => updateFilter(key, value)}
+          onSubmitEditing={() => onChangeFilters?.(filters)}
+        />
+      </View>
+    );
+  };
+
+  const filterTitle = global.t?.t(storeName, 'label', 'filters');
+  const filterFields = compact => filterColumns.map(column => renderFilterField(column, compact));
+
+  if (isCompactView) {
+    return (
+      <View style={styles.mobileWrap}>
+        <TouchableOpacity
+          style={[
+            styles.mobileButton,
+            { borderColor: borderColor, backgroundColor: surfaceColor },
+            activeCount > 0 ? { borderColor: resolvedAccentColor, backgroundColor: withOpacity(resolvedAccentColor, 0.14) } : null,
+          ]}
+          activeOpacity={0.84}
+          onPress={() => setIsFiltersModalOpen(true)}
+        >
+          <Icon name="filter" size={15} color={activeCount > 0 ? resolvedAccentColor : textSecondaryColor} />
+          <Text
+            style={[
+              styles.mobileButtonText,
+              { color: textColor },
+              activeCount > 0 ? { color: resolvedAccentColor } : null,
+            ]}
+          >
+            {filterTitle}
+          </Text>
+          {activeCount > 0 ? (
+            <View style={[styles.mobileCountBadge, { backgroundColor: resolvedAccentColor }]}>
+              <Text style={styles.mobileCountBadgeText}>{activeCount}</Text>
+            </View>
+          ) : null}
+        </TouchableOpacity>
+
+        <Modal
+          transparent
+          visible={isFiltersModalOpen}
+          animationType="fade"
+          onRequestClose={() => setIsFiltersModalOpen(false)}
+        >
+          <TouchableWithoutFeedback onPress={() => setIsFiltersModalOpen(false)}>
+            <View style={[styles.modalOverlay, { backgroundColor: withOpacity(textColor, 0.42) }]}>
+              <TouchableWithoutFeedback onPress={noop}>
+                <View style={[styles.modalCard, { borderColor, backgroundColor: surfaceColor }]}>
+                  <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+                    <Text style={[styles.modalTitle, { color: textColor }]}>{filterTitle}</Text>
+                    <TouchableOpacity
+                      style={[styles.modalCloseButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
+                      activeOpacity={0.82}
+                      onPress={() => setIsFiltersModalOpen(false)}
+                    >
+                      <Icon name="x" size={18} color={textSecondaryColor} />
+                    </TouchableOpacity>
+                  </View>
+
+                  <ScrollView
+                    style={styles.modalScroll}
+                    contentContainerStyle={styles.modalContent}
+                    keyboardShouldPersistTaps="handled"
+                  >
+                    {filterFields(true)}
+                  </ScrollView>
+
+                  <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
+                    {activeCount > 0 ? (
+                      <TouchableOpacity
+                        style={[styles.modalSecondaryButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
+                        activeOpacity={0.84}
+                        onPress={clearFilters}
+                      >
+                        <Text style={[styles.modalSecondaryButtonText, { color: textColor }]}>
+                          {global.t?.t(storeName, 'button', 'clear')}
+                        </Text>
+                      </TouchableOpacity>
+                    ) : null}
+                    <TouchableOpacity
+                      style={[styles.modalPrimaryButton, { backgroundColor: resolvedAccentColor }]}
+                      activeOpacity={0.84}
+                      onPress={() => setIsFiltersModalOpen(false)}
+                    >
+                      <Text style={[styles.modalPrimaryButtonText, { color: onAccentColor }]}>
+                        {global.t?.t(storeName, 'button', 'apply')}
+                      </Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </TouchableWithoutFeedback>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      </View>
+    );
+  }
+
+    return (
+    <View style={styles.wrap}>
+      {filterFields(false)}
+
+      {activeCount > 0 ? (
+        <TouchableOpacity
+          style={[styles.clearButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
+          activeOpacity={0.82}
+          onPress={clearFilters}
+        >
+          <Icon name="x" size={14} color={textSecondaryColor} />
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+export default DefaultExternalFilters;