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

feat(ui): redesign job workspace sections

Browse Source
This commit is contained in:
cesnimda
2026-10-07 01:58:31 +02:00
parent acd1d94684
commit ac6d78289d
123 changed files with 2842 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/ApplicationChecklist.tsx
+9 -15
View File
@@ -10,6 +10,7 @@ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import { getApiErrorMessage } from "../api";
import { useI18n } from "../i18n/I18nProvider";
import { PageSection } from "../layout/PageLayout";
import {
CHECKLIST_CATEGORIES, Checklist, ChecklistItem, applicationChecklistApi, checklistSystemTranslationToken,
} from "../applicationWorkspace";
@@ -98,25 +99,18 @@ export default function ApplicationChecklist({ jobId, onChanged }: { jobId: numb
{error && <Alert severity="error" onClose={() => setError(null)}>{error}</Alert>}
{progress && (
<Paper sx={{ p: 2, borderRadius: 3 }}>
<Stack direction="row" alignItems="baseline" justifyContent="space-between" sx={{ mb: 1 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 800 }}>{t("checklistTitle")}</Typography>
<Typography variant="body2" color="text.secondary">
{t("checklistProgress", { completed: progress.completed, total: progress.total })}
</Typography>
</Stack>
<PageSection surface title={t("checklistTitle")} level="h3" description={t("checklistProgress", { completed: progress.completed, total: progress.total })}>
<LinearProgress
variant="determinate"
value={progress.percent}
aria-label={t("checklistCompletion")}
sx={{ height: 8, borderRadius: 4 }}
/>
</Paper>
</PageSection>
)}
{grouped.map((group) => (
<Paper key={group.key} sx={{ p: 2, borderRadius: 3 }}>
<Typography variant="overline" color="text.secondary">{checklistCategoryLabel(t, group.key)}</Typography>
<PageSection key={group.key} surface title={checklistCategoryLabel(t, group.key)} level="h3">
<Stack sx={{ mt: 0.5 }}>
{group.items.map((item) => {
const display = checklistItemDisplay(t, item);
@@ -143,7 +137,7 @@ export default function ApplicationChecklist({ jobId, onChanged }: { jobId: numb
sx={{
fontWeight: 600,
textDecoration: item.status === "done" ? "line-through" : "none",
color: item.status === "done" ? "text.disabled" : "text.primary",
color: item.status === "done" ? "text.secondary" : "text.primary",
}}
>
{display.title}
@@ -182,11 +176,11 @@ export default function ApplicationChecklist({ jobId, onChanged }: { jobId: numb
);
})}
</Stack>
</Paper>
</PageSection>
))}
<Paper component="form" onSubmit={add} sx={{ p: 2, borderRadius: 3 }}>
<Stack direction="row" spacing={1}>
<Paper variant="outlined" component="form" onSubmit={add} sx={{ p: 2, borderRadius: 1 }}>
<Stack direction={{ xs: "column", sm: "row" }} spacing={1}>
<TextField
fullWidth
size="small"
@@ -195,7 +189,7 @@ export default function ApplicationChecklist({ jobId, onChanged }: { jobId: numb
disabled={busy}
onChange={(e) => setDraft(e.target.value)}
/>
<Button type="submit" variant="contained" disabled={busy || !draft.trim()}>{t("checklistAdd")}</Button>
<Button type="submit" variant="contained" disabled={busy || !draft.trim()} sx={{ flexShrink: 0, whiteSpace: "nowrap" }}>{t("checklistAdd")}</Button>
</Stack>
</Paper>
</Stack>