feat: implement Business OS modules for proposals, invoices, and subscriptions with database schema and UI components
This commit is contained in:
poyrazavsever
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { format } from "date-fns";
|
||||
import { tr } from "date-fns/locale";
|
||||
import { Receipt, Plus, MoreHorizontal, FileEdit, Trash2, Send, Download, CheckCircle2 } from "lucide-react";
|
||||
import { Button, Card, CardContent, Badge } from "poyraz-ui/atoms";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "poyraz-ui/molecules";
|
||||
|
||||
export type InvoiceRow = {
|
||||
id: string;
|
||||
invoice_number: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
status: "draft" | "sent" | "paid" | "overdue" | "cancelled";
|
||||
issue_date: string | null;
|
||||
due_date: string | null;
|
||||
clientName: string | null;
|
||||
projectName: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
export function InvoicesClient({ invoices }: { invoices: InvoiceRow[] }) {
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
|
||||
const formatCurrency = (amount: number, currency: string) => {
|
||||
return new Intl.NumberFormat("tr-TR", { style: "currency", currency }).format(amount);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "draft":
|
||||
return <Badge variant="secondary">Taslak</Badge>;
|
||||
case "sent":
|
||||
return <Badge className="bg-blue-500/10 text-blue-500 border-blue-500/20 hover:bg-blue-500/20">Gönderildi</Badge>;
|
||||
case "paid":
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20 hover:bg-emerald-500/20">Ödendi</Badge>;
|
||||
case "overdue":
|
||||
return <Badge variant="destructive">Gecikmiş</Badge>;
|
||||
case "cancelled":
|
||||
return <Badge variant="outline" className="opacity-50">İptal</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Faturalar</h1>
|
||||
<p className="text-muted-foreground mt-1">Müşteri faturalarınızı ve ödemeleri takip edin.</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsAddModalOpen(true)} className="gap-2">
|
||||
<Plus className="h-4 w-4" /> Yeni Fatura
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="rounded-md border border-border">
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table className="w-full caption-bottom text-sm">
|
||||
<thead className="[&_tr]:border-b">
|
||||
<tr className="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Fatura No</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Müşteri</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Tutar</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Durum</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Düzenlenme Tarihi</th>
|
||||
<th className="h-12 px-4 text-right align-middle font-medium text-muted-foreground">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="[&_tr:last-child]:border-0">
|
||||
{invoices.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="h-24 text-center text-muted-foreground">
|
||||
Henüz hiç fatura bulunmuyor.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
invoices.map((invoice) => (
|
||||
<tr key={invoice.id} className="border-b border-border transition-colors hover:bg-muted/50">
|
||||
<td className="p-4 align-middle font-medium text-foreground">
|
||||
{invoice.invoice_number}
|
||||
{invoice.projectName && (
|
||||
<div className="text-xs text-muted-foreground font-normal mt-0.5">{invoice.projectName}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-muted-foreground">
|
||||
{invoice.clientName || "-"}
|
||||
</td>
|
||||
<td className="p-4 align-middle font-medium">
|
||||
{formatCurrency(invoice.amount, invoice.currency)}
|
||||
</td>
|
||||
<td className="p-4 align-middle">
|
||||
{getStatusBadge(invoice.status)}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-muted-foreground">
|
||||
{invoice.issue_date ? format(new Date(invoice.issue_date), "dd MMM yyyy", { locale: tr }) : "-"}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Menüyü aç</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
<FileEdit className="mr-2 h-4 w-4" /> Düzenle
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
<Download className="mr-2 h-4 w-4" /> PDF İndir
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
<Send className="mr-2 h-4 w-4" /> Gönder
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer text-emerald-500 focus:text-emerald-500">
|
||||
<CheckCircle2 className="mr-2 h-4 w-4" /> Ödendi İşaretle
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer text-destructive focus:text-destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" /> Sil
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{isAddModalOpen && (
|
||||
<div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-bold mb-4 text-foreground">Yeni Fatura Ekle</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6">Bu özellik şu an geliştirme aşamasındadır.</p>
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" onClick={() => setIsAddModalOpen(false)}>Kapat</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { InvoicesClient, type InvoiceRow } from "./invoices-client";
|
||||
|
||||
export default async function InvoicesPage() {
|
||||
const supabase = await createClient();
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { data: invoicesData } = await supabase
|
||||
.from("invoices")
|
||||
.select(`
|
||||
id,
|
||||
invoice_number,
|
||||
amount,
|
||||
currency,
|
||||
status,
|
||||
issue_date,
|
||||
due_date,
|
||||
created_at,
|
||||
clients ( name ),
|
||||
projects ( name )
|
||||
`)
|
||||
.eq("user_id", user.id)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
const invoices: InvoiceRow[] = (invoicesData || []).map((i: any) => ({
|
||||
id: i.id,
|
||||
invoice_number: i.invoice_number,
|
||||
amount: Number(i.amount),
|
||||
currency: i.currency,
|
||||
status: i.status,
|
||||
issue_date: i.issue_date,
|
||||
due_date: i.due_date,
|
||||
created_at: i.created_at,
|
||||
clientName: i.clients?.name || null,
|
||||
projectName: i.projects?.name || null,
|
||||
}));
|
||||
|
||||
return <InvoicesClient invoices={invoices} />;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { ProposalsClient, type ProposalRow } from "./proposals-client";
|
||||
|
||||
export default async function ProposalsPage() {
|
||||
const supabase = await createClient();
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { data: proposalsData } = await supabase
|
||||
.from("proposals")
|
||||
.select(`
|
||||
id,
|
||||
title,
|
||||
amount,
|
||||
currency,
|
||||
status,
|
||||
valid_until,
|
||||
created_at,
|
||||
clients ( name ),
|
||||
projects ( name )
|
||||
`)
|
||||
.eq("user_id", user.id)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
const proposals: ProposalRow[] = (proposalsData || []).map((p: any) => ({
|
||||
id: p.id,
|
||||
title: p.title,
|
||||
amount: Number(p.amount),
|
||||
currency: p.currency,
|
||||
status: p.status,
|
||||
valid_until: p.valid_until,
|
||||
created_at: p.created_at,
|
||||
clientName: p.clients?.name || null,
|
||||
projectName: p.projects?.name || null,
|
||||
}));
|
||||
|
||||
return <ProposalsClient proposals={proposals} />;
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { format } from "date-fns";
|
||||
import { tr } from "date-fns/locale";
|
||||
import { FileText, Plus, MoreHorizontal, FileEdit, Trash2, Mail, CheckCircle2, XCircle } from "lucide-react";
|
||||
import { Button, Card, CardContent, Badge } from "poyraz-ui/atoms";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "poyraz-ui/molecules";
|
||||
|
||||
export type ProposalRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
status: "draft" | "sent" | "accepted" | "rejected";
|
||||
valid_until: string | null;
|
||||
clientName: string | null;
|
||||
projectName: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
export function ProposalsClient({ proposals }: { proposals: ProposalRow[] }) {
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
|
||||
const formatCurrency = (amount: number, currency: string) => {
|
||||
return new Intl.NumberFormat("tr-TR", { style: "currency", currency }).format(amount);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "draft":
|
||||
return <Badge variant="secondary">Taslak</Badge>;
|
||||
case "sent":
|
||||
return <Badge className="bg-blue-500/10 text-blue-500 border-blue-500/20 hover:bg-blue-500/20">Gönderildi</Badge>;
|
||||
case "accepted":
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20 hover:bg-emerald-500/20">Kabul Edildi</Badge>;
|
||||
case "rejected":
|
||||
return <Badge variant="destructive">Reddedildi</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Teklifler</h1>
|
||||
<p className="text-muted-foreground mt-1">Müşterilerinize sunduğunuz teklifleri yönetin.</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsAddModalOpen(true)} className="gap-2">
|
||||
<Plus className="h-4 w-4" /> Yeni Teklif
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="rounded-md border border-border">
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table className="w-full caption-bottom text-sm">
|
||||
<thead className="[&_tr]:border-b">
|
||||
<tr className="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Teklif Adı</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Müşteri</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Tutar</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Durum</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Geçerlilik</th>
|
||||
<th className="h-12 px-4 text-right align-middle font-medium text-muted-foreground">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="[&_tr:last-child]:border-0">
|
||||
{proposals.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="h-24 text-center text-muted-foreground">
|
||||
Henüz hiç teklif bulunmuyor.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
proposals.map((proposal) => (
|
||||
<tr key={proposal.id} className="border-b border-border transition-colors hover:bg-muted/50">
|
||||
<td className="p-4 align-middle font-medium text-foreground">
|
||||
{proposal.title}
|
||||
{proposal.projectName && (
|
||||
<div className="text-xs text-muted-foreground font-normal mt-0.5">{proposal.projectName}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-muted-foreground">
|
||||
{proposal.clientName || "-"}
|
||||
</td>
|
||||
<td className="p-4 align-middle font-medium">
|
||||
{formatCurrency(proposal.amount, proposal.currency)}
|
||||
</td>
|
||||
<td className="p-4 align-middle">
|
||||
{getStatusBadge(proposal.status)}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-muted-foreground">
|
||||
{proposal.valid_until ? format(new Date(proposal.valid_until), "dd MMM yyyy", { locale: tr }) : "-"}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Menüyü aç</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
<FileEdit className="mr-2 h-4 w-4" /> Düzenle
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
<Mail className="mr-2 h-4 w-4" /> Gönder
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer text-emerald-500 focus:text-emerald-500">
|
||||
<CheckCircle2 className="mr-2 h-4 w-4" /> Kabul Edildi
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer text-destructive focus:text-destructive">
|
||||
<XCircle className="mr-2 h-4 w-4" /> Reddedildi
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer text-destructive focus:text-destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" /> Sil
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add Modal Placeholder */}
|
||||
{isAddModalOpen && (
|
||||
<div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-bold mb-4 text-foreground">Yeni Teklif Ekle</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6">Bu özellik şu an geliştirme aşamasındadır.</p>
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" onClick={() => setIsAddModalOpen(false)}>Kapat</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { SubscriptionsClient, type SubscriptionRow } from "./subscriptions-client";
|
||||
|
||||
export default async function SubscriptionsPage() {
|
||||
const supabase = await createClient();
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { data: subscriptionsData } = await supabase
|
||||
.from("subscriptions")
|
||||
.select(`
|
||||
id,
|
||||
name,
|
||||
amount,
|
||||
currency,
|
||||
billing_cycle,
|
||||
status,
|
||||
category,
|
||||
next_billing_date,
|
||||
created_at
|
||||
`)
|
||||
.eq("user_id", user.id)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
const subscriptions: SubscriptionRow[] = (subscriptionsData || []).map((s: any) => ({
|
||||
id: s.id,
|
||||
name: s.name,
|
||||
amount: Number(s.amount),
|
||||
currency: s.currency,
|
||||
billing_cycle: s.billing_cycle,
|
||||
status: s.status,
|
||||
category: s.category,
|
||||
next_billing_date: s.next_billing_date,
|
||||
created_at: s.created_at,
|
||||
}));
|
||||
|
||||
return <SubscriptionsClient subscriptions={subscriptions} />;
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { format } from "date-fns";
|
||||
import { tr } from "date-fns/locale";
|
||||
import { CreditCard, Plus, MoreHorizontal, FileEdit, Trash2, StopCircle, RefreshCw } from "lucide-react";
|
||||
import { Button, Card, CardContent, Badge } from "poyraz-ui/atoms";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "poyraz-ui/molecules";
|
||||
|
||||
export type SubscriptionRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
billing_cycle: "monthly" | "yearly" | "weekly";
|
||||
status: "active" | "cancelled";
|
||||
category: string | null;
|
||||
next_billing_date: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
export function SubscriptionsClient({ subscriptions }: { subscriptions: SubscriptionRow[] }) {
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
|
||||
const formatCurrency = (amount: number, currency: string) => {
|
||||
return new Intl.NumberFormat("tr-TR", { style: "currency", currency }).format(amount);
|
||||
};
|
||||
|
||||
const getCycleBadge = (cycle: string) => {
|
||||
switch (cycle) {
|
||||
case "monthly":
|
||||
return "Aylık";
|
||||
case "yearly":
|
||||
return "Yıllık";
|
||||
case "weekly":
|
||||
return "Haftalık";
|
||||
default:
|
||||
return cycle;
|
||||
}
|
||||
};
|
||||
|
||||
const activeMonthlyTotal = subscriptions
|
||||
.filter(s => s.status === "active")
|
||||
.reduce((acc, s) => {
|
||||
let monthlyEquivalent = s.amount;
|
||||
if (s.billing_cycle === "yearly") monthlyEquivalent = s.amount / 12;
|
||||
if (s.billing_cycle === "weekly") monthlyEquivalent = s.amount * 4.33;
|
||||
return acc + monthlyEquivalent;
|
||||
}, 0);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Abonelikler ve Masraflar</h1>
|
||||
<p className="text-muted-foreground mt-1">Sabit giderlerinizi ve tekrarlayan ödemelerinizi yönetin.</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsAddModalOpen(true)} className="gap-2">
|
||||
<Plus className="h-4 w-4" /> Yeni Abonelik
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="bg-primary/5 border-primary/20">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2 text-primary mb-2">
|
||||
<CreditCard className="h-5 w-5" />
|
||||
<h3 className="font-semibold">Aylık Tahmini Gider</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-foreground">
|
||||
{formatCurrency(activeMonthlyTotal, "TRY")}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Aktif aboneliklerin aylık ortalaması</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="rounded-md border border-border">
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table className="w-full caption-bottom text-sm">
|
||||
<thead className="[&_tr]:border-b">
|
||||
<tr className="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Abonelik Adı</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Kategori</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Tutar</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Periyot</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Durum</th>
|
||||
<th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Sonraki Ödeme</th>
|
||||
<th className="h-12 px-4 text-right align-middle font-medium text-muted-foreground">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="[&_tr:last-child]:border-0">
|
||||
{subscriptions.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="h-24 text-center text-muted-foreground">
|
||||
Henüz hiç abonelik bulunmuyor.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
subscriptions.map((sub) => (
|
||||
<tr key={sub.id} className={`border-b border-border transition-colors hover:bg-muted/50 ${sub.status === 'cancelled' ? 'opacity-50' : ''}`}>
|
||||
<td className="p-4 align-middle font-medium text-foreground">
|
||||
{sub.name}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-muted-foreground capitalize">
|
||||
{sub.category || "-"}
|
||||
</td>
|
||||
<td className="p-4 align-middle font-medium">
|
||||
{formatCurrency(sub.amount, sub.currency)}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-muted-foreground">
|
||||
{getCycleBadge(sub.billing_cycle)}
|
||||
</td>
|
||||
<td className="p-4 align-middle">
|
||||
{sub.status === "active" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20 hover:bg-emerald-500/20">Aktif</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">İptal Edildi</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-muted-foreground">
|
||||
{sub.next_billing_date ? format(new Date(sub.next_billing_date), "dd MMM yyyy", { locale: tr }) : "-"}
|
||||
</td>
|
||||
<td className="p-4 align-middle text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Menüyü aç</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem className="cursor-pointer">
|
||||
<FileEdit className="mr-2 h-4 w-4" /> Düzenle
|
||||
</DropdownMenuItem>
|
||||
{sub.status === "active" ? (
|
||||
<DropdownMenuItem className="cursor-pointer text-amber-500 focus:text-amber-500">
|
||||
<StopCircle className="mr-2 h-4 w-4" /> İptal Et
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<DropdownMenuItem className="cursor-pointer text-emerald-500 focus:text-emerald-500">
|
||||
<RefreshCw className="mr-2 h-4 w-4" /> Yeniden Aktifleştir
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem className="cursor-pointer text-destructive focus:text-destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" /> Sil
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{isAddModalOpen && (
|
||||
<div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-bold mb-4 text-foreground">Yeni Abonelik Ekle</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6">Bu özellik şu an geliştirme aşamasındadır.</p>
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" onClick={() => setIsAddModalOpen(false)}>Kapat</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -130,10 +130,12 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
|
||||
<FinanceDialog mode="create" clients={clients} projects={projects} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-4">
|
||||
<div className="grid gap-3 md:grid-cols-3 lg:grid-cols-6">
|
||||
<StatCard label="Aylık gelir" value={formatCurrency(summary.income)} tone="green" />
|
||||
<StatCard label="Aylık gider" value={formatCurrency(summary.expense)} tone="rose" />
|
||||
<StatCard label="Net kazanç" value={formatCurrency(summary.net)} tone="primary" />
|
||||
<StatCard label="Brüt kazanç" value={formatCurrency(summary.net)} tone="primary" />
|
||||
<StatCard label="KDV Tahmini (%20)" value={formatCurrency(summary.tax)} tone="amber" />
|
||||
<StatCard label="Vergi Sonrası Net" value={formatCurrency(summary.afterTax)} tone="green" />
|
||||
<StatCard label="Bekleyen" value={formatCurrency(summary.pending)} tone="amber" />
|
||||
</div>
|
||||
|
||||
@@ -528,9 +530,11 @@ function calculateSummary(transactions: FinanceTransactionItem[]) {
|
||||
summary.pending += transaction.amount;
|
||||
}
|
||||
summary.net = summary.income - summary.expense;
|
||||
summary.tax = summary.income * 0.20; // 20% KDV/Vergi tahmini
|
||||
summary.afterTax = summary.net - summary.tax;
|
||||
return summary;
|
||||
},
|
||||
{ income: 0, expense: 0, net: 0, pending: 0 },
|
||||
{ income: 0, expense: 0, net: 0, tax: 0, afterTax: 0, pending: 0 },
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+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