fix: opravy zobrazeni sekce vybranych jidel

fix: opravy a ladeni vzhledu a UX
feat: redesign aplikace pomocí claude code
2026-02-04 12:28:26 +01:00 · 2026-02-04 12:06:17 +01:00 · 2026-02-03 10:37:27 +01:00 · 2026-01-30 07:47:03 +01:00 · 2026-01-19 10:18:24 +01:00 · 2026-01-13 16:03:31 +01:00
31 changed files with 3009 additions and 1946 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -10,6 +10,26 @@
  <link rel="apple-touch-icon" href="/logo192.png" />
  <link rel="manifest" href="/manifest.json" />
  <title>Luncher</title>
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('theme_preference');
+        var theme;
+        if (saved === 'dark') {
+          theme = 'dark';
+        } else if (saved === 'light') {
+          theme = 'light';
+        } else {
+          // 'system' nebo neuloženo - použij systémové nastavení
+          theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-bs-theme', theme);
+      } catch (e) {
+        // Fallback pokud localStorage není dostupný
+        document.documentElement.setAttribute('data-bs-theme', 'light');
+      }
+    })();
+  </script>
 </head>

 <body>
--- a/client/package.json
+++ b/client/package.json
@@ -24,6 +24,7 @@
    "react-router": "^7.9.5",
    "react-router-dom": "^7.9.5",
    "react-select-search": "^4.1.6",
+    "react-snow-overlay": "^1.0.14",
    "react-snowfall": "^2.3.0",
    "react-toastify": "^11.0.5",
    "recharts": "^3.4.1",
--- a/client/src/App.scss
+++ b/client/src/App.scss
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -13,15 +13,15 @@ import './App.scss';
 import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import Footer from './components/Footer';
-import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
 import Loader from './components/Loader';
 import { getHumanDateTime, isInTheFuture } 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 } from '../../types';
+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 } from '../../types';
 import { getLunchChoiceName } from './enums';
-import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
-import './FallingLeaves.scss';
+// import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
+// import './FallingLeaves.scss';

 const EVENT_CONNECT = "connect"

@@ -141,16 +141,6 @@ function App() {
    if (!auth?.login) {
      return
    }
-    // TODO tohle občas náhodně nezafunguje, nutno přepsat, viz https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
-    // TODO nutno opravit
-    // if (data?.choices && choiceRef.current) {
-    //   for (let entry of Object.entries(data.choices)) {
-    //     if (entry[1].includes(auth.login)) {
-    //       const value = entry[0] as any as number; // TODO tohle je absurdní
-    //       choiceRef.current.value = Object.values(Locations)[value];
-    //     }
-    //   }
-    // }
  }, [auth, auth?.login, data?.choices])

  // Reference na mojí objednávku
