```javascript
import React from 'react';
import { Link } from 'react-router-dom';
import Sidebar from '../components/Sidebar';

const Dashboard = () => {
  return (
    <div className="flex h-screen overflow-hidden bg-gray-50">
      <Sidebar active="dashboard" />
      
      <div className="flex-1 overflow-auto">
        <Header title="Dashboard" />

        <main className="p-6">
          {/* Metrics */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {/* Metric cards */}
            <MetricCard 
              icon="box" 
              color="purple" 
              title="Total Apps" 
              value="42" 
            />
            <MetricCard 
              icon="globe" 
              color="blue" 
              title="Web Apps" 
              value="28" 
            />
            <MetricCard 
              icon="smartphone" 
              color="green" 
              title="USSD" 
              value="9" 
            />
            <MetricCard 
              icon="code" 
              color="yellow" 
              title="APIs" 
              value="5" 
            />
          </div>
          
          {/* Recent Activity */}
          <div className="bg-white rounded-lg shadow overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-200">
              <h2 className="text-lg font-semibold text-gray-800">Recent Activity</h2>
            </div>
            <ActivityItem 
              name="Sarah Johnson" 
              avatar="1" 
              action="Added new API integration" 
              time="10:30 AM" 
            />
            <ActivityItem 
              name="Mike Chen" 
              avatar="2" 
              action="Updated payment gateway app" 
              time="9:15 AM" 
            />
            <ActivityItem 
              name="Alex Taylor" 
              avatar="3" 
              action="Deployed new USSD service" 
              time="8:45 AM" 
            />
          </div>
        </main>
      </div>
    </div>
  );
};

const Header = ({ title }) => (
  <header className="bg-white shadow-sm">
    <div className="flex justify-between items-center px-6 py-4">
      <h1 className="text-2xl font-semibold text-gray-800">{title}</h1>
      <div className="flex items-center space-x-4">
        <button className="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
          <i data-feather="bell"></i>
        </button>
        <button className="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
          <i data-feather="help-circle"></i>
        </button>
      </div>
    </div>
  </header>
);

const MetricCard = ({ icon, color, title, value }) => (
  <div className="bg-white rounded-lg shadow p-6">
    <div className="flex items-center">
      <div className={`p-3 rounded-full bg-${color}-100 text-${color}-600`}>
        <i data-feather={icon} className="w-6 h-6"></i>
      </div>
      <div className="ml-4">
        <p className="text-sm font-medium text-gray-500">{title}</p>
        <p className="text-2xl font-semibold text-gray-800">{value}</p>
      </div>
    </div>
  </div>
);

const ActivityItem = ({ name, avatar, action, time }) => (
  <div className="p-6 flex items-start">
    <img 
      className="h-10 w-10 rounded-full" 
      src={`http://static.photos/people/200x200/${avatar}`} 
      alt="User avatar" 
    />
    <div className="ml-4">
      <p className="text-sm font-medium text-gray-800">{name}</p>
      <p className="text-sm text-gray-500">{action} at {time}</p>
    </div>
  </div>
);

export default Dashboard;
```