From b88949bb76d1df0beb0f7c8698959d5107e1f1c7 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Thu, 5 Jun 2025 16:27:18 -0700
Subject: [PATCH] Analysis worked!

---
 frontend/src/components/JobMatchAnalysis.tsx | 63 ++++++++++++++------
 1 file changed, 44 insertions(+), 19 deletions(-)

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