poyrazavsever/neta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance client portal UI with KPI cards, update dashboard data structures, and improve project status visualization.

Browse Source
This commit is contained in:
poyrazavsever
2026-06-09 00:02:21 +03:00
parent 99d27f3a6a
commit 41c6d86746
3 changed files with 150 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/dashboard-client.tsx
+56 -20
View File
@@ -1,18 +1,19 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import Link from "next/link";
import { Badge, Button, Card, CardContent } from "poyraz-ui/atoms"; import { Badge, Button, Card, CardContent } from "poyraz-ui/atoms";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "poyraz-ui/molecules"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "poyraz-ui/molecules";
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Line, LineChart } from "recharts"; import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Line, LineChart } from "recharts";
import { CheckCircle2, Wallet, FolderKanban, Activity, CalendarDays, Plus } from "lucide-react"; import { CheckCircle2, Wallet, FolderKanban, Activity, CalendarDays, Plus, Users } from "lucide-react";
import { QuickActionsSheet } from "@/components/dashboard/quick-actions-sheet"; import { QuickActionsSheet } from "@/components/dashboard/quick-actions-sheet";
export type DashboardData = { export type DashboardData = {
tasks: { id: string; status: string; created_at: string; updated_at?: string; due_at?: string }[]; tasks: { id: string; status: string; created_at: string; updated_at?: string; due_at?: string }[];
projects: { id: string; status: string; name: string }[]; projects: { id: string; status: string; name: string; created_at: string }[];
finances: { id: string; type: string; amount: number; transaction_date: string }[]; finances: { id: string; type: string; amount: number; transaction_date: string }[];
logs: { id: string; log_date: string; mood_score: number; energy_score: number }[]; logs: { id: string; log_date: string; mood_score: number; energy_score: number }[];
events: { id: string; title: string; type: string; starts_at: string }[]; clients: { id: string; name: string; company_name: string; created_at: string }[];
}; };
type DashboardClientProps = { type DashboardClientProps = {
@@ -44,16 +45,16 @@ export function DashboardClient({ data }: DashboardClientProps) {
}; };
// KPIs // KPIs
const filteredFinances = data.finances.filter(f => filterByDate(f.transaction_date)); const filteredFinances = (data.finances || []).filter(f => filterByDate(f.transaction_date));
const income = filteredFinances.filter(f => f.type === "income").reduce((acc, curr) => acc + Number(curr.amount), 0); const income = filteredFinances.filter(f => f.type === "income").reduce((acc, curr) => acc + Number(curr.amount), 0);
const expense = filteredFinances.filter(f => f.type === "expense").reduce((acc, curr) => acc + Number(curr.amount), 0); const expense = filteredFinances.filter(f => f.type === "expense").reduce((acc, curr) => acc + Number(curr.amount), 0);
const netProfit = income - expense; const netProfit = income - expense;
const activeProjectsCount = data.projects.filter(p => p.status === "active").length; const activeProjectsCount = (data.projects || []).filter(p => p.status === "active").length;
const completedTasksCount = data.tasks.filter(t => t.status === "completed" && filterByDate(t.updated_at || t.created_at)).length; const completedTasksCount = (data.tasks || []).filter(t => t.status === "completed" && filterByDate(t.updated_at || t.created_at)).length;
const filteredLogs = data.logs.filter(l => filterByDate(l.log_date)); const filteredLogs = (data.logs || []).filter(l => filterByDate(l.log_date));
const avgMood = filteredLogs.length > 0 const avgMood = filteredLogs.length > 0
? (filteredLogs.reduce((acc, curr) => acc + curr.mood_score, 0) / filteredLogs.length).toFixed(1) ? (filteredLogs.reduce((acc, curr) => acc + curr.mood_score, 0) / filteredLogs.length).toFixed(1)
: "0.0"; : "0.0";
@@ -264,27 +265,62 @@ export function DashboardClient({ data }: DashboardClientProps) {
</Card> </Card>
</div> </div>
{/* Upcoming & Tasks List */} {/* Recent Items */}
<div className="grid gap-6 lg:grid-cols-2"> <div className="grid gap-6 lg:grid-cols-2">
{/* Recent Projects */}
<Card> <Card>
<CardContent className="p-6"> <CardContent className="p-6">
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h3 className="text-sm font-semibold text-foreground">Yaklaşan Etkinlikler ve Deadlinelar</h3> <h3 className="text-sm font-semibold text-foreground">Son Eklenen Projeler</h3>
<CalendarDays className="h-4 w-4 text-muted-foreground" /> <FolderKanban className="h-4 w-4 text-muted-foreground" />
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
{data.events.length > 0 ? data.events.map((event) => ( {(data.projects || []).slice(0, 5).map((project) => (
<div key={event.id} className="flex items-center gap-3"> <Link key={project.id} href={`/projects/${project.id}`} className="flex items-center gap-3 hover:bg-muted/50 p-2 -mx-2 rounded-md transition-colors">
<div className={`h-2 w-2 rounded-full ${event.type === 'meeting' ? 'bg-primary' : event.type === 'deadline' ? 'bg-destructive' : 'bg-amber-500'}`} /> <div className={`h-2 w-2 rounded-full ${project.status === 'completed' ? 'bg-emerald-500' : project.status === 'active' ? 'bg-blue-500' : 'bg-amber-500'}`} />
<div className="flex-1"> <div className="flex-1 flex justify-between items-center">
<p className="text-sm font-medium">{event.title}</p> <div>
<p className="text-xs text-muted-foreground"> <p className="text-sm font-medium">{project.name}</p>
{new Date(event.starts_at).toLocaleDateString("tr-TR", { month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" })} <p className="text-xs text-muted-foreground">
</p> {new Date(project.created_at).toLocaleDateString("tr-TR", { month: "short", day: "numeric" })}
</p>
</div>
<Badge variant={project.status === 'completed' ? 'secondary' : 'default'} className="capitalize text-[10px] px-1.5 py-0">
{project.status === 'completed' ? 'Tamamlandı' : project.status === 'active' ? 'Aktif' : 'Beklemede'}
</Badge>
</div> </div>
</div> </Link>
))}
{data.projects.length === 0 && (
<div className="text-sm text-muted-foreground py-4 text-center border border-dashed rounded-sm border-border bg-muted/20">Henüz proje yok.</div>
)}
</div>
</CardContent>
</Card>
{/* Recent Clients */}
<Card>
<CardContent className="p-6">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-sm font-semibold text-foreground">Son Eklenen Müşteriler</h3>
<Users className="h-4 w-4 text-muted-foreground" />
</div>
<div className="space-y-4">
{(data.clients || []).length > 0 ? (data.clients || []).map((client) => (
<Link key={client.id} href={`/clients/${client.id}`} className="flex items-center gap-3 hover:bg-muted/50 p-2 -mx-2 rounded-md transition-colors">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-xs">
{client.name.charAt(0).toUpperCase()}
</div>
<div className="flex-1">
<p className="text-sm font-medium">{client.name}</p>
<p className="text-xs text-muted-foreground">{client.company_name || "Bireysel"}</p>
</div>
<div className="text-xs text-muted-foreground">
{new Date(client.created_at).toLocaleDateString("tr-TR", { month: "short", day: "numeric" })}
</div>
</Link>
)) : ( )) : (
<div className="text-sm text-muted-foreground py-4 text-center border border-dashed rounded-sm border-border bg-muted/20">Yaklaşan etkinlik yok.</div> <div className="text-sm text-muted-foreground py-4 text-center border border-dashed rounded-sm border-border bg-muted/20">Henüz müşteri yok.</div>
)} )}
</div> </div>
</CardContent> </CardContent>
app/(dashboard)/page.tsx
+6 -7
View File
@@ -49,20 +49,19 @@ export default async function DashboardPage() {
.gte("log_date", thirtyDaysAgoStr) .gte("log_date", thirtyDaysAgoStr)
.order("log_date", { ascending: true }); .order("log_date", { ascending: true });
// 5. Fetch calendar events (upcoming) // 5. Fetch recent clients
const { data: events } = await supabase const { data: clients } = await supabase
.from("calendar_events") .from("clients")
.select("*") .select("*")
.gte("starts_at", todayStr) .order("created_at", { ascending: false })
.order("starts_at", { ascending: true }) .limit(5);
.limit(10);
const dashboardData = { const dashboardData = {
tasks: tasks || [], tasks: tasks || [],
projects: projects || [], projects: projects || [],
finances: finances || [], finances: finances || [],
logs: logs || [], logs: logs || [],
events: events || [], clients: clients || [],
}; };
return <DashboardClient data={dashboardData} />; return <DashboardClient data={dashboardData} />;
app/portal/page.tsx
+88 -38
View File
@@ -1,6 +1,6 @@
import { createClient } from "@/lib/supabase/server"; import { createClient } from "@/lib/supabase/server";
import { Card, CardContent, Badge } from "poyraz-ui/atoms"; import { Card, CardContent, Badge } from "poyraz-ui/atoms";
import { FolderKanban, CheckCircle2, Clock, ArrowRight } from "lucide-react"; import { FolderKanban, CheckCircle2, Clock, Activity, Wallet, BarChart } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { format } from "date-fns"; import { format } from "date-fns";
import { tr } from "date-fns/locale"; import { tr } from "date-fns/locale";
@@ -32,7 +32,7 @@ export default async function PortalDashboardPage() {
// 2. Get Projects // 2. Get Projects
const { data: projectsData } = await supabase const { data: projectsData } = await supabase
.from("projects") .from("projects")
.select("id, name, status, progress, due_date, budget_amount, currency") .select("id, name, status, progress, due_date, budget_amount, currency, created_at")
.eq("client_id", clientData.id) .eq("client_id", clientData.id)
.order("created_at", { ascending: false }); .order("created_at", { ascending: false });
@@ -41,34 +41,46 @@ export default async function PortalDashboardPage() {
const activeProjects = projects.filter(p => p.status !== 'completed' && p.status !== 'cancelled'); const activeProjects = projects.filter(p => p.status !== 'completed' && p.status !== 'cancelled');
const completedProjects = projects.filter(p => p.status === 'completed'); const completedProjects = projects.filter(p => p.status === 'completed');
const totalBudget = activeProjects.reduce((sum, p) => sum + (Number(p.budget_amount) || 0), 0);
const avgProgress = projects.length > 0 ? (projects.reduce((sum, p) => sum + (p.progress || 0), 0) / projects.length).toFixed(0) : "0";
const formatCurrency = (val: number) => {
return new Intl.NumberFormat("tr-TR", {
style: "currency",
currency: projects[0]?.currency || "USD",
maximumFractionDigits: 0,
}).format(val);
};
return ( return (
<div className="mx-auto flex max-w-7xl flex-col gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500"> <div className="mx-auto flex max-w-7xl flex-col gap-6">
<div className="flex flex-col gap-2"> {/* Header */}
<h1 className="text-3xl font-semibold tracking-tight">Hoş Geldiniz, {clientData.name}</h1> <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
<p className="text-muted-foreground">İş süreçlerinizi ve aktif projelerinizi buradan takip edebilirsiniz.</p> <div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Activity className="h-4 w-4" />
Genel Bakış
</div>
<div>
<h1 className="text-3xl font-semibold tracking-normal text-foreground">
Müşteri Paneli
</h1>
<p className="mt-1 max-w-2xl text-sm text-muted-foreground">
Hoş geldiniz, {clientData.name}. Aktif projelerinizi, ilerlemeleri ve bütçe durumunuzu buradan takip edin.
</p>
</div>
</div>
</div> </div>
<div className="grid gap-4 md:grid-cols-3"> {/* KPI Cards */}
<Card> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<CardContent className="p-6 flex flex-col gap-2"> <StatCard label="Aktif Projeler" value={activeProjects.length.toString()} icon={FolderKanban} tone="blue" />
<div className="flex items-center gap-2 text-primary"> <StatCard label="Tamamlanan" value={completedProjects.length.toString()} icon={CheckCircle2} tone="green" />
<FolderKanban className="h-5 w-5" /> <StatCard label="Ortalama İlerleme" value={`%${avgProgress}`} icon={BarChart} tone="amber" />
<h3 className="font-semibold">Aktif Projeler</h3> <StatCard label="Aktif Bütçe" value={formatCurrency(totalBudget)} icon={Wallet} tone="red" />
</div>
<p className="text-3xl font-bold">{activeProjects.length}</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-6 flex flex-col gap-2">
<div className="flex items-center gap-2 text-emerald-600">
<CheckCircle2 className="h-5 w-5" />
<h3 className="font-semibold">Tamamlanan</h3>
</div>
<p className="text-3xl font-bold">{completedProjects.length}</p>
</CardContent>
</Card>
</div> </div>
{/* Projects */}
<div className="space-y-4"> <div className="space-y-4">
<h2 className="text-xl font-semibold">Tüm Projeleriniz</h2> <h2 className="text-xl font-semibold">Tüm Projeleriniz</h2>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -81,25 +93,30 @@ export default async function PortalDashboardPage() {
<Link key={project.id} href={`/portal/projects/${project.id}`}> <Link key={project.id} href={`/portal/projects/${project.id}`}>
<Card className="hover:border-primary/50 transition-colors h-full"> <Card className="hover:border-primary/50 transition-colors h-full">
<CardContent className="p-5 flex flex-col h-full justify-between gap-4"> <CardContent className="p-5 flex flex-col h-full justify-between gap-4">
<div className="space-y-2"> <div className="space-y-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<h3 className="font-semibold text-lg line-clamp-2">{project.name}</h3> <div className="flex items-center gap-2">
<Badge variant={project.status === 'completed' ? 'secondary' : 'default'} className="capitalize shrink-0"> <div className={`h-2 w-2 shrink-0 rounded-full ${project.status === 'completed' ? 'bg-emerald-500' : project.status === 'active' ? 'bg-blue-500' : 'bg-amber-500'}`} />
{project.status} <h3 className="font-semibold text-base line-clamp-2 leading-tight">{project.name}</h3>
</Badge> </div>
</div> </div>
{project.due_date && ( <div className="flex items-center gap-2 flex-wrap">
<div className="flex items-center gap-1.5 text-sm text-muted-foreground"> <Badge variant={project.status === 'completed' ? 'secondary' : 'default'} className="capitalize text-[10px] px-1.5 py-0">
<Clock className="h-4 w-4" /> {project.status === 'completed' ? 'Tamamlandı' : project.status === 'active' ? 'Aktif' : 'Beklemede'}
<span>Son Teslim: {format(new Date(project.due_date), 'd MMM yyyy', { locale: tr })}</span> </Badge>
</div> {project.due_date && (
)} <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
<Clock className="h-3.5 w-3.5" />
<span>Teslim: {format(new Date(project.due_date), 'd MMM yyyy', { locale: tr })}</span>
</div>
)}
</div>
</div> </div>
<div className="space-y-1"> <div className="space-y-1.5 mt-2">
<div className="flex items-center justify-between text-xs font-medium"> <div className="flex items-center justify-between text-xs font-medium">
<span>İlerleme</span> <span className="text-muted-foreground">İlerleme</span>
<span>%{project.progress}</span> <span>%{project.progress}</span>
</div> </div>
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden"> <div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
@@ -119,3 +136,36 @@ export default async function PortalDashboardPage() {
</div> </div>
); );
} }
function StatCard({
label,
value,
icon: Icon,
tone,
}: {
label: string;
value: string;
icon: any;
tone: "green" | "blue" | "amber" | "red";
}) {
const toneClass = {
green: "bg-emerald-50 text-emerald-700",
blue: "bg-blue-50 text-blue-700",
amber: "bg-amber-50 text-amber-700",
red: "bg-primary/10 text-primary",
}[tone];
return (
<Card>
<CardContent className="flex items-center justify-between gap-3 p-4">
<div>
<p className="text-sm text-muted-foreground">{label}</p>
<p className="mt-1 text-2xl font-semibold text-foreground">{value}</p>
</div>
<div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-sm ${toneClass}`}>
<Icon className="h-5 w-5" />
</div>
</CardContent>
</Card>
);
}