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

feat: enhance JiraDashboardPage with new components and improved UI

Browse Source 
- Integrated `PeriodSelector`, `SkeletonGrid`, and `MetricsGrid` for better data visualization and user interaction.
- Replaced legacy period selection and error display with new components for a cleaner UI.
- Updated `UIShowcaseClient` to demonstrate new Jira dashboard components, enhancing showcase functionality.
This commit is contained in:
Julien Froidefond
2025-09-29 16:47:35 +02:00
parent 6c0c353a4e
commit c1a14f9196
6 changed files with 304 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/ui-showcase/UIShowcaseClient.tsx
View File

@@ -8,7 +8,7 @@ import { Alert as ShadcnAlert, AlertTitle, AlertDescription } from '@/components
import { Input } from '@/components/ui/Input';
import { StyledCard } from '@/components/ui/StyledCard';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { StatCard, ProgressBar, ActionCard, TaskCard, MetricCard, ToggleButton, SearchInput, ControlPanel, ControlSection, ControlGroup, FilterSummary, FilterChip, ColumnHeader, EmptyState, DropZone, Tabs, PriorityBadge, AchievementCard, ChallengeCard } from '@/components/ui';
import { StatCard, ProgressBar, ActionCard, TaskCard, MetricCard, ToggleButton, SearchInput, ControlPanel, ControlSection, ControlGroup, FilterSummary, FilterChip, ColumnHeader, EmptyState, DropZone, Tabs, PriorityBadge, AchievementCard, ChallengeCard, PeriodSelector, SkeletonCard, SkeletonGrid, MetricsGrid } from '@/components/ui';
import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem';
import { Calendar } from '@/components/ui/Calendar';
import { DailyAddForm } from '@/components/ui/DailyAddForm';
@@ -22,6 +22,7 @@ import { ChallengeData } from '@/components/ui/ChallengeCard';
export function UIShowcaseClient() {
const [inputValue, setInputValue] = useState('');
const [selectedDate, setSelectedDate] = useState(new Date());
const [selectedPeriod, setSelectedPeriod] = useState('7d');
const [checkboxItems, setCheckboxItems] = useState<CheckboxItemData[]>([
{ id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' },
{ id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' },
@@ -1081,6 +1082,93 @@ export function UIShowcaseClient() {
</div>
</section>
{/* Jira Dashboard Components Section */}
<section className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Jira Dashboard Components
</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* PeriodSelector */}
<div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">PeriodSelector</h3>
<div className="space-y-4">
<div className="space-y-2">
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
PeriodSelector - Sélecteur de période
</div>
<PeriodSelector
options={[
{ value: '7d', label: '7j' },
{ value: '30d', label: '30j' },
{ value: '3m', label: '3m' },
{ value: 'current', label: 'Sprint' }
]}
selectedValue={selectedPeriod}
onValueChange={setSelectedPeriod}
/>
<div className="text-xs text-[var(--muted-foreground)]">
Période sélectionnée: {selectedPeriod}
</div>
</div>
</div>
</div>
{/* MetricsGrid */}
<div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">MetricsGrid</h3>
<div className="space-y-4">
<div className="space-y-2">
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
MetricsGrid - Grille de métriques
</div>
<Card>
<CardContent className="p-4">
<MetricsGrid
metrics={[
{ title: 'Tickets', value: 42, color: 'primary' },
{ title: 'Équipe', value: 8, color: 'default' },
{ title: 'Actifs', value: 6, color: 'success' },
{ title: 'Points', value: 156, color: 'warning' }
]}
/>
</CardContent>
</Card>
</div>
</div>
</div>
{/* SkeletonCard */}
<div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">SkeletonCard</h3>
<div className="space-y-4">
<div className="space-y-2">
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
SkeletonCard - Carte de chargement
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<SkeletonCard lines={3} />
<SkeletonCard lines={4} />
</div>
</div>
</div>
</div>
{/* SkeletonGrid */}
<div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">SkeletonGrid</h3>
<div className="space-y-4">
<div className="space-y-2">
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
SkeletonGrid - Grille de chargement
</div>
<SkeletonGrid count={4} lines={3} />
</div>
</div>
</div>
</div>
</section>
{/* Daily Components Section */}
<section className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">