feat(contributions): ajouter la gestion des messages non lus et le comptage des contributions non lues

Author: Clément VALENTIN

apps/api/src/routers/energy_offers.py

@@ -261,6 +261,11 @@ async def list_my_contributions(current_user: User = Depends(get_current_user),
                 "created_at": msg.created_at.isoformat(),
             })
 
+        # Check for unread messages (for contributor: last message is from admin)
+        has_unread = False
+        if messages and messages[-1].is_from_admin:
+            has_unread = True
+
         # Get existing provider name if exists
         existing_provider_name = None
         if c.existing_provider_id:
@@ -271,6 +276,7 @@ async def list_my_contributions(current_user: User = Depends(get_current_user),
 
         data.append({
             "id": c.id,
+            "has_unread_messages": has_unread,
             "contribution_type": c.contribution_type,
             "status": c.status,
             # Provider info
@@ -299,6 +305,34 @@ async def list_my_contributions(current_user: User = Depends(get_current_user),
     return APIResponse(success=True, data=data)
 
 
+@router.get("/contributions/unread-count", response_model=APIResponse)
+async def get_unread_contributions_count(
+    current_user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+) -> APIResponse:
+    """Get the count of contributions with unread admin messages for the current user"""
+    result = await db.execute(
+        select(OfferContribution).where(OfferContribution.contributor_user_id == current_user.id)
+    )
+    contributions = result.scalars().all()
+
+    unread_count = 0
+    for c in contributions:
+        # Get last message for this contribution
+        messages_result = await db.execute(
+            select(ContributionMessage)
+            .where(ContributionMessage.contribution_id == c.id)
+            .order_by(ContributionMessage.created_at.desc())
+            .limit(1)
+        )
+        last_message = messages_result.scalar_one_or_none()
+        # Unread for contributor = last message is from admin
+        if last_message and last_message.is_from_admin:
+            unread_count += 1
+
+    return APIResponse(success=True, data={"unread_count": unread_count})
+
+
 @router.post("/contributions/{contribution_id}/reply", response_model=APIResponse)
 async def reply_to_contribution(
     contribution_id: str,

apps/web/src/api/energy.ts

@@ -214,6 +214,10 @@ export const energyApi = {
     return apiClient.get<Contribution[]>('energy/contributions')
   },
 
+  getUnreadContributionsCount: async () => {
+    return apiClient.get<{ unread_count: number }>('energy/contributions/unread-count')
+  },
+
   replyToContribution: async (contributionId: string, message: string) => {
     return apiClient.post(`energy/contributions/${contributionId}/reply`, { message })
   },

apps/web/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom'
-import { Home, LogOut, Moon, Sun, Heart, Shield, BookOpen, Calculator, Users, Menu, X, Calendar, ChevronLeft, ChevronRight, HelpCircle, UserCircle, Zap, TrendingUp, Trash2, Scale, ChevronDown, Euro } from 'lucide-react'
+import { Home, LogOut, Moon, Sun, Heart, Shield, BookOpen, Calculator, Users, Menu, X, Calendar, ChevronLeft, ChevronRight, HelpCircle, UserCircle, Zap, TrendingUp, Trash2, Scale, ChevronDown, Euro, MessageCircle } from 'lucide-react'
 import { useAuth } from '@/hooks/useAuth'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useThemeStore } from '@/stores/themeStore'
@@ -12,8 +12,9 @@ import PageHeader from './PageHeader'
 import { PageTransition } from './PageTransition'
 import { SEO } from './SEO'
 import { useSEO } from '@/hooks/useSEO'
-import { useQueryClient } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { adminApi } from '@/api/admin'
+import { energyApi } from '@/api/energy'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { user, logout } = useAuth()
@@ -32,6 +33,33 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   const [adminMenuOpen, setAdminMenuOpen] = useState(false)
   const queryClient = useQueryClient()
 
+  // Fetch unread contributions count for regular users
+  const { data: unreadContributionsData } = useQuery({
+    queryKey: ['unread-contributions-count'],
+    queryFn: async () => {
+      const response = await energyApi.getUnreadContributionsCount()
+      return response.data as { unread_count: number }
+    },
+    enabled: !!user,
+    refetchInterval: 30000, // Refresh every 30 seconds
+    staleTime: 0,
+  })
+
+  // Fetch pending contributions count for admins
+  const { data: adminStatsData } = useQuery({
+    queryKey: ['admin-contribution-stats'],
+    queryFn: async () => {
+      const response = await energyApi.getContributionStats()
+      return response.data as { pending_count: number, approved_this_month: number, rejected_count: number, approved_count: number }
+    },
+    enabled: !!user && canAccessAdmin(),
+    refetchInterval: 30000,
+    staleTime: 0,
+  })
+
+  const unreadContributionsCount = unreadContributionsData?.unread_count || 0
+  const pendingContributionsCount = adminStatsData?.pending_count || 0
+
   // Persist sidebar state to localStorage
   useEffect(() => {
     localStorage.setItem('sidebarCollapsed', JSON.stringify(sidebarCollapsed))
@@ -53,7 +81,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     { to: '/production', icon: Sun, label: 'Production' },
     { to: '/balance', icon: Scale, label: 'Bilan' },
     { to: '/simulator', icon: Calculator, label: 'Simulateur' },
-    { to: '/contribute', icon: Users, label: 'Contribuer' },
+    { to: '/contribute', icon: Users, label: 'Contribuer', badgeCount: unreadContributionsCount },
     { to: '/tempo', icon: Calendar, label: 'Tempo' },
     { to: '/ecowatt', icon: Zap, label: 'EcoWatt' },
   ]
@@ -70,7 +98,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     { to: '/admin/users', label: 'Utilisateurs' },
     { to: '/admin/tempo', label: 'Tempo' },
     { to: '/admin/ecowatt', label: 'EcoWatt' },
-    { to: '/admin/contributions', label: 'Contributions' },
+    { to: '/admin/contributions', label: 'Contributions', badgeCount: pendingContributionsCount },
     { to: '/admin/offers', label: 'Offres' },
     { to: '/admin/roles', label: 'Rôles' },
     { to: '/admin/logs', label: 'Logs' },
@@ -263,11 +291,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             {/* Other menu items */}
             {menuItems.filter(item => item.to !== '/dashboard').map((item) => {
               const isActive = location.pathname === item.to
+              const hasBadge = item.badgeCount !== undefined && item.badgeCount > 0
               return (
                 <Link
                   key={item.to}
                   to={item.to}
-                  className={`flex items-center gap-3 px-3 py-2.5 rounded-md transition-colors ${
+                  className={`flex items-center gap-3 px-3 py-2.5 rounded-md transition-colors relative ${
                     isActive
                       ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400'
                       : 'hover:bg-gray-100 dark:hover:bg-gray-700'
@@ -276,9 +305,23 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                   data-tour={item.to === '/simulator' ? 'nav-simulator' :
                             item.to === '/contribute' ? 'nav-contribute' : undefined}
                 >
-                  <item.icon size={20} className="flex-shrink-0" />
+                  <div className="relative">
+                    <item.icon size={20} className="flex-shrink-0" />
+                    {hasBadge && sidebarCollapsed && (
+                      <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-orange-500 text-[10px] font-bold text-white">
+                        {item.badgeCount > 9 ? '9+' : item.badgeCount}
+                      </span>
+                    )}
+                  </div>
                   {!sidebarCollapsed && (
-                    <span className="font-medium">{item.label}</span>
+                    <>
+                      <span className="font-medium">{item.label}</span>
+                      {hasBadge && (
+                        <span className="ml-auto flex h-5 min-w-[20px] items-center justify-center rounded-full bg-orange-500 px-1.5 text-xs font-bold text-white">
+                          {item.badgeCount > 99 ? '99+' : item.badgeCount}
+                        </span>
+                      )}
+                    </>
                   )}
                 </Link>
               )
@@ -324,13 +367,18 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                         <Link
                           key={subItem.to}
                           to={subItem.to}
-                          className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${
+                          className={`flex items-center justify-between px-3 py-2 rounded-md transition-colors ${
                             location.pathname === subItem.to
                               ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400'
                               : 'hover:bg-gray-100 dark:hover:bg-gray-700'
                           }`}
                         >
                           <span className="font-medium text-sm">{subItem.label}</span>
+                          {subItem.badgeCount && subItem.badgeCount > 0 && (
+                            <span className="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-orange-500 px-1.5 text-xs font-bold text-white">
+                              {subItem.badgeCount > 99 ? '99+' : subItem.badgeCount}
+                            </span>
+                          )}
                         </Link>
                       ))}
                     </div>
@@ -538,6 +586,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             {/* Other menu items */}
             {menuItems.filter(item => item.to !== '/dashboard').map((item) => {
               const isActive = location.pathname === item.to
+              const hasBadge = item.badgeCount !== undefined && item.badgeCount > 0
               return (
                 <Link
                   key={item.to}
@@ -549,8 +598,17 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                       : 'hover:bg-gray-100 dark:hover:bg-gray-700'
                   }`}
                 >
-                  <item.icon size={20} />
+                  {hasBadge ? (
+                    <MessageCircle size={20} className="text-orange-500" />
+                  ) : (
+                    <item.icon size={20} />
+                  )}
                   <span className="font-medium">{item.label}</span>
+                  {hasBadge && (
+                    <span className="ml-auto flex h-5 min-w-[20px] items-center justify-center rounded-full bg-orange-500 px-1.5 text-xs font-bold text-white">
+                      {item.badgeCount > 99 ? '99+' : item.badgeCount}
+                    </span>
+                  )}
                 </Link>
               )
             })}
@@ -593,13 +651,18 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                           key={subItem.to}
                           to={subItem.to}
                           onClick={() => setMobileMenuOpen(false)}
-                          className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${
+                          className={`flex items-center justify-between px-3 py-2 rounded-md transition-colors ${
                             location.pathname === subItem.to
                               ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400'
                               : 'hover:bg-gray-100 dark:hover:bg-gray-700'
                           }`}
                         >
                           <span className="font-medium text-sm">{subItem.label}</span>
+                          {subItem.badgeCount && subItem.badgeCount > 0 && (
+                            <span className="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-orange-500 px-1.5 text-xs font-bold text-white">
+                              {subItem.badgeCount > 99 ? '99+' : subItem.badgeCount}
+                            </span>
+                          )}
                         </Link>
                       ))}
                     </div>

apps/web/src/pages/AdminContributions.tsx

@@ -228,8 +228,6 @@ export default function AdminContributions() {
       return await energyApi.requestContributionInfo(id, message)
     },
     onSuccess: (_data, variables) => {
-      setNotification({ type: 'success', message: 'Message envoyé au contributeur.' })
-      setTimeout(() => setNotification(null), 5000)
       // Reload messages for this contribution
       loadMessages(variables.id)
       // Clear the input