feat(frontend): full FR i18n via react-i18next + 2-tab engagement detail (sprint 12) #14
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user