Add live data to project summary

ami/main/api/serializers.py

@@ -1704,3 +1704,15 @@ class Meta:
             "total_size",
             "last_checked",
         ]
+
+
+class UserIdentificationCountSerializer(serializers.Serializer):
+    """
+    Serializer for user identification counts.
+    """
+
+    id = serializers.IntegerField()
+    name = serializers.CharField()
+    email = serializers.CharField()
+    image = serializers.CharField(required=False, allow_null=True)
+    identification_count = serializers.IntegerField()

ami/main/api/views.py

@@ -5,7 +5,7 @@
 from django.contrib.postgres.search import TrigramSimilarity
 from django.core import exceptions
 from django.db import models
-from django.db.models import Prefetch, Q
+from django.db.models import Count, Prefetch, Q
 from django.db.models.functions import Coalesce
 from django.db.models.query import QuerySet
 from django.forms import BooleanField, CharField, IntegerField
@@ -90,6 +90,7 @@
     TaxonListSerializer,
     TaxonSearchResultSerializer,
     TaxonSerializer,
+    UserIdentificationCountSerializer,
 )
 
 logger = logging.getLogger(__name__)
@@ -1851,6 +1852,59 @@ def get(self, request):
         return Response(data)
 
 
+class UserIdentificationCountsView(GenericAPIView, ProjectMixin):
+    """
+    API endpoint that returns identification counts for top 5 users.
+    Optionally restricted to a specific project via project_id query parameter.
+    """
+
+    permission_classes = [IsActiveStaffOrReadOnly]
+    serializer_class = UserIdentificationCountSerializer
+
+    @extend_schema(parameters=[project_id_doc_param])
+    def get(self, request):
+        """
+        Return top 5 users by identification count, optionally filtered by project.
+        """
+        project = self.get_active_project()
+
+        # Start with user queryset
+        user_queryset = User.objects.all()
+
+        # Filter by project if provided, then annotate with count
+        if project:
+            user_queryset = (
+                user_queryset.filter(identifications__occurrence__project=project)
+                .annotate(identification_count=Count("identifications", distinct=True))
+                .distinct()
+            )
+        else:
+            user_queryset = user_queryset.annotate(identification_count=Count("identifications"))
+
+        # Get top 5 users, ordered by identification count (descending)
+        top_identifiers = user_queryset.filter(identification_count__gt=0).order_by("-identification_count")[:5]
+
+        # Prepare serialized data
+        data = []
+        for user in top_identifiers:
+            data.append(
+                {
+                    "id": user.id,
+                    "name": user.name if user.name else None,
+                    "email": user.email,
+                    "image": user.image.url if user.image else None,
+                    "identification_count": user.identification_count,
+                }
+            )
+
+        return Response(
+            {
+                "project_id": project.id if project else None,
+                "top_identifiers": data,
+            }
+        )
+
+
 _STORAGE_CONNECTION_STATUS = [
     # These come from the ConnetionStatus react component
     # @TODO use ENUM

config/api_router.py

@@ -77,6 +77,9 @@
     path("auth/", include("djoser.urls.authtoken")),
     path("status/summary/", views.SummaryView.as_view(), name="status-summary"),
     path("status/storage/", views.StorageStatus.as_view(), name="status-storage"),
+    path(
+        "users/identifications/top/", views.UserIdentificationCountsView.as_view(), name="user-identification-counts"
+    ),
     path(
         "users/roles/",
         RolesAPIView.as_view(),

ui/src/components/error-state/error-state.tsx

@@ -26,7 +26,7 @@ export const ErrorState = ({ compact, error }: ErrorStateProps) => {
     return (
       <div className="flex items-center gap-2">
         <AlertCircleIcon className="w-4 h-4 text-destructive" />
-        <span className="pt-0.5 body-small text-muted-foreground">{title}</span>
+        <span className="pt-0.5 text-muted-foreground">{title}</span>
       </div>
     )
   }

ui/src/data-services/hooks/identifications/useTopIdentifiers.ts

@@ -0,0 +1,29 @@
+import { API_ROUTES, API_URL } from 'data-services/constants'
+import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
+
+interface Response {
+  project_id?: number
+  top_identifiers: {
+    id: number
+    name?: string
+    email: string
+    image?: string
+    identification_count: number
+  }[]
+}
+
+export const useTopIdentifiers = (projectId?: string) => {
+  const url = `${API_URL}/${API_ROUTES.USERS}/${API_ROUTES.IDENTIFICATIONS}/top/`
+
+  const { data, isLoading, isFetching, error } = useAuthorizedQuery<Response>({
+    queryKey: [API_ROUTES.IDENTIFICATIONS, 'top', projectId],
+    url: projectId ? `${url}?project_id=${projectId}` : url,
+  })
+
+  return {
+    data,
+    isLoading,
+    isFetching,
+    error,
+  }
+}

ui/src/data-services/hooks/occurrences/useLatestOccurrences.ts

@@ -0,0 +1,11 @@
+import { useOccurrences } from './useOccurrences'
+
+export const useLatestOccurrences = (projectId: string) => {
+  const result = useOccurrences({
+    pagination: { page: 0, perPage: 5 },
+    projectId,
+    sort: { field: 'first_appearance_timestamp', order: 'desc' },
+  })
+
+  return result
+}

ui/src/data-services/hooks/species/useTopSpecies.ts

@@ -0,0 +1,11 @@
+import { useSpecies } from './useSpecies'
+
+export const useTopSpecies = (projectId: string) => {
+  const result = useSpecies({
+    pagination: { page: 0, perPage: 5 },
+    projectId,
+    sort: { field: 'occurrences_count', order: 'desc' },
+  })
+
+  return result
+}

ui/src/pages/project/sidebar/sidebar.tsx

@@ -25,7 +25,7 @@ export const Sidebar = ({ project }: { project: ProjectDetails }) => {
   }, [activeItem])
 
   return (
-    <div className="w-full h-min shrink-0 p-0 rounded-md border border-border overflow-hidden bg-background md:w-72">
+    <div className="w-full shrink-0 p-0 rounded-md border border-border overflow-hidden bg-background md:w-72">
       {project.image ? (
         <img src={project.image} alt="" />
       ) : (

ui/src/pages/project/summary/list-item.tsx

@@ -0,0 +1,46 @@
+import { ImageIcon, UserIcon } from 'lucide-react'
+
+export const ListItem = ({
+  count,
+  item,
+}: {
+  count?: number | string
+  item: {
+    image: { src?: string; variant?: 'default' | 'user' }
+    text: string
+    title?: string
+  }
+}) => (
+  <div className="flex items-center gap-4 p-2 pr-4">
+    {item.image.variant === 'user' ? (
+      <UserImage image={item.image.src} />
+    ) : (
+      <Image image={item.image.src} />
+    )}
+    <div className="flex flex-col overflow-hidden">
+      <div className="flex items-center gap-4">
+        {item.title ? (
+          <span className="truncate font-medium">{item.title}</span>
+        ) : null}
+      </div>
+      <span className="truncate">{item.text}</span>
+    </div>
+    {count !== undefined ? (
+      <span className="body-small grow text-right">
+        {count.toLocaleString()}
+      </span>
+    ) : null}
+  </div>
+)
+
+const Image = ({ image }: { image?: string }) => (
+  <div className="shrink-0 flex items-center justify-center w-12 h-12 border border-border rounded-md text-muted-foreground overflow-hidden">
+    {image ? <img alt="" src={image} /> : <ImageIcon className="w-4 h-4" />}
+  </div>
+)
+
+const UserImage = ({ image }: { image?: string }) => (
+  <div className="shrink-0 flex items-center justify-center w-12 h-12 border border-border rounded-full text-muted-foreground overflow-hidden">
+    {image ? <img alt="" src={image} /> : <UserIcon className="w-4 h-4" />}
+  </div>
+)