fix(mission-control): restore Resume Builder and PDF Viewer implementations

- Resume Builder: Full resume editing (personal, experience, education, skills)
- PDF Viewer: Upload or load from URL
- Both restored from git history
This commit is contained in:
2026-03-23 20:28:54 +01:00
parent fd9cbcb8a5
commit 626a5e10ba
2 changed files with 654 additions and 19 deletions
+145 -10
View File
@@ -1,20 +1,155 @@
"use client";
import BackToMC from "@/components/mission-control/BackToMC";
import { useState } from "react";
export default function PdfViewerPage() {
const [pdfUrl, setPdfUrl] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [pdfBase64, setPdfBase64] = useState<string | null>(null);
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
if (file.type !== "application/pdf") {
setError("Please select a PDF file");
return;
}
setLoading(true);
setError(null);
// Read file as base64
const reader = new FileReader();
reader.onload = (event) => {
const base64 = event.target?.result as string;
setPdfBase64(base64);
setPdfUrl(URL.createObjectURL(file));
setLoading(false);
};
reader.onerror = () => {
setError("Failed to read file");
setLoading(false);
};
reader.readAsDataURL(file);
};
const handleUrlSubmit = async () => {
const input = prompt("Enter PDF URL:");
if (!input) return;
setLoading(true);
setError(null);
try {
new URL(input);
setPdfUrl(input);
setPdfBase64(null);
} catch {
setError("Invalid URL");
}
setLoading(false);
};
return (
<div className="min-h-screen bg-slate-950 text-white">
<BackToMC />
<div className="p-6">
<div className="mb-6">
<h1 className="text-3xl font-bold text-white mb-2">📰 PDF Viewer</h1>
<p className="text-slate-400">Loading...</p>
</div>
<div className="bg-slate-800 rounded-xl p-8 border border-slate-700">
<p className="text-slate-400">Loading...</p>
<div className="min-h-screen bg-slate-950 text-white flex flex-col">
{/* Header */}
<div className="bg-slate-900 border-b border-slate-800 px-6 py-4 flex-shrink-0">
<h1 className="text-2xl font-bold text-white">📄 PDF Viewer</h1>
<p className="text-slate-400 text-sm">View and analyze PDF documents</p>
</div>
{/* Toolbar */}
<div className="bg-slate-900/50 border-b border-slate-800 px-6 py-3 flex-shrink-0">
<div className="flex items-center gap-4">
<label className="cursor-pointer bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
📁 Upload PDF
<input
type="file"
accept="application/pdf"
onChange={handleFileUpload}
className="hidden"
/>
</label>
<button
onClick={handleUrlSubmit}
className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
>
🔗 Load from URL
</button>
{pdfUrl && (
<a
href={pdfUrl}
target="_blank"
rel="noopener noreferrer"
className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
>
Open Original
</a>
)}
</div>
</div>
{/* Content */}
<div className="flex-1 overflow-hidden flex flex-col">
{error && (
<div className="bg-red-900/50 border border-red-700 rounded-lg p-4 m-4 max-w-md">
<h3 className="text-red-400 font-bold mb-2">Error</h3>
<p className="text-red-300">{error}</p>
<button
onClick={() => setError(null)}
className="mt-2 bg-red-700 hover:bg-red-600 text-white px-4 py-1 rounded text-sm"
>
Dismiss
</button>
</div>
)}
{!pdfUrl && !loading && (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="text-8xl mb-6 opacity-50">📄</div>
<h2 className="text-xl font-bold text-white mb-2">No PDF Loaded</h2>
<p className="text-slate-400 mb-6">Upload a PDF or enter a URL to view it</p>
<div className="text-slate-500 text-sm space-y-1">
<p> Upload your resume to let Horus analyze it</p>
<p> Supports PDF files up to 50MB</p>
<p> Or load from any public PDF URL</p>
</div>
</div>
</div>
)}
{loading && (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin text-6xl mb-4"></div>
<p className="text-slate-400">Loading PDF...</p>
</div>
</div>
)}
{pdfUrl && !loading && (
<div className="flex-1 overflow-auto bg-slate-800 p-4 flex justify-center">
<iframe
src={pdfUrl}
className="w-full h-full min-h-[600px] bg-white shadow-2xl rounded"
title="PDF Viewer"
/>
</div>
)}
</div>
{/* Instructions */}
<div className="bg-slate-900/50 border-t border-slate-800 px-6 py-2 flex-shrink-0">
<p className="text-slate-500 text-xs">
💡 Tip: Upload your resume PDF and Horus can analyze the design to recreate it
</p>
</div>
</div>
);
}