Add account-level crew pool with per-logbook and per-day selection.
Move skipper and crew master data to the user profile pool, replace the logbook crew tab with selection from that pool, inherit crew on new travel days, and sync via new PersonPayload and LogbookCrewSelection models. Includes migration from legacy crew records, tour/demo updates, and i18n. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2,7 +2,9 @@ import { useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { cycleAppLanguage, getNextLanguage } from '../utils/i18nLanguages.js'
|
||||
import VesselForm from './VesselForm.tsx'
|
||||
import CrewForm from './CrewForm.tsx'
|
||||
import LogbookCrewPicker from './LogbookCrewPicker.tsx'
|
||||
import type { LogbookCrewSelectionData } from '../types/person.js'
|
||||
import { personToSnapshot } from '../utils/personSnapshots.js'
|
||||
import LogEntriesList from './LogEntriesList.tsx'
|
||||
import { Ship, Users, FileText, Lock, Globe, ChevronLeft, UserPlus } from 'lucide-react'
|
||||
import { buildPublicDemoFixture, type PublicDemoFixture } from '../services/demoLogbookData.js'
|
||||
@@ -52,7 +54,19 @@ export default function DemoViewer({ onExit }: DemoViewerProps) {
|
||||
cycleAppLanguage(i18n)
|
||||
}
|
||||
|
||||
const { title, yacht, crews, entries, gpsTracks, photos, firstEntryId } = fixture
|
||||
const { title, yacht, personPool, logbookCrewSelection, entries, gpsTracks, photos, firstEntryId } =
|
||||
fixture
|
||||
|
||||
const demoSelection: LogbookCrewSelectionData = {
|
||||
activeSkipperId: logbookCrewSelection.activeSkipperId,
|
||||
activeCrewIds: logbookCrewSelection.activeCrewIds,
|
||||
snapshotsById: Object.fromEntries(
|
||||
Object.entries(logbookCrewSelection.snapshotsById).map(([id, snap]) => [
|
||||
id,
|
||||
personToSnapshot(id, snap)
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-layout">
|
||||
@@ -115,7 +129,7 @@ export default function DemoViewer({ onExit }: DemoViewerProps) {
|
||||
<button
|
||||
className={`sidebar-btn ${activeTab === 'crew' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('crew')}
|
||||
data-tour="nav-crew"
|
||||
data-tour="nav-logbook-crew"
|
||||
>
|
||||
<Users size={18} />
|
||||
{t('nav.crew')}
|
||||
@@ -142,7 +156,12 @@ export default function DemoViewer({ onExit }: DemoViewerProps) {
|
||||
)}
|
||||
|
||||
{activeTab === 'crew' && (
|
||||
<CrewForm logbookId="demo" readOnly={true} preloadedData={crews} />
|
||||
<LogbookCrewPicker
|
||||
logbookId="demo"
|
||||
readOnly={true}
|
||||
preloadedPool={personPool}
|
||||
preloadedSelection={demoSelection}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Users } from 'lucide-react'
|
||||
import type { EntryCrewFields, PersonSnapshot } from '../types/person.js'
|
||||
import { loadPersonPool } from '../services/personPool.js'
|
||||
import { loadLogbookCrewSelection } from '../services/logbookCrewSelection.js'
|
||||
import { buildSnapshotsForSelection } from '../utils/personSnapshots.js'
|
||||
import type { PersonData } from '../types/person.js'
|
||||
|
||||
export interface EntryCrewSectionProps {
|
||||
logbookId: string
|
||||
readOnly?: boolean
|
||||
value: EntryCrewFields
|
||||
onChange: (next: EntryCrewFields) => void
|
||||
/** Demo: fixed pool */
|
||||
preloadedPool?: Map<string, PersonData>
|
||||
}
|
||||
|
||||
export default function EntryCrewSection({
|
||||
logbookId,
|
||||
readOnly = false,
|
||||
value,
|
||||
onChange,
|
||||
preloadedPool
|
||||
}: EntryCrewSectionProps) {
|
||||
const { t } = useTranslation()
|
||||
const [pool, setPool] = useState<Map<string, PersonData>>(preloadedPool ?? new Map())
|
||||
|
||||
useEffect(() => {
|
||||
if (preloadedPool) {
|
||||
setPool(preloadedPool)
|
||||
return
|
||||
}
|
||||
let cancelled = false
|
||||
void (async () => {
|
||||
try {
|
||||
const people = await loadPersonPool()
|
||||
if (cancelled) return
|
||||
setPool(new Map(people.map((p) => [p.payloadId, p.data])))
|
||||
} catch {
|
||||
/* use snapshots only */
|
||||
}
|
||||
})()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [preloadedPool])
|
||||
|
||||
const displayPool = useMemo(() => {
|
||||
const merged = new Map(pool)
|
||||
for (const snap of Object.values(value.crewSnapshotsById)) {
|
||||
if (!merged.has(snap.id)) {
|
||||
merged.set(snap.id, {
|
||||
name: snap.name,
|
||||
address: snap.address,
|
||||
birthDate: snap.birthDate,
|
||||
phone: snap.phone,
|
||||
nationality: snap.nationality,
|
||||
passportNumber: snap.passportNumber,
|
||||
bloodType: snap.bloodType,
|
||||
allergies: snap.allergies,
|
||||
diseases: snap.diseases,
|
||||
role: snap.role,
|
||||
photo: snap.photo
|
||||
})
|
||||
}
|
||||
}
|
||||
return merged
|
||||
}, [pool, value.crewSnapshotsById])
|
||||
|
||||
const skippers = [...displayPool.entries()].filter(([, d]) => d.role === 'skipper')
|
||||
const crewEntries = [...displayPool.entries()].filter(([, d]) => d.role === 'crew')
|
||||
|
||||
const applyChange = (skipperId: string | null, crewIds: string[]) => {
|
||||
const snapshots = buildSnapshotsForSelection(skipperId, crewIds, displayPool)
|
||||
onChange({
|
||||
selectedSkipperId: skipperId,
|
||||
selectedCrewIds: crewIds,
|
||||
crewSnapshotsById: snapshots
|
||||
})
|
||||
}
|
||||
|
||||
const toggleCrew = (id: string) => {
|
||||
if (readOnly) return
|
||||
const next = value.selectedCrewIds.includes(id)
|
||||
? value.selectedCrewIds.filter((x) => x !== id)
|
||||
: [...value.selectedCrewIds, id]
|
||||
applyChange(value.selectedSkipperId, next)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="form-card" data-tour="entry-crew">
|
||||
<div className="form-header">
|
||||
<Users size={22} className="form-icon" />
|
||||
<h3>{t('entry_crew.title')}</h3>
|
||||
</div>
|
||||
<p className="help-text mb-3">{t('entry_crew.subtitle')}</p>
|
||||
|
||||
<div className="input-group mb-3">
|
||||
<label>{t('entry_crew.day_skipper')}</label>
|
||||
{skippers.length === 0 ? (
|
||||
<p className="help-text">{t('entry_crew.no_skipper')}</p>
|
||||
) : (
|
||||
<div className="crew-selection-list">
|
||||
{skippers.map(([id, data]) => (
|
||||
<label key={id} className="crew-selection-item">
|
||||
<input
|
||||
type="radio"
|
||||
name={`entry-skipper-${logbookId}`}
|
||||
checked={value.selectedSkipperId === id}
|
||||
onChange={() => !readOnly && applyChange(id, value.selectedCrewIds)}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<span>{data.name || t('logbook_crew.unnamed')}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<label>{t('entry_crew.day_crew')}</label>
|
||||
{crewEntries.length === 0 ? (
|
||||
<p className="help-text">{t('entry_crew.no_crew')}</p>
|
||||
) : (
|
||||
<div className="crew-selection-list">
|
||||
{crewEntries.map(([id, data]) => (
|
||||
<label key={id} className="crew-selection-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value.selectedCrewIds.includes(id)}
|
||||
onChange={() => toggleCrew(id)}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<span>{data.name || t('logbook_crew.unnamed')}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export async function loadDefaultEntryCrewForNewDay(
|
||||
logbookId: string,
|
||||
previousEntry: Record<string, unknown> | null
|
||||
): Promise<EntryCrewFields> {
|
||||
if (previousEntry) {
|
||||
const selectedSkipperId =
|
||||
typeof previousEntry.selectedSkipperId === 'string' ? previousEntry.selectedSkipperId : null
|
||||
const selectedCrewIds = Array.isArray(previousEntry.selectedCrewIds)
|
||||
? previousEntry.selectedCrewIds.filter((id): id is string => typeof id === 'string')
|
||||
: []
|
||||
const crewSnapshotsById =
|
||||
previousEntry.crewSnapshotsById && typeof previousEntry.crewSnapshotsById === 'object'
|
||||
? (previousEntry.crewSnapshotsById as Record<string, PersonSnapshot>)
|
||||
: {}
|
||||
return { selectedSkipperId, selectedCrewIds, crewSnapshotsById }
|
||||
}
|
||||
|
||||
const selection = await loadLogbookCrewSelection(logbookId)
|
||||
return {
|
||||
selectedSkipperId: selection.activeSkipperId,
|
||||
selectedCrewIds: [...selection.activeCrewIds],
|
||||
crewSnapshotsById: { ...selection.snapshotsById }
|
||||
}
|
||||
}
|
||||
@@ -277,6 +277,12 @@ export default function LogEntriesList({
|
||||
const nowStr = new Date().toISOString()
|
||||
const todayStr = nowStr.substring(0, 10)
|
||||
|
||||
const { loadDefaultEntryCrewForNewDay } = await import('./EntryCrewSection.js')
|
||||
const entryCrew = await loadDefaultEntryCrewForNewDay(
|
||||
logbookId,
|
||||
previousEntry as Record<string, unknown> | null
|
||||
)
|
||||
|
||||
const initialPayload = {
|
||||
date: todayStr,
|
||||
dayOfTravel: getNextTravelDayNumber(decryptedEntries),
|
||||
@@ -285,6 +291,9 @@ export default function LogEntriesList({
|
||||
freshwater,
|
||||
fuel,
|
||||
...(greywaterLevel > 0 ? { greywater: { level: greywaterLevel } } : {}),
|
||||
selectedSkipperId: entryCrew.selectedSkipperId,
|
||||
selectedCrewIds: entryCrew.selectedCrewIds,
|
||||
crewSnapshotsById: entryCrew.crewSnapshotsById,
|
||||
signSkipper: '',
|
||||
signCrew: '',
|
||||
events: []
|
||||
|
||||
@@ -11,6 +11,9 @@ import { downloadLogbookPagePdf } from '../services/pdfExport.js'
|
||||
import { FileText, Save, ChevronLeft, Check, Compass, Plus, Trash2, MapPin, CloudSun, Clock, Download, Upload, Pencil, X, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import PhotoCapture from './PhotoCapture.tsx'
|
||||
import SignatureSection from './SignatureSection.tsx'
|
||||
import EntryCrewSection from './EntryCrewSection.tsx'
|
||||
import { emptyEntryCrewFields, type EntryCrewFields } from '../types/person.js'
|
||||
import { entryCrewFromPreviousEntry } from '../utils/personSnapshots.js'
|
||||
import TrackMap from './TrackMap.tsx'
|
||||
import { useDialog } from './ModalDialog.tsx'
|
||||
import {
|
||||
@@ -108,7 +111,8 @@ function fingerprintFromStoredEntry(decrypted: Record<string, unknown>): string
|
||||
motorHoursRaw != null && motorHoursRaw !== ''
|
||||
? parseFloat(String(motorHoursRaw))
|
||||
: undefined,
|
||||
events: (decrypted.events as LogEventPayload[]) || []
|
||||
events: (decrypted.events as LogEventPayload[]) || [],
|
||||
entryCrew: entryCrewFromPreviousEntry(decrypted as Record<string, unknown>)
|
||||
})
|
||||
|
||||
return JSON.stringify({
|
||||
@@ -168,6 +172,8 @@ export default function LogEntryEditor({
|
||||
const [greywaterLevel, setGreywaterLevel] = useState('0')
|
||||
const [tankCapacities, setTankCapacities] = useState<VesselTankCapacities>({})
|
||||
|
||||
const [entryCrew, setEntryCrew] = useState<EntryCrewFields>(emptyEntryCrewFields())
|
||||
|
||||
// Signatures
|
||||
const [signSkipper, setSignSkipper] = useState<SignatureValue | ''>('')
|
||||
const [signCrew, setSignCrew] = useState<SignatureValue | ''>('')
|
||||
@@ -279,7 +285,8 @@ export default function LogEntryEditor({
|
||||
trackSpeedMaxKn: trackSpeedMaxKn.trim() ? parseFloat(trackSpeedMaxKn) : undefined,
|
||||
trackSpeedAvgKn: trackSpeedAvgKn.trim() ? parseFloat(trackSpeedAvgKn) : undefined,
|
||||
motorHours: motorHours.trim() ? parseFloat(motorHours) : undefined,
|
||||
events: eventsOverride ?? events
|
||||
events: eventsOverride ?? events,
|
||||
entryCrew
|
||||
})
|
||||
}, [
|
||||
date, dayOfTravel, departure, destination,
|
||||
@@ -287,7 +294,8 @@ export default function LogEntryEditor({
|
||||
fuelMorning, fuelRefilled, fuelEvening, fuelConsumption,
|
||||
greywaterLevel,
|
||||
trackDistanceNm, trackSpeedMaxKn, trackSpeedAvgKn, motorHours,
|
||||
events
|
||||
events,
|
||||
entryCrew
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
@@ -706,6 +714,7 @@ export default function LogEntryEditor({
|
||||
|
||||
setSignSkipper(normalizeSignature(preloadedEntry.signSkipper) || '')
|
||||
setSignCrew(normalizeSignature(preloadedEntry.signCrew) || '')
|
||||
setEntryCrew(entryCrewFromPreviousEntry(preloadedEntry as Record<string, unknown>))
|
||||
loadTrackStatsFromEntry(preloadedEntry)
|
||||
setEvents(sortLogEventsByTime((preloadedEntry.events || []).map(normalizeLogEvent)))
|
||||
setSavedFingerprint(fingerprintFromStoredEntry(preloadedEntry))
|
||||
@@ -744,6 +753,7 @@ export default function LogEntryEditor({
|
||||
|
||||
setSignSkipper(normalizeSignature(decrypted.signSkipper) || '')
|
||||
setSignCrew(normalizeSignature(decrypted.signCrew) || '')
|
||||
setEntryCrew(entryCrewFromPreviousEntry(decrypted as Record<string, unknown>))
|
||||
loadTrackStatsFromEntry(decrypted)
|
||||
setEvents(sortLogEventsByTime((decrypted.events || []).map(normalizeLogEvent)))
|
||||
setSavedFingerprint(fingerprintFromStoredEntry(decrypted))
|
||||
@@ -2032,6 +2042,13 @@ export default function LogEntryEditor({
|
||||
|
||||
<PhotoCapture entryId={entryId} logbookId={logbookId} readOnly={readOnly} preloadedPhotos={preloadedPhotos} />
|
||||
|
||||
<EntryCrewSection
|
||||
logbookId={logbookId}
|
||||
readOnly={readOnly}
|
||||
value={entryCrew}
|
||||
onChange={setEntryCrew}
|
||||
/>
|
||||
|
||||
<SignatureSection
|
||||
readOnly={readOnly}
|
||||
disabled={saving}
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Users, User, Save, Check } from 'lucide-react'
|
||||
import type { LogbookCrewSelectionData, PersonSnapshot } from '../types/person.js'
|
||||
import type { DecryptedPerson } from '../services/personPool.js'
|
||||
import { loadPersonPool, filterSkippers, filterCrew } from '../services/personPool.js'
|
||||
import { loadLogbookCrewSelection, saveLogbookCrewSelectionFromIds } from '../services/logbookCrewSelection.js'
|
||||
import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
|
||||
|
||||
export interface LogbookCrewPickerProps {
|
||||
logbookId: string
|
||||
readOnly?: boolean
|
||||
/** Demo / share: in-memory pool */
|
||||
preloadedPool?: Array<{ payloadId: string; data: DecryptedPerson['data'] }>
|
||||
preloadedSelection?: LogbookCrewSelectionData
|
||||
/** Shared logbook: only people from selection snapshots */
|
||||
selectionOnly?: boolean
|
||||
}
|
||||
|
||||
function snapshotsToPoolList(
|
||||
selection: LogbookCrewSelectionData
|
||||
): Array<{ payloadId: string; data: DecryptedPerson['data'] }> {
|
||||
return Object.values(selection.snapshotsById).map((snap) => ({
|
||||
payloadId: snap.id,
|
||||
data: {
|
||||
name: snap.name,
|
||||
address: snap.address,
|
||||
birthDate: snap.birthDate,
|
||||
phone: snap.phone,
|
||||
nationality: snap.nationality,
|
||||
passportNumber: snap.passportNumber,
|
||||
bloodType: snap.bloodType,
|
||||
allergies: snap.allergies,
|
||||
diseases: snap.diseases,
|
||||
role: snap.role,
|
||||
photo: snap.photo
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
export default function LogbookCrewPicker({
|
||||
logbookId,
|
||||
readOnly = false,
|
||||
preloadedPool,
|
||||
preloadedSelection,
|
||||
selectionOnly = false
|
||||
}: LogbookCrewPickerProps) {
|
||||
const { t } = useTranslation()
|
||||
const [loading, setLoading] = useState(!preloadedSelection)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [pool, setPool] = useState<DecryptedPerson[]>([])
|
||||
const [activeSkipperId, setActiveSkipperId] = useState<string | null>(null)
|
||||
const [activeCrewIds, setActiveCrewIds] = useState<string[]>([])
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const selection =
|
||||
preloadedSelection ??
|
||||
(logbookId === 'demo' ? null : await loadLogbookCrewSelection(logbookId))
|
||||
|
||||
if (selection) {
|
||||
setActiveSkipperId(selection.activeSkipperId)
|
||||
setActiveCrewIds([...selection.activeCrewIds])
|
||||
}
|
||||
|
||||
if (preloadedPool) {
|
||||
setPool(
|
||||
preloadedPool.map((p) => ({
|
||||
payloadId: p.payloadId,
|
||||
data: p.data
|
||||
}))
|
||||
)
|
||||
} else if (selectionOnly && selection) {
|
||||
setPool(snapshotsToPoolList(selection))
|
||||
} else {
|
||||
setPool(await loadPersonPool())
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load crew selection')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [logbookId, preloadedPool, preloadedSelection, selectionOnly])
|
||||
|
||||
useEffect(() => {
|
||||
void loadData()
|
||||
}, [loadData])
|
||||
|
||||
const skippers = useMemo(() => filterSkippers(pool), [pool])
|
||||
const crewMembers = useMemo(() => filterCrew(pool), [pool])
|
||||
|
||||
const toggleCrew = (id: string) => {
|
||||
if (readOnly) return
|
||||
setActiveCrewIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
||||
)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (readOnly || logbookId === 'demo') return
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
setSaved(false)
|
||||
try {
|
||||
await saveLogbookCrewSelectionFromIds(logbookId, activeSkipperId, activeCrewIds)
|
||||
setSaved(true)
|
||||
trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { context: 'logbook_selection' })
|
||||
setTimeout(() => setSaved(false), 3000)
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="tab-placeholder">
|
||||
<Users className="header-logo spin" size={48} />
|
||||
<p>{t('person_pool.loading')}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="crew-dashboard-layout" data-tour="logbook-crew-picker">
|
||||
<div className="form-card">
|
||||
<div className="form-header">
|
||||
<Users size={24} className="form-icon" />
|
||||
<h2>{t('logbook_crew.title')}</h2>
|
||||
</div>
|
||||
<p className="help-text mb-4">{t('logbook_crew.subtitle')}</p>
|
||||
{selectionOnly && <p className="help-text mb-4">{t('logbook_crew.selection_only_hint')}</p>}
|
||||
{error && <div className="auth-error mb-4">{error}</div>}
|
||||
|
||||
<div className="input-group mb-4">
|
||||
<label>{t('logbook_crew.active_skipper')}</label>
|
||||
{skippers.length === 0 ? (
|
||||
<p className="help-text">{t('logbook_crew.no_skippers_in_pool')}</p>
|
||||
) : (
|
||||
<div className="crew-selection-list">
|
||||
{skippers.map((s) => (
|
||||
<label key={s.payloadId} className="crew-selection-item">
|
||||
<input
|
||||
type="radio"
|
||||
name={`skipper-${logbookId}`}
|
||||
checked={activeSkipperId === s.payloadId}
|
||||
onChange={() => !readOnly && setActiveSkipperId(s.payloadId)}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<User size={16} aria-hidden="true" />
|
||||
<span>{s.data.name || t('logbook_crew.unnamed')}</span>
|
||||
</label>
|
||||
))}
|
||||
{!readOnly && (
|
||||
<label className="crew-selection-item">
|
||||
<input
|
||||
type="radio"
|
||||
name={`skipper-${logbookId}`}
|
||||
checked={activeSkipperId === null}
|
||||
onChange={() => setActiveSkipperId(null)}
|
||||
/>
|
||||
<span>{t('logbook_crew.no_skipper')}</span>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="input-group mb-4">
|
||||
<label>{t('logbook_crew.active_crew')}</label>
|
||||
{crewMembers.length === 0 ? (
|
||||
<p className="help-text">{t('logbook_crew.no_crew_in_pool')}</p>
|
||||
) : (
|
||||
<div className="crew-selection-list">
|
||||
{crewMembers.map((c) => (
|
||||
<label key={c.payloadId} className="crew-selection-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={activeCrewIds.includes(c.payloadId)}
|
||||
onChange={() => toggleCrew(c.payloadId)}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<span>{c.data.name || t('logbook_crew.unnamed')}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!readOnly && logbookId !== 'demo' && (
|
||||
<div className="form-actions">
|
||||
{saved && (
|
||||
<div className="success-toast">
|
||||
<Check size={16} />
|
||||
<span>{t('logbook_crew.saved')}</span>
|
||||
</div>
|
||||
)}
|
||||
<button type="button" className="btn primary" onClick={() => void handleSave()} disabled={saving}>
|
||||
<Save size={18} />
|
||||
{t('logbook_crew.save')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function selectionFromSnapshots(
|
||||
snapshotsById: Record<string, PersonSnapshot>
|
||||
): LogbookCrewSelectionData {
|
||||
const snapshots = Object.values(snapshotsById)
|
||||
const skipper = snapshots.find((s) => s.role === 'skipper')
|
||||
return {
|
||||
activeSkipperId: skipper?.id ?? null,
|
||||
activeCrewIds: snapshots.filter((s) => s.role === 'crew').map((s) => s.id),
|
||||
snapshotsById
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,313 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Users, User, Plus, Trash2, Edit2, X, Camera, Save } from 'lucide-react'
|
||||
import { useDialog } from './ModalDialog.tsx'
|
||||
import { resizeImageFile } from '../utils/resizeImageFile.js'
|
||||
import type { PersonData, PersonRole } from '../types/person.js'
|
||||
import { MAX_POOL_CREW_MEMBERS } from '../types/person.js'
|
||||
import {
|
||||
loadPersonPool,
|
||||
savePerson,
|
||||
deletePerson,
|
||||
filterSkippers,
|
||||
filterCrew,
|
||||
type DecryptedPerson
|
||||
} from '../services/personPool.js'
|
||||
import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
|
||||
|
||||
const emptyPerson = (role: PersonRole): PersonData => ({
|
||||
name: '',
|
||||
address: '',
|
||||
birthDate: '',
|
||||
phone: '',
|
||||
nationality: '',
|
||||
passportNumber: '',
|
||||
bloodType: '',
|
||||
allergies: '',
|
||||
diseases: '',
|
||||
role,
|
||||
photo: null
|
||||
})
|
||||
|
||||
export default function PersonPoolForm() {
|
||||
const { t } = useTranslation()
|
||||
const { showConfirm } = useDialog()
|
||||
const [people, setPeople] = useState<DecryptedPerson[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
const [formRole, setFormRole] = useState<PersonRole>('crew')
|
||||
const [form, setForm] = useState<PersonData>(emptyPerson('crew'))
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [photoError, setPhotoError] = useState<string | null>(null)
|
||||
const fileRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
const reload = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
setPeople(await loadPersonPool())
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
void reload()
|
||||
}, [reload])
|
||||
|
||||
const openAdd = (role: PersonRole) => {
|
||||
setEditingId(null)
|
||||
setFormRole(role)
|
||||
setForm(emptyPerson(role))
|
||||
setPhotoError(null)
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
const openEdit = (person: DecryptedPerson) => {
|
||||
setEditingId(person.payloadId)
|
||||
setFormRole(person.data.role)
|
||||
setForm({ ...person.data })
|
||||
setPhotoError(null)
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!form.name.trim()) return
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
const id = editingId ?? window.crypto.randomUUID()
|
||||
await savePerson(id, { ...form, role: formRole }, !editingId)
|
||||
setShowForm(false)
|
||||
trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { role: formRole, context: 'person_pool' })
|
||||
await reload()
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error && err.message === 'MAX_CREW') {
|
||||
setError(t('crew.max_crew'))
|
||||
} else {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save')
|
||||
}
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (
|
||||
!(await showConfirm(
|
||||
t('person_pool.delete_confirm'),
|
||||
t('person_pool.title'),
|
||||
t('logs.confirm_yes'),
|
||||
t('logs.confirm_no')
|
||||
))
|
||||
) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await deletePerson(id)
|
||||
await reload()
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete')
|
||||
}
|
||||
}
|
||||
|
||||
const skippers = filterSkippers(people)
|
||||
const crewList = filterCrew(people)
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="tab-placeholder">
|
||||
<Users className="header-logo spin" size={48} />
|
||||
<p>{t('person_pool.loading')}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderCard = (person: DecryptedPerson) => (
|
||||
<div key={person.payloadId} className="crew-member-card glass">
|
||||
<div className="crew-card-header">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
{person.data.photo ? (
|
||||
<img src={person.data.photo} alt="" className="crew-card-avatar" />
|
||||
) : (
|
||||
<div className="crew-card-avatar-placeholder">
|
||||
<User size={18} />
|
||||
</div>
|
||||
)}
|
||||
<h4>{person.data.name}</h4>
|
||||
</div>
|
||||
<div className="card-actions">
|
||||
<button type="button" className="btn-icon" onClick={() => openEdit(person)} title="Edit">
|
||||
<Edit2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-icon logout"
|
||||
onClick={() => void handleDelete(person.payloadId)}
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{person.data.phone && (
|
||||
<p className="help-text">
|
||||
<strong>{t('crew.phone')}:</strong> {person.data.phone}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<section className="form-card" data-tour="profile-crew-pool">
|
||||
<div className="form-header">
|
||||
<Users size={24} className="form-icon" />
|
||||
<h2>{t('person_pool.title')}</h2>
|
||||
</div>
|
||||
<p className="help-text mb-4">{t('person_pool.subtitle')}</p>
|
||||
{error && <div className="auth-error mb-4">{error}</div>}
|
||||
|
||||
<div className="section-title-bar mb-4">
|
||||
<h3>{t('person_pool.skippers_section')}</h3>
|
||||
{!showForm && (
|
||||
<button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={() => openAdd('skipper')}>
|
||||
<Plus size={16} />
|
||||
{t('person_pool.add_skipper')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{skippers.length === 0 ? (
|
||||
<p className="help-text mb-4">{t('person_pool.no_skippers')}</p>
|
||||
) : (
|
||||
<div className="crew-grid mb-6">{skippers.map(renderCard)}</div>
|
||||
)}
|
||||
|
||||
<div className="section-title-bar mb-4">
|
||||
<h3>{t('person_pool.crew_section')}</h3>
|
||||
{!showForm && crewList.length < MAX_POOL_CREW_MEMBERS && (
|
||||
<button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={() => openAdd('crew')}>
|
||||
<Plus size={16} />
|
||||
{t('person_pool.add_crew')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{crewList.length === 0 ? (
|
||||
<p className="help-text">{t('person_pool.no_crew')}</p>
|
||||
) : (
|
||||
<div className="crew-grid">{crewList.map(renderCard)}</div>
|
||||
)}
|
||||
|
||||
{showForm && (
|
||||
<form onSubmit={(e) => void handleSave(e)} className="member-editor-card glass mt-6">
|
||||
<div className="editor-header mb-4">
|
||||
<h3>
|
||||
{editingId
|
||||
? formRole === 'skipper'
|
||||
? t('person_pool.edit_skipper')
|
||||
: t('crew.edit_crew')
|
||||
: formRole === 'skipper'
|
||||
? t('person_pool.add_skipper')
|
||||
: t('crew.add_crew')}
|
||||
</h3>
|
||||
<button type="button" className="btn-icon" onClick={() => setShowForm(false)}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-grid">
|
||||
<div className="vessel-photo-wrapper">
|
||||
<div className="vessel-photo-preview" onClick={() => fileRef.current?.click()}>
|
||||
{form.photo ? (
|
||||
<img src={form.photo} alt="" className="vessel-photo" />
|
||||
) : (
|
||||
<div className="vessel-photo-placeholder">
|
||||
<User size={48} />
|
||||
</div>
|
||||
)}
|
||||
<div className="vessel-photo-overlay">
|
||||
<Camera size={24} />
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{ display: 'none' }}
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
void resizeImageFile(file)
|
||||
.then((photo) => setForm((f) => ({ ...f, photo })))
|
||||
.catch((err: unknown) => {
|
||||
setPhotoError(err instanceof Error ? err.message : 'Image error')
|
||||
})
|
||||
}}
|
||||
/>
|
||||
{photoError && <div className="auth-error mt-2">{photoError}</div>}
|
||||
</div>
|
||||
<div className="input-group">
|
||||
<label>{t('crew.name')} *</label>
|
||||
<input
|
||||
className="input-text"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group">
|
||||
<label>{t('crew.address')}</label>
|
||||
<input
|
||||
className="input-text"
|
||||
value={form.address}
|
||||
onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group">
|
||||
<label>{t('crew.birthdate')}</label>
|
||||
<input
|
||||
type="date"
|
||||
className="input-text"
|
||||
value={form.birthDate}
|
||||
onChange={(e) => setForm((f) => ({ ...f, birthDate: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group">
|
||||
<label>{t('crew.phone')}</label>
|
||||
<input
|
||||
className="input-text"
|
||||
value={form.phone}
|
||||
onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group">
|
||||
<label>{t('crew.nationality')}</label>
|
||||
<input
|
||||
className="input-text"
|
||||
value={form.nationality}
|
||||
onChange={(e) => setForm((f) => ({ ...f, nationality: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group">
|
||||
<label>{t('crew.passport')}</label>
|
||||
<input
|
||||
className="input-text"
|
||||
value={form.passportNumber}
|
||||
onChange={(e) => setForm((f) => ({ ...f, passportNumber: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="editor-actions mt-4">
|
||||
<button type="submit" className="btn primary" disabled={saving || !form.name.trim()}>
|
||||
<Save size={18} />
|
||||
{t('crew.save_member')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -4,7 +4,11 @@ import { cycleAppLanguage, getNextLanguage, isGermanLocale } from '../utils/i18n
|
||||
import { decryptJson } from '../services/crypto.js'
|
||||
import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
|
||||
import VesselForm from './VesselForm.tsx'
|
||||
import CrewForm from './CrewForm.tsx'
|
||||
import LogbookCrewPicker from './LogbookCrewPicker.tsx'
|
||||
import type { LogbookCrewSelectionData } from '../types/person.js'
|
||||
import { emptyLogbookCrewSelection } from '../types/person.js'
|
||||
import { personToSnapshot } from '../utils/personSnapshots.js'
|
||||
import type { PersonData } from '../types/person.js'
|
||||
import LogEntriesList from './LogEntriesList.tsx'
|
||||
import { Ship, Users, FileText, Lock, AlertCircle, Globe } from 'lucide-react'
|
||||
|
||||
@@ -31,7 +35,10 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
|
||||
// Logbook data states
|
||||
const [logbookTitle, setLogbookTitle] = useState('Logbook')
|
||||
const [yacht, setYacht] = useState<any>(null)
|
||||
const [crews, setCrews] = useState<any[]>([])
|
||||
const [logbookCrewSelection, setLogbookCrewSelection] = useState<LogbookCrewSelectionData>(
|
||||
emptyLogbookCrewSelection()
|
||||
)
|
||||
const [legacyCrews, setLegacyCrews] = useState<any[]>([])
|
||||
const [entries, setEntries] = useState<any[]>([])
|
||||
const [photos, setPhotos] = useState<any[]>([])
|
||||
const [gpsTracks, setGpsTracks] = useState<any[]>([])
|
||||
@@ -71,18 +78,53 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
|
||||
}
|
||||
setYacht(decYacht)
|
||||
|
||||
// Decrypt Crews
|
||||
const decCrews = []
|
||||
if (data.crews) {
|
||||
for (const c of data.crews) {
|
||||
const dec = await decryptJson(c.encryptedData, c.iv, c.tag, keyBuffer)
|
||||
decCrews.push({
|
||||
payloadId: c.payloadId,
|
||||
data: dec
|
||||
if (data.logbookCrewSelection) {
|
||||
const decSel = await decryptJson(
|
||||
data.logbookCrewSelection.encryptedData,
|
||||
data.logbookCrewSelection.iv,
|
||||
data.logbookCrewSelection.tag,
|
||||
keyBuffer
|
||||
)
|
||||
if (decSel) {
|
||||
setLogbookCrewSelection({
|
||||
activeSkipperId: decSel.activeSkipperId ?? null,
|
||||
activeCrewIds: Array.isArray(decSel.activeCrewIds) ? decSel.activeCrewIds : [],
|
||||
snapshotsById:
|
||||
decSel.snapshotsById && typeof decSel.snapshotsById === 'object'
|
||||
? decSel.snapshotsById
|
||||
: {}
|
||||
})
|
||||
}
|
||||
}
|
||||
setCrews(decCrews)
|
||||
|
||||
const decCrews: Array<{ payloadId: string; data: PersonData }> = []
|
||||
if (data.crews) {
|
||||
for (const c of data.crews) {
|
||||
const dec = await decryptJson(c.encryptedData, c.iv, c.tag, keyBuffer)
|
||||
if (dec) {
|
||||
decCrews.push({
|
||||
payloadId: c.payloadId,
|
||||
data: dec as PersonData
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
setLegacyCrews(decCrews)
|
||||
|
||||
if (!data.logbookCrewSelection && decCrews.length > 0) {
|
||||
const snapshotsById: LogbookCrewSelectionData['snapshotsById'] = {}
|
||||
let activeSkipperId: string | null = null
|
||||
const activeCrewIds: string[] = []
|
||||
for (const c of decCrews) {
|
||||
snapshotsById[c.payloadId] = personToSnapshot(c.payloadId, c.data)
|
||||
if (c.payloadId === 'skipper' || c.data.role === 'skipper') {
|
||||
activeSkipperId = c.payloadId
|
||||
} else {
|
||||
activeCrewIds.push(c.payloadId)
|
||||
}
|
||||
}
|
||||
setLogbookCrewSelection({ activeSkipperId, activeCrewIds, snapshotsById })
|
||||
}
|
||||
|
||||
// Decrypt Entries
|
||||
const decEntries = []
|
||||
@@ -234,10 +276,12 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
|
||||
)}
|
||||
|
||||
{activeTab === 'crew' && (
|
||||
<CrewForm
|
||||
<LogbookCrewPicker
|
||||
logbookId="shared"
|
||||
readOnly={true}
|
||||
preloadedData={crews}
|
||||
selectionOnly={true}
|
||||
preloadedPool={legacyCrews.length > 0 ? legacyCrews : undefined}
|
||||
preloadedSelection={logbookCrewSelection}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
|
||||
@@ -30,6 +30,7 @@ import {
|
||||
} from 'lucide-react'
|
||||
import AccountDangerZone from './AccountDangerZone.tsx'
|
||||
import UserProfilePreferences from './UserProfilePreferences.tsx'
|
||||
import PersonPoolForm from './PersonPoolForm.tsx'
|
||||
import BetaBadge from './BetaBadge.tsx'
|
||||
import { useDialog } from './ModalDialog.tsx'
|
||||
import {
|
||||
@@ -487,6 +488,8 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
|
||||
<UserProfilePreferences userId={profile.userId} />
|
||||
</div>
|
||||
|
||||
<PersonPoolForm />
|
||||
|
||||
<section className="member-editor-card glass">
|
||||
<div className="profile-section-header">
|
||||
<Shield size={20} />
|
||||
|
||||
Reference in New Issue
Block a user