UI: Implement Maximize mode for tables. Added a 'MAXIMIZE' button to TopBar and an 'X' close button in fullscreen mode. Hides sidebar and header to provide maximum screen space for data tables.

src/components/TopBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Download, LogOut, Undo2, CloudUpload, Loader2, ChevronDown, RotateCcw } from 'lucide-react';
+import { Download, LogOut, Undo2, CloudUpload, Loader2, ChevronDown, RotateCcw, Maximize2, X } from 'lucide-react';
 import { cn } from '../lib/utils';
 
 interface TopBarProps {
@@ -20,9 +20,11 @@ interface TopBarProps {
   onSaveAll: () => Promise<void>;
   onRevertRow: (articleNo: string) => void;
   isSavingAll: boolean;
+  isMaximized: boolean;
+  onToggleMaximize: () => void;
 }
 
-export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage, undoSteps, pendingCount, pendingChanges, onSaveAll, onRevertRow, isSavingAll }: TopBarProps) {
+export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage, undoSteps, pendingCount, pendingChanges, onSaveAll, onRevertRow, isSavingAll, isMaximized, onToggleMaximize }: TopBarProps) {
   const [showPending, setShowPending] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -179,6 +181,15 @@ export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasU
           </button>
         )}
 
+        <button
+          onClick={onToggleMaximize}
+          className="flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium bg-slate-700 hover:bg-slate-600 text-slate-200 transition-colors"
+          title="Maximize - View table in full screen"
+        >
+          <Maximize2 className="w-4 h-4" />
+          MAXIMIZE
+        </button>
+
         <button
           onClick={onUndo}
           disabled={!canUndo}