jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Analysis worked!

Browse Source
This commit is contained in:
James Ketr 2025-06-05 16:27:18 -07:00
parent 1a13d41f28
commit b88949bb76
1 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/components/JobMatchAnalysis.tsx
View File

@ -13,7 +13,8 @@ import {
Card, Card,
CardContent, CardContent,
useTheme, useTheme,
LinearProgress LinearProgress,
useMediaQuery
} from '@mui/material'; } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@ -25,6 +26,8 @@ import { useAuth } from 'hooks/AuthContext';
import { BackstoryPageProps } from './BackstoryTab'; import { BackstoryPageProps } from './BackstoryTab';
import { toCamelCase } from 'types/conversion'; import { toCamelCase } from 'types/conversion';
import { Job } from 'types/types'; import { Job } from 'types/types';
import { StyledMarkdown } from './StyledMarkdown';
import { Scrollable } from './Scrollable';
interface JobAnalysisProps extends BackstoryPageProps { interface JobAnalysisProps extends BackstoryPageProps {
job: Job; job: Job;
@ -40,8 +43,10 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
job, job,
candidate, candidate,
setSnack, setSnack,
submitQuery
} = props } = props
const { apiClient } = useAuth(); const { apiClient } = useAuth();
const backstoryProps = { setSnack, submitQuery };
const theme = useTheme(); const theme = useTheme();
const [requirements, setRequirements] = useState<{ requirement: string, domain: string }[]>([]); const [requirements, setRequirements] = useState<{ requirement: string, domain: string }[]>([]);
const [skillMatches, setSkillMatches] = useState<SkillMatch[]>([]); const [skillMatches, setSkillMatches] = useState<SkillMatch[]>([]);
@ -51,6 +56,7 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
const [overallScore, setOverallScore] = useState<number>(0); const [overallScore, setOverallScore] = useState<number>(0);
const [requirementsSession, setRequirementsSession] = useState<ChatSession | null>(null); const [requirementsSession, setRequirementsSession] = useState<ChatSession | null>(null);
const [statusMessage, setStatusMessage] = useState<ChatMessage | null>(null); const [statusMessage, setStatusMessage] = useState<ChatMessage | null>(null);
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
// Handle accordion expansion // Handle accordion expansion
const handleAccordionChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { const handleAccordionChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
@ -299,24 +305,43 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
<Box> <Box>
<Paper elevation={3} sx={{ p: 3, mb: 4 }}> <Paper elevation={3} sx={{ p: 3, mb: 4 }}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid size={{ xs: 12 }} sx={{ textAlign: 'center', mb: 2 }}> <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
<Typography variant="h4" component="h1" gutterBottom> <Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexGrow: 1, flexDirection: "column" }}>
Job Match Analysis <Typography variant="h6" component="h2">
</Typography> Company:
<Divider sx={{ mb: 2 }} /> </Typography>
</Grid> <Typography variant="body1" component="h2">
{job.company || "N/A"}
<Grid size={{ xs: 12, md: 6 }}> </Typography>
<Typography variant="h6" component="h2">
Job: {job.title} <Typography variant="h6" component="h2">
</Typography> Job Title:
</Grid> </Typography>
<Typography variant="body1" component="h2">
<Grid size={{ xs: 12, md: 6 }}> {job.title || "N/A"}
<Typography variant="h6" component="h2"> </Typography>
Candidate: {candidate.fullName}
</Typography> <Typography variant="h6" component="h2">
</Grid> Backstory Job Summary:
</Typography>
<Typography variant="body1" component="h2">
{job.summary || "N/A"}
</Typography>
<Typography variant="caption">Job ID: {job.id}</Typography>
</Grid>
<Grid size={{ xs: 12, md: 6 }} sx={{ display: "flex", flexShrink: 1, flexDirection: "column" }}>
<Typography variant="h6" component="h2">
Job Description:
</Typography>
<Paper sx={{ p: 2, maxHeight: "22rem" }}>
<Scrollable sx={{ display: "flex", maxHeight: "100%" }}>
<StyledMarkdown content={job.description} {...backstoryProps} />
</Scrollable>
</Paper>
</Grid>
</Box>
<Grid size={{ xs: 12 }} sx={{ mt: 2 }}> <Grid size={{ xs: 12 }} sx={{ mt: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}> <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>