gistfile1.txt

import { useEffect, useState } from "react";

interface Robot {
  id: string;
  name: string;
  state: "picking" | "idle" | "error";
  throughputUph: number; // units per hour
  lastSeen: number;
}

interface FleetFilters {
  state: Robot["state"] | "all";
}

const INITIAL_ROBOTS: Robot[] = [
  { id: "r1", name: "IF-01", state: "picking", throughputUph: 412, lastSeen: 0 },
  { id: "r2", name: "IF-02", state: "idle", throughputUph: 0, lastSeen: 0 },
  { id: "r3", name: "KAT-01", state: "error", throughputUph: 0, lastSeen: 0 },
  { id: "r4", name: "KAT-02", state: "picking", throughputUph: 388, lastSeen: 0 },
];

export default function App() {
  const [robots, setRobots] = useState(() =>
    INITIAL_ROBOTS.map((r) => ({ ...r, lastSeen: Date.now() })),
  );
  const [selectedId, setSelectedId] = useState("r1");
  const [filters, setFilters] = useState<FleetFilters>({ state: "all" });

  // fake telemetry stream: every robot reports once a second
  useEffect(() => {
    const timer = setInterval(() => {
      setRobots((rs) =>
        rs.map((r) => ({
          ...r,
          throughputUph:
            r.state === "picking"
              ? Math.max(0, r.throughputUph + Math.round(Math.random() * 40 - 20))
              : r.throughputUph,
          lastSeen: Date.now(),
        })),
      );
    }, 5000);
    return () => clearInterval(timer);
  }, []);

  const selectedRobot = robots.find((r) => r.id === selectedId)!;

  return (
    <FleetDashboard
      robots={robots}
      selectedRobot={selectedRobot}
      filters={filters}
      onSelectRobot={setSelectedId}
      onFiltersChange={setFilters}
    />
  );
}

interface FleetProps {
  robots: Robot[];
  selectedRobot: Robot;
  filters: FleetFilters;
  onSelectRobot: (id: string) => void;
  onFiltersChange: (filters: FleetFilters) => void;
}

function FleetDashboard({ robots, selectedRobot, filters, onSelectRobot, onFiltersChange }: FleetProps) {
  return (
    <main>
      <h1>Fleet overview — Warsaw DC</h1>
      <FleetPanel
        robots={robots}
        selectedRobot={selectedRobot}
        filters={filters}
        onSelectRobot={onSelectRobot}
        onFiltersChange={onFiltersChange}
      />
    </main>
  );
}

function FleetPanel({ robots, selectedRobot, filters, onSelectRobot, onFiltersChange }: FleetProps) {
  return (
    <section>
      <FilterBar filters={filters} onFiltersChange={onFiltersChange} />
      <RobotList
        robots={robots}
        filters={filters}
        selectedRobot={selectedRobot}
        onSelectRobot={onSelectRobot}
      />
    </section>
  );
}

function FilterBar({ filters, onFiltersChange }: Pick<FleetProps, "filters" | "onFiltersChange">) {
  return (
    <label>
      Show:{" "}
      <select
        value={filters.state}
        onChange={(e) => onFiltersChange({ ...filters, state: e.target.value as FleetFilters["state"] })}
      >
        <option value="all">all</option>
        <option value="picking">picking</option>
        <option value="idle">idle</option>
        <option value="error">error</option>
      </select>
    </label>
  );
}

function RobotList({
  robots,
  filters,
  selectedRobot,
  onSelectRobot,
}: Pick<FleetProps, "robots" | "filters" | "selectedRobot" | "onSelectRobot">) {
  const visibleRobots = robots.filter((r) => filters.state === "all" || r.state === filters.state);

  return (
    <table>
      <thead>
        <tr>
          <th>Robot</th>
          <th>State</th>
          <th>Throughput</th>
          <th>Last seen</th>
        </tr>
      </thead>
      <tbody>
        {visibleRobots.map((r) => (
          <RobotRow
            key={r.id}
            robot={r}
            isSelected={r.id === selectedRobot.id}
            onSelect={() => onSelectRobot(r.id)}
          />
        ))}
      </tbody>
    </table>
  );
}

function RobotRow({
  robot,
  isSelected,
  onSelect,
}: {
  robot: Robot;
  isSelected: boolean;
  onSelect: () => void;
}) {
  return (
    <tr onClick={onSelect} style={{ cursor: "pointer", fontWeight: isSelected ? "bold" : "normal" }}>
      <td>{robot.name}</td>
      <td>{robot.state}</td>
      <td>{robot.throughputUph} uph</td>
      <td>{robot.lastSeen ? new Date(robot.lastSeen).toLocaleTimeString() : "never"}</td>
    </tr>
  );
}