feat: vylepšení objednávek

client/src/components/modals/EditGroupFeesModal.tsx

@@ -0,0 +1,192 @@
+import { useState, useEffect } from "react";
+import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
+import { updateGroupFees, OrderGroup, OrderGroupMember } from "../../../../types";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    group: OrderGroup;
+    onSaved: (data: any) => void;
+};
+
+function parseNum(s: string): number {
+    const n = parseFloat(s.replace(',', '.'));
+    return isNaN(n) || n < 0 ? 0 : Math.round(n * 100) / 100;
+}
+
+function computeMemberTotal(member: OrderGroupMember, feeShare: number, discountType: string, discountValue: number, memberCount: number): number {
+    const base = member.amount ?? 0;
+    const surcharge = member.surchargeAmount ?? 0;
+    const discount = discountType === 'percent'
+        ? Math.round((base + surcharge) * discountValue / 100 * 100) / 100
+        : Math.round(discountValue / memberCount * 100) / 100;
+    return Math.round((base + surcharge + feeShare - discount) * 100) / 100;
+}
+
+export default function EditGroupFeesModal({ isOpen, onClose, group, onSaved }: Readonly<Props>) {
+    const [fees, setFees] = useState('');
+    const [shipping, setShipping] = useState('');
+    const [tip, setTip] = useState('');
+    const [discountType, setDiscountType] = useState<'percent' | 'fixed'>('percent');
+    const [discountValue, setDiscountValue] = useState('');
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        setFees(group.fees ? String(group.fees) : '');
+        setShipping(group.shipping ? String(group.shipping) : '');
+        setTip(group.tip ? String(group.tip) : '');
+        setDiscountType((group.discountType as 'percent' | 'fixed') ?? 'percent');
+        setDiscountValue(group.discountValue ? String(group.discountValue) : '');
+        setError(null);
+    }, [isOpen, group]);
+
+    const memberEntries = Object.entries(group.members) as [string, OrderGroupMember][];
+    const memberCount = memberEntries.length;
+
+    const feesNum = parseNum(fees);
+    const shippingNum = parseNum(shipping);
+    const tipNum = parseNum(tip);
+    const discountNum = parseNum(discountValue);
+    const totalFees = feesNum + shippingNum + tipNum;
+    const feeShare = memberCount > 0 ? Math.round(totalFees / memberCount * 100) / 100 : 0;
+
+    const handleSave = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            const body: Record<string, any> = { id: group.id };
+            body.fees = feesNum;
+            body.shipping = shippingNum;
+            body.tip = tipNum;
+            if (discountNum > 0) {
+                body.discountType = discountType;
+                body.discountValue = discountNum;
+            } else {
+                body.discountType = '';
+                body.discountValue = 0;
+            }
+            const res = await updateGroupFees({ body });
+            if (res.error) {
+                setError((res.error as any).error || 'Nastala chyba');
+            } else {
+                onSaved(res.data);
+                onClose();
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Poplatky skupiny — {group.name}</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {error && (
+                    <Alert variant="danger" onClose={() => setError(null)} dismissible>{error}</Alert>
+                )}
+
+                <div className="d-flex gap-3 flex-wrap mb-3">
+                    <Form.Group>
+                        <Form.Label>Poplatky (Kč)</Form.Label>
+                        <Form.Control
+                            type="number" min={0} step={0.01}
+                            value={fees} onChange={e => setFees(e.target.value)}
+                            placeholder="0" style={{ width: 110 }}
+                            onKeyDown={e => e.stopPropagation()}
+                        />
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>Doprava (Kč)</Form.Label>
+                        <Form.Control
+                            type="number" min={0} step={0.01}
+                            value={shipping} onChange={e => setShipping(e.target.value)}
+                            placeholder="0" style={{ width: 110 }}
+                            onKeyDown={e => e.stopPropagation()}
+                        />
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>Spropitné (Kč)</Form.Label>
+                        <Form.Control
+                            type="number" min={0} step={0.01}
+                            value={tip} onChange={e => setTip(e.target.value)}
+                            placeholder="0" style={{ width: 110 }}
+                            onKeyDown={e => e.stopPropagation()}
+                        />
+                    </Form.Group>
+                </div>
+
+                <div className="d-flex gap-3 align-items-end flex-wrap mb-3">
+                    <Form.Group>
+                        <Form.Label>Sleva</Form.Label>
+                        <div className="d-flex gap-2 align-items-center">
+                            <Form.Select
+                                value={discountType}
+                                onChange={e => setDiscountType(e.target.value as 'percent' | 'fixed')}
+                                style={{ width: 160 }}
+                            >
+                                <option value="percent">Procentuální (%)</option>
+                                <option value="fixed">Pevná částka (Kč)</option>
+                            </Form.Select>
+                            <Form.Control
+                                type="number" min={0} step={discountType === 'percent' ? 1 : 0.01}
+                                value={discountValue} onChange={e => setDiscountValue(e.target.value)}
+                                placeholder="0" style={{ width: 100 }}
+                                onKeyDown={e => e.stopPropagation()}
+                            />
+                            <span className="text-muted">{discountType === 'percent' ? '%' : 'Kč'}</span>
+                        </div>
+                    </Form.Group>
+                </div>
+
+                <hr />
+                <h6>Náhled celkových částek ({memberCount} členů, {feeShare > 0 ? `poplatek ${feeShare} Kč/os.` : 'bez poplatku'})</h6>
+                <Table size="sm" bordered>
+                    <thead>
+                        <tr>
+                            <th>Člen</th>
+                            <th className="text-end">Základ</th>
+                            <th className="text-end">Příplatek</th>
+                            <th className="text-end">Poplatek</th>
+                            <th className="text-end">Sleva</th>
+                            <th className="text-end fw-bold">Celkem</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {memberEntries.map(([login, member]) => {
+                            const base = member.amount ?? 0;
+                            const surcharge = member.surchargeAmount ?? 0;
+                            const discount = discountNum > 0
+                                ? (discountType === 'percent'
+                                    ? Math.round((base + surcharge) * discountNum / 100 * 100) / 100
+                                    : Math.round(discountNum / memberCount * 100) / 100)
+                                : 0;
+                            const total = computeMemberTotal(member, feeShare, discountType, discountNum, memberCount);
+                            return (
+                                <tr key={login}>
+                                    <td><strong>{login}</strong></td>
+                                    <td className="text-end">{base > 0 ? `${base} Kč` : '—'}</td>
+                                    <td className="text-end">{surcharge > 0 ? `${surcharge} Kč` : '—'}</td>
+                                    <td className="text-end">{feeShare > 0 ? `${feeShare} Kč` : '—'}</td>
+                                    <td className="text-end text-danger">{discount > 0 ? `-${discount} Kč` : '—'}</td>
+                                    <td className="text-end fw-bold">{total > 0 ? `${total} Kč` : '—'}</td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </Table>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose} disabled={loading}>Storno</Button>
+                <Button variant="primary" onClick={handleSave} disabled={loading}>
+                    {loading ? 'Ukládám...' : 'Uložit'}
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

client/src/components/modals/PayForGroupModal.tsx

@@ -1,15 +1,7 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
 import { generateQr, OrderGroup, OrderGroupMember, QrRecipient } from "../../../../types";
 
-type DinerEntry = {
-    login: string;
-    baseAmount: number;
-    surchargeText: string;
-    surchargeAmount: string;
-    included: boolean;
-};
-
 type Props = {
     isOpen: boolean;
     onClose: () => void;
@@ -20,22 +12,14 @@ type Props = {
     groupId?: string;
 };
 
-function sanitizeAmount(value: string): string {
-    return value.replace(/[^0-9.,]/g, '').replace(',', '.');
-}
-
-function parseAmount(s: string): number | null {
-    if (!s || s.trim().length === 0) return null;
-    const n = parseFloat(s);
-    if (isNaN(n) || n < 0) return null;
-    const parts = s.split('.');
-    if (parts.length === 2 && parts[1].length > 2) return null;
-    return Math.round(n * 100) / 100;
-}
+type DinerEntry = {
+    login: string;
+    member: OrderGroupMember;
+    included: boolean;
+};
 
 export default function PayForGroupModal({ isOpen, onClose, group, payerLogin, bankAccount, bankAccountHolder, groupId }: Readonly<Props>) {
     const [diners, setDiners] = useState<DinerEntry[]>([]);
-    const [tipTotal, setTipTotal] = useState('');
     const [error, setError] = useState<string | null>(null);
     const [loading, setLoading] = useState(false);
     const [success, setSuccess] = useState(false);
@@ -44,49 +28,39 @@ export default function PayForGroupModal({ isOpen, onClose, group, payerLogin, b
         if (!isOpen) return;
         const entries: DinerEntry[] = (Object.entries(group.members) as [string, OrderGroupMember][]).map(([login, member]) => ({
             login,
-            baseAmount: member.amount ?? 0,
-            surchargeText: member.surchargeText ?? '',
-            surchargeAmount: member.surchargeAmount != null ? String(member.surchargeAmount) : '',
+            member,
             included: login !== payerLogin,
         }));
         setDiners(entries);
-        setTipTotal('');
         setError(null);
         setSuccess(false);
     }, [isOpen, group, payerLogin]);
 
-    const includedNonPayers = diners.filter(d => d.included && d.login !== payerLogin);
+    const memberCount = diners.length;
+    const fees = group.fees ?? 0;
+    const shipping = group.shipping ?? 0;
+    const tip = group.tip ?? 0;
+    const totalFees = fees + shipping + tip;
+    const feeShare = memberCount > 0 ? Math.round(totalFees / memberCount * 100) / 100 : 0;
 
-    const tipPerPerson = (() => {
-        if (includedNonPayers.length === 0) return 0;
-        const tip = parseAmount(tipTotal);
-        if (tip === null || tip === 0) return 0;
-        const totalPeople = includedNonPayers.length + 1; // +1 for payer
-        return Math.round((tip / totalPeople) * 100) / 100;
-    })();
-    const payerTipShare = (() => {
-        const tip = parseAmount(tipTotal);
-        if (!tip) return 0;
-        return Math.round((tip - tipPerPerson * includedNonPayers.length) * 100) / 100;
-    })();
-
-    const getTotal = (d: DinerEntry): number => {
-        const surcharge = parseAmount(d.surchargeAmount) ?? 0;
-        const tip = d.login === payerLogin ? payerTipShare : tipPerPerson;
-        return Math.round((d.baseAmount + surcharge + tip) * 100) / 100;
+    const getMemberTotal = (entry: DinerEntry): number => {
+        const base = entry.member.amount ?? 0;
+        const surcharge = entry.member.surchargeAmount ?? 0;
+        const discountType = group.discountType;
+        const discountValue = group.discountValue ?? 0;
+        const discount = discountValue > 0
+            ? (discountType === 'percent'
+                ? Math.round((base + surcharge) * discountValue / 100 * 100) / 100
+                : Math.round(discountValue / memberCount * 100) / 100)
+            : 0;
+        return Math.round((base + surcharge + feeShare - discount) * 100) / 100;
     };
 
-    const handleInclude = useCallback((login: string, checked: boolean) => {
+    const includedNonPayers = diners.filter(d => d.included && d.login !== payerLogin);
+
+    const handleInclude = (login: string, checked: boolean) => {
         setDiners(prev => prev.map(d => d.login === login ? { ...d, included: checked } : d));
-    }, []);
-
-    const handleSurchargeText = useCallback((login: string, value: string) => {
-        setDiners(prev => prev.map(d => d.login === login ? { ...d, surchargeText: value } : d));
-    }, []);
-
-    const handleSurchargeAmount = useCallback((login: string, value: string) => {
-        setDiners(prev => prev.map(d => d.login === login ? { ...d, surchargeAmount: sanitizeAmount(value) } : d));
-    }, []);
+    };
 
     const handleGenerate = async () => {
         setError(null);
@@ -94,7 +68,7 @@ export default function PayForGroupModal({ isOpen, onClose, group, payerLogin, b
 
         for (const d of diners) {
             if (!d.included || d.login === payerLogin) continue;
-            const total = getTotal(d);
+            const total = getMemberTotal(d);
             if (total <= 0) {
                 setError(`Celková částka pro ${d.login} musí být kladná`);
                 return;
@@ -134,10 +108,12 @@ export default function PayForGroupModal({ isOpen, onClose, group, payerLogin, b
         }
     };
 
+    const hasFees = totalFees > 0;
+
     return (
         <Modal show={isOpen} onHide={onClose} size="lg">
             <Modal.Header closeButton>
-                <Modal.Title><h2>Zaplatit za skupinu — {group.name}</h2></Modal.Title>
+                <Modal.Title><h2>Generovat QR — {group.name}</h2></Modal.Title>
             </Modal.Header>
             <Modal.Body>
                 {success ? (
@@ -146,7 +122,7 @@ export default function PayForGroupModal({ isOpen, onClose, group, payerLogin, b
                     </Alert>
                 ) : (
                     <>
-                        <p>Zaplatili jste za skupinu. Nastavte příplatky a společné poplatky, poté vygenerujte QR kódy pro ostatní.</p>
+                        <p>Zaplatili jste za skupinu. Vyberte, komu vygenerovat QR kód k úhradě.</p>
 
                         {error && (
                             <Alert variant="danger" onClose={() => setError(null)} dismissible>
@@ -154,21 +130,36 @@ export default function PayForGroupModal({ isOpen, onClose, group, payerLogin, b
                             </Alert>
                         )}
 
+                        {hasFees && (
+                            <div className="d-flex gap-3 mb-2 text-muted" style={{ fontSize: '0.9em' }}>
+                                {fees > 0 && <span>Poplatky: <strong>{fees} Kč</strong></span>}
+                                {shipping > 0 && <span>Doprava: <strong>{shipping} Kč</strong></span>}
+                                {tip > 0 && <span>Spropitné: <strong>{tip} Kč</strong></span>}
+                                <span>→ {feeShare} Kč/os.</span>
+                            </div>
+                        )}
+                        {group.discountValue != null && group.discountValue > 0 && (
+                            <div className="mb-2 text-success" style={{ fontSize: '0.9em' }}>
+                                Sleva: {group.discountType === 'percent' ? `${group.discountValue}%` : `${group.discountValue} Kč`}
+                            </div>
+                        )}
+
                         <Table striped bordered hover responsive size="sm">
                             <thead>
                                 <tr>
                                     <th style={{ width: 40 }}></th>
                                     <th>Člen</th>
-                                    <th style={{ width: 90 }}>Základ (Kč)</th>
-                                    <th style={{ width: 220 }}>Příplatek</th>
-                                    <th style={{ width: 90 }}>Poplatek</th>
-                                    <th style={{ width: 90 }}>Celkem</th>
+                                    <th style={{ width: 90 }} className="text-end">Základ</th>
+                                    <th style={{ width: 90 }} className="text-end">Příplatek</th>
+                                    {hasFees && <th style={{ width: 90 }} className="text-end">Poplatek</th>}
+                                    <th style={{ width: 90 }} className="text-end fw-bold">Celkem</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {diners.map(d => {
                                     const isPayer = d.login === payerLogin;
-                                    const total = getTotal(d);
+                                    const total = getMemberTotal(d);
+                                    const surcharge = d.member.surchargeAmount ?? 0;
                                     return (
                                         <tr key={d.login} className={!d.included && !isPayer ? 'text-muted' : ''}>
                                             <td className="text-center">
@@ -182,74 +173,39 @@ export default function PayForGroupModal({ isOpen, onClose, group, payerLogin, b
                                                     />
                                                 )}
                                             </td>
-                                            <td><strong>{d.login}</strong></td>
-                                            <td className="text-end">
-                                                {d.baseAmount > 0 ? `${d.baseAmount} Kč` : <span className="text-muted">—</span>}
-                                            </td>
                                             <td>
-                                                <div className="d-flex gap-1">
-                                                    <Form.Control
-                                                        type="text"
-                                                        placeholder="popis"
-                                                        value={d.surchargeText}
-                                                        onChange={e => handleSurchargeText(d.login, e.target.value)}
-                                                        disabled={!isPayer && !d.included}
-                                                        size="sm"
-                                                        onKeyDown={e => e.stopPropagation()}
-                                                    />
-                                                    <Form.Control
-                                                        type="text"
-                                                        placeholder="Kč"
-                                                        value={d.surchargeAmount}
-                                                        onChange={e => handleSurchargeAmount(d.login, e.target.value)}
-                                                        disabled={!isPayer && !d.included}
-                                                        size="sm"
-                                                        style={{ width: 70 }}
-                                                        onKeyDown={e => e.stopPropagation()}
-                                                    />
-                                                </div>
+                                                <strong>{d.login}</strong>
+                                                {d.member.surchargeText && (
+                                                    <small className="text-muted ms-1">({d.member.surchargeText})</small>
+                                                )}
                                             </td>
                                             <td className="text-end">
-                                                {(() => { const s = isPayer ? payerTipShare : tipPerPerson; return s > 0 ? `${s} Kč` : '—'; })()}
+                                                {(d.member.amount ?? 0) > 0 ? `${d.member.amount} Kč` : <span className="text-muted">—</span>}
                                             </td>
+                                            <td className="text-end">
+                                                {surcharge > 0 ? `${surcharge} Kč` : <span className="text-muted">—</span>}
+                                            </td>
+                                            {hasFees && (
+                                                <td className="text-end">
+                                                    {feeShare > 0 ? `${feeShare} Kč` : '—'}
+                                                </td>
+                                            )}
                                             <td className="text-end fw-bold">
-                                                {`${total} Kč`}
+                                                {total > 0 ? `${total} Kč` : <span className="text-muted">—</span>}
                                             </td>
                                         </tr>
                                     );
                                 })}
                             </tbody>
                         </Table>
-
-                        <div className="d-flex align-items-center gap-2 mt-2">
-                            <label className="mb-0 text-nowrap">Poplatky celkem (Kč):</label>
-                            <Form.Control
-                                type="text"
-                                placeholder="0"
-                                value={tipTotal}
-                                onChange={e => setTipTotal(sanitizeAmount(e.target.value))}
-                                size="sm"
-                                style={{ width: 100 }}
-                                onKeyDown={e => e.stopPropagation()}
-                            />
-                            <small className="text-muted">
-                                {includedNonPayers.length > 0 && tipPerPerson > 0
-                                    ? `(${tipPerPerson} Kč / osoba)`
-                                    : ''}
-                            </small>
-                        </div>
                     </>
                 )}
             </Modal.Body>
             <Modal.Footer>
                 {!success && (
                     <>
-                        <span className="me-auto text-muted">
-                            Příjemci: {includedNonPayers.length}
-                        </span>
-                        <Button variant="secondary" onClick={onClose} disabled={loading}>
-                            Storno
-                        </Button>
+                        <span className="me-auto text-muted">Příjemci: {includedNonPayers.length}</span>
+                        <Button variant="secondary" onClick={onClose} disabled={loading}>Storno</Button>
                         <Button
                             variant="primary"
                             onClick={handleGenerate}