From a3131711ddac7ceaf9ca0cfc845f93ef13184081 Mon Sep 17 00:00:00 2001 From: Ben Coleman Date: Sat, 3 Jan 2026 17:12:11 -0500 Subject: [PATCH 1/2] restore a file I deleted by accident. --- docs/sample-dataset.md | 152 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 docs/sample-dataset.md diff --git a/docs/sample-dataset.md b/docs/sample-dataset.md new file mode 100644 index 0000000..77e634d --- /dev/null +++ b/docs/sample-dataset.md @@ -0,0 +1,152 @@ +# Sample Dataset Documentation + +This document provides example data for a collection of users in three different groups. Each group is designed to have expenses that demonstrate features of the Cost Sharing application. + + +## Users + +Each user has a name, email address (which must be unique), and list of groups. + +| Name | Email | Group Membership | +|------|-------|------------------| +| Alice | alice@school.edu | Group 1 (creator), Group 2 | +| Bob | bob@school.edu | Group 1 | +| Charlie | charlie@school.edu | Group 2 (creator) | +| David | david@school.edu | Group 2 | +| Eve | eve@school.edu | Group 3 (creator) | +| Frank | frank@school.edu | Group 3 | + + +--- + +## Group 1: Empty Group + +This group is made up of two users. There are no expenses associated with the group. + + +- **Name**: "Weekend Trip Planning" +- **Description**: "Planning expenses for upcoming weekend getaway" +- **Creator**: Alice (User ID: 1) +- **Members**: + - Alice (User ID: 1) - Group creator + - Bob (User ID: 2) + +### Expenses + +- **None** - No expenses have been added yet. + + +### Balances + +Since there are no expenses, both Alice and Bob have a zero balance. + + +--- + +## Group 2: Active Group with Multiple Expense Patterns + +This group contains 3 users that have logged in at least once. Each member has created at least one expense, +and these expenses demonstrate different subsets of group members as well as how costs are reported when the +shared cost produces fractional pennies. Finally, this group demonstrates how fractional pennies +are combined when balances are computed. + + +### Group Details + +- **Name**: "Roommates Spring 2025" +- **Description**: "Shared expenses for apartment 4B" +- **Creator**: Charlie (User ID: 3) +- **Members**: + - Charlie (User ID: 3) - Group creator + - Alice (User ID: 1) - Also a member of Group 1 (cross-group membership) + - David (User ID: 4) + +### Expenses + +1. **Grocery shopping** + - **Date**: 2025-01-10 + - **Paid by**: Charlie + - **Split between**: Charlie, Alice + - **Amount**: $86.40 + - **Per person**: $43.20 + +2. **Utilities bill** + - **Date**: 2025-01-15 + - **Paid by**: Alice + - **Split between**: Charlie, Alice + - **Amount**: $120.00 + - **Per person**: $60.00 + +3. **Restaurant dinner** + - **Date**: 2025-01-20 + - **Paid by**: David + - **Split between**: Alice, David + - **Amount**: $67.89 + - **Per person**: $33.95 (67.89 ÷ 2 = 33.945, rounds to 33.95) + - **Note**: $33.95 × 2 = $67.90 + +4. **Internet bill** + - **Date**: 2025-01-25 + - **Paid by**: Alice + - **Split between**: Charlie, Alice, David + - **Amount**: $100.00 + - **Per person**: $33.33 (100.00 ÷ 3 = 33.3333, rounds to $33.33) + - **Note**: 3 × $33.33 = $99.99 (not $100.00) + + +### Balances + +**Charlie:** +- **Total paid**: $86.40 (Expense #1) +- **Total owed**: $43.20 (Expense #1) + $60.00 (Expense #2) + $33.33 (Expense #4) = $136.53 +- **Net balance**: $86.40 - $136.53 = **-$50.13** (owes $50.13) + +**Alice:** +- **Total paid**: $120.00 (Expense #2) + $100.00 (Expense #4) = $220.00 +- **Total owed**: $43.20 (Expense #1) + $60.00 (Expense #2) + $33.95 (Expense #3) + $33.33 (Expense #4) = $170.48 +- **Net balance**: $220.00 - $170.48 = **+$49.52** (owed $49.52) + +**David:** +- **Total paid**: $67.89 (Expense #3) +- **Total owed**: $33.95 (Expense #3) + $33.33 (Expense #4) = $67.28 +- **Net balance**: $67.89 - $67.28 = **+$0.61** (owed $0.61) + +*Note: The rounding in Expense #4 creates a small discrepancy. The expense amount is $100.00, but the per-person amounts sum to $99.99 (3 × $33.33), leaving $0.01 unallocated due to rounding. However, the net balances (-$50.13 + $49.52 + $0.61) correctly sum to $0.00, as Alice was paid $100.00 but only $99.99 is owed by participants.* + + + +--- + +## Group 3: Group with Expense + +This group has two members. The creator of the group has already added an expense. + +### Group Details +- **Name**: "Project Team Expenses" +- **Description**: "Team project collaboration costs" +- **Creator**: Eve (User ID: 5) +- **Members**: + - Eve (User ID: 5) - Group creator + - Frank (User ID: 6) + +### Expenses + +1. **Team lunch** + - **Date**: 2025-02-01 + - **Paid by**: Eve (creator) + - **Split between**: Eve, Frank + - **Amount**: $45.67 + - **Per person**: $22.84 (45.67 ÷ 2 = 22.835, rounds to 22.84) + +### Balances + +**Eve:** +- **Total paid**: $45.67 (Expense #1) +- **Total owed**: $22.84 (Expense #1) +- **Net balance**: $45.67 - $22.84 = **+$22.83** (owed $22.83) + +**Frank:** +- **Total paid**: $0.00 (no expenses paid) +- **Total owed**: $22.84 (Expense #1) +- **Net balance**: $0.00 - $22.84 = **-$22.84** (owes $22.84) + From 22c451e1ef561ea626afbb7f6f2ff2d16c206b13 Mon Sep 17 00:00:00 2001 From: Ben Coleman Date: Sat, 3 Jan 2026 17:30:35 -0500 Subject: [PATCH 2/2] Add UI design documents. * README that provides high-level discussion of design and links to example views. * static HTML pages for each view (tabs and modals) * CSS style file for all elements --- README.md | 1 + docs/ui/README.md | 25 + docs/ui/css/style.css | 758 +++++++++++++++++++++++++++ docs/ui/examples/add-member.html | 115 ++++ docs/ui/examples/balances.html | 139 +++++ docs/ui/examples/create-expense.html | 204 +++++++ docs/ui/examples/create-group.html | 86 +++ docs/ui/examples/edit-expense.html | 205 ++++++++ docs/ui/examples/expenses.html | 153 ++++++ docs/ui/examples/group-details.html | 214 ++++++++ docs/ui/examples/groups-list.html | 57 ++ docs/ui/examples/login.html | 21 + 12 files changed, 1978 insertions(+) create mode 100644 docs/ui/README.md create mode 100644 docs/ui/css/style.css create mode 100644 docs/ui/examples/add-member.html create mode 100644 docs/ui/examples/balances.html create mode 100644 docs/ui/examples/create-expense.html create mode 100644 docs/ui/examples/create-group.html create mode 100644 docs/ui/examples/edit-expense.html create mode 100644 docs/ui/examples/expenses.html create mode 100644 docs/ui/examples/group-details.html create mode 100644 docs/ui/examples/groups-list.html create mode 100644 docs/ui/examples/login.html diff --git a/README.md b/README.md index 27175d8..838c5a5 100644 --- a/README.md +++ b/README.md @@ -110,3 +110,4 @@ The system is organized as a three-tier architecture: * [src/cost_sharing/sql/schema-sqlite.sql](src/cost_sharing/sql/schema-sqlite.sql) contains schema for all database tables * [src/cost_sharing/sql/sample-data.sql](src/cost_sharing/sql/sample-data.sql) contains the sample dataset in SQL format * [docs/api.yaml](docs/api.yaml) contains an OpenAPI specification of all API endpoints. +* [docs/ui/README.md](docs/ui/README.md) contains HTML and CSS mockups web pages diff --git a/docs/ui/README.md b/docs/ui/README.md new file mode 100644 index 0000000..9a13689 --- /dev/null +++ b/docs/ui/README.md @@ -0,0 +1,25 @@ +# Cost Sharing UI Design + +This directory contains example HTML pages that demonstrate the user interface design for the Cost Sharing application. These examples use static data and no JavaScript - they are intended to show the visual structure and layout of the application: + +- **Single Page Application**: All views are shown/hidden using JavaScript state management +- **Tabbed Interface**: Group details use tabs to organize Members, Expenses, and Balances +- **Modal Forms**: Expense creation, group creation, and member addition use modal overlays +- **Responsive Design**: Layout adapts to different screen sizes + +## Example HTML + +* [Login](examples/login.html) - The initial view shown to unauthenticated users +* [Groups List](examples/groups-list.html) - Page to view and manage groups +* [Create Group](examples/create-group.html) - Modal overlay to create a new group +* [Group Details](examples/group-details.html) - Page to view details of a group and manage membership +* [Add Member](examples/add-member.html) - Modal overlay to add a member to a group +* [Expenses](examples/expenses.html) - Page to manage expenses of a group +* [Create Expense](examples/create-expense.html) - Modal overlay to create a new expense +* [Edit Expense](examples/edit-expense.html) - Modal overlay to edit an existing expense +* [Balances](examples/balances.html) - Page to show a summary of expenses and reconciliation + + +## Example CSS + +The CSS file [`css/style.css`](css/style.css) contains all styles needed for the application. diff --git a/docs/ui/css/style.css b/docs/ui/css/style.css new file mode 100644 index 0000000..d24e228 --- /dev/null +++ b/docs/ui/css/style.css @@ -0,0 +1,758 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + max-width: 1200px; + margin: 0 auto; + padding: 0; + background-color: #f5f5f5; + min-height: 100vh; +} + +.container { + background: white; + border-radius: 8px; + padding: 30px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 20px; +} + +h1 { + margin-top: 0; + color: #333; +} + +h2 { + margin-top: 0; + color: #333; + font-size: 1.5em; +} + +h3 { + margin-top: 0; + color: #495057; + font-size: 1.2em; +} + +.status { + padding: 12px; + border-radius: 4px; + margin-bottom: 20px; + font-weight: 500; +} + +.status.logged-in { + background-color: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; +} + +.status.logged-out { + background-color: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + +.user-info { + background-color: #f8f9fa; + padding: 20px; + border-radius: 4px; + margin-bottom: 20px; +} + +.user-info h2 { + margin-top: 0; + font-size: 1.2em; + color: #495057; +} + +.user-info p { + margin: 8px 0; + color: #6c757d; +} + +.user-info strong { + color: #212529; +} + +.token-display { + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid #dee2e6; +} + +.token-display summary { + cursor: pointer; + color: #6c757d; + font-size: 0.9em; + user-select: none; +} + +.token-display summary:hover { + color: #495057; +} + +.token-display code { + display: block; + margin-top: 8px; + padding: 8px; + background-color: #e9ecef; + border-radius: 4px; + font-size: 0.85em; + word-break: break-all; + color: #212529; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 1em; + margin-right: 10px; + margin-bottom: 10px; +} + +button:hover { + background-color: #0056b3; +} + +button:active { + background-color: #004085; +} + +button.logout { + background-color: #dc3545; +} + +button.logout:hover { + background-color: #c82333; +} + +button.secondary { + background-color: #6c757d; +} + +button.secondary:hover { + background-color: #5a6268; +} + +button.danger { + background-color: #dc3545; +} + +button.danger:hover { + background-color: #c82333; +} + +button:disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + +button.small { + padding: 6px 12px; + font-size: 0.875em; +} + +.error { + background-color: #f8d7da; + color: #721c24; + padding: 12px; + border-radius: 4px; + margin-bottom: 20px; + border: 1px solid #f5c6cb; +} + +.hidden { + display: none; +} + +/* Navigation Bar */ +nav { + background-color: #343a40; + color: white; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +nav h1 { + margin: 0; + color: white; + font-size: 1.5em; +} + +nav .nav-links { + display: flex; + gap: 20px; + align-items: center; +} + +nav a { + color: white; + text-decoration: none; + padding: 8px 16px; + border-radius: 4px; + transition: background-color 0.2s; +} + +nav a:hover { + background-color: #495057; +} + +nav .user-name { + color: #adb5bd; + margin-right: 10px; +} + +/* Groups List */ +.groups-list { + display: grid; + gap: 20px; + margin-top: 20px; +} + +.group-card { + background-color: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 8px; + padding: 20px; + transition: box-shadow 0.2s; + cursor: pointer; +} + +.group-card:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.group-card h3 { + margin-top: 0; + color: #007bff; +} + +.group-card .group-description { + color: #6c757d; + margin: 10px 0; +} + +.group-card .group-meta { + color: #6c757d; + font-size: 0.9em; + margin-top: 10px; +} + +.group-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 20px; +} + +.group-card-header > div:first-child { + flex: 1; +} + +.group-card-actions { + display: flex; + gap: 10px; + flex-shrink: 0; +} + +/* Page Header */ +.page-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 20px; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 2px solid #dee2e6; +} + +.page-header > div:first-child { + flex: 1; +} + +.page-header h2 { + margin-top: 0; + margin-bottom: 10px; +} + +.page-header p { + margin: 0; + color: #6c757d; +} + +.page-actions { + display: flex; + gap: 10px; + flex-wrap: wrap; + flex-shrink: 0; +} + +/* Group Details */ +.group-header { + border-bottom: 2px solid #dee2e6; + padding-bottom: 20px; + margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 20px; +} + +.group-header > div:first-child { + flex: 1; +} + +.group-header h2 { + margin-bottom: 10px; + margin-top: 0; +} + +.group-header .group-description { + color: #6c757d; + margin-bottom: 0; +} + +.group-header .group-actions { + display: flex; + gap: 10px; + flex-wrap: wrap; + flex-shrink: 0; +} + +/* Tabs */ +.tabs { + display: flex; + border-bottom: 2px solid #dee2e6; + margin-bottom: 20px; +} + +.tab { + padding: 12px 24px; + background: none; + border: none; + border-bottom: 3px solid transparent; + cursor: pointer; + font-size: 1em; + color: #6c757d; + margin: 0; + margin-right: 10px; + transition: all 0.2s; +} + +.tab:hover { + color: #007bff; + background-color: #f8f9fa; +} + +.tab.active { + color: #007bff; + border-bottom-color: #007bff; + font-weight: 600; +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +/* Tables */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +table th { + background-color: #f8f9fa; + padding: 12px; + text-align: left; + font-weight: 600; + color: #495057; + border-bottom: 2px solid #dee2e6; +} + +table td { + padding: 12px; + border-bottom: 1px solid #dee2e6; +} + +table tr:hover { + background-color: #f8f9fa; +} + +table .amount { + text-align: right; + font-weight: 600; + color: #28a745; +} + +table .amount.negative { + color: #dc3545; +} + +table .actions { + text-align: right; +} + +/* Expense List */ +.expense-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + border: 1px solid #dee2e6; + border-radius: 8px; + margin-bottom: 10px; + background-color: white; +} + +.expense-item:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.expense-item .expense-info { + flex: 1; +} + +.expense-item .expense-description { + font-weight: 600; + color: #333; + margin-bottom: 5px; +} + +.expense-item .expense-meta { + color: #6c757d; + font-size: 0.9em; +} + +.expense-item .expense-amount { + font-size: 1.2em; + font-weight: 600; + color: #28a745; + margin-right: 20px; +} + +/* Members List */ +.members-list { + display: grid; + gap: 15px; + margin-top: 20px; +} + +.member-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + border: 1px solid #dee2e6; + border-radius: 8px; + background-color: white; +} + +.member-item .member-info { + flex: 1; +} + +.member-item .member-name { + font-weight: 600; + color: #333; + margin-bottom: 5px; +} + +.member-item .member-email { + color: #6c757d; + font-size: 0.9em; +} + +.member-item .member-badge { + display: inline-block; + background-color: #007bff; + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 0.8em; + margin-left: 10px; +} + +/* Balances */ +.balance-summary { + background-color: #f8f9fa; + padding: 20px; + border-radius: 8px; + margin-bottom: 20px; +} + +.balance-summary h3 { + margin-top: 0; +} + +.balance-item { + display: flex; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #dee2e6; +} + +.balance-item:last-child { + border-bottom: none; +} + +.balance-item .balance-name { + font-weight: 600; +} + +.balance-item .balance-amount { + font-weight: 600; +} + +.balance-item .balance-amount.owed { + color: #dc3545; +} + +.balance-item .balance-amount.owed-by { + color: #28a745; +} + +.balance-details { + margin-top: 20px; +} + +.balance-details h3 { + margin-bottom: 15px; +} + +.debt-item { + padding: 12px; + border: 1px solid #dee2e6; + border-radius: 8px; + margin-bottom: 10px; + background-color: white; +} + +.debt-item .debt-text { + color: #6c757d; +} + +.debt-item .debt-amount { + font-weight: 600; + color: #dc3545; + margin-top: 5px; +} + +/* Forms */ +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: 600; + color: #495057; +} + +.form-group label .required { + color: #dc3545; + margin-left: 3px; +} + +.form-group input, +.form-group textarea, +.form-group select { + width: 100%; + padding: 10px; + border: 1px solid #ced4da; + border-radius: 4px; + font-size: 1em; + font-family: inherit; + box-sizing: border-box; +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: #007bff; + box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.form-group .checkbox-group { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +.form-group .checkbox-item { + display: flex; + align-items: center; + gap: 10px; +} + +.form-group .checkbox-item input[type="checkbox"] { + width: auto; + margin: 0; +} + +.form-group .checkbox-item input[type="checkbox"]:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.form-group .checkbox-item input[type="checkbox"]:disabled + label { + color: #6c757d; + cursor: not-allowed; +} + +.form-group .checkbox-item label { + margin: 0; + font-weight: normal; + cursor: pointer; +} + +.form-actions { + display: flex; + gap: 10px; + justify-content: flex-end; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid #dee2e6; +} + +/* Modal */ +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + align-items: center; + justify-content: center; +} + +.modal-overlay.active { + display: flex; +} + +.modal { + background: white; + border-radius: 8px; + padding: 30px; + max-width: 600px; + width: 90%; + max-height: 90vh; + overflow-y: auto; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 2px solid #dee2e6; +} + +.modal-header h2 { + margin: 0; +} + +.modal-close { + background: none; + border: none; + font-size: 1.5em; + color: #6c757d; + cursor: pointer; + padding: 0; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; +} + +.modal-close:hover { + background-color: #f8f9fa; + color: #333; +} + +/* Empty State */ +.empty-state { + text-align: center; + padding: 40px 20px; + color: #6c757d; +} + +.empty-state p { + font-size: 1.1em; + margin-bottom: 20px; +} + +/* Responsive */ +@media (max-width: 768px) { + body { + margin: 0; + } + + .container { + margin: 10px; + padding: 20px; + } + + nav { + flex-direction: column; + gap: 15px; + align-items: flex-start; + } + + nav .nav-links { + width: 100%; + flex-direction: column; + gap: 10px; + align-items: stretch; + } + + .tabs { + flex-wrap: wrap; + } + + .tab { + flex: 1; + min-width: 100px; + } + + table { + font-size: 0.9em; + } + + .expense-item { + flex-direction: column; + align-items: flex-start; + } + + .expense-item .expense-amount { + margin-top: 10px; + margin-right: 0; + } +} + diff --git a/docs/ui/examples/add-member.html b/docs/ui/examples/add-member.html new file mode 100644 index 0000000..49bd389 --- /dev/null +++ b/docs/ui/examples/add-member.html @@ -0,0 +1,115 @@ + + + + + + Cost Sharing - Add Member + + + + + +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
+
+ +
+
+ +
+ + + +
+ +
+
+
+

