mirror of
https://github.com/JOYCEQL/magic-resume.git
synced 2026-06-01 23:38:48 +02:00
refactor: extract resume list page components and utilities into dedicated files
This commit is contained in:
JOYCEQL
@@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Braces } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { PdfIcon } from "@/components/shared/icons/PdfIcon";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface AnimatedImportButtonProps {
|
||||
onClick: () => void;
|
||||
t: any;
|
||||
}
|
||||
|
||||
export const AnimatedImportButton = ({ onClick, t }: AnimatedImportButtonProps) => {
|
||||
const [isHovered, setIsHovered] = React.useState(false);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
onHoverStart={() => setIsHovered(true)}
|
||||
onHoverEnd={() => setIsHovered(false)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
>
|
||||
<Button
|
||||
onClick={onClick}
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"relative h-10 overflow-hidden px-4 font-medium transition-all duration-300",
|
||||
"border-border/60 bg-background hover:border-primary/50 hover:bg-accent/50 hover:shadow-sm",
|
||||
"dark:border-border/40 dark:hover:border-primary/40"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative h-5 w-5 overflow-hidden">
|
||||
<motion.div
|
||||
animate={{
|
||||
y: isHovered ? -20 : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 20,
|
||||
}}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<div className="flex h-5 w-5 items-center justify-center">
|
||||
<Braces className="h-4 w-4 text-blue-500" />
|
||||
</div>
|
||||
<div className="flex h-5 w-5 items-center justify-center">
|
||||
<PdfIcon className="h-4 w-4 text-red-500" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<span className="relative z-10">{t("dashboard.resumes.import")}</span>
|
||||
</div>
|
||||
</Button>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,198 @@
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import ResumeTemplateComponent from "@/components/templates";
|
||||
import { DEFAULT_TEMPLATES } from "@/config";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ResumeCardItemProps {
|
||||
id: string;
|
||||
resume: any;
|
||||
t: any;
|
||||
locale: string;
|
||||
setActiveResume: (id: string) => void;
|
||||
router: any;
|
||||
deleteResume: (resume: any) => void;
|
||||
index: number;
|
||||
}
|
||||
|
||||
export const ResumeCardItem = ({
|
||||
id,
|
||||
resume,
|
||||
t,
|
||||
locale,
|
||||
setActiveResume,
|
||||
router,
|
||||
deleteResume,
|
||||
index,
|
||||
}: ResumeCardItemProps) => {
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
const [scale, setScale] = React.useState(0.24);
|
||||
const activeTemplate =
|
||||
DEFAULT_TEMPLATES.find((template) => template.id === resume.templateId) ??
|
||||
DEFAULT_TEMPLATES[0];
|
||||
const templateNameKey =
|
||||
activeTemplate.id === "left-right" ? "leftRight" : activeTemplate.id;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const { width } = entries[0].contentRect;
|
||||
if (width > 0) {
|
||||
setScale(width / 793.700787); // Exact 210mm in pixels at 96dpi
|
||||
}
|
||||
});
|
||||
observer.observe(containerRef.current);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: index * 0.1,
|
||||
}}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Card
|
||||
className={cn(
|
||||
"group border transition-all duration-200 aspect-[210/297] flex flex-col overflow-hidden",
|
||||
"hover:border-primary/40 hover:shadow-lg",
|
||||
"dark:hover:border-primary/40"
|
||||
)}
|
||||
>
|
||||
<CardContent className="p-0 flex-1 relative bg-gray-50 dark:bg-gray-900 overflow-hidden cursor-pointer">
|
||||
<div className="absolute inset-0 pb-6 flex items-center justify-center pointer-events-none transition-transform duration-300 group-hover:scale-[1.02] overflow-hidden" ref={containerRef}>
|
||||
<div className="w-full h-full relative origin-top bg-white">
|
||||
<div
|
||||
className="absolute top-0 left-0 bg-white"
|
||||
style={{
|
||||
width: "210mm",
|
||||
height: "297mm",
|
||||
transform: `scale(${scale})`,
|
||||
transformOrigin: "top left",
|
||||
padding: `${resume.globalSettings?.pagePadding || 32}px`,
|
||||
fontFamily: resume.globalSettings?.fontFamily || "Alibaba PuHuiTi, sans-serif",
|
||||
}}
|
||||
>
|
||||
<ResumeTemplateComponent data={resume as any} template={activeTemplate} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 top-[60%] pointer-events-none bg-gradient-to-t from-white via-white/90 to-transparent dark:from-gray-950 dark:via-gray-950/90 z-0"></div>
|
||||
<div className="absolute inset-x-0 bottom-0 pt-12 pb-3 px-4 flex justify-between items-end border-t border-transparent z-10 transition-colors group-hover:bg-white/50 dark:group-hover:bg-gray-950/50">
|
||||
<div className="flex flex-col w-full">
|
||||
<span className="text-[15px] font-semibold truncate text-gray-900 dark:text-gray-100 drop-shadow-sm w-[90%]">
|
||||
{resume.title || t("dashboard.resumes.untitled")}
|
||||
</span>
|
||||
<span className="text-[11px] text-gray-600 dark:text-gray-300 mt-0.5 font-medium">
|
||||
{t(`dashboard.templates.${templateNameKey}.name`)} · {new Intl.DateTimeFormat(locale, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}).format(new Date(resume.createdAt))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2 pb-2 px-2 bg-white dark:bg-gray-950 border-t border-gray-100 dark:border-gray-800 z-10">
|
||||
<div className="grid grid-cols-2 gap-2 w-full">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 17,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full text-sm hover:bg-gray-100 dark:border-primary/50 dark:hover:bg-primary/10"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setActiveResume(id);
|
||||
router.push(`/app/workbench/${id}`);
|
||||
}}
|
||||
>
|
||||
{t("common.edit")}
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 17,
|
||||
}}
|
||||
>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full text-sm text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-500 dark:hover:bg-red-950/50 dark:hover:text-red-400"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{t("common.delete")}
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent onClick={(e) => e.stopPropagation()}>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t("dashboard.resumes.deleteConfirmTitle")}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t("dashboard.resumes.deleteConfirmDescription")}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={(e) => e.stopPropagation()}>{t("common.cancel")}</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-red-600 hover:bg-red-700 text-white focus:ring-red-600 border-none"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteResume(resume);
|
||||
toast.success(t("common.deleteSuccess"));
|
||||
}}
|
||||
>
|
||||
{t("common.confirm")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</motion.div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,466 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useTranslations, useLocale } from "@/i18n/compat/client";
|
||||
import { useRouter } from "@/lib/navigation";
|
||||
import { Plus, Settings, AlertCircle } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getConfig, getFileHandle, verifyPermission } from "@/utils/fileSystem";
|
||||
import { useResumeStore } from "@/store/useResumeStore";
|
||||
import { useAIConfigStore } from "@/store/useAIConfigStore";
|
||||
import { DEFAULT_TEMPLATES } from "@/config";
|
||||
import { CreateResumeModal } from "./CreateResumeModal";
|
||||
import { ImportResumeDialog } from "./ImportResumeDialog";
|
||||
import { ResumeCardItem } from "./ResumeCardItem";
|
||||
import { AnimatedImportButton } from "./AnimatedImportButton";
|
||||
import {
|
||||
extractJsonContent,
|
||||
createResumeFromAIResult,
|
||||
toStringArray
|
||||
} from "./utils";
|
||||
import pdfWorkerUrl from "pdfjs-dist/legacy/build/pdf.worker.min.mjs?url";
|
||||
|
||||
const MAX_PDF_IMPORT_PAGES = 3;
|
||||
const PDF_IMAGE_QUALITY = 0.82;
|
||||
const PDF_MAX_IMAGE_WIDTH = 1600;
|
||||
|
||||
export const ResumeWorkbench = () => {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
const {
|
||||
resumes,
|
||||
setActiveResume,
|
||||
updateResumeFromFile,
|
||||
addResume,
|
||||
deleteResume,
|
||||
createResume,
|
||||
} = useResumeStore();
|
||||
const {
|
||||
geminiApiKey,
|
||||
geminiModelId,
|
||||
} = useAIConfigStore();
|
||||
const router = useRouter();
|
||||
const [hasConfiguredFolder, setHasConfiguredFolder] = useState(false);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const jsonFileInputRef = useRef<HTMLInputElement>(null);
|
||||
const pdfFileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const syncResumesFromFiles = async () => {
|
||||
try {
|
||||
const handle = await getFileHandle("syncDirectory");
|
||||
if (!handle) return;
|
||||
|
||||
const hasPermission = await verifyPermission(handle);
|
||||
if (!hasPermission) return;
|
||||
|
||||
const dirHandle = handle as FileSystemDirectoryHandle;
|
||||
|
||||
for await (const entry of (dirHandle as any).values()) {
|
||||
if (entry.kind === "file" && entry.name.endsWith(".json")) {
|
||||
try {
|
||||
const file = await entry.getFile();
|
||||
const content = await file.text();
|
||||
const resumeData = JSON.parse(content);
|
||||
updateResumeFromFile(resumeData);
|
||||
} catch (error) {
|
||||
console.error("Error reading resume file:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error syncing resumes from files:", error);
|
||||
}
|
||||
};
|
||||
|
||||
if (Object.keys(resumes).length === 0) {
|
||||
syncResumesFromFiles();
|
||||
}
|
||||
}, [resumes, updateResumeFromFile]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadSavedConfig = async () => {
|
||||
try {
|
||||
const handle = await getFileHandle("syncDirectory");
|
||||
const path = await getConfig("syncDirectoryPath");
|
||||
if (handle && path) {
|
||||
setHasConfiguredFolder(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading saved config:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadSavedConfig();
|
||||
}, []);
|
||||
|
||||
const handleCreateFromModal = (templateId: string | null) => {
|
||||
const isBlank = !templateId;
|
||||
const newId = createResume(templateId, isBlank);
|
||||
|
||||
if (templateId) {
|
||||
const template = DEFAULT_TEMPLATES.find((t) => t.id === templateId);
|
||||
if (template) {
|
||||
const { resumes, updateResume } = useResumeStore.getState();
|
||||
const resume = resumes[newId];
|
||||
if (resume) {
|
||||
updateResume(newId, {
|
||||
globalSettings: {
|
||||
...resume.globalSettings,
|
||||
themeColor: template.colorScheme.primary,
|
||||
sectionSpacing: template.spacing.sectionGap,
|
||||
paragraphSpacing: template.spacing.itemGap,
|
||||
pagePadding: template.spacing.contentPadding,
|
||||
},
|
||||
basic: {
|
||||
...resume.basic,
|
||||
layout: template.basic.layout,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setIsCreateModalOpen(false);
|
||||
setActiveResume(newId);
|
||||
router.push(`/app/workbench/${newId}`);
|
||||
};
|
||||
|
||||
const importResumeFromJson = async (file: File) => {
|
||||
const content = await file.text();
|
||||
const config = JSON.parse(content);
|
||||
const now = new Date().toISOString();
|
||||
const { generateUUID } = await import("@/utils/uuid");
|
||||
const { initialResumeState } = await import("@/config/initialResumeData");
|
||||
|
||||
const newResume = {
|
||||
...initialResumeState,
|
||||
...config,
|
||||
id: generateUUID(),
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
};
|
||||
const resumeId = addResume(newResume);
|
||||
setActiveResume(resumeId);
|
||||
setIsImportDialogOpen(false);
|
||||
toast.success(t("dashboard.resumes.importSuccess"));
|
||||
router.push(`/app/workbench/${resumeId}`);
|
||||
};
|
||||
|
||||
const extractImagesFromPdf = async (file: File) => {
|
||||
const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
|
||||
const buffer = await file.arrayBuffer();
|
||||
const typedPdfjs = pdfjs as any;
|
||||
|
||||
typedPdfjs.GlobalWorkerOptions.workerSrc = pdfWorkerUrl;
|
||||
|
||||
const loadingTask = typedPdfjs.getDocument({
|
||||
data: new Uint8Array(buffer),
|
||||
});
|
||||
const pdf = await loadingTask.promise;
|
||||
const pageImages: string[] = [];
|
||||
const totalPages = Math.min(pdf.numPages, MAX_PDF_IMPORT_PAGES);
|
||||
|
||||
for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
|
||||
const page = await pdf.getPage(pageNumber);
|
||||
const baseViewport = page.getViewport({ scale: 2 });
|
||||
const widthScale = Math.min(1, PDF_MAX_IMAGE_WIDTH / baseViewport.width);
|
||||
const viewport = page.getViewport({ scale: 2 * widthScale });
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d", { alpha: false });
|
||||
|
||||
if (!context) {
|
||||
throw new Error("Unable to create canvas context");
|
||||
}
|
||||
|
||||
canvas.width = Math.max(1, Math.floor(viewport.width));
|
||||
canvas.height = Math.max(1, Math.floor(viewport.height));
|
||||
|
||||
await page.render({
|
||||
canvasContext: context,
|
||||
viewport,
|
||||
}).promise;
|
||||
|
||||
const imageDataUrl = canvas.toDataURL("image/jpeg", PDF_IMAGE_QUALITY);
|
||||
pageImages.push(imageDataUrl);
|
||||
|
||||
canvas.width = 0;
|
||||
canvas.height = 0;
|
||||
}
|
||||
|
||||
return pageImages;
|
||||
};
|
||||
|
||||
const importResumeFromPdf = async (file: File) => {
|
||||
if (!geminiApiKey || !geminiModelId) {
|
||||
toast.error(t("dashboard.resumes.importDialog.geminiConfigRequired"));
|
||||
router.push("/app/dashboard/ai");
|
||||
return;
|
||||
}
|
||||
|
||||
const pdfImages = await extractImagesFromPdf(file);
|
||||
if (pdfImages.length === 0) {
|
||||
throw new Error("No extractable PDF pages");
|
||||
}
|
||||
|
||||
const response = await fetch("/api/resume-import", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
images: pdfImages,
|
||||
apiKey: geminiApiKey,
|
||||
model: geminiModelId,
|
||||
locale,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
const message = data?.details
|
||||
? `${data?.error || "Resume import failed"}\n${data.details}`
|
||||
: data?.error || "Resume import failed";
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
const aiResume = data?.resume
|
||||
? data.resume
|
||||
: data?.choices?.[0]?.message?.content
|
||||
? extractJsonContent(data.choices[0].message.content)
|
||||
: null;
|
||||
|
||||
if (!aiResume) {
|
||||
throw new Error("Invalid AI response");
|
||||
}
|
||||
|
||||
const nameWithoutExt = file.name.replace(/\.[^.]+$/, "").trim();
|
||||
const resume = createResumeFromAIResult(aiResume, nameWithoutExt);
|
||||
const resumeId = addResume(resume);
|
||||
setActiveResume(resumeId);
|
||||
setIsImportDialogOpen(false);
|
||||
toast.success(t("dashboard.resumes.importDialog.pdfSuccess"));
|
||||
router.push(`/app/workbench/${resumeId}`);
|
||||
};
|
||||
|
||||
const handleJsonFileChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = "";
|
||||
if (!file || isImporting) return;
|
||||
|
||||
try {
|
||||
setIsImporting(true);
|
||||
await importResumeFromJson(file);
|
||||
} catch (error) {
|
||||
console.error("Import JSON error:", error);
|
||||
toast.error(t("dashboard.resumes.importError"));
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePdfFileChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = "";
|
||||
if (!file || isImporting) return;
|
||||
|
||||
try {
|
||||
setIsImporting(true);
|
||||
await importResumeFromPdf(file);
|
||||
} catch (error) {
|
||||
console.error("Import PDF error:", error);
|
||||
const message =
|
||||
error instanceof Error && error.message
|
||||
? error.message
|
||||
: t("dashboard.resumes.importDialog.pdfError");
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-2rem)] w-full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex-1 space-y-6 py-8"
|
||||
>
|
||||
<motion.div
|
||||
className="flex w-full items-center justify-center px-4"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
>
|
||||
{hasConfiguredFolder ? (
|
||||
<Alert className="mb-6 bg-green-50/50 dark:bg-green-950/30 border-green-200 dark:border-green-900">
|
||||
<AlertDescription className="flex items-center justify-between">
|
||||
<span className="text-green-700 dark:text-green-400">
|
||||
{t("dashboard.resumes.synced")}
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="ml-4 hover:bg-green-100 dark:hover:bg-green-900"
|
||||
onClick={() => {
|
||||
router.push("/app/dashboard/settings");
|
||||
}}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
{t("dashboard.resumes.view")}
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert
|
||||
variant="destructive"
|
||||
className="mb-6 bg-red-50/50 dark:bg-red-950/30 border-red-200 dark:border-red-900"
|
||||
>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>{t("dashboard.resumes.notice.title")}</AlertTitle>
|
||||
<AlertDescription className="flex items-center justify-between">
|
||||
<span className="text-red-700 dark:text-red-400">
|
||||
{t("dashboard.resumes.notice.description")}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-4 hover:bg-red-100 dark:hover:bg-red-900"
|
||||
onClick={() => {
|
||||
router.push("/app/dashboard/settings");
|
||||
}}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
{t("dashboard.resumes.notice.goToSettings")}
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="px-4 sm:px-6 flex items-center justify-between"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
|
||||
{t("dashboard.resumes.myResume")}
|
||||
</h1>
|
||||
<div className="flex items-center space-x-2">
|
||||
<AnimatedImportButton onClick={() => setIsImportDialogOpen(true)} t={t} />
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
>
|
||||
<Button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
variant="default"
|
||||
className="bg-gray-900 text-white hover:bg-gray-800 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t("dashboard.resumes.create")}
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex-1 w-full p-3 sm:p-6"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 sm:gap-6">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
>
|
||||
<Card
|
||||
className={cn(
|
||||
"relative border border-dashed cursor-pointer transition-all duration-200 aspect-[210/297] flex flex-col",
|
||||
"hover:border-gray-400 hover:bg-gray-50",
|
||||
"dark:hover:border-primary dark:hover:bg-primary/10"
|
||||
)}
|
||||
>
|
||||
<CardContent className="flex-1 p-0 text-center flex flex-col items-center justify-center">
|
||||
<motion.div
|
||||
className="mb-4 p-4 rounded-full bg-gray-100 dark:bg-primary/10"
|
||||
whileHover={{ rotate: 90 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Plus className="h-8 w-8 text-gray-600 dark:text-primary" />
|
||||
</motion.div>
|
||||
<CardTitle className="text-xl text-gray-900 dark:text-gray-100 px-4">
|
||||
{t("dashboard.resumes.newResume")}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2 text-gray-600 dark:text-gray-400 px-4">
|
||||
{t("dashboard.resumes.newResumeDescription")}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence>
|
||||
{Object.entries(resumes)
|
||||
.sort(([, a], [, b]) => {
|
||||
const dateA = new Date(a.createdAt || 0).getTime();
|
||||
const dateB = new Date(b.createdAt || 0).getTime();
|
||||
return dateB - dateA;
|
||||
})
|
||||
.map(([id, resume], index) => (
|
||||
<ResumeCardItem
|
||||
key={id}
|
||||
id={id}
|
||||
resume={resume}
|
||||
t={t}
|
||||
locale={locale}
|
||||
setActiveResume={setActiveResume}
|
||||
router={router}
|
||||
deleteResume={deleteResume}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<CreateResumeModal
|
||||
open={isCreateModalOpen}
|
||||
onOpenChange={setIsCreateModalOpen}
|
||||
onCreate={handleCreateFromModal}
|
||||
/>
|
||||
|
||||
<ImportResumeDialog
|
||||
open={isImportDialogOpen}
|
||||
isImporting={isImporting}
|
||||
onOpenChange={setIsImportDialogOpen}
|
||||
jsonFileInputRef={jsonFileInputRef}
|
||||
pdfFileInputRef={pdfFileInputRef}
|
||||
onJsonFileChange={handleJsonFileChange}
|
||||
onPdfFileChange={handlePdfFileChange}
|
||||
/>
|
||||
</motion.div>
|
||||
</ScrollArea>
|
||||
);
|
||||
};
|
||||
@@ -1,798 +1,7 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useTranslations, useLocale } from "@/i18n/compat/client";
|
||||
import { useRouter } from "@/lib/navigation";
|
||||
import { Plus, Settings, AlertCircle, Upload, Braces } from "lucide-react";
|
||||
import { PdfIcon } from "@/components/shared/icons/PdfIcon";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getConfig, getFileHandle, verifyPermission } from "@/utils/fileSystem";
|
||||
import { useResumeStore } from "@/store/useResumeStore";
|
||||
import { initialResumeState } from "@/config/initialResumeData";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import ResumeTemplateComponent from "@/components/templates";
|
||||
import { DEFAULT_TEMPLATES } from "@/config";
|
||||
import { ResumeWorkbench } from "./ResumeWorkbench";
|
||||
|
||||
import { generateUUID } from "@/utils/uuid";
|
||||
import { CreateResumeModal } from "./CreateResumeModal";
|
||||
import { ImportResumeDialog } from "./ImportResumeDialog";
|
||||
import { useAIConfigStore } from "@/store/useAIConfigStore";
|
||||
import pdfWorkerUrl from "pdfjs-dist/legacy/build/pdf.worker.min.mjs?url";
|
||||
|
||||
const MAX_PDF_IMPORT_PAGES = 3;
|
||||
const PDF_IMAGE_QUALITY = 0.82;
|
||||
const PDF_MAX_IMAGE_WIDTH = 1600;
|
||||
|
||||
const escapeHtml = (value: string) =>
|
||||
value
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">");
|
||||
|
||||
const toString = (value: unknown) =>
|
||||
typeof value === "string" ? value.trim() : "";
|
||||
|
||||
const toStringArray = (value: unknown) => {
|
||||
if (Array.isArray(value)) {
|
||||
return value
|
||||
.map((item) => toString(item))
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
if (typeof value === "string") {
|
||||
return value
|
||||
.split(/\r?\n/)
|
||||
.map((line) => line.replace(/^[-*•\d.)\s]+/, "").trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
return [] as string[];
|
||||
};
|
||||
|
||||
const toListHtml = (value: unknown) => {
|
||||
const items = toStringArray(value);
|
||||
if (items.length === 0) return "";
|
||||
return `<ul class="custom-list">${items
|
||||
.map((item) => `<li>${escapeHtml(item)}</li>`)
|
||||
.join("")}</ul>`;
|
||||
};
|
||||
|
||||
const extractJsonContent = (content: string) => {
|
||||
const direct = content.trim();
|
||||
try {
|
||||
return JSON.parse(direct);
|
||||
} catch (error) { }
|
||||
|
||||
const fencedMatch = direct.match(/```(?:json)?\s*([\s\S]*?)```/i);
|
||||
if (fencedMatch?.[1]) {
|
||||
try {
|
||||
return JSON.parse(fencedMatch[1].trim());
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
const objectMatch = direct.match(/\{[\s\S]*\}/);
|
||||
if (objectMatch?.[0]) {
|
||||
try {
|
||||
return JSON.parse(objectMatch[0]);
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
throw new Error("Invalid AI JSON content");
|
||||
};
|
||||
|
||||
const createResumeFromAIResult = (result: any, fileName: string) => {
|
||||
const now = new Date().toISOString();
|
||||
const id = generateUUID();
|
||||
|
||||
const education = Array.isArray(result?.education) ? result.education : [];
|
||||
const experience = Array.isArray(result?.experience) ? result.experience : [];
|
||||
const projects = Array.isArray(result?.projects) ? result.projects : [];
|
||||
|
||||
const skillSource = result?.skillContent ?? result?.skills;
|
||||
const skillContent = toListHtml(skillSource);
|
||||
|
||||
return {
|
||||
...initialResumeState,
|
||||
id,
|
||||
title: toString(result?.title) || fileName || `Imported Resume ${id.slice(0, 6)}`,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
templateId: DEFAULT_TEMPLATES[0]?.id,
|
||||
basic: {
|
||||
...initialResumeState.basic,
|
||||
name: toString(result?.basic?.name),
|
||||
title: toString(result?.basic?.title),
|
||||
email: toString(result?.basic?.email),
|
||||
phone: toString(result?.basic?.phone),
|
||||
location: toString(result?.basic?.location),
|
||||
employementStatus: toString(result?.basic?.employementStatus),
|
||||
birthDate: toString(result?.basic?.birthDate),
|
||||
customFields: [],
|
||||
photo: "",
|
||||
githubKey: "",
|
||||
githubUseName: "",
|
||||
githubContributionsVisible: false,
|
||||
},
|
||||
education: education
|
||||
.map((item: any) => ({
|
||||
id: generateUUID(),
|
||||
school: toString(item?.school),
|
||||
major: toString(item?.major),
|
||||
degree: toString(item?.degree),
|
||||
startDate: toString(item?.startDate),
|
||||
endDate: toString(item?.endDate),
|
||||
gpa: toString(item?.gpa),
|
||||
description: toListHtml(item?.description),
|
||||
visible: true,
|
||||
}))
|
||||
.filter((item: any) => item.school || item.major || item.degree),
|
||||
experience: experience
|
||||
.map((item: any) => ({
|
||||
id: generateUUID(),
|
||||
company: toString(item?.company),
|
||||
position: toString(item?.position),
|
||||
date: toString(item?.date),
|
||||
details: toListHtml(item?.details || item?.description),
|
||||
visible: true,
|
||||
}))
|
||||
.filter((item: any) => item.company || item.position || item.date || item.details),
|
||||
projects: projects
|
||||
.map((item: any) => ({
|
||||
id: generateUUID(),
|
||||
name: toString(item?.name),
|
||||
role: toString(item?.role),
|
||||
date: toString(item?.date),
|
||||
description: toListHtml(item?.description || item?.details),
|
||||
link: toString(item?.link),
|
||||
visible: true,
|
||||
}))
|
||||
.filter((item: any) => item.name || item.role || item.date || item.description),
|
||||
skillContent,
|
||||
customData: {},
|
||||
};
|
||||
};
|
||||
|
||||
const ResumesList = () => {
|
||||
return <ResumeWorkbench />;
|
||||
};
|
||||
|
||||
const ResumeCardItem = ({ id, resume, t, locale, setActiveResume, router, deleteResume, index }: any) => {
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
const [scale, setScale] = React.useState(0.24);
|
||||
const activeTemplate =
|
||||
DEFAULT_TEMPLATES.find((template) => template.id === resume.templateId) ??
|
||||
DEFAULT_TEMPLATES[0];
|
||||
const templateNameKey =
|
||||
activeTemplate.id === "left-right" ? "leftRight" : activeTemplate.id;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const { width } = entries[0].contentRect;
|
||||
if (width > 0) {
|
||||
setScale(width / 793.700787); // Exact 210mm in pixels at 96dpi
|
||||
}
|
||||
});
|
||||
observer.observe(containerRef.current);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: index * 0.1,
|
||||
}}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Card
|
||||
className={cn(
|
||||
"group border transition-all duration-200 aspect-[210/297] flex flex-col overflow-hidden",
|
||||
"hover:border-primary/40 hover:shadow-lg",
|
||||
"dark:hover:border-primary/40"
|
||||
)}
|
||||
>
|
||||
<CardContent className="p-0 flex-1 relative bg-gray-50 dark:bg-gray-900 overflow-hidden cursor-pointer">
|
||||
<div className="absolute inset-0 pb-6 flex items-center justify-center pointer-events-none transition-transform duration-300 group-hover:scale-[1.02] overflow-hidden" ref={containerRef}>
|
||||
<div className="w-full h-full relative origin-top bg-white">
|
||||
<div
|
||||
className="absolute top-0 left-0 bg-white"
|
||||
style={{
|
||||
width: "210mm",
|
||||
height: "297mm",
|
||||
transform: `scale(${scale})`,
|
||||
transformOrigin: "top left",
|
||||
padding: `${resume.globalSettings?.pagePadding || 32}px`,
|
||||
fontFamily: resume.globalSettings?.fontFamily || "Alibaba PuHuiTi, sans-serif",
|
||||
}}
|
||||
>
|
||||
<ResumeTemplateComponent data={resume as any} template={activeTemplate} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 top-[60%] pointer-events-none bg-gradient-to-t from-white via-white/90 to-transparent dark:from-gray-950 dark:via-gray-950/90 z-0"></div>
|
||||
<div className="absolute inset-x-0 bottom-0 pt-12 pb-3 px-4 flex justify-between items-end border-t border-transparent z-10 transition-colors group-hover:bg-white/50 dark:group-hover:bg-gray-950/50">
|
||||
<div className="flex flex-col w-full">
|
||||
<span className="text-[15px] font-semibold truncate text-gray-900 dark:text-gray-100 drop-shadow-sm w-[90%]">
|
||||
{resume.title || t("dashboard.resumes.untitled")}
|
||||
</span>
|
||||
<span className="text-[11px] text-gray-600 dark:text-gray-300 mt-0.5 font-medium">
|
||||
{t(`dashboard.templates.${templateNameKey}.name`)} · {new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'short', day: 'numeric' }).format(new Date(resume.updatedAt || resume.createdAt))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2 pb-2 px-2 bg-white dark:bg-gray-950 border-t border-gray-100 dark:border-gray-800 z-10">
|
||||
<div className="grid grid-cols-2 gap-2 w-full">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 17,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full text-sm hover:bg-gray-100 dark:border-primary/50 dark:hover:bg-primary/10"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setActiveResume(id);
|
||||
router.push(`/app/workbench/${id}`);
|
||||
}}
|
||||
>
|
||||
{t("common.edit")}
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 17,
|
||||
}}
|
||||
>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full text-sm text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-500 dark:hover:bg-red-950/50 dark:hover:text-red-400"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{t("common.delete")}
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent onClick={(e) => e.stopPropagation()}>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t("dashboard.resumes.deleteConfirmTitle")}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t("dashboard.resumes.deleteConfirmDescription")}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={(e) => e.stopPropagation()}>{t("common.cancel")}</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-red-600 hover:bg-red-700 text-white focus:ring-red-600 border-none"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteResume(resume);
|
||||
toast.success(t("common.deleteSuccess"));
|
||||
}}
|
||||
>
|
||||
{t("common.confirm")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</motion.div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const AnimatedImportButton = ({ onClick, t }: { onClick: () => void; t: any }) => {
|
||||
const [isHovered, setIsHovered] = React.useState(false);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
onHoverStart={() => setIsHovered(true)}
|
||||
onHoverEnd={() => setIsHovered(false)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
>
|
||||
<Button
|
||||
onClick={onClick}
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"relative h-10 overflow-hidden px-4 font-medium transition-all duration-300",
|
||||
"border-border/60 bg-background hover:border-primary/50 hover:bg-accent/50 hover:shadow-sm",
|
||||
"dark:border-border/40 dark:hover:border-primary/40"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative h-5 w-5 overflow-hidden">
|
||||
<motion.div
|
||||
animate={{
|
||||
y: isHovered ? -20 : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 20,
|
||||
}}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<div className="flex h-5 w-5 items-center justify-center">
|
||||
<Braces className="h-4 w-4 text-blue-500" />
|
||||
</div>
|
||||
<div className="flex h-5 w-5 items-center justify-center">
|
||||
<PdfIcon className="h-4 w-4 text-red-500" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<span className="relative z-10">{t("dashboard.resumes.import")}</span>
|
||||
</div>
|
||||
</Button>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const ResumeWorkbench = () => {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
const {
|
||||
resumes,
|
||||
setActiveResume,
|
||||
updateResumeFromFile,
|
||||
addResume,
|
||||
deleteResume,
|
||||
createResume,
|
||||
} = useResumeStore();
|
||||
const {
|
||||
geminiApiKey,
|
||||
geminiModelId,
|
||||
} = useAIConfigStore();
|
||||
const router = useRouter();
|
||||
const [hasConfiguredFolder, setHasConfiguredFolder] = React.useState(false);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = React.useState(false);
|
||||
const [isImportDialogOpen, setIsImportDialogOpen] = React.useState(false);
|
||||
const [isImporting, setIsImporting] = React.useState(false);
|
||||
const jsonFileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const pdfFileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const syncResumesFromFiles = async () => {
|
||||
try {
|
||||
const handle = await getFileHandle("syncDirectory");
|
||||
if (!handle) return;
|
||||
|
||||
const hasPermission = await verifyPermission(handle);
|
||||
if (!hasPermission) return;
|
||||
|
||||
const dirHandle = handle as FileSystemDirectoryHandle;
|
||||
|
||||
for await (const entry of (dirHandle as any).values()) {
|
||||
if (entry.kind === "file" && entry.name.endsWith(".json")) {
|
||||
try {
|
||||
const file = await entry.getFile();
|
||||
const content = await file.text();
|
||||
const resumeData = JSON.parse(content);
|
||||
updateResumeFromFile(resumeData);
|
||||
} catch (error) {
|
||||
console.error("Error reading resume file:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error syncing resumes from files:", error);
|
||||
}
|
||||
};
|
||||
|
||||
if (Object.keys(resumes).length === 0) {
|
||||
syncResumesFromFiles();
|
||||
}
|
||||
}, [resumes, updateResumeFromFile]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadSavedConfig = async () => {
|
||||
try {
|
||||
const handle = await getFileHandle("syncDirectory");
|
||||
const path = await getConfig("syncDirectoryPath");
|
||||
if (handle && path) {
|
||||
setHasConfiguredFolder(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading saved config:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadSavedConfig();
|
||||
}, []);
|
||||
|
||||
const handleCreateFromModal = (templateId: string | null) => {
|
||||
const isBlank = !templateId;
|
||||
const newId = createResume(templateId, isBlank);
|
||||
|
||||
if (templateId) {
|
||||
const template = DEFAULT_TEMPLATES.find((t) => t.id === templateId);
|
||||
if (template) {
|
||||
const { resumes, updateResume } = useResumeStore.getState();
|
||||
const resume = resumes[newId];
|
||||
if (resume) {
|
||||
updateResume(newId, {
|
||||
globalSettings: {
|
||||
...resume.globalSettings,
|
||||
themeColor: template.colorScheme.primary,
|
||||
sectionSpacing: template.spacing.sectionGap,
|
||||
paragraphSpacing: template.spacing.itemGap,
|
||||
pagePadding: template.spacing.contentPadding,
|
||||
},
|
||||
basic: {
|
||||
...resume.basic,
|
||||
layout: template.basic.layout,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setIsCreateModalOpen(false);
|
||||
setActiveResume(newId);
|
||||
router.push(`/app/workbench/${newId}`);
|
||||
};
|
||||
const importResumeFromJson = async (file: File) => {
|
||||
const content = await file.text();
|
||||
const config = JSON.parse(content);
|
||||
const now = new Date().toISOString();
|
||||
const newResume = {
|
||||
...initialResumeState,
|
||||
...config,
|
||||
id: generateUUID(),
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
};
|
||||
const resumeId = addResume(newResume);
|
||||
setActiveResume(resumeId);
|
||||
setIsImportDialogOpen(false);
|
||||
toast.success(t("dashboard.resumes.importSuccess"));
|
||||
router.push(`/app/workbench/${resumeId}`);
|
||||
};
|
||||
|
||||
const extractImagesFromPdf = async (file: File) => {
|
||||
const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
|
||||
const buffer = await file.arrayBuffer();
|
||||
const typedPdfjs = pdfjs as any;
|
||||
|
||||
typedPdfjs.GlobalWorkerOptions.workerSrc = pdfWorkerUrl;
|
||||
|
||||
const loadingTask = typedPdfjs.getDocument({
|
||||
data: new Uint8Array(buffer),
|
||||
});
|
||||
const pdf = await loadingTask.promise;
|
||||
const pageImages: string[] = [];
|
||||
const totalPages = Math.min(pdf.numPages, MAX_PDF_IMPORT_PAGES);
|
||||
|
||||
for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
|
||||
const page = await pdf.getPage(pageNumber);
|
||||
const baseViewport = page.getViewport({ scale: 2 });
|
||||
const widthScale = Math.min(1, PDF_MAX_IMAGE_WIDTH / baseViewport.width);
|
||||
const viewport = page.getViewport({ scale: 2 * widthScale });
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d", { alpha: false });
|
||||
|
||||
if (!context) {
|
||||
throw new Error("Unable to create canvas context");
|
||||
}
|
||||
|
||||
canvas.width = Math.max(1, Math.floor(viewport.width));
|
||||
canvas.height = Math.max(1, Math.floor(viewport.height));
|
||||
|
||||
await page.render({
|
||||
canvasContext: context,
|
||||
viewport,
|
||||
}).promise;
|
||||
|
||||
const imageDataUrl = canvas.toDataURL("image/jpeg", PDF_IMAGE_QUALITY);
|
||||
pageImages.push(imageDataUrl);
|
||||
|
||||
canvas.width = 0;
|
||||
canvas.height = 0;
|
||||
}
|
||||
|
||||
return pageImages;
|
||||
};
|
||||
|
||||
const importResumeFromPdf = async (file: File) => {
|
||||
if (!geminiApiKey || !geminiModelId) {
|
||||
toast.error(t("dashboard.resumes.importDialog.geminiConfigRequired"));
|
||||
router.push("/app/dashboard/ai");
|
||||
return;
|
||||
}
|
||||
|
||||
const pdfImages = await extractImagesFromPdf(file);
|
||||
if (pdfImages.length === 0) {
|
||||
throw new Error("No extractable PDF pages");
|
||||
}
|
||||
|
||||
const response = await fetch("/api/resume-import", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
images: pdfImages,
|
||||
apiKey: geminiApiKey,
|
||||
model: geminiModelId,
|
||||
locale,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
const message = data?.details
|
||||
? `${data?.error || "Resume import failed"}\n${data.details}`
|
||||
: data?.error || "Resume import failed";
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
const aiResume = data?.resume
|
||||
? data.resume
|
||||
: data?.choices?.[0]?.message?.content
|
||||
? extractJsonContent(data.choices[0].message.content)
|
||||
: null;
|
||||
|
||||
if (!aiResume) {
|
||||
throw new Error("Invalid AI response");
|
||||
}
|
||||
|
||||
const nameWithoutExt = file.name.replace(/\.[^.]+$/, "").trim();
|
||||
const resume = createResumeFromAIResult(aiResume, nameWithoutExt);
|
||||
const resumeId = addResume(resume);
|
||||
setActiveResume(resumeId);
|
||||
setIsImportDialogOpen(false);
|
||||
toast.success(t("dashboard.resumes.importDialog.pdfSuccess"));
|
||||
router.push(`/app/workbench/${resumeId}`);
|
||||
};
|
||||
|
||||
const handleJsonFileChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = "";
|
||||
if (!file || isImporting) return;
|
||||
|
||||
try {
|
||||
setIsImporting(true);
|
||||
await importResumeFromJson(file);
|
||||
} catch (error) {
|
||||
console.error("Import JSON error:", error);
|
||||
toast.error(t("dashboard.resumes.importError"));
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePdfFileChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = "";
|
||||
if (!file || isImporting) return;
|
||||
|
||||
try {
|
||||
setIsImporting(true);
|
||||
await importResumeFromPdf(file);
|
||||
} catch (error) {
|
||||
console.error("Import PDF error:", error);
|
||||
const message =
|
||||
error instanceof Error && error.message
|
||||
? error.message
|
||||
: t("dashboard.resumes.importDialog.pdfError");
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-2rem)] w-full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex-1 space-y-6 py-8"
|
||||
>
|
||||
<motion.div
|
||||
className="flex w-full items-center justify-center px-4"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
>
|
||||
{hasConfiguredFolder ? (
|
||||
<Alert className="mb-6 bg-green-50/50 dark:bg-green-950/30 border-green-200 dark:border-green-900">
|
||||
<AlertDescription className="flex items-center justify-between">
|
||||
<span className="text-green-700 dark:text-green-400">
|
||||
{t("dashboard.resumes.synced")}
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="ml-4 hover:bg-green-100 dark:hover:bg-green-900"
|
||||
onClick={() => {
|
||||
router.push("/app/dashboard/settings");
|
||||
}}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
{t("dashboard.resumes.view")}
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert
|
||||
variant="destructive"
|
||||
className="mb-6 bg-red-50/50 dark:bg-red-950/30 border-red-200 dark:border-red-900"
|
||||
>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>{t("dashboard.resumes.notice.title")}</AlertTitle>
|
||||
<AlertDescription className="flex items-center justify-between">
|
||||
<span className="text-red-700 dark:text-red-400">
|
||||
{t("dashboard.resumes.notice.description")}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-4 hover:bg-red-100 dark:hover:bg-red-900"
|
||||
onClick={() => {
|
||||
router.push("/app/dashboard/settings");
|
||||
}}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
{t("dashboard.resumes.notice.goToSettings")}
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="px-4 sm:px-6 flex items-center justify-between"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
|
||||
{t("dashboard.resumes.myResume")}
|
||||
</h1>
|
||||
<div className="flex items-center space-x-2">
|
||||
<AnimatedImportButton onClick={() => setIsImportDialogOpen(true)} t={t} />
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
>
|
||||
<Button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
variant="default"
|
||||
className="bg-gray-900 text-white hover:bg-gray-800 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{t("dashboard.resumes.create")}
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex-1 w-full p-3 sm:p-6"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 sm:gap-6">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
>
|
||||
<Card
|
||||
className={cn(
|
||||
"relative border border-dashed cursor-pointer transition-all duration-200 aspect-[210/297] flex flex-col",
|
||||
"hover:border-gray-400 hover:bg-gray-50",
|
||||
"dark:hover:border-primary dark:hover:bg-primary/10"
|
||||
)}
|
||||
>
|
||||
<CardContent className="flex-1 p-0 text-center flex flex-col items-center justify-center">
|
||||
<motion.div
|
||||
className="mb-4 p-4 rounded-full bg-gray-100 dark:bg-primary/10"
|
||||
whileHover={{ rotate: 90 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Plus className="h-8 w-8 text-gray-600 dark:text-primary" />
|
||||
</motion.div>
|
||||
<CardTitle className="text-xl text-gray-900 dark:text-gray-100 px-4">
|
||||
{t("dashboard.resumes.newResume")}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2 text-gray-600 dark:text-gray-400 px-4">
|
||||
{t("dashboard.resumes.newResumeDescription")}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence>
|
||||
{Object.entries(resumes).map(([id, resume], index) => (
|
||||
<ResumeCardItem
|
||||
key={id}
|
||||
id={id}
|
||||
resume={resume}
|
||||
t={t}
|
||||
locale={locale}
|
||||
setActiveResume={setActiveResume}
|
||||
router={router}
|
||||
deleteResume={deleteResume}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<CreateResumeModal
|
||||
open={isCreateModalOpen}
|
||||
onOpenChange={setIsCreateModalOpen}
|
||||
onCreate={handleCreateFromModal}
|
||||
/>
|
||||
|
||||
<ImportResumeDialog
|
||||
open={isImportDialogOpen}
|
||||
isImporting={isImporting}
|
||||
onOpenChange={setIsImportDialogOpen}
|
||||
jsonFileInputRef={jsonFileInputRef}
|
||||
pdfFileInputRef={pdfFileInputRef}
|
||||
onJsonFileChange={handleJsonFileChange}
|
||||
onPdfFileChange={handlePdfFileChange}
|
||||
/>
|
||||
</motion.div>
|
||||
</ScrollArea>
|
||||
);
|
||||
};
|
||||
export const runtime = "edge";
|
||||
|
||||
export default ResumesList;
|
||||
export default function ResumesPage() {
|
||||
return <ResumeWorkbench />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
import { generateUUID } from "@/utils/uuid";
|
||||
import { initialResumeState } from "@/config/initialResumeData";
|
||||
import { DEFAULT_TEMPLATES } from "@/config";
|
||||
|
||||
export const escapeHtml = (value: string) =>
|
||||
value
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">");
|
||||
|
||||
export const toString = (value: unknown) =>
|
||||
typeof value === "string" ? value.trim() : "";
|
||||
|
||||
export const toStringArray = (value: unknown) => {
|
||||
if (Array.isArray(value)) {
|
||||
return value
|
||||
.map((item) => toString(item))
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
if (typeof value === "string") {
|
||||
return value
|
||||
.split(/\r?\n/)
|
||||
.map((line) => line.replace(/^[-*•\d.)\s]+/, "").trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
return [] as string[];
|
||||
};
|
||||
|
||||
export const toListHtml = (value: unknown) => {
|
||||
const items = toStringArray(value);
|
||||
if (items.length === 0) return "";
|
||||
return `<ul class="custom-list">${items
|
||||
.map((item) => `<li>${escapeHtml(item)}</li>`)
|
||||
.join("")}</ul>`;
|
||||
};
|
||||
|
||||
export const extractJsonContent = (content: string) => {
|
||||
const direct = content.trim();
|
||||
try {
|
||||
return JSON.parse(direct);
|
||||
} catch (error) { }
|
||||
|
||||
const fencedMatch = direct.match(/```(?:json)?\s*([\s\S]*?)```/i);
|
||||
if (fencedMatch?.[1]) {
|
||||
try {
|
||||
return JSON.parse(fencedMatch[1].trim());
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
const objectMatch = direct.match(/\{[\s\S]*\}/);
|
||||
if (objectMatch?.[0]) {
|
||||
try {
|
||||
return JSON.parse(objectMatch[0]);
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
throw new Error("Invalid AI JSON content");
|
||||
};
|
||||
|
||||
export const createResumeFromAIResult = (result: any, fileName: string) => {
|
||||
const now = new Date().toISOString();
|
||||
const id = generateUUID();
|
||||
|
||||
const education = Array.isArray(result?.education) ? result.education : [];
|
||||
const experience = Array.isArray(result?.experience) ? result.experience : [];
|
||||
const projects = Array.isArray(result?.projects) ? result.projects : [];
|
||||
|
||||
const skillSource = result?.skillContent ?? result?.skills;
|
||||
const skillContent = toListHtml(skillSource);
|
||||
|
||||
return {
|
||||
...initialResumeState,
|
||||
id,
|
||||
title: toString(result?.title) || fileName || `Imported Resume ${id.slice(0, 6)}`,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
templateId: DEFAULT_TEMPLATES[0]?.id,
|
||||
basic: {
|
||||
...initialResumeState.basic,
|
||||
name: toString(result?.basic?.name),
|
||||
title: toString(result?.basic?.title),
|
||||
email: toString(result?.basic?.email),
|
||||
phone: toString(result?.basic?.phone),
|
||||
location: toString(result?.basic?.location),
|
||||
employementStatus: toString(result?.basic?.employementStatus),
|
||||
birthDate: toString(result?.basic?.birthDate),
|
||||
customFields: [],
|
||||
photo: "",
|
||||
githubKey: "",
|
||||
githubUseName: "",
|
||||
githubContributionsVisible: false,
|
||||
},
|
||||
education: education
|
||||
.map((item: any) => ({
|
||||
id: generateUUID(),
|
||||
school: toString(item?.school),
|
||||
major: toString(item?.major),
|
||||
degree: toString(item?.degree),
|
||||
startDate: toString(item?.startDate),
|
||||
endDate: toString(item?.endDate),
|
||||
gpa: toString(item?.gpa),
|
||||
description: toListHtml(item?.description),
|
||||
visible: true,
|
||||
}))
|
||||
.filter((item: any) => item.school || item.major || item.degree),
|
||||
experience: experience
|
||||
.map((item: any) => ({
|
||||
id: generateUUID(),
|
||||
company: toString(item?.company),
|
||||
position: toString(item?.position),
|
||||
date: toString(item?.date),
|
||||
details: toListHtml(item?.details || item?.description),
|
||||
visible: true,
|
||||
}))
|
||||
.filter((item: any) => item.company || item.position || item.date || item.details),
|
||||
projects: projects
|
||||
.map((item: any) => ({
|
||||
id: generateUUID(),
|
||||
name: toString(item?.name),
|
||||
role: toString(item?.role),
|
||||
date: toString(item?.date),
|
||||
description: toListHtml(item?.description || item?.details),
|
||||
link: toString(item?.link),
|
||||
visible: true,
|
||||
}))
|
||||
.filter((item: any) => item.name || item.role || item.date || item.description),
|
||||
skillContent,
|
||||
customData: {},
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user