diff --git a/app/mission-control/resume/page.tsx b/app/mission-control/resume/page.tsx index b8cf026..d4846fa 100644 --- a/app/mission-control/resume/page.tsx +++ b/app/mission-control/resume/page.tsx @@ -1,520 +1,580 @@ "use client"; -import BackToMC from "@/components/mission-control/BackToMC"; import { useState, useEffect } from "react"; - -interface PersonalInfo { - name: string; - title: string; - email: string; - phone: string; - location: string; - linkedin: string; - website: string; -} +import BackToMC from "@/components/mission-control/BackToMC"; interface Experience { id: string; title: string; company: string; - location: string; - startDate: string; - endDate: string; - bullets: string[]; + period: string; + description: string; } interface Education { id: string; degree: string; school: string; - location: string; - graduationDate: string; - gpa: string; - honors: string; + year: string; } -export default function ResumePage() { +interface Skill { + id: string; + name: string; +} + +export default function ResumeBuilderPage() { const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit"); - const [personal, setPersonal] = useState({ + const [resumeName, setResumeName] = useState("My Resume"); + + // Personal Info + const [personalInfo, setPersonalInfo] = useState({ name: "Your Name", - title: "Your Professional Title", - email: "your.email@email.com", - phone: "+1 (555) 000-0000", - location: "City, State", + title: "Professional Title", + email: "email@example.com", + phone: "+34 XXX XXX XXX", + location: "City, Country", + website: "www.yoursite.com", linkedin: "linkedin.com/in/yourprofile", - website: "yourwebsite.com" + summary: "A brief professional summary..." }); + // Experience const [experiences, setExperiences] = useState([ { id: "1", title: "Job Title", company: "Company Name", - location: "City, State", - startDate: "Jan 2020", - endDate: "Present", - bullets: [ - "Key achievement or responsibility with measurable impact", - "Another accomplishment that demonstrates your skills", - "Additional relevant contribution" - ] + period: "2020 - Present", + description: "Key responsibilities and achievements in this role." } ]); + // Education const [education, setEducation] = useState([ { id: "1", - degree: "Bachelor of Science in Computer Science", + degree: "Degree Name", school: "University Name", - location: "City, State", - graduationDate: "May 2016", - gpa: "3.8/4.0", - honors: "Magna Cum Laude" + year: "2016 - 2020" } ]); - const [skills, setSkills] = useState([ - "JavaScript/TypeScript", "React/Next.js", "Node.js", "Python", - "AWS/Cloud Services", "Database Management", "Agile/Scrum", "Git" + // Skills + const [skills, setSkills] = useState([ + { id: "1", name: "Skill 1" }, + { id: "2", name: "Skill 2" }, + { id: "3", name: "Skill 3" } ]); - const [languages, setLanguages] = useState<{name: string, level: string}[]>([ - { name: "English", level: "Native" }, - { name: "Spanish", level: "Professional" }, - { name: "Arabic", level: "Native" } + const [languages, setLanguages] = useState([ + { id: "1", name: "Language 1", level: "Fluent" }, + { id: "2", name: "Language 2", level: "Native" } ]); - const [certifications, setCertifications] = useState([ - "AWS Solutions Architect", - "Google Cloud Professional" - ]); - - useEffect(() => { - const saved = localStorage.getItem("haitham_resume_v2"); - if (saved) { - try { - const data = JSON.parse(saved); - if (data.personal) setPersonal(data.personal); - if (data.experiences) setExperiences(data.experiences); - if (data.education) setEducation(data.education); - if (data.skills) setSkills(data.skills); - if (data.languages) setLanguages(data.languages); - if (data.certifications) setCertifications(data.certifications); - } catch (e) {} - } - }, []); - - useEffect(() => { - localStorage.setItem("haitham_resume_v2", JSON.stringify({ - personal, experiences, education, skills, languages, certifications - })); - }, [personal, experiences, education, skills, languages, certifications]); + // Versions + const [versions, setVersions] = useState(["Default"]); + const [currentVersion, setCurrentVersion] = useState("Default"); + // CRUD operations const addExperience = () => { setExperiences([...experiences, { id: Date.now().toString(), - title: "", company: "", location: "", startDate: "", endDate: "", bullets: [""] + title: "New Position", + company: "Company", + period: "2023 - Present", + description: "Description..." }]); }; - const updateExperience = (id: string, field: keyof Experience, value: any) => { + 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 addBullet = (id: string) => { - setExperiences(experiences.map(e => - e.id === id ? { ...e, bullets: [...e.bullets, ""] } : e - )); - }; - - const updateBullet = (expId: string, index: number, value: string) => { - setExperiences(experiences.map(e => - e.id === expId ? { ...e, bullets: e.bullets.map((b, i) => i === index ? value : b) } : e - )); - }; - - const removeBullet = (expId: string, index: number) => { - setExperiences(experiences.map(e => - e.id === expId ? { ...e, bullets: e.bullets.filter((_, i) => i !== index) } : e - )); - }; - const addEducation = () => { setEducation([...education, { - id: Date.now().toString(), degree: "", school: "", location: "", - graduationDate: "", gpa: "", honors: "" + id: Date.now().toString(), + degree: "New Degree", + school: "School Name", + year: "2020 - 2024" }]); }; + 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 handlePrint = () => { - setActiveTab("preview"); - setTimeout(() => window.print(), 100); + const addSkill = () => { + setSkills([...skills, { id: Date.now().toString(), name: "New Skill" }]); }; - const inputClass = "w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"; - const labelClass = "block text-slate-400 text-xs mb-1 font-medium"; + 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 saveVersion = () => { + const name = prompt("Enter version name:", `Resume - ${currentVersion}`); + if (name && !versions.includes(name)) { + setVersions([...versions, name]); + setCurrentVersion(name); + alert(`Version "${name}" saved!`); + } + }; + + const loadVersion = (version: string) => { + setCurrentVersion(version); + }; + + const deleteVersion = (version: string) => { + if (versions.length > 1) { + setVersions(versions.filter(v => v !== version)); + if (currentVersion === version) { + setCurrentVersion(versions[0]); + } + } + }; + + const handlePrint = () => { + window.print(); + }; return ( -
- {/* Header */} -
-
-

ЁЯУЭ Professional Resume

-

Edit тАв Preview тАв Download PDF

+
+ + + {/* Toolbar */} +
+
+

ЁЯУД Resume Builder

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

ЁЯСд Personal Information

-
-
- - setPersonal({...personal, name: e.target.value})} className={inputClass} /> -
-
- - setPersonal({...personal, title: e.target.value})} className={inputClass} /> -
-
- - setPersonal({...personal, email: e.target.value})} className={inputClass} /> -
-
- - setPersonal({...personal, phone: e.target.value})} className={inputClass} /> -
-
- - setPersonal({...personal, location: e.target.value})} className={inputClass} /> -
-
- - setPersonal({...personal, linkedin: e.target.value})} className={inputClass} /> -
+
+ {/* 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, website: e.target.value})} + className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" + />
+
+ +