update kanban styling, add more detailed error log for gmail

2026-03-21 19:22:02 +01:00
parent 7211d67c62
commit 793ed6eb65
5 changed files with 210 additions and 134 deletions
@@ -236,8 +236,12 @@ export default function Correspondence({ jobId }: { jobId: number }) {
      });
      await load();
      toast("Email imported from Gmail.", "success");
-    } catch {
-      toast("Failed to import Gmail message.", "error");
+    } catch (error: any) {
+      const message =
+        error?.response?.data && typeof error.response.data === "string"
+          ? error.response.data
+          : "Failed to import Gmail message.";
+      toast(message, "error");
    } finally {
      setImportingMessageId(null);
    }
@@ -303,8 +307,8 @@ export default function Correspondence({ jobId }: { jobId: number }) {
                      sx={{ display: "block", mt: 0.75, color: "text.secondary" }}
                    >
                      {isMe ? "Me" : "Company"}
-                      {m.channel ? ` · ${m.channel}` : ""}
-                      {m.date ? ` · ${new Date(m.date).toLocaleString()}` : ""}
+                      {m.channel ? ` · ${m.channel}` : ""}
+                      {m.date ? ` · ${new Date(m.date).toLocaleString()}` : ""}
                    </Typography>
                  </Box>
                </Box>
@@ -110,7 +110,7 @@ export default function JobDetailsDialog({ open, jobId, onClose }: Props) {
      </DialogTitle>

      <DialogContent>
-        <JobFlowBar job={job} />
+        <JobFlowBar job={job} history={history} />
        <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
          <Tab label="Overview" />
          <Tab label="Correspondence" />
@@ -1,60 +1,141 @@
 import React, { useMemo } from "react";

-import { Box, Tooltip, Typography, useTheme } from "@mui/material";
+import { Box, Chip, Typography, useTheme } from "@mui/material";
+import { alpha } from "@mui/material/styles";

 import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
-import ForumIcon from "@mui/icons-material/Forum";
 import MarkEmailReadIcon from "@mui/icons-material/MarkEmailRead";
+import ForumIcon from "@mui/icons-material/Forum";
 import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
 import CloseIcon from "@mui/icons-material/Close";

-import { alpha } from "@mui/material/styles";
-
 import { JobApplication } from "../types";

+type HistoryEvent = {
+  id: number;
+  type: string;
+  oldValue?: string;
+  newValue?: string;
+  note?: string;
+  at: string;
+};
+
+type FlowItem = {
+  key: string;
+  label: string;
+  at: Date;
+  color: string;
+  icon: React.ReactNode;
+};
+
 function normalizeStatus(status?: string): string {
  if (!status) return "Applied";
  if (status === "Interviewing") return "Interview";
  return status;
 }

-function isTerminalRejected(status: string) {
-  return status === "Rejected" || status === "Ghosted";
+function parseResponseDate(value?: string): Date | null {
+  if (!value) return null;
+  const parts = value.split(":");
+  const raw = parts.length > 1 ? parts.slice(1).join(":") : "";
+  const d = new Date(raw);
+  return Number.isNaN(+d) ? null : d;
 }

-export default function JobFlowBar({ job }: { job: JobApplication | null }) {
+function firstStatusChange(history: HistoryEvent[], status: string): Date | null {
+  const match = history.find((item) => item.type === "StatusChanged" && normalizeStatus(item.newValue) === status);
+  if (!match) return null;
+  const d = new Date(match.at);
+  return Number.isNaN(+d) ? null : d;
+}
+
+function firstResponse(history: HistoryEvent[], job: JobApplication): Date | null {
+  if (job.responseDate) {
+    const d = new Date(job.responseDate);
+    if (!Number.isNaN(+d)) return d;
+  }
+
+  const explicit = history.find((item) => item.type === "ReplyReceived");
+  if (explicit) {
+    const d = new Date(explicit.at);
+    if (!Number.isNaN(+d)) return d;
+  }
+
+  const updated = history.find((item) => item.type === "ResponseUpdated");
+  if (!updated) return null;
+  return parseResponseDate(updated.newValue) ?? new Date(updated.at);
+}
+
+export default function JobFlowBar({ job, history = [] }: { job: JobApplication | null; history?: HistoryEvent[] }) {
  const theme = useTheme();
-  const steps = useMemo(
-    () =>
-      [
-        { key: "applied" as const, label: "Applied", color: theme.palette.info.main, icon: <WorkOutlineIcon fontSize="inherit" /> },
-        { key: "interview" as const, label: "Interview", color: theme.palette.primary.main, icon: <ForumIcon fontSize="inherit" /> },
-        { key: "reply" as const, label: "Reply", color: theme.palette.success.main, icon: <MarkEmailReadIcon fontSize="inherit" /> },
-        { key: "offer" as const, label: "Offer", color: theme.palette.success.dark, icon: <EmojiEventsIcon fontSize="inherit" /> },
-        { key: "outcome" as const, label: "Outcome", color: theme.palette.text.secondary, icon: <EmojiEventsIcon fontSize="inherit" /> },
-      ] as const,
-    [theme.palette.info.main, theme.palette.primary.main, theme.palette.success.main, theme.palette.success.dark, theme.palette.text.secondary],
-  );

-  if (!job) return null;
+  const items = useMemo(() => {
+    if (!job) return [] as FlowItem[];

-  const status = normalizeStatus(job.status);
-  const reply = Boolean(job.responseReceived);
-  const rejected = isTerminalRejected(status);
+    const appliedAt = new Date(job.dateApplied);
+    const replyAt = firstResponse(history, job);
+    const interviewAt = firstStatusChange(history, "Interview") || (normalizeStatus(job.status) === "Interview" ? replyAt ?? appliedAt : null);
+    const offerAt = firstStatusChange(history, "Offer") || (normalizeStatus(job.status) === "Offer" ? replyAt ?? interviewAt ?? appliedAt : null);
+    const rejectedLabel = normalizeStatus(job.status) === "Ghosted" ? "Ghosted" : "Rejected";
+    const rejectedAt = firstStatusChange(history, "Rejected")
+      || firstStatusChange(history, "Ghosted")
+      || ((normalizeStatus(job.status) === "Rejected" || normalizeStatus(job.status) === "Ghosted") ? replyAt ?? appliedAt : null);

-  const activeIndex = (() => {
-    if (rejected) return 4;
-    if (status === "Offer") return 3;
-    if (reply) return 2;
-    if (status === "Interview") return 1;
-    return 0;
-  })();
+    const next: FlowItem[] = [
+      {
+        key: "applied",
+        label: "Applied",
+        at: appliedAt,
+        color: theme.palette.info.main,
+        icon: <WorkOutlineIcon fontSize="small" />,
+      },
+    ];

-  const breakIndex = rejected ? activeIndex : null;
-  const visibleSteps = breakIndex !== null ? steps.slice(0, breakIndex + 1) : steps;
+    if (replyAt) {
+      next.push({
+        key: "reply",
+        label: "Reply",
+        at: replyAt,
+        color: theme.palette.success.main,
+        icon: <MarkEmailReadIcon fontSize="small" />,
+      });
+    }

-  const segCount = visibleSteps.length;
-  const segWidth = `${100 / segCount}%`;
+    if (interviewAt) {
+      next.push({
+        key: "interview",
+        label: "Interview",
+        at: interviewAt,
+        color: theme.palette.primary.main,
+        icon: <ForumIcon fontSize="small" />,
+      });
+    }
+
+    if (offerAt) {
+      next.push({
+        key: "offer",
+        label: "Offer",
+        at: offerAt,
+        color: theme.palette.success.dark,
+        icon: <EmojiEventsIcon fontSize="small" />,
+      });
+    } else if (rejectedAt) {
+      next.push({
+        key: normalizeStatus(job.status).toLowerCase(),
+        label: rejectedLabel,
+        at: rejectedAt,
+        color: theme.palette.error.main,
+        icon: <CloseIcon fontSize="small" />,
+      });
+    }
+
+    return next
+      .filter((item) => !Number.isNaN(+item.at))
+      .sort((a, b) => +a.at - +b.at)
+      .filter((item, index, arr) => index === arr.findIndex((other) => other.key === item.key));
+  }, [history, job, theme.palette.error.main, theme.palette.info.main, theme.palette.primary.main, theme.palette.success.dark, theme.palette.success.main]);
+
+  if (!job || items.length === 0) return null;

  return (
    <Box sx={{ mb: 2 }}>
@@ -65,70 +146,35 @@ export default function JobFlowBar({ job }: { job: JobApplication | null }) {
      <Box
        sx={{
          display: "flex",
-          borderRadius: 999,
-          overflow: "hidden",
+          flexWrap: "wrap",
+          gap: 1,
+          alignItems: "center",
+          p: 1.25,
+          borderRadius: 3,
          border: `1px solid ${alpha(theme.palette.text.primary, 0.12)}`,
-          height: 44,
-          background: alpha("#fff", 0.65),
+          background: theme.palette.mode === "dark" ? "rgba(15,23,42,0.42)" : "rgba(248,250,252,0.92)",
        }}
      >
-        {visibleSteps.map((s, idx) => {
-          const filled = idx <= activeIndex && breakIndex === null;
-          const terminalFilled = breakIndex !== null && idx < breakIndex;
-          const isBreak = breakIndex !== null && idx === breakIndex;
-
-          const bg = filled || terminalFilled ? s.color : alpha(s.color, 0.12);
-          const fg = filled || terminalFilled ? "#fff" : alpha(theme.palette.text.primary, 0.6);
-
-          const title = (() => {
-            if (isBreak) return `${status} (stopped here)`;
-            if (idx === 2 && reply) return "Reply received";
-            return s.label;
-          })();
-
-          return (
-            <Tooltip key={s.key} title={title}>
-              <Box
-                sx={{
-                  width: segWidth,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  position: "relative",
-                  background: isBreak ? theme.palette.error.main : bg,
-                  color: "#fff",
-                  borderRight: idx === visibleSteps.length - 1 ? "none" : `1px solid ${alpha("#fff", 0.35)}`,
-                  userSelect: "none",
-                }}
-              >
-                {isBreak ? (
-                  <CloseIcon fontSize="inherit" />
-                ) : (
-                  <Box sx={{ display: "inline-flex", alignItems: "center", gap: 1, color: fg, fontWeight: 900 }}>
-                    <Box sx={{ fontSize: 18, display: "inline-flex" }}>{s.icon}</Box>
-                    <span style={{ fontSize: 13 }}>{s.key === "outcome" && rejected ? status : s.label}</span>
-                  </Box>
-                )}
-
-                {isBreak ? (
-                  <Box
-                    sx={{
-                      position: "absolute",
-                      inset: 0,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontWeight: 900,
-                      letterSpacing: "0.02em",
-                    }}
-                  >
-                    {status} <span style={{ marginLeft: 8, display: "inline-flex" }}><CloseIcon fontSize="inherit" /></span>
-                  </Box>
-                ) : null}
-              </Box>
-            </Tooltip>
-          );
-        })}
+        {items.map((item, index) => (
+          <React.Fragment key={`${item.key}-${item.at.toISOString()}`}>
+            <Chip
+              icon={item.icon as React.ReactElement}
+              label={`${item.label} · ${item.at.toLocaleDateString()}`}
+              sx={{
+                fontWeight: 800,
+                color: theme.palette.getContrastText(item.color),
+                backgroundColor: item.color,
+                borderRadius: 2,
+                px: 0.5,
+              }}
+            />
+            {index < items.length - 1 ? (
+              <Typography sx={{ color: "text.secondary", fontWeight: 900 }}>
+                ?
+              </Typography>
+            ) : null}
+          </React.Fragment>
+        ))}
      </Box>
    </Box>
  );
@@ -133,6 +133,7 @@ export default function KanbanBoard() {
                      border: `1px solid ${alpha(c, theme.palette.mode === "dark" ? 0.22 : 0.14)}`,
                      background: theme.palette.mode === "dark" ? "rgba(15,23,42,0.55)" : "rgba(255,255,255,0.8)",
                      backdropFilter: "blur(8px)",
+                      color: theme.palette.text.primary,
                    }}
                  >
                    <CardContent sx={{ p: 1.25, "&:last-child": { pb: 1.25 } }}>
@@ -142,6 +143,7 @@ export default function KanbanBoard() {
                        </Typography>
                        <IconButton
                          size="small"
+                          sx={{ color: theme.palette.text.primary }}
                          onClick={(e) => {
                            e.stopPropagation();
                            setMenuJobId(j.id);