feat: add per-item currency support with server-side exchange rate conversion

Author: BKSalman

client/src/api/client.ts

@@ -207,6 +207,7 @@ export const budgetApi = {
   togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
   settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
+  refreshRates: (tripId: number | string) => apiClient.post(`/trips/${tripId}/budget/refresh-rates`).then(r => r.data),
 }
 
 export const filesApi = {

client/src/components/Budget/BudgetPanel.tsx

@@ -4,7 +4,7 @@ import DOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download } from 'lucide-react'
+import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download, RefreshCw } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
 import { budgetApi } from '../../api/client'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -101,22 +101,27 @@ function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder
 
 // ── Add Item Row ─────────────────────────────────────────────────────────────
 interface AddItemRowProps {
-  onAdd: (data: { name: string; total_price: number; persons: number | null; days: number | null; note: string | null; expense_date: string | null }) => void
+  onAdd: (data: { name: string; total_price: number; item_currency: string; persons: number | null; days: number | null; note: string | null; expense_date: string | null }) => void
   t: (key: string) => string
+  baseCurrency: string
 }
 
-function AddItemRow({ onAdd, t }: AddItemRowProps) {
+function AddItemRow({ onAdd, t, baseCurrency }: AddItemRowProps) {
   const [name, setName] = useState('')
   const [price, setPrice] = useState('')
+  const [itemCur, setItemCur] = useState(baseCurrency)
   const [persons, setPersons] = useState('')
   const [days, setDays] = useState('')
   const [note, setNote] = useState('')
   const [expenseDate, setExpenseDate] = useState('')
   const nameRef = useRef(null)
 
+  // Keep the default currency in sync with the trip's base currency
+  useEffect(() => { setItemCur(baseCurrency) }, [baseCurrency])
+
   const handleAdd = () => {
     if (!name.trim()) return
-    onAdd({ name: name.trim(), total_price: parseFloat(String(price).replace(',', '.')) || 0, persons: parseInt(persons) || null, days: parseInt(days) || null, note: note.trim() || null, expense_date: expenseDate || null })
+    onAdd({ name: name.trim(), total_price: parseFloat(String(price).replace(',', '.')) || 0, item_currency: itemCur, persons: parseInt(persons) || null, days: parseInt(days) || null, note: note.trim() || null, expense_date: expenseDate || null })
     setName(''); setPrice(''); setPersons(''); setDays(''); setNote(''); setExpenseDate('')
     setTimeout(() => nameRef.current?.focus(), 50)
   }
@@ -130,8 +135,20 @@ function AddItemRow({ onAdd, t }: AddItemRowProps) {
           placeholder={t('budget.newEntry')} style={inp} />
       </td>
       <td style={{ padding: '4px 6px' }}>
-        <input value={price} onChange={e => setPrice(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
-          placeholder="0,00" inputMode="decimal" style={{ ...inp, textAlign: 'center' }} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          <input value={price} onChange={e => setPrice(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
+            placeholder="0,00" inputMode="decimal" style={{ ...inp, textAlign: 'center', flex: 1, minWidth: 50 }} />
+          <div style={{ flexShrink: 0, width: 76 }}>
+            <CustomSelect
+              value={itemCur}
+              onChange={setItemCur}
+              options={CURRENCIES.map(c => ({ value: c, label: c }))}
+              searchable
+              size="sm"
+              style={{ fontSize: 11 }}
+            />
+          </div>
+        </div>
       </td>
       <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
         <input value={persons} onChange={e => setPersons(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
@@ -422,13 +439,14 @@ interface BudgetPanelProps {
 }
 
 export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelProps) {
-  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid } = useTripStore()
+  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid, refreshBudgetRates } = useTripStore()
   const can = useCanDo()
   const { t, locale } = useTranslation()
   const [newCategoryName, setNewCategoryName] = useState('')
   const [editingCat, setEditingCat] = useState(null) // { name, value }
   const [settlement, setSettlement] = useState<{ balances: any[]; flows: any[] } | null>(null)
   const [settlementOpen, setSettlementOpen] = useState(false)
+  const [refreshingRates, setRefreshingRates] = useState(false)
   const currency = trip?.currency || 'EUR'
   const canEdit = can('budget_edit', trip)
 
@@ -441,8 +459,20 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
     budgetApi.settlement(tripId).then(setSettlement).catch(() => {})
   }, [tripId, budgetItems, hasMultipleMembers])
 
-  const setCurrency = (cur) => {
-    if (tripId) updateTrip(tripId, { currency: cur })
+  const setCurrency = async (cur) => {
+    if (!tripId) return
+    setRefreshingRates(true)
+    try {
+      await updateTrip(tripId, { currency: cur })
+      await loadBudgetItems(tripId)
+    } finally {
+      setRefreshingRates(false)
+    }
+  }
+
+  const handleRefreshRates = async () => {
+    setRefreshingRates(true)
+    try { await refreshBudgetRates(tripId) } finally { setRefreshingRates(false) }
   }
 
   useEffect(() => { if (tripId) loadBudgetItems(tripId) }, [tripId])
@@ -455,17 +485,19 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   }, {}), [budgetItems])
 
   const categoryNames = Object.keys(grouped)
-  const grandTotal = (budgetItems || []).reduce((s, i) => s + (i.total_price || 0), 0)
+  const grandTotal = (budgetItems || []).reduce((s, i) => s + (i.converted_price ?? i.total_price ?? 0), 0)
+  // Check if any item uses a different currency than the trip base
+  const hasMultipleCurrencies = (budgetItems || []).some(i => i.item_currency && i.item_currency.toUpperCase() !== currency.toUpperCase())
 
   const pieSegments = useMemo(() =>
     categoryNames.map((cat, i) => ({
       name: cat,
-      value: grouped[cat].reduce((s, x) => s + (x.total_price || 0), 0),
+      value: grouped[cat].reduce((s, x) => s + (x.converted_price ?? x.total_price ?? 0), 0),
       color: PIE_COLORS[i % PIE_COLORS.length],
     })).filter(s => s.value > 0)
   , [grouped, categoryNames])
 
-  const handleAddItem = async (category, data) => { try { await addBudgetItem(tripId, { ...data, category }) } catch {} }
+  const handleAddItem = async (category, data) => { try { await addBudgetItem(tripId, { ...data, category }); } catch {} }
   const handleUpdateField = async (id, field, value) => { try { await updateBudgetItem(tripId, id, { [field]: value }) } catch {} }
   const handleDeleteItem = async (id) => { try { await deleteBudgetItem(tripId, id) } catch {} }
   const handleDeleteCategory = async (cat) => {
@@ -564,7 +596,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
         <div style={{ flex: 1, minWidth: 0 }}>
           {categoryNames.map((cat, ci) => {
             const items = grouped[cat]
-            const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
+            const subtotal = items.reduce((s, x) => s + (x.converted_price ?? x.total_price ?? 0), 0)
             const color = PIE_COLORS[ci % PIE_COLORS.length]
 
             return (
@@ -624,9 +656,10 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                     </thead>
                     <tbody>
                       {items.map(item => {
-                        const pp = calcPP(item.total_price, item.persons)
-                        const pd = calcPD(item.total_price, item.days)
-                        const ppd = calcPPD(item.total_price, item.persons, item.days)
+                        const effectivePrice = item.converted_price ?? item.total_price ?? 0
+                        const pp = calcPP(effectivePrice, item.persons)
+                        const pd = calcPD(effectivePrice, item.days)
+                        const ppd = calcPPD(effectivePrice, item.persons, item.days)
                         const hasMembers = item.members?.length > 0
                         return (
                           <tr key={item.id} style={{ transition: 'background 0.1s' }}
@@ -649,7 +682,32 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                               )}
                             </td>
                             <td style={{ ...td, textAlign: 'center' }}>
-                              <InlineEditCell value={item.total_price} type="number" decimals={currencyDecimals(currency)} onSave={v => handleUpdateField(item.id, 'total_price', v)} style={{ textAlign: 'center' }} placeholder={currencyDecimals(currency) === 0 ? '0' : '0,00'} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
+                              <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                                <div style={{ flex: 1, minWidth: 0 }}>
+                                  <InlineEditCell value={item.total_price} type="number" decimals={currencyDecimals(item.item_currency || currency)} onSave={v => handleUpdateField(item.id, 'total_price', v)} style={{ textAlign: 'center' }} placeholder={currencyDecimals(item.item_currency || currency) === 0 ? '0' : '0,00'} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
+                                  {item.item_currency && item.item_currency.toUpperCase() !== currency.toUpperCase() && (
+                                    item.converted_price != null ? (
+                                      <div style={{ fontSize: 10, color: 'var(--text-faint)', textAlign: 'center', lineHeight: 1.2, marginTop: -2 }}>
+                                        {'≈ ' + fmtNum(item.converted_price, locale, currency)}
+                                      </div>
+                                    ) : (
+                                      <div style={{ fontSize: 9, color: '#d97706', textAlign: 'center', lineHeight: 1.2, marginTop: -2 }} title={t('budget.noRate')}>
+                                        ⚠ {t('budget.noRate')}
+                                      </div>
+                                    )
+                                  )}
+                                </div>
+                                <div style={{ flexShrink: 0, width: 76 }}>
+                                  <CustomSelect
+                                    value={item.item_currency || currency}
+                                    onChange={v => handleUpdateField(item.id, 'item_currency', v)}
+                                    options={CURRENCIES.map(c => ({ value: c, label: c }))}
+                                    searchable
+                                    size="sm"
+                                    style={{ fontSize: 10 }}
+                                  />
+                                </div>
+                              </div>
                             </td>
                             <td className="hidden sm:table-cell" style={{ ...td, textAlign: 'center', position: 'relative' }}>
                               {hasMultipleMembers ? (
@@ -692,7 +750,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                           </tr>
                         )
                       })}
-                      {canEdit && <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} />}
+                      {canEdit && <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} baseCurrency={currency} />}
                     </tbody>
                   </table>
                 </div>
@@ -712,6 +770,23 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
             />
           </div>
 
+          {hasMultipleCurrencies && (
+            <button onClick={handleRefreshRates} disabled={refreshingRates}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 6, width: '100%', justifyContent: 'center',
+                padding: '7px 12px', marginBottom: 12, borderRadius: 10, fontSize: 11, fontWeight: 500,
+                fontFamily: 'inherit', cursor: refreshingRates ? 'wait' : 'pointer',
+                border: '1px solid var(--border-primary)', background: 'var(--bg-secondary)',
+                color: 'var(--text-muted)', transition: 'background 0.15s',
+              }}
+              onMouseEnter={e => { if (!refreshingRates) e.currentTarget.style.background = 'var(--bg-hover)' }}
+              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
+            >
+              <RefreshCw size={12} style={refreshingRates ? { animation: 'spin 1s linear infinite' } : {}} />
+              {t('budget.refreshRates')}
+            </button>
+          )}
+
           {canEdit && (
             <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
               <input

client/src/i18n/translations/ar.ts

@@ -964,6 +964,14 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'budget.settlement': 'التسوية',
   'budget.settlementInfo': 'انقر على صورة العضو في بند الميزانية لتحديده باللون الأخضر — وهذا يعني أنه دفع. ثم تُظهر التسوية من يدين لمن وبكم.',
   'budget.netBalances': 'الأرصدة الصافية',
+  'budget.itemCurrency': 'عملة العنصر',
+  'budget.convertedAmount': 'المبلغ المحول',
+  'budget.baseCurrency': 'العملة الأساسية',
+  'budget.refreshRates': 'تحديث أسعار الصرف',
+  'budget.noRate': 'لا يوجد سعر صرف',
+  'budget.ratesUpdated': 'تم تحديث الأسعار',
+  'budget.ratesFailed': 'تعذر جلب أسعار الصرف',
+  'budget.approximateConversion': '≈ محول من {currency}',
 
   // Files
   'files.title': 'الملفات',

client/src/i18n/translations/br.ts

@@ -945,6 +945,14 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'budget.settlement': 'Acerto',
   'budget.settlementInfo': 'Clique no avatar de um membro em um item do orçamento para marcá-lo em verde — significa que ele pagou. O acerto mostra quem deve quanto a quem.',
   'budget.netBalances': 'Saldos líquidos',
+  'budget.itemCurrency': 'Moeda do item',
+  'budget.convertedAmount': 'Valor convertido',
+  'budget.baseCurrency': 'Moeda base',
+  'budget.refreshRates': 'Atualizar taxas de câmbio',
+  'budget.noRate': 'Taxa não disponível',
+  'budget.ratesUpdated': 'Taxas atualizadas',
+  'budget.ratesFailed': 'Não foi possível obter as taxas de câmbio',
+  'budget.approximateConversion': '≈ convertido de {currency}',
 
   // Files
   'files.title': 'Arquivos',

client/src/i18n/translations/cs.ts

@@ -964,6 +964,14 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'budget.settlement': 'Vyúčtování',
   'budget.settlementInfo': 'Klikněte na avatar člena u rozpočtové položky pro zelené označení – to znamená, že zaplatil. Vyúčtování pak ukazuje, kdo komu a kolik dluží.',
   'budget.netBalances': 'Čisté zůstatky',
+  'budget.itemCurrency': 'Měna položky',
+  'budget.convertedAmount': 'Převedená částka',
+  'budget.baseCurrency': 'Základní měna',
+  'budget.refreshRates': 'Obnovit směnné kurzy',
+  'budget.noRate': 'Kurz není k dispozici',
+  'budget.ratesUpdated': 'Kurzy aktualizovány',
+  'budget.ratesFailed': 'Nepodařilo se získat směnné kurzy',
+  'budget.approximateConversion': '≈ převedeno z {currency}',
 
   // Soubory (Files)
   'files.title': 'Soubory',

client/src/i18n/translations/de.ts

@@ -961,6 +961,14 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'budget.settlement': 'Ausgleich',
   'budget.settlementInfo': 'Klicke auf ein Mitglied-Bild bei einem Eintrag, um es grün zu markieren — das bedeutet, diese Person hat bezahlt. Der Ausgleich zeigt dann, wer wem wie viel schuldet.',
   'budget.netBalances': 'Netto-Salden',
+  'budget.itemCurrency': 'Artikelwährung',
+  'budget.convertedAmount': 'Umgerechneter Betrag',
+  'budget.baseCurrency': 'Basiswährung',
+  'budget.refreshRates': 'Wechselkurse aktualisieren',
+  'budget.noRate': 'Kein Kurs verfügbar',
+  'budget.ratesUpdated': 'Kurse aktualisiert',
+  'budget.ratesFailed': 'Wechselkurse konnten nicht abgerufen werden',
+  'budget.approximateConversion': '≈ umgerechnet von {currency}',
 
   // Files
   'files.title': 'Dateien',

client/src/i18n/translations/en.ts

@@ -958,6 +958,14 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'budget.settlement': 'Settlement',
   'budget.settlementInfo': 'Click a member avatar on a budget item to mark them green — this means they paid. The settlement then shows who owes whom and how much.',
   'budget.netBalances': 'Net Balances',
+  'budget.itemCurrency': 'Item Currency',
+  'budget.convertedAmount': 'Converted Amount',
+  'budget.baseCurrency': 'Base Currency',
+  'budget.refreshRates': 'Refresh Exchange Rates',
+  'budget.noRate': 'No rate available',
+  'budget.ratesUpdated': 'Rates updated',
+  'budget.ratesFailed': 'Could not fetch exchange rates',
+  'budget.approximateConversion': '≈ converted from {currency}',
 
   // Files
   'files.title': 'Files',

client/src/i18n/translations/es.ts

@@ -921,6 +921,14 @@ const es: Record<string, string> = {
   'budget.settlement': 'Liquidación',
   'budget.settlementInfo': 'Haz clic en el avatar de un miembro en una partida del presupuesto para marcarlo en verde — esto significa que ha pagado. La liquidación muestra quién debe cuánto a quién.',
   'budget.netBalances': 'Saldos netos',
+  'budget.itemCurrency': 'Moneda del artículo',
+  'budget.convertedAmount': 'Monto convertido',
+  'budget.baseCurrency': 'Moneda base',
+  'budget.refreshRates': 'Actualizar tasas de cambio',
+  'budget.noRate': 'Tasa no disponible',
+  'budget.ratesUpdated': 'Tasas actualizadas',
+  'budget.ratesFailed': 'No se pudieron obtener las tasas de cambio',
+  'budget.approximateConversion': '≈ convertido de {currency}',
 
   // Files
   'files.title': 'Archivos',

client/src/i18n/translations/fr.ts

@@ -960,6 +960,14 @@ const fr: Record<string, string> = {
   'budget.settlement': 'Règlement',
   'budget.settlementInfo': 'Cliquez sur l\'avatar d\'un membre sur un poste budgétaire pour le marquer en vert — cela signifie qu\'il a payé. Le règlement indique ensuite qui doit combien à qui.',
   'budget.netBalances': 'Soldes nets',
+  'budget.itemCurrency': "Devise de l'article",
+  'budget.convertedAmount': 'Montant converti',
+  'budget.baseCurrency': 'Devise de base',
+  'budget.refreshRates': 'Actualiser les taux de change',
+  'budget.noRate': 'Taux non disponible',
+  'budget.ratesUpdated': 'Taux mis à jour',
+  'budget.ratesFailed': 'Impossible de récupérer les taux de change',
+  'budget.approximateConversion': '≈ converti de {currency}',
 
   // Files
   'files.title': 'Fichiers',