new ui and daily report

src/components/daily-report/SummaryCard.tsx

@@ -0,0 +1,82 @@
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { TemperatureGauge, HumidityGauge, LuxGauge, GasGauge } from '@/components/Gauges'
+import { MiniLineChart } from '@/components/MiniChart'
+import { paramConfig, toPersianDigits } from './utils'
+
+type SummaryCardProps = {
+    param: string
+    currentValue: number
+    minValue: number
+    maxValue: number
+    data: number[]
+}
+
+export function SummaryCard({ param, currentValue, minValue, maxValue, data }: SummaryCardProps) {
+    const config = paramConfig[param]
+    if (!config) return null
+    
+    // Render the appropriate gauge based on parameter type
+    const renderGauge = () => {
+        switch (param) {
+            case 'temperature':
+                return <TemperatureGauge value={currentValue} min={-20} max={80} />
+            case 'humidity':
+                return <HumidityGauge value={currentValue} type="air" />
+            case 'soil':
+                return <HumidityGauge value={currentValue} type="soil" />
+            case 'lux':
+                return <LuxGauge value={600} max={2000} />
+            case 'gas':
+                return <GasGauge value={currentValue} max={100} />
+            default:
+                return null
+        }
+    }
+    
+    return (
+        <div className={`${config.bgColor} rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden`}>
+            {/* Header */}
+            <div className="px-4 pt-3 pb-1">
+                <h3 className="text-sm font-bold text-gray-800">{config.title}</h3>
+            </div>
+            
+            {/* Main Content - Gauge on left, Stats on right */}
+            <div className="px-3">
+                <div className="flex items-center justify-between gap-2">
+                    {/* Gauge on left */}
+                    <div className="flex-shrink-0">
+                        {renderGauge()}
+                    </div>
+                    
+                    {/* Stats on right - stacked */}
+                    <div className="flex flex-col gap-1.5">
+                        <div className="flex items-center gap-1.5 bg-white/60 rounded-md px-2 py-1.5">
+                            <TrendingUp className="w-3.5 h-3.5 text-green-600 flex-shrink-0" />
+                            <div className="flex flex-col">
+                                <span className="text-[10px] text-gray-500 leading-tight">حداکثر</span>
+                                <span className="text-xs font-bold text-gray-800 leading-tight">
+                                    {toPersianDigits(maxValue.toFixed(1))} {config.unit}
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-1.5 bg-white/60 rounded-md px-2 py-1.5">
+                            <TrendingDown className="w-3.5 h-3.5 text-red-600 flex-shrink-0" />
+                            <div className="flex flex-col">
+                                <span className="text-[10px] text-gray-500 leading-tight">حداقل</span>
+                                <span className="text-xs font-bold text-gray-800 leading-tight">
+                                    {toPersianDigits(minValue.toFixed(1))} {config.unit}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            {/* Mini Chart */}
+            <div className="h-14">
+                <MiniLineChart data={data} color={config.chartColor} />
+            </div>
+        </div>
+    )
+}
+