i have created octa oth flow with my octa account

package-lock.json

@@ -8,6 +8,7 @@
       "name": "royal-enfield-approval-portal",
       "version": "1.0.0",
       "dependencies": {
+        "@auth0/auth0-react": "^2.8.0",
         "@radix-ui/react-accordion": "^1.2.1",
         "@radix-ui/react-alert-dialog": "^1.1.2",
         "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -96,6 +97,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@auth0/auth0-react": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-2.8.0.tgz",
+      "integrity": "sha512-f3KOkq+TW7AC3T+ZAo9G0hNL339z15C9q00QDVrMGCzZAPyp8lvDHKcAs21d/u+GzhU5zmssvJTQggDR7JqxSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@auth0/auth0-spa-js": "^2.7.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.11.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@auth0/auth0-spa-js": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.7.0.tgz",
+      "integrity": "sha512-o29ZDbUUCJcEXeBP5LPuacbP28BkNroHuq3jfKbNjFiiWjmrCe95jwPAYb6+9PGyEbs8Wva4fGkVSNZ2HZFEGA==",
+      "license": "MIT",
+      "dependencies": {
+        "browser-tabs-lock": "^1.2.15",
+        "dpop": "^2.1.1",
+        "es-cookie": "~1.3.2"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -3608,6 +3633,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/browser-tabs-lock": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.3.0.tgz",
+      "integrity": "sha512-g6nHaobTiT0eMZ7jh16YpD2kcjAp+PInbiVq3M1x6KKaEIVhT4v9oURNIpZLOZ3LQbQ3XYfNhMAb/9hzNLIWrw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash": ">=4.17.21"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.26.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.3.tgz",
@@ -4088,6 +4123,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dpop": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/dpop/-/dpop-2.1.1.tgz",
+      "integrity": "sha512-J0Of2JTiM4h5si0tlbPQ/lkqfZ5wAEVkKYBhkwyyANnPJfWH4VsR5uIkZ+T+OSPIwDYUg1fbd5Mmodd25HjY1w==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4151,6 +4195,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/es-cookie": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz",
+      "integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==",
+      "license": "MIT"
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.8.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.1.0",

src/components/Auth/AuthDebugInfo.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface AuthDebugInfoProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function AuthDebugInfo({ isOpen, onClose }: AuthDebugInfoProps) {
+  const { user, isAuthenticated, isLoading, error } = useAuth0();
+
+  useEffect(() => {
+    console.log('AuthDebugInfo - Current Auth State:', {
+      isAuthenticated,
+      isLoading,
+      hasUser: !!user,
+      error: error?.message,
+      userData: user,
+      timestamp: new Date().toISOString()
+    });
+  }, [user, isAuthenticated, isLoading, error]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <Card className="w-full max-w-2xl max-h-[90vh] overflow-auto">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle>Authentication Debug Information</CardTitle>
+            <Button variant="ghost" size="icon" onClick={onClose}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center gap-2">
+            <span className="font-semibold">Status:</span>
+            <Badge variant={isAuthenticated ? 'default' : 'destructive'}>
+              {isLoading ? 'Loading...' : isAuthenticated ? 'Authenticated' : 'Not Authenticated'}
+            </Badge>
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded p-3">
+              <p className="text-sm text-red-700 font-semibold">Error:</p>
+              <p className="text-sm text-red-600">{error.message}</p>
+            </div>
+          )}
+
+          {user && (
+            <div className="space-y-2">
+              <h4 className="font-semibold">User Information:</h4>
+              <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto">
+                {JSON.stringify(user, null, 2)}
+              </pre>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <h4 className="font-semibold">All Auth Claims:</h4>
+            <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto">
+              {JSON.stringify({
+                isAuthenticated,
+                isLoading,
+                error: error?.message || null,
+                hasUser: !!user
+              }, null, 2)}
+            </pre>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

src/components/common/Loader/Loader.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface LoaderProps {
+  message?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function Loader({ message, size = 'md' }: LoaderProps) {
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12'
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className={`animate-spin rounded-full border-4 border-slate-200 border-t-slate-900 ${sizeClasses[size]}`}></div>
+      {message && (
+        <p className="text-sm text-gray-600">{message}</p>
+      )}
+    </div>
+  );
+}
+

src/components/common/Loader/index.ts

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+

src/components/layout/PageLayout/PageLayout.tsx

@@ -5,15 +5,17 @@ import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import royalEnfieldLogo from '@/assets/images/royal_enfield_logo.png';
 
 interface PageLayoutProps {
   children: React.ReactNode;
   currentPage?: string;
   onNavigate?: (page: string) => void;
   onNewRequest?: () => void;
+  onLogout?: () => void;
 }
 
-export function PageLayout({ children, currentPage = 'dashboard', onNavigate, onNewRequest }: PageLayoutProps) {
+export function PageLayout({ children, currentPage = 'dashboard', onNavigate, onNewRequest, onLogout }: PageLayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   
   const menuItems = [
@@ -70,21 +72,23 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
         z-50 md:z-auto
         flex-shrink-0
         border-r border-gray-800 bg-black
-        overflow-y-auto
+        flex flex-col
       `}>
-        <div className="w-64 h-full">
-          <div className="p-4 border-b border-gray-800">
+        <div className="w-64 h-full flex flex-col overflow-hidden">
+          <div className="p-4 border-b border-gray-800 flex-shrink-0">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-re-green rounded-lg flex items-center justify-center shrink-0">
-                <div className="w-6 h-6 bg-re-gold rounded-full"></div>
-              </div>
+              <img 
+                src={royalEnfieldLogo} 
+                alt="Royal Enfield Logo" 
+                className="w-10 h-10 shrink-0 object-contain"
+              />
               <div className="min-w-0 flex-1">
                 <h2 className="text-base font-semibold text-white truncate">Royal Enfield</h2>
                 <p className="text-sm text-gray-400 truncate">Approval Portal</p>
               </div>
             </div>
           </div>
-          <div className="p-3">
+          <div className="p-3 flex-1 overflow-y-auto">
             <div className="space-y-2">
               {menuItems.map((item) => (
                 <button
@@ -106,18 +110,18 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
                   <span className="truncate">{item.label}</span>
                 </button>
               ))}
-            </div>
-            
-            {/* Quick Action in Sidebar */}
-            <div className="mt-6 p-3 bg-gray-900 rounded-lg border border-gray-800">
-              <Button
-                onClick={onNewRequest}
-                className="w-full bg-re-green hover:bg-re-green/90 text-white text-sm"
-                size="sm"
-              >
-                <Plus className="w-4 h-4 mr-2" />
-                Raise New Request
-              </Button>
+              
+              {/* Quick Action in Sidebar - Right below menu items */}
+              <div className="mt-6">
+                <Button
+                  onClick={onNewRequest}
+                  className="w-full bg-re-green hover:bg-re-green/90 text-white text-sm"
+                  size="sm"
+                >
+                  <Plus className="w-4 h-4 mr-2" />
+                  Raise New Request
+                </Button>
+              </div>
             </div>
           </div>
         </div>
@@ -197,7 +201,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
                   <Settings className="w-4 h-4 mr-2" />
                   Settings
                 </DropdownMenuItem>
-                <DropdownMenuItem>
+                <DropdownMenuItem onClick={onLogout} className="text-red-600 focus:text-red-600">
                   <LogOut className="w-4 h-4 mr-2" />
                   Logout
                 </DropdownMenuItem>

src/components/workNote/WorkNoteChat/WorkNoteChat.tsx

@@ -39,7 +39,9 @@ import {
   Bell,
   Star,
   Flag,
-  X
+  X,
+  FileSpreadsheet,
+  Image
 } from 'lucide-react';
 
 interface Message {
@@ -286,14 +288,16 @@ const formatMessage = (content: string) => {
     .replace(/\n/g, '<br />');
 };
 
-const getFileIcon = (type: string) => {
+// File icon components using Lucide React
+const FileIcon = ({ type }: { type: string }) => {
+  const iconClass = "w-4 h-4";
   switch (type.toLowerCase()) {
-    case 'pdf': return '📄';
-    case 'excel': case 'xlsx': return '📊';
-    case 'powerpoint': case 'pptx': return '📊';
-    case 'word': case 'docx': return '📝';
-    case 'image': case 'png': case 'jpg': case 'jpeg': return '🖼️';
-    default: return '📎';
+    case 'pdf': return <FileText className={`${iconClass} text-red-600`} />;
+    case 'excel': case 'xlsx': return <FileSpreadsheet className={`${iconClass} text-green-600`} />;
+    case 'powerpoint': case 'pptx': return <FileText className={`${iconClass} text-orange-600`} />;
+    case 'word': case 'docx': return <FileText className={`${iconClass} text-blue-600`} />;
+    case 'image': case 'png': case 'jpg': case 'jpeg': return <Image className={`${iconClass} text-purple-600`} />;
+    default: return <Paperclip className={`${iconClass} text-gray-600`} />;
   }
 };
 
@@ -642,7 +646,9 @@ export function WorkNoteChat({ requestId, onBack }: WorkNoteChatProps) {
                                   <div className="space-y-2">
                                     {msg.attachments.map((attachment, index) => (
                                       <div key={index} className="flex items-center gap-2 sm:gap-3 p-2 bg-gray-50 rounded-lg">
-                                        <span className="text-lg sm:text-xl flex-shrink-0">{getFileIcon(attachment.type)}</span>
+                                        <div className="flex-shrink-0">
+                                          <FileIcon type={attachment.type} />
+                                        </div>
                                         <span className="text-xs sm:text-sm font-medium text-gray-700 flex-1 truncate">
                                           {attachment.name}
                                         </span>
@@ -727,7 +733,9 @@ export function WorkNoteChat({ requestId, onBack }: WorkNoteChatProps) {
                     <div className="mb-3 space-y-2 max-h-32 overflow-y-auto pr-2">
                       {selectedFiles.map((file, index) => (
                         <div key={index} className="flex items-center gap-2 p-2 bg-blue-50 rounded-lg border border-blue-200">
-                          <span className="text-lg flex-shrink-0">{getFileIcon(file.type.split('/')[1] || 'file')}</span>
+                          <div className="flex-shrink-0">
+                            <FileIcon type={file.type.split('/')[1] || 'file'} />
+                          </div>
                           <span className="text-sm text-gray-700 flex-1 truncate min-w-0">{file.name}</span>
                           <span className="text-xs text-gray-500 flex-shrink-0">{(file.size / 1024).toFixed(1)} KB</span>
                           <Button
@@ -864,7 +872,7 @@ export function WorkNoteChat({ requestId, onBack }: WorkNoteChatProps) {
                       <CardContent className="p-3 sm:p-4">
                         <div className="flex items-start gap-2 sm:gap-3">
                           <div className="w-10 h-10 sm:w-12 sm:h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                            <span className="text-lg sm:text-2xl">{getFileIcon(doc.type)}</span>
+                            <FileIcon type={doc.type} />
                           </div>
                           <div className="flex-1 min-w-0">
                             <h4 className="font-medium text-gray-900 truncate text-sm sm:text-base">{doc.name}</h4>

src/main.tsx

@@ -1,11 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import { Auth0Provider } from '@auth0/auth0-react';
+import { AuthenticatedApp } from './pages/Auth';
 import './styles/globals.css';
 
+console.log('Application Starting...');
+console.log('Auth0 Configuration:', {
+  domain: 'dev-dq1hiere8khcbdra.us.auth0.com',
+  clientId: '5gnC2Go5yRg3RXLuaFLr8KRc1fJ9PDJW',
+  origin: window.location.origin
+});
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <Auth0Provider
+      domain="dev-dq1hiere8khcbdra.us.auth0.com"
+      clientId="5gnC2Go5yRg3RXLuaFLr8KRc1fJ9PDJW"
+      authorizationParams={{
+        redirect_uri: 'https://9b89f4bfd360.ngrok-free.app'
+      }}
+      onRedirectCallback={(appState) => {
+        console.log('Auth0 Redirect Callback:', {
+          appState,
+          returnTo: appState?.returnTo || window.location.pathname,
+          timestamp: new Date().toISOString()
+        });
+      }}
+    >
+      <AuthenticatedApp />
+    </Auth0Provider>
   </React.StrictMode>
 );
 

src/pages/Auth/Auth.tsx

@@ -0,0 +1,119 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { LogIn, Shield } from 'lucide-react';
+
+export function Auth() {
+  const { loginWithRedirect, isLoading, error } = useAuth0();
+
+  console.log('Auth Component Render - Auth0 State:', {
+    isLoading,
+    error: error?.message,
+    timestamp: new Date().toISOString()
+  });
+
+  const handleSSOLogin = async () => {
+    console.log('========================================');
+    console.log('SSO LOGIN - Button Clicked');
+    console.log('Timestamp:', new Date().toISOString());
+    console.log('Current URL:', window.location.href);
+    console.log('========================================');
+    
+    // Clear any existing session data
+    console.log('Clearing local storage and session storage...');
+    localStorage.clear();
+    sessionStorage.clear();
+    console.log('Storage cleared');
+    
+    console.log('Calling loginWithRedirect with params:', {
+      authorizationParams: {
+        screen_hint: 'login',
+        prompt: 'login',
+        mode: 'login'
+      }
+    });
+    
+    try {
+      await loginWithRedirect({
+        authorizationParams: {
+          screen_hint: 'login',
+          prompt: 'login',
+          mode: 'login'
+        },
+        appState: {
+          returnTo: window.location.pathname
+        }
+      });
+      
+      console.log('Login redirect initiated successfully');
+    } catch (loginError) {
+      console.error('========================================');
+      console.error('LOGIN ERROR');
+      console.error('Error details:', loginError);
+      console.error('Error message:', (loginError as Error)?.message);
+      console.error('Error stack:', (loginError as Error)?.stack);
+      console.error('========================================');
+    }
+  };
+
+  if (error) {
+    console.error('Auth0 Error in Auth Component:', {
+      message: error.message,
+      error: error
+    });
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
+      <Card className="w-full max-w-md shadow-xl">
+        <CardHeader className="space-y-1 text-center pb-6">
+          <div className="flex justify-center mb-4">
+            <div className="w-16 h-16 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl flex items-center justify-center shadow-lg">
+              <Shield className="w-8 h-8 text-white" />
+            </div>
+          </div>
+          <CardTitle className="text-3xl font-bold text-gray-900">
+            Royal Enfield
+          </CardTitle>
+          <CardDescription className="text-lg text-gray-600 mt-2">
+            Approval & Request Management Portal
+          </CardDescription>
+        </CardHeader>
+        
+        <CardContent className="space-y-4">
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+              <p className="text-sm font-medium">Authentication Error</p>
+              <p className="text-sm">{error.message}</p>
+            </div>
+          )}
+          
+          <Button
+            onClick={handleSSOLogin}
+            disabled={isLoading}
+            className="w-full h-12 text-base font-semibold bg-slate-900 hover:bg-slate-800"
+            size="lg"
+          >
+            {isLoading ? (
+              <>
+                <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-background border-t-transparent" />
+                Logging in...
+              </>
+            ) : (
+              <>
+                <LogIn className="mr-2 h-5 w-5" />
+                SSO Login
+              </>
+            )}
+          </Button>
+
+          <div className="text-center text-sm text-gray-500 mt-4">
+            <p>Secure Single Sign-On</p>
+            <p className="text-xs mt-1">Powered by Auth0</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

src/pages/Auth/AuthCallback.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { Loader } from '@/components/common/Loader';
+
+export function AuthCallback() {
+  const { isAuthenticated, isLoading, error, user } = useAuth0();
+
+  useEffect(() => {
+    console.log('AuthCallback Component Mounted');
+    console.log('Auth0 State during callback:', {
+      isAuthenticated,
+      isLoading,
+      error: error?.message,
+      hasUser: !!user,
+      timestamp: new Date().toISOString()
+    });
+
+    if (user) {
+      console.log('User authenticated successfully:', {
+        id: user.sub,
+        email: user.email,
+        name: user.name,
+        picture: user.picture,
+        nickname: user.nickname,
+        userData: user
+      });
+    }
+
+    if (error) {
+      console.error('Error during authentication callback:', error);
+    }
+  }, [isAuthenticated, isLoading, error, user]);
+
+  if (error) {
+    console.error('AuthCallback Error:', error);
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+      <Loader message="Completing authentication..." />
+    </div>
+  );
+}
+

src/pages/Auth/AuthenticatedApp.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { Auth } from './Auth';
+import { AuthCallback } from './AuthCallback';
+import { AuthDebugInfo } from '@/components/Auth/AuthDebugInfo';
+import App from '../../App';
+
+export function AuthenticatedApp() {
+  const { isAuthenticated, isLoading, error, user, logout: logoutAuth0 } = useAuth0();
+  const [showDebugInfo, setShowDebugInfo] = useState(false);
+
+  const handleLogout = async () => {
+    console.log('========================================');
+    console.log('LOGOUT - Initiated');
+    console.log('Timestamp:', new Date().toISOString());
+    console.log('========================================');
+    
+    // Clear all storage
+    console.log('Clearing all storage...');
+    localStorage.clear();
+    sessionStorage.clear();
+    console.log('Storage cleared');
+    
+    try {
+      await logoutAuth0({
+        logoutParams: {
+          returnTo: window.location.origin
+        },
+        localOnly: false // Clear Auth0 session as well
+      });
+      
+      console.log('Logout successful');
+    } catch (logoutError) {
+      console.error('Logout error:', logoutError);
+    }
+  };
+
+  useEffect(() => {
+    console.log('AuthenticatedApp - Auth State Changed:', {
+      isAuthenticated,
+      isLoading,
+      error: error?.message,
+      hasUser: !!user,
+      timestamp: new Date().toISOString()
+    });
+
+    if (user) {
+      console.log('========================================');
+      console.log('USER AUTHENTICATED - Full Details');
+      console.log('========================================');
+      console.log('User ID (sub):', user.sub);
+      console.log('Email:', user.email);
+      console.log('Name:', user.name);
+      console.log('Nickname:', user.nickname);
+      console.log('Picture:', user.picture);
+      console.log('Email Verified:', user.email_verified);
+      console.log('Updated At:', user.updated_at);
+      console.log('========================================');
+      console.log('ALL USER CLAIMS:');
+      console.log(JSON.stringify(user, null, 2));
+      console.log('========================================');
+    }
+  }, [isAuthenticated, isLoading, error, user]);
+
+  // Show loading state while checking authentication
+  if (isLoading) {
+    console.log('Auth0 is still loading...');
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-4 border-slate-900 border-t-transparent mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading authentication...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show auth error if present
+  if (error) {
+    console.error('Authentication Error:', error);
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+        <div className="bg-red-50 border border-red-200 text-red-700 px-6 py-4 rounded-lg max-w-md">
+          <h3 className="font-semibold mb-2">Authentication Error</h3>
+          <p className="text-sm mb-4">{error.message}</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Show login screen if not authenticated
+  if (!isAuthenticated) {
+    console.log('User not authenticated, showing login screen');
+    return <Auth />;
+  }
+
+  // User is authenticated, show the app
+  console.log('User authenticated successfully, showing main application');
+  return (
+    <>
+      <App onLogout={handleLogout} />
+      {showDebugInfo && (
+        <AuthDebugInfo isOpen={showDebugInfo} onClose={() => setShowDebugInfo(false)} />
+      )}
+    </>
+  );
+}
+

src/pages/Auth/index.ts

@@ -0,0 +1,4 @@
+export { Auth } from './Auth';
+export { AuthCallback } from './AuthCallback';
+export { AuthenticatedApp } from './AuthenticatedApp';
+

src/pages/ClosedRequests/ClosedRequests.tsx

@@ -19,7 +19,8 @@ import {
   Target,
   RefreshCw,
   Settings2,
-  X
+  X,
+  XCircle
 } from 'lucide-react';
 
 interface Request {
@@ -304,8 +305,18 @@ export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Priorities</SelectItem>
-                <SelectItem value="express">🔥 Express</SelectItem>
-                <SelectItem value="standard">🎯 Standard</SelectItem>
+                <SelectItem value="express">
+                  <div className="flex items-center gap-2">
+                    <Flame className="w-4 h-4 text-orange-600" />
+                    <span>Express</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="standard">
+                  <div className="flex items-center gap-2">
+                    <Target className="w-4 h-4 text-blue-600" />
+                    <span>Standard</span>
+                  </div>
+                </SelectItem>
               </SelectContent>
             </Select>
             
@@ -315,8 +326,18 @@ export function ClosedRequests({ onViewRequest }: ClosedRequestsProps) {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Statuses</SelectItem>
-                <SelectItem value="approved">✅ Approved</SelectItem>
-                <SelectItem value="rejected">❌ Rejected</SelectItem>
+                <SelectItem value="approved">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>Approved</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="rejected">
+                  <div className="flex items-center gap-2">
+                    <XCircle className="w-4 h-4 text-red-600" />
+                    <span>Rejected</span>
+                  </div>
+                </SelectItem>
               </SelectContent>
             </Select>
 

src/pages/OpenRequests/OpenRequests.tsx

@@ -351,8 +351,18 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Priorities</SelectItem>
-                <SelectItem value="express">🔥 Express</SelectItem>
-                <SelectItem value="standard">🎯 Standard</SelectItem>
+                <SelectItem value="express">
+                  <div className="flex items-center gap-2">
+                    <Flame className="w-4 h-4 text-orange-600" />
+                    <span>Express</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="standard">
+                  <div className="flex items-center gap-2">
+                    <Target className="w-4 h-4 text-blue-600" />
+                    <span>Standard</span>
+                  </div>
+                </SelectItem>
               </SelectContent>
             </Select>
             
@@ -362,8 +372,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Statuses</SelectItem>
-                <SelectItem value="pending">⏳ Pending</SelectItem>
-                <SelectItem value="in-review">👁️ In Review</SelectItem>
+                <SelectItem value="pending">Pending</SelectItem>
+                <SelectItem value="in-review">In Review</SelectItem>
               </SelectContent>
             </Select>
 

vite.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
     port: 3000,
     open: true,
     host: true,
+    allowedHosts: ['9b89f4bfd360.ngrok-free.app'],
   },
   build: {
     outDir: 'dist',