feat: add 'Currently working here' option for experience end date and fix contact links protocol

components/Resume/Preview.js

@@ -12,8 +12,6 @@ import { usePDF } from '@react-pdf/renderer';
 import { Document, Page, pdfjs } from 'react-pdf';
 import { FaDownload, FaEye } from 'react-icons/fa6';
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();
-
 const Loader = () => (
     <div className="flex min-h-96 w-full items-center justify-center">
         <CgSpinner className="mx-auto mt-16 animate-spin text-center text-4xl text-primary-400 md:text-5xl" />
@@ -34,6 +32,10 @@ const Preview = () => {
     const document = <Resume data={resumeData} />;
     const [instance, updateInstance] = usePDF({ document });
 
+    useEffect(() => {
+        pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();
+    }, []);
+
     useEffect(() => {
         if (resumeData.saved) updateInstance(document);
     }, [resumeData.saved]);

components/Resume/Styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyleSheet } from '@react-pdf/renderer';
 
 const styles = StyleSheet.create({

components/Resume/html/ListItem.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
 
 const ListItem = ({ children }) => {

components/Resume/html/index.js

@@ -7,6 +7,12 @@ import ListItem from './ListItem';
 import formatDate from '@/utils/formatDate';
 import { Link, Text, View } from './Renderer';
 
+const ensureProtocol = url => {
+    if (!url) return url;
+    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('mailto:')) return url;
+    return `https://${url}`;
+};
+
 const Header = ({ data }) => {
     const contactLinks = [
         {
@@ -46,7 +52,7 @@ const Header = ({ data }) => {
                 {contactLinks
                     .filter(obj => obj.value)
                     .map(({ value, name }) => (
-                        <Link key={name} src={value} style={{ color: '#555' }}>
+                        <Link key={name} src={ensureProtocol(value)} style={{ color: '#555' }}>
                             {name}
                         </Link>
                     ))}
@@ -62,7 +68,7 @@ const Education = ({ data }) => (
                 <View style={styles.title_wrapper}>
                     <Text style={styles.title}>{degree}</Text>
                     <Text style={styles.date}>
-                        {formatDate(start)}- {formatDate(end)}
+                        {formatDate(start)} - {formatDate(end)}
                     </Text>
                 </View>
 

components/Resume/pdf/ListItem.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { Text, View, StyleSheet } from '@react-pdf/renderer';
 
 const ListItem = ({ children }) => {

components/Resume/pdf/Section.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyleSheet, Text, View } from '@react-pdf/renderer';
 
 const Section = ({ title, style, children }) => {

components/Resume/pdf/index.js

@@ -6,6 +6,12 @@ import ListItem from './ListItem';
 import styles from '../Styles';
 import formatDate from '@/utils/formatDate';
 
+const ensureProtocol = url => {
+    if (!url) return url;
+    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('mailto:')) return url;
+    return `https://${url}`;
+};
+
 const Header = ({ data }) => {
     const contactLinks = [
         {
@@ -45,7 +51,7 @@ const Header = ({ data }) => {
                 {contactLinks
                     .filter(obj => obj.value)
                     .map(({ value, name }) => (
-                        <Link key={name} src={value} style={{ color: '#555' }}>
+                        <Link key={name} src={ensureProtocol(value)} style={{ color: '#555' }}>
                             {name}
                         </Link>
                     ))}
@@ -61,7 +67,7 @@ const Education = ({ data }) => (
                 <View style={styles.title_wrapper}>
                     <Text style={styles.title}>{degree}</Text>
                     <Text style={styles.date}>
-                        {formatDate(start)}- {formatDate(end)}
+                        {formatDate(start)} - {formatDate(end)}
                     </Text>
                 </View>
 

components/UI/Input.js

@@ -110,6 +110,41 @@ const Input = ({ label, name, type, placeholder, options, span, value, ...props
             );
         }
 
+        if (type === 'month-current') {
+            const { onChange } = props;
+            const isPresent = value === 'Present';
+            return (
+                <div className="space-y-2">
+                    <input
+                        type="month"
+                        name={name}
+                        id={name}
+                        className={inputClassName}
+                        placeholder={placeholder}
+                        value={isPresent ? '' : value || ''}
+                        disabled={isPresent}
+                        onChange={onChange}
+                    />
+                    <label className="flex items-center gap-2 cursor-pointer text-sm text-gray-300">
+                        <input
+                            type="checkbox"
+                            checked={isPresent}
+                            onChange={e => {
+                                onChange({
+                                    target: {
+                                        name,
+                                        value: e.target.checked ? 'Present' : '',
+                                    },
+                                });
+                            }}
+                            className="rounded border-gray-600 bg-gray-700 text-primary-500 focus:ring-primary-500"
+                        />
+                        Currently working here
+                    </label>
+                </div>
+            );
+        }
+
         if (type == 'color') {
             return (
                 <input

config/ResumeFields.js

@@ -48,8 +48,8 @@ export default {
             { name: 'role', label: 'Title / Position', span: true, placeholder: 'Software Engineer' },
             { name: 'company', label: 'Workplace / Company', placeholder: 'Company Name' },
             { name: 'location', label: 'Location', placeholder: 'City, Country' },
-            { name: 'start', label: 'Start Date', type: 'month', placeholder: 'MM/DD/YYYY' },
-            { name: 'end', label: 'End Date', type: 'month', placeholder: 'MM/DD/YYYY' },
+            { name: 'start', label: 'Start Date', type: 'month', placeholder: 'MM/YYYY' },
+            { name: 'end', label: 'End Date', type: 'month-current', placeholder: 'MM/YYYY' },
             {
                 name: 'description',
                 label: 'Responsibility',
@@ -99,7 +99,7 @@ export default {
         fields: [
             { name: 'title', label: 'Certificate Title', placeholder: 'Certificate Name', span: true },
             { name: 'issuer', label: 'Issuing Organization', placeholder: 'Organization Name' },
-            { name: 'date', label: 'Issuance Date', type: 'month', placeholder: 'MM/DD/YYYY' },
+            { name: 'date', label: 'Issuance Date', type: 'month', placeholder: 'MM/YYYY' },
         ],
     },
 

utils/formatDate.js

@@ -1,5 +1,6 @@
 const formatDate = date => {
     if (!date) return '';
+    if (date === 'Present') return 'Present';
     const d = new Date(date);
 
     return d.toLocaleDateString(undefined, {