feat(i18n): Comprehensive internationalization of frontend components and pages

Translate all hardcoded English strings to use i18n translation keys:

Components:
- TransactionDetailModal: payment details, refunds, technical info
- ConnectOnboarding/ConnectOnboardingEmbed: Stripe Connect setup
- StripeApiKeysForm: API key management
- DomainPurchase: domain registration flow
- Sidebar: navigation labels
- Schedule/Sidebar, PendingSidebar: scheduler UI
- MasqueradeBanner: masquerade status
- Dashboard widgets: metrics, capacity, customers, tickets
- Marketing: PricingTable, PluginShowcase, BenefitsSection
- ConfirmationModal, ServiceList: common UI

Pages:
- Staff: invitation flow, role management
- Customers: form placeholders
- Payments: transactions, payouts, billing
- BookingSettings: URL and redirect configuration
- TrialExpired: upgrade prompts and features
- PlatformSettings, PlatformBusinesses: admin UI
- HelpApiDocs: API documentation

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

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

frontend/src/components/dashboard/OpenTicketsWidget.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { GripVertical, X, AlertCircle, Clock, ChevronRight } from 'lucide-react';
 import { Ticket } from '../../types';
@@ -15,7 +16,8 @@ const OpenTicketsWidget: React.FC<OpenTicketsWidgetProps> = ({
   isEditing,
   onRemove,
 }) => {
-  const openTickets = tickets.filter(t => t.status === 'open' || t.status === 'in_progress');
+  const { t } = useTranslation();
+  const openTickets = tickets.filter(ticket => ticket.status === 'open' || ticket.status === 'in_progress');
   const urgentCount = openTickets.filter(t => t.priority === 'urgent' || t.isOverdue).length;
 
   const getPriorityColor = (priority: string, isOverdue?: boolean) => {
@@ -75,7 +77,7 @@ const OpenTicketsWidget: React.FC<OpenTicketsWidgetProps> = ({
         {openTickets.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500">
             <AlertCircle size={32} className="mb-2 opacity-50" />
-            <p className="text-sm">No open tickets</p>
+            <p className="text-sm">{t('dashboard.noOpenTickets')}</p>
           </div>
         ) : (
           openTickets.slice(0, 5).map((ticket) => (