mo/mitlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement WebSocket enhancements and introduce new components for settlements
Some checks failed
Deploy to Production, build images and push to Gitea Registry / build_and_push (pull_request) Failing after 1m17s
Details

Browse Source 
This commit includes several key updates and new features:

- Enhanced WebSocket functionality across various components, improving real-time communication and user experience.
- Introduced new components for managing settlements, including `SettlementCard.vue`, `SettlementForm.vue`, and `SuggestedSettlementsCard.vue`, to streamline financial interactions.
- Updated existing components and services to support the new settlement features, ensuring consistency and improved performance.
- Added advanced performance optimizations to enhance loading times and responsiveness throughout the application.

These changes aim to provide a more robust and user-friendly experience in managing financial settlements and real-time interactions.
This commit is contained in:
mohamad 2025-06-30 01:07:10 +02:00
parent 5a2e80eeee
commit 66daa19cd5
65 changed files with 14242 additions and 3048 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
be/app/api/v1/endpoints/items.py
View File

@ -243,4 +243,41 @@ async def unclaim_item(
}
await broadcast_event(f"list_{updated_item.list_id}", event)
return updated_item
return updated_item
@router.put(
"/lists/{list_id}/items/reorder",
status_code=status.HTTP_204_NO_CONTENT,
summary="Reorder Items in List",
tags=["Items"]
)
async def reorder_list_items(
list_id: int,
ordered_ids: PyList[int],
db: AsyncSession = Depends(get_transactional_session),
current_user: UserModel = Depends(current_active_user),
):
"""Reorders items in a list based on the provided ordered list of item IDs."""
user_email = current_user.email
logger.info(f"User {user_email} reordering items in list {list_id}: {ordered_ids}")
try:
await crud_list.check_list_permission(db=db, list_id=list_id, user_id=current_user.id)
except ListPermissionError as e:
raise ListPermissionError(list_id, "reorder items in this list")
await crud_item.reorder_items(db=db, list_id=list_id, ordered_ids=ordered_ids)
# Broadcast the reorder event
event = {
"type": "item_reordered",
"payload": {
"list_id": list_id,
"ordered_ids": ordered_ids
}
}
await broadcast_event(f"list_{list_id}", event)
logger.info(f"Items in list {list_id} reordered successfully by user {user_email}.")
return Response(status_code=status.HTTP_204_NO_CONTENT)

303
be/app/api/v1/endpoints/websocket.py
View File

@ -1,79 +1,280 @@
from fastapi import APIRouter, WebSocket, WebSocketDisconnect, Query, status, Depends
from sqlalchemy.ext.asyncio import AsyncSession
from app.auth import get_jwt_strategy, get_user_from_token
from app.auth import get_user_from_token
from app.database import get_transactional_session
from app.crud import list as crud_list
from app.core.redis import subscribe_to_channel, unsubscribe_from_channel
from app.crud import list as crud_list, group as crud_group
from app.core.websocket import websocket_manager, WebSocketEvent
from app.models import User
import asyncio
import json
import logging
router = APIRouter()
logger = logging.getLogger(__name__)
@router.websocket("/ws/household/{household_id}")
async def household_websocket_endpoint(
websocket: WebSocket,
household_id: int,
token: str = Query(...),
db: AsyncSession = Depends(get_transactional_session),
):
"""
Main WebSocket endpoint for household-wide real-time features
Handles: chores, expenses, general household activity, member presence
"""
user = await get_user_from_token(token, db)
if not user:
await websocket.close(code=status.WS_1008_POLICY_VIOLATION)
return
async def _verify_jwt(token: str):
"""Return user_id from JWT or None if invalid/expired."""
strategy = get_jwt_strategy()
try:
# FastAPI Users' JWTStrategy.read_token returns the user ID encoded in the token
user_id = await strategy.read_token(token)
return user_id
except Exception: # pragma: no cover – any decoding/expiration error
return None
# Verify user is member of this household
household = await crud_group.get_group_with_user_check(db, household_id, user.id)
if not household:
await websocket.close(code=status.WS_1003_UNSUPPORTED_DATA)
return
except Exception as e:
logger.error(f"Household permission check failed: {e}")
await websocket.close(code=status.WS_1003_UNSUPPORTED_DATA)
return
# Connect to WebSocket manager
connected = await websocket_manager.connect(websocket, user.id, user.name or f"User {user.id}")
if not connected:
return
@router.websocket("/ws/lists/{list_id}")
# Subscribe to household room
household_room = f"household:{household_id}"
websocket_manager.join_room(user.id, household_room)
# Notify other members that user came online
member_activity_event = WebSocketEvent(
event="group:member_activity",
payload={
"user_id": user.id,
"last_seen": user.created_at.isoformat(), # Use created_at as placeholder
"is_active": True,
"action": "connected"
},
timestamp=websocket_manager.connections[user.id].connected_at.isoformat(),
user_id=user.id
)
await websocket_manager.send_to_room(household_room, member_activity_event, exclude_user=user.id)
try:
# Send welcome message
welcome_event = WebSocketEvent(
event="connection:established",
payload={
"message": f"Connected to household {household.name}",
"household_id": household_id,
"rooms": [household_room]
},
timestamp=websocket_manager.connections[user.id].connected_at.isoformat()
)
await websocket_manager.send_to_user(user.id, welcome_event)
# Keep connection alive and handle incoming messages
while True:
try:
# Wait for incoming messages
message = await websocket.receive_text()
data = json.loads(message)
# Handle different message types
await handle_websocket_message(user.id, household_id, data, db)
except WebSocketDisconnect:
break
except json.JSONDecodeError:
logger.warning(f"Invalid JSON from user {user.id}")
except Exception as e:
logger.error(f"Error handling WebSocket message from user {user.id}: {e}")
except WebSocketDisconnect:
pass
except Exception as e:
logger.error(f"WebSocket error for user {user.id} in household {household_id}: {e}")
finally:
# Notify other members that user went offline
offline_event = WebSocketEvent(
event="group:member_activity",
payload={
"user_id": user.id,
"last_seen": websocket_manager.connections[user.id].last_activity.isoformat() if user.id in websocket_manager.connections else None,
"is_active": False,
"action": "disconnected"
},
timestamp=websocket_manager.connections[user.id].last_activity.isoformat() if user.id in websocket_manager.connections else None,
user_id=user.id
)
await websocket_manager.send_to_room(household_room, offline_event, exclude_user=user.id)
# Disconnect from WebSocket manager
await websocket_manager.disconnect(user.id)
@router.websocket("/ws/list/{list_id}")
async def list_websocket_endpoint(
websocket: WebSocket,
list_id: int,
token: str = Query(...),
db: AsyncSession = Depends(get_transactional_session),
):
"""Authenticated WebSocket endpoint for a specific list."""
"""
WebSocket endpoint for list-specific real-time features
Handles: item claiming, real-time collaboration, purchase confirmations
"""
user = await get_user_from_token(token, db)
if not user:
await websocket.close(code=status.WS_1008_POLICY_VIOLATION)
return
try:
# Verify the user has access to this list's group
# Verify user has access to this list
await crud_list.check_list_permission(db, list_id, user.id)
except Exception:
except Exception as e:
logger.error(f"List permission check failed: {e}")
await websocket.close(code=status.WS_1003_UNSUPPORTED_DATA)
return
await websocket.accept()
# Temporary: Test connection without Redis
try:
print(f"WebSocket connected for list {list_id}, user {user.id}")
# Send a test message
await websocket.send_text('{"event": "connected", "payload": {"message": "WebSocket connected successfully"}}')
# Keep connection alive
while True:
await asyncio.sleep(10)
# Send periodic ping to keep connection alive
await websocket.send_text('{"event": "ping", "payload": {}}')
except WebSocketDisconnect:
print(f"WebSocket disconnected for list {list_id}, user {user.id}")
pass
except Exception as e:
print(f"WebSocket error for list {list_id}, user {user.id}: {e}")
pass
# Connect to WebSocket manager (reuse existing connection if available)
if user.id not in websocket_manager.connections:
connected = await websocket_manager.connect(websocket, user.id, user.name or f"User {user.id}")
if not connected:
return
else:
# Use existing connection but accept this websocket for this specific list
await websocket.accept()
@router.websocket("/ws/{household_id}")
async def household_websocket_endpoint(
websocket: WebSocket,
household_id: int,
token: str = Query(...),
db: AsyncSession = Depends(get_transactional_session)
):
"""Authenticated WebSocket endpoint for a household."""
user = await get_user_from_token(token, db)
if not user:
await websocket.close(code=status.WS_1008_POLICY_VIOLATION)
return
# TODO: Add permission check for household
await websocket.accept()
# ... rest of household logic
# Subscribe to list-specific room
list_room = f"list:{list_id}"
websocket_manager.join_room(user.id, list_room)
try:
# Send list connection confirmation
list_welcome = WebSocketEvent(
event="list:connected",
payload={
"message": f"Connected to list {list_id}",
"list_id": list_id,
"active_users": websocket_manager.get_room_members(list_room)
},
timestamp=websocket_manager.connections[user.id].last_activity.isoformat()
)
await websocket_manager.send_to_user(user.id, list_welcome)
# Keep connection alive for list-specific events
while True:
try:
# For list-specific endpoint, we primarily listen for events
# Most interactions will be handled through the main household WebSocket
await asyncio.sleep(30) # Periodic check
# Send periodic ping to keep list connection active
ping_event = WebSocketEvent(
event="list:ping",
payload={"list_id": list_id},
timestamp=websocket_manager.connections[user_id].last_activity.isoformat() if user.id in websocket_manager.connections else None
)
await websocket_manager.send_to_user(user.id, ping_event)
except WebSocketDisconnect:
break
except Exception as e:
logger.error(f"List WebSocket error for user {user.id}: {e}")
break
except WebSocketDisconnect:
pass
finally:
# Leave list room but don't disconnect main connection
websocket_manager.leave_room(user.id, list_room)
async def handle_websocket_message(user_id: int, household_id: int, data: dict, db: AsyncSession):
"""
Handle incoming WebSocket messages from clients
Supports editing indicators, presence updates, etc.
"""
message_type = data.get("type")
payload = data.get("payload", {})
if message_type == "editing_started":
# User started editing an entity
entity_type = payload.get("entity_type")
entity_id = payload.get("entity_id")
field = payload.get("field")
if entity_type and entity_id:
event = WebSocketEvent(
event=f"{entity_type}:editing_started",
payload={
f"{entity_type}_id": entity_id,
"user_id": user_id,
"user_name": websocket_manager.connections[user_id].user_name,
"field": field
},
timestamp=websocket_manager.connections[user_id].last_activity.isoformat(),
user_id=user_id
)
# Send to appropriate room
if entity_type == "expense":
await websocket_manager.broadcast_to_expense(entity_id, event, exclude_user=user_id)
elif entity_type == "chore":
await websocket_manager.broadcast_to_household(household_id, event, exclude_user=user_id)
elif entity_type == "list":
await websocket_manager.broadcast_to_list(entity_id, event, exclude_user=user_id)
elif message_type == "editing_stopped":
# User stopped editing an entity
entity_type = payload.get("entity_type")
entity_id = payload.get("entity_id")
if entity_type and entity_id:
event = WebSocketEvent(
event=f"{entity_type}:editing_stopped",
payload={f"{entity_type}_id": entity_id},
timestamp=websocket_manager.connections[user_id].last_activity.isoformat(),
user_id=user_id
)
# Send to appropriate room
if entity_type == "expense":
await websocket_manager.broadcast_to_expense(entity_id, event, exclude_user=user_id)
elif entity_type == "chore":
await websocket_manager.broadcast_to_household(household_id, event, exclude_user=user_id)
elif entity_type == "list":
await websocket_manager.broadcast_to_list(entity_id, event, exclude_user=user_id)
elif message_type == "presence_update":
# User presence/activity update
action = payload.get("action", "active")
event = WebSocketEvent(
event="group:member_activity",
payload={
"user_id": user_id,
"last_seen": websocket_manager.connections[user_id].last_activity.isoformat(),
"is_active": True,
"action": action
},
timestamp=websocket_manager.connections[user_id].last_activity.isoformat(),
user_id=user_id
)
await websocket_manager.broadcast_to_household(household_id, event, exclude_user=user_id)
else:
logger.warning(f"Unknown WebSocket message type: {message_type} from user {user_id}")
# Utility endpoint to get current WebSocket status
@router.get("/ws/status")
async def websocket_status():
"""Get current WebSocket connection status"""
return {
"connected_users": websocket_manager.get_connected_users(),
"total_connections": len(websocket_manager.connections),
"total_rooms": len(websocket_manager.rooms),
"rooms": {room: len(users) for room, users in websocket_manager.rooms.items()}
}

14
be/app/auth.py
View File

@ -183,18 +183,28 @@ async def get_user_from_token(token: str, db: AsyncSession) -> Optional[User]:
strategy = get_jwt_strategy()
print(f"Attempting to decode token: {token[:50]}...")
try:
user_id = await strategy.read_token(token)
user_id_raw = await strategy.read_token(token)
print(f"Raw user_id from token: {user_id_raw} (type: {type(user_id_raw)})")
# FastAPI Users may return the user ID as a string – convert to int for DB lookup
user_id = int(user_id_raw)
print(f"Converted user_id: {user_id}")
except Exception:
# Any decoding/parsing/expiry error – treat as invalid token
# Any decoding/parsing/expiry error or malformed data – treat as invalid token
print("Token decode failed")
return None
# Fetch the user from the database. We avoid failing hard – return ``None``
# if the user does not exist or is inactive/deleted.
print(f"Querying database for user_id: {user_id}")
result = await db.execute(select(User).where(User.id == user_id))
user = result.scalar_one_or_none()
print(f"Database query result: {user}")
if user is None or getattr(user, "is_deleted", False) or not user.is_active:
print(f"User validation failed - user: {user}, is_deleted: {getattr(user, 'is_deleted', False) if user else 'N/A'}, is_active: {user.is_active if user else 'N/A'}")
return None
print(f"Successfully authenticated user: {user.id}")
return user

263
be/app/core/websocket.py Normal file
View File

@ -0,0 +1,263 @@
# be/app/core/websocket.py
# Real-time WebSocket Manager - Unified event broadcasting system
import json
import asyncio
from typing import Dict, List, Set, Any, Optional, Union
from datetime import datetime
from fastapi import WebSocket, WebSocketDisconnect
from dataclasses import dataclass, asdict
import logging
logger = logging.getLogger(__name__)
@dataclass
class WebSocketEvent:
"""Unified WebSocket event structure"""
event: str
payload: Any
timestamp: str
user_id: Optional[int] = None
room: Optional[str] = None
def to_json(self) -> str:
return json.dumps(asdict(self))
@dataclass
class ConnectedClient:
"""Represents a connected WebSocket client"""
websocket: WebSocket
user_id: int
user_name: str
rooms: Set[str]
connected_at: datetime
last_activity: datetime
class WebSocketManager:
"""
Manages WebSocket connections, rooms, and event broadcasting
Supports household-wide and entity-specific room subscriptions
"""
def __init__(self):
# Active connections by user_id
self.connections: Dict[int, ConnectedClient] = {}
# Room subscriptions: room_name -> set of user_ids
self.rooms: Dict[str, Set[int]] = {}
# Event queue for offline users
self.offline_events: Dict[int, List[WebSocketEvent]] = {}
async def connect(self, websocket: WebSocket, user_id: int, user_name: str) -> bool:
"""Connect a user and store their WebSocket connection"""
try:
await websocket.accept()
# Remove existing connection if any
if user_id in self.connections:
await self.disconnect(user_id)
client = ConnectedClient(
websocket=websocket,
user_id=user_id,
user_name=user_name,
rooms=set(),
connected_at=datetime.utcnow(),
last_activity=datetime.utcnow()
)
self.connections[user_id] = client
# Send any queued offline events
await self._send_offline_events(user_id)
logger.info(f"WebSocket connected: user {user_id} ({user_name})")
return True
except Exception as e:
logger.error(f"WebSocket connection failed for user {user_id}: {e}")
return False
async def disconnect(self, user_id: int):
"""Disconnect a user and clean up their subscriptions"""
if user_id not in self.connections:
return
client = self.connections[user_id]
# Remove from all rooms
for room in list(client.rooms):
self.leave_room(user_id, room)
# Close WebSocket connection
try:
await client.websocket.close()
except Exception:
pass
# Remove from connections
del self.connections[user_id]
logger.info(f"WebSocket disconnected: user {user_id}")
def join_room(self, user_id: int, room: str):
"""Subscribe user to a room for targeted events"""
if user_id not in self.connections:
return False
# Add to room
if room not in self.rooms:
self.rooms[room] = set()
self.rooms[room].add(user_id)
# Update client rooms
self.connections[user_id].rooms.add(room)
logger.debug(f"User {user_id} joined room: {room}")
return True
def leave_room(self, user_id: int, room: str):
"""Unsubscribe user from a room"""
if room in self.rooms:
self.rooms[room].discard(user_id)
# Clean up empty rooms
if not self.rooms[room]:
del self.rooms[room]
if user_id in self.connections:
self.connections[user_id].rooms.discard(room)
logger.debug(f"User {user_id} left room: {room}")
async def send_to_user(self, user_id: int, event: WebSocketEvent):
"""Send event to a specific user"""
if user_id in self.connections:
client = self.connections[user_id]
try:
await client.websocket.send_text(event.to_json())
client.last_activity = datetime.utcnow()
logger.debug(f"Sent event {event.event} to user {user_id}")
except Exception as e:
logger.error(f"Failed to send event to user {user_id}: {e}")
await self.disconnect(user_id)
else:
# Queue for offline delivery
if user_id not in self.offline_events:
self.offline_events[user_id] = []
self.offline_events[user_id].append(event)
logger.debug(f"Queued event {event.event} for offline user {user_id}")
async def send_to_room(self, room: str, event: WebSocketEvent, exclude_user: Optional[int] = None):
"""Send event to all users in a room"""
if room not in self.rooms:
return
event.room = room
tasks = []
for user_id in self.rooms[room].copy(): # Copy to avoid modification during iteration
if exclude_user and user_id == exclude_user:
continue
tasks.append(self.send_to_user(user_id, event))
if tasks:
await asyncio.gather(*tasks, return_exceptions=True)
logger.debug(f"Sent event {event.event} to room {room} ({len(tasks)} users)")
async def broadcast_to_household(self, household_id: int, event: WebSocketEvent, exclude_user: Optional[int] = None):
"""Send event to all members of a household"""
room = f"household:{household_id}"
await self.send_to_room(room, event, exclude_user)
async def broadcast_to_list(self, list_id: int, event: WebSocketEvent, exclude_user: Optional[int] = None):
"""Send event to all users watching a specific list"""
room = f"list:{list_id}"
await self.send_to_room(room, event, exclude_user)
async def broadcast_to_expense(self, expense_id: int, event: WebSocketEvent, exclude_user: Optional[int] = None):
"""Send event to all users involved in an expense"""
room = f"expense:{expense_id}"
await self.send_to_room(room, event, exclude_user)
async def _send_offline_events(self, user_id: int):
"""Send queued events to a user who just connected"""
if user_id not in self.offline_events:
return
events = self.offline_events[user_id]
for event in events:
await self.send_to_user(user_id, event)
# Clear the queue
del self.offline_events[user_id]
logger.info(f"Sent {len(events)} offline events to user {user_id}")
def get_room_members(self, room: str) -> List[int]:
"""Get list of user IDs in a room"""
return list(self.rooms.get(room, set()))
def get_connected_users(self) -> List[int]:
"""Get list of all connected user IDs"""
return list(self.connections.keys())
def is_user_online(self, user_id: int) -> bool:
"""Check if a user is currently connected"""
return user_id in self.connections
async def ping_all(self):
"""Send ping to all connected users to keep connections alive"""
ping_event = WebSocketEvent(
event="ping",
payload={"timestamp": datetime.utcnow().isoformat()},
timestamp=datetime.utcnow().isoformat()
)
tasks = []
for user_id in list(self.connections.keys()):
tasks.append(self.send_to_user(user_id, ping_event))
if tasks:
await asyncio.gather(*tasks, return_exceptions=True)
# Global WebSocket manager instance
websocket_manager = WebSocketManager()
# Utility functions for creating common events
def create_expense_event(event_type: str, payload: Dict[str, Any], user_id: Optional[int] = None) -> WebSocketEvent:
"""Create a standardized expense-related WebSocket event"""
return WebSocketEvent(
event=event_type,
payload=payload,
timestamp=datetime.utcnow().isoformat(),
user_id=user_id
)
def create_chore_event(event_type: str, payload: Dict[str, Any], user_id: Optional[int] = None) -> WebSocketEvent:
"""Create a standardized chore-related WebSocket event"""
return WebSocketEvent(
event=event_type,
payload=payload,
timestamp=datetime.utcnow().isoformat(),
user_id=user_id
)
def create_group_event(event_type: str, payload: Dict[str, Any], user_id: Optional[int] = None) -> WebSocketEvent:
"""Create a standardized group-related WebSocket event"""
return WebSocketEvent(
event=event_type,
payload=payload,
timestamp=datetime.utcnow().isoformat(),
user_id=user_id
)
def create_list_event(event_type: str, payload: Dict[str, Any], user_id: Optional[int] = None) -> WebSocketEvent:
"""Create a standardized list-related WebSocket event"""
return WebSocketEvent(
event=event_type,
payload=payload,
timestamp=datetime.utcnow().isoformat(),
user_id=user_id
)

148
be/app/crud/chore.py
View File

@ -12,6 +12,7 @@ from app.core.chore_utils import calculate_next_due_date
from app.crud.group import get_group_by_id, is_user_member, get_user_role_in_group
from app.crud.history import create_chore_history_entry, create_assignment_history_entry
from app.core.exceptions import ChoreNotFoundError, GroupNotFoundError, PermissionDeniedError, DatabaseIntegrityError
from app.core.websocket import websocket_manager, create_chore_event
logger = logging.getLogger(__name__)
@ -157,7 +158,17 @@ async def create_chore(
selectinload(Chore.child_chores)
)
)
return result.scalar_one()
loaded_chore = result.scalar_one()
# Broadcast chore creation event via WebSocket
await _broadcast_chore_event(
"chore:created",
loaded_chore,
user_id,
exclude_user=user_id
)
return loaded_chore
except Exception as e:
logger.error(f"Error creating chore: {e}", exc_info=True)
raise DatabaseIntegrityError(f"Could not create chore. Error: {str(e)}")
@ -326,7 +337,17 @@ async def update_chore(
.where(Chore.id == db_chore.id)
.options(*get_chore_loader_options())
)
return result.scalar_one()
updated_chore = result.scalar_one()
# Broadcast chore update event via WebSocket
await _broadcast_chore_event(
"chore:updated",
updated_chore,
user_id,
exclude_user=user_id
)
return updated_chore
except Exception as e:
logger.error(f"Error updating chore {chore_id}: {e}", exc_info=True)
raise DatabaseIntegrityError(f"Could not update chore {chore_id}. Error: {str(e)}")
@ -352,6 +373,14 @@ async def delete_chore(
event_data={"chore_name": db_chore.name}
)
# Broadcast chore deletion event via WebSocket (before actual deletion)
await _broadcast_chore_event(
"chore:deleted",
db_chore,
user_id,
exclude_user=user_id
)
if db_chore.type == ChoreTypeEnum.group:
if not group_id:
raise ValueError("group_id is required for group chores")
@ -413,7 +442,18 @@ async def create_chore_assignment(
.where(ChoreAssignment.id == db_assignment.id)
.options(*get_assignment_loader_options())
)
return result.scalar_one()
loaded_assignment = result.scalar_one()
# Broadcast chore assignment event via WebSocket
await _broadcast_chore_assignment_event(
"chore:assigned",
loaded_assignment,
chore,
user_id,
exclude_user=user_id
)
return loaded_assignment
except Exception as e:
logger.error(f"Error creating chore assignment: {e}", exc_info=True)
raise DatabaseIntegrityError(f"Could not create chore assignment. Error: {str(e)}")
@ -533,7 +573,19 @@ async def update_chore_assignment(
.where(ChoreAssignment.id == assignment_id)
.options(*get_assignment_loader_options())
)
return result.scalar_one()
updated_assignment = result.scalar_one()
# Broadcast assignment update event via WebSocket
event_type = "chore:completed" if updated_assignment.is_complete and not original_status else "chore:assignment_updated"
await _broadcast_chore_assignment_event(
event_type,
updated_assignment,
updated_assignment.chore,
user_id,
exclude_user=user_id
)
return updated_assignment
except Exception as e:
logger.error(f"Error updating assignment: {e}", exc_info=True)
await db.rollback()
@ -598,3 +650,91 @@ def get_assignment_loader_options():
selectinload(ChoreAssignment.history).selectinload(ChoreAssignmentHistory.changed_by_user),
selectinload(ChoreAssignment.chore).options(*get_chore_loader_options())
]
# WebSocket Broadcasting Helper Functions
async def _broadcast_chore_event(
event_type: str,
chore: Chore,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast chore-related events to relevant rooms
Sends to household rooms for group chores, or user-specific events for personal chores
"""
try:
# Prepare event payload
event_payload = {
"chore_id": chore.id,
"name": chore.name,
"description": chore.description,
"type": chore.type.value if chore.type else None,
"frequency": chore.frequency.value if chore.frequency else None,
"next_due_date": chore.next_due_date.isoformat() if chore.next_due_date else None,
"created_by_id": chore.created_by_id,
"group_id": chore.group_id,
"created_at": chore.created_at.isoformat() if chore.created_at else None,
"updated_at": chore.updated_at.isoformat() if chore.updated_at else None,
}
# Create the WebSocket event
event = create_chore_event(event_type, event_payload, user_id)
# Broadcast to household if chore belongs to a group
if chore.group_id:
await websocket_manager.broadcast_to_household(
chore.group_id,
event,
exclude_user=exclude_user
)
else:
# For personal chores, send only to the creator
await websocket_manager.send_to_user(chore.created_by_id, event)
logger.debug(f"Broadcasted {event_type} event for chore {chore.id}")
except Exception as e:
# Don't fail the CRUD operation if WebSocket broadcast fails
logger.error(f"Failed to broadcast chore event {event_type} for chore {chore.id}: {e}")
async def _broadcast_chore_assignment_event(
event_type: str,
assignment: ChoreAssignment,
chore: Chore,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast chore assignment-related events for task management
"""
try:
event_payload = {
"assignment_id": assignment.id,
"chore_id": assignment.chore_id,
"chore_name": chore.name,
"assigned_to_user_id": assignment.assigned_to_user_id,
"due_date": assignment.due_date.isoformat() if assignment.due_date else None,
"is_complete": assignment.is_complete,
"completed_at": assignment.completed_at.isoformat() if assignment.completed_at else None,
"group_id": chore.group_id,
}
event = create_chore_event(event_type, event_payload, user_id)
# Broadcast to household if chore belongs to a group
if chore.group_id:
await websocket_manager.broadcast_to_household(chore.group_id, event, exclude_user)
else:
# For personal chores, send to creator and assigned user
users_to_notify = {chore.created_by_id, assignment.assigned_to_user_id}
for notify_user_id in users_to_notify:
if exclude_user is None or notify_user_id != exclude_user:
await websocket_manager.send_to_user(notify_user_id, event)
logger.debug(f"Broadcasted {event_type} event for assignment {assignment.id}")
except Exception as e:
logger.error(f"Failed to broadcast assignment event {event_type}: {e}")

121
be/app/crud/expense.py
View File

@ -37,6 +37,8 @@ from app.core.exceptions import (
)
from app.models import RecurrencePattern
from app.crud.audit import create_financial_audit_log
# Add WebSocket imports
from app.core.websocket import websocket_manager, create_expense_event
# Placeholder for InvalidOperationError if not defined in app.core.exceptions
# This should be a proper HTTPException subclass if used in API layer
@ -238,6 +240,14 @@ async def create_expense(db: AsyncSession, expense_in: ExpenseCreate, current_us
entity=loaded_expense,
)
# Broadcast expense creation event via WebSocket
await _broadcast_expense_event(
"expense:created",
loaded_expense,
current_user_id,
exclude_user=current_user_id
)
# await transaction.commit() # Explicit commit removed, context manager handles it.
return loaded_expense
@ -718,6 +728,14 @@ async def update_expense(db: AsyncSession, expense_db: ExpenseModel, expense_in:
details={"before": before_state, "after": after_state}
)
# Broadcast expense update event via WebSocket
await _broadcast_expense_event(
"expense:updated",
expense_db,
current_user_id,
exclude_user=current_user_id
)
await db.refresh(expense_db)
return expense_db
except IntegrityError as e:
@ -757,6 +775,14 @@ async def delete_expense(db: AsyncSession, expense_db: ExpenseModel, current_use
details=details
)
# Broadcast expense deletion event via WebSocket (before actual deletion)
await _broadcast_expense_event(
"expense:deleted",
expense_db,
current_user_id,
exclude_user=current_user_id
)
# Manually delete related records in correct order to avoid foreign key constraint issues
from app.models import ExpenseSplit as ExpenseSplitModel, SettlementActivity as SettlementActivityModel
@ -788,8 +814,95 @@ async def delete_expense(db: AsyncSession, expense_db: ExpenseModel, current_use
except SQLAlchemyError as e:
logger.error(f"Database transaction error during expense deletion for ID {expense_id_for_log}: {str(e)}", exc_info=True)
raise DatabaseTransactionError(f"Failed to delete expense ID {expense_id_for_log} due to a database transaction error.") from e
return None
# Note: The InvalidOperationError is a simple ValueError placeholder.
# For API endpoints, these should be translated to appropriate HTTPExceptions.
# Ensure app.core.exceptions has proper HTTP error classes if needed.
# WebSocket Broadcasting Helper Functions
async def _broadcast_expense_event(
event_type: str,
expense: ExpenseModel,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast expense-related events to relevant rooms
Sends to household, list, and expense-specific rooms as appropriate
"""
try:
# Prepare event payload
event_payload = {
"expense_id": expense.id,
"description": expense.description,
"total_amount": str(expense.total_amount),
"currency": expense.currency,
"paid_by_user_id": expense.paid_by_user_id,
"version": expense.version,
"updated_at": expense.updated_at.isoformat() if expense.updated_at else None,
}
# Create the WebSocket event
event = create_expense_event(event_type, event_payload, user_id)
# Broadcast to household if expense is linked to a group
if expense.group_id:
await websocket_manager.broadcast_to_household(
expense.group_id,
event,
exclude_user=exclude_user
)
# Broadcast to list if expense is linked to a specific list
if expense.list_id:
await websocket_manager.broadcast_to_list(
expense.list_id,
event,
exclude_user=exclude_user
)
# Broadcast to expense-specific room for splits and settlements
await websocket_manager.broadcast_to_expense(
expense.id,
event,
exclude_user=exclude_user
)
logger.debug(f"Broadcasted {event_type} event for expense {expense.id}")
except Exception as e:
# Don't fail the CRUD operation if WebSocket broadcast fails
logger.error(f"Failed to broadcast expense event {event_type} for expense {expense.id}: {e}")
async def _broadcast_settlement_event(
event_type: str,
settlement_activity: Any, # SettlementActivity model
expense: ExpenseModel,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast settlement-related events for expense splits
"""
try:
event_payload = {
"settlement_id": settlement_activity.id,
"expense_id": expense.id,
"expense_split_id": settlement_activity.expense_split_id,
"settled_amount": str(settlement_activity.amount_paid),
"settled_by_user_id": settlement_activity.settled_by_user_id,
"settlement_date": settlement_activity.settlement_date.isoformat(),
}
event = create_expense_event(event_type, event_payload, user_id)
# Broadcast to all relevant rooms
if expense.group_id:
await websocket_manager.broadcast_to_household(expense.group_id, event, exclude_user)
if expense.list_id:
await websocket_manager.broadcast_to_list(expense.list_id, event, exclude_user)
await websocket_manager.broadcast_to_expense(expense.id, event, exclude_user)
logger.debug(f"Broadcasted {event_type} event for settlement {settlement_activity.id}")
except Exception as e:
logger.error(f"Failed to broadcast settlement event {event_type}: {e}")

149
be/app/crud/group.py
View File

@ -23,6 +23,8 @@ from app.core.exceptions import (
InvalidOperationError
)
from app.core.cache import cache
# Add WebSocket imports
from app.core.websocket import websocket_manager, create_group_event
logger = logging.getLogger(__name__) # Initialize logger
@ -61,6 +63,14 @@ async def create_group(db: AsyncSession, group_in: GroupCreate, creator_id: int)
# This should not happen if we just created it, but as a safeguard
raise GroupOperationError("Failed to load group after creation.")
# Broadcast group creation event via WebSocket (to creator only initially)
await _broadcast_group_event(
"group:created",
loaded_group,
creator_id,
exclude_user=None # Send to creator
)
return loaded_group
except IntegrityError as e:
logger.error(f"Database integrity error during group creation: {str(e)}", exc_info=True)
@ -169,6 +179,15 @@ async def add_user_to_group(db: AsyncSession, group_id: int, user_id: int, role:
if loaded_user_group is None:
raise GroupOperationError(f"Failed to load user group association after adding user {user_id} to group {group_id}.")
# Broadcast member joined event via WebSocket
await _broadcast_member_event(
"group:member_joined",
loaded_user_group.group,
loaded_user_group.user,
user_id,
exclude_user=user_id # Don't send to the joining user
)
return loaded_user_group
except IntegrityError as e:
logger.error(f"Database integrity error while adding user to group: {str(e)}", exc_info=True)
@ -184,6 +203,15 @@ async def remove_user_from_group(db: AsyncSession, group_id: int, user_id: int)
"""Removes a user from a group."""
try:
async with db.begin_nested() if db.in_transaction() else db.begin():
# Get user info before deletion for WebSocket broadcast
user_to_remove = None
if user_id:
user_result = await db.execute(
select(UserModel)
.where(UserModel.id == user_id)
)
user_to_remove = user_result.scalar_one_or_none()
result = await db.execute(
delete(UserGroupModel)
.where(UserGroupModel.group_id == group_id, UserGroupModel.user_id == user_id)
@ -198,6 +226,16 @@ async def remove_user_from_group(db: AsyncSession, group_id: int, user_id: int)
.values(version=GroupModel.version + 1)
)
# Broadcast member left event via WebSocket
if user_to_remove:
await _broadcast_member_left_event(
"group:member_left",
group_id,
user_to_remove,
user_id,
exclude_user=user_id # Don't send to the leaving user
)
return deleted
except OperationalError as e:
logger.error(f"Database connection error while removing user from group: {str(e)}", exc_info=True)
@ -309,6 +347,14 @@ async def delete_group(db: AsyncSession, group_id: int, *, expected_version: int
f"Version mismatch for group {group_id}. Current version is {group.version}, expected {expected_version}."
)
# Broadcast group deletion event via WebSocket (before actual deletion)
await _broadcast_group_event(
"group:deleted",
group,
group.created_by_id,
exclude_user=None # Send to all members
)
# Delete the group - cascading delete will handle related records
await db.delete(group)
await db.flush()
@ -319,4 +365,105 @@ async def delete_group(db: AsyncSession, group_id: int, *, expected_version: int
raise DatabaseConnectionError(f"Database connection error: {str(e)}")
except SQLAlchemyError as e:
logger.error(f"Unexpected SQLAlchemy error while deleting group {group_id}: {str(e)}", exc_info=True)
raise DatabaseTransactionError(f"Failed to delete group: {str(e)}")
raise DatabaseTransactionError(f"Failed to delete group: {str(e)}")
# WebSocket Broadcasting Helper Functions
async def _broadcast_group_event(
event_type: str,
group: GroupModel,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast group-related events to household members
"""
try:
# Prepare event payload
event_payload = {
"group_id": group.id,
"name": group.name,
"created_by_id": group.created_by_id,
"version": group.version,
"created_at": group.created_at.isoformat() if group.created_at else None,
"updated_at": group.updated_at.isoformat() if group.updated_at else None,
}
# Create the WebSocket event
event = create_group_event(event_type, event_payload, user_id)
# Broadcast to all household members
await websocket_manager.broadcast_to_household(
group.id,
event,
exclude_user=exclude_user
)
logger.debug(f"Broadcasted {event_type} event for group {group.id}")
except Exception as e:
# Don't fail the CRUD operation if WebSocket broadcast fails
logger.error(f"Failed to broadcast group event {event_type} for group {group.id}: {e}")
async def _broadcast_member_event(
event_type: str,
group: GroupModel,
user: UserModel,
acting_user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast member-related events to household
"""
try:
event_payload = {
"group_id": group.id,
"user": {
"id": user.id,
"email": user.email,
"username": user.username,
"is_active": user.is_active,
},
"group_name": group.name,
}
event = create_group_event(event_type, event_payload, acting_user_id)
# Broadcast to all household members
await websocket_manager.broadcast_to_household(group.id, event, exclude_user)
logger.debug(f"Broadcasted {event_type} event for user {user.id} in group {group.id}")
except Exception as e:
logger.error(f"Failed to broadcast member event {event_type}: {e}")
async def _broadcast_member_left_event(
event_type: str,
group_id: int,
user: UserModel,
acting_user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast member left events to household
"""
try:
event_payload = {
"group_id": group_id,
"user_id": user.id,
"user_email": user.email,
"user_username": user.username,
}
event = create_group_event(event_type, event_payload, acting_user_id)
# Broadcast to remaining household members
await websocket_manager.broadcast_to_household(group_id, event, exclude_user)
logger.debug(f"Broadcasted {event_type} event for user {user.id} leaving group {group_id}")
except Exception as e:
logger.error(f"Failed to broadcast member left event {event_type}: {e}")

56
be/app/crud/invite.py
View File

@ -16,6 +16,7 @@ from app.core.exceptions import (
DatabaseTransactionError,
InviteOperationError
)
from app.core.websocket import websocket_manager, create_group_event
logger = logging.getLogger(__name__)
@ -95,6 +96,14 @@ async def create_invite(db: AsyncSession, group_id: int, creator_id: int, expire
if loaded_invite is None:
raise InviteOperationError("Failed to load invite after creation and flush.")
# Broadcast invite creation event via WebSocket
await _broadcast_invite_event(
"group:invite_created",
loaded_invite,
creator_id,
exclude_user=creator_id
)
return loaded_invite
except InviteOperationError:
raise
@ -177,6 +186,14 @@ async def deactivate_invite(db: AsyncSession, invite: InviteModel) -> InviteMode
if updated_invite is None:
raise InviteOperationError("Failed to load invite after deactivation.")
# Broadcast invite used event via WebSocket
await _broadcast_invite_event(
"group:invite_used",
updated_invite,
updated_invite.created_by_id,
exclude_user=None # Notify all household members
)
return updated_invite
except OperationalError as e:
logger.error(f"Database connection error deactivating invite: {str(e)}", exc_info=True)
@ -185,3 +202,42 @@ async def deactivate_invite(db: AsyncSession, invite: InviteModel) -> InviteMode
logger.error(f"Unexpected SQLAlchemy error deactivating invite: {str(e)}", exc_info=True)
raise DatabaseTransactionError(f"DB transaction error deactivating invite: {str(e)}")
# WebSocket Broadcasting Helper Functions
async def _broadcast_invite_event(
event_type: str,
invite: InviteModel,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast invite-related events to household members
"""
try:
# Prepare event payload
event_payload = {
"invite_code": invite.code,
"group_id": invite.group_id,
"created_by_id": invite.created_by_id,
"expires_at": invite.expires_at.isoformat() if invite.expires_at else None,
"is_active": invite.is_active,
"group_name": invite.group.name if invite.group else None,
}
# Create the WebSocket event
event = create_group_event(event_type, event_payload, user_id)
# Broadcast to all household members
await websocket_manager.broadcast_to_household(
invite.group_id,
event,
exclude_user=exclude_user
)
logger.debug(f"Broadcasted {event_type} event for invite {invite.code}")
except Exception as e:
# Don't fail the CRUD operation if WebSocket broadcast fails
logger.error(f"Failed to broadcast invite event {event_type}: {e}")

114
be/app/crud/item.py
View File

@ -19,6 +19,7 @@ from app.core.exceptions import (
ConflictError,
ItemOperationError
)
from app.core.websocket import websocket_manager, create_list_event
logger = logging.getLogger(__name__)
@ -56,6 +57,14 @@ async def create_item(db: AsyncSession, item_in: ItemCreate, list_id: int, user_
if loaded_item is None:
raise ItemOperationError("Failed to load item after creation.")
# Broadcast item creation event via WebSocket
await _broadcast_item_event(
"item:created",
loaded_item,
user_id,
exclude_user=user_id
)
return loaded_item
except IntegrityError as e:
logger.error(f"Database integrity error during item creation: {str(e)}", exc_info=True)
@ -166,6 +175,14 @@ async def update_item(db: AsyncSession, item_db: ItemModel, item_in: ItemUpdate,
if updated_item is None:
raise ItemOperationError("Failed to load item after update.")
# Broadcast item update event via WebSocket
await _broadcast_item_event(
"item:updated",
updated_item,
user_id,
exclude_user=user_id
)
return updated_item
except IntegrityError as e:
logger.error(f"Database integrity error during item update: {str(e)}", exc_info=True)
@ -183,6 +200,14 @@ async def delete_item(db: AsyncSession, item_db: ItemModel) -> None:
"""Deletes an item record. Version check should be done by the caller (API endpoint)."""
try:
async with db.begin_nested() if db.in_transaction() else db.begin() as transaction:
# Broadcast item deletion event via WebSocket (before actual deletion)
await _broadcast_item_event(
"item:deleted",
item_db,
item_db.added_by_id, # Use item creator as originator
exclude_user=None
)
await db.delete(item_db)
except OperationalError as e:
logger.error(f"Database connection error while deleting item: {str(e)}", exc_info=True)
@ -204,6 +229,15 @@ async def claim_item(db: AsyncSession, item: ItemModel, user_id: int) -> ItemMod
db.add(item)
await db.flush()
await db.refresh(item, attribute_names=['claimed_by_user', 'version', 'claimed_at'])
# Broadcast item claim event via WebSocket
await _broadcast_item_event(
"item:claimed",
item,
user_id,
exclude_user=user_id
)
return item
async def unclaim_item(db: AsyncSession, item: ItemModel) -> ItemModel:
@ -212,4 +246,82 @@ async def unclaim_item(db: AsyncSession, item: ItemModel) -> ItemModel:
item.claimed_at = None
item.version += 1
db.add(item)
await db.flush()
await db.flush()
# Broadcast item unclaim event via WebSocket
await _broadcast_item_event(
"item:unclaimed",
item,
item.added_by_id, # Use item creator as originator for unclaim
exclude_user=None
)
# WebSocket Broadcasting Helper Functions
async def _broadcast_item_event(
event_type: str,
item: ItemModel,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast item-related events to relevant rooms
Sends to household and list-specific rooms as appropriate
"""
try:
# Prepare event payload
event_payload = {
"item_id": item.id,
"list_id": item.list_id,
"name": item.name,
"quantity": item.quantity,
"is_complete": item.is_complete,
"claimed_by_user_id": item.claimed_by_user_id,
"claimed_at": item.claimed_at.isoformat() if item.claimed_at else None,
"added_by_id": item.added_by_id,
"position": item.position,
"version": item.version,
"updated_at": item.updated_at.isoformat() if item.updated_at else None,
}
# Create the WebSocket event
event = create_list_event(event_type, event_payload, user_id)
# Broadcast to list-specific room for real-time collaboration
await websocket_manager.broadcast_to_list(
item.list_id,
event,
exclude_user=exclude_user
)
logger.debug(f"Broadcasted {event_type} event for item {item.id} in list {item.list_id}")
except Exception as e:
# Don't fail the CRUD operation if WebSocket broadcast fails
logger.error(f"Failed to broadcast item event {event_type} for item {item.id}: {e}")
async def reorder_items(db: AsyncSession, list_id: int, ordered_ids: PyList[int]) -> None:
"""Reorders items in a list based on the provided ordered list of item IDs."""
try:
async with db.begin_nested() if db.in_transaction() else db.begin() as transaction:
# Get all items in the list
stmt = select(ItemModel).where(ItemModel.list_id == list_id)
result = await db.execute(stmt)
items = {item.id: item for item in result.scalars().all()}
# Update positions based on the ordered IDs
for position, item_id in enumerate(ordered_ids, 1):
if item_id in items:
items[item_id].position = position
db.add(items[item_id])
await db.flush()
logger.info(f"Reordered {len(ordered_ids)} items in list {list_id}")
except OperationalError as e:
logger.error(f"Database connection error while reordering items: {str(e)}", exc_info=True)
raise DatabaseConnectionError(f"Database connection error while reordering items: {str(e)}")
except SQLAlchemyError as e:
logger.error(f"Unexpected SQLAlchemy error while reordering items: {str(e)}", exc_info=True)
raise DatabaseTransactionError(f"Failed to reorder items: {str(e)}")

68
be/app/crud/list.py
View File

@ -21,6 +21,8 @@ from app.core.exceptions import (
ConflictError,
ListOperationError
)
# Add WebSocket imports
from app.core.websocket import websocket_manager, create_list_event
logger = logging.getLogger(__name__)
@ -52,6 +54,14 @@ async def create_list(db: AsyncSession, list_in: ListCreate, creator_id: int) ->
if loaded_list is None:
raise ListOperationError("Failed to load list after creation.")
# Broadcast list creation event via WebSocket
await _broadcast_list_event(
"list:created",
loaded_list,
creator_id,
exclude_user=creator_id
)
return loaded_list
except IntegrityError as e:
logger.error(f"Database integrity error during list creation: {str(e)}", exc_info=True)
@ -157,6 +167,14 @@ async def update_list(db: AsyncSession, list_db: ListModel, list_in: ListUpdate)
if updated_list is None:
raise ListOperationError("Failed to load list after update.")
# Broadcast list update event via WebSocket
await _broadcast_list_event(
"list:updated",
updated_list,
updated_list.created_by_id, # Use list creator as event originator
exclude_user=None # Don't exclude anyone for list updates
)
return updated_list
except IntegrityError as e:
logger.error(f"Database integrity error during list update: {str(e)}", exc_info=True)
@ -230,6 +248,56 @@ async def check_list_permission(db: AsyncSession, list_id: int, user_id: int, re
except SQLAlchemyError as e:
raise DatabaseQueryError(f"Failed to check list permissions: {str(e)}")
# WebSocket Broadcasting Helper Functions
async def _broadcast_list_event(
event_type: str,
list_obj: ListModel,
user_id: int,
exclude_user: Optional[int] = None
):
"""
Broadcast list-related events to relevant rooms
Sends to household and list-specific rooms as appropriate
"""
try:
# Prepare event payload
event_payload = {
"list_id": list_obj.id,
"name": list_obj.name,
"description": list_obj.description,
"is_complete": list_obj.is_complete,
"created_by_id": list_obj.created_by_id,
"group_id": list_obj.group_id,
"version": list_obj.version,
"updated_at": list_obj.updated_at.isoformat() if list_obj.updated_at else None,
}
# Create the WebSocket event
event = create_list_event(event_type, event_payload, user_id)
# Broadcast to household if list belongs to a group
if list_obj.group_id:
await websocket_manager.broadcast_to_household(
list_obj.group_id,
event,
exclude_user=exclude_user
)
# Broadcast to list-specific room for real-time collaboration
await websocket_manager.broadcast_to_list(
list_obj.id,
event,
exclude_user=exclude_user
)
logger.debug(f"Broadcasted {event_type} event for list {list_obj.id}")
except Exception as e:
# Don't fail the CRUD operation if WebSocket broadcast fails
logger.error(f"Failed to broadcast list event {event_type} for list {list_obj.id}: {e}")
async def get_list_status(db: AsyncSession, list_id: int) -> ListStatus:
"""Gets the update timestamps and item count for a list."""
try:

115
be/app/schemas/expense.py
View File

@ -2,52 +2,75 @@ from pydantic import BaseModel, ConfigDict, validator, Field
from typing import List, Optional
from decimal import Decimal
from datetime import datetime
from app.models import SplitTypeEnum, ExpenseSplitStatusEnum, ExpenseOverallStatusEnum
from app.models import SplitTypeEnum, ExpenseSplitStatusEnum, ExpenseOverallStatusEnum, RecurrenceTypeEnum
from app.schemas.user import UserPublic
from app.schemas.settlement_activity import SettlementActivityPublic
from app.schemas.recurrence import RecurrencePatternCreate, RecurrencePatternPublic
# Align with unified types - SettlementActivity first to avoid circular imports
class SettlementActivityBase(BaseModel):
expense_split_id: int
paid_by_user_id: int
amount_paid: Decimal
paid_at: Optional[datetime] = None
class SettlementActivityCreate(SettlementActivityBase):
pass
class SettlementActivityPublic(SettlementActivityBase):
id: int
created_by_user_id: int
created_at: datetime
updated_at: datetime
payer: Optional[UserPublic] = None
creator: Optional[UserPublic] = None
model_config = ConfigDict(from_attributes=True)
class ExpenseSplitBase(BaseModel):
user_id: int
owed_amount: Optional[Decimal] = None
share_percentage: Optional[Decimal] = None
share_units: Optional[int] = None
# Note: Status is handled by the backend, not in create/update payloads
class ExpenseSplitCreate(ExpenseSplitBase):
pass
class ExpenseSplitUpdate(BaseModel):
owed_amount: Optional[Decimal] = None
share_percentage: Optional[Decimal] = None
share_units: Optional[int] = None
status: Optional[ExpenseSplitStatusEnum] = None
class ExpenseSplitPublic(ExpenseSplitBase):
id: int
expense_id: int
status: ExpenseSplitStatusEnum
user: Optional[UserPublic] = None
paid_at: Optional[datetime] = None
created_at: datetime
updated_at: datetime
paid_at: Optional[datetime] = None
user: Optional[UserPublic] = None
settlement_activities: List[SettlementActivityPublic] = []
model_config = ConfigDict(from_attributes=True)
class RecurrencePatternBase(BaseModel):
type: str = Field(..., description="Type of recurrence: daily, weekly, monthly, yearly")
interval: int = Field(..., description="Interval of recurrence (e.g., every X days/weeks/months/years)")
days_of_week: Optional[List[int]] = Field(None, description="Days of week for weekly recurrence (0-6, Sunday-Saturday)")
end_date: Optional[datetime] = Field(None, description="Optional end date for the recurrence")
max_occurrences: Optional[int] = Field(None, description="Optional maximum number of occurrences")
type: RecurrenceTypeEnum
interval: int = Field(default=1, ge=1)
days_of_week: Optional[str] = Field(None, description="JSON string of array for weekly recurrence")
end_date: Optional[datetime] = None
max_occurrences: Optional[int] = Field(None, ge=1)
class RecurrencePatternCreate(RecurrencePatternBase):
pass
class RecurrencePatternUpdate(RecurrencePatternBase):
pass
type: Optional[RecurrenceTypeEnum] = None
interval: Optional[int] = None
version: int
class RecurrencePatternInDB(RecurrencePatternBase):
class RecurrencePatternPublic(RecurrencePatternBase):
id: int
created_at: datetime
updated_at: datetime
class Config:
from_attributes = True
version: int
model_config = ConfigDict(from_attributes=True)
class ExpenseBase(BaseModel):
description: str
@ -60,10 +83,10 @@ class ExpenseBase(BaseModel):
item_id: Optional[int] = None
paid_by_user_id: int
is_recurring: bool = Field(False, description="Whether this is a recurring expense")
recurrence_pattern: Optional[RecurrencePatternCreate] = Field(None, description="Recurrence pattern for recurring expenses")
class ExpenseCreate(ExpenseBase):
splits_in: Optional[List[ExpenseSplitCreate]] = None
splits_in: Optional[List[ExpenseSplitCreate]] = None
recurrence_pattern: Optional[RecurrencePatternCreate] = None
@validator('total_amount')
def total_amount_must_be_positive(cls, v):
@ -93,27 +116,36 @@ class ExpenseUpdate(BaseModel):
split_type: Optional[SplitTypeEnum] = None
list_id: Optional[int] = None
group_id: Optional[int] = None
item_id: Optional[int] = None
version: int
item_id: Optional[int] = None
is_recurring: Optional[bool] = None
recurrence_pattern: Optional[RecurrencePatternUpdate] = None
next_occurrence: Optional[datetime] = None
version: int
@validator('total_amount')
def total_amount_must_be_positive(cls, v):
if v is not None and v <= Decimal('0'):
raise ValueError('Total amount must be positive')
return v
class ExpensePublic(ExpenseBase):
id: int
created_by_user_id: int
overall_settlement_status: ExpenseOverallStatusEnum
next_occurrence: Optional[datetime] = None
last_occurrence: Optional[datetime] = None
parent_expense_id: Optional[int] = None
created_at: datetime
updated_at: datetime
version: int
created_by_user_id: int
splits: List[ExpenseSplitPublic] = []
# Relationships
paid_by_user: Optional[UserPublic] = None
overall_settlement_status: ExpenseOverallStatusEnum
is_recurring: bool
next_occurrence: Optional[datetime]
last_occurrence: Optional[datetime]
recurrence_pattern: Optional[RecurrencePatternInDB]
parent_expense_id: Optional[int]
created_by_user: Optional[UserPublic] = None
splits: List[ExpenseSplitPublic] = []
recurrence_pattern: Optional[RecurrencePatternPublic] = None
generated_expenses: List['ExpensePublic'] = []
model_config = ConfigDict(from_attributes=True)
class SettlementBase(BaseModel):
@ -143,10 +175,33 @@ class SettlementUpdate(BaseModel):
description: Optional[str] = None
version: int
@validator('amount')
def amount_must_be_positive(cls, v):
if v is not None and v <= Decimal('0'):
raise ValueError('Settlement amount must be positive')
return v
class SettlementPublic(SettlementBase):
id: int
created_by_user_id: int
created_at: datetime
updated_at: datetime
version: int
created_by_user_id: int
model_config = ConfigDict(from_attributes=True)
# Relationships
payer: Optional[UserPublic] = None
payee: Optional[UserPublic] = None
created_by_user: Optional[UserPublic] = None
model_config = ConfigDict(from_attributes=True)
# WebSocket event schemas for type safety
class ExpenseWebSocketEvent(BaseModel):
event: str
payload: dict
timestamp: datetime
user_id: Optional[int] = None
room: Optional[str] = None
# Update forward references
ExpensePublic.model_rebuild()

183
docs/websockets.md Normal file
View File

@ -0,0 +1,183 @@
# 🛰️ Real-Time Communication Guide
A comprehensive, end-to-end reference for the Household Management App's WebSocket infrastructure.
---
## 1. High-Level Overview
| Layer | Purpose |
|-------|---------|
| **Backend** | Broadcasts domain events (chores, groups, items, expenses…) to targeted rooms with optional user exclusion. |
| **Frontend** | Maintains a single authenticated WebSocket connection per household, routes incoming events to Pinia stores, updates UI & triggers notifications. |
All events share a **type-safe JSON contract**:
```jsonc
{
"event": "chore:updated", // namespaced event key (domain:action)
"payload": { /* entity-specific */ },
"timestamp": "2025-06-29T12:34:56Z",
"user_id": 42, // originating user (optional)
"room": "household:7" // broadcast room (optional)
}
```
---
## 2. Backend Architecture
### 2.1 Entry Point
```mermaid
sequenceDiagram
participant Client
participant FastAPI as FastAPI /api/v1/ws/household/{id}
participant Manager as WebSocketManager (core/websocket.py)
Client->>FastAPI: WebSocket handshake (token query param)
FastAPI->>Manager: register(socket, household_id, user)
Manager-->>Client: connection:established
```
* **Endpoint**: `be/app/api/v1/endpoints/websocket.py`
* **Authentication**: JWT access token retrieved from query string and validated via FastAPI dependency.
* **Manager (`core/websocket.py`)**
* Keeps `Dict[str, Set[WebSocket]]` mapping of **rooms** ➜ sockets.
* Offers helpers:`broadcast(room, event, payload, *, exclude_user_id=None)`.
* Auto-removes closed connections & handles ping/pong.
### 2.2 Room Conventions
| Room | Used For | Example |
|------|----------|---------|
| `household:{id}` | Global events within a household | `household:7` |
| `list:{id}` | Shopping list specific events | `list:12` |
| `expense:{id}` | Expense settlement events | `expense:88` |
### 2.3 Event Producers
| Module | Function(s) | Emitted Events |
|--------|-------------|---------------|
| `crud/chore.py` | `create_chore`, `update_chore`, `delete_chore`, … | `chore:created`, `chore:updated`, `chore:deleted`, `chore:assigned`, `chore:completed`, `chore:assignment_updated` |
| `crud/group.py` | `create_group`, `add_user_to_group`, `remove_user_from_group`, `delete_group` | `group:created`, `group:member_joined`, `group:member_left`, `group:deleted` |
| `crud/invite.py` | `create_invite`, `deactivate_invite` | `group:invite_created`, `group:invite_used` |
| `crud/item.py` | `create_item`, `update_item`, `delete_item`, `claim_item`, `unclaim_item` | `item:created`, `item:updated`, `item:deleted`, `item:claimed`, `item:unclaimed` |
| `crud/expense.py` | `create_expense`, `update_expense`, `delete_expense` | `expense:created`, `expense:updated`, `expense:deleted` |
> **Smart User Exclusion**: Every helper call passes the acting `user_id`; the manager omits that socket to prevent "echo" effects on the originator.
### 2.4 Reliability & Performance
* **Graceful Degradation** – Exceptions in broadcasting are caught; CRUD logic always completes.
* **Ping / Pong** – Server sends `ping` every **25 s**; client replies with `pong`.
* **Scalability** – Manager is stateless apart from room maps and can be swapped for Redis-backed pub/sub later.
---
## 3. Frontend Architecture
### 3.1 useSocket Composable
Located at `fe/src/composables/useSocket.ts`.
* **Single Source of Truth** – Global reactive state (`socket`, `listeners`, `isConnected`…).
* **Connection Logic**
* URL: `ws(s)://{host}/api/v1/ws/household/{householdId}?token=JWT`.
* Exponential reconnect (1 s → 2 s → 4 s → …, max 5 attempts).
* Heartbeat every **30 s** (`presence_update: heartbeat`).
* **Event Routing**
* `listeners: Map<string, Set<Function>>` – any store/component registers via `on(event, cb)`.
* Raw server `ping` handled automatically.
* **Outgoing Convenience**
* `emit(event, payload)` – client-side custom events (rarely used).
* `startEditing/stopEditing`, `updatePresence` helpers.
### 3.2 Pinia Store Integration
| Store | Event Handlers | Highlights |
|-------|----------------|-----------|
| **choreStore** | `chore:*`, `timer:*` | Updates local arrays & triggers assignment/completion notifications. |
| **groupStore** | `group:*`, `invite:*` | Live member joins/leaves, group CRUD & smart redirection. |
| **itemStore** | `item:*` | Real-time shopping list sync with claim/unclaim notifications. |
| **listDetailStore** | `list:updated`, `expense:*` | Keeps list view & expenses fresh during collaboration. |
All stores follow a **canonical pattern**:
```ts
function setupWebSocketListeners() {
on('entity:created', handleCreated)
on('entity:updated', handleUpdated)
// ...
}
function cleanupWebSocketListeners() {
off('entity:created', handleCreated)
// ...
}
```
### 3.3 Notification Strategy
`fe/src/stores/notifications.ts` provides a lightweight queue. Stores push human-friendly messages:
* Self-actions filtered (`user_id !== currentUser.id`).
* Importance-based durations (info 3 s, success 5 s, errors manual close).
* Display component: `components/global/NotificationDisplay.vue`.
### 3.4 Presence & Editing (Future)
API scaffolding exists (`startEditing`, `presence_update`). UI indicators will be added in the next milestone.
---
## 4. Event Reference (Cheat-Sheet)
| Domain | Event | Payload Shape |
|--------|-------|---------------|
| **Chores** | `chore:created` | `{ chore: Chore }` |
| | `chore:updated` | `{ chore: Chore }` |
| | `chore:deleted` | `{ choreId: number, groupId? }` |
| | `chore:assigned` / `chore:assignment_updated` | `{ assignment: ChoreAssignment }` |
| | `chore:completed` | `{ assignment: ChoreAssignment, points: number }` |
| **Groups** | `group:created` | `{ group: GroupPublic }` |
| | `group:member_joined` / `member_left` | `{ groupId: number, member / userId }` |
| | `group:deleted` | `{ groupId: number }` |
| **Invites** | `group:invite_created` / `invite_used` | `{ groupId: number, invite… }` |
| **Items** | `item:*` | Item entity specific |
| **Lists** | `list:updated` | `{ list: List }` |
| **Expenses** | `expense:*` | Expense entity specific |
---
## 5. Adding a New Real-Time Feature
1. **Backend** – Identify CRUD mutation ➜ call `broadcast_event()` with new `event` key.
2. **Frontend** – In relevant Pinia store:
* import `useSocket`,
* register `on('new:event', handler)` in `setupWebSocketListeners()`.
3. **UI / Notifications** – Optionally surface via component or toast.
4. **Docs** – Append to the table above.
---
## 6. Troubleshooting & Tips
| Symptom | Likely Cause | Fix |
|---------|--------------|-----|
| No connection | Invalid JWT / expired | Refresh token & reconnect. |
| Echo events | Backend `exclude_user_id` missing | Pass `current_user.id` to broadcast helper. |
| Stale UI after reconnect | Stores lost listeners on HMR | Call `setupWebSocketListeners()` in Pinia definition (runs once). |
| High CPU on server | Broadcast loops | Ensure room targeting is specific (e.g., list-level not household-level for item events). |
---
## 7. Roadmap
* Presence indicators per list/chore (avatars + typing)…
* Redis-based pub/sub for horizontal scaling.
* WebSocket analytics dashboard (latency, event throughput).
---
> **Last updated**: 2025-06-29 |
> **Author**: Engineering Team

2
fe/.prettierrc.json
View File

@ -2,5 +2,5 @@
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 150
"printWidth": 250
}

4
fe/src/components/SmartShoppingList.vue
View File

@ -631,7 +631,7 @@ const createExpenseFromShopping = () => {
onMounted(() => {
// Connect to WebSocket for real-time updates if online
if (props.isOnline && props.list.id) {
listsStore.connectWebSocket(props.list.id, authStore.token)
listsStore.connectWebSocket(props.list.id, authStore.accessToken || '')
}
})
@ -643,7 +643,7 @@ onUnmounted(() => {
// Watch for online status changes
watch(() => props.isOnline, (isOnline) => {
if (isOnline && props.list.id) {
listsStore.connectWebSocket(props.list.id, authStore.token)
listsStore.connectWebSocket(props.list.id, authStore.accessToken || '')
} else {
listsStore.disconnectWebSocket()
}

1000
fe/src/components/UniversalFAB.vue Normal file
View File

File diff suppressed because it is too large Load Diff

428
fe/src/components/dashboard/UniversalFAB.vue
View File

@ -1,428 +0,0 @@
<template>
<div class="universal-fab-container">
<!-- Main FAB Button -->
<Transition name="fab-main" appear>
<button ref="fabButton" class="fab-main" :class="{ 'is-open': isOpen }" @click="toggleFAB"
@touchstart="handleTouchStart" :aria-expanded="isOpen" aria-label="Quick actions menu">
<Transition name="fab-icon" mode="out-in">
<span v-if="isOpen" key="close" class="material-icons">close</span>
<span v-else key="add" class="material-icons">add</span>
</Transition>
</button>
</Transition>
<!-- Action Buttons -->
<Transition name="fab-actions">
<div v-if="isOpen" class="fab-actions-container">
<button v-for="(action, index) in sortedActions" :key="action.id" class="fab-action"
:style="getActionPosition(index)" @click="handleActionClick(action)" :aria-label="action.label">
<span class="material-icons">{{ action.icon }}</span>
<span class="fab-action-label">{{ action.label }}</span>
</button>
</div>
</Transition>
<!-- Backdrop -->
<Transition name="fab-backdrop">
<div v-if="isOpen" class="fab-backdrop" @click="closeFAB" @touchstart="closeFAB" />
</Transition>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useNotificationStore } from '@/stores/notifications'
import { onClickOutside } from '@vueuse/core'
interface FABAction {
id: string
label: string
icon: string
action: () => void
usageCount: number
priority: number // 1 = highest priority
contextual?: boolean // Shows only in certain contexts
}
const router = useRouter()
const notificationStore = useNotificationStore()
const isOpen = ref(false)
const fabButton = ref<HTMLElement | null>(null)
const touchStartTime = ref(0)
// Usage tracking (in a real app, this would be persisted)
const usageStats = ref<Record<string, number>>({
'add-expense': 150, // 80% of usage
'complete-chore': 28, // 15% of usage
'add-to-list': 9, // 5% of usage
'create-list': 5,
'invite-member': 3,
'quick-scan': 2,
})
// Define all possible actions
const allActions = computed<FABAction[]>(() => [
{
id: 'add-expense',
label: 'Add Expense',
icon: 'receipt_long',
priority: 1,
usageCount: usageStats.value['add-expense'] || 0,
action: () => {
incrementUsage('add-expense')
router.push('/expenses/new')
closeFAB()
}
},
{
id: 'complete-chore',
label: 'Complete Chore',
icon: 'task_alt',
priority: 2,
usageCount: usageStats.value['complete-chore'] || 0,
action: () => {
incrementUsage('complete-chore')
router.push('/chores')
closeFAB()
}
},
{
id: 'add-to-list',
label: 'Add to List',
icon: 'add_shopping_cart',
priority: 3,
usageCount: usageStats.value['add-to-list'] || 0,
action: () => {
incrementUsage('add-to-list')
router.push('/lists')
closeFAB()
}
},
{
id: 'quick-scan',
label: 'Scan Receipt',
icon: 'qr_code_scanner',
priority: 4,
usageCount: usageStats.value['quick-scan'] || 0,
action: () => {
incrementUsage('quick-scan')
// Emit event for receipt scanning
emit('scan-receipt')
closeFAB()
}
},
{
id: 'create-list',
label: 'New List',
icon: 'playlist_add',
priority: 5,
usageCount: usageStats.value['create-list'] || 0,
action: () => {
incrementUsage('create-list')
emit('create-list')
closeFAB()
}
},
{
id: 'invite-member',
label: 'Invite Member',
icon: 'person_add',
priority: 6,
usageCount: usageStats.value['invite-member'] || 0,
action: () => {
incrementUsage('invite-member')
emit('invite-member')
closeFAB()
}
}
])
// Sort actions by usage count and priority
const sortedActions = computed(() => {
return allActions.value
.slice() // Create a copy
.sort((a, b) => {
// Primary sort: usage count (descending)
if (b.usageCount !== a.usageCount) {
return b.usageCount - a.usageCount
}
// Secondary sort: priority (ascending, lower number = higher priority)
return a.priority - b.priority
})
.slice(0, 4) // Show max 4 actions
})
const toggleFAB = () => {
isOpen.value = !isOpen.value
if (isOpen.value) {
// Add haptic feedback if available
if ('vibrate' in navigator) {
navigator.vibrate(50)
}
}
}
const closeFAB = () => {
isOpen.value = false
}
const handleTouchStart = () => {
touchStartTime.value = Date.now()
}
const handleActionClick = (action: FABAction) => {
// Add haptic feedback
if ('vibrate' in navigator) {
navigator.vibrate(30)
}
action.action()
notificationStore.addNotification({
type: 'success',
message: `${action.label} opened`,
})
}
const incrementUsage = (actionId: string) => {
usageStats.value[actionId] = (usageStats.value[actionId] || 0) + 1
// In a real app, persist this to localStorage or API
localStorage.setItem('fab-usage-stats', JSON.stringify(usageStats.value))
}
// Calculate action position for radial layout
const getActionPosition = (index: number) => {
const totalActions = sortedActions.value.length
const angleStep = (Math.PI * 0.6) / (totalActions - 1) // 108 degree arc
const startAngle = -Math.PI * 0.3 // Start at -54 degrees
const angle = startAngle + (angleStep * index)
const radius = 80 // Distance from center
const x = Math.cos(angle) * radius
const y = Math.sin(angle) * radius
return {
transform: `translate(${x}px, ${y}px)`,
transitionDelay: `${index * 50}ms`
}
}
// Handle clicks outside FAB
onClickOutside(fabButton, () => {
if (isOpen.value) {
closeFAB()
}
})
// Load usage stats on mount
onMounted(() => {
const savedStats = localStorage.getItem('fab-usage-stats')
if (savedStats) {
try {
usageStats.value = { ...usageStats.value, ...JSON.parse(savedStats) }
} catch (e) {
console.warn('Failed to load FAB usage stats:', e)
}
}
})
// Handle escape key
const handleEscapeKey = (event: KeyboardEvent) => {
if (event.key === 'Escape' && isOpen.value) {
closeFAB()
}
}
onMounted(() => {
document.addEventListener('keydown', handleEscapeKey)
})
onUnmounted(() => {
document.removeEventListener('keydown', handleEscapeKey)
})
const emit = defineEmits<{
'scan-receipt': []
'create-list': []
'invite-member': []
}>()
</script>
<style scoped>
.universal-fab-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
}
.fab-main {
@apply w-14 h-14 rounded-full shadow-floating;
@apply bg-primary-500 text-white;
@apply flex items-center justify-center;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2;
@apply active:scale-95 transform-gpu;
border: none;
cursor: pointer;
}
.fab-main:hover {
@apply bg-primary-600 shadow-strong scale-105;
}
.fab-main.is-open {
@apply bg-error-500 rotate-45;
}
.fab-main.is-open:hover {
@apply bg-error-600;
}
.fab-actions-container {
position: absolute;
bottom: 0;
right: 0;
pointer-events: none;
}
.fab-action {
@apply absolute w-12 h-12 rounded-full shadow-medium;
@apply bg-white text-neutral-700 border border-neutral-200;
@apply flex flex-col items-center justify-center;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50;
@apply active:scale-90 transform-gpu;
bottom: 14px;
/* Center relative to main FAB */
right: 14px;
border: none;
cursor: pointer;
pointer-events: all;
}
.fab-action:hover {
@apply bg-primary-50 text-primary-600 shadow-strong scale-110;
}
.fab-action .material-icons {
@apply text-lg leading-none;
}
.fab-action-label {
@apply absolute top-full mt-1 text-xs font-medium whitespace-nowrap;
@apply bg-neutral-900 text-white px-2 py-1 rounded;
@apply opacity-0 pointer-events-none;
@apply transition-opacity duration-micro;
}
.fab-action:hover .fab-action-label {
@apply opacity-100;
}
.fab-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
z-index: -1;
}
/* Animations */
.fab-main-enter-active,
.fab-main-leave-active {
transition: all 300ms ease-page;
}
.fab-main-enter-from,
.fab-main-leave-to {
opacity: 0;
transform: scale(0) rotate(180deg);
}
.fab-icon-enter-active,
.fab-icon-leave-active {
transition: all 150ms ease-micro;
}
.fab-icon-enter-from,
.fab-icon-leave-to {
opacity: 0;
transform: rotate(90deg) scale(0.8);
}
.fab-actions-enter-active {
transition: opacity 200ms ease-out;
}
.fab-actions-enter-active .fab-action {
transition: all 300ms ease-page;
}
.fab-actions-leave-active {
transition: opacity 150ms ease-in;
}
.fab-actions-leave-active .fab-action {
transition: all 150ms ease-in;
}
.fab-actions-enter-from,
.fab-actions-leave-to {
opacity: 0;
}
.fab-actions-enter-from .fab-action,
.fab-actions-leave-to .fab-action {
opacity: 0;
transform: translate(0, 0) scale(0.3);
}
.fab-backdrop-enter-active,
.fab-backdrop-leave-active {
transition: all 200ms ease-page;
}
.fab-backdrop-enter-from,
.fab-backdrop-leave-to {
opacity: 0;
backdrop-filter: blur(0);
}
/* Mobile optimizations */
@media (max-width: 640px) {
.universal-fab-container {
bottom: 90px;
/* Above mobile navigation */
right: 16px;
}
.fab-action-label {
display: none;
/* Hide labels on mobile to reduce clutter */
}
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.fab-main,
.fab-action,
.fab-backdrop {
transition: none;
}
.fab-main.is-open {
transform: none;
}
.fab-action:hover {
transform: none;
}
}
</style>

94
fe/src/components/expenses/SettlementFlow.vue
View File

@ -40,14 +40,14 @@
<h4>Settlement Summary</h4>
</div>
<div class="debt-breakdown">
<div v-for="debt in debts" :key="debt.id" class="debt-item">
<div class="debt-item">
<div class="debt-details">
<span class="debt-from">{{ debt.fromUser.name }}</span>
<span class="debt-from">{{ payerName }}</span>
<BaseIcon name="heroicons:arrow-right" class="debt-arrow" />
<span class="debt-to">{{ debt.toUser.name }}</span>
<span class="debt-to">{{ payeeName }}</span>
</div>
<div class="debt-amount" :class="getAmountClass(debt.amount)">
{{ formatCurrency(debt.amount) }}
<div class="debt-amount" :class="getAmountClass(totalAmount)">
{{ formatCurrency(totalAmount) }}
</div>
</div>
</div>
@ -58,16 +58,17 @@
</Card>
</div>
<!-- Line Items -->
<div class="line-items">
<!-- Expense Details -->
<div v-if="expense" class="line-items">
<h4 class="section-title">What this covers:</h4>
<div class="items-list">
<div v-for="item in settlementItems" :key="item.id" class="settlement-item">
<div class="settlement-item">
<div class="item-info">
<span class="item-name">{{ item.name }}</span>
<span class="item-date">{{ formatDate(item.date) }}</span>
<span class="item-name">{{ expense.description }}</span>
<span class="item-date">{{ formatDate(expense.expense_date || expense.created_at)
}}</span>
</div>
<div class="item-amount">{{ formatCurrency(item.amount) }}</div>
<div class="item-amount">{{ formatCurrency(parseFloat(expense.total_amount)) }}</div>
</div>
</div>
</div>
@ -222,9 +223,11 @@
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { Dialog, Heading, Button, Card, Input, Textarea } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import type { ExpenseSplit, Expense } from '@/types/expense'
import type { ExpenseSplit, Expense, SettlementActivityCreate } from '@/types/expense'
import { useExpenses } from '@/composables/useExpenses'
import { useNotificationStore } from '@/stores/notifications'
import { useAuthStore } from '@/stores/auth'
import { settlementService } from '@/services/settlementService'
import { format } from 'date-fns'
interface Props {
@ -236,6 +239,7 @@ const props = defineProps<Props>()
const open = defineModel<boolean>('modelValue', { default: false })
const notifications = useNotificationStore()
const authStore = useAuthStore()
const { settleExpenseSplit } = useExpenses()
// Step management
@ -246,27 +250,27 @@ const steps = [
{ id: 'verification', label: 'Verify & Confirm' }
]
// Settlement data
const totalAmount = ref(125.50) // This would come from props
const debts = ref([
{
id: 1,
fromUser: { name: 'You' },
toUser: { name: 'Alice' },
amount: 75.25
},
{
id: 2,
fromUser: { name: 'You' },
toUser: { name: 'Bob' },
amount: 50.25
}
])
// Real settlement data from props
const totalAmount = computed(() => {
if (!props.split) return 0
const owed = parseFloat(props.split.owed_amount)
const paid = props.split.settlement_activities.reduce((sum, activity) => {
return sum + parseFloat(activity.amount_paid)
}, 0)
return owed - paid
})
const settlementItems = ref([
{ id: 1, name: 'Grocery Shopping - Whole Foods', date: new Date('2024-01-15'), amount: 89.50 },
{ id: 2, name: 'Dinner at Italian Place', date: new Date('2024-01-18'), amount: 36.00 }
])
const currentUserOwes = computed(() => {
return props.split?.user_id === authStore.user?.id
})
const payerName = computed(() => {
return props.split?.user?.name || props.split?.user?.email || 'Unknown User'
})
const payeeName = computed(() => {
return props.expense?.paid_by_user?.name || props.expense?.paid_by_user?.email || 'Unknown User'
})
// Payment method selection
const selectedPaymentMethod = ref<string>('')
@ -300,7 +304,8 @@ const canProceed = computed(() => {
const canConfirm = computed(() => {
return selectedPaymentMethod.value.length > 0 &&
(selectedPaymentMethod.value !== 'custom' || customPaymentMethod.value.trim().length > 0)
(selectedPaymentMethod.value !== 'custom' || customPaymentMethod.value.trim().length > 0) &&
totalAmount.value > 0
})
// Methods
@ -327,8 +332,9 @@ function formatCurrency(amount: number) {
}).format(amount)
}
function formatDate(date: Date) {
return format(date, 'MMM d, yyyy')
function formatDate(date: Date | string) {
const dateObj = typeof date === 'string' ? new Date(date) : date
return format(dateObj, 'MMM d, yyyy')
}
function getSelectedPaymentMethodName() {
@ -351,27 +357,29 @@ function handleReceiptUpload(event: Event) {
}
async function confirmSettlement() {
if (!props.split || !canConfirm.value) return
if (!props.split || !canConfirm.value || !authStore.user) return
processing.value = true
try {
await settleExpenseSplit(props.split.id, {
const activityData: SettlementActivityCreate = {
expense_split_id: props.split.id,
paid_by_user_id: props.split.user_id,
amount_paid: totalAmount.value.toString()
})
}
await settlementService.recordSettlementActivity(props.split.id, activityData)
notifications.addNotification({
type: 'success',
message: 'Settlement confirmed successfully!'
message: 'Settlement recorded successfully!'
})
open.value = false
resetForm()
} catch (error) {
} catch (error: any) {
notifications.addNotification({
type: 'error',
message: 'Failed to confirm settlement. Please try again.'
message: error.response?.data?.detail || 'Failed to record settlement. Please try again.'
})
} finally {
processing.value = false
@ -387,10 +395,10 @@ async function submitDispute() {
submittingDispute.value = true
try {
// API call to submit dispute
// TODO: Add dispute API call when backend supports it
notifications.addNotification({
type: 'success',
message: 'Dispute submitted. Both parties will be notified.'
message: 'Dispute submitted. The expense creator will be notified.'
})
showDispute.value = false

845
fe/src/components/global/NotificationDisplay.vue
View File

@ -1,143 +1,768 @@
<template>
<div class="notification-container">
<transition-group name="notification-list" tag="div">
<div
v-for="notification in store.notifications"
:key="notification.id"
:class="['alert', `alert-${notification.type}`]"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="alert-content">
<span class="icon" v-if="getIcon(notification.type)">
<!-- Basic SVG Icons - replace with your preferred icon set or library -->
<svg v-if="notification.type === 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
<svg v-if="notification.type === 'error'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
<svg v-if="notification.type === 'warning'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
<svg v-if="notification.type === 'info'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
</span>
<span class="notification-message">{{ notification.message }}</span>
<Teleport to="body">
<div v-if="visibleNotifications.length > 0" class="notification-container" :class="{ 'mobile': isMobile }"
role="region" aria-label="Notifications" aria-live="polite">
<TransitionGroup name="notification" tag="div" class="notifications-list">
<div v-for="notification in visibleNotifications" :key="notification.id" class="notification-item" :class="[
`notification-${notification.type}`,
{
'notification-persistent': notification.persistent,
'notification-interactive': notification.actions && notification.actions.length > 0,
'notification-with-progress': notification.showProgress
}
]" :data-notification-id="notification.id" @mouseenter="pauseTimer(notification.id)"
@mouseleave="resumeTimer(notification.id)">
<!-- Notification Content -->
<div class="notification-content">
<!-- Icon with Smart Styling -->
<div class="notification-icon" :class="`icon-${notification.type}`">
<BaseIcon :name="getNotificationIcon(notification.type)" class="icon-component" :class="{
'icon-animated': notification.animated !== false && notification.type !== 'loading'
}" />
</div>
<!-- Message Content -->
<div class="notification-message">
<div class="message-main">
<h4 v-if="notification.title" class="notification-title">
{{ notification.title }}
</h4>
<p class="notification-text">{{ notification.message }}</p>
<!-- Rich Content Support -->
<div v-if="notification.details" class="notification-details">
<button class="details-toggle" @click="toggleDetails(notification.id)"
:aria-expanded="expandedDetails.has(notification.id)">
{{ expandedDetails.has(notification.id) ? 'Less' : 'More' }}
<span class="material-icons">
{{ expandedDetails.has(notification.id) ? 'expand_less' : 'expand_more' }}
</span>
</button>
<Transition name="details-expand">
<div v-if="expandedDetails.has(notification.id)" class="details-content">
{{ notification.details }}
</div>
</Transition>
</div>
</div>
<!-- Progress Indicator (for uploads, etc.) -->
<div v-if="notification.showProgress" class="notification-progress">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: `${notification.progress || 0}%` }"></div>
</div>
<span class="progress-text">{{ notification.progress || 0 }}%</span>
</div>
<!-- Action Buttons -->
<div v-if="notification.actions" class="notification-actions">
<button v-for="action in notification.actions" :key="action.id" class="action-button"
:class="[`action-${action.style || 'primary'}`, { 'action-loading': action.loading }]"
@click="handleAction(notification.id, action)" :disabled="action.loading">
<span v-if="action.loading" class="material-icons spinning">sync</span>
<span v-else-if="action.icon" class="material-icons">{{ action.icon }}</span>
{{ action.label }}
</button>
</div>
</div>
<!-- Dismiss Button (if not persistent) -->
<button v-if="!notification.persistent" class="notification-dismiss"
@click="dismissNotification(notification.id)"
:aria-label="t('notifications.dismiss', 'Dismiss notification')">
<span class="material-icons">close</span>
</button>
</div>
<!-- Auto-dismiss Timer (visual) -->
<div v-if="!notification.persistent && notification.duration" class="notification-timer" :style="{
animationDuration: `${notification.duration}ms`,
animationPlayState: timerStates.get(notification.id) || 'running'
}"></div>
</div>
<button
@click="store.removeNotification(notification.id)"
class="alert-close-btn"
aria-label="Close notification"
>
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span>
</TransitionGroup>
<!-- Notification Stack Indicator -->
<div v-if="queuedCount > 0" class="notification-stack-indicator">
<button class="stack-button" @click="showAllNotifications"
:aria-label="t('notifications.showMore', `Show ${queuedCount} more notifications`)">
<span class="stack-count">+{{ queuedCount }}</span>
<span class="material-icons">expand_more</span>
</button>
</div>
</transition-group>
</div>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { useNotificationStore, type Notification } from '@/stores/notifications';
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { useNotificationStore } from '@/stores/notifications'
import { storeToRefs } from 'pinia'
import BaseIcon from '@/components/BaseIcon.vue'
const store = useNotificationStore();
const { t } = useI18n()
const notificationStore = useNotificationStore()
const { notifications } = storeToRefs(notificationStore)
const getIcon = (type: Notification['type']) => {
// This function now primarily determines if an icon should be shown,
// as valerie-ui might handle specific icons via CSS or a global icon system.
// For this example, we're still providing SVGs directly.
// valerie-ui .icon class will style the SVG size/alignment.
const iconMap = {
success: true,
error: true,
warning: true,
info: true,
};
return iconMap[type];
};
// Reactive state
const expandedDetails = ref(new Set<string>())
const timerStates = ref(new Map<string, 'running' | 'paused'>())
const maxVisible = ref(3) // Maximum notifications visible at once
// Device detection
const isMobile = ref(false)
// Computed properties
const visibleNotifications = computed(() => {
return notifications.value.slice(0, maxVisible.value)
})
const queuedCount = computed(() => {
return Math.max(0, notifications.value.length - maxVisible.value)
})
// Smart icon mapping
const getNotificationIcon = (type: string) => {
const iconMap: Record<string, string> = {
success: 'ic:round-check-circle',
error: 'ic:round-error',
warning: 'ic:round-warning',
info: 'ic:round-info',
loading: 'svg-spinners:180-ring-with-bg',
}
return iconMap[type as keyof typeof iconMap] || iconMap.info
}
// Notification interactions
const dismissNotification = (id: string) => {
notificationStore.removeNotification(id)
}
const pauseTimer = (id: string) => {
timerStates.value.set(id, 'paused')
}
const resumeTimer = (id: string) => {
timerStates.value.set(id, 'running')
}
const toggleDetails = (id: string) => {
if (expandedDetails.value.has(id)) {
expandedDetails.value.delete(id)
} else {
expandedDetails.value.add(id)
}
}
const handleAction = async (notificationId: string, action: any) => {
// Set loading state
action.loading = true
try {
// Execute action handler
if (action.handler) {
await action.handler()
}
// Auto-dismiss after successful action (unless persistent)
const notification = notifications.value.find(n => n.id === notificationId)
if (notification && !notification.persistent) {
dismissNotification(notificationId)
}
} catch (error) {
console.error('Action failed:', error)
// Show error notification
notificationStore.addNotification({
type: 'error',
message: t('notifications.actionFailed', 'Action failed. Please try again.'),
duration: 3000
})
} finally {
action.loading = false
}
}
const showAllNotifications = () => {
maxVisible.value = notifications.value.length
}
// Device detection and responsive behavior
const updateDeviceType = () => {
isMobile.value = window.innerWidth < 768
// Adjust max visible based on device
maxVisible.value = isMobile.value ? 2 : 3
}
// Lifecycle
onMounted(() => {
updateDeviceType()
window.addEventListener('resize', updateDeviceType, { passive: true })
// Auto-cleanup expanded details when notifications are removed
const cleanupExpandedDetails = () => {
const currentIds = new Set(notifications.value.map(n => n.id))
expandedDetails.value.forEach(id => {
if (!currentIds.has(id)) {
expandedDetails.value.delete(id)
}
})
}
// Watch for notification changes
const unwatchNotifications = notificationStore.$subscribe(cleanupExpandedDetails)
onUnmounted(() => {
window.removeEventListener('resize', updateDeviceType)
unwatchNotifications()
})
})
</script>
<style lang="scss" scoped>
// Overriding valerie-ui defaults or adding custom positioning
<style scoped lang="scss">
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.notification-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999; // Ensure it's above other valerie-ui components if necessary
width: 350px; // Adjusted width to better fit valerie-ui alert style
top: 1rem;
right: 1rem;
z-index: 1000;
max-width: 400px;
pointer-events: none;
&.mobile {
top: auto;
bottom: 6rem; // Above mobile nav
left: 1rem;
right: 1rem;
max-width: none;
}
@media (min-width: 768px) {
top: 1rem;
right: 1rem;
bottom: auto;
left: auto;
max-width: 400px;
}
}
.notifications-list {
display: flex;
flex-direction: column;
gap: 12px;
gap: 0.75rem;
}
// Use valerie-ui's .alert class for base styling.
// Specific type styles (alert-success, alert-error, etc.) are handled by valerie-ui.scss
// We can add overrides here if needed.
.alert {
// valerie-ui .alert already has padding, border, shadow, etc.
// We might want to adjust margin if the gap from .notification-container isn't enough
// or if we want to override something specific from valerie-ui's .alert
// For example, if valerie-ui doesn't set margin-bottom on .alert:
// margin-bottom: 0; // Reset if valerie-ui adds margin, rely on gap.
/* Notification Item */
.notification-item {
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid #e5e7eb;
pointer-events: auto;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
// Override icon color if valerie-ui doesn't color them by alert type,
// or if our SVGs need specific coloring not handled by `fill="currentColor"` and parent color.
// valerie-ui .alert-<type> should handle border-left-color.
// valerie-ui .icon class is generic, we might need to scope it.
.alert-content > .icon {
// valerie-ui uses .icon class. Check valerie-ui.scss for its styling.
// Assuming valerie-ui's .icon class handles sizing and alignment.
// We need to ensure our SVG icons get the correct color based on notification type.
// valerie-ui .alert-<type> typically sets text color, which currentColor should pick up.
// If not, add specific color rules:
// Example:
// &.alert-success .icon { color: var(--success); } // If --success is defined in valerie or globally
// &.alert-error .icon { color: var(--danger); }
// &.alert-warning .icon { color: var(--warning); }
// &.alert-info .icon { color: var(--secondary-accent); } // Match valerie-ui's alert-info
// The SVGs provided use fill="currentColor", so they should inherit from the parent.
// The .alert-<type> classes in valerie-ui.scss set border-left-color but not necessarily text or icon color.
// Let's ensure icons match the left border color for consistency, if not already handled.
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
// If valerie-ui .alert-content needs adjustment
.alert-content {
// display: flex; align-items: center; flex-grow: 1; is usually in valerie's .alert-content
.notification-message {
font-size: 0.95rem; // Match valerie-ui's typical text size or adjust
line-height: 1.5;
margin-left: 0.5em; // Space between icon and message if icon exists
// Type-specific styling
&.notification-success {
border-left: 4px solid #10b981;
.notification-icon {
background: #ecfdf5;
color: #065f46;
}
}
// Style for the close button based on valerie-ui's .alert-close-btn
.alert-close-btn {
// valerie-ui's .alert-close-btn should handle most styling.
// We might need to adjust padding or alignment if it doesn't look right
// with our custom notification container.
// The provided SVG for close button is wrapped in a span.icon, let's style that.
.icon {
display: inline-flex; // Ensure icon is aligned
align-items: center;
justify-content: center;
// valerie-ui's .alert-close-btn might already style the icon color on hover.
&.notification-error {
border-left: 4px solid #ef4444;
.notification-icon {
background: #fef2f2;
color: #991b1b;
}
}
&.notification-warning {
border-left: 4px solid #f59e0b;
.notification-icon {
background: #fffbeb;
color: #92400e;
}
}
&.notification-info {
border-left: 4px solid #3b82f6;
.notification-icon {
background: #eff6ff;
color: #1e40af;
}
}
&.notification-loading {
border-left: 4px solid #8b5cf6;
.notification-icon {
background: #f5f3ff;
color: #6d28d9;
}
}
// Interactive notifications
&.notification-interactive {
cursor: pointer;
}
// Persistent notifications
&.notification-persistent {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(59, 130, 246, 0.1);
}
// Progress notifications
&.notification-with-progress {
padding-bottom: 0;
}
}
.notification-content {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
position: relative;
}
/* Icon */
.notification-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
flex-shrink: 0;
.icon-component {
font-size: 1.25rem;
&.icon-animated {
animation: icon-bounce 0.6s ease-out;
}
}
}
// Transitions for the list - these should still work fine.
// Ensure the transitions target the .alert class now.
.notification-list-enter-active,
.notification-list-leave-active {
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
/* Message Content */
.notification-message {
flex-grow: 1;
min-width: 0;
}
.notification-list-enter-from,
.notification-list-leave-to {
.message-main {
margin-bottom: 0.75rem;
}
.notification-title {
font-size: 0.875rem;
font-weight: 600;
color: #111827;
margin: 0 0 0.25rem 0;
line-height: 1.4;
}
.notification-text {
font-size: 0.875rem;
color: #374151;
margin: 0;
line-height: 1.5;
}
/* Details Section */
.notification-details {
margin-top: 0.5rem;
}
.details-toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
color: #3b82f6;
cursor: pointer;
font-size: 0.75rem;
font-weight: 500;
transition: color 0.2s ease;
&:hover {
color: #2563eb;
}
.material-icons {
font-size: 1rem;
}
}
.details-content {
margin-top: 0.5rem;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 6px;
font-size: 0.8rem;
color: #6b7280;
line-height: 1.4;
}
/* Progress Bar */
.notification-progress {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.75rem;
}
.progress-bar {
flex-grow: 1;
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
border-radius: 2px;
transition: width 0.3s ease;
}
.progress-text {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
min-width: 3rem;
text-align: right;
}
/* Actions */
.notification-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.action-button {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
&.action-primary {
background: #3b82f6;
color: white;
border: 1px solid #3b82f6;
&:hover {
background: #2563eb;
}
&:disabled {
background: #9ca3af;
border-color: #9ca3af;
}
}
&.action-secondary {
background: white;
color: #374151;
border: 1px solid #d1d5db;
&:hover {
background: #f9fafb;
}
}
&.action-danger {
background: #ef4444;
color: white;
border: 1px solid #ef4444;
&:hover {
background: #dc2626;
}
}
&.action-loading {
pointer-events: none;
opacity: 0.7;
}
.material-icons {
font-size: 1rem;
&.spinning {
animation: spin 1s linear infinite;
}
}
}
/* Dismiss Button */
.notification-dismiss {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: none;
border: none;
color: #9ca3af;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #f3f4f6;
color: #6b7280;
}
.material-icons {
font-size: 1rem;
}
}
/* Auto-dismiss Timer */
.notification-timer {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
animation: timer-countdown linear forwards;
transform-origin: left;
}
/* Stack Indicator */
.notification-stack-indicator {
margin-top: 0.75rem;
pointer-events: auto;
}
.stack-button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
color: #6b7280;
&:hover {
background: #f8f9fa;
border-color: #d1d5db;
}
}
.stack-count {
font-weight: 600;
color: #3b82f6;
}
/* Animations */
@keyframes icon-bounce {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes timer-countdown {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
/* Transition Animations */
.notification-enter-active,
.notification-leave-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.notification-enter-from {
opacity: 0;
transform: translateX(100%);
}
.notification-list-leave-active {
position: absolute;
// Ensure width calculation is correct if items have variable width or valerie-ui adds padding/margin
// This might need to be calc(100%) if .alert is full width of its slot in notification-container.
// Or if valerie-ui .alert has its own padding that affects its outer width.
// For now, assuming .alert takes the width of the slot provided by transition-group.
width: 100%; // Re-evaluate if needed after valerie styling.
.notification-leave-to {
opacity: 0;
transform: translateX(100%);
}
.notification-move {
transition: transform 0.3s ease;
}
.details-expand-enter-active,
.details-expand-leave-active {
transition: all 0.3s ease;
overflow: hidden;
}
.details-expand-enter-from,
.details-expand-leave-to {
opacity: 0;
max-height: 0;
margin-top: 0;
}
.details-expand-enter-to,
.details-expand-leave-from {
opacity: 1;
max-height: 200px;
margin-top: 0.5rem;
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.notification-item {
background: #374151;
border-color: #4b5563;
color: #f9fafb;
}
.notification-title {
color: #f9fafb;
}
.notification-text {
color: #d1d5db;
}
.details-content {
background: #4b5563;
color: #d1d5db;
}
.action-button.action-secondary {
background: #4b5563;
color: #f9fafb;
border-color: #6b7280;
&:hover {
background: #374151;
}
}
.notification-dismiss:hover {
background: #4b5563;
}
.stack-button {
background: #374151;
border-color: #4b5563;
color: #d1d5db;
&:hover {
background: #4b5563;
}
}
}
/* Mobile Optimizations */
@media (max-width: 767px) {
.notification-container {
&.mobile {
.notification-item {
margin-bottom: 0.5rem;
}
.notification-content {
padding: 0.875rem;
}
.notification-icon {
width: 2rem;
height: 2rem;
.icon-component {
font-size: 1rem;
}
}
.notification-actions {
flex-direction: column;
.action-button {
justify-content: center;
}
}
}
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Performance optimizations */
.notification-item {
will-change: transform, opacity;
}
.progress-fill {
will-change: width;
}
.notification-timer {
will-change: transform;
}
</style>

189
fe/src/components/list-detail/ItemsList.vue
View File

@ -4,9 +4,8 @@
:class="{ 'highlight': supermarktMode && group.items.some(i => i.is_complete) }">
<h3 v-if="group.items.length" class="text-lg font-semibold mb-2 px-1">{{ group.categoryName }}</h3>
<draggable :list="group.items" item-key="id" handle=".drag-handle" @end="handleDragEnd"
:disabled="!isOnline || supermarktMode" class="space-y-1"
ghost-class="opacity-50 bg-neutral-100 dark:bg-neutral-800"
drag-class="bg-white dark:bg-neutral-900 shadow-lg">
:disabled="!isOnline || supermarktMode" class="space-y-1" ghost-class="opacity-50"
drag-class="shadow-lg">
<template #item="{ element: item }">
<ListItem :item="item" :is-online="isOnline" :category-options="categoryOptions"
:supermarkt-mode="supermarktMode" @delete-item="$emit('delete-item', item)"
@ -22,36 +21,58 @@
</draggable>
</div>
<!-- New Add Item Form, integrated into the list -->
<div v-show="!supermarktMode" class="flex items-center gap-2 pt-2 border-t border-dashed">
<div class="flex-shrink-0 text-neutral-400">
<BaseIcon name="heroicons:plus-20-solid" class="w-5 h-5" />
<!-- New Add Item Form, integrated into the list with sticky positioning -->
<div v-show="!supermarktMode" class="sticky bottom-0 bg-white border-t border-gray-200 p-4 shadow-lg z-30">
<div class="flex items-center gap-2">
<div class="flex-shrink-0 text-neutral-400">
<BaseIcon name="heroicons:plus-20-solid" class="w-5 h-5" />
</div>
<form @submit.prevent="$emit('add-item')" class="flex-grow flex items-center gap-2">
<Input type="text" class="flex-grow"
:placeholder="t('listDetailPage.items.addItemForm.placeholder', 'Add a new item...')"
ref="itemNameInputRef" :model-value="newItem.name"
@update:modelValue="$emit('update:newItemName', $event)" @blur="handleNewItemBlur" />
<div class="w-40 relative">
<select v-if="!showAddCategoryInput" :value="newItem.category_id || ''"
@change="handleCategoryChange"
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ t('listDetailPage.noCategory', 'No Category') }}</option>
<option v-for="option in categoryOptions" :key="option.value || 'null'"
:value="option.value || ''">
{{ option.label }}
</option>
<option value="__ADD_NEW__">{{ t('listDetailPage.addNewCategory', '+ Add New Category') }}
</option>
</select>
<!-- Add new category input -->
<div v-if="showAddCategoryInput" class="flex gap-1">
<Input ref="newCategoryInputRef" v-model="newCategoryName" type="text"
placeholder="Category name..." class="flex-1 text-xs" size="sm"
@keyup.enter="createNewCategory" @keyup.escape="cancelAddCategory" />
<Button type="button" size="xs" @click="createNewCategory"
:disabled="!newCategoryName.trim()">✓</Button>
<Button type="button" size="xs" variant="ghost" @click="cancelAddCategory">✕</Button>
</div>
</div>
<Button type="submit" size="sm" :disabled="!newItem.name.trim()">{{ t('listDetailPage.buttons.add',
'Add')
}}</Button>
</form>
</div>
<form @submit.prevent="$emit('add-item')" class="flex-grow flex items-center gap-2">
<Input type="text" class="flex-grow"
:placeholder="t('listDetailPage.items.addItemForm.placeholder', 'Add a new item...')"
ref="itemNameInputRef" :model-value="newItem.name"
@update:modelValue="$emit('update:newItemName', $event)" @blur="handleNewItemBlur" />
<Listbox :model-value="newItem.category_id"
@update:modelValue="$emit('update:newItemCategoryId', $event)" class="w-40">
<!-- Simplified Listbox structure for brevity, assuming it exists -->
</Listbox>
<Button type="submit" size="sm" :disabled="!newItem.name.trim()">{{ t('listDetailPage.buttons.add',
'Add')
}}</Button>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, onMounted } from 'vue';
import { ref, computed, defineProps, defineEmits, onMounted, watch, nextTick } from 'vue';
import type { PropType } from 'vue';
import draggable from 'vuedraggable';
import { useI18n } from 'vue-i18n';
import ListItem from './ListItem.vue';
import type { Item } from '@/types/item';
import type { List } from '@/types/list';
import { useItemHelpers, type Category } from '@/composables/useItemHelpers';
// New component imports
import { Listbox } from '@headlessui/vue'; // This might not be needed if we make a full wrapper
@ -82,7 +103,7 @@ const props = defineProps({
required: true,
},
items: {
type: Array as PropType<ItemWithUI[]>,
type: Array as PropType<Item[]>,
required: true,
},
isOnline: {
@ -116,14 +137,20 @@ const emit = defineEmits([
'cancel-edit',
'add-item',
'handle-drag-end',
'reorder-items',
'update:newItemName',
'update:newItemCategoryId',
'update-quantity',
'mark-bought',
'create-category',
]);
const { t } = useI18n();
const { groupItemsByCategory } = useItemHelpers();
const itemNameInputRef = ref<HTMLInputElement | null>(null);
const showAddCategoryInput = ref(false);
const newCategoryName = ref('');
const newCategoryInputRef = ref<HTMLInputElement | null>(null);
const safeCategoryOptions = computed(() => props.categoryOptions.map(opt => ({
...opt,
@ -131,50 +158,62 @@ const safeCategoryOptions = computed(() => props.categoryOptions.map(opt => ({
})));
// Optimistic updates wrapper so UI responds instantly
const { data: optimisticItems, mutate: optimisticMutate } = useOptimisticUpdates<ItemWithUI>(props.items)
const itemsWithUI = computed(() =>
props.items.map(item => ({
...item,
updating: false,
deleting: false,
priceInput: item.price ?? null,
swiped: false,
isEditing: false,
editName: item.name,
editQuantity: item.quantity ?? null,
editCategoryId: item.category_id,
showFirework: false
}))
)
const { data: optimisticItems, mutate: optimisticMutate } = useOptimisticUpdates<ItemWithUI>(itemsWithUI.value)
// Watch for props changes and update optimistic items
watch(() => props.items, (newItems) => {
const updatedItemsWithUI = newItems.map(item => ({
...item,
updating: false,
deleting: false,
priceInput: item.price ?? null,
swiped: false,
isEditing: false,
editName: item.name,
editQuantity: item.quantity ?? null,
editCategoryId: item.category_id,
showFirework: false
}))
optimisticMutate(() => updatedItemsWithUI)
}, { deep: true })
const groupedItems = computed(() => {
const groups: Record<string, { categoryName: string; items: ItemWithUI[] }> = {};
optimisticItems.value.forEach(item => {
const categoryId = item.category_id;
const category = props.categories.find(c => c.id === categoryId);
const categoryName = category ? category.name : t('listDetailPage.items.noCategory');
if (!groups[categoryName]) {
groups[categoryName] = { categoryName, items: [] };
}
groups[categoryName].items.push(item);
});
return Object.values(groups);
return groupItemsByCategory(
optimisticItems.value,
props.categories,
t('listDetailPage.items.noCategory', 'Uncategorized')
);
});
const handleDragEnd = (evt: any) => {
// We need to find the original item and its new global index
const item = evt.item.__vue__.$props.item;
let newIndex = 0;
let found = false;
// Build new ordered array of all item IDs based on current DOM order
const orderedIds: number[] = [];
for (const group of groupedItems.value) {
if (found) break;
for (const i of group.items) {
if (i.id === item.id) {
found = true;
break;
for (const item of group.items) {
if (typeof item.id === 'number') {
orderedIds.push(item.id);
}
newIndex++;
}
}
// Create a new event object with the necessary info
const newEvt = {
item,
newIndex: newIndex,
oldIndex: evt.oldIndex, // This oldIndex is relative to the group
};
emit('handle-drag-end', newEvt);
// Emit reorder event with the complete ordered list
emit('reorder-items', orderedIds);
};
const handleNewItemBlur = (event: FocusEvent) => {
@ -213,6 +252,46 @@ function handleMarkBought(item: ItemWithUI) {
}
}
function handleCategoryChange(event: Event) {
const target = event.target as HTMLSelectElement;
const value = target.value;
if (value === '__ADD_NEW__') {
showAddCategoryInput.value = true;
newCategoryName.value = '';
nextTick(() => {
newCategoryInputRef.value?.focus();
});
return;
}
emit('update:newItemCategoryId', value ? Number(value) : null);
}
const createNewCategory = async () => {
if (!newCategoryName.value.trim()) return;
try {
// This would need to be implemented in the parent component
// For now, just emit an event
emit('create-category', {
name: newCategoryName.value.trim(),
group_id: props.list.group_id
});
// Reset state
showAddCategoryInput.value = false;
newCategoryName.value = '';
} catch (error) {
console.error('Failed to create category:', error);
}
};
const cancelAddCategory = () => {
showAddCategoryInput.value = false;
newCategoryName.value = '';
};
</script>
<style scoped>

53
fe/src/components/list-detail/ListItem.vue
View File

@ -6,8 +6,19 @@
</div>
<div class="item-main-content">
<VCheckbox :model-value="item.is_complete" @update:model-value="onCheckboxChange" :label="item.name"
:quantity="item.quantity" />
<div class="flex items-center gap-3">
<input type="checkbox" :checked="item.is_complete" @change="onCheckboxEvent"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500" />
<div class="flex-1">
<span class="text-sm font-medium text-gray-900"
:class="{ 'line-through text-gray-500': item.is_complete }">
{{ item.name }}
</span>
<span v-if="item.quantity" class="text-xs text-gray-500 ml-2">
Qty: {{ item.quantity }}
</span>
</div>
</div>
<div v-if="claimStatus" class="claim-status-badge">
{{ claimStatus }}
</div>
@ -15,12 +26,12 @@
<div class="item-actions">
<!-- Claim/Unclaim Buttons -->
<VButton v-if="canClaim" variant="outline" size="sm" @click="handleClaim">
<Button v-if="canClaim" variant="outline" size="sm" @click="handleClaim">
Claim
</VButton>
<VButton v-if="canUnclaim" variant="outline" size="sm" @click="handleUnclaim">
</Button>
<Button v-if="canUnclaim" variant="outline" size="sm" @click="handleUnclaim">
Unclaim
</VButton>
</Button>
<Input v-if="item.is_complete" type="number" :model-value="item.price"
@update:modelValue="$emit('update-price', item, $event)" placeholder="0.00" class="w-20" />
@ -29,10 +40,11 @@
</Button>
<!-- Quantity stepper -->
<div class="flex items-center gap-1 ml-2">
<Button variant="outline" size="xs" @click="decreaseQty" :disabled="(item.quantity ?? 1) <= 1">
<Button variant="outline" size="xs" @click="decreaseQty"
:disabled="Number(item.quantity ?? '1') <= 1">
<BaseIcon name="heroicons:minus-small" />
</Button>
<span class="min-w-[1.5rem] text-center text-sm">{{ item.quantity ?? 1 }}</span>
<span class="min-w-[1.5rem] text-center text-sm">{{ item.quantity ?? '1' }}</span>
<Button variant="outline" size="xs" @click="increaseQty">
<BaseIcon name="heroicons:plus-small" />
</Button>
@ -102,10 +114,6 @@ const handleUnclaim = () => {
socket.emit('lists:item:update', { id: props.item.id, action: 'unclaim' });
};
const onCheckboxChange = (checked: boolean) => {
emit('checkbox-change', props.item, checked);
};
const socket = useSocket();
const showMarkBought = computed(() => props.item.claimed_by_user_id === currentUser.value?.id && !props.item.is_complete);
@ -115,8 +123,20 @@ const markBought = () => {
socket.emit('lists:item:update', { id: props.item.id, action: 'bought' });
};
const increaseQty = () => emit('update-quantity', props.item, (props.item.quantity ?? 1) + 1);
const decreaseQty = () => emit('update-quantity', props.item, (props.item.quantity ?? 1) - 1);
const increaseQty = () => {
const currentQty = Number(props.item.quantity ?? '1');
emit('update-quantity', props.item, String(currentQty + 1));
};
const decreaseQty = () => {
const currentQty = Number(props.item.quantity ?? '1');
emit('update-quantity', props.item, String(Math.max(1, currentQty - 1)));
};
const onCheckboxEvent = (event: Event) => {
const target = event.target as HTMLInputElement;
emit('checkbox-change', props.item, target.checked);
};
</script>
<style scoped>
@ -131,7 +151,10 @@ const decreaseQty = () => emit('update-quantity', props.item, (props.item.quanti
align-items: center;
padding: 0.75rem;
background-color: white;
border-bottom: 1px solid #e5e7eb;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: none;
}

4
fe/src/components/list-detail/ListItemComposer.vue
View File

@ -38,7 +38,7 @@
<div class="suggestion-main">
<span class="suggestion-name">{{ suggestion.name }}</span>
<span v-if="suggestion.brand" class="suggestion-brand">{{ suggestion.brand
}}</span>
}}</span>
</div>
<div class="suggestion-meta">
<span v-if="suggestion.category" class="suggestion-category">{{
@ -312,7 +312,7 @@ onMounted(() => {
.composer-container {
@apply bg-surface-primary border border-border-primary rounded-lg transition-all duration-micro;
@apply hover:border-border-hover;
@apply hover:border-border-primary-hover;
}
.composer-focused {

242
fe/src/components/settlements/FinancialSummaryCard.vue Normal file
View File

@ -0,0 +1,242 @@
<template>
<Card class="financial-summary-card">
<div class="summary-header">
<h3 class="summary-title">Financial Summary</h3>
<p class="summary-subtitle">Your financial position in this group</p>
</div>
<div v-if="loading" class="summary-loading">
<Spinner label="Loading financial summary..." />
</div>
<Alert v-else-if="error" type="error" :message="error" />
<div v-else-if="summary" class="summary-content">
<!-- Net Balance -->
<div class="net-balance-section">
<div class="balance-amount" :class="balanceColorClass">
{{ formatCurrency(summary.net_balance, summary.currency) }}
</div>
<div class="balance-status">
{{ getBalanceStatusText(summary.net_balance) }}
</div>
</div>
<!-- Overall Group Spending -->
<div class="spending-section">
<div class="spending-label">Total Group Spending</div>
<div class="spending-amount">
{{ formatCurrency(summary.total_group_spending, summary.currency) }}
</div>
</div>
<!-- Debts & Credits -->
<div v-if="summary.debts.length > 0 || summary.credits.length > 0" class="debts-credits-section">
<!-- You Owe -->
<div v-if="summary.debts.length > 0" class="debts-section">
<h4 class="section-title">You Owe</h4>
<div class="debt-credit-list">
<div v-for="debt in summary.debts" :key="debt.user.id" class="debt-credit-item debt">
<div class="user-info">
<span class="user-name">{{ debt.user.name }}</span>
</div>
<div class="amount amount-debt">
{{ formatCurrency(debt.amount, summary.currency) }}
</div>
</div>
</div>
</div>
<!-- You Are Owed -->
<div v-if="summary.credits.length > 0" class="credits-section">
<h4 class="section-title">You Are Owed</h4>
<div class="debt-credit-list">
<div v-for="credit in summary.credits" :key="credit.user.id" class="debt-credit-item credit">
<div class="user-info">
<span class="user-name">{{ credit.user.name }}</span>
</div>
<div class="amount amount-credit">
{{ formatCurrency(credit.amount, summary.currency) }}
</div>
</div>
</div>
</div>
</div>
<!-- All Settled -->
<div v-else class="all-settled">
<BaseIcon name="heroicons:check-circle-solid" class="w-8 h-8 text-success-600 mx-auto mb-2" />
<p class="text-center text-neutral-600 dark:text-neutral-400">
All settled up! 🎉
</p>
</div>
</div>
</Card>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { Card, Spinner, Alert } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import { settlementService } from '@/services/settlementService'
import type { UserFinancialSummary } from '@/types/expense'
const props = defineProps<{
groupId?: number
}>()
// State
const summary = ref<UserFinancialSummary | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)
// Computed
const balanceColorClass = computed(() => {
if (!summary.value) return 'text-neutral-900'
if (summary.value.net_balance > 0) return 'text-success-600'
if (summary.value.net_balance < 0) return 'text-error-600'
return 'text-neutral-900'
})
// Methods
function formatCurrency(amount: number, currency: string) {
try {
return new Intl.NumberFormat(undefined, {
style: 'currency',
currency
}).format(amount)
} catch {
return `${amount.toFixed(2)} ${currency}`
}
}
function getBalanceStatusText(balance: number) {
if (balance > 0) return "You are owed money"
if (balance < 0) return "You owe money"
return "You are all settled up"
}
async function loadSummary() {
loading.value = true
error.value = null
try {
if (props.groupId) {
summary.value = await settlementService.getGroupFinancialSummary(props.groupId)
} else {
summary.value = await settlementService.getUserFinancialSummary()
}
} catch (err: any) {
error.value = err.response?.data?.detail || 'Failed to load financial summary'
} finally {
loading.value = false
}
}
// Lifecycle
onMounted(() => {
loadSummary()
})
watch(() => props.groupId, () => {
loadSummary()
})
</script>
<style scoped>
.financial-summary-card {
@apply p-6;
}
.summary-header {
@apply mb-6;
}
.summary-title {
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-1;
}
.summary-subtitle {
@apply text-sm text-neutral-600 dark:text-neutral-400;
}
.summary-loading {
@apply py-8 text-center;
}
.summary-content {
@apply space-y-6;
}
.net-balance-section {
@apply text-center py-4 border-b border-neutral-200 dark:border-neutral-700;
}
.balance-amount {
@apply text-3xl font-bold mb-1;
}
.balance-status {
@apply text-sm font-medium text-neutral-600 dark:text-neutral-400;
}
.spending-section {
@apply flex justify-between items-center py-2;
}
.spending-label {
@apply text-sm text-neutral-600 dark:text-neutral-400;
}
.spending-amount {
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
}
.debts-credits-section {
@apply space-y-4;
}
.section-title {
@apply text-sm font-semibold text-neutral-700 dark:text-neutral-300 mb-2;
}
.debt-credit-list {
@apply space-y-2;
}
.debt-credit-item {
@apply flex justify-between items-center p-3 rounded-lg;
}
.debt-credit-item.debt {
@apply bg-error-50 dark:bg-error-900/20;
}
.debt-credit-item.credit {
@apply bg-success-50 dark:bg-success-900/20;
}
.user-info {
@apply flex items-center;
}
.user-name {
@apply font-medium text-neutral-900 dark:text-neutral-100;
}
.amount {
@apply font-semibold;
}
.amount-debt {
@apply text-error-600 dark:text-error-400;
}
.amount-credit {
@apply text-success-600 dark:text-success-400;
}
.all-settled {
@apply text-center py-8;
}
</style>

135
fe/src/components/settlements/SettlementCard.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<Card class="settlement-card">
<div class="settlement-content">
<div class="settlement-main">
<div class="settlement-icon">
<BaseIcon name="heroicons:banknotes-solid" class="w-6 h-6 text-success-600" />
</div>
<div class="settlement-details">
<div class="settlement-amount">
{{ formatCurrency(parseFloat(settlement.amount)) }}
</div>
<div class="settlement-parties">
<span class="payer">{{ getPayerName(settlement) }}</span>
<BaseIcon name="heroicons:arrow-right" class="w-4 h-4 text-neutral-400 mx-2" />
<span class="payee">{{ getPayeeName(settlement) }}</span>
</div>
<div v-if="settlement.description" class="settlement-description">
{{ settlement.description }}
</div>
<div class="settlement-meta">
<span class="settlement-date">{{ formatDate(settlement.settlement_date) }}</span>
<span class="settlement-creator">
Created by {{ getCreatorName(settlement) }}
</span>
</div>
</div>
</div>
<div class="settlement-actions">
<Button variant="ghost" size="sm" @click="$emit('edit', settlement)">
<BaseIcon name="heroicons:pencil-square-20-solid" class="w-4 h-4" />
</Button>
<Button variant="ghost" size="sm" color="error" @click="$emit('delete', settlement)">
<BaseIcon name="heroicons:trash-20-solid" class="w-4 h-4" />
</Button>
</div>
</div>
</Card>
</template>
<script setup lang="ts">
import { Card, Button } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import type { Settlement } from '@/types/expense'
import { format } from 'date-fns'
const props = defineProps<{
settlement: Settlement
}>()
const emit = defineEmits<{
(e: 'edit', settlement: Settlement): void
(e: 'delete', settlement: Settlement): void
}>()
function formatCurrency(amount: number) {
try {
return new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD'
}).format(amount)
} catch {
return `$${amount.toFixed(2)}`
}
}
function formatDate(dateString: string) {
try {
return format(new Date(dateString), 'MMM d, yyyy')
} catch {
return dateString
}
}
function getPayerName(settlement: Settlement) {
return settlement.payer?.name || settlement.payer?.email || `User #${settlement.paid_by_user_id}`
}
function getPayeeName(settlement: Settlement) {
return settlement.payee?.name || settlement.payee?.email || `User #${settlement.paid_to_user_id}`
}
function getCreatorName(settlement: Settlement) {
return settlement.created_by_user?.name || settlement.created_by_user?.email || `User #${settlement.created_by_user_id}`
}
</script>
<style scoped>
.settlement-card {
@apply p-4 hover:shadow-md transition-shadow;
}
.settlement-content {
@apply flex items-start justify-between;
}
.settlement-main {
@apply flex items-start gap-3 flex-1;
}
.settlement-icon {
@apply flex-shrink-0 mt-1;
}
.settlement-details {
@apply flex-1 space-y-1;
}
.settlement-amount {
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
}
.settlement-parties {
@apply flex items-center text-sm text-neutral-600 dark:text-neutral-400;
}
.payer {
@apply font-medium;
}
.payee {
@apply font-medium;
}
.settlement-description {
@apply text-sm text-neutral-600 dark:text-neutral-400 italic;
}
.settlement-meta {
@apply flex items-center gap-3 text-xs text-neutral-500 dark:text-neutral-500;
}
.settlement-actions {
@apply flex items-center gap-1 ml-4;
}
</style>

250
fe/src/components/settlements/SettlementForm.vue Normal file
View File

@ -0,0 +1,250 @@
<template>
<div class="settlement-form">
<header class="form-header">
<h2 class="form-title">
{{ isEditing ? 'Edit Settlement' : 'Record Settlement' }}
</h2>
<p class="form-subtitle">
{{ isEditing ? 'Update settlement details' : 'Record a payment between group members' }}
</p>
</header>
<form @submit.prevent="handleSubmit" class="space-y-6">
<!-- Amount -->
<div class="form-group">
<label for="amount" class="form-label">Amount</label>
<div class="input-group">
<span class="input-prefix">$</span>
<Input id="amount" v-model="form.amount" type="number" step="0.01" min="0.01" placeholder="0.00"
required class="amount-input" />
</div>
</div>
<!-- Payer -->
<div class="form-group">
<label for="payer" class="form-label">From (Who paid)</label>
<select id="payer" v-model="form.paid_by_user_id" class="form-select" required>
<option value="">Select who paid...</option>
<option v-for="user in availableUsers" :key="user.id" :value="user.id">
{{ user.name ?? user.email }}
</option>
</select>
</div>
<!-- Payee -->
<div class="form-group">
<label for="payee" class="form-label">To (Who received)</label>
<select id="payee" v-model="form.paid_to_user_id" class="form-select" required>
<option value="">Select who received...</option>
<option v-for="user in availableUsers" :key="user.id" :value="user.id"
:disabled="user.id === form.paid_by_user_id">
{{ user.name ?? user.email }}
</option>
</select>
</div>
<!-- Date -->
<div class="form-group">
<label for="date" class="form-label">Settlement Date</label>
<Input id="date" v-model="form.settlement_date" type="date" required />
</div>
<!-- Description -->
<div class="form-group">
<label for="description" class="form-label">Description (optional)</label>
<Textarea id="description" v-model="form.description" placeholder="Add a note about this settlement..."
:rows="3" />
</div>
<!-- Validation Errors -->
<Alert v-if="validationError" type="error" :message="validationError" />
<!-- Actions -->
<div class="form-actions">
<Button type="button" variant="outline" @click="$emit('close')" :disabled="submitting">
Cancel
</Button>
<Button type="submit" variant="solid" :loading="submitting" :disabled="!isFormValid">
{{ isEditing ? 'Update Settlement' : 'Record Settlement' }}
</Button>
</div>
</form>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { Input, Textarea, Button, Alert } from '@/components/ui'
import { settlementService } from '@/services/settlementService'
import { useNotificationStore } from '@/stores/notifications'
import { useAuthStore } from '@/stores/auth'
import type { Settlement, SettlementCreate, SettlementUpdate } from '@/types/expense'
import type { UserPublic } from '@/types/user'
import { apiClient, API_ENDPOINTS } from '@/services/api'
const props = defineProps<{
groupId?: number
settlement?: Settlement | null
}>()
const emit = defineEmits<{
(e: 'close'): void
(e: 'saved', settlement: Settlement): void
}>()
const notifications = useNotificationStore()
const authStore = useAuthStore()
// State
const submitting = ref(false)
const validationError = ref<string | null>(null)
const availableUsers = ref<UserPublic[]>([])
const form = reactive({
group_id: props.groupId || 0,
paid_by_user_id: 0,
paid_to_user_id: 0,
amount: '',
settlement_date: new Date().toISOString().split('T')[0],
description: ''
})
// Computed
const isEditing = computed(() => !!props.settlement)
const isFormValid = computed(() => {
return form.amount &&
parseFloat(form.amount) > 0 &&
form.paid_by_user_id > 0 &&
form.paid_to_user_id > 0 &&
form.paid_by_user_id !== form.paid_to_user_id &&
form.settlement_date &&
form.group_id > 0
})
// Methods
async function loadGroupMembers() {
if (!props.groupId) return
try {
const response = await apiClient.get(`${API_ENDPOINTS.GROUPS.BASE}/${props.groupId}/members`)
availableUsers.value = response.data
} catch (error) {
console.error('Failed to load group members:', error)
notifications.addNotification({
type: 'error',
message: 'Failed to load group members'
})
}
}
async function handleSubmit() {
if (!isFormValid.value || submitting.value) return
// Validate that payer and payee are different
if (form.paid_by_user_id === form.paid_to_user_id) {
validationError.value = 'Payer and payee must be different people'
return
}
submitting.value = true
validationError.value = null
try {
let result: Settlement
if (isEditing.value && props.settlement) {
const updateData: SettlementUpdate = {
description: form.description,
settlement_date: form.settlement_date,
version: props.settlement.version
}
result = await settlementService.updateSettlement(props.settlement.id, updateData)
} else {
const createData: SettlementCreate = {
group_id: form.group_id,
paid_by_user_id: form.paid_by_user_id,
paid_to_user_id: form.paid_to_user_id,
amount: form.amount,
settlement_date: form.settlement_date,
description: form.description || undefined
}
result = await settlementService.createSettlement(createData)
}
notifications.addNotification({
type: 'success',
message: isEditing.value ? 'Settlement updated successfully' : 'Settlement recorded successfully'
})
emit('saved', result)
} catch (err: any) {
validationError.value = err.response?.data?.detail || 'Failed to save settlement'
} finally {
submitting.value = false
}
}
// Initialize form when editing
watch(() => props.settlement, (settlement) => {
if (settlement) {
form.group_id = settlement.group_id
form.paid_by_user_id = settlement.paid_by_user_id
form.paid_to_user_id = settlement.paid_to_user_id
form.amount = settlement.amount
form.settlement_date = settlement.settlement_date.split('T')[0]
form.description = settlement.description || ''
}
}, { immediate: true })
// Lifecycle
onMounted(() => {
loadGroupMembers()
})
</script>
<style scoped>
.settlement-form {
@apply p-6;
}
.form-header {
@apply mb-6;
}
.form-title {
@apply text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-1;
}
.form-subtitle {
@apply text-sm text-neutral-600 dark:text-neutral-400;
}
.form-group {
@apply space-y-2;
}
.form-label {
@apply block text-sm font-medium text-neutral-700 dark:text-neutral-300;
}
.input-group {
@apply relative;
}
.input-prefix {
@apply absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-500 dark:text-neutral-400;
}
.amount-input {
@apply pl-8;
}
.form-select {
@apply w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-neutral-100 dark:disabled:bg-neutral-700 disabled:text-neutral-500;
}
.form-actions {
@apply flex items-center justify-end gap-3 pt-4 border-t border-neutral-200 dark:border-neutral-700;
}
</style>

284
fe/src/components/settlements/SuggestedSettlementsCard.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<Card class="suggested-settlements-card">
<div class="header">
<h3 class="title">Suggested Settlements</h3>
<p class="subtitle">Optimal payments to settle all debts efficiently</p>
</div>
<div v-if="loading" class="loading-state">
<Spinner label="Loading settlement suggestions..." />
</div>
<Alert v-else-if="error" type="error" :message="error" />
<div v-else-if="suggestions.length === 0" class="empty-state">
<BaseIcon name="heroicons:check-circle-solid" class="w-12 h-12 text-success-600 mx-auto mb-4" />
<h4 class="empty-title">All Settled Up!</h4>
<p class="empty-subtitle">
No settlements needed. Everyone's balances are even.
</p>
</div>
<div v-else class="suggestions-content">
<div class="suggestions-header">
<div class="suggestions-count">
{{ suggestions.length }} {{ suggestions.length === 1 ? 'settlement' : 'settlements' }} suggested
</div>
<div class="optimization-note">
Optimized to minimize the number of transactions
</div>
</div>
<div class="suggestions-list">
<div v-for="(suggestion, index) in suggestions" :key="index" class="suggestion-item">
<div class="suggestion-content">
<div class="payment-flow">
<div class="payer">
<BaseIcon name="heroicons:user-circle-solid" class="w-6 h-6 text-neutral-400" />
<span class="user-name">{{ suggestion.from_user_identifier }}</span>
</div>
<div class="arrow">
<BaseIcon name="heroicons:arrow-right" class="w-5 h-5 text-neutral-400" />
</div>
<div class="payee">
<BaseIcon name="heroicons:user-circle-solid" class="w-6 h-6 text-neutral-400" />
<span class="user-name">{{ suggestion.to_user_identifier }}</span>
</div>
</div>
<div class="amount">
{{ formatCurrency(parseFloat(suggestion.amount)) }}
</div>
</div>
<div class="suggestion-actions">
<Button variant="solid" size="sm" @click="$emit('settle', suggestion)" class="settle-button">
<BaseIcon name="heroicons:banknotes-solid" class="w-4 h-4 mr-1" />
Settle
</Button>
</div>
</div>
</div>
<div class="summary-footer">
<div class="total-settlements">
Total to be settled:
<span class="total-amount">
{{ formatCurrency(totalAmount) }}
</span>
</div>
<Button variant="outline" size="sm" @click="settleAll" :disabled="settling" class="settle-all-button">
<BaseIcon v-if="settling" name="heroicons:arrow-path" class="w-4 h-4 mr-1 animate-spin" />
<BaseIcon v-else name="heroicons:check-circle" class="w-4 h-4 mr-1" />
{{ settling ? 'Processing...' : 'Settle All' }}
</Button>
</div>
</div>
</Card>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { Card, Button, Spinner, Alert } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import { costService } from '@/services/costService'
import { useNotificationStore } from '@/stores/notifications'
import type { GroupBalanceSummary } from '@/services/costService'
const props = defineProps<{
groupId?: number
}>()
const emit = defineEmits<{
(e: 'settle', suggestion: any): void
}>()
const notifications = useNotificationStore()
// State
const balanceSummary = ref<GroupBalanceSummary | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)
const settling = ref(false)
// Computed
const suggestions = computed(() => {
return balanceSummary.value?.suggested_settlements || []
})
const totalAmount = computed(() => {
return suggestions.value.reduce((total, suggestion) => {
return total + parseFloat(suggestion.amount)
}, 0)
})
// Methods
function formatCurrency(amount: number) {
try {
return new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD'
}).format(amount)
} catch {
return `$${amount.toFixed(2)}`
}
}
async function loadSuggestions() {
if (!props.groupId) return
loading.value = true
error.value = null
try {
balanceSummary.value = await costService.getGroupBalanceSummary(props.groupId)
} catch (err: any) {
error.value = err.response?.data?.detail || 'Failed to load settlement suggestions'
} finally {
loading.value = false
}
}
async function settleAll() {
if (suggestions.value.length === 0) return
settling.value = true
try {
// Emit settle event for each suggestion
for (const suggestion of suggestions.value) {
emit('settle', suggestion)
}
notifications.addNotification({
type: 'success',
message: `${suggestions.value.length} settlements initiated`
})
// Reload suggestions after a short delay
setTimeout(() => {
loadSuggestions()
}, 1000)
} catch (err: any) {
notifications.addNotification({
type: 'error',
message: 'Failed to process settlements'
})
} finally {
settling.value = false
}
}
// Lifecycle
onMounted(() => {
loadSuggestions()
})
watch(() => props.groupId, () => {
loadSuggestions()
})
</script>
<style scoped>
.suggested-settlements-card {
@apply p-6;
}
.header {
@apply mb-6;
}
.title {
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-1;
}
.subtitle {
@apply text-sm text-neutral-600 dark:text-neutral-400;
}
.loading-state {
@apply py-8 text-center;
}
.empty-state {
@apply py-12 text-center;
}
.empty-title {
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2;
}
.empty-subtitle {
@apply text-sm text-neutral-600 dark:text-neutral-400;
}
.suggestions-content {
@apply space-y-4;
}
.suggestions-header {
@apply pb-4 border-b border-neutral-200 dark:border-neutral-700;
}
.suggestions-count {
@apply text-sm font-medium text-neutral-900 dark:text-neutral-100;
}
.optimization-note {
@apply text-xs text-neutral-500 dark:text-neutral-400 mt-1;
}
.suggestions-list {
@apply space-y-3;
}
.suggestion-item {
@apply flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors;
}
.suggestion-content {
@apply flex items-center gap-4 flex-1;
}
.payment-flow {
@apply flex items-center gap-3;
}
.payer,
.payee {
@apply flex items-center gap-2;
}
.user-name {
@apply text-sm font-medium text-neutral-900 dark:text-neutral-100;
}
.arrow {
@apply flex-shrink-0;
}
.amount {
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100 ml-auto;
}
.suggestion-actions {
@apply flex items-center;
}
.settle-button {
@apply ml-4;
}
.summary-footer {
@apply flex items-center justify-between pt-4 border-t border-neutral-200 dark:border-neutral-700;
}
.total-settlements {
@apply text-sm text-neutral-600 dark:text-neutral-400;
}
.total-amount {
@apply font-semibold text-neutral-900 dark:text-neutral-100;
}
.settle-all-button {
@apply ml-4;
}
</style>

15
fe/src/components/ui/Dialog.vue
View File

@ -1,13 +1,14 @@
<template>
<TransitionRoot as="template" :show="modelValue">
<Dialog as="div" class="fixed inset-0 z-50 overflow-y-auto" @close="emitClose">
<div class="flex min-h-screen items-center justify-center px-4 py-8 text-center sm:block sm:p-0">
<!-- Backdrop -->
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<DialogOverlay class="fixed inset-0 bg-black/40 ui-not-focusable" />
</TransitionChild>
<!-- Backdrop -->
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<DialogOverlay class="fixed inset-0 bg-black/40" />
</TransitionChild>
<!-- Container for centering -->
<div class="fixed inset-0 flex items-center justify-center p-4">
<!-- Panel -->
<TransitionChild as="template" enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@ -15,7 +16,7 @@
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<DialogPanel
class="w-full transform overflow-hidden rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-dark dark:text-white sm:max-w-lg">
class="w-full max-w-lg transform overflow-hidden rounded-lg bg-white p-6 text-left shadow-xl transition-all dark:bg-dark dark:text-white">
<slot />
</DialogPanel>
</TransitionChild>

704
fe/src/components/ui/SkeletonDashboard.vue
View File

@ -1,124 +1,628 @@
<template>
<div :class="['space-y-6', className]">
<!-- Header Section -->
<div class="flex items-center justify-between">
<div class="space-y-2">
<Skeleton variant="text" size="xl" width="300px" />
<Skeleton variant="text" size="md" width="200px" />
</div>
<Skeleton variant="avatar" size="lg" />
</div>
<!-- Stats Cards Row -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div v-for="i in 4" :key="i"
class="p-6 rounded-xl bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800">
<div class="flex items-center justify-between mb-4">
<Skeleton variant="circular" size="md" />
<Skeleton variant="text" size="sm" width="60px" />
<div class="skeleton-dashboard">
<!-- Hero Section Skeleton -->
<section class="skeleton-hero">
<div class="hero-content">
<div class="skeleton-greeting">
<div class="skeleton-line large pulse-slow"></div>
<div class="skeleton-line medium pulse-delayed"></div>
</div>
<Skeleton variant="text" size="xl" width="80px" />
<Skeleton variant="text" size="sm" width="120px" className="mt-2" />
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column - Priority Items -->
<div class="lg:col-span-2 space-y-6">
<!-- Priority Section -->
<div class="bg-white dark:bg-stone-900 rounded-xl border border-stone-200 dark:border-stone-800 p-6">
<div class="flex items-center justify-between mb-4">
<Skeleton variant="text" size="lg" width="150px" />
<Skeleton variant="button" size="sm" />
</div>
<div class="space-y-3">
<div v-for="i in 3" :key="i"
class="flex items-center gap-4 p-3 rounded-lg bg-stone-50 dark:bg-stone-800">
<Skeleton variant="circular" size="sm" />
<div class="flex-1 space-y-1">
<Skeleton variant="text" size="md" :width="priorityWidths[i - 1]" />
<Skeleton variant="text" size="sm" width="100px" />
</div>
<Skeleton variant="button" size="sm" />
<div class="skeleton-status-card">
<div class="card-header">
<div class="skeleton-circle"></div>
<div class="skeleton-content">
<div class="skeleton-line"></div>
<div class="skeleton-line short"></div>
</div>
</div>
</div>
<!-- Activity Feed -->
<div class="bg-white dark:bg-stone-900 rounded-xl border border-stone-200 dark:border-stone-800 p-6">
<div class="flex items-center justify-between mb-4">
<Skeleton variant="text" size="lg" width="120px" />
<Skeleton variant="text" size="sm" width="80px" />
</div>
<div class="space-y-4">
<div v-for="i in 4" :key="i" class="flex gap-3">
<Skeleton variant="avatar" size="sm" />
<div class="flex-1 space-y-1">
<Skeleton variant="text" size="sm" :width="activityWidths[i - 1]" />
<Skeleton variant="text" size="sm" width="60px" />
</div>
<div class="card-body">
<div class="skeleton-progress-bar">
<div class="progress-shimmer"></div>
</div>
<div class="skeleton-actions">
<div class="skeleton-button primary"></div>
<div class="skeleton-button secondary"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Right Column - Sidebar Widgets -->
<div class="space-y-6">
<!-- Quick Stats Widget -->
<div class="bg-white dark:bg-stone-900 rounded-xl border border-stone-200 dark:border-stone-800 p-6">
<Skeleton variant="text" size="lg" width="120px" className="mb-4" />
<!-- Quick Actions Skeleton -->
<section class="skeleton-quick-actions">
<div class="section-header">
<div class="skeleton-line section-title"></div>
<div class="skeleton-badge"></div>
</div>
<div class="space-y-3">
<div v-for="i in 3" :key="i" class="flex justify-between items-center">
<Skeleton variant="text" size="sm" width="80px" />
<Skeleton variant="text" size="sm" width="40px" />
</div>
<div class="quick-actions-grid">
<div v-for="i in 3" :key="i" class="skeleton-action-card" :style="{ animationDelay: `${i * 0.1}s` }">
<div class="action-icon">
<div class="skeleton-circle medium shimmer"></div>
</div>
</div>
<!-- Progress Widget -->
<div class="bg-white dark:bg-stone-900 rounded-xl border border-stone-200 dark:border-stone-800 p-6">
<Skeleton variant="text" size="lg" width="100px" className="mb-4" />
<div class="space-y-4">
<div v-for="i in 2" :key="i" class="space-y-2">
<div class="flex justify-between">
<Skeleton variant="text" size="sm" width="70px" />
<Skeleton variant="text" size="sm" width="30px" />
</div>
<Skeleton variant="rectangular" height="8px" className="rounded-full" />
</div>
<div class="action-content">
<div class="skeleton-line"></div>
<div class="skeleton-line short faded"></div>
</div>
</div>
<!-- Quick Actions Widget -->
<div class="bg-white dark:bg-stone-900 rounded-xl border border-stone-200 dark:border-stone-800 p-6">
<Skeleton variant="text" size="lg" width="110px" className="mb-4" />
<div class="space-y-3">
<Skeleton variant="button" size="md" className="w-full" v-for="i in 3" :key="i" />
<div class="action-arrow">
<div class="skeleton-line tiny"></div>
</div>
</div>
</div>
</section>
<!-- Activity Feed Skeleton -->
<section class="skeleton-activity">
<div class="section-header">
<div class="skeleton-line section-title"></div>
<div class="skeleton-button small"></div>
</div>
<div class="activity-container">
<div v-for="i in 4" :key="i" class="skeleton-activity-item" :style="{ animationDelay: `${i * 0.15}s` }">
<div class="activity-avatar">
<div class="skeleton-circle small shimmer"></div>
</div>
<div class="activity-content">
<div class="skeleton-line"></div>
<div class="skeleton-line medium faded"></div>
</div>
<div class="activity-time">
<div class="skeleton-line tiny"></div>
</div>
</div>
</div>
</section>
<!-- Stats Grid Skeleton -->
<section class="skeleton-stats">
<div class="stats-grid">
<div v-for="i in 4" :key="i" class="skeleton-stat-card" :style="{ animationDelay: `${i * 0.2}s` }">
<div class="stat-icon">
<div class="skeleton-circle small shimmer"></div>
</div>
<div class="stat-content">
<div class="skeleton-line number"></div>
<div class="skeleton-line label"></div>
</div>
</div>
</div>
</section>
<!-- Floating Elements for Enhanced Effect -->
<div class="skeleton-decorations">
<div class="floating-dot" v-for="i in 6" :key="i" :style="getFloatingStyle(i)"></div>
</div>
</div>
</template>
<script setup lang="ts">
import Skeleton from './Skeleton.vue';
import { computed } from 'vue'
export interface SkeletonDashboardProps {
className?: string;
// Enhanced floating animation styles
const getFloatingStyle = (index: number) => {
const delays = [0, 0.5, 1, 1.5, 2, 2.5]
const positions = [
{ top: '10%', left: '5%' },
{ top: '20%', right: '8%' },
{ top: '40%', left: '3%' },
{ top: '60%', right: '5%' },
{ top: '80%', left: '7%' },
{ top: '90%', right: '10%' }
]
return {
...positions[index - 1],
animationDelay: `${delays[index - 1]}s`,
animationDuration: `${3 + (index * 0.5)}s`
}
}
</script>
<style scoped lang="scss">
.skeleton-dashboard {
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 0;
position: relative;
overflow: hidden;
@media (min-width: 768px) {
padding: 0 1rem;
}
}
const props = withDefaults(defineProps<SkeletonDashboardProps>(), {
className: ''
});
/* Hero Section Skeleton */
.skeleton-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem 1rem 3rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
// Varied widths for realistic appearance
const priorityWidths = ['70%', '85%', '60%'];
const activityWidths = ['80%', '65%', '90%', '75%'];
</script>
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: hero-shimmer 3s ease-in-out infinite;
}
@media (min-width: 768px) {
border-radius: 16px;
margin: 1rem 0 2rem;
padding: 3rem 2rem 4rem;
}
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.skeleton-greeting {
margin-bottom: 2rem;
text-align: center;
@media (min-width: 768px) {
text-align: left;
}
}
.skeleton-status-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
@media (min-width: 768px) {
padding: 2rem;
}
}
.card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.skeleton-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.skeleton-progress-bar {
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
position: relative;
.progress-shimmer {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
animation: progress-slide 2s ease-in-out infinite;
}
}
.skeleton-actions {
display: flex;
gap: 1rem;
justify-content: center;
@media (min-width: 768px) {
justify-content: flex-start;
}
}
/* Quick Actions Skeleton */
.skeleton-quick-actions {
max-width: 1200px;
margin: 0 auto 3rem;
padding: 0 1rem;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.skeleton-badge {
width: 80px;
height: 24px;
background: linear-gradient(90deg, #e0e7ff 25%, #c7d2fe 50%, #e0e7ff 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 12px;
}
.quick-actions-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
@media (min-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
}
}
.skeleton-action-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
animation: skeleton-fade-in 0.6s ease-out both;
}
.action-icon {
flex-shrink: 0;
}
.action-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.action-arrow {
flex-shrink: 0;
}
/* Activity Skeleton */
.skeleton-activity {
max-width: 1200px;
margin: 0 auto 3rem;
padding: 0 1rem;
}
.activity-container {
background: white;
border-radius: 16px;
padding: 1.5rem;
border: 1px solid #e5e7eb;
}
.skeleton-activity-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #f3f4f6;
animation: skeleton-fade-in 0.6s ease-out both;
&:last-child {
border-bottom: none;
}
}
.activity-avatar {
flex-shrink: 0;
}
.activity-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.activity-time {
flex-shrink: 0;
}
/* Stats Grid Skeleton */
.skeleton-stats {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.stats-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
@media (min-width: 768px) {
grid-template-columns: repeat(4, 1fr);
}
}
.skeleton-stat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
animation: skeleton-fade-in 0.6s ease-out both;
}
.stat-icon {
flex-shrink: 0;
}
.stat-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* Base Skeleton Elements */
.skeleton-line {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 4px;
// Size variants
&.large {
height: 2rem;
width: 60%;
}
&.medium {
height: 1.5rem;
width: 45%;
}
&.section-title {
height: 1.75rem;
width: 40%;
}
&.number {
height: 2.5rem;
width: 50%;
}
&.label {
height: 1rem;
width: 80%;
}
&.short {
width: 60%;
}
&.tiny {
height: 0.75rem;
width: 40px;
}
// Default size
height: 1rem;
width: 100%;
// Animation variants
&.pulse-slow {
animation: skeleton-pulse 2s ease-in-out infinite;
}
&.pulse-delayed {
animation: skeleton-pulse 2s ease-in-out infinite;
animation-delay: 0.3s;
}
&.faded {
opacity: 0.6;
}
}
.skeleton-circle {
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
// Size variants
&.small {
width: 32px;
height: 32px;
}
&.medium {
width: 48px;
height: 48px;
}
// Default size
width: 40px;
height: 40px;
&.shimmer {
animation: skeleton-shimmer 1.5s infinite, skeleton-pulse 3s ease-in-out infinite;
}
}
.skeleton-button {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 8px;
&.primary {
height: 2.5rem;
width: 120px;
}
&.secondary {
height: 2.5rem;
width: 100px;
}
&.small {
height: 2rem;
width: 80px;
}
}
/* Floating Decorations */
.skeleton-decorations {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
}
.floating-dot {
position: absolute;
width: 4px;
height: 4px;
background: rgba(59, 130, 246, 0.1);
border-radius: 50%;
animation: float-up-down 4s ease-in-out infinite;
}
/* Animations */
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@keyframes skeleton-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
@keyframes skeleton-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hero-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes progress-slide {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes float-up-down {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.skeleton-dashboard {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.skeleton-status-card,
.skeleton-action-card,
.activity-container,
.skeleton-stat-card {
background: #334155;
border-color: #475569;
}
.skeleton-line,
.skeleton-circle,
.skeleton-button {
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
background-size: 200% 100%;
}
.skeleton-badge {
background: linear-gradient(90deg, #475569 25%, #64748b 50%, #475569 75%);
background-size: 200% 100%;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* Performance optimizations */
.skeleton-line,
.skeleton-circle,
.skeleton-button,
.skeleton-badge {
will-change: background-position;
}
.skeleton-action-card,
.skeleton-activity-item,
.skeleton-stat-card {
will-change: opacity, transform;
}
</style>

286
fe/src/composables/useConflictResolution.ts Normal file
View File

@ -0,0 +1,286 @@
// fe/src/composables/useConflictResolution.ts
// Unified conflict resolution system for optimistic updates
import { ref, computed } from 'vue'
import type { ConflictResolution, OptimisticUpdate } from '@/types/shared'
interface ConflictState {
pendingConflicts: Map<string, ConflictResolution<any>>
optimisticUpdates: Map<string, OptimisticUpdate<any>>
resolutionStrategies: Map<string, 'local' | 'server' | 'merge' | 'manual'>
}
const state = ref<ConflictState>({
pendingConflicts: new Map(),
optimisticUpdates: new Map(),
resolutionStrategies: new Map()
})
export function useConflictResolution() {
// Computed properties
const hasConflicts = computed(() => state.value.pendingConflicts.size > 0)
const conflictCount = computed(() => state.value.pendingConflicts.size)
const pendingUpdates = computed(() => state.value.optimisticUpdates.size)
// Track an optimistic update
function trackOptimisticUpdate<T>(
entityType: string,
entityId: number,
operation: 'create' | 'update' | 'delete',
data: T
): string {
const updateId = `${entityType}_${entityId}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
const update: OptimisticUpdate<T> = {
id: updateId,
entity_type: entityType,
entity_id: entityId,
operation,
data,
timestamp: new Date().toISOString(),
status: 'pending'
}
state.value.optimisticUpdates.set(updateId, update)
console.log('[ConflictResolution] Tracked optimistic update:', updateId)
return updateId
}
// Confirm an optimistic update succeeded
function confirmOptimisticUpdate(updateId: string, serverData?: any) {
const update = state.value.optimisticUpdates.get(updateId)
if (update) {
update.status = 'confirmed'
if (serverData) {
update.data = serverData
}
// Keep confirmed updates for a short time for debugging
setTimeout(() => {
state.value.optimisticUpdates.delete(updateId)
}, 5000)
console.log('[ConflictResolution] Confirmed optimistic update:', updateId)
}
}
// Mark an optimistic update as failed and create conflict if needed
function failOptimisticUpdate<T>(
updateId: string,
serverData: T,
serverVersion: number
): string | null {
const update = state.value.optimisticUpdates.get(updateId)
if (!update) return null
update.status = 'failed'
// Create conflict resolution entry
const conflictId = `conflict_${updateId}`
const conflict: ConflictResolution<T> = {
id: conflictId,
entity_type: update.entity_type,
entity_id: update.entity_id,
local_version: 0, // We don't track versions in optimistic updates
server_version: serverVersion,
local_data: update.data,
server_data: serverData,
resolution_strategy: getDefaultStrategy(update.entity_type)
}
state.value.pendingConflicts.set(conflictId, conflict)
console.log('[ConflictResolution] Created conflict:', conflictId)
return conflictId
}
// Get default resolution strategy for entity type
function getDefaultStrategy(entityType: string): 'local' | 'server' | 'merge' | 'manual' {
const strategies = state.value.resolutionStrategies.get(entityType)
if (strategies) return strategies
// Default strategies by entity type
switch (entityType) {
case 'expense':
case 'settlement':
return 'manual' // Financial data requires manual review
case 'chore':
return 'server' // Prefer server state for chores
case 'list':
case 'item':
return 'merge' // Try to merge list changes
default:
return 'server'
}
}
// Set resolution strategy for entity type
function setResolutionStrategy(entityType: string, strategy: 'local' | 'server' | 'merge' | 'manual') {
state.value.resolutionStrategies.set(entityType, strategy)
}
// Resolve a conflict with chosen strategy
function resolveConflict<T>(
conflictId: string,
strategy: 'local' | 'server' | 'merge' | 'manual',
mergedData?: T
): T | null {
const conflict = state.value.pendingConflicts.get(conflictId)
if (!conflict) return null
let resolvedData: T
switch (strategy) {
case 'local':
resolvedData = conflict.local_data
break
case 'server':
resolvedData = conflict.server_data
break
case 'merge':
resolvedData = mergeData(conflict.local_data, conflict.server_data)
break
case 'manual':
if (!mergedData) {
console.error('[ConflictResolution] Manual resolution requires merged data')
return null
}
resolvedData = mergedData
break
}
// Update conflict with resolution
conflict.resolution_strategy = strategy
conflict.resolved_data = resolvedData
conflict.resolved_at = new Date().toISOString()
// Remove from pending conflicts
state.value.pendingConflicts.delete(conflictId)
console.log('[ConflictResolution] Resolved conflict:', conflictId, 'with strategy:', strategy)
return resolvedData
}
// Smart merge algorithm for common data types
function mergeData<T>(localData: T, serverData: T): T {
if (typeof localData !== 'object' || typeof serverData !== 'object') {
return serverData // Fallback to server data for primitives
}
// For objects, merge non-conflicting properties
const merged = { ...serverData } as any
const local = localData as any
const server = serverData as any
for (const key in local) {
if (local.hasOwnProperty(key)) {
// Prefer local changes for certain fields
if (isUserEditableField(key)) {
merged[key] = local[key]
}
// For arrays, try to merge intelligently
else if (Array.isArray(local[key]) && Array.isArray(server[key])) {
merged[key] = mergeArrays(local[key], server[key])
}
// For dates, prefer the more recent one
else if (isDateField(key)) {
const localDate = new Date(local[key])
const serverDate = new Date(server[key])
merged[key] = localDate > serverDate ? local[key] : server[key]
}
}
}
return merged as T
}
// Check if field is typically user-editable
function isUserEditableField(fieldName: string): boolean {
const editableFields = [
'name', 'description', 'notes', 'title',
'quantity', 'price', 'category',
'priority', 'status',
'custom_interval_days'
]
return editableFields.includes(fieldName)
}
// Check if field represents a date
function isDateField(fieldName: string): boolean {
return fieldName.includes('_at') || fieldName.includes('date') || fieldName.includes('time')
}
// Merge arrays intelligently (basic implementation)
function mergeArrays<T>(localArray: T[], serverArray: T[]): T[] {
// Simple merge - combine arrays and remove duplicates based on id
const merged = [...serverArray]
localArray.forEach(localItem => {
const localItemAny = localItem as any
if (localItemAny.id) {
const existingIndex = merged.findIndex((item: any) => item.id === localItemAny.id)
if (existingIndex >= 0) {
// Replace with local version
merged[existingIndex] = localItem
} else {
// Add new local item
merged.push(localItem)
}
} else {
// No ID, just add if not duplicate
if (!merged.some(item => JSON.stringify(item) === JSON.stringify(localItem))) {
merged.push(localItem)
}
}
})
return merged
}
// Get all pending conflicts
function getPendingConflicts() {
return Array.from(state.value.pendingConflicts.values())
}
// Get specific conflict
function getConflict(conflictId: string) {
return state.value.pendingConflicts.get(conflictId)
}
// Clear all conflicts (for testing or reset)
function clearConflicts() {
state.value.pendingConflicts.clear()
state.value.optimisticUpdates.clear()
}
// Get statistics
function getStats() {
return {
pendingConflicts: state.value.pendingConflicts.size,
optimisticUpdates: state.value.optimisticUpdates.size,
confirmedUpdates: Array.from(state.value.optimisticUpdates.values())
.filter(u => u.status === 'confirmed').length,
failedUpdates: Array.from(state.value.optimisticUpdates.values())
.filter(u => u.status === 'failed').length
}
}
return {
// State
hasConflicts,
conflictCount,
pendingUpdates,
// Methods
trackOptimisticUpdate,
confirmOptimisticUpdate,
failOptimisticUpdate,
resolveConflict,
setResolutionStrategy,
getPendingConflicts,
getConflict,
clearConflicts,
getStats
}
}

121
fe/src/composables/useExpenses.ts
View File

@ -1,100 +1,33 @@
import { ref, computed } from 'vue'
import type { Expense, SettlementActivityCreate } from '@/types/expense'
import { storeToRefs } from 'pinia'
import { useExpensesStore } from '@/stores/expensesStore'
import type { CreateExpenseData, UpdateExpenseData } from '@/services/expenseService'
import { expenseService } from '@/services/expenseService'
import type { SettlementActivityCreate } from '@/types/expense'
export function useExpenses() {
const expenses = ref<Expense[]>([])
const loading = ref(false)
const error = ref<string | null>(null)
// Get store instance
const expensesStore = useExpensesStore()
const recurringExpenses = computed(() => expenses.value.filter((expense) => expense.isRecurring))
// Expose reactive refs from store
const {
expenses,
recurringExpenses,
isLoading: loading,
error,
} = storeToRefs(expensesStore)
const fetchExpenses = async (params?: {
list_id?: number
group_id?: number
isRecurring?: boolean
}) => {
loading.value = true
error.value = null
try {
expenses.value = await expenseService.getExpenses(params)
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to fetch expenses'
throw err
} finally {
loading.value = false
}
}
// Delegate actions
const {
fetchExpenses,
createExpense,
updateExpense,
deleteExpense,
settleExpenseSplit,
} = expensesStore
const createExpense = async (data: CreateExpenseData) => {
loading.value = true
error.value = null
try {
const newExpense = await expenseService.createExpense(data)
expenses.value.push(newExpense)
return newExpense
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to create expense'
throw err
} finally {
loading.value = false
}
}
const updateExpense = async (id: number, data: UpdateExpenseData) => {
loading.value = true
error.value = null
try {
const updatedExpense = await expenseService.updateExpense(id, data)
const index = expenses.value.findIndex((e) => e.id === id)
if (index !== -1) {
expenses.value[index] = updatedExpense
}
return updatedExpense
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to update expense'
throw err
} finally {
loading.value = false
}
}
const deleteExpense = async (id: number) => {
loading.value = true
error.value = null
try {
await expenseService.deleteExpense(id)
expenses.value = expenses.value.filter((e) => e.id !== id)
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to delete expense'
throw err
} finally {
loading.value = false
}
}
const settleExpenseSplit = async (expense_split_id: number, activity: SettlementActivityCreate) => {
try {
await expenseService.settleExpenseSplit(expense_split_id, activity)
// refetch or update locally later
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to settle split'
throw err
}
}
const getExpense = async (id: number) => {
loading.value = true
error.value = null
try {
return await expenseService.getExpense(id)
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to fetch expense'
throw err
} finally {
loading.value = false
}
// Keep backward-compatible API
async function getExpense(id: number) {
// Directly call service – rare use outside store
return await import('@/services/expenseService').then(m => m.expenseService.getExpense(id))
}
return {
@ -103,10 +36,10 @@ export function useExpenses() {
loading,
error,
fetchExpenses,
createExpense,
updateExpense,
createExpense: createExpense as (data: CreateExpenseData) => Promise<any>,
updateExpense: updateExpense as (id: number, data: UpdateExpenseData) => Promise<any>,
deleteExpense,
settleExpenseSplit,
settleExpenseSplit: settleExpenseSplit as (expense_split_id: number, activity: SettlementActivityCreate) => Promise<void>,
getExpense,
}
}

102
fe/src/composables/useItemHelpers.ts Normal file
View File

@ -0,0 +1,102 @@
import { computed } from 'vue'
// Use a more flexible Item interface that works with both ItemsList and ListsPage
interface BaseItem {
id: number | string
tempId?: string
name: string
is_complete: boolean
category_id?: number | null
price?: number | null
claimed_by_user_id?: number | null
quantity?: string | null
version?: number
updated_at?: string
updating?: boolean
}
export interface Category {
id: number
name: string
}
export interface ItemGroup {
categoryName: string
items: BaseItem[]
}
export function useItemHelpers() {
const groupItemsByCategory = (items: BaseItem[], categories: Category[], uncategorizedLabel = 'Uncategorized') => {
const groups: Record<string, ItemGroup> = {}
items.forEach(item => {
const categoryId = item.category_id
const category = categories.find(c => c.id === categoryId)
const categoryName = category ? category.name : uncategorizedLabel
if (!groups[categoryName]) {
groups[categoryName] = { categoryName, items: [] }
}
groups[categoryName].items.push(item)
})
return Object.values(groups)
}
const getCompletedCount = (items: BaseItem[]) => {
return items.filter(item => item.is_complete).length
}
const getCompletionPercentage = (items: BaseItem[]) => {
if (items.length === 0) return 0
return Math.round((getCompletedCount(items) / items.length) * 100)
}
const getPreviewItems = (items: BaseItem[], limit = 3) => {
return items.slice(0, limit)
}
const getIncompleteTasks = (items: BaseItem[]) => {
return items.filter(item => !item.is_complete)
}
const getCompletedTasks = (items: BaseItem[]) => {
return items.filter(item => item.is_complete)
}
const getTotalEstimatedCost = (items: BaseItem[]) => {
return items.reduce((total, item) => {
return total + (item.price ? parseFloat(String(item.price)) : 0)
}, 0)
}
const getClaimedItems = (items: BaseItem[]) => {
return items.filter(item => item.claimed_by_user_id)
}
const buildCategoryOptions = (categories: Category[], includeNone = true) => {
const options: { label: string; value: number | null }[] = categories.map(cat => ({
label: cat.name,
value: cat.id
}))
if (includeNone) {
options.unshift({ label: 'No Category', value: null })
}
return options
}
return {
groupItemsByCategory,
getCompletedCount,
getCompletionPercentage,
getPreviewItems,
getIncompleteTasks,
getCompletedTasks,
getTotalEstimatedCost,
getClaimedItems,
buildCategoryOptions
}
}

332
fe/src/composables/useSocket.ts
View File

@ -1,55 +1,317 @@
import { ref, shallowRef, onUnmounted } from 'vue'
// fe/src/composables/useSocket.ts
// Unified WebSocket composable - Real-time communication with type safety
// Simple wrapper around native WebSocket with auto-reconnect & Vue-friendly API.
// In tests we can provide a mock implementation via `mock-socket`.
// TODO: Move to dedicated class if feature set grows.
import { ref, computed, onUnmounted } from 'vue'
import type { WebSocketEvent } from '@/types/shared'
import { useAuthStore } from '@/stores/auth'
interface Listener {
(payload: any): void
interface WebSocketMessage {
type: string
payload: Record<string, any>
}
const defaultWsUrl = import.meta.env.VITE_WS_BASE_URL || 'ws://localhost:8000/ws'
// Global WebSocket disabled - stores handle their own connections
let _socket: WebSocket | null = null
const listeners = new Map<string, Set<Listener>>()
const isConnected = ref(false)
function _connect(): void {
// Global WebSocket disabled - stores handle their own connections
console.debug('[useSocket] Global WebSocket connection disabled')
interface SocketState {
socket: WebSocket | null
isConnected: boolean
isConnecting: boolean
retryCount: number
listeners: Map<string, Set<Function>>
householdId: number | null
lastActivity: Date
}
function emit(event: string, payload: any): void {
// Note: Global WebSocket disabled - individual stores handle their own connections
console.debug('WebSocket emit called (disabled):', event, payload)
return
}
const state = ref<SocketState>({
socket: null,
isConnected: false,
isConnecting: false,
retryCount: 0,
listeners: new Map(),
householdId: null,
lastActivity: new Date()
})
function on(event: string, cb: Listener): void {
if (!listeners.has(event)) listeners.set(event, new Set())
listeners.get(event)!.add(cb)
}
const MAX_RETRY_ATTEMPTS = 5
const RETRY_DELAY_BASE = 1000 // 1 second
const HEARTBEAT_INTERVAL = 30000 // 30 seconds
const RECONNECT_INTERVAL = 5000 // 5 seconds
function off(event: string, cb: Listener): void {
listeners.get(event)?.delete(cb)
}
// Note: Auto-connect disabled - stores handle their own WebSocket connections
// connect()
let heartbeatTimer: ReturnType<typeof setInterval> | null = null
let reconnectTimer: ReturnType<typeof setTimeout> | null = null
export function useSocket() {
// Provide stable references to the consumer component.
const connected = shallowRef(isConnected)
const authStore = useAuthStore()
// Computed properties
const isConnected = computed(() => state.value.isConnected)
const isConnecting = computed(() => state.value.isConnecting)
const connectionStatus = computed(() => {
if (state.value.isConnected) return 'connected'
if (state.value.isConnecting) return 'connecting'
return 'disconnected'
})
// Connect to household WebSocket
function connect(householdId: number, forceReconnect = false) {
if (!authStore.accessToken || !authStore.user) {
console.warn('[Socket] Cannot connect: No authentication')
return Promise.reject(new Error('No authentication'))
}
if (state.value.isConnected && state.value.householdId === householdId && !forceReconnect) {
console.log('[Socket] Already connected to household', householdId)
return Promise.resolve()
}
if (state.value.isConnecting) {
console.log('[Socket] Connection already in progress')
return Promise.resolve()
}
disconnect() // Clean up existing connection
state.value.isConnecting = true
state.value.householdId = householdId
return new Promise<void>((resolve, reject) => {
try {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
const host = window.location.host
const wsUrl = `${protocol}//${host}/api/v1/ws/household/${householdId}?token=${encodeURIComponent(authStore.accessToken || '')}`
console.log('[Socket] Connecting to:', wsUrl)
const socket = new WebSocket(wsUrl)
socket.onopen = () => {
console.log('[Socket] Connected to household', householdId)
state.value.socket = socket
state.value.isConnected = true
state.value.isConnecting = false
state.value.retryCount = 0
state.value.lastActivity = new Date()
startHeartbeat()
resolve()
}
socket.onmessage = (event) => {
try {
const wsEvent: WebSocketEvent = JSON.parse(event.data)
handleMessage(wsEvent)
} catch (error) {
console.error('[Socket] Failed to parse message:', error, event.data)
}
}
socket.onerror = (error) => {
console.error('[Socket] WebSocket error:', error)
state.value.isConnecting = false
reject(error)
}
socket.onclose = (event) => {
console.log('[Socket] Disconnected:', event.code, event.reason)
cleanup()
// Auto-reconnect if not manually closed
if (event.code !== 1000 && state.value.retryCount < MAX_RETRY_ATTEMPTS) {
scheduleReconnect(householdId)
}
}
} catch (error) {
console.error('[Socket] Connection failed:', error)
state.value.isConnecting = false
reject(error)
}
})
}
// Disconnect from WebSocket
function disconnect() {
if (state.value.socket) {
state.value.socket.close(1000, 'Manual disconnect')
}
cleanup()
}
// Clean up connection state
function cleanup() {
state.value.socket = null
state.value.isConnected = false
state.value.isConnecting = false
if (heartbeatTimer) {
clearInterval(heartbeatTimer)
heartbeatTimer = null
}
if (reconnectTimer) {
clearTimeout(reconnectTimer)
reconnectTimer = null
}
}
// Start heartbeat to keep connection alive
function startHeartbeat() {
heartbeatTimer = setInterval(() => {
if (state.value.isConnected && state.value.socket) {
send({
type: 'presence_update',
payload: { action: 'heartbeat' }
})
}
}, HEARTBEAT_INTERVAL)
}
// Schedule reconnection with exponential backoff
function scheduleReconnect(householdId: number) {
if (reconnectTimer) return
const delay = RETRY_DELAY_BASE * Math.pow(2, state.value.retryCount)
console.log(`[Socket] Scheduling reconnect in ${delay}ms (attempt ${state.value.retryCount + 1})`)
reconnectTimer = setTimeout(() => {
state.value.retryCount++
reconnectTimer = null
connect(householdId, true).catch(() => {
// Failed to reconnect, will try again
})
}, delay)
}
// Handle incoming WebSocket messages
function handleMessage(wsEvent: WebSocketEvent) {
state.value.lastActivity = new Date()
console.log('[Socket] Received event:', wsEvent.event, wsEvent.payload)
// Handle system events
if (wsEvent.event === 'connection:established') {
console.log('[Socket] Connection established:', wsEvent.payload)
return
}
if (wsEvent.event === 'ping' || wsEvent.event === 'list:ping') {
// Respond to server ping
send({ type: 'pong', payload: {} })
return
}
// Emit event to registered listeners
const listeners = state.value.listeners.get(wsEvent.event)
if (listeners) {
listeners.forEach(callback => {
try {
callback(wsEvent.payload)
} catch (error) {
console.error('[Socket] Error in event listener:', error)
}
})
}
}
// Send message to server
function send(message: WebSocketMessage) {
if (!state.value.isConnected || !state.value.socket) {
console.warn('[Socket] Cannot send message: Not connected')
return false
}
try {
state.value.socket.send(JSON.stringify(message))
return true
} catch (error) {
console.error('[Socket] Failed to send message:', error)
return false
}
}
// Register event listener
function on(event: string, callback: Function) {
if (!state.value.listeners.has(event)) {
state.value.listeners.set(event, new Set())
}
state.value.listeners.get(event)!.add(callback)
}
// Unregister event listener
function off(event: string, callback: Function) {
const listeners = state.value.listeners.get(event)
if (listeners) {
listeners.delete(callback)
if (listeners.size === 0) {
state.value.listeners.delete(event)
}
}
}
// Emit event (for client-side events)
function emit(event: string, payload: any) {
const message: WebSocketMessage = {
type: 'custom_event',
payload: { event, ...payload }
}
send(message)
}
// Indicate user is editing an entity
function startEditing(entityType: string, entityId: number, field?: string) {
send({
type: 'editing_started',
payload: { entity_type: entityType, entity_id: entityId, field }
})
}
// Indicate user stopped editing an entity
function stopEditing(entityType: string, entityId: number) {
send({
type: 'editing_stopped',
payload: { entity_type: entityType, entity_id: entityId }
})
}
// Update user presence/activity
function updatePresence(action: string = 'active') {
send({
type: 'presence_update',
payload: { action }
})
}
// Get connection statistics
function getStats() {
return {
isConnected: state.value.isConnected,
isConnecting: state.value.isConnecting,
householdId: state.value.householdId,
retryCount: state.value.retryCount,
lastActivity: state.value.lastActivity,
listenerCount: Array.from(state.value.listeners.values()).reduce((sum, set) => sum + set.size, 0)
}
}
// Clean up on component unmount
onUnmounted(() => {
// Consumers may call off if they registered listeners, but we don't force it here.
disconnect()
})
return {
isConnected: connected,
// State
isConnected,
isConnecting,
connectionStatus,
// Methods
connect,
disconnect,
send,
on,
off,
emit,
startEditing,
stopEditing,
updatePresence,
getStats
}
}

1333
fe/src/layouts/MainLayout.vue
View File

File diff suppressed because it is too large Load Diff

4
fe/src/main.ts
View File

@ -13,6 +13,7 @@ import nlMessages from './i18n/nl.json'
import './assets/base.css'
import { api, globalAxios } from '@/services/api'
import { useAuthStore } from '@/stores/auth'
import { initAdvancedPerformanceOptimizations } from '@/utils/advancedPerformance'
const i18n = createI18n({
@ -58,4 +59,7 @@ app.use(i18n)
app.config.globalProperties.$api = api
app.config.globalProperties.$axios = globalAxios
// Initialize performance optimizations
initAdvancedPerformanceOptimizations()
app.mount('#app')

1257
fe/src/pages/ChoresPage.vue
View File

File diff suppressed because it is too large Load Diff

884
fe/src/pages/DashboardPage.vue
View File

@ -1,212 +1,828 @@
<template>
<div class="dashboard-page">
<!-- Header -->
<div class="dashboard-header">
<div class="header-content">
<h1 class="page-title">Dashboard</h1>
<div class="header-actions">
<!-- Quick action shortcuts could go here -->
<!-- Hero Section - Personal Status Above Fold -->
<section class="hero-section">
<div class="hero-content">
<header class="dashboard-header">
<h1 class="greeting">{{ timeBasedGreeting }}</h1>
<p class="status-subtitle">{{ statusMessage }}</p>
</header>
<QuickChoreAdd @chore-added="handleChoreAdded" class="mb-4" />
<!-- Personal Status Card - Single source of truth -->
<PersonalStatusCard @priority-action="handlePriorityAction" @create-action="handleCreateAction"
class="status-card" />
</div>
</section>
<!-- Quick Actions - Contextual and Smart -->
<section class="quick-actions-section">
<div class="section-header">
<span class="section-badge">{{ t('dashboard.mostUsed', 'Most Used') }}</span>
</div>
<div class="quick-actions-grid">
<!-- Contextual Quick Actions -->
<button v-for="action in contextualActions" :key="action.id" class="quick-action-button"
:class="action.styleClass" @click="action.handler">
<div class="action-icon-container">
<span class="material-icons">{{ action.icon }}</span>
<span v-if="action.badge" class="action-badge">{{ action.badge }}</span>
</div>
<div class="action-content">
<h3 class="action-title">{{ action.title }}</h3>
<p class="action-subtitle">{{ action.subtitle }}</p>
</div>
<span class="material-icons action-arrow">arrow_forward</span>
</button>
</div>
</section>
<!-- Activity Feed - Social Proof -->
<section class="activity-section">
<Suspense>
<template #default>
<ActivityFeed @activity-action="handleActivityAction" />
</template>
<template #fallback>
<div class="activity-skeleton">
<div v-for="i in 3" :key="i" class="activity-skeleton-item">
<div class="skeleton-avatar"></div>
<div class="skeleton-content">
<div class="skeleton-line"></div>
<div class="skeleton-line short"></div>
</div>
<div class="skeleton-time"></div>
</div>
</div>
</template>
</Suspense>
</section>
<!-- Insights Section - Data Driven -->
<section v-if="insights.length > 0" class="insights-section">
<div class="section-header">
<h2 class="section-title">{{ t('dashboard.insights', 'Insights') }}</h2>
<span class="section-badge insights">{{ t('dashboard.personalized', 'Personalized') }}</span>
</div>
<div class="insights-grid">
<div v-for="insight in insights" :key="insight.id" class="insight-card" :class="insight.type">
<div class="insight-icon">
<span class="material-icons">{{ insight.icon }}</span>
</div>
<div class="insight-content">
<h3 class="insight-title">{{ insight.title }}</h3>
<p class="insight-description">{{ insight.description }}</p>
<Button v-if="insight.action" variant="ghost" size="sm" @click="insight.action.handler"
class="insight-action">
{{ insight.action.label }}
</Button>
</div>
</div>
</div>
</div>
</section>
<!-- Main Content - Single source of truth layout -->
<div class="dashboard-content">
<!-- Personal Status (Above fold) -->
<section class="status-section">
<PersonalStatusCard @priority-action="handlePriorityAction" @create-action="handleCreateAction" />
</section>
<!-- Universal FAB Integration -->
<!-- <UniversalFAB @scan-receipt="handleScanReceipt" @create-list="handleCreateList"
@invite-member="handleInviteMember" @quick-expense="handleQuickExpense" /> -->
<!-- Activity Feed (Social proof) -->
<section class="activity-section">
<div class="section-header">
<h2 class="section-title">Recent Activity</h2>
<Button variant="ghost" color="neutral" size="sm">
View All
</Button>
</div>
<ActivityFeed />
</section>
<!-- Quick Actions Section (Contextual) -->
<section class="quick-actions-section">
<div class="section-header">
<h2 class="section-title">Quick Actions</h2>
</div>
<div class="quick-actions-grid">
<QuickChoreAdd />
<!-- Additional quick action cards could be added here -->
</div>
</section>
</div>
<!-- Universal FAB (Fixed positioning) -->
<UniversalFAB @scan-receipt="handleScanReceipt" @create-list="handleCreateList"
@invite-member="handleInviteMember" />
<!-- Notification Area -->
<!-- Global Notifications -->
<NotificationDisplay />
<!-- Quick Action Modals -->
<Teleport to="body">
<QuickExpenseModal v-model="showQuickExpenseModal" @expense-created="handleExpenseCreated" />
<ReceiptScannerModal v-model="showReceiptScanModal" @receipt-processed="handleReceiptProcessed" />
</Teleport>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useGroupStore } from '@/stores/groupStore'
import { useNotificationStore } from '@/stores/notifications'
import { useChoreStore } from '@/stores/choreStore'
import { useExpensesStore } from '@/stores/expensesStore'
import { useAuthStore } from '@/stores/auth'
import PersonalStatusCard from '@/components/dashboard/PersonalStatusCard.vue'
import ActivityFeed from '@/components/dashboard/ActivityFeed.vue'
import UniversalFAB from '@/components/dashboard/UniversalFAB.vue'
// import UniversalFAB from '@/components/dashboard/UniversalFAB.vue'
import QuickChoreAdd from '@/components/QuickChoreAdd.vue'
import NotificationDisplay from '@/components/global/NotificationDisplay.vue'
import Button from '@/components/ui/Button.vue'
// import QuickExpenseModal from '@/components/expenses/QuickExpenseModal.vue'
import ReceiptScannerModal from '@/components/ReceiptScannerModal.vue'
import { preloadManager } from '@/utils/advancedPerformance'
import { storeToRefs } from 'pinia'
const { t } = useI18n()
const router = useRouter()
const groupStore = useGroupStore()
const notificationStore = useNotificationStore()
const choreStore = useChoreStore()
const expensesStore = useExpensesStore()
const authStore = useAuthStore()
onMounted(async () => {
// Fetch user groups and other dashboard data
try {
await groupStore.fetchUserGroups()
} catch (error) {
console.error('Failed to load dashboard data:', error)
}
// Reactive state
const showQuickExpenseModal = ref(false)
const showReceiptScanModal = ref(false)
const { user } = storeToRefs(authStore)
// Smart greeting based on time and user context
const timeBasedGreeting = computed(() => {
const hour = new Date().getHours()
const name = user.value?.name?.split(' ')[0] || 'there'
if (hour < 12) return t('dashboard.greeting.morning', `Good morning, ${name}!`)
if (hour < 17) return t('dashboard.greeting.afternoon', `Good afternoon, ${name}!`)
return t('dashboard.greeting.evening', `Good evening, ${name}!`)
})
// Handle priority action from PersonalStatusCard
// Dynamic status message based on context
const statusMessage = computed(() => {
const overdueCount = choreStore.overdueChores.length
const pendingExpenses = Object.keys(expensesStore.pendingSettlements).length
if (overdueCount > 0) {
return t('dashboard.status.overdue', `You have ${overdueCount} overdue chore${overdueCount > 1 ? 's' : ''}`)
}
if (pendingExpenses > 0) {
return t('dashboard.status.expenses', `${pendingExpenses} expense${pendingExpenses > 1 ? 's' : ''} to review`)
}
return t('dashboard.status.upToDate', "You're all caught up! 🎉")
})
// Smart contextual actions based on user behavior and data
const contextualActions = computed(() => {
const actions = []
// Most used: Add Expense (80% usage)
actions.push({
id: 'add-expense',
title: t('dashboard.actions.addExpense', 'Add Expense'),
subtitle: t('dashboard.actions.addExpenseDesc', 'Split a bill with household'),
icon: 'receipt_long',
styleClass: 'primary',
badge: null,
handler: () => showQuickExpenseModal.value = true
})
// Context-aware: Lists (using name-based filter for 'shopping')
const shoppingListsCount = groupStore.groups.filter(g => g.name && g.name.toLowerCase().includes('shopping')).length
if (shoppingListsCount > 0) {
actions.push({
id: 'shopping-list',
title: t('dashboard.actions.shoppingList', 'Shopping List'),
subtitle: t('dashboard.actions.shoppingListDesc', 'Add items to grocery list'),
icon: 'shopping_cart',
styleClass: 'secondary',
badge: String(shoppingListsCount),
handler: () => router.push('/lists?type=shopping')
})
}
// Smart: Scan Receipt if expenses exist
if (expensesStore.expenses.length > 0) {
actions.push({
id: 'scan-receipt',
title: t('dashboard.actions.scanReceipt', 'Scan Receipt'),
subtitle: t('dashboard.actions.scanReceiptDesc', 'Quick expense from photo'),
icon: 'photo_camera',
styleClass: 'tertiary smart',
badge: null,
handler: () => showReceiptScanModal.value = true
})
}
return actions.slice(0, 3) // Max 3 for clean layout
})
// Smart insights based on user data and patterns
const insights = computed(() => {
const insightsList: any[] = []
// Financial insight (example: compare this month vs last month)
// You may want to add a getter in expensesStore for monthly/lastMonth spending, but for now, skip this insight if not available
// Chore completion insight (example: completion rate)
// You may want to add a getter in choreStore for completion rate, but for now, skip this insight if not available
// Group efficiency insight (example: most active member)
// You may want to add a getter in groupStore for member activity, but for now, skip this insight if not available
return insightsList
})
const hasOverdueChores = computed(() => choreStore.overdueChores.length > 0)
// Event handlers with optimistic updates
const handlePriorityAction = (action: any) => {
// Navigate to the appropriate page based on action type
// Preload the target route for instant navigation
preloadManager.preloadRoute(action.routeKey)
router.push(action.actionUrl)
notificationStore.addNotification({
type: 'info',
message: `Navigating to ${action.title}`,
message: t('dashboard.navigating', `Opening ${action.title}...`),
duration: 1500
})
}
// Handle create action from PersonalStatusCard
const handleCreateAction = () => {
// For now, navigate to lists page
router.push('/lists')
}
// Handle FAB actions
const handleScanReceipt = () => {
// Open receipt scanning interface
notificationStore.addNotification({
type: 'info',
message: 'Receipt scanner opening...',
})
// TODO: Implement receipt scanning
}
const handleCreateList = () => {
// Open list creation modal
router.push('/lists?create=true')
}
const handleInviteMember = () => {
// Open member invitation modal
const handleChoreAdded = (chore: any) => {
notificationStore.addNotification({
type: 'info',
message: 'Invite member feature coming soon!',
type: 'success',
message: t('dashboard.choreAdded', `"${chore.name}" added successfully!`),
duration: 3000
})
// TODO: Implement member invitation
// Refresh chore data
// If you want to refresh, call fetchPersonal() and/or fetchGroup() as needed
// choreStore.fetchPersonal()
}
const handleActivityAction = (activity: any) => {
// Handle interactions with activity feed items
if (activity.actionUrl) {
router.push(activity.actionUrl)
}
}
// const handleQuickExpense = () => {
// showQuickExpenseModal.value = true
// }
const handleExpenseCreated = (expense: any) => {
showQuickExpenseModal.value = false
notificationStore.addNotification({
type: 'success',
message: t('dashboard.expenseCreated', `Expense "${expense.description}" created!`),
duration: 3000
})
// Refresh expense data
expensesStore.fetchExpenses()
}
const handleReceiptProcessed = (receipt: any) => {
showReceiptScanModal.value = false
notificationStore.addNotification({
type: 'success',
message: t('dashboard.receiptProcessed', 'Receipt processed successfully!'),
duration: 3000
})
// Navigate to expense creation with pre-filled data
router.push(`/expenses/new?from=receipt&data=${encodeURIComponent(JSON.stringify(receipt))}`)
}
// const handleCreateList = () => {
// router.push('/lists?create=true')
// }
// const handleInviteMember = () => {
// router.push('/groups?invite=true')
// }
const navigateToActivity = () => {
router.push('/activity')
}
// Performance optimizations
onMounted(async () => {
try {
// Parallel data loading for better UX
const promises = [
groupStore.fetchUserGroups(),
// choreStore.fetchPersonal(), // Uncomment if you want to fetch chores
expensesStore.fetchExpenses()
]
await Promise.allSettled(promises)
// Preload likely next routes based on dashboard context
preloadManager.preloadLikelyRoutes('dashboard')
} catch (error) {
console.error('Failed to load dashboard data:', error)
notificationStore.addNotification({
type: 'error',
message: t('dashboard.loadError', 'Failed to load some data. Please refresh.'),
duration: 5000
})
}
})
// Reactive updates for live data
watch(() => choreStore.overdueChores.length, (newCount, oldCount) => {
if (newCount > oldCount && newCount > 0) {
notificationStore.addNotification({
type: 'warning',
message: t('dashboard.overdueAlert', `You have ${newCount} overdue chore${newCount > 1 ? 's' : ''}!`),
duration: 4000
})
}
})
</script>
<style scoped>
<style scoped lang="scss">
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.dashboard-page {
@apply min-h-screen bg-neutral-50;
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 0;
@media (min-width: 768px) {
padding: 0 1rem;
}
}
/* Hero Section - Above Fold */
.hero-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 1rem 3rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0 5.5-4.5 10-10 10s-10-4.5-10-10 4.5-10 10-10 10 4.5 10 10zm10 0c0 5.5-4.5 10-10 10s-10-4.5-10-10 4.5-10 10-10 10 4.5 10 10z'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 768px) {
border-radius: 16px;
margin: 1rem 0 2rem;
padding: 3rem 2rem 4rem;
}
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.dashboard-header {
@apply bg-white border-b border-neutral-200 sticky top-0 z-20;
@apply shadow-soft;
text-align: center;
margin-bottom: 2rem;
@media (min-width: 768px) {
text-align: left;
}
}
.header-content {
@apply max-w-7xl mx-auto px-4 py-6 flex items-center justify-between;
.greeting {
font-size: 2rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@media (min-width: 768px) {
font-size: 2.5rem;
}
}
.page-title {
@apply text-2xl font-semibold text-neutral-900;
.status-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin: 0;
font-weight: 300;
}
.header-actions {
@apply flex items-center gap-3;
.status-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #1f2937;
@media (min-width: 768px) {
padding: 2rem;
}
}
.dashboard-content {
@apply max-w-4xl mx-auto px-4 py-6 space-y-8;
/* Ensure content is above FAB on mobile */
@apply pb-32 lg:pb-8;
}
.status-section {
/* Above fold - most important */
@apply space-y-4;
}
.activity-section {
@apply space-y-4;
}
.quick-actions-section {
@apply space-y-4;
/* Sections */
.quick-actions-section,
.activity-section,
.insights-section {
max-width: 1200px;
margin: 0 auto 3rem;
padding: 0 1rem;
}
.section-header {
@apply flex items-center justify-between;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.section-title {
@apply text-lg font-medium text-neutral-900;
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin: 0;
@media (min-width: 768px) {
font-size: 1.75rem;
}
}
.section-badge {
padding: 0.25rem 0.75rem;
background: #e0e7ff;
color: #3730a3;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
&.insights {
background: #ecfdf5;
color: #047857;
}
}
/* Quick Actions Grid */
.quick-actions-grid {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
@media (min-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
}
}
/* Responsive adjustments */
@media (max-width: 640px) {
.header-content {
@apply px-4 py-4;
.quick-action-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
border: 1px solid #e5e7eb;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-title {
@apply text-xl;
&.pulse-subtle {
animation: pulse-subtle 3s ease-in-out infinite;
}
}
.quick-action-button {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1.5rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: #d1d5db;
}
.dashboard-content {
@apply px-4 py-4 space-y-6;
&.primary {
border-color: #3b82f6;
.action-icon-container {
background: #eff6ff;
color: #2563eb;
}
}
&.secondary {
border-color: #10b981;
.action-icon-container {
background: #ecfdf5;
color: #059669;
}
}
&.tertiary {
border-color: #f59e0b;
.action-icon-container {
background: #fffbeb;
color: #d97706;
}
}
&.smart {
position: relative;
&::after {
content: '✨';
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0.875rem;
}
}
}
.action-icon-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: #f3f4f6;
color: #6b7280;
flex-shrink: 0;
.material-icons {
font-size: 24px;
}
}
.action-badge {
position: absolute;
top: -4px;
right: -4px;
background: #ef4444;
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 8px;
min-width: 16px;
text-align: center;
}
.action-content {
flex-grow: 1;
min-width: 0;
}
.action-title {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0 0 0.25rem 0;
}
.action-subtitle {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
line-height: 1.4;
}
.action-arrow {
color: #9ca3af;
font-size: 20px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.quick-action-button:hover .action-arrow {
transform: translateX(4px);
}
/* Insights Grid */
.insights-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
@media (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
}
}
.insight-card {
display: flex;
gap: 1rem;
padding: 1.5rem;
background: white;
border-radius: 12px;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
&.financial {
border-left: 4px solid #3b82f6;
}
&.achievement {
border-left: 4px solid #10b981;
}
&.social {
border-left: 4px solid #8b5cf6;
}
}
.insight-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #f3f4f6;
color: #6b7280;
flex-shrink: 0;
.material-icons {
font-size: 20px;
}
}
.insight-content {
flex-grow: 1;
}
.insight-title {
font-size: 0.875rem;
font-weight: 600;
color: #111827;
margin: 0 0 0.25rem 0;
}
.insight-description {
font-size: 0.8rem;
color: #6b7280;
margin: 0 0 0.75rem 0;
line-height: 1.4;
}
.insight-action {
font-size: 0.8rem;
padding: 0.25rem 0.5rem;
height: auto;
}
/* Activity Skeleton */
.activity-skeleton {
background: white;
border-radius: 12px;
padding: 1.5rem;
border: 1px solid #e5e7eb;
}
.activity-skeleton-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #f3f4f6;
&:last-child {
border-bottom: none;
}
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.skeleton-line {
height: 1rem;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 4px;
&.short {
width: 60%;
}
}
.skeleton-time {
width: 60px;
height: 0.875rem;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 4px;
}
/* Animations */
@keyframes pulse-subtle {
0%,
100% {
transform: scale(1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
50% {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
}
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.dashboard-page {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.section-title {
@apply text-base;
color: #f1f5f9;
}
.quick-action-card,
.quick-action-button,
.insight-card,
.activity-skeleton {
background: #334155;
border-color: #475569;
color: #f1f5f9;
}
.action-title,
.insight-title {
color: #f1f5f9;
}
.action-subtitle,
.insight-description {
color: #cbd5e1;
}
}
/* Smooth transitions */
.dashboard-content>section {
animation: fade-in 300ms ease-out;
}
.dashboard-content>section:nth-child(2) {
animation-delay: 100ms;
}
.dashboard-content>section:nth-child(3) {
animation-delay: 200ms;
}
/* Loading states */
.dashboard-content.loading {
@apply opacity-75;
}
.dashboard-content.loading>section {
@apply animate-skeleton;
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>

645
fe/src/pages/GroupDetailPage.vue
View File

@ -1,284 +1,331 @@
<template>
<main class="container page-padding">
<div class="group-detail-container">
<div v-if="loading" class="text-center">
<Spinner :label="t('groupDetailPage.loadingLabel')" />
</div>
<Alert v-else-if="error" type="error" :message="error" class="mb-3">
<Button color="danger" size="sm" @click="fetchGroupDetails">{{ t('groupDetailPage.retryButton') }}
</Button>
</Alert>
<div v-else-if="group">
<div class="flex justify-between items-start mb-4">
<Heading :level="1">{{ group.name }}</Heading>
<Button variant="ghost" size="sm" @click="goToSettings"
:aria-label="t('groupDetailPage.settingsButton', 'Settings')" class="ml-2">
<BaseIcon name="heroicons:cog-6-tooth" class="h-6 w-6" />
</Button>
<div class="member-avatar-list">
<div ref="avatarsContainerRef" class="member-avatars">
<div v-for="member in group.members" :key="member.id" class="member-avatar">
<div @click="toggleMemberMenu(member.id)" class="avatar-circle" :title="member.email">
{{ member.email.charAt(0).toUpperCase() }}
</div>
<div v-show="activeMemberMenu === member.id" ref="memberMenuRef" class="member-menu" @click.stop>
<div class="popup-header">
<span class="font-semibold truncate">{{ member.email }}</span>
<Button variant="ghost" size="sm" @click="activeMemberMenu = null"
:aria-label="t('groupDetailPage.members.closeMenuLabel')">
<BaseIcon name="heroicons:x-mark" class="h-5 w-5" />
</Button>
</div>
<div class="member-menu-content">
<span :class="badgeClasses(member.role?.toLowerCase() === 'owner' ? 'primary' : 'secondary')">
{{ member.role || t('groupDetailPage.members.defaultRole') }}
</span>
<Button v-if="canRemoveMember(member)" color="danger" size="sm" class="w-full text-left mt-2"
@click="removeMember(member.id)" :disabled="removingMember === member.id">
<Spinner v-if="removingMember === member.id" size="sm" class="mr-1" />
{{ t('groupDetailPage.members.removeButton') }}
</Button>
</div>
</div>
</div>
</div>
<button ref="addMemberButtonRef" @click="toggleInviteUI" class="add-member-btn"
:aria-label="t('groupDetailPage.invites.title')">
+
</button>
<div v-show="showInviteUI" ref="inviteUIRef" class="invite-popup">
<div class="popup-header">
<Heading :level="3" class="!m-0 !p-0 !border-none">{{ t('groupDetailPage.invites.title') }}
</Heading>
<Button variant="ghost" size="sm" @click="showInviteUI = false"
:aria-label="t('groupDetailPage.invites.closeInviteLabel')">
<BaseIcon name="heroicons:x-mark" class="h-5 w-5" />
</Button>
</div>
<p class="text-sm text-gray-500 my-2">{{ t('groupDetailPage.invites.description') }}</p>
<Button color="primary" class="w-full" @click="generateInviteCode" :disabled="generatingInvite">
<Spinner v-if="generatingInvite" size="sm" /> {{ inviteCode ?
t('groupDetailPage.invites.regenerateButton') :
t('groupDetailPage.invites.generateButton') }}
</Button>
<div v-if="inviteCode" class="neo-invite-code mt-3">
<div class="mb-1">
<label for="inviteCodeInput" class="block text-sm font-medium mb-1">{{
t('groupDetailPage.invites.activeCodeLabel') }}</label>
<div class="flex items-center gap-2">
<Input id="inviteCodeInput" :model-value="inviteCode" readonly class="flex-grow" />
<Button variant="outline" color="secondary" @click="copyInviteCodeHandler"
:aria-label="t('groupDetailPage.invites.copyButtonLabel')">
<BaseIcon name="heroicons:clipboard-document" class="h-5 w-5" />
</Button>
</div>
</div>
<p v-if="copySuccess" class="text-sm text-green-600 mt-1">{{ t('groupDetailPage.invites.copySuccess') }}
</p>
</div>
</div>
</div>
</div>
<div class="neo-section-cntainer">
<div class="neo-section">
<ChoresPage :group-id="groupId" />
<ListsPage :group-id="groupId" />
</div>
<div class="mt-4 neo-section">
<ExpensesPage :group-id="groupId" />
</div>
<div class="mt-4 neo-section">
<Heading :level="3" class="neo-section-header">{{ t('groupDetailPage.activityLog.title') }}</Heading>
<div v-if="groupHistoryLoading" class="text-center">
<Spinner />
</div>
<ul v-else-if="groupChoreHistory.length > 0" class="activity-log-list">
<li v-for="entry in groupChoreHistory" :key="entry.id" class="activity-log-item">
{{ formatHistoryEntry(entry) }}
</li>
</ul>
<p v-else>{{ t('groupDetailPage.activityLog.emptyState') }}</p>
</div>
</div>
</div>
<Alert v-else type="info" :message="t('groupDetailPage.groupNotFound')" />
<Dialog v-model="showChoreDetailModal" class="max-w-2xl w-full">
<div v-if="selectedChore" class="chore-detail-content">
<Heading :level="2" class="mb-4">{{ selectedChore.name }}</Heading>
<div class="chore-overview-section">
<div class="chore-status-summary">
<div class="status-badges flex flex-wrap gap-2 mb-4">
<span :class="badgeClasses(getFrequencyBadgeVariant(selectedChore.frequency))">
{{ formatFrequency(selectedChore.frequency) }}
</span>
<span v-if="getDueDateStatus(selectedChore) === 'overdue'"
:class="badgeClasses('danger')">Overdue</span>
<span v-if="getDueDateStatus(selectedChore) === 'due-today'" :class="badgeClasses('warning')">Due
Today</span>
<span v-if="getChoreStatusInfo(selectedChore).isCompleted"
:class="badgeClasses('success')">Completed</span>
</div>
<div class="chore-meta-info">
<div class="meta-item">
<span class="label">Created by:</span>
<span class="value">{{ selectedChore.creator?.name || selectedChore.creator?.email || 'Unknown'
}}</span>
</div>
<div class="meta-item">
<span class="label">Created:</span>
<span class="value">{{ format(new Date(selectedChore.created_at), 'MMM d, yyyy') }}</span>
</div>
<div class="meta-item">
<span class="label">Next due:</span>
<span class="value" :class="getDueDateStatus(selectedChore)">
{{ formatDate(selectedChore.next_due_date) }}
<span v-if="getDueDateStatus(selectedChore) === 'due-today'">(Today)</span>
</span>
</div>
<div v-if="selectedChore.custom_interval_days" class="meta-item">
<span class="label">Custom interval:</span>
<span class="value">Every {{ selectedChore.custom_interval_days }} days</span>
</div>
</div>
</div>
<div v-if="selectedChore.description" class="chore-description-full">
<Heading :level="5">Description</Heading>
<p>{{ selectedChore.description }}</p>
</div>
</div>
<div class="assignments-section">
<Heading :level="4">{{ t('groupDetailPage.choreDetailModal.assignmentsTitle') }}</Heading>
<div v-if="loadingAssignments" class="loading-assignments">
<Spinner size="sm" />
<span>Loading assignments...</span>
</div>
<div v-else-if="selectedChoreAssignments.length > 0" class="assignments-list">
<div v-for="assignment in selectedChoreAssignments" :key="assignment.id" class="assignment-card">
<template v-if="editingAssignment?.id === assignment.id">
<div class="editing-assignment space-y-3">
<div>
<label class="block text-sm font-medium mb-1">Assigned to:</label>
<Listbox v-if="group?.members"
:options="group.members.map(m => ({ value: m.id, label: m.email }))"
:model-value="editingAssignment.assigned_to_user_id || 0"
@update:model-value="val => editingAssignment && (editingAssignment.assigned_to_user_id = Number(val))" />
</div>
<div>
<label class="block text-sm font-medium mb-1">Due date:</label>
<Input type="date" :model-value="editingAssignment.due_date ?? ''"
@update:model-value="val => editingAssignment && (editingAssignment.due_date = val)" />
</div>
<div class="editing-actions flex gap-2">
<Button @click="saveAssignmentEdit(assignment.id)" size="sm">{{ t('shared.save') }}</Button>
<Button @click="cancelAssignmentEdit" variant="ghost" color="neutral" size="sm">{{
t('shared.cancel') }}
</Button>
</div>
</div>
</template>
<template v-else>
<div class="assignment-info">
<div class="assignment-header">
<div class="assigned-user-info">
<span class="user-name">{{ assignment.assigned_user?.name || assignment.assigned_user?.email
|| 'Unknown User' }}</span>
<span v-if="assignment.is_complete" :class="badgeClasses('success')">Completed</span>
<span v-else-if="isAssignmentOverdue(assignment)" :class="badgeClasses('danger')">Overdue</span>
</div>
<div class="assignment-actions">
<Button v-if="!assignment.is_complete" @click="startAssignmentEdit(assignment)" size="sm"
variant="ghost" color="secondary">
{{ t('shared.edit') }}
</Button>
</div>
</div>
<div class="assignment-details">
<div class="detail-item">
<span class="label">Due:</span>
<span class="value">{{ formatDate(assignment.due_date) }}</span>
</div>
<div v-if="assignment.is_complete && assignment.completed_at" class="detail-item">
<span class="label">Completed:</span>
<span class="value">
{{ formatDate(assignment.completed_at) }}
({{ formatDistanceToNow(new Date(assignment.completed_at), { addSuffix: true }) }})
</span>
</div>
</div>
</div>
</template>
</div>
</div>
<p v-else class="no-assignments">{{ t('groupDetailPage.choreDetailModal.noAssignments') }}</p>
</div>
<div
v-if="selectedChore.assignments && selectedChore.assignments.some(a => a.history && a.history.length > 0)"
class="assignment-history-section">
<Heading :level="4">Assignment History</Heading>
<div class="history-timeline">
<div v-for="assignment in selectedChore.assignments" :key="`history-${assignment.id}`">
<div v-if="assignment.history && assignment.history.length > 0">
<h6 class="assignment-history-header">{{ assignment.assigned_user?.email || 'Unknown User' }}</h6>
<div v-for="historyEntry in assignment.history" :key="historyEntry.id" class="history-entry">
<div class="history-timestamp">{{ format(new Date(historyEntry.timestamp), 'MMM d, yyyy HH:mm') }}
</div>
<div class="history-event">{{ formatHistoryEntry(historyEntry) }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="chore-history-section">
<Heading :level="4">{{ t('groupDetailPage.choreDetailModal.choreHistoryTitle') }}</Heading>
<div v-if="selectedChore.history && selectedChore.history.length > 0" class="history-timeline">
<div v-for="entry in selectedChore.history" :key="entry.id" class="history-entry">
<div class="history-timestamp">{{ format(new Date(entry.timestamp), 'MMM d, yyyy HH:mm') }}</div>
<div class="history-event">{{ formatHistoryEntry(entry) }}</div>
<div v-if="entry.changed_by_user" class="history-user">by {{ entry.changed_by_user.email }}</div>
</div>
</div>
<p v-else class="no-history">{{ t('groupDetailPage.choreDetailModal.noHistory') }}</p>
</div>
</div>
</Dialog>
<Dialog v-model="showGenerateScheduleModal">
<Heading :level="3">{{ t('groupDetailPage.generateScheduleModal.title') }}</Heading>
<div class="mt-4 space-y-4">
<div>
<label class="block text-sm font-medium mb-1">{{ t('groupDetailPage.generateScheduleModal.startDateLabel')
}}</label>
<Input type="date" v-model="scheduleForm.start_date" />
</div>
<div>
<label class="block text-sm font-medium mb-1">{{ t('groupDetailPage.generateScheduleModal.endDateLabel')
}}</label>
<Input type="date" v-model="scheduleForm.end_date" />
</div>
</div>
<div class="mt-6 flex justify-end gap-2">
<Button @click="showGenerateScheduleModal = false" variant="ghost" color="neutral">{{ t('shared.cancel')
}}</Button>
<Button @click="handleGenerateSchedule" :disabled="generatingSchedule">{{
t('groupDetailPage.generateScheduleModal.generateButton') }}</Button>
</div>
</Dialog>
<!-- Loading State -->
<div v-if="loading" class="flex justify-center items-center py-16">
<div class="text-center">
<Spinner size="lg" class="mb-4" />
<p class="text-gray-600">{{ t('groupDetailPage.loadingLabel', 'Loading household...') }}</p>
</div>
</main>
</div>
<!-- Error State -->
<Alert v-else-if="error" type="error" class="mb-6">
<div class="flex items-center justify-between">
<span>{{ error }}</span>
<Button size="sm" color="error" @click="fetchGroupDetails">
{{ t('groupDetailPage.retryButton', 'Retry') }}
</Button>
</div>
</Alert>
<!-- Main Content -->
<div v-else-if="group" class="space-y-6">
<!-- Header Section -->
<div class="flex items-center justify-between">
<div>
<Heading :level="1" class="text-3xl font-black text-gray-900 mb-2">
{{ group.name }}
</Heading>
<div class="flex items-center space-x-4">
<div class="flex items-center text-sm text-gray-600">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
</svg>
{{ t('groupDetailPage.memberCount', { count: group.members?.length || 0 }) }}
</div>
</div>
</div>
<!-- Member Avatars & Actions -->
<div class="flex items-center space-x-4">
<!-- Member Avatars -->
<div class="flex -space-x-2">
<div v-for="member in group.members?.slice(0, 4)" :key="member.id" class="relative">
<div
class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-bold text-sm border-2 border-white cursor-pointer hover:scale-110 transition-transform"
:title="member.email" @click="toggleMemberMenu(member.id)">
{{ member.email.charAt(0).toUpperCase() }}
</div>
</div>
<div v-if="(group.members?.length || 0) > 4"
class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold text-sm border-2 border-white">
+{{ (group.members?.length || 0) - 4 }}
</div>
<!-- Add Member Button -->
<button @click="toggleInviteUI"
class="w-10 h-10 rounded-full bg-white border-2 border-dashed border-gray-300 flex items-center justify-center text-gray-400 hover:text-blue-500 hover:border-blue-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
<!-- Settings Button -->
<Button variant="outline" size="sm" @click="goToSettings">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</Button>
</div>
</div>
<!-- Dashboard Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Personal Status Card -->
<Card class="lg:col-span-1 p-6 bg-white border-3 border-gray-900 shadow-[6px_6px_0px_0px_#111]">
<Heading :level="3" class="text-lg font-bold text-gray-900 mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
{{ t('groupDetailPage.personalStatus.title', 'Your Status') }}
</Heading>
<div class="space-y-4">
<!-- Quick Win Suggestion -->
<div class="p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-lg">
<h4 class="font-bold text-green-800 mb-2">{{ t('groupDetailPage.personalStatus.quickWin', 'Quick Win')
}}</h4>
<p class="text-sm text-green-700 mb-3">Complete a quick task to help your household</p>
<Button size="sm" class="w-full">
{{ t('groupDetailPage.personalStatus.takeAction', 'Take Action') }}
</Button>
</div>
<!-- Financial Status -->
<div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-lg">
<h4 class="font-bold text-blue-800 mb-2">{{ t('groupDetailPage.personalStatus.balance', 'Your Balance')
}}</h4>
<p class="text-2xl font-black text-blue-900">$0.00</p>
<p class="text-sm text-blue-700">All settled up!</p>
</div>
</div>
</Card>
<!-- Main Content Area -->
<div class="lg:col-span-2 space-y-6">
<!-- Tabs for different sections -->
<Tabs>
<template #tabs>
<div class="flex space-x-1 bg-gray-100 p-1 rounded-lg">
<button v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
'flex-1 py-2 px-4 text-sm font-medium rounded-md transition-colors',
activeTab === tab.id
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-600 hover:text-gray-900'
]">
<div class="flex items-center justify-center space-x-2">
<span v-html="tab.icon"></span>
<span>{{ tab.label }}</span>
</div>
</button>
</div>
</template>
<template #content>
<!-- Chores Tab -->
<div v-if="activeTab === 'chores'" class="space-y-4">
<ChoresPage :group-id="groupId" />
</div>
<!-- Lists Tab -->
<div v-if="activeTab === 'lists'" class="space-y-4">
<ListsPage :group-id="groupId" />
</div>
<!-- Expenses Tab -->
<div v-if="activeTab === 'expenses'" class="space-y-4">
<ExpensesPage :group-id="groupId" />
</div>
<!-- Activity Tab -->
<div v-if="activeTab === 'activity'" class="space-y-4">
<Card class="p-6 bg-white border-3 border-gray-900 shadow-[6px_6px_0px_0px_#111]">
<Heading :level="3" class="text-lg font-bold text-gray-900 mb-4">
{{ t('groupDetailPage.activityLog.title', 'Recent Activity') }}
</Heading>
<div v-if="groupHistoryLoading" class="flex justify-center py-8">
<Spinner size="sm" />
</div>
<div v-else-if="groupChoreHistory.length > 0" class="space-y-3">
<div v-for="entry in groupChoreHistory" :key="entry.id"
class="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
<div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900">{{ formatHistoryEntry(entry) }}</p>
<p class="text-xs text-gray-500">{{ formatDistanceToNow(new Date(entry.timestamp), {
addSuffix: true
}) }}</p>
</div>
</div>
</div>
<div v-else class="text-center py-8 text-gray-500">
<svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<p>{{ t('groupDetailPage.activityLog.emptyState', 'No recent activity') }}</p>
</div>
</Card>
</div>
</template>
</Tabs>
</div>
</div>
</div>
<!-- Universal FAB -->
<div class="fixed bottom-6 right-6 z-50">
<Menu>
<template #trigger>
<Button size="lg"
class="w-14 h-14 rounded-full shadow-[6px_6px_0px_0px_#111] hover:shadow-[8px_8px_0px_0px_#111] hover:-translate-y-1 transition-all duration-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</Button>
</template>
<template #content>
<div class="bg-white border-3 border-gray-900 shadow-[6px_6px_0px_0px_#111] rounded-lg p-2 min-w-48">
<button @click="() => { }"
class="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
</svg>
</div>
<div>
<p class="font-medium text-gray-900">{{ t('groupDetailPage.fab.addExpense', 'Add Expense') }}</p>
<p class="text-xs text-gray-500">{{ t('groupDetailPage.fab.addExpenseDesc', 'Split a bill or cost') }}
</p>
</div>
</button>
<button @click="() => { }"
class="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
</svg>
</div>
<div>
<p class="font-medium text-gray-900">{{ t('groupDetailPage.fab.completeChore', 'Complete Chore') }}
</p>
<p class="text-xs text-gray-500">{{ t('groupDetailPage.fab.completeChoreDesc', 'Mark a task as done')
}}</p>
</div>
</button>
<button @click="() => { }"
class="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</div>
<div>
<p class="font-medium text-gray-900">{{ t('groupDetailPage.fab.addToList', 'Add to List') }}</p>
<p class="text-xs text-gray-500">{{ t('groupDetailPage.fab.addToListDesc', 'Add item to list') }}
</p>
</div>
</button>
</div>
</template>
</Menu>
</div>
<!-- Member Menu Popup -->
<div v-if="activeMemberMenu" ref="memberMenuRef"
class="fixed z-50 bg-white border-3 border-gray-900 shadow-[6px_6px_0px_0px_#111] rounded-lg p-4 min-w-64"
:style="memberMenuPosition">
<div class="flex items-center justify-between mb-3">
<Heading :level="4" class="text-sm font-bold text-gray-900">
{{ getMemberById(activeMemberMenu)?.email || 'Unknown Member' }}
</Heading>
<Button variant="ghost" size="sm" @click="activeMemberMenu = null">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</Button>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Role:</span>
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">
{{ getMemberById(activeMemberMenu)?.role || 'Member' }}
</span>
</div>
<Button v-if="canRemoveMember(getMemberById(activeMemberMenu)!)" color="error" size="sm" class="w-full"
@click="removeMember(activeMemberMenu!)" :disabled="removingMember === activeMemberMenu">
<Spinner v-if="removingMember === activeMemberMenu" size="sm" class="mr-2" />
{{ t('groupDetailPage.members.removeButton', 'Remove Member') }}
</Button>
</div>
</div>
<!-- Invite UI Popup -->
<div v-if="showInviteUI" ref="inviteUIRef"
class="fixed z-50 bg-white border-3 border-gray-900 shadow-[6px_6px_0px_0px_#111] rounded-lg p-6 min-w-80"
:style="inviteUIPosition">
<div class="flex items-center justify-between mb-4">
<Heading :level="3" class="text-lg font-bold text-gray-900">
{{ t('groupDetailPage.invites.title', 'Invite Members') }}
</Heading>
<Button variant="ghost" size="sm" @click="showInviteUI = false">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</Button>
</div>
<div class="space-y-4">
<p class="text-sm text-gray-600">
{{ inviteDescription }}
</p>
<Button @click="generateInviteCode" :disabled="generatingInvite" class="w-full">
<Spinner v-if="generatingInvite" size="sm" class="mr-2" />
{{ inviteCode ? t('groupDetailPage.invites.regenerateButton', 'Regenerate Code') :
t('groupDetailPage.invites.generateButton', 'Generate Invite Code') }}
</Button>
<div v-if="inviteCode" class="p-4 bg-gray-50 border-2 border-gray-200 rounded-lg">
<label class="block text-sm font-medium text-gray-700 mb-2">
{{ t('groupDetailPage.invites.activeCodeLabel', 'Active Invite Code') }}
</label>
<div class="flex space-x-2">
<Input v-model="inviteCode" readonly class="font-mono flex-1" />
<Button variant="outline" @click="copyInviteCodeHandler">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2z" />
</svg>
</Button>
</div>
<p v-if="copySuccess" class="mt-2 text-sm text-green-600">
{{ t('groupDetailPage.invites.copySuccess', 'Copied to clipboard!') }}
</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@ -301,6 +348,9 @@ import {
Spinner,
Alert,
Listbox,
Card,
Tabs,
Menu,
} from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import { onClickOutside } from '@vueuse/core'
@ -311,6 +361,10 @@ import { useRouter } from 'vue-router';
const { t } = useI18n();
const inviteDescription = computed(() =>
t('groupDetailPage.invites.description', 'Share this invite code with people you want to add to your household.')
);
const CACHE_DURATION = 5 * 60 * 1000;
interface CachedGroup { group: Group; timestamp: number; }
@ -810,6 +864,39 @@ onMounted(() => {
loadUpcomingChores();
loadGroupChoreHistory();
});
// UI State for new template
const activeTab = ref('chores');
const memberMenuPosition = ref({});
const inviteUIPosition = ref({});
// Tabs configuration
const tabs = ref([
{
id: 'chores',
label: t('groupDetailPage.tabs.chores', 'Chores'),
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg>'
},
{
id: 'lists',
label: t('groupDetailPage.tabs.lists', 'Lists'),
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>'
},
{
id: 'expenses',
label: t('groupDetailPage.tabs.expenses', 'Expenses'),
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path></svg>'
},
{
id: 'activity',
label: t('groupDetailPage.tabs.activity', 'Activity'),
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>'
}
]);
const getMemberById = (memberId: number): GroupMember | undefined => {
return group.value?.members?.find(m => m.id === memberId);
};
</script>
<style scoped>

643
fe/src/pages/GroupsPage.vue
View File

@ -1,134 +1,237 @@
<template>
<main class="container page-padding">
<div v-if="isInitiallyLoading && groups.length === 0 && !fetchError" class="text-center my-5">
<p>{{ t('groupsPage.loadingText', 'Loading groups...') }}</p>
<span class="spinner-dots-lg" role="status"><span /><span /><span /></span>
</div>
<!-- Page Header -->
<div class="mb-8">
<Heading :level="1" class="text-3xl font-black text-gray-900 mb-2">
{{ t('groupsPage.title', 'Your Households') }}
</Heading>
<p class="text-gray-600 text-lg">
{{ t('groupsPage.subtitle', 'Manage your shared spaces and collaborate with others') }}
</p>
</div>
<div v-else-if="fetchError" class="alert alert-error mb-3" role="alert">
<div class="alert-content">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-alert-triangle" />
</svg>
{{ fetchError }}
<!-- Loading State -->
<div v-if="isInitiallyLoading" class="flex justify-center items-center py-16">
<div class="text-center">
<Spinner size="lg" class="mb-4" />
<p class="text-gray-600">{{ t('groupsPage.loadingText', 'Loading households...') }}</p>
</div>
</div>
<!-- Error State -->
<Alert v-else-if="fetchError" type="error" class="mb-6">
<div class="flex items-center justify-between">
<span>{{ fetchError }}</span>
<Button size="sm" color="error" @click="() => fetchGroups(true)">
{{ t('groupsPage.retryButton', 'Retry') }}
</Button>
</div>
</Alert>
<!-- Empty State -->
<div v-else-if="!isInitiallyLoading && groups.length === 0" class="text-center py-16">
<Card class="max-w-md mx-auto p-8 bg-white border-3 border-gray-900 shadow-[8px_8px_0px_0px_#111]">
<div class="mb-6">
<div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<Heading :level="3" class="text-xl font-bold text-gray-900 mb-2">
{{ t('groupsPage.emptyState.title', 'No Households Yet') }}
</Heading>
<p class="text-gray-600 mb-6">
{{ t('groupsPage.emptyState.description', 'Create your first household or join an existing one!') }}
</p>
</div>
<button type="button" class="btn btn-sm btn-danger" @click="() => fetchGroups(true)">{{
t('groupsPage.retryButton') }}</button>
</div>
<div class="space-y-3">
<Button @click="openCreateDialog" class="w-full" size="lg">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
{{ t('groupsPage.emptyState.createButton', 'Create Household') }}
</Button>
<Button @click="openJoinDialog" variant="outline" class="w-full" size="lg">
{{ t('groupsPage.emptyState.joinButton', 'Join with Invite Code') }}
</Button>
</div>
</Card>
</div>
<div v-else-if="!isInitiallyLoading && groups.length === 0" class="card empty-state-card">
<svg class="icon icon-lg" aria-hidden="true">
<use xlink:href="#icon-clipboard" />
</svg>
<h3>{{ t('groupsPage.emptyState.title') }}</h3>
<p>{{ t('groupsPage.emptyState.description') }}</p>
<button class="btn btn-primary mt-2" @click="openCreateGroupDialog">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-plus" />
</svg>
{{ t('groupsPage.emptyState.createButton') }}
</button>
</div>
<!-- Groups Grid -->
<div v-else class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Existing Groups -->
<Card v-for="group in groups" :key="group.id"
class="group-card cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-[10px_10px_0px_0px_#111] bg-white border-3 border-gray-900 shadow-[6px_6px_0px_0px_#111]"
@click="selectGroup(group)">
<div class="p-6">
<div class="flex items-start justify-between mb-4">
<Heading :level="3" class="text-xl font-bold text-gray-900 leading-tight">
{{ group.name }}
</Heading>
<div class="flex-shrink-0 ml-3">
<div class="w-3 h-3 bg-green-400 rounded-full"></div>
</div>
</div>
<div v-else-if="groups.length > 0" class="mb-3">
<div class="neo-groups-grid">
<div v-for="group in groups" :key="group.id" class="neo-group-card" @click="selectGroup(group)">
<h1 class="neo-group-header">{{ group.name }}</h1>
<div class="neo-group-actions">
<button class="btn btn-sm btn-secondary" @click.stop="openCreateListDialog(group)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-plus" />
<div class="space-y-2 mb-4">
<div class="flex items-center text-sm text-gray-600">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
</svg>
{{ t('groupsPage.groupCard.newListButton') }}
</button>
{{ t('groupsPage.groupCard.memberCount', '{count} members', { count: group.member_count || 0 }) }}
</div>
<div class="flex items-center text-sm text-gray-600">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3a4 4 0 118 0v4m-4 8a2 2 0 11-4 0 2 2 0 014 0zM8 11V7a4 4 0 118 0v4" />
</svg>
{{ t('groupsPage.groupCard.createdDate', 'Created {date}', { date: formatDate(group.created_at) }) }}
</div>
</div>
<div class="flex items-center justify-between">
<Button size="sm" variant="outline" @click.stop="openCreateListDialog(group)" class="text-sm">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
{{ t('groupsPage.groupCard.newListButton', 'Quick List') }}
</Button>
<Button size="sm" @click.stop="selectGroup(group)">
{{ t('groupsPage.groupCard.viewButton', 'View →') }}
</Button>
</div>
</div>
<div class="neo-create-group-card" @click="openCreateGroupDialog">
{{ t('groupsPage.createCard.title') }}
</div>
</div>
</div>
</Card>
<div v-if="showCreateGroupDialog" class="modal-backdrop open" @click.self="closeCreateGroupDialog">
<div class="modal-container" ref="createGroupModalRef" role="dialog" aria-modal="true"
aria-labelledby="createGroupTitle">
<div class="modal-header">
<h3 id="createGroupTitle">{{ activeTab === 'create' ? t('groupsPage.createDialog.title') :
t('groupsPage.joinGroup.title') }}</h3>
<button class="close-button" @click="closeCreateGroupDialog"
:aria-label="t('groupsPage.createDialog.closeButtonLabel')">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-close" />
<!-- Create New Group Card -->
<Card
class="create-group-card cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-[10px_10px_0px_0px_#111] bg-gradient-to-br from-blue-50 to-indigo-50 border-3 border-gray-900 shadow-[6px_6px_0px_0px_#111] border-dashed"
@click="openCreateDialog">
<div class="p-6 text-center">
<div class="w-12 h-12 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
<Heading :level="3" class="text-lg font-bold text-gray-900 mb-2">
{{ t('groupsPage.createCard.title', 'Create New Household') }}
</Heading>
<p class="text-sm text-gray-600">
{{ t('groupsPage.createCard.description', 'Start fresh with a new shared space') }}
</p>
</div>
<div class="modal-tabs">
<button @click="activeTab = 'create'" :class="{ 'active': activeTab === 'create' }">
{{ t('groupsPage.createDialog.createButton') }}
</button>
<button @click="activeTab = 'join'" :class="{ 'active': activeTab === 'join' }">
{{ t('groupsPage.joinGroup.joinButton') }}
</button>
</div>
<form v-if="activeTab === 'create'" @submit.prevent="handleCreateGroup">
<div class="modal-body">
<div class="form-group">
<label for="newGroupNameInput" class="form-label">{{ t('groupsPage.createDialog.groupNameLabel')
}}</label>
<input type="text" id="newGroupNameInput" v-model="newGroupName" class="form-input" required
ref="newGroupNameInputRef" />
<p v-if="createGroupFormError" class="form-error-text">{{ createGroupFormError }}</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-neutral" @click="closeCreateGroupDialog">{{
t('groupsPage.createDialog.cancelButton') }}</button>
<button type="submit" class="btn btn-primary ml-2" :disabled="creatingGroup">
<span v-if="creatingGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
{{ t('groupsPage.createDialog.createButton') }}
</button>
</div>
</form>
<form v-if="activeTab === 'join'" @submit.prevent="handleJoinGroup">
<div class="modal-body">
<div class="form-group">
<label for="joinInviteCodeInput" class="form-label">{{ t('groupsPage.joinGroup.inputLabel', 'Invite Code')
}}</label>
<input type="text" id="joinInviteCodeInput" v-model="inviteCodeToJoin" class="form-input"
:placeholder="t('groupsPage.joinGroup.inputPlaceholder')" required ref="joinInviteCodeInputRef" />
<p v-if="joinGroupFormError" class="form-error-text">{{ joinGroupFormError }}</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-neutral" @click="closeCreateGroupDialog">{{
t('groupsPage.createDialog.cancelButton') }}</button>
<button type="submit" class="btn btn-primary ml-2" :disabled="joiningGroup">
<span v-if="joiningGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
{{ t('groupsPage.joinGroup.joinButton') }}
</button>
</div>
</form>
</div>
</Card>
</div>
<CreateListModal v-model="showCreateListModal" :groups="availableGroupsForModal" @created="onListCreated" />
</main>
<!-- Quick Actions -->
<div v-if="groups.length > 0" class="flex justify-center pt-4">
<Button @click="openJoinDialog" variant="outline" size="lg">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
</svg>
{{ t('groupsPage.joinButton', 'Join Another Household') }}
</Button>
</div>
</div>
<!-- Create Group Dialog -->
<Dialog v-model="showCreateDialog" class="max-w-md">
<div class="p-6">
<Heading :level="2" class="text-xl font-bold text-gray-900 mb-4">
{{ t('groupsPage.createDialog.title', 'Create New Household') }}
</Heading>
<form @submit.prevent="handleCreateGroup" class="space-y-4">
<div>
<label for="groupName" class="block text-sm font-medium text-gray-700 mb-2">
{{ t('groupsPage.createDialog.groupNameLabel', 'Household Name') }}
</label>
<Input id="groupName" v-model="newGroupName"
:placeholder="t('groupsPage.createDialog.groupNamePlaceholder', 'e.g., The Smiths, Apartment 4B, Our House')"
required ref="groupNameInput" class="w-full" />
<p v-if="createGroupFormError" class="mt-1 text-sm text-red-600">
{{ createGroupFormError }}
</p>
</div>
<div class="flex gap-3 pt-4">
<Button type="button" variant="outline" class="flex-1" @click="showCreateDialog = false">
{{ t('shared.cancel', 'Cancel') }}
</Button>
<Button type="submit" class="flex-1" :disabled="creatingGroup">
<Spinner v-if="creatingGroup" size="sm" class="mr-2" />
{{ t('groupsPage.createDialog.createButton', 'Create') }}
</Button>
</div>
</form>
</div>
</Dialog>
<!-- Join Group Dialog -->
<Dialog v-model="showJoinDialog" class="max-w-md">
<div class="p-6">
<Heading :level="2" class="text-xl font-bold text-gray-900 mb-4">
{{ t('groupsPage.joinDialog.title', 'Join Household') }}
</Heading>
<form @submit.prevent="handleJoinGroup" class="space-y-4">
<div>
<label for="inviteCode" class="block text-sm font-medium text-gray-700 mb-2">
{{ t('groupsPage.joinDialog.codeLabel', 'Invite Code') }}
</label>
<Input id="inviteCode" v-model="inviteCodeToJoin"
:placeholder="t('groupsPage.joinDialog.codePlaceholder', 'Enter invite code')" required
ref="inviteCodeInput" class="w-full font-mono" />
<p v-if="joinGroupFormError" class="mt-1 text-sm text-red-600">
{{ joinGroupFormError }}
</p>
<p class="mt-2 text-sm text-gray-500">
{{ joinDialogHelpText }}
</p>
</div>
<div class="flex gap-3 pt-4">
<Button type="button" variant="outline" class="flex-1" @click="showJoinDialog = false">
{{ t('shared.cancel', 'Cancel') }}
</Button>
<Button type="submit" class="flex-1" :disabled="joiningGroup">
<Spinner v-if="joiningGroup" size="sm" class="mr-2" />
{{ t('groupsPage.joinDialog.joinButton', 'Join') }}
</Button>
</div>
</form>
</div>
</Dialog>
<!-- Create List Modal -->
<CreateListModal v-model="showCreateListModal" :groups="availableGroupsForModal" @created="onListCreated" />
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue';
import { ref, onMounted, nextTick, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { apiClient, API_ENDPOINTS } from '@/services/api';
import { useStorage } from '@vueuse/core';
import { onClickOutside } from '@vueuse/core';
import { useNotificationStore } from '@/stores/notifications';
import { format } from 'date-fns';
import CreateListModal from '@/components/CreateListModal.vue';
import {
Button,
Dialog,
Input,
Heading,
Spinner,
Alert,
Card,
} from '@/components/ui'
const { t } = useI18n();
const { t } = useI18n<{ message: Record<string, string> }>();
interface Group {
id: number;
@ -141,44 +244,44 @@ interface Group {
const router = useRouter();
const notificationStore = useNotificationStore();
// State
const groups = ref<Group[]>([]);
const fetchError = ref<string | null>(null);
const isInitiallyLoading = ref(true);
const showCreateGroupDialog = ref(false);
// Create Dialog
const showCreateDialog = ref(false);
const newGroupName = ref('');
const creatingGroup = ref(false);
const newGroupNameInputRef = ref<HTMLInputElement | null>(null);
const createGroupModalRef = ref<HTMLElement | null>(null);
const createGroupFormError = ref<string | null>(null);
const groupNameInput = ref<HTMLInputElement | null>(null);
const activeTab = ref<'create' | 'join'>('create');
// Join Dialog
const showJoinDialog = ref(false);
const inviteCodeToJoin = ref('');
const joiningGroup = ref(false);
const joinInviteCodeInputRef = ref<HTMLInputElement | null>(null);
const joinGroupFormError = ref<string | null>(null);
const inviteCodeInput = ref<HTMLInputElement | null>(null);
// Create List Modal
const showCreateListModal = ref(false);
const availableGroupsForModal = ref<{ label: string; value: number; }[]>([]);
// Caching
const cachedGroups = useStorage<Group[]>('cached-groups', []);
const cachedTimestamp = useStorage<number>('cached-groups-timestamp', 0);
const CACHE_DURATION = 5 * 60 * 1000;
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
// Initialize with cached data if available and fresh
const now = Date.now();
if (cachedGroups.value && (now - cachedTimestamp.value) < CACHE_DURATION) {
if (cachedGroups.value.length > 0) {
groups.value = JSON.parse(JSON.stringify(cachedGroups.value));
isInitiallyLoading.value = false;
} else {
groups.value = [];
isInitiallyLoading.value = false;
}
groups.value = JSON.parse(JSON.stringify(cachedGroups.value));
isInitiallyLoading.value = false;
}
const fetchGroups = async (isRetryAttempt = false) => {
if ((isRetryAttempt && groups.value.length === 0) || (isInitiallyLoading.value && groups.value.length === 0)) {
if (isRetryAttempt || (isInitiallyLoading.value && groups.value.length === 0)) {
isInitiallyLoading.value = true;
}
fetchError.value = null;
@ -188,11 +291,12 @@ const fetchGroups = async (isRetryAttempt = false) => {
const freshGroups = response.data as Group[];
groups.value = freshGroups;
// Update cache
cachedGroups.value = freshGroups;
cachedTimestamp.value = Date.now();
} catch (err: any) {
let message = t('groupsPage.errors.fetchFailed');
if (err.response && err.response.data && err.response.data.detail) {
let message = t('groupsPage.errors.fetchFailed', 'Failed to load households');
if (err.response?.data?.detail) {
message = err.response.data.detail;
} else if (err.message) {
message = err.message;
@ -203,64 +307,59 @@ const fetchGroups = async (isRetryAttempt = false) => {
}
};
watch(activeTab, (newTab) => {
if (showCreateGroupDialog.value) {
createGroupFormError.value = null;
joinGroupFormError.value = null;
nextTick(() => {
if (newTab === 'create') {
newGroupNameInputRef.value?.focus();
} else {
joinInviteCodeInputRef.value?.focus();
}
});
}
});
const openCreateGroupDialog = () => {
activeTab.value = 'create';
const openCreateDialog = () => {
newGroupName.value = '';
createGroupFormError.value = null;
inviteCodeToJoin.value = '';
joinGroupFormError.value = null;
showCreateGroupDialog.value = true;
showCreateDialog.value = true;
nextTick(() => {
newGroupNameInputRef.value?.focus();
groupNameInput.value?.focus();
});
};
const closeCreateGroupDialog = () => {
showCreateGroupDialog.value = false;
const openJoinDialog = () => {
inviteCodeToJoin.value = '';
joinGroupFormError.value = null;
showJoinDialog.value = true;
nextTick(() => {
inviteCodeInput.value?.focus();
});
};
onClickOutside(createGroupModalRef, closeCreateGroupDialog);
const handleCreateGroup = async () => {
if (!newGroupName.value.trim()) {
createGroupFormError.value = t('groupsPage.errors.groupNameRequired');
newGroupNameInputRef.value?.focus();
createGroupFormError.value = t('groupsPage.errors.groupNameRequired', 'Household name is required');
groupNameInput.value?.focus();
return;
}
createGroupFormError.value = null;
creatingGroup.value = true;
try {
const response = await apiClient.post(API_ENDPOINTS.GROUPS.BASE, {
name: newGroupName.value,
name: newGroupName.value.trim(),
});
const newGroup = response.data as Group;
if (newGroup && newGroup.id && newGroup.name) {
if (newGroup?.id && newGroup?.name) {
groups.value.push(newGroup);
closeCreateGroupDialog();
notificationStore.addNotification({ message: t('groupsPage.notifications.groupCreatedSuccess', { groupName: newGroup.name }), type: 'success' });
showCreateDialog.value = false;
notificationStore.addNotification({
message: t('groupsPage.notifications.groupCreatedSuccess', 'Household "{groupName}" created successfully!', { groupName: newGroup.name }),
type: 'success'
});
// Update cache
cachedGroups.value = groups.value;
cachedTimestamp.value = Date.now();
} else {
throw new Error(t('groupsPage.errors.invalidDataFromServer'));
throw new Error(t('groupsPage.errors.invalidDataFromServer', 'Invalid response from server'));
}
} catch (error: any) {
const message = error.response?.data?.detail || (error instanceof Error ? error.message : t('groupsPage.errors.createFailed'));
const message = error.response?.data?.detail ||
(error instanceof Error ? error.message : t('groupsPage.errors.createFailed', 'Failed to create household'));
createGroupFormError.value = message;
console.error(t('groupsPage.errors.createFailedConsole'), error);
notificationStore.addNotification({ message, type: 'error' });
} finally {
creatingGroup.value = false;
@ -269,30 +368,40 @@ const handleCreateGroup = async () => {
const handleJoinGroup = async () => {
if (!inviteCodeToJoin.value.trim()) {
joinGroupFormError.value = t('groupsPage.errors.inviteCodeRequired');
joinInviteCodeInputRef.value?.focus();
joinGroupFormError.value = t('groupsPage.errors.inviteCodeRequired', 'Invite code is required');
inviteCodeInput.value?.focus();
return;
}
joinGroupFormError.value = null;
joiningGroup.value = true;
try {
const response = await apiClient.post(
API_ENDPOINTS.INVITES.ACCEPT(inviteCodeToJoin.value.trim()),
{ code: inviteCodeToJoin.value.trim() }
);
const joinedGroup = response.data as Group;
// Add to groups if not already present
if (!groups.value.find(g => g.id === joinedGroup.id)) {
groups.value.push(joinedGroup);
}
inviteCodeToJoin.value = '';
notificationStore.addNotification({ message: t('groupsPage.notifications.joinSuccessNamed', { groupName: joinedGroup.name }), type: 'success' });
showJoinDialog.value = false;
notificationStore.addNotification({
message: t('groupsPage.notifications.joinSuccessNamed', 'Successfully joined "{groupName}"!', { groupName: joinedGroup.name }),
type: 'success'
});
// Update cache
cachedGroups.value = groups.value;
cachedTimestamp.value = Date.now();
closeCreateGroupDialog();
} catch (error: any) {
const message = error.response?.data?.detail || (error instanceof Error ? error.message : t('groupsPage.errors.joinFailed'));
const message = error.response?.data?.detail ||
(error instanceof Error ? error.message : t('groupsPage.errors.joinFailed', 'Failed to join household'));
joinGroupFormError.value = message;
console.error(t('groupsPage.errors.joinFailedConsole'), error);
notificationStore.addNotification({ message, type: 'error' });
} finally {
joiningGroup.value = false;
@ -304,200 +413,44 @@ const selectGroup = (group: Group) => {
};
const openCreateListDialog = (group: Group) => {
fetchGroups().then(() => {
availableGroupsForModal.value = [{
label: group.name,
value: group.id
}];
showCreateListModal.value = true;
});
availableGroupsForModal.value = [{
label: group.name,
value: group.id
}];
showCreateListModal.value = true;
};
const onListCreated = (newList: any) => {
notificationStore.addNotification({
message: t('groupsPage.notifications.listCreatedSuccess', { listName: newList.name }),
message: t('groupsPage.notifications.listCreatedSuccess', 'List "{listName}" created successfully!', { listName: newList.name }),
type: 'success'
});
fetchGroups();
// Optionally refresh groups if needed
};
const formatDate = (dateString: string) => {
return format(new Date(dateString), 'MMM d, yyyy');
};
const joinDialogHelpText = computed(() => {
return t('groupsPage.joinDialog.helpText', 'Ask a household member for their invite code or scan their QR code.');
});
onMounted(() => {
fetchGroups();
});
</script>
<style scoped>
.page-padding {
padding: 1rem;
.group-card:hover {
transform: translateY(-2px);
}
.create-group-card:hover {
transform: translateY(-2px);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.mb-3 {
margin-bottom: 1.5rem;
}
.mt-4 {
margin-top: 2rem;
}
.mt-1 {
margin-top: 0.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.neo-groups-grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
align-items: flex-start;
margin-bottom: 2rem;
}
.neo-group-card,
.neo-create-group-card {
border-radius: 18px;
box-shadow: 6px 6px 0 #111;
max-width: 420px;
min-width: 260px;
width: 100%;
margin: 0 auto;
border: none;
background: var(--light);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
padding: 2rem 2rem 1.5rem 2rem;
cursor: pointer;
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
border: 3px solid #111;
}
.neo-group-card:hover {
transform: translateY(-3px);
box-shadow: 6px 9px 0 #111;
}
.neo-group-header {
font-weight: 900;
font-size: 1.25rem;
letter-spacing: 0.5px;
text-transform: none;
}
.neo-group-actions {
margin-top: 0;
}
.neo-create-group-card {
border: 3px dashed #111;
background: var(--light);
padding: 2.5rem 0;
text-align: center;
font-weight: 900;
font-size: 1.1rem;
color: #222;
cursor: pointer;
margin-top: 0;
transition: background 0.1s;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
margin-bottom: 2.5rem;
}
.neo-create-group-card:hover {
background: #f0f0f0;
}
.form-error-text {
color: var(--danger);
font-size: 0.85rem;
}
.flex-grow {
flex-grow: 1;
}
details>summary {
list-style: none;
}
details>summary::-webkit-details-marker {
display: none;
}
.expand-icon {
transition: transform 0.2s ease-in-out;
}
details[open] .expand-icon {
transform: rotate(180deg);
}
.cursor-pointer {
cursor: pointer;
}
.modal-tabs {
display: flex;
border-bottom: 1px solid #eee;
margin: 0 1.5rem;
}
.modal-tabs button {
background: none;
border: none;
padding: 0.75rem 0.25rem;
margin-right: 1.5rem;
cursor: pointer;
font-size: 1rem;
color: var(--text-color-secondary);
border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-weight: 500;
}
.modal-tabs button.active {
color: var(--primary);
border-bottom-color: var(--primary);
font-weight: 600;
}
@media (max-width: 900px) {
.neo-groups-grid {
gap: 1.2rem;
}
.neo-group-card,
.neo-create-group-card {
max-width: 95vw;
min-width: 180px;
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (max-width: 600px) {
.page-padding {
padding: 0.5rem;
}
.neo-group-card,
.neo-create-group-card {
padding: 1.2rem 0.7rem 1rem 0.7rem;
font-size: 1rem;
}
.neo-group-header {
font-size: 1.1rem;
}
}
</style>

1267
fe/src/pages/ListDetailPage.vue
View File

File diff suppressed because it is too large Load Diff

1692
fe/src/pages/ListsPage.vue
View File

File diff suppressed because it is too large Load Diff

172
fe/src/pages/SettlementsPage.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<main class="p-4 max-w-screen-lg mx-auto space-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">
{{ $t('settlementsPage.title', 'Settlements') }}
</h1>
<p class="text-sm text-neutral-600 dark:text-neutral-400">
{{ $t('settlementsPage.subtitle', 'Manage payments and settle debts') }}
</p>
</div>
<Button v-if="groupId" variant="solid" @click="showCreateSettlement = true">
<BaseIcon name="heroicons:plus-20-solid" class="w-5 h-5 mr-1" />
{{ $t('settlementsPage.recordSettlement', 'Record Settlement') }}
</Button>
</div>
<!-- Filter Tabs -->
<Tabs v-model="activeTab" :tabs="tabs" />
<!-- Content based on active tab -->
<div class="tab-content">
<!-- Settlement History Tab -->
<div v-if="activeTab === 'history'" class="space-y-4">
<Spinner v-if="loading" :label="$t('settlementsPage.loadingSettlements', 'Loading settlements')" />
<Alert v-else-if="error" type="error" :message="error" />
<div v-else-if="settlements.length === 0" class="text-center py-8">
<BaseIcon name="heroicons:currency-dollar-solid" class="w-12 h-12 mx-auto text-neutral-400 mb-4" />
<p class="text-neutral-500">{{ $t('settlementsPage.noSettlements', 'No settlements found') }}</p>
</div>
<div v-else class="space-y-3">
<SettlementCard v-for="settlement in settlements" :key="settlement.id" :settlement="settlement"
@edit="editSettlement" @delete="confirmDeleteSettlement" />
</div>
</div>
<!-- Summary Tab -->
<div v-if="activeTab === 'summary'" class="space-y-4">
<FinancialSummaryCard :group-id="groupId" />
</div>
<!-- Suggested Settlements Tab -->
<div v-if="activeTab === 'suggested'" class="space-y-4">
<SuggestedSettlementsCard :group-id="groupId" @settle="handleSuggestedSettle" />
</div>
</div>
<!-- Settlement Creation Modal -->
<Dialog v-model="showCreateSettlement" size="md">
<SettlementForm :group-id="groupId" :settlement="editingSettlement" @close="closeSettlementForm"
@saved="handleSettlementSaved" />
</Dialog>
</main>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Button, Spinner, Alert, Tabs, Dialog } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import SettlementCard from '@/components/settlements/SettlementCard.vue'
import SettlementForm from '@/components/settlements/SettlementForm.vue'
import FinancialSummaryCard from '@/components/settlements/FinancialSummaryCard.vue'
import SuggestedSettlementsCard from '@/components/settlements/SuggestedSettlementsCard.vue'
import { settlementService } from '@/services/settlementService'
import { useNotificationStore } from '@/stores/notifications'
import type { Settlement } from '@/types/expense'
const props = defineProps<{ groupId?: number | string }>()
const route = useRoute()
const notifications = useNotificationStore()
// State
const settlements = ref<Settlement[]>([])
const loading = ref(false)
const error = ref<string | null>(null)
const showCreateSettlement = ref(false)
const editingSettlement = ref<Settlement | null>(null)
const activeTab = ref('history')
// Computed
const groupId = computed(() => {
return props.groupId ? Number(props.groupId) :
route.params.groupId ? Number(route.params.groupId) : undefined
})
const tabs = computed(() => [
{ id: 'history', name: 'Settlement History' },
{ id: 'summary', name: 'Financial Summary' },
{ id: 'suggested', name: 'Suggested Settlements' }
])
// Methods
async function loadSettlements() {
if (!groupId.value) return
loading.value = true
error.value = null
try {
settlements.value = await settlementService.getGroupSettlements(groupId.value)
} catch (err: any) {
error.value = err.response?.data?.detail || 'Failed to load settlements'
} finally {
loading.value = false
}
}
function editSettlement(settlement: Settlement) {
editingSettlement.value = settlement
showCreateSettlement.value = true
}
async function confirmDeleteSettlement(settlement: Settlement) {
if (!confirm(`Delete settlement of ${settlement.amount} from ${settlement.payer?.name} to ${settlement.payee?.name}?`)) {
return
}
try {
await settlementService.deleteSettlement(settlement.id, settlement.version)
await loadSettlements()
notifications.addNotification({
type: 'success',
message: 'Settlement deleted successfully'
})
} catch (err: any) {
notifications.addNotification({
type: 'error',
message: err.response?.data?.detail || 'Failed to delete settlement'
})
}
}
function closeSettlementForm() {
showCreateSettlement.value = false
editingSettlement.value = null
}
async function handleSettlementSaved() {
closeSettlementForm()
await loadSettlements()
}
function handleSuggestedSettle(suggestion: any) {
// Pre-fill the settlement form with suggested values
editingSettlement.value = {
group_id: groupId.value!,
paid_by_user_id: suggestion.from_user_id,
paid_to_user_id: suggestion.to_user_id,
amount: suggestion.amount,
description: 'Suggested settlement'
} as any
showCreateSettlement.value = true
}
// Lifecycle
onMounted(() => {
loadSettlements()
})
watch(() => groupId.value, () => {
loadSettlements()
})
</script>
<style scoped>
.tab-content {
min-height: 400px;
}
</style>

57
fe/src/services/costService.ts Normal file
View File

@ -0,0 +1,57 @@
import { api } from './api'
import type { Expense } from '@/types/expense'
// Types for cost summary responses (would need to be added to types if not already present)
export interface ListCostSummary {
list_id: number
total_list_cost: string
equal_share_per_user: string
user_balances: Array<{
user_id: number
user_name: string
contribution: string
balance: string
}>
expense_exists: boolean
expense_id?: number
calculated_at: string
}
export interface GroupBalanceSummary {
group_id: number
overall_total_expenses: string
user_balances: Array<{
user_id: number
user_name: string
total_paid: string
total_owed: string
net_balance: string
}>
suggested_settlements: Array<{
from_user_id: number
from_user_identifier: string
to_user_id: number
to_user_identifier: string
amount: string
}>
calculated_at: string
}
export const costService = {
// List Cost Summary operations
async getListCostSummary(listId: number): Promise<ListCostSummary> {
const response = await api.get(`/costs/lists/${listId}/cost-summary`)
return response.data
},
async generateExpenseFromListSummary(listId: number): Promise<Expense> {
const response = await api.post(`/costs/lists/${listId}/cost-summary`)
return response.data
},
// Group Balance Summary operations
async getGroupBalanceSummary(groupId: number): Promise<GroupBalanceSummary> {
const response = await api.get(`/costs/groups/${groupId}/balance-summary`)
return response.data
},
}

279
fe/src/services/expenseService.ts
View File

@ -1,87 +1,240 @@
import type { Expense, SettlementActivityCreate } from '@/types/expense'
import { api, API_ENDPOINTS } from '@/services/api'
import { api } from './api'
import type {
Expense,
ExpenseCreate,
ExpenseUpdate,
Settlement,
SettlementCreate,
SettlementUpdate,
SettlementActivity,
SettlementActivityCreate,
UserFinancialSummary,
FinancialActivity,
FinancialAuditLog,
} from '@/types/expense'
import type {
Expense as UnifiedExpense,
ExpenseCreate as UnifiedExpenseCreate,
ExpenseUpdate as UnifiedExpenseUpdate
} from '@/types/unified-expense'
// Legacy types for backward compatibility
export interface CreateExpenseData {
description: string
total_amount: string
currency: string
total_amount: number
currency?: string
expense_date?: string
split_type: string
isRecurring: boolean
recurrencePattern?: {
type: 'daily' | 'weekly' | 'monthly' | 'yearly'
interval: number
daysOfWeek?: number[]
endDate?: string
maxOccurrences?: number
}
list_id?: number
group_id?: number
item_id?: number
paid_by_user_id: number
isRecurring?: boolean
splits_in?: Array<{
user_id: number
amount: string
percentage?: number
shares?: number
owed_amount?: number
share_percentage?: number
share_units?: number
}>
}
export interface UpdateExpenseData extends Partial<CreateExpenseData> {
export interface UpdateExpenseData {
description?: string
total_amount?: number
currency?: string
expense_date?: string
split_type?: string
list_id?: number
group_id?: number
item_id?: number
version: number
isRecurring?: boolean
}
// Convert legacy expense format to unified format
function convertToUnified(expense: any): UnifiedExpense {
return {
id: expense.id,
description: expense.description,
total_amount: expense.total_amount,
currency: expense.currency,
expense_date: expense.expense_date,
split_type: expense.split_type,
list_id: expense.list_id,
group_id: expense.group_id,
item_id: expense.item_id,
paid_by_user_id: expense.paid_by_user_id,
paid_by_user: expense.paid_by_user,
created_by_user_id: expense.created_by_user_id,
created_by_user: expense.created_by_user,
created_at: expense.created_at,
updated_at: expense.updated_at,
version: expense.version,
splits: expense.splits || [],
overall_settlement_status: expense.overall_settlement_status,
is_recurring: expense.is_recurring || expense.isRecurring || false,
next_occurrence: expense.next_occurrence || expense.nextOccurrence,
last_occurrence: expense.last_occurrence || expense.lastOccurrence,
recurrence_pattern: expense.recurrence_pattern || expense.recurrencePattern,
parent_expense_id: expense.parent_expense_id || expense.parentExpenseId,
}
}
// Convert unified format to legacy API format for creation
function convertToLegacyCreate(expense: UnifiedExpenseCreate): any {
return {
description: expense.description,
total_amount: expense.total_amount,
currency: expense.currency,
expense_date: expense.expense_date,
split_type: expense.split_type,
list_id: expense.list_id,
group_id: expense.group_id,
item_id: expense.item_id,
paid_by_user_id: expense.paid_by_user_id,
is_recurring: expense.is_recurring,
recurrence_pattern: expense.recurrence_pattern,
splits_in: expense.splits_in,
}
}
// Convert unified format to legacy API format for updates
function convertToLegacyUpdate(expense: UnifiedExpenseUpdate): any {
return {
description: expense.description,
currency: expense.currency,
expense_date: expense.expense_date,
version: expense.version,
}
}
export const expenseService = {
async createExpense(data: CreateExpenseData): Promise<Expense> {
// Convert camelCase keys to snake_case expected by backend
const payload: Record<string, any> = { ...data }
payload.is_recurring = data.isRecurring
delete payload.isRecurring
if (data.recurrencePattern) {
payload.recurrence_pattern = {
...data.recurrencePattern,
// daysOfWeek -> days_of_week, endDate -> end_date, maxOccurrences -> max_occurrences
days_of_week: data.recurrencePattern.daysOfWeek,
end_date: data.recurrencePattern.endDate,
max_occurrences: data.recurrencePattern.maxOccurrences,
}
delete payload.recurrencePattern
}
const response = await api.post<Expense>(API_ENDPOINTS.FINANCIALS.EXPENSES, payload)
return response.data
},
async updateExpense(id: number, data: UpdateExpenseData): Promise<Expense> {
const response = await api.put<Expense>(API_ENDPOINTS.FINANCIALS.EXPENSE(id.toString()), data)
return response.data
},
async deleteExpense(id: number): Promise<void> {
await api.delete(API_ENDPOINTS.FINANCIALS.EXPENSE(id.toString()))
},
async getExpense(id: number): Promise<Expense> {
const response = await api.get<Expense>(API_ENDPOINTS.FINANCIALS.EXPENSE(id.toString()))
return response.data
},
// Expense CRUD operations
async getExpenses(params?: {
list_id?: number
group_id?: number
isRecurring?: boolean
}): Promise<Expense[]> {
const response = await api.get<Expense[]>(API_ENDPOINTS.FINANCIALS.EXPENSES, { params })
group_id?: number;
list_id?: number;
isRecurring?: boolean;
skip?: number;
limit?: number;
}): Promise<UnifiedExpense[]> {
const response = await api.get('/financials/expenses', { params })
return response.data.map(convertToUnified)
},
async getExpense(id: number): Promise<UnifiedExpense> {
const response = await api.get(`/financials/expenses/${id}`)
return convertToUnified(response.data)
},
async createExpense(expenseData: UnifiedExpenseCreate): Promise<UnifiedExpense> {
const legacyData = convertToLegacyCreate(expenseData)
const response = await api.post('/financials/expenses', legacyData)
return convertToUnified(response.data)
},
async updateExpense(id: number, updates: UnifiedExpenseUpdate): Promise<UnifiedExpense> {
const legacyData = convertToLegacyUpdate(updates)
const response = await api.put(`/financials/expenses/${id}`, legacyData)
return convertToUnified(response.data)
},
async deleteExpense(id: number, expectedVersion?: number): Promise<void> {
const params = expectedVersion ? { expected_version: expectedVersion } : undefined
await api.delete(`/financials/expenses/${id}`, { params })
},
// Group expenses
async getGroupExpenses(groupId: number, params?: { skip?: number; limit?: number }): Promise<UnifiedExpense[]> {
const response = await api.get(`/financials/groups/${groupId}/expenses`, { params })
return response.data.map(convertToUnified)
},
// Settlement Activity operations (for expense splits)
async recordSettlementActivity(
expenseSplitId: number,
activity: SettlementActivityCreate
): Promise<SettlementActivity> {
const response = await api.post(`/financials/expense_splits/${expenseSplitId}/settle`, activity)
return response.data
},
async getRecurringExpenses(): Promise<Expense[]> {
return this.getExpenses({ isRecurring: true })
},
async settleExpenseSplit(expense_split_id: number, activity: SettlementActivityCreate) {
const endpoint = `/financials/expense_splits/${expense_split_id}/settle`
const response = await api.post(endpoint, activity)
async getSettlementActivitiesForSplit(
expenseSplitId: number,
params?: { skip?: number; limit?: number }
): Promise<SettlementActivity[]> {
const response = await api.get(`/financials/expense_splits/${expenseSplitId}/settlement_activities`, { params })
return response.data
},
// Generic Settlement operations
async createSettlement(settlement: SettlementCreate): Promise<Settlement> {
const response = await api.post('/financials/settlements', settlement)
return response.data
},
async getSettlement(id: number): Promise<Settlement> {
const response = await api.get(`/financials/settlements/${id}`)
return response.data
},
async updateSettlement(id: number, updates: SettlementUpdate): Promise<Settlement> {
const response = await api.put(`/financials/settlements/${id}`, updates)
return response.data
},
async deleteSettlement(id: number, expectedVersion?: number): Promise<void> {
const params = expectedVersion ? { expected_version: expectedVersion } : undefined
await api.delete(`/financials/settlements/${id}`, { params })
},
async getGroupSettlements(groupId: number, params?: { skip?: number; limit?: number }): Promise<Settlement[]> {
const response = await api.get(`/financials/groups/${groupId}/settlements`, { params })
return response.data
},
// Financial Summary operations
async getUserFinancialActivity(): Promise<FinancialActivity> {
const response = await api.get('/financials/users/me/financial-activity')
return response.data
},
async getUserFinancialSummary(): Promise<UserFinancialSummary> {
const response = await api.get('/financials/summary/user')
return response.data
},
async getGroupFinancialSummary(groupId: number): Promise<UserFinancialSummary> {
const response = await api.get(`/financials/summary/group/${groupId}`)
return response.data
},
// Financial History/Audit operations
async getFinancialHistoryForGroup(
groupId: number,
params?: { skip?: number; limit?: number }
): Promise<FinancialAuditLog[]> {
const response = await api.get(`/history/financial/group/${groupId}`, { params })
return response.data
},
async getFinancialHistoryForUser(
params?: { skip?: number; limit?: number }
): Promise<FinancialAuditLog[]> {
const response = await api.get('/history/financial/user/me', { params })
return response.data
},
// Legacy compatibility methods
async settleExpenseSplit(
expenseId: number,
splitId: number,
amount: string
): Promise<SettlementActivity> {
const response = await api.post(`/financials/expense_splits/${splitId}/settle`, {
expense_split_id: splitId,
paid_by_user_id: 0, // Will need to be provided by caller
amount_paid: amount
})
return response.data
}
}

20
fe/src/services/financialHistoryService.ts Normal file
View File

@ -0,0 +1,20 @@
import { api } from './api'
import type { FinancialAuditLog } from '@/types/expense'
export const financialHistoryService = {
// Financial History/Audit operations
async getFinancialHistoryForGroup(
groupId: number,
params?: { skip?: number; limit?: number }
): Promise<FinancialAuditLog[]> {
const response = await api.get(`/history/financial/group/${groupId}`, { params })
return response.data
},
async getFinancialHistoryForUser(
params?: { skip?: number; limit?: number }
): Promise<FinancialAuditLog[]> {
const response = await api.get('/history/financial/user/me', { params })
return response.data
},
}

71
fe/src/services/settlementService.ts Normal file
View File

@ -0,0 +1,71 @@
import { api } from './api'
import type {
Settlement,
SettlementCreate,
SettlementUpdate,
SettlementActivity,
SettlementActivityCreate,
UserFinancialSummary,
FinancialActivity,
} from '@/types/expense'
export const settlementService = {
// Generic Settlement operations
async createSettlement(settlement: SettlementCreate): Promise<Settlement> {
const response = await api.post('/financials/settlements', settlement)
return response.data
},
async getSettlement(id: number): Promise<Settlement> {
const response = await api.get(`/financials/settlements/${id}`)
return response.data
},
async updateSettlement(id: number, updates: SettlementUpdate): Promise<Settlement> {
const response = await api.put(`/financials/settlements/${id}`, updates)
return response.data
},
async deleteSettlement(id: number, expectedVersion?: number): Promise<void> {
const params = expectedVersion ? { expected_version: expectedVersion } : undefined
await api.delete(`/financials/settlements/${id}`, { params })
},
async getGroupSettlements(groupId: number, params?: { skip?: number; limit?: number }): Promise<Settlement[]> {
const response = await api.get(`/financials/groups/${groupId}/settlements`, { params })
return response.data
},
// Settlement Activity operations (for expense splits)
async recordSettlementActivity(
expenseSplitId: number,
activity: SettlementActivityCreate
): Promise<SettlementActivity> {
const response = await api.post(`/financials/expense_splits/${expenseSplitId}/settle`, activity)
return response.data
},
async getSettlementActivitiesForSplit(
expenseSplitId: number,
params?: { skip?: number; limit?: number }
): Promise<SettlementActivity[]> {
const response = await api.get(`/financials/expense_splits/${expenseSplitId}/settlement_activities`, { params })
return response.data
},
// Financial Summary operations
async getUserFinancialActivity(): Promise<FinancialActivity> {
const response = await api.get('/financials/users/me/financial-activity')
return response.data
},
async getUserFinancialSummary(): Promise<UserFinancialSummary> {
const response = await api.get('/financials/summary/user')
return response.data
},
async getGroupFinancialSummary(groupId: number): Promise<UserFinancialSummary> {
const response = await api.get(`/financials/summary/group/${groupId}`)
return response.data
},
}

57
fe/src/stores/__tests__/expensesStore.spec.ts Normal file
View File

@ -0,0 +1,57 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useExpensesStore } from '@/stores/expensesStore'
import { expenseService } from '@/services/expenseService'
import type { Expense } from '@/types/expense'
vi.mock('@/services/expenseService', () => {
return {
expenseService: {
getExpenses: vi.fn(),
createExpense: vi.fn(),
updateExpense: vi.fn(),
deleteExpense: vi.fn(),
settleExpenseSplit: vi.fn(),
getExpense: vi.fn(),
},
}
})
const mockExpenses: Expense[] = [
{
id: 1,
description: 'Test',
total_amount: '10.00',
currency: 'USD',
split_type: 'EQUAL',
list_id: null,
group_id: 1,
item_id: null,
paid_by_user_id: 1,
created_by_user_id: 1,
created_at: '',
updated_at: '',
version: 1,
splits: [],
overall_settlement_status: 'unpaid',
isRecurring: false,
is_recurring: false,
} as unknown as Expense,
]
describe('expensesStore', () => {
beforeEach(() => {
setActivePinia(createPinia())
})
it('fetchExpenses stores data', async () => {
const store = useExpensesStore()
; (expenseService.getExpenses as any).mockResolvedValue(mockExpenses)
await store.fetchExpenses({ group_id: 1 })
expect(store.expenses).toEqual(mockExpenses)
expect(store.isLoading).toBe(false)
expect(store.error).toBeNull()
})
})

35
fe/src/stores/activityStore.ts
View File

@ -52,6 +52,41 @@ export const useActivityStore = defineStore('activity', () => {
socket.value.onopen = () => {
console.debug('[WS] Connected to', url)
}
// Handle incoming messages
socket.value.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
if (data.event === 'activity:new' && data.payload?.activity) {
const newAct: Activity = data.payload.activity
// Avoid duplicates
if (!activities.value.some(a => a.id === newAct.id)) {
activities.value.unshift(newAct)
}
} else if (data.event === 'activity:deleted' && data.payload?.id) {
activities.value = activities.value.filter(a => a.id !== data.payload.id)
} else if (data.event === 'activity:updated' && data.payload?.activity) {
const idx = activities.value.findIndex(a => a.id === data.payload.activity.id)
if (idx >= 0) activities.value[idx] = data.payload.activity
}
} catch (err) {
console.error('[WS] Failed to parse message', err)
}
}
// Auto-reconnect on unexpected close
socket.value.onclose = (evt) => {
console.warn('[WS] Closed', evt.code, evt.reason)
socket.value = null
// 1000 = normal close
if (evt.code !== 1000) {
setTimeout(() => connectWebSocket(groupId, token), 2000)
}
}
socket.value.onerror = (error) => {
console.error('[WS] Error', error)
}
}
function disconnectWebSocket() {

12
fe/src/stores/categoryStore.ts
View File

@ -1,7 +1,13 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { apiClient, API_ENDPOINTS } from '@/services/api';
import type { Category } from '@/types/category';
export interface Category {
id: number;
name: string;
user_id?: number | null;
group_id?: number | null;
}
export interface CategoryCreate {
name: string;
@ -48,7 +54,7 @@ export const useCategoryStore = defineStore('category', () => {
error.value = null;
try {
const response = await apiClient.put(API_ENDPOINTS.CATEGORIES.BY_ID(id.toString()), categoryData);
const index = categories.value.findIndex(c => c.id === id);
const index = categories.value.findIndex((c: Category) => c.id === id);
if (index !== -1) {
categories.value[index] = response.data;
}
@ -65,7 +71,7 @@ export const useCategoryStore = defineStore('category', () => {
error.value = null;
try {
await apiClient.delete(API_ENDPOINTS.CATEGORIES.BY_ID(id.toString()));
categories.value = categories.value.filter(c => c.id !== id);
categories.value = categories.value.filter((c: Category) => c.id !== id);
} catch (e) {
error.value = 'Failed to delete category.';
console.error(e);

24
fe/src/stores/choreStore.ts
View File

@ -7,6 +7,8 @@ import type { TimeEntry } from '@/types/time_entry'
import { useSocket } from '@/composables/useSocket'
import { useFairness } from '@/composables/useFairness'
import { useOptimisticUpdates } from '@/composables/useOptimisticUpdates'
import { useNotificationStore } from '@/stores/notifications'
import { useAuthStore } from '@/stores/auth'
export const useChoreStore = defineStore('chores', () => {
// ---- State ----
@ -19,6 +21,8 @@ export const useChoreStore = defineStore('chores', () => {
// Real-time state
const { isConnected, on, off, emit } = useSocket()
const { getNextAssignee } = useFairness()
const notificationStore = useNotificationStore()
const authStore = useAuthStore()
// Point tracking for gamification
const pointsByUser = ref<Record<number, number>>({})
@ -102,6 +106,7 @@ export const useChoreStore = defineStore('chores', () => {
on('chore:updated', handleChoreUpdated)
on('chore:deleted', handleChoreDeleted)
on('chore:assigned', handleChoreAssigned)
on('chore:assignment_updated', handleChoreAssigned) // Reuse the same handler
on('chore:completed', handleChoreCompleted)
on('timer:started', handleTimerStarted)
on('timer:stopped', handleTimerStopped)
@ -112,6 +117,7 @@ export const useChoreStore = defineStore('chores', () => {
off('chore:updated', handleChoreUpdated)
off('chore:deleted', handleChoreDeleted)
off('chore:assigned', handleChoreAssigned)
off('chore:assignment_updated', handleChoreAssigned)
off('chore:completed', handleChoreCompleted)
off('timer:started', handleTimerStarted)
off('timer:stopped', handleTimerStopped)
@ -151,6 +157,14 @@ export const useChoreStore = defineStore('chores', () => {
} else {
chore.assignments.push(assignment)
}
// Show notification if assigned to current user
if (assignment.assigned_to_user_id === authStore.user?.id) {
notificationStore.addNotification({
message: `You have been assigned "${chore.name}"`,
type: 'info'
})
}
}
}
@ -165,6 +179,16 @@ export const useChoreStore = defineStore('chores', () => {
streaksByUser.value[assignment.assigned_to_user_id] =
(streaksByUser.value[assignment.assigned_to_user_id] || 0) + 1
}
// Show notification for completed chore
const chore = findChoreById(assignment.chore_id)
if (chore && assignment.assigned_to_user_id !== authStore.user?.id) {
// Only show notification if someone else completed it
notificationStore.addNotification({
message: `"${chore.name}" was completed!`,
type: 'success'
})
}
}
function handleTimerStarted(payload: { timeEntry: TimeEntry }) {

552
fe/src/stores/expensesStore.ts Normal file
View File

@ -0,0 +1,552 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { expenseService } from '@/services/expenseService'
import type {
Expense,
ExpenseCreate,
ExpenseUpdate,
SettlementActivity,
SettlementActivityCreate,
Settlement,
SettlementCreate,
ExpenseSplit,
SplitType,
ExpenseOverallStatus
} from '@/types/unified-expense'
import { useSocket } from '@/composables/useSocket'
import { useConflictResolution } from '@/composables/useConflictResolution'
import { useAuthStore } from './auth'
export const useExpensesStore = defineStore('expenses', () => {
// ----- Enhanced State with Unified Types -----
const expenses = ref<Expense[]>([])
const settlements = ref<Settlement[]>([])
const isLoading = ref(false)
const error = ref<string | null>(null)
// Real-time collaboration state
const activeExpenseEditSessions = ref<Record<number, {
user_id: number;
user_name: string;
editing_field?: string
}>>({})
// Enhanced debt tracking
const pendingSettlements = ref<Record<string, {
amount: number;
from_user_id: number;
to_user_id: number;
due_date: Date
}>>({})
// Real-time and conflict resolution
const { on, off, isConnected, startEditing, stopEditing } = useSocket()
const {
trackOptimisticUpdate,
confirmOptimisticUpdate,
failOptimisticUpdate,
resolveConflict
} = useConflictResolution()
// Auth store for current user context
const authStore = useAuthStore()
// ----- Enhanced Getters with Unified Types -----
const recurringExpenses = computed(() =>
expenses.value.filter(e => e.is_recurring)
)
const expensesByGroup = computed(() => {
const map: Record<number, Expense[]> = {}
for (const exp of expenses.value) {
if (exp.group_id != null) {
if (!map[exp.group_id]) map[exp.group_id] = []
map[exp.group_id].push(exp)
}
}
return map
})
// Advanced balance calculations with enhanced debt flow tracking
const detailedBalanceByUser = computed(() => {
const balance: Record<number, {
total_owed: number,
total_owing: number,
net_balance: number,
splits_by_expense: Record<number, ExpenseSplit>,
settlement_history: SettlementActivity[]
}> = {}
// Initialize users from all splits
for (const exp of expenses.value) {
for (const split of exp.splits) {
if (!balance[split.user_id]) {
balance[split.user_id] = {
total_owed: 0,
total_owing: 0,
net_balance: 0,
splits_by_expense: {},
settlement_history: []
}
}
}
}
// Calculate balances from expense splits using unified types
for (const exp of expenses.value) {
for (const split of exp.splits) {
const owed = parseFloat(split.owed_amount)
// Calculate paid amount from settlement activities
const paidAmount = split.settlement_activities.reduce(
(sum, activity) => sum + parseFloat(activity.amount_paid),
0
)
const netAmount = owed - paidAmount
balance[split.user_id].total_owed += owed
balance[split.user_id].total_owing += paidAmount
balance[split.user_id].net_balance += netAmount
balance[split.user_id].splits_by_expense[exp.id] = split
// Add settlement activities to history
balance[split.user_id].settlement_history.push(...split.settlement_activities)
}
}
return balance
})
// Current user's financial summary
const currentUserBalance = computed(() => {
const userId = authStore.user?.id
if (!userId) return null
return detailedBalanceByUser.value[userId as number] || {
total_owed: 0,
total_owing: 0,
net_balance: 0,
splits_by_expense: {},
settlement_history: []
}
})
// Enhanced money flow analysis
const debtFlowAnalysis = computed(() => {
const flows: Array<{
from: number,
to: number,
amount: number,
expense_count: number
}> = []
const userTotals: Record<number, number> = {}
for (const exp of expenses.value) {
// Find who paid for this expense
const paidBy = exp.paid_by_user_id
for (const split of exp.splits) {
if (split.user_id === paidBy) continue
const owed = parseFloat(split.owed_amount)
const paidAmount = split.settlement_activities.reduce(
(sum, activity) => sum + parseFloat(activity.amount_paid),
0
)
const amount = owed - paidAmount
if (amount <= 0) continue // Already settled
const existingFlow = flows.find(f => f.from === split.user_id && f.to === paidBy)
if (existingFlow) {
existingFlow.amount += amount
existingFlow.expense_count += 1
} else {
flows.push({
from: split.user_id,
to: paidBy,
amount,
expense_count: 1
})
}
userTotals[split.user_id] = (userTotals[split.user_id] || 0) - amount
userTotals[paidBy] = (userTotals[paidBy] || 0) + amount
}
}
return {
flows: flows.filter(f => f.amount > 0.01),
user_totals: userTotals,
biggest_debtor: Object.entries(userTotals)
.reduce((a, b) => userTotals[parseInt(a[0])] < userTotals[parseInt(b[0])] ? a : b)?.[0],
biggest_creditor: Object.entries(userTotals)
.reduce((a, b) => userTotals[parseInt(a[0])] > userTotals[parseInt(b[0])] ? a : b)?.[0]
}
})
// ----- Real-time Event Handlers -----
function setupWebSocketListeners() {
on('expense:created', handleExpenseCreated)
on('expense:updated', handleExpenseUpdated)
on('expense:deleted', handleExpenseDeleted)
on('expense:split_settled', handleSplitSettled)
on('expense:editing_started', handleEditingStarted)
on('expense:editing_stopped', handleEditingStopped)
on('settlement:created', handleSettlementCreated)
on('settlement:updated', handleSettlementUpdated)
}
function cleanupWebSocketListeners() {
off('expense:created', handleExpenseCreated)
off('expense:updated', handleExpenseUpdated)
off('expense:deleted', handleExpenseDeleted)
off('expense:split_settled', handleSplitSettled)
off('expense:editing_started', handleEditingStarted)
off('expense:editing_stopped', handleEditingStopped)
off('settlement:created', handleSettlementCreated)
off('settlement:updated', handleSettlementUpdated)
}
function handleExpenseCreated(payload: { expense: Expense }) {
// Check if we already have this expense (avoid duplicates)
const existingIndex = expenses.value.findIndex(e => e.id === payload.expense.id)
if (existingIndex === -1) {
expenses.value.unshift(payload.expense)
}
}
function handleExpenseUpdated(payload: { expense: Expense }) {
const index = findIndex(payload.expense.id)
if (index >= 0) {
expenses.value[index] = payload.expense
}
}
function handleExpenseDeleted(payload: { expense_id: number }) {
const index = findIndex(payload.expense_id)
if (index >= 0) {
expenses.value.splice(index, 1)
}
}
function handleSplitSettled(payload: {
expense_id: number;
split_id: number;
settlement: SettlementActivity
}) {
const expense = expenses.value.find(e => e.id === payload.expense_id)
if (expense) {
const split = expense.splits.find(s => s.id === payload.split_id)
if (split) {
split.settlement_activities.push(payload.settlement)
// Update split status based on total settlements
const totalPaid = split.settlement_activities.reduce(
(sum, activity) => sum + parseFloat(activity.amount_paid),
0
)
const totalOwed = parseFloat(split.owed_amount)
if (totalPaid >= totalOwed) {
split.status = 'paid' as any
} else if (totalPaid > 0) {
split.status = 'partially_paid' as any
} else {
split.status = 'unpaid' as any
}
}
}
}
function handleEditingStarted(payload: {
expense_id: number;
user_id: number;
user_name: string;
field?: string
}) {
activeExpenseEditSessions.value[payload.expense_id] = {
user_id: payload.user_id,
user_name: payload.user_name,
editing_field: payload.field
}
}
function handleEditingStopped(payload: { expense_id: number }) {
delete activeExpenseEditSessions.value[payload.expense_id]
}
function handleSettlementCreated(payload: { settlement: Settlement }) {
settlements.value.push(payload.settlement)
}
function handleSettlementUpdated(payload: { settlement: Settlement }) {
const index = settlements.value.findIndex(s => s.id === payload.settlement.id)
if (index >= 0) {
settlements.value[index] = payload.settlement
}
}
// ----- Helper Functions -----
function findIndex(id: number) {
return expenses.value.findIndex(e => e.id === id)
}
function setError(message: string) {
error.value = message
console.error('[ExpensesStore]', message)
}
// ----- Enhanced Actions with Conflict Resolution -----
async function fetchExpenses(params?: { groupId?: number, listId?: number, isRecurring?: boolean }) {
isLoading.value = true
error.value = null
try {
const serviceParams: { group_id?: number, list_id?: number, isRecurring?: boolean } = {};
if (params?.groupId) serviceParams.group_id = params.groupId;
if (params?.listId) serviceParams.list_id = params.listId;
if (params?.isRecurring) serviceParams.isRecurring = params.isRecurring;
const data = await expenseService.getExpenses(serviceParams)
expenses.value = data.sort((a, b) =>
new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
)
setupWebSocketListeners()
} catch (err: any) {
setError(err.message || 'Failed to fetch expenses')
throw err
} finally {
isLoading.value = false
}
}
async function createExpense(expenseData: ExpenseCreate) {
const tempId = -Date.now() // Negative ID for optimistic updates
const optimisticExpense: Expense = {
id: tempId,
...expenseData,
total_amount: expenseData.total_amount,
expense_date: expenseData.expense_date || new Date().toISOString(),
currency: expenseData.currency || 'USD',
split_type: expenseData.split_type,
created_by_user_id: authStore.user?.id as number,
overall_settlement_status: 'unpaid' as ExpenseOverallStatus,
is_recurring: expenseData.is_recurring || false,
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
version: 1,
splits: expenseData.splits_in?.map((split, index) => ({
id: -index - 1,
expense_id: tempId,
user_id: split.user_id,
owed_amount: split.owed_amount || '0',
share_percentage: split.share_percentage,
share_units: split.share_units,
status: 'unpaid' as any,
settlement_activities: [],
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
version: 1
})) || []
} as Expense
// Track optimistic update
const updateId = trackOptimisticUpdate('expense', tempId, 'create', optimisticExpense)
// Optimistic update
expenses.value.unshift(optimisticExpense)
try {
const newExpense = await expenseService.createExpense(expenseData)
// Replace optimistic expense with real one
const index = expenses.value.findIndex(e => e.id === tempId)
if (index >= 0) {
expenses.value[index] = newExpense
}
// Confirm optimistic update
confirmOptimisticUpdate(updateId, newExpense)
return newExpense
} catch (err: any) {
// Remove optimistic expense on error
const index = expenses.value.findIndex(e => e.id === tempId)
if (index >= 0) {
expenses.value.splice(index, 1)
}
// Mark optimistic update as failed
failOptimisticUpdate(updateId, null, 0)
setError(err.message || 'Failed to create expense')
throw err
}
}
async function updateExpense(id: number, updates: ExpenseUpdate) {
const index = findIndex(id)
if (index < 0) return
const original = { ...expenses.value[index] }
const updateId = trackOptimisticUpdate('expense', id, 'update', updates)
// Optimistic update
expenses.value[index] = { ...original, ...updates }
try {
const updated = await expenseService.updateExpense(id, updates)
expenses.value[index] = updated
confirmOptimisticUpdate(updateId, updated)
return updated
} catch (err: any) {
// Rollback on error
expenses.value[index] = original
// Handle version conflicts
if (err.status === 409) {
const conflictId = failOptimisticUpdate(updateId, err.serverData, err.serverVersion)
if (conflictId) {
// Let the user resolve the conflict
console.log('Version conflict detected, awaiting user resolution')
}
} else {
failOptimisticUpdate(updateId, null, 0)
}
setError(err.message || 'Failed to update expense')
throw err
}
}
async function deleteExpense(id: number) {
const index = findIndex(id)
if (index < 0) return
const original = expenses.value[index]
const updateId = trackOptimisticUpdate('expense', id, 'delete', original)
// Optimistic removal
expenses.value.splice(index, 1)
try {
await expenseService.deleteExpense(id)
confirmOptimisticUpdate(updateId)
} catch (err: any) {
// Restore on error
expenses.value.splice(index, 0, original)
failOptimisticUpdate(updateId, original, original.version)
setError(err.message || 'Failed to delete expense')
throw err
}
}
// Enhanced settlement workflow with conflict resolution
async function settleExpenseSplit(
expenseId: number,
splitId: number,
amount: string
) {
const expense = expenses.value.find(e => e.id === expenseId)
if (!expense) return
const split = expense.splits.find(s => s.id === splitId)
if (!split) return
const originalActivities = [...split.settlement_activities]
const optimisticActivity: SettlementActivity = {
id: -Date.now(),
expense_split_id: splitId,
paid_by_user_id: authStore.user?.id as number,
amount_paid: amount,
paid_at: new Date().toISOString(),
created_by_user_id: authStore.user?.id as number,
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
version: 1
}
// Optimistic update
split.settlement_activities.push(optimisticActivity)
try {
const settlement = await expenseService.settleExpenseSplit(expenseId, splitId, amount)
// Replace optimistic activity with real one
const activityIndex = split.settlement_activities.findIndex(
a => a.id === optimisticActivity.id
)
if (activityIndex >= 0) {
split.settlement_activities[activityIndex] = settlement
}
return settlement
} catch (err: any) {
// Rollback on error
split.settlement_activities = originalActivities
setError(err.message || 'Failed to settle expense split')
throw err
}
}
// Collaborative editing functions
function startEditingExpense(expenseId: number, field?: string) {
const userId = authStore.user?.id
const userName = authStore.user?.name
if (userId && userName && isConnected.value) {
activeExpenseEditSessions.value[expenseId] = {
user_id: userId as number,
user_name: userName,
editing_field: field
}
startEditing('expense', expenseId, field)
}
}
function stopEditingExpense(expenseId: number) {
delete activeExpenseEditSessions.value[expenseId]
if (isConnected.value) {
stopEditing('expense', expenseId)
}
}
// Cleanup
function cleanup() {
cleanupWebSocketListeners()
}
return {
// State
expenses,
settlements,
isLoading,
error,
pendingSettlements,
activeExpenseEditSessions,
// Getters
recurringExpenses,
expensesByGroup,
detailedBalanceByUser,
currentUserBalance,
debtFlowAnalysis,
// Actions
fetchExpenses,
createExpense,
updateExpense,
deleteExpense,
settleExpenseSplit,
startEditingExpense,
stopEditingExpense,
setupWebSocketListeners,
cleanup
}
})

52
fe/src/stores/groupStore.ts
View File

@ -4,6 +4,7 @@ import { groupService } from '@/services/groupService';
import type { GroupPublic as Group, GroupCreate, GroupUpdate } from '@/types/group';
import type { UserPublic } from '@/types/user';
import { useSocket } from '@/composables/useSocket';
import { useNotificationStore } from '@/stores/notifications';
export const useGroupStore = defineStore('group', () => {
// ---- State ----
@ -15,6 +16,7 @@ export const useGroupStore = defineStore('group', () => {
// Real-time state
const { isConnected, on, off, emit } = useSocket();
const membersByGroup = ref<Record<number, UserPublic[]>>({});
const notificationStore = useNotificationStore();
// ---- Getters ----
const currentGroup = computed(() => {
@ -37,17 +39,31 @@ export const useGroupStore = defineStore('group', () => {
// ---- Real-time Event Handlers ----
function setupWebSocketListeners() {
on('group:created', handleGroupCreated);
on('group:member_joined', handleMemberJoined);
on('group:member_left', handleMemberLeft);
on('group:updated', handleGroupUpdated);
on('group:deleted', handleGroupDeleted);
on('group:invite_created', handleInviteCreated);
on('group:invite_used', handleInviteUsed);
}
function cleanupWebSocketListeners() {
off('group:created', handleGroupCreated);
off('group:member_joined', handleMemberJoined);
off('group:member_left', handleMemberLeft);
off('group:updated', handleGroupUpdated);
off('group:deleted', handleGroupDeleted);
off('group:invite_created', handleInviteCreated);
off('group:invite_used', handleInviteUsed);
}
function handleGroupCreated(payload: { group: Group }) {
const { group } = payload;
// Only add if it's not already in the list (to prevent duplicates)
if (!groups.value.find(g => g.id === group.id)) {
groups.value.push(group);
}
}
function handleMemberJoined(payload: { groupId: number, member: UserPublic }) {
@ -56,13 +72,32 @@ export const useGroupStore = defineStore('group', () => {
membersByGroup.value[groupId] = [];
}
membersByGroup.value[groupId].push(member);
// Show notification for new member
const group = groups.value.find(g => g.id === groupId);
if (group) {
notificationStore.addNotification({
message: `${member.name} joined ${group.name}!`,
type: 'success'
});
}
}
function handleMemberLeft(payload: { groupId: number, userId: number }) {
const { groupId, userId } = payload;
if (membersByGroup.value[groupId]) {
const member = membersByGroup.value[groupId].find(m => m.id === userId);
membersByGroup.value[groupId] = membersByGroup.value[groupId]
.filter(m => m.id !== userId);
// Show notification for member leaving
const group = groups.value.find(g => g.id === groupId);
if (group && member) {
notificationStore.addNotification({
message: `${member.name} left ${group.name}`,
type: 'info'
});
}
}
}
@ -74,11 +109,28 @@ export const useGroupStore = defineStore('group', () => {
}
}
function handleGroupDeleted(payload: { groupId: number }) {
const { groupId } = payload;
// Remove the group from the list
groups.value = groups.value.filter(g => g.id !== groupId);
// Clean up member data
delete membersByGroup.value[groupId];
// If this was the current group, switch to another one
if (currentGroupId.value === groupId) {
currentGroupId.value = groups.value[0]?.id || null;
}
}
function handleInviteCreated(payload: { groupId: number, invite: any }) {
// Could track pending invites for UI display
console.log('New invite created for group', payload.groupId);
}
function handleInviteUsed(payload: { groupId: number, inviteId: number, member: UserPublic }) {
// When an invite is used, a new member joins - this usually triggers handleMemberJoined too
console.log('Invite used for group', payload.groupId, 'by', payload.member.name);
}
// ---- Actions ----
async function fetchUserGroups() {
isLoading.value = true;

276
fe/src/stores/householdStore.ts Normal file
View File

@ -0,0 +1,276 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { GroupPublic as Household, GroupUpdate } from '@/types/group'
import type { UserPublic } from '@/types/user'
import { groupService } from '@/services/groupService'
import { useSocket } from '@/composables/useSocket'
import { useOptimisticUpdates } from '@/composables/useOptimisticUpdates'
export const useHouseholdStore = defineStore('household', () => {
// ---- State ----
const household = ref<Household | null>(null)
const isLoading = ref(false)
const error = ref<string | null>(null)
// Real-time member activity tracking
const memberActivity = ref<Record<number, { lastSeen: Date, isActive: boolean }>>({})
const inviteCodes = ref<string[]>([])
const pendingInvites = ref<{ code: string, expiresAt: Date, usageCount: number }[]>([])
// Real-time socket
const { on, off, emit } = useSocket()
// Optimistic updates
const { mutate, rollback } = useOptimisticUpdates<Household>([])
// ---- Enhanced Getters ----
const householdName = computed(() => household.value?.name || '')
const members = computed(() => household.value?.members || [])
const memberCount = computed(() => members.value.length)
const isMember = computed(() => household.value?.is_member ?? false)
// Activity-based member insights
const activeMembers = computed(() =>
members.value.filter(member => memberActivity.value[member.id]?.isActive)
)
const inactiveMembers = computed(() =>
members.value.filter(member => !memberActivity.value[member.id]?.isActive)
)
// Household health metrics
const householdHealth = computed(() => {
const totalMembers = memberCount.value
const activeCount = activeMembers.value.length
const healthScore = totalMembers > 0 ? (activeCount / totalMembers) * 100 : 0
return {
score: Math.round(healthScore),
status: healthScore > 75 ? 'excellent' : healthScore > 50 ? 'good' : 'needs-attention',
activeMembers: activeCount,
totalMembers
}
})
// ---- Enhanced Socket Handlers ----
function handleUpdated(payload: { household: Household }) {
if (household.value && payload.household.id === household.value.id) {
// Direct update for socket events
household.value = payload.household
}
}
function handleMemberJoined(payload: { householdId: number; member: UserPublic }) {
if (household.value && payload.householdId === household.value.id) {
household.value.members.push(payload.member)
// Track new member activity
memberActivity.value[payload.member.id] = {
lastSeen: new Date(),
isActive: true
}
}
}
function handleMemberLeft(payload: { householdId: number; userId: number }) {
if (household.value && payload.householdId === household.value.id) {
household.value.members = household.value.members.filter(m => m.id !== payload.userId)
delete memberActivity.value[payload.userId]
}
}
function handleMemberActivity(payload: { userId: number; lastSeen: string; isActive: boolean }) {
memberActivity.value[payload.userId] = {
lastSeen: new Date(payload.lastSeen),
isActive: payload.isActive
}
}
function handleInviteCreated(payload: { code: string; expiresAt: string }) {
pendingInvites.value.push({
code: payload.code,
expiresAt: new Date(payload.expiresAt),
usageCount: 0
})
}
function setupSocket() {
on('household:updated', handleUpdated)
on('household:member_joined', handleMemberJoined)
on('household:member_left', handleMemberLeft)
on('household:member_activity', handleMemberActivity)
on('household:invite_created', handleInviteCreated)
}
function cleanupSocket() {
off('household:updated', handleUpdated)
off('household:member_joined', handleMemberJoined)
off('household:member_left', handleMemberLeft)
off('household:member_activity', handleMemberActivity)
off('household:invite_created', handleInviteCreated)
}
// ---- Enhanced Actions ----
async function fetchHousehold(id: number) {
isLoading.value = true
error.value = null
try {
const data = await groupService.getGroupDetails(id)
// Convert Group to GroupPublic format
household.value = {
...data,
members: (data.members || []).filter(m => m !== null).map(m => ({
id: m!.id as number,
name: m!.name,
full_name: m!.name,
email: m!.email
})),
is_member: true
} as Household
// Initialize member activity tracking
household.value.members.forEach((member: UserPublic) => {
memberActivity.value[member.id] = {
lastSeen: new Date(),
isActive: true // Default to active for newly loaded members
}
})
setupSocket()
} catch (err: any) {
error.value = err.message || 'Failed to fetch household'
throw err
} finally {
isLoading.value = false
}
}
async function updateHousehold(updates: Partial<GroupUpdate>) {
if (!household.value) return
const original = { ...household.value }
// Optimistic update
household.value = { ...household.value, ...updates }
try {
const updated = await groupService.updateGroup(household.value.id, updates)
// Convert Group to GroupPublic format
household.value = {
...updated,
members: household.value.members, // Keep existing members
is_member: true
} as Household
// Emit real-time update to other members
emit('household:updated', { household: household.value })
return household.value
} catch (err: any) {
// Rollback on error
household.value = original
error.value = err.message || 'Failed to update household'
throw err
}
}
async function generateInviteCode() {
if (!household.value) return null
try {
// TODO: Implement when backend API is available
// const response = await groupService.createInvite(household.value.id)
// const newCode = response.code
const newCode = `inv_${Math.random().toString(36).substring(2, 15)}`
inviteCodes.value.push(newCode)
emit('household:invite_created', {
code: newCode,
expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString() // 7 days
})
return newCode
} catch (err: any) {
error.value = err.message || 'Failed to generate invite code'
throw err
}
}
// Member management
async function removeMember(userId: number) {
if (!household.value) return
const original = [...household.value.members]
// Optimistic update
household.value.members = household.value.members.filter(m => m.id !== userId)
delete memberActivity.value[userId]
try {
// TODO: Implement when backend API is available
// await groupService.removeMember(household.value.id, userId)
emit('household:member_left', { householdId: household.value.id, userId })
} catch (err: any) {
// Rollback on error
household.value.members = original
error.value = err.message || 'Failed to remove member'
throw err
}
}
// Cross-feature integration helpers
function getMemberById(id: number) {
return members.value.find(m => m.id === id)
}
function updateMemberActivity(userId: number, isActive: boolean = true) {
if (memberActivity.value[userId]) {
memberActivity.value[userId] = {
lastSeen: new Date(),
isActive
}
// Emit activity update to other members
emit('household:member_activity', {
userId,
lastSeen: new Date().toISOString(),
isActive
})
}
}
// Cleanup on unmount
function cleanup() {
cleanupSocket()
}
return {
// State
household,
isLoading,
error,
memberActivity,
inviteCodes,
pendingInvites,
// Getters
householdName,
members,
memberCount,
isMember,
activeMembers,
inactiveMembers,
householdHealth,
// Actions
fetchHousehold,
updateHousehold,
generateInviteCode,
removeMember,
getMemberById,
updateMemberActivity,
setupSocket,
cleanup
}
})

109
fe/src/stores/itemStore.ts
View File

@ -2,6 +2,9 @@ import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { Item } from '@/types/item'
import { apiClient, API_ENDPOINTS } from '@/services/api'
import { useSocket } from '@/composables/useSocket'
import { useNotificationStore } from '@/stores/notifications'
import { useAuthStore } from '@/stores/auth'
interface CreateItemPayload {
listId: number
@ -35,6 +38,95 @@ export const useItemStore = defineStore('items', () => {
const isLoading = ref(false)
const error = ref<string | null>(null)
// Real-time state
const { isConnected, on, off, emit } = useSocket()
const notificationStore = useNotificationStore()
const authStore = useAuthStore()
// ---- Real-time Event Handlers ----
function setupWebSocketListeners() {
on('item:created', handleItemCreated)
on('item:updated', handleItemUpdated)
on('item:deleted', handleItemDeleted)
on('item:claimed', handleItemClaimed)
on('item:unclaimed', handleItemUnclaimed)
}
function cleanupWebSocketListeners() {
off('item:created', handleItemCreated)
off('item:updated', handleItemUpdated)
off('item:deleted', handleItemDeleted)
off('item:claimed', handleItemClaimed)
off('item:unclaimed', handleItemUnclaimed)
}
function handleItemCreated(payload: { item: Item }) {
const { item } = payload
const listId = item.list_id
if (!itemsByList.value[listId]) {
itemsByList.value[listId] = []
}
// Only add if not already present (prevent duplicates)
if (!itemsByList.value[listId].find(i => i.id === item.id)) {
itemsByList.value[listId].push(item)
// Show notification if added by someone else
if (item.added_by_id !== authStore.user?.id) {
notificationStore.addNotification({
message: `"${item.name}" was added to the shopping list`,
type: 'info',
duration: 3000
})
}
}
}
function handleItemUpdated(payload: { item: Item }) {
const { item } = payload
const listId = item.list_id
const items = itemsByList.value[listId]
if (items) {
const index = items.findIndex(i => i.id === item.id)
if (index >= 0) {
items[index] = item
}
}
}
function handleItemDeleted(payload: { itemId: number, listId: number }) {
const { itemId, listId } = payload
const items = itemsByList.value[listId]
if (items) {
itemsByList.value[listId] = items.filter(i => i.id !== itemId)
}
}
function handleItemClaimed(payload: { item: Item }) {
// Same as update - claiming updates the item
handleItemUpdated(payload)
// Show notification if claimed by someone else
if (payload.item.claimed_by_user_id !== authStore.user?.id) {
notificationStore.addNotification({
message: `"${payload.item.name}" was claimed for shopping`,
type: 'info',
duration: 3000
})
}
}
function handleItemUnclaimed(payload: { item: Item }) {
// Same as update - unclaiming updates the item
handleItemUpdated(payload)
// Show notification if unclaimed by someone else
notificationStore.addNotification({
message: `"${payload.item.name}" is available for shopping again`,
type: 'info',
duration: 3000
})
}
function setError(message: string) {
error.value = message
isLoading.value = false
@ -61,6 +153,9 @@ export const useItemStore = defineStore('items', () => {
const { data: created } = await apiClient.post(endpoint, data)
if (!itemsByList.value[listId]) itemsByList.value[listId] = []
itemsByList.value[listId].push(created as Item)
// Emit real-time event
emit('item:created', { item: created })
return created as Item
} catch (e: any) {
setError(e?.response?.data?.detail || e.message || 'Failed to add item')
@ -78,6 +173,9 @@ export const useItemStore = defineStore('items', () => {
const idx = arr.findIndex((it) => it.id === itemId)
if (idx !== -1) arr[idx] = updated as Item
}
// Emit real-time event
emit('item:updated', { item: updated })
return updated as Item
} catch (e: any) {
setError(e?.response?.data?.detail || e.message || 'Failed to update item')
@ -92,12 +190,18 @@ export const useItemStore = defineStore('items', () => {
await apiClient.delete(endpoint, config)
const arr = itemsByList.value[listId]
if (arr) itemsByList.value[listId] = arr.filter((it) => it.id !== itemId)
// Emit real-time event
emit('item:deleted', { itemId, listId })
} catch (e: any) {
setError(e?.response?.data?.detail || e.message || 'Failed to delete item')
throw e
}
}
// Initialize WebSocket listeners
setupWebSocketListeners()
return {
itemsByList,
isLoading,
@ -107,5 +211,10 @@ export const useItemStore = defineStore('items', () => {
updateItem,
deleteItem,
setError,
// Real-time
isConnected,
setupWebSocketListeners,
cleanupWebSocketListeners,
}
})

66
fe/src/stores/listDetailStore.ts
View File

@ -11,6 +11,7 @@ import type { SettlementActivityCreate } from '@/types/expense'
import type { List } from '@/types/list'
import type { AxiosResponse } from 'axios'
import type { Item } from '@/types/item'
import { useSocket } from '@/composables/useSocket'
export interface ListWithExpenses extends List {
id: number
@ -24,6 +25,63 @@ export const useListDetailStore = defineStore('listDetail', () => {
const error = ref<string | null>(null)
const isSettlingSplit = ref(false)
// Real-time state
const { isConnected, on, off, emit } = useSocket()
// ---- Real-time Event Handlers ----
function setupWebSocketListeners() {
on('list:updated', handleListUpdated)
on('expense:created', handleExpenseCreated)
on('expense:updated', handleExpenseUpdated)
on('expense:deleted', handleExpenseDeleted)
}
function cleanupWebSocketListeners() {
off('list:updated', handleListUpdated)
off('expense:created', handleExpenseCreated)
off('expense:updated', handleExpenseUpdated)
off('expense:deleted', handleExpenseDeleted)
}
function handleListUpdated(payload: { list: List }) {
const { list } = payload
if (currentList.value && currentList.value.id === list.id) {
// Update the list portion while preserving expenses
currentList.value = {
...currentList.value,
...list,
expenses: currentList.value.expenses // Keep existing expenses
}
}
}
function handleExpenseCreated(payload: { expense: Expense }) {
const { expense } = payload
if (currentList.value && expense.list_id === currentList.value.id) {
// Add the new expense if not already present
if (!currentList.value.expenses.find(e => e.id === expense.id)) {
currentList.value.expenses.push(expense)
}
}
}
function handleExpenseUpdated(payload: { expense: Expense }) {
const { expense } = payload
if (currentList.value && expense.list_id === currentList.value.id) {
const index = currentList.value.expenses.findIndex(e => e.id === expense.id)
if (index >= 0) {
currentList.value.expenses[index] = expense
}
}
}
function handleExpenseDeleted(payload: { expenseId: number, listId: number }) {
const { expenseId, listId } = payload
if (currentList.value && currentList.value.id === listId) {
currentList.value.expenses = currentList.value.expenses.filter(e => e.id !== expenseId)
}
}
// Getters (as computed properties or methods)
const getExpenses = computed((): Expense[] => {
return currentList.value?.expenses || []
@ -126,6 +184,9 @@ export const useListDetailStore = defineStore('listDetail', () => {
isLoading.value = false
}
// Initialize WebSocket listeners
setupWebSocketListeners()
return {
currentList,
isLoading,
@ -137,6 +198,11 @@ export const useListDetailStore = defineStore('listDetail', () => {
getExpenses,
getPaidAmountForSplit,
getExpenseSplitById,
// Real-time
isConnected,
setupWebSocketListeners,
cleanupWebSocketListeners,
}
})

93
fe/src/stores/listsStore.ts
View File

@ -94,22 +94,24 @@ export const useListsStore = defineStore('lists', () => {
disconnectWebSocket();
currentListId = listId;
const wsUrl = `${API_BASE_URL.replace('https', 'wss').replace('http', 'ws')}/ws/lists/${listId}?token=${token}`;
// Build WebSocket URL using the same host as the HTTP request. The backend exposes
// the list-scoped endpoint at /api/v1/ws/list/{id}, so we mirror that here.
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const host = window.location.host;
const wsUrl = `${protocol}//${host}/api/v1/ws/list/${listId}?token=${encodeURIComponent(token)}`;
console.log('Connecting to list WebSocket:', wsUrl);
listWebSocket = new WebSocket(wsUrl);
listWebSocket.addEventListener('open', () => {
console.log('List WebSocket connected for list:', listId);
isConnected.value = true;
// Join the list room
// Inform backend that we joined this list room
joinListRoom(listId);
});
listWebSocket.addEventListener('close', (event) => {
console.log('List WebSocket disconnected:', event.code, event.reason);
listWebSocket = null;
isConnected.value = false;
// Auto-reconnect if unexpected disconnect and still on the same list
if (currentListId === listId && event.code !== 1000) {
@ -117,7 +119,7 @@ export const useListsStore = defineStore('lists', () => {
if (currentListId === listId) {
const authStore = useAuthStore();
if (authStore.accessToken) {
connectWebSocket(listId, authStore.accessToken);
connectWebSocket(listId, authStore.accessToken || '');
}
}
}, 2000);
@ -156,21 +158,30 @@ export const useListsStore = defineStore('lists', () => {
function handleWebSocketMessage(event: string, payload: any) {
switch (event) {
case 'item_added':
case 'list:item_added':
handleItemAdded(payload);
break;
case 'item_updated':
case 'list:item_updated':
handleItemUpdated(payload);
break;
case 'item_deleted':
case 'list:item_deleted':
handleItemDeleted(payload);
break;
case 'item_claimed':
case 'list:item_claimed':
handleItemClaimed(payload);
break;
case 'item_unclaimed':
case 'list:item_unclaimed':
handleItemUnclaimed(payload);
break;
case 'item_reordered':
case 'list:item_reordered':
handleItemReordered(payload);
break;
case 'list:user_joined':
handleUserJoined(payload);
break;
@ -243,6 +254,23 @@ export const useListsStore = defineStore('lists', () => {
}
}
function handleItemReordered(payload: { listId: number, orderedIds: number[] }) {
if (!currentList.value) return;
const { orderedIds } = payload;
// Optimistic update: reorder items in local state
const reorderedItems = orderedIds.map(id =>
currentList.value!.items.find(item => item.id === id)
).filter(Boolean) as Item[];
// Add any items not in the ordered list (shouldn't happen but safety first)
const missingItems = currentList.value.items.filter(item =>
!orderedIds.includes(Number(item.id))
);
currentList.value.items = [...reorderedItems, ...missingItems];
}
function handleUserJoined(payload: { user: { id: number, name: string } }) {
activeUsers.value[payload.user.id] = {
...payload.user,
@ -346,8 +374,9 @@ export const useListsStore = defineStore('lists', () => {
const response = await apiClient.post(`/items/${itemId}/claim`);
item.version = response.data.version;
// Emit real-time event
sendWebSocketMessage('list:item_claimed', {
// Emit real-time event so other browser tabs update immediately (backend will
// also broadcast its own event).
sendWebSocketMessage('item_claimed', {
itemId,
claimedBy: item.claimed_by_user,
claimedAt: item.claimed_at,
@ -379,8 +408,9 @@ export const useListsStore = defineStore('lists', () => {
const response = await apiClient.delete(`/items/${itemId}/claim`);
item.version = response.data.version;
// Emit real-time event
sendWebSocketMessage('list:item_unclaimed', { itemId, version: item.version });
// Emit real-time event so other browser tabs update immediately (backend will
// also broadcast its own event).
sendWebSocketMessage('item_unclaimed', { itemId, version: item.version });
} catch (err: any) {
// Rollback
item.claimed_by_user_id = originalClaimedById;
@ -430,7 +460,7 @@ export const useListsStore = defineStore('lists', () => {
lastListUpdate.value = response.data.updated_at;
// Emit real-time event
sendWebSocketMessage('list:item_added', { item: response.data });
sendWebSocketMessage('item_added', { item: response.data });
return response.data;
} catch (err: any) {
@ -468,7 +498,7 @@ export const useListsStore = defineStore('lists', () => {
}
// Emit real-time event
sendWebSocketMessage('list:item_updated', { item: response.data });
sendWebSocketMessage('item_updated', { item: response.data });
return response.data;
} catch (err: any) {
@ -499,7 +529,7 @@ export const useListsStore = defineStore('lists', () => {
lastItemCount.value = currentList.value.items.length;
// Emit real-time event
sendWebSocketMessage('list:item_deleted', { itemId });
sendWebSocketMessage('item_deleted', { itemId });
return true;
} catch (err: any) {
@ -552,6 +582,44 @@ export const useListsStore = defineStore('lists', () => {
}
}
async function reorderItems(listId: string | number, orderedItemIds: number[]) {
if (!currentList.value) return;
const originalItems = [...currentList.value.items];
// Optimistic update: reorder items in local state
const reorderedItems = orderedItemIds.map(id =>
currentList.value!.items.find(item => item.id === id)
).filter(Boolean) as Item[];
// Add any items not in the ordered list (shouldn't happen but safety first)
const missingItems = currentList.value.items.filter(item =>
!orderedItemIds.includes(Number(item.id))
);
currentList.value.items = [...reorderedItems, ...missingItems];
try {
// Call API to persist the reorder on the items endpoint
await apiClient.put(`${API_ENDPOINTS.LISTS.ITEMS(String(listId))}/reorder`, {
ordered_ids: orderedItemIds
});
// Emit WebSocket event for real-time updates to other users
if (listWebSocket) {
listWebSocket.send(JSON.stringify({
type: 'item_reordered',
data: { listId: Number(listId), orderedIds: orderedItemIds }
}));
}
} catch (error) {
// Rollback on failure
currentList.value.items = originalItems;
console.error('Failed to reorder items:', error);
throw error;
}
}
// WebSocket listeners are now handled directly in connectWebSocket
return {
@ -591,6 +659,7 @@ export const useListsStore = defineStore('lists', () => {
isItemBeingEdited,
getItemEditor,
settleExpenseSplit,
reorderItems,
getPaidAmountForSplit,
// Real-time

16
fe/src/stores/notifications.ts
View File

@ -4,9 +4,23 @@ import { ref } from 'vue';
export interface Notification {
id: string;
message: string;
type: 'success' | 'error' | 'warning' | 'info';
type: 'success' | 'error' | 'warning' | 'info' | 'loading';
duration?: number; // in milliseconds
manualClose?: boolean; // If true, won't auto-close
title?: string;
details?: string;
actions?: Array<{
id: string;
label: string;
icon?: string;
style?: 'primary' | 'secondary' | 'danger';
loading?: boolean;
handler?: () => Promise<void> | void;
}>;
persistent?: boolean;
showProgress?: boolean;
progress?: number;
animated?: boolean;
}
export const useNotificationStore = defineStore('notifications', () => {

15
fe/src/types/category.ts Normal file
View File

@ -0,0 +1,15 @@
export interface Category {
id: number;
name: string;
user_id?: number | null;
group_id?: number | null;
}
export interface CategoryCreate {
name: string;
group_id?: number | null;
}
export interface CategoryUpdate {
name?: string;
}

91
fe/src/types/expense.ts
View File

@ -38,6 +38,65 @@ export interface SettlementActivity {
// Type alias for consistency with backend response
export type SettlementActivityPublic = SettlementActivity
// Settlement types for generic settlements
export interface SettlementCreate {
group_id: number
paid_by_user_id: number
paid_to_user_id: number
amount: string
settlement_date?: string
description?: string
}
export interface SettlementUpdate {
description?: string
settlement_date?: string
version: number
}
export interface Settlement {
id: number
group_id: number
paid_by_user_id: number
paid_to_user_id: number
amount: string
settlement_date: string
description?: string
created_by_user_id: number
created_at: string
updated_at: string
version: number
group?: any // Group type would be imported
payer?: UserPublic | null
payee?: UserPublic | null
created_by_user?: UserPublic | null
}
export type SettlementPublic = Settlement
// Financial Summary types
export interface SummaryUser {
id: number
name: string
}
export interface DebtCredit {
user: SummaryUser
amount: number
}
export interface UserFinancialSummary {
net_balance: number
total_group_spending: number
debts: DebtCredit[]
credits: DebtCredit[]
currency: string
}
export interface FinancialActivity {
activities: (Expense | Settlement)[]
}
// For creating expense splits
export interface ExpenseSplitCreate {
user_id: number
@ -96,6 +155,13 @@ export interface ExpenseCreate {
splits_in?: ExpenseSplitCreate[]
}
export interface ExpenseUpdate {
description?: string
currency?: string
expense_date?: string
version: number
}
export interface Expense {
id: number
description: string
@ -116,14 +182,25 @@ export interface Expense {
splits: ExpenseSplit[]
overall_settlement_status: ExpenseOverallStatusEnum
isRecurring: boolean
is_recurring?: boolean
nextOccurrence?: string
lastOccurrence?: string
recurrencePattern?: RecurrencePattern
parentExpenseId?: number
generatedExpenses?: Expense[]
is_recurring: boolean
next_occurrence?: string | null
last_occurrence?: string | null
recurrence_pattern?: RecurrencePattern
parent_expense_id?: number | null
child_expenses?: Expense[]
}
export type SplitType = 'EQUAL' | 'EXACT_AMOUNTS' | 'PERCENTAGE' | 'SHARES' | 'ITEM_BASED';
export type SettlementStatus = 'unpaid' | 'paid' | 'partially_paid';
// Financial audit log types
export interface FinancialAuditLog {
id: number
timestamp: string
user_id?: number
action_type: string
entity_type: string
entity_id: number
details?: any
user?: UserPublic
}

8
fe/src/types/item.ts
View File

@ -8,9 +8,9 @@ export interface UserReference {
export interface Item {
id: number;
name: string;
quantity?: number | null;
quantity?: string | null;
is_complete: boolean;
price?: string | null; // String representation of Decimal
price?: number | null;
list_id: number;
category_id?: number | null;
created_at: string;
@ -24,4 +24,8 @@ export interface Item {
claimed_by_user_id?: number | null;
claimed_at?: string | null;
claimed_by_user?: UserPublic | null;
// UI-only/optimistic properties
tempId?: string;
updating?: boolean;
shakeError?: boolean;
}

117
fe/src/types/shared.ts Normal file
View File

@ -0,0 +1,117 @@
// fe/src/types/shared.ts
// Unified Data Contract - Shared types between frontend and backend
// This file defines the canonical data structures that both systems must conform to
/**
* Base interfaces that all entities should implement
*/
export interface BaseEntity {
id: number
created_at: string
updated_at: string
version: number
}
export interface SoftDeletableEntity extends BaseEntity {
deleted_at?: string | null
is_deleted: boolean
}
/**
* Real-time WebSocket event structure
*/
export interface WebSocketEvent<T = any> {
event: string
payload: T
timestamp: string
user_id?: number
room?: string
}
/**
* Optimistic update tracking
*/
export interface OptimisticUpdate<T> {
id: string
entity_type: string
entity_id: number
operation: 'create' | 'update' | 'delete'
data: T
timestamp: string
status: 'pending' | 'confirmed' | 'failed'
}
/**
* Conflict resolution data structure
*/
export interface ConflictResolution<T> {
id: string
entity_type: string
entity_id: number
local_version: number
server_version: number
local_data: T
server_data: T
resolution_strategy: 'local' | 'server' | 'merge' | 'manual'
resolved_data?: T
resolved_at?: string
}
/**
* Real-time activity tracking
*/
export interface ActivityEvent {
id: number
user_id: number
user_name: string
group_id?: number
entity_type: string
entity_id: number
action: string
details?: Record<string, any>
timestamp: string
}
/**
* Unified error response structure
*/
export interface APIError {
error: string
message: string
details?: Record<string, any>
code?: string
timestamp: string
}
/**
* Pagination and filtering
*/
export interface PaginationParams {
page: number
limit: number
sort_by?: string
sort_order?: 'asc' | 'desc'
}
export interface PaginatedResponse<T> {
items: T[]
total: number
page: number
limit: number
has_next: boolean
has_prev: boolean
}
/**
* Sync delta for offline support
*/
export interface SyncDelta {
timestamp: string
operations: Array<{
id: string
entity_type: string
operation: 'create' | 'update' | 'delete'
entity_id: number
data?: any
}>
}

180
fe/src/types/unified-chore.ts Normal file
View File

@ -0,0 +1,180 @@
// fe/src/types/unified-chore.ts
// Unified Chore Types - Canonical data contract
import type { BaseEntity } from './shared'
import type { UserPublic } from './user'
/**
* Enums - Use exact backend enum values
*/
export enum ChoreFrequency {
ONE_TIME = 'one_time',
DAILY = 'daily',
WEEKLY = 'weekly',
MONTHLY = 'monthly',
CUSTOM = 'custom'
}
export enum ChoreType {
PERSONAL = 'personal',
GROUP = 'group'
}
export enum ChoreHistoryEventType {
CREATED = 'created',
UPDATED = 'updated',
DELETED = 'deleted',
COMPLETED = 'completed',
REOPENED = 'reopened',
ASSIGNED = 'assigned',
UNASSIGNED = 'unassigned',
REASSIGNED = 'reassigned',
SCHEDULE_GENERATED = 'schedule_generated',
DUE_DATE_CHANGED = 'due_date_changed',
DETAILS_CHANGED = 'details_changed'
}
/**
* Chore History
*/
export interface ChoreHistory extends BaseEntity {
chore_id?: number | null
group_id?: number | null
event_type: ChoreHistoryEventType
event_data?: Record<string, any> | null
changed_by_user_id?: number | null
timestamp: string
changed_by_user?: UserPublic | null
}
export interface ChoreAssignmentHistory extends BaseEntity {
assignment_id: number
event_type: ChoreHistoryEventType
event_data?: Record<string, any> | null
changed_by_user_id?: number | null
timestamp: string
changed_by_user?: UserPublic | null
}
/**
* Chore Assignment
*/
export interface ChoreAssignment extends BaseEntity {
chore_id: number
assigned_to_user_id: number
due_date: string // Date as ISO string
is_complete: boolean
completed_at?: string | null
assigned_user?: UserPublic | null
history: ChoreAssignmentHistory[]
}
export interface ChoreAssignmentCreate {
chore_id: number
assigned_to_user_id: number
due_date: string
}
export interface ChoreAssignmentUpdate {
is_complete?: boolean
due_date?: string
assigned_to_user_id?: number
}
/**
* Main Chore Entity
*/
export interface Chore extends BaseEntity {
name: string
description?: string | null
frequency: ChoreFrequency
custom_interval_days?: number | null
next_due_date: string // Date as ISO string
last_completed_at?: string | null
type: ChoreType
group_id?: number | null
created_by_id: number
parent_chore_id?: number | null
// Relationships
creator?: UserPublic | null
assignments: ChoreAssignment[]
history: ChoreHistory[]
parent_chore?: Chore | null
child_chores: Chore[]
// Computed fields for UI convenience
current_assignment?: ChoreAssignment | null
is_overdue?: boolean
days_until_due?: number
}
export interface ChoreCreate {
name: string
description?: string
frequency: ChoreFrequency
custom_interval_days?: number
next_due_date: string
type: ChoreType
group_id?: number
parent_chore_id?: number
assigned_to_user_id?: number // For creating initial assignment
}
export interface ChoreUpdate {
name?: string
description?: string
frequency?: ChoreFrequency
custom_interval_days?: number
next_due_date?: string
type?: ChoreType
group_id?: number
parent_chore_id?: number
version: number
}
/**
* Enhanced chore with completion tracking (for UI components)
*/
export interface ChoreWithCompletion extends Chore {
current_assignment_id: number | null
is_completed: boolean
completed_at: string | null
assigned_user_name?: string
completed_by_name?: string
assigned_to_user_id?: number | null
updating: boolean
subtext?: string
}
/**
* Time tracking for chores
*/
export interface TimeEntry extends BaseEntity {
chore_assignment_id: number
user_id: number
start_time: string
end_time?: string | null
duration_seconds?: number | null
user?: UserPublic | null
}
export interface TimeEntryCreate {
chore_assignment_id: number
start_time: string
end_time?: string
}
/**
* Real-time events for chores
*/
export interface ChoreRealtimeEvents {
'chore:created': { chore: Chore }
'chore:updated': { chore: Chore }
'chore:deleted': { chore_id: number }
'chore:assigned': { assignment: ChoreAssignment }
'chore:completed': { assignment: ChoreAssignment; completed_by: UserPublic }
'chore:reopened': { assignment: ChoreAssignment }
'chore:editing_started': { chore_id: number; user_id: number; user_name: string }
'chore:editing_stopped': { chore_id: number }
}

193
fe/src/types/unified-expense.ts Normal file
View File

@ -0,0 +1,193 @@
// fe/src/types/unified-expense.ts
// Unified Expense Types - Canonical data contract
import type { BaseEntity } from './shared'
import type { UserPublic } from './user'
/**
* Enums - Use exact backend enum values
*/
export enum SplitType {
EQUAL = 'EQUAL',
EXACT_AMOUNTS = 'EXACT_AMOUNTS',
PERCENTAGE = 'PERCENTAGE',
SHARES = 'SHARES',
ITEM_BASED = 'ITEM_BASED'
}
export enum ExpenseSplitStatus {
UNPAID = 'unpaid',
PARTIALLY_PAID = 'partially_paid',
PAID = 'paid'
}
export enum ExpenseOverallStatus {
UNPAID = 'unpaid',
PARTIALLY_PAID = 'partially_paid',
PAID = 'paid'
}
export enum RecurrenceType {
DAILY = 'DAILY',
WEEKLY = 'WEEKLY',
MONTHLY = 'MONTHLY',
YEARLY = 'YEARLY'
}
/**
* Recurrence Pattern
*/
export interface RecurrencePattern extends BaseEntity {
type: RecurrenceType
interval: number
days_of_week?: string | null // JSON string of array
end_date?: string | null
max_occurrences?: number | null
}
export interface RecurrencePatternCreate {
type: RecurrenceType
interval: number
days_of_week?: number[]
end_date?: string
max_occurrences?: number
}
/**
* Settlement Activity - tracks individual payments against splits
*/
export interface SettlementActivity extends BaseEntity {
expense_split_id: number
paid_by_user_id: number
paid_at: string
amount_paid: string // Decimal as string
created_by_user_id: number
payer?: UserPublic | null
creator?: UserPublic | null
}
export interface SettlementActivityCreate {
expense_split_id: number
paid_by_user_id: number
amount_paid: string
paid_at?: string
}
/**
* Expense Split
*/
export interface ExpenseSplit extends BaseEntity {
expense_id: number
user_id: number
owed_amount: string // Decimal as string
share_percentage?: string | null // Decimal as string
share_units?: number | null
status: ExpenseSplitStatus
paid_at?: string | null
settlement_activities: SettlementActivity[]
user?: UserPublic | null
}
export interface ExpenseSplitCreate {
user_id: number
owed_amount?: string // Decimal as string for precision
share_percentage?: string
share_units?: number
}
/**
* Main Expense Entity
*/
export interface Expense extends BaseEntity {
description: string
total_amount: string // Decimal as string
currency: string
expense_date: string
split_type: SplitType
list_id?: number | null
group_id?: number | null
item_id?: number | null
paid_by_user_id: number
created_by_user_id: number
overall_settlement_status: ExpenseOverallStatus
is_recurring: boolean
next_occurrence?: string | null
last_occurrence?: string | null
parent_expense_id?: number | null
// Relationships
paid_by_user?: UserPublic | null
created_by_user?: UserPublic | null
splits: ExpenseSplit[]
recurrence_pattern?: RecurrencePattern | null
generated_expenses?: Expense[]
}
export interface ExpenseCreate {
description: string
total_amount: string // Use string for decimal precision
currency?: string
expense_date?: string
split_type: SplitType
list_id?: number
group_id?: number
item_id?: number
paid_by_user_id: number
is_recurring?: boolean
recurrence_pattern?: RecurrencePatternCreate
splits_in?: ExpenseSplitCreate[]
}
export interface ExpenseUpdate {
description?: string
total_amount?: string
currency?: string
expense_date?: string
split_type?: SplitType
list_id?: number
group_id?: number
item_id?: number
version: number
is_recurring?: boolean
recurrence_pattern?: RecurrencePatternCreate
next_occurrence?: string
}
/**
* Settlement between users
*/
export interface Settlement extends BaseEntity {
group_id: number
paid_by_user_id: number
paid_to_user_id: number
amount: string // Decimal as string
settlement_date: string
description?: string | null
created_by_user_id: number
payer?: UserPublic | null
payee?: UserPublic | null
created_by_user?: UserPublic | null
}
export interface SettlementCreate {
group_id: number
paid_by_user_id: number
paid_to_user_id: number
amount: string
settlement_date?: string
description?: string
}
/**
* Real-time events for expenses
*/
export interface ExpenseRealtimeEvents {
'expense:created': { expense: Expense }
'expense:updated': { expense: Expense }
'expense:deleted': { expense_id: number }
'expense:split_settled': { expense_id: number; split_id: number; settlement: SettlementActivity }
'expense:editing_started': { expense_id: number; user_id: number; user_name: string; field?: string }
'expense:editing_stopped': { expense_id: number }
'settlement:created': { settlement: Settlement }
'settlement:updated': { settlement: Settlement }
}

135
fe/src/types/unified-group.ts Normal file
View File

@ -0,0 +1,135 @@
// fe/src/types/unified-group.ts
// Unified Group/Household Types - Canonical data contract
import type { BaseEntity } from './shared'
import type { UserPublic } from './user'
import type { ChoreHistory } from './unified-chore'
/**
* Enums
*/
export enum UserRole {
OWNER = 'owner',
MEMBER = 'member'
}
/**
* User-Group Association
*/
export interface UserGroup extends BaseEntity {
user_id: number
group_id: number
role: UserRole
joined_at: string
user?: UserPublic | null
}
/**
* Group/Household Entity
*/
export interface Group extends BaseEntity {
name: string
description?: string | null
created_by_id: number
creator?: UserPublic | null
member_associations: UserGroup[]
chore_history: ChoreHistory[]
// Computed properties
members: UserPublic[]
member_count: number
is_member?: boolean // Whether current user is a member
}
// Type alias for consistency with existing code
export type GroupPublic = Group
export type Household = Group
export interface GroupCreate {
name: string
description?: string
}
export interface GroupUpdate {
name?: string
description?: string
version: number
}
/**
* Invite Management
*/
export interface Invite extends BaseEntity {
code: string
group_id: number
created_by_id: number
expires_at: string
is_active: boolean
usage_count?: number
max_uses?: number
group?: Group | null
creator?: UserPublic | null
}
export interface InviteCreate {
group_id: number
expires_at?: string
max_uses?: number
}
/**
* Member activity tracking
*/
export interface MemberActivity {
user_id: number
last_seen: string
is_active: boolean
current_action?: string
}
/**
* Group health metrics
*/
export interface GroupHealth {
score: number // 0-100
status: 'excellent' | 'good' | 'needs-attention'
active_members: number
total_members: number
metrics: {
engagement_rate: number
completion_rate: number
collaboration_score: number
}
}
/**
* Real-time events for groups
*/
export interface GroupRealtimeEvents {
'group:updated': { group: Group }
'group:member_joined': { group_id: number; member: UserPublic }
'group:member_left': { group_id: number; user_id: number }
'group:member_activity': { user_id: number; last_seen: string; is_active: boolean; action?: string }
'group:invite_created': { code: string; expires_at: string }
'group:invite_used': { code: string; new_member: UserPublic }
}
/**
* Group settings and preferences
*/
export interface GroupSettings {
group_id: number
theme?: string
language?: string
timezone?: string
notifications: {
chore_reminders: boolean
expense_notifications: boolean
activity_updates: boolean
}
features: {
chore_rotation: boolean
expense_splitting: boolean
time_tracking: boolean
}
}

268
fe/src/utils/advancedPerformance.ts Normal file
View File

@ -0,0 +1,268 @@
// Advanced performance utilities for optimization and user experience enhancement
/**
* Preload critical resources for improved perceived performance
*/
export const preloadManager = {
// Track preloaded resources to avoid duplicates
preloadedResources: new Set<string>(),
/**
* Preload a route component for instant navigation
*/
preloadRoute(routeName: string) {
if (this.preloadedResources.has(routeName)) return
// Dynamic import based on route name
const routeMap: Record<string, () => Promise<any>> = {
'lists': () => import('@/pages/ListsPage.vue'),
'list-detail': () => import('@/pages/ListDetailPage.vue'),
'expenses': () => import('@/pages/ExpensesPage.vue'),
'chores': () => import('@/pages/ChoresPage.vue'),
'groups': () => import('@/pages/GroupsPage.vue'),
'account': () => import('@/pages/AccountPage.vue'),
}
const preloader = routeMap[routeName]
if (preloader) {
preloader().then(() => {
this.preloadedResources.add(routeName)
console.log(`[Performance] Preloaded route: ${routeName}`)
}).catch(error => {
console.warn(`[Performance] Failed to preload route ${routeName}:`, error)
})
}
},
/**
* Preload the most likely next routes based on current page
*/
preloadLikelyRoutes(currentRoute: string) {
const routePredictions: Record<string, string[]> = {
'dashboard': ['lists', 'expenses', 'chores'],
'lists': ['list-detail', 'expenses'],
'list-detail': ['expenses'],
'expenses': ['lists'],
'chores': ['lists'],
'groups': ['account'],
}
const routes = routePredictions[currentRoute] || []
routes.forEach(route => this.preloadRoute(route))
},
/**
* Preload images that are likely to be shown soon
*/
preloadImages(imageUrls: string[]) {
imageUrls.forEach(url => {
if (this.preloadedResources.has(url)) return
const link = document.createElement('link')
link.rel = 'preload'
link.as = 'image'
link.href = url
document.head.appendChild(link)
this.preloadedResources.add(url)
})
}
}
/**
* Lazy loading utilities with intersection observer
*/
export const lazyLoader = {
observer: null as IntersectionObserver | null,
/**
* Initialize intersection observer for lazy loading
*/
init() {
if (this.observer || typeof window === 'undefined') return
this.observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const element = entry.target as HTMLElement
const callback = element.dataset.lazyCallback
if (callback && (window as any)[callback]) {
(window as any)[callback](element)
this.observer?.unobserve(element)
}
}
})
},
{
rootMargin: '50px 0px', // Start loading 50px before element comes into view
threshold: 0.1
}
)
},
/**
* Observe an element for lazy loading
*/
observe(element: HTMLElement, callback: (el: HTMLElement) => void) {
if (!this.observer) this.init()
// Store callback globally (simple approach)
const callbackName = `lazyCallback_${Date.now()}_${Math.random().toString(36).substring(2)}`
; (window as any)[callbackName] = callback
element.dataset.lazyCallback = callbackName
this.observer?.observe(element)
},
/**
* Lazy load images with fade-in effect
*/
lazyLoadImage(img: HTMLImageElement, src: string) {
this.observe(img, (element) => {
const imgEl = element as HTMLImageElement
imgEl.style.opacity = '0'
imgEl.style.transition = 'opacity 0.3s ease-in-out'
imgEl.onload = () => {
imgEl.style.opacity = '1'
}
imgEl.src = src
})
}
}
/**
* Cache management for API responses and assets
*/
export const cacheManager = {
// In-memory cache for API responses
apiCache: new Map<string, { data: any; timestamp: number; ttl: number }>(),
/**
* Cache an API response with TTL
*/
cacheApiResponse(key: string, data: any, ttlMs: number = 5 * 60 * 1000) {
this.apiCache.set(key, {
data,
timestamp: Date.now(),
ttl: ttlMs
})
},
/**
* Get cached API response if still valid
*/
getCachedApiResponse(key: string): any | null {
const cached = this.apiCache.get(key)
if (!cached) return null
const isExpired = Date.now() - cached.timestamp > cached.ttl
if (isExpired) {
this.apiCache.delete(key)
return null
}
return cached.data
},
/**
* Clear expired cache entries
*/
clearExpiredCache() {
const now = Date.now()
for (const [key, cached] of this.apiCache.entries()) {
if (now - cached.timestamp > cached.ttl) {
this.apiCache.delete(key)
}
}
},
/**
* Get cache statistics
*/
getCacheStats() {
return {
size: this.apiCache.size,
memoryUsage: JSON.stringify([...this.apiCache.entries()]).length
}
}
}
/**
* Bundle size optimization utilities
*/
export const bundleOptimizer = {
/**
* Track which features are actually used
*/
featureUsage: new Map<string, number>(),
/**
* Mark a feature as used
*/
markFeatureUsed(featureName: string) {
const count = this.featureUsage.get(featureName) || 0
this.featureUsage.set(featureName, count + 1)
},
/**
* Get usage statistics for bundle optimization
*/
getUsageStats() {
return Object.fromEntries(this.featureUsage.entries())
},
/**
* Dynamic import with error handling and fallback
*/
async dynamicImport<T>(importFn: () => Promise<T>, fallback?: T): Promise<T> {
try {
const startTime = performance.now()
const module = await importFn()
const duration = performance.now() - startTime
console.log(`[Bundle] Dynamic import completed in ${duration.toFixed(2)}ms`)
return module
} catch (error) {
console.error('[Bundle] Dynamic import failed:', error)
if (fallback !== undefined) {
return fallback
}
throw error
}
}
}
/**
* Initialize performance optimizations
*/
export function initAdvancedPerformanceOptimizations() {
// Initialize lazy loader
lazyLoader.init()
// Clear expired cache every 10 minutes
setInterval(() => {
cacheManager.clearExpiredCache()
}, 10 * 60 * 1000)
// Preload likely routes after initial page load
setTimeout(() => {
const currentPath = window.location.pathname
const routeName = currentPath.split('/')[1] || 'dashboard'
preloadManager.preloadLikelyRoutes(routeName)
}, 1000)
console.log('[Performance] Advanced performance optimizations initialized')
}
// Export all utilities as default
export default {
preloadManager,
lazyLoader,
cacheManager,
bundleOptimizer,
initAdvancedPerformanceOptimizations
}

3
fe/src/utils/performance.ts
View File

@ -394,5 +394,4 @@ export function createPerformanceBudget(budgets: Record<string, number>) {
};
}
export { performanceMonitor };
export default performanceMonitor;
export { performanceMonitor };

1
fe/tailwind.config.ts
View File

@ -102,6 +102,7 @@ const config: Config = {
'text-tertiary': '#94a3b8', // neutral-400
// Border primary alias (light)
'border-primary': '#bfdbfe', // primary-200
'border-primary-hover': '#93c5fd', // primary-300
},
spacing: {
// Design system spacing (base unit: 4px)