feat: add error states to activity log and bin list pages

Surface API errors in ActivityPage and BinListPage with AlertTriangle
empty states. Expose error from LocationProvider context.

Author: akifbayram

src/features/activity/ActivityPage.tsx

@@ -1,4 +1,4 @@
-import { Clock } from 'lucide-react';
+import { AlertTriangle, Clock } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Crossfade } from '@/components/ui/crossfade';
@@ -22,7 +22,7 @@ export function ActivityPage() {
     () => ENTITY_TYPE_FILTERS.map((f) => ({ key: f.value, label: f.tKey ? t[f.tKey] : f.label })),
     [t],
   );
-  const { entries, isLoading, isLoadingMore, hasMore, loadMore } = usePaginatedActivityLog(entityTypeFilter, 50);
+  const { entries, isLoading, isLoadingMore, hasMore, error, loadMore } = usePaginatedActivityLog(entityTypeFilter, 50);
 
   useEffect(() => {
     if (!permissionsLoading && !isAdmin) {
@@ -71,7 +71,13 @@ export function ActivityPage() {
           </div>
         }
       >
-        {entries.length === 0 ? (
+        {error ? (
+          <EmptyState
+            icon={AlertTriangle}
+            title="Failed to load activity"
+            subtitle={error}
+          />
+        ) : entries.length === 0 ? (
           <EmptyState
             icon={Clock}
             title={entityTypeFilter ? 'No matching activity' : 'No activity yet'}

src/features/activity/useActivity.ts

@@ -14,11 +14,11 @@ export function usePaginatedActivityLog(entityTypeFilter?: EntityTypeFilter, pag
     }
   }
 
-  const { items, totalCount, isLoading, isLoadingMore, hasMore, loadMore } = usePaginatedList<ActivityLogEntry>(
+  const { items, totalCount, isLoading, isLoadingMore, hasMore, error, loadMore } = usePaginatedList<ActivityLogEntry>(
     basePath,
     [],
     pageSize,
   );
 
-  return { entries: items, totalCount, isLoading, isLoadingMore, hasMore, loadMore };
+  return { entries: items, totalCount, isLoading, isLoadingMore, hasMore, error, loadMore };
 }

src/features/bins/BinListPage.tsx

@@ -1,4 +1,5 @@
 import {
+  AlertTriangle,
   MapPin,
   PackageOpen,
   Plus,
@@ -78,7 +79,7 @@ export function BinListPage() {
   const { isAdmin, canWrite, canCreateBin } = usePermissions();
   const resetPage = useCallback(() => setPage(1), [setPage]);
   const { pageSize, setPageSize, pageSizeOptions } = usePageSize(resetPage);
-  const { bins, totalCount, totalPages, isLoading } = usePaginatedBinList(debouncedSearch, sort, sortDir, filters, page, pageSize, setPage);
+  const { bins, totalCount, totalPages, isLoading, error } = usePaginatedBinList(debouncedSearch, sort, sortDir, filters, page, pageSize, setPage);
   const allTags = useAllTags();
   const activeCount = countActiveFilters(filters);
   const { areas } = useAreaList(activeLocationId);
@@ -228,7 +229,13 @@ export function BinListPage() {
             isLoading={isLoading && bins.length === 0}
             skeleton={<BinListSkeleton viewMode={viewMode} />}
           >
-          {bins.length === 0 ? (
+          {error ? (
+              <EmptyState
+                icon={AlertTriangle}
+                title={`Failed to load ${t.bins}`}
+                subtitle={error}
+              />
+          ) : bins.length === 0 ? (
             search || activeCount > 0 ? (
               <EmptyState
                 icon={PackageOpen}

src/features/locations/useLocations.tsx

@@ -12,17 +12,18 @@ function notifyLocationsChanged() {
 interface LocationsContextValue {
   locations: Location[];
   isLoading: boolean;
+  error: string | null;
 }
 
 export const LocationsContext = createContext<LocationsContextValue | null>(null);
 
 export function LocationProvider({ children }: { children: React.ReactNode }) {
   const { token } = useAuth();
-  const { data: locations, isLoading } = useListData<Location>(
+  const { data: locations, isLoading, error } = useListData<Location>(
     token ? '/api/locations' : null,
     [Events.LOCATIONS],
   );
-  const value = useMemo(() => ({ locations, isLoading }), [locations, isLoading]);
+  const value = useMemo(() => ({ locations, isLoading, error }), [locations, isLoading, error]);
   return <LocationsContext.Provider value={value}>{children}</LocationsContext.Provider>;
 }
 

src/lib/__tests__/usePermissions.test.ts

@@ -113,7 +113,7 @@ describe('usePermissions', () => {
 
   it('isLoading passes through from useLocationList', () => {
     setup('admin');
-    mockUseLocationList.mockReturnValue({ locations: [], isLoading: true, refresh: vi.fn() } as ReturnType<typeof useLocationList>);
+    mockUseLocationList.mockReturnValue({ locations: [], isLoading: true, error: null, refresh: vi.fn() } as ReturnType<typeof useLocationList>);
     const { result } = renderHook(() => usePermissions());
     expect(result.current.isLoading).toBe(true);
   });