feat(mui): consistent staggered page entrance across all 43 route pages
Adopt the PageEnter wrapper as every page's outermost render element and remove the ad-hoc per-page entrance motion.div wrappers. Every page now enters the same way — all top-level sections rise+fade in, staggered — so nothing appears instantly and the motion is identical app-wide. Presentation-only: no data/logic/hooks/invalidate/permissions touched. Embedded sub-tabs (CompanySettings, ReceivedInvoices), Login (auth shell) and the dev UiKit are intentionally excluded. Gates: tsc -b --noEmit=0, build=0, vitest 152/152. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import { parseISO, isValid } from "date-fns";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
@@ -30,6 +29,7 @@ import {
|
||||
StatusChip,
|
||||
TextField,
|
||||
ProgressBar,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
type DataColumn,
|
||||
@@ -614,24 +614,18 @@ export default function Attendance() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h4">Docházka</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||||
{new Date().toLocaleDateString("cs-CZ", {
|
||||
weekday: "long",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h4">Docházka</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||||
{new Date().toLocaleDateString("cs-CZ", {
|
||||
weekday: "long",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
@@ -642,11 +636,7 @@ export default function Attendance() {
|
||||
}}
|
||||
>
|
||||
{/* Left Column - Clock In/Out */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<>
|
||||
<Card>
|
||||
<Box
|
||||
sx={{
|
||||
@@ -986,35 +976,63 @@ export default function Attendance() {
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</motion.div>
|
||||
</>
|
||||
|
||||
{/* Right Column - Stats & Quick Links */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
|
||||
{/* Leave Balance Card */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
|
||||
{/* Leave Balance Card */}
|
||||
<StatCard
|
||||
icon={VacationIcon}
|
||||
color="success"
|
||||
label={`Dovolená ${new Date().getFullYear()}`}
|
||||
value={
|
||||
<>
|
||||
{vacationDaysRemaining}{" "}
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontFamily: "inherit" }}
|
||||
>
|
||||
{czechPlural(vacationDaysRemaining, "den", "dny", "dnů")}
|
||||
{vacationHoursRemaining > 0 && ` ${vacationHoursRemaining}h`}
|
||||
</Typography>
|
||||
</>
|
||||
}
|
||||
footer={
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mb: 0.75,
|
||||
}}
|
||||
>
|
||||
<span>Celkem: {leaveBalance.vacation_total}h</span>
|
||||
<span>Čerpáno: {leaveBalance.vacation_used}h</span>
|
||||
</Box>
|
||||
<ProgressBar
|
||||
value={
|
||||
leaveBalance.vacation_total > 0
|
||||
? (leaveBalance.vacation_remaining /
|
||||
leaveBalance.vacation_total) *
|
||||
100
|
||||
: 0
|
||||
}
|
||||
color="success"
|
||||
height={6}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Monthly Fund Card */}
|
||||
{data.monthly_fund && (
|
||||
<StatCard
|
||||
icon={VacationIcon}
|
||||
color="success"
|
||||
label={`Dovolená ${new Date().getFullYear()}`}
|
||||
value={
|
||||
<>
|
||||
{vacationDaysRemaining}{" "}
|
||||
<Typography
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontFamily: "inherit" }}
|
||||
>
|
||||
{czechPlural(vacationDaysRemaining, "den", "dny", "dnů")}
|
||||
{vacationHoursRemaining > 0 &&
|
||||
` ${vacationHoursRemaining}h`}
|
||||
</Typography>
|
||||
</>
|
||||
}
|
||||
icon={CalendarIcon}
|
||||
color="info"
|
||||
label={data.monthly_fund.month_name}
|
||||
value={`${data.monthly_fund.worked}h / ${data.monthly_fund.fund}h`}
|
||||
footer={
|
||||
<Box>
|
||||
<Box
|
||||
@@ -1024,137 +1042,102 @@ export default function Attendance() {
|
||||
mb: 0.75,
|
||||
}}
|
||||
>
|
||||
<span>Celkem: {leaveBalance.vacation_total}h</span>
|
||||
<span>Čerpáno: {leaveBalance.vacation_used}h</span>
|
||||
<span>Odpracováno: {data.monthly_fund.worked}h</span>
|
||||
{data.monthly_fund.overtime > 0 ? (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{ color: "warning.main", fontWeight: 600 }}
|
||||
>
|
||||
Přesčas: +{data.monthly_fund.overtime}h
|
||||
</Box>
|
||||
) : (
|
||||
<span>Zbývá: {data.monthly_fund.remaining}h</span>
|
||||
)}
|
||||
</Box>
|
||||
<ProgressBar
|
||||
value={
|
||||
leaveBalance.vacation_total > 0
|
||||
? (leaveBalance.vacation_remaining /
|
||||
leaveBalance.vacation_total) *
|
||||
100
|
||||
data.monthly_fund.fund > 0
|
||||
? Math.min(
|
||||
100,
|
||||
(data.monthly_fund.covered /
|
||||
data.monthly_fund.fund) *
|
||||
100,
|
||||
)
|
||||
: 0
|
||||
}
|
||||
color="success"
|
||||
color={getFundBarColor(data.monthly_fund)}
|
||||
height={6}
|
||||
/>
|
||||
{data.monthly_fund.leave_hours > 0 && (
|
||||
<Box sx={{ mt: 0.5, color: "text.disabled" }}>
|
||||
{"Pokryto: "}
|
||||
{data.monthly_fund.covered}h (práce{" "}
|
||||
{data.monthly_fund.worked}h
|
||||
{data.monthly_fund.vacation_hours > 0 &&
|
||||
` + dovolená ${data.monthly_fund.vacation_hours}h`}
|
||||
{data.monthly_fund.sick_hours > 0 &&
|
||||
` + nemoc ${data.monthly_fund.sick_hours}h`}
|
||||
{data.monthly_fund.unpaid_hours > 0 &&
|
||||
` + neplacené ${data.monthly_fund.unpaid_hours}h`}
|
||||
)
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Monthly Fund Card */}
|
||||
{data.monthly_fund && (
|
||||
<StatCard
|
||||
icon={CalendarIcon}
|
||||
color="info"
|
||||
label={data.monthly_fund.month_name}
|
||||
value={`${data.monthly_fund.worked}h / ${data.monthly_fund.fund}h`}
|
||||
footer={
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mb: 0.75,
|
||||
}}
|
||||
>
|
||||
<span>Odpracováno: {data.monthly_fund.worked}h</span>
|
||||
{data.monthly_fund.overtime > 0 ? (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{ color: "warning.main", fontWeight: 600 }}
|
||||
>
|
||||
Přesčas: +{data.monthly_fund.overtime}h
|
||||
</Box>
|
||||
) : (
|
||||
<span>Zbývá: {data.monthly_fund.remaining}h</span>
|
||||
)}
|
||||
</Box>
|
||||
<ProgressBar
|
||||
value={
|
||||
data.monthly_fund.fund > 0
|
||||
? Math.min(
|
||||
100,
|
||||
(data.monthly_fund.covered /
|
||||
data.monthly_fund.fund) *
|
||||
100,
|
||||
)
|
||||
: 0
|
||||
}
|
||||
color={getFundBarColor(data.monthly_fund)}
|
||||
height={6}
|
||||
/>
|
||||
{data.monthly_fund.leave_hours > 0 && (
|
||||
<Box sx={{ mt: 0.5, color: "text.disabled" }}>
|
||||
{"Pokryto: "}
|
||||
{data.monthly_fund.covered}h (práce{" "}
|
||||
{data.monthly_fund.worked}h
|
||||
{data.monthly_fund.vacation_hours > 0 &&
|
||||
` + dovolená ${data.monthly_fund.vacation_hours}h`}
|
||||
{data.monthly_fund.sick_hours > 0 &&
|
||||
` + nemoc ${data.monthly_fund.sick_hours}h`}
|
||||
{data.monthly_fund.unpaid_hours > 0 &&
|
||||
` + neplacené ${data.monthly_fund.unpaid_hours}h`}
|
||||
)
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
{/* Sick Leave Card */}
|
||||
<StatCard
|
||||
icon={SickIcon}
|
||||
color="error"
|
||||
label={`Nemoc ${new Date().getFullYear()}`}
|
||||
value={`${leaveBalance.sick_used}h čerpáno`}
|
||||
/>
|
||||
|
||||
{/* Quick Links */}
|
||||
<Card>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{
|
||||
display: "block",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: ".06em",
|
||||
fontWeight: 700,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
Rychlé odkazy
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.25 }}>
|
||||
<QuickLink
|
||||
to="/attendance/requests"
|
||||
icon={RequestsIcon}
|
||||
label="Moje žádosti"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sick Leave Card */}
|
||||
<StatCard
|
||||
icon={SickIcon}
|
||||
color="error"
|
||||
label={`Nemoc ${new Date().getFullYear()}`}
|
||||
value={`${leaveBalance.sick_used}h čerpáno`}
|
||||
/>
|
||||
|
||||
{/* Quick Links */}
|
||||
<Card>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{
|
||||
display: "block",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: ".06em",
|
||||
fontWeight: 700,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
Rychlé odkazy
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.25 }}>
|
||||
<QuickLink
|
||||
to="/attendance/history"
|
||||
icon={HistoryIcon}
|
||||
label="Historie docházky"
|
||||
/>
|
||||
{hasPermission("attendance.manage") && (
|
||||
<QuickLink
|
||||
to="/attendance/requests"
|
||||
icon={RequestsIcon}
|
||||
label="Moje žádosti"
|
||||
to="/attendance/admin"
|
||||
icon={ManageIcon}
|
||||
label="Správa docházky"
|
||||
/>
|
||||
)}
|
||||
{hasPermission("attendance.balances") && (
|
||||
<QuickLink
|
||||
to="/attendance/history"
|
||||
icon={HistoryIcon}
|
||||
label="Historie docházky"
|
||||
to="/attendance/balances"
|
||||
icon={BalancesIcon}
|
||||
label="Správa bilancí"
|
||||
/>
|
||||
{hasPermission("attendance.manage") && (
|
||||
<QuickLink
|
||||
to="/attendance/admin"
|
||||
icon={ManageIcon}
|
||||
label="Správa docházky"
|
||||
/>
|
||||
)}
|
||||
{hasPermission("attendance.balances") && (
|
||||
<QuickLink
|
||||
to="/attendance/balances"
|
||||
icon={BalancesIcon}
|
||||
label="Správa bilancí"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</motion.div>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Leave Modal */}
|
||||
@@ -1273,6 +1256,6 @@ export default function Attendance() {
|
||||
cancelText="Zrušit"
|
||||
confirmVariant="primary"
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
@@ -18,6 +17,7 @@ import {
|
||||
FilterBar,
|
||||
LoadingState,
|
||||
MonthField,
|
||||
PageEnter,
|
||||
Select,
|
||||
StatCard,
|
||||
StatusChip,
|
||||
@@ -165,262 +165,236 @@ export default function AttendanceAdmin() {
|
||||
const hasTotals = Object.keys(data.user_totals).length > 0;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<PageEnter>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Správa docházky</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
|
||||
{hasData && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PrintIcon}
|
||||
onClick={handlePrint}
|
||||
title="Tisk docházky"
|
||||
>
|
||||
Tisk
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outlined" color="inherit" onClick={openBulkModal}>
|
||||
Vyplnit měsíc
|
||||
</Button>
|
||||
<Button startIcon={AddIcon} onClick={openCreateModal}>
|
||||
Přidat záznam
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Filters */}
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "0 0 200px" }}>
|
||||
<Field label="Měsíc">
|
||||
<MonthField value={month} onChange={(val) => setMonth(val)} />
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 240px" }}>
|
||||
<Field label="Zaměstnanec">
|
||||
<Select
|
||||
value={filterUserId}
|
||||
onChange={setFilterUserId}
|
||||
options={[
|
||||
{ value: "", label: "Všichni" },
|
||||
...data.users.map((user) => ({
|
||||
value: String(user.id),
|
||||
label: user.name,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
|
||||
{/* User Totals (KPI cards) */}
|
||||
{hasTotals && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
lg: "repeat(3, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Správa docházky</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
|
||||
{hasData && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PrintIcon}
|
||||
onClick={handlePrint}
|
||||
title="Tisk docházky"
|
||||
>
|
||||
Tisk
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outlined" color="inherit" onClick={openBulkModal}>
|
||||
Vyplnit měsíc
|
||||
</Button>
|
||||
<Button startIcon={AddIcon} onClick={openCreateModal}>
|
||||
Přidat záznam
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{/* Filters */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "0 0 200px" }}>
|
||||
<Field label="Měsíc">
|
||||
<MonthField value={month} onChange={(val) => setMonth(val)} />
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 240px" }}>
|
||||
<Field label="Zaměstnanec">
|
||||
<Select
|
||||
value={filterUserId}
|
||||
onChange={setFilterUserId}
|
||||
options={[
|
||||
{ value: "", label: "Všichni" },
|
||||
...data.users.map((user) => ({
|
||||
value: String(user.id),
|
||||
label: user.name,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
</motion.div>
|
||||
|
||||
{/* User Totals (KPI cards) */}
|
||||
{hasTotals && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.09 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
lg: "repeat(3, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
{Object.entries(data.user_totals).map(([uid, userData]) => {
|
||||
const ut = userData as UserTotalData;
|
||||
const balance = data.leave_balances[uid];
|
||||
const statColor: StatCardColor = ut.working
|
||||
? "success"
|
||||
: "default";
|
||||
return (
|
||||
<StatCard
|
||||
key={uid}
|
||||
label={ut.name}
|
||||
value={
|
||||
{Object.entries(data.user_totals).map(([uid, userData]) => {
|
||||
const ut = userData as UserTotalData;
|
||||
const balance = data.leave_balances[uid];
|
||||
const statColor: StatCardColor = ut.working ? "success" : "default";
|
||||
return (
|
||||
<StatCard
|
||||
key={uid}
|
||||
label={ut.name}
|
||||
value={
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{formatMinutes(ut.minutes)}
|
||||
<StatusChip
|
||||
color={ut.working ? "success" : "default"}
|
||||
label={ut.working ? "✓" : "✗"}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
color={statColor}
|
||||
footer={
|
||||
<Box>
|
||||
{/* Leave-type badges */}
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: "inline-flex",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 0.5,
|
||||
mb: 1,
|
||||
minHeight: "1.75rem",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{formatMinutes(ut.minutes)}
|
||||
<StatusChip
|
||||
color={ut.working ? "success" : "default"}
|
||||
label={ut.working ? "✓" : "✗"}
|
||||
/>
|
||||
{ut.vacation_hours > 0 && (
|
||||
<StatusChip
|
||||
color="info"
|
||||
label={`Dov: ${ut.vacation_hours}h`}
|
||||
/>
|
||||
)}
|
||||
{ut.sick_hours > 0 && (
|
||||
<StatusChip
|
||||
color="error"
|
||||
label={`Nem: ${ut.sick_hours}h`}
|
||||
/>
|
||||
)}
|
||||
{ut.svatek !== undefined && ut.svatek > 0 && (
|
||||
<StatusChip
|
||||
color="warning"
|
||||
label={`Sv: ${Math.round(ut.svatek)}h`}
|
||||
/>
|
||||
)}
|
||||
{ut.unpaid_hours > 0 && (
|
||||
<StatusChip
|
||||
color="default"
|
||||
label={`Nep: ${ut.unpaid_hours}h`}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
color={statColor}
|
||||
footer={
|
||||
<Box>
|
||||
{/* Leave-type badges */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 0.5,
|
||||
mb: 1,
|
||||
minHeight: "1.75rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{ut.vacation_hours > 0 && (
|
||||
<StatusChip
|
||||
color="info"
|
||||
label={`Dov: ${ut.vacation_hours}h`}
|
||||
/>
|
||||
)}
|
||||
{ut.sick_hours > 0 && (
|
||||
<StatusChip
|
||||
color="error"
|
||||
label={`Nem: ${ut.sick_hours}h`}
|
||||
/>
|
||||
)}
|
||||
{ut.svatek !== undefined && ut.svatek > 0 && (
|
||||
<StatusChip
|
||||
color="warning"
|
||||
label={`Sv: ${Math.round(ut.svatek)}h`}
|
||||
/>
|
||||
)}
|
||||
{ut.unpaid_hours > 0 && (
|
||||
<StatusChip
|
||||
color="default"
|
||||
label={`Nep: ${ut.unpaid_hours}h`}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Fond usage */}
|
||||
{ut.fund !== null &&
|
||||
(() => {
|
||||
// Fond "used" = real_worked + vacation +
|
||||
// worked_holiday + free_holiday (everything the user
|
||||
// actually got paid for this month).
|
||||
const fondUsed = getFondUsed(ut);
|
||||
const fundVal = ut.fund ?? 0;
|
||||
const delta = fondUsed - fundVal;
|
||||
const pct = Math.min(
|
||||
100,
|
||||
(fondUsed / (ut.fund || 1)) * 100,
|
||||
);
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 0.5,
|
||||
}}
|
||||
{/* Fond usage */}
|
||||
{ut.fund !== null &&
|
||||
(() => {
|
||||
// Fond "used" = real_worked + vacation +
|
||||
// worked_holiday + free_holiday (everything the user
|
||||
// actually got paid for this month).
|
||||
const fondUsed = getFondUsed(ut);
|
||||
const fundVal = ut.fund ?? 0;
|
||||
const delta = fondUsed - fundVal;
|
||||
const pct = Math.min(
|
||||
100,
|
||||
(fondUsed / (ut.fund || 1)) * 100,
|
||||
);
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 0.5,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
>
|
||||
Fond: {formatHoursDecimal(fondUsed * 60)}h /{" "}
|
||||
{formatHoursDecimal(fundVal * 60)}h
|
||||
</Typography>
|
||||
{delta > 0 && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: "warning.main",
|
||||
}}
|
||||
>
|
||||
Fond: {formatHoursDecimal(fondUsed * 60)}h /{" "}
|
||||
{formatHoursDecimal(fundVal * 60)}h
|
||||
+{formatHoursDecimal(delta * 60)}h
|
||||
</Typography>
|
||||
{delta > 0 && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: "warning.main",
|
||||
}}
|
||||
>
|
||||
+{formatHoursDecimal(delta * 60)}h
|
||||
</Typography>
|
||||
)}
|
||||
{delta < 0 && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: "error.main",
|
||||
}}
|
||||
>
|
||||
-{formatHoursDecimal(Math.abs(delta) * 60)}h
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<ProgressBar
|
||||
value={pct}
|
||||
color={getFundBarColor(ut)}
|
||||
height={4}
|
||||
/>
|
||||
)}
|
||||
{delta < 0 && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: "error.main",
|
||||
}}
|
||||
>
|
||||
-{formatHoursDecimal(Math.abs(delta) * 60)}h
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})()}
|
||||
<ProgressBar
|
||||
value={pct}
|
||||
color={getFundBarColor(ut)}
|
||||
height={4}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Remaining vacation */}
|
||||
<Box sx={{ mt: 1.5 }}>
|
||||
{balance ? (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Zbývá dovolené:{" "}
|
||||
{balance.vacation_remaining.toFixed(1)}h /{" "}
|
||||
{balance.vacation_total}h
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ visibility: "hidden" }}
|
||||
>
|
||||
—
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
{/* Remaining vacation */}
|
||||
<Box sx={{ mt: 1.5 }}>
|
||||
{balance ? (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Zbývá dovolené:{" "}
|
||||
{balance.vacation_remaining.toFixed(1)}h /{" "}
|
||||
{balance.vacation_total}h
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ visibility: "hidden" }}
|
||||
>
|
||||
—
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Records Table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Card>
|
||||
<AttendanceShiftTable
|
||||
records={data.records}
|
||||
onEdit={openEditModal}
|
||||
onDelete={(record) => setDeleteConfirm({ show: true, record })}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card>
|
||||
<AttendanceShiftTable
|
||||
records={data.records}
|
||||
onEdit={openEditModal}
|
||||
onDelete={(record) => setDeleteConfirm({ show: true, record })}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Modals */}
|
||||
<BulkAttendanceModal
|
||||
@@ -481,6 +455,6 @@ export default function AttendanceAdmin() {
|
||||
confirmText="Smazat"
|
||||
confirmVariant="danger"
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
Select,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
ProgressBar,
|
||||
@@ -392,7 +393,7 @@ export default function AttendanceBalances() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Správa bilancí"
|
||||
actions={
|
||||
@@ -815,6 +816,6 @@ export default function AttendanceBalances() {
|
||||
confirmVariant="danger"
|
||||
loading={resetMutation.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useQuery } from "@tanstack/react-query";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Box from "@mui/material/Box";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import { userListOptions } from "../lib/queries/users";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
@@ -17,6 +16,7 @@ import {
|
||||
DateField,
|
||||
Field,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
PageHeader,
|
||||
Select,
|
||||
TextField,
|
||||
@@ -118,230 +118,214 @@ export default function AttendanceCreate() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Přidat záznam docházky"
|
||||
actions={
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Přidat záznam docházky"
|
||||
actions={
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
component={RouterLink}
|
||||
to="/attendance/admin"
|
||||
>
|
||||
← Zpět na správu
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card sx={{ maxWidth: 640 }}>
|
||||
<Box component="form" onSubmit={handleSubmit}>
|
||||
{/* Employee + Shift date */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Zaměstnanec" required>
|
||||
<Select
|
||||
value={form.user_id}
|
||||
onChange={(val) => setForm({ ...form, user_id: val })}
|
||||
options={[
|
||||
{ value: "", label: "Vyberte zaměstnance" },
|
||||
...users.map((u) => ({
|
||||
value: String(u.id),
|
||||
label: u.name,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum směny" required>
|
||||
<DateField
|
||||
value={form.shift_date}
|
||||
onChange={(val) => handleShiftDateChange(val)}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Record type */}
|
||||
<Field label="Typ záznamu" required>
|
||||
<Select
|
||||
value={form.leave_type}
|
||||
onChange={(val) => setForm({ ...form, leave_type: val })}
|
||||
options={[
|
||||
{ value: "work", label: "Práce" },
|
||||
{ value: "vacation", label: "Dovolená" },
|
||||
{ value: "sick", label: "Nemoc" },
|
||||
{ value: "unpaid", label: "Neplacené volno" },
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Leave hours — shown only for non-work types */}
|
||||
{!isWorkType && (
|
||||
<Field label="Počet hodin" hint="Výchozí 8 hodin pro celý den">
|
||||
<TextField
|
||||
type="number"
|
||||
value={form.leave_hours}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
leave_hours: parseFloat(e.target.value),
|
||||
})
|
||||
}
|
||||
slotProps={{ htmlInput: { min: 0.5, max: 24, step: 0.5 } }}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Work-type time fields */}
|
||||
{isWorkType && (
|
||||
<>
|
||||
{/* Arrival */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Příchod - datum">
|
||||
<DateField
|
||||
value={form.arrival_date}
|
||||
onChange={(val) => setForm({ ...form, arrival_date: val })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Příchod - čas">
|
||||
<TimeField
|
||||
value={form.arrival_time}
|
||||
onChange={(val) => setForm({ ...form, arrival_time: val })}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Break start */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Začátek pauzy - datum">
|
||||
<DateField
|
||||
value={form.break_start_date}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_start_date: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Začátek pauzy - čas">
|
||||
<TimeField
|
||||
value={form.break_start_time}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_start_time: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Break end */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Konec pauzy - datum">
|
||||
<DateField
|
||||
value={form.break_end_date}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_end_date: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Konec pauzy - čas">
|
||||
<TimeField
|
||||
value={form.break_end_time}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_end_time: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Departure */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Odchod - datum">
|
||||
<DateField
|
||||
value={form.departure_date}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, departure_date: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Odchod - čas">
|
||||
<TimeField
|
||||
value={form.departure_time}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, departure_time: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
<Field label="Poznámka">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm({ ...form, notes: e.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Actions */}
|
||||
<Box sx={{ display: "flex", gap: 1.5, justifyContent: "flex-end" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
component={RouterLink}
|
||||
to="/attendance/admin"
|
||||
>
|
||||
← Zpět na správu
|
||||
Zrušit
|
||||
</Button>
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting ? "Ukládám..." : "Uložit"}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ maxWidth: 640 }}>
|
||||
<Box component="form" onSubmit={handleSubmit}>
|
||||
{/* Employee + Shift date */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Zaměstnanec" required>
|
||||
<Select
|
||||
value={form.user_id}
|
||||
onChange={(val) => setForm({ ...form, user_id: val })}
|
||||
options={[
|
||||
{ value: "", label: "Vyberte zaměstnance" },
|
||||
...users.map((u) => ({
|
||||
value: String(u.id),
|
||||
label: u.name,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum směny" required>
|
||||
<DateField
|
||||
value={form.shift_date}
|
||||
onChange={(val) => handleShiftDateChange(val)}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Record type */}
|
||||
<Field label="Typ záznamu" required>
|
||||
<Select
|
||||
value={form.leave_type}
|
||||
onChange={(val) => setForm({ ...form, leave_type: val })}
|
||||
options={[
|
||||
{ value: "work", label: "Práce" },
|
||||
{ value: "vacation", label: "Dovolená" },
|
||||
{ value: "sick", label: "Nemoc" },
|
||||
{ value: "unpaid", label: "Neplacené volno" },
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Leave hours — shown only for non-work types */}
|
||||
{!isWorkType && (
|
||||
<Field label="Počet hodin" hint="Výchozí 8 hodin pro celý den">
|
||||
<TextField
|
||||
type="number"
|
||||
value={form.leave_hours}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
leave_hours: parseFloat(e.target.value),
|
||||
})
|
||||
}
|
||||
slotProps={{ htmlInput: { min: 0.5, max: 24, step: 0.5 } }}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Work-type time fields */}
|
||||
{isWorkType && (
|
||||
<>
|
||||
{/* Arrival */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Příchod - datum">
|
||||
<DateField
|
||||
value={form.arrival_date}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, arrival_date: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Příchod - čas">
|
||||
<TimeField
|
||||
value={form.arrival_time}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, arrival_time: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Break start */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Začátek pauzy - datum">
|
||||
<DateField
|
||||
value={form.break_start_date}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_start_date: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Začátek pauzy - čas">
|
||||
<TimeField
|
||||
value={form.break_start_time}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_start_time: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Break end */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Konec pauzy - datum">
|
||||
<DateField
|
||||
value={form.break_end_date}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_end_date: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Konec pauzy - čas">
|
||||
<TimeField
|
||||
value={form.break_end_time}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, break_end_time: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
|
||||
{/* Departure */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Odchod - datum">
|
||||
<DateField
|
||||
value={form.departure_date}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, departure_date: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Odchod - čas">
|
||||
<TimeField
|
||||
value={form.departure_time}
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, departure_time: val })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
<Field label="Poznámka">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm({ ...form, notes: e.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{/* Actions */}
|
||||
<Box sx={{ display: "flex", gap: 1.5, justifyContent: "flex-end" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
component={RouterLink}
|
||||
to="/attendance/admin"
|
||||
>
|
||||
Zrušit
|
||||
</Button>
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting ? "Ukládám..." : "Uložit"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useMemo, useRef } from "react";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
@@ -36,6 +35,7 @@ import {
|
||||
ProgressBar,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
type DataColumn,
|
||||
@@ -494,196 +494,169 @@ export default function AttendanceHistory() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Historie docházky"
|
||||
subtitle={computed.monthName}
|
||||
actions={
|
||||
records.length > 0 ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PrintIcon}
|
||||
onClick={handlePrint}
|
||||
title="Tisk docházky"
|
||||
>
|
||||
Tisk
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Historie docházky"
|
||||
subtitle={computed.monthName}
|
||||
actions={
|
||||
records.length > 0 ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PrintIcon}
|
||||
onClick={handlePrint}
|
||||
title="Tisk docházky"
|
||||
>
|
||||
Tisk
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Filters */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Měsíc">
|
||||
<MonthField value={month} onChange={(val) => setMonth(val)} />
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
</motion.div>
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Měsíc">
|
||||
<MonthField value={month} onChange={(val) => setMonth(val)} />
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
|
||||
{/* Monthly Fund Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 2,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 2,
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "center",
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 2,
|
||||
bgcolor: "info.light",
|
||||
color: "info.main",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, minWidth: "200px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 2,
|
||||
bgcolor: "info.light",
|
||||
color: "info.main",
|
||||
flexShrink: 0,
|
||||
justifyContent: "space-between",
|
||||
alignItems: "baseline",
|
||||
mb: 0.75,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
<Typography sx={{ fontWeight: 600, fontSize: "1rem" }}>
|
||||
Fond: {fund.worked}h / {fund.fund}h
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontSize: "0.8125rem" }}
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
{fund.business_days} prac. dnů
|
||||
{fund.holiday_count > 0 && ` + ${fund.holiday_count} svátky`}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, minWidth: "200px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "baseline",
|
||||
mb: 0.75,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 600, fontSize: "1rem" }}>
|
||||
Fond: {fund.worked}h / {fund.fund}h
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontSize: "0.8125rem" }}
|
||||
>
|
||||
{fund.business_days} prac. dnů
|
||||
{fund.holiday_count > 0 &&
|
||||
` + ${fund.holiday_count} svátky`}
|
||||
</Typography>
|
||||
<ProgressBar value={progressValue} color={progressColor} />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 0.5,
|
||||
mt: 1,
|
||||
minHeight: "1.5rem",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{computed.totalMinutes > 0 && (
|
||||
<StatusChip
|
||||
color="info"
|
||||
label={`Práce: ${formatHoursDecimal(computed.totalMinutes)}h`}
|
||||
title="Odpracováno (reálně)"
|
||||
/>
|
||||
)}
|
||||
{computed.vacationHours > 0 && (
|
||||
<StatusChip
|
||||
color="success"
|
||||
label={`Dov: ${computed.vacationHours}h`}
|
||||
/>
|
||||
)}
|
||||
{computed.sickHours > 0 && (
|
||||
<StatusChip
|
||||
color="error"
|
||||
label={`Nem: ${computed.sickHours}h`}
|
||||
/>
|
||||
)}
|
||||
{computed.freeHolidayHours > 0 && (
|
||||
<StatusChip
|
||||
color="warning"
|
||||
label={`Sv: ${Math.round(computed.freeHolidayHours)}h`}
|
||||
/>
|
||||
)}
|
||||
{computed.unpaidHours > 0 && (
|
||||
<StatusChip
|
||||
color="default"
|
||||
label={`Nep: ${computed.unpaidHours}h`}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<ProgressBar value={progressValue} color={progressColor} />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 0.5,
|
||||
mt: 1,
|
||||
minHeight: "1.5rem",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ fontWeight: 600, color: deltaColor }}
|
||||
>
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{computed.totalMinutes > 0 && (
|
||||
<StatusChip
|
||||
color="info"
|
||||
label={`Práce: ${formatHoursDecimal(computed.totalMinutes)}h`}
|
||||
title="Odpracováno (reálně)"
|
||||
/>
|
||||
)}
|
||||
{computed.vacationHours > 0 && (
|
||||
<StatusChip
|
||||
color="success"
|
||||
label={`Dov: ${computed.vacationHours}h`}
|
||||
/>
|
||||
)}
|
||||
{computed.sickHours > 0 && (
|
||||
<StatusChip
|
||||
color="error"
|
||||
label={`Nem: ${computed.sickHours}h`}
|
||||
/>
|
||||
)}
|
||||
{computed.freeHolidayHours > 0 && (
|
||||
<StatusChip
|
||||
color="warning"
|
||||
label={`Sv: ${Math.round(computed.freeHolidayHours)}h`}
|
||||
/>
|
||||
)}
|
||||
{computed.unpaidHours > 0 && (
|
||||
<StatusChip
|
||||
color="default"
|
||||
label={`Nep: ${computed.unpaidHours}h`}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ fontWeight: 600, color: deltaColor }}
|
||||
>
|
||||
{computed.delta > 0
|
||||
? `Přesčas: +${formatHoursDecimal(computed.delta * 60)}h`
|
||||
: computed.delta < 0
|
||||
? `Zbývá: ${formatHoursDecimal(-computed.delta * 60)}h`
|
||||
: "Fond splněn"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{computed.delta > 0
|
||||
? `Přesčas: +${formatHoursDecimal(computed.delta * 60)}h`
|
||||
: computed.delta < 0
|
||||
? `Zbývá: ${formatHoursDecimal(-computed.delta * 60)}h`
|
||||
: "Fond splněn"}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Records Table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<DataTable<AttendanceRecord>
|
||||
columns={columns}
|
||||
rows={records}
|
||||
rowKey={(record) => record.id}
|
||||
empty={
|
||||
<EmptyState title="Za tento měsíc nejsou žádné záznamy." />
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<DataTable<AttendanceRecord>
|
||||
columns={columns}
|
||||
rows={records}
|
||||
rowKey={(record) => record.id}
|
||||
empty={<EmptyState title="Za tento měsíc nejsou žádné záznamy." />}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Hidden Print Content */}
|
||||
{records.length > 0 && (
|
||||
@@ -888,7 +861,7 @@ export default function AttendanceHistory() {
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@ import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { useNavigate, useParams, Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
@@ -16,7 +15,7 @@ import {
|
||||
attendanceLocationOptions,
|
||||
type LocationRecord,
|
||||
} from "../lib/queries/attendance";
|
||||
import { Button, Card, LoadingState, PageHeader } from "../ui";
|
||||
import { Button, Card, LoadingState, PageEnter, PageHeader } from "../ui";
|
||||
|
||||
const BackIcon = (
|
||||
<svg
|
||||
@@ -187,79 +186,127 @@ export default function AttendanceLocation() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Poloha záznamu"
|
||||
actions={
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to={`/attendance/admin?month=${month}`}
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět na správu
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageHeader
|
||||
title="Poloha záznamu"
|
||||
actions={
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to={`/attendance/admin?month=${month}`}
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět na správu
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Info + map card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
{record.user_name} — {formatDate(record.shift_date)}
|
||||
</Typography>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
{record.user_name} — {formatDate(record.shift_date)}
|
||||
</Typography>
|
||||
|
||||
{/* Leaflet map — kept entirely as-is */}
|
||||
{hasAnyLocation && (
|
||||
<div ref={mapRef} className="attendance-location-map" />
|
||||
)}
|
||||
{/* Leaflet map — kept entirely as-is */}
|
||||
{hasAnyLocation && (
|
||||
<div ref={mapRef} className="attendance-location-map" />
|
||||
)}
|
||||
|
||||
{/* Location detail grid */}
|
||||
{/* Location detail grid */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
mt: hasAnyLocation ? 2 : 0,
|
||||
}}
|
||||
>
|
||||
{/* Arrival */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
mt: hasAnyLocation ? 2 : 0,
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
opacity: hasArrivalLocation ? 1 : 0.6,
|
||||
}}
|
||||
>
|
||||
{/* Arrival */}
|
||||
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
|
||||
Příchod
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace", mb: 1 }}
|
||||
>
|
||||
{record.arrival_time
|
||||
? formatDatetimeLocal(record.arrival_time)
|
||||
: "—"}
|
||||
</Typography>
|
||||
{hasArrivalLocation ? (
|
||||
<>
|
||||
<Typography variant="body2" sx={{ mb: 0.5 }}>
|
||||
{record.arrival_address || <em>Adresa nezjištěna</em>}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontSize: "0.75rem",
|
||||
color: "text.secondary",
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
GPS: {record.arrival_lat}, {record.arrival_lng}
|
||||
{record.arrival_accuracy &&
|
||||
` (přesnost: ${Math.round(Number(record.arrival_accuracy))}m)`}
|
||||
</Typography>
|
||||
<Button
|
||||
component="a"
|
||||
href={`https://www.google.com/maps?q=${record.arrival_lat},${record.arrival_lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
size="small"
|
||||
>
|
||||
Otevřít v Google Maps
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<em>Poloha nebyla zaznamenána</em>
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Departure */}
|
||||
{(hasDepartureLocation || record.departure_time) && (
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
opacity: hasArrivalLocation ? 1 : 0.6,
|
||||
opacity: hasDepartureLocation ? 1 : 0.6,
|
||||
}}
|
||||
>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
|
||||
Příchod
|
||||
Odchod
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace", mb: 1 }}
|
||||
>
|
||||
{record.arrival_time
|
||||
? formatDatetimeLocal(record.arrival_time)
|
||||
{record.departure_time
|
||||
? formatDatetimeLocal(record.departure_time)
|
||||
: "—"}
|
||||
</Typography>
|
||||
{hasArrivalLocation ? (
|
||||
{hasDepartureLocation ? (
|
||||
<>
|
||||
<Typography variant="body2" sx={{ mb: 0.5 }}>
|
||||
{record.arrival_address || <em>Adresa nezjištěna</em>}
|
||||
{record.departure_address || <em>Adresa nezjištěna</em>}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
@@ -270,13 +317,13 @@ export default function AttendanceLocation() {
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
GPS: {record.arrival_lat}, {record.arrival_lng}
|
||||
{record.arrival_accuracy &&
|
||||
` (přesnost: ${Math.round(Number(record.arrival_accuracy))}m)`}
|
||||
GPS: {record.departure_lat}, {record.departure_lng}
|
||||
{record.departure_accuracy &&
|
||||
` (přesnost: ${Math.round(Number(record.departure_accuracy))}m)`}
|
||||
</Typography>
|
||||
<Button
|
||||
component="a"
|
||||
href={`https://www.google.com/maps?q=${record.arrival_lat},${record.arrival_lng}`}
|
||||
href={`https://www.google.com/maps?q=${record.departure_lat},${record.departure_lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="outlined"
|
||||
@@ -292,69 +339,9 @@ export default function AttendanceLocation() {
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Departure */}
|
||||
{(hasDepartureLocation || record.departure_time) && (
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
opacity: hasDepartureLocation ? 1 : 0.6,
|
||||
}}
|
||||
>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
|
||||
Odchod
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace", mb: 1 }}
|
||||
>
|
||||
{record.departure_time
|
||||
? formatDatetimeLocal(record.departure_time)
|
||||
: "—"}
|
||||
</Typography>
|
||||
{hasDepartureLocation ? (
|
||||
<>
|
||||
<Typography variant="body2" sx={{ mb: 0.5 }}>
|
||||
{record.departure_address || <em>Adresa nezjištěna</em>}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontSize: "0.75rem",
|
||||
color: "text.secondary",
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
GPS: {record.departure_lat}, {record.departure_lng}
|
||||
{record.departure_accuracy &&
|
||||
` (přesnost: ${Math.round(Number(record.departure_accuracy))}m)`}
|
||||
</Typography>
|
||||
<Button
|
||||
component="a"
|
||||
href={`https://www.google.com/maps?q=${record.departure_lat},${record.departure_lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
size="small"
|
||||
>
|
||||
Otevřít v Google Maps
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<em>Poloha nebyla zaznamenána</em>
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
@@ -21,6 +20,7 @@ import {
|
||||
TextField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -267,30 +267,24 @@ export default function AuditLog() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Audit log"
|
||||
subtitle={
|
||||
pagination
|
||||
? `${pagination.total} ${czechPlural(pagination.total, "záznam", "záznamy", "záznamů")}`
|
||||
: undefined
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={TrashIcon}
|
||||
onClick={() => setShowCleanup(true)}
|
||||
>
|
||||
Vyčistit
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Audit log"
|
||||
subtitle={
|
||||
pagination
|
||||
? `${pagination.total} ${czechPlural(pagination.total, "záznam", "záznamy", "záznamů")}`
|
||||
: undefined
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={TrashIcon}
|
||||
onClick={() => setShowCleanup(true)}
|
||||
>
|
||||
Vyčistit
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Cleanup Modal */}
|
||||
<Modal
|
||||
@@ -371,6 +365,6 @@ export default function AuditLog() {
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
@@ -12,7 +11,7 @@ import { dashboardOptions } from "../lib/queries/dashboard";
|
||||
import { require2FAOptions } from "../lib/queries/settings";
|
||||
import { getCzechDate } from "../utils/dashboardHelpers";
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { Card, Button, StatusChip } from "../ui";
|
||||
import { Card, Button, StatusChip, PageEnter } from "../ui";
|
||||
import DashKpiCards from "../components/dashboard/DashKpiCards";
|
||||
import DashQuickActions from "../components/dashboard/DashQuickActions";
|
||||
import DashActivityFeed from "../components/dashboard/DashActivityFeed";
|
||||
@@ -221,15 +220,9 @@ export default function Dashboard() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<Box
|
||||
component={motion.div}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
sx={{ mb: 3 }}
|
||||
>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h4">
|
||||
Vítejte zpět, {user?.fullName || user?.username}
|
||||
</Typography>
|
||||
@@ -240,75 +233,69 @@ export default function Dashboard() {
|
||||
|
||||
{/* 2FA Required Banner */}
|
||||
{user?.require2FA && !user?.totpEnabled && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
<Card
|
||||
sx={{
|
||||
mb: 3,
|
||||
border: 2,
|
||||
borderColor: "error.main",
|
||||
bgcolor: "error.light",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
<Box
|
||||
sx={{
|
||||
mb: 3,
|
||||
border: 2,
|
||||
borderColor: "error.main",
|
||||
bgcolor: "error.light",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: 2,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: 2,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<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.light",
|
||||
color: "error.main",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||||
<line x1="12" y1="9" x2="12" y2="13" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ fontWeight: 600 }}>
|
||||
Dvoufaktorové ověření je povinné
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Administrátor vyžaduje aktivaci 2FA. Dokud ji neaktivujete,
|
||||
nemáte přístup k ostatním sekcím systému.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
onClick={handleStart2FASetup}
|
||||
disabled={totpSubmitting}
|
||||
sx={{ flexShrink: 0 }}
|
||||
<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.light",
|
||||
color: "error.main",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{totpSubmitting ? "Generuji..." : "Aktivovat 2FA nyní"}
|
||||
</Button>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||||
<line x1="12" y1="9" x2="12" y2="13" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ fontWeight: 600 }}>
|
||||
Dvoufaktorové ověření je povinné
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Administrátor vyžaduje aktivaci 2FA. Dokud ji neaktivujete,
|
||||
nemáte přístup k ostatním sekcím systému.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Button
|
||||
onClick={handleStart2FASetup}
|
||||
disabled={totpSubmitting}
|
||||
sx={{ flexShrink: 0 }}
|
||||
>
|
||||
{totpSubmitting ? "Generuji..." : "Aktivovat 2FA nyní"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Loading spinner */}
|
||||
@@ -339,10 +326,6 @@ export default function Dashboard() {
|
||||
{/* Main content grid */}
|
||||
{!dashLoading && (
|
||||
<Box
|
||||
component={motion.div}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr 1fr" },
|
||||
@@ -523,6 +506,6 @@ export default function Dashboard() {
|
||||
<DashSessions />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -3,7 +3,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { Link as RouterLink, useSearchParams } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -35,6 +34,7 @@ import {
|
||||
FilterBar,
|
||||
Tabs,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
type TabDef,
|
||||
type StatCardColor,
|
||||
@@ -644,43 +644,33 @@ export default function Invoices() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Faktury"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
hasPermission("invoices.create") ? (
|
||||
activeTab === "received" ? (
|
||||
<Button
|
||||
startIcon={UploadIcon}
|
||||
onClick={() => setReceivedUploadOpen(true)}
|
||||
>
|
||||
Nahrát faktury
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/invoices/new"
|
||||
startIcon={PlusIcon}
|
||||
>
|
||||
Nová faktura
|
||||
</Button>
|
||||
)
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Faktury"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
hasPermission("invoices.create") ? (
|
||||
activeTab === "received" ? (
|
||||
<Button
|
||||
startIcon={UploadIcon}
|
||||
onClick={() => setReceivedUploadOpen(true)}
|
||||
>
|
||||
Nahrát faktury
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/invoices/new"
|
||||
startIcon={PlusIcon}
|
||||
>
|
||||
Nová faktura
|
||||
</Button>
|
||||
)
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@@ -722,49 +712,31 @@ export default function Invoices() {
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{activeTab === "received" ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.1 }}
|
||||
>
|
||||
<Suspense fallback={<LoadingState />}>
|
||||
<ReceivedInvoices
|
||||
statsMonth={statsMonth}
|
||||
statsYear={statsYear}
|
||||
uploadOpen={receivedUploadOpen}
|
||||
setUploadOpen={setReceivedUploadOpen}
|
||||
/>
|
||||
</Suspense>
|
||||
</motion.div>
|
||||
<Suspense fallback={<LoadingState />}>
|
||||
<ReceivedInvoices
|
||||
statsMonth={statsMonth}
|
||||
statsYear={statsYear}
|
||||
uploadOpen={receivedUploadOpen}
|
||||
setUploadOpen={setReceivedUploadOpen}
|
||||
/>
|
||||
</Suspense>
|
||||
) : (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.1 }}
|
||||
>
|
||||
{renderKpi()}
|
||||
</motion.div>
|
||||
{renderKpi()}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Box sx={{ mb: 2.5 }}>
|
||||
<Tabs
|
||||
value={statusFilter}
|
||||
onChange={(v) => {
|
||||
setStatusFilter(v);
|
||||
setPage(1);
|
||||
}}
|
||||
tabs={statusTabs}
|
||||
/>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Box sx={{ mb: 2.5 }}>
|
||||
<Tabs
|
||||
value={statusFilter}
|
||||
onChange={(v) => {
|
||||
setStatusFilter(v);
|
||||
setPage(1);
|
||||
}}
|
||||
tabs={statusTabs}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 320px" }}>
|
||||
@@ -845,40 +817,32 @@ export default function Invoices() {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.15 }}
|
||||
>
|
||||
<Card
|
||||
sx={{ opacity: loading ? 0.6 : 1, transition: "opacity .2s" }}
|
||||
>
|
||||
<DataTable<Invoice>
|
||||
columns={columns}
|
||||
rows={invoices}
|
||||
rowKey={(inv) => inv.id}
|
||||
rowSx={rowSx}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
<EmptyState
|
||||
title="Zatím nejsou žádné faktury."
|
||||
description={
|
||||
hasPermission("invoices.create")
|
||||
? "Vytvořte první fakturu tlačítkem výše."
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ opacity: loading ? 0.6 : 1, transition: "opacity .2s" }}>
|
||||
<DataTable<Invoice>
|
||||
columns={columns}
|
||||
rows={invoices}
|
||||
rowKey={(inv) => inv.id}
|
||||
rowSx={rowSx}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
<EmptyState
|
||||
title="Zatím nejsou žádné faktury."
|
||||
description={
|
||||
hasPermission("invoices.create")
|
||||
? "Vytvořte první fakturu tlačítkem výše."
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={deleteConfirm.show}
|
||||
@@ -893,6 +857,6 @@ export default function Invoices() {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { formatDate, formatDatetime } from "../utils/attendanceHelpers";
|
||||
@@ -23,6 +22,7 @@ import {
|
||||
Field,
|
||||
TextField,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
Tabs,
|
||||
@@ -304,33 +304,21 @@ export default function LeaveApproval() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Schvalování nepřítomnosti"
|
||||
subtitle={
|
||||
pendingCount > 0
|
||||
? `${pendingCount} ${czechPlural(pendingCount, "žádost čeká", "žádosti čekají", "žádostí čeká")} na schválení`
|
||||
: "Žádné čekající žádosti"
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Schvalování nepřítomnosti"
|
||||
subtitle={
|
||||
pendingCount > 0
|
||||
? `${pendingCount} ${czechPlural(pendingCount, "žádost čeká", "žádosti čekají", "žádostí čeká")} na schválení`
|
||||
: "Žádné čekající žádosti"
|
||||
}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(v) => setActiveTab(v as "pending" | "processed")}
|
||||
tabs={tabs}
|
||||
/>
|
||||
</motion.div>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(v) => setActiveTab(v as "pending" | "processed")}
|
||||
tabs={tabs}
|
||||
/>
|
||||
|
||||
{/* Pending Tab */}
|
||||
<TabPanel value="pending" current={activeTab}>
|
||||
@@ -498,6 +486,6 @@ export default function LeaveApproval() {
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { formatDate, formatDatetime } from "../utils/attendanceHelpers";
|
||||
@@ -15,6 +14,7 @@ import {
|
||||
ConfirmDialog,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
type DataColumn,
|
||||
@@ -237,37 +237,25 @@ export default function LeaveRequests() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Moje žádosti"
|
||||
subtitle="Přehled žádostí o nepřítomnost"
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Moje žádosti"
|
||||
subtitle="Přehled žádostí o nepřítomnost"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card>
|
||||
<DataTable<LeaveRequest>
|
||||
columns={columns}
|
||||
rows={requests}
|
||||
rowKey={(req) => req.id}
|
||||
empty={
|
||||
<EmptyState
|
||||
title="Zatím nemáte žádné žádosti"
|
||||
description="Novou žádost můžete podat na stránce Docházka"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card>
|
||||
<DataTable<LeaveRequest>
|
||||
columns={columns}
|
||||
rows={requests}
|
||||
rowKey={(req) => req.id}
|
||||
empty={
|
||||
<EmptyState
|
||||
title="Zatím nemáte žádné žádosti"
|
||||
description="Novou žádost můžete podat na stránce Docházka"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={cancelModal.open}
|
||||
@@ -278,6 +266,6 @@ export default function LeaveRequests() {
|
||||
confirmText="Zrušit žádost"
|
||||
loading={cancelMutation.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,5 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Link as RouterLink, useNavigate } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -34,6 +33,7 @@ import {
|
||||
FilterBar,
|
||||
Tabs,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
LoadingState,
|
||||
type DataColumn,
|
||||
type TabDef,
|
||||
@@ -686,58 +686,46 @@ export default function Offers() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Nabídky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<>
|
||||
{hasPermission("settings.templates") && (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/offers/templates"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={TemplatesIcon}
|
||||
>
|
||||
Šablony
|
||||
</Button>
|
||||
)}
|
||||
{hasPermission("offers.create") && (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/offers/new"
|
||||
startIcon={PlusIcon}
|
||||
>
|
||||
Nová nabídka
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Nabídky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<>
|
||||
{hasPermission("settings.templates") && (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/offers/templates"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={TemplatesIcon}
|
||||
>
|
||||
Šablony
|
||||
</Button>
|
||||
)}
|
||||
{hasPermission("offers.create") && (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/offers/new"
|
||||
startIcon={PlusIcon}
|
||||
>
|
||||
Nová nabídka
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.1 }}
|
||||
>
|
||||
<Box sx={{ mb: 2.5 }}>
|
||||
<Tabs
|
||||
value={statusFilter}
|
||||
onChange={(v) => {
|
||||
setStatusFilter(v);
|
||||
setPage(1);
|
||||
}}
|
||||
tabs={tabs}
|
||||
/>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Box sx={{ mb: 2.5 }}>
|
||||
<Tabs
|
||||
value={statusFilter}
|
||||
onChange={(v) => {
|
||||
setStatusFilter(v);
|
||||
setPage(1);
|
||||
}}
|
||||
tabs={tabs}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 320px" }}>
|
||||
@@ -838,44 +826,38 @@ export default function Offers() {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.15 }}
|
||||
>
|
||||
<Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
|
||||
<DataTable<Quotation>
|
||||
columns={columns}
|
||||
rows={quotations}
|
||||
rowKey={(q) => q.id}
|
||||
rowSx={rowSx}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
debouncedSearch ? (
|
||||
<EmptyState title="Žádné nabídky odpovídající hledání." />
|
||||
) : (
|
||||
<EmptyState
|
||||
title="Zatím nejsou žádné nabídky."
|
||||
action={
|
||||
hasPermission("offers.create") ? (
|
||||
<Button component={RouterLink} to="/offers/new">
|
||||
Vytvořit první nabídku
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
|
||||
<DataTable<Quotation>
|
||||
columns={columns}
|
||||
rows={quotations}
|
||||
rowKey={(q) => q.id}
|
||||
rowSx={rowSx}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
debouncedSearch ? (
|
||||
<EmptyState title="Žádné nabídky odpovídající hledání." />
|
||||
) : (
|
||||
<EmptyState
|
||||
title="Zatím nejsou žádné nabídky."
|
||||
action={
|
||||
hasPermission("offers.create") ? (
|
||||
<Button component={RouterLink} to="/offers/new">
|
||||
Vytvořit první nabídku
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={deleteConfirm.show}
|
||||
@@ -935,6 +917,6 @@ export default function Offers() {
|
||||
</Typography>
|
||||
</Field>
|
||||
</Modal>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useCallback, useRef } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -24,6 +23,7 @@ import {
|
||||
CheckboxField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -468,24 +468,18 @@ export default function OffersCustomers() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Zákazníci"
|
||||
subtitle="Správa zákazníků pro nabídky"
|
||||
actions={
|
||||
hasPermission("customers.create") ? (
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat zákazníka
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Zákazníci"
|
||||
subtitle="Správa zákazníků pro nabídky"
|
||||
actions={
|
||||
hasPermission("customers.create") ? (
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat zákazníka
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 320px" }}>
|
||||
@@ -816,6 +810,6 @@ export default function OffersCustomers() {
|
||||
confirmVariant="danger"
|
||||
loading={deleting}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -27,6 +26,7 @@ import {
|
||||
TextField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
Tabs,
|
||||
@@ -142,29 +142,17 @@ export default function OffersTemplates() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Šablony"
|
||||
subtitle="Šablony položek a rozsahu projektu"
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Šablony"
|
||||
subtitle="Šablony položek a rozsahu projektu"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(v) => setActiveTab(v as "items" | "scopes")}
|
||||
tabs={tabs}
|
||||
/>
|
||||
</motion.div>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(v) => setActiveTab(v as "items" | "scopes")}
|
||||
tabs={tabs}
|
||||
/>
|
||||
|
||||
<TabPanel value="items" current={activeTab}>
|
||||
<ItemTemplatesTab />
|
||||
@@ -172,7 +160,7 @@ export default function OffersTemplates() {
|
||||
<TabPanel value="scopes" current={activeTab}>
|
||||
<ScopeTemplatesTab />
|
||||
</TabPanel>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,6 @@ import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import OrderConfirmationModal from "../components/OrderConfirmationModal";
|
||||
@@ -31,6 +30,7 @@ import {
|
||||
ConfirmDialog,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -390,13 +390,9 @@ export default function OrderDetail() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@@ -498,339 +494,315 @@ export default function OrderDetail() {
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Info card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Informace
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Nabídka
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Informace
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Nabídka
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component={RouterLink}
|
||||
to={`/offers/${order.quotation_id}`}
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
}}
|
||||
>
|
||||
{order.quotation_number}
|
||||
</Box>
|
||||
{order.project_code && (
|
||||
<Box component="span" sx={{ color: "text.secondary", ml: 1 }}>
|
||||
({order.project_code})
|
||||
</Box>
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Projekt
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{order.project ? (
|
||||
<Box
|
||||
component={RouterLink}
|
||||
to={`/offers/${order.quotation_id}`}
|
||||
to={`/projects/${order.project.id}`}
|
||||
sx={{
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
}}
|
||||
>
|
||||
{order.quotation_number}
|
||||
{order.project.project_number} — {order.project.name}
|
||||
</Box>
|
||||
{order.project_code && (
|
||||
<Box component="span" sx={{ color: "text.secondary", ml: 1 }}>
|
||||
({order.project_code})
|
||||
</Box>
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Projekt
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{order.project ? (
|
||||
<Box
|
||||
component={RouterLink}
|
||||
to={`/projects/${order.project.id}`}
|
||||
sx={{
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
}}
|
||||
>
|
||||
{order.project.project_number} — {order.project.name}
|
||||
</Box>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Zákazník
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{order.customer_name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo obj. zákazníka
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{order.customer_order_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Měna
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{order.currency}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Datum vytvoření
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(order.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Příloha
|
||||
</Typography>
|
||||
<Box sx={{ mt: 0.5 }}>
|
||||
{order.attachment_name ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={FileIcon}
|
||||
onClick={handleViewAttachment}
|
||||
disabled={attachmentLoading}
|
||||
>
|
||||
{order.attachment_name}
|
||||
</Button>
|
||||
) : (
|
||||
<Typography variant="body2">—</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Items (read-only) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<ItemRow>
|
||||
columns={itemColumns}
|
||||
rows={itemRows}
|
||||
rowKey={(item) => item.id ?? item._index}
|
||||
empty={<EmptyState title="Žádné položky." />}
|
||||
/>
|
||||
|
||||
{/* Totals */}
|
||||
<Box
|
||||
sx={{
|
||||
mt: 2,
|
||||
ml: "auto",
|
||||
maxWidth: 360,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 0.5,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Mezisoučet:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatCurrency(totals.subtotal, order.currency)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{Number(order.apply_vat) > 0 && (
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
DPH ({order.vat_rate}%):
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatCurrency(totals.vatAmount, order.currency)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Zákazník
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
pt: 0.5,
|
||||
mt: 0.5,
|
||||
borderTop: 1,
|
||||
borderColor: "divider",
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||||
Celkem k úhradě:
|
||||
{order.customer_name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo obj. zákazníka
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{order.customer_order_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Měna
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{order.currency}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Datum vytvoření
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(order.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Příloha
|
||||
</Typography>
|
||||
<Box sx={{ mt: 0.5 }}>
|
||||
{order.attachment_name ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={FileIcon}
|
||||
onClick={handleViewAttachment}
|
||||
disabled={attachmentLoading}
|
||||
>
|
||||
{order.attachment_name}
|
||||
</Button>
|
||||
) : (
|
||||
<Typography variant="body2">—</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Items (read-only) */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<ItemRow>
|
||||
columns={itemColumns}
|
||||
rows={itemRows}
|
||||
rowKey={(item) => item.id ?? item._index}
|
||||
empty={<EmptyState title="Žádné položky." />}
|
||||
/>
|
||||
|
||||
{/* Totals */}
|
||||
<Box
|
||||
sx={{
|
||||
mt: 2,
|
||||
ml: "auto",
|
||||
maxWidth: 360,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 0.5,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Mezisoučet:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatCurrency(totals.subtotal, order.currency)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{Number(order.apply_vat) > 0 && (
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
DPH ({order.vat_rate}%):
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatCurrency(totals.total, order.currency)}
|
||||
{formatCurrency(totals.vatAmount, order.currency)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
pt: 0.5,
|
||||
mt: 0.5,
|
||||
borderTop: 1,
|
||||
borderColor: "divider",
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||||
Celkem k úhradě:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{formatCurrency(totals.total, order.currency)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Sections (read-only) */}
|
||||
{order.sections?.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.15 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Rozsah projektu
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Rozsah projektu
|
||||
</Typography>
|
||||
{order.scope_title && (
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, mb: 1 }}>
|
||||
{order.scope_title}
|
||||
</Typography>
|
||||
{order.scope_title && (
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, mb: 1 }}>
|
||||
{order.scope_title}
|
||||
</Typography>
|
||||
)}
|
||||
{order.scope_description && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{order.scope_description}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{order.sections.map((section, index) => (
|
||||
)}
|
||||
{order.scope_description && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{order.scope_description}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{order.sections.map((section, index) => (
|
||||
<Box
|
||||
key={section.id || index}
|
||||
sx={{
|
||||
border: 1,
|
||||
borderColor: "divider",
|
||||
borderRadius: 2,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
key={section.id || index}
|
||||
sx={{
|
||||
border: 1,
|
||||
borderColor: "divider",
|
||||
borderRadius: 2,
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
px: 2,
|
||||
py: 1,
|
||||
bgcolor: "action.hover",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
px: 2,
|
||||
py: 1,
|
||||
bgcolor: "action.hover",
|
||||
}}
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontWeight: 600 }}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontWeight: 600 }}
|
||||
>
|
||||
{index + 1}.
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{(order.language === "CZ"
|
||||
? section.title_cz || section.title
|
||||
: section.title || section.title_cz) ||
|
||||
`Sekce ${index + 1}`}
|
||||
</Typography>
|
||||
</Box>
|
||||
{section.content && (
|
||||
<Box
|
||||
className="admin-rich-text-view"
|
||||
sx={{ p: 2 }}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(section.content),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{index + 1}.
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{(order.language === "CZ"
|
||||
? section.title_cz || section.title
|
||||
: section.title || section.title_cz) ||
|
||||
`Sekce ${index + 1}`}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
{section.content && (
|
||||
<Box
|
||||
className="admin-rich-text-view"
|
||||
sx={{ p: 2 }}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(section.content),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Notes (editable) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
multiline
|
||||
minRows={4}
|
||||
placeholder="Interní poznámky k objednávce..."
|
||||
fullWidth
|
||||
disabled={!hasPermission("orders.edit")}
|
||||
/>
|
||||
</Field>
|
||||
{hasPermission("orders.edit") && (
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={handleSaveNotes}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "Ukládání..." : "Uložit poznámky"}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
multiline
|
||||
minRows={4}
|
||||
placeholder="Interní poznámky k objednávce..."
|
||||
fullWidth
|
||||
disabled={!hasPermission("orders.edit")}
|
||||
/>
|
||||
</Field>
|
||||
{hasPermission("orders.edit") && (
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={handleSaveNotes}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "Ukládání..." : "Uložit poznámky"}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Status change confirmation */}
|
||||
<ConfirmDialog
|
||||
@@ -887,6 +859,6 @@ export default function OrderDetail() {
|
||||
applyVat={!!order.apply_vat}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Link as RouterLink, useNavigate } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
@@ -32,6 +31,7 @@ import {
|
||||
CheckboxField,
|
||||
FileUpload,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -463,24 +463,18 @@ export default function Orders() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Objednávky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
hasPermission("orders.create") ? (
|
||||
<Button startIcon={PlusIcon} onClick={openCreate}>
|
||||
Vytvořit objednávku
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Objednávky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
hasPermission("orders.create") ? (
|
||||
<Button startIcon={PlusIcon} onClick={openCreate}>
|
||||
Vytvořit objednávku
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 320px" }}>
|
||||
@@ -496,33 +490,27 @@ export default function Orders() {
|
||||
</Box>
|
||||
</FilterBar>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
|
||||
<DataTable<Order>
|
||||
columns={columns}
|
||||
rows={orders}
|
||||
rowKey={(o) => o.id}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
<EmptyState
|
||||
title="Zatím nejsou žádné objednávky."
|
||||
description="Objednávky se vytvářejí z nabídek."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
|
||||
<DataTable<Order>
|
||||
columns={columns}
|
||||
rows={orders}
|
||||
rowKey={(o) => o.id}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
<EmptyState
|
||||
title="Zatím nejsou žádné objednávky."
|
||||
description="Objednávky se vytvářejí z nabídek."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={deleteConfirm.show}
|
||||
@@ -711,6 +699,6 @@ export default function Orders() {
|
||||
onChange={(v) => setCreateForm({ ...createForm, create_project: v })}
|
||||
/>
|
||||
</Modal>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ import PlanGrid from "../components/PlanGrid";
|
||||
import PlanCellModal from "../components/PlanCellModal";
|
||||
import PlanCategoriesModal from "../components/PlanCategoriesModal";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { Button, Alert, LoadingState } from "../ui";
|
||||
import { Button, Alert, LoadingState, PageEnter } from "../ui";
|
||||
import { projectListOptions, type Project } from "../lib/queries/projects";
|
||||
import { planCategoriesOptions, type PlanCategory } from "../lib/queries/plan";
|
||||
// plan.css is imported once globally in AdminApp.tsx — no per-page re-import.
|
||||
@@ -545,130 +545,107 @@ export default function PlanWork() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box className="plan-work-page">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
Plán prací
|
||||
</Typography>
|
||||
</motion.div>
|
||||
<PageEnter sx={{ position: "relative" }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 2 }}>
|
||||
Plán prací
|
||||
</Typography>
|
||||
|
||||
{!canEdit && (
|
||||
<motion.div
|
||||
role="status"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Alert severity="info">
|
||||
<strong>Režim náhledu</strong> — můžete pouze prohlížet plán.
|
||||
Úpravy jsou dostupné oprávněným uživatelům.
|
||||
</Alert>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Box role="status" sx={{ mb: 2 }}>
|
||||
<Alert severity="info">
|
||||
<strong>Režim náhledu</strong> — můžete pouze prohlížet plán. Úpravy
|
||||
jsou dostupné oprávněným uživatelům.
|
||||
</Alert>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
gap: 1.5,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{/* Nav buttons grouped so they stay on one row when the toolbar
|
||||
wraps on mobile. */}
|
||||
<Box sx={{ display: "inline-flex", gap: 1 }}>
|
||||
<Button variant="outlined" color="inherit" onClick={goToToday}>
|
||||
Dnes
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={goPrev}
|
||||
aria-label="Předchozí"
|
||||
>
|
||||
←
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={goNext}
|
||||
aria-label="Další"
|
||||
>
|
||||
→
|
||||
</Button>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 220,
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
gap: 1.5,
|
||||
mb: 2,
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{/* Nav buttons grouped so they stay on one row when the toolbar
|
||||
wraps on mobile. */}
|
||||
<Box sx={{ display: "inline-flex", gap: 1 }}>
|
||||
<Button variant="outlined" color="inherit" onClick={goToToday}>
|
||||
Dnes
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={goPrev}
|
||||
aria-label="Předchozí"
|
||||
<AnimatePresence mode="popLayout" initial={false}>
|
||||
<motion.div
|
||||
key={`${isoDate(range.from)}-${view}`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
←
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={goNext}
|
||||
aria-label="Další"
|
||||
>
|
||||
→
|
||||
</Button>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 220,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<AnimatePresence mode="popLayout" initial={false}>
|
||||
<motion.div
|
||||
key={`${isoDate(range.from)}-${view}`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontWeight: 600, whiteSpace: "nowrap" }}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontWeight: 600, whiteSpace: "nowrap" }}
|
||||
>
|
||||
{formatRangeLabel(
|
||||
isoDate(range.from),
|
||||
isoDate(range.to),
|
||||
view,
|
||||
)}
|
||||
</Typography>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</Box>
|
||||
<Box
|
||||
role="group"
|
||||
aria-label="Měřítko zobrazení"
|
||||
sx={{ display: "inline-flex", gap: 1 }}
|
||||
>
|
||||
<Button
|
||||
variant={view === "week" ? "contained" : "outlined"}
|
||||
color={view === "week" ? "primary" : "inherit"}
|
||||
onClick={() => setViewWithAnim("week")}
|
||||
>
|
||||
Týden
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === "month" ? "contained" : "outlined"}
|
||||
color={view === "month" ? "primary" : "inherit"}
|
||||
onClick={() => setViewWithAnim("month")}
|
||||
>
|
||||
Měsíc
|
||||
</Button>
|
||||
</Box>
|
||||
{canEdit && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => setCatModalOpen(true)}
|
||||
>
|
||||
Správa kategorií
|
||||
</Button>
|
||||
)}
|
||||
{formatRangeLabel(isoDate(range.from), isoDate(range.to), view)}
|
||||
</Typography>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Box
|
||||
role="group"
|
||||
aria-label="Měřítko zobrazení"
|
||||
sx={{ display: "inline-flex", gap: 1 }}
|
||||
>
|
||||
<Button
|
||||
variant={view === "week" ? "contained" : "outlined"}
|
||||
color={view === "week" ? "primary" : "inherit"}
|
||||
onClick={() => setViewWithAnim("week")}
|
||||
>
|
||||
Týden
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === "month" ? "contained" : "outlined"}
|
||||
color={view === "month" ? "primary" : "inherit"}
|
||||
onClick={() => setViewWithAnim("month")}
|
||||
>
|
||||
Měsíc
|
||||
</Button>
|
||||
</Box>
|
||||
{canEdit && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => setCatModalOpen(true)}
|
||||
>
|
||||
Správa kategorií
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{gridLoading && <LoadingState />}
|
||||
|
||||
@@ -689,20 +666,14 @@ export default function PlanWork() {
|
||||
patch the cache in place and pulse a single cell via pulseKey.
|
||||
*/}
|
||||
{grid ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, ease: "easeOut", delay: 0.18 }}
|
||||
>
|
||||
<PlanGrid
|
||||
data={grid}
|
||||
projects={projects}
|
||||
categories={categories}
|
||||
canEdit={canEdit}
|
||||
pulseKey={lastMutated}
|
||||
onCellClick={openCell}
|
||||
/>
|
||||
</motion.div>
|
||||
<PlanGrid
|
||||
data={grid}
|
||||
projects={projects}
|
||||
categories={categories}
|
||||
canEdit={canEdit}
|
||||
pulseKey={lastMutated}
|
||||
onCellClick={openCell}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<PlanCellModal
|
||||
@@ -726,6 +697,6 @@ export default function PlanWork() {
|
||||
onClose={() => setCatModalOpen(false)}
|
||||
categories={categories}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -29,6 +28,7 @@ import {
|
||||
CheckboxField,
|
||||
ConfirmDialog,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
} from "../ui";
|
||||
|
||||
const API_BASE = "/api/admin";
|
||||
@@ -286,13 +286,9 @@ export default function ProjectDetail() {
|
||||
const canEdit = hasPermission("projects.edit");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@@ -347,324 +343,301 @@ export default function ProjectDetail() {
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Basic info form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Číslo projektu">
|
||||
<TextField value={project.project_number} fullWidth disabled />
|
||||
</Field>
|
||||
<Field label="Název">
|
||||
<TextField
|
||||
value={form.name}
|
||||
onChange={(e) => updateForm("name", e.target.value)}
|
||||
placeholder="Název projektu"
|
||||
fullWidth
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Zákazník">
|
||||
<TextField
|
||||
value={project.customer_name || "—"}
|
||||
fullWidth
|
||||
disabled
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Zodpovědná osoba">
|
||||
<Select
|
||||
value={form.responsible_user_id}
|
||||
onChange={(v) => updateForm("responsible_user_id", v)}
|
||||
disabled={!canEdit}
|
||||
>
|
||||
<MenuItem value="">— Nevybráno —</MenuItem>
|
||||
{users.map((u) => (
|
||||
<MenuItem key={u.id} value={String(u.id)}>
|
||||
{u.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Stav">
|
||||
<Select
|
||||
value={form.status}
|
||||
onChange={(v) => updateForm("status", v)}
|
||||
disabled={!canEdit}
|
||||
>
|
||||
<MenuItem value="aktivni">Aktivní</MenuItem>
|
||||
<MenuItem value="dokonceny">Dokončený</MenuItem>
|
||||
<MenuItem value="zruseny">Zrušený</MenuItem>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field label="Datum zahájení">
|
||||
<DateField
|
||||
value={form.start_date}
|
||||
onChange={(val) => updateForm("start_date", val)}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum ukončení">
|
||||
<DateField
|
||||
value={form.end_date}
|
||||
onChange={(val) => updateForm("end_date", val)}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Číslo projektu">
|
||||
<TextField value={project.project_number} fullWidth disabled />
|
||||
</Field>
|
||||
<Field label="Název">
|
||||
<TextField
|
||||
value={form.name}
|
||||
onChange={(e) => updateForm("name", e.target.value)}
|
||||
placeholder="Název projektu"
|
||||
fullWidth
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Zákazník">
|
||||
<TextField
|
||||
value={project.customer_name || "—"}
|
||||
fullWidth
|
||||
disabled
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Zodpovědná osoba">
|
||||
<Select
|
||||
value={form.responsible_user_id}
|
||||
onChange={(v) => updateForm("responsible_user_id", v)}
|
||||
disabled={!canEdit}
|
||||
>
|
||||
<MenuItem value="">— Nevybráno —</MenuItem>
|
||||
{users.map((u) => (
|
||||
<MenuItem key={u.id} value={String(u.id)}>
|
||||
{u.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Stav">
|
||||
<Select
|
||||
value={form.status}
|
||||
onChange={(v) => updateForm("status", v)}
|
||||
disabled={!canEdit}
|
||||
>
|
||||
<MenuItem value="aktivni">Aktivní</MenuItem>
|
||||
<MenuItem value="dokonceny">Dokončený</MenuItem>
|
||||
<MenuItem value="zruseny">Zrušený</MenuItem>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field label="Datum zahájení">
|
||||
<DateField
|
||||
value={form.start_date}
|
||||
onChange={(val) => updateForm("start_date", val)}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum ukončení">
|
||||
<DateField
|
||||
value={form.end_date}
|
||||
onChange={(val) => updateForm("end_date", val)}
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Notes */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Poznámky
|
||||
</Typography>
|
||||
|
||||
{/* Add note */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<TextField
|
||||
value={newNote}
|
||||
onChange={(e) => setNewNote(e.target.value)}
|
||||
multiline
|
||||
minRows={2}
|
||||
placeholder="Napište poznámku..."
|
||||
fullWidth
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.ctrlKey && newNote.trim()) {
|
||||
handleAddNote();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={handleAddNote}
|
||||
disabled={addingNote || !newNote.trim()}
|
||||
>
|
||||
{addingNote ? "Přidávání..." : "Přidat poznámku"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Legacy notes (read-only) */}
|
||||
{project.notes && (
|
||||
<Box
|
||||
sx={{
|
||||
p: 1.5,
|
||||
bgcolor: "action.hover",
|
||||
borderRadius: 2,
|
||||
mb: 1,
|
||||
}}
|
||||
{/* Add note */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<TextField
|
||||
value={newNote}
|
||||
onChange={(e) => setNewNote(e.target.value)}
|
||||
multiline
|
||||
minRows={2}
|
||||
placeholder="Napište poznámku..."
|
||||
fullWidth
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.ctrlKey && newNote.trim()) {
|
||||
handleAddNote();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={handleAddNote}
|
||||
disabled={addingNote || !newNote.trim()}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ display: "block", mb: 0.5 }}
|
||||
>
|
||||
Starší poznámka (před zavedením systému)
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ whiteSpace: "pre-wrap" }}
|
||||
>
|
||||
{project.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{addingNote ? "Přidávání..." : "Přidat poznámku"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Notes list */}
|
||||
{notes.length === 0 && !project.notes && (
|
||||
{/* Legacy notes (read-only) */}
|
||||
{project.notes && (
|
||||
<Box
|
||||
sx={{
|
||||
p: 1.5,
|
||||
bgcolor: "action.hover",
|
||||
borderRadius: 2,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ display: "block", mb: 0.5 }}
|
||||
>
|
||||
Starší poznámka (před zavedením systému)
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: "center", py: 2 }}
|
||||
sx={{ whiteSpace: "pre-wrap" }}
|
||||
>
|
||||
Zatím žádné poznámky
|
||||
{project.notes}
|
||||
</Typography>
|
||||
)}
|
||||
{(notes.length > 0 || project.notes) && (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
{notes.map((note) => (
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Notes list */}
|
||||
{notes.length === 0 && !project.notes && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: "center", py: 2 }}
|
||||
>
|
||||
Zatím žádné poznámky
|
||||
</Typography>
|
||||
)}
|
||||
{(notes.length > 0 || project.notes) && (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
{notes.map((note) => (
|
||||
<Box
|
||||
key={note.id}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
bgcolor: "action.hover",
|
||||
borderRadius: 2,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
key={note.id}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
bgcolor: "action.hover",
|
||||
borderRadius: 2,
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
mb: 0.5,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{note.user_name}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{formatNoteDate(note.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ whiteSpace: "pre-wrap", lineHeight: 1.5 }}
|
||||
>
|
||||
{note.content}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
mb: 0.5,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
{note.user_name}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{formatNoteDate(note.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => handleDeleteNote(note.id)}
|
||||
title="Smazat poznámku"
|
||||
aria-label="Smazat poznámku"
|
||||
disabled={deletingNoteId === note.id}
|
||||
sx={{ flexShrink: 0 }}
|
||||
>
|
||||
{TrashIcon}
|
||||
</IconButton>
|
||||
)}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ whiteSpace: "pre-wrap", lineHeight: 1.5 }}
|
||||
>
|
||||
{note.content}
|
||||
</Typography>
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
onClick={() => handleDeleteNote(note.id)}
|
||||
title="Smazat poznámku"
|
||||
aria-label="Smazat poznámku"
|
||||
disabled={deletingNoteId === note.id}
|
||||
sx={{ flexShrink: 0 }}
|
||||
>
|
||||
{TrashIcon}
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Project File Manager */}
|
||||
<motion.div
|
||||
style={{ marginBottom: "1rem" }}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<ProjectFileManager
|
||||
projectId={project.id}
|
||||
projectNumber={project.project_number}
|
||||
hasPermission={hasPermission}
|
||||
hasNasFolder={project.has_nas_folder ?? false}
|
||||
/>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Links */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.15 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Propojení
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Objednávka
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{project.order_id ? (
|
||||
<Box
|
||||
component={RouterLink}
|
||||
to={`/orders/${project.order_id}`}
|
||||
sx={{
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
}}
|
||||
>
|
||||
{project.order_number}
|
||||
{project.order_status && (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{ color: "text.secondary", ml: 1 }}
|
||||
>
|
||||
(
|
||||
{STATUS_LABELS[project.order_status] ||
|
||||
project.order_status}
|
||||
)
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Nabídka
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{project.quotation_id ? (
|
||||
<Box
|
||||
component={RouterLink}
|
||||
to={`/offers/${project.quotation_id}`}
|
||||
sx={{
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
}}
|
||||
>
|
||||
{project.quotation_number}
|
||||
</Box>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Propojení
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Objednávka
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{project.order_id ? (
|
||||
<Box
|
||||
component={RouterLink}
|
||||
to={`/orders/${project.order_id}`}
|
||||
sx={{
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
}}
|
||||
>
|
||||
{project.order_number}
|
||||
{project.order_status && (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{ color: "text.secondary", ml: 1 }}
|
||||
>
|
||||
(
|
||||
{STATUS_LABELS[project.order_status] ||
|
||||
project.order_status}
|
||||
)
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Nabídka
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{project.quotation_id ? (
|
||||
<Box
|
||||
component={RouterLink}
|
||||
to={`/offers/${project.quotation_id}`}
|
||||
sx={{
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
}}
|
||||
>
|
||||
{project.quotation_number}
|
||||
</Box>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={deleteConfirm}
|
||||
@@ -687,6 +660,6 @@ export default function ProjectDetail() {
|
||||
/>
|
||||
)}
|
||||
</ConfirmDialog>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link as RouterLink, useNavigate } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -32,6 +31,7 @@ import {
|
||||
StatusChip,
|
||||
CheckboxField,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -346,30 +346,24 @@ export default function Projects() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<PageEnter>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 3,
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 3,
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Projekty</Typography>
|
||||
{hasPermission("projects.create") && (
|
||||
<Button startIcon={PlusIcon} onClick={openCreate}>
|
||||
Přidat projekt
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Typography variant="h4">Projekty</Typography>
|
||||
{hasPermission("projects.create") && (
|
||||
<Button startIcon={PlusIcon} onClick={openCreate}>
|
||||
Přidat projekt
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<TextField
|
||||
@@ -383,38 +377,32 @@ export default function Projects() {
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
|
||||
<DataTable<Project>
|
||||
columns={columns}
|
||||
rows={projects}
|
||||
rowKey={(p) => p.id}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nejsou žádné projekty.
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Projekty vznikají z objednávek nebo je můžete vytvořit ručně
|
||||
tlačítkem „Přidat projekt".
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
|
||||
<DataTable<Project>
|
||||
columns={columns}
|
||||
rows={projects}
|
||||
rowKey={(p) => p.id}
|
||||
sortBy={sort}
|
||||
sortDir={order}
|
||||
onSort={handleSort}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nejsou žádné projekty.
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Projekty vznikají z objednávek nebo je můžete vytvořit ručně
|
||||
tlačítkem „Přidat projekt".
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
pageCount={pagination?.total_pages ?? 1}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={!!deleteTarget}
|
||||
@@ -538,6 +526,6 @@ export default function Projects() {
|
||||
/>
|
||||
</Field>
|
||||
</Modal>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useQuery } from "@tanstack/react-query";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { Navigate, useSearchParams } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -27,6 +26,7 @@ import {
|
||||
Tabs,
|
||||
TabPanel,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
type TabDef,
|
||||
} from "../ui";
|
||||
@@ -780,23 +780,17 @@ export default function Settings() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h4">Nastavení</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||||
{activeTab === "system"
|
||||
? "Systémová nastavení"
|
||||
: activeTab === "firma"
|
||||
? "Informace o firmě"
|
||||
: "Role"}
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h4">Nastavení</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||||
{activeTab === "system"
|
||||
? "Systémová nastavení"
|
||||
: activeTab === "firma"
|
||||
? "Informace o firmě"
|
||||
: "Role"}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{tabDefs.length > 0 && (
|
||||
<Tabs
|
||||
@@ -808,43 +802,32 @@ export default function Settings() {
|
||||
|
||||
{/* Roles tab */}
|
||||
<TabPanel value="roles" current={activeTab}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">Role</Typography>
|
||||
<Button startIcon={PlusIcon} size="small" onClick={openCreateModal}>
|
||||
Přidat roli
|
||||
</Button>
|
||||
</Box>
|
||||
<Card>
|
||||
<DataTable<Role>
|
||||
columns={roleColumns}
|
||||
rows={roles}
|
||||
rowKey={(role) => role.id}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Typography variant="h6">Role</Typography>
|
||||
<Button startIcon={PlusIcon} size="small" onClick={openCreateModal}>
|
||||
Přidat roli
|
||||
</Button>
|
||||
</Box>
|
||||
<Card>
|
||||
<DataTable<Role>
|
||||
columns={roleColumns}
|
||||
rows={roles}
|
||||
rowKey={(role) => role.id}
|
||||
/>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
|
||||
{/* System settings tab */}
|
||||
<TabPanel value="system" current={activeTab}>
|
||||
{canManageSystem && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
>
|
||||
<Box sx={{ mb: "1.5rem" }}>
|
||||
<Card>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Zabezpečení
|
||||
@@ -908,16 +891,11 @@ export default function Settings() {
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{canManageSystem && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
>
|
||||
<Box sx={{ mb: "1.5rem" }}>
|
||||
<Card>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Přihlašování
|
||||
@@ -968,7 +946,7 @@ export default function Settings() {
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{sysSettingsLoading && !sysFormInitialized ? (
|
||||
@@ -976,12 +954,7 @@ export default function Settings() {
|
||||
) : (
|
||||
<>
|
||||
{/* Section 1: Docházka */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
>
|
||||
<Box sx={{ mb: "1.5rem" }}>
|
||||
<Card>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Docházka
|
||||
@@ -1051,15 +1024,10 @@ export default function Settings() {
|
||||
</Field>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Section 2: Emailové notifikace */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
>
|
||||
<Box sx={{ mb: "1.5rem" }}>
|
||||
<Card>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Emailové notifikace
|
||||
@@ -1124,15 +1092,10 @@ export default function Settings() {
|
||||
</Field>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Section 4: Omezení požadavků */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.24 }}
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
>
|
||||
<Box sx={{ mb: "1.5rem" }}>
|
||||
<Card>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Omezení požadavků
|
||||
@@ -1154,39 +1117,26 @@ export default function Settings() {
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Section 5: Informace o aplikaci */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.36 }}
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
>
|
||||
<Box sx={{ mb: "1.5rem" }}>
|
||||
<Card>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Informace o aplikaci
|
||||
</Typography>
|
||||
{renderSystemInfo()}
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Save button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.42 }}
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={handleSaveSystemSettings}
|
||||
disabled={saveSystemSettingsMutation.isPending}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={handleSaveSystemSettings}
|
||||
disabled={saveSystemSettingsMutation.isPending}
|
||||
>
|
||||
{saveSystemSettingsMutation.isPending
|
||||
? "Ukládání..."
|
||||
: "Uložit"}
|
||||
</Button>
|
||||
</motion.div>
|
||||
{saveSystemSettingsMutation.isPending ? "Ukládání..." : "Uložit"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</TabPanel>
|
||||
@@ -1399,6 +1349,6 @@ export default function Settings() {
|
||||
confirmVariant="danger"
|
||||
loading={deleteRoleMutation.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -30,6 +29,7 @@ import {
|
||||
StatusChip,
|
||||
LoadingState,
|
||||
StatCard,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -418,124 +418,106 @@ export default function Trips() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<PageEnter>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h4">Kniha jízd</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||||
{new Date().toLocaleDateString("cs-CZ", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat jízdu
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "1fr 1fr",
|
||||
lg: "repeat(4, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Počet jízd"
|
||||
value={totals.count}
|
||||
icon={TripsIcon}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="Celkem naježděno"
|
||||
value={`${formatKm(totals.total)} km`}
|
||||
icon={TotalIcon}
|
||||
color="default"
|
||||
/>
|
||||
<StatCard
|
||||
label="Služební"
|
||||
value={`${formatKm(totals.business)} km`}
|
||||
icon={BusinessIcon}
|
||||
color="success"
|
||||
/>
|
||||
<StatCard
|
||||
label="Soukromé"
|
||||
value={`${formatKm(totals.private)} km`}
|
||||
icon={PrivateIcon}
|
||||
color="warning"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Recent Trips */}
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h4">Kniha jízd</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||||
{new Date().toLocaleDateString("cs-CZ", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat jízdu
|
||||
<Typography variant="h6">Poslední jízdy</Typography>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/trips/history"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
size="small"
|
||||
>
|
||||
Zobrazit historii
|
||||
</Button>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "1fr 1fr",
|
||||
lg: "repeat(4, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Počet jízd"
|
||||
value={totals.count}
|
||||
icon={TripsIcon}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="Celkem naježděno"
|
||||
value={`${formatKm(totals.total)} km`}
|
||||
icon={TotalIcon}
|
||||
color="default"
|
||||
/>
|
||||
<StatCard
|
||||
label="Služební"
|
||||
value={`${formatKm(totals.business)} km`}
|
||||
icon={BusinessIcon}
|
||||
color="success"
|
||||
/>
|
||||
<StatCard
|
||||
label="Soukromé"
|
||||
value={`${formatKm(totals.private)} km`}
|
||||
icon={PrivateIcon}
|
||||
color="warning"
|
||||
/>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{/* Recent Trips */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">Poslední jízdy</Typography>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/trips/history"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
size="small"
|
||||
>
|
||||
Zobrazit historii
|
||||
</Button>
|
||||
</Box>
|
||||
<DataTable<BackendTrip>
|
||||
columns={columns}
|
||||
rows={recentTrips}
|
||||
rowKey={(trip) => trip.id}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nemáte žádné záznamy jízd.
|
||||
</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat první jízdu
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<DataTable<BackendTrip>
|
||||
columns={columns}
|
||||
rows={recentTrips}
|
||||
rowKey={(trip) => trip.id}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nemáte žádné záznamy jízd.
|
||||
</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat první jízdu
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Add/Edit Modal */}
|
||||
<Modal
|
||||
@@ -696,6 +678,6 @@ export default function Trips() {
|
||||
confirmVariant="danger"
|
||||
loading={deleteMutation.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -33,6 +32,7 @@ import {
|
||||
LoadingState,
|
||||
EmptyState,
|
||||
StatCard,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -529,171 +529,147 @@ export default function TripsAdmin() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<PageEnter>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Správa knihy jízd</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
|
||||
{trips.length > 0 && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PrintIcon}
|
||||
onClick={handlePrint}
|
||||
title="Tisk knihy jízd"
|
||||
>
|
||||
Tisk
|
||||
</Button>
|
||||
)}
|
||||
<Typography variant="h4">Správa knihy jízd</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
|
||||
{trips.length > 0 && (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/vehicles"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PrintIcon}
|
||||
onClick={handlePrint}
|
||||
title="Tisk knihy jízd"
|
||||
>
|
||||
Vozidla
|
||||
Tisk
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/vehicles"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
>
|
||||
Vozidla
|
||||
</Button>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Filters */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "0 0 160px" }}>
|
||||
<Field label="Měsíc">
|
||||
<Select
|
||||
value={filterMonth}
|
||||
onChange={setFilterMonth}
|
||||
options={Array.from({ length: 12 }, (_, i) => ({
|
||||
value: String(i + 1),
|
||||
label: new Date(2000, i).toLocaleString("cs-CZ", {
|
||||
month: "long",
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "0 0 120px" }}>
|
||||
<Field label="Rok">
|
||||
<Select
|
||||
value={filterYear}
|
||||
onChange={setFilterYear}
|
||||
options={Array.from({ length: 5 }, (_, i) => {
|
||||
const y = new Date().getFullYear() - 2 + i;
|
||||
return { value: String(y), label: String(y) };
|
||||
})}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Vozidlo">
|
||||
<Select
|
||||
value={filterVehicleId}
|
||||
onChange={setFilterVehicleId}
|
||||
options={[
|
||||
{ value: "", label: "Všechna vozidla" },
|
||||
...vehicles.map((v) => ({
|
||||
value: String(v.id),
|
||||
label: `${v.spz} - ${v.name}`,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Řidič">
|
||||
<Select
|
||||
value={filterUserId}
|
||||
onChange={setFilterUserId}
|
||||
options={[
|
||||
{ value: "", label: "Všichni řidiči" },
|
||||
...tripUsers.map((u) => ({
|
||||
value: String(u.id),
|
||||
label: u.name,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
</motion.div>
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "0 0 160px" }}>
|
||||
<Field label="Měsíc">
|
||||
<Select
|
||||
value={filterMonth}
|
||||
onChange={setFilterMonth}
|
||||
options={Array.from({ length: 12 }, (_, i) => ({
|
||||
value: String(i + 1),
|
||||
label: new Date(2000, i).toLocaleString("cs-CZ", {
|
||||
month: "long",
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "0 0 120px" }}>
|
||||
<Field label="Rok">
|
||||
<Select
|
||||
value={filterYear}
|
||||
onChange={setFilterYear}
|
||||
options={Array.from({ length: 5 }, (_, i) => {
|
||||
const y = new Date().getFullYear() - 2 + i;
|
||||
return { value: String(y), label: String(y) };
|
||||
})}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Vozidlo">
|
||||
<Select
|
||||
value={filterVehicleId}
|
||||
onChange={setFilterVehicleId}
|
||||
options={[
|
||||
{ value: "", label: "Všechna vozidla" },
|
||||
...vehicles.map((v) => ({
|
||||
value: String(v.id),
|
||||
label: `${v.spz} - ${v.name}`,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Řidič">
|
||||
<Select
|
||||
value={filterUserId}
|
||||
onChange={setFilterUserId}
|
||||
options={[
|
||||
{ value: "", label: "Všichni řidiči" },
|
||||
...tripUsers.map((u) => ({
|
||||
value: String(u.id),
|
||||
label: u.name,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(3, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(3, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Počet jízd"
|
||||
value={totals.count}
|
||||
icon={TripsIcon}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="Celkem naježděno"
|
||||
value={`${formatKm(totals.total)} km`}
|
||||
icon={TotalIcon}
|
||||
color="default"
|
||||
/>
|
||||
<StatCard
|
||||
label="Služební km"
|
||||
value={`${formatKm(totals.business)} km`}
|
||||
icon={BusinessIcon}
|
||||
color="success"
|
||||
/>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<StatCard
|
||||
label="Počet jízd"
|
||||
value={totals.count}
|
||||
icon={TripsIcon}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="Celkem naježděno"
|
||||
value={`${formatKm(totals.total)} km`}
|
||||
icon={TotalIcon}
|
||||
color="default"
|
||||
/>
|
||||
<StatCard
|
||||
label="Služební km"
|
||||
value={`${formatKm(totals.business)} km`}
|
||||
icon={BusinessIcon}
|
||||
color="success"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Trips Table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<DataTable<Trip>
|
||||
columns={columns}
|
||||
rows={trips}
|
||||
rowKey={(trip) => trip.id}
|
||||
empty={
|
||||
<EmptyState title="Žádné záznamy jízd pro vybrané období." />
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<DataTable<Trip>
|
||||
columns={columns}
|
||||
rows={trips}
|
||||
rowKey={(trip) => trip.id}
|
||||
empty={
|
||||
<EmptyState title="Žádné záznamy jízd pro vybrané období." />
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Edit Modal */}
|
||||
<Modal
|
||||
@@ -962,6 +938,6 @@ export default function TripsAdmin() {
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
@@ -15,6 +14,7 @@ import {
|
||||
MonthField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -216,104 +216,80 @@ export default function TripsHistory() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader title="Historie jízd" subtitle={getMonthName(month)} />
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader title="Historie jízd" subtitle={getMonthName(month)} />
|
||||
|
||||
{/* Filters */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Měsíc">
|
||||
<MonthField value={month} onChange={(val) => setMonth(val)} />
|
||||
</Field>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Vozidlo">
|
||||
<Select
|
||||
value={vehicleId}
|
||||
onChange={(value) => setVehicleId(value)}
|
||||
options={[
|
||||
{ value: "", label: "Všechna vozidla" },
|
||||
...vehicles.map((v) => ({
|
||||
value: String(v.id),
|
||||
label: `${v.spz} - ${v.name}`,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "1fr 1fr",
|
||||
lg: "repeat(3, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
mt: 3,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Počet jízd"
|
||||
value={totals.count}
|
||||
icon={TripsIcon}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="Celkem naježděno"
|
||||
value={`${formatKm(totals.total)} km`}
|
||||
icon={TotalIcon}
|
||||
color="default"
|
||||
/>
|
||||
<StatCard
|
||||
label="Služební km"
|
||||
value={`${formatKm(totals.business)} km`}
|
||||
icon={BusinessIcon}
|
||||
color="success"
|
||||
/>
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Měsíc">
|
||||
<MonthField value={month} onChange={(val) => setMonth(val)} />
|
||||
</Field>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Box sx={{ flex: "1 1 200px" }}>
|
||||
<Field label="Vozidlo">
|
||||
<Select
|
||||
value={vehicleId}
|
||||
onChange={(value) => setVehicleId(value)}
|
||||
options={[
|
||||
{ value: "", label: "Všechna vozidla" },
|
||||
...vehicles.map((v) => ({
|
||||
value: String(v.id),
|
||||
label: `${v.spz} - ${v.name}`,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
</FilterBar>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "1fr 1fr",
|
||||
lg: "repeat(3, 1fr)",
|
||||
},
|
||||
gap: 2,
|
||||
mt: 3,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Počet jízd"
|
||||
value={totals.count}
|
||||
icon={TripsIcon}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="Celkem naježděno"
|
||||
value={`${formatKm(totals.total)} km`}
|
||||
icon={TotalIcon}
|
||||
color="default"
|
||||
/>
|
||||
<StatCard
|
||||
label="Služební km"
|
||||
value={`${formatKm(totals.business)} km`}
|
||||
icon={BusinessIcon}
|
||||
color="success"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Trips Table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<DataTable<Trip>
|
||||
columns={columns}
|
||||
rows={trips}
|
||||
rowKey={(trip) => trip.id}
|
||||
empty={
|
||||
<EmptyState title="Žádné záznamy jízd pro vybrané období." />
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
<Card sx={{ mt: 3 }}>
|
||||
{isPending ? (
|
||||
<LoadingState />
|
||||
) : (
|
||||
<DataTable<Trip>
|
||||
columns={columns}
|
||||
rows={trips}
|
||||
rowKey={(trip) => trip.id}
|
||||
empty={
|
||||
<EmptyState title="Žádné záznamy jízd pro vybrané období." />
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
@@ -26,6 +25,7 @@ import {
|
||||
Select,
|
||||
StatusChip,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -324,53 +324,41 @@ export default function Users() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<PageEnter>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 3,
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 3,
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Správa uživatelů</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat uživatele
|
||||
</Button>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Typography variant="h4">Správa uživatelů</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat uživatele
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card>
|
||||
<DataTable<User>
|
||||
columns={columns}
|
||||
rows={users}
|
||||
rowKey={(u) => u.id}
|
||||
rowInactive={(u) => !u.is_active}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nejsou žádní uživatelé.
|
||||
</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat prvního uživatele
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card>
|
||||
<DataTable<User>
|
||||
columns={columns}
|
||||
rows={users}
|
||||
rowKey={(u) => u.id}
|
||||
rowInactive={(u) => !u.is_active}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nejsou žádní uživatelé.
|
||||
</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat prvního uživatele
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
isOpen={showModal}
|
||||
@@ -478,6 +466,6 @@ export default function Users() {
|
||||
confirmVariant="danger"
|
||||
loading={deleteUser.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Chip from "@mui/material/Chip";
|
||||
@@ -21,6 +20,7 @@ import {
|
||||
TextField,
|
||||
SwitchField,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -299,53 +299,41 @@ export default function Vehicles() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<PageEnter>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 3,
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: 3,
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Správa vozidel</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat vozidlo
|
||||
</Button>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Typography variant="h4">Správa vozidel</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat vozidlo
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card>
|
||||
<DataTable<Vehicle>
|
||||
columns={columns}
|
||||
rows={vehicles}
|
||||
rowKey={(v) => v.id}
|
||||
rowInactive={(v) => !v.is_active}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nejsou žádná vozidla.
|
||||
</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat první vozidlo
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card>
|
||||
<DataTable<Vehicle>
|
||||
columns={columns}
|
||||
rows={vehicles}
|
||||
rowKey={(v) => v.id}
|
||||
rowInactive={(v) => !v.is_active}
|
||||
empty={
|
||||
<Box sx={{ textAlign: "center", py: 6 }}>
|
||||
<Typography color="text.secondary" gutterBottom>
|
||||
Zatím nejsou žádná vozidla.
|
||||
</Typography>
|
||||
<Button startIcon={PlusIcon} onClick={openCreateModal}>
|
||||
Přidat první vozidlo
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
isOpen={showModal}
|
||||
@@ -438,6 +426,6 @@ export default function Vehicles() {
|
||||
confirmText="Smazat"
|
||||
confirmVariant="danger"
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
@@ -22,6 +21,7 @@ import {
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
type StatCardColor,
|
||||
} from "../ui";
|
||||
@@ -193,74 +193,64 @@ export default function Warehouse() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Sklad"
|
||||
subtitle="Přehled skladových zásob"
|
||||
actions={
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
|
||||
{hasPermission("warehouse.operate") && (
|
||||
<>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts/new"
|
||||
startIcon={ReceiptIcon}
|
||||
>
|
||||
Nový příjem
|
||||
</Button>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues/new"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={IssueIcon}
|
||||
>
|
||||
Nový výdej
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{hasPermission("warehouse.manage") && (
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Sklad"
|
||||
subtitle="Přehled skladových zásob"
|
||||
actions={
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
|
||||
{hasPermission("warehouse.operate") && (
|
||||
<>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/categories"
|
||||
to="/warehouse/receipts/new"
|
||||
startIcon={ReceiptIcon}
|
||||
>
|
||||
Nový příjem
|
||||
</Button>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues/new"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={IssueIcon}
|
||||
>
|
||||
Kategorie
|
||||
Nový výdej
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{hasPermission("warehouse.manage") && (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/items"
|
||||
to="/warehouse/categories"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
>
|
||||
Položky
|
||||
Kategorie
|
||||
</Button>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/reports"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
>
|
||||
Reporty
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/items"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
>
|
||||
Položky
|
||||
</Button>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/reports"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
>
|
||||
Reporty
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* KPI cards */}
|
||||
<Box
|
||||
component={motion.div}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
@@ -296,13 +286,7 @@ export default function Warehouse() {
|
||||
|
||||
{/* Below minimum alert */}
|
||||
{belowMin.length > 0 && (
|
||||
<Box
|
||||
component={motion.div}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.14 }}
|
||||
sx={{ mb: 3 }}
|
||||
>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Card sx={{ borderColor: "error.main", borderWidth: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
@@ -342,12 +326,7 @@ export default function Warehouse() {
|
||||
)}
|
||||
|
||||
{/* Recent movements */}
|
||||
<Box
|
||||
component={motion.div}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.16 }}
|
||||
>
|
||||
<Box>
|
||||
<Card>
|
||||
<Box
|
||||
sx={{
|
||||
@@ -381,6 +360,6 @@ export default function Warehouse() {
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
Field,
|
||||
TextField,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
type DataColumn,
|
||||
@@ -238,7 +239,7 @@ export default function WarehouseCategories() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Kategorie skladu"
|
||||
subtitle={subtitle}
|
||||
@@ -327,6 +328,6 @@ export default function WarehouseCategories() {
|
||||
confirmVariant="danger"
|
||||
loading={deleteMutation.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
@@ -19,6 +18,7 @@ import {
|
||||
Select,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -127,25 +127,19 @@ export default function WarehouseInventory() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Inventury"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/inventory/new")}
|
||||
>
|
||||
Nová inventura
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Inventury"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/inventory/new")}
|
||||
>
|
||||
Nová inventura
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "0 0 200px" }}>
|
||||
@@ -199,6 +193,6 @@ export default function WarehouseInventory() {
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, Link as RouterLink } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
@@ -23,6 +22,7 @@ import {
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
ConfirmDialog,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
@@ -187,117 +187,99 @@ export default function WarehouseInventoryDetail() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title={s.session_number || "Inventura"}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<PageHeader
|
||||
title={s.session_number || "Inventura"}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
<StatusChip
|
||||
label={STATUS_LABEL[s.status] ?? s.status}
|
||||
color={STATUS_COLOR[s.status] ?? "default"}
|
||||
/>
|
||||
{s.status === "DRAFT" && (
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
onClick={() => setShowConfirmModal(true)}
|
||||
disabled={confirming}
|
||||
>
|
||||
Zpět
|
||||
{confirming ? "Potvrzování..." : "Potvrdit inventuru"}
|
||||
</Button>
|
||||
<StatusChip
|
||||
label={STATUS_LABEL[s.status] ?? s.status}
|
||||
color={STATUS_COLOR[s.status] ?? "default"}
|
||||
/>
|
||||
{s.status === "DRAFT" && (
|
||||
<Button
|
||||
onClick={() => setShowConfirmModal(true)}
|
||||
disabled={confirming}
|
||||
>
|
||||
{confirming ? "Potvrzování..." : "Potvrdit inventuru"}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Header info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo inventury
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{s.session_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vytvořeno
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(s.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{s.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{s.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Header info */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo inventury
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{s.session_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vytvořeno
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(s.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{s.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{s.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Lines table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<WarehouseInventoryItem>
|
||||
columns={itemColumns}
|
||||
rows={items}
|
||||
rowKey={(row) => row.id}
|
||||
empty={<EmptyState title="Žádné řádky" />}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<WarehouseInventoryItem>
|
||||
columns={itemColumns}
|
||||
rows={items}
|
||||
rowKey={(row) => row.id}
|
||||
empty={<EmptyState title="Žádné řádky" />}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Confirm modal */}
|
||||
<ConfirmDialog
|
||||
@@ -309,6 +291,6 @@ export default function WarehouseInventoryDetail() {
|
||||
confirmText="Potvrdit inventuru"
|
||||
loading={confirming}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useId, useRef } from "react";
|
||||
import { useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -14,7 +13,7 @@ import {
|
||||
type WarehouseLocation,
|
||||
} from "../lib/queries/warehouse";
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { Button, Card, TextField, Select, Field } from "../ui";
|
||||
import { Button, Card, TextField, Select, Field, PageEnter } from "../ui";
|
||||
|
||||
interface InventoryItem {
|
||||
key: string;
|
||||
@@ -165,139 +164,121 @@ export default function WarehouseInventoryForm() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">Nová inventura</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button onClick={handleSubmit} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Vytvořit inventuru"}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/inventory"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">Nová inventura</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button onClick={handleSubmit} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Vytvořit inventuru"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Notes */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Volitelné poznámky k inventuře"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Volitelné poznámky k inventuře"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
|
||||
{/* Lines */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(180px, 2fr) minmax(140px, 1.5fr) 120px auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(180px, 2fr) minmax(140px, 1.5fr) 120px auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.actual_qty || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "actual_qty", Number(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Skutečné množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Skutečné množství"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.actual_qty || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "actual_qty", Number(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Skutečné množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Skutečné množství"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Přidat položku
|
||||
</Button>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Přidat položku
|
||||
</Button>
|
||||
</Card>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
@@ -24,6 +23,7 @@ import {
|
||||
LoadingState,
|
||||
PageHeader,
|
||||
ConfirmDialog,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -223,57 +223,42 @@ export default function WarehouseIssueDetail() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title={iss.issue_number || "Nová výdejka"}
|
||||
subtitle={
|
||||
iss.project
|
||||
? `${iss.project.project_number} – ${iss.project.name}`
|
||||
: undefined
|
||||
}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
<StatusChip
|
||||
label={STATUS_LABEL[iss.status] ?? iss.status}
|
||||
color={STATUS_COLOR[iss.status] ?? "default"}
|
||||
/>
|
||||
{canOperate && iss.status === "DRAFT" && (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => navigate(`/warehouse/issues/${iss.id}/edit`)}
|
||||
>
|
||||
Upravit
|
||||
</Button>
|
||||
<Button onClick={handleConfirm} disabled={confirming}>
|
||||
{confirming ? "Potvrzování..." : "Potvrdit"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => setCancelConfirm(true)}
|
||||
>
|
||||
Zrušit
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{canOperate && iss.status === "CONFIRMED" && (
|
||||
<PageHeader
|
||||
title={iss.issue_number || "Nová výdejka"}
|
||||
subtitle={
|
||||
iss.project
|
||||
? `${iss.project.project_number} – ${iss.project.name}`
|
||||
: undefined
|
||||
}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
<StatusChip
|
||||
label={STATUS_LABEL[iss.status] ?? iss.status}
|
||||
color={STATUS_COLOR[iss.status] ?? "default"}
|
||||
/>
|
||||
{canOperate && iss.status === "DRAFT" && (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => navigate(`/warehouse/issues/${iss.id}/edit`)}
|
||||
>
|
||||
Upravit
|
||||
</Button>
|
||||
<Button onClick={handleConfirm} disabled={confirming}>
|
||||
{confirming ? "Potvrzování..." : "Potvrdit"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
@@ -281,126 +266,123 @@ export default function WarehouseIssueDetail() {
|
||||
>
|
||||
Zrušit
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Basic info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo dokladu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
</>
|
||||
)}
|
||||
{canOperate && iss.status === "CONFIRMED" && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => setCancelConfirm(true)}
|
||||
>
|
||||
{iss.issue_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Projekt
|
||||
</Typography>
|
||||
{iss.project ? (
|
||||
<Typography
|
||||
variant="body2"
|
||||
component="a"
|
||||
href={`/projects/${iss.project.id}`}
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
{iss.project.project_number} – {iss.project.name}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant="body2">—</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vydal
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{iss.issued_by_user
|
||||
? `${iss.issued_by_user.first_name} ${iss.issued_by_user.last_name}`
|
||||
: "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vytvořeno
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(iss.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{iss.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{iss.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
Zrušit
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Basic info */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo dokladu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{iss.issue_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Projekt
|
||||
</Typography>
|
||||
{iss.project ? (
|
||||
<Typography
|
||||
variant="body2"
|
||||
component="a"
|
||||
href={`/projects/${iss.project.id}`}
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
color: "primary.main",
|
||||
textDecoration: "none",
|
||||
"&:hover": { textDecoration: "underline" },
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
{iss.project.project_number} – {iss.project.name}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant="body2">—</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vydal
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{iss.issued_by_user
|
||||
? `${iss.issued_by_user.first_name} ${iss.issued_by_user.last_name}`
|
||||
: "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vytvořeno
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(iss.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{iss.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{iss.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Lines table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<WarehouseIssueItem>
|
||||
columns={itemColumns}
|
||||
rows={items}
|
||||
rowKey={(row) => row.id}
|
||||
empty={<EmptyState title="Žádné řádky" />}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<WarehouseIssueItem>
|
||||
columns={itemColumns}
|
||||
rows={items}
|
||||
rowKey={(row) => row.id}
|
||||
empty={<EmptyState title="Žádné řádky" />}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Cancel confirmation dialog */}
|
||||
<ConfirmDialog
|
||||
@@ -413,6 +395,6 @@ export default function WarehouseIssueDetail() {
|
||||
confirmVariant="danger"
|
||||
loading={cancelling}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
Link as RouterLink,
|
||||
} from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -23,7 +22,15 @@ import {
|
||||
} from "../lib/queries/warehouse";
|
||||
import { projectListOptions, type Project } from "../lib/queries/projects";
|
||||
import { useApiMutation } from "../lib/queries/mutations";
|
||||
import { Button, Card, TextField, Select, Field, LoadingState } from "../ui";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
TextField,
|
||||
Select,
|
||||
Field,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
} from "../ui";
|
||||
|
||||
interface IssueForm {
|
||||
project_id: number | null;
|
||||
@@ -422,199 +429,181 @@ export default function WarehouseIssueForm() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit výdejku" : "Nová výdejka"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={handleSaveDraft}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "Ukládání..." : "Uložit jako návrh"}
|
||||
</Button>
|
||||
<Button onClick={handleSaveAndConfirm} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Uložit a potvrdit"}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/issues"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit výdejku" : "Nová výdejka"}
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{/* Header fields */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Projekt" error={errors.project_id}>
|
||||
<Select
|
||||
value={form.project_id === null ? "" : String(form.project_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
project_id: val === "" ? null : Number(val),
|
||||
}))
|
||||
}
|
||||
options={projectOptions}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({ ...prev, notes: e.target.value }))
|
||||
}
|
||||
placeholder="Volitelné poznámky"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Lines */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
{errors.items && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="error"
|
||||
sx={{ display: "block", mb: 1.5 }}
|
||||
>
|
||||
{errors.items}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(160px, 1.6fr) minmax(160px, 1.6fr) 100px 100px minmax(130px, 1.1fr) minmax(120px, 1.2fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<BatchSelect
|
||||
itemId={item.item_id}
|
||||
value={item.batch_id}
|
||||
onChange={(batchId, unitPrice) => {
|
||||
updateItem(index, "batch_id", batchId);
|
||||
updateItem(index, "unit_price", unitPrice);
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.quantity || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "quantity", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Množství"
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.unit_price || ""}
|
||||
disabled
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.01,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Cena za kus, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Cena/ks"
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
value={item.notes ?? ""}
|
||||
onChange={(e) => updateItem(index, "notes", e.target.value)}
|
||||
placeholder="Poznámka"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
onClick={handleSaveDraft}
|
||||
disabled={saving}
|
||||
>
|
||||
Přidat položku
|
||||
{saving ? "Ukládání..." : "Uložit jako návrh"}
|
||||
</Button>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Box>
|
||||
<Button onClick={handleSaveAndConfirm} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Uložit a potvrdit"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Header fields */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Projekt" error={errors.project_id}>
|
||||
<Select
|
||||
value={form.project_id === null ? "" : String(form.project_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
project_id: val === "" ? null : Number(val),
|
||||
}))
|
||||
}
|
||||
options={projectOptions}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({ ...prev, notes: e.target.value }))
|
||||
}
|
||||
placeholder="Volitelné poznámky"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
|
||||
{/* Lines */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
{errors.items && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="error"
|
||||
sx={{ display: "block", mb: 1.5 }}
|
||||
>
|
||||
{errors.items}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(160px, 1.6fr) minmax(160px, 1.6fr) 100px 100px minmax(130px, 1.1fr) minmax(120px, 1.2fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<BatchSelect
|
||||
itemId={item.item_id}
|
||||
value={item.batch_id}
|
||||
onChange={(batchId, unitPrice) => {
|
||||
updateItem(index, "batch_id", batchId);
|
||||
updateItem(index, "unit_price", unitPrice);
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.quantity || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "quantity", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Množství"
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.unit_price || ""}
|
||||
disabled
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.01,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Cena za kus, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Cena/ks"
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
value={item.notes ?? ""}
|
||||
onChange={(e) => updateItem(index, "notes", e.target.value)}
|
||||
placeholder="Poznámka"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Přidat položku
|
||||
</Button>
|
||||
</Card>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import useDebounce from "../hooks/useDebounce";
|
||||
import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
|
||||
@@ -24,6 +23,7 @@ import {
|
||||
DateField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -166,27 +166,21 @@ export default function WarehouseIssues() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Výdejky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canOperate ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/issues/new")}
|
||||
>
|
||||
Nová výdejka
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Výdejky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canOperate ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/issues/new")}
|
||||
>
|
||||
Nová výdejka
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 220px" }}>
|
||||
@@ -292,6 +286,6 @@ export default function WarehouseIssues() {
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
@@ -29,6 +28,7 @@ import {
|
||||
LoadingState,
|
||||
PageHeader,
|
||||
ConfirmDialog,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -356,145 +356,35 @@ export default function WarehouseItemDetail() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/items"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
{headerActions}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageHeader
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/items"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
{headerActions}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Basic info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
|
||||
{editing || isNew ? (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Číslo položky" error={errors.item_number}>
|
||||
<TextField
|
||||
value={form.item_number}
|
||||
onChange={(e) => {
|
||||
updateForm("item_number", e.target.value);
|
||||
setErrors((prev) => ({ ...prev, item_number: "" }));
|
||||
}}
|
||||
placeholder="Např. SKL-001"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Název" required error={errors.name}>
|
||||
<TextField
|
||||
value={form.name}
|
||||
error={!!errors.name}
|
||||
onChange={(e) => {
|
||||
updateForm("name", e.target.value);
|
||||
setErrors((prev) => ({ ...prev, name: "" }));
|
||||
}}
|
||||
placeholder="Název položky"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Field label="Popis">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.description}
|
||||
onChange={(e) => updateForm("description", e.target.value)}
|
||||
placeholder="Volitelný popis položky"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Kategorie">
|
||||
<Select
|
||||
value={form.category_id}
|
||||
onChange={(v) => updateForm("category_id", v)}
|
||||
>
|
||||
<MenuItem value="">— Bez kategorie —</MenuItem>
|
||||
{categories.map((cat) => (
|
||||
<MenuItem key={cat.id} value={String(cat.id)}>
|
||||
{cat.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Field>
|
||||
<Field label="Jednotka" required error={errors.unit}>
|
||||
<TextField
|
||||
value={form.unit}
|
||||
error={!!errors.unit}
|
||||
onChange={(e) => {
|
||||
updateForm("unit", e.target.value);
|
||||
setErrors((prev) => ({ ...prev, unit: "" }));
|
||||
}}
|
||||
placeholder="ks, m, kg..."
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Minimální množství"
|
||||
hint="Upozornění při poklesu pod tuto hranici"
|
||||
>
|
||||
<TextField
|
||||
type="number"
|
||||
inputProps={{ inputMode: "numeric", min: 0 }}
|
||||
value={form.min_quantity}
|
||||
onChange={(e) => updateForm("min_quantity", e.target.value)}
|
||||
placeholder="0"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={2}
|
||||
value={form.notes}
|
||||
onChange={(e) => updateForm("notes", e.target.value)}
|
||||
placeholder="Volitelné poznámky"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
) : (
|
||||
{editing || isNew ? (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
@@ -502,166 +392,246 @@ export default function WarehouseItemDetail() {
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{/* Číslo položky */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo položky
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{item?.item_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Název */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Název
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{item?.name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Popis */}
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Popis
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{item?.description || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Kategorie */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Kategorie
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{item?.category?.name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Jednotka */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Jednotka
|
||||
</Typography>
|
||||
<Typography variant="body2">{item?.unit || "—"}</Typography>
|
||||
</Box>
|
||||
{/* Minimální množství */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Minimální množství
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{item?.min_quantity != null ? item.min_quantity : "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Poznámky */}
|
||||
{item?.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{item.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Field label="Číslo položky" error={errors.item_number}>
|
||||
<TextField
|
||||
value={form.item_number}
|
||||
onChange={(e) => {
|
||||
updateForm("item_number", e.target.value);
|
||||
setErrors((prev) => ({ ...prev, item_number: "" }));
|
||||
}}
|
||||
placeholder="Např. SKL-001"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Název" required error={errors.name}>
|
||||
<TextField
|
||||
value={form.name}
|
||||
error={!!errors.name}
|
||||
onChange={(e) => {
|
||||
updateForm("name", e.target.value);
|
||||
setErrors((prev) => ({ ...prev, name: "" }));
|
||||
}}
|
||||
placeholder="Název položky"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Stock info — only in view mode, for existing items */}
|
||||
{id !== "new" && !editing && item && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Field label="Popis">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.description}
|
||||
onChange={(e) => updateForm("description", e.target.value)}
|
||||
placeholder="Volitelný popis položky"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Kategorie">
|
||||
<Select
|
||||
value={form.category_id}
|
||||
onChange={(v) => updateForm("category_id", v)}
|
||||
>
|
||||
<MenuItem value="">— Bez kategorie —</MenuItem>
|
||||
{categories.map((cat) => (
|
||||
<MenuItem key={cat.id} value={String(cat.id)}>
|
||||
{cat.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Field>
|
||||
<Field label="Jednotka" required error={errors.unit}>
|
||||
<TextField
|
||||
value={form.unit}
|
||||
error={!!errors.unit}
|
||||
onChange={(e) => {
|
||||
updateForm("unit", e.target.value);
|
||||
setErrors((prev) => ({ ...prev, unit: "" }));
|
||||
}}
|
||||
placeholder="ks, m, kg..."
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Minimální množství"
|
||||
hint="Upozornění při poklesu pod tuto hranici"
|
||||
>
|
||||
<TextField
|
||||
type="number"
|
||||
inputProps={{ inputMode: "numeric", min: 0 }}
|
||||
value={form.min_quantity}
|
||||
onChange={(e) => updateForm("min_quantity", e.target.value)}
|
||||
placeholder="0"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={2}
|
||||
value={form.notes}
|
||||
onChange={(e) => updateForm("notes", e.target.value)}
|
||||
placeholder="Volitelné poznámky"
|
||||
fullWidth
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr 1fr",
|
||||
md: "1fr 1fr 1fr 1fr",
|
||||
},
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Celkové množství"
|
||||
value={`${item.total_quantity ?? 0} ${item.unit}`}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="K dispozici"
|
||||
value={`${item.available_quantity ?? 0} ${item.unit}`}
|
||||
color="success"
|
||||
/>
|
||||
<StatCard
|
||||
label="Hodnota zásob"
|
||||
value={
|
||||
item.stock_value != null
|
||||
? formatCurrency(item.stock_value, "CZK")
|
||||
: "0,00 Kč"
|
||||
}
|
||||
color="warning"
|
||||
/>
|
||||
<StatCard
|
||||
label="Pod minimem"
|
||||
value={item.below_minimum ? "Ano" : "Ne"}
|
||||
color={item.below_minimum ? "error" : "info"}
|
||||
/>
|
||||
{/* Číslo položky */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo položky
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{item?.item_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Název */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Název
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{item?.name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Popis */}
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Popis
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{item?.description || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Kategorie */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Kategorie
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{item?.category?.name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Jednotka */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Jednotka
|
||||
</Typography>
|
||||
<Typography variant="body2">{item?.unit || "—"}</Typography>
|
||||
</Box>
|
||||
{/* Minimální množství */}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Minimální množství
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{item?.min_quantity != null ? item.min_quantity : "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Poznámky */}
|
||||
{item?.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{item.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</motion.div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Stock info — only in view mode, for existing items */}
|
||||
{id !== "new" && !editing && item && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr 1fr",
|
||||
md: "1fr 1fr 1fr 1fr",
|
||||
},
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Celkové množství"
|
||||
value={`${item.total_quantity ?? 0} ${item.unit}`}
|
||||
color="info"
|
||||
/>
|
||||
<StatCard
|
||||
label="K dispozici"
|
||||
value={`${item.available_quantity ?? 0} ${item.unit}`}
|
||||
color="success"
|
||||
/>
|
||||
<StatCard
|
||||
label="Hodnota zásob"
|
||||
value={
|
||||
item.stock_value != null
|
||||
? formatCurrency(item.stock_value, "CZK")
|
||||
: "0,00 Kč"
|
||||
}
|
||||
color="warning"
|
||||
/>
|
||||
<StatCard
|
||||
label="Pod minimem"
|
||||
value={item.below_minimum ? "Ano" : "Ne"}
|
||||
color={item.below_minimum ? "error" : "info"}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Batches table — only in view mode, for existing items */}
|
||||
{id !== "new" && !editing && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.1 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Dávky (FIFO)
|
||||
</Typography>
|
||||
<DataTable<Batch>
|
||||
columns={batchColumns}
|
||||
rows={batches}
|
||||
rowKey={(b) => b.id}
|
||||
empty={<EmptyState title="Zatím žádné dávky" />}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Dávky (FIFO)
|
||||
</Typography>
|
||||
<DataTable<Batch>
|
||||
columns={batchColumns}
|
||||
rows={batches}
|
||||
rowKey={(b) => b.id}
|
||||
empty={<EmptyState title="Zatím žádné dávky" />}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Locations table — only in view mode, for existing items */}
|
||||
{id !== "new" && !editing && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.12 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Umístění
|
||||
</Typography>
|
||||
<DataTable<ItemLocation>
|
||||
columns={locationColumns}
|
||||
rows={locations}
|
||||
rowKey={(l) => l.id}
|
||||
empty={<EmptyState title="Zatím žádná umístění" />}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Umístění
|
||||
</Typography>
|
||||
<DataTable<ItemLocation>
|
||||
columns={locationColumns}
|
||||
rows={locations}
|
||||
rowKey={(l) => l.id}
|
||||
empty={<EmptyState title="Zatím žádná umístění" />}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Delete confirmation */}
|
||||
@@ -675,6 +645,6 @@ export default function WarehouseItemDetail() {
|
||||
confirmVariant="danger"
|
||||
loading={deleteMutation.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
@@ -24,6 +23,7 @@ import {
|
||||
Select,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -153,27 +153,21 @@ export default function WarehouseItems() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Skladové položky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canManage ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/items/new")}
|
||||
>
|
||||
Přidat položku
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Skladové položky"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canManage ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/items/new")}
|
||||
>
|
||||
Přidat položku
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 280px" }}>
|
||||
@@ -243,6 +237,6 @@ export default function WarehouseItems() {
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
TextField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
type DataColumn,
|
||||
@@ -303,7 +304,7 @@ export default function WarehouseLocations() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Umístění skladu"
|
||||
subtitle={subtitle}
|
||||
@@ -401,6 +402,6 @@ export default function WarehouseLocations() {
|
||||
confirmVariant="danger"
|
||||
loading={deleteMutation.isPending}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -26,6 +25,7 @@ import {
|
||||
LoadingState,
|
||||
PageHeader,
|
||||
ConfirmDialog,
|
||||
PageEnter,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -295,53 +295,38 @@ export default function WarehouseReceiptDetail() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title={r.receipt_number || "Nový doklad"}
|
||||
subtitle={r.supplier?.name}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
<StatusChip
|
||||
label={STATUS_LABEL[r.status] ?? r.status}
|
||||
color={STATUS_COLOR[r.status] ?? "default"}
|
||||
/>
|
||||
{canOperate && r.status === "DRAFT" && (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => navigate(`/warehouse/receipts/${r.id}/edit`)}
|
||||
>
|
||||
Upravit
|
||||
</Button>
|
||||
<Button onClick={handleConfirm} disabled={confirming}>
|
||||
{confirming ? "Potvrzování..." : "Potvrdit"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => setCancelConfirm(true)}
|
||||
>
|
||||
Zrušit
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{canOperate && r.status === "CONFIRMED" && (
|
||||
<PageHeader
|
||||
title={r.receipt_number || "Nový doklad"}
|
||||
subtitle={r.supplier?.name}
|
||||
actions={
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={BackIcon}
|
||||
>
|
||||
Zpět
|
||||
</Button>
|
||||
<StatusChip
|
||||
label={STATUS_LABEL[r.status] ?? r.status}
|
||||
color={STATUS_COLOR[r.status] ?? "default"}
|
||||
/>
|
||||
{canOperate && r.status === "DRAFT" && (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => navigate(`/warehouse/receipts/${r.id}/edit`)}
|
||||
>
|
||||
Upravit
|
||||
</Button>
|
||||
<Button onClick={handleConfirm} disabled={confirming}>
|
||||
{confirming ? "Potvrzování..." : "Potvrdit"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
@@ -349,157 +334,148 @@ export default function WarehouseReceiptDetail() {
|
||||
>
|
||||
Zrušit
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Basic info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo dokladu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
</>
|
||||
)}
|
||||
{canOperate && r.status === "CONFIRMED" && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => setCancelConfirm(true)}
|
||||
>
|
||||
{r.receipt_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Dodavatel
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{r.supplier?.name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo dodacího listu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{r.delivery_note_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Datum dodacího listu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(r.delivery_note_date)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Přijal
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{r.received_by_user
|
||||
? `${r.received_by_user.first_name} ${r.received_by_user.last_name}`
|
||||
: "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vytvořeno
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(r.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{r.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{r.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
Zrušit
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Basic info */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo dokladu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{r.receipt_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Dodavatel
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{r.supplier?.name || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Číslo dodacího listu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{r.delivery_note_number || "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Datum dodacího listu
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(r.delivery_note_date)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Přijal
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontFamily: "'DM Mono', Menlo, monospace",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{r.received_by_user
|
||||
? `${r.received_by_user.first_name} ${r.received_by_user.last_name}`
|
||||
: "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Vytvořeno
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
|
||||
>
|
||||
{formatDate(r.created_at)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{r.notes && (
|
||||
<Box sx={{ gridColumn: { sm: "1 / -1" } }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Poznámky
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
|
||||
{r.notes}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Lines table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<WarehouseReceiptItem>
|
||||
columns={itemColumns}
|
||||
rows={items}
|
||||
rowKey={(row) => row.id}
|
||||
empty={<EmptyState title="Žádné řádky" />}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
<DataTable<WarehouseReceiptItem>
|
||||
columns={itemColumns}
|
||||
rows={items}
|
||||
rowKey={(row) => row.id}
|
||||
empty={<EmptyState title="Žádné řádky" />}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Attachments */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.1 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Přílohy
|
||||
</Typography>
|
||||
<DataTable<WarehouseReceiptAttachment>
|
||||
columns={attachmentColumns}
|
||||
rows={attachments}
|
||||
rowKey={(att) => att.id}
|
||||
empty={<EmptyState title="Žádné přílohy" />}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Přílohy
|
||||
</Typography>
|
||||
<DataTable<WarehouseReceiptAttachment>
|
||||
columns={attachmentColumns}
|
||||
rows={attachments}
|
||||
rowKey={(att) => att.id}
|
||||
empty={<EmptyState title="Žádné přílohy" />}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Cancel confirmation dialog */}
|
||||
<ConfirmDialog
|
||||
@@ -512,6 +488,6 @@ export default function WarehouseReceiptDetail() {
|
||||
confirmVariant="danger"
|
||||
loading={cancelling}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useRef, useCallback, useId } from "react";
|
||||
import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -28,6 +27,7 @@ import {
|
||||
DateField,
|
||||
Field,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
} from "../ui";
|
||||
|
||||
interface ReceiptForm {
|
||||
@@ -410,294 +410,266 @@ export default function WarehouseReceiptForm() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<PageEnter>
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
flexWrap: "wrap",
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit příjmový doklad" : "Nový příjmový doklad"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={handleSaveDraft}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "Ukládání..." : "Uložit jako návrh"}
|
||||
</Button>
|
||||
<Button onClick={handleSaveAndConfirm} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Uložit a potvrdit"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</motion.div>
|
||||
|
||||
{/* Header fields */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Dodavatel">
|
||||
<Select
|
||||
value={form.supplier_id === null ? "" : String(form.supplier_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
supplier_id: val ? Number(val) : null,
|
||||
}))
|
||||
}
|
||||
options={supplierOptions}
|
||||
/>
|
||||
</Field>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
|
||||
<IconButton
|
||||
component={RouterLink}
|
||||
to="/warehouse/receipts"
|
||||
title="Zpět na seznam"
|
||||
aria-label="Zpět na seznam"
|
||||
>
|
||||
<Field label="Číslo dodacího listu">
|
||||
<TextField
|
||||
value={form.delivery_note_number}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_number: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Např. DL-2024-001"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum dodacího listu">
|
||||
<DateField
|
||||
value={form.delivery_note_date}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_date: val,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({ ...prev, notes: e.target.value }))
|
||||
}
|
||||
placeholder="Volitelné poznámky"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Lines */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.08 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
{BackIcon}
|
||||
</IconButton>
|
||||
<Typography variant="h4">
|
||||
{isEdit ? "Upravit příjmový doklad" : "Nový příjmový doklad"}
|
||||
</Typography>
|
||||
{errors.items && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="error"
|
||||
sx={{ display: "block", mb: 1.5 }}
|
||||
>
|
||||
{errors.items}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(180px, 2fr) 110px 110px minmax(140px, 1.2fr) minmax(140px, 1.5fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.quantity || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "quantity", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Množství"
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.unit_price || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(
|
||||
index,
|
||||
"unit_price",
|
||||
parseDecimal(e.target.value),
|
||||
)
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.01,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Cena za kus, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Cena/ks"
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
value={item.notes ?? ""}
|
||||
onChange={(e) => updateItem(index, "notes", e.target.value)}
|
||||
placeholder="Poznámka"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
onClick={handleSaveDraft}
|
||||
disabled={saving}
|
||||
>
|
||||
Přidat položku
|
||||
{saving ? "Ukládání..." : "Uložit jako návrh"}
|
||||
</Button>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Button onClick={handleSaveAndConfirm} disabled={saving}>
|
||||
{saving ? "Ukládání..." : "Uložit a potvrdit"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Header fields */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Základní údaje
|
||||
</Typography>
|
||||
<Field label="Dodavatel">
|
||||
<Select
|
||||
value={form.supplier_id === null ? "" : String(form.supplier_id)}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
supplier_id: val ? Number(val) : null,
|
||||
}))
|
||||
}
|
||||
options={supplierOptions}
|
||||
/>
|
||||
</Field>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Field label="Číslo dodacího listu">
|
||||
<TextField
|
||||
value={form.delivery_note_number}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_number: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Např. DL-2024-001"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Datum dodacího listu">
|
||||
<DateField
|
||||
value={form.delivery_note_date}
|
||||
onChange={(val) =>
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
delivery_note_date: val,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Box>
|
||||
<Field label="Poznámky">
|
||||
<TextField
|
||||
multiline
|
||||
minRows={3}
|
||||
value={form.notes}
|
||||
onChange={(e) =>
|
||||
setForm((prev) => ({ ...prev, notes: e.target.value }))
|
||||
}
|
||||
placeholder="Volitelné poznámky"
|
||||
/>
|
||||
</Field>
|
||||
</Card>
|
||||
|
||||
{/* Lines */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Položky
|
||||
</Typography>
|
||||
{errors.items && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="error"
|
||||
sx={{ display: "block", mb: 1.5 }}
|
||||
>
|
||||
{errors.items}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{items.map((item, index) => (
|
||||
<Box
|
||||
key={item.key}
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
md: "minmax(180px, 2fr) 110px 110px minmax(140px, 1.2fr) minmax(140px, 1.5fr) auto",
|
||||
},
|
||||
gap: 1,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
<ItemPicker
|
||||
value={item.item_id}
|
||||
itemName={item.item_name}
|
||||
onChange={(id) => updateItem(index, "item_id", id)}
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.quantity || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "quantity", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.001,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Množství, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Množství"
|
||||
/>
|
||||
<TextField
|
||||
type="number"
|
||||
value={item.unit_price || ""}
|
||||
onChange={(e) =>
|
||||
updateItem(index, "unit_price", parseDecimal(e.target.value))
|
||||
}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
step: 0.01,
|
||||
inputMode: "decimal",
|
||||
pattern: "[0-9]+([\\.,][0-9]+)?",
|
||||
"aria-label": `Cena za kus, řádek ${index + 1}`,
|
||||
}}
|
||||
placeholder="Cena/ks"
|
||||
/>
|
||||
<Select
|
||||
value={
|
||||
item.location_id === null ? "" : String(item.location_id)
|
||||
}
|
||||
onChange={(val) =>
|
||||
updateItem(index, "location_id", val ? Number(val) : null)
|
||||
}
|
||||
options={locationOptions}
|
||||
/>
|
||||
<TextField
|
||||
value={item.notes ?? ""}
|
||||
onChange={(e) => updateItem(index, "notes", e.target.value)}
|
||||
placeholder="Poznámka"
|
||||
/>
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => removeItem(index)}
|
||||
title="Odebrat řádek"
|
||||
aria-label="Odebrat řádek"
|
||||
sx={{ justifySelf: { xs: "start", md: "center" } }}
|
||||
>
|
||||
{RemoveIcon}
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={PlusIcon}
|
||||
onClick={addItem}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
Přidat položku
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
{/* File upload — only in edit mode for existing receipts */}
|
||||
{isEdit && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.1 }}
|
||||
>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Přílohy
|
||||
</Typography>
|
||||
<Box
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onClick={() => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.multiple = true;
|
||||
input.onchange = () => {
|
||||
if (input.files && input.files.length > 0) {
|
||||
handleFileUpload(input.files);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 1,
|
||||
p: 4,
|
||||
border: "2px dashed",
|
||||
borderColor: "divider",
|
||||
borderRadius: 1,
|
||||
color: "text.secondary",
|
||||
cursor: "pointer",
|
||||
opacity: uploadingFiles ? 0.6 : 1,
|
||||
transition: "border-color .2s, background-color .2s",
|
||||
"&:hover": {
|
||||
borderColor: "primary.main",
|
||||
bgcolor: "action.hover",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{uploadingFiles ? (
|
||||
<>
|
||||
<CircularProgress size={28} />
|
||||
<Typography variant="body2">Nahrávání...</Typography>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{UploadIcon}
|
||||
<Typography variant="body2">
|
||||
Přetáhněte soubory sem nebo klikněte pro výběr
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Dodací listy, faktury a další dokumenty
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
Přílohy
|
||||
</Typography>
|
||||
<Box
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onClick={() => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.multiple = true;
|
||||
input.onchange = () => {
|
||||
if (input.files && input.files.length > 0) {
|
||||
handleFileUpload(input.files);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 1,
|
||||
p: 4,
|
||||
border: "2px dashed",
|
||||
borderColor: "divider",
|
||||
borderRadius: 1,
|
||||
color: "text.secondary",
|
||||
cursor: "pointer",
|
||||
opacity: uploadingFiles ? 0.6 : 1,
|
||||
transition: "border-color .2s, background-color .2s",
|
||||
"&:hover": {
|
||||
borderColor: "primary.main",
|
||||
bgcolor: "action.hover",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{uploadingFiles ? (
|
||||
<>
|
||||
<CircularProgress size={28} />
|
||||
<Typography variant="body2">Nahrávání...</Typography>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{UploadIcon}
|
||||
<Typography variant="body2">
|
||||
Přetáhněte soubory sem nebo klikněte pro výběr
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Dodací listy, faktury a další dokumenty
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import useDebounce from "../hooks/useDebounce";
|
||||
import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
|
||||
@@ -24,6 +23,7 @@ import {
|
||||
DateField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -165,27 +165,21 @@ export default function WarehouseReceipts() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Příjmové doklady"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canOperate ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/receipts/new")}
|
||||
>
|
||||
Nový doklad
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Příjmové doklady"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canOperate ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => navigate("/warehouse/receipts/new")}
|
||||
>
|
||||
Nový doklad
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "1 1 220px" }}>
|
||||
@@ -291,6 +285,6 @@ export default function WarehouseReceipts() {
|
||||
onChange={setPage}
|
||||
/>
|
||||
</Card>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import { projectListOptions } from "../lib/queries/projects";
|
||||
import {
|
||||
@@ -21,6 +20,7 @@ import {
|
||||
DateField,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -89,26 +89,14 @@ export default function WarehouseReports() {
|
||||
if (!hasPermission("warehouse.view")) return <Forbidden />;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader title="Skladové reporty" />
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader title="Skladové reporty" />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, delay: 0.06 }}
|
||||
>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(v) => setActiveTab(v as TabId)}
|
||||
tabs={TABS}
|
||||
/>
|
||||
</motion.div>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(v) => setActiveTab(v as TabId)}
|
||||
tabs={TABS}
|
||||
/>
|
||||
|
||||
<TabPanel value="stock-status" current={activeTab}>
|
||||
<StockStatusTab categoryId={categoryId} setCategoryId={setCategoryId} />
|
||||
@@ -139,7 +127,7 @@ export default function WarehouseReports() {
|
||||
<TabPanel value="below-minimum" current={activeTab}>
|
||||
<BelowMinimumTab />
|
||||
</TabPanel>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useAlert } from "../context/AlertContext";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { motion } from "framer-motion";
|
||||
import Box from "@mui/material/Box";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
|
||||
@@ -29,6 +28,7 @@ import {
|
||||
Select,
|
||||
StatusChip,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
FilterBar,
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
@@ -325,27 +325,21 @@ export default function WarehouseReservations() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<PageHeader
|
||||
title="Rezervace"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canOperate ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
>
|
||||
Nová rezervace
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
</motion.div>
|
||||
<PageEnter>
|
||||
<PageHeader
|
||||
title="Rezervace"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
canOperate ? (
|
||||
<Button
|
||||
startIcon={PlusIcon}
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
>
|
||||
Nová rezervace
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterBar>
|
||||
<Box sx={{ flex: "0 0 160px" }}>
|
||||
@@ -490,6 +484,6 @@ export default function WarehouseReservations() {
|
||||
confirmVariant="danger"
|
||||
loading={cancelling}
|
||||
/>
|
||||
</Box>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user