From 1052dac49cb8f22f4103ae79587bb10075c3bbd9 Mon Sep 17 00:00:00 2001
From: Horus AI <horus@hostpioneers.com>
Date: Tue, 24 Mar 2026 00:36:39 +0100
Subject: [PATCH] fix(resume): simplified React code

---
 app/mission-control/resume/page.tsx | 188 ++++++++++++----------------
 1 file changed, 81 insertions(+), 107 deletions(-)

diff --git a/app/mission-control/resume/page.tsx b/app/mission-control/resume/page.tsx
index c354592..670d38a 100644
--- a/app/mission-control/resume/page.tsx
+++ b/app/mission-control/resume/page.tsx
@@ -1,31 +1,23 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import BackToMC from "@/components/mission-control/BackToMC";
 
 export default function ResumeBuilderPage() {
-  const [isClient, setIsClient] = useState(false);
-
   useEffect(() => {
-    setIsClient(true);
+    // Load the resume script after component mounts
+    const script = document.createElement("script");
+    script.src = "/resume-builder.js";
+    script.async = true;
+    document.body.appendChild(script);
   }, []);
 
-  if (!isClient) {
-    return (
-      <div className="min-h-screen bg-slate-950 text-white">
-        <BackToMC />
-        <div className="p-8 text-center">
-          <p className="text-slate-400">Loading Resume Builder...</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="min-h-screen bg-slate-200 text-white">
+    <div className="min-h-screen bg-slate-200">
       <BackToMC />
       
-      <style jsx global>{`
+      {/* Include the styles inline */}
+      <style>{`
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
         
         :root {
@@ -34,14 +26,6 @@ export default function ResumeBuilderPage() {
           --accent-blue: #2563eb;
         }
 
-        body { 
-          font-family: 'Roboto', sans-serif;
-          background-color: #e5e7eb;
-          -webkit-print-color-adjust: exact;
-          margin: 0;
-          padding: 0;
-        }
-
         .resume-page {
           width: 850px;
           min-height: 1100px;
@@ -171,17 +155,17 @@ export default function ResumeBuilderPage() {
       `}</style>
 
       {/* Toolbar */}
-      <div className="sticky top-0 z-50 bg-slate-800 border-b border-slate-700 px-6 py-3 flex items-center justify-between">
+      <div className="sticky top-0 z-50 bg-gray-800 px-6 py-3 flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <h1 className="font-bold text-lg text-blue-400">Haitham's Resume Manager</h1>
+          <h1 className="font-bold text-lg text-blue-400">Haitham&apos;s Resume Manager</h1>
           <select id="resumeSelect" className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 outline-none">
           </select>
         </div>
         <div className="flex gap-2">
-          <button onClick={createNewProfile} className="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded text-sm font-medium transition">New Version</button>
-          <button onClick={saveCurrentProfile} className="bg-green-600 hover:bg-green-700 px-4 py-1 rounded text-sm font-medium transition">Save Changes</button>
-          <button onClick={() => window.print()} className="bg-gray-600 hover:bg-gray-700 px-4 py-1 rounded text-sm font-medium transition">Print to PDF</button>
-          <button onClick={deleteProfile} className="bg-red-600 hover:bg-red-700 px-4 py-1 rounded text-sm font-medium transition">Delete</button>
+          <button id="btnNew" className="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded text-sm font-medium transition">New Version</button>
+          <button id="btnSave" className="bg-green-600 hover:bg-green-700 px-4 py-1 rounded text-sm font-medium transition">Save Changes</button>
+          <button id="btnPrint" className="bg-gray-600 hover:bg-gray-700 px-4 py-1 rounded text-sm font-medium transition">Print to PDF</button>
+          <button id="btnDelete" className="bg-red-600 hover:bg-red-700 px-4 py-1 rounded text-sm font-medium transition">Delete</button>
         </div>
       </div>
 
@@ -189,10 +173,10 @@ export default function ResumeBuilderPage() {
       <div className="resume-page mt-20">
         {/* Sidebar */}
         <div className="sidebar">
-          <div className="circle-frame" onClick={() => document.getElementById('photoInput')?.click()}>
+          <div className="circle-frame" id="photoFrame">
             <img id="userPhoto" src="Resume.jpg" alt="Haitham Khalifa" />
             <div className="photo-edit-overlay no-print">EDIT PHOTO</div>
-            <input type="file" id="photoInput" className="hidden" accept="image/*" onChange={handlePhotoUpload} />
+            <input type="file" id="photoInput" className="hidden" accept="image/*" />
           </div>
 
           <h1 id="userName" contentEditable suppressContentEditableWarning className="text-2xl font-black text-center text-gray-900 mb-8 tracking-tighter uppercase leading-none">HAITHAM KHALIFA</h1>
@@ -337,49 +321,53 @@ export default function ResumeBuilderPage() {
         </div>
       </div>
 
+      {/* JavaScript */}
       <script dangerouslySetInnerHTML={{ __html: `
-        // Data Structure
         let resumes = JSON.parse(localStorage.getItem('haitham_resumes_v2') || '{}');
         let currentProfileName = localStorage.getItem('haitham_current_profile_v2') || 'Main Resume';
 
-        const initialContent = {
-          name: "HAITHAM KHALIFA",
-          photo: "Resume.jpg",
-          phone: "+34 614 821 331",
-          email: "Haitham@Khalifa.se",
-          linkedin: "linkedin.com/in/haithamekhalifa/",
-          location: "Málaga, Spain",
-          about: document.getElementById('aboutMe')?.innerText || '',
-          education: document.getElementById('educationList')?.innerHTML || '',
-          skills: document.getElementById('skillsList')?.innerHTML || '',
-          language: document.getElementById('languageList')?.innerHTML || '',
-          experience: document.getElementById('experienceContainer')?.innerHTML || ''
-        };
+        const getEl = (id) => document.getElementById(id);
 
-        function init() {
+        const getInitialContent = () => ({
+          name: getEl('userName')?.innerText || '',
+          photo: getEl('userPhoto')?.src || '',
+          phone: getEl('userPhone')?.innerText || '',
+          email: getEl('userEmail')?.innerText || '',
+          linkedin: getEl('userLinkedin')?.innerText || '',
+          location: getEl('userLocation')?.innerText || '',
+          about: getEl('aboutMe')?.innerText || '',
+          education: getEl('educationList')?.innerHTML || '',
+          skills: getEl('skillsList')?.innerHTML || '',
+          language: getEl('languageList')?.innerHTML || '',
+          experience: getEl('experienceContainer')?.innerHTML || ''
+        });
+
+        const init = () => {
           if (Object.keys(resumes).length === 0) {
-            resumes['Main Resume'] = { ...initialContent };
+            resumes['Main Resume'] = getInitialContent();
             saveToDisk();
           }
           updateSelect();
           loadProfile(currentProfileName);
-        }
+        };
 
-        function handlePhotoUpload(input) {
+        const handlePhotoUpload = (input) => {
           const file = input.files[0];
           if (file) {
             const reader = new FileReader();
-            reader.onload = function(e) {
-              const base64Image = e.target.result;
-              document.getElementById('userPhoto').src = base64Image;
+            reader.onload = (e) => {
+              getEl('userPhoto').src = e.target.result;
               saveCurrentProfile();
             };
             reader.readAsDataURL(file);
           }
-        }
+        };
 
-        function updateSelect() {
-          const select = document.getElementById('resumeSelect');
+        getEl('photoInput')?.addEventListener('change', (e) => handlePhotoUpload(e.target));
+        getEl('photoFrame')?.addEventListener('click', () => getEl('photoInput')?.click());
+
+        const updateSelect = () => {
+          const select = getEl('resumeSelect');
           if (!select) return;
           select.innerHTML = '';
           Object.keys(resumes).forEach(name => {
@@ -389,47 +377,35 @@ export default function ResumeBuilderPage() {
             if (name === currentProfileName) opt.selected = true;
             select.appendChild(opt);
           });
-        }
+        };
 
-        function loadProfile(name) {
+        const loadProfile = (name) => {
           const p = resumes[name] || resumes[Object.keys(resumes)[0]];
           if (!p) return;
           currentProfileName = name;
           localStorage.setItem('haitham_current_profile_v2', name);
 
-          document.getElementById('userName').innerText = p.name || '';
-          document.getElementById('userPhoto').src = p.photo || "Resume.jpg";
-          document.getElementById('userPhone').innerText = p.phone || '';
-          document.getElementById('userEmail').innerText = p.email || '';
-          document.getElementById('userLinkedin').innerText = p.linkedin || '';
-          document.getElementById('userLocation').innerText = p.location || '';
-          document.getElementById('aboutMe').innerText = p.about || '';
-          document.getElementById('educationList').innerHTML = p.education || '';
-          document.getElementById('skillsList').innerHTML = p.skills || '';
-          document.getElementById('languageList').innerHTML = p.language || '';
-          document.getElementById('experienceContainer').innerHTML = p.experience || '';
-        }
+          getEl('userName').innerText = p.name || '';
+          getEl('userPhoto').src = p.photo || 'Resume.jpg';
+          getEl('userPhone').innerText = p.phone || '';
+          getEl('userEmail').innerText = p.email || '';
+          getEl('userLinkedin').innerText = p.linkedin || '';
+          getEl('userLocation').innerText = p.location || '';
+          getEl('aboutMe').innerText = p.about || '';
+          getEl('educationList').innerHTML = p.education || '';
+          getEl('skillsList').innerHTML = p.skills || '';
+          getEl('languageList').innerHTML = p.language || '';
+          getEl('experienceContainer').innerHTML = p.experience || '';
+        };
 
-        function saveCurrentProfile() {
-          resumes[currentProfileName] = {
-            name: document.getElementById('userName')?.innerText || '',
-            photo: document.getElementById('userPhoto')?.src || '',
-            phone: document.getElementById('userPhone')?.innerText || '',
-            email: document.getElementById('userEmail')?.innerText || '',
-            linkedin: document.getElementById('userLinkedin')?.innerText || '',
-            location: document.getElementById('userLocation')?.innerText || '',
-            about: document.getElementById('aboutMe')?.innerText || '',
-            education: document.getElementById('educationList')?.innerHTML || '',
-            skills: document.getElementById('skillsList')?.innerHTML || '',
-            language: document.getElementById('languageList')?.innerHTML || '',
-            experience: document.getElementById('experienceContainer')?.innerHTML || ''
-          };
+        const saveCurrentProfile = () => {
+          resumes[currentProfileName] = getInitialContent();
           saveToDisk();
           showStatus('Changes Saved');
-        }
+        };
 
-        function createNewProfile() {
-          const name = prompt("Name this version (e.g., Geely IT Manager):");
+        const createNewProfile = () => {
+          const name = prompt('Name this version (e.g., Geely IT Manager):');
           if (name && !resumes[name]) {
             resumes[name] = { ...resumes[currentProfileName] };
             currentProfileName = name;
@@ -437,12 +413,12 @@ export default function ResumeBuilderPage() {
             updateSelect();
             loadProfile(name);
           } else if (resumes[name]) {
-            alert("This name already exists.");
+            alert('This name already exists.');
           }
-        }
+        };
 
-        function deleteProfile() {
-          if (Object.keys(resumes).length <= 1) return alert("You need at least one profile.");
+        const deleteProfile = () => {
+          if (Object.keys(resumes).length <= 1) return alert('You need at least one profile.');
           if (confirm('Delete "' + currentProfileName + '"?')) {
             delete resumes[currentProfileName];
             currentProfileName = Object.keys(resumes)[0];
@@ -450,14 +426,14 @@ export default function ResumeBuilderPage() {
             updateSelect();
             loadProfile(currentProfileName);
           }
-        }
+        };
 
-        function saveToDisk() {
+        const saveToDisk = () => {
           localStorage.setItem('haitham_resumes_v2', JSON.stringify(resumes));
-        }
+        };
 
-        function showStatus(msg) {
-          const btn = document.querySelector('button[onclick="saveCurrentProfile()"]');
+        const showStatus = (msg) => {
+          const btn = getEl('btnSave');
           if (!btn) return;
           const original = btn.textContent;
           btn.textContent = msg;
@@ -466,17 +442,15 @@ export default function ResumeBuilderPage() {
             btn.textContent = original;
             btn.style.backgroundColor = '';
           }, 2000);
-        }
+        };
 
-        document.addEventListener('DOMContentLoaded', function() {
-          const select = document.getElementById('resumeSelect');
-          if (select) {
-            select.addEventListener('change', (e) => {
-              loadProfile(e.target.value);
-            });
-          }
-          init();
-        });
+        getEl('btnNew')?.addEventListener('click', createNewProfile);
+        getEl('btnSave')?.addEventListener('click', saveCurrentProfile);
+        getEl('btnDelete')?.addEventListener('click', deleteProfile);
+        getEl('btnPrint')?.addEventListener('click', () => window.print());
+        getEl('resumeSelect')?.addEventListener('change', (e) => loadProfile(e.target.value));
+
+        document.addEventListener('DOMContentLoaded', init);
       `}} />
     </div>
   );