Merge pull request 'show-most-recent-feeding-session' (#39) from show-most-recent-feeding-session into main

Reviewed-on: #39

.gitea/workflows/refresh_showcase_data.yml

@@ -0,0 +1,43 @@
+name: Refresh Showcase Data
+
+on:
+  schedule:
+    # Run daily at 3 AM UTC
+    - cron: "0 3 * * *"
+  workflow_dispatch: # Allow manual triggering
+
+jobs:
+  refresh-data:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ vars.PYTHON_VERSION }}
+
+      - name: Install uv
+        run: curl -LsSf https://astral.sh/uv/install.sh | sh
+
+      - name: Install dependencies
+        run: |
+          uv sync --no-dev --all-extras
+
+      - name: Run showcase data seeding script
+        env:
+          ADMIN_USERNAME: ${{ secrets.ADMIN_USERNAME }}
+          ADMIN_PASSWORD: ${{ secrets.ADMIN_PASSWORD }}
+          POSTGRES_URI: ${{ secrets.POSTGRES_URI }}
+        run: |
+          uv run python scripts/seed_showcase_data.py
+
+      - name: Notify on success
+        if: success()
+        run: echo "✅ Showcase data refreshed successfully"
+
+      - name: Notify on failure
+        if: failure()
+        run: echo "❌ Failed to refresh showcase data"

README.md

@@ -81,14 +81,14 @@ uv run uvicorn src.baby_monitor.main:app --reload --host 0.0.0.0 --port 8000
 
 ### Environment Variables
 
-| Variable         | Default      | Description                                   |
+| Variable         | Default      | Description                                    |
-| ---------------- | ------------ | --------------------------------------------- |
+| ---------------- | ------------ | ---------------------------------------------- |
-| `ENVIRONMENT`    | `production` | Set to `development` to enable API docs       |
+| `ENVIRONMENT`    | `production` | Set to `development` to enable API docs        |
-| `ADMIN_PASSWORD` | _(required)_ | Admin user password                           |
+| `ADMIN_PASSWORD` | _(required)_ | Admin user password                            |
-| `ADMIN_USERNAME` | `admin`      | Admin username                                |
+| `ADMIN_USERNAME` | `admin`      | Admin username                                 |
-| `DATA_DIR`       | `/data`      | Directory for SQLite database (SQLite only)   |
+| `DATA_DIR`       | `/data`      | Directory for SQLite database (SQLite only)    |
-| `REDIS_URI`      | _(optional)_ | Redis connection URI for distributed tokens   |
+| `REDIS_URI`      | _(optional)_ | Redis connection URI for distributed tokens    |
-| `POSTGRES_URI`   | _(optional)_ | PostgreSQL connection URI for database storage|
+| `POSTGRES_URI`   | _(optional)_ | PostgreSQL connection URI for database storage |
 
 ### Storage Options
 

docker-compose.prod.yml

@@ -51,7 +51,7 @@ services:
       interval: 10s
       timeout: 5s
       retries: 5
-      start_period: 10s
+      start_period: 3s
 volumes:
   redis-data:
   pgdata:

pyproject.toml

