1 files changed, 13 insertions, 6 deletions
diff --git a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx b/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
index 5ee7999..9589db9 100644
--- a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
+++ b/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
@@ -1,7 +1,9 @@
-import type { ContractPhase } from "../../lib/api";
+import type { ContractPhase, ContractType } from "../../lib/api";
+import { getValidPhases } from "../../lib/api";
 
 interface PhaseProgressBarProps {
   currentPhase: ContractPhase;
+  contractType?: ContractType;
   onPhaseClick?: (phase: ContractPhase) => void;
   readonly?: boolean;
 }
@@ -46,14 +48,16 @@ const phaseColors: Record<ContractPhase, { active: string; inactive: string; com
 
 export function PhaseProgressBar({
   currentPhase,
+  contractType,
   onPhaseClick,
   readonly = false,
 }: PhaseProgressBarProps) {
-  const currentIndex = phases.indexOf(currentPhase);
+  const visiblePhases = contractType ? getValidPhases(contractType) : phases;
+  const currentIndex = visiblePhases.indexOf(currentPhase);
 
   return (
     <div className="flex items-center gap-1">
-      {phases.map((phase, index) => {
+      {visiblePhases.map((phase, index) => {
         const isActive = phase === currentPhase;
         const isCompleted = index < currentIndex;
         const colors = phaseColors[phase];
@@ -97,7 +101,7 @@ export function PhaseProgressBar({
             </button>
 
             {/* Connector line */}
-            {index < phases.length - 1 && (
+            {index < visiblePhases.length - 1 && (
               <div
                 className={`
                   w-8 h-0.5 mx-1
@@ -114,14 +118,17 @@ export function PhaseProgressBar({
 
 export function PhaseProgressBarCompact({
   currentPhase,
+  contractType,
 }: {
   currentPhase: ContractPhase;
+  contractType?: ContractType;
 }) {
-  const currentIndex = phases.indexOf(currentPhase);
+  const visiblePhases = contractType ? getValidPhases(contractType) : phases;
+  const currentIndex = visiblePhases.indexOf(currentPhase);
 
   return (
     <div className="flex items-center gap-0.5">
-      {phases.map((phase, index) => {
+      {visiblePhases.map((phase, index) => {
         const isActive = phase === currentPhase;
         const isCompleted = index < currentIndex;
         const colors = phaseColors[phase];