feat: Afficher la couleur des matières dans l'emploi du temps élève et parent

L'admin pouvait attribuer une couleur à chaque matière, mais cette couleur n'était utilisée que dans la vue admin de l'emploi du temps. Les APIs élève et parent ne renvoyaient pas cette information, ce qui donnait un affichage générique (gris/bleu) pour tous les créneaux. L'API renvoie désormais subjectColor dans chaque créneau, et les vues jour/semaine/widget/détails affichent la bordure colorée correspondante. Le marqueur "Prochain cours" conserve sa priorité visuelle via une surcharge CSS variable.
2026-03-09 11:20:50 +01:00
parent bda63bd98c
commit 81e97c4f3b
27 changed files with 188 additions and 70 deletions
--- a/frontend/e2e/child-selector.spec.ts
+++ b/frontend/e2e/child-selector.spec.ts
@@ -147,11 +147,11 @@ test.describe('Child Selector', () => {
 		// Should display the label
 		await expect(childSelector.locator('.child-selector-label')).toHaveText('Enfant :');

-		// Should have 2 child buttons
+		// Should have 3 buttons: "Tous" + 2 children
 		const buttons = childSelector.locator('.child-button');
-		await expect(buttons).toHaveCount(2);
+		await expect(buttons).toHaveCount(3);

-		// First child should be auto-selected
+		// "Tous" button should be selected initially (no child auto-selected)
 		await expect(buttons.first()).toHaveClass(/selected/);
 	});

@@ -162,18 +162,18 @@ test.describe('Child Selector', () => {
 		await expect(childSelector).toBeVisible({ timeout: 10000 });

 		const buttons = childSelector.locator('.child-button');
-		await expect(buttons).toHaveCount(2);
+		await expect(buttons).toHaveCount(3);

-		// First button should be selected initially
-		await expect(buttons.first()).toHaveClass(/selected/);
+		// "Tous" button (index 0) should be selected initially
+		await expect(buttons.nth(0)).toHaveClass(/selected/);
 		await expect(buttons.nth(1)).not.toHaveClass(/selected/);

-		// Click second button
+		// Click first child button (index 1)
 		await buttons.nth(1).click();

-		// Second button should now be selected, first should not
+		// First child should now be selected, "Tous" should not
 		await expect(buttons.nth(1)).toHaveClass(/selected/);
-		await expect(buttons.first()).not.toHaveClass(/selected/);
+		await expect(buttons.nth(0)).not.toHaveClass(/selected/);
 	});

 	test('[P1] parent with single child should see static child name', async ({ browser, page }) => {
--- a/frontend/e2e/parent-schedule.spec.ts
+++ b/frontend/e2e/parent-schedule.spec.ts
@@ -114,6 +114,21 @@ async function loginAsParent(page: import('@playwright/test').Page) {
 	]);
 }

+/**
+ * Multi-child parents land on the summary view (no child auto-selected).
+ * This helper selects the first actual child (skipping the "Tous" button).
+ */
+async function selectFirstChild(page: import('@playwright/test').Page) {
+	const childButtons = page.locator('.child-button');
+	await expect(childButtons.first()).toBeVisible({ timeout: 15000 });
+	const count = await childButtons.count();
+	if (count > 2) {
+		// Multi-child: "Tous" is at index 0, first child at index 1
+		await childButtons.nth(1).click();
+	}
+	// Single child is auto-selected, nothing to do
+}
+
 test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 	test.describe.configure({ mode: 'serial' });

@@ -305,6 +320,7 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 			await expect(
 				page.getByRole('heading', { name: /emploi du temps des enfants/i })
 			).toBeVisible({ timeout: 15000 });
+			await selectFirstChild(page);
 			await navigateToSeededDay(page);

 			// Wait for slots to load
@@ -324,19 +340,29 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 				page.getByRole('heading', { name: /emploi du temps des enfants/i })
 			).toBeVisible({ timeout: 15000 });

-			// If multiple children, buttons should be visible
+			// Multi-child: "Tous" + N children buttons
 			const childButtons = page.locator('.child-button');
 			const count = await childButtons.count();