Group Members

+

Manage members of this group.

+
+
+ +
+
+ +
+
+
+
Charlie Creator
+
charlie@school.edu
+
+
+ +
+
+
Alice
+
alice@school.edu
+
+ + + +
+ +
+
+
David
+
david@school.edu
+
+
+
+
+ +
+

Expenses

+

View and manage expenses for this group.

+
+ +
+

Balances

+

Current balances for this group.

+
+
+ + +
+
+
+

Add Member

+ +
+ +
+
+ + + Required. A user account will be created if it doesn't exist. +
+ +
+ + + Required. The member's full name. +
+ +
+ + +
+
+
+
+ + + diff --git a/docs/ui/examples/balances.html b/docs/ui/examples/balances.html new file mode 100644 index 0000000..7eb2635 --- /dev/null +++ b/docs/ui/examples/balances.html @@ -0,0 +1,139 @@ + + + + + + Cost Sharing - Balances + + + + + +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
+
+ +
+
+ +
+ + + +
+ +
+

Group Members

+

Manage members of this group.

+
+ +
+

Expenses

+

View and manage expenses for this group.

+
+ +
+

Balances

+

Current balances showing who owes whom in this group.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PersonPaidShare of ExpensesNet Balance
+
Alice
+ 		+
$220.00
+ 		+
$170.48
+ 		+
+$49.52
+
+
Charlie
+ 		+
$86.40
+ 		+
$136.53
+ 		+
-$50.13
+
+
David
+ 		+
$67.89
+ 		+
$67.28
+ 		+
+$0.61
+
+ +
+

Who Owes Whom

+

These are the amounts that need to be paid to settle all debts.

+ + + + + + + + + + + + + + + + + + + + + +
FromToAmount
CharlieAlice +
$50.13
+
DavidAlice +
$0.61
+
+
+
+
+ + + diff --git a/docs/ui/examples/create-expense.html b/docs/ui/examples/create-expense.html new file mode 100644 index 0000000..8faf63a --- /dev/null +++ b/docs/ui/examples/create-expense.html @@ -0,0 +1,204 @@ + + + + + + Cost Sharing - Create Expense + + + + + +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
+
+ +
+
+ +
+ + + +
+ +
+

Group Members

+

Manage members of this group.

+
+ +
+

Expenses

+

View and manage expenses for this group.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExpensePeopleTotal AmountYour ShareActions
+
Grocery shopping
+
Paid by Charlie on Jan 10, 2025
+ 		+
2
+ 		+
$86.40
+ 		+
$43.20
+
+
Utilities bill
+
Paid by Alice on Jan 15, 2025
+ 		+
2
+ 		+
$120.00
+ 		+
$60.00
+ 		+
+ + +
+
+
Restaurant dinner
+
Paid by David on Jan 20, 2025
+ 		+
2
+ 		+
$67.89
+ 		+
$33.95
+
+
Internet bill
+
Paid by Alice on Jan 25, 2025
+ 		+
3
+ 		+
$100.00
+ 		+
$33.33
+ 		+
+ + +
+
+
Your total share of expenses
+
Sum of your share from all expenses
+ 		+
$170.48
+
+
+ +
+

