1192 lines
36 KiB
TypeScript
1192 lines
36 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import {
|
|
Box,
|
|
Typography,
|
|
SxProps,
|
|
CardHeader,
|
|
Button,
|
|
LinearProgress,
|
|
IconButton,
|
|
Tooltip,
|
|
Card,
|
|
CardContent,
|
|
Divider,
|
|
useTheme,
|
|
useMediaQuery,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Tabs,
|
|
Tab,
|
|
Paper,
|
|
FormControl,
|
|
Select,
|
|
MenuItem,
|
|
InputLabel,
|
|
Theme,
|
|
} from '@mui/material';
|
|
import PrintIcon from '@mui/icons-material/Print';
|
|
import {
|
|
Delete as DeleteIcon,
|
|
Restore as RestoreIcon,
|
|
Save as SaveIcon,
|
|
Edit as EditIcon,
|
|
Description as DescriptionIcon,
|
|
Work as WorkIcon,
|
|
Person as PersonIcon,
|
|
Schedule as ScheduleIcon,
|
|
ModelTraining,
|
|
Email as EmailIcon,
|
|
Phone as PhoneIcon,
|
|
LocationOn as LocationIcon,
|
|
// Language as WebsiteIcon,
|
|
} from '@mui/icons-material';
|
|
import InputIcon from '@mui/icons-material/Input';
|
|
import TuneIcon from '@mui/icons-material/Tune';
|
|
import PreviewIcon from '@mui/icons-material/Preview';
|
|
import EditDocumentIcon from '@mui/icons-material/EditDocument';
|
|
import { parsePhoneNumberFromString } from 'libphonenumber-js';
|
|
|
|
import { useReactToPrint } from 'react-to-print';
|
|
|
|
import { useAuth } from 'hooks/AuthContext';
|
|
import { useAppState } from 'hooks/GlobalContext';
|
|
import { StyledMarkdown } from 'components/StyledMarkdown';
|
|
import { Resume } from 'types/types';
|
|
import { BackstoryTextField } from 'components/BackstoryTextField';
|
|
import { JobInfo } from './JobInfo';
|
|
import './ResumeInfo.css';
|
|
import { Scrollable } from 'components/Scrollable';
|
|
import * as Types from 'types/types';
|
|
import { StreamingOptions } from 'services/api-client';
|
|
import { StatusBox, StatusIcon } from './StatusIcon';
|
|
import { ResumeChat } from 'components/ResumeChat';
|
|
|
|
interface ResumeInfoProps {
|
|
resume: Resume;
|
|
sx?: SxProps;
|
|
action?: string;
|
|
elevation?: number;
|
|
variant?: 'minimal' | 'small' | 'normal' | 'all' | null;
|
|
}
|
|
|
|
// Resume Style Definitions
|
|
interface ResumeStyle {
|
|
name: string;
|
|
description: string;
|
|
headerStyle: SxProps<Theme>;
|
|
footerStyle: SxProps<Theme>;
|
|
contentStyle: SxProps<Theme>;
|
|
markdownStyle: SxProps<Theme>;
|
|
color: {
|
|
primary: string;
|
|
secondary: string;
|
|
accent: string;
|
|
text: string;
|
|
background: string;
|
|
};
|
|
}
|
|
|
|
const generateResumeStyles = () => {
|
|
const defaultStyle = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
};
|
|
|
|
return {
|
|
classic: {
|
|
name: 'Classic',
|
|
description: 'Traditional, professional serif design',
|
|
headerStyle: {
|
|
...defaultStyle,
|
|
fontFamily: '"Times New Roman", Times, serif',
|
|
borderBottom: '2px solid #2c3e50',
|
|
paddingBottom: 2,
|
|
marginBottom: 3,
|
|
},
|
|
footerStyle: {
|
|
fontFamily: '"Times New Roman", Times, serif',
|
|
borderTop: '2px solid #2c3e50',
|
|
paddingTop: 2,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
textTransform: 'uppercase',
|
|
alignContent: 'center',
|
|
fontSize: '0.8rem',
|
|
pb: 2,
|
|
mb: 2,
|
|
},
|
|
contentStyle: {
|
|
fontFamily: '"Times New Roman", Times, serif',
|
|
lineHeight: 1.6,
|
|
color: '#2c3e50',
|
|
},
|
|
markdownStyle: {
|
|
fontFamily: '"Times New Roman", Times, serif',
|
|
'& h1, & h2, & h3': {
|
|
fontFamily: '"Times New Roman", Times, serif',
|
|
color: '#2c3e50',
|
|
borderBottom: '1px solid #bdc3c7',
|
|
paddingBottom: 1,
|
|
marginBottom: 2,
|
|
},
|
|
'& p, & li': {
|
|
lineHeight: 1.6,
|
|
marginBottom: 1,
|
|
},
|
|
'& ul': {
|
|
paddingLeft: 3,
|
|
},
|
|
},
|
|
color: {
|
|
primary: '#2c3e50',
|
|
secondary: '#34495e',
|
|
accent: '#3498db',
|
|
text: '#2c3e50',
|
|
background: '#ffffff',
|
|
},
|
|
},
|
|
modern: {
|
|
name: 'Modern',
|
|
description: 'Clean, minimalist sans-serif layout',
|
|
headerStyle: {
|
|
...defaultStyle,
|
|
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
|
|
borderLeft: '4px solid #3498db',
|
|
paddingLeft: 2,
|
|
marginBottom: 3,
|
|
backgroundColor: '#f8f9fa',
|
|
padding: 2,
|
|
borderRadius: 1,
|
|
},
|
|
footerStyle: {
|
|
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
|
|
borderLeft: '4px solid #3498db',
|
|
backgroundColor: '#f8f9fa',
|
|
paddingTop: 2,
|
|
borderRadius: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
textTransform: 'uppercase',
|
|
alignContent: 'center',
|
|
fontSize: '0.8rem',
|
|
pb: 2,
|
|
mb: 2,
|
|
},
|
|
contentStyle: {
|
|
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
|
|
lineHeight: 1.5,
|
|
color: '#2c3e50',
|
|
},
|
|
markdownStyle: {
|
|
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
|
|
'& h1, & h2, & h3': {
|
|
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
|
|
color: '#3498db',
|
|
fontWeight: 300,
|
|
marginBottom: 1.5,
|
|
},
|
|
'& h1': {
|
|
fontSize: '1.75rem',
|
|
},
|
|
'& h2': {
|
|
fontSize: '1.5rem',
|
|
},
|
|
'& h3': {
|
|
fontSize: '1.25rem',
|
|
},
|
|
'& p, & li': {
|
|
lineHeight: 1.5,
|
|
marginBottom: 0.75,
|
|
},
|
|
'& ul': {
|
|
paddingLeft: 2.5,
|
|
},
|
|
},
|
|
color: {
|
|
primary: '#3498db',
|
|
secondary: '#2c3e50',
|
|
accent: '#e74c3c',
|
|
text: '#2c3e50',
|
|
background: '#ffffff',
|
|
},
|
|
},
|
|
creative: {
|
|
name: 'Creative',
|
|
description: 'Colorful, unique design with personality',
|
|
headerStyle: {
|
|
...defaultStyle,
|
|
fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
color: '#ffffff',
|
|
padding: 2.5,
|
|
borderRadius: 1.5,
|
|
marginBottom: 3,
|
|
},
|
|
footerStyle: {
|
|
fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
color: '#ffffff',
|
|
paddingTop: 2,
|
|
borderRadius: 1.5,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
textTransform: 'uppercase',
|
|
alignContent: 'center',
|
|
fontSize: '0.8rem',
|
|
pb: 2,
|
|
mb: 2,
|
|
},
|
|
contentStyle: {
|
|
fontFamily: '"Open Sans", Arial, sans-serif',
|
|
lineHeight: 1.6,
|
|
color: '#444444',
|
|
},
|
|
markdownStyle: {
|
|
fontFamily: '"Open Sans", Arial, sans-serif',
|
|
'& h1, & h2, & h3': {
|
|
fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
|
|
color: '#667eea',
|
|
fontWeight: 600,
|
|
marginBottom: 2,
|
|
},
|
|
'& h1': {
|
|
fontSize: '1.5rem',
|
|
},
|
|
'& h2': {
|
|
fontSize: '1.25rem',
|
|
},
|
|
'& h3': {
|
|
fontSize: '1.1rem',
|
|
},
|
|
'& p, & li': {
|
|
lineHeight: 1.6,
|
|
marginBottom: 1,
|
|
color: '#444444',
|
|
},
|
|
'& strong': {
|
|
color: '#764ba2',
|
|
fontWeight: 600,
|
|
},
|
|
'& ul': {
|
|
paddingLeft: 3,
|
|
},
|
|
},
|
|
color: {
|
|
primary: '#667eea',
|
|
secondary: '#764ba2',
|
|
accent: '#f093fb',
|
|
text: '#444444',
|
|
background: '#ffffff',
|
|
},
|
|
},
|
|
corporate: {
|
|
name: 'Corporate',
|
|
description: 'Formal, structured business format',
|
|
headerStyle: {
|
|
...defaultStyle,
|
|
fontFamily: '"Arial", sans-serif',
|
|
border: '2px solid #34495e',
|
|
padding: 2.5,
|
|
marginBottom: 3,
|
|
backgroundColor: '#ecf0f1',
|
|
},
|
|
footerStyle: {
|
|
fontFamily: '"Arial", sans-serif',
|
|
border: '2px solid #34495e',
|
|
backgroundColor: '#ecf0f1',
|
|
paddingTop: 2,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
textTransform: 'uppercase',
|
|
alignContent: 'center',
|
|
fontSize: '0.8rem',
|
|
pb: 2,
|
|
mb: 2,
|
|
},
|
|
contentStyle: {
|
|
fontFamily: '"Arial", sans-serif',
|
|
lineHeight: 1.4,
|
|
color: '#2c3e50',
|
|
},
|
|
markdownStyle: {
|
|
fontFamily: '"Arial", sans-serif',
|
|
'& h1, & h2, & h3': {
|
|
fontFamily: '"Arial", sans-serif',
|
|
color: '#34495e',
|
|
fontWeight: 'bold',
|
|
textTransform: 'uppercase',
|
|
fontSize: '0.875rem',
|
|
letterSpacing: '1px',
|
|
marginBottom: 1.5,
|
|
borderBottom: '1px solid #bdc3c7',
|
|
paddingBottom: 0.5,
|
|
},
|
|
'& h1': {
|
|
fontSize: '1rem',
|
|
},
|
|
'& h2': {
|
|
fontSize: '0.875rem',
|
|
},
|
|
'& h3': {
|
|
fontSize: '0.75rem',
|
|
},
|
|
'& p, & li': {
|
|
lineHeight: 1.4,
|
|
marginBottom: 0.75,
|
|
fontSize: '0.75rem',
|
|
},
|
|
'& ul': {
|
|
paddingLeft: 2,
|
|
},
|
|
},
|
|
color: {
|
|
primary: '#34495e',
|
|
secondary: '#2c3e50',
|
|
accent: '#95a5a6',
|
|
text: '#2c3e50',
|
|
background: '#ffffff',
|
|
},
|
|
},
|
|
};
|
|
};
|
|
const resumeStyles: Record<string, ResumeStyle> = generateResumeStyles();
|
|
|
|
// Styled Header Component
|
|
interface BackstoryStyledResumeProps {
|
|
candidate: Types.Candidate;
|
|
job?: Types.Job;
|
|
style: ResumeStyle;
|
|
}
|
|
|
|
const StyledFooter: React.FC<BackstoryStyledResumeProps> = ({ candidate, job, style }) => {
|
|
return (
|
|
<>
|
|
<Box
|
|
className="BackstoryResumeFooter"
|
|
sx={{
|
|
...style.footerStyle,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
textTransform: 'uppercase',
|
|
alignContent: 'center',
|
|
fontSize: '0.8rem',
|
|
pb: 2,
|
|
mb: 2,
|
|
// pt: 2,
|
|
color: style.color.secondary,
|
|
}}
|
|
>
|
|
Dive deeper into my qualifications at Backstory...
|
|
<Box
|
|
component="img"
|
|
src={`/api/1.0/candidates/qr-code/${candidate.id || ''}/${(job && job.id) || ''}`}
|
|
alt="QR Code"
|
|
className="qr-code"
|
|
sx={{ display: 'flex', mt: 1, mb: 1 }}
|
|
/>
|
|
{candidate?.username
|
|
? `${window.location.protocol}://${window.location.host}/u/${candidate?.username}`
|
|
: 'backstory'}
|
|
</Box>
|
|
<Box sx={{ pb: 2 }}> </Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }) => {
|
|
const phone = parsePhoneNumberFromString(candidate.phone || '', 'US');
|
|
return (
|
|
<Box className="BackstoryResumeHeader" sx={style.headerStyle}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
|
|
<Typography
|
|
variant="h4"
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
mb: 1,
|
|
color: style.name === 'creative' ? '#ffffff' : style.color.primary,
|
|
fontFamily: 'inherit',
|
|
}}
|
|
>
|
|
{candidate.fullName}
|
|
</Typography>
|
|
|
|
{candidate.description && (
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
mb: 2,
|
|
fontWeight: 300,
|
|
color: style.name === 'creative' ? '#ffffff' : style.color.secondary,
|
|
fontFamily: 'inherit',
|
|
fontSize: '0.8rem !important',
|
|
}}
|
|
>
|
|
{candidate.description}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexWrap: 'wrap',
|
|
alignContent: 'center',
|
|
flexGrow: 1,
|
|
minWidth: 'fit-content',
|
|
gap: 1,
|
|
}}
|
|
>
|
|
{candidate.email && (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', m: 0, p: 0 }}>
|
|
<EmailIcon
|
|
fontSize="small"
|
|
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
|
|
/>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
color: style.name === 'creative' ? '#ffffff' : style.color.text,
|
|
fontFamily: 'inherit',
|
|
}}
|
|
>
|
|
{candidate.email}
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
|
|
{phone?.isValid() && (
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<PhoneIcon
|
|
fontSize="small"
|
|
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
|
|
/>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
color: style.name === 'creative' ? '#ffffff' : style.color.text,
|
|
fontFamily: 'inherit',
|
|
}}
|
|
>
|
|
{phone.formatInternational()}
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
|
|
{candidate.location && (
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<LocationIcon
|
|
fontSize="small"
|
|
sx={{ mr: 1, color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
|
|
/>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
color: style.name === 'creative' ? '#ffffff' : style.color.text,
|
|
fontFamily: 'inherit',
|
|
}}
|
|
>
|
|
{candidate.location.city
|
|
? `${candidate.location.city}, ${candidate.location.state}`
|
|
: candidate.location.text}
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* {(candidate.website || candidate.linkedin) && (
|
|
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<WebsiteIcon
|
|
fontSize="small"
|
|
sx={{ color: style.name === 'creative' ? '#ffffff' : style.color.accent }}
|
|
/>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
color: style.name === 'creative' ? '#ffffff' : style.color.text,
|
|
fontFamily: 'inherit',
|
|
}}
|
|
>
|
|
{candidate.website || candidate.linkedin}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
)} */}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
|
|
const { setSnack } = useAppState();
|
|
const { resume } = props;
|
|
const { user, apiClient } = useAuth();
|
|
const { sx, variant = 'normal' } = props;
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md')) || variant === 'minimal';
|
|
const isAdmin = user?.isAdmin;
|
|
const [activeResume, setActiveResume] = useState<Resume>({ ...resume });
|
|
const [deleted, setDeleted] = useState<boolean>(false);
|
|
const [editDialogOpen, setEditDialogOpen] = useState<boolean>(false);
|
|
const [editContent, setEditContent] = useState<string>('');
|
|
const [editSystemPrompt, setEditSystemPrompt] = useState<string>('');
|
|
const [editPrompt, setEditPrompt] = useState<string>('');
|
|
const [saving, setSaving] = useState<boolean>(false);
|
|
const [tabValue, setTabValue] = useState('markdown');
|
|
const [jobTabValue, setJobTabValue] = useState('chat');
|
|
const [status, setStatus] = useState<string>('');
|
|
const [statusType, setStatusType] = useState<Types.ApiActivityType | null>(null);
|
|
const [error, setError] = useState<Types.ChatMessageError | null>(null);
|
|
const [selectedStyle, setSelectedStyle] = useState<string>('corporate');
|
|
|
|
const printContentRef = useRef<HTMLDivElement>(null);
|
|
const reactToPrintFn = useReactToPrint({
|
|
contentRef: printContentRef,
|
|
pageStyle: '@page { margin: 8mm !important; }',
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (resume && resume.id !== activeResume?.id) {
|
|
setActiveResume(resume);
|
|
}
|
|
}, [resume, activeResume]);
|
|
|
|
const currentStyle = resumeStyles[selectedStyle];
|
|
|
|
// Rest of the component remains the same...
|
|
const deleteResume = async (id: string | undefined): Promise<void> => {
|
|
if (id) {
|
|
try {
|
|
await apiClient.deleteResume(id);
|
|
setDeleted(true);
|
|
setSnack('Resume deleted successfully.');
|
|
} catch (error) {
|
|
setSnack('Failed to delete resume.');
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleReset = async (): Promise<void> => {
|
|
setActiveResume({ ...resume });
|
|
};
|
|
|
|
const handleSave = async (): Promise<void> => {
|
|
setSaving(true);
|
|
try {
|
|
const resumeUpdate = {
|
|
...activeResume,
|
|
resume: editContent,
|
|
systemPrompt: editSystemPrompt,
|
|
prompt: editPrompt,
|
|
};
|
|
const result = await apiClient.updateResume(resumeUpdate);
|
|
console.log('Resume updated:', result);
|
|
const updatedResume = {
|
|
...activeResume,
|
|
...result,
|
|
};
|
|
setActiveResume(updatedResume);
|
|
setSnack('Resume updated successfully.');
|
|
} catch (error) {
|
|
setSnack('Failed to update resume.');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleEditOpen = (): void => {
|
|
setEditContent(activeResume.resume);
|
|
setEditSystemPrompt(activeResume.systemPrompt || '');
|
|
setEditPrompt(activeResume.prompt || '');
|
|
setEditDialogOpen(true);
|
|
};
|
|
|
|
if (!resume) {
|
|
return <Box>No resume provided.</Box>;
|
|
}
|
|
|
|
const formatDate = (date: Date | undefined): string => {
|
|
if (!date) return 'N/A';
|
|
try {
|
|
return new Intl.DateTimeFormat('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
}).format(date);
|
|
} catch (error) {
|
|
console.error('Error formatting date:', error);
|
|
return 'Invalid date';
|
|
}
|
|
};
|
|
|
|
const generateResumeHandlers: StreamingOptions<Types.ChatMessageResume> = {
|
|
onMessage: (message: Types.ChatMessageResume) => {
|
|
const resume: Resume = message.resume;
|
|
setEditSystemPrompt(resume.systemPrompt || '');
|
|
setEditPrompt(resume.prompt || '');
|
|
setEditContent(resume.resume);
|
|
setActiveResume({ ...resume });
|
|
setStatus('');
|
|
setSnack('Resume generation completed successfully.');
|
|
},
|
|
onStreaming: (chunk: Types.ChatMessageStreaming) => {
|
|
if (status === '') {
|
|
setStatus('Generating resume...');
|
|
setStatusType('generating');
|
|
}
|
|
setEditContent(chunk.content);
|
|
},
|
|
onStatus: (status: Types.ChatMessageStatus) => {
|
|
console.log('status:', status.content);
|
|
setStatusType(status.activity);
|
|
setStatus(status.content);
|
|
},
|
|
onError: (error: Types.ChatMessageError) => {
|
|
console.log('error:', error);
|
|
setStatusType(null);
|
|
setStatus(error.content);
|
|
setError(error);
|
|
},
|
|
};
|
|
|
|
const generateResume = async (): Promise<void> => {
|
|
setStatusType('thinking');
|
|
setStatus('Starting resume generation...');
|
|
setActiveResume({ ...activeResume, resume: '' });
|
|
const request = await apiClient.generateResume(
|
|
activeResume.candidateId || '',
|
|
activeResume.jobId || '',
|
|
generateResumeHandlers
|
|
);
|
|
await request.promise;
|
|
};
|
|
|
|
const handleTabChange = (event: React.SyntheticEvent, newValue: string): void => {
|
|
if (newValue === 'print') {
|
|
reactToPrintFn();
|
|
return;
|
|
}
|
|
if (newValue === 'regenerate') {
|
|
setSnack('Regenerating resume...');
|
|
generateResume();
|
|
return;
|
|
}
|
|
setTabValue(newValue);
|
|
};
|
|
|
|
const handleJobTabChange = (event: React.SyntheticEvent, newValue: string): void => {
|
|
setJobTabValue(newValue);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
borderColor: 'transparent',
|
|
borderWidth: 2,
|
|
borderStyle: 'solid',
|
|
transition: 'all 0.3s ease',
|
|
flexDirection: 'column',
|
|
minWidth: 0,
|
|
opacity: deleted ? 0.5 : 1.0,
|
|
backgroundColor: deleted
|
|
? theme.palette.action.disabledBackground
|
|
: theme.palette.background.paper,
|
|
pointerEvents: deleted ? 'none' : 'auto',
|
|
...sx,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexGrow: 1,
|
|
p: 1,
|
|
pb: 0,
|
|
height: '100%',
|
|
flexDirection: 'column',
|
|
alignItems: 'stretch',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{/* Header Information */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: isMobile ? 'column' : 'row',
|
|
gap: 2,
|
|
mb: 2,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
|
|
{activeResume.candidate && (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<PersonIcon color="primary" fontSize="small" />
|
|
<Typography variant="subtitle2" fontWeight="bold">
|
|
Candidate
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
<Typography variant="body2" color="text.secondary">
|
|
{activeResume.candidate?.fullName || activeResume.candidateId}
|
|
</Typography>
|
|
|
|
{activeResume.job && (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 1,
|
|
mt: 1,
|
|
}}
|
|
>
|
|
<WorkIcon color="primary" fontSize="small" />
|
|
<Typography variant="subtitle2" fontWeight="bold">
|
|
Job
|
|
</Typography>
|
|
</Box>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{activeResume.job.title} at {activeResume.job.company}
|
|
</Typography>
|
|
</>
|
|
)}
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<ScheduleIcon color="primary" fontSize="small" />
|
|
<Typography variant="subtitle2" fontWeight="bold">
|
|
Timeline
|
|
</Typography>
|
|
</Box>
|
|
<Typography variant="caption" color="text.secondary">
|
|
Created: {formatDate(activeResume.createdAt)}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
Updated: {formatDate(activeResume.updatedAt)}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
Job ID: {activeResume.job?.id}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
Resume ID: {activeResume.id}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Divider sx={{ mb: 2 }} />
|
|
|
|
{/* Resume Content */}
|
|
{activeResume.resume && (
|
|
<Card elevation={0} sx={{ m: 0, p: 0, background: 'transparent !important' }}>
|
|
<CardHeader
|
|
title="Resume Content"
|
|
avatar={<DescriptionIcon color="success" />}
|
|
sx={{ p: 0, pb: 1 }}
|
|
action={
|
|
<Tooltip title="Edit Resume Content">
|
|
<IconButton size="small" onClick={handleEditOpen}>
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
}
|
|
/>
|
|
{variant === 'all' && activeResume.resume && (
|
|
<CardContent sx={{ p: 0 }}>
|
|
<StyledMarkdown content={activeResume.resume} />
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Admin Controls */}
|
|
{isAdmin && (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', p: 1 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
pl: 1,
|
|
pr: 1,
|
|
gap: 1,
|
|
alignContent: 'center',
|
|
height: '32px',
|
|
}}
|
|
>
|
|
<Tooltip title="Edit Resume">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e): void => {
|
|
e.stopPropagation();
|
|
handleEditOpen();
|
|
}}
|
|
>
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Delete Resume">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e): void => {
|
|
e.stopPropagation();
|
|
deleteResume(activeResume.id);
|
|
}}
|
|
>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Reset Resume">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e): void => {
|
|
e.stopPropagation();
|
|
handleReset();
|
|
}}
|
|
>
|
|
<RestoreIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
|
|
{saving && (
|
|
<Box sx={{ mt: 1 }}>
|
|
<LinearProgress />
|
|
<Typography variant="caption" sx={{ mt: 0.5 }}>
|
|
Saving resume...
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)}
|
|
|
|
{/* Edit Dialog */}
|
|
<Dialog
|
|
open={editDialogOpen}
|
|
onClose={(): void => {
|
|
setEditDialogOpen(false);
|
|
}}
|
|
maxWidth="lg"
|
|
fullWidth
|
|
disableEscapeKeyDown={true}
|
|
fullScreen={true}
|
|
>
|
|
<DialogTitle>
|
|
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, m: 0, p: 0 }}>
|
|
Edit Resume Content
|
|
<Typography variant="caption" display="block" color="text.secondary">
|
|
Resume for {activeResume.candidate?.fullName || activeResume.candidateId},{' '}
|
|
{activeResume.job?.title || 'No Job Title Assigned'},{' '}
|
|
{activeResume.job?.company || 'No Company Assigned'}
|
|
</Typography>
|
|
<Typography variant="caption" display="block" color="text.secondary">
|
|
Resume ID: # {activeResume.id}
|
|
</Typography>
|
|
<Typography variant="caption" display="block" color="text.secondary">
|
|
Last saved:{' '}
|
|
{activeResume.updatedAt ? new Date(activeResume.updatedAt).toLocaleString() : 'N/A'}
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexGrow: 1,
|
|
flexDirection: 'row',
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
{/* Style Selector */}
|
|
<FormControl size="small" sx={{ minWidth: 'min-content' }}>
|
|
<InputLabel id="resume-style-label">Resume Style</InputLabel>
|
|
<Select
|
|
labelId="resume-style-label"
|
|
value={selectedStyle}
|
|
onChange={e => setSelectedStyle(e.target.value)}
|
|
label="Resume Style"
|
|
>
|
|
{Object.entries(resumeStyles).map(([key, style]) => (
|
|
<MenuItem key={key} value={key}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
}}
|
|
>
|
|
<Typography variant="body2" fontWeight="bold">
|
|
{style.name}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{style.description}
|
|
</Typography>
|
|
</Box>
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
|
|
<Tabs value={tabValue} onChange={handleTabChange}>
|
|
<Tab value="markdown" icon={<EditDocumentIcon />} label="Markdown" />
|
|
{activeResume.systemPrompt && (
|
|
<Tab value="systemPrompt" icon={<TuneIcon />} label="System Prompt" />
|
|
)}
|
|
{activeResume.systemPrompt && (
|
|
<Tab value="prompt" icon={<InputIcon />} label="Prompt" />
|
|
)}
|
|
<Tab value="preview" icon={<PreviewIcon />} label="Preview" />
|
|
<Tab value="print" icon={<PrintIcon />} label="Print" />
|
|
<Tab value="regenerate" icon={<ModelTraining />} label="Regenerate" />
|
|
</Tabs>
|
|
</Box>
|
|
</Box>
|
|
</DialogTitle>
|
|
<DialogContent
|
|
sx={{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
height: '100%',
|
|
gap: 1,
|
|
pt: 1,
|
|
width: '100%',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Paper
|
|
sx={{
|
|
p: 1,
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
maxWidth: '100%',
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{status && (
|
|
<Box sx={{ mt: 0, mb: 1 }}>
|
|
<StatusBox>
|
|
{statusType && <StatusIcon type={statusType} />}
|
|
<Typography variant="body2" sx={{ ml: 1 }}>
|
|
{status || 'Processing...'}
|
|
</Typography>
|
|
</StatusBox>
|
|
{status && !error && <LinearProgress sx={{ mt: 1 }} />}
|
|
</Box>
|
|
)}
|
|
<Scrollable
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
width: '100%',
|
|
minHeight: 0,
|
|
'& > *:not(.Scrollable)': {
|
|
flexShrink: 0,
|
|
},
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{tabValue === 'markdown' && (
|
|
<BackstoryTextField
|
|
value={editContent}
|
|
onChange={(value): void => setEditContent(value)}
|
|
style={{
|
|
position: 'relative',
|
|
maxHeight: '100%',
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
minHeight: '100%',
|
|
flexGrow: 1,
|
|
flex: 1,
|
|
overflowY: 'auto',
|
|
}}
|
|
placeholder="Enter resume content..."
|
|
/>
|
|
)}
|
|
{tabValue === 'systemPrompt' && (
|
|
<BackstoryTextField
|
|
value={editSystemPrompt}
|
|
onChange={(value): void => setEditSystemPrompt(value)}
|
|
style={{
|
|
position: 'relative',
|
|
maxHeight: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
minHeight: '100%',
|
|
flexGrow: 1,
|
|
flex: 1,
|
|
overflowY: 'auto',
|
|
}}
|
|
placeholder="Edit system prompt..."
|
|
/>
|
|
)}
|
|
{tabValue === 'prompt' && (
|
|
<BackstoryTextField
|
|
value={editPrompt}
|
|
onChange={(value): void => setEditPrompt(value)}
|
|
style={{
|
|
position: 'relative',
|
|
maxHeight: '100%',
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
minHeight: '100%',
|
|
flexGrow: 1,
|
|
flex: 1,
|
|
overflowY: 'auto',
|
|
}}
|
|
placeholder="Edit prompt..."
|
|
/>
|
|
)}
|
|
{tabValue === 'preview' && (
|
|
<Box
|
|
className="document-container"
|
|
ref={printContentRef}
|
|
sx={currentStyle.contentStyle}
|
|
>
|
|
<Box
|
|
className="a4-document"
|
|
sx={{
|
|
backgroundColor: currentStyle.color.background,
|
|
padding: 5,
|
|
minHeight: '100vh',
|
|
boxShadow: '0 0 10px rgba(0,0,0,0.1)',
|
|
}}
|
|
>
|
|
{/* Custom Header */}
|
|
{activeResume.candidate && (
|
|
<StyledHeader candidate={activeResume.candidate} style={currentStyle} />
|
|
)}
|
|
|
|
{/* Styled Markdown Content */}
|
|
<Box sx={currentStyle.markdownStyle}>
|
|
<StyledMarkdown
|
|
sx={{
|
|
position: 'relative',
|
|
maxHeight: '100%',
|
|
display: 'flex',
|
|
flexGrow: 1,
|
|
flex: 1,
|
|
...currentStyle.markdownStyle,
|
|
}}
|
|
content={editContent || activeResume.resume || ''}
|
|
/>
|
|
</Box>
|
|
|
|
{/* QR Code Footer */}
|
|
{activeResume.candidate && activeResume.job && (
|
|
<StyledFooter
|
|
candidate={activeResume.candidate}
|
|
job={activeResume.job}
|
|
style={currentStyle}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Scrollable>
|
|
</Paper>
|
|
<Scrollable
|
|
sx={{
|
|
flex: 1,
|
|
display: 'flex',
|
|
height: '100%',
|
|
overflowY: 'auto',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<Paper
|
|
sx={{
|
|
p: 1,
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
// backgroundColor: '#f8f0e0',
|
|
}}
|
|
>
|
|
<Tabs value={jobTabValue} onChange={handleJobTabChange}>
|
|
{activeResume.job !== undefined && (
|
|
<Tab value="job" icon={<WorkIcon />} label="Job" />
|
|
)}
|
|
<Tab value="chat" icon={<ModelTraining />} label="AI Edit" />
|
|
</Tabs>
|
|
|
|
{activeResume.job !== undefined && jobTabValue === 'job' && (
|
|
<JobInfo
|
|
variant={'all'}
|
|
job={activeResume.job}
|
|
sx={{
|
|
m: 0,
|
|
p: 1,
|
|
backgroundColor: '#f8f0e0',
|
|
}}
|
|
/>
|
|
)}
|
|
{jobTabValue === 'chat' && (
|
|
<ResumeChat
|
|
session={activeResume.id || ''}
|
|
resume={editContent}
|
|
onResumeChange={(newResume: string): void => {
|
|
setEditContent(newResume);
|
|
setActiveResume({ ...activeResume, resume: newResume });
|
|
}}
|
|
sx={{
|
|
m: 1,
|
|
p: 1,
|
|
flexGrow: 1,
|
|
}}
|
|
/>
|
|
)}
|
|
</Paper>
|
|
</Scrollable>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={(): void => setEditDialogOpen(false)}>Cancel</Button>
|
|
<Button
|
|
onClick={handleSave}
|
|
variant="contained"
|
|
disabled={saving}
|
|
startIcon={<SaveIcon />}
|
|
>
|
|
{saving ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export { ResumeInfo };
|