@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/modules/filter/date-filter/components/DialogDateView.tsx

@@ -0,0 +1,270 @@
+import {
+  Button,
+  CalendarTwoMonths,
+  Dialog,
+  RadioGroup,
+  Tabs,
+  ToggleGroup,
+} from 'erxes-ui/components';
+import { useEffect, useId, useRef, useState } from 'react';
+import { getActiveTab } from '../utils/getActiveTab';
+import { parseDateRangeFromString } from '../utils/parseDateRangeFromString';
+import { DateRange } from 'react-day-picker';
+import { useFilterContext } from 'erxes-ui/modules';
+import { getYearsArray } from '../utils/getYears';
+import { cn } from 'erxes-ui/lib';
+import { MONTHS, QUARTERS } from '../constants/dateTypes';
+import { useFilterQueryState } from '../../hooks/useFilterQueryState';
+
+export const FilterDialogDateView = ({
+  filterKey,
+  label,
+}: {
+  filterKey: string;
+  label?: string;
+}) => {
+  const { sessionKey } = useFilterContext();
+  const [value, setValue] = useFilterQueryState<string>(filterKey, sessionKey);
+  const { resetFilterState } = useFilterContext();
+
+  return (
+    <DateRangeDialogContent
+      label={label ?? filterKey}
+      value={value}
+      onApply={(nextValue) => {
+        setValue(nextValue);
+        resetFilterState();
+      }}
+    />
+  );
+};
+
+export const DateRangeDialogContent = ({
+  label,
+  value,
+  onApply,
+}: {
+  label: string;
+  value?: string | null;
+  onApply: (value: string) => void;
+}) => {
+  const [tabs, setTabs] = useState('day');
+  const [currentDateRange, setCurrentDateRange] = useState<
+    DateRange | undefined
+  >(parseDateRangeFromString(value || ''));
+  const [currentValue, setCurrentValue] = useState<string | null>(
+    value ?? null,
+  );
+
+  useEffect(() => {
+    if (value) {
+      setTabs(getActiveTab(value));
+    }
+    setCurrentValue(value ?? null);
+    setCurrentDateRange(parseDateRangeFromString(value || ''));
+  }, [value]);
+
+  const handleCalendarChange = (value: DateRange | undefined) => {
+    setCurrentDateRange(value);
+
+    if (!value?.from) {
+      setCurrentValue(null);
+      return;
+    }
+    const to = value.to ?? value.from;
+    setCurrentValue(`${value.from.toISOString()},${to.toISOString()}`);
+  };
+
+  const handleRadioGroupChange = (value: string) => {
+    setCurrentValue(value);
+  };
+
+  const handleApply = () => {
+    if (currentValue) {
+      onApply(currentValue);
+    }
+  };
+
+  return (
+    <Dialog.Content className="max-w-xl p-0">
+      <Tabs value={tabs} onValueChange={setTabs}>
+        <Dialog.Header className="p-6 space-y-3">
+          <Dialog.Title className="text-sm capitalize">{label}</Dialog.Title>
+          <div>
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              size="sm"
+              value={tabs}
+              onValueChange={setTabs}
+              className="inline-flex"
+            >
+              <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
+              <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
+              <ToggleGroup.Item value="quarter">Quarter</ToggleGroup.Item>
+              <ToggleGroup.Item value="halfYear">Half Year</ToggleGroup.Item>
+              <ToggleGroup.Item value="year">Year</ToggleGroup.Item>
+            </ToggleGroup>
+          </div>
+        </Dialog.Header>
+        <div className="border-y border-muted py-6 flex justify-center h-88 overflow-auto">
+          <Tabs.Content value="day" className="self-center outline-hidden">
+            <CalendarTwoMonths
+              mode="range"
+              numberOfMonths={2}
+              showOutsideDays
+              fixedWeeks
+              autoFocus
+              defaultMonth={
+                currentDateRange?.from ? currentDateRange.from : undefined
+              }
+              selected={currentDateRange}
+              onSelect={handleCalendarChange}
+            />
+          </Tabs.Content>
+          <Tabs.Content value="month" className="w-full outline-hidden">
+            <DateFilterRadioGroup
+              items={MONTHS}
+              onValueChange={handleRadioGroupChange}
+              value={currentValue}
+              className="grid grid-cols-2"
+            />
+          </Tabs.Content>
+          <Tabs.Content value="quarter" className="w-full outline-hidden">
+            <DateFilterRadioGroup
+              items={QUARTERS}
+              className="flex flex-col"
+              onValueChange={handleRadioGroupChange}
+              value={currentValue}
+            />
+          </Tabs.Content>
+          <Tabs.Content value="halfYear" className="w-full outline-hidden">
+            <DateFilterRadioGroup
+              items={['half-1', 'half-2']}
+              className="flex flex-col"
+              onValueChange={handleRadioGroupChange}
+              value={currentValue}
+            />
+          </Tabs.Content>
+          <Tabs.Content value="year" className="w-full outline-hidden">
+            <DateFilterRadioGroup
+              className="flex flex-col"
+              onValueChange={handleRadioGroupChange}
+              value={currentValue}
+            />
+          </Tabs.Content>
+        </div>
+        <Dialog.Footer className="p-6">
+          <Dialog.Close asChild>
+            <Button variant="ghost" size="lg">
+              Cancel
+            </Button>
+          </Dialog.Close>
+          <Button size="lg" disabled={!currentValue} onClick={handleApply}>
+            Apply
+          </Button>
+        </Dialog.Footer>
+      </Tabs>
+    </Dialog.Content>
+  );
+};
+
+const DateFilterRadioGroup = ({
+  items,
+  className,
+  value,
+  onValueChange,
+}: {
+  items?: string[];
+  className: string;
+  value: string | null;
+  onValueChange?: (value: string) => void;
+}) => {
+  const id = useId();
+
+  return (
+    <RadioGroup asChild value={value || ''} onValueChange={onValueChange}>
+      <fieldset className={cn('gap-6 w-full px-6 pb-6', className)}>
+        {getYearsArray(7, 5).map((year) =>
+          items ? (
+            <div className="flex flex-col gap-3" key={year}>
+              <legend className="font-semibold text-sm leading-none">
+                {year}
+              </legend>
+              <div
+                className={cn(
+                  'grid gap-1',
+                  items.length === 12 && 'grid-cols-3',
+                  items.length === 2 && 'grid-cols-2',
+                  items.length === 4 && 'grid-cols-4',
+                )}
+              >
+                {items.map((item) => (
+                  <DateFilterRadioGroupItem
+                    id={id}
+                    value={year + '-' + item}
+                    key={item}
+                    currentValue={value}
+                  >
+                    {item.split('-').join(' ')}
+                  </DateFilterRadioGroupItem>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <DateFilterRadioGroupItem
+              id={id}
+              value={year + '-y'}
+              key={year}
+              currentValue={value}
+            >
+              {year}
+            </DateFilterRadioGroupItem>
+          ),
+        )}
+      </fieldset>
+    </RadioGroup>
+  );
+};
+
+const DateFilterRadioGroupItem = ({
+  id,
+  value,
+  children,
+  currentValue,
+}: {
+  id: string;
+  value: string;
+  children: React.ReactNode;
+  currentValue: string | null;
+}) => {
+  const ref = useRef<HTMLLabelElement>(null);
+
+  useEffect(() => {
+    if (currentValue === value && ref.current) {
+      setTimeout(() => {
+        ref.current?.scrollIntoView({ behavior: 'instant', block: 'center' });
+      }, 100);
+    }
+  }, [currentValue, value]);
+
+  return (
+    <Button
+      variant="secondary"
+      className="shadow-none has-data-[state=checked]:border-ring has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground has-focus-visible:outline-solid has-focus-visible:outline-2 has-focus-visible:outline-ring/70 capitalize"
+      onClick={() => {
+        ref.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }}
+      asChild
+    >
+      <label ref={ref} id={`${id}-${value}`}>
+        <RadioGroup.Item
+          value={value}
+          id={`${id}-${value}`}
+          className="sr-only after:absolute after:inset-0"
+        />
+        {children}
+      </label>
+    </Button>
+  );
+};

package/src/modules/filter/date-filter/constants/dateTypes.tsx

@@ -0,0 +1,25 @@
+export const MONTHS = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+export const QUARTERS = ['quarter-1', 'quarter-2', 'quarter-3', 'quarter-4'];
+
+export const FIXED_DATES = [
+  'today',
+  'in-the-past',
+  '1-day-from-now',
+  '3-days-from-now',
+  '1-week-from-now',
+  '3-months-from-now',
+];

package/src/modules/filter/date-filter/index.ts

@@ -0,0 +1,2 @@
+export * from './utils/parseDateRangeFromString';
+export * from './components/DialogDateView';

package/src/modules/filter/date-filter/utils/dateTokens.ts

@@ -0,0 +1,28 @@
+// Shared parsing for the hyphenated quarter/half filter tokens
+// (e.g. `2026-quarter-3`, `2026-half-1`) so the range parser and the
+// display-label helper derive the numbers from a single source of truth.
+
+const QUARTER_TOKEN = /^(\d{4})-quarter-([1-4])$/;
+const HALF_TOKEN = /^(\d{4})-half-([1-2])$/;
+
+export const parseQuarterToken = (
+  value: string,
+): { year: number; quarter: number } | null => {
+  const match = QUARTER_TOKEN.exec(value);
+  if (!match) return null;
+  return {
+    year: Number.parseInt(match[1], 10),
+    quarter: Number.parseInt(match[2], 10),
+  };
+};
+
+export const parseHalfToken = (
+  value: string,
+): { year: number; half: number } | null => {
+  const match = HALF_TOKEN.exec(value);
+  if (!match) return null;
+  return {
+    year: Number.parseInt(match[1], 10),
+    half: Number.parseInt(match[2], 10),
+  };
+};

package/src/modules/filter/date-filter/utils/getActiveTab.ts

@@ -0,0 +1,17 @@
+import { MONTHS } from '../constants/dateTypes';
+
+export const getActiveTab = (date: string) => {
+  if (date.includes('half')) {
+    return 'halfYear';
+  }
+  if (date.includes('quarter')) {
+    return 'quarter';
+  }
+  if (MONTHS.some((month) => date.includes(month))) {
+    return 'month';
+  }
+  if (/^\d{4}-y$/.test(date)) {
+    return 'year';
+  }
+  return 'day';
+};

package/src/modules/filter/date-filter/utils/getDisplayValue.ts

@@ -0,0 +1,49 @@
+import { format } from 'date-fns';
+import { MONTHS } from '../constants/dateTypes';
+import { parseHalfToken, parseQuarterToken } from './dateTokens';
+
+export const getDisplayValue = (value: string) => {
+  if (value === 'today') {
+    return 'Today';
+  }
+  if (value === 'in-the-past') {
+    return 'In the past';
+  }
+  if (value === '1-day-from-now') {
+    return '1 day from now';
+  }
+  if (value === '3-days-from-now') {
+    return '3 days from now';
+  }
+  if (value === '1-week-from-now') {
+    return '1 week from now';
+  }
+  if (value === '3-months-from-now') {
+    return '3 months from now';
+  }
+
+  if (MONTHS.some((month) => value.includes(month))) {
+    return value;
+  }
+
+  const quarter = parseQuarterToken(value);
+  if (quarter) {
+    return `${quarter.year} Q${quarter.quarter}`;
+  }
+
+  const half = parseHalfToken(value);
+  if (half) {
+    return `${half.year} H${half.half}`;
+  }
+
+  if (/^\d{4}-y$/.test(value)) {
+    return value.replace('-y', '');
+  }
+
+  if (value.includes(',')) {
+    const [from, to] = value.split(',');
+    return `${format(from, 'MMM d, yyyy')} - ${format(to, 'MMM d, yyyy')}`;
+  }
+
+  return 'Unknown';
+};

package/src/modules/filter/date-filter/utils/getYears.ts

@@ -0,0 +1,13 @@
+export const getYearsArray = (
+  startYearOffset: number,
+  endYearOffset: number
+) => {
+  const currentYear = new Date().getFullYear();
+  const startYear = currentYear - startYearOffset;
+  const endYear = currentYear + endYearOffset;
+  const yearsArray: number[] = [];
+  for (let year = startYear; year <= endYear; year++) {
+    yearsArray.push(year);
+  }
+  return yearsArray;
+};

package/src/modules/filter/date-filter/utils/parseDateRangeFromString.ts

@@ -0,0 +1,101 @@
+import { endOfDay, startOfDay, subDays, subMonths } from 'date-fns';
+import { MONTHS } from 'erxes-ui/modules/filter/date-filter/constants/dateTypes';
+import { isUndefinedOrNull } from 'erxes-ui/utils';
+import {
+  parseHalfToken,
+  parseQuarterToken,
+} from 'erxes-ui/modules/filter/date-filter/utils/dateTokens';
+
+export const parseDateRangeFromString = (
+  date?: string | null,
+): { from: Date; to: Date } | undefined => {
+  if (isUndefinedOrNull(date)) return undefined;
+
+  const today = new Date();
+
+  // Predefined date ranges
+  const dateRanges: Record<string, { from: Date; to: Date }> = {
+    today: {
+      from: startOfDay(today),
+      to: endOfDay(today),
+    },
+    'in-the-past': {
+      from: startOfDay(new Date(1979, 0, 1)),
+      to: endOfDay(today),
+    },
+    '1-day-from-now': {
+      from: startOfDay(subDays(today, 1)),
+      to: endOfDay(today),
+    },
+    '3-days-from-now': {
+      from: startOfDay(subDays(today, 3)),
+      to: endOfDay(today),
+    },
+    '1-week-from-now': {
+      from: startOfDay(subDays(today, 7)),
+      to: endOfDay(today),
+    },
+    '3-months-from-now': {
+      from: startOfDay(subMonths(today, 3)),
+      to: endOfDay(today),
+    },
+  };
+
+  // Check for predefined ranges
+  if (dateRanges[date]) {
+    return dateRanges[date];
+  }
+
+  // Month format: YYYY-MMM
+  if (MONTHS.some((month) => date.includes(month))) {
+    const [year, month] = date.split('-');
+    const monthIndex = MONTHS.indexOf(month);
+    return {
+      from: startOfDay(new Date(parseInt(year), monthIndex, 1)),
+      to: endOfDay(new Date(parseInt(year), monthIndex + 1, 0)),
+    };
+  }
+
+  // Quarter format: YYYY-quarter-N
+  const quarter = parseQuarterToken(date);
+  if (quarter) {
+    return {
+      from: startOfDay(new Date(quarter.year, (quarter.quarter - 1) * 3, 1)),
+      to: endOfDay(new Date(quarter.year, quarter.quarter * 3, 0)),
+    };
+  }
+
+  // Half year format: YYYY-half-N
+  const half = parseHalfToken(date);
+  if (half) {
+    return {
+      from: startOfDay(new Date(half.year, (half.half - 1) * 6, 1)),
+      to: endOfDay(new Date(half.year, half.half * 6, 0)),
+    };
+  }
+
+  // Year format: YYYY
+  if (/^\d{4}-y$/.test(date)) {
+    const year = Number.parseInt(date);
+    return {
+      from: startOfDay(new Date(year, 0, 1)),
+      to: endOfDay(new Date(year, 11, 31)),
+    };
+  }
+
+  // Date range format: fromDate,toDate
+  if (date.includes(',')) {
+    const [from, to] = date.split(',');
+    const fromDate = new Date(from);
+    const toDate = new Date(to);
+
+    if (Number.isNaN(fromDate.getTime())) return undefined;
+
+    return {
+      from: startOfDay(fromDate),
+      to: endOfDay(Number.isNaN(toDate.getTime()) ? fromDate : toDate),
+    };
+  }
+
+  return undefined;
+};

package/src/modules/filter/hooks/useFilterContext.tsx

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { FilterContext } from '../context/FilterContext';
+
+export const useFilterContext = () => {
+  return useContext(FilterContext);
+};

package/src/modules/filter/hooks/useFilterQueryState.tsx

@@ -0,0 +1,24 @@
+import { QueryState, useQueryState } from 'erxes-ui/hooks/use-query-state';
+import { recordTableCursorAtomFamily } from 'erxes-ui/modules/record-table/states/RecordTableCursorState';
+import { useSetAtom } from 'jotai';
+
+export function useFilterQueryState<T>(
+  queryKey: string,
+  cursorKey?: string,
+  options?: {
+    defaultValue?: T;
+  },
+): QueryState<T> {
+  const [query, setQuery] = useQueryState<T>(queryKey, options);
+  const setCursor = useSetAtom(recordTableCursorAtomFamily(cursorKey ?? ''));
+
+  return [
+    query,
+    (value: T | null) => {
+      setQuery(value);
+      if (cursorKey) {
+        setCursor('');
+      }
+    },
+  ];
+}

package/src/modules/filter/index.ts

@@ -0,0 +1,5 @@
+export * from './date-filter';
+export * from './types/filter';
+export * from './components/Filter';
+export * from './hooks/useFilterContext';
+export * from './hooks/useFilterQueryState';

package/src/modules/filter/states/filterStates.ts

@@ -0,0 +1,14 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+
+export const EditModePositionComponentState = atomFamily((id: string) =>
+  atom(false),
+);
+
+export const openPopoverState = atomFamily((id: string) => atom(false));
+
+export const filterPopoverViewState = atomFamily((id: string) => atom('root'));
+
+export const openDialogState = atomFamily((id: string) => atom(false));
+
+export const filterDialogViewState = atomFamily((id: string) => atom('root'));

package/src/modules/filter/types/filter.ts

@@ -0,0 +1,29 @@
+import { Icon } from '@tabler/icons-react';
+
+export interface IFilter {
+  accessoryKey: string;
+  sessionKey: string;
+  label: string;
+  icon: Icon;
+  dropdown: (filter: FilterDropdownProps) => React.ReactNode;
+  bar: (filter: FilterBarComponentPropsBase) => React.ReactNode;
+  condition: (filter: FilterBarComponentPropsBase) => React.ReactNode;
+}
+
+export type FilterBarComponentPropsBase = Omit<
+  IFilter,
+  'dropdown' | 'bar' | 'conditions'
+>;
+export interface FilterDropdownProps extends FilterBarComponentPropsBase {
+  onOpenChange: (open: boolean) => void;
+}
+
+export interface IFilterContext {
+  id: string;
+  sessionKey?: string;
+  resetFilterState: () => void;
+  setOpen: (open: boolean) => void;
+  setView: (view: string) => void;
+  setDialogView: (view: string) => void;
+  setOpenDialog: (open: boolean) => void;
+}