optimization

src/components/daily-report/SummaryTab.tsx

@@ -1,77 +1,151 @@
+import { useMemo, useState } from 'react'
 import { SummaryCard } from './SummaryCard'
+import { WeatherData } from '@/features/weather'
+import { GreenhouseForecastAlerts, getForecastAlertsCount } from './GreenhouseForecastAlerts'
+import { Dialog } from '@/components/common/Dialog'
+import { WeatherAlertBanner } from '@/components/alerts'
+import { Loader2 } from 'lucide-react'
 
 type SummaryTabProps = {
-    temperature: {
-        current: number
-        min: number
-        max: number
-        data: number[]
-    }
-    humidity: {
-        current: number
-        min: number
-        max: number
-        data: number[]
-    }
-    soil: {
-        current: number
-        min: number
-        max: number
-        data: number[]
-    }
-    gas: {
-        current: number
-        min: number
-        max: number
-        data: number[]
-    }
-    lux: {
-        current: number
-        min: number
-        max: number
-        data: number[]
-    }
+    temperature: number[]
+    humidity: number[]
+    soil: number[]
+    gas: number[]
+    lux: number[]
+    forecastWeather?: WeatherData | null
+    forecastWeatherLoading?: boolean
 }
 
-export function SummaryTab({ temperature, humidity, soil, gas, lux }: SummaryTabProps) {
+export function SummaryTab({ temperature, humidity, soil, gas, lux, forecastWeather, forecastWeatherLoading = false }: SummaryTabProps) {
+    const [isAlertsDialogOpen, setIsAlertsDialogOpen] = useState(false)
+    
+    const alertsCount = useMemo(() => {
+        return getForecastAlertsCount(forecastWeather ?? null)
+    }, [forecastWeather])
+    // Memoized summary statistics for each parameter
+    const temperatureSummary = useMemo(() => {
+        if (temperature.length === 0) return { current: 0, min: 0, max: 0 }
+        return {
+            current: temperature.at(-1) ?? 0,
+            min: Math.min(...temperature),
+            max: Math.max(...temperature),
+        }
+    }, [temperature])
+
+    const humiditySummary = useMemo(() => {
+        if (humidity.length === 0) return { current: 0, min: 0, max: 0 }
+        return {
+            current: humidity.at(-1) ?? 0,
+            min: Math.min(...humidity),
+            max: Math.max(...humidity),
+        }
+    }, [humidity])
+
+    const soilSummary = useMemo(() => {
+        if (soil.length === 0) return { current: 0, min: 0, max: 0 }
+        return {
+            current: soil.at(-1) ?? 0,
+            min: Math.min(...soil),
+            max: Math.max(...soil),
+        }
+    }, [soil])
+
+    const gasSummary = useMemo(() => {
+        if (gas.length === 0) return { current: 0, min: 0, max: 0 }
+        return {
+            current: gas.at(-1) ?? 0,
+            min: Math.min(...gas),
+            max: Math.max(...gas),
+        }
+    }, [gas])
+
+    const luxSummary = useMemo(() => {
+        if (lux.length === 0) return { current: 0, min: 0, max: 0 }
+        return {
+            current: lux.at(-1) ?? 0,
+            min: Math.min(...lux),
+            max: Math.max(...lux),
+        }
+    }, [lux])
+
     return (
-        <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-            <SummaryCard
-                param="temperature"
-                currentValue={temperature.current}
-                minValue={temperature.min}
-                maxValue={temperature.max}
-                data={temperature.data}
-            />
-            <SummaryCard
-                param="humidity"
-                currentValue={humidity.current}
-                minValue={humidity.min}
-                maxValue={humidity.max}
-                data={humidity.data}
-            />
-            <SummaryCard
-                param="soil"
-                currentValue={soil.current}
-                minValue={soil.min}
-                maxValue={soil.max}
-                data={soil.data}
-            />
-            <SummaryCard
-                param="gas"
-                currentValue={gas.current}
-                minValue={gas.min}
-                maxValue={gas.max}
-                data={gas.data}
-            />
-            <SummaryCard
-                param="lux"
-                currentValue={lux.current}
-                minValue={lux.min}
-                maxValue={lux.max}
-                data={lux.data}
-            />
-        </div>
+        <>
+            {/* Greenhouse Forecast Alerts Section */}
+            {forecastWeatherLoading ? (
+                <div className="mb-6">
+                    <div className="w-full p-4 bg-gradient-to-r from-amber-50 to-orange-50 border-2 border-amber-200 rounded-xl text-right flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-amber-500 rounded-lg flex items-center justify-center">
+                                <Loader2 className="w-6 h-6 text-white animate-spin" />
+                            </div>
+                            <div>
+                                <p className="font-semibold text-gray-800">
+                                    در حال بارگذاری هشدارهای آب و هوایی...
+                                </p>
+                                <p className="text-sm text-gray-600 mt-1">
+                                    لطفاً صبر کنید
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ) : alertsCount > 0 && forecastWeather ? (
+                <WeatherAlertBanner
+                    alertsCount={alertsCount}
+                    onClick={() => setIsAlertsDialogOpen(true)}
+                />
+            ) : null}
+
+            {/* Summary Cards Grid */}
+            <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+                <SummaryCard
+                    param="temperature"
+                    currentValue={temperatureSummary.current}
+                    minValue={temperatureSummary.min}
+                    maxValue={temperatureSummary.max}
+                    data={temperature}
+                />
+                <SummaryCard
+                    param="humidity"
+                    currentValue={humiditySummary.current}
+                    minValue={humiditySummary.min}
+                    maxValue={humiditySummary.max}
+                    data={humidity}
+                />
+                <SummaryCard
+                    param="soil"
+                    currentValue={soilSummary.current}
+                    minValue={soilSummary.min}
+                    maxValue={soilSummary.max}
+                    data={soil}
+                />
+                <SummaryCard
+                    param="gas"
+                    currentValue={gasSummary.current}
+                    minValue={gasSummary.min}
+                    maxValue={gasSummary.max}
+                    data={gas}
+                />
+                <SummaryCard
+                    param="lux"
+                    currentValue={luxSummary.current}
+                    minValue={luxSummary.min}
+                    maxValue={luxSummary.max}
+                    data={lux}
+                />
+            </div>
+
+            {/* Alerts Dialog */}
+            {forecastWeather && (
+                <Dialog
+                    isOpen={isAlertsDialogOpen}
+                    onClose={() => setIsAlertsDialogOpen(false)}
+                    title="هشدارهای پیش‌بینی آب و هوا"
+                >
+                    <GreenhouseForecastAlerts weatherData={forecastWeather} />
+                </Dialog>
+            )}
+        </>
     )
 }