Translate attachments and admin audit screens

job-tracker-ui/src/components/Attachments.tsx

@@ -26,8 +26,9 @@ 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 { api, getApiErrorMessage } from "../api";
 import { useToast } from "../toast";
+import { useI18n } from "../i18n/I18nProvider";
 import { useDialogActions } from "../dialogs";
 
 interface AttachmentItem {
@@ -63,6 +64,7 @@ function guessKind(fileName: string): string {
 
 export default function Attachments({ jobId }: { jobId: number }) {
   const { toast } = useToast();
+  const { t } = useI18n();
   const { confirmAction, promptForValue } = useDialogActions();
   const [items, setItems] = useState<AttachmentItem[]>([]);
   const [previewOpen, setPreviewOpen] = useState(false);
@@ -105,13 +107,13 @@ export default function Attachments({ jobId }: { jobId: number }) {
         });
         toast(files.length === 1 ? "File uploaded." : `${files.length} files uploaded.`, "success");
         await load();
-      } catch {
-        toast("Upload failed.", "error");
+      } catch (error) {
+        toast(getApiErrorMessage(error, t("attachmentsUploadFailed")), "error");
       } finally {
         setUploading(false);
       }
     },
-    [jobId, load, toast],
+    [jobId, load, t, toast],
   );
 
   const rename = async (a: AttachmentItem) => {
@@ -119,10 +121,10 @@ export default function Attachments({ jobId }: { jobId: number }) {
     if (!next || next.trim() === a.fileName) return;
     try {
       await api.patch(`/attachments/${a.id}`, { fileName: next.trim() });
-      toast("Renamed.", "success");
+      toast(t("attachmentsRenamed"), "success");
       await load();
-    } catch {
-      toast("Rename failed.", "error");
+    } catch (error) {
+      toast(getApiErrorMessage(error, t("attachmentsRenameFailed")), "error");
     }
   };
 
@@ -130,10 +132,10 @@ export default function Attachments({ jobId }: { jobId: number }) {
     if (!(await confirmAction(`Delete attachment "${a.fileName}"?`, { title: "Delete attachment", confirmLabel: "Delete", destructive: true }))) return;
     try {
       await api.delete(`/attachments/${a.id}`);
-      toast("Deleted attachment.", "success");
+      toast(t("attachmentsDeleted"), "success");
       await load();
-    } catch {
-      toast("Delete failed.", "error");
+    } catch (error) {
+      toast(getApiErrorMessage(error, t("attachmentsDeleteFailed")), "error");
     }
   };
 
@@ -159,8 +161,8 @@ export default function Attachments({ jobId }: { jobId: number }) {
       link.click();
       link.remove();
       window.setTimeout(() => URL.revokeObjectURL(url), 5000);
-    } catch {
-      toast("Download failed.", "error");
+    } catch (error) {
+      toast(getApiErrorMessage(error, t("attachmentsDownloadFailed")), "error");
     }
   };
 
@@ -170,8 +172,8 @@ export default function Attachments({ jobId }: { jobId: number }) {
       const url = await getBlobUrl(a.id);
       setPreview({ url, type: a.fileType || "", name: a.fileName });
       setPreviewOpen(true);
-    } catch {
-      toast("Preview failed.", "error");
+    } catch (error) {
+      toast(getApiErrorMessage(error, t("attachmentsPreviewFailed")), "error");
     }
   };
 
