+ + Validating Security Session... + +

+ ); + } + + if (!isAuthenticated) { + return ; + } + + return children; +} diff --git a/src/components/common/Badge.jsx b/src/components/common/Badge.jsx new file mode 100644 index 0000000..d1f8eea --- /dev/null +++ b/src/components/common/Badge.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './common.css'; + +export function Badge({ children, variant = 'primary', size = 'sm', className = '' }) { + return ( + + {children} + + ); +} + +export function Card({ children, className = '', hoverable = false, ...props }) { + return ( +

+ {children} +

+ ); +} diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx new file mode 100644 index 0000000..f0c8873 --- /dev/null +++ b/src/components/common/Button.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import './common.css'; + +export function Button({ + children, + variant = 'primary', + size = 'md', + isLoading = false, + icon: Icon, + fullWidth = false, + className = '', + disabled, + ...props +}) { + return ( + + ); +} diff --git a/src/components/common/Card.jsx b/src/components/common/Card.jsx new file mode 100644 index 0000000..7910451 --- /dev/null +++ b/src/components/common/Card.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import './common.css'; + +export function Card({ children, className = '', hoverable = false, ...props }) { + return ( +

+ {children} +

+ ); +} diff --git a/src/components/common/Input.jsx b/src/components/common/Input.jsx new file mode 100644 index 0000000..663a2d0 --- /dev/null +++ b/src/components/common/Input.jsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +import { Eye, EyeOff } from 'lucide-react'; +import './common.css'; + +export function Input({ + label, + type = 'text', + icon: Icon, + error, + helperText, + id, + className = '', + required = false, + ...props +}) { + const [showPassword, setShowPassword] = useState(false); + const isPasswordType = type === 'password'; + const effectiveType = isPasswordType ? (showPassword ? 'text' : 'password') : type; + + const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined); + + return ( +

+ {label && ( + + {label} + {required && *} + + )} + +

+ {Icon && ( + + + + )} + + + + {isPasswordType && ( + + )} +

+ + {error ? ( +

{error}

+ ) : helperText ? ( +

{helperText}

+ ) : null} +

+ ); +} diff --git a/src/components/common/Toast.jsx b/src/components/common/Toast.jsx new file mode 100644 index 0000000..7232285 --- /dev/null +++ b/src/components/common/Toast.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { AlertCircle, CheckCircle2, Info, AlertTriangle, X } from 'lucide-react'; +import './common.css'; + +export function Toast({ type = 'info', message, onClose, className = '' }) { + if (!message) return null; + + const icons = { + error: AlertCircle, + success: CheckCircle2, + warning: AlertTriangle, + info: Info, + }; + + const IconComponent = icons[type] || Info; + + return ( +

+ +

{message}

+ {onClose && ( + + )} +

+ ); +} diff --git a/src/components/common/common.css b/src/components/common/common.css new file mode 100644 index 0000000..7757029 --- /dev/null +++ b/src/components/common/common.css @@ -0,0 +1,344 @@ +/* Common Components CSS */ + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 600; + border-radius: var(--radius-md); + transition: all var(--transition-normal); + user-select: none; + white-space: nowrap; + gap: 8px; + position: relative; + overflow: hidden; +} + +.btn:active:not(:disabled) { + transform: scale(0.98); +} + +.btn-block { + width: 100%; +} + +.btn-sm { + padding: 8px 14px; + font-size: 0.825rem; +} + +.btn-md { + padding: 11px 20px; + font-size: 0.925rem; +} + +.btn-lg { + padding: 14px 28px; + font-size: 1.05rem; +} + +.btn-primary { + background: var(--gradient-primary); + color: #ffffff; + box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.btn-primary:hover:not(:disabled) { + box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); + filter: brightness(1.08); +} + +.btn-secondary { + background: var(--bg-surface-elevated); + color: var(--text-main); + border: 1px solid var(--border-subtle); +} + +.btn-secondary:hover:not(:disabled) { + background: var(--bg-surface); + border-color: var(--border-glow); +} + +.btn-outline { + background: transparent; + color: var(--text-main); + border: 1px solid var(--border-subtle); +} + +.btn-outline:hover:not(:disabled) { + border-color: var(--color-primary); + color: var(--color-primary-light); + background: rgba(99, 102, 241, 0.08); +} + +.btn-ghost { + background: transparent; + color: var(--text-secondary); +} + +.btn-ghost:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.06); + color: var(--text-main); +} + +.btn:disabled { + opacity: 0.55; + cursor: not-allowed; + filter: grayscale(0.4); +} + +.btn-spinner { + width: 18px; + height: 18px; + border: 2px solid rgba(255, 255, 255, 0.3); + border-top-color: #ffffff; + border-radius: 50%; + animation: spin 0.7s linear infinite; +} + +/* Inputs */ +.input-group { + display: flex; + flex-direction: column; + gap: 6px; + width: 100%; +} + +.input-label { + font-size: 0.85rem; + font-weight: 600; + color: var(--text-secondary); + display: flex; + align-items: center; + gap: 4px; +} + +.input-required { + color: var(--color-danger); +} + +.input-wrapper { + position: relative; + display: flex; + align-items: center; + width: 100%; +} + +.input-field { + width: 100%; + padding: 12px 16px; + font-size: 0.95rem; + background: var(--bg-input); + color: var(--text-main); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-md); + outline: none; + transition: all var(--transition-normal); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.input-field::placeholder { + color: var(--text-muted); +} + +.input-field:focus { + border-color: var(--border-focus); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); +} + +.input-field.with-prefix { + padding-left: 44px; +} + +.input-field.with-suffix { + padding-right: 44px; +} + +.input-prefix-icon { + position: absolute; + left: 14px; + color: var(--text-muted); + display: flex; + align-items: center; + pointer-events: none; + transition: color var(--transition-fast); +} + +.input-wrapper:focus-within .input-prefix-icon { + color: var(--color-primary-light); +} + +.input-suffix-btn { + position: absolute; + right: 12px; + color: var(--text-muted); + display: flex; + align-items: center; + padding: 4px; + border-radius: var(--radius-sm); + transition: color var(--transition-fast); +} + +.input-suffix-btn:hover { + color: var(--text-main); +} + +.input-group.has-error .input-field { + border-color: var(--color-danger); + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); +} + +.input-error-text { + font-size: 0.8rem; + color: var(--color-danger); + margin-top: 2px; +} + +.input-helper-text { + font-size: 0.8rem; + color: var(--text-muted); +} + +/* Badges */ +.badge { + display: inline-flex; + align-items: center; + gap: 5px; + font-weight: 600; + border-radius: var(--radius-full); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.badge-sm { + padding: 3px 8px; + font-size: 0.7rem; +} + +.badge-md { + padding: 5px 12px; + font-size: 0.775rem; +} + +.badge-primary { + background: rgba(99, 102, 241, 0.15); + color: var(--color-primary-light); + border: 1px solid rgba(99, 102, 241, 0.3); +} + +.badge-success { + background: var(--color-success-bg); + color: var(--color-success); + border: 1px solid rgba(16, 185, 129, 0.3); +} + +.badge-warning { + background: var(--color-warning-bg); + color: var(--color-warning); + border: 1px solid rgba(245, 158, 11, 0.3); +} + +.badge-danger { + background: var(--color-danger-bg); + color: var(--color-danger); + border: 1px solid rgba(239, 68, 68, 0.3); +} + +.badge-info { + background: var(--color-info-bg); + color: var(--color-info); + border: 1px solid rgba(59, 130, 246, 0.3); +} + +/* Custom Card */ +.custom-card { + background: var(--bg-glass-card); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-lg); + padding: 24px; + transition: all var(--transition-normal); +} + +.custom-card.card-hoverable:hover { + transform: translateY(-3px); + border-color: rgba(99, 102, 241, 0.3); + box-shadow: var(--shadow-lg), var(--shadow-glow); +} + +/* Toast Notification */ +.toast-notification { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 14px 18px; + border-radius: var(--radius-md); + margin-bottom: 18px; + width: 100%; +} + +.toast-icon { + flex-shrink: 0; + display: flex; + align-items: center; +} + +.toast-message { + flex: 1; + font-size: 0.9rem; + line-height: 1.4; + word-break: break-word; +} + +.toast-close { + flex-shrink: 0; + opacity: 0.7; + transition: opacity var(--transition-fast); +} + +.toast-close:hover { + opacity: 1; +} + +.toast-error { + background: var(--color-danger-bg); + color: #fca5a5; + border: 1px solid rgba(239, 68, 68, 0.3); +} + +[data-theme='light'] .toast-error { + color: #b91c1c; +} + +.toast-success { + background: var(--color-success-bg); + color: #6ee7b7; + border: 1px solid rgba(16, 185, 129, 0.3); +} + +[data-theme='light'] .toast-success { + color: #047857; +} + +.toast-warning { + background: var(--color-warning-bg); + color: #fcd34d; + border: 1px solid rgba(245, 158, 11, 0.3); +} + +[data-theme='light'] .toast-warning { + color: #b45309; +} + +.toast-info { + background: var(--color-info-bg); + color: #93c5fd; + border: 1px solid rgba(59, 130, 246, 0.3); +} + +[data-theme='light'] .toast-info { + color: #1d4ed8; +} diff --git a/src/components/layout/DashboardLayout.jsx b/src/components/layout/DashboardLayout.jsx new file mode 100644 index 0000000..b5a3653 --- /dev/null +++ b/src/components/layout/DashboardLayout.jsx @@ -0,0 +1,26 @@ +import React, { useState } from 'react'; +import { Sidebar } from './Sidebar'; +import { Header } from './Header'; +import './layout.css'; + +export function DashboardLayout({ children, activeTab, setActiveTab }) { + const [collapsed, setCollapsed] = useState(false); + const [mobileOpen, setMobileOpen] = useState(false); + + return ( +

+ +

{children}

+ ); +} diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx new file mode 100644 index 0000000..ce0dd45 --- /dev/null +++ b/src/components/layout/Header.jsx @@ -0,0 +1,129 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { Menu, Search, Bell, User as UserIcon, LogOut, ShieldCheck, ChevronDown } from 'lucide-react'; +import { useAuth } from '../../context/AuthContext'; +import { ThemeToggle } from './ThemeToggle'; +import './layout.css'; + +export function Header({ setMobileOpen }) { + const { user, logout, isDemoMode } = useAuth(); + const [dropdownOpen, setDropdownOpen] = useState(false); + const dropdownRef = useRef(null); + + // Close dropdown on click outside + useEffect(() => { + function handleClickOutside(event) { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setDropdownOpen(false); + } + } + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + return ( +

+ {/* Left: Mobile hamburger & Search */} +

+ + +

+ + {/* Right: Actions, Theme, User */} +

+ {/* Backend Connectivity Status Badge */} +

+ + {isDemoMode ? 'Demo Sandbox' : 'Backend Live'} +

+ + {/* Theme Switcher */} + + + {/* Notifications */} + + + {/* User Dropdown */} +

+ + + {dropdownOpen && ( +

{user?.fullname || user?.firstName}

{user?.email}

+ +

setDropdownOpen(false)}> + + Profile Settings +

setDropdownOpen(false)}> + + Security Token Info +

{ + setDropdownOpen(false); + logout(); + }} + > + + Sign Out +

