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, Reorder } 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 { stepType: StepType; firstStep?: boolean; finalStep?: boolean; key: number; } // Variants for animating steps when they are added/removed const itemVariants = { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, x: 20 }, }; 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([ { stepType: "form-intake", firstStep: true, key: 1 }, { stepType: "approval-by", finalStep: true, key: 2 }, ]); const [stepCounter, setStepCounter] = useState(3); // to guarantee unique keys used for animations const firstStep = steps[0]; const lastStep = steps[steps.length - 1]; const middleSteps = steps.slice(1, steps.length - 1); const addStep = () => { setSteps((prev) => { const newStep: Step = { key: stepCounter, stepType: "approval-by", }; setStepCounter((count) => count + 1); return [...prev.slice(0, -1), newStep, lastStep]; }); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // Handle form submission logic console.log("Form submitted!", steps); }; const handleDelete = (key: number) => { setSteps((prev) => prev.filter((step) => step.key !== key)); }; const handleReorder = (newOrder: Step[]) => { const firstIndex = newOrder.findIndex((s) => s.firstStep); if (firstIndex !== -1 && firstIndex !== 0) { const [first] = newOrder.splice(firstIndex, 1); newOrder.unshift(first); } const finalIndex = newOrder.findIndex((s) => s.finalStep); if (finalIndex !== -1 && finalIndex !== newOrder.length - 1) { const [final] = newOrder.splice(finalIndex, 1); newOrder.push(final); } setSteps(newOrder); }; return ( <> {approvalWorkflow.name} | EnCoach {user && (

{approvalWorkflow.name}

{steps.map((step, index) => ( handleDelete(step.key)} /> {step.finalStep && } ))}

)} ); }