feat(ui): add workspace customization and simplify navigation
This commit is contained in:
poyrazavsever
@@ -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,11 +44,6 @@ 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
|
||||
@@ -58,7 +52,6 @@ export function AnalyticsClient({ data }: AnalyticsClientProps) {
|
||||
Müşteri bazlı gelirler, görev tamamlama oranları ve proje ilerleme grafikleri.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Select value={data.range} onValueChange={handleRangeChange}>
|
||||
|
||||
@@ -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,18 +89,12 @@ 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>
|
||||
|
||||
<CalendarEventDialog
|
||||
mode="create"
|
||||
|
||||
@@ -163,11 +163,6 @@ 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
|
||||
@@ -176,7 +171,6 @@ export function ClientsClient({
|
||||
Potansiyel müşterilerini pipeline üzerinden takip et ve müşteri ilişkilerini yönet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ClientDialog mode="create" />
|
||||
</div>
|
||||
|
||||
@@ -64,11 +64,6 @@ 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
|
||||
@@ -77,7 +72,6 @@ export function DashboardClient({ data }: DashboardClientProps) {
|
||||
İş performansını, gelirlerini ve günlük durumunu takip et.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Select value={data.range} onValueChange={handleRangeChange}>
|
||||
|
||||
@@ -115,11 +115,6 @@ 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
|
||||
@@ -128,7 +123,6 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
|
||||
Gelir, gider, ödeme durumu ve proje/müşteri bağlantılarını takip et.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<AIFinanceDialog />
|
||||
<FinanceDialog mode="create" clients={clients} projects={projects} />
|
||||
|
||||
@@ -77,11 +77,6 @@ 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
|
||||
@@ -90,7 +85,6 @@ export function JournalClient({ logs }: JournalClientProps) {
|
||||
Günlük ruh hali, enerji ve çalışma memnuniyetini takip ederek kişisel kapasite trendini gör.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<DailyLogDialog mode="create" />
|
||||
|
||||
@@ -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,11 +114,6 @@ 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
|
||||
@@ -127,7 +122,6 @@ export function ProjectsClient({ projects, clients }: ProjectsClientProps) {
|
||||
Müşteri işleri ve kişisel side projectleri aynı yerde takip et.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<AIProjectRiskDialog />
|
||||
|
||||
@@ -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,23 +161,84 @@ 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.
|
||||
Workspace markanızı, profilinizi, görünümü ve sistem tercihlerinizi yönetin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0 pb-12">
|
||||
{/* Settings Sidebar */}
|
||||
@@ -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,11 +180,6 @@ 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
|
||||
@@ -193,7 +188,6 @@ export function TasksClient({ tasks, clients, projects }: TasksClientProps) {
|
||||
Proje ve müşteri bağlantılı işleri liste veya basit kanban ile takip et.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TaskDialog mode="create" clients={clients} projects={projects} />
|
||||
</div>
|
||||
|
||||
+14
-4
@@ -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
-7
@@ -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,11 +18,6 @@ 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">
|
||||
@@ -30,7 +25,6 @@ export default async function PortalDashboardPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<StatCard label="Aktif Projeler" value={String(activeProjects.length)} icon={FolderKanban} tone="blue" />
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { signOut } from "@/app/login/actions";
|
||||
import { ColorModeSync } from "@/components/theme/color-mode-sync";
|
||||
import type { ColorMode } from "@/lib/color-mode";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -10,6 +12,7 @@ import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
Tooltip,
|
||||
@@ -18,7 +21,6 @@ import {
|
||||
TooltipTrigger,
|
||||
} from "poyraz-ui/molecules";
|
||||
import {
|
||||
SidebarBranding,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
@@ -28,7 +30,6 @@ import {
|
||||
SidebarMenuItem,
|
||||
SidebarPanel,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarTrigger,
|
||||
SidebarUserProfile,
|
||||
useSidebar,
|
||||
@@ -72,6 +73,7 @@ type AppShellProps = {
|
||||
settingsHref: string;
|
||||
user: ShellUser;
|
||||
progress?: number;
|
||||
colorMode?: ColorMode;
|
||||
};
|
||||
|
||||
export function AppShell({
|
||||
@@ -82,12 +84,14 @@ export function AppShell({
|
||||
settingsHref,
|
||||
user,
|
||||
progress,
|
||||
colorMode,
|
||||
}: AppShellProps) {
|
||||
const pathname = usePathname();
|
||||
const sidebarProps = { branding, homeHref, navGroups, pathname, progress, settingsHref, user };
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
{colorMode ? <ColorModeSync colorMode={colorMode} /> : null}
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<a
|
||||
href="#main-content"
|
||||
@@ -123,10 +127,9 @@ type SidebarCompositionProps = {
|
||||
|
||||
function DesktopSidebar(props: SidebarCompositionProps) {
|
||||
return (
|
||||
<SidebarProvider variant="collapsible">
|
||||
<SidebarProvider variant="default">
|
||||
<SidebarPanel className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex">
|
||||
<SidebarComposition {...props} />
|
||||
<SidebarRail aria-label="Kenar çubuğunu daralt veya genişlet" />
|
||||
</SidebarPanel>
|
||||
</SidebarProvider>
|
||||
);
|
||||
@@ -136,8 +139,12 @@ function MobileSidebar(props: SidebarCompositionProps) {
|
||||
return (
|
||||
<SidebarProvider variant="floating">
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-surface/95 px-4 backdrop-blur lg:hidden">
|
||||
<Link href={props.homeHref} className="min-w-0">
|
||||
<MobileBrand branding={props.branding} />
|
||||
<Link
|
||||
href={props.homeHref}
|
||||
className="flex min-w-0 max-w-40 items-center"
|
||||
aria-label={`${props.branding.applicationName} ana sayfa`}
|
||||
>
|
||||
<WorkspaceLogo branding={props.branding} compact />
|
||||
</Link>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
@@ -165,23 +172,14 @@ function SidebarComposition({
|
||||
}: SidebarCompositionProps) {
|
||||
return (
|
||||
<>
|
||||
<SidebarHeader>
|
||||
<Link href={homeHref} className="min-w-0 flex-1" aria-label={`${branding.applicationName} ana sayfa`}>
|
||||
<SidebarBranding
|
||||
logo={<BrandMark branding={branding} />}
|
||||
title={branding.applicationName}
|
||||
subtitle={branding.organizationName ?? "Freelancer portalı"}
|
||||
/>
|
||||
<SidebarHeader className="justify-center px-4 py-3">
|
||||
<Link
|
||||
href={homeHref}
|
||||
className="flex min-h-12 w-full items-center justify-center"
|
||||
aria-label={`${branding.applicationName} ana sayfa`}
|
||||
>
|
||||
<WorkspaceLogo branding={branding} />
|
||||
</Link>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SidebarTrigger
|
||||
className="hidden lg:inline-flex"
|
||||
aria-label="Kenar çubuğunu daralt veya genişlet"
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Kenar çubuğunu daralt</TooltipContent>
|
||||
</Tooltip>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent scrollMode="fade">
|
||||
@@ -239,54 +237,41 @@ function SidebarNavigation({
|
||||
));
|
||||
}
|
||||
|
||||
function BrandMark({ branding }: { branding: AppShellBranding }) {
|
||||
const logoUrl = branding.lightLogoUrl ?? branding.darkLogoUrl;
|
||||
|
||||
if (!logoUrl) {
|
||||
return (
|
||||
<span className="flex h-full w-full items-center justify-center text-sm font-bold text-primary">
|
||||
{branding.applicationName.slice(0, 1).toLocaleUpperCase("tr-TR")}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
function WorkspaceLogo({
|
||||
branding,
|
||||
compact = false,
|
||||
}: {
|
||||
branding: AppShellBranding;
|
||||
compact?: boolean;
|
||||
}) {
|
||||
const lightLogoUrl = branding.lightLogoUrl ?? branding.darkLogoUrl ?? "/logo/blackLogoLong.png";
|
||||
const darkLogoUrl = branding.darkLogoUrl ?? branding.lightLogoUrl ?? "/logo/lightLogoLong.png";
|
||||
const imageClassName = compact
|
||||
? "max-h-8 w-auto max-w-full object-contain"
|
||||
: "max-h-12 w-auto max-w-full object-contain";
|
||||
|
||||
return (
|
||||
<span className="flex h-full w-full items-center justify-center">
|
||||
<span className="flex h-full w-full items-center justify-center overflow-hidden">
|
||||
<Image
|
||||
src={logoUrl}
|
||||
alt=""
|
||||
width={32}
|
||||
height={32}
|
||||
src={lightLogoUrl}
|
||||
alt={`${branding.applicationName} logosu`}
|
||||
width={180}
|
||||
height={56}
|
||||
unoptimized
|
||||
className={branding.darkLogoUrl ? "h-full w-full object-contain dark:hidden" : "h-full w-full object-contain"}
|
||||
className={`${imageClassName} dark:hidden`}
|
||||
/>
|
||||
{branding.darkLogoUrl ? (
|
||||
<Image
|
||||
src={branding.darkLogoUrl}
|
||||
alt=""
|
||||
width={32}
|
||||
height={32}
|
||||
src={darkLogoUrl}
|
||||
alt={`${branding.applicationName} logosu`}
|
||||
width={180}
|
||||
height={56}
|
||||
unoptimized
|
||||
className="hidden h-full w-full object-contain dark:block"
|
||||
className={`hidden ${imageClassName} dark:block`}
|
||||
/>
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileBrand({ branding }: { branding: AppShellBranding }) {
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-muted">
|
||||
<BrandMark branding={branding} />
|
||||
</span>
|
||||
<Typography component="span" variant="small" className="truncate font-semibold">
|
||||
{branding.applicationName}
|
||||
</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressSummary({ progress }: { progress: number }) {
|
||||
const normalizedProgress = Math.max(0, Math.min(100, progress));
|
||||
|
||||
@@ -325,8 +310,8 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Hesap menüsünü aç"
|
||||
className="flex w-full items-center gap-2 rounded-sm p-1 text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
aria-label={`${user.displayName} için hesap menüsünü aç`}
|
||||
className="group flex w-full items-center gap-2 rounded-md border border-transparent p-1.5 text-left outline-none transition-[color,background-color,border-color] hover:border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-focus-ring data-[state=open]:border-border data-[state=open]:bg-accent"
|
||||
>
|
||||
<SidebarUserProfile
|
||||
className="min-w-0 flex-1"
|
||||
@@ -335,22 +320,44 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
|
||||
avatarUrl={user.avatarUrl ?? undefined}
|
||||
initials={user.shortName}
|
||||
/>
|
||||
<ChevronUp className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
|
||||
<ChevronUp
|
||||
className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" side="top" className="min-w-52">
|
||||
<DropdownMenuItem asChild media={<Settings className="h-4 w-4" aria-hidden="true" />}>
|
||||
<Link href={settingsHref}>Ayarlar</Link>
|
||||
<DropdownMenuContent
|
||||
align="start"
|
||||
side="top"
|
||||
sideOffset={8}
|
||||
collisionPadding={12}
|
||||
surface="solid"
|
||||
radius="md"
|
||||
itemRadius="sm"
|
||||
className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-56"
|
||||
>
|
||||
<DropdownMenuLabel className="space-y-0.5 px-2.5 py-2">
|
||||
<span className="block truncate text-sm font-semibold text-foreground">
|
||||
{user.displayName}
|
||||
</span>
|
||||
<span className="block truncate font-normal text-muted-foreground">{user.email}</span>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={settingsHref} className="gap-2">
|
||||
<Settings className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
|
||||
<span>Ayarlar</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<form action={signOut}>
|
||||
<DropdownMenuItem
|
||||
asChild
|
||||
media={<LogOut className="h-4 w-4" aria-hidden="true" />}
|
||||
className="text-destructive"
|
||||
className="text-destructive focus:text-destructive data-[highlighted]:text-destructive"
|
||||
>
|
||||
<button type="submit" className="w-full">
|
||||
Çıkış yap
|
||||
<button type="submit" className="w-full gap-2 text-left">
|
||||
<LogOut className="h-4 w-4 shrink-0" aria-hidden="true" />
|
||||
<span>Çıkış yap</span>
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</form>
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
|
||||
import { AppShell, type AppShellBranding } from "@/components/layout/app-shell";
|
||||
import { sidebarData } from "@/config/sidebar";
|
||||
import type { ColorMode } from "@/lib/color-mode";
|
||||
|
||||
type DashboardShellProps = {
|
||||
branding: AppShellBranding;
|
||||
children: React.ReactNode;
|
||||
colorMode: ColorMode;
|
||||
user: {
|
||||
email: string;
|
||||
displayName: string;
|
||||
@@ -14,9 +16,16 @@ type DashboardShellProps = {
|
||||
};
|
||||
};
|
||||
|
||||
export function DashboardShell({ branding, children, user }: DashboardShellProps) {
|
||||
export function DashboardShell({ branding, children, colorMode, user }: DashboardShellProps) {
|
||||
return (
|
||||
<AppShell branding={branding} homeHref="/" navGroups={sidebarData} settingsHref="/settings" user={user}>
|
||||
<AppShell
|
||||
branding={branding}
|
||||
colorMode={colorMode}
|
||||
homeHref="/"
|
||||
navGroups={sidebarData}
|
||||
settingsHref="/settings"
|
||||
user={user}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
);
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
|
||||
import { AppShell, type AppShellBranding } from "@/components/layout/app-shell";
|
||||
import { portalSidebarData } from "@/config/portal-sidebar";
|
||||
import type { ColorMode } from "@/lib/color-mode";
|
||||
|
||||
type PortalShellProps = {
|
||||
branding: AppShellBranding;
|
||||
children: React.ReactNode;
|
||||
colorMode: ColorMode;
|
||||
user: {
|
||||
email: string;
|
||||
displayName: string;
|
||||
@@ -15,10 +17,11 @@ type PortalShellProps = {
|
||||
progress?: number;
|
||||
};
|
||||
|
||||
export function PortalShell({ branding, children, user, progress }: PortalShellProps) {
|
||||
export function PortalShell({ branding, children, colorMode, user, progress }: PortalShellProps) {
|
||||
return (
|
||||
<AppShell
|
||||
branding={branding}
|
||||
colorMode={colorMode}
|
||||
homeHref="/portal"
|
||||
navGroups={portalSidebarData}
|
||||
settingsHref="/portal/settings"
|
||||
|
||||
@@ -4,7 +4,6 @@ import type { ReactNode } from "react";
|
||||
type PageHeaderProps = {
|
||||
title: string;
|
||||
description?: string;
|
||||
eyebrow?: string;
|
||||
primaryAction?: ReactNode;
|
||||
secondaryActions?: ReactNode;
|
||||
};
|
||||
@@ -12,18 +11,12 @@ type PageHeaderProps = {
|
||||
export function PageHeader({
|
||||
title,
|
||||
description,
|
||||
eyebrow,
|
||||
primaryAction,
|
||||
secondaryActions,
|
||||
}: PageHeaderProps) {
|
||||
return (
|
||||
<header className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="min-w-0 space-y-1.5">
|
||||
{eyebrow ? (
|
||||
<Typography component="p" variant="caption" className="font-semibold uppercase tracking-wider text-primary">
|
||||
{eyebrow}
|
||||
</Typography>
|
||||
) : null}
|
||||
<Typography component="h1" variant="h1" balance>
|
||||
{title}
|
||||
</Typography>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
COLOR_MODE_COOKIE,
|
||||
COLOR_MODE_COOKIE_MAX_AGE,
|
||||
type ColorMode,
|
||||
} from "@/lib/color-mode";
|
||||
|
||||
export function ColorModeSync({ colorMode }: { colorMode: ColorMode }) {
|
||||
useEffect(() => {
|
||||
applyColorMode(colorMode);
|
||||
}, [colorMode]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function applyColorMode(colorMode: ColorMode): void {
|
||||
const root = document.documentElement;
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
|
||||
root.dataset.colorMode = colorMode;
|
||||
root.classList.toggle("dark", colorMode === "dark" || (colorMode === "system" && prefersDark));
|
||||
|
||||
const secure = window.location.protocol === "https:" ? "; Secure" : "";
|
||||
document.cookie = `${COLOR_MODE_COOKIE}=${colorMode}; Path=/; Max-Age=${COLOR_MODE_COOKIE_MAX_AGE}; SameSite=Lax${secure}`;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export const colorModes = ["light", "dark", "system"] as const;
|
||||
|
||||
export type ColorMode = (typeof colorModes)[number];
|
||||
|
||||
export const COLOR_MODE_COOKIE = "neta-color-mode";
|
||||
export const COLOR_MODE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
|
||||
|
||||
export function isColorMode(value: unknown): value is ColorMode {
|
||||
return typeof value === "string" && colorModes.includes(value as ColorMode);
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import Database from "better-sqlite3";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { drizzle } from "drizzle-orm/better-sqlite3";
|
||||
import * as schema from "../server/db/schema";
|
||||
import { BrandingService, contrastRatio } from "../server/branding/service";
|
||||
import { BrandingService, contrastRatio, deriveAccentColor } from "../server/branding/service";
|
||||
import type { DomainActor } from "../server/domain/actor";
|
||||
import { DomainError } from "../server/domain/errors";
|
||||
import { resolveStoragePath } from "../server/files/paths";
|
||||
@@ -76,7 +76,6 @@ try {
|
||||
applicationName: "Studio Portal",
|
||||
shortName: "Studio",
|
||||
primaryColor: "#336699",
|
||||
accentColor: "#f0cc22",
|
||||
lightLogoFileId: logo.id,
|
||||
iconFileId: icon.id,
|
||||
defaultColorMode: "dark",
|
||||
@@ -84,6 +83,7 @@ try {
|
||||
});
|
||||
assert.equal(branding.applicationName, "Studio Portal");
|
||||
assert.equal(branding.primaryColor, "#336699");
|
||||
assert.equal(branding.accentColor, deriveAccentColor("#336699"), "Accent palette must derive from the single primary color");
|
||||
assert.equal(branding.darkLogoUrl, branding.lightLogoUrl, "Missing dark logo must fall back to light logo");
|
||||
assert.equal(fileService.readPublicBranding(logo.id).metadata.id, logo.id);
|
||||
assert.ok(contrastRatio(branding.primaryColor, branding.cssVariables["--poyraz-primary-foreground"]) >= 4.5);
|
||||
|
||||
@@ -6,6 +6,11 @@ const repoRoot = process.cwd();
|
||||
const packageJson = JSON.parse(fs.readFileSync(path.join(repoRoot, "package.json"), "utf8"));
|
||||
const globalsCss = fs.readFileSync(path.join(repoRoot, "app/globals.css"), "utf8");
|
||||
const appShell = fs.readFileSync(path.join(repoRoot, "components/layout/app-shell.tsx"), "utf8");
|
||||
const rootLayout = fs.readFileSync(path.join(repoRoot, "app/layout.tsx"), "utf8");
|
||||
const settingsPage = fs.readFileSync(
|
||||
path.join(repoRoot, "app/(dashboard)/settings/page.tsx"),
|
||||
"utf8",
|
||||
);
|
||||
|
||||
assert.match(packageJson.dependencies["poyraz-ui"] ?? "", /^\^?3\./, "poyraz-ui must use major v3");
|
||||
assert.match(
|
||||
@@ -22,7 +27,6 @@ for (const component of [
|
||||
"SidebarProvider",
|
||||
"SidebarPanel",
|
||||
"SidebarHeader",
|
||||
"SidebarBranding",
|
||||
"SidebarContent",
|
||||
"SidebarMenu",
|
||||
"SidebarMenuItem",
|
||||
@@ -33,6 +37,58 @@ for (const component of [
|
||||
assert.ok(appShell.includes(component), `App shell must compose the Poyraz ${component} organism`);
|
||||
}
|
||||
|
||||
assert.ok(appShell.includes("WorkspaceLogo"), "Sidebar header must render the workspace logo");
|
||||
assert.ok(
|
||||
appShell.includes('<SidebarProvider variant="default">'),
|
||||
"Desktop sidebar must use the fixed-width Poyraz default variant",
|
||||
);
|
||||
assert.ok(
|
||||
!appShell.includes('<SidebarProvider variant="collapsible">'),
|
||||
"Desktop sidebar must not be collapsible",
|
||||
);
|
||||
assert.ok(!appShell.includes("SidebarRail"), "Desktop sidebar must not expose a collapse rail");
|
||||
|
||||
assert.doesNotMatch(
|
||||
appShell,
|
||||
/<DropdownMenuItem(?=[^>]*\basChild\b)(?=[^>]*\bmedia=)[^>]*>/s,
|
||||
"Poyraz DropdownMenuItem must not combine asChild with rich media because Radix cannot inject accessibility props into the generated Fragment",
|
||||
);
|
||||
assert.doesNotMatch(
|
||||
appShell,
|
||||
/<DropdownMenuItem[^>]*\binteractiveMotion=/s,
|
||||
"Poyraz UI 3.0.2 leaks DropdownMenuItem interactiveMotion to the DOM",
|
||||
);
|
||||
|
||||
assert.match(settingsPage, /\bRadioGroup\b/, "Settings must use the Poyraz RadioGroup for theme selection");
|
||||
for (const workspaceControl of [
|
||||
'name="workspaceName"',
|
||||
'name="logo"',
|
||||
'name="primaryColor"',
|
||||
]) {
|
||||
assert.ok(
|
||||
settingsPage.includes(workspaceControl),
|
||||
`Settings must expose workspace branding control ${workspaceControl}`,
|
||||
);
|
||||
}
|
||||
for (const colorMode of ["light", "dark", "system"]) {
|
||||
assert.ok(
|
||||
settingsPage.includes(`value: "${colorMode}"`),
|
||||
`Settings must expose the ${colorMode} color mode`,
|
||||
);
|
||||
}
|
||||
assert.ok(
|
||||
rootLayout.includes("COLOR_MODE_COOKIE"),
|
||||
"Root layout must resolve the persisted color mode before rendering",
|
||||
);
|
||||
assert.ok(
|
||||
appShell.includes("ColorModeSync"),
|
||||
"Authenticated shells must synchronize the database-backed color mode",
|
||||
);
|
||||
assert.ok(
|
||||
fs.existsSync(path.join(repoRoot, "server/settings/preferences.ts")),
|
||||
"Missing database-backed user preferences service",
|
||||
);
|
||||
|
||||
const requiredSystemCompositions = [
|
||||
"components/system/page-header.tsx",
|
||||
"components/system/feedback-state.tsx",
|
||||
|
||||
@@ -128,15 +128,20 @@ export class BrandingService {
|
||||
throw new DomainError("FORBIDDEN", "Instance marka ayarları başka bir owner'a ait.");
|
||||
}
|
||||
|
||||
const update = { ...parsed.data };
|
||||
if (parsed.data.primaryColor && parsed.data.accentColor === undefined) {
|
||||
update.accentColor = deriveAccentColor(parsed.data.primaryColor);
|
||||
}
|
||||
|
||||
if (existing) {
|
||||
this.repository.update({ ...parsed.data, updatedByUserId: scope.ownerUserId });
|
||||
this.repository.update({ ...update, updatedByUserId: scope.ownerUserId });
|
||||
} else {
|
||||
this.repository.create({
|
||||
id: "default",
|
||||
ownerUserId: scope.ownerUserId,
|
||||
updatedByUserId: scope.ownerUserId,
|
||||
...DEFAULT_BRANDING,
|
||||
...parsed.data,
|
||||
...update,
|
||||
});
|
||||
}
|
||||
return this.getPublic();
|
||||
@@ -202,6 +207,10 @@ export function contrastRatio(first: string, second: string): number {
|
||||
return (Math.max(firstLuminance, secondLuminance) + 0.05) / (Math.min(firstLuminance, secondLuminance) + 0.05);
|
||||
}
|
||||
|
||||
export function deriveAccentColor(primary: string): string {
|
||||
return mixHex(primary, "#FFFFFF", 0.88);
|
||||
}
|
||||
|
||||
function readableForeground(background: string): "#000000" | "#FFFFFF" {
|
||||
return contrastRatio(background, "#000000") >= contrastRatio(background, "#FFFFFF")
|
||||
? "#000000"
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import "server-only";
|
||||
|
||||
import { eq } from "drizzle-orm";
|
||||
import { z } from "zod";
|
||||
import type { ColorMode } from "@/lib/color-mode";
|
||||
import { getSqliteConnection } from "@/server/db/client";
|
||||
import { userPreferences } from "@/server/db/schema";
|
||||
import { assertEnabledActor, type DomainActor } from "@/server/domain/actor";
|
||||
import { DomainError } from "@/server/domain/errors";
|
||||
|
||||
const colorModeInputSchema = z.object({
|
||||
colorMode: z.enum(["light", "dark", "system"]),
|
||||
});
|
||||
|
||||
export type PublicUserPreferences = {
|
||||
colorMode: ColorMode;
|
||||
};
|
||||
|
||||
export function getUserPreferences(actor: DomainActor): PublicUserPreferences {
|
||||
assertEnabledActor(actor);
|
||||
|
||||
const row = getSqliteConnection().db
|
||||
.select({ colorMode: userPreferences.colorMode })
|
||||
.from(userPreferences)
|
||||
.where(eq(userPreferences.ownerUserId, actor.authUserId))
|
||||
.get();
|
||||
|
||||
return {
|
||||
colorMode: (row?.colorMode as ColorMode | undefined) ?? "system",
|
||||
};
|
||||
}
|
||||
|
||||
export function updateColorModePreference(
|
||||
actor: DomainActor,
|
||||
input: unknown,
|
||||
): PublicUserPreferences {
|
||||
assertEnabledActor(actor);
|
||||
|
||||
const parsed = colorModeInputSchema.safeParse(input);
|
||||
if (!parsed.success) {
|
||||
throw new DomainError("VALIDATION_ERROR", "Renk modu tercihi geçersiz.");
|
||||
}
|
||||
|
||||
const { db } = getSqliteConnection();
|
||||
db.insert(userPreferences)
|
||||
.values({
|
||||
ownerUserId: actor.authUserId,
|
||||
colorMode: parsed.data.colorMode,
|
||||
})
|
||||
.onConflictDoUpdate({
|
||||
target: userPreferences.ownerUserId,
|
||||
set: {
|
||||
colorMode: parsed.data.colorMode,
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
})
|
||||
.run();
|
||||
|
||||
return { colorMode: parsed.data.colorMode };
|
||||
}
|
||||
Reference in New Issue
Block a user