diff_sidebar.diff

diff --git a/admin/src/components/layout/Sidebar.tsx b/admin/src/components/layout/Sidebar.tsx
index e9204271..7447440a 100644
--- a/admin/src/components/layout/Sidebar.tsx
+++ b/admin/src/components/layout/Sidebar.tsx
@@ -1,37 +1,79 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { useAuth } from '@/context/AuthContext';
 import {
   BarChart3,
   FileText,
+  CreditCard,
   History,
   Webhook,
   Key,
   Building,
   GitBranch,
   Settings,
+  User,
+  LogOut,
+  ScrollText,
+  Book,
+  HelpCircle,
 } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-const navigation = [
-  { name: 'Dashboard', href: '/', icon: BarChart3 },
-  { name: 'Rules', href: '/rules', icon: FileText },
-  { name: 'Validation Logs', href: '/validation-logs', icon: History },
-  { name: 'Webhooks', href: '/webhooks', icon: Webhook },
-  { name: 'API Keys', href: '/api-keys', icon: Key },
-  { name: 'Tenants', href: '/tenants', icon: Building },
-  { name: 'Versions', href: '/versions', icon: GitBranch },
-  { name: 'Settings', href: '/settings', icon: Settings },
+
+export const ROUTE_PATHS = {
+  DASHBOARD: '/',
+  RULES: '/rules',
+  BILLING: '/billing',
+  LOGS: '/logs',
+  VALIDATION_LOGS: '/validation-logs',
+  DOCS: '/docs',
+  SUPPORT: '/support',
+  WEBHOOKS: '/webhooks',
+  API_KEYS: '/api-keys',
+  TENANTS: '/tenants',
+  VERSIONS: '/versions',
+  SETTINGS: '/settings',
+  PROFILE: '/profile',
+} as const;
+
+export type RouteKey = keyof typeof ROUTE_PATHS;
+export type RoutePath = (typeof ROUTE_PATHS)[RouteKey];
+
+interface NavigationItem {
+  name: string;
+  href: RoutePath;
+  icon: LucideIcon;
+}
+
+const navigation: readonly NavigationItem[] = [
+  { name: 'Dashboard', href: ROUTE_PATHS.DASHBOARD, icon: BarChart3 },
+  { name: 'Rules', href: ROUTE_PATHS.RULES, icon: FileText },
+  { name: 'Billing', href: ROUTE_PATHS.BILLING, icon: CreditCard },
+  { name: 'Logs', href: ROUTE_PATHS.LOGS, icon: ScrollText },
+  { name: 'Validation Logs', href: ROUTE_PATHS.VALIDATION_LOGS, icon: History },
+  { name: 'Docs', href: ROUTE_PATHS.DOCS, icon: Book },
+  { name: 'Support', href: ROUTE_PATHS.SUPPORT, icon: HelpCircle },
+  { name: 'Webhooks', href: ROUTE_PATHS.WEBHOOKS, icon: Webhook },
+  { name: 'API Keys', href: ROUTE_PATHS.API_KEYS, icon: Key },
+  { name: 'Tenants', href: ROUTE_PATHS.TENANTS, icon: Building },
+  { name: 'Versions', href: ROUTE_PATHS.VERSIONS, icon: GitBranch },
+  { name: 'Settings', href: ROUTE_PATHS.SETTINGS, icon: Settings },
+  { name: 'Profile', href: ROUTE_PATHS.PROFILE, icon: User },
 ];
 
 const Sidebar: React.FC = () => {
+  const { currentUser, logout } = useAuth();
+
   return (
-    <div className="w-64 bg-card border-r border-border">
+    <div className="w-64 bg-card border-r border-border flex flex-col h-full">
       <div className="flex items-center h-16 px-6 border-b border-border">
         <h1 className="text-xl font-bold">
           {import.meta.env.VITE_DASHBOARD_TITLE || 'ICC Rule Engine'}
         </h1>
       </div>
-      <nav className="mt-8 px-4">
+
+      <nav className="mt-8 px-4 flex-1">
         <ul className="space-y-2">
           {navigation.map((item) => (
             <li key={item.name}>
@@ -53,8 +95,36 @@ const Sidebar: React.FC = () => {
           ))}
         </ul>
       </nav>
+
+      {/* User info and logout */}
+      {currentUser && (
+        <div className="p-4 border-t border-border">
+          <div className="space-y-3">
+            <div className="text-sm">
+              <p className="font-medium text-foreground truncate">
+                {(() => {
+                  const name = [currentUser.first_name, currentUser.last_name].filter(Boolean).join(' ');
+                  return name || currentUser.email;
+                })()}
+              </p>
+              <p className="text-muted-foreground text-xs truncate">{currentUser.email}</p>
+              <p className="text-muted-foreground text-xs capitalize">
+                {currentUser.role === 'admin' ? 'Admin' : 'User'}
+              </p>
+            </div>
+            <button
+              onClick={logout}
+              className="flex items-center w-full px-2 py-1 text-sm font-medium text-muted-foreground rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
+            >
+              <LogOut className="mr-3 h-4 w-4" />
+              Sign out
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
-export { Sidebar };
\ No newline at end of file
+export { Sidebar };
+