"use client"; import { useState } from "react"; import BackToMC from "@/components/mission-control/BackToMC"; interface Experience { id: string; title: string; company: string; period: string; location: string; description: string; } interface Education { id: string; degree: string; school: string; year: string; location: string; } interface Skill { id: string; name: string; } export default function ResumeBuilderPage() { const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit"); // Personal Info const [personalInfo, setPersonalInfo] = useState({ name: "HAITHAM KHALIFA", title: "Senior Full-Stack Developer & Entrepreneur", email: "Haitham@Khalifa.se", phone: "+34 614 821 331", location: "Málaga, Spain", linkedin: "linkedin.com/in/haithamekhalifa/", website: "haithamkhalifa.com", summary: "A results-oriented leader with 15+ years of experience in driving e-commerce growth, optimizing online platforms, and implementing successful digital marketing strategies. Proven ability to increase online sales, improve customer engagement, and manage cross-functional teams to achieve business objectives." }); // Experience const [experiences, setExperiences] = useState([ { id: "1", title: "Product Owner & IT Consultant", company: "Protein.com", period: "2020-2025", location: "Sweden, Malmö", description: "• Managed product backlog to drive e-commerce sales.\n• Developed/executed SEO strategies (+20% organic traffic).\n• Implemented/managed MarTech for e-commerce performance.\n• Drove Agile practices.\n• Utilized data analytics to optimize e-commerce growth.\n• Managed product data feeds." } ]); // Education const [education, setEducation] = useState([ { id: "1", degree: "Intensive Software Development Academy", school: "Lund University", year: "2019", location: "Sweden, Lund" }, { id: "2", degree: "Bachelor of Computer Science", school: "Modern Academy Maadi", year: "2001 - 2006", location: "Egypt, Cairo" } ]); // Skills const [skills, setSkills] = useState([ { id: "1", name: "E-commerce Strategy" }, { id: "2", name: "Digital Marketing" }, { id: "3", name: "SEO/SEM" }, { id: "4", name: "Product Ownership" }, { id: "5", name: "Team Leadership" } ]); // Languages const [languages, setLanguages] = useState([ { id: "1", name: "Arabic" }, { id: "2", name: "English" }, { id: "3", name: "Swedish" } ]); // Versions const [versions, setVersions] = useState(["Default"]); const [currentVersion, setCurrentVersion] = useState("Default"); // CRUD operations const addExperience = () => { setExperiences([...experiences, { id: Date.now().toString(), title: "New Position", company: "Company", period: "2023-Present", location: "City, Country", description: "• Key responsibility.\n• Achievement." }]); }; const removeExperience = (id: string) => { setExperiences(experiences.filter(e => e.id !== id)); }; const updateExperience = (id: string, field: keyof Experience, value: string) => { setExperiences(experiences.map(e => e.id === id ? { ...e, [field]: value } : e)); }; const addEducation = () => { setEducation([...education, { id: Date.now().toString(), degree: "New Degree", school: "University", year: "2020 - 2024", location: "City, Country" }]); }; const removeEducation = (id: string) => { setEducation(education.filter(e => e.id !== id)); }; const updateEducation = (id: string, field: keyof Education, value: string) => { setEducation(education.map(e => e.id === id ? { ...e, [field]: value } : e)); }; const addSkill = () => { setSkills([...skills, { id: Date.now().toString(), name: "New Skill" }]); }; const removeSkill = (id: string) => { setSkills(skills.filter(s => s.id !== id)); }; const updateSkill = (id: string, name: string) => { setSkills(skills.map(s => s.id === id ? { ...s, name } : s)); }; const addLanguage = () => { setLanguages([...languages, { id: Date.now().toString(), name: "New Language" }]); }; const removeLanguage = (id: string) => { setLanguages(languages.filter(l => l.id !== id)); }; const updateLanguage = (id: string, name: string) => { setLanguages(languages.map(l => l.id === id ? { ...l, name } : l)); }; const saveVersion = () => { const name = prompt("Enter version name:", `Resume - ${currentVersion}`); if (name && !versions.includes(name)) { setVersions([...versions, name]); setCurrentVersion(name); } }; const loadVersion = (version: string) => { setCurrentVersion(version); }; const handlePrint = () => { window.print(); }; return (
{/* Toolbar */}

Haitham's Resume Manager

{activeTab === "edit" ? (
{/* Personal Info */}

👤 Personal Information

setPersonalInfo({...personalInfo, name: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
setPersonalInfo({...personalInfo, title: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
setPersonalInfo({...personalInfo, email: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
setPersonalInfo({...personalInfo, phone: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
setPersonalInfo({...personalInfo, location: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
setPersonalInfo({...personalInfo, linkedin: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />