@recruitnepal/shared-packages 1.7.1 → 1.7.2

package/dist/components/cv/ResponsivePreview.d.ts

@@ -0,0 +1,7 @@
+import type { CvTemplateRegistry } from './TemplateRenderer';
+export type ResponsivePreviewProps = {
+    /** Template registry provided by the host app */
+    registry: CvTemplateRegistry;
+};
+export default function ResponsivePreview({ registry }: ResponsivePreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResponsivePreview.d.ts.map

package/dist/components/cv/ResponsivePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsivePreview.d.ts","sourceRoot":"","sources":["../../../src/components/cv/ResponsivePreview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAM7D,MAAM,MAAM,sBAAsB,GAAG;IACnC,iDAAiD;IACjD,QAAQ,EAAE,kBAAkB,CAAC;CAC9B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAiE7E"}

package/dist/components/cv/ResponsivePreview.js

@@ -0,0 +1,47 @@
+// components/cv/ResponsivePreview.tsx
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import TemplateRenderer from './TemplateRenderer';
+import { useCvPreview } from '../../stores/cvPreview.store';
+// If your paper is a different exact size, adjust these
+const BASE_WIDTH = 794; // A4 @ ~96 dpi
+const BASE_HEIGHT = 1123;
+export default function ResponsivePreview({ registry }) {
+    const { slug, live } = useCvPreview();
+    const wrapRef = useRef(null);
+    const [scale, setScale] = useState(1);
+    useEffect(() => {
+        if (!wrapRef.current)
+            return;
+        const el = wrapRef.current;
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            // leave a little breathing room (2%)
+            const sW = rect.width / BASE_WIDTH;
+            const sH = rect.height / BASE_HEIGHT;
+            const s = Math.max(0.3, Math.min(1, Math.min(sW, sH) * 0.98));
+            setScale(s);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        window.addEventListener('orientationchange', measure);
+        return () => {
+            ro.disconnect();
+            window.removeEventListener('orientationchange', measure);
+        };
+    }, []);
+    if (!live) {
+        return (_jsx("div", { className: "text-sm text-muted-foreground p-4", children: "Fill the forms to see the preview." }));
+    }
+    const scaledW = BASE_WIDTH * scale;
+    const scaledH = BASE_HEIGHT * scale;
+    return (
+    // This box gets as big as the dialog gives it, and can scroll both ways
+    _jsx("div", { ref: wrapRef, className: "h-full w-full overflow-auto", children: _jsx("div", { className: "w-full h-full flex items-start justify-center", children: _jsx("div", { className: "relative", style: { width: scaledW, height: scaledH }, children: _jsx("div", { className: "absolute left-0 top-0 origin-top-left", style: {
+                        width: BASE_WIDTH,
+                        height: BASE_HEIGHT,
+                        transform: `scale(${scale})`,
+                    }, children: _jsx("div", { id: "cv-root-mobile", className: "bg-white border rounded-xl shadow-sm", children: _jsx(TemplateRenderer, { registry: registry, slug: slug, data: live }) }) }) }) }) }));
+}

package/dist/components/cv-builder/forms/AboutForm.d.ts

@@ -0,0 +1,2 @@
+export default function AboutForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AboutForm.d.ts.map

package/dist/components/cv-builder/forms/AboutForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutForm.d.ts","sourceRoot":"","sources":["../../../../src/components/cv-builder/forms/AboutForm.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,SAAS,4CA2NhC"}

package/dist/components/cv-builder/forms/AboutForm.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { useCvPreview } from '@/stores/cvPreview.store';
+import { useCvDraftsStore } from '@/stores/cvDrafts.store';
+export default function AboutForm() {
+    const { live, setPersonal } = useCvPreview();
+    const { getCurrentDraft, updateDraft } = useCvDraftsStore();
+    // Initialize form with current draft data or empty
+    const personalInfo = live?.personalInfo || {
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        location: { city: '', state: '', country: 'Nepal' },
+        summary: '',
+        links: [],
+    };
+    const form = useForm({
+        defaultValues: {
+            firstName: personalInfo?.firstName || '',
+            lastName: personalInfo?.lastName || '',
+            email: personalInfo?.email || '',
+            phone: personalInfo?.phone || '',
+            city: personalInfo?.location?.city || '',
+            state: personalInfo?.location?.state || '',
+            country: personalInfo?.location?.country || 'Nepal',
+            summary: personalInfo?.summary || '',
+        },
+    });
+    // Update form when draft changes
+    useEffect(() => {
+        if (live?.personalInfo) {
+            form.reset({
+                firstName: live.personalInfo.firstName || '',
+                lastName: live.personalInfo.lastName || '',
+                email: live.personalInfo.email || '',
+                phone: live.personalInfo.phone || '',
+                city: live.personalInfo.location?.city || '',
+                state: live.personalInfo.location?.state || '',
+                country: live.personalInfo.location?.country || 'Nepal',
+                summary: live.personalInfo.summary || '',
+            });
+        }
+    }, [live?.personalInfo, form]);
+    const debounceRef = useRef(null);
+    const setPersonalDebounced = useCallback((payload) => {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            setPersonal(payload);
+            // Also update the draft in store
+            const currentDraft = getCurrentDraft();
+            if (currentDraft && live) {
+                updateDraft(currentDraft.id, {
+                    cv_data: {
+                        ...live,
+                        personalInfo: { ...live.personalInfo, ...payload },
+                    },
+                });
+            }
+        }, 300);
+    }, [setPersonal, getCurrentDraft, updateDraft, live]);
+    // Watch form changes and update preview
+    useEffect(() => {
+        const sub = form.watch((v) => {
+            setPersonalDebounced({
+                firstName: v.firstName ?? '',
+                lastName: v.lastName ?? '',
+                email: v.email ?? '',
+                phone: v.phone ?? '',
+                location: {
+                    city: v.city ?? '',
+                    state: v.state ?? '',
+                    country: v.country ?? 'Nepal',
+                },
+                summary: v.summary ?? '',
+            });
+        });
+        return () => sub.unsubscribe();
+    }, [form, setPersonalDebounced]);
+    return (_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-2xl mb-2 font-medium", children: "About Yourself" }), _jsx("p", { className: "text-sm mb-6", children: "Fill in your personal information to build your CV. This data is saved to your CV draft." }), _jsx(Form, { ...form, children: _jsxs("form", { className: "space-y-6", onSubmit: (e) => e.preventDefault(), children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(FormField, { control: form.control, name: "firstName", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "First Name *" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "John", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "lastName", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Last Name *" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Doe", ...field }) }), _jsx(FormMessage, {})] })) })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(FormField, { control: form.control, name: "email", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Email *" }), _jsx(FormControl, { children: _jsx(Input, { type: "email", placeholder: "john@example.com", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "phone", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Phone" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "98XXXXXXXX", ...field }) }), _jsx(FormMessage, {})] })) })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(FormField, { control: form.control, name: "city", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "City" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Kathmandu", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "state", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "State/Province" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Bagmati", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "country", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Country" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Nepal", ...field }) }), _jsx(FormMessage, {})] })) })] }), _jsx(FormField, { control: form.control, name: "summary", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Professional Summary" }), _jsx(FormControl, { children: _jsx(Textarea, { placeholder: "Write a brief summary about yourself...", className: "min-h-[120px]", ...field }) }), _jsx(FormMessage, {})] })) })] }) })] }));
+}

