From 0cb6ee81392af7a0684fd398f27820126df98d84 Mon Sep 17 00:00:00 2001
From: poyrazavsever <poyrazavsever@hotmail.com>
Date: Mon, 20 Jul 2026 11:08:43 +0300
Subject: [PATCH] feat(i18n): integrate multilingual support into clients views
 and forms

---
 app/(dashboard)/clients/[id]/actions.ts       |  11 +-
 .../clients/[id]/client-detail-client.tsx     |  74 +++++----
 app/(dashboard)/clients/[id]/page.tsx         |  35 ++++-
 app/(dashboard)/clients/actions.ts            |  12 +-
 app/(dashboard)/clients/clients-client.tsx    | 142 ++++++++++--------
 app/(dashboard)/clients/page.tsx              |  36 ++++-
 6 files changed, 206 insertions(+), 104 deletions(-)

diff --git a/app/(dashboard)/clients/[id]/actions.ts b/app/(dashboard)/clients/[id]/actions.ts
index 5d16f4a..259eaa4 100644
--- a/app/(dashboard)/clients/[id]/actions.ts
+++ b/app/(dashboard)/clients/[id]/actions.ts
@@ -3,6 +3,7 @@
 import { revalidatePath } from "next/cache";
 import { cleanText, optionalDate, requiredText } from "@/server/web/form-data";
 import { requireFreelancerBackend } from "@/server/web/freelancer";
+import { parseContentTranslationsFromFormData } from "@/server/i18n/content";
 
 const ACTIVITY_TYPES = ["note", "call", "meeting", "email"] as const;
 
@@ -13,12 +14,18 @@ export async function addClientActivity(clientId: string, formData: FormData) {
     ? rawType as (typeof ACTIVITY_TYPES)[number]
     : "note";
 
+  const context = service.contentTranslations.getLocalizationContext(actor);
+  const translations = parseContentTranslationsFromFormData(formData, "client_activity", context);
+  const defaultTitle = translations?.[context.defaultLocale]?.title ?? "";
+  const defaultContent = translations?.[context.defaultLocale]?.content ?? "";
+
   service.addClientActivity(actor, {
     clientId,
     type,
-    title: requiredText(formData.get("title"), "Aktivite başlığı zorunludur."),
-    content: cleanText(formData.get("content")),
+    title: defaultTitle || requiredText(formData.get("title"), "Aktivite başlığı zorunludur."),
+    content: defaultContent || cleanText(formData.get("content")),
     activityDate: optionalDate(formData.get("activity_date")) ?? new Date(),
+    translations,
   });
 
   revalidatePath(`/clients/${clientId}`);
diff --git a/app/(dashboard)/clients/[id]/client-detail-client.tsx b/app/(dashboard)/clients/[id]/client-detail-client.tsx
index c99a5a0..899c0b0 100644
--- a/app/(dashboard)/clients/[id]/client-detail-client.tsx
+++ b/app/(dashboard)/clients/[id]/client-detail-client.tsx
@@ -4,10 +4,11 @@ import { useState } from "react";
 import { format } from "date-fns";
 import { getDocumentDateFnsLocale } from "@/lib/i18n/date-fns";
 import { Card, CardContent, Badge, Button, Input, Textarea, Label } from "poyraz-ui/atoms";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DialogDescription } from "poyraz-ui/molecules";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DialogDescription, Tabs, TabsList, TabsTrigger, TabsContent } from "poyraz-ui/molecules";
 import { Phone, Mail, ExternalLink, Calendar, Plus, MessageSquare, UserPlus, Loader2, Copy } from "lucide-react";
 import { toast } from "poyraz-ui/molecules";
 import { addClientActivity } from "./actions";
