Changeset c44c5ed for my-react-app/src/components/ReservationHistory.js

Timestamp:

05/02/25 15:06:42 (2 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

142c0f8

Parents:

2518b3a

Message:

Fixed bugs and fully developed menu now. Readonly added.

File:

• my-react-app/src/components/ReservationHistory.js (modified) (12 diffs)

my-react-app/src/components/ReservationHistory.js

@@ -1 +1 @@
 import React, { useEffect, useState } from "react";
-import {jwtDecode} from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
 import axios from "axios";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';
 
 const ReservationHistory = () => {
     const [reservations, setReservations] = useState([]);
     const [filteredReservations, setFilteredReservations] = useState([]);
+    const [selectedReservation, setSelectedReservation] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -14 +17 @@
     const [statusFilter, setStatusFilter] = useState("");
     const [cancellationReasonFilter, setCancellationReasonFilter] = useState("");
-
     const [startDate, setStartDate] = useState("");
     const [endDate, setEndDate] = useState("");
@@ -113 +115 @@
     if (error) return <div className="alert alert-danger">{error}</div>;
 
+    const formatDateTime = (dateString) => {
+        if (!dateString) return "N/A";
+        const date = new Date(dateString);
+        return date.toLocaleString("en-GB", {
+            day: "2-digit",
+            month: "short",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    };
+
     return (
         <div className="container mt-5">
@@ -140 +154 @@
                         type="date"
                         className="form-control"
-                        placeholder="Start date"
                         value={startDate}
                         onChange={(e) => setStartDate(e.target.value)}
@@ -147 +160 @@
                         type="date"
                         className="form-control"
-                        placeholder="End date"
                         value={endDate}
                         onChange={(e) => setEndDate(e.target.value)}
@@ -156 +168 @@
                         type="number"
                         className="form-control"
-                        placeholder="Filter by Party Size"
+                        placeholder="Party Size"
                         value={partySizeFilter}
                         onChange={(e) => setPartySizeFilter(e.target.value)}
@@ -167 +179 @@
                         className="form-control"
                     >
-                        <option value="">Filter by status</option>
+                        <option value="">Filter by Status</option>
                         <option value="successful">Successful</option>
                         <option value="canceled">Canceled</option>
@@ -176 +188 @@
                         type="text"
                         className="form-control"
-                        placeholder="Filter by Cancellation Reason"
+                        placeholder="Cancellation Reason"
                         value={cancellationReasonFilter}
                         onChange={(e) => setCancellationReasonFilter(e.target.value)}
@@ -198 +210 @@
                         <th>Restaurant</th>
                         <th>Table</th>
-                        <th>Date & Time</th>
+                        <th>Check In Date</th>
+                        <th>Reserved on</th>
                         <th>Party Size</th>
                         <th>Special Requests</th>
@@ -208 +221 @@
                     {filteredReservations.length > 0 ? (
                         filteredReservations.map((res, index) => (
-                            <tr key={res.id}>
+                            <tr key={res.id} onClick={() => setSelectedReservation(res)} style={{ cursor: "pointer" }}>
                                 <td>{index + 1}</td>
                                 <td>{res.restaurant?.name || "N/A"}</td>
                                 <td>{res.table?.id || "N/A"}</td>
+                                <td>{formatDateTime(res.checkInDate)}</td>
                                 <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
                                 <td>{res.partySize}</td>
@@ -221 +235 @@
                     ) : (
                         <tr>
-                            <td colSpan="8" className="text-center">No reservations found.</td>
+                            <td colSpan="9" className="text-center">No reservations found.</td>
                         </tr>
                     )}
@@ -227 +241 @@
                 </table>
             </div>
+
+            {/* Modal for reservation details */}
+            {selectedReservation && (
+                <div className="modal fade show d-block" tabIndex="-1" style={{ backgroundColor: "rgba(0,0,0,0.5)" }} onClick={() => setSelectedReservation(null)}>
+                    <div className="modal-dialog modal-lg" onClick={(e) => e.stopPropagation()}>
+                        <div className="modal-content">
+                            <div className="modal-header">
+                                <h5 className="modal-title">Reservation Details</h5>
+                                <button type="button" className="btn-close" onClick={() => setSelectedReservation(null)}></button>
+                            </div>
+                            <div className="modal-body">
+                                <h6>🍽️ Restaurant Info</h6>
+                                <p><strong>Name:</strong> {selectedReservation.restaurant?.name}</p>
+                                <p><strong>Address:</strong> {selectedReservation.restaurant?.address}</p>
+                                <p><strong>Phone:</strong> {selectedReservation.restaurant?.phone}</p>
+                                <p><strong>Rating:</strong> {selectedReservation.restaurant?.rating} ⭐</p>
+                                <p><strong>Cuisine:</strong> {selectedReservation.restaurant?.cuisineType}</p>
+                                <p><strong>Hours:</strong> {selectedReservation.restaurant?.operatingHours}</p>
+                                {selectedReservation.restaurant?.website && (
+                                    <p><strong>Website:</strong> <a href={`https://${selectedReservation.restaurant.website}`} target="_blank" rel="noopener noreferrer">{selectedReservation.restaurant.website}</a></p>
+                                )}
+
+                                <hr />
+
+                                <h6>🪑 Table Info</h6>
+                                <p><strong>Location:</strong> {selectedReservation.table?.location}</p>
+                                <p><strong>Capacity:</strong> {selectedReservation.table?.capacity}</p>
+                                <p><strong>Smoking Area:</strong> {selectedReservation.table?.smokingArea ? "Yes" : "No"}</p>
+                                <p><strong>Description:</strong> {selectedReservation.table?.description}</p>
+                                <p><strong>Reservation Duration:</strong> {selectedReservation.table?.reservationDurationHours} hours</p>
+
+                                <hr />
+
+                                <h6>📋 Reservation Info</h6>
+                                <p><strong>Check-In Date:</strong> {formatDateTime(selectedReservation.checkInDate)}</p>
+                                <p><strong>Reserved on:</strong> {new Date(selectedReservation.reservationDateTime).toLocaleString()}</p>
+                                <p><strong>Party Size:</strong> {selectedReservation.partySize}</p>
+                                <p><strong>Special Requests:</strong> {selectedReservation.specialRequests || "None"}</p>
+                                <p><strong>Status:</strong> {selectedReservation.status}</p>
+                                <p><strong>Cancellation Reason:</strong> {selectedReservation.cancellationReason || "None"}</p>
+                            </div>
+                            <div className="modal-footer">
+                                <button className="btn btn-secondary" onClick={() => setSelectedReservation(null)}>Close</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );