feat(frontend): full FR i18n via react-i18next + 2-tab engagement detail (sprint 12) #14

Merged
knacky merged 14 commits from sprint/12-i18n-fr into main 2026-06-22 08:25:51 +00:00
6 changed files with 15 additions and 11 deletions
Showing only changes of commit ac0bc8d1b2 - Show all commits

View File

@@ -124,7 +124,7 @@ export function Layout(): JSX.Element {
{/* footer — fixed dark slab, never inverts */}
<footer className="bg-slab text-slab-text">
<div className="mx-auto w-full max-w-page px-xl py-xl text-[12px] text-slab-muted">
Mimic Internal Purple Team tooling. Authorized engagements only.
{t('nav.footer')}
</div>
</footer>
</div>

View File

@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
import type { SimulationStatus } from '@/api/types';
import { simulationStatusLabel } from '@/i18n/status';
const STYLES: Record<SimulationStatus, string> = {
pending: 'bg-cloud text-graphite border border-hairline',
@@ -9,13 +9,14 @@ const STYLES: Record<SimulationStatus, string> = {
};
export function SimulationStatusBadge({ status }: { status: SimulationStatus }): JSX.Element {
const { t } = useTranslation();
return (
<span
className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
data-testid="simulation-status-badge"
data-status={status}
>
{simulationStatusLabel(status)}
{t(`status.simulation.${status}`)}
</span>
);
}

View File

@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
import type { EngagementStatus } from '@/api/types';
import { engagementStatusLabel } from '@/i18n/status';
const STYLES: Record<EngagementStatus, string> = {
planned: 'bg-warn-soft text-warn border border-warn',
@@ -8,13 +8,14 @@ const STYLES: Record<EngagementStatus, string> = {
};
export function StatusBadge({ status }: { status: EngagementStatus }): JSX.Element {
const { t } = useTranslation();
return (
<span
className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
data-testid="status-badge"
data-status={status}
>
{engagementStatusLabel(status)}
{t(`status.engagement.${status}`)}
</span>
);
}

View File

@@ -23,7 +23,8 @@
"templates": "Templates",
"users": "Utilisateurs",
"signOut": "Se déconnecter",
"brand": "Mimic"
"brand": "Mimic",
"footer": "Mimic — Outillage interne Purple Team. Engagements autorisés uniquement."
},
"auth": {
"login": {

View File

@@ -12,7 +12,7 @@ import { SimulationList } from '@/components/SimulationList';
import { ExportEngagementButton } from '@/components/ExportEngagementButton';
import { BackLink } from '@/components/BackLink';
import { Tabs } from '@/components/Tabs';
import { formatDateTime } from '@/lib/format';
import { formatDate } from '@/lib/format';
type TabId = 'description' | 'simulations';
@@ -78,13 +78,13 @@ export function EngagementDetailPage(): JSX.Element {
<header className="flex items-start justify-between gap-md">
<dl className="grid grid-cols-2 gap-x-lg gap-y-xxs text-caption-md">
<dt className="text-graphite">{t('engagement.detail.schedule.startDate')}</dt>
<dd className="font-mono">{eng.start_date}</dd>
<dd className="font-mono">{formatDate(eng.start_date)}</dd>
<dt className="text-graphite">{t('engagement.detail.schedule.endDate')}</dt>
<dd className="font-mono">{eng.end_date ?? '—'}</dd>
<dd className="font-mono">{eng.end_date ? formatDate(eng.end_date) : '—'}</dd>
<dt className="text-graphite">{t('engagement.detail.schedule.status')}</dt>
<dd><StatusBadge status={eng.status} /></dd>
<dt className="text-graphite">{t('engagement.detail.schedule.createdAt')}</dt>
<dd className="font-mono">{formatDateTime(eng.created_at)}</dd>
<dd className="font-mono">{formatDate(eng.created_at)}</dd>
</dl>
{canEditEngagements ? (
<Link to={`/engagements/${eng.id}/edit`} className="btn-outline shrink-0">

View File

@@ -1,4 +1,5 @@
import { Fragment, useState, type FormEvent } from 'react';
import { formatDate } from '@/lib/format';
import { useTranslation } from 'react-i18next';
import { extractApiError } from '@/api/client';
import type { Role, User } from '@/api/types';
@@ -225,7 +226,7 @@ export function UsersAdminPage(): JSX.Element {
disabled={patchMutation.isPending}
/>
</td>
<td className="text-charcoal font-mono">{u.created_at}</td>
<td className="text-charcoal font-mono">{formatDate(u.created_at)}</td>
<td className="text-right">
<div className="inline-flex gap-sm">
<button