julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update Daily and Jira dashboard pages with dynamic titles and improved UI

Browse Source 
- Implemented `getTodayTitle` and `getYesterdayTitle` functions in `DailyPageClient` to dynamically set section titles based on the current date.
- Updated `TODO.md` to mark completed tasks related to the Jira dashboard UI consistency.
- Enhanced card content in `JiraDashboardPageClient` to ensure charts are responsive and maintain consistent styling.
- Removed unused date formatting function in `DailySection` for cleaner code.
This commit is contained in:
Julien Froidefond
2025-09-21 10:49:39 +02:00
parent 4152b0bdfc
commit a0e2a78372
4 changed files with 147 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
TODO.md
View File

@@ -6,8 +6,8 @@
- [x] backups : ne backuper que si il y a eu un changement entre le dernier backup et la base actuelle - [x] backups : ne backuper que si il y a eu un changement entre le dernier backup et la base actuelle
- [ ] refacto des dates avec le utils qui pour l'instant n'est pas utilisé - [ ] refacto des dates avec le utils qui pour l'instant n'est pas utilisé
- [ ] split de certains gros composants. - [ ] split de certains gros composants.
- [ ] Page manager : onglets analytics avancés et Qualité et collaboration : les charts sortent des cards; il faut reprendre la UI pour que ce soit consistant. - [x] Page jira-dashboard : onglets analytics avancés et Qualité et collaboration : les charts sortent des cards; il faut reprendre la UI pour que ce soit consistant.
- [ ] Page Daily : les mots aujourd'hui et hier ne fonctionnent dans les titres que si c'est vraiment aujourd'hui :) - [x] Page Daily : les mots aujourd'hui et hier ne fonctionnent dans les titres que si c'est vraiment aujourd'hui :)
## 🔧 Phase 6: Fonctionnalités avancées (Priorité 6) ## 🔧 Phase 6: Fonctionnalités avancées (Priorité 6)

24
src/app/daily/DailyPageClient.tsx
View File