-			if (count > 1) {
-				// Click second child
+			if (count > 2) {
+				// Select first child (index 1, after "Tous")
 				await childButtons.nth(1).click();
-				await page.waitForTimeout(500);
-
-				// Should update schedule data
 				await navigateToSeededDay(page);
-				const slots = page.locator('[data-testid="schedule-slot"]');
-				await expect(slots.first()).toBeVisible({ timeout: 20000 });
+				await expect(page.locator('[data-testid="schedule-slot"]').first()).toBeVisible({
+					timeout: 20000
+				});
+
+				// Switch to second child (index 2)
+				await childButtons.nth(2).click();
+				await page.waitForTimeout(500);
+				await navigateToSeededDay(page);
+				await expect(page.locator('[data-testid="schedule-slot"]').first()).toBeVisible({
+					timeout: 20000
+				});
+
+				// Switch back to "Tous" summary view
+				await childButtons.nth(0).click();
+				await expect(page.locator('.multi-child-summary')).toBeVisible({ timeout: 10000 });
 			}
 		});
 	});
@@ -351,6 +377,7 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 			await expect(
 				page.getByRole('heading', { name: /emploi du temps des enfants/i })
 			).toBeVisible({ timeout: 15000 });
+			await selectFirstChild(page);

 			const dayButton = page.locator('.view-toggle button', { hasText: 'Jour' });
 			await expect(dayButton).toHaveClass(/active/, { timeout: 5000 });
@@ -362,6 +389,7 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 			await expect(
 				page.getByRole('heading', { name: /emploi du temps des enfants/i })
 			).toBeVisible({ timeout: 15000 });
+			await selectFirstChild(page);
 			await navigateToSeededDay(page);

 			// Wait for slots to load
@@ -384,6 +412,7 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 			await expect(
 				page.getByRole('heading', { name: /emploi du temps des enfants/i })
 			).toBeVisible({ timeout: 15000 });
