Start work on Approval Workflow id page

src/components/ApprovalWorkflows/RequestedBy.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { FaRegUser } from "react-icons/fa";
+
+interface Props {
+    name: string;
+    profileImage: string;
+}
+
+export default function RequestedBy({ 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">
+                <FaRegUser className="text-mti-purple-dark size-5"/>
+            </div>
+            <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>
+                    <img
+                        src={profileImage}
+                        alt={name}
+                        className="w-6 h-6 rounded-full"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/StartedOn.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { PiCalendarDots } from "react-icons/pi";
+
+interface Props {
+    date: string;
+}
+
+export default function StartedOn({ date }: 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">
+                <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>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/Status.tsx

@@ -0,0 +1,23 @@
+import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import React from "react";
+import { RiProgress5Line } from "react-icons/ri";
+
+interface Props {
+    status: ApprovalWorkflowStatus;
+}
+
+export default function Status({ status }: 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">
+                <RiProgress5Line className="text-mti-purple-dark size-7"/>
+            </div>
+            <div>
+                <p className="pb-1 text-sm font-medium text-gray-800">Status</p>
+                <div className="flex items-center">
+                    <p className="text-xs font-medium text-gray-800">{ApprovalWorkflowStatusLabel[status]}</p>
+                </div>
+            </div>
+        </div>
+    );
+};