feat: integrate analytics and fragment receipt improvements

src/components/ui/DateRangeInput.tsx

@@ -7,6 +7,7 @@ export type DateRangeValue = {
 };
 
 type DateRangeInputProps = {
+  className?: string;
   label?: string;
   value: DateRangeValue;
   onChange: (value: DateRangeValue) => void;
@@ -65,7 +66,7 @@ function getCalendarDays(viewDate: Date) {
   });
 }
 
-export function DateRangeInput({ label, value, onChange }: DateRangeInputProps) {
+export function DateRangeInput({ className = '', label, value, onChange }: DateRangeInputProps) {
   const [open, setOpen] = useState(false);
   const [viewDate, setViewDate] = useState(() => parseDate(value.start) ?? new Date());
   const startDate = parseDate(value.start);
@@ -112,7 +113,7 @@ export function DateRangeInput({ label, value, onChange }: DateRangeInputProps)
   }
 
   return (
-    <div className="ui-field ui-date-range-field">
+    <div className={['ui-field', 'ui-date-range-field', className].filter(Boolean).join(' ')}>
       {label ? <span className="ui-field__label">{label}</span> : null}
       <button
         className={['ui-date-range-trigger', open ? 'ui-date-range-trigger--open' : '', value.start || value.end ? 'ui-date-range-trigger--filled' : ''].filter(Boolean).join(' ')}