From c2c9b3374c0de3b44e8c466f28025296205db38f Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.g.correia@inesctec.pt>
Date: Fri, 17 Jan 2025 20:17:51 +0000
Subject: [PATCH] Start work on Approval Workflow id page

---
 .../ApprovalWorkflows/RequestedBy.tsx         | 28 ++++++++++
 .../ApprovalWorkflows/StartedOn.tsx           | 22 ++++++++
 src/components/ApprovalWorkflows/Status.tsx   | 23 ++++++++
 src/pages/approval-workflows/[id].tsx         | 55 ++++++++++++-------
 4 files changed, 107 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ApprovalWorkflows/RequestedBy.tsx
 create mode 100644 src/components/ApprovalWorkflows/StartedOn.tsx
 create mode 100644 src/components/ApprovalWorkflows/Status.tsx

diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
new file mode 100644
index 00000000..84ea0cea
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/StartedOn.tsx b/src/components/ApprovalWorkflows/StartedOn.tsx
new file mode 100644
index 00000000..452cad72
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/Status.tsx b/src/components/ApprovalWorkflows/Status.tsx
new file mode 100644
index 00000000..f7176bfa
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 622d6d4e..a9571269 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -1,27 +1,21 @@
 import Layout from "@/components/High/Layout";
-import Select from "@/components/Low/Select";
-import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import useUser from "@/hooks/useUser";
-import useUsers from "@/hooks/useUsers";
-import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
-import { GroupWithUsers, User } from "@/interfaces/user";
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import axios from "axios";
-import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import { BsTrash } from "react-icons/bs";
-import { FaRegEdit } from "react-icons/fa";
-import { toast, ToastContainer } from "react-toastify";
+import { BsChevronLeft } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
 
-import approvalWorkflowsData from '../../demo/approval_workflows.json' // to test locally
+import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+
+import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
+import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
+import Status from "@/components/ApprovalWorkflows/Status";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res)
@@ -33,21 +27,21 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
     const { id } = params as { id: string };
 
     const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
-    if (!approvalWorkflow) 
+    if (!approvalWorkflow)
         return redirect("/approval-workflows")
 
     return {
-        props: { user },
+        props: { user, approvalWorkflow },
     };
 }, sessionOptions);
 
-export default function Home() {
+export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
     const { user } = useUser({ redirectTo: "/login" });
 
     return (
         <>
             <Head>
-                <title>Approval Workflows | EnCoach</title>
+                <title> {approvalWorkflow.name} | EnCoach</title>
                 <meta
                     name="description"
                     content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -58,9 +52,28 @@ export default function Home() {
             <ToastContainer />
             {user && (
                 <Layout user={user} className="gap-6">
-                    <h1 className="text-2xl font-semibold">Approval Workflows</h1>
-
-
+                    <section className="flex flex-col gap-0">
+                        <div className="flex items-center gap-2">
+                            <Link
+                                href="/approval-workflows"
+                                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                                <BsChevronLeft />
+                            </Link>
+                            <h1 className="text-2xl font-semibold">{approvalWorkflow.name}</h1>
+                        </div>
+                    </section>
+                    <section className="flex flex-row gap-6">
+                        <RequestedBy
+                            name="Prof. Álvaro Dória"
+                            profileImage="/blue-stock-photo.png"
+                        />
+                        <StartedOn
+                            date="15/12/2024"
+                        />
+                        <Status
+                            status="pending"
+                        />
+                    </section>
                 </Layout>
             )}
         </>