Contenu

Titre principal setForm({ ...form, hero_headline: e.target.value })} required /> Sous-titre setForm({ ...form, hero_tagline: e.target.value })} required /> Bio (À propos de Mira)

setForm({ ...form, about_bio: e.target.value })}
            required
          />
        </label>
        <label htmlFor="content-about-portrait">
          Photo de portrait
          <input
            id="content-about-portrait"
            type="file"
            accept="image/*"
            onChange={(e) => setFile(e.target.files?.[0] ?? null)}
          />
        </label>
        <label htmlFor="content-contact-email">
          Courriel de contact
          <input
            id="content-contact-email"
            type="email"
            value={form.contact_email}
            onChange={(e) => setForm({ ...form, contact_email: e.target.value })}
            required
          />
        </label>
        <label htmlFor="content-contact-hours">
          Heures d'ouverture
          <input
            id="content-contact-hours"
            value={form.contact_hours}
            onChange={(e) => setForm({ ...form, contact_hours: e.target.value })}
            required
          />
        </label>
        {error && <p className={styles.error}>{error}</p>}
        <button type="submit" className={styles.button} disabled={saving}>Enregistrer le contenu</button>
      </form>
    </div>
  )
}

export default AdminContent
```

- [ ] **Step 4: Write the CSS module**

```css
/* src/pages/admin/AdminContent.module.css */
.page {
  composes: page from './adminShared.module.css';
}

.form {
  composes: form from './adminShared.module.css';
}

