Merge pull request 'align-index-page' (#25) from align-index-page into main

Reviewed-on: #25

Dockerfile

@@ -23,7 +23,9 @@ COPY pyproject.toml README.md ./
 COPY src/ ./src/
 
 # Install Python dependencies including all optional dependencies
-# This makes the image self-contained and ready for any configuration
+# This makes the image self-contained and ready for any configuration:
+# - Redis support (redis extra)
+# - PostgreSQL support (postgres extra)
 RUN uv sync --no-dev --all-extras
 
 # Add virtual environment to PATH

README.md

@@ -81,13 +81,14 @@ uv run uvicorn src.baby_monitor.main:app --reload --host 0.0.0.0 --port 8000
 
 ### Environment Variables
 
-| Variable         | Default      | Description                                 |
-| ---------------- | ------------ | ------------------------------------------- |
-| `ENVIRONMENT`    | `production` | Set to `development` to enable API docs     |
-| `ADMIN_PASSWORD` | _(required)_ | Admin user password                         |
-| `ADMIN_USERNAME` | `admin`      | Admin username                              |
-| `DATA_DIR`       | `/data`      | Directory for SQLite database               |
-| `REDIS_URI`      | _(optional)_ | Redis connection URI for distributed tokens |
+| Variable         | Default      | Description                                    |
+| ---------------- | ------------ | ---------------------------------------------- |
+| `ENVIRONMENT`    | `production` | Set to `development` to enable API docs        |
+| `ADMIN_PASSWORD` | _(required)_ | Admin user password                            |
+| `ADMIN_USERNAME` | `admin`      | Admin username                                 |
+| `DATA_DIR`       | `/data`      | Directory for SQLite database (SQLite only)    |
+| `REDIS_URI`      | _(optional)_ | Redis connection URI for distributed tokens    |
+| `POSTGRES_URI`   | _(optional)_ | PostgreSQL connection URI for database storage |
 
 ### Storage Options
 
@@ -96,18 +97,26 @@ uv run uvicorn src.baby_monitor.main:app --reload --host 0.0.0.0 --port 8000
 - Automatic setup, no configuration needed
 - Data stored in `/data/baby_monitor.db`
 - Perfect for single-server deployments
+- Timezone-aware datetimes stored as naive UTC
 
-**Redis (Optional)**
+**Redis (Optional - Token Storage)**
 
 ```bash
-# Enable Redis token storage
+# Enable Redis token storage for distributed deployments
 export REDIS_URI=redis://localhost:6379
 ```
 
-**PostgreSQL (Future)**
+**PostgreSQL (Optional - Database)**
 
-- Repository interface ready
-- Swap implementation in `dependencies.py`
+```bash
+# Enable PostgreSQL for production database
+export POSTGRES_URI=postgresql://user:password@localhost:5432/baby_monitor
+```
+
+- Supports timezone-aware datetimes natively
+- Recommended for production deployments
+- Better performance for concurrent access
+- Supports database migrations and backups
 
 ## 📁 Project Structure
 

docker-compose.prod.yml

@@ -5,9 +5,6 @@ services:
       dockerfile: Dockerfile
     ports:
       - "8000:8000"
-    volumes:
-      # Persist database to local directory
-      - ./data:/data
     environment:
       # Set environment to production
       - ENVIRONMENT=production
@@ -17,7 +14,7 @@ services:
       # Use Redis for token storage
       - REDIS_URI=redis://redis:6379/0
       # Use PostgreSQL for database
-      - DATABASE_URL=postgresql://baby_monitor:securepassword@postgres:5432/baby_monitor_db
+      - POSTGRES_URI=postgresql://baby_monitor:securepassword@postgres:5432/baby_monitor_db
     command: ["--host", "0.0.0.0", "--port", "8000"]
     restart: unless-stopped
     depends_on:
@@ -54,7 +51,7 @@ services:
       interval: 10s
       timeout: 5s
       retries: 5
-      start_period: 10s
+      start_period: 3s
 volumes:
   redis-data:
   pgdata:

src/baby_monitor/main.py

@@ -119,6 +119,24 @@ def serve_sleep() -> FileResponse:
     return FileResponse(static_path / "sleep.html")
 
 
+@app.get("/settings.html", include_in_schema=False)
+def serve_settings() -> FileResponse:
+    """Serve the settings page."""
+    return FileResponse(static_path / "settings.html")
+
+
+@app.get("/menu.css", include_in_schema=False)
+def serve_menu_css() -> FileResponse:
+    """Serve the shared menu CSS."""
+    return FileResponse(static_path / "menu.css")
+
+
+@app.get("/menu.js", include_in_schema=False)
+def serve_menu_js() -> FileResponse:
+    """Serve the shared menu JavaScript."""
+    return FileResponse(static_path / "menu.js")
+
+
 @app.get("/api/")
 def read_root(token: Annotated[str, Depends(verify_token)]) -> dict:
     """API root endpoint (requires authentication)."""

src/baby_monitor/models/child.py

@@ -19,5 +19,4 @@ class ChildResponse(BaseModel):
     name: str
     birth_time: datetime
     birth_weight: float
-    user_id: int
     created_at: datetime

src/baby_monitor/models/child_invitation.py

@@ -0,0 +1,41 @@
+"""Child invitation model for sharing child access."""
+
+from datetime import datetime
+from typing import TYPE_CHECKING
+from sqlalchemy import Boolean, DateTime, Integer, String, ForeignKey
+from sqlalchemy.orm import Mapped, mapped_column
+
+if TYPE_CHECKING:
+    from sqlalchemy.orm import DeclarativeBase
+
+    Base = DeclarativeBase
+else:
+    from baby_monitor.repositories.dependencies.get_database import Base
+
+
+class ChildInvitation(Base):
+    """Invitation code for sharing child access with other users."""
+
+    __tablename__ = "child_invitations"
+
+    id: Mapped[int] = mapped_column(Integer, primary_key=True, autoincrement=True)
+    code: Mapped[str] = mapped_column(String, unique=True, nullable=False)
+    child_id: Mapped[int] = mapped_column(
+        Integer, ForeignKey("children.id"), nullable=False
+    )
+    created_by_user_id: Mapped[int] = mapped_column(
+        Integer, ForeignKey("users.id"), nullable=False
+    )
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), nullable=False
+    )
+    expires_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), nullable=False
+    )
+    is_consumed: Mapped[bool] = mapped_column(Boolean, default=False, nullable=False)
+    consumed_by_user_id: Mapped[int | None] = mapped_column(
+        Integer, ForeignKey("users.id"), nullable=True
+    )
+    consumed_at: Mapped[datetime | None] = mapped_column(
+        DateTime(timezone=True), nullable=True
+    )

src/baby_monitor/models/db/child.py

@@ -1,7 +1,7 @@
 """Child database model."""
 
 from typing import TYPE_CHECKING
-from sqlalchemy import Column, Integer, String, DateTime, Float, ForeignKey
+from sqlalchemy import Column, Integer, String, DateTime, Float
 from datetime import datetime
 
 if TYPE_CHECKING:
@@ -19,10 +19,11 @@ class Child(Base):
 
     id = Column(Integer, primary_key=True, index=True)
     name = Column(String, nullable=False)
-    birth_time = Column(DateTime, nullable=False)
+    birth_time = Column(DateTime(timezone=True), nullable=False)
     birth_weight = Column(Float, nullable=False)  # in grams
-    user_id = Column(Integer, ForeignKey("users.id"), nullable=False)
-    created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
+    created_at = Column(
+        DateTime(timezone=True), default=datetime.utcnow, nullable=False
+    )
 
     def __repr__(self) -> str:
-        return f"<Child(id={self.id}, name='{self.name}', user_id={self.user_id})>"
+        return f"<Child(id={self.id}, name='{self.name}')>"

src/baby_monitor/models/db/child_parent.py

@@ -0,0 +1,31 @@
+"""Child-Parent junction table for many-to-many relationship."""
+
+from typing import TYPE_CHECKING
+from sqlalchemy import Column, Integer, ForeignKey, DateTime
+from datetime import datetime
+
+if TYPE_CHECKING:
+    from sqlalchemy.orm import DeclarativeBase
+
+    Base = DeclarativeBase
+else:
+    from baby_monitor.repositories.dependencies.get_database import Base
+
+
+class ChildParent(Base):
+    """Junction table linking children to their parents (users)."""
+
+    __tablename__ = "child_parents"
+
+    id = Column(Integer, primary_key=True, index=True)
+    child_id = Column(Integer, ForeignKey("children.id"), nullable=False)
+    user_id = Column(Integer, ForeignKey("users.id"), nullable=False)
+    created_at = Column(
+        DateTime(timezone=True), default=datetime.utcnow, nullable=False
+    )
+
+    def __repr__(self) -> str:
+        return (
+            f"<ChildParent(id={self.id}, "
+            f"child_id={self.child_id}, user_id={self.user_id})>"
+        )

src/baby_monitor/models/db/diaper_change.py

@@ -19,12 +19,14 @@ class DiaperChange(Base):
 
     id = Column(Integer, primary_key=True, index=True)
     child_id = Column(Integer, ForeignKey("children.id"), nullable=False)
-    change_time = Column(DateTime, nullable=False)
+    change_time = Column(DateTime(timezone=True), nullable=False)
     poop_amount = Column(String, nullable=True)  # stores PoopAmount enum
     poop_color = Column(String, nullable=True)  # stores PoopColor enum
     pee_amount = Column(String, nullable=True)  # stores PeeAmount enum
     pee_color = Column(String, nullable=True)  # stores PeeColor enum
-    created_at = Column(DateTime, default=datetime.now(UTC), nullable=False)
+    created_at = Column(
+        DateTime(timezone=True), default=datetime.now(UTC), nullable=False
+    )
 
     def __repr__(self) -> str:
         return f"<DiaperChange(id={self.id}, child_id={self.child_id})>"

src/baby_monitor/models/db/feeding.py

@@ -19,10 +19,12 @@ class Feeding(Base):
 
     id = Column(Integer, primary_key=True, index=True)
     child_id = Column(Integer, ForeignKey("children.id"), nullable=False)
-    start_time = Column(DateTime, nullable=False)
-    end_time = Column(DateTime, nullable=True)
+    start_time = Column(DateTime(timezone=True), nullable=False)
+    end_time = Column(DateTime(timezone=True), nullable=True)
     feeding_type = Column(String, nullable=False)  # stores FeedingType enum
-    created_at = Column(DateTime, default=datetime.now(UTC), nullable=False)
+    created_at = Column(
+        DateTime(timezone=True), default=datetime.now(UTC), nullable=False
+    )
 
     def __repr__(self) -> str:
         return f"<Feeding(id={self.id}, child_id={self.child_id})>"

src/baby_monitor/models/db/sleep.py

@@ -1,8 +1,8 @@
 """Sleep database model."""
 
 from typing import TYPE_CHECKING
-from sqlalchemy import Column, Integer, DateTime, ForeignKey
 from datetime import datetime, UTC
+from sqlalchemy import Column, Integer, DateTime, ForeignKey
 
 if TYPE_CHECKING:
     from sqlalchemy.orm import DeclarativeBase
@@ -19,9 +19,11 @@ class Sleep(Base):
 
     id = Column(Integer, primary_key=True, index=True)
     child_id = Column(Integer, ForeignKey("children.id"), nullable=False)
-    start_time = Column(DateTime, nullable=False)
-    end_time = Column(DateTime, nullable=True)
-    created_at = Column(DateTime, default=datetime.now(UTC), nullable=False)
+    start_time = Column(DateTime(timezone=True), nullable=False)
+    end_time = Column(DateTime(timezone=True), nullable=True)
+    created_at = Column(
+        DateTime(timezone=True), default=datetime.now(UTC), nullable=False
+    )
 
     def __repr__(self) -> str:
         return f"<Sleep(id={self.id}, child_id={self.child_id})>"

src/baby_monitor/models/db/user.py

@@ -21,7 +21,9 @@ class User(Base):
     username = Column(String, unique=True, index=True, nullable=False)
     hashed_password = Column(String, nullable=False)
     is_admin = Column(Boolean, default=False, nullable=False)
-    created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
+    created_at = Column(
+        DateTime(timezone=True), default=datetime.utcnow, nullable=False
+    )
 
     def __repr__(self) -> str:
         return f"<User(id={self.id}, username='{self.username}')>"

src/baby_monitor/repositories/__init__.py

@@ -1,13 +1,23 @@
 """Repository implementations package."""
 
 from baby_monitor.repositories.dependencies import (
+    get_child_repository,
     get_credentials_repository,
+    get_diaper_change_repository,
+    get_feeding_repository,
+    get_invitation_repository,
+    get_sleep_repository,
     get_token_repository,
     get_user_repository,
 )
 
 __all__ = [
+    "get_child_repository",
     "get_credentials_repository",
+    "get_diaper_change_repository",
+    "get_feeding_repository",
+    "get_invitation_repository",
+    "get_sleep_repository",
     "get_token_repository",
     "get_user_repository",
 ]

src/baby_monitor/repositories/child/sqlite_child.py

@@ -1,16 +1,23 @@
-"""SQLite implementation of child repository."""
+"""Database-agnostic implementation of child repository.
 
-from datetime import datetime
+Works with both SQLite and PostgreSQL.
+"""
+
+from datetime import datetime, UTC
 from sqlalchemy.orm import Session
 
-from baby_monitor.repositories.interfaces.child_repository_interface import (
+from baby_monitor.repositories.interfaces import (
     ChildRepositoryInterface,
 )
 from baby_monitor.models.db.child import Child
+from baby_monitor.models.db.child_parent import ChildParent
 
 
-class SQLiteChildRepository(ChildRepositoryInterface):
-    """SQLite implementation for child data access."""
+class DatabaseChildRepository(ChildRepositoryInterface):
+    """Database implementation for child data access.
+
+    Works with both SQLite and PostgreSQL databases.
+    """
 
     def __init__(self, db: Session):
         self.db = db
@@ -18,23 +25,29 @@ class SQLiteChildRepository(ChildRepositoryInterface):
     def create(
         self, name: str, birth_time: datetime, birth_weight: float, user_id: int
     ) -> dict:
-        """Create a new child record."""
+        """Create a new child record and link to user."""
         child = Child(
             name=name,
             birth_time=birth_time,
             birth_weight=birth_weight,
-            user_id=user_id,
         )
         self.db.add(child)
         self.db.commit()
         self.db.refresh(child)
 
+        # Create the child-parent relationship
+        child_parent = ChildParent(
+            child_id=child.id,
+            user_id=user_id,
+        )
+        self.db.add(child_parent)
+        self.db.commit()
+
         return {
             "id": child.id,
             "name": child.name,
             "birth_time": child.birth_time,
             "birth_weight": child.birth_weight,
-            "user_id": child.user_id,
             "created_at": child.created_at,
         }
 
@@ -49,13 +62,18 @@ class SQLiteChildRepository(ChildRepositoryInterface):
             "name": child.name,
             "birth_time": child.birth_time,
             "birth_weight": child.birth_weight,
-            "user_id": child.user_id,
             "created_at": child.created_at,
         }
 
     def get_by_user_id(self, user_id: int) -> list[dict]:
-        """Get all children for a specific user."""
-        children = self.db.query(Child).filter(Child.user_id == user_id).all()
+        """Get all children for a specific user via junction table."""
+        # Join Child and ChildParent tables
+        children = (
+            self.db.query(Child)
+            .join(ChildParent, Child.id == ChildParent.child_id)
+            .filter(ChildParent.user_id == user_id)
+            .all()
+        )
 
         return [
             {
@@ -63,12 +81,59 @@ class SQLiteChildRepository(ChildRepositoryInterface):
                 "name": child.name,
                 "birth_time": child.birth_time,
                 "birth_weight": child.birth_weight,
-                "user_id": child.user_id,
                 "created_at": child.created_at,
             }
             for child in children
         ]
 
+    def get_parent_ids(self, child_id: int) -> list[int]:
+        """Get all parent user IDs for a specific child."""
+        parent_ids = (
+            self.db.query(ChildParent.user_id)
+            .filter(ChildParent.child_id == child_id)
+            .all()
+        )
+        return [user_id for (user_id,) in parent_ids]
+
+    def remove_parent(self, child_id: int, user_id: int) -> bool:
+        """Remove a parent-child relationship."""
+        link = (
+            self.db.query(ChildParent)
+            .filter(
+                ChildParent.child_id == child_id,
+                ChildParent.user_id == user_id,
+            )
+            .first()
+        )
+        if link:
+            self.db.delete(link)
+            self.db.commit()
+            return True
+        return False
+
+    def add_parent(self, child_id: int, user_id: int) -> bool:
+        """Add a parent-child relationship."""
+        # Check if relationship already exists
+        existing = (
+            self.db.query(ChildParent)
+            .filter(
+                ChildParent.child_id == child_id,
+                ChildParent.user_id == user_id,
+            )
+            .first()
+        )
+        if existing:
+            return False
+
+        link = ChildParent(
+            child_id=child_id,
+            user_id=user_id,
+            created_at=datetime.now(UTC),
+        )
+        self.db.add(link)
+        self.db.commit()
+        return True
+
     def update(
         self,
         child_id: int,
@@ -96,16 +161,19 @@ class SQLiteChildRepository(ChildRepositoryInterface):
             "name": child.name,
             "birth_time": child.birth_time,
             "birth_weight": child.birth_weight,
-            "user_id": child.user_id,
             "created_at": child.created_at,
         }
 
     def delete(self, child_id: int) -> bool:
-        """Delete a child record."""
+        """Delete a child record and all parent relationships."""
         child = self.db.query(Child).filter(Child.id == child_id).first()
         if not child:
             return False
 
+        # Delete all parent relationships first
+        self.db.query(ChildParent).filter(ChildParent.child_id == child_id).delete()
+
+        # Delete the child
         self.db.delete(child)
         self.db.commit()
         return True

src/baby_monitor/repositories/child_invitation/__init__.py

@@ -0,0 +1,13 @@
+"""Child invitation repository implementations."""
+
+from baby_monitor.repositories.child_invitation.sqlite_child_invitation import (  # noqa: E501
+    DatabaseChildInvitationRepository,
+)
+
+# Keep old name for backward compatibility
+SQLiteChildInvitationRepository = DatabaseChildInvitationRepository
+
+__all__ = [
+    "DatabaseChildInvitationRepository",
+    "SQLiteChildInvitationRepository",
+]

src/baby_monitor/repositories/child_invitation/sqlite_child_invitation.py

