feat: implement period filtering in OKRsList component with toggle for viewing all OKRs or current quarter's OKRs

src/components/okrs/OKRsList.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { OKRCard } from './OKRCard';
-import { Card, ToggleGroup } from '@/components/ui';
+import { Card, ToggleGroup, Button } from '@/components/ui';
 import { getGravatarUrl } from '@/lib/gravatar';
+import { getCurrentQuarterPeriod, isCurrentQuarterPeriod } from '@/lib/okr-utils';
 import type { OKR } from '@/lib/types';
 
 type ViewMode = 'grid' | 'grouped';
@@ -33,6 +34,7 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
     }
     return 'detailed';
   });
+  const [showAllPeriods, setShowAllPeriods] = useState(false);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -40,8 +42,21 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
     }
   }, [cardViewMode]);
 
+  const currentQuarterPeriod = getCurrentQuarterPeriod();
+
+  // Filter OKRs based on period filter
+  const filteredOKRsData = useMemo(() => {
+    if (showAllPeriods) {
+      return okrsData;
+    }
+    return okrsData.map((tm) => ({
+      ...tm,
+      okrs: tm.okrs.filter((okr) => isCurrentQuarterPeriod(okr.period)),
+    }));
+  }, [okrsData, showAllPeriods]);
+
   // Flatten OKRs for grid view
-  const allOKRs = okrsData.flatMap((tm) =>
+  const allOKRs = filteredOKRsData.flatMap((tm) =>
     tm.okrs.map((okr) => ({
       ...okr,
       teamMember: {
@@ -52,11 +67,37 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
 
   if (allOKRs.length === 0) {
     return (
+      <div>
+        {/* View Toggle */}
+        <div className="mb-6 flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <h2 className="text-2xl font-bold text-foreground">OKRs</h2>
+            {!showAllPeriods && (
+              <span className="text-sm text-muted">({currentQuarterPeriod})</span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              variant="outline"
+              onClick={() => setShowAllPeriods(!showAllPeriods)}
+              className="text-sm"
+            >
+              {showAllPeriods ? `Afficher ${currentQuarterPeriod} uniquement` : 'Afficher tous les OKR'}
+            </Button>
+          </div>
+        </div>
         <Card className="p-12 text-center">
           <div className="text-5xl mb-4">🎯</div>
-        <h3 className="text-xl font-semibold text-foreground mb-2">Aucun OKR défini</h3>
+          <h3 className="text-xl font-semibold text-foreground mb-2">
-        <p className="text-muted">Aucun OKR n&apos;a encore été défini pour cette équipe</p>
+            {showAllPeriods ? 'Aucun OKR défini' : `Aucun OKR pour ${currentQuarterPeriod}`}
+          </h3>
+          <p className="text-muted">
+            {showAllPeriods
+              ? "Aucun OKR n'a encore été défini pour cette équipe"
+              : `Aucun OKR n'a été défini pour le trimestre ${currentQuarterPeriod}. Cliquez sur "Afficher tous les OKR" pour voir les OKR d'autres périodes.`}
+          </p>
         </Card>
+      </div>
     );
   }
 
@@ -64,8 +105,20 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
     <div>
       {/* View Toggle */}
       <div className="mb-6 flex items-center justify-between gap-4">
-        <h2 className="text-2xl font-bold text-foreground">OKRs</h2>
         <div className="flex items-center gap-3">
+          <h2 className="text-2xl font-bold text-foreground">OKRs</h2>
+          {!showAllPeriods && (
+            <span className="text-sm text-muted">({currentQuarterPeriod})</span>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="outline"
+            onClick={() => setShowAllPeriods(!showAllPeriods)}
+            className="text-sm"
+          >
+            {showAllPeriods ? `Afficher ${currentQuarterPeriod} uniquement` : 'Afficher tous les OKR'}
+          </Button>
           <ToggleGroup
             value={cardViewMode}
             onChange={setCardViewMode}
@@ -140,7 +193,7 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
       {/* Grouped View */}
       {viewMode === 'grouped' ? (
         <div className="space-y-8">
-          {okrsData
+          {filteredOKRsData
             .filter((tm) => tm.okrs.length > 0)
             .map((teamMember) => (
               <div key={teamMember.user.id}>