feat: add SocketProvider and integrate real-time credits updates in NavPlan component

src/App.tsx

@@ -2,6 +2,7 @@ import { AppLayout } from '@/components/AppLayout'
 import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { Button } from '@/components/ui/button'
 import { AuthProvider } from '@/components/AuthProvider'
+import { SocketProvider } from '@/contexts/SocketContext'
 import { AccountPage } from '@/pages/AccountPage'
 import { ActivityPage } from '@/pages/ActivityPage'
 import { AdminUsersPage } from '@/pages/AdminUsersPage'
@@ -17,7 +18,8 @@ function App() {
   return (
     <ThemeProvider defaultTheme="dark" storageKey="theme">
       <AuthProvider>
-        <Router>
+        <SocketProvider>
+          <Router>
           <Routes>
             <Route path="/login" element={<LoginPage />} />
             <Route path="/register" element={<RegisterPage />} />
@@ -106,7 +108,8 @@ function App() {
             <Route path="/" element={<Navigate to="/dashboard" replace />} />
             <Route path="*" element={<Navigate to="/dashboard" replace />} />
           </Routes>
-        </Router>
+          </Router>
+        </SocketProvider>
       </AuthProvider>
     </ThemeProvider>
   )