diff --git a/src/app/sessions/NewWorkshopDropdown.tsx b/src/app/sessions/NewWorkshopDropdown.tsx new file mode 100644 index 0000000..ff08db2 --- /dev/null +++ b/src/app/sessions/NewWorkshopDropdown.tsx @@ -0,0 +1,58 @@ +'use client'; + +import { useState } from 'react'; +import Link from 'next/link'; +import { Button } from '@/components/ui'; + +const WORKSHOPS = [ + { href: '/sessions/new', icon: '📊', label: 'SWOT', desc: 'Forces, faiblesses, opportunités' }, + { href: '/motivators/new', icon: '🎯', label: 'Moving Motivators', desc: 'Motivations intrinsèques' }, + { href: '/year-review/new', icon: '📅', label: 'Year Review', desc: "Bilan de l'année" }, + { href: '/weekly-checkin/new', icon: '📝', label: 'Weekly Check-in', desc: 'Suivi hebdomadaire' }, + { href: '/weather/new', icon: '🌤️', label: 'Météo d\'équipe', desc: 'Humeur et énergie' }, +]; + +export function NewWorkshopDropdown() { + const [open, setOpen] = useState(false); + + return ( +
+ + {open && ( +
+ {WORKSHOPS.map((w) => ( + setOpen(false)} + > + {w.icon} +
+
{w.label}
+
{w.desc}
+
+ + ))} +
+ )} +
+ ); +} diff --git a/src/app/sessions/WorkshopTabs.tsx b/src/app/sessions/WorkshopTabs.tsx index dda415f..55d8a8c 100644 --- a/src/app/sessions/WorkshopTabs.tsx +++ b/src/app/sessions/WorkshopTabs.tsx @@ -30,6 +30,15 @@ const VALID_TABS: WorkshopType[] = [ 'byPerson', ]; +const TYPE_TABS: { value: WorkshopType; icon: string; label: string }[] = [ + { value: 'all', icon: '📋', label: 'Tous' }, + { value: 'swot', icon: '📊', label: 'SWOT' }, + { value: 'motivators', icon: '🎯', label: 'Motivators' }, + { value: 'year-review', icon: '📅', label: 'Year Review' }, + { value: 'weekly-checkin', icon: '📝', label: 'Check-in' }, + { value: 'weather', icon: '🌤️', label: 'Météo' }, +]; + interface ShareUser { id: string; name: string | null; @@ -199,6 +208,7 @@ export function WorkshopTabs({ }: WorkshopTabsProps) { const searchParams = useSearchParams(); const router = useRouter(); + const [typeDropdownOpen, setTypeDropdownOpen] = useState(false); // Get tab from URL or default to 'all' const tabParam = searchParams.get('tab'); @@ -251,7 +261,7 @@ export function WorkshopTabs({ return (
{/* Tabs */} -
+
setActiveTab('all')} @@ -266,40 +276,18 @@ export function WorkshopTabs({ label="Par personne" count={sessionsByPerson.size} /> - setActiveTab('swot')} - icon="📊" - label="SWOT" - count={swotSessions.length} - /> - setActiveTab('motivators')} - icon="🎯" - label="Moving Motivators" - count={motivatorSessions.length} - /> - setActiveTab('year-review')} - icon="📅" - label="Year Review" - count={yearReviewSessions.length} - /> - setActiveTab('weekly-checkin')} - icon="📝" - label="Weekly Check-in" - count={weeklyCheckInSessions.length} - /> - setActiveTab('weather')} - icon="🌤️" - label="Météo" - count={weatherSessions.length} +
@@ -367,6 +355,92 @@ export function WorkshopTabs({ ); } +function TypeFilterDropdown({ + activeTab, + setActiveTab, + open, + onOpenChange, + counts, +}: { + activeTab: WorkshopType; + setActiveTab: (t: WorkshopType) => void; + open: boolean; + onOpenChange: (v: boolean) => void; + counts: Record; +}) { + const typeTabs = TYPE_TABS.filter((t) => t.value !== 'all'); + const current = TYPE_TABS.find((t) => t.value === activeTab) ?? TYPE_TABS[0]; + const isTypeSelected = activeTab !== 'all' && activeTab !== 'byPerson'; + const totalCount = typeTabs.reduce((s, t) => s + (counts[t.value] ?? 0), 0); + + return ( +
+ + {open && ( +
+ + {typeTabs.map((t) => ( + + ))} +
+ )} +
+ ); +} + function TabButton({ active, onClick, @@ -382,9 +456,10 @@ function TabButton({ }) { return ( diff --git a/src/app/sessions/page.tsx b/src/app/sessions/page.tsx index 9882568..8cf9a2a 100644 --- a/src/app/sessions/page.tsx +++ b/src/app/sessions/page.tsx @@ -1,13 +1,13 @@ import { Suspense } from 'react'; -import Link from 'next/link'; import { auth } from '@/lib/auth'; import { getSessionsByUserId } from '@/services/sessions'; import { getMotivatorSessionsByUserId } from '@/services/moving-motivators'; import { getYearReviewSessionsByUserId } from '@/services/year-review'; import { getWeeklyCheckInSessionsByUserId } from '@/services/weekly-checkin'; import { getWeatherSessionsByUserId } from '@/services/weather'; -import { Card, Button } from '@/components/ui'; +import { Card } from '@/components/ui'; import { WorkshopTabs } from './WorkshopTabs'; +import { NewWorkshopDropdown } from './NewWorkshopDropdown'; function WorkshopTabsSkeleton() { return ( @@ -90,38 +90,7 @@ export default async function SessionsPage() {

Mes Ateliers

Tous vos ateliers en un seul endroit

-
- - - - - - - - - - - - - - - -
+
{/* Content */} @@ -136,37 +105,8 @@ export default async function SessionsPage() { découvrir les motivations, un Year Review pour faire le bilan de l'année, ou un Weekly Check-in pour le suivi hebdomadaire.

-
- - - - - - - - - - - - - - - +
+
) : ( diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index a10c1a6..26f45f5 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -59,18 +59,22 @@ export function Header() { 👥 Équipes - {/* Workshops Dropdown */} + {/* New Workshop Dropdown */}
+ setWorkshopsOpen(false)} + > + 📅 +
+
Year Review
+
Bilan de l'année
+
+ + setWorkshopsOpen(false)} + > + 📝 +
+
Weekly Check-in
+
Suivi hebdomadaire
+
+ + setWorkshopsOpen(false)} + > + 🌤️ +
+
Météo d'équipe
+
Humeur et énergie
+
+ )}