fix: localize usage and salary insights

2026-07-31 00:17:33 +02:00
parent 235d22c059
commit 6ed56fd493
5 changed files with 49 additions and 13 deletions
@@ -533,16 +533,16 @@ export default function DashboardView() {
      {(overview?.salaryInsights?.length ?? 0) > 0 ? (
        <Box sx={{ mt: 2 }}>
          <SectionCard>
-            <Typography variant="h6">Salary insights</Typography>
-            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 1.5 }}>Comparable ranges from jobs in your tracker. Currencies and pay periods stay separate.</Typography>
+            <Typography variant="h6">{t("dashboardSalaryInsights")}</Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 1.5 }}>{t("dashboardSalaryInsightsBody")}</Typography>
            <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" }, gap: 1.5 }}>
              {overview!.salaryInsights!.map((item) => {
                const money = new Intl.NumberFormat(undefined, { style: "currency", currency: item.currency, maximumFractionDigits: 0 });
                return (
                  <Box key={item.currency + item.period} sx={{ p: 1.5, borderRadius: 3, backgroundColor: alpha(theme.palette.primary.main, 0.05) }}>
-                    <Typography variant="caption" color="text.secondary">{item.currency} · per {item.period} · {item.count} {item.count === 1 ? "job" : "jobs"}</Typography>
+                    <Typography variant="caption" color="text.secondary">{t("dashboardSalaryGroup", { currency: item.currency, period: item.period, count: item.count })}</Typography>
                    <Typography variant="h6" sx={{ mt: 0.5 }}>{money.format(item.averageMidpoint)}</Typography>
-                    <Typography variant="body2" color="text.secondary">Range {money.format(item.minimum)}–{money.format(item.maximum)}</Typography>
+                    <Typography variant="body2" color="text.secondary">{t("dashboardSalaryRange", { minimum: money.format(item.minimum), maximum: money.format(item.maximum) })}</Typography>
                  </Box>
                );
              })}