feat: implement client portal project view with revision request functionality and layout structure

2026-06-06 22:31:55 +03:00
parent a631b65c0b
commit c361fff5a7
10 changed files with 724 additions and 5 deletions
@@ -0,0 +1,54 @@
+import { PortalShell } from "@/components/layout/portal-shell";
+import { createClient } from "@/lib/supabase/server";
+import { redirect } from "next/navigation";
+
+export default async function PortalLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  const { data: profile } = await supabase
+    .from("profiles")
+    .select("first_name, last_name, avatar_url, role")
+    .eq("id", user.id)
+    .maybeSingle();
+
+  if (profile?.role !== "client") {
+    redirect("/");
+  }
+
+  const fallbackName = user.email?.split("@")[0] ?? "Müşteri";
+  const displayName =
+    [profile?.first_name, profile?.last_name].filter(Boolean).join(" ") ||
+    fallbackName;
+
+  const shortName = displayName
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("")
+    .slice(0, 2) || "MS";
+
+  return (
+    <PortalShell
+      user={{
+        email: user.email ?? "bilinmiyor@mindspace.local",
+        displayName,
+        shortName,
+        avatarUrl: profile?.avatar_url || null,
+      }}
+    >
+      {children}
+    </PortalShell>
+  );
+}
@@ -0,0 +1,122 @@
+import { createClient } from "@/lib/supabase/server";
+import { Card, CardContent } from "poyraz-ui/atoms";
+import { Badge } from "poyraz-ui/molecules";
+import { FolderKanban, CheckCircle2, Clock, ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { format } from "date-fns";
+import { tr } from "date-fns/locale";
+
+export default async function PortalDashboardPage() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) return null;
+
+  // 1. Get the Client record
+  const { data: clientData } = await supabase
+    .from("clients")
+    .select("id, name, company_name")
+    .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>
+        <p className="text-muted-foreground max-w-md">
+          Freelancer'ınız sizin için hesabı oluşturdu ancak müşteri kartınızla henüz eşleşmedi veya bir hata oluştu. Lütfen iletişime geçin.
+        </p>
+      </div>
+    );
+  }
+
+  // 2. Get Projects
+  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 || [];
+  
+  const activeProjects = projects.filter(p => p.status !== 'completed' && p.status !== 'cancelled');
+  const completedProjects = projects.filter(p => p.status === 'completed');
+
+  return (
+    <div className="flex 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">Hoş Geldiniz, {clientData.name}</h1>
+        <p className="text-muted-foreground">İş süreçlerinizi ve aktif projelerinizi buradan takip edebilirsiniz.</p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardContent className="p-6 flex flex-col gap-2">
+            <div className="flex items-center gap-2 text-primary">
+              <FolderKanban className="h-5 w-5" />
+              <h3 className="font-semibold">Aktif Projeler</h3>
+            </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 className="space-y-4">
+        <h2 className="text-xl font-semibold">Tüm Projeleriniz</h2>
+        <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">
+              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>
+    </div>
+  );
+}
@@ -0,0 +1,36 @@
+"use server";
+
+import { createClient } from "@/lib/supabase/server";
+import { revalidatePath } from "next/cache";
+
+export async function createRevisionRequest(projectId: string, clientId: string, formData: FormData) {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) {
+    return { error: "Oturum süresi dolmuş." };
+  }
+
+  const description = formData.get("description") as string;
+
+  if (!description?.trim()) {
+    return { error: "Revizyon açıklaması boş olamaz." };
+  }
+
+  const { error } = await supabase
+    .from("project_revisions")
+    .insert({
+      project_id: projectId,
+      client_id: clientId,
+      requested_by: user.id,
+      description,
+      status: "pending"
+    });
+
+  if (error) {
+    return { error: error.message };
+  }
+
+  revalidatePath(`/portal/projects/${projectId}`);
+  return { success: true };
+}
@@ -0,0 +1,67 @@
+import { createClient } from "@/lib/supabase/server";
+import { notFound } from "next/navigation";
+import { PortalProjectClient } from "./portal-project-client";
+
+export default async function PortalProjectPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) return null;
+
+  // 1. Get Client Record
+  const { data: clientData } = await supabase
+    .from("clients")
+    .select("id")
+    .eq("client_auth_id", user.id)
+    .single();
+
+  if (!clientData) {
+    notFound();
+  }
+
+  // 2. Get Project
+  const { data: project, error } = await supabase
+    .from("projects")
+    .select("*")
+    .eq("id", id)
+    .eq("client_id", clientData.id)
+    .single();
+
+  if (error || !project) {
+    notFound();
+  }
+
+  // 3. Get Planning Sections (Milestones etc.)
+  const { data: sectionsData } = await supabase
+    .from("project_planning_sections")
+    .select("*")
+    .eq("project_id", id)
+    .order("order_index", { ascending: true });
+
+  // 4. Get Public Tasks
+  const { data: tasksData } = await supabase
+    .from("tasks")
+    .select("*")
+    .eq("project_id", id)
+    .eq("is_public_to_client", true)
+    .order("date", { ascending: false });
+
+  // 5. Get Revisions
+  const { data: revisionsData } = await supabase
+    .from("project_revisions")
+    .select("id, description, status, created_at, requested_by")
+    .eq("project_id", id)
+    .eq("client_id", clientData.id)
+    .order("created_at", { ascending: false });
+
+  return (
+    <PortalProjectClient
+      project={project}
+      sections={sectionsData || []}
+      tasks={tasksData || []}
+      revisions={revisionsData || []}
+      clientId={clientData.id}
+    />
+  );
+}
@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import { format } from "date-fns";
+import { tr } from "date-fns/locale";
+import { Card, CardContent, Badge, Button, Textarea, Label } from "poyraz-ui/atoms";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "poyraz-ui/molecules";
+import { CheckCircle2, Clock, MessageSquare, Loader2, RefreshCw } from "lucide-react";
+import toast from "react-hot-toast";
+import { createRevisionRequest } from "./actions";
+
+export function PortalProjectClient({ project, sections, tasks, revisions, clientId }: any) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [openRevision, setOpenRevision] = useState(false);
+
+  const handleRevision = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    const formData = new FormData(e.currentTarget);
+    try {
+      const res = await createRevisionRequest(project.id, clientId, formData);
+      if (res.error) throw new Error(res.error);
+      toast.success("Revizyon talebiniz başarıyla iletildi.");
+      setOpenRevision(false);
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const pendingRevisions = revisions.filter((r: any) => r.status === 'pending' || r.status === 'in_progress').length;
+
+  return (
+    <div className="mx-auto flex max-w-5xl flex-col gap-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      {/* Header Info */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-start justify-between">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold text-foreground">{project.name}</h1>
+          {project.description && <p className="text-muted-foreground">{project.description}</p>}
+        </div>
+        <div className="flex flex-col gap-2 md:items-end">
+          <div className="flex gap-2">
+            <Badge variant="outline" className="px-3 py-1 capitalize text-sm">{project.status}</Badge>
+            <Dialog open={openRevision} onOpenChange={setOpenRevision}>
+              <DialogTrigger asChild>
+                <Button className="gap-2 shrink-0">
+                  <RefreshCw className="h-4 w-4" /> Revizyon Talep Et
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <form onSubmit={handleRevision}>
+                  <DialogHeader>
+                    <DialogTitle>Yeni Revizyon Talebi</DialogTitle>
+                  </DialogHeader>
+                  <div className="py-4 space-y-4">
+                    {pendingRevisions > 0 && (
+                      <div className="p-3 bg-amber-500/10 text-amber-600 rounded-md text-sm border border-amber-500/20">
+                        Şu anda sonuçlanmamış {pendingRevisions} adet revizyon talebiniz var. Yeni bir tane eklemek istediğinize emin misiniz?
+                      </div>
+                    )}
+                    <div className="space-y-2">
+                      <Label>Lütfen yapılmasını istediğiniz değişiklikleri detaylıca açıklayın</Label>
+                      <Textarea name="description" required rows={5} placeholder="Şu kısmın rengi mavi olabilir mi? Ayrıca metinleri güncelleyelim..." />
+                    </div>
+                  </div>
+                  <DialogFooter>
+                    <Button type="button" variant="ghost" onClick={() => setOpenRevision(false)}>İptal</Button>
+                    <Button type="submit" disabled={isSubmitting}>
+                      {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                      Talebi Gönder
+                    </Button>
+                  </DialogFooter>
+                </form>
+              </DialogContent>
+            </Dialog>
+          </div>
+          {project.due_date && (
+            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <Clock className="h-4 w-4" />
+              <span>Teslim: {format(new Date(project.due_date), 'd MMM yyyy', { locale: tr })}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="md:col-span-2 space-y-6">
+          {/* Project Planning / Milestones */}
+          <Card>
+            <CardContent className="p-5 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-4">
+                  {sections.map((section: any) => (
+                    <div key={section.id} className="space-y-2">
+                      <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' ? 'Milestone' : section.type === 'deliverable' ? 'Teslimat' : 'Not'}
+                        </Badge>
+                      </div>
+                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">{section.content}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Revisions */}
+          {revisions.length > 0 && (
+            <Card>
+              <CardContent className="p-5 space-y-6">
+                <h3 className="font-semibold text-lg border-b border-border pb-2">Revizyon Talepleriniz</h3>
+                <div className="space-y-4">
+                  {revisions.map((rev: any) => (
+                    <div key={rev.id} className="p-4 rounded-md border border-border bg-muted/20">
+                      <div className="flex justify-between items-start mb-2">
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <Clock className="h-3 w-3" />
+                          {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'
+                        }>
+                          {rev.status === 'pending' ? 'Bekliyor' : 
+                           rev.status === 'in_progress' ? 'İşleniyor' : 
+                           rev.status === 'completed' ? 'Tamamlandı' : 'Reddedildi'}
+                        </Badge>
+                      </div>
+                      <p className="text-sm text-foreground whitespace-pre-wrap">{rev.description}</p>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        {/* Right Sidebar */}
+        <div className="space-y-6">
+          <Card>
+            <CardContent className="p-5 space-y-4">
+              <h3 className="font-semibold">İlerleme Durumu</h3>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-2xl font-bold">
+                  <span>%{project.progress}</span>
+                </div>
+                <div className="h-3 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>
+
+          <Card>
+            <CardContent className="p-5 space-y-4">
+              <h3 className="font-semibold flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4" /> Tamamlanan İşler
+              </h3>
+              {tasks.length === 0 ? (
+                <p className="text-sm text-muted-foreground italic">Listelenecek açık görev bulunmuyor.</p>
+              ) : (
+                <ul className="space-y-3">
+                  {tasks.map((task: any) => (
+                    <li key={task.id} className="text-sm flex gap-2">
+                      {task.status === 'completed' ? (
+                        <CheckCircle2 className="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
+                      ) : (
+                        <div className="h-4 w-4 rounded-full border-2 border-muted-foreground shrink-0 mt-0.5" />
+                      )}
+                      <div>
+                        <span className={task.status === 'completed' ? "line-through text-muted-foreground" : "text-foreground"}>
+                          {task.title}
+                        </span>
+                        {task.date && (
+                          <div className="text-xs text-muted-foreground mt-0.5">
+                            {format(new Date(task.date), 'd MMM yyyy', { locale: tr })}
+                          </div>
+                        )}
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}