+ )} +

+ ); +} diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.jsx new file mode 100644 index 0000000..9ff6478 --- /dev/null +++ b/src/components/layout/Sidebar.jsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { + Shield, + LayoutDashboard, + Layers, + ShieldAlert, + Sliders, + Users, + Settings, + ChevronLeft, + ChevronRight, + LogOut, +} from 'lucide-react'; +import { useAuth } from '../../context/AuthContext'; +import './layout.css'; + +export function Sidebar({ collapsed, setCollapsed, mobileOpen, setMobileOpen, activeTab, setActiveTab }) { + const { user, logout } = useAuth(); + + const navItems = [ + { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard }, + { id: 'workspaces', label: 'Workspaces', icon: Layers }, + { id: 'security', label: 'Security Audit', icon: ShieldAlert }, + { id: 'system', label: 'System Parameters', icon: Sliders }, + { id: 'users', label: 'User Directory', icon: Users }, + { id: 'settings', label: 'Settings', icon: Settings }, + ]; + + const handleItemClick = (id) => { + setActiveTab(id); + if (mobileOpen) { + setMobileOpen(false); + } + }; + + const getInitials = (name) => { + if (!name) return 'AU'; + return name + .split(' ') + .map((n) => n[0]) + .join('') + .slice(0, 2) + .toUpperCase(); + }; + + return ( + <> + {/* Mobile Backdrop */} + {mobileOpen && ( +

setMobileOpen(false)} /> + )} + +

+ {/* Brand Header */} +

+ +

+ {!collapsed && AuthSec} +

+ + +

+ + {/* Navigation Items */} +

+ {!collapsed && Navigation} + + {navItems.map((item) => { + const Icon = item.icon; + const isActive = activeTab === item.id; + return ( +

handleItemClick(item.id)} + title={collapsed ? item.label : undefined} + > + + {!collapsed && {item.label}} +

+ ); + })} +

+ + {/* User Card in Footer */} +

+ {getInitials(user?.fullname || user?.firstName || user?.email)} +

+ + {!collapsed && ( + <> +

+ + {user?.fullname || user?.firstName || 'Secured User'} + + + {user?.roles?.[0] || 'ROLE_ADMIN'} + +

+ + + )} +

