fix: opravy generování QR kódů, zobrazení také na stránce objednání

client/src/components/PendingPayments.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Button } from 'react-bootstrap';
+import { PendingQr, dismissQr } from '../../../types';
+import { formatDateString } from '../Utils';
+import ConfirmModal from './modals/ConfirmModal';
+
+type Props = {
+    pendingQrs?: PendingQr[];
+    login?: string;
+    // Zavolá se po úspěšném potvrzení platby, aby si rodič mohl znovu načíst data
+    onDismissed?: () => void | Promise<void>;
+};
+
+// Sekce "Nevyřízené platby" – zobrazí QR kódy neuhrazených plateb přihlášeného uživatele
+// včetně tlačítka "Zaplatil jsem" a potvrzovacího dialogu. Sdíleno hlavní stránkou i stránkou objednávek.
+export default function PendingPayments({ pendingQrs, login, onDismissed }: Readonly<Props>) {
+    const [dismissQrId, setDismissQrId] = useState<string | null>(null);
+
+    if (!pendingQrs || pendingQrs.length === 0) return null;
+
+    return (
+        <>
+            <div className='pizza-section fade-in mt-4'>
+                <h3>Nevyřízené platby</h3>
+                <p>Máte neuhrazené platby.</p>
+                {pendingQrs.map(qr => (
+                    <div key={qr.id} className='qr-code mb-3'>
+                        <p>
+                            <strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice / 100} Kč)
+                            {qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
+                        </p>
+                        <img src={`/api/qr?login=${login}&id=${qr.id}`} alt='QR kód' />
+                        <div className='mt-2'>
+                            <Button variant="success" onClick={() => setDismissQrId(qr.id)}>
+                                Zaplatil jsem
+                            </Button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <ConfirmModal
+                isOpen={dismissQrId !== null}
+                title="Potvrzení platby"
+                message="Opravdu jste zaplatili? QR kód bude odstraněn."
+                confirmLabel="Zaplatil jsem"
+                confirmVariant="success"
+                onClose={() => setDismissQrId(null)}
+                onConfirm={async () => {
+                    if (!dismissQrId) return;
+                    const id = dismissQrId;
+                    setDismissQrId(null);
+                    await dismissQr({ body: { id } });
+                    await onDismissed?.();
+                }}
+            />
+        </>
+    );
+}

client/src/components/modals/PayForGroupModal.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
 import { generateQr, OrderGroup, OrderGroupMember, QrRecipient } from "../../../../types";
+import { sanitizeQrMessage } from "../../Utils";
 
 type Props = {
     isOpen: boolean;
@@ -77,7 +78,7 @@ export default function PayForGroupModal({ isOpen, onClose, onSuccess, group, pa
             const note = d.member.note?.trim();
             recipients.push({
                 login: d.login,
-                purpose: note ? note.replace(/[^\x00-\xff*]/g, '').replace(/\*/g, '').substring(0, 60) : `Objednávka ${group.name}`.substring(0, 60),
+                purpose: sanitizeQrMessage(note || `Objednávka ${group.name}`),
                 amount: total,
             });
         }