From e435630edbea6d6b1cebf4f0d61300837d86527b Mon Sep 17 00:00:00 2001
From: alireza <a.r.motahhari@gmail.com>
Date: Thu, 19 Feb 2026 06:52:45 +0330
Subject: [PATCH] add ability to customize whitch paremeters to show

---
 src/app/daily-report/page.tsx              | 21 +++--
 src/components/daily-report/ChartsTab.tsx  | 55 ++++++++----
 src/components/daily-report/SummaryTab.tsx | 97 +++++++++++++---------
 src/lib/api/client.ts                      |  4 +
 src/lib/api/types.ts                       |  5 ++
 5 files changed, 118 insertions(+), 64 deletions(-)

diff --git a/src/app/daily-report/page.tsx b/src/app/daily-report/page.tsx
index 0435724..94a2794 100644
--- a/src/app/daily-report/page.tsx
+++ b/src/app/daily-report/page.tsx
@@ -28,6 +28,7 @@ function DailyReportContent() {
     const [activeTab, setActiveTab] = useState<TabType>('summary')
     const [forecastWeather, setForecastWeather] = useState<WeatherData | null>(null)
     const [forecastWeatherLoading, setForecastWeatherLoading] = useState(false)
+    const [visibleParams, setVisibleParams] = useState<string[] | null>(null)
     
     // Map summary param to chart key
     const paramToChartKey = useCallback((param: string): string => {
@@ -113,6 +114,16 @@ function DailyReportContent() {
 
             const result = await api.listTelemetry({ deviceId, startUtc, endUtc, pageSize: 100000 })
             setTelemetry(result.items)
+
+            console.log(result.items)
+            // Load visible params from server (controls which parameters are shown)
+            try {
+                const params = await api.getDisplayParameters(deviceId)
+                setVisibleParams(params ?? null)
+            } catch (err) {
+                console.error('Error loading display parameters:', err)
+                setVisibleParams(['gas', 'temperature', 'humidity', 'lux'])
+            }
         } catch (error) {
             console.error('Error loading telemetry:', error)
         } finally {
@@ -243,20 +254,20 @@ function DailyReportContent() {
                     className="md:mx-0 mx-[-1rem] md:rounded-xl rounded-none"
                 >
                     {{
-                        summary: <SummaryTab temperature={temp} humidity={hum} soil={soil} gas={gas} lux={lux} forecastWeather={forecastWeather} forecastWeatherLoading={forecastWeatherLoading} onCardClick={handleCardClick} />,
+                        summary: <SummaryTab temperature={temp} humidity={hum} soil={soil} gas={gas} lux={lux} forecastWeather={forecastWeather} forecastWeatherLoading={forecastWeatherLoading} onCardClick={handleCardClick} visibleParams={visibleParams} />,
                         charts: (
                             <Suspense fallback={<Loading message="در حال بارگذاری نمودارها..." />}>
-                                <ChartsTab sortedTelemetry={sortedTelemetry} dataGaps={dataGaps} />
+                                <ChartsTab sortedTelemetry={sortedTelemetry} dataGaps={dataGaps} visibleParams={visibleParams} />
                             </Suspense>
                         ),
-                        weather: selectedDate ? (
+            weather: selectedDate ? (
                             <Suspense fallback={<Loading message="در حال بارگذاری اطلاعات آب و هوا..." />}>
-                                <WeatherTab selectedDate={selectedDate} />
+                <WeatherTab selectedDate={selectedDate} />
                             </Suspense>
                         ) : null,
                         analysis: selectedDate ? (
                             <Suspense fallback={<Loading message="در حال بارگذاری تحلیل..." />}>
-                                <AnalysisTab deviceId={deviceId} selectedDate={selectedDate} />
+                <AnalysisTab deviceId={deviceId} selectedDate={selectedDate} />
                             </Suspense>
                         ) : null,
                     }}
diff --git a/src/components/daily-report/ChartsTab.tsx b/src/components/daily-report/ChartsTab.tsx
index b7072f7..b4da1d1 100644
--- a/src/components/daily-report/ChartsTab.tsx
+++ b/src/components/daily-report/ChartsTab.tsx
@@ -10,11 +10,22 @@ import { useTelemetryCharts } from '@/features/daily-report/hooks/useTelemetryCh
 type ChartsTabProps = {
     sortedTelemetry: TelemetryDto[]
     dataGaps?: DataGap[]
+    visibleParams?: string[] | null
+}
+
+// Map server param keys to chart keys
+const paramToChartKey: Record<string, string> = {
+    temperature: 'temp',
+    humidity: 'hum',
+    gas: 'gas',
+    soil: 'soil',
+    lux: 'lux',
 }
 
 export const ChartsTab = memo(function ChartsTab({
     sortedTelemetry,
     dataGaps = [],
+    visibleParams,
 }: ChartsTabProps) {
     const [chartStartMinute, setChartStartMinute] = useState(0)
     const [chartEndMinute, setChartEndMinute] = useState(1439)
@@ -57,6 +68,12 @@ export const ChartsTab = memo(function ChartsTab({
         filteredDataGaps,
     })
 
+    // If server returned a visibility list, compute allowed chart keys
+    const allowedChartKeys = useMemo(() => {
+        if (!visibleParams || visibleParams.length === 0) return null
+        return new Set(visibleParams.map(p => paramToChartKey[p] ?? p))
+    }, [visibleParams])
+
     return (
         <div className="space-y-6">
             <TimeRangeSelector
@@ -76,24 +93,26 @@ export const ChartsTab = memo(function ChartsTab({
                 />
             ) : (
                 <div className="grid gap-6 md:grid-cols-2">
-                    {charts.map(chart => (
-                        <Panel key={chart.key} title={chart.title} id={`chart-${chart.key}`}>
-                            <LineChart
-                                labels={chartLabels}
-                                series={[
-                                    {
-                                        label: chart.seriesLabel,
-                                        data: chart.data,
-                                        borderColor: chart.color,
-                                        backgroundColor: chart.bgColor,
-                                        fill: true,
-                                    },
-                                ]}
-                                yAxisMin={chart.yAxisMin}
-                                yAxisMax={chart.yAxisMax}
-                            />
-                        </Panel>
-                    ))}
+                    {charts
+                        .filter(chart => !allowedChartKeys || allowedChartKeys.has(chart.key))
+                        .map(chart => (
+                            <Panel key={chart.key} title={chart.title} id={`chart-${chart.key}`}>
+                                <LineChart
+                                    labels={chartLabels}
+                                    series={[
+                                        {
+                                            label: chart.seriesLabel,
+                                            data: chart.data,
+                                            borderColor: chart.color,
+                                            backgroundColor: chart.bgColor,
+                                            fill: true,
+                                        },
+                                    ]}
+                                    yAxisMin={chart.yAxisMin}
+                                    yAxisMax={chart.yAxisMax}
+                                />
+                            </Panel>
+                        ))}
                 </div>
             )}
         </div>
diff --git a/src/components/daily-report/SummaryTab.tsx b/src/components/daily-report/SummaryTab.tsx
index 9efe45f..eb9255f 100644
--- a/src/components/daily-report/SummaryTab.tsx
+++ b/src/components/daily-report/SummaryTab.tsx
@@ -15,9 +15,10 @@ type SummaryTabProps = {
     forecastWeather?: WeatherData | null
     forecastWeatherLoading?: boolean
     onCardClick?: (param: string) => void
+    visibleParams?: string[] | null
 }
 
-export function SummaryTab({ temperature, humidity, soil, gas, lux, forecastWeather, forecastWeatherLoading = false, onCardClick }: SummaryTabProps) {
+export function SummaryTab({ temperature, humidity, soil, gas, lux, forecastWeather, forecastWeatherLoading = false, onCardClick, visibleParams }: SummaryTabProps) {
     const [isAlertsDialogOpen, setIsAlertsDialogOpen] = useState(false)
     
     const alertsCount = useMemo(() => {
@@ -99,46 +100,60 @@ export function SummaryTab({ temperature, humidity, soil, gas, lux, forecastWeat
 
             {/* 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}
-                    onClick={() => onCardClick?.('temperature')}
-                />
-                <SummaryCard
-                    param="humidity"
-                    currentValue={humiditySummary.current}
-                    minValue={humiditySummary.min}
-                    maxValue={humiditySummary.max}
-                    data={humidity}
-                    onClick={() => onCardClick?.('humidity')}
-                />
-                <SummaryCard
-                    param="gas"
-                    currentValue={gasSummary.current}
-                    minValue={gasSummary.min}
-                    maxValue={gasSummary.max}
-                    data={gas}
-                    onClick={() => onCardClick?.('gas')}
-                />
-                <SummaryCard
-                    param="soil"
-                    currentValue={soilSummary.current}
-                    minValue={soilSummary.min}
-                    maxValue={soilSummary.max}
-                    data={soil}
-                    onClick={() => onCardClick?.('soil')}
-                />
-                <SummaryCard
-                    param="lux"
-                    currentValue={luxSummary.current}
-                    minValue={luxSummary.min}
-                    maxValue={luxSummary.max}
-                    data={lux}
-                    onClick={() => onCardClick?.('lux')}
-                />
+                {(!visibleParams || visibleParams.length === 0 || visibleParams.includes('temperature')) && (
+                    <SummaryCard
+                        param="temperature"
+                        currentValue={temperatureSummary.current}
+                        minValue={temperatureSummary.min}
+                        maxValue={temperatureSummary.max}
+                        data={temperature}
+                        onClick={() => onCardClick?.('temperature')}
+                    />
+                )}
+
+                {(!visibleParams || visibleParams.length === 0 || visibleParams.includes('humidity')) && (
+                    <SummaryCard
+                        param="humidity"
+                        currentValue={humiditySummary.current}
+                        minValue={humiditySummary.min}
+                        maxValue={humiditySummary.max}
+                        data={humidity}
+                        onClick={() => onCardClick?.('humidity')}
+                    />
+                )}
+
+                {(!visibleParams || visibleParams.length === 0 || visibleParams.includes('gas')) && (
+                    <SummaryCard
+                        param="gas"
+                        currentValue={gasSummary.current}
+                        minValue={gasSummary.min}
+                        maxValue={gasSummary.max}
+                        data={gas}
+                        onClick={() => onCardClick?.('gas')}
+                    />
+                )}
+
+                {(!visibleParams || visibleParams.length === 0 || visibleParams.includes('soil')) && (
+                    <SummaryCard
+                        param="soil"
+                        currentValue={soilSummary.current}
+                        minValue={soilSummary.min}
+                        maxValue={soilSummary.max}
+                        data={soil}
+                        onClick={() => onCardClick?.('soil')}
+                    />
+                )}
+
+                {(!visibleParams || visibleParams.length === 0 || visibleParams.includes('lux')) && (
+                    <SummaryCard
+                        param="lux"
+                        currentValue={luxSummary.current}
+                        minValue={luxSummary.min}
+                        maxValue={luxSummary.max}
+                        data={lux}
+                        onClick={() => onCardClick?.('lux')}
+                    />
+                )}
             </div>
 
             {/* Alerts Dialog */}
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index 01496e2..1675e07 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -83,6 +83,10 @@ export const api = {
     getDailyReport: (deviceId: number, persianDate: string) => 
         http<DailyReportDto>(`${API_BASE}/api/DailyReport?deviceId=${deviceId}&persianDate=${encodeURIComponent(persianDate)}`),
 
+    // NEW: get displayable parameters from server
+    getDisplayParameters: (deviceId: number) =>
+        http<string[]>(`${API_BASE}/api/display-parameters?deviceId=${deviceId}`),
+
     // Alert Conditions
     getAlertConditions: (deviceId: number) => {
         return http<AlertConditionDto[]>(`${API_BASE}/api/alertconditions/device/${deviceId}`)
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index 7af66a9..4c13779 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -24,6 +24,11 @@ export type TelemetryDto = {
     persianMonth: number
     persianDate: string
     deviceName?: string
+    power?: number
+    oldPower?: number
+    batteryVoltage?: number
+    batteryPercent?: number
+    voltage?: number
     serverTimestampUtc?: string
 }