refactor(statistics): improve component structure and enhance state management

- Introduced Suspense for lazy loading in StatisticsPage to optimize rendering. - Refactored StatisticsPage to separate inner logic into StatisticsPageInner for better readability. - Updated PeriodSelector to utilize useCallback for handling state changes, improving performance and clarity. Co-authored-by: Cursor <[email protected]>
2026-09-11 09:38:31 +07:00
parent 5aef419582
commit 3c42c114f5
3 changed files with 42 additions and 14 deletions
@@ -1,6 +1,6 @@
 "use client"

-import { useMemo } from "react"
+import { useCallback, useMemo, useState } from "react"
 import { format } from "date-fns"
 import { ru } from "date-fns/locale"
 import { CalendarIcon } from "lucide-react"
@@ -130,14 +130,19 @@ export function PeriodSelector({
  range: DateRangeYmd
  onChange: (next: DateRangeYmd) => void
 }) {
+  const [open, setOpen] = useState(false)
  const selectorValue = useMemo(() => rangeToSelector(range), [range])

-  function handleSelectorChange(value: DateSelectorValue) {
-    const next = dateSelectorToRange(value)
-    if (!next) return
-    if (next.from === range.from && next.to === range.to) return
-    onChange(next)
-  }
+  const handleSelectorChange = useCallback(
+    (value: DateSelectorValue) => {
+      const next = dateSelectorToRange(value)
+      if (!next) return
+      if (next.from === range.from && next.to === range.to) return
+      onChange(next)
+      setOpen(false)
+    },
+    [onChange, range.from, range.to],
+  )

  const activePreset = PRESETS.find((p) => {
    const r = rangeForPreset(p.id)
@@ -157,7 +162,7 @@ export function PeriodSelector({
          {p.label}
        </Button>
      ))}
-      <Popover>
+      <Popover open={open} onOpenChange={setOpen} modal={false}>
        <PopoverTrigger
          render={
            <Button type="button" variant="outline" size="sm" className="min-w-40 justify-between" />