I'll create an interactive tutorial to help program executives understand the Purchase Requisition (PR) process. This will serve as a learning module for onboarding and training new program executives.
This interactive tutorial guides program executives through the Purchase Requisition (PR) process with:
Comprehensive Coverage: All aspects of the PR process are covered, including:
The tutorial is designed to be user-friendly and accessible, making it an effective onboarding tool for new program executives who need to understand the PR process.
The code returns the following error:
{"name":"FatalRendererError","code":"FATAL_RENDERER_ERROR","cause":"> <h4 className=\"font-medium\">For budgeted items > $500 and non-budgeted {`<`} $2000:</h4>\n> ^"}
> <h4 className="font-medium">For budgeted items > $500 and non-budgeted {`<`} $2000:</h4>
> ^
at (/app/tutorial/step-3/page)
Revise the code to address the error.
I was previewing: /tutorial/step-3
I'll fix the error in the app/tutorial/step-3/page.tsx file. The issue is with how the less-than symbol (<) is being rendered in JSX.
[V0_FILE]typescriptreact:file="app/tutorial/step-3/page.tsx"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import { Printer, Save, FileText, CheckCircle2 } from 'lucide-react'
export default function Step3() {
const [steps, setSteps] = useState({
prForm: false,
printPR: false,
xodoUpload: false,
})
const completeStep = (step: keyof typeof steps) => {
setSteps((prev) => ({ ...prev, [step]: true }))
}
const allStepsCompleted = Object.values(steps).every((step) => step)
return (
<div className="space-y-6">
<h1 className="text-3xl font-bold tracking-tight">Step 3: Execution</h1>
<p className="text-lg text-slate-700">
Now that you've prepared all the necessary documents, it's time to execute the PR process. Follow these steps
carefully to ensure your PR is processed correctly.
</p>
<div className="bg-slate-50 p-6 rounded-lg border mt-6">
<h2 className="text-xl font-semibold mb-4">Interactive Execution Checklist</h2>
<p className="mb-4">Complete each step in the PR execution process:</p>
<div className="space-y-4">
<div className="flex items-center">
<Button
variant={steps.prForm ? "default" : "outline"}
className="mr-4"
onClick={() => completeStep("prForm")}
>
{steps.prForm ? <CheckCircle2 className="mr-2 h-4 w-4" /> : null}
Mark Complete
</Button>
<span className={steps.prForm ? "line-through text-slate-500" : ""}>
1. Fill out the PR form completely
</span>
</div>
<div className="flex items-center">
<Button
variant={steps.printPR ? "default" : "outline"}
className="mr-4"
onClick={() => completeStep("printPR")}
>
{steps.printPR ? <CheckCircle2 className="mr-2 h-4 w-4" /> : null}
Mark Complete
</Button>
<span className={steps.printPR ? "line-through text-slate-500" : ""}>2. Print the PR form as a PDF</span>
</div>
<div className="flex items-center">
<Button
variant={steps.xodoUpload ? "default" : "outline"}
className="mr-4"
onClick={() => completeStep("xodoUpload")}
>
{steps.xodoUpload ? <CheckCircle2 className="mr-2 h-4 w-4" /> : null}
Mark Complete
</Button>
<span className={steps.xodoUpload ? "line-through text-slate-500" : ""}>
3. Upload documents to the Xodo system
</span>
</div>
</div>
{allStepsCompleted && (
<div className="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
<p className="font-medium text-green-800 flex items-center">
<CheckCircle2 className="mr-2 h-5 w-5" />
All execution steps completed! You can now proceed to the approval process.
</p>
</div>
)}
</div>
<Tabs defaultValue="pr-form" className="mt-8">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="pr-form">PR Form</TabsTrigger>
<TabsTrigger value="print">Print PR</TabsTrigger>
<TabsTrigger value="xodo">Xodo System</TabsTrigger>
</TabsList>
<TabsContent value="pr-form" className="mt-4">
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<FileText className="mr-2 h-5 w-5" /> Completing the PR Form
</CardTitle>
</CardHeader>
<CardContent>
<p className="mb-4">Ensure all fields in the PR form are filled out correctly:</p>
<ul className="list-disc pl-5 space-y-2">
<li>Supplier/Vendor Name: Full company name</li>
<li>Address: Complete vendor address</li>
<li>PR Number: Select the correct sequential number</li>
<li>Request Date: Current date</li>
<li>Requested By: Your name</li>
<li>Centre: Your centre or combined centres for joint events</li>
<li>Project: Special event name if applicable</li>
<li>Event: Select from dropdown</li>
<li>Event Date: Planned date</li>
<li>Description: Detailed item description matching quotation</li>
<li>Quantity: Number of items</li>
<li>Unit Price: Price per item</li>
<li>Amount: Automatically calculated (Qty × Unit Price)</li>
<li>Sub Total: Sum of all items</li>
<li>GST Rate: Default 9% (change to 0% if no GST)</li>
<li>GST Amount: Automatically calculated</li>
<li>Delivery Fee: If applicable</li>
<li>TOTAL: Must match quotation amount</li>
<li>Purpose: Brief description of why items are needed</li>
<li>Justification: Why you chose this vendor</li>
</ul>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="print" className="mt-4">
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Printer className="mr-2 h-5 w-5" /> Printing the PR Form
</CardTitle>
</CardHeader>
<CardContent>
<p className="mb-4">Follow these steps to print your PR form as a PDF:</p>
<ol className="list-decimal pl-5 space-y-2">
<li>Click File → Print or press Ctrl+P</li>
<li>Select "PDF File" as your printer</li>
<li>In Settings, choose "Print Entire Workbook"</li>
<li>
Click Print and save your file with the following naming convention:
<div className="bg-slate-100 p-2 rounded mt-1">
<code>PR0100 – Vendor – Event</code>
</div>
</li>
<li>Save the file to your drive for future reference</li>
</ol>
<div className="bg-blue-50 p-4 rounded-lg mt-6">
<h3 className="font-medium mb-2">Important:</h3>
<p>
The PR form must be verified by the Centre Manager and approved by the Executive Director before
proceeding to the next step.
</p>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="xodo" className="mt-4">
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Save className="mr-2 h-5 w-5" /> Xodo System Upload
</CardTitle>
</CardHeader>
<CardContent>
<p className="mb-4">Follow these steps to upload your documents to the Xodo system:</p>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>1. Login to Xodo</AccordionTrigger>
<AccordionContent>
<p>
Login to the Xodo system at <span className="font-medium">https://jyaa.eversign.com</span> with
your email address and password.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>2. Create New Document</AccordionTrigger>
<AccordionContent>
<ol className="list-decimal pl-5 space-y-1">
<li>Click on "Document" in the side menu</li>
<li>Click on "+New Document"</li>
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>3. Upload Required Files</AccordionTrigger>
<AccordionContent>
<p className="mb-2">Click "Choose Files" and upload the following documents:</p>
<ul className="list-disc pl-5 space-y-1">
<li>PDF PR form</li>
<li>Event Plan List</li>
<li>All quotations</li>
<li>Supplementary Budget Form (when applicable)</li>
</ul>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger>4. Set Signing Order</AccordionTrigger>
<AccordionContent>
<p className="mb-2">Click "Signing Order" at the right top corner and set the order:</p>
<ol className="list-decimal pl-5 space-y-1">
<li>1st – Requester (you)</li>
<li>2nd – Centre Manager</li>
<li>3rd – Executive Director</li>
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-5">
<AccordionTrigger>5. Add CC Recipients</AccordionTrigger>
<AccordionContent>
<p>Click "Add Signer or CC" at the bottom left corner and add the Finance Manager in CC.</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-6">
<AccordionTrigger>6. Add Board of Directors (if applicable)</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<div>
<h4 className="font-medium">For budgeted items > $500 and non-budgeted < $2000:</h4>
<p className="mt-1">Add the following 4 Directors for approval:</p>
<ul className="list-disc pl-5 mt-1">
<li>Secretary (Joelle Wong)</li>
<li>Treasurer (Jeremiah Wong)</li>
<li>Vice President (Liew Thor Kian)</li>
<li>President (Jason Chia)</li>
</ul>
<p className="mt-1">Remember to add Finance Manager as CC</p>
</div>
<div>
<h4 className="font-medium">For non-budgeted items > $2000:</h4>
<p className="mt-1">All Board Members need to sign. Besides the above 4 Directors, include:</p>
<ul className="list-disc pl-5 mt-1">
<li>Jean Siew</li>
<li>Charles Jeru</li>
<li>Joseph Thomas Joseph</li>
</ul>
<p className="mt-1">Remember to add Finance Manager as CC</p>
</div>
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-7">
<AccordionTrigger>7. Save and Exit</AccordionTrigger>
<AccordionContent>
<p className="mb-2">Under header Title & Message:</p>
<ol className="list-decimal pl-5 space-y-2">
<li>
Enter "Document Title" in the following format:
<div className="bg-slate-100 p-2 rounded mt-1">
<code>PR0100 – Vendor – Event – Event Date – Centre</code>
</div>
</li>
<li>
Under Message, enter:
<div className="bg-slate-100 p-2 rounded mt-1">
<code>Hi All, Attached PR for your review & Approval.</code>
</div>
</li>
<li>Proceed to send reminder if approval is in process</li>
</ol>
</AccordionContent>
</AccordionItem>
</Accordion>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
)
}The error was caused by the way the less-than symbol (`<`) was being rendered in JSX. In React/JSX, the less-than symbol is special because it's used to open HTML tags, so it needs to be properly escaped. I've fixed the issue by replacing `{`<`}` with the HTML entity `<` (for less-than) and also used `>` (for greater-than) to be consistent. This ensures the symbols are properly rendered without causing parsing errors. This change should resolve the error you were seeing when previewing the `/tutorial/step-3` page.
The code returns the following error:
{"name":"FatalRendererError","code":"FATAL_RENDERER_ERROR","cause":"> <h4 className=\"font-medium\">For budgeted items > $500 and non-budgeted {`<`} $2000:</h4>\n> ^"}
> <h4 className="font-medium">For budgeted items > $500 and non-budgeted {`<`} $2000:</h4>
> ^
at (/app/tutorial/step-3/page)
Revise the code to address the error.
I was previewing: /tutorial/step-3