Balances

+

Current balances for this group.

+
+
+ + +
+
+
+

Create Expense

+ +
+ +

You (Alice) will be recorded as the person who paid for this expense.

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+
+
+
+ + diff --git a/docs/ui/examples/create-group.html b/docs/ui/examples/create-group.html new file mode 100644 index 0000000..f7246ac --- /dev/null +++ b/docs/ui/examples/create-group.html @@ -0,0 +1,86 @@ + + + + + + Cost Sharing - Create Group + + + + + +
+
+
+

My Groups

+

Select a group to view details, expenses, and balances.

+
+
+ +
+
+ +
+
+
+
+

Weekend Trip Planning

+

Planning expenses for upcoming weekend getaway

+
2 members
+
+
+ +
+
+
+ +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
3 members
+
+
+
+
+
+ + +
+
+
+

Create Group

+ +
+ +
+
+ + + Required. 1-100 characters. +
+ +
+ + + Optional. Up to 500 characters. +
+ +
+ + +
+
+
+
+ + + diff --git a/docs/ui/examples/edit-expense.html b/docs/ui/examples/edit-expense.html new file mode 100644 index 0000000..08097d2 --- /dev/null +++ b/docs/ui/examples/edit-expense.html @@ -0,0 +1,205 @@ + + + + + + Cost Sharing - Edit Expense + + + + + +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
+
+ +
+
+ +
+ + + +
+ +
+

