chore: Application du design system

This commit is contained in:
Luc SORIGNET
2026-04-05 12:00:34 +02:00
parent f9c0585b30
commit 2ef71f99c3
124 changed files with 1619 additions and 1508 deletions

View File

@ -1,7 +1,5 @@
'use client';
import React, { useState, useEffect } from 'react';
import Tab from '@/components/Tab';
import TabContent from '@/components/TabContent';
import Button from '@/components/Form/Button';
import InputText from '@/components/Form/InputText';
import CheckBox from '@/components/Form/CheckBox'; // Import du composant CheckBox
@ -13,13 +11,8 @@ import {
import { useEstablishment } from '@/context/EstablishmentContext';
import { useCsrfToken } from '@/context/CsrfContext'; // Import du hook pour récupérer le csrfToken
import { useNotification } from '@/context/NotificationContext';
import { useSearchParams } from 'next/navigation'; // Ajoute cet import
export default function SettingsPage() {
const [activeTab, setActiveTab] = useState('smtp');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [smtpServer, setSmtpServer] = useState('');
const [smtpPort, setSmtpPort] = useState('');
const [smtpUser, setSmtpUser] = useState('');
@ -29,23 +22,10 @@ export default function SettingsPage() {
const { selectedEstablishmentId } = useEstablishment();
const csrfToken = useCsrfToken(); // Récupération du csrfToken
const { showNotification } = useNotification();
const searchParams = useSearchParams();
const handleTabClick = (tab) => {
setActiveTab(tab);
};
// Ajout : sélection automatique de l'onglet via l'ancre ou le paramètre de recherche
useEffect(() => {
const tabParam = searchParams.get('tab');
if (tabParam === 'smtp') {
setActiveTab('smtp');
}
}, [searchParams]);
// Charger les paramètres SMTP existants
useEffect(() => {
if (activeTab === 'smtp') {
if (csrfToken && selectedEstablishmentId) {
fetchSmtpSettings(csrfToken, selectedEstablishmentId) // Passer le csrfToken ici
.then((data) => {
setSmtpServer(data.smtp_server || '');
@ -75,7 +55,7 @@ export default function SettingsPage() {
}
});
}
}, [activeTab, csrfToken]); // Ajouter csrfToken comme dépendance
}, [csrfToken, selectedEstablishmentId]);
const handleSmtpServerChange = (e) => {
setSmtpServer(e.target.value);
@ -128,66 +108,63 @@ export default function SettingsPage() {
};
return (
<div className="p-8">
<div className="flex space-x-4 mb-4">
<Tab
text="Paramètres SMTP"
active={activeTab === 'smtp'}
onClick={() => handleTabClick('smtp')}
/>
</div>
<div className="mt-4">
<TabContent isActive={activeTab === 'smtp'}>
<form onSubmit={handleSmtpSubmit}>
<div className="grid grid-cols-2 gap-4">
<InputText
label="Serveur SMTP"
value={smtpServer}
onChange={handleSmtpServerChange}
<div className="p-6">
<h1 className="font-headline text-2xl font-bold text-gray-900 mb-6">
Paramètres
</h1>
<div className="bg-white rounded-md border border-gray-200 shadow-sm p-6">
<h2 className="font-headline text-lg font-semibold text-gray-800 mb-4">
Paramètres SMTP
</h2>
<form onSubmit={handleSmtpSubmit}>
<div className="grid grid-cols-2 gap-4">
<InputText
label="Serveur SMTP"
value={smtpServer}
onChange={handleSmtpServerChange}
/>
<InputText
label="Port SMTP"
value={smtpPort}
onChange={handleSmtpPortChange}
/>
<InputText
label="Utilisateur SMTP"
value={smtpUser}
onChange={handleSmtpUserChange}
/>
<InputText
label="Mot de passe SMTP"
type="password"
value={smtpPassword}
onChange={handleSmtpPasswordChange}
/>
</div>
<div className="mt-6 border-t pt-4">
<div className="flex items-center space-x-4">
<CheckBox
item={{ id: 'useTls' }}
formData={{ useTls }}
handleChange={() => setUseTls((prev) => !prev)} // Inverser la valeur booléenne
fieldName="useTls"
itemLabelFunc={() => 'Utiliser TLS'}
/>
<InputText
label="Port SMTP"
value={smtpPort}
onChange={handleSmtpPortChange}
/>
<InputText
label="Utilisateur SMTP"
value={smtpUser}
onChange={handleSmtpUserChange}
/>
<InputText
label="Mot de passe SMTP"
type="password"
value={smtpPassword}
onChange={handleSmtpPasswordChange}
<CheckBox
item={{ id: 'useSsl' }}
formData={{ useSsl }}
handleChange={() => setUseSsl((prev) => !prev)} // Inverser la valeur booléenne
fieldName="useSsl"
itemLabelFunc={() => 'Utiliser SSL'}
/>
</div>
<div className="mt-6 border-t pt-4">
<div className="flex items-center space-x-4">
<CheckBox
item={{ id: 'useTls' }}
formData={{ useTls }}
handleChange={() => setUseTls((prev) => !prev)} // Inverser la valeur booléenne
fieldName="useTls"
itemLabelFunc={() => 'Utiliser TLS'}
/>
<CheckBox
item={{ id: 'useSsl' }}
formData={{ useSsl }}
handleChange={() => setUseSsl((prev) => !prev)} // Inverser la valeur booléenne
fieldName="useSsl"
itemLabelFunc={() => 'Utiliser SSL'}
/>
</div>
</div>
<Button
type="submit"
primary
text="Mettre à jour"
className="mt-6"
></Button>
</form>
</TabContent>
</div>
<Button
type="submit"
primary
text="Mettre à jour"
className="mt-6"
></Button>
</form>
</div>
</div>
);