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

Timestamp:

04/28/25 14:20:18 (3 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

deea3c4

Parents:

8ca35dc

Message:

Big change done works with handle_reservation_update() trigger

File:

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

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

@@ -5 +5 @@
 const ReservationHistory = () => {
     const [reservations, setReservations] = useState([]);
+    const [filteredReservations, setFilteredReservations] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+
+    const [restaurantFilter, setRestaurantFilter] = useState("");
+    const [tableFilter, setTableFilter] = useState("");
+    const [partySizeFilter, setPartySizeFilter] = useState("");
+    const [statusFilter, setStatusFilter] = useState("");
+    const [cancellationReasonFilter, setCancellationReasonFilter] = useState("");
+
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
 
     useEffect(() => {
@@ -29 +39 @@
 
                 setReservations(response.data);
+                setFilteredReservations(response.data);
             } catch (err) {
                 setError("Failed to fetch reservations.");
@@ -39 +50 @@
     }, []);
 
+    useEffect(() => {
+        let tempReservations = reservations;
+
+        if (restaurantFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.restaurant?.name.toLowerCase().includes(restaurantFilter.toLowerCase())
+            );
+        }
+        if (tableFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.table?.id?.toString() === tableFilter
+            );
+        }
+        if (partySizeFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.partySize?.toString() === partySizeFilter
+            );
+        }
+        if (statusFilter) {
+            tempReservations = tempReservations.filter(res =>
+                res.status.toLowerCase().includes(statusFilter.toLowerCase())
+            );
+        }
+        if (cancellationReasonFilter) {
+            tempReservations = tempReservations.filter(res =>
+                (res.cancellationReason || "None").toLowerCase().includes(cancellationReasonFilter.toLowerCase())
+            );
+        }
+        if (startDate && endDate) {
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+
+            tempReservations = tempReservations.filter(res => {
+                const reservationDate = new Date(res.reservationDateTime);
+                return reservationDate >= start && reservationDate <= end;
+            });
+        }
+
+        setFilteredReservations(tempReservations);
+    }, [
+        restaurantFilter,
+        tableFilter,
+        partySizeFilter,
+        statusFilter,
+        cancellationReasonFilter,
+        startDate,
+        endDate,
+        reservations
+    ]);
+
+    const resetFilters = () => {
+        setRestaurantFilter("");
+        setTableFilter("");
+        setPartySizeFilter("");
+        setStatusFilter("");
+        setCancellationReasonFilter("");
+        setStartDate("");
+        setEndDate("");
+    };
+
     if (loading) return <div>Loading...</div>;
     if (error) return <div className="alert alert-danger">{error}</div>;
@@ -44 +115 @@
     return (
         <div className="container mt-5">
-            <h3>Past Reservations</h3>
-            <table className="table table-bordered">
-                <thead className="thead-dark">
-                <tr>
-                    <th>#</th>
-                    <th>Restaurant</th>
-                    <th>Table</th>
-                    <th>Date & Time</th>
-                    <th>Party Size</th>
-                    <th>Special Requests</th>
-                    <th>Status</th>
-                    <th>Cancellation Reason</th>
-                </tr>
-                </thead>
-                <tbody>
-                {reservations.map((res, index) => (
-                    <tr key={res.id}>
-                        <td>{index + 1}</td>
-                        <td>{res.restaurant?.name || "N/A"}</td>
-                        <td>{res.table?.id || "N/A"}</td>
-                        <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
-                        <td>{res.partySize}</td>
-                        <td>{res.specialRequests || "None"}</td>
-                        <td>{res.status}</td>
-                        <td>{res.cancellationReason || "None"}</td>
+            <h3 className="mb-4 text-center">Past Reservations</h3>
+
+            <div className="row mb-4 align-items-end">
+                <div className="col-md-2">
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Filter by Restaurant"
+                        value={restaurantFilter}
+                        onChange={(e) => setRestaurantFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <input
+                        type="number"
+                        className="form-control"
+                        placeholder="Filter by Table ID"
+                        value={tableFilter}
+                        onChange={(e) => setTableFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-4 d-flex gap-2">
+                    <input
+                        type="date"
+                        className="form-control"
+                        placeholder="Start date"
+                        value={startDate}
+                        onChange={(e) => setStartDate(e.target.value)}
+                    />
+                    <input
+                        type="date"
+                        className="form-control"
+                        placeholder="End date"
+                        value={endDate}
+                        onChange={(e) => setEndDate(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <input
+                        type="number"
+                        className="form-control"
+                        placeholder="Filter by Party Size"
+                        value={partySizeFilter}
+                        onChange={(e) => setPartySizeFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2">
+                    <select
+                        value={statusFilter}
+                        onChange={(e) => setStatusFilter(e.target.value)}
+                        className="form-control"
+                    >
+                        <option value="">Filter by status</option>
+                        <option value="successful">Successful</option>
+                        <option value="canceled">Canceled</option>
+                    </select>
+                </div>
+                <div className="col-md-2 mt-2">
+                    <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Filter by Cancellation Reason"
+                        value={cancellationReasonFilter}
+                        onChange={(e) => setCancellationReasonFilter(e.target.value)}
+                    />
+                </div>
+                <div className="col-md-2 mt-2">
+                    <button
+                        onClick={resetFilters}
+                        className="btn btn-outline-secondary w-100"
+                    >
+                        Reset Filters
+                    </button>
+                </div>
+            </div>
+
+            <div className="table-responsive">
+                <table className="table table-striped table-hover table-bordered align-middle">
+                    <thead className="table-dark text-center">
+                    <tr>
+                        <th>#</th>
+                        <th>Restaurant</th>
+                        <th>Table</th>
+                        <th>Date & Time</th>
+                        <th>Party Size</th>
+                        <th>Special Requests</th>
+                        <th>Status</th>
+                        <th>Cancellation Reason</th>
                     </tr>
-                ))}
-                </tbody>
-            </table>
+                    </thead>
+                    <tbody>
+                    {filteredReservations.length > 0 ? (
+                        filteredReservations.map((res, index) => (
+                            <tr key={res.id}>
+                                <td>{index + 1}</td>
+                                <td>{res.restaurant?.name || "N/A"}</td>
+                                <td>{res.table?.id || "N/A"}</td>
+                                <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
+                                <td>{res.partySize}</td>
+                                <td>{res.specialRequests || "None"}</td>
+                                <td>{res.status}</td>
+                                <td>{res.cancellationReason || "None"}</td>
+                            </tr>
+                        ))
+                    ) : (
+                        <tr>
+                            <td colSpan="8" className="text-center">No reservations found.</td>
+                        </tr>
+                    )}
+                    </tbody>
+                </table>
+            </div>
         </div>
     );