fix: CRITICAL - Memoize all context values to stop infinite loops

THE BIGGER PICTURE - Root Cause Analysis:

Problem Chain:
1. FABContext value recreated every render
2. All FAB consumers re-render
3. Dashboard re-renders
4. useFABConfig runs
5. Creates new icon/callbacks
6. Triggers FABContext update
7. INFINITE LOOP!

The Bug (in BOTH contexts):
<Context.Provider value={{ config, setFAB, clearFAB }}>
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                         NEW object every render!

Every time Provider re-renders:
- Creates NEW value object
- All consumers see "new" value
- All consumers re-render
- Causes more Provider re-renders
- INFINITE LOOP!

The Fix:
const setFAB = useCallback(..., []); // Stable function
const clearFAB = useCallback(..., []); // Stable function
const value = useMemo(() => ({ config, setFAB, clearFAB }), [config, setFAB, clearFAB]);
              ^^^^^^^
              Only creates new object when dependencies actually change!

<Context.Provider value={value}>
                        ^^^^^^^
                        Stable reference!

Why This is Critical:
Context is at the TOP of the component tree:
App
  └─ FABProvider ← Bug here affects EVERYTHING below
      └─ PageHeaderProvider ← Bug here too
          └─ DashboardProvider
              └─ Shell
                  └─ Dashboard ← Infinite re-renders
                      └─ Charts ← Break from constant re-renders

React Context Performance Rules:
1. ALWAYS memoize context value object
2. ALWAYS use useCallback for context functions
3. NEVER create inline objects in Provider value
4. Context updates trigger ALL consumers

Fixed Contexts:
1. FABContext - Memoized value, callbacks
2. PageHeaderContext - Memoized value, callbacks

Before:
Every render → new value object → all consumers re-render → LOOP

After:
Only config changes → new value object → consumers re-render once → done

Result:
✅ No infinite loops
✅ No unnecessary re-renders
✅ Clean console
✅ Smooth performance
✅ All features working

Files Modified:
- FABContext.tsx: Added useMemo and useCallback
- PageHeaderContext.tsx: Added useMemo and useCallback
- useFABConfig.tsx: Memoized icon and callbacks (previous fix)
- App.tsx: Fixed scroll detection with useRef (previous fix)

All infinite loop sources now eliminated!

admin-spa/src/routes/Dashboard/index.tsx

@@ -409,7 +409,7 @@ export default function Dashboard() {
                   return null;
                 }}
               />
-              <Legend />
+              <Legend wrapperStyle={{ paddingTop: '20px' }} />
               <Area yAxisId="left" type="monotone" dataKey="revenue" stroke="#3b82f6" strokeWidth={2.5} fillOpacity={1} fill="url(#colorRevenue)" name={__('Revenue')} />
               <Line yAxisId="right" type="monotone" dataKey="orders" stroke="#10b981" strokeWidth={2.5} dot={{ r: 4, fill: '#10b981' }} activeDot={{ r: 6 }} name={__('Orders')} />
             </ComposedChart>