package/dist/components/cv-builder/forms/AdditionalDetailsForm.d.ts

@@ -0,0 +1,2 @@
+export default function AdditionalDetailsForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AdditionalDetailsForm.d.ts.map

package/dist/components/cv-builder/forms/AdditionalDetailsForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdditionalDetailsForm.d.ts","sourceRoot":"","sources":["../../../../src/components/cv-builder/forms/AdditionalDetailsForm.tsx"],"names":[],"mappings":"AAoEA,MAAM,CAAC,OAAO,UAAU,qBAAqB,4CA4f5C"}

package/dist/components/cv-builder/forms/AdditionalDetailsForm.js

@@ -0,0 +1,227 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useCvPreview } from '@/stores/cvPreview.store';
+import { useCvDraftsStore } from '@/stores/cvDrafts.store';
+import { Plus, Trash2 } from 'lucide-react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select';
+import { RatingStars } from '@/components/RatingStars';
+import NoData from '@/components/common/no-data';
+const languageSchema = z.object({
+    id: z.string().optional(),
+    language: z.string().min(1, { message: 'Language is required' }),
+    reading: z.number().int().min(0).max(5),
+    writing: z.number().int().min(0).max(5),
+    speaking: z.number().int().min(0).max(5),
+});
+const languageFormSchema = z.object({
+    languageEntries: z.array(languageSchema).min(0),
+});
+const referenceSchema = z.object({
+    id: z.string().optional(),
+    reference_person: z
+        .string()
+        .min(1, { message: 'Reference Person is required' }),
+    position: z.string().min(1, { message: 'Position is required' }),
+    email: z.string().email().min(1, { message: 'Email is required' }),
+    phone_number: z
+        .string()
+        .min(1, { message: 'Phone number is required' })
+        .max(10, { message: 'Invalid Phone number' }),
+});
+const referenceFormSchema = z.object({
+    referenceEntries: z.array(referenceSchema).min(0),
+});
+export default function AdditionalDetailsForm() {
+    const { live, setSections } = useCvPreview();
+    const { getCurrentDraft, updateDraft } = useCvDraftsStore();
+    // Control accordion state to prevent auto-closing
+    const [openLanguageAccordion, setOpenLanguageAccordion] = useState(undefined);
+    const [openReferenceAccordion, setOpenReferenceAccordion] = useState(undefined);
+    // Transform languages from live data to form format
+    const languagesList = useMemo(() => {
+        if (!live?.sections?.languages || !Array.isArray(live.sections.languages)) {
+            return [];
+        }
+        return live.sections.languages.map((lang) => ({
+            id: lang.id || `lang_${Date.now()}`,
+            language: lang.language || '',
+            reading: typeof lang.reading === 'number' ? lang.reading : (lang.reading === 'Excellent' ? 5 : lang.reading === 'good' ? 3 : 1),
+            writing: typeof lang.writing === 'number' ? lang.writing : (lang.writing === 'Excellent' ? 5 : lang.writing === 'good' ? 3 : 1),
+            speaking: typeof lang.speaking === 'number' ? lang.speaking : (lang.speaking === 'Excellent' ? 5 : lang.speaking === 'good' ? 3 : 1),
+        }));
+    }, [live?.sections?.languages]);
+    // Transform references from live data to form format
+    const referencesList = useMemo(() => {
+        if (!live?.sections?.references || !Array.isArray(live.sections.references)) {
+            return [];
+        }
+        return live.sections.references.map((ref) => ({
+            id: ref.id || `ref_${Date.now()}`,
+            reference_person: ref.name || '',
+            position: ref.position || '',
+            email: ref.email || '',
+            phone_number: ref.phone || '',
+        }));
+    }, [live?.sections?.references]);
+    const languagesForm = useForm({
+        resolver: zodResolver(languageFormSchema),
+        defaultValues: {
+            languageEntries: languagesList.length > 0 ? languagesList : [],
+        },
+    });
+    const referencesForm = useForm({
+        resolver: zodResolver(referenceFormSchema),
+        defaultValues: {
+            referenceEntries: referencesList.length > 0 ? referencesList : [],
+        },
+    });
+    const { fields: langFields, append: appendLang, remove: removeLang } = useFieldArray({
+        control: languagesForm.control,
+        name: 'languageEntries',
+    });
+    const { fields: refFields, append: appendRef, remove: removeRef } = useFieldArray({
+        control: referencesForm.control,
+        name: 'referenceEntries',
+    });
+    // Track if we've initialized to prevent reset loops
+    const langInitializedRef = useRef(false);
+    const refInitializedRef = useRef(false);
+    const prevLanguagesRef = useRef('');
+    const prevReferencesRef = useRef('');
+    useEffect(() => {
+        const currentListStr = JSON.stringify(languagesList);
+        if (!langInitializedRef.current && languagesList.length > 0) {
+            languagesForm.reset({ languageEntries: languagesList });
+            langInitializedRef.current = true;
+            prevLanguagesRef.current = currentListStr;
+        }
+        else if (langInitializedRef.current && prevLanguagesRef.current !== currentListStr) {
+            const prevList = JSON.parse(prevLanguagesRef.current || '[]');
+            const currentIds = languagesList.map(e => e.id).sort().join(',');
+            const prevIds = prevList.map((e) => e.id).sort().join(',');
+            if (currentIds !== prevIds || Math.abs(languagesList.length - prevList.length) > 0) {
+                languagesForm.reset({ languageEntries: languagesList });
+                prevLanguagesRef.current = currentListStr;
+            }
+        }
+    }, [languagesList, languagesForm]);
+    useEffect(() => {
+        const currentListStr = JSON.stringify(referencesList);
+        if (!refInitializedRef.current && referencesList.length > 0) {
+            referencesForm.reset({ referenceEntries: referencesList });
+            refInitializedRef.current = true;
+            prevReferencesRef.current = currentListStr;
+        }
+        else if (refInitializedRef.current && prevReferencesRef.current !== currentListStr) {
+            const prevList = JSON.parse(prevReferencesRef.current || '[]');
+            const currentIds = referencesList.map(e => e.id).sort().join(',');
+            const prevIds = prevList.map((e) => e.id).sort().join(',');
+            if (currentIds !== prevIds || Math.abs(referencesList.length - prevList.length) > 0) {
+                referencesForm.reset({ referenceEntries: referencesList });
+                prevReferencesRef.current = currentListStr;
+            }
+        }
+    }, [referencesList, referencesForm]);
+    // ---- LIVE PREVIEW: Languages ----
+    const debRefLang = useRef(null);
+    const pushLanguages = useCallback(() => {
+        if (debRefLang.current)
+            window.clearTimeout(debRefLang.current);
+        debRefLang.current = window.setTimeout(() => {
+            const entries = languagesForm.getValues().languageEntries || [];
+            const languages = entries
+                .map((e, i) => ({
+                id: String(e.id ?? i),
+                language: e.language ?? '',
+                proficiency: undefined,
+                reading: e.reading || undefined,
+                writing: e.writing || undefined,
+                speaking: e.speaking || undefined,
+            }))
+                .filter((l) => l.language);
+            setSections({ languages });
+        }, 150);
+    }, [languagesForm, setSections]);
+    // ---- LIVE PREVIEW: References ----
+    const debRefRef = useRef(null);
+    const pushReferences = useCallback(() => {
+        if (debRefRef.current)
+            window.clearTimeout(debRefRef.current);
+        debRefRef.current = window.setTimeout(() => {
+            const entries = referencesForm.getValues().referenceEntries || [];
+            const references = entries
+                .map((e, i) => ({
+                id: String(e.id ?? i),
+                name: e.reference_person ?? '',
+                position: e.position || undefined,
+                email: e.email || undefined,
+                phone: e.phone_number || undefined,
+                company: undefined,
+            }))
+                .filter((r) => r.name);
+            setSections({ references });
+        }, 150);
+    }, [referencesForm, setSections]);
+    // push initial + on any change
+    useEffect(() => {
+        pushLanguages();
+    }, [langFields.length, pushLanguages]);
+    useEffect(() => {
+        const sub = languagesForm.watch(() => pushLanguages());
+        return () => sub.unsubscribe();
+    }, [languagesForm, pushLanguages]);
+    useEffect(() => {
+        pushReferences();
+    }, [refFields.length, pushReferences]);
+    useEffect(() => {
+        const sub = referencesForm.watch(() => pushReferences());
+        return () => sub.unsubscribe();
+    }, [referencesForm, pushReferences]);
+    // Update draft when data changes
+    useEffect(() => {
+        const currentDraft = getCurrentDraft();
+        if (currentDraft && live) {
+            updateDraft(currentDraft.id, {
+                cv_data: live,
+            });
+        }
+    }, [live, getCurrentDraft, updateDraft]);
+    return (_jsxs("div", { className: "mb-6 space-y-8", children: [_jsx("h1", { className: "text-2xl mb-2 font-medium", children: "Additional Details" }), _jsx("p", { className: "text-sm mb-6", children: "Add languages and references to complete your CV." }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold mb-4", children: "Languages" }), _jsx(Form, { ...languagesForm, children: _jsxs("form", { className: "space-y-6", children: [langFields.length === 0 && _jsx(NoData, {}), langFields.map((field, index) => (_jsx(Accordion, { type: "single", collapsible: true, value: openLanguageAccordion, onValueChange: setOpenLanguageAccordion, children: _jsxs(AccordionItem, { value: `languages-${index}`, className: "border-none", children: [_jsxs("div", { className: "flex items-center justify-between bg-primary/10 py-3 px-4 rounded-xl accordion-grow", children: [_jsx(AccordionTrigger, { className: "h-[30px] flex-grow hover:no-underline p-0", children: _jsx("div", { className: "flex items-center justify-between w-full", children: _jsx("div", { className: "flex flex-col items-start", children: _jsx("p", { className: "text-base font-semibold", children: (field.language || 'New Language Entry')
+                                                                        .charAt(0)
+                                                                        .toUpperCase() +
+                                                                        (field.language || 'New Language Entry').slice(1) }) }) }) }), _jsx("div", { className: "pl-3 border-l border-black/60 ml-4", children: _jsx(Button, { variant: "link", type: "button", size: "sm", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                removeLang(index);
+                                                            }, className: "h-8 w-8 p-0 hover:text-destructive", children: _jsx(Trash2, { size: 20, className: "text-text-primary hover:text-destructive" }) }) })] }), _jsx(AccordionContent, { children: _jsx("div", { className: "p-4 pt-0", children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(FormField, { control: languagesForm.control, name: `languageEntries.${index}.language`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Language" }), _jsxs(Select, { onValueChange: (value) => {
+                                                                                field.onChange(value);
+                                                                                // Keep accordion open after selection
+                                                                                setOpenLanguageAccordion(`languages-${index}`);
+                                                                            }, defaultValue: field.value, value: field.value, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select Language" }) }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "English", children: "English" }), _jsx(SelectItem, { value: "Nepali", children: "Nepali" }), _jsx(SelectItem, { value: "French", children: "French" }), _jsx(SelectItem, { value: "Spanish", children: "Spanish" }), _jsx(SelectItem, { value: "Hindi", children: "Hindi" }), _jsx(SelectItem, { value: "Mandarin", children: "Mandarin" }), _jsx(SelectItem, { value: "Korean", children: "Korean" }), _jsx(SelectItem, { value: "German", children: "German" })] })] }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: languagesForm.control, name: `languageEntries.${index}.reading`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Reading" }), _jsx(FormControl, { children: _jsx("div", { className: "text-yellow-500", children: _jsx(RatingStars, { "aria-label": "Reading", value: Number(field.value) || 0, onChange: (n) => field.onChange(n) }) }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: languagesForm.control, name: `languageEntries.${index}.writing`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Writing" }), _jsx(FormControl, { children: _jsx("div", { className: "text-yellow-500", children: _jsx(RatingStars, { "aria-label": "Writing", value: Number(field.value) || 0, onChange: (n) => field.onChange(n) }) }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: languagesForm.control, name: `languageEntries.${index}.speaking`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Speaking" }), _jsx(FormControl, { children: _jsx("div", { className: "text-yellow-500", children: _jsx(RatingStars, { "aria-label": "Speaking", value: Number(field.value) || 0, onChange: (n) => field.onChange(n) }) }) }), _jsx(FormMessage, {})] })) })] }) }) })] }) }, field.id))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "text-primary w-fit", onClick: () => {
+                                        appendLang({
+                                            id: undefined,
+                                            language: '',
+                                            reading: 0,
+                                            speaking: 0,
+                                            writing: 0,
+                                        });
+                                    }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), " Add more"] })] }) })] }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold mb-4", children: "References" }), _jsx(Form, { ...referencesForm, children: _jsxs("form", { className: "space-y-6", children: [refFields.length === 0 && _jsx(NoData, {}), refFields.map((field, index) => (_jsx(Accordion, { type: "single", collapsible: true, value: openReferenceAccordion, onValueChange: setOpenReferenceAccordion, children: _jsxs(AccordionItem, { value: `references-${index}`, className: "border-none", children: [_jsxs("div", { className: "flex items-center justify-between bg-primary/10 py-3 px-4 rounded-xl accordion-grow", children: [_jsx(AccordionTrigger, { className: "h-[50px] flex-grow hover:no-underline p-0", children: _jsx("div", { className: "flex items-center justify-between w-full", children: _jsxs("div", { className: "flex flex-col items-start", children: [_jsx("p", { className: "text-base font-semibold", children: field.reference_person || 'New Reference Entry' }), _jsx("p", { className: "text-sm text-text-secondary", children: field.position || 'Position' })] }) }) }), _jsx("div", { className: "pl-3 border-l border-black/60 ml-4", children: _jsx(Button, { variant: "link", type: "button", size: "sm", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                removeRef(index);
+                                                            }, className: "h-8 w-8 p-0 hover:text-destructive", children: _jsx(Trash2, { size: 20, className: "text-text-primary hover:text-destructive" }) }) })] }), _jsx(AccordionContent, { children: _jsxs("div", { className: "p-4 pt-0 space-y-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(FormField, { control: referencesForm.control, name: `referenceEntries.${index}.reference_person`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Reference Person" }), _jsx(FormControl, { children: _jsx(Input, { ...field, placeholder: "Enter reference person name" }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: referencesForm.control, name: `referenceEntries.${index}.position`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Position" }), _jsx(FormControl, { children: _jsx(Input, { ...field, placeholder: "Enter position" }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: referencesForm.control, name: `referenceEntries.${index}.email`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Email" }), _jsx(FormControl, { children: _jsx(Input, { ...field, type: "email", placeholder: "Enter email address" }) }), _jsx(FormMessage, {})] })) })] }), _jsx("div", { children: _jsx(FormField, { control: referencesForm.control, name: `referenceEntries.${index}.phone_number`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full", children: [_jsx(FormLabel, { children: "Phone Number" }), _jsx(FormControl, { children: _jsxs("div", { className: "flex", children: [_jsx(Input, { value: "+977", readOnly: true, className: "w-[100px] shrink-0 rounded-tr-none rounded-br-none" }), _jsx(Input, { ...field, placeholder: "Enter phone number", className: "w-full border-l-0 rounded-tl-none rounded-bl-none" })] }) }), _jsx(FormMessage, {})] })) }) })] }) })] }) }, field.id))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "text-primary w-fit", onClick: () => {
+                                        appendRef({
+                                            id: undefined,
+                                            reference_person: '',
+                                            position: '',
+                                            email: '',
+                                            phone_number: '',
+                                        });
+                                    }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), " Add more"] })] }) })] })] }));
+}

