new ui and daily report

src/components/daily-report/ChartsTab.tsx

@@ -0,0 +1,104 @@
+import { BarChart3 } from 'lucide-react'
+import { LineChart, Panel } from '@/components/Charts'
+import { TimeRangeSelector } from './TimeRangeSelector'
+import { DataGap } from './utils'
+
+type ChartsTabProps = {
+    chartStartMinute: number
+    chartEndMinute: number
+    onStartMinuteChange: (minute: number) => void
+    onEndMinuteChange: (minute: number) => void
+    labels: string[]
+    soil: (number | null)[]
+    humidity: (number | null)[]
+    temperature: (number | null)[]
+    lux: (number | null)[]
+    gas: (number | null)[]
+    tempMinMax: { min: number; max: number }
+    luxMinMax: { min: number; max: number }
+    totalRecords: number
+    dataGaps?: DataGap[]
+}
+
+export function ChartsTab({
+    chartStartMinute,
+    chartEndMinute,
+    onStartMinuteChange,
+    onEndMinuteChange,
+    labels,
+    soil,
+    humidity,
+    temperature,
+    lux,
+    gas,
+    tempMinMax,
+    luxMinMax,
+    totalRecords,
+    dataGaps = []
+}: ChartsTabProps) {
+    return (
+        <div className="space-y-6">
+            {/* Time Range Selector */}
+            <TimeRangeSelector
+                startMinute={chartStartMinute}
+                endMinute={chartEndMinute}
+                onStartMinuteChange={onStartMinuteChange}
+                onEndMinuteChange={onEndMinuteChange}
+                totalRecords={totalRecords}
+                dataGaps={dataGaps}
+            />
+
+            {/* Charts Grid */}
+            {totalRecords === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 text-gray-500">
+                    <BarChart3 className="w-12 h-12 text-gray-300 mb-4" />
+                    <p className="text-gray-600">داده‌ای برای این بازه زمانی موجود نیست</p>
+                </div>
+            ) : (
+                <div className="grid gap-6 md:grid-cols-2">
+                    <Panel title="رطوبت خاک">
+                        <LineChart 
+                            labels={labels}  
+                            series={[{ label: 'رطوبت خاک (%)', data: soil as (number | null)[], borderColor: '#16a34a', backgroundColor: '#dcfce7', fill: true }]} 
+                            yAxisMin={0}
+                            yAxisMax={100}
+                        />
+                    </Panel>
+                    <Panel title="رطوبت">
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'رطوبت (%)', data: humidity as (number | null)[], borderColor: '#3b82f6', backgroundColor: '#dbeafe', fill: true }]} 
+                            yAxisMin={0}
+                            yAxisMax={100}
+                        />
+                    </Panel>
+                    <Panel title="دما">
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'دما (°C)', data: temperature as (number | null)[], borderColor: '#ef4444', backgroundColor: '#fee2e2', fill: true }]} 
+                            yAxisMin={tempMinMax.min}
+                            yAxisMax={tempMinMax.max}
+                        />
+                    </Panel>
+                    <Panel title="نور">
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'Lux', data: lux as (number | null)[], borderColor: '#a855f7', backgroundColor: '#f3e8ff', fill: true }]} 
+                            yAxisMin={luxMinMax.min}
+                            yAxisMax={luxMinMax.max}
+                        />
+                    </Panel>
+                    <Panel title="گاز CO">
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'CO (ppm)', data: gas as (number | null)[], borderColor: '#f59e0b', backgroundColor: '#fef3c7', fill: true }]} 
+                            yAxisMin={0}
+                            yAxisMax={100}
+                        />
+                    </Panel>
+                </div>
+            )}
+        </div>
+    )
+}
+