@controleonline/ui-default 1.0.263

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

@@ -0,0 +1,262 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Modal,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  formatStoreColumnLabel,
+  resolveStoreColumn,
+  resolveStoreConfigByName,
+} from '@controleonline/ui-common/src/react/utils/storeColumns';
+import createStyles from './CompactFilterSelector.styles';
+
+const buildTheme = ({ accentColor, themeColors = {} }) => ({
+  accentColor: accentColor,
+  activeBackgroundColor:
+    themeColors.activeBackgroundColor || `${accentColor}14`,
+  activeIconBackgroundColor:
+    themeColors.activeIconBackgroundColor || `${accentColor}24`,
+  activeChevronColor:
+    themeColors.activeChevronColor ||
+    themeColors.activeIconColor ||
+    accentColor,
+  activeIconColor: themeColors.activeIconColor || accentColor,
+  activeTextColor: themeColors.activeTextColor || accentColor,
+  backgroundColor: themeColors.backgroundColor || '#F8FAFC',
+  borderColor: themeColors.borderColor || '#E2E8F0',
+  captionColor: themeColors.captionColor || '#94A3B8',
+  chevronColor: themeColors.chevronColor || '#94A3B8',
+  closeIconColor: themeColors.closeIconColor || '#64748B',
+  iconBackgroundColor: themeColors.iconBackgroundColor || '#E2E8F0',
+  iconColor: themeColors.iconColor || '#64748B',
+  modalBackgroundColor: themeColors.modalBackgroundColor || '#FFFFFF',
+  modalOverlayColor:
+    themeColors.modalOverlayColor || 'rgba(15, 23, 42, 0.35)',
+  modalTitleColor: themeColors.modalTitleColor || '#0F172A',
+  optionBackgroundColor: themeColors.optionBackgroundColor || '#F8FAFC',
+  optionBorderColor: themeColors.optionBorderColor || '#E2E8F0',
+  optionSelectedTextColor:
+    themeColors.optionSelectedTextColor || accentColor,
+  textColor: themeColors.textColor || '#0F172A',
+});
+
+const noop = () => {};
+
+const normalizeText = value => String(value || '').trim();
+
+const resolveStoreName = store => {
+  if (typeof store === 'string') return normalizeText(store);
+  return normalizeText(store?.storeName || store?.name || '');
+};
+
+const resolveStoreFieldLabel = ({ fallbackLabel = '', field = '', store = '' }) => {
+  const storeName = resolveStoreName(store);
+  const fieldName = normalizeText(field);
+  if (!storeName || !fieldName) return fallbackLabel;
+
+  const { columns } = resolveStoreConfigByName(storeName);
+  const column = resolveStoreColumn(columns, fieldName);
+  const labelKey = normalizeText(column?.label || fieldName);
+  const translatedLabel =
+    global.t?.t(storeName, 'label', labelKey) ||
+    global.t?.t(storeName, 'input', labelKey);
+
+  return (
+    translatedLabel ||
+    formatStoreColumnLabel({
+      columns,
+      fallbackLabel: fallbackLabel || labelKey,
+      fieldName,
+      storeName,
+    }) ||
+    fallbackLabel
+  );
+};
+
+const CompactFilterSelector = ({
+  accentColor = '#2563EB',
+  active = false,
+  children = null,
+  dense = false,
+  disabled = false,
+  icon = 'sliders',
+  label = '',
+  labelCaption = '',
+  onClose = null,
+  onSelect = null,
+  options = [],
+  selectedKey = '',
+  field = '',
+  store = '',
+  themeColors = {},
+  title = '',
+}) => {
+  const [visible, setVisible] = useState(false);
+  const { width: windowWidth } = useWindowDimensions();
+  const resolvedTheme = useMemo(
+    () => buildTheme({ accentColor, themeColors }),
+    [accentColor, themeColors],
+  );
+  const styles = useMemo(
+    () => createStyles(resolvedTheme, dense, windowWidth),
+    [dense, resolvedTheme, windowWidth],
+  );
+  const storeFieldLabel = resolveStoreFieldLabel({
+    fallbackLabel: labelCaption || title,
+    field,
+    store,
+  });
+  const resolvedLabelCaption = labelCaption || storeFieldLabel;
+  const resolvedTitle = title || storeFieldLabel;
+
+  const closeModal = useCallback(() => {
+    setVisible(false);
+    onClose?.();
+  }, [onClose]);
+
+  const openModal = useCallback(() => {
+    if (!disabled) {
+      setVisible(true);
+    }
+  }, [disabled]);
+
+  const handleSelect = useCallback(optionKey => {
+    const shouldClose = onSelect?.(optionKey, {
+      close: closeModal,
+      open: openModal,
+    });
+
+    if (shouldClose !== false) {
+      closeModal();
+    }
+  }, [closeModal, onSelect, openModal]);
+
+  const resolvedChildren = useMemo(() => {
+    if (typeof children === 'function') {
+      return children({ close: closeModal, open: openModal });
+    }
+
+    return children;
+  }, [children, closeModal, openModal]);
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[
+          styles.trigger,
+          active ? styles.triggerActive : null,
+        ]}
+        activeOpacity={0.9}
+        disabled={disabled}
+        onPress={openModal}
+      >
+        <View style={[styles.iconWrap, active ? styles.iconWrapActive : null]}>
+          <Icon
+            name={icon}
+            size={dense ? 14 : 15}
+            color={active ? resolvedTheme.activeIconColor : resolvedTheme.iconColor}
+          />
+        </View>
+
+        <View style={styles.textWrap}>
+          {!!resolvedLabelCaption && (
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.triggerCaption,
+                active ? styles.triggerCaptionActive : null,
+              ]}
+            >
+              {resolvedLabelCaption}
+            </Text>
+          )}
+
+          <Text
+            numberOfLines={1}
+            style={[styles.triggerText, active ? styles.triggerTextActive : null]}
+          >
+            {label}
+          </Text>
+        </View>
+
+        <Icon
+          name="chevron-down"
+          size={dense ? 14 : 16}
+          color={active ? resolvedTheme.activeChevronColor : resolvedTheme.chevronColor}
+        />
+      </TouchableOpacity>
+
+      <Modal
+        transparent
+        visible={visible}
+        animationType="fade"
+        onRequestClose={closeModal}
+      >
+        <TouchableWithoutFeedback onPress={closeModal}>
+          <View style={styles.modalOverlay}>
+            <TouchableWithoutFeedback onPress={noop}>
+              <View style={styles.modalCard}>
+                <View style={styles.modalHeader}>
+                  <Text style={styles.modalTitle}>{resolvedTitle}</Text>
+
+                  <TouchableOpacity onPress={closeModal} activeOpacity={0.8}>
+                    <Icon name="x" size={20} color={resolvedTheme.closeIconColor} />
+                  </TouchableOpacity>
+                </View>
+
+                <ScrollView
+                  style={styles.modalScroll}
+                  contentContainerStyle={styles.modalContent}
+                  keyboardShouldPersistTaps="handled"
+                >
+                  {options.map(option => {
+                    const isSelected = option.key === selectedKey;
+
+                    return (
+                      <TouchableOpacity
+                        key={option.key}
+                        style={[
+                          styles.modalOption,
+                          isSelected ? styles.modalOptionActive : null,
+                        ]}
+                        activeOpacity={0.9}
+                        onPress={() => handleSelect(option.key)}
+                      >
+                        <Text
+                          style={[
+                            styles.modalOptionText,
+                            isSelected ? styles.modalOptionTextActive : null,
+                          ]}
+                        >
+                          {option.label}
+                        </Text>
+
+                        {isSelected ? (
+                          <Icon
+                            name="check"
+                            size={16}
+                            color={resolvedTheme.activeIconColor}
+                          />
+                        ) : null}
+                      </TouchableOpacity>
+                    );
+                  })}
+
+                  {resolvedChildren}
+                </ScrollView>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+};
+
+export default CompactFilterSelector;

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

