{ "id": "split_expenses", "type": "module", "version": "1.1", "context": { "title": "Split Expenses", "icon": "💸" }, "state": { "people": [ "Alice", "Bob" ], "expenses": [], "newPerson": "", "personError": "", "expenseName": "", "expenseAmount": "", "payer": "Alice", "expenseError": "", "focused": "", "showReset": false }, "dependencies": [ { "repository": { "local": { "id": "store", "config": {} } } }, { "service": { "audio": { "id": "audio" } } } ], "events": { "onAppear": [ { "repo": { "id": "load_data", "input": { "repositoryId": "store", "operation": "read", "params": { "collection": "split_expenses", "documentId": "main" } }, "output": { "success": [ { "state": { "id": "hydrate", "input": { "people": "@{load_data.people}", "expenses": "@{load_data.expenses}", "payer": "{{ count(@{load_data.people}) > 0 ? @{load_data.people}[0] : '' }}" } } } ], "failure": [] } } } ] }, "children": [ { "id": "root", "type": "scroll", "style": { "scroll": { "dismissesKeyboard": "interactively" }, "layout": { "maxWidth": "infinity", "maxHeight": "infinity" } }, "children": [ { "id": "content", "type": "vstack", "context": { "_spacing": 18, "_alignment": "leading", "total": "{{ sum(${expenses}, 'amount') }}", "share": "{{ count(${people}) > 0 ? @{total} / count(${people}) : 0 }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 16, "bottom": 32, "leading": 16, "trailing": 16 } } }, "children": [ { "id": "hero", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#2457D6", "#6e3eeb" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "#2457D6", "opacity": 0.25 }, "radius": 14, "y": 7 } }, "children": [ { "id": "hero_icon", "type": "image", "context": { "_source": "sf://person.3.fill" }, "style": { "layout": { "width": 28, "height": 28 }, "common": { "foreground": { "color": "white" } } } }, { "id": "hero_title", "type": "text", "context": { "_text": "Split Expenses" }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "hero_subtitle", "type": "text", "context": { "_text": "Every expense is split equally across the current group." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "white", "opacity": 0.82 } } } } ] }, { "id": "summary", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "total_card", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 18, "glass": { "style": "regular" } } }, "children": [ { "id": "total_label", "type": "text", "context": { "_text": "Total" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "total_value", "type": "text", "context": { "_text": "@{total}", "_format": { "number": { "style": "currency", "currencyCode": "#{currency}", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "onSurface" } } } } ] }, { "id": "share_card", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 18, "glass": { "style": "regular" } } }, "children": [ { "id": "share_label", "type": "text", "context": { "_text": "Each share" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "share_value", "type": "text", "context": { "_text": "@{share}", "_format": { "number": { "style": "currency", "currencyCode": "#{currency}", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "onSurface" } } } } ] } ] }, { "id": "people_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20, "glass": { "style": "regular" } } }, "children": [ { "id": "people_header", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "people_header_icon", "type": "image", "context": { "_source": "sf://person.2.fill" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "accentColor" } } } }, { "id": "people_header_text", "type": "text", "context": { "_text": "People" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "people_header_spacer", "type": "spacer" }, { "id": "people_count", "type": "text", "context": { "_text": "{{ cast(count(${people}), 'str') }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "person_input_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "person_field", "type": "textfield", "context": { "_label": "Name", "_text": "${newPerson}", "_focused": "${focused}" }, "style": { "textField": { "standard": "roundedBorder" }, "layout": { "maxWidth": "infinity" } } }, { "id": "add_person_button", "type": "button", "context": { "_label": "Add" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } } }, "events": { "onTap": [ { "state": { "id": "validate_person", "input": { "personError": "{{ empty(trim(${newPerson})) ? 'Enter a name.' : (contains(${people}, trim(${newPerson})) ? 'Name already exists.' : (count(${people}) >= 8 ? 'Maximum 8 people.' : '')) }}", "focused": "" } } }, { "condition": { "id": "person_is_valid", "input": "{{ notEmpty(trim(${newPerson})) && !contains(${people}, trim(${newPerson})) && count(${people}) < 8 }}", "output": { "success": [ { "state": { "id": "add_person", "input": { "people": "{{ ${people} + trim(${newPerson}) }}", "payer": "{{ empty(${payer}) ? trim(${newPerson}) : ${payer} }}", "newPerson": "", "personError": "" }, "output": { "success": [ { "repo": { "id": "save_person", "input": { "repositoryId": "store", "operation": "create", "params": { "collection": "split_expenses", "documentId": "main", "rewrite": true }, "body": { "people": "${people}", "expenses": "${expenses}" } } } }, { "service": { "id": "person_haptic", "input": { "serviceId": "audio", "params": { "haptic": "success" } } } } ] } } } ] } } } ] } } ] }, { "id": "person_error", "type": "conditional", "context": { "_condition": "{{ notEmpty(${personError}) }}", "_trueComponent": { "id": "person_error_text", "type": "text", "context": { "_text": "${personError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } } } } } }, { "id": "people_list", "type": "dynamic", "context": { "_data": "${people}" }, "prototype": { "id": "person_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center", "personName": "@{item}", "personIndex": "@{index}" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 8, "bottom": 8, "leading": 12, "trailing": 4 } }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 14 } }, "children": [ { "id": "person_avatar", "type": "image", "context": { "_source": "sf://person.crop.circle.fill" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "accentColor" } } } }, { "id": "person_name", "type": "text", "context": { "_text": "@{personName}" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "person_spacer", "type": "spacer" }, { "id": "delete_person_button", "type": "button", "context": { "_label": "" }, "style": { "layout": { "width": 44, "height": 44 }, "button": { "standard": { "type": "borderless" } } }, "children": [ { "id": "delete_person_icon", "type": "image", "context": { "_source": "sf://trash" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": { "color": "red" } } } } ], "events": { "onTap": [ { "state": { "id": "delete_person", "input": { "people": "{{ removeAt(${people}, @{personIndex}) }}", "expenses": "${expenses[payer != @{personName}]}", "payer": "{{ ${payer} == @{personName} ? (count(removeAt(${people}, @{personIndex})) > 0 ? removeAt(${people}, @{personIndex})[0] : '') : ${payer} }}" }, "output": { "success": [ { "repo": { "id": "save_person_delete", "input": { "repositoryId": "store", "operation": "create", "params": { "collection": "split_expenses", "documentId": "main", "rewrite": true }, "body": { "people": "${people}", "expenses": "${expenses}" } } } }, { "service": { "id": "person_delete_haptic", "input": { "serviceId": "audio", "params": { "haptic": "warning" } } } } ] } } } ] } } ] } } ] }, { "id": "expense_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20, "glass": { "style": "regular" } } }, "children": [ { "id": "expense_header", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "expense_header_icon", "type": "image", "context": { "_source": "sf://creditcard.fill" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "accentColor" } } } }, { "id": "expense_header_text", "type": "text", "context": { "_text": "Add expense" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } } ] }, { "id": "expense_name_field", "type": "textfield", "context": { "_label": "Description", "_text": "${expenseName}", "_focused": "${focused}" }, "style": { "textField": { "standard": "roundedBorder" } } }, { "id": "expense_amount_field", "type": "textfield", "context": { "_label": "Amount", "_text": "${expenseAmount}", "_keyboard": "decimalPad", "_focused": "${focused}" }, "style": { "textField": { "standard": "roundedBorder" } } }, { "id": "payer_picker", "type": "picker", "context": { "_label": "Paid by", "_selection": "${payer}", "_options": "${people}" }, "style": { "picker": "menu" } }, { "id": "expense_note", "type": "label", "context": { "_title": "Split equally between all current people", "_image": "sf://divide.circle" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "expense_error", "type": "conditional", "context": { "_condition": "{{ notEmpty(${expenseError}) }}", "_trueComponent": { "id": "expense_error_text", "type": "text", "context": { "_text": "${expenseError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } } } } } }, { "id": "add_expense_button", "type": "button", "context": { "_label": "Add Expense" }, "style": { "layout": { "maxWidth": "infinity" }, "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } } }, "events": { "onTap": [ { "state": { "id": "validate_expense", "input": { "expenseError": "{{ count(${people}) == 0 ? 'Add at least one person.' : (empty(trim(${expenseName})) ? 'Enter a description.' : ((cast(${expenseAmount}, 'double') ?? 0) <= 0 ? 'Enter a valid amount.' : (empty(${payer}) ? 'Choose who paid.' : ''))) }}", "focused": "" } } }, { "condition": { "id": "expense_is_valid", "input": "{{ count(${people}) > 0 && notEmpty(trim(${expenseName})) && (cast(${expenseAmount}, 'double') ?? 0) > 0 && notEmpty(${payer}) }}", "output": { "success": [ { "state": { "id": "add_expense", "input": { "expenses": "{{ ${expenses} + {'title': trim(${expenseName}), 'amount': cast(${expenseAmount}, 'double'), 'payer': ${payer}} }}", "expenseName": "", "expenseAmount": "", "expenseError": "" }, "output": { "success": [ { "repo": { "id": "save_expense", "input": { "repositoryId": "store", "operation": "create", "params": { "collection": "split_expenses", "documentId": "main", "rewrite": true }, "body": { "people": "${people}", "expenses": "${expenses}" } } } }, { "service": { "id": "expense_haptic", "input": { "serviceId": "audio", "params": { "haptic": "success" } } } } ] } } } ] } } } ] } } ] }, { "id": "balances_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20, "glass": { "style": "regular" } } }, "children": [ { "id": "balances_header", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "balances_icon", "type": "image", "context": { "_source": "sf://scale.3d" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "accentColor" } } } }, { "id": "balances_title", "type": "text", "context": { "_text": "Settle up" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } } ] }, { "id": "settlement_help", "type": "text", "context": { "_text": "Negative balances owe the group. Positive balances should receive from the group." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "balance_rows", "type": "dynamic", "context": { "_data": "${people}" }, "prototype": { "id": "balance_row", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading", "personName": "@{item}", "paid": "{{ sum(${expenses[payer == @{personName}]}, 'amount') }}", "balance": "{{ @{paid} - @{share} }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": "{{ @{balance} > 0.005 ? {'color':'green','opacity':0.12} : (@{balance} < -0.005 ? {'color':'red','opacity':0.10} : {'color':'surfaceVariant'}) }}", "foreground": "{{ @{balance} > 0.005 ? {'color':'green'} : (@{balance} < -0.005 ? {'color':'red'} : {'color':'onSurfaceVariant'}) }}", "cornerRadius": 14 } }, "children": [ { "id": "balance_top", "type": "hstack", "children": [ { "id": "balance_person", "type": "text", "context": { "_text": "@{personName}" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "balance_spacer", "type": "spacer" }, { "id": "balance_amount", "type": "text", "context": { "_text": "@{balance}", "_format": { "number": { "style": "currency", "currencyCode": "#{currency}", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": { "color": "onSurfaceVariant" } } } } ] }, { "id": "balance_bottom", "type": "hstack", "children": [ { "id": "paid_label", "type": "text", "context": { "_text": "Paid" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } }, { "id": "paid_spacer", "type": "spacer" }, { "id": "paid_value", "type": "text", "context": { "_text": "@{paid}", "_format": { "number": { "style": "currency", "currencyCode": "#{currency}", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] } ] } } ] }, { "id": "expenses_list_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20, "glass": { "style": "regular" } } }, "children": [ { "id": "expenses_list_header", "type": "hstack", "children": [ { "id": "expenses_list_title", "type": "text", "context": { "_text": "Expenses" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "expenses_list_spacer", "type": "spacer" }, { "id": "expenses_list_count", "type": "text", "context": { "_text": "{{ cast(count(${expenses}), 'str') }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "expense_rows", "type": "dynamic", "context": { "_data": "${expenses}" }, "prototype": { "id": "expense_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center", "expense": "@{item}", "expenseIndex": "@{index}" }, "style": { "layout": { "maxWidth": "infinity", "padding": 12 }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 14 } }, "children": [ { "id": "expense_row_icon", "type": "image", "context": { "_source": "sf://receipt.fill" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "accentColor" } } } }, { "id": "expense_row_info", "type": "vstack", "context": { "_spacing": 2, "_alignment": "leading" }, "children": [ { "id": "expense_row_title", "type": "text", "context": { "_text": "@{expense.title}" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "expense_row_payer", "type": "text", "context": { "_text": "{{ 'Paid by ' + @{expense.payer} }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "expense_row_spacer", "type": "spacer" }, { "id": "expense_row_amount", "type": "text", "context": { "_text": "@{expense.amount}", "_format": { "number": { "style": "currency", "currencyCode": "#{currency}", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "delete_expense_button", "type": "button", "context": { "_label": "" }, "style": { "layout": { "width": 44, "height": 44 }, "button": { "standard": { "type": "borderless" } } }, "children": [ { "id": "delete_expense_icon", "type": "image", "context": { "_source": "sf://trash" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": { "color": "red" } } } } ], "events": { "onTap": [ { "state": { "id": "delete_expense", "input": { "expenses": "{{ removeAt(${expenses}, @{expenseIndex}) }}" }, "output": { "success": [ { "repo": { "id": "save_expense_delete", "input": { "repositoryId": "store", "operation": "create", "params": { "collection": "split_expenses", "documentId": "main", "rewrite": true }, "body": { "people": "${people}", "expenses": "${expenses}" } } } }, { "service": { "id": "expense_delete_haptic", "input": { "serviceId": "audio", "params": { "haptic": "warning" } } } } ] } } } ] } } ] } } ] }, { "id": "reset_section", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" }, "modal": { "alert": { "isPresented": "${showReset}", "title": "Reset everything?", "message": "This removes all expenses and restores Alice and Bob.", "actions": [ { "id": "confirm_reset_button", "type": "button", "context": { "_label": "Reset" }, "style": { "common": { "foreground": { "color": "red" } } }, "events": { "onTap": [ { "state": { "id": "reset_all", "input": { "people": [ "Alice", "Bob" ], "expenses": [], "payer": "Alice", "showReset": false, "focused": "" }, "output": { "success": [ { "repo": { "id": "save_reset", "input": { "repositoryId": "store", "operation": "create", "params": { "collection": "split_expenses", "documentId": "main", "rewrite": true }, "body": { "people": "${people}", "expenses": "${expenses}" } } } }, { "service": { "id": "reset_haptic", "input": { "serviceId": "audio", "params": { "haptic": "error" } } } } ] } } } ] } }, { "id": "cancel_reset_button", "type": "button", "context": { "_label": "Cancel" }, "events": { "onTap": [ { "state": { "id": "cancel_reset", "input": { "showReset": false } } } ] } } ] } } }, "children": [ { "id": "show_reset_button", "type": "button", "context": { "_label": "Reset All" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } }, "common": { "tint": "red" } }, "events": { "onTap": [ { "state": { "id": "show_reset", "input": { "showReset": true } } } ] } }, { "id": "assumption_note", "type": "text", "context": { "_text": "Deleting a person also removes expenses they paid. All remaining expenses are re-split equally." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] } ] } ] } ] }