OpenTrip Docs
Project

Handoff implementation mapping

Handoff implementation mapping

Maps Travel Planner.dc.html (see ../reference/handoff.md) onto the real implementation. The prototype's dc-runtime template engine and CossUIDesignSystem_2babcc global are not carried over; components are rebuilt as real cossUI React primitives.

Views

PrototypeImplementation
view: "trips"apps/web/src/pages/trips
view: "planner"apps/web/src/pages/travel-planner
Sidebar itinerary + detailTravelPlanner page-private widgets
Map tab (trip-map.js)apps/web/src/shared/ui/map + TripMapView
Schedule tabScheduleBoard widget
Budget tabBudgetBoard widget
Floating members / inviteFloatingMembers widget

Components

Prototype x-importcossUI primitive
Buttonshared/ui/button
Badgeshared/ui/badge
Inputshared/ui/input
Checkboxshared/ui/checkbox
Tabsshared/ui/tabs
Card (+ parts)shared/ui/card
avatar spansshared/ui/avatar

Behavior: persisted vs demo

BehaviorStatus
Read trips, stops, expensesPersisted (API + PostgreSQL)
Vote togglePersisted (current user)
Add commentPersisted
Insert stopPersisted
Reorder days (drag a day column)Persisted (renumbers days, remaps stops; optimistic on the client)
Add expensePersisted
Balances + settlementComputed server-side from persisted expenses
Member presence dotsDemo (cosmetic, from seed)
InvitePersisted (configurable invite links with access scope, role, can-invite, and custom expiry; accepting adds a real member)
Trip creation ("New trip")Persisted (creates a planning trip owned by the current user as its first member)
Travelogue editorFrontend preview (WYSIWYG Markdown, pasted images, PDF/Markdown/TXT/CSV attachments)
Travelogue draft/published stateLocal browser state (not account-synced or shared yet)
Travelogue mediaPersisted through the linked trip media namespace

Data parity

Seed data reproduces the prototype exactly: 4 members (lynn is the current demo user), 5 days, 22 stops (with transit flags on the two inter-city legs), and 8 expenses. Money is JPY, formatted ¥ + grouped integer, matching the prototype's yen() helper. Settlement uses the same greedy debtor/creditor match. See ../backend/domain.md.

On this page