713 lines
30 KiB
React
713 lines
30 KiB
React
import React, { useState, useEffect } from 'react'
|
||
import {
|
||
PlusCircle,
|
||
Edit3,
|
||
Check,
|
||
X,
|
||
RotateCw,
|
||
AlertTriangle,
|
||
Briefcase,
|
||
Trash2,
|
||
Calendar,
|
||
} from 'lucide-react'
|
||
import { fetchEntries, createEntry, updateEntry, deleteEntry } from '../lib/pocketbase.js'
|
||
import { calculatePatientStatus, getPatientISOs } from '../lib/patientUtils.js'
|
||
import CountrySelect from './CountrySelect.jsx'
|
||
|
||
const STATUS_META = {
|
||
'pre-travel': { label: 'Pre-Travel', className: 'status-pre-travel' },
|
||
'in-transit': { label: 'In Transit', className: 'status-in-transit' },
|
||
'at-risk': { label: 'At Risk', className: 'status-at-risk' },
|
||
'post-travel': { label: 'Post-Travel', className: 'status-post-travel' },
|
||
}
|
||
|
||
const INITIAL_NEW_FORM = {
|
||
emrID: '',
|
||
name: '',
|
||
location: '',
|
||
countriesISO: [],
|
||
departure: '',
|
||
arrival: '',
|
||
}
|
||
|
||
export default function Trips() {
|
||
const [travellers, setTravellers] = useState([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const [error, setError] = useState(null)
|
||
const [successMsg, setSuccessMsg] = useState(null)
|
||
|
||
// New Trip form state (Left Panel)
|
||
const [newTripForm, setNewTripForm] = useState(INITIAL_NEW_FORM)
|
||
|
||
// Edit Trip state (Right Panel when editing)
|
||
const [editingTrip, setEditingTrip] = useState(null)
|
||
const [editTripForm, setEditTripForm] = useState(INITIAL_NEW_FORM)
|
||
|
||
async function loadData() {
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
const data = await fetchEntries()
|
||
setTravellers(data || [])
|
||
} catch (err) {
|
||
setError(err.message || 'Unable to connect to PocketBase backend.')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
loadData()
|
||
}, [])
|
||
|
||
// Auto-dismiss success notification
|
||
useEffect(() => {
|
||
if (successMsg) {
|
||
const timer = setTimeout(() => setSuccessMsg(null), 4000)
|
||
return () => clearTimeout(timer)
|
||
}
|
||
}, [successMsg])
|
||
|
||
// Handle New Trip Form submission (Left Form)
|
||
async function handleCreateTrip(e) {
|
||
e.preventDefault()
|
||
if (!newTripForm.name.trim()) {
|
||
setError('Please enter a patient / traveller name.')
|
||
return
|
||
}
|
||
|
||
setSubmitting(true)
|
||
setError(null)
|
||
|
||
// Convert comma-separated string to array if needed
|
||
const isoArray = typeof newTripForm.countriesISO === 'string'
|
||
? newTripForm.countriesISO.split(',').map((s) => s.trim().toUpperCase()).filter(Boolean)
|
||
: newTripForm.countriesISO
|
||
|
||
const payload = {
|
||
emrID: newTripForm.emrID ? Number(newTripForm.emrID) : null,
|
||
name: newTripForm.name.trim(),
|
||
location: newTripForm.location.trim(),
|
||
countriesISO: isoArray,
|
||
departure: newTripForm.departure,
|
||
arrival: newTripForm.arrival,
|
||
}
|
||
|
||
try {
|
||
await createEntry(payload)
|
||
setNewTripForm(INITIAL_NEW_FORM)
|
||
setSuccessMsg('New trip created successfully!')
|
||
await loadData()
|
||
} catch (err) {
|
||
setError(err.message || 'Failed to create trip record.')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
// Initiate Edit mode for a specific trip
|
||
function startEditing(trip) {
|
||
setEditingTrip(trip)
|
||
|
||
const isos = getPatientISOs(trip)
|
||
setEditTripForm({
|
||
emrID: trip.emrID !== undefined && trip.emrID !== null ? trip.emrID : '',
|
||
name: trip.name || '',
|
||
location: trip.location || '',
|
||
countriesISO: Array.isArray(isos) ? isos : typeof isos === 'string' && isos ? isos.split(',').map((s) => s.trim().toUpperCase()) : [],
|
||
departure: trip.departure ? trip.departure.slice(0, 10) : '',
|
||
arrival: trip.arrival ? trip.arrival.slice(0, 10) : '',
|
||
})
|
||
|
||
// Scroll top container into view smoothly
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}
|
||
|
||
function cancelEditing() {
|
||
setEditingTrip(null)
|
||
setEditTripForm(INITIAL_NEW_FORM)
|
||
}
|
||
|
||
// Handle Save Changes submission (Right Edit Form)
|
||
async function handleUpdateTrip(e) {
|
||
e.preventDefault()
|
||
if (!editingTrip) return
|
||
if (!editTripForm.name.trim()) {
|
||
setError('Patient name cannot be empty.')
|
||
return
|
||
}
|
||
|
||
setSubmitting(true)
|
||
setError(null)
|
||
|
||
const isoArray = typeof editTripForm.countriesISO === 'string'
|
||
? editTripForm.countriesISO.split(',').map((s) => s.trim().toUpperCase()).filter(Boolean)
|
||
: editTripForm.countriesISO
|
||
|
||
const payload = {
|
||
emrID: editTripForm.emrID ? Number(editTripForm.emrID) : null,
|
||
name: editTripForm.name.trim(),
|
||
location: editTripForm.location.trim(),
|
||
countriesISO: isoArray,
|
||
departure: editTripForm.departure,
|
||
arrival: editTripForm.arrival,
|
||
}
|
||
|
||
try {
|
||
await updateEntry(editingTrip.id, payload)
|
||
setSuccessMsg(`Trip #${editingTrip.id} updated successfully!`)
|
||
setEditingTrip(null)
|
||
setEditTripForm(INITIAL_NEW_FORM)
|
||
await loadData()
|
||
} catch (err) {
|
||
setError(err.message || `Failed to update trip #${editingTrip.id}.`)
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
// Handle Delete Trip
|
||
async function handleDeleteTrip(id, name) {
|
||
if (!window.confirm(`Are you sure you want to delete trip ${id} (${name})?`)) return
|
||
|
||
setError(null)
|
||
try {
|
||
await deleteEntry(id)
|
||
if (editingTrip?.id === id) {
|
||
cancelEditing()
|
||
}
|
||
setSuccessMsg(`Trip ${id} deleted successfully.`)
|
||
await loadData()
|
||
} catch (err) {
|
||
setError(err.message || `Failed to delete trip ${id}.`)
|
||
}
|
||
}
|
||
|
||
// Helper for date formatting
|
||
const formatDate = (dateStr) => {
|
||
if (!dateStr) return 'N/A'
|
||
const date = new Date(dateStr)
|
||
if (isNaN(date.getTime())) return 'N/A'
|
||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
|
||
}
|
||
|
||
// Compute live preview state for New Form draft
|
||
const newDraftPatient = {
|
||
emrID: newTripForm.emrID,
|
||
name: newTripForm.name || 'Jane / John Doe',
|
||
location: newTripForm.location || 'Pending Location',
|
||
countriesISO: Array.isArray(newTripForm.countriesISO)
|
||
? newTripForm.countriesISO
|
||
: typeof newTripForm.countriesISO === 'string'
|
||
? newTripForm.countriesISO.split(',').map((s) => s.trim().toUpperCase()).filter(Boolean)
|
||
: [],
|
||
departure: newTripForm.departure,
|
||
arrival: newTripForm.arrival,
|
||
}
|
||
const newDraftStatusKey = calculatePatientStatus(newDraftPatient)
|
||
const newDraftMeta = STATUS_META[newDraftStatusKey] || STATUS_META['pre-travel']
|
||
const newDraftISOs = getPatientISOs(newDraftPatient)
|
||
|
||
// Compute live preview state for Edit Form draft
|
||
const editDraftPatient = {
|
||
...editingTrip,
|
||
emrID: editTripForm.emrID,
|
||
name: editTripForm.name,
|
||
location: editTripForm.location,
|
||
countriesISO: Array.isArray(editTripForm.countriesISO)
|
||
? editTripForm.countriesISO
|
||
: typeof editTripForm.countriesISO === 'string'
|
||
? editTripForm.countriesISO.split(',').map((s) => s.trim().toUpperCase()).filter(Boolean)
|
||
: [],
|
||
departure: editTripForm.departure,
|
||
arrival: editTripForm.arrival,
|
||
}
|
||
const editDraftStatusKey = calculatePatientStatus(editDraftPatient)
|
||
const editDraftMeta = STATUS_META[editDraftStatusKey] || STATUS_META['pre-travel']
|
||
const editDraftISOs = getPatientISOs(editDraftPatient)
|
||
|
||
const isEditingMode = editingTrip !== null
|
||
|
||
return (
|
||
<div className="trips-view" aria-label="Trip Management Workspace">
|
||
|
||
{/* ── Top Header ──────────────────────────────────────────────────────── */}
|
||
<header className="trips-view-header">
|
||
<div>
|
||
<p style={{ fontSize: 'var(--font-size-xs)', fontWeight: 700, color: 'var(--color-primary)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: '4px' }}>
|
||
CONCIERGE OPERATIONS
|
||
</p>
|
||
<h1 style={{ fontSize: 'var(--font-size-3xl)', fontWeight: 800, color: 'var(--color-text-primary)', letterSpacing: '-0.02em', margin: 0 }}>
|
||
Trip Management
|
||
</h1>
|
||
<p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)', marginTop: '4px' }}>
|
||
Create new patient travel itineraries and manage existing trip records.
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={loadData}
|
||
disabled={loading}
|
||
className="btn-secondary"
|
||
style={{ padding: '8px 16px', fontSize: 'var(--font-size-xs)' }}
|
||
>
|
||
<RotateCw size={14} style={{ animation: loading ? 'spin 1s linear infinite' : 'none' }} />
|
||
{loading ? 'Refreshing...' : 'Refresh Database'}
|
||
</button>
|
||
</header>
|
||
|
||
{/* ── Banners & Notifications ────────────────────────────────────────── */}
|
||
{error && (
|
||
<div style={{ background: 'rgba(239, 68, 68, 0.12)', border: '1px solid rgba(239, 68, 68, 0.35)', borderRadius: 'var(--radius-md)', padding: '16px 20px', marginBottom: '24px', color: '#f87171', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
<AlertTriangle size={20} style={{ color: '#ef4444', flexShrink: 0 }} />
|
||
<div style={{ flex: 1, fontSize: 'var(--font-size-sm)', lineHeight: 1.4 }}>{error}</div>
|
||
<button onClick={() => setError(null)} style={{ background: 'transparent', border: 'none', color: '#f87171', cursor: 'pointer', fontSize: '18px' }}>×</button>
|
||
</div>
|
||
)}
|
||
|
||
{successMsg && (
|
||
<div style={{ background: 'rgba(16, 185, 129, 0.12)', border: '1px solid rgba(16, 185, 129, 0.35)', borderRadius: 'var(--radius-md)', padding: '16px 20px', marginBottom: '24px', color: '#34d399', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
<Check size={20} style={{ color: '#10b981', flexShrink: 0 }} />
|
||
<div style={{ flex: 1, fontSize: 'var(--font-size-sm)', fontWeight: 600 }}>{successMsg}</div>
|
||
<button onClick={() => setSuccessMsg(null)} style={{ background: 'transparent', border: 'none', color: '#34d399', cursor: 'pointer', fontSize: '18px' }}>×</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── TOP HALF: Split Container ───────────────────────────────────────── */}
|
||
<div className="trips-top-split">
|
||
|
||
{/* ── Left Panel: Form for New Cards ─────────────────────────────── */}
|
||
<section className={`trips-panel-card ${isEditingMode ? 'trips-panel-card--disabled' : ''}`}>
|
||
<div className="trips-panel-header">
|
||
<h2 className="trips-panel-title">
|
||
<PlusCircle size={20} style={{ color: 'var(--color-primary)' }} />
|
||
Create New Trip
|
||
</h2>
|
||
<span className={`trips-badge ${isEditingMode ? 'trips-badge--disabled' : 'trips-badge--new'}`}>
|
||
{isEditingMode ? 'Form Paused' : 'New Trip Form'}
|
||
</span>
|
||
</div>
|
||
|
||
{isEditingMode && (
|
||
<div style={{ background: 'rgba(139, 92, 246, 0.15)', border: '1px solid rgba(139, 92, 246, 0.3)', borderRadius: 'var(--radius-sm)', padding: '10px 14px', marginBottom: '16px', fontSize: 'var(--font-size-xs)', color: 'var(--color-accent-violet)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<Edit3 size={14} />
|
||
Editing in progress on right panel — New trip creation is currently disabled.
|
||
</div>
|
||
)}
|
||
|
||
<form onSubmit={handleCreateTrip} className="trips-form">
|
||
<div className="trips-form-row">
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="new-emr-id">EMR ID</label>
|
||
<input
|
||
id="new-emr-id"
|
||
type="number"
|
||
className="trips-form-input"
|
||
placeholder="e.g. 1042"
|
||
value={newTripForm.emrID}
|
||
onChange={(e) => setNewTripForm({ ...newTripForm, emrID: e.target.value })}
|
||
disabled={isEditingMode || submitting}
|
||
/>
|
||
</div>
|
||
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="new-patient-name">Traveller Name</label>
|
||
<input
|
||
id="new-patient-name"
|
||
type="text"
|
||
className="trips-form-input"
|
||
placeholder="e.g. John Doe"
|
||
value={newTripForm.name}
|
||
onChange={(e) => setNewTripForm({ ...newTripForm, name: e.target.value })}
|
||
disabled={isEditingMode || submitting}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label">Destination Country(ies)</label>
|
||
<CountrySelect
|
||
selectedISOs={newTripForm.countriesISO}
|
||
onChange={(updatedISOs, updatedLocationStr) => {
|
||
setNewTripForm({
|
||
...newTripForm,
|
||
countriesISO: updatedISOs,
|
||
location: updatedLocationStr,
|
||
})
|
||
}}
|
||
disabled={isEditingMode || submitting}
|
||
placeholder="Search country (e.g. Spain, France)..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="trips-form-row">
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="new-departure">Departure Date</label>
|
||
<input
|
||
id="new-departure"
|
||
type="date"
|
||
className="trips-form-input"
|
||
value={newTripForm.departure}
|
||
onChange={(e) => setNewTripForm({ ...newTripForm, departure: e.target.value })}
|
||
disabled={isEditingMode || submitting}
|
||
/>
|
||
</div>
|
||
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="new-arrival">Return / Arrival Date</label>
|
||
<input
|
||
id="new-arrival"
|
||
type="date"
|
||
className="trips-form-input"
|
||
value={newTripForm.arrival}
|
||
onChange={(e) => setNewTripForm({ ...newTripForm, arrival: e.target.value })}
|
||
disabled={isEditingMode || submitting}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="trips-form-actions">
|
||
<button
|
||
type="submit"
|
||
className="btn-primary"
|
||
disabled={isEditingMode || submitting}
|
||
>
|
||
<PlusCircle size={16} />
|
||
{submitting ? 'Creating...' : 'Create Trip'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
{/* ── Right Panel: Live Preview Card or Editable Card ────────────── */}
|
||
<section className={`trips-panel-card ${isEditingMode ? 'trips-panel-card--editing' : ''}`}>
|
||
<div className="trips-panel-header">
|
||
<h2 className="trips-panel-title">
|
||
{isEditingMode ? (
|
||
<>
|
||
<Edit3 size={20} style={{ color: 'var(--color-accent-violet)' }} />
|
||
Editing Trip ({editingTrip.id})
|
||
</>
|
||
) : (
|
||
<>
|
||
<Briefcase size={20} style={{ color: 'var(--color-primary)' }} />
|
||
Live Itinerary Preview
|
||
</>
|
||
)}
|
||
</h2>
|
||
<span className={`trips-badge ${isEditingMode ? 'trips-badge--edit' : 'trips-badge--new'}`}>
|
||
{isEditingMode ? 'Edit Mode Active' : 'Real-time Preview'}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Mode 1: Create Preview Card (Non-editing mode) */}
|
||
{!isEditingMode && (
|
||
<div>
|
||
<div className="trips-preview-card">
|
||
<div className="log-card-top">
|
||
<div className="log-card-left">
|
||
<span className="log-patient-id" style={{ background: 'rgba(59, 158, 255, 0.15)', color: 'var(--color-primary)', border: '1px solid rgba(59, 158, 255, 0.3)' }}>
|
||
{newDraftPatient.emrID ? `EMR: ${newDraftPatient.emrID}` : 'NEW-TRIP'}
|
||
</span>
|
||
<h3 className="log-patient-name" style={{ marginTop: '4px', fontSize: 'var(--font-size-base)' }}>
|
||
{newDraftPatient.name}
|
||
</h3>
|
||
</div>
|
||
<span className={`status-pill ${newDraftMeta.className}`}>
|
||
{newDraftMeta.label}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="log-card-details" style={{ marginTop: '8px', borderTop: '1px dashed var(--color-border)', paddingTop: '12px' }}>
|
||
<div className="log-detail-item">
|
||
<span className="log-detail-label">Location</span>
|
||
<span className="log-detail-val" style={{ fontWeight: 600, color: 'var(--color-text-primary)' }}>
|
||
📍 {newDraftPatient.location}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="log-detail-item" style={{ marginTop: '8px' }}>
|
||
<span className="log-detail-label">Destinations (ISOs)</span>
|
||
<div className="destination-chips-container">
|
||
{newDraftISOs.length > 0 ? (
|
||
newDraftISOs.map((iso) => (
|
||
<span key={iso} className="destination-chip">📍 {iso}</span>
|
||
))
|
||
) : (
|
||
<span className="log-detail-val" style={{ fontStyle: 'italic', color: 'var(--color-text-muted)' }}>None specified</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="log-detail-item" style={{ marginTop: '8px' }}>
|
||
<span className="log-detail-label">Travel Window</span>
|
||
<span className="log-detail-val">
|
||
<Calendar size={13} style={{ display: 'inline', verticalAlign: 'middle', marginRight: '4px' }} />
|
||
{formatDate(newDraftPatient.departure)} – {formatDate(newDraftPatient.arrival)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p className="trips-form-hint" style={{ marginTop: '12px', textAlign: 'center' }}>
|
||
This card reflects how the new trip will appear in the Live Tracking dashboard.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Mode 2: Editable Preview Form (Editing mode) */}
|
||
{isEditingMode && (
|
||
<form onSubmit={handleUpdateTrip} className="trips-form">
|
||
<div className="trips-preview-card trips-preview-card--editing" style={{ background: 'var(--color-bg-subtle)' }}>
|
||
<div className="log-card-top">
|
||
<div className="log-card-left">
|
||
<span className="log-patient-id" style={{ background: 'rgba(139, 92, 246, 0.2)', color: 'var(--color-accent-violet)', border: '1px solid rgba(139, 92, 246, 0.4)' }}>
|
||
{editTripForm.emrID ? `EMR: ${editTripForm.emrID}` : 'NO-EMR'}
|
||
</span>
|
||
<span style={{ fontSize: '11px', color: 'var(--color-text-muted)', marginLeft: '8px' }}>
|
||
DB ID: {editingTrip.id} | Created: {formatDate(editingTrip.created)}
|
||
</span>
|
||
</div>
|
||
<span className={`status-pill ${editDraftMeta.className}`}>
|
||
{editDraftMeta.label}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="trips-form" style={{ marginTop: '8px' }}>
|
||
<div className="trips-form-row">
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="edit-emr-id">EMR ID</label>
|
||
<input
|
||
id="edit-emr-id"
|
||
type="number"
|
||
className="trips-form-input"
|
||
placeholder="e.g. 1042"
|
||
value={editTripForm.emrID}
|
||
onChange={(e) => setEditTripForm({ ...editTripForm, emrID: e.target.value })}
|
||
disabled={submitting}
|
||
/>
|
||
</div>
|
||
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="edit-patient-name">Patient / Traveller Name *</label>
|
||
<input
|
||
id="edit-patient-name"
|
||
type="text"
|
||
className="trips-form-input"
|
||
value={editTripForm.name}
|
||
onChange={(e) => setEditTripForm({ ...editTripForm, name: e.target.value })}
|
||
disabled={submitting}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="edit-location">Primary Location</label>
|
||
<input
|
||
id="edit-location"
|
||
type="text"
|
||
className="trips-form-input"
|
||
value={editTripForm.location}
|
||
onChange={(e) => setEditTripForm({ ...editTripForm, location: e.target.value })}
|
||
disabled={submitting}
|
||
/>
|
||
</div>
|
||
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label">Destination Country(ies)</label>
|
||
<CountrySelect
|
||
selectedISOs={editTripForm.countriesISO}
|
||
onChange={(updatedISOs, updatedLocationStr) => {
|
||
setEditTripForm({
|
||
...editTripForm,
|
||
countriesISO: updatedISOs,
|
||
location: updatedLocationStr,
|
||
})
|
||
}}
|
||
disabled={submitting}
|
||
placeholder="Search country..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="trips-form-row">
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="edit-departure">Departure Date</label>
|
||
<input
|
||
id="edit-departure"
|
||
type="date"
|
||
className="trips-form-input"
|
||
value={editTripForm.departure}
|
||
onChange={(e) => setEditTripForm({ ...editTripForm, departure: e.target.value })}
|
||
disabled={submitting}
|
||
/>
|
||
</div>
|
||
|
||
<div className="trips-form-field">
|
||
<label className="trips-form-label" htmlFor="edit-arrival">Return / Arrival Date</label>
|
||
<input
|
||
id="edit-arrival"
|
||
type="date"
|
||
className="trips-form-input"
|
||
value={editTripForm.arrival}
|
||
onChange={(e) => setEditTripForm({ ...editTripForm, arrival: e.target.value })}
|
||
disabled={submitting}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Live chips preview for edit form */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap', marginTop: '6px' }}>
|
||
<span style={{ fontSize: '11px', fontWeight: 600, color: 'var(--color-text-muted)' }}>ISO Preview:</span>
|
||
{editDraftISOs.length > 0 ? (
|
||
editDraftISOs.map((iso) => (
|
||
<span key={iso} className="destination-chip">📍 {iso}</span>
|
||
))
|
||
) : (
|
||
<span style={{ fontSize: '11px', color: 'var(--color-text-muted)', fontStyle: 'italic' }}>None</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="trips-form-actions">
|
||
<button
|
||
type="submit"
|
||
className="btn-primary"
|
||
style={{ background: 'var(--color-accent-violet)' }}
|
||
disabled={submitting}
|
||
>
|
||
<Check size={16} />
|
||
{submitting ? 'Saving...' : 'Save Changes'}
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
className="btn-secondary"
|
||
onClick={cancelEditing}
|
||
disabled={submitting}
|
||
>
|
||
<X size={16} />
|
||
Cancel Edit
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
</section>
|
||
|
||
</div>
|
||
|
||
{/* ── BOTTOM HALF: Trips Database List ────────────────────────────────── */}
|
||
<section className="journey-panel" style={{ marginTop: 'var(--space-4)' }}>
|
||
<div className="trips-bottom-panel-header" style={{ padding: 'var(--space-5) var(--space-6)', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<h2 className="bottom-panel-title" style={{ margin: 0, fontSize: 'var(--font-size-lg)', fontWeight: 700 }}>
|
||
All Active Trips List
|
||
</h2>
|
||
</div>
|
||
|
||
<div style={{ fontSize: 'var(--font-size-xs)', fontWeight: 600, color: 'var(--color-primary)', background: 'var(--color-primary-glow)', padding: '4px 12px', borderRadius: '999px', border: '1px solid var(--color-border-active)' }}>
|
||
Total Records: {travellers.length}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="journey-table-container">
|
||
<table className="journey-table" aria-label="Database Trips List">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">EMR ID</th>
|
||
<th scope="col">Patient Name</th>
|
||
<th scope="col">Location & ISOs</th>
|
||
<th scope="col">Departure</th>
|
||
<th scope="col">Arrival</th>
|
||
<th scope="col">Status</th>
|
||
<th scope="col" style={{ textAlign: 'right' }}>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{travellers.length === 0 && !loading ? (
|
||
<tr>
|
||
<td colSpan={8} style={{ textAlign: 'center', padding: '32px', color: 'var(--color-text-muted)' }}>
|
||
No trips found in database. Use the form above to add a new trip.
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
travellers.map((p) => {
|
||
const meta = STATUS_META[p.status] || STATUS_META['pre-travel']
|
||
const isBeingEdited = editingTrip?.id === p.id
|
||
const isos = getPatientISOs(p)
|
||
|
||
return (
|
||
<tr
|
||
key={p.id}
|
||
id={`trip-row-${p.id}`}
|
||
style={{
|
||
background: isBeingEdited ? 'rgba(139, 92, 246, 0.08)' : undefined,
|
||
transition: 'background var(--transition-fast)'
|
||
}}
|
||
>
|
||
<td>
|
||
<span className="log-patient-id" style={{ opacity: isBeingEdited ? 1 : 0.85 }}>
|
||
{p.emrID ? p.emrID : '—'}
|
||
</span>
|
||
</td>
|
||
<td className="patient-name">{p.name}</td>
|
||
<td>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
|
||
<span>📍 {p.location || 'N/A'}</span>
|
||
{isos.length > 0 && (
|
||
<div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
|
||
{isos.map((iso) => (
|
||
<span key={iso} className="destination-chip" style={{ fontSize: '10px', padding: '1px 6px' }}>
|
||
{iso}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</td>
|
||
<td>{formatDate(p.departure)}</td>
|
||
<td>{formatDate(p.arrival)}</td>
|
||
<td>
|
||
<span className={`status-pill ${meta.className}`}>
|
||
{meta.label}
|
||
</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }}>
|
||
<div className="trips-list-actions" style={{ justifyContent: 'flex-end' }}>
|
||
<button
|
||
type="button"
|
||
className="btn-table-edit"
|
||
onClick={() => startEditing(p)}
|
||
disabled={submitting}
|
||
title={`Edit trip ${p.id}`}
|
||
>
|
||
<Edit3 size={13} />
|
||
{isBeingEdited ? 'Editing...' : 'Edit'}
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
className="btn-danger"
|
||
onClick={() => handleDeleteTrip(p.id, p.name)}
|
||
disabled={submitting}
|
||
title={`Delete trip ${p.id}`}
|
||
>
|
||
<Trash2 size={13} />
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
)
|
||
})
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
)
|
||
}
|