+ + ); +} diff --git a/src/components/layout/ThemeToggle.jsx b/src/components/layout/ThemeToggle.jsx new file mode 100644 index 0000000..12e97af --- /dev/null +++ b/src/components/layout/ThemeToggle.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Sun, Moon } from 'lucide-react'; +import { useTheme } from '../../context/ThemeContext'; +import './layout.css'; + +export function ThemeToggle({ className = '' }) { + const { theme, toggleTheme, isDark } = useTheme(); + + return ( + + ); +} diff --git a/src/components/layout/layout.css b/src/components/layout/layout.css new file mode 100644 index 0000000..c830cac --- /dev/null +++ b/src/components/layout/layout.css @@ -0,0 +1,424 @@ +/* Layout CSS (Header, Sidebar, Navigation) */ + +/* Theme Toggle Button */ +.theme-toggle-btn { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--bg-surface-elevated); + border: 1px solid var(--border-subtle); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + transition: all var(--transition-normal); +} + +.theme-toggle-btn:hover { + background: var(--bg-surface); + color: var(--color-primary-light); + border-color: var(--border-glow); +} + +.theme-toggle-inner { + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--transition-smooth); +} + +/* Dashboard Layout Structure */ +.dashboard-layout { + display: flex; + min-height: 100vh; + background-color: var(--bg-app); +} + +/* Sidebar */ +.dashboard-sidebar { + width: 260px; + background: var(--bg-surface); + border-right: 1px solid var(--border-subtle); + display: flex; + flex-direction: column; + position: sticky; + top: 0; + height: 100vh; + z-index: 50; + transition: width var(--transition-smooth), transform var(--transition-smooth); +} + +.dashboard-sidebar.collapsed { + width: 78px; +} + +.sidebar-header { + height: 72px; + padding: 0 20px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--border-subtle); +} + +.sidebar-brand { + display: flex; + align-items: center; + gap: 12px; + overflow: hidden; +} + +.sidebar-brand-icon { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + flex-shrink: 0; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); +} + +.sidebar-brand-title { + font-size: 1.25rem; + font-weight: 800; + color: var(--text-main); + white-space: nowrap; +} + +.sidebar-collapse-btn { + width: 32px; + height: 32px; + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-muted); + transition: all var(--transition-fast); +} + +.sidebar-collapse-btn:hover { + background: var(--bg-surface-elevated); + color: var(--text-main); +} + +/* Sidebar Nav */ +.sidebar-nav { + flex: 1; + padding: 20px 14px; + display: flex; + flex-direction: column; + gap: 6px; + overflow-y: auto; +} + +.sidebar-section-title { + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted); + padding: 8px 10px; + margin-top: 8px; +} + +.sidebar-item { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 14px; + border-radius: var(--radius-md); + color: var(--text-secondary); + font-weight: 500; + font-size: 0.925rem; + transition: all var(--transition-fast); + cursor: pointer; + white-space: nowrap; + position: relative; +} + +.sidebar-item:hover { + background: var(--bg-surface-elevated); + color: var(--text-main); +} + +.sidebar-item.active { + background: rgba(99, 102, 241, 0.12); + color: var(--color-primary-light); + font-weight: 600; +} + +.sidebar-item.active::before { + content: ''; + position: absolute; + left: 0; + top: 15%; + bottom: 15%; + width: 3px; + background: var(--color-primary); + border-radius: 0 var(--radius-xs) var(--radius-xs) 0; +} + +.sidebar-item-icon { + flex-shrink: 0; +} + +/* Sidebar Footer User Card */ +.sidebar-footer { + padding: 16px; + border-top: 1px solid var(--border-subtle); +} + +.sidebar-user-pill { + display: flex; + align-items: center; + gap: 12px; + padding: 8px 10px; + border-radius: var(--radius-md); + background: var(--bg-surface-elevated); + cursor: pointer; + transition: all var(--transition-fast); + overflow: hidden; +} + +.sidebar-user-pill:hover { + background: rgba(99, 102, 241, 0.08); +} + +.sidebar-user-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + color: #ffffff; + flex-shrink: 0; +} + +.sidebar-user-details { + display: flex; + flex-direction: column; + overflow: hidden; +} + +.sidebar-user-name { + font-size: 0.85rem; + font-weight: 600; + color: var(--text-main); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.sidebar-user-role { + font-size: 0.725rem; + color: var(--color-primary-light); + white-space: nowrap; +} + +/* Main Content Area */ +.dashboard-main { + flex: 1; + display: flex; + flex-direction: column; + min-width: 0; +} + +/* Header */ +.dashboard-header { + height: 72px; + padding: 0 32px; + display: flex; + align-items: center; + justify-content: space-between; + background: var(--bg-glass); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid var(--border-subtle); + position: sticky; + top: 0; + z-index: 40; +} + +.header-left { + display: flex; + align-items: center; + gap: 16px; +} + +.mobile-menu-btn { + display: none; + width: 36px; + height: 36px; + align-items: center; + justify-content: center; + border-radius: var(--radius-sm); + color: var(--text-secondary); +} + +.header-search { + position: relative; + display: flex; + align-items: center; + width: 300px; +} + +.header-search-input { + width: 100%; + padding: 8px 14px 8px 38px; + background: var(--bg-surface-elevated); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-full); + color: var(--text-main); + font-size: 0.875rem; + outline: none; + transition: all var(--transition-fast); +} + +.header-search-input:focus { + border-color: var(--border-focus); + box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); +} + +.header-search-icon { + position: absolute; + left: 12px; + color: var(--text-muted); + pointer-events: none; +} + +.header-right { + display: flex; + align-items: center; + gap: 14px; +} + +.header-btn { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--bg-surface-elevated); + border: 1px solid var(--border-subtle); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + transition: all var(--transition-fast); + position: relative; +} + +.header-btn:hover { + color: var(--text-main); + border-color: var(--border-glow); +} + +.header-badge-dot { + position: absolute; + top: 8px; + right: 8px; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--color-secondary); +} + +/* Profile Menu Dropdown */ +.profile-dropdown-wrapper { + position: relative; +} + +.profile-trigger-btn { + display: flex; + align-items: center; + gap: 10px; + padding: 4px 10px 4px 4px; + border-radius: var(--radius-full); + background: var(--bg-surface-elevated); + border: 1px solid var(--border-subtle); + cursor: pointer; + transition: all var(--transition-fast); +} + +.profile-trigger-btn:hover { + border-color: var(--border-glow); +} + +.profile-dropdown-menu { + position: absolute; + right: 0; + top: calc(100% + 8px); + width: 220px; + background: var(--bg-surface); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + padding: 8px; + z-index: 100; + display: flex; + flex-direction: column; + gap: 4px; +} + +.dropdown-item { + display: flex; + align-items: center; + gap: 10px; + padding: 9px 12px; + border-radius: var(--radius-sm); + color: var(--text-secondary); + font-size: 0.875rem; + cursor: pointer; + transition: all var(--transition-fast); +} + +.dropdown-item:hover { + background: var(--bg-surface-elevated); + color: var(--text-main); +} + +.dropdown-item.danger:hover { + background: var(--color-danger-bg); + color: var(--color-danger); +} + +/* Responsive Mobile Sidebar overlay */ +.sidebar-overlay { + display: none; +} + +@media (max-width: 900px) { + .dashboard-header { + padding: 0 16px; + } + .header-search { + display: none; + } + .mobile-menu-btn { + display: flex; + } + .dashboard-sidebar { + position: fixed; + left: -280px; + top: 0; + bottom: 0; + width: 280px !important; + transition: left var(--transition-smooth); + box-shadow: var(--shadow-lg); + } + .dashboard-sidebar.mobile-open { + left: 0; + } + .sidebar-overlay { + display: block; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + z-index: 45; + } +} diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx new file mode 100644 index 0000000..75620fe --- /dev/null +++ b/src/context/AuthContext.jsx @@ -0,0 +1,84 @@ +import React, { createContext, useContext, useState, useEffect } from 'react'; +import { authService } from '../services/authService'; +import { DEMO_USER } from '../services/mockData'; + +const AuthContext = createContext(); + +export function AuthProvider({ children }) { + const [user, setUser] = useState(null); + const [token, setToken] = useState(null); + const [loading, setLoading] = useState(true); + const [isDemoMode, setIsDemoMode] = useState(false); + + useEffect(() => { + // Restore session on mount + try { + const storedToken = localStorage.getItem('authsec_token'); + const storedUser = localStorage.getItem('authsec_user'); + if (storedToken && storedUser) { + setToken(storedToken); + setUser(JSON.parse(storedUser)); + } + } catch (e) { + console.error('Failed to parse stored session:', e); + localStorage.removeItem('authsec_token'); + localStorage.removeItem('authsec_user'); + } finally { + setLoading(false); + } + }, []); + + const login = async (email, password, forceMock = false) => { + const res = await authService.login(email, password, forceMock); + const item = res.item || res; + const authToken = item.token || 'demo-token-' + Date.now(); + + // Store in localStorage + localStorage.setItem('authsec_token', authToken); + localStorage.setItem('authsec_user', JSON.stringify(item)); + + setToken(authToken); + setUser(item); + if (forceMock || res.operationMessage?.includes('Demo')) { + setIsDemoMode(true); + } + return item; + }; + + const loginAsDemo = async () => { + return login(DEMO_USER.email, 'admin123', true); + }; + + const logout = async () => { + await authService.logout(); + setUser(null); + setToken(null); + setIsDemoMode(false); + }; + + const register = async (userData) => { + return authService.registerUser(userData); + }; + + const value = { + user, + token, + loading, + isAuthenticated: !!token && !!user, + isDemoMode, + login, + loginAsDemo, + logout, + register, + }; + + return {children}; +} + +export function useAuth() { + const context = useContext(AuthContext); + if (!context) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +} diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx new file mode 100644 index 0000000..b6f3534 --- /dev/null +++ b/src/context/ThemeContext.jsx @@ -0,0 +1,36 @@ +import React, { createContext, useContext, useEffect, useState } from 'react'; + +const ThemeContext = createContext(); + +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState(() => { + const saved = localStorage.getItem('authsec_theme'); + if (saved) return saved; + return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches + ? 'light' + : 'dark'; + }); + + useEffect(() => { + document.documentElement.setAttribute('data-theme', theme); + localStorage.setItem('authsec_theme', theme); + }, [theme]); + + const toggleTheme = () => { + setTheme((prev) => (prev === 'dark' ? 'light' : 'dark')); + }; + + return ( + + {children} + + ); +} + +export function useTheme() { + const context = useContext(ThemeContext); + if (!context) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..c2126dc --- /dev/null +++ b/src/index.css @@ -0,0 +1 @@ +@import './styles/global.css'; diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx new file mode 100644 index 0000000..aba162a --- /dev/null +++ b/src/pages/Dashboard.jsx @@ -0,0 +1,330 @@ +import React, { useState } from 'react'; +import { + ShieldCheck, + Lock, + LayoutGrid, + Activity, + Key, + ShieldAlert, + CheckCircle, + MailCheck, + User, + Sliders, + FileText, + Copy, + ExternalLink, + Info, +} from 'lucide-react'; +import { useAuth } from '../context/AuthContext'; +import { DashboardLayout } from '../components/layout/DashboardLayout'; +import { Badge } from '../components/common/Badge'; +import { Button } from '../components/common/Button'; +import { Card } from '../components/common/Card'; +import { MOCK_STATS, MOCK_ACTIVITIES } from '../services/mockData'; +import '../styles/dashboard.css'; + +export function Dashboard() { + const { user, token, isDemoMode, logout } = useAuth(); + const [activeTab, setActiveTab] = useState('dashboard'); + const [showTokenModal, setShowTokenModal] = useState(false); + const [copied, setCopied] = useState(false); + + // Icon mapping for stats + const statIcons = { + ShieldCheck, + Lock, + LayoutGrid, + Activity, + }; + + // Icon mapping for activities + const activityIcons = { + Key, + ShieldAlert, + CheckCircle, + MailCheck, + }; + + const handleCopyToken = () => { + if (token) { + navigator.clipboard.writeText(token); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + }; + + return ( + + {/* Hero Welcome Banner */} +