package/dist/components/cv-builder/forms/EducationForm.d.ts

@@ -0,0 +1,2 @@
+export default function EducationForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EducationForm.d.ts.map

package/dist/components/cv-builder/forms/EducationForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EducationForm.d.ts","sourceRoot":"","sources":["../../../../src/components/cv-builder/forms/EducationForm.tsx"],"names":[],"mappings":"AA8CA,MAAM,CAAC,OAAO,UAAU,aAAa,4CAwVpC"}

package/dist/components/cv-builder/forms/EducationForm.js

@@ -0,0 +1,168 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useCvPreview } from '@/stores/cvPreview.store';
+import { useCvDraftsStore } from '@/stores/cvDrafts.store';
+import { Plus, Trash2 } from 'lucide-react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion';
+import NoData from '@/components/common/no-data';
+const educationFormSchema = z.object({
+    id: z.string().optional(),
+    institution_name: z.string().min(1, { message: 'Institution Name is required' }),
+    course_name: z.string().min(1, { message: 'Course Name is required' }),
+    institution_address: z.string().optional(),
+    start: z.string().min(1, { message: 'Start date is required' }),
+    end: z.string().optional(),
+    still_studying: z.boolean().default(false),
+    gpa: z.string().optional(),
+});
+const educationFormArraySchema = z.object({
+    educationEntries: z.array(educationFormSchema).min(0),
+});
+export default function EducationForm() {
+    const { live, setSections } = useCvPreview();
+    const { getCurrentDraft, updateDraft } = useCvDraftsStore();
+    // Transform education from live data to form format
+    const educationList = useMemo(() => {
+        if (!live?.sections?.education || !Array.isArray(live.sections.education)) {
+            return [];
+        }
+        return live.sections.education.map((edu) => {
+            const startDate = edu.startDate
+                ? new Date(edu.startDate).toISOString().split('T')[0]
+                : '';
+            const endDate = edu.endDate && !edu.current
+                ? new Date(edu.endDate).toISOString().split('T')[0]
+                : '';
+            return {
+                id: edu.id || `edu_${Date.now()}`,
+                institution_name: edu.institution || '',
+                course_name: edu.field || edu.degree || '',
+                institution_address: edu.location || '',
+                start: startDate,
+                end: endDate,
+                still_studying: edu.current || false,
+                gpa: edu.gpa || '',
+            };
+        });
+    }, [live?.sections?.education]);
+    const form = useForm({
+        resolver: zodResolver(educationFormArraySchema),
+        defaultValues: {
+            educationEntries: educationList.length > 0 ? educationList : [],
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control: form.control,
+        name: 'educationEntries',
+    });
+    // Track if we've initialized to prevent reset loops
+    const initializedRef = useRef(false);
+    const prevEducationListRef = useRef('');
+    useEffect(() => {
+        const currentListStr = JSON.stringify(educationList);
+        // Only reset if:
+        // 1. We haven't initialized yet AND there's data
+        // 2. OR the data actually changed from an external source (different structure)
+        if (!initializedRef.current && educationList.length > 0) {
+            form.reset({ educationEntries: educationList });
+            initializedRef.current = true;
+            prevEducationListRef.current = currentListStr;
+        }
+        else if (initializedRef.current && prevEducationListRef.current !== currentListStr) {
+            // Only reset if the structure changed significantly (e.g., loading a draft)
+            const prevList = JSON.parse(prevEducationListRef.current || '[]');
+            const currentIds = educationList.map(e => e.id).sort().join(',');
+            const prevIds = prevList.map((e) => e.id).sort().join(',');
+            // Only reset if IDs changed (new draft loaded) or count changed significantly
+            if (currentIds !== prevIds || Math.abs(educationList.length - prevList.length) > 0) {
+                form.reset({ educationEntries: educationList });
+                prevEducationListRef.current = currentListStr;
+            }
+        }
+    }, [educationList, form]);
+    // Helper function to format year from date
+    const getYearFromDate = (dateString) => {
+        if (!dateString)
+            return '';
+        return new Date(dateString).getFullYear().toString();
+    };
+    // Helper function to format the date range
+    const formatDateRange = (startDate, endDate) => {
+        const startYear = getYearFromDate(startDate);
+        const endYear = getYearFromDate(endDate);
+        if (!startYear && !endYear)
+            return '';
+        if (!endYear)
+            return `${startYear}-Present`;
+        if (!startYear)
+            return endYear;
+        return `${startYear}-${endYear}`;
+    };
+    // ---- LIVE PREVIEW: Education ----
+    const debRefEdu = useRef(null);
+    const mapEdu = (rows) => rows.map((r, i) => ({
+        id: String(r.id ?? `tmp-edu-${i}`),
+        institution: r.institution_name || '',
+        degree: r.course_name || '',
+        field: r.course_name || '',
+        location: r.institution_address || '',
+        startDate: r.start || '',
+        endDate: r.still_studying ? undefined : r.end || undefined,
+        current: r.still_studying ?? !r.end,
+        gpa: r.gpa || '',
+        honors: [],
+    }));
+    const pushEdu = useCallback((payload) => {
+        clearTimeout(debRefEdu.current);
+        debRefEdu.current = setTimeout(() => setSections({ education: payload }), 160);
+    }, [setSections]);
+    useEffect(() => {
+        const sub = form.watch((_v, { name }) => {
+            if (!name?.startsWith('educationEntries'))
+                return;
+            pushEdu(mapEdu(form.getValues().educationEntries ?? []));
+        });
+        // bootstrap once for defaults
+        pushEdu(mapEdu(form.getValues().educationEntries ?? []));
+        return () => {
+            sub?.unsubscribe?.();
+            if (debRefEdu.current)
+                clearTimeout(debRefEdu.current);
+        };
+    }, [form, pushEdu]);
+    // Update draft when data changes
+    useEffect(() => {
+        const currentDraft = getCurrentDraft();
+        if (currentDraft && live) {
+            updateDraft(currentDraft.id, {
+                cv_data: live,
+            });
+        }
+    }, [live, getCurrentDraft, updateDraft]);
+    return (_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-2xl mb-2 font-medium", children: "Education" }), _jsx("p", { className: "text-sm mb-6", children: "Add your educational background. This information will appear on your CV." }), _jsx(Form, { ...form, children: _jsxs("form", { className: "space-y-6 pb-24 lg:pb-0", children: [fields.length === 0 && _jsx(NoData, {}), fields.map((field, index) => {
+                            const dateRange = formatDateRange(field.start, field.end || '');
+                            return (_jsx(Accordion, { type: "single", collapsible: true, children: _jsxs(AccordionItem, { value: `education-${index}`, className: "border-none", children: [_jsxs("div", { className: "flex items-center justify-between bg-primary/10 py-3 px-4 rounded-xl accordion-grow", children: [_jsx(AccordionTrigger, { className: "min-h-[70px] flex-grow hover:no-underline p-0 text-left items-start", children: _jsxs("div", { className: "flex flex-col items-start w-full", children: [_jsx("p", { className: "text-base font-semibold line-clamp-1", children: form.watch(`educationEntries.${index}.course_name`) || 'New Education Entry' }), _jsx("p", { className: "text-sm font-light line-clamp-1", children: form.watch(`educationEntries.${index}.institution_name`) }), dateRange && (_jsx("p", { className: "text-sm font-medium text-gray-600 line-clamp-1", children: dateRange }))] }) }), _jsx("div", { className: "pl-3 border-l border-black/60 ml-4", children: _jsx(Button, { variant: "link", type: "button", size: "sm", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            remove(index);
+                                                        }, className: "h-8 w-8 p-0 hover:text-destructive", children: _jsx(Trash2, { size: 20, className: "text-text-primary hover:text-destructive" }) }) })] }), _jsx(AccordionContent, { children: _jsx("div", { className: "p-4 pt-0", children: _jsxs("div", { className: "space-y-4", children: [_jsx(FormField, { control: form.control, name: `educationEntries.${index}.institution_name`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "University" }), _jsx(FormControl, { children: _jsx(Input, { ...field, placeholder: "University Name" }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `educationEntries.${index}.course_name`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Course" }), _jsx(FormControl, { children: _jsx(Input, { ...field, placeholder: "Course Name" }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `educationEntries.${index}.institution_address`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Institution Address" }), _jsx(FormControl, { children: _jsx(Input, { ...field, placeholder: "Institution Address" }) }), _jsx(FormMessage, {})] })) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4", children: [_jsxs("div", { children: [_jsx(FormLabel, { className: "block text-sm font-medium mb-1", children: "Start Date" }), _jsx(FormField, { control: form.control, name: `educationEntries.${index}.start`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(Input, { ...field, type: "date" }) }), _jsx(FormMessage, {})] })) })] }), _jsxs("div", { children: [_jsx(FormLabel, { className: "block text-sm font-medium mb-1", children: "End Date" }), _jsx(FormField, { control: form.control, name: `educationEntries.${index}.end`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(Input, { ...field, type: "date", disabled: form.watch(`educationEntries.${index}.still_studying`) }) }), _jsx(FormMessage, {})] })) })] })] }), _jsx(FormField, { control: form.control, name: `educationEntries.${index}.still_studying`, render: ({ field }) => (_jsxs(FormItem, { className: "flex flex-row items-start space-x-3 space-y-0", children: [_jsx(FormControl, { children: _jsx(Checkbox, { checked: field.value, onCheckedChange: field.onChange }) }), _jsx("div", { className: "space-y-1 leading-none", children: _jsx(FormLabel, { children: "Still Studying" }) })] })) }), _jsx(FormField, { control: form.control, name: `educationEntries.${index}.gpa`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "GPA" }), _jsx(FormControl, { children: _jsx(Input, { ...field, placeholder: "3.8" }) }), _jsx(FormMessage, {})] })) })] }) }) })] }) }, field.id));
+                        }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "text-blue-600", onClick: () => {
+                                append({
+                                    id: undefined,
+                                    institution_name: '',
+                                    course_name: '',
+                                    institution_address: '',
+                                    start: '',
+                                    end: '',
+                                    still_studying: false,
+                                    gpa: '',
+                                });
+                            }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), " Add Education"] })] }) })] }));
+}

package/dist/components/cv-builder/forms/ExperienceForm.d.ts

@@ -0,0 +1,2 @@
+export default function ExperienceForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExperienceForm.d.ts.map

package/dist/components/cv-builder/forms/ExperienceForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExperienceForm.d.ts","sourceRoot":"","sources":["../../../../src/components/cv-builder/forms/ExperienceForm.tsx"],"names":[],"mappings":"AAgGA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAggBrC"}