devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

work on non editable approval workflow steps view

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ApprovalWorkflows/RequestedBy.tsx
View File

@@ -1,3 +1,4 @@
import Image from "next/image";
import React from "react";
import { FaRegUser } from "react-icons/fa";
@@ -16,9 +17,11 @@ export default function RequestedBy({ name, profileImage }: Props) {
<p className="text-sm font-medium text-gray-800">Requested by</p>
<div className="flex items-center space-x-2">
<p className="text-xs font-medium text-gray-800">{name}</p>
<img
<Image
src={profileImage}
alt={name}
width={24}
height={24}
className="w-6 h-6 rounded-full"
/>
</div>

2
src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
View File

@@ -39,7 +39,7 @@ export default function WorkflowEditableStepComponent({
return (
<div className="flex w-full">
<div className="flex flex-col items-center">
<WorkflowStepNumber number={stepNumber} />
<WorkflowStepNumber stepNumber={stepNumber} />
{/* Vertical Bar connecting steps */}
{!finalStep && (

74
src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
View File

@@ -1,25 +1,81 @@
import { WorkflowStep } from "@/interfaces/approval.workflow";
import { getUserTypeLabel, WorkflowStep } from "@/interfaces/approval.workflow";
import WorkflowStepNumber from "./WorkflowStepNumber";
import clsx from "clsx";
import { RiThumbUpLine } from "react-icons/ri";
import { FaWpforms } from "react-icons/fa6";
export default function WorkflowStepComponent({
stepType,
stepNumber,
completed,
editView = false,
completedBy,
finalStep,
isSelected = false,
requestedBy,
onDelete,
currentStep,
selected = false,
assignees,
assigneesType,
onClick,
}: WorkflowStep) {
return (
<div className="flex w-full">
<div className="flex flex-col items-center">
<WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
<div
onClick={onClick}
className={clsx("flex flex-row gap-5 w-[600px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
"bg-mti-purple-ultralight": selected,
})}
>
<div className="relative flex flex-col items-center">
<WorkflowStepNumber stepNumber={stepNumber} selected={selected} completed={completed} finalStep={finalStep} />
{/* Vertical Bar connecting steps */}
{!finalStep && (
<div className="w-1 h-10 bg-mti-purple-dark"></div>
<div className="absolute w-1 bg-mti-purple-dark -bottom-20 h-20"></div>
)}
</div>
<div className="mt-1.5">
{stepType === "approval-by" ? (
<RiThumbUpLine size={25} />
) : (
<FaWpforms size={25} />
)
}
</div>
<div className="mt-1 flex flex-col gap-0">
{stepType === "form-intake" ? (
<>
<p className="text-sm font-medium text-gray-800">Form: Intake</p>
{completed && (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Completed by {completedBy}
</p>
)}
{!completed && (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
In progress...
</p>
)}
</>
) : (
stepType === "approval-by" && (
<>
<p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(assigneesType)}</p>
{completed ? (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Approved by {completedBy}
</p>
) : !completed && currentStep ? (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
In progress...
</p>
) : (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Waiting for previous steps...
</p>
)}
</>
)
)}
</div>
</div>

24
src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
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>
);
};