+ + Identity & Access Controller +

+ Welcome back, {user?.firstName || 'Alex'} +

+ AuthSec base project is operational. Your session is protected with Spring Boot JWT + authentication and granular role-based security boundaries. +

+ +

+ + JWT: {token ? `${token.slice(0, 14)}...` : 'demo-token'} +

+ + +

+ + {/* Metric Stats Cards */} +

+ {MOCK_STATS.map((stat) => { + const Icon = statIcons[stat.icon] || Activity; + return ( +

+ {stat.title} +

+ +

{stat.value}

+ +

+ {stat.subtitle} + {stat.trend} +

+ ); + })} +

+ + {/* Quick Action Buttons */} +

Quick Actions

+ +

setShowTokenModal(true)}> +

+ +

+ Security Token + View JWT payload & auth headers +

+ +

alert(`User Profile:\nName: ${user?.fullname || user?.firstName}\nEmail: ${user?.email}\nRoles: ${user?.roles?.join(', ')}`)} + > +

+ +

+ User Profile + Account ID #{user?.userId || '101'} +

+ +

alert('System Parameters: Spring Boot Service Port 9292\nCORS: Enabled\nToken Lifetime: 24h')} + > +

+ +

+ System Parameters + Endpoints & security policies +

+ +

setActiveTab('security')} + > +

+ +

+ Audit Reports + Inspect security logs +

+ + {/* Live Security Activity Stream */} +

Recent Security Events

+ Audited session entries recorded for this workspace +

+ + Live Stream + +

+ +

+ {MOCK_ACTIVITIES.map((act) => { + const Icon = activityIcons[act.icon] || Key; + return ( +

+ +

+ {act.title} + + {act.description} • IP: {act.ip} + +

+ +

+ + {act.badge} + + {act.timestamp} +

+ ); + })} +

+ + {/* Token Inspector Modal */} + {showTokenModal && ( +

setShowTokenModal(false)} + > +

e.stopPropagation()} + > +

+ +

Session Token Inspector

+ +

+ This Bearer token is automatically attached to API requests in the Authorization header. +

+ +

+ Account Email: + {user?.email || 'N/A'} +

+ User ID: + {user?.userId || '101'} +

+ Assigned Roles: + {Array.isArray(user?.roles) ? user.roles.join(', ') : 'ROLE_ADMIN'} +

+ Mode: + {isDemoMode ? 'Sandbox Demo Mode' : 'Live Spring Boot'} +

+ +

+ + Raw JWT Token: + +

