Add comprehensive .gitignore

maternal-web/lib/accessibility/axe.ts

@@ -0,0 +1,33 @@
+// Accessibility testing with axe-core
+// Only runs in development mode
+
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  import('@axe-core/react').then((axe) => {
+    const React = require('react');
+    const ReactDOM = require('react-dom');
+
+    axe.default(React, ReactDOM, 1000, {
+      // Configure axe rules
+      rules: [
+        {
+          id: 'color-contrast',
+          enabled: true,
+        },
+        {
+          id: 'label',
+          enabled: true,
+        },
+        {
+          id: 'button-name',
+          enabled: true,
+        },
+        {
+          id: 'link-name',
+          enabled: true,
+        },
+      ],
+    });
+  });
+}
+
+export {}

maternal-web/lib/api/__tests__/tracking.test.ts

@@ -0,0 +1,104 @@
+import { trackingApi } from '../tracking'
+import apiClient from '../client'
+
+jest.mock('../client')
+
+const mockedApiClient = apiClient as jest.Mocked<typeof apiClient>
+
+describe('trackingApi', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('createActivity', () => {
+    it('transforms frontend data to backend format', async () => {
+      const mockActivity = {
+        id: 'act_123',
+        childId: 'chd_456',
+        type: 'feeding',
+        startedAt: '2024-01-01T12:00:00Z',
+        metadata: { amount: 120, type: 'bottle' },
+        loggedBy: 'usr_789',
+        createdAt: '2024-01-01T12:00:00Z',
+      }
+
+      mockedApiClient.post.mockResolvedValue({
+        data: { data: { activity: mockActivity } },
+      } as any)
+
+      const result = await trackingApi.createActivity('chd_456', {
+        type: 'feeding',
+        timestamp: '2024-01-01T12:00:00Z',
+        data: { amount: 120, type: 'bottle' },
+      })
+
+      expect(mockedApiClient.post).toHaveBeenCalledWith(
+        '/api/v1/activities?childId=chd_456',
+        {
+          type: 'feeding',
+          startedAt: '2024-01-01T12:00:00Z',
+          metadata: { amount: 120, type: 'bottle' },
+          notes: undefined,
+        }
+      )
+
+      expect(result).toEqual({
+        ...mockActivity,
+        timestamp: mockActivity.startedAt,
+        data: mockActivity.metadata,
+      })
+    })
+  })
+
+  describe('getActivities', () => {
+    it('transforms backend data to frontend format', async () => {
+      const mockActivities = [
+        {
+          id: 'act_123',
+          childId: 'chd_456',
+          type: 'feeding',
+          startedAt: '2024-01-01T12:00:00Z',
+          metadata: { amount: 120 },
+        },
+        {
+          id: 'act_124',
+          childId: 'chd_456',
+          type: 'sleep',
+          startedAt: '2024-01-01T14:00:00Z',
+          metadata: { duration: 120 },
+        },
+      ]
+
+      mockedApiClient.get.mockResolvedValue({
+        data: { data: { activities: mockActivities } },
+      } as any)
+
+      const result = await trackingApi.getActivities('chd_456', 'feeding')
+
+      expect(mockedApiClient.get).toHaveBeenCalledWith('/api/v1/activities', {
+        params: { childId: 'chd_456', type: 'feeding' },
+      })
+
+      expect(result).toEqual([
+        {
+          id: 'act_123',
+          childId: 'chd_456',
+          type: 'feeding',
+          startedAt: '2024-01-01T12:00:00Z',
+          metadata: { amount: 120 },
+          timestamp: '2024-01-01T12:00:00Z',
+          data: { amount: 120 },
+        },
+        {
+          id: 'act_124',
+          childId: 'chd_456',
+          type: 'sleep',
+          startedAt: '2024-01-01T14:00:00Z',
+          metadata: { duration: 120 },
+          timestamp: '2024-01-01T14:00:00Z',
+          data: { duration: 120 },
+        },
+      ])
+    })
+  })
+})

maternal-web/lib/api/children.ts

