import Layout from "@/components/High/Layout"; import useUser from "@/hooks/useUser"; import { ApprovalWorkflow } from "@/interfaces/approval.workflow"; import { sessionOptions } from "@/lib/session"; import { redirect } from "@/utils"; import { requestUser } from "@/utils/api"; import { shouldRedirectHome } from "@/utils/navigation.disabled"; import { AnimatePresence, motion } from "framer-motion"; import { withIronSessionSsr } from "iron-session/next"; import Head from "next/head"; import Link from "next/link"; import { BsChevronLeft } from "react-icons/bs"; import { FaRegCheckCircle } from "react-icons/fa"; import { IoIosAddCircleOutline } from "react-icons/io"; import { ToastContainer } from "react-toastify"; 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"; import WorkflowStep, { StepType } from "@/components/ApprovalWorkflows/WorkflowStep"; import Button from "@/components/Low/Button"; import { useState } from "react"; interface Step { stepNumber: number; stepType: StepType; finalStep?: boolean; key: number; } export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => { const user = await requestUser(req, res) if (!user) return redirect("/login") if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) return redirect("/") const { id } = params as { id: string }; const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id); // await getApprovalWorkflow(id); if (!approvalWorkflow) return redirect("/approval-workflows") return { props: { user, approvalWorkflow }, }; }, sessionOptions); export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) { const { user } = useUser({ redirectTo: "/login" }); const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms"); const [steps, setSteps] = useState([ { stepNumber: 1, stepType: "form-intake", key: 1 }, { stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 }, ]); const [stepCounter, setStepCounter] = useState(3); // to guarantee unique keys used for animations const addStep = () => { setSteps((prev) => { const nonFinalSteps = prev.slice(0, -1); const finalStep = prev[prev.length - 1]; const newStep: Step = { stepNumber: finalStep.stepNumber, stepType: "approval-by", key: stepCounter }; const updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 }; setStepCounter((prev) => prev + 1); //update counter return [...nonFinalSteps, newStep, updatedFinalStep]; }); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // Handle form submission logic console.log("Form submitted!", steps); }; const handleDelete = (index: number) => { setSteps((prev) => { const updatedSteps = prev.filter((_, i) => i !== index); const recalculatedSteps = updatedSteps.map((step, idx) => ({ ...step, stepNumber: idx + 1, })); return recalculatedSteps; }); }; return ( <> {approvalWorkflow.name} | EnCoach {user && (

{approvalWorkflow.name}

)} ); }