cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: localize usage and salary insights
CI and Deploy / test (push) Successful in 2m40s
Details
CI and Deploy / deploy (push) Successful in 56s
Details

Browse Source
This commit is contained in:
cesnimda
2026-07-31 00:17:33 +02:00
parent 235d22c059
commit 6ed56fd493
5 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/AiUsageCard.tsx
+9 -7
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { Alert, Box, LinearProgress, Paper, Skeleton, Stack, Typography } from "@mui/material";
import { api } from "../api";
import { useI18n } from "../i18n/I18nProvider";
type Usage = {
currentMonth: { calls: number; estimatedTokens: number };
@@ -18,6 +19,7 @@ function formatBytes(bytes: number) {
}
export default function AiUsageCard() {
const { t } = useI18n();
const [usage, setUsage] = useState<Usage | null>(null);
const [failed, setFailed] = useState(false);
@@ -29,7 +31,7 @@ export default function AiUsageCard() {
return () => { active = false; };
}, []);
if (failed) return <Alert severity="warning">AI usage is temporarily unavailable.</Alert>;
if (failed) return <Alert severity="warning">{t("settingsUsageUnavailable")}</Alert>;
if (!usage) return <Skeleton variant="rounded" height={150} />;
const callsPercent = Math.min(100, usage.currentMonth.calls / usage.monthlyCallLimit * 100);
@@ -39,22 +41,22 @@ export default function AiUsageCard() {
return (
<Paper sx={{ p: 2.5, borderRadius: 4, border: "none" }}>
<Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: 2 }}>
<Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 800 }}>AI usage</Typography>
<Typography variant="caption" sx={{ textTransform: "capitalize", fontWeight: 700 }}>{usage.plan} plan</Typography>
<Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 800 }}>{t("settingsUsageTitle")}</Typography>
<Typography variant="caption" sx={{ textTransform: "capitalize", fontWeight: 700 }}>{t("settingsUsagePlan", { plan: usage.plan })}</Typography>
</Stack>
<Box sx={{ mb: 2 }}>
<Typography variant="body2">{usage.currentMonth.calls.toLocaleString()} of {usage.monthlyCallLimit.toLocaleString()} generations this month</Typography>
<Typography variant="body2">{t("settingsUsageGenerations", { used: usage.currentMonth.calls.toLocaleString(), limit: usage.monthlyCallLimit.toLocaleString() })}</Typography>
<LinearProgress variant="determinate" value={callsPercent} aria-label="Monthly AI generations used" sx={{ mt: 0.75, height: 7, borderRadius: 99 }} />
</Box>
<Box>
<Typography variant="body2">{usage.currentMonth.estimatedTokens.toLocaleString()} of {usage.monthlyTokenLimit.toLocaleString()} estimated tokens</Typography>
<Typography variant="body2">{t("settingsUsageTokens", { used: usage.currentMonth.estimatedTokens.toLocaleString(), limit: usage.monthlyTokenLimit.toLocaleString() })}</Typography>
<LinearProgress variant="determinate" value={tokensPercent} aria-label="Monthly AI tokens used" sx={{ mt: 0.75, height: 7, borderRadius: 99 }} />
</Box>
<Box sx={{ mt: 2 }}>
<Typography variant="body2">{formatBytes(usage.storageUsedBytes)} of {formatBytes(usage.storageLimitBytes)} attachment storage</Typography>
<Typography variant="body2">{t("settingsUsageStorage", { used: formatBytes(usage.storageUsedBytes), limit: formatBytes(usage.storageLimitBytes) })}</Typography>
<LinearProgress variant="determinate" value={storagePercent} aria-label="Attachment storage used" sx={{ mt: 0.75, height: 7, borderRadius: 99 }} />
</Box>
<Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1.5 }}>AI limits reset at the start of each calendar month.</Typography>
<Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1.5 }}>{t("settingsUsageReset")}</Typography>
</Paper>
);
}