Add dashboard and navigation translations with date-fns locale support

- Add translations for all dashboard widgets (de, es, fr)
- Add navigation menu translations for all languages
- Create useDateFnsLocale hook for localized date formatting
- Add translate="no" to prevent browser auto-translation
- Update dashboard components to use translation keys

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/dashboard/RecentActivityWidget.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { GripVertical, X, Calendar, UserPlus, XCircle, CheckCircle, DollarSign } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import { Appointment, Customer } from '../../types';
+import { useDateFnsLocale } from '../../hooks/useDateFnsLocale';
 
 interface ActivityItem {
   id: string;
@@ -28,6 +29,7 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
   onRemove,
 }) => {
   const { t } = useTranslation();
+  const dateFnsLocale = useDateFnsLocale();
   const activities = useMemo(() => {
     const items: ActivityItem[] = [];
 
@@ -39,8 +41,8 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
         items.push({
           id: `booking-${appt.id}`,
           type: 'booking',
-          title: 'New Booking',
-          description: `${appt.customerName} booked an appointment`,
+          title: t('dashboard.newBooking'),
+          description: t('dashboard.customerBookedAppointment', { customerName: appt.customerName }),
           timestamp,
           icon: <Calendar size={14} />,
           iconBg: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400',
@@ -49,8 +51,8 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
         items.push({
           id: `cancel-${appt.id}`,
           type: 'cancellation',
-          title: 'Cancellation',
-          description: `${appt.customerName} cancelled their appointment`,
+          title: t('dashboard.cancellation'),
+          description: t('dashboard.customerCancelledAppointment', { customerName: appt.customerName }),
           timestamp,
           icon: <XCircle size={14} />,
           iconBg: 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400',
@@ -59,8 +61,8 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
         items.push({
           id: `complete-${appt.id}`,
           type: 'completion',
-          title: 'Completed',
-          description: `${appt.customerName}'s appointment completed`,
+          title: t('dashboard.completed'),
+          description: t('dashboard.customerAppointmentCompleted', { customerName: appt.customerName }),
           timestamp,
           icon: <CheckCircle size={14} />,
           iconBg: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
@@ -76,8 +78,8 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
         items.push({
           id: `customer-${customer.id}`,
           type: 'new_customer',
-          title: 'New Customer',
-          description: `${customer.name} signed up`,
+          title: t('dashboard.newCustomer'),
+          description: t('dashboard.customerSignedUp', { customerName: customer.name }),
           timestamp: new Date(), // Approximate - would need createdAt field
           icon: <UserPlus size={14} />,
           iconBg: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
@@ -107,7 +109,7 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
       )}
 
       <h3 className={`text-lg font-semibold text-gray-900 dark:text-white mb-4 ${isEditing ? 'pl-5' : ''}`}>
-        Recent Activity
+        {t('dashboard.recentActivity')}
       </h3>
 
       <div className="flex-1 overflow-y-auto">
@@ -131,7 +133,7 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
                     {activity.description}
                   </p>
                   <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
-                    {formatDistanceToNow(activity.timestamp, { addSuffix: true })}
+                    {formatDistanceToNow(activity.timestamp, { addSuffix: true, locale: dateFnsLocale })}
                   </p>
                 </div>
               </div>