feat: add i18n translations to CallLogsContent #69

- Import and use useTranslation hook
- Translate page title, subtitle, buttons
- Translate table headers (time, customer, intent, etc.)
- Translate loading states, error messages
- Translate refresh and try again actions
- Fully supports English, Hungarian, and German

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

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

shopcall.ai-main/src/components/CallLogsContent.tsx

@@ -5,6 +5,7 @@ import { Search, Download, Calendar, Filter, Play, MoreHorizontal } from "lucide
 import { useState, useEffect } from "react";
 import { CallDetailsModal } from "./CallDetailsModal";
 import { API_URL } from "@/lib/config";
+import { useTranslation } from "react-i18next";
 
 interface CallLog {
   time: string;
@@ -38,6 +39,7 @@ const getSentimentEmoji = (sentiment: string) => {
 };
 
 export function CallLogsContent() {
+  const { t } = useTranslation();
   const [selectedCall, setSelectedCall] = useState<CallLog | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [callLogs, setCallLogs] = useState<CallLog[]>([]);
@@ -95,19 +97,19 @@ export function CallLogsContent() {
         <div className="border-b border-slate-800 bg-slate-900">
           <div className="flex items-center justify-between p-6">
             <div>
-              <h1 className="text-2xl font-semibold text-white">Call Logs</h1>
-              <p className="text-slate-400">Detailed history of all AI-handled calls</p>
+              <h1 className="text-2xl font-semibold text-white">{t('callLogs.title')}</h1>
+              <p className="text-slate-400">{t('callLogs.subtitle')}</p>
             </div>
-            
+
             <div className="flex items-center gap-4">
               <Button className="bg-slate-700 hover:bg-slate-600 text-white">
                 <Download className="w-4 h-4 mr-2" />
-                Export
+                {t('callLogs.export')}
               </Button>
-              
+
               <Button className="bg-slate-700 hover:bg-slate-600 text-white">
                 <Calendar className="w-4 h-4 mr-2" />
-                Date Range
+                {t('callLogs.dateRange')}
               </Button>
             </div>
           </div>
@@ -119,14 +121,14 @@ export function CallLogsContent() {
             <div className="relative flex-1 max-w-lg">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
               <Input
-                placeholder="Search by phone number or customer..."
+                placeholder={t('callLogs.searchPlaceholder')}
                 className="pl-10 bg-slate-800 border-slate-700 text-white placeholder-slate-400"
               />
             </div>
-            
+
             <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-white hover:bg-slate-700">
               <Filter className="w-4 h-4 mr-2" />
-              Filters
+              {t('callLogs.filters')}
             </Button>
           </div>
         </div>
@@ -136,11 +138,11 @@ export function CallLogsContent() {
           <Card className="bg-slate-800 border-slate-700">
             <div className="p-6">
               <div className="flex items-center justify-between mb-6">
-                <h3 className="text-lg font-semibold text-white">All Call Logs</h3>
+                <h3 className="text-lg font-semibold text-white">{t('callLogs.allCallLogs')}</h3>
                 {!isLoading && !error && (
-                  <Button 
-                    variant="ghost" 
-                    size="sm" 
+                  <Button
+                    variant="ghost"
+                    size="sm"
                     className="text-slate-400 hover:text-white"
                     onClick={fetchCallLogs}
                   >
@@ -148,18 +150,18 @@ export function CallLogsContent() {
                       <path d="M23 4v6h-6M1 20v-6h6" strokeLinecap="round" strokeLinejoin="round"/>
                       <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" strokeLinecap="round" strokeLinejoin="round"/>
                     </svg>
-                    Refresh
+                    {t('common.refresh')}
                   </Button>
                 )}
               </div>
-              
+
               {isLoading ? (
                 <div className="flex flex-col items-center justify-center py-12">
                   <div className="relative">
                     <div className="w-12 h-12 border-4 border-slate-700 rounded-full"></div>
                     <div className="w-12 h-12 border-4 border-white border-t-transparent rounded-full animate-spin absolute top-0"></div>
                   </div>
-                  <p className="text-slate-400 mt-4 font-medium">Loading call logs...</p>
+                  <p className="text-slate-400 mt-4 font-medium">{t('callLogs.loadingCallLogs')}</p>
                 </div>
               ) : error ? (
                 <div className="flex flex-col items-center justify-center py-12">
@@ -170,9 +172,9 @@ export function CallLogsContent() {
                       <line x1="12" y1="16" x2="12.01" y2="16"/>
                     </svg>
                   </div>
-                  <p className="text-red-500 font-medium mb-2">Failed to load call logs</p>
+                  <p className="text-red-500 font-medium mb-2">{t('callLogs.failedToLoad')}</p>
                   <p className="text-slate-400 text-sm mb-4">{error}</p>
-                  <Button 
+                  <Button
                     className="bg-slate-700 hover:bg-slate-600 text-white"
                     onClick={fetchCallLogs}
                   >
@@ -180,7 +182,7 @@ export function CallLogsContent() {
                       <path d="M23 4v6h-6M1 20v-6h6" strokeLinecap="round" strokeLinejoin="round"/>
                       <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" strokeLinecap="round" strokeLinejoin="round"/>
                     </svg>
-                    Try Again
+                    {t('common.tryAgain')}
                   </Button>
                 </div>
               ) : (
@@ -188,14 +190,14 @@ export function CallLogsContent() {
                   <table className="w-full">
                     <thead>
                       <tr className="border-b border-slate-700">
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Time</th>
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Customer</th>
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Intent</th>
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Outcome</th>
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Duration</th>
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Sentiment</th>
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Cost</th>
-                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">Actions</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.time')}</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.customer')}</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.intent')}</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.outcome')}</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.duration')}</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.sentiment')}</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.cost')}</th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-slate-400">{t('callLogs.table.actions')}</th>
                       </tr>
                     </thead>
                     <tbody>