From 8bd6f30973d5885b59340bd88c3352a78ddfcb38 Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Sun, 22 Mar 2026 14:36:36 +0100
Subject: [PATCH] feat: add drag and drop uploads and profile workspace polish

---
 job-tracker-ui/src/components/Attachments.tsx | 146 ++++++++++++------
 job-tracker-ui/src/pages/ProfilePage.tsx      | 106 +++++--------
 2 files changed, 134 insertions(+), 118 deletions(-)

diff --git a/job-tracker-ui/src/components/Attachments.tsx b/job-tracker-ui/src/components/Attachments.tsx
index b4a645a..ab3d300 100644
--- a/job-tracker-ui/src/components/Attachments.tsx
+++ b/job-tracker-ui/src/components/Attachments.tsx
@@ -1,13 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import {
+  Alert,
   Box,
   Button,
+  Chip,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
+  LinearProgress,
   Table,
   TableBody,
   TableCell,
@@ -21,6 +24,7 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
 import DownloadIcon from "@mui/icons-material/Download";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import CloudUploadOutlinedIcon from "@mui/icons-material/CloudUploadOutlined";
 
 import { api } from "../api";
 import { useToast } from "../toast";
@@ -63,6 +67,9 @@ export default function Attachments({ jobId }: { jobId: number }) {
   const [items, setItems] = useState<AttachmentItem[]>([]);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [preview, setPreview] = useState<{ url: string; type: string; name: string } | null>(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const load = useCallback(async () => {
     try {
@@ -83,6 +90,30 @@ export default function Attachments({ jobId }: { jobId: number }) {
     };
   }, [preview?.url]);
 
+  const uploadFiles = useCallback(
+    async (files: File[]) => {
+      if (!files.length) return;
+
+      const data = new FormData();
+      files.forEach((f) => data.append("files", f));
+      data.append("jobId", jobId.toString());
+
+      setUploading(true);
+      try {
+        await api.post("/attachments", data, {
+          headers: { "Content-Type": "multipart/form-data" },
+        });
+        toast(files.length === 1 ? "File uploaded." : `${files.length} files uploaded.`, "success");
+        await load();
+      } catch {
+        toast("Upload failed.", "error");
+      } finally {
+        setUploading(false);
+      }
+    },
+    [jobId, load, toast],
+  );
+
   const rename = async (a: AttachmentItem) => {
     const next = await promptForValue("Rename attachment to:", a.fileName, { title: "Rename attachment", confirmLabel: "Rename" });
     if (!next || next.trim() === a.fileName) return;
@@ -106,23 +137,10 @@ export default function Attachments({ jobId }: { jobId: number }) {
     }
   };
 
-  const upload = async (e: any) => {
-    if (!e.target.files) return;
-
-    const data = new FormData();
-    const files = Array.from(e.target.files) as File[];
-    files.forEach((f) => data.append("files", f));
-    data.append("jobId", jobId.toString());
-
-    try {
-      await api.post("/attachments", data, {
-        headers: { "Content-Type": "multipart/form-data" },
-      });
-      toast("Files uploaded.", "success");
-      await load();
-    } catch {
-      toast("Upload failed.", "error");
-    }
+  const upload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files ? Array.from(e.target.files) : [];
+    await uploadFiles(files);
+    e.target.value = "";
   };
 
   const getBlobUrl = async (id: number) => {
@@ -158,17 +176,65 @@ export default function Attachments({ jobId }: { jobId: number }) {
   };
 
   const count = useMemo(() => items.length, [items.length]);
+  const imageCount = useMemo(() => items.filter((x) => isImageType(x.fileType)).length, [items]);
+  const pdfCount = useMemo(() => items.filter((x) => isPdfType(x.fileType)).length, [items]);
 
   return (
     <Box>
-      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mb: 1 }}>
-        <Typography sx={{ fontWeight: 800 }}>Attachments ({count})</Typography>
-        <Button component="label" size="small" variant="outlined">
-          Upload
-          <input type="file" multiple hidden onChange={upload} />
+      <Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, mb: 1.5, flexWrap: "wrap" }}>
+        <Box>
+          <Typography sx={{ fontWeight: 800 }}>Attachments ({count})</Typography>
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            Upload resumes, cover letters, portfolios, and supporting files for this application.
+          </Typography>
+          <Box sx={{ display: "flex", gap: 1, mt: 1, flexWrap: "wrap" }}>
+            <Chip size="small" label={`${imageCount} images`} variant="outlined" />
+            <Chip size="small" label={`${pdfCount} PDFs`} variant="outlined" />
+            <Chip size="small" label="Max 10 MB each" variant="outlined" />
+          </Box>
+        </Box>
+        <Button component="label" size="small" variant="outlined" startIcon={<CloudUploadOutlinedIcon />} disabled={uploading}>
+          {uploading ? "Uploading..." : "Upload"}
+          <input ref={fileInputRef} type="file" multiple hidden onChange={upload} />
         </Button>
       </Box>
 
+      <Box
+        onDragOver={(e) => {
+          e.preventDefault();
+          setDragActive(true);
+        }}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          setDragActive(true);
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          setDragActive(false);
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDragActive(false);
+          void uploadFiles(Array.from(e.dataTransfer.files || []));
+        }}
+        sx={{
+          mb: 2,
+          p: 2,
+          borderRadius: 3,
+          border: "1px dashed",
+          borderColor: dragActive ? "primary.main" : "divider",
+          backgroundColor: dragActive ? "action.hover" : "background.paper",
+          transition: "all 0.2s ease",
+          textAlign: "center",
+        }}
+      >
+        <Typography sx={{ fontWeight: 700 }}>Drag and drop files here</Typography>
+        <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
+          or use the upload button to choose documents from your device.
+        </Typography>
+        {uploading ? <LinearProgress sx={{ mt: 1.5, borderRadius: 999 }} /> : null}
+      </Box>
+
       <TableContainer sx={{ borderRadius: 3, border: "1px solid", borderColor: "divider" }}>
         <Table size="small">
           <TableHead>
