Marbes/Luncher
5
2
Fork 0
Code Issues 22 Pull Requests Packages Projects Releases Wiki Activity

feat: redesign aplikace pomocí claude code #18

Merged
mates merged 2 commits from feat/redesign into master 2026-02-04 12:07:42 +01:00
Conversation 0 Commits 2 Files Changed 14 +1595 -396
14 changed files with 1595 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/index.html
View File

@@ -12,13 +12,22 @@
<title>Luncher</title> <title>Luncher</title>
<script> <script>
(function() { (function() {
var saved = localStorage.getItem('theme_preference'); try {
var theme = 'light'; var saved = localStorage.getItem('theme_preference');
if (saved === 'dark') theme = 'dark'; var theme;
else if (saved === 'system' || !saved) { if (saved === 'dark') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; 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');
} }
document.documentElement.setAttribute('data-bs-theme', theme);
})(); })();
</script> </script>
</head> </head>

1113
client/src/App.scss
View File

File diff suppressed because it is too large Load Diff

294
client/src/App.tsx
View File

@@ -344,41 +344,53 @@ function App() {
const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => { const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => {
let content; let content;
if (menu?.closed) { 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) { } else if (menu?.food?.length && menu.food.length > 0) {
const hideSoups = settings?.hideSoups; const hideSoups = settings?.hideSoups;
content = <Table striped bordered hover> content = <Table className="food-table">
<tbody style={{ cursor: canChangeChoice ? 'pointer' : 'default' }}> <tbody style={{ cursor: canChangeChoice ? 'pointer' : 'default' }}>
{menu.food.map((f: Food, index: number) => {menu.food.map((f: Food, index: number) =>
(!hideSoups || !f.isSoup) && (!hideSoups || !f.isSoup) &&
<tr key={f.name} onClick={() => doAddClickFoodChoice(location, index)}> <tr key={f.name} onClick={() => doAddClickFoodChoice(location, index)}>
<td>{f.amount}</td>
<td> <td>
{f.name} <div className="food-name">
{f.allergens && f.allergens.length > 0 && ( {f.name}
<> ({f.allergens.map((a, idx) => ( {f.allergens && f.allergens.length > 0 && (
<span key={a}> <span className="food-allergens">
<span title={ALLERGENS[a]} style={{ cursor: 'help', textDecoration: 'underline' }} onClick={e => { {' '}({f.allergens.map((a, idx) => (
e.stopPropagation(); <span key={a}>
window.open(LINK_ALLERGENS, '_blank'); <span className="allergen-link" title={ALLERGENS[a]} onClick={e => {
}}>{a}</span> e.stopPropagation();
{idx < f.allergens!.length - 1 && ','} window.open(LINK_ALLERGENS, '_blank');
}}>{a}</span>
{idx < f.allergens!.length - 1 && ', '}
</span>
))})
</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>
<td>{f.price}</td>
</tr> </tr>
)} )}
</tbody> </tbody>
</Table> </Table>
} else { } 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'> return <Col md={6} lg={3} className='mt-3'>
<h3 style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>{getLunchChoiceName(location)}</h3> <div className="restaurant-card">
{menu?.lastUpdate && <small>Poslední aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>} <div className="restaurant-header" style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>
{content} <h3>
{getLunchChoiceName(location)}
</h3>
{menu?.lastUpdate && <small>Aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
</div>
{content}
</div>
</Col> </Col>
} }
@@ -421,16 +433,6 @@ function App() {
<Header /> <Header />
<div className='wrapper'> <div className='wrapper'>
{data.isWeekend ? <h4>Užívejte víkend :)</h4> : <> {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>Oprava parsování Sladovnické a TechTower</li>
<li>Zimní atmosféra</li>
<li>Možnost označit se jako objednávající u volby "budu objednávat"</li>
</ul>
</Alert>
{dayIndex != null && {dayIndex != null &&
<div className='day-navigator'> <div className='day-navigator'>
<span title='Předchozí den'> <span title='Předchozí den'>
@@ -450,10 +452,10 @@ function App() {
</Row> </Row>
<div className='content-wrapper'> <div className='content-wrapper'>
<div className='content'> <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> <p>{`Jak to ${dayIndex == null || dayIndex === data.todayDayIndex ? 'dnes' : 'tento den'} vidíš s obědem?`}</p>
<Form.Select ref={choiceRef} onChange={doAddChoice}> <Form.Select ref={choiceRef} onChange={doAddChoice}>
<option></option> <option value="">Vyber možnost...</option>
{Object.entries(LunchChoice) {Object.entries(LunchChoice)
.filter(entry => { .filter(entry => {
const locationKey = entry[0] as Restaurant; const locationKey = entry[0] as Restaurant;
@@ -463,44 +465,44 @@ function App() {
</Form.Select> </Form.Select>
<small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small> <small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small>
{foodChoiceList && !closed && <> {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}> <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>)} {foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)}
</Form.Select> </Form.Select>
</>} </>}
{foodChoiceList && !closed && <> {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}> <Form.Select ref={departureChoiceRef} onChange={handleChangeDepartureTime}>
<option></option> <option value="">Vyber čas...</option>
{Object.values(DepartureTime) {Object.values(DepartureTime)
.filter(time => isInTheFuture(time)) .filter(time => isInTheFuture(time))
.map(time => <option key={time} value={time}>{time}</option>)} .map(time => <option key={time} value={time}>{time}</option>)}
</Form.Select> </Form.Select>
</>} </>}
</>} </div>}
{Object.keys(data.choices).length > 0 ? {Object.keys(data.choices).length > 0 ?
<Table bordered className='mt-5'> <Table className='choices-table mt-4 fade-in'>
<tbody> <tbody>
{Object.keys(data.choices).map(key => { {Object.keys(data.choices).map(key => {
const locationKey = key as LunchChoice; const locationKey = key as LunchChoice;
const locationName = getLunchChoiceName(locationKey); const locationName = getLunchChoiceName(locationKey);
const loginObject = data.choices[locationKey]; const loginObject = data.choices[locationKey];
if (!loginObject) { if (!loginObject) {
return; return null;
} }
const locationLoginList = Object.entries(loginObject); const locationLoginList = Object.entries(loginObject);
const locationPickCount = locationLoginList.length const locationPickCount = locationLoginList.length
return ( return (
<tr key={key}> <tr key={key}>
{(locationPickCount ?? 0) > 1 ? ( <td>
<td>{locationName} ({locationPickCount})</td> {locationName}
) : ( {(locationPickCount ?? 0) > 1 && <span className="ms-1">({locationPickCount})</span>}
<td>{locationName}</td>)} </td>
<td className='p-0'> <td className='p-0'>
<Table> <Table className="nested-table">
<tbody> <tbody>
{locationLoginList.map((entry: [string, UserLunchChoice], index) => { {locationLoginList.map((entry: [string, UserLunchChoice]) => {
const login = entry[0]; const login = entry[0];
const userPayload = entry[1]; const userPayload = entry[1];
const userChoices = userPayload?.selectedFoods; const userChoices = userPayload?.selectedFoods;
@@ -508,13 +510,12 @@ function App() {
const isBuyer = userPayload?.isBuyer || false; const isBuyer = userPayload?.isBuyer || false;
return <tr key={entry[0]}> return <tr key={entry[0]}>
<td> <td>
{/* TODO zrefaktorovat, oddělit řádek do samostatné komponenty (a akce možná zvlášť) */}
{trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'> {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
<FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} /> <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
</span>} </span>}
{login} <strong>{login}</strong>
{userPayload.departureTime && <small> ({userPayload.departureTime})</small>} {userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
{userPayload.note && <span style={{ fontSize: 'small' }}> ({userPayload.note})</span>} {userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
{login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'> {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
<FontAwesomeIcon onClick={() => { <FontAwesomeIcon onClick={() => {
markAsBuyer(); markAsBuyer();
@@ -542,21 +543,21 @@ function App() {
</span>} </span>}
</td> </td>
{userChoices?.length && food ? <td> {userChoices?.length && food ? <td>
<ul> <div className="food-choices">
{userChoices?.map(foodIndex => { {userChoices?.map(foodIndex => {
const restaurantKey = key as Restaurant; const restaurantKey = key as Restaurant;
const foodName = food[restaurantKey]?.food?.[foodIndex].name; const foodName = food[restaurantKey]?.food?.[foodIndex].name;
return <li key={foodIndex}> return <div key={foodIndex} className="food-choice-item">
{foodName} <span className="food-choice-name">{foodName}</span>
{login === auth.login && canChangeChoice && {login === auth.login && canChangeChoice &&
<span title={`Odstranit ${foodName}`}> <span title={`Odstranit ${foodName}`}>
<FontAwesomeIcon onClick={() => { <FontAwesomeIcon onClick={() => {
doRemoveFoodChoice(restaurantKey, foodIndex); doRemoveFoodChoice(restaurantKey, foodIndex);
}} className='action-icon' icon={faTrashCan} /> }} className='action-icon' icon={faTrashCan} />
</span>} </span>}
</li> </div>
})} })}
</ul> </div>
</td> : null} </td> : null}
</tr> </tr>
} }
@@ -569,97 +570,94 @@ function App() {
)} )}
</tbody> </tbody>
</Table> </Table>
: <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div> : <div className='no-votes mt-4'>Zatím nikdo nehlasoval...</div>
} }
</div> </div>
{dayIndex === data.todayDayIndex && {dayIndex === data.todayDayIndex &&
<div className='mt-5'> <div className='pizza-section fade-in'>
{!data.pizzaDay && {!data.pizzaDay &&
<div style={{ textAlign: 'center' }}> <>
<h3>Pizza Day</h3>
<p>Pro dnešní den není aktuálně založen Pizza day.</p> <p>Pro dnešní den není aktuálně založen Pizza day.</p>
{loadingPizzaDay ? {loadingPizzaDay ?
<span> <span style={{ color: 'var(--luncher-primary)' }}>
<FontAwesomeIcon icon={faGear} className='fa-spin' /> Zjišťujeme dostupné pizzy <FontAwesomeIcon icon={faGear} className='fa-spin me-2' /> Zjišťujeme dostupné pizzy
</span> </span>
: :
<> <div>
<Button onClick={async () => { <Button onClick={async () => {
setLoadingPizzaDay(true); setLoadingPizzaDay(true);
await createPizzaDay().then(() => setLoadingPizzaDay(false)); await createPizzaDay().then(() => setLoadingPizzaDay(false));
}}>Založit Pizza day</Button> }}>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 && {data.pizzaDay &&
<div> <>
<div style={{ textAlign: 'center' }}> <h3>Pizza Day</h3>
<h3>Pizza day</h3> {
{ data.pizzaDay.state === PizzaDayState.CREATED &&
data.pizzaDay.state === PizzaDayState.CREATED && <>
<div> <p>
<p> Pizza Day je založen a spravován uživatelem <strong>{data.pizzaDay.creator}</strong>.<br />
Pizza Day je založen a spravován uživatelem {data.pizzaDay.creator}.<br /> Můžete upravovat své objednávky.
Můžete upravovat své objednávky. </p>
</p> {
{ data.pizzaDay.creator === auth.login &&
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 () => {
<Button className='danger mb-3' title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => { await deletePizzaDay();
await deletePizzaDay(); }}>Smazat Pizza day</Button>
}}>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 () => {
<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();
await lockPizzaDay(); }}>Uzamknout</Button>
}}>Uzamknout</Button> </div>
</> }
} </>
</div> }
} {
{ data.pizzaDay.state === PizzaDayState.LOCKED &&
data.pizzaDay.state === PizzaDayState.LOCKED && <>
<div> <p>Objednávky jsou uzamčeny uživatelem <strong>{data.pizzaDay.creator}</strong></p>
<p>Objednávky jsou uzamčeny uživatelem {data.pizzaDay.creator}</p> {data.pizzaDay.creator === auth.login &&
{data.pizzaDay.creator === auth.login && <div className="mb-4">
<> <Button variant="secondary" title="Umožní znovu editovat objednávky." onClick={async () => {
<Button className='danger mb-3' title="Umožní znovu editovat objednávky." onClick={async () => { await unlockPizzaDay();
await unlockPizzaDay(); }}>Odemknout</Button>
}}>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 () => {
<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();
await finishOrder(); }}>Objednáno</Button>
}}>Objednáno</Button> </div>
</> }
} </>
</div> }
} {
{ data.pizzaDay.state === PizzaDayState.ORDERED &&
data.pizzaDay.state === PizzaDayState.ORDERED && <>
<div> <p>Pizzy byly objednány uživatelem <strong>{data.pizzaDay.creator}</strong></p>
<p>Pizzy byly objednány uživatelem {data.pizzaDay.creator}</p> {data.pizzaDay.creator === auth.login &&
{data.pizzaDay.creator === auth.login && <div className="mb-4">
<div> <Button variant="secondary" title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => {
<Button className='danger mb-3' title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => { await lockPizzaDay();
await lockPizzaDay(); }}>Vrátit do "uzamčeno"</Button>
}}>Vrátit do "uzamčeno"</Button> <Button title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
<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 } });
await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } }); }}>Doručeno</Button>
}}>Doručeno</Button> </div>
</div> }
} </>
</div> }
} {
{ data.pizzaDay.state === PizzaDayState.DELIVERED &&
data.pizzaDay.state === PizzaDayState.DELIVERED && <p>
<div> Pizzy byly doručeny.
<p> {myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}
Pizzy byly doručeny. </p>
{myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''} }
</p>
</div>
}
</div>
{data.pizzaDay.state === PizzaDayState.CREATED && {data.pizzaDay.state === PizzaDayState.CREATED &&
<div style={{ textAlign: 'center' }}> <div className="pizza-order-form">
<SelectSearch <SelectSearch
search={true} search={true}
options={pizzaSuggestions} options={pizzaSuggestions}
@@ -668,29 +666,31 @@ function App() {
onBlur={_ => { }} onBlur={_ => { }}
onFocus={_ => { }} onFocus={_ => { }}
/> />
Poznámka: <input ref={pizzaPoznamkaRef} className='mt-3' type="text" onKeyDown={event => { <div className="d-flex align-items-center gap-2">
if (event.key === 'Enter') { <label style={{ color: 'var(--luncher-text-secondary)' }}>Poznámka:</label>
handlePizzaPoznamkaChange(); <input ref={pizzaPoznamkaRef} type="text" placeholder="Např. bez cibule" onKeyDown={event => {
} if (event.key === 'Enter') {
event.stopPropagation(); handlePizzaPoznamkaChange();
}} /> }
<Button event.stopPropagation();
style={{ marginLeft: '20px' }} }} />
disabled={!myOrder?.pizzaList?.length} <Button
onClick={handlePizzaPoznamkaChange}> disabled={!myOrder?.pizzaList?.length}
Uložit onClick={handlePizzaPoznamkaChange}>
</Button> Uložit
</Button>
</div>
</div> </div>
} }
<PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} /> <PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
{ {
data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr ? data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr &&
<div className='qr-code'> <div className='qr-code'>
<h3>QR platba</h3> <h3>QR platba</h3>
<img src={`/api/qr?login=${auth.login}`} alt='QR kód' /> <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
</div> : null </div>
} }
</div> </>
} }
</div> </div>
} }

88
client/src/Login.css
View File

@@ -1,13 +1,89 @@
.login { .login-page {
height: 100%; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; align-items: center;
text-align: center;
justify-content: 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; display: flex;
flex-direction: column; 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;
} }

42
client/src/Login.tsx
View File

@@ -36,21 +36,35 @@ export default function Login() {
}, [auth]); }, [auth]);
if (!auth?.login) { if (!auth?.login) {
return <div className='login'> return (
<h1>Luncher</h1> <div className='login-page'>
<h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4> <div className='login-card'>
<div className='login-inner'> <h1 className='login-logo'>Luncher</h1>
<p style={{ fontSize: "12px", marginTop: "10px" }}> <p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
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. <div className='login-form'>
</p> <div>
Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => { <label htmlFor="login-input">Zobrazované jméno</label>
if (event.key === 'Enter') { <input
doLogin() id="login-input"
} ref={loginRef}
}} /> type='text'
<Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button> 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>
</div> );
} }
return <div>Neplatný stav</div> return <div>Neplatný stav</div>
} }

20
client/src/components/Footer.tsx
View File

@@ -1,12 +1,12 @@
import { Navbar } from "react-bootstrap";
export default function Footer() { export default function Footer() {
return <Navbar className="text-light" variant='dark' expand="lg" style={{ return (
display: "flex", <footer className="footer">
justifyContent: "center", <span>
marginTop: "auto", // Pushne footer na spodek Zdroj. kódy dostupné na{' '}
flexShrink: 0 // Zabrání zmenšování při malém obsahu <a href="https://gitea.melancholik.eu/mates/Luncher" target="_blank" rel="noopener noreferrer">
}}> Gitea
<span>🄯 Žádná práva nevyhrazena. TODO a zdrojové kódy dostupné <a href="https://gitea.melancholik.eu/mates/Luncher">zde</a>.</span> </a>
</Navbar > </span>
</footer>
);
} }

63
client/src/components/Header.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; 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 { useAuth } from "../context/auth";
import SettingsModal from "./modals/SettingsModal"; import SettingsModal from "./modals/SettingsModal";
import { useSettings, ThemePreference } from "../context/settings"; import { useSettings, ThemePreference } from "../context/settings";
@@ -9,6 +9,14 @@ import RefreshMenuModal from "./modals/RefreshMenuModal";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import { STATS_URL } from "../AppRoutes"; import { STATS_URL } from "../AppRoutes";
import { FeatureRequest, getVotes, updateVote } from "../../../types"; 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() { export default function Header() {
const auth = useAuth(); const auth = useAuth();
@@ -18,8 +26,29 @@ export default function Header() {
const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false); const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false); const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false); const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]); 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(() => { useEffect(() => {
if (auth?.login) { if (auth?.login) {
getVotes().then(response => { getVotes().then(response => {
@@ -44,6 +73,12 @@ export default function Header() {
setRefreshMenuModalOpen(false); 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) => { const isValidInteger = (str: string) => {
str = str.trim(); str = str.trim();
if (!str) { if (!str) {
@@ -121,12 +156,21 @@ export default function Header() {
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="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 align="end" title={auth?.login} id="basic-nav-dropdown">
<NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item> <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
<NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</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={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
<NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item> <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
<NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item> <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
<NavDropdown.Item onClick={() => setChangelogModalOpen(true)}>Novinky</NavDropdown.Item>
<NavDropdown.Divider /> <NavDropdown.Divider />
<NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item> <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
</NavDropdown> </NavDropdown>
@@ -136,5 +180,22 @@ export default function Header() {
<RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} /> <RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
<FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} /> <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
<PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} /> <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> </Navbar>
} }

12
client/src/components/Loader.tsx
View File

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

56
client/src/components/PizzaOrderList.tsx
View File

@@ -15,29 +15,43 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Rea
} }
if (!orders?.length) { 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); const total = orders.reduce((total, order) => total + order.totalPrice, 0);
return <Table className="mt-3" striped bordered hover> return (
<thead> <div className="mt-4" style={{
<tr> background: 'var(--luncher-bg-card)',
<th>Jméno</th> borderRadius: 'var(--luncher-radius-lg)',
<th>Objednávka</th> overflow: 'hidden',
<th>Poznámka</th> border: '1px solid var(--luncher-border-light)',
<th>Příplatek</th> boxShadow: 'var(--luncher-shadow)'
<th>Cena</th> }}>
</tr> <Table className="mb-0" style={{ color: 'var(--luncher-text)' }}>
</thead> <thead style={{ background: 'var(--luncher-primary-light)' }}>
<tbody> <tr>
{orders.map(order => <tr key={order.customer}> <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Jméno</th>
<PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} /> <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Objednávka</th>
</tr>)} <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Poznámka</th>
<tr style={{ fontWeight: 'bold' }}> <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Příplatek</th>
<td colSpan={4}>Celkem</td> <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none', textAlign: 'right' }}>Cena</th>
<td>{`${total} Kč`}</td> </tr>
</tr> </thead>
</tbody> <tbody>
</Table> {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>
);
} }

32
client/src/components/modals/RefreshMenuModal.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { Modal, Button, Alert } from "react-bootstrap"; import { Modal, Button, Alert, Form } from "react-bootstrap";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
@@ -30,7 +30,6 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
if (res.ok) { if (res.ok) {
setRefreshMessage({ type: 'success', text: 'Uspesny fetch' }); setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
if (refreshPassRef.current) { if (refreshPassRef.current) {
// Clean hesla xd
refreshPassRef.current.value = ''; refreshPassRef.current.value = '';
} }
} else { } else {
@@ -50,7 +49,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
}; };
return ( return (
<Modal show={isOpen} onHide={handleClose} size="lg"> <Modal show={isOpen} onHide={handleClose}>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title><h2>Přenačtení menu</h2></Modal.Title> <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
</Modal.Header> </Modal.Header>
@@ -63,36 +62,29 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
</Alert> </Alert>
)} )}
<div className="mb-3"> <Form.Group className="mb-3">
Heslo: <input <Form.Label>Heslo</Form.Label>
<Form.Control
ref={refreshPassRef} ref={refreshPassRef}
type="password" type="password"
placeholder="Zadejte heslo" placeholder="Zadejte heslo"
className="form-control d-inline-block"
style={{ width: 'auto', marginLeft: '10px' }}
onKeyDown={e => e.stopPropagation()} onKeyDown={e => e.stopPropagation()}
/> />
</div> </Form.Group>
<div className="mb-3"> <Form.Group className="mb-3">
Typ refreshe: <select <Form.Label>Typ refreshe</Form.Label>
ref={refreshTypeRef} <Form.Select ref={refreshTypeRef} defaultValue="week">
className="form-select d-inline-block"
style={{ width: 'auto', marginLeft: '10px' }}
defaultValue="week"
>
<option value="week">Týden</option> <option value="week">Týden</option>
<option value="day">Den</option> <option value="day">Den</option>
</select> </Form.Select>
</div> </Form.Group>
<Button <Button
variant="info"
onClick={handleRefresh} onClick={handleRefresh}
disabled={refreshLoading} disabled={refreshLoading}
className="mb-3"
> >
{refreshLoading ? 'Refreshing...' : 'Refresh'} {refreshLoading ? 'Načítám...' : 'Obnovit menu'}
</Button> </Button>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>

112
client/src/components/modals/SettingsModal.tsx
View File

@@ -16,38 +16,82 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
const hideSoupsRef = useRef<HTMLInputElement>(null); const hideSoupsRef = useRef<HTMLInputElement>(null);
const themeRef = useRef<HTMLSelectElement>(null); const themeRef = useRef<HTMLSelectElement>(null);
return <Modal show={isOpen} onHide={onClose} size="lg"> return (
<Modal.Header closeButton> <Modal show={isOpen} onHide={onClose} size="lg">
<Modal.Title><h2>Nastavení</h2></Modal.Title> <Modal.Header closeButton>
</Modal.Header> <Modal.Title><h2>Nastavení</h2></Modal.Title>
<Modal.Body> </Modal.Header>
<h4>Vzhled</h4> <Modal.Body>
<Form.Group className="mb-3"> <h4>Vzhled</h4>
<Form.Label>Barevný motiv</Form.Label> <Form.Group className="mb-3">
<Form.Select ref={themeRef} defaultValue={settings?.themePreference}> <Form.Label>Barevný motiv</Form.Label>
<option value="system">Podle systému</option> <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
<option value="light">Světlý</option> <option value="system">Podle systému</option>
<option value="dark">Tmavý</option> <option value="light">Světlý</option>
</Form.Select> <option value="dark">Tmavý</option>
</Form.Group> </Form.Select>
<hr /> </Form.Group>
<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" }}> <hr />
<input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
</span> <h4>Obecné</h4>
<hr /> <Form.Group className="mb-3">
<h4>Bankovní účet</h4> <Form.Check
<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> id="hideSoupsCheckbox"
Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br /> ref={hideSoupsRef}
Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} /> type="checkbox"
</Modal.Body> label="Skrýt polévky"
<Modal.Footer> defaultChecked={settings?.hideSoups}
<Button variant="secondary" onClick={onClose}> title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
Storno />
</Button> <Form.Text className="text-muted">
<Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}> Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
Uložit </Form.Text>
</Button> </Form.Group>
</Modal.Footer>
</Modal> <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>
);
} }

18
client/src/context/settings.tsx
View File

@@ -33,11 +33,23 @@ export const useSettings = () => {
return useContext(settingsContext); 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 { function useProvideSettings(): SettingsContextProps {
const [bankAccount, setBankAccount] = useState<string | undefined>(); const [bankAccount, setBankAccount] = useState<string | undefined>();
const [holderName, setHolderName] = useState<string | undefined>(); const [holderName, setHolderName] = useState<string | undefined>();
const [hideSoups, setHideSoups] = useState<boolean | undefined>(); const [hideSoups, setHideSoups] = useState<boolean | undefined>();
const [themePreference, setTheme] = useState<ThemePreference>('system'); const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
useEffect(() => { useEffect(() => {
const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY); const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
@@ -52,10 +64,6 @@ function useProvideSettings(): SettingsContextProps {
if (hideSoups !== null) { if (hideSoups !== null) {
setHideSoups(hideSoups === 'true'); setHideSoups(hideSoups === 'true');
} }
const savedTheme = localStorage.getItem(THEME_KEY) as ThemePreference | null;
if (savedTheme && ['system', 'light', 'dark'].includes(savedTheme)) {
setTheme(savedTheme);
}
}, []) }, [])
useEffect(() => { useEffect(() => {

20
client/src/index.css
View File

@@ -7,14 +7,32 @@ body,
body { body {
margin: 0; 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', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.5;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; 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);
}

82
client/src/pages/StatsPage.scss
View File

@@ -2,15 +2,91 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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 { .week-navigator {
display: flex; display: flex;
align-items: center; 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 { .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);
}
} }