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 && (
+
+
+
+ Celkem
+
+
+ {formatCurrency(lineTotal, currency)}
+
+
+
+ );
+ }
+
return (
@@ -319,6 +449,8 @@ function SortableInvoiceRow({
export default function InvoiceDetail() {
const { id } = useParams<{ id: string }>();
const isEdit = Boolean(id);
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const keyCounterRef = useRef(1);
const emptyItem = useCallback(
@@ -1797,70 +1929,90 @@ export default function InvoiceDetail() {
-
-
+ i._key)}
+ strategy={verticalListSortingStrategy}
>
- i._key)}
- strategy={verticalListSortingStrategy}
- >
-
-
-
-
-
- #
-
- Popis
-
- Množství
-
-
- Jednotka
-
-
- Jedn. cena
-
- {form.apply_vat ? (
-
- DPH
+ {items.map((item, index) => (
+ 1}
+ />
+ ))}
+
+ ) : (
+
+
+
+
+
+
+ #
- ) : null}
-
- Celkem
-
-
-
-
-
- {items.map((item, index) => (
- 1}
- />
- ))}
-
-
-
-
-
+ Popis
+
+ Množství
+
+
+ Jednotka
+
+
+ Jedn. cena
+
+ {form.apply_vat ? (
+
+ DPH
+
+ ) : null}
+
+ Celkem
+
+
+
+
+
+ {items.map((item, index) => (
+ 1}
+ />
+ ))}
+
+
+
+ )}
+
+
{/* Totals */}