condition check gallery

frontend/src/pages/Renting.tsx

@@ -3,10 +3,11 @@ import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { rentalAPI, conditionCheckAPI } from "../services/api";
 import { getPublicImageUrl } from "../services/uploadService";
-import { Rental } from "../types";
+import { Rental, ConditionCheck } from "../types";
 import ReviewItemModal from "../components/ReviewModal";
 import RentalCancellationModal from "../components/RentalCancellationModal";
 import ConditionCheckModal from "../components/ConditionCheckModal";
+import ConditionCheckViewerModal from "../components/ConditionCheckViewerModal";
 
 const Renting: React.FC = () => {
   // Helper function to format time
@@ -53,7 +54,11 @@ const Renting: React.FC = () => {
     checkType: string;
   } | null>(null);
   const [availableChecks, setAvailableChecks] = useState<any[]>([]);
-  const [conditionChecks, setConditionChecks] = useState<any[]>([]);
+  const [conditionChecks, setConditionChecks] = useState<ConditionCheck[]>([]);
+  const [showConditionCheckViewer, setShowConditionCheckViewer] =
+    useState(false);
+  const [selectedConditionCheck, setSelectedConditionCheck] =
+    useState<ConditionCheck | null>(null);
 
   useEffect(() => {
     fetchRentals();
@@ -149,7 +154,11 @@ const Renting: React.FC = () => {
   const handleConditionCheckSuccess = () => {
     fetchAvailableChecks();
     fetchConditionChecks();
-    alert("Condition check submitted successfully!");
+  };
+
+  const handleViewConditionCheck = (check: ConditionCheck) => {
+    setSelectedConditionCheck(check);
+    setShowConditionCheckViewer(true);
   };
 
   const getAvailableChecksForRental = (rentalId: string) => {
@@ -231,14 +240,19 @@ const Renting: React.FC = () => {
                   className="card h-100"
                   style={{ cursor: rental.item ? "pointer" : "default" }}
                 >
-                  {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
-                    <img
-                      src={getPublicImageUrl(rental.item.imageFilenames[0])}
-                      className="card-img-top"
-                      alt={rental.item.name}
-                      style={{ height: "200px", objectFit: "contain", backgroundColor: "#f8f9fa" }}
-                    />
-                  )}
+                  {rental.item?.imageFilenames &&
+                    rental.item.imageFilenames[0] && (
+                      <img
+                        src={getPublicImageUrl(rental.item.imageFilenames[0])}
+                        className="card-img-top"
+                        alt={rental.item.name}
+                        style={{
+                          height: "200px",
+                          objectFit: "contain",
+                          backgroundColor: "#f8f9fa",
+                        }}
+                      />
+                    )}
                   <div className="card-body">
                     <h5 className="card-title text-dark">
                       {rental.item ? rental.item.name : "Item Unavailable"}
@@ -367,20 +381,20 @@ const Renting: React.FC = () => {
                         <div className="mb-2">
                           {getCompletedChecksForRental(rental.id).map(
                             (check) => (
-                              <div
+                              <button
                                 key={`${rental.id}-${check.checkType}-status`}
-                                className="text-success small"
+                                className="btn btn-link text-success small p-0 text-decoration-none d-block"
+                                onClick={() => handleViewConditionCheck(check)}
                               >
-                                <i className="bi bi-camera-fill me-1"></i>
                                 {check.checkType === "rental_start_renter"
-                                  ? "Start Check Completed"
-                                  : "End Check Completed"}
+                                  ? "Rental Start Condition Noted"
+                                  : "Rental End Condition Noted"}
                                 <small className="text-muted ms-2">
                                   {new Date(
                                     check.createdAt
                                   ).toLocaleDateString()}
                                 </small>
-                              </div>
+                              </button>
                             )
                           )}
                         </div>
@@ -397,8 +411,8 @@ const Renting: React.FC = () => {
                         >
                           <i className="bi bi-camera me-2" />
                           {check.checkType === "rental_start_renter"
-                            ? "Submit Start Check"
-                            : "Submit End Check"}
+                            ? "Submit Rental Start Condition"
+                            : "Submit Rental End Condition"}
                         </button>
                       ))}
 
@@ -472,6 +486,16 @@ const Renting: React.FC = () => {
           onSuccess={handleConditionCheckSuccess}
         />
       )}
+
+      {/* Condition Check Viewer Modal */}
+      <ConditionCheckViewerModal
+        show={showConditionCheckViewer}
+        onHide={() => {
+          setShowConditionCheckViewer(false);
+          setSelectedConditionCheck(null);
+        }}
+        conditionCheck={selectedConditionCheck}
+      />
     </div>
   );
 };