```tsx import React from "react"; export default function App() { return (

H2O Distributors Dashboard

); } function Dashboard() { const [showOrderPopup, setShowOrderPopup] = React.useState(false); const [orders, setOrders] = React.useState([]); return (

Dashboard

{showOrderPopup && setShowOrderPopup(false)} onAddOrder={setOrders} />}

); } function OrderPopup({ onClose, onAddOrder }: { onClose: () => void; onAddOrder: React.Dispatch> }) { const [customerName, setCustomerName] = React.useState(""); const [orderDetails, setOrderDetails] = React.useState(""); const handleAddOrder = () => { onAddOrder(prev => [...prev, { customerName, orderDetails }]); onClose(); }; return (

New Order

setCustomerName(e.target.value)} className="border rounded w-full p-2 mb-4" />

setOrderDetails(e.target.value)} 
          className="border rounded w-full p-2 mb-4"
        />
        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={handleAddOrder}>
          Add Order
        </button>
        <button className="ml-2 px-4 py-2 rounded" onClick={onClose}>
          Cancel
        </button>
      </div>
    </div>
  );
}

function OrderHistory({ orders }: { orders: Order[] }) {
  return (
    <div className="mt-6">
      <h3 className="text-xl mb-2">Order History</h3>
      <ul className="border border-gray-300 rounded">
        {orders.map((order, index) => (
          <li key={index} className="p-2 border-b">
            <strong>{order.customerName}</strong>: {order.orderDetails}
          </li>
        ))}
      </ul>
    </div>
  );
}

function ProfitSummary({ orders }: { orders: Order[] }) {
  // Dummy profit calculation example
  const totalProfit = orders.length * 100; // Placeholder profit calculation

return (
    <div className="mt-6">
      <h3 className="text-xl mb-2">Profit Summary</h3>
      <p>Total Profit: ${totalProfit}</p>
    </div>
  );
}

interface Order {
  customerName: string;
  orderDetails: string;
}
```</article></body></html>