Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
df83eb2091 | ||
|
|
9c862034ca | ||
|
|
67d62a6df0 | ||
|
|
512f1fd92b | ||
|
|
941caf9d85 | ||
|
|
b00d18d0b3 | ||
|
|
decadd895e | ||
|
|
54f3c414f5 | ||
|
|
ca092c6166 | ||
|
|
c7f9d9aa36 |
56
CLAUDE.md
56
CLAUDE.md
@@ -14,7 +14,7 @@ Handles attendance, invoicing, leave/trips, projects, vehicles, and HR operation
|
||||
| ORM | Prisma 6.19.2 → MySQL |
|
||||
| Auth | JWT (HS256, 15 min) + TOTP 2FA (RFC 6238, otpauth) + bcryptjs |
|
||||
| Validation | Zod 4.3.6 |
|
||||
| Frontend | React 18.3.1 + Vite 8.0.0 |
|
||||
| Frontend | React 18.3.1 + Vite 8.0.0 + Material UI v7 (Emotion) |
|
||||
| Testing | Vitest 4.1.0 + Supertest |
|
||||
| PDF | Puppeteer 24.x |
|
||||
| Email | nodemailer 8.x |
|
||||
@@ -35,17 +35,21 @@ src/
|
||||
├── utils/ # totp.ts, pdf.ts, email.ts, audit.ts, formatters, etc.
|
||||
├── config/ # env.ts (config singleton, Date.toJSON override)
|
||||
├── types/ # index.ts (AuthData, JwtPayload, ApiResponse, re-exports from Prisma)
|
||||
├── admin/ # React 18 frontend (57 .tsx files)
|
||||
├── admin/ # React 18 + Material UI frontend (~105 .tsx files)
|
||||
│ ├── AdminApp.tsx # Router + lazy-loaded pages
|
||||
│ ├── contexts/ # AuthContext, AlertContext
|
||||
│ ├── components/ # Layout, modals, tables, editors
|
||||
│ ├── theme.ts # MUI theme — light/dark color schemes, tokens, component defaults
|
||||
│ ├── GlobalStyles.tsx # App-wide global styles via MUI <GlobalStyles> (reset, typography, utilities)
|
||||
│ ├── ui/ # MUI component kit (AppShell, Button, DataTable, Modal, …) — pages import from here
|
||||
│ ├── context/ # AuthContext, AlertContext (ThemeContext lives in src/context/)
|
||||
│ ├── components/ # Non-page components: RichEditor (Quill), PlanGrid, file manager, dashboard/ + warehouse/ widgets
|
||||
│ ├── pages/ # One file per page/feature
|
||||
│ ├── hooks/ # useApiCall, useListData, useTableSort, etc.
|
||||
│ ├── lib/ # React Query options & mutations (queries/) + shared label maps
|
||||
│ ├── hooks/ # usePaginatedQuery, useTableSort, useDebounce, useReducedMotion, …
|
||||
│ └── utils/ # api.ts (fetch wrapper with token refresh), formatters, helpers
|
||||
└── __tests__/ # Vitest tests (auth, numbering)
|
||||
└── __tests__/ # Vitest tests (~14 files: auth, numbering, warehouse, plan, invoices, …)
|
||||
|
||||
prisma/
|
||||
├── schema.prisma # 32 models, MySQL, snake_case columns
|
||||
├── schema.prisma # 49 models, MySQL, snake_case columns
|
||||
└── migrations/ # Applied migrations
|
||||
|
||||
dist/ # Compiled server (CommonJS, ES2022)
|
||||
@@ -236,7 +240,7 @@ if ("error" in body) return error(reply, body.error, 400);
|
||||
|
||||
Tests live in `src/__tests__/`. They use Vitest + Supertest against a real test database (`.env.test`).
|
||||
|
||||
- Test coverage is minimal: only `auth` and `numbering` are tested.
|
||||
- The suite spans ~14 files / 152 tests — auth, numbering, warehouse, plan, invoices, exchange-rates, schema coercion, NAS file manager, env, manual-create. Server-side only (no component tests yet).
|
||||
- Use `buildApp()` helper to spin up the Fastify instance for tests.
|
||||
- Tests use `vitest.config.ts` with `environment: 'node'` and 15s timeout.
|
||||
- **Do not mock Prisma** — tests hit a real database to catch schema/query bugs.
|
||||
@@ -250,9 +254,9 @@ When adding new features, add tests in `src/__tests__/`. Name test files `<featu
|
||||
- Pages are lazy-loaded via `React.lazy()` in `AdminApp.tsx`.
|
||||
- Auth state lives in `AuthContext`; use `useAuth()` hook to access it.
|
||||
- Alerts/toasts use `AlertContext`; use `useAlert()` to show them.
|
||||
- API calls go through `src/admin/utils/api.ts` which handles token refresh automatically (deduplicates concurrent refresh calls).
|
||||
- Custom hooks: `useApiCall`, `useListData`, `useTableSort`, `useDebounce`, `useModalLock`.
|
||||
- Styling: CSS files in `src/admin/` — no CSS-in-JS, no Tailwind. Use CSS variables.
|
||||
- Data fetching uses **React Query** (query options + mutations in `src/admin/lib/queries/`); `src/admin/utils/api.ts` (`apiFetch`) handles token refresh automatically — dedupes concurrent refreshes, and token responses carry `expires_in` so the client refreshes BEFORE expiry (no reactive 401 churn).
|
||||
- Custom hooks: `usePaginatedQuery`, `useTableSort`, `useDebounce`, `useModalLock`, `useReducedMotion`.
|
||||
- Styling: **Material UI v7** (Emotion) — theme in `src/admin/theme.ts`, `sx`/`styled()` in components, app-wide rules in `GlobalStyles.tsx`. **No hand-written `.css` files, no Tailwind.** Use `theme.vars` for colours so light/dark resolve automatically.
|
||||
|
||||
### Query Invalidation Convention
|
||||
|
||||
@@ -274,16 +278,30 @@ When entity A embeds/references entity B, A's mutation handlers invalidate B's d
|
||||
|
||||
---
|
||||
|
||||
## Frontend — MUI Migration (in progress)
|
||||
## Frontend — Styling & MUI (migration complete, shipped in v2.0.0)
|
||||
|
||||
The admin frontend is being migrated off ~7,100 lines of hand-written CSS onto **MUI (Material UI v7)** — a "Soft-SaaS shell + dense tables" look, dark/light preserved, **incremental and always shippable**.
|
||||
The admin frontend is **fully on Material UI v7** (Emotion). The old ~7,100 lines of hand-written CSS are gone — **there are no custom `.css` files in `src/admin`**; the only stylesheets imported anywhere are the two third-party libs (`react-quill-new/dist/quill.snow.css`, `leaflet/dist/leaflet.css`). Look-and-feel is "Soft-SaaS shell + dense tables", dark/light preserved. Full history/decisions/gotchas live in agent memory (`project_mui_migration.md`); the original spec/plans are under `docs/superpowers/`.
|
||||
|
||||
- **Spec:** `docs/superpowers/specs/2026-06-06-css-mui-migration-design.md`. **Per-phase plans:** `docs/superpowers/plans/2026-06-06-mui-migration-phase-*.md`.
|
||||
- **Progress is tracked in agent memory** (`project_mui_migration.md` — what's merged, what's next). **Keep it updated as each phase merges.** Memory practice generally: durable, non-obvious facts about ongoing work / decisions / gotchas belong in the agent memory store (one fact per file, indexed in `MEMORY.md`), not left only in chat.
|
||||
- **Migrating a page:** mirror `src/admin/pages/Vehicles.tsx` (the pilot). Import only from the **`src/admin/ui/` kit** — never `@mui/*` directly in pages. **Preserve ALL data logic verbatim** (hooks, mutations, `invalidate` arrays, validation, permissions); change only presentation; drop the page's `admin-*` CSS usage. Per page: plan → subagent-driven build → spec + code-quality review → user visual check → merge.
|
||||
- **Kit (`src/admin/ui/`):** AppShell, Button, Card, TextField, Select (string-based — convert ids at the boundary), DateField (date-fns v4, `dd.MM.yyyy`, cs), Modal, ConfirmDialog (optional `children` + content freeze), DataTable (sortable via `sortKey`/`sortBy`/`onSort`), Pagination, Tabs/TabPanel, StatusChip, CheckboxField, SwitchField, Field, Alert. Theme + tokens in `src/admin/theme.ts`; one `data-theme` attribute drives MUI **and** legacy CSS. Dev-only `/ui-kit` showcase route.
|
||||
- **Gates every step:** `npx tsc -b --noEmit` (NOT `-p tsconfig.json` — that's a vacuous solution file that checks nothing), `npm run build`, `npx vitest run`.
|
||||
- **Dialog gotchas (solved in the kit — don't reintroduce):** dialogs lock `<html>` via `useDialogScrollLock` (MUI only locks `<body>`, and `html{overflow-x:hidden}` makes `<html>` the scroll container); Modal/ConfirmDialog freeze title/label/loading through the close fade (derive-state-from-props) so nothing flashes during the transition. Login renders OUTSIDE the AppShell (sibling route).
|
||||
**Where styling lives**
|
||||
|
||||
- **Theme — `src/admin/theme.ts`:** `cssVariables` with `colorSchemeSelector: "[data-theme='%s']"`, light + dark `colorSchemes`, tokens, component defaults. Use **`theme.vars!.palette.*`** (the `vars` field is typed optional → `!`) so colours resolve per scheme; for alpha use the channel tokens — `rgba(${theme.vars!.palette.primary.mainChannel} / 0.12)`; for per-scheme one-offs use `theme.applyStyles("dark", { … })`.
|
||||
- **Global rules — `src/admin/GlobalStyles.tsx`:** reset, typography, scrollbar, `::selection`, view-transition timing, and the utility classes (`.text-*`, `.flex-*`, `.mb-*`, …), all theme-aware. (The pre-React bootstrap spinner is inlined in `src/App.tsx` because it mounts before MUI.)
|
||||
- **Component kit — `src/admin/ui/`:** AppShell, Button, Card, TextField, Select (string-based — convert ids at the boundary), DateField/MonthField/TimeField (date-fns v4, cs), Modal, ConfirmDialog (optional `children` + content freeze), DataTable (sortable + mobile card layout + `rowSx`/`rowDanger`/`rowInactive`), Pagination, Tabs/TabPanel, StatusChip, CheckboxField/SwitchField, Field, Alert, PageHeader, FilterBar, StatCard, ProgressBar, FileUpload, EmptyState, LoadingState, ThemeToggle, PageEnter (staggered page entrance), RichEditorRoot/RichTextView (Quill). Dev-only `/ui-kit` showcase route.
|
||||
|
||||
**Building / editing pages**
|
||||
|
||||
- Pages import from the **kit** (`src/admin/ui/`); reach for `@mui/material` (`styled`/`sx`) directly only for one-off layout or infra (theme, GlobalStyles, the Quill/Leaflet wrappers).
|
||||
- Wrap a page's top-level sections in `<PageEnter>`. Filters go in `<FilterBar>` with **bare** controls (no `<Field>` label) at the standard widths.
|
||||
- When refactoring, **preserve ALL data logic verbatim** (hooks, mutations, `invalidate` arrays, validation, permissions); change only presentation.
|
||||
|
||||
**Conventions learned — don't regress**
|
||||
|
||||
- **Status row tints** = subtle channel-alpha washes (`rgba(var(--mui-palette-X-mainChannel) / 0.12)`), NEVER a solid `.light` fill: `.light` is a light colour in BOTH schemes, so white dark-mode text on it is invisible. Voided/disabled rows = `opacity` + muted text.
|
||||
- **Icon badges** = solid `X.main` tile + **white** glyph (not an `X.light` tile + `X.main` glyph — that's low-contrast).
|
||||
- **Theme is single-source:** `src/context/ThemeContext.tsx` owns the `<html data-theme>` attribute + the View-Transitions cross-fade, and persists under MUI's **`mui-mode`** localStorage key (the same key MUI reads on mount). Do NOT add a second theme key — that desyncs page vs toggle on refresh.
|
||||
- **Dialogs** lock `<html>` via `useDialogScrollLock` (MUI only locks `<body>`, and `html{overflow-x:hidden}` makes `<html>` the scroller); Modal/ConfirmDialog freeze title/label/loading through the close fade so nothing flashes. Login renders OUTSIDE AppShell.
|
||||
|
||||
**Gates every change:** `npx tsc -b --noEmit` (NOT `-p tsconfig.json` — a vacuous solution file that checks nothing), `npm run build`, `npx vitest run`.
|
||||
|
||||
---
|
||||
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "app-ts",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "app-ts",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.2",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "app-ts",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.3",
|
||||
"description": "",
|
||||
"main": "dist/server.js",
|
||||
"scripts": {
|
||||
|
||||
70
src/__tests__/nas-project-folder.test.ts
Normal file
70
src/__tests__/nas-project-folder.test.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from "vitest";
|
||||
import fs from "fs";
|
||||
import os from "os";
|
||||
import path from "path";
|
||||
import { NasFileManager } from "../services/nas-file-manager";
|
||||
|
||||
/**
|
||||
* Folder auto-creation primitive used by both the manual project-create path
|
||||
* (projects.service createProject) and the order→project paths (orders.service
|
||||
* createOrder / createOrderFromQuotation). Uses an isolated temp dir via the
|
||||
* constructor seam so it is deterministic and passes even where the real NAS
|
||||
* (Z:) is not mounted.
|
||||
*/
|
||||
describe("NasFileManager.createProjectFolder", () => {
|
||||
let tmpBase: string;
|
||||
let nas: NasFileManager;
|
||||
|
||||
beforeEach(() => {
|
||||
tmpBase = fs.mkdtempSync(path.join(os.tmpdir(), "nas-proj-"));
|
||||
nas = new NasFileManager(tmpBase);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fs.rmSync(tmpBase, { recursive: true, force: true });
|
||||
});
|
||||
|
||||
it("creates a <number>_<name> folder for a new project", () => {
|
||||
const ok = nas.createProjectFolder("26710001", "Rekonstrukce haly");
|
||||
expect(ok).toBe(true);
|
||||
expect(
|
||||
fs.existsSync(path.join(tmpBase, "26710001_Rekonstrukce_haly")),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("is idempotent — a second call does not create a duplicate", () => {
|
||||
expect(nas.createProjectFolder("26710002", "Hala")).toBe(true);
|
||||
expect(nas.createProjectFolder("26710002", "Hala")).toBe(true);
|
||||
const matches = fs
|
||||
.readdirSync(tmpBase)
|
||||
.filter((e) => e.startsWith("26710002_"));
|
||||
expect(matches).toEqual(["26710002_Hala"]);
|
||||
});
|
||||
|
||||
it("preserves Czech diacritics (no transliteration)", () => {
|
||||
expect(nas.createProjectFolder("26710003", "Měření haly")).toBe(true);
|
||||
expect(fs.existsSync(path.join(tmpBase, "26710003_Měření_haly"))).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("strips illegal characters and collapses spaces", () => {
|
||||
expect(nas.createProjectFolder("26710004", "A / B: C")).toBe(true);
|
||||
expect(fs.existsSync(path.join(tmpBase, "26710004_A_B_C"))).toBe(true);
|
||||
});
|
||||
|
||||
it("handles an empty name without crashing (trailing underscore)", () => {
|
||||
expect(nas.createProjectFolder("26710005", "")).toBe(true);
|
||||
expect(fs.existsSync(path.join(tmpBase, "26710005_"))).toBe(true);
|
||||
});
|
||||
|
||||
it("returns false and creates nothing when the NAS base is not mounted", () => {
|
||||
const missing = new NasFileManager(
|
||||
path.join(tmpBase, "does-not-exist-subdir"),
|
||||
);
|
||||
expect(missing.createProjectFolder("26710006", "X")).toBe(false);
|
||||
expect(fs.existsSync(path.join(tmpBase, "does-not-exist-subdir"))).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -479,6 +479,7 @@ function ViewModal(props: Props) {
|
||||
onClose={onClose}
|
||||
onSubmit={onClose}
|
||||
submitText="Zavřít"
|
||||
hideCancel
|
||||
>
|
||||
<Typography sx={{ mb: 1 }}>
|
||||
<strong>Datum:</strong> {formatDate(c.shift_date)}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Link as RouterLink } from "react-router-dom";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Card, Button, EmptyState } from "../../ui";
|
||||
import { iconBadgeSx, type IconBadgeColor } from "../../theme";
|
||||
import {
|
||||
ENTITY_TYPE_LABELS,
|
||||
getActivityIconClass,
|
||||
@@ -159,17 +160,20 @@ export default function DashActivityFeed({
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: "50%",
|
||||
flexShrink: 0,
|
||||
bgcolor: isDefault ? "grey.600" : `${badgeColor}.main`,
|
||||
color: "common.white",
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: "50%",
|
||||
flexShrink: 0,
|
||||
},
|
||||
iconBadgeSx(
|
||||
isDefault ? "default" : (badgeColor as IconBadgeColor),
|
||||
),
|
||||
]}
|
||||
>
|
||||
{getActivityIcon(act.action)}
|
||||
</Box>
|
||||
|
||||
@@ -10,6 +10,7 @@ import DialogActions from "@mui/material/DialogActions";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import { useAlert } from "../../context/AlertContext";
|
||||
import apiFetch from "../../utils/api";
|
||||
import { iconBadgeSx } from "../../theme";
|
||||
import { Card, Button, Modal, Field, TextField } from "../../ui";
|
||||
import useDialogScrollLock from "../../ui/useDialogScrollLock";
|
||||
|
||||
@@ -251,17 +252,18 @@ export default function DashProfile({
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
bgcolor: totpEnabled ? "success.main" : "grey.600",
|
||||
color: "common.white",
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
},
|
||||
iconBadgeSx(totpEnabled ? "success" : "default"),
|
||||
]}
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
@@ -425,7 +427,8 @@ export default function DashProfile({
|
||||
p: 1.5,
|
||||
mb: 2,
|
||||
borderRadius: 2,
|
||||
bgcolor: "warning.light",
|
||||
bgcolor:
|
||||
"rgba(var(--mui-palette-warning-mainChannel) / 0.12)",
|
||||
color: "warning.main",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
|
||||
110
src/admin/components/dashboard/DashTodayPlan.tsx
Normal file
110
src/admin/components/dashboard/DashTodayPlan.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Card } from "../../ui";
|
||||
import { formatDate } from "../../utils/formatters";
|
||||
|
||||
/** The logged-in user's resolved work plan for today (see GET /api/admin/dashboard). */
|
||||
export interface TodayPlan {
|
||||
shift_date: string;
|
||||
category: string;
|
||||
category_label: string;
|
||||
category_color: string | null;
|
||||
project_id: number | null;
|
||||
project_number: string | null;
|
||||
project_name: string | null;
|
||||
note: string;
|
||||
source: "entry" | "override";
|
||||
rangeFrom: string | null;
|
||||
rangeTo: string | null;
|
||||
}
|
||||
|
||||
function projectLabel(p: TodayPlan): string {
|
||||
const parts = [p.project_number, p.project_name].filter(Boolean);
|
||||
return parts.length > 0 ? parts.join(" — ") : "Bez projektu";
|
||||
}
|
||||
|
||||
/**
|
||||
* "Vaše dnešní zařazení" — shows the logged-in user's work-plan entry for today
|
||||
* (category + project/site + note, with a range badge when the day is part of a
|
||||
* multi-day range). `plan === null` = the user has plan access but nothing is
|
||||
* scheduled today (muted empty state). Rendered near the clock-in on the
|
||||
* dashboard; the caller gates it on the plan permission.
|
||||
*/
|
||||
export default function DashTodayPlan({ plan }: { plan: TodayPlan | null }) {
|
||||
const color = plan?.category_color || "var(--mui-palette-primary-main)";
|
||||
return (
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ mb: 1.5, fontWeight: 600, color: "text.secondary" }}
|
||||
>
|
||||
Vaše dnešní zařazení
|
||||
</Typography>
|
||||
|
||||
{plan ? (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 0.75,
|
||||
px: 1.25,
|
||||
py: 0.5,
|
||||
borderRadius: 999,
|
||||
border: 1,
|
||||
borderColor: "divider",
|
||||
bgcolor: `color-mix(in srgb, ${color} 12%, transparent)`,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: "50%",
|
||||
bgcolor: color,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{ fontWeight: 700, fontSize: "0.8rem" }}
|
||||
>
|
||||
{plan.category_label}
|
||||
</Typography>
|
||||
</Box>
|
||||
{plan.rangeFrom &&
|
||||
plan.rangeTo &&
|
||||
plan.rangeFrom !== plan.rangeTo && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
součást rozsahu {formatDate(plan.rangeFrom)} –{" "}
|
||||
{formatDate(plan.rangeTo)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="h6" sx={{ lineHeight: 1.25 }}>
|
||||
{projectLabel(plan)}
|
||||
</Typography>
|
||||
|
||||
{plan.note && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{plan.note}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Pro dnešek nemáte naplánováno.
|
||||
</Typography>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import Typography from "@mui/material/Typography";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { companySettingsOptions } from "../lib/queries/settings";
|
||||
import { iconBadgeSx } from "../theme";
|
||||
import {
|
||||
attendanceHistoryOptions,
|
||||
type AttendanceRecord,
|
||||
@@ -533,17 +534,18 @@ export default function AttendanceHistory() {
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 2,
|
||||
bgcolor: "info.main",
|
||||
color: "#fff",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 2,
|
||||
flexShrink: 0,
|
||||
},
|
||||
iconBadgeSx("info"),
|
||||
]}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
|
||||
@@ -12,12 +12,16 @@ import { require2FAOptions } from "../lib/queries/settings";
|
||||
import { getCzechDate } from "../utils/dashboardHelpers";
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { Card, Button, StatusChip, PageEnter } from "../ui";
|
||||
import { iconBadgeSx } from "../theme";
|
||||
import DashKpiCards from "../components/dashboard/DashKpiCards";
|
||||
import DashQuickActions from "../components/dashboard/DashQuickActions";
|
||||
import DashActivityFeed from "../components/dashboard/DashActivityFeed";
|
||||
import DashAttendanceToday from "../components/dashboard/DashAttendanceToday";
|
||||
import DashProfile from "../components/dashboard/DashProfile";
|
||||
import DashSessions from "../components/dashboard/DashSessions";
|
||||
import DashTodayPlan, {
|
||||
type TodayPlan,
|
||||
} from "../components/dashboard/DashTodayPlan";
|
||||
|
||||
const API_BASE = "/api/admin";
|
||||
|
||||
@@ -68,6 +72,7 @@ interface DashData {
|
||||
pending_orders?: number;
|
||||
unpaid_invoices?: number;
|
||||
pending_leave_requests?: number;
|
||||
today_plan?: TodayPlan | null;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
@@ -253,17 +258,18 @@ export default function Dashboard() {
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
bgcolor: "error.main",
|
||||
color: "#fff",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
},
|
||||
iconBadgeSx("error"),
|
||||
]}
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
@@ -315,6 +321,13 @@ export default function Dashboard() {
|
||||
<DashKpiCards dashData={dashData ?? null} />
|
||||
)}
|
||||
|
||||
{/* My work plan for today — paired with the clock-in below */}
|
||||
{!dashLoading &&
|
||||
(hasPermission("attendance.record") ||
|
||||
hasPermission("attendance.manage")) && (
|
||||
<DashTodayPlan plan={dashData?.today_plan ?? null} />
|
||||
)}
|
||||
|
||||
{/* Quick actions */}
|
||||
{!dashLoading && (
|
||||
<DashQuickActions
|
||||
|
||||
@@ -64,6 +64,7 @@ import {
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
RichTextView,
|
||||
headerActionsSx,
|
||||
} from "../ui";
|
||||
|
||||
const API_BASE = "/api/admin";
|
||||
@@ -1114,14 +1115,7 @@ export default function InvoiceDetail() {
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box sx={headerActionsSx}>
|
||||
{hasPermission("invoices.export") && (
|
||||
<Button
|
||||
onClick={() => handleViewPdf(invoice.language || "cs")}
|
||||
@@ -1140,7 +1134,11 @@ export default function InvoiceDetail() {
|
||||
</Button>
|
||||
)}
|
||||
{hasPermission("invoices.delete") && (
|
||||
<Button onClick={() => setDeleteConfirm(true)} color="error">
|
||||
<Button
|
||||
onClick={() => setDeleteConfirm(true)}
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Smazat
|
||||
</Button>
|
||||
)}
|
||||
@@ -1656,14 +1654,7 @@ export default function InvoiceDetail() {
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box sx={headerActionsSx}>
|
||||
{isEdit && invoice && hasPermission("invoices.export") && (
|
||||
<Button
|
||||
onClick={() => handleViewPdf(invoice.language || "cs")}
|
||||
@@ -1710,7 +1701,11 @@ export default function InvoiceDetail() {
|
||||
</Button>
|
||||
))}
|
||||
{hasPermission("invoices.delete") && (
|
||||
<Button onClick={() => setDeleteConfirm(true)} color="error">
|
||||
<Button
|
||||
onClick={() => setDeleteConfirm(true)}
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Smazat
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -74,6 +74,7 @@ import {
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
headerActionsSx,
|
||||
} from "../ui";
|
||||
|
||||
const API_BASE = "/api/admin";
|
||||
@@ -1118,14 +1119,7 @@ export default function OfferDetail() {
|
||||
{isCompleted && <StatusChip label="Dokončeno" color="success" />}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box sx={headerActionsSx}>
|
||||
{isEdit && hasPermission("offers.export") && (
|
||||
<Button
|
||||
onClick={handlePdf}
|
||||
@@ -1184,7 +1178,11 @@ export default function OfferDetail() {
|
||||
</Button>
|
||||
)}
|
||||
{isEdit && hasPermission("offers.delete") && (
|
||||
<Button onClick={() => setDeleteConfirm(true)} color="error">
|
||||
<Button
|
||||
onClick={() => setDeleteConfirm(true)}
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Smazat
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -32,6 +32,7 @@ import {
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
RichTextView,
|
||||
headerActionsSx,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -424,14 +425,7 @@ export default function OrderDetail() {
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box sx={headerActionsSx}>
|
||||
{order.invoice ? (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
|
||||
@@ -29,6 +29,7 @@ import {
|
||||
ConfirmDialog,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
headerActionsSx,
|
||||
} from "../ui";
|
||||
|
||||
const API_BASE = "/api/admin";
|
||||
@@ -320,14 +321,7 @@ export default function ProjectDetail() {
|
||||
</Box>
|
||||
</Box>
|
||||
{canEdit && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box sx={headerActionsSx}>
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Uložit"}
|
||||
</Button>
|
||||
|
||||
@@ -33,6 +33,7 @@ import {
|
||||
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import apiFetch from "../utils/api";
|
||||
import { iconBadgeSx } from "../theme";
|
||||
const API_BASE = "/api/admin";
|
||||
|
||||
const PlusIcon = (
|
||||
@@ -842,17 +843,18 @@ export default function Settings() {
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
bgcolor: require2FA ? "success.light" : "action.hover",
|
||||
color: require2FA ? "success.main" : "text.secondary",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
},
|
||||
iconBadgeSx(require2FA ? "success" : "default"),
|
||||
]}
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
|
||||
@@ -157,7 +157,7 @@ export default function WarehouseInventory() {
|
||||
/>
|
||||
</Box>
|
||||
{statusFilter && (
|
||||
<Button variant="outlined" onClick={resetFilters}>
|
||||
<Button variant="outlined" color="inherit" onClick={resetFilters}>
|
||||
Zrušit filtry
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
ConfirmDialog,
|
||||
headerActionsSx,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -192,7 +193,7 @@ export default function WarehouseInventoryDetail() {
|
||||
<PageHeader
|
||||
title={s.session_number || "Inventura"}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Box sx={headerActionsSx}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
PageHeader,
|
||||
ConfirmDialog,
|
||||
PageEnter,
|
||||
headerActionsSx,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -233,7 +234,7 @@ export default function WarehouseIssueDetail() {
|
||||
: undefined
|
||||
}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Box sx={headerActionsSx}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues"
|
||||
|
||||
@@ -248,7 +248,7 @@ export default function WarehouseIssues() {
|
||||
/>
|
||||
</Box>
|
||||
{hasActiveFilters && (
|
||||
<Button variant="outlined" onClick={resetFilters}>
|
||||
<Button variant="outlined" color="inherit" onClick={resetFilters}>
|
||||
Zrušit filtry
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -29,6 +29,7 @@ import {
|
||||
PageHeader,
|
||||
ConfirmDialog,
|
||||
PageEnter,
|
||||
headerActionsSx,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -233,7 +234,7 @@ export default function WarehouseItemDetail() {
|
||||
|
||||
// Edit / view mode action buttons
|
||||
const headerActions = canManage ? (
|
||||
<Box sx={{ display: "flex", gap: 1 }}>
|
||||
<Box sx={headerActionsSx}>
|
||||
{editing || isNew ? (
|
||||
<>
|
||||
{!isNew && (
|
||||
@@ -362,7 +363,7 @@ export default function WarehouseItemDetail() {
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Box sx={headerActionsSx}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/items"
|
||||
|
||||
@@ -26,6 +26,7 @@ import {
|
||||
PageHeader,
|
||||
ConfirmDialog,
|
||||
PageEnter,
|
||||
headerActionsSx,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -301,7 +302,7 @@ export default function WarehouseReceiptDetail() {
|
||||
title={r.receipt_number || "Nový doklad"}
|
||||
subtitle={r.supplier?.name}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Box sx={headerActionsSx}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts"
|
||||
|
||||
@@ -247,7 +247,7 @@ export default function WarehouseReceipts() {
|
||||
/>
|
||||
</Box>
|
||||
{hasActiveFilters && (
|
||||
<Button variant="outlined" onClick={resetFilters}>
|
||||
<Button variant="outlined" color="inherit" onClick={resetFilters}>
|
||||
Zrušit filtry
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -376,7 +376,7 @@ export default function WarehouseReservations() {
|
||||
</Box>
|
||||
)}
|
||||
{hasActiveFilters && (
|
||||
<Button variant="outlined" onClick={resetFilters}>
|
||||
<Button variant="outlined" color="inherit" onClick={resetFilters}>
|
||||
Zrušit filtry
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createTheme } from "@mui/material/styles";
|
||||
import { createTheme, type Theme } from "@mui/material/styles";
|
||||
|
||||
const FONT_BODY = "'Plus Jakarta Sans', system-ui, sans-serif";
|
||||
const FONT_HEADING = "'Urbanist', sans-serif";
|
||||
@@ -7,6 +7,19 @@ const FONT_MONO = "'DM Mono', Menlo, monospace";
|
||||
// Standard Material easing (matches the legacy --transition cubic-bezier).
|
||||
const EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
|
||||
|
||||
// Dark-mode fills for FILLED colored surfaces (contained buttons, filled chips,
|
||||
// StatCard badges). The palette .main stays BRIGHT in dark mode (it drives text,
|
||||
// outlined buttons and row tints), but a bright fill makes WHITE text/glyphs
|
||||
// illegible — so filled surfaces drop to these darker shades (≈ the light-scheme
|
||||
// values) in dark mode. One rule everywhere: filled colored = white text,
|
||||
// readable in both themes. Light mode needs no override (its .main is dark).
|
||||
export const FILLED_DARK_BG = {
|
||||
error: { bg: "#dc2626", hover: "#b91c1c" },
|
||||
success: { bg: "#15803d", hover: "#166534" },
|
||||
warning: { bg: "#b45309", hover: "#92400e" },
|
||||
info: { bg: "#1d4ed8", hover: "#1e40af" },
|
||||
} as const;
|
||||
|
||||
export const theme = createTheme({
|
||||
cssVariables: {
|
||||
colorSchemeSelector: "[data-theme='%s']",
|
||||
@@ -80,6 +93,47 @@ export const theme = createTheme({
|
||||
},
|
||||
"&:active": { transform: "translateY(0) scale(0.97)" },
|
||||
},
|
||||
// Filled colored buttons: WHITE text in BOTH themes (was per-scheme
|
||||
// contrastText → near-black text on colored fills in dark mode, which
|
||||
// also clashed with the always-white primary — "black text on one red
|
||||
// button, white on another"). In dark mode the fill drops to a darker
|
||||
// shade so white stays legible.
|
||||
containedError: ({ theme }) => ({
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
"&:not(.Mui-disabled)": {
|
||||
backgroundColor: FILLED_DARK_BG.error.bg,
|
||||
"&:hover": { backgroundColor: FILLED_DARK_BG.error.hover },
|
||||
},
|
||||
}),
|
||||
}),
|
||||
containedSuccess: ({ theme }) => ({
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
"&:not(.Mui-disabled)": {
|
||||
backgroundColor: FILLED_DARK_BG.success.bg,
|
||||
"&:hover": { backgroundColor: FILLED_DARK_BG.success.hover },
|
||||
},
|
||||
}),
|
||||
}),
|
||||
containedWarning: ({ theme }) => ({
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
"&:not(.Mui-disabled)": {
|
||||
backgroundColor: FILLED_DARK_BG.warning.bg,
|
||||
"&:hover": { backgroundColor: FILLED_DARK_BG.warning.hover },
|
||||
},
|
||||
}),
|
||||
}),
|
||||
containedInfo: ({ theme }) => ({
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
"&:not(.Mui-disabled)": {
|
||||
backgroundColor: FILLED_DARK_BG.info.bg,
|
||||
"&:hover": { backgroundColor: FILLED_DARK_BG.info.hover },
|
||||
},
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiCard: {
|
||||
@@ -99,6 +153,54 @@ export const theme = createTheme({
|
||||
fontWeight: 700,
|
||||
transition: `background-color 200ms ${EASE}, box-shadow 200ms ${EASE}`,
|
||||
},
|
||||
// Filled colored chips follow the same rule as filled buttons: white
|
||||
// label in both themes, darker fill in dark mode so white stays legible.
|
||||
// (Chip has no per-color `filledX` key, so target the color class and
|
||||
// scope to the filled variant.)
|
||||
colorError: ({ theme }) => ({
|
||||
"&.MuiChip-filled": {
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: FILLED_DARK_BG.error.bg,
|
||||
"&.MuiChip-clickable:hover": {
|
||||
backgroundColor: FILLED_DARK_BG.error.hover,
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
colorSuccess: ({ theme }) => ({
|
||||
"&.MuiChip-filled": {
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: FILLED_DARK_BG.success.bg,
|
||||
"&.MuiChip-clickable:hover": {
|
||||
backgroundColor: FILLED_DARK_BG.success.hover,
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
colorWarning: ({ theme }) => ({
|
||||
"&.MuiChip-filled": {
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: FILLED_DARK_BG.warning.bg,
|
||||
"&.MuiChip-clickable:hover": {
|
||||
backgroundColor: FILLED_DARK_BG.warning.hover,
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
colorInfo: ({ theme }) => ({
|
||||
"&.MuiChip-filled": {
|
||||
color: "#fff",
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: FILLED_DARK_BG.info.bg,
|
||||
"&.MuiChip-clickable:hover": {
|
||||
backgroundColor: FILLED_DARK_BG.info.hover,
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiOutlinedInput: {
|
||||
@@ -124,3 +226,29 @@ export const fonts = {
|
||||
heading: FONT_HEADING,
|
||||
mono: FONT_MONO,
|
||||
};
|
||||
|
||||
export type IconBadgeColor =
|
||||
| "default"
|
||||
| "primary"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "info";
|
||||
|
||||
/**
|
||||
* sx fragment for a solid icon-badge tile: a `<color>.main` fill with a WHITE
|
||||
* glyph, darkened in dark mode (FILLED_DARK_BG) so white stays legible on the
|
||||
* otherwise-bright success/warning/info/error fills. `default` = neutral grey.
|
||||
* Single source of truth for every labelled icon badge — use in an sx array
|
||||
* next to the tile's size/shape so they can never drift apart:
|
||||
* sx={[{ width: 40, height: 40, borderRadius: 2, display: "flex", … }, iconBadgeSx(color)]}
|
||||
*/
|
||||
export function iconBadgeSx(color: IconBadgeColor) {
|
||||
const bg = color === "default" ? "grey.600" : `${color}.main`;
|
||||
const darkBg = (FILLED_DARK_BG as Record<string, { bg: string }>)[color]?.bg;
|
||||
return (theme: Theme) => ({
|
||||
bgcolor: bg,
|
||||
color: "common.white",
|
||||
...(darkBg ? theme.applyStyles("dark", { backgroundColor: darkBg }) : {}),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { ReactNode } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import type { SxProps, Theme } from "@mui/material/styles";
|
||||
|
||||
export interface PageHeaderProps {
|
||||
title: string;
|
||||
@@ -8,6 +9,26 @@ export interface PageHeaderProps {
|
||||
actions?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared sx for a header action-button group. On mobile each button gets its
|
||||
* own full-width row (column + stretch); from `sm` up it's the usual right-
|
||||
* aligned wrapping row. Use on the Box that wraps the header's action Buttons
|
||||
* (page headers + detail-page headers) so the mobile layout is identical
|
||||
* everywhere — no more buttons wrapping into a ragged grid on phones.
|
||||
*/
|
||||
export const headerActionsSx: SxProps<Theme> = {
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: { xs: "stretch", sm: "center" },
|
||||
justifyContent: { sm: "flex-end" },
|
||||
flexWrap: { sm: "wrap" },
|
||||
gap: 1,
|
||||
width: { xs: "100%", sm: "auto" },
|
||||
// Some detail-page headers keep a StatusChip in this same group — keep it at
|
||||
// its natural size on mobile instead of stretching it into a full-width bar.
|
||||
"& > .MuiChip-root": { alignSelf: { xs: "flex-start", sm: "auto" } },
|
||||
};
|
||||
|
||||
/**
|
||||
* Standard page header: title (+ optional subtitle) on the left,
|
||||
* action controls on the right. No framer-motion — pages add their own entrance.
|
||||
@@ -36,19 +57,7 @@ export default function PageHeader({
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
{actions && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
gap: 1,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
{actions}
|
||||
</Box>
|
||||
)}
|
||||
{actions && <Box sx={headerActionsSx}>{actions}</Box>}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Card from "./Card";
|
||||
import { iconBadgeSx } from "../theme";
|
||||
|
||||
export type StatCardColor =
|
||||
| "default"
|
||||
@@ -30,27 +31,23 @@ export default function StatCard({
|
||||
color = "default",
|
||||
footer,
|
||||
}: StatCardProps) {
|
||||
// Solid tile + white glyph: high-contrast in both themes (the old light tint
|
||||
// left the icon dark/low-visibility, esp. for the default variant).
|
||||
const iconBg = color === "default" ? "grey.600" : `${color}.main`;
|
||||
const iconColor = "common.white";
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
|
||||
{icon && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 2,
|
||||
bgcolor: iconBg,
|
||||
color: iconColor,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 2,
|
||||
flexShrink: 0,
|
||||
},
|
||||
iconBadgeSx(color),
|
||||
]}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
|
||||
@@ -18,7 +18,7 @@ export { default as Pagination } from "./Pagination";
|
||||
export { default as DateField } from "./DateField";
|
||||
export { default as MonthField } from "./MonthField";
|
||||
export { default as TimeField } from "./TimeField";
|
||||
export { default as PageHeader } from "./PageHeader";
|
||||
export { default as PageHeader, headerActionsSx } from "./PageHeader";
|
||||
export { default as EmptyState } from "./EmptyState";
|
||||
export { default as LoadingState } from "./LoadingState";
|
||||
export { default as FilterBar } from "./FilterBar";
|
||||
|
||||
@@ -4,6 +4,7 @@ import { requireAuth } from "../../middleware/auth";
|
||||
import { success } from "../../utils/response";
|
||||
import { localTimeStr } from "../../utils/date";
|
||||
import { toCzk } from "../../services/exchange-rates";
|
||||
import { resolveCell } from "../../services/plan.service";
|
||||
|
||||
export default async function dashboardRoutes(
|
||||
fastify: FastifyInstance,
|
||||
@@ -42,6 +43,29 @@ export default async function dashboardRoutes(
|
||||
result.my_shift = { has_ongoing: myShift !== null };
|
||||
}
|
||||
|
||||
// Today's work plan (personal) — powers the "Vaše dnešní zařazení" card.
|
||||
// resolveCell applies override-beats-range precedence; null = the user has
|
||||
// plan access but nothing is scheduled today. The category key is enriched
|
||||
// with its label + colour so the widget needs no extra query. todayStr uses
|
||||
// local (Europe/Prague) calendar date — the plan's @db.Date day.
|
||||
if (has("attendance.record") || has("attendance.manage")) {
|
||||
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
||||
const cell = await resolveCell(userId, todayStr);
|
||||
if (cell) {
|
||||
const cat = await prisma.plan_categories.findUnique({
|
||||
where: { key: cell.category },
|
||||
select: { label: true, color: true },
|
||||
});
|
||||
result.today_plan = {
|
||||
...cell,
|
||||
category_label: cat?.label ?? cell.category,
|
||||
category_color: cat?.color ?? null,
|
||||
};
|
||||
} else {
|
||||
result.today_plan = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Attendance admin — only for attendance.manage
|
||||
if (has("attendance.manage")) {
|
||||
const [todayAttendance, onLeaveToday, usersCount] = await Promise.all([
|
||||
|
||||
@@ -105,8 +105,12 @@ interface DownloadResult {
|
||||
export class NasFileManager {
|
||||
private readonly basePath: string;
|
||||
|
||||
constructor() {
|
||||
this.basePath = path.resolve(config.nas.path).replace(/\\/g, "/");
|
||||
constructor(basePath?: string) {
|
||||
// basePath is an injection seam for tests; production callers pass nothing
|
||||
// and get the configured NAS_PATH.
|
||||
this.basePath = path
|
||||
.resolve(basePath ?? config.nas.path)
|
||||
.replace(/\\/g, "/");
|
||||
}
|
||||
|
||||
public isConfigured(): boolean {
|
||||
|
||||
@@ -5,6 +5,11 @@ import {
|
||||
releaseSharedNumber,
|
||||
isOrderNumberTaken,
|
||||
} from "./numbering.service";
|
||||
import { NasFileManager } from "./nas-file-manager";
|
||||
|
||||
// Best-effort NAS folder creation for order-spawned projects, mirroring
|
||||
// projects.service. Stateless singleton; reads NAS_PATH at construction.
|
||||
const nasFileManager = new NasFileManager();
|
||||
|
||||
interface OrderItemInput {
|
||||
description?: string | null;
|
||||
@@ -262,6 +267,23 @@ export async function createOrderFromQuotation(
|
||||
return { order, project, orderNumber };
|
||||
});
|
||||
|
||||
// Best-effort NAS project folder, outside the transaction (mirrors
|
||||
// createProject). A project created from an accepted offer must get the same
|
||||
// 02_PROJEKTY/<number>_<name> folder as a manually-created one. Non-fatal: a
|
||||
// NAS outage must never roll back the order.
|
||||
if (result.project.project_number && nasFileManager.isConfigured()) {
|
||||
const created = nasFileManager.createProjectFolder(
|
||||
result.project.project_number,
|
||||
result.project.name || "",
|
||||
);
|
||||
if (!created) {
|
||||
console.error(
|
||||
"[orders.service] NAS folder not created for project",
|
||||
result.project.project_number,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
order_id: result.order.id,
|
||||
@@ -297,7 +319,7 @@ export async function createOrder(
|
||||
attachmentName?: string | null,
|
||||
) {
|
||||
try {
|
||||
return await prisma.$transaction(async (tx) => {
|
||||
const result = await prisma.$transaction(async (tx) => {
|
||||
const orderNumber =
|
||||
body.order_number !== undefined && body.order_number !== null
|
||||
? String(body.order_number)
|
||||
@@ -362,6 +384,8 @@ export async function createOrder(
|
||||
}
|
||||
|
||||
let projectId: number | undefined;
|
||||
let createdProject: { project_number: string; name: string } | null =
|
||||
null;
|
||||
// Only auto-create a project for genuine offer-less orders; share the
|
||||
// order's number (same shared pool) exactly like the from-quotation flow.
|
||||
if (body.create_project !== false && body.quotation_id == null) {
|
||||
@@ -375,14 +399,42 @@ export async function createOrder(
|
||||
},
|
||||
});
|
||||
projectId = project.id;
|
||||
if (project.project_number) {
|
||||
createdProject = {
|
||||
project_number: project.project_number,
|
||||
name: project.name || "",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: order.id,
|
||||
order_number: order.order_number,
|
||||
project_id: projectId,
|
||||
createdProject,
|
||||
};
|
||||
});
|
||||
|
||||
// Best-effort NAS project folder, outside the transaction (mirrors
|
||||
// createProject). Non-fatal so a NAS outage can't roll back the order.
|
||||
if (result.createdProject && nasFileManager.isConfigured()) {
|
||||
const created = nasFileManager.createProjectFolder(
|
||||
result.createdProject.project_number,
|
||||
result.createdProject.name,
|
||||
);
|
||||
if (!created) {
|
||||
console.error(
|
||||
"[orders.service] NAS folder not created for project",
|
||||
result.createdProject.project_number,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: result.id,
|
||||
order_number: result.order_number,
|
||||
project_id: result.project_id,
|
||||
};
|
||||
} catch (err) {
|
||||
if (err instanceof Error && "status" in err) {
|
||||
return {
|
||||
|
||||
@@ -189,10 +189,16 @@ export async function createProject(data: CreateProjectInput) {
|
||||
});
|
||||
|
||||
if (project.project_number && nasFileManager.isConfigured()) {
|
||||
nasFileManager.createProjectFolder(
|
||||
const created = nasFileManager.createProjectFolder(
|
||||
project.project_number,
|
||||
project.name || "",
|
||||
);
|
||||
if (!created) {
|
||||
console.error(
|
||||
"[projects.service] NAS folder not created for project",
|
||||
project.project_number,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return project;
|
||||
|
||||
Reference in New Issue
Block a user