+import { useTranslations } from "@/components/i18n/i18n-provider";
 
 export type ClientDetailData = {
   id: string;
@@ -30,6 +31,7 @@ export type ClientActivity = {
   content: string | null;
   activity_date: string;
   created_at: string;
+  translations?: Record<string, Record<string, string>>;
 };
 
 export function ClientDetailClient({
@@ -44,6 +46,7 @@ export function ClientDetailClient({
   const [isAddingActivity, setIsAddingActivity] = useState(false);
   const [openDialog, setOpenDialog] = useState(false);
   const [portalLocale, setPortalLocale] = useState(client.portal_locale);
+  const t = useTranslations();
 
   const getActivityIcon = (type: string) => {
     switch (type) {
@@ -56,10 +59,10 @@ export function ClientDetailClient({
 
   const getActivityBadge = (type: string) => {
     switch (type) {
-      case "call": return <Badge className="bg-blue-500/10 text-blue-500 border-blue-500/20">Arama</Badge>;
-      case "meeting": return <Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20">Toplantı</Badge>;
-      case "email": return <Badge className="bg-amber-500/10 text-amber-500 border-amber-500/20">E-posta</Badge>;
-      default: return <Badge variant="secondary">Not</Badge>;
+      case "call": return <Badge className="bg-blue-500/10 text-blue-500 border-blue-500/20">{t("clients.detail.activityTypes.call")}</Badge>;
+      case "meeting": return <Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20">{t("clients.detail.activityTypes.meeting")}</Badge>;
+      case "email": return <Badge className="bg-amber-500/10 text-amber-500 border-amber-500/20">{t("clients.detail.activityTypes.email")}</Badge>;
+      default: return <Badge variant="secondary">{t("clients.detail.activityTypes.note")}</Badge>;
     }
   };
 
@@ -142,7 +145,7 @@ export function ClientDetailClient({
             <Dialog open={createUserOpen} onOpenChange={setCreateUserOpen}>
               <DialogTrigger asChild>
                 <Button effect="shine" variant="secondary" size="sm" className="gap-2 ml-2 border-dashed">
-                  <UserPlus className="h-4 w-4" /> Portal Hesabı Aç
+                  <UserPlus className="h-4 w-4" /> {t("clients.detail.createPortalAccount")}
                 </Button>
               </DialogTrigger>
               <DialogContent>
@@ -155,11 +158,11 @@ export function ClientDetailClient({
                   </DialogHeader>
                   <div className="space-y-4 py-4">
                     <div className="space-y-2">
-                      <Label htmlFor="email">E-posta Adresi</Label>
+                      <Label htmlFor="email">{t("clients.detail.email")}</Label>
                       <Input id="email" name="email" type="email" required defaultValue={client.email || ""} />
                     </div>
                     <div className="space-y-2">
-                      <Label>Portal dili</Label>
+                      <Label>{t("clients.detail.portalLocale")}</Label>
                       <Select name="locale" defaultValue={portalLocale}>
                         <SelectTrigger>
                           <SelectValue placeholder="Dil seç" />
@@ -209,7 +212,7 @@ export function ClientDetailClient({
           {client.client_auth_id && (
             <>
               <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20 px-3 py-1 text-sm flex items-center gap-1.5 ml-2">
-                <UserPlus className="h-3.5 w-3.5" /> Portal Aktif
+                <UserPlus className="h-3.5 w-3.5" /> {t("clients.detail.portalActive")}
               </Badge>
               <Select value={portalLocale} onValueChange={handlePortalLocaleChange}>
                 <SelectTrigger className="h-9 w-36">
@@ -233,7 +236,7 @@ export function ClientDetailClient({
         <div className="space-y-6">
           <Card>
             <CardContent className="p-5 space-y-4">
-              <h3 className="font-semibold text-foreground">İletişim Bilgileri</h3>
+              <h3 className="font-semibold text-foreground">{t("clients.detail.contactInfo")}</h3>
               <div className="space-y-3 text-sm">
                 {client.email ? (
                   <div className="flex items-center gap-3 text-muted-foreground">
@@ -264,7 +267,7 @@ export function ClientDetailClient({
 
           <Card>
             <CardContent className="p-5 space-y-4">
-              <h3 className="font-semibold text-foreground">Genel Notlar</h3>
+              <h3 className="font-semibold text-foreground">{t("clients.form.notes")}</h3>
               {client.notes ? (
                 <p className="text-sm text-muted-foreground whitespace-pre-wrap">{client.notes}</p>
               ) : (
@@ -284,24 +287,24 @@ export function ClientDetailClient({
                 <Dialog open={openDialog} onOpenChange={setOpenDialog}>
                   <DialogTrigger asChild>
                     <Button variant="default" effect="shine" size="sm" className="gap-2">
-                      <Plus className="h-4 w-4" /> Aktivite Ekle
+                      <Plus className="h-4 w-4" /> {t("clients.detail.addActivity")}
                     </Button>
                   </DialogTrigger>
                   <DialogContent>
                     <form action={handleAddActivity} className="space-y-4">
                       <DialogHeader>
-                        <DialogTitle>Yeni Aktivite Ekle</DialogTitle>
+                        <DialogTitle>{t("clients.detail.addActivity")}</DialogTitle>
                       </DialogHeader>
                       <div className="grid gap-4 py-4">
                         <div className="grid gap-2">
-                          <Label>Tip</Label>
+                          <Label>{t("clients.detail.activityType")}</Label>
                           <Select name="type" defaultValue="note">
                             <SelectTrigger><SelectValue /></SelectTrigger>
                             <SelectContent>
-                              <SelectItem value="note">Not</SelectItem>
-                              <SelectItem value="call">Arama</SelectItem>
-                              <SelectItem value="meeting">Toplantı</SelectItem>
-                              <SelectItem value="email">E-posta</SelectItem>
+                              <SelectItem value="note">{t("clients.detail.activityTypes.note")}</SelectItem>
+                              <SelectItem value="call">{t("clients.detail.activityTypes.call")}</SelectItem>
+                              <SelectItem value="meeting">{t("clients.detail.activityTypes.meeting")}</SelectItem>
+                              <SelectItem value="email">{t("clients.detail.activityTypes.email")}</SelectItem>
                             </SelectContent>
                           </Select>
                         </div>
@@ -310,17 +313,32 @@ export function ClientDetailClient({
                           <Input name="title" required placeholder="Aktivite özeti" />
                         </div>
                         <div className="grid gap-2">
-                          <Label>Tarih</Label>
+                          <Label>{t("clients.detail.activityDate")}</Label>
                           <Input name="activity_date" type="datetime-local" required defaultValue={new Date().toISOString().slice(0, 16)} />
                         </div>
-                        <div className="grid gap-2">
-                          <Label>İçerik (Opsiyonel)</Label>
-                          <Textarea name="content" rows={4} placeholder="Görüşme detayları..." />
-                        </div>
+                        <Tabs defaultValue={locales[0].code}>
+                          <TabsList className="mb-4">
+                            {locales.map((locale) => (
+                              <TabsTrigger key={locale.code} value={locale.code}>{locale.name}</TabsTrigger>
+                            ))}
+                          </TabsList>
+                          {locales.map((locale) => (
+                            <TabsContent key={locale.code} value={locale.code} className="space-y-4">
+                              <div className="grid gap-2">
+                                <Label>{t("clients.detail.activityTitle")} ({locale.code})</Label>
+                                <Input name={`i18n.${locale.code}.title`} required={locale.code === locales[0].code} />
+                              </div>
+                              <div className="grid gap-2">
+                                <Label>{t("clients.detail.activityContent")} ({locale.code})</Label>
+                                <Textarea name={`i18n.${locale.code}.content`} rows={4} />
+                              </div>
+                            </TabsContent>
+                          ))}
+                        </Tabs>
                       </div>
                       <DialogFooter>
                         <Button variant="default" effect="shine" type="submit" disabled={isAddingActivity}>
-                          {isAddingActivity ? "Ekleniyor..." : "Ekle"}
+                          {isAddingActivity ? "..." : t("clients.detail.saveActivity")}
                         </Button>
                       </DialogFooter>
                     </form>
@@ -331,7 +349,7 @@ export function ClientDetailClient({
               <div className="space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-border before:to-transparent">
                 {activities.length === 0 ? (
                   <div className="text-center py-10">
-                    <p className="text-muted-foreground">Henüz kaydedilmiş bir aktivite yok.</p>
+                    <p className="text-muted-foreground">{t("clients.detail.emptyActivities")}</p>
                   </div>
                 ) : (
                   activities.map((activity) => (
@@ -344,14 +362,14 @@ export function ClientDetailClient({
                       <Card className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] hover:border-primary/50 transition-colors">
                         <CardContent className="p-4">
                           <div className="flex justify-between items-start mb-2">
-                            <h4 className="font-semibold text-foreground">{activity.title}</h4>
+                            <h4 className="font-semibold text-foreground">{activity.translations?.[locales[0].code]?.title ?? activity.title}</h4>
                             {getActivityBadge(activity.type)}
                           </div>
                           <time className="text-xs text-muted-foreground block mb-2 font-medium">
                             {format(new Date(activity.activity_date), "d MMM yyyy, HH:mm", { locale: getDocumentDateFnsLocale() })}
                           </time>
-                          {activity.content && (
-                            <p className="text-sm text-muted-foreground whitespace-pre-wrap">{activity.content}</p>
+                          {(activity.translations?.[locales[0].code]?.content ?? activity.content) && (
+                            <p className="text-sm text-muted-foreground whitespace-pre-wrap">{activity.translations?.[locales[0].code]?.content ?? activity.content}</p>
                           )}
                         </CardContent>
                       </Card>
diff --git a/app/(dashboard)/clients/[id]/page.tsx b/app/(dashboard)/clients/[id]/page.tsx
index 7d5c67d..9b2daaf 100644
--- a/app/(dashboard)/clients/[id]/page.tsx
+++ b/app/(dashboard)/clients/[id]/page.tsx
@@ -4,17 +4,36 @@ import { getSqliteConnection } from "@/server/db/client";
 import { DomainError } from "@/server/domain/errors";
 import { I18nService } from "@/server/i18n/service";
 import { requireFreelancerBackend } from "@/server/web/freelancer";
+import { resolveFreelancerLocale } from "@/server/i18n/resolver";
+import { getClientI18nPayload } from "@/server/i18n/translator";
+import { I18nProvider } from "@/components/i18n/i18n-provider";
+import type { ContentTranslationRow } from "@/server/i18n/content";
+
+function buildTranslations(rows: ContentTranslationRow[] | undefined) {
+  if (!rows) return undefined;
+  const result: Record<string, Record<string, string>> = {};
+  for (const row of rows) {
+    if (!result[row.locale]) result[row.locale] = {};
+    result[row.locale][row.field] = row.value;
+  }
+  return result;
+}
 
 export default async function ClientDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const { actor, service } = await requireFreelancerBackend();
+  const { context, actor, service } = await requireFreelancerBackend();
   const i18n = new I18nService(getSqliteConnection().db);
   const locales = i18n.listLocales(actor).filter((locale) => locale.status === "active");
   const defaultLocale = i18n.getSettings(actor).defaultLocale;
+  
+  const resolvedLocale = await resolveFreelancerLocale(context);
+  const payload = getClientI18nPayload(resolvedLocale.locale, ["clients"]);
 
   let data: { client: ClientDetailData; activities: ClientActivity[] };
   try {
     const row = service.getClient(actor, id);
+    const clientTranslations = service.contentTranslations.list("client", id);
+    
     const client: ClientDetailData = {
       id: row.id,
       name: row.name,
@@ -27,14 +46,20 @@ export default async function ClientDetailPage({ params }: { params: Promise<{ i
       notes: row.notes,
       client_auth_id: row.authUserId,
       portal_locale: row.portalLocale ?? defaultLocale,
+      translations: buildTranslations(clientTranslations),
     };
-    const activities: ClientActivity[] = service.listClientActivities(actor, id).map((activity) => ({
+    
+    const rawActivities = service.listClientActivities(actor, id);
+    const activityTranslationsMap = service.contentTranslations.listBatch("client_activity", rawActivities.map(a => a.id));
+
+    const activities: ClientActivity[] = rawActivities.map((activity) => ({
       id: activity.id,
       type: activity.type,
       title: activity.title,
       content: activity.content,
       activity_date: activity.activityDate.toISOString(),
       created_at: activity.createdAt.toISOString(),
+      translations: buildTranslations(activityTranslationsMap.get(activity.id)),
     }));
 
     data = { client, activities };
@@ -43,5 +68,9 @@ export default async function ClientDetailPage({ params }: { params: Promise<{ i
     throw error;
   }
 
-  return <ClientDetailClient client={data.client} activities={data.activities} locales={locales} />;
+  return (
+    <I18nProvider payload={payload}>
+      <ClientDetailClient client={data.client} activities={data.activities} locales={locales} />
+    </I18nProvider>
+  );
 }
diff --git a/app/(dashboard)/clients/actions.ts b/app/(dashboard)/clients/actions.ts
index 7391761..bf08322 100644
--- a/app/(dashboard)/clients/actions.ts
+++ b/app/(dashboard)/clients/actions.ts
@@ -3,6 +3,7 @@
 import { revalidatePath } from "next/cache";
 import { requireFreelancerBackend } from "@/server/web/freelancer";
 import { cleanText, requiredText } from "@/server/web/form-data";
+import { parseContentTranslationsFromFormData } from "@/server/i18n/content";
 
 const CLIENT_STATUSES = ["active", "paused", "archived"] as const;
 const PIPELINE_STAGES = ["lead", "contacted", "proposal_sent", "won", "lost"] as const;
@@ -20,7 +21,11 @@ function cleanWebsite(value: FormDataEntryValue | null) {
   return website && !/^https?:\/\//i.test(website) ? `https://${website}` : website;
 }
 
-function readPayload(formData: FormData) {
+function readPayload(
+  formData: FormData,
+  service: Awaited<ReturnType<typeof requireFreelancerBackend>>["service"],
+  actor: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"]
+) {
   return {
     name: requiredText(formData.get("name"), "Müşteri adı zorunludur."),
     companyName: cleanText(formData.get("company_name")),
@@ -31,19 +36,20 @@ function readPayload(formData: FormData) {
     notes: cleanText(formData.get("notes")),
     pipelineStage: enumValue(formData.get("pipeline_stage"), PIPELINE_STAGES, "lead"),
     nextFollowUpDate: cleanText(formData.get("next_follow_up_date")),
+    translations: parseContentTranslationsFromFormData(formData, "client", service.contentTranslations.getLocalizationContext(actor)),
   };
 }
 
 export async function createClientRecord(formData: FormData) {
   const { actor, service } = await requireFreelancerBackend();
-  service.createClient(actor, readPayload(formData));
+  service.createClient(actor, readPayload(formData, service, actor));
   revalidatePath("/clients");
 }
 
 export async function updateClientRecord(formData: FormData) {
   const { actor, service } = await requireFreelancerBackend();
   const id = requiredText(formData.get("id"), "Müşteri kaydı bulunamadı.");
-  service.updateClient(actor, id, readPayload(formData));
+  service.updateClient(actor, id, readPayload(formData, service, actor));
   revalidatePath("/clients");
   revalidatePath(`/clients/${id}`);
 }
diff --git a/app/(dashboard)/clients/clients-client.tsx b/app/(dashboard)/clients/clients-client.tsx
index cd36a74..05f2d2b 100644
--- a/app/(dashboard)/clients/clients-client.tsx
+++ b/app/(dashboard)/clients/clients-client.tsx
@@ -63,6 +63,7 @@ export type ClientListItem = {
   next_follow_up_date: string | null;
   last_contact_date: string | null;
   client_value_score: number;
+  translations?: Record<string, Record<string, string>>;
 };
 
 type ClientPipelineStage = ClientListItem["pipeline_stage"];
@@ -83,12 +84,14 @@ type ClientsClientProps = {
   clients: ClientListItem[];
   totalRevenue: number;
   activeCount: number;
+  activeLocales: { code: string; name: string }[];
 };
 
 export function ClientsClient({
   clients,
   totalRevenue,
   activeCount,
+  activeLocales,
 }: ClientsClientProps) {
   const t = useTranslations();
   const [query, setQuery] = useState("");
@@ -123,7 +126,7 @@ export function ClientsClient({
 
     try {
       await updateClientPipelineStage(clientId, newStage);
-      toast.success("Müşteri aşaması güncellendi.");
+      toast.success(t("clients.messages.stageUpdated"));
     } catch (error) {
       setPipelineOverrides((current) => ({
         ...current,
@@ -132,7 +135,7 @@ export function ClientsClient({
       toast.error(
         error instanceof Error
           ? error.message
-          : "Müşteri aşaması güncellenemedi.",
+          : t("clients.errors.stageUpdateFailed"),
       );
     }
   }
@@ -161,32 +164,32 @@ export function ClientsClient({
           </h1>
         </div>
 
-        <ClientDialog mode="create" />
+        <ClientDialog mode="create" activeLocales={activeLocales} />
       </div>
 
       <div className="grid gap-3 md:grid-cols-4">
         <StatCard
-          label="Potansiyel (Lead)"
+          label={t("clients.stats.lead")}
           value={clients.filter(c => c.pipeline_stage === 'lead' || c.pipeline_stage === 'contacted').length.toString()}
           icon={Users}
           tone="blue"
         />
         <StatCard
-          label="Aktif Müşteri"
+          label={t("clients.stats.active")}
           value={activeCount.toString()}
           icon={UserCheck}
           tone="green"
         />
         <StatCard
-          label="Bekleyen Follow-up"
+          label={t("clients.stats.followUp")}
           value={clients.filter(c => c.next_follow_up_date && (isPast(new Date(c.next_follow_up_date)) || isToday(new Date(c.next_follow_up_date)))).length.toString()}
           icon={Clock}
           tone="rose"
         />
         <StatCard
-          label="Kayıtlı Gelir"
+          label={t("clients.stats.revenue")}
           value={formatCurrency(totalRevenue)}
-          description="Ödenmiş gelir işlemleri"
+          description={t("clients.stats.revenueDesc")}
           icon={Wallet}
           tone="primary"
         />
@@ -195,14 +198,14 @@ export function ClientsClient({
       <Tabs defaultValue="pipeline" className="w-full">
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
           <TabsList>
-            <TabsTrigger value="pipeline">Pipeline (Kanban)</TabsTrigger>
-            <TabsTrigger value="list">Müşteri Listesi</TabsTrigger>
+            <TabsTrigger value="pipeline">{t("clients.tabs.pipeline")}</TabsTrigger>
+            <TabsTrigger value="list">{t("clients.tabs.list")}</TabsTrigger>
           </TabsList>
           
           <Input
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder="Müşteri, firma, e-posta veya not ara"
+            placeholder={t("clients.search")}
             className="md:max-w-sm"
           />
         </div>
@@ -214,7 +217,7 @@ export function ClientsClient({
               return (
                 <DroppableColumn 
                   key={stage.id} 
-                  title={stage.label} 
+                  title={t(`clients.pipeline.${stage.id}` as any)} 
                   count={stageClients.length} 
                   color={stage.color.split(' ')[1]}
                   onDrop={() => handleDrop(stage.id)}
@@ -230,7 +233,7 @@ export function ClientsClient({
                   ))}
                   {stageClients.length === 0 && (
                     <div className="h-24 flex items-center justify-center border-2 border-dashed border-border rounded-md text-xs text-muted-foreground">
-                      Boş
+                      {t("clients.empty.pipeline")}
                     </div>
                   )}
                 </DroppableColumn>
@@ -244,22 +247,22 @@ export function ClientsClient({
             <div className="overflow-x-auto rounded-sm border border-border">
               <div className="min-w-[900px]">
                 <div className="grid grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
-                  <span>Müşteri</span>
-                  <span>İletişim</span>
-                  <span>Aşama</span>
-                  <span>Follow-up</span>
-                  <span>Projeler</span>
+                  <span>{t("clients.list.client")}</span>
+                  <span>{t("clients.list.contact")}</span>
+                  <span>{t("clients.list.stage")}</span>
+                  <span>{t("clients.list.followUp")}</span>
+                  <span>Finans</span>
                   <span className="text-right">İşlem</span>
                 </div>
                 <div className="divide-y divide-border">
-                  {filteredClients.map((client) => (
-                    <ClientRow key={client.id} client={client} />
+                  {filteredClients.map(client => (
+                    <ClientRow key={client.id} client={client} activeLocales={activeLocales} />
                   ))}
                 </div>
               </div>
             </div>
           ) : (
-            <EmptyState hasQuery={Boolean(normalizedQuery)} />
+            <EmptyState hasQuery={query.length > 0} />
           )}
         </TabsContent>
       </Tabs>
@@ -320,7 +323,7 @@ function DraggableClientCard({
               {client.name}
             </PendingLink>
             <div onPointerDown={(e) => e.stopPropagation()}>
-              <ClientDialog mode="edit" client={client} trigger={<Button size="icon-sm" effect="shine" variant="secondary" ><Pencil className="h-3 w-3" /></Button>} />
+              <ClientDialog mode="edit" client={client} activeLocales={[{code: "dummy", name: "dummy"}]} trigger={<Button size="icon-sm" effect="shine" variant="secondary" ><Pencil className="h-3 w-3" /></Button>} />
             </div>
           </div>
           {client.company_name && <p className="text-xs text-muted-foreground mb-2 pointer-events-none">{client.company_name}</p>}
@@ -339,7 +342,8 @@ function DraggableClientCard({
   );
 }
 
-function ClientRow({ client }: { client: ClientListItem }) {
+function ClientRow({ client, activeLocales }: { client: ClientListItem, activeLocales: { code: string; name: string }[] }) {
+  const t = useTranslations();
   const isFollowUpOverdue = client.next_follow_up_date && (isPast(new Date(client.next_follow_up_date)) || isToday(new Date(client.next_follow_up_date)));
   const stage = pipelineStages.find(s => s.id === client.pipeline_stage) || pipelineStages[0];
 
@@ -353,7 +357,7 @@ function ClientRow({ client }: { client: ClientListItem }) {
           <div className="min-w-0">
             <PendingLink href={`/clients/${client.id}`} className="truncate font-medium text-foreground hover:underline flex items-center gap-1.5" showSpinner>{client.name}</PendingLink>
             <div className="truncate text-sm text-muted-foreground">
-              {client.company_name || "Firma bilgisi yok"}
+              {client.company_name || t("clients.list.noCompany")}
             </div>
           </div>
         </div>
@@ -373,13 +377,13 @@ function ClientRow({ client }: { client: ClientListItem }) {
           </Link>
         ) : null}
         {!client.email && !client.phone && !client.website ? (
-          <span>İletişim bilgisi yok</span>
+          <span>{t("clients.list.noContact")}</span>
         ) : null}
       </div>
 
       <div>
         <Badge className={stage.color}>
-          {stage.label}
+          {t(`clients.pipeline.${stage.id}` as any)}
         </Badge>
       </div>
 
@@ -395,7 +399,7 @@ function ClientRow({ client }: { client: ClientListItem }) {
       </div>
 
       <div className="text-sm">
-        <div className="font-medium text-foreground">{client.projectCount} Proje</div>
+        <div className="font-medium text-foreground">{client.projectCount} {t("clients.list.projects")}</div>
         <div className="text-muted-foreground">{formatCurrency(client.revenueTotal)}</div>
       </div>
 
@@ -405,7 +409,7 @@ function ClientRow({ client }: { client: ClientListItem }) {
             <ArrowRight className="h-4 w-4" />
           </Button>
         </PendingLink>
-        <ClientDialog mode="edit" client={client} trigger={<Button effect="shine" variant="secondary" className="min-w-20 gap-2 px-3"><Pencil className="h-4 w-4" /> Düzenle</Button>} />
+        <ClientDialog mode="edit" client={client} activeLocales={activeLocales} trigger={<Button effect="shine" variant="secondary" className="min-w-20 gap-2 px-3"><Pencil className="h-4 w-4" /> {t("clients.actions.edit")}</Button>} />
       </div>
     </div>
   );
@@ -414,12 +418,15 @@ function ClientRow({ client }: { client: ClientListItem }) {
 function ClientDialog({
   mode,
   client,
-  trigger
+  trigger,
+  activeLocales
 }: {
   mode: "create" | "edit";
   client?: ClientListItem;
   trigger?: React.ReactNode;
+  activeLocales: { code: string; name: string }[];
 }) {
+  const t = useTranslations();
   const [open, setOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const action = mode === "create" ? createClientRecord : updateClientRecord;
@@ -430,12 +437,12 @@ function ClientDialog({
     try {
       await action(formData);
       setOpen(false);
-      toast.success(mode === "create" ? "Müşteri eklendi." : "Müşteri güncellendi.");
+      toast.success(mode === "create" ? t("clients.messages.created") : t("clients.messages.updated"));
     } catch (error) {
       toast.error(
         error instanceof Error
           ? error.message
-          : "Müşteri kaydedilirken beklenmeyen bir hata oluştu.",
+          : t("clients.errors.saveFailed"),
       );
     } finally {
       setIsSubmitting(false);
@@ -451,7 +458,7 @@ function ClientDialog({
             className="min-w-24 gap-2 px-3"
           >
             {mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
-            {mode === "create" ? "Müşteri ekle" : "Düzenle"}
+            {mode === "create" ? t("clients.actions.add") : t("clients.actions.edit")}
           </Button>
         )}
       </DialogTrigger>
@@ -460,25 +467,25 @@ function ClientDialog({
           {client ? <input type="hidden" name="id" value={client.id} /> : null}
           <DialogHeader className="shrink-0 px-5 pb-4 pt-5 pr-12">
             <DialogTitle>
-              {mode === "create" ? "Yeni müşteri" : "Müşteriyi düzenle"}
+              {mode === "create" ? t("clients.form.createTitle") : t("clients.form.editTitle")}
             </DialogTitle>
             <DialogDescription>
-              Müşterinin iletişim ve CRM detaylarını girin.
+              {t("clients.description")}
             </DialogDescription>
           </DialogHeader>
 
           <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto px-5 pb-5">
-            <ClientFormFields client={client} />
+            <ClientFormFields client={client} activeLocales={activeLocales} />
           </div>
 
           <DialogFooter className="shrink-0 border-t border-border bg-background p-5">
             <Button variant="default" effect="shine" type="submit" disabled={isSubmitting} className="w-full gap-2 sm:w-auto">
               {mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
               {isSubmitting
-                ? "Kaydediliyor"
+                ? "..."
                 : mode === "create"
-                  ? "Müşteriyi ekle"
-                  : "Değişiklikleri kaydet"}
+                  ? t("clients.form.save")
+                  : t("clients.form.save")}
             </Button>
           </DialogFooter>
         </form>
@@ -487,12 +494,13 @@ function ClientDialog({
   );
 }
 
-function ClientFormFields({ client }: { client?: ClientListItem }) {
+function ClientFormFields({ client, activeLocales }: { client?: ClientListItem, activeLocales: { code: string; name: string }[] }) {
+  const t = useTranslations();
   return (
     <div className="grid gap-4">
       <div className="grid gap-4 md:grid-cols-2">
         <div className="grid gap-2">
-          <Label htmlFor={`name-${client?.id || "new"}`}>Müşteri adı</Label>
+          <Label htmlFor={`name-${client?.id || "new"}`}>{t("clients.form.name")}</Label>
           <Input
             id={`name-${client?.id || "new"}`}
             name="name"
@@ -502,40 +510,39 @@ function ClientFormFields({ client }: { client?: ClientListItem }) {
           />
         </div>
         <div className="grid gap-2">
-          <Label htmlFor={`company-${client?.id || "new"}`}>Firma / marka adı</Label>
+          <Label htmlFor={`company-${client?.id || "new"}`}>{t("clients.form.company")}</Label>
           <Input
             id={`company-${client?.id || "new"}`}
             name="company_name"
             defaultValue={client?.company_name || ""}
-            placeholder="Opsiyonel"
           />
         </div>
       </div>
 
       <div className="grid gap-4 md:grid-cols-2 border-t border-border pt-4 mt-2">
         <div className="grid gap-2">
-          <Label>Satış Aşaması (Pipeline)</Label>
+          <Label>{t("clients.form.pipelineStage")}</Label>
           <Select name="pipeline_stage" defaultValue={client?.pipeline_stage || "lead"}>
             <SelectTrigger>
-              <SelectValue placeholder="Aşama seç" />
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
               {pipelineStages.map(stage => (
-                <SelectItem key={stage.id} value={stage.id}>{stage.label}</SelectItem>
+                <SelectItem key={stage.id} value={stage.id}>{t(`clients.pipeline.${stage.id}` as any)}</SelectItem>
               ))}
             </SelectContent>
           </Select>
         </div>
         <div className="grid gap-2">
-          <Label>Durum</Label>
+          <Label>{t("clients.form.status")}</Label>
           <Select name="status" defaultValue={client?.status || "active"}>
             <SelectTrigger>
-              <SelectValue placeholder="Durum seç" />
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="active">Aktif</SelectItem>
-              <SelectItem value="paused">Duraklatıldı</SelectItem>
-              <SelectItem value="archived">Arşivlendi</SelectItem>
+              <SelectItem value="active">{t("clients.form.active")}</SelectItem>
+              <SelectItem value="paused">{t("clients.form.paused")}</SelectItem>
+              <SelectItem value="archived">{t("clients.form.archived")}</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -543,7 +550,7 @@ function ClientFormFields({ client }: { client?: ClientListItem }) {
 
       <div className="grid gap-4 md:grid-cols-2">
         <div className="grid gap-2">
-          <Label htmlFor={`followup-${client?.id || "new"}`}>Sonraki Follow-up Tarihi</Label>
+          <Label htmlFor={`followup-${client?.id || "new"}`}>{t("clients.form.followUp")}</Label>
           <Input
             id={`followup-${client?.id || "new"}`}
             name="next_follow_up_date"
@@ -555,7 +562,7 @@ function ClientFormFields({ client }: { client?: ClientListItem }) {
 
       <div className="grid gap-4 md:grid-cols-2 border-t border-border pt-4 mt-2">
         <div className="grid gap-2">
-          <Label htmlFor={`email-${client?.id || "new"}`}>E-posta</Label>
+          <Label htmlFor={`email-${client?.id || "new"}`}>{t("clients.form.email")}</Label>
           <Input
             id={`email-${client?.id || "new"}`}
             name="email"
@@ -565,7 +572,7 @@ function ClientFormFields({ client }: { client?: ClientListItem }) {
           />
         </div>
         <div className="grid gap-2">
-          <Label htmlFor={`phone-${client?.id || "new"}`}>Telefon</Label>
+          <Label htmlFor={`phone-${client?.id || "new"}`}>{t("clients.form.phone")}</Label>
           <PhoneInput
             id={`phone-${client?.id || "new"}`}
             name="phone"
@@ -574,15 +581,26 @@ function ClientFormFields({ client }: { client?: ClientListItem }) {
         </div>
       </div>
 
-      <div className="grid gap-2">
-        <Label htmlFor={`notes-${client?.id || "new"}`}>Genel Notlar</Label>
-        <Textarea
-          id={`notes-${client?.id || "new"}`}
-          name="notes"
-          defaultValue={client?.notes || ""}
-          placeholder="İletişim notları, beklentiler, özel bilgiler..."
-          rows={3}
-        />
+      <div className="grid gap-2 border-t border-border pt-4 mt-2">
+        <Tabs defaultValue={activeLocales[0].code}>
+          <div className="flex items-center justify-between mb-4">
+            <Label>{t("clients.form.notes")}</Label>
+            <TabsList>
+              {activeLocales.map((locale) => (
+                <TabsTrigger key={locale.code} value={locale.code}>{locale.name}</TabsTrigger>
+              ))}
+            </TabsList>
+          </div>
+          {activeLocales.map((locale) => (
+            <TabsContent key={locale.code} value={locale.code} className="mt-0 space-y-4">
+              <Textarea
+                name={`i18n.${locale.code}.notes`}
+                defaultValue={client?.translations?.[locale.code]?.notes ?? ""}
+                rows={4}
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
       </div>
     </div>
   );
diff --git a/app/(dashboard)/clients/page.tsx b/app/(dashboard)/clients/page.tsx
index 9780bba..acdc207 100644
--- a/app/(dashboard)/clients/page.tsx
+++ b/app/(dashboard)/clients/page.tsx
@@ -1,8 +1,26 @@
 import { ClientsClient, type ClientListItem } from "@/app/(dashboard)/clients/clients-client";
 import { requireFreelancerBackend } from "@/server/web/freelancer";
+import { resolveFreelancerLocale } from "@/server/i18n/resolver";
+import { getClientI18nPayload } from "@/server/i18n/translator";
+import { I18nProvider } from "@/components/i18n/i18n-provider";
+import type { ContentTranslationRow } from "@/server/i18n/content";
+
+function buildTranslations(rows: ContentTranslationRow[] | undefined) {
+  if (!rows) return undefined;
+  const result: Record<string, Record<string, string>> = {};
+  for (const row of rows) {
+    if (!result[row.locale]) result[row.locale] = {};
+    result[row.locale][row.field] = row.value;
+  }
+  return result;
+}
 
 export default async function ClientsPage() {
-  const { actor, service } = await requireFreelancerBackend();
+  const { context, actor, service } = await requireFreelancerBackend();
+  const resolvedLocale = await resolveFreelancerLocale(context);
+  const payload = getClientI18nPayload(resolvedLocale.locale, ["clients"]);
+  const activeLocales = service.listLocales(actor).filter(l => l.status !== "archived").map(l => ({ code: l.code, name: l.nativeName }));
+
   const clientsData = service.listClients(actor);
   const projects = service.listProjects(actor);
   const finance = service.listFinanceTransactions(actor);
@@ -32,6 +50,8 @@ export default async function ClientsPage() {
     }
   }
 
+  const translationsMap = service.contentTranslations.listBatch("client", clientsData.map(c => c.id));
+
   const clients: ClientListItem[] = clientsData.map((client) => {
     return {
       id: client.id,
@@ -49,14 +69,18 @@ export default async function ClientsPage() {
       created_at: client.createdAt.toISOString(),
       projectCount: projectCountByClient.get(client.id) ?? 0,
       revenueTotal: revenueByClient.get(client.id) ?? 0,
+      translations: buildTranslations(translationsMap.get(client.id)),
     };
   });
 
   return (
-    <ClientsClient
-      clients={clients}
-      totalRevenue={clients.reduce((sum, client) => sum + client.revenueTotal, 0)}
-      activeCount={clients.filter((client) => client.status === "active").length}
-    />
+    <I18nProvider payload={payload}>
+      <ClientsClient
+        clients={clients}
+        totalRevenue={clients.reduce((sum, client) => sum + client.revenueTotal, 0)}
+        activeCount={clients.filter((client) => client.status === "active").length}
+        activeLocales={activeLocales}
+      />
+    </I18nProvider>
   );
 }