Streamlining Trip Management: Enhancing Passenger Detail & Payment Tracking

In the estrella-tour project, which focuses on travel and trip management, a crucial feature has been introduced to improve how trip organizers interact with passenger data. This update provides a more streamlined way to view individual passenger details and accurately track their payment status for specific trips.

Previously, managing passenger payments and accessing detailed information could be a manual or fragmented process. This new functionality centralizes these actions, making it more efficient for administrators to oversee trip logistics.

The Challenge

Organizing trips involves a significant amount of administrative work, particularly when dealing with passenger lists and payments. A key pain point was the lack of an integrated, quick way to review a passenger's specific information within the context of a particular trip template, and then easily update their payment status. This often led to external spreadsheets or separate systems, increasing the potential for errors and slowing down the management process.

Implementing Passenger Management

The new feature addresses this by introducing two core capabilities: view detail and mark paid per trip for template passengers. This was developed using React and Next.js, focusing on a responsive and intuitive user interface.

Viewing Passenger Details

When managing a trip, administrators can now select a passenger from a list to view their comprehensive details. This typically involves presenting relevant information in a modal or a dedicated sidebar, allowing for quick access without navigating away from the main trip overview.

For example, a component might be designed to fetch and display this data:

// components/PassengerDetailsModal.jsx
import React, { useState, useEffect } from 'react';

const PassengerDetailsModal = ({ passengerId, tripId, onClose }) => {
  const [passenger, setPassenger] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (passengerId && tripId) {
      // Simulate API call to fetch passenger details for a specific trip
      fetch(`/api/trips/${tripId}/passengers/${passengerId}`)
        .then(res => res.json())
        .then(data => {
          setPassenger(data);
          setLoading(false);
        })
        .catch(error => {
          console.error('Error fetching passenger details:', error);
          setLoading(false);
        });
    }
  }, [passengerId, tripId]);

  if (loading) return <div>Loading passenger details...</div>;
  if (!passenger) return <div>No passenger data found.</div>;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h2>{passenger.name} - Trip ID: {tripId}</h2>
        <p>Email: {passenger.email}</p>
        <p>Phone: {passenger.phone}</p>
        <p>Payment Status: <strong>{passenger.paymentStatus}</strong></p>
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

export default PassengerDetailsModal;

This PassengerDetailsModal would be dynamically loaded when an administrator clicks on a passenger's name, presenting all necessary information instantly.

Marking as Paid

Equally important is the ability to update a passenger's payment status for a particular trip. This feature typically involves a simple action, such as a button, that triggers an API call to update the backend database. The UI immediately reflects the change, providing instant feedback to the user.

// components/PaymentStatusToggle.jsx
import React from 'react';

const PaymentStatusToggle = ({ passengerId, tripId, currentStatus, onStatusChange }) => {
  const handleToggle = async () => {
    const newStatus = currentStatus === 'Paid' ? 'Pending' : 'Paid';
    try {
      const response = await fetch(`/api/trips/${tripId}/passengers/${passengerId}/payment`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus })
      });
      if (response.ok) {
        onStatusChange(passengerId, newStatus);
      } else {
        console.error('Failed to update payment status');
      }
    } catch (error) {
      console.error('Error updating payment status:', error);
    }
  };

  return (
    <button onClick={handleToggle}>
      {currentStatus === 'Paid' ? 'Mark as Pending' : 'Mark as Paid'}
    </button>
  );
};

export default PaymentStatusToggle;

This PaymentStatusToggle component simplifies the interaction, allowing administrators to change the status with a single click, which then triggers a state update in the parent component and an API call.

The Impact

These enhancements significantly improve the efficiency of trip management within estrella-tour. Administrators now have a clearer, more direct path to manage passenger data and payment statuses, reducing manual effort and potential for errors. This leads to smoother operations and a better experience for both the organizers and, ultimately, the passengers.

Generated with Gitvlg.com