@@ -125,6 +125,26 @@ export function DailyPageClient({
return currentDate.toDateString() === today.toDateString(); return currentDate.toDateString() === today.toDateString();
}; };
const getTodayTitle = () => {
const today = new Date();
if (currentDate.toDateString() === today.toDateString()) {
return "🎯 Aujourd'hui";
}
return `🎯 ${currentDate.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: '2-digit' })}`;
};
const getYesterdayTitle = () => {
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
const yesterdayDate = getYesterdayDate();
if (yesterdayDate.toDateString() === yesterday.toDateString()) {
return "📋 Hier";
}
return `📋 ${yesterdayDate.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: '2-digit' })}`;
};
if (loading) { if (loading) {
return ( return (
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
@@ -217,7 +237,7 @@ export function DailyPageClient({
<div className="xl:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="xl:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Section Hier */} {/* Section Hier */}
<DailySection <DailySection
title="📋 Hier" title={getYesterdayTitle()}
date={getYesterdayDate()} date={getYesterdayDate()}
checkboxes={dailyView.yesterday} checkboxes={dailyView.yesterday}
onAddCheckbox={handleAddYesterdayCheckbox} onAddCheckbox={handleAddYesterdayCheckbox}
@@ -232,7 +252,7 @@ export function DailyPageClient({
{/* Section Aujourd'hui */} {/* Section Aujourd'hui */}
<DailySection <DailySection
title="🎯 Aujourd'hui" title={getTodayTitle()}
date={getTodayDate()} date={getTodayDate()}
checkboxes={dailyView.today} checkboxes={dailyView.today}
onAddCheckbox={handleAddTodayCheckbox} onAddCheckbox={handleAddTodayCheckbox}

102
src/app/jira-dashboard/JiraDashboardPageClient.tsx
View File

@@ -470,11 +470,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📉 Burndown Chart</h3> <h3 className="font-semibold">📉 Burndown Chart</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-96 overflow-hidden">
<BurndownChart <BurndownChart
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-96" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -482,11 +484,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📈 Throughput</h3> <h3 className="font-semibold">📈 Throughput</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-96 overflow-hidden">
<ThroughputChart <ThroughputChart
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-96" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -496,11 +500,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">🎯 Métriques de qualité</h3> <h3 className="font-semibold">🎯 Métriques de qualité</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full overflow-hidden">
<QualityMetrics <QualityMetrics
analytics={analytics} analytics={analytics}
className="min-h-96" className="min-h-96 w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -509,11 +515,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📊 Predictabilité</h3> <h3 className="font-semibold">📊 Predictabilité</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full overflow-hidden">
<PredictabilityMetrics <PredictabilityMetrics
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-auto" className="h-auto w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -522,11 +530,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">🤝 Matrice de collaboration</h3> <h3 className="font-semibold">🤝 Matrice de collaboration</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full overflow-hidden">
<CollaborationMatrix <CollaborationMatrix
analytics={analytics} analytics={analytics}
className="h-auto" className="h-auto w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -535,11 +545,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📊 Comparaison inter-sprints</h3> <h3 className="font-semibold">📊 Comparaison inter-sprints</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full overflow-hidden">
<SprintComparison <SprintComparison
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-auto" className="h-auto w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -548,12 +560,14 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">🔥 Heatmap d&apos;activité de l&apos;équipe</h3> <h3 className="font-semibold">🔥 Heatmap d&apos;activité de l&apos;équipe</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full overflow-hidden">
<TeamActivityHeatmap <TeamActivityHeatmap
workloadByAssignee={analytics.workInProgress.byAssignee} workloadByAssignee={analytics.workInProgress.byAssignee}
statusDistribution={analytics.workInProgress.byStatus} statusDistribution={analytics.workInProgress.byStatus}
className="min-h-96" className="min-h-96 w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -566,12 +580,14 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">🚀 Vélocité des sprints</h3> <h3 className="font-semibold">🚀 Vélocité des sprints</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-64 overflow-hidden">
<VelocityChart <VelocityChart
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-64" className="h-full w-full"
onSprintClick={handleSprintClick} onSprintClick={handleSprintClick}
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -581,11 +597,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📉 Burndown Chart</h3> <h3 className="font-semibold">📉 Burndown Chart</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-96 overflow-hidden">
<BurndownChart <BurndownChart
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-96" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -593,11 +611,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📊 Throughput</h3> <h3 className="font-semibold">📊 Throughput</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-96 overflow-hidden">
<ThroughputChart <ThroughputChart
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-96" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -607,11 +627,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📊 Comparaison des sprints</h3> <h3 className="font-semibold">📊 Comparaison des sprints</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full overflow-hidden">
<SprintComparison <SprintComparison
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-auto" className="h-auto w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -625,11 +647,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">⏱️ Cycle Time par type</h3> <h3 className="font-semibold">⏱️ Cycle Time par type</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-64 overflow-hidden">
<CycleTimeChart <CycleTimeChart
cycleTimeByType={analytics.cycleTimeMetrics.cycleTimeByType} cycleTimeByType={analytics.cycleTimeMetrics.cycleTimeByType}
className="h-64" className="h-full w-full"
/> />
</div>
<div className="mt-4 text-center"> <div className="mt-4 text-center">
<div className="text-2xl font-bold text-[var(--primary)]"> <div className="text-2xl font-bold text-[var(--primary)]">
{analytics.cycleTimeMetrics.averageCycleTime.toFixed(1)} {analytics.cycleTimeMetrics.averageCycleTime.toFixed(1)}
@@ -645,12 +669,14 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">🔥 Heatmap d&apos;activité</h3> <h3 className="font-semibold">🔥 Heatmap d&apos;activité</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-64 overflow-hidden">
<TeamActivityHeatmap <TeamActivityHeatmap
workloadByAssignee={analytics.workInProgress.byAssignee} workloadByAssignee={analytics.workInProgress.byAssignee}
statusDistribution={analytics.workInProgress.byStatus} statusDistribution={analytics.workInProgress.byStatus}
className="h-64" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -661,11 +687,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">🎯 Métriques de qualité</h3> <h3 className="font-semibold">🎯 Métriques de qualité</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-64 overflow-hidden">
<QualityMetrics <QualityMetrics
analytics={analytics} analytics={analytics}
className="h-64" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -673,11 +701,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">📈 Predictabilité</h3> <h3 className="font-semibold">📈 Predictabilité</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-64 overflow-hidden">
<PredictabilityMetrics <PredictabilityMetrics
sprintHistory={analytics.velocityMetrics.sprintHistory} sprintHistory={analytics.velocityMetrics.sprintHistory}
className="h-64" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -692,11 +722,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">👥 Répartition de l&apos;équipe</h3> <h3 className="font-semibold">👥 Répartition de l&apos;équipe</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-64 overflow-hidden">
<TeamDistributionChart <TeamDistributionChart
distribution={analytics.teamMetrics.issuesDistribution} distribution={analytics.teamMetrics.issuesDistribution}
className="h-64" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
@@ -704,11 +736,13 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
<CardHeader> <CardHeader>
<h3 className="font-semibold">🤝 Matrice de collaboration</h3> <h3 className="font-semibold">🤝 Matrice de collaboration</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="p-4">
<div className="w-full h-64 overflow-hidden">
<CollaborationMatrix <CollaborationMatrix
analytics={analytics} analytics={analytics}
className="h-64" className="h-full w-full"
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

9
src/components/daily/DailySection.tsx
View File

@@ -40,13 +40,6 @@ export function DailySection({
}: DailySectionProps) { }: DailySectionProps) {
const [activeId, setActiveId] = useState<string | null>(null); const [activeId, setActiveId] = useState<string | null>(null);
const [items, setItems] = useState(checkboxes); const [items, setItems] = useState(checkboxes);
const formatShortDate = (date: Date) => {
return date.toLocaleDateString('fr-FR', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
// Mettre à jour les items quand les checkboxes changent // Mettre à jour les items quand les checkboxes changent
React.useEffect(() => { React.useEffect(() => {
@@ -99,7 +92,7 @@ export function DailySection({
<div className="p-4 pb-0"> <div className="p-4 pb-0">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-bold text-[var(--foreground)] font-mono flex items-center gap-2"> <h2 className="text-lg font-bold text-[var(--foreground)] font-mono flex items-center gap-2">
{title} <span className="text-sm font-normal text-[var(--muted-foreground)]">({formatShortDate(date)})</span> {title} <span className="text-sm font-normal text-[var(--muted-foreground)]"></span>
{refreshing && ( {refreshing && (
<div className="w-4 h-4 border-2 border-[var(--primary)] border-t-transparent rounded-full animate-spin"></div> <div className="w-4 h-4 border-2 border-[var(--primary)] border-t-transparent rounded-full animate-spin"></div>
)} )}