Skip to content

feat: Add PDF export for interview feedback (#315) #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KaranUnique merged 1 commit into from
Jul 13, 2026
Merged

feat: Add PDF export for interview feedback (#315) #331

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 58 additions & 4 deletions frontend/src/pages/InterviewPrep/InterviewPrep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import moment from "moment";
import { AnimatePresence, motion } from "framer-motion";
import { LuCircleAlert, LuListCollapse } from "react-icons/lu";
import { LuCircleAlert, LuListCollapse, LuDownload } from "react-icons/lu";
import html2pdf from "html2pdf.js";
import SpinnerLoader from "../../components/Loader/SpinnerLoader";
import { toast } from "react-hot-toast";
import DashboardLayout from "../../components/Layouts/DashboardLayout";
Expand All @@ -25,6 +26,19 @@ const InterviewPrep = () => {
const [isLoading, setIsLoading] = useState(false);
const [isUpdateLoader, setIsUpdateLoader] = useState(false);

const handleDownloadPdf = () => {
const element = document.getElementById("pdf-report");
if (!element) return;
const opt = {
margin: 10,
filename: 'Interview_Feedback_Report.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf().set(opt).from(element).save();
};

// fetch session data
const fetchSessionDetailsById = async () => {
try {
Expand Down Expand Up @@ -130,9 +144,20 @@ const InterviewPrep = () => {
/>

<div className="container mx-auto pt-6 pb-10 px-4 sm:px-6 md:px-10">
<h2 className="text-lg sm:text-xl md:text-2xl font-semibold text-gray-900">
Interview Q & A
</h2>
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center">
<h2 className="text-lg sm:text-xl md:text-2xl font-semibold text-gray-900 dark:text-white">
Interview Q & A
</h2>
{sessionData?.questions?.length > 0 && (
<button
onClick={handleDownloadPdf}
className="mt-3 sm:mt-0 flex items-center gap-2 bg-indigo-50 dark:bg-indigo-500/10 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-500/20 px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm"
>
<LuDownload size={16} />
Download PDF
</button>
)}
</div>

<div className="grid grid-cols-1 md:grid-cols-12 gap-6 mt-6">
{/* Q&A Section */}
Expand Down Expand Up @@ -198,6 +223,35 @@ const InterviewPrep = () => {
<AIResponsePreview content={explanation?.explanation} />
)}
</Drawer>

{/* Hidden PDF Report Area */}
<div className="absolute left-[-9999px] top-0 w-[800px] bg-white text-black p-10 font-sans" id="pdf-report">
<div className="border-b border-gray-200 pb-4 mb-6">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Interview Feedback Report</h1>
<p className="text-gray-600 text-sm mb-1"><strong>Role:</strong> {sessionData?.role || ""}</p>
<p className="text-gray-600 text-sm mb-1"><strong>Experience:</strong> {sessionData?.experience || "-"} {sessionData?.experience === 1 ? "Year" : "Years"}</p>
<p className="text-gray-600 text-sm mb-1"><strong>Date:</strong> {sessionData?.updatedAt ? moment(sessionData.updatedAt).format("MMMM Do YYYY, h:mm a") : ""}</p>
</div>

<div className="space-y-8">
{sessionData?.questions?.map((q, idx) => (
<div key={idx} className="border border-gray-200 rounded-xl p-5 break-inside-avoid shadow-sm bg-white">
<div className="flex gap-3 mb-4 border-b border-gray-100 pb-3">
<div className="w-8 h-8 rounded-lg bg-violet-100 text-violet-700 font-bold flex items-center justify-center shrink-0">
Q{idx + 1}
</div>
<h3 className="text-lg font-bold text-gray-900 mt-1">{q.question}</h3>
</div>
<div>
<h4 className="text-sm font-bold text-gray-700 mb-2 uppercase tracking-wide">Answer</h4>
<div className="prose prose-sm max-w-none text-gray-800">
<AIResponsePreview content={q.answer} />
</div>
</div>
</div>
))}
</div>
</div>
</div>
</DashboardLayout>
);
Expand Down
Loading