feat: implement Business OS modules for proposals, invoices, and subscriptions with database schema and UI components
This commit is contained in:
poyrazavsever
+133
-119
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
|
||||
import { User, Bell, Shield, Blocks, Brain, CreditCard, Save, Key, AlertTriangle } from "lucide-react";
|
||||
import { updatePassword, updateProfile } from "./actions";
|
||||
import { createClient } from "@/lib/supabase/client";
|
||||
import { Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
|
||||
|
||||
type AiProvider = "groq" | "ollama" | "openai" | "gemini";
|
||||
|
||||
@@ -131,16 +132,24 @@ export default function SettingsPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-7xl animate-in fade-in slide-in-from-bottom-4 duration-500 h-[calc(100vh-80px)] flex flex-col text-foreground font-sans space-y-6">
|
||||
|
||||
<div className="flex items-center justify-between pb-4 border-b border-white/5 mt-4 shrink-0">
|
||||
<h1 className="text-lg font-medium text-muted-foreground">
|
||||
<span className="text-foreground">Settings</span> / {activeTab}
|
||||
</h1>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0">
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0 pb-12">
|
||||
{/* Settings Sidebar */}
|
||||
<div className="w-full md:w-64 flex flex-col gap-1 shrink-0">
|
||||
{tabs.map((tab) => {
|
||||
@@ -149,13 +158,13 @@ export default function SettingsPage() {
|
||||
<button
|
||||
key={tab.name}
|
||||
onClick={() => setActiveTab(tab.name)}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-sm text-sm font-medium transition-colors text-left ${
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-md text-sm font-medium transition-colors text-left ${
|
||||
activeTab === tab.name
|
||||
? "bg-[#1F172B] text-primary border border-primary/20 shadow-inner"
|
||||
: "text-muted-foreground hover:bg-white/5 hover:text-foreground border border-transparent"
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className={`h-4 w-4 ${activeTab === tab.name ? "text-primary" : "text-muted-foreground"}`} />
|
||||
<Icon className="h-4 w-4" />
|
||||
{tab.name}
|
||||
</button>
|
||||
)
|
||||
@@ -163,132 +172,137 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
|
||||
{/* Settings Content Area */}
|
||||
<div className="flex-1 rounded-sm border border-white/5 bg-[#0A0710] p-8 overflow-y-auto tiny-scrollbar">
|
||||
|
||||
<div className="flex-1">
|
||||
{activeTab === "Profile & Account" && (
|
||||
<div className="max-w-2xl animate-in fade-in duration-300">
|
||||
<h2 className="text-xl font-bold mb-6">User Profile</h2>
|
||||
<form action={handleProfileAction} className="space-y-6">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
{avatarUrl ? (
|
||||
<img src={avatarUrl} alt="Avatar" className="h-16 w-16 rounded-full border border-white/10 object-cover" />
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full border border-white/10 bg-[#150F1D]">
|
||||
<User className="h-8 w-8 text-muted-foreground" />
|
||||
<Card className="animate-in fade-in duration-300">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<h2 className="text-xl font-bold mb-6 text-foreground">Kullanıcı Profili</h2>
|
||||
<form action={handleProfileAction} className="space-y-6 max-w-xl">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
{avatarUrl ? (
|
||||
<img src={avatarUrl} alt="Avatar" className="h-16 w-16 rounded-full border border-border object-cover" />
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full border border-border bg-muted/50">
|
||||
<User className="h-8 w-8 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 space-y-2">
|
||||
<Label htmlFor="avatar">Profil Fotoğrafı</Label>
|
||||
<Input id="avatar" name="avatar" type="file" accept="image/*" className="cursor-pointer" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 space-y-1">
|
||||
<label className="text-sm font-medium">Profil Fotoğrafı</label>
|
||||
<input id="avatar" name="avatar" type="file" accept="image/*" className="block w-full text-xs text-muted-foreground file:mr-4 file:py-1.5 file:px-3 file:rounded-sm file:border-0 file:text-xs file:font-semibold file:bg-primary/20 file:text-primary hover:file:bg-primary/30 transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Ad</label>
|
||||
<input name="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full bg-[#150F1D] border border-white/10 rounded-sm px-3 py-2 text-sm outline-none focus:border-primary/50 transition-colors" />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">Ad</Label>
|
||||
<Input id="firstName" name="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">Soyad</Label>
|
||||
<Input id="lastName" name="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Soyad</label>
|
||||
<input name="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full bg-[#150F1D] border border-white/10 rounded-sm px-3 py-2 text-sm outline-none focus:border-primary/50 transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6">
|
||||
<button type="submit" className="bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<Save className="h-4 w-4" /> Profili Kaydet
|
||||
</button>
|
||||
{profileSaveStatus && <span className="text-sm text-emerald-400">{profileSaveStatus}</span>}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 pt-4">
|
||||
<Button type="submit" className="gap-2">
|
||||
<Save className="h-4 w-4" /> Profili Kaydet
|
||||
</Button>
|
||||
{profileSaveStatus && <span className="text-sm font-medium text-emerald-500">{profileSaveStatus}</span>}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === "Security" && (
|
||||
<div className="max-w-2xl animate-in fade-in duration-300">
|
||||
<h2 className="text-xl font-bold mb-6">Şifre İşlemleri</h2>
|
||||
<form ref={formRef} action={handlePasswordAction} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Yeni Şifre</label>
|
||||
<input name="password" type="password" minLength={6} placeholder="En az 6 karakter" required className="w-full bg-[#150F1D] border border-white/10 rounded-sm px-3 py-2 text-sm outline-none focus:border-primary/50 transition-colors" />
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button type="submit" className="bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<Save className="h-4 w-4" /> Şifreyi Güncelle
|
||||
</button>
|
||||
{passwordSaveStatus && <span className="text-sm text-emerald-400">{passwordSaveStatus}</span>}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<Card className="animate-in fade-in duration-300">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<h2 className="text-xl font-bold mb-6 text-foreground">Şifre İşlemleri</h2>
|
||||
<form ref={formRef} action={handlePasswordAction} className="space-y-6 max-w-xl">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Yeni Şifre</Label>
|
||||
<Input id="password" name="password" type="password" minLength={6} placeholder="En az 6 karakter" required />
|
||||
</div>
|
||||
<div className="flex items-center gap-4 pt-4">
|
||||
<Button type="submit" className="gap-2">
|
||||
<Save className="h-4 w-4" /> Şifreyi Güncelle
|
||||
</Button>
|
||||
{passwordSaveStatus && <span className="text-sm font-medium text-emerald-500">{passwordSaveStatus}</span>}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === "AI Preferences" && (
|
||||
<div className="max-w-2xl animate-in fade-in duration-300">
|
||||
<h2 className="text-xl font-bold mb-6">AI Assistant Configuration</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-3 border-b border-white/5 pb-2">Model ve Sağlayıcı Seçimi</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<label onClick={() => setAiProvider("gemini")} className={`flex flex-col p-4 rounded-sm cursor-pointer relative overflow-hidden transition-colors ${aiProvider === "gemini" ? "border border-primary bg-primary/10" : "border border-white/10 bg-[#150F1D] opacity-60 hover:opacity-100"}`}>
|
||||
{aiProvider === "gemini" && <div className="absolute top-0 right-0 p-2"><div className="w-2 h-2 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-bold text-sm mb-1">Google Gemini</span>
|
||||
<span className="text-[11px] text-muted-foreground leading-tight">Gelişmiş akıl yürütme. (Varsayılan)</span>
|
||||
</label>
|
||||
<label onClick={() => setAiProvider("openai")} className={`flex flex-col p-4 rounded-sm cursor-pointer relative overflow-hidden transition-colors ${aiProvider === "openai" ? "border border-primary bg-primary/10" : "border border-white/10 bg-[#150F1D] opacity-60 hover:opacity-100"}`}>
|
||||
{aiProvider === "openai" && <div className="absolute top-0 right-0 p-2"><div className="w-2 h-2 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-bold text-sm mb-1">OpenAI (GPT)</span>
|
||||
<span className="text-[11px] text-muted-foreground leading-tight">GPT-4o veya GPT-4.</span>
|
||||
</label>
|
||||
<label onClick={() => setAiProvider("groq")} className={`flex flex-col p-4 rounded-sm cursor-pointer relative overflow-hidden transition-colors ${aiProvider === "groq" ? "border border-primary bg-primary/10" : "border border-white/10 bg-[#150F1D] opacity-60 hover:opacity-100"}`}>
|
||||
{aiProvider === "groq" && <div className="absolute top-0 right-0 p-2"><div className="w-2 h-2 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-bold text-sm mb-1">Groq (Llama 3)</span>
|
||||
<span className="text-[11px] text-muted-foreground leading-tight">Yüksek hızlı bulut çıkarımı.</span>
|
||||
</label>
|
||||
<label onClick={() => setAiProvider("ollama")} className={`flex flex-col p-4 rounded-sm cursor-pointer relative overflow-hidden transition-colors ${aiProvider === "ollama" ? "border border-primary bg-primary/10" : "border border-white/10 bg-[#150F1D] opacity-60 hover:opacity-100"}`}>
|
||||
{aiProvider === "ollama" && <div className="absolute top-0 right-0 p-2"><div className="w-2 h-2 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-bold text-sm mb-1">Ollama (Yerel)</span>
|
||||
<span className="text-[11px] text-muted-foreground leading-tight">Gizlilik odaklı yerel modeller.</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{aiProvider !== "ollama" && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-3 border-b border-white/5 pb-2">API Keys</h3>
|
||||
<div className="bg-[#150F1D] border border-white/5 rounded-sm p-4 flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Key className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">{aiProvider.toUpperCase()} API Key</span>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
placeholder="sk-..."
|
||||
className="bg-[#0A0710] border border-white/10 rounded-sm px-3 py-2 text-sm text-foreground w-full outline-none focus:border-primary/50"
|
||||
/>
|
||||
<Card className="animate-in fade-in duration-300">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<h2 className="text-xl font-bold mb-6 text-foreground">AI Asistan Konfigürasyonu</h2>
|
||||
|
||||
<div className="space-y-8 max-w-2xl">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-semibold border-b border-border pb-2">Model ve Sağlayıcı Seçimi</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<label onClick={() => setAiProvider("gemini")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "gemini" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||||
{aiProvider === "gemini" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-semibold text-foreground mb-1">Google Gemini</span>
|
||||
<span className="text-xs text-muted-foreground leading-relaxed">Gelişmiş akıl yürütme. (Varsayılan)</span>
|
||||
</label>
|
||||
<label onClick={() => setAiProvider("openai")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "openai" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||||
{aiProvider === "openai" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-semibold text-foreground mb-1">OpenAI (GPT)</span>
|
||||
<span className="text-xs text-muted-foreground leading-relaxed">GPT-4o veya GPT-4.</span>
|
||||
</label>
|
||||
<label onClick={() => setAiProvider("groq")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "groq" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||||
{aiProvider === "groq" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-semibold text-foreground mb-1">Groq (Llama 3)</span>
|
||||
<span className="text-xs text-muted-foreground leading-relaxed">Yüksek hızlı bulut çıkarımı.</span>
|
||||
</label>
|
||||
<label onClick={() => setAiProvider("ollama")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "ollama" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||||
{aiProvider === "ollama" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||||
<span className="font-semibold text-foreground mb-1">Ollama (Yerel)</span>
|
||||
<span className="text-xs text-muted-foreground leading-relaxed">Gizlilik odaklı yerel modeller.</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={handleSaveAI} className="bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<Save className="h-4 w-4" /> Ayarları Kaydet
|
||||
</button>
|
||||
{aiSaveStatus && <span className="text-sm text-emerald-400">{aiSaveStatus}</span>}
|
||||
{aiProvider !== "ollama" && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-semibold border-b border-border pb-2">API Keys</h3>
|
||||
<div className="bg-muted/30 border border-border rounded-xl p-5 flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Key className="h-4 w-4 text-muted-foreground" />
|
||||
<Label className="text-sm font-medium">{aiProvider.toUpperCase()} API Key</Label>
|
||||
</div>
|
||||
<Input
|
||||
type="password"
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
placeholder="sk-..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 pt-4">
|
||||
<Button onClick={handleSaveAI} className="gap-2">
|
||||
<Save className="h-4 w-4" /> Ayarları Kaydet
|
||||
</Button>
|
||||
{aiSaveStatus && <span className="text-sm font-medium text-emerald-500">{aiSaveStatus}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{["Integrations", "Notifications", "Billing & Plans"].includes(activeTab) && (
|
||||
<div className="max-w-2xl animate-in fade-in duration-300 flex flex-col items-center justify-center h-full opacity-50 py-20">
|
||||
<Blocks className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h2 className="text-lg font-bold mb-2">{activeTab}</h2>
|
||||
<p className="text-sm text-center text-muted-foreground">Bu bölüm şu an geliştirme aşamasındadır.</p>
|
||||
</div>
|
||||
<Card className="animate-in fade-in duration-300">
|
||||
<CardContent className="flex flex-col items-center justify-center h-[400px] opacity-60">
|
||||
<Blocks className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h2 className="text-lg font-bold mb-2 text-foreground">{activeTab}</h2>
|
||||
<p className="text-sm text-center text-muted-foreground">Bu bölüm şu an geliştirme aşamasındadır.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user