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

prettier fixes

Browse Source
This commit is contained in:
James Ketr 2025-06-20 11:17:22 -07:00
parent 9c9578cc46
commit b8f7cbcf30
6 changed files with 221 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.prettierignore Normal file
View File

@ -0,0 +1,2 @@
src/types/*

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

@ -309,95 +309,119 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
gap: 1, gap: 1,
}} }}
> >
{overallScore !== 0 && <Paper sx={{ width: '10rem', ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}> {overallScore !== 0 && (
<Chip <Paper
label={ sx={{
overallScore >= 80 width: '10rem',
? 'Excellent Match' ml: 1,
: overallScore >= 60 p: 1,
gap: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'column',
}}
>
<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={{
color: getMatchColor(overallScore), bgcolor: getMatchColor(overallScore),
color: 'white',
fontWeight: 'bold',
}} }}
/> />
<Box <Box
sx={{ sx={{
top: 0, position: 'relative',
left: 0, display: 'inline-flex',
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}} }}
> >
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}> <CircularProgress
{`${Math.round(overallScore)}%`} variant="determinate"
</Typography> 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> </Box>
</Box> </Paper>
</Paper> )}
} {analyzing && (
{analyzing && <Paper sx={{ width: "10rem", ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}> <Paper
<Typography variant="h5" component="h2" sx={{ m: 0, fontSize: '1rem' }}>
Analyzing
</Typography>
<Box
sx={{ sx={{
position: 'relative', width: '10rem',
display: 'inline-flex', ml: 1,
p: 1,
gap: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'column',
}} }}
> >
<CircularProgress <Typography variant="h5" component="h2" sx={{ m: 0, fontSize: '1rem' }}>
variant="determinate" Analyzing
value={percentage} </Typography>
size={60}
thickness={5}
sx={{
color: "orange",
}}
/>
<Box <Box
sx={{ sx={{
top: 0, position: 'relative',
left: 0, display: 'inline-flex',
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}} }}
> >
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}> <CircularProgress
{`${Math.round(percentage)}%`} variant="determinate"
</Typography> 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> </Box>
</Box> </Paper>
</Paper>} )}
</Box> </Box>
<Button <Button
sx={{ marginLeft: 'auto' }} sx={{ marginLeft: 'auto' }}

2
frontend/src/components/layout/BackstoryLayout.tsx
View File

@ -125,7 +125,7 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
{ {
path: route.path, path: route.path,
exact: true, exact: true,
caseSensitive: false caseSensitive: false,
}, },
currentPath currentPath
); );

95
frontend/src/components/ui/JobsTable.tsx
View File

@ -58,35 +58,38 @@ const JobsTable: React.FC<JobsTableProps> = ({
const [selectedJobs, setSelectedJobs] = React.useState<Set<string>>(new Set()); const [selectedJobs, setSelectedJobs] = React.useState<Set<string>>(new Set());
// Fetch jobs from API // Fetch jobs from API
const fetchJobs = React.useCallback(async (pageNum: number = 0, searchTerm: string = '') => { const fetchJobs = React.useCallback(
try { async (pageNum: number = 0, searchTerm: string = '') => {
setLoading(true); try {
setError(null); setLoading(true);
const paginationRequest : Partial<Types.PaginatedRequest> = { setError(null);
page: pageNum + 1, const paginationRequest: Partial<Types.PaginatedRequest> = {
limit: limit, page: pageNum + 1,
sortBy: 'createdAt', limit: limit,
sortOrder: 'desc', sortBy: 'createdAt',
}; sortOrder: 'desc',
};
let paginationResponse : Types.PaginatedResponse; let paginationResponse: Types.PaginatedResponse;
let url = `/api/1.0/jobs`; let url = `/api/1.0/jobs`;
if (searchTerm.trim()) { if (searchTerm.trim()) {
paginationResponse = await apiClient.searchJobs(searchTerm); paginationResponse = await apiClient.searchJobs(searchTerm);
} else { } else {
paginationResponse = await apiClient.getJobs(paginationRequest); paginationResponse = await apiClient.getJobs(paginationRequest);
}
setJobs(paginationResponse.data);
setTotal(paginationResponse.totalPages);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred while fetching jobs');
setJobs([]);
setTotal(0);
} finally {
setLoading(false);
} }
},
setJobs(paginationResponse.data); [limit]
setTotal(paginationResponse.totalPages); );
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred while fetching jobs');
setJobs([]);
setTotal(0);
} finally {
setLoading(false);
}
}, [limit]);
// Initial load // Initial load
React.useEffect(() => { React.useEffect(() => {
@ -97,16 +100,16 @@ const JobsTable: React.FC<JobsTableProps> = ({
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value; const value = event.target.value;
setSearchQuery(value); setSearchQuery(value);
if (searchTimeout) { if (searchTimeout) {
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
} }
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
setPage(0); setPage(0);
fetchJobs(0, value); fetchJobs(0, value);
}, 500); }, 500);
setSearchTimeout(timeout); setSearchTimeout(timeout);
}; };
@ -144,7 +147,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
newSelected.add(jobId); newSelected.add(jobId);
} }
setSelectedJobs(newSelected); setSelectedJobs(newSelected);
const selectedJobsList = jobs.filter(job => newSelected.has(job.id || '')); const selectedJobsList = jobs.filter(job => newSelected.has(job.id || ''));
onJobSelect?.(selectedJobsList); onJobSelect?.(selectedJobsList);
}; };
@ -182,7 +185,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
<Typography variant="h6" component="h2" sx={{ mb: 2 }}> <Typography variant="h6" component="h2" sx={{ mb: 2 }}>
Jobs ({total}) Jobs ({total})
</Typography> </Typography>
<TextField <TextField
fullWidth fullWidth
size="small" size="small"
@ -202,7 +205,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
<TableContainer> <TableContainer>
<Table size="small" aria-label="jobs table"> <Table size="small" aria-label="jobs table">
<TableHead sx={{"& th": { whiteSpace: "nowrap" }}}> <TableHead sx={{ '& th': { whiteSpace: 'nowrap' } }}>
<TableRow> <TableRow>
{selectable && ( {selectable && (
<TableCell padding="checkbox"> <TableCell padding="checkbox">
@ -227,23 +230,29 @@ const JobsTable: React.FC<JobsTableProps> = ({
{showActions && <TableCell align="center">Actions</TableCell>} {showActions && <TableCell align="center">Actions</TableCell>}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody sx={{ "& p, & td" : { m: 0, p: 0.5, fontSize: '0.75rem !important'}}}> <TableBody sx={{ '& p, & td': { m: 0, p: 0.5, fontSize: '0.75rem !important' } }}>
{loading ? ( {loading ? (
<TableRow> <TableRow>
<TableCell colSpan={selectable ? (showActions ? 9 : 8) : (showActions ? 8 : 7)} align="center"> <TableCell
colSpan={selectable ? (showActions ? 9 : 8) : showActions ? 8 : 7}
align="center"
>
<CircularProgress size={24} /> <CircularProgress size={24} />
</TableCell> </TableCell>
</TableRow> </TableRow>
) : jobs.length === 0 ? ( ) : jobs.length === 0 ? (
<TableRow> <TableRow>
<TableCell colSpan={selectable ? (showActions ? 9 : 8) : (showActions ? 8 : 7)} align="center"> <TableCell
colSpan={selectable ? (showActions ? 9 : 8) : showActions ? 8 : 7}
align="center"
>
<Typography variant="body2" color="textSecondary"> <Typography variant="body2" color="textSecondary">
No jobs found No jobs found
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : ( ) : (
jobs.map((job) => { jobs.map(job => {
const isItemSelected = isSelected(job.id || ''); const isItemSelected = isSelected(job.id || '');
return ( return (
<TableRow <TableRow
@ -287,9 +296,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
</Box> </Box>
</TableCell> */} </TableCell> */}
<TableCell> <TableCell>
<Typography variant="body2"> <Typography variant="body2">{getOwnerName(job.owner)}</Typography>
{getOwnerName(job.owner)}
</Typography>
</TableCell> </TableCell>
{/* <TableCell align="right"> {/* <TableCell align="right">
<Typography variant="body2"> <Typography variant="body2">
@ -303,10 +310,8 @@ const JobsTable: React.FC<JobsTableProps> = ({
size="small" size="small"
/> />
</TableCell> </TableCell>
<TableCell sx={{whiteSpace: "nowrap" }}> <TableCell sx={{ whiteSpace: 'nowrap' }}>
<Typography variant="body2"> <Typography variant="body2">{job.createdAt?.toLocaleDateString()}</Typography>
{job.createdAt?.toLocaleDateString()}
</Typography>
</TableCell> </TableCell>
{showActions && ( {showActions && (
<TableCell align="center"> <TableCell align="center">
@ -356,4 +361,4 @@ const JobsTable: React.FC<JobsTableProps> = ({
); );
}; };
export { JobsTable }; export { JobsTable };

76
frontend/src/components/ui/ResumeInfo.tsx
View File

@ -132,7 +132,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
console.log('Resume updated:', result); console.log('Resume updated:', result);
const updatedResume = { const updatedResume = {
...activeResume, ...activeResume,
...result ...result,
}; };
setActiveResume(updatedResume); setActiveResume(updatedResume);
setSnack('Resume updated successfully.'); setSnack('Resume updated successfully.');
@ -491,12 +491,38 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
height: '100%', height: '100%',
}} }}
> >
<Box sx={{ display: 'flex', flexDirection: 'row', height: '100%', gap: 1, pt: 1, width: '100%', position: 'relative', overflow: 'hidden' }}> <Box
<Paper sx={{ p: 1, flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', maxWidth: "100%", height: '100%', overflow: 'hidden' }}> 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',
}}
>
<Tabs value={tabValue} onChange={handleTabChange} centered> <Tabs value={tabValue} onChange={handleTabChange} centered>
<Tab value="markdown" icon={<EditDocumentIcon />} label="Markdown" /> <Tab value="markdown" icon={<EditDocumentIcon />} label="Markdown" />
{activeResume.systemPrompt && <Tab value="systemPrompt" icon={<TuneIcon />} label="System Prompt" />} {activeResume.systemPrompt && (
{activeResume.systemPrompt && <Tab value="prompt" icon={<InputIcon />} label="Prompt" />} <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="preview" icon={<PreviewIcon />} label="Preview" />
<Tab value="print" icon={<PrintIcon />} label="Print" /> <Tab value="print" icon={<PrintIcon />} label="Print" />
<Tab value="regenerate" icon={<ModelTraining />} label="Regenerate" /> <Tab value="regenerate" icon={<ModelTraining />} label="Regenerate" />
@ -532,7 +558,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
onChange={value => setEditContent(value)} onChange={value => setEditContent(value)}
style={{ style={{
position: 'relative', position: 'relative',
maxHeight: "100%", maxHeight: '100%',
height: '100%', height: '100%',
width: '100%', width: '100%',
display: 'flex', display: 'flex',
@ -551,7 +577,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
onChange={value => setEditSystemPrompt(value)} onChange={value => setEditSystemPrompt(value)}
style={{ style={{
position: 'relative', position: 'relative',
maxHeight: "100%", maxHeight: '100%',
// height: '100%', // height: '100%',
width: '100%', width: '100%',
display: 'flex', display: 'flex',
@ -569,7 +595,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
onChange={value => setEditPrompt(value)} onChange={value => setEditPrompt(value)}
style={{ style={{
position: 'relative', position: 'relative',
maxHeight: "100%", maxHeight: '100%',
height: '100%', height: '100%',
width: '100%', width: '100%',
display: 'flex', display: 'flex',
@ -602,11 +628,35 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
)} )}
</Scrollable> </Scrollable>
</Paper> </Paper>
<Scrollable sx={{ flex: 1, display: 'flex', height: '100%', overflowY: 'auto', position: 'relative' }}> <Scrollable
<Paper sx={{ p: 1, flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', backgroundColor: "#f8f0e0" }}> sx={{
{activeResume.job !== undefined && <JobInfo variant={"all"} job={activeResume.job} sx={{ flex: 1,
mt: 2, backgroundColor: "#f8f0e0", //theme.palette.background.paper, display: 'flex',
}} />} height: '100%',
overflowY: 'auto',
position: 'relative',
}}
>
<Paper
sx={{
p: 1,
flex: 1,
display: 'flex',
flexDirection: 'column',
position: 'relative',
backgroundColor: '#f8f0e0',
}}
>
{activeResume.job !== undefined && (
<JobInfo
variant={'all'}
job={activeResume.job}
sx={{
mt: 2,
backgroundColor: '#f8f0e0', //theme.palette.background.paper,
}}
/>
)}
</Paper> </Paper>
</Scrollable> </Scrollable>
</Box> </Box>

18
frontend/src/config/navigationConfig.tsx
View File

@ -203,14 +203,16 @@ export const navigationConfig: NavigationConfig = {
label: 'Jobs Table', label: 'Jobs Table',
path: '/candidate/jobs-table/:jobId?', path: '/candidate/jobs-table/:jobId?',
icon: <WorkIcon />, icon: <WorkIcon />,
component: <JobsTable component: (
onJobSelect={(selectedJobs: Types.Job[]) => console.log('Selected:', selectedJobs)} <JobsTable
onJobView={(job: Types.Job) => console.log('View job:', job)} onJobSelect={(selectedJobs: Types.Job[]) => console.log('Selected:', selectedJobs)}
onJobEdit={(job: Types.Job) => console.log('Edit job:', job)} onJobView={(job: Types.Job) => console.log('View job:', job)}
onJobDelete={(job: Types.Job) => console.log('Delete job:', job)} onJobEdit={(job: Types.Job) => console.log('Edit job:', job)}
selectable={true} onJobDelete={(job: Types.Job) => console.log('Delete job:', job)}
showActions={true} selectable={true}
/>, showActions={true}
/>
),
userTypes: ['candidate', 'guest', 'employer'], userTypes: ['candidate', 'guest', 'employer'],
showInNavigation: false, showInNavigation: false,
showInUserMenu: true, showInUserMenu: true,