feat: add revisions and tasks pages to client portal with integrated sidebar navigation
This commit is contained in:
Poyraz Avsever
@@ -157,70 +157,68 @@ export function PortalProjectClient({ project, sections, tasks, revisions, clien
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="plan" className="mt-0">
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-6">
|
||||
<h3 className="font-semibold text-lg border-b border-border pb-2">Proje Planı & Aşamalar</h3>
|
||||
{sections.length === 0 ? (
|
||||
<p className="text-muted-foreground italic">Henüz bir plan yüklenmemiş.</p>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{sections.map((section: any) => (
|
||||
<div key={section.id} className="space-y-3 p-4 rounded-lg bg-muted/20 border border-border/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-foreground">{section.title}</h4>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{section.type === 'milestone' ? 'Aşama' : section.type === 'deliverable' ? 'Teslimat' : 'Not'}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{section.content}</p>
|
||||
<TabsContent value="plan" className="mt-6">
|
||||
{sections.length === 0 ? (
|
||||
<div className="py-10 text-center border rounded-lg border-dashed text-muted-foreground">
|
||||
Henüz bir plan yüklenmemiş.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{sections.map((section: any) => (
|
||||
<Card key={section.id}>
|
||||
<CardContent className="p-5 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-foreground">{section.title}</h4>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{section.type === 'milestone' ? 'Aşama' : section.type === 'deliverable' ? 'Teslimat' : 'Not'}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{section.content}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="revisions" className="mt-0">
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-6">
|
||||
<div className="flex items-center justify-between border-b border-border pb-2">
|
||||
<h3 className="font-semibold text-lg">Revizyon Talepleriniz</h3>
|
||||
<div className="text-sm text-muted-foreground">Kalan Hak: {project.revision_quota !== null ? project.revision_quota : 'Sınırsız'}</div>
|
||||
</div>
|
||||
|
||||
{revisions.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-center space-y-3">
|
||||
<MessageSquare className="h-8 w-8 text-muted-foreground/50" />
|
||||
<p className="text-muted-foreground">Henüz bir revizyon talebi oluşturmadınız.</p>
|
||||
<Button variant="outline" size="sm" onClick={() => setOpenRevision(true)}>Yeni Talep Oluştur</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{revisions.map((rev: any) => (
|
||||
<div key={rev.id} className="p-4 rounded-md border border-border bg-muted/10 hover:bg-muted/30 transition-colors">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
{format(new Date(rev.created_at), "d MMM yyyy, HH:mm", { locale: tr })}
|
||||
</div>
|
||||
<Badge variant={
|
||||
rev.status === 'completed' ? 'default' :
|
||||
rev.status === 'rejected' ? 'destructive' : 'secondary'
|
||||
} className="capitalize">
|
||||
{rev.status === 'pending' ? 'Bekliyor' :
|
||||
rev.status === 'in_progress' ? 'İşleniyor' :
|
||||
rev.status === 'completed' ? 'Tamamlandı' : 'Reddedildi'}
|
||||
</Badge>
|
||||
<TabsContent value="revisions" className="mt-6">
|
||||
<div className="flex items-center justify-end mb-4">
|
||||
<div className="text-sm font-medium text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-md">
|
||||
Kalan Hak: <span className="text-foreground ml-1">{project.revision_quota !== null ? project.revision_quota : 'Sınırsız'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{revisions.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center space-y-3 border rounded-lg border-dashed text-muted-foreground">
|
||||
<MessageSquare className="h-8 w-8 text-muted-foreground/50" />
|
||||
<p>Henüz bir revizyon talebi oluşturmadınız.</p>
|
||||
<Button variant="outline" size="sm" onClick={() => setOpenRevision(true)}>Yeni Talep Oluştur</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{revisions.map((rev: any) => (
|
||||
<Card key={rev.id} className="transition-colors hover:border-primary/30">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
{format(new Date(rev.created_at), "d MMM yyyy, HH:mm", { locale: tr })}
|
||||
</div>
|
||||
<p className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">{rev.description}</p>
|
||||
<Badge variant={
|
||||
rev.status === 'completed' ? 'default' :
|
||||
rev.status === 'rejected' ? 'destructive' : 'secondary'
|
||||
} className="capitalize">
|
||||
{rev.status === 'pending' ? 'Bekliyor' :
|
||||
rev.status === 'in_progress' ? 'İşleniyor' :
|
||||
rev.status === 'completed' ? 'Tamamlandı' : 'Reddedildi'}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">{rev.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { Card, CardContent, Badge } from "poyraz-ui/atoms";
|
||||
import { FolderKanban, Clock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { format } from "date-fns";
|
||||
import { tr } from "date-fns/locale";
|
||||
|
||||
export default async function PortalProjectsPage() {
|
||||
const supabase = await createClient();
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const { data: clientData } = await supabase
|
||||
.from("clients")
|
||||
.select("id")
|
||||
.eq("client_auth_id", user.id)
|
||||
.single();
|
||||
|
||||
if (!clientData) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-[50vh] text-center gap-4">
|
||||
<h2 className="text-2xl font-semibold">Hesabınız Henüz Aktif Değil</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { data: projectsData } = await supabase
|
||||
.from("projects")
|
||||
.select("id, name, status, progress, due_date, budget_amount, currency")
|
||||
.eq("client_id", clientData.id)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
const projects = projectsData || [];
|
||||
|
||||
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="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Projeleriniz</h1>
|
||||
<p className="text-muted-foreground">Size atanan tüm projeleri buradan inceleyebilirsiniz.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.length === 0 ? (
|
||||
<div className="col-span-full py-10 text-center border rounded-lg border-dashed text-muted-foreground flex flex-col items-center gap-3">
|
||||
<FolderKanban className="w-10 h-10 text-muted-foreground/50" />
|
||||
Henüz size atanmış bir proje bulunmuyor.
|
||||
</div>
|
||||
) : (
|
||||
projects.map(project => (
|
||||
<Link key={project.id} href={`/portal/projects/${project.id}`}>
|
||||
<Card className="hover:border-primary/50 transition-colors h-full">
|
||||
<CardContent className="p-5 flex flex-col h-full justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<h3 className="font-semibold text-lg line-clamp-2">{project.name}</h3>
|
||||
<Badge variant={project.status === 'completed' ? 'secondary' : 'default'} className="capitalize shrink-0">
|
||||
{project.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{project.due_date && (
|
||||
<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>Son Teslim: {format(new Date(project.due_date), 'd MMM yyyy', { locale: tr })}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-xs font-medium">
|
||||
<span>İlerleme</span>
|
||||
<span>%{project.progress}</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-500"
|
||||
style={{ width: `${project.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +1,103 @@
|
||||
import { MessageSquareDiff } from "lucide-react";
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { Card, CardContent, Badge } from "poyraz-ui/atoms";
|
||||
import { Clock, MessageSquare } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { format } from "date-fns";
|
||||
import { tr } from "date-fns/locale";
|
||||
|
||||
export default async function PortalRevisionsPage() {
|
||||
const supabase = await createClient();
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const { data: clientData } = await supabase
|
||||
.from("clients")
|
||||
.select("id")
|
||||
.eq("client_auth_id", user.id)
|
||||
.single();
|
||||
|
||||
if (!clientData) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-[50vh] text-center gap-4">
|
||||
<h2 className="text-2xl font-semibold">Hesabınız Henüz Aktif Değil</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { data: projectsData } = await supabase
|
||||
.from("projects")
|
||||
.select("id, name")
|
||||
.eq("client_id", clientData.id);
|
||||
|
||||
const projectIds = projectsData?.map(p => p.id) || [];
|
||||
|
||||
let revisions = [];
|
||||
if (projectIds.length > 0) {
|
||||
const { data: revisionsData } = await supabase
|
||||
.from("project_revisions")
|
||||
.select("id, description, status, project_id, created_at")
|
||||
.in("project_id", projectIds)
|
||||
.order("created_at", { ascending: false });
|
||||
revisions = revisionsData || [];
|
||||
}
|
||||
|
||||
const getProjectName = (id: string) => projectsData?.find(p => p.id === id)?.name || "Bilinmeyen Proje";
|
||||
|
||||
export default function PortalRevisionsPage() {
|
||||
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="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Revizyon Taleplerim</h1>
|
||||
<p className="text-muted-foreground">İlettiğiniz tüm revizyon taleplerinin durumunu buradan takip edebilirsiniz.</p>
|
||||
<p className="text-muted-foreground">İlettiğiniz tüm revizyon taleplerinin güncel durumunu buradan takip edebilirsiniz.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-72 flex-col items-center justify-center rounded-sm border border-dashed border-border bg-muted/20 p-8 text-center">
|
||||
<MessageSquareDiff className="h-10 w-10 text-muted-foreground" />
|
||||
<h3 className="mt-4 text-lg font-semibold text-foreground">
|
||||
Revizyon modülü yapım aşamasında
|
||||
</h3>
|
||||
<p className="mt-2 max-w-md text-sm text-muted-foreground">
|
||||
Yakında tüm revizyon taleplerinizi buradan yönetebileceksiniz. Şimdilik proje detay sayfasından revizyon talep edebilirsiniz.
|
||||
</p>
|
||||
<Link href="/portal" className="mt-4 text-primary hover:underline text-sm font-medium">
|
||||
Dashboard'a dön
|
||||
</Link>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{revisions.length === 0 ? (
|
||||
<div className="col-span-full py-10 text-center border rounded-lg border-dashed text-muted-foreground flex flex-col items-center gap-3">
|
||||
<MessageSquare className="w-10 h-10 text-muted-foreground/50" />
|
||||
Henüz bir revizyon talebinde bulunmadınız.
|
||||
</div>
|
||||
) : (
|
||||
revisions.map(rev => (
|
||||
<Card key={rev.id} className="h-full">
|
||||
<CardContent className="p-5 flex flex-col h-full justify-between gap-4">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-2 border-b border-border pb-3">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
{format(new Date(rev.created_at), "d MMM yyyy, HH:mm", { locale: tr })}
|
||||
</div>
|
||||
<Badge variant={
|
||||
rev.status === 'completed' ? 'default' :
|
||||
rev.status === 'rejected' ? 'destructive' : 'secondary'
|
||||
} className="capitalize shrink-0">
|
||||
{rev.status === 'pending' ? 'Bekliyor' :
|
||||
rev.status === 'in_progress' ? 'İşleniyor' :
|
||||
rev.status === 'completed' ? 'Tamamlandı' : 'Reddedildi'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-medium uppercase text-muted-foreground">Proje:</span>
|
||||
<span className="text-sm font-semibold truncate bg-muted/30 p-2 rounded-md">
|
||||
{getProjectName(rev.project_id)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">
|
||||
{rev.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end border-t border-border pt-4">
|
||||
<Link href={`/portal/projects/${rev.project_id}`} className="text-xs text-primary font-medium hover:underline">
|
||||
Projeye Git →
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+86
-14
@@ -1,25 +1,97 @@
|
||||
import { FolderKanban } from "lucide-react";
|
||||
import { createClient } from "@/lib/supabase/server";
|
||||
import { Card, CardContent, Badge } from "poyraz-ui/atoms";
|
||||
import { CheckCircle2, Clock, CalendarDays, KanbanSquare } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { format } from "date-fns";
|
||||
import { tr } from "date-fns/locale";
|
||||
|
||||
export default async function PortalTasksPage() {
|
||||
const supabase = await createClient();
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const { data: clientData } = await supabase
|
||||
.from("clients")
|
||||
.select("id")
|
||||
.eq("client_auth_id", user.id)
|
||||
.single();
|
||||
|
||||
if (!clientData) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-[50vh] text-center gap-4">
|
||||
<h2 className="text-2xl font-semibold">Hesabınız Henüz Aktif Değil</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { data: projectsData } = await supabase
|
||||
.from("projects")
|
||||
.select("id, name")
|
||||
.eq("client_id", clientData.id);
|
||||
|
||||
const projectIds = projectsData?.map(p => p.id) || [];
|
||||
|
||||
let tasks = [];
|
||||
if (projectIds.length > 0) {
|
||||
const { data: tasksData } = await supabase
|
||||
.from("tasks")
|
||||
.select("id, title, status, project_id, created_at, date, priority")
|
||||
.in("project_id", projectIds)
|
||||
.eq("is_public_to_client", true)
|
||||
.order("created_at", { ascending: false });
|
||||
tasks = tasksData || [];
|
||||
}
|
||||
|
||||
const getProjectName = (id: string) => projectsData?.find(p => p.id === id)?.name || "Bilinmeyen Proje";
|
||||
|
||||
export default function PortalTasksPage() {
|
||||
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="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Yapılan Görevler</h1>
|
||||
<p className="text-muted-foreground">Projeniz kapsamında üzerinde çalışılan ve tamamlanan görevler.</p>
|
||||
<p className="text-muted-foreground">Sizinle paylaşılan aktif ve tamamlanmış görevleri buradan takip edebilirsiniz.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-72 flex-col items-center justify-center rounded-sm border border-dashed border-border bg-muted/20 p-8 text-center">
|
||||
<FolderKanban className="h-10 w-10 text-muted-foreground" />
|
||||
<h3 className="mt-4 text-lg font-semibold text-foreground">
|
||||
Görev detayları yapım aşamasında
|
||||
</h3>
|
||||
<p className="mt-2 max-w-md text-sm text-muted-foreground">
|
||||
Yakında tüm görevlerin anlık durumlarını detaylıca buradan görebileceksiniz. Şimdilik proje detay sayfasından takip edebilirsiniz.
|
||||
</p>
|
||||
<Link href="/portal" className="mt-4 text-primary hover:underline text-sm font-medium">
|
||||
Dashboard'a dön
|
||||
</Link>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{tasks.length === 0 ? (
|
||||
<div className="col-span-full py-10 text-center border rounded-lg border-dashed text-muted-foreground flex flex-col items-center gap-3">
|
||||
<KanbanSquare className="w-10 h-10 text-muted-foreground/50" />
|
||||
Henüz sizinle paylaşılan bir görev bulunmuyor.
|
||||
</div>
|
||||
) : (
|
||||
tasks.map(task => (
|
||||
<Card key={task.id} className="h-full">
|
||||
<CardContent className="p-5 flex flex-col h-full justify-between gap-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className={task.status === 'completed' || task.status === 'done' ? "font-semibold text-lg line-through text-muted-foreground line-clamp-2" : "font-semibold text-lg line-clamp-2"}>
|
||||
{task.title}
|
||||
</h3>
|
||||
<Badge variant={task.status === 'completed' || task.status === 'done' ? 'secondary' : 'outline'} className="capitalize shrink-0">
|
||||
{task.status === 'todo' ? 'Bekliyor' : task.status === 'in_progress' ? 'İşleniyor' : 'Tamamlandı'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted/30 p-2 rounded-md">
|
||||
<span className="font-medium truncate">{getProjectName(task.project_id)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground border-t border-border pt-4">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
<span>{task.date ? format(new Date(task.date), 'd MMM yyyy', { locale: tr }) : 'Tarih yok'}</span>
|
||||
</div>
|
||||
{task.status === 'completed' || task.status === 'done' ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
|
||||
) : (
|
||||
<Clock className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
FolderKanban,
|
||||
Sparkles,
|
||||
CheckSquare2,
|
||||
} from "lucide-react";
|
||||
|
||||
export type PortalSidebarNavItem = {
|
||||
@@ -25,7 +26,8 @@ export const portalSidebarData: PortalSidebarNavGroup[] = [
|
||||
{
|
||||
title: "SÜREÇLER",
|
||||
items: [
|
||||
{ title: "Yapılan Görevler", href: "/portal/tasks", icon: FolderKanban },
|
||||
{ title: "Projeleriniz", href: "/portal/projects", icon: FolderKanban },
|
||||
{ title: "Yapılan Görevler", href: "/portal/tasks", icon: CheckSquare2 },
|
||||
{ title: "Revizyon Talepleri", href: "/portal/revisions", icon: Sparkles },
|
||||
],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user