replaced vague notes with specific intended use, also fixed modal on top of modal for reviews

frontend/src/pages/Owning.tsx

@@ -359,6 +359,14 @@ const Owning: React.FC = () => {
                       <strong>Total:</strong> ${rental.totalAmount}
                     </p>
 
+                    {rental.intendedUse && rental.status === "pending" && (
+                      <div className="alert alert-light mt-2 mb-2 p-2 small">
+                        <strong>Intended Use:</strong>
+                        <br />
+                        {rental.intendedUse}
+                      </div>
+                    )}
+
                     {rental.status === "cancelled" &&
                       rental.refundAmount !== undefined && (
                         <div className="alert alert-info mt-2 mb-2 p-2 small">
@@ -620,9 +628,7 @@ const Owning: React.FC = () => {
                       onClick={() => toggleAvailability(item)}
                       className="btn btn-sm btn-outline-info"
                     >
-                      {item.isAvailable
-                        ? "Mark Unavailable"
-                        : "Mark Available"}
+                      {item.isAvailable ? "Mark Unavailable" : "Mark Available"}
                     </button>
                     <button
                       onClick={() => handleDelete(item.id)}

frontend/src/pages/RentItem.tsx

@@ -17,6 +17,7 @@ const RentItem: React.FC = () => {
   const [formData, setFormData] = useState({
     deliveryMethod: "pickup" as "pickup" | "delivery",
     deliveryAddress: "",
+    intendedUse: "",
   });
 
   const [manualSelection, setManualSelection] = useState({
@@ -143,6 +144,7 @@ const RentItem: React.FC = () => {
         endDateTime,
         deliveryMethod: formData.deliveryMethod,
         deliveryAddress: formData.deliveryAddress,
+        intendedUse: formData.intendedUse || undefined,
         totalAmount: totalCost,
       };
     } catch (error: any) {
@@ -261,6 +263,26 @@ const RentItem: React.FC = () => {
                       </p>
                     )}
 
+                    <div className="mb-3">
+                      <label htmlFor="intendedUse" className="form-label">
+                        What will you use this for?{" "}
+                        <span className="text-muted">(Optional)</span>
+                      </label>
+                      <textarea
+                        id="intendedUse"
+                        name="intendedUse"
+                        className="form-control"
+                        rows={3}
+                        value={formData.intendedUse}
+                        onChange={handleChange}
+                        placeholder="Let the owner know how you plan to use their item..."
+                        maxLength={500}
+                      />
+                      <div className="form-text">
+                        {formData.intendedUse.length}/500 characters
+                      </div>
+                    </div>
+
                     {!manualSelection.startDate ||
                     !manualSelection.endDate ||
                     !getRentalData() ? (