mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 21:31:46 +00:00
Maurice
c15c89ca61
Replace the inline price + budget-category fields in the Transport and Reservation booking modals with a "Create expense" flow: the modal saves the booking, then opens the full Costs editor prefilled (name + category mapped from the booking type) and linked to the reservation. A booking with a linked expense shows it inline with edit / remove. Also fix the Costs editor so an expense with a recorded total but no payers (transport-derived or pre-rework items) opens with its amount, lets you set the currency, and saves - it previously showed 0 everywhere and could not be saved. Legacy / localized categories now map to the fixed keys, and changing a booking's type keeps its linked expense category in sync (unless it was manually set). - shared: reservation_id on budget create, typeToCostCategory helper, i18n keys - server: createBudgetItem stores reservation_id; keep total_price for payerless items; a booking update no longer wipes its linked expense and syncs the category on type change - client: shared BookingCostsSection, exported ExpenseModal with prefill and an editable total, page-level save-then-open wiring
62 lines
3.6 KiB
TypeScript
62 lines
3.6 KiB
TypeScript
import { Plus, Pencil, Trash2 } from 'lucide-react'
|
|
import { useTripStore } from '../../store/tripStore'
|
|
import { useSettingsStore } from '../../store/settingsStore'
|
|
import { useTranslation } from '../../i18n'
|
|
import { formatMoney } from '../../utils/formatters'
|
|
import { catMeta } from '../Budget/costsCategories'
|
|
import type { BudgetItem } from '../../types'
|
|
|
|
/**
|
|
* The Costs block inside a booking modal. Replaces the old inline price + budget
|
|
* category fields: when no expense is linked yet it offers a "create expense"
|
|
* button (the modal saves the booking first, then opens the full Costs editor);
|
|
* once linked it shows the expense with edit / remove actions.
|
|
*/
|
|
export function BookingCostsSection({ reservationId, onCreate, onEdit, onRemove }: {
|
|
reservationId: number | null
|
|
onCreate: () => void
|
|
onEdit: (item: BudgetItem) => void
|
|
onRemove: (item: BudgetItem) => void
|
|
}) {
|
|
const { t, locale } = useTranslation()
|
|
const budgetItems = useTripStore(s => s.budgetItems)
|
|
const trip = useTripStore(s => s.trip)
|
|
const displayCurrency = useSettingsStore(s => s.settings.default_currency)
|
|
const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
|
|
const linked = reservationId ? budgetItems.find(i => i.reservation_id === reservationId) : null
|
|
|
|
const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
|
|
|
|
if (linked) {
|
|
const meta = catMeta(linked.category)
|
|
const Icon = meta.Icon
|
|
return (
|
|
<div>
|
|
<label className={labelCls}>{t('reservations.linkedExpense')}</label>
|
|
<div className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10 }}>
|
|
<span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: meta.color + '22', color: meta.color, flexShrink: 0 }}><Icon size={14} /></span>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div className="text-content" style={{ fontSize: 14, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.name}</div>
|
|
<div className="text-content-faint" style={{ fontSize: 12 }}>{t(meta.labelKey)}</div>
|
|
</div>
|
|
<span className="text-content" style={{ fontSize: 14, fontWeight: 700, flexShrink: 0 }}>{formatMoney(linked.total_price, linked.currency || base, locale)}</span>
|
|
<button type="button" onClick={() => onEdit(linked)} title={t('common.edit')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Pencil size={13} /></button>
|
|
<button type="button" onClick={() => onRemove(linked)} title={t('reservations.removeExpense')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Trash2 size={13} /></button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<label className={labelCls}>{t('reservations.costsLabel')}</label>
|
|
<button type="button" onClick={onCreate}
|
|
className="bg-surface-secondary border border-edge text-content"
|
|
style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px 13px', borderRadius: 10, fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
|
|
<Plus size={15} /> {t('reservations.createExpense')}
|
|
</button>
|
|
<div className="text-content-faint" style={{ fontSize: 11, marginTop: 6 }}>{t('reservations.createExpenseHint')}</div>
|
|
</div>
|
|
)
|
|
}
|