@@ -0,0 +1,118 @@
+"""Database-agnostic implementation of child invitation repository.
+
+Supports both SQLite and PostgreSQL:
+- SQLite: stores datetimes as naive UTC
+- PostgreSQL: stores datetimes as timezone-aware
+"""
+
+from datetime import datetime, UTC
+from sqlalchemy.orm import Session
+from baby_monitor.models.child_invitation import ChildInvitation
+from baby_monitor.repositories.interfaces import (
+    ChildInvitationRepositoryInterface,
+)
+
+
+class DatabaseChildInvitationRepository(ChildInvitationRepositoryInterface):
+    """Database implementation of child invitation repository.
+
+    Works with both SQLite and PostgreSQL databases.
+    """
+
+    def __init__(self, db: Session):
+        """Initialize the repository with a database session."""
+        self.db = db
+
+    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)
+        """
+        now = datetime.now(UTC)
+        if reference_dt.tzinfo is None:
+            # SQLite: return naive UTC
+            return now.replace(tzinfo=None)
+        # PostgreSQL: return timezone-aware
+        return now
+
+    def create_invitation(
+        self,
+        code: str,
+        child_id: int,
+        created_by_user_id: int,
+        expires_at: datetime,
+    ) -> int:
+        """Create a new child invitation."""
+        invitation = ChildInvitation(
+            code=code,
+            child_id=child_id,
+            created_by_user_id=created_by_user_id,
+            created_at=datetime.now(UTC),
+            expires_at=expires_at,
+            is_consumed=False,
+        )
+        self.db.add(invitation)
+        self.db.commit()
+        self.db.refresh(invitation)
+        return invitation.id
+
+    def get_by_code(self, code: str) -> dict | None:
+        """Get invitation by code."""
+        invitation = (
+            self.db.query(ChildInvitation).filter(ChildInvitation.code == code).first()
+        )
+        if not invitation:
+            return None
+
+        return {
+            "id": invitation.id,
+            "code": invitation.code,
+            "child_id": invitation.child_id,
+            "created_by_user_id": invitation.created_by_user_id,
+            "created_at": invitation.created_at,
+            "expires_at": invitation.expires_at,
+            "is_consumed": invitation.is_consumed,
+            "consumed_by_user_id": invitation.consumed_by_user_id,
+            "consumed_at": invitation.consumed_at,
+        }
+
+    def verify_invitation(self, code: str) -> bool:
+        """Verify if an invitation code is valid and not expired."""
+        invitation = (
+            self.db.query(ChildInvitation).filter(ChildInvitation.code == code).first()
+        )
+
+        if not invitation:
+            return False
+
+        if invitation.is_consumed:
+            return False
+
+        # Get current time matching database timezone format
+        now_utc = self._get_now_utc(invitation.expires_at)
+        if invitation.expires_at < now_utc:
+            return False
+
+        return True
+
+    def consume_invitation(
+        self, code: str, consumed_by_user_id: int, consumed_at: datetime
+    ) -> bool:
+        """Mark invitation as consumed."""
+        invitation = (
+            self.db.query(ChildInvitation).filter(ChildInvitation.code == code).first()
+        )
+
+        if not invitation:
+            return False
+
+        invitation.is_consumed = True
+        invitation.consumed_by_user_id = consumed_by_user_id
+        invitation.consumed_at = consumed_at
+        self.db.commit()
+        return True

src/baby_monitor/repositories/dependencies/__init__.py

@@ -1,11 +1,23 @@
 """Dependency injection for repositories."""
 
+from .get_child_invitation_repository import get_child_invitation_repository
+from .get_child_repository import get_child_repository
 from .get_credentials_repository import get_credentials_repository
+from .get_diaper_change_repository import get_diaper_change_repository
+from .get_feeding_repository import get_feeding_repository
+from .get_invitation_repository import get_invitation_repository
+from .get_sleep_repository import get_sleep_repository
 from .get_token_repository import get_token_repository
 from .get_user_repository import get_user_repository
 
 __all__ = [
-    "get_user_repository",
-    "get_token_repository",
+    "get_child_invitation_repository",
+    "get_child_repository",
     "get_credentials_repository",
+    "get_diaper_change_repository",
+    "get_feeding_repository",
+    "get_invitation_repository",
+    "get_sleep_repository",
+    "get_token_repository",
+    "get_user_repository",
 ]

src/baby_monitor/repositories/dependencies/get_child_invitation_repository.py

@@ -0,0 +1,19 @@
+"""Dependency for child invitation repository."""
+
+from typing import Annotated
+from fastapi import Depends
+from sqlalchemy.orm import Session
+from baby_monitor.repositories.child_invitation.sqlite_child_invitation import (  # noqa: E501
+    DatabaseChildInvitationRepository,
+)
+from baby_monitor.repositories.interfaces import (
+    ChildInvitationRepositoryInterface,
+)
+from baby_monitor.repositories.dependencies.get_database import get_database
+
+
+def get_child_invitation_repository(
+    db: Annotated[Session, Depends(get_database)],
+) -> ChildInvitationRepositoryInterface:
+    """Get child invitation repository instance (works with any database)."""
+    return DatabaseChildInvitationRepository(db)

src/baby_monitor/repositories/dependencies/get_child_repository.py

@@ -5,11 +5,14 @@ from fastapi import Depends
 from sqlalchemy.orm import Session
 
 from baby_monitor.repositories.dependencies.get_database import get_database
-from baby_monitor.repositories.child.sqlite_child import SQLiteChildRepository
+from baby_monitor.repositories.child.sqlite_child import DatabaseChildRepository
+from baby_monitor.repositories.interfaces.child_repository_interface import (
+    ChildRepositoryInterface,
+)
 
 
 def get_child_repository(
     db: Annotated[Session, Depends(get_database)],
-) -> SQLiteChildRepository:
-    """Get child repository instance."""
-    return SQLiteChildRepository(db)
+) -> ChildRepositoryInterface:
+    """Get child repository instance (works with any database)."""
+    return DatabaseChildRepository(db)

src/baby_monitor/repositories/dependencies/get_database.py

@@ -10,18 +10,30 @@ from sqlalchemy.orm import declarative_base, sessionmaker, Session
 if TYPE_CHECKING:
     from sqlalchemy.orm import DeclarativeBase
 
-# Database directory
+# Database directory (used for SQLite)
 DATA_DIR = Path(os.getenv("DATA_DIR", "/data"))
 
-# SQLite database URL
-DATABASE_URL = f"sqlite:///{DATA_DIR}/baby_monitor.db"
+# Check for PostgreSQL URI, otherwise use SQLite
+POSTGRES_URI = os.getenv("POSTGRES_URI")
 
-# Create engine with check_same_thread=False for SQLite
-engine = create_engine(
-    DATABASE_URL,
-    connect_args={"check_same_thread": False},
-    echo=False,  # Set to True for SQL query logging
-)
+if POSTGRES_URI:
+    # Use PostgreSQL
+    DATABASE_URL = POSTGRES_URI
+    # PostgreSQL doesn't need special connect_args
+    engine = create_engine(
+        DATABASE_URL,
+        echo=False,  # Set to True for SQL query logging
+        pool_pre_ping=True,  # Verify connections before using them
+    )
+else:
+    # Use SQLite (default)
+    DATABASE_URL = f"sqlite:///{DATA_DIR}/baby_monitor.db"
+    # Create engine with check_same_thread=False for SQLite
+    engine = create_engine(
+        DATABASE_URL,
+        connect_args={"check_same_thread": False},
+        echo=False,  # Set to True for SQL query logging
+    )
 
 # Session factory
 SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
@@ -33,7 +45,7 @@ Base: "type[DeclarativeBase]" = declarative_base()
 def _ensure_admin_user() -> None:
     """Create or update admin user from environment variables."""
     from baby_monitor.models.db.user import User
-    from baby_monitor.utils.password import hash_password
+    from baby_monitor.utils import hash_password
 
     admin_username = os.getenv("ADMIN_USERNAME")
     admin_password = os.getenv("ADMIN_PASSWORD")
@@ -78,13 +90,23 @@ def init_db() -> None:
     # This must be done before create_all() is called
     from baby_monitor.models.db.user import User  # noqa: F401
     from baby_monitor.models.db.child import Child  # noqa: F401
+    from baby_monitor.models.db.child_parent import (  # noqa: F401
+        ChildParent,
+    )
     from baby_monitor.models.db.feeding import Feeding  # noqa: F401
-    from baby_monitor.models.db.diaper_change import DiaperChange  # noqa: F401
+    from baby_monitor.models.db.diaper_change import (  # noqa: F401
+        DiaperChange,
+    )
     from baby_monitor.models.db.sleep import Sleep  # noqa: F401
     from baby_monitor.models.invitation import Invitation  # noqa: F401
+    from baby_monitor.models.child_invitation import (  # noqa: F401
+        ChildInvitation,
+    )
+
+    # Ensure data directory exists (only needed for SQLite)
+    if not POSTGRES_URI:
+        DATA_DIR.mkdir(parents=True, exist_ok=True)
 
-    # Ensure data directory exists
-    DATA_DIR.mkdir(parents=True, exist_ok=True)
     Base.metadata.create_all(bind=engine)
 
     # Create admin user if it doesn't exist

src/baby_monitor/repositories/dependencies/get_diaper_change_repository.py

@@ -6,12 +6,15 @@ from sqlalchemy.orm import Session
 
 from baby_monitor.repositories.dependencies.get_database import get_database
 from baby_monitor.repositories.diaper_change.sqlite_diaper_change import (
-    SQLiteDiaperChangeRepository,
+    DatabaseDiaperChangeRepository,
+)
+from baby_monitor.repositories.interfaces.diaper_change_repository_interface import (  # noqa: E501
+    DiaperChangeRepositoryInterface,
 )
 
 
 def get_diaper_change_repository(
     db: Annotated[Session, Depends(get_database)],
-) -> SQLiteDiaperChangeRepository:
-    """Get diaper change repository instance."""
-    return SQLiteDiaperChangeRepository(db)
+) -> DiaperChangeRepositoryInterface:
+    """Get diaper change repository instance (works with any database)."""
+    return DatabaseDiaperChangeRepository(db)

src/baby_monitor/repositories/dependencies/get_feeding_repository.py

@@ -6,12 +6,15 @@ from sqlalchemy.orm import Session
 
 from baby_monitor.repositories.dependencies.get_database import get_database
 from baby_monitor.repositories.feeding.sqlite_feeding import (
-    SQLiteFeedingRepository,
+    DatabaseFeedingRepository,
+)
+from baby_monitor.repositories.interfaces.feeding_repository_interface import (
+    FeedingRepositoryInterface,
 )
 
 
 def get_feeding_repository(
     db: Annotated[Session, Depends(get_database)],
-) -> SQLiteFeedingRepository:
-    """Get feeding repository instance."""
-    return SQLiteFeedingRepository(db)
+) -> FeedingRepositoryInterface:
+    """Get feeding repository instance (works with any database)."""
+    return DatabaseFeedingRepository(db)

src/baby_monitor/repositories/dependencies/get_invitation_repository.py

@@ -6,13 +6,16 @@ from sqlalchemy.orm import Session
 
 from baby_monitor.repositories.dependencies.get_database import get_database
 from baby_monitor.repositories.invitation.sqlite_invitation import (
-    SQLiteInvitationRepository,
+    DatabaseInvitationRepository,
+)
+from baby_monitor.repositories.interfaces.invitation_repository_interface import (
+    InvitationRepositoryInterface,
 )
 
 
 def get_invitation_repository(
     db: Annotated[Session, Depends(get_database)],
-) -> SQLiteInvitationRepository:
+) -> InvitationRepositoryInterface:
     """
     Provide an invitation repository instance.
 
