<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dispatch Board - ServiceTitan MCP</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f7fafc;
      padding: 2rem;
    }
    .dashboard { max-width: 1600px; margin: 0 auto; }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }
    h1 { color: #2d3748; font-size: 2rem; }
    .back-link {
      color: #667eea;
      text-decoration: none;
      font-weight: 600;
    }
    .controls {
      background: white;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 1.5rem;
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    .date-selector {
      padding: 0.5rem 1rem;
      border: 1px solid #cbd5e0;
      border-radius: 6px;
      font-size: 0.875rem;
    }
    .board {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.5rem;
    }
    .tech-column {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .tech-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 1rem;
      font-weight: 600;
    }
    .tech-info {
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
      margin-top: 0.25rem;
      opacity: 0.9;
    }
    .appointments {
      padding: 1rem;
      min-height: 400px;
    }
    .appointment {
      background: #f7fafc;
      border-left: 4px solid #667eea;
      padding: 1rem;
      margin-bottom: 0.75rem;
      border-radius: 4px;
      cursor: move;
    }
    .appointment:hover {
      background: #edf2f7;
    }
    .apt-time {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 0.5rem;
    }
    .apt-customer {
      color: #4a5568;
      margin-bottom: 0.25rem;
    }
    .apt-address {
      font-size: 0.875rem;
      color: #718096;
    }
    .apt-type {
      display: inline-block;
      background: #e6fffa;
      color: #047857;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      margin-top: 0.5rem;
    }
    .unassigned {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 1.5rem;
    }
    .unassigned h3 {
      color: #2d3748;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  
  <script type="text/babel">
    const { useState } = React;
    
    function DispatchBoard() {
      const [selectedDate, setSelectedDate] = useState('2024-02-15');
      
      const technicians = [
        {
          id: 1,
          name: 'Mike Johnson',
          zone: 'North',
          appointments: [
            { id: 1, time: '8:00 AM - 10:00 AM', customer: 'John Smith', address: '123 Main St', type: 'HVAC Repair' },
            { id: 2, time: '10:30 AM - 12:00 PM', customer: 'Sarah Davis', address: '456 Oak Ave', type: 'Maintenance' },
            { id: 3, time: '1:00 PM - 3:00 PM', customer: 'Bob Wilson', address: '789 Pine Dr', type: 'Installation' },
          ]
        },
        {
          id: 2,
          name: 'Sarah Thompson',
          zone: 'South',
          appointments: [
            { id: 4, time: '9:00 AM - 11:00 AM', customer: 'Emily Brown', address: '321 Elm St', type: 'Inspection' },
            { id: 5, time: '2:00 PM - 4:00 PM', customer: 'Tom Anderson', address: '654 Maple Ln', type: 'Emergency' },
          ]
        },
        {
          id: 3,
          name: 'David Martinez',
          zone: 'East',
          appointments: [
            { id: 6, time: '8:30 AM - 10:30 AM', customer: 'Lisa White', address: '987 Cedar Rd', type: 'Repair' },
            { id: 7, time: '11:00 AM - 1:00 PM', customer: 'James Taylor', address: '147 Birch Ct', type: 'Maintenance' },
            { id: 8, time: '2:30 PM - 4:30 PM', customer: 'Maria Garcia', address: '258 Spruce Way', type: 'Installation' },
          ]
        },
      ];
      
      const unassignedJobs = [
        { id: 9, time: 'ASAP', customer: 'Emergency Call', address: '369 Quick St', type: 'Emergency' },
        { id: 10, time: 'Flexible', customer: 'New Customer', address: '741 New Ave', type: 'Consultation' },
      ];
      
      return (
        <div className="dashboard">
          <div className="header">
            <h1>🗓️ Dispatch Board</h1>
            <a href="index.html" className="back-link">← Back to Apps</a>
          </div>
          
          <div className="controls">
            <label htmlFor="date-select">Select Date:</label>
            <input 
              type="date" 
              id="date-select"
              className="date-selector"
              value={selectedDate}
              onChange={(e) => setSelectedDate(e.target.value)}
            />
            <div style={{ marginLeft: 'auto' }}>
              Total Appointments: <strong>{technicians.reduce((acc, tech) => acc + tech.appointments.length, 0)}</strong>
            </div>
          </div>
          
          <div className="board">
            {technicians.map(tech => (
              <div key={tech.id} className="tech-column">
                <div className="tech-header">
                  <div>{tech.name}</div>
                  <div className="tech-info">
                    <span>{tech.zone} Zone</span>
                    <span>{tech.appointments.length} appointments</span>
                  </div>
                </div>
                <div className="appointments">
                  {tech.appointments.map(apt => (
                    <div key={apt.id} className="appointment">
                      <div className="apt-time">⏰ {apt.time}</div>
                      <div className="apt-customer">👤 {apt.customer}</div>
                      <div className="apt-address">📍 {apt.address}</div>
                      <span className="apt-type">{apt.type}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          
          <div className="unassigned" style={{ marginTop: '1.5rem' }}>
            <h3>🚨 Unassigned Jobs ({unassignedJobs.length})</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '1rem' }}>
              {unassignedJobs.map(job => (
                <div key={job.id} className="appointment" style={{ borderColor: '#f56565' }}>
                  <div className="apt-time">⏰ {job.time}</div>
                  <div className="apt-customer">👤 {job.customer}</div>
                  <div className="apt-address">📍 {job.address}</div>
                  <span className="apt-type" style={{ background: '#fed7d7', color: '#742a2a' }}>{job.type}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    }
    
    ReactDOM.render(<DispatchBoard />, document.getElementById('root'));
  </script>
</body>
</html>