@@ -0,0 +1,124 @@
+import { StyleSheet } from 'react-native';
+
+const createStyles = (theme, dense = false, windowWidth = 0) => {
+  const compactModal = Number(windowWidth) >= 768;
+
+  return StyleSheet.create({
+    trigger: {
+      minWidth: 0,
+      flexGrow: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: dense ? 8 : 10,
+      borderWidth: 1,
+      borderColor: theme.borderColor,
+      borderRadius: dense ? 12 : 14,
+      paddingHorizontal: dense ? 10 : 12,
+      paddingVertical: dense ? 8 : 10,
+      backgroundColor: theme.backgroundColor,
+    },
+    triggerActive: {
+      borderColor: theme.accentColor,
+      backgroundColor: theme.activeBackgroundColor,
+    },
+    iconWrap: {
+      width: dense ? 24 : 28,
+      height: dense ? 24 : 28,
+      borderRadius: dense ? 8 : 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.iconBackgroundColor,
+    },
+    iconWrapActive: {
+      backgroundColor: theme.activeIconBackgroundColor,
+    },
+    textWrap: {
+      flex: 1,
+      minWidth: 0,
+    },
+    triggerCaption: {
+      fontSize: dense ? 9 : 10,
+      lineHeight: dense ? 10 : 12,
+      fontWeight: '800',
+      letterSpacing: 0.45,
+      textTransform: 'uppercase',
+      color: theme.captionColor,
+      marginBottom: dense ? 1 : 2,
+    },
+    triggerCaptionActive: {
+      color: theme.activeTextColor,
+    },
+    triggerText: {
+      fontSize: dense ? 12 : 13,
+      lineHeight: dense ? 14 : 16,
+      fontWeight: dense ? '800' : '700',
+      color: theme.textColor,
+    },
+    triggerTextActive: {
+      color: theme.activeTextColor,
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: theme.modalOverlayColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: compactModal ? 24 : 14,
+    },
+    modalCard: {
+      width: '100%',
+      maxWidth: compactModal ? 420 : undefined,
+      backgroundColor: theme.modalBackgroundColor,
+      borderRadius: 24,
+      maxHeight: compactModal ? 560 : '82%',
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 10,
+    },
+    modalHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    modalTitle: {
+      fontSize: 18,
+      fontWeight: '800',
+      color: theme.modalTitleColor,
+    },
+    modalScroll: {
+      flexGrow: 0,
+    },
+    modalContent: {
+      paddingBottom: 10,
+      gap: 10,
+    },
+    modalOption: {
+      minHeight: 50,
+      borderWidth: 1,
+      borderColor: theme.optionBorderColor,
+      borderRadius: 16,
+      paddingHorizontal: 14,
+      paddingVertical: 12,
+      backgroundColor: theme.optionBackgroundColor,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+    },
+    modalOptionActive: {
+      borderColor: theme.accentColor,
+      backgroundColor: theme.activeBackgroundColor,
+    },
+    modalOptionText: {
+      flex: 1,
+      fontSize: 14,
+      fontWeight: '700',
+      color: theme.textColor,
+    },
+    modalOptionTextActive: {
+      color: theme.optionSelectedTextColor,
+    },
+  });
+};
+
+export default createStyles;

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