Group Members

+

Manage members of this group.

+
+ +
+

Expenses

+

View and manage expenses for this group.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExpensePeopleTotal AmountYour ShareActions
+
Grocery shopping
+
Paid by Charlie on Jan 10, 2025
+ 		+
2
+ 		+
$86.40
+ 		+
$43.20
+
+
Utilities bill
+
Paid by Alice on Jan 15, 2025
+ 		+
2
+ 		+
$120.00
+ 		+
$60.00
+ 		+
+ + +
+
+
Restaurant dinner
+
Paid by David on Jan 20, 2025
+ 		+
2
+ 		+
$67.89
+ 		+
$33.95
+
+
Internet bill
+
Paid by Alice on Jan 25, 2025
+ 		+
3
+ 		+
$100.00
+ 		+
$33.33
+ 		+
+ + +
+
+
Your total share of expenses
+
Sum of your share from all expenses
+ 		+
$170.48
+
+
+ +
+

Balances

+

Current balances for this group.

+
+
+ + +
+
+
+

Edit Expense

+ +
+ +

You (Alice) are recorded as the person who paid for this expense.

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+
+
+
+ + + diff --git a/docs/ui/examples/expenses.html b/docs/ui/examples/expenses.html new file mode 100644 index 0000000..f105c4f --- /dev/null +++ b/docs/ui/examples/expenses.html @@ -0,0 +1,153 @@ + + + + + + Cost Sharing - Expenses + + + + + +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
+
+ +
+
+ +
+ + + +
+ +
+