@@ -20,6 +23,6 @@ def get_invitation_repository(
         db: Database session from dependency injection
 
     Returns:
-        SQLiteInvitationRepository instance
+        InvitationRepositoryInterface instance (works with any database)
     """
-    return SQLiteInvitationRepository(db)
+    return DatabaseInvitationRepository(db)

src/baby_monitor/repositories/dependencies/get_sleep_repository.py

@@ -5,11 +5,14 @@ from fastapi import Depends
 from sqlalchemy.orm import Session
 
 from baby_monitor.repositories.dependencies.get_database import get_database
-from baby_monitor.repositories.sleep.sqlite_sleep import SQLiteSleepRepository
+from baby_monitor.repositories.sleep.sqlite_sleep import DatabaseSleepRepository
+from baby_monitor.repositories.interfaces.sleep_repository_interface import (
+    SleepRepositoryInterface,
+)
 
 
 def get_sleep_repository(
     db: Annotated[Session, Depends(get_database)],
-) -> SQLiteSleepRepository:
-    """Get sleep repository instance."""
-    return SQLiteSleepRepository(db)
+) -> SleepRepositoryInterface:
+    """Get sleep repository instance (works with any database)."""
+    return DatabaseSleepRepository(db)

src/baby_monitor/repositories/dependencies/get_user_repository.py

@@ -11,7 +11,7 @@ from baby_monitor.repositories.interfaces import (
     UserRepositoryInterface,
 )
 from baby_monitor.repositories.user.sqlite_user import (
-    SQLiteUserRepository,
+    DatabaseUserRepository,
 )
 
 # Singleton instance
@@ -22,12 +22,12 @@ def get_user_repository(
     db: Annotated[Session, Depends(get_database)],
 ) -> UserRepositoryInterface:
     """
-    Get user repository instance.
+    Get user repository instance (works with any database).
     """
 
     global _user_repository
 
     if _user_repository is None:
-        _user_repository = SQLiteUserRepository(db)
+        _user_repository = DatabaseUserRepository(db)
 
     return _user_repository

src/baby_monitor/repositories/diaper_change/sqlite_diaper_change.py

@@ -1,17 +1,24 @@
-"""SQLite implementation of diaper change repository."""
+"""Database-agnostic implementation of diaper change repository.
+
+Works with both SQLite and PostgreSQL.
+"""
 
 from datetime import datetime
 from sqlalchemy.orm import Session
 
-from baby_monitor.repositories.interfaces.diaper_change_repository_interface import (  # noqa: E501
+from baby_monitor.repositories.interfaces import (  # noqa: E501
     DiaperChangeRepositoryInterface,
 )
 from baby_monitor.models.db.diaper_change import DiaperChange
 from baby_monitor.models.db.child import Child
+from baby_monitor.models.db.child_parent import ChildParent
 
 
-class SQLiteDiaperChangeRepository(DiaperChangeRepositoryInterface):
-    """SQLite implementation for diaper change log data access."""
+class DatabaseDiaperChangeRepository(DiaperChangeRepositoryInterface):
+    """Database implementation for diaper change log data access.
+
+    Works with both SQLite and PostgreSQL databases.
+    """
 
     def __init__(self, db: Session):
         self.db = db
@@ -65,8 +72,9 @@ class SQLiteDiaperChangeRepository(DiaperChangeRepositoryInterface):
         """Get all diaper change logs for a specific user's children."""
         diaper_changes = (
             self.db.query(DiaperChange)
-            .join(Child)
-            .filter(Child.user_id == user_id)
+            .join(Child, DiaperChange.child_id == Child.id)
+            .join(ChildParent, Child.id == ChildParent.child_id)
+            .filter(ChildParent.user_id == user_id)
             .order_by(DiaperChange.change_time.desc())
             .all()
         )

src/baby_monitor/repositories/feeding/sqlite_feeding.py

@@ -1,17 +1,24 @@
-"""SQLite implementation of feeding repository."""
+"""Database-agnostic implementation of feeding repository.
+
+Works with both SQLite and PostgreSQL.
+"""
 
 from datetime import datetime
 from sqlalchemy.orm import Session
 
-from baby_monitor.repositories.interfaces.feeding_repository_interface import (
+from baby_monitor.repositories.interfaces import (
     FeedingRepositoryInterface,
 )
 from baby_monitor.models.db.feeding import Feeding
 from baby_monitor.models.db.child import Child
+from baby_monitor.models.db.child_parent import ChildParent
 
 
-class SQLiteFeedingRepository(FeedingRepositoryInterface):
-    """SQLite implementation for feeding log data access."""
+class DatabaseFeedingRepository(FeedingRepositoryInterface):
+    """Database implementation for feeding log data access.
+
+    Works with both SQLite and PostgreSQL databases.
+    """
 
     def __init__(self, db: Session):
         self.db = db
@@ -57,8 +64,9 @@ class SQLiteFeedingRepository(FeedingRepositoryInterface):
         """Get all feeding logs for a specific user's children."""
         feedings = (
             self.db.query(Feeding)
-            .join(Child)
-            .filter(Child.user_id == user_id)
+            .join(Child, Feeding.child_id == Child.id)
+            .join(ChildParent, Child.id == ChildParent.child_id)
+            .filter(ChildParent.user_id == user_id)
             .order_by(Feeding.start_time.desc())
             .all()
         )

src/baby_monitor/repositories/interfaces/__init__.py

@@ -1,5 +1,8 @@
 """Repository interfaces package."""
 
+from .child_invitation_interface import (
+    ChildInvitationRepositoryInterface,
+)
 from .credentials_repository_interface import (
     CredentialsRepositoryInterface,
 )
@@ -12,10 +15,27 @@ from .token_repository_interface import (
 from .user_repository_interface import (
     UserRepositoryInterface,
 )
+from .child_repository_interface import (
+    ChildRepositoryInterface,
+)
+from .feeding_repository_interface import (
+    FeedingRepositoryInterface,
+)
+from .diaper_change_repository_interface import (
+    DiaperChangeRepositoryInterface,
+)
+from .sleep_repository_interface import (
+    SleepRepositoryInterface,
+)
 
 __all__ = [
-    "UserRepositoryInterface",
-    "TokenRepositoryInterface",
+    "ChildInvitationRepositoryInterface",
+    "ChildRepositoryInterface",
     "CredentialsRepositoryInterface",
+    "DiaperChangeRepositoryInterface",
+    "FeedingRepositoryInterface",
     "InvitationRepositoryInterface",
+    "SleepRepositoryInterface",
+    "TokenRepositoryInterface",
+    "UserRepositoryInterface",
 ]

src/baby_monitor/repositories/interfaces/child_invitation_interface.py

@@ -0,0 +1,36 @@
+"""Repository interface for child invitation operations."""
+
+from abc import ABC, abstractmethod
+from datetime import datetime
+
+
+class ChildInvitationRepositoryInterface(ABC):
+    """Interface for child invitation repository operations."""
+
+    @abstractmethod
+    def create_invitation(
+        self,
+        code: str,
+        child_id: int,
+        created_by_user_id: int,
+        expires_at: datetime,
+    ) -> int:
+        """Create a new child invitation."""
+        pass
+
+    @abstractmethod
+    def get_by_code(self, code: str) -> dict | None:
+        """Get invitation by code."""
+        pass
+
+    @abstractmethod
+    def verify_invitation(self, code: str) -> bool:
+        """Verify if an invitation code is valid and not expired."""
+        pass
+
+    @abstractmethod
+    def consume_invitation(
+        self, code: str, consumed_by_user_id: int, consumed_at: datetime
+    ) -> bool:
+        """Mark invitation as consumed."""
+        pass

src/baby_monitor/repositories/interfaces/child_repository_interface.py

@@ -34,3 +34,15 @@ class ChildRepositoryInterface(ABC):
     @abstractmethod
     def delete(self, child_id: int) -> bool:
         """Delete a child record."""
+
+    @abstractmethod
+    def get_parent_ids(self, child_id: int) -> list[int]:
+        """Get all parent user IDs for a specific child."""
+
+    @abstractmethod
+    def remove_parent(self, child_id: int, user_id: int) -> bool:
+        """Remove a parent-child relationship."""
+
+    @abstractmethod
+    def add_parent(self, child_id: int, user_id: int) -> bool:
+        """Add a parent-child relationship."""

src/baby_monitor/repositories/interfaces/user_repository_interface.py

@@ -17,3 +17,15 @@ class UserRepositoryInterface(ABC):
     @abstractmethod
     def get_by_id(self, user_id: int) -> dict | None:
         """Get user by ID."""
+
+    @abstractmethod
+    def get_all(self) -> list[dict]:
+        """Get all users."""
+
+    @abstractmethod
+    def delete(self, user_id: int) -> bool:
+        """Delete a user by ID. Returns True if successful."""
+
+    @abstractmethod
+    def update_password(self, user_id: int, hashed_password: str) -> bool:
+        """Update user password. Returns True if successful."""

src/baby_monitor/repositories/invitation/__init__.py

@@ -1,7 +1,10 @@
 """Invitation repository implementations."""
 
 from baby_monitor.repositories.invitation.sqlite_invitation import (
-    SQLiteInvitationRepository,
+    DatabaseInvitationRepository,
 )
 
-__all__ = ["SQLiteInvitationRepository"]
+# Keep old name for backward compatibility
+SQLiteInvitationRepository = DatabaseInvitationRepository
+
+__all__ = ["DatabaseInvitationRepository", "SQLiteInvitationRepository"]

src/baby_monitor/repositories/invitation/sqlite_invitation.py

@@ -1,25 +1,49 @@
-"""SQLite implementation of invitation repository.
+"""Database-agnostic implementation of invitation repository.
 
-Note: SQLite does not support timezone-aware datetimes natively.
-All datetimes are stored as naive UTC and converted at the application layer.
+Supports both SQLite and PostgreSQL:
+- SQLite: stores datetimes as naive UTC
+- PostgreSQL: stores datetimes as timezone-aware
+
+The repository automatically adapts by checking the timezone awareness
+of datetimes returned from the database.
 """
 
 from datetime import datetime, UTC
 from sqlalchemy.orm import Session
 
 from baby_monitor.models.invitation import Invitation
-from baby_monitor.repositories.interfaces.invitation_repository_interface import (
+from baby_monitor.repositories.interfaces import (
     InvitationRepositoryInterface,
 )
 
 
-class SQLiteInvitationRepository(InvitationRepositoryInterface):
-    """SQLite implementation for managing invitation tokens."""
+class DatabaseInvitationRepository(InvitationRepositoryInterface):
+    """Database implementation for managing invitation tokens.
+
+    Works with both SQLite and PostgreSQL databases.
+    """
 
     def __init__(self, db: Session) -> None:
         """Initialize the repository with a database session."""
         self.db = db
 
+    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)
+        """
+        now = datetime.now(UTC)
+        if reference_dt.tzinfo is None:
+            # SQLite: return naive UTC
+            return now.replace(tzinfo=None)
+        # PostgreSQL: return timezone-aware
+        return now
+
     def create_invitation(
         self, token: str, created_by_user_id: int, expires_at: datetime
     ) -> None:
@@ -63,8 +87,8 @@ class SQLiteInvitationRepository(InvitationRepositoryInterface):
         if not invitation:
             return False
 
-        # Compare as naive UTC datetimes (SQLite stores without timezone)
-        now_utc = datetime.now(UTC).replace(tzinfo=None)
+        # Get current time matching database timezone format
+        now_utc = self._get_now_utc(invitation.expires_at)
         if invitation.expires_at < now_utc:
             return False
 
@@ -89,8 +113,8 @@ class SQLiteInvitationRepository(InvitationRepositoryInterface):
         if not invitation:
             return False
 
-        # Compare as naive UTC datetimes (SQLite stores without timezone)
-        now_utc = datetime.now(UTC).replace(tzinfo=None)
+        # Get current time matching database timezone format
+        now_utc = self._get_now_utc(invitation.expires_at)
         if invitation.expires_at < now_utc:
             return False
 
@@ -107,6 +131,14 @@ class SQLiteInvitationRepository(InvitationRepositoryInterface):
 
     def cleanup_expired(self) -> None:
         """Remove expired invitation tokens from storage."""
-        now_utc = datetime.now(UTC).replace(tzinfo=None)
+        # For cleanup, we need to get a sample to determine format
+        # Get any invitation to check timezone format
+        sample = self.db.query(Invitation).first()
+        if sample:
+            now_utc = self._get_now_utc(sample.expires_at)
+        else:
+            # No invitations, use naive UTC (safe default)
+            now_utc = datetime.now(UTC).replace(tzinfo=None)
+
         self.db.query(Invitation).filter(Invitation.expires_at < now_utc).delete()
         self.db.commit()

src/baby_monitor/repositories/sleep/sqlite_sleep.py

@@ -1,17 +1,24 @@
-"""SQLite implementation of sleep repository."""
+"""Database-agnostic implementation of sleep repository.
+
+Works with both SQLite and PostgreSQL.
+"""
 
 from datetime import datetime
 from sqlalchemy.orm import Session
 
-from baby_monitor.repositories.interfaces.sleep_repository_interface import (
+from baby_monitor.repositories.interfaces import (
     SleepRepositoryInterface,
 )
 from baby_monitor.models.db.sleep import Sleep
 from baby_monitor.models.db.child import Child
+from baby_monitor.models.db.child_parent import ChildParent
 
 
-class SQLiteSleepRepository(SleepRepositoryInterface):
-    """SQLite implementation for sleep log data access."""
+class DatabaseSleepRepository(SleepRepositoryInterface):
+    """Database implementation for sleep log data access.
+
+    Works with both SQLite and PostgreSQL databases.
+    """
 
     def __init__(self, db: Session):
         self.db = db
@@ -54,8 +61,9 @@ class SQLiteSleepRepository(SleepRepositoryInterface):
         """Get all sleep logs for a specific user's children."""
         sleeps = (
             self.db.query(Sleep)
-            .join(Child)
-            .filter(Child.user_id == user_id)
+            .join(Child, Sleep.child_id == Child.id)
+            .join(ChildParent, Child.id == ChildParent.child_id)
+            .filter(ChildParent.user_id == user_id)
             .order_by(Sleep.start_time.desc())
             .all()
         )

src/baby_monitor/repositories/user/postgresql_user.py

@@ -1,64 +0,0 @@
-"""PostgreSQL user repository (future implementation)."""
-
-from sqlalchemy.orm import Session
-
-from baby_monitor.repositories.interfaces import UserRepositoryInterface
-from baby_monitor.models.db.user import User
-
-
-class PostgreSQLUserRepository(UserRepositoryInterface):
-    """
-    PostgreSQL-based user repository.
-
-    This implementation uses the same SQLAlchemy models as SQLite,
-    just with a different database engine.
-
-    To use this implementation:
-    1. Add psycopg2-binary dependency
-    2. Update DATABASE_URL in database.py:
-       DATABASE_URL = os.getenv(
-           "DATABASE_URL",
-           "postgresql://user:password@localhost:5432/baby_monitor"
-       )
-    3. Replace SQLiteUserRepository with this in dependencies
-    """
-
-    def __init__(self, db: Session):
-        self.db = db
-
-    def get_by_username(self, username: str) -> dict | None:
-        """Get user by username."""
-        user = self.db.query(User).filter(User.username == username).first()
-        if user:
-            return {
-                "id": user.id,
-                "username": user.username,
-                "hashed_password": user.hashed_password,
-                "created_at": user.created_at,
-            }
-        return None
-
-    def create(self, username: str, hashed_password: str) -> dict:
-        """Create a new user."""
-        user = User(username=username, hashed_password=hashed_password)
-        self.db.add(user)
-        self.db.commit()
-        self.db.refresh(user)
-        return {
-            "id": user.id,
-            "username": user.username,
-            "hashed_password": user.hashed_password,
-            "created_at": user.created_at,
-        }
-
-    def get_by_id(self, user_id: int) -> dict | None:
-        """Get user by ID."""
-        user = self.db.query(User).filter(User.id == user_id).first()
-        if user:
-            return {
-                "id": user.id,
-                "username": user.username,
-                "hashed_password": user.hashed_password,
-                "created_at": user.created_at,
-            }
-        return None

src/baby_monitor/repositories/user/sqlite_user.py

@@ -1,4 +1,7 @@
-"""SQLite implementation of user repository."""
+"""Database-agnostic implementation of user repository.
+
+Works with both SQLite and PostgreSQL.
+"""
 
 from sqlalchemy.orm import Session
 
@@ -6,8 +9,11 @@ from baby_monitor.repositories.interfaces import UserRepositoryInterface
 from baby_monitor.models.db.user import User
 
 
-class SQLiteUserRepository(UserRepositoryInterface):
-    """SQLite-based user repository."""
+class DatabaseUserRepository(UserRepositoryInterface):
+    """Database-based user repository.
+
+    Works with both SQLite and PostgreSQL databases.
+    """
 
     def __init__(self, db: Session):
         self.db = db
@@ -55,3 +61,35 @@ class SQLiteUserRepository(UserRepositoryInterface):
                 "created_at": user.created_at,
             }
         return None
+
+    def get_all(self) -> list[dict]:
+        """Get all users."""
+        users = self.db.query(User).all()
+        return [
+            {
+                "id": user.id,
+                "username": user.username,
+                "hashed_password": user.hashed_password,
+                "is_admin": user.is_admin,
+                "created_at": user.created_at,
+            }
+            for user in users
+        ]
+
+    def delete(self, user_id: int) -> bool:
+        """Delete a user by ID. Returns True if successful."""
+        user = self.db.query(User).filter(User.id == user_id).first()
+        if user:
+            self.db.delete(user)
+            self.db.commit()
+            return True
+        return False
+
+    def update_password(self, user_id: int, hashed_password: str) -> bool:
+        """Update user password. Returns True if successful."""
+        user = self.db.query(User).filter(User.id == user_id).first()
+        if user:
+            user.hashed_password = hashed_password  # type: ignore
+            self.db.commit()
+            return True
+        return False

src/baby_monitor/routers/admin.py

@@ -3,15 +3,25 @@
 import secrets
 from datetime import datetime, timedelta, UTC
 from typing import Annotated
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException
 from pydantic import BaseModel
 
 from baby_monitor.routers.auth import verify_admin
-from baby_monitor.repositories.dependencies.get_invitation_repository import (
+from baby_monitor.repositories.dependencies import (
     get_invitation_repository,
+    get_user_repository,
+    get_child_repository,
+    get_feeding_repository,
+    get_diaper_change_repository,
+    get_sleep_repository,
 )
 from baby_monitor.repositories.interfaces import (
     InvitationRepositoryInterface,
+    UserRepositoryInterface,
+    ChildRepositoryInterface,
+    FeedingRepositoryInterface,
+    DiaperChangeRepositoryInterface,
+    SleepRepositoryInterface,
 )
 
 router = APIRouter(prefix="/api/admin", tags=["admin"])
@@ -64,3 +74,172 @@ async def generate_invitation_link(
         expires_at=expires_at.isoformat(),
         message="Invitation link generated successfully. Valid for 24 hours.",
     )
+
+
+class UserResponse(BaseModel):
+    """Response model for user data."""
+
+    id: int
+    username: str
+    is_admin: bool
+    created_at: datetime
+
+
+class DeleteUserResponse(BaseModel):
+    """Response model for user deletion."""
+
+    message: str
+    deleted_children: list[int]
+    deleted_feedings: int
+    deleted_diapers: int
+    deleted_sleeps: int
+
+
+@router.get("/users", response_model=list[UserResponse])
+async def get_all_users(
+    admin_id: Annotated[int, Depends(verify_admin)],
+    user_repository: Annotated[
+        UserRepositoryInterface,
+        Depends(get_user_repository),
+    ],
+) -> list[UserResponse]:
+    """Get all users in the system.
+
+    Requires admin role.
+
+    Args:
+        admin_id: Admin user ID (from verify_admin)
+        user_repository: User storage backend
+
+    Returns:
+        List of all users with their basic information
+    """
+    users = user_repository.get_all()
+    return [
+        UserResponse(
+            id=user["id"],
+            username=user["username"],
+            is_admin=user["is_admin"],
+            created_at=user["created_at"],
+        )
+        for user in users
+    ]
+
+
+@router.delete("/users/{user_id}", response_model=DeleteUserResponse)
+async def delete_user(
+    user_id: int,
+    admin_id: Annotated[int, Depends(verify_admin)],
+    user_repository: Annotated[
+        UserRepositoryInterface,
+        Depends(get_user_repository),
+    ],
+    child_repository: Annotated[
+        ChildRepositoryInterface,
+        Depends(get_child_repository),
+    ],
+    feeding_repository: Annotated[
+        FeedingRepositoryInterface,
+        Depends(get_feeding_repository),
+    ],
+    diaper_repository: Annotated[
+        DiaperChangeRepositoryInterface,
+        Depends(get_diaper_change_repository),
+    ],
+    sleep_repository: Annotated[
+        SleepRepositoryInterface,
+        Depends(get_sleep_repository),
+    ],
+) -> DeleteUserResponse:
+    """Delete a user and cascade delete orphaned children and their logs.
+
+    When a user is deleted:
+    1. Find all children belonging to this user
+    2. For each child, check if other users also have this child
+    3. Delete only children that have no other parents (orphaned)
+    4. For orphaned children, delete all associated logs (feedings, diapers, sleep)
+    5. Finally delete the user
+
+    Requires admin role.
+
+    Args:
+        user_id: ID of user to delete
+        admin_id: Admin user ID (from verify_admin)
+        user_repository: User storage backend
+        child_repository: Child storage backend
+        feeding_repository: Feeding storage backend
+        diaper_repository: Diaper change storage backend
+        sleep_repository: Sleep storage backend
+
+    Returns:
+        DeleteUserResponse with deletion summary
+
+    Raises:
+        HTTPException: If user not found or trying to delete yourself
+    """
+    # Prevent admin from deleting themselves
+    if user_id == admin_id:
+        raise HTTPException(status_code=400, detail="Cannot delete your own account")
+
+    # Check if user exists
+    user = user_repository.get_by_id(user_id)
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+
+    # Get all children belonging to this user
+    children = child_repository.get_by_user_id(user_id)
+
+    deleted_children_ids = []
+    total_feedings_deleted = 0
+    total_diapers_deleted = 0
+    total_sleeps_deleted = 0
+
+    # For each child, check if they have other parents
+    for child in children:
+        child_id = child["id"]
+
+        # Remove this user's relationship with the child
+        child_repository.remove_parent(child_id, user_id)
+
+        # Check if child has any remaining parents
+        remaining_parents = child_repository.get_parent_ids(child_id)
+
+        # Only delete child and logs if they have no other parents
+        if len(remaining_parents) == 0:
+            # Delete all logs for this orphaned child
+            feedings = feeding_repository.get_by_child_id(child_id)
+            for feeding in feedings:
+                feeding_repository.delete(feeding["id"])
+                total_feedings_deleted += 1
+
+            diapers = diaper_repository.get_by_child_id(child_id)
+            for diaper in diapers:
+                diaper_repository.delete(diaper["id"])
+                total_diapers_deleted += 1
+
+            sleeps = sleep_repository.get_by_child_id(child_id)
+            for sleep in sleeps:
+                sleep_repository.delete(sleep["id"])
+                total_sleeps_deleted += 1
+
+            # Delete the orphaned child
+            child_repository.delete(child_id)
+            deleted_children_ids.append(child_id)
+
+    # Finally, delete the user
+    user_repository.delete(user_id)
+
+    message = f"User '{user['username']}' deleted successfully"
+    if deleted_children_ids:
+        message += (
+            f" with {len(deleted_children_ids)} orphaned "
+            f"child{'ren' if len(deleted_children_ids) != 1 else ''}"
+        )
+
+    return DeleteUserResponse(
+        message=message,
+        deleted_children=deleted_children_ids,
+        deleted_feedings=total_feedings_deleted,
+        deleted_diapers=total_diapers_deleted,
+        deleted_sleeps=total_sleeps_deleted,
+    )

src/baby_monitor/routers/auth.py

@@ -1,8 +1,9 @@
 """Authentication router for login and user management."""
 
 import secrets
-from fastapi import APIRouter, HTTPException, Depends, Header
 from typing import Annotated
+from fastapi import APIRouter, HTTPException, Depends, Header
+from pydantic import BaseModel
 
 from baby_monitor.models.auth import (
     LoginRequest,
@@ -11,22 +12,35 @@ from baby_monitor.models.auth import (
     RegisterResponse,
 )
 from baby_monitor.repositories import (
+    get_child_repository,
+    get_diaper_change_repository,
+    get_feeding_repository,
+    get_invitation_repository,
+    get_sleep_repository,
     get_token_repository,
     get_user_repository,
 )
-from baby_monitor.repositories.dependencies.get_invitation_repository import (
-    get_invitation_repository,
-)
 from baby_monitor.repositories.interfaces import (
     TokenRepositoryInterface,
     UserRepositoryInterface,
     InvitationRepositoryInterface,
+    ChildRepositoryInterface,
+    FeedingRepositoryInterface,
+    DiaperChangeRepositoryInterface,
+    SleepRepositoryInterface,
 )
-from baby_monitor.utils.password import hash_password, verify_password
+from baby_monitor.utils import hash_password, verify_password
 
 router = APIRouter(prefix="/api", tags=["authentication"])
 
 
+class ChangePasswordRequest(BaseModel):
+    """Request model for password change."""
+
+    current_password: str
+    new_password: str
+
+
 def verify_token(
     authorization: Annotated[str | None, Header()] = None,
     token_repo: TokenRepositoryInterface = Depends(get_token_repository),
@@ -191,3 +205,97 @@ def get_current_user(
         "username": user["username"],
         "is_admin": user.get("is_admin", False),
     }
+
+
+@router.post("/change-password")
+def change_password(
+    request: ChangePasswordRequest,
+    user_id: Annotated[int, Depends(verify_token)],
+    user_repo: Annotated[UserRepositoryInterface, Depends(get_user_repository)],  # noqa: E501
+) -> dict:
+    """Change password for the current user."""
+    # Get user with credentials
+    user = user_repo.get_by_id(user_id)
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+
+    # Verify current password
+    if not verify_password(request.current_password, user["hashed_password"]):
+        raise HTTPException(status_code=401, detail="Current password is incorrect")
+
+    # Hash new password
+    new_password_hash = hash_password(request.new_password)
+
+    # Update password
+    success = user_repo.update_password(user_id, new_password_hash)
+    if not success:
+        raise HTTPException(status_code=500, detail="Failed to update password")
+
+    return {"message": "Password changed successfully"}
+
+
+@router.delete("/account")
+def delete_account(
+    user_id: Annotated[int, Depends(verify_token)],
+    user_repo: Annotated[UserRepositoryInterface, Depends(get_user_repository)],  # noqa: E501
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],  # noqa: E501
+    feeding_repo: Annotated[
+        FeedingRepositoryInterface, Depends(get_feeding_repository)
+    ],  # noqa: E501
+    diaper_repo: Annotated[
+        DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
+    ],  # noqa: E501
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],  # noqa: E501
+) -> dict:
+    """Delete current user's account and cascade delete orphaned children."""
+    # Get user's children
+    children = child_repo.get_by_user_id(user_id)
+
+    deleted_children = []
+    deleted_feedings = 0
+    deleted_diapers = 0
+    deleted_sleeps = 0
+
+    # Process each child
+    for child in children:
+        child_id = child["id"]
+
+        # Remove the parent-child relationship
+        child_repo.remove_parent(child_id, user_id)
+
+        # Check if child has any remaining parents
+        remaining_parents = child_repo.get_parent_ids(child_id)
+
+        if len(remaining_parents) == 0:
+            # Child is orphaned, delete all logs first
+            feedings = feeding_repo.get_by_child_id(child_id)
+            for feeding in feedings:
+                feeding_repo.delete(feeding["id"])
+                deleted_feedings += 1
+
+            diapers = diaper_repo.get_by_child_id(child_id)
+            for diaper in diapers:
+                diaper_repo.delete(diaper["id"])
+                deleted_diapers += 1
+
+            sleeps = sleep_repo.get_by_child_id(child_id)
+            for sleep in sleeps:
+                sleep_repo.delete(sleep["id"])
+                deleted_sleeps += 1
+
+            # Now delete the child
+            child_repo.delete(child_id)
+            deleted_children.append(child["name"])
+
+    # Finally, delete the user
+    user_repo.delete(user_id)
+
+    return {
+        "message": "Account deleted successfully",
+        "deleted_children": deleted_children,
+        "deleted_logs": {
+            "feedings": deleted_feedings,
+            "diaper_changes": deleted_diapers,
+            "sleep_sessions": deleted_sleeps,
+        },
+    }

src/baby_monitor/routers/child.py

@@ -1,23 +1,51 @@
 """Child management router."""
 
+import secrets
+from datetime import datetime, timedelta, UTC
 from typing import Annotated
 from fastapi import APIRouter, HTTPException, Depends
+from pydantic import BaseModel
 
 from baby_monitor.models.child import CreateChildRequest, ChildResponse
 from baby_monitor.routers.auth import verify_token
-from baby_monitor.repositories.child.sqlite_child import SQLiteChildRepository
-from baby_monitor.repositories.dependencies.get_child_repository import (
+from baby_monitor.repositories.interfaces import (
+    ChildRepositoryInterface,
+    ChildInvitationRepositoryInterface,
+)
+from baby_monitor.repositories.dependencies import (
     get_child_repository,
+    get_child_invitation_repository,
 )
 
 router = APIRouter(prefix="/api/children", tags=["children"])
 
 
+class CreateChildInvitationRequest(BaseModel):
+    """Request model for creating a child invitation."""
+
+    child_id: int
+
+
+class ChildInvitationResponse(BaseModel):
+    """Response model for child invitation."""
+
+    code: str
+    child_id: int
+    expires_at: str
+    message: str
+
+
+class RedeemChildInvitationRequest(BaseModel):
+    """Request model for redeeming a child invitation."""
+
+    code: str
+
+
 @router.post("", response_model=ChildResponse, status_code=201)
 def create_child(
     request: CreateChildRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> ChildResponse:
     """Create a new child for the authenticated user."""
     child = child_repo.create(
@@ -33,7 +61,7 @@ def create_child(
 @router.get("", response_model=list[ChildResponse])
 def get_user_children(
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> list[ChildResponse]:
     """Get all children for the authenticated user."""
     children = child_repo.get_by_user_id(user_id)
@@ -44,7 +72,7 @@ def get_user_children(
 def get_child(
     child_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> ChildResponse:
     """Get a specific child by ID."""
     child = child_repo.get_by_id(child_id)
@@ -53,7 +81,8 @@ def get_child(
         raise HTTPException(status_code=404, detail="Child not found")
 
     # Verify the child belongs to the authenticated user
-    if child["user_id"] != user_id:
+    parent_ids = child_repo.get_parent_ids(child_id)
+    if user_id not in parent_ids:
         raise HTTPException(status_code=403, detail="Access denied")
 
     return ChildResponse(**child)
@@ -64,7 +93,7 @@ def update_child(
     child_id: int,
     request: CreateChildRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> ChildResponse:
     """Update a child's information."""
     # First check if child exists and belongs to user
@@ -73,7 +102,8 @@ def update_child(
     if not child:
         raise HTTPException(status_code=404, detail="Child not found")
 
-    if child["user_id"] != user_id:
+    parent_ids = child_repo.get_parent_ids(child_id)
+    if user_id not in parent_ids:
         raise HTTPException(status_code=403, detail="Access denied")
 
     # Update the child
@@ -88,3 +118,93 @@ def update_child(
         raise HTTPException(status_code=500, detail="Update failed")
 
     return ChildResponse(**updated_child)
+
+
+@router.post("/invitations", response_model=ChildInvitationResponse)
+def create_child_invitation(
+    request: CreateChildInvitationRequest,
+    user_id: Annotated[int, Depends(verify_token)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
+    invitation_repo: Annotated[
+        ChildInvitationRepositoryInterface,
+        Depends(get_child_invitation_repository),
+    ],
+) -> ChildInvitationResponse:
+    """Create an invitation code to share child access with another user."""
+    # Verify the child exists and user has access
+    child = child_repo.get_by_id(request.child_id)
+    if not child:
+        raise HTTPException(status_code=404, detail="Child not found")
+
+    parent_ids = child_repo.get_parent_ids(request.child_id)
+    if user_id not in parent_ids:
+        raise HTTPException(status_code=403, detail="Access denied")
+
+    # Generate a short invitation code (8 characters)
+    code = secrets.token_urlsafe(6)[:8].upper()
+
+    # Calculate expiration (7 days from now)
+    expires_at = datetime.now(UTC) + timedelta(days=7)
+
+    # Create the invitation
+    invitation_repo.create_invitation(
+        code=code,
+        child_id=request.child_id,
+        created_by_user_id=user_id,
+        expires_at=expires_at,
+    )
+
+    return ChildInvitationResponse(
+        code=code,
+        child_id=request.child_id,
+        expires_at=expires_at.isoformat(),
+        message="Invitation code created. Valid for 7 days.",
+    )
+
+
+@router.post("/invitations/redeem")
+def redeem_child_invitation(
+    request: RedeemChildInvitationRequest,
+    user_id: Annotated[int, Depends(verify_token)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
+    invitation_repo: Annotated[
+        ChildInvitationRepositoryInterface,
+        Depends(get_child_invitation_repository),
+    ],
+) -> dict:
+    """Redeem an invitation code to gain access to a child."""
+    # Verify the invitation code
+    if not invitation_repo.verify_invitation(request.code):
+        raise HTTPException(
+            status_code=400, detail="Invalid or expired invitation code"
+        )
+
+    # Get the invitation details
+    invitation = invitation_repo.get_by_code(request.code)
+    if not invitation:
+        raise HTTPException(status_code=400, detail="Invalid invitation code")
+
+    child_id = invitation["child_id"]
+
+    # Check if user already has access to this child
+    parent_ids = child_repo.get_parent_ids(child_id)
+    if user_id in parent_ids:
+        raise HTTPException(
+            status_code=400, detail="You already have access to this child"
+        )
+
+    # Add user as a parent
+    child_repo.add_parent(child_id, user_id)
+
+    # Consume the invitation
+    invitation_repo.consume_invitation(request.code, user_id, datetime.now(UTC))
+
+    # Get child details
+    child = child_repo.get_by_id(child_id)
+    if not child:
+        raise HTTPException(status_code=404, detail="Child not found")
+
+    return {
+        "message": f"Successfully added access to {child['name']}",
+        "child": ChildResponse(**child),
+    }

src/baby_monitor/routers/diaper_change.py

@@ -9,16 +9,15 @@ from baby_monitor.models.diaper_change import (
     DiaperChangeResponse,
 )
 from baby_monitor.routers.auth import verify_token
-from baby_monitor.repositories.diaper_change.sqlite_diaper_change import (
-    SQLiteDiaperChangeRepository,
+from baby_monitor.repositories.interfaces import (
+    DiaperChangeRepositoryInterface,
+    ChildRepositoryInterface,
 )
-from baby_monitor.repositories.dependencies.get_diaper_change_repository import (  # noqa: E501
+from baby_monitor.repositories.dependencies import (
     get_diaper_change_repository,
-)
-from baby_monitor.repositories.child.sqlite_child import SQLiteChildRepository
-from baby_monitor.repositories.dependencies.get_child_repository import (
     get_child_repository,
 )
+from baby_monitor.utils.verify_child_access import verify_child_access
 
 router = APIRouter(prefix="/api/diaper-changes", tags=["diaper-changes"])
 
@@ -28,18 +27,13 @@ def create_diaper_change(
     request: CreateDiaperChangeRequest,
     user_id: Annotated[int, Depends(verify_token)],
     diaper_repo: Annotated[
-        SQLiteDiaperChangeRepository, Depends(get_diaper_change_repository)
+        DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> DiaperChangeResponse:
     """Create a new diaper change log entry."""
     # Verify the child belongs to the authenticated user
-    child = child_repo.get_by_id(request.child_id)
-    if not child:
-        raise HTTPException(status_code=404, detail="Child not found")
-
-    if child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied to this child")
+    verify_child_access(child_repo, request.child_id, user_id)
 
     diaper_change = diaper_repo.create(
         child_id=request.child_id,
@@ -57,7 +51,7 @@ def create_diaper_change(
 def get_user_diaper_changes(
     user_id: Annotated[int, Depends(verify_token)],
     diaper_repo: Annotated[
-        SQLiteDiaperChangeRepository, Depends(get_diaper_change_repository)
+        DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
 ) -> list[DiaperChangeResponse]:
     """Get all diaper change logs for the authenticated user's children."""
@@ -70,9 +64,9 @@ def get_diaper_change(
     diaper_change_id: int,
     user_id: Annotated[int, Depends(verify_token)],
     diaper_repo: Annotated[
-        SQLiteDiaperChangeRepository, Depends(get_diaper_change_repository)
+        DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> DiaperChangeResponse:
     """Get a specific diaper change log by ID."""
     diaper_change = diaper_repo.get_by_id(diaper_change_id)
@@ -81,9 +75,7 @@ def get_diaper_change(
         raise HTTPException(status_code=404, detail="Diaper change log not found")
 
     # Verify the diaper change belongs to user's child
-    child = child_repo.get_by_id(diaper_change["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, diaper_change["child_id"], user_id)
 
     return DiaperChangeResponse(**diaper_change)
 
@@ -94,9 +86,9 @@ def update_diaper_change(
     request: UpdateDiaperChangeRequest,
     user_id: Annotated[int, Depends(verify_token)],
     diaper_repo: Annotated[
-        SQLiteDiaperChangeRepository, Depends(get_diaper_change_repository)
+        DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> DiaperChangeResponse:
     """Update an existing diaper change log."""
     diaper_change = diaper_repo.get_by_id(diaper_change_id)
@@ -105,9 +97,7 @@ def update_diaper_change(
         raise HTTPException(status_code=404, detail="Diaper change log not found")
 
     # Verify the diaper change belongs to user's child
-    child = child_repo.get_by_id(diaper_change["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, diaper_change["child_id"], user_id)
 
     updated = diaper_repo.update(
         diaper_change_id=diaper_change_id,
@@ -131,9 +121,9 @@ def delete_diaper_change(
     diaper_change_id: int,
     user_id: Annotated[int, Depends(verify_token)],
     diaper_repo: Annotated[
-        SQLiteDiaperChangeRepository, Depends(get_diaper_change_repository)
+        DiaperChangeRepositoryInterface, Depends(get_diaper_change_repository)
     ],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> None:
     """Delete a diaper change log."""
     diaper_change = diaper_repo.get_by_id(diaper_change_id)
@@ -142,9 +132,7 @@ def delete_diaper_change(
         raise HTTPException(status_code=404, detail="Diaper change log not found")
 
     # Verify the diaper change belongs to user's child
-    child = child_repo.get_by_id(diaper_change["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, diaper_change["child_id"], user_id)
 
     success = diaper_repo.delete(diaper_change_id)
     if not success:

src/baby_monitor/routers/feeding.py

@@ -9,16 +9,15 @@ from baby_monitor.models.feeding import (
     FeedingResponse,
 )
 from baby_monitor.routers.auth import verify_token
-from baby_monitor.repositories.feeding.sqlite_feeding import (
-    SQLiteFeedingRepository,
+from baby_monitor.repositories.interfaces import (
+    ChildRepositoryInterface,
+    FeedingRepositoryInterface,
 )
-from baby_monitor.repositories.dependencies.get_feeding_repository import (
+from baby_monitor.repositories.dependencies import (
     get_feeding_repository,
-)
-from baby_monitor.repositories.child.sqlite_child import SQLiteChildRepository
-from baby_monitor.repositories.dependencies.get_child_repository import (
     get_child_repository,
 )
+from baby_monitor.utils import verify_child_access
 
 router = APIRouter(prefix="/api/feedings", tags=["feedings"])
 
@@ -27,17 +26,14 @@ router = APIRouter(prefix="/api/feedings", tags=["feedings"])
 def create_feeding(
     request: CreateFeedingRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    feeding_repo: Annotated[SQLiteFeedingRepository, Depends(get_feeding_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    feeding_repo: Annotated[
+        FeedingRepositoryInterface, Depends(get_feeding_repository)
+    ],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> FeedingResponse:
     """Create a new feeding log entry."""
     # Verify the child belongs to the authenticated user
-    child = child_repo.get_by_id(request.child_id)
-    if not child:
-        raise HTTPException(status_code=404, detail="Child not found")
-
-    if child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied to this child")
+    verify_child_access(child_repo, request.child_id, user_id)
 
     feeding = feeding_repo.create(
         child_id=request.child_id,
@@ -52,8 +48,10 @@ def create_feeding(
 @router.get("/active", response_model=FeedingResponse | None)
 def get_active_feeding(
     user_id: Annotated[int, Depends(verify_token)],
-    feeding_repo: Annotated[SQLiteFeedingRepository, Depends(get_feeding_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    feeding_repo: Annotated[
+        FeedingRepositoryInterface, Depends(get_feeding_repository)
+    ],
+    child_repo: Annotated[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)
@@ -74,7 +72,9 @@ def get_active_feeding(
 @router.get("", response_model=list[FeedingResponse])
 def get_user_feedings(
     user_id: Annotated[int, Depends(verify_token)],
-    feeding_repo: Annotated[SQLiteFeedingRepository, Depends(get_feeding_repository)],
+    feeding_repo: Annotated[
+        FeedingRepositoryInterface, Depends(get_feeding_repository)
+    ],
 ) -> list[FeedingResponse]:
     """Get all feeding logs for the authenticated user's children."""
     feedings = feeding_repo.get_by_user_id(user_id)
@@ -85,8 +85,10 @@ def get_user_feedings(
 def get_feeding(
     feeding_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    feeding_repo: Annotated[SQLiteFeedingRepository, Depends(get_feeding_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    feeding_repo: Annotated[
+        FeedingRepositoryInterface, Depends(get_feeding_repository)
+    ],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> FeedingResponse:
     """Get a specific feeding log by ID."""
     feeding = feeding_repo.get_by_id(feeding_id)
@@ -95,9 +97,7 @@ def get_feeding(
         raise HTTPException(status_code=404, detail="Feeding log not found")
 
     # Verify the feeding belongs to user's child
-    child = child_repo.get_by_id(feeding["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, feeding["child_id"], user_id)
 
     return FeedingResponse(**feeding)
 
@@ -107,8 +107,10 @@ def update_feeding(
     feeding_id: int,
     request: UpdateFeedingRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    feeding_repo: Annotated[SQLiteFeedingRepository, Depends(get_feeding_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    feeding_repo: Annotated[
+        FeedingRepositoryInterface, Depends(get_feeding_repository)
+    ],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> FeedingResponse:
     """Update a feeding log entry."""
     feeding = feeding_repo.get_by_id(feeding_id)
@@ -117,16 +119,15 @@ def update_feeding(
         raise HTTPException(status_code=404, detail="Feeding log not found")
 
     # Verify ownership
-    child = child_repo.get_by_id(feeding["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, feeding["child_id"], user_id)
 
     # Update the feeding
+    feeding_type_value = request.feeding_type.value if request.feeding_type else None
     updated_feeding = feeding_repo.update(
         feeding_id=feeding_id,
         start_time=request.start_time,
         end_time=request.end_time,
-        feeding_type=request.feeding_type.value if request.feeding_type else None,
+        feeding_type=feeding_type_value,
     )
 
     if not updated_feeding:
@@ -139,8 +140,10 @@ def update_feeding(
 def delete_feeding(
     feeding_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    feeding_repo: Annotated[SQLiteFeedingRepository, Depends(get_feeding_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    feeding_repo: Annotated[
+        FeedingRepositoryInterface, Depends(get_feeding_repository)
+    ],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> None:
     """Delete a feeding log entry."""
     feeding = feeding_repo.get_by_id(feeding_id)
@@ -149,9 +152,7 @@ def delete_feeding(
         raise HTTPException(status_code=404, detail="Feeding log not found")
 
     # Verify ownership
-    child = child_repo.get_by_id(feeding["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, feeding["child_id"], user_id)
 
     success = feeding_repo.delete(feeding_id)
     if not success:

src/baby_monitor/routers/sleep.py

@@ -9,14 +9,15 @@ from baby_monitor.models.sleep import (
     SleepResponse,
 )
 from baby_monitor.routers.auth import verify_token
-from baby_monitor.repositories.sleep.sqlite_sleep import SQLiteSleepRepository
-from baby_monitor.repositories.dependencies.get_sleep_repository import (
-    get_sleep_repository,
+from baby_monitor.repositories.interfaces import (
+    SleepRepositoryInterface,
+    ChildRepositoryInterface,
 )
-from baby_monitor.repositories.child.sqlite_child import SQLiteChildRepository
-from baby_monitor.repositories.dependencies.get_child_repository import (
+from baby_monitor.repositories.dependencies import (
+    get_sleep_repository,
     get_child_repository,
 )
+from baby_monitor.utils import verify_child_access
 
 router = APIRouter(prefix="/api/sleep", tags=["sleep"])
 
@@ -25,17 +26,12 @@ router = APIRouter(prefix="/api/sleep", tags=["sleep"])
 def create_sleep(
     request: CreateSleepRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[SQLiteSleepRepository, Depends(get_sleep_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> SleepResponse:
     """Create a new sleep log entry."""
     # Verify the child belongs to the authenticated user
-    child = child_repo.get_by_id(request.child_id)
-    if not child:
-        raise HTTPException(status_code=404, detail="Child not found")
-
-    if child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied to this child")
+    verify_child_access(child_repo, request.child_id, user_id)
 
     sleep = sleep_repo.create(
         child_id=request.child_id,
@@ -48,8 +44,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[SQLiteSleepRepository, Depends(get_sleep_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_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)
@@ -70,7 +66,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[SQLiteSleepRepository, Depends(get_sleep_repository)],
+    sleep_repo: Annotated[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)
@@ -81,8 +77,8 @@ def get_user_sleeps(
 def get_sleep(
     sleep_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[SQLiteSleepRepository, Depends(get_sleep_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_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)
@@ -91,9 +87,7 @@ def get_sleep(
         raise HTTPException(status_code=404, detail="Sleep log not found")
 
     # Verify the sleep belongs to user's child
-    child = child_repo.get_by_id(sleep["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, sleep["child_id"], user_id)
 
     return SleepResponse(**sleep)
 
@@ -103,8 +97,8 @@ def update_sleep(
     sleep_id: int,
     request: UpdateSleepRequest,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[SQLiteSleepRepository, Depends(get_sleep_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> SleepResponse:
     """Update an existing sleep log."""
     sleep = sleep_repo.get_by_id(sleep_id)
@@ -113,9 +107,7 @@ def update_sleep(
         raise HTTPException(status_code=404, detail="Sleep log not found")
 
     # Verify the sleep belongs to user's child
-    child = child_repo.get_by_id(sleep["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, sleep["child_id"], user_id)
 
     updated = sleep_repo.update(
         sleep_id=sleep_id,
@@ -132,8 +124,8 @@ def update_sleep(
 def delete_sleep(
     sleep_id: int,
     user_id: Annotated[int, Depends(verify_token)],
-    sleep_repo: Annotated[SQLiteSleepRepository, Depends(get_sleep_repository)],
-    child_repo: Annotated[SQLiteChildRepository, Depends(get_child_repository)],
+    sleep_repo: Annotated[SleepRepositoryInterface, Depends(get_sleep_repository)],
+    child_repo: Annotated[ChildRepositoryInterface, Depends(get_child_repository)],
 ) -> None:
     """Delete a sleep log."""
     sleep = sleep_repo.get_by_id(sleep_id)
@@ -142,9 +134,7 @@ def delete_sleep(
         raise HTTPException(status_code=404, detail="Sleep log not found")
 
     # Verify the sleep belongs to user's child
-    child = child_repo.get_by_id(sleep["child_id"])
-    if not child or child["user_id"] != user_id:
-        raise HTTPException(status_code=403, detail="Access denied")
+    verify_child_access(child_repo, sleep["child_id"], user_id)
 
     success = sleep_repo.delete(sleep_id)
     if not success:

src/baby_monitor/static/add-child.html

@@ -192,6 +192,23 @@
           Cancel
         </button>
       </form>
+
+      <div
+        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"
+        >
+          Skip for now
+        </button>
+      </div>
     </div>
 
     <script>
@@ -205,11 +222,17 @@
       const urlParams = new URLSearchParams(window.location.search);
       const childId = urlParams.get("id");
       const isEditMode = !!childId;
+      const fromHome = urlParams.get("from") === "home"; // Check if redirected from home
 
       const form = document.getElementById("addChildForm");
       const messageDiv = document.getElementById("message");
       const submitBtn = document.getElementById("submitBtn");
 
+      // Show skip option if user was redirected from home (has no children)
+      if (fromHome && !isEditMode) {
+        document.getElementById("skipOption").style.display = "block";
+      }
+
       // Update page title and button text if editing
       if (isEditMode) {
         document.querySelector("h1").textContent = "✏️ Edit Child";
@@ -317,6 +340,10 @@
       function goBack() {
         window.location.href = "/";
       }
+
+      function skipToHome() {
+        window.location.href = "/";
+      }
     </script>
   </body>
 </html>

src/baby_monitor/static/admin.html

@@ -185,6 +185,172 @@
         background: #c82333;
         box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
       }
+
+      .user-management h2::before {
+        content: "👥";
+      }
+
+      .search-box {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 14px;
+        margin-bottom: 15px;
+      }
+
+      .user-list {
+        max-height: 400px;
+        overflow-y: auto;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+      }
+
+      .user-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px;
+        border-bottom: 1px solid #eee;
+        background: white;
+      }
+
+      .user-item:last-child {
+        border-bottom: none;
+      }
+
+      .user-item:hover {
+        background: #f8f9fa;
+      }
+
+      .user-info {
+        flex: 1;
+      }
+
+      .user-name {
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 4px;
+      }
+
+      .user-meta {
+        font-size: 12px;
+        color: #666;
+      }
+
+      .admin-badge {
+        display: inline-block;
+        padding: 2px 8px;
+        background: #667eea;
+        color: white;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 600;
+        margin-left: 8px;
+      }
+
+      .delete-user-btn {
+        padding: 6px 12px;
+        background: #dc3545;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        font-size: 13px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .delete-user-btn:hover {
+        background: #c82333;
+      }
+
+      .delete-user-btn:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+      }
+
+      .modal {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .modal.show {
+        display: flex;
+      }
+
+      .modal-content {
+        background: white;
+        padding: 30px;
+        border-radius: 8px;
+        max-width: 500px;
+        width: 90%;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+      }
+
+      .modal h3 {
+        color: #333;
+        margin-bottom: 15px;
+      }
+
+      .modal p {
+        color: #666;
+        margin-bottom: 20px;
+        line-height: 1.5;
+      }
+
+      .modal-buttons {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+      }
+
+      .modal-button {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .modal-button.cancel {
+        background: #6c757d;
+        color: white;
+      }
+
+      .modal-button.cancel:hover {
+        background: #5a6268;
+      }
+
+      .modal-button.confirm {
+        background: #dc3545;
+        color: white;
+      }
+
+      .modal-button.confirm:hover {
+        background: #c82333;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: #999;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+      }
     </style>
   </head>
   <body>
@@ -218,9 +384,46 @@
         <div id="error" class="error"></div>
       </div>
 
+      <div class="section user-management">
+        <h2>User Management</h2>
+        <p style="color: #666; margin-bottom: 15px; font-size: 14px">
+          View and manage all users in the system.
+        </p>
+
+        <input
+          type="text"
+          id="userSearch"
+          class="search-box"
+          placeholder="Search users by username..."
+          oninput="filterUsers()"
+        />
+
+        <div id="userListContainer" class="loading">Loading users...</div>
+      </div>
+
       <button class="button logout-button" onclick="logout()">Logout</button>
     </div>
 
+    <!-- Delete Confirmation Modal -->
+    <div class="modal" id="deleteModal">
+      <div class="modal-content">
+        <h3>⚠️ Confirm User Deletion</h3>
+        <p id="deleteMessage"></p>
+        <p style="color: #dc3545; font-weight: 600">
+          This action cannot be undone. All associated children and their logs
+          (feedings, diapers, sleep) will be permanently deleted.
+        </p>
+        <div class="modal-buttons">
+          <button class="modal-button cancel" onclick="closeDeleteModal()">
+            Cancel
+          </button>
+          <button class="modal-button confirm" onclick="confirmDelete()">
+            Delete User
+          </button>
+        </div>
+      </div>
+    </div>
+
     <script>
       // Check if user is authenticated and is admin
       const token = localStorage.getItem("access_token");
@@ -228,7 +431,10 @@
         window.location.href = "/login.html";
       }
 
-      // Verify user is admin
+      let allUsers = [];
+      let userToDelete = null;
+
+      // Verify user is admin and load data
       fetch("/api/me", {
         headers: {
           Authorization: `Bearer ${token}`,
@@ -240,12 +446,154 @@
             alert("Access denied. Admin privileges required.");
             window.location.href = "/";
           }
+          // Load users after verifying admin status
+          loadUsers();
         })
         .catch((error) => {
           console.error("Error verifying admin status:", error);
           window.location.href = "/login.html";
         });
 
+      async function loadUsers() {
+        const container = document.getElementById("userListContainer");
+
+        try {
+          const response = await fetch("/api/admin/users", {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (!response.ok) {
+            throw new Error("Failed to load users");
+          }
+
+          allUsers = await response.json();
+          renderUsers(allUsers);
+        } catch (error) {
+          console.error("Error loading users:", error);
+          container.innerHTML = `
+            <div class="empty-state">
+              ❌ Failed to load users: ${error.message}
+            </div>
+          `;
+        }
+      }
+
+      function renderUsers(users) {
+        const container = document.getElementById("userListContainer");
+
+        if (users.length === 0) {
+          container.innerHTML = `
+            <div class="empty-state">
+              No users found.
+            </div>
+          `;
+          return;
+        }
+
+        container.className = "user-list";
+        container.innerHTML = users
+          .map(
+            (user) => `
+          <div class="user-item">
+            <div class="user-info">
+              <div class="user-name">
+                ${user.username}
+                ${user.is_admin ? '<span class="admin-badge">ADMIN</span>' : ""}
+              </div>
+              <div class="user-meta">
+                ID: ${user.id} • Created: ${new Date(user.created_at).toLocaleDateString()}
+              </div>
+            </div>
+            <button 
+              class="delete-user-btn" 
+              onclick="showDeleteModal(${user.id}, '${user.username}', ${user.is_admin})"
+              ${user.is_admin ? 'disabled title="Cannot delete admin users"' : ""}
+            >
+              Delete
+            </button>
+          </div>
+        `,
+          )
+          .join("");
+      }
+
+      function filterUsers() {
+        const searchTerm = document
+          .getElementById("userSearch")
+          .value.toLowerCase();
+        const filtered = allUsers.filter((user) =>
+          user.username.toLowerCase().includes(searchTerm),
+        );
+        renderUsers(filtered);
+      }
+
+      function showDeleteModal(userId, username, isAdmin) {
+        if (isAdmin) {
+          return; // Don't allow deleting admin users
+        }
+
+        userToDelete = { id: userId, username };
+        const modal = document.getElementById("deleteModal");
+        const message = document.getElementById("deleteMessage");
+
+        message.textContent = `Are you sure you want to delete user "${username}"?`;
+        modal.classList.add("show");
+      }
+
+      function closeDeleteModal() {
+        const modal = document.getElementById("deleteModal");
+        modal.classList.remove("show");
+        userToDelete = null;
+      }
+
+      async function confirmDelete() {
+        if (!userToDelete) return;
+
+        const modal = document.getElementById("deleteModal");
+        const confirmBtn = modal.querySelector(".modal-button.confirm");
+
+        confirmBtn.disabled = true;
+        confirmBtn.textContent = "Deleting...";
+
+        try {
+          const response = await fetch(`/api/admin/users/${userToDelete.id}`, {
+            method: "DELETE",
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || "Failed to delete user");
+          }
+
+          const result = await response.json();
+
+          // Show success message
+          alert(
+            `✓ ${result.message}\n\n` +
+              `Deleted:\n` +
+              `• ${result.deleted_children.length} children\n` +
+              `• ${result.deleted_feedings} feedings\n` +
+              `• ${result.deleted_diapers} diaper changes\n` +
+              `• ${result.deleted_sleeps} sleep sessions`,
+          );
+
+          // Reload user list
+          await loadUsers();
+          closeDeleteModal();
+        } catch (error) {
+          console.error("Error deleting user:", error);
+          alert(`Failed to delete user: ${error.message}`);
+        } finally {
+          confirmBtn.disabled = false;
+          confirmBtn.textContent = "Delete User";
+        }
+      }
+
       async function generateLink() {
         const btn = document.getElementById("generateBtn");
         const linkContainer = document.getElementById("linkContainer");

src/baby_monitor/static/diapers.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Diaper Changes - Baby Monitor</title>
+    <title>Diapers - Baby Monitor</title>
+    <link rel="stylesheet" href="/menu.css" />
     <style>
       * {
         margin: 0;
@@ -15,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 {
@@ -25,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 {
@@ -71,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -113,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 {
@@ -240,93 +252,9 @@
       .edit-button:hover {
         background: #d77ee6;
       }
-
-      .burger-menu {
-        position: fixed;
-        top: 1rem;
-        left: 1rem;
-        cursor: pointer;
-        z-index: 1000;
-        background: white;
-        padding: 0.5rem;
-        border-radius: 4px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      }
-
-      .burger-menu div {
-        width: 25px;
-        height: 3px;
-        background-color: #333;
-        margin: 5px 0;
-        transition: 0.3s;
-      }
-
-      .menu-overlay {
-        position: fixed;
-        top: 0;
-        left: -250px;
-        width: 250px;
-        height: 100vh;
-        background: white;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-        transition: left 0.3s;
-        z-index: 999;
-        padding: 4rem 1rem 1rem 1rem;
-      }
-
-      .menu-overlay.open {
-        left: 0;
-      }
-
-      .menu-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100vh;
-        background: rgba(0, 0, 0, 0.5);
-        display: none;
-        z-index: 998;
-      }
-
-      .menu-backdrop.open {
-        display: block;
-      }
-
-      .menu-item {
-        padding: 1rem;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-
-      .menu-item:hover {
-        background: #f5f5f5;
-      }
-
-      .menu-item.logout {
-        color: #dc3545;
-        font-weight: 600;
-      }
     </style>
   </head>
   <body>
-    <div class="burger-menu" id="burgerMenu">
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-
-    <div class="menu-backdrop" id="menuBackdrop"></div>
-
-    <div class="menu-overlay" id="menuOverlay">
-      <div class="menu-item" id="menuHome">🏠 Home</div>
-      <div class="menu-item" id="menuAddChild">👶 Add Child</div>
-      <div class="menu-item" id="menuFeedings">🍼 Feedings</div>
-      <div class="menu-item" id="menuSleep">😴 Sleep</div>
-      <div class="menu-item logout" id="menuLogout">🚪 Logout</div>
-    </div>
-
     <div class="container">
       <h1>🧷 Diaper Changes</h1>
       <p class="subtitle">Overview of all diaper change sessions</p>
@@ -337,6 +265,7 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+    <script src="/menu.js"></script>
     <script>
       // Check if user is authenticated
       const token = localStorage.getItem("access_token");
@@ -344,50 +273,21 @@
         window.location.href = "/login.html";
       }
 
+      // Initialize burger menu
+      initBurgerMenu({ includeHome: true });
+
       let allDiaperChanges = [];
       let allChildren = [];
-      let currentDaysRange = 7;
+      let currentDaysRange =
+        parseInt(localStorage.getItem("lastDiaperTimeRange")) || 7;
       let selectedChildId = null; // null means "All Children"
 
-      // Burger menu functionality
-      const burgerMenu = document.getElementById("burgerMenu");
-      const menuOverlay = document.getElementById("menuOverlay");
-      const menuBackdrop = document.getElementById("menuBackdrop");
-
-      function toggleMenu() {
-        menuOverlay.classList.toggle("open");
-        menuBackdrop.classList.toggle("open");
+      // Restore last selected child from localStorage
+      const lastChildId = localStorage.getItem("lastDiaperChildFilter");
+      if (lastChildId && lastChildId !== "all") {
+        selectedChildId = parseInt(lastChildId);
       }
 
-      function closeMenu() {
-        menuOverlay.classList.remove("open");
-        menuBackdrop.classList.remove("open");
-      }
-
-      burgerMenu.addEventListener("click", toggleMenu);
-      menuBackdrop.addEventListener("click", closeMenu);
-
-      document.getElementById("menuHome").addEventListener("click", () => {
-        window.location.href = "/";
-      });
-
-      document.getElementById("menuAddChild").addEventListener("click", () => {
-        window.location.href = "/add-child.html";
-      });
-
-      document.getElementById("menuFeedings").addEventListener("click", () => {
-        window.location.href = "/feedings.html";
-      });
-
-      document.getElementById("menuSleep").addEventListener("click", () => {
-        window.location.href = "/sleep.html";
-      });
-
-      document.getElementById("menuLogout").addEventListener("click", () => {
-        closeMenu();
-        logout();
-      });
-
       // Load diaper changes data
       async function loadDiaperChanges() {
         try {
@@ -429,12 +329,14 @@
 
       function onDaysRangeChange(event) {
         currentDaysRange = parseInt(event.target.value);
+        localStorage.setItem("lastDiaperTimeRange", currentDaysRange);
         displayDiaperChanges(allDiaperChanges);
       }
 
       function onChildChange(event) {
         selectedChildId =
           event.target.value === "all" ? null : parseInt(event.target.value);
+        localStorage.setItem("lastDiaperChildFilter", event.target.value);
         displayDiaperChanges(allDiaperChanges);
       }
 
@@ -483,7 +385,7 @@
             </div>
 
             <div class="chart-container">
-              <h2>Diaper Changes Per Day (Last ${currentDaysRange} Day${currentDaysRange !== 1 ? "s" : ""})</h2>
+              <h2>Diaper Changes (Last ${currentDaysRange} Day${currentDaysRange !== 1 ? "s" : ""})</h2>
               <div class="chart-wrapper">
                 <canvas id="diaperChart"></canvas>
               </div>
@@ -745,36 +647,115 @@
           );
         }
 
-        // Create days based on currentDaysRange (including today)
-        for (let i = currentDaysRange - 1; i >= 0; i--) {
-          const date = new Date(now);
-          date.setDate(date.getDate() - i);
-          date.setHours(0, 0, 0, 0);
+        // 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);
 
-          const dateStr = date.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-          });
-          labels.push(dateStr);
+            const periodEnd = new Date(periodStart);
+            periodEnd.setHours(periodEnd.getHours() + 3);
 
-          // Count poop and pee diapers for this day
-          const nextDay = new Date(date);
-          nextDay.setDate(nextDay.getDate() + 1);
+            const startLabel = periodStart.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              hour12: true,
+            });
+            const endLabel = periodEnd.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              hour12: true,
+            });
+            labels.push(`${startLabel}-${endLabel}`);
 
-          const dayChanges = filteredChanges.filter((dc) => {
-            const changeDate = new Date(dc.change_time);
-            return changeDate >= date && changeDate < nextDay;
-          });
+            // Count poop and pee diapers for this 3-hour period
+            const periodChanges = filteredChanges.filter((dc) => {
+              const changeDate = new Date(dc.change_time);
+              return changeDate >= periodStart && changeDate < periodEnd;
+            });
 
-          const poopCount = dayChanges.filter(
-            (dc) => dc.poop_amount !== null,
-          ).length;
-          const peeCount = dayChanges.filter(
-            (dc) => dc.pee_amount !== null,
-          ).length;
+            const poopCount = periodChanges.filter(
+              (dc) => dc.poop_amount !== null,
+            ).length;
+            const peeCount = periodChanges.filter(
+              (dc) => dc.pee_amount !== null,
+            ).length;
 
-          poopData.push(poopCount);
-          peeData.push(peeCount);
+            poopData.push(poopCount);
+            peeData.push(peeCount);
+          }
+        } else if (currentDaysRange === 3) {
+          // 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);
+
+            const periodEnd = new Date(periodStart);
+            periodEnd.setHours(periodEnd.getHours() + 8);
+
+            // Format label based on the 8-hour period
+            const dayStr = periodStart.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            });
+            const startHour = periodStart.getHours();
+            let periodLabel;
+            if (startHour >= 0 && startHour < 8) {
+              periodLabel = `${dayStr} Night`;
+            } else if (startHour >= 8 && startHour < 16) {
+              periodLabel = `${dayStr} Morning`;
+            } else {
+              periodLabel = `${dayStr} Evening`;
+            }
+            labels.push(periodLabel);
+
+            // Count poop and pee diapers for this 8-hour period
+            const periodChanges = filteredChanges.filter((dc) => {
+              const changeDate = new Date(dc.change_time);
+              return changeDate >= periodStart && changeDate < periodEnd;
+            });
+
+            const poopCount = periodChanges.filter(
+              (dc) => dc.poop_amount !== null,
+            ).length;
+            const peeCount = periodChanges.filter(
+              (dc) => dc.pee_amount !== null,
+            ).length;
+
+            poopData.push(poopCount);
+            peeData.push(peeCount);
+          }
+        } else {
+          // Create days based on currentDaysRange (including today)
+          for (let i = currentDaysRange - 1; i >= 0; i--) {
+            const date = new Date(now);
+            date.setDate(date.getDate() - i);
+            date.setHours(0, 0, 0, 0);
+
+            const dateStr = date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            });
+            labels.push(dateStr);
+
+            // Count poop and pee diapers for this day
+            const nextDay = new Date(date);
+            nextDay.setDate(nextDay.getDate() + 1);
+
+            const dayChanges = filteredChanges.filter((dc) => {
+              const changeDate = new Date(dc.change_time);
+              return changeDate >= date && changeDate < nextDay;
+            });
+
+            const poopCount = dayChanges.filter(
+              (dc) => dc.poop_amount !== null,
+            ).length;
+            const peeCount = dayChanges.filter(
+              (dc) => dc.pee_amount !== null,
+            ).length;
+
+            poopData.push(poopCount);
+            peeData.push(peeCount);
+          }
         }
 
         return { labels, poopData, peeData };
@@ -842,7 +823,7 @@
                 beginAtZero: true,
                 title: {
                   display: true,
-                  text: "Number of Diapers",
+                  text: "Number of Changes",
                   font: {
                     size: 13,
                     weight: "600",

src/baby_monitor/static/feedings.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Feedings - Baby Monitor</title>
+    <link rel="stylesheet" href="/menu.css" />
     <style>
       * {
         margin: 0;
@@ -15,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 {
@@ -25,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 {
@@ -71,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -113,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 {
@@ -277,93 +289,9 @@
       .edit-button:hover {
         background: #5568d3;
       }
-
-      .burger-menu {
-        position: fixed;
-        top: 1rem;
-        left: 1rem;
-        cursor: pointer;
-        z-index: 1000;
-        background: white;
-        padding: 0.5rem;
-        border-radius: 4px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      }
-
-      .burger-menu div {
-        width: 25px;
-        height: 3px;
-        background-color: #333;
-        margin: 5px 0;
-        transition: 0.3s;
-      }
-
-      .menu-overlay {
-        position: fixed;
-        top: 0;
-        left: -250px;
-        width: 250px;
-        height: 100vh;
-        background: white;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-        transition: left 0.3s;
-        z-index: 999;
-        padding: 4rem 1rem 1rem 1rem;
-      }
-
-      .menu-overlay.open {
-        left: 0;
-      }
-
-      .menu-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100vh;
-        background: rgba(0, 0, 0, 0.5);
-        display: none;
-        z-index: 998;
-      }
-
-      .menu-backdrop.open {
-        display: block;
-      }
-
-      .menu-item {
-        padding: 1rem;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-
-      .menu-item:hover {
-        background: #f5f5f5;
-      }
-
-      .menu-item.logout {
-        color: #dc3545;
-        font-weight: 600;
-      }
     </style>
   </head>
   <body>
-    <div class="burger-menu" id="burgerMenu">
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-
-    <div class="menu-backdrop" id="menuBackdrop"></div>
-
-    <div class="menu-overlay" id="menuOverlay">
-      <div class="menu-item" id="menuHome">🏠 Home</div>
-      <div class="menu-item" id="menuAddChild">👶 Add Child</div>
-      <div class="menu-item" id="menuDiapers">🧷 Diapers</div>
-      <div class="menu-item" id="menuSleep">😴 Sleep</div>
-      <div class="menu-item logout" id="menuLogout">🚪 Logout</div>
-    </div>
-
     <div class="container">
       <h1>🍼 Feedings</h1>
       <p class="subtitle">Overview of all feeding sessions</p>
@@ -374,6 +302,7 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+    <script src="/menu.js"></script>
     <script>
       // Check if user is authenticated
       const token = localStorage.getItem("access_token");
@@ -381,50 +310,22 @@
         window.location.href = "/login.html";
       }
 
+      // Initialize burger menu
+      initBurgerMenu({ includeHome: true });
+
       let allFeedings = [];
       let allChildren = [];
-      let currentDaysRange = 7;
+      let currentDaysRange =
+        parseInt(localStorage.getItem("lastFeedingTimeRange")) || 7;
       let selectedChildId = null; // null means "All Children"
+      let barChartInstance = null;
 
-      // Burger menu functionality
-      const burgerMenu = document.getElementById("burgerMenu");
-      const menuOverlay = document.getElementById("menuOverlay");
-      const menuBackdrop = document.getElementById("menuBackdrop");
-
-      function toggleMenu() {
-        menuOverlay.classList.toggle("open");
-        menuBackdrop.classList.toggle("open");
+      // Restore last selected child from localStorage
+      const lastChildId = localStorage.getItem("lastFeedingChildFilter");
+      if (lastChildId && lastChildId !== "all") {
+        selectedChildId = parseInt(lastChildId);
       }
 
-      function closeMenu() {
-        menuOverlay.classList.remove("open");
-        menuBackdrop.classList.remove("open");
-      }
-
-      burgerMenu.addEventListener("click", toggleMenu);
-      menuBackdrop.addEventListener("click", closeMenu);
-
-      document.getElementById("menuHome").addEventListener("click", () => {
-        window.location.href = "/";
-      });
-
-      document.getElementById("menuAddChild").addEventListener("click", () => {
-        window.location.href = "/add-child.html";
-      });
-
-      document.getElementById("menuDiapers").addEventListener("click", () => {
-        window.location.href = "/diapers.html";
-      });
-
-      document.getElementById("menuSleep").addEventListener("click", () => {
-        window.location.href = "/sleep.html";
-      });
-
-      document.getElementById("menuLogout").addEventListener("click", () => {
-        closeMenu();
-        logout();
-      });
-
       // Load feedings data
       async function loadFeedings() {
         try {
@@ -466,12 +367,14 @@
 
       function onDaysRangeChange(event) {
         currentDaysRange = parseInt(event.target.value);
+        localStorage.setItem("lastFeedingTimeRange", currentDaysRange);
         displayFeedings(allFeedings);
       }
 
       function onChildChange(event) {
         selectedChildId =
           event.target.value === "all" ? null : parseInt(event.target.value);
+        localStorage.setItem("lastFeedingChildFilter", event.target.value);
         displayFeedings(allFeedings);
       }
 
@@ -520,7 +423,7 @@
             </div>
 
             <div class="chart-container">
-              <h2>Feedings Per Day (Last ${currentDaysRange} Day${currentDaysRange !== 1 ? "s" : ""})</h2>
+              <h2>Total Feeding Time (Last ${currentDaysRange} Day${currentDaysRange !== 1 ? "s" : ""})</h2>
               <div class="chart-wrapper">
                 <canvas id="feedingsChart"></canvas>
               </div>
@@ -769,7 +672,8 @@
       function prepareBarChartData(feedings) {
         const now = new Date();
         const labels = [];
-        const data = [];
+        const durations = []; // Array of arrays, each containing individual feeding durations
+        const feedingCounts = []; // For reference
 
         // Filter by selected child if applicable
         let filteredFeedings = feedings;
@@ -779,54 +683,248 @@
           );
         }
 
-        // Create days based on currentDaysRange (including today)
-        for (let i = currentDaysRange - 1; i >= 0; i--) {
-          const date = new Date(now);
-          date.setDate(date.getDate() - i);
-          date.setHours(0, 0, 0, 0);
+        // Only use completed feedings
+        const completedFeedings = filteredFeedings.filter((f) => f.end_time);
 
-          const dateStr = date.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-          });
-          labels.push(dateStr);
+        // 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);
 
-          // Count feedings for this day
-          const nextDay = new Date(date);
-          nextDay.setDate(nextDay.getDate() + 1);
+            const periodEnd = new Date(periodStart);
+            periodEnd.setHours(periodEnd.getHours() + 3);
 
-          const count = filteredFeedings.filter((f) => {
-            const feedingDate = new Date(f.start_time);
-            return feedingDate >= date && feedingDate < nextDay;
-          }).length;
+            const startLabel = periodStart.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              hour12: true,
+            });
+            const endLabel = periodEnd.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              hour12: true,
+            });
+            labels.push(`${startLabel}-${endLabel}`);
 
-          data.push(count);
+            // Get individual feeding durations for this 3-hour period (in minutes)
+            const periodFeedings = completedFeedings.filter((f) => {
+              const feedingDate = new Date(f.start_time);
+              return feedingDate >= periodStart && feedingDate < periodEnd;
+            });
+
+            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);
+          }
+        } else if (currentDaysRange === 3) {
+          // 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);
+
+            const periodEnd = new Date(periodStart);
+            periodEnd.setHours(periodEnd.getHours() + 8);
+
+            // Format label based on the 8-hour period
+            const dayStr = periodStart.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            });
+            const startHour = periodStart.getHours();
+            let periodLabel;
+            if (startHour >= 0 && startHour < 8) {
+              periodLabel = `${dayStr} Night`;
+            } else if (startHour >= 8 && startHour < 16) {
+              periodLabel = `${dayStr} Morning`;
+            } else {
+              periodLabel = `${dayStr} Evening`;
+            }
+            labels.push(periodLabel);
+
+            // Get individual feeding durations for this 8-hour period (in minutes)
+            const periodFeedings = completedFeedings.filter((f) => {
+              const feedingDate = new Date(f.start_time);
+              return feedingDate >= periodStart && feedingDate < periodEnd;
+            });
+
+            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);
+          }
+        } else {
+          // Create days based on currentDaysRange (including today)
+          for (let i = currentDaysRange - 1; i >= 0; i--) {
+            const date = new Date(now);
+            date.setDate(date.getDate() - i);
+            date.setHours(0, 0, 0, 0);
+
+            const dateStr = date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            });
+            labels.push(dateStr);
+
+            // Get individual feeding durations for this day (in minutes)
+            const nextDay = new Date(date);
+            nextDay.setDate(nextDay.getDate() + 1);
+
+            const dayFeedings = completedFeedings.filter((f) => {
+              const feedingDate = new Date(f.start_time);
+              return feedingDate >= date && feedingDate < nextDay;
+            });
+
+            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);
+          }
         }
 
-        return { labels, data };
+        return { labels, durations, feedingCounts };
       }
 
       function renderBarChart(chartData) {
         const ctx = document.getElementById("feedingsChart").getContext("2d");
 
-        new Chart(ctx, {
+        // Destroy existing chart if it exists
+        if (barChartInstance) {
+          barChartInstance.destroy();
+        }
+
+        // Find the maximum number of feedings in any period
+        const maxFeedings = Math.max(
+          ...chartData.durations.map((d) => d.length),
+          0,
+        );
+
+        // If no feedings at all, show empty chart
+        if (maxFeedings === 0) {
+          barChartInstance = new Chart(ctx, {
+            type: "bar",
+            data: {
+              labels: chartData.labels,
+              datasets: [
+                {
+                  label: "No Data",
+                  data: new Array(chartData.labels.length).fill(0),
+                  backgroundColor: "rgba(102, 126, 234, 0.3)",
+                },
+              ],
+            },
+            options: {
+              responsive: true,
+              maintainAspectRatio: false,
+              scales: {
+                y: {
+                  beginAtZero: true,
+                  max: 60,
+                  title: {
+                    display: true,
+                    text: "Minutes",
+                  },
+                },
+              },
+              plugins: {
+                legend: {
+                  display: false,
+                },
+              },
+            },
+          });
+          return;
+        }
+
+        // Create color palette for different feedings
+        const colors = [
+          "rgba(102, 126, 234, 0.8)",
+          "rgba(118, 75, 162, 0.8)",
+          "rgba(255, 159, 64, 0.8)",
+          "rgba(76, 175, 80, 0.8)",
+          "rgba(244, 67, 54, 0.8)",
+          "rgba(156, 39, 176, 0.8)",
+          "rgba(102, 126, 234, 0.6)",
+          "rgba(118, 75, 162, 0.6)",
+          "rgba(255, 159, 64, 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) => 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"),
+            borderWidth: 1,
+          });
+        }
+
+        barChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
             labels: chartData.labels,
-            datasets: [
-              {
-                label: "Feedings",
-                data: chartData.data,
-                backgroundColor: "rgba(102, 126, 234, 0.7)",
-                borderColor: "rgba(102, 126, 234, 1)",
-                borderWidth: 2,
-                borderRadius: 6,
-              },
-            ],
+            datasets: datasets,
           },
           options: {
             responsive: true,
             maintainAspectRatio: false,
+            scales: {
+              x: {
+                stacked: true,
+                ticks: {
+                  font: {
+                    size: 12,
+                  },
+                },
+                grid: {
+                  display: false,
+                },
+              },
+              y: {
+                stacked: true,
+                beginAtZero: true,
+                title: {
+                  display: true,
+                  text: "Minutes",
+                  font: {
+                    size: 13,
+                    weight: "600",
+                  },
+                },
+                ticks: {
+                  font: {
+                    size: 12,
+                  },
+                  callback: function (value) {
+                    return Math.round(value) + "m";
+                  },
+                },
+                grid: {
+                  color: "rgba(0, 0, 0, 0.05)",
+                },
+              },
+            },
             plugins: {
               legend: {
                 display: false,
@@ -842,42 +940,18 @@
                 },
                 callbacks: {
                   label: function (context) {
-                    const count = context.parsed.y;
-                    return `${count} feeding${count !== 1 ? "s" : ""}`;
+                    const minutes = Math.round(context.parsed.y);
+                    return `${context.dataset.label}: ${minutes}m`;
                   },
-                },
-              },
-            },
-            scales: {
-              y: {
-                beginAtZero: true,
-                title: {
-                  display: true,
-                  text: "Number of Feedings",
-                  font: {
-                    size: 13,
-                    weight: "600",
+                  footer: function (tooltipItems) {
+                    const periodIndex = tooltipItems[0].dataIndex;
+                    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" : ""})`;
                   },
                 },
-                ticks: {
-                  stepSize: 1,
-                  font: {
-                    size: 12,
-                  },
-                },
-                grid: {
-                  color: "rgba(0, 0, 0, 0.05)",
-                },
-              },
-              x: {
-                ticks: {
-                  font: {
-                    size: 12,
-                  },
-                },
-                grid: {
-                  display: false,
-                },
               },
             },
           },

src/baby_monitor/static/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Baby Monitor</title>
+    <link rel="stylesheet" href="/menu.css" />
     <style>
       body {
         font-family: Arial, sans-serif;
@@ -12,69 +13,6 @@
         padding: 0 1rem;
         background-color: #f0f0f0;
       }
-      .burger-menu {
-        position: fixed;
-        top: 1rem;
-        left: 1rem;
-        cursor: pointer;
-        z-index: 1000;
-        background: white;
-        padding: 0.5rem;
-        border-radius: 4px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      }
-      .burger-menu div {
-        width: 25px;
-        height: 3px;
-        background-color: #333;
-        margin: 5px 0;
-        transition: 0.3s;
-      }
-      .menu-overlay {
-        position: fixed;
-        top: 0;
-        left: -250px;
-        width: 250px;
-        height: 100vh;
-        background: white;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-        transition: left 0.3s;
-        z-index: 999;
-        padding: 4rem 1rem 1rem 1rem;
-      }
-      .menu-overlay.open {
-        left: 0;
-      }
-      .menu-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100vh;
-        background: rgba(0, 0, 0, 0.5);
-        display: none;
-        z-index: 998;
-      }
-      .menu-backdrop.open {
-        display: block;
-      }
-      .menu-item {
-        padding: 1rem;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-      .menu-item:hover {
-        background: #f5f5f5;
-      }
-      .menu-item.admin {
-        color: #667eea;
-        font-weight: 600;
-      }
-      .menu-item.logout {
-        color: #dc3545;
-        font-weight: 600;
-      }
       .container {
         background: white;
         padding: 2rem;
@@ -85,11 +23,10 @@
         color: #333;
         margin-bottom: 1rem;
       }
-      .user-info {
-        background: #e3f2fd;
-        padding: 1rem;
-        border-radius: 4px;
-        margin-bottom: 1rem;
+      .greeting {
+        color: #666;
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
       }
       button {
         padding: 0.75rem 1.5rem;
@@ -233,22 +170,6 @@
     </style>
   </head>
   <body>
-    <div class="burger-menu" id="burgerMenu">
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-
-    <div class="menu-backdrop" id="menuBackdrop"></div>
-
-    <div class="menu-overlay" id="menuOverlay">
-      <div class="menu-item" id="menuAddChild">👶 Add Child</div>
-      <div class="menu-item" id="menuFeedings">🍼 Feedings</div>
-      <div class="menu-item" id="menuDiapers">🧷 Diapers</div>
-      <div class="menu-item" id="menuSleep">😴 Sleep</div>
-      <div class="menu-item logout" id="menuLogout">🚪 Logout</div>
-    </div>
-
     <div class="container">
       <div id="content" class="loading">
         <p>Loading...</p>
@@ -314,49 +235,11 @@
       </div>
     </div>
 
+    <script src="/menu.js"></script>
     <script>
       const token = localStorage.getItem("access_token");
       const username = localStorage.getItem("username");
 
-      // Burger menu functionality
-      const burgerMenu = document.getElementById("burgerMenu");
-      const menuOverlay = document.getElementById("menuOverlay");
-      const menuBackdrop = document.getElementById("menuBackdrop");
-
-      function toggleMenu() {
-        menuOverlay.classList.toggle("open");
-        menuBackdrop.classList.toggle("open");
-      }
-
-      function closeMenu() {
-        menuOverlay.classList.remove("open");
-        menuBackdrop.classList.remove("open");
-      }
-
-      burgerMenu.addEventListener("click", toggleMenu);
-      menuBackdrop.addEventListener("click", closeMenu);
-
-      document.getElementById("menuAddChild").addEventListener("click", () => {
-        window.location.href = "/add-child.html";
-      });
-
-      document.getElementById("menuFeedings").addEventListener("click", () => {
-        window.location.href = "/feedings.html";
-      });
-
-      document.getElementById("menuDiapers").addEventListener("click", () => {
-        window.location.href = "/diapers.html";
-      });
-
-      document.getElementById("menuSleep").addEventListener("click", () => {
-        window.location.href = "/sleep.html";
-      });
-
-      document.getElementById("menuLogout").addEventListener("click", () => {
-        closeMenu();
-        logout();
-      });
-
       // Check if user is logged in
       if (!token) {
         window.location.href = "/login.html";
@@ -379,6 +262,11 @@
             }
           })
           .then((user) => {
+            // Initialize burger menu
+            initBurgerMenu({
+              includeHome: true,
+            });
+
             // Check if user has any children
             return fetch("/api/children", {
               headers: {
@@ -387,9 +275,9 @@
             })
               .then((response) => response.json())
               .then((children) => {
-                // If no children, redirect to add-child page
+                // If no children, show welcome message with option to add
                 if (children.length === 0) {
-                  window.location.href = "/add-child.html";
+                  showNoChildrenMessage();
                   return;
                 }
 
@@ -402,6 +290,30 @@
           });
       }
 
+      function showNoChildrenMessage() {
+        const content = document.getElementById("content");
+        content.className = "";
+        content.innerHTML = `
+          <h1>👶 Welcome to Baby Monitor</h1>
+          <div style="text-align: center; padding: 40px 20px;">
+            <div style="font-size: 64px; margin-bottom: 20px;">🍼</div>
+            <h2 style="color: #333; margin-bottom: 15px;">No Children Added Yet</h2>
+            <p style="color: #666; margin-bottom: 30px; line-height: 1.6;">
+              You can add a child to start tracking or redeem a child share code<br>
+              from another user to access their child's information.
+            </p>
+            <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
+              <a href="/add-child.html" class="button" style="text-decoration: none; display: inline-block;">
+                ➕ Add Your Child
+              </a>
+              <a href="/settings.html" class="button secondary" style="text-decoration: none; display: inline-block;">
+                🔗 Redeem Share Code
+              </a>
+            </div>
+          </div>
+        `;
+      }
+
       let activeFeeding = null;
       let userChildren = [];
       let lastFeeding = null;
@@ -529,7 +441,7 @@
         const feedingButtonHtml = activeFeeding
           ? `
             <button class="feeding-button active" onclick="stopFeeding()">
-              🛑 Stop Feeding
+              🛑 Stopped Feeding
               <div class="feeding-info">
                 ${activeFeeding.child_name || "Child"} - ${formatFeedingType(activeFeeding.feeding_type)}<br>
                 Started <span id="feedingTimeInfo">${formatTime(activeFeeding.start_time)}</span>
@@ -538,14 +450,14 @@
           `
           : `
             <button class="feeding-button" onclick="showStartFeedingModal()">
-              ▶️ Start Feeding
+              🍼 Started Feeding
             </button>
           `;
 
         const sleepButtonHtml = activeSleep
           ? `
             <button class="sleep-button active" onclick="stopSleep()">
-              🛑 Stop Sleep
+              🛑 Stopped Sleeping
               <div class="sleep-info">
                 ${activeSleep.child_name || "Child"}<br>
                 Started <span id="sleepTimeInfo">${formatTime(activeSleep.start_time)}</span>
@@ -554,20 +466,18 @@
           `
           : `
             <button class="sleep-button" onclick="showStartSleepModal()">
-              😴 Start Sleep
+              😴 Started Sleeping
             </button>
           `;
 
         document.getElementById("content").innerHTML = `
-          <h1>Welcome to Baby Monitor!</h1>
-          <div class="user-info">
-            <p><strong>Logged in as:</strong> ${username}</p>
-          </div>
+          <h1>Hi ${username}</h1>
+          <p class="greeting">Let's keep track of your baby's care.</p>
+          <button class="feeding-button" onclick="window.location.href='/log-diaper.html'" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); margin-bottom: 20px;">
+            🧷 Changed Diaper
+          </button>
           ${feedingButtonHtml}
           ${sleepButtonHtml}
-          <button class="feeding-button" onclick="window.location.href='/log-diaper.html'" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); margin-top: 20px;">
-            🧷 Log Diaper Change
-          </button>
         `;
       }
 

src/baby_monitor/static/menu.css

@@ -0,0 +1,73 @@
+/* Burger Menu Styles */
+.burger-menu {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  cursor: pointer;
+  z-index: 1000;
+  background: white;
+  padding: 0.5rem;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.burger-menu div {
+  width: 25px;
+  height: 3px;
+  background-color: #333;
+  margin: 5px 0;
+  transition: 0.3s;
+}
+
+.menu-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+  z-index: 998;
+}
+
+.menu-backdrop.open {
+  display: block;
+}
+
+.menu-overlay {
+  position: fixed;
+  top: 0;
+  left: -250px;
+  width: 250px;
+  height: 100vh;
+  background: white;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+  transition: left 0.3s;
+  z-index: 999;
+  padding: 4rem 1rem 1rem 1rem;
+}
+
+.menu-overlay.open {
+  left: 0;
+}
+
+.menu-item {
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.menu-item:hover {
+  background: #f5f5f5;
+}
+
+.menu-item.admin {
+  color: #667eea;
+  font-weight: 600;
+}
+
+.menu-item.logout {
+  color: #dc3545;
+  font-weight: 600;
+}

src/baby_monitor/static/menu.js

@@ -0,0 +1,110 @@
+/**
+ * Initializes the burger menu navigation
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.includeHome - Whether to include Home menu item
+ * @param {boolean} options.includeFeedings - Whether to include Feedings menu item
+ * @param {boolean} options.includeDiapers - Whether to include Diapers menu item
+ * @param {boolean} options.includeSleep - Whether to include Sleep menu item
+ * @param {boolean} options.includeSettings - Whether to include Settings menu item
+ */
+function initBurgerMenu(options = {}) {
+  const {
+    includeHome = true,
+    includeFeedings = true,
+    includeDiapers = true,
+    includeSleep = true,
+    includeSettings = true,
+  } = options;
+
+  // Create burger menu HTML
+  const burgerMenuHTML = `
+    <div class="burger-menu" id="burgerMenu">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="menu-backdrop" id="menuBackdrop"></div>
+
+    <div class="menu-overlay" id="menuOverlay">
+      ${includeHome ? '<div class="menu-item" id="menuHome">🏠 Home</div>' : ""}
+      ${includeDiapers ? '<div class="menu-item" id="menuDiapers">🧷 Diapers</div>' : ""}
+      ${includeFeedings ? '<div class="menu-item" id="menuFeedings">🍼 Feedings</div>' : ""}
+      ${includeSleep ? '<div class="menu-item" id="menuSleep">😴 Sleep</div>' : ""}
+      ${includeSettings ? '<div class="menu-item" id="menuSettings">⚙️ Settings</div>' : ""}
+      <div class="menu-item logout" id="menuLogout">🚪 Logout</div>
+    </div>
+  `;
+
+  // Insert menu at the beginning of body
+  document.body.insertAdjacentHTML("afterbegin", burgerMenuHTML);
+
+  // Get elements
+  const burgerMenu = document.getElementById("burgerMenu");
+  const menuOverlay = document.getElementById("menuOverlay");
+  const menuBackdrop = document.getElementById("menuBackdrop");
+
+  // Toggle menu function
+  function toggleMenu() {
+    menuOverlay.classList.toggle("open");
+    menuBackdrop.classList.toggle("open");
+  }
+
+  // Close menu function
+  function closeMenu() {
+    menuOverlay.classList.remove("open");
+    menuBackdrop.classList.remove("open");
+  }
+
+  // Event listeners for menu toggle
+  burgerMenu.addEventListener("click", toggleMenu);
+  menuBackdrop.addEventListener("click", closeMenu);
+
+  // Navigation event listeners
+  if (includeHome) {
+    document.getElementById("menuHome")?.addEventListener("click", () => {
+      window.location.href = "/";
+    });
+  }
+
+  if (includeFeedings) {
+    document.getElementById("menuFeedings")?.addEventListener("click", () => {
+      window.location.href = "/feedings.html";
+    });
+  }
+
+  if (includeDiapers) {
+    document.getElementById("menuDiapers")?.addEventListener("click", () => {
+      window.location.href = "/diapers.html";
+    });
+  }
+
+  if (includeSleep) {
+    document.getElementById("menuSleep")?.addEventListener("click", () => {
+      window.location.href = "/sleep.html";
+    });
+  }
+
+  if (includeSettings) {
+    document.getElementById("menuSettings")?.addEventListener("click", () => {
+      window.location.href = "/settings.html";
+    });
+  }
+
+  document.getElementById("menuLogout").addEventListener("click", () => {
+    closeMenu();
+    // Call the page's logout function if it exists, otherwise use default
+    if (typeof logout === "function") {
+      logout();
+    } else {
+      defaultLogout();
+    }
+  });
+
+  // Default logout function
+  function defaultLogout() {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("username");
+    window.location.href = "/login.html";
+  }
+}

src/baby_monitor/static/settings.html

@@ -0,0 +1,845 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Settings - Baby Monitor</title>
+    <link rel="stylesheet" href="/menu.css" />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background-color: #f0f0f0;
+        min-height: 100vh;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
+      }
+
+      .section {
+        margin-bottom: 40px;
+        padding: 20px;
+        background: #f8f9fa;
+        border-radius: 8px;
+      }
+
+      .section h2 {
+        color: #333;
+        font-size: 20px;
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        color: #333;
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      .form-group input {
+        width: 100%;
+        padding: 12px;
+        border: 2px solid #e0e0e0;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: border-color 0.2s;
+      }
+
+      .form-group input:focus {
+        outline: none;
+        border-color: #667eea;
+      }
+
+      .form-group input:disabled {
+        background-color: #f5f5f5;
+        cursor: not-allowed;
+      }
+
+      .button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 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;
+        text-decoration: none;
+        display: inline-block;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      .button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        transform: none;
+      }
+
+      .button.secondary {
+        background: #6c757d;
+      }
+
+      .button.secondary:hover {
+        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
+      }
+
+      .button.success {
+        background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+      }
+
+      .button.success:hover {
+        box-shadow: 0 4px 12px rgba(86, 171, 47, 0.4);
+      }
+
+      .children-list {
+        display: grid;
+        gap: 15px;
+        margin-top: 20px;
+      }
+
+      .child-card {
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .child-card h3 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 18px;
+      }
+
+      .child-info {
+        color: #666;
+        font-size: 14px;
+        margin-bottom: 15px;
+      }
+
+      .child-info p {
+        margin-bottom: 5px;
+      }
+
+      .child-actions {
+        display: flex;
+        gap: 10px;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 40px;
+        color: #666;
+      }
+
+      .alert {
+        padding: 12px 20px;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        font-size: 14px;
+      }
+
+      .alert-success {
+        background-color: #d4edda;
+        color: #155724;
+        border: 1px solid #c3e6cb;
+      }
+
+      .alert-error {
+        background-color: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f5c6cb;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      .quick-action {
+        display: block;
+        width: 100%;
+        padding: 15px;
+        margin-bottom: 15px;
+        background: white;
+        border: 2px solid #667eea;
+        color: #667eea;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-align: left;
+      }
+
+      .quick-action:hover {
+        background: #667eea;
+        color: white;
+        transform: translateX(5px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>⚙️ Settings</h1>
+      <p class="subtitle">Manage your account and children</p>
+
+      <div id="alert" class="hidden"></div>
+
+      <div class="section">
+        <h2>👤 Account Information</h2>
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input type="text" id="username" disabled />
+        </div>
+      </div>
+
+      <div class="section">
+        <h2>🔑 Change Password</h2>
+        <form id="userForm">
+          <div class="form-group">
+            <label for="currentPassword">Current Password</label>
+            <input type="password" id="currentPassword" />
+          </div>
+          <div class="form-group">
+            <label for="newPassword">New Password</label>
+            <input type="password" id="newPassword" />
+          </div>
+          <div class="form-group">
+            <label for="confirmPassword">Confirm New Password</label>
+            <input type="password" id="confirmPassword" />
+          </div>
+          <button type="submit" class="button" id="saveUserBtn">
+            💾 Save Changes
+          </button>
+        </form>
+
+        <div
+          style="
+            margin-top: 40px;
+            padding-top: 30px;
+            border-top: 2px solid #dc3545;
+          "
+        >
+          <h3 style="color: #dc3545; margin-bottom: 15px">⚠️ Danger Zone</h3>
+          <p style="color: #666; margin-bottom: 15px; font-size: 14px">
+            Deleting your account is permanent and cannot be undone. This will:
+          </p>
+          <ul
+            style="
+              color: #666;
+              margin-bottom: 20px;
+              margin-left: 20px;
+              font-size: 14px;
+            "
+          >
+            <li>Delete your account permanently</li>
+            <li>Delete all children that have no other parents</li>
+            <li>
+              Delete all logs (feedings, diaper changes, sleep) for orphaned
+              children
+            </li>
+            <li>
+              Remove you as a parent from shared children (they will remain for
+              other parents)
+            </li>
+          </ul>
+          <button
+            class="button"
+            style="
+              background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+            "
+            onclick="confirmDeleteAccount()"
+          >
+            🗑️ Delete Account
+          </button>
+        </div>
+      </div>
+
+      <div class="section">
+        <h2>👶 Your Children</h2>
+
+        <button
+          class="quick-action"
+          onclick="window.location.href='/add-child.html'"
+        >
+          ➕ Add New Child
+        </button>
+
+        <button
+          class="quick-action"
+          onclick="showRedeemCodeModal()"
+          style="border-color: #56ab2f; color: #56ab2f"
+        >
+          🔗 Redeem Share Code
+        </button>
+
+        <div id="childrenContent" class="loading">
+          <p>Loading children...</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Redeem Code Modal -->
+    <div
+      class="modal"
+      id="redeemCodeModal"
+      style="
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        justify-content: center;
+        align-items: center;
+      "
+    >
+      <div
+        style="
+          background: white;
+          padding: 30px;
+          border-radius: 12px;
+          max-width: 400px;
+          width: 90%;
+        "
+      >
+        <h2 style="margin-top: 0">🔗 Redeem Share Code</h2>
+        <p style="color: #666; margin-bottom: 20px">
+          Enter the share code to get access to a child.
+        </p>
+        <form id="redeemCodeForm">
+          <div class="form-group">
+            <label for="shareCode">Share Code</label>
+            <input
+              type="text"
+              id="shareCode"
+              placeholder="Enter code"
+              required
+              style="
+                width: 100%;
+                padding: 12px;
+                border: 2px solid #e0e0e0;
+                border-radius: 6px;
+                font-size: 14px;
+              "
+            />
+          </div>
+          <div style="display: flex; gap: 10px; margin-top: 20px">
+            <button
+              type="button"
+              class="button secondary"
+              onclick="closeRedeemCodeModal()"
+              style="flex: 1"
+            >
+              Cancel
+            </button>
+            <button type="submit" class="button success" style="flex: 1">
+              Redeem
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Share Code Modal -->
+    <div
+      class="modal"
+      id="shareCodeModal"
+      style="
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        justify-content: center;
+        align-items: center;
+      "
+    >
+      <div
+        style="
+          background: white;
+          padding: 30px;
+          border-radius: 12px;
+          max-width: 400px;
+          width: 90%;
+        "
+      >
+        <h2 style="margin-top: 0">🔗 Share Code</h2>
+        <p style="color: #666; margin-bottom: 20px" id="shareCodeChildName"></p>
+        <div
+          style="
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+          "
+        >
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            "
+          >
+            <span
+              style="
+                font-size: 24px;
+                font-weight: bold;
+                color: #333;
+                letter-spacing: 2px;
+              "
+              id="shareCodeValue"
+            ></span>
+            <button
+              onclick="copyShareCode()"
+              style="
+                background: #667eea;
+                color: white;
+                border: none;
+                padding: 10px 15px;
+                border-radius: 6px;
+                cursor: pointer;
+                font-size: 14px;
+              "
+            >
+              📋 Copy
+            </button>
+          </div>
+        </div>
+        <p style="color: #666; font-size: 14px; margin-bottom: 20px">
+          Share this code with another user. They can use it in Settings >
+          Redeem Share Code to get access to this child.
+          <br /><br />
+          This code expires in 7 days.
+        </p>
+        <button
+          type="button"
+          class="button"
+          onclick="closeShareCodeModal()"
+          style="width: 100%"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+
+    <script src="/menu.js"></script>
+    <script>
+      const token = localStorage.getItem("access_token");
+      if (!token) {
+        window.location.href = "/login.html";
+      }
+
+      // Initialize burger menu
+      initBurgerMenu({ includeHome: true });
+
+      let currentUser = null;
+      let children = [];
+
+      // Load user data and children
+      async function loadData() {
+        try {
+          // Fetch user info
+          const userResponse = await fetch("/api/me", {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (userResponse.ok) {
+            currentUser = await userResponse.json();
+            document.getElementById("username").value = currentUser.username;
+          } else {
+            window.location.href = "/login.html";
+            return;
+          }
+
+          // Fetch children
+          const childrenResponse = await fetch("/api/children", {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (childrenResponse.ok) {
+            children = await childrenResponse.json();
+            displayChildren();
+          } else {
+            showAlert("Failed to load children", "error");
+          }
+        } catch (error) {
+          console.error("Error loading data:", error);
+          showAlert("Network error. Please try again.", "error");
+        }
+      }
+
+      function displayChildren() {
+        const container = document.getElementById("childrenContent");
+
+        if (children.length === 0) {
+          container.innerHTML = `
+            <p style="color: #666; text-align: center; padding: 20px;">
+              No children added yet. Click "Add New Child" to get started.
+            </p>
+          `;
+          return;
+        }
+
+        container.innerHTML = `
+          <div class="children-list">
+            ${children
+              .map(
+                (child) => `
+              <div class="child-card">
+                <h3>👶 ${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>
+                </div>
+                <div class="child-actions">
+                  <button class="button secondary" onclick="editChild(${child.id})">
+                    ✏️ Edit
+                  </button>
+                  <button class="button success" onclick="shareChild(${child.id})">
+                    🔗 Share
+                  </button>
+                </div>
+              </div>
+            `,
+              )
+              .join("")}
+          </div>
+        `;
+      }
+
+      function formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        });
+      }
+
+      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) {
+          alert(`Edit functionality for ${child.name} coming soon!`);
+        }
+      }
+
+      async function shareChild(childId) {
+        const child = children.find((c) => c.id === childId);
+        if (!child) return;
+
+        try {
+          const response = await fetch("/api/children/invitations", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify({
+              child_id: childId,
+            }),
+          });
+
+          if (!response.ok) {
+            throw new Error("Failed to create invitation");
+          }
+
+          const invitation = await response.json();
+
+          // Show the share code modal
+          document.getElementById("shareCodeChildName").textContent =
+            `Share code for ${child.name}`;
+          document.getElementById("shareCodeValue").textContent =
+            invitation.code;
+          window.currentShareCode = invitation.code; // Store for copy function
+          document.getElementById("shareCodeModal").style.display = "flex";
+        } catch (error) {
+          console.error("Error creating share code:", error);
+          showAlert("Failed to create share code. Please try again.", "error");
+        }
+      }
+
+      function closeShareCodeModal() {
+        document.getElementById("shareCodeModal").style.display = "none";
+        window.currentShareCode = null;
+      }
+
+      function copyShareCode() {
+        const code = window.currentShareCode;
+        if (!code) return;
+
+        if (navigator.clipboard) {
+          navigator.clipboard
+            .writeText(code)
+            .then(() => {
+              showAlert("Share code copied to clipboard!", "success");
+            })
+            .catch((err) => {
+              console.error("Failed to copy to clipboard:", err);
+              showAlert(
+                "Failed to copy. Please copy the code manually.",
+                "error",
+              );
+            });
+        } else {
+          // Fallback for older browsers
+          const textArea = document.createElement("textarea");
+          textArea.value = code;
+          textArea.style.position = "fixed";
+          textArea.style.left = "-999999px";
+          document.body.appendChild(textArea);
+          textArea.select();
+          try {
+            document.execCommand("copy");
+            showAlert("Share code copied to clipboard!", "success");
+          } catch (err) {
+            showAlert(
+              "Failed to copy. Please copy the code manually.",
+              "error",
+            );
+          }
+          document.body.removeChild(textArea);
+        }
+      }
+
+      function showRedeemCodeModal() {
+        document.getElementById("redeemCodeModal").style.display = "flex";
+      }
+
+      function closeRedeemCodeModal() {
+        document.getElementById("redeemCodeModal").style.display = "none";
+        document.getElementById("redeemCodeForm").reset();
+      }
+
+      document
+        .getElementById("redeemCodeForm")
+        .addEventListener("submit", async (e) => {
+          e.preventDefault();
+
+          const code = document.getElementById("shareCode").value.trim();
+
+          try {
+            const response = await fetch("/api/children/invitations/redeem", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${token}`,
+              },
+              body: JSON.stringify({ code }),
+            });
+
+            if (!response.ok) {
+              const error = await response.json();
+              // Show the specific error message from the backend in a popup
+              alert(error.detail || "Failed to redeem code");
+              return;
+            }
+
+            const result = await response.json();
+            alert(result.message);
+            closeRedeemCodeModal();
+
+            // Reload children list
+            await loadData();
+          } catch (error) {
+            console.error("Error redeeming code:", error);
+            // Display the actual error message in a popup
+            alert(error.message);
+          }
+        });
+
+      async function confirmDeleteAccount() {
+        const confirmed = confirm(
+          "⚠️ WARNING: This action cannot be undone!\n\n" +
+            "Are you absolutely sure you want to delete your account?\n\n" +
+            "This will:\n" +
+            "• Delete your account permanently\n" +
+            "• Delete all children that have no other parents\n" +
+            "• Delete ALL logs for orphaned children\n" +
+            "• Remove you as a parent from shared children\n\n" +
+            'Type "DELETE" in the next prompt to confirm.',
+        );
+
+        if (!confirmed) {
+          return;
+        }
+
+        const confirmText = prompt("Type DELETE to confirm account deletion:");
+        if (confirmText !== "DELETE") {
+          showAlert(
+            "Account deletion cancelled. You must type DELETE exactly.",
+            "info",
+          );
+          return;
+        }
+
+        try {
+          const response = await fetch("/api/account", {
+            method: "DELETE",
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          });
+
+          if (!response.ok) {
+            throw new Error("Failed to delete account");
+          }
+
+          const result = await response.json();
+
+          // Show deletion summary
+          let message = "✅ Account deleted successfully!\n\n";
+          if (result.deleted_children && result.deleted_children.length > 0) {
+            message += `Deleted children: ${result.deleted_children.join(", ")}\n`;
+          }
+          if (result.deleted_logs) {
+            message += `\nDeleted logs:\n`;
+            message += `• Feedings: ${result.deleted_logs.feedings}\n`;
+            message += `• Diaper Changes: ${result.deleted_logs.diaper_changes}\n`;
+            message += `• Sleep Sessions: ${result.deleted_logs.sleep_sessions}`;
+          }
+
+          alert(message);
+
+          // Logout and redirect
+          localStorage.removeItem("token");
+          window.location.href = "/login.html";
+        } catch (error) {
+          console.error("Error deleting account:", error);
+          showAlert("Failed to delete account. Please try again.", "error");
+        }
+      }
+
+      function showAlert(message, type) {
+        const alert = document.getElementById("alert");
+        alert.className = `alert alert-${type}`;
+        alert.textContent = message;
+        alert.classList.remove("hidden");
+
+        setTimeout(() => {
+          alert.classList.add("hidden");
+        }, 5000);
+      }
+
+      // Handle user form submission
+      document
+        .getElementById("userForm")
+        .addEventListener("submit", async (e) => {
+          e.preventDefault();
+
+          const currentPassword =
+            document.getElementById("currentPassword").value;
+          const newPassword = document.getElementById("newPassword").value;
+          const confirmPassword =
+            document.getElementById("confirmPassword").value;
+
+          // Validate passwords
+          if (newPassword && newPassword !== confirmPassword) {
+            alert("New passwords do not match");
+            return;
+          }
+
+          if (newPassword && !currentPassword) {
+            alert("Current password is required to change password");
+            return;
+          }
+
+          // If no password change requested, just show success
+          if (!newPassword) {
+            alert("No changes to save");
+            return;
+          }
+
+          const saveBtn = document.getElementById("saveUserBtn");
+          saveBtn.disabled = true;
+          saveBtn.textContent = "Saving...";
+
+          try {
+            const response = await fetch("/api/change-password", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${token}`,
+              },
+              body: JSON.stringify({
+                current_password: currentPassword,
+                new_password: newPassword,
+              }),
+            });
+
+            if (!response.ok) {
+              const error = await response.json();
+              throw new Error(error.detail || "Failed to change password");
+            }
+
+            const result = await response.json();
+            alert(result.message);
+
+            // Clear form
+            document.getElementById("userForm").reset();
+          } catch (error) {
+            console.error("Error updating password:", error);
+            alert(error.message || "Failed to update password");
+          } finally {
+            saveBtn.disabled = false;
+            saveBtn.textContent = "💾 Save Changes";
+          }
+        });
+
+      // Load data on page load
+      loadData();
+    </script>
+  </body>
+</html>

src/baby_monitor/static/sleep.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sleep - Baby Monitor</title>
+    <link rel="stylesheet" href="/menu.css" />
     <style>
       * {
         margin: 0;
@@ -15,69 +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;
-      }
-
-      .burger-menu {
-        position: fixed;
-        top: 1rem;
-        left: 1rem;
-        cursor: pointer;
-        z-index: 1000;
-        background: white;
-        padding: 0.5rem;
-        border-radius: 4px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      }
-      .burger-menu div {
-        width: 25px;
-        height: 3px;
-        background-color: #333;
-        margin: 5px 0;
-        transition: 0.3s;
-      }
-      .menu-overlay {
-        position: fixed;
-        top: 0;
-        left: -250px;
-        width: 250px;
-        height: 100vh;
-        background: white;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-        transition: left 0.3s;
-        z-index: 999;
-        padding: 4rem 1rem 1rem 1rem;
-      }
-      .menu-overlay.open {
-        left: 0;
-      }
-      .menu-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100vh;
-        background: rgba(0, 0, 0, 0.5);
-        display: none;
-        z-index: 998;
-      }
-      .menu-backdrop.open {
-        display: block;
-      }
-      .menu-item {
-        padding: 1rem;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-      .menu-item:hover {
-        background: #f5f5f5;
-      }
-      .menu-item.logout {
-        color: #dc3545;
-        font-weight: 600;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
       }
 
       .container {
@@ -85,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 {
@@ -131,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -173,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 {
@@ -290,33 +242,31 @@
         background: #3a9be8;
       }
 
-      .filters {
-        display: flex;
-        gap: 15px;
+      .controls {
         margin-bottom: 30px;
-        flex-wrap: wrap;
-        align-items: center;
-      }
-
-      .filter-group {
         display: flex;
-        flex-direction: column;
-        gap: 5px;
+        align-items: center;
+        gap: 15px;
+        flex-wrap: wrap;
       }
 
-      .filter-group label {
-        color: #666;
-        font-size: 14px;
+      .controls label {
         font-weight: 600;
+        color: #333;
       }
 
-      .filter-group select {
-        padding: 8px 12px;
+      .controls select {
+        padding: 8px 16px;
         border: 1px solid #ddd;
-        border-radius: 4px;
+        border-radius: 6px;
         font-size: 14px;
-        background: white;
         cursor: pointer;
+        background: white;
+      }
+
+      .controls select:focus {
+        outline: none;
+        border-color: #4facfe;
       }
 
       .badge {
@@ -335,45 +285,25 @@
     </style>
   </head>
   <body>
-    <div class="burger-menu" id="burgerMenu">
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-
-    <div class="menu-backdrop" id="menuBackdrop"></div>
-
-    <div class="menu-overlay" id="menuOverlay">
-      <div class="menu-item" id="menuHome">🏠 Home</div>
-      <div class="menu-item" id="menuAddChild">👶 Add Child</div>
-      <div class="menu-item" id="menuFeedings">🍼 Feedings</div>
-      <div class="menu-item" id="menuDiapers">🧷 Diapers</div>
-      <div class="menu-item" id="menuSleep">😴 Sleep</div>
-      <div class="menu-item logout" id="menuLogout">🚪 Logout</div>
-    </div>
-
     <div class="container">
       <h1>😴 Sleep Tracking</h1>
       <p class="subtitle">Monitor your baby's sleep patterns</p>
 
-      <div class="filters">
-        <div class="filter-group">
-          <label for="childFilter">Child</label>
-          <select id="childFilter">
-            <option value="">All Children</option>
-          </select>
-        </div>
-        <div class="filter-group">
-          <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>
-        </div>
+      <div class="controls">
+        <label for="childFilter">Child:</label>
+        <select id="childFilter">
+          <option value="">All Children</option>
+        </select>
+
+        <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>
       </div>
 
       <div id="content" class="loading">
@@ -382,57 +312,18 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+    <script src="/menu.js"></script>
     <script>
       const token = localStorage.getItem("access_token");
 
-      // Burger menu functionality
-      const burgerMenu = document.getElementById("burgerMenu");
-      const menuOverlay = document.getElementById("menuOverlay");
-      const menuBackdrop = document.getElementById("menuBackdrop");
-
-      function toggleMenu() {
-        menuOverlay.classList.toggle("open");
-        menuBackdrop.classList.toggle("open");
-      }
-
-      function closeMenu() {
-        menuOverlay.classList.remove("open");
-        menuBackdrop.classList.remove("open");
-      }
-
-      burgerMenu.addEventListener("click", toggleMenu);
-      menuBackdrop.addEventListener("click", closeMenu);
-
-      document.getElementById("menuHome").addEventListener("click", () => {
-        window.location.href = "/";
-      });
-
-      document.getElementById("menuAddChild").addEventListener("click", () => {
-        window.location.href = "/add-child.html";
-      });
-
-      document.getElementById("menuFeedings").addEventListener("click", () => {
-        window.location.href = "/feedings.html";
-      });
-
-      document.getElementById("menuDiapers").addEventListener("click", () => {
-        window.location.href = "/diapers.html";
-      });
-
-      document.getElementById("menuSleep").addEventListener("click", () => {
-        closeMenu();
-      });
-
-      document.getElementById("menuLogout").addEventListener("click", () => {
-        closeMenu();
-        logout();
-      });
-
       // Check if user is logged in
       if (!token) {
         window.location.href = "/login.html";
       }
 
+      // Initialize burger menu
+      initBurgerMenu({ includeHome: true });
+
       let allSleeps = [];
       let allChildren = [];
       let selectedChildId = "";
@@ -454,6 +345,8 @@
       document
         .getElementById("timeRangeFilter")
         .addEventListener("change", function () {
+          // Save selection to localStorage
+          localStorage.setItem("lastSleepTimeRange", this.value);
           loadData();
         });
 
@@ -489,6 +382,13 @@
             selectedChildId = lastChildId;
           }
 
+          // Restore last selected time range from localStorage
+          const timeRangeFilter = document.getElementById("timeRangeFilter");
+          const lastTimeRange = localStorage.getItem("lastSleepTimeRange");
+          if (lastTimeRange) {
+            timeRangeFilter.value = lastTimeRange;
+          }
+
           // Fetch sleep logs
           const sleepResponse = await fetch("/api/sleep", {
             headers: {
@@ -584,10 +484,6 @@
               <h3>Total Sessions</h3>
               <div class="value">${totalSessions}</div>
             </div>
-            <div class="stat-card">
-              <h3>Ongoing</h3>
-              <div class="value">${ongoingSessions}</div>
-            </div>
             <div class="stat-card">
               <h3>Avg Duration</h3>
               <div class="value">${formatDuration(avgMinutes)}</div>
@@ -599,7 +495,7 @@
           </div>
 
           <div class="chart-container">
-            <h2>Sleep Sessions per Day</h2>
+            <h2>Total Sleep Time (Last ${timeRange} Day${timeRange !== 1 ? "s" : ""})</h2>
             <div class="chart-wrapper">
               <canvas id="barChart"></canvas>
             </div>
@@ -655,41 +551,143 @@
         return `${hours}h ${mins}m`;
       }
 
-      function prepareBarChartData(sleeps, timeRange) {
-        const days = {};
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
+      function prepareBarChartData(sleepSessions, timeRange) {
+        const now = new Date();
+        const labels = [];
+        const durations = []; // Array of arrays, each containing individual session durations
+        const sessionCounts = []; // For reference
 
-        // Initialize all days in range
-        for (let i = timeRange - 1; i >= 0; i--) {
-          const date = new Date(today);
-          date.setDate(date.getDate() - i);
-          const dateStr = date.toISOString().split("T")[0];
-          days[dateStr] = 0;
+        // Only use completed sleep sessions
+        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);
+
+            const periodEnd = new Date(periodStart);
+            periodEnd.setHours(periodEnd.getHours() + 3);
+
+            const startLabel = periodStart.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              hour12: true,
+            });
+            const endLabel = periodEnd.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              hour12: true,
+            });
+            labels.push(`${startLabel}-${endLabel}`);
+
+            // Get individual session durations for this 3-hour period (in hours)
+            const periodSessions = completedSessions.filter((session) => {
+              const startDate = new Date(session.start_time);
+              return startDate >= periodStart && startDate < periodEnd;
+            });
+
+            const sessionDurations = periodSessions.map(
+              (session) =>
+                calculateDuration(session.start_time, session.end_time) / 60,
+            );
+
+            durations.push(sessionDurations);
+            sessionCounts.push(periodSessions.length);
+          }
+        } else if (timeRange === 3) {
+          // 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);
+
+            const periodEnd = new Date(periodStart);
+            periodEnd.setHours(periodEnd.getHours() + 8);
+
+            // Format label based on the 8-hour period
+            const dayStr = periodStart.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            });
+            const startHour = periodStart.getHours();
+            let periodLabel;
+            if (startHour >= 0 && startHour < 8) {
+              periodLabel = `${dayStr} Night`;
+            } else if (startHour >= 8 && startHour < 16) {
+              periodLabel = `${dayStr} Morning`;
+            } else {
+              periodLabel = `${dayStr} Evening`;
+            }
+            labels.push(periodLabel);
+
+            // Get individual session durations for this 8-hour period (in hours)
+            const periodSessions = completedSessions.filter((session) => {
+              const startDate = new Date(session.start_time);
+              return startDate >= periodStart && startDate < periodEnd;
+            });
+
+            const sessionDurations = periodSessions.map(
+              (session) =>
+                calculateDuration(session.start_time, session.end_time) / 60,
+            );
+
+            durations.push(sessionDurations);
+            sessionCounts.push(periodSessions.length);
+          }
+        } else {
+          // Create days based on timeRange (including today)
+          for (let i = timeRange - 1; i >= 0; i--) {
+            const date = new Date(now);
+            date.setDate(date.getDate() - i);
+            date.setHours(0, 0, 0, 0);
+
+            const dateStr = date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            });
+            labels.push(dateStr);
+
+            // Get individual session durations for this day (in hours)
+            const nextDay = new Date(date);
+            nextDay.setDate(nextDay.getDate() + 1);
+
+            const daySessions = completedSessions.filter((session) => {
+              const startDate = new Date(session.start_time);
+              return startDate >= date && startDate < nextDay;
+            });
+
+            const sessionDurations = daySessions.map((session) => {
+              const dur =
+                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,
+            );
+
+            durations.push(sessionDurations);
+            sessionCounts.push(daySessions.length);
+          }
         }
 
-        // Count sleeps per day
-        sleeps.forEach((sleep) => {
-          const date = new Date(sleep.start_time);
-          date.setHours(0, 0, 0, 0);
-          const dateStr = date.toISOString().split("T")[0];
-          if (days.hasOwnProperty(dateStr)) {
-            days[dateStr]++;
+        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);
           }
         });
 
-        const labels = Object.keys(days).map((date) => {
-          const d = new Date(date);
-          return d.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-          });
-        });
-
-        return {
-          labels,
-          data: Object.values(days),
-        };
+        return { labels, durations, sessionCounts };
       }
 
       function prepareDurationDistributionData(sleeps) {
@@ -718,30 +716,151 @@
         };
       }
 
+      let barChartInstance = null;
+      let durationChartInstance = null;
+      let avgDurationChartInstance = null;
+
       function renderBarChart(chartData) {
         const ctx = document.getElementById("barChart");
-        new Chart(ctx, {
+
+        // Destroy existing chart if it exists
+        if (barChartInstance) {
+          barChartInstance.destroy();
+        }
+
+        // Debug: Log the data
+        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,
+        );
+
+        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: [
+                {
+                  label: "No Data",
+                  data: new Array(chartData.labels.length).fill(0),
+                  backgroundColor: "rgba(79, 172, 254, 0.3)",
+                },
+              ],
+            },
+            options: {
+              responsive: true,
+              maintainAspectRatio: false,
+              scales: {
+                y: {
+                  beginAtZero: true,
+                  max: 10,
+                  title: {
+                    display: true,
+                    text: "Hours",
+                  },
+                },
+              },
+              plugins: {
+                legend: {
+                  display: false,
+                },
+              },
+            },
+          });
+          return;
+        }
+
+        // Create color palette for different sessions
+        const colors = [
+          "rgba(79, 172, 254, 0.8)",
+          "rgba(0, 242, 254, 0.8)",
+          "rgba(58, 155, 232, 0.8)",
+          "rgba(32, 137, 220, 0.8)",
+          "rgba(21, 119, 208, 0.8)",
+          "rgba(11, 101, 196, 0.8)",
+          "rgba(79, 172, 254, 0.6)",
+          "rgba(0, 242, 254, 0.6)",
+          "rgba(58, 155, 232, 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) => 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"),
+            borderWidth: 1,
+          });
+        }
+
+        console.log("Datasets:", datasets);
+
+        // Determine the maximum total duration across all periods (in hours)
+        const maxDuration = Math.max(
+          ...chartData.durations.map((periodDurations) =>
+            periodDurations.reduce((sum, val) => sum + val, 0),
+          ),
+          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) => ({
+              ...dataset,
+              data: dataset.data.map((hours) => hours * 60), // Convert hours to minutes
+            }))
+          : datasets;
+
+        barChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
             labels: chartData.labels,
-            datasets: [
-              {
-                label: "Sleep Sessions",
-                data: chartData.data,
-                backgroundColor: "rgba(79, 172, 254, 0.6)",
-                borderColor: "rgba(79, 172, 254, 1)",
-                borderWidth: 1,
-              },
-            ],
+            datasets: finalDatasets,
           },
           options: {
             responsive: true,
             maintainAspectRatio: false,
             scales: {
+              x: {
+                stacked: true,
+              },
               y: {
+                stacked: true,
                 beginAtZero: true,
+                title: {
+                  display: true,
+                  text: useMinutes ? "Minutes" : "Hours",
+                },
                 ticks: {
-                  stepSize: 1,
+                  callback: function (value) {
+                    if (useMinutes) {
+                      return Math.round(value) + "m";
+                    } else {
+                      return value.toFixed(1) + "h";
+                    }
+                  },
                 },
               },
             },
@@ -749,6 +868,35 @@
               legend: {
                 display: false,
               },
+              tooltip: {
+                callbacks: {
+                  label: function (context) {
+                    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) {
+                      return `${context.dataset.label}: ${minutes}m`;
+                    }
+                    return `${context.dataset.label}: ${hours}h ${minutes}m`;
+                  },
+                  footer: function (tooltipItems) {
+                    const periodIndex = tooltipItems[0].dataIndex;
+                    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: ${hours}h ${minutes}m (${sessionCount} session${sessionCount !== 1 ? "s" : ""})`;
+                  },
+                },
+              },
             },
           },
         });
@@ -756,7 +904,13 @@
 
       function renderDurationChart(chartData) {
         const ctx = document.getElementById("durationChart");
-        new Chart(ctx, {
+
+        // Destroy existing chart if it exists
+        if (durationChartInstance) {
+          durationChartInstance.destroy();
+        }
+
+        durationChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,
@@ -787,6 +941,11 @@
       }
 
       function renderAvgDurationChart(sleeps, timeRange) {
+        // Destroy existing chart if it exists
+        if (avgDurationChartInstance) {
+          avgDurationChartInstance.destroy();
+        }
+
         const days = {};
         const today = new Date();
         today.setHours(0, 0, 0, 0);
@@ -829,7 +988,7 @@
         );
 
         const ctx = document.getElementById("avgDurationChart");
-        new Chart(ctx, {
+        avgDurationChartInstance = new Chart(ctx, {
           type: "line",
           data: {
             labels,

src/baby_monitor/utils/__init__.py

@@ -0,0 +1,11 @@
+"""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
+
+__all__ = [
+    "verify_child_access",
+    "hash_password",
+    "verify_password",
+]

src/baby_monitor/utils/hash_password.py

@@ -0,0 +1,17 @@
+"""Definition of hash_password function."""
+
+import bcrypt
+
+
+def hash_password(password: str) -> str:
+    """Hash a password using bcrypt.
+
+    Args:
+        password: Plain text password to hash
+
+    Returns:
+        Hashed password as a string
+    """
+    salt = bcrypt.gensalt()
+    hashed: bytes = bcrypt.hashpw(password.encode("utf-8"), salt)
+    return hashed.decode("utf-8")

src/baby_monitor/utils/verify_child_access.py

@@ -0,0 +1,28 @@
+"""Definition of verify_child_access function."""
+
+from fastapi import HTTPException
+from baby_monitor.repositories.interfaces import (
+    ChildRepositoryInterface,
+)
+
+
+def verify_child_access(
+    child_repo: ChildRepositoryInterface, child_id: int, user_id: int
+) -> None:
+    """Verify that user has access to the child.
+
+    Args:
+        child_repo: Child repository instance
+        child_id: ID of the child to verify access for
+        user_id: ID of the user requesting access
+
+    Raises:
+        HTTPException: 404 if child not found, 403 if user is not a parent
+    """
+    child = child_repo.get_by_id(child_id)
+    if not child:
+        raise HTTPException(status_code=404, detail="Child not found")
+
+    parent_ids = child_repo.get_parent_ids(child_id)
+    if user_id not in parent_ids:
+        raise HTTPException(status_code=403, detail="Access denied to this child")

src/baby_monitor/utils/verify_password.py

@@ -1,22 +1,8 @@
-"""Password hashing utilities using bcrypt."""
+"""Definition of verify_password function."""
 
 import bcrypt
 
 
-def hash_password(password: str) -> str:
-    """Hash a password using bcrypt.
-
-    Args:
-        password: Plain text password to hash
-
-    Returns:
-        Hashed password as a string
-    """
-    salt = bcrypt.gensalt()
-    hashed: bytes = bcrypt.hashpw(password.encode("utf-8"), salt)
-    return hashed.decode("utf-8")
-
-
 def verify_password(password: str, hashed_password: str) -> bool:
     """Verify a password against a hashed password.