@@ -188,7 +254,7 @@ export default function Attachments({ jobId }: { jobId: number }) {
               return (
                 <TableRow key={a.id} hover>
                   <TableCell>
-                    <Button size="small" variant="text" onClick={() => void download(a)} sx={{ fontWeight: 800 }}>
+                    <Button size="small" variant="text" onClick={() => void download(a)} sx={{ fontWeight: 800, textTransform: "none" }}>
                       {a.fileName}
                     </Button>
                   </TableCell>
@@ -221,7 +287,9 @@ export default function Attachments({ jobId }: { jobId: number }) {
             {items.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={6}>
-                  <Typography sx={{ color: "text.secondary" }}>No attachments yet.</Typography>
+                  <Alert severity="info" variant="outlined">
+                    No attachments yet. Upload a resume, cover letter, or portfolio to keep everything tied to this job.
+                  </Alert>
                 </TableCell>
               </TableRow>
             ) : null}
@@ -231,9 +299,11 @@ export default function Attachments({ jobId }: { jobId: number }) {
 
       <Dialog open={previewOpen} onClose={() => setPreviewOpen(false)} fullWidth maxWidth="md">
         <DialogTitle>Preview{preview?.name ? `: ${preview.name}` : ""}</DialogTitle>
-        <DialogContent>
+        <DialogContent sx={{ minHeight: 220 }}>
           {!preview ? null : isImageType(preview.type) ? (
-            <img src={preview.url} alt={preview.name} style={{ maxWidth: "100%", borderRadius: 12 }} />
+            <Box sx={{ display: "flex", justifyContent: "center", py: 1 }}>
+              <img src={preview.url} alt={preview.name} style={{ maxWidth: "100%", maxHeight: "70vh", borderRadius: 12 }} />
+            </Box>
           ) : isPdfType(preview.type) ? (
             <iframe title="pdf" src={preview.url} style={{ width: "100%", height: 560, border: 0, borderRadius: 12 }} />
           ) : (
@@ -241,26 +311,8 @@ export default function Attachments({ jobId }: { jobId: number }) {
           )}
         </DialogContent>
         <DialogActions>
-          <Button
-            onClick={() => {
-              setPreviewOpen(false);
-            }}
-          >
-            Close
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
-  );
-}
-ialogActions>
-          <Button
-            onClick={() => {
-              setPreviewOpen(false);
-            }}
-          >
-            Close
-          </Button>
+          {preview ? <Button onClick={() => void download({ id: 0, fileName: preview.name, fileType: preview.type, fileSize: 0, uploadDate: "" } as AttachmentItem)}>Download</Button> : null}
+          <Button onClick={() => setPreviewOpen(false)}>Close</Button>
         </DialogActions>
       </Dialog>
     </Box>
diff --git a/job-tracker-ui/src/pages/ProfilePage.tsx b/job-tracker-ui/src/pages/ProfilePage.tsx
index 85bd525..9be2560 100644
--- a/job-tracker-ui/src/pages/ProfilePage.tsx
+++ b/job-tracker-ui/src/pages/ProfilePage.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 
-import { Alert, Avatar, Box, Button, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Avatar, Box, Button, Chip, Divider, Paper, TextField, Typography } from "@mui/material";
 
 import { api } from "../api";
+import GoogleAuthCard from "../components/GoogleAuthCard";
 import { useToast } from "../toast";
 
 type MeResponse = {
@@ -42,6 +43,7 @@ export default function ProfilePage() {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [displayName, setDisplayName] = useState("");
+  const [headline, setHeadline] = useState("");
 
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -55,6 +57,7 @@ export default function ProfilePage() {
       setFirstName(r.data?.firstName ?? "");
       setLastName(r.data?.lastName ?? "");
       setDisplayName(r.data?.displayName ?? "");
+      setHeadline(window.localStorage.getItem("profileHeadline") ?? "");
     } catch {
       setMe(null);
     }
@@ -64,27 +67,26 @@ export default function ProfilePage() {
     void loadProfile();
   }, []);
 
-  const initials = useMemo(
-    () => initialsFrom([me?.displayName, me?.firstName, me?.lastName, me?.userName, me?.email]),
-    [me],
-  );
+  const initials = useMemo(() => initialsFrom([me?.displayName, me?.firstName, me?.lastName, me?.userName, me?.email]), [me]);
   const isLocal = me?.provider === "local";
   const fullName = [me?.firstName, me?.lastName].filter(Boolean).join(" ");
 
   return (
-    <Paper sx={{ mt: 0, p: 2 }}>
-      <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
-        <Avatar sx={{ width: 52, height: 52, fontWeight: 900 }}>{initials}</Avatar>
-        <Box>
-          <Typography variant="h5" sx={{ fontWeight: 900 }}>
-            Profile
-          </Typography>
-          <Typography sx={{ color: "text.secondary" }}>
-            {me?.displayName || fullName || me?.userName || me?.email || "-"}
-          </Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary" }}>
-            {me?.email || "-"} {me?.provider ? `(${me.provider})` : ""}
-          </Typography>
+    <Paper sx={{ mt: 0, p: 2.5 }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
+          <Avatar sx={{ width: 64, height: 64, fontWeight: 900, fontSize: 24 }}>{initials}</Avatar>
+          <Box>
+            <Typography variant="h5" sx={{ fontWeight: 900 }}>
+              Profile
+            </Typography>
+            <Typography sx={{ color: "text.secondary" }}>{me?.displayName || fullName || me?.userName || me?.email || "-"}</Typography>
+            <Typography variant="body2" sx={{ color: "text.secondary" }}>{headline || "Add a short headline to personalize your account view."}</Typography>
+          </Box>
+        </Box>
+        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "flex-start" }}>
+          <Chip label={me?.provider === "local" ? "Local account" : me?.provider === "google" ? "Google session" : "External session"} color={me?.provider === "local" ? "primary" : "default"} />
+          <Chip label={me?.googleLink?.linked ? `Google linked${me.googleLink.email ? `: ${me.googleLink.email}` : ""}` : "Google not linked"} color={me?.googleLink?.linked ? "success" : "default"} variant={me?.googleLink?.linked ? "filled" : "outlined"} />
         </Box>
       </Box>
 
@@ -104,15 +106,19 @@ export default function ProfilePage() {
         <TextField label="Username" value={userName} onChange={(e) => setUserName(e.target.value)} disabled={!isLocal} fullWidth />
         <TextField label="First name" value={firstName} onChange={(e) => setFirstName(e.target.value)} disabled={!isLocal} fullWidth />
         <TextField label="Last name" value={lastName} onChange={(e) => setLastName(e.target.value)} disabled={!isLocal} fullWidth />
-        <TextField label="Email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!isLocal} fullWidth sx={{ gridColumn: "1 / -1" }} />
+        <TextField label="Email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!isLocal} fullWidth />
+        <TextField
+          label="Profile headline"
+          value={headline}
+          onChange={(e) => setHeadline(e.target.value)}
+          helperText="Stored only in this browser to personalize your workspace."
+          fullWidth
+        />
 
-        <Box sx={{ gridColumn: "1 / -1" }}>
+        <Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
           <Typography variant="body2" sx={{ color: "text.secondary" }}>
             Google account: {me?.googleLink?.linked ? `Linked${me.googleLink.email ? ` to ${me.googleLink.email}` : ""}` : "Not linked"}
           </Typography>
-        </Box>
-
-        <Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
           <Button
             variant="contained"
             disabled={!isLocal || loading}
@@ -120,6 +126,7 @@ export default function ProfilePage() {
               setLoading(true);
               try {
                 await api.put("/auth/profile", { email, userName, firstName, lastName, displayName });
+                window.localStorage.setItem("profileHeadline", headline.trim());
                 await loadProfile();
                 toast("Profile updated.", "success");
               } catch (e: any) {
@@ -135,30 +142,13 @@ export default function ProfilePage() {
         </Box>
 
         <Box sx={{ gridColumn: "1 / -1", mt: 1 }}>
+          <Divider sx={{ mb: 2 }} />
           <Typography variant="h6">Change password</Typography>
-          {!isLocal ? (
-            <Typography sx={{ color: "text.secondary" }}>
-              Password changes are only available for local accounts.
-            </Typography>
-          ) : null}
+          {!isLocal ? <Typography sx={{ color: "text.secondary" }}>Password changes are only available for local accounts.</Typography> : null}
         </Box>
 
-        <TextField
-          label="Current password"
-          type="password"
-          value={currentPassword}
-          onChange={(e) => setCurrentPassword(e.target.value)}
-          disabled={!isLocal}
-          fullWidth
-        />
-        <TextField
-          label="New password"
-          type="password"
-          value={newPassword}
-          onChange={(e) => setNewPassword(e.target.value)}
-          disabled={!isLocal}
-          fullWidth
-        />
+        <TextField label="Current password" type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} disabled={!isLocal} fullWidth />
+        <TextField label="New password" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} disabled={!isLocal} fullWidth />
 
         <Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
           <Button
@@ -167,33 +157,7 @@ export default function ProfilePage() {
             onClick={async () => {
               setLoading(true);
               try {
-                await api.post("/auth/change-password", {
-                  currentPassword,
-                  newPassword,
-                });
-                setCurrentPassword("");
-                setNewPassword("");
-                toast("Password updated.", "success");
-              } catch (e: any) {
-                const msg = e?.response?.data || e?.message || "Failed to change password.";
-                toast(String(msg), "error");
-              } finally {
-                setLoading(false);
-              }
-            }}
-          >
-            Update password
-          </Button>
-        </Box>
-      </Box>
-    </Paper>
-  );
-}
-              try {
-                await api.post("/auth/change-password", {
-                  currentPassword,
-                  newPassword,
-                });
+                await api.post("/auth/change-password", { currentPassword, newPassword });
                 setCurrentPassword("");
                 setNewPassword("");
                 toast("Password updated.", "success");