diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx index 56205cb..33ab72e 100644 --- a/src/admin/pages/InvoiceDetail.tsx +++ b/src/admin/pages/InvoiceDetail.tsx @@ -9,6 +9,8 @@ import { useQuery } from "@tanstack/react-query"; import DOMPurify from "dompurify"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; +import useMediaQuery from "@mui/material/useMediaQuery"; +import { useTheme } from "@mui/material/styles"; import IconButton from "@mui/material/IconButton"; import CircularProgress from "@mui/material/CircularProgress"; import Table from "@mui/material/Table"; @@ -200,6 +202,8 @@ function SortableInvoiceRow({ transition, isDragging, } = useSortable({ id: item._key }); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const style = { transform: CSS.Transform.toString(transform), transition, @@ -210,6 +214,132 @@ function SortableInvoiceRow({ }; const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0); + + if (isMobile) { + return ( + + + + {DragIcon} + + + Položka {index + 1} + + + {canDelete && ( + onRemove(index)} + title="Odebrat" + aria-label="Odebrat" + > + {RemoveIcon} + + )} + + onUpdate(index, "description", e.target.value)} + placeholder="Popis položky..." + /> + onUpdate(index, "item_description", e.target.value)} + placeholder="Volitelný" + /> + + + onUpdate(index, "quantity", Number(e.target.value)) + } + slotProps={{ htmlInput: { min: "0", step: "any" } }} + /> + onUpdate(index, "unit", e.target.value)} + placeholder="ks" + /> + + onUpdate(index, "unit_price", Number(e.target.value)) + } + slotProps={{ htmlInput: { step: "any" } }} + /> + {apply_vat && ( +