feat(frontend): workday summary modal, print analytics UI, staff zone-PIN management, report upgrades
manager_dashboard: - DashboardPage: WorkdaySummaryModal integration (view / close-day flows); revenue chart upgrades - WorkdaySummaryModal: new component — shows full shift/revenue summary before closing the day - StaffTab: full rewrite — zone-assignment modal, reset-PIN modal, actions dropdown, richer staff card - ProductsTab: digital-menu fields surfaced in product form - PrintFontsTab: expanded font-size/weight controls per printer channel - TablesConfigTab / TablesPage / tableColourStore: color picker and zone fields for tables - FilterBar: unified filter component with date-range, printer, and category selectors - CategoryPerformance / ProductPerformance / TableAnalytics: donut/bar charts, thermal+browser print modals, richer breakdown tables - PrinterHistory: redesigned with per-printer drill-down and summary blocks - TrafficAnalytics / WorkDaySummary / RevenueTrends / ShiftsOverview / StaffLeaderboard: polish pass - tokens.js: design token updates waiter_pwa: - TableCard: show table color indicator from zone/colour config Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import toast from 'react-hot-toast'
|
||||
import client from '../../../api/client'
|
||||
@@ -30,6 +30,13 @@ const DIVIDER_OPTIONS = [
|
||||
{ value: 'empty', label: 'Κενή γραμμή', chars: '' },
|
||||
]
|
||||
|
||||
const DOT_STYLE_OPTIONS = [
|
||||
{ value: 'dot_space', label: 'Τελεία + κενό ( . )', preview: '. . . . .' },
|
||||
{ value: 'dot', label: 'Τελείες ( . )', preview: '.........' },
|
||||
{ value: 'dash_space', label: 'Παύλα + κενό ( - )', preview: '- - - - -' },
|
||||
{ value: 'underscore', label: 'Κάτω παύλα ( _ )', preview: '_________' },
|
||||
]
|
||||
|
||||
const FONT_DEFAULTS = {
|
||||
'print.font_order_number': '48:1:0',
|
||||
'print.font_meta': '0:0:0',
|
||||
@@ -41,6 +48,7 @@ const FONT_DEFAULTS = {
|
||||
'print.font_item_note': '0:0:0',
|
||||
'print.font_order_note': '0:1:0',
|
||||
'print.divider_style': 'dash',
|
||||
'print.dot_style': 'dot_space:0:0',
|
||||
'print.ticket_mode': 'detailed',
|
||||
'print.beep_on_ticket': 'true',
|
||||
'print.beep_pattern': 'double',
|
||||
@@ -231,6 +239,100 @@ function DividerRow({ value, onChange, isPending }) {
|
||||
)
|
||||
}
|
||||
|
||||
// ── Dot style row ─────────────────────────────────────────────────────────
|
||||
function decodeDotStyle(val) {
|
||||
if (!val) return { style: 'dot_space', size: '0', bold: false }
|
||||
const [style, size, bold] = val.split(':')
|
||||
return { style: style ?? 'dot_space', size: size ?? '0', bold: bold === '1' }
|
||||
}
|
||||
function encodeDotStyle(style, size, bold) {
|
||||
return `${style}:${size}:${bold ? '1' : '0'}`
|
||||
}
|
||||
|
||||
function DotStyleRow({ value, onChange, isPending }) {
|
||||
const { style, size, bold } = decodeDotStyle(value)
|
||||
const selected = DOT_STYLE_OPTIONS.find(o => o.value === style) ?? DOT_STYLE_OPTIONS[0]
|
||||
const s = sizeStyle[size] ?? sizeStyle['0']
|
||||
|
||||
function handleStyle(e) { onChange('print.dot_style', encodeDotStyle(e.target.value, size, bold)) }
|
||||
function handleSize(e) { onChange('print.dot_style', encodeDotStyle(style, e.target.value, bold)) }
|
||||
function handleBold() { onChange('print.dot_style', encodeDotStyle(style, size, !bold)) }
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 14,
|
||||
padding: '10px 20px 10px 36px',
|
||||
borderBottom: '1px solid #f4f4f2',
|
||||
background: '#fafafa',
|
||||
}}>
|
||||
<span style={{ color: '#d1d5db', fontSize: 13, flexShrink: 0, marginRight: -6 }}>└</span>
|
||||
|
||||
<div style={{ flex: '1 1 160px', minWidth: 140 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: '#111315', display: 'block', marginBottom: 2 }}>
|
||||
Στυλ Dots
|
||||
</span>
|
||||
<span style={{ fontSize: 11, color: '#9ca3af' }}>Χαρακτήρας · μέγεθος · έντονο για τη γραμμή dot-leader</span>
|
||||
</div>
|
||||
|
||||
{/* Style dropdown */}
|
||||
<select
|
||||
value={style}
|
||||
onChange={handleStyle}
|
||||
disabled={isPending}
|
||||
style={{
|
||||
height: 36, borderRadius: 8, border: '1px solid #dfe2e6',
|
||||
background: 'white', padding: '0 10px', fontSize: 13,
|
||||
color: '#111315', cursor: 'pointer', width: 160, flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{DOT_STYLE_OPTIONS.map(o => (
|
||||
<option key={o.value} value={o.value}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Size dropdown */}
|
||||
<select
|
||||
value={size}
|
||||
onChange={handleSize}
|
||||
disabled={isPending}
|
||||
style={{
|
||||
height: 36, borderRadius: 8, border: '1px solid #dfe2e6',
|
||||
background: 'white', padding: '0 10px', fontSize: 13,
|
||||
color: '#111315', cursor: 'pointer', width: 160, flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{FONT_SIZE_OPTIONS.map(o => (
|
||||
<option key={o.size} value={o.size}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Bold toggle */}
|
||||
<ToggleBtn active={bold} onClick={handleBold} disabled={isPending} label="ΕΝΤΟΝΑ" />
|
||||
|
||||
{/* Preview */}
|
||||
<div style={{
|
||||
background: '#1a1a1a', borderRadius: 8,
|
||||
width: PREVIEW_W, height: PREVIEW_H, flexShrink: 0,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<span style={{
|
||||
color: '#f5f5f5',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: s.fontSize,
|
||||
fontWeight: bold ? 800 : 400,
|
||||
transform: `scaleX(${s.scaleX}) scaleY(${s.scaleY})`,
|
||||
transformOrigin: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'block',
|
||||
}}>
|
||||
Esp {selected.preview} x2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Ticket mode section ────────────────────────────────────────────────────
|
||||
function TicketModeSection({ value, onChange, isPending, printers }) {
|
||||
const [selectedPrinter, setSelectedPrinter] = useState(null)
|
||||
@@ -535,7 +637,7 @@ function BeepSection({ beepEnabled, beepPattern, onChange, isPending, printers }
|
||||
// ── Printers section ───────────────────────────────────────────────────────
|
||||
|
||||
const PROTOCOLS = [{ value: 'escpos_tcp', label: 'ESC/POS TCP (standard)' }]
|
||||
const EMPTY_FORM = { name: '', ip_address: '', port: 9100, protocol: 'escpos_tcp', is_active: true }
|
||||
const EMPTY_FORM = { name: '', ip_address: '', port: 9100, protocol: 'escpos_tcp', line_width: 48, is_active: true }
|
||||
|
||||
function PrinterForm({ initial, onSave, onCancel, isPending }) {
|
||||
const [form, setForm] = useState(initial ?? EMPTY_FORM)
|
||||
@@ -567,6 +669,11 @@ function PrinterForm({ initial, onSave, onCancel, isPending }) {
|
||||
{PROTOCOLS.map(p => <option key={p.value} value={p.value}>{p.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: '0 0 90px' }}>
|
||||
<label style={{ fontSize: 11, fontWeight: 600, color: '#6b7280' }}>ΧΑΡΑΚΤ./ΓΡΑΜΜΗ</label>
|
||||
<input value={form.line_width} onChange={e => set('line_width', parseInt(e.target.value) || 48)}
|
||||
type="number" min={20} max={80} style={inputStyle} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center', paddingBottom: 2 }}>
|
||||
<button onClick={() => onSave(form)} disabled={isPending || !form.name.trim() || !form.ip_address.trim()}
|
||||
style={btnPrimary}>Αποθήκευση</button>
|
||||
@@ -631,6 +738,7 @@ function PrinterRow({ printer, onEdit, onDelete, onTest, onToggle, testPending }
|
||||
{printer.ip_address}:{printer.port}
|
||||
</span>
|
||||
<span style={{ fontSize: 11, color: '#9ca3af', marginLeft: 6 }}>— {printer.protocol}</span>
|
||||
<span style={{ fontSize: 11, color: '#9ca3af', marginLeft: 6 }}>— {printer.line_width ?? 48} χαρ.</span>
|
||||
</div>
|
||||
|
||||
<span style={{
|
||||
@@ -844,15 +952,23 @@ export default function PrintFontsTab() {
|
||||
{FONT_GROUPS.map(group => (
|
||||
<div key={group.group}>
|
||||
<SubgroupHeader label={group.group} />
|
||||
{group.fields.map((field, idx) => (
|
||||
<FontRow
|
||||
key={field.key}
|
||||
field={field}
|
||||
value={val(field.key)}
|
||||
onChange={handleChange}
|
||||
isPending={updateMut.isPending}
|
||||
nested={group.fields.length > 1}
|
||||
/>
|
||||
{group.fields.map((field) => (
|
||||
<React.Fragment key={field.key}>
|
||||
<FontRow
|
||||
field={field}
|
||||
value={val(field.key)}
|
||||
onChange={handleChange}
|
||||
isPending={updateMut.isPending}
|
||||
nested={group.fields.length > 1}
|
||||
/>
|
||||
{field.key === 'print.font_ingredient' && (
|
||||
<DotStyleRow
|
||||
value={val('print.dot_style')}
|
||||
onChange={handleChange}
|
||||
isPending={updateMut.isPending}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user