first commit

2025-10-29 11:42:25 +01:00
commit 703f50a09d
4595 changed files with 385164 additions and 0 deletions
--- a/common/resources/client/admin/analytics/report-date-selector.tsx
+++ b/common/resources/client/admin/analytics/report-date-selector.tsx
@@ -0,0 +1,109 @@
+import {useDateRangePickerState} from '@common/ui/forms/input-field/date/date-range-picker/use-date-range-picker-state';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {Button} from '@common/ui/buttons/button';
+import {DateRangeIcon} from '@common/icons/material/DateRange';
+import {FormattedDateTimeRange} from '@common/i18n/formatted-date-time-range';
+import {DateRangeDialog} from '@common/ui/forms/input-field/date/date-range-picker/dialog/date-range-dialog';
+import React from 'react';
+import {DateRangeValue} from '@common/ui/forms/input-field/date/date-range-picker/date-range-value';
+import {useIsMobileMediaQuery} from '@common/utils/hooks/is-mobile-media-query';
+import {DateFormatPresets} from '@common/i18n/formatted-date';
+import {DateRangeComparePresets} from '@common/ui/forms/input-field/date/date-range-picker/dialog/date-range-compare-presets';
+import {Granularity} from '@common/ui/forms/input-field/date/date-picker/use-date-picker-state';
+
+const monthDayFormat: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: '2-digit',
+};
+
+interface ReportDataSelectorProps {
+  value: DateRangeValue;
+  disabled?: boolean;
+  onChange: (value: DateRangeValue) => void;
+  compactOnMobile?: boolean;
+  enableCompare?: boolean;
+  granularity?: Granularity;
+}
+export function ReportDateSelector({
+  value,
+  onChange,
+  disabled,
+  compactOnMobile = true,
+  enableCompare = false,
+  granularity = 'minute',
+}: ReportDataSelectorProps) {
+  const isMobile = useIsMobileMediaQuery();
+  return (
+    <DialogTrigger
+      type="popover"
+      onClose={value => {
+        if (value) {
+          onChange(value);
+        }
+      }}
+    >
+      <Button
+        variant="outline"
+        color="chip"
+        endIcon={<DateRangeIcon />}
+        disabled={disabled}
+      >
+        <FormattedDateTimeRange
+          start={value.start}
+          end={value.end}
+          options={
+            isMobile && compactOnMobile
+              ? monthDayFormat
+              : DateFormatPresets.short
+          }
+        />
+      </Button>
+      <DateSelectorDialog
+        value={value}
+        enableCompare={enableCompare}
+        granularity={granularity}
+      />
+    </DialogTrigger>
+  );
+}
+
+interface DateSelectorDialogProps {
+  value: DateRangeValue;
+  enableCompare: boolean;
+  granularity: Granularity;
+}
+function DateSelectorDialog({
+  value,
+  enableCompare,
+  granularity,
+}: DateSelectorDialogProps) {
+  const isMobile = useIsMobileMediaQuery();
+  const state = useDateRangePickerState({
+    granularity,
+    defaultValue: {
+      start: value.start,
+      end: value.end,
+      preset: value.preset,
+    },
+    closeDialogOnSelection: false,
+  });
+  const compareHasInitialValue = !!value.compareStart && !!value.compareEnd;
+  const compareState = useDateRangePickerState({
+    granularity,
+    defaultValue: compareHasInitialValue
+      ? {
+          start: value.compareStart,
+          end: value.compareEnd,
+          preset: value.comparePreset,
+        }
+      : DateRangeComparePresets[0].getRangeValue(state.selectedValue),
+  });
+  return (
+    <DateRangeDialog
+      state={state}
+      compareState={enableCompare ? compareState : undefined}
+      compareVisibleDefault={compareHasInitialValue}
+      showInlineDatePickerField={!isMobile}
+    />
+  );
+}