feat: add translations to PhoneNumbersContent (partial) #69

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

@@ -2,6 +2,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer, LineChart, Line } from 'recharts';
+import { useTranslation } from "react-i18next";
 
 const weeklyData = [
   { day: 'Mon', calls: 45 },
@@ -58,27 +59,29 @@ const peakHoursData = [
 ];
 
 export function AnalyticsContent() {
+  const { t } = useTranslation();
+
   return (
     <div className="flex-1 space-y-6 p-8 bg-slate-900">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white">Analytics</h2>
-          <p className="text-slate-400">Deeper insights and trends over time</p>
+          <h2 className="text-3xl font-bold tracking-tight text-white">{t('analytics.title')}</h2>
+          <p className="text-slate-400">{t('analytics.subtitle')}</p>
         </div>
       </div>
 
       <Tabs defaultValue="overview" className="space-y-6">
         <TabsList className="bg-slate-800 text-slate-300">
-          <TabsTrigger value="overview" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">Overview</TabsTrigger>
-          <TabsTrigger value="trends" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">Trends</TabsTrigger>
-          <TabsTrigger value="performance" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">Performance</TabsTrigger>
+          <TabsTrigger value="overview" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">{t('analytics.tabs.overview')}</TabsTrigger>
+          <TabsTrigger value="trends" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">{t('analytics.tabs.trends')}</TabsTrigger>
+          <TabsTrigger value="performance" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">{t('analytics.tabs.performance')}</TabsTrigger>
         </TabsList>
 
         <TabsContent value="overview" className="space-y-6">
           <div className="grid gap-6 md:grid-cols-2">
             <Card className="bg-slate-800 border-slate-700">
               <CardHeader>
-                <CardTitle className="text-white">Call Volume by Day</CardTitle>
+                <CardTitle className="text-white">{t('analytics.charts.callVolumeByDay')}</CardTitle>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
@@ -94,7 +97,7 @@ export function AnalyticsContent() {
 
             <Card className="bg-slate-800 border-slate-700">
               <CardHeader>
-                <CardTitle className="text-white">Resolution Rate Over Time</CardTitle>
+                <CardTitle className="text-white">{t('analytics.charts.resolutionRateOverTime')}</CardTitle>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
@@ -111,18 +114,18 @@ export function AnalyticsContent() {
 
           <Card className="bg-slate-800 border-slate-700">
             <CardHeader>
-              <CardTitle className="text-white">Peak Call Times</CardTitle>
-              <p className="text-slate-400">Heatmap showing busiest hours and days</p>
+              <CardTitle className="text-white">{t('analytics.charts.peakCallTimes')}</CardTitle>
+              <p className="text-slate-400">{t('analytics.charts.heatmapSubtitle')}</p>
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-7 gap-2 text-center">
-                <div className="text-slate-400 text-sm font-medium">Mon</div>
-                <div className="text-slate-400 text-sm font-medium">Tue</div>
-                <div className="text-slate-400 text-sm font-medium">Wed</div>
-                <div className="text-slate-400 text-sm font-medium">Thu</div>
-                <div className="text-slate-400 text-sm font-medium">Fri</div>
-                <div className="text-slate-400 text-sm font-medium">Sat</div>
-                <div className="text-slate-400 text-sm font-medium">Sun</div>
+                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.mon')}</div>
+                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.tue')}</div>
+                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.wed')}</div>
+                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.thu')}</div>
+                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.fri')}</div>
+                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.sat')}</div>
+                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.sun')}</div>
                 
                 {Array.from({ length: 7 * 24 }, (_, i) => (
                   <div 
@@ -139,7 +142,7 @@ export function AnalyticsContent() {
           <div className="grid gap-6 md:grid-cols-2">
             <Card className="bg-slate-800 border-slate-700">
               <CardHeader>
-                <CardTitle className="text-white">Resolution Rate Trend</CardTitle>
+                <CardTitle className="text-white">{t('analytics.charts.resolutionRateTrend')}</CardTitle>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
@@ -147,10 +150,10 @@ export function AnalyticsContent() {
                     <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                     <XAxis dataKey="week" stroke="#9CA3AF" />
                     <YAxis domain={[0, 100]} stroke="#9CA3AF" />
-                    <Line 
-                      type="monotone" 
-                      dataKey="rate" 
-                      stroke="#06B6D4" 
+                    <Line
+                      type="monotone"
+                      dataKey="rate"
+                      stroke="#06B6D4"
                       strokeWidth={3}
                       dot={{ fill: '#06B6D4', strokeWidth: 2, r: 6 }}
                     />
@@ -161,7 +164,7 @@ export function AnalyticsContent() {
 
             <Card className="bg-slate-800 border-slate-700">
               <CardHeader>
-                <CardTitle className="text-white">Peak Call Hours</CardTitle>
+                <CardTitle className="text-white">{t('analytics.charts.peakCallHours')}</CardTitle>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
@@ -181,15 +184,15 @@ export function AnalyticsContent() {
           <div className="grid gap-6 md:grid-cols-2">
             <Card className="bg-slate-800 border-slate-700">
               <CardHeader>
-                <CardTitle className="text-white">Average Call Duration by Intent</CardTitle>
+                <CardTitle className="text-white">{t('analytics.charts.avgCallDurationByIntent')}</CardTitle>
               </CardHeader>
               <CardContent>
                 <ResponsiveContainer width="100%" height={300}>
                   <BarChart data={callDurationData}>
                     <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-                    <XAxis 
-                      dataKey="intent" 
-                      stroke="#9CA3AF" 
+                    <XAxis
+                      dataKey="intent"
+                      stroke="#9CA3AF"
                       angle={-45}
                       textAnchor="end"
                       height={80}
@@ -204,8 +207,8 @@ export function AnalyticsContent() {
 
             <Card className="bg-slate-800 border-slate-700">
               <CardHeader>
-                <CardTitle className="text-white">Top Call Intents</CardTitle>
-                <p className="text-slate-400">Last 24 hours</p>
+                <CardTitle className="text-white">{t('analytics.charts.topCallIntents')}</CardTitle>
+                <p className="text-slate-400">{t('analytics.charts.last24Hours')}</p>
               </CardHeader>
               <CardContent>
                 <div className="space-y-4">

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

@@ -5,6 +5,7 @@ import { Badge } from "@/components/ui/badge";
 import { PhoneCall, Plus, Settings, AlertTriangle, CheckCircle, Clock, Link, Shield, Loader2 } from "lucide-react";
 import { API_URL } from "@/lib/config";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { useTranslation } from "react-i18next";
 
 interface PhoneNumber {
   id: string;
@@ -102,6 +103,7 @@ const carriers = [
 ];
 
 export function PhoneNumbersContent() {
+  const { t } = useTranslation();
   const [stores, setStores] = useState<Store[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string>("");
@@ -156,12 +158,12 @@ export function PhoneNumbersContent() {
 
   const getStatusBadge = (store: Store) => {
     if (!store.is_active) {
-      return { text: "Inactive", color: "bg-red-500" };
+      return { text: t('phoneNumbers.table.inactive'), color: "bg-red-500" };
     }
     if (!store.phone_numbers) {
-      return { text: "No Phone Number", color: "bg-yellow-500" };
+      return { text: t('phoneNumbers.table.noPhoneNumber'), color: "bg-yellow-500" };
     }
-    return { text: "Active", color: "bg-green-500" };
+    return { text: t('phoneNumbers.table.active'), color: "bg-green-500" };
   };
 
   const activeStoresCount = stores.filter(s => s.is_active && s.phone_numbers).length;
@@ -170,23 +172,23 @@ export function PhoneNumbersContent() {
     <div className="flex-1 space-y-6 p-8 bg-slate-900">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white">Phone Numbers</h2>
-          <p className="text-slate-400">Manage phone numbers for your webshops</p>
+          <h2 className="text-3xl font-bold tracking-tight text-white">{t('phoneNumbers.title')}</h2>
+          <p className="text-slate-400">{t('phoneNumbers.subtitle')}</p>
         </div>
         <Button
           className="bg-slate-600 hover:bg-slate-600 text-slate-400 cursor-not-allowed"
           disabled
         >
           <Plus className="w-4 h-4 mr-2" />
-          Add Phone Number
+          {t('phoneNumbers.addPhoneNumber')}
         </Button>
       </div>
 
       <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <h3 className="text-xl font-semibold text-white">Webshop Phone Numbers</h3>
+          <h3 className="text-xl font-semibold text-white">{t('phoneNumbers.webshopPhoneNumbers')}</h3>
           <p className="text-slate-400">
-            {loading ? "Loading..." : `${stores.length} webshop${stores.length !== 1 ? 's' : ''} • ${activeStoresCount} active number${activeStoresCount !== 1 ? 's' : ''}`}
+            {loading ? t('common.loading') : `${stores.length} ${stores.length !== 1 ? t('phoneNumbers.webshopsCountPlural') : t('phoneNumbers.webshopsCount')} • ${activeStoresCount} ${activeStoresCount !== 1 ? t('phoneNumbers.activeNumberPlural') : t('phoneNumbers.activeNumber')}`}
           </p>
         </div>
 
@@ -204,7 +206,7 @@ export function PhoneNumbersContent() {
             <CardContent className="p-8">
               <div className="flex items-center justify-center gap-3">
                 <Loader2 className="w-6 h-6 text-cyan-500 animate-spin" />
-                <span className="text-slate-400">Loading stores and phone numbers...</span>
+                <span className="text-slate-400">{t('phoneNumbers.loadingStores')}</span>
               </div>
             </CardContent>
           </Card>
@@ -213,10 +215,10 @@ export function PhoneNumbersContent() {
             <CardContent className="p-8">
               <div className="text-center">
                 <PhoneCall className="w-12 h-12 text-slate-600 mx-auto mb-4" />
-                <h3 className="text-white text-lg font-semibold mb-2">No webshops connected</h3>
-                <p className="text-slate-400 mb-4">Connect a webshop first to see phone number assignments</p>
+                <h3 className="text-white text-lg font-semibold mb-2">{t('phoneNumbers.noWebshopsConnected')}</h3>
+                <p className="text-slate-400 mb-4">{t('phoneNumbers.noWebshopsSubtitle')}</p>
                 <Button className="bg-cyan-500 hover:bg-cyan-600 text-white" onClick={() => window.location.href = '/webshops'}>
-                  Go to Webshops
+                  {t('phoneNumbers.goToWebshops')}
                 </Button>
               </div>
             </CardContent>
@@ -228,12 +230,12 @@ export function PhoneNumbersContent() {
                 <table className="w-full">
                   <thead className="border-b border-slate-700">
                     <tr className="text-left">
-                      <th className="p-4 text-slate-300 font-medium">Webshop</th>
-                      <th className="p-4 text-slate-300 font-medium">Phone Number</th>
-                      <th className="p-4 text-slate-300 font-medium">Country</th>
-                      <th className="p-4 text-slate-300 font-medium">Type</th>
-                      <th className="p-4 text-slate-300 font-medium">Status</th>
-                      <th className="p-4 text-slate-300 font-medium">Actions</th>
+                      <th className="p-4 text-slate-300 font-medium">{t('phoneNumbers.table.webshop')}</th>
+                      <th className="p-4 text-slate-300 font-medium">{t('phoneNumbers.table.phoneNumber')}</th>
+                      <th className="p-4 text-slate-300 font-medium">{t('phoneNumbers.table.country')}</th>
+                      <th className="p-4 text-slate-300 font-medium">{t('phoneNumbers.table.type')}</th>
+                      <th className="p-4 text-slate-300 font-medium">{t('phoneNumbers.table.status')}</th>
+                      <th className="p-4 text-slate-300 font-medium">{t('phoneNumbers.table.actions')}</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -253,7 +255,7 @@ export function PhoneNumbersContent() {
                             <div className="flex items-center gap-2">
                               <PhoneCall className="w-4 h-4 text-slate-400" />
                               <span className={`text-sm ${phoneNumber ? "text-white font-mono" : "text-slate-500 italic"}`}>
-                                {phoneNumber ? phoneNumber.phone_number : "Not assigned"}
+                                {phoneNumber ? phoneNumber.phone_number : t('phoneNumbers.table.notAssigned')}
                               </span>
                             </div>
                           </td>
@@ -266,7 +268,7 @@ export function PhoneNumbersContent() {
                                 variant={phoneNumber.price === 0 ? "default" : "secondary"}
                                 className={phoneNumber.price === 0 ? "bg-green-600 text-white" : "bg-purple-600 text-white"}
                               >
-                                {phoneNumber.price === 0 ? "Free" : "Premium"}
+                                {phoneNumber.price === 0 ? t('phoneNumbers.table.free') : t('phoneNumbers.table.premium')}
                               </Badge>
                             ) : (
                               <span className="text-slate-500">-</span>
@@ -295,7 +297,7 @@ export function PhoneNumbersContent() {
                                   disabled
                                 >
                                   <Plus className="w-4 h-4 mr-1" />
-                                  Assign
+                                  {t('phoneNumbers.table.assign')}
                                 </Button>
                               )}
                             </div>
@@ -313,10 +315,10 @@ export function PhoneNumbersContent() {
         <div className="space-y-4 opacity-60">
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="text-xl font-semibold text-white">Bring Your Own Carrier</h3>
-              <p className="text-slate-400">Feature coming soon - Connect your existing carrier account to use your own phone numbers</p>
+              <h3 className="text-xl font-semibold text-white">{t('phoneNumbers.byoc.title')}</h3>
+              <p className="text-slate-400">{t('phoneNumbers.byoc.subtitle')}</p>
             </div>
-            <Badge variant="outline" className="text-slate-400 border-slate-600">Coming Soon</Badge>
+            <Badge variant="outline" className="text-slate-400 border-slate-600">{t('phoneNumbers.byoc.comingSoon')}</Badge>
           </div>
 
           <div className="grid gap-6 md:grid-cols-2">