src/pages/Dashboard.tsx

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>