first commit

frontend/app/main/planning/projects/[projectIdentifier]/component/workflow/index.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React from "react";
+
+type Step = {
+  label: string;
+  done?: boolean;
+  active?: boolean;
+};
+
+export default function Workflow({
+  steps,
+}: {
+  steps: Step[];
+}) {
+  return (
+    <div className="bg-card border rounded-xl p-6">
+      <h3 className="text-lg font-semibold mb-4">Project Workflow</h3>
+
+      <div className="flex items-center justify-between">
+        {steps.map((step, index) => (
+          <React.Fragment key={index}>
+            <WorkflowStep {...step} />
+            {index !== steps.length - 1 && (
+              <Line active={step.done || step.active} />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function WorkflowStep({ label, active, done }: Step) {
+  return (
+    <div className="flex flex-col items-center gap-2 min-w-[90px]">
+      <div
+        className={`h-9 w-9 rounded-full flex items-center justify-center border 
+          ${done ? "bg-green-500/10 border-green-500 text-green-500" : ""}
+          ${active && !done ? "bg-blue-500/10 border-blue-500 text-blue-500" : ""}
+          ${!active && !done ? "bg-muted border-border text-muted-foreground" : ""}
+        `}
+      >
+        ●
+      </div>
+
+      <span
+        className={`text-xs text-center
+          ${done ? "text-green-500" : ""}
+          ${active && !done ? "text-blue-500" : ""}
+          ${!active && !done ? "text-muted-foreground" : ""}
+        `}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function Line({ active }: { active?: boolean }) {
+  return (
+    <div
+      className={`flex-1 h-[2px] mx-2 ${
+        active ? "bg-green-500" : "bg-border"
+      }`}
+    />
+  );
+}