{ "id": "mod_mileage_log", "type": "module", "version": "1.2", "context": { "title": "Mileage Log", "icon": "๐Ÿ›ฃ๏ธ", "layout": "phone" }, "state": { "trips": [ { "id": "sample-1", "date": "2026-11-04", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 18.4, "purpose": "Business", "start": "Home", "end": "Client site", "sample": true }, { "id": "sample-2", "date": "2026-11-02", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 7.6, "purpose": "Client", "start": "Office", "end": "Station", "sample": true }, { "id": "sample-3", "date": "2026-10-18", "month": "2026-10", "monthLabel": "Oct 2026", "distance": 24.2, "purpose": "Medical", "start": "", "end": "Clinic", "sample": true } ], "unit": "km", "rateText": "0.35", "monthBuckets": [ { "month": "2026-09", "label": "Sep", "distance": 16.8 }, { "month": "2026-10", "label": "Oct", "distance": 24.2 }, { "month": "2026-11", "label": "Nov", "distance": 26 } ], "hasSamples": true }, "dependencies": [ { "repository": { "local": { "id": "mileage_log_store", "config": {} } } }, { "service": { "audio": { "id": "mileage_audio" } } } ], "children": [ { "id": "mileage_tabs", "type": "tab", "style": { "tab": { "selectedTint": "#5EA8FF", "unselectedTint": "secondary", "barBackground": { "color": "surface" } } }, "children": [ { "id": "home_tab", "type": "module", "context": { "_tabTitle": "Home", "_tabImage": "chart.bar.fill" }, "state": { "trips": [ { "id": "sample-1", "date": "2026-11-04", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 18.4, "purpose": "Business", "start": "Home", "end": "Client site", "sample": true }, { "id": "sample-2", "date": "2026-11-02", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 7.6, "purpose": "Client", "start": "Office", "end": "Station", "sample": true }, { "id": "sample-3", "date": "2026-10-18", "month": "2026-10", "monthLabel": "Oct 2026", "distance": 24.2, "purpose": "Medical", "start": "", "end": "Clinic", "sample": true } ], "unit": "km", "rateText": "0.35", "monthBuckets": [ { "month": "2026-09", "label": "Sep", "distance": 16.8 }, { "month": "2026-10", "label": "Oct", "distance": 24.2 }, { "month": "2026-11", "label": "Nov", "distance": 26 } ], "hasSamples": true, "exportError": "", "showExportToast": false }, "events": { "onAppear": [ { "repo": { "id": "home_load_log", "input": { "repositoryId": "mileage_log_store", "operation": "read", "params": { "collection": "mileage", "documentId": "log" } }, "output": { "success": [ { "state": { "id": "home_restore_log", "input": { "trips": "{{ @{home_load_log.trips} ?? ${trips} }}", "unit": "{{ @{home_load_log.unit} ?? ${unit} }}", "rateText": "{{ @{home_load_log.rateText} ?? ${rateText} }}", "monthBuckets": "{{ @{home_load_log.monthBuckets} ?? ${monthBuckets} }}", "hasSamples": "{{ @{home_load_log.hasSamples} ?? ${hasSamples} }}" } } } ], "failure": [] } } } ] }, "children": [ { "id": "home_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#11161D", "#1A222C", "#202A35" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "home_content", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading", "rate": "{{ cast(${rateText}, 'double') ?? 0 }}", "currentMonth": "{{ format(#{now}, {'date': {'style': 'custom', 'pattern': 'yyyy-MM'}}) }}", "monthTitle": "{{ format(#{now}, {'date': {'style': 'custom', 'pattern': 'MMM yyyy'}}) }}", "thisDistance": "{{ sum(${trips[month == format(#{now}, {'date': {'style': 'custom', 'pattern': 'yyyy-MM'}})]}, 'distance') }}", "thisValue": "{{ @{thisDistance} * @{rate} }}", "chartData": "{{ map(${monthBuckets}, {'month': @{item.label}, 'value': @{item.distance} * @{rate}}) }}", "businessDistance": "{{ sum(${trips[purpose == 'Business']}, 'distance') }}", "clientDistance": "{{ sum(${trips[purpose == 'Client']}, 'distance') }}", "medicalDistance": "{{ sum(${trips[purpose == 'Medical']}, 'distance') }}", "charityDistance": "{{ sum(${trips[purpose == 'Charity']}, 'distance') }}", "otherDistance": "{{ sum(${trips[purpose == 'Other']}, 'distance') }}", "emailUrl": "{{ 'mailto:?subject=Mileage%20log&body=Mileage%20log%20summary%0AThis%20month:%20' + cast(@{thisDistance}, 'str') + '%20' + ${unit} + '%0AEstimated%20value:%20' + cast(@{thisValue}, 'str') + '%0ATrips:%20' + cast(count(${trips}), 'str') + '%0ARate:%20' + ${rateText} + '%20per%20' + ${unit} }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 16, "bottom": 32, "leading": 16, "trailing": 16 } } }, "children": [ { "id": "home_hero", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 22 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#284B63", "#3976A8", "#5EA8FF" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": "white", "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.28 }, "radius": 16, "y": 8 } }, "children": [ { "id": "home_hero_icon", "type": "image", "context": { "_source": "sf://road.lanes" }, "style": { "layout": { "width": 30, "height": 30 }, "common": { "foreground": "white" } } }, { "id": "home_hero_caption", "type": "text", "context": { "_text": "{{ 'This month ยท ' + @{monthTitle} }}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "white", "opacity": 0.82 } } } }, { "id": "home_hero_value", "type": "text", "context": { "_text": "@{thisValue}", "_format": { "number": { "style": "currency", "currencyCode": "EUR", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": "white" }, "text": { "lineLimit": 1, "minimumScaleFactor": 0.75 } } }, { "id": "home_hero_distance", "type": "text", "context": { "_text": "{{ cast(@{thisDistance}, 'str') + ' ' + ${unit} + ' logged ยท ' + ${rateText} + ' per ' + ${unit} }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.78 } } } } ] }, { "id": "home_empty_cond", "type": "conditional", "context": { "_condition": "{{ count(${trips}) == 0 }}", "_trueComponent": { "id": "home_empty_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20 } }, "children": [ { "id": "home_empty_icon", "type": "image", "context": { "_source": "sf://tray" }, "style": { "layout": { "width": 34, "height": 34 }, "common": { "foreground": "#5EA8FF" } } }, { "id": "home_empty_text", "type": "text", "context": { "_text": "Add a trip in the Trips tab to start the dashboard." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "onSurface" } } } } ] }, "_falseComponent": { "id": "home_empty_none", "type": "empty" } } }, { "id": "home_chart_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.2 }, "radius": 12, "y": 6 } }, "children": [ { "id": "home_chart_head", "type": "label", "context": { "_title": "Recent months", "_image": "sf://chart.bar.xaxis" }, "style": { "common": { "font": "headline", "foreground": { "color": "primary" } } } }, { "id": "home_chart", "type": "chart", "context": { "_data": "@{chartData}", "_series": [ { "kind": "bar", "x": "month", "y": "value", "label": "Value", "color": "#5EA8FF" } ], "_xAxis": { "type": "category", "title": "Month" }, "_yAxis": { "type": "number", "title": "Value" } }, "style": { "layout": { "height": 190, "maxWidth": "infinity" }, "chart": { "gridLines": true, "animated": true, "palette": [ "#5EA8FF" ] } } } ] }, { "id": "home_purpose_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 10, "y": 5 } }, "children": [ { "id": "home_purpose_head", "type": "label", "context": { "_title": "Split by purpose", "_image": "sf://square.grid.2x2.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "purpose_business", "type": "label", "context": { "_title": "{{ 'Business ยท ' + cast(@{businessDistance}, 'str') + ' ' + ${unit} }}", "_image": "sf://briefcase.fill" }, "style": { "common": { "foreground": { "color": "onSurface" }, "font": "subheadline" } } }, { "id": "purpose_client", "type": "label", "context": { "_title": "{{ 'Client ยท ' + cast(@{clientDistance}, 'str') + ' ' + ${unit} }}", "_image": "sf://person.crop.circle.badge.checkmark" }, "style": { "common": { "foreground": { "color": "onSurface" }, "font": "subheadline" } } }, { "id": "purpose_medical", "type": "label", "context": { "_title": "{{ 'Medical ยท ' + cast(@{medicalDistance}, 'str') + ' ' + ${unit} }}", "_image": "sf://cross.case.fill" }, "style": { "common": { "foreground": { "color": "onSurface" }, "font": "subheadline" } } }, { "id": "purpose_charity", "type": "label", "context": { "_title": "{{ 'Charity ยท ' + cast(@{charityDistance}, 'str') + ' ' + ${unit} }}", "_image": "sf://heart.fill" }, "style": { "common": { "foreground": { "color": "onSurface" }, "font": "subheadline" } } }, { "id": "purpose_other", "type": "label", "context": { "_title": "{{ 'Other ยท ' + cast(@{otherDistance}, 'str') + ' ' + ${unit} }}", "_image": "sf://ellipsis.circle.fill" }, "style": { "common": { "foreground": { "color": "onSurface" }, "font": "subheadline" } } } ] }, { "id": "home_export_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 20 } }, "children": [ { "id": "home_export_head", "type": "label", "context": { "_title": "Export", "_image": "sf://envelope.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "primary" } } } }, { "id": "home_export_note", "type": "text", "context": { "_text": "Clipboard copy is not available here. Open a prepared email summary instead; the full editable log stays in the Trips tab." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "home_email_button", "type": "button", "context": { "_label": "Open email summary", "_image": "sf://paperplane.fill" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } }, "layout": { "minHeight": 48, "maxWidth": "infinity" } }, "events": { "onTap": [ { "navigate": { "id": "home_open_email", "input": { "operation": "open", "url": "@{emailUrl}" }, "output": { "success": [ { "state": { "id": "home_email_ok", "input": { "exportError": "", "showExportToast": true }, "output": { "success": [ { "interval": { "id": "home_export_timer", "input": { "delay": 2 }, "output": { "success": [ { "state": { "id": "home_export_hide", "input": { "showExportToast": false } } }, { "interval": { "id": "home_export_timer", "input": { "cancel": true } } } ] } } } ] } } } ], "failure": [ { "state": { "id": "home_email_fail", "input": { "exportError": "Email could not be opened on this device." } } } ] } } } ] } }, { "id": "home_export_error", "type": "conditional", "context": { "_condition": "{{ notEmpty(${exportError}) }}", "_trueComponent": { "id": "home_export_error_text", "type": "text", "context": { "_text": "${exportError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } } } } } }, { "id": "home_export_toast", "type": "label", "context": { "_title": "Email draft opened", "_image": "sf://checkmark.circle.fill" }, "style": { "layout": { "padding": { "top": 8, "bottom": 8, "leading": 12, "trailing": 12 } }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 14, "opacity": "{{ ${showExportToast} ? 1 : 0 }}" }, "animation": { "kind": "spring", "value": "${showExportToast}" } } } ] } ] } ] } ] }, { "id": "trips_tab", "type": "module", "context": { "_tabTitle": "Trips", "_tabImage": "car.fill" }, "state": { "trips": [ { "id": "sample-1", "date": "2026-11-04", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 18.4, "purpose": "Business", "start": "Home", "end": "Client site", "sample": true }, { "id": "sample-2", "date": "2026-11-02", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 7.6, "purpose": "Client", "start": "Office", "end": "Station", "sample": true }, { "id": "sample-3", "date": "2026-10-18", "month": "2026-10", "monthLabel": "Oct 2026", "distance": 24.2, "purpose": "Medical", "start": "", "end": "Clinic", "sample": true } ], "unit": "km", "rateText": "0.35", "monthBuckets": [ { "month": "2026-09", "label": "Sep", "distance": 16.8 }, { "month": "2026-10", "label": "Oct", "distance": 24.2 }, { "month": "2026-11", "label": "Nov", "distance": 26 } ], "hasSamples": true, "tripDate": "#{now}", "distanceText": "", "purpose": "Business", "startPlace": "", "endPlace": "", "tripError": "", "search": "", "focused": "", "editingId": "", "deleteId": "", "deleteTitle": "", "showDeleteConfirm": false, "showSavedToast": false }, "events": { "onAppear": [ { "repo": { "id": "trips_load_log", "input": { "repositoryId": "mileage_log_store", "operation": "read", "params": { "collection": "mileage", "documentId": "log" } }, "output": { "success": [ { "state": { "id": "trips_restore_log", "input": { "trips": "{{ @{trips_load_log.trips} ?? ${trips} }}", "unit": "{{ @{trips_load_log.unit} ?? ${unit} }}", "rateText": "{{ @{trips_load_log.rateText} ?? ${rateText} }}", "monthBuckets": "{{ @{trips_load_log.monthBuckets} ?? ${monthBuckets} }}", "hasSamples": "{{ @{trips_load_log.hasSamples} ?? ${hasSamples} }}", "tripDate": "#{now}" } } } ], "failure": [ { "state": { "id": "trips_date_default", "input": { "tripDate": "#{now}" } } } ] } } } ] }, "children": [ { "id": "trips_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#11161D", "#1A222C", "#202A35" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "trips_content", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading", "dist": "{{ cast(${distanceText}, 'double') ?? 0 }}", "monthKey": "{{ format(${tripDate}, {'date': {'style': 'custom', 'pattern': 'yyyy-MM'}}) }}", "monthLabel": "{{ format(${tripDate}, {'date': {'style': 'custom', 'pattern': 'MMM'}}) }}", "filteredTrips": "{{ empty(trim(${search})) ? sort(${trips}, 'date', 'desc') : sort(${trips[purpose ~ ${search}]}, 'date', 'desc') }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 16, "bottom": 36, "leading": 16, "trailing": 16 } }, "modal": { "alert": { "isPresented": "${showDeleteConfirm}", "title": "Delete trip?", "message": "This removes the trip from your log on this device.", "actions": [ { "id": "delete_cancel_btn", "type": "button", "context": { "_label": "Keep" }, "events": { "onTap": [ { "state": { "id": "delete_cancel", "input": { "showDeleteConfirm": false, "deleteId": "" } } } ] } }, { "id": "delete_confirm_btn", "type": "button", "context": { "_label": "Delete" }, "style": { "common": { "tint": "red" } }, "events": { "onTap": [ { "state": { "id": "delete_apply", "input": { "trips": "${trips[id != ${deleteId}]}", "showDeleteConfirm": false, "deleteId": "", "deleteTitle": "", "focused": "" }, "output": { "success": [ { "repo": { "id": "delete_persist", "input": { "repositoryId": "mileage_log_store", "operation": "create", "params": { "collection": "mileage", "documentId": "log", "rewrite": true, "body": { "trips": "${trips}", "unit": "${unit}", "rateText": "${rateText}", "monthBuckets": "${monthBuckets}", "hasSamples": "${hasSamples}" } } } } }, { "service": { "id": "delete_haptic", "input": { "serviceId": "mileage_audio", "params": { "sound": "none", "haptic": "warning" } } } } ] } } } ] } } ] } } }, "children": [ { "id": "trip_form_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.2 }, "radius": 12, "y": 6 } }, "children": [ { "id": "trip_form_head", "type": "label", "context": { "_title": "{{ empty(${editingId}) ? 'New trip' : 'Edit trip' }}", "_image": "sf://plus.circle.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "primary" } } } }, { "id": "trip_date", "type": "datepicker", "context": { "_label": "Date", "_date": "${tripDate}", "_components": "date" } }, { "id": "trip_distance", "type": "textfield", "context": { "_label": "{{ 'Distance (' + ${unit} + ')' }}", "_text": "${distanceText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "trip_purpose", "type": "picker", "context": { "_label": "Purpose", "_selection": "${purpose}", "_options": [ "Business", "Client", "Medical", "Charity", "Other" ] }, "style": { "picker": "segmented", "layout": { "maxWidth": "infinity" } } }, { "id": "trip_start", "type": "textfield", "context": { "_label": "Start place (optional)", "_text": "${startPlace}", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "trip_end", "type": "textfield", "context": { "_label": "End place (optional)", "_text": "${endPlace}", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "trip_error_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${tripError}) }}", "_trueComponent": { "id": "trip_error_text", "type": "text", "context": { "_text": "${tripError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } } } } } }, { "id": "trip_save_btn", "type": "button", "context": { "_label": "{{ empty(${editingId}) ? 'Save trip' : 'Update trip' }}", "_image": "sf://checkmark.circle.fill" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } }, "layout": { "minHeight": 50, "maxWidth": "infinity" } }, "events": { "onTap": [ { "state": { "id": "trip_validate", "input": { "tripError": "{{ @{dist} <= 0 ? 'Enter a distance greater than zero.' : (empty(${purpose}) ? 'Choose a purpose.' : '') }}", "focused": "" } } }, { "condition": { "id": "trip_valid_guard", "input": "{{ @{dist} > 0 && notEmpty(${purpose}) }}", "output": { "success": [ { "state": { "id": "trip_apply_save", "input": { "trips": "{{ empty(${editingId}) ? ${trips} + {'id': cast(#{now}, 'str'), 'date': ${tripDate}, 'month': @{monthKey}, 'monthLabel': @{monthLabel}, 'distance': @{dist}, 'purpose': ${purpose}, 'start': ${startPlace}, 'end': ${endPlace}, 'sample': false} : map(${trips}, @{item.id} == ${editingId} ? {'id': @{item.id}, 'date': ${tripDate}, 'month': @{monthKey}, 'monthLabel': @{monthLabel}, 'distance': @{dist}, 'purpose': ${purpose}, 'start': ${startPlace}, 'end': ${endPlace}, 'sample': false} : @{item}) }}", "monthBuckets": "{{ empty(${editingId}) ? ${monthBuckets} + {'month': @{monthKey}, 'label': @{monthLabel}, 'distance': @{dist}} : ${monthBuckets} }}", "distanceText": "", "purpose": "Business", "startPlace": "", "endPlace": "", "tripDate": "#{now}", "editingId": "", "tripError": "", "showSavedToast": true }, "output": { "success": [ { "repo": { "id": "trip_persist", "input": { "repositoryId": "mileage_log_store", "operation": "create", "params": { "collection": "mileage", "documentId": "log", "rewrite": true, "body": { "trips": "${trips}", "unit": "${unit}", "rateText": "${rateText}", "monthBuckets": "${monthBuckets}", "hasSamples": "${hasSamples}" } } } } }, { "service": { "id": "trip_save_haptic", "input": { "serviceId": "mileage_audio", "params": { "sound": "none", "haptic": "success" } } } }, { "interval": { "id": "trip_toast_timer", "input": { "delay": 2 }, "output": { "success": [ { "state": { "id": "trip_hide_toast", "input": { "showSavedToast": false } } }, { "interval": { "id": "trip_toast_timer", "input": { "cancel": true } } } ] } } } ] } } } ], "failure": [ { "service": { "id": "trip_warn_haptic", "input": { "serviceId": "mileage_audio", "params": { "sound": "none", "haptic": "warning" } } } } ] } } } ] } }, { "id": "trip_toast", "type": "label", "context": { "_title": "Trip saved", "_image": "sf://checkmark.circle.fill" }, "style": { "layout": { "padding": { "top": 8, "bottom": 8, "leading": 12, "trailing": 12 } }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 14, "opacity": "{{ ${showSavedToast} ? 1 : 0 }}" }, "animation": { "kind": "spring", "value": "${showSavedToast}" } } } ] }, { "id": "trip_list_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 10, "y": 5 } }, "children": [ { "id": "trip_list_head", "type": "label", "context": { "_title": "Saved trips", "_image": "sf://list.bullet.rectangle.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "trip_search", "type": "textfield", "context": { "_label": "Search by purpose", "_text": "${search}", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "trip_list_empty", "type": "conditional", "context": { "_condition": "{{ count(@{filteredTrips}) == 0 }}", "_trueComponent": { "id": "trip_empty_state", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 16 } }, "children": [ { "id": "trip_empty_icon", "type": "image", "context": { "_source": "sf://tray" }, "style": { "layout": { "width": 30, "height": 30 }, "common": { "foreground": "#5EA8FF" } } }, { "id": "trip_empty_copy", "type": "text", "context": { "_text": "No trips match this view." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "onSurfaceVariant" } } } } ] } } }, { "id": "trip_rows", "type": "dynamic", "context": { "_data": "@{filteredTrips}" }, "prototype": { "id": "trip_row", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading", "rowValue": "{{ @{item.distance} * (cast(${rateText}, 'double') ?? 0) }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 16 }, "animation": { "kind": "spring", "value": "${trips}" } }, "children": [ { "id": "trip_row_top", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "trip_row_icon", "type": "image", "context": { "_source": "sf://car.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "#5EA8FF" } } }, { "id": "trip_row_title", "type": "text", "context": { "_text": "{{ @{item.purpose} + ' ยท ' + cast(@{item.distance}, 'str') + ' ' + ${unit} }}" }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" }, "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "trip_row_spacer", "type": "spacer" }, { "id": "trip_row_value", "type": "text", "context": { "_text": "@{rowValue}", "_format": { "number": { "style": "currency", "currencyCode": "EUR", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": "subheadline", "foreground": { "color": "onSurfaceVariant" } } } } ] }, { "id": "trip_row_date", "type": "text", "context": { "_text": "@{item.date}", "_format": { "date": { "style": "date", "dateStyle": "medium" } } }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "trip_row_route", "type": "text", "context": { "_text": "{{ (notEmpty(@{item.start}) || notEmpty(@{item.end})) ? ((notEmpty(@{item.start}) ? @{item.start} : 'Start') + ' โ†’ ' + (notEmpty(@{item.end}) ? @{item.end} : 'End')) : 'No places saved' }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "trip_row_actions", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "trip_edit_btn", "type": "button", "context": { "_label": "Edit", "_image": "sf://pencil" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } }, "layout": { "minHeight": 44 } }, "events": { "onTap": [ { "state": { "id": "trip_begin_edit", "input": { "editingId": "@{item.id}", "tripDate": "@{item.date}", "distanceText": "{{ cast(@{item.distance}, 'str') }}", "purpose": "@{item.purpose}", "startPlace": "@{item.start}", "endPlace": "@{item.end}", "tripError": "", "focused": "" } } } ] } }, { "id": "trip_delete_btn", "type": "button", "context": { "_label": "Delete", "_image": "sf://trash" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } }, "common": { "tint": "red" }, "layout": { "minHeight": 44 } }, "events": { "onTap": [ { "state": { "id": "trip_ask_delete", "input": { "deleteId": "@{item.id}", "deleteTitle": "@{item.purpose}", "showDeleteConfirm": true, "focused": "" } } } ] } } ] } ] } } ] }, { "id": "sample_clear_cond", "type": "conditional", "context": { "_condition": "${hasSamples}", "_trueComponent": { "id": "sample_clear_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 18 } }, "children": [ { "id": "sample_note", "type": "label", "context": { "_title": "Sample trips are included so the dashboard has data on first open.", "_image": "sf://info.circle" }, "style": { "common": { "font": "caption", "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "sample_clear_btn", "type": "button", "context": { "_label": "Clear sample trips", "_image": "sf://trash" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } }, "common": { "tint": "red" }, "layout": { "minHeight": 46 } }, "events": { "onTap": [ { "state": { "id": "sample_clear_apply", "input": { "trips": "${trips[sample != true]}", "monthBuckets": [], "hasSamples": false, "focused": "" }, "output": { "success": [ { "repo": { "id": "sample_clear_persist", "input": { "repositoryId": "mileage_log_store", "operation": "create", "params": { "collection": "mileage", "documentId": "log", "rewrite": true, "body": { "trips": "${trips}", "unit": "${unit}", "rateText": "${rateText}", "monthBuckets": "${monthBuckets}", "hasSamples": "${hasSamples}" } } } } }, { "service": { "id": "sample_clear_haptic", "input": { "serviceId": "mileage_audio", "params": { "sound": "none", "haptic": "warning" } } } } ] } } } ] } } ] }, "_falseComponent": { "id": "sample_clear_none", "type": "empty" } } } ] } ] } ] }, { "id": "settings_tab", "type": "module", "context": { "_tabTitle": "Settings", "_tabImage": "slider.horizontal.3" }, "state": { "trips": [ { "id": "sample-1", "date": "2026-11-04", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 18.4, "purpose": "Business", "start": "Home", "end": "Client site", "sample": true }, { "id": "sample-2", "date": "2026-11-02", "month": "2026-11", "monthLabel": "Nov 2026", "distance": 7.6, "purpose": "Client", "start": "Office", "end": "Station", "sample": true }, { "id": "sample-3", "date": "2026-10-18", "month": "2026-10", "monthLabel": "Oct 2026", "distance": 24.2, "purpose": "Medical", "start": "", "end": "Clinic", "sample": true } ], "unit": "km", "rateText": "0.35", "monthBuckets": [ { "month": "2026-09", "label": "Sep", "distance": 16.8 }, { "month": "2026-10", "label": "Oct", "distance": 24.2 }, { "month": "2026-11", "label": "Nov", "distance": 26 } ], "hasSamples": true, "rateError": "", "focused": "", "showSettingsToast": false }, "events": { "onAppear": [ { "repo": { "id": "settings_load_log", "input": { "repositoryId": "mileage_log_store", "operation": "read", "params": { "collection": "mileage", "documentId": "log" } }, "output": { "success": [ { "state": { "id": "settings_restore_log", "input": { "trips": "{{ @{settings_load_log.trips} ?? ${trips} }}", "unit": "{{ @{settings_load_log.unit} ?? ${unit} }}", "rateText": "{{ @{settings_load_log.rateText} ?? ${rateText} }}", "monthBuckets": "{{ @{settings_load_log.monthBuckets} ?? ${monthBuckets} }}", "hasSamples": "{{ @{settings_load_log.hasSamples} ?? ${hasSamples} }}" } } } ], "failure": [] } } } ] }, "children": [ { "id": "settings_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#11161D", "#1A222C", "#202A35" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "settings_content", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading", "rate": "{{ cast(${rateText}, 'double') ?? 0 }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 16, "bottom": 36, "leading": 16, "trailing": 16 } } }, "children": [ { "id": "settings_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.2 }, "radius": 12, "y": 6 } }, "children": [ { "id": "settings_head", "type": "label", "context": { "_title": "Mileage value", "_image": "sf://gauge.with.dots.needle.67percent" }, "style": { "common": { "font": "headline", "foreground": { "color": "primary" } } } }, { "id": "unit_picker", "type": "picker", "context": { "_label": "Distance unit", "_selection": "${unit}", "_options": [ "km", "mi" ] }, "style": { "picker": "segmented", "layout": { "maxWidth": "infinity" } } }, { "id": "rate_field", "type": "textfield", "context": { "_label": "{{ 'Rate per ' + ${unit} }}", "_text": "${rateText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "rate_error_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${rateError}) }}", "_trueComponent": { "id": "rate_error_text", "type": "text", "context": { "_text": "${rateError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } } } } } }, { "id": "settings_note", "type": "label", "context": { "_title": "Existing trip distances are read in the selected unit; change units only when your log is meant to use that unit.", "_image": "sf://info.circle" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "settings_save_btn", "type": "button", "context": { "_label": "Save settings", "_image": "sf://checkmark.circle.fill" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } }, "layout": { "minHeight": 50, "maxWidth": "infinity" } }, "events": { "onTap": [ { "state": { "id": "settings_validate", "input": { "rateError": "{{ @{rate} <= 0 ? 'Enter a rate greater than zero.' : '' }}", "focused": "" } } }, { "condition": { "id": "settings_valid_guard", "input": "{{ @{rate} > 0 }}", "output": { "success": [ { "repo": { "id": "settings_persist", "input": { "repositoryId": "mileage_log_store", "operation": "create", "params": { "collection": "mileage", "documentId": "log", "rewrite": true, "body": { "trips": "${trips}", "unit": "${unit}", "rateText": "${rateText}", "monthBuckets": "${monthBuckets}", "hasSamples": "${hasSamples}" } } }, "output": { "success": [ { "state": { "id": "settings_saved_toast_on", "input": { "showSettingsToast": true }, "output": { "success": [ { "service": { "id": "settings_save_haptic", "input": { "serviceId": "mileage_audio", "params": { "sound": "none", "haptic": "success" } } } }, { "interval": { "id": "settings_toast_timer", "input": { "delay": 2 }, "output": { "success": [ { "state": { "id": "settings_toast_off", "input": { "showSettingsToast": false } } }, { "interval": { "id": "settings_toast_timer", "input": { "cancel": true } } } ] } } } ] } } } ] } } } ], "failure": [ { "service": { "id": "settings_warn_haptic", "input": { "serviceId": "mileage_audio", "params": { "sound": "none", "haptic": "warning" } } } } ] } } } ] } }, { "id": "settings_toast", "type": "label", "context": { "_title": "Settings saved", "_image": "sf://checkmark.circle.fill" }, "style": { "layout": { "padding": { "top": 8, "bottom": 8, "leading": 12, "trailing": 12 } }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 14, "opacity": "{{ ${showSettingsToast} ? 1 : 0 }}" }, "animation": { "kind": "spring", "value": "${showSettingsToast}" } } } ] } ] } ] }, { "id": "settings_footer", "type": "text", "context": { "_text": "Data is stored on this device only." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] } ] } ], "events": { "onAppear": [ { "repo": { "id": "root_load_log", "input": { "repositoryId": "mileage_log_store", "operation": "read", "params": { "collection": "mileage", "documentId": "log" } }, "output": { "success": [ { "state": { "id": "root_restore_log", "input": { "trips": "{{ @{root_load_log.trips} ?? ${trips} }}", "unit": "{{ @{root_load_log.unit} ?? ${unit} }}", "rateText": "{{ @{root_load_log.rateText} ?? ${rateText} }}", "monthBuckets": "{{ @{root_load_log.monthBuckets} ?? ${monthBuckets} }}", "hasSamples": "{{ @{root_load_log.hasSamples} ?? ${hasSamples} }}" } } } ], "failure": [] } } } ] } }