+			await selectFirstChild(page);
 			await navigateToSeededDay(page);

 			await expect(page.locator('[data-testid="schedule-slot"]').first()).toBeVisible({
@@ -419,6 +448,7 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 			await expect(
 				page.getByRole('heading', { name: /emploi du temps des enfants/i })
 			).toBeVisible({ timeout: 15000 });
+			await selectFirstChild(page);

 			// Wait for schedule slots to load
 			await expect(page.locator('[data-testid="schedule-slot"]').first()).toBeVisible({
@@ -448,9 +478,11 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {

 			const childButtons = page.locator('.child-button');
 			const count = await childButtons.count();
-			test.skip(count < 2, 'Need at least 2 children for this test');
+			// "Tous" + at least 2 children = 3 buttons minimum
+			test.skip(count < 3, 'Need at least 2 children for this test');

-			// Navigate to seeded day to see slots
+			// Select first child (index 1, after "Tous")
+			await childButtons.nth(1).click();
 			await navigateToSeededDay(page);

 			// First child (6A) should show Maths
@@ -461,8 +493,8 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 				timeout: 5000
 			});

-			// Switch to second child (5B) — should show SVT
-			await childButtons.nth(1).click();
+			// Switch to second child (index 2) (5B) — should show SVT
+			await childButtons.nth(2).click();
 			await navigateToSeededDay(page);
 			await expect(page.locator('[data-testid="schedule-slot"]').first()).toBeVisible({
 				timeout: 20000
@@ -480,6 +512,7 @@ test.describe('Parent Schedule Consultation (Story 4.4)', () => {
 		test('shows offline banner when network is lost', async ({ page, context }) => {
 			await loginAsParent(page);
 			await page.goto(`${ALPHA_URL}/dashboard/parent-schedule`);
+			await selectFirstChild(page);
 			await navigateToSeededDay(page);

 			// Wait for schedule to load
--- a/frontend/src/lib/components/organisms/ChildSelector/ChildSelector.svelte
+++ b/frontend/src/lib/components/organisms/ChildSelector/ChildSelector.svelte
@@ -14,7 +14,7 @@
 	let {
 		onChildSelected
 	}: {
-		onChildSelected?: (childId: string) => void;
+		onChildSelected?: (childId: string | null) => void;
 	} = $props();

 	let children = $state<Child[]>([]);
@@ -40,8 +40,9 @@
 			const data = await response.json();
 			children = data['hydra:member'] ?? data['member'] ?? (Array.isArray(data) ? data : []);

+			// Auto-select only when there's exactly 1 child
 			const first = children[0];
-			if (first && !selectedChildId) {
+			if (first && !selectedChildId && children.length === 1) {
 				selectedChildId = first.studentId;
 				onChildSelected?.(first.studentId);
 			}
@@ -52,7 +53,7 @@
 		}
 	}

-	function selectChild(childId: string) {
+	function selectChild(childId: string | null) {
 		selectedChildId = childId;
 		onChildSelected?.(childId);
 	}
@@ -75,6 +76,13 @@
 	<div class="child-selector">
 		<span class="child-selector-label">Enfant :</span>
 		<div class="child-selector-buttons">
+			<button
+				class="child-button"
+				class:selected={selectedChildId === null}
+				onclick={() => selectChild(null)}
+			>
+				Tous
+			</button>
 			{#each children as child (child.id)}
 				<button
 					class="child-button"
--- a/frontend/src/lib/components/organisms/Dashboard/DashboardParent.svelte
+++ b/frontend/src/lib/components/organisms/Dashboard/DashboardParent.svelte
@@ -2,7 +2,7 @@
 	import type { DemoData } from '$types';
 	import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';
 	import { fetchChildDaySchedule } from '$lib/features/schedule/api/parentSchedule';
-	import { recordSync } from '$lib/features/schedule/stores/scheduleCache';
+	import { recordSync } from '$lib/features/schedule/stores/scheduleCache.svelte';
 	import SerenityScorePreview from '$lib/components/molecules/SerenityScore/SerenityScorePreview.svelte';
 	import SerenityScoreExplainer from '$lib/components/molecules/SerenityScore/SerenityScoreExplainer.svelte';
 	import DashboardSection from '$lib/components/molecules/DashboardSection.svelte';
--- a/frontend/src/lib/components/organisms/Dashboard/DashboardStudent.svelte
+++ b/frontend/src/lib/components/organisms/Dashboard/DashboardStudent.svelte
@@ -2,7 +2,7 @@
 	import type { DemoData } from '$types';
 	import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';
 	import { fetchDaySchedule, fetchNextClass } from '$lib/features/schedule/api/schedule';
-	import { recordSync } from '$lib/features/schedule/stores/scheduleCache';
+	import { recordSync } from '$lib/features/schedule/stores/scheduleCache.svelte';
 	import DashboardSection from '$lib/components/molecules/DashboardSection.svelte';
 	import SkeletonList from '$lib/components/atoms/Skeleton/SkeletonList.svelte';
 	import ScheduleWidget from '$lib/components/organisms/StudentSchedule/ScheduleWidget.svelte';
--- a/frontend/src/lib/components/organisms/ParentSchedule/MultiChildSummary.svelte
+++ b/frontend/src/lib/components/organisms/ParentSchedule/MultiChildSummary.svelte
@@ -2,7 +2,7 @@
 	import type { ChildScheduleSummary } from '$lib/features/schedule/api/parentSchedule';
 	import { fetchChildrenScheduleSummary } from '$lib/features/schedule/api/parentSchedule';
 	import { formatSyncDate } from '$lib/features/schedule/formatSyncDate';
-	import { isOffline, getLastSyncDate } from '$lib/features/schedule/stores/scheduleCache';
+	import { isOffline, getLastSyncDate, recordSync } from '$lib/features/schedule/stores/scheduleCache.svelte';
 	import { untrack } from 'svelte';

 	let {
@@ -43,6 +43,7 @@

 		try {
 			children = await fetchChildrenScheduleSummary();
+			recordSync();
 		} catch (e) {
 			error = e instanceof Error ? e.message : 'Erreur de chargement';
 		} finally {
--- a/frontend/src/lib/components/organisms/ParentSchedule/ParentScheduleView.svelte
+++ b/frontend/src/lib/components/organisms/ParentSchedule/ParentScheduleView.svelte
@@ -2,7 +2,7 @@
 	import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';
 	import { fetchChildDaySchedule, fetchChildWeekSchedule } from '$lib/features/schedule/api/parentSchedule';
 	import { untrack } from 'svelte';
-	import { recordSync, isOffline, getLastSyncDate, prefetchScheduleDays } from '$lib/features/schedule/stores/scheduleCache';
+	import { recordSync, isOffline, getLastSyncDate, prefetchScheduleDays } from '$lib/features/schedule/stores/scheduleCache.svelte';
 	import { formatSyncDate } from '$lib/features/schedule/formatSyncDate';
 	import ChildSelector from '$lib/components/organisms/ChildSelector/ChildSelector.svelte';
 	import MultiChildSummary from '$lib/components/organisms/ParentSchedule/MultiChildSummary.svelte';
@@ -88,13 +88,15 @@
 		};
 	});

-	function handleChildSelected(childId: string) {
+	function handleChildSelected(childId: string | null) {
 		selectedChildId = childId;
-		untrack(() => {
-			loadSchedule();
-			// Prefetch for offline support
-			prefetchScheduleDays((date) => fetchChildDaySchedule(childId, date));
-		});
+		if (childId) {
+			untrack(() => {
+				loadSchedule();
+				// Prefetch for offline support
+				prefetchScheduleDays((date) => fetchChildDaySchedule(childId, date));
+			});
+		}
 	}

 	function navigateDay(offset: number) {
--- a/frontend/src/lib/components/organisms/StudentSchedule/DayView.svelte
+++ b/frontend/src/lib/components/organisms/StudentSchedule/DayView.svelte
@@ -44,7 +44,11 @@
 	{:else}
 		<ul class="slot-list">
 			{#each slots as slot (slot.slotId + slot.date)}
-				<li class="slot-item" class:next={slot.slotId === nextSlotId}>
+				<li
+						class="slot-item"
+						class:next={slot.slotId === nextSlotId}
+						style:--slot-color={slot.subjectColor ?? '#e5e7eb'}
+					>
 					<button
 						class="slot-button"
 						onclick={() => onSlotClick(slot)}
@@ -123,12 +127,12 @@
 	.slot-item {
 		border-radius: 0.75rem;
 		overflow: hidden;
-		border-left: 4px solid #e5e7eb;
+		border-left: 4px solid var(--slot-color, #e5e7eb);
 		transition: border-color 0.2s;
 	}

 	.slot-item.next {
-		border-left-color: #3b82f6;
+		--slot-color: #3b82f6;
 	}

 	.slot-button {
--- a/frontend/src/lib/components/organisms/StudentSchedule/ScheduleWidget.svelte
+++ b/frontend/src/lib/components/organisms/StudentSchedule/ScheduleWidget.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';
 	import { formatSyncDate } from '$lib/features/schedule/formatSyncDate';
-	import { isOffline, getLastSyncDate } from '$lib/features/schedule/stores/scheduleCache';
+	import { isOffline, getLastSyncDate } from '$lib/features/schedule/stores/scheduleCache.svelte';

 	let {
 		slots = [],
@@ -61,6 +61,7 @@
 					class="slot-item"
 					class:next={slot.slotId === nextSlotId}
 					data-testid="schedule-slot"
+					style:--slot-color={slot.subjectColor ?? 'transparent'}
 				>
 					<div class="slot-time">
 						<span class="time-start">{slot.startTime}</span>
@@ -144,12 +145,12 @@
 		background: #f9fafb;
 		border-radius: 0.5rem;
 		align-items: center;
-		border-left: 3px solid transparent;
+		border-left: 3px solid var(--slot-color, transparent);
 		position: relative;
 	}

 	.slot-item.next {
-		border-left-color: #3b82f6;
+		--slot-color: #3b82f6;
 		background: #eff6ff;
 	}

--- a/frontend/src/lib/components/organisms/StudentSchedule/SlotDetails.svelte
+++ b/frontend/src/lib/components/organisms/StudentSchedule/SlotDetails.svelte
@@ -71,7 +71,7 @@
 			aria-label="Fermer">&times;</button
 		>

-		<h2 class="subject-name">{slot.subjectName}</h2>
+		<h2 class="subject-name" class:has-color={slot.subjectColor} style:--slot-color={slot.subjectColor}>{slot.subjectName}</h2>

 		<div class="detail-grid">
 			<div class="detail-row">
@@ -149,6 +149,11 @@
 		padding-right: 2rem;
 	}

+	.subject-name.has-color {
+		border-left: 4px solid var(--slot-color);
+		padding-left: 0.75rem;
+	}
+
 	.detail-grid {
 		display: flex;
 		flex-direction: column;
--- a/frontend/src/lib/components/organisms/StudentSchedule/StudentSchedule.svelte
+++ b/frontend/src/lib/components/organisms/StudentSchedule/StudentSchedule.svelte
@@ -3,7 +3,7 @@
 	import { fetchDaySchedule, fetchWeekSchedule, fetchNextClass } from '$lib/features/schedule/api/schedule';
 	import { formatSyncDate } from '$lib/features/schedule/formatSyncDate';
 	import { untrack } from 'svelte';
-	import { recordSync, isOffline, getLastSyncDate, prefetchScheduleDays } from '$lib/features/schedule/stores/scheduleCache';
+	import { recordSync, isOffline, getLastSyncDate, prefetchScheduleDays } from '$lib/features/schedule/stores/scheduleCache.svelte';
 	import DayView from './DayView.svelte';
 	import WeekView from './WeekView.svelte';
 	import SlotDetails from './SlotDetails.svelte';
--- a/frontend/src/lib/components/organisms/StudentSchedule/WeekView.svelte
+++ b/frontend/src/lib/components/organisms/StudentSchedule/WeekView.svelte
@@ -64,6 +64,7 @@
 								class:modified={slot.isModified}
 								onclick={() => onSlotClick(slot)}
 								data-testid="week-slot"
+								style:--slot-color={slot.subjectColor ?? '#e5e7eb'}
 							>
 								<span class="slot-time-mobile">{slot.startTime} - {slot.endTime}</span>
 								<span class="slot-subject-mobile">{slot.subjectName}</span>
@@ -97,6 +98,7 @@
 								class:modified={slot.isModified}
 								onclick={() => onSlotClick(slot)}
 								data-testid="week-slot"
+								style:--slot-color={slot.subjectColor ?? '#e5e7eb'}
 							>
 								<span class="week-slot-time">{slot.startTime}</span>
 								<span class="week-slot-subject">{slot.subjectName}</span>
@@ -182,6 +184,7 @@
 		background: white;
 		border: none;
 		border-top: 1px solid #f3f4f6;
+		border-left: 4px solid var(--slot-color, #e5e7eb);
 		cursor: pointer;
 		text-align: left;
 		font-size: 0.875rem;
@@ -283,6 +286,7 @@
 			padding: 0.5rem;
 			background: #eff6ff;
 			border: 1px solid #bfdbfe;
+			border-left: 4px solid var(--slot-color, #bfdbfe);
 			border-radius: 0.375rem;
 			cursor: pointer;
 			text-align: left;
--- a/frontend/src/lib/features/schedule/api/schedule.ts
+++ b/frontend/src/lib/features/schedule/api/schedule.ts
@@ -9,6 +9,7 @@ export interface ScheduleSlot {
 	endTime: string;
 	subjectId: string;
 	subjectName: string;
+	subjectColor: string | null;
 	teacherId: string;
 	teacherName: string;
 	room: string | null;
--- a/frontend/src/lib/features/schedule/stores/scheduleCache.svelte.ts
+++ b/frontend/src/lib/features/schedule/stores/scheduleCache.svelte.ts
@@ -2,6 +2,10 @@ import { browser } from '$app/environment';

 const LAST_SYNC_KEY = 'classeo:schedule:lastSync';

+let lastSyncValue = $state<string | null>(
+	browser ? localStorage.getItem(LAST_SYNC_KEY) : null
+);
+
 /**
 * Vérifie si le navigateur est actuellement hors ligne.
 */
@@ -15,15 +19,16 @@ export function isOffline(): boolean {
 */
 export function recordSync(): void {
 	if (!browser) return;
-	localStorage.setItem(LAST_SYNC_KEY, new Date().toISOString());
+	const now = new Date().toISOString();
+	localStorage.setItem(LAST_SYNC_KEY, now);
+	lastSyncValue = now;
 }

 /**
- * Récupère la date de dernière synchronisation de l'EDT.
+ * Récupère la date de dernière synchronisation de l'EDT (réactif via $state).
 */
 export function getLastSyncDate(): string | null {
-	if (!browser) return null;
-	return localStorage.getItem(LAST_SYNC_KEY);
+	return lastSyncValue;
 }

 /**
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -49,7 +49,7 @@
 	// Demo child name for personalized messages
 	let childName = $state('Emma');

-	function handleChildSelected(childId: string) {
+	function handleChildSelected(childId: string | null) {
 		selectedChildId = childId;
 	}

--- a/frontend/tests/unit/features/schedule/scheduleCache.test.ts
+++ b/frontend/tests/unit/features/schedule/scheduleCache.test.ts
@@ -5,7 +5,7 @@ vi.mock('$app/environment', () => ({
 	browser: true
 }));

-import { isOffline, recordSync, getLastSyncDate, prefetchScheduleDays } from '$lib/features/schedule/stores/scheduleCache';
+import { isOffline, recordSync, getLastSyncDate, prefetchScheduleDays } from '$lib/features/schedule/stores/scheduleCache.svelte';

 describe('scheduleCache', () => {
 	beforeEach(() => {
--- a/frontend/tests/unit/lib/components/organisms/StudentSchedule/ScheduleWidget.test.ts
+++ b/frontend/tests/unit/lib/components/organisms/StudentSchedule/ScheduleWidget.test.ts
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/svelte';
 import ScheduleWidget from '$lib/components/organisms/StudentSchedule/ScheduleWidget.svelte';
 import type { ScheduleSlot } from '$lib/features/schedule/api/schedule';

-vi.mock('$lib/features/schedule/stores/scheduleCache', () => ({
+vi.mock('$lib/features/schedule/stores/scheduleCache.svelte', () => ({
 	isOffline: vi.fn(() => false),
 	getLastSyncDate: vi.fn(() => null)
 }));
@@ -17,6 +17,7 @@ function makeSlot(overrides: Partial<ScheduleSlot> = {}): ScheduleSlot {
 		endTime: '09:00',
 		subjectId: 'sub-1',
 		subjectName: 'Mathématiques',
+		subjectColor: null,
 		teacherId: 'teacher-1',
 		teacherName: 'M. Dupont',
 		room: 'Salle 101',
@@ -100,6 +101,16 @@ describe('ScheduleWidget', () => {
 		expect(container.querySelector('.slot-room')).toBeNull();
 	});

+	it('applies subject color as CSS variable on slot', () => {
+		const slot = makeSlot({ subjectColor: '#e74c3c' });
+		const { container } = render(ScheduleWidget, {
+			props: { slots: [slot], nextSlotId: null }
+		});
+
+		const item = container.querySelector('[data-testid="schedule-slot"]') as HTMLElement;
+		expect(item.style.getPropertyValue('--slot-color')).toBe('#e74c3c');
+	});
+
 	it('renders multiple slots with data-testid', () => {
 		const slots = [
 			makeSlot({ slotId: 'slot-1' }),
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -79,6 +79,36 @@ export default defineConfig({
 								statuses: [0, 200]
 							}
 						}
+					},
+					{
+						urlPattern: /\/api\/me\/children\/schedule\/summary/,
+						handler: 'NetworkFirst',
+						options: {
+							cacheName: 'parent-schedule-v1',
+							expiration: {
+								maxEntries: 10,
+								maxAgeSeconds: 30 * 24 * 60 * 60
+							},
+							networkTimeoutSeconds: 5,
+							cacheableResponse: {
+								statuses: [0, 200]
+							}
+						}
+					},
+					{
+						urlPattern: /\/api\/me\/children$/,
+						handler: 'NetworkFirst',
+						options: {
+							cacheName: 'parent-children-v1',
+							expiration: {
+								maxEntries: 10,
+								maxAgeSeconds: 7 * 24 * 60 * 60
+							},
+							networkTimeoutSeconds: 5,
+							cacheableResponse: {
+								statuses: [0, 200]
+							}
+						}
 					}
 				]
 			},