Add analytics to summerizer app and dashboard updates
This commit is contained in:
cesnimda
@@ -1,7 +1,6 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { Box, Button, ButtonGroup, Divider, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
|
||||
|
||||
import { alpha, useTheme } from "@mui/material/styles";
|
||||
|
||||
import { api } from "../api";
|
||||
@@ -17,6 +16,19 @@ interface JobStats {
|
||||
|
||||
type AnalyticsPoint = { month: string; applied: number; responses: number };
|
||||
type TagPoint = { tag: string; count: number };
|
||||
type SummarizerMetrics = {
|
||||
healthy: boolean;
|
||||
model?: string | null;
|
||||
healthLatencyMs?: number | null;
|
||||
requests: number;
|
||||
cacheHits: number;
|
||||
cacheMisses: number;
|
||||
failures: number;
|
||||
averageLatencyMs?: number | null;
|
||||
lastSuccessAt?: string | null;
|
||||
lastFailureAt?: string | null;
|
||||
lastError?: string | null;
|
||||
};
|
||||
|
||||
function clamp(n: number, a: number, b: number) {
|
||||
return Math.max(a, Math.min(b, n));
|
||||
@@ -36,6 +48,20 @@ function toPath(values: number[], w: number, h: number) {
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function formatRelative(ts?: string | null) {
|
||||
if (!ts) return "Never";
|
||||
const d = new Date(ts);
|
||||
if (Number.isNaN(d.getTime())) return "Unknown";
|
||||
const deltaMs = Date.now() - d.getTime();
|
||||
const mins = Math.round(deltaMs / 60000);
|
||||
if (mins < 1) return "Just now";
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hours = Math.round(mins / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.round(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
export default function DashboardView() {
|
||||
const theme = useTheme();
|
||||
const [stats, setStats] = useState<JobStats | null>(null);
|
||||
@@ -51,6 +77,7 @@ export default function DashboardView() {
|
||||
const [appliedCustom, setAppliedCustom] = useState<{ from: string; to: string } | null>(null);
|
||||
const [analytics, setAnalytics] = useState<AnalyticsPoint[]>([]);
|
||||
const [tags, setTags] = useState<TagPoint[]>([]);
|
||||
const [summarizerMetrics, setSummarizerMetrics] = useState<SummarizerMetrics | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.get<JobStats>("/jobapplications/stats").then((r) => setStats(r.data));
|
||||
@@ -73,12 +100,51 @@ export default function DashboardView() {
|
||||
.catch(() => setTags([]));
|
||||
}, [months, rangeMode, appliedCustom]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let intervalId: number | undefined;
|
||||
|
||||
const loadMetrics = async () => {
|
||||
try {
|
||||
const res = await api.get<SummarizerMetrics>("/jobapplications/summarizer-metrics");
|
||||
if (!cancelled) setSummarizerMetrics(res.data);
|
||||
} catch {
|
||||
if (!cancelled) setSummarizerMetrics(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (tab === 2) {
|
||||
void loadMetrics();
|
||||
intervalId = window.setInterval(() => {
|
||||
void loadMetrics();
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (intervalId) window.clearInterval(intervalId);
|
||||
};
|
||||
}, [tab]);
|
||||
|
||||
const statusRows = useMemo(() => {
|
||||
const by = stats?.byStatus ?? {};
|
||||
return Object.entries(by).sort((a, b) => b[1] - a[1]);
|
||||
}, [stats]);
|
||||
|
||||
const max = statusRows.length ? Math.max(...statusRows.map(([, v]) => v)) : 0;
|
||||
const maxStatus = statusRows.length ? Math.max(...statusRows.map(([, v]) => v)) : 0;
|
||||
const chartW = 860;
|
||||
const chartH = 260;
|
||||
|
||||
const appliedSeries = useMemo(() => analytics.map((x) => x.applied), [analytics]);
|
||||
const responseSeries = useMemo(() => analytics.map((x) => x.responses), [analytics]);
|
||||
const totalAppliedInRange = useMemo(() => appliedSeries.reduce((sum, value) => sum + value, 0), [appliedSeries]);
|
||||
const totalResponsesInRange = useMemo(() => responseSeries.reduce((sum, value) => sum + value, 0), [responseSeries]);
|
||||
const topSkill = tags[0];
|
||||
const topStatus = statusRows[0];
|
||||
const strongestMonth = useMemo(() => {
|
||||
if (!analytics.length) return null;
|
||||
return analytics.reduce((best, current) => (current.applied > best.applied ? current : best), analytics[0]);
|
||||
}, [analytics]);
|
||||
|
||||
const metricCards = useMemo(() => {
|
||||
return [
|
||||
@@ -97,25 +163,24 @@ export default function DashboardView() {
|
||||
value: stats?.averageDaysSinceApplied ?? "-",
|
||||
sub: "Since applied",
|
||||
},
|
||||
{
|
||||
label: "Responses logged",
|
||||
value: totalResponsesInRange,
|
||||
sub: "Current chart range",
|
||||
},
|
||||
{
|
||||
label: "In trash",
|
||||
value: stats?.deleted ?? "-",
|
||||
sub: "Soft-deleted",
|
||||
},
|
||||
];
|
||||
}, [stats]);
|
||||
}, [stats, totalResponsesInRange]);
|
||||
|
||||
const chartW = 860;
|
||||
const chartH = 260;
|
||||
const pApplied = useMemo(() => toPath(appliedSeries, chartW, chartH), [appliedSeries]);
|
||||
const pResponses = useMemo(() => toPath(responseSeries, chartW, chartH), [responseSeries]);
|
||||
|
||||
const appliedSeries = useMemo(() => analytics.map((x) => x.applied), [analytics]);
|
||||
const responseSeries = useMemo(() => analytics.map((x) => x.responses), [analytics]);
|
||||
|
||||
const p1 = useMemo(() => toPath(appliedSeries, chartW, chartH), [appliedSeries]);
|
||||
const p2 = useMemo(() => toPath(responseSeries, chartW, chartH), [responseSeries]);
|
||||
|
||||
const c1 = theme.palette.primary.main;
|
||||
const c2 = alpha("#94a3b8", theme.palette.mode === "dark" ? 0.9 : 0.8);
|
||||
const appliedColor = theme.palette.success.main;
|
||||
const responsesColor = theme.palette.info.main;
|
||||
|
||||
const tagColors = useMemo(() => {
|
||||
return [
|
||||
@@ -124,278 +189,428 @@ export default function DashboardView() {
|
||||
theme.palette.warning.main,
|
||||
theme.palette.info.main,
|
||||
theme.palette.error.main,
|
||||
alpha("#a855f7", 0.9),
|
||||
alpha("#f97316", 0.9),
|
||||
alpha("#14b8a6", 0.9),
|
||||
alpha("#a855f7", 0.9),
|
||||
alpha("#64748b", 0.9),
|
||||
alpha("#0ea5e9", 0.9),
|
||||
];
|
||||
}, [theme.palette]);
|
||||
|
||||
const tagTotal = useMemo(() => tags.reduce((acc, t) => acc + (t.count || 0), 0), [tags]);
|
||||
const hitRate = useMemo(() => {
|
||||
const requests = summarizerMetrics?.requests ?? 0;
|
||||
if (!requests) return null;
|
||||
return Math.round(((summarizerMetrics?.cacheHits ?? 0) / requests) * 100);
|
||||
}, [summarizerMetrics]);
|
||||
|
||||
const StatCard = ({ label, value, sub }: { label: string; value: React.ReactNode; sub: string }) => (
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
minHeight: 118,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary", lineHeight: 1.4 }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ mt: 0.5, fontWeight: 950, lineHeight: 1.1 }}>
|
||||
{value}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mt: 0.75 }}>
|
||||
{sub}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
|
||||
<Tab label="Overview" />
|
||||
<Tab label="User Behavior" disabled />
|
||||
<Tab label="Performance" disabled />
|
||||
<Tab label="Pipeline" />
|
||||
<Tab label="Summarizer" />
|
||||
</Tabs>
|
||||
|
||||
<Paper sx={{ p: 2.25 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", md: "repeat(4, 1fr)" },
|
||||
gap: { xs: 2, md: 0 },
|
||||
}}
|
||||
>
|
||||
{metricCards.map((m, idx) => (
|
||||
<Box key={m.label} sx={{ px: { xs: 0, md: 2 } }}>
|
||||
{idx > 0 ? (
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
flexItem
|
||||
sx={{ display: { xs: "none", md: "block" }, position: "absolute", height: 68, mt: 1.5 }}
|
||||
/>
|
||||
) : null}
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>
|
||||
{m.label}
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ mt: 0.25 }}>
|
||||
{m.value}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary" }}>
|
||||
{m.sub}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ mt: 2, p: 2.25 }}>
|
||||
<Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 950 }}>
|
||||
Analysis
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary" }}>
|
||||
Monthly applied vs responses.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: 1 }}>
|
||||
<ButtonGroup size="small" variant="outlined">
|
||||
{([6, 12, 24] as const).map((m) => (
|
||||
<Button
|
||||
key={m}
|
||||
variant={rangeMode === "preset" && months === m ? "contained" : "outlined"}
|
||||
onClick={() => {
|
||||
setRangeMode("preset");
|
||||
setMonths(m);
|
||||
{tab === 0 ? (
|
||||
<>
|
||||
<Paper sx={{ p: 0.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", xl: "repeat(5, 1fr)" },
|
||||
}}
|
||||
>
|
||||
{metricCards.map((m, idx) => (
|
||||
<Box
|
||||
key={m.label}
|
||||
sx={{
|
||||
borderLeft: { xs: "none", xl: idx === 0 ? "none" : `1px solid ${theme.palette.divider}` },
|
||||
borderTop: {
|
||||
xs: idx === 0 ? "none" : `1px solid ${theme.palette.divider}`,
|
||||
sm: idx < 2 ? "none" : `1px solid ${theme.palette.divider}`,
|
||||
xl: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{m} mo
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant={rangeMode === "custom" ? "contained" : "outlined"}
|
||||
onClick={() => {
|
||||
setRangeMode("custom");
|
||||
setAppliedCustom({ from: fromMonth, to: toMonth });
|
||||
}}
|
||||
>
|
||||
Custom
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
{rangeMode === "custom" ? (
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="From"
|
||||
type="month"
|
||||
value={fromMonth}
|
||||
onChange={(e) => setFromMonth(e.target.value)}
|
||||
sx={{ width: 150 }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="To"
|
||||
type="month"
|
||||
value={toMonth}
|
||||
onChange={(e) => setToMonth(e.target.value)}
|
||||
sx={{ width: 150 }}
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
onClick={() => setAppliedCustom({ from: fromMonth, to: toMonth })}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2, overflowX: "auto" }}>
|
||||
<Box sx={{ minWidth: chartW }}>
|
||||
<svg width={chartW} height={chartH} viewBox={`0 0 ${chartW} ${chartH}`}>
|
||||
<defs>
|
||||
<linearGradient id="fillA" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor={alpha(c1, 0.45)} />
|
||||
<stop offset="100%" stopColor={alpha(c1, 0.02)} />
|
||||
</linearGradient>
|
||||
<linearGradient id="fillB" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor={alpha(c2, 0.35)} />
|
||||
<stop offset="100%" stopColor={alpha(c2, 0.02)} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{p2 ? (
|
||||
<>
|
||||
<path d={`${p2} L ${chartW} ${chartH} L 0 ${chartH} Z`} fill="url(#fillB)" />
|
||||
<path d={p2} fill="none" stroke={alpha(c2, 0.85)} strokeWidth="2" />
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{p1 ? (
|
||||
<>
|
||||
<path d={`${p1} L ${chartW} ${chartH} L 0 ${chartH} Z`} fill="url(#fillA)" />
|
||||
<path d={p1} fill="none" stroke={alpha(c1, 0.95)} strokeWidth="2.5" />
|
||||
</>
|
||||
) : null}
|
||||
</svg>
|
||||
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 1, color: "text.secondary" }}>
|
||||
{analytics.map((p) => (
|
||||
<Typography key={p.month} variant="caption" sx={{ width: `${100 / Math.max(1, analytics.length)}%`, textAlign: "center" }}>
|
||||
{p.month.slice(5)}
|
||||
</Typography>
|
||||
<StatCard label={m.label} value={m.value} sub={m.sub} />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ mt: 2, p: 2.25 }}>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1.2fr 0.8fr" }, gap: 2.5 }}>
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>
|
||||
Status breakdown
|
||||
</Typography>
|
||||
|
||||
{statusRows.length === 0 ? (
|
||||
<Typography sx={{ color: "text.secondary" }}>No data yet.</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.25 }}>
|
||||
{statusRows.map(([status, value]) => {
|
||||
const tone =
|
||||
status === "Rejected"
|
||||
? theme.palette.error.main
|
||||
: status === "Waiting" || status === "Ghosted"
|
||||
? theme.palette.warning.main
|
||||
: status === "Offer"
|
||||
? theme.palette.success.main
|
||||
: theme.palette.primary.main;
|
||||
|
||||
const w = max ? clamp(Math.round((value / max) * 100), 0, 100) : 0;
|
||||
|
||||
return (
|
||||
<Box key={status} sx={{ display: "grid", gridTemplateColumns: "160px 1fr 60px", gap: 1, alignItems: "center" }}>
|
||||
<Typography sx={{ fontWeight: 850 }}>{status}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
height: 10,
|
||||
borderRadius: 999,
|
||||
background: theme.palette.mode === "dark" ? alpha("#94a3b8", 0.16) : alpha("#0f172a", 0.08),
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: `${w}%`,
|
||||
height: "100%",
|
||||
background: `linear-gradient(90deg, ${alpha(tone, 0.75)}, ${alpha(tone, 0.30)})`,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{ textAlign: "right", fontWeight: 900 }}>{value}</Typography>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
<Paper sx={{ mt: 2, p: 2.25 }}>
|
||||
<Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 950 }}>
|
||||
Application activity
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary" }}>
|
||||
Color-coded monthly trend for applications and responses.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>
|
||||
Top tags (skills)
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: 1 }}>
|
||||
<ButtonGroup size="small" variant="outlined">
|
||||
{([6, 12, 24] as const).map((m) => (
|
||||
<Button
|
||||
key={m}
|
||||
variant={rangeMode === "preset" && months === m ? "contained" : "outlined"}
|
||||
onClick={() => {
|
||||
setRangeMode("preset");
|
||||
setMonths(m);
|
||||
}}
|
||||
>
|
||||
{m} mo
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant={rangeMode === "custom" ? "contained" : "outlined"}
|
||||
onClick={() => {
|
||||
setRangeMode("custom");
|
||||
setAppliedCustom({ from: fromMonth, to: toMonth });
|
||||
}}
|
||||
>
|
||||
Custom
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
{tags.length === 0 ? (
|
||||
<Typography sx={{ color: "text.secondary" }}>No tags yet.</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: "132px 1fr", gap: 2, alignItems: "center" }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<svg width="132" height="132" viewBox="0 0 132 132">
|
||||
<circle cx="66" cy="66" r="52" stroke={alpha(theme.palette.text.primary, 0.10)} strokeWidth="14" fill="none" />
|
||||
{(() => {
|
||||
const r = 52;
|
||||
const circ = 2 * Math.PI * r;
|
||||
let offset = 0;
|
||||
return tags.map((t, i) => {
|
||||
const pct = tagTotal ? t.count / tagTotal : 0;
|
||||
const len = circ * pct;
|
||||
const el = (
|
||||
<circle
|
||||
key={t.tag}
|
||||
cx="66"
|
||||
cy="66"
|
||||
r={r}
|
||||
fill="none"
|
||||
stroke={tagColors[i % tagColors.length]}
|
||||
strokeWidth="14"
|
||||
strokeDasharray={`${len} ${circ}`}
|
||||
strokeDashoffset={-offset}
|
||||
transform="rotate(-90 66 66)"
|
||||
/>
|
||||
);
|
||||
offset += len;
|
||||
return el;
|
||||
});
|
||||
})()}
|
||||
<circle cx="66" cy="66" r="39" fill={theme.palette.background.paper} />
|
||||
<text x="66" y="62" textAnchor="middle" fontSize="16" fontWeight="900" fill={theme.palette.text.primary}>
|
||||
{tagTotal}
|
||||
</text>
|
||||
<text x="66" y="80" textAnchor="middle" fontSize="11" fill={alpha(theme.palette.text.primary, 0.65)}>
|
||||
tags
|
||||
</text>
|
||||
</svg>
|
||||
</Box>
|
||||
{rangeMode === "custom" ? (
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
|
||||
<TextField size="small" label="From" type="month" value={fromMonth} onChange={(e) => setFromMonth(e.target.value)} sx={{ width: 150 }} />
|
||||
<TextField size="small" label="To" type="month" value={toMonth} onChange={(e) => setToMonth(e.target.value)} sx={{ width: 150 }} />
|
||||
<Button size="small" variant="contained" onClick={() => setAppliedCustom({ from: fromMonth, to: toMonth })}>
|
||||
Apply
|
||||
</Button>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.75, minWidth: 0 }}>
|
||||
{tags.slice(0, 8).map((t, i) => (
|
||||
<Box key={t.tag} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
|
||||
<Box sx={{ width: 10, height: 10, borderRadius: 999, bgcolor: tagColors[i % tagColors.length], flex: "0 0 auto" }} />
|
||||
<Typography variant="body2" noWrap sx={{ fontWeight: 700 }}>
|
||||
{t.tag}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 900, flex: "0 0 auto" }}>
|
||||
{t.count}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mt: 1.5 }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Box sx={{ width: 12, height: 12, borderRadius: 999, bgcolor: appliedColor }} />
|
||||
<Typography variant="body2" sx={{ color: "text.secondary" }}>Applied</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Box sx={{ width: 12, height: 12, borderRadius: 999, bgcolor: responsesColor }} />
|
||||
<Typography variant="body2" sx={{ color: "text.secondary" }}>Responses</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2, overflowX: "auto" }}>
|
||||
<Box sx={{ minWidth: chartW }}>
|
||||
<svg width={chartW} height={chartH} viewBox={`0 0 ${chartW} ${chartH}`}>
|
||||
<defs>
|
||||
<linearGradient id="fillApplied" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor={alpha(appliedColor, 0.35)} />
|
||||
<stop offset="100%" stopColor={alpha(appliedColor, 0.03)} />
|
||||
</linearGradient>
|
||||
<linearGradient id="fillResponses" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor={alpha(responsesColor, 0.28)} />
|
||||
<stop offset="100%" stopColor={alpha(responsesColor, 0.03)} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{[0.25, 0.5, 0.75].map((tick) => (
|
||||
<line
|
||||
key={tick}
|
||||
x1="0"
|
||||
x2={chartW}
|
||||
y1={Math.round(chartH * tick)}
|
||||
y2={Math.round(chartH * tick)}
|
||||
stroke={alpha(theme.palette.text.primary, 0.08)}
|
||||
strokeDasharray="5 5"
|
||||
/>
|
||||
))}
|
||||
|
||||
{pResponses ? (
|
||||
<>
|
||||
<path d={`${pResponses} L ${chartW} ${chartH} L 0 ${chartH} Z`} fill="url(#fillResponses)" />
|
||||
<path d={pResponses} fill="none" stroke={alpha(responsesColor, 0.95)} strokeWidth="2.5" />
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{pApplied ? (
|
||||
<>
|
||||
<path d={`${pApplied} L ${chartW} ${chartH} L 0 ${chartH} Z`} fill="url(#fillApplied)" />
|
||||
<path d={pApplied} fill="none" stroke={alpha(appliedColor, 0.95)} strokeWidth="2.5" />
|
||||
</>
|
||||
) : null}
|
||||
</svg>
|
||||
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 1, color: "text.secondary" }}>
|
||||
{analytics.map((p) => (
|
||||
<Typography key={p.month} variant="caption" sx={{ width: `${100 / Math.max(1, analytics.length)}%`, textAlign: "center" }}>
|
||||
{p.month.slice(5)}
|
||||
</Typography>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Box sx={{ mt: 2, display: "grid", gridTemplateColumns: { xs: "1fr", lg: "repeat(3, 1fr)" }, gap: 2 }}>
|
||||
<Paper sx={{ p: 2.25 }}>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Top skill</Typography>
|
||||
<Typography variant="h5" sx={{ mt: 0.5, fontWeight: 950 }}>{topSkill?.tag ?? "No tags yet"}</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 1, color: "text.secondary" }}>
|
||||
{topSkill ? `${topSkill.count} tagged jobs in the selected range.` : "Import or add tagged jobs to surface skill trends."}
|
||||
</Typography>
|
||||
</Paper>
|
||||
<Paper sx={{ p: 2.25 }}>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Busiest month</Typography>
|
||||
<Typography variant="h5" sx={{ mt: 0.5, fontWeight: 950 }}>{strongestMonth?.month ?? "-"}</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 1, color: "text.secondary" }}>
|
||||
{strongestMonth ? `${strongestMonth.applied} applications logged in your strongest month.` : "No monthly application data yet."}
|
||||
</Typography>
|
||||
</Paper>
|
||||
<Paper sx={{ p: 2.25 }}>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Top stage</Typography>
|
||||
<Typography variant="h5" sx={{ mt: 0.5, fontWeight: 950 }}>{topStatus?.[0] ?? "No status data"}</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 1, color: "text.secondary" }}>
|
||||
{topStatus ? `${topStatus[1]} applications are currently clustered in this stage.` : "Add a few jobs to reveal your pipeline shape."}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{tab === 1 ? (
|
||||
<Paper sx={{ p: 2.25 }}>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1.2fr 0.8fr" }, gap: 2.5 }}>
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>
|
||||
Status breakdown
|
||||
</Typography>
|
||||
|
||||
{statusRows.length === 0 ? (
|
||||
<Typography sx={{ color: "text.secondary" }}>No data yet.</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.25 }}>
|
||||
{statusRows.map(([status, value]) => {
|
||||
const tone =
|
||||
status === "Rejected"
|
||||
? theme.palette.error.main
|
||||
: status === "Waiting" || status === "Ghosted"
|
||||
? theme.palette.warning.main
|
||||
: status === "Offer"
|
||||
? theme.palette.success.main
|
||||
: status === "Interview"
|
||||
? theme.palette.info.main
|
||||
: theme.palette.primary.main;
|
||||
|
||||
const w = maxStatus ? clamp(Math.round((value / maxStatus) * 100), 0, 100) : 0;
|
||||
|
||||
return (
|
||||
<Box key={status} sx={{ display: "grid", gridTemplateColumns: "160px 1fr 60px", gap: 1, alignItems: "center" }}>
|
||||
<Typography sx={{ fontWeight: 850 }}>{status}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
height: 10,
|
||||
borderRadius: 999,
|
||||
background: theme.palette.mode === "dark" ? alpha("#94a3b8", 0.16) : alpha("#0f172a", 0.08),
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: `${w}%`,
|
||||
height: "100%",
|
||||
background: `linear-gradient(90deg, ${alpha(tone, 0.85)}, ${alpha(tone, 0.32)})`,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{ textAlign: "right", fontWeight: 900 }}>{value}</Typography>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)" }, gap: 1.5, mt: 2.25 }}>
|
||||
<Paper variant="outlined" sx={{ p: 1.75, borderRadius: 2.5 }}>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Applications in range</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 950 }}>{totalAppliedInRange}</Typography>
|
||||
</Paper>
|
||||
<Paper variant="outlined" sx={{ p: 1.75, borderRadius: 2.5 }}>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Tracked skills</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 950 }}>{tagTotal}</Typography>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>
|
||||
Top skills
|
||||
</Typography>
|
||||
|
||||
{tags.length === 0 ? (
|
||||
<Typography sx={{ color: "text.secondary" }}>No tags yet.</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: "132px 1fr", gap: 2, alignItems: "center" }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||||
<svg width="132" height="132" viewBox="0 0 132 132">
|
||||
<circle cx="66" cy="66" r="52" stroke={alpha(theme.palette.text.primary, 0.10)} strokeWidth="14" fill="none" />
|
||||
{(() => {
|
||||
const r = 52;
|
||||
const circ = 2 * Math.PI * r;
|
||||
let offset = 0;
|
||||
return tags.map((t, i) => {
|
||||
const pct = tagTotal ? t.count / tagTotal : 0;
|
||||
const len = circ * pct;
|
||||
const el = (
|
||||
<circle
|
||||
key={t.tag}
|
||||
cx="66"
|
||||
cy="66"
|
||||
r={r}
|
||||
fill="none"
|
||||
stroke={tagColors[i % tagColors.length]}
|
||||
strokeWidth="14"
|
||||
strokeDasharray={`${len} ${circ}`}
|
||||
strokeDashoffset={-offset}
|
||||
transform="rotate(-90 66 66)"
|
||||
/>
|
||||
);
|
||||
offset += len;
|
||||
return el;
|
||||
});
|
||||
})()}
|
||||
<circle cx="66" cy="66" r="39" fill={theme.palette.background.paper} />
|
||||
<text x="66" y="62" textAnchor="middle" fontSize="16" fontWeight="900" fill={theme.palette.text.primary}>
|
||||
{tagTotal}
|
||||
</text>
|
||||
<text x="66" y="80" textAnchor="middle" fontSize="11" fill={alpha(theme.palette.text.primary, 0.65)}>
|
||||
skill tags
|
||||
</text>
|
||||
</svg>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.75, minWidth: 0 }}>
|
||||
{tags.slice(0, 8).map((t, i) => (
|
||||
<Box key={t.tag} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
|
||||
<Box sx={{ width: 10, height: 10, borderRadius: 999, bgcolor: tagColors[i % tagColors.length], flex: "0 0 auto" }} />
|
||||
<Typography variant="body2" noWrap sx={{ fontWeight: 700 }}>
|
||||
{t.tag}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 900, flex: "0 0 auto" }}>
|
||||
{t.count}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
) : null}
|
||||
|
||||
{tab === 2 ? (
|
||||
<>
|
||||
<Paper sx={{ p: 0.5 }}>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", xl: "repeat(4, 1fr)" } }}>
|
||||
{[
|
||||
{
|
||||
label: "Service status",
|
||||
value: summarizerMetrics?.healthy ? "Healthy" : "Offline",
|
||||
sub: summarizerMetrics?.model || "Summarizer health check",
|
||||
},
|
||||
{
|
||||
label: "Health latency",
|
||||
value: summarizerMetrics?.healthLatencyMs != null ? `${summarizerMetrics.healthLatencyMs} ms` : "-",
|
||||
sub: "Latest /health round-trip",
|
||||
},
|
||||
{
|
||||
label: "Average latency",
|
||||
value: summarizerMetrics?.averageLatencyMs != null ? `${summarizerMetrics.averageLatencyMs} ms` : "-",
|
||||
sub: "Across API summary requests",
|
||||
},
|
||||
{
|
||||
label: "Cache hit rate",
|
||||
value: hitRate != null ? `${hitRate}%` : "-",
|
||||
sub: "API-side memory cache reuse",
|
||||
},
|
||||
].map((m, idx) => (
|
||||
<Box key={m.label} sx={{ borderLeft: { xs: "none", xl: idx === 0 ? "none" : `1px solid ${theme.palette.divider}` }, borderTop: { xs: idx === 0 ? "none" : `1px solid ${theme.palette.divider}`, sm: idx < 2 ? "none" : `1px solid ${theme.palette.divider}`, xl: "none" } }}>
|
||||
<StatCard label={m.label} value={m.value} sub={m.sub} />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ mt: 2, p: 2.25 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 950, mb: 1 }}>
|
||||
Summarizer telemetry
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
|
||||
Useful for spotting slowdowns, cache misses, or service outages in the local summarizer app.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" }, gap: 2 }}>
|
||||
<Paper variant="outlined" sx={{ p: 2, borderRadius: 2.5 }}>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Requests</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 950, mb: 1.5 }}>{summarizerMetrics?.requests ?? 0}</Typography>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1 }}>
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary" }}>Hits</Typography>
|
||||
<Typography sx={{ fontWeight: 900 }}>{summarizerMetrics?.cacheHits ?? 0}</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary" }}>Misses</Typography>
|
||||
<Typography sx={{ fontWeight: 900 }}>{summarizerMetrics?.cacheMisses ?? 0}</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary" }}>Failures</Typography>
|
||||
<Typography sx={{ fontWeight: 900 }}>{summarizerMetrics?.failures ?? 0}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper variant="outlined" sx={{ p: 2, borderRadius: 2.5 }}>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Last activity</Typography>
|
||||
<Box sx={{ mt: 1.25, display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
<Typography variant="body2"><strong>Last success:</strong> {formatRelative(summarizerMetrics?.lastSuccessAt)}</Typography>
|
||||
<Typography variant="body2"><strong>Last failure:</strong> {formatRelative(summarizerMetrics?.lastFailureAt)}</Typography>
|
||||
<Typography variant="body2"><strong>Model:</strong> {summarizerMetrics?.model || "Unknown"}</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ my: 2 }} />
|
||||
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>Last error</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 0.75, color: summarizerMetrics?.lastError ? "warning.main" : "text.secondary" }}>
|
||||
{summarizerMetrics?.lastError || "No recent summarizer errors recorded."}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user