@@ -183,18 +185,18 @@ export default function Attachments({ jobId }: { jobId: number }) {
     <Box>
       <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 sx={{ fontWeight: 800 }}>{t("attachmentsTitle", { count })}</Typography>
           <Typography variant="body2" sx={{ color: "text.secondary" }}>
-            Upload resumes, cover letters, portfolios, and supporting files for this application.
+            {t("attachmentsSubtitle")}
           </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" />
+            <Chip size="small" label={t("attachmentsImages", { count: imageCount })} variant="outlined" />
+            <Chip size="small" label={t("attachmentsPdfs", { count: pdfCount })} variant="outlined" />
+            <Chip size="small" label={t("attachmentsMaxSize")} variant="outlined" />
           </Box>
         </Box>
         <Button component="label" size="small" variant="outlined" startIcon={<CloudUploadOutlinedIcon />} disabled={uploading}>
-          {uploading ? "Uploading..." : "Upload"}
+          {uploading ? t("attachmentsUploading") : t("attachmentsUpload")}
           <input ref={fileInputRef} type="file" multiple hidden onChange={upload} />
         </Button>
       </Box>
@@ -228,9 +230,9 @@ export default function Attachments({ jobId }: { jobId: number }) {
           textAlign: "center",
         }}
       >
-        <Typography sx={{ fontWeight: 700 }}>Drag and drop files here</Typography>
+        <Typography sx={{ fontWeight: 700 }}>{t("attachmentsDragDrop")}</Typography>
         <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
-          or use the upload button to choose documents from your device.
+          {t("attachmentsDragDropHelp")}
         </Typography>
         {uploading ? <LinearProgress sx={{ mt: 1.5, borderRadius: 999 }} /> : null}
       </Box>
