Rate parity: expected-markup config, alert writer job, alerts UI + direct-link UI
Parity was read-only — the alerts table had no producer, so the Market
View badge could never fire. Now:
- jobs/check_rate_parity.py: daily 06:45 job comparing own Booking.com
lead-in rate vs cheapest Newbook rate per date, measured against an
EXPECTED markup (we deliberately price Booking.com higher to cover
commission): alert when deviation from newbook*(1+markup%) exceeds the
tolerance. Creates/updates active alerts, auto-resolves dates back in
line, leaves acknowledged dates alone.
- config keys: parity_check_enabled, parity_expected_markup_pct,
parity_tolerance_pct (system_config)
- POST /competitors/parity/check manual trigger; GET /parity now uses the
same markup/tolerance and cheapest-across-categories Newbook rate
- Settings -> Rate Parity tab: markup %, tolerance %, enable toggle,
run-now with result summary
- Market View -> Parity Alerts tab: status-filtered list w/ acknowledge
- Market View -> Hotels: direct-link dropdown per competitor (new PUT
/competitors/hotels/{id}/direct-link) — closes the never-written
direct_hotel_id gap so the matrix direct-rates sub-row can populate
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
029e3b379f
commit
493e87b2dc
5 changed files with 595 additions and 12 deletions
|
|
@ -254,7 +254,7 @@ const inputLabelStyle: React.CSSProperties = {
|
|||
// TABS
|
||||
// ============================================
|
||||
|
||||
type TabId = 'matrix' | 'hotels' | 'settings'
|
||||
type TabId = 'matrix' | 'hotels' | 'parity' | 'settings'
|
||||
|
||||
// ============================================
|
||||
// STATUS PANEL
|
||||
|
|
@ -733,6 +733,162 @@ const CoverageGrid: React.FC<{ coverage: CoverageResponse }> = ({ coverage }) =>
|
|||
// HOTELS TAB
|
||||
// ============================================
|
||||
|
||||
// ============================================
|
||||
// PARITY ALERTS TAB
|
||||
// ============================================
|
||||
|
||||
interface ParityAlert {
|
||||
id: number
|
||||
rate_date: string
|
||||
room_category: string | null
|
||||
newbook_rate: number | null
|
||||
booking_com_rate: number | null
|
||||
difference_pct: number | null
|
||||
alert_type: string
|
||||
alert_status: string
|
||||
created_at: string | null
|
||||
acknowledged_at: string | null
|
||||
acknowledged_by: string | null
|
||||
}
|
||||
|
||||
const ParityAlertsTab: React.FC = () => {
|
||||
const queryClient = useQueryClient()
|
||||
const [statusFilter, setStatusFilter] = useState<string>('active')
|
||||
|
||||
const { data: alerts, isLoading } = useQuery<ParityAlert[]>({
|
||||
queryKey: ['parity-alerts', statusFilter],
|
||||
queryFn: async () => {
|
||||
const params = statusFilter ? `?status=${statusFilter}` : ''
|
||||
return (await api.get(`/competitors/parity/alerts${params}`)).data
|
||||
},
|
||||
})
|
||||
|
||||
const { data: parityConfig } = useQuery<Record<string, string | null>>({
|
||||
queryKey: ['system-config'],
|
||||
queryFn: async () => (await api.get('/competitors/config/system')).data,
|
||||
})
|
||||
|
||||
const ackMutation = useMutation({
|
||||
mutationFn: async (alertId: number) =>
|
||||
(await api.put(`/competitors/parity/alerts/${alertId}/acknowledge`)).data,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['parity-alerts'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['parity-alert-count'] })
|
||||
},
|
||||
})
|
||||
|
||||
const markup = parityConfig?.['parity_expected_markup_pct'] ?? '0'
|
||||
const tolerance = parityConfig?.['parity_tolerance_pct'] ?? '2'
|
||||
|
||||
const thStyle: React.CSSProperties = {
|
||||
textAlign: 'left', padding: '8px 12px', fontSize: 11, fontWeight: 600,
|
||||
color: 'var(--text-mid)', textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
}
|
||||
const tdStyle: React.CSSProperties = {
|
||||
padding: '9px 12px', fontSize: 13, borderBottom: '1px solid var(--border)',
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-mid)', marginBottom: 14, maxWidth: 720 }}>
|
||||
Dates where our Booking.com rate deviates from the expected level
|
||||
(Newbook rate + {markup}% markup, ±{tolerance}% tolerance). Checked daily at 06:45 —
|
||||
adjust the markup and tolerance in Settings → Rate Parity. Acknowledge a date once
|
||||
dealt with; alerts auto-resolve when the rates come back in line.
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 6, marginBottom: 14, alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 12, color: 'var(--text-mid)' }}>Status:</span>
|
||||
{['active', 'acknowledged', 'resolved', ''].map(s => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setStatusFilter(s)}
|
||||
style={mergeStyles(
|
||||
buttonStyle(statusFilter === s ? 'secondary' : 'outline', 'small'),
|
||||
statusFilter === s ? {} : { opacity: 0.7 }
|
||||
)}
|
||||
>
|
||||
{s || 'All'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div style={styles.loading}><div style={styles.spinner} /><span>Loading alerts...</span></div>
|
||||
)}
|
||||
|
||||
{!isLoading && (!alerts || alerts.length === 0) && (
|
||||
<div style={styles.emptyState}>
|
||||
<h3 style={{ margin: 0, color: 'var(--text-dark)' }}>No {statusFilter || ''} parity alerts</h3>
|
||||
<p style={{ color: 'var(--text-mid)', margin: '8px 0 0' }}>
|
||||
{statusFilter === 'active'
|
||||
? 'Booking.com is pricing within the expected band of Newbook.'
|
||||
: 'Nothing here yet.'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && alerts && alerts.length > 0 && (
|
||||
<div style={{ background: 'var(--white, #fff)', border: '1px solid var(--border)', borderRadius: 10, overflow: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Date</th>
|
||||
<th style={thStyle}>Newbook</th>
|
||||
<th style={thStyle}>Booking.com</th>
|
||||
<th style={thStyle}>Deviation</th>
|
||||
<th style={thStyle}>Room</th>
|
||||
<th style={thStyle}>Status</th>
|
||||
<th style={thStyle}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alerts.map(a => (
|
||||
<tr key={a.id}>
|
||||
<td style={mergeStyles(tdStyle, { fontWeight: 600 })}>{a.rate_date}</td>
|
||||
<td style={tdStyle}>{a.newbook_rate != null ? `£${a.newbook_rate.toFixed(2)}` : '—'}</td>
|
||||
<td style={tdStyle}>{a.booking_com_rate != null ? `£${a.booking_com_rate.toFixed(2)}` : '—'}</td>
|
||||
<td style={tdStyle}>
|
||||
{a.difference_pct != null && (
|
||||
<span style={badgeStyle(a.alert_type === 'higher' ? 'warning' : 'error')}>
|
||||
{a.difference_pct > 0 ? '+' : ''}{a.difference_pct.toFixed(1)}% vs expected
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td style={mergeStyles(tdStyle, { color: 'var(--text-mid)', fontSize: 12 })}>{a.room_category || '—'}</td>
|
||||
<td style={tdStyle}>
|
||||
<span style={badgeStyle(
|
||||
a.alert_status === 'active' ? 'error'
|
||||
: a.alert_status === 'acknowledged' ? 'info' : 'success'
|
||||
)}>
|
||||
{a.alert_status}
|
||||
</span>
|
||||
</td>
|
||||
<td style={tdStyle}>
|
||||
{a.alert_status === 'active' && (
|
||||
<button
|
||||
style={buttonStyle('outline', 'small')}
|
||||
disabled={ackMutation.isPending}
|
||||
onClick={() => ackMutation.mutate(a.id)}
|
||||
>
|
||||
Acknowledge
|
||||
</button>
|
||||
)}
|
||||
{a.alert_status === 'acknowledged' && a.acknowledged_by && (
|
||||
<span style={{ fontSize: 11, color: 'var(--text-mid)' }}>by {a.acknowledged_by}</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const HotelsTab: React.FC = () => {
|
||||
const queryClient = useQueryClient()
|
||||
const [tierFilter, setTierFilter] = useState<string>('')
|
||||
|
|
@ -754,6 +910,24 @@ const HotelsTab: React.FC = () => {
|
|||
},
|
||||
})
|
||||
|
||||
// Direct booking-engine hotels, for linking (powers the matrix direct-rates sub-row)
|
||||
const { data: directHotels } = useQuery<{ id: number; name: string }[]>({
|
||||
queryKey: ['direct-hotels-link-options'],
|
||||
queryFn: async () => (await api.get('/direct/hotels')).data,
|
||||
retry: false,
|
||||
})
|
||||
|
||||
const linkMutation = useMutation({
|
||||
mutationFn: async ({ hotelId, directId }: { hotelId: number, directId: number | null }) => {
|
||||
return (await api.put(`/competitors/hotels/${hotelId}/direct-link`, { direct_hotel_id: directId })).data
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['competitor-hotels'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['competitor-matrix'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['market-direct-rates'] })
|
||||
},
|
||||
})
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
if (!hotels) return { own: [], competitor: [], market: [] }
|
||||
return {
|
||||
|
|
@ -775,6 +949,22 @@ const HotelsTab: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div style={styles.hotelActions}>
|
||||
{hotel.tier === 'competitor' && directHotels && directHotels.length > 0 && (
|
||||
<select
|
||||
value={hotel.direct_hotel_id ?? ''}
|
||||
onChange={e => linkMutation.mutate({
|
||||
hotelId: hotel.id,
|
||||
directId: e.target.value ? parseInt(e.target.value) : null,
|
||||
})}
|
||||
title="Link to a direct booking-engine competitor to show their direct rates in the matrix"
|
||||
style={mergeStyles(styles.tierSelect, { maxWidth: 190 })}
|
||||
>
|
||||
<option value="">No direct link</option>
|
||||
{directHotels.map(d => (
|
||||
<option key={d.id} value={d.id}>Direct: {d.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<select
|
||||
value={hotel.tier}
|
||||
onChange={e => tierMutation.mutate({ hotelId: hotel.id, tier: e.target.value })}
|
||||
|
|
@ -1455,6 +1645,7 @@ const CompetitorRates: React.FC = () => {
|
|||
const tabs: { id: TabId; label: string }[] = [
|
||||
{ id: 'matrix', label: 'Rate Matrix' },
|
||||
{ id: 'hotels', label: 'Hotels' },
|
||||
{ id: 'parity', label: 'Parity Alerts' },
|
||||
{ id: 'settings', label: 'Scraper Settings' },
|
||||
]
|
||||
|
||||
|
|
@ -1493,6 +1684,7 @@ const CompetitorRates: React.FC = () => {
|
|||
<div style={styles.tabContent}>
|
||||
{activeTab === 'matrix' && <RateMatrixTab />}
|
||||
{activeTab === 'hotels' && <HotelsTab />}
|
||||
{activeTab === 'parity' && <ParityAlertsTab />}
|
||||
{activeTab === 'settings' && <SettingsTab />}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import api from '../api'
|
|||
const TABS = [
|
||||
{ id: 'newbook', label: 'Newbook Sync' },
|
||||
{ id: 'proxy', label: 'Scraper Proxy' },
|
||||
{ id: 'parity', label: 'Rate Parity' },
|
||||
{ id: 'system', label: 'System' },
|
||||
]
|
||||
|
||||
|
|
@ -81,6 +82,15 @@ export default function Settings() {
|
|||
<ProxyTab />
|
||||
)}
|
||||
|
||||
{activeTab === 'parity' && (
|
||||
<ParityTab
|
||||
config={config}
|
||||
isLoading={isLoading}
|
||||
onSave={(key, val) => saveMutation.mutate({ key, value: val })}
|
||||
saving={saveMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'system' && (
|
||||
<SystemTab config={config} isLoading={isLoading} />
|
||||
)}
|
||||
|
|
@ -88,6 +98,135 @@ export default function Settings() {
|
|||
)
|
||||
}
|
||||
|
||||
// ─── Rate Parity Tab ──────────────────────────────────────────────────────────
|
||||
|
||||
interface ParityCheckResult {
|
||||
status: string
|
||||
dates_compared?: number
|
||||
created?: number
|
||||
updated?: number
|
||||
resolved?: number
|
||||
}
|
||||
|
||||
function ParityTab({ config, isLoading, onSave, saving }: {
|
||||
config: SystemConfig | undefined
|
||||
isLoading: boolean
|
||||
onSave: (key: string, value: string) => void
|
||||
saving: boolean
|
||||
}) {
|
||||
const [markup, setMarkup] = useState('')
|
||||
const [tolerance, setTolerance] = useState('')
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
const [checkResult, setCheckResult] = useState<ParityCheckResult | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (config && !loaded) {
|
||||
setMarkup(config['parity_expected_markup_pct'] ?? '0')
|
||||
setTolerance(config['parity_tolerance_pct'] ?? '2')
|
||||
setLoaded(true)
|
||||
}
|
||||
}, [config, loaded])
|
||||
|
||||
const enabled = (config?.['parity_check_enabled'] ?? 'true').toLowerCase() !== 'false'
|
||||
|
||||
const runCheck = useMutation({
|
||||
mutationFn: () => api.post('/competitors/parity/check').then(r => r.data),
|
||||
onSuccess: (data) => setCheckResult(data),
|
||||
})
|
||||
|
||||
if (isLoading) return <div className="loading-state"><div className="spinner" />Loading…</div>
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 720 }}>
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<ShieldCheck size={15} strokeWidth={1.75} style={{ verticalAlign: -2, marginRight: 6 }} />
|
||||
Rate Parity Check
|
||||
</div>
|
||||
<div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ fontSize: 12, color: 'var(--text-mid)' }}>
|
||||
Compares our own hotel's Booking.com rate against the Newbook rate each morning (06:45).
|
||||
We deliberately price Booking.com higher to cover commission, so the check measures against
|
||||
an <strong>expected markup</strong> rather than raw equality: alert when Booking.com deviates
|
||||
from Newbook × (1 + markup) by more than the tolerance. Alerts appear on the Market View
|
||||
badge; acknowledging a date suppresses re-alerts for it, and dates that come back in line
|
||||
auto-resolve.
|
||||
</div>
|
||||
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: 13 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={enabled}
|
||||
onChange={e => onSave('parity_check_enabled', e.target.checked ? 'true' : 'false')}
|
||||
style={{ width: 15, height: 15, accentColor: 'var(--gold)' }}
|
||||
/>
|
||||
Run daily parity check
|
||||
</label>
|
||||
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
<div>
|
||||
<label style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-mid)', display: 'block', marginBottom: 4 }}>
|
||||
Expected Booking.com markup (%)
|
||||
</label>
|
||||
<input
|
||||
type="number" step="0.5" style={{ width: 140 }}
|
||||
value={markup} onChange={e => setMarkup(e.target.value)}
|
||||
placeholder="e.g. 15"
|
||||
/>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-mid)', marginTop: 4 }}>
|
||||
How much higher Booking.com should be than Newbook.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-mid)', display: 'block', marginBottom: 4 }}>
|
||||
Tolerance (± %)
|
||||
</label>
|
||||
<input
|
||||
type="number" step="0.5" style={{ width: 140 }}
|
||||
value={tolerance} onChange={e => setTolerance(e.target.value)}
|
||||
placeholder="e.g. 2"
|
||||
/>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-mid)', marginTop: 4 }}>
|
||||
Allowed deviation from expected before alerting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
disabled={saving}
|
||||
onClick={() => {
|
||||
onSave('parity_expected_markup_pct', markup || '0')
|
||||
onSave('parity_tolerance_pct', tolerance || '2')
|
||||
}}
|
||||
>
|
||||
<Save size={13} strokeWidth={1.75} />
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline"
|
||||
disabled={runCheck.isPending}
|
||||
onClick={() => runCheck.mutate()}
|
||||
>
|
||||
<RefreshCw size={13} strokeWidth={1.75} />
|
||||
{runCheck.isPending ? 'Checking…' : 'Run check now'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{checkResult && (
|
||||
<div style={{ padding: '10px 14px', background: '#f0fdf4', borderRadius: 8, border: '1px solid #bbf7d0', fontSize: 13 }}>
|
||||
{checkResult.status === 'disabled'
|
||||
? 'Check is disabled — enable it above first.'
|
||||
: `Compared ${checkResult.dates_compared} dates — ${checkResult.created} new alerts, ${checkResult.updated} updated, ${checkResult.resolved} resolved.`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Scraper Proxy Tab ────────────────────────────────────────────────────────
|
||||
|
||||
interface ProxyConfigData {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue