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

Make data dynamic in workflow view. Add requester and startDate to workflows.

Browse Source
This commit is contained in:
Joao Correia
2025-01-24 14:14:07 +00:00
parent f6b0c96b3b
commit 41d09eaad8
10 changed files with 207 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,11 +3,12 @@ import React from "react";
import { FaRegUser } from "react-icons/fa";
interface Props {
prefix: string;
name: string;
profileImage: string;
}
export default function RequestedBy({ name, profileImage }: Props) {
export default function RequestedBy({ prefix, name, profileImage }: Props) {
return (
<div className="flex items-center space-x-3">
<div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
@@ -16,7 +17,7 @@ export default function RequestedBy({ name, profileImage }: Props) {
<div>
<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>
<p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
<Image
src={profileImage}
alt={name}

26
src/components/ApprovalWorkflows/StartedOn.tsx
View File

@@ -2,19 +2,39 @@ import React from "react";
import { PiCalendarDots } from "react-icons/pi";
interface Props {
date: string;
date: number;
}
export default function StartedOn({ date }: Props) {
const formattedDate = new Date(date);
const yearMonthDay = formattedDate.toISOString().split("T")[0];
const fullDateTime = formattedDate.toLocaleString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
});
return (
<div className="flex items-center space-x-3">
<div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
<PiCalendarDots className="text-mti-purple-dark size-7"/>
<PiCalendarDots className="text-mti-purple-dark size-7" />
</div>
<div>
<p className="pb-1 text-sm font-medium text-gray-800">Started on</p>
<div className="flex items-center">
<p className="text-xs font-medium text-gray-800">{date}</p>
{/* Display the formatted date and add a title attribute for hover */}
<p
className="text-xs font-medium text-gray-800"
title={fullDateTime} // Shows full date and time on hover
>
{yearMonthDay}
</p>
</div>
</div>
</div>

22
src/components/ApprovalWorkflows/UserWithProfilePic.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Image from "next/image";
interface Props {
prefix: string;
name: string;
profileImage: string;
}
export default function UserWithProfilePic({ prefix, name, profileImage }: Props) {
return (
<div className="flex items-center space-x-2">
<p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
<Image
src={profileImage}
alt={name}
width={24}
height={24}
className="w-6 h-6 rounded-full"
/>
</div>
);
};

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

@@ -1,10 +1,17 @@
import { getUserTypeLabel, WorkflowStep } from "@/interfaces/approval.workflow";
import { getUserTypeLabel, getUserTypeLabelShort, 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";
import { User } from "@/interfaces/user";
import UserWithProfilePic from "./UserWithProfilePic";
interface Props extends WorkflowStep {
workflowAssignees: User[],
}
export default function WorkflowStepComponent({
workflowAssignees,
stepType,
stepNumber,
completed,
@@ -15,12 +22,17 @@ export default function WorkflowStepComponent({
assignees,
assigneesType,
onClick,
}: WorkflowStep) {
}: Props) {
console.log(workflowAssignees);
console.log(completedBy)
const completedByUser = workflowAssignees.find((assignee) => assignee.id === completedBy);
const assigneesUsers = workflowAssignees.filter(user => assignees!.includes(user.id));
return (
<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", {
className={clsx("flex flex-row gap-5 w-[700px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
"bg-mti-purple-ultralight": selected,
})}
>
@@ -29,7 +41,7 @@ export default function WorkflowStepComponent({
{/* Vertical Bar connecting steps */}
{!finalStep && (
<div className="absolute w-1 bg-mti-purple-dark -bottom-20 h-20"></div>
<div className="absolute w-1 bg-mti-purple-dark -bottom-20 top-11"></div>
)}
</div>
@@ -46,15 +58,19 @@ export default function WorkflowStepComponent({
{stepType === "form-intake" ? (
<>
<p className="text-sm font-medium text-gray-800">Form: Intake</p>
{completed && (
{completed && completedBy && (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Completed by {completedBy}
Completed by {getUserTypeLabelShort(completedByUser?.type)} {completedByUser?.name}
</p>
)}
{!completed && (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
In progress...
</p>
{!completed && completedBy && (
<>
{assigneesUsers.map(user => (
<p key={user.id} className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
{getUserTypeLabelShort(user.type)} {user.name}
</p>
))}
</>
)}
</>
) : (
@@ -63,12 +79,23 @@ export default function WorkflowStepComponent({
<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}
Approved by {workflowAssignees.find((assignee) => assignee.id === completedBy)?.name || "Unknown"}
</p>
) : !completed && currentStep ? (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
In progress...
</p>
<div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
In Progress... Assignees:
<div className="flex flex-row flex-wrap gap-3 items-center">
{assigneesUsers.map(user => (
<span key={user.id}>
<UserWithProfilePic
prefix={getUserTypeLabelShort(user.type)}
name={user.name}
profileImage={user.profilePicture}
/>
</span>
))}
</div>
</div>
) : (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Waiting for previous steps...