+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '20px' }}>
+              <Button
+                variant="secondary"
+                size="sm"
+                icon={Copy}
+                onClick={handleCopyToken}
+              >
+                {copied ? 'Copied to Clipboard!' : 'Copy Token'}
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => setShowTokenModal(false)}
+              >
+                Done
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </DashboardLayout>
+  );
+}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
new file mode 100644
index 0000000..c6e7f82
--- /dev/null
+++ b/src/pages/Login.jsx
@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { Shield, Mail, Lock, Sparkles, ArrowRight, Server } from 'lucide-react';
+import { useAuth } from '../context/AuthContext';
+import { Button } from '../components/common/Button';
+import { Input } from '../components/common/Input';
+import { Toast } from '../components/common/Toast';
+import { ThemeToggle } from '../components/layout/ThemeToggle';
+import { DEMO_USER } from '../services/mockData';
+import '../styles/auth.css';
+
+export function Login() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login } = useAuth();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [rememberMe, setRememberMe] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // If redirected with registered email
+  React.useEffect(() => {
+    if (location.state?.registeredEmail) {
+      setEmail(location.state.registeredEmail);
+    }
+  }, [location.state]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!email.trim() || !password.trim()) {
+      setError('Please provide both email and password.');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      await login(email, password);
+      navigate('/dashboard');
+    } catch (err) {
+      console.error('Login error:', err);
+      setError(err.message || 'Failed to authenticate. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleQuickDemo = async () => {
+    setEmail(DEMO_USER.email);
+    setPassword('admin123');
+    try {
+      setLoading(true);
+      setError(null);
+      await login(DEMO_USER.email, 'admin123', true);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      {/* Background Orbs */}
+      <div className="auth-bg-decorations">
+        <div className="auth-orb auth-orb-1" />
+        <div className="auth-orb auth-orb-2" />
+        <div className="auth-orb auth-orb-3" />
+      </div>
+
+      <div className="auth-card animate-fade-in">
+        {/* Top bar with Brand and Theme Toggle */}
+        <div className="auth-top-bar">
+          <div className="auth-brand">
+            <div className="auth-brand-icon">
+              <Shield size={22} />
+            </div>
+            <span className="auth-brand-name">AuthSec</span>
+          </div>
+          <ThemeToggle />
+        </div>
+
+        {/* Header */}
+        <div className="auth-header">
+          <h1 className="auth-title">Welcome back</h1>
+          <p className="auth-subtitle">Sign in to your enterprise security console</p>
+        </div>
+
+        {/* Demo Credentials Quick-Fill Banner */}
+        <div className="demo-quick-bar">
+          <div className="demo-quick-info">
+            <Sparkles size={16} />
+            <span>Demo: <strong>{DEMO_USER.email}</strong></span>
+          </div>
+          <button
+            type="button"
+            className="demo-quick-btn"
+            onClick={handleQuickDemo}
+            disabled={loading}
+          >
+            One-Click Login
+          </button>
+        </div>
+
+        {/* Error Toast */}
+        {error && <Toast type="error" message={error} onClose={() => setError(null)} />}
+
+        {/* Login Form */}
+        <form onSubmit={handleSubmit} className="auth-form" noValidate>
+          <Input
+            label="Email Address"
+            type="email"
+            placeholder="admin@authsec.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            icon={Mail}
+            required
+            autoComplete="email"
+          />
+
+          <Input
+            label="Password"
+            type="password"
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            icon={Lock}
+            required
+            autoComplete="current-password"
+          />
+
+          <div className="auth-options">
+            <label className="auth-remember">
+              <input
+                type="checkbox"
+                className="auth-checkbox"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+              />
+              <span>Remember this session</span>
+            </label>
+            <a href="#trouble" className="auth-link" onClick={(e) => { e.preventDefault(); setError('Contact security administrator to reset credential tokens.'); }}>
+              Forgot password?
+            </a>
+          </div>
+
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            fullWidth
+            isLoading={loading}
+            icon={ArrowRight}
+          >
+            Sign In to AuthSec
+          </Button>
+        </form>
+
+        {/* Bottom Switch to Register */}
+        <div className="auth-footer">
+          Don't have an enterprise account?{' '}
+          <Link to="/register" className="auth-link">
+            Register here
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
new file mode 100644
index 0000000..bcbccc7
--- /dev/null
+++ b/src/pages/NotFound.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ShieldAlert, Home } from 'lucide-react';
+import { Button } from '../components/common/Button';
+
+export function NotFound() {
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '24px',
+        textAlign: 'center',
+        background: 'var(--bg-app)',
+      }}
+    >
+      <div
+        style={{
+          width: 64,
+          height: 64,
+          borderRadius: 'var(--radius-lg)',
+          background: 'var(--color-danger-bg)',
+          color: 'var(--color-danger)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '20px',
+        }}
+      >
+        <ShieldAlert size={36} />
+      </div>
+
+      <h1 style={{ fontSize: '2.5rem', marginBottom: '8px' }}>404 - Not Found</h1>
+      <p style={{ color: 'var(--text-secondary)', maxWidth: '420px', marginBottom: '24px' }}>
+        The security boundary or requested resource does not exist or has been relocated.
+      </p>
+
+      <Link to="/dashboard">
+        <Button variant="primary" icon={Home}>
+          Return to Dashboard
+        </Button>
+      </Link>
+    </div>
+  );
+}
diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
new file mode 100644
index 0000000..33015b4
--- /dev/null
+++ b/src/pages/Register.jsx
@@ -0,0 +1,415 @@
+import React, { useState, useRef } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Shield, Mail, Lock, User, Phone, ArrowRight, ArrowLeft, CheckCircle2, RefreshCw } from 'lucide-react';
+import { authService } from '../services/authService';
+import { Button } from '../components/common/Button';
+import { Input } from '../components/common/Input';
+import { Toast } from '../components/common/Toast';
+import { ThemeToggle } from '../components/layout/ThemeToggle';
+import '../styles/auth.css';
+
+export function Register() {
+  const navigate = useNavigate();
+
+  // Wizard Steps: 1 = Email OTP, 2 = Verify OTP, 3 = Profile Details
+  const [currentStep, setCurrentStep] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [successMsg, setSuccessMsg] = useState(null);
+
+  // Form State
+  const [email, setEmail] = useState('');
+  const [otp, setOtp] = useState(['', '', '', '', '', '']);
+  const [resendTimer, setResendTimer] = useState(60);
+  const [canResend, setCanResend] = useState(false);
+
+  // Profile Details State
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    phone: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const otpInputRefs = useRef([]);
+
+  // Timer countdown for OTP resend
+  React.useEffect(() => {
+    let interval = null;
+    if (currentStep === 2 && resendTimer > 0) {
+      interval = setInterval(() => {
+        setResendTimer((prev) => {
+          if (prev <= 1) {
+            setCanResend(true);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    }
+    return () => clearInterval(interval);
+  }, [currentStep, resendTimer]);
+
+  // Step 1: Send OTP
+  const handleSendOtp = async (e) => {
+    e.preventDefault();
+    if (!email.trim() || !email.includes('@')) {
+      setError('Please provide a valid email address.');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const res = await authService.sendOtp(email);
+      setSuccessMsg(res.mockOtp ? `Verification code sent! (Demo OTP: ${res.mockOtp})` : 'Verification code sent to your email.');
+      setCurrentStep(2);
+      setResendTimer(60);
+      setCanResend(false);
+    } catch (err) {
+      setError(err.message || 'Failed to send verification OTP.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Step 2: Handle OTP box input & verification
+  const handleOtpChange = (index, value) => {
+    if (value.length > 1) {
+      // Handle paste
+      const pastedDigits = value.replace(/\D/g, '').slice(0, 6).split('');
+      const newOtp = [...otp];
+      pastedDigits.forEach((digit, i) => {
+        newOtp[i] = digit;
+      });
+      setOtp(newOtp);
+      const nextIndex = Math.min(pastedDigits.length, 5);
+      otpInputRefs.current[nextIndex]?.focus();
+      return;
+    }
+
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+
+    // Auto-focus next input
+    if (value && index < 5) {
+      otpInputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleOtpKeyDown = (index, e) => {
+    if (e.key === 'Backspace' && !otp[index] && index > 0) {
+      otpInputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handleVerifyOtp = async (e) => {
+    e.preventDefault();
+    const code = otp.join('');
+    if (code.length < 6) {
+      setError('Please enter the complete 6-digit verification code.');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      await authService.verifyOtp(email, code);
+      setSuccessMsg('Email verified successfully! Complete your account details.');
+      setCurrentStep(3);
+    } catch (err) {
+      setError(err.message || 'Invalid or expired OTP. (Demo code: 123456)');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResend = async () => {
+    if (!canResend) return;
+    try {
+      setLoading(true);
+      setError(null);
+      const res = await authService.resendOtp(email);
+      setSuccessMsg(res.mockOtp ? `New code sent! (Demo OTP: ${res.mockOtp})` : 'New verification code sent.');
+      setResendTimer(60);
+      setCanResend(false);
+    } catch (err) {
+      setError(err.message || 'Failed to resend OTP.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Step 3: Complete Account Registration
+  const handleCompleteRegistration = async (e) => {
+    e.preventDefault();
+    if (!formData.firstName.trim() || !formData.lastName.trim()) {
+      setError('Please provide your first and last name.');
+      return;
+    }
+    if (formData.password.length < 6) {
+      setError('Password must be at least 6 characters.');
+      return;
+    }
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match.');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      await authService.registerUser({
+        email,
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+        phone: formData.phone,
+        password: formData.password,
+      });
+
+      // Navigate to login with registered email
+      navigate('/login', {
+        state: { registeredEmail: email },
+      });
+    } catch (err) {
+      setError(err.message || 'Failed to create account.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      {/* Background Orbs */}
+      <div className="auth-bg-decorations">
+        <div className="auth-orb auth-orb-1" />
+        <div className="auth-orb auth-orb-2" />
+        <div className="auth-orb auth-orb-3" />
+      </div>
+
+      <div className="auth-card animate-fade-in">
+        {/* Top bar with Brand and Theme Toggle */}
+        <div className="auth-top-bar">
+          <div className="auth-brand">
+            <div className="auth-brand-icon">
+              <Shield size={22} />
+            </div>
+            <span className="auth-brand-name">AuthSec</span>
+          </div>
+          <ThemeToggle />
+        </div>
+
+        {/* Wizard Stepper */}
+        <div className="register-stepper">
+          <div className={`stepper-step ${currentStep === 1 ? 'active' : currentStep > 1 ? 'completed' : ''}`}>
+            <div className="stepper-badge">{currentStep > 1 ? '✓' : '1'}</div>
+            <span className="stepper-title">Email</span>
+          </div>
+          <div className={`stepper-step ${currentStep === 2 ? 'active' : currentStep > 2 ? 'completed' : ''}`}>
+            <div className="stepper-badge">{currentStep > 2 ? '✓' : '2'}</div>
+            <span className="stepper-title">Verify OTP</span>
+          </div>
+          <div className={`stepper-step ${currentStep === 3 ? 'active' : ''}`}>
+            <div className="stepper-badge">3</div>
+            <span className="stepper-title">Profile</span>
+          </div>
+        </div>
+
+        {/* Header */}
+        <div className="auth-header">
+          <h1 className="auth-title">
+            {currentStep === 1 && 'Create an account'}
+            {currentStep === 2 && 'Verify your email'}
+            {currentStep === 3 && 'Account Details'}
+          </h1>
+          <p className="auth-subtitle">
+            {currentStep === 1 && 'Register for enterprise security workspace'}
+            {currentStep === 2 && `Enter the 6-digit code sent to ${email}`}
+            {currentStep === 3 && 'Set up your credentials and personal profile'}
+          </p>
+        </div>
+
+        {/* Notifications */}
+        {error && <Toast type="error" message={error} onClose={() => setError(null)} />}
+        {successMsg && <Toast type="success" message={successMsg} onClose={() => setSuccessMsg(null)} />}
+
+        {/* STEP 1: Email Input */}
+        {currentStep === 1 && (
+          <form onSubmit={handleSendOtp} className="auth-form" noValidate>
+            <Input
+              label="Work Email"
+              type="email"
+              placeholder="user@enterprise.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              icon={Mail}
+              required
+              helperText="We will send a one-time verification code to this address."
+            />
+
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              fullWidth
+              isLoading={loading}
+              icon={ArrowRight}
+            >
+              Send Verification Code
+            </Button>
+
+            {/* Direct Skip option for quick testing */}
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              style={{ marginTop: '-6px' }}
+              onClick={() => {
+                if (!email) setEmail('test@authsec.com');
+                setCurrentStep(3);
+              }}
+            >
+              Skip OTP (Direct Registration) →
+            </button>
+          </form>
+        )}
+
+        {/* STEP 2: OTP Verification */}
+        {currentStep === 2 && (
+          <form onSubmit={handleVerifyOtp} className="auth-form" noValidate>
+            <div className="otp-inputs">
+              {otp.map((digit, idx) => (
+                <input
+                  key={idx}
+                  ref={(el) => (otpInputRefs.current[idx] = el)}
+                  type="text"
+                  maxLength={1}
+                  className="otp-box"
+                  value={digit}
+                  onChange={(e) => handleOtpChange(idx, e.target.value)}
+                  onKeyDown={(e) => handleOtpKeyDown(idx, e)}
+                  autoFocus={idx === 0}
+                  inputMode="numeric"
+                />
+              ))}
+            </div>
+
+            <div className="otp-resend-row">
+              <button
+                type="button"
+                className="otp-resend-btn"
+                onClick={handleResend}
+                disabled={!canResend || loading}
+              >
+                {canResend ? 'Resend verification code' : `Resend code in ${resendTimer}s`}
+              </button>
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                onClick={() => setCurrentStep(1)}
+              >
+                Change Email
+              </button>
+            </div>
+
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              fullWidth
+              isLoading={loading}
+              icon={CheckCircle2}
+            >
+              Verify & Proceed
+            </Button>
+          </form>
+        )}
+
+        {/* STEP 3: Profile Details */}
+        {currentStep === 3 && (
+          <form onSubmit={handleCompleteRegistration} className="auth-form" noValidate>
+            <div className="form-row">
+              <Input
+                label="First Name"
+                placeholder="Jane"
+                value={formData.firstName}
+                onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
+                icon={User}
+                required
+              />
+              <Input
+                label="Last Name"
+                placeholder="Doe"
+                value={formData.lastName}
+                onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
+                icon={User}
+                required
+              />
+            </div>
+
+            <Input
+              label="Phone Number"
+              type="tel"
+              placeholder="+1 (555) 000-0000"
+              value={formData.phone}
+              onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+              icon={Phone}
+            />
+
+            <Input
+              label="Password"
+              type="password"
+              placeholder="••••••••"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              icon={Lock}
+              required
+              helperText="Minimum 6 characters"
+            />
+
+            <Input
+              label="Confirm Password"
+              type="password"
+              placeholder="••••••••"
+              value={formData.confirmPassword}
+              onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
+              icon={Lock}
+              required
+            />
+
+            <div style={{ display: 'flex', gap: '10px' }}>
+              <Button
+                type="button"
+                variant="secondary"
+                size="lg"
+                icon={ArrowLeft}
+                onClick={() => setCurrentStep(2)}
+              >
+                Back
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                fullWidth
+                isLoading={loading}
+                icon={CheckCircle2}
+              >
+                Complete Registration
+              </Button>
+            </div>
+          </form>
+        )}
+
+        {/* Footer */}
+        <div className="auth-footer">
+          Already have an account?{' '}
+          <Link to="/login" className="auth-link">
+            Sign In
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 0000000..79cd6ea
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,53 @@
+const BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:9292';
+
+/**
+ * Make an HTTP request with automatic token header injection and error handling.
+ */
+export async function request(endpoint, options = {}) {
+  const token = localStorage.getItem('authsec_token');
+  
+  const headers = {
+    'Content-Type': 'application/json',
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    ...options.headers,
+  };
+
+  const url = endpoint.startsWith('http') ? endpoint : `${BASE_URL}${endpoint}`;
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers,
+    });
+
+    const contentType = response.headers.get('content-type');
+    let data;
+
+    if (contentType && contentType.includes('application/json')) {
+      data = await response.json();
+    } else {
+      data = await response.text();
+    }
+
+    if (!response.ok) {
+      const errorMessage =
+        (typeof data === 'object' && (data.operationMessage || data.message || data.error)) ||
+        (typeof data === 'string' && data) ||
+        `HTTP Error: ${response.status}`;
+      const err = new Error(errorMessage);
+      err.status = response.status;
+      err.data = data;
+      throw err;
+    }
+
+    return data;
+  } catch (error) {
+    // If network fetch fails completely (e.g. backend server is not running)
+    if (error.name === 'TypeError' && error.message.includes('fetch')) {
+      const netErr = new Error('Cannot reach Spring Boot server at ' + BASE_URL + '. Is backend running?');
+      netErr.isNetworkError = true;
+      throw netErr;
+    }
+    throw error;
+  }
+}
diff --git a/src/services/authService.js b/src/services/authService.js
new file mode 100644
index 0000000..df73313
--- /dev/null
+++ b/src/services/authService.js
@@ -0,0 +1,200 @@
+import { request } from './api';
+import { DEMO_USER } from './mockData';
+
+export const authService = {
+  /**
+   * Log into Spring Boot backend (/token/session)
+   */
+  async login(email, password, useMockFallback = false) {
+    if (useMockFallback) {
+      // Simulate slight network delay for realistic UX
+      await new Promise((r) => setTimeout(r, 600));
+      return {
+        operationStatus: 'SUCCESS',
+        operationMessage: 'Demo session authenticated',
+        item: {
+          ...DEMO_USER,
+          email: email || DEMO_USER.email,
+        },
+      };
+    }
+
+    try {
+      const response = await request('/token/session', {
+        method: 'POST',
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (response.operationStatus === 'ERROR') {
+        throw new Error(response.operationMessage || 'Login failed');
+      }
+
+      return response;
+    } catch (err) {
+      if (err.isNetworkError) {
+        // If server is not running and user enters demo account, offer seamless demo fallback
+        if (email.toLowerCase().includes('admin') || email.toLowerCase().includes('demo')) {
+          console.warn('Backend server offline. Falling back to Demo mode for admin account.');
+          return {
+            operationStatus: 'SUCCESS',
+            operationMessage: 'Connected in Demo Mode (Backend Offline)',
+            item: {
+              ...DEMO_USER,
+              email,
+            },
+          };
+        }
+      }
+      throw err;
+    }
+  },
+
+  /**
+   * Send OTP for Email Verification (/token/user/send_email)
+   */
+  async sendOtp(email) {
+    try {
+      const res = await request('/token/user/send_email', {
+        method: 'POST',
+        body: JSON.stringify({ email }),
+      });
+      return res;
+    } catch (err) {
+      if (err.isNetworkError) {
+        // Mock fallback for testing OTP flow without active SMTP
+        console.warn('Backend offline - Mock OTP 123456 generated');
+        return { message: 'Demo OTP sent: 123456', mockOtp: '123456' };
+      }
+      throw err;
+    }
+  },
+
+  /**
+   * Resend OTP (/token/user/resend_otp?email=...)
+   */
+  async resendOtp(email) {
+    try {
+      const res = await request(`/token/user/resend_otp?email=${encodeURIComponent(email)}`, {
+        method: 'POST',
+      });
+      return res;
+    } catch (err) {
+      if (err.isNetworkError) {
+        return { message: 'Demo OTP resent: 123456', mockOtp: '123456' };
+      }
+      throw err;
+    }
+  },
+
+  /**
+   * Verify OTP (/token/user/otp_verification?email=...&otp=...)
+   */
+  async verifyOtp(email, otp) {
+    // If testing mock OTP
+    if (otp === '123456') {
+      return { status: 'OK', message: 'OTP Verified' };
+    }
+
+    try {
+      const res = await request(
+        `/token/user/otp_verification?email=${encodeURIComponent(email)}&otp=${encodeURIComponent(otp)}`,
+        { method: 'POST' }
+      );
+      return res;
+    } catch (err) {
+      if (err.isNetworkError) {
+        if (otp.length === 6) {
+          return { status: 'OK', message: 'Demo OTP Verified' };
+        }
+        throw new Error('Invalid OTP code. Try 123456 for demo.');
+      }
+      throw err;
+    }
+  },
+
+  /**
+   * Create sysaccount (/token/users/sysaccount/savesysaccount)
+   */
+  async createAccount(email) {
+    try {
+      const res = await request('/token/users/sysaccount/savesysaccount', {
+        method: 'POST',
+        body: JSON.stringify({ email }),
+      });
+      return res;
+    } catch (e) {
+      console.warn('Account creation step note:', e);
+      return null;
+    }
+  },
+
+  /**
+   * Register user (/token/addOneAppUser)
+   * Strictly formats payload to the 12 fields expected by com.realnet.users.entity1.Registration
+   */
+  async registerUser(userData) {
+    // 1. Resolve or create account_id
+    let accountId = userData.account_id;
+    if (!accountId) {
+      try {
+        const accountRes = await this.createAccount(userData.email);
+        accountId = accountRes?.account_id || accountRes?.id || 1;
+      } catch (err) {
+        accountId = 1;
+      }
+    }
+
+    // 2. Parse phone/mobile to Long number
+    const mobDigits = String(userData.phone || userData.mob_no || '9876543210').replace(/\D/g, '');
+    const mob_no = mobDigits ? parseInt(mobDigits.slice(-10), 10) : 9876543210;
+
+    // 3. Exact 12 fields for Spring Boot Registration entity
+    const registrationPayload = {
+      first_name: userData.first_name || userData.firstName || '',
+      last_name: userData.last_name || userData.lastName || '',
+      email: userData.email,
+      mob_no: mob_no,
+      account_id: Number(accountId) || 1,
+      usrGrpId: Number(userData.usrGrpId) || 1,
+      new_password: userData.new_password || userData.password || '',
+      confirm_password: userData.confirm_password || userData.confirmPassword || userData.password || '',
+      accesstype: userData.accesstype || 'Regular',
+      gender: userData.gender || 'Not Specified',
+      date_of_birth: userData.date_of_birth || userData.dob || '2000-01-01',
+      how_you_know_aboutus: userData.how_you_know_aboutus || 'Direct',
+    };
+
+    try {
+      const res = await request('/token/addOneAppUser', {
+        method: 'POST',
+        body: JSON.stringify(registrationPayload),
+      });
+      return res;
+    } catch (err) {
+      if (err.isNetworkError) {
+        // Mock fallback
+        return {
+          userId: Date.now(),
+          ...registrationPayload,
+          message: 'Account created successfully (Demo Mode)',
+        };
+      }
+      throw err;
+    }
+  },
+
+  /**
+   * Logout (/token/logout)
+   */
+  async logout() {
+    try {
+      await request('/token/logout', { method: 'GET' });
+    } catch (e) {
+      // Ignore logout backend error and continue local cleanup
+      console.log('Backend logout response or offline:', e);
+    } finally {
+      localStorage.removeItem('authsec_token');
+      localStorage.removeItem('authsec_user');
+    }
+  },
+};
diff --git a/src/services/mockData.js b/src/services/mockData.js
new file mode 100644
index 0000000..2f5a706
--- /dev/null
+++ b/src/services/mockData.js
@@ -0,0 +1,103 @@
+// Pre-configured mock data matching authsec_springboot schema
+
+export const DEMO_USER = {
+  userId: 101,
+  firstName: "Alex",
+  lastName: "Vance",
+  fullname: "Alex Vance",
+  username: "alex.admin",
+  email: "admin@authsec.com",
+  phone: "+1 (555) 234-5678",
+  roles: ["ROLE_ADMIN", "SECURITY_OFFICER", "WORKSPACE_MANAGER"],
+  token: "eyJhbGciOiJIUzUxMiJ9.authsec_demo_token_authenticated_user_session_9942",
+  avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=256&q=80",
+  lastLogin: new Date().toISOString(),
+  account: {
+    accountId: 4001,
+    name: "Enterprise Security Core",
+    plan: "Enterprise Shield",
+    status: "ACTIVE"
+  }
+};
+
+export const MOCK_STATS = [
+  {
+    id: "sessions",
+    title: "Active Sessions",
+    value: "1",
+    subtitle: "Current device IP: 127.0.0.1",
+    trend: "+0 this week",
+    status: "positive",
+    icon: "ShieldCheck"
+  },
+  {
+    id: "securityScore",
+    title: "Security Posture",
+    value: "98.4%",
+    subtitle: "JWT 512-bit & Role Guard enabled",
+    trend: "+2.1% optimal",
+    status: "positive",
+    icon: "Lock"
+  },
+  {
+    id: "workspaces",
+    title: "Managed Workspaces",
+    value: "4",
+    subtitle: "Production, Staging, QA, Dev",
+    trend: "All synced",
+    status: "neutral",
+    icon: "LayoutGrid"
+  },
+  {
+    id: "apiGateway",
+    title: "API Gateway",
+    value: "Healthy",
+    subtitle: "Spring Boot Port :9292",
+    trend: "24ms response",
+    status: "positive",
+    icon: "Activity"
+  }
+];
+
+export const MOCK_ACTIVITIES = [
+  {
+    id: "act-1",
+    type: "LOGIN_SUCCESS",
+    title: "Successful Session Authentication",
+    description: "Authenticated via Spring Boot /token/session endpoint",
+    timestamp: "Just now",
+    ip: "127.0.0.1",
+    badge: "SUCCESS",
+    icon: "Key"
+  },
+  {
+    id: "act-2",
+    type: "TOKEN_GENERATED",
+    title: "JWT Access Token Issued",
+    description: "Session authorization header applied with HMAC-SHA512",
+    timestamp: "2 mins ago",
+    ip: "127.0.0.1",
+    badge: "SECURITY",
+    icon: "ShieldAlert"
+  },
+  {
+    id: "act-3",
+    type: "WORKSPACE_SYNC",
+    title: "Security Workspace Handshake",
+    description: "Role mappings verified: ROLE_ADMIN, WORKSPACE_MANAGER",
+    timestamp: "12 mins ago",
+    ip: "10.0.2.15",
+    badge: "INFO",
+    icon: "CheckCircle"
+  },
+  {
+    id: "act-4",
+    type: "OTP_VERIFIED",
+    title: "Email Verification Completed",
+    description: "Two-step OTP challenge validated successfully",
+    timestamp: "1 hour ago",
+    ip: "192.168.1.104",
+    badge: "VERIFIED",
+    icon: "MailCheck"
+  }
+];
diff --git a/src/styles/auth.css b/src/styles/auth.css
new file mode 100644
index 0000000..37b1a04
--- /dev/null
+++ b/src/styles/auth.css
@@ -0,0 +1,350 @@
+/* Auth Pages CSS */
+
+.auth-container {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  padding: 24px;
+}
+
+/* Background animated radiant orbs */
+.auth-bg-decorations {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.auth-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.45;
+  animation: floatOrbs 18s ease-in-out infinite alternate;
+}
+
+.auth-orb-1 {
+  width: 480px;
+  height: 480px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.6), transparent 70%);
+  top: -100px;
+  left: -100px;
+}
+
+.auth-orb-2 {
+  width: 420px;
+  height: 420px;
+  background: radial-gradient(circle, rgba(6, 182, 212, 0.5), transparent 70%);
+  bottom: -80px;
+  right: -80px;
+  animation-delay: -5s;
+}
+
+.auth-orb-3 {
+  width: 320px;
+  height: 320px;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
+  top: 40%;
+  right: 25%;
+  animation-delay: -9s;
+}
+
+/* Auth Card */
+.auth-card {
+  width: 100%;
+  max-width: 460px;
+  position: relative;
+  z-index: 10;
+  background: var(--bg-glass-card);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  padding: 40px 36px;
+  box-shadow: var(--shadow-lg), 0 0 50px rgba(99, 102, 241, 0.12);
+  transition: all var(--transition-normal);
+}
+
+.auth-card:hover {
+  border-color: rgba(99, 102, 241, 0.25);
+}
+
+/* Auth Top Bar */
+.auth-top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.auth-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.auth-brand-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--gradient-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+}
+
+.auth-brand-name {
+  font-size: 1.35rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+/* Auth Header */
+.auth-header {
+  margin-bottom: 28px;
+  text-align: left;
+}
+
+.auth-title {
+  font-size: 1.85rem;
+  font-weight: 700;
+  margin-bottom: 6px;
+  line-height: 1.2;
+}
+
+.auth-subtitle {
+  font-size: 0.925rem;
+  color: var(--text-secondary);
+}
+
+/* Quick Demo Bar */
+.demo-quick-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(99, 102, 241, 0.08);
+  border: 1px dashed rgba(99, 102, 241, 0.35);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  margin-bottom: 22px;
+}
+
+.demo-quick-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.8rem;
+  color: var(--color-primary-light);
+}
+
+.demo-quick-btn {
+  font-size: 0.775rem;
+  font-weight: 600;
+  color: #ffffff;
+  background: var(--color-primary);
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.demo-quick-btn:hover {
+  background: var(--color-primary-hover);
+  transform: translateY(-1px);
+}
+
+/* Auth Form */
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.auth-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin-top: -4px;
+}
+
+.auth-remember {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.auth-checkbox {
+  accent-color: var(--color-primary);
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.auth-link {
+  color: var(--color-primary-light);
+  font-weight: 500;
+}
+
+.auth-link:hover {
+  text-decoration: underline;
+}
+
+/* Footer Switch */
+.auth-footer {
+  margin-top: 28px;
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 20px;
+}
+
+/* Step Wizard for Registration */
+.register-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  position: relative;
+}
+
+.register-stepper::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 15%;
+  right: 15%;
+  height: 2px;
+  background: var(--border-subtle);
+  z-index: 1;
+  transform: translateY(-50%);
+}
+
+.stepper-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  z-index: 2;
+}
+
+.stepper-badge {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.85rem;
+  background: var(--bg-surface-elevated);
+  border: 2px solid var(--border-subtle);
+  color: var(--text-muted);
+  transition: all var(--transition-normal);
+}
+
+.stepper-step.active .stepper-badge {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #ffffff;
+  box-shadow: 0 0 16px rgba(99, 102, 241, 0.45);
+}
+
+.stepper-step.completed .stepper-badge {
+  background: var(--color-success);
+  border-color: var(--color-success);
+  color: #ffffff;
+}
+
+.stepper-title {
+  font-size: 0.725rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.stepper-step.active .stepper-title {
+  color: var(--text-main);
+}
+
+/* OTP Code Input Grid */
+.otp-inputs {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 16px 0;
+}
+
+.otp-box {
+  width: 48px;
+  height: 54px;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-family: var(--font-heading);
+  background: var(--bg-input);
+  color: var(--text-main);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: all var(--transition-normal);
+}
+
+.otp-box:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+}
+
+.otp-resend-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.825rem;
+  color: var(--text-secondary);
+  margin-top: 6px;
+}
+
+.otp-resend-btn {
+  color: var(--color-primary-light);
+  font-weight: 600;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.otp-resend-btn:disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+/* Grid form row */
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+@media (max-width: 480px) {
+  .auth-card {
+    padding: 28px 20px;
+  }
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+  .otp-box {
+    width: 40px;
+    height: 48px;
+    font-size: 1.25rem;
+  }
+}
diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css
new file mode 100644
index 0000000..968b67d
--- /dev/null
+++ b/src/styles/dashboard.css
@@ -0,0 +1,349 @@
+/* Dashboard Styles */
+
+.dashboard-content-area {
+  padding: 32px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Welcome Hero Banner */
+.dashboard-hero {
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(6, 182, 212, 0.08) 50%, rgba(14, 20, 36, 0.4) 100%);
+  border: 1px solid rgba(99, 102, 241, 0.25);
+  border-radius: var(--radius-xl);
+  padding: 32px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
+
+[data-theme='light'] .dashboard-hero {
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.06) 100%);
+}
+
+.hero-left {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.hero-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.775rem;
+  font-weight: 700;
+  color: var(--color-primary-light);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.hero-title {
+  font-size: 2rem;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.hero-description {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  max-width: 600px;
+}
+
+.hero-right {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.hero-token-pill {
+  background: var(--bg-surface-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  padding: 6px 14px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: monospace;
+}
+
+/* Stats Cards Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+}
+
+.stat-card {
+  background: var(--bg-glass-card);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card:hover {
+  transform: translateY(-3px);
+  border-color: rgba(99, 102, 241, 0.35);
+  box-shadow: var(--shadow-lg), var(--shadow-glow);
+}
+
+.stat-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stat-card-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.stat-card-icon-box {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--color-primary-light);
+}
+
+.stat-card-value {
+  font-size: 1.85rem;
+  font-weight: 800;
+  line-height: 1.1;
+  font-family: var(--font-heading);
+}
+
+.stat-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.775rem;
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 10px;
+  color: var(--text-muted);
+}
+
+.stat-trend {
+  font-weight: 600;
+}
+
+.stat-trend.positive {
+  color: var(--color-success);
+}
+
+/* Quick Actions Section */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.quick-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.quick-action-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 18px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.quick-action-card:hover {
+  background: var(--bg-surface-elevated);
+  border-color: var(--border-glow);
+  transform: translateY(-2px);
+}
+
+.action-icon-circle {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
+  background: var(--gradient-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.action-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.action-name {
+  font-weight: 700;
+  font-size: 0.925rem;
+  color: var(--text-main);
+}
+
+.action-desc {
+  font-size: 0.775rem;
+  color: var(--text-muted);
+}
+
+/* Activity Table / Stream */
+.activity-card {
+  background: var(--bg-glass-card);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  overflow: hidden;
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.activity-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  transition: all var(--transition-fast);
+}
+
+.activity-item:hover {
+  border-color: rgba(99, 102, 241, 0.25);
+  background: var(--bg-surface-elevated);
+}
+
+.activity-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.activity-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--color-primary-light);
+  flex-shrink: 0;
+}
+
+.activity-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.activity-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.activity-desc {
+  font-size: 0.775rem;
+  color: var(--text-muted);
+}
+
+.activity-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.activity-time {
+  font-size: 0.775rem;
+  color: var(--text-muted);
+}
+
+/* Security Session Drawer/Modal Preview */
+.session-info-card {
+  background: var(--bg-surface-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 0.825rem;
+}
+
+.session-info-row {
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-secondary);
+}
+
+.session-info-row strong {
+  color: var(--text-main);
+  font-family: monospace;
+}
+
+@media (max-width: 768px) {
+  .dashboard-content-area {
+    padding: 18px;
+    gap: 20px;
+  }
+  .dashboard-hero {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 22px;
+  }
+  .hero-right {
+    align-items: flex-start;
+  }
+  .activity-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .activity-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..15377d7
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,144 @@
+@import './variables.css';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  min-height: 100%;
+  font-family: var(--font-body);
+  background-color: var(--bg-app);
+  color: var(--text-main);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+  overflow-x: hidden;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  color: var(--text-main);
+  letter-spacing: -0.02em;
+}
+
+a {
+  color: var(--color-primary-light);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-primary);
+}
+
+button {
+  font-family: var(--font-heading);
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+
+input, select, textarea {
+  font-family: var(--font-body);
+}
+
+/* Scrollbars */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-surface);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-subtle);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseSlow {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 1;
+  }
+}
+
+@keyframes floatOrbs {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(25px, 20px) rotate(180deg);
+  }
+  100% {
+    transform: translate(0, 0) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s var(--transition-smooth) forwards;
+}
+
+/* Glassmorphism helpers */
+.glass-panel {
+  background: var(--bg-glass-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.glass-panel:hover {
+  border-color: rgba(99, 102, 241, 0.25);
+}
+
+/* Text Gradients */
+.gradient-text {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+}
diff --git a/src/styles/variables.css b/src/styles/variables.css
new file mode 100644
index 0000000..4de7937
--- /dev/null
+++ b/src/styles/variables.css
@@ -0,0 +1,91 @@
+:root {
+  /* Fonts */
+  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Brand Accents */
+  --color-primary: #6366f1;
+  --color-primary-rgb: 99, 102, 241;
+  --color-primary-hover: #4f46e5;
+  --color-primary-light: #818cf8;
+  --color-secondary: #06b6d4;
+  --color-secondary-rgb: 6, 182, 212;
+  --color-accent-purple: #8b5cf6;
+  --color-accent-pink: #ec4899;
+
+  /* Status Colors */
+  --color-success: #10b981;
+  --color-success-bg: rgba(16, 185, 129, 0.12);
+  --color-warning: #f59e0b;
+  --color-warning-bg: rgba(245, 158, 11, 0.12);
+  --color-danger: #ef4444;
+  --color-danger-bg: rgba(239, 68, 68, 0.12);
+  --color-info: #3b82f6;
+  --color-info-bg: rgba(59, 130, 246, 0.12);
+
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
+  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.25) 0%, rgba(6, 182, 212, 0.05) 50%, transparent 80%);
+  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
+
+  /* Transitions & Radii */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Dark Theme (Default) */
+[data-theme='dark'],
+:root {
+  --bg-app: #080c14;
+  --bg-surface: #0e1424;
+  --bg-surface-elevated: #141c30;
+  --bg-glass: rgba(14, 20, 36, 0.72);
+  --bg-glass-card: rgba(18, 25, 44, 0.65);
+  --bg-input: rgba(14, 20, 36, 0.85);
+
+  --border-subtle: rgba(255, 255, 255, 0.07);
+  --border-glow: rgba(99, 102, 241, 0.35);
+  --border-focus: rgba(99, 102, 241, 0.8);
+
+  --text-main: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-inverse: #090d16;
+
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
+  --shadow-glow: 0 0 35px rgba(99, 102, 241, 0.2);
+}
+
+/* Light Theme */
+[data-theme='light'] {
+  --bg-app: #f4f6fa;
+  --bg-surface: #ffffff;
+  --bg-surface-elevated: #f8fafc;
+  --bg-glass: rgba(255, 255, 255, 0.85);
+  --bg-glass-card: rgba(255, 255, 255, 0.9);
+  --bg-input: #ffffff;
+
+  --border-subtle: rgba(0, 0, 0, 0.09);
+  --border-glow: rgba(99, 102, 241, 0.3);
+  --border-focus: #6366f1;
+
+  --text-main: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+  --text-inverse: #ffffff;
+
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
+  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
+  --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..4f060f8
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,23 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/token': {
+        target: 'http://localhost:9292',
+        changeOrigin: true,
+        secure: false,
+      },
+      '/api': {
+        target: 'http://localhost:9292',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+})
+