@@ -239,12 +241,12 @@ export default function Attachments({ jobId }: { jobId: number }) {
         <Table size="small">
           <TableHead>
             <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell sx={{ width: 140 }}>Kind</TableCell>
-              <TableCell sx={{ width: 120 }}>Type</TableCell>
-              <TableCell sx={{ width: 90 }}>Size</TableCell>
-              <TableCell sx={{ width: 170 }}>Uploaded</TableCell>
-              <TableCell sx={{ width: 170 }}>Actions</TableCell>
+              <TableCell>{t("attachmentsName")}</TableCell>
+              <TableCell sx={{ width: 140 }}>{t("attachmentsKind")}</TableCell>
+              <TableCell sx={{ width: 120 }}>{t("attachmentsType")}</TableCell>
+              <TableCell sx={{ width: 90 }}>{t("attachmentsSize")}</TableCell>
+              <TableCell sx={{ width: 170 }}>{t("attachmentsUploaded")}</TableCell>
+              <TableCell sx={{ width: 170 }}>{t("attachmentsActions")}</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -265,17 +267,17 @@ export default function Attachments({ jobId }: { jobId: number }) {
                   <TableCell>
                     <Box sx={{ display: "flex", gap: 0.5, flex: "0 0 auto" }}>
                       {canPreview ? (
-                        <IconButton size="small" onClick={() => void openPreview(a)} title="Preview">
+                        <IconButton size="small" onClick={() => void openPreview(a)} title={t("attachmentsPreview")}>
                           <VisibilityOutlinedIcon fontSize="small" />
                         </IconButton>
                       ) : null}
-                      <IconButton size="small" onClick={() => void download(a)} title="Download">
+                      <IconButton size="small" onClick={() => void download(a)} title={t("attachmentsDownload")}>
                         <DownloadIcon fontSize="small" />
                       </IconButton>
-                      <IconButton size="small" onClick={() => void rename(a)} title="Rename">
+                      <IconButton size="small" onClick={() => void rename(a)} title={t("attachmentsRename")}>
                         <DriveFileRenameOutlineIcon fontSize="small" />
                       </IconButton>
-                      <IconButton size="small" onClick={() => void remove(a)} title="Delete">
+                      <IconButton size="small" onClick={() => void remove(a)} title={t("attachmentsDelete")}>
                         <DeleteOutlineIcon fontSize="small" />
                       </IconButton>
                     </Box>
@@ -288,7 +290,7 @@ export default function Attachments({ jobId }: { jobId: number }) {
               <TableRow>
                 <TableCell colSpan={6}>
                   <Alert severity="info" variant="outlined">
-                    No attachments yet. Upload a resume, cover letter, or portfolio to keep everything tied to this job.
+                    {t("attachmentsEmpty")}
                   </Alert>
                 </TableCell>
               </TableRow>
@@ -298,7 +300,7 @@ export default function Attachments({ jobId }: { jobId: number }) {
       </TableContainer>
 
       <Dialog open={previewOpen} onClose={() => setPreviewOpen(false)} fullWidth maxWidth="md">
-        <DialogTitle>Preview{preview?.name ? `: ${preview.name}` : ""}</DialogTitle>
+        <DialogTitle>{preview?.name ? t("attachmentsPreviewTitle", { name: preview.name }) : t("attachmentsPreview")}</DialogTitle>
         <DialogContent sx={{ minHeight: 220 }}>
           {!preview ? null : isImageType(preview.type) ? (
             <Box sx={{ display: "flex", justifyContent: "center", py: 1 }}>
@@ -307,12 +309,12 @@ export default function Attachments({ jobId }: { jobId: number }) {
           ) : isPdfType(preview.type) ? (
             <iframe title="pdf" src={preview.url} style={{ width: "100%", height: 560, border: 0, borderRadius: 12 }} />
           ) : (
-            <Typography sx={{ color: "text.secondary" }}>No inline preview for this file type.</Typography>
+            <Typography sx={{ color: "text.secondary" }}>{t("attachmentsNoInlinePreview")}</Typography>
           )}
         </DialogContent>
         <DialogActions>
           {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>
+          <Button onClick={() => setPreviewOpen(false)}>{t("close")}</Button>
         </DialogActions>
       </Dialog>
     </Box>

job-tracker-ui/src/i18n/translations.ts

@@ -330,6 +330,8 @@ export const translations = {
     correspondenceCharacters: "{count} characters",
     correspondenceAdd: "Add",
     correspondenceImportTitle: "Import email",
+    correspondenceLogEmail: "Email logged.",
+    correspondenceClose: "Close",
     correspondencePasteEmail: "Paste email",
     correspondencePasteEmailHelp: "Paste raw email text (headers optional). We parse Subject and Date when present.",
     correspondenceGoogleGmail: "Google Gmail",
@@ -344,8 +346,51 @@ export const translations = {
     correspondenceSearch: "Search",
     correspondenceNoGmailMessages: "No Gmail messages found.",
     correspondenceUnknown: "Unknown",
-    correspondenceClose: "Close",
-    correspondenceLogEmail: "Log email",
+    correspondenceLastSynced: "Last synced {date}",
+    correspondenceNoSubject: "(No subject)",
+    correspondenceMessagesInThread: "{count} messages in thread",
+    correspondenceImportThread: "Import thread",
+    correspondenceImporting: "Importing...",
+    correspondenceFromLabel: "From: {value}",
+    attachmentsTitle: "Attachments ({count})",
+    attachmentsSubtitle: "Upload resumes, cover letters, portfolios, and supporting files for this application.",
+    attachmentsImages: "{count} images",
+    attachmentsPdfs: "{count} PDFs",
+    attachmentsMaxSize: "Max 10 MB each",
+    attachmentsUpload: "Upload",
+    attachmentsUploading: "Uploading...",
+    attachmentsDragDrop: "Drag and drop files here",
+    attachmentsDragDropHelp: "or use the upload button to choose documents from your device.",
+    attachmentsName: "Name",
+    attachmentsKind: "Kind",
+    attachmentsType: "Type",
+    attachmentsSize: "Size",
+    attachmentsUploaded: "Uploaded",
+    attachmentsActions: "Actions",
+    attachmentsPreview: "Preview",
+    attachmentsDownload: "Download",
+    attachmentsRename: "Rename",
+    attachmentsDelete: "Delete",
+    attachmentsEmpty: "No attachments yet. Upload a resume, cover letter, or portfolio to keep everything tied to this job.",
+    attachmentsPreviewTitle: "Preview: {name}",
+    attachmentsNoInlinePreview: "No inline preview for this file type.",
+    attachmentsUploadFailed: "Upload failed.",
+    attachmentsRenamed: "Renamed.",
+    attachmentsRenameFailed: "Rename failed.",
+    attachmentsDeleted: "Deleted attachment.",
+    attachmentsDeleteFailed: "Delete failed.",
+    attachmentsDownloadFailed: "Download failed.",
+    attachmentsPreviewFailed: "Preview failed.",
+    adminAuditRestored: "Restored.",
+    adminAuditTitle: "Audit log",
+    adminAuditSubtitle: "Admin-only.",
+    adminAuditAt: "At",
+    adminAuditType: "Type",
+    adminAuditJob: "Job",
+    adminAuditUser: "User",
+    adminAuditDetails: "Details",
+    adminAuditActions: "Actions",
+    adminAuditNoEvents: "No events.",
     adminSystemEnvironment: "Environment",
     adminSystemDatabase: "Database",
     adminSystemConnected: "Connected",
@@ -819,6 +864,8 @@ export const translations = {
     correspondenceCharacters: "{count} tegn",
     correspondenceAdd: "Legg til",
     correspondenceImportTitle: "Importer e-post",
+    correspondenceLogEmail: "E-post loggført.",
+    correspondenceClose: "Lukk",
     correspondencePasteEmail: "Lim inn e-post",
     correspondencePasteEmailHelp: "Lim inn rå e-posttekst (overskrifter valgfritt). Vi tolker emne og dato når de finnes.",
     correspondenceGoogleGmail: "Google Gmail",
@@ -833,8 +880,51 @@ export const translations = {
     correspondenceSearch: "Søk",
     correspondenceNoGmailMessages: "Ingen Gmail-meldinger funnet.",
     correspondenceUnknown: "Ukjent",
-    correspondenceClose: "Lukk",
-    correspondenceLogEmail: "Loggfør e-post",
+    correspondenceLastSynced: "Sist synkronisert {date}",
+    correspondenceNoSubject: "(Uten emne)",
+    correspondenceMessagesInThread: "{count} meldinger i tråden",
+    correspondenceImportThread: "Importer tråd",
+    correspondenceImporting: "Importerer...",
+    correspondenceFromLabel: "Fra: {value}",
+    attachmentsTitle: "Vedlegg ({count})",
+    attachmentsSubtitle: "Last opp CV-er, søknadsbrev, porteføljer og støttedokumenter for denne søknaden.",
+    attachmentsImages: "{count} bilder",
+    attachmentsPdfs: "{count} PDF-er",
+    attachmentsMaxSize: "Maks 10 MB hver",
+    attachmentsUpload: "Last opp",
+    attachmentsUploading: "Laster opp...",
+    attachmentsDragDrop: "Dra og slipp filer her",
+    attachmentsDragDropHelp: "eller bruk opplastingsknappen for å velge dokumenter fra enheten din.",
+    attachmentsName: "Navn",
+    attachmentsKind: "Type",
+    attachmentsType: "Filtype",
+    attachmentsSize: "Størrelse",
+    attachmentsUploaded: "Lastet opp",
+    attachmentsActions: "Handlinger",
+    attachmentsPreview: "Forhåndsvis",
+    attachmentsDownload: "Last ned",
+    attachmentsRename: "Gi nytt navn",
+    attachmentsDelete: "Slett",
+    attachmentsEmpty: "Ingen vedlegg ennå. Last opp en CV, et søknadsbrev eller en portefølje for å knytte alt til denne jobben.",
+    attachmentsPreviewTitle: "Forhåndsvisning: {name}",
+    attachmentsNoInlinePreview: "Ingen innebygd forhåndsvisning for denne filtypen.",
+    attachmentsUploadFailed: "Opplasting mislyktes.",
+    attachmentsRenamed: "Gi nytt navn fullført.",
+    attachmentsRenameFailed: "Kunne ikke gi nytt navn.",
+    attachmentsDeleted: "Vedlegg slettet.",
+    attachmentsDeleteFailed: "Sletting mislyktes.",
+    attachmentsDownloadFailed: "Nedlasting mislyktes.",
+    attachmentsPreviewFailed: "Forhåndsvisning mislyktes.",
+    adminAuditRestored: "Gjenopprettet.",
+    adminAuditTitle: "Revisjonslogg",
+    adminAuditSubtitle: "Kun for admin.",
+    adminAuditAt: "Tidspunkt",
+    adminAuditType: "Type",
+    adminAuditJob: "Jobb",
+    adminAuditUser: "Bruker",
+    adminAuditDetails: "Detaljer",
+    adminAuditActions: "Handlinger",
+    adminAuditNoEvents: "Ingen hendelser.",
     adminSystemEnvironment: "Miljø",
     adminSystemDatabase: "Database",
     adminSystemConnected: "Tilkoblet",

job-tracker-ui/src/pages/AdminAuditPage.tsx

@@ -16,6 +16,7 @@ import {
 
 import { api } from "../api";
 import { useToast } from "../toast";
+import { useI18n } from "../i18n/I18nProvider";
 
 type AuditItem = {
   id: number;
@@ -38,6 +39,7 @@ function canUndo(type: string) {
 
 export default function AdminAuditPage() {
   const { toast } = useToast();
+  const { t } = useI18n();
   const [items, setItems] = useState<AuditItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [busyId, setBusyId] = useState<number | null>(null);
@@ -77,7 +79,7 @@ export default function AdminAuditPage() {
     setBusyId(e.id);
     try {
       await api.post(`/jobapplications/${e.jobApplicationId}/restore`, {});
-      toast("Restored.", "success");
+      toast(t("adminAuditRestored"), "success");
       await load();
     } catch (err: any) {
       const msg = err?.response?.data || err?.message || "Restore failed.";
@@ -92,35 +94,35 @@ export default function AdminAuditPage() {
   return (
     <Paper sx={{ mt: 0, p: 2 }}>
       <Typography variant="h5" sx={{ fontWeight: 900, mb: 1 }}>
-        Audit log
+        {t("adminAuditTitle")}
       </Typography>
       <Typography sx={{ color: "text.secondary", mb: 2 }}>
-        Admin-only.
+        {t("adminAuditSubtitle")}
       </Typography>
 
       <TableContainer sx={{ borderRadius: 2, border: "1px solid", borderColor: "divider" }}>
         <Table size="small">
           <TableHead>
             <TableRow>
-              <TableCell sx={{ width: 165 }}>At</TableCell>
-              <TableCell sx={{ width: 160 }}>Type</TableCell>
-              <TableCell>Job</TableCell>
-              <TableCell sx={{ width: 220 }}>User</TableCell>
-              <TableCell>Details</TableCell>
-              <TableCell sx={{ width: 170 }}>Actions</TableCell>
+              <TableCell sx={{ width: 165 }}>{t("adminAuditAt")}</TableCell>
+              <TableCell sx={{ width: 160 }}>{t("adminAuditType")}</TableCell>
+              <TableCell>{t("adminAuditJob")}</TableCell>
+              <TableCell sx={{ width: 220 }}>{t("adminAuditUser")}</TableCell>
+              <TableCell>{t("adminAuditDetails")}</TableCell>
+              <TableCell sx={{ width: 170 }}>{t("adminAuditActions")}</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             {loading ? (
               <TableRow>
                 <TableCell colSpan={6}>
-                  <Typography sx={{ color: "text.secondary" }}>Loading...</Typography>
+                  <Typography sx={{ color: "text.secondary" }}>{t("loading")}</Typography>
                 </TableCell>
               </TableRow>
             ) : rows.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={6}>
-                  <Typography sx={{ color: "text.secondary" }}>No events.</Typography>
+                  <Typography sx={{ color: "text.secondary" }}>{t("adminAuditNoEvents")}</Typography>
                 </TableCell>
               </TableRow>
             ) : (