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

Added analysis complete progress

Browse Source
This commit is contained in:
James Ketr 2025-06-19 08:55:01 -07:00
parent 5c867af814
commit ffd4b829f6
2 changed files with 90 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/BackstoryApp.css
View File

@ -205,7 +205,7 @@ button {
} }
/* Reduce space between headings and content */ /* Reduce space between headings and content */
* h1.MuiTypography-root, /* * h1.MuiTypography-root,
* h2.MuiTypography-root, * h2.MuiTypography-root,
* h3.MuiTypography-root, * h3.MuiTypography-root,
* h4.MuiTypography-root, * h4.MuiTypography-root,
@ -214,7 +214,7 @@ button {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1rem;
} } */
/* Reduce space in lists */ /* Reduce space in lists */
* ul.MuiTypography-root, * ul.MuiTypography-root,

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

@ -13,6 +13,7 @@ import {
LinearProgress, LinearProgress,
useMediaQuery, useMediaQuery,
Button, Button,
Paper,
} 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';
@ -53,6 +54,7 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
const [analyzing, setAnalyzing] = useState<boolean>(false); const [analyzing, setAnalyzing] = useState<boolean>(false);
const [matchStatus, setMatchStatus] = useState<string>(''); const [matchStatus, setMatchStatus] = useState<string>('');
const [_matchStatusType, setMatchStatusType] = useState<Types.ApiActivityType | null>(null); const [_matchStatusType, setMatchStatusType] = useState<Types.ApiActivityType | null>(null);
const [percentage, setPercentage] = useState<number>(0);
const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
@ -239,10 +241,12 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
return updated; return updated;
}); });
} }
setPercentage(Math.round(((i + 1) / requirements.length) * 100));
} }
}; };
setAnalyzing(true); setAnalyzing(true);
setPercentage(0);
const skills: SkillAssessment[] = []; const skills: SkillAssessment[] = [];
fetchMatchData(skills).then(() => { fetchMatchData(skills).then(() => {
setAnalyzing(false); setAnalyzing(false);
@ -305,62 +309,95 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
gap: 1, gap: 1,
}} }}
> >
{overallScore !== 0 && ( {overallScore !== 0 && <Paper sx={{ width: '10rem', ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
<> <Chip
<Typography variant="h5" component="h2" sx={{ mr: 2 }}> label={
Overall Match: overallScore >= 80
</Typography> ? 'Excellent Match'
<Box : overallScore >= 60
sx={{
position: 'relative',
display: 'inline-flex',
mr: 2,
}}
>
<CircularProgress
variant="determinate"
value={overallScore}
size={60}
thickness={5}
sx={{
color: getMatchColor(overallScore),
}}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(overallScore)}%`}
</Typography>
</Box>
</Box>
<Chip
label={
overallScore >= 80
? 'Excellent Match'
: overallScore >= 60
? 'Good Match' ? 'Good Match'
: overallScore >= 40 : overallScore >= 40
? 'Partial Match' ? 'Partial Match'
: 'Low Match' : 'Low Match'
} }
sx={{
bgcolor: getMatchColor(overallScore),
color: 'white',
fontWeight: 'bold',
}}
/>
<Box
sx={{
position: 'relative',
display: 'inline-flex',
}}
>
<CircularProgress
variant="determinate"
value={overallScore}
size={60}
thickness={5}
sx={{ sx={{
bgcolor: getMatchColor(overallScore), color: getMatchColor(overallScore),
color: 'white',
fontWeight: 'bold',
}} }}
/> />
</> <Box
)} sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(overallScore)}%`}
</Typography>
</Box>
</Box>
</Paper>
}
{analyzing && <Paper sx={{ width: "10rem", ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
<Typography variant="h5" component="h2" sx={{ m: 0, fontSize: '1rem' }}>
Analyzing
</Typography>
<Box
sx={{
position: 'relative',
display: 'inline-flex',
}}
>
<CircularProgress
variant="determinate"
value={percentage}
size={60}
thickness={5}
sx={{
color: "orange",
}}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(percentage)}%`}
</Typography>
</Box>
</Box>
</Paper>}
</Box> </Box>
<Button <Button
sx={{ marginLeft: 'auto' }} sx={{ marginLeft: 'auto' }}