fix: corrige les dépendances mobile et la qualité du code frontend

Mobile (Expo SDK 53) : - supprime victory-native et react-native-svg (dépendances mortes, non importées) qui empêchaient l'installation (ETARGET sur svg@~16.0.0 + conflit de peer reanimated/skia) - ajoute les peers manquants expo-constants et expo-linking (requis par expo-router) - aligne expo-router, react-native et react-native-screens sur le SDK 53 - ajoute package-lock.json (installs reproductibles) - expo-doctor 18/18, tsc sans erreur Frontend (Next.js) : - EmotionChart : remplace 4 `any` par les types Recharts (ValueType/NameType) - EditSaisieModal : remplace le setState dans useEffect par l'ajustement d'état pendant le rendu (pattern recommandé par React) - tsc, eslint et build de production sans erreur Backend : 15 tests passent (Auth, Admin, Tracker, RGPD). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-16 17:19:07 +02:00
parent bfd35905c9
commit 2ec2a78469
23 changed files with 9905 additions and 60 deletions
@@ -2,7 +2,7 @@

 import { useState } from 'react';
 import Link from 'next/link';
-import { Plus, Filter } from 'lucide-react';
+import { Plus, Filter, Download } from 'lucide-react';
 import { useSaisies, useDeleteSaisie } from '@/hooks/useTracker';
 import { useEmotions } from '@/hooks/useEmotions';
 import TrackerTimeline from '@/components/features/TrackerTimeline';
@@ -10,9 +10,33 @@ import EditSaisieModal from '@/components/features/EditSaisieModal';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import Skeleton from '@/components/ui/Skeleton';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import toast from 'react-hot-toast';
 import type { SaisieTracker } from '@/types';

