feat: refine Jira dashboard analytics with period filtering

- Introduced period filtering for analytics in `JiraDashboardPageClient` using `filterAnalyticsByPeriod` and `getPeriodInfo` for enhanced data visualization.
- Updated state management for selected period to use `PeriodFilter` type for better type safety.
- Improved UI to display period information alongside project metrics, enhancing user experience.
This commit is contained in:
Julien Froidefond
2025-09-18 22:48:51 +02:00
parent 0acc54025b
commit 01b702f630
2 changed files with 167 additions and 7 deletions

View File

@@ -1,9 +1,10 @@
'use client';
import { useState, useEffect } from 'react';
import { useState, useEffect, useMemo } from 'react';
import { JiraConfig } from '@/lib/types';
import { useJiraAnalytics } from '@/hooks/useJiraAnalytics';
import { useJiraExport } from '@/hooks/useJiraExport';
import { filterAnalyticsByPeriod, getPeriodInfo, type PeriodFilter } from '@/lib/jira-period-filter';
import { Header } from '@/components/ui/Header';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
@@ -24,9 +25,18 @@ interface JiraDashboardPageClientProps {
}
export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPageClientProps) {
const { analytics, isLoading, error, loadAnalytics, refreshAnalytics } = useJiraAnalytics();
const { analytics: rawAnalytics, isLoading, error, loadAnalytics, refreshAnalytics } = useJiraAnalytics();
const { isExporting, error: exportError, exportCSV, exportJSON } = useJiraExport();
const [selectedPeriod, setSelectedPeriod] = useState<'7d' | '30d' | '3m' | 'current'>('current');
const [selectedPeriod, setSelectedPeriod] = useState<PeriodFilter>('current');
// Filtrer les analytics selon la période sélectionnée
const analytics = useMemo(() => {
if (!rawAnalytics) return null;
return filterAnalyticsByPeriod(rawAnalytics, selectedPeriod);
}, [rawAnalytics, selectedPeriod]);
// Informations sur la période pour l'affichage
const periodInfo = getPeriodInfo(selectedPeriod);
useEffect(() => {
// Charger les analytics au montage si Jira est configuré avec un projet
@@ -131,9 +141,16 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
📊 Analytics d&apos;équipe
</h1>
<p className="text-[var(--muted-foreground)]">
Surveillance en temps réel du projet {initialJiraConfig.projectKey}
</p>
<div className="space-y-1">
<p className="text-[var(--muted-foreground)]">
Surveillance en temps réel du projet {initialJiraConfig.projectKey}
</p>
<p className="text-sm text-[var(--primary)] flex items-center gap-1">
<span>{periodInfo.icon}</span>
<span>{periodInfo.label}</span>
<span className="text-[var(--muted-foreground)]"> {periodInfo.description}</span>
</p>
</div>
</div>
<div className="flex items-center gap-3">
@@ -147,7 +164,7 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
].map((period: { value: string; label: string }) => (
<button
key={period.value}
onClick={() => setSelectedPeriod(period.value as '7d' | '30d' | '3m' | 'current')}
onClick={() => setSelectedPeriod(period.value as PeriodFilter)}
className={`px-3 py-1 text-sm rounded transition-all ${
selectedPeriod === period.value
? 'bg-[var(--primary)] text-[var(--primary-foreground)]'