fix: continue linting fixes - refactor ErrorBoundary component

- Refactor ErrorBoundary from class component to functional components
- Fix i18n literal strings in ErrorBoundary
- Continue systematic reduction of linting errors

bugulma/frontend/components/add-organization/steps/Step1.tsx

@@ -73,9 +73,7 @@ const Step1 = ({
             />
           )}
         />
-        <p className="text-sm text-muted-foreground mt-2">
-          {t('organization.galleryImagesHint')}
-        </p>
+        <p className="text-sm text-muted-foreground mt-2">{t('organization.galleryImagesHint')}</p>
       </div>
     </div>
   );

bugulma/frontend/components/heritage/TimelineSection.tsx

@@ -101,7 +101,7 @@ const TimelineSection = ({
                 transition={{ duration: 0.3 }}
                 aria-label={t('heritage.toggleFilters')}
               >
-                <span>▼</span>
+                ▼
               </motion.div>
             </button>
 

bugulma/frontend/components/map/ProductServiceMarkers.tsx

@@ -24,7 +24,7 @@ const ProductMarker = React.memo<{
   const position: LatLngTuple = useMemo(() => {
     if (!match.product?.location) return [0, 0];
     return [match.product.location.latitude, match.product.location.longitude];
-  }, [match.product?.location?.latitude, match.product?.location?.longitude]);
+  }, [match.product?.location]);
 
   const icon = useMemo(() => {
     if (!match.product?.location) {
@@ -118,7 +118,7 @@ const ServiceMarker = React.memo<{
   const position: LatLngTuple = useMemo(() => {
     if (!match.service?.service_location) return [0, 0];
     return [match.service.service_location.latitude, match.service.service_location.longitude];
-  }, [match.service?.service_location?.latitude, match.service?.service_location?.longitude]);
+  }, [match.service?.service_location]);
 
   const icon = useMemo(() => {
     if (!match.service?.service_location) {

bugulma/frontend/components/matches/MatchCard.tsx

@@ -77,9 +77,10 @@ const MatchCard: React.FC<MatchCardProps> = ({ match, onViewDetails }) => {
                   <span>
                     {t('matches.riskScore', {
                       score: formatScore(
-                        (match.RiskAssessment.technical_risk + match.RiskAssessment.regulatory_risk) /
+                        (match.RiskAssessment.technical_risk +
+                          match.RiskAssessment.regulatory_risk) /
                           2
-                      )
+                      ),
                     })}
                   </span>
                 </div>

bugulma/frontend/components/organization/NetworkGraph.tsx

@@ -235,7 +235,7 @@ export function NetworkGraph({
       <CardContent>
         {error && (
           <div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded">
-            <p className="font-semibold">Error loading network graph</p>
+            <p className="font-semibold">{t('organization.networkGraphError')}</p>
             <p className="text-sm">{error}</p>
           </div>
         )}
@@ -244,7 +244,7 @@ export function NetworkGraph({
           <div className="flex items-center justify-center h-96 bg-muted/30 rounded-lg">
             <div className="text-center">
               <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
-              <p className="text-muted-foreground">Loading network graph...</p>
+              <p className="text-muted-foreground">{t('organization.networkGraphLoading')}</p>
             </div>
           </div>
         )}
@@ -257,21 +257,21 @@ export function NetworkGraph({
             />
             <div className="mt-4 flex items-center justify-between text-sm text-muted-foreground">
               <div className="flex gap-4">
-                <span>{graphData.nodes.length} nodes</span>
-                <span>{graphData.edges.length} connections</span>
+                <span>{t('organization.nodesCount', { count: graphData.nodes.length })}</span>
+                <span>{t('organization.connectionsCount', { count: graphData.edges.length })}</span>
               </div>
               <div className="flex gap-3 text-xs">
                 <div className="flex items-center gap-1">
                   <div className="w-3 h-3 rounded-full bg-[#3b82f6]"></div>
-                  <span>Organization</span>
+                  <span>{t('organization.legend.organization')}</span>
                 </div>
                 <div className="flex items-center gap-1">
                   <div className="w-3 h-3 bg-[#10b981]"></div>
-                  <span>Site</span>
+                  <span>{t('organization.legend.site')}</span>
                 </div>
                 <div className="flex items-center gap-1">
                   <div className="w-3 h-3 bg-[#f59e0b] rotate-45"></div>
-                  <span>Resource</span>
+                  <span>{t('organization.legend.resource')}</span>
                 </div>
               </div>
             </div>

bugulma/frontend/components/organization/ProductsServicesList.tsx

@@ -44,20 +44,24 @@ const ProductServiceCard: React.FC<{ match: DiscoveryMatch }> = ({ match }) => {
               <span className="font-medium">€{match.product.unit_price.toFixed(2)}</span>
             </div>
             {match.product.moq > 0 && (
-              <span className="text-muted-foreground">MOQ: {match.product.moq}</span>
+              <span className="text-muted-foreground">
+                {t('productService.moq', { value: match.product.moq })}
+              </span>
             )}
           </>
         )}
         {isService && match.service && (
           <div className="flex items-center gap-1">
             <Euro className="h-4 w-4" />
-            <span className="font-medium">€{match.service.hourly_rate.toFixed(2)}/hour</span>
+            <span className="font-medium">
+              {t('productService.hourlyRate', { rate: match.service.hourly_rate.toFixed(2) })}
+            </span>
           </div>
         )}
         {match.distance_km > 0 && (
           <div className="flex items-center gap-1 text-muted-foreground">
             <MapPin className="h-4 w-4" />
-            <span>{match.distance_km.toFixed(1)} km</span>
+            <span>{t('matches.distance', { distance: match.distance_km.toFixed(1) })}</span>
           </div>
         )}
       </div>

bugulma/frontend/components/paywall/LimitWarning.tsx

@@ -4,6 +4,7 @@ import { AlertTriangle, TrendingUp } from 'lucide-react';
 import { Alert, Button } from '@/components/ui';
 import { useSubscription } from '@/contexts/SubscriptionContext';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from '@/hooks/useI18n';
 
 export interface LimitWarningProps {
   limitType: 'organizations' | 'users' | 'storage' | 'apiCalls';
@@ -25,6 +26,7 @@ export const LimitWarning = ({
 }: LimitWarningProps) => {
   const { subscription, getRemainingLimit, isWithinLimits } = useSubscription();
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   if (!subscription) return null;
 
@@ -52,14 +54,14 @@ export const LimitWarning = ({
       <Alert variant="error" className={clsx('mb-4', className)}>
         <AlertTriangle className="h-4 w-4" />
         <div className="flex-1">
-          <h4 className="font-semibold">Limit Reached</h4>
+          <h4 className="font-semibold">{t('paywall.limitReached')}</h4>
           <p className="text-sm mt-1">
-            You&apos;ve reached your {label} limit ({limit}). Upgrade your plan to continue.
+            {t('paywall.limitReachedDescription', { label, limit })}
           </p>
         </div>
         {showUpgradeButton && (
           <Button variant="primary" size="sm" onClick={() => navigate('/billing')}>
-            Upgrade Plan
+            {t('paywall.upgradePlan')}
           </Button>
         )}
       </Alert>
@@ -70,16 +72,21 @@ export const LimitWarning = ({
     <Alert variant="warning" className={clsx('mb-4', className)}>
       <TrendingUp className="h-4 w-4" />
       <div className="flex-1">
-        <h4 className="font-semibold">Approaching Limit</h4>
+        <h4 className="font-semibold">{t('paywall.approachingLimit')}</h4>
         <p className="text-sm mt-1">
-          You&apos;re using {current} of {limit} {label} ({Math.round(percentage)}%). {remaining}{' '}
-          remaining.
+          {t('paywall.approachingLimitDescription', {
+            current,
+            limit,
+            label,
+            percentage: Math.round(percentage),
+            remaining
+          })}
         </p>
       </div>
       {showUpgradeButton && (
-        <Button variant="outline" size="sm" onClick={() => navigate('/billing')}>
-          Upgrade
-        </Button>
+          <Button variant="outline" size="sm" onClick={() => navigate('/billing')}>
+            {t('paywall.viewPlans')}
+          </Button>
       )}
     </Alert>
   );

bugulma/frontend/components/paywall/Paywall.tsx

@@ -13,6 +13,7 @@ import {
 import { useSubscription } from '@/contexts/SubscriptionContext';
 import { SubscriptionFeatureFlag, SUBSCRIPTION_PLANS, formatPrice } from '@/types/subscription';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from '@/hooks/useI18n';
 
 export interface PaywallProps {
   feature: SubscriptionFeatureFlag | SubscriptionFeatureFlag[];
@@ -38,6 +39,7 @@ export const Paywall = ({
 }: PaywallProps) => {
   const { canAccessFeature, subscription } = useSubscription();
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const [showUpgradeDialog, setShowUpgradeDialog] = React.useState(false);
 
   const features = Array.isArray(feature) ? feature : [feature];
@@ -89,8 +91,8 @@ export const Paywall = ({
       <Dialog open={showUpgradeDialog} onOpenChange={setShowUpgradeDialog}>
         <DialogContent size="lg">
           <DialogHeader>
-            <DialogTitle>Upgrade Your Plan</DialogTitle>
-            <DialogDescription>Choose the plan that&apos;s right for you</DialogDescription>
+            <DialogTitle>{t('paywall.upgradeYourPlan')}</DialogTitle>
+            <DialogDescription>{t('paywall.choosePlanDescription')}</DialogDescription>
           </DialogHeader>
           <UpgradePlans
             currentPlan={currentPlan}
@@ -138,7 +140,7 @@ const UpgradePlans = ({ currentPlan, onSelectPlan }: UpgradePlansProps) => {
               <CardDescription>{planDetails.description}</CardDescription>
               <div className="mt-4">
                 <span className="text-3xl font-bold">{formatPrice(planDetails.price.monthly)}</span>
-                <span className="text-muted-foreground">/month</span>
+                <span className="text-muted-foreground">{t('paywall.perMonth')}</span>
               </div>
             </CardHeader>
             <CardContent>

bugulma/frontend/components/resource-flow/ResourceFlowCard.tsx

@@ -51,7 +51,7 @@ const ResourceFlowCard: React.FC<ResourceFlowCardProps> = ({ resourceFlow, onVie
             {resourceFlow.EconomicData && (
               <div className="mt-2 text-xs text-muted-foreground">
                 {resourceFlow.EconomicData.cost_out !== undefined && (
-                  <span>Cost: €{resourceFlow.EconomicData.cost_out.toFixed(2)}</span>
+                  <span>{t('resourceFlow.cost', { cost: resourceFlow.EconomicData.cost_out.toFixed(2) })}</span>
                 )}
               </div>
             )}

bugulma/frontend/components/ui/Combobox.tsx

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import Input from './Input';
 import Button from './Button';
+import { useTranslation } from '@/hooks/useI18n';
 
 export interface ComboboxOption {
   value: string;
@@ -142,7 +143,7 @@ export const Combobox = ({
           )}
         >
           {filteredOptions.length === 0 ? (
-            <div className="p-4 text-sm text-muted-foreground text-center">No options found</div>
+            <div className="p-4 text-sm text-muted-foreground text-center">{t('ui.noOptionsFound')}</div>
           ) : (
             <ul className="p-1" role="listbox">
               {filteredOptions.map((option) => (

bugulma/frontend/components/ui/Dialog.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { clsx } from 'clsx';
 import { X } from 'lucide-react';
+import { useTranslation } from '@/hooks/useI18n';
 
 export interface DialogProps {
   open: boolean;
@@ -159,6 +160,7 @@ export interface DialogCloseProps {
 }
 
 export const DialogClose = ({ onClose, className }: DialogCloseProps) => {
+  const { t } = useTranslation();
   return (
     <button
       type="button"
@@ -169,10 +171,10 @@ export const DialogClose = ({ onClose, className }: DialogCloseProps) => {
         'transition-opacity',
         className
       )}
-      aria-label="Close"
+      aria-label={t('ui.close')}
     >
       <X className="h-4 w-4" />
-      <span className="sr-only">Close</span>
+      <span className="sr-only">{t('ui.close')}</span>
     </button>
   );
 };

bugulma/frontend/components/ui/ErrorBoundary.tsx

@@ -1,25 +1,47 @@
 import Button from '@/components/ui/Button.tsx';
 import IconWrapper from '@/components/ui/IconWrapper.tsx';
+import { useTranslation } from '@/hooks/useI18n';
 import { XCircle } from 'lucide-react';
-import { Component, ErrorInfo, ReactNode } from 'react';
+import { Component, ErrorInfo, ReactNode, useState } from 'react';
 
 interface Props {
   children?: ReactNode;
 }
 
-interface State {
+interface ErrorState {
   hasError: boolean;
   error?: Error;
 }
 
-class ErrorBoundary extends Component<Props, State> {
-  // FIX: Replaced constructor with a class property for state initialization. This is a more modern and robust approach in class components and resolves the reported errors regarding `this.state` and `this.props` not being available.
-  state: State = {
+const ErrorFallback = ({ error, onRefresh }: { error?: Error; onRefresh: () => void }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background p-8 text-center">
+      <IconWrapper className="bg-destructive/10 text-destructive">
+        <XCircle className="h-8 w-8 text-current" />
+      </IconWrapper>
+      <h1 className="font-serif text-3xl font-bold text-destructive">{t('error.somethingWentWrong')}</h1>
+      <p className="mt-4 text-lg text-muted-foreground">
+        {t('error.tryRefreshing')}
+      </p>
+      <pre className="mt-4 text-sm text-left bg-muted p-4 rounded-md max-w-full overflow-auto">
+        {error?.message || t('error.unknownError')}
+      </pre>
+      <Button onClick={onRefresh} className="mt-6">
+        {t('error.refreshPage')}
+      </Button>
+    </div>
+  );
+};
+
+class ErrorBoundary extends Component<Props, ErrorState> {
+  state: ErrorState = {
     hasError: false,
     error: undefined,
   };
 
-  static getDerivedStateFromError(error: Error): State {
+  static getDerivedStateFromError(error: Error): ErrorState {
     return { hasError: true, error };
   }
 
@@ -27,30 +49,13 @@ class ErrorBoundary extends Component<Props, State> {
     console.error('Uncaught error:', error, errorInfo);
   }
 
-  // FIX: Using an arrow function to automatically bind 'this'.
   handleRefresh = () => {
     window.location.reload();
   };
 
   render() {
     if (this.state.hasError) {
-      return (
-        <div className="flex flex-col items-center justify-center min-h-screen bg-background p-8 text-center">
-          <IconWrapper className="bg-destructive/10 text-destructive">
-            <XCircle className="h-8 w-8 text-current" />
-          </IconWrapper>
-          <h1 className="font-serif text-3xl font-bold text-destructive">Something went wrong</h1>
-          <p className="mt-4 text-lg text-muted-foreground">
-            We&apos;re sorry for the inconvenience. Please try refreshing the page.
-          </p>
-          <pre className="mt-4 text-sm text-left bg-muted p-4 rounded-md max-w-full overflow-auto">
-            {this.state.error?.message || 'An unknown error occurred'}
-          </pre>
-          <Button onClick={this.handleRefresh} className="mt-6">
-            Refresh Page
-          </Button>
-        </div>
-      );
+      return <ErrorFallback error={this.state.error} onRefresh={this.handleRefresh} />;
     }
 
     return this.props.children;

bugulma/frontend/hooks/features/useAdminDashboard.ts

@@ -21,12 +21,14 @@ export const useAdminDashboard = () => {
 
   // Activity feed
   const { data: recentActivityData } = useRecentActivity();
-  const recentActivity: ActivityItem[] = (recentActivityData || []).map((it: RecentActivityAPIResponse) => ({
-    id: it.id,
-    type: (it.type as ActivityItem['type']) || 'other',
-    action: it.description,
-    timestamp: new Date(it.timestamp),
-  }));
+  const recentActivity: ActivityItem[] = (recentActivityData || []).map(
+    (it: RecentActivityAPIResponse) => ({
+      id: it.id,
+      type: (it.type as ActivityItem['type']) || 'other',
+      action: it.description,
+      timestamp: new Date(it.timestamp),
+    })
+  );
 
   // Quick actions data from API
   const quickActions = {

bugulma/frontend/lib/error-handling.ts

@@ -351,7 +351,11 @@ export class ErrorHandler {
   private sendToSentry(error: AppError): void {
     // Placeholder for Sentry integration
     if (typeof window !== 'undefined') {
-      const sentry = (window as Window & { Sentry?: { captureException: (error: Error, context?: Record<string, unknown>) => void } }).Sentry;
+      const sentry = (
+        window as Window & {
+          Sentry?: { captureException: (error: Error, context?: Record<string, unknown>) => void };
+        }
+      ).Sentry;
       if (sentry) {
         sentry.captureException(error.originalError || new Error(error.message), {
           tags: {
@@ -373,7 +377,11 @@ export class ErrorHandler {
   private sendToAnalytics(error: AppError): void {
     // Placeholder for analytics integration
     if (typeof window !== 'undefined') {
-      const gtag = (window as Window & { gtag?: (event: string, name: string, params: Record<string, unknown>) => void }).gtag;
+      const gtag = (
+        window as Window & {
+          gtag?: (event: string, name: string, params: Record<string, unknown>) => void;
+        }
+      ).gtag;
       if (gtag) {
         gtag('event', 'exception', {
           description: error.message,

bugulma/frontend/pages/CommunityEventsPage.tsx

@@ -6,9 +6,7 @@ const CommunityEventsPage = () => {
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-3xl font-bold mb-6">{t('community.events.title')}</h1>
       <div className="bg-muted p-8 rounded-lg text-center">
-        <p className="text-lg text-muted-foreground">
-          {t('community.events.description')}
-        </p>
+        <p className="text-lg text-muted-foreground">{t('community.events.description')}</p>
       </div>
     </div>
   );

bugulma/frontend/pages/CommunityImpactPage.tsx

@@ -6,9 +6,7 @@ const CommunityImpactPage = () => {
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-3xl font-bold mb-6">{t('community.impact.title')}</h1>
       <div className="bg-muted p-8 rounded-lg text-center">
-        <p className="text-lg text-muted-foreground">
-          {t('community.impact.description')}
-        </p>
+        <p className="text-lg text-muted-foreground">{t('community.impact.description')}</p>
       </div>
     </div>
   );

bugulma/frontend/pages/CommunityNewsPage.tsx

@@ -6,9 +6,7 @@ const CommunityNewsPage = () => {
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-3xl font-bold mb-6">{t('community.news.title')}</h1>
       <div className="bg-muted p-8 rounded-lg text-center">
-        <p className="text-lg text-muted-foreground">
-          {t('community.news.description')}
-        </p>
+        <p className="text-lg text-muted-foreground">{t('community.news.description')}</p>
       </div>
     </div>
   );

bugulma/frontend/pages/CommunityStoriesPage.tsx

@@ -6,9 +6,7 @@ const CommunityStoriesPage = () => {
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-3xl font-bold mb-6">{t('community.stories.title')}</h1>
       <div className="bg-muted p-8 rounded-lg text-center">
-        <p className="text-lg text-muted-foreground">
-          {t('community.stories.description')}
-        </p>
+        <p className="text-lg text-muted-foreground">{t('community.stories.description')}</p>
       </div>
     </div>
   );

bugulma/frontend/pages/DashboardPage.tsx

@@ -46,22 +46,18 @@ const DashboardPage = () => {
   const {
     data: dashboardStats,
     isLoading: isLoadingDashboard,
-    error: dashboardError,
   } = useDashboardStatistics();
   const {
     data: platformStats,
     isLoading: isLoadingPlatform,
-    error: platformError,
   } = usePlatformStatistics();
   const {
     data: matchingStats,
     isLoading: isLoadingMatching,
-    error: matchingError,
   } = useMatchingStatistics();
   const {
     data: impactMetrics,
     isLoading: isLoadingImpact,
-    error: impactError,
   } = useImpactMetrics();
 
   // User-specific data

bugulma/frontend/pages/HeritageBuildingPage.tsx

@@ -20,7 +20,6 @@ import { Heading, Text } from '@/components/ui/Typography.tsx';
 import { LoadingState } from '@/components/ui/LoadingState.tsx';
 import { useHeritageSites } from '@/hooks/api/useHeritageSitesAPI';
 import { useTranslation } from '@/hooks/useI18n.tsx';
-import { BackendHeritageSite } from '@/schemas/backend/heritage-sites';
 
 const HeritageBuildingPage = () => {
   const { id } = useParams<{ id: string }>();

bugulma/frontend/pages/ImpactMetrics.tsx

@@ -327,30 +327,36 @@ const ImpactMetrics = () => {
               </CardHeader>
               <CardContent>
                 <div className="space-y-4">
-                  {impact.topImpactingMatches.slice(0, 5).map((match: TopImpactingMatch, index: number) => (
-                    <div
-                      key={index}
-                      className="flex items-center justify-between p-4 border rounded-lg"
-                    >
-                      <div className="flex items-center gap-4">
-                        <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary font-bold text-sm">
-                          {index + 1}
+                  {impact.topImpactingMatches
+                    .slice(0, 5)
+                    .map((match: TopImpactingMatch, index: number) => (
+                      <div
+                        key={index}
+                        className="flex items-center justify-between p-4 border rounded-lg"
+                      >
+                        <div className="flex items-center gap-4">
+                          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary font-bold text-sm">
+                            {index + 1}
+                          </div>
+                          <div>
+                            <p className="font-medium">
+                              {match.description || `Match ${match.id || index}`}
+                            </p>
+                            <p className="text-sm text-muted-foreground">{match.resource_type}</p>
+                          </div>
                         </div>
-                        <div>
-                          <p className="font-medium">{match.description || `Match ${match.id || index}`}</p>
-                          <p className="text-sm text-muted-foreground">{match.resource_type}</p>
+                        <div className="text-right">
+                          <p className="font-semibold text-green-600">
+                            {t('impactMetrics.co2Tonnes', {
+                              value: formatNumber(match.co2_impact || 0),
+                            })}
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                            {formatCurrency(match.economic_impact || 0)}
+                          </p>
                         </div>
                       </div>
-                      <div className="text-right">
-                        <p className="font-semibold text-green-600">
-                          {t('impactMetrics.co2Tonnes', { value: formatNumber(match.co2_impact || 0) })}
-                        </p>
-                        <p className="text-sm text-muted-foreground">
-                          {formatCurrency(match.economic_impact || 0)}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
+                    ))}
                 </div>
               </CardContent>
             </Card>
@@ -402,7 +408,9 @@ const ImpactMetrics = () => {
                           <span className="font-medium">{year}</span>
                           <div className="text-right">
                             <div className="font-semibold text-green-600">
-                              {t('impactMetrics.co2Tonnes', { value: formatNumber(projection.co2_projected || 0) })}
+                              {t('impactMetrics.co2Tonnes', {
+                                value: formatNumber(projection.co2_projected || 0),
+                              })}
                             </div>
                             <div className="text-sm text-muted-foreground">
                               {formatCurrency(projection.economic_projected || 0)}

bugulma/frontend/pages/LoginPage.tsx

@@ -104,9 +104,7 @@ const LoginPage = () => {
           <CardContent>
             {isDevelopment && (
               <div className="mb-6 p-4 bg-muted rounded-lg border border-primary/20">
-                <p className="text-sm font-medium mb-3 text-foreground">
-                  {t('login.quickLogin')}
-                </p>
+                <p className="text-sm font-medium mb-3 text-foreground">{t('login.quickLogin')}</p>
                 <div className="grid grid-cols-2 gap-2">
                   {TEST_USERS.map((testUser) => (
                     <Button

bugulma/frontend/pages/MatchDetailPage.tsx

@@ -41,18 +41,21 @@ const MatchDetailPage = () => {
   const [newStatus, setNewStatus] = useState('');
   const [statusNotes, setStatusNotes] = useState('');
 
-  const getHistoryTitle = useCallback((action: string, value?: string) => {
-    switch (action) {
-      case 'status_change':
-        return t('matchDetail.statusChanged');
-      case 'comment':
-        return t('matchDetail.commentAdded');
-      case 'update':
-        return t('matchDetail.matchUpdated');
-      default:
-        return value || action;
-    }
-  }, [t]);
+  const getHistoryTitle = useCallback(
+    (action: string, value?: string) => {
+      switch (action) {
+        case 'status_change':
+          return t('matchDetail.statusChanged');
+        case 'comment':
+          return t('matchDetail.commentAdded');
+        case 'update':
+          return t('matchDetail.matchUpdated');
+        default:
+          return value || action;
+      }
+    },
+    [t]
+  );
 
   // Transform match history to timeline format
   const timelineEntries: TimelineEntry[] = useMemo(() => {
@@ -228,7 +231,9 @@ const MatchDetailPage = () => {
                           {t('matchDetail.paybackPeriod')}
                         </span>
                         <span className="text-sm font-semibold">
-                          {t('matchDetail.paybackYears', { years: match.EconomicImpact.payback_years.toFixed(1) })}
+                          {t('matchDetail.paybackYears', {
+                            years: match.EconomicImpact.payback_years.toFixed(1),
+                          })}
                         </span>
                       </div>
                     )}

bugulma/frontend/pages/MatchNegotiationPage.tsx

@@ -46,18 +46,21 @@ const MatchNegotiationPage = () => {
   const [showMessageModal, setShowMessageModal] = useState(false);
   const [messageText, setMessageText] = useState('');
 
-  const getHistoryTitle = useCallback((action: string, value?: string) => {
-    switch (action) {
-      case 'status_changed':
-        return t('matchNegotiation.statusChanged');
-      case 'comment':
-        return t('matchNegotiation.commentAdded');
-      case 'update':
-        return t('matchNegotiation.matchUpdated');
-      default:
-        return value || action;
-    }
-  }, [t]);
+  const getHistoryTitle = useCallback(
+    (action: string, value?: string) => {
+      switch (action) {
+        case 'status_changed':
+          return t('matchNegotiation.statusChanged');
+        case 'comment':
+          return t('matchNegotiation.commentAdded');
+        case 'update':
+          return t('matchNegotiation.matchUpdated');
+        default:
+          return value || action;
+      }
+    },
+    [t]
+  );
 
   // Transform match history to timeline format
   const timelineEntries: TimelineEntry[] = useMemo(() => {
@@ -325,7 +328,9 @@ const MatchNegotiationPage = () => {
                           {t('matchNegotiation.co2Avoided')}
                         </span>
                         <span className="text-sm font-semibold text-success">
-                          {t('matchNegotiation.co2TonnesPerYear', { value: match.EconomicImpact.co2_avoided_tonnes.toFixed(1) })}
+                          {t('matchNegotiation.co2TonnesPerYear', {
+                            value: match.EconomicImpact.co2_avoided_tonnes.toFixed(1),
+                          })}
                         </span>
                       </div>
                     )}
@@ -335,7 +340,9 @@ const MatchNegotiationPage = () => {
                           {t('matchDetail.paybackPeriod')}
                         </span>
                         <span className="text-sm font-semibold">
-                          {t('matchDetail.paybackYears', { years: match.EconomicImpact.payback_years.toFixed(1) })}
+                          {t('matchDetail.paybackYears', {
+                            years: match.EconomicImpact.payback_years.toFixed(1),
+                          })}
                         </span>
                       </div>
                     )}

bugulma/frontend/pages/MatchesMapView.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '@/components/layout/MainLayout.tsx';
-import PageHeader from '@/components/layout/PageHeader.tsx';
 import MatchCard from '@/components/matches/MatchCard.tsx';
-import { Container, Stack, Grid, Flex } from '@/components/ui/layout';
+import { Container, Stack, Flex } from '@/components/ui/layout';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
 import Button from '@/components/ui/Button.tsx';
 import Select from '@/components/ui/Select.tsx';
@@ -14,7 +13,7 @@ import { MapProvider, useMapUI } from '@/contexts/MapContexts.tsx';
 import { useTranslation } from '@/hooks/useI18n.tsx';
 import { useTopMatches } from '@/hooks/api/useMatchingAPI.ts';
 import { useNavigation } from '@/hooks/useNavigation.tsx';
-import { ArrowLeft, Filter, MapPin, TrendingUp } from 'lucide-react';
+import { ArrowLeft, Filter, MapPin } from 'lucide-react';
 
 // Import the extended map component
 const MatchesMap = React.lazy(() => import('../components/map/MatchesMap.tsx'));