Initial commit — NOMAD (Navigation Organizer for Maps, Activities & Destinations)

Self-hosted travel planner with Express.js, SQLite, React & Tailwind CSS.

client/src/components/Trips/TripFormModal.jsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect, useRef } from 'react'
+import Modal from '../shared/Modal'
+import { Calendar, Camera, X } from 'lucide-react'
+import { tripsApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+
+export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUpdate }) {
+  const isEditing = !!trip
+  const fileRef = useRef(null)
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    start_date: '',
+    end_date: '',
+  })
+  const [error, setError] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [coverPreview, setCoverPreview] = useState(null)
+  const [uploadingCover, setUploadingCover] = useState(false)
+
+  useEffect(() => {
+    if (trip) {
+      setFormData({
+        title: trip.title || '',
+        description: trip.description || '',
+        start_date: trip.start_date || '',
+        end_date: trip.end_date || '',
+      })
+      setCoverPreview(trip.cover_image || null)
+    } else {
+      setFormData({ title: '', description: '', start_date: '', end_date: '' })
+      setCoverPreview(null)
+    }
+    setError('')
+  }, [trip, isOpen])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    if (!formData.title.trim()) { setError(t('dashboard.titleRequired')); return }
+    if (formData.start_date && formData.end_date && new Date(formData.end_date) < new Date(formData.start_date)) {
+      setError(t('dashboard.endDateError')); return
+    }
+    setIsLoading(true)
+    try {
+      await onSave({
+        title: formData.title.trim(),
+        description: formData.description.trim() || null,
+        start_date: formData.start_date || null,
+        end_date: formData.end_date || null,
+      })
+      onClose()
+    } catch (err) {
+      setError(err.message || t('places.saveError'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCoverChange = async (e) => {
+    const file = e.target.files?.[0]
+    if (!file || !trip?.id) return
+    setUploadingCover(true)
+    try {
+      const fd = new FormData()
+      fd.append('cover', file)
+      const data = await tripsApi.uploadCover(trip.id, fd)
+      setCoverPreview(data.cover_image)
+      onCoverUpdate?.(trip.id, data.cover_image)
+      toast.success(t('dashboard.coverSaved'))
+    } catch {
+      toast.error(t('dashboard.coverUploadError'))
+    } finally {
+      setUploadingCover(false)
+      e.target.value = ''
+    }
+  }
+
+  const handleRemoveCover = async () => {
+    if (!trip?.id) return
+    try {
+      await tripsApi.update(trip.id, { cover_image: null })
+      setCoverPreview(null)
+      onCoverUpdate?.(trip.id, null)
+    } catch {
+      toast.error(t('dashboard.coverRemoveError'))
+    }
+  }
+
+  const update = (field, value) => setFormData(prev => ({ ...prev, [field]: value }))
+
+  const inputCls = "w-full px-3 py-2.5 border border-slate-200 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:border-transparent text-sm"
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEditing ? t('dashboard.editTrip') : t('dashboard.createTrip')}
+      size="md"
+      footer={
+        <div className="flex gap-3 justify-end">
+          <button type="button" onClick={onClose}
+            className="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
+            {t('common.cancel')}
+          </button>
+          <button onClick={handleSubmit} disabled={isLoading}
+            className="px-4 py-2 text-sm bg-slate-900 hover:bg-slate-700 disabled:bg-slate-400 text-white rounded-lg transition-colors flex items-center gap-2">
+            {isLoading
+              ? <><div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />{t('common.saving')}</>
+              : isEditing ? t('common.update') : t('dashboard.createTrip')}
+          </button>
+        </div>
+      }
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">{error}</div>
+        )}
+
+        {/* Cover image — only for existing trips */}
+        {isEditing && (
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.coverImage')}</label>
+            <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleCoverChange} />
+            {coverPreview ? (
+              <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', height: 130 }}>
+                <img src={coverPreview} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                <div style={{ position: 'absolute', bottom: 8, right: 8, display: 'flex', gap: 6 }}>
+                  <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
+                    style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '5px 10px', borderRadius: 8, background: 'rgba(0,0,0,0.55)', border: 'none', color: 'white', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', backdropFilter: 'blur(4px)' }}>
+                    <Camera size={12} /> {uploadingCover ? t('common.uploading') : t('common.change')}
+                  </button>
+                  <button type="button" onClick={handleRemoveCover}
+                    style={{ display: 'flex', alignItems: 'center', padding: '5px 8px', borderRadius: 8, background: 'rgba(0,0,0,0.55)', border: 'none', color: 'white', cursor: 'pointer', backdropFilter: 'blur(4px)' }}>
+                    <X size={12} />
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
+                style={{ width: '100%', padding: '18px', border: '2px dashed #e5e7eb', borderRadius: 10, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: '#9ca3af', fontFamily: 'inherit' }}
+                onMouseEnter={e => { e.currentTarget.style.borderColor = '#d1d5db'; e.currentTarget.style.color = '#6b7280' }}
+                onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#9ca3af' }}>
+                <Camera size={15} /> {uploadingCover ? t('common.uploading') : t('dashboard.addCoverImage')}
+              </button>
+            )}
+          </div>
+        )}
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">
+            {t('dashboard.tripTitle')} <span className="text-red-500">*</span>
+          </label>
+          <input type="text" value={formData.title} onChange={e => update('title', e.target.value)}
+            required placeholder={t('dashboard.tripTitlePlaceholder')} className={inputCls} />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('dashboard.tripDescription')}</label>
+          <textarea value={formData.description} onChange={e => update('description', e.target.value)}
+            placeholder={t('dashboard.tripDescriptionPlaceholder')} rows={3}
+            className={`${inputCls} resize-none`} />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">
+              <Calendar className="inline w-4 h-4 mr-1" />{t('dashboard.startDate')}
+            </label>
+            <CustomDatePicker value={formData.start_date} onChange={v => update('start_date', v)} placeholder="Start" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">
+              <Calendar className="inline w-4 h-4 mr-1" />{t('dashboard.endDate')}
+            </label>
+            <CustomDatePicker value={formData.end_date} onChange={v => update('end_date', v)} placeholder="End" />
+          </div>
+        </div>
+
+        {!formData.start_date && !formData.end_date && (
+          <p className="text-xs text-slate-400 bg-slate-50 rounded-lg p-3">
+            {t('dashboard.noDateHint')}
+          </p>
+        )}
+      </form>
+    </Modal>
+  )
+}