Group Members

+

Manage members of this group.

+
+ +
+

Expenses

+

View and manage expenses for this group.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExpensePeopleTotal AmountYour ShareActions
+
Grocery shopping
+
Paid by Charlie on Jan 10, 2025
+ 		+
2
+ 		+
$86.40
+ 		+
$43.20
+
+
Utilities bill
+
Paid by Alice on Jan 15, 2025
+ 		+
2
+ 		+
$120.00
+ 		+
$60.00
+ 		+
+ + +
+
+
Restaurant dinner
+
Paid by David on Jan 20, 2025
+ 		+
2
+ 		+
$67.89
+ 		+
$33.95
+
+
Internet bill
+
Paid by Alice on Jan 25, 2025
+ 		+
3
+ 		+
$100.00
+ 		+
$33.33
+ 		+
+ + +
+
+
Your total share of expenses
+
Sum of your share from all expenses
+ 		+
$170.48
+
+
+ +
+

Balances

+

Current balances for this group.

+
+
+ + + diff --git a/docs/ui/examples/group-details.html b/docs/ui/examples/group-details.html new file mode 100644 index 0000000..da6d889 --- /dev/null +++ b/docs/ui/examples/group-details.html @@ -0,0 +1,214 @@ + + + + + + Cost Sharing - Roommates Spring 2025 + + + + + +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
+
+ +
+
+ +
+ + + +
+ +
+
+
+

