feat: add editable functionality for current quarter OKRs, allowing participants and team admins to modify objectives and key results, enhancing user interaction and collaboration

feat: enhance dropdown components by integrating useClickOutside hook for improved user experience and accessibility in NewWorkshopDropdown and WorkshopTabs
2026-02-18 08:31:32 +01:00 · 2026-02-18 08:25:08 +01:00
11 changed files with 404 additions and 220 deletions
--- a/src/app/sessions/NewWorkshopDropdown.tsx
+++ b/src/app/sessions/NewWorkshopDropdown.tsx
@@ -1,21 +1,23 @@
 'use client';

-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';

 export function NewWorkshopDropdown() {
  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => setOpen(false), open);

  return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
      <Button
        type="button"
        variant="outline"
        size="sm"
        onClick={() => setOpen(!open)}
-        onBlur={() => setTimeout(() => setOpen(false), 150)}
        className="gap-1.5"
      >
        Nouvel atelier
--- a/src/app/sessions/WorkshopTabs.tsx
+++ b/src/app/sessions/WorkshopTabs.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useTransition } from 'react';
+import { useState, useTransition, useRef } from 'react';
 import Link from 'next/link';
 import { useSearchParams, useRouter } from 'next/navigation';
 import {
@@ -25,6 +25,7 @@ import {
  getWorkshop,
  getSessionPath,
 } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';

 const TYPE_TABS = [
  { value: 'all' as const, icon: '📋', label: 'Tous' },
@@ -429,13 +430,14 @@ function TypeFilterDropdown({
  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);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useClickOutside(containerRef, () => onOpenChange(false), open);

  return (
-    <div className="relative">
+    <div ref={containerRef} className="relative">
      <button
        type="button"
        onClick={() => onOpenChange(!open)}
-        onBlur={() => setTimeout(() => onOpenChange(false), 150)}
        className={`
          flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-colors
          ${isTypeSelected ? 'bg-primary text-primary-foreground' : 'text-muted hover:bg-card-hover hover:text-foreground'}
--- a/src/app/weekly-checkin/[id]/page.tsx
+++ b/src/app/weekly-checkin/[id]/page.tsx
@@ -87,9 +87,25 @@ export default async function WeeklyCheckInSessionPage({ params }: WeeklyCheckIn
        </div>
      </div>

-      {/* Current Quarter OKRs */}
+      {/* Current Quarter OKRs - editable by participant or team admin */}
      {currentQuarterOKRs.length > 0 && (
-        <CurrentQuarterOKRs okrs={currentQuarterOKRs} period={currentQuarterPeriod} />
+        <CurrentQuarterOKRs
+          okrs={currentQuarterOKRs}
+          period={currentQuarterPeriod}
+          canEdit={
+            (!!resolvedParticipant.matchedUser &&
+              authSession.user.id === resolvedParticipant.matchedUser.id) ||
+            (() => {
+              const participantTeamIds = new Set(
+                currentQuarterOKRs.map((okr) => okr.team?.id).filter(Boolean) as string[]
+              );
+              const adminTeamIds = userTeams
+                .filter((t) => t.userRole === 'ADMIN')
+                .map((t) => t.id);
+              return adminTeamIds.some((tid) => participantTeamIds.has(tid));
+            })()
+          }
+        />
      )}

      {/* Live Wrapper + Board */}
--- a/src/components/collaboration/ShareModal.tsx
+++ b/src/components/collaboration/ShareModal.tsx
@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { Avatar } from '@/components/ui/Avatar';
+import { Select } from '@/components/ui/Select';
 import { getTeamMembersForShare, type TeamWithMembers } from '@/lib/share-utils';
 import type { ShareRole } from '@prisma/client';

@@ -41,8 +42,10 @@ interface ShareModalProps {
  helpText?: React.ReactNode;
 }

-const SELECT_STYLE =
-  'appearance-none rounded-lg border border-border bg-card px-3 py-2.5 pr-10 text-sm text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20';
+const ROLE_OPTIONS = [
+  { value: 'EDITOR', label: 'Éditeur' },
+  { value: 'VIEWER', label: 'Lecteur' },
+] as const;

 export function ShareModal({
  isOpen,
@@ -151,10 +154,12 @@ export function ShareModal({
                  className="flex-1"
                  required
                />
-                <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={SELECT_STYLE}>
-                  <option value="EDITOR">Éditeur</option>
-                  <option value="VIEWER">Lecteur</option>
-                </select>
+                <Select
+                  value={role}
+                  onChange={(e) => setRole(e.target.value as ShareRole)}
+                  options={[...ROLE_OPTIONS]}
+                  wrapperClassName="w-auto shrink-0 min-w-[7rem]"
+                />
              </div>
            )}

@@ -171,30 +176,25 @@ export function ShareModal({
                  </p>
                ) : (
                  <div className="flex gap-2">
-                    <div className="relative flex-1">
-                      <select
+                    <Select
                      value={selectedMemberId}
                      onChange={(e) => setSelectedMemberId(e.target.value)}
-                        className={`w-full ${SELECT_STYLE}`}
+                      options={[
+                        { value: '', label: 'Sélectionner un membre', disabled: true },
+                        ...teamMembers.map((m) => ({
+                          value: m.id,
+                          label: m.name ? `${m.name} (${m.email})` : m.email,
+                        })),
+                      ]}
+                      wrapperClassName="flex-1 min-w-0"
                      required
-                      >
-                        <option value="">Sélectionner un membre</option>
-                        {teamMembers.map((m) => (
-                          <option key={m.id} value={m.id}>
-                            {m.name || m.email} {m.name && `(${m.email})`}
-                          </option>
-                        ))}
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </div>
-                    </div>
-                    <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={SELECT_STYLE}>
-                      <option value="EDITOR">Éditeur</option>
-                      <option value="VIEWER">Lecteur</option>
-                    </select>
+                    />
+                    <Select
+                      value={role}
+                      onChange={(e) => setRole(e.target.value as ShareRole)}
+                      options={[...ROLE_OPTIONS]}
+                      wrapperClassName="w-auto shrink-0 min-w-[7rem]"
+                    />
                  </div>
                )}
              </div>
@@ -211,39 +211,27 @@ export function ShareModal({
                    .
                  </p>
                ) : (
-                  <>
-                    <div className="relative">
-                      <select
+                  <div className="flex gap-2">
+                    <Select
                      value={teamId}
                      onChange={(e) => setTeamId(e.target.value)}
-                        className={`w-full ${SELECT_STYLE}`}
+                      options={[
+                        { value: '', label: 'Sélectionner une équipe', disabled: true },
+                        ...userTeams.map((team) => ({
+                          value: team.id,
+                          label: `${team.name}${team.userRole === 'ADMIN' ? ' (Admin)' : ''}`,
+                        })),
+                      ]}
+                      wrapperClassName="flex-1 min-w-0"
                      required
-                      >
-                        <option value="">Sélectionner une équipe</option>
-                        {userTeams.map((team) => (
-                          <option key={team.id} value={team.id}>
-                            {team.name} {team.userRole === 'ADMIN' && '(Admin)'}
-                          </option>
-                        ))}
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
+                    />
+                    <Select
+                      value={role}
+                      onChange={(e) => setRole(e.target.value as ShareRole)}
+                      options={[...ROLE_OPTIONS]}
+                      wrapperClassName="w-auto shrink-0 min-w-[7rem]"
+                    />
                  </div>
-                    </div>
-                    <div className="relative">
-                      <select value={role} onChange={(e) => setRole(e.target.value as ShareRole)} className={`w-full ${SELECT_STYLE}`}>
-                        <option value="EDITOR">Éditeur</option>
-                        <option value="VIEWER">Lecteur</option>
-                      </select>
-                      <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-                        <svg className="h-4 w-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </div>
-                    </div>
-                  </>
                )}
              </div>
            )}
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,15 +4,20 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useSession, signOut } from 'next-auth/react';
 import { useTheme } from '@/contexts/ThemeContext';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Avatar, RocketIcon } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';

 export function Header() {
  const { theme, toggleTheme } = useTheme();
  const { data: session, status } = useSession();
  const [menuOpen, setMenuOpen] = useState(false);
  const [workshopsOpen, setWorkshopsOpen] = useState(false);
+  const workshopsDropdownRef = useRef<HTMLDivElement>(null);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+  useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
+  useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
  const pathname = usePathname();

  const isActiveLink = (path: string) => pathname.startsWith(path);
@@ -61,10 +66,9 @@ export function Header() {
              </Link>

              {/* New Workshop Dropdown */}
-              <div className="relative">
+              <div className="relative" ref={workshopsDropdownRef}>
                <button
                  onClick={() => setWorkshopsOpen(!workshopsOpen)}
-                  onBlur={() => setTimeout(() => setWorkshopsOpen(false), 150)}
                  className={`flex items-center gap-1 text-sm font-medium transition-colors ${
                    WORKSHOPS.some((w) => isActiveLink(w.path))
                      ? 'text-primary'
@@ -120,7 +124,7 @@ export function Header() {
          {status === 'loading' ? (
            <div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
          ) : status === 'authenticated' && session?.user ? (
-            <div className="relative">
+            <div ref={userMenuRef} className="relative">
              <button
                onClick={() => setMenuOpen(!menuOpen)}
                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
@@ -145,8 +149,6 @@ export function Header() {
              </button>

              {menuOpen && (
-                <>
-                  <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
                <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
                    <div className="border-b border-border px-4 py-2">
                      <p className="text-xs text-muted">Connecté en tant que</p>
@@ -175,7 +177,6 @@ export function Header() {
                      Se déconnecter
                    </button>
                  </div>
-                </>
              )}
            </div>
          ) : (
--- a/src/components/swot/ActionPanel.tsx
+++ b/src/components/swot/ActionPanel.tsx
@@ -2,7 +2,7 @@

 import { useState, useTransition } from 'react';
 import type { SwotItem, Action, ActionLink, SwotCategory } from '@prisma/client';
-import { Button, Badge, Modal, ModalFooter, Input, Textarea } from '@/components/ui';
+import { Button, Badge, Modal, ModalFooter, Input, Textarea, Select } from '@/components/ui';
 import { createAction, updateAction, deleteAction } from '@/actions/swot';

 type ActionWithLinks = Action & {
@@ -40,11 +40,11 @@ const categoryShort: Record<SwotCategory, string> = {
 };

 const priorityLabels = ['Basse', 'Moyenne', 'Haute'];
-const statusLabels: Record<string, string> = {
-  todo: 'À faire',
-  in_progress: 'En cours',
-  done: 'Terminé',
-};
+const statusOptions = [
+  { value: 'todo', label: '📋 À faire' },
+  { value: 'in_progress', label: '⏳ En cours' },
+  { value: 'done', label: '✅ Terminé' },
+];

 export function ActionPanel({
  sessionId,
@@ -279,16 +279,15 @@ export function ActionPanel({
                >
                  {priorityLabels[action.priority]}
                </Badge>
-                <select
+                <Select
                  value={action.status}
                  onChange={(e) => handleStatusChange(action, e.target.value)}
-                  className="rounded border border-border bg-card px-2 py-1 text-xs text-foreground"
+                  options={statusOptions}
+                  size="xs"
+                  wrapperClassName="!w-auto shrink-0"
+                  className="!w-auto"
                  disabled={isPending}
-                >
-                  <option value="todo">{statusLabels.todo}</option>
-                  <option value="in_progress">{statusLabels.in_progress}</option>
-                  <option value="done">{statusLabels.done}</option>
-                </select>
+                />
              </div>
            </div>
          ))}
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -1,24 +1,63 @@
 import { forwardRef, SelectHTMLAttributes } from 'react';

-interface SelectOption {
+export interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
 }

-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+const SIZE_STYLES = {
+  xs: 'px-2 py-1 pr-7 text-xs',
+  sm: 'px-2 py-2 pr-8 text-sm',
+  md: 'px-4 py-2.5 pr-10 text-sm',
+  lg: 'px-4 py-2.5 pr-10 text-base',
+} as const;
+
+const ICON_SIZES = {
+  xs: 'h-3 w-3',
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-5 w-5',
+} as const;
+
+const ICON_POSITION = {
+  xs: 'right-2',
+  sm: 'right-2',
+  md: 'right-3',
+  lg: 'right-3',
+} as const;
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> {
  label?: string;
  error?: string;
  options: SelectOption[];
  placeholder?: string;
+  size?: keyof typeof SIZE_STYLES;
+  wrapperClassName?: string;
 }

 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className = '', label, error, id, options, placeholder, ...props }, ref) => {
+  (
+    {
+      className = '',
+      label,
+      error,
+      id,
+      options,
+      placeholder,
+      size = 'md',
+      wrapperClassName = '',
+      ...props
+    },
+    ref
+  ) => {
    const selectId = id || props.name;
+    const sizeStyles = SIZE_STYLES[size];
+    const iconSize = ICON_SIZES[size];
+    const iconPosition = ICON_POSITION[size];

    return (
-      <div className="w-full">
+      <div className={wrapperClassName || 'w-full'}>
        {label && (
          <label htmlFor={selectId} className="mb-2 block text-sm font-medium text-foreground">
            {label}
@@ -29,11 +68,13 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
            ref={ref}
            id={selectId}
            className={`
-              w-full appearance-none rounded-lg border bg-input px-4 py-2.5 pr-10 text-foreground
+              w-full appearance-none rounded-lg border bg-input text-foreground
              placeholder:text-muted-foreground
              focus:outline-none focus:ring-2 focus:ring-primary/20
              disabled:cursor-not-allowed disabled:opacity-50
-              ${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
+              border-input-border focus:border-primary
+              ${sizeStyles}
+              ${error ? 'border-destructive focus:border-destructive' : ''}
              ${className}
            `}
            {...props}
@@ -49,14 +90,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
              </option>
            ))}
          </select>
-          {/* Custom arrow icon */}
-          <div className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
-            <svg
-              className="h-5 w-5 text-muted-foreground"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
+          <div className={`pointer-events-none absolute ${iconPosition} top-1/2 -translate-y-1/2 text-muted-foreground`}>
+            <svg className={iconSize} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </div>
@@ -68,4 +103,3 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 );

 Select.displayName = 'Select';
-
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -14,6 +14,7 @@ export { ParticipantInput } from './ParticipantInput';
 export { Modal, ModalFooter } from './Modal';
 export { RocketIcon } from './RocketIcon';
 export { Select } from './Select';
+export type { SelectOption } from './Select';
 export { Textarea } from './Textarea';
 export { ToggleGroup } from './ToggleGroup';
 export type { ToggleOption } from './ToggleGroup';
--- a/src/components/weather/WeatherCard.tsx
+++ b/src/components/weather/WeatherCard.tsx
@@ -4,6 +4,7 @@ import { useState, useTransition, useEffect } from 'react';
 import { createOrUpdateWeatherEntry } from '@/actions/weather';
 import { Avatar } from '@/components/ui/Avatar';
 import { Textarea } from '@/components/ui/Textarea';
+import { Select } from '@/components/ui/Select';

 const WEATHER_EMOJIS = [
  { emoji: '', label: 'Aucun' },
@@ -140,29 +141,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Performance */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
+          <Select
            value={performanceEmoji || ''}
            onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{performanceEmoji || '-'}</div>
        )}
@@ -171,29 +157,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Moral */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
+          <Select
            value={moralEmoji || ''}
            onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{moralEmoji || '-'}</div>
        )}
@@ -202,29 +173,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Flux */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
+          <Select
            value={fluxEmoji || ''}
            onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{fluxEmoji || '-'}</div>
        )}
@@ -233,29 +189,14 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: Weathe
      {/* Création de valeur */}
      <td className="w-24 px-2 py-3">
        {canEditThis ? (
-          <div className="relative mx-auto w-fit">
-            <select
+          <Select
            value={valueCreationEmoji || ''}
            onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
-              className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
-            >
-              {WEATHER_EMOJIS.map(({ emoji }) => (
-                <option key={emoji || 'none'} value={emoji}>
-                  {emoji}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
-              <svg
-                className="h-3 w-3 text-muted"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </div>
+            options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
+            size="sm"
+            wrapperClassName="!w-fit mx-auto"
+            className="!w-16 min-w-16 text-center text-lg py-2.5"
+          />
        ) : (
          <div className="text-2xl text-center">{valueCreationEmoji || '-'}</div>
        )}
--- a/src/components/weekly-checkin/CurrentQuarterOKRs.tsx
+++ b/src/components/weekly-checkin/CurrentQuarterOKRs.tsx
@@ -1,10 +1,13 @@
 'use client';

 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui';
 import { Badge } from '@/components/ui';
-import type { OKR } from '@/lib/types';
+import { Input } from '@/components/ui';
+import { Button } from '@/components/ui';
+import type { OKR, KeyResult } from '@/lib/types';
 import { OKR_STATUS_LABELS } from '@/lib/types';

 type OKRWithTeam = OKR & {
@@ -17,10 +20,12 @@ type OKRWithTeam = OKR & {
 interface CurrentQuarterOKRsProps {
  okrs: OKRWithTeam[];
  period: string;
+  canEdit?: boolean;
 }

-export function CurrentQuarterOKRs({ okrs, period }: CurrentQuarterOKRsProps) {
+export function CurrentQuarterOKRs({ okrs, period, canEdit = false }: CurrentQuarterOKRsProps) {
  const [isExpanded, setIsExpanded] = useState(true);
+  const router = useRouter();

  if (okrs.length === 0) {
    return null;
@@ -60,7 +65,11 @@ export function CurrentQuarterOKRs({ okrs, period }: CurrentQuarterOKRsProps) {
                <div className="flex items-start justify-between gap-3">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
-                      <h4 className="font-medium text-foreground">{okr.objective}</h4>
+                      <EditableObjective
+                        okr={okr}
+                        canEdit={canEdit}
+                        onUpdate={() => router.refresh()}
+                      />
                      <Badge
                        variant="default"
                        style={{
@@ -72,7 +81,7 @@ export function CurrentQuarterOKRs({ okrs, period }: CurrentQuarterOKRsProps) {
                        {OKR_STATUS_LABELS[okr.status]}
                      </Badge>
                      {okr.progress !== undefined && (
-                        <span className="text-xs text-muted">{okr.progress}%</span>
+                        <span className="text-xs text-muted whitespace-nowrap">{okr.progress}%</span>
                      )}
                    </div>
                    {okr.description && (
@@ -80,24 +89,18 @@ export function CurrentQuarterOKRs({ okrs, period }: CurrentQuarterOKRsProps) {
                    )}
                    {okr.keyResults && okr.keyResults.length > 0 && (
                      <ul className="space-y-1 mt-2">
-                        {okr.keyResults.slice(0, 3).map((kr) => {
-                          const krProgress = kr.targetValue > 0 
-                            ? Math.round((kr.currentValue / kr.targetValue) * 100) 
-                            : 0;
-                          return (
-                            <li key={kr.id} className="text-xs text-muted flex items-center gap-2">
-                              <span className="w-1.5 h-1.5 rounded-full bg-primary" />
-                              <span className="flex-1">{kr.title}</span>
-                              <span className="text-muted">
-                                {kr.currentValue}/{kr.targetValue} {kr.unit}
-                              </span>
-                              <span className="text-xs">({krProgress}%)</span>
-                            </li>
-                          );
-                        })}
-                        {okr.keyResults.length > 3 && (
+                        {okr.keyResults.slice(0, 5).map((kr) => (
+                          <EditableKeyResultRow
+                            key={kr.id}
+                            kr={kr}
+                            okrId={okr.id}
+                            canEdit={canEdit}
+                            onUpdate={() => router.refresh()}
+                          />
+                        ))}
+                        {okr.keyResults.length > 5 && (
                          <li className="text-xs text-muted pl-3.5">
-                            +{okr.keyResults.length - 3} autre{okr.keyResults.length - 3 > 1 ? 's' : ''}
+                            +{okr.keyResults.length - 5} autre{okr.keyResults.length - 5 > 1 ? 's' : ''}
                          </li>
                        )}
                      </ul>
@@ -130,6 +133,179 @@ export function CurrentQuarterOKRs({ okrs, period }: CurrentQuarterOKRsProps) {
  );
 }

+function EditableObjective({
+  okr,
+  canEdit,
+  onUpdate,
+}: {
+  okr: OKRWithTeam;
+  canEdit: boolean;
+  onUpdate: () => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [objective, setObjective] = useState(okr.objective);
+  const [updating, setUpdating] = useState(false);
+
+  const handleSave = async () => {
+    setUpdating(true);
+    try {
+      const res = await fetch(`/api/okrs/${okr.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ objective: objective.trim() }),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        alert(err.error || 'Erreur lors de la mise à jour');
+        return;
+      }
+      setIsEditing(false);
+      onUpdate();
+    } catch (e) {
+      console.error(e);
+      alert('Erreur lors de la mise à jour');
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  if (canEdit && isEditing) {
+    return (
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <Input
+          value={objective}
+          onChange={(e) => setObjective(e.target.value)}
+          className="flex-1 h-8 text-sm"
+          autoFocus
+        />
+        <Button size="sm" onClick={handleSave} disabled={updating} className="h-7 text-xs">
+          {updating ? '...' : 'OK'}
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            setIsEditing(false);
+            setObjective(okr.objective);
+          }}
+          className="h-7 text-xs"
+        >
+          Annuler
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <h4
+      className={`font-medium text-foreground ${canEdit ? 'cursor-pointer hover:underline' : ''}`}
+      onClick={canEdit ? () => setIsEditing(true) : undefined}
+      role={canEdit ? 'button' : undefined}
+    >
+      {okr.objective}
+    </h4>
+  );
+}
+
+function EditableKeyResultRow({
+  kr,
+  okrId,
+  canEdit,
+  onUpdate,
+}: {
+  kr: KeyResult;
+  okrId: string;
+  canEdit: boolean;
+  onUpdate: () => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentValue, setCurrentValue] = useState(kr.currentValue);
+  const [updating, setUpdating] = useState(false);
+
+  const krProgress =
+    kr.targetValue > 0 ? Math.round((kr.currentValue / kr.targetValue) * 100) : 0;
+
+  const handleSave = async () => {
+    setUpdating(true);
+    try {
+      const res = await fetch(`/api/okrs/${okrId}/key-results/${kr.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ currentValue: Number(currentValue) }),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        alert(err.error || 'Erreur lors de la mise à jour');
+        return;
+      }
+      setIsEditing(false);
+      onUpdate();
+    } catch (e) {
+      console.error(e);
+      alert('Erreur lors de la mise à jour');
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  if (canEdit && isEditing) {
+    return (
+      <li className="text-xs flex items-center gap-2 py-1">
+        <span className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
+        <span className="flex-1 min-w-0 text-muted">{kr.title}</span>
+        <div className="flex items-center gap-1 flex-shrink-0 whitespace-nowrap">
+          <Input
+            type="number"
+            value={currentValue}
+            onChange={(e) => setCurrentValue(Number(e.target.value))}
+            min={0}
+            max={kr.targetValue * 2}
+            step="0.1"
+            className="h-6 w-16 text-xs"
+          />
+          <span className="text-muted">/ {kr.targetValue} {kr.unit}</span>
+        </div>
+        <div className="flex items-center gap-1 flex-shrink-0">
+          <Button size="sm" onClick={handleSave} disabled={updating} className="h-6 text-xs">
+            {updating ? '...' : 'OK'}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              setIsEditing(false);
+              setCurrentValue(kr.currentValue);
+            }}
+            className="h-6 text-xs"
+          >
+            Annuler
+          </Button>
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li className="text-xs text-muted flex items-center gap-2 py-1">
+      <span className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
+      <span className="flex-1 min-w-0">{kr.title}</span>
+      <span className="text-muted whitespace-nowrap flex-shrink-0">
+        {kr.currentValue}/{kr.targetValue} {kr.unit}
+      </span>
+      <span className="text-xs whitespace-nowrap flex-shrink-0">({krProgress}%)</span>
+      {canEdit && (
+        <button
+          type="button"
+          onClick={() => setIsEditing(true)}
+          className="text-primary hover:underline text-xs"
+        >
+          Modifier
+        </button>
+      )}
+    </li>
+  );
+}
+
 function getOKRStatusColor(status: OKR['status']): { bg: string; color: string } {
  switch (status) {
    case 'NOT_STARTED':
--- a/src/hooks/useClickOutside.ts
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,24 @@
+import { useEffect, RefObject } from 'react';
+
+/**
+ * Calls callback when a mousedown occurs outside the ref element.
+ * Uses mousedown (not click) so it fires before blur and gives consistent behavior.
+ */
+export function useClickOutside<T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  handler: () => void,
+  enabled = true
+) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        handler();
+      }
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [ref, handler, enabled]);
+}
Author	SHA1	Message	Date
Julien Froidefond	35228441e3	feat: add editable functionality for current quarter OKRs, allowing participants and team admins to modify objectives and key results, enhancing user interaction and collaboration All checks were successful Deploy with Docker Compose / deploy (push) Successful in 2m26s Details	2026-02-18 08:31:32 +01:00
Julien Froidefond	ee13f8ba99	feat: enhance dropdown components by integrating useClickOutside hook for improved user experience and accessibility in NewWorkshopDropdown and WorkshopTabs	2026-02-18 08:25:08 +01:00