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,
}}
>
{overallScore !== 0 && <Paper sx={{ width: '10rem', ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
<Chip
label={
overallScore >= 80
? 'Excellent Match'
: overallScore >= 60
{overallScore !== 0 && (
<Paper
sx={{
width: '10rem',
ml: 1,
p: 1,
gap: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'column',
}}
>
<Chip
label={
overallScore >= 80
? 'Excellent Match'
: overallScore >= 60
? 'Good Match'
: overallScore >= 40
? 'Partial 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}
? 'Partial Match'
: 'Low Match'
}
sx={{
color: getMatchColor(overallScore),
bgcolor: getMatchColor(overallScore),
color: 'white',
fontWeight: 'bold',
}}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
display: 'inline-flex',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(overallScore)}%`}
</Typography>
<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>
</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
</Paper>
)}
{analyzing && (
<Paper
sx={{
position: 'relative',
display: 'inline-flex',
width: '10rem',
ml: 1,
p: 1,
gap: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'column',
}}
>
<CircularProgress
variant="determinate"
value={percentage}
size={60}
thickness={5}
sx={{
color: "orange",
}}
/>
<Typography variant="h5" component="h2" sx={{ m: 0, fontSize: '1rem' }}>
Analyzing
</Typography>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
display: 'inline-flex',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(percentage)}%`}
</Typography>
<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>
</Box>
</Paper>}
</Paper>
)}
</Box>
<Button
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,
exact: true,
caseSensitive: false
caseSensitive: false,
},
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());
// Fetch jobs from API
const fetchJobs = React.useCallback(async (pageNum: number = 0, searchTerm: string = '') => {
try {
setLoading(true);
setError(null);
const paginationRequest : Partial<Types.PaginatedRequest> = {
page: pageNum + 1,
limit: limit,
sortBy: 'createdAt',
sortOrder: 'desc',
};
const fetchJobs = React.useCallback(
async (pageNum: number = 0, searchTerm: string = '') => {
try {
setLoading(true);
setError(null);
const paginationRequest: Partial<Types.PaginatedRequest> = {
page: pageNum + 1,
limit: limit,
sortBy: 'createdAt',
sortOrder: 'desc',
};
let paginationResponse : Types.PaginatedResponse;
let url = `/api/1.0/jobs`;
if (searchTerm.trim()) {
paginationResponse = await apiClient.searchJobs(searchTerm);
} else {
paginationResponse = await apiClient.getJobs(paginationRequest);
let paginationResponse: Types.PaginatedResponse;
let url = `/api/1.0/jobs`;
if (searchTerm.trim()) {
paginationResponse = await apiClient.searchJobs(searchTerm);
} else {
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);
setTotal(paginationResponse.totalPages);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred while fetching jobs');
setJobs([]);
setTotal(0);
} finally {
setLoading(false);
}
}, [limit]);
},
[limit]
);
// Initial load
React.useEffect(() => {
@ -97,16 +100,16 @@ const JobsTable: React.FC<JobsTableProps> = ({
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setSearchQuery(value);
if (searchTimeout) {
clearTimeout(searchTimeout);
}
const timeout = setTimeout(() => {
setPage(0);
fetchJobs(0, value);
}, 500);
setSearchTimeout(timeout);
};
@ -144,7 +147,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
newSelected.add(jobId);
}
setSelectedJobs(newSelected);
const selectedJobsList = jobs.filter(job => newSelected.has(job.id || ''));
onJobSelect?.(selectedJobsList);
};
@ -182,7 +185,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
<Typography variant="h6" component="h2" sx={{ mb: 2 }}>
Jobs ({total})
</Typography>
<TextField
fullWidth
size="small"
@ -202,7 +205,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
<TableContainer>
<Table size="small" aria-label="jobs table">
<TableHead sx={{"& th": { whiteSpace: "nowrap" }}}>
<TableHead sx={{ '& th': { whiteSpace: 'nowrap' } }}>
<TableRow>
{selectable && (
<TableCell padding="checkbox">
@ -227,23 +230,29 @@ const JobsTable: React.FC<JobsTableProps> = ({
{showActions && <TableCell align="center">Actions</TableCell>}
</TableRow>
</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 ? (
<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} />
</TableCell>
</TableRow>
) : jobs.length === 0 ? (
<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">
No jobs found
</Typography>
</TableCell>
</TableRow>
) : (
jobs.map((job) => {
jobs.map(job => {
const isItemSelected = isSelected(job.id || '');
return (
<TableRow
@ -287,9 +296,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
</Box>
</TableCell> */}
<TableCell>
<Typography variant="body2">
{getOwnerName(job.owner)}
</Typography>
<Typography variant="body2">{getOwnerName(job.owner)}</Typography>
</TableCell>
{/* <TableCell align="right">
<Typography variant="body2">
@ -303,10 +310,8 @@ const JobsTable: React.FC<JobsTableProps> = ({
size="small"
/>
</TableCell>
<TableCell sx={{whiteSpace: "nowrap" }}>
<Typography variant="body2">
{job.createdAt?.toLocaleDateString()}
</Typography>
<TableCell sx={{ whiteSpace: 'nowrap' }}>
<Typography variant="body2">{job.createdAt?.toLocaleDateString()}</Typography>
</TableCell>
{showActions && (
<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);
const updatedResume = {
...activeResume,
...result
...result,
};
setActiveResume(updatedResume);
setSnack('Resume updated successfully.');
@ -491,12 +491,38 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
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' }}>
<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',
}}
>
<Tabs value={tabValue} onChange={handleTabChange} centered>
<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" />}
{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" />
@ -532,7 +558,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
onChange={value => setEditContent(value)}
style={{
position: 'relative',
maxHeight: "100%",
maxHeight: '100%',
height: '100%',
width: '100%',
display: 'flex',
@ -551,7 +577,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
onChange={value => setEditSystemPrompt(value)}
style={{
position: 'relative',
maxHeight: "100%",
maxHeight: '100%',
// height: '100%',
width: '100%',
display: 'flex',
@ -569,7 +595,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
onChange={value => setEditPrompt(value)}
style={{
position: 'relative',
maxHeight: "100%",
maxHeight: '100%',
height: '100%',
width: '100%',
display: 'flex',
@ -602,11 +628,35 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
)}
</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" }}>
{activeResume.job !== undefined && <JobInfo variant={"all"} job={activeResume.job} sx={{
mt: 2, backgroundColor: "#f8f0e0", //theme.palette.background.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',
}}
>
{activeResume.job !== undefined && (
<JobInfo
variant={'all'}
job={activeResume.job}
sx={{
mt: 2,
backgroundColor: '#f8f0e0', //theme.palette.background.paper,
}}
/>
)}
</Paper>
</Scrollable>
</Box>

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

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