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

Self-hosted travel planner with Express.js, SQLite, React & Tailwind CSS.
2026-06-21 06:11:45 +00:00 · 2026-03-18 23:58:08 +01:00
commit cb1e217bbe
100 changed files with 25545 additions and 0 deletions
@@ -0,0 +1,177 @@
+import React, { useState } from 'react'
+import { useDroppable } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import AssignedPlaceItem from './AssignedPlaceItem'
+import { ChevronDown, ChevronUp, Plus, FileText, Package, DollarSign } from 'lucide-react'
+
+export default function DayColumn({
+  day,
+  assignments,
+  tripId,
+  onRemoveAssignment,
+  onEditPlace,
+  onQuickAdd,
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [showNotes, setShowNotes] = useState(false)
+  const [notes, setNotes] = useState(day.notes || '')
+  const [notesEditing, setNotesEditing] = useState(false)
+
+  const { isOver, setNodeRef } = useDroppable({
+    id: `day-${day.id}`,
+    data: {
+      type: 'day',
+      dayId: day.id,
+    },
+  })
+
+  const sortableIds = (assignments || []).map(a => `assignment-${a.id}`)
+
+  const totalCost = (assignments || []).reduce((sum, a) => {
+    return sum + (a.place?.price ? Number(a.place.price) : 0)
+  }, 0)
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return null
+    const d = new Date(dateStr + 'T00:00:00')
+    return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
+  }
+
+  return (
+    <div
+      className={`
+        flex-shrink-0 w-72 flex flex-col rounded-xl border-2 transition-all duration-150
+        ${isOver
+          ? 'border-slate-400 bg-slate-50 shadow-lg shadow-slate-100'
+          : 'border-transparent bg-white shadow-sm'
+        }
+      `}
+    >
+      {/* Header */}
+      <div
+        className={`
+          px-3 py-2.5 border-b flex items-center gap-2 rounded-t-xl
+          ${isOver ? 'border-slate-200 bg-slate-50' : 'border-slate-100 bg-slate-50'}
+        `}
+      >
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm font-bold text-slate-900">Day {day.day_number}</span>
+            <span className="text-xs bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded-full font-medium">
+              {assignments?.length || 0}
+            </span>
+          </div>
+          {day.date && (
+            <p className="text-xs text-slate-500 mt-0.5">{formatDate(day.date)}</p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1">
+          {totalCost > 0 && (
+            <span className="flex items-center gap-0.5 text-xs text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded">
+              <DollarSign className="w-3 h-3" />
+              {totalCost.toLocaleString()}
+            </span>
+          )}
+          <button
+            onClick={() => setShowNotes(!showNotes)}
+            className={`p-1 rounded transition-colors ${showNotes ? 'text-slate-700 bg-slate-100' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'}`}
+            title="Notes"
+          >
+            <FileText className="w-4 h-4" />
+          </button>
+          <button
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            className="p-1 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded transition-colors"
+          >
+            {isCollapsed ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Notes area */}
+      {showNotes && (
+        <div className="px-3 py-2 border-b border-slate-100 bg-amber-50">
+          <textarea
+            value={notes}
+            onChange={e => setNotes(e.target.value)}
+            onBlur={() => setNotesEditing(false)}
+            onFocus={() => setNotesEditing(true)}
+            placeholder="Add notes for this day..."
+            rows={2}
+            className="w-full text-xs text-slate-600 bg-transparent resize-none focus:outline-none placeholder-amber-400"
+          />
+          {notesEditing && (
+            <div className="flex gap-2 mt-1">
+              <button
+                onMouseDown={(e) => {
+                  e.preventDefault()
+                  // Parent will handle save via onUpdateNotes if passed
+                }}
+                className="text-xs text-slate-600 hover:text-slate-900"
+              >
+                Save
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Assignments list */}
+      {!isCollapsed && (
+        <div
+          ref={setNodeRef}
+          className={`
+            flex-1 p-2 flex flex-col gap-2 min-h-24 transition-colors duration-150
+            ${isOver ? 'bg-slate-50' : 'bg-transparent'}
+          `}
+        >
+          {assignments && assignments.length > 0 ? (
+            <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+              {assignments.map(assignment => (
+                <AssignedPlaceItem
+                  key={assignment.id}
+                  assignment={assignment}
+                  dayId={day.id}
+                  onRemove={(id) => onRemoveAssignment(day.id, id)}
+                  onEdit={onEditPlace}
+                />
+              ))}
+            </SortableContext>
+          ) : (
+            <div className={`
+              flex-1 flex flex-col items-center justify-center py-6 rounded-lg border-2 border-dashed
+              text-xs text-center transition-colors
+              ${isOver
+                ? 'border-slate-400 bg-slate-100 text-slate-500'
+                : 'border-slate-200 text-slate-400'
+              }
+            `}>
+              <Package className="w-8 h-8 mb-2 opacity-50" />
+              <p className="font-medium">Drop places here</p>
+              <p className="text-[10px] mt-0.5 opacity-70">or drag from the left panel</p>
+            </div>
+          )}
+
+          {/* Quick add button */}
+          <button
+            onClick={() => onQuickAdd(day)}
+            className="flex items-center justify-center gap-1 py-1.5 text-xs text-slate-400 hover:text-slate-700 hover:bg-slate-50 rounded-lg border border-dashed border-slate-200 hover:border-slate-300 transition-all mt-1"
+          >
+            <Plus className="w-3.5 h-3.5" />
+            Add place
+          </button>
+        </div>
+      )}
+
+      {isCollapsed && (
+        <div
+          className="px-3 py-2 text-xs text-slate-400 cursor-pointer hover:bg-slate-50"
+          onClick={() => setIsCollapsed(false)}
+        >
+          {assignments?.length || 0} place{(assignments?.length || 0) !== 1 ? 's' : ''} — click to expand
+        </div>
+      )}
+    </div>
+  )
+}