@@ -0,0 +1,60 @@
+import apiClient from './client';
+
+export interface Child {
+  id: string;
+  familyId: string;
+  name: string;
+  birthDate: string;
+  gender: 'male' | 'female' | 'other';
+  photoUrl?: string;
+  medicalInfo?: any;
+  createdAt: string;
+}
+
+export interface CreateChildData {
+  name: string;
+  birthDate: string;
+  gender: 'male' | 'female' | 'other';
+  photoUrl?: string;
+  medicalInfo?: any;
+}
+
+export interface UpdateChildData extends Partial<CreateChildData> {}
+
+export const childrenApi = {
+  // Get all children for the authenticated user
+  getChildren: async (familyId?: string): Promise<Child[]> => {
+    const params = familyId ? { familyId } : {};
+    const response = await apiClient.get('/api/v1/children', { params });
+    return response.data.data.children;
+  },
+
+  // Get a specific child
+  getChild: async (id: string): Promise<Child> => {
+    const response = await apiClient.get(`/api/v1/children/${id}`);
+    return response.data.data.child;
+  },
+
+  // Create a new child
+  createChild: async (familyId: string, data: CreateChildData): Promise<Child> => {
+    const response = await apiClient.post(`/api/v1/children?familyId=${familyId}`, data);
+    return response.data.data.child;
+  },
+
+  // Update a child
+  updateChild: async (id: string, data: UpdateChildData): Promise<Child> => {
+    const response = await apiClient.patch(`/api/v1/children/${id}`, data);
+    return response.data.data.child;
+  },
+
+  // Delete a child
+  deleteChild: async (id: string): Promise<void> => {
+    await apiClient.delete(`/api/v1/children/${id}`);
+  },
+
+  // Get child's age
+  getChildAge: async (id: string): Promise<{ ageInMonths: number; ageInYears: number; remainingMonths: number }> => {
+    const response = await apiClient.get(`/api/v1/children/${id}/age`);
+    return response.data.data;
+  },
+};

maternal-web/lib/api/client.ts

