diff --git a/src/components/reports/DynamicReport.tsx b/src/components/reports/DynamicReport.tsx index 85f7e03..4e8ad1e 100644 --- a/src/components/reports/DynamicReport.tsx +++ b/src/components/reports/DynamicReport.tsx @@ -1,6 +1,6 @@ -import { useState } from "react"; +import { useState, useCallback, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { Table, BarChart3, Columns } from "lucide-react"; +import { Table, BarChart3, Columns, Maximize2, Minimize2 } from "lucide-react"; import type { PivotConfig, PivotResult } from "../../shared/types"; import DynamicReportPanel from "./DynamicReportPanel"; import DynamicReportTable from "./DynamicReportTable"; @@ -19,6 +19,19 @@ interface DynamicReportProps { export default function DynamicReport({ config, result, onConfigChange, dateFrom, dateTo }: DynamicReportProps) { const { t } = useTranslation(); const [viewMode, setViewMode] = useState("table"); + const [fullscreen, setFullscreen] = useState(false); + + const toggleFullscreen = useCallback(() => setFullscreen((prev) => !prev), []); + + // Escape key exits fullscreen + useEffect(() => { + if (!fullscreen) return; + const handler = (e: KeyboardEvent) => { + if (e.key === "Escape") setFullscreen(false); + }; + document.addEventListener("keydown", handler); + return () => document.removeEventListener("keydown", handler); + }, [fullscreen]); const hasConfig = (config.rows.length > 0 || config.columns.length > 0) && config.values.length > 0; @@ -29,13 +42,19 @@ export default function DynamicReport({ config, result, onConfigChange, dateFrom ]; return ( -
- {/* Content area */} -
- {/* View toggle */} - {hasConfig && ( -
- {viewButtons.map(({ mode, icon, label }) => ( +
+
+ {/* Content area */} +
+ {/* Toolbar */} +
+ {hasConfig && viewButtons.map(({ mode, icon, label }) => ( ))} +
+
- )} - {/* Empty state */} - {!hasConfig && ( -
- {t("reports.pivot.noConfig")} -
- )} + {/* Empty state */} + {!hasConfig && ( +
+ {t("reports.pivot.noConfig")} +
+ )} - {/* Table */} - {hasConfig && (viewMode === "table" || viewMode === "both") && ( - - )} + {/* Table */} + {hasConfig && (viewMode === "table" || viewMode === "both") && ( + + )} - {/* Chart */} - {hasConfig && (viewMode === "chart" || viewMode === "both") && ( - - )} + {/* Chart */} + {hasConfig && (viewMode === "chart" || viewMode === "both") && ( + + )} +
+ + {/* Side panel */} +
- - {/* Side panel */} -
); } diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index f6fa186..55108b2 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -378,7 +378,9 @@ "viewChart": "Chart", "viewBoth": "Both", "noConfig": "Add fields to generate the report", - "noData": "No data for this configuration" + "noData": "No data for this configuration", + "fullscreen": "Full screen", + "exitFullscreen": "Exit full screen" }, "help": { "title": "How to use Reports", diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json index f39cd49..5fb02d9 100644 --- a/src/i18n/locales/fr.json +++ b/src/i18n/locales/fr.json @@ -378,7 +378,9 @@ "viewChart": "Graphique", "viewBoth": "Les deux", "noConfig": "Ajoutez des champs pour générer le rapport", - "noData": "Aucune donnée pour cette configuration" + "noData": "Aucune donnée pour cette configuration", + "fullscreen": "Plein écran", + "exitFullscreen": "Quitter plein écran" }, "help": { "title": "Comment utiliser les Rapports",