Build a REACT projct for an IT infrastructure documentation and troubleshooting knowledge management platform called "MapIT".

This web application allows IT teams to inventory servers, virtual machines, network devices, and other infrastructure elements, map their relationships/dependencies, and record problems encountered with their solutions.

TARGET USERS:
- IT administrators and network engineers (primary)
- System administrators and DevOps teams
- IT managers viewing dashboards and reports

DESIGN REQUIREMENTS:

Visual Style:
- Modern, professional dashboard aesthetic similar to Tailwind UI or Vercel design system
- Clean, minimalist interface with ample white space
- Professional color palette: Primary (deep blue #1E40AF), Secondary (slate gray #475569), Accent (emerald green #10B981 for success states), Alert (amber #F59E0B for warnings)
- Consistent rounded corners (8px for cards, 6px for buttons)
- Subtle shadows and smooth transitions for depth

Typography:
- Font family: Inter or system fonts for readability
- Clear hierarchy: H1 (32px bold), H2 (24px semibold), Body (16px regular), Small text (14px)
- High contrast text for accessibility (WCAG AA compliant)

Layout & Responsiveness:
- Mobile-first responsive design (breakpoints: 640px, 768px, 1024px, 1280px)
- Sidebar navigation on desktop, collapsible hamburger menu on mobile
- Grid-based layouts with flexible containers
- Touch-friendly buttons (min 44x44px) for mobile

PAGES TO BUILD:

1. Login Page:
- Centered card layout with logo at top
- Email and password fields with icon prefixes
- "Remember me" checkbox and "Forgot password?" link
- Primary CTA button with loading state animation
- Optional: SSO buttons (Google, Microsoft) below divider
- Background: Subtle gradient or geometric pattern

2. Dashboard (Home):
- Top navigation bar: App logo, search bar, notifications bell, user avatar dropdown
- Left sidebar: Navigation menu with icons (Dashboard, Assets, Problems, Relationships, Reports, Settings)
- Main content area:
* KPI cards showing: Total Assets, Active Servers, Open Problems, Resolved This Month (with trend indicators)
* Interactive infrastructure topology visualization (network graph or tree view)
* Recent activity timeline
* Quick action buttons: Add Asset, Log Problem, View Map

3. Asset Inventory Page:
- Search and filter toolbar (by type, location, status, tags)
- Data table with sortable columns: Name, Type, IP Address, Location, Status, Last Updated
- Inline actions per row: View, Edit, Delete icons
- Pagination controls at bottom
- "Add New Asset" floating action button (FAB)
- Bulk actions checkbox for multi-select operations

4. Asset Detail Page:
- Header: Asset name, type badge, status indicator (online/offline dot)
- Tabbed interface: Overview, Specifications, Relationships, Problem History, Activity Log
- Overview tab: Key-value pairs in card layout (IP, OS, CPU, Memory, etc.)
- Relationships section: Visual graph showing connected assets with link labels
- Problem history: Accordion list of past issues with timestamps and resolution status

5. Problem/Solution Knowledge Base Page:
- Split view: Problem list on left (filterable by asset, severity, status), detail panel on right
- Each problem card: Title, affected asset tags, severity badge, timestamp, solved/unsolved indicator
- Detail panel: Problem description, affected assets list, solution steps (rich text with code blocks support), attachments section
- "Add New Problem" button with modal form

6. Relationship Map Page:
- Full-screen interactive network diagram showing asset dependencies
- Node types: Servers, VMs, Network devices, Services (color-coded)
- Zoom and pan controls
- Filter panel: Show/hide by asset type, location, or service
- Click node to view quick info tooltip, double-click to navigate to asset detail

7. Settings Page:
- Vertical tab navigation: Profile, Security, Notifications, Integrations, API Keys
- Form layouts with clear labels, input validation feedback
- Save/Cancel buttons with confirmation toasts

UI COMPONENTS TO INCLUDE:
- Reusable button variants (primary, secondary, danger, ghost)
- Input fields with floating labels or placeholder text, validation states
- Toast notifications for success/error feedback (top-right corner)
- Modal dialogs for confirmations and forms
- Dropdown menus with search capability
- Badge components for status indicators
- Loading skeletons for async content
- Empty states with illustrations and CTAs
- Breadcrumb navigation for deep pages

TECHNICAL SPECIFICATIONS:
- Framework: [React with TypeScript / Vue.js / Next.js - specify your preference]
- Styling: Tailwind CSS or styled-components
- Icons: Heroicons, Lucide Icons, or Font Awesome
- Charts/Graphs: Recharts or Chart.js for dashboards, Cytoscape.js or D3.js for network topology
- State management: Context API or Zustand for auth and global state
- Routing: React Router or Next.js built-in routing
- Form handling: React Hook Form with Zod validation
- API integration: Axios with mock endpoints (provide sample JSON structure)

ANIMATIONS & INTERACTIONS:
- Smooth page transitions (fade-in on mount)
- Hover effects on interactive elements (scale, color shift)
- Loading spinners during data fetches
- Success checkmark animations after form submissions
- Smooth expand/collapse for accordions and dropdowns

ACCESSIBILITY:
- Semantic HTML5 elements
- ARIA labels for screen readers
- Keyboard navigation support (tab order, focus indicators)
- Skip-to-content link
- Color contrast ratio ≥ 4.5:1

DO:
- Use consistent spacing (4px, 8px, 16px, 24px, 32px scale)
- Implement proper error boundaries
- Add proper TypeScript types for props
- Include helpful loading and error states
- Make forms accessible with proper labels

DON'T:
- Hardcode data - use mock API calls or props
- Mix design patterns - stay consistent
- Ignore mobile breakpoints
- Overcomplicate navigation structure
- Use low-contrast colors

OUTPUT FORMAT:
Provide complete, production-ready component code with:
- Organized folder structure (components/, pages/, utils/, styles/)
- Reusable component library
- README with setup instructions
- Responsive at all breakpoints
- Commented code for complex logic

README.md

@@ -1,10 +1,13 @@
 ---
-title: Mapit Infrastructure Intelligence Hub
-emoji: 😻
-colorFrom: blue
-colorTo: indigo
+title: MapIT - Infrastructure Intelligence Hub 🗺️💻
+colorFrom: purple
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

package.json

@@ -0,0 +1,36 @@
+json
+{
+  "name": "mapit-infrastructure-docs",
+  "version": "1.0.0",
+  "description": "IT infrastructure documentation and troubleshooting knowledge management platform",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1",
+    "lucide-react": "^0.294.0",
+    "axios": "^1.6.2",
+    "react-hook-form": "^7.48.2",
+    "zod": "^3.22.4",
+    "recharts": "^2.8.0",
+    "cytoscape": "^3.26.0",
+    "react-cytoscapejs": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
+
+</html>

src/App.tsx

@@ -0,0 +1,38 @@
+typescript
+import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import { AuthProvider } from './contexts/AuthContext'
+import { ToastProvider } from './contexts/ToastContext'
+import ProtectedRoute from './components/ProtectedRoute'
+import Layout from './components/Layout'
+import Login from './pages/Login'
+import Dashboard from './pages/Dashboard'
+import AssetInventory from './pages/AssetInventory'
+import AssetDetail from './pages/AssetDetail'
+import KnowledgeBase from './pages/KnowledgeBase'
+import RelationshipMap from './pages/RelationshipMap'
+import Settings from './pages/Settings'
+
+function App() {
+  return (
+    <ToastProvider>
+      <AuthProvider>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>
+            <Route index element={<Dashboard />} />
+            <Route path="assets" element={<AssetInventory />} />
+            <Route path="assets/:id" element={<AssetDetail />} />
+            <Route path="knowledge" element={<KnowledgeBase />} />
+            <Route path="map" element={<RelationshipMap />} />
+            <Route path="settings" element={<Settings />} />
+          </Route>
+        </Routes>
+      </AuthProvider>
+    </ToastProvider>
+  )
+}
+
+export default App
+
+</html>

src/components/ActivityTimeline.tsx

@@ -0,0 +1,121 @@
+typescript
+import React from 'react'
+import { CheckCircle, AlertTriangle, Info } from 'lucide-react'
+
+interface ActivityItem {
+  id: string
+  type: 'success' | 'warning' | 'info'
+  title: string
+  description: string
+  timestamp: string
+  asset?: string
+}
+
+const ActivityTimeline: React.FC = () => {
+  const activities: ActivityItem[] = [
+    {
+      id: '1',
+      type: 'success',
+      title: 'Database server restored',
+      description: 'Backup restoration completed successfully',
+      timestamp: '2 hours ago',
+      asset: 'db-prod-01'
+    },
+    {
+      id: '2',
+      type: 'warning',
+      title: 'High memory usage detected',
+      description: 'Web server memory usage above 90% threshold',
+      timestamp: '4 hours ago',
+      asset: 'web-staging-02'
+    },
+    {
+      id: '3',
+      type: 'info',
+      title: 'New asset added',
+      description: 'Added new load balancer to inventory',
+      timestamp: '6 hours ago'
+    },
+    {
+      id: '4',
+      type: 'success',
+      title: 'Network switch configured',
+      description: 'VLAN configuration updated successfully',
+      timestamp: '1 day ago',
+      asset: 'switch-dc-03'
+    }
+  ]
+
+  const getActivityIcon = (type: string) => {
+    switch (type) {
+      case 'success':
+        return <CheckCircle className="h-4 w-4 text-accent-500" />
+      case 'warning':
+        return <AlertTriangle className="h-4 w-4 text-alert-500" />
+      case 'info':
+        return <Info className="h-4 w-4 text-primary-500" />
+      default:
+        return <Info className="h-4 w-4 text-primary-500" />
+    }
+  }
+
+  const getActivityColor = (type: string) => {
+    switch (type) {
+      case 'success':
+        return 'border-accent-200'
+      case 'warning':
+        return 'border-alert-200'
+      case 'info':
+        return 'border-primary-200'
+      default:
+        return 'border-gray-200'
+    }
+  }
+
+  return (
+    <div className="flow-root">
+      <ul className="-mb-8">
+        {activities.map((activity, activityIdx) => (
+          <li key={activity.id}>
+            <div className="relative pb-8">
+              {activityIdx !== activities.length - 1 && (
+                <span
+                  className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+                  aria-hidden="true"
+                />
+              )}
+              <div className="relative flex space-x-3">
+                <div>
+                  <span className={`
+                    h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white
+                    ${getActivityColor(activity.type)}
+                  `}>
+                    {getActivityIcon(activity.type)}
+                  </span>
+                </div>
+                <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                  <div>
+                    <p className="text-sm text-gray-900">{activity.title}</p>
+                    <p className="text-sm text-gray-500">{activity.description}</p>
+                    {activity.asset && (
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                    {activity.asset}
+                  </span>
+                    )}
+                  </div>
+                  <div className="text-right text-sm whitespace-nowrap text-gray-500">
+                    {activity.timestamp}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default ActivityTimeline
+
+</html>

src/components/KPICard.tsx

@@ -0,0 +1,42 @@
+typescript
+import React from 'react'
+import { LucideIcon } from 'lucide-react'
+
+interface KPICardProps {
+  title: string
+  value: string
+  change: string
+  trend: 'up' | 'down'
+  icon: LucideIcon
+}
+
+const KPICard: React.FC<KPICardProps> = ({ title, value, change, trend, icon: Icon }) => {
+  return (
+    <div className="card p-6 hover:shadow-md transition-shadow duration-200">
+      <div className="flex items-center">
+        <div className="flex-shrink-0">
+          <div className="h-12 w-12 bg-primary-100 rounded-full flex items-center justify-center">
+            <Icon className="h-6 w-6 text-primary-600" />
+          </div>
+        </div>
+        
+        <div className="ml-4">
+          <p className="text-sm font-medium text-gray-600">{title}</p>
+          <p className="text-2xl font-bold text-gray-900">{value}</p>
+          <div className={`flex items-center text-sm ${trend === 'up' ? 'text-accent-600' : 'text-red-600'}`}>
+            {trend === 'up' ? (
+              <TrendingUp className="h-4 w-4 mr-1" />
+            ) : (
+              <TrendingDown className="h-4 w-4 mr-1" />
+            )}
+            <span>{change} from last week</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default KPICard
+
+</html>

src/components/Layout.tsx

@@ -0,0 +1,30 @@
+typescript
+import React, { useState } from 'react'
+import { Outlet } from 'react-router-dom'
+import Sidebar from './Sidebar'
+import TopNav from './TopNav'
+import ToastContainer from './ToastContainer'
+
+const Layout: React.FC = () => {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  return (
+    <div className="flex h-screen bg-gray-50">
+      <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+      
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <TopNav onMenuClick={() => setSidebarOpen(true)} />
+        
+        <main className="flex-1 overflow-y-auto p-4 md:p-6">
+          <Outlet />
+        </main>
+      </div>
+      
+      <ToastContainer />
+    </div>
+  )
+}
+
+export default Layout
+
+</html>

src/components/ProtectedRoute.tsx

@@ -0,0 +1,30 @@
+typescript
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+
+interface ProtectedRouteProps {
+  children: React.ReactNode
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const { user, isLoading } = useAuth()
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />
+  }
+
+  return <>{children}</>
+}
+
+export default ProtectedRoute
+
+</html>

src/components/Sidebar.tsx

@@ -0,0 +1,94 @@
+typescript
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { 
+  LayoutDashboard, 
+  Server, 
+  BookOpen, 
+  Network, 
+  Settings,
+  X
+} from 'lucide-react'
+
+interface SidebarProps {
+  open: boolean
+  onClose: () => void
+}
+
+const navigation = [
+  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Asset Inventory', href: '/assets', icon: Server },
+  { name: 'Knowledge Base', href: '/knowledge', icon: BookOpen },
+  { name: 'Relationship Map', href: '/map', icon: Network },
+  { name: 'Settings', href: '/settings', icon: Settings },
+]
+
+const Sidebar: React.FC<SidebarProps> = ({ open, onClose }) => {
+  const location = useLocation()
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      {open && (
+        <div 
+          className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+      
+      {/* Sidebar */}
+      <div className={`
+        fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0
+        ${open ? 'translate-x-0' : '-translate-x-full'}
+      `}>
+        <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
+          <div className="flex items-center">
+            <div className="flex-shrink-0">
+              <div className="h-8 w-8 bg-primary-600 rounded-button flex items-center justify-center">
+                <span className="text-white font-bold text-sm">MI</span>
+              </div>
+              <span className="ml-3 text-lg font-semibold text-gray-900">MapIT</span>
+            </div>
+          </div>
+          
+          <button
+            onClick={onClose}
+            className="lg:hidden p-2 rounded-button text-gray-400 hover:text-gray-500 hover:bg-gray-100"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        
+        <nav className="mt-8 px-4 space-y-2">
+          {navigation.map((item) => {
+            const isActive = location.pathname === item.href
+            return (
+              <Link
+                key={item.name}
+                to={item.href}
+                className={`
+                  group flex items-center px-3 py-2 text-sm font-medium rounded-button transition-colors duration-200
+                  ${isActive 
+                    ? 'bg-primary-50 text-primary-700 border border-primary-200' 
+                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                  }
+                `}
+                onClick={() => window.innerWidth < 1024 && onClose()}
+              >
+                <item.icon className={`
+                  mr-3 h-5 w-5 flex-shrink-0
+                  ${isActive ? 'text-primary-500' : 'text-gray-400 group-hover:text-gray-500'}
+                `} />
+                {item.name}
+              </Link>
+            )
+          })}
+        </nav>
+      </div>
+    </>
+  )
+}
+
+export default Sidebar
+
+</html>

src/components/ToastContainer.tsx

@@ -0,0 +1,77 @@
+typescript
+import React from 'react'
+import { useToast } from '../contexts/ToastContext'
+import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-react'
+
+const ToastContainer: React.FC = () => {
+  const { toasts, removeToast } = useToast()
+
+  const getToastIcon = (type: string) => {
+    switch (type) {
+      case 'success':
+        return <CheckCircle className="h-5 w-5 text-accent-500" />
+      case 'error':
+        return <XCircle className="h-5 w-5 text-red-500" />
+      case 'warning':
+        return <AlertTriangle className="h-5 w-5 text-alert-500" />
+      case 'info':
+        return <Info className="h-5 w-5 text-primary-500" />
+      default:
+        return <Info className="h-5 w-5 text-primary-500" />
+    }
+  }
+
+  const getToastStyles = (type: string) => {
+    switch (type) {
+      case 'success':
+        return 'bg-accent-50 border-accent-200'
+      case 'error':
+        return 'bg-red-50 border-red-200'
+      case 'warning':
+        return 'bg-alert-50 border-alert-200'
+      case 'info':
+        return 'bg-primary-50 border-primary-200'
+      default:
+        return 'bg-gray-50 border-gray-200'
+    }
+  }
+
+  return (
+    <div className="fixed top-4 right-4 z-50 space-y-3 max-w-sm">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`
+            card p-4 transform transition-all duration-300 ease-in-out
+            ${getToastStyles(toast.type)}
+          `}
+        >
+          <div className="flex items-start">
+            <div className="flex-shrink-0">
+              {getToastIcon(toast.type)}
+            </div>
+            <div className="ml-3 flex-1">
+              <p className="text-sm font-medium text-gray-900">
+                {toast.title}
+              </p>
+              {toast.message && (
+                <p className="mt-1 text-sm text-gray-500">
+                {toast.message}
+              </p>
+            </div>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="ml-4 flex-shrink-0 p-1 rounded-button text-gray-400 hover:text-gray-500 hover:bg-gray-100"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ToastContainer
+
+</html>

src/components/TopNav.tsx

@@ -0,0 +1,78 @@
+typescript
+import React, { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { Search, Bell, Menu, User, LogOut } from 'lucide-react'
+
+interface TopNavProps {
+  onMenuClick: () => void
+}
+
+const TopNav: React.FC<TopNavProps> = ({ onMenuClick }) => {
+  const { user, logout } = useAuth()
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+
+  return (
+    <header className="bg-white shadow-sm border-b border-gray-200 z-30">
+      <div className="flex items-center justify-between h-16 px-4 md:px-6">
+        <div className="flex items-center">
+          <button
+            onClick={onMenuClick}
+            className="lg:hidden p-2 rounded-button text-gray-400 hover:text-gray-500 hover:bg-gray-100"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+          
+          <div className="hidden md:block ml-4">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Search className="h-4 w-4 text-gray-400" />
+              </div>
+              <input
+                type="text"
+                placeholder="Search assets, problems..."
+                className="input-field pl-10 pr-4 w-80"
+              />
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex items-center space-x-4">
+          <button className="relative p-2 rounded-button text-gray-400 hover:text-gray-500 hover:bg-gray-100">
+            <Bell className="h-5 w-5" />
+            <span className="absolute top-1 right-1 h-2 w-2 bg-alert-500 rounded-full"></span>
+          </button>
+          
+          <div className="relative">
+            <button
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              className="flex items-center space-x-3 p-2 rounded-button hover:bg-gray-100"
+            >
+              <div className="h-8 w-8 bg-primary-100 rounded-full flex items-center justify-center">
+                <User className="h-4 w-4 text-primary-600" />
+              </div>
+              <span className="hidden md:block text-sm font-medium text-gray-700">
+                {user?.name}
+              </span>
+            </button>
+            
+            {isDropdownOpen && (
+              <div className="absolute right-0 mt-2 w-48 bg-white rounded-card shadow-lg border border-gray-200 py-1">
+                  <button
+                    onClick={logout}
+                    className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                  >
+                    <LogOut className="mr-3 h-4 w-4" />
+                    Sign out
+                  </button>
+                </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default TopNav
+
+</html>

src/contexts/AuthContext.tsx

@@ -0,0 +1,87 @@
+typescript
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+
+interface User {
+  id: string
+  name: string
+  email: string
+  role: string
+  avatar?: string
+}
+
+interface AuthContextType {
+  user: User | null
+  login: (email: string, password: string) => Promise<void>
+  logout: () => void
+  isLoading: boolean
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export const useAuth = () => {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+
+interface AuthProviderProps {
+  children: ReactNode
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // Check for stored auth token on app load
+    const token = localStorage.getItem('auth_token')
+    if (token) {
+      // Mock user data - in real app, verify token with backend
+      setUser({
+        id: '1',
+        name: 'John Doe',
+        email: 'john.doe@company.com',
+        role: 'admin'
+      })
+    }
+    setIsLoading(false)
+  }, [])
+
+  const login = async (email: string, password: string): Promise<void> => {
+    setIsLoading(true)
+    try {
+      // Mock API call
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      
+      if (email === 'admin@mapit.com' && password === 'password') {
+        const userData: User = {
+          id: '1',
+          name: 'John Doe',
+          email: email,
+          role: 'admin'
+        }
+        setUser(userData)
+        localStorage.setItem('auth_token', 'mock_jwt_token')
+      } else {
+        throw new Error('Invalid credentials')
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const logout = () => {
+    setUser(null)
+    localStorage.removeItem('auth_token')
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, isLoading }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+</html>

src/contexts/ToastContext.tsx

@@ -0,0 +1,57 @@
+typescript
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+interface Toast {
+  id: string
+  type: ToastType
+  title: string
+  message?: string
+}
+
+interface ToastContextType {
+  toasts: Toast[]
+  addToast: (toast: Omit<Toast, 'id'>) => void
+  removeToast: (id: string) => void
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined)
+
+export const useToast = () => {
+  const context = useContext(ToastContext)
+  if (context === undefined) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+  return context
+}
+
+interface ToastProviderProps {
+  children: ReactNode
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const addToast = (toast: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).substr(2, 9)
+    setToasts(prev => [...prev, { ...toast, id }])
+    
+    // Auto remove after 5 seconds
+    setTimeout(() => {
+      removeToast(id)
+    }, 5000)
+  }
+
+  const removeToast = (id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id))
+  }
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+    </ToastContext.Provider>
+  )
+}
+
+</html>

src/index.css

@@ -0,0 +1,106 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+  
+  body {
+    @apply bg-gray-50 text-gray-900 antialiased;
+  }
+  
+  h1 {
+    @apply text-3xl font-bold;
+  }
+  
+  h2 {
+    @apply text-2xl font-semibold;
+  }
+  
+  p {
+    @apply text-base;
+  }
+  
+  small {
+    @apply text-sm;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-button font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
+  }
+  
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
+  }
+  
+  .btn-secondary {
+    @apply btn bg-secondary-200 text-secondary-800 hover:bg-secondary-300 focus:ring-secondary-500;
+  }
+  
+  .btn-danger {
+    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+  }
+  
+  .btn-ghost {
+    @apply btn text-secondary-600 hover:text-secondary-800 hover:bg-secondary-100 focus:ring-secondary-500;
+  }
+  
+  .input-field {
+    @apply block w-full px-3 py-2 border border-gray-300 rounded-button placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500;
+  }
+  
+  .card {
+    @apply bg-white rounded-card shadow-sm border border-gray-200;
+  }
+  
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+  
+  .badge-success {
+    @apply badge bg-accent-100 text-accent-800;
+  }
+  
+  .badge-warning {
+    @apply badge bg-alert-100 text-alert-800;
+  }
+  
+  .badge-error {
+    @apply badge bg-red-100 text-red-800;
+  }
+  
+  .badge-info {
+    @apply badge bg-blue-100 text-blue-800;
+  }
+}
+
+/* Smooth page transitions */
+.page-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 300ms, transform 300ms;
+}
+
+/* Loading skeleton animation */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.skeleton {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}

src/main.tsx

@@ -0,0 +1,16 @@
+typescript
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)
+
+</html>

src/pages/Dashboard.tsx

@@ -0,0 +1,105 @@
+typescript
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { TrendingUp, TrendingDown, Plus, AlertTriangle } from 'lucide-react'
+import KPICard from '../components/KPICard'
+import ActivityTimeline from '../components/ActivityTimeline'
+
+const Dashboard: React.FC = () => {
+  const mockKPIs = [
+    {
+      title: 'Total Assets',
+      value: '247',
+      change: '+12',
+      trend: 'up',
+      icon: Server
+    },
+    {
+      title: 'Active Servers',
+      value: '89',
+      change: '+3',
+      trend: 'up',
+      icon: TrendingUp
+    },
+    {
+      title: 'Open Problems',
+      value: '14',
+      change: '-2',
+      trend: 'down',
+      icon: TrendingDown
+    },
+    {
+      title: 'Resolved This Month',
+      value: '42',
+      change: '+8',
+      trend: 'up',
+      icon: CheckCircle
+    }
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+          <p className="mt-1 text-sm text-gray-600">
+            Overview of your IT infrastructure and recent activity
+          </p>
+        </div>
+        
+        <div className="mt-4 sm:mt-0 flex space-x-3">
+          <Link to="/assets/new" className="btn-primary">
+            <Plus className="h-4 w-4 mr-2" />
+            Add Asset
+          </Link>
+          <Link to="/knowledge/new" className="btn-secondary">
+            <AlertTriangle className="h-4 w-4 mr-2" />
+            Log Problem
+          </Link>
+        </div>
+      </div>
+
+      {/* KPI Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {mockKPIs.map((kpi, index) => (
+              <KPICard key={index} {...kpi} />
+            ))}
+          </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Infrastructure Visualization */}
+        <div className="lg:col-span-2 card p-6">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">
+            Infrastructure Topology
+          </h2>
+          <div className="h-80 bg-gray-50 rounded-card border-2 border-dashed border-gray-300 flex items-center justify-center">
+            <div className="text-center">
+              <Network className="mx-auto h-12 w-12 text-gray-400" />
+              <p className="mt-2 text-sm text-gray-500">
+                Interactive network graph visualization
+              </p>
+              <Link to="/map" className="mt-3 btn-primary">
+                View Full Map
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* Recent Activity */}
+        <div className="card p-6">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">
+              Recent Activity
+            </h2>
+            <ActivityTimeline />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard
+
+</html>

src/pages/Login.tsx

@@ -0,0 +1,169 @@
+typescript
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import { useToast } from '../contexts/ToastContext'
+import { Server, Mail, Lock, Loader } from 'lucide-react'
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [rememberMe, setRememberMe] = useState(false)
+  const { login, isLoading } = useAuth()
+  const { addToast } = useToast()
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      await login(email, password)
+      addToast({
+        type: 'success',
+        title: 'Welcome back!',
+        message: 'Successfully logged in.'
+      })
+      navigate('/')
+    } catch (error) {
+      addToast({
+        type: 'error',
+        title: 'Login failed',
+        message: 'Invalid email or password.'
+      })
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-white to-accent-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        {/* Logo */}
+        <div className="text-center">
+          <div className="mx-auto h-16 w-16 bg-primary-600 rounded-card flex items-center justify-center">
+            <Server className="h-8 w-8 text-white" />
+          </div>
+          <h2 className="mt-6 text-3xl font-bold text-gray-900">MapIT</h2>
+          <p className="mt-2 text-sm text-gray-600">
+            IT Infrastructure Documentation Platform
+          </p>
+        </div>
+
+        {/* Login Form */}
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="card p-6 shadow-xl">
+            <div className="space-y-4">
+              {/* Email Field */}
+              <div>
+                <label htmlFor="email" className="sr-only">
+                  Email address
+                </label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="input-field pl-10"
+                  placeholder="Email address"
+                />
+              </div>
+            </div>
+
+            {/* Password Field */}
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400" />
+              </div>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="input-field pl-10"
+                placeholder="Password"
+              />
+            </div>
+          </div>
+
+          {/* Remember Me & Forgot Password */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              <input
+                id="remember-me"
+                name="remember-me"
+                type="checkbox"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
+              />
+              <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
+                Remember me
+              </label>
+            </div>
+
+            <div className="text-sm">
+              <a href="#" className="font-medium text-primary-600 hover:text-primary-500">
+                Forgot your password?
+              </a>
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="group relative w-full flex justify-center py-3 px-4 btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoading ? (
+              <>
+                <Loader className="animate-spin -ml-1 mr-3 h-5 w-5" />
+                Signing in...
+              </>
+            ) : (
+              'Sign in to your account'
+            )}
+          </button>
+
+          {/* Divider */}
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-300"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-white text-gray-500">Or continue with</span>
+            </div>
+          </div>
+
+          {/* SSO Options */}
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              type="button"
+              className="w-full inline-flex justify-center py-2 px-4 btn-secondary">
+              Google
+            </button>
+            <button
+              type="button"
+              className="w-full inline-flex justify-center py-2 px-4 btn-secondary">
+              Microsoft
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default Login
+
+</html>

tailwind.config.js

@@ -0,0 +1,73 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        secondary: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+        accent: {
+          50: '#ecfdf5',
+          100: '#d1fae5',
+          200: '#a7f3d0',
+          300: '#6ee7b7',
+          400: '#34d399',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+          800: '#065f46',
+          900: '#064e3b',
+        },
+        alert: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      borderRadius: {
+        'card': '8px',
+        'button': '6px',
+      },
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+      }
+    },
+  },
+  plugins: [],
+}