.button {
  composes: button from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

- [ ] **Step 5: Run test to verify it passes**

Run: `npx vitest run src/pages/admin/AdminContent.test.tsx`
Expected: PASS (2 tests).

- [ ] **Step 6: Commit**

```bash
git add src/pages/admin/AdminContent.tsx src/pages/admin/AdminContent.module.css src/pages/admin/AdminContent.test.tsx
git commit -m "feat: add AdminContent page for editing site_content"
```

---

### Task 11: New admin page — `AdminTestimonials` (CRUD + reorder)

**Files:**
- Create: `src/pages/admin/AdminTestimonials.tsx`
- Create: `src/pages/admin/AdminTestimonials.module.css`
- Test: `src/pages/admin/AdminTestimonials.test.tsx`

**Interfaces:**
- Produces: route `/admin/testimonials`, nav label "Témoignages" (wired in Task 14).

- [ ] **Step 1: Write the failing test**

```tsx
// src/pages/admin/AdminTestimonials.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, vi, beforeEach } from 'vitest'

const orderMock = vi.fn()
const selectMock = vi.fn(() => ({ order: orderMock }))
const insertMock = vi.fn()
const eqUpdateMock = vi.fn()
const updateMock = vi.fn(() => ({ eq: eqUpdateMock }))
const eqDeleteMock = vi.fn()
const deleteMock = vi.fn(() => ({ eq: eqDeleteMock }))
const fromMock = vi.fn<(table: string) => {
  select: typeof selectMock
  insert: typeof insertMock
  update: typeof updateMock
  delete: typeof deleteMock
}>(() => ({ select: selectMock, insert: insertMock, update: updateMock, delete: deleteMock }))
const uploadSalonImageMock = vi.fn()

vi.mock('../../lib/supabase', () => ({
  supabase: { from: (table: string) => fromMock(table) },
}))
vi.mock('../../lib/storage', () => ({
  uploadSalonImage: (...args: unknown[]) => uploadSalonImageMock(...args),
}))

const TESTIMONIALS = [
  { id: 't1', quote: 'Fantastique !', author: 'Amara T.', avatar_image: 'testimonials/amara.jpg', sort_order: 0 },
  { id: 't2', quote: 'Excellent service.', author: 'Keisha R.', avatar_image: 'testimonials/keisha.jpg', sort_order: 1 },
]

import AdminTestimonials from './AdminTestimonials'

describe('AdminTestimonials', () => {
  beforeEach(() => {
    orderMock.mockReset().mockResolvedValue({ data: TESTIMONIALS, error: null })
    selectMock.mockClear()
    insertMock.mockReset().mockResolvedValue({ error: null })
    eqUpdateMock.mockReset().mockResolvedValue({ error: null })
    updateMock.mockClear()
    eqDeleteMock.mockReset().mockResolvedValue({ error: null })
    deleteMock.mockClear()
    fromMock.mockClear()
    uploadSalonImageMock.mockReset()
  })

it('lists existing testimonials', async () => {
    render(<AdminTestimonials />)
    expect(await screen.findByText('Amara T.')).toBeInTheDocument()
    expect(screen.getByText('Keisha R.')).toBeInTheDocument()
    expect(fromMock).toHaveBeenCalledWith('testimonials')
  })

it('creates a new testimonial from the form', async () => {
    render(<AdminTestimonials />)
    await screen.findByText('Amara T.')

await userEvent.type(screen.getByLabelText(/citation/i), 'Superbe expérience.')
    await userEvent.type(screen.getByLabelText(/^auteur$/i), 'Nadia F.')
    await userEvent.click(screen.getByRole('button', { name: /ajouter le témoignage/i }))

await waitFor(() =>
      expect(insertMock).toHaveBeenCalledWith(
        expect.objectContaining({ quote: 'Superbe expérience.', author: 'Nadia F.', sort_order: 2 }),
      ),
    )
  })

it('deletes a testimonial with confirmation', async () => {
    vi.spyOn(window, 'confirm').mockReturnValue(true)
    render(<AdminTestimonials />)
    await screen.findByText('Amara T.')

await userEvent.click(screen.getAllByRole('button', { name: /supprimer/i })[0])

expect(deleteMock).toHaveBeenCalled()
    expect(eqDeleteMock).toHaveBeenCalledWith('id', 't1')
  })

it('moves a testimonial down by swapping sort_order with the next row', async () => {
    render(<AdminTestimonials />)
    await screen.findByText('Amara T.')

await userEvent.click(screen.getAllByRole('button', { name: /descendre/i })[0])

await waitFor(() => expect(updateMock).toHaveBeenCalledWith({ sort_order: 1 }))
    expect(eqUpdateMock).toHaveBeenCalledWith('id', 't1')
  })
})
```

- [ ] **Step 2: Run test to verify it fails**

Run: `npx vitest run src/pages/admin/AdminTestimonials.test.tsx`
Expected: FAIL — `./AdminTestimonials` module does not exist.

- [ ] **Step 3: Implement the component**

```tsx
// src/pages/admin/AdminTestimonials.tsx
import { useEffect, useState, type FormEvent } from 'react'
import { supabase } from '../../lib/supabase'
import { uploadSalonImage } from '../../lib/storage'
import { friendlyError } from '../../lib/friendlyError'
import styles from './AdminTestimonials.module.css'

interface AdminTestimonial {
  id: string
  quote: string
  author: string
  avatar_image: string
  sort_order: number
}

function emptyForm(): Omit<AdminTestimonial, 'id' | 'sort_order'> & { id: string } {
  return { id: '', quote: '', author: '', avatar_image: '' }
}

function AdminTestimonials() {
  const [testimonials, setTestimonials] = useState<AdminTestimonial[]>([])
  const [form, setForm] = useState(emptyForm())
  const [file, setFile] = useState<File | null>(null)
  const [error, setError] = useState('')
  const [saving, setSaving] = useState(false)

async function loadTestimonials() {
    const { data, error: fetchError } = await supabase.from('testimonials').select('*').order('sort_order')
    if (fetchError) {
      setError(fetchError.message)
      return
    }
    setTestimonials((data ?? []) as AdminTestimonial[])
  }

useEffect(() => {
    void loadTestimonials()
  }, [])

async function handleSubmit(event: FormEvent) {
    event.preventDefault()
    setSaving(true)
    setError('')

let avatar_image = form.avatar_image
    if (file) {
      try {
        avatar_image = await uploadSalonImage(file, `testimonials/${Date.now()}-${file.name}`)
      } catch {
        setError("Échec du téléversement de l'image.")
        setSaving(false)
        return
      }
    }

if (form.id) {
      const { error: updateError } = await supabase
        .from('testimonials')
        .update({ quote: form.quote, author: form.author, avatar_image })
        .eq('id', form.id)
      setSaving(false)
      if (updateError) {
        setError(updateError.message)
        return
      }
    } else {
      const maxOrder = testimonials.reduce((max, t) => Math.max(max, t.sort_order), -1)
      const { error: insertError } = await supabase
        .from('testimonials')
        .insert({ quote: form.quote, author: form.author, avatar_image, sort_order: maxOrder + 1 })
      setSaving(false)
      if (insertError) {
        setError(insertError.message)
        return
      }
    }
    setForm(emptyForm())
    setFile(null)
    await loadTestimonials()
  }

async function handleDelete(id: string) {
    if (!window.confirm('Supprimer ce témoignage ?')) return
    const { error: deleteError } = await supabase.from('testimonials').delete().eq('id', id)
    if (deleteError) {
      setError(friendlyError(deleteError))
      return
    }
    await loadTestimonials()
  }

async function handleMove(index: number, direction: -1 | 1) {
    const targetIndex = index + direction
    if (targetIndex < 0 || targetIndex >= testimonials.length) return
    const current = testimonials[index]
    const target = testimonials[targetIndex]
    setError('')
    const { error: err1 } = await supabase.from('testimonials').update({ sort_order: target.sort_order }).eq('id', current.id)
    if (err1) {
      setError(err1.message)
      return
    }
    const { error: err2 } = await supabase.from('testimonials').update({ sort_order: current.sort_order }).eq('id', target.id)
    if (err2) {
      setError(err2.message)
      return
    }
    await loadTestimonials()
  }

const isEditing = Boolean(form.id)

return (
    <div className={styles.page}>
      <h1>Témoignages</h1>
      <table className={styles.table}>
        <thead>
          <tr>
            <th>Auteur</th>
            <th>Citation</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {testimonials.map((t, index) => (
            <tr key={t.id}>
              <td>{t.author}</td>
              <td>{t.quote}</td>
              <td>
                <button type="button" className={styles.buttonSecondary} onClick={() => handleMove(index, -1)} disabled={index === 0}>Monter</button>
                <button type="button" className={styles.buttonSecondary} onClick={() => handleMove(index, 1)} disabled={index === testimonials.length - 1}>Descendre</button>
                <button type="button" className={styles.buttonSecondary} onClick={() => setForm(t)}>Modifier</button>
                <button type="button" className={styles.buttonDanger} onClick={() => handleDelete(t.id)}>Supprimer</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

<form className={styles.form} onSubmit={handleSubmit}>
        <h2>{isEditing ? 'Modifier le témoignage' : 'Nouveau témoignage'}</h2>
        <label htmlFor="testimonial-author">
          Auteur
          <input
            id="testimonial-author"
            value={form.author}
            onChange={(e) => setForm((f) => ({ ...f, author: e.target.value }))}
            required
          />
        </label>
        <label htmlFor="testimonial-quote">
          Citation
          <textarea
            id="testimonial-quote"
            value={form.quote}
            onChange={(e) => setForm((f) => ({ ...f, quote: e.target.value }))}
            required
          />
        </label>
        <label htmlFor="testimonial-avatar">
          Photo
          <input
            id="testimonial-avatar"
            type="file"
            accept="image/*"
            onChange={(e) => setFile(e.target.files?.[0] ?? null)}
          />
        </label>
        {error && <p className={styles.error}>{error}</p>}
        <button type="submit" className={styles.button} disabled={saving}>
          {isEditing ? 'Enregistrer le témoignage' : 'Ajouter le témoignage'}
        </button>
      </form>
    </div>
  )
}

export default AdminTestimonials
```

- [ ] **Step 4: Write the CSS module**

```css
/* src/pages/admin/AdminTestimonials.module.css */
.page {
  composes: page from './adminShared.module.css';
}

.table {
  composes: table from './adminShared.module.css';
}

.form {
  composes: form from './adminShared.module.css';
}

.button {
  composes: button from './adminShared.module.css';
}

.buttonSecondary {
  composes: buttonSecondary from './adminShared.module.css';
  margin-right: var(--admin-space-xs);
}

.buttonDanger {
  composes: buttonDanger from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

- [ ] **Step 5: Run test to verify it passes**

Run: `npx vitest run src/pages/admin/AdminTestimonials.test.tsx`
Expected: PASS (4 tests).

- [ ] **Step 6: Commit**

```bash
git add src/pages/admin/AdminTestimonials.tsx src/pages/admin/AdminTestimonials.module.css src/pages/admin/AdminTestimonials.test.tsx
git commit -m "feat: add AdminTestimonials page with CRUD and reordering"
```

---

### Task 12: New admin page — `AdminRules` (CRUD + reorder + icon picker)

**Files:**
- Create: `src/pages/admin/AdminRules.tsx`
- Create: `src/pages/admin/AdminRules.module.css`
- Test: `src/pages/admin/AdminRules.test.tsx`

**Interfaces:**
- Consumes: `RuleIcon` (Task 5, `iconKey` prop).
- Produces: route `/admin/rules`, nav label "Règlements" (wired in Task 14).

- [ ] **Step 1: Write the failing test**

```tsx
// src/pages/admin/AdminRules.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, vi, beforeEach } from 'vitest'

vi.mock('../../lib/supabase', () => ({
  supabase: { from: (table: string) => fromMock(table) },
}))

const RULES = [
  { id: 'r1', title: 'Acompte', body: 'Un acompte est requis.', icon_key: 'deposit', sort_order: 0 },
  { id: 'r2', title: 'Retard', body: 'Des frais s\'appliquent.', icon_key: 'lateness', sort_order: 1 },
]

import AdminRules from './AdminRules'

describe('AdminRules', () => {
  beforeEach(() => {
    orderMock.mockReset().mockResolvedValue({ data: RULES, error: null })
    selectMock.mockClear()
    insertMock.mockReset().mockResolvedValue({ error: null })
    eqUpdateMock.mockReset().mockResolvedValue({ error: null })
    updateMock.mockClear()
    eqDeleteMock.mockReset().mockResolvedValue({ error: null })
    deleteMock.mockClear()
    fromMock.mockClear()
  })

it('lists existing rules', async () => {
    render(<AdminRules />)
    expect(await screen.findByText('Acompte')).toBeInTheDocument()
    expect(screen.getByText('Retard')).toBeInTheDocument()
    expect(fromMock).toHaveBeenCalledWith('rules')
  })

it('creates a new rule from the form', async () => {
    render(<AdminRules />)
    await screen.findByText('Acompte')

await userEvent.type(screen.getByLabelText(/^titre$/i), 'Animaux')
    await userEvent.type(screen.getByLabelText(/^texte$/i), 'Aucun animal admis.')
    await userEvent.selectOptions(screen.getByLabelText(/icône/i), 'guests')
    await userEvent.click(screen.getByRole('button', { name: /ajouter le règlement/i }))

await waitFor(() =>
      expect(insertMock).toHaveBeenCalledWith(
        expect.objectContaining({ title: 'Animaux', body: 'Aucun animal admis.', icon_key: 'guests', sort_order: 2 }),
      ),
    )
  })

it('deletes a rule with confirmation', async () => {
    vi.spyOn(window, 'confirm').mockReturnValue(true)
    render(<AdminRules />)
    await screen.findByText('Acompte')

await userEvent.click(screen.getAllByRole('button', { name: /supprimer/i })[0])

expect(deleteMock).toHaveBeenCalled()
    expect(eqDeleteMock).toHaveBeenCalledWith('id', 'r1')
  })
})
```

- [ ] **Step 2: Run test to verify it fails**

Run: `npx vitest run src/pages/admin/AdminRules.test.tsx`
Expected: FAIL — `./AdminRules` module does not exist.

- [ ] **Step 3: Implement the component**

```tsx
// src/pages/admin/AdminRules.tsx
import { useEffect, useState, type FormEvent } from 'react'
import { supabase } from '../../lib/supabase'
import { friendlyError } from '../../lib/friendlyError'
import RuleIcon from '../../components/RuleIcon'
import styles from './AdminRules.module.css'

interface AdminRule {
  id: string
  title: string
  body: string
  icon_key: string
  sort_order: number
}

const ICON_OPTIONS: { key: string; label: string }[] = [
  { key: 'deposit', label: 'Bouclier (dépôt)' },
  { key: 'hair-prep', label: 'Cheveux (préparation)' },
  { key: 'extensions', label: 'Mèches (extensions)' },
  { key: 'lateness', label: 'Horloge (retard)' },
  { key: 'guests', label: 'Personnes (accompagnant)' },
  { key: 'payment', label: 'Carte (paiement)' },
]

function emptyForm(): Omit<AdminRule, 'sort_order'> {
  return { id: '', title: '', body: '', icon_key: 'deposit' }
}

function AdminRules() {
  const [rules, setRules] = useState<AdminRule[]>([])
  const [form, setForm] = useState(emptyForm())
  const [error, setError] = useState('')
  const [saving, setSaving] = useState(false)

async function loadRules() {
    const { data, error: fetchError } = await supabase.from('rules').select('*').order('sort_order')
    if (fetchError) {
      setError(fetchError.message)
      return
    }
    setRules((data ?? []) as AdminRule[])
  }

useEffect(() => {
    void loadRules()
  }, [])

async function handleSubmit(event: FormEvent) {
    event.preventDefault()
    setSaving(true)
    setError('')

if (form.id) {
      const { error: updateError } = await supabase
        .from('rules')
        .update({ title: form.title, body: form.body, icon_key: form.icon_key })
        .eq('id', form.id)
      setSaving(false)
      if (updateError) {
        setError(updateError.message)
        return
      }
    } else {
      const maxOrder = rules.reduce((max, r) => Math.max(max, r.sort_order), -1)
      const { error: insertError } = await supabase
        .from('rules')
        .insert({ title: form.title, body: form.body, icon_key: form.icon_key, sort_order: maxOrder + 1 })
      setSaving(false)
      if (insertError) {
        setError(insertError.message)
        return
      }
    }
    setForm(emptyForm())
    await loadRules()
  }

async function handleDelete(id: string) {
    if (!window.confirm('Supprimer ce règlement ?')) return
    const { error: deleteError } = await supabase.from('rules').delete().eq('id', id)
    if (deleteError) {
      setError(friendlyError(deleteError))
      return
    }
    await loadRules()
  }

async function handleMove(index: number, direction: -1 | 1) {
    const targetIndex = index + direction
    if (targetIndex < 0 || targetIndex >= rules.length) return
    const current = rules[index]
    const target = rules[targetIndex]
    setError('')
    const { error: err1 } = await supabase.from('rules').update({ sort_order: target.sort_order }).eq('id', current.id)
    if (err1) {
      setError(err1.message)
      return
    }
    const { error: err2 } = await supabase.from('rules').update({ sort_order: current.sort_order }).eq('id', target.id)
    if (err2) {
      setError(err2.message)
      return
    }
    await loadRules()
  }

const isEditing = Boolean(form.id)

return (
    <div className={styles.page}>
      <h1>Règlements</h1>
      <table className={styles.table}>
        <thead>
          <tr>
            <th>Icône</th>
            <th>Titre</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {rules.map((rule, index) => (
            <tr key={rule.id}>
              <td><RuleIcon iconKey={rule.icon_key} /></td>
              <td>{rule.title}</td>
              <td>
                <button type="button" className={styles.buttonSecondary} onClick={() => handleMove(index, -1)} disabled={index === 0}>Monter</button>
                <button type="button" className={styles.buttonSecondary} onClick={() => handleMove(index, 1)} disabled={index === rules.length - 1}>Descendre</button>
                <button type="button" className={styles.buttonSecondary} onClick={() => setForm(rule)}>Modifier</button>
                <button type="button" className={styles.buttonDanger} onClick={() => handleDelete(rule.id)}>Supprimer</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

<form className={styles.form} onSubmit={handleSubmit}>
        <h2>{isEditing ? 'Modifier le règlement' : 'Nouveau règlement'}</h2>
        <label htmlFor="rule-title">
          Titre
          <input
            id="rule-title"
            value={form.title}
            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
            required
          />
        </label>
        <label htmlFor="rule-body">
          Texte
          <textarea
            id="rule-body"
            value={form.body}
            onChange={(e) => setForm((f) => ({ ...f, body: e.target.value }))}
            required
          />
        </label>
        <label htmlFor="rule-icon">
          Icône
          <select
            id="rule-icon"
            value={form.icon_key}
            onChange={(e) => setForm((f) => ({ ...f, icon_key: e.target.value }))}
          >
            {ICON_OPTIONS.map((option) => (
              <option key={option.key} value={option.key}>{option.label}</option>
            ))}
          </select>
        </label>
        <RuleIcon iconKey={form.icon_key} />
        {error && <p className={styles.error}>{error}</p>}
        <button type="submit" className={styles.button} disabled={saving}>
          {isEditing ? 'Enregistrer le règlement' : 'Ajouter le règlement'}
        </button>
      </form>
    </div>
  )
}

export default AdminRules
```

- [ ] **Step 4: Write the CSS module**

```css
/* src/pages/admin/AdminRules.module.css */
.page {
  composes: page from './adminShared.module.css';
}

.table {
  composes: table from './adminShared.module.css';
}

.form {
  composes: form from './adminShared.module.css';
}

.button {
  composes: button from './adminShared.module.css';
}

.buttonSecondary {
  composes: buttonSecondary from './adminShared.module.css';
  margin-right: var(--admin-space-xs);
}

.buttonDanger {
  composes: buttonDanger from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

- [ ] **Step 5: Run test to verify it passes**

Run: `npx vitest run src/pages/admin/AdminRules.test.tsx`
Expected: PASS (3 tests).

- [ ] **Step 6: Commit**

```bash
git add src/pages/admin/AdminRules.tsx src/pages/admin/AdminRules.module.css src/pages/admin/AdminRules.test.tsx
git commit -m "feat: add AdminRules page with CRUD, reordering, and icon picker"
```

---

### Task 13: Extend `AdminProducts` with featured toggle/reorder, and apply the new design

**Files:**
- Modify: `src/pages/admin/AdminProducts.tsx`
- Modify: `src/pages/admin/AdminProducts.module.css`
- Modify: `src/pages/admin/AdminProducts.test.tsx`

**Interfaces:**
- Consumes: `products.featured`/`featured_order` columns (Task 1).

- [ ] **Step 1: Update the failing test**

Modify `src/pages/admin/AdminProducts.test.tsx`'s `EXISTING_PRODUCT` constant to include the new columns, and add a new test for the featured toggle:

```tsx
const EXISTING_PRODUCT = {
  id: 'edge-control',
  name: 'Silk Edge Control',
  category: 'hair-care',
  price: 12,
  image: 'products/edge-control.jpg',
  description: 'Hold with shine.',
  in_stock: true,
  featured: false,
  featured_order: null,
}
```

Add this test to the `describe('AdminProducts', ...)` block:

```tsx
  it('marks a product as featured, assigning it the next featured_order', async () => {
    upsertMock.mockResolvedValue({ error: null })
    render(<AdminProducts />)
    await screen.findByText('Silk Edge Control')

await userEvent.click(screen.getByRole('checkbox', { name: /vedette/i }))

await waitFor(() =>
      expect(upsertMock).toHaveBeenCalledWith(
        expect.objectContaining({ id: 'edge-control', featured: true, featured_order: 0 }),
      ),
    )
  })
```

- [ ] **Step 2: Run test to verify it fails**

Run: `npx vitest run src/pages/admin/AdminProducts.test.tsx`
Expected: FAIL — no "Vedette" checkbox exists yet.

- [ ] **Step 3: Implement**

Replace `src/pages/admin/AdminProducts.tsx` in full:

```tsx
import { useEffect, useState, type FormEvent } from 'react'
import { supabase } from '../../lib/supabase'
import { uploadSalonImage } from '../../lib/storage'
import { friendlyError } from '../../lib/friendlyError'
import styles from './AdminProducts.module.css'

interface AdminProduct {
  id: string
  name: string
  category: 'hair-care' | 'extensions' | 'tools' | 'accessories'
  price: number
  image: string
  description: string
  in_stock: boolean
  featured: boolean
  featured_order: number | null
}

const CATEGORIES: AdminProduct['category'][] = ['hair-care', 'extensions', 'tools', 'accessories']

const CATEGORY_LABELS: Record<AdminProduct['category'], string> = {
  'hair-care': 'Soins capillaires',
  extensions: 'Extensions',
  tools: 'Outils',
  accessories: 'Accessoires',
}

function emptyForm(): AdminProduct {
  return { id: '', name: '', category: 'hair-care', price: 0, image: '', description: '', in_stock: true, featured: false, featured_order: null }
}

function AdminProducts() {
  const [products, setProducts] = useState<AdminProduct[]>([])
  const [form, setForm] = useState<AdminProduct>(emptyForm())
  const [file, setFile] = useState<File | null>(null)
  const [error, setError] = useState('')
  const [saving, setSaving] = useState(false)

async function loadProducts() {
    const { data, error: fetchError } = await supabase.from('products').select('*').order('name')
    if (fetchError) {
      setError(fetchError.message)
      return
    }
    setProducts((data ?? []) as AdminProduct[])
  }

useEffect(() => {
    void loadProducts()
  }, [])

async function handleSubmit(event: FormEvent) {
    event.preventDefault()
    setSaving(true)
    setError('')

let image = form.image
    if (file) {
      try {
        image = await uploadSalonImage(file, `products/${form.id}-${file.name}`)
      } catch {
        setError("Échec du téléversement de l'image.")
        setSaving(false)
        return
      }
    }

const { error: upsertError } = await supabase.from('products').upsert({ ...form, image })
    setSaving(false)
    if (upsertError) {
      setError(upsertError.message)
      return
    }
    setForm(emptyForm())
    setFile(null)
    await loadProducts()
  }

async function handleDelete(id: string) {
    if (!window.confirm('Supprimer ce produit ?')) return
    const { error: deleteError } = await supabase.from('products').delete().eq('id', id)
    if (deleteError) {
      setError(friendlyError(deleteError))
      return
    }
    await loadProducts()
  }

async function handleToggleFeatured(product: AdminProduct) {
    setError('')
    if (product.featured) {
      const { error: upsertError } = await supabase.from('products').upsert({ ...product, featured: false, featured_order: null })
      if (upsertError) {
        setError(upsertError.message)
        return
      }
    } else {
      const maxOrder = products.reduce((max, p) => (p.featured && p.featured_order !== null ? Math.max(max, p.featured_order) : max), -1)
      const { error: upsertError } = await supabase.from('products').upsert({ ...product, featured: true, featured_order: maxOrder + 1 })
      if (upsertError) {
        setError(upsertError.message)
        return
      }
    }
    await loadProducts()
  }

async function handleMoveFeatured(product: AdminProduct, direction: -1 | 1) {
    const featured = products
      .filter((p) => p.featured)
      .sort((a, b) => (a.featured_order ?? 0) - (b.featured_order ?? 0))
    const index = featured.findIndex((p) => p.id === product.id)
    const targetIndex = index + direction
    if (targetIndex < 0 || targetIndex >= featured.length) return
    const current = featured[index]
    const target = featured[targetIndex]
    setError('')
    const { error: err1 } = await supabase.from('products').upsert({ ...current, featured_order: target.featured_order })
    if (err1) {
      setError(err1.message)
      return
    }
    const { error: err2 } = await supabase.from('products').upsert({ ...target, featured_order: current.featured_order })
    if (err2) {
      setError(err2.message)
      return
    }
    await loadProducts()
  }

const isEditing = Boolean(form.id) && products.some((p) => p.id === form.id)
  const featuredProducts = products
    .filter((p) => p.featured)
    .sort((a, b) => (a.featured_order ?? 0) - (b.featured_order ?? 0))

return (
    <div className={styles.page}>
      <h1>Produits</h1>
      <table className={styles.table}>
        <thead>
          <tr>
            <th>Nom</th>
            <th>Catégorie</th>
            <th>Prix</th>
            <th>En stock</th>
            <th>Vedette</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {products.map((product) => (
            <tr key={product.id}>
              <td>{product.name}</td>
              <td>{CATEGORY_LABELS[product.category]}</td>
              <td>{product.price} $</td>
              <td>{product.in_stock ? 'Oui' : 'Non'}</td>
              <td>
                <label>
                  <input
                    type="checkbox"
                    checked={product.featured}
                    onChange={() => handleToggleFeatured(product)}
                  />
                  Vedette
                </label>
                {product.featured && (
                  <>
                    <button
                      type="button"
                      className={styles.buttonSecondary}
                      onClick={() => handleMoveFeatured(product, -1)}
                      disabled={featuredProducts.findIndex((p) => p.id === product.id) === 0}
                    >
                      Monter
                    </button>
                    <button
                      type="button"
                      className={styles.buttonSecondary}
                      onClick={() => handleMoveFeatured(product, 1)}
                      disabled={featuredProducts.findIndex((p) => p.id === product.id) === featuredProducts.length - 1}
                    >
                      Descendre
                    </button>
                  </>
                )}
              </td>
              <td>
                <button type="button" className={styles.buttonSecondary} onClick={() => setForm(product)}>Modifier</button>
                <button type="button" className={styles.buttonDanger} onClick={() => handleDelete(product.id)}>Supprimer</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

<form className={styles.form} onSubmit={handleSubmit}>
        <h2>{isEditing ? 'Modifier le produit' : 'Nouveau produit'}</h2>
        <label htmlFor="product-id">
          Id
          <input
            id="product-id"
            value={form.id}
            onChange={(e) => setForm((f) => ({ ...f, id: e.target.value }))}
            required
            disabled={isEditing}
          />
        </label>
        <label htmlFor="product-name">
          Nom
          <input
            id="product-name"
            value={form.name}
            onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
            required
          />
        </label>
        <label htmlFor="product-category">
          Catégorie
          <select
            id="product-category"
            value={form.category}
            onChange={(e) => setForm((f) => ({ ...f, category: e.target.value as AdminProduct['category'] }))}
          >
            {CATEGORIES.map((category) => (
              <option key={category} value={category}>{CATEGORY_LABELS[category]}</option>
            ))}
          </select>
        </label>
        <label htmlFor="product-price">
          Prix
          <input
            id="product-price"
            type="number"
            step="0.01"
            value={form.price}
            onChange={(e) => setForm((f) => ({ ...f, price: Number(e.target.value) }))}
            required
          />
        </label>
        <label htmlFor="product-description">
          Description
          <textarea
            id="product-description"
            value={form.description}
            onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
            required
          />
        </label>
        <label htmlFor="product-image">
          Image
          <input
            id="product-image"
            type="file"
            accept="image/*"
            onChange={(e) => setFile(e.target.files?.[0] ?? null)}
          />
        </label>
        <label htmlFor="product-in-stock">
          <input
            id="product-in-stock"
            type="checkbox"
            checked={form.in_stock}
            onChange={(e) => setForm((f) => ({ ...f, in_stock: e.target.checked }))}
          />
          En stock
        </label>
        {error && <p className={styles.error}>{error}</p>}
        <button type="submit" className={styles.button} disabled={saving}>Enregistrer le produit</button>
      </form>
    </div>
  )
}

export default AdminProducts
```

Note: the new test's checkbox is queried via `getByRole('checkbox', { name: /vedette/i })` — there's exactly one product row in the test fixture, so this resolves to a single element without ambiguity, matching the label text `Vedette` wrapping the checkbox input in the table row above.

- [ ] **Step 4: Update the CSS module to compose from the shared styles**

Replace `src/pages/admin/AdminProducts.module.css` in full:

```css
.page {
  composes: page from './adminShared.module.css';
}

.table {
  composes: table from './adminShared.module.css';
}

.form {
  composes: form from './adminShared.module.css';
}

.button {
  composes: button from './adminShared.module.css';
}

.buttonSecondary {
  composes: buttonSecondary from './adminShared.module.css';
  margin-right: var(--admin-space-xs);
}

.buttonDanger {
  composes: buttonDanger from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

- [ ] **Step 5: Run test to verify it passes**

Run: `npx vitest run src/pages/admin/AdminProducts.test.tsx`
Expected: PASS (4 tests).

- [ ] **Step 6: Commit**

```bash
git add src/pages/admin/AdminProducts.tsx src/pages/admin/AdminProducts.module.css src/pages/admin/AdminProducts.test.tsx
git commit -m "feat: add featured toggle/reorder to AdminProducts; apply shared admin design"
```

---

### Task 14: Wire the 3 new pages into `AdminLayout`/`AdminApp`

**Files:**
- Modify: `src/pages/admin/AdminLayout.tsx`
- Modify: `src/pages/admin/AdminApp.tsx`
- Modify: `src/pages/admin/AdminApp.test.tsx`

**Interfaces:**
- Consumes: `AdminContent` (Task 10), `AdminTestimonials` (Task 11), `AdminRules` (Task 12).

- [ ] **Step 1: Update the failing test**

Add these tests to the existing `describe('AdminApp routing', ...)` block in `src/pages/admin/AdminApp.test.tsx`, matching the file's existing render pattern exactly (each test wraps `<AdminApp />` in its own `MemoryRouter`/`Routes`/`Route path="/admin/*"`, not the top-level `<App />`):

```tsx
  it('renders the AdminContent page at /admin/content', async () => {
    render(
      <MemoryRouter initialEntries={['/admin/content']}>
        <Routes>
          <Route path="/admin/*" element={<AdminApp />} />
        </Routes>
      </MemoryRouter>,
    )
    expect(await screen.findByRole('heading', { name: /^contenu$/i })).toBeInTheDocument()
  })

it('renders the AdminTestimonials page at /admin/testimonials', async () => {
    render(
      <MemoryRouter initialEntries={['/admin/testimonials']}>
        <Routes>
          <Route path="/admin/*" element={<AdminApp />} />
        </Routes>
      </MemoryRouter>,
    )
    expect(await screen.findByRole('heading', { name: /^témoignages$/i })).toBeInTheDocument()
  })

it('renders the AdminRules page at /admin/rules', async () => {
    render(
      <MemoryRouter initialEntries={['/admin/rules']}>
        <Routes>
          <Route path="/admin/*" element={<AdminApp />} />
        </Routes>
      </MemoryRouter>,
    )
    expect(await screen.findByRole('heading', { name: /^règlements$/i })).toBeInTheDocument()
  })
```

The file's existing `vi.mock('../../lib/supabase', ...)` block is:

```tsx
vi.mock('../../lib/supabase', () => ({
  supabase: {
    auth: { signOut: vi.fn() },
    from: () => ({
      select: () => ({ order: () => Promise.resolve({ data: [], error: null }) }),
    }),
  },
}))
```

`AdminContent`'s fetch calls `.select().eq('id', 'default').single()`, which this mock doesn't cover. Extend the `select()` return value to also provide `eq`, so both chains resolve:

```tsx
vi.mock('../../lib/supabase', () => ({
  supabase: {
    auth: { signOut: vi.fn() },
    from: () => ({
      select: () => ({
        order: () => Promise.resolve({ data: [], error: null }),
        eq: () => ({
          single: () => Promise.resolve({
            data: { id: 'default', hero_headline: '', hero_tagline: '', about_bio: '', about_portrait_image: '', contact_email: '', contact_hours: '' },
            error: null,
          }),
        }),
      }),
    }),
  },
}))
```

- [ ] **Step 2: Run test to verify it fails**

Run: `npx vitest run src/pages/admin/AdminApp.test.tsx`
Expected: FAIL — no `/admin/content`, `/admin/testimonials`, or `/admin/rules` routes exist yet (they fall through to the catch-all redirect to `/admin/products`).

- [ ] **Step 3: Update `AdminLayout.tsx`'s nav items**

```tsx
const NAV_ITEMS = [
  { to: '/admin/products', label: 'Produits' },
  { to: '/admin/services', label: 'Services' },
  { to: '/admin/schedule', label: 'Horaire' },
  { to: '/admin/bookings', label: 'Réservations' },
  { to: '/admin/inquiries', label: 'Demandes' },
  { to: '/admin/content', label: 'Contenu' },
  { to: '/admin/testimonials', label: 'Témoignages' },
  { to: '/admin/rules', label: 'Règlements' },
]
```

(Rest of `AdminLayout.tsx` unchanged.)

- [ ] **Step 4: Update `AdminApp.tsx`'s routes**

```tsx
import { Routes, Route, Navigate } from 'react-router-dom'
import ProtectedRoute from '../../components/ProtectedRoute'
import AdminLogin from './AdminLogin'
import AdminLayout from './AdminLayout'
import AdminProducts from './AdminProducts'
import AdminServices from './AdminServices'
import AdminSchedule from './AdminSchedule'
import AdminBookings from './AdminBookings'
import AdminInquiries from './AdminInquiries'
import AdminContent from './AdminContent'
import AdminTestimonials from './AdminTestimonials'
import AdminRules from './AdminRules'
import styles from './AdminApp.module.css'

function AdminApp() {
  return (
    <div className={styles.adminRoot}>
      <Routes>
        <Route path="login" element={<AdminLogin />} />
        <Route element={<ProtectedRoute />}>
          <Route element={<AdminLayout />}>
            <Route index element={<Navigate to="/admin/products" replace />} />
            <Route path="products" element={<AdminProducts />} />
            <Route path="services" element={<AdminServices />} />
            <Route path="schedule" element={<AdminSchedule />} />
            <Route path="bookings" element={<AdminBookings />} />
            <Route path="inquiries" element={<AdminInquiries />} />
            <Route path="content" element={<AdminContent />} />
            <Route path="testimonials" element={<AdminTestimonials />} />
            <Route path="rules" element={<AdminRules />} />
            <Route path="*" element={<Navigate to="/admin/products" replace />} />
          </Route>
        </Route>
      </Routes>
    </div>
  )
}

export default AdminApp
```

- [ ] **Step 5: Run test to verify it passes**

Run: `npx vitest run src/pages/admin/AdminApp.test.tsx`
Expected: PASS (all tests, including the 3 new ones).

- [ ] **Step 6: Run the full suite**

Run: `npx vitest run`
Expected: all test files pass.

- [ ] **Step 7: Commit**

```bash
git add src/pages/admin/AdminLayout.tsx src/pages/admin/AdminApp.tsx src/pages/admin/AdminApp.test.tsx
git commit -m "feat: wire AdminContent/AdminTestimonials/AdminRules into admin nav and routes"
```

---

### Task 15: Apply the redesign to the remaining legacy admin pages

**Files:**
- Modify: `src/pages/admin/AdminServices.module.css`
- Modify: `src/pages/admin/AdminServices.tsx`
- Modify: `src/pages/admin/AdminSchedule.module.css`
- Modify: `src/pages/admin/AdminSchedule.tsx`
- Modify: `src/pages/admin/AdminBookings.module.css`
- Modify: `src/pages/admin/AdminBookings.tsx`
- Modify: `src/pages/admin/AdminInquiries.module.css`
- Modify: `src/pages/admin/AdminInquiries.tsx`

**Interfaces:**
- Consumes: `adminShared.module.css` (Task 2).

CSS-only and `className`-only changes — no data-fetching or event-handler logic changes in any of the 4 files, so no test files change in this task.

- [ ] **Step 1: `AdminServices.module.css`**

Replace in full:

```css
.page {
  composes: page from './adminShared.module.css';
}

.table {
  composes: table from './adminShared.module.css';
}

.form {
  composes: form from './adminShared.module.css';
}

.button {
  composes: button from './adminShared.module.css';
}

.buttonSecondary {
  composes: buttonSecondary from './adminShared.module.css';
  margin-right: var(--admin-space-xs);
}

.buttonDanger {
  composes: buttonDanger from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

In `AdminServices.tsx`, add classNames to the 3 buttons (no other change):

```tsx
                <button type="button" className={styles.buttonSecondary} onClick={() => setForm(service)}>Modifier</button>
                <button type="button" className={styles.buttonDanger} onClick={() => handleDelete(service.id)}>Supprimer</button>
```

and

```tsx
        <button type="submit" className={styles.button} disabled={saving}>Enregistrer le service</button>
```

- [ ] **Step 2: `AdminSchedule.module.css`**

Replace in full:

```css
.page {
  composes: page from './adminShared.module.css';
}

.section {
  composes: card from './adminShared.module.css';
  padding: var(--admin-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-md);
  max-width: 480px;
}

.days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
}

.days label {
  display: flex;
  align-items: center;
  gap: var(--admin-space-xs);
  font-size: 0.875rem;
  color: var(--admin-text);
}

.form label,
.section label {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--admin-text);
}

.form input,
.section input {
  padding: var(--admin-space-sm);
  border: 1px solid var(--admin-border);
  border-radius: calc(var(--admin-radius) / 2);
  font: inherit;
}

.exceptionsTable {
  composes: table from './adminShared.module.css';
}

.button {
  composes: button from './adminShared.module.css';
}

.buttonSecondary {
  composes: buttonSecondary from './adminShared.module.css';
}

.form {
  composes: form from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

In `AdminSchedule.tsx`:
- Change `<button type="submit" disabled={saving}>Enregistrer l'horaire</button>` to `<button type="submit" className={styles.button} disabled={saving}>Enregistrer l'horaire</button>`.
- Change `<button type="button" onClick={() => handleRemoveException(exception.date)}>Retirer</button>` to `<button type="button" className={styles.buttonSecondary} onClick={() => handleRemoveException(exception.date)}>Retirer</button>`.
- Change `<button type="submit">Ajouter une exception</button>` to `<button type="submit" className={styles.button}>Ajouter une exception</button>`.

- [ ] **Step 3: `AdminBookings.module.css`**

Replace in full:

```css
.page {
  composes: page from './adminShared.module.css';
}

.table {
  composes: table from './adminShared.module.css';
}

.button {
  composes: button from './adminShared.module.css';
}

.buttonSecondary {
  composes: buttonSecondary from './adminShared.module.css';
  margin-right: var(--admin-space-xs);
}

.buttonDanger {
  composes: buttonDanger from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

In `AdminBookings.tsx`, style "Annuler" as danger and "Marquer comme terminée" as the neutral secondary action:

```tsx
                    <button
                      type="button"
                      className={styles.buttonDanger}
                      onClick={() => {
                        if (window.confirm('Annuler cette réservation ? Cela libérera son créneau pour d\'autres réservations.')) {
                          void setStatus(booking.id, 'cancelled')
                        }
                      }}
                    >
                      Annuler
                    </button>
                    <button
                      type="button"
                      className={styles.buttonSecondary}
                      onClick={() => {
                        if (window.confirm('Marquer cette réservation comme terminée ?')) {
                          void setStatus(booking.id, 'completed')
                        }
                      }}
                    >
                      Marquer comme terminée
                    </button>
```

- [ ] **Step 4: `AdminInquiries.module.css`**

Replace in full:

```css
.page {
  composes: page from './adminShared.module.css';
}

.table {
  composes: table from './adminShared.module.css';
}

.buttonSecondary {
  composes: buttonSecondary from './adminShared.module.css';
}

.error {
  composes: error from './adminShared.module.css';
}
```

In `AdminInquiries.tsx`:

```tsx
                {inquiry.status === 'new' && (
                  <button type="button" className={styles.buttonSecondary} onClick={() => markRead(inquiry.id)}>Marquer comme lue</button>
                )}
```

- [ ] **Step 5: Run the full test suite and build**

Run: `npx vitest run && npx tsc -b && npm run build && npm run lint`
Expected: all tests pass unchanged, build succeeds, lint clean. (Existing tests query by role/label/text, none of which changed — only `className` and CSS were touched.)

- [ ] **Step 6: Commit**

```bash
git add src/pages/admin/AdminServices.module.css src/pages/admin/AdminServices.tsx src/pages/admin/AdminSchedule.module.css src/pages/admin/AdminSchedule.tsx src/pages/admin/AdminBookings.module.css src/pages/admin/AdminBookings.tsx src/pages/admin/AdminInquiries.module.css src/pages/admin/AdminInquiries.tsx
git commit -m "style: apply shared admin design to Services/Schedule/Bookings/Inquiries pages"
```

---

### Task 16: Deploy and live verification

**Files:** None (operational task).

- [ ] **Step 1: Run full local verification**

Run: `npx supabase db reset && npx supabase test db`
Expected: `Result: PASS`, `Tests=63`.

Run: `npx vitest run && npx tsc -b && npm run build && npm run lint`
Expected: all green.

- [ ] **Step 2: Push the migration to the live Supabase project**

Run: `npx supabase migration list` (confirm project is still linked to `ylxppnclfpnnolnjkbwv`; re-link with `npx supabase link --project-ref ylxppnclfpnnolnjkbwv` if needed).
Run: `npx supabase db push`
Expected: `20260813000001_site_content_testimonials_rules.sql` applies to the live project with no errors.

- [ ] **Step 3: Redeploy the frontend**

Run: `npx vercel --prod` (from the linked `braidsbymira` project directory — verify with `cat .vercel/project.json` that `projectName` is `braidsbymira` before deploying, per the prior session's incident where an unlinked directory created a stray duplicate project).
Expected: deployment succeeds, aliased to `https://braidsbymira.vercel.app`.

- [ ] **Step 4: Live smoke test — public site**

Using the Playwright browser tool, navigate to `https://braidsbymira.vercel.app/` and verify:
- Hero headline/tagline render (from `site_content`).
- "À propos de Mira" bio text renders.
- "Sélection boutique" shows only the products marked featured in the seed data (none, initially — the migration seeds `featured = false` for all existing products; note this to the user as an expected empty state until they mark some featured via the new admin page).
- Testimonials render (the 3 seeded ones).
- Footer shows the seeded contact email/hours.

Navigate to `https://braidsbymira.vercel.app/rules` and verify all 6 rule sections render with their icons.

- [ ] **Step 5: Live smoke test — admin panel**

Log in at `https://braidsbymira.vercel.app/admin/login` with the current admin credentials. Verify:
- The sidebar shows 8 nav items including Contenu, Témoignages, Règlements, with the new visual design (no unstyled default buttons).
- `/admin/content` loads the seeded site content into the form.
- `/admin/testimonials` lists the 3 seeded testimonials.
- `/admin/rules` lists the 6 seeded rules with correct icons.
- On `/admin/products`, mark one product as featured and confirm it appears in the homepage's "Sélection boutique" after a refresh.

Ask the user for confirmation before performing any write through the live admin UI (per this session's established pattern for production-mutating actions), then revert/clean up any test data created during verification.

- [ ] **Step 6: Report completion**

Summarize to the user: migration live, frontend redeployed, all smoke tests passed (or any findings), and that the homepage's featured-products section will show empty until they mark products as featured (since the migration seeds `featured = false` for all existing products, matching the pre-existing arbitrary "first 3 in stock" behavior being replaced — this is a deliberate, disclosed behavior change, not a bug).

{content?.heroHeadline ?? 'Vos cheveux, votre couronne'}

À propos de Mira

Styles Signature

Sélection boutique

Avis de nos clientes

Avant de réserver

{rule.title}

Contenu

Contenu