@@ -0,0 +1,264 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import CompactFilterSelector from './CompactFilterSelector';
+import createStyles from './DateShortcutFilter.styles';
+import {
+  buildDateFilterOptions,
+  DEFAULT_DATE_FILTER_OPTION_KEYS,
+  resolveDateFilterTitle,
+  resolveDateRangeSummary,
+  validateCustomDateRange,
+} from '@controleonline/ui-common/src/react/utils/dateRangeFilter';
+import {
+  formatStoreColumnLabel,
+  resolveStoreColumn,
+  resolveStoreConfigByName,
+} from '@controleonline/ui-common/src/react/utils/storeColumns';
+
+const createDefaultColors = colors => ({
+  accent: colors?.accent,
+  appBg: colors?.appBg || 'transparent',
+  border: colors?.border,
+  borderSoft: colors?.borderSoft,
+  cardBg: colors?.cardBg,
+  cardBgSoft: colors?.cardBgSoft,
+  danger: colors?.danger,
+  isLight: typeof colors?.isLight === 'boolean' ? colors.isLight : true,
+  panelBg: colors?.panelBg,
+  pillTextDark: colors?.pillTextDark,
+  textPrimary: colors?.textPrimary,
+  textSecondary: colors?.textSecondary,
+});
+
+const COMPACT_DATE_LABELS = {
+  all: 'Todos',
+  today: 'Hoje',
+  yesterday: 'Ontem',
+  '7d': '7 dias',
+  '30d': '30 dias',
+  '90d': '90 dias',
+  this_month: 'Este mes',
+  last_month: 'Mes ant.',
+  custom: 'Periodo',
+};
+
+const normalizeText = value => String(value || '').trim();
+
+const resolveStoreName = store => {
+  if (typeof store === 'string') return normalizeText(store);
+  return normalizeText(store?.storeName || store?.name || '');
+};
+
+const resolveStoreFieldLabel = ({ fallbackLabel = '', field = '', store = '' }) => {
+  const storeName = resolveStoreName(store);
+  const fieldName = normalizeText(field);
+  if (!storeName || !fieldName) return fallbackLabel;
+
+  const { columns } = resolveStoreConfigByName(storeName);
+  const column = resolveStoreColumn(columns, fieldName);
+  const labelKey = normalizeText(column?.label || fieldName);
+  const translatedLabel =
+    global.t?.t(storeName, 'label', labelKey) ||
+    global.t?.t(storeName, 'input', labelKey);
+
+  return (
+    translatedLabel ||
+    formatStoreColumnLabel({
+      columns,
+      fallbackLabel: fallbackLabel || labelKey,
+      fieldName,
+      storeName,
+    }) ||
+    fallbackLabel
+  );
+};
+
+const DateShortcutFilter = ({
+  value = '',
+  onChange = null,
+  customRange = null,
+  onCustomRangeChange = null,
+  colors = null,
+  dense = false,
+  field = '',
+  labelCaption = '',
+  optionKeys = DEFAULT_DATE_FILTER_OPTION_KEYS,
+  store = '',
+}) => {
+  const themeColors = useMemo(() => createDefaultColors(colors), [colors]);
+  const styles = useMemo(() => createStyles(themeColors), [themeColors]);
+  const [customFromInput, setCustomFromInput] = useState('');
+  const [customToInput, setCustomToInput] = useState('');
+  const [dateValidationMessage, setDateValidationMessage] = useState('');
+  const [isCustomEditorVisible, setIsCustomEditorVisible] = useState(
+    value === 'custom',
+  );
+  const options = buildDateFilterOptions(optionKeys);
+  const periodLabel = resolveStoreFieldLabel({
+    fallbackLabel: labelCaption || resolveDateFilterTitle(),
+    field,
+    store,
+  });
+  const activeRangeSummary = useMemo(
+    () => resolveDateRangeSummary(value, customRange),
+    [customRange, value],
+  );
+  const currentOptionLabel = useMemo(
+    () => options.find(option => option.key === value)?.label || '',
+    [options, value],
+  );
+  const selectedLabel = useMemo(() => (
+    value === 'custom'
+      ? activeRangeSummary || currentOptionLabel
+      : currentOptionLabel || activeRangeSummary
+  ), [activeRangeSummary, currentOptionLabel, value]);
+  const compactSelectedLabel = useMemo(() => {
+    if (value === 'custom') {
+      return activeRangeSummary || COMPACT_DATE_LABELS.custom;
+    }
+
+    return COMPACT_DATE_LABELS[value] || currentOptionLabel || selectedLabel;
+  }, [activeRangeSummary, currentOptionLabel, selectedLabel, value]);
+
+  useEffect(() => {
+    setCustomFromInput(String(customRange?.from || ''));
+    setCustomToInput(String(customRange?.to || ''));
+  }, [customRange?.from, customRange?.to]);
+
+  useEffect(() => {
+    if (value !== 'custom') {
+      setDateValidationMessage('');
+      setIsCustomEditorVisible(false);
+    }
+  }, [value]);
+
+  // Custom ranges are applied explicitly so the parent only refreshes when valid.
+  const applyCustomRange = useCallback(() => {
+    const validationMessage = validateCustomDateRange(
+      customFromInput,
+      customToInput,
+    );
+
+    setDateValidationMessage(validationMessage);
+
+    if (validationMessage) {
+      return false;
+    }
+
+    onCustomRangeChange?.({
+      from: String(customFromInput || '').trim(),
+      to: String(customToInput || '').trim(),
+    });
+    return true;
+  }, [customFromInput, customToInput, onCustomRangeChange]);
+
+  const clearCustomRange = useCallback(() => {
+    setCustomFromInput('');
+    setCustomToInput('');
+    setDateValidationMessage('');
+    onCustomRangeChange?.({
+      from: '',
+      to: '',
+    });
+  }, [onCustomRangeChange]);
+
+  const handleSelect = useCallback(optionKey => {
+    if (optionKey === 'custom') {
+      setIsCustomEditorVisible(true);
+      setDateValidationMessage('');
+      return false;
+    }
+
+    setIsCustomEditorVisible(false);
+    onChange?.(optionKey);
+    return true;
+  }, [onChange]);
+
+  return (
+    <CompactFilterSelector
+      accentColor={themeColors.accent}
+      dense={dense}
+      active={value !== 'all'}
+      icon="calendar"
+      label={dense ? compactSelectedLabel : selectedLabel}
+      labelCaption={labelCaption}
+      options={options}
+      selectedKey={isCustomEditorVisible || value === 'custom' ? 'custom' : value}
+      title=""
+      store={store}
+      field={field}
+      onSelect={handleSelect}
+    >
+      {({ close }) => (isCustomEditorVisible || value === 'custom') ? (
+        <View style={styles.customRangeWrap}>
+          <Text style={styles.customLabel}>{periodLabel}</Text>
+
+          <View style={styles.customInputsRow}>
+            <TextInput
+              value={customFromInput}
+              onChangeText={setCustomFromInput}
+              placeholder={global.t?.t('orders', 'placeholder', 'date_from')}
+              placeholderTextColor={themeColors.textSecondary}
+              style={styles.customInput}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+
+            <TextInput
+              value={customToInput}
+              onChangeText={setCustomToInput}
+              placeholder={global.t?.t('orders', 'placeholder', 'date_to')}
+              placeholderTextColor={themeColors.textSecondary}
+              style={styles.customInput}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+          </View>
+
+          {!!activeRangeSummary && (
+            <Text style={styles.currentDateValue}>
+              {activeRangeSummary}
+            </Text>
+          )}
+
+          {!!dateValidationMessage && (
+            <Text style={styles.validationText}>
+              {dateValidationMessage}
+            </Text>
+          )}
+
+          <View style={styles.customActionsRow}>
+            <TouchableOpacity
+              style={styles.secondaryButton}
+              activeOpacity={0.9}
+              onPress={clearCustomRange}
+            >
+              <Text style={styles.secondaryButtonText}>
+                {global.t?.t('orders', 'button', 'clear')}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.primaryButton}
+              activeOpacity={0.9}
+              onPress={() => {
+                const applied = applyCustomRange();
+                if (!applied) {
+                  return;
+                }
+
+                close();
+              }}
+            >
+              <Text style={styles.primaryButtonText}>
+                {global.t?.t('orders', 'button', 'apply_period')}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ) : null}
+    </CompactFilterSelector>
+  );
+};
+
+export default DateShortcutFilter;