Files
maternal-app/maternal-web/app/layout.tsx
Andrei fb92160322 fix: Resolve black pages issue - Add missing auth slice and update checker
Fixed critical issues causing tracking pages to display black:
1. PWA service worker caching old JavaScript chunks
2. Missing auth Redux slice causing undefined errors

## Service Worker Update Checker
- Added /public/check-updates.js script
- Checks for SW updates every 60 seconds
- Auto-reloads page when new SW is activated
- Forces update check on page load
- Prevents future cache staleness issues

## Auth Redux Slice
- Created store/slices/authSlice.ts with User interface
- Added auth reducer to Redux store configuration
- Included auth in persist whitelist
- Provides selectors: selectUser, selectFamilyId, etc.
- Fixes "Cannot read properties of undefined (reading 'user')" error

## Root Cause
Tracking pages reference state.auth.user.familyId but auth slice
didn't exist in Redux store, causing TypeError on all tracking pages.

Build:  PASSED
Files: 3 new, 2 modified

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-05 06:20:51 +00:00

81 lines
3.0 KiB
TypeScript

import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import { ThemeRegistry } from '@/components/ThemeRegistry';
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
import { ReduxProvider } from '@/components/providers/ReduxProvider';
import { ApolloProvider } from '@/components/providers/ApolloProvider';
import { AxeProvider } from '@/components/providers/AxeProvider';
import { SkipNavigation } from '@/components/common/SkipNavigation';
import { VoiceFloatingButton } from '@/components/voice/VoiceFloatingButton';
import { FocusManagementProvider } from '@/components/providers/FocusManagementProvider';
import { BackgroundSyncProvider } from '@/components/providers/BackgroundSyncProvider';
import { InstallPrompt } from '@/components/pwa/InstallPrompt';
import { I18nProvider } from '@/components/providers/I18nProvider';
import { EULACheck } from '@/components/legal/EULACheck';
import { CookieConsent } from '@/components/common/banners/CookieConsent';
// import { PerformanceMonitor } from '@/components/common/PerformanceMonitor'; // Temporarily disabled
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
themeColor: '#FFB6C1',
};
export const metadata: Metadata = {
title: 'Maternal - AI-Powered Child Care Assistant',
description: 'Track, analyze, and get AI-powered insights for your child\'s development, sleep, feeding, and more.',
manifest: '/manifest.json',
appleWebApp: {
capable: true,
statusBarStyle: 'default',
title: 'Maternal',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFB6C1" />
<link rel="apple-touch-icon" href="/icon-192x192.png" />
<script src="/check-updates.js" defer></script>
</head>
<body className={inter.className}>
<AxeProvider>
<I18nProvider>
<ErrorBoundary>
<ReduxProvider>
<ApolloProvider>
<BackgroundSyncProvider>
<ThemeRegistry>
<FocusManagementProvider>
<SkipNavigation />
{/* <PerformanceMonitor /> */}
<EULACheck />
<main id="main-content" tabIndex={-1}>
{children}
</main>
<VoiceFloatingButton />
<InstallPrompt />
<CookieConsent />
</FocusManagementProvider>
</ThemeRegistry>
</BackgroundSyncProvider>
</ApolloProvider>
</ReduxProvider>
</ErrorBoundary>
</I18nProvider>
</AxeProvider>
</body>
</html>
);
}