client/src/components/Trips/TripMembersModal.jsx

@@ -0,0 +1,221 @@
+import React, { useState, useEffect } from 'react'
+import Modal from '../shared/Modal'
+import { tripsApi, authApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import { useAuthStore } from '../../store/authStore'
+import { Crown, UserMinus, UserPlus, Users, LogOut } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import CustomSelect from '../shared/CustomSelect'
+
+function Avatar({ username, avatarUrl, size = 32 }) {
+  if (avatarUrl) {
+    return <img src={avatarUrl} alt="" style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
+  }
+  const letter = (username || '?')[0].toUpperCase()
+  const colors = ['#3b82f6', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#ef4444', '#06b6d4']
+  const color = colors[letter.charCodeAt(0) % colors.length]
+  return (
+    <div style={{
+      width: size, height: size, borderRadius: '50%', background: color,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      fontSize: size * 0.4, fontWeight: 700, color: 'white', flexShrink: 0,
+    }}>
+      {letter}
+    </div>
+  )
+}
+
+export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }) {
+  const [data, setData] = useState(null)
+  const [allUsers, setAllUsers] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [selectedUserId, setSelectedUserId] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [removingId, setRemovingId] = useState(null)
+  const toast = useToast()
+  const { user } = useAuthStore()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (isOpen && tripId) {
+      loadMembers()
+      loadAllUsers()
+    }
+  }, [isOpen, tripId])
+
+  const loadMembers = async () => {
+    setLoading(true)
+    try {
+      const d = await tripsApi.getMembers(tripId)
+      setData(d)
+    } catch {
+      toast.error(t('members.loadError'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadAllUsers = async () => {
+    try {
+      const d = await authApi.listUsers()
+      setAllUsers(d.users)
+    } catch {}
+  }
+
+  const handleAdd = async () => {
+    if (!selectedUserId) return
+    setAdding(true)
+    try {
+      const target = allUsers.find(u => String(u.id) === String(selectedUserId))
+      await tripsApi.addMember(tripId, target.username)
+      setSelectedUserId('')
+      await loadMembers()
+      toast.success(`${target.username} ${t('members.added')}`)
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('members.addError'))
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  const handleRemove = async (userId, isSelf) => {
+    const msg = isSelf
+      ? t('members.confirmLeave')
+      : t('members.confirmRemove')
+    if (!confirm(msg)) return
+    setRemovingId(userId)
+    try {
+      await tripsApi.removeMember(tripId, userId)
+      if (isSelf) { onClose(); window.location.reload() }
+      else { await loadMembers(); toast.success(t('members.removed')) }
+    } catch {
+      toast.error(t('members.removeError'))
+    } finally {
+      setRemovingId(null)
+    }
+  }
+
+  // Users not yet in the trip
+  const existingIds = new Set([
+    data?.owner?.id,
+    ...(data?.members?.map(m => m.id) || []),
+  ])
+  const availableUsers = allUsers.filter(u => !existingIds.has(u.id))
+
+  const isCurrentOwner = data?.owner?.id === user?.id
+  const allMembers = data ? [
+    { ...data.owner, role: 'owner' },
+    ...data.members,
+  ] : []
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t('members.shareTrip')} size="sm">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+
+        {/* Trip name */}
+        <div style={{ padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: 10, border: '1px solid var(--border-secondary)' }}>
+          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>{t('nav.trip')}</div>
+          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{tripTitle}</div>
+        </div>
+
+        {/* Add member dropdown */}
+        <div>
+          <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 8 }}>
+            {t('members.inviteUser')}
+          </label>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <CustomSelect
+              value={selectedUserId}
+              onChange={value => setSelectedUserId(value)}
+              placeholder={t('members.selectUser')}
+              options={[
+                { value: '', label: t('members.selectUser') },
+                ...availableUsers.map(u => ({
+                  value: u.id,
+                  label: u.username,
+                })),
+              ]}
+              searchable
+              style={{ flex: 1 }}
+              size="sm"
+            />
+            <button
+              onClick={handleAdd}
+              disabled={adding || !selectedUserId}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 5, padding: '8px 14px',
+                background: 'var(--accent)', color: 'white', border: 'none', borderRadius: 10,
+                fontSize: 13, fontWeight: 600, cursor: adding || !selectedUserId ? 'default' : 'pointer',
+                fontFamily: 'inherit', opacity: adding || !selectedUserId ? 0.4 : 1, flexShrink: 0,
+              }}
+            >
+              <UserPlus size={13} /> {adding ? '…' : t('members.invite')}
+            </button>
+          </div>
+          {availableUsers.length === 0 && allUsers.length > 0 && (
+            <p style={{ fontSize: 11.5, color: 'var(--text-faint)', margin: '6px 0 0' }}>{t('members.allHaveAccess')}</p>
+          )}
+        </div>
+
+        {/* Members list */}
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
+            <Users size={13} style={{ color: 'var(--text-faint)' }} />
+            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>
+              {t('members.access')} ({allMembers.length} {allMembers.length === 1 ? t('members.person') : t('members.persons')})
+            </span>
+          </div>
+
+          {loading ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {[1, 2].map(i => (
+                <div key={i} style={{ height: 48, background: 'var(--bg-tertiary)', borderRadius: 10, animation: 'pulse 1.5s ease-in-out infinite' }} />
+              ))}
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {allMembers.map(member => {
+                const isSelf = member.id === user?.id
+                const canRemove = isCurrentOwner ? member.role !== 'owner' : isSelf
+                return (
+                  <div key={member.id} style={{
+                    display: 'flex', alignItems: 'center', gap: 10,
+                    padding: '8px 12px', borderRadius: 10, background: 'var(--bg-secondary)',
+                    border: '1px solid var(--border-secondary)',
+                  }}>
+                    <Avatar username={member.username} avatarUrl={member.avatar_url} />
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{member.username}</span>
+                        {isSelf && <span style={{ fontSize: 10, color: 'var(--text-faint)' }}>({t('members.you')})</span>}
+                        {member.role === 'owner' && (
+                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 10, fontWeight: 700, color: '#d97706', background: '#fef9c3', padding: '1px 6px', borderRadius: 99 }}>
+                            <Crown size={9} /> {t('members.owner')}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {canRemove && (
+                      <button
+                        onClick={() => handleRemove(member.id, isSelf)}
+                        disabled={removingId === member.id}
+                        title={isSelf ? t('members.leaveTrip') : t('members.removeAccess')}
+                        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px', borderRadius: 6, display: 'flex', color: 'var(--text-faint)', opacity: removingId === member.id ? 0.4 : 1 }}
+                        onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
+                        onMouseLeave={e => e.currentTarget.style.color = '#9ca3af'}
+                      >
+                        {isSelf ? <LogOut size={14} /> : <UserMinus size={14} />}
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+        <style>{`@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }`}</style>
+      </div>
+    </Modal>
+  )
+}