feat(ui): add workspace customization and simplify navigation

2026-07-17 12:47:54 +03:00
parent b04031a3e3
commit dafd9eb344
24 changed files with 855 additions and 224 deletions
@@ -7,7 +7,6 @@ import {
  Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis,
  PieChart, Pie, Cell, Legend
 } from "recharts";
-import { BarChart3, Filter } from "lucide-react";

 export type AnalyticsData = {
  metrics: {
@@ -45,19 +44,13 @@ export function AnalyticsClient({ data }: AnalyticsClientProps) {
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <BarChart3 className="h-4 w-4" />
-            Analizler
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              Performans ve Finans Analizi
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Müşteri bazlı gelirler, görev tamamlama oranları ve proje ilerleme grafikleri.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            Performans ve Finans Analizi
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Müşteri bazlı gelirler, görev tamamlama oranları ve proje ilerleme grafikleri.
+          </p>
        </div>

        <div className="flex items-center gap-3">
@@ -21,7 +21,7 @@ import {
  SelectValue,
  toast,
 } from "poyraz-ui/molecules";
-import { CalendarDays, Clock, Pencil, Plus, Trash2 } from "lucide-react";
+import { Clock, Pencil, Plus, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";

 export type CalendarRelationOption = {
@@ -89,17 +89,11 @@ export function CalendarClient({ events, clients, projects, tasks }: CalendarCli
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <CalendarDays className="h-4 w-4" />
-            Planlama
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">Takvim</h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Toplantı, odak bloğu, deadline, kişisel ve finans etkinliklerini yönet.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">Takvim</h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Toplantı, odak bloğu, deadline, kişisel ve finans etkinliklerini yönet.
+          </p>
        </div>

        <CalendarEventDialog
@@ -163,19 +163,13 @@ export function ClientsClient({
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Users className="h-4 w-4" />
-            CRM & Operasyon
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              CRM & Müşteriler
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Potansiyel müşterilerini pipeline üzerinden takip et ve müşteri ilişkilerini yönet.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            CRM & Müşteriler
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Potansiyel müşterilerini pipeline üzerinden takip et ve müşteri ilişkilerini yönet.
+          </p>
        </div>

        <ClientDialog mode="create" />
@@ -64,19 +64,13 @@ export function DashboardClient({ data }: DashboardClientProps) {
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      {/* Header */}
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Activity className="h-4 w-4" />
-            Genel Bakış
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              Dashboard
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              İş performansını, gelirlerini ve günlük durumunu takip et.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            Dashboard
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            İş performansını, gelirlerini ve günlük durumunu takip et.
+          </p>
        </div>

        <div className="flex items-center gap-3">
@@ -115,19 +115,13 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Wallet className="h-4 w-4" />
-            Finans
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              Finans işlemleri
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Gelir, gider, ödeme durumu ve proje/müşteri bağlantılarını takip et.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            Finans işlemleri
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Gelir, gider, ödeme durumu ve proje/müşteri bağlantılarını takip et.
+          </p>
        </div>
        <div className="flex gap-2">
          <AIFinanceDialog />
@@ -77,19 +77,13 @@ export function JournalClient({ logs }: JournalClientProps) {
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Activity className="h-4 w-4" />
-            Günlük durum
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              Mood ve enerji
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Günlük ruh hali, enerji ve çalışma memnuniyetini takip ederek kişisel kapasite trendini gör.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            Mood ve enerji
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Günlük ruh hali, enerji ve çalışma memnuniyetini takip ederek kişisel kapasite trendini gör.
+          </p>
        </div>

        <div className="flex flex-col gap-2 sm:flex-row">
@@ -1,14 +1,18 @@
 import { DashboardShell } from "@/components/layout/dashboard-shell";
+import { domainActorFromSession } from "@/server/auth/domain-actor";
 import { requireFreelancer } from "@/server/auth/session";
 import { getPublicBranding } from "@/server/branding/runtime";
+import { getUserPreferences } from "@/server/settings/preferences";

 export default async function DashboardLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
-  const { user, profile } = await requireFreelancer();
+  const context = await requireFreelancer();
+  const { user, profile } = context;
  const branding = getPublicBranding();
+  const preferences = getUserPreferences(domainActorFromSession(context));
  const displayName = profile.displayName || user.name || user.email.split("@")[0] || "Neta Kullanıcısı";

  const shortName =
@@ -28,6 +32,7 @@ export default async function DashboardLayout({
        lightLogoUrl: branding.lightLogoUrl,
        darkLogoUrl: branding.darkLogoUrl,
      }}
+      colorMode={preferences.colorMode}
      user={{
        email: user.email,
        displayName,
@@ -114,19 +114,13 @@ export function ProjectsClient({ projects, clients }: ProjectsClientProps) {
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <FolderKanban className="h-4 w-4" />
-            İş ve side project yönetimi
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              Projeler
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Müşteri işleri ve kişisel side projectleri aynı yerde takip et.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            Projeler
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Müşteri işleri ve kişisel side projectleri aynı yerde takip et.
+          </p>
        </div>

        <div className="flex gap-2">
@@ -1,14 +1,24 @@
 "use server";

 import { eq } from "drizzle-orm";
-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
 import { revalidatePath } from "next/cache";
 import { auth } from "@/server/auth/auth";
+import {
+  COLOR_MODE_COOKIE,
+  COLOR_MODE_COOKIE_MAX_AGE,
+} from "@/lib/color-mode";
+import { getServerConfig } from "@/server/config";
+import { getBrandingService } from "@/server/branding/runtime";
 import { getSqliteConnection } from "@/server/db/client";
 import { appProfiles } from "@/server/db/schema";
 import { domainActorFromSession } from "@/server/auth/domain-actor";
 import { getFileService } from "@/server/files/runtime";
 import { getPublicAiSettings, updateAiSettings } from "@/server/settings/ai";
+import {
+  getUserPreferences,
+  updateColorModePreference,
+} from "@/server/settings/preferences";
 import { requireFreelancerBackend } from "@/server/web/freelancer";
 import { cleanText } from "@/server/web/form-data";

@@ -16,6 +26,8 @@ export async function loadSettings() {
  const { context, actor } = await requireFreelancerBackend();
  const [firstName = "", ...lastNameParts] = context.profile.displayName.trim().split(/\s+/);
  const ai = getPublicAiSettings(actor);
+  const preferences = getUserPreferences(actor);
+  const branding = getBrandingService().getPublic();

  return {
    firstName,
@@ -23,6 +35,11 @@ export async function loadSettings() {
    avatarUrl: context.user.image ?? "",
    aiProvider: ai.provider,
    hasApiKey: ai.hasApiKey,
+    colorMode: preferences.colorMode,
+    workspaceName: branding.applicationName,
+    primaryColor: branding.primaryColor,
+    logoUrl: branding.lightLogoUrl ?? branding.darkLogoUrl ?? "",
+    hasCustomLogo: Boolean(branding.lightLogoFileId || branding.darkLogoFileId),
  };
 }

@@ -98,3 +115,141 @@ export async function saveAiSettings(provider: string, apiKey: string) {
    return { error: error instanceof Error ? error.message : "Ayarlar kaydedilemedi." };
  }
 }
+
+export async function saveColorMode(colorMode: string) {
+  try {
+    const { actor } = await requireFreelancerBackend();
+    const preferences = updateColorModePreference(actor, { colorMode });
+    const config = getServerConfig();
+
+    (await cookies()).set(COLOR_MODE_COOKIE, preferences.colorMode, {
+      httpOnly: false,
+      maxAge: COLOR_MODE_COOKIE_MAX_AGE,
+      path: "/",
+      sameSite: "lax",
+      secure: config.secureCookies,
+    });
+
+    revalidatePath("/", "layout");
+    return { success: true, colorMode: preferences.colorMode };
+  } catch (error) {
+    return { error: error instanceof Error ? error.message : "Tema tercihi kaydedilemedi." };
+  }
+}
+
+export async function saveWorkspaceBranding(formData: FormData) {
+  let uploadedLogoId: string | null = null;
+  let brandingCommitted = false;
+  let actorForCleanup: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"] | null = null;
+
+  try {
+    const { actor } = await requireFreelancerBackend();
+    actorForCleanup = actor;
+
+    const workspaceName = cleanText(formData.get("workspaceName"));
+    const primaryColor = cleanText(formData.get("primaryColor"))?.toUpperCase() ?? "";
+    if (!workspaceName || workspaceName.length > 80) {
+      return { error: "Workspace adı 1-80 karakter arasında olmalıdır." };
+    }
+    if (!/^#[0-9A-F]{6}$/.test(primaryColor)) {
+      return { error: "Ana renk #RRGGBB formatında olmalıdır." };
+    }
+
+    const brandingService = getBrandingService();
+    const fileService = getFileService();
+    const current = brandingService.getPublic();
+    const logo = formData.get("logo");
+
+    if (logo instanceof File && logo.size > 0) {
+      uploadedLogoId = fileService.upload(actor, {
+        kind: "branding_logo",
+        originalName: logo.name,
+        claimedMimeType: logo.type,
+        bytes: new Uint8Array(await logo.arrayBuffer()),
+      }).id;
+    }
+
+    const updated = brandingService.update(actor, {
+      applicationName: workspaceName,
+      shortName: Array.from(workspaceName).slice(0, 24).join(""),
+      organizationName: workspaceName,
+      primaryColor,
+      ...(uploadedLogoId
+        ? {
+            lightLogoFileId: uploadedLogoId,
+            darkLogoFileId: uploadedLogoId,
+          }
+        : {}),
+    });
+    brandingCommitted = true;
+
+    if (uploadedLogoId) {
+      deleteBrandingFilesBestEffort(
+        actor,
+        [current.lightLogoFileId, current.darkLogoFileId],
+        uploadedLogoId,
+      );
+    }
+
+    revalidateBrandingPaths();
+    return {
+      success: true,
+      workspaceName: updated.applicationName,
+      primaryColor: updated.primaryColor,
+      logoUrl: updated.lightLogoUrl ?? updated.darkLogoUrl ?? "",
+      hasCustomLogo: Boolean(updated.lightLogoFileId || updated.darkLogoFileId),
+    };
+  } catch (error) {
+    if (uploadedLogoId && actorForCleanup && !brandingCommitted) {
+      deleteBrandingFilesBestEffort(actorForCleanup, [uploadedLogoId]);
+    }
+    return { error: error instanceof Error ? error.message : "Workspace görünümü kaydedilemedi." };
+  }
+}
+
+export async function removeWorkspaceLogo() {
+  try {
+    const { actor } = await requireFreelancerBackend();
+    const brandingService = getBrandingService();
+    const current = brandingService.getPublic();
+    const updated = brandingService.update(actor, {
+      lightLogoFileId: null,
+      darkLogoFileId: null,
+    });
+
+    deleteBrandingFilesBestEffort(actor, [
+      current.lightLogoFileId,
+      current.darkLogoFileId,
+    ]);
+    revalidateBrandingPaths();
+    return {
+      success: true,
+      logoUrl: updated.lightLogoUrl ?? updated.darkLogoUrl ?? "",
+      hasCustomLogo: false,
+    };
+  } catch (error) {
+    return { error: error instanceof Error ? error.message : "Logo kaldırılamadı." };
+  }
+}
+
+function deleteBrandingFilesBestEffort(
+  actor: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"],
+  fileIds: Array<string | null>,
+  exceptId?: string,
+): void {
+  const uniqueFileIds = new Set(fileIds.filter((id): id is string => Boolean(id && id !== exceptId)));
+  for (const fileId of uniqueFileIds) {
+    try {
+      getFileService().delete(actor, fileId);
+    } catch {
+      // The branding update is authoritative; orphan cleanup can safely be retried later.
+    }
+  }
+}
+
+function revalidateBrandingPaths(): void {
+  revalidatePath("/", "layout");
+  revalidatePath("/settings");
+  revalidatePath("/portal", "layout");
+  revalidatePath("/manifest.webmanifest");
+}
@@ -2,15 +2,74 @@

 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { Blocks, Brain, Key, Save, Shield, User } from "lucide-react";
-import { loadSettings, saveAiSettings, updatePassword, updateProfile } from "./actions";
-import { Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
+import {
+  Blocks,
+  Brain,
+  Building2,
+  ImageIcon,
+  Key,
+  Monitor,
+  Moon,
+  Palette,
+  Save,
+  Shield,
+  Sun,
+  Trash2,
+  Upload,
+  User,
+} from "lucide-react";
+import {
+  loadSettings,
+  removeWorkspaceLogo,
+  saveAiSettings,
+  saveColorMode,
+  saveWorkspaceBranding,
+  updatePassword,
+  updateProfile,
+} from "./actions";
+import {
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+} from "poyraz-ui/atoms";
 import { toast } from "poyraz-ui/molecules";
+import { applyColorMode } from "@/components/theme/color-mode-sync";
+import { isColorMode, type ColorMode } from "@/lib/color-mode";

 type AiProvider = "groq" | "ollama" | "openai" | "gemini";

+const colorModeOptions = [
+  {
+    value: "light",
+    label: "Açık",
+    description: "Her zaman aydınlık renk paletini kullanır.",
+    icon: Sun,
+  },
+  {
+    value: "dark",
+    label: "Koyu",
+    description: "Her zaman koyu renk paletini kullanır.",
+    icon: Moon,
+  },
+  {
+    value: "system",
+    label: "Sistem",
+    description: "Cihazınızın görünüm tercihini otomatik takip eder.",
+    icon: Monitor,
+  },
+] satisfies Array<{
+  value: ColorMode;
+  label: string;
+  description: string;
+  icon: typeof Sun;
+}>;
+
 export default function SettingsPage() {
-  const [activeTab, setActiveTab] = useState("AI Preferences");
+  const [activeTab, setActiveTab] = useState("Workspace");

  // Profile States
  const [firstName, setFirstName] = useState("");
@@ -24,9 +83,20 @@ export default function SettingsPage() {
  const [aiProvider, setAiProvider] = useState<AiProvider>("gemini");
  const [apiKey, setApiKey] = useState("");
  const [hasApiKey, setHasApiKey] = useState(false);
+  const [colorMode, setColorMode] = useState<ColorMode>("system");
+  const [isSavingColorMode, setIsSavingColorMode] = useState(false);
+  const [workspaceName, setWorkspaceName] = useState("Neta");
+  const [primaryColor, setPrimaryColor] = useState("#C81E1E");
+  const [logoUrl, setLogoUrl] = useState("");
+  const [pendingLogoUrl, setPendingLogoUrl] = useState("");
+  const [hasCustomLogo, setHasCustomLogo] = useState(false);
+  const [isSavingBranding, setIsSavingBranding] = useState(false);
+  const logoObjectUrlRef = useRef<string | null>(null);

  const tabs = [
+    { name: "Workspace", icon: Building2 },
    { name: "Profile & Account", icon: User },
+    { name: "Görünüm", icon: Palette },
    { name: "AI Preferences", icon: Brain },
    { name: "Security", icon: Shield },
  ];
@@ -42,12 +112,23 @@ export default function SettingsPage() {
      setAvatarUrl(settings.avatarUrl);
      setAiProvider(settings.aiProvider);
      setHasApiKey(settings.hasApiKey);
+      setColorMode(settings.colorMode);
+      setWorkspaceName(settings.workspaceName);
+      setPrimaryColor(settings.primaryColor);
+      setLogoUrl(settings.logoUrl);
+      setHasCustomLogo(settings.hasCustomLogo);
    };

    void fetchData();
    return () => { isActive = false; };
  }, []);

+  useEffect(() => {
+    return () => {
+      if (logoObjectUrlRef.current) URL.revokeObjectURL(logoObjectUrlRef.current);
+    };
+  }, []);
+
  const handleProfileAction = async (formData: FormData) => {
    const response = await updateProfile(formData);
    if (response?.error) {
@@ -80,21 +161,82 @@ export default function SettingsPage() {
    toast.success("Yapay Zeka ayarları kaydedildi!");
  };

+  const handleColorModeChange = async (value: string) => {
+    if (!isColorMode(value) || value === colorMode || isSavingColorMode) return;
+
+    const previousColorMode = colorMode;
+    setColorMode(value);
+    applyColorMode(value);
+    setIsSavingColorMode(true);
+
+    try {
+      const response = await saveColorMode(value);
+      if (response.error) {
+        setColorMode(previousColorMode);
+        applyColorMode(previousColorMode);
+        toast.error(response.error);
+        return;
+      }
+
+      toast.success("Görünüm tercihi kaydedildi.");
+    } finally {
+      setIsSavingColorMode(false);
+    }
+  };
+
+  const handleLogoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (logoObjectUrlRef.current) URL.revokeObjectURL(logoObjectUrlRef.current);
+    const file = event.target.files?.[0];
+    const objectUrl = file ? URL.createObjectURL(file) : "";
+    logoObjectUrlRef.current = objectUrl || null;
+    setPendingLogoUrl(objectUrl);
+  };
+
+  const handleWorkspaceBrandingAction = async (formData: FormData) => {
+    setIsSavingBranding(true);
+    try {
+      const response = await saveWorkspaceBranding(formData);
+      if (response.error) {
+        toast.error(response.error);
+        return;
+      }
+
+      toast.success("Workspace görünümü güncellendi.");
+      window.location.reload();
+    } finally {
+      setIsSavingBranding(false);
+    }
+  };
+
+  const handleRemoveWorkspaceLogo = async () => {
+    setIsSavingBranding(true);
+    try {
+      const response = await removeWorkspaceLogo();
+      if (response.error) {
+        toast.error(response.error);
+        return;
+      }
+
+      setLogoUrl("");
+      setPendingLogoUrl("");
+      setHasCustomLogo(false);
+      toast.success("Workspace logosu kaldırıldı.");
+      window.location.reload();
+    } finally {
+      setIsSavingBranding(false);
+    }
+  };
+
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <span className="text-foreground">Settings</span> / {activeTab}
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              Ayarlar
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Profilinizi, güvenlik ayarlarınızı ve yapay zeka tercihlerinizi yönetin.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            Ayarlar
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Workspace markanızı, profilinizi, görünümü ve sistem tercihlerinizi yönetin.
+          </p>
        </div>
      </div>

@@ -122,6 +264,134 @@ export default function SettingsPage() {

        {/* Settings Content Area */}
        <div className="flex-1">
+          {activeTab === "Workspace" && (
+            <Card className="animate-in fade-in duration-300">
+              <CardContent className="p-6 sm:p-8">
+                <div className="mb-7 space-y-1.5">
+                  <h2 className="text-xl font-bold text-foreground">Workspace görünümü</h2>
+                  <p className="max-w-2xl text-sm text-muted-foreground">
+                    Müşterilerinizin ve sizin gördüğünüz workspace adını, logoyu ve ana rengi yönetin.
+                  </p>
+                </div>
+
+                <form action={handleWorkspaceBrandingAction} className="max-w-3xl space-y-8">
+                  <section className="space-y-3">
+                    <div className="space-y-1">
+                      <Label htmlFor="workspaceName">Workspace adı</Label>
+                      <p className="text-xs text-muted-foreground">
+                        Firma, freelance marka veya çalışma alanı adınız.
+                      </p>
+                    </div>
+                    <Input
+                      id="workspaceName"
+                      name="workspaceName"
+                      value={workspaceName}
+                      onChange={(event) => setWorkspaceName(event.target.value)}
+                      minLength={1}
+                      maxLength={80}
+                      required
+                    />
+                  </section>
+
+                  <section className="space-y-4 border-t border-border pt-7">
+                    <div className="space-y-1">
+                      <Label htmlFor="workspaceLogo">Workspace logosu</Label>
+                      <p className="text-xs text-muted-foreground">
+                        PNG, JPEG, WebP veya GIF; en fazla 5 MB. Şeffaf arka planlı yatay logo önerilir.
+                      </p>
+                    </div>
+
+                    <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(220px,0.7fr)]">
+                      <div className="space-y-3">
+                        <Input
+                          id="workspaceLogo"
+                          name="logo"
+                          type="file"
+                          accept="image/png,image/jpeg,image/webp,image/gif"
+                          onChange={handleLogoChange}
+                          className="cursor-pointer"
+                        />
+                        {hasCustomLogo ? (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            disabled={isSavingBranding}
+                            onClick={handleRemoveWorkspaceLogo}
+                            className="gap-2 text-destructive hover:text-destructive"
+                          >
+                            <Trash2 className="h-4 w-4" aria-hidden="true" />
+                            Logoyu kaldır
+                          </Button>
+                        ) : null}
+                      </div>
+
+                      <div className="flex min-h-28 items-center justify-center overflow-hidden rounded-md border border-border bg-muted/40 p-4">
+                        {pendingLogoUrl || logoUrl ? (
+                          <Image
+                            src={pendingLogoUrl || logoUrl}
+                            alt="Workspace logo önizlemesi"
+                            width={220}
+                            height={80}
+                            unoptimized
+                            className="max-h-20 w-auto max-w-full object-contain"
+                          />
+                        ) : (
+                          <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                            <ImageIcon className="h-7 w-7" aria-hidden="true" />
+                            <span className="text-xs">Henüz özel logo yüklenmedi</span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </section>
+
+                  <section className="space-y-4 border-t border-border pt-7">
+                    <div className="space-y-1">
+                      <Label htmlFor="primaryColor">Ana renk</Label>
+                      <p className="text-xs text-muted-foreground">
+                        Bir renk seçin; vurgu, focus ve yumuşak yüzey tonları otomatik türetilir.
+                      </p>
+                    </div>
+
+                    <div className="flex max-w-sm items-center gap-3">
+                      <Input
+                        type="color"
+                        value={primaryColor}
+                        onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
+                        aria-label="Ana renk seçici"
+                        className="h-11 w-16 shrink-0 cursor-pointer p-1"
+                      />
+                      <Input
+                        id="primaryColor"
+                        name="primaryColor"
+                        value={primaryColor}
+                        onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
+                        pattern="^#[0-9A-Fa-f]{6}$"
+                        maxLength={7}
+                        placeholder="#C81E1E"
+                        required
+                        className="font-mono uppercase"
+                      />
+                      <span
+                        className="h-10 w-10 shrink-0 rounded-md border border-border"
+                        style={{ backgroundColor: /^#[0-9A-Fa-f]{6}$/.test(primaryColor) ? primaryColor : "transparent" }}
+                        aria-hidden="true"
+                      />
+                    </div>
+                  </section>
+
+                  <div className="flex items-center gap-3 border-t border-border pt-6">
+                    <Button type="submit" loading={isSavingBranding} className="gap-2">
+                      <Upload className="h-4 w-4" aria-hidden="true" />
+                      Workspace görünümünü kaydet
+                    </Button>
+                  </div>
+                </form>
+              </CardContent>
+            </Card>
+          )}
+
          {activeTab === "Profile & Account" && (
            <Card className="animate-in fade-in duration-300">
              <CardContent className="p-6 sm:p-8">
@@ -192,6 +462,75 @@ export default function SettingsPage() {
            </Card>
          )}

+          {activeTab === "Görünüm" && (
+            <Card className="animate-in fade-in duration-300">
+              <CardContent className="p-6 sm:p-8">
+                <div className="mb-6 space-y-1.5">
+                  <h2 className="text-xl font-bold text-foreground">Tema görünümü</h2>
+                  <p className="max-w-2xl text-sm text-muted-foreground">
+                    Neta arayüzünün açık, koyu veya cihazınızla uyumlu görünmesini seçin.
+                  </p>
+                </div>
+
+                <RadioGroup
+                  value={colorMode}
+                  onValueChange={handleColorModeChange}
+                  disabled={isSavingColorMode}
+                  aria-label="Tema görünümü"
+                  className="grid max-w-3xl gap-3 sm:grid-cols-3"
+                >
+                  {colorModeOptions.map((option) => {
+                    const Icon = option.icon;
+                    const selected = colorMode === option.value;
+
+                    return (
+                      <Label
+                        key={option.value}
+                        htmlFor={`color-mode-${option.value}`}
+                        className={`relative flex min-h-40 cursor-pointer flex-col justify-between gap-5 rounded-md border p-4 transition-[color,background-color,border-color,box-shadow] ${
+                          selected
+                            ? "border-primary bg-primary/5 ring-1 ring-primary"
+                            : "border-border bg-card hover:border-primary/50 hover:bg-muted/40"
+                        } ${isSavingColorMode ? "cursor-wait opacity-70" : ""}`}
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <span
+                            className={`flex h-10 w-10 items-center justify-center rounded-md border ${
+                              selected
+                                ? "border-primary/30 bg-primary/10 text-primary"
+                                : "border-border bg-muted text-muted-foreground"
+                            }`}
+                          >
+                            <Icon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                          <RadioGroupItem
+                            id={`color-mode-${option.value}`}
+                            value={option.value}
+                            aria-label={option.label}
+                          />
+                        </div>
+                        <span className="space-y-1">
+                          <span className="block text-sm font-semibold text-foreground">
+                            {option.label}
+                          </span>
+                          <span className="block text-xs font-normal leading-relaxed text-muted-foreground">
+                            {option.description}
+                          </span>
+                        </span>
+                      </Label>
+                    );
+                  })}
+                </RadioGroup>
+
+                <p className="mt-4 text-xs text-muted-foreground" aria-live="polite">
+                  {isSavingColorMode
+                    ? "Görünüm tercihi kaydediliyor…"
+                    : "Değişiklik tüm Neta sayfalarına anında uygulanır."}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
          {activeTab === "AI Preferences" && (
            <Card className="animate-in fade-in duration-300">
              <CardContent className="p-6 sm:p-8">
@@ -180,19 +180,13 @@ export function TasksClient({ tasks, clients, projects }: TasksClientProps) {
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <CheckCircle2 className="h-4 w-4" />
-            Günlük operasyon
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">
-              Görevler
-            </h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Proje ve müşteri bağlantılı işleri liste veya basit kanban ile takip et.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">
+            Görevler
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Proje ve müşteri bağlantılı işleri liste veya basit kanban ile takip et.
+          </p>
        </div>

        <TaskDialog mode="create" clients={clients} projects={projects} />
@@ -1,8 +1,13 @@
 import type { Metadata, Viewport } from "next";
 import type { CSSProperties } from "react";
+import { cookies } from "next/headers";
 import "./globals.css";
 import { Geist } from "next/font/google";
 import { cn } from "@/lib/utils";
+import {
+  COLOR_MODE_COOKIE,
+  isColorMode,
+} from "@/lib/color-mode";
 import { Toaster } from "poyraz-ui/molecules";
 import { getPublicBranding } from "@/server/branding/runtime";

@@ -12,7 +17,7 @@ const colorModeScript = `(() => {
  const media = window.matchMedia("(prefers-color-scheme: dark)");
  const apply = () => root.classList.toggle("dark", root.dataset.colorMode === "dark" || (root.dataset.colorMode === "system" && media.matches));
  apply();
-  if (root.dataset.colorMode === "system") media.addEventListener("change", apply);
+  media.addEventListener("change", apply);
 })();`;

 export function generateMetadata(): Metadata {
@@ -34,17 +39,22 @@ export function generateViewport(): Viewport {
  return { themeColor: getPublicBranding().primaryColor };
 }

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  const branding = getPublicBranding();
+  const cookieColorMode = (await cookies()).get(COLOR_MODE_COOKIE)?.value;
+  const colorMode = isColorMode(cookieColorMode)
+    ? cookieColorMode
+    : branding.defaultColorMode;
+
  return (
    <html
      lang="tr"
-      className={cn("font-sans", geist.variable, branding.defaultColorMode === "dark" && "dark")}
-      data-color-mode={branding.defaultColorMode}
+      className={cn("font-sans", geist.variable, colorMode === "dark" && "dark")}
+      data-color-mode={colorMode}
      style={branding.cssVariables as CSSProperties}
      suppressHydrationWarning
    >
@@ -1,5 +1,6 @@
 import { PortalShell } from "@/components/layout/portal-shell";
 import { getPublicBranding } from "@/server/branding/runtime";
+import { getUserPreferences } from "@/server/settings/preferences";
 import { requirePortalBackend } from "@/server/web/portal";

 export default async function PortalLayout({
@@ -10,6 +11,7 @@ export default async function PortalLayout({
  const { context, actor, service } = await requirePortalBackend();
  const { user, profile } = context;
  const branding = getPublicBranding();
+  const preferences = getUserPreferences(actor);
  const projects = service.listProjects(actor);
  const progress = projects.length
    ? Math.round(projects.reduce((sum, project) => sum + project.progress, 0) / projects.length)
@@ -33,6 +35,7 @@ export default async function PortalLayout({
        lightLogoUrl: branding.lightLogoUrl,
        darkLogoUrl: branding.darkLogoUrl,
      }}
+      colorMode={preferences.colorMode}
      user={{
        email: user.email,
        displayName,
@@ -1,5 +1,5 @@
 import { Card, CardContent, Badge } from "poyraz-ui/atoms";
-import { FolderKanban, CheckCircle2, Clock, Activity, BarChart, type LucideIcon } from "lucide-react";
+import { FolderKanban, CheckCircle2, Clock, BarChart, type LucideIcon } from "lucide-react";
 import Link from "next/link";
 import { format } from "date-fns";
 import { tr } from "date-fns/locale";
@@ -18,17 +18,11 @@ export default async function PortalDashboardPage() {
  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6">
      <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Activity className="h-4 w-4" />
-            Genel Bakış
-          </div>
-          <div>
-            <h1 className="text-3xl font-semibold tracking-normal text-foreground">Müşteri Paneli</h1>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Hoş geldiniz, {client.name}. Aktif projelerinizi ve ilerlemeleri buradan takip edin.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-3xl font-semibold tracking-normal text-foreground">Müşteri Paneli</h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Hoş geldiniz, {client.name}. Aktif projelerinizi ve ilerlemeleri buradan takip edin.
+          </p>
        </div>
      </div>