Group Members

+

Manage members of this group.

+
+
+ +
+
+ +
+
+
+
Charlie Creator
+
charlie@school.edu
+
+
+ +
+
+
Alice
+
alice@school.edu
+
+ + + +
+ +
+
+
David
+
david@school.edu
+
+
+
+
+ +
+

Expenses

+

View and manage expenses for this group.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExpensePeopleTotal AmountYour ShareActions
+
Grocery shopping
+
Paid by Charlie on Jan 10, 2025
+ 		+
2
+ 		+
$86.40
+ 		+
$43.20
+
+
Utilities bill
+
Paid by Alice on Jan 15, 2025
+ 		+
2
+ 		+
$120.00
+ 		+
$60.00
+ 		+
+ + +
+
+
Restaurant dinner
+
Paid by David on Jan 20, 2025
+ 		+
2
+ 		+
$67.89
+ 		+
$33.95
+
+
Internet bill
+
Paid by Alice on Jan 25, 2025
+ 		+
3
+ 		+
$100.00
+ 		+
$33.33
+ 		+
+ + +
+
+
Your total share of expenses
+
Sum of your share from all expenses
+ 		+
$170.48
+
+
+ +
+

Balances

+

Current balances for this group.

+ +
+

Summary

+
+ Alice + +$49.52 +
+
+ Charlie + -$50.13 +
+
+ David + +$0.61 +
+
+ +
+

Who Owes Whom

+
+
Charlie owes Alice
+
$50.13
+
+
+
David owes Alice
+
$0.61
+
+
+
+
+ + + diff --git a/docs/ui/examples/groups-list.html b/docs/ui/examples/groups-list.html new file mode 100644 index 0000000..1652369 --- /dev/null +++ b/docs/ui/examples/groups-list.html @@ -0,0 +1,57 @@ + + + + + + Cost Sharing - My Groups + + + + + +
+
+
+

My Groups

+

Select a group to view details, expenses, and balances.

+
+
+ +
+
+ +
+
+
+
+

Weekend Trip Planning

+

Planning expenses for upcoming weekend getaway

+
2 members
+
+
+ +
+
+
+ +
+
+
+

Roommates Spring 2025

+

Shared expenses for apartment 4B

+
3 members
+
+
+
+
+
+ + + diff --git a/docs/ui/examples/login.html b/docs/ui/examples/login.html new file mode 100644 index 0000000..d91e2c2 --- /dev/null +++ b/docs/ui/examples/login.html @@ -0,0 +1,21 @@ + + + + + + Cost Sharing - Login + + + +
+

Cost Sharing

+
Not Logged In
+ +
+

Please log in with your Google account to access the Cost Sharing application.

+ +
+
+ + +