📱 Dashboard Widgets

const KPICard = ({ title, value, change, changeType, icon: Icon }) => (
  <div className="kpi-card border shadow-sm bg-card p-4">
    <div className="kpi-header">
      <h4 className="kpi-title">{title}</h4>
      <Icon className="kpi-icon" />
    </div>
    <div className="kpi-value">{value}</div>
    <div className="kpi-change">
      {changeType === 'positive' ? <TrendingUp /> : <TrendingDown />}
      <span className={changeType === 'positive' ? 'positive' : 'negative'}>
        {change}
      </span>
    </div>
  </div>
)

const StatusIndicator = ({ title, services, overallStatus }) => (
  <div className="status-widget border shadow-sm bg-card p-4">
    <div className="status-header">
      <h4>{title}</h4>
      <div className="status-badge">
        <div className={`status-dot ${overallStatus}`} />
        <span>{overallStatus.toUpperCase()}</span>
      </div>
    </div>
    <div className="services-list">
      {services.map(service => (
        <div key={service.name} className="service-item">
          <span>{service.name}</span>
          {service.status === 'healthy' ? <CheckCircle /> : <AlertCircle />}
        </div>
      ))}
    </div>
  </div>
)

const MiniChart = ({ title, data, currentValue, timeframe }) => (
  <div className="mini-chart-widget border shadow-sm bg-card p-4">
    <div className="chart-header">
      <h4>{title}</h4>
      <span className="timeframe">{timeframe}</span>
    </div>
    <div className="sparkline">
      {data.map((value, index) => (
        <div 
          key={index}
          className="bar"
          style={{ height: `${(value / Math.max(...data)) * 100}%` }}
        />
      ))}
    </div>
    <div className="current-value">{currentValue}</div>
  </div>
)

const ProgressTracker = ({ title, current, target, deadline, percentage }) => (
  <div className="progress-widget border shadow-sm bg-card p-4">
    <div className="progress-header">
      <h4>{title}</h4>
      <span className="completion-rate">{percentage}% complete</span>
    </div>
    <div className="progress-bar-container">
      <div className="progress-bar" style={{ width: `${percentage}%` }} />
    </div>
    <div className="progress-details">
      <span>{`${current} of ${target}`}</span>
      <span className="deadline">{deadline}</span>
    </div>
  </div>
)

const ActivityFeed = ({ title, activities, maxItems = 5 }) => (
  <div className="activity-feed border shadow-sm bg-card p-4">
    <h4 className="feed-title">{title}</h4>
    <div className="activities-list">
      {activities.slice(0, maxItems).map(activity => (
        <div key={activity.id} className="activity-item">
          <div className={`activity-dot ${activity.type}`} />
          <div className="activity-content">
            <div className="activity-message">{activity.message}</div>
            <div className="activity-time">{activity.timestamp}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
)

const QuickActions = ({ title, actions }) => (
  <div className="quick-actions border shadow-sm bg-card p-4">
    <h4 className="actions-title">{title}</h4>
    <div className="actions-grid">
      {actions.map(action => (
        <button
          key={action.id}
          onClick={action.onClick}
          className={`action-button ${action.variant}`}
        >
          {action.icon && <action.icon />}
          {action.label}
        </button>
      ))}
    </div>
  </div>
)