feat: add drag and drop uploads and profile workspace polish

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>