import React, { useState, useRef, useEffect } from 'react';
import { FileText, ArrowLeft, Check, Upload, Image as ImageIcon, X, Download, Printer } from 'lucide-react';
// --- 1. DEFAULT LOGO ---
const DefaultVectorLogo = () => (
);
export default function App() {
const [view, setView] = useState('edit'); // 'edit', 'preview'
const fileInputRef = useRef(null);
const [customLogo, setCustomLogo] = useState(null);
const [isGenerating, setIsGenerating] = useState(false);
// Load html2pdf script dynamically
useEffect(() => {
const script = document.createElement('script');
script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
const [formData, setFormData] = useState({
header: 'Assignment',
collegeName: 'Techno College of Engineering Agartala',
courseTitle: 'Transportation Engineering Lab',
courseCode: 'PC CE 606',
profName: 'Mr. Uday Sankar Debbarma',
profDesg: 'Lecturer',
profDept: 'Department of Electrical Engineering',
profCollege: 'Techno College of Engineering Agartala',
studentName: 'Gg',
studentID: 'H',
tuRoll: 'Gg',
tuReg: 'H',
program: 'B.Tech. (Civil Engineering)',
semester: '6th',
session: '2025-26'
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setCustomLogo(reader.result);
};
reader.readAsDataURL(file);
}
};
// --- METHOD 1: Window Print (High Quality Text) ---
const handlePrint = () => {
window.print();
};
// --- METHOD 2: Direct Download (html2pdf) ---
const handleDirectDownload = () => {
setIsGenerating(true);
const element = document.getElementById('print-layer');
// Temporarily make it visible for the capture logic
element.style.display = 'flex';
element.style.position = 'fixed';
element.style.top = '0';
element.style.left = '0';
element.style.zIndex = '9999';
element.style.background = 'white';
const opt = {
margin: 0,
filename: `${formData.studentName}_CoverPage.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
if (window.html2pdf) {
window.html2pdf().set(opt).from(element).save().then(() => {
// Reset style after download
element.style.display = '';
element.style.position = '';
element.style.top = '';
element.style.left = '';
element.style.zIndex = '';
setIsGenerating(false);
});
} else {
alert("PDF Generator is loading... please try again in 2 seconds.");
setIsGenerating(false);
// Reset style
element.style.display = '';
}
};
// --- VIEW 1: EDITOR ---
if (view === 'edit') {
return (
Enter Details
{/* LOGO UPLOAD */}
{customLogo && (
)}
{!customLogo ? (
) : (
Logo Uploaded!
)}
{/* FIELDS */}
{customLogo && (
)}
Course Info
Submitted To
Submitted By
Front Page Preview
{formData.header}
{formData.collegeName}
Course Title: {formData.courseTitle}
Course Code: {formData.courseCode}
{customLogo ? (
<>
) : (
Custom Logo Loaded
(Visible in Download)
[ Official Logo will appear here in the final PDF ]
)}Submitted To
{formData.profName}
{formData.profDesg}, {formData.profDept}
Submitted By
{formData.studentName}
Roll: {formData.tuRoll}
Reg: {formData.tuReg}
ID: {formData.studentID}
Sem: {formData.semester}
{/* OPTION 1: DIRECT DOWNLOAD */}
{/* OPTION 2: PRINT DIALOG */}
{formData.header}
{formData.collegeName}
Course Title: {formData.courseTitle}
Course Code: {formData.courseCode}
{customLogo ? (
) : (
Submitted to
{formData.profName}
{formData.profDesg}
{formData.profDept}
{formData.profCollege}
Submitted by
{formData.studentName}
Student ID: {formData.studentID}
TU Roll No.: {formData.tuRoll}
TU Registration No.: {formData.tuReg}
Program Level & Department: {formData.program}
Semester: {formData.semester}
Session: {formData.session}
Date of Submission: {new Date().toLocaleDateString()}
Comments
Post a Comment