feat: podpora ručního generování QR kódů pro platby

client/src/App.tsx

@@ -15,7 +15,7 @@ import { useSettings } from './context/settings';
 import Footer from './components/Footer';
 import { faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import Loader from './components/Loader';
-import { getHumanDateTime, isInTheFuture } from './Utils';
+import { getHumanDateTime, isInTheFuture, formatDateString } from './Utils';
 import NoteModal from './components/modals/NoteModal';
 import { useEasterEgg } from './context/eggs';
 import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime, setBuyer, dismissQr } from '../../types';
@@ -542,7 +542,7 @@ function App() {
   return (
     <div className="app-container">
       {easterEgg && eggImage && <img ref={eggRef} alt='' src={URL.createObjectURL(eggImage)} style={{ position: 'absolute', ...EASTER_EGG_STYLE, ...style, animationDuration: `${duration ?? EASTER_EGG_DEFAULT_DURATION}s` }} />}
-      <Header />
+      <Header choices={data?.choices} dayIndex={dayIndex} />
       <div className='wrapper'>
         {data.todayDayIndex != null && data.todayDayIndex > 4 &&
           <Alert variant="info" className="mb-3">
@@ -821,11 +821,12 @@ function App() {
           {data.pendingQrs && data.pendingQrs.length > 0 &&
             <div className='pizza-section fade-in mt-4'>
               <h3>Nevyřízené platby</h3>
-              <p>Máte neuhrazené QR kódy z předchozích Pizza day.</p>
+              <p>Máte neuhrazené platby z předchozích dní.</p>
               {data.pendingQrs.map(qr => (
                 <div key={qr.date} className='qr-code mb-3'>
                   <p>
-                    <strong>{qr.date}</strong> — {qr.creator} ({qr.totalPrice} Kč)
+                    <strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice} Kč)
+                    {qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
                   </p>
                   <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
                   <div className='mt-2'>