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

Start work on Approval Workflow id page

Browse Source
This commit is contained in:
Joao Correia
2025-01-17 20:17:51 +00:00
parent 66d23b4140
commit c2c9b3374c
4 changed files with 107 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ApprovalWorkflows/RequestedBy.tsx Normal file
View File

@@ -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>
);
};

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

@@ -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>
);
};

23
src/components/ApprovalWorkflows/Status.tsx Normal file
View File

@@ -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>
);
};

55
src/pages/approval-workflows/[id].tsx
View File

@@ -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>
)}
</>