@@ -71,3 +71,7 @@ markers = [
 [[tool.mypy.overrides]]
 module = "redis.*"
 ignore_missing_imports = true
+
+[[tool.mypy.overrides]]
+module = "showcase_data_definitions.*"
+ignore_missing_imports = true

scripts/seed_showcase_data.py

@@ -0,0 +1,185 @@
+"""Seed test data into the database for demo purposes."""
+
+import sys
+from pathlib import Path
+from datetime import datetime
+
+# Add parent directory to path to import baby_monitor modules
+sys.path.insert(0, str(Path(__file__).parent.parent / "src"))
+
+# Import after path is set up
+from baby_monitor.repositories.dependencies.get_database import (  # noqa: E402
+    get_database,
+    init_db,
+)
+from baby_monitor.repositories.user.sqlite_user import (  # noqa: E402
+    DatabaseUserRepository,
+)
+from baby_monitor.repositories.child.sqlite_child import (  # noqa: E402
+    DatabaseChildRepository,
+)
+from baby_monitor.repositories.feeding.sqlite_feeding import (  # noqa: E402
+    DatabaseFeedingRepository,
+)
+from baby_monitor.repositories.diaper_change.sqlite_diaper_change import (  # noqa: E402, E501
+    DatabaseDiaperChangeRepository,
+)
+from baby_monitor.repositories.sleep.sqlite_sleep import (  # noqa: E402
+    DatabaseSleepRepository,
+)
+from baby_monitor.routers.auth import hash_password  # noqa: E402
+from showcase_data_definitions import generate_showcase_data  # noqa: E402
+
+
+def seed_database(reference_time: datetime | None = None) -> None:
+    """
+    Seed the database with test data.
+
+    This function is idempotent - it will check if test users exist
+    and either create them or update timestamps of existing data.
+
+    Args:
+        reference_time: The "now" time to use for generating timestamps.
+            Defaults to current time.
+    """
+    # Initialize database
+    init_db()
+    db = next(get_database())
+
+    try:
+        # Initialize repositories
+        user_repo = DatabaseUserRepository(db)
+        child_repo = DatabaseChildRepository(db)
+        feeding_repo = DatabaseFeedingRepository(db)
+        diaper_repo = DatabaseDiaperChangeRepository(db)
+        sleep_repo = DatabaseSleepRepository(db)
+
+        # Generate showcase data
+        test_data = generate_showcase_data(reference_time)
+
+        print("Starting database seeding...")
+        print(f"Reference time: {test_data['reference_time']}")
+
+        # Create or get showcase users
+        user_ids = []
+        for user_data in test_data["users"]:
+            # Check if user exists
+            existing_user = user_repo.get_by_username(user_data["username"])
+
+            if existing_user:
+                print(f"✓ User '{user_data['username']}' already exists")
+                user_ids.append(existing_user["id"])
+            else:
+                # Create new user
+                hashed_pw = hash_password(user_data["password"])
+                user_id = user_repo.create(
+                    username=user_data["username"],
+                    hashed_password=hashed_pw,
+                )
+                user_ids.append(user_id["id"])
+                print(f"✓ Created user '{user_data['username']}'")
+
+        # Create or get shared child
+        child_data = test_data["child"]
+
+        # Check if child exists for first user
+        existing_children = child_repo.get_by_user_id(user_ids[0])
+        child_id: int | None = None
+
+        # Look for existing child with matching name
+        for child in existing_children:
+            if child["name"] == child_data["name"]:
+                child_id = child["id"]
+                print(f"✓ Child '{child_data['name']}' already exists")
+                break
+
+        if child_id is None:
+            # Create new child
+            created_child = child_repo.create(
+                name=child_data["name"],
+                birth_time=child_data["birth_time"],
+                birth_weight=child_data["birth_weight"],
+                user_id=user_ids[0],
+            )
+            child_id = created_child["id"]
+            print(f"✓ Created child '{child_data['name']}'")
+
+        # Ensure child_id is set
+        assert child_id is not None, "Child ID must be set at this point"
+
+        # Share child with second user if not already shared
+        parent_ids = child_repo.get_parent_ids(child_id)
+        if user_ids[1] not in parent_ids:
+            child_repo.add_parent(child_id, user_ids[1])
+            msg = f"✓ Shared child with '{test_data['users'][1]['username']}'"
+            print(msg)
+
+        # Clear existing logs to avoid duplicates
+        print("Clearing existing logs...")
+
+        # Get all logs for this child
+        existing_feedings = feeding_repo.get_by_child_id(child_id)
+        for feeding in existing_feedings:
+            feeding_repo.delete(feeding["id"])
+
+        existing_diapers = diaper_repo.get_by_child_id(child_id)
+        for diaper in existing_diapers:
+            diaper_repo.delete(diaper["id"])
+
+        existing_sleep = sleep_repo.get_by_child_id(child_id)
+        for sleep in existing_sleep:
+            sleep_repo.delete(sleep["id"])
+
+        print("✓ Cleared existing logs")
+
+        # Add feeding logs
+        print(f"Adding {len(test_data['feedings'])} feeding logs...")
+        for feeding in test_data["feedings"]:
+            feeding_repo.create(
+                child_id=child_id,
+                start_time=feeding["start_time"],
+                end_time=feeding["end_time"],
+                feeding_type=feeding["feeding_type"],
+            )
+        print(f"✓ Added {len(test_data['feedings'])} feedings")
+
+        # Add diaper changes
+        print(f"Adding {len(test_data['diapers'])} diaper changes...")
+        for diaper in test_data["diapers"]:
+            diaper_repo.create(
+                child_id=child_id,
+                change_time=diaper["time"],
+                poop_color=diaper.get("poop_color"),
+                poop_amount=diaper.get("poop_amount"),
+                pee_color=diaper.get("pee_color"),
+                pee_amount=diaper.get("pee_amount"),
+            )
+        print(f"✓ Added {len(test_data['diapers'])} diaper changes")
+
+        # Add sleep sessions
+        print(f"Adding {len(test_data['sleep'])} sleep sessions...")
+        for sleep in test_data["sleep"]:
+            sleep_repo.create(
+                child_id=child_id,
+                start_time=sleep["start_time"],
+                end_time=sleep["end_time"],
+            )
+        print(f"✓ Added {len(test_data['sleep'])} sleep sessions")
+
+        db.commit()
+        print("\n✅ Database seeding completed successfully!")
+        print("\nTest user credentials:")
+        print(f"  Username: {test_data['users'][0]['username']}")
+        print(f"  Password: {test_data['users'][0]['password']}")
+        print("  (Both users share the same password)")
+
+    except Exception as e:
+        db.rollback()
+        print(f"\n❌ Error seeding database: {e}")
+        raise
+    finally:
+        db.close()
+
+
+if __name__ == "__main__":
+    seed_database()

scripts/showcase_data_definitions.py

@@ -0,0 +1,278 @@
+"""Definition of showcase data to be used for presenting the app."""
+
+from datetime import datetime, timedelta
+import random
+
+# User credentials
+SHOWCASE_USERS = [
+    {
+        "username": "user",
+        "password": "demo123",  # Will be hashed when inserted
+    },
+    {
+        "username": "user2",
+        "password": "demo123",  # Will be hashed when inserted
+    },
+]
+
+# Shared child (14 days old)
+CHILD_AGE_DAYS = 14
+
+
+def get_child_data(reference_time: datetime) -> dict:
+    """Get child data with birth time relative to reference time."""
+    birth_time = reference_time - timedelta(days=CHILD_AGE_DAYS)
+    return {
+        "name": "Emma Rose",
+        "birth_time": birth_time,
+        "birth_weight": 3420,  # grams (7.5 lbs)
+    }
+
+
+def get_feeding_schedule(reference_time: datetime) -> list[dict]:
+    """
+    Generate realistic feeding schedule for the last 14 days.
+
+    Newborns feed every 2-3 hours initially, gradually spacing out
+    to 3-4 hours.
+    """
+    feedings: list[dict] = []
+    current_time = reference_time - timedelta(days=CHILD_AGE_DAYS)
+    end_time = reference_time
+
+    feeding_types = ["left_breast", "right_breast", "bottle"]
+
+    # Day-by-day feeding patterns
+    day_number = 0
+    while current_time < end_time:
+        age_in_days = day_number
+
+        # Newborns feed more frequently
+        if age_in_days < 3:
+            interval_hours = random.uniform(2, 2.5)
+            duration_minutes = random.randint(15, 25)
+        elif age_in_days < 7:
+            interval_hours = random.uniform(2.5, 3)
+            duration_minutes = random.randint(20, 30)
+        else:
+            interval_hours = random.uniform(3, 3.5)
+            duration_minutes = random.randint(20, 35)
+
+        # Alternate between breasts and occasional bottle
+        if random.random() < 0.2:  # 20% bottle feeding
+            feeding_type = "bottle"
+        else:
+            # Alternate breasts
+            feeding_type = feeding_types[len(feedings) % 2]
+
+        start_time = current_time
+        end_time_feeding = start_time + timedelta(minutes=duration_minutes)
+
+        feedings.append(
+            {
+                "start_time": start_time,
+                "end_time": end_time_feeding,
+                "feeding_type": feeding_type,
+            }
+        )
+
+        current_time += timedelta(hours=interval_hours)
+
+        # Move to next day
+        prev_date = (current_time - timedelta(hours=interval_hours)).date()
+        if current_time.date() != prev_date:
+            day_number += 1
+
+    return feedings
+
+
+def get_diaper_changes(reference_time: datetime) -> list[dict]:
+    """
+    Generate realistic diaper changes for the last 14 days.
+
+    - First 2-3 days: Black/dark (meconium), minimal pee
+    - Days 3-5: Transition to yellow, more frequent
+    - Days 5+: Regular yellow stools, normal pee patterns
+    - 8-10 diaper changes per day initially, settling to 6-8
+    """
+    diapers = []
+    current_time = reference_time - timedelta(days=CHILD_AGE_DAYS)
+    end_time = reference_time
+
+    day_number = 0
+
+    while current_time < end_time:
+        age_in_days = day_number
+
+        # Determine number of diaper changes per day based on age
+        if age_in_days < 3:
+            changes_per_day = random.randint(8, 10)
+        elif age_in_days < 7:
+            changes_per_day = random.randint(7, 9)
+        else:
+            changes_per_day = random.randint(6, 8)
+
+        # Distribute changes throughout the day
+        day_start = current_time.replace(hour=0, minute=0, second=0, microsecond=0)
+        day_end = day_start + timedelta(days=1)
+
+        for _ in range(changes_per_day):
+            # Random time during the day
+            random_seconds = random.randint(0, 86400)
+            change_time = day_start + timedelta(seconds=random_seconds)
+
+            if change_time >= end_time:
+                break
+
+            # Determine diaper contents
+            has_poop = random.random() < 0.4  # 40% have poop
+            # 90% have pee, or always if no poop
+            has_pee = random.random() < 0.9 or not has_poop
+
+            diaper = {
+                "time": change_time,
+                "has_poop": has_poop,
+                "has_pee": has_pee,
+            }
+
+            # Poop characteristics based on age
+            if has_poop:
+                if age_in_days < 2:
+                    # Meconium phase
+                    diaper["poop_color"] = "black"
+                    diaper["poop_amount"] = "light"
+                elif age_in_days < 4:
+                    # Transition phase
+                    colors = ["black", "green", "yellow"]
+                    diaper["poop_color"] = random.choice(colors)
+                    amounts = ["light", "medium"]
+                    diaper["poop_amount"] = random.choice(amounts)
+                else:
+                    # Normal phase
+                    colors = ["yellow", "yellow", "yellow", "green"]
+                    diaper["poop_color"] = random.choice(colors)
+                    # Amount increases with age
+                    if age_in_days < 7:
+                        amounts = ["light", "medium"]
+                        diaper["poop_amount"] = random.choice(amounts)
+                    else:
+                        amounts = ["medium", "heavy"]
+                        diaper["poop_amount"] = random.choice(amounts)
+
+            # Pee characteristics based on age
+            if has_pee:
+                if age_in_days < 2:
+                    # Very light pee initially
+                    diaper["pee_amount"] = "light"
+                    diaper["pee_color"] = random.choice(["clear", "yellow"])
+                elif age_in_days < 5:
+                    # Increasing output
+                    diaper["pee_amount"] = random.choice(["light", "medium"])
+                    diaper["pee_color"] = random.choice(["clear", "yellow"])
+                else:
+                    # Normal output
+                    if age_in_days < 10:
+                        amounts = ["medium", "medium", "heavy"]
+                        diaper["pee_amount"] = random.choice(amounts)
+                    else:
+                        amounts = ["medium", "heavy", "heavy"]
+                        diaper["pee_amount"] = random.choice(amounts)
+                    colors = ["clear", "yellow", "yellow"]
+                    diaper["pee_color"] = random.choice(colors)
+
+            diapers.append(diaper)
+
+        day_number += 1
+        current_time = day_end
+
+    # Sort by time (type: ignore for mypy - we know time is datetime)
+    diapers.sort(
+        key=lambda x: x["time"]  # type: ignore[arg-type,return-value]
+    )
+    return diapers
+
+
+def get_sleep_sessions(reference_time: datetime) -> list[dict]:
+    """
+    Generate realistic sleep patterns for the last 14 days.
+
+    Newborns sleep 16-18 hours per day in short bursts (30min - 4 hours).
+    Sleep gradually consolidates over time.
+    """
+    sleep_sessions = []
+    current_time = reference_time - timedelta(days=CHILD_AGE_DAYS)
+    end_time = reference_time
+
+    day_number = 0
+
+    while current_time < end_time:
+        age_in_days = day_number
+
+        # Sleep patterns evolve with age
+        if age_in_days < 3:
+            # Very short, frequent naps
+            avg_wake_time = 1.5  # hours
+            sleep_duration_range = (30, 120)  # minutes
+        elif age_in_days < 7:
+            # Slightly longer sleep periods
+            avg_wake_time = 2
+            sleep_duration_range = (45, 180)
+        else:
+            # More consolidated sleep
+            avg_wake_time = 2.5
+            sleep_duration_range = (60, 240)
+
+        # Random wake time with variation
+        wake_minutes = random.randint(int(avg_wake_time * 45), int(avg_wake_time * 75))
+
+        # Sleep start time
+        start_time = current_time + timedelta(minutes=wake_minutes)
+
+        if start_time >= end_time:
+            break
+
+        # Sleep duration
+        duration_minutes = random.randint(*sleep_duration_range)
+
+        # Longer sleep at night
+        if 20 <= start_time.hour or start_time.hour < 6:
+            duration_minutes = int(duration_minutes * 1.3)
+
+        end_time_sleep = start_time + timedelta(minutes=duration_minutes)
+
+        sleep_sessions.append(
+            {
+                "start_time": start_time,
+                "end_time": end_time_sleep,
+            }
+        )
+
+        current_time = end_time_sleep
+        birth_time = reference_time - timedelta(days=CHILD_AGE_DAYS)
+        day_number = (current_time - birth_time).days
+
+    return sleep_sessions
+
+
+def generate_showcase_data(reference_time: datetime | None = None) -> dict:
+    """
+    Generate all test data with timestamps relative to reference time.
+
+    Args:
+        reference_time: The "now" time to use as reference.
+            Defaults to current time.
+
+    Returns:
+        Dictionary containing all test data
+    """
+    if reference_time is None:
+        reference_time = datetime.now()
+
+    return {
+        "users": SHOWCASE_USERS,
+        "child": get_child_data(reference_time),
+        "feedings": get_feeding_schedule(reference_time),
+        "diapers": get_diaper_changes(reference_time),
+        "sleep": get_sleep_sessions(reference_time),
+        "reference_time": reference_time,
+    }

src/baby_monitor/main.py

@@ -119,6 +119,12 @@ def serve_sleep() -> FileResponse:
     return FileResponse(static_path / "sleep.html")
 
 
+@app.get("/log-sleep.html", include_in_schema=False)
+def serve_log_sleep() -> FileResponse:
+    """Serve the log sleep page."""
+    return FileResponse(static_path / "log-sleep.html")
+
+
 @app.get("/settings.html", include_in_schema=False)
 def serve_settings() -> FileResponse:
     """Serve the settings page."""

src/baby_monitor/models/child.py

@@ -20,3 +20,5 @@ class ChildResponse(BaseModel):
     birth_time: datetime
     birth_weight: float
     created_at: datetime
+    parent_count: int | None = None
+    parent_usernames: list[str] | None = None

src/baby_monitor/models/sleep.py

@@ -9,6 +9,7 @@ class CreateSleepRequest(BaseModel):
 
     child_id: int = Field(..., gt=0)
     start_time: datetime
+    end_time: datetime | None = None
 
 
 class UpdateSleepRequest(BaseModel):

src/baby_monitor/repositories/child/sqlite_child.py

@@ -15,7 +15,7 @@ from baby_monitor.models.db.child_parent import ChildParent
 
 class DatabaseChildRepository(ChildRepositoryInterface):
     """Database implementation for child data access.
-    
+
     Works with both SQLite and PostgreSQL databases.
     """
 

src/baby_monitor/repositories/child_invitation/sqlite_child_invitation.py

@@ -15,7 +15,7 @@ from baby_monitor.repositories.interfaces import (
 
 class DatabaseChildInvitationRepository(ChildInvitationRepositoryInterface):
     """Database implementation of child invitation repository.
-    
+
     Works with both SQLite and PostgreSQL databases.
     """
 
@@ -26,10 +26,10 @@ class DatabaseChildInvitationRepository(ChildInvitationRepositoryInterface):
     def _get_now_utc(self, reference_dt: datetime) -> datetime:
         """
         Get current UTC time matching the timezone awareness of reference.
-        
+
         Args:
             reference_dt: A datetime from DB to match timezone format
-        
+
         Returns:
             Current UTC time (naive for SQLite, aware for PostgreSQL)
         """
@@ -84,9 +84,7 @@ class DatabaseChildInvitationRepository(ChildInvitationRepositoryInterface):
     def verify_invitation(self, code: str) -> bool:
         """Verify if an invitation code is valid and not expired."""
         invitation = (
-            self.db.query(ChildInvitation)
+            self.db.query(ChildInvitation).filter(ChildInvitation.code == code).first()
-            .filter(ChildInvitation.code == code)
-            .first()
         )
 
         if not invitation:

src/baby_monitor/repositories/dependencies/get_token_repository.py

@@ -6,7 +6,7 @@ import logging
 from baby_monitor.repositories.interfaces import (
     TokenRepositoryInterface,
 )
-from baby_monitor.repositories.token.memory_token import (
+from baby_monitor.repositories.token import (
     InMemoryTokenRepository,
 )
 
@@ -43,7 +43,7 @@ def _initialize_token_repository() -> TokenRepositoryInterface:
         ) from e
 
     try:
-        from baby_monitor.repositories.token.redis_token import (
+        from baby_monitor.repositories.token import (
             RedisTokenRepository,
         )
 

src/baby_monitor/repositories/diaper_change/sqlite_diaper_change.py

@@ -16,7 +16,7 @@ from baby_monitor.models.db.child_parent import ChildParent
 
 class DatabaseDiaperChangeRepository(DiaperChangeRepositoryInterface):
     """Database implementation for diaper change log data access.
-    
+
     Works with both SQLite and PostgreSQL databases.
     """
 

src/baby_monitor/repositories/feeding/sqlite_feeding.py

@@ -16,7 +16,7 @@ from baby_monitor.models.db.child_parent import ChildParent
 
 class DatabaseFeedingRepository(FeedingRepositoryInterface):
     """Database implementation for feeding log data access.
-    
+
     Works with both SQLite and PostgreSQL databases.
     """
 

src/baby_monitor/repositories/interfaces/sleep_repository_interface.py

@@ -12,6 +12,7 @@ class SleepRepositoryInterface(ABC):
         self,
         child_id: int,
         start_time: datetime,
+        end_time: datetime | None = None,
     ) -> dict:
         """Create a new sleep log entry."""
 

src/baby_monitor/repositories/invitation/sqlite_invitation.py

@@ -19,7 +19,7 @@ from baby_monitor.repositories.interfaces import (
 
 class DatabaseInvitationRepository(InvitationRepositoryInterface):
     """Database implementation for managing invitation tokens.
-    
+
     Works with both SQLite and PostgreSQL databases.
     """
 
@@ -30,10 +30,10 @@ class DatabaseInvitationRepository(InvitationRepositoryInterface):
     def _get_now_utc(self, reference_dt: datetime) -> datetime:
         """
         Get current UTC time matching the timezone awareness of reference.
-        
+
         Args:
             reference_dt: A datetime from DB to match timezone format
-        
+
         Returns:
             Current UTC time (naive for SQLite, aware for PostgreSQL)
         """
@@ -82,9 +82,7 @@ class DatabaseInvitationRepository(InvitationRepositoryInterface):
         Returns:
             True if valid and not consumed, False otherwise
         """
-        invitation = self.db.query(Invitation).filter(
+        invitation = self.db.query(Invitation).filter(Invitation.token == token).first()
-            Invitation.token == token
-        ).first()
 
         if not invitation:
             return False
@@ -110,9 +108,7 @@ class DatabaseInvitationRepository(InvitationRepositoryInterface):
         Returns:
             True if successfully consumed, False if invalid or already used
         """
-        invitation = self.db.query(Invitation).filter(
+        invitation = self.db.query(Invitation).filter(Invitation.token == token).first()
-            Invitation.token == token
-        ).first()
 
         if not invitation:
             return False
@@ -143,8 +139,6 @@ class DatabaseInvitationRepository(InvitationRepositoryInterface):
         else:
             # No invitations, use naive UTC (safe default)
             now_utc = datetime.now(UTC).replace(tzinfo=None)
-        
+
-        self.db.query(Invitation).filter(
+        self.db.query(Invitation).filter(Invitation.expires_at < now_utc).delete()
-            Invitation.expires_at < now_utc
-        ).delete()
         self.db.commit()

src/baby_monitor/repositories/sleep/sqlite_sleep.py

@@ -16,7 +16,7 @@ from baby_monitor.models.db.child_parent import ChildParent
 
 class DatabaseSleepRepository(SleepRepositoryInterface):
     """Database implementation for sleep log data access.
-    
+
     Works with both SQLite and PostgreSQL databases.
     """
 
@@ -27,12 +27,13 @@ class DatabaseSleepRepository(SleepRepositoryInterface):
         self,
         child_id: int,
         start_time: datetime,
+        end_time: datetime | None = None,
     ) -> dict:
         """Create a new sleep log entry."""
         sleep = Sleep(
             child_id=child_id,
             start_time=start_time,
-            end_time=None,
+            end_time=end_time,
         )
         self.db.add(sleep)
         self.db.commit()

src/baby_monitor/repositories/token/__init__.py

@@ -0,0 +1,11 @@
+"""Token repository implementations and configurations."""
+
+from .default_ttl import DEFAULT_TTL
+from .memory_token import InMemoryTokenRepository
+from .redis_token import RedisTokenRepository
+
+__all__ = [
+    "DEFAULT_TTL",
+    "InMemoryTokenRepository",
+    "RedisTokenRepository",
+]

src/baby_monitor/repositories/token/default_ttl.py

@@ -0,0 +1,3 @@
+"""Definition of Token default TTL."""
+
+DEFAULT_TTL = 28800  # seconds -> 8 hours

src/baby_monitor/repositories/token/memory_token.py

@@ -3,6 +3,7 @@
 from datetime import datetime, timedelta, UTC
 
 from baby_monitor.repositories.interfaces import TokenRepositoryInterface
+from baby_monitor.repositories.token import DEFAULT_TTL
 
 
 class InMemoryTokenRepository(TokenRepositoryInterface):
@@ -17,13 +18,16 @@ class InMemoryTokenRepository(TokenRepositoryInterface):
         # token -> (user_id, expiry_time)
         self._tokens: dict[str, tuple[int, datetime]] = {}
 
-    def store(self, token: str, user_id: int, ttl: int = 3600) -> None:
+    def store(self, token: str, user_id: int, ttl: int = DEFAULT_TTL) -> None:
         """Store a token with TTL (time to live in seconds)."""
         expiry = datetime.now(UTC) + timedelta(seconds=ttl)
         self._tokens[token] = (user_id, expiry)
 
     def verify(self, token: str) -> int | None:
-        """Verify token and return user_id if valid, None otherwise."""
+        """Verify token and return user_id if valid, None otherwise.
+
+        Implements sliding expiration: extends token lifetime on each verification.
+        """
         if token not in self._tokens:
             return None
 
@@ -34,6 +38,10 @@ class InMemoryTokenRepository(TokenRepositoryInterface):
             del self._tokens[token]
             return None
 
+        # Sliding expiration: extend the token lifetime
+        new_expiry = datetime.now(UTC) + timedelta(seconds=DEFAULT_TTL)
+        self._tokens[token] = (user_id, new_expiry)
+
         return user_id
 
     def invalidate(self, token: str) -> None:

src/baby_monitor/repositories/token/redis_token.py

@@ -3,14 +3,14 @@
 from typing import Any
 
 from baby_monitor.repositories.interfaces import TokenRepositoryInterface
+from baby_monitor.repositories.token import DEFAULT_TTL
 
 
 class RedisTokenRepository(TokenRepositoryInterface):
     """
     Redis-based token storage.
 
-    Requires redis package: pip install redis
+    This implementation uses Redis to store tokens with TTL. Implements sliding expiration.
-    Set REDIS_URI environment variable (e.g., redis://localhost:6379/0)
     """
 
     def __init__(self, redis_client: Any) -> None:
@@ -22,16 +22,21 @@ class RedisTokenRepository(TokenRepositoryInterface):
         """
         self.redis = redis_client
 
-    def store(self, token: str, user_id: int, ttl: int = 3600) -> None:
+    def store(self, token: str, user_id: int, ttl: int = DEFAULT_TTL) -> None:
         """Store a token with TTL (time to live in seconds)."""
         key = f"token:{token}"
         self.redis.setex(key, ttl, str(user_id))
 
     def verify(self, token: str) -> int | None:
-        """Verify token and return user_id if valid, None otherwise."""
+        """Verify token and return user_id if valid, None otherwise.
+
+        Implements sliding expiration: extends token lifetime on verification.
+        """
         key = f"token:{token}"
         user_id_str = self.redis.get(key)
         if user_id_str:
+            # Sliding expiration: extend the token lifetime
+            self.redis.expire(key, DEFAULT_TTL)
             return int(user_id_str)
         return None
 

src/baby_monitor/repositories/user/sqlite_user.py

@@ -11,7 +11,7 @@ from baby_monitor.models.db.user import User
 
 class DatabaseUserRepository(UserRepositoryInterface):
     """Database-based user repository.
-    
+
     Works with both SQLite and PostgreSQL databases.
     """
 

src/baby_monitor/routers/child.py

@@ -10,11 +10,13 @@ from baby_monitor.models.child import CreateChildRequest, ChildResponse
 from baby_monitor.routers.auth import verify_token
 from baby_monitor.repositories.interfaces import (
     ChildRepositoryInterface,
-    ChildInvitationRepositoryInterface
+    ChildInvitationRepositoryInterface,
+    UserRepositoryInterface,
 )
 from baby_monitor.repositories.dependencies import (
     get_child_repository,
     get_child_invitation_repository,
+    get_user_repository,
 )
 
 router = APIRouter(prefix="/api/children", tags=["children"])
@@ -45,9 +47,7 @@ class RedeemChildInvitationRequest(BaseModel):
 def create_child(
     request: CreateChildRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> ChildResponse:
     """Create a new child for the authenticated user."""
     child = child_repo.create(
@@ -63,22 +63,37 @@ def create_child(
 @router.get("", response_model=list[ChildResponse])
 def get_user_children(
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
+    user_repo: Annotated[UserRepositoryInterface, Depends(get_user_repository)],
-    ],
 ) -> list[ChildResponse]:
     """Get all children for the authenticated user."""
     children = child_repo.get_by_user_id(user_id)
-    return [ChildResponse(**child) for child in children]
+
+    # Add parent information to each child
+    result = []
+    for child in children:
+        child_data = child.copy()
+        parent_ids = child_repo.get_parent_ids(child["id"])
+        child_data["parent_count"] = len(parent_ids)
+
+        # Get usernames of all parents
+        parent_usernames = []
+        for parent_id in parent_ids:
+            parent = user_repo.get_by_id(parent_id)
+            if parent:
+                parent_usernames.append(parent["username"])
+        child_data["parent_usernames"] = parent_usernames
+
+        result.append(ChildResponse(**child_data))
+
+    return result
 
 
 @router.get("/{child_id}", response_model=ChildResponse)
 def get_child(
     child_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> ChildResponse:
     """Get a specific child by ID."""
     child = child_repo.get_by_id(child_id)
@@ -99,9 +114,7 @@ def update_child(
     child_id: int,
     request: CreateChildRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> ChildResponse:
     """Update a child's information."""
     # First check if child exists and belongs to user
@@ -132,9 +145,7 @@ def update_child(
 def create_child_invitation(
     request: CreateChildInvitationRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
     invitation_repo: Annotated[
         ChildInvitationRepositoryInterface,
         Depends(get_child_invitation_repository),
@@ -176,9 +187,7 @@ def create_child_invitation(
 def redeem_child_invitation(
     request: RedeemChildInvitationRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
     invitation_repo: Annotated[
         ChildInvitationRepositoryInterface,
         Depends(get_child_invitation_repository),

src/baby_monitor/routers/diaper_change.py

@@ -29,9 +29,7 @@ def create_diaper_change(
     diaper_repo: Annotated[
         DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> DiaperChangeResponse:
     """Create a new diaper change log entry."""
     # Verify the child belongs to the authenticated user
@@ -68,9 +66,7 @@ def get_diaper_change(
     diaper_repo: Annotated[
         DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> DiaperChangeResponse:
     """Get a specific diaper change log by ID."""
     diaper_change = diaper_repo.get_by_id(diaper_change_id)
@@ -92,9 +88,7 @@ def update_diaper_change(
     diaper_repo: Annotated[
         DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> DiaperChangeResponse:
     """Update an existing diaper change log."""
     diaper_change = diaper_repo.get_by_id(diaper_change_id)
@@ -129,9 +123,7 @@ def delete_diaper_change(
     diaper_repo: Annotated[
         DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> None:
     """Delete a diaper change log."""
     diaper_change = diaper_repo.get_by_id(diaper_change_id)

src/baby_monitor/routers/feeding.py

@@ -29,9 +29,7 @@ def create_feeding(
     feeding_repo: Annotated[
         FeedingRepositoryInterface, Depends(get_feeding_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> FeedingResponse:
     """Create a new feeding log entry."""
     # Verify the child belongs to the authenticated user
@@ -53,9 +51,7 @@ def get_active_feeding(
     feeding_repo: Annotated[
         FeedingRepositoryInterface, Depends(get_feeding_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> FeedingResponse | None:
     """Get the current active feeding (where end_time is null) for the user."""
     feedings = feeding_repo.get_by_user_id(user_id)
@@ -92,9 +88,7 @@ def get_feeding(
     feeding_repo: Annotated[
         FeedingRepositoryInterface, Depends(get_feeding_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> FeedingResponse:
     """Get a specific feeding log by ID."""
     feeding = feeding_repo.get_by_id(feeding_id)
@@ -116,9 +110,7 @@ def update_feeding(
     feeding_repo: Annotated[
         FeedingRepositoryInterface, Depends(get_feeding_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> FeedingResponse:
     """Update a feeding log entry."""
     feeding = feeding_repo.get_by_id(feeding_id)
@@ -130,9 +122,7 @@ def update_feeding(
     verify_child_access(child_repo, feeding["child_id"], user_id)
 
     # Update the feeding
-    feeding_type_value = (
+    feeding_type_value = request.feeding_type.value if request.feeding_type else None
-        request.feeding_type.value if request.feeding_type else None
-    )
     updated_feeding = feeding_repo.update(
         feeding_id=feeding_id,
         start_time=request.start_time,
@@ -153,9 +143,7 @@ def delete_feeding(
     feeding_repo: Annotated[
         FeedingRepositoryInterface, Depends(get_feeding_repository)
     ],
-    child_repo: Annotated[
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> None:
     """Delete a feeding log entry."""
     feeding = feeding_repo.get_by_id(feeding_id)

src/baby_monitor/routers/sleep.py

@@ -26,12 +26,8 @@ router = APIRouter(prefix="/api/sleep", tags=["sleep"])
 def create_sleep(
     request: CreateSleepRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
-        SleepRepositoryInterface, Depends(get_sleep_repository)
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-    ],
-    child_repo: Annotated[
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> SleepResponse:
     """Create a new sleep log entry."""
     # Verify the child belongs to the authenticated user
@@ -40,6 +36,7 @@ def create_sleep(
     sleep = sleep_repo.create(
         child_id=request.child_id,
         start_time=request.start_time,
+        end_time=request.end_time,
     )
 
     return SleepResponse(**sleep)
@@ -48,12 +45,8 @@ def create_sleep(
 @router.get("/active", response_model=SleepResponse | None)
 def get_active_sleep(
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
-        SleepRepositoryInterface, Depends(get_sleep_repository)
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-    ],
-    child_repo: Annotated[
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> SleepResponse | None:
     """Get the current active sleep (where end_time is null) for the user."""
     sleeps = sleep_repo.get_by_user_id(user_id)
@@ -74,9 +67,7 @@ def get_active_sleep(
 @router.get("", response_model=list[SleepResponse])
 def get_user_sleeps(
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
-        SleepRepositoryInterface, Depends(get_sleep_repository)
-    ],
 ) -> list[SleepResponse]:
     """Get all sleep logs for the authenticated user's children."""
     sleeps = sleep_repo.get_by_user_id(user_id)
@@ -87,12 +78,8 @@ def get_user_sleeps(
 def get_sleep(
     sleep_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
-        SleepRepositoryInterface, Depends(get_sleep_repository)
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-    ],
-    child_repo: Annotated[
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> SleepResponse:
     """Get a specific sleep log by ID."""
     sleep = sleep_repo.get_by_id(sleep_id)
@@ -111,12 +98,8 @@ def update_sleep(
     sleep_id: int,
     request: UpdateSleepRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
-        SleepRepositoryInterface, Depends(get_sleep_repository)
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-    ],
-    child_repo: Annotated[
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> SleepResponse:
     """Update an existing sleep log."""
     sleep = sleep_repo.get_by_id(sleep_id)
@@ -142,12 +125,8 @@ def update_sleep(
 def delete_sleep(
     sleep_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
-        SleepRepositoryInterface, Depends(get_sleep_repository)
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
-    ],
-    child_repo: Annotated[
-        ChildRepositoryInterface, Depends(get_child_repository)
-    ],
 ) -> None:
     """Delete a sleep log."""
     sleep = sleep_repo.get_by_id(sleep_id)

src/baby_monitor/static/add-child.html

@@ -192,12 +192,20 @@
           Cancel
         </button>
       </form>
-      
+
-      <div id="skipOption" style="text-align: center; margin-top: 20px; display: none;">
+      <div
-        <p style="color: #666; font-size: 14px; margin-bottom: 10px;">
+        id="skipOption"
+        style="text-align: center; margin-top: 20px; display: none"
+      >
+        <p style="color: #666; font-size: 14px; margin-bottom: 10px">
           Want to accept a child share invitation first?
         </p>
-        <button type="button" class="button secondary" onclick="skipToHome()" style="margin: 0;">
+        <button
+          type="button"
+          class="button secondary"
+          onclick="skipToHome()"
+          style="margin: 0"
+        >
           Skip for now
         </button>
       </div>
@@ -305,9 +313,9 @@
                 : "Child added successfully!",
               "success",
             );
-            // Redirect to home page after 1 second
+            // Redirect to settings page if editing, otherwise home page
             setTimeout(() => {
-              window.location.href = "/";
+              window.location.href = isEditMode ? "/settings.html" : "/";
             }, 1000);
           } else {
             showMessage(
@@ -330,7 +338,8 @@
       }
 
       function goBack() {
-        window.location.href = "/";
+        // Redirect to settings page if editing, otherwise home page
+        window.location.href = isEditMode ? "/settings.html" : "/";
       }
 
       function skipToHome() {

src/baby_monitor/static/admin.html

@@ -506,8 +506,8 @@
                 ID: ${user.id} • Created: ${new Date(user.created_at).toLocaleDateString()}
               </div>
             </div>
-            <button 
+            <button
-              class="delete-user-btn" 
+              class="delete-user-btn"
               onclick="showDeleteModal(${user.id}, '${user.username}', ${user.is_admin})"
               ${user.is_admin ? 'disabled title="Cannot delete admin users"' : ""}
             >

src/baby_monitor/static/diapers.html

@@ -16,9 +16,11 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        background-color: #f0f0f0;
         min-height: 100vh;
-        padding: 20px;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
       }
 
       .container {
@@ -26,8 +28,6 @@
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
-        max-width: 1000px;
-        margin: 0 auto;
       }
 
       h1 {
@@ -72,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -114,6 +118,13 @@
       .chart-wrapper {
         position: relative;
         height: 300px;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      .chart-wrapper canvas {
+        max-width: 100%;
+        max-height: 100%;
       }
 
       .charts-row {
@@ -267,8 +278,12 @@
 
       let allDiaperChanges = [];
       let allChildren = [];
-      let currentDaysRange = parseInt(localStorage.getItem("lastDiaperTimeRange")) || 7;
+      let currentDaysRange =
-      let selectedChildId = null; // null means "All Children"
+        parseInt(localStorage.getItem("lastDiaperTimeRange")) || 7;
+      let selectedChildId = null; // null means show first/only child
+      let barChartInstance = null; // Track chart instance for proper cleanup
+      let poopPieChartInstance = null;
+      let peePieChartInstance = null;
 
       // Restore last selected child from localStorage
       const lastChildId = localStorage.getItem("lastDiaperChildFilter");
@@ -309,6 +324,11 @@
 
           if (response.ok) {
             allChildren = await response.json();
+
+            // Auto-select first child if no selection exists
+            if (selectedChildId === null && allChildren.length > 0) {
+              selectedChildId = allChildren[0].id;
+            }
           }
         } catch (error) {
           console.error("Error loading children:", error);
@@ -322,8 +342,7 @@
       }
 
       function onChildChange(event) {
-        selectedChildId =
+        selectedChildId = parseInt(event.target.value);
-          event.target.value === "all" ? null : parseInt(event.target.value);
         localStorage.setItem("lastDiaperChildFilter", event.target.value);
         displayDiaperChanges(allDiaperChanges);
       }
@@ -355,11 +374,25 @@
 
           content.innerHTML = `
             <div class="controls">
-              <label for="childFilter">Child:</label>
+              ${
-              <select id="childFilter" onchange="onChildChange(event)">
+                allChildren.length === 1
-                <option value="all" ${selectedChildId === null ? "selected" : ""}>All Children</option>
+                  ? `
-                ${childOptions}
+                <label for="childDisplay">Child:</label>
-              </select>
+                <input
+                  type="text"
+                  id="childDisplay"
+                  value="${allChildren[0].name}"
+                  readonly
+                  style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
+                />
+              `
+                  : `
+                <label for="childFilter">Child:</label>
+                <select id="childFilter" onchange="onChildChange(event)">
+                  ${childOptions}
+                </select>
+              `
+              }
 
               <label for="daysRange">Time Range:</label>
               <select id="daysRange" onchange="onDaysRangeChange(event)">
@@ -640,8 +673,8 @@
           // Create 8 three-hour buckets
           for (let i = 7; i >= 0; i--) {
             const periodStart = new Date(now);
-            periodStart.setHours(periodStart.getHours() - (i * 3), 0, 0, 0);
+            periodStart.setHours(periodStart.getHours() - i * 3, 0, 0, 0);
-            
+
             const periodEnd = new Date(periodStart);
             periodEnd.setHours(periodEnd.getHours() + 3);
 
@@ -675,8 +708,8 @@
           // Show 8-hour aggregates for 3 days (9 buckets total)
           for (let i = 8; i >= 0; i--) {
             const periodStart = new Date(now);
-            periodStart.setHours(periodStart.getHours() - (i * 8), 0, 0, 0);
+            periodStart.setHours(periodStart.getHours() - i * 8, 0, 0, 0);
-            
+
             const periodEnd = new Date(periodStart);
             periodEnd.setHours(periodEnd.getHours() + 8);
 
@@ -752,7 +785,12 @@
       function renderBarChart(chartData) {
         const ctx = document.getElementById("diaperChart").getContext("2d");
 
-        new Chart(ctx, {
+        // Destroy existing chart instance if it exists
+        if (barChartInstance) {
+          barChartInstance.destroy();
+        }
+
+        barChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
             labels: chartData.labels,
@@ -845,6 +883,11 @@
       function renderPoopPieChart(chartData) {
         const ctx = document.getElementById("poopPieChart").getContext("2d");
 
+        // Destroy existing chart instance if it exists
+        if (poopPieChartInstance) {
+          poopPieChartInstance.destroy();
+        }
+
         const colors = {
           Light: {
             bg: "rgba(139, 69, 19, 0.5)",
@@ -871,7 +914,7 @@
           (label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
         );
 
-        new Chart(ctx, {
+        poopPieChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,
@@ -927,6 +970,11 @@
       function renderPeePieChart(chartData) {
         const ctx = document.getElementById("peePieChart").getContext("2d");
 
+        // Destroy existing chart instance if it exists
+        if (peePieChartInstance) {
+          peePieChartInstance.destroy();
+        }
+
         const colors = {
           Light: {
             bg: "rgba(255, 215, 0, 0.5)",
@@ -953,7 +1001,7 @@
           (label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
         );
 
-        new Chart(ctx, {
+        peePieChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,

src/baby_monitor/static/feedings.html

@@ -16,9 +16,11 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-color: #f0f0f0;
         min-height: 100vh;
-        padding: 20px;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
       }
 
       .container {
@@ -26,8 +28,6 @@
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
-        max-width: 1000px;
-        margin: 0 auto;
       }
 
       h1 {
@@ -72,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -114,6 +118,13 @@
       .chart-wrapper {
         position: relative;
         height: 300px;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      .chart-wrapper canvas {
+        max-width: 100%;
+        max-height: 100%;
       }
 
       .charts-row {
@@ -304,9 +315,12 @@
 
       let allFeedings = [];
       let allChildren = [];
-      let currentDaysRange = parseInt(localStorage.getItem("lastFeedingTimeRange")) || 7;
+      let currentDaysRange =
-      let selectedChildId = null; // null means "All Children"
+        parseInt(localStorage.getItem("lastFeedingTimeRange")) || 7;
+      let selectedChildId = null; // null means show first/only child
       let barChartInstance = null;
+      let pieChartInstance = null;
+      let durationChartInstance = null;
 
       // Restore last selected child from localStorage
       const lastChildId = localStorage.getItem("lastFeedingChildFilter");
@@ -347,6 +361,11 @@
 
           if (response.ok) {
             allChildren = await response.json();
+
+            // Auto-select first child if no selection exists
+            if (selectedChildId === null && allChildren.length > 0) {
+              selectedChildId = allChildren[0].id;
+            }
           }
         } catch (error) {
           console.error("Error loading children:", error);
@@ -360,8 +379,7 @@
       }
 
       function onChildChange(event) {
-        selectedChildId =
+        selectedChildId = parseInt(event.target.value);
-          event.target.value === "all" ? null : parseInt(event.target.value);
         localStorage.setItem("lastFeedingChildFilter", event.target.value);
         displayFeedings(allFeedings);
       }
@@ -393,11 +411,25 @@
 
           content.innerHTML = `
             <div class="controls">
-              <label for="childFilter">Child:</label>
+              ${
-              <select id="childFilter" onchange="onChildChange(event)">
+                allChildren.length === 1
-                <option value="all" ${selectedChildId === null ? "selected" : ""}>All Children</option>
+                  ? `
-                ${childOptions}
+                <label for="childDisplay">Child:</label>
-              </select>
+                <input
+                  type="text"
+                  id="childDisplay"
+                  value="${allChildren[0].name}"
+                  readonly
+                  style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
+                />
+              `
+                  : `
+                <label for="childFilter">Child:</label>
+                <select id="childFilter" onchange="onChildChange(event)">
+                  ${childOptions}
+                </select>
+              `
+              }
 
               <label for="daysRange">Time Range:</label>
               <select id="daysRange" onchange="onDaysRangeChange(event)">
@@ -672,15 +704,15 @@
         }
 
         // Only use completed feedings
-        const completedFeedings = filteredFeedings.filter(f => f.end_time);
+        const completedFeedings = filteredFeedings.filter((f) => f.end_time);
 
         // If 24 hours selected, show 3-hour aggregates
         if (currentDaysRange === 1) {
           // Create 8 three-hour buckets
           for (let i = 7; i >= 0; i--) {
             const periodStart = new Date(now);
-            periodStart.setHours(periodStart.getHours() - (i * 3), 0, 0, 0);
+            periodStart.setHours(periodStart.getHours() - i * 3, 0, 0, 0);
-            
+
             const periodEnd = new Date(periodStart);
             periodEnd.setHours(periodEnd.getHours() + 3);
 
@@ -699,13 +731,13 @@
               const feedingDate = new Date(f.start_time);
               return feedingDate >= periodStart && feedingDate < periodEnd;
             });
-            
+
-            const feedingDurations = periodFeedings.map(feeding => {
+            const feedingDurations = periodFeedings.map((feeding) => {
               const start = new Date(feeding.start_time);
               const end = new Date(feeding.end_time);
               return (end - start) / 60000; // Convert to minutes
             });
-            
+
             durations.push(feedingDurations);
             feedingCounts.push(periodFeedings.length);
           }
@@ -713,8 +745,8 @@
           // Show 8-hour aggregates for 3 days (9 buckets total)
           for (let i = 8; i >= 0; i--) {
             const periodStart = new Date(now);
-            periodStart.setHours(periodStart.getHours() - (i * 8), 0, 0, 0);
+            periodStart.setHours(periodStart.getHours() - i * 8, 0, 0, 0);
-            
+
             const periodEnd = new Date(periodStart);
             periodEnd.setHours(periodEnd.getHours() + 8);
 
@@ -739,13 +771,13 @@
               const feedingDate = new Date(f.start_time);
               return feedingDate >= periodStart && feedingDate < periodEnd;
             });
-            
+
-            const feedingDurations = periodFeedings.map(feeding => {
+            const feedingDurations = periodFeedings.map((feeding) => {
               const start = new Date(feeding.start_time);
               const end = new Date(feeding.end_time);
               return (end - start) / 60000; // Convert to minutes
             });
-            
+
             durations.push(feedingDurations);
             feedingCounts.push(periodFeedings.length);
           }
@@ -770,13 +802,13 @@
               const feedingDate = new Date(f.start_time);
               return feedingDate >= date && feedingDate < nextDay;
             });
-            
+
-            const feedingDurations = dayFeedings.map(feeding => {
+            const feedingDurations = dayFeedings.map((feeding) => {
               const start = new Date(feeding.start_time);
               const end = new Date(feeding.end_time);
               return (end - start) / 60000; // Convert to minutes
             });
-            
+
             durations.push(feedingDurations);
             feedingCounts.push(dayFeedings.length);
           }
@@ -794,7 +826,10 @@
         }
 
         // Find the maximum number of feedings in any period
-        const maxFeedings = Math.max(...chartData.durations.map(d => d.length), 0);
+        const maxFeedings = Math.max(
+          ...chartData.durations.map((d) => d.length),
+          0,
+        );
 
         // If no feedings at all, show empty chart
         if (maxFeedings === 0) {
@@ -802,11 +837,13 @@
             type: "bar",
             data: {
               labels: chartData.labels,
-              datasets: [{
+              datasets: [
-                label: "No Data",
+                {
-                data: new Array(chartData.labels.length).fill(0),
+                  label: "No Data",
-                backgroundColor: "rgba(102, 126, 234, 0.3)",
+                  data: new Array(chartData.labels.length).fill(0),
-              }],
+                  backgroundColor: "rgba(102, 126, 234, 0.3)",
+                },
+              ],
             },
             options: {
               responsive: true,
@@ -833,30 +870,32 @@
 
         // Create color palette for different feedings
         const colors = [
-          'rgba(102, 126, 234, 0.8)',
+          "rgba(102, 126, 234, 0.8)",
-          'rgba(118, 75, 162, 0.8)',
+          "rgba(118, 75, 162, 0.8)",
-          'rgba(255, 159, 64, 0.8)',
+          "rgba(255, 159, 64, 0.8)",
-          'rgba(76, 175, 80, 0.8)',
+          "rgba(76, 175, 80, 0.8)",
-          'rgba(244, 67, 54, 0.8)',
+          "rgba(244, 67, 54, 0.8)",
-          'rgba(156, 39, 176, 0.8)',
+          "rgba(156, 39, 176, 0.8)",
-          'rgba(102, 126, 234, 0.6)',
+          "rgba(102, 126, 234, 0.6)",
-          'rgba(118, 75, 162, 0.6)',
+          "rgba(118, 75, 162, 0.6)",
-          'rgba(255, 159, 64, 0.6)',
+          "rgba(255, 159, 64, 0.6)",
-          'rgba(76, 175, 80, 0.6)',
+          "rgba(76, 175, 80, 0.6)",
         ];
 
         // Create datasets - one for each feeding position
         const datasets = [];
         for (let feedingIndex = 0; feedingIndex < maxFeedings; feedingIndex++) {
-          const dataForFeeding = chartData.durations.map(periodDurations => 
+          const dataForFeeding = chartData.durations.map(
-            periodDurations[feedingIndex] || 0
+            (periodDurations) => periodDurations[feedingIndex] || 0,
           );
 
           datasets.push({
             label: `Feeding ${feedingIndex + 1}`,
             data: dataForFeeding,
             backgroundColor: colors[feedingIndex % colors.length],
-            borderColor: colors[feedingIndex % colors.length].replace('0.8', '1').replace('0.6', '1'),
+            borderColor: colors[feedingIndex % colors.length]
+              .replace("0.8", "1")
+              .replace("0.6", "1"),
             borderWidth: 1,
           });
         }
@@ -897,9 +936,9 @@
                   font: {
                     size: 12,
                   },
-                  callback: function(value) {
+                  callback: function (value) {
-                    return Math.round(value) + 'm';
+                    return Math.round(value) + "m";
-                  }
+                  },
                 },
                 grid: {
                   color: "rgba(0, 0, 0, 0.05)",
@@ -920,17 +959,19 @@
                   size: 13,
                 },
                 callbacks: {
-                  label: function(context) {
+                  label: function (context) {
                     const minutes = Math.round(context.parsed.y);
                     return `${context.dataset.label}: ${minutes}m`;
                   },
-                  footer: function(tooltipItems) {
+                  footer: function (tooltipItems) {
                     const periodIndex = tooltipItems[0].dataIndex;
-                    const totalMinutes = chartData.durations[periodIndex].reduce((sum, val) => sum + val, 0);
+                    const totalMinutes = chartData.durations[
+                      periodIndex
+                    ].reduce((sum, val) => sum + val, 0);
                     const feedingCount = chartData.feedingCounts[periodIndex];
-                    return `Total: ${Math.round(totalMinutes)}m (${feedingCount} feeding${feedingCount !== 1 ? 's' : ''})`;
+                    return `Total: ${Math.round(totalMinutes)}m (${feedingCount} feeding${feedingCount !== 1 ? "s" : ""})`;
-                  }
+                  },
-                }
+                },
               },
             },
           },
@@ -940,6 +981,11 @@
       function renderPieChart(chartData) {
         const ctx = document.getElementById("pieChart").getContext("2d");
 
+        // Destroy existing chart instance if it exists
+        if (pieChartInstance) {
+          pieChartInstance.destroy();
+        }
+
         // Color mapping for each type
         const colorMap = {
           "Left Breast": {
@@ -964,7 +1010,7 @@
           (label) => colorMap[label]?.border || "rgba(200, 200, 200, 1)",
         );
 
-        new Chart(ctx, {
+        pieChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,
@@ -1020,7 +1066,12 @@
       function renderDurationChart(chartData) {
         const ctx = document.getElementById("durationChart").getContext("2d");
 
-        new Chart(ctx, {
+        // Destroy existing chart instance if it exists
+        if (durationChartInstance) {
+          durationChartInstance.destroy();
+        }
+
+        durationChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
             labels: chartData.labels,

src/baby_monitor/static/index.html

@@ -167,6 +167,52 @@
         margin-top: 0.5rem;
         opacity: 0.9;
       }
+      .recent-activity {
+        margin-top: 2rem;
+        padding: 1.5rem;
+        background: #f8f9fa;
+        border-radius: 8px;
+      }
+      .recent-activity h3 {
+        margin-top: 0;
+        margin-bottom: 1rem;
+        color: #333;
+        font-size: 1.1rem;
+      }
+      .activity-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .activity-card {
+        background: white;
+        padding: 1rem;
+        border-radius: 6px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+      .activity-card .icon {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+      }
+      .activity-card .type {
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 0.25rem;
+      }
+      .activity-card .time {
+        font-size: 0.85rem;
+        color: #666;
+      }
+      .activity-card .details {
+        font-size: 0.85rem;
+        color: #888;
+        margin-top: 0.5rem;
+      }
+      .activity-card.empty {
+        opacity: 0.5;
+        font-style: italic;
+        color: #999;
+      }
     </style>
   </head>
   <body>
@@ -264,7 +310,7 @@
           .then((user) => {
             // Initialize burger menu
             initBurgerMenu({
-              includeHome: false,
+              includeHome: true,
             });
 
             // Check if user has any children
@@ -321,6 +367,7 @@
       let activeSleep = null;
       let lastSleep = null;
       let sleepUpdateTimerInterval = null;
+      let lastDiaperChange = null;
 
       async function loadFeedingStatus(children) {
         userChildren = children;
@@ -337,8 +384,8 @@
             activeFeeding = await activeResponse.json();
           }
 
-          // Fetch all feedings to get the last one
+          // Fetch the 10 most recent feedings to calculate the most recent session
-          const feedingsResponse = await fetch("/api/feedings", {
+          const feedingsResponse = await fetch("/api/feedings?limit=10", {
             headers: {
               Authorization: `Bearer ${token}`,
             },
@@ -347,8 +394,68 @@
           if (feedingsResponse.ok) {
             const feedings = await feedingsResponse.json();
             if (feedings.length > 0) {
-              // Feedings are ordered by start_time desc, so first is most recent
+              // Calculate the most recent feeding session
-              lastFeeding = feedings[0];
+              let sessionStart = feedings[0].start_time;
+              let sessionEnd = feedings[0].end_time || feedings[0].start_time;
+              let sessionChildId = feedings[0].child_id;
+              let sessionEntries = [feedings[0]];
+
+              for (let i = 1; i < feedings.length; i++) {
+                const entry = feedings[i];
+                // Only group entries for the same child (ignore feeding type)
+                if (entry.child_id !== sessionChildId) {
+                  break;
+                }
+                // If the gap between this entry's end_time and current sessionStart is more than 30 min, stop
+                const prevEnd = entry.end_time || entry.start_time;
+                const sessionStartDate = new Date(sessionStart);
+                const prevEndDate = new Date(prevEnd);
+                const diffMins = Math.abs(
+                  (sessionStartDate - prevEndDate) / 60000,
+                );
+                if (diffMins > 30) {
+                  break;
+                }
+                // Extend session to include this entry
+                sessionStart = entry.start_time;
+                sessionEntries.push(entry);
+              }
+
+              // Calculate accumulated feeding time for all events in the session
+              let accumulatedMinutes = 0;
+              sessionEntries.forEach((entry) => {
+                if (entry.end_time && entry.start_time) {
+                  const start = new Date(entry.start_time);
+                  const end = new Date(entry.end_time);
+                  const diffMs = end - start;
+                  if (diffMs > 0) {
+                    accumulatedMinutes += Math.floor(diffMs / 60000);
+                  }
+                }
+              });
+
+              // Build a string showing all feeding types used during the session
+              const feedingTypesSet = new Set();
+              sessionEntries.forEach((entry) => {
+                if (entry.feeding_type) {
+                  feedingTypesSet.add(entry.feeding_type);
+                }
+              });
+              const feedingTypesString = Array.from(feedingTypesSet)
+                .map(formatFeedingType)
+                .join(", ");
+
+              // Compose a session object
+              lastFeeding = {
+                child_id: sessionChildId,
+                feeding_type: feedings[0].feeding_type,
+                start_time: sessionStart,
+                end_time: sessionEnd,
+                entries: sessionEntries,
+                child_name: feedings[0].child_name,
+                accumulated_minutes: accumulatedMinutes,
+                feeding_types_string: feedingTypesString,
+              };
             }
           }
 
@@ -376,6 +483,20 @@
               lastSleep = sleeps[0];
             }
           }
+
+          // Fetch all diaper changes to get the last one
+          const diaperResponse = await fetch("/api/diaper-changes", {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (diaperResponse.ok) {
+            const diapers = await diaperResponse.json();
+            if (diapers.length > 0) {
+              lastDiaperChange = diapers[0];
+            }
+          }
         } catch (error) {
           console.error("Error loading feeding status:", error);
         }
@@ -449,7 +570,7 @@
             </button>
           `
           : `
-            <button class="feeding-button" onclick="showStartFeedingModal()">
+            <button class="feeding-button" onclick="window.location.href='/log-feeding.html'">
               🍼 Started Feeding
             </button>
           `;
@@ -478,9 +599,100 @@
           </button>
           ${feedingButtonHtml}
           ${sleepButtonHtml}
+          ${buildRecentActivitySection()}
         `;
       }
 
+      function buildRecentActivitySection() {
+        // Build diaper card
+        const diaperCard = lastDiaperChange
+          ? `
+            <a href="/diapers.html" class="activity-card" style="text-decoration:none; color:inherit;">
+              <div class="icon">🧷</div>
+              <div class="type">Last Diaper</div>
+              <div class="time">${formatTime(lastDiaperChange.change_time)}</div>
+              <div class="details">
+                ${lastDiaperChange.poop_amount ? `💩 ${lastDiaperChange.poop_amount}` : ""}
+                ${lastDiaperChange.poop_amount && lastDiaperChange.pee_amount ? " • " : ""}
+                ${lastDiaperChange.pee_amount ? `💧 ${lastDiaperChange.pee_amount}` : ""}
+              </div>
+            </a>
+          `
+          : `
+            <a href="/diapers.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
+              <div class="icon">🧷</div>
+              <div class="type">No diaper changes yet</div>
+            </a>
+          `;
+
+        // Build feeding card
+        const feedingCard = lastFeeding
+          ? `
+            <a href="/feedings.html" class="activity-card" style="text-decoration:none; color:inherit;">
+              <div class="icon">🍼</div>
+              <div class="type">Last Feeding Session</div>
+              <div class="time">${formatTime(lastFeeding.start_time)}</div>
+              <div class="details">
+                ${lastFeeding.feeding_types_string ? `${lastFeeding.feeding_types_string}` : ""}
+                ${lastFeeding.feeding_types_string && lastFeeding.accumulated_minutes ? " • " : ""}
+                ${lastFeeding.accumulated_minutes} minutes total
+                ${lastFeeding.end_time ? "" : " (ongoing)"}
+              </div>
+            </a>
+          `
+          : `
+            <a href="/feedings.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
+              <div class="icon">🍼</div>
+              <div class="type">No feedings yet</div>
+            </a>
+          `;
+
+        // Build sleep card
+        const sleepCard = lastSleep
+          ? `
+            <a href="/sleep.html" class="activity-card" style="text-decoration:none; color:inherit;">
+              <div class="icon">😴</div>
+              <div class="type">Last Sleep</div>
+              <div class="time">${formatTime(lastSleep.start_time)}</div>
+              <div class="details">
+                Duration: ${lastSleep.end_time ? calculateDuration(lastSleep.start_time, lastSleep.end_time) : "ongoing"}
+              </div>
+            </a>
+          `
+          : `
+            <a href="/sleep.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
+              <div class="icon">😴</div>
+              <div class="type">No sleep sessions yet</div>
+            </a>
+          `;
+
+        return `
+          <div class="recent-activity">
+            <h3>📊 Recent Activity</h3>
+            <div class="activity-grid">
+              ${diaperCard}
+              ${feedingCard}
+              ${sleepCard}
+            </div>
+          </div>
+        `;
+      }
+
+      function calculateDuration(startTime, endTime) {
+        const start = new Date(startTime);
+        const end = new Date(endTime);
+        const diffMs = end - start;
+        const diffMins = Math.floor(diffMs / 60000);
+
+        if (diffMins < 60) {
+          return `${diffMins} min`;
+        }
+
+        const hours = Math.floor(diffMins / 60);
+        const mins = diffMins % 60;
+        return `${hours}h ${mins}m`;
+      }
+
       function formatFeedingType(type) {
         const types = {
           left_breast: "Left Breast",
@@ -510,18 +722,40 @@
         const childSelect = document.getElementById("modalChildId");
         const typeSelect = document.getElementById("modalFeedingType");
 
-        // Clear and populate child select
+        // Clear and populate child select or show single child
-        childSelect.innerHTML = '<option value="">Select a child</option>';
+        if (userChildren.length === 1) {
-        userChildren.forEach((child) => {
+          // Single child: replace dropdown with text display
-          const option = document.createElement("option");
+          const child = userChildren[0];
-          option.value = child.id;
+          const formGroup = childSelect.parentElement;
-          option.textContent = child.name;
+          formGroup.innerHTML = `
-          childSelect.appendChild(option);
+            <label for="modalChildName">Child</label>
-        });
+            <input
+              type="text"
+              id="modalChildName"
+              value="${child.name}"
+              readonly
+              style="background-color: #f5f5f5; cursor: default;"
+            />
+            <input type="hidden" id="modalChildId" value="${child.id}" />
+          `;
+        } else {
+          // Multiple children: show dropdown
+          childSelect.innerHTML = '<option value="">Select a child</option>';
+          userChildren.forEach((child) => {
+            const option = document.createElement("option");
+            option.value = child.id;
+            option.textContent = child.name;
+            childSelect.appendChild(option);
+          });
 
-        // Set defaults based on last feeding
+          // Set defaults based on last feeding
+          if (lastFeeding) {
+            childSelect.value = lastFeeding.child_id;
+          }
+        }
+
+        // Set default feeding type based on last feeding
         if (lastFeeding) {
-          childSelect.value = lastFeeding.child_id;
           typeSelect.value = lastFeeding.feeding_type;
         }
 
@@ -630,24 +864,7 @@
       }
 
       function showStartSleepModal() {
-        const modal = document.getElementById("startSleepModal");
+        window.location.href = "/log-sleep.html";
-        const childSelect = document.getElementById("modalSleepChildId");
-
-        // Clear and populate child select
-        childSelect.innerHTML = '<option value="">Select a child</option>';
-        userChildren.forEach((child) => {
-          const option = document.createElement("option");
-          option.value = child.id;
-          option.textContent = child.name;
-          childSelect.appendChild(option);
-        });
-
-        // Set default based on last sleep
-        if (lastSleep) {
-          childSelect.value = lastSleep.child_id;
-        }
-
-        modal.classList.add("show");
       }
 
       function closeStartSleepModal() {

src/baby_monitor/static/log-diaper.html

@@ -235,7 +235,7 @@
         <button
           type="button"
           class="button secondary"
-          onclick="window.location.href='/'"
+          onclick="window.location.href=getReturnUrl()"
         >
           Cancel
         </button>
@@ -249,6 +249,16 @@
         window.location.href = "/login.html";
       }
 
+      // Determine return URL based on referrer
+      function getReturnUrl() {
+        const referrer = document.referrer;
+        if (referrer.includes("/diapers.html")) {
+          return "/diapers.html";
+        }
+        // Default to home page
+        return "/";
+      }
+
       // Check if we're in edit mode
       const urlParams = new URLSearchParams(window.location.search);
       const diaperChangeId = urlParams.get("id");
@@ -277,12 +287,32 @@
             children = await response.json();
             const select = document.getElementById("childSelect");
 
-            children.forEach((child) => {
+            // Populate select dropdown or show single child
-              const option = document.createElement("option");
+            if (children.length === 1) {
-              option.value = child.id;
+              // Single child: replace dropdown with text display
-              option.textContent = child.name;
+              const child = children[0];
-              select.appendChild(option);
+              const formGroup = select.parentElement;
-            });
+              formGroup.innerHTML = `
+                <label for="childName">Child *</label>
+                <input
+                  type="text"
+                  id="childName"
+                  value="${child.name}"
+                  readonly
+                  style="background-color: #f5f5f5; cursor: default;"
+                />
+                <input type="hidden" id="childSelect" name="childSelect" value="${child.id}" />
+              `;
+            } else {
+              // Multiple children: show dropdown (clear the placeholder first)
+              select.innerHTML = "";
+              children.forEach((child) => {
+                const option = document.createElement("option");
+                option.value = child.id;
+                option.textContent = child.name;
+                select.appendChild(option);
+              });
+            }
 
             // If editing, load the diaper change data
             if (isEditMode) {
@@ -295,14 +325,39 @@
                 .toISOString()
                 .slice(0, 16);
 
-              // Load last used child from localStorage
+              // Load last used child from localStorage (only for multiple children)
-              const lastDiaperChange = JSON.parse(
+              if (children.length > 1) {
-                localStorage.getItem("lastDiaperChange") || "{}",
+                const lastDiaperChange = JSON.parse(
-              );
+                  localStorage.getItem("lastDiaperChange") || "{}",
+                );
 
-              if (lastDiaperChange.child_id) {
+                if (lastDiaperChange.child_id) {
-                document.getElementById("childSelect").value =
+                  document.getElementById("childSelect").value =
-                  lastDiaperChange.child_id;
+                    lastDiaperChange.child_id;
+                }
+              }
+
+              // Prepopulate poop and pee fields from most recent entry
+              try {
+                const response = await fetch("/api/diaper-changes", {
+                  headers: { Authorization: `Bearer ${token}` },
+                });
+                if (response.ok) {
+                  const changes = await response.json();
+                  if (changes.length > 0) {
+                    const last = changes[0];
+                    document.getElementById("poopAmount").value =
+                      last.poop_amount || "";
+                    document.getElementById("poopColor").value =
+                      last.poop_color || "";
+                    document.getElementById("peeAmount").value =
+                      last.pee_amount || "";
+                    document.getElementById("peeColor").value =
+                      last.pee_color || "";
+                  }
+                }
+              } catch (error) {
+                // Ignore error, just use default
               }
             }
           } else {
@@ -431,7 +486,7 @@
                 "success",
               );
               setTimeout(() => {
-                window.location.href = "/";
+                window.location.href = getReturnUrl();
               }, 1000);
             } else {
               const errorData = await response.json();

src/baby_monitor/static/log-feeding.html

@@ -206,6 +206,16 @@
         window.location.href = "/login.html";
       }
 
+      // Determine return URL based on referrer
+      function getReturnUrl() {
+        const referrer = document.referrer;
+        if (referrer.includes("/feedings.html")) {
+          return "/feedings.html";
+        }
+        // Default to home page
+        return "/";
+      }
+
       const form = document.getElementById("logFeedingForm");
       const messageDiv = document.getElementById("message");
       const submitBtn = document.getElementById("submitBtn");
@@ -259,13 +269,32 @@
               return;
             }
 
-            // Populate select dropdown
+            // Populate select dropdown or show single child
-            children.forEach((child) => {
+            if (children.length === 1) {
-              const option = document.createElement("option");
+              // Single child: replace dropdown with text display
-              option.value = child.id;
+              const child = children[0];
-              option.textContent = child.name;
+              const formGroup = childSelect.parentElement;
-              childSelect.appendChild(option);
+              formGroup.innerHTML = `
-            });
+                <label for="childName">Child</label>
+                <input
+                  type="text"
+                  id="childName"
+                  value="${child.name}"
+                  readonly
+                  style="background-color: #f5f5f5; cursor: default;"
+                />
+                <input type="hidden" id="childId" name="childId" value="${child.id}" />
+              `;
+            } else {
+              // Multiple children: show dropdown (clear placeholder first)
+              childSelect.innerHTML = "";
+              children.forEach((child) => {
+                const option = document.createElement("option");
+                option.value = child.id;
+                option.textContent = child.name;
+                childSelect.appendChild(option);
+              });
+            }
 
             // Show form, hide loading
             loadingDiv.style.display = "none";
@@ -274,6 +303,22 @@
             // If editing, load the feeding data
             if (isEditMode) {
               loadFeedingData();
+            } else {
+              // Set default feeding type to most recent log entry
+              try {
+                const response = await fetch("/api/feedings", {
+                  headers: { Authorization: `Bearer ${token}` },
+                });
+                if (response.ok) {
+                  const feedings = await response.json();
+                  if (feedings.length > 0) {
+                    document.getElementById("feedingType").value =
+                      feedings[0].feeding_type;
+                  }
+                }
+              } catch (error) {
+                // Ignore error, just use default
+              }
             }
           } else {
             showMessage("Failed to load children", "error");
@@ -369,9 +414,9 @@
                 : "Feeding logged successfully!",
               "success",
             );
-            // Redirect to feedings page after 1 second
+            // Redirect to appropriate page after 1 second
             setTimeout(() => {
-              window.location.href = "/feedings.html";
+              window.location.href = getReturnUrl();
             }, 1000);
           } else {
             showMessage(
@@ -394,7 +439,7 @@
       }
 
       function goBack() {
-        window.location.href = "/";
+        window.location.href = getReturnUrl();
       }
     </script>
   </body>

src/baby_monitor/static/log-sleep.html

@@ -0,0 +1,414 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Log Sleep - Baby Monitor</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        min-height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+        max-width: 500px;
+        width: 100%;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 8px;
+        color: #333;
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      input,
+      select {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: border-color 0.2s;
+      }
+
+      input:focus,
+      select:focus {
+        outline: none;
+        border-color: #4facfe;
+      }
+
+      .button {
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        color: white;
+        border: none;
+        padding: 12px 24px;
+        border-radius: 6px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          transform 0.2s,
+          box-shadow 0.2s;
+        width: 100%;
+        margin-top: 10px;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
+      }
+
+      .button:active {
+        transform: translateY(0);
+      }
+
+      .button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: none;
+      }
+
+      .button.secondary {
+        background: #6c757d;
+        margin-top: 10px;
+      }
+
+      .button.secondary:hover {
+        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
+      }
+
+      .message {
+        padding: 12px;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        display: none;
+      }
+
+      .message.show {
+        display: block;
+      }
+
+      .message.error {
+        background: #ffebee;
+        border-left: 4px solid #f44336;
+        color: #c62828;
+      }
+
+      .message.success {
+        background: #e8f5e9;
+        border-left: 4px solid #4caf50;
+        color: #2e7d32;
+      }
+
+      .help-text {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>😴 Log Sleep</h1>
+      <p class="subtitle">Record a sleep session</p>
+
+      <div id="message" class="message"></div>
+
+      <div id="loadingChildren" class="loading">Loading children...</div>
+
+      <form id="logSleepForm" style="display: none">
+        <div class="form-group">
+          <label for="childId">Child *</label>
+          <select id="childId" name="childId" required>
+            <option value="">Select a child</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label for="startTime">Start Time *</label>
+          <input
+            type="datetime-local"
+            id="startTime"
+            name="startTime"
+            required
+          />
+          <p class="help-text">Defaults to current time</p>
+        </div>
+
+        <div class="form-group">
+          <label for="endTime">End Time</label>
+          <input type="datetime-local" id="endTime" name="endTime" />
+          <p class="help-text">Leave empty if sleep is ongoing</p>
+        </div>
+
+        <button type="submit" class="button" id="submitBtn">Log Sleep</button>
+        <button type="button" class="button secondary" onclick="goBack()">
+          Cancel
+        </button>
+      </form>
+    </div>
+
+    <script>
+      // Check if user is authenticated
+      const token = localStorage.getItem("access_token");
+      if (!token) {
+        window.location.href = "/login.html";
+      }
+
+      // Determine return URL based on referrer
+      function getReturnUrl() {
+        const referrer = document.referrer;
+        if (referrer.includes("/sleep.html")) {
+          return "/sleep.html";
+        }
+        // Default to home page
+        return "/";
+      }
+
+      const form = document.getElementById("logSleepForm");
+      const messageDiv = document.getElementById("message");
+      const submitBtn = document.getElementById("submitBtn");
+      const loadingDiv = document.getElementById("loadingChildren");
+      const childSelect = document.getElementById("childId");
+
+      // Check if we're editing an existing sleep session
+      const urlParams = new URLSearchParams(window.location.search);
+      const sleepId = urlParams.get("id");
+      const isEditMode = !!sleepId;
+
+      // Set default start time to now (only for new sleep sessions)
+      if (!isEditMode) {
+        const now = new Date();
+        const localDateTime = new Date(
+          now.getTime() - now.getTimezoneOffset() * 60000,
+        )
+          .toISOString()
+          .slice(0, 16);
+        document.getElementById("startTime").value = localDateTime;
+      }
+
+      // Update title and button text if editing
+      if (isEditMode) {
+        document.querySelector("h1").textContent = "😴 Edit Sleep";
+        document.querySelector(".subtitle").textContent =
+          "Update sleep session details";
+        submitBtn.textContent = "Update Sleep";
+      }
+
+      // Load user's children
+      async function loadChildren() {
+        try {
+          const response = await fetch("/api/children", {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (response.ok) {
+            const children = await response.json();
+
+            if (children.length === 0) {
+              showMessage(
+                "No children found. Please add a child first.",
+                "error",
+              );
+              setTimeout(() => {
+                window.location.href = "/add-child.html";
+              }, 2000);
+              return;
+            }
+
+            // Populate select dropdown or show single child
+            if (children.length === 1) {
+              // Single child: replace dropdown with text display
+              const child = children[0];
+              const formGroup = childSelect.parentElement;
+              formGroup.innerHTML = `
+                <label for="childName">Child</label>
+                <input
+                  type="text"
+                  id="childName"
+                  value="${child.name}"
+                  readonly
+                  style="background-color: #f5f5f5; cursor: default;"
+                />
+                <input type="hidden" id="childId" name="childId" value="${child.id}" />
+              `;
+            } else {
+              // Multiple children: show dropdown (clear placeholder first)
+              childSelect.innerHTML = "";
+              children.forEach((child) => {
+                const option = document.createElement("option");
+                option.value = child.id;
+                option.textContent = child.name;
+                childSelect.appendChild(option);
+              });
+            }
+
+            // Show form, hide loading
+            loadingDiv.style.display = "none";
+            form.style.display = "block";
+
+            // If editing, load the sleep data
+            if (isEditMode) {
+              loadSleepData();
+            }
+          } else {
+            showMessage("Failed to load children", "error");
+          }
+        } catch (error) {
+          showMessage("Network error loading children", "error");
+        }
+      }
+
+      async function loadSleepData() {
+        try {
+          const response = await fetch(`/api/sleep/${sleepId}`, {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (response.ok) {
+            const sleep = await response.json();
+
+            // Populate form with existing data
+            document.getElementById("childId").value = sleep.child_id;
+
+            // Format datetime for datetime-local input
+            const startTime = new Date(sleep.start_time);
+            const startLocalDateTime = new Date(
+              startTime.getTime() - startTime.getTimezoneOffset() * 60000,
+            )
+              .toISOString()
+              .slice(0, 16);
+            document.getElementById("startTime").value = startLocalDateTime;
+
+            if (sleep.end_time) {
+              const endTime = new Date(sleep.end_time);
+              const endLocalDateTime = new Date(
+                endTime.getTime() - endTime.getTimezoneOffset() * 60000,
+              )
+                .toISOString()
+                .slice(0, 16);
+              document.getElementById("endTime").value = endLocalDateTime;
+            }
+          } else {
+            showMessage("Failed to load sleep data", "error");
+          }
+        } catch (error) {
+          showMessage("Network error loading sleep", "error");
+        }
+      }
+
+      loadChildren();
+
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const childId = parseInt(document.getElementById("childId").value);
+        const startTime = document.getElementById("startTime").value;
+        const endTimeValue = document.getElementById("endTime").value;
+
+        // Disable button during request
+        submitBtn.disabled = true;
+        submitBtn.textContent = isEditMode ? "Updating..." : "Logging...";
+        messageDiv.classList.remove("show");
+
+        try {
+          const url = isEditMode ? `/api/sleep/${sleepId}` : "/api/sleep";
+          const method = isEditMode ? "PUT" : "POST";
+
+          const response = await fetch(url, {
+            method: method,
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify({
+              child_id: childId,
+              start_time: startTime,
+              end_time: endTimeValue || null,
+            }),
+          });
+
+          const data = await response.json();
+
+          if (response.ok) {
+            showMessage(
+              isEditMode
+                ? "Sleep updated successfully!"
+                : "Sleep logged successfully!",
+              "success",
+            );
+            // Redirect to appropriate page after 1 second
+            setTimeout(() => {
+              window.location.href = getReturnUrl();
+            }, 1000);
+          } else {
+            showMessage(
+              data.detail ||
+                `Failed to ${isEditMode ? "update" : "log"} sleep. Please try again.`,
+              "error",
+            );
+          }
+        } catch (error) {
+          showMessage("Network error. Please try again.", "error");
+        } finally {
+          submitBtn.disabled = false;
+          submitBtn.textContent = isEditMode ? "Update Sleep" : "Log Sleep";
+        }
+      });
+
+      function showMessage(text, type) {
+        messageDiv.textContent = text;
+        messageDiv.className = `message ${type} show`;
+      }
+
+      function goBack() {
+        window.location.href = getReturnUrl();
+      }
+    </script>
+  </body>
+</html>

src/baby_monitor/static/settings.html

@@ -16,9 +16,11 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-color: #f0f0f0;
         min-height: 100vh;
-        padding: 20px;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
       }
 
       .container {
@@ -26,8 +28,6 @@
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
-        max-width: 800px;
-        margin: 0 auto;
       }
 
       h1 {
@@ -533,14 +533,23 @@
         container.innerHTML = `
           <div class="children-list">
             ${children
-              .map(
+              .map((child) => {
-                (child) => `
+                // Get list of other users (excluding current user)
+                const otherUsers =
+                  child.parent_usernames && child.parent_usernames.length > 1
+                    ? child.parent_usernames.filter(
+                        (username) => username !== currentUser.username,
+                      )
+                    : [];
+
+                return `
               <div class="child-card">
-                <h3>👶 ${child.name}</h3>
+                <h3 style="margin: 0;">👶 ${child.name}</h3>
                 <div class="child-info">
                   <p><strong>Birth Date:</strong> ${formatDate(child.birth_time)}</p>
                   <p><strong>Birth Weight:</strong> ${child.birth_weight}g</p>
                   <p><strong>Added:</strong> ${formatDate(child.created_at)}</p>
+                  ${otherUsers.length > 0 ? `<p><strong>Shared with:</strong> ${otherUsers.join(", ")}</p>` : ""}
                 </div>
                 <div class="child-actions">
                   <button class="button secondary" onclick="editChild(${child.id})">
@@ -551,8 +560,8 @@
                   </button>
                 </div>
               </div>
-            `,
+            `;
-              )
+              })
               .join("")}
           </div>
         `;
@@ -568,12 +577,17 @@
       }
 
       function editChild(childId) {
-        // Redirect to a child edit page or show a modal
-        // For now, just show an alert
         const child = children.find((c) => c.id === childId);
-        if (child) {
+        if (!child) return;
-          alert(`Edit functionality for ${child.name} coming soon!`);
+
-        }
+        // Redirect to add-child page with child data in query params
+        const params = new URLSearchParams({
+          id: child.id,
+          name: child.name,
+          birth_time: child.birth_time,
+          birth_weight: child.birth_weight,
+        });
+        window.location.href = `/add-child.html?${params.toString()}`;
       }
 
       async function shareChild(childId) {

src/baby_monitor/static/sleep.html

@@ -16,9 +16,11 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        background-color: #f0f0f0;
         min-height: 100vh;
-        padding: 20px;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
       }
 
       .container {
@@ -26,8 +28,6 @@
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
         padding: 40px;
-        max-width: 1000px;
-        margin: 0 auto;
       }
 
       h1 {
@@ -72,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -114,6 +118,13 @@
       .chart-wrapper {
         position: relative;
         height: 300px;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      .chart-wrapper canvas {
+        max-width: 100%;
+        max-height: 100%;
       }
 
       .charts-row {
@@ -317,27 +328,33 @@
       let allChildren = [];
       let selectedChildId = "";
 
-      // Filter change handlers
+      // Filter change handlers (will be attached after children are loaded)
-      document
+      function attachChildFilterListener() {
-        .getElementById("childFilter")
+        const childFilter = document.getElementById("childFilter");
-        .addEventListener("change", function () {
+        if (childFilter) {
-          selectedChildId = this.value;
+          childFilter.addEventListener("change", function () {
-          // Save selection to localStorage
+            selectedChildId = this.value;
-          if (selectedChildId) {
+            // Save selection to localStorage
-            localStorage.setItem("lastSleepChildFilter", selectedChildId);
+            if (selectedChildId) {
-          } else {
+              localStorage.setItem("lastSleepChildFilter", selectedChildId);
-            localStorage.removeItem("lastSleepChildFilter");
+            } else {
-          }
+              localStorage.removeItem("lastSleepChildFilter");
-          renderCharts();
+            }
-        });
+            renderCharts();
+          });
+        }
+      }
 
-      document
+      function attachTimeRangeListener() {
-        .getElementById("timeRangeFilter")
+        const timeRangeFilter = document.getElementById("timeRangeFilter");
-        .addEventListener("change", function () {
+        if (timeRangeFilter) {
-          // Save selection to localStorage
+          timeRangeFilter.addEventListener("change", function () {
-          localStorage.setItem("lastSleepTimeRange", this.value);
+            // Save selection to localStorage
-          loadData();
+            localStorage.setItem("lastSleepTimeRange", this.value);
-        });
+            renderCharts();
+          });
+        }
+      }
 
       async function loadData() {
         try {
@@ -354,19 +371,52 @@
 
           allChildren = await childrenResponse.json();
 
-          // Populate child filter
+          // Auto-select first child if available
-          const childFilter = document.getElementById("childFilter");
+          if (allChildren.length > 0 && !selectedChildId) {
-          childFilter.innerHTML = '<option value="">All Children</option>';
+            selectedChildId = allChildren[0].id;
-          allChildren.forEach((child) => {
+          }
-            const option = document.createElement("option");
+
-            option.value = child.id;
+          // Populate child filter or show single child
-            option.textContent = child.name;
+          const childFilterContainer = document.querySelector(".controls");
-            childFilter.appendChild(option);
+          if (allChildren.length === 1) {
-          });
+            // Single child: show as read-only text
+            const child = allChildren[0];
+            childFilterContainer.innerHTML = `
+              <label for="childDisplay">Child:</label>
+              <input
+                type="text"
+                id="childDisplay"
+                value="${child.name}"
+                readonly
+                style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
+              />
+
+              <label for="timeRangeFilter">Time Range:</label>
+              <select id="timeRangeFilter">
+                <option value="1">Last 24 hours</option>
+                <option value="3">Last 3 days</option>
+                <option value="7" selected>Last 7 days</option>
+                <option value="14">Last 14 days</option>
+                <option value="30">Last 30 days</option>
+                <option value="90">Last 90 days</option>
+              </select>
+            `;
+          } else {
+            // Multiple children: show dropdown
+            const childFilter = document.getElementById("childFilter");
+            childFilter.innerHTML = "";
+            allChildren.forEach((child) => {
+              const option = document.createElement("option");
+              option.value = child.id;
+              option.textContent = child.name;
+              childFilter.appendChild(option);
+            });
+          }
 
           // Restore last selected child from localStorage
           const lastChildId = localStorage.getItem("lastSleepChildFilter");
-          if (lastChildId) {
+          if (lastChildId && allChildren.length > 1) {
+            const childFilter = document.getElementById("childFilter");
             childFilter.value = lastChildId;
             selectedChildId = lastChildId;
           }
@@ -391,6 +441,14 @@
 
           allSleeps = await sleepResponse.json();
 
+          // Attach event listener for child filter if multiple children
+          if (allChildren.length > 1) {
+            attachChildFilterListener();
+          }
+
+          // Always attach time range listener after recreating the controls
+          attachTimeRangeListener();
+
           renderCharts();
         } catch (error) {
           console.error("Error loading data:", error);
@@ -506,7 +564,10 @@
           </div>
 
           <div class="list-container">
-            <h2>Recent Sleep Sessions</h2>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+              <h2 style="margin: 0;">Recent Sleep Sessions</h2>
+              <button class="button" onclick="addManualSleep()" style="padding: 8px 16px; font-size: 14px;">➕ Add Manual Entry</button>
+            </div>
             <div class="sleep-list">
               ${filteredSleeps
                 .slice(0, 50)
@@ -547,15 +608,15 @@
         const sessionCounts = []; // For reference
 
         // Only use completed sleep sessions
-        const completedSessions = sleepSessions.filter(s => s.end_time);
+        const completedSessions = sleepSessions.filter((s) => s.end_time);
 
         // If 24 hours selected, show 3-hour aggregates
         if (timeRange === 1) {
           // Create 8 three-hour buckets
           for (let i = 7; i >= 0; i--) {
             const periodStart = new Date(now);
-            periodStart.setHours(periodStart.getHours() - (i * 3), 0, 0, 0);
+            periodStart.setHours(periodStart.getHours() - i * 3, 0, 0, 0);
-            
+
             const periodEnd = new Date(periodStart);
             periodEnd.setHours(periodEnd.getHours() + 3);
 
@@ -574,11 +635,12 @@
               const startDate = new Date(session.start_time);
               return startDate >= periodStart && startDate < periodEnd;
             });
-            
+
-            const sessionDurations = periodSessions.map(session => 
+            const sessionDurations = periodSessions.map(
-              calculateDuration(session.start_time, session.end_time) / 60
+              (session) =>
+                calculateDuration(session.start_time, session.end_time) / 60,
             );
-            
+
             durations.push(sessionDurations);
             sessionCounts.push(periodSessions.length);
           }
@@ -586,8 +648,8 @@
           // Show 8-hour aggregates for 3 days (9 buckets total)
           for (let i = 8; i >= 0; i--) {
             const periodStart = new Date(now);
-            periodStart.setHours(periodStart.getHours() - (i * 8), 0, 0, 0);
+            periodStart.setHours(periodStart.getHours() - i * 8, 0, 0, 0);
-            
+
             const periodEnd = new Date(periodStart);
             periodEnd.setHours(periodEnd.getHours() + 8);
 
@@ -612,11 +674,12 @@
               const startDate = new Date(session.start_time);
               return startDate >= periodStart && startDate < periodEnd;
             });
-            
+
-            const sessionDurations = periodSessions.map(session => 
+            const sessionDurations = periodSessions.map(
-              calculateDuration(session.start_time, session.end_time) / 60
+              (session) =>
+                calculateDuration(session.start_time, session.end_time) / 60,
             );
-            
+
             durations.push(sessionDurations);
             sessionCounts.push(periodSessions.length);
           }
@@ -641,29 +704,39 @@
               const startDate = new Date(session.start_time);
               return startDate >= date && startDate < nextDay;
             });
-            
+
-            const sessionDurations = daySessions.map(session => {
+            const sessionDurations = daySessions.map((session) => {
-              const dur = calculateDuration(session.start_time, session.end_time) / 60;
+              const dur =
-              console.log(`  Session: ${session.start_time} to ${session.end_time}, duration: ${dur} hours (${calculateDuration(session.start_time, session.end_time)} minutes)`);
+                calculateDuration(session.start_time, session.end_time) / 60;
+              console.log(
+                `  Session: ${session.start_time} to ${session.end_time}, duration: ${dur} hours (${calculateDuration(session.start_time, session.end_time)} minutes)`,
+              );
               return dur;
             });
-            
+
-            console.log(`${dateStr}: ${daySessions.length} sessions, durations:`, sessionDurations);
+            console.log(
-            
+              `${dateStr}: ${daySessions.length} sessions, durations:`,
+              sessionDurations,
+            );
+
             durations.push(sessionDurations);
             sessionCounts.push(daySessions.length);
           }
         }
 
-        console.log('Final prepareBarChartData result:', { labels, durations, sessionCounts });
+        console.log("Final prepareBarChartData result:", {
-        
+          labels,
+          durations,
+          sessionCounts,
+        });
+
         // Log the actual duration values for debugging
         durations.forEach((periodDurations, idx) => {
           if (periodDurations.length > 0) {
             console.log(`  ${labels[idx]}: durations =`, periodDurations);
           }
         });
-        
+
         return { labels, durations, sessionCounts };
       }
 
@@ -699,31 +772,36 @@
 
       function renderBarChart(chartData) {
         const ctx = document.getElementById("barChart");
-        
+
         // Destroy existing chart if it exists
         if (barChartInstance) {
           barChartInstance.destroy();
         }
-        
+
         // Debug: Log the data
-        console.log('Bar chart data:', chartData);
+        console.log("Bar chart data:", chartData);
-        
+
         // Find the maximum number of sessions in any period
-        const maxSessions = Math.max(...chartData.durations.map(d => d.length), 0);
+        const maxSessions = Math.max(
-        
+          ...chartData.durations.map((d) => d.length),
-        console.log('Max sessions:', maxSessions);
+          0,
-        
+        );
+
+        console.log("Max sessions:", maxSessions);
+
         // If no sessions at all, show empty chart
         if (maxSessions === 0) {
           barChartInstance = new Chart(ctx, {
             type: "bar",
             data: {
               labels: chartData.labels,
-              datasets: [{
+              datasets: [
-                label: "No Data",
+                {
-                data: new Array(chartData.labels.length).fill(0),
+                  label: "No Data",
-                backgroundColor: "rgba(79, 172, 254, 0.3)",
+                  data: new Array(chartData.labels.length).fill(0),
-              }],
+                  backgroundColor: "rgba(79, 172, 254, 0.3)",
+                },
+              ],
             },
             options: {
               responsive: true,
@@ -747,57 +825,64 @@
           });
           return;
         }
-        
+
         // Create color palette for different sessions
         const colors = [
-          'rgba(79, 172, 254, 0.8)',
+          "rgba(79, 172, 254, 0.8)",
-          'rgba(0, 242, 254, 0.8)',
+          "rgba(0, 242, 254, 0.8)",
-          'rgba(58, 155, 232, 0.8)',
+          "rgba(58, 155, 232, 0.8)",
-          'rgba(32, 137, 220, 0.8)',
+          "rgba(32, 137, 220, 0.8)",
-          'rgba(21, 119, 208, 0.8)',
+          "rgba(21, 119, 208, 0.8)",
-          'rgba(11, 101, 196, 0.8)',
+          "rgba(11, 101, 196, 0.8)",
-          'rgba(79, 172, 254, 0.6)',
+          "rgba(79, 172, 254, 0.6)",
-          'rgba(0, 242, 254, 0.6)',
+          "rgba(0, 242, 254, 0.6)",
-          'rgba(58, 155, 232, 0.6)',
+          "rgba(58, 155, 232, 0.6)",
-          'rgba(32, 137, 220, 0.6)',
+          "rgba(32, 137, 220, 0.6)",
         ];
-        
+
         // Create datasets - one for each session position
         const datasets = [];
         for (let sessionIndex = 0; sessionIndex < maxSessions; sessionIndex++) {
-          const dataForSession = chartData.durations.map(periodDurations => 
+          const dataForSession = chartData.durations.map(
-            periodDurations[sessionIndex] || 0
+            (periodDurations) => periodDurations[sessionIndex] || 0,
           );
-          
+
           console.log(`Session ${sessionIndex + 1} data:`, dataForSession);
-          
+
           datasets.push({
             label: `Session ${sessionIndex + 1}`,
             data: dataForSession,
             backgroundColor: colors[sessionIndex % colors.length],
-            borderColor: colors[sessionIndex % colors.length].replace('0.8', '1').replace('0.6', '1'),
+            borderColor: colors[sessionIndex % colors.length]
+              .replace("0.8", "1")
+              .replace("0.6", "1"),
             borderWidth: 1,
           });
         }
-        
+
-        console.log('Datasets:', datasets);
+        console.log("Datasets:", datasets);
-        
+
         // Determine the maximum total duration across all periods (in hours)
-        const maxDuration = Math.max(...chartData.durations.map(periodDurations => 
+        const maxDuration = Math.max(
-          periodDurations.reduce((sum, val) => sum + val, 0)
+          ...chartData.durations.map((periodDurations) =>
-        ), 0);
+            periodDurations.reduce((sum, val) => sum + val, 0),
-        
+          ),
-        console.log('Max duration (hours):', maxDuration);
+          0,
-        
+        );
+
+        console.log("Max duration (hours):", maxDuration);
+
         // Decide whether to use minutes or hours based on max duration
         const useMinutes = maxDuration < 2; // Use minutes if max is less than 2 hours
-        
+
         // Convert data to minutes if needed
-        const finalDatasets = useMinutes ? datasets.map(dataset => ({
+        const finalDatasets = useMinutes
-          ...dataset,
+          ? datasets.map((dataset) => ({
-          data: dataset.data.map(hours => hours * 60) // Convert hours to minutes
+              ...dataset,
-        })) : datasets;
+              data: dataset.data.map((hours) => hours * 60), // Convert hours to minutes
-        
+            }))
+          : datasets;
+
         barChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
@@ -819,13 +904,13 @@
                   text: useMinutes ? "Minutes" : "Hours",
                 },
                 ticks: {
-                  callback: function(value) {
+                  callback: function (value) {
                     if (useMinutes) {
-                      return Math.round(value) + 'm';
+                      return Math.round(value) + "m";
                     } else {
-                      return value.toFixed(1) + 'h';
+                      return value.toFixed(1) + "h";
                     }
-                  }
+                  },
                 },
               },
             },
@@ -835,8 +920,10 @@
               },
               tooltip: {
                 callbacks: {
-                  label: function(context) {
+                  label: function (context) {
-                    const value = useMinutes ? context.parsed.y / 60 : context.parsed.y;
+                    const value = useMinutes
+                      ? context.parsed.y / 60
+                      : context.parsed.y;
                     const hours = Math.floor(value);
                     const minutes = Math.round((value - hours) * 60);
                     if (hours === 0) {
@@ -844,18 +931,21 @@
                     }
                     return `${context.dataset.label}: ${hours}h ${minutes}m`;
                   },
-                  footer: function(tooltipItems) {
+                  footer: function (tooltipItems) {
                     const periodIndex = tooltipItems[0].dataIndex;
-                    const totalHours = chartData.durations[periodIndex].reduce((sum, val) => sum + val, 0);
+                    const totalHours = chartData.durations[periodIndex].reduce(
+                      (sum, val) => sum + val,
+                      0,
+                    );
                     const hours = Math.floor(totalHours);
                     const minutes = Math.round((totalHours - hours) * 60);
                     const sessionCount = chartData.sessionCounts[periodIndex];
                     if (hours === 0) {
-                      return `Total: ${minutes}m (${sessionCount} session${sessionCount !== 1 ? 's' : ''})`;
+                      return `Total: ${minutes}m (${sessionCount} session${sessionCount !== 1 ? "s" : ""})`;
                     }
-                    return `Total: ${hours}h ${minutes}m (${sessionCount} session${sessionCount !== 1 ? 's' : ''})`;
+                    return `Total: ${hours}h ${minutes}m (${sessionCount} session${sessionCount !== 1 ? "s" : ""})`;
-                  }
+                  },
-                }
+                },
               },
             },
           },
@@ -864,12 +954,12 @@
 
       function renderDurationChart(chartData) {
         const ctx = document.getElementById("durationChart");
-        
+
         // Destroy existing chart if it exists
         if (durationChartInstance) {
           durationChartInstance.destroy();
         }
-        
+
         durationChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
@@ -905,7 +995,7 @@
         if (avgDurationChartInstance) {
           avgDurationChartInstance.destroy();
         }
-        
+
         const days = {};
         const today = new Date();
         today.setHours(0, 0, 0, 0);
@@ -1014,10 +1104,17 @@
               </div>
               <div class="sleep-duration">${durationText}</div>
             </div>
+            <div class="sleep-actions">
+              <button class="edit-button" onclick="window.location.href='/log-sleep.html?id=${sleep.id}'">Edit</button>
+            </div>
           </div>
         `;
       }
 
+      function addManualSleep() {
+        window.location.href = `/log-sleep.html`;
+      }
+
       async function logout() {
         try {
           await fetch("/api/logout", {

src/baby_monitor/utils/__init__.py

@@ -1,4 +1,5 @@
 """Utility functions for the baby monitor application."""
+
 from .hash_password import hash_password
 from .verify_child_access import verify_child_access
 from .verify_password import verify_password