init projet
This commit is contained in:
@@ -0,0 +1,230 @@
|
||||
// src/pages/Admin/Admin.jsx
|
||||
// Page Administration : onglets pour gérer monitorings, services, catégories, contacts
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Plus, Edit, Trash2 } from 'lucide-react';
|
||||
import { getMonitorings, getServices, getCategories, getContacts } from '../../services/api';
|
||||
import DataTable from '../../components/common/DataTable';
|
||||
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import Button from '../../components/common/Button';
|
||||
import styles from './Admin.module.css';
|
||||
|
||||
/* Modale générique pour ajouter/modifier */
|
||||
function Modal({ isOpen, onClose, title, children }) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.modalOverlay} onClick={onClose}>
|
||||
<div className={styles.modal} onClick={e => e.stopPropagation()}>
|
||||
<div className={styles.modalHeader}>
|
||||
<h2>{title}</h2>
|
||||
<button className={styles.closeBtn} onClick={onClose}>×</button>
|
||||
</div>
|
||||
<div className={styles.modalBody}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Admin() {
|
||||
const [activeTab, setActiveTab] = useState('monitorings');
|
||||
const [data, setData] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreur, setErreur] = useState('');
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setErreur('');
|
||||
try {
|
||||
const [monitorings, services, categories, contacts] = await Promise.all([
|
||||
getMonitorings(),
|
||||
getServices(),
|
||||
getCategories(),
|
||||
getContacts()
|
||||
]);
|
||||
setData({
|
||||
monitorings: Array.isArray(monitorings) ? monitorings : [],
|
||||
services: Array.isArray(services) ? services : [],
|
||||
categories: Array.isArray(categories) ? categories : [],
|
||||
contacts: Array.isArray(contacts) ? contacts : []
|
||||
});
|
||||
} catch (e) {
|
||||
setErreur(e.message || 'Erreur lors du chargement des données administratives.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
function handleAdd() {
|
||||
setEditingItem(null);
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function handleEdit(item) {
|
||||
setEditingItem(item);
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
// Simulation de suppression (pas d'API pour ça)
|
||||
console.log('Supprimer', item);
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'monitorings', label: 'Monitorings' },
|
||||
{ key: 'services', label: 'Services' },
|
||||
{ key: 'categories', label: 'Catégories' },
|
||||
{ key: 'contacts', label: 'Contacts' }
|
||||
];
|
||||
|
||||
const columns = {
|
||||
monitorings: [
|
||||
{ key: 'monito_intitule', label: 'Nom' },
|
||||
{ key: 'id_service', label: 'Service' },
|
||||
{ key: 'id_categorie', label: 'Catégorie' },
|
||||
{ key: 'bdd_source', label: 'Source' },
|
||||
{ key: 'table_source', label: 'Table' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
],
|
||||
services: [
|
||||
{ key: 'nom_service', label: 'Nom' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
],
|
||||
categories: [
|
||||
{ key: 'intitule_categorie', label: 'Nom' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
],
|
||||
contacts: [
|
||||
{ key: 'intitule_contact', label: 'Intitulé' },
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'mail', label: 'Email' },
|
||||
{ key: 'id_service', label: 'Service' },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
if (loading) return <LoadingSpinner message="Chargement des données administratives..." />;
|
||||
if (erreur) return <ErrorMessage message={erreur} />;
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<h1 className={styles.title}>Administration</h1>
|
||||
|
||||
{/* Onglets */}
|
||||
<div className={styles.tabs}>
|
||||
{tabs.map(tab => (
|
||||
<button
|
||||
key={tab.key}
|
||||
className={`${styles.tab} ${activeTab === tab.key ? styles.active : ''}`}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contenu de l'onglet actif */}
|
||||
<div className={styles.tabContent}>
|
||||
<div className={styles.header}>
|
||||
<h2>{tabs.find(t => t.key === activeTab)?.label}</h2>
|
||||
<Button variant="primary" onClick={handleAdd}>
|
||||
<Plus size={14} />
|
||||
Ajouter
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns[activeTab]}
|
||||
data={data[activeTab] || []}
|
||||
pageSize={50}
|
||||
emptyMessage={`Aucun ${activeTab.slice(0, -1)} trouvé.`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Modale */}
|
||||
<Modal
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
title={`${editingItem ? 'Modifier' : 'Ajouter'} ${tabs.find(t => t.key === activeTab)?.label.slice(0, -1)}`}
|
||||
>
|
||||
<p>Formulaire à implémenter selon les besoins.</p>
|
||||
<div className={styles.modalActions}>
|
||||
<Button variant="secondary" onClick={() => setModalOpen(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => setModalOpen(false)}>
|
||||
Enregistrer
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Modale */
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius);
|
||||
border-top: 4px solid var(--color-primary);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--color-gray-border);
|
||||
}
|
||||
|
||||
.modalHeader h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modalActions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import ServiceMonitorings from '../ServiceMonitorings/ServiceMonitorings';
|
||||
|
||||
export default function Contrat() {
|
||||
return <ServiceMonitorings serviceLabel="Contrat" serviceName="Contrat" />;
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
/* Page principale du dashboard : KPI cards + grille de monitorings */
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { getDashboard, getDashboardSummary, getServices, getCategories } from '../../services/api';
|
||||
import MonitoringCard from '../../components/common/MonitoringCard';
|
||||
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import styles from './Dashboard.module.css';
|
||||
|
||||
/* Carte KPI affichant un indicateur clé */
|
||||
function KpiCard({ label, value, color }) {
|
||||
return (
|
||||
<div className={styles.kpiCard}>
|
||||
<span className={styles.kpiValue} style={{ color }}>{value}</span>
|
||||
<span className={styles.kpiLabel}>{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [summary, setSummary] = useState(null);
|
||||
const [monitorings, setMonitorings] = useState([]);
|
||||
const [services, setServices] = useState([]);
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [filtreService, setFiltreService] = useState('');
|
||||
const [filtreCategorie, setFiltreCategorie] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreur, setErreur] = useState('');
|
||||
|
||||
/* Chargement initial des filtres */
|
||||
useEffect(() => {
|
||||
async function loadFiltres() {
|
||||
try {
|
||||
const [svcs, cats] = await Promise.all([getServices(), getCategories()]);
|
||||
setServices(svcs);
|
||||
setCategories(cats);
|
||||
} catch {
|
||||
/* Non bloquant, les filtres restent vides */
|
||||
}
|
||||
}
|
||||
loadFiltres();
|
||||
}, []);
|
||||
|
||||
/* Chargement des données dashboard */
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setErreur('');
|
||||
try {
|
||||
const [sum, data] = await Promise.all([
|
||||
getDashboardSummary(),
|
||||
getDashboard(filtreService, filtreCategorie),
|
||||
]);
|
||||
setSummary(sum);
|
||||
setMonitorings(Array.isArray(data) ? data : []);
|
||||
} catch (e) {
|
||||
setErreur(e.message || 'Erreur lors du chargement du dashboard.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filtreService, filtreCategorie]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.pageHeader}>
|
||||
<h1 className={styles.title}>Dashboard</h1>
|
||||
<button className={styles.refreshBtn} onClick={loadData} disabled={loading}>
|
||||
<RefreshCw size={14} className={loading ? styles.spinning : ''} />
|
||||
Actualiser
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
{summary && (
|
||||
<div className={styles.kpiGrid}>
|
||||
<KpiCard
|
||||
label="Total monitorings"
|
||||
value={summary.total ?? 0}
|
||||
color="var(--color-text)"
|
||||
/>
|
||||
<KpiCard
|
||||
label="Sans erreur"
|
||||
value={summary.ok ?? 0}
|
||||
color="var(--color-ok)"
|
||||
/>
|
||||
<KpiCard
|
||||
label="En erreur"
|
||||
value={summary.critical ?? 0}
|
||||
color="var(--color-primary)"
|
||||
/>
|
||||
<KpiCard
|
||||
label="Total erreurs"
|
||||
value={summary.total_erreurs ?? 0}
|
||||
color="var(--color-warning)"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filtres */}
|
||||
<div className={styles.filtres}>
|
||||
<select
|
||||
className={styles.select}
|
||||
value={filtreService}
|
||||
onChange={e => setFiltreService(e.target.value)}
|
||||
>
|
||||
<option value="">Tous les services</option>
|
||||
{services.map(s => (
|
||||
<option key={s.id_service} value={s.nom_service}>{s.nom_service}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className={styles.select}
|
||||
value={filtreCategorie}
|
||||
onChange={e => setFiltreCategorie(e.target.value)}
|
||||
>
|
||||
<option value="">Toutes les catégories</option>
|
||||
{categories.map(c => (
|
||||
<option key={c.id_categorie} value={c.intitule_categorie}>{c.intitule_categorie}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Contenu principal */}
|
||||
{loading ? (
|
||||
<LoadingSpinner message="Chargement du dashboard..." />
|
||||
) : erreur ? (
|
||||
<ErrorMessage message={erreur} onRetry={loadData} />
|
||||
) : (
|
||||
<>
|
||||
{monitorings.length === 0 ? (
|
||||
<p className={styles.empty}>Aucun monitoring trouvé pour ces filtres.</p>
|
||||
) : (
|
||||
<div className={styles.grid}>
|
||||
{monitorings.map(m => (
|
||||
<MonitoringCard key={m.id} monitoring={m} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/* src/pages/Dashboard/Dashboard.module.css */
|
||||
|
||||
.page {
|
||||
padding: 24px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pageHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.refreshBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border, #333);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.refreshBtn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.kpiGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.kpiCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: var(--color-white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.kpiValue {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.kpiLabel {
|
||||
font-size: 12px;
|
||||
color: var(--color-muted, #888);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.filtres {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 8px 12px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border, #333);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--color-muted, #888);
|
||||
font-size: 14px;
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import ServiceMonitorings from '../ServiceMonitorings/ServiceMonitorings';
|
||||
|
||||
export default function Fournisseur() {
|
||||
return <ServiceMonitorings serviceLabel="Fournisseur" serviceName="Fournisseur" />;
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
// src/pages/Historique/Historique.jsx
|
||||
// Page Historique : filtres + graphique ligne + tableau résumé
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, ComposedChart } from 'recharts';
|
||||
import { getMonitorings, getHistorique, getHistoriqueEvolution, getEvolutionGlobal, exportToCSV } from '../../services/api';
|
||||
import DataTable from '../../components/common/DataTable';
|
||||
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import Button from '../../components/common/Button';
|
||||
import styles from './Historique.module.css';
|
||||
|
||||
export default function Historique() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const [monitorings, setMonitorings] = useState([]);
|
||||
const [selectedMonitoring, setSelectedMonitoring] = useState(searchParams.get('id') || '');
|
||||
const [dateDebut, setDateDebut] = useState('');
|
||||
const [dateFin, setDateFin] = useState('');
|
||||
const [historiqueData, setHistoriqueData] = useState([]);
|
||||
const [evolutionData, setEvolutionData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [erreur, setErreur] = useState('');
|
||||
|
||||
/* Set default dates to last 5 days */
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const fiveDaysAgo = new Date(today);
|
||||
fiveDaysAgo.setDate(today.getDate() - 5);
|
||||
setDateDebut(fiveDaysAgo.toISOString().split('T')[0]);
|
||||
setDateFin(today.toISOString().split('T')[0]);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
async function loadMonitorings() {
|
||||
try {
|
||||
const result = await getMonitorings();
|
||||
setMonitorings(Array.isArray(result) ? result : []);
|
||||
} catch {
|
||||
// Non bloquant
|
||||
}
|
||||
}
|
||||
loadMonitorings();
|
||||
}, []);
|
||||
|
||||
async function handleAfficher() {
|
||||
if (!dateDebut || !dateFin) {
|
||||
setErreur('Veuillez sélectionner des dates.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setErreur('');
|
||||
try {
|
||||
let hist = [];
|
||||
let evol = [];
|
||||
|
||||
if (selectedMonitoring) {
|
||||
const [histResult, evolResult] = await Promise.all([
|
||||
getHistorique(selectedMonitoring, dateDebut, dateFin),
|
||||
getHistoriqueEvolution(selectedMonitoring, dateDebut, dateFin)
|
||||
]);
|
||||
hist = Array.isArray(histResult) ? histResult : [];
|
||||
evol = Array.isArray(evolResult) ? evolResult : [];
|
||||
} else {
|
||||
const [histResult, evolResult] = await Promise.all([
|
||||
getHistorique(undefined, dateDebut, dateFin),
|
||||
getEvolutionGlobal(dateDebut, dateFin)
|
||||
]);
|
||||
hist = Array.isArray(histResult) ? histResult : [];
|
||||
evol = Array.isArray(evolResult) ? evolResult : [];
|
||||
}
|
||||
|
||||
setHistoriqueData(hist);
|
||||
setEvolutionData(evol);
|
||||
} catch (e) {
|
||||
setErreur(e.message || 'Erreur lors du chargement de l\'historique.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/* Colonnes du tableau résumé */
|
||||
const columns = selectedMonitoring ? [
|
||||
{ key: 'date', label: 'Date' },
|
||||
{ key: 'nb_erreurs', label: 'Erreurs' },
|
||||
{
|
||||
key: 'variation',
|
||||
label: 'Variation',
|
||||
render: (val, row, index) => {
|
||||
if (index === 0) return '—';
|
||||
const prev = historiqueData[index - 1]?.nb_erreurs ?? 0;
|
||||
const current = row.nb_erreurs ?? 0;
|
||||
const diff = current - prev;
|
||||
if (diff > 0) return <span style={{ color: 'var(--color-primary)' }}>↑ {diff}</span>;
|
||||
if (diff < 0) return <span style={{ color: 'var(--color-ok)' }}>↓ {Math.abs(diff)}</span>;
|
||||
return '—';
|
||||
}
|
||||
}
|
||||
] : [
|
||||
{ key: 'date', label: 'Date' },
|
||||
{ key: 'nom_monito', label: 'Monitoring' },
|
||||
{ key: 'service', label: 'Service' },
|
||||
{ key: 'nb_erreurs', label: 'Erreurs' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<h1 className={styles.title}>Historique</h1>
|
||||
|
||||
{/* Filtres */}
|
||||
<div className={styles.filtres}>
|
||||
<select
|
||||
className={styles.select}
|
||||
value={selectedMonitoring}
|
||||
onChange={e => setSelectedMonitoring(e.target.value)}
|
||||
>
|
||||
<option value="">Tous les monitorings</option>
|
||||
{monitorings.map(m => (
|
||||
<option key={m.id_monito || m.id} value={m.id_monito || m.id}>{m.nom || m.monito_intitule || m.libelle}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="date"
|
||||
className={styles.dateInput}
|
||||
value={dateDebut}
|
||||
onChange={e => setDateDebut(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
className={styles.dateInput}
|
||||
value={dateFin}
|
||||
onChange={e => setDateFin(e.target.value)}
|
||||
/>
|
||||
<Button variant="primary" onClick={handleAfficher} disabled={loading}>
|
||||
Afficher
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{erreur && <ErrorMessage message={erreur} />}
|
||||
|
||||
{loading ? (
|
||||
<LoadingSpinner message="Chargement de l'historique..." />
|
||||
) : evolutionData.length > 0 ? (
|
||||
<>
|
||||
{/* Actions */}
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<Button variant="secondary" onClick={() => exportToCSV(historiqueData, `historique_${selectedMonitoring}_${dateDebut}_${dateFin}.csv`)}>
|
||||
Exporter l'historique CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Graphique */}
|
||||
<div className={styles.chartContainer}>
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<ComposedChart data={evolutionData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="date" />
|
||||
<YAxis />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'var(--color-black)',
|
||||
color: 'var(--color-white)',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--radius)'
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="erreurs"
|
||||
stroke="var(--color-primary)"
|
||||
fill="var(--color-primary)"
|
||||
fillOpacity={0.08}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="erreurs"
|
||||
stroke="var(--color-primary)"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: 'var(--color-primary)' }}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Tableau */}
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={historiqueData}
|
||||
pageSize={50}
|
||||
emptyMessage="Aucune donnée historique."
|
||||
/>
|
||||
</>
|
||||
) : selectedMonitoring && dateDebut && dateFin && !loading ? (
|
||||
<p className={styles.empty}>Aucune donnée trouvée pour cette période.</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
/* src/pages/Historique/Historique.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;
|
||||
}
|
||||
|
||||
.filtres {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 32px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-gray-border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.dateInput {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-gray-border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
margin-bottom: 32px;
|
||||
padding: 20px;
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* Page de connexion : formulaire + SSO Windows */
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { getHealth } from '../../services/api';
|
||||
import styles from './Login.module.css';
|
||||
|
||||
export default function Login() {
|
||||
const [identifiant, setIdentifiant] = useState('');
|
||||
const [motDePasse, setMotDePasse] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [erreur, setErreur] = useState('');
|
||||
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setErreur('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
/* Vérification de la disponibilité de l'API avant connexion */
|
||||
await getHealth();
|
||||
login({ nom: identifiant || 'Utilisateur', role: 'user', token: 'session' });
|
||||
navigate('/dashboard');
|
||||
} catch {
|
||||
setErreur('Impossible de contacter le serveur. Vérifiez que l\'API est démarrée sur le port 8000.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSso() {
|
||||
/* Connexion SSO Windows : même vérification API */
|
||||
handleSubmit({ preventDefault: () => {} });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.card}>
|
||||
<div className={styles.logoArea}>
|
||||
<span className={styles.logoIcon}>▶</span>
|
||||
<h1 className={styles.logoText}>Data Sentinel</h1>
|
||||
<p className={styles.byXefi}>by XEFI</p>
|
||||
</div>
|
||||
|
||||
<form className={styles.form} onSubmit={handleSubmit}>
|
||||
<div className={styles.field}>
|
||||
<label className={styles.label} htmlFor="identifiant">Identifiant</label>
|
||||
<input
|
||||
id="identifiant"
|
||||
type="text"
|
||||
className={styles.input}
|
||||
value={identifiant}
|
||||
onChange={e => setIdentifiant(e.target.value)}
|
||||
placeholder="Votre identifiant"
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label className={styles.label} htmlFor="motDePasse">Mot de passe</label>
|
||||
<input
|
||||
id="motDePasse"
|
||||
type="password"
|
||||
className={styles.input}
|
||||
value={motDePasse}
|
||||
onChange={e => setMotDePasse(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{erreur && <p className={styles.erreur}>{erreur}</p>}
|
||||
|
||||
<button type="submit" className={styles.btnPrimary} disabled={loading}>
|
||||
{loading ? 'Connexion...' : 'Se connecter'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className={styles.divider}>
|
||||
<span>ou</span>
|
||||
</div>
|
||||
|
||||
<button type="button" className={styles.btnSecondary} onClick={handleSso} disabled={loading}>
|
||||
Connexion Windows SSO
|
||||
</button>
|
||||
|
||||
<div className={styles.links}>
|
||||
<a href="#" className={styles.forgotLink}>Mot de passe oublié ?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
/* Styles de la page de connexion */
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--color-black);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--color-white);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
border-radius: var(--radius);
|
||||
border-top: 4px solid var(--color-primary);
|
||||
padding: 40px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.logoArea {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.logoIcon {
|
||||
color: var(--color-primary);
|
||||
font-size: 28px;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.byXefi {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-gray-border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.erreur {
|
||||
font-size: 13px;
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-danger-bg);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.btnPrimary {
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.btnPrimary:hover:not(:disabled) {
|
||||
background-color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.btnPrimary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.divider::before,
|
||||
.divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-border);
|
||||
}
|
||||
|
||||
.btnSecondary {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-primary);
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.btnSecondary:hover:not(:disabled) {
|
||||
background-color: var(--color-danger-bg);
|
||||
}
|
||||
|
||||
.btnSecondary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forgotLink {
|
||||
font-size: 13px;
|
||||
color: var(--color-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
// src/pages/MentionsLegales/MentionsLegales.jsx
|
||||
// Page Mentions légales : sans sidebar, contenu statique
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import Button from '../../components/common/Button';
|
||||
import styles from './MentionsLegales.module.css';
|
||||
|
||||
export default function MentionsLegales() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<span className={styles.logo}>▶ Data Sentinel</span>
|
||||
<Button variant="link" onClick={() => navigate(-1)}>
|
||||
<ArrowLeft size={14} />
|
||||
Retour
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<h1 className={styles.mainTitle}>Data Sentinel</h1>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h2>Éditeur</h2>
|
||||
<p><strong>XEFI SA</strong></p>
|
||||
<p>2507 Avenue de l'Europe</p>
|
||||
<p>69140 Rillieux-la-Pape</p>
|
||||
<p>dpo@xefi.fr</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h2>Hébergeur</h2>
|
||||
<p><strong>XEFI Infrastructure NEXERN</strong></p>
|
||||
<p>Souveraineté française</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h2>Accès & Utilisation</h2>
|
||||
<p>Usage interne exclusif aux collaborateurs habilités.</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h2>Données personnelles RGPD (UE 2016/679)</h2>
|
||||
<p>Conservation des données : 24 mois</p>
|
||||
<p>Contact DPO : dpo@xefi.fr</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h2>Cookies</h2>
|
||||
<p>Session JWT uniquement, aucun tiers, bandeau de consentement.</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h2>Propriété intellectuelle</h2>
|
||||
<p>© XEFI SA 2026, développé par COYAUD Anthony</p>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h2>Responsabilité</h2>
|
||||
<p>Données anonymisées pour rendu académique.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer className={styles.footer}>
|
||||
<p>Data Sentinel v1.0 — © XEFI SA 2026</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/* src/pages/MentionsLegales/MentionsLegales.module.css */
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 12px;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.section p {
|
||||
margin: 4px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 64px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--color-gray-border);
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 14px;
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 16px;
|
||||
margin: 48px -24px -24px -24px;
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
// src/pages/MonitoringDetail/MonitoringDetail.jsx
|
||||
// Page de détail d'un monitoring avec fil d'Ariane, tableau d'erreurs, export CSV
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Download, TrendingUp } from 'lucide-react';
|
||||
import { getMonitoringById, getMonitoringDetails, getMonitoringCount, getMonitoringColumns, exportToCSV } from '../../services/api';
|
||||
import DataTable from '../../components/common/DataTable';
|
||||
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import Badge from '../../components/common/Badge';
|
||||
import Button from '../../components/common/Button';
|
||||
import styles from './MonitoringDetail.module.css';
|
||||
|
||||
/* Détermine le statut selon le nombre d'erreurs */
|
||||
function getStatut(nbErreurs) {
|
||||
if (nbErreurs === 0) return { label: 'OK', variant: 'ok' };
|
||||
if (nbErreurs < 10) return { label: 'Attention', variant: 'warning' };
|
||||
return { label: 'Critique', variant: 'critical' };
|
||||
}
|
||||
|
||||
export default function MonitoringDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [monitoring, setMonitoring] = useState(null);
|
||||
const [details, setDetails] = useState([]);
|
||||
const [columns, setColumns] = useState([]);
|
||||
const [count, setCount] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreur, setErreur] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setErreur('');
|
||||
try {
|
||||
const [monit, det, cnt, cols] = await Promise.all([
|
||||
getMonitoringById(id),
|
||||
getMonitoringDetails(id, { limit: 5000 }), // Charge maximum pour export complet
|
||||
getMonitoringCount(id),
|
||||
getMonitoringColumns(id)
|
||||
]);
|
||||
setMonitoring(monit);
|
||||
setDetails(Array.isArray(det) ? det : []);
|
||||
setCount(cnt.count ?? cnt.nb_erreurs ?? 0);
|
||||
|
||||
// Traite les colonnes de l'API
|
||||
if (cols?.columns) {
|
||||
const colsList = cols.columns.map(col => ({
|
||||
key: col.COLUMN_NAME,
|
||||
label: col.COLUMN_NAME
|
||||
}));
|
||||
setColumns(colsList);
|
||||
}
|
||||
} catch (e) {
|
||||
setErreur(e.message || 'Erreur lors du chargement du monitoring.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
/* Filtrage des détails par recherche */
|
||||
const filteredDetails = details.filter(row => {
|
||||
if (!search) return true;
|
||||
return Object.values(row).some(val =>
|
||||
String(val || '').toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
if (loading) return <LoadingSpinner message="Chargement du monitoring..." />;
|
||||
if (erreur) return <ErrorMessage message={erreur} />;
|
||||
|
||||
const statut = getStatut(count);
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
{/* Fil d'Ariane */}
|
||||
<div className={styles.breadcrumb}>
|
||||
<span onClick={() => navigate('/dashboard')} className={styles.breadcrumbLink}>Dashboard</span>
|
||||
<span className={styles.separator}>›</span>
|
||||
<span>{monitoring?.service || 'Service'}</span>
|
||||
<span className={styles.separator}>›</span>
|
||||
<span>{monitoring?.nom || 'Monitoring'}</span>
|
||||
</div>
|
||||
|
||||
{/* En-tête */}
|
||||
<div className={styles.header}>
|
||||
<div className={styles.titleSection}>
|
||||
<h1 className={styles.title}>{monitoring?.nom || monitoring?.monito_intitule || 'Monitoring'}</h1>
|
||||
<div className={styles.badges}>
|
||||
{monitoring?.bdd_source && <Badge variant={monitoring.bdd_source.toLowerCase() === 'sage' ? 'sage' : 'crm'}>{monitoring.bdd_source}</Badge>}
|
||||
{monitoring?.id_categorie && <Badge variant="info">Catégorie {monitoring.id_categorie}</Badge>}
|
||||
<Badge variant={statut.variant}>{statut.label}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.count}>
|
||||
<span className={styles.countNumber}>{count}</span>
|
||||
<span className={styles.countLabel}>erreur{count !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className={styles.actions}>
|
||||
<Button variant="secondary" onClick={() => exportToCSV(filteredDetails, `monitoring_${id}_${new Date().toISOString().split('T')[0]}.csv`)}>
|
||||
<Download size={14} />
|
||||
Exporter CSV ({filteredDetails.length} lignes)
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => navigate(`/historique?id=${id}`)}>
|
||||
<TrendingUp size={14} />
|
||||
Voir l'évolution
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filtres */}
|
||||
<div className={styles.filtres}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher dans les erreurs..."
|
||||
className={styles.searchInput}
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Résumé des résultats */}
|
||||
<div style={{ marginBottom: '1rem', fontSize: '0.9rem', color: 'var(--color-text-secondary)' }}>
|
||||
{filteredDetails.length} / {details.length} erreur{details.length !== 1 ? 's' : ''}
|
||||
{search && ` (filtré: ${search})`}
|
||||
</div>
|
||||
|
||||
{/* Tableau */}
|
||||
{columns.length > 0 && (
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={filteredDetails}
|
||||
pageSize={50}
|
||||
emptyMessage="Aucune erreur trouvée."
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Encart aide */}
|
||||
<div className={styles.helpBox}>
|
||||
<p><strong>Aide :</strong> Ce tableau affiche les erreurs détectées pour ce monitoring. Utilisez la barre de recherche pour filtrer. L'export CSV permet de télécharger toutes les données filtrées.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
/* src/pages/MonitoringDetail/MonitoringDetail.module.css */
|
||||
|
||||
.page {
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.breadcrumbLink {
|
||||
color: var(--color-link);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumbLink:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--color-primary);
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--color-gray-border);
|
||||
}
|
||||
|
||||
.titleSection h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.count {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.countNumber {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.countLabel {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.filtres {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.searchInput,
|
||||
.filterInput {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-gray-border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.helpBox {
|
||||
margin-top: 32px;
|
||||
padding: 16px;
|
||||
background-color: var(--color-danger-bg);
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
// Page réutilisable pour afficher les monitorings d'un service spécifique
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Download } from 'lucide-react';
|
||||
import { getDashboard, exportToCSV } from '../../services/api';
|
||||
import DataTable from '../../components/common/DataTable';
|
||||
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import Button from '../../components/common/Button';
|
||||
import styles from './ServiceMonitorings.module.css';
|
||||
|
||||
export default function ServiceMonitorings({ serviceLabel, serviceName }) {
|
||||
const navigate = useNavigate();
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreur, setErreur] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setErreur('');
|
||||
try {
|
||||
const result = await getDashboard(serviceName);
|
||||
setData(Array.isArray(result) ? result : []);
|
||||
} catch (e) {
|
||||
setErreur(e.message || `Erreur lors du chargement des monitorings ${serviceLabel.toLowerCase()}.`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData();
|
||||
}, [serviceLabel, serviceName]);
|
||||
|
||||
if (loading) return <LoadingSpinner message={`Chargement des monitorings ${serviceLabel.toLowerCase()}...`} />;
|
||||
if (erreur) return <ErrorMessage message={erreur} />;
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Monitoring' },
|
||||
{ key: 'service', label: 'Service' },
|
||||
{ key: 'categorie', label: 'Catégorie' },
|
||||
{ key: 'bdd_source', label: 'Source' },
|
||||
{ key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<Button variant="link" onClick={() => navigate(`/monitoring/${row.id || row.id_monito}`)}>
|
||||
Voir détail →
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.header}>
|
||||
<div>
|
||||
<h1 className={styles.title}>{serviceLabel}</h1>
|
||||
<p className={styles.subtitle}>Monitorings avec le service "{serviceLabel}".</p>
|
||||
</div>
|
||||
<Button variant="secondary" onClick={() => exportToCSV(data, `${serviceLabel.toLowerCase()}_monitorings_${new Date().toISOString().split('T')[0]}.csv`)}>
|
||||
<Download size={14} />
|
||||
Exporter tout ({data.length})
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
pageSize={50}
|
||||
emptyMessage={`Aucun monitoring ${serviceLabel.toLowerCase()} trouvé.`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 160px;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// src/pages/Users/Users.jsx
|
||||
// Page Utilisateurs : gestion des utilisateurs (simulation)
|
||||
import { useState } from 'react';
|
||||
import { Plus, Edit, Trash2 } from 'lucide-react';
|
||||
import DataTable from '../../components/common/DataTable';
|
||||
import Button from '../../components/common/Button';
|
||||
import styles from './Users.module.css';
|
||||
|
||||
/* Données simulées pour les utilisateurs */
|
||||
const mockUsers = [
|
||||
{ id: 1, nom: 'Alice Dupont', email: 'alice@xefi.fr', role: 'Admin', actif: true },
|
||||
{ id: 2, nom: 'Bob Martin', email: 'bob@xefi.fr', role: 'Utilisateur', actif: true },
|
||||
{ id: 3, nom: 'Charlie Durand', email: 'charlie@xefi.fr', role: 'Utilisateur', actif: false }
|
||||
];
|
||||
|
||||
export default function Users() {
|
||||
const [users, setUsers] = useState(mockUsers);
|
||||
|
||||
function handleAdd() {
|
||||
console.log('Ajouter utilisateur');
|
||||
}
|
||||
|
||||
function handleEdit(user) {
|
||||
console.log('Modifier utilisateur', user);
|
||||
}
|
||||
|
||||
function handleDelete(user) {
|
||||
setUsers(prev => prev.map(u => u.id === user.id ? { ...u, actif: false } : u));
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'email', label: 'Email' },
|
||||
{ key: 'role', label: 'Rôle' },
|
||||
{
|
||||
key: 'actif',
|
||||
label: 'Statut',
|
||||
render: (val) => val ? 'Actif' : 'Inactif'
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.actionBtn} onClick={() => handleEdit(row)}>
|
||||
<Edit size={14} />
|
||||
Modifier
|
||||
</button>
|
||||
<button className={styles.actionBtn} onClick={() => handleDelete(row)}>
|
||||
<Trash2 size={14} />
|
||||
Désactiver
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.title}>Utilisateurs</h1>
|
||||
<Button variant="primary" onClick={handleAdd}>
|
||||
<Plus size={14} />
|
||||
Ajouter
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={users}
|
||||
pageSize={50}
|
||||
emptyMessage="Aucun utilisateur trouvé."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/* src/pages/Users/Users.module.css */
|
||||
|
||||
.page {
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
// src/pages/VueConso/VueConso.jsx
|
||||
// Page Vue consolidée : graphique barres + tableau avec export CSV
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Download } from 'lucide-react';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
import { getDashboard, exportToCSV } from '../../services/api';
|
||||
import DataTable from '../../components/common/DataTable';
|
||||
import LoadingSpinner from '../../components/common/LoadingSpinner';
|
||||
import ErrorMessage from '../../components/common/ErrorMessage';
|
||||
import Button from '../../components/common/Button';
|
||||
import styles from './VueConso.module.css';
|
||||
|
||||
/* Détermine la couleur selon le statut */
|
||||
function getStatusColor(nbErreurs) {
|
||||
if (nbErreurs === 0) return 'var(--color-ok)';
|
||||
if (nbErreurs < 10) return 'var(--color-warning)';
|
||||
return 'var(--color-primary)';
|
||||
}
|
||||
|
||||
export default function VueConso() {
|
||||
const navigate = useNavigate();
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [erreur, setErreur] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setErreur('');
|
||||
try {
|
||||
const result = await getDashboard();
|
||||
setData(Array.isArray(result) ? result : []);
|
||||
} catch (e) {
|
||||
setErreur(e.message || 'Erreur lors du chargement de la vue consolidée.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
if (loading) return <LoadingSpinner message="Chargement de la vue consolidée..." />;
|
||||
if (erreur) return <ErrorMessage message={erreur} />;
|
||||
|
||||
/* Préparation des données pour le graphique */
|
||||
const chartData = data.map(item => ({
|
||||
name: item.nom || item.nom_monito || item.libelle || 'Monitoring',
|
||||
erreurs: item.nb_erreurs ?? item.count ?? 0,
|
||||
fill: getStatusColor(item.nb_erreurs ?? item.count ?? 0)
|
||||
}));
|
||||
|
||||
/* Colonnes du tableau */
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Monitoring' },
|
||||
{ key: 'service', label: 'Service' },
|
||||
{ key: 'categorie', label: 'Catégorie' },
|
||||
{ key: 'bdd_source', label: 'Source' },
|
||||
{ key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 },
|
||||
{
|
||||
key: 'actions',
|
||||
label: 'Actions',
|
||||
render: (val, row) => (
|
||||
<Button variant="link" onClick={() => navigate(`/monitoring/${row.id || row.id_monito}`)}>
|
||||
Voir détail →
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.title}>Vue consolidée</h1>
|
||||
<Button variant="secondary" onClick={() => exportToCSV(data, `vue_consolidee_${new Date().toISOString().split('T')[0]}.csv`)}>
|
||||
<Download size={14} />
|
||||
Exporter tout ({data.length} lignes)
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Graphique */}
|
||||
<div className={styles.chartContainer}>
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" angle={-45} textAnchor="end" height={80} />
|
||||
<YAxis />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'var(--color-black)',
|
||||
color: 'var(--color-white)',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--radius)'
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="erreurs" fill="var(--color-primary)" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Tableau */}
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
pageSize={50}
|
||||
emptyMessage="Aucune donnée disponible."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* src/pages/VueConso/VueConso.module.css */
|
||||
|
||||
.page {
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
margin-bottom: 32px;
|
||||
padding: 20px;
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
Reference in New Issue
Block a user