feat: Add basic styling

agent/uis/trip-planner/book-accommodation/index.tsx

@@ -1,4 +1,5 @@
 import { TripDetails } from "../../../trip-planner/types";
+import { useState } from "react";
 
 export default function BookAccommodation({
   tripDetails,
@@ -7,9 +8,395 @@ export default function BookAccommodation({
   tripDetails: TripDetails;
   accommodationName: string;
 }) {
+  // Placeholder data - ideally would come from props
+  const [accommodation] = useState({
+    name: accommodationName,
+    type: "Hotel",
+    price: "$150/night",
+    rating: 4.8,
+    totalPrice:
+      "$" +
+      150 *
+        Math.ceil(
+          (new Date(tripDetails.endDate).getTime() -
+            new Date(tripDetails.startDate).getTime()) /
+            (1000 * 60 * 60 * 24),
+        ),
+    image: "https://placehold.co/300x200?text=Accommodation",
+    roomTypes: ["Standard", "Deluxe", "Suite"],
+    checkInTime: "3:00 PM",
+    checkOutTime: "11:00 AM",
+  });
+
+  const [selectedRoom, setSelectedRoom] = useState("Standard");
+  const [bookingStep, setBookingStep] = useState<
+    "details" | "payment" | "confirmed"
+  >("details");
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    specialRequests: "",
+  });
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setBookingStep("payment");
+  };
+
+  const handlePayment = (e: React.FormEvent) => {
+    e.preventDefault();
+    setBookingStep("confirmed");
+  };
+
   return (
-    <div>
-      Book accommodation {accommodationName} for {JSON.stringify(tripDetails)}
+    <div className="w-full max-w-md bg-white rounded-lg shadow-md overflow-hidden">
+      <div className="bg-blue-600 px-4 py-3">
+        <h3 className="text-white font-medium">Book {accommodation.name}</h3>
+        <p className="text-blue-100 text-xs">
+          {new Date(tripDetails.startDate).toLocaleDateString()} -{" "}
+          {new Date(tripDetails.endDate).toLocaleDateString()} ·{" "}
+          {tripDetails.numberOfGuests} guests
+        </p>
+      </div>
+
+      <div className="p-4">
+        {bookingStep === "details" && (
+          <>
+            <div className="flex items-center space-x-3 mb-4">
+              <div className="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-md overflow-hidden">
+                <img
+                  src={accommodation.image}
+                  alt={accommodation.name}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div>
+                <h4 className="font-medium text-gray-900">
+                  {accommodation.name}
+                </h4>
+                <div className="flex items-center mt-1">
+                  <svg
+                    className="w-4 h-4 text-yellow-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <span className="text-xs text-gray-500 ml-1">
+                    {accommodation.rating}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between mt-1">
+                  <span className="text-sm text-gray-500">
+                    {accommodation.type}
+                  </span>
+                  <span className="text-sm font-semibold text-blue-600">
+                    {accommodation.price}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="border-t border-b py-3 mb-4">
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Check-in</span>
+                <span className="font-medium">
+                  {new Date(tripDetails.startDate).toLocaleDateString()} (
+                  {accommodation.checkInTime})
+                </span>
+              </div>
+              <div className="flex justify-between text-sm mt-2">
+                <span className="text-gray-600">Check-out</span>
+                <span className="font-medium">
+                  {new Date(tripDetails.endDate).toLocaleDateString()} (
+                  {accommodation.checkOutTime})
+                </span>
+              </div>
+              <div className="flex justify-between text-sm mt-2">
+                <span className="text-gray-600">Guests</span>
+                <span className="font-medium">
+                  {tripDetails.numberOfGuests}
+                </span>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Room Type
+              </label>
+              <div className="grid grid-cols-3 gap-2">
+                {accommodation.roomTypes.map((room) => (
+                  <button
+                    key={room}
+                    type="button"
+                    onClick={() => setSelectedRoom(room)}
+                    className={`text-sm py-2 px-3 rounded-md border transition-colors ${
+                      selectedRoom === room
+                        ? "border-blue-500 bg-blue-50 text-blue-700"
+                        : "border-gray-300 text-gray-700 hover:border-gray-400"
+                    }`}
+                  >
+                    {room}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-3">
+              <div>
+                <label
+                  htmlFor="name"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="phone"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Phone
+                </label>
+                <input
+                  type="tel"
+                  id="phone"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="specialRequests"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Special Requests
+                </label>
+                <textarea
+                  id="specialRequests"
+                  name="specialRequests"
+                  value={formData.specialRequests}
+                  onChange={handleInputChange}
+                  rows={2}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                />
+              </div>
+
+              <div className="border-t pt-3 mt-4">
+                <div className="flex justify-between items-center mb-3">
+                  <span className="text-gray-600 text-sm">Total Price:</span>
+                  <span className="font-semibold text-lg">
+                    {accommodation.totalPrice}
+                  </span>
+                </div>
+                <button
+                  type="submit"
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
+                >
+                  Continue to Payment
+                </button>
+              </div>
+            </form>
+          </>
+        )}
+
+        {bookingStep === "payment" && (
+          <form onSubmit={handlePayment} className="space-y-3">
+            <h4 className="font-medium text-lg text-gray-900 mb-3">
+              Payment Details
+            </h4>
+
+            <div>
+              <label
+                htmlFor="cardName"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Name on Card
+              </label>
+              <input
+                type="text"
+                id="cardName"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                required
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="cardNumber"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Card Number
+              </label>
+              <input
+                type="text"
+                id="cardNumber"
+                placeholder="XXXX XXXX XXXX XXXX"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                required
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label
+                  htmlFor="expiry"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Expiry Date
+                </label>
+                <input
+                  type="text"
+                  id="expiry"
+                  placeholder="MM/YY"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                  required
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="cvc"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  CVC
+                </label>
+                <input
+                  type="text"
+                  id="cvc"
+                  placeholder="XXX"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                  required
+                />
+              </div>
+            </div>
+
+            <div className="border-t pt-3 mt-4">
+              <div className="flex justify-between items-center mb-3">
+                <span className="text-gray-600 text-sm">Total Amount:</span>
+                <span className="font-semibold text-lg">
+                  {accommodation.totalPrice}
+                </span>
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
+              >
+                Complete Booking
+              </button>
+              <button
+                type="button"
+                onClick={() => setBookingStep("details")}
+                className="w-full mt-2 bg-white border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md hover:bg-gray-50 transition-colors"
+              >
+                Back
+              </button>
+            </div>
+          </form>
+        )}
+
+        {bookingStep === "confirmed" && (
+          <div className="text-center py-6">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-3">
+              <svg
+                className="h-6 w-6 text-green-600"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 13l4 4L19 7"
+                />
+              </svg>
+            </div>
+            <h3 className="text-lg font-medium text-gray-900">
+              Booking Confirmed!
+            </h3>
+            <div className="mt-2">
+              <p className="text-sm text-gray-500">
+                Your booking at {accommodation.name} has been confirmed. You'll
+                receive a confirmation email shortly at {formData.email}.
+              </p>
+            </div>
+            <div className="mt-4 p-3 bg-gray-50 rounded-lg text-left">
+              <h4 className="font-medium text-sm text-gray-700">
+                Booking Summary
+              </h4>
+              <ul className="mt-2 space-y-1 text-xs text-gray-600">
+                <li className="flex justify-between">
+                  <span>Check-in:</span>
+                  <span className="font-medium">
+                    {new Date(tripDetails.startDate).toLocaleDateString()}
+                  </span>
+                </li>
+                <li className="flex justify-between">
+                  <span>Check-out:</span>
+                  <span className="font-medium">
+                    {new Date(tripDetails.endDate).toLocaleDateString()}
+                  </span>
+                </li>
+                <li className="flex justify-between">
+                  <span>Room type:</span>
+                  <span className="font-medium">{selectedRoom}</span>
+                </li>
+                <li className="flex justify-between">
+                  <span>Guests:</span>
+                  <span className="font-medium">
+                    {tripDetails.numberOfGuests}
+                  </span>
+                </li>
+                <li className="flex justify-between pt-1 mt-1 border-t">
+                  <span>Total paid:</span>
+                  <span className="font-medium">
+                    {accommodation.totalPrice}
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }