Feature: Resume Completion Progress bar

package.json

@@ -21,7 +21,7 @@
     "autoprefixer": "10.4.14",
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.4",
-    "next": "13.4.4",
+    "next": "^13.4.4",
     "pdfjs": "^2.5.0",
     "pdfjs-dist": "^3.7.107",
     "postcss": "8.4.24",

src/app/components/ResumeForm/ProjectsForm.tsx

@@ -66,4 +66,4 @@ export const ProjectsForm = () => {
       })}
     </Form>
   );
-};
+};

src/app/components/ResumeForm/index.tsx

@@ -6,6 +6,15 @@ import {
   useSetInitialStore,
 } from "lib/redux/hooks";
 import { ShowForm, selectFormsOrder } from "lib/redux/settingsSlice";
+
+// ✅ ADD THIS IMPORT
+import {
+  selectProfile,
+  selectEducations,
+  selectSkills,
+  selectProjects,
+} from "lib/redux/resumeSlice";
+
 import { ProfileForm } from "components/ResumeForm/ProfileForm";
 import { WorkExperiencesForm } from "components/ResumeForm/WorkExperiencesForm";
 import { EducationsForm } from "components/ResumeForm/EducationsForm";
@@ -29,6 +38,26 @@ export const ResumeForm = () => {
   useSaveStateToLocalStorageOnChange();
 
   const formsOrder = useAppSelector(selectFormsOrder);
+
+  // ✅ ADD THESE
+  const profile = useAppSelector(selectProfile);
+  const educations = useAppSelector(selectEducations);
+  const skills = useAppSelector(selectSkills);
+  const projects = useAppSelector(selectProjects);
+
+  // ✅ PROGRESS LOGIC
+  let total = 0;
+  let filled = 0;
+
+  if (profile.name) filled++; total++;
+  if (profile.email) filled++; total++;
+
+  if (educations.length > 0) filled++; total++;
+  if (skills.length > 0) filled++; total++;
+  if (projects.length > 0) filled++; total++;
+
+  const progress = total === 0 ? 0 : Math.round((filled / total) * 100);
+
   const [isHover, setIsHover] = useState(false);
 
   return (
@@ -41,6 +70,21 @@ export const ResumeForm = () => {
       onMouseLeave={() => setIsHover(false)}
     >
       <section className="flex max-w-2xl flex-col gap-8 p-[var(--resume-padding)]">
+
+        {/* ✅ PROGRESS BAR UI */}
+        <div>
+          <p>{progress}% Resume Completed</p>
+          <div style={{ background: "#eee", height: "8px" }}>
+            <div
+              style={{
+                width: `${progress}%`,
+                background: "green",
+                height: "8px",
+              }}
+            />
+          </div>
+        </div>
+
         <ProfileForm />
         {formsOrder.map((form) => {
           const Component = formTypeToComponent[form];
@@ -52,4 +96,4 @@ export const ResumeForm = () => {
       <FlexboxSpacer maxWidth={50} className="hidden md:block" />
     </div>
   );
-};
+};