Frontend : consommation de l'API CRUD (matrice, affectations, validation)
Remplace le magasin d'état fabriqué par une vraie couche API typée, alignée sur le back-end (Étape 5) : - src/api/ : schema.ts (miroir de backend/app/api/schemas.py), client HTTP, implémentation mock en mémoire (même surface + portage du moteur de validation), sélection mock/http via VITE_API_MODE, hooks React Query (lectures + mutations avec invalidation). - Grille des besoins ← GET /matrix ; treillis de colonnes dérivé des créneaux réels (plus de plages figées). - Panneau d'affectation ← GET /assignments?shift_id, POST /assignments/validate par candidat (alertes bloquantes / avertissements du moteur), POST / PATCH / DELETE /assignments. - Vue par bénévole ← volunteers + shifts + assignments (surcharge / oubliés calculés côté client). - Confirmations (ex-« Publication ») ← affectations PROPOSED ; publication versionnée et emails signalés hors périmètre. - Mobiles ← assignments filtrées ; confirmation = PATCH ; pointage référent local (hors périmètre). - Configuration ← positions & shifts CRUD (min/idéal, ajout/retrait), volunteers CRUD dont suppression RGPD ; messages = maquette locale. - i18n mis à jour, aucun texte d'interface en dur. - Vérifs : build tsc + vite, eslint (0 problème), npm run smoke (API mock + rendu headless des 6 écrans avec données préchargées). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AwswqSChc3Rwtu61pRXiY2
This commit is contained in:
AdamThomas
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
ac469f0cd1
commit
c9dda65361
@@ -0,0 +1,293 @@
|
||||
import { hoursBetween } from '@/lib/time';
|
||||
|
||||
import type {
|
||||
AssignmentRead,
|
||||
AssignmentStatus,
|
||||
PositionCategory,
|
||||
PositionRead,
|
||||
ShiftRead,
|
||||
VolunteerRead,
|
||||
} from '../schema';
|
||||
|
||||
// Jeu de démonstration déterministe, mis en forme comme les réponses de l'API.
|
||||
// Sert quand `VITE_API_MODE=mock` (défaut tant que le back-end n'a pas de seed).
|
||||
|
||||
export const MOCK_EDITION_ID = '00000000-0000-4000-8000-000000000001';
|
||||
|
||||
export interface MockState {
|
||||
volunteers: VolunteerRead[];
|
||||
positions: PositionRead[];
|
||||
shifts: ShiftRead[];
|
||||
assignments: AssignmentRead[];
|
||||
/** volunteerId -> clés « YYYY-MM-DD|HH:MM » déclarées disponibles (privé au mock). */
|
||||
availability: Map<string, Set<string>>;
|
||||
seq: number;
|
||||
}
|
||||
|
||||
const DAY_DATES = ['2026-10-15', '2026-10-16', '2026-10-17', '2026-10-18'];
|
||||
const PART_BOUNDS: Array<[string, number, number]> = [
|
||||
['M', 8, 12],
|
||||
['A', 12, 17],
|
||||
['S', 17, 22],
|
||||
['N', 22, 26], // 26 => 02 h le lendemain
|
||||
];
|
||||
|
||||
type RawSlots = Record<string, Array<[string, number, number]>>;
|
||||
|
||||
interface RawPosition {
|
||||
id: string;
|
||||
category: PositionCategory;
|
||||
name: string;
|
||||
location: string;
|
||||
requiredSkills?: string[];
|
||||
slots: RawSlots;
|
||||
}
|
||||
|
||||
const RAW_POSITIONS: RawPosition[] = [
|
||||
{ id: 'BAR', category: 'BAR', name: 'Bar — Grande scène', location: 'Chapiteau nord', slots: { '2026-10-16': [['A', 3, 4], ['S', 4, 6], ['N', 3, 5]], '2026-10-17': [['A', 3, 4], ['S', 5, 6], ['N', 4, 5]], '2026-10-18': [['M', 2, 3]] } },
|
||||
{ id: 'BARV', category: 'BAR', name: 'Bar — Village assos', location: 'Village est', slots: { '2026-10-16': [['A', 2, 3], ['S', 3, 4]], '2026-10-17': [['A', 2, 3], ['S', 3, 4], ['N', 2, 3]], '2026-10-18': [['M', 2, 2]] } },
|
||||
{ id: 'BILA', category: 'TICKETING', name: 'Billetterie — Entrée A', location: 'Portail est', requiredSkills: ['CAISSE'], slots: { '2026-10-16': [['A', 4, 5], ['S', 3, 4]], '2026-10-17': [['A', 4, 5], ['S', 3, 4]] } },
|
||||
{ id: 'BILB', category: 'TICKETING', name: 'Billetterie — Entrée B', location: 'Portail ouest', requiredSkills: ['CAISSE'], slots: { '2026-10-16': [['A', 2, 3], ['S', 2, 3]], '2026-10-17': [['A', 3, 4], ['S', 2, 3]] } },
|
||||
{ id: 'ACCB', category: 'WELCOME', name: 'Accueil — Bénévoles', location: 'Base bénévoles', slots: { '2026-10-15': [['M', 2, 3], ['A', 2, 3]], '2026-10-16': [['M', 2, 2], ['A', 2, 3], ['S', 2, 3]], '2026-10-17': [['M', 2, 2], ['A', 2, 3], ['S', 2, 3]], '2026-10-18': [['M', 2, 2]] } },
|
||||
{ id: 'ACCA', category: 'WELCOME', name: 'Accueil — Artistes', location: 'Loges', slots: { '2026-10-16': [['A', 2, 2], ['S', 2, 3]], '2026-10-17': [['A', 2, 2], ['S', 2, 3]] } },
|
||||
{ id: 'PARN', category: 'PARKING', name: 'Parking — Nord', location: 'Route de Bréal', slots: { '2026-10-16': [['A', 3, 4], ['S', 3, 4], ['N', 2, 3]], '2026-10-17': [['A', 3, 4], ['S', 4, 5], ['N', 2, 3]] } },
|
||||
{ id: 'PARS', category: 'PARKING', name: 'Parking — Sud', location: 'Chemin des Prés', slots: { '2026-10-16': [['A', 2, 3], ['S', 2, 3]], '2026-10-17': [['A', 2, 3], ['S', 3, 4], ['N', 2, 2]] } },
|
||||
{ id: 'PROS', category: 'CLEANING', name: 'Propreté — Site', location: 'Ensemble du site', slots: { '2026-10-16': [['S', 2, 3], ['N', 3, 4]], '2026-10-17': [['M', 3, 4], ['S', 2, 3], ['N', 3, 5]], '2026-10-18': [['M', 4, 6], ['A', 4, 6]] } },
|
||||
{ id: 'PROA', category: 'CLEANING', name: 'Propreté — Sanitaires', location: 'Blocs 1 à 4', slots: { '2026-10-16': [['A', 2, 2], ['S', 2, 3], ['N', 2, 2]], '2026-10-17': [['M', 2, 2], ['A', 2, 2], ['S', 2, 3], ['N', 2, 2]] } },
|
||||
{ id: 'CATB', category: 'CATERING', name: 'Catering — Bénévoles', location: 'Tente cuisine', slots: { '2026-10-15': [['M', 2, 3], ['A', 2, 3]], '2026-10-16': [['M', 2, 3], ['A', 3, 4], ['S', 3, 4]], '2026-10-17': [['M', 2, 3], ['A', 3, 4], ['S', 3, 4]], '2026-10-18': [['M', 2, 3], ['A', 2, 2]] } },
|
||||
{ id: 'CATA', category: 'CATERING', name: 'Catering — Artistes', location: 'Backstage', slots: { '2026-10-16': [['A', 2, 2], ['S', 2, 3]], '2026-10-17': [['A', 2, 2], ['S', 2, 3]] } },
|
||||
{ id: 'MONS', category: 'SETUP', name: 'Montage — Scène', location: 'Grande scène', requiredSkills: ['CARISTE'], slots: { '2026-10-15': [['M', 6, 8], ['A', 6, 8], ['S', 4, 5]], '2026-10-18': [['A', 6, 8], ['S', 4, 6]] } },
|
||||
{ id: 'MONI', category: 'SETUP', name: 'Montage — Signalétique', location: 'Site entier', slots: { '2026-10-15': [['M', 3, 4], ['A', 3, 4]], '2026-10-18': [['A', 3, 4]] } },
|
||||
{ id: 'REG', category: 'STAGE', name: 'Régie — Régie centrale', location: 'Cabane régie', requiredSkills: ['REGIE'], slots: { '2026-10-16': [['A', 2, 2], ['S', 2, 3], ['N', 2, 2]], '2026-10-17': [['A', 2, 2], ['S', 2, 3], ['N', 2, 2]] } },
|
||||
];
|
||||
|
||||
const FIRST_NAMES = [
|
||||
'Camille', 'Yanis', 'Léa', 'Mathis', 'Soraya', 'Thomas', 'Awa', 'Julien', 'Chloé', 'Nadia',
|
||||
'Hugo', 'Inès', 'Baptiste', 'Manon', 'Karim', 'Élodie', 'Rémi', 'Sarah', 'Antoine', 'Fanny',
|
||||
'Malik', 'Clara', 'Victor', 'Jeanne',
|
||||
];
|
||||
const LAST_NAMES = [
|
||||
'Fournier', 'Berger', 'Moreau', 'Lambert', 'Benali', 'Rey', 'Diallo', 'Chevalier', 'Marchand',
|
||||
'Perrin', 'Lefèvre', 'Nguyen', 'Rossi', 'Garnier', 'Barbier', 'Vasseur', 'Colin', 'Prévost',
|
||||
'Renard', 'Dupuy',
|
||||
];
|
||||
const SKILL_POOL = ['CAISSE', 'CARISTE', 'REGIE', 'SECOURISME'];
|
||||
|
||||
const NOW = '2026-10-10T09:00:00';
|
||||
const NEVER_ASSIGNED = new Set([7, 21, 34, 48, 55]);
|
||||
const OVERLOADED = [3, 9];
|
||||
|
||||
function mulberry32(seed: number): () => number {
|
||||
let a = seed;
|
||||
return () => {
|
||||
a |= 0;
|
||||
a = (a + 0x6d2b79f5) | 0;
|
||||
let t = Math.imul(a ^ (a >>> 15), 1 | a);
|
||||
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
}
|
||||
|
||||
function iso(dateStr: string, hour: number): string {
|
||||
if (hour >= 24) {
|
||||
const [y, m, d] = dateStr.split('-').map(Number);
|
||||
const next = new Date(Date.UTC(y, m - 1, d + 1)).toISOString().slice(0, 10);
|
||||
return `${next}T${String(hour - 24).padStart(2, '0')}:00:00`;
|
||||
}
|
||||
return `${dateStr}T${String(hour).padStart(2, '0')}:00:00`;
|
||||
}
|
||||
|
||||
function rollStatus(roll: number): AssignmentStatus {
|
||||
if (roll < 0.72) return 'CONFIRMED';
|
||||
if (roll < 0.95) return 'PROPOSED';
|
||||
return 'DECLINED';
|
||||
}
|
||||
|
||||
function demoEmail(firstName: string, lastName: string): string {
|
||||
const n = (s: string) => s.toLowerCase().normalize('NFD').replace(/[^a-z]/g, '');
|
||||
return `${n(firstName)}.${n(lastName)}@mail.fr`;
|
||||
}
|
||||
|
||||
export function buildMockState(): MockState {
|
||||
const rnd = mulberry32(20260715);
|
||||
const edition_id = MOCK_EDITION_ID;
|
||||
|
||||
const positions: PositionRead[] = RAW_POSITIONS.map((p) => ({
|
||||
id: p.id,
|
||||
edition_id,
|
||||
name: p.name,
|
||||
location: p.location,
|
||||
category: p.category,
|
||||
lead_account_id: null,
|
||||
created_at: NOW,
|
||||
updated_at: NOW,
|
||||
}));
|
||||
|
||||
const shifts: ShiftRead[] = [];
|
||||
let shiftSeq = 1;
|
||||
for (const raw of RAW_POSITIONS) {
|
||||
for (const [dateStr, slots] of Object.entries(raw.slots)) {
|
||||
for (const [code, min_staff, ideal_staff] of slots) {
|
||||
const bounds = PART_BOUNDS.find((b) => b[0] === code)!;
|
||||
shifts.push({
|
||||
id: `s${shiftSeq}`,
|
||||
edition_id,
|
||||
position_id: raw.id,
|
||||
starts_at: iso(dateStr, bounds[1]),
|
||||
ends_at: iso(dateStr, bounds[2]),
|
||||
min_staff,
|
||||
ideal_staff,
|
||||
required_skill_codes: raw.requiredSkills ?? [],
|
||||
created_at: NOW,
|
||||
updated_at: NOW,
|
||||
});
|
||||
shiftSeq += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const volunteers: VolunteerRead[] = [];
|
||||
const availability = new Map<string, Set<string>>();
|
||||
for (let i = 0; i < 64; i += 1) {
|
||||
const first_name = FIRST_NAMES[i % FIRST_NAMES.length];
|
||||
const last_name = LAST_NAMES[(i * 7 + 3) % LAST_NAMES.length];
|
||||
const id = `v${i}`;
|
||||
const avail = new Set<string>();
|
||||
for (const dateStr of DAY_DATES) {
|
||||
const edge = dateStr === DAY_DATES[0] || dateStr === DAY_DATES[3];
|
||||
for (const [, startHour] of PART_BOUNDS) {
|
||||
if (rnd() < (edge ? 0.4 : 0.6)) {
|
||||
avail.add(`${dateStr}|${String(startHour).padStart(2, '0')}:00`);
|
||||
}
|
||||
}
|
||||
}
|
||||
availability.set(id, avail);
|
||||
const pair = () => `0${Math.floor(rnd() * 90 + 10)}`.slice(-2);
|
||||
const skill_codes = rnd() < 0.3 ? [SKILL_POOL[Math.floor(rnd() * SKILL_POOL.length)]] : [];
|
||||
volunteers.push({
|
||||
id,
|
||||
edition_id,
|
||||
first_name,
|
||||
last_name,
|
||||
email: rnd() < 0.85 ? demoEmail(first_name, last_name) : null,
|
||||
phone: `06 ${pair()} ${pair()} ${pair()} ${pair()}`,
|
||||
tshirt_size: (['S', 'M', 'L', 'XL'] as const)[Math.floor(rnd() * 4)],
|
||||
diet: rnd() < 0.15 ? 'végétarien' : null,
|
||||
comment: null,
|
||||
skill_codes,
|
||||
created_at: NOW,
|
||||
updated_at: NOW,
|
||||
});
|
||||
}
|
||||
|
||||
const me = volunteers[0];
|
||||
availability.set(
|
||||
me.id,
|
||||
new Set(
|
||||
DAY_DATES.flatMap((dateStr) =>
|
||||
PART_BOUNDS.map(([, h]) => `${dateStr}|${String(h).padStart(2, '0')}:00`),
|
||||
),
|
||||
),
|
||||
);
|
||||
NEVER_ASSIGNED.forEach((i) => {
|
||||
volunteers[i].comment = 'Inscrit, pas encore affecté';
|
||||
});
|
||||
|
||||
const assignments: AssignmentRead[] = [];
|
||||
const busy = new Set<string>();
|
||||
const dayHours = new Map<string, number>();
|
||||
const totalHours = new Map<string, number>();
|
||||
let seq = 1;
|
||||
let slotIndex = 0;
|
||||
|
||||
for (const shift of shifts) {
|
||||
slotIndex += 1;
|
||||
let target = shift.ideal_staff;
|
||||
if (slotIndex % 7 === 0) target = Math.max(1, shift.min_staff - 1);
|
||||
else if (slotIndex % 5 === 0) target = shift.min_staff;
|
||||
else if (slotIndex % 3 === 0) target = Math.max(shift.min_staff, shift.ideal_staff - 1);
|
||||
|
||||
const duration = hoursBetween(shift.starts_at, shift.ends_at);
|
||||
const dateStr = shift.starts_at.slice(0, 10);
|
||||
const availKey = `${dateStr}|${shift.starts_at.slice(11, 16)}`;
|
||||
|
||||
const pool = volunteers
|
||||
.filter(
|
||||
(v, idx) =>
|
||||
!NEVER_ASSIGNED.has(idx) &&
|
||||
!busy.has(`${v.id}|${shift.id}`) &&
|
||||
(dayHours.get(`${v.id}|${dateStr}`) ?? 0) + duration <= 8,
|
||||
)
|
||||
.sort((a, b) => score(b) - score(a));
|
||||
|
||||
function score(v: VolunteerRead): number {
|
||||
const available = availability.get(v.id)?.has(availKey) ? 100 : 0;
|
||||
const skilled =
|
||||
shift.required_skill_codes.length > 0 &&
|
||||
shift.required_skill_codes.every((c) => v.skill_codes.includes(c))
|
||||
? 40
|
||||
: 0;
|
||||
return available + skilled - (totalHours.get(v.id) ?? 0) * 3;
|
||||
}
|
||||
|
||||
for (const v of pool.slice(0, target)) {
|
||||
const status = rollStatus(rnd());
|
||||
assignments.push({
|
||||
id: `a${seq}`,
|
||||
edition_id,
|
||||
volunteer_id: v.id,
|
||||
shift_id: shift.id,
|
||||
status,
|
||||
source: 'SOLVER',
|
||||
locked: false,
|
||||
created_at: NOW,
|
||||
updated_at: NOW,
|
||||
});
|
||||
seq += 1;
|
||||
if (status !== 'DECLINED') {
|
||||
busy.add(`${v.id}|${shift.id}`);
|
||||
dayHours.set(`${v.id}|${dateStr}`, (dayHours.get(`${v.id}|${dateStr}`) ?? 0) + duration);
|
||||
totalHours.set(v.id, (totalHours.get(v.id) ?? 0) + duration);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
assignments
|
||||
.filter((a) => a.volunteer_id === me.id)
|
||||
.forEach((a, i) => {
|
||||
a.status = i === 0 ? 'CONFIRMED' : 'PROPOSED';
|
||||
});
|
||||
|
||||
OVERLOADED.forEach((index) => {
|
||||
const v = volunteers[index];
|
||||
const friday = shifts.filter((s) => s.starts_at.slice(0, 10) === '2026-10-17');
|
||||
const shift = friday.find(
|
||||
(s) =>
|
||||
!assignments.some(
|
||||
(a) =>
|
||||
a.volunteer_id === v.id &&
|
||||
shiftsOverlap(shifts.find((x) => x.id === a.shift_id), s),
|
||||
),
|
||||
);
|
||||
if (!shift) return;
|
||||
assignments.push({
|
||||
id: `a${seq}`,
|
||||
edition_id,
|
||||
volunteer_id: v.id,
|
||||
shift_id: shift.id,
|
||||
status: 'CONFIRMED',
|
||||
source: 'MANUAL',
|
||||
locked: false,
|
||||
created_at: NOW,
|
||||
updated_at: NOW,
|
||||
});
|
||||
seq += 1;
|
||||
});
|
||||
|
||||
return { volunteers, positions, shifts, assignments, availability, seq };
|
||||
}
|
||||
|
||||
function shiftsOverlap(a: ShiftRead | undefined, b: ShiftRead): boolean {
|
||||
if (!a) return false;
|
||||
return a.starts_at < b.ends_at && b.starts_at < a.ends_at;
|
||||
}
|
||||
Reference in New Issue
Block a user