Implement premium Confirmation Modal for all data-modifying actions

src/components/EditPanel.tsx

@@ -3,6 +3,7 @@ import { ExcelRow, COLUMNS } from '../types';
 import { X, Sparkles, Save, Loader2, Languages, Package } from 'lucide-react';
 import { generateGemini } from '../services/gemini';
 import { cn } from '../lib/utils';
+import { ConfirmModal } from './ConfirmModal';
 
 interface EditPanelProps {
   row: ExcelRow;
@@ -30,6 +31,7 @@ export function EditPanel({ row, rowIndex, onSave, onClose, onCaptureState }: Ed
 
   const [loadingField, setLoadingField] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
   const isModified = (field: keyof typeof formData) => {
     const colMap: Record<string, number> = {
@@ -101,6 +103,7 @@ export function EditPanel({ row, rowIndex, onSave, onClose, onCaptureState }: Ed
   };
 
   const handleSave = () => {
+    setIsConfirmOpen(false);
     const hasModifications = Object.keys(formData).some(k => isModified(k as keyof typeof formData));
     if (hasModifications) {
       onCaptureState(`Updated product ${row[COLUMNS.ARTICLE_NO]}`);
@@ -251,13 +254,23 @@ export function EditPanel({ row, rowIndex, onSave, onClose, onCaptureState }: Ed
             Cancel
           </button>
           <button
-            onClick={handleSave}
+            onClick={() => setIsConfirmOpen(true)}
             className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-lg shadow-blue-900/20 transition-colors"
           >
             <Save className="w-4 h-4" />
             Save to Memory
           </button>
         </div>
+
+        <ConfirmModal 
+          isOpen={isConfirmOpen}
+          onConfirm={handleSave}
+          onCancel={() => setIsConfirmOpen(false)}
+          title="Confirm Changes"
+          message={`Are you sure you want to save the modifications for product ${row[COLUMNS.ARTICLE_NO]}?`}
+          type="info"
+          confirmText="Save changes"
+        />
       </div>
     </>
   );