work on non editable approval workflow steps view

This commit is contained in:
Joao Correia
2025-01-21 20:42:03 +00:00
parent 48187fc7f2
commit 73e2e95449
8 changed files with 155 additions and 42 deletions

View File

@@ -1,25 +1,25 @@
import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
import { WorkflowStep } from "@/interfaces/approval.workflow";
import clsx from "clsx";
import React from "react";
import { RiProgress5Line } from "react-icons/ri";
import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
interface Props {
number: number;
isSelected?: boolean;
}
export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
export default function WorkflowStepNumber({ stepNumber, selected = false, completed, finalStep }: WorkflowStep) {
return (
<div
className={clsx(
'flex items-center justify-center w-11 h-11 rounded-full',
{
'bg-mti-purple text-mti-purple-ultralight': isSelected,
'bg-mti-purple-ultralight text-gray-500': !isSelected,
'bg-mti-purple-dark text-mti-purple-ultralight': selected,
'bg-mti-purple-ultralight text-gray-500': !selected,
}
)}
>
<span className="text-lg font-semibold">{number}</span>
{completed && finalStep ? (
<IoCheckmarkDoneSharp className="text-xl font-bold" size={25} />
) : completed && !finalStep ? (
<IoCheckmarkSharp className="text-xl font-bold" size={25} />
) : (
<span className="text-lg font-semibold">{stepNumber}</span>
)}
</div>
);
};