UI design

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

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)
+

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.