PFEE/dashboard-sqdc/src/database/useSQLiteDatabase.ts
paul.roost ca05e334a7 feat: Implement server-side API for categories, KPIs, and measurements
- Added Express server with SQLite database connection.
- Created API endpoints to fetch categories, KPIs, measurements, and statistics.
- Implemented error handling for database operations.

feat: Create ChartModal component for visualizing KPI data

- Developed ChartModal to display line charts for KPI measurements.
- Integrated Chart.js for rendering charts with responsive design.
- Added styling for modal and chart components.

feat: Add ExportModal component for exporting KPI data

- Implemented ExportModal to allow users to select data ranges for export.
- Included radio buttons for predefined time ranges (last week, month, year, all data).
- Styled modal for better user experience.

feat: Introduce RangeChartModal for dynamic range selection

- Created RangeChartModal to visualize KPI data over user-selected time ranges.
- Integrated radio buttons for selecting different time ranges.
- Enhanced chart rendering with Chart.js.

refactor: Create useSQLiteDatabase hook for data fetching

- Developed custom hook to manage fetching categories, KPIs, and measurements.
- Improved error handling and loading states for better user feedback.

style: Add CSS styles for modals and charts

- Created styles for ChartModal, ExportModal, and RangeChartModal.
- Ensured responsive design for various screen sizes.
2025-10-21 13:31:14 +02:00

114 lines
2.9 KiB
TypeScript

import { useState, useEffect, useCallback } from 'react';
const API_BASE = 'http://localhost:3001/api';
export interface Category {
id: number;
name: string;
emoji: string;
description?: string;
}
export interface KPI {
id: number;
category_id: number;
name: string;
unit: string;
target?: number;
formula?: string;
description?: string;
frequency?: string;
}
export interface Measurement {
id?: number;
kpi_id: number;
measurement_date: string;
value: number;
status?: string;
}
export const useSQLiteDatabase = () => {
const [categories, setCategories] = useState<Category[]>([]);
const [kpis, setKpis] = useState<KPI[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// Charger les catégories et KPI au démarrage
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const [categoriesRes, kpisRes] = await Promise.all([
fetch(`${API_BASE}/categories`),
fetch(`${API_BASE}/kpis`)
]);
if (!categoriesRes.ok || !kpisRes.ok) {
throw new Error('Erreur lors du chargement des données');
}
const categoriesData = await categoriesRes.json();
const kpisData = await kpisRes.json();
setCategories(categoriesData);
setKpis(kpisData);
setError(null);
} catch (err: any) {
setError(err.message || 'Erreur de connexion à la base de données');
console.error('❌ Erreur:', err);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
// Obtenir les mesures pour un KPI
const getMeasurementsForKPI = useCallback(async (kpiId: number, days: number = 30) => {
try {
const res = await fetch(`${API_BASE}/measurements/${kpiId}?days=${days}`);
if (!res.ok) throw new Error('Erreur de chargement des mesures');
return await res.json();
} catch (err: any) {
console.error('Erreur getMeasurementsForKPI:', err);
return [];
}
}, []);
// Obtenir la dernière mesure pour un KPI
const getLatestMeasurement = useCallback(async (kpiId: number) => {
try {
const res = await fetch(`${API_BASE}/latest/${kpiId}`);
if (!res.ok) throw new Error('Erreur de chargement');
return await res.json();
} catch (err: any) {
console.error('Erreur getLatestMeasurement:', err);
return null;
}
}, []);
// Obtenir les statistiques pour un KPI
const getKPIStats = useCallback(async (kpiId: number, days: number = 30) => {
try {
const res = await fetch(`${API_BASE}/stats/${kpiId}?days=${days}`);
if (!res.ok) throw new Error('Erreur de chargement');
return await res.json();
} catch (err: any) {
console.error('Erreur getKPIStats:', err);
return null;
}
}, []);
return {
categories,
kpis,
loading,
error,
getMeasurementsForKPI,
getLatestMeasurement,
getKPIStats
};
};