From 94e9dffaefc582196dfebc74b53028f7307cf202 Mon Sep 17 00:00:00 2001
From: kovakmedya <egecankomur@gmail.com>
Date: Fri, 22 May 2026 16:05:07 +0300
Subject: [PATCH] feat(jobs): step-by-step timeline on the detail page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The job_status_history table was already being populated on every
transition; the detail page just rendered a flat list with date only.
Replaced it with a proper vertical timeline:

  - Card title moved from 'Aşama Geçmişi' to 'Akış Geçmişi' since we
    now include side-trips (revision requests), not just forward steps.
  - Vertical guide line with a coloured node per entry: emerald for
    a normal step completion, rose for a revision request. Spotting a
    bounced prova in the history is a glance.
  - Revision rows get an inline 'Düzeltme talebi' pill; the '[Düzeltme
    talebi]' prefix is stripped from the visible note so the actual
    feedback text reads cleanly.
  - Always rendered (with an empty-state line) so the card position
    doesn't move around as the case progresses.
---
 src/app/(dashboard)/jobs/[jobId]/page.tsx | 74 +++++++++++++++--------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/app/(dashboard)/jobs/[jobId]/page.tsx b/src/app/(dashboard)/jobs/[jobId]/page.tsx
index 252301e..01893fa 100644
--- a/src/app/(dashboard)/jobs/[jobId]/page.tsx
+++ b/src/app/(dashboard)/jobs/[jobId]/page.tsx
@@ -259,33 +259,55 @@ export default async function JobDetailPage({
         </CardContent>
       </Card>
 
-      {history.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle>Aşama Geçmişi</CardTitle>
-            <CardDescription>Tamamlanan aşamaların kaydı.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ol className="space-y-3">
-              {history.map((h) => (
-                <li key={h.$id} className="border-l-2 border-primary/30 pl-4">
-                  <div className="flex flex-wrap items-baseline gap-2">
-                    <span className="font-medium">{JOB_STEP_LABELS[h.step]}</span>
-                    <span className="text-muted-foreground text-xs">
-                      {dateFormatter.format(new Date(h.completedAt))}
-                    </span>
-                  </div>
-                  {h.note && (
-                    <p className="text-muted-foreground mt-1 whitespace-pre-wrap text-sm">
-                      {h.note}
-                    </p>
-                  )}
-                </li>
-              ))}
+      <Card>
+        <CardHeader>
+          <CardTitle>Akış Geçmişi</CardTitle>
+          <CardDescription>
+            İşin aşama transition&apos;ları, kim yaptı ve hangi notla.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {history.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              Henüz aşama tamamlanmadı.
+            </p>
+          ) : (
+            <ol className="relative space-y-4 border-l-2 border-border pl-6">
+              {history.map((h) => {
+                const isRevision = h.note?.startsWith("[Düzeltme talebi]");
+                return (
+                  <li key={h.$id} className="relative">
+                    <span
+                      className={`absolute -left-[1.85rem] mt-1.5 size-3 rounded-full ring-2 ring-background ${
+                        isRevision ? "bg-rose-500" : "bg-emerald-500"
+                      }`}
+                      aria-hidden
+                    />
+                    <div className="flex flex-wrap items-baseline gap-2">
+                      <span className="font-medium">
+                        {JOB_STEP_LABELS[h.step]}
+                      </span>
+                      {isRevision && (
+                        <span className="rounded bg-rose-100 px-1.5 py-0.5 text-xs font-medium text-rose-700 dark:bg-rose-950 dark:text-rose-300">
+                          Düzeltme talebi
+                        </span>
+                      )}
+                      <span className="text-muted-foreground text-xs tabular-nums">
+                        {dateFormatter.format(new Date(h.completedAt))}
+                      </span>
+                    </div>
+                    {h.note && (
+                      <p className="text-muted-foreground mt-1 whitespace-pre-wrap text-sm">
+                        {h.note.replace(/^\[Düzeltme talebi\]\s*/, "")}
+                      </p>
+                    )}
+                  </li>
+                );
+              })}
             </ol>
-          </CardContent>
-        </Card>
-      )}
+          )}
+        </CardContent>
+      </Card>
 
       <div>
         <Button asChild variant="outline">