- {pagedResult.items.map((device) => (
-
-
-
-
-
-
- {device.deviceName}
-
-
- {device.location || 'بدون موقعیت'}
-
-
-
{device.userName} {device.userFamily}
+ {pagedResult.items.map((device) => {
+ const today = `${getCurrentPersianYear()}/${String(getCurrentPersianMonth()).padStart(2, '0')}/${String(getCurrentPersianDay()).padStart(2, '0')}`
+ return (
+
+
+
+
+
+
+
+ {device.deviceName}
+
+
+ {device.location || 'بدون موقعیت'}
+
+
+ {device.userName} {device.userFamily}
+
+
+
+
-
-
-
-
-
-
- ))}
+
+
+ )
+ })}
{/* Pagination */}
diff --git a/src/app/globals.css b/src/app/globals.css
index a72a6d1..e188e3e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -35,4 +35,76 @@ body {
font-feature-settings: 'ss01';
font-variant-numeric: persian;
font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+}
+
+/* Markdown content styles */
+.markdown-content {
+ line-height: 1.8;
+ color: #374151;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4 {
+ color: #1f2937;
+ font-weight: 700;
+ margin-top: 1.5em;
+ margin-bottom: 0.5em;
+}
+
+.markdown-content h1 {
+ font-size: 1.5rem;
+}
+
+.markdown-content h2 {
+ font-size: 1.25rem;
+}
+
+.markdown-content h3 {
+ font-size: 1.125rem;
+}
+
+.markdown-content h4 {
+ font-size: 1rem;
+}
+
+.markdown-content p {
+ margin-bottom: 1em;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+ margin: 0.75em 0;
+ padding-right: 1.5em;
+}
+
+.markdown-content li {
+ margin: 0.25em 0;
+}
+
+.markdown-content strong {
+ font-weight: 700;
+ color: #1f2937;
+}
+
+.markdown-content code {
+ background-color: #f3f4f6;
+ padding: 0.125em 0.375em;
+ border-radius: 0.25em;
+ font-size: 0.875em;
+}
+
+.markdown-content blockquote {
+ border-right: 4px solid #6366f1;
+ padding-right: 1em;
+ margin: 1em 0;
+ color: #6b7280;
+ font-style: italic;
+}
+
+.markdown-content hr {
+ border: none;
+ border-top: 1px solid #e5e7eb;
+ margin: 1.5em 0;
}
\ No newline at end of file
diff --git a/src/app/telemetry/GreenHomeBack.code-workspace b/src/app/telemetry/GreenHomeBack.code-workspace
new file mode 100644
index 0000000..e7c8d97
--- /dev/null
+++ b/src/app/telemetry/GreenHomeBack.code-workspace
@@ -0,0 +1,10 @@
+{
+ "folders": [
+ {
+ "path": "../../../../GreenHomeBack"
+ },
+ {
+ "path": "../../.."
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/app/telemetry/page.tsx b/src/app/telemetry/page.tsx
deleted file mode 100644
index ff92c4b..0000000
--- a/src/app/telemetry/page.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-"use client"
-import { useEffect, useMemo, useState, useCallback, useRef } from 'react'
-import { api, TelemetryDto } from '@/lib/api'
-import { Card, DashboardGrid } from '@/components/DashboardCards'
-import { LineChart, Panel } from '@/components/Charts'
-import { persianToGregorian, getCurrentPersianDay, getCurrentPersianYear, getCurrentPersianMonth } from '@/lib/persian-date'
-import { BarChart3, ChevronRight, Calendar as CalendarIcon, RefreshCw } from 'lucide-react'
-import Link from 'next/link'
-import Loading from '@/components/Loading'
-
-// زمان بهروزرسانی خودکار (به میلیثانیه) - میتوانید این مقدار را تغییر دهید
-const AUTO_REFRESH_INTERVAL = 10 * 1000 // 10 ثانیه
-
-type TimeRange = 'today' | '1day' | '1hour' | '2hours' | '6hours' | '10hours'
-
-const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
- { value: 'today', label: 'امروز' },
- { value: '1day', label: '۲۴ ساعت اخیر' },
- { value: '10hours', label: '۱۰ ساعت اخیر' },
- { value: '6hours', label: '۶ ساعت اخیر' },
- { value: '2hours', label: 'دو ساعت اخیر' },
- { value: '1hour', label: 'یک ساعت اخیر' },
-]
-
-function useQueryParam(name: string) {
- if (typeof window === 'undefined') return null as string | null
- return new URLSearchParams(window.location.search).get(name)
-}
-
-export default function TelemetryPage() {
- const [telemetry, setTelemetry] = useState
([])
- const [total, setTotal] = useState(0)
- const [loading, setLoading] = useState(true)
- const [lastUpdate, setLastUpdate] = useState(null)
- const [timeRange, setTimeRange] = useState('1day')
- const deviceId = Number(useQueryParam('deviceId') ?? '1')
- const dateParam = useQueryParam('date') ?? `${getCurrentPersianYear()}/${getCurrentPersianMonth()}/${getCurrentPersianDay()}`
- const intervalRef = useRef(null)
-
- const selectedDate = useMemo(() => {
- if (!dateParam) return null
- try {
- const decodedDate = decodeURIComponent(dateParam)
- return decodedDate
- } catch (error) {
- console.error('Error decoding date parameter:', error)
- return null
- }
- }, [dateParam])
-
- // تابع بارگذاری دادهها
- const loadData = useCallback(async (showLoading = true) => {
- if (!selectedDate) {
- setLoading(false)
- return
- }
-
- if (showLoading) {
- setLoading(true)
- }
-
- try {
- let startDate: Date
- let endDate: Date
-
- if (timeRange === 'today') {
- // برای یک روز، از تاریخ انتخابی استفاده میکنیم
- const [year, month, day] = selectedDate.split('/').map(Number)
- startDate = persianToGregorian(year, month, day)
- startDate.setHours(0, 0, 0, 0)
- endDate = new Date(startDate)
- endDate.setHours(23, 59, 59, 999)
- } else {
- // برای بازههای زمانی دیگر، از زمان فعلی به عقب میرویم
- endDate = new Date()
- const now = new Date()
-
- switch (timeRange) {
- case '1day':
- startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000)
- break
- case '1hour':
- startDate = new Date(now.getTime() - 60 * 60 * 1000)
- break
- case '2hours':
- startDate = new Date(now.getTime() - 2 * 60 * 60 * 1000)
- break
- case '6hours':
- startDate = new Date(now.getTime() - 6 * 60 * 60 * 1000)
- break
- case '10hours':
- startDate = new Date(now.getTime() - 10 * 60 * 60 * 1000)
- break
- default:
- startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000)
- }
- }
-
- const startUtc = startDate.toISOString();
- const endUtc = endDate.toISOString();
-
- const result = await api.listTelemetry({ deviceId, startUtc, endUtc, pageSize: 100000 })
- setTelemetry(result.items)
- setTotal(result.totalCount)
- setLastUpdate(new Date())
- } catch (error) {
- console.error('Error loading telemetry:', error)
- } finally {
- if (showLoading) {
- setLoading(false)
- }
- }
- }, [deviceId, selectedDate, timeRange])
-
- // بارگذاری اولیه
- useEffect(() => {
- loadData(true)
- }, [loadData])
-
- // تنظیم بهروزرسانی خودکار
- useEffect(() => {
- if (!selectedDate) return
-
- // پاک کردن interval قبلی
- if (intervalRef.current) {
- clearInterval(intervalRef.current)
- }
-
- // تنظیم interval جدید
- intervalRef.current = setInterval(() => {
- loadData(false) // بدون نمایش loading
- }, AUTO_REFRESH_INTERVAL)
-
- // Cleanup
- return () => {
- if (intervalRef.current) {
- clearInterval(intervalRef.current)
- }
- }
- }, [selectedDate, loadData])
-
- const sortedTelemetry = useMemo(() => {
- return [...telemetry].sort((a, b) => {
- const aTime = a.serverTimestampUtc || a.timestampUtc
- const bTime = b.serverTimestampUtc || b.timestampUtc
- return new Date(aTime).getTime() - new Date(bTime).getTime()
- })
- }, [telemetry])
-
- // تبدیل timestamp به ساعت (HH:MM:SS)
- const labels = useMemo(() => {
- return sortedTelemetry.map(t => {
- const timestamp = t.serverTimestampUtc || t.timestampUtc
- const date = new Date(timestamp)
- const hours = date.getHours().toString().padStart(2, '0')
- const minutes = date.getMinutes().toString().padStart(2, '0')
- const seconds = date.getSeconds().toString().padStart(2, '0')
- return `${hours}:${minutes}:${seconds}`
- })
- }, [sortedTelemetry])
- const soil = useMemo(() => sortedTelemetry.map(t => Number(t.soilPercent ?? 0)), [sortedTelemetry])
- const temp = useMemo(() => sortedTelemetry.map(t => Number(t.temperatureC ?? 0)), [sortedTelemetry])
- const hum = useMemo(() => sortedTelemetry.map(t => Number(t.humidityPercent ?? 0)), [sortedTelemetry])
- const gas = useMemo(() => sortedTelemetry.map(t => Number(t.gasPPM ?? 0)), [sortedTelemetry])
- const lux = useMemo(() => sortedTelemetry.map(t => Number(t.lux ?? 0)), [sortedTelemetry])
-
-
- const tempMinMax = useMemo(() => {
- const min = Math.min(...temp);
- const max = Math.max(...temp);
- return {
- min: min < 0 ? Math.floor(min / 10) * 10 : 0,
- max: max > 40 ? Math.floor(max / 10) * 10 : 40
- }
- }, [temp]);
-
- const luxMinMax = useMemo(() => {
- const max = Math.max(...lux);
- return {
- min: 0,
- max: max > 2000 ? Math.floor(max / 1000) * 1000 : 2000
- }
- }, [lux]);
-
-
- if (loading) {
- return
- }
-
- if (!selectedDate) {
- return (
-
-
-
-
تاریخ انتخاب نشده است
-
-
- بازگشت به تقویم
-
-
-
-
- {/* Header */}
-
-
-
- بازگشت به تقویم
-
-
-
-
-
-
-
-
- جزئیات دادههای {selectedDate}
-
- {lastUpdate && (
-
- آخرین بهروزرسانی: {lastUpdate.toLocaleTimeString('fa-IR')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{title}
+
+
{title}
-
)
}
-export function LineChart({ labels, series, yAxisMin, yAxisMax }: Props) {
+export function LineChart({ labels, series, yAxisMin, yAxisMax, dataGaps = [] }: Props) {
+ // Find gap annotations based on null values in data
+ const gapAnnotations = React.useMemo(() => {
+ const annotations: any = {}
+ let gapCount = 0
+
+ // Find nulls in the first series data
+ if (series.length > 0) {
+ const data = series[0].data
+ for (let i = 0; i < data.length; i++) {
+ if (data[i] === null) {
+ // Find the gap range
+ const startIdx = Math.max(0, i - 1)
+ const endIdx = Math.min(data.length - 1, i + 1)
+
+ annotations[`gap-${gapCount++}`] = {
+ type: 'box' as const,
+ xMin: startIdx,
+ xMax: endIdx,
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
+ borderColor: 'rgba(239, 68, 68, 0.3)',
+ borderWidth: 1,
+ borderDash: [5, 5],
+ label: {
+ display: false
+ }
+ }
+ }
+ }
+ }
+
+ return annotations
+ }, [series])
+
+ // Calculate hour range and determine which hours to show
+ const hourConfig = React.useMemo(() => {
+ const validLabels = labels.filter(l => l)
+ if (validLabels.length === 0) {
+ return { startHour: 0, endHour: 24, hours: Array.from({length: 25}, (_, i) => i) }
+ }
+
+ const firstTime = validLabels[0]
+ const lastTime = validLabels[validLabels.length - 1]
+
+ if (!firstTime || !lastTime) {
+ return { startHour: 0, endHour: 24, hours: Array.from({length: 25}, (_, i) => i) }
+ }
+
+ const [firstHour] = firstTime.split(':').map(Number)
+ const [lastHour] = lastTime.split(':').map(Number)
+
+ // Create array of hours to show (from start to end, one per hour)
+ const startHour = firstHour
+ let endHour = lastHour
+
+ // If last hour is the same as first, extend to next hour
+ if (endHour <= startHour) {
+ endHour = startHour + 24
+ }
+
+ // Create array of hours
+ const hours: number[] = []
+ for (let h = startHour; h <= endHour; h++) {
+ hours.push(h % 24)
+ }
+
+ return { startHour, endHour, hours }
+ }, [labels])
+
+ // Create map of label index to hour
+ const labelHours = React.useMemo(() => {
+ return labels.map(label => {
+ if (!label) return null
+ const [hour] = label.split(':').map(Number)
+ return hour
+ })
+ }, [labels])
+
return (
-
+
h === hour)
+
+ // Only show label if this is the first occurrence of this hour
+ if (firstIndexOfHour !== index) return ''
+
+ // Show only the hour number
+ return toPersianDigits(hour.toString())
}
},
grid: {
+ display: false // Remove grid lines
+ },
+ border: {
display: true,
- color: 'rgba(0, 0, 0, 0.05)'
+ color: 'rgba(0, 0, 0, 0.1)'
}
},
y: {
@@ -118,15 +225,19 @@ export function LineChart({ labels, series, yAxisMin, yAxisMax }: Props) {
ticks: {
font: {
family: "'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif",
- size: 11
+ size: 10
},
+ padding: 8,
callback: function(value) {
return toPersianDigits(value.toString())
}
},
grid: {
+ display: false // Remove grid lines
+ },
+ border: {
display: true,
- color: 'rgba(0, 0, 0, 0.05)'
+ color: 'rgba(0, 0, 0, 0.1)'
}
}
}
diff --git a/src/components/Gauges.tsx b/src/components/Gauges.tsx
new file mode 100644
index 0000000..5393186
--- /dev/null
+++ b/src/components/Gauges.tsx
@@ -0,0 +1,330 @@
+"use client"
+
+// تابع تبدیل ارقام انگلیسی به فارسی
+function toPersianDigits(num: number | string): string {
+ const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
+ return num.toString().replace(/\d/g, (digit) => persianDigits[parseInt(digit)])
+}
+
+// Temperature Gauge - Semi-circular gauge with blue to red gradient
+type TemperatureGaugeProps = {
+ value: number
+ min?: number
+ max?: number
+}
+
+export function TemperatureGauge({ value, min = -20, max = 80 }: TemperatureGaugeProps) {
+ const range = max - min
+ const percentage = Math.max(0, Math.min(100, ((value - min) / range) * 100))
+ const valueAngle = (percentage / 100) * 180 // 0 to 180 degrees
+
+ // Create gradient stops for temperature (blue to red)
+ const gradientId = `temp-gradient-${Math.random().toString(36).substr(2, 9)}`
+ const glowId = `temp-glow-${Math.random().toString(36).substr(2, 9)}`
+
+ // Center point and radius for the arc
+ const cx = 75
+ const cy = 75
+ const radius = 50
+ const gaugeWidth = 18
+
+ // Calculate pointer position (triangle pointing inward from outside)
+ const pointerAngle = (180 - valueAngle) * (Math.PI / 180)
+ const pointerOuterRadius = radius - gaugeWidth / 2 - 2
+ const pointerX = cx + pointerOuterRadius * Math.cos(pointerAngle)
+ const pointerY = cy - pointerOuterRadius * Math.sin(pointerAngle)
+
+ // Triangle points for the pointer
+ const triangleSize = 6
+ const perpAngle = pointerAngle + Math.PI / 2
+ const p1x = pointerX + triangleSize * Math.cos(perpAngle)
+ const p1y = pointerY - triangleSize * Math.sin(perpAngle)
+ const p2x = pointerX - triangleSize * Math.cos(perpAngle)
+ const p2y = pointerY + triangleSize * Math.sin(perpAngle)
+ const p3x = cx + (pointerOuterRadius - 12) * Math.cos(pointerAngle)
+ const p3y = cy - (pointerOuterRadius - 12) * Math.sin(pointerAngle)
+
+ // Generate tick marks and labels every 10 degrees
+ const ticks = []
+ for (let temp = min; temp <= max; temp += 10) {
+ const tickPercentage = ((temp - min) / range) * 100
+ const tickAngle = (180 - (tickPercentage / 100) * 180) * (Math.PI / 180)
+ // خطوط بیرون گیج با فاصله کم - کوتاهتر (نصف)
+ const innerX = cx + (radius + gaugeWidth / 2 + 3) * Math.cos(tickAngle)
+ const innerY = cy - (radius + gaugeWidth / 2 + 3) * Math.sin(tickAngle)
+ const outerX = cx + (radius + gaugeWidth / 2 + 6) * Math.cos(tickAngle)
+ const outerY = cy - (radius + gaugeWidth / 2 + 6) * Math.sin(tickAngle)
+ const labelX = cx + (radius + gaugeWidth / 2 + 14) * Math.cos(tickAngle)
+ const labelY = cy - (radius + gaugeWidth / 2 + 14) * Math.sin(tickAngle)
+
+ ticks.push({ temp, outerX, outerY, innerX, innerY, labelX, labelY })
+ }
+
+ return (
+
+
+
+ {/* Center value */}
+
+ {toPersianDigits(value.toFixed(1))}
+ °C
+
+
+
+
+
+
+ {/* Value below */}
+
+ {toPersianDigits(Math.round(value))}
+ Lux
+
+
+
+
+ {/* Center content */}
+
+ {toPersianDigits(Math.round(value))}
+ ppm
+
+
+ i.toString()),
+ datasets: [{
+ data: sampledData,
+ borderColor: color,
+ backgroundColor: fillColor,
+ fill: true,
+ tension: 0.4,
+ pointRadius: 0,
+ borderWidth: 2
+ }]
+ }}
+ options={{
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: { display: false },
+ tooltip: { enabled: false }
+ },
+ scales: {
+ x: {
+ display: false,
+ grid: { display: false }
+ },
+ y: {
+ display: false,
+ grid: { display: false }
+ }
+ },
+ interaction: {
+ intersect: false,
+ mode: 'nearest'
+ },
+ events: [] // Disable all interactions
+ }}
+ />
+
+ )
+}
+
diff --git a/src/components/daily-report/AnalysisTab.tsx b/src/components/daily-report/AnalysisTab.tsx
new file mode 100644
index 0000000..518c4aa
--- /dev/null
+++ b/src/components/daily-report/AnalysisTab.tsx
@@ -0,0 +1,80 @@
+import { Loader2, AlertCircle, RefreshCw } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import { DailyReportDto } from '@/lib/api'
+import { toPersianDigits } from './utils'
+
+type AnalysisTabProps = {
+ loading: boolean
+ error: string | null
+ dailyReport: DailyReportDto | null
+ onRetry: () => void
+}
+
+export function AnalysisTab({ loading, error, dailyReport, onRetry }: AnalysisTabProps) {
+ if (loading) {
+ return (
+
+
+
در حال دریافت تحلیل...
+
+
+
{error}
+
+
+
تحلیلی برای نمایش وجود ندارد
+
+ {/* Report Info */}
+
+
+
+
تعداد رکوردها
+
{toPersianDigits(dailyReport.recordCount)}
+
+
+
رکوردهای نمونه
+
{toPersianDigits(dailyReport.sampledRecordCount)}
+
+
+
توکنهای مصرفی
+
{toPersianDigits(dailyReport.totalTokens)}
+
+
+
منبع
+
{dailyReport.fromCache ? '💾 کش' : '🆕 جدید'}
+
+
+
+
+ {/* Analysis Content */}
+
+ {dailyReport.analysis}
+
+
+ {/* Time Range Selector */}
+
+
+ {/* Charts Grid */}
+ {totalRecords === 0 ? (
+
+
+
دادهای برای این بازه زمانی موجود نیست
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Header */}
+
+
{config.title}
+
+
+ {/* Main Content - Gauge on left, Stats on right */}
+
+
+ {/* Gauge on left */}
+
+ {renderGauge()}
+
+
+ {/* Stats on right - stacked */}
+
+
+
+
+ حداکثر
+
+ {toPersianDigits(maxValue.toFixed(1))} {config.unit}
+
+
+
+
+
+
+ حداقل
+
+ {toPersianDigits(minValue.toFixed(1))} {config.unit}
+
+
+
+
+
+
+
+ {/* Mini Chart */}
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
diff --git a/src/components/daily-report/TimeRangeSelector.tsx b/src/components/daily-report/TimeRangeSelector.tsx
new file mode 100644
index 0000000..49661c2
--- /dev/null
+++ b/src/components/daily-report/TimeRangeSelector.tsx
@@ -0,0 +1,265 @@
+import { BarChart3, AlertTriangle } from 'lucide-react'
+import { toPersianDigits, DataGap } from './utils'
+
+type TimeRangeSelectorProps = {
+ startMinute: number // دقیقه از نیمه شب (0-1439)
+ endMinute: number // دقیقه از نیمه شب (0-1439)
+ onStartMinuteChange: (minute: number) => void
+ onEndMinuteChange: (minute: number) => void
+ totalRecords: number
+ dataGaps?: DataGap[] // گپهای داده
+}
+
+// محاسبه زمان طلوع و غروب خورشید برای قم
+// عرض جغرافیایی: 34.6416° شمالی، طول جغرافیایی: 50.8746° شرقی
+function calculateSunTimes() {
+ const latitude = 34.6416
+ const now = new Date()
+ const dayOfYear = Math.floor((now.getTime() - new Date(now.getFullYear(), 0, 0).getTime()) / 86400000)
+
+ // محاسبه انحراف خورشید (Solar Declination)
+ const declination = -23.44 * Math.cos((2 * Math.PI / 365) * (dayOfYear + 10))
+
+ // محاسبه زاویه ساعتی طلوع (Hour Angle)
+ const latRad = latitude * Math.PI / 180
+ const decRad = declination * Math.PI / 180
+ const cosHourAngle = -Math.tan(latRad) * Math.tan(decRad)
+
+ // در صورتی که خورشید طلوع/غروب میکند
+ if (Math.abs(cosHourAngle) <= 1) {
+ const hourAngle = Math.acos(cosHourAngle) * 180 / Math.PI
+
+ // زمان طلوع و غروب به ساعت محلی (با دقیقه دقیق)
+ const sunriseDecimal = 12 - hourAngle / 15 + (50.8746 / 15 - 3.5) // تصحیح برای طول جغرافیایی و منطقه زمانی ایران
+ const sunsetDecimal = 12 + hourAngle / 15 + (50.8746 / 15 - 3.5)
+
+ // تبدیل به ساعت و دقیقه
+ const sunriseHour = Math.floor(sunriseDecimal)
+ const sunriseMinute = Math.round((sunriseDecimal - sunriseHour) * 60)
+
+ const sunsetHour = Math.floor(sunsetDecimal)
+ const sunsetMinute = Math.round((sunsetDecimal - sunsetHour) * 60)
+
+ return {
+ sunrise: { hour: sunriseHour, minute: sunriseMinute, decimal: sunriseDecimal },
+ sunset: { hour: sunsetHour, minute: sunsetMinute, decimal: sunsetDecimal }
+ }
+ }
+
+ // مقادیر پیشفرض
+ return {
+ sunrise: { hour: 6, minute: 0, decimal: 6 },
+ sunset: { hour: 18, minute: 0, decimal: 18 }
+ }
+}
+
+export function TimeRangeSelector({
+ startMinute,
+ endMinute,
+ onStartMinuteChange,
+ onEndMinuteChange,
+ totalRecords,
+ dataGaps = []
+}: TimeRangeSelectorProps) {
+ const { sunrise, sunset } = calculateSunTimes()
+
+ // تبدیل دقیقه به ساعت برای نمایش
+ const startHour = Math.floor(startMinute / 60)
+ const startMin = startMinute % 60
+ const endHour = Math.floor(endMinute / 60)
+ const endMin = endMinute % 60
+
+ // محاسبه موقعیت دقیق با دقیقه (از 0 تا 24 ساعت)
+ const sunrisePosition = sunrise.decimal
+ const sunsetPosition = sunset.decimal
+
+ // محاسبه درصد موقعیت برای نمایش (0 ساعت در راست، 1440 دقیقه در چپ)
+ const sunrisePercent = ((1439 - (sunrisePosition * 60)) / 1439) * 100
+ const sunsetPercent = ((1439 - (sunsetPosition * 60)) / 1439) * 100
+
+ return (
+
+ {/* Header */}
+
+
+
محدوده زمانی
+ {dataGaps.length > 0 && (
+
+
+
{toPersianDigits(dataGaps.length)} گپ در دادهها
+
+ )}
+
+
+
+
+ {/* Timeline Selector */}
+
+ {/* Track background */}
+
+ {/* Sunrise dashed line */}
+
+
+ {/* Sunset dashed line */}
+
+
+
+ طلوع {toPersianDigits(sunrise.hour.toString().padStart(2, '0'))}:{toPersianDigits(sunrise.minute.toString().padStart(2, '0'))}
+
+
+
+
+
+
+
+
+ {/* Data gaps visualization */}
+ {dataGaps.map((gap, idx) => {
+ const gapStartPercent = ((1439 - gap.startMinute) / 1439) * 100
+ const gapEndPercent = ((1439 - gap.endMinute) / 1439) * 100
+ const gapWidth = gapStartPercent - gapEndPercent
+ const gapHours = Math.floor(gap.durationMinutes / 60)
+ const gapMins = gap.durationMinutes % 60
+
+ return (
+
+ {/* Gap area */}
+
+ {/* Warning icon in gap */}
+
+
+
+ {/* Gap tooltip */}
+ {gapWidth > 5 && (
+
+ گپ {toPersianDigits(gapHours)}:{toPersianDigits(gapMins.toString().padStart(2, '0'))}
+
+ )}
+
+ )
+ })}
+
+
+ غروب {toPersianDigits(sunset.hour.toString().padStart(2, '0'))}:{toPersianDigits(sunset.minute.toString().padStart(2, '0'))}
+
+
+ {/* Hour markers inside track */}
+ {[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22].map(hour => (
+
+
+
+ {toPersianDigits(hour.toString().padStart(2, '0'))}
+
+
+
+
+ ))}
+
+
+ {/* Start time label - above handle */}
+
+
+ {toPersianDigits(startHour.toString().padStart(2, '0'))}:{toPersianDigits(startMin.toString().padStart(2, '0'))}
+
+
+
+ {/* End time label - above handle */}
+
+
+ {toPersianDigits(endHour.toString().padStart(2, '0'))}:{toPersianDigits(endMin.toString().padStart(2, '0'))}
+
+
+
+ {/* Range inputs container */}
+
+ {/* Start time slider */}
+ {
+ const val = 1439 - Number(e.target.value)
+ if (val <= endMinute) onStartMinuteChange(val)
+ }}
+ className="absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-20 [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:bg-emerald-500 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:active:cursor-grabbing [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-20 [&::-moz-range-thumb]:rounded-sm [&::-moz-range-thumb]:bg-emerald-500 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:border-0 pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto"
+ />
+
+ {/* End time slider */}
+ {
+ const val = 1439 - Number(e.target.value)
+ if (val >= startMinute) onEndMinuteChange(val)
+ }}
+ className="absolute inset-0 w-full h-full appearance-none bg-transparent cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-20 [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:bg-rose-500 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:active:cursor-grabbing [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-20 [&::-moz-range-thumb]:rounded-sm [&::-moz-range-thumb]:bg-rose-500 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:border-0 pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto"
+ />
+
+
+
+ {/* Info section */}
+
+
+
+ {toPersianDigits(Math.floor((endMinute - startMinute + 1) / 60))}:{toPersianDigits(((endMinute - startMinute + 1) % 60).toString().padStart(2, '0'))}
+
+ بازه انتخاب شده
+
+
+ {totalRecords > 0
+ ? <>{toPersianDigits(totalRecords)} رکورد
+ : <>بدون رکورد
+ }
+
+
+
+
+
در حال دریافت اطلاعات آب و هوا...
+
+
+
{error}
+
+
+ {/* Location Header */}
+
+
+
+ قم، ایران
+
+
+ {isToday ? 'پیشبینی هواشناسی برای مدیریت گلخانه' : 'وضعیت آب و هوای روز انتخاب شده'}
+
+
+
+ {/* Greenhouse Alerts - Only for today */}
+ {isToday && alerts.length > 0 && (
+
+
🌱 هشدارها و توصیههای گلخانه
+ {alerts.map((alert, index) => (
+
+
{alert.title}
+
{alert.description}
+
+ ))}
+
+ )}
+
+ {/* Today's Status Card */}
+
+
+ {/* Current Weather Header - Only for today */}
+ {isToday && (
+
+
+
+
🌡️ الان
+
+
+ {toPersianDigits(Math.round(weatherData.current.temperature))}
+
+ درجه
+
+
+
+ {(() => {
+ const IconComponent = getWeatherInfo(weatherData.current.weatherCode).icon
+ return
+ })()}
+
{getWeatherInfo(weatherData.current.weatherCode).description}
+
+
+
+ )}
+
+ {/* Past Date Header */}
+ {!isToday && (
+
+
+
📅 وضعیت آب و هوای روز
+
{selectedDate}
+
+
+ )}
+
+ {/* Status Grid */}
+
+ {/* Temperature Card */}
+
35 ? 'bg-red-100 border-2 border-red-300' :
+ 'bg-green-100 border-2 border-green-300'
+ }`}>
+
+
35 ? 'bg-red-500' :
+ 'bg-green-500'
+ }`}>
+
+
+
+
{isToday ? 'دمای امروز' : 'دمای روز'}
+
35 ? 'text-red-600' :
+ 'text-green-600'
+ }`}>
+ {weatherData.daily[0]?.tempMin < 5 ? '❄️ سرد!' :
+ weatherData.daily[0]?.tempMax > 35 ? '🔥 گرم!' :
+ '✅ مناسب'}
+
+
+
+
+
+
🌙 شب
+
{toPersianDigits(Math.round(weatherData.daily[0]?.tempMin || 0))}°
+
+
←
+
+
☀️ روز
+
{toPersianDigits(Math.round(weatherData.daily[0]?.tempMax || 0))}°
+
+
+
+
+ {/* Rain Card */}
+ {isToday ? (
+ /* Forecast: احتمال بارش */
+
60 ? 'bg-blue-100 border-2 border-blue-300' :
+ (weatherData.daily[0]?.precipitationProbability || 0) > 30 ? 'bg-sky-50 border-2 border-sky-200' :
+ 'bg-amber-50 border-2 border-amber-200'
+ }`}>
+
+
60 ? 'bg-blue-500' :
+ (weatherData.daily[0]?.precipitationProbability || 0) > 30 ? 'bg-sky-400' :
+ 'bg-amber-400'
+ }`}>
+ {(weatherData.daily[0]?.precipitationProbability || 0) > 30 ?
+ :
+
+ }
+
+
+
بارش
+
60 ? 'text-blue-600' :
+ (weatherData.daily[0]?.precipitationProbability || 0) > 30 ? 'text-sky-600' :
+ 'text-amber-600'
+ }`}>
+ {(weatherData.daily[0]?.precipitationProbability || 0) > 60 ? '🌧️ باران میآید' :
+ (weatherData.daily[0]?.precipitationProbability || 0) > 30 ? '🌦️ شاید ببارد' :
+ '☀️ خشک است'}
+
+
+
+
+
{toPersianDigits(weatherData.daily[0]?.precipitationProbability || 0)}%
+
احتمال بارش
+
+
+ ) : (
+ /* Historical: میزان بارش واقعی */
+
5 ? 'bg-blue-100 border-2 border-blue-300' :
+ (weatherData.daily[0]?.precipitation || 0) > 0 ? 'bg-sky-50 border-2 border-sky-200' :
+ 'bg-amber-50 border-2 border-amber-200'
+ }`}>
+
+
5 ? 'bg-blue-500' :
+ (weatherData.daily[0]?.precipitation || 0) > 0 ? 'bg-sky-400' :
+ 'bg-amber-400'
+ }`}>
+ {(weatherData.daily[0]?.precipitation || 0) > 0 ?
+ :
+
+ }
+
+
+
بارش
+
5 ? 'text-blue-600' :
+ (weatherData.daily[0]?.precipitation || 0) > 0 ? 'text-sky-600' :
+ 'text-amber-600'
+ }`}>
+ {(weatherData.daily[0]?.precipitation || 0) > 5 ? '🌧️ بارش زیاد' :
+ (weatherData.daily[0]?.precipitation || 0) > 0 ? '🌦️ بارش کم' :
+ '☀️ بدون بارش'}
+
+
+
+
+
{toPersianDigits((weatherData.daily[0]?.precipitation || 0).toFixed(1))}
+
میلیمتر بارش
+
+
+ )}
+
+ {/* Sunlight Card */}
+
+
+
+
+
+
+
نور آفتاب
+
+ {(weatherData.daily[0]?.sunshineDuration || 0) / 3600 > 8 ? '☀️ آفتاب زیاد' :
+ (weatherData.daily[0]?.sunshineDuration || 0) / 3600 > 4 ? '🌤️ آفتاب متوسط' :
+ '☁️ کمآفتاب'}
+
+
+
+
+
+
{toPersianDigits(Math.round((weatherData.daily[0]?.sunshineDuration || 0) / 3600))}
+
ساعت آفتاب
+
+
+
{toPersianDigits(Math.round(weatherData.daily[0]?.uvIndexMax || 0))}
+
شاخص UV
+
+
+
+
+ {/* Wind & Humidity Card */}
+
+
+
+
+
+
+
باد و رطوبت
+
+ {(weatherData.daily[0]?.windSpeedMax || 0) > 40 ? '💨 باد شدید!' :
+ (weatherData.daily[0]?.windSpeedMax || 0) > 20 ? '🍃 وزش باد' :
+ '😌 آرام'}
+
+
+
+
+
+
{toPersianDigits(Math.round(weatherData.daily[0]?.windSpeedMax || 0))}
+
کیلومتر/ساعت باد
+
+
+
{toPersianDigits(weatherData.current.humidity)}%
+
رطوبت هوا
+
+
+
+
+
+
+ {/* Hourly Forecast - Only for today */}
+ {isToday && (
+
+
+
+ 🕐 وضعیت ساعت به ساعت امروز
+
+
+
+
+
+
+ {weatherData.hourly.map((hour, index) => {
+ const hourNum = new Date(hour.time).getHours()
+ const isNow = hourNum === new Date().getHours()
+ const IconComponent = getWeatherInfo(hour.weatherCode).icon
+ const isHot = hour.temperature > 35
+ const isCold = hour.temperature < 10
+
+ return (
+
+
+ {isNow ? '⏰ الان' : `${toPersianDigits(hourNum)}:۰۰`}
+
+
+
+
+
+
+
+ {toPersianDigits(Math.round(hour.temperature))}°
+
+
+
+
+ {toPersianDigits(hour.humidity)}%
+
+
+ {hour.precipitation > 0 && (
+
+ 🌧️ {toPersianDigits(hour.precipitation.toFixed(1))}
+
+ )}
+
+ )
+ })}
+
+
+
👈 برای دیدن ساعتهای بیشتر به چپ بکشید
+
+
+ )}
+
+
+ {/* 7-Day Forecast - Only for today */}
+ {isToday && (
+
+
+
+ پیشبینی ۷ روز آینده
+
+
+ {weatherData.daily.map((day, index) => {
+ const weatherInfo = getWeatherInfo(day.weatherCode)
+ const IconComponent = weatherInfo.icon
+ const isToday = index === 0
+ const hasFrost = day.tempMin < 5
+ const hasHeat = day.tempMax > 35
+ const isExpanded = expandedDayIndex === index
+
+ return (
+
+
+
+ {isExpanded && (
+
+
+
+
+
+ دما
+
+
{toPersianDigits(Math.round(day.tempMax))}°
+
حداکثر
+
{toPersianDigits(Math.round(day.tempMin))}°
+
حداقل
+
+
+
+
+ بارش
+
+
{toPersianDigits(day.precipitationProbability)}%
+
احتمال
+
{toPersianDigits(day.precipitation.toFixed(1))}
+
میلیمتر
+
+
+
+
+ ساعات آفتابی
+
+
{toPersianDigits(Math.round(day.sunshineDuration / 3600))}
+
ساعت
+
{toPersianDigits(Math.round(day.uvIndexMax))}
+
UV Index
+
+
+
+
+ باد
+
+
{toPersianDigits(Math.round(day.windSpeedMax))}
+
کیلومتر/ساعت
+
+
+
+ )}
+
+ )
+ })}
+
+
+ )}
+