Add persistent Undo button to TopBar

src/components/TopBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Download, Database, LogOut } from 'lucide-react';
+import { Download, Database, LogOut, Undo2 } from 'lucide-react';
 
 interface TopBarProps {
   stats: any;
@@ -8,9 +8,12 @@ interface TopBarProps {
   hasUnsavedChanges: boolean;
   userEmail?: string;
   onSignOut?: () => void;
+  canUndo: boolean;
+  onUndo: () => void;
+  undoMessage?: string;
 }
 
-export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut }: TopBarProps) {
+export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage }: TopBarProps) {
   return (
     <header className="bg-[#020812] border-b border-slate-700/30 h-32 flex items-center justify-between px-10 shrink-0 z-10 shadow-2xl">
       <div className="flex items-center -ml-4">
@@ -65,6 +68,18 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail,
             {hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
           </button>
         )}
+        
+        {canUndo && (
+          <button
+            onClick={onUndo}
+            title={`Undo: ${undoMessage}`}
+            className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-md text-sm font-bold transition-all shadow-lg shadow-amber-900/40 animate-in fade-in zoom-in duration-300"
+          >
+            <Undo2 className="w-4 h-4" />
+            BACK / UNDO
+          </button>
+        )}
+
         {userEmail && (
           <div className="flex items-center gap-2 border-l border-slate-700 pl-3">
             <span className="text-xs text-slate-400">{userEmail}</span>