Antho
82a1b93211
Les boutons Modifier et Désactiver de la page Administration n'appelaient rien : handleDelete se contentait d'un console.log et le bouton Enregistrer de la modale ne faisait que la refermer. L'écran donnait l'illusion d'un CRUD. Branche les 4 onglets sur les endpoints POST/PUT/DELETE ajoutés côté API, avec confirmation avant suppression, rechargement après enregistrement et remontée des erreurs de l'API (dont le refus 409 quand des enregistrements sont rattachés). Les 4 blocs de colonnes de tableau, quasi identiques d'un onglet à l'autre, laissent place à une description déclarative (referentielsConfig.js) : un seul tableau et un seul formulaire générique (ReferentielForm) servent les 4 référentiels. Les colonnes qui portaient un identifiant brut affichent maintenant le libellé. La modale, jusqu'ici déclarée dans Admin.jsx, devient un composant commun réutilisable.
120 lines
2.0 KiB
CSS
120 lines
2.0 KiB
CSS
/* src/pages/Admin/Admin.module.css */
|
|
|
|
.page {
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--color-gray-border);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.tab {
|
|
padding: 12px 24px;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--color-text-secondary);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.tab:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--color-primary);
|
|
border-bottom-color: var(--color-primary);
|
|
}
|
|
|
|
.tabContent {
|
|
background-color: var(--color-white);
|
|
border-radius: var(--radius);
|
|
padding: 24px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.header h2 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
margin: 0;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.actionBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-link);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.actionBtn:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* Formulaire de la modale (le conteneur vit dans Modal.module.css) */
|
|
.field {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--color-gray-border);
|
|
border-radius: var(--radius);
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
color: var(--color-text);
|
|
background-color: var(--color-white);
|
|
}
|
|
|
|
.input:focus {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.modalActions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
} |