+function exportSaisiesCsv(saisies: SaisieTracker[]): void {
+  const escape = (v: unknown): string => {
+    const s = v === null || v === undefined ? '' : String(v);
+    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+  };
+  const headers = ['Date', 'Emotion', 'Emotion parente', 'Intensite', 'Note'];
+  const rows = saisies.map((s) => [
+    s.date_saisie,
+    s.emotion?.nom ?? '',
+    s.emotion?.parent?.nom ?? '',
+    s.intensite,
+    s.note ?? '',
+  ]);
+  const csv = [headers, ...rows].map((r) => r.map(escape).join(',')).join('\n');
+  const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `cesizen-saisies-${new Date().toISOString().slice(0, 10)}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
 export default function JournalPage() {
  const [showFilters, setShowFilters] = useState(false);
  const [filters, setFilters] = useState<{
@@ -21,21 +45,31 @@ export default function JournalPage() {
    emotion_id?: number;
  }>({});
  const [editingSaisie, setEditingSaisie] = useState<SaisieTracker | null>(null);
+  const [deleteId, setDeleteId] = useState<number | null>(null);

  const { data: saisies, isLoading } = useSaisies(filters);
  const { data: emotions } = useEmotions();
  const deleteSaisie = useDeleteSaisie();

-  const handleDelete = async (id: number) => {
-    if (!confirm('Supprimer cette saisie ?')) return;
+  const confirmDelete = async () => {
+    if (!deleteId) return;
    try {
-      await deleteSaisie.mutateAsync(id);
+      await deleteSaisie.mutateAsync(deleteId);
      toast.success('Saisie supprimée');
    } catch {
      toast.error('Erreur lors de la suppression');
    }
  };

+  const handleExport = () => {
+    if (!saisies || saisies.length === 0) {
+      toast.error('Aucune saisie à exporter');
+      return;
+    }
+    exportSaisiesCsv(saisies);
+    toast.success('Export CSV téléchargé');
+  };
+
  return (
    <div>
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
@@ -56,6 +90,10 @@ export default function JournalPage() {
            <Filter size={16} />
            Filtrer
          </Button>
+          <Button variant="ghost" size="sm" onClick={handleExport} title="Exporter mes saisies (RGPD)">
+            <Download size={16} />
+            Export CSV
+          </Button>
          <Link href="/journal/nouvelle-saisie">
            <Button size="sm">
              <Plus size={16} />
@@ -138,7 +176,7 @@ export default function JournalPage() {
        <TrackerTimeline
          saisies={saisies || []}
          onEdit={(saisie) => setEditingSaisie(saisie)}
-          onDelete={handleDelete}
+          onDelete={(id) => setDeleteId(id)}
        />
      )}

@@ -148,6 +186,16 @@ export default function JournalPage() {
        isOpen={!!editingSaisie}
        onClose={() => setEditingSaisie(null)}
      />
+
+      <ConfirmDialog
+        isOpen={deleteId !== null}
+        title="Supprimer la saisie"
+        message="Cette saisie sera définitivement supprimée de votre journal. Cette action est irréversible."
+        confirmLabel="Supprimer"
+        destructive
+        onConfirm={confirmDelete}
+        onClose={() => setDeleteId(null)}
+      />
    </div>
  );
 }
@@ -1,6 +1,6 @@
 'use client';

-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import type { SaisieTracker } from '@/types';
 import { useUpdateSaisie } from '@/hooks/useTracker';
 import EmotionPicker from '@/components/features/EmotionPicker';
@@ -22,14 +22,16 @@ export default function EditSaisieModal({ saisie, isOpen, onClose }: EditSaisieM
  const [note, setNote] = useState('');
  const [dateSaisie, setDateSaisie] = useState('');

-  useEffect(() => {
-    if (saisie) {
-      setEmotionId(saisie.emotion_id);
-      setIntensite(saisie.intensite);
-      setNote(saisie.note || '');
-      setDateSaisie(saisie.date_saisie.split('T')[0]);
-    }
-  }, [saisie]);
+  // Synchronise le formulaire quand une nouvelle saisie est passée : ajustement
+  // d'état pendant le rendu (pattern recommandé par React, sans effet).
+  const [prevSaisieId, setPrevSaisieId] = useState<number | null>(null);
+  if (saisie && saisie.id !== prevSaisieId) {
+    setPrevSaisieId(saisie.id);
+    setEmotionId(saisie.emotion_id);
+    setIntensite(saisie.intensite);
+    setNote(saisie.note || '');
+    setDateSaisie(saisie.date_saisie.split('T')[0]);
+  }

  const handleSubmit = async () => {
    if (!saisie || !emotionId) return;
@@ -16,6 +16,7 @@ import {
  Line,
  Legend,
 } from 'recharts';
+import type { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
 import type { RapportData } from '@/types';

 interface EmotionChartProps {
@@ -48,14 +49,18 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
              outerRadius={120}
              paddingAngle={3}
              dataKey="value"
-              label={({ name, pourcentage }: any) => `${name} (${pourcentage}%)`}
+              label={({ name, pourcentage }: { name?: string; pourcentage?: number }) =>
+                `${name} (${pourcentage}%)`
+              }
            >
              {pieData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
            <Tooltip
-              formatter={(value: any, name: any) => [`${value} saisies`, name]}
+              formatter={(value: ValueType | undefined, name: NameType | undefined) =>
+                [`${value} saisies`, name]
+              }
              contentStyle={{
                backgroundColor: 'rgba(255,255,255,0.95)',
                border: 'none',
@@ -139,7 +144,7 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
                borderRadius: '12px',
                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
              }}
-              formatter={(value: any) => [`${Number(value).toFixed(1)}`, 'Intensité moyenne']}
+              formatter={(value: ValueType | undefined) => [`${Number(value).toFixed(1)}`, 'Intensité moyenne']}
            />
            <Bar dataKey="intensite" fill="#fce117" radius={[6, 6, 0, 0]} />
          </BarChart>
@@ -0,0 +1,68 @@
+"use client";
+
+import { AlertTriangle } from "lucide-react";
+import Modal from "./Modal";
+import Button from "./Button";
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export default function ConfirmDialog({
+  isOpen,
+  title = "Confirmation",
+  message,
+  confirmLabel = "Confirmer",
+  cancelLabel = "Annuler",
+  destructive = false,
+  onConfirm,
+  onClose,
+}: ConfirmDialogProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
+      <div className="flex items-start gap-3 mb-6">
+        <div
+          className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${
+            destructive
+              ? "bg-red-50 dark:bg-red-950/40"
+              : "bg-malachite-50 dark:bg-malachite-950/40"
+          }`}
+        >
+          <AlertTriangle
+            size={20}
+            className={
+              destructive
+                ? "text-red-600 dark:text-red-400"
+                : "text-malachite-600 dark:text-malachite-400"
+            }
+          />
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed pt-1">
+          {message}
+        </p>
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="ghost" onClick={onClose}>
+          {cancelLabel}
+        </Button>
+        <Button
+          variant={destructive ? "danger" : "primary"}
+          onClick={() => {
+            onConfirm();
+            onClose();
+          }}
+        >
+          {confirmLabel}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
@@ -23,6 +23,7 @@ export interface Emotion {
  icone: string | null;
  niveau: number;
  parent_id: number | null;
+  parent?: Emotion | null;
  est_actif: boolean;
  enfants?: Emotion[];
 }