@@ -214,7 +204,7 @@ function App() {

  const doAddClickFoodChoice = async (location: LunchChoice, foodIndex?: number) => {
    if (document.getSelection()?.type !== 'Range') { // pouze pokud se nejedná o výběr textu
-      if (auth?.login) {
+      if (canChangeChoice && auth?.login) {
        await addChoice({ body: { locationKey: location, foodIndex, dayIndex } });
      }
    }
@@ -222,7 +212,7 @@ function App() {

  const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
    const locationKey = event.target.value as LunchChoice;
-    if (auth?.login) {
+    if (canChangeChoice && auth?.login) {
      await addChoice({ body: { locationKey, dayIndex } });
      if (foodChoiceRef.current?.value) {
        foodChoiceRef.current.value = "";
@@ -284,6 +274,12 @@ function App() {
    }
  }

+  const markAsBuyer = async () => {
+    if (auth?.login) {
+      await setBuyer();
+    }
+  }
+
  const pizzaSuggestions = useMemo(() => {
    if (!data?.pizzaList) {
      return [];
@@ -304,7 +300,7 @@ function App() {
  const handlePizzaChange = async (value: SelectedOptionValue | SelectedOptionValue[]) => {
    if (auth?.login && data?.pizzaList) {
      if (typeof value !== 'string') {
-        throw Error('Nepodporovaný typ hodnoty');
+        throw new TypeError('Nepodporovaný typ hodnoty: ' + typeof value);
      }
      const s = value.split('|');
      const pizzaIndex = Number.parseInt(s[0]);
@@ -325,30 +321,6 @@ function App() {
    updatePizzaDayNote({ body: { note: pizzaPoznamkaRef.current?.value } });
  }

-  // const addToCart = async () => {
-  // TODO aktuálně nefunkční - nedokážeme poslat PHPSESSIONID cookie
-  // if (data?.pizzaDay?.orders) {
-  //   for (const order of data?.pizzaDay?.orders) {
-  //     for (const pizzaOrder of order.pizzaList) {
-  //       const url = 'https://www.pizzachefie.cz/pridat.html';
-  //       const payload = new URLSearchParams();
-  //       payload.append('varId', pizzaOrder.varId.toString());
-  //       await fetch(url, {
-  //         method: "POST",
-  //         mode: "no-cors",
-  //         cache: "no-cache",
-  //         credentials: "same-origin",
-  //         headers: {
-  //           'Content-Type': 'application/x-www-form-urlencoded',
-  //         },
-  //         body: payload,
-  //       })
-  //     }
-  //   }
-  //   // TODO otevřít košík v nové záložce
-  // }
-  // }
-
  const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => {
    if (foodChoiceList?.length && choiceRef.current?.value) {
      await changeDepartureTime({ body: { time: event.target.value as DepartureTime, dayIndex } });
@@ -372,41 +344,53 @@ function App() {
  const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => {
    let content;
    if (menu?.closed) {
-      content = <h3>Zavřeno</h3>
+      content = <div className="restaurant-closed">Zavřeno</div>
    } else if (menu?.food?.length && menu.food.length > 0) {
      const hideSoups = settings?.hideSoups;
-      content = <Table striped bordered hover>
-        <tbody style={{ cursor: 'pointer' }}>
+      content = <Table className="food-table">
+        <tbody style={{ cursor: canChangeChoice ? 'pointer' : 'default' }}>
          {menu.food.map((f: Food, index: number) =>
            (!hideSoups || !f.isSoup) &&
            <tr key={f.name} onClick={() => doAddClickFoodChoice(location, index)}>
-              <td>{f.amount}</td>
              <td>
-                {f.name}
-                {f.allergens && f.allergens.length > 0 && (
-                  <> ({f.allergens.map((a, idx) => (
-                    <span key={a}>
-                      <span title={ALLERGENS[a]} style={{ cursor: 'help', textDecoration: 'underline' }} onClick={e => {
-                        e.stopPropagation();
-                        window.open(LINK_ALLERGENS, '_blank');
-                      }}>{a}</span>
-                      {idx < f.allergens!.length - 1 && ','}
+                <div className="food-name">
+                  {f.name}
+                  {f.allergens && f.allergens.length > 0 && (
+                    <span className="food-allergens">
+                      {' '}({f.allergens.map((a, idx) => (
+                        <span key={a}>
+                          <span className="allergen-link" title={ALLERGENS[a]} onClick={e => {
+                            e.stopPropagation();
+                            window.open(LINK_ALLERGENS, '_blank');
+                          }}>{a}</span>
+                          {idx < f.allergens!.length - 1 && ', '}
+                        </span>
+                      ))})
                    </span>
-                  ))})</>
-                )}
+                  )}
+                </div>
+                <div className="food-meta">
+                  {f.amount && f.amount !== '-' && <span className="food-amount">{f.amount}</span>}
+                  <span className="food-price">{f.price}</span>
+                </div>
              </td>
-              <td>{f.price}</td>
            </tr>
          )}
        </tbody>
      </Table>
    } else {
-      content = <h3>Chyba načtení dat</h3>
+      content = <div className="restaurant-error">Chyba načtení dat</div>
    }
-    return <Col md={12} lg={3} className='mt-3'>
-      <h3 style={{ cursor: 'pointer' }} onClick={() => doAddClickFoodChoice(location)}>{getLunchChoiceName(location)}</h3>
-      {menu?.lastUpdate && <small>Poslední aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
-      {content}
+    return <Col md={6} lg={3} className='mt-3'>
+      <div className="restaurant-card">
+        <div className="restaurant-header" style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>
+          <h3>
+            {getLunchChoiceName(location)}
+          </h3>
+          {menu?.lastUpdate && <small>Aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
+        </div>
+        {content}
+      </div>
    </Col>
  }

@@ -449,40 +433,29 @@ function App() {
      <Header />
      <div className='wrapper'>
        {data.isWeekend ? <h4>Užívejte víkend :)</h4> : <>
-          <Alert variant={'primary'}>
-            {/* <img alt="" src='hat.png' style={{ position: "absolute", width: "70px", rotate: "-45deg", left: -40, top: -58 }} />
-            <img alt="" src='snowman.png' style={{ position: "absolute", height: "110px", right: 10, top: 5 }} /> */}
-            Poslední změny:
-            <ul>
-              <li>Zobrazení alergenu při najetí myší a proklik na seznam alergenů</li>
-              <li>Přesun přenačtení menu do samostatného dialogu</li>
-              <li>Podzimní atmosféra</li>
-            </ul>
-          </Alert>
          {dayIndex != null &&
            <div className='day-navigator'>
              <span title='Předchozí den'>
                <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
              </span>
-              <h1 className='title' style={{ color: dayIndex === data.todayDayIndex ? 'black' : 'gray' }}>{data.date}</h1>
+              <h1 className={`title ${dayIndex !== data.todayDayIndex ? 'text-muted' : ''}`}>{data.date}</h1>
              <span title="Následující den">
                <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
              </span>
            </div>
          }
          <Row className='food-tables'>
-            {/* TODO zjednodušit, stačí iterovat klíče typu Restaurant */}
-            {food['SLADOVNICKA'] && renderFoodTable('SLADOVNICKA', food['SLADOVNICKA'])}
-            {food['TECHTOWER'] && renderFoodTable('TECHTOWER', food['TECHTOWER'])}
-            {food['ZASTAVKAUMICHALA'] && renderFoodTable('ZASTAVKAUMICHALA', food['ZASTAVKAUMICHALA'])}
-            {food['SENKSERIKOVA'] && renderFoodTable('SENKSERIKOVA', food['SENKSERIKOVA'])}
+            {Object.keys(Restaurant).map(key => {
+              const locationKey = key as Restaurant;
+              return food[locationKey] && renderFoodTable(locationKey, food[locationKey]);
+            })}
          </Row>
          <div className='content-wrapper'>
            <div className='content'>
-              {canChangeChoice && <>
+              {canChangeChoice && <div className="choice-section fade-in">
                <p>{`Jak to ${dayIndex == null || dayIndex === data.todayDayIndex ? 'dnes' : 'tento den'} vidíš s obědem?`}</p>
                <Form.Select ref={choiceRef} onChange={doAddChoice}>
-                  <option></option>
+                  <option value="">Vyber možnost...</option>
                  {Object.entries(LunchChoice)
                    .filter(entry => {
                      const locationKey = entry[0] as Restaurant;
@@ -492,89 +465,106 @@ function App() {
                </Form.Select>
                <small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small>
                {foodChoiceList && !closed && <>
-                  <p style={{ marginTop: "10px" }}>Na co dobrého? <small>(nepovinné)</small></p>
+                  <p className="mt-3">Na co dobrého? <small style={{ color: 'var(--luncher-text-muted)' }}>(nepovinné)</small></p>
                  <Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}>
-                    <option></option>
+                    <option value="">Vyber jídlo...</option>
                    {foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)}
                  </Form.Select>
                </>}
                {foodChoiceList && !closed && <>
-                  <p style={{ marginTop: "10px" }}>V kolik hodin preferuješ odchod?</p>
+                  <p className="mt-3">V kolik hodin preferuješ odchod?</p>
                  <Form.Select ref={departureChoiceRef} onChange={handleChangeDepartureTime}>
-                    <option></option>
+                    <option value="">Vyber čas...</option>
                    {Object.values(DepartureTime)
                      .filter(time => isInTheFuture(time))
                      .map(time => <option key={time} value={time}>{time}</option>)}
                  </Form.Select>
                </>}
-              </>}
+              </div>}
              {Object.keys(data.choices).length > 0 ?
-                <Table bordered className='mt-5'>
+                <Table className='choices-table mt-4 fade-in'>
                  <tbody>
                    {Object.keys(data.choices).map(key => {
                      const locationKey = key as LunchChoice;
                      const locationName = getLunchChoiceName(locationKey);
                      const loginObject = data.choices[locationKey];
                      if (!loginObject) {
-                        return;
+                        return null;
                      }
                      const locationLoginList = Object.entries(loginObject);
                      const locationPickCount = locationLoginList.length
                      return (
                        <tr key={key}>
-                          {(locationPickCount ?? 0) > 1 ? (
-                            <td>{locationName} ({locationPickCount})</td>
-                          ) : (
-                            <td>{locationName}</td>)}
+                          <td>
+                            {locationName}
+                            {(locationPickCount ?? 0) > 1 && <span className="ms-1">({locationPickCount})</span>}
+                          </td>
                          <td className='p-0'>
-                            <Table>
+                            <Table className="nested-table">
                              <tbody>
-                                {locationLoginList.map((entry: [string, UserLunchChoice], index) => {
+                                {locationLoginList.map((entry: [string, UserLunchChoice]) => {
                                  const login = entry[0];
                                  const userPayload = entry[1];
                                  const userChoices = userPayload?.selectedFoods;
                                  const trusted = userPayload?.trusted || false;
+                                  const isBuyer = userPayload?.isBuyer || false;
                                  return <tr key={entry[0]}>
                                    <td>
-                                      {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
-                                        <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
-                                      </span>}
-                                      {login}
-                                      {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
-                                      {userPayload.note && <span style={{ fontSize: 'small' }}> ({userPayload.note})</span>}
-                                      {login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
-                                        <FontAwesomeIcon onClick={() => {
-                                        copyNote(userPayload.note!);
-                                      }} className='action-icon' icon={faComment} />
-                                      </span>}
-                                      {login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
-                                        <FontAwesomeIcon onClick={() => {
-                                        setNoteModalOpen(true);
-                                      }} className='action-icon' icon={faNoteSticky} />
-                                      </span>}
-                                      {login === auth.login && canChangeChoice && <span title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`}>
-                                        <FontAwesomeIcon onClick={() => {
-                                        doRemoveChoices(key as LunchChoice);
-                                      }} className='action-icon' icon={faTrashCan} />
-                                      </span>}
+                                      <div className="user-row">
+                                        <div className="user-info">
+                                          {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
+                                            <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
+                                          </span>}
+                                          <strong>{login}</strong>
+                                          {userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
+                                          {userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
+                                        </div>
+                                        <div className="user-actions">
+                                          {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            markAsBuyer();
+                                          }} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
+                                          </span>}
+                                          {login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            copyNote(userPayload.note!);
+                                          }} icon={faBasketShopping} className='buyer-icon' />
+                                          </span>}
+                                          {login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            copyNote(userPayload.note!);
+                                          }} className='action-icon' icon={faComment} />
+                                          </span>}
+                                          {login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            setNoteModalOpen(true);
+                                          }} className='action-icon' icon={faNoteSticky} />
+                                          </span>}
+                                          {login === auth.login && canChangeChoice && <span title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`}>
+                                            <FontAwesomeIcon onClick={() => {
+                                            doRemoveChoices(key as LunchChoice);
+                                          }} className='action-icon' icon={faTrashCan} />
+                                          </span>}
+                                        </div>
+                                      </div>
+                                      {userChoices && userChoices.length > 0 && food && (
+                                        <div className="food-choices">
+                                          {userChoices.map(foodIndex => {
+                                            const restaurantKey = key as Restaurant;
+                                            const foodName = food[restaurantKey]?.food?.[foodIndex].name;
+                                            return <div key={foodIndex} className="food-choice-item">
+                                              <span className="food-choice-name">{foodName}</span>
+                                              {login === auth.login && canChangeChoice &&
+                                              <span title={`Odstranit ${foodName}`}>
+                                                <FontAwesomeIcon onClick={() => {
+                                                doRemoveFoodChoice(restaurantKey, foodIndex);
+                                              }} className='action-icon' icon={faTrashCan} />
+                                              </span>}
+                                            </div>
+                                          })}
+                                        </div>
+                                      )}
                                    </td>
-                                    {userChoices?.length && food ? <td>
-                                      <ul>
-                                        {userChoices?.map(foodIndex => {
-                                          const restaurantKey = key as Restaurant;
-                                          const foodName = food[restaurantKey]?.food?.[foodIndex].name;
-                                          return <li key={foodIndex}>
-                                            {foodName}
-                                            {login === auth.login && canChangeChoice &&
-                                            <span title={`Odstranit ${foodName}`}>
-                                              <FontAwesomeIcon onClick={() => {
-                                              doRemoveFoodChoice(restaurantKey, foodIndex);
-                                            }} className='action-icon' icon={faTrashCan} />
-                                            </span>}
-                                          </li>
-                                        })}
-                                      </ul>
-                                    </td> : null}
                                  </tr>
                                }
                                )}
@@ -586,94 +576,94 @@ function App() {
                    )}
                  </tbody>
                </Table>
-                : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
+                : <div className='no-votes mt-4'>Zatím nikdo nehlasoval...</div>
              }
            </div>
            {dayIndex === data.todayDayIndex &&
-              <div className='mt-5'>
+              <div className='pizza-section fade-in'>
                {!data.pizzaDay &&
-                  <div style={{ textAlign: 'center' }}>
+                  <>
+                    <h3>Pizza Day</h3>
                    <p>Pro dnešní den není aktuálně založen Pizza day.</p>
                    {loadingPizzaDay ?
-                      <span>
-                        <FontAwesomeIcon icon={faGear} className='fa-spin' /> Zjišťujeme dostupné pizzy
+                      <span style={{ color: 'var(--luncher-primary)' }}>
+                        <FontAwesomeIcon icon={faGear} className='fa-spin me-2' /> Zjišťujeme dostupné pizzy
                      </span>
                      :
-                      <>
+                      <div>
                        <Button onClick={async () => {
                          setLoadingPizzaDay(true);
                          await createPizzaDay().then(() => setLoadingPizzaDay(false));
                        }}>Založit Pizza day</Button>
-                        <Button onClick={doJdemeObed} style={{ marginLeft: "14px" }}>Jdeme na oběd !</Button>
-                      </>
+                        <Button variant="outline-primary" onClick={doJdemeObed}>Jdeme na oběd!</Button>
+                      </div>
                    }
-                  </div>
+                  </>
                }
                {data.pizzaDay &&
-                  <div>
-                    <div style={{ textAlign: 'center' }}>
-                      <h3>Pizza day</h3>
-                      {
-                        data.pizzaDay.state === PizzaDayState.CREATED &&
-                        <div>
-                          <p>
-                            Pizza Day je založen a spravován uživatelem {data.pizzaDay.creator}.<br />
-                            Můžete upravovat své objednávky.
-                          </p>
-                          {
-                            data.pizzaDay.creator === auth.login &&
-                            <>
-                              <Button className='danger mb-3' title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => {
-                                await deletePizzaDay();
-                              }}>Smazat Pizza day</Button>
-                              <Button className='mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={async () => {
-                                await lockPizzaDay();
-                              }}>Uzamknout</Button>
-                            </>
-                          }
-                        </div>
-                      }
-                      {
-                        data.pizzaDay.state === PizzaDayState.LOCKED &&
-                        <div>
-                          <p>Objednávky jsou uzamčeny uživatelem {data.pizzaDay.creator}</p>
-                          {data.pizzaDay.creator === auth.login &&
-                            <>
-                              <Button className='danger mb-3' title="Umožní znovu editovat objednávky." onClick={async () => {
-                                await unlockPizzaDay();
-                              }}>Odemknout</Button>
-                              <Button className='danger mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => {
-                                await finishOrder();
-                              }}>Objednáno</Button>
-                            </>
-                          }
-                        </div>
-                      }
-                      {
-                        data.pizzaDay.state === PizzaDayState.ORDERED &&
-                        <div>
-                          <p>Pizzy byly objednány uživatelem {data.pizzaDay.creator}</p>
-                          {data.pizzaDay.creator === auth.login &&
-                            <div>
-                              <Button className='danger mb-3' title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => {
-                                await lockPizzaDay();
-                              }}>Vrátit do "uzamčeno"</Button>
-                              <Button className='danger mb-3' style={{ marginLeft: '20px' }} title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
-                                await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } });
-                              }}>Doručeno</Button>
-                            </div>
-                          }
-                        </div>
-                      }
-                      {
-                        data.pizzaDay.state === PizzaDayState.DELIVERED &&
-                        <div>
-                          <p>{`Pizzy byly doručeny.${myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}`}</p>
-                        </div>
-                      }
-                    </div>
+                  <>
+                    <h3>Pizza Day</h3>
+                    {
+                      data.pizzaDay.state === PizzaDayState.CREATED &&
+                      <>
+                        <p>
+                          Pizza Day je založen a spravován uživatelem <strong>{data.pizzaDay.creator}</strong>.<br />
+                          Můžete upravovat své objednávky.
+                        </p>
+                        {
+                          data.pizzaDay.creator === auth.login &&
+                          <div className="mb-4">
+                            <Button variant="danger" title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => {
+                              await deletePizzaDay();
+                            }}>Smazat Pizza day</Button>
+                            <Button title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={async () => {
+                              await lockPizzaDay();
+                            }}>Uzamknout</Button>
+                          </div>
+                        }
+                      </>
+                    }
+                    {
+                      data.pizzaDay.state === PizzaDayState.LOCKED &&
+                      <>
+                        <p>Objednávky jsou uzamčeny uživatelem <strong>{data.pizzaDay.creator}</strong></p>
+                        {data.pizzaDay.creator === auth.login &&
+                          <div className="mb-4">
+                            <Button variant="secondary" title="Umožní znovu editovat objednávky." onClick={async () => {
+                              await unlockPizzaDay();
+                            }}>Odemknout</Button>
+                            <Button title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => {
+                              await finishOrder();
+                            }}>Objednáno</Button>
+                          </div>
+                        }
+                      </>
+                    }
+                    {
+                      data.pizzaDay.state === PizzaDayState.ORDERED &&
+                      <>
+                        <p>Pizzy byly objednány uživatelem <strong>{data.pizzaDay.creator}</strong></p>
+                        {data.pizzaDay.creator === auth.login &&
+                          <div className="mb-4">
+                            <Button variant="secondary" title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => {
+                              await lockPizzaDay();
+                            }}>Vrátit do "uzamčeno"</Button>
+                            <Button title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
+                              await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } });
+                            }}>Doručeno</Button>
+                          </div>
+                        }
+                      </>
+                    }
+                    {
+                      data.pizzaDay.state === PizzaDayState.DELIVERED &&
+                      <p>
+                        Pizzy byly doručeny.
+                        {myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}
+                      </p>
+                    }
                    {data.pizzaDay.state === PizzaDayState.CREATED &&
-                      <div style={{ textAlign: 'center' }}>
+                      <div className="pizza-order-form">
                        <SelectSearch
                          search={true}
                          options={pizzaSuggestions}
@@ -682,39 +672,41 @@ function App() {
                          onBlur={_ => { }}
                          onFocus={_ => { }}
                        />
-                        Poznámka: <input ref={pizzaPoznamkaRef} className='mt-3' type="text" onKeyDown={event => {
-                          if (event.key === 'Enter') {
-                            handlePizzaPoznamkaChange();
-                          }
-                          event.stopPropagation();
-                        }} />
-                        <Button
-                          style={{ marginLeft: '20px' }}
-                          disabled={!myOrder?.pizzaList?.length}
-                          onClick={handlePizzaPoznamkaChange}>
-                          Uložit
-                        </Button>
+                        <div className="d-flex align-items-center gap-2">
+                          <label style={{ color: 'var(--luncher-text-secondary)' }}>Poznámka:</label>
+                          <input ref={pizzaPoznamkaRef} type="text" placeholder="Např. bez cibule" onKeyDown={event => {
+                            if (event.key === 'Enter') {
+                              handlePizzaPoznamkaChange();
+                            }
+                            event.stopPropagation();
+                          }} />
+                          <Button
+                            disabled={!myOrder?.pizzaList?.length}
+                            onClick={handlePizzaPoznamkaChange}>
+                            Uložit
+                          </Button>
+                        </div>
                      </div>
                    }
                    <PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
                    {
-                      data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr ?
-                        <div className='qr-code'>
-                          <h3>QR platba</h3>
-                          <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
-                        </div> : null
+                      data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr &&
+                      <div className='qr-code'>
+                        <h3>QR platba</h3>
+                        <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
+                      </div>
                    }
-                  </div>
+                  </>
                }
              </div>
            }
          </div>
        </> || "Jejda, něco se nám nepovedlo :("}
      </div>
-      <FallingLeaves
+      {/* <FallingLeaves
        numLeaves={LEAF_PRESETS.NORMAL}
        leafVariants={LEAF_COLOR_THEMES.AUTUMN}
-      />
+      /> */}
      <Footer />
      <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
    </div>
--- a/client/src/AppRoutes.tsx
+++ b/client/src/AppRoutes.tsx
@@ -1,6 +1,7 @@
 import { Routes, Route } from "react-router-dom";
 import { ProvideSettings } from "./context/settings";
 // import Snowfall from "react-snowfall";
+import { SnowOverlay } from 'react-snow-overlay';
 import { ToastContainer } from "react-toastify";
 import { SocketContext, socket } from "./context/socket";
 import StatsPage from "./pages/StatsPage";
@@ -22,6 +23,7 @@ export default function AppRoutes() {
                                width: '100vw',
                                height: '100vh'
                            }} /> */}
+                            <SnowOverlay color={'rgba(240, 240, 240, 0.9)'} disabledOnSingleCpuDevices={true} />
                            <App />
                        </>
                        <ToastContainer />
--- a/client/src/Login.css
+++ b/client/src/Login.css
@@ -1,13 +1,89 @@
-.login {
-  height: 100%;
+.login-page {
+  min-height: 100vh;
  display: flex;
-  flex-direction: column;
-  text-align: center;
+  align-items: center;
  justify-content: center;
+  background: var(--luncher-bg);
+  padding: 24px;
 }

-.login-inner {
+.login-card {
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-xl);
+  box-shadow: var(--luncher-shadow-lg);
+  padding: 48px;
+  max-width: 420px;
+  width: 100%;
+  text-align: center;
+  border: 1px solid var(--luncher-border-light);
+}
+
+.login-logo {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--luncher-text);
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
+}
+
+.login-subtitle {
+  color: var(--luncher-text-secondary);
+  font-size: 1rem;
+  margin-bottom: 40px;
+  line-height: 1.5;
+}
+
+.login-form {
  display: flex;
  flex-direction: column;
-  align-items: center;
-}
+  gap: 20px;
+}
+
+.login-form label {
+  display: block;
+  text-align: left;
+  font-weight: 500;
+  color: var(--luncher-text);
+  margin-bottom: 8px;
+}
+
+.login-form .hint {
+  font-size: 0.85rem;
+  color: var(--luncher-text-muted);
+  margin-top: 8px;
+  text-align: left;
+  line-height: 1.5;
+}
+
+.login-form input[type="text"] {
+  width: 100%;
+  padding: 14px 18px;
+  font-size: 1rem;
+  border: 2px solid var(--luncher-border);
+  border-radius: var(--luncher-radius-sm);
+  background: var(--luncher-bg);
+  color: var(--luncher-text);
+  transition: var(--luncher-transition);
+}
+
+.login-form input[type="text"]:hover {
+  border-color: var(--luncher-text-muted);
+}
+
+.login-form input[type="text"]:focus {
+  border-color: var(--luncher-primary);
+  box-shadow: 0 0 0 3px var(--luncher-primary-light);
+  outline: none;
+}
+
+.login-form input[type="text"]::placeholder {
+  color: var(--luncher-text-muted);
+}
+
+.login-form .btn {
+  width: 100%;
+  padding: 14px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 8px;
+}
--- a/client/src/Login.tsx
+++ b/client/src/Login.tsx
@@ -26,7 +26,7 @@ export default function Login() {
  }, [auth]);

  const doLogin = useCallback(async () => {
-    const length = loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
+    const length = loginRef?.current?.value.length && loginRef.current.value.replaceAll(/\s/g, '').length
    if (length) {
      const response = await login({ body: { login: loginRef.current?.value } });
      if (response.data) {
@@ -36,21 +36,35 @@ export default function Login() {
  }, [auth]);

  if (!auth?.login) {
-    return <div className='login'>
-      <h1>Luncher</h1>
-      <h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>
-      <div className='login-inner'>
-        <p style={{ fontSize: "12px", marginTop: "10px" }}>
-          Zobrazované jméno by mělo být vaše jméno nebo přezdívka, pod kterou vás kolegové dokáží snadno identifikovat. Jméno je možné kdykoli změnit.
-        </p>
-        Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
-          if (event.key === 'Enter') {
-            doLogin()
-          }
-        }} />
-        <Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
+    return (
+      <div className='login-page'>
+        <div className='login-card'>
+          <h1 className='login-logo'>Luncher</h1>
+          <p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
+          <div className='login-form'>
+            <div>
+              <label htmlFor="login-input">Zobrazované jméno</label>
+              <input
+                id="login-input"
+                ref={loginRef}
+                type='text'
+                placeholder="Např. Jan Novák"
+                onKeyDown={event => {
+                  if (event.key === 'Enter') {
+                    doLogin()
+                  }
+                }}
+              />
+              <p className='hint'>
+                Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
+                Jméno je možné kdykoli změnit.
+              </p>
+            </div>
+            <Button onClick={doLogin}>Pokračovat</Button>
+          </div>
+        </div>
      </div>
-    </div>
+    );
  }
  return <div>Neplatný stav</div>
 }
--- a/client/src/Utils.tsx
+++ b/client/src/Utils.tsx
@@ -75,14 +75,14 @@ export const getDayOfWeekIndex = (date: Date) => {

 /** Vrátí první pracovní den v týdnu předaného data. */
 export function getFirstWorkDayOfWeek(date: Date) {
-    const firstDay = new Date(date.getTime());
+    const firstDay = new Date(date);
    firstDay.setDate(date.getDate() - getDayOfWeekIndex(date));
    return firstDay;
 }

 /** Vrátí poslední pracovní den v týdnu předaného data. */
 export function getLastWorkDayOfWeek(date: Date) {
-    const lastDay = new Date(date.getTime());
+    const lastDay = new Date(date);
    lastDay.setDate(date.getDate() + (4 - getDayOfWeekIndex(date)));
    return lastDay;
 }
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -1,12 +1,12 @@
-import { Navbar } from "react-bootstrap";
-
 export default function Footer() {
-    return <Navbar className="text-light" variant='dark' expand="lg" style={{
-        display: "flex",
-        justifyContent: "center",
-        marginTop: "auto", // Pushne footer na spodek
-        flexShrink: 0 // Zabrání zmenšování při malém obsahu
-    }}>
-        <span>🄯 Žádná práva nevyhrazena. TODO a zdrojové kódy dostupné <a href="https://gitea.melancholik.eu/mates/Luncher">zde</a>.</span>
-    </Navbar >
-}
+    return (
+        <footer className="footer">
+            <span>
+                Zdroj. kódy dostupné na{' '}
+                <a href="https://gitea.melancholik.eu/mates/Luncher" target="_blank" rel="noopener noreferrer">
+                    Gitea
+                </a>
+            </span>
+        </footer>
+    );
+}
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -1,14 +1,22 @@
 import { useEffect, useState } from "react";
-import { Navbar, Nav, NavDropdown } from "react-bootstrap";
+import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
 import { useAuth } from "../context/auth";
 import SettingsModal from "./modals/SettingsModal";
-import { useSettings } from "../context/settings";
+import { useSettings, ThemePreference } from "../context/settings";
 import FeaturesVotingModal from "./modals/FeaturesVotingModal";
 import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
 import RefreshMenuModal from "./modals/RefreshMenuModal";
 import { useNavigate } from "react-router";
 import { STATS_URL } from "../AppRoutes";
 import { FeatureRequest, getVotes, updateVote } from "../../../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+const CHANGELOG = [
+    "Nový moderní design aplikace",
+    "Oprava parsování Sladovnické a TechTower",
+    "Možnost označit se jako objednávající u volby \"budu objednávat\"",
+];

 export default function Header() {
    const auth = useAuth();
@@ -18,8 +26,29 @@ export default function Header() {
    const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
    const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
    const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
+    const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
    const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);

+    // Zjistíme aktuální efektivní téma (pro zobrazení správné ikony)
+    const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
+
+    useEffect(() => {
+        const updateEffectiveTheme = () => {
+            if (settings?.themePreference === 'system') {
+                const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                setEffectiveTheme(isDark ? 'dark' : 'light');
+            } else {
+                setEffectiveTheme(settings?.themePreference || 'light');
+            }
+        };
+
+        updateEffectiveTheme();
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', updateEffectiveTheme);
+        return () => mediaQuery.removeEventListener('change', updateEffectiveTheme);
+    }, [settings?.themePreference]);
+
    useEffect(() => {
        if (auth?.login) {
            getVotes().then(response => {
@@ -44,6 +73,12 @@ export default function Header() {
        setRefreshMenuModalOpen(false);
    }

+    const toggleTheme = () => {
+        // Přepínáme mezi light a dark (ignorujeme system pro jednoduchost)
+        const newTheme: ThemePreference = effectiveTheme === 'dark' ? 'light' : 'dark';
+        settings?.setThemePreference(newTheme);
+    }
+
    const isValidInteger = (str: string) => {
        str = str.trim();
        if (!str) {
@@ -54,19 +89,19 @@ export default function Header() {
        return n !== Infinity && String(n) === str && n >= 0;
    }

-    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => {
+    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => {
        if (bankAccountNumber) {
            try {
                // Validace kódu banky
-                if (bankAccountNumber.indexOf('/') < 0) {
-                    throw Error("Číslo účtu neobsahuje lomítko/kód banky")
+                if (!bankAccountNumber.includes('/')) {
+                    throw new Error("Číslo účtu neobsahuje lomítko/kód banky")
                }
                const split = bankAccountNumber.split("/");
                if (split[1].length !== 4) {
-                    throw Error("Kód banky musí být 4 číslice")
+                    throw new Error("Kód banky musí být 4 číslice")
                }
                if (!isValidInteger(split[1])) {
-                    throw Error("Kód banky není číslo")
+                    throw new Error("Kód banky není číslo")
                }

                // Validace čísla a předčíslí
@@ -76,7 +111,7 @@ export default function Header() {
                    cislo = cislo.replace('-', '');
                }
                if (!isValidInteger(cislo)) {
-                    throw Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice")
+                    throw new Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice")
                }
                if (cislo.length < 16) {
                    cislo = cislo.padStart(16, '0');
@@ -89,7 +124,7 @@ export default function Header() {
                    sum += Number.parseInt(char) * weight
                }
                if (sum % 11 !== 0) {
-                    throw Error("Číslo účtu je neplatné")
+                    throw new Error("Číslo účtu je neplatné")
                }
            } catch (e: any) {
                alert(e.message)
@@ -99,6 +134,9 @@ export default function Header() {
        settings?.setBankAccountNumber(bankAccountNumber);
        settings?.setBankAccountHolderName(bankAccountHolderName);
        settings?.setHideSoupsOption(hideSoupsOption);
+        if (themePreference) {
+            settings?.setThemePreference(themePreference);
+        }
        closeSettingsModal();
    }

@@ -118,12 +156,21 @@ export default function Header() {
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="nav">
+                <button
+                    className="theme-toggle"
+                    onClick={toggleTheme}
+                    title={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
+                    aria-label="Přepnout barevný motiv"
+                >
+                    <FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
+                </button>
                <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
                    <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => setChangelogModalOpen(true)}>Novinky</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
                </NavDropdown>
@@ -133,5 +180,22 @@ export default function Header() {
        <RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
        <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
        <PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
+        <Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Novinky</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <ul>
+                    {CHANGELOG.map((item, index) => (
+                        <li key={index}>{item}</li>
+                    ))}
+                </ul>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={() => setChangelogModalOpen(false)}>
+                    Zavřít
+                </Button>
+            </Modal.Footer>
+        </Modal>
    </Navbar>
-}
+}
--- a/client/src/components/Loader.tsx
+++ b/client/src/components/Loader.tsx
@@ -9,11 +9,13 @@ type Props = {
 }

 function Loader(props: Readonly<Props>) {
-  return <div className='loader'>
-    <h1>{props.title ?? 'Prosím čekejte...'}</h1>
-    <FontAwesomeIcon icon={props.icon} className={`loader-icon mb-3 ` + (props.animation ?? '')} />
-    <p>{props.description}</p>
-  </div>
+  return (
+    <div className='loader'>
+      <FontAwesomeIcon icon={props.icon} className={`loader-icon ${props.animation ?? ''}`} />
+      <h2 className='loader-title'>{props.title ?? 'Prosím čekejte...'}</h2>
+      <p className='loader-description'>{props.description}</p>
+    </div>
+  );
 }

 export default Loader;
--- a/client/src/components/PizzaOrderList.tsx
+++ b/client/src/components/PizzaOrderList.tsx
@@ -15,29 +15,43 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Rea
    }

    if (!orders?.length) {
-        return <p className="mt-3"><i>Zatím žádné objednávky...</i></p>
+        return <p className="mt-4" style={{ color: 'var(--luncher-text-muted)', fontStyle: 'italic' }}>Zatím žádné objednávky...</p>
    }

    const total = orders.reduce((total, order) => total + order.totalPrice, 0);

-    return <Table className="mt-3" striped bordered hover>
-        <thead>
-            <tr>
-                <th>Jméno</th>
-                <th>Objednávka</th>
-                <th>Poznámka</th>
-                <th>Příplatek</th>
-                <th>Cena</th>
-            </tr>
-        </thead>
-        <tbody>
-            {orders.map(order => <tr key={order.customer}>
-                <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
-            </tr>)}
-            <tr style={{ fontWeight: 'bold' }}>
-                <td colSpan={4}>Celkem</td>
-                <td>{`${total} Kč`}</td>
-            </tr>
-        </tbody>
-    </Table>
-}
+    return (
+        <div className="mt-4" style={{
+            background: 'var(--luncher-bg-card)',
+            borderRadius: 'var(--luncher-radius-lg)',
+            overflow: 'hidden',
+            border: '1px solid var(--luncher-border-light)',
+            boxShadow: 'var(--luncher-shadow)'
+        }}>
+            <Table className="mb-0" style={{ color: 'var(--luncher-text)' }}>
+                <thead style={{ background: 'var(--luncher-primary-light)' }}>
+                    <tr>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Jméno</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Objednávka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Poznámka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Příplatek</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none', textAlign: 'right' }}>Cena</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {orders.map(order => <tr key={order.customer} style={{ borderColor: 'var(--luncher-border-light)' }}>
+                        <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
+                    </tr>)}
+                    <tr style={{
+                        fontWeight: 700,
+                        background: 'var(--luncher-bg-hover)',
+                        borderTop: '2px solid var(--luncher-border)'
+                    }}>
+                        <td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
+                        <td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total} Kč`}</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    );
+}
--- a/client/src/components/modals/PizzaAdditionalFeeModal.tsx
+++ b/client/src/components/modals/PizzaAdditionalFeeModal.tsx
@@ -15,12 +15,12 @@ export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose,
    const priceRef = useRef<HTMLInputElement>(null);

    const doSubmit = () => {
-        onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
+        onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0"));
    }

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
-            onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
+            onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0"));
        }
    }

--- a/client/src/components/modals/PizzaCalculatorModal.tsx
+++ b/client/src/components/modals/PizzaCalculatorModal.tsx
@@ -36,13 +36,13 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props

        // 1. pizza
        if (diameter1Ref.current?.value) {
-            const diameter1 = parseInt(diameter1Ref.current?.value);
+            const diameter1 = Number.parseInt(diameter1Ref.current?.value);
            r.pizza1 ??= {};
            if (diameter1 && diameter1 > 0) {
                r.pizza1.diameter = diameter1;
                r.pizza1.area = Math.PI * Math.pow(diameter1 / 2, 2);
                if (price1Ref.current?.value) {
-                    const price1 = parseInt(price1Ref.current?.value);
+                    const price1 = Number.parseInt(price1Ref.current?.value);
                    if (price1) {
                        r.pizza1.pricePerM = price1 / r.pizza1.area;
                    } else {
@@ -56,13 +56,13 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props

        // 2. pizza
        if (diameter2Ref.current?.value) {
-            const diameter2 = parseInt(diameter2Ref.current?.value);
+            const diameter2 = Number.parseInt(diameter2Ref.current?.value);
            r.pizza2 ??= {};
            if (diameter2 && diameter2 > 0) {
                r.pizza2.diameter = diameter2;
                r.pizza2.area = Math.PI * Math.pow(diameter2 / 2, 2);
                if (price2Ref.current?.value) {
-                    const price2 = parseInt(price2Ref.current?.value);
+                    const price2 = Number.parseInt(price2Ref.current?.value);
                    if (price2) {
                        r.pizza2.pricePerM = price2 / r.pizza2.area;
                    } else {
@@ -77,8 +77,8 @@ export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props
        // Srovnání
        if (r.pizza1?.pricePerM && r.pizza2?.pricePerM && r.pizza1.diameter && r.pizza2.diameter) {
            r.choice = r.pizza1.pricePerM < r.pizza2.pricePerM ? 1 : 2;
-            const bigger = r.pizza1.pricePerM > r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
-            const smaller = r.pizza1.pricePerM < r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
+            const bigger = Math.max(r.pizza1.pricePerM, r.pizza2.pricePerM);
+            const smaller = Math.min(r.pizza1.pricePerM, r.pizza2.pricePerM);
            r.ratio = (bigger / smaller) - 1;
            r.diameterDiff = Math.abs(r.pizza1.diameter - r.pizza2.diameter);
        } else {
--- a/client/src/components/modals/RefreshMenuModal.tsx
+++ b/client/src/components/modals/RefreshMenuModal.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { Modal, Button, Alert } from "react-bootstrap";
+import { Modal, Button, Alert, Form } from "react-bootstrap";

 type Props = {
    isOpen: boolean;
@@ -30,7 +30,6 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
            if (res.ok) {
                setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
                if (refreshPassRef.current) {
-                    // Clean hesla xd
                    refreshPassRef.current.value = '';
                }
            } else {
@@ -50,7 +49,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
    };

    return (
-        <Modal show={isOpen} onHide={handleClose} size="lg">
+        <Modal show={isOpen} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
            </Modal.Header>
@@ -63,36 +62,29 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
                    </Alert>
                )}

-                <div className="mb-3">
-                    Heslo: <input
+                <Form.Group className="mb-3">
+                    <Form.Label>Heslo</Form.Label>
+                    <Form.Control
                        ref={refreshPassRef}
                        type="password"
                        placeholder="Zadejte heslo"
-                        className="form-control d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
                        onKeyDown={e => e.stopPropagation()}
                    />
-                </div>
+                </Form.Group>

-                <div className="mb-3">
-                    Typ refreshe: <select
-                        ref={refreshTypeRef}
-                        className="form-select d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
-                        defaultValue="week"
-                    >
+                <Form.Group className="mb-3">
+                    <Form.Label>Typ refreshe</Form.Label>
+                    <Form.Select ref={refreshTypeRef} defaultValue="week">
                        <option value="week">Týden</option>
                        <option value="day">Den</option>
-                    </select>
-                </div>
+                    </Form.Select>
+                </Form.Group>

                <Button
-                    variant="info"
                    onClick={handleRefresh}
                    disabled={refreshLoading}
-                    className="mb-3"
                >
-                    {refreshLoading ? 'Refreshing...' : 'Refresh'}
+                    {refreshLoading ? 'Načítám...' : 'Obnovit menu'}
                </Button>
            </Modal.Body>
            <Modal.Footer>
@@ -102,4 +94,4 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
            </Modal.Footer>
        </Modal>
    );
-}
+}
--- a/client/src/components/modals/SettingsModal.tsx
+++ b/client/src/components/modals/SettingsModal.tsx
@@ -1,11 +1,11 @@
 import { useRef } from "react";
-import { Modal, Button } from "react-bootstrap"
-import { useSettings } from "../../context/settings";
+import { Modal, Button, Form } from "react-bootstrap"
+import { useSettings, ThemePreference } from "../../context/settings";

 type Props = {
    isOpen: boolean,
    onClose: () => void,
-    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => void,
+    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => void,
 }

 /** Modální dialog pro uživatelská nastavení. */
@@ -14,29 +14,84 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
    const bankAccountRef = useRef<HTMLInputElement>(null);
    const nameRef = useRef<HTMLInputElement>(null);
    const hideSoupsRef = useRef<HTMLInputElement>(null);
+    const themeRef = useRef<HTMLSelectElement>(null);

-    return <Modal show={isOpen} onHide={onClose} size="lg">
-        <Modal.Header closeButton>
-            <Modal.Title><h2>Nastavení</h2></Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-            <h4>Obecné</h4>
-            <span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
-                <input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
-            </span>
-            <hr />
-            <h4>Bankovní účet</h4>
-            <p>Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.<br />Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.<br /><br />Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.</p>
-            Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br />
-            Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} />
-        </Modal.Body>
-        <Modal.Footer>
-            <Button variant="secondary" onClick={onClose}>
-                Storno
-            </Button>
-            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked)}>
-                Uložit
-            </Button>
-        </Modal.Footer>
-    </Modal>
-}
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Nastavení</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <h4>Vzhled</h4>
+                <Form.Group className="mb-3">
+                    <Form.Label>Barevný motiv</Form.Label>
+                    <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
+                        <option value="system">Podle systému</option>
+                        <option value="light">Světlý</option>
+                        <option value="dark">Tmavý</option>
+                    </Form.Select>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Obecné</h4>
+                <Form.Group className="mb-3">
+                    <Form.Check
+                        id="hideSoupsCheckbox"
+                        ref={hideSoupsRef}
+                        type="checkbox"
+                        label="Skrýt polévky"
+                        defaultChecked={settings?.hideSoups}
+                        title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
+                    />
+                    <Form.Text className="text-muted">
+                        Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
+                    </Form.Text>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Bankovní účet</h4>
+                <p>
+                    Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
+                </p>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Číslo účtu</Form.Label>
+                    <Form.Control
+                        ref={bankAccountRef}
+                        type="text"
+                        placeholder="123456-1234567890/1234"
+                        defaultValue={settings?.bankAccount}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Název příjemce</Form.Label>
+                    <Form.Control
+                        ref={nameRef}
+                        type="text"
+                        placeholder="Jan Novák"
+                        defaultValue={settings?.holderName}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Jméno majitele účtu pro QR platbu.
+                    </Form.Text>
+                </Form.Group>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose}>
+                    Storno
+                </Button>
+                <Button onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
+                    Uložit
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}
--- a/client/src/context/auth.tsx
+++ b/client/src/context/auth.tsx
@@ -55,7 +55,7 @@ function useProvideAuth(): AuthContextProps {
    setLoginName(undefined);
    setTrusted(undefined);
    if (trusted && logoutUrl?.length) {
-      window.location.replace(logoutUrl);
+      globalThis.location.replace(logoutUrl);
    }
  }

--- a/client/src/context/settings.tsx
+++ b/client/src/context/settings.tsx
@@ -3,14 +3,19 @@ import React, { ReactNode, useContext, useEffect, useState } from "react"
 const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number';
 const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
 const HIDE_SOUPS_KEY = 'hide_soups';
+const THEME_KEY = 'theme_preference';
+
+export type ThemePreference = 'system' | 'light' | 'dark';

 export type SettingsContextProps = {
  bankAccount?: string,
  holderName?: string,
  hideSoups?: boolean,
+  themePreference: ThemePreference,
  setBankAccountNumber: (accountNumber?: string) => void,
  setBankAccountHolderName: (holderName?: string) => void,
  setHideSoupsOption: (hideSoups?: boolean) => void,
+  setThemePreference: (theme: ThemePreference) => void,
 }

 type ContextProps = {
@@ -28,10 +33,23 @@ export const useSettings = () => {
  return useContext(settingsContext);
 }

+function getInitialTheme(): ThemePreference {
+  try {
+    const saved = localStorage.getItem(THEME_KEY) as ThemePreference | null;
+    if (saved && ['system', 'light', 'dark'].includes(saved)) {
+      return saved;
+    }
+  } catch (e) {
+    // localStorage nedostupný
+  }
+  return 'system';
+}
+
 function useProvideSettings(): SettingsContextProps {
  const [bankAccount, setBankAccount] = useState<string | undefined>();
  const [holderName, setHolderName] = useState<string | undefined>();
  const [hideSoups, setHideSoups] = useState<boolean | undefined>();
+  const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);

  useEffect(() => {
    const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
@@ -72,6 +90,29 @@ function useProvideSettings(): SettingsContextProps {
    }
  }, [hideSoups]);

+  useEffect(() => {
+    localStorage.setItem(THEME_KEY, themePreference);
+  }, [themePreference]);
+
+  useEffect(() => {
+    const applyTheme = (theme: 'light' | 'dark') => {
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    };
+
+    if (themePreference === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      applyTheme(mediaQuery.matches ? 'dark' : 'light');
+
+      const handler = (e: MediaQueryListEvent) => {
+        applyTheme(e.matches ? 'dark' : 'light');
+      };
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    } else {
+      applyTheme(themePreference);
+    }
+  }, [themePreference]);
+
  function setBankAccountNumber(bankAccount?: string) {
    setBankAccount(bankAccount);
  }
@@ -84,12 +125,18 @@ function useProvideSettings(): SettingsContextProps {
    setHideSoups(hideSoups);
  }

+  function setThemePreference(theme: ThemePreference) {
+    setTheme(theme);
+  }
+
  return {
    bankAccount,
    holderName,
    hideSoups,
+    themePreference,
    setBankAccountNumber,
    setBankAccountHolderName,
    setHideSoupsOption,
+    setThemePreference,
  }
 }
--- a/client/src/context/socket.js
+++ b/client/src/context/socket.js
@@ -7,8 +7,8 @@ if (process.env.NODE_ENV === 'development') {
    socketUrl = `http://localhost:3001`;
    socketPath = undefined;
 } else {
-    socketUrl = `${window.location.host}`;
-    socketPath = `${window.location.pathname}socket.io`;
+    socketUrl = `${globalThis.location.host}`;
+    socketPath = `${globalThis.location.pathname}socket.io`;
 }

 export const socket = socketio.connect(socketUrl, { path: socketPath, transports: ["websocket"] });
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -7,14 +7,32 @@ body,

 body {
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
 }

 code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
-}
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Better focus styles */
+:focus-visible {
+  outline: 2px solid var(--luncher-primary);
+  outline-offset: 2px;
+}
+
+/* Selection color */
+::selection {
+  background: var(--luncher-primary-light);
+  color: var(--luncher-primary);
+}
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -17,7 +17,7 @@ client.setConfig({
 // Interceptor na vyhození toasteru při chybě
 client.interceptors.response.use(async response => {
  // TODO opravit - login je zatím výjimka, voláme ho "naprázdno" abychom zjistili, zda nás nepřihlásily trusted headers
-  if (!response.ok && response.url.indexOf("/login") == -1) {
+  if (!response.ok && !response.url.includes("/login")) {
    const json = await response.json();
    toast.error(json.error, { theme: "colored" });
  }
--- a/client/src/pages/StatsPage.scss
+++ b/client/src/pages/StatsPage.scss
@@ -2,15 +2,91 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  padding: 20px;
+  padding: 32px 24px;
+  min-height: calc(100vh - 140px);
+  background: var(--luncher-bg);
+
+  h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--luncher-text);
+    margin-bottom: 24px;
+  }

  .week-navigator {
    display: flex;
    align-items: center;
-    font-size: xx-large;
+    gap: 24px;
+    margin-bottom: 32px;
+
+    svg {
+      font-size: 1.5rem;
+      color: var(--luncher-text-secondary);
+      cursor: pointer;
+      padding: 12px;
+      border-radius: 50%;
+      background: var(--luncher-bg-card);
+      box-shadow: var(--luncher-shadow-sm);
+      transition: var(--luncher-transition);
+
+      &:hover {
+        color: var(--luncher-primary);
+        background: var(--luncher-primary-light);
+        transform: scale(1.05);
+      }
+    }

    .date-range {
-      margin: 5px 20px;
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--luncher-text);
+      min-width: 280px;
+      text-align: center;
    }
  }
-}
+
+  // Chart container
+  .recharts-wrapper {
+    background: var(--luncher-bg-card);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    padding: 24px;
+    border: 1px solid var(--luncher-border-light);
+  }
+
+  // Chart text styling
+  .recharts-cartesian-axis-tick-value {
+    fill: var(--luncher-text-secondary);
+    font-size: 0.85rem;
+  }
+
+  .recharts-legend-item-text {
+    color: var(--luncher-text) !important;
+    font-weight: 500;
+  }
+
+  .recharts-tooltip-wrapper {
+    .recharts-default-tooltip {
+      background: var(--luncher-bg-card) !important;
+      border: 1px solid var(--luncher-border) !important;
+      border-radius: var(--luncher-radius-sm) !important;
+      box-shadow: var(--luncher-shadow-lg) !important;
+
+      .recharts-tooltip-label {
+        color: var(--luncher-text) !important;
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+
+      .recharts-tooltip-item {
+        color: var(--luncher-text-secondary) !important;
+      }
+    }
+  }
+
+  .recharts-cartesian-grid-horizontal line,
+  .recharts-cartesian-grid-vertical line {
+    stroke: var(--luncher-border);
+  }
+}
--- a/client/src/pages/StatsPage.tsx
+++ b/client/src/pages/StatsPage.tsx
@@ -17,16 +17,15 @@ const CHART_HEIGHT = 700;
 const STROKE_WIDTH = 2.5;

 const COLORS = [
-  // Komentáře jsou kvůli vizualizaci barev ve VS Code
-  '#ff1493', // #ff1493
-  '#1e90ff', // #1e90ff
-  '#c5a700', // #c5a700
-  '#006400', // #006400
-  '#b300ff', // #b300ff
-  '#ff4500', // #ff4500
-  '#bc8f8f', // #bc8f8f
-  '#00ff00', // #00ff00
-  '#7c7c7c', // #7c7c7c
+  '#ff1493',
+  '#1e90ff',
+  '#c5a700',
+  '#006400',
+  '#b300ff',
+  '#ff4500',
+  '#bc8f8f',
+  '#00ff00',
+  '#7c7c7c',
 ]

 export default function StatsPage() {
--- a/client/yarn.lock
+++ b/client/yarn.lock
--- a/server/src/restaurants.ts
+++ b/server/src/restaurants.ts
@@ -100,7 +100,7 @@ export const getMenuSladovnicka = async (firstDayOfWeek: Date, mock: boolean = f
    const html = await getHtml(SLADOVNICKA_URL);
    const $ = load(html);

-    // Nejdříve zjistíme, které dny jsou k dispozici z tab elementů
+    // Zjistíme, které dny jsou k dispozici z tab elementů
    const tabElements = $('#daily-menu-tab-list').children('button[id^="daily-menu-tab-"]');
    const availableDays: { [dayIndex: number]: number } = {}; // mapování dayIndex -> contentIndex
    
@@ -112,7 +112,7 @@ export const getMenuSladovnicka = async (firstDayOfWeek: Date, mock: boolean = f
        }
    });

-    const menuContentElements = $('#daily-menu-content-list').children('[id^="daily-menu-content-"]');
+    const menuContentElements = $('#daily-menu-content-list').children('.daily-menu-content__content').not('.daily-menu-content__content--static');
    
    const result: Food[][] = [];
    
@@ -130,59 +130,32 @@ export const getMenuSladovnicka = async (firstDayOfWeek: Date, mock: boolean = f
            continue; // Přeskočíme, pokud content element neexistuje
        }
        
-        const dayChildren = $(menuContentElements[contentIndexNum]).children();
-        
-        // Ověříme, že má element očekávanou strukturu
-        if (dayChildren.length < 2) {
-            console.warn(`Neočekávaný počet children v menu Sladovnické pro den ${dayIndexNum}: ${dayChildren.length}, očekávány alespoň 2 (polévka a hlavní jídlo)`);
-            continue;
-        }
-
-        // Parsování polévky
-        const soupElement = dayChildren.get(0);
-        const soupTable = $(soupElement).find('table tbody tr');
-        const soupCells = soupTable.children('td');
-        if (soupCells.length !== 3) {
-            console.warn(`Neočekávaný počet buněk v tabulce polévky pro den ${dayIndexNum}: ${soupCells.length}, ale očekávány byly 3`);
-            continue;
-        }
-        
-        const soupAmount = sanitizeText($(soupCells.get(0)).text());
-        const soupNameRaw = sanitizeText($(soupCells.get(1)).text());
-        const soupPrice = sanitizeText($(soupCells.get(2)).text().replace(' ', '\xA0'));
-        const soupParsed = parseAllergens(soupNameRaw);
-        
-        // Parsování hlavních jídel
-        const mainCourseElement = dayChildren.get(1);
-        const mainCourseTable = $(mainCourseElement).find('table tbody');
-        const mainCourseRows = mainCourseTable.children('tr');
+        const contentElement = $(menuContentElements[contentIndexNum]);
+        const itemElement = contentElement.find('.daily-menu-content__item');
+        const table = itemElement.find('table.daily-menu-content__table tbody');
+        const rows = table.children('tr');
        
        const currentDayFood: Food[] = [];
        
-        // Přidáme polévku do seznamu jídel
-        currentDayFood.push({
-            amount: soupAmount,
-            name: soupParsed.cleanName,
-            price: soupPrice,
-            isSoup: true,
-            allergens: soupParsed.allergens.length > 0 ? soupParsed.allergens : undefined,
-        });
-        
-        // Projdeme všechny řádky hlavních jídel
-        mainCourseRows.each((i, row) => {
+        // Projdeme všechny řádky - první je polévka, zbytek jsou hlavní jídla
+        rows.each((i, row) => {
            const cells = $(row).children('td');
+            if (cells.length !== 3) {
+                return; // Přeskočíme řádky s nesprávnou strukturou
+            }
+            
            const amount = sanitizeText($(cells.get(0)).text());
            const nameRaw = sanitizeText($(cells.get(1)).text());
            const price = sanitizeText($(cells.get(2)).text().replace(' ', '\xA0'));
            const parsed = parseAllergens(nameRaw);
            
-            // Přeskočíme prázdné řádky (první řádek může být prázdný)
+            // Přeskočíme prázdné řádky
            if (parsed.cleanName.trim().length > 0) {
                currentDayFood.push({
                    amount,
                    name: parsed.cleanName,
                    price,
-                    isSoup: false,
+                    isSoup: i === 0, // První řádek je polévka
                    allergens: parsed.allergens.length > 0 ? parsed.allergens : undefined,
                });
            }
@@ -351,8 +324,13 @@ export const getMenuTechTower = async (firstDayOfWeek: Date, mock: boolean = fal
                const split = [tmp.slice(0, -2).join(' ')].concat(tmp.slice(-2));
                price = `${split.slice(1)[0]}\xA0Kč`
                nameRaw = split[0].replace('•', '');
+            } else if (text.toLowerCase().endsWith(',-')) {
+                const tmp = text.replace('\xA0', ' ').split(' ');
+                const split = [tmp.slice(0, -1).join(' ')].concat(tmp.slice(-1));
+                price = `${split.slice(1)[0].replace(',-', '')}\xA0Kč`
+                nameRaw = split[0].replace('•', '');
            }
-            if (nameRaw.endsWith('–')) {
+            if (nameRaw.endsWith('–')|| nameRaw.endsWith('—')) {
                nameRaw = nameRaw.slice(0, -1).trim();
            }

--- a/server/src/routes/foodRoutes.ts
+++ b/server/src/routes/foodRoutes.ts
@@ -1,6 +1,6 @@
 import express, { Request, Response } from "express";
 import { getLogin, getTrusted } from "../auth";
-import { addChoice, getDateForWeekIndex, getToday, removeChoice, removeChoices, updateDepartureTime, updateNote, fetchRestaurantWeekMenuData, saveRestaurantWeekMenu } from "../service";
+import { addChoice, getDateForWeekIndex, getToday, removeChoice, removeChoices, updateDepartureTime, updateNote, fetchRestaurantWeekMenuData, saveRestaurantWeekMenu, updateBuyer } from "../service";
 import { getDayOfWeekIndex, parseToken, getFirstWorkDayOfWeek } from "../utils";
 import { getWebsocket } from "../websocket";
 import { callNotifikace } from "../notifikace";
@@ -182,6 +182,15 @@ router.post("/jdemeObed", async (req, res, next) => {
    } catch (e: any) { next(e) }
 });

+router.post("/updateBuyer", async (req, res, next) => {
+    const login = getLogin(parseToken(req));
+    try {
+        const data = await updateBuyer(login);
+        getWebsocket().emit("message", data);
+        res.status(200).json({});
+    } catch (e: any) { next(e) }
+});
+
 // /api/food/refresh?type=week&heslo=docasnyheslo
 export const refreshMetoda = async (req: Request, res: Response) => {
    const { type, heslo } = req.query as { type?: string; heslo?: string };
--- a/server/src/service.ts
+++ b/server/src/service.ts
@@ -477,6 +477,24 @@ export async function updateDepartureTime(login: string, time?: string, date?: D
    return clientData;
 }

+/**
+ * Nastaví/odnastaví uživatele jako objednatele pro dnešní den.
+ * Objednatelů může být více.
+ * 
+ * @param login přihlašovací jméno uživatele
+ */
+export async function updateBuyer(login: string) {
+    const usedDate = getToday();
+    let clientData = await getClientData(usedDate);
+    const userEntry = clientData.choices?.['OBJEDNAVAM']?.[login];
+    if (!userEntry) {
+        throw new Error("Nelze nastavit objednatele pro uživatele s jinou volbou než \"Budu objednávat\"");
+    }
+    userEntry.isBuyer = !(userEntry.isBuyer || false);
+    await storage.setData(formatDate(usedDate), clientData);
+    return clientData;
+}
+
 /**
 * Vrátí data pro klienta pro předaný nebo aktuální den.
 * 
--- a/server/yarn.lock
+++ b/server/yarn.lock
--- a/types/api.yml
+++ b/types/api.yml
@@ -26,6 +26,8 @@ paths:
    $ref: "./paths/food/changeDepartureTime.yml"
  /food/jdemeObed:
    $ref: "./paths/food/jdemeObed.yml"
+  /food/updateBuyer:
+    $ref: "./paths/food/updateBuyer.yml"

  # Pizza day (/api/pizzaDay)
  /pizzaDay/create:
--- a/types/paths/food/updateBuyer.yml
+++ b/types/paths/food/updateBuyer.yml
@@ -0,0 +1,6 @@
+post:
+  operationId: setBuyer
+  summary: Nastavení/odnastavení aktuálně přihlášeného uživatele jako objednatele pro stav "Budu objednávat" pro aktuální den.
+  responses:
+    "200":
+      description: Stav byl úspěšně změněn.
--- a/types/schemas/_index.yml
+++ b/types/schemas/_index.yml
@@ -74,6 +74,9 @@ UserLunchChoice:
    note:
      description: Volitelná, veřejně viditelná uživatelská poznámka k vybrané volbě
      type: string
+    isBuyer:
+      description: Příznak, zda je tento uživatel objednatelem pro stav "Budu objednávat"
+      type: boolean
 LocationLunchChoicesMap:
  description: Objekt, kde klíčem je možnost stravování ((#LunchChoice)) a hodnotou množina uživatelů s touto volbou ((#LunchChoices)).
  type: object
Author	SHA1	Message	Date
Stánek Pavel	e404b8112d	fix: opravy zobrazeni sekce vybranych jidel	2026-02-04 12:28:26 +01:00
Stánek Pavel	d85c764c88	fix: opravy a ladeni vzhledu a UX	2026-02-04 12:06:17 +01:00
Stánek Pavel	37cacd895a	feat: redesign aplikace pomocí claude code	2026-02-03 10:37:27 +01:00
batmanisko	6a1da97ef1	feat: podpora dark mode	2026-01-30 07:47:03 +01:00
Martin Berka	f91973f1a4	Oprava parsování názvů TechTower	2026-01-19 10:18:24 +01:00
Martin Berka	7cf9179a87	Neumožnění výběru jídla kliknutím do minulosti	2026-01-13 16:03:31 +01:00
Martin Berka	54e5be6b6a	Povýšení závislostí	2026-01-13 15:43:19 +01:00
Martin Berka	c264f9921e	Opravy dle SonarLint - klient	2026-01-13 15:35:00 +01:00
Martin Berka	e03ba45415	Možnost označení objednávajícího	2026-01-13 14:06:16 +01:00
Martin Berka	20f4ee0427	Zimní atmosféra	2026-01-09 08:46:14 +01:00
Martin Berka	be4cee4cdb	Oprava parsování Sladovnická a TechTower	2026-01-09 08:35:35 +01:00