@@ -0,0 +1,101 @@
+import axios from 'axios';
+import { tokenStorage } from '@/lib/utils/tokenStorage';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+
+export const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+// Request interceptor to add auth token
+apiClient.interceptors.request.use(
+  (config) => {
+    const token = tokenStorage.getAccessToken();
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle token refresh
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // Only handle token refresh on client side
+    if (typeof window === 'undefined') {
+      return Promise.reject(error);
+    }
+
+    // If error is 401 and we haven't tried to refresh yet
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      try {
+        const refreshToken = tokenStorage.getRefreshToken();
+        if (!refreshToken) {
+          throw new Error('No refresh token');
+        }
+
+        const response = await axios.post(
+          `${API_BASE_URL}/api/v1/auth/refresh`,
+          { refreshToken },
+          {
+            headers: { 'Content-Type': 'application/json' },
+            withCredentials: true
+          }
+        );
+
+        // Handle different response structures
+        let newAccessToken;
+        let newRefreshToken;
+
+        if (response.data?.data?.tokens?.accessToken) {
+          newAccessToken = response.data.data.tokens.accessToken;
+          newRefreshToken = response.data.data.tokens.refreshToken;
+        } else if (response.data?.tokens?.accessToken) {
+          newAccessToken = response.data.tokens.accessToken;
+          newRefreshToken = response.data.tokens.refreshToken;
+        } else if (response.data?.accessToken) {
+          newAccessToken = response.data.accessToken;
+          newRefreshToken = response.data.refreshToken;
+        } else {
+          throw new Error('Invalid token refresh response');
+        }
+
+        // Update tokens in storage
+        tokenStorage.setAccessToken(newAccessToken);
+        if (newRefreshToken) {
+          tokenStorage.setRefreshToken(newRefreshToken);
+        }
+
+        // Retry original request with new token
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+        return apiClient(originalRequest);
+      } catch (refreshError) {
+        console.error('Token refresh failed:', refreshError);
+        // Refresh failed, clear tokens and redirect to login
+        tokenStorage.clearTokens();
+
+        // Avoid redirect loop - only redirect if not already on login page
+        if (!window.location.pathname.includes('/login')) {
+          window.location.href = '/login';
+        }
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;

maternal-web/lib/api/families.ts

@@ -0,0 +1,69 @@
+import apiClient from './client';
+
+export interface Family {
+  id: string;
+  name: string;
+  shareCode: string;
+  createdBy: string;
+  subscriptionTier: string;
+  members?: FamilyMember[];
+}
+
+export interface FamilyMember {
+  id: string;
+  userId: string;
+  familyId: string;
+  role: 'parent' | 'caregiver' | 'viewer';
+  permissions: any;
+  user?: {
+    id: string;
+    name: string;
+    email: string;
+  };
+}
+
+export interface InviteMemberData {
+  email: string;
+  role: 'parent' | 'caregiver' | 'viewer';
+}
+
+export interface JoinFamilyData {
+  shareCode: string;
+}
+
+export const familiesApi = {
+  // Get a specific family
+  getFamily: async (familyId: string): Promise<Family> => {
+    const response = await apiClient.get(`/api/v1/families/${familyId}`);
+    return response.data.data.family;
+  },
+
+  // Get family members
+  getFamilyMembers: async (familyId: string): Promise<FamilyMember[]> => {
+    const response = await apiClient.get(`/api/v1/families/${familyId}/members`);
+    return response.data.data.members;
+  },
+
+  // Invite a family member
+  inviteMember: async (familyId: string, data: InviteMemberData): Promise<any> => {
+    const response = await apiClient.post(`/api/v1/families/invite?familyId=${familyId}`, data);
+    return response.data.data.invitation;
+  },
+
+  // Join a family using share code
+  joinFamily: async (data: JoinFamilyData): Promise<FamilyMember> => {
+    const response = await apiClient.post('/api/v1/families/join', data);
+    return response.data.data.member;
+  },
+
+  // Update member role
+  updateMemberRole: async (familyId: string, userId: string, role: string): Promise<FamilyMember> => {
+    const response = await apiClient.patch(`/api/v1/families/${familyId}/members/${userId}/role`, { role });
+    return response.data.data.member;
+  },
+
+  // Remove a family member
+  removeMember: async (familyId: string, userId: string): Promise<void> => {
+    await apiClient.delete(`/api/v1/families/${familyId}/members/${userId}`);
+  },
+};

maternal-web/lib/api/tracking.ts

@@ -0,0 +1,105 @@
+import apiClient from './client';
+
+export type ActivityType = 'feeding' | 'sleep' | 'diaper' | 'medication' | 'milestone' | 'note';
+
+export interface Activity {
+  id: string;
+  childId: string;
+  type: ActivityType;
+  timestamp: string;
+  data: any;
+  notes?: string;
+  loggedBy: string;
+  createdAt: string;
+}
+
+export interface CreateActivityData {
+  type: ActivityType;
+  timestamp: string;
+  data: any;
+  notes?: string;
+}
+
+export interface UpdateActivityData extends Partial<CreateActivityData> {}
+
+export interface DailySummary {
+  date: string;
+  feedingCount: number;
+  sleepTotalMinutes: number;
+  diaperCount: number;
+  activities: Activity[];
+}
+
+export const trackingApi = {
+  // Get all activities for a child
+  getActivities: async (
+    childId: string,
+    type?: ActivityType,
+    startDate?: string,
+    endDate?: string
+  ): Promise<Activity[]> => {
+    const params: any = { childId };
+    if (type) params.type = type;
+    if (startDate) params.startDate = startDate;
+    if (endDate) params.endDate = endDate;
+
+    const response = await apiClient.get('/api/v1/activities', { params });
+    // Transform backend response to frontend format
+    const activities = response.data.data.activities.map((activity: any) => ({
+      ...activity,
+      timestamp: activity.startedAt, // Frontend expects timestamp
+      data: activity.metadata,        // Frontend expects data
+    }));
+    return activities;
+  },
+
+  // Get a specific activity
+  getActivity: async (id: string): Promise<Activity> => {
+    const response = await apiClient.get(`/api/v1/activities/${id}`);
+    const activity = response.data.data.activity;
+    // Transform backend response to frontend format
+    return {
+      ...activity,
+      timestamp: activity.startedAt,
+      data: activity.metadata,
+    };
+  },
+
+  // Create a new activity
+  createActivity: async (childId: string, data: CreateActivityData): Promise<Activity> => {
+    // Transform frontend data structure to backend DTO format
+    const payload = {
+      type: data.type,
+      startedAt: data.timestamp, // Backend expects startedAt, not timestamp
+      metadata: data.data,        // Backend expects metadata, not data
+      notes: data.notes,
+    };
+    const response = await apiClient.post(`/api/v1/activities?childId=${childId}`, payload);
+    const activity = response.data.data.activity;
+    // Transform backend response to frontend format
+    return {
+      ...activity,
+      timestamp: activity.startedAt,
+      data: activity.metadata,
+    };
+  },
+
+  // Update an activity
+  updateActivity: async (id: string, data: UpdateActivityData): Promise<Activity> => {
+    const response = await apiClient.patch(`/api/v1/activities/${id}`, data);
+    return response.data.data.activity;
+  },
+
+  // Delete an activity
+  deleteActivity: async (id: string): Promise<void> => {
+    await apiClient.delete(`/api/v1/activities/${id}`);
+  },
+
+  // Get daily summary
+  getDailySummary: async (childId: string, date: string): Promise<DailySummary> => {
+    const response = await apiClient.get('/api/v1/activities/daily-summary', {
+      params: { childId, date },
+    });
+    return response.data.data;
+  },
+};

maternal-web/lib/api/users.ts

@@ -0,0 +1,31 @@
+import apiClient from './client';
+
+export interface UserPreferences {
+  notifications?: boolean;
+  emailUpdates?: boolean;
+  darkMode?: boolean;
+}
+
+export interface UpdateProfileData {
+  name?: string;
+  preferences?: UserPreferences;
+}
+
+export interface UserProfile {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  locale: string;
+  emailVerified: boolean;
+  preferences?: UserPreferences;
+  families?: string[];
+}
+
+export const usersApi = {
+  // Update user profile
+  updateProfile: async (data: UpdateProfileData): Promise<UserProfile> => {
+    const response = await apiClient.patch('/api/v1/auth/profile', data);
+    return response.data.data;
+  },
+};

maternal-web/lib/auth/AuthContext.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+import apiClient from '@/lib/api/client';
+import { tokenStorage } from '@/lib/utils/tokenStorage';
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  families?: Array<{
+    id: string;
+    familyId: string;
+    role: string;
+  }>;
+}
+
+export interface LoginCredentials {
+  email: string;
+  password: string;
+  deviceFingerprint?: string;
+}
+
+export interface RegisterData {
+  email: string;
+  password: string;
+  name: string;
+  role?: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: (credentials: LoginCredentials) => Promise<void>;
+  register: (data: RegisterData) => Promise<void>;
+  logout: () => Promise<void>;
+  refreshUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+
+  const isAuthenticated = !!user;
+
+  // Check authentication status on mount
+  useEffect(() => {
+    // Only run on client side
+    if (typeof window !== 'undefined') {
+      checkAuth();
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const checkAuth = async () => {
+    // Ensure we're on client side
+    if (typeof window === 'undefined') {
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const token = tokenStorage.getAccessToken();
+      if (!token) {
+        setIsLoading(false);
+        return;
+      }
+
+      const response = await apiClient.get('/api/v1/auth/me');
+
+      // Check if response has expected structure
+      if (response.data?.data) {
+        setUser(response.data.data);
+      } else if (response.data?.user) {
+        // Handle alternative response structure
+        setUser(response.data.user);
+      } else {
+        throw new Error('Invalid response structure');
+      }
+    } catch (error: any) {
+      console.error('Auth check failed:', error);
+      // Only clear tokens if it's an actual auth error (401, 403)
+      if (error?.response?.status === 401 || error?.response?.status === 403) {
+        tokenStorage.clearTokens();
+        setUser(null);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const login = async (credentials: LoginCredentials) => {
+    try {
+      const deviceInfo = {
+        deviceId: generateDeviceFingerprint(),
+        platform: 'web',
+        model: navigator.userAgent,
+        osVersion: navigator.platform,
+      };
+
+      const response = await apiClient.post('/api/v1/auth/login', {
+        email: credentials.email,
+        password: credentials.password,
+        deviceInfo,
+      });
+
+      // Backend returns { success, data: { user, tokens } }
+      const { data: responseData } = response.data;
+      const { tokens, user: userData } = responseData;
+
+      tokenStorage.setTokens(tokens.accessToken, tokens.refreshToken);
+      setUser(userData);
+
+      router.push('/');
+    } catch (error: any) {
+      console.error('Login failed:', error);
+      throw new Error(error.response?.data?.message || 'Login failed');
+    }
+  };
+
+  const register = async (data: RegisterData) => {
+    try {
+      const deviceInfo = {
+        deviceId: generateDeviceFingerprint(),
+        platform: 'web',
+        model: navigator.userAgent,
+        osVersion: navigator.platform,
+      };
+
+      const response = await apiClient.post('/api/v1/auth/register', {
+        email: data.email,
+        password: data.password,
+        name: data.name,
+        deviceInfo,
+      });
+
+      // Backend returns { success, data: { user, family, tokens } }
+      const { data: responseData } = response.data;
+      const { tokens, user: userData } = responseData;
+
+      if (!tokens?.accessToken || !tokens?.refreshToken) {
+        throw new Error('Invalid response from server');
+      }
+
+      const { accessToken, refreshToken } = tokens;
+
+      tokenStorage.setTokens(accessToken, refreshToken);
+      setUser(userData);
+
+      // Redirect to onboarding
+      router.push('/onboarding');
+    } catch (error: any) {
+      console.error('Registration failed:', error);
+      throw new Error(error.response?.data?.message || error.message || 'Registration failed');
+    }
+  };
+
+  const logout = async () => {
+    try {
+      await apiClient.post('/api/v1/auth/logout');
+    } catch (error) {
+      console.error('Logout failed:', error);
+    } finally {
+      tokenStorage.clearTokens();
+      setUser(null);
+      router.push('/login');
+    }
+  };
+
+  const refreshUser = async () => {
+    try {
+      const response = await apiClient.get('/api/v1/auth/me');
+      setUser(response.data.data);
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+    }
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isLoading,
+        isAuthenticated,
+        login,
+        register,
+        logout,
+        refreshUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+// Helper function to generate a simple device fingerprint
+function generateDeviceFingerprint(): string {
+  const navigator = window.navigator;
+  const screen = window.screen;
+
+  const data = [
+    navigator.userAgent,
+    navigator.language,
+    screen.colorDepth,
+    screen.width,
+    screen.height,
+    new Date().getTimezoneOffset(),
+  ].join('|');
+
+  // Simple hash function
+  let hash = 0;
+  for (let i = 0; i < data.length; i++) {
+    const char = data.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+
+  return hash.toString(36);
+}

maternal-web/lib/performance/monitoring.ts

@@ -0,0 +1,232 @@
+import { onCLS, onINP, onFCP, onLCP, onTTFB, type Metric } from 'web-vitals';
+
+/**
+ * Performance Monitoring Module
+ *
+ * Tracks Core Web Vitals metrics:
+ * - CLS (Cumulative Layout Shift): Measures visual stability
+ * - INP (Interaction to Next Paint): Measures interactivity (replaces FID in v5)
+ * - FCP (First Contentful Paint): Measures perceived load speed
+ * - LCP (Largest Contentful Paint): Measures loading performance
+ * - TTFB (Time to First Byte): Measures server response time
+ *
+ * Sends metrics to analytics (Google Analytics if available)
+ */
+
+interface PerformanceMetric {
+  name: string;
+  value: number;
+  id: string;
+  delta: number;
+  rating: 'good' | 'needs-improvement' | 'poor';
+}
+
+/**
+ * Send metric to analytics service
+ */
+const sendToAnalytics = (metric: Metric) => {
+  const body: PerformanceMetric = {
+    name: metric.name,
+    value: Math.round(metric.value),
+    id: metric.id,
+    delta: metric.delta,
+    rating: metric.rating,
+  };
+
+  // Send to Google Analytics if available
+  if (typeof window !== 'undefined' && (window as any).gtag) {
+    (window as any).gtag('event', metric.name, {
+      event_category: 'Web Vitals',
+      event_label: metric.id,
+      value: Math.round(metric.value),
+      metric_id: metric.id,
+      metric_value: metric.value,
+      metric_delta: metric.delta,
+      metric_rating: metric.rating,
+      non_interaction: true,
+    });
+  }
+
+  // Log to console in development
+  if (process.env.NODE_ENV === 'development') {
+    console.log('[Performance]', body);
+  }
+
+  // Send to custom analytics endpoint if needed
+  if (process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT) {
+    const analyticsEndpoint = process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT;
+
+    // Use navigator.sendBeacon for reliable analytics even during page unload
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon(
+        analyticsEndpoint,
+        JSON.stringify(body)
+      );
+    } else {
+      // Fallback to fetch
+      fetch(analyticsEndpoint, {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        keepalive: true,
+      }).catch((error) => {
+        console.error('Failed to send analytics:', error);
+      });
+    }
+  }
+};
+
+/**
+ * Initialize performance monitoring
+ * Call this function once when the app loads
+ */
+export const initPerformanceMonitoring = () => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  try {
+    // Track Cumulative Layout Shift (CLS)
+    // Good: < 0.1, Needs Improvement: < 0.25, Poor: >= 0.25
+    onCLS(sendToAnalytics);
+
+    // Track Interaction to Next Paint (INP) - replaces FID in web-vitals v5
+    // Good: < 200ms, Needs Improvement: < 500ms, Poor: >= 500ms
+    onINP(sendToAnalytics);
+
+    // Track First Contentful Paint (FCP)
+    // Good: < 1.8s, Needs Improvement: < 3s, Poor: >= 3s
+    onFCP(sendToAnalytics);
+
+    // Track Largest Contentful Paint (LCP)
+    // Good: < 2.5s, Needs Improvement: < 4s, Poor: >= 4s
+    onLCP(sendToAnalytics);
+
+    // Track Time to First Byte (TTFB)
+    // Good: < 800ms, Needs Improvement: < 1800ms, Poor: >= 1800ms
+    onTTFB(sendToAnalytics);
+
+    console.log('[Performance] Monitoring initialized');
+  } catch (error) {
+    console.error('[Performance] Failed to initialize monitoring:', error);
+  }
+};
+
+/**
+ * Report custom performance metrics
+ */
+export const reportCustomMetric = (name: string, value: number, metadata?: Record<string, any>) => {
+  if (typeof window !== 'undefined' && (window as any).gtag) {
+    (window as any).gtag('event', name, {
+      event_category: 'Custom Metrics',
+      value: Math.round(value),
+      ...metadata,
+    });
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    console.log('[Performance Custom Metric]', { name, value, metadata });
+  }
+};
+
+/**
+ * Measure and report component render time
+ */
+export const measureComponentRender = (componentName: string) => {
+  if (typeof window === 'undefined' || !window.performance) {
+    return () => {};
+  }
+
+  const startMark = `${componentName}-render-start`;
+  const endMark = `${componentName}-render-end`;
+  const measureName = `${componentName}-render`;
+
+  performance.mark(startMark);
+
+  return () => {
+    performance.mark(endMark);
+    performance.measure(measureName, startMark, endMark);
+
+    const measure = performance.getEntriesByName(measureName)[0];
+    if (measure) {
+      reportCustomMetric(`component_render_${componentName}`, measure.duration, {
+        component: componentName,
+      });
+    }
+
+    // Clean up marks and measures
+    performance.clearMarks(startMark);
+    performance.clearMarks(endMark);
+    performance.clearMeasures(measureName);
+  };
+};
+
+/**
+ * Track page load time
+ */
+export const trackPageLoad = (pageName: string) => {
+  if (typeof window === 'undefined' || !window.performance) {
+    return;
+  }
+
+  // Wait for load event
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+      if (navigation) {
+        reportCustomMetric(`page_load_${pageName}`, navigation.loadEventEnd - navigation.fetchStart, {
+          page: pageName,
+          dom_content_loaded: navigation.domContentLoadedEventEnd - navigation.fetchStart,
+          dom_interactive: navigation.domInteractive - navigation.fetchStart,
+        });
+      }
+    }, 0);
+  });
+};
+
+/**
+ * Monitor long tasks (tasks that block the main thread for > 50ms)
+ */
+export const monitorLongTasks = () => {
+  if (typeof window === 'undefined' || !(window as any).PerformanceObserver) {
+    return;
+  }
+
+  try {
+    const observer = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        reportCustomMetric('long_task', entry.duration, {
+          start_time: entry.startTime,
+          duration: entry.duration,
+        });
+      }
+    });
+
+    observer.observe({ entryTypes: ['longtask'] });
+  } catch (error) {
+    console.error('[Performance] Failed to monitor long tasks:', error);
+  }
+};
+
+/**
+ * Track resource loading times
+ */
+export const trackResourceTiming = () => {
+  if (typeof window === 'undefined' || !window.performance) {
+    return;
+  }
+
+  const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
+
+  const slowResources = resources.filter((resource) => resource.duration > 1000);
+
+  slowResources.forEach((resource) => {
+    reportCustomMetric('slow_resource', resource.duration, {
+      url: resource.name,
+      type: resource.initiatorType,
+      size: resource.transferSize,
+    });
+  });
+};

maternal-web/lib/services/trackingService.ts

@@ -0,0 +1,140 @@
+import apiClient from '@/lib/api/client';
+
+export interface FeedingData {
+  childId: string;
+  type: 'breast_left' | 'breast_right' | 'breast_both' | 'bottle' | 'solid';
+  duration?: number;
+  amount?: number;
+  unit?: 'ml' | 'oz';
+  notes?: string;
+  timestamp?: string;
+}
+
+export interface SleepData {
+  childId: string;
+  startTime: string;
+  endTime: string;
+  quality: 'excellent' | 'good' | 'fair' | 'poor';
+  notes?: string;
+}
+
+export interface DiaperData {
+  childId: string;
+  type: 'wet' | 'dirty' | 'both' | 'clean';
+  timestamp: string;
+  rash: boolean;
+  notes?: string;
+}
+
+export interface Activity {
+  id: string;
+  childId: string;
+  type: 'feeding' | 'sleep' | 'diaper';
+  timestamp: string;
+  data: Record<string, any>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface DailySummary {
+  date: string;
+  feedingCount: number;
+  sleepHours: number;
+  diaperCount: number;
+  activities: Activity[];
+}
+
+class TrackingService {
+  async logFeeding(data: FeedingData): Promise<Activity> {
+    const response = await apiClient.post('/api/v1/activities', {
+      childId: data.childId,
+      type: 'feeding',
+      timestamp: data.timestamp || new Date().toISOString(),
+      data: {
+        feedingType: data.type,
+        duration: data.duration,
+        amount: data.amount,
+        unit: data.unit,
+        notes: data.notes,
+      },
+    });
+    return response.data.data;
+  }
+
+  async logSleep(data: SleepData): Promise<Activity> {
+    const response = await apiClient.post('/api/v1/activities', {
+      childId: data.childId,
+      type: 'sleep',
+      timestamp: data.startTime,
+      data: {
+        startTime: data.startTime,
+        endTime: data.endTime,
+        quality: data.quality,
+        duration: this.calculateDuration(data.startTime, data.endTime),
+        notes: data.notes,
+      },
+    });
+    return response.data.data;
+  }
+
+  async logDiaper(data: DiaperData): Promise<Activity> {
+    const response = await apiClient.post('/api/v1/activities', {
+      childId: data.childId,
+      type: 'diaper',
+      timestamp: data.timestamp,
+      data: {
+        diaperType: data.type,
+        rash: data.rash,
+        notes: data.notes,
+      },
+    });
+    return response.data.data;
+  }
+
+  async getActivities(childId: string, filters?: {
+    type?: string;
+    startDate?: string;
+    endDate?: string;
+    limit?: number;
+  }): Promise<Activity[]> {
+    const params = new URLSearchParams({
+      childId,
+      ...filters,
+    } as Record<string, string>);
+
+    const response = await apiClient.get(`/api/v1/activities?${params.toString()}`);
+    return response.data.data;
+  }
+
+  async getActivityById(activityId: string): Promise<Activity> {
+    const response = await apiClient.get(`/api/v1/activities/${activityId}`);
+    return response.data.data;
+  }
+
+  async updateActivity(activityId: string, data: Partial<Activity>): Promise<Activity> {
+    const response = await apiClient.patch(`/api/v1/activities/${activityId}`, data);
+    return response.data.data;
+  }
+
+  async deleteActivity(activityId: string): Promise<void> {
+    await apiClient.delete(`/api/v1/activities/${activityId}`);
+  }
+
+  async getDailySummary(childId: string, date?: string): Promise<DailySummary> {
+    const params = new URLSearchParams({
+      childId,
+      date: date || new Date().toISOString().split('T')[0],
+    });
+
+    const response = await apiClient.get(`/api/v1/activities/daily-summary?${params.toString()}`);
+    return response.data.data;
+  }
+
+  private calculateDuration(startTime: string, endTime: string): number {
+    const start = new Date(startTime);
+    const end = new Date(endTime);
+    return Math.floor((end.getTime() - start.getTime()) / 1000 / 60); // duration in minutes
+  }
+}
+
+export const trackingService = new TrackingService();

maternal-web/lib/utils/tokenStorage.ts

@@ -0,0 +1,93 @@
+/**
+ * Safe token storage utilities that work with both SSR and client-side rendering
+ */
+
+export const tokenStorage = {
+  /**
+   * Get access token from storage
+   */
+  getAccessToken: (): string | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    try {
+      return localStorage.getItem('accessToken');
+    } catch (error) {
+      console.error('Error reading accessToken:', error);
+      return null;
+    }
+  },
+
+  /**
+   * Get refresh token from storage
+   */
+  getRefreshToken: (): string | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    try {
+      return localStorage.getItem('refreshToken');
+    } catch (error) {
+      console.error('Error reading refreshToken:', error);
+      return null;
+    }
+  },
+
+  /**
+   * Set access token in storage
+   */
+  setAccessToken: (token: string): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      localStorage.setItem('accessToken', token);
+    } catch (error) {
+      console.error('Error setting accessToken:', error);
+    }
+  },
+
+  /**
+   * Set refresh token in storage
+   */
+  setRefreshToken: (token: string): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      localStorage.setItem('refreshToken', token);
+    } catch (error) {
+      console.error('Error setting refreshToken:', error);
+    }
+  },
+
+  /**
+   * Set both tokens at once
+   */
+  setTokens: (accessToken: string, refreshToken: string): void => {
+    tokenStorage.setAccessToken(accessToken);
+    tokenStorage.setRefreshToken(refreshToken);
+  },
+
+  /**
+   * Clear all tokens from storage
+   */
+  clearTokens: (): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+    } catch (error) {
+      console.error('Error clearing tokens:', error);
+    }
+  },
+
+  /**
+   * Check if user has valid tokens
+   */
+  hasTokens: (): boolean => {
+    return !!(tokenStorage.getAccessToken() && tokenStorage.getRefreshToken());
+  },
+};